:root {
    --color-green: #C9D93B;
    --color-orange: #E45723;
    --color-grey: #727272;
    --color-lightgrey: #E6E6E6;
    --color-black: #000;
    --color-white: #fff;
    --color-blue: #0573EA;
    --color-lightblue: #71A3F2;

    --font-80: 5rem;
    --font-64: 4rem;
    --font-56: 3.5rem;
    --font-50: 3.125rem;
    --font-48: 3rem;
    --font-44: 2.75rem;
    --font-40: 2.5rem;
    --font-36: 2.25rem;
    --font-32: 2rem;
    --font-28: 1.75rem;
    --font-24: 1.5rem;
    --font-20: 1.25rem;
    --font-18: 1.125rem;
    --font-16: 1rem;
    --font-14: 0.875rem;
    --font-12: 0.75rem;
    --font-10: 0.715rem;

    --w-thin: 100;
    --w-extralight: 200;
    --w-light: 300;
    --w-normal: 400;
    --w-medium: 500;
    --w-semibold: 600;
    --w-bold: bold;
    --w-extrabold: 800;
    --w-black: 900;
}

html {
    font: 18px "Montserrat", sans-serif;
    margin: 0;
    line-height: 1.2;
}

h1 {
    font-size: var(--font-64);
    font-weight: var(--w-medium);
    font-family: "Lora", sans-serif;
    text-transform: uppercase;
    margin: 1rem auto 1.5rem;
}
h1.main {font-size: var(--font-80)}
h2 {
    font-size: var(--font-44);
    font-weight: var(--w-medium);
    font-family: "Lora", sans-serif;
    text-transform: uppercase;
    margin: 0;
}
h3 {
    font-size: var(--font-32);
    font-weight: var(--w-medium);
    margin: 0;
}

img {
    max-width: 100%;
}

a,
a:hover,
a:active {
    text-decoration: none;
    color: var(--color-black);
}

ul {
    list-style: none;
    position: relative;
    padding-left: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 0;
}
ul li {padding-bottom: .8rem}
ul li::before {
    content: '—';
    position: absolute;
    left: 0;
}
ul li:last-child {padding-bottom: 0}

button,
button:active {
    border: none;
    outline: none;
    font-family: "Montserrat", sans-serif;
    background: inherit;
}

.black {color: var(--color-black)}
.white {color: var(--color-white)}
.grey {color: var(--color-grey)}
.orange {color: var(--color-orange)}

span.thin {font-weight: var(--w-thin)}
span.exlight {font-weight: var(--w-extralight)}
span.light {font-weight: var(--w-light)}
span.normal {font-weight: var(--w-normal)}
span.medium {font-weight: var(--w-medium)}
span.semibold {font-weight: var(--w-semibold)}
span.bold {font-weight: var(--w-bold)}
span.extrabold {font-weight: var(--w-extrabold)}
span.black {font-weight: var(--w-black)}

span.lora {font-family: "Lora", sans-serif}
span.montserrat {font-family: "Montserrat", sans-serif}

span.italic {font-style: italic}

span.caps {text-transform: uppercase}
span.uncaps {text-transform: none}

.line-h-15 {line-height: 1.5}

.f-12 {font-size: var(--font-12)}
.f-14 {font-size: var(--font-14)}
.f-16 {font-size: var(--font-16)}
.f-18 {font-size: var(--font-18)}
.f-20 {font-size: var(--font-20)}
.f-24 {font-size: var(--font-24)}
.f-28 {font-size: var(--font-28)}
.f-32 {font-size: var(--font-32)}
.f-36 {font-size: var(--font-36)}
.f-40 {font-size: var(--font-40)}
.f-44 {font-size: var(--font-44)}
.f-50 {font-size: var(--font-50)}
.f-56 {font-size: var(--font-56)}
.f-64 {font-size: var(--font-64)}
.f-80 {font-size: var(--font-80)}

