* {
	margin:0;
	padding:0;
	}

html{
	height:100%;
	}

body {
	font-family: 'Montserrat', sans-serif;
	font-size:16px;
	width:100%;	
	height:100%;	
	margin:0;
	padding:0;			
}

* {
  box-sizing: border-box;
}
	
/* zaglavlje  */	

	.topnav {
	  overflow: hidden;
	  z-index:1;
	  position: fixed;
	  top: 0;
	  width: 100%;	
	  background:#fff;
	  box-shadow:0 1px 15px #eee;		
	  position:fixed;
	}					

	.topnav a {
	  font-family: 'Montserrat', sans-serif;
	  float: left;
	  display: block;
	  text-align: center;
	  padding: 11px 13px;
	  text-decoration: none;
	  font-size: 16.6px; 
	  *font-weight:600;
	  letter-spacing: 0.5px;
	  color:#444;
	}

	.topnav .icon {
	  display: none;
	  padding:9px ;
	  font-size: 16px; 	  
	}

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

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

	.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;
	    color:#444;		
	}

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

	.dropdown-content a:hover {
		background-color: #ddd;
		color: black;
	}

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

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

@media screen and (max-width: 1000px) {
  .topnav.responsive {
    position:fixed;
    }
  .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;
    
  }
}
	
		/* podlink ili podnavigacija */
	
		.icon-bar {		
			width: 100%;		
			background-color: #fff; 
			box-shadow: 0 10px 10px -1px #eee;	
			overflow:hidden;
			*position:fixed;
			*border-top:0.7px solid #ddd;
			z-index:2;
		}		

		.icon-bar a {
			float: left;
			text-decoration:none;			
			text-align: center;
			padding: 7px 15px;  
			transition: all 0.6s ease;
			color: #000;		
			box-shadow:  -7px 0 7px -6px #aaa; 
			font-weight:200;
			font-size:17px;					
		}
		
		
		@media screen and (max-width: 800px) {		
		  .icon-bar a {
			float: none;
			display: block;
			text-align: left;
		  }
		}

		.icon-bar a:hover {
			background-color: #00bfff;
			color: #fff;	  
			box-shadow:  -10px 0 9px -4px #444; 
		}		
		
		


		/* div slideshow */ 

		#slideshow {
		  background:#fff;
		  margin-top:15px;
		  position: relative;
		  width:100%;
		  height:80px; 	
		}

		#slideshow > div {
		  position: absolute;
		}					
		
		.img_back_slideshow {            
			width:100%;     
			background-repeat: no-repeat;
			background-attachment: fixed;
			background-position: center; 
			background-size:cover; 
		}	
							
		#naslov{
			*font-family: Dancing Script;
			*font-family: Poiret One ;
			*font-family: Parisienne ;	
			font-size:60px;
			text-align:center;
			font-weight:100;
			*margin-bottom:20px ; 
		}	
			
		@media screen and (max-width: 800px) {
		  #naslov {
			width: 100%;
			font-size:30px;			
			margin-bottom:20px;
		  }
		}										
										
										 

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

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

	.index_proizvodi_p{ 
		font-size:40px; 
		font-family: 'Open Sans', sans-serif; 
		font-weight:900;
		color:#aaa;	
		margin:20px 0;
		text-align:center;
		}		



	/* omotac sadrzaja */	
	#omotac{
		font-family: 'Montserrat', ;
		font-family: 'Open Sans', ;
		font-family: 'Lato', ;	
		width:100%;		
		color:#666;		
		padding:50px 3%;
		overflow: auto;	
		
	}	
	
		/* sadrzaji po raznim listovima */

		#sadrzaj_index{
			font-family: 'Montserrat', ;
			font-family: 'Open Sans', ;
			font-family: 'Lato', ;	
			width:100%;	
			color:#666;
			padding:10px 3% 50px 3%; 
			overflow: hiden;	
		}	
		
		#sadrzaj_hr{
			font-family: 'Montserrat', ;
			font-family: 'Open Sans', ;
			font-family: 'Lato', ;	
			width:100%;	
			color:#666;
			padding:0 3% 20px 3%; 
			overflow: hiden;	
		}
	

		#sadrzaj_clanak{ 
			font-family: 'Montserrat', ;
			font-family: 'Open Sans', ;
			font-family: 'Lato', ;	
			width:94%;	
			color:#666;
			margin:0 auto;
			overflow: hiden;	
		}	   		

			/* kartica index */	

			.card {
			  float:left;
			  width: 23%;
			  min-height:250px;
			  margin:1%;
			  text-align: center;
			  padding-bottom:10px;
			  box-shadow: 0 0 20px #ddd; 
			  opacity:1;  
			}

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

			.card p{
				color:#333;    
				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: 98%;
				margin-bottom:20px;
			  }
			}

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

			@media screen and (max-width: 800px) {
			  .respon_50 {
				width: 94%; 
			  }
			}	
	
	
		#clanak{
			width:69%; 
			float:left;
			padding:1%;
			margin-right:1%;
			z-index:-1;
		}	
		
		#clanak span {
			font-size:16px;		
		}
		
		#clanak p {
			font-size:16px;	
			color:#333;
		}
		
		@media screen and (max-width: 800px) {
			  #clanak {
				width: 94%; 
				margin-left:3%;
				margin-right:3%;
				padding:1% 0;
				color:#444;
			}
		}

	
			/*	Članak glavna slika članka */
	
			.container1 {
				position: relative;
				margin: 0 auto;  
			}		

			.container1 img{
				width:100%;
			}
			
			.container1 .content1{
			  position: absolute;
			  top:0;
			  background: rgba(0, 10, 10, 0.5); 
			  color: #ddd;
			  width: 100%;
			  padding: 6px 3%;
			  vertical-align: middle;	
			}
			
			.container1 .content1 h1{
				color:#fff;
				font-size:1.5vw;
				font-weight:300;
				margin-top:0;
			}				
			

			@media screen and (max-width: 1100px) {
			  .container1 .content1 h1{
			   font-size:4vw;
				margin-top:0;
			  }
			}						

			.sadrzaj_teksta{
				padding:10px;
				color:#444;
				word-spacing:5px;
			}
			
		
				.sadrzaj table {
				  border-collapse: collapse;
				  width: 100%;
				}

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

				.sadrzaj th {
				  padding-top: 12px;
				  padding-bottom: 12px;
				  text-align: left;
				  background-color: #4CAF50;
				  color: white;
				}
				
				.sadrzaj td, .sadrzaj th {
				  border: 1px solid #999;
				  padding:10px;
				}				



	/* drugi stupac clanci */
	#drugi_stupac{
		float:left;	 	
		width:25%;
		*border-top:2px	solid #ddd; 
		*padding-top:5px;
		margin-top:10px;
	}
	
	@media screen and (max-width: 800px) {
	  #drugi_stupac {
		width: 96%; 
	  }
	}
	
			#clanci_drugi_stupac {
				width: 100%;										
				box-shadow: 0 0 20px #333;
				margin-bottom:15px;
	        }
			
			#clanci_drugi_stupac:hover {
				width: 100%;										
				box-shadow: 0 0 0 #aaa;
				transition: .7s ease-in-out;	
				opacity: .7;				
	        }			

		
		#drugi_stupac_naslov{
			width:100%;
			background:#006699;
			color:#fff;
			font-weight:300px;
			padding:3px;
			margin:0;
			text-decoration: none;
		}

		#drugi_stupac_naslov h5{
			color:#fff;
			font-size:14px;
			font-weight:600;
			text-decoration: none;
		}


		#desno_clanci {
				position: relative;
				margin: 0 auto;				
			}

		
		#desno_clanci .tekst_blok {
		  position: absolute;
		  width:100%;
		  bottom: 1px;
		  left: 0;
		  color: white;
		  padding: 5px 10px 10px 10px;
		  background: rgba(0, 0, 0, 0.6);
		}	
		
		.tekst_blok p{color:#fff;font-size:14px;}		




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

					div.gallery:hover {
						box-shadow: 0 0 10px #ccc;
					}									
					
					div.gallery_img {
						float:left;
						max-width: 50%;						
						height:auto;					
						box-shadow: 8px -2px 13px -8px #aaa;
					}	

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

					div.gallery_tekst {  
						text-decoration: none;	
						float:left;
						max-width: 40%;	
						padding:0 1% 0 3%;
						vertical-align: middle;	
					}
					
					div.gallery_tekst p{
						text-decoration: none;	
						float:left;
						font-weight:200;
						font-size:8pt;
					}					

					div.gallery_tekst h4{
						text-decoration: none;		
						font-size:9pt;
						color:#444;
						margin:0; 
						font-weight:600;
						vertical-align: middle;	
						}


		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%;
		}
		
		input[type=button]{
			width: 150px; 
			background-color: #008000; 
			font-size:16px;	
			font-weight:800;										
			color:#fff;
			padding:5px 8px;  
			margin: 8px 0;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			
		}
	
	hr {
		border-top: 1px solid #ddd;
		margin:10px 0;
		color:#ddd;
		background:#eee;
	}

	

		/*proizvodi*/		
		.respon_25 {
			background:#fff;
			box-shadow: 0px 0px 20px #ddd;	 
			float: left;
			width: 21%;
			min-height:200px;
			margin: 2%;
			text-decoration:none;
			padding:10px 1%;
			border-radius:9px;
		}

		
		@media only screen and (max-width: 900px){
			.respon_25 {
				width: 80%;
				margin:5% 10%;												
			}
		}		

					
		.respon_25 a{	 
			float: left;
		}													
		
		
		.respon_25 h1 {
			color:#1199cc;
			font-size:38px;
			text-align:center;
			margin:20px 0;
		}	
														
		
		.respon_25 h2 {
			font-family: 'Montserrat', sans-serif;			
			color:#1199cc;
			font-size:18px;
			text-align:center;
			font-weight:100; 
			*padding:5px 0;
			text-decoration:none;
		}						

		.respon_25 h3 {
			color:#fff;
			font-size:1.5vw;
			text-align:center;
			font-weight:500;
			padding:5px 0;
		}
		
		.respon_25 h4 {
			color:#fff;
			font-size:1.5vw;
			text-align:center;
			font-weight:200;
			padding:3px 0;
		}						

		.respon_25 p {
			color:#fff;
			font-size:1.2vw;
			margin:5px 0 ;
		}	

		.respon_25:hover{
			box-shadow: 0px 0px 1px #aaa;
			background:#000033;
			color:#fff;
			transition: 1s;
		}			

