body {font-family: 'Montserrat', Arial, sans-serif; color: #000000; font-weight: 300;margin: 0 0rem;}
.logo {background:#fff url(logo.svg) no-repeat center center; position: relative; height: 100%;
    width: 85px;
    float: left;
    text-align: center;
    margin: 0 10px; position: absolute;}
.logo a {display: block !important; width: 100%; min-height: 80px;    height: 100%;}
a {color: #F5881F;outline: none; text-decoration: none;-webkit-transition: all 0.2s ease-out;
    -moz-transition: all 022s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;}
a:hover {color: #4f5450; }
h1,h2,h3,h4 {}
h1 {font-size: 26px;}
h2 {font-size: 20px;}
h3 {font-size: 18px;}
h4 {font-size: 16px;}
header a.eu  {
    opacity: 1;

    position: absolute;
    left: 0;
    height: auto;
    width: 122px;
    right: 0;
    margin: auto;
    z-index: 2;
    }
section{margin:1.5rem 0}
.slider-holder{margin-top: 0;}
figure {
    margin: 0;
}
hr { 
    display: block;
    height: 2px;
    border: 0;
    margin: 1em 0;
    padding: 0; 
background: #bd8c3b;
    background: -moz-linear-gradient(left, #bd8c3b 0%, #f6ee9c 50%, #bd8c3b 100%);
    background: -webkit-linear-gradient(left, #bd8c3b 0%,#f6ee9c 50%,#bd8c3b 100%);
    background: linear-gradient(to right, #bd8c3b 0%,#f6ee9c 50%,#bd8c3b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bd8c3b', endColorstr='#bd8c3b',GradientType=1 );}
.fa-check {color: #7DC417}
strong {font-weight: 700}
header {padding: 0px 0; display: block;  width: 100%; position: relative; z-index: 100}
.header {padding:0; display: block; float: left; width: 100%; position: relative}
nav[role="navigation"] {width: 100%; float: left; position: relative; padding: 0px 0 12px 0; margin-top: 0rem;font-weight: 300;}
nav[role="navigation"]:after{
    content: ' ';
    height: 2px;
    width: 100%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
   }
nav[role="navigation"] ul {list-style-type: none;margin: 0px 0px;
    padding: 0;
    padding: 0; 
    text-align: center;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-flow: wrap;
    padding-left: 100px;
}
nav[role="navigation"] ul {
    justify-content: center;
    align-items: center;
    flex-flow: wrap;
    padding-left: 100px;
}
nav[role="navigation"] li {
	
    display: inline-block;
	margin: 0 4px 0 0;
	font-size: 14px;
	}
nav[role="navigation"] li a {
	display: inline-block;
	padding: 6px 12px;
    text-transform: uppercase;
   
	text-decoration: none;
	color: #000000 ;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
    text-transform: uppercase;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 022s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    font-size: .875rem;
    position: relative
	}
nav[role="navigation"] li a:after, nav[role="navigation"] li.active a:after{
    height: 50px;
    display: block;
    width: 50px;
    margin: 0px auto;
    opacity: 0;
    content: '';   
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 022s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
background: url(fish.svg) no-repeat;
    position: absolute;
    top: -15px;
    z-index: -1;
    left: 0;
    right: 0;}

nav[role="navigation"] li a:hover,
nav[role="navigation"] li a:focus {
/*	background: #d8d3b5;*/
    
	}

nav[role="navigation"] li a:hover:after,nav[role="navigation"] li.active a:after{opacity: 1;top: -21px;}
   
nav[role="navigation"] li.active a {
/*
	color: #fff;
	background: #4f5450;
*/font-weight: 400;
	}	
nav[role="navigation"] li .logo a:after {display: none !important}
ul.lang {list-style-type: none; margin: 0px;padding: 0; float: right; padding: 0;    position: relative;
        right: 16px;
    top: 0;}
ul.lang li {display: inline-block;margin: 1px 10px;}

ul.lang li a{text-decoration: none;color: #000; font-weight: 300; text-transform: uppercase; font-size: 12px;}
ul.lang li.current a{font-weight: 400;}
ul.lang li a:after,
ul.lang li.current a:after{height: 1px;
    display: block;
    width: 30%;
    margin: 0;
    background: #9C6B4B;
    float: right;
    border-right: 1px white;
    content: '';   
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 022s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;}
ul.lang li a:after {background: transparent}
ul.lang li a:hover:after{width: 100%; background: #9C6B4B;}
nav.breadcrumb {
	font-size: 12px;
	color: #ccc;
    margin: 10px 0;
	}
nav.breadcrumb a {
	margin: 0 5px;
	text-decoration: none;
	color: #999;
	}
nav.breadcrumb a:first-child {
	margin-left: 0;
	}
nav.breadcrumb a:hover,
nav.breadcrumb a:focus {
	color: #333;
	}
nav.breadcrumb a:active {
	color: #666;
	}
nav.breadcrumb strong {
	margin-left: 5px;
	font-weight: bold;
	color: #333;
	}				

.side-nav {
	padding: 0 25px 25px; 
    background: #fcfcfc;
     border-bottom: 1px solid #f1f1f1;
	}
.side-nav ul{
	margin: 0; list-style-type: none; padding: 0

	}
.side-nav ul li a {
	display: block;
	padding: 8px 5px 8px 15px;
	font-size: 14px;
	line-height: 1;
    border-bottom: 1px solid #dadada;
    color: #4f5450;
    position: relative
	}
.side-nav ul li a:focus,
.side-nav ul li a:hover {
	background: #eee;
    color: #f3683d;
	}
.side-nav ul li a.active {
	color: #f3683d;
	}
.side-nav ul li a.active:before {
	 content: '\f104';  
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #f3683d;
    font-size: 16px;
    padding-right: 0.5em;
    position: absolute;
    top: 7px;
    left: 0;
	}
/*.slider-holder {position: absolute; max-width: 100vw; width: 100%; top: 0;}*/
.slider { max-height: 90vh; overflow: hidden; min-height: 60vh;}
.slider.page {  overflow: hidden; min-height: auto !important;}
/*.slider .slick-slide img { width: 100%; vertical-align: middle; height: 100%}
.slider div.slide {
        background-size: cover;
        height: 80vh;
        min-height: 25vh;
        background-position: center center;
        display: table;
        vertical-align: middle
	}
.slider.page div.slide {
        background-size: cover;
        height: 30vh !important;
        min-height: 450px;
        background-position: center center;
        display: table;
        vertical-align: middle
	}
.caption  { 
    z-index: 100;
    padding: 2rem;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    
    text-align: center;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
background: url(shadow.png) no-repeat center center; background-size: cover}
.caption h2{color: #fff; font-family: 'PT Serif', serif; font-size: 1.6rem;}
.caption p{color: #fff; font-family: Arial, sans-serif; font-size: 1rem;}
*/



.intro .title {display: block; font-size: 24px; position: relative; width: 100%;  text-align: left; margin-bottom: 15px;background: url(watercolor-4.png) no-repeat;
    background-size: contain; background-size: 178px;}

/*.intro .title:after{
    display: block;
    position: absolute;
    width: 47px;
    height: 13px;
    left: 0;
    right: 0;
    bottom: -18px;
    margin: auto;
  content: '';
  -webkit-mask: url(bordura.svg) no-repeat 50% 50%;
  mask: url(bordura.svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
    background-color: #B4AFA8
}*/
.intro {    text-align: left; font-size: 16px;position: relative; z-index: 1;padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    max-width: 400px;}
.full .intro {max-width: 100%;}

.intro p{margin: 15px 0 35px;    text-align: left; font-weight: 300; font-size: 1rem; line-height: 1.8}
.welcome .intro .title, .welcome .intro {text-align: left}
blockquote {font-family: 'Pinyon Script', cursive; color: #45515A; font-size: 28px}
.blockquote blockquote{position: relative;
    z-index: 1;
    padding: 2rem;
    color: #000;
    text-align: center;
    width: 100%;
margin: 0}
.blockquote blockquote:after {
        content: '';
        position: absolute;
        left:0px;
        top: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
    background: url('watercolor-4.png') no-repeat center center;
    background-size: contain;
    }

ul.inline {padding: 0; margin: 0 0 20px 0; list-style-type: none; text-align: center}
ul.inline li{display: inline}
ul.inline li .button{margin: 0 0px 10px 0}

.button{padding: 0px 4px; font-size: 14px; text-transform: uppercase; display: inline-block; color: #000; font-weight: 400; position: relative;}
.button:after, .button:before{ -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 022s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;}
.button:before{content: ''; left:0;position: absolute; z-index: -1; bottom: 2px; width: 100%; height: 8px; background: #F5881F; display: block}
.button:after{content: url(arrow.svg); right:-50px;top: 1px; position: absolute; z-index: -1; width: 30px; height: 8px; display: block}
.button.insta:before {background: #e1306c; width: 25%}
.button.face:before {background: #3b5998; width: 25%}
.button:hover:before {width:0;}
.button:hover:after {right:-55px;}

.proizvodi h2,.welcome h2{font-weight: 400; font-size: 1.5em; padding-bottom: 10px; cursor: pointer}
.proizvodi h2:after,.welcome h2:after{
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 022s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;}
.proizvodi .article:hover h2:after,.welcome .article:hover h2:after{width: 80%;}
.article {cursor: pointer;text-align: center;}
.lista .article {margin-top: 20px;}
.proizvodi h2 { color: #fff;}
/*.proizvodi img, .welcome img {border-radius: 50%}*/
.more {color: #f3683d; text-transform: uppercase; font-size: 0.9375em; font-weight: 700; text-decoration: none;}
.more .fa {margin-left: 5px;}
.more:hover {color: #4f5450; }
.proizvodi .more:hover {color: #c9c69b; }
.main {padding-bottom: 25px}
footer {padding: 0px 0; position: relative; z-index: 2}
.footer {
    width: 100%;
  
    position: relative;
    padding: 1.5rem 0;
    
}
.footer:before {
    content: "";
    opacity: 0.2;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 0;
}

footer ul {margin: 0; padding: 0; list-style-type: none;}
footer h3 {position: relative;    font-weight: 400;background: url(watercolor-4.png) no-repeat;
    background-size: contain;
    background-size: 138px;background-position: 0px 5px;}
footer h3:after{
    display: block;
    position: absolute;
    width: 30px;
    height: 8px;
    left: 0;
    right: 0;
    bottom: -13px;
    margin: auto;
  content: '';
  
    
}
/*h3:after, .main h1:after, .main h2:after{height: 1px;
    display: block;
    width: 35px;
    margin: 5px 0 0;
    background: #ccc;
    border-right: 1px white;
    content: '';   
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 022s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;}*/
#map_canvas { width:100%; height:300px; margin-bottom: 25px}

#map_canvas img { max-width: none; }
#map_canvas h3 { padding:0; margin:0; }
.mg-image a {display: block;background: #191B1C; overflow: hidden; margin-top: 25px}
.mg-image img {
    -webkit-transition: all 0.5s ease; /* Safari and Chrome */
    -moz-transition: all 0.5s ease; /* Firefox */
    -o-transition: all 0.5s ease; /* IE 9 */
    -ms-transition: all 0.5s ease; /* Opera */
    transition: all 1s ease;
        max-width: 100%;
    
}
.mg-image:hover img {
    -webkit-transform:scale(1.05); /* Safari and Chrome */
    -moz-transform:scale(1.05); /* Firefox */
    -ms-transform:scale(1.05); /* IE 9 */
    -o-transform:scale(1.05); /* Opera */
     transform:scale(1.05);
     opacity: 0.8;
}
 
.features {background: rgba(242,242,242,0.45)}
ul.list-features {
    padding: 0;
    margin: 25px 0;
    list-style-type: none;
}
ul.list-features li {
    display: inline-block;
    width: 33%;
    padding-bottom: 13px;
    font-size: 20px;
/*    text-align: center;*/
    color:#191B1C 
}
ul.list-features.third li {width: 100%;}
ul.list-features.half li {width: 100%;}

ul.social  {
    font-size: 1.2em;
    list-style-type: none;
     margin: 0px 0 0;
}
ul.social  li {
    display: inline;
    margin-right: 8px;
}
.fa-facebook {
    color: #3b5998;
}
.fa-twitter {
    color: #55acee;
}
.fa-youtube {
    color: #e52d27;
}
ul.social  li a{padding: 3px 6px}
ul.social  li a:hover .fa{
    color: #fff
}
.fa em {
    text-indent: -9999px;
    display: none;
}
[type="text"], [type="password"], [type="date"], [type="datetime"], [type="datetime-local"], [type="month"], [type="week"], [type="email"], [type="number"], [type="search"], [type="tel"], [type="time"], [type="url"], [type="color"], textarea {border: 2px solid #906447;}
  [type="text"]:focus, [type="password"]:focus, [type="date"]:focus, [type="datetime"]:focus, [type="datetime-local"]:focus, [type="month"]:focus, [type="week"]:focus, [type="email"]:focus, [type="number"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="time"]:focus, [type="url"]:focus, [type="color"]:focus,
  textarea:focus {border: 2px solid  #191B1C}
.book-box { background-color: #fcfcfc; margin-bottom: 0.625em; padding: 1em; font-size: 0.875em}
.book-box  .find{font-family: 'Slabo 13px', serif; color: #282826; font-size: 1.5em; font-weight: 400; margin-bottom: 0.875em; display: block;}

.book-box  label, label{color: #282826; font-weight: 400; margin-bottom: 0.875em; position: relative; text-align: center; border-bottom: 1px solid #ccc;}
label {border-bottom: 1px solid #f3f3f3;}
.book-box   label span,label span {
position: absolute;
top: -10px;
background: #fcfcfc;
padding: 0 8px;
left: 0;
right: 0;
width: 50%;
margin: 0 auto;
}
label span {background: #fff;}

#upit input,#upit .button, textarea {margin: 1em 0; float: left; }

/*#menu {display:none;}
.js .slicknav_menu {display:block;}*/
.mobile-nav{position: absolute; right: 0}
@media screen and (min-width: 40em) {
    body {margin: 0 2rem;}
    .caption  {   padding: 5rem;}
    .caption  h2,.caption  p{  width: 30vw; margin: 0 auto;}
    .caption h2{font-size: 2.2rem;}
.caption p{font-size: 1.2rem;}
h1 {font-size: 36px;}
h2 {font-size: 30px;}
h3 {font-size: 24px;}
h4 {font-size: 21px;}
header {padding: 10px 0 0; background: #fff}
.header {}
 .logo {background:#fff url(logo.svg) no-repeat center center; position: relative;  min-height: 129px;
    margin: 0px auto;
    min-width: 140px;}

    ul.lang li{text-align: right; /*display: block;margin: 0px;*/}
ul.inline li .button {margin: 0 20px 10px;}
/*.button {padding: 9px 30px;font-size: 16px;display: inline-block; }*/
    ul.list-features.third li {width: 33%; padding-right: 2rem;}
ul.list-features.half li {width: 49%;}
ul.lang{position: absolute; z-index: 10}
    nav[role="navigation"] ul {
    justify-content: center;
    align-items: center;
    flex-flow:nowrap;
    padding-left: 0px;
}
    header a.eu  {
    opacity: 1;
    position: absolute;
    left: 0;
    height: auto;
    width: 122px;
    right: auto;
    margin: 0;
    z-index: 2;
    }

}

@media screen and (min-width: 64em) {
    #mobile-nav:after{display: none;}
      .slicknav_menu {display:none;}
     #menu {display:block;}
       .desni .intro {
    float: right;
} 
}

a.eu, p.eu {
    color: #c3c3c3;
    font-size: .75rem;
    text-align: center;
    display: block;
}
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?fwgfmy');
  src:  url('fonts/icomoon.eot?fwgfmy#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?fwgfmy') format('truetype'),
    url('fonts/icomoon.woff?fwgfmy') format('woff'),
    url('fonts/icomoon.svg?fwgfmy#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
    font-size: 1.5rem;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-location:before {
  content: "\e900";
}
.icon-map-marker:before {
  content: "\e900";
}
.icon-pin:before {
  content: "\e900";
}
.icon-video-camera:before {
  content: "\e901";
}
.icon-video:before {
  content: "\e901";
}
.icon-media:before {
  content: "\e901";
}
.icon-film:before {
  content: "\e901";
}
.icon-movie:before {
  content: "\e901";
}
.icon-play:before {
  content: "\e902";
}
.icon-video1:before {
  content: "\e902";
}
.icon-movie1:before {
  content: "\e902";
}
.icon-camera:before {
  content: "\e903";
}
.icon-photo:before {
  content: "\e903";
}
.icon-picture:before {
  content: "\e903";
}
.icon-image:before {
  content: "\e903";
}
.icon-images:before {
  content: "\e904";
}
.icon-pictures:before {
  content: "\e904";
}
.icon-photos:before {
  content: "\e904";
}
.icon-graphics:before {
  content: "\e904";
}
.icon-instagram:before {
  content: "\e905";
}
.icon-brand:before {
  content: "\e905";
}
.icon-social:before {
  content: "\e905";
}
.icon-facebook:before {
  content: "\e906";
}
.icon-brand1:before {
  content: "\e906";
}
.icon-social1:before {
  content: "\e906";
}
 .slick-slide, .slick-slide::before, .caption {
	 -webkit-backface-visibility: hidden;
	 backface-visibility: hidden;
}
 .slick-slide::before {
	 content: '';
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
}s  
 .main-slider {
	 position: relative;
	 width: 100%;
	/*  height: 38vw;
	 min-height: 8vw;
	 margin-bottom: 50px;*/
      max-height: 90vh; overflow: hidden; min-height: 60vh;
	 opacity: 0;
	 visibility: hidden;
	 transition: all 1.2s ease;
}
 .main-slider.slick-initialized {
	 opacity: 1;
	 visibility: visible;
}
 .slick-slide {
	 position: relative;
	 height: 38vw;
     height: 80vh;
        min-height: 25vh;
}
 .slick-slide::before {
	 background-color: #000;
	 opacity: 0.05;
	 z-index: 1;
}
 .slick-slide video {
	 display: block;
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 min-width: 100%;
	 min-height: 100%;
	 width: auto;
	 height: auto;
	 transform: translate(-50%, -50%);
}
 .slick-slide iframe {
	 position: relative;
	 pointer-events: none;
}
 .slick-slide figure {
	 position: relative;
	 height: 100%;
}
 .slick-slide .slide-image {
	 opacity: 0;
	 height: 100%;
	 background-size: cover;
	 background-position: center;
	 transition: all 0.8s ease;
}
 .slick-slide .slide-image.show {
	 opacity: 1;
}
 .slick-slide .image-entity {
	 width: 100%;
	 opacity: 0;
	 visibility: hidden;
}
 .slick-slide .loading {
	 position: absolute;
	 top: 44%;
	 left: 0;
	 width: 100%;
}
 .slick-slide .slide-media {
	 animation: slideOut 0.4s cubic-bezier(0.4, 0.29, 0.01, 1);
}
 .slick-slide.slick-active {
	 z-index: 1;
}
 .slick-slide.slick-active .slide-media {
	 animation: slideIn 2.4s cubic-bezier(0.4, 0.29, 0.01, 1);
}
 .slick-slide.slick-active .caption {
	 opacity: 1;
	 transform: translateY(0);
	 transition: all 0.7s cubic-bezier(0.32, 0.34, 0, 1.62) 0.6s;
}
 .caption {
	 position: absolute;
	 top: 44%;
	 left: 5%;
	 text-align: center;
	 padding: 20px;
	 border: 3px solid;
	 color: #fff;
	 margin: 0;
	 font-size: 40px;
	 font-weight: bold;
	 letter-spacing: 0.02em;
	 opacity: 0;
	 z-index: 1;
	 transition: all 0.3s ease;
	 transform: translateY(100px);
}
 .slick-dots {
	 text-align: center;
	 padding-top: 15px;
}
 .slick-dots li {
	 display: inline-block;
	 vertical-align: top;
	 margin: 0 8px;
}
 .slick-dots li button {
	 width: 16px;
	 height: 16px;
	 border: none;
	 cursor: pointer;
	 border-radius: 50%;
	 border: 2px solid #fff;
	 box-shadow: 0 0 0 0 transparent;
	 vertical-align: middle;
	 color: #fff;
	 background-color: #fff;
	 transition: all 0.3s ease;
	 opacity: 0.4;
}
 .slick-dots li button:focus {
	 outline: none;
}
 .slick-dots li button:hover {
	 opacity: 1;
}
 .slick-dots li.slick-active button {
	 border-color: #2d3042;
	 box-shadow: 0 0 0 2px #fff;
	 opacity: 1;
}
 .container {
	 background-color: #f2f2f2;
	 color: #444;
	 line-height: 1.6;
	 padding: 40px 0;
}
 .container .content {
	 width: 90%;
	 max-width: 980px;
	 margin: 0 auto;
}
 .container p {
	 margin-bottom: 40px;
}
 @keyframes slideIn {
	 from {
		 filter: blur(15px);
	}
	 to {
		 filter: blur(0);
	}
}
 @keyframes slideOut {
	 from {
		 filter: blur(0);
	}
	 to {
		 filter: blur(15px);
	}
}