* {
	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;
	}
	
	
	
	
	/* zaglavlje  */		

	.topnav {
		overflow: hidden;
		background: #fff;
		position: fixed;
		top: 0;
		width:100%;	
		box-shadow: 0 0 18px rgba(0,0,0,0.2);
		z-index:1;
	}

	.topnav a {
	  float: left;
	  display: block;
	  color: #040000;
	  text-align: center;
	  padding: 11px 16px;
	  text-decoration: none;
	  font-size: 16px;
	}

	.topnav .icon {
	  display: none;
	}

	.dropdown {
	  float: left;
	  overflow: hidden;    
	}

	.dropdown .dropbtn {
	  font-size: 16px;    
	  border: none;
	  outline: none;
	  color: #040000;
	  padding: 11px 16px;
	  background-color: inherit;
	  font-family: inherit;
	  margin: 0;
	  background-color: #fff;  
	}

	.dropdown-content {
	  display: none;
	  position: absolute;
	  background-color: #f9f9f9;
	  min-width: 160px;
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	  z-index: 1;
	}

	.dropdown-content a {
	  float: none;
	  color: black;
	  padding: 11px 16px;
	  text-decoration: none;
	  display: block;
	  text-align: left;
	}

	.topnav a:hover, .dropdown:hover .dropbtn {
	  background-color: #336699;
	  color:#fff;
	}

	.dropdown-content a:hover {
	  background-color: #336699;
	  color: #fff;
	}

	.dropdown:hover .dropdown-content {
	  display: block;
	}

	@media screen and (max-width: 800px) {
	  .topnav a:not(:first-child), .dropdown .dropbtn {
		display: none;
	  }
	  .topnav a.icon {
		padding: 10px;	  
		float: right;
		display: block;
	  }
	}

	@media screen and (max-width: 800px) {
	  .topnav.responsive {position: relative;}
	  .topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	  }
	  .topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	  }
	  .topnav.responsive .dropdown {float: none;}
	  .topnav.responsive .dropdown-content {position: relative;}
	  .topnav.responsive .dropdown .dropbtn {
		display: block;
		width: 100%;
		text-align: left;
	  }
	}
	
									#slideshow {
									  background:#fff;
									  margin-top: 55px;
									  position: relative;
									  width:100%;
									  height:60px; 
									  z-index:-1;									  
									}

									#slideshow > div {
									  position: absolute;
									}	
									
										.img_back_slideshow {            /* div naslovne slike i bloka */
											width:100%;
											min-height:120px;      
											background-repeat: no-repeat;
											background-attachment: fixed;
											background-position: center; 
											background-size:cover; 
										}	

										.text-block-slideshow {
											position: absolute;
											*width:80%;  
											*height:100%;
											bottom: 0;
											right: 0;
											color: white;
											padding:10px 30px;
											opacity: 0.7;		
										}

										.text-block-slideshow h3{
											color:#eee;
											font-size:18px;
											margin:0;
										}
										
										 

						h1, h2, h3, h4, p{
							color:#666;
							text-decoration: none;				
						}

						h5 {
							font-size:16px;
							color:#777;
							font-weight:100;
							margin:8px 0 ;
						}										

						input[type=text]{					
							width: 100%;
							font-size: 16px;					
							padding: 8px 20px;
							*margin: 8px 0;
							border: 1px solid #999;  
							border-radius: 6px;
							box-sizing: border-box;
							*background:#ffff44;
							color:#000080;					
						}	

						input[type=text]:hover {
							-webkit-box-shadow: 0px 0px 5px #005FFF;
							-moz-box-shadow: 0px 0px 5px #005FFF;
							box-shadow: 0px 0px 5px #005FFF;	
							transition: 0.3s ease-in-out; 	 			
						}
								
						input[type=submit] {
							width: 100%; 
							background-color: #008000; 
							font-size:16px;	
							font-weight:800;										
							color:#fff;
							padding:5px 8px;  
							margin: 8px 0;
							border: none;
							border-radius: 5px;
							cursor: pointer;					
						}

						input[type=submit]:hover { 
							*color: #000090;						
							background-color: #00ff00;  
							-webkit-box-shadow: 2px 2px 5px #333;
							-moz-box-shadow: 2px 2px 5px #333;
							box-shadow: 2px 2px 5px #333;	
							transition: 0.8s ease-in-out;					
						}	
						
						textarea{
							width:100%;
						}
						
						
/* 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:0 3% 50px 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 {	
		font-family: Poiret One;			
		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;		
	}