/* ==========================================================================
   KCL Resilience
   ========================================================================== */

#kcl {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
  /* START MENU */
  #menu {
    width: 720px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  }
    #menu h1 {
      font-size: 45px;
      font-weight: 400;
      color: #414f59;
      margin-top: 0px;
    }
    #menu-start {
      display: block;
      margin: 100px auto 100px auto;
      background: #414f5a;
      width: 480px;
      height: 100px;
      border: none;
      border-radius: 5px;
      color: #FFF;
      font-size: 30px;
      transition: all 0.3s ease;
      cursor: default;
    }
      #menu-start:hover { background: #414f5a !important; }
      #menu-start.enabled { background: #0092e5; cursor: pointer; }
    #menu p { color: #626c72; font-size: 20px; }
    #menu > a { display: inline-block; margin: 0 auto 50px auto; padding: 0px 45px; height: 94px; }
    #menu span#copyright { font-size: 12.5px; color: #626c72; font-weight: 300; display: block; }
      #menu span#copyright a { color: #414f59; }
  #terms-modal {
    position: relative;
    background: #FFF;
    width: auto;
    max-width: 900px;
    margin: 20px auto;
    padding: 5%;
    border-radius: 15px;
  }
    #modal-scroll{
      overflow-y: scroll;
      max-height: 500px;
      padding: 0 3% 0 0;
    }
  /* INTRO SLIDER */
  #intro {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
    background: rgba(13,152,230,0.95);
  }
    #intro-inner {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -450px;
      margin-top: -210px;
      background: #FFF;
      padding: 130px 200px 0 200px;
      border-radius: 15px;
      width: 900px;
      height: 500px;
      opacity: 0;
    }
      #intro-scroll {}
        #intro-scroll li { height: 250px; color: #626c72; font-size: 22.5px; }
      #intro-next, #intro-start {
        background: #0092e5;
        display: block;
        margin: 0 auto;
        width: 306px;
        height: 90px;
        border-radius: 5px;
        border: none;
        font-size: 25px;
        transition: all 0.3s ease;
        position: relative;
        top: -140px;
      }
        #intro-next a {
          color: #FFF;
          text-decoration: none;
          display: block;
          height: 100%;
          line-height: 85px;
        }
        #intro-next:hover { background: #414f5a; }
      #intro-start {
        display: none;
        color: #FFF;
      }
        #intro-start:hover { background: #414f5a; }
  /* COMMON SCENARIO STYLES */
  #scenario {
    display: none;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
  }
    #scenario #scenario-intro {
      display: none;
      height: 100vh;
      position: relative;
    }
      #scenario-intro #scenario-intro-title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform:translate(-50%, -50%);
        -webkit-transform:translate(-50%, -50%);
        margin-top: 40px;
      }
        #scenario-intro-title h1 {
          color: #FFF;
          font-weight: 400;
          font-size: 45px;
          line-height: 125%;
          width: 100%;
          margin: 0;
          opacity: 0;
          position: relative;
          top: 0;
        }
        #scenario-intro-title h2 {
          color: #FFF;
          font-size: 45px;
          line-height: 125%;
          width: 100%;
          font-weight: 300;
          margin: 0;
          opacity: 0;
          position: relative;
          top: 0;
        }
      #scenario #scenario-intro-anim {
        /*display: none;*/
        opacity: 0;
        width: 100%;
        height: 100%;
        padding: 30px;
        position: absolute;
        left: 0;
        z-index: 0;
        background: #FFF;
      }
        #scenario #scenario-intro-anim img, #scenario #scenario-intro-anim div { animation-play-state: paused; }
      #scenario #s1-intro {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 2;
        background: rgba(13,152,230,0.95);
      }
        #scenario #s1-intro-inner {
          position: absolute;
          left: 50%;
          top: 50%;
          margin-left: -450px;
          margin-top: -250px;
          background: #FFF;
          padding: 90px 96px;
          border-radius: 15px;
          width: 900px;
          height: 500px;
          font-size: 22.5px;
          color: #626c72;
        }
          #scenario #s1-continue {
            background: #0092e5;
            color: #FFF;
            display: block;
            margin: 80px auto 0 auto;
            width: 306px;
            height: 90px;
            border-radius: 5px;
            border: none;
            font-size: 25px;
            transition: all 0.3s ease;
          }
            #scenario #s1-continue:hover { background: #414f5a; }
    #scenario #question-holder {
      width: 100%;
      height: 100%;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 2;
      background: rgba(13,152,230,0.95);
      display: none;
    }
    #scenario #question {
      color: #FFF;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      width: 900px;
      z-index: 1;
    }
      #scenario #question p {
        margin-bottom: 30px;
        font-size: 22.5px;
        margin-top: -40px;
        opacity: 0;
      }
      #scenario #answers {
        padding: 0;
      }
        #scenario #answers li {
          height: 106px;
          background: #FFF;
          padding: 22px;
          margin-bottom: 17px;
          border-radius: 10px;
          color: #626c72;
          font-size: 22.5px;
          list-style: none;
          cursor: pointer;
          position: relative;
          opacity: 0;
          top: -40px;
          transition: background-color 0.2s ease;
        }
          #scenario #answers li:hover { background: #414f5a; color: #FFF; }
          #scenario #answers li input { display: none; }
          #scenario #answers .description, #scenario #answers .correct { opacity: 0; margin-left: 20px; }
          #scenario #answers .answer {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            width: 100%;
            padding: 0 22px;
          }
          #scenario #answers li.active {
            background: #1a2d3b !important;
            color: #FFF;
            cursor: default;
          }
            #scenario #answers li .check {
              width: 66px;
              height: 66px;
              position: absolute;
              top: 50%;
              left: 0;
              transform: translate(-50%, -50%) scale(0);
              -webkit-transform: translate(-50%, -50%) scale(0);
              transition: all 0.2s;
              opacity: 0;
            }
              #scenario #answers li .check img { width: 100%; }
              #scenario #answers li.active .check.checkActive { transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); opacity: 1; }
            #scenario #answers li .correct {
              color: #13e46b;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              -webkit-transform: translate(-50%, -50%);
              width: 100%;
              padding: 0 33px;
            }
            #scenario #answers li.active strong { color: #fdbc0b; }
          #scenario #answers li.inactive { cursor: default; background: #414f5a; color: #FFF; }
    #scenario #continue {
      opacity: 0;
      background: #FFF;
      color: #0092e5;
      width: 306px;
      height: 90px;
      border-radius: 5px;
      border: none;
      font-size: 25px;
      margin: 15px auto 0 auto;
      transition: background-color 0.3s ease;
    }
      #scenario #continue:hover { background: #414f5a; color: #FFF; }
      #scenario #continue:focus { outline: none; }
    #scenario #question-number {
      opacity: 0;
      color: #FFF;
      position: fixed;
      bottom: 2%;
      right: 2%;
      font-size: 20px;
    }

