* {
	margin:0;
	padding:0;
	}

html{
	height:100%;
	}

body {	
	margin: 0;
	font-size: 16px;
	letter-spacing: 0.2px;	 
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	}
	
	
	
										/* navigacija */
		.topnav {
		  position:fixed;
		  width:100%;
		  overflow: hidden;
		  background-color: #fff;
		  box-shadow:0 0 25px #888;
		  z-index:4;
		}

		.topnav a {
		  float: left;
		  display: block;
		  color: #444;
		  text-align: center;
		  padding: 14px 16px;
		  text-decoration: none;
		  font-size: 17px;
		  z-index:4;		  
		}

		.topnav a:hover {
		  background-color: #0066aa;
		  color: #fff;
		}

		.topnav .icon {
		  display: none;
		}

		@media screen and (max-width: 600px) {
		  .topnav a:not(:first-child) {display: none;}
		  .topnav a.icon {
			float: right;
			display: block;
		  }
		}

		@media screen and (max-width: 600px) {
		  .topnav.responsive {position: relative;}
		  .topnav.responsive .icon {
			position: absolute;
			right: 0;
			top: 0;
		  }
		  .topnav.responsive a {
			float: none;
			display: block;
			text-align: left;
		  }
		}
		

		


						
/* respon */
						
	* {
		box-sizing: border-box;
	}		
		
	.row:after {
		content: "";
		clear: both;
		display: table;
	}
	
	[class*="col-"] {
		float: left;
		padding:15px 5px;
		width: 100%;
	}
	
		/* For mobile phones: */
	[class*="col-"] {
	  width: 100%;
	}
	
	
	@media only screen and (min-width: 1100px) {
		.col-1 {width: 3%;}
		.col-2 {width: 16.66%;}
		.col-3 {width: 25%;}
		.col-4 {width: 33.33%;}
		.col-5 {width: 41.66%;}
		.col-6 {width: 50%;}
		.col-7 {width: 58.33%;}
		.col-8 {width: 66.66%;}
		.col-9 {width: 75%;}
		.col-10 {width: 83.33%;}
		.col-11 {width: 97%;}
		.col-12 {width: 100%;}
	}

	
	hr {
		border-top: 1px solid #ddd;
		margin:10px 0;
		color:#ddd;
		background:#eee;
	}
	
	
			#naslov{
				font-family: Dancing Script;
				font-family: Poiret One ;
				font-family: Parisienne ;	
				font-size:40px;
				text-align:center;
				font-weight:100;
				margin-bottom:20px ; 
			}	
			
				@media screen and (max-width: 800px) {
				  #naslov {
					width: 100%;
					font-size:30px;			
					margin-bottom:20px;
				  }
				}

	
	#omotac{
		font-family: 'Montserrat', ;
		font-family: 'Open Sans', ;
		font-family: 'Lato', ;	
		width:100%;		
		color:#666;
		padding:80px 3%;
		overflow: auto;	
	}				
	
					/* kartica index */	

					.card {
					  float:left;
					  width: 23%;
					  min-height:290px;
					  margin:1%;
					  text-align: center;
					  padding-bottom:10px;
					  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); 
					  opacity:1;  
					}

					.card h2{
						color:#555;
						font-size:16px;
						font-weight:800;
						margin:2px 5px;
					}

					.card p{
						color:#555;    
						font-size:13px;
						margin:5px;
					}


					.card:hover {	
					  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
					  opacity:0.6;
					}

					@media screen and (max-width: 800px) {
					  .card{
						width: 94%;
						margin:0 3% 20px 3%;
					  }
					}

					.respon_50{
					  float:left;
					  width:48%;
					  margin:10px 1%;
					}	

					@media screen and (max-width: 800px) {
					  .respon_50 {
						width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
					  }
					}	
	
	
	#clanak{
		color:#666;
		margin:5px 5px;
	}
	
	#clanak span {
		font-size:16px;		
	}
	
	#clanak p {
		font-size:16px;		
	}
	
	
	
