@charset "UTF-8";
* {transition: background-color 500ms linear, color 500ms linear;}
main, .relative{position:relative}

/*--- MENU IZBORNIK ---*/
.header1 li,ul{margin:0;padding:0;list-style:none}
.header1 button{background:0 0;border:none;appearance:none;outline:0;padding:0;cursor:pointer}
.header1{display:flex;align-items:center;height:80px;padding:10px 20px;color:#000;position:fixed;top:0;right:0;z-index:10}
.nav{background:#E8C99B;position:fixed;top:0;right:0;width:300px;height:100vh;transition:transform .7s,opacity 1s;transform:translateX(100%);opacity:0;color:#fff}
.nav.show{transform:translateX(0);opacity:1}
.list{display:flex;flex-direction:column;justify-content:center;align-items:center;height:inherit}
.list li{display: block}
.hamburger{position:relative; margin-left:auto;z-index:100; background-color:rgba(255, 255, 255, .5)!important;padding:10px!important; border-radius:3px;cursor:pointer}
.hamburger-inner{position:relative;width:45px;height:25px;cursor:pointer}
.hamburger span{position:absolute;left:0;background:#000;width:100%;height:3px;transition:transform .5s,opacity .5s}
.top-line{top:0}
.center-line{top:11px}
.bottom-line{bottom:0}
.top-line.active{transform:translateY(11px) rotate(45deg)}
.center-line.active{opacity:0}
.bottom-line.active{transform:translateY(-11px) rotate(-45deg)}

.nav a {display:inline-block;margin:0.6rem auto;font-size:1.1rem;letter-spacing: 1px; color: #000; padding:6px 50px 6px}
.nav a:hover {background-color:rgba(255, 255, 255, .4)!important; color: #196C6C}

	a.here{display:inline-block;text-decoration: underline;text-decoration-thickness: 1px;text-underline-offset: 6px;background-color: transparent!important;}
	a.here:hover{color:#000!important;}

/* .head */
#head{}

/* ANIMIRANE LINIJE */
.line-mid{display:inline-block;position:relative;margin-bottom:0;}
.line-mid:after{content:'';display:block;margin:5px auto 0;height:2px;width:0;background:0 0;transition:width 1s ease,background-color 1s ease}
.line-mid:hover:after{width:100%;background:#C0784A}

@media only screen and (max-width:1079px){	
.line-mid:after{margin:2px auto 0;max-width:200px}	
}

/*--- STILOVI ---*/
p.likeh2 {
    font-size: 28px;
    line-height: 40px;
    margin: 0 0 30px;
    display: block;
}

h1, h2, h3, h4, h5, h6{ letter-spacing:0.02em;color:#333360;font-weight:600;}

h2{font-size:28px;line-height:40px;margin:0 0 30px;display:block}
h2.big{font-size:48px;line-height:60px;}
h3{font-size:28px;line-height:38px}
h4{font-size:24px;line-height:28px}
h5{font-size:20px;line-height:27px}
h6{font-size:16px;line-height:27px;}
p{font-size:1em;margin:1em 0}

p.minip{margin:1em 0}
h2.long{font-size: 18px;line-height: 30px;padding-bottom:15px;margin-bottom:0}
h2.long20{font-size: 20px;line-height: 30px;padding-bottom:20px;margin-bottom:0}
h2.long24{font-size: 24px;line-height: 34px;padding-bottom:20px;margin-bottom:0}	
h3.long-first{font-size: 19px;line-height: 31px;font-weight: 500; margin-bottom:0}
h3.title-blog{font-size: 22px;line-height: 32px;font-weight: 700; margin-bottom:0}
h3.title-blog span{font-size: 21px;font-weight: 500; padding-top:20px;display: block}
h3.long{font-size: 15px;line-height: 28px;font-weight: 500; padding-bottom:10px;margin-bottom:0}
h3.ita{font-size: 32px;line-height: 39px;font-weight: 400; font-style: italic; padding-bottom:25px;margin-bottom:0}

h3.info-first{font-size: 26px;line-height: 40px; margin-bottom:0}
h3.info{font-size: 22px;line-height: 35px; margin-bottom:0}
h4.info{font-size: 21px;line-height: 33px; margin-bottom:0}

h3.title-1,h3.title-11, h4.title-1,h3.title-22, h4.title-22, h3.title-1 a, h4.title-1 a{margin-bottom:0;}
h3.title-1 a:hover, h4.title-1 a:hover{color: #ED117D}
h3.title-11{font-size: 24px;line-height: 36px;font-weight: 600; padding:25px 0 20px;}
h3.title{font-size: 28px;line-height: 38px;font-weight: 600; padding:25px 0 35px;}
h3.title-1{font-size: 21px;line-height: 34px;font-weight: 600; padding-bottom:10px;padding-bottom: 20px}
h3.tera{color:#D17954;font-size:32px;line-height:43px;font-weight: 700;}
h4.title-1{font-size: 20px;line-height: 31px;font-weight: 600; padding-top: 15px; padding-bottom:10px;}

h3.title-22{font-size: 23px;line-height: 34px;font-weight: 600; padding-bottom: 25px}
h4.title-22{font-size: 19px;line-height: 30px;font-weight: 600; padding-top: 30px;}

h4.title-in{font-size: 21px;line-height: 32px;font-weight: 600; margin: 32px 0 16px;}


.white-bg{background: #fff;color: #000}
.paddbox{padding:40px 30px 30px}
.bg-white{background-color:#fff}
.bg-green{background-color:#86ba28}
.bg-gold{background-color:gold;color:#000}
.bg-blue{background-color:#00aeef}
.bg-terakota{background-color:#e04838}
.bg-pink{background-color:#ed117d}
.tera{color:#D17954}

.bg-tera{padding-top:1em; width:100%;min-height: 100vh;position: relative;overflow: hidden; background-color: #924d34;
    background-image: url('../images/bg-terakota.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; }
.sjena-prozori{width:100%;min-height: 100vh;position: absolute;z-index: 2; top:0;
    background-image: url('../images/sjena-prozori-20.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; }

.biljka{position:absolute;top:0;let:0;width:100%;}


.paper{background-color:#fff;background-image: url('../img/paper-2.jpg');
background-repeat: repeat;
background-position: center;
background-size: auto;}

.paper1{background-color:#fff;background-image: url('../img/paper1.png');
background-repeat: repeat;
background-position: center;
background-size: auto;}

.zid-cvijece{padding-top:1em; width:100%;min-height: 100vh;position: relative;overflow: hidden; background-color: #ddd;
    background-image: url('../images/zid-cvijece.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; }
.tera-3{width:100%;position: relative;overflow: hidden; background-color: #924d34;
    background-image: url('../images/tera-3.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; }

.visit-card{width:90%;max-width: 600px;margin: 10% auto;padding: 7% 30px 6%;box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 3px;}

.visit-card1,.visit-card2{background-color: #fff; display: block; width:100%;max-width: 600px;padding: 40px 30px 35px;box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 3px;border-radius: 6px}

.visit-card1{float:right;margin: 50px 20px 10px;}
.visit-card2{float:left;margin: 10px 20px 50px;}

.card-v{background-color: #fff;width:90%;max-width: 800px;margin: 0 auto;padding: 40px 30px 35px;box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 3px;border-radius: 6px;float:right}

.card{background-color: #fff;width:100%;margin: 0 auto;padding: 60px 0 55px;box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 3px;border-radius: 4px;}

@media (max-width:900px){
   .bg-tera{background-image: url('../images/bg-terakota1080.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;}
	
.bg-tera{padding-top:5em; }	
.visit-card1,.visit-card2{display: block; width:90%;max-width: 600px;float:none;margin: 15px auto}
.card-v{float:none;}
	.card{padding: 40px 30px 30px;}
}

ul.lista{font-size:16px}
ul.lista li{margin:5px 0;padding:0 0 0 25px;background:transparent url(../img/aro.png) no-repeat scroll left 7px}

ul.finger li{margin:5px 0;padding:0 0 0 25px;background:transparent url(../icon/finger.svg) no-repeat scroll left 7px;background-size: 16px auto;}
ul.arrow-right li{margin:5px 0;padding:0 0 0 25px;background:transparent url(../icon/arrow-right.svg) no-repeat scroll left 7px;background-size: 16px auto;}

ul.disc{list-style-type:disc;padding-left:1.5em;margin:1em 0}
ul.disc li{margin-bottom:.5em}
ol.numbered{list-style-type:decimal;padding-left:1.5em;margin:1em 0}
ol.numbered li{margin-bottom:.5em}

.text-alignR{text-align: right}
.text-alignL{text-align: left}

@media only screen and (max-width:1023px){
.text-alignR{text-align: left}
}



.okvir{width:100%;margin:0 auto;padding: 0}
.kutija{display:block;overflow:hidden;clear:both}
.okvir img{max-width:100%;height:auto;vertical-align:middle}

.vaza_6{width:50%;float:left;display:block;margin:0;padding: 70px 0 50px 50px}
.vaza_650{width:50%;float:left;display:block;margin:0;padding: 0 0 50px 50px}
.vaza_6zero{width:50%;float:left;display:block;margin:0;padding: 100px 0 0 50px}
.vaza_6pad{width:50%;float:left;display:block;margin:0;padding: 100px 100px 0 100px}
.vaza_60{width:60%;float:left;display:block;margin:0;padding: 70px 0 50px 50px}
.vaza_40{width:40%;float:left;display:block;margin:0;padding: 70px 0 50px 50px}

.izzy{background-color: #f3ece6;padding-top:5rem!important;padding-bottom:7rem!important}
.skin{background-color:#f3ece6;color:#000}
.skin h3.long-first{color:#000}

.over-1{width:100%; padding:30px 50px; margin:0 0 0 -150px;background: #fff;position: relative;z-index: 5;box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 3px;}
.over-1 h3.long-first{color:#000;font-size:16px}

.dea-bg{display: block; width:100%; min-height: 100vh; background-image: url('../images/o-meni-1.jpg');
  background-size: cover;
    background-position: left top;
    background-repeat: no-repeat;
    background-attachment: fixed; }

.brooklyn{display: block; width:100%; min-height: 100vh; background-image: url('../images/brooklyn.jpg');
  background-size: cover;
    background-position: center top;
    background-repeat: no-repeat; }

.omeni3{color:#fff; text-align:center; font-size:21px; font-weight: 600;padding: 5em 15px 12em; display: block; width:100%; background-image: url('../images/omeni3.jpg');
  background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat; }

.parallax{position:relative;width:100%;height:400px;background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;display:flex;justify-content:center;align-items:center}

.parallax.dea-savjetuje{background-image:url('../images/dea-savjetuje.jpg')}

@media only screen and (max-width:1023px){
.parallax.dea-savjetuje{background-image:url('../images/dea-savjetuje-900.jpg')}
}
@media only screen and (max-width:600px){
.parallax.dea-savjetuje{background-image:url('../images/dea-savjetuje-600.jpg')}
}

.parallax.psihodeukacija{background-image:url('../images/bg-psihodeukacija.jpg')}

.parallax.mreze{background-image:url('../images/mreze.jpg')}

.parallax.organizacija{background-image:url('../images/organizacija.jpg')}

.parallax h2{color:#fff;font-size:60px;font-weight:900;letter-spacing: 2px; text-shadow:2px 2px 10px rgba(0,0,0,.6)}
@media only screen and (max-width:1023px){
.parallax h2{font-size:48px;letter-spacing: 1px;}
}
@media only screen and (max-width:480px){
.parallax h2{font-size:40px;}
}

.green-dark{color:#155858;padding: 50px 30px;font-size:18px}
.green-dark-txt{color:#155858;}
.green-dark-border{border: solid 2px #155858;}
.solid-green-dark{background: #155858; color:#fff; padding: 50px 30px;font-size:18px}

.border-simple{padding: 40px 30px; border: solid 1px #fff;position: relative;}
.slika-gore{position:relative;top:-15%;left:0;max-width:100%}
.slika-dolje{position:relative;bottom:-15%;right:0;max-width:100%}

.c-box{width:100%;padding:20px;position:relative;margin-bottom:3em;display:flex;align-items:flex-start}
.floating-box{width:66%;background-color:#fff;color:#000;padding:15px;position:relative;flex-shrink:0}
.floating-box-50{width:34%;position:relative;margin-left:auto;margin-right:-50px;flex-shrink:0}
@media only screen and (max-width:900px){
.c-box{flex-direction:column}
.floating-box,.floating-box-50{width:100%;margin-right:0;margin-top:10px}
}

.gold-border{border: solid 2px #CBB48F;}




.c-box-0{width:100%;position:relative;margin-bottom:3em;display:flex;align-items:flex-start}
.floating-box-left{width:28%;max-width: 400px; position:relative;margin-top:-80px;flex-shrink:0}
.floating-box-right{width:72%;background-color:#fff;color:#000;padding:15px;position:relative;flex-shrink:0}
@media only screen and (max-width:900px){
.c-box-0{flex-direction:column}	
.floating-box-left,.floating-box-right{width:100%;margin-top:10px}
}

.arian h2{padding: 2em 0;margin:0; color:#fff;font-size:60px;font-weight:900;letter-spacing: 2px; text-shadow:2px 2px 10px rgba(0,0,0,.6)}
@media only screen and (max-width:1023px){
.arian h2{font-size:48px;letter-spacing: 1px;}
}
@media only screen and (max-width:480px){
.arian h2{font-size:40px;}
}


.ac-pane{margin-bottom:15px;background:#fff;margin-bottom:6px;box-shadow:0 1px 2px rgba(0,0,0,.08);-webkit-transition:box-shadow .2s;-moz-transition:box-shadow .2s;transition:box-shadow .2s;padding:15px}
.ac-pane:last-child{margin-bottom:0}
.ac-content{display:none}
.ac-title{color:#155858;text-decoration:none;padding:15px;display:block;position:relative}
.ac-title::after{content:"";position:absolute;right:15px;top:50%;transform:translateY(-50%) rotate(135deg);width:8px;height:8px;border-left:2px solid #155858;border-bottom:2px solid #155858;transition:transform .3s ease}
.ac-pane.active .ac-title::after,.ac-title:hover::after{transform:translateY(-50%) rotate(-45deg)}
.ac-content{border:1px solid #fff;margin-top:-1px;padding:15px}


.border-box{width:100%;max-width:800px;margin:0 auto 50px;}
.quote-box{border:2px solid #000;padding:50px 20px 20px;text-align:center;position:relative}
.quote{font-family:Raleway,sans-serif;font-size:20px;line-height:1.6;color:#000}
.signature{background-color:#fff;padding:0 15px;position:absolute;bottom:-12px;left:75%;transform:translateX(-50%);white-space:nowrap}
.signature img{height:20px;display:block}

.newyork{display: block; width:100%; min-height: 100vh; background-image: url('../images/newyork2.jpg');
  background-size: cover;
    background-position: center top;
    background-repeat: no-repeat; }


.kontakt{display: block; width:100%; min-height: 100vh;background: #cbb58f; background-image: url('../images/kontakt-1.jpg');
  background-size: cover;
    background-position: center top;
    background-repeat: no-repeat; }

.bezz{display: block; width:100%; background: #cbb58f;padding: 3em 0}
.bezz-light{display: block; width:100%; background: #F3E3C9;padding: 0}
.border-000{border: solid 2px #000;padding: 20px 5em 20px 20px;margin-right: -7em}
.fix{width:100%;height:60px;display:flex;justify-content:center;align-items:center;gap:20px}
.icon-spotify,.icon-youtube{display:block;width:160px;height:60px;float:none;margin:0}
.border-000 h2{color:#fff; font-size: 30px}
.border-000 h3{color:#000; font-size: 19px}
.mobitel{width:100%;max-width:400px!important;margin: 0 auto}

.krema-sarena{display: block; width:100%; background-image: url('../images/sarena-krema.jpg');
  background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;}
.krema-sarena{color:#fff!important;font-size:18px; padding: 50px 30px}

@media all and (max-width:1023px){
.border-000{padding: 30px 20px;margin:70px 20px 20px!important;}
.border-000 h2{font-size: 24px}
.border-000 h3{font-size: 17px}	
.icon-spotify,.icon-youtube{width:150px}
.mobitel{width:100%;max-width:360px!important;}	
}
@media all and (max-width:600px){
.mobitel{width:100%;max-width:300px!important;}	
.icon-spotify,.icon-youtube{width:140px}	
}
@media all and (max-width:380px){
.mobitel{width:100%;max-width:200px!important;}
.icon-spotify,.icon-youtube{width:128px}	
}

h2.title-over1{font-size: 60px;line-height: 76px;text-transform: uppercase; color:#fff; text-align: center;padding-top:75px; margin-bottom: -35px;position: relative;z-index: 9;font-weight: 900;letter-spacing: 2px;text-shadow: 0 1px 1px #888}

h2.title-over1 span{font-size: 72px;line-height: 48px;font-weight: 900;letter-spacing: 2px}

h2.title-over2{font-size: 72px;line-height: 80px;text-transform: uppercase; color:#fff; text-align: center;padding-top:75px; margin-bottom: -35px;position: relative;z-index: 9;font-weight: 900;letter-spacing: 2px;text-shadow: 0 1px 1px #888}

h2.title-over300{font-size: 60px;line-height: 76px;text-transform: uppercase; color:#fff; text-align: center;padding-top:300px; margin-bottom: -35px;position: relative;z-index: 9;font-weight: 900;letter-spacing: 2px;text-shadow: 0 1px 1px #888}

@media all and (max-width:768px){
h2.title-over300{padding-top:200px;}	
}

@media all and (max-width:600px){
h2.title-over300{padding-top:200px;font-size: 48px;line-height: 60px;}	
}

.skew-image {
  position: relative;
  width: 100%; 
  overflow: hidden;
}

.skew-image img {
  width: 100%;
  height: auto;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 33% 100%);	
}

.arch-image {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: inline-block;
  border-top-left-radius: 50% 33%; /* Za polukružni vrh */
  border-top-right-radius: 50% 33%; /* Za polukružni vrh */
}

.arch-image img {
  width: 100%;
  height: auto;
  display: block;
}

@media all and (max-width:1023px){
.izzy{padding-top:2rem!important;padding-bottom:7rem!important}	
.okvir{margin:0 15px}
.vaza_6,.vaza_6zero,.vaza_6pad{width:100%; max-width: 800px;margin:0 auto; float:none;padding: 0 30px 0 30px}
	
.skew-image img {
  width: 100%;
  height: auto;
  clip-path: none;	
}	
}
/*-------------- jednosavna lista - bullet --------------------*/
.indented-list{list-style-type:disc;padding-left:30px}
.indented-list li{margin:10px 20px 10px 10px}


/*-------------- uokvireni naslov --------------------*/
.naslov{width:50%;position: relative;border:solid 1px #EAD09D;display: block;}
.naslov-title{color:#000;font-size: 54px;font-weight: 700;letter-spacing: 2px; background: #f3ece6;padding: 20px 10px;margin: 220px -30% 40px 20%}
@media all and (max-width: 1280px) {
	.naslov{width:100%;border:none;margin-top:2rem}
	.naslov-title{padding: 0;margin: 6rem 0 1rem; font-size: 40px;letter-spacing: 1px}	
}
/*---- ANIMIRANI LINK SA CRTOM - Ctamno zelena boja ---*/
.anilinkgreen{display:inline-block;color:#155858;text-decoration:none;position:relative}
.anilinkgreen:hover{color:#000}
.anilinkgreen::after{content:'';display:block;margin:auto;height:1px;width:0;background:0 0;transition:width .5s ease,background-color .5s ease;position:absolute;left:0;right:0;bottom:-1px}
.anilinkgreen:hover::after{width:100%;background:#000}



/*---- ANIMIRANI LINK SA CRTOM - CRNA PODLOGA---*/
.anilink000{display:inline-block;color:#CDA85C;text-decoration:none;position:relative}
.anilink000:hover{color:#EADAB9}
.anilink000::after{content:'';display:block;margin:auto;height:1px;width:0;background:0 0;transition:width .5s ease,background-color .5s ease;position:absolute;left:0;right:0;bottom:-13px}
.anilink000:hover::after{width:100%;background:#EADAB9}

/*---- ANIMIRANI LINK SA CRTOM - bijeli ---*/
.anilinkFFF{display:inline-block;color:#fff;text-decoration:none;position:relative}
.anilinkFFF:hover{color:#155858!important;}
.anilinkFFF::after{content:'';display:block;margin:auto;height:1px;width:0;background:0 0;transition:width .5s ease,background-color .5s ease;position:absolute;left:0;right:0;bottom:-3px}
.anilinkFFF:hover::after{width:100%;background:#155858!important;}

/*---- ANIMIRANI LINK SA CRTOM ---*/
.anilink{display:inline-block;color:#8A3224;text-decoration:none;position:relative}
.anilink:hover{color:#CC5600}
.anilink::after{content:'';display:block;margin:auto;height:1px;width:0;background:0 0;transition:width .5s ease,background-color .5s ease;position:absolute;left:0;right:0;bottom:0}
.anilink:hover::after{width:100%;background:#CC5600}
/*---- ARA BG i IMAGE ---*/

.clouds {width:100%; display: flex;padding: 0; background:url(../images/clouds.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#f1f1f1}
.ara-white {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 30px 50px 40px;
    background: rgba(255, 255, 255, .5);
    border-radius: 5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
}
.img-sha{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);}

.tag {width:100%; min-height: 100vh; padding: 0; background:url(../images/moja-ponuda.webp) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}
/*------------ title lines SUB --------*/
.title-sub{font-weight:700;font-size:32px;line-height:33px; padding: 100px 15px 15px;margin: 0 auto}
.title--Lsub{text-transform:uppercase;align-items:center;display:flex;justify-content:center}
.title--Lsub:after,.title--Lsub:before{width:32px;height:1px;background-color:#000;content:'';display:inline-block;margin:0 15px}
.title--upper{text-transform:uppercase}

img.box-icon{display:block;width:35%;margin:-.7rem auto 5px;}

/*-------------- animacija na naslovnici Expect More. Pay Less! --------------------*/
.payless {position: absolute;z-index: 2;bottom: 20px;right: 30px;margin-right: 50px;}
.title-home h3{color:#162133;font-size:24px;font-weight: 700;letter-spacing:1px; -webkit-animation:mainFadeIn 2s forwards;-o-animation:mainFadeIn 2s forwards;animation:mainFadeIn 2s forwards;-webkit-animation-delay: .5s; animation-delay: .5s;opacity:0;display:flex;align-items:baseline;position:relative;text-transform: uppercase;}
.role{width:100%;position:relative;display:flex;align-items:center;height:30px;margin-top:-10px}

.role .block-home{width:0;height:inherit;background: #F24194;position:absolute;animation:secBlock 2s cubic-bezier(0.74,0.06,0.4,0.92) forwards;-webkit-animation-delay: .9s; animation-delay: .9s;display:flex}

#section-1 .role p{animation:secFadeIn 2s forwards;-webkit-animation-delay: 1.5s; animation-delay: 1.5s;opacity:0;font-weight:700;color:#F24194;font-size:13px;text-transform:uppercase;letter-spacing:0.256em; }

@keyframes secBlock{0%{width:0;left:0}
50%{width:100%;left:0}
100%{width:0;left:100%}
}@keyframes mainFadeIn{0%{opacity:0}
100%{opacity:1}
}
@keyframes secFadeIn{0%{opacity:0}
100%{opacity:1}
}
@media all and (max-width:1023px){
.payless {width:90%;position: absolute;right: auto;left:50%;transform:translateX(-50%);margin-right: 0;}
.title-home h3{justify-content: center}
.role{justify-content: center}	
}

.buje{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:100vh;background-image:url('../images/buje-1.jpg');background-size:cover;background-position:center top;background-repeat:no-repeat;position:relative}
.central-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:50%;position:relative;margin-top:40vh}
.central-image{width:100%;height:auto;border-radius:10px;box-shadow:3px 3px 15px rgba(0,0,0,.2);margin-bottom:10vh}
h2.title-over3{font-size:72px;line-height:80px;text-transform:uppercase;color:#fff;text-align:center;font-weight:900;letter-spacing:2px;text-shadow:0 1px 1px #888;position:absolute;top:-6%;left:50%;transform:translateX(-50%);z-index:10;white-space:nowrap;max-width:90%;overflow:hidden}

@media (max-width:1200px){
.central-wrapper{max-width:70%}
h2.title-over3{font-size:65px;line-height:56px;top:-5%;max-width:95%}
}

@media (max-width:900px){
.central-wrapper{max-width:75%}
h2.title-over3{font-size:60px;}
}
@media (max-width:768px){
.buje{min-height:auto;}	
.central-wrapper{max-width:80%;margin-top:20vh}
.central-image{margin-bottom:3vh}	
h2.title-over3{font-size:48px;top:-9%;}
}
@media (max-width:480px){
.central-wrapper{max-width:84%}
h2.title-over3{font-size:36px;}
}
@media (max-width:380px){
.central-wrapper{max-width:90%}
h2.title-over3{font-size:32px;}
}


/*-------- ANIMCIJA ZA SVE LINKOVE UNUTAR TEKSTA-----------*/
.line{padding: 0 5px; color:#1a73e8;flex:1;text-decoration:none;background-image:linear-gradient(to right,#ff0 0,#ff0 100%);background-position:0 1.2em;background-size:0 100%;background-repeat:no-repeat;transition:background .5s}
.line:hover{color:#D92227; background-size:100% 100%}
.line--y{background-position:0 -.1em}

.accent-1 {color: #C0784A;}
.accent-2 {color: #FF6700;}
.accent-3 {color: #E8C99B;}
.black {color:#000}
.tomato{color:#FE4A49}
.white, .white h2,.white h3,.white h4, .white a{color:#fff}
.white a:hover{color:#00FFFF}
a.whitebox{color: #fff}
a.whitebox:hover{color: #E8C99B}
.bg-green{background-color:#86BA28}
.bg-gold{background-color:#FFD700;color:#000}
.bg-blue{background-color:#00AEEF}
.bg-terakota{background-color:#E04838}
.bg-pink{background-color:#ED117D}

/*---- animacija fotki ---*/
.zoom{overflow:hidden}
.zoom-image{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease-out}
.zoom-image:hover{transform:scale(1.15)}

/*---- ZA POD STRANICE ---*/
.nav-box{background: #FAFAF8;padding:30px 15px}
h2.info{text-align: center;font-size: 24px; line-height:32px;margin:15px 0; font-weight: 700;letter-spacing: 1px}
ul.sec-nav{text-align: center;}

/*-------------- animirane strelice DOWN --------------------*/
.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;}
}

/*-------------- 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;right:10px;bottom:10px;display:none;width:48px;line-height:48px;height:48px;text-align:center;cursor:pointer;background:#D17954;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:#e04838}
#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}
}

/*-------------- RESPONSIVE --------------------*/
@media all and (max-width:991px){
    h2.section, h2.page-content {font-size: 1.3rem;padding: 0.4rem 1rem;line-height: 26px;font-weight: 600;letter-spacing: 0;}    
    }

@media all and (max-width:767px){
    h2.section, h2.page-content {font-size: 1.2rem;line-height: 28px;}    
    }
@media all and (max-width:500px){	
    .none500{display:none}
    }
@media all and (max-width:480px){    
.none480{display:none}
h2.section, h2.page-content {font-size: 1.1rem;line-height: 22px;}    
}