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

  animation-name: fadeIn;
  animation-timing-function: linear;
  animation-duration: 0.2s;
  @titleShadow: #491600;
  @continueShadow: #491600;

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

    100% {
      opacity: 1;
    }
  }

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

    16.7% {
      opacity: 1;
    }

    20.7% {
      opacity: 0;
    }

    99% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  #frame-1-container div,
  #frame-2-container div {
    animation-name: mrFadeInOut;
    animation-iteration-count: infinite;
    animation-duration: 9s;
  }

  #frame-1-container div:nth-of-type(1),
  #frame-2-container div:nth-of-type(1) {
    animation-delay: 7.5s;
  }

  #frame-1-container div:nth-of-type(2),
  #frame-2-container div:nth-of-type(2) {
    animation-delay: 6s;
  }

  #frame-1-container div:nth-of-type(3),
  #frame-2-container div:nth-of-type(3) {
    animation-delay: 4.5s;
  }

  #frame-1-container div:nth-of-type(4),
  #frame-2-container div:nth-of-type(4) {
    animation-delay: 3s;
  }

  #frame-1-container div:nth-of-type(5),
  #frame-2-container div:nth-of-type(5) {
    animation-delay: 1.5s;
  }

  #frame-1-container div:nth-of-type(6),
  #frame-2-container div:nth-of-type(6) {
    animation-delay: 0s;
  }

  .logo {
    position: absolute;
    width: 40vw;
    height: 40vh;
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    background-image: url("../assets/common/loading/logo_volatile_vikings.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;

    @media @portrait {
      width: 80vw;
      min-width: 50vw;
      max-width: 95vw;
      max-height: 25%;
    }

    @media @landscape {
      max-width: 65vw;
      max-height: 35%;
    }
  }

  .splash-frame-1-1,
  .splash-frame-1-2,
  .splash-frame-1-3,
  .splash-frame-1-4,
  .splash-frame-1-5,
  .splash-frame-1-6,
  .splash-frame-2-1,
  .splash-frame-2-2,
  .splash-frame-2-3,
  .splash-frame-2-4,
  .splash-frame-2-5,
  .splash-frame-2-6 {
    position: absolute;
    width: 100%;
    height: 53%;
    top: 29%;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;

    @media (max-aspect-ratio: 4/3) {
      height: 36vw;
    }

    @media @portrait {
      max-height: 25%;
    }

    @media (max-aspect-ratio: 3/4) {
      max-height: none;
      height: 28%;
    }
  }

  .title-1 {
    @media @landscape {
      width: 48%;
      left: 1%;
      top: 76%;
    }

    @media @portrait {
      top: 49%;
      width: 100%;
      left: 0%;
      font-size: 5.5vmin;
    }
  }

  .title-2 {
    @media @landscape {
      width: 48%;
      left: 51%;
      top: 76%;
    }

    @media @portrait {
      top: 79%;
      width: 100%;
      left: 0%;
      font-size: 5.5vmin;
    }
  }

  .title-1,
  .title-2 {
    position: absolute;
    height: 25%;
    font-family: @font-family;
    font-size: 5vmin; 

    .top {
      background: -webkit-linear-gradient(#e93711, #f6cd2c);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      width: 100%;
      position: absolute;
      top: 2px;
      text-align: center;
      cursor: pointer;
    }

    .bottom {
      width: 100%;
      color: #fead00;
      -webkit-text-stroke: 0.3vmax @titleShadow;
      text-shadow: 0px 0.4vmax 0.2vmax rgba(0, 45, 84, 90%);
      text-align: center;
      position: absolute;
      top: 2px;
      text-align: center;
    }
  }

  .splash-frame-1-1,
  .splash-frame-1-2,
  .splash-frame-1-3,
  .splash-frame-1-4,
  .splash-frame-1-5,
  .splash-frame-1-6 {
    @media @landscape {
      left: -24%;
    }

    @media @portrait {
      top: 27%;
    }

    @media (max-aspect-ratio: 3/4) {
      top: 24%;
    }
  }

  .splash-frame-1-1 {
    background-image: url("../assets/common/loading/multi_reveal/multi1.png");
  }

  .splash-frame-1-2 {
    background-image: url("../assets/common/loading/multi_reveal/multi2.png");
    opacity: 0;
  }

  .splash-frame-1-3 {
    background-image: url("../assets/common/loading/multi_reveal/multi3.png");
    opacity: 0;
  }

  .splash-frame-1-4 {
    background-image: url("../assets/common/loading/multi_reveal/multi4.png");
    opacity: 0;
  }

  .splash-frame-1-5 {
    background-image: url("../assets/common/loading/multi_reveal/multi5.png");
    opacity: 0;
  }

  .splash-frame-1-6 {
    background-image: url("../assets/common/loading/multi_reveal/multi6.png");
    opacity: 0;
  }

  .splash-frame-2-1,
  .splash-frame-2-2,
  .splash-frame-2-3,
  .splash-frame-2-4,
  .splash-frame-2-5,
  .splash-frame-2-6 {
    @media @landscape {
      left: 25%;
    }

    @media @portrait {
      top: 58%;
    }

    @media (max-aspect-ratio: 3/4) {
      top: 54%;
    }
  }

  .splash-frame-2-1 {
    background-image: url("../assets/common/loading/win_cap/wincap1.png");
  }

  .splash-frame-2-2 {
    background-image: url("../assets/common/loading/win_cap/wincap2.png");
    opacity: 0;
  }

  .splash-frame-2-3 {
    background-image: url("../assets/common/loading/win_cap/wincap3.png");
    opacity: 0;
  }

  .splash-frame-2-4 {
    background-image: url("../assets/common/loading/win_cap/wincap4.png");
    opacity: 0;
  }

  .splash-frame-2-5 {
    background-image: url("../assets/common/loading/win_cap/wincap5.png");
    opacity: 0;
  }

  .splash-frame-2-6 {
    background-image: url("../assets/common/loading/win_cap/wincap6.png");
    opacity: 0;
  }

  .continue {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: @font-family;
    font-size: 4.4vmin;
    width: 100%;
    height: 5%;


    text-align: center;
    cursor: pointer;
    bottom: 6.6%;

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

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

      50% {
        opacity: 0.75;
      }

      100% {
        opacity: 1;
      }
    }

    .top {
      background: -webkit-linear-gradient(#44a2bf, #a6c5d1);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      width: 100%;
      position: absolute;
      top: 2px;
      text-align: center;
      cursor: pointer;
    }

    .bottom {
      width: 100%;
      color: #fead00;
      -webkit-text-stroke: 0.3vmax #002a55;
      text-shadow: 0px 0.3vmax 0.2vmax rgba(0, 45, 84, 90%);
      text-align: center;
      position: absolute;
      top: 2px;
      text-align: center;
    }
  }
}