/* INTRO */

.pt-intro{padding-top: 9rem}
.full{width:100%;min-height: 100vh;position: relative}

/*---.full-intro{width:100%;min-height: 100vh; position: relative;
    background-image: url('../images/deinpogled-2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;}

 jednostavan box iznad intr0 page pozicioniran u jednoj četvrtini

.full-intro{width:100%;height:100vh;position:relative;background-image:url(../images/deinpogled-2b.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}

.bottom-right{position:relative;grid-column:2/1;grid-row:2/3;align-self:start;justify-self:center;width:90%;max-width:400px;padding:100px 20px;background-color:#fff;box-sizing:border-box;text-align:center;color:#000}
.bottom-right::after{content:"";position:absolute;top:-12px;left:-12px;right:-12px;bottom:-12px;border:1px solid #fff;box-sizing:border-box;pointer-events:none}
.bottom-right h1{font-size:1.8rem;line-height:72px;color:#000;font-weight:400}
.bottom-right p{font-size:1.1rem;margin:1.1em 0 1em;color:#000}
@media (max-width:768px){
.bottom-right{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:90%;max-width:100%;grid-column:auto;grid-row:auto;padding:30px 15px}
.bottom-right h1{font-size:1.6rem;line-height:60px}
.bottom-right p{font-size:1.1rem;margin:1.1em 0 1em}
}

---*/
h1.logotip{display: block !important; width:200px!important;position:absolute;top:30px;left:50px;z-index: 2}
h1.logotip2{display: block !important; width:160px!important;position:absolute;top:30px;left:50px;z-index: 2}

.full-intro{width:100%;height:100vh;position:relative;z-index: 1;background-image:url(../images/deinpogled-1.jpg);background-size:cover;background-position:left top;background-repeat:no-repeat;background-attachment:fixed;}

.cage_40{width:40%;margin:10px 0;float:left;display:block}
.cage_60{width:60%;margin:10px 0;float:left;display:block}

