.rl-display-inline-block{
    display: inline-block;
}
.rl-display-inline{
    display: inline;
}
.rl-flex-align-items-end{
    align-items: flex-end;
}
.rl-flex-1{
    flex: 1;
}
.rl-flex-2{
    flex: 2;
}
.rl-bg-f0 {
    background-color: #f0f0f0;
}
.divde-vertical-line{
    border-left: 4px solid #e5e5e5;
    height: 50px;
    display: inline-block;
    margin: 0 20px;
}
@media (max-width: 783px){
     .divde-vertical-line{
        display:none;
    }
}
.rl-popup-container{
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    position: fixed;
    z-index: 99999999;
    background: rgba(0,0,0,0.8);
    top: 0;
    left: 0;
    display: none;
}
.rl-popup-container .rl-popup-wrapper-title{
    font-size: calc(0.5vw + 14.4px);
    margin-bottom: 25px;
}
.rl-popup-container .rl-popup-wrapper{
    height: auto;
    position: relative;
    top: 50%;
    left: 50%;
    background-color: #fff;
    max-width: 800px;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    padding: calc(0.625vw + 18px);
}
.rl-popup-close{
    position: absolute;
    display: block;
    width: 15px;
    height: 15px;
    overflow: hidden;
    right: 0px;
    top: 0px;
    cursor: pointer;
    padding: 15px;
    box-sizing: content-box;
}
.rl-popup-close::before,.rl-popup-close::after{
    content: '';
    position: absolute;
    height: 2px;
    width: 15px;
    top: 50%;
    left: 50%;
    margin-top: -1px;
    background: black;
    transform: translate(-50%,-50%);
}
.rl-popup-close::before{
    transform: translate(-50%,-50%) rotate(45deg);
}
.rl-popup-close::after{
    transform: translate(-50%,-50%) rotate(-45deg);
}
.rl-popup-form-group{ 
    margin-right: 45px;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 20px;
}
.rl-popup-form-group .rl-popup-form-group-label{ 
    margin-left: 8px;
    cursor: pointer;
}
.rl-popup-form-group input[type="radio"]{
    appearance: none;
    -webkit-appearance:none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #82BE0F;
    position: relative;
    outline: 0;
    margin: 0;
    cursor: pointer;
}
.rl-popup-form-group input[type="radio"]:checked::after{
    content: "";
    position: absolute;
    top:50%;
    left: 50%;
    width: 10px;
    height: 10px;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background-color: #82BE0F;
}
.rl-popup-container .rl-popup-button{
    background-color: #82be0f !important;
    border: 2px solid #82be0f;
    color: white !important;
    outline: none;
    border-radius: 0;
    font-size: 16px;
    cursor: not-allowed;
}
.rl-popup-button.active{
    cursor: pointer;
}
.rl-popup-button:hover{
    background-color: white !important;
    color: #82be0f !important;
    outline: none;
    border-color: #82be0f !important;
}
/*------------------------------------
        	$General
------------------------------------*/
.button-sets {
    text-align: center;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%,0px);
}

.button-sets button {
    margin: 10px 10px;
}

.button-sets .btn-default {
    border-radius: 0;
    padding: 5px calc(10px + 2.1vw);
    /*26:1920-18:768*/
    font-size: calc(0.6944444444444444vw + 12.666666666666666px);

    /*60:1920-40:768*/
    height: calc(1.7361111111111112vw + 26.666666666666668px);

    /*200:1920-140:768*/
    width: calc(5.208333333333334vw + 100px);
    line-height: 1;
    outline: none !important;
}

.button-sets .rl-btn-fill {
    background-color: #82be0f;
    border: 2px solid #82be0f;
    color: #fff;
}

.button-sets .rl-btn-fill:hover {
    background-color: transparent;
    border: 2px solid #82be0f;
    color: #82be0f;
}

.button-sets .rl-btn-border {
    background-color: transparent;
    border: 2px solid #82be0f;
    color: #82be0f;
}

.button-sets .rl-btn-border:hover {
    background-color: #82be0f;
    border: 2px solid #82be0f;
    color: #fff;
}

.rl-banner .button-sets .rl-btn-fill:hover {
    background-color: rgba(0, 0, 0, 0.35);
    color: #fff;
}