/* OUTRO */
#outro {
  display: none;
}
  #outro-1 {
    text-align: left;
    height: 100vh;
    max-width: 640px;
    margin: 0 auto;
    position: relative;
  }
    #outro-1-content {
      position: absolute;
      top: 50%;
      left: 0%;
      padding: 0 5%;
      transform: translate(0%, -50%);
      -webkit-transform: translate(0%, -50%);
    }
      #outro-1 h2 {
        font-size: 35px;
        font-weight: 300;
        color: #FFF;
        margin-top: 0;
      }
      #outro-1 p {
        color: #FFF;
        font-size: 25px;
        margin-bottom: 0;
      }
  #outro-2 {
    display: none;
    text-align: left;
    height: 100vh;
    max-width: 640px;
    margin: 0 auto;
    position: relative;
  }
    #outro-2-content {
      position: absolute;
      top: 50%;
      left: 0%;
      padding: 0 5%;
      transform: translate(0%, -50%);
      -webkit-transform: translate(0%, -50%);
    }
      #outro-2 h2 {
        font-size: 35px;
        font-weight: 300;
        color: #FFF;
        margin-top: 0;
      }
        #outro-2 h2 strong { font-weight: 400; }
        #outro-2 h2:nth-child(2) { margin-bottom: 0; margin-top: 35px; }
  #outro-end {
    display: none;
    width: 740px;
    max-width: 95%;
    height: 590px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
    #outro-end h1 {
      font-size: 45px;
      color: #414f59;
      font-weight: 400;
      margin-top: 0px;
    }
    #outro-end > a { text-decoration: none; }
    #outro-end button {
      background: #0092e5;
      color: #FFF;
      display: block;
      margin: 140px auto 80px auto;
      width: 100%;
      height: 100px;
      border-radius: 5px;
      border: none;
      font-size: 30px;
      transition: all 0.3s ease;
    }
      #outro-end button:hover { background: #414f5a; }
    #outro-end p {
      color: #626c72;
      font-size: 20px;
      margin-bottom: 15px;
    }
      #outro-end p a {
        color: #626c72;
        font-weight: 500;
        text-decoration: none;
      }
        #outro-end p a:hover { color: #0092e5; }
    #outro-end ul {
      padding: 0;
      margin: 0 0 35px 0;
    }
      #outro-end ul li {
        width: 58px;
        height: 57px;
        display: inline-block;
        list-style: none;
        margin: 0 5px;
      }
        #outro-end ul li.facebook { background-image: url('../img/facebook.png'); }
        #outro-end ul li.twitter { background-image: url('../img/twitter.png'); }
        #outro-end ul li.linkedin { background-image: url('../img/linkedin.png'); }
        #outro-end ul li a {
          width: 100%;
          height: 100%;
          display: block;
        }

