@font-face {
  font-family: SofiaProRegular;
  src: url(../fonts/SofiaProRegular-english.woff2);
}
@font-face {
  font-family: 'Maax';
  font-style: normal;
  font-weight: 100;
  src: url("../fonts/regular-205tf.woff2") format("woff2"), url("../fonts/regular-205tf.woff") format("woff");
}
@font-face {
  font-family: 'Maax-Bold';
  font-style: normal;
  src: url("../fonts/Maax+-+Bold-205TF.woff2") format("woff2"), url("../fonts/Maax+-+Bold-205TF.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: 'Maax-Light';
  font-style: normal;
  src: url("../fonts/Maax+-+Light-205TF.woff2") format("woff2"), url("../fonts/Maax+-+Light-205TF.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: 'Maax-Medium-Italic';
  font-style: normal;
  src: url("../fonts/Maax+-+Medium+Italic-205TF.woff2") format("woff2"), url("../fonts/Maax+-+Medium+Italic-205TF.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: 'Maax-Medium';
  font-style: normal;
  src: url("../fonts/Maax+-+Medium-205TF.woff2") format("woff2"), url("../fonts/Maax+-+Medium-205TF.woff") format("woff");
  font-display: swap;
}
/*@media(min-width:768px){
  .banner-box{
    max-width: 64vw;
  }
}*/
body{
	background-color: rgb(245, 250, 246);
  font-family: 'SofiaProRegular';
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
img{
	width: 100%;
	height: 100%;
}
.dropdown-menu.show {
  -webkit-animation: fadeIn 0.3s alternate;
  /* Safari 4.0 - 8.0 */
  animation: fadeIn 0.3s alternate;
}
.sec-pd{
  padding-right: 2rem;
  padding-left: 2rem;
}

.nav-item.dropdown.dropdown-mega {
  position: static;
}
.nav-item.dropdown.dropdown-mega .dropdown-menu {
  width: 90%;
  top: auto;
  left: 5%;
}

.navbar-toggler {
  border: none;
  padding: 0;
  outline: none;
}
.navbar-toggler:focus {
  box-shadow: none;
}
.navbar-toggler .hamburger-toggle {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  z-index: 11;
  float: right;
}
.navbar-toggler .hamburger-toggle .hamburger {
  position: absolute;
  transform: translate(-50%, -50%) rotate(0deg);
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  pointer-events: none;
}
.navbar-toggler .hamburger-toggle .hamburger span {
  width: 100%;
  height: 4px;
  position: absolute;
  background: #333;
  border-radius: 2px;
  z-index: 1;
  transition: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), all 0.2s ease-in-out;
  left: 0px;
}
.navbar-toggler .hamburger-toggle .hamburger span:first-child {
  top: 10%;
  transform-origin: 50% 50%;
  transform: translate(0% -50%) !important;
}
.navbar-toggler .hamburger-toggle .hamburger span:nth-child(2) {
  top: 50%;
  transform: translate(0, -50%);
}
.navbar-toggler .hamburger-toggle .hamburger span:last-child {
  left: 0px;
  top: auto;
  bottom: 10%;
  transform-origin: 50% 50%;
}
.navbar-toggler .hamburger-toggle .hamburger.active span {
  position: absolute;
  margin: 0;
}
.navbar-toggler .hamburger-toggle .hamburger.active span:first-child {
  top: 45%;
  transform: rotate(45deg);
}
.navbar-toggler .hamburger-toggle .hamburger.active span:nth-child(2) {
  left: 50%;
  width: 0px;
}
.navbar-toggler .hamburger-toggle .hamburger.active span:last-child {
  top: 45%;
  transform: rotate(-45deg);
}

.icons {
  display: inline-flex;
  margin-left: auto;
}
.icons a {
  transition: all 0.2s ease-in-out;
  padding: 0.2rem 0.4rem;
  color: #ccc !important;
  text-decoration: none;
}
.icons a:hover {
  color: white;
  text-shadow: 0 0 30px white;
}

.bannersection{

/*    background: rgb(245, 250, 246);
*/    background: #5fb9f7;
}
.bannerdiv{
	display: block;
	border-radius: 16px;
	margin: 150px 100px;
  margin-bottom: 30px;
}
.bannerdiv video{
	border-radius: 16px;
}

.btn-r{
    
    text-align: center;
    border: 2px solid #093d26;
    background: #333;
    color: white;
    font-size: 14px;
    border-radius: 50px;
    padding: 14px 50px;
    min-width: 181px;
    min-height: 50px;
    transition: color 333ms, background-color 333ms;
    text-decoration: none;


}
.btn-r:hover{
    background-color: rgb(139, 138, 135);
    color: rgb(255, 255, 255);
    transition: background-color 0.5s ease 0s, color 0.5s ease 0s;
    border: 2px solid rgb(139, 138, 135);


}
.nav-link{
	font-weight: 600;
	color: black;
	font-size:0.875rem;
}
.nav-link:focus, .nav-link:hover {
    color: black
}

.bannerdiv{
	position: relative;
}
.callout {
    /* min-height: 100vh;*/
    color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
 /*   mix-blend-mode: overlay;*/
    text-align: center;
   /* width: 450px;*/
    margin-top: 3rem;

}
.callout h1{
  color:  #002312;
  text-align: left;
  font-size: 34px;
  line-height: 1.4;
  /*font-family: Maax,Tahoma,Arial,Helvetica,sans-serif;*/
    font-family: 'Maax';

}
.button {
  text-transform: uppercase;
  background-color: transparent;
  border-radius: 40px;
  padding: 4px;
  border: 1px solid #b84647;
  margin-top: 20px;
}
.button .inner {
  background-color: #b84647;
  padding: 15px 30px;
  border-radius: 40px;
}
.video {
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  
}
.line{
  font-size: 16px;
  color: rgba(0, 0, 0, 0.54);
 text-align: left !important;
  margin-right: 1rem;

}
.title-t{
  color: rgb(117, 117, 117);
  font-size: 1.25rem;
  line-height: 1.2;
  padding-bottom: 1rem;
}
.bannerbgvideo {
	width: 100%;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.owl-carousel .owl-item .icon-pic{
       width: 50px;
       height: 50px;
       display: inline;
       margin-right: 1rem;
       margin-bottom: 1rem;

}

.boxes{
	border-radius: 16px;
	 position: relative;
  /*text-align: center;*/
  color: white;
}
.boxes-testi{
  width: 350px;
  margin-right: 20px;
  height: 270px;
  background: white;
  border-radius: 18px;
  padding: 20px;
  position: relative;
}
.line-testi{
    font-size: 16px;
    color: rgba(0, 0, 0);
    text-align: left !important;
    margin-top: 1rem;
    
  
}
.banner-pic{
padding: 6rem;
position: relative;
}

.banner-box
{
  position: absolute;
    top: 9%;
    padding: 6rem;
    max-width: 50vw;
}
}
.col2{
 margin-top: 2.5%;
 background-color: rgb(245, 250, 246);
 padding: 0 50px;
}
.boxes img{
	width: 100%;
	height: auto;
	border-radius: 16px;
}
.top-left {
  position: absolute;
  top: 3.5%;
  left: 3.5%;
}
/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 3.5%;
  left: 3.5%;
}

.mid{
  left: 18.5%;
}
.sm-text{
  font-size: 1.25rem !important;

}
.sm-box{
  font-size: 14px;
    background-color: #cbcaca;
    width: fit-content;
    padding: 1px 6px;
    border-radius: 0.8rem;

}
.title-2{
  color: black;
    font-size: 2rem;
    line-height: 1.6;

}
/* Top right text */
.top-right {
  position: absolute;
  top: 3.5%;
  right: 3.5%;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 3.5%;
  right: 3.5%;
}

.boxes .title{
	    font-size: 1.75rem;
    line-height: 1.28571;
    margin-bottom: 0.5rem;
    font-weight: 700;
    margin-top: 0px;
    color: rgb(0, 0, 0);
    cursor: default;
}
.boxes .des{
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
    margin-top: 0px;
    cursor: default;
    margin-bottom: 1.8rem;
    color: rgba(0, 0, 0, 0.65);
}
.boxbtn{
	padding: 15px;
    color: white;
    background: black;
    border-radius: 26px;
    text-decoration: none;
    
}
.boxbtn:hover{
	color: white;
	text-decoration: none;
}
.divider{
	margin-bottom: 4.1667vw;
	margin-top: 4.1667vw;
    width: 100%;
    height: 12px;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: justify;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, 0.03);
}
.box img{
	border-radius: 16px;
}
.owl-item {width: 100%; margin-right: 10px; }

.thevideo {
  /*background-image: url('https://img.youtube.com/vi/nZcejtAwxz4/maxresdefault.jpg');*/
/*  height: auto;
  width: 100%;
  border-radius: 16px;
  margin-bottom: 50px;*/
}
.thevideo{
  border-radius: 16px; 
  width: 100%;
  /*height: 100vh;*/
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
/* Hide Play button + controls on iOS */
video::-webkit-media-controls {
    display:none !important;
}
.boxa{
  padding: 10px;
    color: black;
    display: block;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    background: white;
    border-radius: 26px;
    text-decoration: none;
    border:1px solid rgba(0, 0, 0, 0.12);

}
.boxa2{
  padding: 10px 15px; 
    color: black;
    display: inline-block;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    background: white;
    border-radius: 26px;
    text-decoration: none;
    border:1px solid rgba(0, 0, 0, 0.12);

}
.boxa2:hover{
  background-color: rgba(255, 255, 255, 0.51);
    border-color: rgba(255, 255, 255, 0);
    color: black;
}
.desp{
    font-weight: 600;
  color: black;
  margin-top: 1rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  line-height: 1.42857;

}
.desdiv{
  font-weight: 500;
  margin-bottom: 1rem;
  line-height: 1.42857;
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.54);
}
.boxa:hover{
  color: white;
  background: black;
  border-color: black;
}
.sectitle{
  color: black;
  font-weight: 500;
      margin-bottom: 2rem;
      line-height: 1.25;
      font-size: 2rem;
      margin-top: 0px;
    cursor: default;
}
.greyboxes{
  background: rgb(238, 243, 239);
}
.whiteboxes{
  background: white;
}
.bottomltext{
  color: #1d4465;
  text-decoration: none;
  line-height: 2.5;
  padding-right: 30px;
}
.bottomltext:hover{
  color: #1d4465;
}
.top-left span{
  right: 7%;
    position: absolute;
    top: 24%;
    color: black;
/*    background: white;
*/    padding: 1px 7px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
}
.flexd{
  width: 100%
}
.smalltext{
  margin-top: 0px;
    cursor: default;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.33333;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.54);
    display: block;
}
.slientsp{
  margin-top: 0px;
    color: rgba(0, 0, 0, 0.44);
    cursor: default;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: calc(2);
    letter-spacing: 0.09375rem;
    text-transform: uppercase;
    text-align: center;
}
.images{
  /*display: flex;*/
  margin: 0 auto;
  text-align: center;
}
.images img{
  width: auto;
  height: 100%;
  margin: 0 30px;
  max-width: 130px;
  padding-top: 20px;
}
.clients{
    margin-top: 2.5%;
    background-color: rgb(245, 250, 246);
    padding: 50px 50px;
}

