.main-font-color {
  color: var(--main-color-1) !important;
}
.text-center
{
  text-align: center
}

.vto {
  height: 100%;
  background: #1c2021;
  color: white;
  background-repeat: no-repeat;
}

.tryon-media-menu {
  background: #f1ceb4 !important;
  border: none !important;
}

.heading {
  text-align: center;
}

.vto11 {
  font-family:'Alata', sans-serif !important;;
  padding-top: 20px;
  font-weight: bolder;
  font-size: 55px;
  color: #fff!important;
}

.box {
  height: 280px;
  margin: 30px 0 0 0;
  display: flex;
  gap: 40px;
  flex-direction: column;
  align-items: center;
}

.aa {
  position: relative;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.33em;
  letter-spacing: 0.1em;
  font-weight: 400;
  padding: 10px 30px;
  transform: 0.5s;
  width: 65%;
  border: 1px solid white;
  border-radius: 5px;
}

.aa:hover {
background-color:#ffffff;
color: black!important;

}

.aa:before {
  content: '';
  position: absolute;
  inset: 2px;
  /* background: #F1CEB4; */
}

.aa span {
  position: relative;
  z-index: 1;
}

.aa i {
  position: absolute;
  inset: 0;
  display: block;
}

.aa i::before {
  content: '';
  position: absolute;
  top: 0;
  left: 80%;
  width: 10px;
  height: 4px;
  background: #231307;
  transform: translate(-50%) skewX(325deg);
  transition: 0.5s;
}

.aa:hover i::before {
  width: 20px;
  left: 20%;
}

.aa i::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 10px;
  height: 4px;
  background: #231307;
  transform: translate(-50%) skewX(325deg);
  transition: 0.5s;
}

.aa:hover i::after {
  width: 20px;
  left: 80%;
}

.last {
  text-align: left;
  margin-top: 15px;
  width: 65%;
  background-color: #ffffff;
  color: black;
  padding: 8px 12px;
  margin: 15px auto 0 auto;
  border-radius: 5px;
}

.consentbox {
  font-family:'Alata', sans-serif !important;
  font-weight: lighter;
  font-size: 15px;
}

.aaaa {
  color: black;
  text-decoration: none;
  font-weight: bolder;
  font-style: italic;
}

.vtostep2 {
  height: 622px;
  width: 620px;
  margin: 0 auto;
  margin-top: 50px;
  background-color: #F0CDB4;
}

.flexbox {
  display: flex;
  width: 100%;
  height: 52px;
  /* background-color:#f4e4d9 ; */
  border: #f9f7f6 1px solid;
  border-style: dashed;
}

.flex1 {
  margin: 12px;
}

.backarrow {
  color: #000;
  text-decoration: none;
  margin: 5px;
  font-size: 25px;
}

.flex2 {
  margin-left: 159px;
}

.toptittle {
 font-family:'Alata', sans-serif !important;
  font-size: 28px;
  margin-top: 14px;
}

.instruction {
  height: 368px;
  margin-left: 36px;
  margin-top: 73px;
}

.how {
  font-family:'Alata', sans-serif !important;
  font-weight: lighter;
  font-size: 30px;
}

.spantext {
  margin-left: 73px;
  margin-top: -36px;
  padding-bottom: 3px;
  display: flex;
 font-family:'Alata', sans-serif !important;
  font-weight: lighter;

}

.ins1 {
  text-align: left;
  padding-left: 15px;
  padding-top: 3px;
  margin-top: 30px;
  border: #f9f7f6 1px solid;
  border-style: dashed;
  width: 80%;
  background-color: #f4e4d9;
  border-radius: 20px 100px 100px 20px;
}

.ins2 {
  text-align: left;
  padding-left: 15px;
  padding-top: 10px;
  margin-top: 30px;
  border: #f9f7f6 1px solid;
  border-style: dashed;
  width: 80%;
  background-color: #f4e4d9;
  border-radius: 20px 100px 100px 20px;
}

.ins3 {
  text-align: left;
  padding-left: 15px;
  padding-top: 10px;
  margin-top: 30px;
  border: #f9f7f6 1px solid;
  border-style: dashed;
  width: 80%;
  background-color: #f4e4d9;
  border-radius: 20px 100px 100px 20px;
}

.file {
  margin-top: 50px;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  font-family:'Alata', sans-serif !important;
}

.uploadpic {
  display: none;
}

.lab {
  display: inline-block;
  text-transform: uppercase;
  color: #fff;
  background-color: #7e5844;
  text-align: center;
  padding: 15px 40px;
  font-size: 18px;
  letter-spacing: 1.5px;
  user-select: none;
  cursor: pointer;
  box-shadow: 5px 15px 25px rgba(0, 0, 0, 0.35);
  border-radius: 3px;
}

.lab i {
  font-size: 20px;
  margin-right: 10px;
  color: white;
}

.lab :active {
  transform: scale(0.9);
}


.vtostep3 {
  padding: 30px 0;
}

.chossemodel {
  text-align: center;
  padding-left: 15px;
  padding-top: 3px;
  margin-top: 16px;
  margin-bottom: 10px;
  border: #f9f7f6 1px solid;
  border-style: dashed;
  width: 100%;
  color: black;
}

.select {
  font-family:'Alata', sans-serif !important;
  font-weight: lighter;
  font-size: 30px;
  display: inline;
  text-transform: capitalize;
}

.model {
  font-family:'Alata', sans-serif !important;
  font-weight: lighter;
  font-size: 16px;
  display: inline;
  margin-left: 10px;
  font-style: italic;
}

.grid-box {
  display: grid;
  grid-template-columns: auto auto;
  width: 80%;
  margin: 0 auto;
}

.grid-item {

  text-align: center;
  background-color: #dadada;
  margin: 10px;
}

.images {
  height: 160px;
  align-items: center;
}

.vto4 {
  height: 622px;
  width: 620px;
  margin: 0 auto;
  margin-top: 50px;
  background-color: #f4e4d9;
  text-align: center;

}

.screenimage {
  height: 559px;

}

.icon-bar {
  width: 95%;
  background-color: grey;
  overflow: auto;
  border-radius: 20px 100px 100px 20px;
}

.icon-bar .icon {
  float: left;
  width: 20%;
  text-align: center;
  padding: 12px 0;
  transition: all 0.3s ease;
  color: white;
  font-size: 30px;
}

.icon-bar .icon:hover {
  background-color: rgb(196, 196, 196);
}


.name {
  float: right;
  margin-top: -30px;
  width: 60%;
  font-weight: bolder;
  margin-right: 10px;

}

.logo {
  color: #4D6484;
  font-size: 55px;
font-family:'Alata', sans-serif !important;
  padding-top: 30px;
  font-weight: bolder;

}

