/*** uncss> filename: includes/css/page/character-creation.css ***/
/*------------------------------------*\
            default.css
\*------------------------------------*/
/*
    * General.....................General use
    * free-bone
    * character-composer
    * template-bone
    * motion-library
    * single-multi-angle
    * Media Query.................RWD Setting
*/





/*------------------------------------
            $General
------------------------------------*/
.mobile-divider{
    background-image: url('../../images/media/Character/li.png');
    width: 100%;
    min-height: 3px;
}





/*------------------------------------
            $free-bone
------------------------------------*/
.free-bone .character-rig > p{
    max-width: 49.36703%; 
    margin: 0 auto; 
    margin-right: 9%;
}





/*------------------------------------
        $character-composer
------------------------------------*/
.character-composer{ background-color: #bedfeb; }
.character-composer .view-manual a{ color: #31657a; }
.character-composer .view-manual a:hover,
.character-composer .view-manual a:active,
.character-composer .view-manual a:active:focus,
.character-composer .view-manual a:focus{ color: #31657a; }
.character-composer .layer-order-manager > img,
.character-composer .custom-sprite-editing > img{ margin-bottom: 30px; }

.character-composer .rl-btn-border{
    border: 2px solid #31657a;
    color: #31657a;
}
    .character-composer .rl-btn-border:hover,
    .character-composer .rl-btn-border:active,
    .character-composer .rl-btn-border:active:focus{
        background-color: #31657a !important;
        border: 2px solid #31657a;
        color: #fff !important;
    }
    .character-composer .rl-btn-border:focus{
        background-color: transparent;
        border: 2px solid #31657a;
        color: #31657a;
    }





/*------------------------------------
            $template-bone
------------------------------------*/
.template-bone,
.template-bone .bone-bg{
    /*background-color: #bedfeb;*/
    background-size: cover;
    background-position: 50% 0%;
    background-repeat: no-repeat;
    height: 58vw;
    position: relative;
    width: 100%;    
}
.template-bone{ background-image: url("../../images/features/2D character character/Character.jpg"); }
.template-bone .bone-bg{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    cursor: pointer;
}

.template-bone .text-wrapper{ width: 70%; margin: 0 auto; }
.template-bone .text-md.title{ margin-top: calc( 32px + 2.5vw ); }
.template-bone .bubble-message{  
    /* cursor: pointer; */
    position: absolute;
    padding: calc( 9px + 0.3125vw ) calc( 8px + 0.625vw ); /*15-10, 20-10*/ 
    /*-webkit-transition: all 0.4s ease-out;
		    transition: all 0.4s ease-out;*/
}
.template-bone .bubble-message > p{  font-size: 16px; }
.template-bone .bubble-message.animal{ left: 5vw; bottom: 30%; }
.template-bone .bubble-message.human{ left: 36.4583vw; /*32.3958vw*/ top: 34%;  max-width: 20%; }
.template-bone .bubble-message.spine{ left: 66.6666vw; top: 40%; min-width: 175px; }
.template-bone .bubble-message.wings{ left: 82vw; top: 34%; min-width: 175px; }
.template-bone .bubble-message p.title{ font-weight: 350; }

.template-bone .bubble-message.animal p.desc,
.template-bone .bubble-message.human p.desc,
.template-bone .bubble-message.spine p.desc,
.template-bone .bubble-message.wings p.desc{
    display: none;
    width: 0;
    height: 0;
    text-align: center;
}



.character-template {
    width: 83%;
}

/*------------------------------------
        $motion-library
------------------------------------*/
.motion-library .text-wrapper{ width: 60%; margin: 0 auto; }
.human-library{ top: -50px; }
.human-library-demo{
    position: absolute; 
    bottom: 1.04166vw; 
    right: 36px;
}
.motion-library .highlight{
    color: #dc6c6d;
    font-size: calc( 16.8px + 0.375vw );
    font-weight: bold;
    margin-bottom: 10px;
    width: 100%; 
}

.human-library .text-wrapper{
    width: 100%;
    /*max-width: 67.7536%;*/
    max-width: 60.5072%;
    margin: 0 auto;
    margin-left: 31.88405%;
    position: absolute;
    top: 5.2083vw;
}
.human-library p.comment-bottom{
    width: 100%;
    max-width: 60.507246%;
    margin: 0 auto;
    margin-left: 39.13043%;
    position: absolute;
    bottom: 4.16666vw;
}
 
.animation-library .text-wrapper{ 
    width: 100%;
    max-width: 37.7604%;
    margin: 0 auto;
    margin-left: 19.53125%;
    text-align: left;
    position: absolute;
    top: 20%;
}
.animation-library-demo{
    position: absolute; 
    bottom: 6.25vw; 
    left: 13.541666vw;
}

.spine-library .text-wrapper{ 
    width: 100%;
    max-width: 61.5942%;
    margin: 0 auto;
    margin-left: 33.3333%;
    position: absolute;
    top: -14%;
    /*right: 30%;*/
}
.spine-library p.comment-bottom{
    width: 100%;
    max-width: 60.86956%;
    margin: 0 auto;
    margin-left: 39.1304%;
    position: absolute;
    bottom: -12%;
}   
.spine-library-demo-a{
    position: absolute; 
    bottom: 0; 
    right: 15px;
}
.spine-library-demo-b{
    position: absolute; 
    bottom: 1.04166vw; 
    right: 30px;
}

.free-bone-replacement .text-wrapper,
.accessories .text-wrapper {
    width: 85%; 
    margin: 0 auto; 
}
.free-bone-replacement .popup-youtube { display: inline-block; }

/* .accessories{
    background-color: #f3d8be;
    position: relative;
}
.accessories .description{
    position: absolute;
    top: 0;
} */
.accessories button{ float: right; }
.accessories .assemble-accessories { 
    text-align: left;
    position: absolute; 
    left: 1.06382978%; /*15px*/
    top: 16.8383518%; /*85px*/
}
.accessories .group-animation,
.accessories .individual-animation {
    max-width: 20%; /*20%*/
    text-align: left;
    position: absolute;
    left: 78.723404%; /*1110px*/
}
.accessories .group-animation .title,
.accessories .individual-animation .title { font-weight: bold; }
.accessories .group-animation p,
.accessories .individual-animation p { font-size: 0.9375vw; /*18px*/ }
.accessories .group-animation {
    top: 44.9866%; /*215px*/
}
.accessories .individual-animation {
    top: 80.7666655%; /*386px*/
}

.quick-perform-list .text-wrapper{ 
    width: 70%; 
    margin: 0 auto; 
    margin-bottom: calc( 16px + 1.25vw );  /*40*/ 
}

/*------------------------------------
       override slick style
------------------------------------*/

#feature-slick-tab.slick-tab-initialized .slick-tab-slide {
    background-color: white;
    color: #4d4d4d;
    font-weight: 300;
    font-size: 24px;
}
#feature-slick-tab.slick-tab-initialized .slick-tab-slide:hover {
    background-color: white;
    color: #ff9192;
    text-decoration: underline;
}

/* #feature-slick-tab.slick-tab-initialized .slick-tab .slick-tab-slide.slick-slide {
    color: black;
} */

#feature-slick-tab.slick-tab-initialized .slick-tab .slick-tab-slide.current-tab {
    color: #ef6e6f;
    font-weight: 500;
}

