/* AGE-GATE START */
  .age-gate {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /*height: 100vh;
    height: 100svh;*/
    height: 125rem;
    background: var(--c-red);
    overflow: hidden;
    & [class*="__wrap"] {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      padding-top: 7.9375rem;
      width: 100%;
      height: 100%;
    }
    & [class*="__block"] {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      margin-bottom: 2.375rem;
      padding-top: 2.875rem;
      width: 128.438rem;
      height: 66.5rem;
      text-align: center;
      background: url('../img/age-gate/block.png') no-repeat 50%/contain;
      z-index: 10;
      & .age-gate__bird {
        content:'';
        position: absolute;
        bottom: 3.875rem;
        left: 50%;
        width: 9.8125rem;
        transform: translateX(-50%);
      }
      & .logo {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 12.5rem;
        & img { width: 10.1875rem; }
      }
      & h1 {
        margin-bottom: 3.75rem;
        color: var(--c-black);
        font-size: 8.75rem;
        line-height: 10.125rem;
        letter-spacing: 0.001em;
        text-transform: uppercase;
      }
      & .btns {
        display: flex;
        justify-content: space-between;
        padding: 0 12.5rem;
        width: 100%;
        & a {
          display: inline-block;
          position: relative;
          font-size: 21rem;
          line-height: 1;
          letter-spacing: 0.001em;
          text-decoration: none;
          text-transform: uppercase;
          &:nth-child(1) { color: var(--c-black); }
          &::after {
            content:'';
            display: none;
            position: absolute;
            bottom: -1.25rem;
            left: 0;
            width: 100%;
            height: 0.4375rem;
          }
          &:nth-child(1)::after { background: var(--c-black); }
          &:nth-child(2)::after { background: var(--c-white); }
          /*&:hover::after { display: block; }*/
          &:nth-child(2)::after { display: block; }
        }
      }
    }
    & [class*="__foot"] {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 auto;
      width: 128.438rem;
      & p {
        margin: 0;
        color: var(--c-black);
        font-size: 3.25rem;
        line-height: 1;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }
      & picture { width: 28.125rem; opacity: 0.5; }
    }
  }

  .age-gate__none {
    & .age-gate__block {
      &::after { display: none; }
      & h1 { padding-top: 12.5rem; font-size: 21rem; }
    }
  }
/* AGE-GATE END */

/* KV START */
  .kv {
    position: relative;
    margin: 0 auto;
    max-width: 320rem;
    height: 107.75rem;
    background: url('../img/kv/bg.png') no-repeat 50% 0%/cover;
    overflow: hidden;
    & .container { padding: 0 30.625rem; height: 100%; }
  }

  .kv__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    padding-top: 14.875rem;
    transition: 2s;
    z-index: 5;
    & h1 {
      display: inline-flex;
      align-items: flex-start;
      justify-content: flex-start;
      margin: 0;
      font-size: 20.5rem;
      line-height: 18rem;
      transform: translateX(-200%);
      transition: 1s;
    }
    & img {
      position: absolute;
      top: 15rem;
      left: 31.375rem;
      width: 27.625rem;
    }
  }

  .body-loaded .kv__text h1 { transform: translateX(0%); }

  .kv__grass {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    & img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
  }

  .kv__ball {
    position: absolute;
    top: 64.6875rem;
    right: 57.375rem;
    width: 32.1875rem;
    height: 32.1875rem;
    transition: 3s;
    transform: translateX(-300%);
    z-index: 1;
    & img { display: block; position: absolute; }
    & img:nth-child(1) { top: 0; left: 0; width: 100%; height: 100%; z-index: 1; transition: 3s; transform: rotate(-360deg); }
    & img:nth-child(2) {
      position: absolute;
      bottom: -1.5rem;
      right: 9.5rem;
      width: 25.3125rem;
      height: 4.6875rem;
      z-index: 2;
    }
  }

  .body-loaded .kv__ball  img:nth-child(1) { transform: rotate(0deg); }
  .body-loaded .kv__ball { transform: translateX(0%); }

  .kv__bottle {
    position: absolute;
    top: 9.375rem;
    right: 37.5rem;
    width: 27.25rem;
    z-index: 2;
  }

  .kv__non {
    position: absolute;
    top: 13.75rem;
    right: 9.25rem;
    width: 27.8125rem;
    transition: 2s;
    opacity: 0;
  }

  .body-loaded .kv__non { opacity: 0.5; }
/* KV END */