/* SCENARIO ANIMATIONS */
/* S1 */
#s1-a1 {
  height: 100%;
  position: relative;
}
  #s1-a1 img {
    margin: 0 0.5%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-width: 49%;
    max-height: 100%;
  }
  #s1-a1 #s1-p1 {
    opacity: 1;
    left: 0%;
    animation-name: fadeInLeft;
    animation-timing-function: ease-out;
    animation-duration: 0.6s;
  }
  #s1-a1 #s1-p2 {
    opacity: 0;
    left: 0%;
    z-index: -1;
    animation-name: fadeInLeft2;
    animation-timing-function: ease-out;
    animation-duration: 0.6s;
    animation-delay: 1.35s;
    animation-fill-mode: forwards;
  }
#s1-a2 {
  display: none;
  background: url("../img/s1-p3.jpg") no-repeat center;
  background-size: contain;
  position: relative;
  height: 100%;
}
  #s1-clock {
    opacity: 0;
    position: absolute;
    background: url("../img/s1-clock.png") no-repeat center;
    background-size: contain;
    animation-name: clock;
    animation-timing-function: ease-in-out;
    animation-duration: 0.8s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
  }

/* S2 */
#s2-a1 {
  height: 100%;
  position: relative;
  overflow: hidden;
}
  #s2-a1 img {
    position: absolute;
    max-height: 100%;
    top: 50%;
    animation-fill-mode: forwards;
  }
  #s2-a1 #s2-p1 {
    left: 50%;
    max-width: 100%;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation-name: fadeIn, moveOutLeft;
    animation-timing-function: linear, ease-out;
    animation-duration: 0.5s;
    animation-delay: 0.5s, 2.5s;
  }
  #s2-a1 #s2-p2 {
    left: 150%;
    max-width: 49.5%;
    transform: translate(-100%, -50%);
    animation-name: moveInRight, moveUp;
    animation-timing-function: ease-out;
    animation-duration: 0.5s;
    animation-delay: 2.5s, 9.5s;
  }
    #s2-p2_beep {
      left: 45%;
      top: 70% !important;
      max-height: 0% !important;
      max-width: 50%;
      transform: translate(-100%, -50%);
      animation-name: s2-p2_beep, moveUp;
      animation-timing-function: ease-out;
      animation-duration: 0.3s, 0.5s;
      animation-delay: 3.5s, 9.5s;
    }
  #s2-a1 #s2-p3 {
    left: 150%;
    max-width: 49.5%;
    transform: translate(0%, -50%);
    animation-name: moveInRight2, moveUp;
    animation-timing-function: ease-out;
    animation-duration: 0.5s;
    animation-delay: 4.5s, 9.5s;
  }
    #s2-p3_pager-container {
      position: absolute;
      right: -50%;
      top: 50%;
      max-width: 49.5%;
      transform: translate(100%, -50%);
      animation-name: moveInRight8, moveUp;
      animation-timing-function: ease-out;
      animation-duration: 0.5s;
      animation-delay: 4.5s, 9.5s;
      animation-fill-mode: forwards;
    }
      #s2-p3_pager {
        position: relative !important;
        left: 0%;
        top: 0% !important;
        max-width: 100%;
        transform: translate3d(0, 0, 0) rotate(0deg);
        animation-name: s2-p3_pager, s2-p3_pager2;
        animation-timing-function: linear;
        animation-duration: 0.25s;
        animation-delay: 5.5s, 7.5s;
        animation-iteration-count: 5;
        animation-fill-mode: none !important;
      }
      /* SAFARI HACK BECAUSE IT FEELS LIKE PLAYING THE ANIMATION AT DIFFERENT TIMES */
      @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
        @media { #s2-p3_pager { -webkit-animation-delay: 6s, 7.85s; } }
      }
  #s2-a1 #s2-p4 {
    left: 50%;
    top: 155%;
    max-width: 100%;
    transform: translate(-50%, -50%);
    animation-name: moveUp2;
    animation-timing-function: ease-out;
    animation-duration: 0.5s;
    animation-delay: 9.5s;
  }