/*lide*/

	
	
	.respon_33_footer {
		font-family: 'Montserrat', sans-serif;
		background:#003355;	 
		padding:10px 3%; 
		float: left;
		width: 33.3%;
		min-height:180px;	
		height:250px;
		opacity: 1.2;
	}
	
	@media only screen and (max-width: 900px){
		.respon_33_footer { 
		padding:15px 3%;							
		width: 100%;											
		}
	}

	.respon_33_footer h1 {
		color:#fff;
		font-size:30px;
		text-align:center;
		margin:10px 0 ;
	}
	
	.respon_33_footer h2 {
		color:#fff;
		font-size:22px;
		text-align:left;
		font-weight:100;
		padding-top:5px;
		margin-left:30px;
	}						

	.respon_33_footer h3 {
		color:#fff;
		font-size:22px;
		text-align:left;
		font-weight:900;
		padding:6px 0;
		margin-left:30px;
	}
	
	.respon_33_footer h4 {
		color:#fff;
		font-size:14px;
		text-align:left;
		margin:3px 0 0 30px;
		font-weight:100;
	}

	.respon_33_footer h5 {
		color:#fff;
		font-size:15px;
		text-align:left;
		margin:10px 0 10px 30px;
		font-weight:100;
	}

	.respon_33_footer hr {
		margin:10px 0;
		}					

	.respon_33_footer p {
		color:#fff;
		font-size:1.2vw;
		margin:5px 0 ;
	}	

	.respon_33_footer a {
		color:#000033;
		font-weight:900;
		margin:5px 0 ;
		text-align:center;
		text-decoration:none;
	}	

	.respon_33_footer a:hover {
		color:orange;
		text-align:center;
		text-decoration:none;
	}	
	
		
	.icon-barr {
		width:80%;
		margin: 80px 10% 0 10%;
		text-align: center;										
	}

	.icon-barr a {
	  display: inline;
	  text-align: center;
	  transition: all 0.3s ease;
	  font-size: 60px;
	  color:#fff;
	  margin-right:15px;
	}
							
	.icon-barr a:hover {
		color:#6699dd; 						  
	}		
	
	
	
	
	
	
	

												/*ljudski resursi */				

													.podnaslov_20 {
														background:#006699;  
														float: left;
														width: 20%;
														min-height:100px;
														padding-top:20px;							
														text-decoration:none;
													}

													.podnaslov_20:hover {
														transition: .5s;
														box-shadow:0 0px 0px #fff;
														opacity: .8;	
													}	
													
													@media only screen and (max-width: 1100px){
														.podnaslov_20 {
															width: 40%;
															margin: 0px 5%;
															float: left;
															*box-shadow:0 0px 0px #fff;		
														}
													}													
													
													@media only screen and (max-width: 800px){
														.podnaslov_20 {
															width: 100%;
															margin: 0;	
														}
													}													
													
													
													.podnaslov_20 h1{
														color:#fff;
														font-size:45px;
														text-align:center;
														margin:20px 0;
														opacity: 0.6;							
													}
																									
													
													.podnaslov_20 a {
														font-family: 'Montserrat', sans-serif;
														color:#fff;
														font-size:20px;
														text-align:center;
														font-weight:100;
														padding:20px 0;
														text-decoration:none;
													}	

													.podnaslov_20 a:hover {
														color:#ccc;
														font-size:20px;
														font-weight:900;
														text-decoration:none;
													}													

					
												
						
													.podnaslov_20 h6 {
														font-family: 'Montserrat', sans-serif;
														width:80%;
														margin:0 auto;
														color:#fff; 
														padding:9px 5px ;							
														font-size:15px;
														font-weight:100;						
														text-align:center;	
														border-radius: 8px;					
														box-shadow:0 0px 12px #fff;
														opacity: 0.6;
													}
													
													.podnaslov_20 h6:hover {
														box-shadow:0 0px 1px #ddd;							
														text-decoration:none;
														padding:8px 5px ;
														font-size:14px;	
													    font-weight:600;	
														transition: .2s ease-in-out;	
														opacity: 1;														
													}	

													@media only screen and (max-width: 900px){
														.podnaslov_20 h6{
														width:80%;
														margin:15px auto;										
														color:#fff; 
														padding:8px 5px ;							
														font-size:17px;
														*font-weight:600;						
														text-align:center;	
														border-radius: 8px;					
														box-shadow:0 0px 12px #fff;			
														}
													}		

	
/*slike u text editoru sumernote */							
	.img-left {
		float: left;
		margin-right: 10px;
	}

	.img-right {
		float: right;
		margin-left: 10px;
	}