.consent {
  margin-top: 89px;
  background-color: white;
  width: 61%;
  float: right;
  display: inline;
  margin-left: 100px;
  font-style: italic;
  color: #4D6484;
  border-radius: 12px;
  padding-left: 15px;
}

.policy {
  color: #4D6484;
  text-decoration: none;
  font-weight: bolder;
}

.bottom {
  background-color: none;
  width: 60%;
  height: 300px;
  float: right;
  margin-top: 15px;
  position: relative;
}

.bb {
  position: absolute;
  top: 20%;
  left: 58%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 60px;
  color: white;
  background-color: #4D6484;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 60px;
font-family:'Alata', sans-serif !important;
  font-size: 24px;
  font-weight: bolder;
  transition: .5s;
  overflow: hidden;
  box-sizing: border-box;
  letter-spacing: 1px;
}

.bb::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  left: 0;
  bottom: 0;
  border-style: solid;
  border-color: #E9D5D7;
  border-width: 100px 100px;
  z-index: -1;
  transform: rotate(360deg);
  transition: 1s;
  transform-origin: left;
}

.bb:hover:before {
  border-color: #AFBCCC;
  transform: rotate(60deg);
}

.cc {
  position: absolute;
  top: 44%;
  left: 58%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 60px;
  color: white;
  background-color: #4D6484;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 60px;
  font-family:'Alata', sans-serif !important;
  font-size: 24px;
  font-weight: bolder;
  transition: .5s;
  overflow: hidden;
  box-sizing: border-box;
  letter-spacing: 1px;
}

.cc::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  left: 0;
  bottom: 0;
  border-style: solid;
  border-color: #E9D5D7;
  border-width: 100px 100px;
  z-index: -1;
  transform: rotate(360deg);
  transition: 1s;
  transform-origin: left;
}

.cc:hover:before {
  border-color: #AFBCCC;
  transform: rotate(60deg);
}

.dd {
  position: absolute;
  top: 68%;
  left: 58%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 60px;
  color: white;
  background-color: #4D6484;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 60px;
font-family:'Alata', sans-serif !important;
  font-size: 24px;
  font-weight: bolder;
  transition: .5s;
  overflow: hidden;
  box-sizing: border-box;
  letter-spacing: 1px;
}

.dd::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  left: 0;
  bottom: 0;
  border-style: solid;
  border-color: #E9D5D7;
  border-width: 100px 100px;
  z-index: -1;
  transform: rotate(360deg);
  transition: 1s;
  transform-origin: left;
}

.dd:hover:before {
  border-color: #AFBCCC;
  transform: rotate(60deg);
}

/* END OF NEW VTO TEMPLATE STYLES */

/* size for icone image **/


.icon_img {

  width: 83px !important;
  height: 80px !important;

}

/*  Gradian for button background */

.grd_btn {
  linear-gradient(to right, var(--main-color-2) 0%, var(--main-color-1) 51%, var(--main-color-2) 100%) !important;
}

.custom_Grident_background {
  background-image: -webkit-gradient(linear, left top, right top, from(var(--main-color-2)), color-stop(51%, var(--main-color-1)), to(var(--main-color-2))) !important;
  background-image: linear-gradient(to right, var(--main-color-2) 0%, var(--main-color-1) 51%, var(--main-color-2) 100%) !important;
  margin: 10px !important;
  padding: 15px 45px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  -webkit-transition: 0.5s !important;
  transition: 0.5s !important;
  background-size: 200% auto !important;
  color: white !important;
  -webkit-box-shadow: 0 0 20px #eee !important;
  box-shadow: 0 0 20px #eee !important;
  border-radius: 10px !important;
  display: block !important;


}

.custom_Grident_background a:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
}

.fs-perfect-slider-section .fs-text-container img {
  width: 84px;
  height: 83px;
  margin-right: 5px !important;
}

.fs-perfect-slider-section .fs-text-container h3 {
  font-size: 20px;
  margin-left: 18px;
  margin-top: 5px;
}

.fs-perfect-slider-section .fs-text-wrap {
  margin-top: 10px;
}

.parent-typed-text {
  font-size: 50px !important;
}

.popup-vimeo-youtube {
  color: var(--main-color-1);
  margin-left: 15px;
  margin-top: 0px;
  float: left;
  font-weight: 700;
  border: 2px solid;
  background: white;
  padding: 10px 35px;
  border-radius: 10px;


}

.popup-vimeo-youtube:hover {
  color: var(--main-color-2);
}

.popup-vimeo-youtube img {
  margin-right: 10px
}

.orange_border {
  background: var(--main-color-1) !important;
}

.mt-icon-listgroup-content-holder-button p a::after {
  background: var(--main-color-1) !important;
}

.vc_row.wpb_row.vc_row-fluid.fs-main-hero-slider.vc_custom_1706732861337.vc_row-has-fill.vc_general.vc_parallax.vc_parallax-content-moving {
  background: var(--main-color-3) !important;
}

.fs-features-section .wpb_single_image .vc_single_image-wrapper.vc_box_shadow img,
.fs-features-section .wpb_single_image .vc_single_image-wrapper.vc_box_shadow {
  box-shadow: none !important;
}

/* VTO PDP CUSTOM BUTTON */
.tryonnix-vto-btn {
  pointer-events: none;
  opacity: 0.3;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: var(--main-color-2) !important;
  border-radius: 15px;
  /* background-color:var(--main-color-1)  !important; */
}

/* Style the buttons that are used to open the tab content */
.tab button {
  /* background-color: inherit; */
  float: left;
  /* border: none; */
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

.tab button {
  color: var(--main-color-1) !important;
  ;
}

/* Change background color of buttons on hover */


/* Create an active/current tablink class */

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;
  padding-right: 50px;
}

.single_item {
  width: 100%;
}

.slider_left_slide_2 {
  width: 55%;
  float: left;
}

.slider_right_img_2 {
  width: 45%;
  float: left;
}

.tabImage {
  width: 100%;
}

.tabImage img {
  max-height: 600px;
}

.banner_hair_shades {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  cursor: pointer;
}

.banner_hair_shades img {
  cursor: pointer;
  width: 50px;
  height: 50px;
}

html>body .banner-button-border-circle {
  width: 10px;
  height: 10px;
  bottom: -6px;
  left: -4px;
}

.custom-single-item {
  width: 100%;
  float: left;
}

.custom-slider_left {
  width: 35%;
  float: left;
}

.custom-slider_right {
  width: calc(65% - 30px);
  margin-left: 30px;
  float: left;
}

.custom-slider_right .third_silder_image {
  width: 100%;
  margin-top: 50px;
  padding: 0 20px;
}

.foundation_finder_content_slider {
  width: 35%;
  float: left;
}

.foundation_finder_img_slider {
  width: 65%;
  float: left;
}