/* S3 */
#s3-a1 {
  height: 100%;
  position: relative;
  overflow: hidden;
}
  #s3-a1 img {
    position: absolute;
    max-height: 100%;
    top: 50%;
    animation-fill-mode: forwards;
  }
  #s3-a1 #s3-p1 {
    left: 50%;
    max-width: 100%;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation-name: fadeIn, moveOutLeft;
    animation-timing-function: linear, ease-out;
    animation-duration: 0.5s;
    animation-delay: 0.5s, 2s;
  }
  #s3-a1 #s3-p2 {
    left: 150%;
    max-width: 49.5%;
    transform: translate(-100%, -50%);
    animation-name: moveInRight3, moveInRight7, moveUp;
    animation-timing-function: ease-out;
    animation-duration: 0.5s;
    animation-delay: 2s, 3.5s, 6s;
  }
  #s3-a1 #s3-p3 {
    left: 150%;
    max-width: 49.5%;
    transform: translate(0%, -50%);
    animation-name: moveInRight2, moveUp;
    animation-timing-function: ease-out;
    animation-duration: 0.5s;
    animation-delay: 3.5s, 6s;
  }
  #s3-a1 #s3-p4 {
    left: 50%;
    top: 155%;
    max-width: 100%;
    transform: translate(-50%, -50%);
    animation-name: moveUp2;
    animation-timing-function: ease-out;
    animation-duration: 0.5s;
    animation-delay: 6s;
  }

