@charset "UTF-8";
/*
    
    To use animations write following code:
    
    .Classname {
        .Anim(@anim, @delay, @duration);
    }
    
    Existing @anim 's:
    
    - flash
    - shake
    - bounce
    - tada
    - swing
    - wobble
    - pulse 
    - flip
    - flipInX
    - flipInY
    - fadeIn
    - fadeInUp
    - fadeInDown
    - fadeInLeft
    - fadeInRight
    - fadeInUpBig
    - fadeInDownBig
    - fadeInLeftBig
    - fadeInRightBig
    - fadeOut
    - fadeOutUp
    - fadeOutDown
    - fadeOutLeft
    - fadeOutRight
    - fadeOutUpBig
    - fadeOutDownBig
    - fadeOutLeftBig
    - fadeOutRightBig
    - bounceIn
    - slideInDown
    - slideInLeft
    - slideInRight
    - slideOutLeft
    - slideOutRight
    - slideOutUp
    - bounceInUp
    - bounceInDown
    - bounceInLeft
    - bounceInRight
    - bounceOut
    - bounceOutUp
    - bounceOutDown
    - bounceOutLeft
    - bounceOutRight
    - rotateIn
    - rotateInUpLeft
    - rotateInDownLeft
    - rotateInUpRight
    - rotateInDownRight
    - rotateOut
    - rotateOutUpLeft
    - rotateOutDownLeft
    - rotateOutUpRight
    - rotateOutDownRight
    - hinge
    - rollIn
    - rollOut
    - LightSpeedIn
    - LightSpeedOut
*/
/* flash */
@-webkit-keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
@-moz-keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
@-o-keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
@keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
/* shake */
@-webkit-keyframes shake {
  0%,
  100% {
    -webkit-transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateX(-10px);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateX(10px);
  }
}
@-moz-keyframes shake {
  0%,
  100% {
    -moz-transform: translateX(0);
  }
  0%,
  100% {
    -moz-transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -moz-transform: translateX(-10px);
  }
  20%,
  40%,
  60%,
  80% {
    -moz-transform: translateX(10px);
  }
}
@-o-keyframes shake {
  0%,
  100% {
    -o-transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -o-transform: translateX(-10px);
  }
  20%,
  40%,
  60%,
  80% {
    -o-transform: translateX(10px);
  }
}
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-10px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(10px);
  }
}
/* bounce */
@-webkit-keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
  }
}
@-moz-keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -moz-transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
  }
}
@-o-keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -o-transform: translateY(0);
  }
  40% {
    -o-transform: translateY(-30px);
  }
  60% {
    -o-transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
/* tada */
@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
  }
  10%,
  20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale(1.1) rotate(3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
  }
}
@-moz-keyframes tada {
  0% {
    -moz-transform: scale(1);
  }
  10%,
  20% {
    -moz-transform: scale(0.9) rotate(-3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -moz-transform: scale(1.1) rotate(3deg);
  }
  40%,
  60%,
  80% {
    -moz-transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -moz-transform: scale(1) rotate(0);
  }
}
@-o-keyframes tada {
  0% {
    -o-transform: scale(1);
  }
  10%,
  20% {
    -o-transform: scale(0.9) rotate(-3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -o-transform: scale(1.1) rotate(3deg);
  }
  40%,
  60%,
  80% {
    -o-transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -o-transform: scale(1) rotate(0);
  }
}
@keyframes tada {
  0% {
    transform: scale(1);
  }
  10%,
  20% {
    transform: scale(0.9) rotate(-3deg);
  }
  30%,
  50%,
  70%,
  90% {
    transform: scale(1.1) rotate(3deg);
  }
  40%,
  60%,
  80% {
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
/* swing */
@-webkit-keyframes swing {
  20%,
  40%,
  60%,
  80%,
  100% {
    -webkit-transform-origin: top center;
  }
  20% {
    -webkit-transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
@-moz-keyframes swing {
  20% {
    -moz-transform: rotate(15deg);
  }
  40% {
    -moz-transform: rotate(-10deg);
  }
  60% {
    -moz-transform: rotate(5deg);
  }
  80% {
    -moz-transform: rotate(-5deg);
  }
  100% {
    -moz-transform: rotate(0deg);
  }
}
@-o-keyframes swing {
  20% {
    -o-transform: rotate(15deg);
  }
  40% {
    -o-transform: rotate(-10deg);
  }
  60% {
    -o-transform: rotate(5deg);
  }
  80% {
    -o-transform: rotate(-5deg);
  }
  100% {
    -o-transform: rotate(0deg);
  }
}
@keyframes swing {
  20% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/* wobble */
@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
  }
  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
  }
  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
  }
  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    -webkit-transform: translateX(0%);
  }
}
@-moz-keyframes wobble {
  0% {
    -moz-transform: translateX(0%);
  }
  15% {
    -moz-transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    -moz-transform: translateX(20%) rotate(3deg);
  }
  45% {
    -moz-transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    -moz-transform: translateX(10%) rotate(2deg);
  }
  75% {
    -moz-transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    -moz-transform: translateX(0%);
  }
}
@-o-keyframes wobble {
  0% {
    -o-transform: translateX(0%);
  }
  15% {
    -o-transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    -o-transform: translateX(20%) rotate(3deg);
  }
  45% {
    -o-transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    -o-transform: translateX(10%) rotate(2deg);
  }
  75% {
    -o-transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    -o-transform: translateX(0%);
  }
}
@keyframes wobble {
  0% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    transform: translateX(0%);
  }
}
/* pulse */
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(1);
  }
  50% {
    -moz-transform: scale(1.1);
  }
  100% {
    -moz-transform: scale(1);
  }
}
@-o-keyframes pulse {
  0% {
    -o-transform: scale(1);
  }
  50% {
    -o-transform: scale(1.1);
  }
  100% {
    -o-transform: scale(1);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
/* flip */
@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
  }
}
@-moz-keyframes flip {
  0% {
    -moz-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -moz-animation-timing-function: ease-out;
  }
  40% {
    -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -moz-animation-timing-function: ease-out;
  }
  50% {
    -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -moz-animation-timing-function: ease-in;
  }
  80% {
    -moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -moz-animation-timing-function: ease-in;
  }
  100% {
    -moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -moz-animation-timing-function: ease-in;
  }
}
@-o-keyframes flip {
  0% {
    -o-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -o-animation-timing-function: ease-out;
  }
  40% {
    -o-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -o-animation-timing-function: ease-out;
  }
  50% {
    -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -o-animation-timing-function: ease-in;
  }
  80% {
    -o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -o-animation-timing-function: ease-in;
  }
  100% {
    -o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -o-animation-timing-function: ease-in;
  }
}
@keyframes flip {
  0% {
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    animation-timing-function: ease-out;
  }
  50% {
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    animation-timing-function: ease-in;
  }
  80% {
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    animation-timing-function: ease-in;
  }
  100% {
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    animation-timing-function: ease-in;
  }
}
/* flipInX */
@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}
@-moz-keyframes flipInX {
  0% {
    -moz-transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    -moz-transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    -moz-transform: perspective(400px) rotateX(10deg);
  }
  100% {
    -moz-transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}
@-o-keyframes flipInX {
  0% {
    -o-transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    -o-transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    -o-transform: perspective(400px) rotateX(10deg);
  }
  100% {
    -o-transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}
@keyframes flipInX {
  0% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    transform: perspective(400px) rotateX(10deg);
  }
  100% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}
/* flipOutX */
@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
@-moz-keyframes flipOutX {
  0% {
    -moz-transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
  100% {
    -moz-transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
@-o-keyframes flipOutX {
  0% {
    -o-transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
  100% {
    -o-transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  0% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
  100% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
/* flipInY */
@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}
@-moz-keyframes flipInY {
  0% {
    -moz-transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  40% {
    -moz-transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    -moz-transform: perspective(400px) rotateY(10deg);
  }
  100% {
    -moz-transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}
@-o-keyframes flipInY {
  0% {
    -o-transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  40% {
    -o-transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    -o-transform: perspective(400px) rotateY(10deg);
  }
  100% {
    -o-transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}
@keyframes flipInY {
  0% {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    transform: perspective(400px) rotateY(10deg);
  }
  100% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}
/* flipOutY */
@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
@-moz-keyframes flipOutY {
  0% {
    -moz-transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
  100% {
    -moz-transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
@-o-keyframes flipOutY {
  0% {
    -o-transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
  100% {
    -o-transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  0% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
  100% {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
/* fadeIn */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* fadeInUp  */
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes fadeInUp {
  0% {
    opacity: 0;
    -moz-transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}
@-o-keyframes fadeInUp {
  0% {
    opacity: 0;
    -o-transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -o-transform: translateY(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* fadeInDown */
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes fadeInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}
@-o-keyframes fadeInDown {
  0% {
    opacity: 0;
    -o-transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -o-transform: translateY(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* fadeInLeft */
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -moz-transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}
@-o-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -o-transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -o-transform: translateX(0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/* fadeInRight */
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes fadeInRight {
  0% {
    opacity: 0;
    -moz-transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}
@-o-keyframes fadeInRight {
  0% {
    opacity: 0;
    -o-transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -o-transform: translateX(0);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/* fadeInUpBig */
@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -moz-transform: translateY(2000px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}
@-o-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -o-transform: translateY(2000px);
  }
  100% {
    opacity: 1;
    -o-transform: translateY(0);
  }
}
@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* fadeInDownBig */
@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -moz-transform: translateY(-2000px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}
@-o-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -o-transform: translateY(-2000px);
  }
  100% {
    opacity: 1;
    -o-transform: translateY(0);
  }
}
@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* fadeInLeftBig */
@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -moz-transform: translateX(-2000px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}
@-o-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -o-transform: translateX(-2000px);
  }
  100% {
    opacity: 1;
    -o-transform: translateX(0);
  }
}
@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/* fadeInRightBig */
@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -moz-transform: translateX(2000px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}
@-o-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -o-transform: translateX(2000px);
  }
  100% {
    opacity: 1;
    -o-transform: translateX(0);
  }
}
@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/* fadeOut */
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* fadeOutUp */
@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
  }
}
@-moz-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -moz-transform: translateY(-20px);
  }
}
@-o-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -o-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -o-transform: translateY(-20px);
  }
}
@keyframes fadeOutUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}
/* fadeOutDown */
@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
  }
}
@-moz-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -moz-transform: translateY(20px);
  }
}
@-o-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -o-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -o-transform: translateY(20px);
  }
}
@keyframes fadeOutDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}
/* fadeOutLeft */
@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
  }
}
@-moz-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -moz-transform: translateX(-20px);
  }
}
@-o-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -o-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -o-transform: translateX(-20px);
  }
}
@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-20px);
  }
}
/* fadeOutRight */
@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
  }
}
@-moz-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -moz-transform: translateX(20px);
  }
}
@-o-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -o-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -o-transform: translateX(20px);
  }
}
@keyframes fadeOutRight {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(20px);
  }
}
/* fadeOutUpBig */
@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
  }
}
@-moz-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -moz-transform: translateY(-2000px);
  }
}
@-o-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -o-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -o-transform: translateY(-2000px);
  }
}
@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}
/* fadeOutDownBig */
@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
  }
}
@-moz-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -moz-transform: translateY(2000px);
  }
}
@-o-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -o-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -o-transform: translateY(2000px);
  }
}
@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(2000px);
  }
}
/* fadeOutLeftBig */
@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
  }
}
@-moz-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -moz-transform: translateX(-2000px);
  }
}
@-o-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -o-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -o-transform: translateX(-2000px);
  }
}
@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-2000px);
  }
}
/* fadeOutRightBig */
@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
  }
}
@-moz-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -moz-transform: translateX(2000px);
  }
}
@-o-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -o-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -o-transform: translateX(2000px);
  }
}
@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(2000px);
  }
}
/* bounceIn */
@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes bounceIn {
  0% {
    opacity: 0;
    -moz-transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -moz-transform: scale(1.05);
  }
  70% {
    -moz-transform: scale(0.9);
  }
  100% {
    -moz-transform: scale(1);
  }
}
@-o-keyframes bounceIn {
  0% {
    opacity: 0;
    -o-transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -o-transform: scale(1.05);
  }
  70% {
    -o-transform: scale(0.9);
  }
  100% {
    -o-transform: scale(1);
  }
}
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
/* slideInDown */
@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes slideInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-2000px);
  }
  100% {
    -moz-transform: translateY(0);
  }
}
@-o-keyframes slideInDown {
  0% {
    opacity: 0;
    -o-transform: translateY(-2000px);
  }
  100% {
    -o-transform: translateY(0);
  }
}
@keyframes slideInDown {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }
  100% {
    transform: translateY(0);
  }
}
/* slideInLeft */
@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
  }
  100% {
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes slideInLeft {
  0% {
    opacity: 0;
    -moz-transform: translateX(-2000px);
  }
  100% {
    -moz-transform: translateX(0);
  }
}
@-o-keyframes slideInLeft {
  0% {
    opacity: 0;
    -o-transform: translateX(-2000px);
  }
  100% {
    -o-transform: translateX(0);
  }
}
@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }
  100% {
    transform: translateX(0);
  }
}
/* slideInRight */
@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
  }
  100% {
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes slideInRight {
  0% {
    opacity: 0;
    -moz-transform: translateX(2000px);
  }
  100% {
    -moz-transform: translateX(0);
  }
}
@-o-keyframes slideInRight {
  0% {
    opacity: 0;
    -o-transform: translateX(2000px);
  }
  100% {
    -o-transform: translateX(0);
  }
}
@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  100% {
    transform: translateX(0);
  }
}
/* slideOutLeft */
@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
  }
}
@-moz-keyframes slideOutLeft {
  0% {
    -moz-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -moz-transform: translateX(-2000px);
  }
}
@-o-keyframes slideOutLeft {
  0% {
    -o-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -o-transform: translateX(-2000px);
  }
}
@keyframes slideOutLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-2000px);
  }
}
/* slideOutRight */
@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
  }
}
@-moz-keyframes slideOutRight {
  0% {
    -moz-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -moz-transform: translateX(2000px);
  }
}
@-o-keyframes slideOutRight {
  0% {
    -o-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -o-transform: translateX(2000px);
  }
}
@keyframes slideOutRight {
  0% {
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(2000px);
  }
}
/* slideOutUp */
@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
  }
}
@-moz-keyframes slideOutUp {
  0% {
    -moz-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -moz-transform: translateY(-2000px);
  }
}
@-o-keyframes slideOutUp {
  0% {
    -o-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -o-transform: translateY(-2000px);
  }
}
@keyframes slideOutUp {
  0% {
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}
/* bounceInUp */
@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
  }
  80% {
    -webkit-transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes bounceInUp {
  0% {
    opacity: 0;
    -moz-transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    -moz-transform: translateY(-30px);
  }
  80% {
    -moz-transform: translateY(10px);
  }
  100% {
    -moz-transform: translateY(0);
  }
}
@-o-keyframes bounceInUp {
  0% {
    opacity: 0;
    -o-transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    -o-transform: translateY(-30px);
  }
  80% {
    -o-transform: translateY(10px);
  }
  100% {
    -o-transform: translateY(0);
  }
}
@keyframes bounceInUp {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(-30px);
  }
  80% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}
