@charset "utf-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

* { 
 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
 box-sizing: border-box;         /* Opera/IE 8+ */
}

.clearfix:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
}
.clearfix {
   display: inline-block;
}
html[xmlns] .clearfix {
   display: block;
}
* html .clearfix {
   height: 1%;
}
.wrap {text-align:left;}


.wrap>*:not(*:root) {margin-left:-4px;}/*--- FIx for safari flexibleg grid--*/

*:focus {outline:0;}
html, body {width:100%; height:100%; font-family: 'aaux-next', sans-serif;}
body {font-size:12px; line-height:1.25em;}
[class*="_fullcontainer"]{width: calc(100% - 90px);margin:0px auto;}
[class*="_container"]{width:100%; margin:0px auto; max-width:1240px; padding-right: 1rem; padding-left: 1rem;}
[class*="_postcontainer"]{width:100%; margin:0px auto; max-width:870px;padding-top:35px;padding-bottom:35px;}


@media screen and (max-width: 768px) {
  [class*="_container"]{width:100%; margin:0px auto; max-width:1240px; padding-right: unset; padding-left: unset;}
}

@media (min-width: 768px) and (max-width: 1024px) {
  [class*="_container"]{width:100%; margin:0px auto; max-width:1240px; padding-right: 1rem; padding-left: 1rem;}
}

