.subscription {
    margin-top: 60px;
    margin-bottom: 100px;
}
.subscription-actions {
}
.subscription-text {
    font-weight: bold;
    font-size: 17px;
    display: flex;
    align-items: center;
    /* text-transform: uppercase; */
}
.subscription-left {
}
.subscription-card {
    padding: 16px;
    border: 1px solid white;
    border-radius: 5px;
    font-size: 20px;
    cursor: pointer;
    transition: .3s background ease-in-out;
    background: var(--secondary-color);
}
.theme-light .subscription-card,
.theme-light .subscription-method-btn{
    background: var(--gray-light-bg);
    border-color: var(--gray-light);
}
.subscription-btn {
    opacity: 0;
    visibility: hidden;
    transition: .3s opacity ease-in-out, .3s visibility ease-in-out;
    text-transform: uppercase;
}
.subscription-btn.is-active {
    opacity: 1;
    visibility: visible;
}
.subscription-card.is-active,
.subscription-card:hover {
    background: var(--red);
    color: white;
}
.subscription-btn + div{
    opacity: 0;
}
.subscription-btn.is-active + div{
    opacity: 1;
}
.theme-light .subscription-btn.is-active {
    background: var(--secondary-color);
    color: white;
}
.theme-light .subscription-btn:hover {
    background: var(--secondary-color-hover);
}
.subscription-line {
    width: 100%;
    max-width: 767px;
    background: #646464;
    color: #646464;
    opacity: 1;
    margin-bottom: 40px;
}
.subscription-info {
    /* font-weight: bold; */
    /* font-size: 19px; */
    /* line-height: 34px; */
    /* height: 34px; */
    /* border-radius: 5px; */
    /* padding-left: 20px; */
    /* padding-right: 20px; */
    /* box-sizing: border-box; */
    /* background: var(--red); */
    /* border: none; */
    /* display: inline-block; */
    /* text-transform: uppercase; */
    /* color: #fff; */
    /* text-decoration: none; */
}
@media(max-width:767.98px){
    .subscription-info {
        font-size: 10px;
    }
}
.subscription-academy {
    display: flex;
    flex-wrap: wrap;
    margin-left: -8px;
    margin-right: -8px;
}
.subscription-academy-item {
    width: 180px;
    margin: 8px;
}
.subscription-method{
    display: flex;
    opacity: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: stretch;
    align-content: stretch;
    column-gap: 16px;
    visibility: hidden;
    flex-wrap: wrap;
    height: 0;
    gap: 16px;
}
.subscription-method-btn,
.academy-pay-method-btn{
    width: calc(50% - 8px );
    padding: 24px 16px;
    border: 1px solid white;
    border-radius: 5px;
    font-size: 20px;
    cursor: pointer;
    transition: .3s background ease-in-out;
    background: var(--secondary-color);
    display: flex;
    align-items: normal;
    height: 156px;
    text-align: center;
    justify-content: flex-start;
    font-size: 15px;
    flex-direction: column;
    }
.subscription-method-btn svg{
    width: 70%;
    display: block;
    margin: 0 auto;
    /* opacity: .5; */
}
.subscription-method-btn svg,
.academy-pay-method-btn svg{
    width: 100%;
    max-height: 40px;
    margin-bottom: 16px;
    }
html:not(.theme-light) .subscription-method-btn svg path,
html:not(.theme-light) .subscription-method-btn svg g,
html:not(.theme-light) .subscription-method-btn svg polygon,
html:not(.theme-light) .subscription-method-btn svg rect{
    fill: #ffffff!important;
}
.subscription-method.is-active{
    visibility: visible;
    opacity: 1;
    height: auto;
}
.subscription-method-btn:hover,
.subscription-method-btn.is-active{
    background: var(--red);
}
.video-card-img {
    height: 180px;
}
.video-card:before{
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 0C4.924 0 0 4.925 0 11s4.924 11 11 11 11-4.925 11-11S17.075 0 11 0zm.666 15.9v1.273a.34.34 0 01-.354.344h-.849c-.199 0-.36-.145-.36-.344v-1.161a7.289 7.289 0 01-2.165-.429.68.68 0 01-.417-.804l.138-.539a.68.68 0 01.905-.465c.568.22 1.24.38 1.956.38.912 0 1.537-.353 1.537-.993 0-.609-.512-.993-1.697-1.394-1.714-.576-2.887-1.376-2.887-2.93 0-1.409.997-2.513 2.702-2.85V4.827c0-.199.17-.377.369-.377h.848c.2 0 .346.178.346.377v1.049c.745.032 1.283.142 1.733.289.34.11.541.467.452.815l-.122.482a.682.682 0 01-.879.475 4.903 4.903 0 00-1.617-.268c-1.041 0-1.378.449-1.378.897 0 .529.56.865 1.922 1.378 1.905.672 2.67 1.553 2.67 2.993 0 1.425-1.007 2.643-2.853 2.963z' fill='%23fff'/%3E%3C/svg%3E");
    background-size: 22px auto;
    width: 22px;
    height: 22px;
    top: 12px;
    right: 12px;
    left: auto;
}
.show-subscription-data{
    display: block;
    margin: 32px 0;
    width: 240px;
}
@media(max-width:767.98px){
    .subscription-academy-item{
        width: calc( 50% - 16px );
    }
    .video-card-img{
        height: 170px;
    }
    .subscription-card{
        font-size: 16px;
    }
    .subscription-text{
        font-size: 14px;
    }
}