/* bounceInDown */
@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
  }
  80% {
    -webkit-transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes bounceInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-2000px);
  }
  60% {
    opacity: 1;
    -moz-transform: translateY(30px);
  }
  80% {
    -moz-transform: translateY(-10px);
  }
  100% {
    -moz-transform: translateY(0);
  }
}
@-o-keyframes bounceInDown {
  0% {
    opacity: 0;
    -o-transform: translateY(-2000px);
  }
  60% {
    opacity: 1;
    -o-transform: translateY(30px);
  }
  80% {
    -o-transform: translateY(-10px);
  }
  100% {
    -o-transform: translateY(0);
  }
}
@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(30px);
  }
  80% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
/* bounceInLeft */
@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
  }
  80% {
    -webkit-transform: translateX(-10px);
  }
  100% {
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -moz-transform: translateX(-2000px);
  }
  60% {
    opacity: 1;
    -moz-transform: translateX(30px);
  }
  80% {
    -moz-transform: translateX(-10px);
  }
  100% {
    -moz-transform: translateX(0);
  }
}
@-o-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -o-transform: translateX(-2000px);
  }
  60% {
    opacity: 1;
    -o-transform: translateX(30px);
  }
  80% {
    -o-transform: translateX(-10px);
  }
  100% {
    -o-transform: translateX(0);
  }
}
@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(30px);
  }
  80% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}