.foundation_finder_img_slider .finder_img {
  margin-top: 50px;
}

.foundation_finder_img_slider .finder_img img {
  max-height: 600px;
}

.custom-slider_right .third_silder_image img {
  max-height: 600px !important;
}

.img-hair-colors {
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: 100%;
  padding: 5px;
  width: 60px !important;
  height: 60px !important;
}

.img-hair-colors.active {
  border: 1px solid white;
}

html>body .fs-general-btn.btn-dark a:hover {
  border: none !important;
}

html>body .fs-general-btn.btn-dark a {
  margin-right: 10px !important;
}

@media screen and (max-width: 600px) {
  html>body .banner-button-border-circle {
    width: 5px !important;
    height: 5px !important;
    bottom: -3px !important;
    left: -4px !important;
  }
}

/*.............Pdp page style styling............. */
#product_image img {
  width: 270px !important;
  height: 270px !important;
}

.color_button {
  width: 50px;
  height: 50px;
  border-radius: 100%;
}

#foundation-1 {
  background-color: rgba(244, 200, 166);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-2 {
  background-color: rgba(237, 193, 162);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-3 {
  background-color: rgba(224, 180, 145);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-4 {
  background-color: rgba(227, 191, 156);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-5 {
  background-color: rgba(239, 199, 168);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-6 {
  background-color: rgba(239, 188, 143);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-7 {
  background-color: rgba(238, 204, 176);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-8 {
  background-color: rgba(222, 187, 149);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-9 {
  background-color: rgba(235, 193, 157);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-10 {
  background-color: rgba(225, 172, 132);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-11 {
  background-color: rgba(212, 168, 141);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-12 {
  background-color: rgba(221, 181, 146);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-13 {
  background-color: rgba(218, 164, 108);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-14 {
  background-color: rgba(205, 144, 97);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-15 {
  background-color: rgba(195, 148, 113);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-16 {
  background-color: rgba(195, 148, 113);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-17 {
  background-color: rgba(200, 136, 89);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-18 {
  background-color: rgba(188, 122, 67);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-19 {
  background-color: rgba(217, 164, 124);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-20 {
  background-color: rgba(225, 162, 115);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-21 {
  background-color: rgba(218, 163, 108);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-22 {
  background-color: rgba(205, 144, 97);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-23 {
  background-color: rgba(210, 152, 114);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-24 {
  background-color: rgba(203, 143, 105);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-25 {
  background-color: rgba(165, 101, 61);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-26 {
  background-color: rgba(170, 112, 72);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-27 {
  background-color: rgba(166, 107, 72);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-28 {
  background-color: rgba(162, 101, 68);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-29 {
  background-color: rgba(196, 123, 69);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-30 {
  background-color: rgba(173, 112, 61);
  opacity: 1;
  --render-opacity: 0.5;
}

#foundation-31 {
  background-color: rgba(106, 68, 49);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-1 {
  background-color: rgba(244, 200, 166);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-2 {
  background-color: rgba(237, 193, 162);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-3 {
  background-color: rgba(224, 180, 145);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-4 {
  background-color: rgba(227, 191, 156);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-5 {
  background-color: rgba(239, 199, 168);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-6 {
  background-color: rgba(239, 188, 143);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-7 {
  background-color: rgba(238, 204, 176);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-8 {
  background-color: rgba(222, 187, 149);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-9 {
  background-color: rgba(235, 193, 157);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-10 {
  background-color: rgba(225, 172, 132);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-11 {
  background-color: rgba(212, 168, 141);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-12 {
  background-color: rgba(221, 181, 146);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-13 {
  background-color: rgba(218, 164, 108);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-14 {
  background-color: rgba(205, 144, 97);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-15 {
  background-color: rgba(195, 148, 113);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-16 {
  background-color: rgba(195, 148, 113);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-17 {
  background-color: rgba(200, 136, 89);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-18 {
  background-color: rgba(188, 122, 67);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-19 {
  background-color: rgba(217, 164, 124);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-20 {
  background-color: rgba(225, 162, 115);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-21 {
  background-color: rgba(218, 163, 108);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-22 {
  background-color: rgba(205, 144, 97);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-23 {
  background-color: rgba(210, 152, 114);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-24 {
  background-color: rgba(203, 143, 105);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-25 {
  background-color: rgba(165, 101, 61);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-26 {
  background-color: rgba(170, 112, 72);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-27 {
  background-color: rgba(166, 107, 72);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-28 {
  background-color: rgba(162, 101, 68);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-29 {
  background-color: rgba(196, 123, 69);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-30 {
  background-color: rgba(173, 112, 61);
  opacity: 1;
  --render-opacity: 0.5;
}

#concealer-31 {
  background-color: rgba(106, 68, 49);
  opacity: 1;
  --render-opacity: 0.5;
}

#blush-1 {
  background-color: rgba(153, 36, 1);
  opacity: 1;
  --render-opacity: 0.5;
}

#blush-2 {
  background-color: rgba(225, 91, 115);
  opacity: 1;
  --render-opacity: 0.5;
}

#blush-3 {
  background-color: rgba(253, 143, 192);
  opacity: 1;
  --render-opacity: 0.5;
}

#blush-4 {
  background-color: rgba(234, 145, 103);
  opacity: 1;
  --render-opacity: 0.5;
}

#blush-5 {
  background-color: rgba(242, 128, 114);
  opacity: 1;
  --render-opacity: 0.5;
}

#blush-6 {
  background-color: rgba(235, 83, 89);
  opacity: 1;
  --render-opacity: 0.5;
}

#blush-7 {
  background-color: rgba(238, 77, 134);
  opacity: 1;
  --render-opacity: 0.5;
}

#blush-8 {
  background-color: rgba(222, 41, 52);
  opacity: 1;
  --render-opacity: 0.5;
}

#blush-9 {
  background-color: rgba(253, 169, 138);
  opacity: 1;
  --render-opacity: 0.5;
}

#blush-10 {
  background-color: rgba(255, 95, 39);
  opacity: 1;
  --render-opacity: 0.5;
}

#blush-11 {
  background-color: rgba(148, 11, 13);
  opacity: 1;
  --render-opacity: 0.5;
}

#blush-12 {
  background-color: rgba(159, 57, 54);
  opacity: 1;
  --render-opacity: 0.5;
}

#blush-13 {
  background-color: rgba(159, 60, 55);
  opacity: 1;
  --render-opacity: 0.5;
}

#blush-14 {
  background-color: rgba(169, 109, 93);
  opacity: 1;
  --render-opacity: 0.5;
}

#blush-15 {
  background-color: rgba(206, 65, 78);
  opacity: 1;
  --render-opacity: 0.5;
}

#blush-16 {
  background-color: rgba(187, 105, 113);
  opacity: 1;
  --render-opacity: 0.5;
}

#blush-17 {
  background-color: rgba(253, 184, 189);
  opacity: 1;
  --render-opacity: 0.5;
}

#blush-18 {
  background-color: rgba(254, 148, 156);
  opacity: 1;
  --render-opacity: 0.5;
}

#blush-19 {
  background-color: rgba(254, 106, 116);
  opacity: 1;
  --render-opacity: 0.5;
}

#blush-20 {
  background-color: rgba(252, 88, 102);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipstick-1 {
  background-color: rgba(246, 128, 153);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipstick-2 {
  background-color: rgba(251, 77, 108);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipstick-3 {
  background-color: rgba(250, 84, 65);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipstick-4 {
  background-color: rgba(254, 47, 112);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipstick-5 {
  background-color: rgba(206, 92, 109);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipstick-6 {
  background-color: rgba(153, 74, 87);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipstick-7 {
  background-color: rgba(130, 30, 87);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipstick-8 {
  background-color: rgba(133, 24, 55);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipstick-9 {
  background-color: rgba(127, 16, 19);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipstick-10 {
  background-color: rgba(137, 3, 8);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipstick-11 {
  background-color: rgba(175, 4, 18);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipstick-12 {
  background-color: rgba(204, 4, 33);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipstick-13 {
  background-color: rgba(234, 37, 47);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipstick-14 {
  background-color: rgba(234, 37, 47);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipstick-15 {
  background-color: rgba(172, 23, 32);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipstick-16 {
  background-color: rgba(164, 81, 75);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipstick-17 {
  background-color: rgba(141, 25, 57);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipstick-18 {
  background-color: rgba(172, 104, 86);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipstick-19 {
  background-color: rgba(210, 113, 105);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipstick-20 {
  background-color: rgba(232, 75, 86);
  opacity: 1;
  --render-opacity: 0.5;
}


#lipliner-1 {
  background-color: rgba(168, 41, 57);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipliner-2 {
  background-color: rgba(177, 104, 107);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipliner-3 {
  background-color: rgba(141, 35, 59);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipliner-4 {
  background-color: rgba(101, 44, 43);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipliner-5 {
  background-color: rgba(144, 85, 79);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipliner-6 {
  background-color: rgba(149, 41, 88);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipliner-7 {
  background-color: rgba(160, 74, 67);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipliner-8 {
  background-color: rgba(104, 33, 51);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipliner-9 {
  background-color: rgba(167, 85, 79);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipliner-10 {
  background-color: rgba(238, 46, 56);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipliner-11 {
  background-color: rgba(94, 30, 53);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipliner-12 {
  background-color: rgba(255, 204, 207);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipliner-13 {
  background-color: rgba(255, 128, 77);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipliner-14 {
  background-color: rgba(255, 131, 244);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipliner-15 {
  background-color: rgba(0, 226, 209);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipliner-16 {
  background-color: rgba(250, 128, 113);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipliner-17 {
  background-color: rgba(171, 240, 209);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipliner-18 {
  background-color: rgba(135, 206, 234);
  opacity: 1;
  --render-opacity: 0.5;
}

#lipliner-19 {
  background-color: rgba(239, 218, 210);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyelash-1 {
  background-color: rgba(01, 01, 01);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyelash-2 {
  background-color: rgb(59 42 35);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyelash-3 {
  background-color: var(--main-color-2);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyebrow-1 {
  background-color: rgba(116, 136, 116);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyebrow-2 {
  background-color: rgba(132, 104, 93);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyebrow-3 {
  background-color: rgba(109, 79, 79);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyebrow-4 {
  background-color: rgba(106, 72, 63);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyebrow-5 {
  background-color: rgba(50, 40, 40);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyebrow-6 {
  background-color: rgba(99, 71, 60);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyebrow-7 {
  background-color: rgba(82, 53, 49);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyebrow-8 {
  background-color: rgba(104, 92, 90);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyebrow-9 {
  background-color: rgba(167, 128, 126);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyebrow-10 {
  background-color: rgba(228, 182, 161);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyebrow-11 {
  background-color: rgba(125, 102, 84);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyebrow-12 {
  background-color: rgba(145, 120, 90);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyebrow-13 {
  background-color: rgba(115, 94, 77);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyebrow-14 {
  background-color: rgba(31, 32, 34);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyebrow-15 {
  background-color: rgba(165, 95, 77);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyebrow-16 {
  background-color: rgba(222, 221, 228);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyebrow-17 {
  background-color: rgba(190, 126, 110);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyebrow-18 {
  background-color: rgba(112, 111, 121);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyebrow-19 {
  background-color: rgba(104, 77, 66);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyebrow-20 {
  background-color: rgba(98, 78, 67);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyebrow-21 {
  background-color: rgba(180, 150, 113);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-1 {
  background-color: rgba(235, 188, 154);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-2 {
  background-color: rgba(230, 171, 132);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-3 {
  background-color: rgba(203, 140, 105);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-4 {
  background-color: rgba(202, 137, 111);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-5 {
  background-color: rgba(163, 120, 94);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-6 {
  background-color: rgba(167, 117, 88);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-7 {
  background-color: rgba(130, 96, 74);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-8 {
  background-color: rgba(128, 95, 78);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-9 {
  background-color: rgba(190, 126, 87);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-10 {
  background-color: rgba(208, 144, 115);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-11 {
  background-color: rgba(203, 144, 101);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-12 {
  background-color: rgba(183, 133, 90);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-13 {
  background-color: rgba(209, 147, 106);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-14 {
  background-color: rgba(178, 115, 74);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-15 {
  background-color: rgba(202, 138, 94);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-16 {
  background-color: rgba(207, 129, 78);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-17 {
  background-color: rgba(154, 84, 49);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-18 {
  background-color: rgba(164, 121, 97);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-19 {
  background-color: rgba(154, 110, 87);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-20 {
  background-color: rgba(122, 79, 62);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-21 {
  background-color: rgba(103, 71, 58);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-22 {
  background-color: rgba(117, 69, 55);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-23 {
  background-color: rgba(122, 84, 63);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-24 {
  background-color: rgba(114, 63, 44);
  opacity: 1;
  --render-opacity: 0.5;
}

#bronzer-25 {
  background-color: rgba(116, 58, 43);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeliner-1 {
  background-color: rgba(194, 37, 40);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeliner-2 {
  background-color: rgba(7, 1, 134);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeliner-3 {
  background-color: rgba(254, 255, 0);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeliner-4 {
  background-color: rgba(255, 0, 2);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeliner-5 {
  background-color: rgba(252, 123, 4);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeliner-6 {
  background-color: rgba(5, 255, 4);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeliner-7 {
  background-color: rgba(255, 131, 244);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeliner-8 {
  background-color: rgba(255, 2, 142);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeliner-9 {
  background-color: rgba(198, 0, 76);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeliner-10 {
  background-color: rgba(2, 191, 255);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeliner-11 {
  background-color: rgba(153, 1, 134);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeliner-12 {
  background-color: rgba(62, 0, 51);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeliner-13 {
  background-color: rgba(28, 55, 72);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeliner-14 {
  background-color: rgba(175, 142, 86);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeliner-15 {
  background-color: rgba(4, 6, 7);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeliner-16 {
  background-color: rgba(69, 50, 45);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeliner-17 {
  background-color: rgba(162, 168, 174);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeliner-18 {
  background-color: rgba(3, 255, 255);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-1 {
  background-color: rgba(255, 0, 2);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-2 {
  background-color: rgba(24, 0, 255);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-3 {
  background-color: rgba(0, 155, 2);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-4 {
  background-color: rgba(255, 155, 1);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-5 {
  background-color: rgba(254, 255, 0);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-6 {
  background-color: rgba(255, 204, 207);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-7 {
  background-color: rgba(153, 1, 134);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-8 {
  background-color: rgba(255, 131, 244);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-9 {
  background-color: rgba(0, 226, 209);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-10 {
  background-color: rgba(255, 214, 2);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-11 {
  background-color: rgba(5, 255, 4);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-12 {
  background-color: rgba(0, 255, 255);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-13 {
  background-color: rgba(7, 1, 134);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-14 {
  background-color: rgba(255, 128, 77);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-15 {
  background-color: rgba(3, 129, 132);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-16 {
  background-color: rgba(194, 37, 40);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-17 {
  background-color: rgba(255, 255, 255);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-18 {
  background-color: rgba(0, 0, 0);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-19 {
  background-color: rgba(134, 75, 70);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-20 {
  background-color: rgba(231, 40, 125);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-21 {
  background-color: rgba(172, 76, 40);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-22 {
  background-color: rgba(182, 17, 89);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-23 {
  background-color: rgba(236, 113, 169);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-24 {
  background-color: rgba(236, 116, 138);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-25 {
  background-color: rgba(16, 110, 182);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-26 {
  background-color: rgba(250, 210, 207);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-27 {
  background-color: rgba(155, 215, 245);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-28 {
  background-color: rgba(210, 180, 169);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-29 {
  background-color: rgba(209, 121, 121);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-30 {
  background-color: rgba(167, 74, 103);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-31 {
  background-color: rgba(220, 172, 165);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-32 {
  background-color: rgba(149, 124, 116);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-33 {
  background-color: rgba(184, 150, 127);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-34 {
  background-color: rgba(206, 149, 140);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-35 {
  background-color: rgba(124, 91, 79);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-36 {
  background-color: rgba(22, 84, 94);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-37 {
  background-color: rgba(142, 123, 29);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-38 {
  background-color: rgba(204, 150, 189);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-39 {
  background-color: rgba(150, 32, 69);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-40 {
  background-color: rgba(194, 129, 52);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-41 {
  background-color: rgba(77, 76, 73);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-42 {
  background-color: rgba(164, 81, 114);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-43 {
  background-color: rgba(139, 28, 31);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-44 {
  background-color: rgba(135, 78, 75);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-45 {
  background-color: rgba(107, 28, 57);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-46 {
  background-color: rgba(150, 174, 194);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-47 {
  background-color: rgba(55, 79, 101);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-48 {
  background-color: rgba(148, 187, 113);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-49 {
  background-color: rgba(45, 81, 155);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-50 {
  background-color: rgba(167, 135, 180);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-51 {
  background-color: rgba(140, 52, 54);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-52 {
  background-color: rgba(191, 197, 188);
  opacity: 1;
  --render-opacity: 0.5;
}

#eyeshadow-multi-1 {
  background: linear-gradient(75deg, rgba(102, 173, 193, 0.65) 0%, rgba(102, 173, 193, 0.65) 33.3333%, rgba(20, 162, 210, 0.65) 33.3333%, rgba(20, 162, 210, 0.65) 66.6667%, rgba(48, 55, 83, 0.65) 66.6667%, rgba(48, 55, 83, 0.65) 100%) 0% 0% / contain no-repeat;
}

#eyeshadow-multi-2 {
  background: linear-gradient(75deg, rgba(246, 198, 178, 0.65) 0%, rgba(246, 198, 178, 0.65) 20%, rgba(210, 164, 164, 0.65) 20%, rgba(210, 164, 164, 0.65) 40%, rgba(101, 63, 54, 0.65) 40%, rgba(101, 63, 54, 0.65) 60%, rgba(225, 117, 189, 0.65) 60%, rgba(225, 117, 189, 0.65) 80%, rgba(246, 198, 178, 0.65) 80%, rgba(246, 198, 178, 0.65) 100%) 0% 0% / contain no-repeat;
}

#eyeshadow-multi-3 {
  background: linear-gradient(75deg, rgba(163, 120, 101, 0.65) 0%, rgba(163, 120, 101, 0.65) 50%, rgba(91, 97, 113, 0.65) 50%, rgba(91, 97, 113, 0.65) 100%) 0% 0% / contain no-repeat;
}

#eyeshadow-multi-4 {
  background: linear-gradient(75deg, rgba(227, 118, 171, 0.65) 0%, rgba(227, 118, 171, 0.65) 50%, rgba(115, 154, 153, 0.65) 50%, rgba(115, 154, 153, 0.65) 100%) 0% 0% / contain no-repeat;
}

#eyeshadow-multi-5 {
  background: linear-gradient(75deg, rgba(154, 145, 146, 0.65) 0%, rgba(154, 145, 146, 0.65) 50%, rgba(89, 78, 84, 0.65) 50%, rgba(89, 78, 84, 0.65) 100%) 0% 0% / contain no-repeat;
}

#eyeshadow-multi-6 {
  background: linear-gradient(75deg, rgba(221, 156, 199, 0.65) 0%, rgba(221, 156, 199, 0.65) 33.3333%, rgba(166, 117, 161, 0.65) 33.3333%, rgba(166, 117, 161, 0.65) 66.6667%, rgba(65, 45, 57, 0.65) 66.6667%, rgba(65, 45, 57, 0.65) 100%) 0% 0% / contain no-repeat;
}

#eyeshadow-multi-7 {
  background: linear-gradient(to right, rgba(236, 116, 138) 0%, rgba(236, 116, 138) 50%, rgba(255, 128, 77) 50%, rgba(255, 128, 77) 100%);
}

#eyeshadow-multi-8 {
  background: linear-gradient(to right, rgba(194, 129, 52) 0%, rgba(194, 129, 52) 50%, rgba(139, 28, 31) 50%, rgba(139, 28, 31) 100%);
}

#contour-color1 {
  background-color: rgba(187, 153, 134);
  opacity: 1;
  --render-opacity: 0.5;
}

#contour-color2 {
  background-color: rgba(184, 147, 108);
  opacity: 1;
  --render-opacity: 0.5;
}

#contour-color3 {
  background-color: rgba(161, 120, 100);
  opacity: 1;
  --render-opacity: 0.5;
}

#contour-color4 {
  background-color: rgba(112, 64, 50);
  opacity: 1;
  --render-opacity: 0.5;
}

#contour-color5 {
  background-color: rgba(125, 69, 44);
  opacity: 1;
  --render-opacity: 0.5;
}

#contour-color6 {
  background-color: rgba(162, 95, 66);
  opacity: 1;
  --render-opacity: 0.5;
}

#contour-color7 {
  background-color: rgba(205, 150, 125);
  opacity: 1;
  --render-opacity: 0.5;
}

#contour-color8 {
  background-color: rgba(99, 68, 53);
  opacity: 1;
  --render-opacity: 0.5;
}


#highlighter-color1 {
  background-color: rgba(233, 216, 240);
  opacity: 1;
  --render-opacity: 0.5;
}

#highlighter-color2 {
  background-color: rgba(215, 231, 219);
  opacity: 1;
  --render-opacity: 0.5;
}

#highlighter-color3 {
  background-color: rgba(255, 211, 191);
  opacity: 1;
  --render-opacity: 0.5;
}

#highlighter-color4 {
  background-color: rgba(254, 213, 189);
  opacity: 1;
  --render-opacity: 0.5;
}

#highlighter-color5 {
  background-color: rgba(245, 197, 165);
  opacity: 1;
  --render-opacity: 0.5;
}

#highlighter-color6 {
  background-color: rgba(233, 184, 153);
  opacity: 1;
  --render-opacity: 0.5;
}

#highlighter-color7 {
  background-color: rgba(242, 182, 157);
  opacity: 1;
  --render-opacity: 0.5;
}

#highlighter-color8 {
  background-color: rgba(216, 168, 134);
  opacity: 1;
  --render-opacity: 0.5;
}

#highlighter-color9 {
  background-color: rgba(233, 180, 158);
  opacity: 1;
  --render-opacity: 0.5;
}

#highlighter-color10 {
  background-color: rgba(250, 218, 163);
  opacity: 1;
  --render-opacity: 0.5;
}

#highlighter-color11 {
  background-color: rgba(187, 188, 238);
  opacity: 1;
  --render-opacity: 0.5;
}

#highlighter-color12 {
  background-color: rgba(242, 142, 121);
  opacity: 1;
  --render-opacity: 0.5;
}

#highlighter-color13 {
  background-color: rgba(212, 142, 108);
  opacity: 1;
  --render-opacity: 0.5;
}


.texture {
  margin: 10px 0;
}

.pattern {
  margin: 10px 0;
}

.maskbutton {
  border: 1px solid #212529;
  color: #212529;
  border-radius: 20px;
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 3px 13px 2px;
  font-size: 14px;
  cursor: pointer;
  background-color: #fff;
}

.mask-testing {
  display: flex;
  flex-wrap: wrap;
  /* Allow items to wrap to the next line */
  gap: 10px;
}

.mask-testing .mask-inner {
  border-radius: 8px;
  display: inline-block;
  cursor: pointer;
  border: 2px solid #ccc;
  padding: 2px;
  width: 70px;
  flex-shrink: 0;

}


/*.............banner styling............. */
.banner_button_group_eye {
  top: 13% !important;
}

.banner_button_group_eyelash {
  top: 27.1% !important;
}

.banner-button-border_eye {
  height: 170.2px !important;
}

.banner_button_group_eyeshadow {
  top: 20.8% !important;
}

.banner-button-border_eyeshadow {
  height: 142.2px !important;
}

.banner-button-border_eyelash {
  height: 132px !important;
}

.banner_button_group_highlight {
  top: 42.5% !important;
}

.banner_button_group_blush {
  top: 50.5% !important;
}

.banner_button_group_lipstick {
  top: 58.5% !important;
}

.banner-button-border_lipstick {
  height: 52.4px !important;
}

.banner-button-border_contour {
  height: 35.2px !important;
}

/* .......responsive banner....... */
@media screen and (max-width: 600px) {
  .banner_button_group_eye {
    left: calc(76% - 5.68286px) !important;
  }

  .banner-button-border_eye {
    height: 121.2px !important;
  }

  .banner-button-text_eye {
    margin-top: -29px !important;
  }

  .banner_button_group_eyeshadow {
    left: calc(76% - 5.68286px) !important;
  }

  .banner-button-border_eyeshadow {
    height: 100.2px !important;
  }

  .banner_button_group_eyelash {
    left: calc(76% - 5.68286px) !important;
  }

  .banner-button-text_eyelash {
    margin-top: -28px !important;
  }

  .banner-button-border_eyelash {
    height: 86px !important;
  }

  .banner-button-border_lipstick {
    height: 19.4px !important;
  }

  .banner-button-border_contour {
    height: 5.2px !important;
  }

  .banner_button_group_contour {
    left: calc(68% - 5.98286px) !important;
  }
}

.color_button.active {
  border: 3px solid #f7f7f7;
  outline: 2px solid var(--main-color-1);
}

.maskbutton.active {
  border-color: var(--main-color-1);
  color: var(--main-color-1);
}

.mask-inner.active {
  border-color: var(--main-color-1);
}

#eyeshadow_multi_color {
  gap: 5px;
}

@media only screen and (max-width: 1000px) {
  .pdp_container .pdp_main .pdp_left {
    width: 100%;
  }

  .pdp_container .pdp_main .pdp_right {
    width: 100%;
  }

  .pdp_container .pdp_main .pdp_right {
    padding: 0px 15px !important;
  }
}

.container-range-slider input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  background-color: transparent;
  padding: 25px 85px;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.container-range-slider input[type="range"]:focus {
  outline-color: #f8b195;
}

.container-range-slider input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  background: #f67280;
  background: -webkit-linear-gradient(left, rgba(246, 114, 128, 1) 0%, rgba(192, 108, 132, 1) 50%, rgba(53, 92, 125, 1) 100%);
  background: linear-gradient(to right, rgba(246, 114, 128, 1) 0%, rgba(192, 108, 132, 1) 50%, rgba(53, 92, 125, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f67280", endColorstr="#355c7d", GradientType=1);
}

.container-range-slider input[type="range"]::-moz-range-track {
  -moz-appearance: none;
  appearance: none;
  height: 3px;
  background: #f67280;
  background: -moz-linear-gradient(left, rgba(246, 114, 128, 1) 0%, rgba(192, 108, 132, 1) 50%, rgba(53, 92, 125, 1) 100%);
  background: linear-gradient(to right, rgba(246, 114, 128, 1) 0%, rgba(192, 108, 132, 1) 50%, rgba(53, 92, 125, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f67280", endColorstr="#355c7d", GradientType=1);
}

.container-range-slider input[type="range"]::-ms-track {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 3px;
  background: #f67280;
  background: -moz-linear-gradient(left, rgba(246, 114, 128, 1) 0%, rgba(192, 108, 132, 1) 50%, rgba(53, 92, 125, 1) 100%);
  background: -webkit-linear-gradient(left, rgba(246, 114, 128, 1) 0%, rgba(192, 108, 132, 1) 50%, rgba(53, 92, 125, 1) 100%);
  background: linear-gradient(to right, rgba(246, 114, 128, 1) 0%, rgba(192, 108, 132, 1) 50%, rgba(53, 92, 125, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f67280", endColorstr="#355c7d", GradientType=1);
}

.container-range-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border: 2px solid #f8b195;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  position: relative;
  bottom: 8px;
  background: #222 url("http://codemenatalie.com/wp-content/uploads/2019/09/slider-thumb.png") center no-repeat;
  background-size: 50%;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4);
  cursor: grab;
}

.container-range-slider input[type="range"]::-webkit-slider-thumb:active {
  cursor: grabbing;
}

.container-range-slider input[type="range"]::-moz-range-thumb {
  -moz-appearance: none;
  appearance: none;
  border: 2px solid #f8b195;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  position: relative;
  bottom: 8px;
  background: #222 url("http://codemenatalie.com/wp-content/uploads/2019/09/slider-thumb.png") center no-repeat;
  background-size: 50%;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4);
  cursor: grab;
}

.container-range-slider input[type="range"]::-moz-range-thumb:active {
  cursor: grabbing;
}

.container-range-slider input[type="range"]::-ms-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 2px solid #f8b195;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  position: relative;
  bottom: 8px;
  background: #222 url("http://codemenatalie.com/wp-content/uploads/2019/09/slider-thumb.png") center no-repeat;
  background-size: 50%;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4);
  cursor: grab;
}

.container-range-slider input[type="range"]::-ms-thumb:active {
  cursor: grabbing;
}

.full-looks-avatar {
  /* width: 20%;
  float: left;
  margin-right: 5%; */
  margin-top: 25px;
}

.full-looks-avatar.active {
  outline: 2px solid var(--main-color-1);
}

.tryonnix-shop-btn {
  padding: 18px 40px;
}

.navbar-header .logo {
  padding-top: 0 !important;
}

@media (min-width: 1025px) {
  .custom-breadcrumb {
    background-position: unset !important;
    background-size: cover !important;
  }
}

@media (min-width: 1200px) and (max-width: 2500px) {
  .header-title-breadcrumb-overlay {
    padding: 120px 0 120px !important;
  }
}

.custom-button {
  color: #ffffff;
  background-image: -webkit-gradient(linear, left top, right top, from(var(--main-color-2)), color-stop(51%, var(--main-color-1)), to(var(--main-color-2))) !important;
  background-image: linear-gradient(to right, var(--main-color-2) 0%, var(--main-color-1) 51%, var(--main-color-2) 100%) !important;
  padding: 18px 20px;
  font-size: 16px;
  text-align: center;
  text-transform: capitalize;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  background-size: 200% auto;
  color: white !important;
  -webkit-box-shadow: 0 0 20px #eee;
  box-shadow: 0 0 20px #eee;
  border-radius: 50px;
  display: block;
  width: 65%;
  margin: 10px auto 20px auto;
}

.custom-button:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
}

.custom-head-style {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.wpb_custom_single_image img {
  width: 270px !important;
  height: 300px !important;
}

.cf-mega-menu p {
  margin: 0 !important;
}

#Tracking p,
#Analysis p,
#Rendering p {
  color: white !important;
}


@media (max-width: 768px) {
  .grid-box {
    width: auto !important;
  }

  .vto {
    background-position: right !important;
  }

  .tryon-media-menu {
    margin-bottom: 15px !important;
  }

  .pdp_container .pdp_main .pdp_left .left_pdp_image img {
    height: auto !important;
    width: 100%;
  }

  .pdp_custom_button {
    padding: 18px 25px;
    width: 160px;
    margin-right: 15px;
  }

  .pdp_container .pdp_main .pdp_left .left_pdp_image {
    width: 100% !important;
    padding-left: 0 !important;
  }

  .pdp_container .pdp_main .pdp_left {
    width: 100% !important;
  }

  .navbar ul li ul.sub-menu {
    background-color: white !important;
  }

  .pdp_custom_button {
    padding: 18px 15px !important;
  }

  .tryon-type-btn-group {
    width: 85%;
  }

  .header-title-breadcrumb .header-title-breadcrumb-overlay h1 {
    font-size: 40px;
  }

  .content-section h2 {
    font-size: 40px;
  }

  .color_button {
    width: 40px;
    height: 40px;
  }

  .extra-remove-sp {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html>body .fs-main-hero-slider {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }

  .slider_heading {
    font-size: 40px;
  }

  .header1 .header-block-info-mobile .header-infos {
    display: block !important;
  }

  .header-block-info-mobile .pull-left.header-info-group:first-of-type {
    display: none !important;
  }

  .header1 .header-block-info-mobile .header-infos {
    margin-bottom: 0 !important;
    border: 0 !important;
    margin-top: 0 !important;
  }

  .logo img,
  .navbar-header .logo img {
    min-width: 200px !important;
  }

  .header .navbar-toggle {
    margin-top: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  body .navbar-header .logo {
    margin: 0px 0px !important;
  }

  .logo img,
  .navbar-header .logo img {
    max-width: 200px;
  }

  .slider_left_slide_2 {
    width: 100% !important;
  }

  .foundation_finder_content_slider {
    width: 100%;
  }

  .custom-slider_left {
    width: 100%;
  }

  .banner_hair_shades {
    gap: 0 !important;
  }

  .custom-slider_right {
    width: 100% !important;
  }

  .content-product {
    width: 100% !important;
    gap: 20px !important;
    justify-content: flex-start !important;
  }

  .fs-perfect-slider-section .fs-text-container img {
    width: 50px !important;
    height: 50px !important;
  }

  .pd-content {
    text-align: left !important;
  }

  html>body .fs-footer .footer-top .row .footer-row-2 .sidebar-2 ul.menu li {
    width: 30% !important;
  }

  html>body .fs-footer .footer-top .row .footer-row-2 .sidebar-2 ul.menu li a {
    font-size: 14px !important;
  }

  .footer-row-2 {
    padding-top: 20px !important;
  }

}

@media only screen and (min-width: 1100px) {
  html>body header.header1 #navbar .menu-item ul.sub-menu {
    display: block !important;
  }

  .pull-left {
    float: unset !important;
  }

  .navbar-header .logo {
    margin: 0 !important;
  }
}

header.header1 #navbar .menu-item:last-child {
  border-right: none !important;
  border-left: none !important;
}

.custom-make h1 {
  font-size: 0 !important;
}

.custom-breadcrumb {
  width: 100%;
}

/* .mt-icon-listgroup-holder {
  height: 280px;
} */

.pdp_btn {
  flex-wrap: wrap;
}

#vto-shop-button {
  display: flex;
  align-items: center;
}

.pdp_left .slick-arrow {
  display: none !important;
}

#case-btn:hover {
  color: #999999 !important;
  border: 1px soild #999999 !important;
}

#case-study-section .title-subtile-holder .section-title {
  color: #03a0aa !important;
  font-size: 28px !important;
  margin: 20px 0 !important;
}

#case-study-section .text_left .section-subtitle {
  color: black !important;
  font-size: 20px !important;
}

/* ............cosmetic try-on.......... */
.tab-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.wp-100 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.wp-50 {
  width: 50%;
}


/* .............. */
.virtual-tryon-section {
  /* background-image: url('../cos-tryon-images/virtual-banner.png'); */
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.vir-baner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.virtual-head-wrapper .vir-head {
  font-size: 45px;
  color: white;

}

.virtual-head-wrapper .vir-head span {
  color: #15B2BC !important;
  font-size: 55px;
}

.virtual-head-wrapper .vir-discription {
  color: #fff;
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.8;
  font-weight: 700;
}

.virtual-video-sec video {
  width: 100%;
}

.tab-makeups {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

}

.tab-makeups-left {
  width: 40%;
  border-radius: 15px;
}

.tab-makeups-right {
  width: 60%;
  padding: 0 50px 0 50px;
}

.tab-makeups-left img {
  width: 100%;
  border-radius: 15px;
  margin-bottom: 0 !important;
}

.How_work_section {
  background: linear-gradient(90deg, rgb(214, 211, 211) 8%, rgb(3 160 170 / 58%) 26%,
      rgb(2 160 169 / 76%) 45%, #03a0aac2 61%, #03a0aaeb 71%);
  padding: 100px 0;
}

.makup-tabs-section {
  background: white;
  border-radius: 15px;
  padding: 50px;
}

.makup-tabs-section h2 {
  margin: 10px auto 20px auto !important;
}

.tab button.active::before,
.tab button:hover::before {
  background-color: var(--main-color-1) !important
}

.cosmetics-page-banner {
  width: 120% !important;
  max-width: 120% !important;
  position: relative;
  top: -88px;
}


.lbl-hiw-tab-foundation-pattern {
  color: var(--main-color-1) !important;
}

.lbl-hiw-tab-contour-pattern {
  color: var(--main-color-1);
}

.lbl-hiw-tab-highlighter-pattern {
  color: var(--main-color-1);
}

.lbl-hiw-tab-blush-multi-color {
  color: var(--main-color-1);
}

.lbl-hiw-tab-lipstick-texture {
  color: var(--main-color-1);
}

.lbl-hiw-tab-lipliner-patterns {
  color: var(--main-color-1);
}

.lbl-hiw-tab-eyeliner-multi-color {
  color: var(--main-color-1);
}

.lbl-hiw-tab-eyebrow-texture {
  color: var(--main-color-1);
}

.lbl-hiw-tab-eyelash-custom-application-type {
  color: var(--main-color-1);
}

.lbl-hiw-tab-eyeshadow-multi-color {
  color: var(--main-color-1);
}

.lbl-hiw-tab-eyeshadow-texture {
  color: var(--main-color-1);
}

.lbl-hiw-tab-bronzer-patterns {
  color: var(--main-color-1) !important;
}

.lbl-hiw-tab-concealer-finishes {
  color: var(--main-color-1);
}

.lbl-ba-section-multi-color-feature {
  color: var(--main-color-1);
}

.lbl-ba-section-multi-color-icon {
  color: var(--main-color-1);
  font-size: 13px !important;
}

.lbl-ba-section-multi-color-key-feature {
  color: var(--main-color-3);
  font-size: 20px;
  float: left;
  width: 100%;
  padding-bottom: 20px;
}

.container-section-why-choose-us .mt-icon-listgroup-title {
  font-size: 20px !important;
}

.container-section-why-choose-us .mt-icon-listgroup-title a {
  color: var(--main-color-1) !important;
}

.container-section-why-choose-us .custom_heading {
  font-size: 41px;
  color: #2d1150;
  line-height: 45px;

}
.custom-heading-easy-accessibility{
  font-size:34px !important;
}
.cusomt-description-foundation-finder
{
  color: black !important;
  font-weight: 400 !important;
}
.virtual-head-wrapper
{
  padding: 100px 0;
}
.step_heading{
 font-size: 27px !important;
 color: var(--main-color-1) !important;
}
.content-style{
  color: black !important;
    font-weight: 400 !important;
   font-family:'Alata', sans-serif !important;
    line-height: 25px;
    font-weight: 400;
    color: #4c4c4c;
    font-size: 16px;
}
.section-exp-title{
  font-size:30px !important;
}
/* .............Vto styling........... */
.vto-check-buttons{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.vto-check-buttons button{
  width: 155px !important;
  border-radius: 30px;
}

.vto{
  padding: 30px 0  65px 0;
}
.tryon-i-accept-p1{
  letter-spacing: 1px;
}
.tryon-i-accept-p1 label{
  letter-spacing: 2px;
}
.container-tryon-media{
  border: none !important;
}
.vittual-back-icon{
  background-color: white;
  height: 25px;
}
html.do-anim .animation .image--animate .image__img, html.do-anim .animation .image--animate .video, html.do-anim .animation .video-wrapper--animate .image__img, html.do-anim .animation .video-wrapper--animate .video {
  opacity: 1 !important;
}
@media (min-width: 320px) and (max-width: 575.98px) {
  .tryon-type-btn-group{
    width: 100%;
  }
  .aa{
    width: 90%;
    margin: 0 auto;
  }
  .last{
    width: 90%;
  }
 }
 @media (min-width: 576px) and (max-width: 767.98px) {
  .tryon-type-btn-group{
    width: 100%;
  }
  .aa{
    width: 90%;
    margin: 0 auto;
  }
  .last{
    width: 90%;
  }
  }
  @media (min-width: 768px) and (max-width: 1024px) {
    .tryon-type-btn-group{
      width: 100%;
    }
   }