/* GOAL START */
  .goal {
    position: relative;
    z-index: 5;
    & .container { position: relative; padding: 0 30rem; height: 100%; }
    & h1 {
      display: flex;
      flex-wrap: wrap;
      position: relative;
      margin: -6.875rem 0 18.75rem;
      width: 100%;
      font-size: 39.625rem;
      line-height: 32rem;
      letter-spacing: 0.003em;
      text-transform: uppercase;
      white-space: wrap;
      word-break: break-all;
      z-index: 10;
    }
    & h2 {
      margin: 0;
      color: var(--c-black);
      font-size: 12.625rem;
      line-height: 12.375rem;
      text-transform: uppercase;
    }
    & picture {
      position: absolute;
      bottom: 0.3125rem;
      right: 29.875rem;
      width: 71.875rem;
      transform: translate(0, 50%);
    }
  }

  .goal-title span {
    opacity: 0;
    transition: opacity .1s linear;
  }
/* GOAL END */

/* PARTNERS START */
  .partners {
    padding: 0.9375rem 0 0;
    background: var(--c-white);
    & .container { position: relative; padding: 0 0 0 30.625rem; height: 100%; }
    & h3 {
      position: relative;
      margin-bottom: 23rem;
      color: var(--c-red);
      font-size: 12.625rem;
      line-height: 12.375rem;
      z-index: 9;
      & span {
        opacity: 0;
        transform: translateY(2rem);
        transition: all 0.3s linear;
        &.active {
          opacity: 1;
          transform: translateY(0);
        }
      }
    }
    & h4 {
      margin-bottom: 0;
      color: var(--c-red);
      font-size: 30.125rem;
      line-height: 28.625rem;
    }
    & .partners__rf { display: block;  margin-bottom: 37.625rem; width: 105.5rem; }
    & .partners__logos {
      display: block;
      position: absolute;
      top: 50.875rem;
      right: 29.0625rem;
      width: 17.4375rem;
      & a img { display: block; width: 100%; }
      & a { position: absolute; left: 50%; transform: translateX(-50%); transition: 1s; opacity: 0; }
      & a.active { opacity: 1; }
      & a:nth-child(1) { top: 0; width: 17.4375rem; }
      & a:nth-child(2) { top: 29.75rem; width: 17rem; }
      & a:nth-child(3) { top: 56.375rem; width: 15.25rem; }
    }
    & h5 {
      margin-bottom: 0;
      color: var(--c-red);
      font-size: 18.625rem;
      line-height: 1;
      text-align: center;
      opacity: 0;
      transition: 1s;
      &.active { opacity: 1; }
    }
  }
/* PARTNERS END */

/* EFIR START */
  .efir {
    display: flex;
    align-items: center;
    position: relative;
    height: 42.5rem;
    background: #110f0f;
    & .container { padding: 0 30.625rem; }
    & h2 {
      margin: 0;
      padding-top: 5rem;
      color: var(--c-red);
      font-size: 52.875rem;
      line-height: 42.5rem;
      opacity: 0;
      transition: 1s;
    }
    &.active h2 { opacity: 1; }
    & .efir__leto {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      position: absolute;
      top: 50%;
      right: 30.625rem;
      width: 13.375rem;
      height: 37.1875rem;
      transform: translateY(-50%);
      & p {
        margin: 0;
        color: var(--c-red);
        font-size: 10rem;
        text-transform: uppercase;
      }
      & i {
        display: block;
        width: 1.25rem;
        height: 15rem;
        background: #fff;
      }
    }
  }
/* EFIR END */

/* MATCH START */
  .match {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44rem;
    background: var(--c-white);
    & picture { display: block; width: 119.25rem; }
  }
/* MATCH END */

/* TECHNOLOGY START */
  .technology {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 131.875rem;
    background: var(--c-red);
    & .technology__block { position: relative; }
    & .technology__bg { display: block; width: 119.375rem; & img { position: relative; opacity: 1; } }
    & img { position: absolute; transition: 1s; opacity: 0; object-fit: contain; object-position: 50% 100%; }
    & .technology__title { top: 27.1875rem; left: 21.875rem; width: 27.6875rem; }
    & .technology__text { bottom: 0; left: 20rem; width: 2.5625rem; height: 18.75rem; }
    & .technology__deg { bottom: -2.5rem; left: 25.8125rem; width: 23.875rem; }
    & img.active { opacity: 1; }
  }
/* TECHNOLOGY END */