/* bounceInRight */
@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
  }
  80% {
    -webkit-transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes bounceInRight {
  0% {
    opacity: 0;
    -moz-transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    -moz-transform: translateX(-30px);
  }
  80% {
    -moz-transform: translateX(10px);
  }
  100% {
    -moz-transform: translateX(0);
  }
}
@-o-keyframes bounceInRight {
  0% {
    opacity: 0;
    -o-transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    -o-transform: translateX(-30px);
  }
  80% {
    -o-transform: translateX(10px);
  }
  100% {
    -o-transform: translateX(0);
  }
}
@keyframes bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(-30px);
  }
  80% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}
/* bounceOut */
@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
  }
  25% {
    -webkit-transform: scale(0.95);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
  }
}
@-moz-keyframes bounceOut {
  0% {
    -moz-transform: scale(1);
  }
  25% {
    -moz-transform: scale(0.95);
  }
  50% {
    opacity: 1;
    -moz-transform: scale(1.1);
  }
  100% {
    opacity: 0;
    -moz-transform: scale(0.3);
  }
}
@-o-keyframes bounceOut {
  0% {
    -o-transform: scale(1);
  }
  25% {
    -o-transform: scale(0.95);
  }
  50% {
    opacity: 1;
    -o-transform: scale(1.1);
  }
  100% {
    opacity: 0;
    -o-transform: scale(0.3);
  }
}
@keyframes bounceOut {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}
/* bounceOutUp */
@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
  }
}
@-moz-keyframes bounceOutUp {
  0% {
    -moz-transform: translateY(0);
  }
  20% {
    opacity: 1;
    -moz-transform: translateY(20px);
  }
  100% {
    opacity: 0;
    -moz-transform: translateY(-2000px);
  }
}
@-o-keyframes bounceOutUp {
  0% {
    -o-transform: translateY(0);
  }
  20% {
    opacity: 1;
    -o-transform: translateY(20px);
  }
  100% {
    opacity: 0;
    -o-transform: translateY(-2000px);
  }
}
@keyframes bounceOutUp {
  0% {
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    transform: translateY(20px);
  }
  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}
/* bounceOutDown */
@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
  }
}
@-moz-keyframes bounceOutDown {
  0% {
    -moz-transform: translateY(0);
  }
  20% {
    opacity: 1;
    -moz-transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    -moz-transform: translateY(2000px);
  }
}
@-o-keyframes bounceOutDown {
  0% {
    -o-transform: translateY(0);
  }
  20% {
    opacity: 1;
    -o-transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    -o-transform: translateY(2000px);
  }
}
@keyframes bounceOutDown {
  0% {
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    transform: translateY(2000px);
  }
}
/* bounceOutLeft */
@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
  }
}
@-moz-keyframes bounceOutLeft {
  0% {
    -moz-transform: translateX(0);
  }
  20% {
    opacity: 1;
    -moz-transform: translateX(20px);
  }
  100% {
    opacity: 0;
    -moz-transform: translateX(-2000px);
  }
}
@-o-keyframes bounceOutLeft {
  0% {
    -o-transform: translateX(0);
  }
  20% {
    opacity: 1;
    -o-transform: translateX(20px);
  }
  100% {
    opacity: 0;
    -o-transform: translateX(-2000px);
  }
}
@keyframes bounceOutLeft {
  0% {
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    transform: translateX(20px);
  }
  100% {
    opacity: 0;
    transform: translateX(-2000px);
  }
}
/* bounceOutRight */
@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
  }
}
@-moz-keyframes bounceOutRight {
  0% {
    -moz-transform: translateX(0);
  }
  20% {
    opacity: 1;
    -moz-transform: translateX(-20px);
  }
  100% {
    opacity: 0;
    -moz-transform: translateX(2000px);
  }
}
@-o-keyframes bounceOutRight {
  0% {
    -o-transform: translateX(0);
  }
  20% {
    opacity: 1;
    -o-transform: translateX(-20px);
  }
  100% {
    opacity: 0;
    -o-transform: translateX(2000px);
  }
}
@keyframes bounceOutRight {
  0% {
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    transform: translateX(-20px);
  }
  100% {
    opacity: 0;
    transform: translateX(2000px);
  }
}
/* rotateIn */
@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}
@-moz-keyframes rotateIn {
  0% {
    -moz-transform-origin: center center;
    -moz-transform: rotate(-200deg);
    opacity: 0;
  }
  100% {
    -moz-transform-origin: center center;
    -moz-transform: rotate(0);
    opacity: 1;
  }
}
@-o-keyframes rotateIn {
  0% {
    -o-transform-origin: center center;
    -o-transform: rotate(-200deg);
    opacity: 0;
  }
  100% {
    -o-transform-origin: center center;
    -o-transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateIn {
  0% {
    transform-origin: center center;
    transform: rotate(-200deg);
    opacity: 0;
  }
  100% {
    transform-origin: center center;
    transform: rotate(0);
    opacity: 1;
  }
}
/* rotateInUpLeft */
@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}
@-moz-keyframes rotateInUpLeft {
  0% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(0);
    opacity: 1;
  }
}
@-o-keyframes rotateInUpLeft {
  0% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}
/* rotateInDownLeft */
@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}
@-moz-keyframes rotateInDownLeft {
  0% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(0);
    opacity: 1;
  }
}
@-o-keyframes rotateInDownLeft {
  0% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}
