/*------------------------------------*\
/*------------------------------------*\
            tutorial.css
\*------------------------------------*/
/*
    * General.....................General use
    * Media Query.................RWD Setting
*/

/*------------------------------------
            $General
------------------------------------*/
.rl-img-response {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.rl-flex-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.rl-text-center {
    text-align: center;
}

.rl-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
}

.rl-title-roboto {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: calc(1vw + 20.8px);
    line-height: 1.1;
}

.rl-text-md {
    font-size: calc(0.625vw + 48px);
    line-height: 1.1;
}

.rl-tutorial-theme-color {
    color: #e8380d;
}

/*------------------------------------
                  table icon
------------------------------------*/

/* table-icon */
.table-icon {
    position: relative;
    width: 14px;
    height: 14px;
    margin: 0 calc(35px / 2);
    cursor: pointer;

    /* Vertical line */
    /* horizontal line */
}

.table-icon:before, .table-icon:after {
    content: "";
    position: absolute;
    background-color: #787878;
    -webkit-transition: -webkit-transform 0.25s ease-out;
    transition: -webkit-transform 0.25s ease-out;
    transition: transform 0.25s ease-out;
    transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
}

.table-icon:before {
    top: -1px;
    left: 50%;
    width: 2px;
    height: 100%;
    margin-left: -1px;
}

.table-icon:after {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -2px;
}

