#kontejner {
width:1255px;
}

#left {
width:301px;
float:left;
margin-right:50px;

}

#right {
width:302px;
float:left;
margin-left:2px;
}

#zik {
position:fixed;
margin-top:30px;
width:301px;
height:601px;
}

#zak {
position:fixed;
margin-top:30px;
width:301px;
height:601px;
}

#wrap{
height:auto;   
width:750px;
background:#4D4DFF;
}
h1{
font-size: 50px;
font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
color: red;
text-shadow: -1px -1px 1px black;
margin-top:-10px;

}
#header p {
color:white;
font-weight:bold;
margin-top:-50px;
}
#content {
    position: relative;
    background-color: #E0EEEE;
    width: 100%;
    float: left;
	
}

#blok h2{
font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
color: red;
text-shadow: -1px -1px 1px black;
font-size:30px;
 }

#blok p{
font-family:sans-serif;
font-size:17px;
text-align:left;
white-space: pre;
white-space: pre-wrap;
font-weight: 600; 
margin-left:31px;
margin-right:30px;
}


#header {
background-color:#0451BC;
color:white;   
width:100%; 
float:left;
}


#href  h3{
margin-top:-2px;        
font-size: 22px;
color:blue;
}


  
#header p {
color:white;
font-weight:bold;
margin-top:-50px;
}
#nav{
background-color:red;
}


#oglasi {
    width:100%;
}

#okvir {
    background:white;
    width:100%;
    height:auto;
}
#okvir {
width: fit-content;
height: fit-content;
text-align: center;
}
#href {
    width: 100%;
    height: 65px;
    margin-top: 1px;
    background-color: Papayawhip;
    display: flex;
    justify-content: center;
    align-items: center;
}

#ram {
display: inline-block;
margin: 10px;
border:2px ridge silver;
width:250px;
height:290px;
}
#ram h3 {
font-family: Verdana;  
font-size:15px;
}

#slika {
display: inline-block;
width:100%;
height:225px;
}

   #ram {
    display: inline-block; /* Prikazuje element kao inline-blok */
    vertical-align: top; /* Poravnanje na vrh ako blokovi imaju različite visine */
    margin: 10px; /* Dodaje razmak između blokova */
    width: 250px; /* Fiksna širina da elementi budu ujednačeni */
    box-sizing: border-box; /* Da margine i padding ne povećavaju širinu */
    border: 1px solid #ddd; /* Opciona granica za vizuelno odvajanje */
    text-align: center; /* Centriranje sadržaja unutar diva */
}

#slika img {
    width: 100%; /* Da slika ispuni širinu parent diva */
    height: 100%; /* Zadržava proporcije slike */
}

#href h2 {
    font-size: 16px; /* Prilagođavanje veličine fonta */
    line-height: 1.2; /* Optimizacija visine linije */
    margin: 10px 0; /* Razmak iznad i ispod naslova */
    word-wrap: break-word; /* Omogućava prelamanje teksta */
    overflow-wrap: break-word;
} 


.a {
    width:500px;
}
.b {
    width:320px;
}
.c {
    width:650px;
}

.img {
    width:100%;
    height:100%;
}
#href h2 {
font-size:20px;
} 




#okno {
	width:250px;
	
	background:azure;
	
	border-radius:20px;
	text-decoration:none;
}
#okno:hover {
	color:white;
	background:violet;
	border:3px solid azure;
}
hr {   
    height: 5px;
    background: #0451BC; 
}
.aa{
	
	text-decoration:none;
}

.add {
	border:3px solid red;    
    margin-top:50px;  
	font-weight:bold;
	padding:10px;
	border-radius:5px;
	   }


.classname {

	background:white;
	border-radius:5px;
	border:1px solid #573357;
	display:inline-block;
	color:#1c0c1c;
	font-family:arial;
	font-size:16px;
	font-weight:bold;
	padding:8px 15px;
	text-decoration:none;
	margin:2px;
      
}
.classname:hover {
	background:silver;
        color:white;
}
.class {

	background:white;
	border-radius:3px;
	border:1px solid #573357;
	display:inline-block;
	color:#1c0c1c;
	font-family:arial;
	font-size:16px;
	font-weight:bold;
	padding:8px 16px;
	text-decoration:none;
	margin:2px;
      
}
.class:hover {
	background:silver;
        color:white;
}
.klasa {
background:black;

	border-radius:3px;
	border:1px solid #573357;
	display:inline-block;
	color:white;
	font-family:arial;
	font-size:16px;
	font-weight:bold;

	text-decoration:none;

	
}