.text--center {text-align: center}
.text--left {text-align: left}
.text--right {text-align: right}

.filter__brightness--60 {filter: brightness(60%)}

.box {padding: 1rem}
.box-1 {padding: 1.5rem}
.box-2 {padding: 2.5rem}
.box-3 {padding: 3.5rem}

.box__width {width: 100%}

.box__white {background-color: var(--color-white)}
.box__orange {background-color: var(--color-orange)}
.box__green {background-color: var(--color-green)}

.box__parents {background: url("/images/main/background_parents.png") no-repeat 100% 0/cover}
.box__about--background {background: url("/images/about/background.jpg") no-repeat 50% 0/cover}

.box__border {border: 1px solid var(--color-black)}
.box__border--top {border-top: 1px solid var(--color-black)}
.box__border--bottom {border-bottom: 1px solid var(--color-black)}
.box__border--left {border-left: 1px solid var(--color-black)}
.box__border--right {border-right: 1px solid var(--color-black)}
.box__border--white {border-color: var(--color-white)}
.box__border--grey {border-color: var(--color-lightgrey)}
.box__border--orange {border-color: var(--color-orange)}

.box__border-logo-top {position: relative}
.box__border-logo-top:before {
    content: "";
    background: #fff url("/images/icons/border-top.png") no-repeat 0% 100%/contain;
    width: 255px;
    height: 90px;
    position: absolute;
    top: -3rem;
    left: calc(50% - 127px);
}

button.box__border:active {border: 1px solid var(--color-black)}
button.box__border--white:active {border-color: var(--color-white)}

.box__radius--sm {border-radius: 10px}
.box__radius {border-radius: 15px}
.box__radius--lg {border-radius: 25px}
.box__radius--xl {border-radius: 35px}
.box__radius--2xl {border-radius: 45px}

.box__radius-bottom-xl {
    border-bottom-right-radius: 35px;
    border-bottom-left-radius: 35px;
}

.box__circle {border-radius: 50%}

.box__square {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
}
.box__square .box__square--top {
    width: 100%;
    top: 0;
    position: absolute;
}
.box__square .box__square--bottom {
    width: 100%;
    bottom: 0;
    position: absolute;
}
.box__square .box__square--center {
    width: 100%;
    position: absolute;
    bottom: 25%;
}

.box__relative {position: relative}
.box__absolute {position: absolute}
.box__sticky {
    position: sticky;
    top: 1rem;
}

.box__grid {display: grid}
.box__grid--gap {
    grid-row-gap: 1rem;
    grid-column-gap: 1rem;
}
.box__grid-temp-col-2 {grid-template-columns: 1fr 1fr}
.box__grid-temp-col-3 {grid-template-columns: 1fr 1fr 1fr}
.box__grid-temp-col-4 {grid-template-columns: 1fr 1fr 1fr 1fr}

.box__grid-temp-row-1 {grid-template-rows: 1fr}
.box__grid-temp-row-2 {grid-template-rows: 1fr 1fr}
.box__grid-temp-row-3 {grid-template-rows: 1fr 1fr 1fr}

.box__grid-column-2 {grid-column: 1/3}

.box__grid--cloud {grid-template-columns: 75% 1fr}
.box__grid--cloud-reverse {grid-template-columns: 1fr 75%}

.box__accordion--header {margin-bottom: 1rem}
.box__accordion--header.active svg {transform: rotate(180deg)}
.box__accordion--header.active + .box__accordion--card {margin-bottom: 1rem}

.box__accordion--group .box__accordion--header {border-bottom: 1px solid var(--color-black)}
.box__accordion--group .box__accordion--header:first-child {border-top: 1px solid var(--color-black)}
.box__accordion--group .box__accordion--header.active {
    border-top: 0;
    border-bottom: 0;
    background: var(--color-green);
    border-radius: 15px;
}
.box__accordion--group .box__accordion--header.active .box__circle {
    transform: rotate(-45deg);
    border: 0;
}
.box__accordion--group .box__accordion--header.active .grey {color: var(--color-black)}
.box__accordion--group .box__accordion--header.active + .box__accordion--card {border-bottom: 1px solid var(--color-black)}

