/* common */
h1, h2 {
    display : inline
}

#text-banner {
    display: none;
}
button.principles-btn {
    padding: 4px 10px;
    transition: all 0.17s ease-in-out;
    margin: 10px 5px;
}

.rl-button-default .fa-angle-right, .rl-btn-more .fa-angle-right, .rl-button-border .fa-angle-right {
    font-size: inherit;
    margin-left: 10px;
}

.w-194 {
    min-width: 194px;
}

.w-245 {
    min-width: 245px;
}

.w-240 {
    min-width: 240px;
}

.font-divider {
    border-left: 4px solid #b3aca6;
    margin-right: 10px;
    margin-left: 10px;
}

.font-divider-sm {
    border-left: 2px solid #b3aca6;
    margin-right: 5px;
    margin-left: 5px;
}

.play-right-bottom {
    bottom: 7%;
    right: 5%;
    top: initial;
    left: initial;
}

@media screen and (max-width: 768px) {
    .play-right-bottom {
        bottom: initial;
        right: initial;
        top: 50%;
        left: 50%;
    }
}

.rl-play-wrapper__sm {
    width: calc(55px + 1.5vw);
    height: calc(55px + 1.5vw);
}

.notice {
    font-size: 16px;
    margin-left: 7px;
}

/*main-banner*/
.main-banner {
    background: url("../../images/principles/main.jpg");
    background-size: cover;
    background-position: 73%;
    position: relative;
}

.main-banner img {
    max-width: 100%;
}
.main-banner img:first-child {
    margin-right: 20px;
}

.main-banner-title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: calc(1.875vw + 41px); /*1920~1440 77px~68px*/
}

.main-banner-subtitle {
    font-size: 41px;
}

.main-banner-list {
    background-color: #490037;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding-right: calc(6.25vw + -70px); /*1920~1440 50~20px*/
    padding-left: calc(6.25vw + -70px); /*1920~1440 50~20px*/
    margin: 0;
}

.main-banner-list > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 438px;
    height: 100%;
    margin: 0;
}

