body{font-size: 10px;}
.sty1,.sty3{border-width: 2px;}
.sty1{height: 33px;}
main h1{font-size: 3.5em; margin: 40px 0;}
main h1 small{display: block;}
.contactus h1,.storePage h1{padding-left: 2%; padding-right: 2%;}
.mainHeader{font-size: 0.9em;}
.site--banner:not(.prodcutBanner){ background-position:center; background-image: url('../img/home_banner_mobile.jpg')}
.mainHeader :not('.innerHeader'){height: 100%;}
.homepageBanner{height:100%;}
.prodcutBanner{height: 70%;}
.mainHeader .mainHeader--hgroup{background-size: cover;}
.productBannerText,.bannerText{top: auto; bottom: 0; left: 0; padding: 5% 0; width: 100%; text-align: center; background: url(../img/img.png) left bottom/contain repeat-x;  }
.bannerText--l01{width: 94px; right: -94px; top: 17px;}
.bannerText--l02{width: 274px; left: -62px; bottom: -14px; font-size: 2.6613em; white-space: nowrap;}
.bannerText--l01,.bannerText--l02{display: none;}
.bannerText > div,.productBannerText>div{text-shadow: 2px 2px 10px rgba(0,0,0,0.4);}
.productBannerText .line1 .sf{font-size: 3.50em;}
.productBannerText .line1 .bigf{font-size: 5.50em;}
.productBannerText .line2{font-size: 2.0em;}
.mistralLogo{position: absolute; top: 18px; left:0; right: 0; margin: auto;}
.mainHeader:not(.homepageBanner) .mistralLogo{width: 100px; height: 55px;}
.mainNavIcon{position: absolute; top:0; right: -73px;}
.mainNavWrapper{position: fixed; top:0; height: 100%; width: 80%; background: rgba(0, 0, 0,1);  overflow: visible; transition: left 0.5s; z-index: 10; border-right: 1px solid rgba(255, 255, 255, 0.1);}
.mainNav{width: 100%; height: 100%; overflow: auto; font-size: 1.1em;}
.mainNavWrapper.open{left: 0;}
.mainNavWrapper.close{left: -80%;}
.mainNav >ul,.mainNav >ul > li{display: block;}
/*.mainNav >ul >li.is-active .mainNav--submenu,.mainNav >ul >li:hover .mainNav--submenu{display: block;}*/
.mainNav  li,.mainNav h2{border-top: 1px solid rgba(255, 255, 255, 0.1);border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.mainNav li a,.mainNav h2{line-height: 50px; padding: 0 20px; color:rgb(255,255,255) !important;}
.mainNav .is-submenu:after{top:17px; right: 15px;}
.mainNav--submenu{padding-left: 20px; background: rgba(0, 0, 0,1);}
.mainNav--submenu > section >ul > li > a{padding: 1em 1em 1em 2em;}
.mainNav--submenu ul{display: none;}
.mainNav--submenu ul li{padding-left: 10px;}
.mainNav .loginBtn.sty1{-webkit-transform: translateX(-50%); -moz--transform: translateX(-50%); -ms-transform: translateX(-50%);  transform: translateX(-50%);left: 50%;position: relative; margin: 20px 0; line-height: 35px; height: 39px;}
/* m-hamburger */
.m-hamburger {display: block; border-radius: 50%; position: absolute; top:20px; right: -51px; overflow: hidden;margin: 0;padding: 0;width: 40px;height: 40px;font-size: 0;text-indent: -9999px;appearance: none;box-shadow: none;border-radius: none;border: none;cursor: pointer; box-shadow: -1px 1px 8px rgba(0,0,0,.5); transition: background 0.3s; }
.m-hamburger span {display: block;position: absolute;top: 18px;left: 10px;right: 10px; height: 4px;background-color: rgb(0, 0, 0);}
.m-hamburger span::before,.m-hamburger span::after {position: absolute;display: block;left: 0;width: 100%;height: 4px;background-color: rgb(0, 0, 0);content: "";}
.m-hamburger span::before{top: -6px;}
.m-hamburger span::after{bottom:-6px;}
.m-hamburger:focus{outline: none;}
.m-hamburger--htx{background-color: rgb(255, 255, 255);}
.m-hamburger--htx span{transition: background 0s 0.3s;}
.m-hamburger--htx span::before,.m-hamburger--htx span::after {transition-duration: 0.3s, 0.3s;transition-delay: 0.3s, 0s;}
.m-hamburger--htx span::before{transition-property: top, transform;}
.m-hamburger--htx span::after{transition-property: bottom, transform;}
.m-hamburger--htx.is-active span{background: none;}
.m-hamburger--htx.is-active span::before {top: 0;transform: rotate(45deg);}
.m-hamburger--htx.is-active span::after {bottom: 0;transform: rotate(-45deg);}
.m-hamburger--htx.is-active span::before,.m-hamburger--htx.is-active span::after {transition-delay: 0s, 0.3s;}
/*main Box homepage */
.cardBlock h2{padding:15px 15px 17px 45px; }
.cardBlock .flex{display: block;}
.cardBlock--card{margin: 40px 20px 0; height: auto; border-width: 3px;}
.cardBlock--card figure,.cardBlock--summary.posA{position: static;}
.cardBlock2--card .video{width: calc(100% + 6px); margin-left: -3px;}
.cardBlock1--card{padding: 84px 3px 3px;}
.cardBlock1--card .cardBlock--summary{padding: 0 20px 20px;}
.cardBlock1--card .cardBlock--summary summary{font-size: 2.3375em;}
.cardBlock2--card1 .cardBlock--summary{padding-bottom: 20px;}
.cardBlock1-card--4--5 .cardBlock1--card.posA{position: relative;}
.cardBlock2--card3 h2 + div{background: #000; min-height: 200px;}
.cardBlock2--card3 .sty2, .cardBlock2--card4 .sty2 {left: 16px;}
.cardBlock2--card3 .sty2:not(:nth-of-type(3)) { bottom: 30%; }
.cardBlock2--card3 .sty2:nth-of-type(2) {margin-left: 134px !important;}
.cardBlock2--card3 .sty2:nth-of-type(3) {margin-left: 0 !important; bottom: 6%;}
.cardBlock2--card3 .sty2:nth-of-type(4) {margin-left: 0 !important; bottom: 6%;}
/*************popup*************/
.popup--login--dimension,.popup--video--dimension{width: 90%; top: 70px !important; -webkit-transform: translateX(-50%) !important; -moz-transform: translateX(-50%) !important; -ms-transform: translateX(-50%) !important; transform: translateX(-50%) !important;}
.popup--video--dimension{margin-top: 60px;}
.loginFormMain {width : 75%;}
.popup--close{width: 8%;padding-top: 8%;}
.fromStyle .inputGroup .bar{border-bottom : 1px solid rgb(191,191,191);}
.popup--title{margin-top: -18%; font-size: 7.5em;}
.forgotPassword{border-bottom-color: rgb(0, 0, 0);}
/*************popup end*************/
/**********Main footer***********/
.mainFooter {padding: 15px; margin: 50px 0 0;}
.mainFooter ul{float: none; text-align: center;}
.mainFooter ul.right{padding-bottom: 15px;}
.mainFooter ul.left{padding: 15px 0; border-top: 2px solid rgb(215, 215, 215);}
.mainFooter ul.left li{display: block;}
.mainFooter li.line{display: none;}
/**********Main footer end***********/

/*contactus*/
.contactLeft{float: none;}
.contactFormBlock{padding:0 7%;}
.contactus .contactRight header{padding-left: 4%;}
.contactForm{border: 2px solid rgb(0, 0, 0); padding: 20px; margin-right: 10px;}
.bottomSpace{display: none;}
.contactus .contactus--tabel h2{font-size: 1.8em;}
/*.contactus .phnumbers h3,.contactus .phnumbers h3 + summary{font-size: 1.5em;}*/
.contactus .contactForm .fromStyle .inputGroup label,
.contactus .contactLeft header summary,.contactus .contactForm .fromStyle .inputGroup input,.contactus .contactForm .fromStyle .inputGroup textarea{font-size: 1.35em;}
.contactus .contactFormBlock p{font-size: 1.5em;}
/*contactus end*/
/**********beauty tutorials***********/
.beauty--tutorial{padding: 0 2%;}
.video--popup.show .video--popup-video{margin-top: 0;}
.beauty--tutorial--row .videoinfo summary{font-size: 1.5em;}
/**********beauty tutorials end***********/
/**********store***********/
.gmap form{position: static;}
.change-location select{width:80%; height: 40px; border-width: 2px;}
.gmap img, .gmap iframe{height: 360px;}
/**********store end***********/
/**********product page***********/
.productPage{width:90%; margin: auto;}
.product--card.float-left,.product--card.float-right{float: none;}
.product--card{margin-top: 40px; width: 100%;} /* valentine css update */
.product--card--inner {min-height: 225px;}
.procust--img{position: static; margin-top: 20px;}
.product--card summary, .product--card--abIn{font-size: 1.5em; max-width: 90%;}
.popup--product--dimension,.popup--product--dimension .flex > *{width: 100%;}
.popup--product--dimension .flex{-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.popup--product--dimension , .popup--product--dimension > *{display: block;}
.popup--product--dimension .textContainer {position: static;  width: 100%;}
.popup--product--dimension .product-type2 .zoomout{margin-top: 40px;}
.product-type1.table > *{padding: 0 5%;}
.popup--product--dimension .popup--close{right: 30px;}
.popup--product--dimension h2,.pdl15p{padding-left: 0;}
.popup--product--dimension h2{margin-bottom: 0; display: block; border-width: 4px; padding: 0 0 5px;}
.popup--product--dimension .zoomout{display: block; margin-top: 35px;}
.popup--product--dimension h3{margin-bottom: 15px;}
.popup--product--dimension ul li{width: 17%; padding-top: 17%;}
/**********product page end***********/
/*valentine css start here */
.homeBanner > div{min-height: auto; background-color: #DDD;}
.homeBanner a{margin: 15px 0;}
.homeBanner .cardBlock--summary {margin-top: 95px; padding-left: 15px;
  position: static;}
.homeBanner > div .bannerInfo{font-size: 2.335em; font-weight: 600;}
._mobile{display: block;}
._desktop{display: none;}

.vlcBanner.prodcutBanner .mainHeader--hgroup{
  background: url("../img/valentine_offers/banner_mobile.jpg") no-repeat 0 0 / 100% ;
}

.vlcBanner.prodcutBanner.product--lips--banner .line1_1{padding: 0 10px; font-size:1.9em;}
.mainNav li.vlcTab a{color:#ff6969 !important}
.vlcpage .prodcutBanner{height:80%}
.proCode.vlcEyeShadow{margin-top: 30px;}
/*valentine css end here */

/* video cards */
.product-tutos .video-section {
  margin: 50px 0 0;
}
.product-tutos .video--card {
  margin: 20px 0;
}
.prodcutBanner.product--makeup-tutos {
  background-image: url('../img/videopaster.jpg');
  background-position: center bottom;
  background-size: cover;
}
@media screen and (min-width:320px) and (max-width:479px) {
  .mainNavWrapper{font-size: 1em;}
}
@media screen and (min-width:480px) and (max-width:600px) {

.cardBlock .posA{position: relative;}
.cardBlock1--card1, .cardBlock1--card2,.cardBlock1--card3,.cardBlock1--card4,.cardBlock1--card5,
.cardBlock2--card1, .cardBlock2--card2{height: auto;}
.cardBlock1--card1 .cardBlock--summary,
.cardBlock1--card3 .cardBlock--summary,
.cardBlock1--card4 .cardBlock--summary,
.cardBlock1--card5 .cardBlock--summary{top: auto; left: auto; width: 100%; padding: 10%; margin-top: 70px;}
.cardBlock2--card .cardBlock--summary{margin-bottom: 30px;}
.cardBlock2--card2 video{margin-top: 100px;}
.cardBlock2--card3 .posA, .cardBlock2--card4 .posA {position: absolute;}
.cardBlock--card img, .cardBlock2--card1 video{position: relative;}

.mainNavWrapper{font-size: 1.3em;}
  /**********product page***********/
.product--card summary, .product--card--abIn{font-size: 1.2em;}
  /**********product page end***********/

}

@media screen and (min-width:600px) and (max-width:767px) {
  .mainNavWrapper{font-size: 1.5em;}
  /**********product page***********/
  .procust--img{bottom: 0; right: 0;}
  .product--card {margin-top: 30%;}
  .product--card summary, .product--card--abIn{font-size: 1.4em;}
  /**********product page end***********/
}