.intro div.headings{overflow:hidden;height:120px; width: 100%; max-width: 400px;margin-top:17%}
.intro h2{position:relative;padding:20px 40px;margin:0;text-align:right;font-size:2.7em;line-height:60px;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #fff}
.intro h2,.intro h2 .small{display:block;color:#fff}
.intro h2 .small{position:absolute;top:100%;right:20px;padding:0 20px;-webkit-transform:translate(0,-50%);transform:translate(0,-50%); font-size:24px}
.intro h2 .small:after,.intro h2 .small:before{content:'';position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:200%;height:1px;background-color:#fff}
.intro h2 .small:before{right:100%}
.intro h2 .small:after{left:100%}

.text-reveal{opacity:0;transition:opacity .2s ease-in-out}
.text-reveal-visible{opacity:1}
.text-reveal-scale{font-size:0;transition:font-size .2s ease-in-out}
.text-reveal-scale-visible{font-size:inherit}
#rjesenje{margin-top:100px;color:#fff;display: block}
#rjesenje-2{display: none}
.reveal-me, .reveal-me2, .reveal-me3 { margin: 8px 0;padding: 0;line-height: 0;font-size:1.3em;letter-spacing: 2px }


@media only screen and (max-width:1024px){
h1.logotip{width:160px!important;top:30px;left:40px}
h1.logotip2{width:150px!important;top:30px;left:40px}	
.intro h2{padding:20px 40px;margin:0;text-align:right;font-size:2.3em;}	
.full-intro{background-image:url(../images/deinpogled-1-1024.jpg);}
.cage_60{padding-top: 5em }	
	
.reveal-me, .reveal-me2, .reveal-me3 { margin: 5px 0;font-size:1.1em;letter-spacing: 1px }	
}

@media only screen and (max-width:780px){
#rjesenje{display: none;}	
#rjesenje-2{margin-top:0;color:#fff;display: block;font-size: 15px}	

h1.logotip{width:150px!important;left:30px}
h1.logotip2{width:140px!important;left:30px}		
.full-intro{background-image:url(../images/deinpogled-1-680.jpg);background-position:center top;}
	.cage_40{height: 60vh;}	
	.cage_60{background:#080807 }
	
.cage_40, .cage_60{width:100%;float:none;padding: 20px}	
	
	.intro	{max-width: 320px; margin:0 auto}
	
.intro div.headings{height:90px; width: 100%; max-width: 300px;margin:2% 0 0}
.intro h2{padding:25px 40px;margin:0;text-align:right;font-size:1.7em;line-height:30px;}
.intro h2 .small{font-size:21px}
.reveal-me, .reveal-me2, .reveal-me3 {margin: 5px 0; font-size:1.1em;letter-spacing: 1px }	
}

@media only screen and (max-width:600px){
h1.logotip{width:140px!important;left:20px}	
h1.logotip2{width:130px!important;left:20px}		
.cage_40, .cage_60{width:100%;float:none;padding: 10px}	
	
.intro	{max-width: 300px; margin:0 auto}	
.intro div.headings{height:80px; width: 100%; max-width: 300px;margin:2% 0 0}
.intro h2{padding:20px 40px;margin:0;text-align:right;font-size:1.5em;line-height:14px;}
.intro h2 .small{font-size:18px}	
.reveal-me, .reveal-me2, .reveal-me3 {margin: 1px 0; font-size:1em;letter-spacing: 0.5px }	
}



/*--- POSEBAN SA BG ISPOD ---*/
.full-hidden, .full-bezzbg{width:100%;min-height: 100vh;position: relative;overflow: hidden; background-color: #e5dcd3;
    background-image: url('../images/beige-ok-min.jpg');
    background-size: cover;
    background-position: left top;
    background-repeat: no-repeat;
    background-attachment: fixed; }

.container-z2{width:100%;max-width:1410px;margin:0 auto;padding:0 20px;position: relative;  z-index: 1;}

/*------------ end --------*/
.full-bezz{width:100%;min-height: 100vh; background-color: #E6E3DC;position: relative}
.full-white{width:100%;min-height: 100vh; background-color: #fff;position: relative}
.feel-box{width:100%;background-color: #F7F6F7;padding: 10rem 3rem; box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 3px;}

/*------------ crop image --------*/
.crop-top{width:100%;height:0;padding-top:56.25%;position:relative;overflow:hidden}
.crop-top a{position:absolute;top:0;left:0;width:100%;height:100%}
.crop-top img{position:absolute;top:-10%;left:0;width:100%;height:120%;object-fit:cover;transition:transform .3s ease}
.crop-top img:hover{transform:scale(1.15)}
@media (max-width:900px){
.crop-top{height:auto;padding-top:0}
.crop-top img{position:static;object-fit:contain;width:100%;height:auto;transform:none}
}


.crop-mid{width:100%;height:0;padding-top:56.25%;position:relative;overflow:hidden}
.crop-mid a{position:absolute;top:0;left:0;width:100%;height:100%}
.crop-mid img{position:absolute;top:50%;left:50%;width:100%;height:auto;transform:translate(-50%,-50%);object-fit:cover;transition:transform .3s ease}
.crop-mid img:hover{transform:translate(-50%,-50%) scale(1.15)}
@media (max-width:900px){
.crop-mid{height:auto;padding-top:0}
.crop-mid img{position:static;object-fit:contain;width:100%;height:auto;transform:none}
}


/*------------ hover zoom za crop image --------*/
.gpt-zoom{transition:transform .3s ease}
.gpt-zoom:hover{transform:scale(1.15)}

/*------------ title lines --------*/
.title-lin{font-weight:400;font-size:30px;line-height:33px}
.title--lines{text-transform:uppercase;align-items:center;display:flex;justify-content:center}
.title--lines:after,.title--lines:before{width:32px;height:1px;background-color:#000;content:'';display:inline-block;margin:0 15px}
.title--upper{text-transform:uppercase}

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

.footer1{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}
.dim120{width:100%;max-width: 120px!important;display: block;margin: 0 auto}
.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)}
.tiktok{background-image:url(../img/tiktok.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}

/*------------ DUGME SA STRELICOM - više boja bijelo i DUGME BEZ STRELICE --------*/

.btn,.button{background:#1d1d1d;border:none;font-size:14px;color:red;letter-spacing:1.5px;padding:10px 14px;border:1px solid #c0784a;transition:color .1s cubic-bezier(.16, .08, .355, 1),background .1s cubic-bezier(.16, .08, .355, 1);display:inline-block;cursor:pointer;width:100%;max-width:240px;outline:0;vertical-align:middle;text-align:center;position:relative;float:right}
.btn800{background:#196c6c;font-size:14px;color:beige;letter-spacing:1.5px;padding:11px 14px;transition:color .1s cubic-bezier(.16, .08, .355, 1),background .1s cubic-bezier(.16, .08, .355, 1);display:block;cursor:pointer;width:100%;max-width:800px;outline:0;vertical-align:middle;text-align:center;position:relative;float:none;margin:0 auto}
.btn800:hover{background:#00aaad;color:#eefcfc}
a.btn-dark-arrow{color:#1d1d1d}
.btn:hover,.button:hover{background:#c0784a;border-color:#c0784a;color:beige}
.btn-border{background-color:transparent;color:#1d1d1d}
.btn-arrow{display:flex;align-items:center;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:0 1rem}
.btn-arrow .arrow1{width:6px;height:6px;border-right:2px solid #777;border-bottom:2px solid #777;position:relative;top:0;transform:rotate(-45deg);margin:0 6px;transition:all .3s ease}
.btn-arrow:hover .arrow1{transform:rotate(-45deg) translate(4px,4px);border-color:beige}
.btn-arrow .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}
.btn-arrow:hover .arrow1::before{opacity:1;width:8px;background:beige}
.btn-wrapper{display:flex;justify-content:center}
.btn-light-arrow{color:#fff;border-color:#fff;display:inline-flex;align-items:center;text-align:center}
.btn-light-arrow .arrow1{border-right:2px solid #fff;border-bottom:2px solid #fff}
.btn-light-arrow:hover .arrow1{border-color:#fff}
.btn-light-arrow:hover .arrow1::before{background:#fff}
.btn-no-arrow{display:inline-block;position:relative;transition:background-color .3s ease-out;text-align:center;padding:10px 14px}
.btn-no-arrow span{display:inline-block;position:relative;transition:all .3s ease-out;will-change:transform;padding:0 1rem}
.btn-dark-no-arrow{color:#1d1d1d}
.btn-light-no-arrow{color:#fff;border-color:#fff}

/* = OVERBOX -------------------*/
.over-hidden{position:relative;overflow:hidden}
.box_first{width:100%;max-width: 400px; float:right;text-align: right;margin: 50px 30px 0 0;overflow:hidden}
.full-shadow {width:100%;max-width: 500px;float:left;display: block; position: relative; box-shadow: 30px -30px 0px 0px #C0784A;}

.mt-min5{margin-top:-5rem!important}

@media (max-width:900px){
.box_first{float:none;text-align:left;margin:0;max-width:100%}
.full-shadow{float:none;box-shadow:none;max-width:100%}
.over-hidden{overflow:visible}
.btn,.button{float: none; margin-bottom: 3em}	
}

.gray{background-color: #F4F9FF; position: relative}
.wsha {    
    background-color: #fff;    
    box-shadow: 0 0 13px 0 rgba(34, 62, 153, .1);
}
.padd3 {
    padding: 3rem;
}
.red {
    color: #E3010F;
}

.container-one{width:100%;background:url('../images/beige-ok-min.jpg') no-repeat center center/cover;display:flex;justify-content:center;align-items:center}
.bagie{max-width:1350px;background-color:#e7dabf;padding: 0 50px 0 0; margin:10% 0;position:relative;display:flex;justify-content:center;overflow:visible}
.image-text-container{display:flex;align-items:center;position:relative}
.floating-image{max-width:600px;width:100%;margin-top:-10%;margin-bottom:-10%;margin-right:20px;flex-shrink:0;z-index:0}
.text-box{position:relative;padding:30px 100px;margin-left:-60px; max-width:600px;border:1px solid #fff;text-align:left;color:#000;background-color:rgba(231,218,191,0);z-index:3}
.text-box p {font-size:19px;color:#000}
.text-box::after{content:"istraži ponudu";position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);background-color:#e7dabf;padding:5px 15px;font-size:18px;text-transform: uppercase; font-weight: 700; letter-spacing: 1px; color:#fff}
.text-box:hover::after{ color:#155858!important;}

@media (max-width:1280px){
.bagie{padding: 0; margin:0;background-color:transparent;}	
.image-text-container{position:relative}
.floating-image{margin-top:30px;margin-bottom:30px;margin-right:0;}		
.text-box{position:absolute;bottom:30px;left:0;width:100%;padding:15px;text-align:center;margin-left:auto;background-color:rgba(231,218,191,.85);}
.text-box p{font-size:16px;padding:10px 0 15px 0;margin: 0 0 20px 15px;}	
.text-box::after{bottom:10px;background-color:transparent;}	
}
@media (max-width:768px){		
.text-box::after{font-size:16px; }
}
@media (max-width:600px){
.text-box p{font-size:15px;line-height: 1.5}
.text-box::after{font-size:15px;letter-spacing: 0}
}

/*--------------------------------------------------------------
# Prvi opis
--------------------------------------------------------------*/
.container-two{width:100%;background:#196C6C;padding: 50px 0}
.container-two h2 {font-size:36px;line-height: 46px}
.container-two h3 {font-size:24px;line-height: 34px}
.box-ikona{color:#fff;padding:50px 30px;position:relative;overflow:hidden;background:#155858;box-shadow:0 0 29px 0 rgba(68,88,144,0.12);transition:all .3s ease-in-out;border-radius:4px;z-index:1}

.box-ikona2{padding:50px 30px;position:relative;overflow:hidden;background:#FFF4E0;box-shadow:0 0 29px 0 rgba(68,88,144,0.12);transition:all .3s ease-in-out;border-radius:4px;z-index:1}

.box-ikona::before{content:"";position:absolute;background:#cbe0fb;right:0;left:0;bottom:0;top:100%;transition:all .3s;z-index:-1}
.box-ikona:hover::before{background:#0C3434;top:0;border-radius:0}
.icon{margin-bottom:15px}
.icon i{font-size:64px;line-height:1;color:#fff;transition:all .3s ease-in-out}
.title{font-weight:700;margin-bottom:15px;font-size:18px}
.title a{color:#fff}
.phw{font-size:15px;line-height:28px;margin-bottom:0}
.box-ikona:hover .title a,.box-ikona:hover .phw{color:#fff}
.box-ikona:hover .icon i{color:#fff}
.icon-two{width:72px; margin: 5px auto}
.icon-logo{width:150px; margin: 5px auto}

@media (max-width:800px){
.container-two h2 {font-size:30px;line-height: 40px}
.container-two h3 {font-size:20px;line-height: 30px}
}
@media (max-width:600px){
.container-two h2 {font-size:24px;line-height: 34px}
.container-two h3 {font-size:19px;line-height: 29px}
}
/*-------------- newsletter--------------------*/

.container-three{width:100%;background:#21201F;padding: 5% 0}

.dark{background: #1A1A1A}

/*-------------- sekcija bež pozadina --------------------*/
.container-four{background: #F1E3C6;padding: 5% 20px}
.border-w{padding: 30px 20px; border: solid 1px #fff; margin: -40px 0 0 30px}
.circle-img{width:100%;max-width:300px;height:auto;aspect-ratio:1/1;border-radius:50%;object-fit:cover;display:block}
.stribor{width:100%;max-width:120px;height:auto;aspect-ratio:1/1;border-radius:50%;object-fit:cover;display:block;float: left; margin-right: 20px}
.star-5{width:120px; margin: 5px auto}
.border-w h2.long{font-size: 16px;font-weight: 400}	
.border-w h3.long{font-size: 15px;font-weight: 600}

@media (max-width:600px){
	.container-four{text-align: center;padding: 30px 20px}
.border-w{margin: 0;padding: 20px;}	
.stribor{max-width:160px;float: none; margin: 0 auto 20px}
}

/*-------------- tri razbacana boksa --------------------*/

.sec-gray{width:100%;background:#21201F;}
.sec-green{width:100%;background:#196c6c;}
.sec-visual{width:100%;background:#196c6c;padding:120px 0;position:relative;min-height:700px;overflow:visible}
.box-container{max-width:1200px;width:100%;position:relative;margin:0 auto;padding:0 20px;height:auto;min-height:400px}
.boxV{position:absolute;width:380px;padding:40px 30px;border:1px solid rgba(255,255,255,.9);text-align:center;background-color:rgba(25,108,108,.95);color:#fff;transition:all .3s ease}
.boxV h2{color:#fff}
.newsletter{left:12%;top:0;z-index:1;animation:fadeInLeft 1s ease forwards}
.shift{left:50%;transform:translateX(-50%);z-index:3;background-color:transparent;border:1px solid #fff;color:#fff;top:calc(60% + var(--text-overflow,0px));padding-top:80px}
.blog{right:12%;top:20px;z-index:1;animation:fadeInRight 1s ease forwards}
@media (max-width:1180px){
.sec-visual{padding:60px 0;height:auto}
.box-container{display:flex;flex-direction:column;align-items:center;gap:30px}
.boxV{position:relative;width:90%;max-width:500px;left:auto;right:auto;top:auto;transform:none;margin:0 auto}
.newsletter{order:1}
.shift{order:2;padding-top:40px;margin-top:-20px}
.blog{order:3}
}
@media (max-width:576px){
.sec-visual{padding:40px 0}
.boxV{width:100%;padding:30px 20px}
.shift{margin-top:-10px;padding-top:30px}
}

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