#feature-slick-tab.slick-tab-initialized .slick-tab .slick-tab-slide .mark {
    position: relative;
    display: inline-block;
    width: 25px;
    background-color: white;
}

#feature-slick-tab.slick-tab-initialized .slick-tab .slick-tab-slide.current-tab .mark {
    transform: rotate(90deg);
}

#feature-slick-tab.slick-tab-initialized .arrow-icon-wrapper {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: rgba(98, 98, 98, 0.8);
    height: calc(0.8750000000000001vw + 27.2px);
    width: calc(0.8750000000000001vw + 27.2px);
    position: absolute;
    top: 50%;
    bottom: 0;
    transform: translate(0, -50%);
    z-index: 10;
    color: white;
}

#feature-slick-tab.slick-tab-initialized .slick-disabled .arrow-icon-wrapper {
    background-color: rgba(98, 98, 98, 0.4);
    cursor: auto;
}

#feature-slick-tab.slick-tab-initialized .slick-tab-arrow-next .arrow-icon-wrapper {
    right: 15px;
}

#feature-slick-tab.slick-tab-initialized .slick-tab-arrow-prev .arrow-icon-wrapper {
    left: 15px;
}

#feature-slick-tab .tab-description {
    padding-right: 22%;
}

.slick-dotted.slick-slider {
    margin-bottom: 0px;
}

.slick-dots {
    bottom: 15px;
}

