/*
    Media Queries
*/
@media only screen and (max-width: 1400px) {
  #loader.load .loading {
    top: 34%;
    -webkit-transform: translate(-50%, -40%);
    -ms-transform: translate(-50%, -40%);
    transform: translate(-50%, -40%);
  }

  .input-fields > * {
    margin: 5px auto;
  }

  .input-fields .heading {
    font-size: 60px;
    margin-bottom: 20px;
  }

  .ayo-logo {
    height: 210px;
    width: 150px;
  }

  .ayo-logo .eye {
    height: 20px;
    width: 20px;
  }

  .ayo-logo .eye.left {
    left: 37%;
  }

  .ayo-logo .eye.right {
    height: 30px;
    width: 30px;
    right: 37%;
  }

  .ayo-logo .eyes.e-blink .left {
    -webkit-animation: eyeLBlink2 0.4s cubic-bezier(0.76, 0.05, 0.86, 0.06) 0.5s
      alternate 4;
    animation: eyeLBlink2 0.4s cubic-bezier(0.76, 0.05, 0.86, 0.06) 0.5s
      alternate 4;
  }

  .ayo-logo .eyes.e-blink .right {
    -webkit-animation: eyeRBlink2 0.4s cubic-bezier(0.76, 0.05, 0.86, 0.06) 0.5s
      alternate 4;
    animation: eyeRBlink2 0.4s cubic-bezier(0.76, 0.05, 0.86, 0.06) 0.5s
      alternate 4;
  }

  .ayo-logo .eyes.e-stare .left {
    -webkit-animation: eyeShrink2 2s ease alternate 2;
    animation: eyeShrink2 2s ease alternate 2;
  }

  .ayo-logo .eyes.e-stare .right {
    -webkit-animation: eyeEnlarge2 2s ease alternate 2;
    animation: eyeEnlarge2 2s ease alternate 2;
  }

  .ayo-logo .eyes.e-llook .left {
    -webkit-animation: eyeLLLook2 2s ease alternate 2;
    animation: eyeLLLook2 2s ease alternate 2;
  }

  .ayo-logo .eyes.e-llook .right {
    -webkit-animation: eyeLRLook2 2s ease alternate 2;
    animation: eyeLRLook2 2s ease alternate 2;
  }

  .ayo-logo .eyes.e-rlook .left {
    -webkit-animation: eyeRLLook2 2s ease alternate 2;
    animation: eyeRLLook2 2s ease alternate 2;
  }

  .ayo-logo .eyes.e-rlook .right {
    -webkit-animation: eyeRRLook2 2s ease alternate 2;
    animation: eyeRRLook2 2s ease alternate 2;
  }

  .text-output {
    font-size: 30px;
  }

  .btn-texted .text {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .btn-start {
    font-size: 30px;
    height: 48px;
    width: 127px;
    margin-top: 20px;
  }

  .btn-go {
    height: 100px;
    width: 100px;
    font-size: 40px;
  }
}

@media only screen and (max-width: 1024px) {
  .video-controls {
    height: 81px;
  }

  .video-controls .btn-pp {
    width: 60px;
    height: 61px;
  }

  .video-controls .btn-speaker {
    top: 43%;
    height: 40px;
    width: 45px;
  }

  .pause-slide .option {
    height: 70px;
  }

  .option .btn-shift {
    width: 70px;
    height: 70px;
  }
}

@media only screen and (max-width: 900px) {
  .btn-go {
    height: 80px;
    width: 80px;
    font-size: 30px;
  }
}

@media only screen and (max-width: 768px) {
  .btn-go {
    height: 80px;
    width: 80px;
    font-size: 30px;
  }
}

@media only screen and (max-width: 600px) {
  .btn-top {
    height: 40px;
    width: 40px;
  }

  #info-slide .information {
    font-size: 15px;
  }

  .btn-go {
    height: 60px;
    width: 60px;
    font-size: 20px;
  }

  .video-controls {
    height: 61px;
  }

  .video-controls .btn-pp {
    width: 40px;
    height: 40px;
  }

  .video-controls .btn-speaker {
    width: 33px;
    height: 30px;
  }

  .option .btn-shift {
    width: 50px;
    height: 50px;
  }

  .pause-slide .option {
    height: 50px;
  }

  .browser-message {
    font-size: 15px;
  }
}

@media only screen and (max-width: 480px) {
  .btn-go {
    height: 10vw;
    width: 10vw;
    font-size: 3vw;
  }
}

@media only screen and (max-width: 480px) and (orientation: portrait) {
  /*    #stage-2 {
        transform: rotate(-90deg);
        transform-origin: left top;
        width: 100vh;
        overflow-x: hidden;
        position: absolute;
        top: 100%;
        left: 0;
    }*/
}

@media only screen and (max-height: 400px) and (orientation: landscape) {
  #stage-1 .ayo-logo {
    display: none;
  }

  .input-fields > * {
    margin: 0 auto;
  }
}

/*@media only screen and (max-width: 320px) {*/

/*}*/