/*!
 * Woah.css - http://joerezendes.com/woah.css
 * Version - 1.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Github - https://github.com/joerez/Woah.css
 *
 * Copyright (c) 2018 Joe Rezendes
 */





/**
 * Animations
 */
 .woah {
    animation-fill-mode: both;
  }
  
  .woah.infinite {
    animation-iteration-count: infinite;
  }
  
  
  /**
   * Wowzors
   * - Spiral flips and rotates
   */
  @keyframes wowzors {
  
    1% {
      opacity: 0%;
    }
  
    10% {
      opacity: 100%;
      transform: rotate(360deg) translateX(150px) translateY(400px) rotate(-360deg) rotateY(360deg);
    }
  
    20% {
      transform: rotate(720deg) translateX(150px) translateY(350px) rotate(-720deg) rotateY(720deg) ;
    }
  
    30% {
      transform: rotate(1080deg) translateX(150px) translateY(300px) rotate(-1080deg) rotateY(1080deg) ;
    }
  
    40% {
      transform: rotate(1440deg) translateX(150px) translateY(250px) rotate(-1440deg) rotateY(1440deg) ;
    }
  
    50% {
      transform: rotate(1800deg) translateX(150px) translateY(200px) rotate(-1800deg) rotateY(1800deg) ;
    }
  
    60% {
      transform: rotate(1440deg) translateX(150px) translateY(150px) rotate(-1440deg) rotateY(1440deg) ;
    }
  
    70% {
      transform: rotate(1080deg) translateX(150px) translateY(0px) rotate(1080deg) rotateX(180deg);
    }
  
  
  }
  
  .wowzors {
    animation-timing-function: linear;
    transform-origin: bottom center;
    animation-name: wowzors;
    animation-duration: 5s;
  }
  
  /**
   * comeInStyle
   * - Comes in style, this isn't your oridinary entrance
   */
  @keyframes comeInStyle {
    0% {
      opacity: 100%;
      transform: translate3d(0px, -3000px, -2000px);
    }
  
    1% {
      opacity: 0%;
      transform: translate3d(0px, -3000px, -2000px);
    }
  
    25% {
      transform: translate3d(0px, -200px, -200px) scale(3) rotateX(0) rotateY(0);
    }
  
    50% {
      transform: translate3d(200px, -0px, -0px) scale(6) rotateX(180deg) rotateY(90deg);
  
    }
  
  
    90% {
      opacity: 0%;
      transform: translate3d(-200px, 200px, 200px) scale(3) rotateX(360deg) rotateY(180deg);
    }
  
    100% {
      opacity: 100%;
      transform: none;
    }
  
  }
  
  .comeInStyle {
    animation-timing-function: ease-out;
    transform-origin: bottom center;
    animation-name: comeInStyle;
    animation-duration: 5s;
  }
  
  /**
   * leaveInStyle
   * - Leaves in style, this isn't your oridinary entrance
   */
  @keyframes leaveInStyle {
  
    10% {
      transform: translate3d(0px, -100px, 0px) scale(1);
    }
  
    12% {
      transform: translate3d(0px, 5px, 0px) scale(1);
    }
  
    14% {
      transform: translate3d(0px, -10px, 0px) scale(1);
    }
  
    16% {
      transform: translate3d(0px, 0px, 0px) scale(1);
    }
  
    18% {
      transform: translate3d(0px, 10px, 0px) scale(1);
    }
  
    25% {
      transform: translate3d(0px, 0px, 0px) skewY(10deg) scale(2);
    }
  
    27% {
      transform: translate3d(0px, -5px, 0px) skewY(7deg) scale(1.8);
    }
  
    29% {
      transform: translate3d(0px, 5px, 0px) skewY(10deg) scale(2);
    }
  
    60% {
      transform: translate3d(-400px, 5px, 0px) rotate(360deg) rotateY(-760deg) skewY(-10deg) scale(2);
    }
  
    70% {
      transform: translate3d(400px, 5px, 0px) rotate(0deg) rotateY(-360deg) skewY(10deg) scale(2);
    }
  
    80% {
      transform: translate3d(0px, 0px, 0px) rotateY(0deg) skewY(0deg) scale(1);
    }
  
    90% {
      transform: translate3d(0px, 0px, 0px) rotateY(0deg) rotateX(720deg) scale(1.5);
    }
  
    99% {
      transform: translate3d(0px, 0px, 0px) rotateY(0deg) rotateX(0deg) skewY(0deg) scale(.01);
    }
  
    100% {
      transform: translate3d(0px, 0px, 0px) rotateY(0deg) rotateX(0deg) skewY(0deg) scale(.001);
      visibility: hidden;
    }
  
  }
  
  .leaveInStyle {
    animation-timing-function: ease-out;
    transform-origin: bottom center;
    animation-name: leaveInStyle;
    animation-duration: 5s;
    animation-fill-mode: forwards;
  }
  
  
  /**
   * rotateComplex
   * - Comes in style, this isn't your oridinary entrance
   */
  @keyframes rotateComplex {
    1% {
      opacity: 90%;
      transform: translate3d(0,0,0) rotate(0deg);
    }
    10% {
      transform: translate3d(200px, -140px, 0) rotate(1080deg);
    }
    20% {
      transform: translate3d(-200px, 140px, 0) rotate(-160deg);
    }
    30% {
      transform: translate3d(-200px, -140px, 0) rotate(340deg);
    }
    40% {
      transform: translate3d(-200px, 140px, 0) rotate(-720deg);
    }
    50% {
      transform: translate3d(200px, 140px, 0) rotate(120deg) scale(1.2);
    }
    60% {
      transform: translate3d(0px, 0px, 100px) rotate(1080deg) scale(1.5);
    }
    65% {
      transform: translate3d(0px, 0px, 200px) rotate(-1080deg) scale(2.0);
    }
    90% {
      transform: translate3d(0px, 0px, 600px) rotate(6080deg) scale(5.0);
    }
    100% {
      transform: translate3d(0px, 0px, 0px) rotate(0deg) scale(1.0);
    }
  }
  
   .rotateComplex {
     animation-timing-function: linear;
     transform-origin: bottom center;
     animation-name: rotateComplex;
     animation-duration: 5s;
   }
   /**
    * rotateComplexOut
    * - Comes in style, this isn't your oridinary entrance
    */
   @keyframes rotateComplexOut {
     1% {
       opacity: 90%;
       transform: translate3d(0,0,0) rotate(0deg);
     }
     10% {
       transform: translate3d(200px, -140px, 0) rotate(1080deg);
     }
     20% {
       transform: translate3d(-200px, 140px, 0) rotate(-160deg);
     }
     30% {
       transform: translate3d(-200px, -140px, 0) rotate(340deg);
     }
     40% {
       transform: translate3d(-200px, 140px, 0) rotate(-720deg);
     }
     50% {
       transform: translate3d(200px, 140px, 0) rotate(120deg) scale(1.2);
     }
     60% {
       transform: translate3d(0px, 0px, 100px) rotate(1080deg) scale(1.5);
     }
     65% {
       transform: translate3d(0px, 0px, 200px) rotate(-1080deg) scale(2.0);
     }
     90% {
       transform: translate3d(0px, 0px, 600px) rotate(6080deg) scale(5.0);
     }
     99% {
       transform: translate3d(0px, 0px, 0px) rotate(0deg) scale(.01);
       opacity: 100%
     }
     100% {
       display: none;
       transform: translate3d(0px, 0px, 0px) rotate(0deg) scale(0);
       opacity: 0%;
     }
  
   }
  
    .rotateComplexOut {
      animation-timing-function: linear;
      transform-origin: bottom center;
      animation-name: rotateComplexOut;
      animation-duration: 5s;
    }
  
   /**
    * flyOut
    * - Flies out
    */
    @keyframes flyOut {
  
      1% {
        transform: translate3d(0,0,0) scale(1);
      }
  
  
      20% {
        transform: translate3d(0,100px,400px) rotateX(90deg);
      }
      30% {
        transform: translate3d(300px,0px,100px) rotateX(95deg);
      }
      40% {
        transform: translate3d(-600px,-200px,0px) rotateX(80deg);
      }
      60% {
        transform: translate3d(2000px,-2000px,0px) rotateX(0deg);
      }
      70% {
        transform: translate3d(-2000px, 2000px, 0px) rotateX(60deg) scale(5);
      }
      80% {
        transform: translate3d(0,4000px,0px);
      }
      85% {
        transform: translate3d(-0px,-0px,0px) scale(.07);
      }
      100% {
        transform: translate3d(2000px,-2000px,0px);
        display: none;
      }
  }
  
  .flyOut {
    animation-timing-function: ease-out;
    transform-origin: bottom center;
    animation-name: flyOut;
    animation-duration: 5s;
  }
  
  
  /**
   * flyIn
   * - Flies In
   */
   @keyframes flyIn {
  
     0% {
       transform: translate3d(2000px,-2000px,0px);
       display: none;
     }
  
     10%, 15% {
       transform: translate3d(-0px,-0px,0px) scale(.07);
     }
  
     20% {
       transform: translate3d(0,1000px,0px);
     }
     30% {
       transform: translate3d(-2000px, 2000px, 0px) rotateX(60deg) scale(5);
     }
     40% {
       transform: translate3d(2000px,-2000px,0px) rotateX(0deg) scale(2);
     }
     60% {
       transform: translate3d(-600px,-200px,0px) rotateX(0deg) scale(.3);
     }
  
     80% {
       transform: translate3d(0,0,0) scale(.01);
     }
  
     100% {
       transform: translate3d(0,0,0);
     }
  }
  
  .flyIn {
   animation-timing-function: ease-out;
   transform-origin: bottom center;
   animation-name: flyIn;
   animation-duration: 5s;
  }
  
  
  /**
   * blackMirror
   * - Woah
   */
  @keyframes blackMirror {
  
    0% {
      transition: none;
    }
  
    1% {
      transform: translate3d(0,0,0);
    }
  
    50% {
      transform: translate3d(200px,0,0);
      background: rgba(0,0,0,1);
    }
  
    99% {
      transform: translate3d(-200px,0,0);
      background: rgba(0,0,0,1);
    }
  
    100% {
      transform: translate3d(0,0,0);
    }
  
  }
  
  
  
   .blackMirror {
     animation-timing-function: ease-out;
     transform-origin: bottom center;
     animation-name: blackMirror;
     animation-duration: .01s;
     animation-iteration-count: 1200;
   }
   /**
    * blackMirrorTextVersion
    * - Woah (Black Text)
    */
   @keyframes blackMirrorTextVersion {
     1% {
       transform: translate3d(0,0,0);
     }
  
     50% {
       transform: translate3d(200px,0,0);
       color: black;
     }
  
     99% {
       transform: translate3d(-200px,0,0);
       color: black;
     }
  
     100% {
       transform: translate3d(0,0,0);
     }
  
   }
  
  
  
    .blackMirrorTextVersion {
      animation-timing-function: ease-out;
      transform-origin: bottom center;
      animation-name: blackMirrorTextVersion;
      animation-duration: .01s;
      animation-iteration-count: 600;
    }
  
  
    /**
     * spin3D
     * - Spins in 3D
     */
    @keyframes spin3D {
  
      15% {
        transform: rotateY(180deg) scale(2);
      }
  
      30% {
        transform: rotateX(360deg) rotateY(180deg) skewX(50deg) scale(2);
      }
  
      45% {
        transform: rotateX(480deg) rotateY(360deg) skewX(-50deg) skewY(0deg)  scale(1.5);
      }
  
      60% {
        transform: rotateX(0deg) rotateY(0deg) skewX(0deg) skewY(0deg)  scale(2);
      }
  
      70% {
        transform: rotateX(0deg) rotateY(0deg) skewX(0deg) skewY(0deg)  scale(3);
      }
  
      80% {
        transform: rotateX(0deg) rotateY(540deg) skewX(0deg) skewY(0deg)  scale(3);
      }
  
      90% {
        transform: rotateX(180deg) rotateY(1080deg) skewX(0deg) skewY(0deg)  scale(.3);
      }
  
      97% {
        transform: rotateX(40deg) rotateY(80deg) skewX(0deg) skewY(0deg)  scale(2);
      }
  
  
    }
  
  
  
     .spin3D {
       animation-timing-function: linear;
       transform-origin: bottom center;
       animation-name: spin3D;
       animation-duration: 5s;
     }
  
     /**
      * simpleEntrance
      * - enter in simply
      */
     @keyframes simpleEntrance {
  
       0% {
         opacity: 0%;
         transform: translate3d(-2000px,500px,0) scale(10);
       }
  
       1% {
         opacity: 100%
       }
  
       40% {
         transform: translate3d(2000px,0px,0) scale(5);
       }
       50% {
         transform: translate3d(-2000px,-100px,0) scale(3);
       }
       60% {
         transform: translate3d(2000px,100px,0) scale(2);
       }
       70% {
         transform: translate3d(-2000px,400px,0) scale(.1);
       }
  
       75% {
         transform: translate3d(0px,0px,0) scale(.1);
       }
  
       80% {
         transform:  rotate(360deg) translateX(150px) rotate(-360deg)
       }
  
     }
  
      .simpleEntrance {
        animation-timing-function: linear;
        transform-origin: bottom center;
        animation-name: simpleEntrance;
        animation-duration: 10s;
      }
  
  
      /**
       * scaleOut
       * - Big Scale Out
       */
      @keyframes scaleOut {
  
      from {
          transform: scale(.1) translate3d(0,0px,0);
        }
  
        80% {
          transform: scale(4) translate3d(0, 70px, 0);
          box-shadow: 0px 200px 200px 200px rgba(0,0,0,1);
        }
  
  
  
        100% {
          transform: scale(0) translate3d(0,0px,0);
          visibility: hidden;
        }
  
      }
  
  
  
  
  
       .scaleOut {
         animation-timing-function: linear;
         transform-origin: bottom center;
         animation-name: scaleOut;
         animation-duration: 3s;
         background: url('https://i.imgur.com/XB0kRsy.gif');
         background-size: cover;
         background-repeat: no-repeat;
         background-position: center;
       }
  
  
       /**
        * dealWithIt
        * - Sunglasses and coolness.
        */
       @keyframes dealWithIt {
  
         1% {
           transform: translate3d(0,0,0) scale(1);
           opacity: 1;
         }
  
  
         30% {
           transform: translate3d(0,160px,0) scale(1);
           opacity: 1;
         }
  
         70% {
           transform: translate3d(0,160px,0) scale(1);
           opacity: 1;
         }
  
         85% {
           transform: translate3d(0,160px,0) scale(1);
           opacity: 1;
         }
  
         99% {
           transform: translate3d(0,-2000px,0) scale(1);
         }
  
         to {
           visibility: hidden;
           opacity: 0;
         }
  
       }
  
       @keyframes dealWithItNorm {
  
         1% {
  
         }
  
         30% {
           transform: translate3d(0,0px,0) scale(1);
           opacity: 1;
         }
  
         40% {
           transform: rotate(10deg);
           opacity: 1;
         }
  
         50% {
           transform: rotate(-10deg);
         }
  
         60% {
           transform: rotate(10deg);
         }
  
         70% {
           transform: rotate(-10deg);
         }
  
         80% {
           transform: rotate(0deg);
         }
  
  
       }
  
  
       .dealWithIt::after {
         height: 300px;
         width: 300px;
         z-index: 5;
         background-repeat: no-repeat;
         content: '';
         background: url('http://www.stickpng.com/assets/thumbs/584999a27b7d4d76317f5ffe.png');
         animation-timing-function: ease-in-out;
         transform-origin: bottom center;
         animation-name: dealWithIt;
         animation-duration: 5s;
         animation-fill-mode: forwards;
         vertical-align: baseline;
         position: absolute;
         top: -200%;
         right: -50%;
         bottom: -50%;
         left: -50%;
  
       }
  
        .dealWithIt {
          /*position: absolute;*/
          animation-timing-function: ease-in-out;
          transform-origin: bottom center;
          animation-name: dealWithItNorm;
          animation-duration: 5s;
        }
  
  
        /**
         * fedoraTip
         * - Tip your fedora.
         */
        @keyframes fedoraTip {
  
          5% {
            transform: translate3d(-80px,60px,0) scale(.8);
            opacity: 1;
          }
  
  
          40% {
            transform: translate3d(-80px,60px,0) rotate(-30deg) scale(.8);
            opacity: 1;
          }
  
          60% {
            transform: translate3d(-80px,60px,0) rotate(0deg) scale(.8);
            opacity: 1;
          }
  
  
          to {
            transform: translate3d(-80px,-2000px,0) rotate(180deg) scale(.8);
            visibility: hidden;
            opacity: 1;
          }
  
        }
  
        @keyframes fedoraTipNorm {
  
          1% {
  
          }
  
          10% {
            transform: translate3d(0,0px,0) rotate(0deg) scale(1);
          }
  
          30% {
            transform: translate3d(0,0px,0) rotate(-5deg) scale(1);
            opacity: 1;
            box-shadow: 0px 5px 10px rgba(0,0,0,1);
          }
  
          70% {
            transform: translate3d(0,0px,0) rotate(0deg) scale(1);
            opacity: 1;
          }
  
  
  
        }
  
  
        .fedoraTip::after {
          z-index: 5;
          width: 450px;
          content: '';
          background: url('https://vignette.wikia.nocookie.net/roblox/images/3/39/ROBLOX_Black_Pinstripe_Fedora.png/revision/latest?cb=20170213154343');
          background-repeat: no-repeat;
          animation-timing-function: ease-in-out;
          transform-origin: bottom center;
          animation-name: fedoraTip;
          animation-duration: 5s;
          animation-fill-mode: forwards;
          vertical-align: baseline;
          position: absolute;
          top: -200%;
          right: -50%;
          bottom: -50%;
          left: -50%;
  
        }
  
         .fedoraTip {
           /*position: absolute;*/
           animation-timing-function: ease-in-out;
           transform-origin: bottom center;
           animation-name: fedoraTipNorm;
           animation-duration: 5s;
         }
  
  
  
  
  /****************WOW***************/
  
  /**
   * blazingStar
   * - Radiate shiny things
   */
   @keyframes blazingStar {
     1% {
       border-radius: none;
       box-shadow: 0px 0px 40px rgba(255, 255, 0,.6);
       transform: scale(1);
     }
     10% {
       box-shadow: 0px 0px 0px;
       /*border-radius: 50%;*/
       transform: scale(1);
     }
     20% {
       box-shadow: 0px 0px 120px rgba(255, 255, 0,.6);
       /*border-radius: 50%;*/
       transform: scale(1);
     }
     30% {
       box-shadow: 0px 0px 0px;
       /*border-radius: 50%;*/
       transform: scale(1);
     }
     40% {
       box-shadow: 0px 0px 120px rgba(255, 255, 0,.6);
       /*border-radius: 50%;*/
       transform: scale(1);
     }
     50% {
       box-shadow: 0px 0px 0px;
       /*border-radius: 50%;*/
       transform: scale(1);
     }
     60% {
       box-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
       /*border-radius: 50%;*/
       transform: scale(1);
     }
  
     70% {
       box-shadow: 0px 0px 0px;
       /*border-radius: 50%;*/
       transform: scale(1);
     }
     80% {
       box-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
       /*border-radius: 50%;*/
       transform: scale(1);
     }
  
     90% {
       box-shadow: 0px 0px 0px;
       /*border-radius: 50%;*/
       transform: scale(1);
     }
     99% {
       box-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
       /*border-radius: 50%;*/
       transform: scale(1.1);
     }
   }
  
  .blazingStar {
    animation-timing-function: ease-out;
    transform-origin: bottom center;
    animation-name: blazingStar;
    animation-duration: 5s;
  }
  
  /**
   * blazingStarText
   * - Radiate shiny text
   */
  @keyframes blazingStarText {
    1% {
      text-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
      transform: scale(1);
    }
    10% {
      text-shadow: 0px 0px 0vh rgba(255, 255, 0,0);
      transform: scale(1);
    }
    20% {
      text-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
      transform: scale(1);
    }
    30% {
      text-shadow: 0px 0px 0vh rgba(255, 255, 0,0);
      transform: scale(1);
    }
    40% {
      text-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
      transform: scale(1);
    }
    50% {
      text-shadow: 0px 0px 0vh rgba(255, 255, 0,0);
      transform: scale(1);
    }
    60% {
      text-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
      transform: scale(1);
    }
  
    70% {
      text-shadow: 0px 0px 0vh rgba(255, 255, 0,0);
      transform: scale(1);
    }
    80% {
      text-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
      transform: scale(1);
    }
  
    90% {
      text-shadow: 0px 0px 0vh rgba(255, 255, 0,0);
      transform: scale(1);
    }
    99% {
      text-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
      transform: scale(1);
    }
  }
  
  .blazingStarText {
    animation-timing-function: ease-out;
    transform-origin: bottom center;
    animation-name: blazingStarText;
    animation-duration: 5s;
  }
  
  
  /**
   * starWars
   * - Starwars sequence
   */
  @keyframes starWars {
    0% {
      transform: translate3d(0,500px,0) rotateX(-60deg) scale(2);
    }
    99.9% {
      transform: translate3d(0, -1000px, 0) rotateX(60deg) scale(.19);
    }
    100% {
      display: none;
    }
  }
  
  .starWars {
    animation-timing-function: ease-out;
    transform-origin: bottom center;
    animation-name: starWars;
    animation-duration: 10s;
  }
  
  
  /**************** NORMIE *************/
  
  /**
   * fadeIn
   * - fades in
   */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  
  }
  
  .fadeIn {
    animation-timing-function: linear;
    transform-origin: bottom center;
    animation-name: fadeIn;
    animation-duration: .3s;
  }
  
  
  /**
   * Pulse
   * - Increases and decreases in size
   */
  @keyframes pulse {
    from {
      transform: scale(1);
    }
  
    50% {
      transform: scale(1.1);
    }
  
    to {
      transform: scale(1);
    }
  
  }
  
  .pulse {
    animation-timing-function: linear;
    transform-origin: bottom center;
    animation-name: pulse;
    animation-duration: .75s;
    animation-iteration-count: 3;
  }
  
  /**
   * shaker
   * - Increases and decreases in size
   */
  @keyframes shaker {
    from {
      transform: translate3d(0,0,0);
    }
  
    33% {
      transform: translate3d(-20px,10px,0);
    }
  
    66% {
      transform: translate3d(20px,0px,0);
    }
  
  
    to {
      transform: translate3d(0,0,0);
    }
  
  }
  
  .shaker {
    animation-timing-function: linear;
    transform-origin: bottom center;
    animation-name: shaker;
    animation-duration: .1s;
    animation-iteration-count: 10;
  }