/*------------------------------------
        	$Banner
------------------------------------*/
.rl-banner {
    background-image: url('../../images/Indie.jpg');
    max-height: 500px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: black;
    min-height: 400px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex; 
    position: relative;
    height: 36.458vw;
}

.rl-banner .scroll-button:hover {
    background-color: #577d0f;
}
.rl-banner .scroll-button .fa-angle-down { 
    color: #fff;
    /*32-48*/ 
    font-size: calc(0.3472222222222222vw + 25.333333333333332px);
}

.rl-banner-text {
    font-size: calc( 26.4px + 0.5vw);
    font-weight: 300;
    color: #e8e8e8;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 1vw;
}


.rl-banner-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rl-banner .button-sets {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.rl-banner .button-sets .play-button {
    color: #fff;
    font-size: calc( 23.2px + 0.25vw );
}
.rl-banner .button-sets .play-text {
    font-size: calc(0.5vw + 18.4px); /*28:1920-20:320*/
    margin: 0 20px;
}

.rl-banner .rl-play-wrapper{
    border-radius: 50%; 
    border: 2px solid #fff;
    background: transparent;
    margin: 0;
    min-width: 40px;
    min-height: 40px; 
    pointer-events: none;
    position: static;
    width: calc(2.604166666666667vw + 30px); /*80:1920-50:768*/
    height: calc(2.604166666666667vw + 30px);
    -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);
    -o-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);
}
    .rl-banner .rl-rel:hover .rl-play-wrapper{
        background:  transparent;
        -webkit-transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
        -o-transform: scale(1.2, 1.2);
        transform: scale(1.1, 1.1);
    }
    .rl-banner .rl-play{
        width: 0;
        height: 0;
        border-style: solid;
        border-width: calc(0.8680555555555556vw + 3.3333333333333335px) 0 calc(0.8680555555555556vw + 3.3333333333333335px) calc(1.3020833333333335vw + 5px); /*20:1920-10:768, 30:1920-15:768*/
        border-color: transparent transparent transparent rgba(255,255,255,1);
        margin-left: calc( 3.2px + 0.25vw ); 
        /*8-4*/
    }

/*------------------------------------
        	$PRICING
------------------------------------*/
.version-table .rl-packageTable-withoutLine {
    border: none;
}