/* rotateInUpRight */
@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}
@-moz-keyframes rotateInUpRight {
  0% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(0);
    opacity: 1;
  }
}
@-o-keyframes rotateInUpRight {
  0% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }
}
/* rotateInDownRight */
@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}
@-moz-keyframes rotateInDownRight {
  0% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(0);
    opacity: 1;
  }
}
@-o-keyframes rotateInDownRight {
  0% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }
}
/* rotateOut */
@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(200deg);
    opacity: 0;
  }
}
@-moz-keyframes rotateOut {
  0% {
    -moz-transform-origin: center center;
    -moz-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -moz-transform-origin: center center;
    -moz-transform: rotate(200deg);
    opacity: 0;
  }
}
@-o-keyframes rotateOut {
  0% {
    -o-transform-origin: center center;
    -o-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -o-transform-origin: center center;
    -o-transform: rotate(200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  0% {
    transform-origin: center center;
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform-origin: center center;
    transform: rotate(200deg);
    opacity: 0;
  }
}
/* rotateOutUpLeft */
@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }
}
@-moz-keyframes rotateOutUpLeft {
  0% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(-90deg);
    opacity: 0;
  }
}
@-o-keyframes rotateOutUpLeft {
  0% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(-90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
}
/* rotateOutDownLeft */
@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
}
@-moz-keyframes rotateOutDownLeft {
  0% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(90deg);
    opacity: 0;
  }
}
@-o-keyframes rotateOutDownLeft {
  0% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
}
/* rotateOutUpRight */
@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
}
@-moz-keyframes rotateOutUpRight {
  0% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(90deg);
    opacity: 0;
  }
}
@-o-keyframes rotateOutUpRight {
  0% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
}
/* rotateOutDownRight */
@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }
}
@-moz-keyframes rotateOutDownRight {
  0% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(-90deg);
    opacity: 0;
  }
}
@-o-keyframes rotateOutDownRight {
  0% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(-90deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
}
/* hinge */
@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
  }
  20%,
  60% {
    -webkit-transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
  }
  40% {
    -webkit-transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
  }
  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
  }
  100% {
    -webkit-transform: translateY(700px);
    opacity: 0;
  }
}
@-moz-keyframes hinge {
  0% {
    -moz-transform: rotate(0);
    -moz-transform-origin: top left;
    -moz-animation-timing-function: ease-in-out;
  }
  20%,
  60% {
    -moz-transform: rotate(80deg);
    -moz-transform-origin: top left;
    -moz-animation-timing-function: ease-in-out;
  }
  40% {
    -moz-transform: rotate(60deg);
    -moz-transform-origin: top left;
    -moz-animation-timing-function: ease-in-out;
  }
  80% {
    -moz-transform: rotate(60deg) translateY(0);
    opacity: 1;
    -moz-transform-origin: top left;
    -moz-animation-timing-function: ease-in-out;
  }
  100% {
    -moz-transform: translateY(700px);
    opacity: 0;
  }
}
@-o-keyframes hinge {
  0% {
    -o-transform: rotate(0);
    -o-transform-origin: top left;
    -o-animation-timing-function: ease-in-out;
  }
  20%,
  60% {
    -o-transform: rotate(80deg);
    -o-transform-origin: top left;
    -o-animation-timing-function: ease-in-out;
  }
  40% {
    -o-transform: rotate(60deg);
    -o-transform-origin: top left;
    -o-animation-timing-function: ease-in-out;
  }
  80% {
    -o-transform: rotate(60deg) translateY(0);
    opacity: 1;
    -o-transform-origin: top left;
    -o-animation-timing-function: ease-in-out;
  }
  100% {
    -o-transform: translateY(700px);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    transform: rotate(0);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  20%,
  60% {
    transform: rotate(80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  40% {
    transform: rotate(60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  80% {
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateY(700px);
    opacity: 0;
  }
}
/* rollIn */
@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
  }
}
@-moz-keyframes rollIn {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0px) rotate(0deg);
  }
}
@-o-keyframes rollIn {
  0% {
    opacity: 0;
    -o-transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    -o-transform: translateX(0px) rotate(0deg);
  }
}
@keyframes rollIn {
  0% {
    opacity: 0;
    transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
  }
}
/* rollOut */
@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
  }
}
@-moz-keyframes rollOut {
  0% {
    opacity: 1;
    -moz-transform: translateX(0px) rotate(0deg);
  }
  100% {
    opacity: 0;
    -moz-transform: translateX(100%) rotate(120deg);
  }
}
@-o-keyframes rollOut {
  0% {
    opacity: 1;
    -o-transform: translateX(0px) rotate(0deg);
  }
  100% {
    opacity: 0;
    -o-transform: translateX(100%) rotate(120deg);
  }
}
@keyframes rollOut {
  0% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateX(100%) rotate(120deg);
  }
}
/* LightSpeedIn */
@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}
@-moz-keyframes lightSpeedIn {
  0% {
    -moz-transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -moz-transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }
  80% {
    -moz-transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }
  100% {
    -moz-transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}
@-o-keyframes lightSpeedIn {
  0% {
    -o-transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -o-transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }
  80% {
    -o-transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }
  100% {
    -o-transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}
@keyframes lightSpeedIn {
  0% {
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
  60% {
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }
  80% {
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }
  100% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}
/* LightSpeedOut */
@-webkit-keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}
@-moz-keyframes lightSpeedOut {
  0% {
    -moz-transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
  100% {
    -moz-transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}
@-o-keyframes lightSpeedOut {
  0% {
    -o-transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
  100% {
    -o-transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOut {
  0% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}
/* Widths */
/* Breakpoints */
/* Gutters
=========================================== */
/* Basics
=========================================== */
html,
body {
  background: #000;
  overflow-y: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  margin: 0;
  padding: 0;
}
body {
  overflow: hidden;
  width: 100%;
  font-family: "strom", avenir, helvetica, sans-serif;
  color: #fff;
}
img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  max-width: 100%;
  opacity: 0.9;
}
img:hover {
  opacity: 0.7;
}
section {
  min-height: 90vh;
  padding: 20px 0;
}
/* Framework
=========================================== */
.wrapper {
  width: 100%;
  max-width: 820px;
  margin: 40px auto 60px;
}
.wrapper.right {
  text-align: right;
}
.wrapper.center {
  text-align: center;
}
.wrapper .content {
  text-align: left;
  display: inline-block;
  padding: 20px 30px;
}
.wrapper .content.wide {
  max-width: 100%;
  margin-bottom: 0;
  padding-bottom: 0;
}
@media only screen and (max-width: 1280px) {
  .wrapper .content {
    padding: 10px;
  }
}
/* Typography
=========================================== */
h1,
h2,
h3,
h4,
h5 {
  line-height: 1.2;
  margin: 0 0 30px;
}
h1 + span,
h2 + span,
h3 + span,
h4 + span,
h5 + span {
  font-size: 18px;
}
h1 {
  font-size: 6vw;
  -webkit-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  -o-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  -o-animation-delay: 0.1s;
  animation-delay: 0.1s;
  -webkit-animation-name: fadeInUp;
  -moz-animation-name: fadeInUp;
  -o-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
h2 {
  font-size: 36px;
  margin-bottom: 20px;
  -webkit-animation-duration: 0.6s;
  -moz-animation-duration: 0.6s;
  -o-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  -o-animation-delay: 0.1s;
  animation-delay: 0.1s;
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
h3 {
  font-size: 20px;
  margin-bottom: 10px;
  -webkit-animation-duration: 0.4s;
  -moz-animation-duration: 0.4s;
  -o-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  -o-animation-delay: 0.1s;
  animation-delay: 0.1s;
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
p,
ul,
li {
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 15px;
  -webkit-animation-duration: 0.7s;
  -moz-animation-duration: 0.7s;
  -o-animation-duration: 0.7s;
  animation-duration: 0.7s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  -o-animation-delay: 0.1s;
  animation-delay: 0.1s;
  -webkit-animation-name: fadeIn;
  -moz-animation-name: fadeIn;
  -o-animation-name: fadeIn;
  animation-name: fadeIn;
}
span {
  display: inline-block;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  transition: opacity 0.3s;
  opacity: 0.6;
}
/* Global classes
=========================================== */
.textCenter {
  text-align: center;
}
.textRight {
  text-align: right !important;
}
.gutter {
  padding: 30px;
}
.gutterSmall {
  padding: 10px;
}
.gutterLarge {
  padding: 160px;
}
@media only screen and (max-width: 1280px) {
  h1 {
    font-size: 8vw;
  }
  h2 {
    font-size: 26px;
  }
}
@media only screen and (max-width: 800px) {
  h1 {
    font-size: 12vw;
  }
}
/*
    This generates size classes that can be used with the Grid component. 
    The classes are only active from a specified breakpoint.

    For example if you apply .u-md-size1of2 to an element
    it will get width 50% when the screen-width is larger than medium width (@bpMedium).

    Adding another class of .u-lg-size1of4 would mean the element gets 25% when @bpLarge breakpoint gets active.
*/
/* Intrinsic widths
   ========================================================================== */
/** 
     * Make an element shrink wrap its content.
     */
.u-sizeFit,
.u-sizeFitAlt {
  display: block !important;
  float: left !important;
  width: auto !important;
}
.u-sizeFitAlt {
  float: right !important;
}
/**
     * Make an element fill the remaining space.
     * N.B. This will hide overflow.
     */
.u-sizeFill {
  display: block !important;
  overflow: hidden !important;
  width: auto !important;
}
/**
     * An alternative method to make an element fill the remaining space.
     * N.B. Do not use if child elements might be wider than the remaining space.
     * In Chrome, Safari, and Firefox it results in undesired layout.
     */
.u-sizeFillAlt {
  display: table-cell !important;
  max-width: 100% !important;
  width: 10000px !important;
}
/**
     * Make an element the width of its parent.
     */
.u-sizeFull {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
}
/* Proportional widths
   ========================================================================== */
/**
     * Specify the proportional width of an object.
     * Intentional redundancy build into each set of unit classes.
     * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
     */
.u-size1of12 {
  width: 8.33333333% !important;
}
.u-size1of10 {
  width: 10% !important;
}
.u-size1of8 {
  width: 12.5% !important;
}
.u-size1of6,
.u-size2of12 {
  width: 16.66666667% !important;
}
.u-size1of5,
.u-size2of10 {
  width: 20% !important;
}
.u-size1of4,
.u-size2of8,
.u-size3of12 {
  width: 25% !important;
}
.u-size3of10 {
  width: 30% !important;
}
.u-size1of3,
.u-size2of6,
.u-size4of12 {
  width: 33.33333333% !important;
}
.u-size3of8 {
  width: 37.5% !important;
}
.u-size2of5,
.u-size4of10 {
  width: 40% !important;
}
.u-size5of12 {
  width: 41.66666667% !important;
}
.u-size1of2,
.u-size2of4,
.u-size3of6,
.u-size4of8,
.u-size5of10,
.u-size6of12 {
  width: 50% !important;
}
.u-size7of12 {
  width: 58.33333333% !important;
}
.u-size3of5,
.u-size6of10 {
  width: 60% !important;
}
.u-size5of8 {
  width: 62.5% !important;
}
.u-size2of3,
.u-size4of6,
.u-size8of12 {
  width: 66.66666667% !important;
}
.u-size7of10 {
  width: 70% !important;
}
.u-size3of4,
.u-size6of8,
.u-size9of12 {
  width: 75% !important;
}
.u-size4of5,
.u-size8of10 {
  width: 80% !important;
}
.u-size5of6,
.u-size10of12 {
  width: 83.33333333% !important;
}
.u-size7of8 {
  width: 87.5% !important;
}
.u-size9of10 {
  width: 90% !important;
}
.u-size11of12 {
  width: 91.66666667% !important;
}
@media only screen and (min-width: 600px), print {
  /* Intrinsic widths
   ========================================================================== */
  /** 
     * Make an element shrink wrap its content.
     */
  .u-xsm-sizeFit,
  .u-xsm-sizeFitAlt {
    display: block !important;
    float: left !important;
    width: auto !important;
  }
  .u-xsm-sizeFitAlt {
    float: right !important;
  }
  /**
     * Make an element fill the remaining space.
     * N.B. This will hide overflow.
     */
  .u-xsm-sizeFill {
    display: block !important;
    overflow: hidden !important;
    width: auto !important;
  }
  /**
     * An alternative method to make an element fill the remaining space.
     * N.B. Do not use if child elements might be wider than the remaining space.
     * In Chrome, Safari, and Firefox it results in undesired layout.
     */
  .u-xsm-sizeFillAlt {
    display: table-cell !important;
    max-width: 100% !important;
    width: 10000px !important;
  }
  /**
     * Make an element the width of its parent.
     */
  .u-xsm-sizeFull {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
  }
  /* Proportional widths
   ========================================================================== */
  /**
     * Specify the proportional width of an object.
     * Intentional redundancy build into each set of unit classes.
     * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
     */
  .u-xsm-size1of12 {
    width: 8.33333333% !important;
  }
  .u-xsm-size1of10 {
    width: 10% !important;
  }
  .u-xsm-size1of8 {
    width: 12.5% !important;
  }
  .u-xsm-size1of6,
  .u-xsm-size2of12 {
    width: 16.66666667% !important;
  }
  .u-xsm-size1of5,
  .u-xsm-size2of10 {
    width: 20% !important;
  }
  .u-xsm-size1of4,
  .u-xsm-size2of8,
  .u-xsm-size3of12 {
    width: 25% !important;
  }
  .u-xsm-size3of10 {
    width: 30% !important;
  }
  .u-xsm-size1of3,
  .u-xsm-size2of6,
  .u-xsm-size4of12 {
    width: 33.33333333% !important;
  }
  .u-xsm-size3of8 {
    width: 37.5% !important;
  }
  .u-xsm-size2of5,
  .u-xsm-size4of10 {
    width: 40% !important;
  }
  .u-xsm-size5of12 {
    width: 41.66666667% !important;
  }
  .u-xsm-size1of2,
  .u-xsm-size2of4,
  .u-xsm-size3of6,
  .u-xsm-size4of8,
  .u-xsm-size5of10,
  .u-xsm-size6of12 {
    width: 50% !important;
  }
  .u-xsm-size7of12 {
    width: 58.33333333% !important;
  }
  .u-xsm-size3of5,
  .u-xsm-size6of10 {
    width: 60% !important;
  }
  .u-xsm-size5of8 {
    width: 62.5% !important;
  }
  .u-xsm-size2of3,
  .u-xsm-size4of6,
  .u-xsm-size8of12 {
    width: 66.66666667% !important;
  }
  .u-xsm-size7of10 {
    width: 70% !important;
  }
  .u-xsm-size3of4,
  .u-xsm-size6of8,
  .u-xsm-size9of12 {
    width: 75% !important;
  }
  .u-xsm-size4of5,
  .u-xsm-size8of10 {
    width: 80% !important;
  }
  .u-xsm-size5of6,
  .u-xsm-size10of12 {
    width: 83.33333333% !important;
  }
  .u-xsm-size7of8 {
    width: 87.5% !important;
  }
  .u-xsm-size9of10 {
    width: 90% !important;
  }
  .u-xsm-size11of12 {
    width: 91.66666667% !important;
  }
}
@media only screen and (min-width: 800px), print {
  /* Intrinsic widths
   ========================================================================== */
  /** 
     * Make an element shrink wrap its content.
     */
  .u-sm-sizeFit,
  .u-sm-sizeFitAlt {
    display: block !important;
    float: left !important;
    width: auto !important;
  }
  .u-sm-sizeFitAlt {
    float: right !important;
  }
  /**
     * Make an element fill the remaining space.
     * N.B. This will hide overflow.
     */
  .u-sm-sizeFill {
    display: block !important;
    overflow: hidden !important;
    width: auto !important;
  }
  /**
     * An alternative method to make an element fill the remaining space.
     * N.B. Do not use if child elements might be wider than the remaining space.
     * In Chrome, Safari, and Firefox it results in undesired layout.
     */
  .u-sm-sizeFillAlt {
    display: table-cell !important;
    max-width: 100% !important;
    width: 10000px !important;
  }
  /**
     * Make an element the width of its parent.
     */
  .u-sm-sizeFull {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
  }
  /* Proportional widths
   ========================================================================== */
  /**
     * Specify the proportional width of an object.
     * Intentional redundancy build into each set of unit classes.
     * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
     */
  .u-sm-size1of12 {
    width: 8.33333333% !important;
  }
  .u-sm-size1of10 {
    width: 10% !important;
  }
  .u-sm-size1of8 {
    width: 12.5% !important;
  }
  .u-sm-size1of6,
  .u-sm-size2of12 {
    width: 16.66666667% !important;
  }
  .u-sm-size1of5,
  .u-sm-size2of10 {
    width: 20% !important;
  }
  .u-sm-size1of4,
  .u-sm-size2of8,
  .u-sm-size3of12 {
    width: 25% !important;
  }
  .u-sm-size3of10 {
    width: 30% !important;
  }
  .u-sm-size1of3,
  .u-sm-size2of6,
  .u-sm-size4of12 {
    width: 33.33333333% !important;
  }
  .u-sm-size3of8 {
    width: 37.5% !important;
  }
  .u-sm-size2of5,
  .u-sm-size4of10 {
    width: 40% !important;
  }
  .u-sm-size5of12 {
    width: 41.66666667% !important;
  }
  .u-sm-size1of2,
  .u-sm-size2of4,
  .u-sm-size3of6,
  .u-sm-size4of8,
  .u-sm-size5of10,
  .u-sm-size6of12 {
    width: 50% !important;
  }
  .u-sm-size7of12 {
    width: 58.33333333% !important;
  }
  .u-sm-size3of5,
  .u-sm-size6of10 {
    width: 60% !important;
  }
  .u-sm-size5of8 {
    width: 62.5% !important;
  }
  .u-sm-size2of3,
  .u-sm-size4of6,
  .u-sm-size8of12 {
    width: 66.66666667% !important;
  }
  .u-sm-size7of10 {
    width: 70% !important;
  }
  .u-sm-size3of4,
  .u-sm-size6of8,
  .u-sm-size9of12 {
    width: 75% !important;
  }
  .u-sm-size4of5,
  .u-sm-size8of10 {
    width: 80% !important;
  }
  .u-sm-size5of6,
  .u-sm-size10of12 {
    width: 83.33333333% !important;
  }
  .u-sm-size7of8 {
    width: 87.5% !important;
  }
  .u-sm-size9of10 {
    width: 90% !important;
  }
  .u-sm-size11of12 {
    width: 91.66666667% !important;
  }
}
@media only screen and (min-width: 1280px), print {
  /* Intrinsic widths
   ========================================================================== */
  /** 
     * Make an element shrink wrap its content.
     */
  .u-md-sizeFit,
  .u-md-sizeFitAlt {
    display: block !important;
    float: left !important;
    width: auto !important;
  }
  .u-md-sizeFitAlt {
    float: right !important;
  }
  /**
     * Make an element fill the remaining space.
     * N.B. This will hide overflow.
     */
  .u-md-sizeFill {
    display: block !important;
    overflow: hidden !important;
    width: auto !important;
  }
  /**
     * An alternative method to make an element fill the remaining space.
     * N.B. Do not use if child elements might be wider than the remaining space.
     * In Chrome, Safari, and Firefox it results in undesired layout.
     */
  .u-md-sizeFillAlt {
    display: table-cell !important;
    max-width: 100% !important;
    width: 10000px !important;
  }
  /**
     * Make an element the width of its parent.
     */
  .u-md-sizeFull {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
  }
  /* Proportional widths
   ========================================================================== */
  /**
     * Specify the proportional width of an object.
     * Intentional redundancy build into each set of unit classes.
     * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
     */
  .u-md-size1of12 {
    width: 8.33333333% !important;
  }
  .u-md-size1of10 {
    width: 10% !important;
  }
  .u-md-size1of8 {
    width: 12.5% !important;
  }
  .u-md-size1of6,
  .u-md-size2of12 {
    width: 16.66666667% !important;
  }
  .u-md-size1of5,
  .u-md-size2of10 {
    width: 20% !important;
  }
  .u-md-size1of4,
  .u-md-size2of8,
  .u-md-size3of12 {
    width: 25% !important;
  }
  .u-md-size3of10 {
    width: 30% !important;
  }
  .u-md-size1of3,
  .u-md-size2of6,
  .u-md-size4of12 {
    width: 33.33333333% !important;
  }
  .u-md-size3of8 {
    width: 37.5% !important;
  }
  .u-md-size2of5,
  .u-md-size4of10 {
    width: 40% !important;
  }
  .u-md-size5of12 {
    width: 41.66666667% !important;
  }
  .u-md-size1of2,
  .u-md-size2of4,
  .u-md-size3of6,
  .u-md-size4of8,
  .u-md-size5of10,
  .u-md-size6of12 {
    width: 50% !important;
  }
  .u-md-size7of12 {
    width: 58.33333333% !important;
  }
  .u-md-size3of5,
  .u-md-size6of10 {
    width: 60% !important;
  }
  .u-md-size5of8 {
    width: 62.5% !important;
  }
  .u-md-size2of3,
  .u-md-size4of6,
  .u-md-size8of12 {
    width: 66.66666667% !important;
  }
  .u-md-size7of10 {
    width: 70% !important;
  }
  .u-md-size3of4,
  .u-md-size6of8,
  .u-md-size9of12 {
    width: 75% !important;
  }
  .u-md-size4of5,
  .u-md-size8of10 {
    width: 80% !important;
  }
  .u-md-size5of6,
  .u-md-size10of12 {
    width: 83.33333333% !important;
  }
  .u-md-size7of8 {
    width: 87.5% !important;
  }
  .u-md-size9of10 {
    width: 90% !important;
  }
  .u-md-size11of12 {
    width: 91.66666667% !important;
  }
}
@media only screen and (min-width: 1440px), print {
  /* Intrinsic widths
   ========================================================================== */
  /** 
     * Make an element shrink wrap its content.
     */
  .u-lg-sizeFit,
  .u-lg-sizeFitAlt {
    display: block !important;
    float: left !important;
    width: auto !important;
  }
  .u-lg-sizeFitAlt {
    float: right !important;
  }
  /**
     * Make an element fill the remaining space.
     * N.B. This will hide overflow.
     */
  .u-lg-sizeFill {
    display: block !important;
    overflow: hidden !important;
    width: auto !important;
  }
  /**
     * An alternative method to make an element fill the remaining space.
     * N.B. Do not use if child elements might be wider than the remaining space.
     * In Chrome, Safari, and Firefox it results in undesired layout.
     */
  .u-lg-sizeFillAlt {
    display: table-cell !important;
    max-width: 100% !important;
    width: 10000px !important;
  }
  /**
     * Make an element the width of its parent.
     */
  .u-lg-sizeFull {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
  }
  /* Proportional widths
   ========================================================================== */
  /**
     * Specify the proportional width of an object.
     * Intentional redundancy build into each set of unit classes.
     * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
     */
  .u-lg-size1of12 {
    width: 8.33333333% !important;
  }
  .u-lg-size1of10 {
    width: 10% !important;
  }
  .u-lg-size1of8 {
    width: 12.5% !important;
  }
  .u-lg-size1of6,
  .u-lg-size2of12 {
    width: 16.66666667% !important;
  }
  .u-lg-size1of5,
  .u-lg-size2of10 {
    width: 20% !important;
  }
  .u-lg-size1of4,
  .u-lg-size2of8,
  .u-lg-size3of12 {
    width: 25% !important;
  }
  .u-lg-size3of10 {
    width: 30% !important;
  }
  .u-lg-size1of3,
  .u-lg-size2of6,
  .u-lg-size4of12 {
    width: 33.33333333% !important;
  }
  .u-lg-size3of8 {
    width: 37.5% !important;
  }
  .u-lg-size2of5,
  .u-lg-size4of10 {
    width: 40% !important;
  }
  .u-lg-size5of12 {
    width: 41.66666667% !important;
  }
  .u-lg-size1of2,
  .u-lg-size2of4,
  .u-lg-size3of6,
  .u-lg-size4of8,
  .u-lg-size5of10,
  .u-lg-size6of12 {
    width: 50% !important;
  }
  .u-lg-size7of12 {
    width: 58.33333333% !important;
  }
  .u-lg-size3of5,
  .u-lg-size6of10 {
    width: 60% !important;
  }
  .u-lg-size5of8 {
    width: 62.5% !important;
  }
  .u-lg-size2of3,
  .u-lg-size4of6,
  .u-lg-size8of12 {
    width: 66.66666667% !important;
  }
  .u-lg-size7of10 {
    width: 70% !important;
  }
  .u-lg-size3of4,
  .u-lg-size6of8,
  .u-lg-size9of12 {
    width: 75% !important;
  }
  .u-lg-size4of5,
  .u-lg-size8of10 {
    width: 80% !important;
  }
  .u-lg-size5of6,
  .u-lg-size10of12 {
    width: 83.33333333% !important;
  }
  .u-lg-size7of8 {
    width: 87.5% !important;
  }
  .u-lg-size9of10 {
    width: 90% !important;
  }
  .u-lg-size11of12 {
    width: 91.66666667% !important;
  }
}
@media only screen and (min-width: 1720px), print {
  /* Intrinsic widths
   ========================================================================== */
  /** 
     * Make an element shrink wrap its content.
     */
  .u-xlg-sizeFit,
  .u-xlg-sizeFitAlt {
    display: block !important;
    float: left !important;
    width: auto !important;
  }
  .u-xlg-sizeFitAlt {
    float: right !important;
  }
  /**
     * Make an element fill the remaining space.
     * N.B. This will hide overflow.
     */
  .u-xlg-sizeFill {
    display: block !important;
    overflow: hidden !important;
    width: auto !important;
  }
  /**
     * An alternative method to make an element fill the remaining space.
     * N.B. Do not use if child elements might be wider than the remaining space.
     * In Chrome, Safari, and Firefox it results in undesired layout.
     */
  .u-xlg-sizeFillAlt {
    display: table-cell !important;
    max-width: 100% !important;
    width: 10000px !important;
  }
  /**
     * Make an element the width of its parent.
     */
  .u-xlg-sizeFull {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
  }
  /* Proportional widths
   ========================================================================== */
  /**
     * Specify the proportional width of an object.
     * Intentional redundancy build into each set of unit classes.
     * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
     */
  .u-xlg-size1of12 {
    width: 8.33333333% !important;
  }
  .u-xlg-size1of10 {
    width: 10% !important;
  }
  .u-xlg-size1of8 {
    width: 12.5% !important;
  }
  .u-xlg-size1of6,
  .u-xlg-size2of12 {
    width: 16.66666667% !important;
  }
  .u-xlg-size1of5,
  .u-xlg-size2of10 {
    width: 20% !important;
  }
  .u-xlg-size1of4,
  .u-xlg-size2of8,
  .u-xlg-size3of12 {
    width: 25% !important;
  }
  .u-xlg-size3of10 {
    width: 30% !important;
  }
  .u-xlg-size1of3,
  .u-xlg-size2of6,
  .u-xlg-size4of12 {
    width: 33.33333333% !important;
  }
  .u-xlg-size3of8 {
    width: 37.5% !important;
  }
  .u-xlg-size2of5,
  .u-xlg-size4of10 {
    width: 40% !important;
  }
  .u-xlg-size5of12 {
    width: 41.66666667% !important;
  }
  .u-xlg-size1of2,
  .u-xlg-size2of4,
  .u-xlg-size3of6,
  .u-xlg-size4of8,
  .u-xlg-size5of10,
  .u-xlg-size6of12 {
    width: 50% !important;
  }
  .u-xlg-size7of12 {
    width: 58.33333333% !important;
  }
  .u-xlg-size3of5,
  .u-xlg-size6of10 {
    width: 60% !important;
  }
  .u-xlg-size5of8 {
    width: 62.5% !important;
  }
  .u-xlg-size2of3,
  .u-xlg-size4of6,
  .u-xlg-size8of12 {
    width: 66.66666667% !important;
  }
  .u-xlg-size7of10 {
    width: 70% !important;
  }
  .u-xlg-size3of4,
  .u-xlg-size6of8,
  .u-xlg-size9of12 {
    width: 75% !important;
  }
  .u-xlg-size4of5,
  .u-xlg-size8of10 {
    width: 80% !important;
  }
  .u-xlg-size5of6,
  .u-xlg-size10of12 {
    width: 83.33333333% !important;
  }
  .u-xlg-size7of8 {
    width: 87.5% !important;
  }
  .u-xlg-size9of10 {
    width: 90% !important;
  }
  .u-xlg-size11of12 {
    width: 91.66666667% !important;
  }
}
@media print {
  /* Intrinsic widths
   ========================================================================== */
  /** 
     * Make an element shrink wrap its content.
     */
  .u-print-sizeFit,
  .u-print-sizeFitAlt {
    display: block !important;
    float: left !important;
    width: auto !important;
  }
  .u-print-sizeFitAlt {
    float: right !important;
  }
  /**
     * Make an element fill the remaining space.
     * N.B. This will hide overflow.
     */
  .u-print-sizeFill {
    display: block !important;
    overflow: hidden !important;
    width: auto !important;
  }
  /**
     * An alternative method to make an element fill the remaining space.
     * N.B. Do not use if child elements might be wider than the remaining space.
     * In Chrome, Safari, and Firefox it results in undesired layout.
     */
  .u-print-sizeFillAlt {
    display: table-cell !important;
    max-width: 100% !important;
    width: 10000px !important;
  }
  /**
     * Make an element the width of its parent.
     */
  .u-print-sizeFull {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
  }
  /* Proportional widths
   ========================================================================== */
  /**
     * Specify the proportional width of an object.
     * Intentional redundancy build into each set of unit classes.
     * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
     */
  .u-print-size1of12 {
    width: 8.33333333% !important;
  }
  .u-print-size1of10 {
    width: 10% !important;
  }
  .u-print-size1of8 {
    width: 12.5% !important;
  }
  .u-print-size1of6,
  .u-print-size2of12 {
    width: 16.66666667% !important;
  }
  .u-print-size1of5,
  .u-print-size2of10 {
    width: 20% !important;
  }
  .u-print-size1of4,
  .u-print-size2of8,
  .u-print-size3of12 {
    width: 25% !important;
  }
  .u-print-size3of10 {
    width: 30% !important;
  }
  .u-print-size1of3,
  .u-print-size2of6,
  .u-print-size4of12 {
    width: 33.33333333% !important;
  }
  .u-print-size3of8 {
    width: 37.5% !important;
  }
  .u-print-size2of5,
  .u-print-size4of10 {
    width: 40% !important;
  }
  .u-print-size5of12 {
    width: 41.66666667% !important;
  }
  .u-print-size1of2,
  .u-print-size2of4,
  .u-print-size3of6,
  .u-print-size4of8,
  .u-print-size5of10,
  .u-print-size6of12 {
    width: 50% !important;
  }
  .u-print-size7of12 {
    width: 58.33333333% !important;
  }
  .u-print-size3of5,
  .u-print-size6of10 {
    width: 60% !important;
  }
  .u-print-size5of8 {
    width: 62.5% !important;
  }
  .u-print-size2of3,
  .u-print-size4of6,
  .u-print-size8of12 {
    width: 66.66666667% !important;
  }
  .u-print-size7of10 {
    width: 70% !important;
  }
  .u-print-size3of4,
  .u-print-size6of8,
  .u-print-size9of12 {
    width: 75% !important;
  }
  .u-print-size4of5,
  .u-print-size8of10 {
    width: 80% !important;
  }
  .u-print-size5of6,
  .u-print-size10of12 {
    width: 83.33333333% !important;
  }
  .u-print-size7of8 {
    width: 87.5% !important;
  }
  .u-print-size9of10 {
    width: 90% !important;
  }
  .u-print-size11of12 {
    width: 91.66666667% !important;
  }
}
.u-size1of1,
.u-size12of12 {
  width: 100%;
}
/* Push properties. Pushes from left position towards the right end.
   ========================================================================== */
.u-push1of12 {
  margin-left: 8.33333333% !important;
}
.u-push1of10 {
  margin-left: 10% !important;
}
.u-push1of8 {
  margin-left: 12.5% !important;
}
.u-push1of6,
.u-push2of12 {
  margin-left: 16.66666667% !important;
}
.u-push1of5,
.u-push2of10 {
  margin-left: 20% !important;
}
.u-push1of4,
.u-push2of8,
.u-push3of12 {
  margin-left: 25% !important;
}
.u-push3of10 {
  margin-left: 30% !important;
}
.u-push1of3,
.u-push2of6,
.u-push4of12 {
  margin-left: 33.33333333% !important;
}
.u-push3of8 {
  margin-left: 37.5% !important;
}
.u-push2of5,
.u-push4of10 {
  margin-left: 40% !important;
}
.u-push5of12 {
  margin-left: 41.66666667% !important;
}
.u-push1of2,
.u-push2of4,
.u-push3of6,
.u-push4of8,
.u-push5of10,
.u-push6of12 {
  margin-left: 50% !important;
}
.u-push7of12 {
  margin-left: 58.33333333% !important;
}
.u-push3of5,
.u-push6of10 {
  margin-left: 60% !important;
}
.u-push5of8 {
  margin-left: 62.5% !important;
}
.u-push2of3,
.u-push4of6,
.u-push8of12 {
  margin-left: 66.66666667% !important;
}
.u-push7of10 {
  margin-left: 70% !important;
}
.u-push3of4,
.u-push6of8,
.u-push9of12 {
  margin-left: 75% !important;
}
.u-push4of5,
.u-push8of10 {
  margin-left: 80% !important;
}
.u-push5of6,
.u-push10of12 {
  margin-left: 83.33333333% !important;
}
.u-push7of8 {
  margin-left: 87.5% !important;
}
.u-push9of10 {
  margin-left: 90% !important;
}
.u-push11of12 {
  margin-left: 91.66666667% !important;
}
/* Pull properties. Pulls back element with a negative margin left property.
   ========================================================================== */
.u-pull1of12 {
  margin-left: -8.33333333% !important;
}
.u-pull1of10 {
  margin-left: -10% !important;
}
.u-pull1of8 {
  margin-left: -12.5% !important;
}
.u-pull1of6,
.u-pull2of12 {
  margin-left: -16.66666667% !important;
}
.u-pull1of5,
.u-pull2of10 {
  margin-left: -20% !important;
}
.u-pull1of4,
.u-pull2of8,
.u-pull3of12 {
  margin-left: -25% !important;
}
.u-pull3of10 {
  margin-left: -30% !important;
}
.u-pull1of3,
.u-pull2of6,
.u-pull4of12 {
  margin-left: -33.33333333% !important;
}
.u-pull3of8 {
  margin-left: -37.5% !important;
}
.u-pull2of5,
.u-pull4of10 {
  margin-left: -40% !important;
}
.u-pull5of12 {
  margin-left: -41.66666667% !important;
}
.u-pull1of2,
.u-pull2of4,
.u-pull3of6,
.u-pull4of8,
.u-pull5of10,
.u-pull6of12 {
  margin-left: -50% !important;
}
.u-pull7of12 {
  margin-left: -58.33333333% !important;
}
.u-pull3of5,
.u-pull6of10 {
  margin-left: -60% !important;
}
.u-pull5of8 {
  margin-left: -62.5% !important;
}
.u-pull2of3,
.u-pull4of6,
.u-pull8of12 {
  margin-left: -66.66666667% !important;
}
.u-pull7of10 {
  margin-left: -70% !important;
}
.u-pull3of4,
.u-pull6of8,
.u-pull9of12 {
  margin-left: -75% !important;
}
.u-pull4of5,
.u-pull8of10 {
  margin-left: -80% !important;
}
.u-pull5of6,
.u-pull10of12 {
  margin-left: -83.33333333% !important;
}
.u-pull7of8 {
  margin-left: -87.5% !important;
}
.u-pull9of10 {
  margin-left: -90% !important;
}
.u-pull11of12 {
  margin-left: -91.66666667% !important;
}
@media only screen and (max-width: 600px) {
  div[class*="-push"],
  div[class*="-pull"] {
    margin-left: 0 !important ;
  }
}
/*#
  **Core grid component**

  The Grid-cell should be combined with a utils-size class for the specific breakpoint you want to target.

  DO NOT apply dimension or offset utilities to the `Grid` element. All cell
  widths and offsets should be applied to child grid cells.

  **Example uses:**

  <div class="Grid Grid--withGutter [Grid--alignCenter|Grid--alignRight|Grid--withGutter]">
    <div class="Grid-cell [Grid-cell--center] u-size1of2 u-bgGray2">1of2</div>
    <div class="Grid-cell u-size1of2 u-bgGray3">1of2</div>
    <div class="Grid-cell u-size1of3 u-bgGray2">1of3</div>
    <div class="Grid-cell u-size2of3 u-bgGray3">2of3</div>
  </div>
 */
/* Grid container
   ========================================================================== */
/**
 * All content must be contained within child `Grid-cell` elements.
 *
 * 1. Account for browser defaults of elements that might be the root node of
 *    the component.
 * 2. Remove inter-cell whitespace that appears between `inline-block` child
 *    elements.
 * 3. Ensure consistent default alignment.
 */
.Grid {
  display: block;
  /* 1 */
  font-size: 0;
  /* 2 */
  margin: 0;
  /* 1 */
  padding: 0;
  /* 1 */
  text-align: left;
  /* 3 */
}
/**
 * Modifier: center align all grid cells
 */
.Grid--alignCenter {
  text-align: center;
}
/**
 * Modifier: right align all grid cells
 */
.Grid--alignRight {
  text-align: right;
}
/**
 * Modifier: middle-align grid cells
 */
.Grid--alignMiddle > .Grid-cell {
  vertical-align: middle;
}
/**
 * Modifier: bottom-align grid cells
 */
.Grid--alignBottom > .Grid-cell {
  vertical-align: bottom;
}
/**
 * Modifier: gutters
 *
 * NOTE: this can trigger a horizontal scrollbar if the component is as wide as
 * the viewport. Use padding on a container, or `overflow-x:hidden` to protect
 * against it.
 */
.Grid--withGutter {
  margin-left: -40px;
  margin-right: -40px;
}
.Grid--withSmallGutter {
  margin-left: -20px;
  margin-right: -20px;
}
.Grid--withOuterGutter {
  margin-left: 40px;
  margin-right: 40px;
}
.Grid--withGutter > .Grid-cell {
  padding: 16px 40px;
}
.Grid--withSmallGutter > .Grid-cell {
  padding: 16px;
}
/* Extra wide gutters */
.Grid--withWideGutter {
  margin-left: -80px;
  margin-right: -80px;
}
.Grid--withWideGutter > .Grid-cell {
  padding-left: 80px;
  padding-right: 80px;
}
.Grid--withWideGutter.Grid--withOuterGutter {
  margin-left: 80px;
  margin-right: 80px;
}
/* Gutters above and below a Grid cell */
.Grid--withGutterY > .Grid-cell {
  margin-bottom: 80px;
}
.Grid--withWideGutterY > .Grid-cell {
  margin-bottom: 40px;
}
/* Grid cell
   ========================================================================== */
/**
 * No explicit width by default. Rely on combining `Grid-cell` with a dimension
 * utility or a component class that extends 'grid'.
 *
 * 1. Fundamentals of the non-float grid layout.
 * 2. Reset font size change made in `Grid`.
 * 3. Keeps content correctly aligned with the grid direction.
 * 4. Controls vertical positioning of units.
 * 5. Make cells full-width by default.
 */
.Grid-cell {
  box-sizing: border-box;
  display: inline-block;
  /* 1 */
  font-size: 16px;
  /* 2 */
  font-size: 0;
  /* 2 */
  margin-right: 0;
  margin-left: 0;
  padding-right: 0;
  padding-left: 0;
  text-align: left;
  /* 3 */
  vertical-align: top;
  /* 4 */
  width: 100%;
  /* 5 */
}
/**
 * Modifier: horizontally center one unit
 * Set a specific unit to be horizontally centered. Doesn't affect
 * any other units. Can still contain a child `Grid` object.
 */
.Grid-cell--center {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.Grid--flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.Grid--flex > div {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.Grid--flex.u-centered {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
/* Modifiers Grid cell
   ========================================================================== */
.Grid-cell.u-textCenter {
  text-align: center;
}
.Grid-cell.u-textRight {
  text-align: right;
}
section.centered {
  width: 100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
}
section.centered > div {
  position: relative;
}
section.centered > div img {
  position: relative;
  z-index: 1;
  opacity: 1 !important;
  width: 640px;
  border-radius: 10px;
}
section.centered > div h1 {
  margin-bottom: 0.5rem;
}
section.centered > div .content {
  position: absolute;
  z-index: 9;
  width: 100%;
  left: 0;
  top: 50%;
  height: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#000000', GradientType=0);
}
.flex {
  width: 100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
}
.flex > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.flex > div > div {
  padding: 0 30px !important;
}
.projects span {
  display: inline-block;
  font-size: 14px;
  margin-bottom: 5px;
  line-height: 1.8;
  opacity: 0.6 !important;
}
.projects h2 {
  margin: 0 16px 20px;
}
.projects h2:last-child {
  margin-bottom: 0;
}
.projects img {
  display: inline-block;
  width: 40px;
  margin-right: 20px;
  margin-top: 20px;
  opacity: 0.6;
}
.projects .Grid {
  margin: 0 0 80px;
}
.masonry {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0;
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.masonry-large {
  margin: 0;
  padding: 0;
  width: 50%;
}
.masonry-large .masonry-item {
  width: 100%;
}
.masonry-group {
  width: 50%;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.masonry-item {
  margin: 0;
  padding: 0;
  width: 50%;
  overflow: hidden;
}
.masonry-item img {
  transition: all 0.8s;
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
  opacity: 1;
}
.masonry-item img:hover {
  opacity: 1;
}
.masonry-item:hover img {
  transform: scale(1.15);
}
.masonry:hover .masonry-item img {
  opacity: 0.8;
}
.masonry:hover .masonry-item img:hover {
  opacity: 1;
}
@media only screen and (max-width: 1280px) {
  section.centered img {
    width: 70% !important;
  }
}
@media only screen and (max-width: 800px) {
  section.centered img {
    width: 80% !important;
  }
  .projects img {
    display: none;
  }
  .masonry-large,
  .masonry-item,
  .masonry-group {
    width: 100%;
  }
  .wrapper {
    margin: 20px 0 40px;
  }
  .wrapper .content {
    max-width: 90%;
  }
}