.slidingtext{
  margin-top: 2.5%;
  background-color: rgb(245, 250, 246);
    padding: 50px 0px;
}

.marquee{
 font-size: 130px;
 color: #e2ece7;
 font-style: italic;
}

.grid{
  margin-top: 2.5%;
  background-color: rgb(245, 250, 246);
    padding: 50px 0px;
}
.gridh2{
  color: #e2ece7;

}
.gridtitle {
  margin-bottom: 40px;
}
.gridimg img{
      border-radius: 16px;
  height: auto;
  width: 100%;
}
.gridtext{
  margin-top: 20px;
    cursor: default;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.33333;
    font-weight: 400;
    color: rgb(0, 0, 0);
}
footer{
      /*padding: clamp(60px,calc(60px + (20 * (100vw - 1440px) / (1920 - 1440))),80px);*/
    color: rgba(0, 0, 0, 0.89);
    fill: rgba(0, 0, 0, 0.89);
    background-color: rgb(226, 236, 231);
}
#footer{
  padding: 50px 30px;
}
.footerh4{
      margin-bottom: 1.5rem;
      color: black;
      font-weight: 700;
      font-size: 2rem;
}

.ftinput {
  background: transparent;
  transition: border-color 120ms linear 0s;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;

  color: black;
  padding: 20px;
  padding-right: 100px; /* <---------- Added right padding here to prevent text flowing under button */
  width: 100%;
}