a {transition:color 0.2s linear; -ms-transition:color 0.2s linear; -moz-transition:color 0.2s linear; -webkit-transition:color 0.2s linear; text-decoration:none; color:#333;}
body {font-size:100%;}


html {
 scroll-behavior: smooth;
}

.row > div {
    padding-bottom: 20px;
}


/*--General--*/
@import url("https://use.typekit.net/poo6nwf.css");

img{width: 100%; height: auto;}
p { font-family: 'aaux-next', sans-serif; font-size:1em; line-height: 1.25em; padding-bottom: 20px; color: #5e5f61; letter-spacing: 1px;}
h1 { font-family: 'matrix-ii', serif; font-size:4em; font-weight: 300; line-height: 1.4em; color: #000000; display: block;}
h2 { font-family: 'calluna', serif; font-size: 3em; font-weight: 700; text-transform: uppercase; line-height: 1.1em; text-align: center;
    max-width: 560px; display: block; margin: auto; margin-top: 8%;}
h3 { font-family: 'calluna', serif; font-size:1.1em; font-weight: 600; padding-bottom: 0px; line-height: 1em; padding-bottom: 10px;}
h4 { font-family: 'calluna', serif; font-size:1.2em; font-weight: 700; padding-bottom: 0px; line-height: 1.4em; padding-bottom: 10px; text-transform: uppercase;}

/*--Typography--*/
.text-center {text-align: center;}
.bold-text {font-weight: 600;}
.black-text {color: #000000!important}
.white-text {color: #ffffff!important;}
.grey-text {color: #A8A8A8!important;}
.brown-text {color: #ba9182!important;}
.lightbrown-text {color: #e5c5b7!important;}

/*--Padding--*/
.slider-space {height: 100vh;}

/*--Padding--*/
.padbtm10 { padding-bottom: 10vh; }
.padbtm15 { padding-bottom: 15vh; }
.padtop5 {padding-top: 5vh;}
.padtb5 {padding-top: 5vh; padding-bottom: 5vh;}
.padtb10 {padding-top: 10vh; padding-bottom: 10vh;}
.padtop10 {padding-top: 10vh;}
.padbtm3 {padding-bottom: 3vh;}

.marginbtm10 {margin-bottom: 10vh;}

/*--COlour--*/
.grey-col {color:#5e5f61!important;}

/*--Home-slider--*/
.home-bg {background-image: url(../images/klyn-home-slider-2.jpg); background-size: cover; background-position: center; height: 100vh; position: relative;}
.acne-hover {color: #ffffff;background-color: #9b7970; display: inline-block; width: 180px; height: 50px; margin-right: 20px; padding: 15px 20px; text-align: center;}
.anti-aging-hover {color: #ffffff; background-color: #9b7970; display: inline-block; width: 230px; height: 50px; padding: 15px 20px; text-align: center;}
.acne-hover:hover span {display: none;}
.acne-hover:hover {background-color: #ffffff; transition: .1s ease; display: inline-block;}
.acne-hover:hover:before { content: "SPOTLESS"; color: #9b7970;}
.anti-aging-hover:hover span {display: none;}
.anti-aging-hover:hover {background-color: #ffffff; transition: .1s ease; display: inline-block;}
.anti-aging-hover:hover:before { content: "FLAWLESS"; color: #9b7970; }
.home-text { font-family: "matrix-ii", serif; font-size: 1.6em; font-weight: 400; line-height: 1.3em; display: block; letter-spacing: 1px; text-align: left; color: #ffffff; margin-bottom: 25px;}
.home-product {font-family: "matrix-ii", serif; font-size: 1.5em; font-weight: 800; color: #ffffff;}
.home-divider-slash {font-family: "matrix-ii", serif; font-size: 1em; line-height: 1.5em; font-weight: 400; text-align: center; color: #9b7970!important; display: inline-block; padding-left: 15px; padding-right: 15px;}
.home-container { display: inline-block; width: 440px; height: 300px; position: absolute; bottom: 7vh; right: 8%;}
.home-logo {position: absolute; top: 5%; left: 5%; display: block; }

@media screen and (max-width: 768px) {
.home-bg {background-image: url(../images/klyn-home-slider-1.jpg); background-size: cover; background-position: center left; height: 100vh; position: relative;}
.acne-hover {margin-bottom: 15px;}
.home-text {font-size: 1.2em; }
.home-product {font-size: 1.3em;}
.home-container { padding: 0% 5%; position: absolute;top: unset; bottom: 0vh; width: 340px; margin: 0 auto; right: unset; transform: translate(8%, -20%);
}
.home-logo { position: absolute; top: 3%; left: 5%; display: block; width: 90px;}
}

@media (min-width: 768px) and (max-width: 1024px) {
  .home-container {
    width: 540px;
  }
}


/*--Menu--*/
.navibar {padding: 30px; background-color: transparent; text-align: center; position: relative; margin: 0;}
.sticky { position: fixed; top: 0; width: 100%;}
.sticky-whitebg { background:#ffffff;}
.sticky + .content { padding-top: 60px;}
.sticklogo {width: 75px!important; vertical-align: middle; position: absolute; right: 10%;}
.hamburger { position: relative; left: 10%; font-size: 2.5em;}


@media screen and (max-width: 768px) {
.navibar {padding: 35px!important;}
.sticklogo {width: 60px!important;}
.hamburger { font-size: 1.5em; right: 10%!important;}
.dropdown {left: 0%!important;}
}

.hidedesktop {display: none;}

/*Drop Down Menu*/
.dropdown {
  position: relative;
  display: inline-block;
  left: 10%;
  padding-bottom: 0px!important;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 160px;
  box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);
  z-index: 1;
  bottom: -98px;
}

.dropdown-content a {
  color: #9b7970;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #9b7970; color: #ffffff;}
.dropdown:hover .dropdown-content {display: block;}


/*Product Top*/
.prod-top-container {padding: 10% 5%; max-width: 800px; margin: 0 auto;}
.prod-highlight-text { font-size: 1em; font-weight: 600; color: #b99083; text-transform: uppercase; line-height: 1.3em; letter-spacing: 1px; }
.prod-highlight-text-bold { font-size: 1em; font-weight: 600; color: #825c48; text-transform: uppercase; line-height: 1.3em; letter-spacing: 1px; }
.prod-norm-text { font-size: 1.4em; line-height: 1.4em; margin-top: 10px; display: block; color: #5e5f61;}
.prod-norm-text-black { color: #000000; }
.prod-height {height:100vh;}

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

.prod-height {height:85vh;}
}

/*antiaging-product-page Product Top*/
#acne-product-page .prod-highlight-text { font-size: 1em; font-weight: 600; color: #b99083; text-transform: uppercase; line-height: 1.3em; letter-spacing: 1px; }
#acne-product-page .product-slid-container { position: relative; left: 35%; top: 32vh;}
#acne-product-page .product-slid-container .product-slid-text { position: absolute; z-index: 2; top: 9vh; left: 17%; text-align: center;}

@media (min-width: 768px) and (max-width: 1024px) {
#acne-product-page .product-slid-container .product-slid-text { left: 30%;}

}


@media screen and (max-width: 768px) {
  h1 {
    font-family: 'matrix-ii', serif;
    font-size: 3em;
    font-weight: 300;
    line-height: 1.4em;
    color: #000000;
    display: block;
  }

  .prod-highlight-text {
    font-size: 1.1em;
    font-weight: 600;
    color: #b99083;
    text-transform: uppercase;
    line-height: 1.5em;
    letter-spacing: 1px;
  }

  .prod-norm-text {
    font-size: 1.2em;
    line-height: 1.5em;
    margin-top: 10px;
    display: block;
    color: #5e5f61;
  }
}


/*Product Slider*/
.product-slid-container { position: relative; left: 0%; top: -5vh;}
.product-slid-container .product-slid-text { position: absolute; z-index: 2; top: 10vh; left: 28%; text-align: center;}
.product-hlight-bene { font-size: 2.4em; text-align: center; line-height: 1.2em; text-transform: uppercase; letter-spacing: 5px; display: block;
    margin-bottom: 15px;}
.product-hlight-but { display: inline-block; padding: 5px 10px; background-color: #b99081; color: #ffffff; font-family: "aaux-next", sans-serif; font-weight: 700; transition: .3s ease;}
.product-hlight-but:hover { background-color: #000000; transition: .3s ease;}
.product-slid-container h1 { font-size: 3.6em; line-height: 2em; text-align: center; }
.product-slid-container img { position: absolute; width: 700px; height: auto; margin: 0 auto; right: 15%; top: 22vh;}

@media (min-width: 768px) and (max-width: 1024px) {
#antiaging-product-page .product-slid-container .product-slid-text {
    position: absolute;
    z-index: 2;
    top: 18vh!important;
    left: 35%;
    text-align: center;
    margin: 0 auto;
}
}

@media screen and (max-width: 768px) {
.product-slid-container {
      position: relative;
    left: 0%;
    top: 30vh;
}
.product-slid-container .product-slid-text {
    position: absolute;
    z-index: 2;
    top: 14vh!important;
    left: 25%;
    text-align: center;
    margin: 0 auto;
}

.product-slid-container h1 {
    font-size: 3em;
    line-height: 2em;
    text-align: center;
}
.product-hlight-bene {
    font-size: 1.6em;
    text-align: center;
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: 5px;
    display: block;
    margin-bottom: 15px;
}
.product-hlight-but {
    display: inline-block;
    padding: 3px 8px;
    background-color: #b99081;
    color: #ffffff;
    font-family: "aaux-next", sans-serif;
    font-weight: 700;
    font-size: 0.8em;
}
#acne-product-page .product-slid-container {
    position: relative;
    left: 0%;
    top: 36vh;
}
}



/*--Product List--*/
.product-list-title { font-family: 'matrix-ii'; font-size: 2em; line-height: 1.2em; text-align: center; display: block; text-transform: uppercase; padding: 20px 0px; letter-spacing: 2px;}
.product-list-subtitle {font-family: 'aaux-next'; font-size: 1.3em; font-weight: 700; text-transform: uppercase; display: block; text-align: center; color: #5e5f61; margin-bottom: 15px;}
.product-list-left-feat {font-size: 1.3em; line-height: 1.3em; color: #5e5f61; display: block; text-align: center;}
.product-list-right-box {max-width: 560px; margin: 0 auto;}
.product-list-numb {display: inline-block; background: black; padding: 2px; border-radius: 50%; width: 30px; height: 30px; vertical-align: middle;text-align: center; color: #b99083; margin: 0 auto; font-weight: 700; font-size: 1.2em; font-family: "matrix-ii"; margin-right: 7px;}
.product-list-prod { font-family: matrix-ii; font-size: 1.2em;}
.product-list-ingre { display: block; margin-top: 10px; color: #825c48; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; font-size: 0.8em; margin-bottom: 10px;    line-height: 1.2em;}
.product-list-ingrebar { margin-top: -10px; display: block; border-top: 1px solid #ae8f83; border-bottom: 1px solid #ae8f83;padding: 2px 0px; margin-bottom: 20px;}
.product-list-ingrebar-title { display: block;  font-weight: 700; text-transform: uppercase; font-size: 0.8em; letter-spacing: 1px; color: #ae8f83;}
.product-list-ingrebar-text { display: block;  font-weight: 400; font-size: 1em; letter-spacing: 1px; padding-bottom: 3px;}


@media screen and (max-width: 768px) {
.product-list-title {
    font-size: 2em;
}
.product-list-left-feat {
    font-size: 1.1em;
}
.product-list-subtitle {
    font-size: 1.1em;
}
}

@media (min-width: 768px) and (max-width: 1024px) {
.product-list-right-box {max-width: unset; margin: 0 auto;}
}


/* Accordion */
.accordion {
    padding: 0;
    list-style: none;
    border-top: 1px solid #ae8f83;
    margin-top: -0.7rem;
    margin-bottom: 2rem;
}

.accordion-item {
  border-bottom: 1px solid #ae8f83;
}

/* Thumb */
.accordion-thumb {
  margin: 0;
  padding: .8rem 0;
  cursor: pointer;
}
  
.accordion-thumb:before {
    content: '';
    display: inline-block;
    height: 7px;
    width: 7px;
    margin-right: 1rem;
    margin-left: .5rem;
    vertical-align: middle;
    border-right: 1px solid;
    border-bottom: 1px solid;
    transform: rotate(-45deg);
    transition: transform .2s ease-out;
  }

/* Panel */
.accordion-panel {
  margin: 0;
  padding-bottom: .8rem;
  display: none;
}

/* Active */
.accordion-item.is-active .accordion-thumb::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}


/*--Directions--*/
.directions-text {font-weight: 700; margin-top: 10px;}
.directions-space div { margin: 0px 20px;}
.directions-tip { font-size: 1.2em; font-weight: 700;display: block; letter-spacing: 1px;}

.divider-line { border-top: 1px solid #825c48; padding-top: 5vh;}


@media screen and (max-width: 768px) {
.directions-space div { margin: 0px 0px;}
}


/*--Reviews--*/
.reviews-stars {font-size: 1.3em; font-weight: 700;}
.reviews-name {font-family: 'matrix-ii', sans-serif; color: #5e5f61; }
.reviews-box {border-left: 1px solid #825c48;}

@media screen and (max-width: 768px) {
.reviews-box {border-left: 0px;}
.reviews-mobile-space {padding-left: 1rem; padding-right: 1rem;}
}

/*--Footer--*/
.social-icon li { display: inline-block; width: 30px; margin-right: 15px;}
.social-icon ul { display: inline-block;}
.foot-address { font-size: 0.8em; }

/*--Footer padtb10--*/
@media (min-width: 768px) and (max-width: 1024px) {
.padtb10 {padding-top: 5vh!important; padding-bottom: 5vh!important;}
}

/*--Popup video--*/
/**
 * Simple fade transition,
 */
.mfp-fade.mfp-bg {
  opacity: 0;
  -webkit-transition: all 0.15s ease-out; 
  -moz-transition: all 0.15s ease-out; 
  transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  -webkit-transition: all 0.15s ease-out; 
  -moz-transition: all 0.15s ease-out; 
  transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}


/**
 * Fade-zoom animation for ingredients
 */

/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {
  opacity: 0;

  -webkit-transition: all 0.2s ease-in-out; 
  -moz-transition: all 0.2s ease-in-out; 
  -o-transition: all 0.2s ease-in-out; 
  transition: all 0.2s ease-in-out; 

  -webkit-transform: scale(0.8); 
  -moz-transform: scale(0.8); 
  -ms-transform: scale(0.8); 
  -o-transform: scale(0.8); 
  transform: scale(0.8); 
}

/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
  opacity: 1;

  -webkit-transform: scale(1); 
  -moz-transform: scale(1); 
  -ms-transform: scale(1); 
  -o-transform: scale(1); 
  transform: scale(1); 
}

/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
  -webkit-transform: scale(0.8); 
  -moz-transform: scale(0.8); 
  -ms-transform: scale(0.8); 
  -o-transform: scale(0.8); 
  transform: scale(0.8); 

  opacity: 0;
}

/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-out; 
  -moz-transition: opacity 0.3s ease-out; 
  -o-transition: opacity 0.3s ease-out; 
  transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
  opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
  opacity: 0;
}

/* Styles for ingredient popup window */
.ingredient-popup {
  position: relative;
  background: #ffffff;
  border: 3px solid #9b7970;
  padding: 20px;
  width: auto;
  max-width: 800px;
  margin: 20px auto;
}

.ingredient-link { text-decoration: underline; color: #5e5f61; }