/*	Članak glavna slika članka */
	
			.container {
				position: relative;
				margin: 0 auto;  
				z-index: -1;
			}
			
			.container_naslov {
				text-decoration: none;		
				color:#666;
				font-size:14pt;
				margin:0;
				padding:10px;
				font-weight:300;    
				vertical-align: middle;	
				background-color: #f9f6fe; 
			}			

			.container img{
				width:100%;
			}
			
			.container .content {
			  position: absolute;
			  bottom:4px;
			  background: rgb(0, 0, 0); /* Fallback color */
			  background: rgba(0, 10, 10, 0.5); /* Black background with 0.5 opacity */
			  color: #ddd;
			  width: 100%;
			  font-size:18px;
			  padding: 10px 20px;
			}
			
			.container .content h1, h2, h3,h4,h5{
				color:#999;
			}	

				.container .content h1{
					color:#fff;
					font-weight:100;
				}

					@media screen and (max-width: 800px) {
					  .container .content h1{
					   font-size:4vw;
						margin-bottom:5px;
					  }
					}	
					

							.sadrzaj{
								padding:10px;
							}
					
								.sadrzaj table {
								  border-collapse: collapse;
								  width: 100%;
								}

								.sadrzaj td, .sadrzaj th {
								  border: 1px solid #999;
								  padding:10px;
								}

								.sadrzaj tr:hover {background-color: #ddd;}

								.sadrzaj th {
								  padding-top: 12px;
								  padding-bottom: 12px;
								  text-align: left;
								  background-color: #4CAF50;
								  color: white;
								}

	
				/* index okviri u stupcima članci i novosti  */	
	
				div.gallery {                  
					min-height:10px;
					margin:1% 0;
					padding:2px 10px;  
				}

					div.gallery:hover {
						box-shadow: 0 0 10px #ccc;
					}					

					div.gallery img {
						max-width: 100%;						
						height:auto;					
						box-shadow: 8px -2px 13px -8px #aaa;
					}					
					
					div.index_img_clanak {
						float:left;
						max-width: 20%;						
						height:auto;					
						box-shadow: 8px -2px 13px -8px #aaa;
					}										

					div.desc_clanak {       
						float:left;
						max-width: 76%;	
						padding:0 1% 0 3%;
						vertical-align: middle;	
					}

					div.desc_clanak h4{
							text-decoration: none;		
							color:#666;
							font-size:11pt;
							margin:0; 
							font-weight:200;
							vertical-align: middle;	
						}
						
					div.index_img_vijest {
						float:left;
						max-width: 35%;						
						height:auto;					
						box-shadow: 8px -2px 13px -8px #aaa;
					}						

					div.desc_vijesti {
						float:left;
						max-width: 65%;	
						padding:0 1% 0 3%;
						vertical-align: middle;	
						font-size:10pt;
						
					}
					
					div.desc_vijesti_desno {
						float:right;
						max-width: 65%;	
						padding:0 1% 0 3%;
						vertical-align: middle;	
						font-size:10pt;
						
					}					
					
					.desc_vijesti p{
						font-weight:900;
						color:#111;	
					}					
						
					div.desc_vijesti h4{
							text-decoration: none;		
							color:#666;
							font-size:9pt;
							margin:0; 	
							font-weight:200;
						}
						
					
					
					
	footer {		
		position: fixed;
		left: 0;
		bottom: 0;		
		width: 100%;		
		background-color: #fff;
		color: #999;
		text-align: center;
		font-size: 12px;
		padding:15px;
		box-shadow: 0 -6px 10px #ddd;					
	}

	.footer h2{
		color:#000040;		
	}

	.footer h4{
		font-size:16px;	
		color:#000040;		
	}	
	
	.footer h4 a{
		font-size:20px;			
		color:#000040;
		text-decoration: none;				
	}
	
	.footer h4 a:hover{
		color:red;
		font-weight:800;
		text-decoration: none;		
	}	
		
		
		
		
		
		
		
		
		
		

/* okvir diva sadržaj */

#sadrzaj_index{
	min-height:600px;
	padding:60px 5%;
}

#sadrzaj_index h3{
	color:#0066ff;
	text-align:center;
	font-weight:900;
}

#sadrzaj_sql{
	min-height:600px;
	padding:80px 20px 20px 0;	
}

