@charset "UTF-8";
/*Обнуление*/
* {
  padding: 0;
  margin: 0;
  border: 0;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:focus, :active {
  outline: none;
}

a:focus, a:active {
  outline: none;
}

nav, footer, header, aside {
  display: block;
}

html, body {
  scrollbar-gutter: stable;
  height: 100%;
  width: 100%;
  line-height: 1;
  font-size: 0.78125vw;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

input, button, textarea {
  font-family: inherit;
}

input::-ms-clear {
  display: none;
}

button {
  cursor: pointer;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

a, a:visited {
  text-decoration: none;
  color: inherit;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

a:hover {
  text-decoration: none;
  color: inherit;
}

ul li {
  list-style: none;
}

ol {
  list-style-position: inside;
}

img {
  vertical-align: top;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*--------------------*/
@font-face {
  font-family: "PP Fragment";
  src: url("../fonts/PPFragment-SansExtraBold.eot");
  src: url("../fonts/PPFragment-SansExtraBold.eot?#iefix") format("embedded-opentype"), url("../fonts/PPFragment-SansExtraBold.woff2") format("woff2"), url("../fonts/PPFragment-SansExtraBold.woff") format("woff"), url("../fonts/PPFragment-SansExtraBold.ttf") format("truetype"), url("../fonts/PPFragment-SansExtraBold.svg#PPFragment-SansExtraBold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Fragment";
  src: url("../fonts/PPFragment-SansRegular.eot");
  src: url("../fonts/PPFragment-SansRegular.eot?#iefix") format("embedded-opentype"), url("../fonts/PPFragment-SansRegular.woff2") format("woff2"), url("../fonts/PPFragment-SansRegular.woff") format("woff"), url("../fonts/PPFragment-SansRegular.ttf") format("truetype"), url("../fonts/PPFragment-SansRegular.svg#PPFragment-SansRegular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.content__header, .top-block__item h3 {
  font-family: PP Fragment;
  font-size: 6.4rem;
  font-weight: 800;
  line-height: 7.04rem;
}

.btn-main {
  font-family: PP Fragment;
  font-size: 2rem;
  font-weight: 800;
  line-height: 2.2rem;
}

.top-block__item span, body {
  font-family: PP Fragment;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.76rem;
}

.finish__low .content__wrapper, .finish__medium .content__wrapper, .finish__good .content__wrapper, .tof__card.false:before, .tof__card.true:before, .draganddrop__header:before {
  background-position: 0 0;
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
}

.tooltip, .tooltip-negative, .tof__card, .tof__btn, .quiz__item, .quiz__number, .progressbar__line-inner, .user__card, .user, .slick-prev, .slick-next, .draganddrop__content, .draganddrop__header:before, .draganddrop__header, .btn, .btn-main {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.controls__item, .slick-prev:before, .slick-next:before, .brain {
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  -ms-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-background-size: cover;
}

body {
  color: #000000;
  overflow-x: hidden;
  padding-top: 10rem;
}
* {
  scrollbar-width: none; /* Для Firefox */
}

#draggable, #droppable {
  -ms-touch-action: none;
  touch-action: none;
}

::-webkit-scrollbar {
  width: 0.5rem;
}

::-webkit-scrollbar-track {
  background-color: #F9F9F9;
}

::-webkit-scrollbar-thumb {
  background: #000000;
  box-shadow: inset 0.05em 0.05em 0 rgba(0, 0, 0, 0.1), inset 0 -0.05em 0 rgba(0, 0, 0, 0.07);
}

.grid {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.btn-main {
  text-align: center;
  display: inline-block;
  padding: 1.6rem 8.9rem;
  border-radius: 1.5rem;
  border-width: 0.3rem 0.3rem 0.8rem 0.3rem;
  border-style: solid;
  border-color: #FFC700;
  background: #FFE500;
}
.btn-main:hover {
  border-width: 0.3rem 0.3rem 1rem 0.3rem;
}
.btn-main:active {
  border-width: 0.3rem 0.3rem 0.3rem 0.3rem;
  border-color: #FFE500;
  background: #FFC700;
}

.btn-main.btn-blue {
  background: #2D63ED;
  border-color: #0E46D4;
  color: #fff;
  animation: blink 1s ease infinite;
}

.btn-main.btn-red {
  padding: 0.8rem;
  background: #EE899A;
  border-color: #C20020;
}

.btn-main.btn-blue.dis {
  border-top: 0.3rem solid #676A73;
  border-right: 0.3rem solid #676A73;
  border-bottom: 0.8rem solid #676A73;
  border-left: 0.3rem solid #676A73;
  background: #8C8F94;
  color: #676A73;
  animation: none;
}

.postloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;
  background-color: #FFF200;
  display: none;
  align-items: center;
  justify-content: center;
}
.postloader__header {
  width: 18.6rem;
  position: absolute;
  top: 3.2rem;
  left: 50%;
  transform: translateX(-50%);
}
.postloader__header img {
  width: 100%;
}
.postloader__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.8rem;
}
.postloader__content h3 {
  color: var(--Black, #000);
  text-align: center;
  font-family: "PP Fragment";
  font-size: 7.2rem;
  font-style: normal;
  font-weight: 800;
  line-height: 140%; /* 100.8px */
  display: none;
}
.postloader__btn {
  display: flex;
  align-items: flex-end;
  height: 8rem;
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  background-image: url(../img/main/1.png);
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size: 100%;
  background-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 12.12vh;
  z-index: 10;
}
.preloader__btn {
  height: 14vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  animation: blink 1s ease infinite;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #231F20;
  -webkit-border-radius: 2.4rem;
  -moz-border-radius: 2.4rem;
  border-radius: 2.4rem;
  padding: 1.2rem 2.4rem;
  position: fixed;
  top: 1.2rem;
  left: 2.4rem;
  right: 2.4rem;
  z-index: 1;
}
.header__btn {
  color: #000;
  text-align: center;
  font-family: "PP Fragment";
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; /* 19.8px */
  padding: 1.2rem 2.4rem;
  border-radius: 2rem;
  background: #FFF200;
}
.header__logo {
  width: 12.78rem;
}
.header__logo img {
  width: 100%;
}
.header__menu {
  display: flex;
  gap: 6.4rem;
  align-items: center;
}
.header__menu li {
  display: flex;
  align-items: center;
}
.header__menu li a {
  color: #ffffff;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.header__menu li a.active {
  text-decoration: underline;
}
.header__menu li a svg {
  width: 2.2rem;
  height: 2.2rem;
}
.header__account {
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.header__account img {
  width: 100%;
}

.brain {
  display: block;
  mask-image: url(../img/icons/brain.svg);
  background-color: #fff;
  width: 4.8rem;
  height: 4.8rem;
}

.top-block {
  display: flex;
  gap: 14.8rem;
  padding: 10.8rem 4.8rem 4.2rem;
  background: #FFD1F2;
  border-width: 0px 0px 0.8rem 0px;
  border-style: solid;
  border-color: #FF75D8;
  width: 100%;
  align-items: flex-end;
  border-radius: 0px 0px 4.8rem 4.8rem;
  height: 29rem;
  margin-top: -10rem;
}
.top-block__item {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.top-block__item span {
  opacity: 0.6;
}
.top-block .btn-main {
  margin-left: auto;
  background: #2D63ED;
  border-color: #0E46D4;
  padding: 2.3rem;
  animation: blink 1s ease infinite;
}

.main {
  padding: 2.4rem;
}
.main__search {
  padding: 0.8rem 1.6rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.6rem;
}

.cards {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
}

.card {
  height: 29.6rem;
  border-width: 2px 2px 4px 2px;
  border-style: solid;
  border-color: #CCCCCC;
  padding: 1.6rem;
  -webkit-border-radius: 2.4rem;
  -moz-border-radius: 2.4rem;
  border-radius: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card__top {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  justify-content: space-between;
}
.card__top h3 {
  font-family: PP Fragment;
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 3.84rem;
}
.card__top a {
  flex-shrink: 0;
  border: 0.2rem solid #A8A8A8;
  background: #D9D9D9;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 4.2rem;
  height: 4.2rem;
}
.card__top a svg {
  width: 2.025rem;
  height: 0.525rem;
}
.card__book {
  display: flex;
  align-items: center;
}
.card__bottom {
  display: flex;
  gap: 0.8rem;
  align-items: flex-end;
  justify-content: space-between;
}
.card__bottom a {
  flex-shrink: 0;
  border: 0.2rem solid #0E46D4;
  background: #2D63ED;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 4.2rem;
  height: 4.2rem;
}
.card__bottom a svg {
  width: 2.4rem;
  height: 2.4rem;
}

.btn {
  border-radius: 2rem;
  border: 0.2rem solid #E0E3D4;
  background: #FFF;
  padding: 1.6rem;
  color: #231F20;
  font-family: "PP Fragment";
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.btn.disabled {
  background-color: #C2C2C2;
  border: 0.2rem solid #C2C2C2;
  color: #fff;
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}
.btn.active {
  border-radius: 2rem;
  border-top: 2px solid #0E46D5;
  border-right: 2px solid #0E46D5;
  border-bottom: 4px solid #0E46D5;
  border-left: 2px solid #0E46D5;
  background: #2D63ED;
  color: #fff;
}
.btn.active:active {
  border-bottom: 2px solid #0E46D5;
}

.popup {
  background: #fff;
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1 0 0;
  border-radius: 40px;
  background: #FCFCFC;
  width: 64.4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.popup__btns {
  align-items: end;
  display: flex;
  gap: 0.8rem;
  width: 100%;
  height: 6rem;
}
.popup__header {
  color: #000;
  text-align: center;
  width: 100%;
  font-family: "PP Fragment";
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 800;
  line-height: 110%;
}
.popup input {
  border-radius: 2rem;
  border: 0.2rem solid #E0E3D4;
  background: #FFF;
  padding: 2.3rem;
  width: 100%;
  font-family: "PP Fragment";
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
}
.popup__wrapper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9;
}
.popup__wrapper.active {
  display: flex;
  justify-content: flex-end;
}

.draganddrop {
  width: 100%;
}
.draganddrop__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}
.draganddrop__cta svg {
  width: 3.9rem;
  height: 3.9rem;
}
.draganddrop__cta span {
  color: #231F20;
  text-align: center;
  font-family: "PP Fragment";
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
}
.draganddrop__header {
  color: #000;
  font-family: "PP Fragment";
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  margin-bottom: 0.8rem;
  display: flex;
  gap: 0.4rem;
}
.draganddrop__header:before {
  content: "";
  opacity: 0;
  background-image: url(../img/icons/check_box.svg);
  width: 1.8rem;
  height: 1.8rem;
}
.draganddrop__header.active {
  color: #C1C1C1;
}
.draganddrop__header.active:before {
  opacity: 1;
}
.draganddrop__content {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.4rem;
  border: 0.2rem dashed #E0E3D4;
  background: #FFF;
  width: 100%;
  height: 18.8rem;
}
.draganddrop__content.active {
  border: 0.2rem dashed #A8E10C;
  background: rgba(92, 208, 0, 0.1);
}
.draganddrop__content.active .draganddrop__cta {
  display: none;
}

.files {
  height: 100vh;
  background-color: #FCFCFC;
  padding: 2.4rem 1.6rem;
}
.files__header {
  color: #000;
  font-family: "PP Fragment";
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 800;
  line-height: 110%;
  margin-bottom: 2.4rem;
}
.files__item {
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 2.4rem;
  border: 0.1rem dashed #BCBCBC;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
  opacity: 1 !important;
}

#droppable {
  position: relative;
}

.slider__wrapper {
  width: 100%;
}
.slider__img {
  padding: 0 1.2rem;
  height: 49.7rem;
}
.slider__img img {
  height: 100%;
}
.publish {
  height: 5rem;
  border-radius: 2rem;
  background: #0E46D5;
  width: 54.1rem;
  margin: 0 auto 1.8rem;
  display: flex;
}
.publish .btn {
  width: 50%;
  animation: blink 1s ease infinite;
}
.publish__breadcrumbs {
  width: 50%;
  display: flex;
  color: #FFF;
  font-family: "PP Fragment";
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  align-items: center;
  justify-content: center;
}
.publish__breadcrumbs a {
  opacity: 0.6;
}

.aside {
  position: fixed;
  padding-left: 2.4rem;
  top: 50%;
  transform: translateY(-35%);
  z-index: 4;
}
.aside__menu {
  display: flex;
  flex-direction: column;
  border: 1px solid #C1C1C1;
  padding: 1.6rem;
  -webkit-border-radius: 1.6rem;
  -moz-border-radius: 1.6rem;
  border-radius: 1.6rem;
  gap: 0.8rem;
  background: #F8F8F8;
}
.aside__item {
  width: 15.5rem;
  border-radius: 2rem;
  border: 1px solid #C1C1C1;
  background: #F8F8F8;
  padding: 1.4rem;
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  align-items: center;
}
.aside__item span {
  color: #575757;
  text-align: center;
  font-family: "PP Fragment";
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; /* 15.4px */
}
.aside__item img {
  width: 2.4rem;
  height: 2.4rem;
}

.slick-prev, .slick-next {
  display: flex;
  width: 6.4rem;
  height: 6.4rem;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 2rem;
  border-top: 0.2rem solid #000;
  border-right: 0.2rem solid #000;
  border-bottom: 0.4rem solid #000;
  border-left: 0.2rem solid #000;
  background: #FFF;
  z-index: 10;
}
.slick-prev:active, .slick-next:active {
  border-top: 0.2rem solid #000;
  border-right: 0.2rem solid #000;
  border-bottom: 0.2rem solid #000;
  border-left: 0.2rem solid #000;
}
.slick-prev:before, .slick-next:before {
  content: "";
  width: 3.2rem;
  height: 3.2rem;
}

.slick-prev {
  left: 50%;
  transform: translate(-19rem, -50%);
}
.slick-prev:before {
  background-color: #000;
  mask-image: url("../img/slider/left.svg");
}

.slick-next {
  right: 50%;
  transform: translate(19rem, -50%);
  animation: blinkSlider 1s ease infinite;
}
.slick-next:before {
  background-color: #000;
  mask-image: url("../img/slider/right.svg");
}

.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
  background: #FFF;
}

.slick-arrow.slick-disabled {
  border-top: 0.2rem solid #888;
  border-right: 0.2rem solid #888;
  border-bottom: 0.2rem solid #888;
  border-left: 0.2rem solid #888;
  background: #E8E8E8;
}

.controls {
  position: fixed;
  bottom: 3.2rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 1.6rem 3.2rem;
  border-radius: 1.6rem;
  border: 0.1rem solid #C9C9C9;
  background: #F8F8F8;
  display: flex;
  gap: 3.2rem;
}
.controls__item {
  width: 3rem;
  height: 3rem;
  background-color: #949494;
}
.controls__item.active {
  background-color: #000;
}

.user {
  margin-top: -10rem;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.user.pink {
  background: #FFD1F2;
}
.user.purple {
  background: #AF95FF;
}
.user.green {
  background: #A8E10C;
}
.user.yellow {
  background: #FFF200;
}
.user.blue {
  background: #78CFFF;
}
.user .back {
  display: flex;
  width: 6.4rem;
  height: 6.4rem;
  justify-content: center;
  align-items: center;
  border-radius: 2rem;
  flex-shrink: 0;
  border-top: 0.2rem solid rgba(0, 0, 0, 0.1);
  border-right: 0.2rem solid rgba(0, 0, 0, 0.1);
  border-bottom: 0.4rem solid rgba(0, 0, 0, 0.1);
  border-left: 0.2rem solid rgba(0, 0, 0, 0.1);
  background: transparent;
}
.user .back img {
  width: 3.2rem;
  height: 3.2rem;
}
.user .header__btn {
  flex-shrink: 0;
  border-radius: 2rem;
  border: 0.2rem solid var(--Accent-Yellow-Extra, #FFC700);
  background: var(--Accent-Yellow-Default, #FFF200);
}
.user__content {
  height: 100%;
  position: relative;
}
.user__header {
  border: 0.2rem solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.1);
  padding: 1.6rem 2.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
}
.user__header .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.user__header .logo img {
  width: 29.2rem;
}
.user__footer {
  padding: 1.5rem;
  border: 0.2rem solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.1);
  height: 11rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
  gap: 1.3rem;
}
.user__variant {
  background: #E8E8E8;
}
.user__correct {
  background: #A8E10C;
}
.user__notcorrect {
  background: #F66E22;
}
.user__card {
  position: fixed;
  left: 0;
  bottom: -100%;
  border-radius: 4.8rem 4.8rem 0px 0px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1.6rem;
  padding: 2.4rem;
}
.user__card.active {
  bottom: 0;
}
.user__card h3 {
  font-family: "PP Fragment";
  font-size: 4.8rem;
  font-style: normal;
  font-weight: 800;
  line-height: 135%;
}

.content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.content__wrapper {
  height: 100%;
  padding: 2.4rem;
}
.content__header {
  color: #000;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.8rem;
}
.content__img {
  display: block;
  margin: 0 auto;
  height: 39vh;
  text-align: center;
}
.content__img img {
  height: 100%;
}
.content.active {
  opacity: 1;
  z-index: 10;
}
.content__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.content__row {
  display: flex;
  align-items: center;
}

.question-quiz {
  justify-content: center;
  gap: 3.2rem;
}

.content__content h3 {
  color: #000;
  font-family: "PP Fragment";
  font-size: 4.8rem;
  font-style: normal;
  font-weight: 800;
  line-height: 135%; /* 64.8px */
  margin-bottom: 1.2rem;
}
.content__content ol li {
  color: #000;
  font-family: "PP Fragment";
  font-size: 3rem;
  font-style: normal;
  font-weight: 400;
  line-height: 135%; /* 40.5px */
}

.second-slide .content__img {
  margin: 0;
  height: 60vh;
}

.third-slide .content__img {
  margin: 0;
  height: 100%;
  width: 60rem;
}
.third-slide .content__content {
  width: 59rem;
  margin-left: 4.8rem;
}

.fourth-slide h3 {
  color: #000;
  text-align: center;
  font-family: "PP Fragment";
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 800;
  line-height: 135%;
}

.fives-slide h3 {
  font-family: "PP Fragment";
  font-size: 6.4rem;
  font-style: normal;
  font-weight: 800;
  line-height: 110%; /* 70.4px */
  margin-bottom: 7vh;
}
.fives-slide .content__img {
  width: 18.6rem;
  height: auto;
}
.fives-slide .content__img img {
  width: 100%;
}
.fives-slide .content__wrapper {
  background: url("../img/bg.png") 0 0 no-repeat;
  background-size: cover;
}

.progressbar {
  width: 100%;
  display: flex;
  gap: 4.8rem;
  align-items: center;
}
.progressbar__line {
  width: 72rem;
  height: 1.2rem;
  border-radius: 1.6rem;
  background: rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}
.progressbar__line-inner {
  left: 0;
  top: 0;
  position: absolute;
  border-radius: 1.6rem;
  background: #231F20;
  height: 1.2rem;
}
.progressbar__counter {
  border-radius: 2rem;
  border: 0.2rem solid rgba(0, 0, 0, 0.1);
  background: transparent;
  padding: 1.2rem 2.4rem;
  flex-shrink: 0;
}

.steps {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.steps-w {
  grid-template-columns: repeat(4, 1fr);
}
.steps__hidden {
  animation: blink 1s ease infinite;
}
.steps__item {
  border-radius: 3.2rem;
  border: 0.2rem solid #D9D9D9;
  background: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 26vh;
  width: 16rem;
  cursor: pointer;
}
.steps__item img {
  width: 100%;
}
.steps__item.active {
  border: 0.2rem solid var(--Accent-Blue-Default, #2D63ED);
}
.steps__number {
  position: absolute;
  top: -2.4rem;
  right: -2.4rem;
  width: 4.8rem;
  height: 4.8rem;
  flex-shrink: 0;
  background: #FFF;
  border: 0.2rem solid #949494;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #000;
  font-family: "PP Fragment";
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; /* 26.4px */
}

.quiz {
  width: 100%;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
}
.quiz__number {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  border-radius: 50%;
  border: 0.2rem solid #6F6F6F;
}
.quiz__item {
  width: 100%;
  padding: 3.2rem;
  border-radius: 3rem;
  border: 0.4rem solid #fff;
  background: #FFF;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.quiz__item.active {
  border: 0.4rem solid var(--Accent-Green-Extra, #5CD000);
}
.quiz__item.active .quiz__number {
  background: #5CD000;
}
.quiz__item h4 {
  color: var(--171717, #171717);
  text-align: center;
  font-family: "PP Fragment";
  font-size: 3.8rem;
  font-style: normal;
  font-weight: 400;
  line-height: 135%; /* 51.3px */
  width: 100%;
}

.tof {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3.9rem;
  width: 100%;
}
.tof__card {
  width: 100%;
}
.tof img {
  width: 16rem;
  flex-shrink: 0;
}
.tof__btn {
  width: 22rem;
  height: 22rem;
  border-radius: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: "PP Fragment";
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  cursor: pointer;
  animation: blink 1s ease infinite;
}
.tof__btn.active {
  opacity: 0.7;
  animation: none;
}
.tof__btn.active.tof__true {
  border: 0.6rem solid #A9E10C;
  background: #63820C;
  color: #A9E10C;
}
.tof__btn.active.tof__false {
  border: 0.6rem solid #F66E22;
  background: #873202;
  color: #F66E22;
}
.tof__btn img {
  width: 100%;
}
.tof__false {
  border-radius: 3.2rem;
  border-top: 0.6rem solid #873202;
  border-right: 0.6rem solid #873202;
  border-bottom: 1.2rem solid #873202;
  border-left: 0.6rem solid #873202;
  background: #F66E22;
  color: #873202;
}
.tof__true {
  border-top: 0.6rem solid #63820C;
  border-right: 0.6rem solid #63820C;
  border-bottom: 1.2rem solid #63820C;
  border-left: 0.6rem solid #63820C;
  background: #A9E10C;
  color: #486004;
}
.tof__card {
  height: 100%;
  border-radius: 1.6rem;
  background: var(--Accent-Pink-Extra, #FB96DF);
  padding: 2.4rem 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  max-width: 32rem;
  min-height: 51vh;
}
.tof__card.true {
  border-radius: 1.6rem;
  border: 0.2rem solid #63820C;
  background: #A9E10C;
  position: relative;
}
.tof__card.true:before {
  content: "";
  background-image: url(../img/steps/tureTag.svg);
  width: 10.5rem;
  height: 9.1rem;
  position: absolute;
  top: -3rem;
  right: -3rem;
}
.tof__card.false {
  border-radius: 1.6rem;
  border: 0.2rem solid #873202;
  background: #F66E22;
  position: relative;
}
.tof__card.false:before {
  content: "";
  background-image: url(../img/steps/falseTag.svg);
  width: 10.5rem;
  height: 9.1rem;
  position: absolute;
  top: -3rem;
  right: -3rem;
}
.tof__card h4 {
  color: #000;
  text-align: center;
  font-family: "PP Fragment";
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 800;
  line-height: 135%; /* 32.4px */
}
.tof__card span {
  position: absolute;
  top: 2.4rem;
  left: 50%;
  transform: translateX(-50%);
  color: #000;
  text-align: center;
  font-family: "PP Fragment";
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 135%; /* 32.4px */
  opacity: 0.6;
}

.finish__persone {
  position: absolute;
  bottom: 0;
  left: 10rem;
  height: 100%;
}
.finish__persone img {
  height: 100%;
}
.finish__block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
.finish__block.active {
  z-index: 10;
  opacity: 1;
}
.finish__diamond {
  background: #B6EADE;
  z-index: 10;
  opacity: 1;
}
.finish__diamond .content__col {
  justify-content: center;
}
.finish__diamond-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.finish__diamond-content img {
  margin-bottom: 3.2rem;
  animation: rotatey 2s ease infinite;
}
.finish__diamond-content span {
  color: #000;
  text-align: center;
  font-family: "PP Fragment";
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 41.6px */
}
.finish__diamond-content span b {
  color: #009472;
  font-family: "PP Fragment";
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 800;
  line-height: 130%;
}
.finish__dumbbell {
  background: var(--Accent-Yellow-Default, #FFF200);
  z-index: 10;
  opacity: 1;
}
.finish__dumbbell .content__col {
  justify-content: center;
}
.finish__dumbbell-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.finish__dumbbell-content span {
  color: #000;
  text-align: center;
  font-family: "PP Fragment";
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 41.6px */
  margin-bottom: 4.8rem;
}
.finish__dumbbell-counter {
  border-radius: 6.4rem;
  background: #FECF05;
  display: flex;
  align-items: center;
  gap: 6.4rem;
  padding-right: 6.4rem;
}
.finish__dumbbell-counter span {
  border-radius: 6.4rem;
  background: #FFE605;
  color: #000;
  text-align: center;
  font-family: "PP Fragment";
  font-size: 10.8rem;
  font-style: normal;
  font-weight: 800;
  padding: 4rem 9rem;
  margin-bottom: 0;
  line-height: 100%; /* 108px */
}
.finish__scorelist {
  background: #B2C8F2;
  z-index: 10;
  opacity: 1;
}
.finish__scorelist-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.finish__scorelist .content__wrapper {
  padding-bottom: 0;
  justify-content: flex-end;
}
.finish__scorelist-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 190rem;
  height: 190rem;
  transform: translate(-50%, -50%) rotate(0deg);
  z-index: -1;
  animation: rotateBg 8s linear infinite;
}
.finish__scorelist-bg svg {
  width: 100%;
  height: 100%;
}
.finish__scorelist-counter {
  height: 54vh;
  overflow: hidden;
  margin-top: 3vh;
  width: 33rem;
  position: relative;
}
.finish__scorelist-counter .you {
  position: absolute;
  animation: blink 1s ease infinite;
  top: 2rem;
  right: 2.1rem;
  width: 7rem;
}
.finish__scorelist-counter img {
  width: 100%;
}
.finish__good {
  background: #ABE709;
}
.finish__good .content__wrapper {
  background-image: url(../img/steps/bg_good.png?v=1.0);
  background-position: bottom;
  position: relative;
}
.finish__good .finish__info {
  border: 0.8rem solid var(--Accent-Green-Extra, #5CD000);
  background: var(--Accent-Green-Default, #A8E10C);
}
.finish__good .finish__score {
  background: #5CD000;
}
.finish__good .finish__score b {
  background: #ABE709;
}
.finish__medium {
  background: #FFC700;
}
.finish__medium .content__wrapper {
  background-image: url(../img/steps/bg_medium.png?v=1.0);
  background-position: bottom;
  position: relative;
}
.finish__medium .finish__info {
  border: 0.8rem solid var(--Accent-Orange-Extra, #FF8A00);
  background: #FFC700;
}
.finish__medium .finish__score {
  background: #FFA800;
}
.finish__medium .finish__score b {
  background: #FFC700;
}
.finish__low {
  background: #FF7729;
}
.finish__low .content__wrapper {
  background-image: url(../img/steps/bg_low.png?v=1.0);
  background-position: bottom;
  position: relative;
  justify-content: center;
}
.finish__low .finish__persone {
  left: 0;
}
.finish__low .finish__info {
  border: 0.8rem solid #F15B06;
  background: #FF7729;
}
.finish__low .finish__score {
  background: #F15B06;
}
.finish__low .finish__score b {
  background: #FF7729;
}
.finish__info {
  padding: 2.4rem;
  border-radius: 2.4rem;
  width: 40rem;
  display: flex;
  gap: 0.8rem;
  flex-direction: column;
}
.finish__info h3 {
  margin-bottom: 0;
}
.finish__info h4 {
  color: #000;
  text-align: center;
  font-family: "PP Fragment";
  font-size: 2.3rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 31.2px */
}
.finish__row {
  display: flex;
  gap: 0.8rem;
}
.finish__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  border-radius: 2rem;
  padding: 0.6rem;
  width: 100%;
}
.finish__score b {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem;
  color: var(--000000, #000);
  font-family: "PP Fragment";
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 800;
  line-height: 110%; /* 26.4px */
  -webkit-border-radius: 1.8rem;
  -moz-border-radius: 1.8rem;
  border-radius: 1.8rem;
}

.tooltip-negative {
  border-radius: 1.5rem;
  border: 0.4rem solid #FF5C00;
  background: #E7D7CE;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 0.4rem 2.4rem;
  position: fixed;
  bottom: -100%;
  left: 20%;
  transform: translateX(-50%);
  z-index: 10;
}
.tooltip-negative.active {
  bottom: 3rem;
}
.tooltip-negative img {
  width: 4.2rem;
  height: 4.2rem;
}
.tooltip-negative span {
  color: #000;
  font-family: "PP Fragment";
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
}

.tooltip {
  border-radius: 1.5rem;
  border: 0.4rem solid #5CD000;
  background: #B7EE27;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 0.4rem 2.4rem;
  position: fixed;
  right: -100%;
  bottom: 3rem;
  z-index: 10;
}
.tooltip.active {
  right: 3rem;
}
.tooltip img {
  width: 4.2rem;
  height: 4.2rem;
}
.tooltip span {
  color: #000;
  font-family: "PP Fragment";
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
}

.snow .snowflake {
  position: absolute;
  z-index: 10;
  display: block;
}
.snow .snowflake img {
  width: 100%;
}

.snowflake {
  display: none;
}

.tip {
  position: absolute;
  width: 30rem;
  animation: blink 1s ease infinite;
}

.tip-m {
  display: none;
}

.tip2 {
  position: absolute;
  top: 3rem;
  right: 20rem;
  width: 40rem;
}

.tip3 {
  display: none;
  position: absolute;
  bottom: 0rem;
  right: 46rem;
  width: 34rem;
}

.tip4 {
  position: absolute;
  width: 42rem;
  bottom: 0;
  right: 8.8rem;
}

.tip5 {
  display: none;
  position: absolute;
  top: 16rem;
  width: 45rem;
  left: 35rem;
}

.restartScreen {
  display: none;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  align-items: center;
  justify-content: center;
}
.restartScreen__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
}
.restartScreen__content span {
  color: var(--White, #FFF);
  text-align: center;
  font-family: "PP Fragment";
  font-size: 11.2rem;
  font-style: normal;
  font-weight: 800;
  line-height: 140%; /* 156.8px */
}
.restartScreen__content h3 {
  color: var(--White, #FFF);
  text-align: center;
  font-family: "PP Fragment";
  font-size: 5.2rem;
  font-style: normal;
  font-weight: 800;
  line-height: 110%; /* 57.2px */
}

.kommo-form {
  width: 100%;
  height: 100%;
}
.kommo-form iframe {
  width: 100%;
  height: 100%;
}

.slideTo {
  transform: translateY(-100%);
  animation: slideTo 1.5s ease forwards;
}

.slideIn {
  transform: translateX(100%);
  animation: slideIn 4s ease forwards;
}

.fadeIn {
  opacity: 0;
  animation: fadeIn 3s ease forwards;
}

.line {
  width: 0;
  animation: line 3s ease 3s forwards;
}

.d-4000 {
  animation-delay: 4000ms;
}

.d-3500 {
  animation-delay: 3500ms;
}

.d-3000 {
  animation-delay: 3000ms;
}

.d-2500 {
  animation-delay: 2500ms;
}

.d-2000 {
  animation-delay: 2000ms;
}

.d-12000 {
  animation-delay: 18000ms;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes rotateBg {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes rotatey {
  0% {
    transform: rotate3d(0, 1, 0, 0deg);
  }
  50% {
    transform: rotate3d(0, 1, 0, 180deg);
  }
  100% {
    transform: rotate3d(0, 1, 0, 360deg);
  }
}
@keyframes slideTo {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes slideIn {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes line {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes blink {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes blinkSlider {
  0% {
    transform: translate(19rem, -50%);
  }
  50% {
    transform: translate(19rem, -55%);
  }
  100% {
    transform: translate(19rem, -50%);
  }
}
@media (max-width: 1024px) {
  html, body {
    font-size: 2.6595744vw;
    overflow: hidden;
  }
  .cards {
    display: flex;
    flex-direction: column;
    height: 19rem;
  }
  .header__logo {
    display: none;
  }
  .header__menu {
    display: none;
  }
  .preloader {
    -webkit-background-size: 205%;
    background-size: 205%;
    padding-bottom: calc(var(--vh, 1vh) * 40.12);
    background-position: center top;
  }
  .preloader img {
    width: 100%;
  }
  .btn-main {
    padding: 1.6rem 5.9rem;
  }
  .top-block__item h3 {
    font-family: "PP Fragment";
    font-size: 3.2rem;
    font-style: normal;
    font-weight: 800;
    line-height: 110%; /* 35.2px */
  }
  .top-block__item span {
    text-wrap: nowrap;
  }
  .top-block {
    height: auto;
    gap: 0;
    justify-content: space-between;
    padding: 9.8rem 1.5rem 4.2rem;
    position: relative;
  }
  .header__btn {
    width: 100%;
  }
  .top-block .btn-main {
    top: 19rem;
    position: absolute;
    left: calc(50% - 4.85rem);
  }
  .header {
    padding: 1rem;
    left: 1.4rem;
    right: 1.4rem;
  }
  .popup {
    position: initial;
    transform: translate(0, 0);
    width: 100%;
    gap: 0.5rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    border-radius: 2rem;
    padding: 1rem;
    flex: 0 0 0;
  }
  .files {
    height: auto;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    border-radius: 2rem;
  }
  .popup__wrapper.active {
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem;
    gap: 1.5rem;
    overflow-y: scroll;
  }
  .files__header {
    grid-column: span 2;
  }
  .files__item {
    padding: calc(var(--vh, 1vh) * 1.5) calc(var(--vh, 1vh) * 3);
    margin-bottom: 0;
  }
  .files__item img {
    width: 3rem;
    height: 3rem;
  }
  .popup input {
    padding: 1.3rem;
  }
  .draganddrop__content {
    height: calc(var(--vh, 1vh) * 17.8);
  }
  .files__header {
    margin-bottom: 1rem;
  }
  .postloader__content h3 {
    font-size: 3.2rem;
  }
  .aside__menu {
    display: none;
  }
  .publish__breadcrumbs {
    display: none;
  }
  .publish {
    width: calc(100% - 3rem);
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    z-index: 4;
    background: transparent;
  }
  .publish .btn {
    width: 100%;
  }
  .controls {
    top: 8.5rem;
    bottom: auto;
  }
  .slider__img {
    height: calc(var(--vh, 1vh) * 55);
  }
  .slider {
    margin-top: calc(var(--vh, 1vh) * 10);
  }
  .tip5 {
    display: none;
    position: absolute;
    top: auto;
    width: 33rem;
    left: 0;
    bottom: 10rem;
  }
  .slick-prev {
    left: 56%;
  }
  .slick-next {
    right: 56%;
  }
  .slick-prev, .slick-next {
    width: calc(var(--vh, 1vh) * 8.5);
    height: calc(var(--vh, 1vh) * 8.5);
  }
  .user__header {
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 2.4rem;
    flex-direction: row;
    flex-wrap: wrap;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    backdrop-filter: blur(10px);
    z-index: 10;
    height: calc(var(--vh, 1vh) * 17);
  }
  .progressbar {
    gap: 1rem;
    flex-direction: row-reverse;
    width: 75%;
  }
  .progressbar__counter {
    font-size: 1.5rem;
    padding: calc(var(--vh, 1vh) * 1.2) calc(var(--vh, 1vh) * 2.4);
  }
  .user .back {
    width: calc(var(--vh, 1vh) * 7.4);
    height: calc(var(--vh, 1vh) * 7.4);
  }
  .user .header__btn {
    padding: calc(var(--vh, 1vh) * 1.2);
  }
  .tooltip-negative {
    left: 50%;
    width: calc(100% - 3rem);
  }
  .user__footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    height: calc(var(--vh, 1vh) * 15);
    backdrop-filter: blur(10px);
  }
  .user__footer .btn-main.btn-blue {
    padding: calc(var(--vh, 1vh) * 1.6) 5.9rem;
  }
  .content__img img {
    width: 100%;
    height: auto;
  }
  .content__wrapper {
    padding: 2.4rem;
    overflow-y: scroll;
    flex-direction: column;
    padding-top: calc(var(--vh, 1vh) * 20);
    padding-bottom: calc(var(--vh, 1vh) * 18);
  }
  .content__content h3 {
    font-size: 2.8rem;
  }
  .content__header {
    padding: 0.8rem;
  }
  .content__header, .top-block__item h3 {
    font-size: 4.4rem;
    line-height: 5.04rem;
  }
  .third-slide .content__img {
    width: 100%;
    height: auto;
  }
  .third-slide .content__content {
    width: 100%;
  }
  .third-slide .content__content {
    margin-left: 0;
    margin-top: 2rem;
  }
  .content__content ol li {
    font-size: 2rem;
  }
  .steps {
    gap: 1rem;
  }
  .steps__item {
    height: calc(var(--vh, 1vh) * 20);
    width: 10rem;
  }
  .fives-slide h3 {
    font-size: 4.4rem;
  }
  .fives-slide .content__img {
    width: 17.6rem;
  }
  .fives-slide .content__wrapper {
    justify-content: flex-start;
  }
  .fourth-slide .content__wrapper {
    justify-content: flex-start;
  }
  .fourth-slide h3 {
    font-size: 2.2rem;
    margin-bottom: 2rem;
  }
  .steps-w {
    grid-template-columns: repeat(3, 1fr);
  }
  .steps__number {
    top: -0.4rem;
    right: -0.4rem;
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1.4rem;
  }
  .btn-main.btn-red {
    padding: calc(var(--vh, 1vh) * 0.8);
  }
  .btn-main.btn-red svg {
    width: calc(var(--vh, 1vh) * 4.3);
    height: calc(var(--vh, 1vh) * 4.3);
  }
  .tooltip {
    right: -150%;
  }
  .tooltip.active {
    right: 50%;
    transform: translateX(50%);
    width: calc(100% - 3rem);
    bottom: 12rem;
  }
  .tooltip-negative.active {
    bottom: 12rem;
  }
  .quiz {
    grid-template-columns: repeat(1, 1fr);
  }
  .quiz__item {
    padding: 1.2rem;
  }
  .quiz__item h4 {
    font-size: 2.8rem;
  }
  .user {
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
  }
  .user__card {
    bottom: -120%;
  }
  .tof {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3rem 1rem;
  }
  .tof__card {
    order: 1;
    width: 100%;
    height: auto;
  }
  .tof__false {
    order: 2;
  }
  .tof__true {
    order: 3;
  }
  .tof__btn {
    height: 15rem;
    width: 47%;
  }
  .user__notcorrect .content__wrapper {
    padding-bottom: 2.4rem;
  }
  .user__card {
    gap: 0.5rem;
  }
  .user__card .btn-main.btn-blue {
    margin-top: 3rem;
  }
  .user__card span {
    font-size: 2rem;
  }
  .finish__persone {
    position: absolute;
    bottom: calc(var(--vh, 1vh) * 15);
    left: 10rem;
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  .finish__persone img {
    height: auto;
    width: 110%;
  }
  .finish__info {
    width: 100%;
  }
  .finish__low .content__wrapper {
    background-image: url(../img/steps/bg_low.png?v=1.0);
    background-position: -39rem calc(var(--vh, 1vh) * 24);
    position: relative;
    background-size: 245%;
  }
  .finish__medium .finish__persone {
    left: 0;
  }
  .finish__medium .finish__persone img {
    width: 120%;
  }
  .finish__good .finish__persone {
    left: 0;
  }
  .finish__good .finish__persone img {
    width: 120%;
  }
  .snow {
    overflow: hidden !important;
  }
  .snow .snowflake img {
    width: 60%;
  }
  .finish__diamond .user__footer {
    width: 100%;
    position: absolute;
  }
  .finish__dumbbell-counter {
    border-radius: 6.4rem;
    background: #FECF05;
    align-items: center;
    gap: 1.4rem;
    padding-right: 3.4rem;
  }
  .finish__dumbbell-counter img {
    width: 11rem;
  }
  .finish__dumbbell-content .finish__dumbbell-counter span {
    padding: 2rem 5rem;
    border-radius: 6.4rem;
    background: #FFE605;
    color: #000;
    text-align: center;
    font-size: 10.8rem;
    font-style: normal;
    font-weight: 800;
    margin-bottom: 0;
    line-height: 100%;
  }
  .finish__dumbbell-content span {
    color: #000;
    text-align: center;
    font-family: "PP Fragment";
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    margin-bottom: 2.8rem;
  }
  .finish__scorelist-counter {
    margin-top: calc(var(--vh, 1vh) * 6);
  }
  .tip {
    display: none;
    opacity: 0;
  }
  .tip-m {
    display: block;
    position: absolute;
    width: 33rem;
    animation: blink 1s ease infinite;
  }
  .tip-m.tip1-m {
    top: calc(var(--vh, 1vh) * 45);
    left: calc(50% - 16.5rem);
  }
  .tip-m.tip2 {
    top: auto;
    bottom: calc(var(--vh, 1vh) * 6);
    left: calc(50% - 16.5rem);
  }
  .tip-m.tip3 {
    display: none;
    top: calc(var(--vh, 1vh) * 16);
    left: calc(50% - 16.5rem);
  }
  .tip-m.tip4 {
    bottom: calc(var(--vh, 1vh) * 12);
    left: calc(50% - 16.5rem);
  }
  .tip-m.tip5 {
    display: none;
    bottom: calc(var(--vh, 1vh) * 12);
    width: 30rem;
    left: calc(50% - 15rem);
  }
  .fives-slide .content__wrapper {
    background: url("../img/bgm.png") center center no-repeat;
    background-size: cover;
  }
}
@media (max-width: 1024px) {
  html, body {
    font-size: 2.6595744vw;
    overflow: hidden;
  }
  .cards {
    display: flex;
    flex-direction: column;
    height: 19rem;
  }
  .header__logo {
    display: none;
  }
  .header__menu {
    display: none;
  }
  .preloader {
    -webkit-background-size: 205%;
    background-size: 205%;
    padding-bottom: calc(var(--vh, 1vh) * 40.12);
    background-position: center top;
  }
  .preloader img {
    width: 100%;
  }
  .btn-main {
    padding: 1.6rem 5.9rem;
  }
  .top-block__item h3 {
    font-family: "PP Fragment";
    font-size: 3.2rem;
    font-style: normal;
    font-weight: 800;
    line-height: 110%; /* 35.2px */
  }
  .top-block__item span {
    text-wrap: nowrap;
  }
  .top-block {
    height: auto;
    gap: 0;
    justify-content: space-between;
    padding: 9.8rem 1.5rem 4.2rem;
    position: relative;
  }
  .header__btn {
    width: 100%;
  }
  .top-block .btn-main {
    top: 19rem;
    position: absolute;
    left: calc(50% - 4.85rem);
  }
  .header {
    padding: 1rem;
    left: 1.4rem;
    right: 1.4rem;
  }
  .popup {
    position: initial;
    transform: translate(0, 0);
    width: 100%;
    gap: 0.5rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    border-radius: 2rem;
    padding: 1rem;
    flex: 0 0 0;
  }
  .files {
    height: auto;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    border-radius: 2rem;
  }
  .popup__wrapper.active {
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem;
    gap: 1.5rem;
    overflow-y: scroll;
  }
  .files__header {
    grid-column: span 2;
  }
  .files__item {
    padding: calc(var(--vh, 1vh) * 1.5) calc(var(--vh, 1vh) * 3);
    margin-bottom: 0;
  }
  .files__item img {
    width: 3rem;
    height: 3rem;
  }
  .popup input {
    padding: 1.3rem;
  }
  .draganddrop__content {
    height: calc(var(--vh, 1vh) * 17.8);
  }
  .files__header {
    margin-bottom: 1rem;
  }
  .postloader__content h3 {
    font-size: 3.2rem;
  }
  .aside__menu {
    display: none;
  }
  .publish__breadcrumbs {
    display: none;
  }
  .publish {
    width: calc(100% - 3rem);
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    z-index: 4;
    background: transparent;
  }
  .publish .btn {
    width: 100%;
  }
  .controls {
    top: 8.5rem;
    bottom: auto;
  }
  .slider__img {
    height: calc(var(--vh, 1vh) * 55);
  }
  .slider {
    margin-top: calc(var(--vh, 1vh) * 10);
  }
  .tip5 {
    display: none;
    position: absolute;
    top: auto;
    width: 33rem;
    left: 0;
    bottom: 10rem;
  }
  .slick-prev {
    left: 56%;
  }
  .slick-next {
    right: 56%;
  }
  .slick-prev, .slick-next {
    width: calc(var(--vh, 1vh) * 8.5);
    height: calc(var(--vh, 1vh) * 8.5);
  }
  .user__header {
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 2.4rem;
    flex-direction: row;
    flex-wrap: wrap;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    backdrop-filter: blur(10px);
    z-index: 10;
    height: calc(var(--vh, 1vh) * 17);
  }
  .progressbar {
    gap: 1rem;
    flex-direction: row-reverse;
    width: 75%;
  }
  .progressbar__counter {
    font-size: 1.5rem;
    padding: calc(var(--vh, 1vh) * 1.2) calc(var(--vh, 1vh) * 2.4);
  }
  .user .back {
    width: calc(var(--vh, 1vh) * 7.4);
    height: calc(var(--vh, 1vh) * 7.4);
  }
  .user .header__btn {
    padding: calc(var(--vh, 1vh) * 1.2);
  }
  .tooltip-negative {
    left: 50%;
    width: calc(100% - 3rem);
  }
  .user__footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    height: calc(var(--vh, 1vh) * 15);
    backdrop-filter: blur(10px);
  }
  .user__footer .btn-main.btn-blue {
    padding: calc(var(--vh, 1vh) * 1.6) 5.9rem;
  }
  .content__img img {
    width: 100%;
    height: auto;
  }
  .content__wrapper {
    padding: 2.4rem;
    overflow-y: scroll;
    flex-direction: column;
    padding-top: calc(var(--vh, 1vh) * 20);
    padding-bottom: calc(var(--vh, 1vh) * 18);
  }
  .content__content h3 {
    font-size: 2.8rem;
  }
  .content__header {
    padding: 0.8rem;
  }
  .content__header, .top-block__item h3 {
    font-size: 4.4rem;
    line-height: 5.04rem;
  }
  .third-slide .content__img {
    width: 100%;
    height: auto;
  }
  .third-slide .content__content {
    width: 100%;
  }
  .third-slide .content__content {
    margin-left: 0;
    margin-top: 2rem;
  }
  .content__content ol li {
    font-size: 2rem;
  }
  .steps {
    gap: 1rem;
  }
  .steps__item {
    height: calc(var(--vh, 1vh) * 20);
    width: 10rem;
  }
  .fives-slide h3 {
    font-size: 4.4rem;
  }
  .fives-slide .content__img {
    width: 17.6rem;
  }
  .fives-slide .content__wrapper {
    justify-content: flex-start;
  }
  .fourth-slide .content__wrapper {
    justify-content: flex-start;
  }
  .fourth-slide h3 {
    font-size: 2.2rem;
    margin-bottom: 2rem;
  }
  .steps-w {
    grid-template-columns: repeat(3, 1fr);
  }
  .steps__number {
    top: -0.4rem;
    right: -0.4rem;
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1.4rem;
  }
  .btn-main.btn-red {
    padding: calc(var(--vh, 1vh) * 0.8);
  }
  .btn-main.btn-red svg {
    width: calc(var(--vh, 1vh) * 4.3);
    height: calc(var(--vh, 1vh) * 4.3);
  }
  .tooltip {
    right: -150%;
  }
  .tooltip.active {
    right: 50%;
    transform: translateX(50%);
    width: calc(100% - 3rem);
    bottom: 12rem;
  }
  .tooltip-negative.active {
    bottom: 12rem;
  }
  .quiz {
    grid-template-columns: repeat(1, 1fr);
  }
  .quiz__item {
    padding: 1.2rem;
  }
  .quiz__item h4 {
    font-size: 2.8rem;
  }
  .user {
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
  }
  .user__card {
    bottom: -120%;
  }
  .tof {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3rem 1rem;
  }
  .tof__card {
    order: 1;
    width: 100%;
    height: auto;
  }
  .tof__false {
    order: 2;
  }
  .tof__true {
    order: 3;
  }
  .tof__btn {
    height: 15rem;
    width: 47%;
  }
  .user__notcorrect .content__wrapper {
    padding-bottom: 2.4rem;
  }
  .user__card {
    gap: 0.5rem;
  }
  .user__card .btn-main.btn-blue {
    margin-top: 3rem;
  }
  .user__card span {
    font-size: 2rem;
  }
  .finish__persone {
    position: absolute;
    bottom: calc(var(--vh, 1vh) * 15);
    left: 10rem;
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  .finish__persone img {
    height: auto;
    width: 110%;
  }
  .finish__info {
    width: 100%;
  }
  .finish__low .content__wrapper {
    background-image: url(../img/steps/bg_low.png?v=1.0);
    background-position: -39rem calc(var(--vh, 1vh) * 24);
    position: relative;
    background-size: 245%;
  }
  .finish__medium .finish__persone {
    left: 0;
  }
  .finish__medium .finish__persone img {
    width: 120%;
  }
  .finish__good .finish__persone {
    left: 0;
  }
  .finish__good .finish__persone img {
    width: 120%;
  }
  .snow {
    overflow: hidden !important;
  }
  .snow .snowflake img {
    width: 60%;
  }
  .finish__diamond .user__footer {
    width: 100%;
    position: absolute;
  }
  .finish__dumbbell-counter {
    border-radius: 6.4rem;
    background: #FECF05;
    align-items: center;
    gap: 1.4rem;
    padding-right: 3.4rem;
  }
  .finish__dumbbell-counter img {
    width: 11rem;
  }
  .finish__dumbbell-content .finish__dumbbell-counter span {
    padding: 2rem 5rem;
    border-radius: 6.4rem;
    background: #FFE605;
    color: #000;
    text-align: center;
    font-size: 10.8rem;
    font-style: normal;
    font-weight: 800;
    margin-bottom: 0;
    line-height: 100%;
  }
  .finish__dumbbell-content span {
    color: #000;
    text-align: center;
    font-family: "PP Fragment";
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    margin-bottom: 2.8rem;
  }
  .finish__scorelist-counter {
    margin-top: calc(var(--vh, 1vh) * 6);
  }
  .tip {
    display: none;
    opacity: 0;
  }
  .tip-m {
    display: block;
    position: absolute;
    width: 33rem;
    animation: blink 1s ease infinite;
  }
  .tip-m.tip1-m {
    top: calc(var(--vh, 1vh) * 45);
    left: calc(50% - 16.5rem);
  }
  .tip-m.tip2 {
    top: auto;
    bottom: calc(var(--vh, 1vh) * 6);
    left: calc(50% - 16.5rem);
  }
  .tip-m.tip3 {
    display: none;
    top: calc(var(--vh, 1vh) * 16);
    left: calc(50% - 16.5rem);
  }
  .tip-m.tip4 {
    bottom: calc(var(--vh, 1vh) * 12);
    left: calc(50% - 16.5rem);
  }
  .tip-m.tip5 {
    display: none;
    bottom: calc(var(--vh, 1vh) * 12);
    width: 30rem;
    left: calc(50% - 15rem);
  }
  .fives-slide .content__wrapper {
    background: url("../img/bgm.png") center center no-repeat;
    background-size: cover;
  }
}

/*# sourceMappingURL=style.css.map */