/* S4 */
#s4-a1 {
  height: 100%;
  position: relative;
  overflow: hidden;
}
  #s4-a1 img {
    position: absolute;
    max-height: 100%;
    top: 50%;
    animation-fill-mode: forwards;
  }
  #s4-a1 #s4-p1 {
    left: 50%;
    max-width: 100%;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation-name: fadeIn, moveUp;
    animation-timing-function: linear, ease-out;
    animation-duration: 0.5s;
    animation-delay: 0.5s, 2s;
  }
  #s4-a1 #s4-p2-container {
    position: absolute;
    left: 50%;
    top: 155%;
    max-width: 49.5%;
    height: 100%;
    max-height: 100%;
    transform: translate(-50%, -50%);
    animation-name: moveUp2, moveInRight7, moveUp;
    animation-timing-function: ease-out;
    animation-duration: 0.5s;
    animation-delay: 2s, 3.3s, 4.85s;
    animation-fill-mode: forwards;
  }
    #s4-a1 #s4-p2 {
      position: relative;
      left: 0%;
      top: 50%;
      transform: translate(0%, -50%);
      max-width: 100%;
    }
      #s4-a1 #s4-p2_x {
        left: 52%;
        top: 50%;
        max-width: 0%;
        margin-top: -34%;
        transform: translate(-50%, -50%);
        animation-name: popUp, moveInRight7;
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275), ease-out;
        animation-duration: 0.3s, 0.5s;
        animation-delay: 2.75s, 3.3s;
      }
  #s4-a1 #s4-p3-container {
    position: absolute;
    right: 0%;
    top: 50%;
    max-width: 49.5%;
    height: 100%;
    max-height: 100%;
    transform: translate(101%, -50%);
    animation-name: moveInRight4, moveUp;
    animation-timing-function: ease-out;
    animation-duration: 0.5s;
    animation-delay: 3.3s, 4.85s;
    animation-fill-mode: forwards;
  }
    #s4-a1 #s4-p3 {
      position: relative;
      left: 0%;
      top: 50%;
      transform: translate(0%, -50%);
      max-width: 100%;
    }
      #s4-a1 #s4-p3_x {
        left: 57%;
        top: 50%;
        max-width: 0%;
        margin-top: -32%;
        transform: translate(-50%, -50%);
        animation-name: popUp;
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
        animation-duration: 0.3s;
        animation-delay: 4.05s;
      }
  #s4-a1 #s4-p4-container {
    position: absolute;
    left: 0%;
    top: 100%;
    width: 100%;
    height: 100%;
    animation-name: moveUp3;
    animation-timing-function: ease-out;
    animation-duration: 0.5s;
    animation-delay: 4.85s;
    animation-fill-mode: forwards;
  }
    #s4-a1 #s4-p4 {
      position: relative;
      left: 0%;
      top: 50%;
      max-width: 100%;
      transform: translate(0%, -50%);
    }
    #s4-a1 #s4-p4_head {
      position: absolute;
      left: 50%;
      top: 50%;
      max-width: 100%;
      transform: translate(-50%, -50%);
      z-index: 2;
    }
    /*#s4-a1 #s4-p4_bubble_dot_1 {
      left: 40%;
      top: auto;
      bottom: 14%;
      opacity: 0;
      z-index: 0;
      animation-name: fadeIn;
      animation-timing-function: ease-out;
      animation-duration: 0.3s;
      animation-delay: 5.6s;
    }
    #s4-a1 #s4-p4_bubble_dot_2 {
      left: 45%;
      top: auto;
      bottom: 18%;
      opacity: 0;
      z-index: 0;
      animation-name: fadeIn;
      animation-timing-function: ease-out;
      animation-duration: 0.3s;
      animation-delay: 5.9s;
    }*/
    #s4-a1 #s4-p4_bubble {
      position: absolute;
      left: 50%;
      top: 50%;
      max-width: 100%;
      transform: translate(-50%, -50%);
      opacity: 0;
      z-index: 1;
      animation-name: fadeIn;
      animation-timing-function: ease-out;
      animation-duration: 0.3s;
      animation-delay: 5.6s;
    }