.box__backimg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}
.box__img--pagemain {
    height: 500px;
}
.box__img--horizontal {
    height: 350px;
}

.container__about .box__grid-column-2 {grid-column: 3/5}

.button, .button--sm, .button--switch {
    line-height: 1;
    text-align: center;
    padding: 1rem 2rem;
}
.button--sm {padding: .8rem 2rem}
.button--switch {padding: 1rem}

.button--summer {
    padding: 0.2rem 1.5rem;
}

.button--summer:hover {
    background: #fff;
}
.button--summer.white:hover {
    color: var(--color-orange);
}

.button__green {
    background-color: var(--color-green);
    color: var(--color-black);
}

div.line {background-color: var(--color-black)}
div.line--grey {background-color: var(--color-lightgrey)}
div.line--white {background-color: var(--color-white)}
div.line__horizontal {
    width: 100%;
    height: 1px;
}
div.line__vertical {
    height: 100%;
    width: 1px;
}
div.line__horizontal--2 {height: 2px}
div.line__vertical--2 {width: 2px}

.object-fit--cover {object-fit: cover}
.object-fit--contain {object-fit: contain}

.object-position--top {object-position: top}

.container__margin {
    margin-top: 4rem;
    margin-bottom: 4rem;
}

video {
    overflow: auto;
    object-fit: cover;
    height: 100%;
    border-radius: 12px;
    /*min-height: 260px;*/
}

header {
    margin-bottom: 4rem;
    position: relative;
}

.toggleMenu {
    position: absolute;
    top: 100%;
    width: 100%;
    display: none;
    z-index: 99999;
}
.toggleMenu.active {
    display: block;
}

.link--button svg {
    position: relative;
    z-index: 1;
}
.link--button .button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: .9rem 2rem .9rem 2.5rem;
}
.link--button .button--blue {border-color: var(--color-blue)}
.link--button .button--lightblue {border-color: var(--color-lightblue)}

.burger {
    padding: .8rem .6rem;
    border: 1px solid var(--color-lightgrey);
    border-radius: 6px;
}
.burger div {
    width: 24px;
    height: 1px;
    background: var(--color-black);
    margin-bottom: 7px;
    transition: all .5s;
}
.burger div:last-child {margin-bottom: 0}

.burger.active div:first-child {
    transform: rotate(45deg);
    position: relative;
    top: .45rem;
}
.burger.active div:nth-child(2) {opacity: 0}
.burger.active div:last-child {
    transform: rotate(-45deg);
    position: relative;
    bottom: .45rem;
}

.container__about,
.container__needed,
.container__structure,
.container__location,
.container__education,
.container__reviews,
.container__cloud {margin-bottom: 4rem}
.container__cloud .swiper__gallery-slider .swiper-slide {height: 515px;}

.swiper--next {transform: rotate(180deg)}

.container__needed .swiper__needed--prev {padding-right: .5rem}
.container__needed .swiper__needed--next {transform: rotate(180deg)}
.swiper__needed {padding: 0 2.5rem}
.swiper__needed .swiper-slide {
    width: auto;
}
.swiper__needed .swiper-slide .box-1 {
    width: 15rem;
    height: 15rem;
}

.nav__list--group .nav__list--item {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-black);
}
.nav__list--group .nav__list--item.active {border-bottom: 0}
.nav__list--group .nav__list--item.active > .box-1 {background-color: var(--color-green)}
.nav__list--group .nav__list--item .box__circle {
    padding: 1.5rem 1.2rem;
    border: 1px solid var(--color-black);
}
.nav__list--group .nav__list--item.active .box__circle {
    transform: rotate(-45deg);
    border: 0;
}
.nav__list--group .nav__list--item.active span.grey {color: var(--color-black)}

