a{text-decoration:none}
body{font-family:'Montserrat';font-size:18px;font-weight:400;color:#333}
strong{font-weight:600}

/**** hero ****/
.hero{background:url(/images/hormonija-header.jpg) no-repeat;
background-position-x:50%;background-position-y:50%;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}
.hero .container-fluid{height:300px;}

/**** branding ****/
.logo-width{width:250px;}
.slogan{padding-left:25px}
.slogan p{font-size:32px;font-weight:700;color:#c73b6a;line-height:36px}
.slogan span{color:#e8899c} /*f3c4cd*/

/**** navbar ****/
nav{margin-top:75px}
.nav-link{color:#afafaf!important;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:1px}
.nav-link:hover{color:#e8899c!important}
.nav-link.active{color:#c73b6a!important}
.nav-item{margin-right:30px;}

/**** intro ****/
.intro{width:65%;margin-top:75px;}
.intro h1{font-size:24px;font-weight:700;color:#c73b6a;text-transform:uppercase;letter-spacing:2px;line-height:32px}
.intro h2{font-family:'Lora';font-style:italic;font-weight:400;font-size:30px;color:#e8899c;margin-bottom:25px;margin-top:25px;line-height:42px;}

/**** content ****/
.content{margin-top:100px}
.content h2{font-size:22px;font-weight:700;letter-spacing:1px;line-height:32px;color:#c73b6a;text-transform:uppercase;}
.content h3{font-family:'Lora';font-style:italic;font-weight:400;font-size:30px;color:#e8899c;margin-bottom:25px;margin-top:25px;line-height:42px;}
.content ul{list-style: none;}
.content ul li p{text-align:left}
.content ul li::before{content:"\2022";float:left;margin-top:0px;margin-left:-22px;color:#c73b6a}

.divider{margin:75px auto;height:50px;background:url(/images/divider.png) no-repeat;background-position:center center;}
.about{padding-bottom:100px}

/**** pink block ****/
.pink-block{padding-top:50px;padding-bottom:100px;background:url(/images/pink-block.jpg) no-repeat;
background-position-x:50%;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;
}
.pink-block h3{color:#000;margin-bottom:40px}
.pink-block p strong{color:#000;font-size:22px;font-weight:400;}
.pink-block ul{list-style:none;padding-left:15px}
.pink-block ul li{margin-top:25px;padding-left:50px;background: url('/images/joga-bullet.png') no-repeat;background-position-y:20%;}
.pink-block .content ul li::before{content:none;content:"";}

/**** fun facts ****/
.funfacts{padding-top:50px;padding-bottom:50px;margin-top:50px}
.funfacts h3{font-family:'Lora';font-style:italic;font-weight:400;font-size:40px;color:#fde1e7;margin-top:50px;margin-bottom:25px;letter-spacing:1px;line-height:55px}
.funfacts article{background:url(/images/divider.png) no-repeat;background-position:bottom right;}

/**** iskustva ****/
.iskustva{background:#f3c4cd;margin-top:100px;padding-top:75px;}
.iskustva .container{padding-bottom:100px;position:relative;}
.iskustva .hjtface::before{content:'';background: url('/images/babajoga.png') right top no-repeat;position:absolute;top:-250px;height:400px;width:100%;}
.iskustva h3{font-family:'Lora';font-style:italic;font-weight:400;font-size:40px;color:#fff;margin-top:50px;margin-bottom:75px;text-transform:lowercase;letter-spacing:1px}
.iskustva p{font-family:'Lora';font-style:italic;font-weight:400;font-size:20px;background:url(/images/quote100.png) no-repeat;background-position:top left;padding-top:60px;padding-left:20px}
.iskustva strong{display:block;margin-bottom:5px}
.iskustva p span{display:block;text-align:right}
.blockquote-footer{margin-top:20px;font-family:'Montserrat';font-size:16px;font-weight:600;color:#333;font-style:normal;}
.carousel-item p{display:block;width:50%;float:left;padding-right:50px}

/**** faq ****/
.faq{background:#f3c4cd;margin-top:100px;}
.faq .container{background:url(/images/joga-lopoc200.png) no-repeat;background-position:top right;padding-top:75px;padding-bottom:100px}
.faq article div{padding-left:25px;padding-right:25px;}
.faq h3{font-family:'Lora';font-style:italic;font-weight:400;font-size:40px;color:#fff;margin-top:50px;margin-bottom:75px;text-transform:lowercase;letter-spacing:1px}
.faq p{font-family:'Lora';font-style:italic;font-weight:400;font-size:20px;}
.faq strong{display:block;margin-top:40px;font-size:22px;}

/**** button ****/
.btn{-webkit-border-radius:28;-moz-border-radius:28;border-radius:28px;color:#fff!important;font-size:16px;font-weight:500;background:#c73b6a;padding:10px 25px 10px 25px;margin-top:25px;}
.btn:hover{background: #e8899c;}

.text-link{color:#f3c4cd;font-weight:500}
.text-link:hover{color:#e8899c}

/**** footer ****/
footer{background:#c73b6a;padding-top:100px;padding-bottom:75px}
footer p{color:#fff;font-size:14px}
footer .gterms{color:#f3c4cd;cursor:pointer}
footer .gterms:hover{color:#fff}
footer .social{width:75%;}
footer .social img{margin:10px;cursor:pointer;opacity:0.75}
footer .social img:hover{opacity:1}


/**** MEDIA QUERIES ****/

@media (max-width:1199px) {
.intro{width:100%;}
.pink-block{padding-top:0;background-position-y:100px;}
.nav-link{letter-spacing:0;font-size:13px}
.nav-item{margin-right:8px;}
}

@media (max-width:992px) {
.hero{background-position-x:35%;}
header .logo-width{width:190px;}
.content{margin-top:75px}
.content h2{margin-top:50px;}
.pink-block{background-position-y:100%;background-position-x:50%;}
.pink-block .content{margin-top:50px}
}

@media (max-width:767px) {
body{font-size:16px}
.hero{background-position-x:100%;}
.hero .container-fluid{height:400px;padding-left:55px;padding-right:50px}
header{position:relative;margin-top:75px}
.slogan{height:auto;padding-top:35px;width:100%;}
.slogan span{display:inline}
.logo-width{width:200px;}
.nav-link{color:#fff!important;text-align:center;font-size:18px}
.nav-link:hover{color:#f3c4cd!important}
.nav-item{margin-right:0;margin-bottom:25px}
nav{position:absolute!important;top:0;left:0;width:100%;margin-top:0;background:#e8899c;}
.navbar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0 0 0}
.navbar > .container-fluid{justify-content:flex-end;}
.navbar-collapse div:first-child{height:92vh;display:flex;align-items:center;justify-content:center;}
.intro{margin-top:100px}
.intro h1, .intro h2{letter-spacing:0;line-height:40px;font-size:28px}
.content h2{text-align:center;letter-spacing:0;line-height:32px}
.content h3{letter-spacing:0;line-height:40px;font-size:28px;text-align:center}
.content p{text-align:center}
.divider{margin:50px auto;background-size:250px;}
.pink-block p{text-align:left}
.funfacts{background-position-x:-160px}
.funfacts h3{font-size:30px;line-height:40px;}
.funfacts article{background-size:250px}
.iskustva article{background:none;padding-left:0;}
.iskustva .hjtface::before{background-size:200px;top:-250px;width:95%}
.carousel-item p{display:block;width:100%;float:none;padding-right:0;margin-bottom:50px}
.faq article{background:none;padding-left:0;}
.faq article div{padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);}
}

@media (max-width:576px) {
.pink-block p strong{font-size:20px}
.pink-block ul li{margin-top:20px;}
.funfacts h3{letter-spacing:0}
.funfacts h3 br{display:none}
.iskustva h3{text-align:center}
.faq h3{text-align:center}
}

@media (max-width:500px) {
.hero{background-position-x:10%;}
.hero .container-fluid{height:450px;}
.slogan span{display:block}
.slogan br{display:none}
.slogan p{line-height:40px}
.funfacts{background-position-x:-210px}
footer .social img{margin:7px;max-width:36px;}
}

@media (max-width:360px) {
.hero .container-fluid{padding-left:25px;padding-right:25px}
.iskustva h3{font-size:18px}
.carousel-item p{font-size:14px}
.faq h3{font-size:18px}
}