@charset "utf-8";
/* CSS Document */
/*
@font-face{font-family: shopr; src: url(palanquin-regular.ttf);}
@font-face{font-family: shopb; src: url(palanquin-bold.ttf); font-weight:bold;}
*/
html{font-size:100%; font-family:Arial, Helvetica, sans-serif; scroll-behavior: smooth;}

body{margin:0; padding:0; font-size:16px;}

*{	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;}

/* VRH STRANE */
#vrht{background:#4A619B;}	
#vrh{background:#4A619B;}
#vrh article{width:1000px; margin:auto; position:relative;}
#vrh article::after{content:""; clear:both; display:table;}
#vrh a{display:block; float:left; height:32px; line-height:32px; padding:0 15px 0 15px; text-decoration:none; color:#fff; font-size:14px;}
#vrh a:hover{text-decoration:underline;}

/* TOP STRANE */
#top{width:1000px; min-height:80px; margin:0 auto 0 auto; position:relative;}
#top::after{content:""; clear:both; display:table;}
.logo{display:block; width:200px; height:80px; float:left; background:url(grafika/logo.png); background-size:contain; background-repeat:no-repeat; background-position:center;}
#top h1{padding:0; margin:42px 0 0 10px; font-size:24px; color:#f00; float:left;}
#top h2{padding:0; margin:40px 0 0 20px; font-size:12px; color:#aaa; float:left;}
.place{display:block; position:absolute; right:5px; top:25px; width:200px; height:40px; border-radius:10px; text-align:center; line-height:40px; text-decoration:none; background:#F30; color:#fff;}
.place:hover{background:#292;}



/* MENU */
#menudesk{background:#eee;}
#menudesk article{width:1000px; margin:5px auto 3px auto;}
#menudesk article::after{content:""; clear:both; display:table;}
#menudesk a{display:block; float:left; height:32px; line-height:32px; padding:0 3.2%; text-align:center; text-decoration:none; border-radius:8px; color:#556; font-size:18px; font-weight:500;}
#menudesk a:hover{color:#eee; background:#888;}

#menu{width:100%; height:0; background:#048; overflow:hidden; -webkit-transition:all .5s;}
#menu a{display:block; height:40px; line-height:40px; text-decoration:none; color:#eef; position:relative; font-size:18px; border-bottom:solid 1px #ddf; padding:0 12px 0 12px;}
#menu a:hover{color:#cce;}
#menu a span{position:absolute; right:15px;}

.user{position:absolute; right:20px; top:10px; color:#090; display:none;}

#me{display:none;}
.lame img{display:block; position:absolute; right:20px; top:30px; width:40px; height:40px; visibility:hidden;}




/* FUTER */
#futer{width:1000px; min-height:80px; margin:0 auto 0 auto; position:relative;}
#futer::after{content:""; clear:both; display:table;}

#futer article{float:left; margin:5px;}
#s1, #s2, #s3, #s4{display:none;}
#futer label{display:block; width:100%; height:40px; line-height:40px; padding-left:8px; color:#bdf; border-bottom:solid 1px #7af; font-size:18px; font-weight:500; cursor:pointer;}
#futer label:hover{color:#eef;}



.f1{width:20%;}
.f1 a{display:block;width:100%; height:40px; line-height:40px; padding-left:16px; text-decoration:none; color:#fff; border-bottom:solid 1px #888;}
.f1 a:hover{color:#ff0;}

.f2{width:20%;}
.f2 a{display:block;width:100%; height:40px; line-height:40px; padding-left:16px; text-decoration:none; color:#fff; border-bottom:solid 1px #888;}
.f2 a:hover{color:#ff0;}

.f3{width:25%;}
.f3 a{display:block; float:left; width:30%; height:64px; margin:2% 1.5% 2% 1.5%; overflow:hidden; border:solid 1px #ddd;}
.f3 img{width:100%; height:100%; object-fit:cover; transition:all 1s;}
.f3 img:hover{ transform:scale(2,2); transition:all 1s;}

.f4{width:calc(35% - 40px);}
.f4 footer{display:block; margin:5px; padding:10px; height:50px; width:calc(100% - 10px);}
.f4 a{width:30px; height:30px; margin-right:15px;}
.f4 img:hover{opacity:0.5;}
.f4 span{display:block; width:calc(100% - 10px); height:40px; font-size:12px; color:#fff; font-weight:100; margin:10px 5px 0 5px; padding:5px; border-top:solid 1px #999;}
.f4 form{width:calc(100% - 10px); height:50px; margin:5px; padding:5px; border-bottom:solid 1px #999;}
.f4 input[type="text"]{width:calc(100% - 125px); height:40px; font-size:18px; padding-left:8px; border-radius:5px; border:none;}
.f4 input[type="submit"]{width:120px; height:40px; font-size:18px; border-radius:5px; border:none; background:#335F16; color:#fff; cursor:pointer;}
.f4 input[type="submit"]:hover{background:#485E91;}
::placeholder{font-size:18px; color:#4A64A8;}
.f4 main{width:100%; padding:5px; color:#fff;}
.f4 aside{width:100%; padding:5px; color:#999; font-size:36px;}
.f4 small{font-size:14px;}

.futerb{width:100%; height:50px; line-height:50px; font-size:14px; text-align:center; color:#345987;}

/* NOVI ELEMENTI */
green{margin:0; padding:0; color:#9f9;}
blue{margin:0; padding:0; color:#99f;}
mv{display:block; width:100%; margin:0; padding:3px 0 10px 10px; color:#ff5;}
posete{display:block; width:100%; margin:0; padding:0 0 0 10px; color:#ddd;}
.f3 posete img{width:14px; height:20px;}

/* mobile */
@media only screen and (max-width: 480px) {
#vrht{height:4px;}
#vrh{display:none;}
#top{width:100%;}
#menudesk{display:none;}
#top h1, #top h2, .place{display:none;}

.user{display:block;}
.lame img{visibility:visible;}

#me:checked + #menu{height:360px; -webkit-transition:all 1s;}


/* FUTER */
#futer{width:100%; min-height:40px; position:relative;}
#futer label{width:100%; height:40px; line-height:40px; border-bottom:none; padding-left:0; text-align:center; font-size:16px;}

#futer article{width:23%; margin:1%; overflow:hidden;}
#futer div{width:100%; height:0; position:absolute; left:0; bottom:48px; background:#555; overflow:hidden; -webkit-transition:all 1s; z-index:120;}


.f4 footer{text-align:center;}

#s1:checked + div{height:280px;}
#s2:checked + div{height:280px;}
#s3:checked + div{height:280px;}
#s4:checked + div{height:280px;}

.futerb{font-size:12px;}
}


/* tablet */
@media only screen and (min-width: 481px) and (max-width: 1024px) {
#vrht{height:4px;}
#vrh{display:none;}
#top{width:100%;}
.logo{width:100%;}
#menudesk article{width:100%;}
#menudesk a{font-size:16px; padding:0 1.6%;}
#top h1, #top h2{display:none;}
.place{display:block; position:absolute; right:5px; top:30px; width:140px; height:40px; line-height:40px;}

.user{display:block;}
.lame img{visibility:hidden; left:20px; top:30px;}
#me:checked + #menu{height:400px; -webkit-transition:all 1s;}

/* FUTER */
#futer{width:100%; min-height:50px; position:relative;}
#futer label{width:100%; height:50px; line-height:50px;  border-bottom:none; padding-left:0; text-align:center;}

#futer article{width:23%; margin:1%; overflow:hidden;}
#futer div{width:50%; height:0; position:absolute; left:0; bottom:65px; background:#555; overflow:hidden; -webkit-transition:all 1s;}

#s1:checked + div{height:280px;}
#s2:checked + div{height:280px;}
#s3:checked + div{height:280px;}
#s4:checked + div{height:280px;}
}


/* BIG */
@media only screen and (min-width: 1440px){

}