@charset "utf-8";
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}
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}
*{-webkit-transition:background-color 500ms linear;-moz-transition:background-color 500ms linear;-o-transition:background-color 500ms linear;-ms-transition:background-color 500ms linear;transition:background-color 500ms linear}
html{font-size:62.5%;min-width:300px}
body{min-width:100%;min-height:100%;margin:0;padding:0;font-size:1.6rem;font-family: 'Source Sans Pro', sans-serif;color:#4D4D4F;font-weight:400; font-style: italic; line-height:1.65;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transition:all .2s cubic-bezier(0,0,0.3,1);transition:all .2s cubic-bezier(0,0,0.3,1);background:#FFF;position:relative;overflow-x:hidden;}
a{color:#155FFF;text-decoration:none;outline:0;outline: none;}
:focus{outline:none}
a:visited{color:#22649C}
a:hover{color:#F72C00}
p{margin:10px 0}
strong {font-weight: 600; }
.size2{font-size:1.7rem;}
.plr-3 {padding: 0 30px}
.ptb-100{padding: 100px 0}

.padR30{padding-right: 30px}
.pad200{padding:200px}
.pad200RL{padding:0 200px}
.pad100RL{padding:0 100px}
.pad200TB{padding:200px 0}
.pad150TB{padding:150px 0}
.pad100{padding:100px}
.pad75{padding:75px}
.pad50100{padding:50px 100px 100px}
.pad50{padding:50px}
.pad40{padding:40px}
.padtop50{padding-top:50px}
.padtop100{padding-top:100px}
.padtop85{padding-top:85px}
.padbot50{padding-bottom:50px}
.padbot100{padding-bottom:100px}
.section100 {width:100%; height: 100vh}
.section {width:100%;}
.relative{position: relative}
.center {text-align: center}
.color1{color: #975030}
.title-usluge{font-weight: 500; font-size: 32px;letter-spacing: 1px; }

.bgcolorW{background-color: #fff}
.bgcolor1{background-color: #96BD42}
.feature1{color:#000;letter-spacing: 1px;}

.bgcolor2{background-color: #1b3253}
.bgcolor3{background-color: #c0c0c0}
.bgcolor4{background-color: #D5B9AC}
.bgcolor5{background-color: #F3EBE6}
.boxsha{-webkit-box-shadow: 0px 2px 5px 0px rgba(17,9,5,0.2);-moz-box-shadow: 0px 2px 5px 0px rgba(17,9,5,0.2);box-shadow: 0px 2px 5px 0px rgba(17,9,5,0.2);}
.color-1-bg34 {background-image: url(../img/color-1-bg34.svg); background-repeat: repeat-y;background-position: center top}


.flex-box { display: flex; align-items: center;flex-direction: row;}
.flex-box__item {position: relative;display: flex; align-content: center;justify-content: center;width: 100%}

.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}

@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%}
.flex-box { flex-direction: column;}
}

.middle { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%);  transform: translateY(-50%);}

.image1{clear:both;display:block;width:80%;max-width: 600px; height:auto;position:relative;margin: 10% 20% 10% 0}

.vrap1{width:1px;position:relative;  top: 50%;transform: translateY(-50%);left: 50%;text-align:center;}
.vertical{-moz-transform:rotate(-90deg) translateY(0.5em);-ms-transform:rotate(-90deg) translateY(0.5em);-webkit-transform:rotate(-90deg) translateY(0.5em);transform:rotate(-90deg) translateY(0.5em);display:inline-block;font-family: 'Oswald', sans-serif;font-size:1.4em;font-weight:500;line-height:0;margin:0 0 1em;text-transform:uppercase;white-space:nowrap}
.vertical:after{content:'';display:block;padding-top:100%}

ul.lista li{margin-bottom:15px;padding:4px 0 0 25px;background:transparent url(../img/aro.png) no-repeat scroll left 12px }

/*---------------------------------
	masonry-gallery
-----------------------------------*/

.masonry-gallery{column-count:3;column-gap:1em}
.masonry-gallery .image-container{display:flex;justify-content:center;align-items:center;margin-bottom:1em;break-inside:avoid}
.masonry-gallery figure{overflow:hidden;}
.masonry-gallery img{max-width:600px;min-width:100%;min-height:100%;object-fit:cover}
@media (max-width:900px){
.masonry-gallery{column-count:2}
}
@media (max-width:480px){
.masonry-gallery{column-count:1}
}

/*---------------------------------
	HEADINGS
-----------------------------------*/
h1, h2, h3, h4, h5, h6{font-family: 'Oswald', sans-serif;font-style: normal; letter-spacing:0.02em;color:#000;font-weight:400;}

h2{font-size:32px;line-height:44px;margin:0 0 50px;display:block;}
h2 span{font-size:0.6em;color:#000;width:66%;max-width:600px;line-height:1px;}
h3{font-size:24px;line-height:36px;padding-bottom:15px;}
h4{font-size:22px;line-height:32px;padding-bottom:15px;}
h5{font-size:20px;line-height:30px;padding-bottom:15px;}
h6{font-size:18px;line-height:28px;padding-bottom:10px;font-weight:bold;}

h2.title1{font-size:2.4rem;line-height:46px;margin:0 0 15px;}
h2.title2{font-size:2.1rem;line-height:34px;margin:30px 0 20px;}
h2.title3{font-size:2.4rem;line-height:46px;margin:0 0 15px;padding-top: 5rem}

h3.hr1{padding:15px 0!important;}
h4.hr1{padding:10px 0!important;}
h3.hr1, h4.hr2{padding:20px 0 10px!important;}
h4.sans{font-size:1.7rem;font-family: 'Source Sans Pro', sans-serif;color:#4D4D4F;font-weight: 600;padding-bottom: 5px}
h4.app{font-size:21px;line-height:31px;padding:10px 0 5px;}

#home {position: relative; height: 100vh}

/** ANIMACIJA NASLOVA */
#head{min-height:400px;padding:60px 30px 0;}
#head h1,#head h2{text-align:center;color:#fff;padding:0;position:relative;z-index:3;text-shadow:1px 1px 0 rgba(0,0,0,0.5)}
#head h1{font-weight:500;margin:100px 15px 10px;letter-spacing:2px;font-size:20px; text-transform: uppercase;}
#head h2{font-weight:500;margin:10px 0 30px 0;letter-spacing:1px;font-size:48px}

.has-animation{position:relative}
.has-animation{opacity:0}
.has-animation.animate-in{animation:textHidden .1s 1.1s forwards}
.has-animation.animate-in:before,.has-animation.animate-in:after{content:'';position:absolute;top:0;right:0;height:100%;z-index:10}
.has-animation.animate-in:before{background-color:#1e90ff}
.has-animation.animate-in:after{background-color:#003e82;animation-delay:.5s}
.has-animation.animation-ltr.animate-in:before{animation:revealLTR 2s ease}
.has-animation.animation-ltr.animate-in:after{animation:revealLTR 1s .6s ease}
.has-animation.animation-rtl.animate-in:before{animation:revealRTL 2s 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}
}
/** INTRO **/

.intro{width:90%;max-width: 1024px; height:300px;position:relative;z-index:1;top:150px;padding-top:50px;padding-bottom:50px;margin:auto;text-align:center}
#logo{padding:15px 20px;text-align:center;display:block;margin-top:50px;opacity:0}
#enterlogo{width:360px;display:block;margin:auto}

#logo-small{width:150px; position:absolute; left:30px; top:10px;}

.intro h1{text-transform:uppercase;color:#F8D424;font-size:60px;line-height:72px;font-weight:500;letter-spacing:2px;margin:0;margin-top: 100px; opacity:0}
.intro h1 span{font-size:32px;}
.orna-l{width:53px;margin-right: 15px}
.orna-r{width:53px;margin-left: 15px}
.intro h2{color:#fff;margin:15px 0 25px;font-weight:400;font-size:24px;letter-spacing:1px;opacity:0}
.intro h2{position:relative;z-index:2;padding:.5em 1em}
@-webkit-keyframes hide {
from{width:100%}
to{width:0}
}
@keyframes hide {
from{width:100%}
to{width:0}
}
@-webkit-keyframes show {
from{width:0}
to{width:100%}
}
@keyframes show {
from{width:0}
to{width:100%}
}
.intro h2::before,.intro h2::after{position:absolute;top:0;right:0;height:100%;content:''}
.intro h2::before{background:rgba(1,151,246,.2);z-index:-1;width:0}
.intro h2::after{background:#c53f02;width:100%}
.intro h2.show::before{-webkit-animation:show 3s 2.6s forwards cubic-bezier(0.23,1,0.32,1);animation:show 3s 2.6s forwards cubic-bezier(0.23,1,0.32,1)}
.intro h2.show::after{-webkit-animation:hide 1.7s forwards cubic-bezier(0.23,1,0.32,1);animation:hide 1.7s forwards cubic-bezier(0.23,1,0.32,1)}

.intro a{text-decoration:none;color:#fff;text-transform:uppercase;font-weight:500;font-size:14px}

.eu-ulog {display: block;width: 100%; max-width: 1024px; margin: 10% auto 0; padding: 10px 15px 1px; text-align: center;font-size: 11px; color: #1eb1e7; background: rgba(97,200,238,.1);opacity:0 }
.eu-ulog  img {max-width: 100px; margin: 0 auto}
.eu-ulog2 {font-size: 14px; }

/* = STRELICE -------------------*/
.smoothscroll{position:absolute;z-index:1; bottom: 30px; left: calc(50% + 35px); -webkit-transform: translateX(-50%);transform: translateX(-50%); width:100px;height:50px;margin-right:auto;margin-left:auto;}

.chevron, .chevron-hex{position:absolute;z-index: 1; 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:#d7a449;}
.chevron-hex:before, .chevron-hex:after{content:' ';position:absolute;top:0;height:100%;width:51%;background:#fff;}
.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;}
}

/* = OVERBOX -------------------*/
.mt-min5 { margin-top: -5rem!important;}

.overbox{width:100%;height:100%;position:relative;padding:1.5rem;margin:0 auto;}
.overbox:after{position:absolute;content:"";width: 86%;height: 86%;top: -3%;right: -3%;z-index:-1; background: #F5D878;}

.overbox-left{width:100%;height:100%;position:relative;padding:1.5rem;margin:0 auto;}
.overbox-left:after{position:absolute;content:"";width: 86%;height: 86%;top: -3%;left: -3%;z-index:-1; background: #66BCF2;}

.mtmin80{margin-top: -80px}

.flex-box { display: flex; align-items: center;flex-direction: row;}
.flex-box__item {position: relative;display: flex; align-content: center;justify-content: center;width: 100%}
.col-50{width:50%}
.col-40{width:40%}
.col-25{width:25%}
.col-60{width:60%}
[class*="col-"]{float:left;display:block}
@media all and (max-width: 1024px) {
.col-50, .col-40, .col-25, .col-60{float:none;clear:both;display:block;width:100%}
.flex-box { flex-direction: column;}
}
/* IMAGE EFFECT */
.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:#E9EFFF;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:#E9EFFF;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;text-align: center; color:#fff; font-style: normal; font-weight: 600; margin: 0;padding: 0}
.item-cont a .item-content .text-cont em.big{font-size: 36px;}
.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(36,43,69,0.9);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:#E9EFFF;}
.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;}
/* =  ukras naslovu - kose ///// linije
----------------------------------------------------------------------------------------------------------------------*/
hr.goldhr{border:0;height:8px;background-image:linear-gradient(115deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 39%,#c0c0c0 35%,#c0c0c0 50%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%);background-size:5px 8px;width:80%;display:block;margin:4px auto 50px;}

hr.goldhr2{border:0;height:7px;background-image:linear-gradient(115deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 39%,#c0c0c0 35%,#c0c0c0 50%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%);background-size:5px 8px;width:50%;display:block;margin:0 0 30px;}

hr.goldhr100{border:0;height:7px;background-image:linear-gradient(115deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 39%,#c0c0c0 35%,#c0c0c0 50%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%);background-size:5px 8px;width:100%;display:block;margin:4px 0 30px;}

.reserve{width: 189px; position:relative;z-index:2;display:block;padding:8px 0;background:#fff;margin:0 auto -27px auto;color:#c0c0c0;text-align: center;}

.reserve a{color:#c0c0c0; padding: 0;}
.reserve a:hover{color:#000}
.reserve i {margin-bottom: 8px;display: inline-block; font-size:14px; margin-right: 3px;}

/* LINK sa animiranom DEBELOM crtom */
.underlined{color:#1e1e1e;cursor:default;flex:1;text-decoration:none;background-image:linear-gradient(to right,#FFFF00 0,#FFFF00 100%);background-position:0 1.2em;background-size:0 100%;background-repeat:no-repeat;transition:background 500ms}
.underlined:hover{background-size:100% 100%}
.underlined--thick{background-position:0 -.1em}


/*===============================
    home slogan
===============================*/
.para-font{font-size:60px;color:#fff;text-shadow: 0 0 1px #000}
#simile-para {display: block; width: 100%;overflow: hidden; background: #00578d;background:url(../images/umag-sunset2.jpg) no-repeat center center/cover fixed;padding: 250px 0;position:relative;z-index: 2;text-align: center}
#simile-para2 {display: block; width: 100%;overflow: hidden; background: #00578d;background:url(../images/umag-night.jpg) no-repeat center center/cover fixed;padding: 250px 0;position:relative;z-index: 2;text-align: center}

.big-font {font-size: 60px;line-height: 72px;text-align: center;}
.big-font2 {color: #fff;font-size: 36px;line-height: 72px;text-align: center;}

/** JEZICI **/
.jezici{height:30px;position:relative;display:flex;justify-content:center;padding: 5rem 0}
.bars{width:20px;height:20px;float:left;display:inline;position:relative;margin-top:19px}
.bar{background:#c0c0c0;bottom:20px;height:3px;position:absolute;width:3px;animation:sound 0ms -800ms linear infinite alternate}
@keyframes sound{0%{opacity:.35;height:3px}
100%{opacity:1;height:18px}
}.bar:nth-child(1){left:1px;animation-duration:474ms}
.bar:nth-child(2){left:5px;animation-duration:433ms}
.bar:nth-child(3){left:9px;animation-duration:407ms}
.bar:nth-child(4){left:13px;animation-duration:458ms}
.bar:nth-child(5){left:17px;animation-duration:400ms}
.bar:nth-child(6){left:21px;animation-duration:427ms}
#lang-fix{margin:0 10px 0;float:left;display:inline}
ul.engita{list-style-type:none}
ul.engita li{float:left;margin-right:5px}
ul.engita li a{font-size:0.938em;display:inline-block;color:#666;text-align:center;text-decoration:none;padding-top:8px;padding-right:4px;padding-left:4px;margin-top:-6px}
ul.engita li a:hover{color:#F00}
.btn{position:relative;display:inline-block;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;overflow-x:hidden;-webkit-transition:color .5s ease;transition:color .5s ease}
.btn:after{content:'';position:absolute;top:50%;left:0;height:1px;width:0;background:#03C;-webkit-transition:width .4s ease;transition:width .4s ease}
.btn:hover{cursor:pointer;color:rgba(17,17,17,0.75);-webkit-transition:color .5s ease;transition:color .5s ease}
.btn:hover:after{width:100%;-webkit-transition:width .4s ease;transition:width .4s ease}
.btn:focus{outline:0}
/*===============================
    arrow up - scroll-Top
===============================*/
.arrow{margin-top: 25px; display:inline-block;height:12px;position:relative;width:12px;}
.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;}
.arrow.is-top{-moz-transform:rotate(225deg);-ms-transform:rotate(225deg);-webkit-transform:rotate(225deg);transform:rotate(225deg);}
.arrow::after,.arrow .arrow::after{border-color:#fff;}
#scroll-Top .return-to-top{position:fixed;right:10px;bottom:10px;display:none;width:48px;line-height:48px;height:48px;text-align:center;cursor:pointer;background:#0197F6;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:#F7941D}
#scroll-Top .return-to-top span{position:relative;bottom:0;position:relative;animation-name:example;animation-direction:alternate;animation-iteration-count:infinite;animation-duration:1s}
@keyframes example {
0%{bottom:0}
100%{bottom:7px}
}
/*===============================
  SECOND PAGE - PARALLAX HEADER
===============================*/
h1.secpage{color:#FFF;text-align:center;padding:0px;margin-top:20px;font-size:36px;font-weight: 500; letter-spacing:2px;line-height:1.5;text-transform: uppercase}
h1.secpage span{margin-top:8px;margin-bottom:20px;font-size:18px;font-weight: 400;letter-spacing:1px;display:block}

.gap150{display:block;height:150px;width:100%;}
.gap160{display:block;height:160px;width:100%;}
#frame1{width:66%;max-width:760px;margin-right:auto;margin-left:auto;margin-top:33px;padding:6px;border:1px solid rgba(244,244,244, 0.5);height:auto;position:relative;z-index:2;}
#frame11{width:66%;max-width:760px;margin-right:auto;margin-left:auto;margin-top:0px;padding:6px;border:1px solid rgba(244,244,244, 0.5);height:auto;position:relative;z-index:2;}
#frame2{width:66%;max-width:400px;padding:6px;border:1px solid rgba(244,244,244, 0.5);height:auto;position:relative;z-index:9;}
.overlay1{background:rgba(8,52,76, 0.15);padding:10px 20px 20px;display:block;}
.overlay2{background:rgba(197,197,197, .3);padding:10px 50px 20px;display:block;}
#logotip{display:block;margin:0% auto 5px;width:150px;position:relative;z-index:9;opacity: 0.9; filter: alpha(opacity=90); }


.kontakt{background:#fff;padding:3em;display:block;box-shadow:inset 0 0 0 0px #fff,inset 0 0 0 1px #c0c0c0,inset 0 0 0 2px #fff,inset 0 0 0 3px #c0c0c0,inset 0 0 0 4px #fff,inset 0 0 0 5px #c0c0c0;color:black;}

/* DUGME sa animiranom crtom */
.boxrela{position:relative;width:300px;display:block;margin-bottom:20px;height:40px;float:right;margin-right:40px;margin-top:10px}
.bouton{position:absolute;top:0;margin-left:-200px;right:0}
.bouton:hover{cursor:pointer}
.line2{position:relative;float:left;padding:20px 80px;background-color:#1D80F7;transform:scale(0.5,0.05);animation-name:line-out;animation-duration:.3s}
.text{font-weight:400;float:left;position:relative;line-height:40px;color:#000;font-style: italic; letter-spacing:1px;animation-name:text-out;animation-duration:.3s}
.text span{font-size:16px;line-height:0}
.bouton:hover .line2{animation-name:line-in;animation-duration:.3s;animation-fill-mode:forwards}
@keyframes line-in {
0%{left:0;transform:scale(0.5,0.05)}
50%{left:50%;transform:scale(1,0.05)}
75%{left:50%;transform:scale(1,0.05)}
100%{left:50%;transform:scale(1,1)}
}
@keyframes line-out {
0%{left:50%;transform:scale(1,1)}
50%{left:50%;transform:scale(1,0.05)}
75%{left:50%;transform:scale(1,0.05)}
100%{left:0;transform:scale(0.5,0.05)}
}
.bouton:hover .text{animation:text-in .3s ease-out forwards}
@keyframes text-in {
50%{color:#000}
100%{color:#fff}
}
@keyframes text-out {
50%{color:#000}
}

.highlight{color:#000;letter-spacing: 1px;display: block;}
.highlight a {color:#fff;font-size: 18px;font-weight: 500}
.highlight a:hover {color:#1b3253}
.highlight i {font-size: 24px; color: #fff;margin-right: 12px;line-height: 30px;}

.highlight2{color:#000;letter-spacing: 1px;display: block;}
.highlight2 a {color:#254202;font-size: 18px;font-weight: 400}
.highlight2 a:hover {color:#F72C00}
.highlight2 i {font-size: 20px; color: #254202;margin-right: 12px;line-height: 30px;}

.highlight3{color:#000;letter-spacing: 1px;display: block; padding: 20px 0}
.highlight3 a {color:#000;font-size: 16px;font-weight: 400}
.highlight3 a:hover {color:#F72C00}
.highlight3 i {font-size: 19px; color: #000;margin-right: 12px;line-height: 30px;}

/* =  animirani link - donja crta  ------------------------------------------------------------*/
.linkline{display:inline-block;position:relative}
.linkline:after{content:'';display:block;margin:auto;height:1px;width:0;background:0;transition:width .5s ease,background-color .5s ease}
.linkline:hover:after{width:100%;background-color:blue}
a.linkline:hover{color:#F00;text-decoration:none}

/* obicna hover animacija na fotki*/
.gallery {overflow: hidden;}
.gallery-image {display: block;	width: 100%;height: 100%;object-fit: cover;transition: transform 400ms ease-out;}
.gallery-image:hover {transform: scale(1.15);}

/* TABELA */

.box_6 {width:48%;float:left;display:block;margin:10px 1%}

.app1{width:98%; background-color: #FFF5FF;padding: 7px 20px; margin: 0 0 5px 0}
.app2{background-color: #FFFEE4;padding: 7px 20px; margin: 0 0 5px 0}
.app3{background-color: #ECFAFF;padding: 7px 20px; margin: 0 0 5px 0}
.app4{background-color: #F4F4FF;padding: 7px 20px; margin: 0 0 5px 0}

ul.price {font-style: normal;}

ul.price li.one span:first-child {display: inline-block; width:73%;background: #FCFCFC; padding: 4px 10px; margin: .5% 0}
ul.price li.one span:last-child {display: inline-block; width:24%;background:#FEFDF2;padding: 4px 10px;margin: 2px 0 2px .5%;text-align: center; }

ul.price li.two span:first-child {display: inline-block; width:73%;background:#EFF8FE; padding: 4px 10px; margin: .5% 0}
ul.price li.two span:last-child {display: inline-block; width:24%;background: #F0FDF2; padding: 4px 10px;margin: 2px 0 2px .5%;text-align: center; }

@media only screen and (max-width:767px) {
.box_6 {width:100%;float:none;display:block;margin:10px 0}	
}

.shadow{box-shadow: 0px 0px 40px rgb(0 0 0 / 20%);}

/* =  FOOTER ------------------------------------------------------------*/
.footer-top {display: block; background: #fff; width:100%;padding: 50px 25px; text-align: center; font-size: 1.6rem; font-style: normal;color: #000;border-bottom: solid 8px #f1f1f1}
.inner {width:100%; max-width: 900px;margin:0 auto;}

.footer {position: relative;padding:0;background: #08223D;letter-spacing: 1px;width: 100%;text-align: center;color: #BFCFFF;font-size: 14px;font-style: normal}
.footer a {color: #BFCFFF}
.footer a:hover {color: #fff}
.footer h5 {font-size: 14px;padding: 35px 14px 5px;letter-spacing: 2px;margin: 0;color: #BFCFFF}
.footer ul {display: block;padding: 10px 15px 10px}
.footer ul li {display: block;padding: 5px}
.footer ul span {display: inline-block;font-size: 13px;padding-top: 3px;margin-right: 5px}

#copyright {display: block;width: 100%;background: #061A32;color: #9AABD6;text-align: center;margin:15px 0 0;padding: 25px}
#copyright, #copyright a {color: #9AABD6;font-size: 13px;display: inline-block;position: relative;text-decoration: none}
#copyright a:hover {color: #F75C1E}
#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: #F8D424}



/*===============================
    RESPONSIVE
===============================*/


@media only screen and (max-width:1400px) {
.pad200{padding:150px}
.pad200RL{padding:0 150px}
.pad100RL{padding:0 75px}	
.pad100{padding:90px}
.pad75{padding:65px}		
.intro{width:80%;}	
.box li{  height: 300px; }	
h2.title3{padding-top: 1rem}	
}
@media only screen and (max-width:1280px) {
.pad200{padding:100px}
.pad200RL{padding:0 100px}
.pad100RL{padding:0 60px}		
.pad100{padding:80px}
.pad75{padding:60px}
.gap150{display:block;height:120px;}	
}

@media only screen and (max-width:1024px) {
#head h1{font-size:19px}
#head h2{font-size:40px}	
h2.title1{font-size:2.1rem;line-height: 36px}
h2.title2{font-size:2rem;}
h2.title3{padding-top: 0}	
h3.title-3 {padding-top: 70px}
.big-font {font-size: 48px;line-height: 60px}
.big-font {font-size: 32px;line-height: 44px}
.shadow{box-shadow: 0px 0px 40px rgb(0 0 0 / 0%);}	
.pad40{padding:0}	
.pad200{padding:80px}
.pad200RL{padding:0 60px}	
.pad100RL{padding:0 50px}	
.pad100{padding:50px 10px}
.pad75{padding:55px}
.pad150TB{padding:100px 0}
.padR30{padding-right: 0}	
.gap150{height:100px;}		
.image1{margin:0 auto}
.color-1-bg34 {background-image:none}	
	
	.overbox:after, .overbox-left:after{display: none}
	.overbox-left{margin: 0 auto}
	.mtmin80{margin-top: 0}
	
.intro{width:88%;top:100px;}		
#enterlogo{width:180px;margin-bottom: 30px}	
#logo-small{width:150px;position:relative;left:0; display: block;margin-right:auto;margin-left:auto;}
#logo-small2{float:none;margin-right:auto;margin-left:auto;}	
.intro h1{font-size:32px;line-height:44px;margin-top: -20px!important;}	
.intro h1 span{font-size:24px;line-height:32px!important;}	
.intro h2{font-size:20px;line-height:32px;}	
.submenu {margin-right: 10px;margin-top: -28px;}	
.box li{  height: auto; }
	
#logotip{display: none}
 #frame1, #frame11{width:60%;max-width:760px;}
 .overlay1{padding:40px 20px 0px;}	
}

@media only screen and (max-width:767px) {
#head{min-height:300px;padding:60px 30px 0;}
#head h1{margin:80px 15px 10px;font-size:18px}
#head h2{font-size:36px}
#lang-fix{margin:0 5px 0;}
ul.engita li{margin-right:2px}
ul.engita li a{padding-right:2px;padding-left:2px;}	
.pad200RL, .pad100RL{padding:0 30px}	
.pad150TB{padding:80px 0}	
.gap150{height:80px;}		
.intro{width:94%;top:90px;}	
.intro h1 span{font-size:20px;}	
.orna-l{width:30px;margin-right: 10px}
.orna-r{width:30px;margin-left: 10px}	
h2{font-size:26px;line-height:36px;margin:0 0 40px;}
h2 span{font-size:0.6em;color:#000;width:66%;max-width:600px;line-height:1px;}
h3{font-size:20px;line-height:30px;}
h4{font-size:19px;line-height:29px;}
h5{font-size:18px;line-height:28px;}
h6{font-size:17px;line-height:27px;}	
.big-font {font-size: 32px;line-height: 44px}	
.big-font2 {font-size: 28px;line-height: 40px}	
.intro h1{font-size:28px;}	
.para-font{font-size:48px;}	
h1.secpage{margin-top:20px;font-size:40px;letter-spacing:1px;}	
#frame1, #frame11{width:90%;max-width:500px;margin-top:50px;}
#frame2{width:96%;max-width:480px;margin-top:10%;}
.overlay1{padding:40px 15px 20px;}
.overlay2{padding:0px 10px 10px;}	
	
.padtop50{padding-top:30px}
.padtop100{padding-top:60px}
.pad75{padding:50px}		
.padbot50{padding-bottom:30px}
.padbot100{padding-bottom:60px}	
.intro{width:98%;top:250px;}	
#simile-para {padding: 100px 0;}	
.copy { padding-bottom: 15px;padding-top: 10px;margin-top:10px; }	
.box-data{line-height: 20px;padding-top:20px;font-size:13px}	
}

@media only screen and (max-width:480px) {
.pad200RL, .pad100RL{padding:0 10px}
.pad75{padding:30px}		
.intro{width:98%;top:200px;}	
.intro h1 span{font-size:19px;}
h1.secpage{font-size:30px;}	
.para-font{font-size:36px;}		
.orna-l{width:24px;margin-right: 6px}
.orna-r{width:24px;margin-left: 6px}	
.submenu ul li{margin: 0 6px}
#frame1, #frame11{width:90%;max-width:460px;}
#frame2{width:100%;max-width:320px;}
.big-font {font-size: 24px;line-height: 36px}
.big-font2 {font-size: 20px;line-height: 32px}	
}