/* S5 */
#s5-a1 {
  height: 100%;
  position: relative;
  overflow: hidden;
}
  #s5-a1 img {
    position: absolute;
    max-height: 100%;
    top: 50%;
    animation-fill-mode: forwards;
  }
  #s5-a1 #s5-p1 {
    left: 50%;
    max-width: 100%;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation-name: fadeIn, moveUp;
    animation-timing-function: linear, ease-out;
    animation-duration: 0.5s;
    animation-delay: 1s, 2.5s;
  }
    #s5-a1 #s5-p1_text {
      left: 50%;
      top: -30%;
      max-width: 100%;
      transform: translate(-50%, -50%);
      animation-name: moveDown, moveUp;
      animation-timing-function: ease-out;
      animation-duration: 0.5s, 0.5s;
      animation-delay: 0.5s, 2.5s;
    }
  #s5-a1 #s5-p2-container {
    position: absolute;
    left: 50%;
    top: 155%;
    height: 100%;
    max-height: 100%;
    width: 100%;
    max-width: 800px;
    transform: translate(-50%, -50%);
    overflow: hidden;
    animation-name: moveUp2, moveOutLeft;
    animation-timing-function: ease-out;
    animation-duration: 0.5s;
    animation-delay: 2.5s, 4.55s;
    animation-fill-mode: forwards;
  }
    #s5-a1 #s5-p2A {
      position: absolute;
      max-width: 100%;
      transform: translate(-50%, -50%);
      left: 50%;
      top: 50%;
      z-index: 1;
    }
    #s5-a1 #s5-p2B {
      position: absolute;
      max-width: 100%;
      transform: translate(-50%, -50%);
      left: -50%;
      top: 50%;
      animation-name: moveInRight5;
      animation-timing-function: ease-out;
      animation-duration: 0.3s;
      animation-delay: 3.25s;
      z-index: 0;
    }
  #s5-a1 #s5-p3 {
    left: 150%;
    max-width: 100%;
    transform: translate(-50%, -50%);
    animation-name: moveInRight6, moveOutLeft;
    animation-timing-function: ease-out;
    animation-duration: 0.5s;
    animation-delay: 4.55s, 6.85s;
  }
    #s5-a1 #s5-p3_bubble {
      left: 50%;
      max-width: 100%;
      opacity: 0;
      transform: translate(-50%, -50%);
      animation-name: fadeIn, moveOutLeft;
      animation-timing-function: ease-out;
      animation-duration: 0.3s, 0.5s;
      animation-delay: 5.55s, 6.85s;
    }
  #s5-a1 #s5-p4 {
    left: 150%;
    max-width: 100%;
    transform: translate(-50%, -50%);
    animation-name: moveInRight6;
    animation-timing-function: ease-out;
    animation-duration: 0.5s;
    animation-delay: 6.85s;
  }
    #s5-a1 #s5-p4_text {
      left: 150%;
      max-width: 100%;
      transform: translate(-50%, -50%);
      animation-name: moveInRight6;
      animation-timing-function: ease-out;
      animation-duration: 0.5s;
      animation-delay: 6.85s;
    }

/* ANIMATION PRESETS */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeInLeft {
  0% { opacity: 0; left: -100%; }
  100% { opacity: 1; left: 0; }
}

@keyframes fadeInLeft2 {
  0% { opacity: 0; left: -50%; }
  100% { opacity: 1; left: 0%; }
}

@keyframes moveInRight {
  0% { left: 150%; }
  100% { left: 49.5%; }
}

@keyframes moveInRight2 {
  0% { left: 150%; }
  100% { left: 50.5%; }
}

@keyframes moveInRight3 {
  0% { left: 150%; transform: translate(-100%, -50%); }
  100% { left: 50%; transform: translate(-50%, -50%); }
}

@keyframes moveInRight4 {
  0% { right: 0%; }
  100% { right: 50%; }
}

@keyframes moveInRight5 {
  0% { left: -50%; }
  100% { left: 50%; }
}

@keyframes moveInRight6 {
  0% { left: 150%; }
  100% { left: 50%; }
}

@keyframes moveInRight7 {
  0% { transform: translate(-50%, -50%); }
  100% { transform: translate(-101%, -50%); }
}

@keyframes moveInRight8 {
  0% { right: -50%; }
  100% { right: 50%; }
}

@keyframes moveOutLeft {
  0% { left: 50%; }
  100% { left: -50%; }
}

@keyframes moveUp {
  0% { top: 50%; }
  100% { top: -55%; }
}

@keyframes moveUp2 {
  0% { top: 155%; }
  100% { top: 50%; }
}

@keyframes moveUp3 {
  0% { top: 100%; }
  100% { top: 0%; }
}

@keyframes moveDown {
  0% { top: -30%; }
  100% { top: 50%; }
}

@keyframes popUp {
  0% { max-width: 0%; }
  100% { max-width: 10%; }
}

@keyframes clock {
  0% { opacity: 0; height: 0%; width: 0%; right: 50%; top: 30%; }
  100% { opacity: 1; height: 100%; width: 100%; right: 0%; top: 0%; }
}

