/*Переменные стилей. Замените при необходимости значение от : до ;*/
:root{
    --raduga-img-color1-hover: #fff; /*Цвет обводки тренинга при наведении*/

    --raduga-img-background-color1: transparent;/*Цвет фона карточки*/
    --raduga-img-background-color1-hover: linear-gradient(90deg, rgba(11,181,239,0.9752275910364145) 0%, rgba(237,48,165,0.9780287114845938) 100%);/*Цвет фона карточки и кнопок чата при наведении. Фон баннера и первой карточки в спокойном состоянии*/

    --raduga-img-color2: #36302C; /*Цвет заголовка карточки*/
    --raduga-img-color2-hover: #fff; /*Цвет заголовка карточки при наведении и первой карточки в спокойном состоянии*/

    --raduga-img-color3: #36302C; /*Цвет описания*/
    --raduga-img-color3-hover: #fff; /*Цвет описания при наведении. Описание первой карточки в спокойном состоянии*/

    --raduga-img-background-color2:linear-gradient(90deg, rgba(11,181,239,0.9752275910364145) 0%, rgba(237,48,165,0.9780287114845938) 100%); /*Цвет фона кнопки*/
    --raduga-img-background-color2-hover: transparent; /*цвет фона кнопки при наведении*/

    --raduga-img-color4: #fff; /*цвет текста кнопки*/
    --raduga-img-color4-hover: #FFF; /*цвет текста кнопки при наведении. Цвет текста кнопки первой карточки в спокойном состоянии*/

    --raduga-img-border-color: 0px solid transparent; /*цвет обводки кнопки*/
    --raduga-img-border-color-hover: 1.5px solid #fff; /*цвет обводки кнопки при наведении и первой карточки*/

    /*Недоступный тренинг*/
    --raduga-img-background-color1-no-public: transparent;/*Цвет фона карточки*/
    --raduga-img-color2-no-public: #222; /*Цвет заголовка карточки*/
    --raduga-img-color3-no-public: #222; /*Цвет описания*/
    --raduga-img-background-color2-no-public:#c8c8c8; /*Цвет фона кнопки*/
    --raduga-img-color4-no-public: #222; /*цвет текста кнопки недноступного тренинга*/


}

/* Убираем ненужный отступ */
.traning_img .stream-table { 
    margin-left:0!important;
    margin-bottom: 20px!important;

}

/*Убираем ненужный фон*/
.traning_img .stream-table tbody tr td{
    background:none!important;
}


/* Задаем флекс таблице с карточками */
.traning_img .stream-table tbody {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    gap: 15px;
}




/* Настраиваем оболочку карточек */
.traning_img .stream-table tbody tr {
    position: relative;
    background: var(--raduga-img-background-color1);
    min-height: 180px;
    height:auto;
    -ms-flex: 0 0 calc(50% - 7.5px);
    flex: 0 0 calc(50% - 7.5px);
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-box-shadow: var(--raduga-box-shadow);
    box-shadow: var(--raduga-box-shadow);
    border-radius: var(--raduga-border-radius);
    border: var(--raduga-border);

}



/* Настраиваем флекс для содержимого карточек */
.traning_img .stream-table tbody tr td {
    height: 100%;
    width: 100% !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding:0!important;
    gap: 10px;
}


/* Настраиваем кликабельность карточек */
.traning_img .stream-table tbody tr td a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--raduga-border-radius);
    z-index: 1; 
    overflow: hidden;
    padding: 20px !important;
    text-decoration: none;
    gap: 20px;
}

/*Картинки в тренингах */

.traning_img .stream-table td.item-image,
.traning_img .stream-table a img{
    background-size: contain!important;
    display: block;
    position: absolute;
    right: 20px;
    top:20px;
    max-width: 100px!important;
    width: 80px !important;
    height: 80px!important;
    border-radius:var(--raduga-border-radius);
    z-index: 3;
}


/*Текстовый контейнер*/
.traning_img .stream-table tbody tr td .text-training{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
    margin-right:100px;
}


/* Настраиваем заголовок */
.traning_img .stream-table tbody tr td .stream-title {
    font-size: 24px!important;
    font-weight: 500;
    line-height: 1.1;
    color: var(--raduga-img-color2);
    font-family: var(--raduga-font-header-family)!important;
    -webkit-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;

}


/* Выводим описание */
.traning_img .stream-table tbody tr td div {
    font-weight: 300;
    font-size: 18px;
    line-height: normal;
    font-family: var(--raduga-font-family)!important;
    color: var(--raduga-img-color3);
    -webkit-transition:all 0.5s;  
    -o-transition:all 0.5s;  
    transition:all 0.5s;

}


/*Кнопка в тренингах*/
.traning_img .stream-table span.btn-view-training{
    font-family: var(--raduga-font-header-family);
    color: var(--raduga-img-color4);
    font-weight: 500;
    font-size: 20px;
    line-height: normal;
    background: var(--raduga-img-background-color2);
    border: var(--raduga-img-border-color);
    border-radius: var(--raduga-border-radius);
    min-width: 170px;
    min-height: 40px;
    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;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    margin: 10px auto 0px 0px;
}