.ftinput:focus {
  outline: none;
}

.ftinput::placeholder {
  color: #686c6a;
}

.ftbutton {
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: black;
  padding: 15px;
  position: absolute;
  right: 5px;
  top: 5px;
}

.pt-site-footer__submit {
  position: relative;
  display: inline-block;
  width: 90%;
}
.fthead h5{
  color: #1b1d1c;
  font-weight: 600;
  line-height: 1.875rem;
      margin-bottom: 1rem;
    font-size: 0.875rem;
}
.fthead ul li a{
  color: #1b1d1c;
      display: inline-block;
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 0.0625rem solid transparent;
    transition: border 300ms linear 0s;
    text-decoration: none;
}
.fthead ul li a:hover{
  border-bottom: 1px solid #1b1d1c
}
.ftbottomright{
      position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    color: rgba(0, 0, 0, 0.54);
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 16px;
    padding: 1rem;
    text-decoration: none;
    border-radius: 1rem;
    transition: background-color 200ms linear 0s, fill, stroke;
    color: rgba(0, 0, 0, 0.54);
    
    box-shadow: none;
}
.ftbottomright:hover{
  /*background-color: rgba(0, 0, 0, 0.06);*/
      color: rgba(0, 0, 0, 0.54);
    background-color: rgba(0, 0, 0, 0.06);
    box-shadow: none;
}
.eLcylt{
  display: block;
    width: 2.5rem;
    height: 2.5rem;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px;
}
.bEjbvv {
    -webkit-box-flex: 1;
    flex-grow: 1;
    height: 2.5rem;
    padding-left: 0.75rem;
}
.footerstyle__FooterSublabel-sc-11l7kjo-7 {
    font-size: 0.875rem;
    line-height: 1;
    white-space: nowrap;
    color: rgb(117, 117, 117);
}
.skinm, .hairsm{
  display: none;
}
.social{
  margin-top: 20px;
  
}
.social a{
  text-decoration: none;
}
.social a svg{
  width: 100%;
    height: auto;
    max-width: 20px;
    fill: #000;
    margin: 10px 15px;
}


