@charset "UTF-8";
/******* RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block}
iframe {border: 0}
body {line-height: 1}
ol, ul {list-style: none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none}
table {border-collapse: collapse;border-spacing: 0}
*, :after, :before {margin: 0;padding: 0;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box}
* html .clearfix,*:first-child+html .clearfix{zoom:1}

a {	noFocusLine: expression(this.onFocus=this.blur())
	outline: none;}
*:focus { outline: none; }
a img{border:0}
a [class^="icon-"]{color:inherit;text-decoration:none}
ul,ol{padding:0;margin:0}
li{padding:0;margin:0}
ul.list-unstyled li{padding:0;margin:0;list-style-type:none}
figure {overflow: hidden;}
ol { list-style: decimal; padding-left: 20px;}
strong, .strong {font-weight: 700; }

.fat{font-weight: 800;}
italic, .italic{font-style:italic;}
small,.text_small{font-size:.707em}
.relativ{position:relative}
.hide{display:none}
.show{display:block}
.center{text-align:center}
.left{text-align:left}
.right{text-align:right}

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}

.grid img{max-width:100%;height:auto;margin:0;padding:0;display:inline-block;position:relative;zoom:1;vertical-align:bottom}
img.align-left,.img-wrap.align-left{float:left;margin:0 10px 5px 0}
img.align-right,.img-wrap.align-right{float:right;margin:0 0 5px 10px}

.left-foto{float:left;max-width:300px;overflow:hidden;margin-right:40px;margin-bottom:20px;margin-left:0;display:block}
@media all and (max-width:1023px){
.left-foto{max-width:200px;margin-right:25px}
}
@media all and (max-width:768px){
.left-foto{max-width:150px;margin-right:25px}
}
@media all and (max-width:600px){
.left-foto{float:none;max-width:100%;margin-right:0;margin-left:0;margin-bottom:0}
}

img.full-width{clear:both;display:block;width:100%;height:auto;margin:0}
.grid{max-width:1400px;margin:0 auto;padding:0 1em}
.grid.flex{width:100%;max-width:100%;padding:0}
.row{display:block;overflow:hidden;clear:both}
*[class*="col_"].alpha{margin-left:0}
*[class*="col_"].omega{margin-right:0}
.col_1,.desk_1,.taby_1,.moby_1{width:6.6666666666667%}
.col_2,.desk_2,.taby_2,.moby_2{width:15%}
.col_3,.desk_3,.taby_3,.moby_3{width:23.333333333333%}
.col_4,.desk_4,.taby_4,.moby_4{width:31.666666666667%}
.col_5,.desk_5,.taby_5,.moby_5{width:40%}
.col_6,.desk_6,.taby_6,.moby_6{width:48.333333333333%}
.col_7,.desk_7,.taby_7,.moby_7{width:56.666666666667%}
.col_8,.desk_8,.taby_8,.moby_8{width:65%}
.col_9,.desk_9,.taby_9,.moby_9{width:73.333333333333%}
.col_10,.desk_10,.taby_10,.moby_10{width:81.666666666667%}
.col_11,.desk_11,.taby_11,.moby_11{width:90%}
.col_12,.desk_12,.taby_12,.moby_12{width:98.333333333333%}
*[class*="col_"]{margin-left:.83333333333333%;margin-right:.83333333333333%;margin-top:.5em;margin-bottom:.5em;float:left;display:block}
*[class*="desk_"]{margin-left:.83333333333333%;margin-right:.83333333333333%;margin-top:.5em;margin-bottom:.5em;float:left;display:block}
*[class*="taby_"]{margin-left:.83333333333333%;margin-right:.83333333333333%;margin-top:.5em;margin-bottom:.5em;float:left;display:block}
*[class*="moby_"]{margin-left:.83333333333333%;margin-right:.83333333333333%;margin-top:.5em;margin-bottom:.5em;float:left;display:block}
.max800w{width:100%;max-width:800px!important;margin-right:auto;margin-left:auto}
.max600w{width:100%;max-width:600px!important;margin-right:auto;margin-left:auto}
.max400w{width:100%;max-width:400px!important;margin-right:auto;margin-left:auto}
.grid img{max-width:100%;height:auto}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
* html .clearfix,*:first-child+html .clearfix{zoom:1}


@media all and (max-width:1023px){
.grid *[class*="moby_"]{float:none;width:auto;clear:both;display:block}
.grid *[class*="moby_"] [class*="col_"]{margin-left:0;margin-right:0;width:100%}
.grid.flex16{max-width:1600px;margin:0 auto;padding:0 1em}
.max800{width:100%;max-width:800px!important;margin-right:auto;margin-left:auto}
.max600{width:100%;max-width:600px!important;margin-right:auto;margin-left:auto}	
.max400{width:100%;max-width:400px!important;margin-right:auto;margin-left:auto}
}

@media all and (max-width:992px){
.grid *[class*="col_"]{float:none;width:auto;clear:both;display:block}
.grid *[class*="col_"] [class*="col_"]{margin-left:0;margin-right:0;width:100%}
}

@media all and (max-width:767px){
.grid *[class*="taby_"]{float:none;width:auto;clear:both;display:block}
.grid *[class*="taby_"] [class*="taby_"]{margin-left:0;margin-right:0;width:100%}
}

@media all and (max-width:480px){
.grid *[class*="desk_"]{float:none;width:auto;clear:both;display:block}
.grid *[class*="desk_"] [class*="desk_"]{margin-left:0;margin-right:0;width:100%}	
.grid{max-width:100%}
}

img.lazy-load{width:100%;opacity:.95}img.lazy-success{animation-fill-mode:forwards;animation-iteration-count:1;animation-duration:.6s;animation-name:fade-in;animation-delay:.1s;position:absolute;opacity:0;left:0;top:0}@keyframes fade-in{from{opacity:0}to{opacity:1}}
.container img{position:relative;zoom:1;max-width:100%;height:auto}

.container{max-width:1410px;margin:0 auto;padding:0}
.container.flex{width:100%;max-width:100%;padding:0}
.container.flex12, .grid.flex12{max-width:1200px;margin:0 auto;padding:0 1em}
.container.flex16, .grid.flex16{max-width:1600px;margin:0 auto;padding:0 1em}
.container.flex18, .grid.flex18{max-width:1800px;margin:0 auto;padding:0 1em}


.max1200{width:100%;max-width:1200px!important;margin-right:auto;margin-left:auto}
.max1280{width:100%;max-width:1280px!important;margin-right:auto;margin-left:auto}
.max1024{width:100%;max-width:1024px!important;margin-right:auto;margin-left:auto}
.max1000{width:100%;max-width:1000px!important;margin-right:auto;margin-left:auto}
.max960{width:100%;max-width:960px!important;margin-right:auto;margin-left:auto}
.max800{width:100%;max-width:800px!important;margin-right:auto;margin-left:auto}
.max700{width:100%;max-width:700px!important;margin-right:auto;margin-left:auto}
.max600{width:100%;max-width:600px!important;margin-right:auto;margin-left:auto}
.max500{width:100%;max-width:500px!important;margin-right:auto;margin-left:auto}
.max400{width:100%;max-width:400px!important;margin-right:auto;margin-left:auto}

.row{display:block;overflow:hidden;clear:both}

/*---- FLEXBOX ---*/
.rowF{display: flex;flex-wrap: wrap;align-items: flex-start;}

/*---- FLEXBOX MIDLLE ---*/
.rowM{height:100%;display:flex;align-items:center;justify-content:center}

/*---- FLEXBOX SA ISTOM VISINOM STUPACA ---*/
.rowE{display: flex;flex-wrap: wrap;align-items: stretch;}
/*********** END ISTA VISINA STUPCA ***************/

.box{display: flex; flex:1;margin:0 2%;flex-direction:column}
.box-0{display: flex; flex:1;margin:0;flex-direction:column}
.box_20mini{flex-basis:calc(20% - 10px);margin:5px;text-align:center;}

.box_10{flex-basis:10%}
.box_15{flex-basis:15%}
.box_20{flex-basis:20%}
.box_25{flex-basis:25%}
.box_30{flex-basis:30%}
.box_33{flex-basis:33.3333%}
.box_34{flex-basis:34%}
.box_40{flex-basis:40%}
.box_50{flex-basis:50%}	
.box_60{flex-basis:60%}
.box_66{flex-basis:66%}
.box_70{flex-basis:70}	
.box_80{flex-basis:80%}
.box_100{flex-basis:100%}

.box_10s{flex-basis:calc(10% - 20px);margin:10px}
.box_20s{flex-basis:calc(20% - 30px);margin:15px}
.box_25s{flex-basis:calc(25% - 30px);margin:15px}
.box_30s{flex-basis:calc(30% - 30px);margin:15px}
.box_33s{flex-basis:calc(33.3333% - 30px);margin:15px}
.box_34s{flex-basis:calc(34% - 30px);margin:15px}
.box_40s{flex-basis:calc(40% - 30px);margin:15px}
.box_50s{flex-basis:calc(50% - 30px);margin:15px}	
.box_60s{flex-basis:calc(60% - 30px);margin:15px}
.box_66s{flex-basis:calc(66% - 30px);margin:15px}
.box_70s{flex-basis:calc(70% - 30px);margin:15px}	
.box_80s{flex-basis:calc(80% - 30px);margin:15px}
	
.box_20m{flex-basis:calc(20% - 50px);margin:25px}
.box_30m{flex-basis:calc(30% - 50px);margin:25px}
.box_33m{flex-basis:calc(33.3333% - 50px);margin:25px}
.box_34m{flex-basis:calc(34% - 50px);margin:25px}
.box_40m{flex-basis:calc(40% - 50px);margin:25px}
.box_50m{flex-basis:calc(50% - 50px);margin:25px}	
.box_60m{flex-basis:calc(60% - 50px);margin:25px}
.box_66m{flex-basis:calc(66% - 50px);margin:25px}
.box_70m{flex-basis:calc(70% - 50px);margin:25px}	
.box_80m{flex-basis:calc(80% - 50px);margin:25px}
	
.box_20b{flex-basis:calc(20% - 80px);margin:40px}
.box_30b{flex-basis:calc(30% - 30px);margin:15px}
.box_33b{flex-basis:calc(33.3333% - 80px);margin:40px}
.box_40b{flex-basis:calc(40% - 80px);margin:40px}
.box_50b{flex-basis:calc(50% - 80px);margin:40px}	
.box_60b{flex-basis:calc(60% - 80px);margin:40px}
.box_70b{flex-basis:calc(70% - 80px);margin:45px}	
.box_80b{flex-basis:calc(80% - 80px);margin:40px}

.full_one{padding: 0 30px;}

@media (max-width:1023px){
[class*=box_].full1280{flex-basis:100%!important}
}

@media (max-width:1023px){
[class*=box_].full-one{flex-basis:100%!important}
.container.centered{max-width:980px;margin:0 auto}
}

*[class*="box_"]{flex-grow:1}