.main-banner-list .button-wrapper {
    max-width: 408px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.main-banner-list .button-wrapper button {
    width: 400px;
}

@media screen and (max-width: 1440px) {
    .main-banner-list {
        position: initial;
        max-width: 100%;
        padding-right: 0px;
        padding-left: 0px;
    }

    .main-banner-list > div {
        margin: 0 4.17%;
        width: 100%;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .main-banner-list .button-wrapper {
        justify-content: flex-start;
    }

    .main-banner-list .button-wrapper button {
        width: 323px;
    }
}

@media screen and (max-width: 991px) { 
    .main-banner-list > div {
        margin: 0 auto;
    }
}

@media screen and (max-width: 768px) { 
    .main-banner {
        background: url("../../images/principles/main_mobile.jpg");
        background-size: cover;
        background-position: 50%;
    }

    .main-banner > div:first-child {
        padding-top: calc(41.294642857142854vw + -87.14285714285714px); /*768~320 230~45px */
        padding-bottom: 30px;
    }
    
    .main-banner img{
        width: calc(9.375vw + 60px);
    }

    .main-banner-title {
        font-size: calc(7.366071428571429vw + 11.428571428571429px);
    }

    .main-banner-subtitle {
        font-size: calc(2.9017857142857144vw + 18.714285714285715px); /*768~320 41~28px*/
    }
}

@media screen and (max-width: 480px) { 
    .main-banner-list .button-wrapper {
        justify-content: center;
    }
    
    .main-banner-list .button-wrapper button {
        width: 205px;
    }
}


/*principles-img-wrapper*/
.principles-img-wrapper  {
    display: flex;
    justify-content: space-around;
}

.principles-img-wrapper > div {
    display: flex;
    flex-direction: column;
    max-width: 100px;
    text-align: center;
}

.principles-img-wrapper > div > div {
    height: 100px;
    display: flex;
    align-items: center;
}

.principles-img-wrapper p {
    font-size: 14px;
}

@media screen and (max-width: 1440px) {  
    .principles-img-wrapper {
        flex-wrap: wrap;
    }

    .principles-img-wrapper > div {
        max-width: initial;
        width: calc(100% / 6);
    }
}

@media screen and (max-width: 768px) {  
    .principles-img-wrapper > div {
        width: 100px
    }
}

/*base-to-advanced*/
.base-to-advanced {
    background-color: #eae6e2;
}

@media screen and (max-width: 768px) {
    .base-to-advanced > div > div {
        text-align: center;
    }
}

/*tutor-and-12principles*/
.tutor-wrapper {
    background-color: #4e423f;
}

.tutor {
    color: #fff;
    display: grid;
    grid-template-columns: calc(100% * 300 / 1410) calc(100% * 80 / 1410) calc(100% * 1030 / 1410);
    grid-template-rows: auto auto;
    grid-template-areas:
        "headshot space intro"
        "headshot space content";
}

.tutor-headshot {
    grid-area: headshot;
    display: flex;
    align-items: center;
}

.tutor-headshot img {
    border-radius: 50%;
    border: 2px solid #fff;
}

.tutor-space {
    grid-area: space;
}

.tutor-intro {
    grid-area: intro;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tutor-intro img {
    max-height: 39px;
}

.tutor-intro img:first-child {
    margin-right: 30px;
}

.tutor-content {
    grid-area: content;
}   

.tutor-content a {
    font-weight: 700;
    text-decoration: underline;
    color: #fff;
}

.tutor-title {
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 991px) {  
    .tutor {
        grid-template-columns: calc(100% * 500 / 1410) calc(100% * 30 / 1410) calc(100% * 880 / 1410);
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "headshot space intro"
            "headshot space intro"
            "content content content";
    }

    .tutor-title { 
        flex-direction: column;
        text-align: center;
    }

    .tutor-title > div:first-child { 
        order: 2;
    }

    .tutor-title > div:last-child { 
        order: 1;
    }

    .tutor-intro {
        align-items: center;
        text-align: center;
     }
}

@media screen and (max-width: 575px) {  
    .tutor {
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "headshot"
            "space"
            "intro"
            "content";
    }

    .tutor-title { 
        align-items: center;
    }

    .tutor-intro img{
        display: block;
        width: calc(50% - 20px);
        height: auto;
        margin-right: 10px;
        margin-left: 10px;
    }

    .tutor-intro img:first-child {
        margin-right: 10px;
    }
}

.peinciples-of-animation {
    background-color: #e2dcd6;
}

.video-box-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.video-box {
    width: calc(100% * 322.5 / 1410)
}

.video-box-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

@media screen and (max-width: 1440px) {  
    .video-box {
        width: 30%;
    }
}

@media screen and (max-width: 991px) {  
    .video-box-wrapper {
        justify-content: space-around;
    }

    .video-box {
        width: 40%;
    }
}

@media screen and (max-width: 768px) {  
    .video-box-wrapper {
        justify-content: center;
    }

    .video-box {
        width: 100%;
    }
}

/* get-above-courses */
.get-above-courses {
    background: url("../../images/principles/for-FREE_img.jpg");
    background-size: cover;
    background-position: 43%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 370px;
}

.get-above-courses > div:first-child {
    max-width: 875px;
    width: 80%;
    text-align: center;
    line-height: 65px;
    font-weight: 900;
    font-size: 45px;
    color: #fff;
}

.get-above-courses > div:first-child i:first-child{
    font-weight: 900;
    font-size: 60px;
    color: #e8380d;
}

@media screen and (max-width: 768px) {  
    .get-above-courses {
        background: url("../../images/principles/for-FREE_img_mobile.jpg");
        background-size: cover;
        background-position: 50% 100%;
        height: 550px;
        align-items: center;
        justify-content: flex-start;
        padding-top: 30px;
    }

    .get-above-courses > div:first-child {
        font-size: 35px;
        line-height: initial;
        padding-bottom: 10px;
        width: 90%;
    }

    .get-above-courses > div:first-child i:first-child{
        font-size: 45px;
    }

    .get-above-courses > div:last-child {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* training-bundle */
.training-bundle {
    background-color: #f2f2f2;
}

.pack-img-wrapper {
    width: calc(100% * 645 / 1410);
    /*
    display: flex;
    align-items: center;
    */
}

.discount {
    display: flex;
    align-items: center;
    color: #ff9f00;
    font-size: 21px;
    font-weight: 400;
}

.discount img {
    margin-right: 5px;
}

.discount > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.discount > div > span {
    font-weight: 700;
}

.buy {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-end;
}

.store-price {
    margin-right: 30px;
    font-weight: 400;
    font-size: 32px;
}

.store-price > .list-price {
    font-size: 18px;
    text-decoration:line-through;
}

@media screen and (max-width: 768px) {
    .pack-img-wrapper {
        width: 100%;
    }

    .discount {
        flex-direction: column;
        justify-content: center;
    }

    .discount > div {
        justify-content: center;
    }

    .buy {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .store-price {
        margin-right: 0px;
    }
}



.free-trial {
    background-image: url("../../images/principles/free-trial-download.jpg");
    background-size: cover;
    background-position: 50%;
    padding-top: 35px;
    height: 400px;
    color: #fff;
}

.free-trial img {
   width: calc(3.4722222222222223vw + 523.3333333333334px); /*1920~768 590~550*/
}

.free-trial p {
    font-family: 'Montserrat', sans-serif;
    font-size: calc(0.9375vw + 32px);
    font-weight: 800;
}

.free-trial-title {
    font-weight: 900;
    font-size: calc(1.0416666666666665vw + 52px); /*1920~768 72~60px*/
    line-height: 76px;
}

@media screen and (max-width: 768px) {  
    .free-trial {
        background-image: url("../../images/principles/free-trial-download_mobile.jpg");
        padding-top: 0px;
        height: 580px;
        text-align: center;
    }

    .free-trial-title {
        font-size: calc(1.1160714285714286vw + 39.42857142857143px);
        line-height: initial;
    }
    .free-trial img {
        max-width: 300px;
        width: 100%;
        margin-bottom: 10px;
    }
}