#splash-screen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  @media @portrait {
    background-position: center center;
  }
  background-size: cover;
  background-position: center;

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

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

    100% {
      opacity: 1;
    }
  }

  .logo {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    
    top: 2vh;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);

    width: 55vh;
    height: 55vh;
    max-width: 30%;

    @media @portrait {
      background-position: center center;
      top: 4.5%;
      height: 20%;
      max-width: 55vh;
    }
  }

  .features-container {
    position: relative;
    display: flex;
    flex-direction: row;
    height: 70%;
    top: 5%;
    @media @portrait {
      flex-direction: column-reverse;
      height: 65%;
      top: 0vh;
    }

    @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: 45%;
        top: -5%;
        position: relative;
      }

      .feature-image {
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        height: 35vw;
        max-height: 75%;
        @media @portrait {
          height: 90%;
          max-height: 90%;
        }
      }

      .feature-text {
        @fontSize: 5vmin;

        font-family: @font-family;
        font-size: @fontSize;
        color: #ffc437;
        text-shadow: 2px 3px #000047;
        -webkit-text-stroke: 1px #000047;
        text-align: center;
        margin-top: -5%;

        @media @portrait {
          -webkit-text-stroke: 0px;
        }
        @media @mobile {
          -webkit-text-stroke: 0px;
        }
      }
    }

    .feature-divider {
      display: none;

      @media @portrait {
        top: -3%;
        position: relative;
        display: block;
        height: 3px;
        width: 80%;
        margin-left: 10%;
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#ffffff), to(transparent));
        background-image: -webkit-linear-gradient(180deg, transparent, #ffffff, transparent);
        background-image: -moz-linear-gradient(180deg, transparent, #ffffff, transparent);
        background-image: -o-linear-gradient(180deg, transparent, #ffffff, transparent);
        background-image: linear-gradient(90deg, transparent, #ffffff, transparent);
      }
    }
  }

  .continue {
    @fontSize: 4vmin;

    position: absolute;
    left: 50%;
    font-weight: 500;
    transform: translateX(-50%);
    font-family: @font-family;
    font-size: @fontSize;
    color: #d2dbe4;
    
    text-align: center;
    cursor: pointer;
    bottom: 12%;
    @media @portrait {
      bottom: 8%;
    }
    animation-name: glow;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 1s;

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

      50% {
        opacity: 0.5;
      }

      100% {
        opacity: 1;
      }
    }
  }
}