.rl-version-table .rl-row-flex {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.rl-version-table .rl-col-flex {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 0 15px calc( 16px + 1.25vw);
    position: relative;
    overflow: hidden;
}

.rl-version-table {
    padding-right: 15px;
    padding-left: 15px;
}


.rl-version-table > div {
    padding-left: 2.5%;
    padding-right: 2.5%;
}

.rl-version-table .recommend-text {
    color: #82be0f;
    font-size: calc(0.625vw + 24px); /*36-26*/
    font-weight: 400;
    margin-bottom: 20px;
    text-align: center;
}

.version-table {
    float: none;
    display: inline-block;
    border: 2px solid lightgray;
    border-radius: 2px;
    background-color: #fff;
    text-align: center;
    -webkit-transition: 0.1s ease-in-out;
    -moz-transition: 0.1s ease-in-out;
    transition: 0.1s ease-in-out;
    height: 100%;
    width: 100%;
}
/* 
.version-table.recommend {
    border: 8px solid #82be0f;
} */

.version-table hr {
    box-sizing: content-box;
    height: 0;
    /* margin-top: 1rem; */
    border: 0;
    border-top: 1px solid #e0e0e0;
}

.version-table .version {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    font-size: 30px;
    line-height: 42px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    padding:  calc(0.625vw + 33px) calc(0.625vw + 18px);
    background-color: #000;
    min-height: 180px;
}

.version-table .version .version-label {
    background-color: #76B900;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: calc(0.5vw + 7px);
    font-weight: 500;

    line-height: 1.3;
    position: absolute;
    top: 0;
    left: 0;
    width: 58%;
    padding: 3px;

    -webkit-transform: translate(-35%, 70%) rotate(-35deg);
    -ms-transform: translate(-35%, 70%) rotate(-35deg);
    transform: translate(-35%, 70%) rotate(-35deg);
}

.version-table .version .v-label-title {
    font-size: 1vw;
    -ms-transform: scale(0.7); /* IE 9 */
    -webkit-transform: scale(0.7); /* Safari */
    transform: scale(0.7);
    display: inline-block;
}

.version-table .version .v-label-price {
    font-size: 1.3vw;
}

.version-table .version .product-type {
    /* min-height: 120px; */
    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;
    margin-top: 10px;
    padding-bottom: 5px;
    font-size: calc(0.75vw + 25px);
}

.version-table .version .pricewithtext {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 2.7rem;
    color: white;
    background: #333;
    border: 10px solid #fff;
    height: 150px;
    width: 150px;
    padding-top: 30px;
    margin: 10px auto -110px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
}

.version-table ul.info {
    margin: 90px 0 0 0;
}

.version-table ul.info li {
    /*border-top: 1px solid #e0e0e0;*/
    padding: 10px;
}


.rl-color-white {
    color: #fff;
}

.rl-table-package {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -15px;
    margin-right: -15px;
}

.rl-price-icon{
    width: calc(0.9375vw + 59px);
    height: calc(1.25vw + 77px);
    display: block;
    margin: 0 5px;
}

.rl-price-desc-wrapper{
    padding: 20px 20px 100px 20px;
}

.rl-price-ul li{
    width: calc( (100% - 15px) / 2 );
}

.card-title{
    font-size: calc(0.125vw + 22.6px);
    font-weight: 650;
    margin-bottom: 10px;
    line-height: 1.1;
    color: #eeeeee;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    display: block;
    max-width: 90%;
    margin: 0 auto;
    margin-bottom: 15px;
}

.rl-card-item{
    border: 1px solid #353535;
    border-right: 1px solid #353535;
}

.rl-card-item1{
    border: 3px solid #555;
    border-right: 1.5px solid #555;
}

.rl-showcase-info{
    position: absolute;
    bottom: 15px;
    width: 100%;
}

.rl-btn-action {
    margin: 10px calc(10px + 0.75vw);
    color: #fff;
    background-color: #82be0f;
    border: 2px solid #82be0f;
    border-radius: 0;
    outline: none;
    font-size: 1.125rem;
    font-weight: 400;
    min-width: 200px;
    line-height: 34px;
    cursor: pointer;
}

.rl-btn-action:hover {
    color: #82be0f;
    background-color: transparent;
}

/*------------------------------------
        	$Media Query
------------------------------------*/

@media screen and (max-width: 1200px) {
    .rl-price-ul li {
        width: 100%;
    }
}

@media screen and (max-width: 991px) {

    .rl-banner-wrapper{
        margin-top: calc(2.1528525296017222vw + 8.665231431646932px);
    }

    /* price */
    /*rl flex box*/
    .rl-version-table .rl-row-flex {
        display: inline-block;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .rl-version-table .rl-btn-paidupdate {
        width: 90%;
    }

    .version-table {
        width: 100%;
        display: block;
        /* margin-bottom: 30px; */
        margin-right: 0;
        margin-left: 0;
    }

    .rl-packageTable-note li {
        width: 100%;
        padding-right: 0;
    }

    .rl-version-table {
        padding-right: 0;
        padding-left: 0;
    }

    .version-table .version {
        min-height: auto;
    }
    .version-table .version .product-type {
        margin-top: 20px;
    }

    .version-table .version .version-label {
        font-size: calc(1.5vw + 6px);
        width: 55%;
    }
    .version-table .version .v-label-title{
        font-size: 2.1vw;
    }
    .version-table .version .v-label-price{
        font-size: 2.6vw;
    }

    .rl-s-cards .rl-card-item{
        width: calc(100% / 2);
    }
}

@media screen and (max-width: 767px) {
    .rl-banner .button-sets {
        flex-wrap: wrap;
        justify-content: center;
    }
    .rl-banner .button-sets .play-text {
        margin-left: 0;
    }
}

.popup {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 50%;
    margin: 20px auto;
    text-align: center;
}


@media screen and (max-width: 500px) {
    .rl-version-table .rl-package{
        margin-left: 0;
        margin-right: 0;
    }

    .rl-s-cards .rl-card-item{
        width: 100%;
    }
}