@media only screen and (max-width: 600px) {

  .bannerdiv{
    margin: 0 15px;
  }
  .banner-pic{
padding: 2rem;
position: relative;
}
.banner-box{
  top: 4%;
  padding: 2rem;
  max-width: 75vw;
}
.callout{
  margin-top: 8rem;
  margin-left: 2rem;
}
.btn-s{
  top: 39% !important;
  margin-left: 2rem;
}
.navbar-default.navbar-shrink .navbar-header{
  margin-left: 0 !important;
}
.text-right{
  text-align: center !important;
  margin-top: 8rem;
}
.btn-r{
  padding: 12px 25px;
}
  .col2{
    padding: 20px 15px 30px 15px;
  }
  .boxes{
    margin-bottom: 20px;
  }
  .sec-pd{
    padding: 0;
  }

  .boxes-testi {
    width: 320px;
  }
  .skinm{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;    width: 100%;
    height: auto;
    border-radius: 16px;
  }
  .skind{
    display: none;
  }
  .hairsm{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;    width: 100%;
    height: auto;
    border-radius: 16px;
  }
  .hairsd{
    display: none;
  }
  .images{
    overflow: scroll;
    display: flex;
    padding: 15px 0;
  }
  .gridtext{
    margin-bottom: 3rem;
  }
}