@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: 'Roboto', sans-serif;color:#4D4D4F;font-weight:400;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: 700; }
.padR30{padding-right: 30px}
.pad200{padding:200px}
.pad200RL{padding:0 200px}
.pad200TB{padding:200px 0}
.pad150TB{padding:150px 0}
.pad100{padding:100px}
.pad100RL{padding:0 100px}
.pad75{padding:75px}
.pad50100{padding:50px 100px 100px}
.pad50{padding:50px}
.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: 700; 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:sans-serif;font-size:1.4em;font-weight:700;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 }

/*---------------------------------
	HEADINGS
-----------------------------------*/
h1, h2, h3, h4, h5, h6{font-family:'Oswald', sans-serif;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:25px;}
h4{font-size:22px;line-height:32px;padding-bottom:20px;}
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:3.6rem;line-height:46px;margin:0 0 15px;}
h2.title2{font-size:2.4rem;line-height:34px;margin:30px 0 20px;}

h3.hr1{padding:15px 0!important;}
h4.hr1{padding:10px 0!important;}
h3.hr1, h4.hr2{padding:20px 0 10px!important;}


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



/** 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,#enterlogo2{width:300px;display:block;margin:auto}

#logo-small{display:none;}
#logo-small2{float:left;display:block;width:100px; margin-left:10px;margin-top:35px}

.intro h1{text-transform:uppercase;color:#d7a449;font-size:60px;line-height:72px;font-weight:700;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(30,177,231,.3);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:700;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; }


/* = OVERBOX -------------------*/

.overbox{width:100%;height:100%;position:relative;padding:1.5rem;margin:1rem auto;}
.overbox:after{position:absolute;content:"";width: 90%;height: 85%;top: -5%;right: -10%;z-index:-1; background: #00578d;background:url(../images/more.jpg) no-repeat center center/cover;}

/* = 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;}
}

/* VERTICAL LINE ANIMATE - SCROLL */
.relative-wrapper{width: 100px; height:50px; position:absolute;bottom: 10px; left: calc(50% - 100px); -webkit-transform: translateX(-50%);transform: translateX(-50%);}
.section-divider{position:absolute;left:0;right:0;top:20px;margin:0 auto;width:1px;height:66px;overflow:hidden;}
.section-divider:after{content:"";display:block;background:#4d4d4f;width:100%;height:100%;top:0;left:0;position:absolute;transform:translateY(-100%);animation:line-scroll 4s forwards infinite}
@keyframes line-scroll {
0%{transform:translateY(-100%)}
60%{transform:translateY(0%)}
100%{transform:translateY(100%)}
}
.section-divider:hover{background:#C53F02!important;}
/*===============================
    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:#717C73;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:#B56039}
#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: 700; 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.3);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); }

#simile-para {background: #00578d;background:url(../images/more2.jpg) no-repeat center center/cover fixed;}
.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:#975030;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}
}
/* =  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:66%;display:block;margin:0 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:0 0 30px;}

.reserve{width: 200px; position:relative;z-index:2;display:block;padding:8px 15px;background:#fff;margin:0 auto -27px auto;color:#c0c0c0;text-align: center;}
.reserve a{color:#c0c0c0}
.reserve a:hover{color:#777}
.reserve i {margin-bottom: 8px;display: inline-block; font-size:14px; margin-right: 3px;}
.underlined{color:#1e1e1e;cursor:default;flex:1;text-decoration:none;background-image:linear-gradient(to right,yellow 0,yellow 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}


.highlight{color:#000;letter-spacing: 1px;display: block;}
.highlight a {color:#fff;font-size: 18px;font-weight: 700}
.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;}



.box-data{ background-color:#021017; color: #7c9098;line-height: 40px; padding-top:50px;font-size:14px}
.data:hover { color: #fff;}

.footer{position:relative;display:block;text-align:center;float:left;width:100%;font-size:12px; }
.footer a{display:inline-block;position:relative;color:#7c9098;text-decoration:none}
.footer a:after{content:'';display:block;margin:auto;height:1px;width:0;background:transparent;transition:width .5s ease,background-color .5s ease}
.footer a:hover:after{width:100%;background:#FF0000}
.footer a:hover{color:#FAB702}
.copy {background-color:#010405; padding-bottom: 30px;padding-top: 20px;margin-top:20px; border-top: solid 1px #041C29}


.linkline {
    display: inline-block;
    position: relative;
}
.linkline:after {
    content: '';
    display: block;
    margin: auto;
    height: 1px;
    width: 0;
    background: 0 0;
    transition: width .5s ease, background-color .5s ease;
}
.linkline:hover:after {
    width: 100%;
    background-color: red;
}
a.linkline:hover {
    color: #330000;
    text-decoration: none;
}






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



@media only screen and (max-width:1400px) {
.pad200{padding:150px}
.pad200RL{padding:0 150px}
.pad100{padding:90px}
.pad75{padding:65px}		
.intro{width:80%;}	
.box li{  height: 300px; }	
}
@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) {
	h3.title-3 {padding-top: 70px}
.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{display: none}
	
.intro{width:88%;top:100px;}		
#enterlogo,#enterlogo2{display:none;}	
#logo-small{width:200px; display: block;margin-right:auto;margin-left:auto;margin-top:13px}
#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) {
.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:22px;line-height:32px;padding-bottom:20px;}
h4{font-size:20px;line-height:30px;padding-bottom:18px;}
h5{font-size:18px;line-height:28px;padding-bottom:13px;}
h6{font-size:17px;line-height:27px;}
	
.intro h1{font-size:28px;}	
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}	
.box-data{ line-height: 28px}		
}

@media only screen and (max-width:480px) {
.pad200RL, .pad100RL{padding:0 10px}
.pad75{padding:30px}		
.intro{width:98%;top:70px;}	
.intro h1 span{font-size:19px;}
h1.secpage{font-size:30px;}	
.orna-l{width:24px;margin-right: 6px}
.orna-r{width:24px;margin-left: 6px}
#logo-small{width:120px; margin-top:18px}	
.submenu ul li{margin: 0 6px}
#frame1, #frame11{width:90%;max-width:460px;}
#frame2{width:100%;max-width:320px;}	
}