.klasa h2 {
    margin-top: 1px;
    margin-bottom: 1px;
    margin-left:10px;
    margin-right:10px;
}

 #saglasnost1, #saglasnost2 {
  display: none;
}

/* Stilizuj labelu koja deluje kao checkbox za saglasnost1 */
#saglasnost1 + label {
  font-size: 18px;
  font-weight: bold;
  color: red;
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  display: inline-block;
}

/* Kreiraj kvadrat za checkbox za saglasnost1 */
#saglasnost1 + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 25px;
  height: 25px;
  border: 2px solid red;
  background-color: white;
}

/* Kreiraj "check" znak unutar kvadrata za saglasnost1 */
#saglasnost1:checked + label:after {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: 10px;
  height: 10px;
  background-color: red;
}

/* Stilizuj labelu koja deluje kao checkbox za saglasnost2 */
#saglasnost2 + label {
  font-size: 18px;
  font-weight: bold;
  color: red;
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  display: inline-block;
}

/* Kreiraj kvadrat za checkbox za saglasnost2 */
#saglasnost2 + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 25px;
  height: 25px;
  border: 2px solid red;
  background-color: white;
}

/* Kreiraj "check" znak unutar kvadrata za saglasnost2 */
#saglasnost2:checked + label:after {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: 10px;
  height: 10px;
  background-color: red;
}



.z {
color:red;

}
@media only screen and (max-device-width: 1260px) {
#kontejner {
width:955px;
}
#right {
display:none;	
}
}
@media only screen and (max-device-width: 955px) {
#kontejner {
width:100%;
}
#wrap{
width:99%;
background:#4D4DFF;
}
#header h1 {
font-size:45px;
margin-top:1px;
-webkit-text-stroke: 1px lightgray;
}
#header p {
margin-top:1px;
}
}

@media only screen and (max-device-width: 800px) {
#wrap{
width:99%;
}
#header h1 {
font-size:40px;
}
#blok{
  width: 650px;
  
}
#blok p{
font-weight:normal;     
font-size:16px;
margin-left:12px;
margin-right:6px;
} 
.classname {
font-size:17px;
	padding:10px 15px;
	text-shadow:1px 1px 0px #c99198;
	margin:2px;
      
}
.klasa {
	font-size:17px;
	padding:10px 10px;
	margin:2px;	
}
#blok h2{
font-size: 37px;
  }
}
@media only screen and (max-device-width: 751px) {

#blok{
  width: 600px;
}
#blok h2{
font-size: 36px;
  }
}
@media only screen and (max-device-width: 701px) {
#blok h2{
font-size: 35px;
  }
 }
@media only screen and (max-width:651px) {
  #blok{
  width: 100%;
}
.c {
    width:90%;
}
} 
@media only screen and (max-device-width: 603px) {
#wrap{
width:99%;
}
div#header h1 {
font-size:35px;
}
 #blok{
  width: 90%;
} 
#blok h2 {
font-size: 30px;
  }

.classname {
font-size:16px;
	padding:10px 15px;
	text-shadow:0px 0px 0px #c99198;
	margin:2px;
      
}
.klasa {
font-size:16px;
	padding:10px 10px;
	text-shadow:0px 0px 0px #c99198;
	margin:2px;
      
}

}

@media only screen and (max-device-width: 501px) {
#wrap{
width:100%;

}
#header h1 {
font-size:30px;
}
 #blok{
  width: 95%;
}
#blok h2{
font-size: 23px;
  }
#blok p{
font-size:17px;
} 
.classname {
font-size:15px;
	padding:8px 10px;
	margin:2px;
      
}
.klasa {
font-size:15px;
	padding:8px 8px;
	margin:2px;
      
}
.a {
    width:90%;
}
}
@media only screen and (max-device-width: 410px) {
 #blok{
  width: 98%;
}    
#blok h2{
font-size: 18px;
  }
#blok p{
font-size:17px;
margin-left:6px;
margin-right:3px;
} 
 
.picture {
width:90%;
}
}
@media only screen and (max-device-width: 321px) {
#wrap{
width:100%;
background:#4D4DFF;
}
#header h1 {
font-size:25px;
}
 #blok{
  width: 99%;
}
#blok h2{
font-size: 18px;
  }
 #blok p{
font-size: 18px;
  } 
.classname {
font-size:14px;
	padding:5px 8px;
	margin:1px;
	}
.klasa {
font-size:14px;
	padding:5px 5px;
	margin:1px;
	}
.b {
    width:90%;
}
}
@media only screen and (max-device-width: 251px) { 
 #blok{
  width: 100%;
}    
   #blok h2{
font-size: 16px;
  } 
     #blok p{
font-size: 17px;
  }
    
 #ram {
   width:95%;
 }   
}