.sadrzaj_right {
  float:right;
  width: 74%;
  padding: 0 3%;
}

						/* lijevi meni */

						.vertical-menu {
						  *position:fixed;
						  float:left;
						  width: 20%;
						}

						.vertical-menu a {
						  background-color: #0066aa;
						  color: white;
						  display: block;
						  padding: 12px;
						  margin:2px 0;
						  text-decoration: none;
						}

						.vertical-menu a:hover {
						  background-color: #000033;
						  color:white;
						}
						

.naslov{
	width:40%;
	font-size:30px;
	float:left;
	color:#0066ff;
	font-weight:900;
}

.button_dalje{
	width:200px;	
	float:right;
    padding: 10px 10px;	
	background-color: #00dd00; 
	font-weight:800;	
	color:#fff;
	border:1px solid #999;
	border-radius:4px;
    box-shadow:5px 5px 20px #222; 	
}

.button_dalje:hover{
	background:#008800;
    box-shadow:0 0 5px #222; 		
}

.button_uredi{
	width:200px;
	float:right;
    padding: 10px 10px;	
	background-color:orange; 
	font-weight:800;
	color:#fff;
	border:1px solid #999;
	border-radius:4px;
    box-shadow:5px 5px 20px #222; 	
}

.button_uredi:hover{
	background:#880000;
	border:1px solid #999;
	border-radius:8px;	
    box-shadow:0 0 5px #222; 		
}

.button_odustani{
	width:200px;
	float:right;
    padding: 10px 10px;	
	background-color:red; 
	font-weight:800;
	color:#fff;
	border:1px solid #999;
	border-radius:4px;
    box-shadow:5px 5px 20px #222; 	
}

.button_odustani:hover{
	background:#880000;
	border:1px solid #999;
	border-radius:8px;	
    box-shadow:0 0 5px #222; 		
}
	

h1{
	text-align:center;
}

.respon_33{
	width:16%;
	float:left;
}

	@media only screen and (max-width: 900px) {
	  .respon_33 {
		width:100%;
	  }
	}

	.unutarnji{
		text-align:center;
		*width:300px;
		min-height:150px;
		margin:25px auto;
		padding:10px;
	}

	@media only screen and (max-width: 900px) {
	  .unutarnji {
		width:90%;
		min-height:250px;	
	  }
	}


.button_unutarnji {
  background-color: #000030; 
  border:1px solid #666;
  color: white;
  padding: 8px 20px;
  text-align: center;
  font-size: 16px;
  font-weight:900;
  box-shadow:0 2px 5px #666; 
  border-radius:8px;  
  
}
.button_unutarnji:hover{
	background-color: #800000; 
	color:#fff;
    box-shadow:5px 5px 20px #222; 	
}




table {
  border-collapse: collapse;
  width: 100%;
  margin:20px auto;
}

td, th {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 8px;
}
th{
	background:#000044;
	color:#fff;
}

tr:nth-child(even){
	background-color: #f2f2f2;
	}

tr:hover {
	background-color:#99ccff;
}

form{
	width:60%;
	background:#eeeeee;
	border:1px solid #999;
	border-radius:10px;
	box-shadow:5px 5px 25px #666;
	margin:20px auto;
	padding:30px;
}

label{
	*padding-top:50px;
}

input{
	padding:5px;
	width:96%;	
	margin-bottom:10px;
}

input[type=submit]{
	background:#3388ff;
	color:#fff;
	padding:8px;
	border-radius:5px;
	font-weight:700;
    box-shadow:5px 5px 20px #222; 	
}

input[type=submit]:hover{
	background:#0044ff;
	color:#fff;
	padding:8px;
	border-radius:5px;
	font-weight:700;
    box-shadow: 0 0 5px #222; 	
}

select{
	padding:5px;
	width:100%;
	margin-bottom:10px;
}

		/* div koji glumi polje input u obrazcu prkaz */

		.div_input{
			width:96%;
			min-height:20px;
			background:#ffffdd;
			padding:5px;
			margin-bottom:10px;
			border:1px solid #666;
			border-radius:4px;
		}
		
