@portrait1by3: ~"only screen and (orientation: portrait) and (max-aspect-ratio: 1/3)";

#loading-screen,
#splash-screen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url("../assets/common/loading/loading-bg.webp");
  background-size: cover;
  background-position: center;
}

#splash-screen {
  .logo {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
    top: 2%;
    width: 100%;
    height: 38%;

    @media @portrait {
      background-position: center center;
      top: 0%;
      height: 25%;
      max-width: 80%;
      margin-left: 10%;
    }
  }

  .features-container {
    display: flex;
    position: relative;
    flex-direction: row;
    top: 19%;
    width: 100%;
    height: 65%;

    @media @portrait {
      top: 26%;
      flex-direction: column;
      justify-content: space-between;
      height: 57%;
    }


    .feature-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 50%;
      height: 100%;

      @media @portrait {
        width: 100%;
        height: 42%;
      }

      .feature-image {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 auto;

        @media @landscape {
          width: 100%;
          height: 70%;
        }

        @media @portrait {
          width: 60%;
          height: 100%;
        }

        .feature-frame {
          position: absolute;
          height: 64%;
          margin-bottom: -4vh;

          @media @portrait {
            height: 42%;
            margin-bottom: -1%;
          }

          @media @portrait1by3 {
            width: 90%;
            height: auto;
            margin-bottom: 0;
          }
        }

        .feature-video {
          position: absolute;
          height: 45%;
          transform: translate(0.5%, 19%);

          @media @portrait {
            top: auto;
            height: 29%;
            transform: translateY(14.5%);
            margin-left: 0;
          }

          @media @portrait1by3 {
            width: 80%;
            height: auto;
            margin-bottom: 0;
          }
        }

        .videoPlay {
          background-image: 'none';
          background-position: center 63%;
          background-size: 30%;
          background-repeat: no-repeat;
          cursor: 'auto';
          pointer-events: 'none';
        }
      }

      .feature-text {
        position: relative;
        width: 90%;
        left: 5%;
        font-family: @font-family;
        font-size: 4.5vmin;
        color: #ECBD53;
        text-shadow: 0 0 1px #000000, 0 0 1px #000000, 0 0 1px #000000, 0 0 1px #000000;
        text-align: center;

        @media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 3/2) {
          font-size: 2.8vw;
        }

        @media @portrait {
          font-size: 3.5vmin;
        }

        @media (max-aspect-ratio: 2/3) {
          font-size: 4vmin;
        }

        @media (max-aspect-ratio: 4/7) {
          font-size: 5vmin;
        }
      }

      .feature-text-shadow,
      .feature-text-stroke {
        position: absolute;
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
      }

      .feature-text-shadow {
        text-shadow: 0 0.6vmin 0.3vmin #1f1f1fe8;
      }
    }
  }

  .continue {
    position: absolute;
    left: 50%;
    bottom: 5%;
    transform: translate(-50%, 0%);
    font-family: @font-family;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 3.5vmin;
    text-align: center;
    color: #81133a;

    animation-name: glow;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 0.6s;

    @keyframes glow {
      0% {
        opacity: 1;
      }

      50% {
        opacity: 0.5;
      }

      100% {
        opacity: 1;
      }
    }

    @media @portrait {
      bottom: 4%;
      font-size: 3vmin;
      width: 100%;
    }

    @media (max-aspect-ratio: 2/3) {
      font-size: 5vmin;
    }

    &.cont-gradient {
      width: 100%;
      background: -webkit-linear-gradient(#000000, #81133a);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}