@charset "utf-8";
/* CSS Document */


/* RESET ************************************************************ */
*{box-sizing:border-box;
margin:0;
padding:0;}

/* PRAVILA ZA OSNOVNO UREĐIVANJE HTML ELEMENATA ******************** */
body{background-color:#f0c8c8;
color:#300;
font-family:"Trebuchet MS", sans-serif;}

ul{list-style-type:none;}

a{text-decoration:none;
color:#300;}

a:hover{color:#D177F5 !important;}

h1{font-family: 'Jura', sans-serif; 
color:#f0c8c8;}

img{max-width:100%;
height:auto;}

h2,h3,h4,h5,h6,p,ul,ol,dl,li,dt,dd,label,input{margin-bottom:0.6em; /*margin-top: 1rem;*/}

article{margin-bottom: 1.2em;}

#sidebar{background-color:#F5B4B5; 
padding: 1.2rem;}

/* HELPERS *********************************************************** */
.align-left{text-align:left;}
.align-right{text-align:right;}
.align-center{text-align:center;}
.align-justify{text-align:justify;}


/* LAYOUT ************************************************ */
#page-footer, #content, #menu, #banner1, #banner2{padding: 1rem;}

#page-header, #page-footer {background-color: #300;
color: #f0c8c8;}

.wrapper{max-width: 1200px;
margin: 0 auto;}

.row{margin-bottom: 1rem;}
.row:last-child{margin-bottom: 0;}

.col{float: left;
margin-right: 2%;}
.col:last-child{margin-right: 0;}

.col-4{width: 32%;}
.col-8{width: 66%;}
.col-6{width: 49%;}
.col-3{width: 23.5%;}

.clearfix:after{content: "";
clear: both;
display: block;}


/* #MENU ********************************************* */
#menu{position: fixed;
left: 0;
top: 0;
width: 100%;
background: #300;
z-index: 2;}

#zurka-logo{width: 3rem; 
vertical-align:middle;
}

/* IZBORNIK */
#mobile-button{display: none;}

#menu ul{margin-bottom: 0;}
#menu li{display: inline;
margin-right: 2rem;}
#menu a{color: #f0c8c8;
font-size: 1.5rem;/* 24px / 16px=1.5rem */
font-weight:bold;
}

/* BANNER 1 ********************************************/
#banner1{background: url("slike/n1_web.jpg") center center/cover no-repeat;
height: 60vh;
padding-top: 5rem;
}

#banner1 h1{font-size: 7rem; 
text-shadow: 4px 4px 6px black; 
/* position: absolute; left: 380px; top: 750px;*/ 
}

.geslo{font-family: 'Jura', sans-serif; 
color:#f0c8c8; 
font-size: 3rem;
text-shadow: 2px 2px 3px black; 
}

/* BANNER 2 ********************************************/
#banner2{background: url("slike/n2_web.jpg") center center/cover no-repeat;
height: 30vh;
padding-top: 5rem;
}

#banner2 h1{font-size: 5rem; 
text-shadow: 3px 3px 5px black;
}

/* PAGE_FOOTER*************************************** */
#page-footer a{margin: 0 1rem;} 
#page-footer h1{color: #f0c8c8; 
font-size: 1.5rem; 
margin-bottom: 0.5rem;
}

/* CJENIK *************************************** */
.table td,th {padding: 0.6rem; 
background-color:#F5B4B5;
}

.gumb{padding:0.4rem 1.2rem; 
background-color: #330000; 
color: #f0c8c8; 
font-size: 0.8rem; 
font-weight: bolder; 
text-decoration: none;
}

/* KATALOG ******************************************* */
#katalog-menu li{display: inline-flex;
padding:0.4rem 0.8rem; 
background-color: #330000; 
margin-right: 1.2rem;
}

#katalog-menu a{color: #f0c8c8; 
font-size: 0.8rem; 
font-weight: bolder;
}

.pnv{font-size: 0.8rem; 
font-style: oblique; 
font-weight: bolder; 
float: left; 
padding-bottom: 1rem; 
text-decoration: underline; 
padding-right: 1.5rem;
}

.pnc{font-size: 0.8rem; 
font-style: oblique; 
font-weight: bolder; 
float: right; 
padding-bottom: 1rem; 
text-decoration: underline;
}

img{margin-bottom: 0.3rem;}


/* KONTAKT******************************************* */
.kontakti p{margin-top: 0.6rem;}

.obrazac input, textarea {padding: 6px;
width: 100%;
}

#reset, #submit{width: inherit;}

textarea {height: 12rem;}

#newsletter, #da, #ne{width: auto;}



/* MEDIA QUERIES************************************************************ */

@media (min-width:992px){
	#menu ul {display: block !important;}
}

/* uređaji <992px - mobilni uređaji */

@media (max-width: 991px) {
	#banner1 h1{font-size: 5em; padding-top: 0.5rem;}
	#banner2 h1{font-size: 4em; padding-top: 0.5rem;}
	.geslo{font-size: 2em;}
	
	.col{float:none; margin-right:0;}
	
	.col-3, .col-4, .col-6, .col-8 {width:100%;}
	
	.col-6{margin-bottom: 1rem;}
	
	
	
	/* mobile navigation */
	
	#logo, #mobile-button{float: left;
	width: 50%;
	}
	
	#zurka-logo{width: 2.6rem;
	display: block;
	}
	
	#mobile-button{display: block;}
	
	#menu ul {text-align: right;
	display: none;}
	
	#menu li{display:block;
	margin-right:0;}
	
	#menu a {display: block;
	padding: 1rem 0;}
	
	#menu #logo a{padding: 0;}
}

@media (max-width:991px) and (orientation:landscape){
	#banner1 {height: 200vh;}
	#banner2 {height: 100vh;}
}