* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}



.mainZog {
  position: relative;
  z-index: 1;
}

.mainZog img {
  max-width: initial;
}

.main-image-wrapper img,
.goal-img-above img {
  object-fit: contain;
}


.gridZog {
  max-width: 1520px;
  margin: 0 auto;
}

.main-screen-wrapper {
  background: -o-linear-gradient(343.12deg, #ff9d2b 45.84%, #ff6a2b 114.47%);
  background: linear-gradient(106.88deg, #ff9d2b 45.84%, #ff6a2b 114.47%);
  border-radius: 0 0 60px 60px;
  position: relative;
  z-index: 7;
}

.main-header {
  color: #ffffff;
  font-size: 104.301px;
  line-height: 110%;
  font-weight: 700;
  max-width: 954px;
}

.under-main-header {
  font-size: 36px;
  line-height: 130%;
  color: #ffffff;
  margin-top: 32px;
}

.btns-wrapper.main {
  margin-top: 95px;
}
.btns-wrapper.two {
  /* display: -webkit-box; */
  display: -ms-flexbox;
  /* display: flex; */
  /* -webkit-box-align: center; */
  -ms-flex-align: center;
  /* align-items: center; */
  /* -webkit-box-pack: justify; */
  -ms-flex-pack: justify;
  /* justify-content: space-between; */
  /* width: 100%; */
  /* max-width: 490px; */
}

.scroll-down {
  margin-top: 182px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  opacity: 0.6;
  text-decoration: none;
}

.scroll-down:hover {
  opacity: 1;
}

.main-screen-container {
  padding: 157px 0 54px 0;
  position: relative;
}

.mouse-img {
  width: 10px;
  height: 15px;
  -webkit-animation: 2s mouseJump ease-out infinite;
  animation: 2s mouseJump ease-out infinite;
}

.mouse-text {
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #ffffff;
  margin-left: 10px;
}

@-webkit-keyframes mouseJump {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }

  25% {
    -webkit-transform: translateY(-20%);
    transform: translateY(-20%);
  }

  50% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }

  75% {
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
  }

  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}

@keyframes mouseJump {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }

  25% {
    -webkit-transform: translateY(-20%);
    transform: translateY(-20%);
  }

  50% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }

  75% {
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
  }

  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}

.main-image-wrapper {
  position: absolute;
  top: 0px;
  right: 0;
  /* width: 650px; */
  height: 100%;
}

.main-image-wrapper img {
  -o-object-fit: contain;
  object-fit: contain;
}

.main-girl {
  width: 642px;
  height: 807px;
  position: absolute;
  top: 53px;
  right: 0;
}

.yog {
  -webkit-animation: flying-items 6s infinite linear;
  animation: flying-items 6s infinite linear;
  position: absolute;
  top: 569px;
  right: 621px;
  width: 180px;
  height: auto;
}
.straw {
  -webkit-animation: flying-items 8s infinite linear;
  animation: flying-items 8s infinite linear;
  width: 62px;
  height: 70px;
  position: absolute;
  top: 326px;
  right: 573px;
}
.avo {
  -webkit-animation: flying-items 6s infinite linear;
  animation: flying-items 6s infinite linear;
  width: 61px;
  height: 60px;
  position: absolute;
  top: 109px;
  right: 142px;
}
.milk {
  -webkit-animation: flying-items 8s infinite linear;
  animation: flying-items 8s infinite linear;
  width: 156px;
  height: 173px;
  position: absolute;
  top: 103px;
  right: -72px;
  width: 108px;
  height: auto;
}
.melon {
  -webkit-animation: flying-items 6s infinite linear;
  animation: flying-items 6s infinite linear;
  width: 80px;
  height: 63px;
  position: absolute;
  top: 420px;
  right: -10px;
}
.apple {
  -webkit-animation: flying-items 8s infinite linear;
  animation: flying-items 8s infinite linear;
  width: 124px;
  height: 130px;
  position: absolute;
  top: 648px;
  right: -21px;
}
.avo-back-main {
  width: 216px;
  height: 230px;
  position: absolute;
  top: 213px;
  right: -95px;
}
.carrot-back-main {
  width: 131px;
  height: 128px;
  position: absolute;
  top: 38px;
  right: 458px;
}
.apple-back-main {
  width: 171px;
  height: 174px;
  position: absolute;
  top: 338px;
  right: 535px;
}
.flower-back-main {
  width: 148px;
  height: 150px;
  position: absolute;
  top: 672px;
  right: 815px;
}

