/* global */
:root {
  --color-blue: #4858e7;
  --color-cyan: #7f9af9;
  --color-green: #87e22b;
  --color-white: #ffffff;
  --color-black: #000000;
}
body {
  position: relative;
}
body::before {
  content: "";
  z-index: -2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-image: url(../media/front-page/background-mob.png);
    background: url(../media/front-page/background-mob.png) top center / cover no-repeat; */
}
body::after {
  content: "";
  z-index: -2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../media/front-page/background-mob.svg) top center / cover no-repeat;
}
.container {
  padding: 0 10rem;
  width: 100%;
  max-width: 1200rem;
}
header {
  background: url(../media/front-page/header-mob.svg) top 15rem center / contain no-repeat;
  background: url(../media/front-page/header-mob.svg) top 0rem right 0rem / calc(100% + 50rem) calc(100% - 15rem) no-repeat;
  border: none;
}
header > .container {
  padding: 20rem;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
header .icon__logotype {
  width: 125rem;
  height: 25rem;
  background: var(--color-green);
}
.header__right {
  margin: 5rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.header__geo {
  position: relative;
  margin-right: 16rem;
}
.header__geo::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 10px);
  border-radius: 15px 15px 0 0;
  background: transparent;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.header__geo.active::before {
  background: var(--color-cyan);
}
@media (max-width: 1199px) {
  .header__geo-main {
    font-size: 12rem;
    line-height: 150%;
  }
}
.header__geo-main {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  color: var(--color-white);
}
.header__geo.active .header__geo-main {
  color: var(--color-white);
}
.header__geo-main::before {
  content: "";
  display: block;
  margin-right: 8rem;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  background: var(--color-white);
}
.header__geo.active .header__geo-main::before {
  background: var(--color-white);
}
.header__geo-items {
  position: absolute;
  -webkit-transform: translate(-50%, 100%);
  -ms-transform: translate(-50%, 100%);
  transform: translate(-50%, 100%);
  bottom: -5px;
  left: 50%;
  width: 210px;
  padding-top: 1px;
  border-radius: 15px;
  overflow: hidden;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.header__geo.active .header__geo-items {
  opacity: 1;
  pointer-events: initial;
}
.header__geo-wrapper {
  width: 100%;
  max-height: 210px;
  text-align: center;
  display: grid;
  /* grid-template-columns: repeat(2, 1fr); */
  gap: 1px;
  overflow: auto;
}
.header__geo-wrapper::-webkit-scrollbar {
  width: 4px;
}
.header__geo-wrapper::-webkit-scrollbar-track {
  background: var(--color-green);
}
.header__geo-wrapper::-webkit-scrollbar-thumb {
  background: var(--color-cyan);
  border-radius: 15px;
}
.header__geo-item {
  display: block;
  padding: 5px;
  background: var(--color-green);
}
.header__geo-item:hover {
  color: var(--color-white);
  background: var(--color-cyan);
}
.header__geo-alert {
  position: absolute;
  bottom: -10px;
  left: 50%;
  -webkit-transform: translate(-50%, 100%);
  -ms-transform: translate(-50%, 100%);
  transform: translate(-50%, 100%);
  padding: 15px;
  color: var(--color-white);
  text-align: center;
  background: var(--color-cyan);
  border-radius: 25px;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.header__geo-alert.active {
  opacity: 1;
  pointer-events: inherit;
}
.header__geo-alert .city {
  white-space: nowrap;
  text-wrap: nowrap;
}
.header__geo-alert .city span {
  font-weight: bold;
}
.header__geo-alert .btns {
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.header__geo-alert .btn {
  padding: 5px 10px;
  border-radius: 10px;
  background: var(--color-green);
  cursor: pointer;
}
.header__socs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.header__socs a {
  display: block;
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  background: var(--color-white);
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}
.header__socs a:hover {
  background: var(--color-cyan);
}
.header__socs a:not(:first-child) {
  display: none;
}
.header__socs a.icon__phone::before {
  background: #19004f;
  width: 16rem;
  height: 16rem;
  -webkit-mask-image: url(../media/icon-phone.svg);
  mask-image: url(../media/icon-phone.svg);
}
.header__socs a.icon__vk::before {
  background: #19004f;
  width: 22rem;
  height: 16rem;
  -webkit-mask-image: url(../media/icon-vk.svg);
  mask-image: url(../media/icon-vk.svg);
}
.header__socs a.icon__telegram::before {
  background: #19004f;
  width: 22rem;
  height: 20rem;
  -webkit-mask-image: url(../media/icon-telegram.svg);
  mask-image: url(../media/icon-telegram.svg);
}
.header__socs a.icon__whatsapp::before {
  background: #19004f;
  width: 18rem;
  height: 18rem;
  -webkit-mask-image: url(../media/icon-whatsapp.svg);
  mask-image: url(../media/icon-whatsapp.svg);
}
main {
  padding-bottom: 0;
}
footer {
  position: relative;
  z-index: 3;
}
@media (min-width: 900px) {
  /* body::before {
        background-image: url(../media/front-page/background-table.png);
    } */
  body::after {
    background-image: url(../media/front-page/background-table.svg);
  }
  .container {
    padding: 0 10rem;
    width: 100%;
    max-width: 1200rem;
  }
  header {
    background: url(../media/front-page/header-table.svg) top left / contain no-repeat;
  }
  header::before {
    content: none;
  }
  header > .container {
    padding: 10rem 30rem;
    background: none;
  }
  header::before,
  header::after,
  header > .container::before,
  header > .container::after {
    content: none;
  }
  header .icon__logotype {
    margin-top: 15rem;
    width: 150rem;
    height: 30rem;
  }
  .header__right {
    margin: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .header__geo-main::before {
    margin-right: 12rem;
    width: 16rem;
    height: 16rem;
  }
  .header__socs a:not(:first-child) {
    display: block;
    margin-left: 20rem;
  }
}
@media (min-width: 1200px) {
  /* body::before {
        background-image: url(../media/front-page/background.png);
    } */
  body::after {
    background-image: url(../media/front-page/background.svg);
  }
  .container {
    padding: 0 10rem;
    width: 100%;
    max-width: 1200rem;
  }
  header {
    background: none;
  }
  header::before {
    content: none;
  }
  header > .container {
    position: relative;
    padding: 20rem 0;
    height: 73rem;
    background: url(../media/front-page/header-desk.svg) top left / contain no-repeat;
  }
  header > .container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    width: 700rem;
    height: 73rem;
    background: url(../media/front-page/header-before.svg) top right / contain no-repeat;
  }
  header .icon__logotype {
    margin: 0;
  }
}
/* END global */

/* section__preview */
.section__preview {
  position: relative;
  /* overflow: hidden; */
}
.preview__title {
  font-weight: 500;
  font-size: 30rem;
  line-height: normal;
  text-align: center;
  color: var(--color-cyan);
  text-transform: none;
  text-shadow: 0 0 12rem rgba(127, 154, 249, 0.7);
}
.preview__desc {
  margin-top: 20rem;
  font-weight: 500;
  font-family: "Jura", sans-serif;
  font-size: 22rem;
  line-height: normal;
  text-align: center;
  color: var(--color-cyan);
  text-shadow: 0 0 12rem rgba(127, 154, 249, 0.7);
}
.preview__items {
  margin: 80rem -10rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.preview__item {
  position: relative;
  display: block;
  width: 124rem;
  height: 124rem;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}
.preview__item::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--color-green);
}
.preview__item:hover::before {
  opacity: 0;
}
.preview__item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  opacity: 0;
  width: 100%;
  height: 100%;
  background: var(--color-cyan);
}
.preview__item:hover::after {
  opacity: 1;
}
/* .preview__item.lock {
    pointer-events: none;
} */
.preview__item.lock::before {
  background: #71787d;
}
.preview__item.lock:hover::before {
  opacity: 1 !important;
}
.preview__item.lock::after {
  content: "";
  position: absolute;
  top: auto !important;
  left: auto !important;
  right: 10rem;
  bottom: 10rem;
  -webkit-transform: none !important;
  -ms-transform: none !important;
  transform: none !important;
  width: 26rem;
  height: 33rem;
  background: #71787d;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-image: url(../media/front-page/unit-lock.png) !important;
  mask-image: url(../media/front-page/unit-lock.png) !important;
  opacity: 1 !important;
}
.preview__item:nth-child(3n + 2):not(:last-child) {
  margin: 62rem 0 -62rem;
}
/* .preview__item.leader::before {
    -webkit-mask-image: url(../media/front-page/unit-leader.png);
    mask-image: url(../media/front-page/unit-leader.png);
}
.preview__item.leader::after {
    -webkit-mask-image: url(../media/front-page/unit-leader-hover.png);
    mask-image: url(../media/front-page/unit-leader-hover.png);
}
.preview__item.bio::before {
    -webkit-mask-image: url(../media/front-page/unit-bio.png);
    mask-image: url(../media/front-page/unit-bio.png);
}
.preview__item.bio::after {
    -webkit-mask-image: url(../media/front-page/unit-bio-hover.png);
    mask-image: url(../media/front-page/unit-bio-hover.png);
}
.preview__item.it::before {
    -webkit-mask-image: url(../media/front-page/unit-it.png);
    mask-image: url(../media/front-page/unit-it.png);
}
.preview__item.it::after {
    -webkit-mask-image: url(../media/front-page/unit-it-hover.png);
    mask-image: url(../media/front-page/unit-it-hover.png);
}
.preview__item.lang::before {
    -webkit-mask-image: url(../media/front-page/unit-lang.png);
    mask-image: url(../media/front-page/unit-lang.png);
}
.preview__item.lang::after {
    -webkit-mask-image: url(../media/front-page/unit-lang-hover.png);
    mask-image: url(../media/front-page/unit-lang-hover.png);
}
.preview__item.business::before {
    -webkit-mask-image: url(../media/front-page/unit-business.png);
    mask-image: url(../media/front-page/unit-business.png);
}
.preview__item.business::after {
    -webkit-mask-image: url(../media/front-page/unit-business-hover.png);
    mask-image: url(../media/front-page/unit-business-hover.png);
}
.preview__item.childs::before {
    -webkit-mask-image: url(../media/front-page/unit-childs.png);
    mask-image: url(../media/front-page/unit-childs.png);
}
.preview__item.childs::after {
    -webkit-mask-image: url(../media/front-page/unit-childs-hover.png);
    mask-image: url(../media/front-page/unit-childs-hover.png);
}
.preview__item.math::before {
    -webkit-mask-image: url(../media/front-page/unit-math.png);
    mask-image: url(../media/front-page/unit-math.png);
}
.preview__item.math::after {
    -webkit-mask-image: url(../media/front-page/unit-math-hover.png);
    mask-image: url(../media/front-page/unit-math-hover.png);
}
.preview__item.cyber::before {
    -webkit-mask-image: url(../media/front-page/unit-cyber.png);
    mask-image: url(../media/front-page/unit-cyber.png);
}
.preview__item.cyber::after {
    -webkit-mask-image: url(../media/front-page/unit-cyber-hover.png);
    mask-image: url(../media/front-page/unit-cyber-hover.png);
}
.preview__item.physic::before {
    -webkit-mask-image: url(../media/front-page/unit-physic.png);
    mask-image: url(../media/front-page/unit-physic.png);
}
.preview__item.physic::after {
    -webkit-mask-image: url(../media/front-page/unit-physic-hover.png);
    mask-image: url(../media/front-page/unit-physic-hover.png);
}
.preview__item.online::before {
    -webkit-mask-image: url(../media/front-page/unit-online.png);
    mask-image: url(../media/front-page/unit-online.png);
}
.preview__item.online::after {
    -webkit-mask-image: url(../media/front-page/unit-online-hover.png);
    mask-image: url(../media/front-page/unit-online-hover.png);
}
.preview__item.exam::before {
    -webkit-mask-image: url(../media/front-page/unit-exam.png);
    mask-image: url(../media/front-page/unit-exam.png);
}
.preview__item.exam::after {
    -webkit-mask-image: url(../media/front-page/unit-exam-hover.png);
    mask-image: url(../media/front-page/unit-exam-hover.png);
} */
.preview__item-desc {
  display: none;
}
.preview__img {
  display: none;
}
@media (min-width: 900px) {
  .preview__info {
    margin: 0 auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
  .preview__title {
    font-size: 37rem;
    line-height: normal;
  }
  .preview__desc {
    font-size: 27rem;
    line-height: normal;
  }
  .preview__items {
    position: relative;
    margin: 30rem 0 0;
    width: 100%;
    height: 450rem;
  }
  .preview__item {
    position: absolute;
    width: 145rem;
    height: 145rem;
  }
  .preview__item:nth-child(3n + 2):not(:last-child) {
    margin: 0;
  }
  .preview__item.leader {
    top: 0;
    left: 0;
  }
  .preview__item.bio {
    top: 50rem;
    left: 172rem;
  }
  .preview__item.it {
    top: 0;
    left: 344rem;
  }
  .preview__item.lang {
    top: -10rem;
    left: 516rem;
  }
  .preview__item.childs {
    top: 50rem;
    left: 688rem;
  }
  .preview__item.physic {
    top: 0;
    left: 860rem;
  }
  .preview__item.math {
    top: 172rem;
    left: 0;
  }
  .preview__item.business {
    top: 230rem;
    left: 172rem;
  }
  .preview__item.cyber {
    top: 172rem;
    left: 860rem;
  }
  .preview__item.online {
    top: 172rem;
    left: 344rem;
  }
  .preview__item.exam {
    top: 230rem;
    left: 688rem;
  }
  .preview__item-desc {
    display: block;
    z-index: 1;
    position: absolute;
    top: 20rem;
    right: 40rem;
    -webkit-transform: translate(100%, -100%);
    -ms-transform: translate(100%, -100%);
    transform: translate(100%, -100%);
    padding: 15rem;
    width: 220rem;
    font-size: 16rem;
    line-height: 140%;
    color: var(--color-white);
    background: rgba(72, 88, 231, 0.2);
    -webkit-backdrop-filter: blur(15rem);
    backdrop-filter: blur(15rem);
    border: 3rem solid var(--color-cyan);
    opacity: 0;
    pointer-events: none;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
  }
  .preview__item:hover .preview__item-desc {
    opacity: 1;
    /* pointer-events: initial; */
  }
  .preview__item-desc.big {
    width: 300rem;
  }
  .preview__item-desc.left {
    right: auto;
    left: 40rem;
    -webkit-transform: translate(-100%, -100%);
    -ms-transform: translate(-100%, -100%);
    transform: translate(-100%, -100%);
  }
  .preview__img {
    display: block;
    position: absolute;
    left: calc(50% + 100rem);
    bottom: -30rem;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    max-width: 340rem;
    max-height: 340rem;
    -o-object-position: center bottom;
    object-position: center bottom;
    -o-object-fit: contain;
    object-fit: contain;
    pointer-events: none;
  }
}
@media (min-width: 1200px) {
  .preview__title {
    font-size: 43rem;
    line-height: normal;
  }
  .preview__desc {
    margin: 0;
  }
  .preview__items {
    position: relative;
    margin: 10rem 0 0;
    width: 100%;
    height: 540rem;
    background: url(../media/front-page/preview__items.svg) center / auto no-repeat;
  }
  .preview__item {
    position: absolute;
    width: 200rem;
    height: 200rem;
  }
  .preview__item.lock::after {
    right: 30rem;
    bottom: 30rem;
  }
  .preview__item.leader {
    top: 33rem;
    left: -30rem;
  }
  .preview__item.bio {
    top: -4rem;
    left: 137rem;
  }
  .preview__item.it {
    top: -22rem;
    left: 372rem;
  }
  .preview__item.lang {
    top: 28rem;
    left: 589rem;
  }
  .preview__item.childs {
    top: -12rem;
    left: 806rem;
  }
  .preview__item.physic {
    top: 95rem;
    left: 1022rem;
  }
  .preview__item.math {
    top: 329rem;
    left: -13rem;
  }
  .preview__item.business {
    top: 327rem;
    left: 228rem;
  }
  .preview__item.cyber {
    top: 294rem;
    left: 985rem;
  }
  .preview__item.online {
    top: 132rem;
    left: 268rem;
  }
  .preview__item.exam {
    top: 211rem;
    left: 741rem;
  }
  .preview__img {
    left: 50%;
    max-width: 460rem;
    max-height: 460rem;
  }
}
/* END section__preview */