.nav__list--line .nav__list--item {
    color: var(--color-grey);
    position: relative;
}
.nav__list--line .nav__list--item.active {color: var(--color-black)}
.nav__list--line .nav__list--item.active:before {
    content: '—';
    position: absolute;
    left: 0;
}

.scroll__list--line .scroll__list--item {
    color: var(--color-grey);
    position: relative;
    margin-bottom: 1rem;
}
.scroll__list--line .scroll__list--item.active {color: var(--color-black)}
.scroll__list--line .scroll__list--item.active:before {
    content: '—';
    position: absolute;
    left: 0;
}

.nav__list--program-education .nav__list--item {
    background: var(--color-green);
    border: 1px solid var(--color-black);
}
.nav__list--program-education .nav__list--item.active {
    background: var(--color-white);
    border: 1px solid var(--color-white);
}

.nav__detail .nav__detail--item, .nav__list--group .nav__detail--item {display: none}
.nav__detail .nav__detail--item.active, .nav__list--group .nav__detail--item.active {display: block}

.container__reviews .reviews--rating {width: 18rem}
.container__reviews .reviews__places {padding: 2rem 0 0 4rem}
.container__reviews .reviews__places--item {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}
.container__reviews .swiper__review--prev {padding-right: .5rem}
.container__reviews .swiper__review--next {transform: rotate(180deg)}
.swiper__review {padding-right: 22rem}

.price {
    color: var(--color-orange);
    font-size: var(--font-40);
    font-weight: var(--w-semibold);
}

.map {
    width: 100%;
    height: 640px;
    position: relative;
    margin-top: 3em;
    overflow: hidden;
    cursor: pointer;
    background: url("/images/map.png") #fff no-repeat;
    background-position: center center;
    background-size: cover;
}
#map-yandex {
    position: relative;
    z-index: 7;
    width: 100%;
    height: 20em;
    cursor: pointer;
    background-color: transparent;
}

.loader {
    position: absolute;
    top: -100%;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #000;
    transition: opacity 0.7s ease;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.55);
}
.loader.is-active {
    top: 0;
    opacity: 1;
}
.loader-default:after {
    position: absolute;
    top: calc(50% - 24px);
    left: calc(50% - 24px);
    width: 48px;
    height: 48px;
    content: "";
    animation: rotation 1s linear infinite;
    border: solid 8px #fff;
    border-left-color: transparent;
    border-radius: 50%;
}

form input {
    font-family: "Montserrat", sans-serif;
    border: 1px solid var(--color-white);
    color: var(--color-white);
    font-size: var(--font-20);
    background: transparent;
    outline: none;
    border-radius: 35px;
    padding: 1rem 1.5rem;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1rem;
}
form input::placeholder {
    color: var(--color-white);
}
form input[type="submit"] {
    background: var(--color-white);
    color: var(--color-black);
    font-weight: var(--w-semibold);
}
form[name="SIMPLE_FORM_7"] input[type="submit"] {
    margin-top: 3rem;
}

form .confidenc {
    color: var(--color-white);
    position: relative;
    padding-left: 4rem;
}
form .confidenc a {
    color: var(--color-green);
}
form .confidenc input[name="form_checkbox_confidenc[]"] {
    display: none;
}
form .confidenc label:before, .confidenc label:after {
    content: "";
    position: absolute;
}
form .confidenc label:before {
    width: 30px;
    height: 30px;
    border: 1px solid #000;
    border-radius: 6px;
    top: 0;
    left: .5rem;
    background: var(--color-white);
}
form .confidenc input:checked + label:after {
    opacity: 1;
    width: 20px;
    height: 10px;
    border-left: 1px solid var(--color-orange);
    border-bottom: 1px solid var(--color-orange);
    transform: rotate(-45deg);
    top: .4rem;
    left: .8rem;
}

footer {
    margin: 2rem 0;
}

@keyframes rotation {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(359deg);
    }
}