@-webkit-keyframes flying-items {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    opacity: 1;
    -webkit-transform: translateX(30px) translateY(-8px) rotate(0deg)
      scale(1, 1);
    transform: translateX(30px) translateY(-8px) rotate(0deg) scale(1, 1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    opacity: 1;
    -webkit-transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    opacity: 1;
    -webkit-transform: translateX(-30px) translateY(-8px) rotate(0deg)
      scale(1, 1);
    transform: translateX(-30px) translateY(-8px) rotate(0deg) scale(1, 1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
  }
}

@keyframes flying-items {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    opacity: 1;
    -webkit-transform: translateX(40px) translateY(-10px) rotate(0deg)
      scale(1, 1);
    transform: translateX(40px) translateY(-10px) rotate(0deg) scale(1, 1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    opacity: 1;
    -webkit-transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    opacity: 1;
    -webkit-transform: translateX(-40px) translateY(-10px) rotate(0deg)
      scale(1, 1);
    transform: translateX(-40px) translateY(-10px) rotate(0deg) scale(1, 1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
  }
}

.test-wrapper {
  background: -o-linear-gradient(355.14deg, #59c1ac 9.39%, #1164d8 98.64%),
    -o-linear-gradient(343.12deg, #ff9d2b 45.84%, #ff6a2b 114.47%),
    -o-linear-gradient(263.62deg, #59c1ac -204.22%, #1164d8 91.99%), #c4c4c4;
  background: linear-gradient(94.86deg, #59c1ac 9.39%, #1164d8 98.64%),
    linear-gradient(106.88deg, #ff9d2b 45.84%, #ff6a2b 114.47%),
    linear-gradient(186.38deg, #59c1ac -204.22%, #1164d8 91.99%), #c4c4c4;
  border-radius: 0 0 60px 60px;
  padding-top: 100px;
  padding-bottom: 113px;
  margin-top: -100px;
  position: relative;
  z-index: 6;
}
.test-wrapper::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 163px;
  background: url(../img/zog/test-shadow.png);
  top: 40px;
}

.test-title {
  margin-top: 140px;
  position: relative;
}

.second-header {
  font-weight: 600;
  font-size: 48px;
  line-height: 58px;
  color: #fff;
  margin-bottom: 0;
}

.test-text {
  font-weight: 300;
  font-size: 26px;
  line-height: 150%;
  color: #ffffff;
  max-width: 523px;
  margin-top: 24px;
}

.btns-wrapper.test {
  margin-top: 69px;
}
.test-image-wrapper {
  position: absolute;
  bottom: 0;
  height: 542px;
  right: 200px;
  pointer-events: none;
}
.test-girls {
  position: absolute;
  top: 58px;
  right: 84px;
  width: 788px;
  height: 484px;
}
.test-back-shadow {
  width: 1623px;
  height: 542px;
  position: absolute;
  right: -166px;
}
.kiwi-test {
  -webkit-animation: flying-items 6s infinite linear;
  animation: flying-items 6s infinite linear;
  width: 94.4px;
  height: 91.81px;
  position: absolute;
  top: 418px;
  right: 854px;
}
.yog-test {
  -webkit-animation: flying-items 8s infinite linear;
  animation: flying-items 8s infinite linear;
  position: absolute;
  width: 81.71px;
  height: 85.69px;
  top: 161px;
  right: 812px;
}
.chese-test {
  -webkit-animation: flying-items 6s infinite linear;
  animation: flying-items 6s infinite linear;
  position: absolute;
  width: 106.88px;
  height: 93.63px;
  top: 153px;
  right: 75px;
}
.milk-test {
  -webkit-animation: flying-items 8s infinite linear;
  animation: flying-items 8s infinite linear;
  position: absolute;
  width: 120.77px;
  height: 142.94px;
  top: 355px;
  right: 15px;
}

.healthy-text {
  font-weight: 300;
  font-size: 20px;
  line-height: 140%;
  color: #ffffff;
  margin-top: 32px;
}

section {
  overflow: hidden;
}

.healthy-food-wrapper {
  background: #1062d8;
  border-radius: 0 0 60px 60px;
  padding: 143px 0 0 0;
  margin: -143px 0 0 0;
  position: relative;
  z-index: 5;
}

/* .healthy-food-wrapper::before {
    content: "";
    position: absolute;
    width: 100vw;
    left: 0;
    background-position: center;
    height: 233px;
    background: url(../img/zog/healthy-shadow.png);
    top: auto;
    bottom: 0;
    pointer-events: none;
  } */

.healthy-top-text {
  max-width: 845px;
  margin: 125px auto 0 auto;
  text-align: center;
}

.food-adv-wrapper {
  margin-top: 135px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-bottom: 102px;
  border-bottom: 3px dashed #ffffff40;
}

.food-adv-item {
  max-width: 485px;
  width: 100%;
  min-height: 280px;
  background: #fff;
  border-radius: 25px;
  padding: 90px 21px 40px 21px;
  position: relative;
  text-align: center;
}

.food-adv-text {
  font-weight: 300;
  font-size: 20px;
  line-height: 150%;
  color: #272727;
}

.food-adv-title {
  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;
  color: #ffffff;
  font-weight: 600;
  font-size: 28px;
  line-height: 34px;
  position: relative;
}

.food-title-figure > span {
  font-size: 48px;
  line-height: 58px;
}

.food-adv-title.first {
  position: absolute;
  width: 130px;
  height: 128px;
  top: -57px;
  left: 177px;
  background: url(../img/zog/food-adv-1.svg);
  background-size: contain;
}
.food-adv-title.second {
  position: absolute;
  width: 206px;
  height: 108px;
  top: -46px;
  left: 140px;
  background: url(../img/zog/food-adv-2.svg);
  background-size: contain;
}
.food-adv-title.third {
  position: absolute;
  width: 121px;
  height: 120px;
  top: -57px;
  left: 182px;
  background: url(../img/zog/food-adv-3.svg);
  background-size: contain;
}

.goal-text {
  font-weight: 300;
  font-size: 24px;
  line-height: 140%;
}

.goal-container {
  width: 502px;
  height: 538px;
  background: url(../img/zog/goal-back.png);
  padding: 175px 82px 106px 82px;
  text-align: center;
  margin: 0 0 0 484px;
  position: relative;
  z-index: 2;
}

.second-header.goal {
  color: #272727;
  margin-bottom: 27px;
}

.goal-text > strong {
  color: #fe9023;
}

.goal-food-wrapper {
  padding: 106px 0 185px 0;
  position: relative;
}

.healthy-food-wrapper::before {
  content: "";
  position: absolute;
  width: 100vw;
  height: 1104px;
  background: url(../img/zog/goal-shadow.png);
  background-position: center;
  z-index: 1;
  pointer-events: none;
  bottom: 0;
  background-size: contain;
}

.healthy-food-wrapper::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 398px;
  background: url(../img/zog/goal-line.svg);
  bottom: 242px;
  left: 0;
  z-index: 1;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
}

.goal-img-under,
.goal-img-above {
  position: absolute;
  top: 0;
  left: 0;
}

.goal-img-under {
  z-index: 1;
}
.goal-img-above {
  z-index: 3;
}

.avo-food {
  -webkit-animation: flying-items 8s infinite linear;
  animation: flying-items 8s infinite linear;
  position: absolute;
  width: 144px;
  height: 140px;
  top: 331px;
  left: 387px;
}
.carrot-food {
  -webkit-animation: flying-items 6s infinite linear;
  animation: flying-items 6s infinite linear;
  position: absolute;
  width: 165.42px;
  height: 167.08px;
  top: 451px;
  left: 924px;
}
.apple-food {
  -webkit-animation: flying-items 8s infinite linear;
  animation: flying-items 8s infinite linear;
  position: absolute;
  width: 71.47px;
  height: 76.64px;
  top: 284px;
  left: 271px;
}
.cherry-food {
  -webkit-animation: flying-items 6s infinite linear;
  animation: flying-items 6s infinite linear;
  position: absolute;
  width: 180px;
  height: auto;
  top: 467px;
  left: 243px;
}
.straw-food {
  -webkit-animation: flying-items 8s infinite linear;
  animation: flying-items 8s infinite linear;
  position: absolute;
  width: 138.99px;
  height: 134.48px;
  top: 168px;
  left: 377px;
}
.melon-food {
  -webkit-animation: flying-items 6s infinite linear;
  animation: flying-items 6s infinite linear;
  position: absolute;
  width: 159.06px;
  height: 167.52px;
  top: 493px;
  left: 416px;
}
.red-food {
  -webkit-animation: flying-items 8s infinite linear;
  animation: flying-items 8s infinite linear;
  position: absolute;
  width: 132.22px;
  height: 146.76px;
  top: 220px;
  left: 910px;
}
.broc-food {
  -webkit-animation: flying-items 6s infinite linear;
  animation: flying-items 6s infinite linear;
  position: absolute;
  width: 84.98px;
  height: 84.38px;
  top: 396px;
  left: 1062px;
}
.grape-food {
  -webkit-animation: flying-items 8s infinite linear;
  animation: flying-items 8s infinite linear;
  position: absolute;
  width: 118px;
  height: auto;
  top: 240px;
  left: 1131px;
}

.food-back-img {
  position: absolute;
  width: 100%;
}

.cookie-food {
  position: absolute;
  width: 198.54px;
  height: 198.54px;
  top: 55px;
  right: 33px;
}
.cake-food {
  position: absolute;
  width: 179px;
  height: 211px;
  top: 118px;
  left: 199px;
}
.cake-shadow {
  position: absolute;
  width: 822.21px;
  height: 670.69px;
  right: -352px;
  top: 109px;
}

.adv-back-img {
  position: absolute;
  z-index: 2;
  width: 100%;
}

.adv1 {
  -webkit-animation: flying-items 6s infinite linear;
  animation: flying-items 6s infinite linear;
  position: absolute;
  width: 72px;
  height: 72px;
  top: 314px;
  left: 109px;
}
.adv2 {
  -webkit-animation: flying-items 8s infinite linear;
  animation: flying-items 8s infinite linear;
  position: absolute;
  width: 142.59px;
  height: 136.14px;
  top: 572px;
  left: 100px;
}
.adv3 {
  -webkit-animation: flying-items 6s infinite linear;
  animation: flying-items 6s infinite linear;
  position: absolute;
  width: 125.61px;
  height: 150.15px;
  top: 293px;
  right: 125px;
}
.adv4 {
  -webkit-animation: flying-items 8s infinite linear;
  animation: flying-items 8s infinite linear;
  position: absolute;
  width: 86.15px;
  height: 86.15px;
  top: 623px;
  right: 50px;
}

.materials-wrapper {
  background: -o-linear-gradient(333.64deg, #eb636d 5.55%, #f93644 95.23%),
    -o-linear-gradient(132.8deg, #7add95 -21.85%, #65ca15 98.5%);
  background: linear-gradient(116.36deg, #eb636d 5.55%, #f93644 95.23%),
    linear-gradient(317.2deg, #7add95 -21.85%, #65ca15 98.5%);
  border-radius: 0 0 60px 60px;
  padding: 145px 0 100px 0;
  margin: -145px 0 0 0;
  z-index: 4;
  position: relative;
}
.materials-wrapper::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 173px;
  background: url(../img/zog/materials-shadow.png);
  top: 81px;
}
.material-title {
  text-align: center;
  margin-top: 110px;
  position: relative;
}
.materials-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 92px;
}
.material-item {
  background: -webkit-gradient(
      linear,
      left bottom,
      left top,
      from(#f1f6fb),
      to(#f1f6fb)
    ),
    radial-gradient(
      58.13% 63.66% at 50% 50%,
      rgba(211, 222, 253, 0.3) 0%,
      rgba(133, 162, 237, 0.3) 100%
    );
  background: -o-linear-gradient(bottom, #f1f6fb, #f1f6fb),
    -o-radial-gradient(50% 50%, 58.13% 63.66%, rgba(211, 222, 253, 0.3) 0%, rgba(
            133,
            162,
            237,
            0.3
          )
          100%);
  background: linear-gradient(0deg, #f1f6fb, #f1f6fb),
    radial-gradient(
      58.13% 63.66% at 50% 50%,
      rgba(211, 222, 253, 0.3) 0%,
      rgba(133, 162, 237, 0.3) 100%
    );
  border-radius: 25px;
  width: 362px;
  min-height: 323px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  margin-bottom: 0;
  align-items: stretch;
}
.material-header {
  position: absolute;
  width: 204.86px;
  left: 78px;
  top: -28px;
}
.material-header > img {
  width: 100%;
}
.material-text {
  margin-top: 132px;
  background: -webkit-gradient(
      linear,
      left bottom,
      left top,
      from(#ffffff),
      to(#ffffff)
    ),
    radial-gradient(
      58.13% 63.66% at 50% 50%,
      rgba(211, 222, 253, 0.3) 0%,
      rgba(133, 162, 237, 0.3) 100%
    );
  background: -o-linear-gradient(bottom, #ffffff, #ffffff),
    -o-radial-gradient(50% 50%, 58.13% 63.66%, rgba(211, 222, 253, 0.3) 0%, rgba(
            133,
            162,
            237,
            0.3
          )
          100%);
  background: linear-gradient(0deg, #ffffff, #ffffff),
    radial-gradient(
      58.13% 63.66% at 50% 50%,
      rgba(211, 222, 253, 0.3) 0%,
      rgba(133, 162, 237, 0.3) 100%
    );
  border-radius: 25px;
  padding: 28px 30px 43px 30px;
  position: relative;
  z-index: 2;
  font-size: 20px;
  line-height: 150%;
  color: #272727;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.basic-wrapper {
  background: -o-linear-gradient(273.52deg, #59c1ac 2.09%, #1164d8 93.98%);
  background: linear-gradient(176.48deg, #59c1ac 2.09%, #1164d8 93.98%);
  border-radius: 0 0 60px 60px;
  padding: 140px 0 111px 0;
  margin: -140px 0 0 0;
  z-index: 3;
  position: relative;
}

.basic-wrapper:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 234px;
  background: url(../img/zog/basic-shadow.png);
  top: 81px;
}
.basic-title {
  margin-top: 111px;
  text-align: center;
  position: relative;
}

.lesson-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-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.lesson-item {
  padding: 26px 99px;
  background: #fff;
  -webkit-box-shadow: 0px 1px 2px rgb(0 0 0 / 14%);
  box-shadow: 0px 1px 2px rgb(0 0 0 / 14%);
  border-radius: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 32px;
}
.lesson-item:last-child {
  margin-bottom: 0;
}
.lesson-item.empty {
  padding-top: 46px;
  padding-bottom: 47px;
}
.lessons-column {
  margin-top: 65px;
}
.lesson-img {
  margin-right: 114px;
  width: 300px;
  height: 300px;
}
.lesson-img > img {
  width: 100%;
}
.lesson-title {
  font-size: 24px;
  line-height: 29px;
  color: #272727;
  margin-bottom: 20px;
  position: relative;
}
.lesson-labels {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 75px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.label-item {
  background: rgba(16, 97, 216, 0.08);
  border-radius: 40px;
  padding: 12px 24px;
  font-size: 18px;
  line-height: 22px;
  color: #1061d8;
  font-weight: 700;
  margin-right: 16px;
  margin-top: 12px;
}
.label-item:last-child {
  margin-right: 0;
}
.btn.orange {
  background: #fe9023;
}

.lesson-item.empty .lesson-img {
  margin: 0 auto;
  width: auto;
  height: auto;
}
.empty-text {
  font-weight: 600;
  font-size: 24px;
  line-height: 29px;
  color: #272727;
  text-align: center;
}

.creators-wrapper {
  background: -o-linear-gradient(125.97deg, #59c1ac 25.16%, #1164d8 117.39%),
    #c4c4c4;
  background: linear-gradient(324.03deg, #59c1ac 25.16%, #1164d8 117.39%),
    #c4c4c4;
  border-radius: 0 0 60px 60px;
  padding: 112px 0 147px 0;
  margin: -112px 0 0 0;
  z-index: 2;
  position: relative;
}
.creators-wrapper:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 265px;
  background: url(../img/zog/creators-title.png);
  top: 45px;
}
.creators-title {
  margin-top: 112px;
  text-align: center;
  position: relative;
}
.creators-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 68px auto 0 auto;
}
.creator-item {
  width: 365px;
  height: 178px;
  border-radius: 32px;
  background: -webkit-gradient(
      linear,
      left bottom,
      left top,
      from(#ffffff),
      to(#ffffff)
    ),
    radial-gradient(
      58.13% 63.66% at 50% 50%,
      rgba(211, 222, 253, 0.3) 0%,
      rgba(133, 162, 237, 0.3) 100%
    );
  background: -o-linear-gradient(bottom, #ffffff, #ffffff),
    -o-radial-gradient(50% 50%, 58.13% 63.66%, rgba(211, 222, 253, 0.3) 0%, rgba(
            133,
            162,
            237,
            0.3
          )
          100%);
  background: linear-gradient(0deg, #ffffff, #ffffff),
    radial-gradient(
      58.13% 63.66% at 50% 50%,
      rgba(211, 222, 253, 0.3) 0%,
      rgba(133, 162, 237, 0.3) 100%
    );
  margin-right: 20px;
  padding: 17px 0 23px 0;
  transition: 0.5s;
}
.creator-item:hover .creator-img {
  transform: scale(1.05);
}
.creator-item:last-child {
  margin-right: 0;
}
.creator-img {
  margin: 0 auto;
  width: 290px;
  height: 110px;
  display: block;
  transition: 0.5s;
}
.creator-text {
  font-size: 18px;
  line-height: 150%;
  color: #272727;
  text-align: center;
  font-weight: 500;
}

.inst-wrapper {
  background: -o-linear-gradient(343.12deg, #ff9d2b 45.84%, #ff6a2b 114.47%);
  background: linear-gradient(106.88deg, #ff9d2b 45.84%, #ff6a2b 114.47%);
  padding: 122px 0 120px 0;
  margin: -122px 0 0 0;
  position: relative;
  z-index: 1;
}
.inst-wrapper:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 173px;
  background: url(../img/zog/inst-shadow.png);
  top: 51px;
}
.inst-container {
  margin-top: 110px;
}
.inst-title {
  text-align: center;
  margin-bottom: 34px;
  position: relative;
}
.btns-wrapper.inst {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.btns-wrapper.inst .btn {
  font-size: 26px;
  line-height: 30px;
}
.inst-img-wrapper {
  position: relative;
  width: 100%;
}
.cherry-gram {
  -webkit-animation: flying-items 6s infinite linear;
  animation: flying-items 6s infinite linear;
  position: absolute;
  width: 49px;
  height: 56.9px;
  top: 144px;
  left: 108px;
}
.left-gram {
  -webkit-animation: flying-items 8s infinite linear;
  animation: flying-items 8s infinite linear;
  position: absolute;
  width: 95.12px;
  height: 95.13px;
  top: 193px;
  left: 235px;
}
.like-gram {
  -webkit-animation: flying-items 6s infinite linear;
  animation: flying-items 6s infinite linear;
  position: absolute;
  width: 88.22px;
  height: 73px;
  top: 78px;
  left: 330px;
}
.apple-gram {
  -webkit-animation: flying-items 8s infinite linear;
  animation: flying-items 8s infinite linear;
  position: absolute;
  width: 124.82px;
  height: 130.2px;
  top: 184px;
  left: 415px;
}
.broc-gram {
  -webkit-animation: flying-items 6s infinite linear;
  animation: flying-items 6s infinite linear;
  position: absolute;
  width: 84.98px;
  height: 84.38px;
  top: 191px;
  right: 447px;
}
.right-gram {
  -webkit-animation: flying-items 8s infinite linear;
  animation: flying-items 8s infinite linear;
  position: absolute;
  width: 81.55px;
  height: 81.56px;
  top: 90px;
  right: 349px;
}
.like2-gram {
  -webkit-animation: flying-items 6s infinite linear;
  animation: flying-items 6s infinite linear;
  position: absolute;
  width: 73.38px;
  height: 58.29px;
  top: 210px;
  right: 222px;
}
.grape-gram {
  -webkit-animation: flying-items 8s infinite linear;
  animation: flying-items 8s infinite linear;
  position: absolute;
  width: 81.65px;
  height: 81.49px;
  top: 47px;
  right: 190px;
}

.lesson-btn {
    display: flex;
}
span.zog-lang-sep {
    margin: 0 5px;
}

.main-screen-container .header-box {
    width: 60%;
}

.btns-wrapper.two .btn {
    margin-right: 30px;
}

@media screen and (max-width: 1799px) {
  .gridZog {
    max-width: 1280px;
  }
  .main-header {
    font-size: 80px;
  }
  .main-header {
    font-size: 80px;
    max-width: 745px;
  }
  .under-main-header {
    font-size: 28px;
  }
  .btns-wrapper.main {
    margin-top: 68px;
  }
  .main-girl {
    width: 466px;
    height: 586px;
    top: 44px;
    right: 149px;
  }
  .main-screen-container {
    padding: 101px 0 58px 0;
  }
  .scroll-down {
    margin-top: 157px;
  }
  .yog {
    top: 406px;
    right: 594px;
    width: 105.79px;
    height: 110.94px;
  }
  .straw {
    width: 48.34px;
    height: 54.08px;
    top: 213px;
    right: 565px;
  }
  .avo {
    width: 47.33px;
    height: 46.18px;
    top: 48px;
    right: 289px;
  }
  .milk {
    width: 120.03px;
    height: 133.47px;
    top: 80px;
    right: 107px;
  }
  .melon {
    width: 58.44px;
    height: 46.41px;
    top: 310px;
    right: 135px;
  }
  .apple {
    width: 95.81px;
    height: 99.94px;
    top: 444px;
    right: 103px;
  }
  .avo-back-main {
    width: 158px;
    height: 168px;
    top: 160px;
    right: 74px;
  }
  .carrot-back-main {
    width: 121.8px;
    height: 122.94px;
    top: 33px;
    right: 475px;
  }
  .apple-back-main {
    width: 124.48px;
    height: 126.65px;
    top: 227px;
    right: 545px;
  }
  .flower-back-main {
    width: 108px;
    height: 109.05px;
    top: 531px;
    right: 692px;
  }
  .test-wrapper::before {
    width: 100%;
    height: 113px;
    top: 38px;
    background-size: cover;
  }
  .test-wrapper {
    padding-bottom: 82px;
  }
  .test-title {
    margin-top: 84px;
  }
  .test-text {
    margin-top: 18px;
  }
  .btns-wrapper.test {
    margin-top: 48px;
  }
  .test-back-shadow {
    width: 1183px;
    height: 466px;
    right: 0;
    top: -39px;
  }
  .test-image-wrapper {
    right: 0;
    height: 383px;
  }
  .test-girls {
    width: 624px;
    height: 383px;
    top: 45px;
    right: 94px;
  }
  .kiwi-test {
    width: 74.73px;
    height: 72.69px;
    top: 330px;
    right: 705px;
  }
  .yog-test {
    width: 64.69px;
    height: 67.83px;
    top: 125px;
    right: 670px;
  }
  .chese-test {
    width: 84.61px;
    height: 74.13px;
    top: 120px;
    right: 88px;
  }
  .milk-test {
    width: 95.61px;
    height: 113.16px;
    top: 280px;
    right: 40px;
  }
  .healthy-top-text {
    margin: 95px auto 0 auto;
  }
  .cookie-food {
    width: 198.54px;
    height: 198.54px;
    top: 75px;
    right: 30px;
  }
  .cake-shadow {
    width: 822.21px;
    height: 670.69px;
    top: 21px;
    right: -480px;
  }
  .cake-food {
    width: 179px;
    height: 211px;
    top: 102px;
    left: 36px;
  }
  .food-adv-wrapper {
    margin-top: 148px;
    padding-bottom: 128px;
  }
  .food-adv-item {
    max-width: 405px;
    min-height: 357px;
    padding: 94px 27px 52px 27px;
  }
  .food-adv-title.first {
    left: 138px;
  }
  .food-adv-title.second {
    left: 99px;
  }
  .food-adv-title.third {
    left: 142px;
  }
  .adv1 {
    top: 356px;
    left: 37px;
  }
  .adv2 {
    width: 179.67px;
    height: 175.72px;
    top: 635px;
    left: 37px;
  }
  .adv3 {
    width: 169.8px;
    height: 184.33px;
    top: 283px;
    right: 20px;
  }
  .adv4 {
    width: 89.96px;
    height: 89.96px;
    top: 701px;
    right: 51px;
  }
  .goal-food-wrapper {
    padding: 83px 0 192px 0;
    position: relative;
  }
  .healthy-food-wrapper::before {
    height: 950px;
    left: 0;
    background-size: cover;
  }
  .healthy-food-wrapper::after {
    width: 2057px;
    height: 362px;
    left: -264px;
  }
  .goal-container {
    margin: 0 0 0 389px;
  }
  .avo-food {
    left: 292px;
  }
  .carrot-food {
    left: 829px;
  }
  .apple-food {
    left: 176px;
  }
  .cherry-food {
    left: 198px;
  }
  .straw-food {
    left: 282px;
  }
  .melon-food {
    left: 321px;
  }
  .red-food {
    left: 815px;
  }
  .broc-food {
    left: 967px;
  }
  .grape-food {
    left: 1036px;
  }

  .material-item {
    width: 304px;
    min-height: 345px;
  }
  .material-header {
    width: 172px;
    left: 65px;
    top: -24px;
  }
  .material-text {
    margin-top: 111px;
    padding: 26px 30px;
  }
  .material-title {
    margin-top: 80px;
  }
  .basic-title {
    margin-top: 92px;
  }
  .lesson-img {
    margin-right: 130px;
    width: 270px;
    height: 270px;
  }
  .lesson-item {
    padding: 40px 60px;
  }

  .creators-title {
    margin-top: 56px;
  }
  .creators-wrapper {
    padding: 112px 0 108px 0;
  }

  .inst-container {
    /* max-width: 400px; */
    margin: 0 auto;
    margin-top: 77px;
  }
  .second-header {
    font-weight: 500;
  }
  .cherry-gram {
    width: 38.68px;
    height: 44.92px;
    top: 171px;
    left: 80px;
  }
  .left-gram {
    width: 75.08px;
    height: 75.09px;
    top: 210px;
    left: 180px;
  }
  .like-gram {
    width: 69.64px;
    height: 57.62px;
    top: 120px;
    left: 255px;
  }
  .apple-gram {
    width: 98.52px;
    height: 102.77px;
    top: 203px;
    left: 322px;
  }
  .broc-gram {
    width: 67.08px;
    height: 66.61px;
    top: 208px;
    right: 282px;
  }
  .right-gram {
    width: 64.37px;
    height: 64.37px;
    top: 130px;
    right: 205px;
  }
  .like2-gram {
    width: 57.92px;
    height: 46.01px;
    top: 223px;
    right: 104px;
  }
  .grape-gram {
    width: 64.45px;
    height: 64.32px;
    top: 95px;
    right: 33px;
  }
}

@media screen and (max-width: 1439px) {
  .gridZog {
    max-width: 1200px;
  }
  .main-screen-container {
    padding: 95px 0 44px 0;
  }
  .main-header {
    font-size: 64px;
    max-width: 600px;
  }
  .under-main-header {
    font-size: 22px;
    margin-top: 24px;
  }
  .btn {
    padding: 20px 24px;
    font-size: 14px;
    line-height: 16px;
  }
  .btns-wrapper.two {
    max-width: 410px;
  }
  .scroll-down {
    margin-top: 120px;
  }
  .main-girl {
    top: 27px;
    right: 164px;
    width: 416px;
    height: 523px;
  }
  .yog {
    width: 96.21px;
    height: 100.89px;
    top: 383px;
    right: 546px;
  }
  .straw {
    width: 43.96px;
    height: 49.18px;
    top: 175px;
    right: 588px;
  }
  .avo {
    width: 43.05px;
    height: 41.99px;
    top: 33px;
    right: 237px;
  }
  .milk {
    top: 38px;
    right: 82px;
    width: 109.16px;
    height: 121.37px;
  }
  .melon {
    width: 53.14px;
    height: 42.21px;
    top: 263px;
    right: 116px;
  }
  .apple {
    width: 87.12px;
    height: 90.88px;
    top: 377px;
    right: 106px;
  }
  .avo-back-main {
    width: 143px;
    height: 154px;
    top: 125px;
    right: 60px;
  }
  .carrot-back-main {
    width: 110.76px;
    height: 111.8px;
    top: 15px;
    right: 475px;
  }
  .apple-back-main {
    width: 113.2px;
    height: 115.17px;
    top: 185px;
    right: 570px;
  }
  .flower-back-main {
    display: none;
  }
  @-webkit-keyframes flying-items {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0px) translateY(0px) rotate(0deg)
        scale(1, 1);
      transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    25% {
      opacity: 1;
      -webkit-transform: translateX(20px) translateY(-10px) rotate(0deg)
        scale(1, 1);
      transform: translateX(20px) translateY(-10px) rotate(0deg) scale(1, 1);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    50% {
      opacity: 1;
      -webkit-transform: translateX(0px) translateY(0px) rotate(0deg)
        scale(1, 1);
      transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    75% {
      opacity: 1;
      -webkit-transform: translateX(-20px) translateY(-10px) rotate(0deg)
        scale(1, 1);
      transform: translateX(-20px) translateY(-10px) rotate(0deg) scale(1, 1);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0px) translateY(0px) rotate(0deg)
        scale(1, 1);
      transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
    }
  }
  @keyframes flying-items {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0px) translateY(0px) rotate(0deg)
        scale(1, 1);
      transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    25% {
      opacity: 1;
      -webkit-transform: translateX(20px) translateY(-10px) rotate(0deg)
        scale(1, 1);
      transform: translateX(20px) translateY(-10px) rotate(0deg) scale(1, 1);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    50% {
      opacity: 1;
      -webkit-transform: translateX(0px) translateY(0px) rotate(0deg)
        scale(1, 1);
      transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    75% {
      opacity: 1;
      -webkit-transform: translateX(-20px) translateY(-10px) rotate(0deg)
        scale(1, 1);
      transform: translateX(-20px) translateY(-10px) rotate(0deg) scale(1, 1);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0px) translateY(0px) rotate(0deg)
        scale(1, 1);
      transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
    }
  }
  .test-wrapper {
    padding-bottom: 58px;
  }
  .test-title {
    margin-top: 48px;
  }
  .second-header {
    font-size: 42px;
    line-height: 50px;
  }
  .test-text {
    font-size: 22px;
  }
  .test-back-shadow {
    width: 1098px;
    height: 402px;
    top: -59px;
  }
  .test-image-wrapper {
    height: 330px;
  }
  .test-girls {
    width: 538px;
    height: 330px;
    top: 14px;
    right: 159px;
  }
  .kiwi-test {
    width: 64.41px;
    height: 62.65px;
    top: 259px;
    right: 686px;
  }
  .yog-test {
    width: 55.76px;
    height: 58.47px;
    top: 83px;
    right: 657px;
  }
  .chese-test {
    width: 72.93px;
    height: 63.89px;
    top: 78px;
    right: 154px;
  }
  .milk-test {
    width: 82.41px;
    height: 97.54px;
    top: 216px;
    right: 113px;
  }
  .healthy-top-text {
    margin: 82px auto 0 auto;
  }
  .food-adv-wrapper {
    margin-top: 131px;
    padding-bottom: 66px;
  }
  .healthy-text {
    font-size: 18px;
  }
  .cake-food {
    width: 150px;
    height: 177px;
    top: 44px;
    left: 34px;
  }
  .cake-shadow {
    width: 620px;
    height: 505.75px;
    top: 26px;
    right: -297px;
  }
  .cookie-food {
    width: 198.54px;
    height: 198.54px;
    top: 53px;
    right: -55px;
  }
  .food-adv-item {
    max-width: 380px;
    min-height: 335px;
    padding: 90px 24px 50px 24px;
  }
  .food-adv-title {
    left: 50% !important;
    -webkit-transform: translateX(-50%) !important;
    -ms-transform: translateX(-50%) !important;
    transform: translateX(-50%) !important;
  }
  .food-adv-text {
    font-size: 18px;
  }
  .food-title-figure > span {
    font-size: 45px;
    line-height: 50px;
  }
  .adv1 {
    width: 56.36px;
    height: 56.36px;
    top: 303px;
    left: 23px;
  }
  .adv2 {
    width: 140.64px;
    height: 137.56px;
    top: 620px;
    left: 23px;
  }
  .adv3 {
    width: 132.92px;
    height: 144.3px;
    top: 275px;
    right: 0;
  }
  .adv4 {
    width: 70.42px;
    height: 70.42px;
    top: 643px;
    right: 23px;
  }
  .goal-food-wrapper {
    padding: 112px 0 127px 0;
    position: relative;
  }
  .healthy-food-wrapper::before {
    height: 668px;
  }
  .healthy-food-wrapper::after {
    width: 100vw;
    height: 279.46px;
    left: 0;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .goal-container {
    width: 388px;
    height: 415px;
    background-size: contain;
    padding: 131px 63px 82px 63px;
    margin: 0 0 0 410px;
  }
  .second-header.goal {
    margin-bottom: 20px;
    font-size: 36px;
  }
  .goal-text {
    font-size: 18px;
  }
  .avo-food {
    width: 111.38px;
    height: 108.65px;
    top: 285px;
    left: 335px;
  }
  .carrot-food {
    width: 127.71px;
    height: 128.99px;
    top: 380px;
    left: 750px;
  }
  .apple-food {
    width: 55.17px;
    height: 59.17px;
    top: 250px;
    left: 245px;
  }
  .cherry-food {
    width: 137.83px;
    height: auto;
    top: 400px;
    left: 220px;
  }
  .straw-food {
    width: 107.3px;
    height: 103.82px;
    top: 160px;
    left: 330px;
  }
  .melon-food {
    width: 122.8px;
    height: 129.32px;
    top: 410px;
    left: 360px;
  }
  .red-food {
    width: 102.07px;
    height: 113.3px;
    top: 200px;
    left: 740px;
  }
  .broc-food {
    width: 65.6px;
    height: 65.14px;
    top: 335px;
    left: 857px;
  }
  .grape-food {
    width: 103px;
    height: auto;
    top: 185px;
    left: 870px;
  }
  .material-item {
    width: 285px;
    min-height: 275px;
  }
  .material-header {
    width: 160px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    top: -24px;
  }
  .material-text {
    margin-top: 100px;
    padding: 24px 28px;
    font-size: 18px;
  }
  .materials-wrapper {
    padding: 145px 0 80px 0;
  }
  .basic-title {
    margin-top: 78px;
  }
  .lessons-column {
    margin-top: 50px;
  }
  .lesson-img {
    margin-right: 100px;
    width: 250px;
    height: 250px;
  }
  .lesson-item {
    padding: 40px 55px;
  }
  .lesson-title {
    font-size: 22px;
    line-height: 26px;
    margin-bottom: 18px;
  }
  .empty-text {
    white-space: nowrap;
  }
  .creators-title {
    margin-top: 72px;
  }
  .creators-wrapper {
    padding: 112px 0 90px 0;
  }
  .btn.inst {
    font-size: 26px;
    line-height: 30px;
    padding: 22px 32px;
  }
  .cherry-gram {
    width: 38.68px;
    height: 44.92px;
    top: 160px;
    left: 37px;
  }
  .left-gram {
    width: 75.08px;
    height: 75.09px;
    top: 200px;
    left: 137px;
  }
  .like-gram {
    width: 69.64px;
    height: 57.62px;
    top: 108px;
    left: 212px;
  }
  .apple-gram {
    width: 98.52px;
    height: 102.77px;
    top: 192px;
    left: 280px;
  }
  .broc-gram {
    width: 67.08px;
    height: 66.61px;
    top: 197px;
    right: 242px;
  }
  .right-gram {
    width: 64.37px;
    height: 64.37px;
    top: 117px;
    right: 165px;
  }
  .like2-gram {
    width: 57.92px;
    height: 46.01px;
    top: 212px;
    right: 65px;
  }
  .grape-gram {
    width: 64.45px;
    height: 64.32px;
    top: 84px;
    right: 40px;
  }
  .btn > * {
    font-size: 14px;
    line-height: 17px;
  }
}

@media screen and (max-width: 1279px) {
  .gridZog {
    max-width: 960px;
  }
  .main-screen-container {
    padding: 75px 0 40px 0;
  }
  .btns-wrapper.main {
    margin-top: 32px;
  }
  .under-main-header {
    font-size: 18px;
    margin-top: 24px;
  }
  .main-header {
    font-size: 50px;
    max-width: 465px;
  }
  .main-girl {
    width: 332px;
    height: 417px;
    top: 22px;
    right: 98px;
  }
  .yog {
    width: 76.79px;
    height: 80.52px;
    top: 293px;
    right: 413px;
  }
  .straw {
    width: 35.08px;
    height: 39.25px;
    top: 145px;
    right: 432px;
  }
  .avo {
    width: 34.36px;
    height: 33.52px;
    top: 30px;
    right: 150px;
  }
  .milk {
    width: 87.12px;
    height: 96.87px;
    top: 54px;
    right: 35px;
  }
  .melon {
    width: 42.42px;
    height: 33.69px;
    top: 233px;
    right: 66px;
  }
  .apple {
    width: 69.54px;
    height: 72.53px;
    top: 309px;
    right: 68px;
  }
  .avo-back-main {
    width: 114.13px;
    height: 122.91px;
    top: 123px;
    right: 20px;
  }
  .carrot-back-main {
    width: 88.4px;
    height: 89.23px;
    top: 12px;
    right: 363px;
  }
  .apple-back-main {
    width: 90.35px;
    height: 91.92px;
    top: 155px;
    right: 420px;
  }
  .btn {
    padding: 16px 24px;
  }
  .test-wrapper {
    padding-bottom: 47px;
  }
  .second-header {
    font-size: 34px;
    line-height: 40px;
  }
  .test-text {
    margin-top: 13px;
  }
  .btns-wrapper.test {
    margin-top: 32px;
  }
  .test-back-shadow {
    width: 879.4px;
    height: 320.85px;
    top: -45px;
  }
  .test-text {
    font-size: 18px;
    line-height: 27px;
    max-width: 362px;
  }
  .test-title {
    margin-top: 40px;
  }
  .kiwi-test {
    width: 51.59px;
    height: 50.01px;
    right: 555px;
    top: 208px;
  }
  .yog-test {
    top: 67px;
    right: 527px;
    width: 44.66px;
    height: 46.67px;
  }
  .test-image-wrapper {
    height: 264px;
  }
  .test-girls {
    width: 430px;
    height: 264px;
    top: 11px;
    right: 127px;
  }
  .chese-test {
    width: 58.41px;
    height: 51px;
    top: 62px;
    right: 123px;
  }
  .milk-test {
    width: 66.01px;
    height: 77.85px;
    top: 173px;
    right: 90px;
  }
  .healthy-top-text {
    margin: 65px auto 0 auto;
  }
  .healthy-text {
    margin-top: 24px;
  }
  .food-adv-wrapper {
    margin-top: 100px;
    padding-bottom: 50px;
  }
  .food-adv-item {
    max-width: 300px;
    min-height: 267px;
    padding: 70px 20px 40px 20px;
  }
  .food-adv-text {
    font-size: 16px;
  }
  .food-title-figure > span {
    font-size: 35px;
    line-height: 43px;
  }
  .food-adv-title.first {
    width: 97px;
    height: 96px;
    top: -47px;
  }
  .food-adv-title.second {
    width: 155px;
    height: 82px;
    top: -41px;
  }
  .food-adv-title.third {
    width: 90px;
    height: 90px;
    top: -45px;
  }
  .adv1 {
    width: 44.98px;
    height: 44.98px;
    top: 241px;
    left: 20px;
  }
  .adv2 {
    width: 112.25px;
    height: 109.79px;
    top: 493px;
  }
  .adv3 {
    width: 106.09px;
    height: 115.17px;
    top: 220px;
  }
  .adv4 {
    width: 56.21px;
    height: 56.21px;
    top: 513px;
  }
  .goal-container {
    width: 309.82px;
    height: 331.49px;
    padding: 107px 50px 65px 50px;
    margin: 0 0 0 296px;
  }
  .second-header.goal {
    margin-bottom: 15px;
    font-size: 28px;
  }
  .goal-text {
    font-size: 14px;
  }
  .avo-food {
    top: 228px;
    left: 236px;
    width: 88.9px;
    height: 86.72px;
  }
  .carrot-food {
    width: 101.93px;
    height: 102.95px;
    top: 302px;
    left: 567px;
  }
  .apple-food {
    width: 44.04px;
    height: 47.22px;
    top: 199px;
    left: 165px;
  }
  .cherry-food {
    width: 80px;
    height: auto;
    top: 322px;
    left: 168px;
  }
  .straw-food {
    width: 85.64px;
    height: 82.86px;
    top: 127px;
    left: 230px;
  }
  .melon-food {
    width: 98.01px;
    height: 103.22px;
    top: 330px;
    left: 255px;
  }
  .red-food {
    width: 81.47px;
    height: 90.43px;
    top: 160px;
    left: 560px;
  }
  .broc-food {
    width: 52.36px;
    height: 51.99px;
    top: 270px;
    left: 650px;
  }
  .grape-food {
    width: 80px;
    height: auto;
    top: 130px;
    left: 675px;
  }
  .healthy-food-wrapper::before {
    height: 533.15px;
    left: 0;
  }
  .healthy-food-wrapper::after {
    bottom: 100px;
  }
  .goal-food-wrapper {
    padding: 89px 0 101px 0;
    position: relative;
  }
  .material-title {
    margin-top: 70px;
  }
  .materials-wrapper {
    padding: 145px 0 70px 0;
  }
  .materials-items {
    margin-top: 60px;
  }
  .material-header {
    width: 130px;
    top: -18px;
  }
  .material-text {
    margin-top: 85px;
    padding: 20px;
    font-size: 16px;
  }
  .material-item {
    width: 230px;
    min-height: 260px;
  }
  .basic-title {
    margin-top: 67px;
  }
  .lesson-img {
    width: 200px;
    height: 200px;
  }
  .lesson-item {
    padding: 35px 45px;
  }
  .label-item {
    padding: 9px 18px;
    font-size: 12px;
    line-height: 15px;
  }
  .lesson-labels {
    margin-bottom: 50px;
  }
  .lesson-item.empty {
    padding-top: 36px;
    padding-bottom: 37px;
  }

  .lesson-item.empty .lesson-img {
    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: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .basic-wrapper {
    padding: 124px 0 68px 0;
  }
  .creator-item {
    width: 291px;
    height: 142px;
  }
  .creator-img {
    width: 190px;
    height: auto;
  }
  .creators-wrapper {
    padding: 112px 0 70px 0;
  }
  .creators-items {
    margin: 50px auto 0 auto;
  }
  .cherry-gram {
    width: 36.91px;
    height: 42.87px;
    top: 107px;
    left: 30px;
  }
  .left-gram {
    width: 71.65px;
    height: 71.66px;
    top: 144px;
    left: 125px;
  }
  .like-gram {
    width: 66.46px;
    height: 54.99px;
    top: 57px;
    left: 197px;
  }
  .apple-gram {
    top: 137px;
    left: 260px;
    width: 94.03px;
    height: 98.08px;
  }
  .broc-gram {
    width: 64.02px;
    height: 63.57px;
    top: 182px;
    right: 222px;
  }
  .right-gram {
    width: 61.43px;
    height: 61.44px;
    top: 105px;
    right: 150px;
  }
  .like2-gram {
    width: 55.28px;
    height: 43.91px;
    top: 195px;
    right: 53px;
  }
  .grape-gram {
    width: 61.5px;
    height: 61.38px;
    top: 73px;
    right: 29px;
  }
  .btns-wrapper.inst .btn {
    font-size: 22px;
    line-height: 26px;
  }
  .btn > * {
    font-size: 14px;
    line-height: 17px;
  }
}

@media screen and (max-width: 1023px) {
  .gridZog {
    max-width: 710px;
  }
  .main-header {
    font-size: 44px;
    max-width: 405px;
  }
  .under-main-header {
    margin-top: 19px;
  }
  .btns-wrapper.main {
    margin-top: 38px;
    max-width: 366px;
  }
  .btn {
    padding: 14px 24px;
    font-size: 12px;
    line-height: 14px;
  }
  .scroll-down {
    margin-top: 110px;
  }
  .mainZog > section {
    border-radius: 0 0 45px 45px;
  }
  .mainZog > section.inst-wrapper {
    border-radius: 0;
  }
  .main-girl {
    width: 332px;
    height: 417px;
    top: 17px;
    right: -10px;
  }
  .yog {
    width: 76.79px;
    height: 80.52px;
    top: 319px;
    right: 303px;
  }
  .straw {
    width: 35.08px;
    height: 39.25px;
    top: 128px;
    right: 266px;
  }
  .avo {
    width: 34.36px;
    height: 33.52px;
    top: 21px;
    right: 30px;
  }
  .milk {
    width: 74.81px;
    height: 83.18px;
    top: 78px;
    right: -18px;
  }
  .melon {
    width: 42.42px;
    height: 33.69px;
    top: 226px;
    right: -4px;
  }
  .apple {
    width: 69.54px;
    height: 72.53px;
    top: 330px;
    right: -25px;
  }
  .test-wrapper {
    padding-bottom: 55px;
  }
  .test-text {
    max-width: 274px;
  }
  .test-back-shadow {
    width: 729px;
    height: 341px;
    top: -37px;
  }
  .test-image-wrapper {
    height: 278px;
  }
  .test-girls {
    width: 452px;
    height: 278px;
    right: 5px;
    top: 31px;
  }
  .kiwi-test {
    width: 54.65px;
    height: 52.98px;
    top: 231px;
    right: 453px;
  }
  .yog-test {
    width: 47.31px;
    height: 49.44px;
    top: 52px;
    right: 410px;
  }
  .chese-test {
    width: 61.88px;
    height: 54.03px;
    top: 49px;
    right: 11px;
  }
  .milk-test {
    display: none;
  }
  .healthy-top-text {
    margin: 92px auto 0 auto;
  }
  .cake-food {
    width: 104px;
    height: 123px;
    top: 35px;
    left: -30px;
  }
  .cake-shadow {
    width: 320.76px;
    height: 261.65px;
    top: 16px;
    right: -160px;
  }
  .cookie-food {
    width: 158.46px;
    height: 158.46px;
    top: 0;
    right: -43px;
  }
  .food-adv-wrapper {
    margin-top: 93px;
    padding-bottom: 64px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .food-adv-item {
    max-width: 100%;
    height: auto;
    min-height: auto;
    padding: 70px 44px 25px 44px;
    margin-bottom: 69px;
  }
  .food-adv-item:last-child {
    margin-bottom: 0;
  }
  .adv1 {
    width: 44.98px;
    height: 44.98px;
    top: 478px;
    left: 51px;
  }
  .adv2 {
    width: 92.82px;
    height: 90.78px;
    top: 871px;
    left: 5px;
  }
  .adv3 {
    width: 65px;
    height: 75px;
    top: 250px;
  }
  .adv4 {
    width: 56.21px;
    height: 56.21px;
    top: 730px;
    right: 17px;
  }
  .goal-container {
    width: 373.76px;
    height: 399.9px;
    padding: 130px 60px 80px 60px;
    margin: 0 0 0 188px;
  }
  .second-header.goal {
    font-size: 34px;
    line-height: 41px;
  }
  .goal-text {
    font-size: 17px;
  }
  .goal-food-wrapper {
    padding: 58px 0 134px 0;
  }
  .cherry-food {
    width: 96px;
    height: auto;
    top: 343px;
    left: 36px;
  }
  .straw-food {
    width: 103.32px;
    height: 99.96px;
    top: 104px;
    left: 109px;
  }
  .apple-food {
    width: 53.12px;
    height: 56.97px;
    top: 190px;
    left: 30px;
  }
  .melon-food {
    width: 118.23px;
    height: 124.52px;
    top: 345px;
    left: 138px;
  }
  .avo-food {
    width: 107.24px;
    height: 104.61px;
    top: 225px;
    left: 116px;
  }
  .carrot-food {
    width: 122.96px;
    height: 124.19px;
    top: 314px;
    left: 515px;
  }
  .red-food {
    width: 98.28px;
    height: 109.09px;
    top: 142px;
    left: 505px;
  }
  .broc-food {
    width: 63.17px;
    height: 62.72px;
    top: 273px;
    left: 618px;
  }
  .grape-food {
    width: 90px;
    height: auto;
    top: 117px;
    left: 629px;
  }
  .healthy-food-wrapper::after {
    width: 100vw;
    height: 269.08px;
    left: 0;
    bottom: 200px;
  }
  .healthy-food-wrapper::before {
    height: 643.18px;
    left: 0;
  }
  .materials-items {
    margin-top: 12px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .material-item {
    width: 346px;
    min-height: 192px;
    margin-top: 54px;
  }
  .basic-title {
    margin-top: 44px;
  }
  .lessons-column {
    margin-top: 39px;
  }
  .lesson-img {
    width: 155px;
    height: 155px;
    margin-right: 45px;
  }
  .lesson-item {
    padding: 25px 20px;
    margin-bottom: 24px;
  }
  .lesson-title {
    font-size: 17px;
    line-height: 21px;
    margin-bottom: 18px;
  }
  .label-item {
    margin-right: 6px;
  }
  .basic-wrapper {
    padding: 124px 0 52px 0;
  }
  .creator-item {
    width: 220px;
    height: 130px;
  }
  .creator-img {
    width: 165px;
    height: auto;
  }
  .creators-title {
    margin-top: 45px;
  }
  .creators-items {
    margin: 45px auto 0 auto;
  }
  .inst-container {
    margin-top: 67px;
  }
  .inst-wrapper {
    padding: 122px 0 83px 0;
  }
  .cherry-gram {
    display: none;
  }
  .left-gram {
    width: 71.65px;
    height: 71.66px;
    top: 143px;
    left: -10px;
  }
  .like-gram {
    width: 66.46px;
    height: 54.99px;
    top: 57px;
    left: 61px;
  }
  .apple-gram {
    width: 94.03px;
    height: 98.08px;
    top: 136px;
    left: 125px;
  }
  .broc-gram {
    width: 64.02px;
    height: 63.57px;
    top: 162px;
    right: 166px;
  }
  .right-gram {
    width: 61.43px;
    height: 61.44px;
    top: 86px;
    right: 93px;
  }
  .like2-gram {
    width: 55.28px;
    height: 43.91px;
    top: 176px;
    right: -3px;
  }
  .grape-gram {
    width: 61.5px;
    height: 61.38px;
    top: 54px;
    right: -26px;
  }
  @-webkit-keyframes flying-items {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0px) translateY(0px) rotate(0deg)
        scale(1, 1);
      transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    25% {
      opacity: 1;
      -webkit-transform: translateX(10px) translateY(-5px) rotate(0deg)
        scale(1, 1);
      transform: translateX(10px) translateY(-5px) rotate(0deg) scale(1, 1);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    50% {
      opacity: 1;
      -webkit-transform: translateX(0px) translateY(0px) rotate(0deg)
        scale(1, 1);
      transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    75% {
      opacity: 1;
      -webkit-transform: translateX(-10px) translateY(-5px) rotate(0deg)
        scale(1, 1);
      transform: translateX(-10px) translateY(-5px) rotate(0deg) scale(1, 1);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0px) translateY(0px) rotate(0deg)
        scale(1, 1);
      transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
    }
  }
  @keyframes flying-items {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0px) translateY(0px) rotate(0deg)
        scale(1, 1);
      transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    25% {
      opacity: 1;
      -webkit-transform: translateX(10px) translateY(-5px) rotate(0deg)
        scale(1, 1);
      transform: translateX(10px) translateY(-5px) rotate(0deg) scale(1, 1);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    50% {
      opacity: 1;
      -webkit-transform: translateX(0px) translateY(0px) rotate(0deg)
        scale(1, 1);
      transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    75% {
      opacity: 1;
      -webkit-transform: translateX(-10px) translateY(-5px) rotate(0deg)
        scale(1, 1);
      transform: translateX(-10px) translateY(-5px) rotate(0deg) scale(1, 1);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0px) translateY(0px) rotate(0deg)
        scale(1, 1);
      transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
    }
  }
  .btn > * {
    font-size: 12px;
    line-height: 14px;
  }
}

@media screen and (max-width: 767px) {
  .main-screen-container {
    padding: 20px 0 0 0;
  }
  .gridZog {
    width: 100%;
    padding: 0 20px;
  }
  .main-image-wrapper {
    width: 100%;
    position: relative;
    top: initial;
    left: initial;
    right: initial;
    margin-top: 24px;
    margin-bottom: 18px;
  }

  .scroll-down {
    display: none;
  }

  .main-girl {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 308px;
    height: 387px;
    top: initial;
    right: initial;
  }
  .main-header {
    max-width: 100%;
    text-align: center;
    font-size: 36px;
    margin-bottom: 0;
  }
  .under-main-header {
    font-size: 18px;
    line-height: 130%;
    text-align: center;
    margin-top: 14px;
  }
  .btns-wrapper.main {
    margin-top: 14px;
    max-width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .btns-wrapper.main > a {
    width: 100%;
    position: relative;
    z-index: 2;
  }
  .btns-wrapper.main > a:last-of-type {
    margin-top: 8px;
  }

  .yog {
    width: 72.04px;
    height: 78.78px;
    top: initial;
    right: initial;
    left: -20px;
    bottom: 30px;
  }

  .straw {
    width: 32.12px;
    height: 38.05px;
    top: 110px;
    right: initial;
    left: 30px;
  }

  .avo {
    width: 42.55px;
    height: 41.04px;
    top: 0;
    right: 40px;
  }

  .milk {
    width: 75px;
    height: 85px;
    top: 50px;
    right: -10px;
  }

  .melon {
    top: 210px;
    right: 20px;
    width: 35.04px;
    height: 24.55px;
  }

  .apple {
    width: 67.61px;
    height: 74.22px;
    right: -10px;
    top: initial;
    bottom: 40px;
  }

  .main-image-back {
    position: absolute;
    bottom: 0;
    top: 0;
    z-index: 0;
    overflow: hidden;
    left: 0;
    right: 0;
    margin: 0 -20px;
    pointer-events: none;
  }

  .avo-back-main {
    right: -30px;
    width: 105px;
    height: 114px;
    bottom: 190px;
    top: initial;
  }

  .carrot-back-main {
    top: initial;
    bottom: 325px;
    left: 50px;
    right: initial;
  }

  .apple-back-main {
    top: initial;
    bottom: 210px;
    left: -30px;
  }

  .test-wrapper {
    padding-bottom: 0;
    background: -o-linear-gradient(295.93deg, #59c1ac 14.83%, #1164d8 110.05%),
      -o-linear-gradient(343.12deg, #ff9d2b 45.84%, #ff6a2b 114.47%),
      -o-linear-gradient(263.62deg, #59c1ac -204.22%, #1164d8 91.99%), #c4c4c4;
    background: linear-gradient(154.07deg, #59c1ac 14.83%, #1164d8 110.05%),
      linear-gradient(106.88deg, #ff9d2b 45.84%, #ff6a2b 114.47%),
      linear-gradient(186.38deg, #59c1ac -204.22%, #1164d8 91.99%), #c4c4c4;
  }

  .test-container {
    text-align: center;
    margin-top: 20px;
  }

  .test-title {
    margin-top: 0;
  }

  .test-text {
    max-width: initial;
    font-size: 16px;
    line-height: 140%;
    margin-top: 16px;
  }

  .second-header {
    font-size: 30px;
    line-height: 36px;
  }

  .btns-wrapper.test {
    margin-top: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .test-image-wrapper {
    position: relative;
    right: initial;
    top: initial;
    left: 0;
    right: 0;
    margin: 0 -20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 40px;
    height: 247px;
  }

  .test-image-wrapper img {
    -o-object-fit: contain;
    object-fit: contain;
    margin: 0 auto;
  }

  .test-girls {
    position: relative;
    top: initial;
    right: initial;
    width: auto;
    height: 247px;
    max-width: 100%;
  }

  .test-back-shadow {
    display: none;
  }

  .kiwi-test {
    left: 10px;
    top: 30px;
    width: 35px;
    height: 35px;
  }

  .yog-test {
    width: 30px;
    height: 30px;
    left: 41%;
    top: 0;
  }

  .chese-test {
    width: 45px;
    height: auto;
    top: 20px;
    right: 20px;
  }

  .cookie-food {
    right: -55px;
    width: 112px;
    height: 112px;
  }

  .cake-food {
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1);
    left: -50px;
  }

  .adv3 {
    top: 220px;
  }

  .adv1 {
    left: 10px;
    top: 460px;
  }

  .adv2 {
    top: 900px;
    width: 70px;
    height: auto;
  }

  .adv4 {
    width: 54px;
    height: auto;
    right: 10px;
    top: 720px;
  }

  .healthy-food-container {
    margin-top: 30px;
  }

  .healthy-top-text {
    margin: 0;
  }

  .healthy-text {
    font-size: 14px;
    line-height: 140%;
    margin-top: 16px;
  }

  .food-adv-wrapper {
    margin-top: 70px;
    padding-bottom: 70px;
  }

  .food-adv-item {
    margin-bottom: 70px;
    padding: 64px 22px 30px;
  }

  .food-adv-text {
    font-size: 14px;
    line-height: 130%;
  }

  .goal-food-wrapper {
    padding: 30px 0 40px;
  }

  .goal-container {
    margin: 0 auto;
    width: 262.29px;
    height: 280.64px;
    padding: 90px 40px 45px;
  }

  .second-header.goal {
    font-size: 24px;
    line-height: 29px;
    margin-bottom: 14px;
  }

  .goal-text {
    font-size: 12px;
    line-height: 140%;
  }

  .avo-food {
    width: 70px;
    height: auto;
    left: 0;
    top: 160px;
  }

  .carrot-food{
    display: none;
  }

  /* .carrot-food { */
  .grape-food {
    width: 76.14px;
    height: 75.09px;
    left: 80%;
    top: 210px;
  }

  .goal-img-under,
  .goal-img-above {
    right: 0;
  }

  .apple-food {
    display: none;
  }

  /* .cherry-food { */
  .melon-food {
    display: none;
  }

  .straw-food {
    width: 30.39px;
    height: 36.01px;
    left: 20px;
    top: 70px;
  }

  .goal-img-under img,
  .goal-img-above img {
    -o-object-fit: contain;
    object-fit: contain;
  }

  /* .melon-food { */
  .cherry-food {
    width: 91.6px;
    height: 70.16px;
    top: 240px;
    left: 20px;
  }

  .broc-food {
    display: none;
  }

  /* .grape-food { */
  .carrot-food {
    display: none;
  }

  .red-food {
    width: 53.93px;
    height: 64.71px;
    left: 80%;
    top: 100px;
  }

  .healthy-food-wrapper::after {
    width: 532.59px;
    height: 269.68px;
    left: 0;
    top: 86%;
  }

  .materials-container {
    margin-top: 45px;
  }

  .material-title {
    margin-top: 0;
  }

  .materials-items {
    margin-top: 40px;
  }

  .material-item {
    margin-top: 0;
    width: 100%;
    height: auto;
    margin-bottom: 34px;
    position: relative;
    min-height: 200px;
  }

  .material-item:last-child {
    margin-bottom: 0;
  }

  .material-header {
    left: 50px;
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }

  .basic-container {
    margin-top: 40px;
  }

  .basic-title {
    margin-top: 0;
    text-align: center;
    padding: 0 18%;
  }

  .lessons-column {
    margin-top: 14px;
    margin-bottom: 40px;
  }

  .lesson-item {
    margin-bottom: 14px;
    padding: 17px 12px;
  }

  .lesson-img {
    display: none;
  }

  .lesson-content {
    text-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .lesson-title {
    margin-bottom: 19px;
  }

  .lesson-labels {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 28px;
  }

  .label-item {
    margin-top: 9px;
    margin-right: 0;
    padding: 8px 14px;
  }

  .lessons-column:last-child {
    margin-bottom: 0;
  }

  .lesson-item.empty {
    padding-top: 13px;
    padding-bottom: 26px;
  }

  .lesson-item.empty .lesson-img {
    width: auto;
    height: auto;
  }

  .lesson-item.empty .lesson-img > img {
    width: 181px;
    height: 155px;
  }

  .empty-text {
    font-size: 19px;
  }

  .lesson-title strong {
    display: block;
  }

  .mainZog > section.creators-wrapper {
    border-radius: 0 0 0 0;
    padding-bottom: 58px;
  }
  .creators-container {
    margin-top: 40px;
  }

  .creators-title {
    margin-top: 0;
  }

  .creators-items {
    margin-top: 27px;
    display: block;
    width: auto;
  }

  .creator-item {
    width: 100%;
    margin-right: 0;
    margin-bottom: 16px;
    height: auto;
    padding: 13px;
  }

  .creator-item:last-child {
    margin-bottom: 0;
  }

  .creator-img {
    max-width: 197px;
    -o-object-fit: contain;
    object-fit: contain;
    height: auto;
    width: auto;
  }

  .creator-text {
    font-size: 16px;
  }

  .mainZog > section.creators-wrapper {
    border-radius: 0 0 0 0;
    padding-bottom: 58px;
  }

  .creators-container {
    margin-top: 40px;
  }

  .creators-title {
    margin-top: 0;
  }

  .creators-items {
    margin-top: 27px;
    display: block;
    width: auto;
  }

  .creator-item {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-bottom: 16px;
    height: auto;
    padding: 13px;
  }

  .creator-item:last-child {
    margin-bottom: 0;
  }

  .creator-img {
    max-width: 197px;
    -o-object-fit: contain;
    object-fit: contain;
    height: auto;
    width: auto;
  }

  .creator-text {
    font-size: 16px;
  }

  .inst-container {
    margin-top: 78px;
    max-width: 100%;
  }

  .inst-title {
    margin-bottom: 27px;
    padding: 0 10%;
  }

  .btn.inst {
    height: 58px;
    padding: 0 32px;
    font-size: 18px;
    line-height: 1;
    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;
  }

  .inst-img-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 122px;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
  }

  .left-gram {
    width: 50px;
    height: 50px;
    top: 200px;
  }

  .inst-img-wrapper img {
    -o-object-fit: contain;
    object-fit: contain;
  }

  .like-gram {
    width: 44.96px;
    height: 37.2px;
    left: 0;
    top: 110px;
  }

  .apple-gram {
    width: 44.28px;
    height: 49.35px;
    top: 30px;
    left: -10px;
  }

  .broc-gram {
    right: -10px;
    top: 200px;
  }

  .right-gram {
    width: 35.88px;
    height: 35.89px;
    right: 10px;
    top: 120px;
  }

  .like2-gram {
    width: 52px;
    height: auto;
    top: 40px;
    right: 0px;
  }

  .grape-gram {
    display: none;
  }

  .btns-wrapper.inst .btn {
    font-size: 18px;
    line-height: 21px;
  }
  .btn > * {
    font-size: 12px;
    line-height: 14px;
  }
  .footer.zog {
    padding-top: 0 !important;
  }
}



.mainZog.mainZogKz .main-screen-wrapper {
    background: linear-gradient(106.88deg, #79CBF4 45.84%, #60B6E1 114.47%);
    position: relative;
}

.mainZog.mainZogKz .main-girl {
    top: 203px;
    /* bottom: 0; */
}

.zog-lang {
    position: relative;
    /* top: 30px; */
    /* left: 40px; */
    border: 2px solid #FFFFFF;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    text-transform: uppercase;
    color: #FFFFFF;
    border-radius: 30px;
    padding: 12px 20px;
    /* color: #fff; */
    /* display: flex; */
    /* width: 110px; */
    margin-bottom: 30px;
    margin-top: -30px;
    display: inline-block;
}

.zog-lang a {
    color: #fff;
    opacity: .5;
}

.zog-lang a.active {
    opacity: 1;
}


@media screen and (max-width: 1799px) {
.mainZog.mainZogKz .main-girl {
    top: 126px;
    /* bottom: 0; */
}
    .zog-lang {
        padding: 10px 16px;
        font-size: 14px;
    }
	
	.zog-lang {
    margin-top: 10px;
}
}



@media screen and (max-width: 1439px){
  .mainZog.mainZogKz .main-girl {
    top: 86px;
}  
}

@media screen and (max-width: 1279px){
  .mainZog.mainZogKz .main-girl {
    top: 90px;
}  
    .zog-lang{
        top:20px
    }
}

@media screen and (max-width: 1023px){
  .mainZog.mainZogKz .main-girl {
    top: 70px;
}  
    .zog-lang{
        top:20px;
        left: 30px;
    }
}

@media screen and (max-width: 767px){
  .mainZog.mainZogKz .main-girl {
    top: 20px;
}  
    .zog-lang{
        top:20px;
        left: 30px;
        padding: 6px 11px;
    }
  .mainZog.mainZogKz .main-screen-container {
    padding-top: 80px;
}
}



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,body{
    font-family: 'Museo Sans';
    overflow-x: hidden;
    min-width: 375px;
}

.main-test-wrapper{
    background: linear-gradient(125.51deg, #FF9D2B 28.23%, #FF6A2B 121.23%);
    border-radius: 0 0 60px 60px;
    position: relative;
    z-index: 6;
    overflow: visible;
}

.main-test{
  position: relative;
  z-index: 1;
  margin-top: 77px;
}

.main-test-wrapper .grid-test{
    padding: 145px 0 275px 0;
}

.grid-test{
    max-width: 1520px;
    margin: 0 auto;
    position: relative;
}

.main-test-header{
    color: #fff;
    max-width: 580px;
}

.main-header-test{
    font-weight: 600;
    font-size: 86px;
    line-height: 110%;
}

.under-test-header{
    font-weight: normal;
    font-size: 32px;
    line-height: 144%;
    max-width: 460px;
}

.main-test-image{
    width: 1119px;
    height: 763px;
    bottom: 0;
    right: 3.5%;
    position: absolute;
}

.scroll-down {
    margin-top: 122px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    opacity: 0.6;
    text-decoration: none;
  }
  
  .scroll-down:hover {
    opacity: 1;
  }

  .mouse-img {
    width: 10px;
    height: 15px;
    -webkit-animation: 2s mouseJump ease-out infinite;
    animation: 2s mouseJump ease-out infinite;
  }
  
  .mouse-text {
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #ffffff;
    margin-left: 10px;
  }

  @-webkit-keyframes mouseJump {
    0% {
        -webkit-transform: translateY(0%);
                transform: translateY(0%);
    }

    25% {
        -webkit-transform: translateY(-20%);
                transform: translateY(-20%);
    }

    50% {
        -webkit-transform: translateY(0%);
                transform: translateY(0%);
    }

    75% {
        -webkit-transform: translateY(20%);
                transform: translateY(20%);
    }

    100% {
        -webkit-transform: translateY(0%);
                transform: translateY(0%);
    }
}

@keyframes mouseJump {
    0% {
        -webkit-transform: translateY(0%);
                transform: translateY(0%);
    }

    25% {
        -webkit-transform: translateY(-20%);
                transform: translateY(-20%);
    }

    50% {
        -webkit-transform: translateY(0%);
                transform: translateY(0%);
    }

    75% {
        -webkit-transform: translateY(20%);
                transform: translateY(20%);
    }

    100% {
        -webkit-transform: translateY(0%);
                transform: translateY(0%);
    }
}

.main-test-under{
    background: #FFFFFF;
    box-shadow: 0px 1px 2px rgb(0 0 0 / 14%);
    border-radius: 32px;
    padding: 50px 55px;
    position: absolute;
    z-index: 1;
    width: 100%;
    bottom: -124px;
}

.main-test-under::before{
    content: "";
    position: absolute;
    width: 924px;
    height: 100%;
    background: url(../img/test/main-back-right.png);
    top: 0;
    right: 0;
}

.test-under-container{
    max-width: 780px;
}


.btns-wrapper.main {
    margin-top: 48px;
  }
  .btns-wrapper.two {
    /* display: -webkit-box; */
    display: -ms-flexbox;
    display: flex;
    /* -webkit-box-align: center; */
    -ms-flex-align: center;
    /* align-items: center; */
    /* -webkit-box-pack: justify; */
    -ms-flex-pack: justify;
    /* width: 100%; */
    /* max-width: 643px; */
    /* justify-content: space-between; */
    /* flex-direction: row; */
    width: 100%;
  }
  


.test-under-text{
    font-weight: 300;
    font-size: 24px;
    line-height: 140%;
}

.why-join-wrapper{
    background: linear-gradient(137.04deg, #59C1AC 20.99%, #1164D8 124.35%);
    border-radius: 0 0 60px 60px;
    padding: 95px 0 107px 0;
    margin: -95px 0 0 0;
    position: relative;
    z-index: 5;
}

.second-header {
    font-weight: 400;
    font-size: 48px;
    line-height: 58px;
    color: #fff;
    margin-bottom: 0;
}

.second-header.black{
    color: #272727;
}

.why-join-title{
    text-align: center;
    margin-top: 214px;
}


.why-join-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    margin-top: 92px;
  }
  .why-join-item {
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        from(#f1f6fb),
        to(#f1f6fb)
      ),
      radial-gradient(
        58.13% 63.66% at 50% 50%,
        rgba(211, 222, 253, 0.3) 0%,
        rgba(133, 162, 237, 0.3) 100%
      );
    background: -o-linear-gradient(bottom, #f1f6fb, #f1f6fb),
      -o-radial-gradient(50% 50%, 58.13% 63.66%, rgba(211, 222, 253, 0.3) 0%, rgba(
              133,
              162,
              237,
              0.3
            )
            100%);
    background: linear-gradient(0deg, #f1f6fb, #f1f6fb),
      radial-gradient(
        58.13% 63.66% at 50% 50%,
        rgba(211, 222, 253, 0.3) 0%,
        rgba(133, 162, 237, 0.3) 100%
      );
    border-radius: 25px;
    width: 362px;
    min-height: 323px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: 16px;
  }
  .why-join-header {
    position: absolute;
    width: 204.86px;
    left: 78px;
    top: -28px;
  }
  .why-join-header > img {
    width: 100%;
  }
  .why-join-text {
    margin-top: 132px;
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        from(#ffffff),
        to(#ffffff)
      ),
      radial-gradient(
        58.13% 63.66% at 50% 50%,
        rgba(211, 222, 253, 0.3) 0%,
        rgba(133, 162, 237, 0.3) 100%
      );
    background: -o-linear-gradient(bottom, #ffffff, #ffffff),
      -o-radial-gradient(50% 50%, 58.13% 63.66%, rgba(211, 222, 253, 0.3) 0%, rgba(
              133,
              162,
              237,
              0.3
            )
            100%);
    background: linear-gradient(0deg, #ffffff, #ffffff),
      radial-gradient(
        58.13% 63.66% at 50% 50%,
        rgba(211, 222, 253, 0.3) 0%,
        rgba(133, 162, 237, 0.3) 100%
      );
    border-radius: 25px;
    padding: 28px 30px 43px 30px;
    position: relative;
    z-index: 2;
    font-size: 20px;
    line-height: 150%;
    color: #272727;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .why-join-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 79px 0 72px 0;
    border-bottom: 3px dashed #ffffff24;
  }

  .gifts-title{
      text-align: center;
      margin-bottom: 32px;
  }

  .gifts-wrapper{
    margin-top: 85px;
    color: #272727;
    background: #FFFFFF;
    box-shadow: 0px 1px 2px rgb(0 0 0 / 14%);
    border-radius: 32px;
    padding: 46px 0;
  }

  .gifts-items{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .gift-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 325px;
    text-align: center;
    margin-right: 24px;
  }
  .gift-item:last-child{
      margin-right: 0;
  }
  .gift-img{
    width: 150px;
    height: 150px;
    border-radius: 20px;
    margin-bottom: 16px;
  }
  .gift-title{
    font-weight: normal;
    font-size: 24px;
    line-height: 140%;
    margin-bottom: 16px;
  }
  .gift-text{
    font-weight: 300;
    font-size: 20px;
    line-height: 130%;
  }

  .prepare-wrapper{
    background: linear-gradient(116.36deg, #EB636D 5.55%, #F93644 95.23%);
    border-radius: 0 0 60px 60px;
    padding: 108px 0 83px 0;
    margin: -108px 0 0 0;
    position: relative;
    z-index: 4;
  }
  .prepare-title{
    text-align: center;
    margin-top: 92px;
  }
  .prepare-container{
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    color: #FFFFFF;
  }

  .prepare-text>h4{
    font-weight: normal;
    font-size: 32px;
    line-height: 144%;
    margin-top: 37px;
  }
  .prepare-text>p{
    font-weight: 300;
    font-size: 24px;
    line-height: 140%;
    margin-top: 23px;
  }
  .prepare-btn{
      margin-top: 65px;
  }
  .prepare-back-img{
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 100%;
    pointer-events: none;
  }
  .prep-straw{
    position: absolute;
    width: 198.46px;
    height: 202.75px;
    left: -4.4%;
    bottom: 14%;
  }
  .prep-avo{
    position: absolute;
    width: 197px;
    height: 210px;
    right: 8.5%;
    bottom: 46.5%;
  }
  .prep-grape-back{
    position: absolute;
    width: 111px;
    height: 114px;
    bottom: 13%;
    right: 14%;
  }
  .prep-melon{
    position: absolute;
    width: 203px;
    height: 142px;
    left: 8.5%;
    bottom: 53%;
  }

  .prepare-img-wrapper{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .prepare-wrapper img {
    object-fit: contain;
  }
  .prep-grape{
    position: absolute;
    width: 57px;
    height: 58.63px;
    bottom: 19%;
    left: 2.1%;
    animation: flying-items 6s infinite linear;
  }
  .prep-yog{
    position: absolute;
    width: 188.81px;
    height: auto;
    left: 3%;
    bottom: 49%;
    animation: flying-items 8s infinite linear;
  }
  .prep-milk{
    position: absolute;
    width: 120.77px;
    height: auto;
    bottom: 14%;
    left: 14%;
    animation: flying-items 6s infinite linear;
  }
  .prep-smile{
    position: absolute;
    width: 63.41px;
    height: 63.41px;
    left: 23.5%;
    bottom: 46%;
    animation: flying-items 8s infinite linear;
  }
  .prep-cheese{
    position: absolute;
    width: 106.88px;
    height: 93.63px;
    right: 22.6%;
    bottom: 42%;
    animation: flying-items 6s infinite linear;
  }
  .prep-broc{
    position: absolute;
    width: 93.81px;
    height: 93.15px;
    right: 17%;
    bottom: 16%;
    animation: flying-items 8s infinite linear;
  }
  .prep-smile2{
    position: absolute;
    width: 73.38px;
    height: 73.38px;
    right: 13.5%;
    bottom: 62%;
    animation: flying-items 6s infinite linear;
  }
  .prep-milk2{
    position: absolute;
    width: 106px;
    height: auto;
    right: 4%;
    bottom: 30%;
    animation: flying-items 8s infinite linear;
  }

  @-webkit-keyframes flying-items {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
      transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    25% {
      opacity: 1;
      -webkit-transform: translateX(30px) translateY(-8px) rotate(0deg)
        scale(1, 1);
      transform: translateX(30px) translateY(-8px) rotate(0deg) scale(1, 1);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    50% {
      opacity: 1;
      -webkit-transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
      transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    75% {
      opacity: 1;
      -webkit-transform: translateX(-30px) translateY(-8px) rotate(0deg)
        scale(1, 1);
      transform: translateX(-30px) translateY(-8px) rotate(0deg) scale(1, 1);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
      transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
    }
  }
  
  @keyframes flying-items {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
      transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    25% {
      opacity: 1;
      -webkit-transform: translateX(40px) translateY(-10px) rotate(0deg)
        scale(1, 1);
      transform: translateX(40px) translateY(-10px) rotate(0deg) scale(1, 1);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    50% {
      opacity: 1;
      -webkit-transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
      transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    75% {
      opacity: 1;
      -webkit-transform: translateX(-40px) translateY(-10px) rotate(0deg)
        scale(1, 1);
      transform: translateX(-40px) translateY(-10px) rotate(0deg) scale(1, 1);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
      transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
    }
  }

  .start-wrapper{
    background: linear-gradient(137.04deg, #59C1AC 20.99%, #1164D8 124.35%);
    border-radius: 0 0 60px 60px;
    padding: 104px 0 66px 0;
    margin: -104px 0 0 0;
    position: relative;
    z-index: 3;
  }
  .start-wrapper::before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 752px;
    pointer-events: none;
    background: url(../img/test/start-back.png);
    background-size: cover;
  }
  .start-container{
    width: 605px;
    height: 567px;
    margin: 0 auto;
    margin-top: 62px;
    background: url(../img/test/start-back.svg);
    padding: 167px 58px 116px 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
  }
  .start-title{
      margin-bottom: 29px;
  }
  
  .prepare-btn {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
  .start-text{
     max-width: 375px;
    margin-bottom: 22px;
    font-size: 25px;
  }

  .start-back-img{
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
  }
  .start-4{
    position: absolute;
    width: 144.28px;
    height: 140.74px;
    left: 28.5%;
    bottom: 28%;
    animation: flying-items 8s infinite linear;
  }
  .start-6{
    position: absolute;
    width: 123.43px;
    height: 124.67px;
    right: 32%;
    bottom: 14%;
    animation: flying-items 8s infinite linear;
  }
  .start-img-wrapper{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    z-index: 3;
    pointer-events: none;
  }

  .start-img-wrapper img {
    object-fit: contain;
  }
  .start-1{
    position: absolute;
    width: 150.09px;
    height: 131.49px;
    bottom: 14.5%;
    left: 17%;
    animation: flying-items 6s infinite linear;
  }
  .start-2{
    position: absolute;
    width: 88.18px;
    height: 94.56px;
    bottom: 51%;
    left: 15%;
    animation: flying-items 8s infinite linear;
  }
  .start-3{
    position: absolute;
    width: 138.99px;
    height: 134.48px;
    bottom: 55.5%;
    left: 24.5%;
    animation: flying-items 6s infinite linear;
  }
  .start-5{
    position: absolute;
    width: 137.83px;
    height: 144.54px;
    bottom: 7%;
    left: 35%;
    animation: flying-items 6s infinite linear;
  }
  .start-7{
    position: absolute;
    width: 156.38px;
    height: 173.88px;
    bottom: 41%;
    right: 29%;
    animation: flying-items 6s infinite linear;
  }
  .start-8{
    position: absolute;
    width: 135.33px;
    height: 120.65px;
    bottom: 9%;
    right: 18.5%;
    animation: flying-items 8s infinite linear;
  }
  .start-9{
    position: absolute;
    width: 84.98px;
    height: 84.38px;
    bottom: 41%;
    right: 22%;
    animation: flying-items 6s infinite linear;
  }
  .start-10{
    position: absolute;
    width: 81.65px;
    height: 81.49px;
    bottom: 64%;
    right: 22%;
    animation: flying-items 8s infinite linear;
  }
  .start-11{
    position: absolute;
    width: 132.22px;
    height: 146.76px;
    bottom: 31%;
    right: 9%;
    animation: flying-items 6s infinite linear;
  }

  .creators-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 46px auto 0 auto;
  }
  .creator-item {
    width: 365px;
    height: 178px;
    border-radius: 32px;
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        from(#ffffff),
        to(#ffffff)
      ),
      radial-gradient(
        58.13% 63.66% at 50% 50%,
        rgba(211, 222, 253, 0.3) 0%,
        rgba(133, 162, 237, 0.3) 100%
      );
    background: -o-linear-gradient(bottom, #ffffff, #ffffff),
      -o-radial-gradient(50% 50%, 58.13% 63.66%, rgba(211, 222, 253, 0.3) 0%, rgba(
              133,
              162,
              237,
              0.3
            )
            100%);
    background: linear-gradient(0deg, #ffffff, #ffffff),
      radial-gradient(
        58.13% 63.66% at 50% 50%,
        rgba(211, 222, 253, 0.3) 0%,
        rgba(133, 162, 237, 0.3) 100%
      );
    margin-right: 20px;
    padding: 17px 0 23px 0;
    transition: .5s;
  }
  .creator-item:hover .creator-img{
    transform: scale(1.05);
  }
  .creator-item:last-child {
    margin-right: 0;
  }
  .creator-img {
    margin: 0 auto;
    width: 290px;
    height: 110px;
    display: block;
    transition: .5s;
  }
  .creator-text {
    font-size: 18px;
    line-height: 150%;
    color: #272727;
    text-align: center;
    font-weight: 500;
  }
  .org-section{
    background: #1061D8;
    border-radius: 0 0 60px 60px;
    padding: 65px 0 85px 0;
    margin: -65px 0 0 0;
    position: relative;
    z-index: 2;
    overflow: hidden;
  }
  .org-section:before{
    content: "";
    position: absolute;
    width: 748.49px;
    height: 831.03px;
    background: #E7A3A1;
    filter: blur(288px);
    transform: rotate(175.58deg);
    bottom: 5.5%;
    left: -13%;
    pointer-events: none;
    z-index: 0;
  }
  .org-section::after{
    content: "";
    position: absolute;
    filter: blur(288px);
    bottom: -13.5%;
    right: -28%;
    width: 891.89px;
    height: 868.01px;
    background: #FFFFFF;
    transform: rotate(-121.55deg);
    pointer-events: none;
    z-index: 0;
  }

  .org-title{
    text-align: center;
    margin-top: 105px;
  }



  .inst-wrapper {
    background: -o-linear-gradient(343.12deg, #ff9d2b 45.84%, #ff6a2b 114.47%);
    background: linear-gradient(106.88deg, #ff9d2b 45.84%, #ff6a2b 114.47%);
    padding: 122px 0 120px 0;
    margin: -122px 0 0 0;
    position: relative;
    z-index: 1;
  }
  .inst-wrapper:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 173px;
    background: url(../img/test/zog/inst-shadow.png);
    top: 51px;
  }
  .inst-container {
    margin-top: 110px;
  }
  .inst-title {
    text-align: center;
    margin-bottom: 34px;
    position: relative;
  }
  .btns-wrapper.inst {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .btns-wrapper.inst .btn {
    font-size: 26px;
    line-height: 30px;
  }
  .inst-img-wrapper {
    position: relative;
    width: 100%;
  }
  .cherry-gram {
    -webkit-animation: flying-items 6s infinite linear;
    animation: flying-items 6s infinite linear;
    position: absolute;
    width: 49px;
    height: 56.9px;
    top: 144px;
    left: 108px;
  }
  .left-gram {
    -webkit-animation: flying-items 8s infinite linear;
    animation: flying-items 8s infinite linear;
    position: absolute;
    width: 95.12px;
    height: 95.13px;
    top: 193px;
    left: 235px;
  }
  .like-gram {
    -webkit-animation: flying-items 6s infinite linear;
    animation: flying-items 6s infinite linear;
    position: absolute;
    width: 88.22px;
    height: 73px;
    top: 78px;
    left: 330px;
  }
  .apple-gram {
    -webkit-animation: flying-items 8s infinite linear;
    animation: flying-items 8s infinite linear;
    position: absolute;
    width: 124.82px;
    height: 130.2px;
    top: 184px;
    left: 415px;
  }
  .broc-gram {
    -webkit-animation: flying-items 6s infinite linear;
    animation: flying-items 6s infinite linear;
    position: absolute;
    width: 84.98px;
    height: 84.38px;
    top: 191px;
    right: 447px;
  }
  .right-gram {
    -webkit-animation: flying-items 8s infinite linear;
    animation: flying-items 8s infinite linear;
    position: absolute;
    width: 81.55px;
    height: 81.56px;
    top: 90px;
    right: 349px;
  }
  .like2-gram {
    -webkit-animation: flying-items 6s infinite linear;
    animation: flying-items 6s infinite linear;
    position: absolute;
    width: 73.38px;
    height: 58.29px;
    top: 210px;
    right: 222px;
  }
  .grape-gram {
    -webkit-animation: flying-items 8s infinite linear;
    animation: flying-items 8s infinite linear;
    position: absolute;
    width: 81.65px;
    height: 81.49px;
    top: 47px;
    right: 190px;
  }
  .input-box-wrapper{
    width: 100%;
    padding-bottom: 47px;
    margin-bottom: 47px;
    border-bottom: 2px dashed #EFEFEF;
  }
  .input-box-wrapper.last{
    margin-bottom: 0;
    padding-bottom: 0;
    border: 0;
  }
  #checkZog{
    display: none;
    visibility: hidden;
  }

  /* .pp-test-right.disable{
    display: none;
  } */
  /* .pp__content_singin.active{
    max-width: 670px;
    margin-bottom: 10px;
  } */
  /* .sort__check.disable{
    display: none;
  } */
  /* .pp-test-left.active{
    width: 100%;
  } */

  /* .test-reg-form-bottom{
    display: flex;
    align-items: center;
    margin-top: 47px;
  } */
  /* .reg-test-descr{
    max-width: 310px;
  }
  .reg-test-btn{
    max-width: 170px;
    margin: 0 40px 0 0 !important;
  } */

@media screen and (min-width:1921px){
  .main-test-image {
    right: 16.5%;
}
}

@media screen and (max-width:1799px){
  .grid-test{
    max-width: 1280px;
  }
  .main-test-wrapper .grid-test {
    padding: 145px 0 145px 0;
  }
  .main-test-image{
    width: 935.68px;
    height: 638px;
    right: 0;
  }
  .main-test-under{
    bottom: -240px;
  }
  .scroll-down {
    margin-top: 122px;
  }
  .test-under-container {
    max-width: 555px;
  }
  .test-under-text {
    font-size: 20px;
  }
  .why-join-title {
    margin-top: 328px;
  }
  .why-join-item {
    width: 304px;
    min-height: 345px;
  }
  .why-join-header {
    width: 172px;
    left: 65px;
    top: -24px;
  }
  .why-join-text {
    margin-top: 111px;
    padding: 26px 30px;
  }
  .why-join-btn {
    padding: 45px 0 65px 0;
  }
  .gifts-wrapper{
    margin-top: 65px;
  }
  .gift-item{
    margin-right: 75px;
  }
  .gift-title{
    font-size: 20px;
  }
  .gift-text{
    font-size: 18px;
  }
  .prepare-wrapper {
    padding: 108px 0 109px 0;
  }
  .prepare-title {
    margin-top: 98px;
  }
  .prepare-text>p{
    font-size: 20px;
  }
  .prepare-text>p>span{
    font-weight: 600;
  }
  .prepare-container {
    max-width: 570px;
  }
  .prep-straw{
    display: none;
  }
  .prep-grape {
    bottom: 12%;
  }
  .prep-yog {
    left: 0.2%;
    bottom: 42%;
  }
  .prep-milk {
    bottom: 8%;
    left: 13%;
  }
  .prep-smile {
    left: 17.5%;
    bottom: 39%;
  }
  .prep-cheese {
    right: 20.6%;
    bottom: 35%;
  }
  .prep-broc {
    right: 13%;
    bottom: 10%;
  }
  .prep-smile2 {
    right: 8.5%;
    bottom: 55%;
  }
  .prep-milk2 {
    right: -4%;
    bottom: 23%;
  }
  .start-wrapper::before{
    height: 700px;
  }
  .start-1 {
    bottom: 14.5%;
    left: 5.5%;
  }
  .start-2 {
    left: 2.5%;
  }
  .start-3 {
    left: 15.5%;
  }
  .start-5 {
    left: 31%;
  }
  .start-7 {
    right: 22.5%;
  }
  .start-8 {
    bottom: 9%;
    right: 8%;
  }
  .start-9 {
    right: 13%;
  }
  .start-10 {
    right: 13.3%;
  }
  .start-11 {
    right: -4.5%;
  }
  .start-4 {
    left: 21%;
  }
  .start-6 {
    right: 26.3%;
  }
  .org-section:before {
    width: 518.1px;
    height: 575.24px;
  }
  .org-section::after {
    width: 617.36px;
    height: 600.83px;
  }
  .inst-container {
    /* max-width: 400px; */
    margin: 0 auto;
    margin-top: 77px;
  }
  .second-header {
    font-weight: 500;
  }
  .cherry-gram {
    width: 38.68px;
    height: 44.92px;
    top: 171px;
    left: 80px;
  }
  .left-gram {
    width: 75.08px;
    height: 75.09px;
    top: 210px;
    left: 180px;
  }
  .like-gram {
    width: 69.64px;
    height: 57.62px;
    top: 120px;
    left: 255px;
  }
  .apple-gram {
    width: 98.52px;
    height: 102.77px;
    top: 203px;
    left: 322px;
  }
  .broc-gram {
    width: 67.08px;
    height: 66.61px;
    top: 208px;
    right: 282px;
  }
  .right-gram {
    width: 64.37px;
    height: 64.37px;
    top: 130px;
    right: 205px;
  }
  .like2-gram {
    width: 57.92px;
    height: 46.01px;
    top: 223px;
    right: 104px;
  }
  .grape-gram {
    width: 64.45px;
    height: 64.32px;
    top: 95px;
    right: 33px;
  }
  .main-test>*{
    border-radius: 0 0 40px 40px;
  }
}

@media screen and (max-width:1439px){
  .grid-test {
    max-width: 1200px;
  }
  .main-test-wrapper .grid-test {
    padding: 103px 0 100px 0;
  }
  .main-header-test {
    font-size: 64px;
  }
  .under-test-header {
    font-size: 28px;
    max-width: 400px;
  }
  .main-test-image{
    width: 787.55px;
    height: 537px;
  }
  .main-test-under {
    bottom: -286px;
    padding: 56px;
  }
  .why-join-title {
    margin-top: 345px;
  }
  .btn{
    padding: 16px 24px;
  }
  .btn > *{
    font-size: 14px;
  }
  .btns-wrapper.two {
    max-width: 404px;
  }
  .main-test-under::before {
    width: 795px;
    height: 296px;
  }
  .why-join-item {
    width: 285px;
    min-height: 275px;
  }
  .why-join-header {
    width: 160px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    top: -24px;
  }
  .why-join-text {
    margin-top: 100px;
    padding: 24px 28px;
    font-size: 18px;
  }
  .why-join-items {
    margin-top: 57px;
  }
  .why-join-btn {
    padding: 35px 0 60px 0;
  }
  .second-header{
    font-size: 42px;
  }
  .gift-item {
    margin-right: 71px;
    max-width: 305px;
  }
  .gift-img {
    width: 140px;
    height: 140px;
  }
  .gift-text {
    font-size: 16px;
  }
  .why-join-wrapper {
    padding: 95px 0 76px 0;
  }
  .prepare-container {
    max-width: 517px;
  }
  .prepare-text>h4 {
    font-size: 28px;
    margin-top: 16px;
  }
  .prepare-text>p {
    margin-top: 34px;
  }
  .prepare-btn {
    margin-top: 42px;
  }
  .prep-melon {
    left: 4.5%;
    bottom: 51%;
  }
  .prep-avo {
    right: -7.4%;
    bottom: 44.5%;
  }
  .prep-grape-back {
    bottom: 9.5%;
    right: 1.4%;
  }
  .prep-grape {
    bottom: 16%;
    left: 0.2%;
  }
  .prep-yog {
    left: -2.8%;
    bottom: 47%;
  }
  .prep-milk {
    bottom: 10.5%;
    left: 10.7%;
  }
  .prep-smile {
    left: 16%;
    bottom: 44%;
  }
  .prep-cheese {
    right: 14%;
    bottom: 40%;
  }
  .prep-broc {
    right: 5.7%;
    bottom: 12%;
  } 
  .prep-smile2 {
    right: 0.5%;
    bottom: 60.5%;
  }
  .prep-milk2 {
    display: none;
  }
  .start-container {
    width: 535px;
    height: 500px;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 144px 22px 126px 22px;
    margin-top: 88px;
  }
  .start-text {
    max-width: 315px;
    margin-bottom: 30px;
    font-size: 20px;
    line-height: 130%;
  }
  .start-title {
    margin-bottom: 23px;
  }
  .start-1 {
    bottom: 21.5%;
    left: 6%;
    width: 130.08px;
    height: 113.96px;
  }
  .start-2 {
    left: 3%;
    bottom: 56%;
    width: 76.43px;
    height: 81.96px;
  }
  .start-3 {
    width: 120.47px;
    height: 116.56px;
    bottom: 60%;
  }
  .start-5 {
    left: 29.3%;
    bottom: 18.8%;
    width: 119.46px;
    height: 125.27px;
  }
  .start-wrapper {
    padding: 104px 0 109px 0;
  }
  .start-4 {
    left: 22.5%;
    bottom: 32%;
    width: 125.05px;
    height: 121.98px;
  }
  .start-6 {
    right: 27.3%;
    bottom: 19%;
    width: 106.98px;
    height: 108.05px;
  }
  .start-7 {
    right: 25.5%;
    bottom: 40.5%;
    width: 135.54px;
    height: 150.71px;
  }
  .start-8 {
    bottom: 15%;
    right: 9.6%;
    width: 117.29px;
    height: 104.57px;
  }
  .start-9 {
    right: 14%;
    bottom: 42.5%;
    width: 73.65px;
    height: 73.14px;
  }
  .start-10 {
    right: 15%;
    bottom: 62.5%;
    width: 70.76px;
    height: 70.63px;
  }
  .start-11 {
    right: -2.5%;
    bottom: 33.5%;
    width: 114.59px;
    height: 127.2px;
  }
  .org-title.first{
    margin-top: 105px;
  }
  .org-title {
    margin-top: 70px;
  }
  .btn.inst {
    font-size: 26px;
    line-height: 30px;
    padding: 22px 32px;
  }
  .cherry-gram {
    width: 38.68px;
    height: 44.92px;
    top: 160px;
    left: 37px;
  }
  .left-gram {
    width: 75.08px;
    height: 75.09px;
    top: 200px;
    left: 137px;
  }
  .like-gram {
    width: 69.64px;
    height: 57.62px;
    top: 108px;
    left: 212px;
  }
  .apple-gram {
    width: 98.52px;
    height: 102.77px;
    top: 192px;
    left: 280px;
  }
  .broc-gram {
    width: 67.08px;
    height: 66.61px;
    top: 197px;
    right: 242px;
  }
  .right-gram {
    width: 64.37px;
    height: 64.37px;
    top: 117px;
    right: 165px;
  }
  .like2-gram {
    width: 57.92px;
    height: 46.01px;
    top: 212px;
    right: 65px;
  }
  .grape-gram {
    width: 64.45px;
    height: 64.32px;
    top: 84px;
    right: 40px;
  }
}

@media screen and (max-width:1279px){
  .grid-test {
    max-width: 964px;
  }
  .main-test-wrapper .grid-test {
    padding: 75px 0 110px 0;
  }
  .main-header-test {
    font-size: 50px;
    margin-bottom: 30px;
  }
  .under-test-header {
    font-size: 24px;
    max-width: 345px;
  }
  .scroll-down {
    margin-top: 72px;
  }
  .main-test-image {
    width: 658.49px;
    height: 449px;
  }
  .test-under-text {
    font-size: 16px;
  }
  .test-under-container {
    max-width: 440px;
  }
  .btns-wrapper.main {
    margin-top: 20px;
  }
  .main-test-under::before {
    width: 569px;
    height: 212px;
    background-size: contain;
  }
  .main-test-under {
    bottom: -206px;
    padding: 38px 34px;
    border-radius: 20px;
  }
  .why-join-title {
    margin-top: 272px;
  }
  .why-join-items {
    margin-top: 40px;
  }
  .why-join-header {
    width: 130px;
    top: -18px;
  }
  .why-join-text {
    margin-top: 85px;
    padding: 20px;
    font-size: 14px;
  }
  .why-join-item {
    width: 230px;
    min-height: 180px;
  }
  .why-join-btn {
    padding: 40px 0 50px 0;
  }
  .second-header {
    font-size: 36px;
  }
  .gifts-wrapper {
    margin-top: 50px;
    padding: 30px 0;
    border-radius: 20px;
  }
  .gift-item {
    margin-right: 57px;
    max-width: 245px;
  }
    .gift-img {
      width: 113px;
      height: 113px;
  }
  .gift-title {
    font-size: 16px;
  }
  .gift-text {
    font-size: 14px;
  }
  .why-join-wrapper {
    padding: 95px 0 64px 0;
  }
  .prepare-title {
    margin-top: 93px;
}
.prep-melon {
  left: 4%;
  bottom: 48%;
  width: 160.06px;
  height: 111.96px;
  }
  .prep-avo {
    right: -4.4%;
    bottom: 42.5%;
    width: 155.33px;
    height: 164.79px;
  }
  .prep-grape-back {
    bottom: 15.2%;
    right: 4%;
    width: 85.94px;
    height: 90.67px;
  }
  .prep-grape {
    bottom: 20%;
    left: -1.1%;
    width: 44.94px;
    height: 46.22px;
}
.prep-yog {
  left: -3.8%;
  bottom: 44%;
  width: 148.86px;
  height: 156.1px;
}
.prep-milk {
  bottom: 15.5%;
  left: 9.7%;
  width: 95.22px;
  height: 112.7px;
}
.prep-smile {
  left: 14.8%;
  bottom: 42.6%;
  width: 49.99px;
  height: 49.99px;
}
.prep-cheese {
  right: 16.4%;
  bottom: 40%;
  width: 84.26px;
  height: 73.82px;
}
.prep-broc {
  right: 7.9%;
  bottom: 17.4%;
  width: 73.96px;
  height: 73.44px;
}
.prep-smile2 {
  right: 2.8%;
  bottom: 55.8%;
  width: 57.85px;
  height: 57.85px;
}
.prepare-text>p {
  font-size: 16px;
}
.prepare-container {
  max-width: 463px;
}
.prepare-text>h4 {
  font-size: 24px;
}

.start-container {
  padding: 143px 0 120px 0;
  margin-top: 52px;
  width: 485px;
  height: 455px;
}
.start-text {
  max-width: 270px;
  margin-bottom: 22px;
  font-size: 16px;
}
.start-title {
  margin-bottom: 19px;
}
.start-1 {
  bottom: 18.5%;
  left: 4.4%;
  width: 87.54px;
  height: 68.67px;
}
.start-2 {
  left: 1.5%;
  bottom: 46%;
  width: 60.71px;
  height: 65.1px;
}
.start-3 {
  left: 13.8%;
  bottom: 49.4%;
  width: 95.69px;
  height: 92.58px;
}
.start-5 {
  left: 27%;
  bottom: 12.2%;
  width: 94.89px;
  height: 99.5px;
}
.start-7 {
  right: 22.5%;
  bottom: 37.5%;
  width: 106.82px;
  height: 118.78px;
}
.start-8 {
  bottom: 12.5%;
  right: 8.3%;
  width: 93.17px;
  height: 83.06px;
}
.start-9 {
  right: 13%;
  bottom: 36.9%;
  width: 58.5px;
  height: 58.09px;
}
.start-10 {
  right: 16.4%;
  bottom: 58.5%;
  width: 56.21px;
  height: 56.1px;
}
.start-11 {
  right: 1.7%;
  bottom: 36.2%;
  width: 91.02px;
  height: 101.04px;
}
.start-4 {
  left: 19%;
  bottom: 27%;
  width: 99.32px;
  height: 96.89px;
}
.start-6 {
  right: 23.3%;
  bottom: 17%;
  width: 84.98px;
  height: 85.83px;
}
.creator-item {
  width: 291px;
  height: 142px;
}
.creator-img {
  width: 190px;
  height: auto;
}
.org-title {
  margin-top: 50px;
}
.creators-items{
  margin-top: 30px;
}
.cherry-gram {
  width: 36.91px;
  height: 42.87px;
  top: 107px;
  left: 30px;
}
.left-gram {
  width: 71.65px;
  height: 71.66px;
  top: 144px;
  left: 125px;
}
.like-gram {
  width: 66.46px;
  height: 54.99px;
  top: 57px;
  left: 197px;
}
.apple-gram {
  top: 137px;
  left: 260px;
  width: 94.03px;
  height: 98.08px;
}
.broc-gram {
  width: 64.02px;
  height: 63.57px;
  top: 182px;
  right: 222px;
}
.right-gram {
  width: 61.43px;
  height: 61.44px;
  top: 105px;
  right: 150px;
}
.like2-gram {
  width: 55.28px;
  height: 43.91px;
  top: 195px;
  right: 53px;
}
.grape-gram {
  width: 61.5px;
  height: 61.38px;
  top: 73px;
  right: 29px;
}
.btns-wrapper.inst .btn {
  font-size: 22px;
  line-height: 26px;
}
.inst-wrapper {
  padding: 122px 0 73px 0;
}
}

@media screen and (max-width:1023px){
  .grid-test {
    max-width: 93.6%;
  }
  .main-test-wrapper .grid-test{
    padding: 73px  0 116px 0;
  }
  .main-test-image {
    width: 566px;
    height: 386px;
    right: -10%;
}
.scroll-down {
  margin-top: 66px;
}
.main-test-under {
  bottom: -214px;
  padding: 40px 34px;
}
.test-under-container {
  max-width: 370px;
}
.main-test-under::before {
  width: 411px;
  height: 154px;
  top: 9%;
}
.btn {
  padding: 13.5px 24px;
}
.btn > * {
  font-size: 12px;
}
.btns-wrapper.two {
    max-width: 100%;
}
.main-screen-container .header-box {
    width: 100%;
}
.why-join-items {
  margin-top: 0px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.why-join-item {
  width: 346px;
  min-height: 192px;
  margin-top: 41px;
}
.why-join-title {
  margin-top: 253px;
}
.why-join-btn {
  padding: 34px 0 36px 0;
}
.gift-item {
  margin-right: 38px;
  max-width: 190px;
}
.gift-img {
  width: 100px;
  height: 100px;
}
.why-join-wrapper {
  padding: 95px 0 56px 0;
}
.prepare-text>h4 {
  margin-top: 23px;
}
.prepare-text>p {
  margin-top: 17px;
}
.prepare-title {
  margin-top: 83px;
}
.prepare-wrapper {
  padding: 108px 0 68px 0;
}
.prep-melon {
  left: 0%;
  bottom: 50.4%;
  width: 133.62px;
  height: 93.47px;
}
.prep-avo {
  right: -12.3%;
  bottom: 45.5%;
  width: 129.67px;
  height: 137.57px;
}
.prep-grape-back {
  bottom: 18.2%;
  right: -3%;
  width: 71.75px;
  height: 75.7px;
}
.prep-grape{
  display: none;
}
.prep-yog {
  left: -8.4%;
  bottom: 47%;
  width: 124.27px;
  height: 130.32px;
}
.prep-milk {
  bottom: 19.1%;
  left: 6.7%;
  width: 79.49px;
  height: 94.08px;
}
.prep-smile {
  left: 12.5%;
  bottom: 45%;
  width: 41.74px;
  height: 41.74px;
}
.prep-cheese {
  right: 11%;
  bottom: 42%;
  width: 70.35px;
  height: 61.63px;
}
.prep-broc {
  right: 1.7%;
  bottom: 20.4%;
  width: 61.75px;
  height: 61.31px;
}
.prep-smile2 {
  right: -4%;
  bottom: 57.8%;
  width: 48.3px;
  height: 48.3px;
}
@-webkit-keyframes flying-items {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) translateY(0px) rotate(0deg)
      scale(1, 1);
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    opacity: 1;
    -webkit-transform: translateX(10px) translateY(-5px) rotate(0deg)
      scale(1, 1);
    transform: translateX(10px) translateY(-5px) rotate(0deg) scale(1, 1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    opacity: 1;
    -webkit-transform: translateX(0px) translateY(0px) rotate(0deg)
      scale(1, 1);
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    opacity: 1;
    -webkit-transform: translateX(-10px) translateY(-5px) rotate(0deg)
      scale(1, 1);
    transform: translateX(-10px) translateY(-5px) rotate(0deg) scale(1, 1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) translateY(0px) rotate(0deg)
      scale(1, 1);
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
  }
}
@keyframes flying-items {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) translateY(0px) rotate(0deg)
      scale(1, 1);
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    opacity: 1;
    -webkit-transform: translateX(10px) translateY(-5px) rotate(0deg)
      scale(1, 1);
    transform: translateX(10px) translateY(-5px) rotate(0deg) scale(1, 1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    opacity: 1;
    -webkit-transform: translateX(0px) translateY(0px) rotate(0deg)
      scale(1, 1);
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    opacity: 1;
    -webkit-transform: translateX(-10px) translateY(-5px) rotate(0deg)
      scale(1, 1);
    transform: translateX(-10px) translateY(-5px) rotate(0deg) scale(1, 1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) translateY(0px) rotate(0deg)
      scale(1, 1);
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
  }
}

.start-container {
  padding: 140px 0 110px 0;
  margin-top: 99px;
  width: 473px;
  height: 443px;
}
.start-wrapper {
  padding: 104px 0 76px 0;
}
.start-1 {
  bottom: 35%;
  left: 1.6%;
  width: 83.93px;
  height: 73.53px;
}
.start-2 {
  bottom: 59%;
  width: 49.31px;
  height: 52.88px;
}
.start-3 {
  left: 12%;
  bottom: 61.8%;
  width: 77.73px;
  height: 75.21px;
}
.start-4 {
  left: 16%;
  bottom: 44%;
  width: 80.68px;
  height: 78.7px;
}
.start-5 {
  left: 16%;
  bottom: 23.6%;
  width: 77.08px;
  height: 80.83px;
}
.start-7 {
  right: 19.7%;
  bottom: 52.5%;
  width: 86.77px;
  height: 96.49px;
}
.start-6 {
  right: 16.7%;
  bottom: 23%;
  width: 69.03px;
  height: 69.72px;
}
.start-8 {
  bottom: 31.5%;
  right: 4.3%;
  width: 75.68px;
  height: 67.47px;
}
.start-9 {
  right: 9%;
  bottom: 51.9%;
  width: 47.52px;
  height: 47.19px;
}
.start-10 {
  right: 12.4%;
  bottom: 69.5%;
  width: 45.66px;
  height: 45.57px;
}
.start-11 {
  right: -3.3%;
  bottom: 51.2%;
  width: 73.94px;
  height: 82.07px;
}
.creator-item {
  width: 220px;
  height: 130px;
}
.creator-img {
  width: 165px;
  height: auto;
}
.org-title.first {
  margin-top: 90px;
}
.org-title {
  margin-top: 42px;
}
.cherry-gram {
  display: none;
}
.left-gram {
  width: 71.65px;
  height: 71.66px;
  top: auto;
  left: -1.4%;
  bottom: 22%;
}
.like-gram {
  width: 66.46px;
  height: 54.99px;
  top: auto;
  left: 8%;
  bottom: 43%;
}
.apple-gram {
  width: 94.03px;
  height: 98.08px;
  top: auto;
  left: 16.5%;
  bottom: 18.5%;
}
.broc-gram {
  width: 64.02px;
  height: 63.57px;
  top: auto;
  right: 21.5%;
  bottom: 20%;
}
.right-gram {
  width: 61.43px;
  height: 61.44px;
  top: auto;
  right: 12.3%;
  bottom: 35%;
}
.like2-gram {
  width: 55.28px;
  height: 43.91px;
  top: auto;
  right: 0;
  bottom: 21%;
}
.grape-gram {
  width: 61.5px;
  height: 61.38px;
  top: auto;
  right: -3.5%;
  bottom: 41%;
}
.inst-wrapper {
  padding: 122px 0 83px 0;
}
.inst-container {
  margin-top: 104px;
}
.inst-img-wrapper {
  height: 100%;
  position: absolute;
  top: 0;
}
.why-join-item:nth-child(even) {
  margin-right: 0;
}
}

@media screen and (max-width:767px){
  .grid-test {
    max-width: 89.4%;
}
.main-test-wrapper .grid-test {
  padding: 37px 0 368px 0;
  position: static;
}
.main-header-test {
  font-size: 36px;
  margin-bottom: 20px;
}
.main-test-container{
  text-align: center;
}
.under-test-header {
  font-size: 23px;
  max-width: 100%;
}
.scroll-down {
  margin: 0 auto;
  margin-top: 22px;
  width: fit-content;
}
.main-test-image {
  right: -24%;
  width: 534px;
  height: 364px;
}
.main-test-under::before{
  display: none;
}
.main-test-under{
  left: 0;
  border-radius: 0;
  bottom: -197px;
  padding: 24px 20px 38px 20px;
}
.btn {
  padding: 13.5px 18.2px;
}
.second-header {
  font-size: 26px;
  line-height: 120%;
}
.why-join-title {
  margin-top: 230px;
}
.why-join-item {
  margin-top: 0;
  width: 100%;
  height: auto;
  margin-bottom: 34px;
  position: relative;
  min-height: 200px;
}

.why-join-item:last-child {
  margin-bottom: 0;
}

.why-join-items {
  margin-top: 44px;
}
.why-join-btn {
  padding: 29px 0 38px 0;
}
.gifts-wrapper {
  margin-top: 38px;
  padding: 25px 0;
}
.gifts-items {
  flex-direction: column;
}
.gift-item{
  margin-right: 0px;
  max-width: 88%;
  margin-bottom: 20px;
  flex-direction: row;
  align-items: flex-start;
}
.gift-item:last-child{
  margin-bottom: 0;
}
.gift-img {
  width: 80px;
  height: 80px;
  margin-right: 20px;
}
.gift-text-wrapper{
  text-align: left;
}
.gift-title {
  margin-bottom: 7px;
}
.why-join-wrapper {
  padding: 95px 0 40px 0;
}
.prepare-img-wrapper{
  display: none;
}
.prepare-back-img{
  display: none;
}
.prepare-title {
  margin-top: 58px;
}
.prepare-wrapper {
  padding: 108px 0 39px 0;
}
.main-test>* {
  border-radius: 0 0 32px 32px;
}
.prepare-text>h4 {
  max-width: 215px;
  margin: 0 auto;
  margin-top: 20px;
}
.prepare-text>p {
  margin-top: 20px;
  font-size: 14px;
}
.prepare-text>p>br{
  display: none;
}
.prepare-btn {
  margin-top: 20px;
}

.start-wrapper .grid-test{
  max-width: unset;
  display: flex;
  align-items: center;
}
.start-container{
  width: 100%;
  height: auto;
  margin-top: 53px;
  padding: 95px 0 80px 0;
  background-size: contain;
  background-position: center;
}
.start-wrapper {
  padding: 104px 0 62px 0;
}
.start-1{
  display: none;
}
.start-2{
  display: none;
}
.start-3{
  display: none;
}
.start-9{
  display: none;
}
.start-10{
  display: none;
}
.start-11{
  display: none;
}
.start-5 {
  left: 3%;
  bottom: 11%;
}
.start-4 {
  left: -5%;
  bottom: 59.5%;
}
.start-6 {
  right: 5.5%;
  bottom: 9%;
}
.start-7 {
  right: 4.7%;
  bottom: 63%;
}
.start-8 {
  bottom: 30.2%;
  right: -8.7%;
}
.org-title.first {
  margin-top: 62px;
}
.org-section:before{
  display: none;
}
.org-section::after{
  display: none;
}
.creators-items {
  margin-top: 27px;
  display: block;
  width: auto;
}

.creator-item {
  display: block;
  width: 100%;
  margin-right: 0;
  margin-bottom: 16px;
  height: auto;
  padding: 13px;
}

.creator-item:last-child {
  margin-bottom: 0;
}

.creator-img {
  max-width: 197px;
  -o-object-fit: contain;
  object-fit: contain;
  height: auto;
  width: auto;
}

.creator-text {
  font-size: 16px;
}
.org-section{
  border-radius: 0;
}
.inst-wrapper{
  border-radius: 0;
}
.inst-container {
  margin-top: 97px;
}
.inst-wrapper {
  padding: 122px 0 66px 0;
}
.btn.inst {
  padding: 18px 32px;
}
.left-gram {
  top: auto;
  left: -3.7%;
  bottom: 12.5%;
  width: 47.95px;
  height: 47.96px;
}
.like-gram {
  top: auto;
  left: 1.3%;
  bottom: 36%;
  width: 44.96px;
  height: 37.2px;
}
.apple-gram {
  top: auto;
  left: 4.6%;
  bottom: 50%;
  width: 60.4px;
  height: 63px;
}
.right-gram {
  right: 2.7%;
  bottom: 35%;
  width: 35.88px;
  height: 35.89px;
}
.broc-gram {
  top: auto;
  right: -6%;
  bottom: 11%;
  width: 66.57px;
  height: 66.1px;
}
.like2-gram {
  right: 0;
  bottom: 52%;
  width: 52.38px;
  height: 41.61px;
}
.grape-gram{
  display: none;
}
.why-join-item {
  margin-right: 0;
}
.test-under-container {
  margin: 0 auto;
}
/* .input-box-wrapper{
  padding-bottom: 15px;
  margin-bottom: 0px;
}
.reg-test-btn{
  margin: 0 15px 0 0 !important;
}
.reg-test-btn>span{
  font-size: 12px;
} */
}