*{
    transition: all .3s;
}
body{
    position: relative;
    overflow-x: hidden;
    transition: all .3s;
}
ul{
    list-style: none;
}
.preloader {
    transition: all .3s;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    background: url("../images/preloader.gif") center no-repeat #fbfbfb;
}
/* Fonts */
@font-face{
    font-family: "Cormorant";
    src: url(CormorantGaramond-Regular.ttf) format("truetype");
}
@font-face{
    font-family: "Cormorant Bold";
    src: url(CormorantGaramond-Bold.ttf) format("truetype");
}
@font-face{
    font-family: "Cormorant Italic";
    src: url(CormorantGaramond-Italic.ttf) format("truetype");
}
@font-face{
    font-family: "Lato";
    src: url(Lato-Regular.ttf) format("truetype");
}
@font-face{
    font-family: "Lato Bold";
    src: url(Lato-Bold.ttf) format("truetype");
}
@font-face{
    font-family: "PlayfairDisplay Regular";
    src: url(PlayfairDisplay-Regular.ttf) format("truetype");
}
@font-face{
    font-family: "PlayfairDisplay Italic";
    src: url(PlayfairDisplay-Italic.ttf) format("truetype");
}
@font-face{
    font-family: "Gotham";
    src: url(GothamBook.ttf) format("truetype");
}
.font-cormorant{
    font-family: "Cormorant";
}
.font-cormorant-bold{
    font-family: "Cormorant Bold";
}
.font-cormorant-italic{
    font-family: "Cormorant Italic";
}
.font-lato{
    font-family: "Lato";
}
.font-lato-bold{
    font-family: "Lato Bold";
}
.font-lato-italic{
    font-family: "Lato Italic";
}
.font-playfair{
    font-family: "PlayfairDisplay Regular";
}
.font-playfair-italic{
    font-family: "PlayfairDisplay Italic";
}
.font-gotham{
    font-family: "Gotham";
}
/* Background */
.bg-grey{
    background-color: #FFFDFA;
}
.bg-cream{
    background-color: #FCF2E6;
}
.bg-gold{
    background-color: #BFAB79;
}
.bg-purple{
    background-color: #939DC6;
}
.bg-dark{
    background-color: #707070;
}
.bg-cream-gradient{
    background: linear-gradient(180deg, #FFF2E2 0%, rgba(252, 242, 230, 0) 100%);
}
.bg-purple-gradient{
    background: linear-gradient(180deg, #DAE0F2 0%, rgba(250, 248, 245, 0) 100%);
}
.bg-faq-gradient{
    background: linear-gradient(180deg, #FCF5EB -1.95%, rgba(252, 245, 235, 0.7) 53.61%, rgba(225, 231, 247, 0.65) 100%);
}
.bg-light-purple{
    background-color: #DAE0F2;
}
.bg-beige{
    background-color: #FCF5EB;
}
.bg-regular-purple{
    background-color: #939DC6;
}
.bg-none{
    background: none;
}
/* Button  */
.button-grey{
    background-color: #FFFDFA;
}
.button-cream{
    background-color: #FCF2E6;
}
.button-gold{
    background-color: #BFAB79;
}
.button-purple{
    background-color: #939DC6;
}
.button-dark{
    background-color: #707070;
}
.button-border-dark-1{
    border: 1.5px solid #707070;
    border-radius: 30px;
    padding: 10px 15px;
}
.button-cream-bareskin{
    border-radius: 30px;
    padding: 10px 15px;
    background-color: #FAF8F5;
}
.button-border-white{
    border: 1.5px solid #fff;
    border-radius: 30px;
    padding: 10px 15px;
}
/* Colors */
.text-grey{
    color: #FFFDFA;
}
.text-cream{
    color: #FCF2E6;
}
.text-gold{
    color: #AD864D;
}
.text-purple{
    color: #939DC6;
}
.text-dark-1{
    color: #707070;
}
/* Images Setup */
.img-viewport{
    height: 100vh;
    width: 100%;
    object-fit: cover;
}
.height-100vh{
    height: 100vh;
}
/* Font Size */
.font-25{
    font-size: 25px;
}
.font-60{
    font-size: 60px;
}
.font-09{
    font-size: 0.9rem;
}
.font-08{
    font-size: 0.8rem;
}
/* z-index */
.z-index-1{
    z-index: 1;
}
.z-index-2{
    z-index: 2;
}
.z-index-3{
    z-index: 3;
}
/* Borders */

/* Fonts Setup Global */
a{
    text-decoration: none;
}
h1, h2, h3, h4, h5, h6{font-family: "Gotham"; color: #09192f;}
p, li, input, button, span, label, textarea, a{
    font-family: "Gotham";
    color: #09192f;
    letter-spacing: .3px;
}
a:hover{
    text-decoration: none;
}
/* LAYOUTS */
.px-bare{
    padding-left: 7%;
    padding-right: 7%;
}
.pl-bare{
    padding-left: 7%;
}
.pr-bare{
    padding-right: 7%;
}
.border-bare{
    border-radius: 5px;
}
.rounded-15{
    border-radius: 15px;
}
.rounded-10{
    border-radius: 10px;
}
.w-80{
    width: 80%;
}
.w-85{
    width: 85%;
}
.w-60{
    width: 60%;
}
.w-40{
    width: 40%;
}
.w-28{
    width: 28%;
}
.w-30{
    width: 30%;
}
.w-88{
    width: 88%;
}
.w-16{
    width: 16%;
}
/* Positioning */
.bottom-10{
    bottom: 10%;
}
.top-10{
    top: 10%;
}
/* Navigation */
.nav-bare{
    position: absolute;
    top: 0;
    left: 0;
    padding: 30px;
    z-index: 3;
}
.nav-bare .wrap-menu > ul > li{
    display: inline;
    padding: 25px;

}
.nav-bare a{
    font-family: "Lato";
    color: #977654;
}
.nav-bare.purple a{
    color: #fff;
}
/* Pages Details */
.home-banner .owl-dots{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.home-banner.owl-theme .owl-dots .owl-dot.active span, .home-banner.owl-theme .owl-dots .owl-dot:hover span{
    background: #AEBEFF;
}
.home-banner.owl-theme .owl-dots .owl-dot span{
    background: #fff;
}
.home-booking .position-button{
    position: absolute;
    bottom: 100px;
}
.home-news .wrapper-thumbs, .insight-thumbs .wrapper-thumbs{
    border: 1px solid #000;
}
.home-news .wrapper-thumbs .wrap-text, .insight-thumbs .wrapper-thumbs .wrap-text{
    border-top: 1px solid #000;
    text-align: center;
}
.news-home .position-button{
    position: absolute;
    bottom: 50px;
}
.treatment-details .nav-pills .nav-link.active, .treatment-details .nav-pills .show > .nav-link{
    background-color: #939DC6;
    color: #fff;
}
.treatment-details .parent .nav-pills .nav-link{
    border: 1px solid #707070;
    color: #707070;
    padding: 10px 20px;
    margin: 8px;
}
.treatment-details .button-bottom .button-details{
    background: rgba(255, 255, 255, .5);
    color:#707070
}
.header-our-story {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .short-brief-about{
    position: absolute;
    bottom: 150px;
    left: 20%;
    width: 25%;
  }
  .faq .accordion-item{
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #BFAB79;
    border-radius: 0;
  }
  .accordion-button{
    background-color: transparent;
    color: #BFAB79;
  }
  .accordion-button:not(.collapsed){
    background-color: transparent;
    color: #BFAB79;
  }
  .reach-us .form-reach-us .button-submit{
    background-color: transparent;
    border: 1.5px solid #707070;
    border-radius: 50px;
    padding: 7px 20px;
    margin-top: 20px;
    color: #707070;

  }
  .reach-us .form-reach-us input{
    border: none;
    border-bottom: 1px solid #AD864D;
    border-radius: 0;
  }
  .reach-us .form-reach-us textarea{
    border: 1px solid #AD864D;
    border-radius: 20px;
    resize: none;
  }
  .salon-location .location-thumbs{
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
    position: relative;
  }
  .salon-location .location-thumbs .wrap-text-display{
    background: #939DC6;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 20px;
    width: 100%;
    border-radius: 20px;
  }
  .salon-location .location-thumbs:hover .wrap-text-display{
    opacity: 0;
  }
  .salon-location .location-thumbs .wrap-text-hidden{
    background: #939DC6;
    position: absolute;
    bottom: -100%;
    left: 0;
    padding: 20px;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all .7s;
  }
  .salon-location .location-thumbs:hover .wrap-text-hidden{
    bottom: 0;
    opacity: 1;
  } 
  .home-banner .banner-purple{
    width: 90% !important;
    position: absolute;
    bottom: 10%;
    transform: translateX(-50%);
    left: 50%;
    height: 70vh;
  }
  .nav-treatments{
    position: absolute;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    top: 20px;
    width: 85%;
  }
  .nav-treatments .nav-item{
    width: 20%;
  }
  .nav-treatments .nav-item .nav-link{
    background-color: #fff;
    width: 90%;
    border: 1px solid #939DC6;
    color: #939DC6;
  }
/* Accordion */

  
.accordion-custom {
    width: 100%;
    height: 70vh;
    overflow: hidden;
    margin: 0 auto;
  }
  .accordion-custom ul {
    width: 100%;
    display: table;
    table-layout: fixed;
    margin: 0;
    padding: 0;
  }
  .accordion-custom ul .thumbs {
    display: table-cell;
    vertical-align: bottom;
    position: relative;
    width: 16.666%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 500ms ease;
    border-radius: 25px;
    border-color: #fff;
    border-width: 15px;
    border-style: solid;
    overflow: hidden;
  }
  .accordion-custom ul .thumbs .wrap-text {
    display: block;
    overflow: hidden;
    width: 100%;
  }
  .accordion-custom ul .thumbs .wrap-text a {
    display: block;
    height: 65vh;
    width: 100%;
    position: relative;
    z-index: 3;
    box-sizing: border-box;
    color: #fff;
    text-decoration: none;
    font-family: Open Sans, sans-serif;
    transition: all 200ms ease;
  }
  .accordion-custom ul .thumbs .wrap-text a * {
    opacity: 0;
    margin: 0;
    width: 100%;
    text-overflow: ellipsis;
    position: relative;
    z-index: 5;
    white-space: nowrap;
    overflow: hidden;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
    -webkit-transition: all 400ms ease;
    transition: all 400ms ease;
  }
  .accordion-custom ul .thumbs .wrap-text a h2 {
    text-overflow: clip;
    font-size: 24px;
    text-transform: uppercase;
    margin-bottom: 2px;
    padding-top: 25vh;
    left: 30px;
  }
  .accordion-custom ul .thumbs .wrap-text a p {
    padding-top: 48vh;
    left: 30px;
    font-size: 13.5px;
  }
  
  .accordion-custom ul:hover .thumbs {
    width: 8%;
  }
  .accordion-custom ul:hover .thumbs:hover {
    width: 20%;
  }
  .accordion-custom ul:hover .thumbs:hover a * {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  
  .accordion-custom ul:hover .thumbs .wrap-text a h1:hover, .accordion-custom ul:hover .thumbs div a *  {
    opacity: 0;
  }
  
  .accordion-custom ul .thumbs .wrap-text a h1 {
    opacity: 1;
    text-align: center;
    padding-top: 35vh;
  }
  .accordion-custom .images-details{
    position: absolute;
    z-index: 0;

  }
  .accordion-custom .thumbs .images-effect {
    opacity: 0;
  }
  .accordion-custom ul:hover .thumbs:hover .images-effect {
    opacity: 1;
  }
  @media screen and (max-width: 600px) {
  
    .accordion-custom {
      height: auto;
    }
    .accordion-custom ul li, .accordion-custom ul li:hover, .accordion-custom ul:hover li, .accordion-custom ul:hover li:hover {
      position: relative;
      display: table;
      table-layout: fixed;
      width: 100%;
      -webkit-transition: none;
      transition: none;
    }
    .mobile-treatments .item {
        transform: scale(0.8);
        transition: .4s ease all;
      }
    .mobile-treatments .active .item{
        transform: scale(1);
    }
    .home-booking .position-mobile-title {
        top: 50px;
        left: 50px;
    }
    .short-brief-about {
        bottom: auto;
        left: 10%;
        width: 75%;
        top: 4%;
      }
      .salon-location .location-thumbs .wrap-text-display {
        border-radius: 20px;
      }
  }
/* Position Essentials */
.position-bottom-left{
    position: absolute;
    left: 30%;
    transform: translate(-50%, -50%);
    bottom: -10%;
}
/* Footers */
.footer-bare ul li a{
    color: #707070;
}
/* Mobile */
@media screen and (max-width:992px) {
    .logo-mobile{
        width: 155px;
    }
    .nav-bare {
        padding: 25px 25px;
    }
}
/* Side Menu Nav */

/* Components */
.carousel-btn-white{
    background-color: #fff;
    color: #05a9f3;
    padding: 10px;
    border: 2px solid #05a9f3;
    border-radius: .2em;
}
/* Spacing */
.line-height-30{
    line-height: 30px;
}
.line-height-44{
    line-height: 44px;
}