/* common  */
 .hair-icon {
    width: calc(4.6875vw + 25px); /*1920~320 115~65px */
}

.hair-icon-sm {
    width: calc(1.5625vw + 35px); /*1920~320 65~40px */
}

.rl-declareBoard-header .title.rl-color-cc {
    color: #82be0f;
}

.rl-declareBoard-header.rl-declareBoard-header-have-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rl-declareBoard-header.rl-declareBoard-header-have-icon .title {
    margin-left: calc(1.875vw + 4px); /*1920~320 40~10px*/
}

.hair-system-subtitle {
    display: flex;
    align-items: center;
}

.hair-system-subtitle img {
    margin-right: 10px;
}

.hair-system-subtitle div {
    margin-left: calc(0.9375vw + -3px); /*1920~320 15~0px */
}

.visible-768-1440 {
    display: none;
}

.background-color-dark-gray-101415 {
    background-color: #101415;
}

.rl-play-wrapper.center-shader-effects-mobile {
    top: 67%;
}

.rl-play-wrapper.right-bottom {
    right: 2vw;
    bottom: 1vw;
    left: auto;
    top: auto;
}

.rl-play-wrapper.left-bottom {
    left: calc(20px + 2vw);
    bottom: calc(10px + 0vw);
    right: auto;
    top: auto;
}

@media screen and (min-width: 768px) and (max-width: 1440px) {
    .visible-768-1440 {
        display: block;
    }
}

.visible-min-1440 {
    display: block;
}

@media screen and (max-width: 1440px) {
    .visible-min-1440 {
       display: none;
    }
}

@media screen and (max-width: 767px) {
    .rl-button-border-more {
        padding-top: calc(0.4464285714285714vw + 4.571428571428571px);
        padding-bottom: calc(0.4464285714285714vw + 4.571428571428571px);
    }

    .rl-play-wrapper.left-bottom {
        left: 50%;
        bottom: 50%;
        right: auto;
        top: auto;
    }

    .rl-play-wrapper.right-bottom {
        left: 50%;
        top: 50%;
        right: auto;
        bottom: auto;
    }
}

/* main-banner */
.main-banner-title-img {
    width: calc(6.25vw + 75px); /*1920~320 195~95px*/
    opacity: 60%;
}

.banner-description {
    position: absolute;
    bottom:10px;
    color: gray;
}

.bullet {
    border-left: 10px solid #82be0f;
    margin-right: 10px;
}
  
#bg-video {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    min-width: 1530px;
    height: 36.4583vw;
    min-height: 600px;
    pointer-events: none;
}

#bg-video iframe {
    width: 100vw;
    min-width: 1632px;
    height: 36.4583vw;
    min-height: 600px;
    position: absolute;
}

.rl-banner-other {
    min-height: 500px;
    background-image: url(../../images/features/hair/hair-system-main.jpg)
}

.main-banner {
    overflow: hidden; 
    height: 36.4583vw;
    min-height: 600px;
}

@media screen and (max-width: 1279px) {
     #bg-video {
        right: -250px;
    }
}

@media screen and (max-width: 1165px) {
    .main-banner {
        min-height: 640px;
    }
    #bg-video iframe {
        min-height: 683px;
    }
}

@media screen and (max-width: 991px) {
    .main-banner {
        min-height: calc(-49.3273vw + 1108.8340px); /*991~768 620~730px*/
    }

    #bg-video iframe {
        min-height: calc(-101.3452vw + 1648.3318px); /*991~768 644~870px*/
    }
}

@media screen and (max-width: 767px) {
    .main-banner,
    #bg-video iframe  {
        min-height: 600px;
    }

    #bg-video {
        display: none;
    }

    .rl-banner-other{
        background-position: center;
        background-image: url(../../images/features/hair/hair-system-main-mobile.jpg);
    }

    .main-banner {
        height: initial;
        min-height: initial;
    }

    .main-banner .banner-description {
        position: unset;
        margin-bottom: 10px;
    }
}

/* component-design */
.component-design-head {
    background-color: #1f2525;
}

.component-design-body {
    background-color: #3c4144;
}

/* hair-shader-head */
.hair-shader-head {
    background-color: #3c4144;
    background-position: center;
    background-size: cover;
    background-image: url(../../images/features/hair/hair-system-Overall-Texture-Maps.jpg);
}

@media screen and (max-width: 767px) {
    .hair-shader-head {
        background-image: none;
    }
}

.hair-shader-body {
    background-color: #3c4144;
}

.hair-shader-body .rl-play-wrapper.right-bottom {
    right: calc(20px + 2vw);
    bottom: calc(10px + 4vw);
    left: auto;
    top: auto;
}

.hair-shader-root-end-color > div > div {
    background-position: 90%;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../../images/features/hair/hair-system-Shader-Effects-root-color.jpg);
}

.hair-shader-highlight-color > div > div {
    background-position: 90%;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../../images/features/hair/hair-system-Shader-Effects-Highlight-Color.jpg);
}

.hair-shader-base-color .twentytwenty-wrapper {
    min-width: 535px;
}

.hair-shader-reflection > div > div {
    background-position: 90%;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../../images/features/hair/hair-system-Shader-Effects-Reflection.jpg);
}

@media screen and (max-width: 1198px) {
    .hair-shader-base-color .twentytwenty-wrapper {
        min-width: 50%;
    }
}

@media screen and (max-width: 1055px) {
    .hair-shader-base-color .twentytwenty-wrapper {
        min-width: 55%;
    }
}

@media screen and (max-width: 815px) {
    .hair-shader-base-color .twentytwenty-wrapper {
        min-width: 64%;
    }
}

@media screen and (max-width: 767px) {
    .hair-shader-root-end-color > div > div {
        background-image: none;
    }

    .hair-shader-highlight-color > div > div {
        background-image: none;
    }

    .hair-shader-reflection > div > div {
        background-image: none;
    }
}

/*designed-for-performance*/
.designed-img {
    position: absolute; 
    bottom: 0px; 
    max-height: 100%
}

@media screen and (max-width: 767px) {
    .designed-img {
        position: unset; 
    }

    .flex-mobile-column-reverse {
        flex-direction: column-reverse !important;
    }
}

/*recommended-content-pack */
.recommended-content-pack {
    background-image: url(../../images/features/hair/bg.jpg);
     background-size: cover;
}