/* apply a natural box layout model to all elements */
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  background: #fff url('images/background.png') top center no-repeat;
  background-size: 100% auto;
  margin: 0;
  height: 100%;
  font-family: 'Times New Roman', 'Georgia', serif;
  overflow: hidden;
 width:100%;
}

/* Hide only visually, but have it available for screenreaders & for SEO purposes. See h5bp.com/v */
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

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

.clearfix:after {
    clear: both;
}

.toaster {
      position: absolute;
      width: 64px;
      height: 64px;
      background-image: url("images/toaster-sprite.gif");
    }
    .toast {
      position: absolute;
      width: 64px;
      height: 64px;
      background-image: url("images/toast1.gif");
    }

    /**
     * Toaster Animations
     *
     * There are several kinds of toaster animations, marked as t1, t2, & t3.
     *
     * T1 is fastest speed
     * T2 is mid speed & flaps out of sequence with T1
     * T3 is the common speed
     * T4 is a deleyd batch going at the fastest speed
     * T5, T6, T7, T8, & T9 are a delayed batch of toasters going at the common speed
     */
    .t1 {
      -webkit-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
         -moz-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
          -ms-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
           -o-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
              animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
    }
    .t2 {
      -webkit-animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
         -moz-animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
          -ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
           -o-animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
              animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
    }
    .t3 {
      -webkit-animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
         -moz-animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
          -ms-animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
           -o-animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
              animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
    }
    .t4 {
      -webkit-animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
         -moz-animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
          -ms-animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
           -o-animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
              animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
    }
    .t5 {
      -webkit-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
         -moz-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
          -ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
           -o-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
              animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
    }
    .t6 {
      -webkit-animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
         -moz-animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
          -ms-animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
           -o-animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
              animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
    }
    .t7 {
      -webkit-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
         -moz-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
          -ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
           -o-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
              animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
    }
    .t8 {
      -webkit-animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
         -moz-animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
          -ms-animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
           -o-animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
              animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
    }
    .t9 {
      -webkit-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
         -moz-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
          -ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
           -o-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
              animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
    }
    /**
     * Toast Animations
     *
     * There are several kinds of toaster animations, marked as ts1, ts2, & ts3.
     *
     * Tst1 is fast
     * Tst2 is mid speed
     * Tst3 is the common speed
     * Tst4 is a delayed batch of toast going at the common speed
     */
    .tst1 {
      -webkit-animation: fly 10s linear infinite;
         -moz-animation: fly 10s linear infinite;
          -ms-animation: fly 10s linear infinite;
           -o-animation: fly 10s linear infinite;
              animation: fly 10s linear infinite;
    }
    .tst2 {
      -webkit-animation: fly 16s linear infinite;
         -moz-animation: fly 16s linear infinite;
          -ms-animation: fly 16s linear infinite;
           -o-animation: fly 16s linear infinite;
              animation: fly 16s linear infinite;
    }
    .tst3 {
      -webkit-animation: fly 24s linear infinite;
         -moz-animation: fly 24s linear infinite;
          -ms-animation: fly 24s linear infinite;
           -o-animation: fly 24s linear infinite;
              animation: fly 24s linear infinite;
    }
    .tst4 {
      -webkit-animation: fly 24s 12s linear infinite;
         -moz-animation: fly 24s 12s linear infinite;
          -ms-animation: fly 24s 12s linear infinite;
           -o-animation: fly 24s 12s linear infinite;
              animation: fly 24s 12s linear infinite;
    }

    /**
     * Starting positions of objects (both toast & toasters).
     *  - There is a different position for each object to prevent overlapping.
     *  - We use percentages in order to accomodate for all window dimensions.
     *  - Use -6% as the smallest amount for remaining off-screen.
     *  - Organized into reverse "L" shaped batches to keep a constant flow.
     */
    /* Batch 1 (-10% to -20%) */
    /* Top edge, from right to left */
    .p6 { right: -2%; top: -10%; }
    .p7 { right: 10%; top: -12%; }
    .p8 { right: 20%; top: -18%; }
    .p9 { right: 30%; top: -13%; }
    .p10 { right: 40%; top: -17%; }
    .p11 { right: 50%; top: -11%; }
    .p12 { right: 60%; top: -20%; }
    /* Right side, from top to bottom */
    .p13 { right: -10%; top: 10%; }
    .p14 { right: -13%; top: 20%; }
    .p15 { right: -17%; top: 30%; }
    .p16 { right: -15%; top: 50%; }
    .p17 { right: -20%; top: 70%; }

    /* Batch 2 (-20% to -40%) */
    /* Top edge, from right to left */
    .p18 { right: 0%; top: -26%; }
    .p19 { right: 10%; top: -20%; }
    .p20 { right: 20%; top: -36%; }
    .p21 { right: 30%; top: -24%; }
    .p22 { right: 40%; top: -33%; }
    .p23 { right: 60%; top: -40%; }
    /* Right side, from top to bottom */
    .p24 { right: -26%; top: 10%; }
    .p25 { right: -36%; top: 30%; }
    .p26 { right: -29%; top: 50%; }

    /* Batch 3 (-40% to -60%)*/
    /* Top edge, from right to left */
    .p27 { right: 0; top: -46%; }
    .p28 { right: 10%; top: -56%; }
    .p29 { right: 20%; top: -49%; }
    .p30 { right: 30%; top: -60%; }
    /* Right side, from top to bottom */
    .p31 { right: -46%; top: 10%; }
    .p32 { right: -56%; top: 20%; }
    .p33 { right: -49%; top: 30%; }

    /* Flapping animation */
    @-webkit-keyframes flap {
     from { background-position:    0px; }
       to { background-position: -256px; }
    }
    @-moz-keyframes flap {
       from { background-position:    0px; }
         to { background-position: -256px; }
    }
    @-o-keyframes flap {
       from { background-position:    0px; }
         to { background-position: -256px; }
    }
    @keyframes flap {
       from { background-position:    0px; }
         to { background-position: -256px; }
    }

    /* Gliding animation using translate */
    /* Moving 1600px, to accomodate for large screens */
    @-webkit-keyframes fly {
      from {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
      }
      to {
        -webkit-transform: translate(-1600px, 1600px);
        -moz-transform: translate(-1600px, 1600px);
        -o-transform: translate(-1600px, 1600px);
        -ms-transform: translate(-1600px, 1600px);
        transform: translate(-1600px, 1600px);
      }
    }
    @-moz-keyframes fly {
      from {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
      }
      to {
        -webkit-transform: translate(-1600px, 1600px);
        -moz-transform: translate(-1600px, 1600px);
        -o-transform: translate(-1600px, 1600px);
        -ms-transform: translate(-1600px, 1600px);
        transform: translate(-1600px, 1600px);
      }
    }
    @-o-keyframes fly {
      from {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
      }
      to {
        -webkit-transform: translate(-1600px, 1600px);
        -moz-transform: translate(-1600px, 1600px);
        -o-transform: translate(-1600px, 1600px);
        -ms-transform: translate(-1600px, 1600px);
        transform: translate(-1600px, 1600px);
      }
    }