@media (min-width:981px) and (max-width:1280px){
.box{flex-basis:calc(50% - 4%)}
*[class*="box_"]{flex-basis:calc(50% - 4%)}
}
@media (max-width: 980px) {
    *[class*="box_"]{flex-basis: 100%;}
    .box, .box-0{flex-basis:100%}    	
    }

.overH{overflow: hidden;}

.box-news{display:flex;flex:1;margin:0 2%;flex-direction:row}
.news-img img{max-width:34%;height:auto}
.box-text{margin-left:20px}

@media (max-width:600px){
.full_one{padding: 0 20px;}	
.box-news{flex-basis:100%}
}
@media (min-width:601px) and (max-width:992px){
.box-news{flex-basis:calc(50% - 4%)}
}
@media (max-width:992px){
.box-news{flex-direction:column}
.box-text{margin-left:0}
}


.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
* html .clearfix,*:first-child+html .clearfix{zoom:1}

@media all and (max-width:480px){	
.container{max-width:100%}
.full_one{padding: 0 15px;}	
}

.padd15{padding:15px}
.padd20{padding:20px;}
.padd30{padding:30px}
.padd50{padding:50px}
	
.pdLR15{padding:0 15px}
.pdLR30{padding:0 30px}
.pdLR50{padding:0 50px}
	
.pdTB15{padding:15px 0}
.pdTB30{padding:30px 0}
.pdTB50{padding:50px 0}
	
.pdT15{padding-top:15px}
.pdT30{padding-top:30px}
.pdT50{padding-top:50px}
	
.pdB15{padding-bottom:15px}
.pdB30{padding-bottom:30px}
.pdB50{padding-bottom:50px}

.paddbox{padding:30px 20px 20px;}
.prSN{padding-right: 30px}
.plSN{padding-left: 30px}
.pt-5M{padding-top:5rem!important}
.pl-nosmall{padding-left: 30px;}

.p3rem{padding:3rem}

@media all and (max-width:992px){
.prSN{padding-right: 0}
.plSN{padding-left: 0}
.pt-5M{padding-top:0!important}	
.pl-nosmall{padding-left: 15px;}	
}
@media all and (max-width:767px){
    .pl-nosmall{padding-left: 0;}		
    }
    
.mt-0{margin-top:0rem!important}
.mb-0{margin-bottom:0rem!important}
.pt-0{padding-top:0rem!important}
.pb-0{padding-bottom:0rem!important}
.mt-1{margin-top:.7rem!important}
.mb-1{margin-bottom:.7rem!important}
.pt-1{padding-top:1rem!important}
.pb-1{padding-bottom:1rem!important}
.mt-2{margin-top:1.4rem!important}
.mb-2{margin-bottom:1.4rem!important}
.pt-2{padding-top:2rem!important}
.pb-2{padding-bottom:2rem!important}
.mt-3{margin-top:2.1rem!important}
.mb-3{margin-bottom:2.1rem!important}
.pt-3{padding-top:3rem!important}
.pb-3{padding-bottom:3rem!important}

.mt-5{margin-top:3.5rem!important}
.mb-5{margin-bottom:3.5rem!important}
.pt-5{padding-top:5rem!important}
.pb-5{padding-bottom:5rem!important}

.mt-7{margin-top:4.9rem!important}
.mb-7{margin-bottom:4.9rem!important}
.pt-7{padding-top:7rem!important}
.pb-7{padding-bottom:7rem!important}
.mt-8{margin-top:5.6rem!important}
.mb-8{margin-bottom:5.6rem!important}
.pt-8{padding-top:8rem!important}
.pb-8{padding-bottom:8rem!important}

.mt-10{margin-top:7rem!important}
.mb-10{margin-bottom:7rem!important}
.pt-10{padding-top:10rem!important}
.pb-10{padding-bottom:10rem!important}

.ml-auto{margin-left:auto!important}
.mr-auto{margin-right:auto!important}
.mx-auto{margin-left:auto!important;margin-right:auto!important}
.padnosmal{padding: 5rem 0}
.padBnosmal{padding: 0 0 5rem}

@media(max-width:1023px){
	.padnosmal{padding: 0 0}
	.padBnosmal{padding: 0 0 0}
    .mt-1{margin-top:.4rem!important}
    .mb-1{margin-bottom:.4rem!important}
    .pt-1{padding-top:0.5rem!important}
    .pb-1{padding-bottom:0.5rem!important}
    .mt-2{margin-top:0.7rem!important}
    .mb-2{margin-bottom:0.7rem!important}
    .pt-2{padding-top:1rem!important}
    .pb-2{padding-bottom:1rem!important}
    .mt-3{margin-top:1.1rem!important}
    .mb-3{margin-bottom:1.1rem!important}
    .pt-3{padding-top:1.5rem!important}
    .pb-3{padding-bottom:1.5rem!important}
    
    .mt-5{margin-top:1.7rem!important}
    .mb-5{margin-bottom:1.7rem!important}
    .pt-5{padding-top:2.5rem!important}
    .pb-5{padding-bottom:2.5rem!important}
    
    .mt-7{margin-top:2.4rem!important}
    .mb-7{margin-bottom:2.4rem!important}
    .pt-7{padding-top:3.5rem!important}
    .pb-7{padding-bottom:3.5rem!important}
    .mt-8{margin-top:2.8rem!important}
    .mb-8{margin-bottom:2.8rem!important}
    .pt-8{padding-top:4rem!important}
    .pb-8{padding-bottom:4rem!important}
    
    .mt-10{margin-top:3.5rem!important}
    .mb-10{margin-bottom:3.5rem!important}
    .pt-10{padding-top:5rem!important}
    .pb-10{padding-bottom:5rem!important}
}
@media all and (min-width: 1281px) {
.view1280{display:block!important}
}
@media all and (max-width: 1280px) {
.view1280{display:none!important}
}

@media all and (max-width: 1080px) {
.view1080{display:none!important}
}

@media all and (min-width: 992px) {
.viewsmall{display:none!important}
.viewbig{display:block!important}
}
@media all and (max-width: 991px) {
.viewsmall{display:block!important}
.viewbig{display:none!important}
.mb-5s{margin-bottom:5rem!important}
.mt-5s{margin-top:5rem!important}	
.pb-5s{padding-bottom: 5rem!important}
.pt-5s{padding-top: 5rem!important}	
}
@media all and (min-width: 1024px) {
.nosmall{display:block!important}	
.viewlap{display:none!important}	
}
@media all and (min-width: 481px) and (max-width: 1023px) {
.nosmall{display:none!important}		
.viewlap{display:block!important}
}
@media all and (max-width: 480px) {
.nosmall{display:none!important}		
.viewlap{display:none!important}
}

/****************************** PROVJERI DA LI BAŠ TREBAŠ ***********************************/
.col-25{width:25%}
.col-33{width:33.33%}
.col-40{width:40%}
.col-50{width:50%}
.col-60{width:60%}
.col-66{width:66.66%}
[class*="col-"]{float:left;display:block}

.pt-10{padding-top:10rem!important}
.pb-10{padding-bottom:10rem!important}
.padR30{padding-right: 30px}
.pad200{padding:200px}
.pad200RL{padding:0 200px}
.pad100RL{padding:0 100px}
.pad50RL{padding:0 50px}
.pad200TB{padding:200px 0}
.pad150TB{padding:150px 0}
.pad100{padding:100px}
.pad75{padding:75px}

@media only screen and (max-width:1600px) {
.pad100RL{padding:0 20px}	
}
@media only screen and (max-width:1400px) {
.pad200{padding:150px}
.pad200RL{padding:0 150px}	
.pad100{padding:90px}
.pad75{padding:65px}	
}
@media only screen and (max-width:1280px) {
.pad200{padding:100px}
.pad200RL{padding:0 100px}
.pad100RL{padding:0 60px}	
.pad50RL{padding:0 40px}	
.pad100{padding:80px}
.pad75{padding:60px}	
}
@media all and (max-width: 1024px) {
.col-25,.col-33,.col-40, .col-50,.col-60, .col-66{float:none;clear:both;display:block;width:100%}
}

@media all and (max-width: 991px) {	
    .pt-10{padding-top:5rem!important}
    .pb-10{padding-bottom:5rem!important}   	
.pad40{padding:0}	
.pad200{padding:80px}
.pad200RL{padding:0 60px}	
.pad100RL{padding:0 50px}
.pad50RL{padding:0 30px}	
.pad100{padding:50px 10px}
.pad75{padding:55px}
.pad150TB{padding:100px 0}
.padR30{padding-right: 0}	
}
@media(max-width:768px){
    .pt-10{padding-top:4rem!important}
    .pb-10{padding-bottom:4rem!important}
    }