@keyframes s2-p2_beep {
  0% { max-height: 0%; top: 70%; left: 45%; }
  100% { max-height: 100%; top: 50%; left: 49.5%; }
}

@keyframes s2-p3_beep {
  0% { max-height: 0%; top: 60%; left: 90%; }
  100% { max-height: 100%; top: 50%; left: 50.5%; }
}

/* NEED 2 SINCE SAFARI IS BAD */
@keyframes s2-p3_pager {
  0% { transform: translate3d(2px, 1px, 0) rotate(0deg); }
  10% { transform: translate3d(-1px, -2px, 0) rotate(-1deg); }
  20% { transform: translate3d(-3px, 0px, 0) rotate(1deg); }
  30% { transform: translate3d(0px, 2px, 0) rotate(0deg); }
  40% { transform: translate3d(1px, -1px, 0) rotate(1deg); }
  50% { transform: translate3d(-1px, 2px, 0) rotate(-1deg); }
  60% { transform: translate3d(-3px, 1px, 0) rotate(0deg); }
  70% { transform: translate3d(2px, 1px, 0) rotate(-1deg); }
  80% { transform: translate3d(-1px, -1px, 0) rotate(1deg); }
  90% { transform: translate3d(2px, 2px, 0) rotate(0deg); }
  100% { transform: translate3d(1px, -2px, 0) rotate(-1deg); }
}
@keyframes s2-p3_pager2 {
  0% { transform: translate3d(2px, 1px, 0) rotate(0deg); }
  10% { transform: translate3d(-1px, -2px, 0) rotate(-1deg); }
  20% { transform: translate3d(-3px, 0px, 0) rotate(1deg); }
  30% { transform: translate3d(0px, 2px, 0) rotate(0deg); }
  40% { transform: translate3d(1px, -1px, 0) rotate(1deg); }
  50% { transform: translate3d(-1px, 2px, 0) rotate(-1deg); }
  60% { transform: translate3d(-3px, 1px, 0) rotate(0deg); }
  70% { transform: translate3d(2px, 1px, 0) rotate(-1deg); }
  80% { transform: translate3d(-1px, -1px, 0) rotate(1deg); }
  90% { transform: translate3d(2px, 2px, 0) rotate(0deg); }
  100% { transform: translate3d(1px, -2px, 0) rotate(-1deg); }
}


/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 900px) {
  #intro-inner, #scenario #s1-intro-inner {
    max-width: 90%;
    margin-left: -45%;
    padding: 130px 5% 0 5%;
    font-size: 20px;
  }
    #intro-next, #intro-start { width: 65%; }
  #scenario #s1-intro-inner { padding: 13% 6%; height: auto; }
    #scenario #s1-continue { margin-top: 40px; width: 85%; }
  #scenario #question { max-width: 90%; }
    #scenario #question p { font-size: 20px; }
  #scenario #answers li { font-size: 18px; }
    #scenario #answers li span.description { line-height: 30px; }
}

@media only screen and (max-width: 720px) {
  #menu {
    max-width: 100%;
    padding: 40px 3%;
    height: auto;
    left: auto;
    top: auto;
    transform: none;
    -webkit-transform: none;
  }
    #menu-start { width: 80%; }
}

@media only screen and (max-width: 600px) {
  #scenario-intro h1#scenario-intro-title {
    width: 100%;
    margin-left: 0;
    left: auto;
    font-size: 30px;
  }
  #scenario #answers li.active .correct:before {
    width: 40px;
    height: 40px;
    left: -20px;
    margin-top: -20px;
  }
  #scenario #question { padding-bottom: 80px; }
    #scenario #continue { width: 100%; }
}

@media only screen and (max-height: 690px) {
  #menu {
    position: static;
    margin: 0 auto;
    padding: 40px 0;
    transform: none;
    -webkit-transform: none;
  }
  #scenario #question {
    padding: 40px 0;
    top: auto;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
  }
}


/* ==========================================================================
  ! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/
  ========================================================================== */

html, body {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
    font-family: 'Roboto', Arial, sans-serif;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}


/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}