@charset "utf-8";
/* CSS Document */
@font-face{font-family:jura; src:url(grafika/Jura-Regular.ttf);}
@font-face{font-family:jura; src:url(grafika/Jura-Bold.ttf); font-weight: bold;}
html{font-size:100%; scroll-behavior:smooth;}
body{margin:260px 0 0 0; padding:0; font-size:16px; font-family:jura; background:#e3ddd8;}
*{box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-moz-box-sizing:border-box;}

#top{width: 100%; height:40px; line-height:40px; text-align:center; font-size:18px; color:#d9ddd8; background:#a78a85; position: fixed; top: 0; font-weight: bold; z-index: 1;}

#gornji {position: fixed; top: 40px; left: calc(50% - 600px); width: 1200px; height: 200px;}
#donji {position: fixed; top: -240px; left: 0; width: 100%; height: 70px; box-shadow:0 0 1px 0 #a78a85, 0 0 10px 0 #a78a85; background:#e3ddd8; z-index: 1;}
#tablet {display: none;}

/* NOSI GORNJI MENI */
	.topmg {height: 120px; position: relative; overflow: hidden;}
	.topmg a {display: block; width: 280px; height: 93px; margin:20px auto;}
	#search input[type="text"] {position: absolute; right: 100px; top: 40px; width: 200px; height: 35px; background: #e3ddd8; outline: none; border: solid 1px #b58a85; padding-left: 30px; color: #a78a85; font-size: 14px;}
    #search input[type="text"]:focus{border: none;}
	.lupa {position: absolute; right: 273px; top: 47px;}
	.korpa {position: absolute; right: 0; top: 40px; width: 35px; height: 35px; cursor: pointer;}
	.topmm {height: 100px;}
	.meni {width: 1000px; height: 60px; margin: 20px auto; position: relative;}
	.meni::after{clear: both; display: table; content: "";}
	.meni a{display: block; float: left; text-decoration: none; height: 40px; line-height: 40px; font-size: 18px; padding: 0 8px; color:#b58a85;}
	.meni a:hover{color:#753a35;}
/* podmeni */
.meni label{display: block; float: left; position: relative; min-width: 40px; height: 40px;}
.meni label div{position: absolute; left: 0; top: 40px; width: 180px; height: 80px; background: #edd; display: none;}
.meni label:hover div{display: block;}
.meni label div a{width: 200px; padding: 0 0 0 10px; background: #dee;}
.meni label div a:hover{background: #cdd;}


/* NOSI DONJI MENI */
#donji > div{width: 1200px; height: 80px; position: absolute; left: calc(50% - 600px); top: 0;}
.logo {position: absolute; top: 10px; left: 10px; width: 130px; height: 43px;}
.meni2 {width: 960px; height: 60px; position: absolute; left: 150px; top: 15px;}
.meni2::after{clear: both; display: table; content: "";}
.meni2 a{display: block; float: left; text-decoration: none; height: 40px; line-height: 40px; font-size: 16px; padding:0 6px; color:#b58a85;}
.korpa2{position: absolute; right: 0; top: 20px; height: 35px; cursor: pointer;}
/* podmeni */
.meni2 label{display: block; float: left; position: relative; min-width: 40px; height: 40px;}
.meni2 label div{position: absolute; left: 0; top: 40px; width: 180px; height: 80px; background: #edd; display: none;}
.meni2 label:hover div{display: block;}
.meni2 label div a{width: 200px; padding: 0 0 0 10px; background: #dee;}
.meni2 label div a:hover{background: #cdd;}


#mobilnihead {display: none;}


/* BURGER */
.burg{display:none;}
.burg label{width:30px; height:30px; display:block; background:#ddd;}
.burg div{width:26px; height:4px; position:absolute; left:1px; border-radius:3px; transform-origin:center center;}
.burg div:nth-child(1){top:4px; transform:rotate(0deg); background:#a78a85; transition:all 0.5s;}
.burg div:nth-child(2){top:13px; transform:rotate(0deg); background:#a78a85; transition:all 0.5s;}
.burg div:nth-child(3){top:22px; transform:rotate(0deg); background:#a78a85; transition:all 0.5s;}

#burg{display:none;}

#burg:checked + .burg label div:nth-child(1){top:12px; transform:rotate(45deg); transition:all 0.5s;}
#burg:checked + .burg label div:nth-child(2){opacity:0; transition:all 0.5s;}
#burg:checked + .burg label div:nth-child(3){top:12px; transform:rotate(-45deg); transition:all 0.5s;}

/* COOKIE */
.nosi{width:100%; min-height:140px; background:#f1f1f1; position:fixed; bottom:0; left:0; color:#fff; z-index:10; box-shadow:15px 0 6px #222;}
.cookie1{width:1000px; height:120px; margin:auto;}
.cookie2{margin:2px 0 0 0; text-align:center; color:#222;}
.cookie3{padding-left:20%; margin:9px 0 1px 0; width:80%; text-align:center; color:#222;}
.nosicookie{width:1000px; height:40px; margin:6px auto; position:relative;}
.nosicookie::after{clear:both; display:table; content:"";}
.cookie4{width:100px; color:#222; font-size:15px; border:solid 1px #222; text-align:center; text-decoration:none; display:block; float:left; background:#fff; left:calc(40% - 50px); padding:5px; position:absolute; top:7px; transition:all 0.5s; box-shadow:0 2px 6px #777;}
.cookie4:hover{transition:all 0.5s; background:#222; color:#fff;}
.cookie5{width:150px; color:#222; font-size:15px; border:solid 1px #222; text-align:center; text-decoration:none; display:block; float:left; background:#fff; padding:5px; left:50%; top:7px; position:absolute; transition:all 0.5s; box-shadow:0 2px 6px #777;}
.cookie5:hover{transition:all 0.5s; background:#222; color:#fff;}

/* FUTER */ 
.futer{width:1200px; min-height: 100px; margin:0 auto; position:relative; background:#e3ddd8;}
.futer::after{clear:both; display:table; content:"";}
.futer footer{width:280px; background:#e3ddd8; margin:10px; padding: 0 0 5px 5px; float:left;}
.futer footer figure{width:230px; margin: 0; padding: 0; background: #e3ddd8;}
.futer footer label{display:block; color:#a78a85; font-size:22px; margin:10px 0 10px 0;}
.futer footer p{white-space:pre-wrap; margin:0; color:#b58a85;}
.futer footer a{display:block; margin-top: 8px; color:#b58a85; text-decoration:none;}
.futer footer a:hover{text-decoration:underline;}
/* FUTER END */

/* PODFUTER */
.podfuter {width: 1200px; margin: 20px auto;}
.podfuter::after{clear: both; display: table; content: "";}
.levo{width: 500px; height: 40px; line-height: 40px; margin: 5px 0; float: left; position: relative; font-size: 14px; padding:0 0 0 20px;  color:#b58a85;}
.desno{width: 600px; height: 40px; line-height: 40px; margin: 5px 0; float: left; text-align: right; position: relative;}
.icofb{position:absolute; right: 130px; top: 10px;}
.icoin{position:absolute; right: 100px; top: 10px;}
.icoar{position:absolute; right: 50px; top: 10px;}
.icoarmob {display: none;}
/* PODFUTER END */


/* MOBILNI TELEFON */
@media only screen and (max-width: 767px) {
body{margin:80px 0 0 0;}
#top {font-size: 16px;}
#gornji, #donji {display: none;}
#mobilnihead {display: block; width: 100%; height: 80px; background: #fff; position: fixed; top: 40px; z-index: 1;}
.logomobilni {position: absolute; left: 10px; top: 15px; width: 140px; height: 47px;}
.korpa {right: 70px; top: 25px;}

/* MENI MOB */
.burg{width:40px; height:30px; position:absolute; top:28px; right:20px; display:block;}
.burg label{width:40px; height:30px; background:none;}
.burg div{width:36px;}
#burg:checked ~ .burg nav{max-height:460px; transition:all 1s;}
	
.burg nav {position: absolute; top: 40px; right: 0; width: 200px; max-height: 0; overflow: hidden; background: #fff; transition: all 0.5s;}
.burg nav a {display: block; width: 200px; height: 35px; line-height: 35px; text-decoration: none; padding-left: 15px; color:#b58a85; position: relative;}
#burg:checked ~ .burg nav {max-height: 350px; transition: all 0.5s;}

#podburg{display: none;}
.burg nav label{display: block; width: 100%; height: 35px;}
.open{position:absolute; right:10px; top:0px; transition:all 1s;}
.burg nav article{width: 200px; height: 0; overflow: hidden; transition: all 0.5s;}
#podburg:checked ~ article{height: 70px; transition: all 0.5s; }
#podburg:checked ~ a label .open{transform:rotate(90deg); transition:all 1s;}

/* COOKIE */
.cookie1{width:100%; height:200px;}
.cookie2{padding-top:7px;}
.cookie4{left:calc(30% - 50px);}
.nosicookie{width:100%;}
	
	
/* FUTER MOBILNI */
.futer {width: 100%;}
.futer footer {width: 90%; padding: 0 0 10px 0; margin: 0 5%;}


.podfuter{width: 100%; margin: 0 0 20px 0;}
.levo{width: 100%; text-align: center; line-height: 20px; padding: 0 0 0 0;}
.desno{width: 100%;}
.icofb{right:calc(50% + 10px);}
.icoin{right:calc(50% - 20px);}
.icoar{display: none;}
.icoarmob{display: block; margin:20px auto;}
}


/* TABLET */
@media only screen and (min-width: 768px) and (max-width: 1200px) {
body{margin:200px 0 0 0;}
#gornji, #donji {display: none;}
#tablet {position: fixed; top: 40px; left:0; width: 100%; height: 200px; display: block; background:#e3ddd8; z-index: 1;}

.topmgtablet {width:100%; height: 120px; position: relative;}
.topmgtablet img {display: block; margin:20px auto;}
.topmgtablet input[type="text"] {position: absolute; right: 65px; top: 30px; width: 200px; height: 35px; background: #e3ddd8; outline: none; border: solid 1px #b58a85; padding-left: 30px; caret-color: #b78e88; color: #a78a85;}
.topmgtablet input[type="text"]:focus{border: none;}
.lupatablet {position: absolute; right: 238px; top: 17px;}
.korpatablet {position: absolute; right: 20px; top: 10px; height: 35px;}

/* BURGER TABLET */
#nositabletburg{width: 100%; height: 60px; position: relative;}
.burgtablet{display:none;}
.burgtablet label{width:30px; height:30px; display:block; background:#ddd;}
.burgtablet div{width:26px; height:4px; position:absolute; left:1px; border-radius:3px; transform-origin:center center;}
.burgtablet div:nth-child(1){top:4px; transform:rotate(0deg); background:#a78a85; transition:all 0.5s;}
.burgtablet div:nth-child(2){top:13px; transform:rotate(0deg); background:#a78a85; transition:all 0.5s;}
.burgtablet div:nth-child(3){top:22px; transform:rotate(0deg); background:#a78a85; transition:all 0.5s;}

#burgtablet{display:none;}

#burgtablet:checked + .burgtablet label div:nth-child(1){top:12px; transform:rotate(45deg); transition:all 0.5s;}
#burgtablet:checked + .burgtablet label div:nth-child(2){opacity:0; transition:all 0.5s;}
#burgtablet:checked + .burgtablet label div:nth-child(3){top:12px; transform:rotate(-45deg); transition:all 0.5s;}

#burgtablet:checked ~ .meni nav{max-height:460px; transition:all 1s;}
.burgtablet{width:40px; height:30px; position:absolute; top:18px; right:calc(50% - 20px); display:block;}
.burgtablet label{width:40px; height:30px; background:none;}
.burgtablet div{width:36px;}

.burgtablet nav {position: absolute; top: 40px; right: 0; width: 200px; max-height: 0; overflow: hidden; background: #fff; transition: all 0.5s;}
.burgtablet nav a {display: block; width: 100%; height: 35px; line-height: 35px; text-decoration: none; padding-left: 15px; color:#b58a85; position: relative;}
#burgtablet:checked ~ .burgtablet nav {max-height: 350px; transition: all 0.5s;}

#podburgtablet{display: none;}
.burgtablet nav label{display: block; width: 100%; height: 35px;}
.open{position:absolute; right:10px; top:0px; transition:all 1s;}
.burgtablet nav article{width: 200px; height: 0; overflow: hidden; transition: all 0.5s;}
#podburgtablet:checked ~ article{height: 70px; transition: all 0.5s; }
#podburgtablet:checked ~ a label .open{transform:rotate(90deg); transition:all 1s;}

/* ZA COOKIE */
.cookie1{width:100%;}
.nosicookie{width:100%;}


.futer {width: 100%;}
.futer footer {padding: 0 0 10px 0; width: calc(25% - 20px); font-size: 14px;}
.futer footer figure {width:calc(100% - 20px);}
.podfuter {width: 100%; margin: 0 0 20px 0;}
.levo {width: 50%; text-align: center; padding: 0 0 0 0;}
.desno {width: 50%;}
.icoarmob {display: none;}
}