@media(max-width:480px){
.pt-10{padding-top:3rem!important}
.pb-10{padding-bottom:3rem!important}
}
@font-face{font-family:icon-font;src:url(../fonts/icon-font.eot);src:url(../fonts/icon-font.eot?#iefix) format("eot"),url(../fonts/icon-font.woff) format("woff"),url(../fonts/icon-font.ttf) format("truetype"),url(../fonts/icon-font.svg#icon-font) format("svg")}
*{transition:background-color 500ms linear 0}
#fixtop{position:fixed;z-index:777;display:block;height:60px;top:0;left:0;width:100%;-webkit-transition:500ms all ease-in-out;-moz-transition:500ms all ease-in-out;-ms-transition:500ms all ease-in-out;-o-transition:500ms all ease-in-out}

#fixtop.light{background-color: rgba(40,40,40,.9);}
#fixtop.dark{background-color: rgba(40,40,40,1);}

.costum-navbar { background-color:rgba(40,40,40,1)!important;}
.fix-close{-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:0}
.slideanim{visibility:hidden;visibility:visible\9}
.slideanim.slide{visibility:visible;animation:slide 1s}
.slideanim::after{content:"";display:table;clear:both}
@keyframes slide {
0%{opacity:0;transform:translateY(50%)}
100%{opacity:1;transform:translateY(0)}
}
.navigationWrapper{clear:both;}
.navigationWrapper{margin-top:0;margin-bottom:0}
.nav-button{display:none}
.nav-close{display:none}
.nav{display:block;position:relative;bottom:auto;overflow:visible;text-align: center;}
.nav ul{display:block;position:relative;zoom:1;list-style-type:none;margin:0;padding:0}
.nav li{position:relative;padding-top:0;padding-bottom:0;margin-left: -4px}
.nav>ul>li{display:inline-block}

.nav a,.nav a:visited{display:block;font-weight:600;position:relative;color:#938674;text-transform:uppercase;font-size:13px;padding:22px 20px 16px;letter-spacing:1px}

#fixtop .nav a, #fixtop .nav a:visited {color: #9E9282;transition: color 2500ms linear 0;}
#fixtop.costum-navbar .nav a,#fixtop.costum-navbar .nav a:visited {color: #938674;}

.costum-navbar .nav a, .costum-navbar.nav a:visited{color:#938674;}

.nav-button{display:none}
.nav-close{display:none}
.nav{display:block;position:relative;bottom:auto;overflow:visible;text-align:center}
.nav ul{display:block;position:relative;zoom:1;list-style-type:none;margin:0;padding:0}
.nav li{position:relative;padding-top:0;padding-bottom:0;margin-left:-4px}
.nav>ul>li{display:inline-block}

.nav ul a:hover{color:#E3B65B}
.nav .nav-submenu>a{padding-right:20px}
.nav ul li.nav-submenu>a:after{padding-left:8px;padding-top:16px;content:"\E005"}
.nav ul li.nav-submenu ul li.nav-submenu>a:after{content:"\E005";padding-left:0;padding-top:0;position:absolute;z-index:999;display:block;right:10px;top:20px}
.nav .nav-submenu>a:after,.nav-button:before,.nav-close:before,.nav>ul>.nav-submenu>a:after{font-family:icon-font;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-variant:normal;font-weight:400;text-decoration:none;text-transform:none;vertical-align:middle}
.nav .nav-submenu li{min-width:260px}
.nav ul ul{min-width:300px;text-transform:none;display:none;position:absolute;top:100%;z-index:901;background-color:#21201F;text-align:left;line-height:1.6;
-webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.2);
box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.2);}
.nav ul ul.lijevo{right:0}
.nav ul ul.desno{left:0}
.nav ul ul.short{min-width:200px}
.nav .nav-submenu ul.short li{min-width:200px}
.nav ul ul li{margin-left:0;border-top:1px solid #111}
.nav ul ul a:hover{color:#E3B65B!important;background:#222}

.nav ul ul a,.nav ul ul a:visited{padding:20px;text-transform:none;color:#BCA583;font-weight: 600}
.nav ul ul ul{top:5px;left:95%;z-index:902}
.nav ul ul ul ul{z-index:903}
.nav ul ul ul ul ul{z-index:904}

li.nav-active a{color:#8E5FC0}
.lang{display:inline-block;padding-right:10px}


@media all and (min-width:1401px) and (max-width:1600px){
.nav a,.nav a:visited{padding:22px 14px 16px;letter-spacing:0}
}

@media all and (min-width:1080px) and (max-width:1400px){
.nav a,.nav a:visited{padding:22px 12px 16px;letter-spacing:0}
}
@media all and (min-width:1080px) and (max-width:1280px){
.nav ul{text-align: right}	
}
header.sticky .header-mid .nav ul ul a,.nav ul ul a:visited{line-height: 1.6}

@media only screen and (max-width:1079px){	
#logo{display:block;float:none;margin:0 auto}	
.head-contact{display:block;text-align: center}	
.nav ul ul li>a::before{left:0}	
.nav ul ul li:hover>a{padding-left:0!important;}
.nav ul ul li:hover>a::before{width:0}	
.nav ul ul a,.nav ul ul a:visited{padding:20px 0;color:#E9DDD1}		

.nav a,.nav a:visited{color:#E9DDD1;}

.nav{display:none;background:#fff none repeat scroll 0 0;bottom:0;left:0;overflow-x:hidden;overflow-y:auto;position:fixed;right:0;top:60px;z-index:900;border-bottom:0;}
	
	#logo{line-height:80px;float:none}
	#logo h1 {text-align: center; margin: 0 auto;}
	header.sticky .header-mid .nav-button {top:0}
	header.sticky .header-mid .nav{top:60px;}
	
.nav-button{display:block;width:70px;height:60px;position:absolute;z-index:999;top:0;cursor:pointer;padding:11px;right:5px}		
.nav-button span{display:block;position:absolute;z-index:999;height:2px;width:40px;background:#d7b138;opacity:1;left:15px;-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-ms-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out}
.nav-button span:first-child{top:21px}
.nav-button span:nth-child(2),.nav-button span:nth-child(3){top:30px}
.nav-button span:nth-child(4){top:39px}
.nav-button:hover span:first-child{transform:translateX(6px)}
.nav-button:hover span:nth-child(2){transform:translateX(-6px)}
.nav-button:hover span:nth-child(4){transform:translateX(6px)}
.nav-button.active span:first-child{top:29px;opacity:0}
.nav-button.active span:nth-child(2){-webkit-transform:rotate(225deg);-moz-transform:rotate(225deg);-ms-transform:rotate(225deg);-o-transform:rotate(225deg);transform:rotate(225deg);transition-delay:.25s}
.nav-button.active span:nth-child(3){-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-ms-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg);transition-delay:.25s}
.nav-button.active span:nth-child(4){top:29px;opacity:0}
.nav-lock-scroll{overflow:hidden}
.nav a{padding:20px 20px 20px 50px;letter-spacing:1px;color:#E9DDD1;font-weight:600;line-height: 1.6}
.nav ul a:hover{color:#E3B65B!important}
.nav>ul{background:#282828;padding:5px 20px 10px}
.nav>ul>li{display:block;background:#3E3D3C;margin:4px}
.nav .nav-submenu li{min-width:260px}
.nav .nav-submenu>ul{position:relative;left:0;top:0}
.nav .nav-submenu ul li a{border:none!important}
.nav .nav-submenu ul li a:hover{background-color:#2C2C2C;color:#E3B65B!important}
.nav .nav-submenu ul ul li a{padding-left:60px;border:none!important}
.nav .nav-submenu ul ul ul li a{padding-left:80px;border:none!important}
.nav ul ul li{border-top:1px solid #222}
.nav ul li.nav-submenu ul li.nav-submenu>a:after{content:"\E005"}
	
.nav-active,.nav-active a{background-color:#333231; }
	
.nav a:hover,.nav ul ul{background-color:#2C2C2C;text-align:center}
.nav ul li.nav-submenu>a::after{top:16px}
.nav ul li.nav-submenu>a:after{padding-left:0;padding-top:0!important;position:absolute;display:block;right:18px;top:20px;content:"\E005"}
.nav ul li a{color:#E9DDD1}
	
.nav ul ul{-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;}	
}
a.active:hover{color:#938674!important;}
a.here {text-decoration: underline;text-underline-offset: 5px;}
a.here:hover{color:#938674!important;}

/* ANIMIRANE LINIJE */
.sliding-u-l-r{text-decoration:none;display:inline-block;border-bottom:3px solid transparent;width:0;transition:.5s ease;white-space:nowrap;height:25px}
.sliding-u-l-r:hover{border-bottom:3px solid #00f;width:200px}

.line-mid{display:inline-block;position:relative;margin-bottom:0}
.line-mid:after{content:'';display:block;margin:0;height:1px;width:0;background:0 0;transition:width 1s ease,background-color 1s ease}
.line-mid:hover:after{width:100%;background:#E3B65B}

.nav-submenu ul li a.line-mid:after{margin:5px 0 0;max-width:200px}	

@media only screen and (max-width:1079px){	
.line-mid:after{margin:2px auto 0;max-width:200px}	
.nav-submenu ul li a.line-mid:after{margin:5px auto 0;}	
}
.sliding-u-l-r-l{display:inline-block;position:relative;padding-bottom:3px}
.sliding-u-l-r-l:before{content:'';display:block;position:absolute;left:0;bottom:0;height:3px;width:0;transition:width 0s ease,background .5s ease}
.sliding-u-l-r-l:after{content:'';display:block;position:absolute;right:0;bottom:0;height:3px;width:0;background:#00f;transition:width .5s ease}
.sliding-u-l-r-l:hover:before{width:100%;background:#00f;transition:width .5s ease}
.sliding-u-l-r-l:hover:after{width:100%;background:0 0;transition:all 0s ease}

.btn-eff{display:inline-block;text-align:center;cursor:pointer;box-shadow:inset 0 0 0 0 #21201f;transition-delay:0s;transition-duration:1s;transition-property:all;transition-timing-function:ease}
.btn-eff:hover{box-shadow:inset 240px 0 0 0 #21201f}
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
html{font-size:62.5%;min-width:320px}
body{margin:0;padding:0;font-family:"Rubik",sans-serif;font-size:1.6rem;color:#2C2C2C;font-weight:400;letter-spacing:.01em;line-height:1.65;background:#fff;position:relative;overflow-x:hidden;transition-property:background-color,color;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,0.3,1);-webkit-tap-highlight-color:transparent;tap-highlight-color:rgba(0,0,0,0)}
a{color:#D93600;text-decoration:none;outline:0;outline: none;}
:focus{outline:none}
a:visited{color:#D93600}
a:hover{color:#B20000}
p{margin:10px 0}

/*-------------- HEADINGS --------------------*/

h1,h2,h3,h4,h5,h6{font-family: 'EB Garamond', serif;letter-spacing:0.02em;color:#2C2C2C;font-weight:400;}
.tamnibg h2, .tamnibg h3, .tamnibg h4, .tamnibg {color:#D1CCC7;}

h2{font-size:36px;line-height:48px;}
h3{font-size:30px;line-height:40px;padding-bottom:25px;}
h4{font-size:26px;line-height:38px;padding-bottom:20px;}
h5{font-size:22px;line-height:34px;padding-bottom:15px;}
h6{font-size:20px;line-height:32px;}

h3.title-in{font-size:28px;line-height:38px;padding:30px 0 15px;}

h2.long, h3.long, h4.long, h5.long, h6.long,h3.info,h4.info{font-family: "Rubik", sans-serif;}
h2.long{font-size:32px;line-height:44px;margin:0 0 50px;display:block;}
h3.long{font-size:24px;line-height:36px;padding-bottom:25px;}
h3.longmini{font-size:17px;line-height:28px;padding:15px 0 25px;font-family: "Rubik", sans-serif;}
h3.longmini.light{font-weight: 300}
h4.long{font-size:22px;line-height:32px;padding-bottom:20px;}
h5.long{font-size:20px;line-height:30px;padding-bottom:15px;}
h6.long{font-size:18px;line-height:28px;padding-bottom:10px;font-weight:700;}

h3.info{font-size:24px;line-height:34px;padding:3rem 0 5px;font-weight: 600}
h4.info{font-size:22px;line-height:32px;padding:3rem 0 5px;font-weight: 600}

figure.mobile {width:100%;display: block; margin: 40px auto;}
figure.overhidden{overflow:hidden;position:relative;width:100%;height:auto}

 iframe {border: none; }

.tamnibg a{color:#E2D5BB;font-weight: 300}
.tamnibg a:visited{color:#E2D5BB}
.tamnibg a:hover{color:#fff}
.podcrtano{text-decoration: underline;text-underline-offset: 5px;}

/*------ STYLES -------*/

.vesna{background: #2E2D2C;}
.bgwhite{background: #fff;}
.our-story{color:#D1CCC7; font-weight: 300}

.tapeta{position:relative;z-index:2; background:url(../images/pivo-pozadina.webp) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#FDF6F5;}

.homemede-bg {background: url(../images/homemade_istrian_beer.svg) no-repeat center bottom; display: block; margin-bottom: 30px; padding-bottom: 50px;}
.homemede {width:160px; display: block!important; margin:0 auto 20px!important;text-align: center}

.pad100RL{padding:0 100px}
.pad50RL{padding: 0 50px}
.pad100L{padding: 0 0 0 100px}

h2.dark1R{color:#D1CCC7!important;font-size:44px;line-height:44px;letter-spacing:2px;padding:10px 15px 20px!important;text-transform: uppercase}

h2.onwhite{position:relative; color:#2C2C2C;font-size:44px;line-height:44px;letter-spacing:2px;margin:0;text-transform: uppercase}
h2.onwhite::first-letter{font-size:2em;font-weight:700;}
.onwhite-bg{height:130px;width:130px;margin:0 0 -64px -20px;background:#D1CCC7;position:relative; z-index:0;}

h2.black{color:#2C2C2C;font-size:44px;line-height:44px;letter-spacing:2px;margin:0;text-transform: uppercase}
h2.black::first-letter{font-size:2em;font-weight:700;}

h3.dark1{color:#D1CCC7;}
.our-beer{color:#D1CCC7}

.dark-bg{height:130px;width:130px;margin:0 0 -75px -20px;background:#5A524E;position:relative; z-index:0;}
h3.dark-in{color:#D1CCC7;font-size:28px;line-height:38px;padding:30px 0 15px;}

#myText{position:relative;z-index:9;}
.oblaci{width:100%;height:50%;display:flex;background-color:rgba(255,255,255,.5);position:absolute;z-index:5;top:50%;transform:translateY(-50%)}
.pivo-bg{width:100%;height:100%;display:flex;background-color:rgba(46,45,44,.6);position:absolute;z-index:-1;top:0;}

.pivo-bgL5{width:50%;height:100%;display:flex;background-color:#2A2A2A;position:absolute;z-index:-1;top:0;left:0}
.pivo-bgR5{width:50%;height:100%;display:flex;background-color:#2A2A2A;position:absolute;z-index:-1;top:0;right:0}

.pivo-bgL,.pivo-bgR{width:50%;height:100%;display:flex;background-color:#2e2d2c;position:absolute;z-index:9;top:0}
.pivo-bgL{left:0}
.pivo-bgR{right:0}
.animate-bgL{animation:moveLeft 1.2s forwards}
.animate-bgR{animation:moveRight 1.2s forwards}
@keyframes moveLeft{
0%{left:0}
100%{left:-50%}
}
@keyframes moveRight{
0%{right:0}
100%{right:-50%}
}

.buje{position:relative;z-index:2; background:url(../images/buje-bujska-pivovara-san-servolo-istra.jpg) no-repeat center top fixed;background-size:cover;background-color:#FDF6F5;}

.grid.flex16.nula{max-width:1600px;margin:0 auto;padding:0}	

@media all and (max-width:1280px){
.oblaci{width:100%;height:75%;}	
.grid.flex16.nula{max-width:800px;}	
}

.white05{background-color:rgba(255,255,255,0.4)}
figure.onemar{margin:0 1px}
@media all and (max-width:1023px){
figure.onemar.max600{margin:2px auto}
}
.preko{margin-top: -150px;}
.ispod{margin-bottom: -150px;}
.over .title{font-weight:600;margin:15px 0 10px;padding: 0; font-size:22px;line-height: 32px}
.over .title1{font-weight:700;font-size:16px}
.over .phw{font-size:15px;line-height:28px;margin-bottom:15px}
.columns {display: flex;}
.columns__column {flex: 1;margin: 0 2%;display: flex;flex-direction: column;}
.columns__content {flex: 1;}
@media all and (max-width:1280px){
.columns {flex-direction: column}
}
.columns__column60 {width:60%;margin: 0 2%;display: flex;flex-direction: column;}
.columns__column40 {width:40%;margin: 0 2%;display: flex;flex-direction: column;}
@media all and (max-width:1280px){
.columns__column60 {margin: 0 auto;display: block;}
.columns__column60,.columns__column40 {width:100%;}
}

.white-shadow{background: #fff;margin-bottom:1em; -webkit-box-shadow: 0px 6px 16px 0px rgba(134,160,226,0.5);-moz-box-shadow: 0px 6px 16px 0px rgba(134,160,226,0.5); box-shadow: 0px 6px 16px 0px rgba(134,160,226,0.5);}
.white-shadow3{background: #fff;margin-bottom:1em; -webkit-box-shadow: 0px 6px 16px 0px rgba(134,160,226,0.3);-moz-box-shadow: 0px 6px 16px 0px rgba(134,160,226,0.3); box-shadow: 0px 6px 16px 0px rgba(134,160,226,0.3);}
.white-shadow7{background: #fff;margin-bottom:1em; -webkit-box-shadow: 0px 6px 16px 0px rgba(134,160,226,0.7);-moz-box-shadow: 0px 6px 16px 0px rgba(134,160,226,0.7); box-shadow: 0px 6px 16px 0px rgba(134,160,226,0.7);}

.box_2,.box_2line{width:46%;float:left;display:block;margin:10px 2%}
.box_2line{padding-right:30px;border-right:solid 1px #3b3a38}
.box_3{width:29%;float:left;display:block;margin:10px 1%}
.box_4,.box_4line{width:21%;float:left;display:block;margin:10px 2%}
.box_4line{padding-right:30px;border-right:solid 1px #3b3a38}
.box_2:first-child,.box_2line:first-child,.box_3:first-child,.box_4:first-child,.box_4line:first-child{border-left:solid 1px #3b3a38;padding-left:30px}

@media all and (max-width:1023px){
.box_2,.box_2line,.box_3,.box_4,.box_4line{width:96%;float:none}
.box_2:first-child,.box_2line:first-child,.box_3:first-child,.box_4:first-child,.box_4line:first-child{border-left:none;padding-left:0}
}
@media all and (max-width:600px){
.box_2,.box_2line,.box_3,.box_4,.box_4line{width:100%;float:none;margin:10px 0;border-right:none;padding-right:0}
.box_2:first-child,.box_2line:first-child,.box_3:first-child,.box_4:first-child,.box_4line:first-child{border-left:none;padding-left:0;}
}

/*------------- NAŠA PIVA -------------*/
.our-beer h3 {color:#D1CBC6;font-size:27px;line-height: 40px; font-weight: 800;text-transform: uppercase;letter-spacing: 2px;padding-bottom: 15px}
.our-beer h3 span {font-size:24px;font-weight: 400;}

@media (min-width:1024px) and (max-width:1080px){
.our-beer h3 {font-size:28px;line-height: 38px;letter-spacing: 1px;}	
}


@media all and (max-width:1023px){
.our-beer h3 {padding-bottom: 5px}	
}
.text-block{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;max-height:calc(1.6em * 2)}

.place{width:32.6666%;float:left;display:block;margin:0;padding-left:1%;padding-right:1%;box-sizing:border-box;}
.place:first-child{border-left:solid 1px #3b3a38;padding-left:1%}
.place:nth-child(2){border-left:solid 1px #3b3a38;border-right:solid 1px #3b3a38;padding-left:1%;padding-right:1%}
.place:last-child{border-right:solid 1px #3b3a38;padding-left:1%;padding-right:1%}
@media all and (max-width:1023px){
.place{width:100%;max-width:400px;margin:0 auto 50px;border-right:none;border-left:none;padding-left:2%;padding-right:2%;float:none}
.place:first-child,.place:nth-child(2),.place:last-child {border: none;padding-left: 1%;padding-right: 1%;}	
}
@media all and (max-width:600px){
.place{width:100%;float:none;margin:10px 0;border-right:none;border-left:none;padding-left:0;padding-right:0}
}
/*------------- IMAGE LINK ANIMACIJA -------------*/

#toceno{width:32%;display:block;overflow: hidden}
#toceno a{position:relative; display: block; width:100%; height: 100%; background-image:url('../images/Bujska_pivovara_San_Servolo-toceno-pivo.jpg');background-size: cover; background-position: center; background-repeat: no-repeat;background-color:#2E2D2C;transition: all 1s;}
#toceno a:hover {transform: scale(1.2);}

#toceno a figcaption{width:100%;padding:20px;position:absolute;bottom:0;z-index:2;background-color:rgba(0,0,0,.1)}
#toceno a figcaption:after{transition:opacity 3s ease,background-color .5s ease}
#toceno a h3, #toceno a p{margin:0;padding:0;color:#fff}
#toceno a h3{font-size:21px;line-height:40px;font-weight:700}
#toceno a:hover figcaption{opacity:0}

img.aro{content:'';position:absolute;top:50%;left:50%;width:65px;height:65px;transform:translate(-60%,-50%);opacity:0;transition:opacity .3s;z-index:4; }
#toceno a:hover .aro, .aro:hover{opacity:1;}



@media all and (max-width:1023px){
#toceno{width:100%;max-width:500px;height: 500px; margin:0 auto 50px;border-right:none;border-left:none;padding-left:2%;padding-right:2%;float:none}
}

/*********** VIDEO ************/

.video-container{position:relative;width:100%;height:0;padding-bottom:56.25%;background-size:cover;background-position:center center;cursor:pointer}
.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%}
.video-container button{box-sizing:content-box;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9;border:solid 1em transparent;width: 6.9375em; height: 4.875em;background:url('../img/you-btn.svg') 50%/cover content-box;font:16px/1.25 trebuchet ms,sans-serif;text-indent:200vw;text-shadow:none;filter:grayscale(0) drop-shadow(0 0 1px crimson);transition:.5s;white-space:nowrap;border-radius:50%/10%;cursor:pointer}
.video-container button::before{display:none}
.video-container button:focus,.video-container button:hover{outline:0;filter:grayscale(1) drop-shadow(0 0 1px #000)}

/* citati bijeli */

.citati{background: #fff;color: #2C2C2C; font-weight: 400;}
.citati a{color:#666;font-size: 13px;}
.citati a:hover{color:#D93600}

.citati blockquote{position:relative;display:block;padding:20px;font-size:15px;line-height:1.6;font-style:italic;color:#000;border:solid 1px silver;margin:30px 0}
.citati .blockquote-background{background:#f9f9f9;padding:20px}
.citati blockquote::before{content:"\201C";background-color:#FFF;border-radius:50%;width:75px;height:75px;font-size:60px;font-weight:700;color:silver;text-align:center;line-height:93px;position:absolute;left:-30px;top:-30px}
.citati blockquote::after{content:""}
.citati blockquote span{display:block;font-size:13px;font-style:italic;text-align:right;padding:15px 0 0}

/* citati */
.night blockquote{position:relative;display:block;padding:20px;font-size:16px;line-height:1.6;color:#a79f98;border:solid 1px #444;margin-top:-1px}
.night .blockquote-background{background:#2a2a2a;padding:20px}
.night blockquote::before{content:"\201C";background-color:#2E2D2C;border-radius:50%;width:75px;height:75px;font-size:60px;font-weight:600;color:#a79f98;text-align:center;line-height:93px;position:absolute;left:-30px;top:-30px}
.night blockquote::after{content:""}
.night blockquote span{font-style: italic;color:#777;font-family: 'EB Garamond', serif;letter-spacing: 1px}

/** expand-collapse **/

.expand-collapse h3 {background-color:#E9DDD1;color:#000; font-size:20px;font-weight: 400; padding: 20px 20px 0 20px; }
.expand-collapse h3 em {display: inline; background-color:#E9DDD1;color:#000; font-weight: 800 }
.expand-collapse{max-width:1200px;margin:0 auto}
.expand-collapse p{background-color:#E9DDD1;color:#000;padding:20px;margin:0}
.expand-collapse div{padding:0;margin:-2px 0 0 0}
.expand-collapse span{display:block;background-color:#726259;color:#E9DDD1;font-size: 15px; font-weight: 300;font-style: italic;letter-spacing: 1px; cursor:pointer; padding:20px; margin:0}
.expand-collapse span:hover{background-color:#E2C17D;color:#000;font-weight: 400;}

.expand-collapse span .arrow-bottom {margin-left: 20px; display: inline-block; width: 12px; height: 12px; border-top: 2px solid #E9DDD1; border-right: 2px solid #E9DDD1; transform: rotate(135deg);-webkit-transition: 300ms linear all;-moz-transition: 300ms linear all;-o-transition: 300ms linear all;transition: 300ms linear all;}
.expand-collapse span:hover .arrow-bottom {  border-top: 2px solid #ff0000; border-right: 2px solid #ff0000;}
.expand-collapse span.active .arrow-bottom  {  transform: rotate(-45deg);border-top: 2px solid #000; border-right: 2px solid #000;}

.padall321{padding:4rem 2rem}

@media all and (max-width:767px){	
.padall321{padding:3rem 2rem}
}
@media all and (max-width:600px){
.padall321{padding:1.5rem 15px}
}
@media all and (max-width:480px){
.padall321{padding:10px}	
.columns__column.padall321{padding:1em!important;}
}

/*--- ANIMACIJE -----*/

.ani-box{width:100%;display:flex}
.left-div,.right-div{width:50%;position:relative}
.right-div img{width:110%;position:relative;left:-10%}
.inner-div{width:66%;min-height:100vh;position:absolute;background:rgba(44,44,44,.7);top:0;right:0}

.anigraybgL{content:'';position:absolute;top:0;bottom:0;left:0;width:66%;background:rgba(44,44,44,.7);z-index:0;}
.anigraybgR555{content:'';position:relative;top:0;bottom:0;right:0;width:66%;background:rgba(44,44,44,.7);z-index:0;}

.anigraybgR{position:relative;background:rgba(44,44,44,.7);z-index:0;margin-left:20%;height: 100%}

.out-imageR{position:relative;z-index: 2;top:5%; right:auto;botom: 5%;left: -10%}
.out-imageL{position:relative;z-index: 2;top:5%; left:auto;botom: 5%;right: -10%}

.line{-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;text-align:center;position:relative;-webkit-transition:1s;transition:1s}
.line:after{position:absolute;z-index:2;-webkit-transition:1s;transition:1s;content:'';width:0;left:50%;bottom:-4px;height:1px;background:red}
.line:hover{cursor:pointer}
.line:hover:after{width:100%;left:0}

/*-------------- ANIMATE.CSS --------------------*/

.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}
@-webkit-keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}

/*-------------- LAZY-LOAD IMAGE --------------------*/

img.lazy-load{width:100%;opacity:.95}img.lazy-success{animation-fill-mode:forwards;animation-iteration-count:1;animation-duration:.6s;animation-name:fade-in;animation-delay:.1s;position:absolute;opacity:0;left:0;top:0}@keyframes fade-in{from{opacity:0}to{opacity:1}}

/*-------------- opće --------------------*/

 .box,.boxNW{height:100%;padding:0;margin:0;display:flex;align-items:center;justify-content:center}
 .box .box-inner{width:100%;}

section {width: 100%;}
.usual {display: block;}
.back {background: #fff;position: relative;z-index: 0}
.text-right { text-align: right; }
.second a{color:#fff!important}
.second a:hover{color:#000!important}
p.textp { font-size: 14px; color: #FFF; font-weight: 700; padding: 0px 30px 0px;}
h3.text3 {font-size: 24px; color: #FFF; padding: 80px 30px 0px; margin-bottom: 20px; letter-spacing: 0.05em; line-height: 38px; }
h3.onblack{color:#e2d5bb;}

h4.text4 {font-size: 16px; color: #FFF; padding: 0px 30px 30px; margin-bottom: 30px; letter-spacing: 0.04em; line-height: 30px; }
p.textp { font-size: 14px; color: #FFF; font-weight: 700; padding: 0px 30px 0px;}

@media screen and (max-width:991px){
h3.text3 { font-size: 20px; margin-bottom: 15px; line-height: 32px;font-weight: 400 }
h4.text4 { font-size: 16px; margin-bottom: 25px; line-height: 28px; font-weight: 400}
}
@media screen and (max-width:767px){
h3.text3 { font-size: 18px; margin-bottom: 13px; line-height: 30px; }
h4.text4 { font-size: 15px; margin-bottom: 20px; line-height: 27px; }	
}
/*-------------- PODSTRANICE --------------------*/
.has-animation{position:relative}
.has-animation img,.has-animation p{opacity:0}
.has-animation.animate-in img,.has-animation.animate-in p{animation:textHidden .1s 1.1s forwards}
.has-animation.animate-in:after,.has-animation.animate-in:before{content:'';position:absolute;top:0;right:0;height:100%;z-index:10}
.has-animation.animate-in:before{background-color:rgba(139,125,112,0.3)}
.has-animation.animate-in:after{background-color:rgba(42,42,42,0.3);animation-delay:.5s}
.has-animation.animation-ltr.animate-in:before{animation:revealLTR 1.8s ease}
.has-animation.animation-ltr.animate-in:after{animation:revealLTR 1s .6s ease}
.has-animation.animation-rtl.animate-in:before{animation:revealRTL 1.8s ease}
.has-animation.animation-rtl.animate-in:after{animation:revealRTL 1s .6s ease}
@keyframes revealRTL{
0%{width:0;right:0}
65%{width:100%;right:0}
100%{width:0;right:100%}
}
@keyframes revealLTR{
0%{width:0;left:0}
65%{width:100%;left:0}
100%{width:0;left:100%}
}
@keyframes textHidden{
0%{opacity:0}
100%{opacity:1}
}
/*------- MASONRY GALLERY -------*/
      .masonry {
        -webkit-column-width: 400px;
                column-width: 400px;
        -webkit-column-gap: 5px;
                column-gap: 5px;
        padding: 5px;	max-width: 1600px; margin-left: auto;margin-right: auto;}
      .masonry img {width: 100%;cursor: pointer;}
/*---------------- animacija prozori head ------------------*/

.ani-box{position:relative;width:100%;overflow:hidden}
.cover{position:absolute;top:0;bottom:0;width:50%;background-color:#2E2D2C;z-index:2}
#cover{left:0}
#cover2{right:0}
@keyframes slideLeft{
from{transform:translateX(0)}
to{transform:translateX(-100%)}
}
@keyframes slideRight{
from{transform:translateX(0)}
to{transform:translateX(100%)}
}
.animate-left{animation:slideLeft 3s forwards}
.animate-right{animation:slideRight 3s forwards}

/*---------------- zoom ------------------*/
.zoom{overflow:hidden}
.zoom-image, .zoom-image5{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease-out}
.zoom-image:hover{transform:scale(1.15)}
.zoom-image5:hover{transform:scale(1.05)}
.boxsha{-webkit-box-shadow:0 2px 5px 0 rgba(17,9,5,.2);-moz-box-shadow:0 2px 5px 0 rgba(17,9,5,.2);box-shadow:0 2px 5px 0 rgba(17,9,5,.2)}
.boxsha2x{-webkit-box-shadow:0 3px 7px 0 rgba(17,9,5,.5);-moz-box-shadow:0 3px 7px 0 rgba(17,9,5,.5);box-shadow:0 3px 7px 0 rgba(17,9,5,.5)}

.white{width:100%;overflow:hidden;background:#fff;border-radius:5px;box-shadow:5px 5px 5px rgba(0,0,0,.3)}
.box2,.boxw2{width:49.8%;margin:1px .1%;float:left;display:block;overflow:hidden}
.box3,.boxw3{width:33.13333333333333%;margin:0 .1% 5px;float:left;display:block;overflow:hidden}
.box6,.boxw6{width:16.46666666666667%;margin:0 .1% 5px;float:left;display:block;overflow:hidden}
.box5{width:32.8%;margin:0 .1% 5px;float:left;display:block;overflow:hidden}
.box7{width:66.8%;margin:0 .1% 5px;float:left;display:block;overflow:hidden}
@media all and (max-width:1200px){
.box5,.box7{width:100%;max-width:800px!important;float:none;margin:2px auto!important}
.box6,.boxw6{width:33.13333333333333%;margin:0 .1% 5px;float:left;display:block;overflow:hidden}
}
@media all and (max-width:1100px){
.boxw2{width:100%;max-width:700px!important;float:none;margin:5px auto!important}
.boxw3{width:100%;max-width:600px!important;float:none;margin:2px auto!important;min-height:400px}
}
@media all and (max-width:900px){
.box2{width:100%;max-width:700px!important;float:none;margin:5px auto!important}
.box3{width:100%;max-width:600px!important;float:none;margin:2px auto!important;min-height:400px}
}
@media all and (max-width:768px){
.box6{width:49.8%;margin:1px .1%;float:left;display:block;overflow:hidden}
}
@media all and (max-width:600px){
.box6{width:100%;max-width:500px!important;float:none;margin:5px auto!important}
.max250{width:100%;max-width:220px!important;margin-right:auto;margin-left:auto}	
}
#image-gallery{margin-bottom: 2px}

.kontakt{background:#fff;padding:3.5em;display:block;border:solid 1px #c0c0c0;color:#000}

/*-------------- STRELICE --------------------*/

.fix-scroll{display:block;width:100%;height:60px;margin: -120px 0 0; position:relative;}
.smoothscroll{position:absolute;z-index:2;left:calc(50%);-webkit-transform:translateX(-50%);transform:translateX(-50%); bottom:-50px;width:84px;height:120px;margin:0 auto 0;padding-left:28px;}
.chevron,.chevron-hex{position:absolute;width:28px;height:8px;opacity:0;transform:scale3d(0.5,0.5,0.5);animation:move 3s ease-out infinite;}
.chevron:first-child,.chevron-hex:first-child{animation:move 3s ease-out 1s infinite}
.chevron:nth-child(2),.chevron-hex:nth-child(2){animation:move 3s ease-out 2s infinite}
.chevron:before,.chevron:after{content:' ';position:absolute;top:0;height:100%;width:51%;background:#CC5500}
.chevron-hex:before,.chevron-hex:after{content:' ';position:absolute;top:0;height:100%;width:51%;background:#CC5500}
.chevron:before,.chevron-hex:before{left:0;transform:skew(0deg,30deg)}
.chevron:after,.chevron-hex:after{right:0;width:50%;transform:skew(0deg,-30deg)}
@keyframes move {
25%{opacity:1}
33%{opacity:1;transform:translateY(30px)}
67%{opacity:1;transform:translateY(40px)}
100%{opacity:0;transform:translateY(55px) scale3d(0.5,0.5,0.5)}
}
@keyframes pulse {
to{opacity:1}
}
@media all and (max-width:480px) {
.fix-scroll{display:none;}
}

/*------------ DVA DUGMETA SA STRELICOM --------*/

.btn,.button{background:#1d1d1d;border:none;font-size:1rem;color:#fff;letter-spacing:1.5px;text-transform:uppercase;padding:1.4rem 2.1rem;border:1px solid #1d1d1d;transition:color .1s cubic-bezier(.16, .08, .355, 1),background .1s cubic-bezier(.16, .08, .355, 1);display:inline-block;cursor:pointer;width:100%;min-width:20rem;outline:0;vertical-align:middle;text-align:center;position:relative;overflow:hidden}

a.btn-dark-arrow{color:#1d1d1d}
a.btn-light-arrow{color:#D1CCC7}

@media (min-width:400px){
.btn,.button{width:auto}
}
@media (min-width:800px){
.btn,.button{font-size:1.1rem;padding:1.4rem 2.8rem}
}
.btn:hover,.button:hover{background:#2a2a2a;border-color:#2a2a2a;color:#FFA500}
.btn-border{background-color:transparent;color:#1d1d1d}
.btn-arrow{position:relative;transition:background-color .3s ease-out}
.btn-arrow span{display:inline-block;position:relative;transition:all .3s ease-out;will-change:transform;padding-right:2rem}
.btn-arrow:hover span{transform:translateX(-10px)}
.btn-dark-arrow span::after{font-size:20px;content:' \2192';position:absolute;right:-10px;top:-10px;bottom:0;line-height:inherit;color:inherit;color:#fff}
.btn-dark-arrow:hover span::after{color:#FFA500}
.btn-light-arrow span::after{font-size:20px;content:' \2192';position:absolute;right:-10px;top:-10px;bottom:0;line-height:inherit;color:inherit;color:#2E2D2C}
.btn-light-arrow:hover span::after{color:#FFA500}

/*-------------- arrow button --------------------*/

.ab-block{display:inline-block}
.arrow-button1{display:flex;color:#a67c52!important;padding:0 3px;transition:all .3s ease;font-weight:400;letter-spacing:.044rem;cursor:pointer;align-items:center;font-size:15px;font-style:italic}
.arrow-button1>.arrow1{width:6px;height:6px;border-right:2px solid #a67c52!important;border-bottom:2px solid #a67c52!important;position:relative;top:1px;transform:rotate(-45deg);margin:0 6px;transition:all .3s ease}
.novosti .arrow-button1>.arrow1{border-right:2px solid #6b8eb3!important;border-bottom:2px solid #6b8eb3!important}
.arrow-button1>.arrow1::before{display:block;width:3px;transform-origin:bottom right;height:2px;position:absolute;opacity:0;bottom:calc(-2px / 2);transform:rotate(45deg);transition:all .3s ease;content:"";right:0}
.arrow-button1:hover>.arrow1{transform:rotate(-45deg) translate(4px,4px);border-color:#b0a89f!important}
.arrow-button1:hover>.arrow1::before{opacity:1;width:8px;background:#b0a89f!important}
.arrow-button1:hover{color:#b0a89f!important}
a.zumba{color:#a67c52!important;font-style:italic}
a.zumba:hover{color:#6b8eb3!important}


/*-------------- CARD--------------------*/

.card {padding: 10rem 5rem;color:#D1CCC7; background: #2E2D2C; }
.card2 {padding: 0 3rem;color:#D1CCC7; background: #2E2D2C; }
.sha-row{box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);}

.card-back{transform:rotateY(180deg);background-size:cover;background-position:center;background-repeat:no-repeat}
#card-back-1{background-image:url('../images/buje-pivo-san-servolo.webp')}
#card-back-2{background-image:url('../images/pivo-san-servolo-kartoni.webp')}
#card-back-3{background-image:url('../images/pivo-san-servolo-ipa.webp')}

/*-------------- IZREKA GOOD BEER--------------------*/

.parallax2{position: relative; background-color: #2C2C2C; width:100%; padding: 15px; text-align: center}
blockquote.goodbeer{width:90%;max-width:1024px;margin:20px auto;position:relative;display:block;padding:10px;font-size:20px;line-height:1.2;color:#edb89c;border:solid 1px #6d6559}
.goodbeer .blockquote-background{text-align:center;background:#2c2c2c;padding:6px}
span.ita-s{font-style:italic;font-size:15px}
blockquote.goodbeer::before{content:"\201C";background-color:#2c2c2c;border-radius:50%;width:75px;height:75px;font-size:60px;font-weight:700;color:#6d6559;text-align:center;line-height:93px;position:absolute;left:-30px;top:-30px}
blockquote.goodbeer::after{content:""}


/*-------------- testimonials - NEPOKRETNI --------------------*/

blockquote.testimonials{width:90%;max-width:600px;margin:20px auto;position:relative;display:block;padding:10px;font-size:16px;line-height:1.2;color:#000;border:solid 1px #8a7d6f}
.testimonials .blockquote-background{text-align:left;background:#e8dcd1;padding:6px 10px 6px 25px; width:100%}
.blockquote-background p.ita-s{font-style:italic;font-size:14px;text-align:right!important;}
blockquote.testimonials::before{content:"\201C";background-color:#e8dcd1;border-radius:50%;width:70px;height:70px;font-size:60px;font-weight:700;color:#8a7d6f;text-align:center;line-height:93px;position:absolute;left:-30px;top:-30px}
blockquote.testimonials::after{content:""}

/*-------------- BACKGROUND images --------------------*/

.bgimg-1{position:absolute;top:0;left:0;right:0;bottom:0;background:url(../images/bujska-pivovara-san-servolo-10.webp) no-repeat center center;background-size:cover}
.bgimg-2{position:absolute;top:0;left:0;right:0;bottom:0;background:url(../images/buje-bujska-pivovara-san-servolo-istra.jpg) no-repeat center center;background-size:cover}

.bgimg-3{position:absolute;top:0;left:0;right:0;bottom:0;background:url(../images/bujska-pivovara-san-servolo-12.webp) no-repeat center center;background-size:cover}
.bgimg-4{position:absolute;top:0;left:0;right:0;bottom:0;background:url(../images/bujska-pivovara-san-servolo-13.webp) no-repeat center center;background-size:cover}
.ciao{display: none}
.zbogom{display: inherit}
@media (max-width: 1023px) {
    *[class*="bgimg-"]{display: none} 
	.ciao{display: block}
	.zbogom{display: none}
    }


/*-------------- BACKGROUND SLIDER --------------------*/

.css-carousel{width:100%;height:450px;position:relative;overflow:hidden}
.css-carousel .css-img{max-width:100%;position:absolute;left:0;right:0;opacity:0;-webkit-animation:css-carousel-fade 30s linear infinite;-moz-animation:css-carousel-fade 30s linear infinite;-ms-animation:css-carousel-fade 30s linear infinite;animation:css-carousel-fade 30s linear infinite}
.css-carousel .css-img:nth-child(2){-webkit-animation-delay:5s;-moz-animation-delay:5s;-ms-animation-delay:5s;animation-delay:5s}
.css-carousel .css-img:nth-child(3){-webkit-animation-delay:10s;-moz-animation-delay:10s;-ms-animation-delay:10s;animation-delay:10s}
.css-carousel .css-img:nth-child(4){-webkit-animation-delay:15s;-moz-animation-delay:15s;-ms-animation-delay:15s;animation-delay:15s}
.css-carousel .css-img:nth-child(5){-webkit-animation-delay:20s;-moz-animation-delay:20s;-ms-animation-delay:20s;animation-delay:20s}
.css-carousel .css-img:nth-child(6){-webkit-animation-delay:25s;-moz-animation-delay:25s;-ms-animation-delay:25s;animation-delay:25s}
@-webkit-keyframes css-carousel-fade{
0%,100%,20%{opacity:0}
15%,5%{opacity:1}
}
@-moz-keyframes css-carousel-fade{
0%,100%,20%{opacity:0}
15%,5%{opacity:1}
}
@-ms-keyframes css-carousel-fade{
0%,100%,20%{opacity:0}
15%,5%{opacity:1}
}
@keyframes css-carousel-fade{
0%,100%,20%{opacity:0}
15%,5%{opacity:1}
}

/*------- KENBURN SLIDER - slideshow.css --------*/

@-webkit-keyframes right {
from{-webkit-transform:translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);transform:translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);-ms-transform:translateX(-4%)}
to{-webkit-transform:translateX(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);transform:translateX(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);-ms-transform:translateX(4%)}
}
@keyframes right {
from{-webkit-transform:translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);transform:translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);-ms-transform:translateX(-4%)}
to{-webkit-transform:translateX(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);transform:translateX(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);-ms-transform:translateX(4%)}
}
@-webkit-keyframes left {
from{-webkit-transform:translateX(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);transform:translateX(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);-ms-transform:translateX(4%)}
to{-webkit-transform:translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);transform:translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);-ms-transform:translateX(-4%)}
}
@keyframes left {
from{-webkit-transform:translateX(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);transform:translateX(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);-ms-transform:translateX(4%)}
to{-webkit-transform:translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);transform:translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);-ms-transform:translateX(-4%)}
}
@-webkit-keyframes down {
from{-webkit-transform:translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);transform:translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);-ms-transform:translateY(-4%)}
to{-webkit-transform:translateY(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);transform:translateY(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);-ms-transform:translateY(4%)}
}
@keyframes down {
from{-webkit-transform:translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);transform:translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);-ms-transform:translateY(-4%)}
to{-webkit-transform:translateY(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);transform:translateY(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);-ms-transform:translateY(4%)}
}
@-webkit-keyframes up {
from{-webkit-transform:translateY(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);transform:translateY(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);-ms-transform:translateY(4%)}
to{-webkit-transform:translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);transform:translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);-ms-transform:translateY(-4%)}
}
@keyframes up {
from{-webkit-transform:translateY(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);transform:translateY(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);-ms-transform:translateY(4%)}
to{-webkit-transform:translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);transform:translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);-ms-transform:translateY(-4%)}
}
@-webkit-keyframes out {
from{-webkit-transform:scale(1.15);transform:scale(1.15)}
to{-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes out {
from{-webkit-transform:scale(1.15);transform:scale(1.15)}
to{-webkit-transform:scale(1);transform:scale(1)}
}
@-webkit-keyframes in {
from{-webkit-transform:scale(1);transform:scale(1)}
to{-webkit-transform:scale(1.15);transform:scale(1.15)}
}
@keyframes in {
from{-webkit-transform:scale(1);transform:scale(1)}
to{-webkit-transform:scale(1.15);transform:scale(1.15)}
}
.fullW{width: 100%;min-height: 100vh}
#slides{position:fixed;width:1px;height:1px;left:-9999px}
#slideshow{position:fixed;overflow:hidden;top:0;left:0;right:0;bottom:0}
#slideshow .slide,#slideshow span{display:block;position:absolute;top:0;left:0;right:0;bottom:0}
#slideshow .slide span{background-size:cover;background-position:center}
#slideshow .slide span.animate.right,#slideshow .slide span.animate.left{left:calc((-4vw + -4vh + -4%)/3);right:calc((-4vw + -4vh + -4%)/3)}
#slideshow .slide span.animate.up,#slideshow .slide span.animate.down{top:calc((-4vw + -4vh + -4%)/3);bottom:calc((-4vw + -4vh + -4%)/3)}
#slideshow span.animate{-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}
#slideshow span.animate.right{-webkit-animation-name:right;animation-name:right}
#slideshow span.animate.left{-webkit-animation-name:left;animation-name:left}
#slideshow span.animate.up{-webkit-animation-name:up;animation-name:up}
#slideshow span.animate.down{-webkit-animation-name:down;animation-name:down}
#slideshow span.animate.in{-webkit-animation-name:in;animation-name:in}
#slideshow span.animate.out{-webkit-animation-name:out;animation-name:out}
#slideshow span.animate.paused{-webkit-animation-play-state:paused;animation-play-state:paused}

/*------- ANIMIRANI MARKER google maps ----------*/
#map-container {position: relative}	
#map{width:100%;height:auto}
.marker{position:absolute;width:40px;height:40px;transform:translate(-50%,-50%)}
.pulse{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,0,0,.5);border-radius:50%;animation:pulse-animation 1.5s infinite}
@keyframes pulse-animation{
0%{transform:scale(.5);opacity:1}
100%{transform:scale(1.5);opacity:0}
}
.marker svg{width:100%;height:100%}	

/*-------------- footer --------------------*/

.footer{letter-spacing: 1px; width:100%;text-align:center;color: #e2d5bb;padding:60px 0 0;font-size:13px;box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.2);}
.bg-dark{background: #21201F}

ul.footer-info li{display:block;padding:5px; color:#e2d5bb;}
ul.footer-info li a{color:#e2d5bb}
ul.footer-info li a:hover{color:#FFA500}
ul.footer-info span.icon-f{display:inline-block;color:#e2d5bb;padding-top: 3px; margin-right: 5px}


#copyright {display: block;width: 100%;padding: 12px 0;margin-top:50px; background:#1A1A1A;color:#C9B9A2}
#copyright a{font-size:12px;line-height: 2.2rem;display:inline-block;color:#C9B9A2;}
#copyright {text-align: center}
#copyright a:hover{color:#FFA500;}
#copyright a:after{content:'';display:block;margin:auto;height:1px;width:0;background:transparent;transition:width .5s ease,background-color .5s ease}
#copyright a:hover:after{width:100%;background:#fff}

.dim156{width: 156px;display: block}
.dim85{width: 85px;display: block;margin: 0 auto}
.dim28{width: 28px;display: block;margin: 0 auto;}
.dim18{width: 18px;}

@media all and (max-width: 767px) {	
#footer{ width:100%;min-height:auto;background:none;background-color:#fff;padding-top: 0}	
ul.footer-nav {margin-bottom: 20px}	
ul.footer-nav li{padding:1px 6px}
ul.footer-info{margin-bottom: 15px}
ul.footer-info li{padding:1px 10px;}		
}

/*------------ SOCIAL ICON ---------------------*/
ul.social-ul { text-align: center; padding: 0; list-style: none;}
ul.social-ul li { display: inline-block; margin: 0 5px;}
.social{height:32px;width:32px;margin:10px;float:left;background-size:cover;transition:all ease .3s}
.facebook{background-image:url(../img/fejs.svg)}
.instagram{background-image:url(../img/inst.svg)}
.youtube{background-image:url(../img/you.svg)}
.social:hover{background-position:0 -32px;box-shadow:0 0 3px 1px rgba(0,0,0,.3);cursor:pointer}

/*-------------- Scroll Top --------------------*/

#scroll-Top .arrow{margin-top: 25px; display:inline-block;height:12px;position:relative;width:12px;}
#scroll-Top .arrow::after{border-bottom-style:solid;border-bottom-width:2px;border-right-style:solid;border-right-width:2px;content:'';display:inline-block;height:12px;left:0;position:absolute;top:0;width:12px;}
#scroll-Top .arrow.is-top{-moz-transform:rotate(225deg);-ms-transform:rotate(225deg);-webkit-transform:rotate(225deg);transform:rotate(225deg);}
#scroll-Top .arrow::after,.arrow .arrow::after{border-color:#fff;}
#scroll-Top .return-to-top{position:fixed;left:10px;bottom:10px;display:none;width:48px;line-height:48px;height:48px;text-align:center;cursor:pointer;background:#948875;border-radius:50%;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;z-index:2}
#scroll-Top .return-to-top:hover{background:#CC5500}
#scroll-Top .return-to-top span{position:relative;bottom:0;animation-name:top;animation-direction:alternate;animation-iteration-count:infinite;animation-duration:1s}
@keyframes top {
0%{bottom:0}
100%{bottom:7px}
}
/*--------- VERIKALNA ANIMIRANA LINIJA ----------*/
.myLine,.myLineRight{position:absolute;width:1px;height:1px;background-color:darkorange}
.myLine{left:0;top:50vh}
.myLineRight{right:0;top:0}
.extended{background-color:#3b3a38;top:0;bottom:100vh;height:100%;transition:all 3s ease}
.extended-down{background-color:darkorange;top:0;bottom:0;height:100%;transition:all 3s ease}
.fade-out{opacity:0;transition:opacity 1s ease}

/*-------------- RESPONSIVE --------------------*/

@media screen and (max-width:767px){
blockquote.goodbeer{padding:12px 10px;font-size:18px;}
h3{font-size:28px;line-height:38px;}
#head h1{letter-spacing:1px;font-size:30px;}
#head p.izreka{padding:25px 0 25px 0;letter-spacing:0.5px;font-size:17px;}	
h3.dark-in{font-size:24px;line-height:34px;padding:25px 0 15px;}	
}
@media screen and (max-width:600px){
	.dark-bg{height:110px;width:110px;margin:0 0 -64px -20px;}
	h2{font-size:32px;line-height:44px;}
	h2.black{font-size:36px;line-height:36px;}
	
	h3{font-size:27px;line-height:37px;}
	h3.dark-in{font-size:23px;line-height:33px;}
	.para-font{font-size:26px}	
	blockquote.goodbeer{width:92%;padding:13px 10px;font-size:17px;}
	#head h1{letter-spacing:0.5px;font-size:28px;}
    #head p.izreka{letter-spacing:0;font-size:16px;}	
}
@media screen and (max-width:480px){
	.dark-bg{height:100px;width:100px;margin:0 0 -80px -20px;}	
	h2{font-size:30px;line-height:42px;}
	h2.black{font-size:32px;line-height:32px;letter-spacing: 1px}
	h3{font-size:24px;line-height:36px;}
	h3.dark-in{font-size:22px;line-height:32px;padding:20px 0 12px;}
	.para-font{font-size:24px}	
	blockquote.goodbeer{width:94%;padding:15px 10px;font-size:16px;}
	#head h1{letter-spacing:0.5px;font-size:26px;}
    #head p.izreka{padding:20px 0 20px 0;letter-spacing:0;font-size:15px;}	
}
@media screen and (max-width:360px){
	h2{font-size:26px;line-height:36px;}
	h3{font-size:22px;line-height:28px;}
}
@media (max-width:1023px){
.disable-wow .wow{visibility:visible!important;animation-name:none!important}
}
/*-------------- INTRO --------------------*/
#home {display:block; position: relative; height: 100vh}
#homeimg {display: none}
.intro{width:66%;max-width: 400px; height: calc(100vh - 60px);position:relative;z-index:1;top:60px;padding-top:5%;text-align:center; background: rgba(40,40,40,.9); }
#logo{padding:15px 20px 30px;text-align:center;display:block;}
#enterlogo{width:250px;display:block;margin:auto}
#logo-small{width:174px; position:absolute; margin-left:113px; margin-top:10px;}
.none{display: none!important}

.opanula{visibility: hidden; opacity: 0; transition: visibility 0s .5s, opacity .5s linear;}
.opasto{visibility: visible; opacity: 1;transition: opacity 2s linear;}

.intro h1{font-family: 'EB Garamond', serif;text-transform:uppercase;color:#EDB89C;font-size:17px;line-height:40px;font-weight:400;letter-spacing:2px;margin:0;margin-top: 25px;margin-bottom: 75px; text-align: center}
.intro h1 span{color:#B3865D; font-size:30px;font-weight:400;letter-spacing:2px;}

.intro h2{position:relative;z-index:2;margin:25px 0 25px;padding: 30px 20px;color:#938674;font-family: "Rubik", sans-serif; font-weight:300;font-size:16px;letter-spacing:0.5px;line-height:1.65;}

.show{background: rgba(1,14,20,.1); }
.intro a{text-decoration:none;color:#938674;text-transform:uppercase;font-weight:500;font-size:14px}

/*-------------- PODSTRANICE --------------------*/

.glava{background: #2E2D2C;padding:20px 0 0;position:relative;width: 100%;min-height:400px}
.highlight h1{text-align:center;font-size:36px; color:#f6d186;padding:5px 10px 35px;position:relative;z-index:3;text-shadow:1px 1px 0 rgba(0,0,0,0.1)}

#logo-banner{display: block;width:220px;margin:80px auto 0}

#o-nama{position:relative; background-image:url('../images/o-nama-head.jpg');background-size: cover; background-position: center; background-repeat: no-repeat;background-color:#2E2D2C;}
#nasa-piva{position:relative; background-image:url('../images/nasa-piva-head.jpg');background-size: cover; background-position: center; background-repeat: no-repeat;background-color:#2E2D2C;}
#tasting-room{position:relative; background-image:url('../images/tasting-room.jpg');background-size: cover; background-position: center; background-repeat: no-repeat;background-color:#2E2D2C;}

#testimonials{position:relative; background-image:url('../images/san-servolo-testimonials.webp');background-size: cover; background-position: center; background-repeat: no-repeat;background-color:#2E2D2C;}
#kontakt{position:relative; background-image:url('../images/bujska-pivovara-kontakt.jpg');background-size: cover; background-position: center; background-repeat: no-repeat;background-color:#2E2D2C;}



.banner{width:100%;max-width:100vw;display:block;position:relative;padding:0;transition:all .1s ease 0}
#logo-alone{display: block;width:140px;margin:0 auto 0;padding:40px 0 25px}
#head{padding:20px 0 0;position:relative;width: 100%;}
#head h1,#head h2{text-align:center;padding:0;position:relative;z-index:3;text-shadow:1px 1px 0 rgba(0,0,0,0.1)}
#head h1{font-weight:700;padding:10px 15px 40px;letter-spacing:2px;font-size:28px;color:#f6d186}
#head h1.cool{color:#a79f98;}
#head h2{font-weight:700;margin:10px 0 30px 0;letter-spacing:1px;font-size:17px;color:#f6d186;}


.highlight{background: #2E2D2C;padding:20px 0 0;position:relative;width: 100%;min-height:400px}
.highlight h1,.highlight h2{text-align:center;font-size:36px; color:#f6d186;padding:5px 10px 35px;position:relative;z-index:3;text-shadow:1px 1px 0 rgba(0,0,0,0.1)}


#head p.izreka{background: rgba(46,45,44,.7);font-weight:300;margin:0; padding:30px 0 30px 0;letter-spacing:1px;font-size:18px;color:#edb89c;}
#head p.tocno{background: rgba(46,45,44,.7);font-weight:300;margin:0; padding:10px 0 10px 0;letter-spacing:1px;font-size:18px;color:#edb89c;}

#head.simple h1 { margin: 10px 15px 0;}
#head.simple p.izreka {padding: 20px 0 20px 0;}

.para-font{display:inline-block;margin-bottom:2px;font-size:28px;color:#FFA500;text-shadow:0 0 5px rgba(0,0,0,.6);letter-spacing:.02rem;}



/***** TASTING ROOM **********/

.tastroom {background: #2E2D2C;width:100%;max-width:100vw;display:block;margin:0;padding:20px 0 0; position:relative;transition:all .1s ease 0}

#h1-box h1{text-align:center;position:relative;z-index:3;text-shadow:1px 1px 0 rgba(0,0,0,0.1);font-weight:700;padding:10px 15px 30px;letter-spacing:2px;font-size:28px;color:#f6d186}


#anipe-box p.izreka{background: rgba(46,45,44,.7);font-weight:300;margin:0; padding:10px 0 30px 0;letter-spacing:1px;font-size:18px;color:#edb89c;}

/***** END TASTING ROOM **********/

@media only screen and (max-width:1400px) {
.intro{max-width:320px;}	
#enterlogo{width:200px;padding-top: 80px}	
}
@media all and (min-width:1401px) and (max-width:1600px){
#logo-small{width:140px;margin-left:70px;margin-top:13px;}
}
@media all and (min-width:1080px) and (max-width:1400px){
#logo-small{width:120px;margin-left:70px;margin-top:18px;}
}
@media only screen and (max-width:1079px) {
#head h1{font-size:19px}
#head h2{font-size:40px}	
.intro{width:100%;max-width:100%;height:auto;padding-top: 0}
#enterlogo{width:120px;padding-top: 0}		
#logo-small{width:130px;margin-left:90px;margin-top:13px;}
.intro h1{font-size:13px;line-height:40px;}	
.intro h1 span{font-size:24px;line-height:36px!important;}	
.intro h2{font-size:15px;line-height:25px;margin:15px 0 15px;padding: 20px 20px; }	
#logotip{display: none}	
}

h1.dark1R{color:#D1CCC7!important;font-size:44px;line-height:44px;letter-spacing:2px;margin:0;padding:10px 15px 20px!important;text-transform: uppercase}
h1.dark1R::first-letter, h2.dark1R::first-letter{font-size:2em;font-weight:700;}
h2.dark1R{position: relative; color:#D1CCC7!important;font-size:38px;line-height:44px;letter-spacing:2px;padding:10px 15px 20px!important;text-transform: uppercase}

@media only screen and (max-width:767px) {
#homeimg {display: block;padding-top:80px}
#head{min-height:300px;padding:60px 0 0;}
#logo-alone{margin: auto 0;}		
#head h1{margin:10px 15px 10px;font-size:20px}
#head p.izreka{ padding:15px 10px 15px 10px;letter-spacing:0;font-size:16px;}	
#head h2{font-size:36px}
.intro h1{font-size:16px;}	
.intro h1 span{font-size:28px;}
#logo-small{width:130px;margin-top:16px;}	
.intro h2{font-size:14px;line-height:22px;margin:12px 0 12px;padding: 15px; }
}
@media only screen and (max-width:600px) {
h2.dark1R{font-size:32px;line-height:32px;}
}

@media only screen and (max-width:480px) {	
.intro{background: rgba(32,32,32,.6);}	
#logo-small{margin: 16px auto 16px;}	
.intro h1{font-size:16px;font-weight: 700}	
.intro h1 span{font-size:32px;font-weight: 700}
.intro h2{font-size:16px;line-height:26px;color:#DDDDDD }
h2.dark1R{color:#D1CCC7!important;font-size:44px;line-height:44px;letter-spacing:2px;margin:0;padding:10px 15px 20px!important;text-transform: uppercase}	
}
@media only screen and (max-width:360px) {	
h2.dark1R{font-size:32px;line-height:32px;}
}

/* IMAGE EFFECT */
.ov-hidden{overflow: hidden}
.img-sha{border:solid 1px #444;padding: 10px 10px 0}
.box-sha{border:solid 1px #444;padding: 2em 1.5em}
.box-sha h3{font-family: "Rubik", sans-serif;font-size: 16px;line-height:1.65;color:#a79f98;}
h2.mali{font-family: "Rubik", sans-serif;font-size: 16px;line-height:1.65;color:#a79f98;}
.item-cont{overflow:hidden;display:inline-block;width:100%}
.item-cont img {width:100%}
.item-cont a {display:block;position:relative;color:#FFF;border-color:#f6d186;font-size:20px;}
.item-cont a .item-content{position:absolute;width:100%;cursor:pointer;height:100%;text-align:center;top:0;left:0;opacity:1;}
.item-cont a .item-content:before{border-top:1px solid;border-bottom:1px solid;-webkit-transform:scale(0, 1);transform:scale(0, 1);opacity:0;}
.item-cont a .item-content:after{border-left:1px solid;border-right:1px solid;-webkit-transform:scale(1, 0);transform:scale(1, 0);opacity:0;}
.item-cont a .item-content:before,.item-cont a .item-content:after{border-color:#f6d186;position:absolute;top:15px;right:15px;bottom:15px;left:15px;content:'';opacity:0;-webkit-transition:opacity 1.2s, -webkit-transform 1.2s;transition:opacity 1.2s, transform 1.2s;}
.item-cont a .item-content .text-cont{width:100%;opacity:0;position: relative}
.item-cont a .item-content .text-cont em{display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);font-size: 16px!important;text-align: center; color:#f6d186; font-style: normal; font-weight: 300; margin: 0;padding: 0}
.item-cont a .item-content .text-cont em.biggg{font-size:48px;line-height:96px;width:96px;height:96px;padding:0;margin:0;border:solid 1px #f6d186;border-radius:50%}
.item-cont a .item-content .text-cont em.smalll{font-size:32px;line-height:64px;width:64px;height:64px;padding:0;margin:0;border:solid 1px #f6d186; border-radius:50%}
.item-cont a .item-content .text-cont em{  opacity: 0; }
.item-cont a:hover .item-content .text-cont em{ opacity:1;
  transition: opacity .8s ease-in;
  -moz-transition: opacity .8s ease-in;
  -webkit-transition: opacity .8s ease-in;
  -o-transition: opacity .8s ease-in; }
.item-cont a .item-content .align-content{position:relative;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);transform:translateY(-50%);}
.item-cont a .figa{position:relative;width:100%;height:100%;-webkit-transition:-webkit-transform 0.8s;transition:transform 0.8s;-webkit-transform:scale(1, 1);-ms-transform:scale(1, 1);-o-transform:scale(1, 1);transform:scale(1, 1);}
.item-cont a .figa:after{position:absolute;width:100%;height:100%;left:0;top:0;content:"";background-color:rgba(159,49,0,0.3);opacity:0;}
.item-cont a .figa img{max-width:100%;height:auto;display:block;}
.item-cont a:hover .figa{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);}
.item-cont a:hover .figa:after{opacity:1;}
.item-cont a:hover .item-content{opacity:1;}
.item-cont a:hover .item-content:before,.item-cont a:hover .item-content:after{border-color:#f6d186;}
.item-cont a:hover .item-content:before{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
.item-cont a:hover .item-content:after{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
.item-cont a:hover .item-content .text-cont{opacity:1;}

.foto600 {width: 100%;max-width: 600px;display: block;margin-left: auto;margin-right: auto;}
.foto500{width:100%; max-width:500px; margin:0 auto; text-align:center;}
.foto900{width:100%; max-width:900px; margin:0 auto; text-align:center;}

@media only screen and (max-width:1079px){
.foto600 {padding-bottom: 10px;padding-top: 10px;}
}
@media only screen and (max-width:767px){
.item-cont a .item-content .text-cont p{font-size: 80%;}
.item-cont a .item-content .text-cont p.small{font-size:68%;}
}
@media only screen and (max-width:480px){
.item-cont a .item-content .text-cont p{font-size: 70%;}
.item-cont a .item-content .text-cont p.small{font-size:60%;}
}
@media only screen and (max-width:400px){
.item-cont a .item-content .align-content{position:relative;top:30%;transform:translateY(-30%);-webkit-transform:translateY(-30%);-moz-transform:translateY(-30%);}
.item-cont a .item-content .text-cont p.small{font-size:40%;}
}

/*------------ POP UP AGE VERIFY -------*/

.boxH{background:#2E2D2C;position:relative;height:100vh;width:100%;z-index:9888;}
.boxH-inner{font-size:15px;line-height:1.4;background:#fff;position:absolute;text-align:center;left:0;right:0;top:20%;bottom:0;margin:0 auto;z-index:9999;width:100%;max-width:700px;height:40%;display:table;padding:32px 24px 30px}

a.bttn{background-color:#2E2D2C;font-weight:400;color:#fff;width:100%;margin-top:10px;text-decoration:none;display:inline-block;letter-spacing:.1px;padding:.5em 0}
a.bttn:hover{background-color:#CC5500;color:#fff;}
a.bttn.bttn-beta{background-color:#fff;border:1px solid #000;color:#000}
.decor-line{position:relative;top:.7em;border-top:1px solid #aaa;text-align:center;max-width:40%;margin:.5em auto;display:block;padding:.1em 1em;color:#ccc}
.decor-line span{background:#fff;color:#aaa;position:relative;top:-.7em;padding:.5em;text-transform:uppercase;letter-spacing:.1px;}
select{padding:7px 10px;text-align:center;width:100%;}
.boxH h3{color:#555;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #eee;padding-bottom:1em;margin:0 auto}
.boxH p{color:#777}
.boxH .small{font-size:14px;color:#aaa}
.boxH .bttn{letter-spacing:.1px;padding:.9em 1em .7em;margin:1em auto;display:block}