/*НЕДОСТУПНЫЙ ТРЕНИГ*/


/*Накладываем фильтр*/
.traning_img .stream-table tr.no-public td a,
.traning_img .stream-table tr.no-public{
    opacity: 1;

}


/* Фон тренинга */
.traning_img .stream-table tbody tr.no-public {
    background: var(--raduga-img-background-color1-no-public);
}

/* заголовок */
.traning_img .stream-table tbody tr.no-public td .stream-title {
    color: var(--raduga-img-color2-no-public);
}

/* описание */
.traning_img .stream-table tbody tr.no-public td div {
    color: var(--raduga-img-color3-no-public);
}

/*Кнопка*/
.traning_img .stream-table tr.no-public span.btn-view-training{
    background: var(--raduga-img-background-color2-no-public);
    color: var(--raduga-img-color4-no-public);
}

/* НЕ увеличиваем при наведении курсора */
.traning_img .stream-table tr.no-public:hover{
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);}

.traning_img .stream-table tr.no-public a:hover{
    cursor: default;
}

.traning_img .stream-table tr.no-public span.btn-view-training{
    font-size: 0;
}

.traning_img .stream-table tr.no-public span.btn-view-training:before{
    content: "Недоступен \f023";
    font-family: var(--raduga-font-header-family),'FontAwesome';
    font-size: 20px;
    color:var(--raduga-img-color4-no-public);
}


/*АНИМАЦИЯ И ПЕРВЫЙ ТРЕНИНГ*/

.traning_img .stream-table tbody tr td:hover{
    background:none!important;
}


/*Карточки при наведении курсора*/
.traning_img .stream-table tbody tr:not(.no-public):hover,
.traning_img .stream-table tbody tr:first-child:not(.no-public){
    background: var(--raduga-img-background-color1-hover);/*Меняем цвет заливки */
    border: 1px solid var(--raduga-img-color1-hover);/*Цвет обводки*/
    -webkit-transform:scale(1.02); /* Увеличиваем карточку */
    -ms-transform:scale(1.02);
    transform:scale(1.02);
    -webkit-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;

}

.traning_img .stream-table tbody tr:first-child:not(.no-public){
    -webkit-transform:scale(1.00); /* Не увеличиваем первую карточку */
    -ms-transform:scale(1.00);
}

/*Заголовок при наведении курсора*/
.traning_img .stream-table tbody tr:not(.no-public):hover td .stream-title,
.traning_img .stream-table tbody tr:first-child:not(.no-public) td .stream-title
{
    color: var(--raduga-img-color2-hover);
}


/*Описание при наведении курсора*/
.traning_img .stream-table tbody tr:not(.no-public):hover td div,
.traning_img .stream-table tbody tr:first-child:not(.no-public) td div
{
    color: var(--raduga-img-color3-hover);
}

/*Кнопка при наведении курсора*/

.traning_img .stream-table tbody tr:not(.no-public):hover span.btn-view-training,
.traning_img .stream-table tbody tr:first-child:not(.no-public) span.btn-view-training
{
    color: var(--raduga-img-color4-hover);
    background: var(--raduga-img-background-color2-hover);
    border: var(--raduga-img-border-color-hover);
}






/*Адаптируем стили под разные разрешения */


@media (min-width: 1200px) {
    .col-md-4 {
        width: 30% !important;
    }

    .col-gc-8 {
        width: 70%!important;
    }

}

@media (max-width:1200px) {
    .col-gc-8 {
        width: 100%;
    }

    .col-gc-4 {
        width: 100%;
    }
}

@media (min-width: 992px) {
    .col-md-4 {
        width: 100%;
        margin: 0 auto;
    }
}






@media (max-width: 767px) {
    .traning_img .stream-table td.item-image,
    .traning_img .stream-table a img{
        width: 70px !important;
        height: 70px!important;

    }

    .traning_img .stream-table tbody tr td .text-training {
        margin-right: 90px;
    }

    .traning_img .stream-table tbody tr{
        margin: 0px auto;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(100% - 20px);
        flex: 0 0 calc(100% - 20px);
        max-width:100%;
    }

}

@media (max-width: 767px) and (min-width: 550px) {
    .traning_img .stream-table tbody tr{
        min-height: 140px !important;
    }
}



@media(max-width:700px){

    .traning_img .stream-table tbody {
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .traning_img .stream-table tbody tr{
        margin: 0px auto;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(100% - 10px);
        flex: 0 0 calc(100% - 10px);
        min-height:200px;
        height:auto;
    }

    .traning_img .stream-table span.btn-view-training{
        min-height: 45px;
        margin: 10px auto 0px 0px;
    }


    .traning_img .stream-table tbody tr td a {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        text-align: left;
    }


}


@media (max-width: 425px) {
    .traning_img .stream-table tbody tr{
        max-width: calc(100% - 10px)!important;
        width: auto;
    }
}

@media (max-width: 360px) {
    .traning_img .stream-table td.item-image,
    .traning_img .stream-table a img{
        width: 50px !important;
        height: 50px!important;

    }

    .traning_img .stream-table tbody tr td .text-training {
        margin-right: 60px;
    }

}