.button_media {
    width: 100%;
    border-radius: 12px;
    background: transparent;
    color: var(--color-white);
    text-align: start;
}
.button_media svg {stroke: var(--color-white)}
.button_media:disabled {
    background: var(--color-white);
    color: var(--color-black);
}
.button_media:disabled svg {stroke: var(--color-black)}

@media (max-width: 1900px) {
    html {font-size: 16px}

    .burger.active div:first-child {top: .5rem}
    .burger.active div:last-child {bottom: .5rem}
}

@media (max-width: 1440px) {
    html {font-size: 14px}

    .f-xl-20 {font-size: var(--font-20)}
    .f-xl-28 {font-size: var(--font-28)}

    .box__border-logo-top:before {
        height: 92px;
        top: -4rem;
    }

    .burger.active div:first-child {top: .55rem}
    .burger.active div:last-child {bottom: .55rem}

    .container__cloud .swiper__gallery-slider .swiper-slide {height: 426px}
}

@media (max-width: 1200px) {
    .box__grid-temp-col-lg-2 {grid-template-columns: 1fr 1fr}

    .box__grid-temp-row-lg-1 {grid-template-rows: 1fr}

    .burger.active div:last-child {bottom: .6rem}

    .box__img--pagemain {
        height: 450px;
    }
    .box__img--horizontal {
        height: 300px;
    }
    .box__grid--cloud {
        grid-template-columns: 70% 1fr;
    }
    .box__grid--cloud-reverse {
        grid-template-columns: 1fr 70%;
    }

    .box__square-lg-static {padding-top: 0}
    .box__square-lg-static .box__square--top,
    .box__square-lg-static .box__square--bottom,
    .box__square-lg-static .box__square--center
    {position: static}

    .container__cloud .swiper__gallery-slider .swiper-slide {height: 305px}
}

@media (max-width: 992px) {
    .box-lg-0 {padding: 0}
    .box-lg   {padding: 1rem}
    .box-lg-1 {padding: 1.5rem}
    .box-lg-2 {padding: 2.5rem}
    .box-lg-3 {padding: 3.5rem}

    .box__grid-temp-col-lg-2 {grid-template-columns: 1fr 1fr}
    .box__grid-temp-col-lg-1 {grid-template-columns: 1fr}

    .box__img--pagemain {
        height: 400px;
    }
    .container__cloud .box__grid--cloud {grid-template-columns: 100%}
    .box__grid--cloud {grid-template-columns: 65% 1fr}
    .box__grid--cloud-reverse {grid-template-columns: 1fr 65%}
}