.respon_50{
	width:47%;
	margin-right:2%;
	float:left;
}

@media only screen and (max-width: 900px) {
  .respon_50 {
    width:100%;
  }
}	


/* kartica index */	

					.card {
					  float:left;
					  width: 23%;
					  min-height:290px;
					  margin:1%;
					  text-align: center;
					  padding-bottom:10px;
					  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); 
					  opacity:1;  
					}

					.card h2{
						color:#555;
						font-size:16px;
						font-weight:800;
						margin:2px 5px;
					}

					.card p{
						color:#555;    
						font-size:13px;
						margin:5px;
					}


					.card:hover {	
					  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
					  opacity:0.6;
					}

					@media screen and (max-width: 800px) {
					  .card{
						width: 94%;
						margin:0 3% 20px 3%;
					  }
					}

					.respon_50{
					  float:left;
					  width:48%;
					  margin:10px 1%;
					}	

					@media screen and (max-width: 800px) {
					  .respon_50 {
						width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
					  }
					}	
	
	
	#clanak{
		color:#666;
		margin:5px 5px;
	}
	
	#clanak span {
		font-size:16px;		
	}
	
	#clanak p {
		font-size:16px;		
	}
	
	
	
/*	Članak glavna slika članka */
	
			.container {
				position: relative;
				margin: 0 auto;  
				z-index: -1;
			}
			
			.container_naslov {
				text-decoration: none;		
				color:#666;
				font-size:14pt;
				margin:0;
				padding:10px;
				font-weight:300;    
				vertical-align: middle;	
				background-color: #f9f6fe; 
			}			

			.container img{
				width:100%;
			}
			
			.container .content {
			  position: absolute;
			  bottom:4px;
			  background: rgb(0, 0, 0); /* Fallback color */
			  background: rgba(0, 10, 10, 0.5); /* Black background with 0.5 opacity */
			  color: #ddd;
			  width: 100%;
			  font-size:18px;
			  padding: 10px 20px;
			}
			
			.container .content h1, h2, h3,h4,h5{
				color:#999;
			}	

				.container .content h1{
					color:#fff;
					font-weight:100;
				}

					@media screen and (max-width: 800px) {
					  .container .content h1{
					   font-size:4vw;
						margin-bottom:5px;
					  }
					}	
					

							.sadrzaj{
								padding:10px;
							}
					
								.sadrzaj table {
								  border-collapse: collapse;
								  width: 100%;
								}

								.sadrzaj td, .sadrzaj th {
								  border: 1px solid #999;
								  padding:10px;
								}

								.sadrzaj tr:hover {background-color: #ddd;}

								.sadrzaj th {
								  padding-top: 12px;
								  padding-bottom: 12px;
								  text-align: left;
								  background-color: #4CAF50;
								  color: white;
								}

	
				/* index okviri u stupcima članci i novosti  */	
	
				div.gallery {                  
					min-height:10px;
					margin:1% 0;
					padding:2px 10px;  
				}

					div.gallery:hover {
						box-shadow: 0 0 10px #ccc;
					}					

					div.gallery img {
						max-width: 100%;						
						height:auto;					
						box-shadow: 8px -2px 13px -8px #aaa;
					}					
					
					div.index_img_clanak {
						float:left;
						max-width: 20%;						
						height:auto;					
						box-shadow: 8px -2px 13px -8px #aaa;
					}										

					div.desc_clanak {       
						float:left;
						max-width: 76%;	
						padding:0 1% 0 3%;
						vertical-align: middle;	
					}

					div.desc_clanak h4{
							text-decoration: none;		
							color:#666;
							font-size:11pt;
							margin:0; 
							font-weight:200;
							vertical-align: middle;	
						}
						
					div.index_img_vijest {
						float:left;
						max-width: 35%;						
						height:auto;					
						box-shadow: 8px -2px 13px -8px #aaa;
					}						

					div.desc_vijesti {
						float:left;
						max-width: 65%;	
						padding:0 1% 0 3%;
						vertical-align: middle;	
						font-size:10pt;
						
					}
					
					div.desc_vijesti_desno {
						float:right;
						max-width: 65%;	
						padding:0 1% 0 3%;
						vertical-align: middle;	
						font-size:10pt;
						
					}					
					
					.desc_vijesti p{
						font-weight:900;
						color:#111;	
					}					
						
					div.desc_vijesti h4{
							text-decoration: none;		
							color:#666;
							font-size:9pt;
							margin:0; 	
							font-weight:200;
						}
						

/*  harmonika nastava */

.accordion {
  background-color: #fafafa;
  color: #444;
  cursor: pointer;
  padding:8PX 12px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  border:1px solid #aaa;
  border-radius:6px;
  font-weight:700;
}

.active, .accordion:hover {
  background-color: #880000; 
  color:#fff;
}
.aktivno{
	  background-color: #880000; 
	color:#fff;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding:1px 10px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  overflow:auto;
}





/*  tab u harmonici */

	#tabs{
	overflow: hidden;
	width: 100%;  
	margin: 10px 0 0 0;
	padding: 0;
	list-style: none;
	}

	#tabs li{ 
	  float: left;
	  margin: 0 .5em 0 0;
	}

	#tabs a{
	  position: relative;
	  background: #ddd;
	  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
	  background-image: -webkit-linear-gradient(top, #fff, #ddd);
	  background-image: linear-gradient(to bottom, #fff, #ddd);  
	  padding: .4em 1.1em;
	  float: left;
	  text-decoration: none;
	  font-weight:700;
	  color: #444;
	  text-shadow: 0 1px 0 rgba(255,255,255,.8);
	  -webkit-border-radius: 5px 0 0 0;
	  -moz-border-radius: 5px 0 0 0;
	  border-radius: 5px 0 0 0;
	  -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.4);
	  box-shadow: 0 2px 2px rgba(0,0,0,.4);
	}

	#tabs a:hover,#tabs a:hover::after,#tabs a:focus,#tabs a:focus::after{
	  background: #fff;
	}

	#tabs a:focus{
	  outline: 0;
	}

	#tabs a::after{
	  content:'';
	  position:absolute;
	  z-index: 1;
	  top: 0;
	  right: -.5em;  
	  bottom: 0;
	  width: 1em;
	  background: #ddd;
	  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
	  background-image: -webkit-linear-gradient(top, #fff, #ddd);
	  background-image: linear-gradient(to bottom, #fff, #ddd);  
	  -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.4);
	  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
	  -webkit-transform: skew(10deg);
	  transform: skew(10deg);
	  -webkit-border-radius: 0 5px 0 0;
	  border-radius: 0 5px 0 0;  
	}

	#tabs #current a{
	  background: #fff;
	  z-index: 3;
	}

	#tabs #current a::after{
	  background: #fff;
	  z-index: 3;
	}

	/* ------------------------------------------------- */

	#content {
		background: #fff;
		padding: 1em;
		height: 350px;
		position: relative;
		z-index: 2;	
		-webkit-border-radius: 0 5px 5px 5px;
		border-radius: 0 5px 5px 5px;
		-webkit-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
		box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
	}

	#content h2, #content h3, #content p
	{
		text-align:left;
		margin: 0 0 15px 0;
	}
	
	#content a {
	  background-color: #0066aa;
	  color: white; 
	  display: block;
	  padding: 8px;
	  margin:2px 0;
	  text-decoration: none;
	}

	#content a:hover {
	  background-color: #000033;
	  color:white;
	}	

/* ------------------------------------------------- */

#about
{
    color: #999;
}

#about a
{
    color: #eee;
}

#datumi{
	padding:100px 50px;	
}

#datumi select{
	width:28%;
	padding:10px;
	margin:2%;
}


			
			.skriveni nav{ 
				display:block;
				background:#99CCDD;
				width:100%;
				padding:0;
				margin:3px;
				border:2px solid #999;
				border-radius:5px;
				cursor: pointer;
			}
			
			.skriveni h4{
				font-size:15px;
				color:#fff; 
				margin:4px;
			}
			
			.podlista{
				margin-top:10px;
				padding:10px;
				background:#fff;
			}

			.hide {
				display:none
			}