#loading-screen,
#splash-screen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-size: cover;
  background-position: 50% 50%;

  .logo {
    position: absolute;
    max-width: 90%;
    max-height: 70%;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
  }

  .loading-bar-background {
    position: absolute;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    max-width: 80%;
    max-height: 25%;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 75%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;

    .loading-bar-fill {
      max-width: 15%;
      max-height: 37%;
    }
  }

}

#splash-screen {

  .splash-preview {
    position: absolute;
    font-family: @font-family;
    color: #fae522;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 45%;
    opacity: 0;
    transform: translate(-50%, -50%);

    height: 75%;
    width: 40%;

    @media @portrait {
      top: 53%;
      height: 60%;
      width: 90%;
    }

    img {
      max-height: 90%;
      max-width: 100%;
    }

    div {
      position: absolute;
      top: 90%;
      height: 15%;
      text-align: center;
      text-transform: uppercase;
      word-wrap: break-word;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3.5vh;

      @media (max-width: 500px) {
        font-size: 2.5vh;
      }
    }
  }

  .splash-preview-1 {
    left: 22.5%;

    @media @portrait {
      left: 50%;
    }

  }

  .splash-preview-2 {
    left: 77.5%;

    @media @portrait {
      left: 50%;
    }

  }

  .splash-preview-3 {
    left: 77.5%;

    @media @portrait {
      left: 50%;
    }

  }

  .click-to-continue {
    position: absolute;
    font-family: @font-family;
    text-transform: uppercase;
    text-align: center;
    color: white;
    font-size: 4vh;
    width: 100%;
    top: 120%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;

    @media (max-width: 500px) {
      font-size: 3vh;
    }
  }

  cursor: pointer;

  .logo,
  .loading-bar-background,
  .splash-preview,
  .click-to-continue {
    animation-duration: 0.75s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
  }

  .logo {
    animation-name: logoAnimation;
  }

  .loading-bar-background {
    animation-name: loadingBarAnimation;
  }

  .splash-preview-1 {
    animation-name: fadeIn, fadeLoop;
    animation-iteration-count: 1, 0;
    animation-duration: 0.6s, 6s; // 10%, 100%
    animation-delay: 0.75s, 2.55s; // initialDelay, initialDelay + 30% (10% from 1st animation and 20% waiting)

    @media @portrait {
      animation-iteration-count: 1, infinite;
      animation-duration: 0.67s, 9.99s; // 6.67%, 100%
      animation-delay: 0.75s, 2.75s; // initialDelay, initialDelay + 20% (6.67% from 1st animation and 13.33% waiting)
    }

  }

  .splash-preview-2 {
    animation-name: fadeIn, fadeLoop;
    animation-iteration-count: 1, infinite;
    animation-duration: 0.6s, 6s; // 10%, 100%
    animation-delay: 0.75s, 2.55s; // initialDelay, + 30% (10% from 1st animation and 20% waiting)

    @media @portrait {
      animation-duration: 0.67s, 9.99s; // 6.67%, 100%
      animation-delay: 4.08s, 6.08s; // initialDelay, initialDelay + 20% (6.67% from 1st animation and 13.33% waiting)
    }

  }

  .splash-preview-3 {
    animation-name: fadeIn, fadeLoop;
    animation-iteration-count: 1, infinite;
    animation-duration: 0.6s, 6s; // 10%, 100%
    animation-delay: 3.75s, 5.55s; // initialDelay + 50% offset, + 30% (10% from 1st animation and 20% waiting)

    @media @portrait {
      animation-duration: 0.67s, 9.99s; // 6.67%, 100%
      animation-delay: 7.41s, 9.41s; // initialDelay, initialDelay + 20% (6.67% from 1st animation and 13.33% waiting)
    }

  }

  .click-to-continue {
    animation-name: clickToContinueTransitionAnimation, clickToContinueAlphaAnimation;
    animation-duration: 0.75s, 0.5s;
    animation-delay: 1s, 1s;
    animation-iteration-count: 1, infinite;
    animation-direction: normal, alternate;
  }


  @media @landscape {
    @keyframes logoAnimation {
      0% {
        max-height: 70%;
        top: 35%;
      }

      100% {
        max-width: 25%;
        top: 45%;
      }
    }

  }

  @media @portrait {

    @keyframes logoAnimation {
      0% {
        max-height: 70%;
        top: 35%;
      }

      100% {
        max-height: 35%;
        top: 17.5%;
      }
    }
  }

  @keyframes loadingBarAnimation {
    0% {
      opacity: 1;
      top: 75%;
    }

    100% {
      opacity: 0;
      top: 120%;
    }
  }

  @keyframes clickToContinueTransitionAnimation {
    0% {
      opacity: 0;
      top: 120%;
    }

    100% {
      opacity: 1;
      top: 95%;
    }
  }

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

    100% {
      opacity: 0.7;
    }

  }

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

    100% {
      opacity: 1;
    }
  }

  @media @landscape {

    @keyframes fadeLoop {

      0%,
      20% {
        opacity: 1;
      }

      30%,
      70% {
        opacity: 0;
      }

      80%,
      100% {
        opacity: 1;
      }
    }

  }

  @media @portrait {

    @keyframes fadeLoop {

      0%,
      13.33% {
        opacity: 1;
      }

      20%,
      80% {
        opacity: 0;
      }

      86.67%,
      100% {
        opacity: 1;
      }
    }
  }

}