/*------------------------------------
        $single-multi-angle
------------------------------------*/
.single-multi-angle{ background-color: #bfdc95; }
.single-multi-angle .description{ width: 70%; }
.single-multi-angle button{ float: right; }
    .single-multi-angle .rl-btn-border{
        border: 2px solid #3e5c0d;
        color: #3e5c0d;
    }
    .single-multi-angle .rl-btn-border:hover,
    .single-multi-angle .rl-btn-border:active,
    .single-multi-angle .rl-btn-border:active:focus{
        background-color: #3e5c0d !important;;
        border: 2px solid #3e5c0d;
        color: #fff !important;;
    }
    .single-multi-angle .rl-btn-border:focus{
        background-color: transparent;
        border: 2px solid #3e5c0d;
        color: #3e5c0d;
    }





/*------------------------------------
            $Media Query
------------------------------------*/
@media screen and (max-width: 1440px) {
    /*------------------------------------
                $template-bone
    ------------------------------------*/
    .template-bone .bubble-message.human { 
        left: 32vw; 
        top: 40%; 
    }
}

@media screen and (max-width: 1280px){
    /*------------------------------------
                $template-bone
    ------------------------------------*/
    .template-bone .bubble-message.spine{ left: 66.6666vw; top: 45%; }
    .template-bone .text-md.title{ margin-top: 30px; }

    /*------------------------------------
            $motion-library
    ------------------------------------*/
    .motion-library .highlight{ margin-bottom: 0; }
    .spine-library-demo-b{ bottom: 20; }
}

@media screen and (max-width: 991px){
    /*------------------------------------
                $template-bone
    ------------------------------------*/
    .template-bone { background-image: none;}

    /*------------------------------------
            $motion-library
    ------------------------------------*/
    .motion-library .text-wrapper{ width: 80%; }
    .motion-library .human-library-wrapper { margin-bottom: 0; }
    .motion-library .highlight{ text-align: center; }
    
    .human-library{ top: 0; }
    .human-library .text-wrapper{ 
        width: 100%;
        max-width: 100%;
        margin: 0 auto; 
        position: static; 
        text-align: center;
    }
    .human-library p.comment-bottom{
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        position: static;
        text-align: center;
    }
    .human-library-demo,
    .animation-library-demo,
    .spine-library-demo-a,
    .spine-library-demo-b{     
        display: inline-block;
        position: static; 
    }

    .animation-library{ background-color: #f3d7c1;}
    .animation-library .text-wrapper{ 
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        position: static;
    }

    .spine-library .text-wrapper{ 
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        position: static;
        text-align: center;
    }

    .spine-library p.comment-bottom{
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        position: static;
        text-align: center;
    }   

    .free-bone-replacement .popup-youtube { float: none; text-align: center; }    

    .accessories .description{
        position: static;
    }
}

@media screen and (max-width: 767px){
    /*------------------------------------
                $free-bone
    ------------------------------------*/
    .free-bone .character-rig > img{ position: relative; left: calc(-10.416666vw); }
    .free-bone .character-rig > p{ max-width: 100%;  }

    /*------------------------------------
            $character-composer
    ------------------------------------*/
    .character-composer .layer-order-manager > img,
    .character-composer .custom-sprite-editing > img{ margin-bottom: 0; }
    .template-bone {
        height: unset;
    }

    .character-template {
        width: 100%;
    }

    /*------------------------------------
            $motion-library
    ------------------------------------*/
    .motion-library .text-wrapper,
    .quick-perform-list .text-wrapper,
    .single-multi-angle .description,
    .free-bone-replacement .text-wrapper,
    .accessories .text-wrapper { width: 100%; }
    .accessories .assemble-accessories { 
        text-align: left;
        left: 15px;
        top: initial;
        bottom: 24.771838vw; /*190px*/
    } 
    .accessories .group-animation p,
    .accessories .individual-animation p { font-size: 2.34375vw; /*18px*/ }
    .accessories .group-animation,
    .accessories .individual-animation {
        max-width: 80%;
        left: 15px; 
    }
    .accessories .group-animation {
        top: initial;
        bottom: 11.734028vw; /*90px*/
    }
    .accessories .individual-animation {
        top: initial;
        bottom: calc(7.366071428571429vw + -41.57142857142857px); /*768:15px - 320:-18px*/
    }

    #feature-slick-tab .tab-description {
        padding-right: 10%;
        padding-left: 10%;
    }

}

@media screen and (max-width: 400px){
    .accessories .assemble-accessories { display: none; }
}

@media screen and (min-width: 960px) and (max-width: 1440px){
    .template-bone-text {
        padding-top:0;
        padding-bottom:0;
    }
}