@media (max-width: 768px) {
    header {margin-bottom: 2rem}
    body {margin: 0}

    h1 {font-size: var(--font-36)}
    h1.main {font-size: var(--font-64)}
    h2 {font-size: var(--font-28)}

    .f-md-14 {font-size: var(--font-14)}
    .f-md-16 {font-size: var(--font-16)}
    .f-md-18 {font-size: var(--font-18)}
    .f-md-20 {font-size: var(--font-20)}
    .f-md-24 {font-size: var(--font-24)}
    .f-md-28 {font-size: var(--font-28)}
    .f-md-32 {font-size: var(--font-32)}
    .f-md-36 {font-size: var(--font-36)}
    .f-md-40 {font-size: var(--font-40)}
    .f-md-44 {font-size: var(--font-44)}
    .f-md-56 {font-size: var(--font-56)}

    .text-md-center {text-align: center}
    .text-md-left {text-align: left}
    .text-md-right {text-align: right}

    .box-md-0 {padding: 0}
    .box-md   {padding: 1rem}
    .box-md-1 {padding: 1.5rem}
    .box-md-2 {padding: 2.5rem}
    .box-md-3 {padding: 3.5rem}

    .box__border-md-0 {border: 0}

    .box__radius-md-0 {border-radius: 0}
    .box__radius-md-md {border-radius: 10px}
    .box__radius-md-md {border-radius: 15px}
    .box__radius-md-lg {border-radius: 25px}
    .box__radius-md-xl {border-radius: 35px}

    .box__grid-temp-col-mb-1 {grid-template-columns: 1fr}
    .box__grid-temp-col-mb-2 {grid-template-columns: 1fr 1fr}

    .box__grid-temp-row-mb-1 {grid-template-rows: 1fr}
    .box__grid-temp-row-mb-2 {grid-template-rows: 1fr 1fr}
    .box__grid-temp-row-mb-3 {grid-template-rows: 1fr 1fr 1fr}

    .box__square-md-static {padding-top: 0}
    .box__square-md-static .box__square--top,
    .box__square-md-static .box__square--bottom,
    .box__square-md-static .box__square--center
    {position: static}

    .button-switch-md {padding: 1rem}

    .container__about, .container__needed, .container__structure {margin-bottom: 3rem}

    .container__needed, .container__reviews {
        padding-right: 0;
        padding-left: 0;
    }
    .container__needed .box__radius--xl, .container__reviews .box__radius--xl {border-radius: 0}
    .container__needed .box__square {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

    .nav__list .nav__detail--item {border-bottom: 1px solid var(--color-black)}

    .nav__block--mob .nav__detail--item {display: block}

    .box__img--pagemain {
        height: auto;
    }
    .container__cloud .box__img--pagemain {
        height: 100%;
    }
    .box__img--horizontal {
        height: auto;
    }
    .container__cloud .box__grid--cloud {grid-template-columns: 49% 49%}
    .box__grid--cloud, .box__grid--cloud-reverse {grid-template-columns: 100%}

    .box__parents, .box__about--background {background-position-y: 50%}

    .container__reviews .reviews__places {
        display: flex;
        justify-content: space-around;
        padding: 2rem 0;
    }
    .container__reviews .reviews__places .reviews__places--item {flex-direction: column}
    .container__reviews .swiper__review {padding-right: 0}

    .line-h-md-15 {line-height: 1.5}

    form input[type="submit"] {margin-top: 1.5rem}

    footer {margin-top: 0}

    .box__accordion--header.active + .box__accordion--card {
        margin-bottom: 1rem;
    }

    .box__border-logo-top:before {
        width: 200px;
        height: 84px;
        left: calc(50% - 100px);
    }

    .container__reviews .reviews--rating {
        position: relative;
        left: -2rem;
    }

    .box__backimg {
        display: none;
    }

    .container__cloud .swiper__gallery-slider, .container__cloud .swiper__gallery-slider .swiper-slide {height: 100%}

    .sticky-menu {
        background: #fff;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        z-index: 999;
        transition: transform 0.3s ease-in-out;
        position: absolute;
        top: 0;
    }
    .sticky-menu.hide {
        position: fixed;
        transform: translateY(-100%);
    }
    .sticky-menu.show {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
    .sticky-data {padding-top: 15rem}

    .button_media {
        border: 1px solid var(--color-black);
        border-radius: 10px;
        color: var(--color-black);
    }
    .button_media svg {
        stroke: var(--color-black);
    }
    .button_media:active, .button_media:disabled {
        border-color: var(--color-orange);
        background: var(--color-orange);
        color: var(--color-white);
    }
    .button_media:active svg, .button_media:disabled svg {
        stroke: var(--color-white);
    }
}

@media (max-width: 576px) {
    .box-sm-0 {padding: 0}
    .box-sm   {padding: 1rem}
    .box-sm-1 {padding: 1.5rem}
    .box-sm-2 {padding: 2.5rem}
    .box-sm-3 {padding: 3.5rem}

    .f-sm-12 {font-size: var(--font-12)}

    .box__grid-temp-col-sm-1 {grid-template-columns: 1fr}

    .button-sm-sm {
        padding: .5rem 1rem .7rem;
    }
}

@media (max-width: 390px) {
    .sticky-data {padding-top: 18rem}
}