#splash-screen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url("../assets/common/loading/splashscreen_desktop.png");
  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;
    }
  }

  .splash-logo {
    position: absolute;
    background-image: url("../assets/common/loading/logo_horisontal.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 48%;
    top: 5%;
    width: 100%;
    height: 20%;

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

  .features-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 75%;

    @media @portrait {
      flex-direction: column-reverse;
      height: 68%;
    }

    @media (max-aspect-ratio: 2/3) {
      height: 72%;
    }

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

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

      .feature-image {
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        height: 35vw;
        max-height: 70%;

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

      &.freespins .feature-image {
        background-image: url("../assets/common/splashscreen_image_left.png");
      }

      &.respins .feature-image {
        background-image: url("../assets/common/splashscreen_image_right.png");
      }

      .feature-text {
        background: -webkit-linear-gradient(#ffd40a, #fff80a);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        
        font-family: @font-family;
        font-size: 4.5vmin;
        filter: drop-shadow(-0.9px 6.94px #030619);
        text-align: center;

        @media @portrait {
          margin-top: -2%;
        }
      }
    }
  }

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


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

    @media @portrait {
      bottom: 4%;
    }

    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;
    }
  }
}