@keyframes fly {
  from {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  to {
    -webkit-transform: translate(-1600px, 1600px);
    -moz-transform: translate(-1600px, 1600px);
    -o-transform: translate(-1600px, 1600px);
    -ms-transform: translate(-1600px, 1600px);
    transform: translate(-1600px, 1600px);
  }
}

@keyframes drop {
  from {
  }
  to {
    top: 85%;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}

.background {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.video {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: 800px;
  width: 90%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 4;
}

.video iframe {
  width: 100%;
}

.header {
  position: fixed;
  overflow: hidden;
  z-index: 3;
  top: 0;
  left: 35%;
  height: 100%;
  width: 100%;
}

.header--first-name {
  position: absolute;
  top: 0;
  left: 1%;
  z-index: 2;
  width: 200px;
  -webkit-animation: drop 5s 5s linear;
         -moz-animation: drop 5s 5s linear;
          -ms-animation: drop 5s 5s linear;
           -o-animation: drop 5s 5s linear;
              animation: drop 5s 5s linear;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

.header--last-name {
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 1;
  width: 300px;
   -webkit-animation: drop 4s 4.85s linear;
         -moz-animation: drop 4s 4.85s linear;
          -ms-animation: drop 4s 4.85s linear;
           -o-animation: drop 4s 4.85s linear;
              animation: drop 4s 4.85s linear;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

.portrait {
  position: absolute;
  bottom: -5%;
  width: 300px;
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}

.face {
  position: absolute;
  bottom: 5%;
  right: 2%;
  width: 100px;
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg);
}

.text--genius,
.text--website {
  position: absolute;
  font-size: 30px;
  font-family: Arial;
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}

.text--genius {
  bottom: 15%;
  right: 5%;
}

.text--website {
  top: 5%;
  left: 2%;
  -webkit-transform: rotate(10deg);
  transform: rotate(10deg);
}