@charset "UTF-8";
/*!
Theme Name: Vida
Author: Topref
Description: Интернет магазин мото техники.
Version: 1.0.0
Text Domain: vida
*/
/*--------------------------------------------------------------
>>> ОГЛАВЛЕНИЕ:
----------------------------------------------------------------
# Типографика
# Элементы
# Шапка
# Секции
# Виджеты
# Контент
# Комментарии
# Галерея
# Подвал
--------------------------------------------------------------*/
/*Отзывчивое соотношение - Мы используем этот миксин для создания масштабируемых элементов(обычно изображения/картинки заднего фона), чтобы поддерживать соотношение.*/
/*
Пример:
div {
  @include responsive-ratio(16,9);
}
*/
/*--------------------------------------------------------------
# Типографика
--------------------------------------------------------------*/
@font-face {
    font-family: "Roboto";
  src: url("./fonts/Roboto/Roboto-BlackItalic.eot");
  src: local("Roboto Black Italic"), local("Roboto-BlackItalic"), url("./fonts/Roboto/Roboto-BlackItalic.eot?#iefix") format("embedded-opentype"), url("./fonts/Roboto/Roboto-BlackItalic.woff2") format("woff2"), url("./fonts/Roboto/Roboto-BlackItalic.woff") format("woff"), url("./fonts/Roboto/Roboto-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
    font-family: "Roboto";
  src: url("./fonts/Roboto/Roboto-Bold.eot");
  src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/Roboto/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("./fonts/Roboto/Roboto-Bold.woff2") format("woff2"), url("./fonts/Roboto/Roboto-Bold.woff") format("woff"), url("./fonts/Roboto/Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: "Roboto";
  src: url("./fonts/Roboto/Roboto-BoldItalic.eot");
  src: local("Roboto Bold Italic"), local("Roboto-BoldItalic"), url("./fonts/Roboto/Roboto-BoldItalic.eot?#iefix") format("embedded-opentype"), url("./fonts/Roboto/Roboto-BoldItalic.woff2") format("woff2"), url("./fonts/Roboto/Roboto-BoldItalic.woff") format("woff"), url("./fonts/Roboto/Roboto-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
    font-family: "Roboto";
  src: url("./fonts/Roboto/Roboto-LightItalic.eot");
  src: local("Roboto Light Italic"), local("Roboto-LightItalic"), url("./fonts/Roboto/Roboto-LightItalic.eot?#iefix") format("embedded-opentype"), url("./fonts/Roboto/Roboto-LightItalic.woff2") format("woff2"), url("./fonts/Roboto/Roboto-LightItalic.woff") format("woff"), url("./fonts/Roboto/Roboto-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
    font-family: "Roboto";
  src: url("./fonts/Roboto/Roboto-Regular.eot");
  src: local("Roboto"), local("Roboto-Regular"), url("./fonts/Roboto/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("./fonts/Roboto/Roboto-Regular.woff2") format("woff2"), url("./fonts/Roboto/Roboto-Regular.woff") format("woff"), url("./fonts/Roboto/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: "Roboto";
  src: url("./fonts/Roboto/Roboto-ThinItalic.eot");
  src: local("Roboto Thin Italic"), local("Roboto-ThinItalic"), url("./fonts/Roboto/Roboto-ThinItalic.eot?#iefix") format("embedded-opentype"), url("./fonts/Roboto/Roboto-ThinItalic.woff2") format("woff2"), url("./fonts/Roboto/Roboto-ThinItalic.woff") format("woff"), url("./fonts/Roboto/Roboto-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
    font-family: "Roboto";
  src: url("./fonts/Roboto/Roboto-Black.eot");
  src: local("Roboto Black"), local("Roboto-Black"), url("./fonts/Roboto/Roboto-Black.eot?#iefix") format("embedded-opentype"), url("./fonts/Roboto/Roboto-Black.woff2") format("woff2"), url("./fonts/Roboto/Roboto-Black.woff") format("woff"), url("./fonts/Roboto/Roboto-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: "Roboto";
  src: url("./fonts/Roboto/Roboto-MediumItalic.eot");
  src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"), url("./fonts/Roboto/Roboto-MediumItalic.eot?#iefix") format("embedded-opentype"), url("./fonts/Roboto/Roboto-MediumItalic.woff2") format("woff2"), url("./fonts/Roboto/Roboto-MediumItalic.woff") format("woff"), url("./fonts/Roboto/Roboto-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
    font-family: "Roboto";
  src: url("./fonts/Roboto/Roboto-Thin.eot");
  src: local("Roboto Thin"), local("Roboto-Thin"), url("./fonts/Roboto/Roboto-Thin.eot?#iefix") format("embedded-opentype"), url("./fonts/Roboto/Roboto-Thin.woff2") format("woff2"), url("./fonts/Roboto/Roboto-Thin.woff") format("woff"), url("./fonts/Roboto/Roboto-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: "Roboto";
  src: url("./fonts/Roboto/Roboto-Light.eot");
  src: local("Roboto Light"), local("Roboto-Light"), url("./fonts/Roboto/Roboto-Light.eot?#iefix") format("embedded-opentype"), url("./fonts/Roboto/Roboto-Light.woff2") format("woff2"), url("./fonts/Roboto/Roboto-Light.woff") format("woff"), url("./fonts/Roboto/Roboto-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: "Roboto";
  src: url("./fonts/Roboto/Roboto-Italic.eot");
  src: local("Roboto Italic"), local("Roboto-Italic"), url("./fonts/Roboto/Roboto-Italic.eot?#iefix") format("embedded-opentype"), url("./fonts/Roboto/Roboto-Italic.woff2") format("woff2"), url("./fonts/Roboto/Roboto-Italic.woff") format("woff"), url("./fonts/Roboto/Roboto-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
    font-family: "Roboto";
  src: url("./fonts/Roboto/Roboto-Medium.eot");
  src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/Roboto/Roboto-Medium.eot?#iefix") format("embedded-opentype"), url("./fonts/Roboto/Roboto-Medium.woff2") format("woff2"), url("./fonts/Roboto/Roboto-Medium.woff") format("woff"), url("./fonts/Roboto/Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/*--------------------------------------------------------------
# Элементы
--------------------------------------------------------------*/
html,
body {
    font-family: "Roboto", sans-serif;
    color: #FFFFFF;
    height: 100%;
    scroll-behavior: smooth;
    background-color: #99447C;
}

section {
    overflow: hidden;
}

/*Прижатие подвала к низу сайта*/
#page {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.site-content {
    flex: 1 1 auto;
}

embed,
iframe,
object {
    max-width: 100%;
}

/* Заголовки */
h1 {
    font-size: 40px;
    font-size: 2.5rem;
}

h2 {
    font-size: 32px;
    font-size: 2rem;
}

h3 {
    font-size: 28px;
    font-size: 1.75rem;
}

h4 {
    font-size: 24px;
    font-size: 1.5rem;
}

h5 {
    font-size: 20px;
    font-size: 1.25rem;
}

h6 {
    font-size: 16px;
    font-size: 1rem;
}

.main-title {
    font-size: 68px;
    font-size: 4.25rem;
    font-weight: 300;
    text-transform: uppercase;
    line-height: 1;
    display: flex;
    align-items: flex-start;
}

@media only screen and (max-width: 992px) {
    .main-title {
        font-size: 48px;
        font-size: 3rem;
    }
}

@media only screen and (max-width: 768px) {
    .main-title {
        font-size: 32px;
        font-size: 2rem;
        line-height: 1.2;
    }
}

@media only screen and (max-width: 576px) {
    .main-title {
        font-size: 28px;
        font-size: 1.75rem;
    }
}

.main-title svg {
    min-width: 60px;
    margin-top: 12px;
    margin-right: 30px;
}

@media only screen and (max-width: 992px) {
    .main-title svg {
        margin-top: 3px;
    }
}

@media only screen and (max-width: 768px) {
    .main-title svg {
        margin-top: -4px;
        margin-right: 15px;
        min-width: auto;
        max-width: 36px;
    }
}

img {
    max-width: 100%;
    height: auto;
}

/*Ленивая загрузка*/
.b-lazy {
    transition: opacity 500ms ease-in-out;
    max-width: 100%;
    opacity: 0;
}

.b-lazy.b-loaded {
    opacity: 1;
}

a {
    transition: all 0.2s linear;
}

strong {
    font-weight: 700;
}

/*Модальное окно*/
.violet-popup {
    position: relative;
    padding: 30px;
    width: auto;
    max-width: 420px;
    margin: 20px auto;
    background: #622C84;
}

@media only screen and (max-width: 768px) {
    .violet-popup {
        padding: 20px;
    }
}

.violet-popup .mfp-close {
    color: #FFC107;
}

.violet-popup .form-title {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px;
}

.violet-popup .submitted-content {
    text-align: center;
    margin-top: 20px;
    padding: 30px;
    border: 1px solid #FFFFFF;
}

.violet-popup .submitted-content .submitted-title {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #FFC107;
    margin-bottom: 15px;
}

.violet-popup .submitted-content .submitted-subtitle {
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: 500;
    color: #D3D1D3;
}

.violet-popup input[type=submit],
.violet-popup button[type=submit] {
    width: 100%;
}

/*Форма*/
form {
 /* FF 4-18 */
  /* FF 19+ */
  /* IE 10+ */
}

form div {
    margin-bottom: 10px;
}

form label {
    display: block;
}

form input[type=email],
form input[type=text],
form input[type=number],
form input[type=password],
form input[type=tel],
form textarea {
    border-radius: 3px;
    width: 100%;
    border: none;
    padding: 10px 15px;
    outline: none;
    margin-bottom: 20px;
}

form input:focus::-webkit-input-placeholder {
    color: transparent;
}

form input:focus:-moz-placeholder {
    color: transparent;
}

form input:focus::-moz-placeholder {
    color: transparent;
}

form input:focus:-ms-input-placeholder {
    color: transparent;
}

form select {
    outline: none;
    padding: 5px;
    border: 1px solid #434343;
}

form select:focus {
    outline: none;
}

form input[type=submit],
form button[type=submit] {
    transition: all 0.2s linear;
    border-radius: 3px;
    font-size: 16px;
    font-size: 1rem;
    color: #0E0E0E;
    padding: 10px 30px;
    border: none;
    background-color: #FFC107;
}

form input[type=submit]:hover,
form button[type=submit]:hover {
    cursor: pointer;
    background-color: rgb(222.7, 167.025, 0);
}

form input[type=submit].big,
form button[type=submit].big {
    padding: 22px 70px;
}

@media only screen and (max-width: 992px) {
    form input[type=submit].big,
  form button[type=submit].big {
        padding: 15px 40px;
    }
}

@media only screen and (max-width: 768px) {
    form input[type=submit].big,
  form button[type=submit].big {
        padding: 10px 30px;
    }
}

/*Таблица*/
table {
    width: 100%;
    margin-bottom: 15px;
}

table tr th,
table tr td {
    padding: 5px;
}

/*Кнопки*/
.button-white {
    font-size: 12px;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.2;
    text-align: center;
    color: #0E0E0E;
    padding: 8px 15px;
    display: inline-block;
    background-color: #FFFFFF;
}

.button-white:hover {
    color: #0E0E0E;
    text-decoration: none;
    cursor: pointer;
    background-color: #FFC107;
}

.button-white:focus {
    outline: none;
}

.button-white.big {
    font-size: 20px;
    font-size: 1.25rem;
    padding: 14px 75px;
}

.button-violet {
    font-size: 12px;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.2;
    text-align: center;
    color: #FFFFFF;
    padding: 8px 15px;
    display: inline-block;
    background-color: #622C84;
}

.button-violet:hover {
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
    background-color: #99447C;
}

.button-violet:focus {
    outline: none;
}

.button-violet.big {
    font-size: 20px;
    font-size: 1.25rem;
    padding: 14px 75px;
}

.button-border {
    font-size: 12px;
    font-size: 0.75rem;
    border: 1px solid #FFFFFF;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.2;
    text-align: center;
    color: #FFFFFF;
    background: none;
    padding: 7px 15px;
    display: inline-block;
}

.button-border:hover {
    color: #0E0E0E;
    text-decoration: none;
    cursor: pointer;
    background-color: #FFFFFF;
}

.button-border:focus {
    outline: none;
}

/*Адаптивные табы*/
.responsiveTabs {
    margin-bottom: 30px;
}

@media only screen and (max-width: 576px) {
    .responsiveTabs {
        margin-bottom: 0;
    }
}

.responsiveTabs ul {
    list-style: none;
    padding: 10px 0;
}

@media only screen and (max-width: 576px) {
    .responsiveTabs ul {
        display: flex;
        width: 100%;
    }
}

.responsiveTabs ul li {
    margin-right: 30px;
    background-color: #D9D9D9;
}

@media only screen and (max-width: 576px) {
    .responsiveTabs ul li {
        width: 100%;
        margin-right: 5px !important;
    }

    .responsiveTabs ul li:last-child {
        margin-right: 0 !important;
    }
}

.responsiveTabs ul li:last-child {
    margin-right: 0;
}

.responsiveTabs ul li.r-tabs-state-active a {
    color: #FFFFFF;
    background-color: #99447C;
}

.responsiveTabs ul li a {
    font-size: 20px;
    font-size: 1.25rem;
    color: #0E0E0E;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    padding: 10px 40px;
}

@media only screen and (max-width: 992px) {
    .responsiveTabs ul li a {
        font-size: 18px;
        font-size: 1.125rem;
        padding: 10px 30px;
    }
}

@media only screen and (max-width: 768px) {
    .responsiveTabs ul li a {
        font-size: 16px;
        font-size: 1rem;
        padding: 10px 15px;
    }
}

@media only screen and (max-width: 576px) {
    .responsiveTabs ul li a {
        font-size: 12px;
        font-size: 0.75rem;
        display: block;
        padding: 10px;
    }
}

.responsiveTabs ul li a:hover {
    color: #FFFFFF;
    background-color: #99447C;
}

.responsiveTabs ul li a span {
    font-weight: 300;
    display: block;
}

.responsiveTabs .r-tabs-panel {
    padding: 15px 0;
}

/*Слайдер с работами*/
.swiper {
    width: 100%;
    height: auto;
    margin-top: 100px;
}

@media only screen and (max-width: 1200px) {
    .swiper {
        margin-top: 60px;
    }
}

@media only screen and (max-width: 576px) {
    .swiper {
        margin-top: 30px;
    }
}

.swiper .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
}

.swiper .swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
}

.swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.swiper .swiper-pagination {
    position: relative;
    margin-top: 80px;
}

@media only screen and (max-width: 1200px) {
    .swiper .swiper-pagination {
        margin-top: 40px;
    }
}

.swiper .swiper-pagination .swiper-pagination-bullet {
    border-radius: 0;
    width: 10px;
    height: 10px;
    margin: 0 15px;
    opacity: 1;
    background-color: #D9D9D9;
}

@media only screen and (max-width: 576px) {
    .swiper .swiper-pagination .swiper-pagination-bullet {
        margin: 0 10px;
    }
}

.swiper .swiper-pagination .swiper-pagination-bullet:hover {
    background-color: #B689DB;
}

.swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #B689DB;
}

/*Лоадер отправки формы*/
.loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    background-color: rgba(14, 14, 14, 0.8);
}

.loader svg {
    transition: all 0.2s linear;
    animation: spin 2000ms linear 0s infinite;
}

/**
 * Спиннер.
 */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
/*--------------------------------------------------------------
# Шапка
--------------------------------------------------------------*/
/*Шапка сайта*/
.site-header {
    transition: all 0.4s linear;
    padding: 35px 0;
    background-color: #99447C;
    top: -300px;
    z-index: 9;
}

@media only screen and (max-width: 768px) {
    .site-header {
        padding: 15px 0;
    }
}

.site-header.fixed {
    padding: 15px 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 1px 1px 5px 2px rgb(130.05, 57.8, 105.4);
    z-index: 999;
}

.site-header .site-branding img {
    visibility: hidden;
}

.site-header .site-branding p {
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: left;
    margin: 0;
    visibility: hidden;
}

@media only screen and (max-width: 992px) {
    .site-header .site-branding p {
        font-size: 16px;
        font-size: 1rem;
    }
}

.site-header .site-branding p span {
    font-size: 16px;
    font-size: 1rem;
    font-weight: 200;
    text-transform: none;
}

@media only screen and (max-width: 992px) {
    .site-header .site-branding p span {
        font-size: 14px;
        font-size: 0.875rem;
    }
}

.site-header ul.header-menu {
    list-style: none;
    display: flex;
    align-items: center;
    padding-left: 0;
    margin: 0;
    visibility: hidden;
}

.site-header ul.header-menu li {
    display: flex;
    align-items: center;
    margin-right: 50px;
}

@media only screen and (max-width: 992px) {
    .site-header ul.header-menu li {
        margin-right: 15px;
    }
}

.site-header ul.header-menu li a {
    font-size: 16px;
    font-size: 1rem;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
}

@media only screen and (max-width: 992px) {
    .site-header ul.header-menu li a {
        font-size: 14px;
        font-size: 0.875rem;
    }
}

.site-header ul.header-menu li a:hover {
    color: #FFC107;
}

.site-header ul.header-menu li a svg {
    margin-right: 10px;
}

.site-header .header-button {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .site-header .header-button {
        display: none;
    }
}

.site-header .header-button a {
    width: 100%;
    max-width: 160px;
}

.site-header .header-button a:first-child {
    margin-bottom: 10px;
}

/*Кнопка мобильного меню*/
.toggle-mnu {
    display: block;
    width: 28px;
    height: 28px;
    margin-top: 8px;
    margin-left: auto;
}

@media only screen and (min-width: 768px) {
    .toggle-mnu {
        display: none;
    }
}

.toggle-mnu span:after, .toggle-mnu span:before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
}

.toggle-mnu span:after {
    top: 18px;
}

.toggle-mnu span {
    position: relative;
    display: block;
}

.toggle-mnu span, .toggle-mnu span:after, .toggle-mnu span:before {
    transition: all 0.2s linear;
    width: 100%;
    height: 2px;
    background-color: #FFFFFF;
    backface-visibility: hidden;
    border-radius: 2px;
}

.toggle-mnu.on span {
    background-color: transparent;
}

.toggle-mnu.on span:before {
    transform: rotate(45deg) translate(-1px, 0px);
}

.toggle-mnu.on span:after {
    transform: rotate(-45deg) translate(6px, -7px);
}

/*Мобильное меню*/
.mobile-menu {
    transition: all 0.2s linear;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    position: fixed;
    left: -102%;
    right: auto;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    padding-bottom: 30px;
    background-color: #622C84;
    z-index: 999;
}

.mobile-menu.open {
    left: 0;
    overflow: hidden;
}

.mobile-menu .close {
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0;
}

.mobile-menu .close:hover {
    cursor: pointer;
}

.mobile-menu .mobile-logo {
    margin-top: 60px;
}

.mobile-menu .mobile-navigation {
    margin-bottom: 30px;
}

.mobile-menu .mobile-navigation ul {
    text-align: center;
    list-style: none;
    padding-left: 0;
    margin-bottom: 30px;
}

.mobile-menu .mobile-navigation ul li a {
    font-size: 24px;
    font-size: 1.5rem;
    text-decoration: none;
    color: #FFFFFF;
    font-weight: 500;
    display: block;
    padding: 5px;
}

.mobile-menu .mobile-navigation ul li a:hover {
    color: #FFC107;
}

.mobile-menu .mobile-navigation ul.social-list {
    list-style: none;
    padding-left: 0;
    margin: 0 auto 30px;
    display: flex;
    flex-wrap: wrap;
}

.mobile-menu .mobile-navigation ul.social-list li a {
    display: block;
    padding: 5px 10px;
}

.mobile-menu .mobile-navigation ul.social-list li a:hover svg {
    fill: #FFC107;
}

.mobile-menu .mobile-navigation ul.social-list li a svg {
    transition: all 0.2s linear;
    fill: #FFFFFF;
}

.mobile-menu .mobile-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mobile-menu .mobile-button a {
    width: 200px;
    padding: 15px 45px;
    margin-bottom: 15px;
}

/*--------------------------------------------------------------
# Секции
--------------------------------------------------------------*/
/*Первый экран*/
.first-screen {
    height: calc(100vh - 140px);
    background-color: #02050A;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
}

@media only screen and (max-width: 1400px) {
    .first-screen {
        background-size: cover;
    }
}

@media only screen and (max-width: 769px) {
    .first-screen {
        height: calc(100vh - 100px);
    }
}

@media only screen and (max-width: 576px) {
    .first-screen {
        height: 280px;
    }
}

.first-screen:after {
    content: "";
    display: block;
    width: 100%;
    height: 120px;
    position: absolute;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(98, 44, 132, 0) 0%, rgb(98, 44, 132) 100%);
}

@media only screen and (max-width: 576px) {
    .first-screen:after {
        display: none;
    }
}

.first-screen .first-button {
    display: flex;
    flex-direction: column;
    margin-bottom: 160px;
}

@media only screen and (max-width: 576px) {
    .first-screen .first-button {
        display: none;
    }
}

.first-screen .first-button a {
    visibility: hidden;
}

.first-screen .first-button a:first-child {
    margin-bottom: 20px;
}

.first-screen .label {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    visibility: hidden;
    position: relative;
    z-index: 3;
}

@media only screen and (max-width: 1200px) {
    .first-screen .label {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

@media only screen and (max-width: 992px) {
    .first-screen .label {
        font-size: 16px;
        font-size: 1rem;
    }
}

@media only screen and (max-width: 768px) {
    .first-screen .label {
        font-size: 12px;
        font-size: 0.75rem;
    }
}

@media only screen and (max-width: 576px) {
    .first-screen .label {
        font-size: 16px;
        font-size: 1rem;
        text-align: right;
        display: none;
    }
}

.first-screen .subtitle {
    font-size: 32px;
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 30px;
    visibility: hidden;
    position: relative;
    z-index: 3;
}

@media only screen and (max-width: 1200px) {
    .first-screen .subtitle {
        font-size: 24px;
        font-size: 1.5rem;
    }
}

@media only screen and (max-width: 768px) {
    .first-screen .subtitle {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

@media only screen and (max-width: 576px) {
    .first-screen .subtitle {
        font-size: 14px;
        font-size: 0.875rem;
        text-align: left;
        margin-right: 95px;
        margin-bottom: 15px;
    }
}

.first-screen .subtitle span {
    color: #B689DB;
}

.first-screen .title {
    font-size: 152px;
    font-size: 9.5rem;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.75;
    letter-spacing: -10px;
    visibility: hidden;
    position: relative;
    z-index: 3;
}

@media only screen and (max-width: 1600px) {
    .first-screen .title {
        font-size: 130px;
        font-size: 8.125rem;
    }
}

@media only screen and (max-width: 1400px) {
    .first-screen .title {
        font-size: 110px;
        font-size: 6.875rem;
        letter-spacing: -8px;
    }
}

@media only screen and (max-width: 1200px) {
    .first-screen .title {
        font-size: 90px;
        font-size: 5.625rem;
        letter-spacing: -6px;
    }
}

@media only screen and (max-width: 992px) {
    .first-screen .title {
        font-size: 80px;
        font-size: 5rem;
    }
}

@media only screen and (max-width: 768px) {
    .first-screen .title {
        font-size: 60px;
        font-size: 3.75rem;
    }
}

@media only screen and (max-width: 576px) {
    .first-screen .title {
        font-size: 42px;
        font-size: 2.625rem;
        text-align: left;
        letter-spacing: normal;
    }
}

.first-screen .title span {
    display: block;
    color: #B689DB;
}

@media only screen and (max-width: 576px) {
    .first-screen .title span {
        margin-right: 65px;
    }
}

/*О нас*/
.about {
    position: relative;
    background-color: #99447C;
}

@media only screen and (max-width: 992px) {
    .about {
        padding-bottom: 30px;
    }
}

@media only screen and (max-width: 576px) {
    .about {
        padding: 10px 30px 60px;
    }
}

.about .label-mobile {
    font-size: 14px;
    font-size: 0.875rem;
    color: #8AD7F3;
    text-transform: uppercase;
    line-height: 1;
    margin-left: -20px;
    display: none;
}

@media only screen and (max-width: 576px) {
    .about .label-mobile {
        font-size: 9px;
        font-size: 0.5625rem;
        letter-spacing: 0.04em;
        display: block;
    }
}

.about .label {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 700;
    color: rgba(138, 215, 243, 0.5);
    text-transform: uppercase;
}

@media only screen and (max-width: 1200px) {
    .about .label {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

@media only screen and (max-width: 992px) {
    .about .label {
        font-size: 16px;
        font-size: 1rem;
    }
}

@media only screen and (max-width: 768px) {
    .about .label {
        font-size: 12px;
        font-size: 0.75rem;
    }
}

@media only screen and (max-width: 576px) {
    .about .label {
        font-size: 9px;
        font-size: 0.5625rem;
        letter-spacing: 0.04em;
        margin-left: -20px;
        margin-bottom: 60px;
    }
}

.about .title {
    font-size: 80px;
    font-size: 5rem;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.4;
    letter-spacing: -4px;
    white-space: nowrap;
    margin-bottom: 160px;
}

@media only screen and (max-width: 1600px) {
    .about .title {
        font-size: 70px;
        font-size: 4.375rem;
    }
}

@media only screen and (max-width: 1400px) {
    .about .title {
        font-size: 60px;
        font-size: 3.75rem;
    }
}

@media only screen and (max-width: 1200px) {
    .about .title {
        font-size: 50px;
        font-size: 3.125rem;
    }
}

@media only screen and (max-width: 992px) {
    .about .title {
        font-size: 36px;
        font-size: 2.25rem;
        line-height: 1.2;
        margin-bottom: 60px;
    }
}

@media only screen and (max-width: 768px) {
    .about .title {
        font-size: 28px;
        font-size: 1.75rem;
    }
}

@media only screen and (max-width: 576px) {
    .about .title {
        font-size: 23px;
        font-size: 1.4375rem;
        line-height: 1;
        letter-spacing: -2px;
    }
}

.about p {
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: 300;
}

@media only screen and (max-width: 768px) {
    .about p {
        font-size: 16px;
        font-size: 1rem;
    }
}

.about img {
    border-radius: 3px;
    margin-top: 80px;
    position: relative;
    z-index: 3;
}

@media only screen and (max-width: 1200px) {
    .about img {
        margin-top: 120px;
    }
}

@media only screen and (max-width: 992px) {
    .about img {
        margin: 15px 0 25px;
    }
}

@media only screen and (max-width: 576px) {
    .about img {
        margin: 50px 0 60px;
        box-shadow: 3px 3px 8px 3px rgba(14, 14, 14, 0.3);
    }
}

/*Преподаватель*/
.teacher {
    position: relative;
    background-color: #622C84;
}

.teacher:after {
    content: "";
    display: block;
    width: 100%;
    height: 20px;
    position: absolute;
    top: 0;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(14, 14, 14, 0.4) 0%, #622c84 70%);
}

@media only screen and (max-width: 992px) {
    .teacher:after {
        background: none;
    }
}

@media only screen and (max-width: 767px) {
    .teacher {
        padding: 60px 0;
    }
}

@media only screen and (max-width: 576px) {
    .teacher {
        padding: 100px 30px 60px;
    }
}

.teacher .runway {
    font-size: 155px;
    font-size: 9.6875rem;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.8;
    color: rgba(217, 217, 217, 0.25);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
}

@media only screen and (max-width: 992px) {
    .teacher .runway {
        font-size: 90px;
        font-size: 5.625rem;
    }
}

@media only screen and (max-width: 767px) {
    .teacher .runway {
        display: none;
    }
}

.teacher .text-vertical {
    font-size: 155px;
    font-size: 9.6875rem;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.8;
    color: rgba(217, 217, 217, 0.25);
    writing-mode: sideways-lr;
    position: relative;
    z-index: 3;
}

@media only screen and (max-width: 992px) {
    .teacher .text-vertical {
        font-size: 90px;
        font-size: 5.625rem;
    }
}

.teacher .video {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    max-width: 380px;
    background-color: #99447C;
    position: relative;
}

@media only screen and (max-width: 992px) {
    .teacher .video {
        padding: 15px;
    }
}

@media only screen and (max-width: 576px) {
    .teacher .video {
        max-width: none;
        padding: 0;
        margin-bottom: 60px;
    }
}

.teacher .video img {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.teacher .video .link-video {
    padding: 10px;
    position: absolute;
    top: calc(50% - 40px);
    left: calc(50% - 15px);
}

.teacher .video .link-video:hover svg {
    fill: #99447C;
}

.teacher .video .link-video svg {
    transition: all 0.2s linear;
    fill: #FFFFFF;
}

.teacher .teacher-info {
    max-width: 220px;
    margin-left: 65px;
}

@media only screen and (max-width: 992px) {
    .teacher .teacher-info {
        margin-left: 30px;
    }
}

@media only screen and (max-width: 576px) {
    .teacher .teacher-info {
        max-width: none;
        margin-top: 30px;
        margin-left: 0;
    }
}

.teacher .teacher-info p {
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: 200;
}

@media only screen and (max-width: 576px) {
    .teacher .teacher-info p {
        font-size: 16px;
        font-size: 1rem;
    }
}

.teacher .teacher-info p:last-child {
    margin: 0;
}

/*Описание курса*/
.course {
    padding-top: 80px;
    background-color: #622C84;
}

@media only screen and (max-width: 576px) {
    .course {
        margin-top: -1px;
    }
}

.course .item-info {
    height: 100%;
    padding: 40px 60px;
    box-shadow: 0 -20px 50px 30px rgba(56, 13, 82, 0.6);
    position: relative;
    z-index: 4;
}

@media only screen and (max-width: 1400px) {
    .course .item-info {
        padding: 40px;
    }
}

@media only screen and (max-width: 1200px) {
    .course .item-info {
        padding: 30px;
    }
}

@media only screen and (max-width: 992px) {
    .course .item-info {
        box-shadow: none;
        padding-bottom: 80px;
    }
}

@media only screen and (max-width: 576px) {
    .course .item-info {
        margin-left: -15px;
        margin-right: -15px;
    }
}

.course .item-info.green {
    background-color: #3D9390;
}

.course .item-info.red {
    background-color: #99447C;
}

.course .item-info .item-list {
    display: flex;
    align-items: flex-end;
    margin-top: -50px;
    margin-bottom: 80px;
}

@media only screen and (max-width: 992px) {
    .course .item-info .item-list {
        margin-top: -30px;
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 768px) {
    .course .item-info .item-list {
        margin-top: -60px;
    }
}

.course .item-info .item-list img {
    border-radius: 3px;
    margin-top: -25px;
    margin-right: 15px;
}

@media only screen and (max-width: 1400px) {
    .course .item-info .item-list img {
        max-width: 100px;
    }
}

@media only screen and (max-width: 992px) {
    .course .item-info .item-list img {
        max-width: 80px;
    }
}

@media only screen and (max-width: 768px) {
    .course .item-info .item-list img {
        margin-top: 0;
    }
}

.course .item-info .item-list .list-title {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 400;
    text-transform: uppercase;
}

@media only screen and (max-width: 1400px) {
    .course .item-info .item-list .list-title {
        font-size: 20px;
        font-size: 1.25rem;
    }
}

@media only screen and (max-width: 1200px) {
    .course .item-info .item-list .list-title {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

@media only screen and (max-width: 992px) {
    .course .item-info .item-list .list-title {
        font-size: 16px;
        font-size: 1rem;
        line-height: 1.2;
    }
}

.course .item-info p {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 300;
    margin: 0;
}

@media only screen and (max-width: 1200px) {
    .course .item-info p {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

@media only screen and (max-width: 768px) {
    .course .item-info p {
        font-size: 16px;
        font-size: 1rem;
    }
}

/*Список преимуществ*/
.list-advantages {
    margin-bottom: 60px;
}

@media only screen and (max-width: 576px) {
    .list-advantages {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 576px) {
    .list-advantages .bg-green {
        background-color: #3D9390;
    }
}

.list-advantages .main-info {
    display: flex;
    align-items: flex-start;
    margin-bottom: 105px;
    padding: 70px 80px;
    background-color: #99447C;
    box-shadow: 0 3px 10px 8px rgba(14, 14, 14, 0.3);
}

@media only screen and (max-width: 1400px) {
    .list-advantages .main-info {
        padding: 35px 40px;
    }
}

@media only screen and (max-width: 1200px) {
    .list-advantages .main-info {
        margin-top: 60px;
    }
}

@media only screen and (max-width: 992px) {
    .list-advantages .main-info {
        margin-top: 0;
        padding: 30px;
    }
}

@media only screen and (max-width: 768px) {
    .list-advantages .main-info {
        flex-direction: column;
        align-items: center;
    }
}

@media only screen and (max-width: 576px) {
    .list-advantages .main-info {
        padding: 0 15px;
        box-shadow: none;
        margin: 90px 0 80px;
    }
}

.list-advantages .main-info img {
    border-radius: 3px;
}

@media only screen and (max-width: 992px) {
    .list-advantages .main-info img {
        max-width: 200px;
    }
}

@media only screen and (max-width: 768px) {
    .list-advantages .main-info img {
        width: 100%;
        max-width: none;
        margin-bottom: 30px;
    }
}

.list-advantages .main-info .info-content {
    margin-left: 50px;
}

@media only screen and (max-width: 1200px) {
    .list-advantages .main-info .info-content {
        margin-left: 30px;
    }
}

@media only screen and (max-width: 768px) {
    .list-advantages .main-info .info-content {
        margin-left: 0;
    }
}

.list-advantages .main-info .info-content .info-title {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.4;
    margin-bottom: 15px;
}

@media only screen and (max-width: 1200px) {
    .list-advantages .main-info .info-content .info-title {
        font-size: 20px;
        font-size: 1.25rem;
    }
}

@media only screen and (max-width: 992px) {
    .list-advantages .main-info .info-content .info-title {
        font-size: 16px;
        font-size: 1rem;
    }
}

@media only screen and (max-width: 576px) {
    .list-advantages .main-info .info-content .info-title {
        font-weight: 400;
    }
}

.list-advantages .main-info .info-content p {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 300;
    padding: 0;
}

@media only screen and (max-width: 1400px) {
    .list-advantages .main-info .info-content p {
        font-size: 22px;
        font-size: 1.375rem;
    }
}

@media only screen and (max-width: 1200px) {
    .list-advantages .main-info .info-content p {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

@media only screen and (max-width: 992px) {
    .list-advantages .main-info .info-content p {
        margin: 0;
    }
}

@media only screen and (max-width: 768px) {
    .list-advantages .main-info .info-content p {
        font-size: 16px;
        font-size: 1rem;
    }
}

.list-advantages ul {
    list-style: none;
    padding: 0;
    margin-bottom: 110px;
}

@media only screen and (max-width: 992px) {
    .list-advantages ul {
        margin-bottom: 60px;
    }
}

.list-advantages ul li {
    display: flex;
    margin-bottom: 6px;
}

@media only screen and (max-width: 576px) {
    .list-advantages ul li {
        flex-direction: column;
        margin-left: -15px;
        margin-right: -15px;
        margin-bottom: 3px;
        padding: 90px 30px 30px;
        background-color: #3D9390;
        position: relative;
        box-shadow: 0 20px 10px 8px rgba(14, 14, 14, 0.3);
    }
}

.list-advantages ul li:last-child {
    display: none;
}

@media only screen and (max-width: 576px) {
    .list-advantages ul li:last-child {
        padding: 20px 0;
        display: block;
        box-shadow: none;
    }
}

.list-advantages ul li img {
    border-radius: 3px;
    width: 202px;
    min-width: 202px;
}

@media only screen and (max-width: 992px) {
    .list-advantages ul li img {
        max-width: 160px;
        min-width: auto;
        -o-object-fit: cover;
        object-fit: cover;
    }
}

@media only screen and (max-width: 576px) {
    .list-advantages ul li img {
        border-radius: 0;
        width: 100%;
        max-width: none;
        z-index: 3;
        box-shadow: 0 10px 15px 15px rgba(14, 14, 14, 0.2);
    }
}

.list-advantages ul li .item-advantages {
    border-radius: 3px;
    display: flex;
    align-items: center;
    padding: 40px 100px;
    margin-left: 20px;
    background-color: #3D9390;
    box-shadow: 0 3px 10px 8px rgba(14, 14, 14, 0.3);
}

@media only screen and (max-width: 1200px) {
    .list-advantages ul li .item-advantages {
        padding: 40px;
    }
}

@media only screen and (max-width: 992px) {
    .list-advantages ul li .item-advantages {
        padding: 15px 30px;
    }
}

@media only screen and (max-width: 576px) {
    .list-advantages ul li .item-advantages {
        border-radius: 0;
        padding: 40px 0;
        margin: 0;
        box-shadow: none;
    }
}

.list-advantages ul li .item-advantages p {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 300;
    margin: 0;
}

@media only screen and (max-width: 992px) {
    .list-advantages ul li .item-advantages p {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

@media only screen and (max-width: 768px) {
    .list-advantages ul li .item-advantages p {
        font-size: 16px;
        font-size: 1rem;
    }
}

/*Работы курса*/
.work-course,
.work-mentor {
    padding-top: 90px;
    margin-bottom: 100px;
    background-color: #3D9390;
}

@media only screen and (max-width: 1200px) {
    .work-course,
  .work-mentor {
        margin-bottom: 50px;
    }
}

@media only screen and (max-width: 992px) {
    .work-course,
  .work-mentor {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 576px) {
    .work-course,
  .work-mentor {
        margin-top: -1px;
        padding-bottom: 80px;
    }
}

.work-course .main-title,
.work-mentor .main-title {
    margin-bottom: 80px;
}

@media only screen and (max-width: 768px) {
    .work-course .main-title,
  .work-mentor .main-title {
        margin-bottom: 40px;
    }
}

/*Кому будет полезно*/
.benefits {
    margin-bottom: 110px;
}

@media only screen and (max-width: 992px) {
    .benefits {
        margin-bottom: 100px;
    }
}

@media only screen and (max-width: 576px) {
    .benefits {
        margin-bottom: 60px;
    }
}

.benefits .main-title {
    padding: 100px 0 180px;
}

@media only screen and (max-width: 1200px) {
    .benefits .main-title {
        padding: 50px 0 90px;
    }
}

@media only screen and (max-width: 768px) {
    .benefits .main-title {
        padding: 70px 0 50px;
    }
}

.benefits ul.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

@media only screen and (max-width: 576px) {
    .benefits ul.benefits-list {
        margin-left: -15px;
        margin-right: -15px;
    }
}

.benefits ul.benefits-list li {
    border-radius: 3px;
    display: flex;
    align-items: flex-start;
    padding-left: 45px;
    margin-bottom: 15px;
    background-color: #99447C;
}

@media only screen and (max-width: 576px) {
    .benefits ul.benefits-list li {
        padding: 20px 25px;
        border-bottom: 1px solid #FFFFFF;
    }

    .benefits ul.benefits-list li:last-child {
        border-bottom: none;
    }
}

@media only screen and (max-width: 576px) {
    .benefits ul.benefits-list li img {
        width: 23px;
        height: 23px;
    }
}

.benefits ul.benefits-list li .benefits-content {
    margin-left: 48px;
    padding: 30px 65px;
    width: 100%;
    box-shadow: 6px 3px 8px 6px rgba(14, 14, 14, 0.3);
    position: relative;
}

.benefits ul.benefits-list li .benefits-content:before {
    content: "";
    width: calc(100% + 8px);
    height: 8px;
    background-color: #99447C;
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
}

.benefits ul.benefits-list li .benefits-content:after {
    content: "";
    width: 8px;
    height: 100%;
    background-color: #99447C;
    position: absolute;
    top: 0;
    left: -8px;
    bottom: 0;
}

@media only screen and (max-width: 992px) {
    .benefits ul.benefits-list li .benefits-content {
        margin-left: 30px;
    }
}

@media only screen and (max-width: 576px) {
    .benefits ul.benefits-list li .benefits-content {
        margin-left: 15px;
        box-shadow: none;
        padding: 0;
    }
}

.benefits ul.benefits-list li .benefits-content .title {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 15px;
}

@media only screen and (max-width: 992px) {
    .benefits ul.benefits-list li .benefits-content .title {
        font-size: 20px;
        font-size: 1.25rem;
        margin-bottom: 10px;
    }
}

@media only screen and (max-width: 768px) {
    .benefits ul.benefits-list li .benefits-content .title {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

@media only screen and (max-width: 576px) {
    .benefits ul.benefits-list li .benefits-content .title {
        font-weight: 300;
        margin-bottom: 20px;
    }
}

.benefits ul.benefits-list li .benefits-content p {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.2;
    max-width: 600px;
    margin: 0;
}

@media only screen and (max-width: 992px) {
    .benefits ul.benefits-list li .benefits-content p {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

@media only screen and (max-width: 768px) {
    .benefits ul.benefits-list li .benefits-content p {
        font-size: 16px;
        font-size: 1rem;
    }
}

@media only screen and (max-width: 576px) {
    .benefits ul.benefits-list li .benefits-content p {
        font-size: 14px;
        font-size: 0.875rem;
        line-height: 22px;
    }
}

/*Онлайн встреча*/
.meeting {
    padding-top: 80px;
    padding-bottom: 140px;
    background-color: #3D9390;
}

@media only screen and (max-width: 992px) {
    .meeting {
        padding-bottom: 60px;
    }
}

@media only screen and (max-width: 768px) {
    .meeting {
        padding-bottom: 30px;
    }
}

@media only screen and (max-width: 576px) {
    .meeting {
        padding-top: 80px;
    }
}

.meeting .main-title {
    margin-bottom: 80px;
}

@media only screen and (max-width: 576px) {
    .meeting .main-title {
        color: #0E0E0E;
        margin-bottom: 0;
    }
}

.meeting .main-meeting {
    border-radius: 3px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    margin-bottom: 100px;
    background-color: #3D9390;
    box-shadow: 6px 3px 8px 6px rgba(14, 14, 14, 0.3);
}

@media only screen and (max-width: 768px) {
    .meeting .main-meeting {
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 576px) {
    .meeting .main-meeting {
        margin-left: -15px;
        margin-right: -15px;
        padding: 10px 15px 50px 70px;
        box-shadow: none;
        border-bottom: 1px solid #FFFFFF;
    }
}

.meeting .main-meeting .subtitle {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 300;
}

@media only screen and (max-width: 576px) {
    .meeting .main-meeting .subtitle {
        display: none;
    }
}

.meeting .main-meeting .title {
    font-size: 48px;
    font-size: 3rem;
    font-weight: 600;
    text-transform: uppercase;
}

@media only screen and (max-width: 992px) {
    .meeting .main-meeting .title {
        font-size: 36px;
        font-size: 2.25rem;
    }
}

@media only screen and (max-width: 768px) {
    .meeting .main-meeting .title {
        font-size: 24px;
        font-size: 1.5rem;
        margin-bottom: 10px;
    }
}

@media only screen and (max-width: 576px) {
    .meeting .main-meeting .title {
        font-size: 20px;
        font-size: 1.25rem;
        text-align: left;
        width: 100%;
        margin-bottom: 20px;
    }
}

.meeting .main-meeting p {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 300;
    max-width: 700px;
    margin: 0;
}

@media only screen and (max-width: 992px) {
    .meeting .main-meeting p {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

@media only screen and (max-width: 768px) {
    .meeting .main-meeting p {
        font-size: 16px;
        font-size: 1rem;
    }
}

@media only screen and (max-width: 576px) {
    .meeting .main-meeting p {
        color: #0E0E0E;
        text-align: left;
    }
}

.meeting .meeting-items {
    display: flex;
    justify-content: space-between;
}

@media only screen and (max-width: 992px) {
    .meeting .meeting-items {
        flex-direction: column;
    }
}

@media only screen and (max-width: 768px) {
    .meeting .meeting-items {
        margin-top: 15px;
    }
}

.meeting .meeting-items .meeting-list {
    margin-bottom: 100px;
}

@media only screen and (max-width: 992px) {
    .meeting .meeting-items .meeting-list {
        display: flex;
        align-items: flex-end;
    }
}

@media only screen and (max-width: 768px) {
    .meeting .meeting-items .meeting-list {
        margin-bottom: 15px;
    }
}

.meeting .meeting-items .meeting-list img {
    width: 63px;
    height: 63px;
    margin-bottom: 15px;
}

@media only screen and (max-width: 992px) {
    .meeting .meeting-items .meeting-list img {
        margin-right: 15px;
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 576px) {
    .meeting .meeting-items .meeting-list img {
        width: 30px;
        height: 30px;
    }
}

.meeting .meeting-items .meeting-list .title {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: uppercase;
}

@media only screen and (max-width: 1400px) {
    .meeting .meeting-items .meeting-list .title {
        font-size: 20px;
        font-size: 1.25rem;
    }
}

@media only screen and (max-width: 1200px) {
    .meeting .meeting-items .meeting-list .title {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

.meeting .meeting-info {
    border-radius: 5px;
    width: 33.3333333333%;
    margin-right: 60px;
    padding: 50px 40px;
    background-color: #3D9390;
    box-shadow: 6px 3px 8px 6px rgba(14, 14, 14, 0.3);
}

@media only screen and (max-width: 1400px) {
    .meeting .meeting-info {
        margin-right: 30px;
    }
}

@media only screen and (max-width: 1200px) {
    .meeting .meeting-info {
        padding: 40px 30px;
    }
}

@media only screen and (max-width: 992px) {
    .meeting .meeting-info {
        width: 100%;
        padding: 30px;
        margin: 0 0 30px;
        box-shadow: none;
    }
}

@media only screen and (max-width: 576px) {
    .meeting .meeting-info {
        padding: 15px;
    }
}

.meeting .meeting-info:last-child {
    margin-right: 0;
}

.meeting .meeting-info p {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 300;
    margin: 0;
}

@media only screen and (max-width: 1400px) {
    .meeting .meeting-info p {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

@media only screen and (max-width: 768px) {
    .meeting .meeting-info p {
        font-size: 16px;
        font-size: 1rem;
    }
}

.meeting .meeting-info p span {
    font-size: 32px;
    font-size: 2rem;
}

@media only screen and (max-width: 1400px) {
    .meeting .meeting-info p span {
        font-size: 28px;
        font-size: 1.75rem;
    }
}

@media only screen and (max-width: 576px) {
    .meeting .meeting-info p span {
        font-size: 24px;
        font-size: 1.5rem;
    }
}

/*Большой слайдер*/
.big-slider {
    padding: 100px 0;
    background-color: #622C84;
}

@media only screen and (max-width: 992px) {
    .big-slider {
        padding: 80px 0;
    }
}

.big-slider .bigSwiper {
    margin-top: 80px;
}

@media only screen and (max-width: 992px) {
    .big-slider .bigSwiper {
        margin-top: 50px;
    }
}

@media only screen and (max-width: 768px) {
    .big-slider .bigSwiper {
        margin-top: 30px;
    }
}

.big-slider .bigSwiper .swiper-slide {
    display: flex;
}

.big-slider .bigSwiper .swiper-slide .left-half,
.big-slider .bigSwiper .swiper-slide .right-half {
    text-align: left;
    width: 50%;
}

.big-slider .bigSwiper .swiper-slide .left-half {
    margin-right: 30px;
}

@media only screen and (max-width: 576px) {
    .big-slider .bigSwiper .swiper-slide .left-half {
        width: 100%;
        margin-right: 0;
        padding-left: 15px;
        padding-right: 15px;
    }
}

.big-slider .bigSwiper .swiper-slide .left-half img {
    margin-bottom: 30px;
}

@media only screen and (max-width: 992px) {
    .big-slider .bigSwiper .swiper-slide .left-half img {
        margin-bottom: 15px;
    }
}

@media only screen and (max-width: 576px) {
    .big-slider .bigSwiper .swiper-slide .left-half img {
        margin-bottom: 50px;
    }
}

.big-slider .bigSwiper .swiper-slide .left-half .mobile-title {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: none;
}

@media only screen and (max-width: 576px) {
    .big-slider .bigSwiper .swiper-slide .left-half .mobile-title {
        display: block;
        margin-left: 30px;
        margin-bottom: 0;
    }
}

.big-slider .bigSwiper .swiper-slide .left-half .data-start {
    font-size: 36px;
    font-size: 2.25rem;
    font-weight: 400;
    margin-bottom: 40px;
    margin-left: 30px;
}

@media only screen and (max-width: 1200px) {
    .big-slider .bigSwiper .swiper-slide .left-half .data-start {
        font-size: 32px;
        font-size: 2rem;
        margin-left: 0;
    }
}

@media only screen and (max-width: 992px) {
    .big-slider .bigSwiper .swiper-slide .left-half .data-start {
        font-size: 24px;
        font-size: 1.5rem;
        margin-bottom: 15px;
    }
}

@media only screen and (max-width: 768px) {
    .big-slider .bigSwiper .swiper-slide .left-half .data-start {
        font-size: 20px;
        font-size: 1.25rem;
    }
}

@media only screen and (max-width: 576px) {
    .big-slider .bigSwiper .swiper-slide .left-half .data-start {
        font-weight: 300;
        margin-left: 30px;
        margin-bottom: 30px;
    }
}

.big-slider .bigSwiper .swiper-slide .left-half p {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 300;
    max-width: 480px;
    margin-left: 30px;
    margin-bottom: 40px;
}

@media only screen and (max-width: 1200px) {
    .big-slider .bigSwiper .swiper-slide .left-half p {
        font-size: 20px;
        font-size: 1.25rem;
        margin-left: 0;
    }
}

@media only screen and (max-width: 992px) {
    .big-slider .bigSwiper .swiper-slide .left-half p {
        margin-bottom: 15px;
    }
}

@media only screen and (max-width: 768px) {
    .big-slider .bigSwiper .swiper-slide .left-half p {
        font-size: 16px;
        font-size: 1rem;
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 576px) {
    .big-slider .bigSwiper .swiper-slide .left-half p {
        font-size: 14px;
        font-size: 0.875rem;
        margin-left: 30px;
        margin-bottom: 10px;
    }
}

.big-slider .bigSwiper .swiper-slide .left-half p.mobile-price {
    display: none;
}

@media only screen and (max-width: 576px) {
    .big-slider .bigSwiper .swiper-slide .left-half p.mobile-price {
        font-size: 16px;
        font-size: 1rem;
        font-weight: 400;
        display: block;
        margin-bottom: 30px;
    }
}

.big-slider .bigSwiper .swiper-slide .left-half .link-signup {
    max-width: 280px;
    margin-left: 30px;
}

@media only screen and (max-width: 1200px) {
    .big-slider .bigSwiper .swiper-slide .left-half .link-signup {
        margin-left: 0;
    }
}

@media only screen and (max-width: 992px) {
    .big-slider .bigSwiper .swiper-slide .left-half .link-signup {
        display: inline-block;
        width: auto;
        padding: 12px 30px;
        max-width: none;
    }
}

@media only screen and (max-width: 576px) {
    .big-slider .bigSwiper .swiper-slide .left-half .link-signup {
        margin: 0 auto;
        display: block;
        max-width: 200px;
    }
}

@media only screen and (max-width: 576px) {
    .big-slider .bigSwiper .swiper-slide .right-half {
        display: none;
    }
}

.big-slider .bigSwiper .swiper-slide .right-half .subtitle {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-top: 80px;
    margin-bottom: 20px;
}

@media only screen and (max-width: 1400px) {
    .big-slider .bigSwiper .swiper-slide .right-half .subtitle {
        margin-top: 50px;
    }
}

@media only screen and (max-width: 1200px) {
    .big-slider .bigSwiper .swiper-slide .right-half .subtitle {
        margin-top: 20px;
    }
}

@media only screen and (max-width: 992px) {
    .big-slider .bigSwiper .swiper-slide .right-half .subtitle {
        font-size: 20px;
        font-size: 1.25rem;
    }
}

@media only screen and (max-width: 768px) {
    .big-slider .bigSwiper .swiper-slide .right-half .subtitle {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

.big-slider .bigSwiper .swiper-slide .right-half .subtitle span {
    color: #B689DB;
}

.big-slider .bigSwiper .swiper-slide .right-half .title {
    font-size: 100px;
    font-size: 6.25rem;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.75;
}

@media only screen and (max-width: 1400px) {
    .big-slider .bigSwiper .swiper-slide .right-half .title {
        font-size: 80px;
        font-size: 5rem;
    }
}

@media only screen and (max-width: 1200px) {
    .big-slider .bigSwiper .swiper-slide .right-half .title {
        font-size: 70px;
        font-size: 4.375rem;
    }
}

@media only screen and (max-width: 992px) {
    .big-slider .bigSwiper .swiper-slide .right-half .title {
        font-size: 56px;
        font-size: 3.5rem;
    }
}

@media only screen and (max-width: 768px) {
    .big-slider .bigSwiper .swiper-slide .right-half .title {
        font-size: 40px;
        font-size: 2.5rem;
    }
}

.big-slider .bigSwiper .swiper-slide .right-half .title span {
    color: #B689DB;
    display: block;
}

.big-slider .bigSwiper .swiper-slide .right-half .small-title {
    font-size: 48px;
    font-size: 3rem;
    text-transform: uppercase;
    white-space: nowrap;
    margin-bottom: 100px;
}

@media only screen and (max-width: 1400px) {
    .big-slider .bigSwiper .swiper-slide .right-half .small-title {
        font-size: 44px;
        font-size: 2.75rem;
        margin-bottom: 110px;
    }
}

@media only screen and (max-width: 1200px) {
    .big-slider .bigSwiper .swiper-slide .right-half .small-title {
        font-size: 36px;
        font-size: 2.25rem;
        margin-bottom: 105px;
    }
}

@media only screen and (max-width: 992px) {
    .big-slider .bigSwiper .swiper-slide .right-half .small-title {
        font-size: 30px;
        font-size: 1.875rem;
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 768px) {
    .big-slider .bigSwiper .swiper-slide .right-half .small-title {
        font-size: 22px;
        font-size: 1.375rem;
    }
}

.big-slider .bigSwiper .swiper-slide .right-half p {
    font-size: 32px;
    font-size: 2rem;
    font-weight: 300;
    text-transform: uppercase;
    margin: 0;
}

@media only screen and (max-width: 1400px) {
    .big-slider .bigSwiper .swiper-slide .right-half p {
        font-size: 28px;
        font-size: 1.75rem;
    }
}

@media only screen and (max-width: 1200px) {
    .big-slider .bigSwiper .swiper-slide .right-half p {
        font-size: 26px;
        font-size: 1.625rem;
    }
}

@media only screen and (max-width: 992px) {
    .big-slider .bigSwiper .swiper-slide .right-half p {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

@media only screen and (max-width: 768px) {
    .big-slider .bigSwiper .swiper-slide .right-half p {
        font-size: 14px;
        font-size: 0.875rem;
    }
}

.big-slider .bigSwiper .wrap-button {
    display: flex;
    justify-content: center;
    margin-top: 60px;
}

@media only screen and (max-width: 576px) {
    .big-slider .bigSwiper .wrap-button {
        margin-top: 0;
    }
}

/*Программа курса*/
.program-course {
    background-color: #3D9390;
}

@media only screen and (max-width: 576px) {
    .program-course {
        background-color: #99447C;
    }
}

.program-course .main-title {
    padding: 100px 0;
}

@media only screen and (max-width: 992px) {
    .program-course .main-title {
        padding: 60px 0;
    }
}

@media only screen and (max-width: 576px) {
    .program-course .main-title {
        padding: 80px 0 0;
    }
}

/*Модуль курса*/
.module.green {
    background-color: #3D9390;
}

.module .module-head {
    padding: 80px 0;
}

@media only screen and (max-width: 992px) {
    .module .module-head {
        padding: 40px 0;
    }
}

@media only screen and (max-width: 576px) {
    .module .module-head {
        padding: 50px 15px 30px;
        overflow: hidden;
    }
}

.module .module-head.red {
    background-color: #99447C;
}

.module .module-head.red .module-name {
    color: rgba(255, 255, 255, 0.37);
}

@media only screen and (max-width: 576px) {
    .module .module-head.red .module-name {
        color: #FFFFFF;
    }
}

.module .module-head.green {
    background-color: #3D9390;
}

.module .module-head.green .module-name {
    color: rgba(255, 255, 255, 0.37);
}

@media only screen and (max-width: 576px) {
    .module .module-head.green .module-name {
        color: #FFFFFF;
    }
}

.module .module-head .module-name {
    font-size: 64px;
    font-size: 4rem;
    font-weight: 400;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    margin-bottom: 50px;
}

@media only screen and (max-width: 1400px) {
    .module .module-head .module-name {
        font-size: 48px;
        font-size: 3rem;
        margin-bottom: 30px;
    }

    .module .module-head .module-name svg {
        width: 30px;
    }
}

@media only screen and (max-width: 992px) {
    .module .module-head .module-name {
        font-size: 48px;
        font-size: 3rem;
    }
}

@media only screen and (max-width: 768px) {
    .module .module-head .module-name {
        font-size: 32px;
        font-size: 2rem;
    }
}

@media only screen and (max-width: 576px) {
    .module .module-head .module-name {
        font-size: 14px;
        font-size: 0.875rem;
        font-weight: 500;
        color: #FFFFFF;
        margin-bottom: 15px;
    }

    .module .module-head .module-name svg {
        width: 15px;
        fill: #FFC107;
    }
}

.module .module-head .module-name svg {
    margin-right: 20px;
}

.module .module-head img {
    box-shadow: 10px 10px 20px 6px rgba(14, 14, 14, 0.4);
}

@media only screen and (max-width: 768px) {
    .module .module-head img {
        width: 100%;
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 576px) {
    .module .module-head img {
        box-shadow: 3px 3px 8px 3px rgba(14, 14, 14, 0.3);
    }
}

.module .module-head .title {
    font-size: 28px;
    font-size: 1.75rem;
    margin-bottom: 30px;
    line-height: 1.4;
}

@media only screen and (max-width: 1400px) {
    .module .module-head .title {
        font-size: 24px;
        font-size: 1.5rem;
    }
}

@media only screen and (max-width: 992px) {
    .module .module-head .title {
        font-size: 20px;
        font-size: 1.25rem;
        margin-bottom: 15px;
    }
}

@media only screen and (max-width: 576px) {
    .module .module-head .title {
        font-weight: 300;
        text-transform: uppercase;
        position: relative;
        padding-bottom: 15px;
    }

    .module .module-head .title:after {
        content: "";
        width: 120%;
        height: 1px;
        position: absolute;
        left: -30px;
        bottom: 0;
        background-color: #FFFFFF;
    }
}

.module .module-head p {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 300;
}

@media only screen and (max-width: 1400px) {
    .module .module-head p {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

@media only screen and (max-width: 768px) {
    .module .module-head p {
        font-size: 16px;
        font-size: 1rem;
    }
}

.module .module-head a.link-more {
    font-size: 20px;
    font-size: 1.25rem;
    color: #FFFFFF;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    align-items: center;
    margin-top: 60px;
}

@media only screen and (max-width: 1400px) {
    .module .module-head a.link-more {
        margin-top: 40px;
    }
}

@media only screen and (max-width: 992px) {
    .module .module-head a.link-more {
        font-size: 18px;
        font-size: 1.125rem;
        margin-top: 15px;
    }
}

@media only screen and (max-width: 768px) {
    .module .module-head a.link-more {
        font-size: 16px;
        font-size: 1rem;
    }
}

@media only screen and (max-width: 576px) {
    .module .module-head a.link-more {
        font-size: 12px;
        font-size: 0.75rem;
    }
}

.module .module-head a.link-more:hover {
    color: #FFC107;
}

.module .module-head a.link-more:hover span {
    background-color: #FFC107;
}

.module .module-head a.link-more.open span svg {
    transform: rotate(-180deg);
}

.module .module-head a.link-more span {
    transition: all 0.2s linear;
    margin-left: 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    background-color: #FFFFFF;
}

@media only screen and (max-width: 992px) {
    .module .module-head a.link-more span {
        width: 26px;
        height: 26px;
        margin-left: 15px;
    }
}

@media only screen and (max-width: 576px) {
    .module .module-head a.link-more span {
        width: 20px;
        height: 20px;
    }
}

.module .module-head a.link-more span svg {
    transition: all 0.2s linear;
}

@media only screen and (max-width: 992px) {
    .module .module-head a.link-more span svg {
        width: 12px;
    }
}

@media only screen and (max-width: 576px) {
    .module .module-head a.link-more span svg {
        width: 8px;
    }
}

.module .module-content {
    color: #0E0E0E;
    padding: 100px 130px;
    display: none;
    background-color: #D3D1D3;
}

@media only screen and (max-width: 1400px) {
    .module .module-content {
        padding: 50px 70px;
    }
}

@media only screen and (max-width: 1200px) {
    .module .module-content {
        padding: 30px 40px;
    }
}

.module .module-content .col-lg-6 {
    padding: 0 25px;
}

@media only screen and (max-width: 992px) {
    .module .module-content .col-lg-6 {
        padding: 0 15px;
    }
}

.module .module-content .name {
    font-size: 36px;
    font-size: 2.25rem;
    text-transform: uppercase;
}

@media only screen and (max-width: 992px) {
    .module .module-content .name {
        font-size: 32px;
        font-size: 2rem;
    }
}

@media only screen and (max-width: 768px) {
    .module .module-content .name {
        font-size: 24px;
        font-size: 1.5rem;
    }
}

.module .module-content .title {
    font-size: 24px;
    font-size: 1.5rem;
    margin-bottom: 30px;
}

@media only screen and (max-width: 992px) {
    .module .module-content .title {
        font-size: 20px;
        font-size: 1.25rem;
    }
}

@media only screen and (max-width: 768px) {
    .module .module-content .title {
        font-size: 18px;
        font-size: 1.125rem;
        margin-bottom: 15px;
    }
}

.module .module-content .title-red {
    font-size: 20px;
    font-size: 1.25rem;
    color: #99447C;
    text-transform: uppercase;
    margin-bottom: 10px;
}

@media only screen and (max-width: 992px) {
    .module .module-content .title-red {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

.module .module-content .title-green {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 300;
    color: #3D9390;
    padding-left: 30px;
    margin-bottom: 5px;
}

@media only screen and (max-width: 992px) {
    .module .module-content .title-green {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

.module .module-content ul, .module .module-content p {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 300;
}

@media only screen and (max-width: 992px) {
    .module .module-content ul, .module .module-content p {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

@media only screen and (max-width: 768px) {
    .module .module-content ul, .module .module-content p {
        font-size: 16px;
        font-size: 1rem;
    }
}

.module .spacer {
    height: 70px;
}

@media only screen and (max-width: 992px) {
    .module .spacer {
        height: 40px;
    }
}

/*Табы работы ментора*/
.work-mentor {
    padding-top: 0;
    padding-bottom: 100px;
    margin-bottom: 0;
}

@media only screen and (max-width: 992px) {
    .work-mentor {
        margin-bottom: 0;
    }
}

.work-mentor .main-title {
    padding: 120px 0 20px;
}

@media only screen and (max-width: 992px) {
    .work-mentor .main-title {
        padding: 90px 0 20px;
    }
}

.work-mentor .r-tabs-nav {
    display: inline-flex;
    box-shadow: 3px 3px 8px 3px rgba(14, 14, 14, 0.3);
}

.work-mentor .r-tabs-nav .r-tabs-tab {
    margin-right: 4px;
}

.work-mentor .r-tabs-nav .r-tabs-tab:last-child {
    margin-right: 0;
}

/*Часто задаваемые вопросы*/
.faq {
    padding-top: 150px;
    margin-bottom: 180px;
}

@media only screen and (max-width: 992px) {
    .faq {
        margin-bottom: 80px;
    }
}

@media only screen and (max-width: 576px) {
    .faq {
        padding-top: 80px;
    }
}

.faq .main-title {
    margin-bottom: 140px;
}

@media only screen and (max-width: 992px) {
    .faq .main-title {
        margin-bottom: 100px;
    }
}

@media only screen and (max-width: 576px) {
    .faq .main-title {
        margin-bottom: 60px;
    }
}

@media only screen and (max-width: 576px) {
    .faq .faq-accordion {
        margin-left: -15px;
        margin-right: -15px;
    }
}

.faq .faq-accordion .faq-item {
    margin-bottom: 20px;
    position: relative;
    box-shadow: 3px 3px 8px 3px rgba(14, 14, 14, 0.3);
}

@media only screen and (max-width: 576px) {
    .faq .faq-accordion .faq-item {
        margin-bottom: 0;
        box-shadow: none;
        border-bottom: 1px solid #FFFFFF;
    }
}

.faq .faq-accordion .faq-item:before {
    content: "";
    width: calc(100% + 8px);
    height: 8px;
    background-color: #99447C;
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
}

@media only screen and (max-width: 576px) {
    .faq .faq-accordion .faq-item:before {
        display: none;
    }
}

.faq .faq-accordion .faq-item:after {
    content: "";
    width: 8px;
    height: 100%;
    background-color: #99447C;
    position: absolute;
    top: 0;
    left: -8px;
    bottom: 0;
}

.faq .faq-accordion .faq-item .question {
    transition: all 0.2s linear;
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 500;
    text-transform: uppercase;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 30px 60px 30px 75px;
    background-color: #99447C;
}

@media only screen and (max-width: 1200px) {
    .faq .faq-accordion .faq-item .question {
        font-size: 20px;
        font-size: 1.25rem;
        padding: 40px 60px;
    }
}

@media only screen and (max-width: 992px) {
    .faq .faq-accordion .faq-item .question {
        font-size: 18px;
        font-size: 1.125rem;
        padding: 30px;
    }
}

@media only screen and (max-width: 768px) {
    .faq .faq-accordion .faq-item .question {
        font-size: 16px;
        font-size: 1rem;
    }
}

@media only screen and (max-width: 576px) {
    .faq .faq-accordion .faq-item .question {
        font-size: 14px;
        font-size: 0.875rem;
        padding: 15px;
        align-items: flex-start;
    }
}

.faq .faq-accordion .faq-item .question:hover {
    color: #FFC107;
    cursor: pointer;
}

@media only screen and (max-width: 576px) {
    .faq .faq-accordion .faq-item .question:hover {
        color: inherit;
    }
}

.faq .faq-accordion .faq-item .question:hover span {
    background-color: #FFC107;
}

@media only screen and (max-width: 576px) {
    .faq .faq-accordion .faq-item .question:hover span {
        background-color: transparent;
    }
}

.faq .faq-accordion .faq-item .question.open svg {
    transform: rotate(-180deg);
}

.faq .faq-accordion .faq-item .question img {
    margin-right: 30px;
}

@media only screen and (max-width: 576px) {
    .faq .faq-accordion .faq-item .question img {
        display: none;
    }
}

.faq .faq-accordion .faq-item .question span.check {
    display: none;
}

@media only screen and (max-width: 576px) {
    .faq .faq-accordion .faq-item .question span.check {
        display: block;
        margin-top: -2px;
        margin-left: 0;
    }
}

.faq .faq-accordion .faq-item .question p {
    margin: 0 15px 0 0;
}

@media only screen and (max-width: 576px) {
    .faq .faq-accordion .faq-item .question p {
        font-size: 14px;
        font-size: 0.875rem;
        font-weight: 300;
        text-transform: uppercase;
    }
}

.faq .faq-accordion .faq-item .question span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 34px;
    width: 34px;
    height: 34px;
    margin-left: auto;
    background-color: #FFFFFF;
}

@media only screen and (max-width: 576px) {
    .faq .faq-accordion .faq-item .question span {
        min-width: 26px;
        width: 26px;
        height: 26px;
        background: none;
    }
}

.faq .faq-accordion .faq-item .question span svg {
    transition: all 0.2s linear;
    fill: #0E0E0E;
}

@media only screen and (max-width: 576px) {
    .faq .faq-accordion .faq-item .question span svg {
        width: 12px;
        height: 12px;
        fill: #FFFFFF;
    }
}

.faq .faq-accordion .faq-item .answer {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 300;
    color: #0E0E0E;
    line-height: 1.3;
    display: none;
    padding: 20px 125px 20px 165px;
    background-color: #D3D1D3;
}

@media only screen and (max-width: 1200px) {
    .faq .faq-accordion .faq-item .answer {
        padding: 20px 100px 20px 125px;
    }
}

@media only screen and (max-width: 992px) {
    .faq .faq-accordion .faq-item .answer {
        font-size: 18px;
        font-size: 1.125rem;
        padding: 20px 90px;
    }
}

@media only screen and (max-width: 768px) {
    .faq .faq-accordion .faq-item .answer {
        font-size: 16px;
        font-size: 1rem;
        padding: 30px;
    }
}

.faq .faq-accordion .faq-item .spacer {
    height: 6px;
}

/*Форма записи*/
.form-course {
    padding: 140px 0;
    background-color: #622C84;
}

@media only screen and (max-width: 992px) {
    .form-course {
        padding: 60px 0;
    }
}

@media only screen and (max-width: 768px) {
    .form-course {
        padding: 30px 0 40px;
    }
}

@media only screen and (max-width: 576px) {
    .form-course {
        padding: 60px 30px;
    }
}

.form-course .form-title {
    font-size: 67px;
    font-size: 4.1875rem;
    font-weight: 300;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

@media only screen and (max-width: 992px) {
    .form-course .form-title {
        font-size: 48px;
        font-size: 3rem;
    }
}

@media only screen and (max-width: 768px) {
    .form-course .form-title {
        font-size: 32px;
        font-size: 2rem;
        margin-bottom: 15px;
    }
}

@media only screen and (max-width: 576px) {
    .form-course .form-title {
        font-size: 24px;
        font-size: 1.5rem;
    }
}

.form-course .form-title img {
    margin-right: 30px;
}

@media only screen and (max-width: 992px) {
    .form-course .form-title img {
        width: 40px;
    }
}

@media only screen and (max-width: 576px) {
    .form-course .form-title img {
        width: 34px;
        margin-right: 15px;
    }
}

.form-course .subtitle {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 30px;
}

@media only screen and (max-width: 992px) {
    .form-course .subtitle {
        font-size: 20px;
        font-size: 1.25rem;
    }
}

@media only screen and (max-width: 768px) {
    .form-course .subtitle {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

.form-course ul.steps {
    list-style: none;
    padding-left: 0;
    margin-bottom: 40px;
}

@media only screen and (max-width: 768px) {
    .form-course ul.steps {
        margin-bottom: 20px;
    }
}

.form-course ul.steps li {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}

@media only screen and (max-width: 992px) {
    .form-course ul.steps li {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

@media only screen and (max-width: 768px) {
    .form-course ul.steps li {
        font-size: 16px;
        font-size: 1rem;
    }
}

.form-course ul.steps li span {
    white-space: nowrap;
    margin-right: 10px;
}

.form-course p {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 500;
    color: #FFC107;
    margin-bottom: 80px;
}

@media only screen and (max-width: 992px) {
    .form-course p {
        margin-bottom: 40px;
    }
}

@media only screen and (max-width: 768px) {
    .form-course p {
        font-size: 18px;
        font-size: 1.125rem;
        margin-bottom: 30px;
    }
}

.form-course form input[type=email],
.form-course form input[type=text],
.form-course form input[type=number],
.form-course form input[type=password],
.form-course form input[type=tel] {
    font-size: 22px;
    font-size: 1.375rem;
    padding: 18px 15px;
    margin-bottom: 25px;
}

@media only screen and (max-width: 992px) {
    .form-course form input[type=email],
  .form-course form input[type=text],
  .form-course form input[type=number],
  .form-course form input[type=password],
  .form-course form input[type=tel] {
        font-size: 20px;
        font-size: 1.25rem;
        padding: 10px 15px;
    }
}

@media only screen and (max-width: 768px) {
    .form-course form input[type=email],
  .form-course form input[type=text],
  .form-course form input[type=number],
  .form-course form input[type=password],
  .form-course form input[type=tel] {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

/*Мессенджеры*/
.messengers {
    padding: 140px 0;
    background-color: #3D9390;
}

@media only screen and (max-width: 992px) {
    .messengers {
        padding: 80px 0 140px;
    }
}

@media only screen and (max-width: 768px) {
    .messengers {
        padding: 40px 0 100px;
    }
}

@media only screen and (max-width: 576px) {
    .messengers {
        padding: 40px 15px 100px;
    }
}

.messengers .main-title {
    margin-bottom: 80px;
}

@media only screen and (max-width: 768px) {
    .messengers .main-title {
        margin-bottom: 40px;
    }
}

@media only screen and (max-width: 576px) {
    .messengers .main-title {
        margin-bottom: 20px;
    }
}

.messengers .messengers-items {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 60px 130px;
    box-shadow: 6px 3px 8px 6px rgba(14, 14, 14, 0.3);
}

@media only screen and (max-width: 992px) {
    .messengers .messengers-items {
        padding: 30px;
    }
}

@media only screen and (max-width: 768px) {
    .messengers .messengers-items {
        -moz-column-gap: 30px;
        column-gap: 30px;
    }
}

@media only screen and (max-width: 576px) {
    .messengers .messengers-items {
        flex-direction: column;
        -moz-column-gap: 0;
        column-gap: 0;
        box-shadow: none;
    }
}

.messengers .messengers-items .messengers-title {
    font-size: 24px;
    font-size: 1.5rem;
    flex-basis: 100%;
    margin-bottom: 60px;
}

@media only screen and (max-width: 576px) {
    .messengers .messengers-items .messengers-title {
        font-size: 16px;
        font-size: 1rem;
        color: #0E0E0E;
        font-weight: 300;
    }
}

@media only screen and (max-width: 576px) {
    .messengers .messengers-items .left-item {
        margin-bottom: 10px;
    }
}

.messengers .messengers-items p {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 400;
    max-width: 300px;
    line-height: 1.4;
    margin-bottom: 40px;
}

@media only screen and (max-width: 992px) {
    .messengers .messengers-items p {
        font-size: 20px;
        font-size: 1.25rem;
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 768px) {
    .messengers .messengers-items p {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

@media only screen and (max-width: 576px) {
    .messengers .messengers-items p {
        max-width: none;
    }
}

.messengers .messengers-items a.link-messenger {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    color: #0E0E0E;
    display: block;
    padding: 10px 100px;
    margin-bottom: 20px;
    background-color: #D3D1D3;
}

@media only screen and (max-width: 768px) {
    .messengers .messengers-items a.link-messenger {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

@media only screen and (max-width: 576px) {
    .messengers .messengers-items a.link-messenger {
        color: #FFFFFF;
        text-transform: uppercase;
        background: none;
        border: 1px solid #FFFFFF;
    }
}

.messengers .messengers-items a.link-messenger:hover {
    background-color: #FFC107;
}

/*--------------------------------------------------------------
# Подвал
--------------------------------------------------------------*/
/*Подвал сайта*/
.site-footer {
    padding-top: 60px;
    padding-bottom: 140px;
    overflow: hidden;
    background-color: #3D9390;
}

.site-footer .name-socials {
    font-size: 16px;
    font-size: 1rem;
    font-weight: 700;
    color: #8AD7F3;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.site-footer ul.socials {
    list-style: none;
    padding-left: 0;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

@media only screen and (max-width: 576px) {
    .site-footer ul.socials {
        margin-left: 0;
    }
}

.site-footer ul.socials li {
    margin-right: 45px;
    background-color: #0E0E0E;
}

@media only screen and (max-width: 992px) {
    .site-footer ul.socials li {
        margin-right: 30px;
    }
}

@media only screen and (max-width: 576px) {
    .site-footer ul.socials li {
        margin-right: 15px;
        background: none;
    }
}

.site-footer ul.socials li:last-child {
    margin-right: 0;
}

.site-footer ul.socials li a {
    width: 50px;
    height: 52px;
    padding: 8px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width: 576px) {
    .site-footer ul.socials li a {
        padding: 2px;
    }
}

.site-footer ul.socials li a:hover svg {
    fill: #FFC107;
}

.site-footer ul.socials li a svg {
    transition: all 0.2s linear;
    fill: #FFFFFF;
}

@media only screen and (max-width: 992px) {
    .site-footer ul.socials li a svg {
        max-height: 30px;
    }
}

.site-footer ul.footer-menu {
    list-style: none;
    padding-left: 0;
}

@media only screen and (max-width: 992px) {
    .site-footer ul.footer-menu {
        margin: 0;
    }
}

@media only screen and (max-width: 576px) {
    .site-footer ul.footer-menu {
        margin-left: 15px;
        margin-bottom: 60px;
    }
}

.site-footer ul.footer-menu li a {
    font-size: 16px;
    font-size: 1rem;
    font-weight: 300;
    color: #FFFFFF;
    text-decoration: none;
    text-transform: uppercase;
    padding: 10px 0;
    display: inline-block;
}

@media only screen and (max-width: 992px) {
    .site-footer ul.footer-menu li a {
        padding: 5px 0;
    }
}

.site-footer ul.footer-menu li a:hover {
    color: #FFC107;
}

.site-footer .footer-logo {
    margin-bottom: 60px;
}

@media only screen and (max-width: 992px) {
    .site-footer .footer-logo {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 576px) {
    .site-footer .footer-logo {
        margin-left: 15px;
        margin-bottom: 30px;
    }
}

.site-footer .footer-logo img {
    margin-bottom: 10px;
}

@media only screen and (max-width: 1200px) {
    .site-footer .footer-logo img {
        max-width: 300px;
    }
}

.site-footer .footer-logo .logo-name {
    display: flex;
    align-items: flex-end;
}

.site-footer .footer-logo .logo-name .logo-title {
    font-size: 42px;
    font-size: 2.625rem;
    font-weight: 500;
    line-height: 1;
    margin-right: 15px;
}

@media only screen and (max-width: 1200px) {
    .site-footer .footer-logo .logo-name .logo-title {
        font-size: 30px;
        font-size: 1.875rem;
        margin-right: 10px;
    }
}

.site-footer .footer-logo .logo-name .logo-subtitle {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 200;
    line-height: 1.4;
}

@media only screen and (max-width: 1200px) {
    .site-footer .footer-logo .logo-name .logo-subtitle {
        font-size: 20px;
        font-size: 1.25rem;
        line-height: 1.2;
    }
}

@media only screen and (max-width: 992px) {
    .site-footer .footer-half {
        margin-top: 60px;
    }
}

.site-footer .footer-half .subtitle {
    font-size: 28px;
    font-size: 1.75rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-top: 80px;
    margin-bottom: 20px;
}

@media only screen and (max-width: 1400px) {
    .site-footer .footer-half .subtitle {
        margin-top: 50px;
    }
}

@media only screen and (max-width: 1200px) {
    .site-footer .footer-half .subtitle {
        font-size: 24px;
        font-size: 1.5rem;
        margin-top: 20px;
    }
}

@media only screen and (max-width: 768px) {
    .site-footer .footer-half .subtitle {
        font-size: 20px;
        font-size: 1.25rem;
    }
}

.site-footer .footer-half .subtitle span {
    color: rgba(141, 182, 193, 0.45);
}

.site-footer .footer-half .title {
    font-size: 125px;
    font-size: 7.8125rem;
    font-weight: 400;
    color: #B7D7D6;
    text-transform: uppercase;
    line-height: 0.75;
}

@media only screen and (max-width: 1400px) {
    .site-footer .footer-half .title {
        font-size: 100px;
        font-size: 6.25rem;
    }
}

@media only screen and (max-width: 1200px) {
    .site-footer .footer-half .title {
        font-size: 90px;
        font-size: 5.625rem;
    }
}

@media only screen and (max-width: 768px) {
    .site-footer .footer-half .title {
        font-size: 80px;
        font-size: 5rem;
    }
}

.site-footer .footer-half .title span {
    color: #82A1BF;
    display: block;
}

.site-footer .footer-half .small-title {
    font-size: 68px;
    font-size: 4.25rem;
    color: #A2CBCA;
    text-transform: uppercase;
    white-space: nowrap;
    margin-bottom: 100px;
}

@media only screen and (max-width: 1400px) {
    .site-footer .footer-half .small-title {
        font-size: 54px;
        font-size: 3.375rem;
        margin-bottom: 110px;
    }
}

@media only screen and (max-width: 1200px) {
    .site-footer .footer-half .small-title {
        font-size: 48px;
        font-size: 3rem;
        margin-bottom: 105px;
    }
}

@media only screen and (max-width: 992px) {
    .site-footer .footer-half .small-title {
        margin-bottom: 40px;
    }
}

@media only screen and (max-width: 768px) {
    .site-footer .footer-half .small-title {
        font-size: 42px;
        font-size: 2.625rem;
    }
}

.site-footer .copy {
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: 300;
    margin: 0;
}

@media only screen and (max-width: 576px) {
    .site-footer .copy {
        margin-left: 60px;
    }
}

@media only screen and (max-width: 992px) {
    .site-footer .footer-contacts {
        text-align: right;
    }
}

@media only screen and (max-width: 576px) {
    .site-footer .footer-contacts {
        text-align: left;
        margin-left: 60px;
        margin-bottom: 30px;
    }
}

.site-footer .footer-contacts a.email {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 300;
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    margin-bottom: 5px;
}

@media only screen and (max-width: 1200px) {
    .site-footer .footer-contacts a.email {
        font-size: 20px;
        font-size: 1.25rem;
    }
}

@media only screen and (max-width: 992px) {
    .site-footer .footer-contacts a.email {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

@media only screen and (max-width: 768px) {
    .site-footer .footer-contacts a.email {
        font-size: 16px;
        font-size: 1rem;
    }
}

.site-footer .footer-contacts a.email:hover {
    color: #FFC107;
}

.site-footer .footer-contacts p {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 300;
    text-transform: uppercase;
    margin: 0;
}

@media only screen and (max-width: 1200px) {
    .site-footer .footer-contacts p {
        font-size: 20px;
        font-size: 1.25rem;
    }
}

@media only screen and (max-width: 992px) {
    .site-footer .footer-contacts p {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

@media only screen and (max-width: 768px) {
    .site-footer .footer-contacts p {
        font-size: 16px;
        font-size: 1rem;
    }
}

.site-footer .footer-contacts p a {
    color: #FFFFFF;
    text-decoration: none;
    margin-left: 10px;
}

.site-footer .footer-contacts p a:hover {
    color: #FFC107;
}

/*Кнопка наверх*/
#toTop {
    transition: all 0.2s linear;
    width: 40px;
    height: 40px;
    border: 1px solid #FFFFFF;
    text-align: center;
    padding: 5px;
    position: fixed;
    bottom: 40px;
    right: 40px;
    cursor: pointer;
    color: #FFFFFF;
    text-decoration: none;
    z-index: 98;
    background-color: #FFC107;
}

#toTop:hover {
    bottom: 45px;
    background-color: rgb(222.7, 167.025, 0);
}

@media only screen and (max-width: 768px) {
    #toTop {
        right: 10px;
        bottom: 10px;
    }

    #toTop:hover {
        bottom: 15px;
    }
}
/*# sourceMappingURL=style.css.map */