#splash-screen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url("../assets/common/loading_and_splash/background_landscape.png");
  background-size: cover;
  background-position: 50% 80%;
  text-align: center;


  @media @portrait {
    background-image: url("../assets/common/loading_and_splash/background_portrait.png");
    background-position: 50% 60%;
  }

  img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-48%);
    z-index: 1;

    @media @landscape {
      top: 10%;
      max-height: 16vh;
      max-width: 50vw;
    }

    @media @portrait {
      top: 13%;
      max-width: 80vw;
      max-height: 14vh;
      transform: translate(-48%, -70%);
    }
  }

  .feature-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    animation-name: fadeIn;
    animation-timing-function: linear;
    animation-duration: 0.4s;

    @keyframes fadeIn {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    img {
      position: absolute;
      transform: translateY(-10.5%);
      max-width: 74%;
      max-height: 74%;
  
      @media @portrait {
        max-width: 80%;
        max-height: 80%;
      }
    }

    video {
      position: absolute;
      max-width: 68%;
      transform: translateY(-11.5%);
      max-height: 68%;

      @media @portrait {
        transform: translateY(-12%);
        max-width: 72%;
        max-height: 72%;
      }
    }

    .videoPlay {
      visibility: hidden;
      transform: translateY(-20%);
      opacity: 0.65;
      cursor: 'auto';
      pointer-events: 'none';
    }

    .p {
      position: absolute;
      font-family: @font-family;
      font-size: 4.5vmin;
      text-transform: uppercase;
      width: 100%;
      color: @orange;
      filter: drop-shadow(0vmin 0.2vmin @blue);
      -webkit-text-stroke: 0.2vmin @blue;
      max-width: 40vmin;
      top: 84%;
      word-wrap: break-word;

      @media @portrait {
        width: 80%;
        max-width: 90vw;
        font-size: 4.8vmin;
      }
    }

    @media @landscape {
      top: 30%;
      max-width: 50%;
      max-height: 50%;
    }

    @media @portrait {
      max-width: 90%;
      max-height: 30%;
    }

    &.feature-wrapper-left {
      @media @landscape {
        left: 51%;
        transform: translateX(-100%);
      }

      @media @portrait {
        top: 35%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    &.feature-wrapper-right {
      @media @landscape {
        right: 51%;
        transform: translateX(100%);
      }

      @media @portrait {
        top: 69%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .continue {
    position: absolute;
    bottom: 10%;
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
    font-family: @font-family;
    font-size: 4.2vmin;
    color: #ffffff;
    -webkit-text-stroke: 0.15vmin @blue;


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

    &:hover {
      cursor: pointer;
      animation: 0;
    }

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

      50% {
        opacity: 0.75;
      }

      100% {
        opacity: 1;
      }
    }
  }
}