.table-icon.click:before {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.table-icon.click:after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

/*------------------------------------
                  rl-card
------------------------------------*/

/*cols */

.rl-cards {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 auto;
}

.rl-cards > div {
    width: 100%;
}

.rl-column-2 > div {
    width: calc(100% / 2);
}

.rl-column-3 > div {
    width: calc(100% / 3);
}

.rl-column-4 > div {
    width: calc(100% / 4);
}

.rl-column-5 > div {
    width: calc(100% / 5);
}

.rl-column-6 > div {
    width: calc(100% / 6);
}

.rl-column-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* two-col */

.rl-column-space-7dot5 > div {
    padding-left: 7.5px;
    padding-right: 7.5px;
}

.rl-column-space-15 > div {
    /*15, 7.5*/
    padding-left: calc(0.5vw + 5.4px);
    padding-right: calc(0.5vw + 5.4px);
}

.rl-column-space-20 > div {
    /*20, 7.5*/
    padding-left: calc(0.8125vw + 4.4px);
    padding-right: calc(0.8125vw + 4.4px);
}

.rl-column-space-25 > div {
    /*25, 7.5*/
    padding-left: calc(1.125vw + 3.4px);
    padding-right: calc(1.125vw + 3.4px);
}

.rl-column-space-30 > div {
    /*30, 7.5*/
    padding-left: calc(1.4375vw + 2.4px);
    padding-right: calc(1.4375vw + 2.4px);
}

.rl-column-space2-wrapper {
    overflow: hidden;
}

.rl-column-space2-7dot5 {
    margin-left: -7.5px;
    margin-right: -7.5px;
}

.rl-column-space2-15 {
    margin-left: calc((0.5vw + 5.4px) * (-1));
    margin-right: calc((0.5vw + 5.4px) * (-1));
}

.rl-column-space2-20 {
    margin-left: calc((0.8125vw + 4.4px) * (-1));
    margin-right: calc((0.8125vw + 4.4px) * (-1));
}

.rl-column-space2-25 {
    margin-left: calc((1.125vw + 3.4px) * (-1));
    margin-right: calc((1.125vw + 3.4px) * (-1));
}

.rl-column-space2-30 {
    margin-left: calc((1.4375vw + 2.4px) * (-1));
    margin-right: calc((1.4375vw + 2.4px) * (-1));
}

.rl-column-space2-7dot5 > div {
    padding-left: 7.5px;
    padding-right: 7.5px;
}

.rl-column-space2-15 > div {
    padding-left: calc(0.5vw + 5.4px);
    padding-right: calc(0.5vw + 5.4px);
}

.rl-column-space2-20 > div {
    padding-left: calc(0.8125vw + 4.4px);
    padding-right: calc(0.8125vw + 4.4px);
}

.rl-column-space2-25 > div {
    padding-left: calc(1.125vw + 3.4px);
    padding-right: calc(1.125vw + 3.4px);
}

.rl-column-space2-30 > div {
    padding-left: calc(1.4375vw + 2.4px);
    padding-right: calc(1.4375vw + 2.4px);
}

.rl-column-icons-wrapper {
    max-width: 240px;
    margin: 0 auto;
}

.rl-column-icons-wrapper a {
    text-decoration: none;
}

/*.rl-column-icons-wrapper a:hover .rl-skin-icon-desc {
  color: #fff;
}*/

.rl-column-icons-wrapper.rl-column-2 {
    max-width: 480px;
}

.rl-column-icons-wrapper.rl-column-3 {
    max-width: 720px;
}

.rl-column-icons-wrapper.rl-column-4 {
    max-width: 960px;
}

.rl-column-icons-wrapper.rl-column-5 {
    max-width: 1200px;
}

.rl-column-icons-wrapper.rl-column-6 {
    max-width: 1440px;
}

@media screen and (max-width: 767px) {
    .rl-column-2 > div,
    .rl-column-3 > div,
    .rl-column-4 > div,
    .rl-column-5 > div,
    .rl-column-6 > div {
        width: 100%;
    }
}

/*------------------------------------
                  
------------------------------------*/

.rl-collapse-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    padding: 20px 0;
    cursor: pointer;
    font-weight: 500;
    font-size: 1.1rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.rl-title2 {
    font-weight: bold;
}

.rl-collapse-content {
    padding-left: 50px;
    padding-right: 50px;
    display: none;
}

.rl-collapse-content.open {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.rl-tutorial-wrap > div {
    border: 1px solid #c3c3c3;
    border-bottom: none;
}

.rl-tutorial-wrap > div:last-child {
    border-bottom: 1px solid #c3c3c3;
}

.rl-tutorial-wrap ul {
    padding-left: 20px;
}

.rl-tutorial-wrap li {
    font-size: 16px;
}

.rl-tutorial-video-title {
    font-size: 24px;
    line-height: 1.3;
}

.label-wrap {
    overflow: hidden;
}

.tutorial-label {
    position: absolute;
    top: 7%;
    left: -25%;
    display: none;
    height: 20px;
    width: 70%;
    background: #e8380d;
    color: #fff;
    font-family: roboto;
    font-weight: bold;
    font-size: 15px;
    padding: 0;
    line-height: 20px;
    text-align: center;
    z-index: 2;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
}

@media screen and (max-width: 575px) {
    .rl-collapse-content {
        padding: 0 15px;
    }
}

.rl-tutorial-wrap .rl-play-wrapper {
    position: absolute;
    width: 48px;
    height: 48px;
    top: auto;
    left: auto;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    margin: calc( (( 55px + 2.5vw) / 2) * (-1)) 0 0 calc( (( 55px + 2.5vw) / 2) * (-1));
    border: 3px solid #e4e4e4;
    background: #0009;
    -webkit-transition: background 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: background 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: background 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: background 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: background 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-justify-content: center;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
}

.rl-rel:hover .rl-play-wrapper {
    background-color: rgba(0, 0, 0, 0.8);
}

.rl-tutorial-wrap .rl-play {
    width: 0;
    height: 0;
    border-top: solid 10px transparent;
    border-right: solid 0px transparent;
    border-bottom: solid 10px transparent;
    border-left: solid 17px #fff;
    margin-left: 7px;
}

/*------------------------------------
                $CSS Spin
    ------------------------------------*/

.spinner {
    width: 100%;
}

.cp-spinner,
.cp-round:before,
.cp-round:after {
    width: 80px;
    height: 80px;
}

.cp-round:before {
    border-top: solid 8px #d2d2d2;
    border-right: solid 8px #d2d2d2;
    border-bottom: solid 8px #d2d2d2;
    border-left: solid 8px #d2d2d2;
}

.cp-round:after {
    border-top: solid 8px #e8380d;
}

.ad-banner .cp-round:before {
    border-top: solid 8px transparent;
    border-right: solid 8px transparent;
    border-bottom: solid 8px transparent;
    border-left: solid 8px transparent;
}

.ad-banner .cp-round:after {
    border-top: solid 8px #fff;
}