/* VIDEO START */
  .video {
    margin: 0 auto;
    padding: 9.25rem 0 0;
    max-width: 320rem;
    height: 105.75rem;
    background: url('../img/video-bg.png') no-repeat 50%/cover;
    & h2 {
      margin-bottom: 8.875rem;
      color: var(--c-white);
      font-size: 10.25rem;
      line-height: 1;
      text-align: center;
    }
    & .video__wrap {
      position: relative;
      margin: 0 auto;
      width: 87.5rem;
      height: 46.875rem;
      overflow: hidden;
      & video {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        z-index: 0;
        &.played { opacity: 1; }
      }
      & .video__cover {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--c-black);
        z-index: 1;
        & img {
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      & .video__play {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 6.5rem;
        height: 9.5625rem;
        background: url('../img/play.png') no-repeat 50%/contain;
        transform: translate(-50%, -50%);
        cursor: pointer;
        z-index: 2;
        &:hover { cursor: pointer; }
      }
    }
  }
/* VIDEO END */

/* WATCH START */
  .watch {
    padding: 21.25rem 0 18.75rem;
    background: var(--c-white);
    & .container { padding: 0 30.625rem; }
    & h2 {
      margin-bottom: 12.25rem;
      color: var(--c-black);
      font-size: 10.25rem;
      line-height: 10rem;
      & i { color: var(--c-red); }
    }
  }

  @media (min-width: 1281px) {
    .watch {
      & .watch__logos {
        position: relative;
        width: 119.562rem;
        height: 34.5625rem;
        & img { display: block; position: absolute; opacity: 0; transform: scale(0); transition: 1s; }
        & .active { opacity: 1; transform: scale(1); }
        /*& img:nth-child(1) { top: 0; left: 1.25rem; width: 28.25rem; }*/
        & img:nth-child(1) { top: 0; left: 41.25rem; width: 28.25rem; }
        /*& img:nth-child(2) { top: 1.8125rem; right: 0; width: 74.25rem; }*/
        & img:nth-child(2) { bottom: 0; left: 0; width: 48.75rem; }
        & img:nth-child(3) { bottom: 0.75rem; right: 0.5rem; width: 51.25rem; }
      }
    }
  }
/* WATCH END */

/* BUY START */
  .buy {
    position: relative;
    height: 209rem;
    & .container { padding: 24.375rem 30.625rem 0; }
  }

  .buy__bird {
    position: absolute;
    top: 0;
    left: 0;
    width: 167.5rem;
    width: 52.34375vw;
    transform: translateX(-100%);
    transition: 0.6s;
    &.active { transform: translateX(0%); }
  }

  .buy__title {
    display: block;
    margin-left: auto;
    margin-bottom: 8.75rem;
    width: 41.375rem;
  }

  .buy__logos {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 0 auto 9.75rem;
    width: 119.375rem;
    /*height: 20.875rem;*/
  }

  .buy__logos img { display: block; position: relative; }

  .buy__logos .ashan { width: 22rem; }
  .buy__logos .rostick { width: 33.75rem; }
  .buy__logos .metro { width: 23.5rem; }

  .buy p {
    display: block;
    margin: 0 auto;
    width: 100%;
    color: #161616;
    font-size: 5rem;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
  }

  .buy__ball {
    display: block;
    position: absolute;
    top: 86rem;
    right: 34rem;
    width: 80rem;
    height: 80rem;
  }

  .buy__ball img {
    display: block;
    position: absolute;
    object-fit: contain;
  }

  .buy__ball .hands,
  .buy__ball .shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: none !important;
    transition-delay: 0.65s;
  }

  .buy__ball .ball {
    top: -40rem;
    left: -110rem;
    width: 34rem;
    height: 34rem;
    transition: 2s;
  }

  .buy__ball.active .ball { top: 1.5rem; left: 4.6875rem; }

  .buy__ball .hands { opacity: 1; }
  .buy__ball .shadow { opacity: 0; }

  .buy__ball.active .hands { opacity: 0; }
  .buy__ball.active .shadow { opacity: 1; }

  .buy__ball.active .hands,
  .buy__ball.active .shadow { animation: hands__anim 0.75s linear forwards; }

  @keyframes hands__anim {
    0% { transform: translate(0%, 0%); }
    93% { transform: translate(0%, 0%); }
    96% { transform: translate(0%, 1%); }
    100% { transform: translate(0%, 0%); }
  }

  .buy__ball.active .ball { animation: ball__fly 0.75s linear forwards; }

  @keyframes ball__fly {
    0% { top: -40rem; left: -110rem; }
    93% { top: 1.5rem; left: 4.6875rem; transform: scaleY(1); }
    96% { top: 1.5rem; left: 4.6875rem; transform: scaleY(0.9); }
    100% { top: 1.5rem; left: 4.6875rem; transform: scaleY(1); }
  }
/* BUY END */

/* FOOTER START */
  .footer {
    position: relative;
    margin-top: -130rem;
    height: 160.125rem;
    background: url('../img/footer-bg.png') no-repeat 50%/cover;
    pointer-events: none;
    z-index: 1;
    & .container { padding: 66.875rem 30.625rem 0; }
    & .footer__non {
      display: block;
      margin-left: auto;
      margin-bottom: 15.625rem;
      width: 28.9375rem;
      opacity: 0.5;
      pointer-events: auto;
    }
    & .footer__bot {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      pointer-events: auto;
      & p {
        margin: 0;
        color: var(--c-white);
        font-size: 3.375rem;
        line-height: 4.375rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        &:first-of-type { text-align: left; }
        &:last-of-type { text-align: right; }
        & a { color: var(--c-white); text-decoration: none; }
      }
      & img { display: block; margin: 0 auto; width: 4.875rem; }
    }
  }
/* FOOTER END */