Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// ----

@import "compass/reset";

// csshake code starts here

@mixin shake($x, $y, $rot, $name, $steps:10, $opacity:false) {
  $r:0deg;
  $h:0px;
  $v:0px; 
  
  $interval: $steps;
  $step: 0%;

  @keyframes $name{
    @while $step < 100% {
      @if ($rot != 0deg){ $r : random($rot) - $rot/2;} 
        @else { $r : 0deg; }
      @if ($x != 0px){ $h : random($x) - $x/2; } 
        @else { $h : 0px; }
      @if ($y != 0px){ $v : random($y) - $y/2; } 
        @else { $v : 0px; }
    
      @if($step == 0%){
        #{$step} {
          transform: translate(0px, 0px) rotate(0deg);
          @if($opacity){
            opacity: random(10)*.1;
          }
        }  
      } @else {
        #{$step} {
          transform: translate($h, $v) rotate($r);
          @if($opacity){
            opacity: random(10)*.1; 
          }
        }
      }
      $step: $step + $interval;
    }

  }
}


// reset
$duration:100ms;
$base-name:shake-base;
$iteration:infinite;
$timing:ease-in-out;
$delay:0s;


// The animation
@mixin animation($name, $dur: $duration, $iter: $iteration, $tim: $timing, $del: $delay){
	animation-name: $name;
	animation-duration: $dur;
	animation-iteration-count: $iter;
	animation-timing-function: $tim;
	animation-delay: $del;
}


.shake {
	display: inline-block;
	transform-origin: center center;
	
	&:hover {
		@include animation($base-name);
	}
	
	&.freez {
		@include animation($base-name);
		&.shake-hard { @include animation(shake-hard); }
		&.shake-slow { @include animation(shake-slow, 5s); }
		&.shake-little { @include animation(shake-little); }
		&.shake-horizontal { @include animation(shake-horizontal); }
		&.shake-vertical { @include animation(shake-vertical); }
		&.shake-rotate { @include animation(shake-rotate); }
		&.shake-opacity { @include animation(shake-opacity, 200ms); }
		&.shake-crazy { @include animation(shake-crazy); }
		animation-play-state: paused;
		&:hover {
			animation-play-state: running;
		}
	}
	
	// Specific shakings
	&.shake-hard:hover { @include animation(shake-hard); }
	&.shake-slow:hover { @include animation(shake-slow, 5s); }
	&.shake-little:hover { @include animation(shake-little); }
	&.shake-horizontal:hover { @include animation(shake-horizontal); }
	&.shake-vertical:hover { @include animation(shake-vertical); }
	&.shake-rotate:hover { @include animation(shake-rotate); }
	&.shake-opacity:hover { @include animation(shake-opacity, 200ms); }
	&.shake-crazy:hover { @include animation(shake-crazy); }

	&.shake-constant { 
		@include animation($base-name);
		&.shake-hard { @include animation(shake-hard); }
		&.shake-slow { @include animation(shake-slow, 5s); }
		&.shake-little { @include animation(shake-little); }
		&.shake-horizontal { @include animation(shake-horizontal); }
		&.shake-vertical { @include animation(shake-vertical); }
		&.shake-rotate { @include animation(shake-rotate); }
		&.shake-opacity { @include animation(shake-opacity, 200ms); }
		&.shake-crazy { @include animation(shake-crazy); }
		&.hover-stop:hover{
			animation-play-state: paused;
		}
	}
	&.shake-delay { @include animation($base-name, $duration, $iteration, $timing, 4s); }

}


// The animations: its names and settings to call from animation mixin
@include shake(5px, 5px, 3deg, 'shake-base', 2);
@include shake(2px, 2px, 1deg, 'shake-little', 2);
@include shake(20px, 20px, 7deg, 'shake-slow', 2);
@include shake(20px, 20px, 7deg, 'shake-hard', 2);
@include shake(20px, 0px, 0deg, 'shake-horizontal', 2);
@include shake(0px, 20px, 0deg, 'shake-vertical', 2);
@include shake(0px, 0px, 15deg, 'shake-rotate', 2);
@include shake(10px, 10px, 5deg, 'shake-opacity', 10, true);
@include shake(40px, 40px, 20deg, 'shake-crazy', 10, true);

// csshake code ends here


.div {
  width: 100px;
  height: 100px;
  background-color: red;
}




// Demo code
@import url(http://fonts.googleapis.com/css?family=Gentium+Basic);
@import url(http://fonts.googleapis.com/css?family=Dancing+Script);

// Colors 
$carrot: #ffab52; 
$amethyst: #9c55a5; 
$scooter: #57cadd; 
$dolly: #fff68d; 
$shamrock: #2ab8ac; 
$pear: #cce033; 


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

body {
  background: $shamrock;
}

.section {
  color:white;
  text-align: center;
  height: 100%;
  padding-top: 20px;
  h1 {
    font-family: 'Dancing Script', cursive;
    font-size: 5em;
  }
  h4 {
    font-size: 1.4em;
    font-family: 'Gentium Basic', serif;
  }
  & > p {
    margin-top: 25px;
    line-height: 1.5em;
  }
  a{
    color:rgba(0,0,0,0.5);
    &:link{
      text-decoration: none;
    }
    &:hover {
      color:rgba(0,0,0,0.85);
    }
  }
  footer{
    width: 100%;
    line-height: 1.3em;
    margin-top: 50px;
    margin-bottom: 20px;
  }
}

.arrow {
  position: absolute;
  bottom:20px;
  left: 50%;
  margin-left: -10px;
  width: 0; 
  height: 0; 
  border-left: 15px solid transparent;
  border-right: 15px solid transparent; 
  border-top: 15px solid rgba(255,255,255,.3);
  cursor:pointer;
  &:before {
    content: '';
    position: absolute;
    top: -15px;
    left: -8px;
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    .section.shamrock & { border-top: 10px solid $shamrock; }
    .section.carrot &{ border-top: 10px solid $carrot; }
    .section.amethyst &{ border-top: 10px solid $amethyst; }
    .section.scooter &{ border-top: 10px solid $scooter; }
    .section.dolly &{ border-top: 10px solid $dolly; }
    .section.shamrock &{ border-top: 10px solid $shamrock; }
    .section.pear &{ border-top: 10px solid $pear; }
  }
}


// Section

.section {  
  &.carrot{ background-color: $carrot; }
  &.amethyst{ background-color: $amethyst; }
  &.scooter{ background-color: $scooter; }
  &.dolly{ 
    background-color: $dolly;
    color:#2C3E50;
  }
  &.shamrock{ background-color: $shamrock; }
  &.pear{ background-color: $pear; }
}


.color-carrot{ color: $carrot; }
.color-amethyst{ color: $amethyst; }
.color-scooter{ color: $scooter; }
.color-dolly{ color: $dolly; }
.color-shamrock{ color: $shamrock; }
.color-pear{ color: $pear; }

// Previews
.previews {
  display: block;
  list-style: none;
  width: 85%;
  margin: 34px auto 0;
  li {
    display: inline-block;
    width: 150px;
    padding: 20px;
    vertical-align: middle;
  }
  &.bigs li { width: 250px; }
}
.preview-item {
  font-family: 'Dancing Script', cursive;
  font-size: 70px;
  line-height: 100px;
  position: relative;
  width: 100px;
  height: 100px;
  border-radius:15px;
  color:rgba(white,0.3);
  &.big {
    width: 200px;
    height: 200px;
    font-size: 160px;
    line-height: 200px;
  }
  .section.carrot & { background-color: lighten($carrot,10); }
  .section.amethyst &{ background-color: lighten($amethyst,10); }
  .section.scooter &{ background-color: lighten($scooter,10); }
  .section.dolly &{ background-color: lighten($dolly,10); }
  .section.shamrock &{ background-color: lighten($shamrock,10); }
  .section.pear &{ background-color: lighten($pear,10); }
  margin: auto;
  &:after {
    content: "";
    width: 0;
    height: 0;
    .section.carrot & { border-bottom: 33px solid $carrot; }
    .section.amethyst &{ border-bottom: 33px solid $amethyst }
    .section.scooter &{ border-bottom: 33px solid $scooter }
    .section.dolly &{ border-bottom: 33px solid $dolly }
    .section.shamrock &{ border-bottom: 33px solid $shamrock }
    .section.pear &{ border-bottom: 33px solid $pear }
    border-left: 33px solid transparent;
    position: absolute;
    bottom: 0px;
    right: 0px;
  }
}

.flip {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  .section.carrot & { border-top: 30px solid lighten($carrot,15);}
  .section.amethyst & { border-top: 30px solid lighten($amethyst,15); }
  .section.scooter & { border-top: 30px solid lighten($scooter,15); }
  .section.dolly & { border-top: 30px solid lighten($dolly,15); }
  .section.shamrock & { border-top: 30px solid lighten($shamrock,15); }
  .section.pear & { border-top: 30px solid lighten($pear,15); }

  border-right: 30px solid transparent;
  &:after {
    content: "";
    width: 0;
    height: 0;
    border-bottom: 30px solid rgba(0,0,0,0.15);
    border-left: 30px solid transparent;
    position: absolute;
    bottom: 0;
    left: -30px;
  }
}

.preview-desc {
  margin-top: 20px;
  font-family: 'Gentium Basic', serif;
}

.dropdown {
  position: relative;
  margin: 25px auto;
  height: 50px;
  width: 300px;
  &::after {
    content: "➘";
    position: absolute;
    right: 11px;
    top: 13px;
    color: rgba(0,0,0,0.2);
    font-size: 25px;
  }
}

.dropdown-select {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 6px 8px 6px 10px;
  height: 50px;
  line-height: 25px;
  font-family: 'Dancing Script', cursive;
  font-size: 25px;
  color: rgba(0,0,0,0.5);
  background-color: rgba(255,255,255,0.1);
  transition: background-color .3s;
  border:none;
  outline:none;
  &:hover, &:active {
    background-color: rgba(255,255,255,0.5);
  }
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
  & > option {
    margin: 3px;
    padding: 6px 8px;
    text-shadow: none;
    border-radius: 3px;
    cursor: pointer;
  }
}


.btn {
  font-family: 'Dancing Script', cursive;
  font-size: 40px;
  padding: 10px 20px;
  margin-top: 34px;
  display: inline-block;
  transition: background-color, .3s;
  &.carrot{ background-color: $carrot; }
  &.amethyst{ background-color: $amethyst; }
  &.light:hover{
    background-color: rgba(0,0,0,0.1);
  }
}
.btn + small {
    font-family: 'Gentium Basic', serif;
    font-size: 16px;
    margin-top: 10px;
    display: block
}

SassMeister-output.css

@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Gentium+Basic);
@import url(http://fonts.googleapis.com/css?family=Dancing+Script);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

.shake {
  display: inline-block;
  transform-origin: center center;
}
.shake:hover {
  animation-name: shake-base;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.freez {
  animation-name: shake-base;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-play-state: paused;
}
.shake.freez.shake-hard {
  animation-name: shake-hard;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.freez.shake-slow {
  animation-name: shake-slow;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.freez.shake-little {
  animation-name: shake-little;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.freez.shake-horizontal {
  animation-name: shake-horizontal;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.freez.shake-vertical {
  animation-name: shake-vertical;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.freez.shake-rotate {
  animation-name: shake-rotate;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.freez.shake-opacity {
  animation-name: shake-opacity;
  animation-duration: 200ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.freez.shake-crazy {
  animation-name: shake-crazy;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.freez:hover {
  animation-play-state: running;
}
.shake.shake-hard:hover {
  animation-name: shake-hard;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-slow:hover {
  animation-name: shake-slow;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-little:hover {
  animation-name: shake-little;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-horizontal:hover {
  animation-name: shake-horizontal;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-vertical:hover {
  animation-name: shake-vertical;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-rotate:hover {
  animation-name: shake-rotate;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-opacity:hover {
  animation-name: shake-opacity;
  animation-duration: 200ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-crazy:hover {
  animation-name: shake-crazy;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-constant {
  animation-name: shake-base;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-constant.shake-hard {
  animation-name: shake-hard;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-constant.shake-slow {
  animation-name: shake-slow;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-constant.shake-little {
  animation-name: shake-little;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-constant.shake-horizontal {
  animation-name: shake-horizontal;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-constant.shake-vertical {
  animation-name: shake-vertical;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-constant.shake-rotate {
  animation-name: shake-rotate;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-constant.shake-opacity {
  animation-name: shake-opacity;
  animation-duration: 200ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-constant.shake-crazy {
  animation-name: shake-crazy;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-constant.hover-stop:hover {
  animation-play-state: paused;
}
.shake.shake-delay {
  animation-name: shake-base;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 4s;
}

@keyframes shake-base {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  2% {
    transform: translate(-0.5px, 2.5px) rotate(-0.5deg);
  }

  4% {
    transform: translate(2.5px, 2.5px) rotate(0.5deg);
  }

  6% {
    transform: translate(-1.5px, -1.5px) rotate(1.5deg);
  }

  8% {
    transform: translate(-0.5px, -1.5px) rotate(0.5deg);
  }

  10% {
    transform: translate(2.5px, 2.5px) rotate(1.5deg);
  }

  12% {
    transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
  }

  14% {
    transform: translate(-0.5px, -1.5px) rotate(-0.5deg);
  }

  16% {
    transform: translate(2.5px, -0.5px) rotate(1.5deg);
  }

  18% {
    transform: translate(1.5px, 0.5px) rotate(-0.5deg);
  }

  20% {
    transform: translate(-1.5px, 1.5px) rotate(0.5deg);
  }

  22% {
    transform: translate(-0.5px, -0.5px) rotate(1.5deg);
  }

  24% {
    transform: translate(-0.5px, 1.5px) rotate(-0.5deg);
  }

  26% {
    transform: translate(-0.5px, 1.5px) rotate(1.5deg);
  }

  28% {
    transform: translate(2.5px, -0.5px) rotate(1.5deg);
  }

  30% {
    transform: translate(-1.5px, 0.5px) rotate(0.5deg);
  }

  32% {
    transform: translate(1.5px, 1.5px) rotate(1.5deg);
  }

  34% {
    transform: translate(-0.5px, 0.5px) rotate(1.5deg);
  }

  36% {
    transform: translate(1.5px, 1.5px) rotate(1.5deg);
  }

  38% {
    transform: translate(2.5px, -0.5px) rotate(0.5deg);
  }

  40% {
    transform: translate(2.5px, -0.5px) rotate(-0.5deg);
  }

  42% {
    transform: translate(0.5px, -1.5px) rotate(-0.5deg);
  }

  44% {
    transform: translate(0.5px, -0.5px) rotate(1.5deg);
  }

  46% {
    transform: translate(2.5px, 2.5px) rotate(1.5deg);
  }

  48% {
    transform: translate(1.5px, 2.5px) rotate(0.5deg);
  }

  50% {
    transform: translate(-1.5px, 2.5px) rotate(0.5deg);
  }

  52% {
    transform: translate(0.5px, 2.5px) rotate(0.5deg);
  }

  54% {
    transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
  }

  56% {
    transform: translate(-0.5px, 0.5px) rotate(-0.5deg);
  }

  58% {
    transform: translate(-1.5px, -0.5px) rotate(1.5deg);
  }

  60% {
    transform: translate(0.5px, -1.5px) rotate(0.5deg);
  }

  62% {
    transform: translate(1.5px, -0.5px) rotate(0.5deg);
  }

  64% {
    transform: translate(1.5px, 2.5px) rotate(-0.5deg);
  }

  66% {
    transform: translate(-0.5px, 0.5px) rotate(1.5deg);
  }

  68% {
    transform: translate(1.5px, 0.5px) rotate(0.5deg);
  }

  70% {
    transform: translate(-1.5px, 2.5px) rotate(1.5deg);
  }

  72% {
    transform: translate(0.5px, -0.5px) rotate(1.5deg);
  }

  74% {
    transform: translate(1.5px, 1.5px) rotate(-0.5deg);
  }

  76% {
    transform: translate(1.5px, -0.5px) rotate(1.5deg);
  }

  78% {
    transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
  }

  80% {
    transform: translate(0.5px, 2.5px) rotate(0.5deg);
  }

  82% {
    transform: translate(0.5px, -0.5px) rotate(-0.5deg);
  }

  84% {
    transform: translate(-1.5px, -0.5px) rotate(0.5deg);
  }

  86% {
    transform: translate(-0.5px, 0.5px) rotate(0.5deg);
  }

  88% {
    transform: translate(-0.5px, 0.5px) rotate(1.5deg);
  }

  90% {
    transform: translate(-0.5px, -1.5px) rotate(1.5deg);
  }

  92% {
    transform: translate(0.5px, 1.5px) rotate(-0.5deg);
  }

  94% {
    transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
  }

  96% {
    transform: translate(0.5px, 0.5px) rotate(0.5deg);
  }

  98% {
    transform: translate(0.5px, -0.5px) rotate(-0.5deg);
  }
}
@keyframes shake-little {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  2% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  4% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }

  6% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  8% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }

  10% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }

  12% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  14% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  16% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }

  18% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }

  20% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  22% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  24% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  26% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }

  28% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  30% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  32% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  34% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  36% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  38% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  40% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }

  42% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  44% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }

  46% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  48% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  50% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }

  52% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  54% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }

  56% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }

  58% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  60% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  62% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }

  64% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  66% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  68% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  70% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }

  72% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }

  74% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }

  76% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  78% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  80% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }

  82% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  84% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  86% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  88% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }

  90% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  92% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }

  94% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  96% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }

  98% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }
}
@keyframes shake-slow {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  2% {
    transform: translate(-9px, 7px) rotate(1.5deg);
  }

  4% {
    transform: translate(-6px, -9px) rotate(-2.5deg);
  }

  6% {
    transform: translate(3px, 5px) rotate(-1.5deg);
  }

  8% {
    transform: translate(7px, 3px) rotate(2.5deg);
  }

  10% {
    transform: translate(0px, -8px) rotate(0.5deg);
  }

  12% {
    transform: translate(-9px, -9px) rotate(2.5deg);
  }

  14% {
    transform: translate(2px, -9px) rotate(-2.5deg);
  }

  16% {
    transform: translate(-9px, 1px) rotate(-0.5deg);
  }

  18% {
    transform: translate(-2px, -5px) rotate(1.5deg);
  }

  20% {
    transform: translate(8px, -4px) rotate(3.5deg);
  }

  22% {
    transform: translate(-8px, -3px) rotate(1.5deg);
  }

  24% {
    transform: translate(-1px, -3px) rotate(-1.5deg);
  }

  26% {
    transform: translate(3px, 9px) rotate(3.5deg);
  }

  28% {
    transform: translate(-1px, 1px) rotate(2.5deg);
  }

  30% {
    transform: translate(7px, 3px) rotate(-1.5deg);
  }

  32% {
    transform: translate(8px, -2px) rotate(2.5deg);
  }

  34% {
    transform: translate(10px, -6px) rotate(-0.5deg);
  }

  36% {
    transform: translate(8px, 5px) rotate(-2.5deg);
  }

  38% {
    transform: translate(-6px, -1px) rotate(1.5deg);
  }

  40% {
    transform: translate(8px, -8px) rotate(-0.5deg);
  }

  42% {
    transform: translate(10px, 0px) rotate(-0.5deg);
  }

  44% {
    transform: translate(2px, -4px) rotate(-2.5deg);
  }

  46% {
    transform: translate(-2px, 5px) rotate(-0.5deg);
  }

  48% {
    transform: translate(3px, 0px) rotate(2.5deg);
  }

  50% {
    transform: translate(-7px, 10px) rotate(0.5deg);
  }

  52% {
    transform: translate(5px, -7px) rotate(-0.5deg);
  }

  54% {
    transform: translate(6px, 7px) rotate(2.5deg);
  }

  56% {
    transform: translate(10px, 1px) rotate(-2.5deg);
  }

  58% {
    transform: translate(0px, -6px) rotate(-2.5deg);
  }

  60% {
    transform: translate(0px, 4px) rotate(1.5deg);
  }

  62% {
    transform: translate(-2px, -8px) rotate(-1.5deg);
  }

  64% {
    transform: translate(2px, 0px) rotate(-1.5deg);
  }

  66% {
    transform: translate(8px, 1px) rotate(1.5deg);
  }

  68% {
    transform: translate(3px, -6px) rotate(0.5deg);
  }

  70% {
    transform: translate(0px, -8px) rotate(2.5deg);
  }

  72% {
    transform: translate(-3px, 8px) rotate(-1.5deg);
  }

  74% {
    transform: translate(-6px, 7px) rotate(1.5deg);
  }

  76% {
    transform: translate(10px, 5px) rotate(-1.5deg);
  }

  78% {
    transform: translate(-9px, -1px) rotate(1.5deg);
  }

  80% {
    transform: translate(2px, 7px) rotate(3.5deg);
  }

  82% {
    transform: translate(-1px, 7px) rotate(-1.5deg);
  }

  84% {
    transform: translate(7px, 0px) rotate(3.5deg);
  }

  86% {
    transform: translate(9px, 2px) rotate(-1.5deg);
  }

  88% {
    transform: translate(-4px, -7px) rotate(-0.5deg);
  }

  90% {
    transform: translate(-1px, -6px) rotate(-0.5deg);
  }

  92% {
    transform: translate(9px, 5px) rotate(3.5deg);
  }

  94% {
    transform: translate(8px, -4px) rotate(-2.5deg);
  }

  96% {
    transform: translate(-8px, -9px) rotate(0.5deg);
  }

  98% {
    transform: translate(10px, 5px) rotate(3.5deg);
  }
}
@keyframes shake-hard {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  2% {
    transform: translate(-1px, 3px) rotate(-2.5deg);
  }

  4% {
    transform: translate(-5px, 6px) rotate(2.5deg);
  }

  6% {
    transform: translate(6px, 3px) rotate(0.5deg);
  }

  8% {
    transform: translate(1px, 0px) rotate(2.5deg);
  }

  10% {
    transform: translate(-5px, 8px) rotate(2.5deg);
  }

  12% {
    transform: translate(-5px, -8px) rotate(1.5deg);
  }

  14% {
    transform: translate(7px, 2px) rotate(-0.5deg);
  }

  16% {
    transform: translate(10px, -4px) rotate(-0.5deg);
  }

  18% {
    transform: translate(-1px, 1px) rotate(-2.5deg);
  }

  20% {
    transform: translate(5px, 9px) rotate(-1.5deg);
  }

  22% {
    transform: translate(-9px, -9px) rotate(2.5deg);
  }

  24% {
    transform: translate(-5px, 7px) rotate(-1.5deg);
  }

  26% {
    transform: translate(-3px, -1px) rotate(-1.5deg);
  }

  28% {
    transform: translate(6px, 10px) rotate(2.5deg);
  }

  30% {
    transform: translate(-8px, -3px) rotate(-0.5deg);
  }

  32% {
    transform: translate(-3px, -1px) rotate(-0.5deg);
  }

  34% {
    transform: translate(6px, 7px) rotate(-2.5deg);
  }

  36% {
    transform: translate(3px, 5px) rotate(2.5deg);
  }

  38% {
    transform: translate(0px, 7px) rotate(3.5deg);
  }

  40% {
    transform: translate(4px, 5px) rotate(-1.5deg);
  }

  42% {
    transform: translate(-6px, 2px) rotate(-2.5deg);
  }

  44% {
    transform: translate(8px, 8px) rotate(1.5deg);
  }

  46% {
    transform: translate(-6px, 7px) rotate(-1.5deg);
  }

  48% {
    transform: translate(-1px, -9px) rotate(1.5deg);
  }

  50% {
    transform: translate(-7px, 6px) rotate(0.5deg);
  }

  52% {
    transform: translate(4px, 3px) rotate(-1.5deg);
  }

  54% {
    transform: translate(-2px, 1px) rotate(3.5deg);
  }

  56% {
    transform: translate(10px, 3px) rotate(-1.5deg);
  }

  58% {
    transform: translate(-8px, -7px) rotate(-2.5deg);
  }

  60% {
    transform: translate(2px, 2px) rotate(1.5deg);
  }

  62% {
    transform: translate(10px, 2px) rotate(2.5deg);
  }

  64% {
    transform: translate(-4px, -7px) rotate(1.5deg);
  }

  66% {
    transform: translate(8px, 0px) rotate(1.5deg);
  }

  68% {
    transform: translate(3px, -7px) rotate(-0.5deg);
  }

  70% {
    transform: translate(3px, 9px) rotate(-1.5deg);
  }

  72% {
    transform: translate(7px, -6px) rotate(3.5deg);
  }

  74% {
    transform: translate(1px, 5px) rotate(2.5deg);
  }

  76% {
    transform: translate(6px, -6px) rotate(2.5deg);
  }

  78% {
    transform: translate(-6px, 5px) rotate(-2.5deg);
  }

  80% {
    transform: translate(3px, 0px) rotate(3.5deg);
  }

  82% {
    transform: translate(3px, -4px) rotate(-2.5deg);
  }

  84% {
    transform: translate(-3px, 1px) rotate(3.5deg);
  }

  86% {
    transform: translate(1px, -5px) rotate(-2.5deg);
  }

  88% {
    transform: translate(-4px, 6px) rotate(1.5deg);
  }

  90% {
    transform: translate(0px, -4px) rotate(3.5deg);
  }

  92% {
    transform: translate(2px, -4px) rotate(-2.5deg);
  }

  94% {
    transform: translate(0px, -3px) rotate(-0.5deg);
  }

  96% {
    transform: translate(-4px, -4px) rotate(-0.5deg);
  }

  98% {
    transform: translate(4px, 7px) rotate(2.5deg);
  }
}
@keyframes shake-horizontal {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  2% {
    transform: translate(8px, 0px) rotate(0deg);
  }

  4% {
    transform: translate(-2px, 0px) rotate(0deg);
  }

  6% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  8% {
    transform: translate(4px, 0px) rotate(0deg);
  }

  10% {
    transform: translate(8px, 0px) rotate(0deg);
  }

  12% {
    transform: translate(-5px, 0px) rotate(0deg);
  }

  14% {
    transform: translate(-5px, 0px) rotate(0deg);
  }

  16% {
    transform: translate(7px, 0px) rotate(0deg);
  }

  18% {
    transform: translate(9px, 0px) rotate(0deg);
  }

  20% {
    transform: translate(-8px, 0px) rotate(0deg);
  }

  22% {
    transform: translate(-9px, 0px) rotate(0deg);
  }

  24% {
    transform: translate(6px, 0px) rotate(0deg);
  }

  26% {
    transform: translate(3px, 0px) rotate(0deg);
  }

  28% {
    transform: translate(2px, 0px) rotate(0deg);
  }

  30% {
    transform: translate(-2px, 0px) rotate(0deg);
  }

  32% {
    transform: translate(7px, 0px) rotate(0deg);
  }

  34% {
    transform: translate(-8px, 0px) rotate(0deg);
  }

  36% {
    transform: translate(-6px, 0px) rotate(0deg);
  }

  38% {
    transform: translate(-1px, 0px) rotate(0deg);
  }

  40% {
    transform: translate(-4px, 0px) rotate(0deg);
  }

  42% {
    transform: translate(4px, 0px) rotate(0deg);
  }

  44% {
    transform: translate(-4px, 0px) rotate(0deg);
  }

  46% {
    transform: translate(9px, 0px) rotate(0deg);
  }

  48% {
    transform: translate(9px, 0px) rotate(0deg);
  }

  50% {
    transform: translate(4px, 0px) rotate(0deg);
  }

  52% {
    transform: translate(6px, 0px) rotate(0deg);
  }

  54% {
    transform: translate(4px, 0px) rotate(0deg);
  }

  56% {
    transform: translate(-3px, 0px) rotate(0deg);
  }

  58% {
    transform: translate(9px, 0px) rotate(0deg);
  }

  60% {
    transform: translate(-1px, 0px) rotate(0deg);
  }

  62% {
    transform: translate(3px, 0px) rotate(0deg);
  }

  64% {
    transform: translate(7px, 0px) rotate(0deg);
  }

  66% {
    transform: translate(-5px, 0px) rotate(0deg);
  }

  68% {
    transform: translate(-6px, 0px) rotate(0deg);
  }

  70% {
    transform: translate(-9px, 0px) rotate(0deg);
  }

  72% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  74% {
    transform: translate(-5px, 0px) rotate(0deg);
  }

  76% {
    transform: translate(6px, 0px) rotate(0deg);
  }

  78% {
    transform: translate(1px, 0px) rotate(0deg);
  }

  80% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  82% {
    transform: translate(-7px, 0px) rotate(0deg);
  }

  84% {
    transform: translate(-3px, 0px) rotate(0deg);
  }

  86% {
    transform: translate(3px, 0px) rotate(0deg);
  }

  88% {
    transform: translate(7px, 0px) rotate(0deg);
  }

  90% {
    transform: translate(-8px, 0px) rotate(0deg);
  }

  92% {
    transform: translate(-5px, 0px) rotate(0deg);
  }

  94% {
    transform: translate(8px, 0px) rotate(0deg);
  }

  96% {
    transform: translate(-7px, 0px) rotate(0deg);
  }

  98% {
    transform: translate(-9px, 0px) rotate(0deg);
  }
}
@keyframes shake-vertical {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  2% {
    transform: translate(0px, -7px) rotate(0deg);
  }

  4% {
    transform: translate(0px, 1px) rotate(0deg);
  }

  6% {
    transform: translate(0px, -3px) rotate(0deg);
  }

  8% {
    transform: translate(0px, -9px) rotate(0deg);
  }

  10% {
    transform: translate(0px, -7px) rotate(0deg);
  }

  12% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  14% {
    transform: translate(0px, 2px) rotate(0deg);
  }

  16% {
    transform: translate(0px, -8px) rotate(0deg);
  }

  18% {
    transform: translate(0px, -8px) rotate(0deg);
  }

  20% {
    transform: translate(0px, 10px) rotate(0deg);
  }

  22% {
    transform: translate(0px, -6px) rotate(0deg);
  }

  24% {
    transform: translate(0px, -8px) rotate(0deg);
  }

  26% {
    transform: translate(0px, -5px) rotate(0deg);
  }

  28% {
    transform: translate(0px, 3px) rotate(0deg);
  }

  30% {
    transform: translate(0px, -6px) rotate(0deg);
  }

  32% {
    transform: translate(0px, -4px) rotate(0deg);
  }

  34% {
    transform: translate(0px, 5px) rotate(0deg);
  }

  36% {
    transform: translate(0px, 4px) rotate(0deg);
  }

  38% {
    transform: translate(0px, 4px) rotate(0deg);
  }

  40% {
    transform: translate(0px, -9px) rotate(0deg);
  }

  42% {
    transform: translate(0px, 2px) rotate(0deg);
  }

  44% {
    transform: translate(0px, -5px) rotate(0deg);
  }

  46% {
    transform: translate(0px, 9px) rotate(0deg);
  }

  48% {
    transform: translate(0px, -2px) rotate(0deg);
  }

  50% {
    transform: translate(0px, -9px) rotate(0deg);
  }

  52% {
    transform: translate(0px, -3px) rotate(0deg);
  }

  54% {
    transform: translate(0px, -6px) rotate(0deg);
  }

  56% {
    transform: translate(0px, -8px) rotate(0deg);
  }

  58% {
    transform: translate(0px, 9px) rotate(0deg);
  }

  60% {
    transform: translate(0px, -7px) rotate(0deg);
  }

  62% {
    transform: translate(0px, -6px) rotate(0deg);
  }

  64% {
    transform: translate(0px, -8px) rotate(0deg);
  }

  66% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  68% {
    transform: translate(0px, 4px) rotate(0deg);
  }

  70% {
    transform: translate(0px, 9px) rotate(0deg);
  }

  72% {
    transform: translate(0px, -2px) rotate(0deg);
  }

  74% {
    transform: translate(0px, 6px) rotate(0deg);
  }

  76% {
    transform: translate(0px, -6px) rotate(0deg);
  }

  78% {
    transform: translate(0px, -7px) rotate(0deg);
  }

  80% {
    transform: translate(0px, -3px) rotate(0deg);
  }

  82% {
    transform: translate(0px, -8px) rotate(0deg);
  }

  84% {
    transform: translate(0px, -9px) rotate(0deg);
  }

  86% {
    transform: translate(0px, -1px) rotate(0deg);
  }

  88% {
    transform: translate(0px, 6px) rotate(0deg);
  }

  90% {
    transform: translate(0px, -6px) rotate(0deg);
  }

  92% {
    transform: translate(0px, -2px) rotate(0deg);
  }

  94% {
    transform: translate(0px, 4px) rotate(0deg);
  }

  96% {
    transform: translate(0px, -8px) rotate(0deg);
  }

  98% {
    transform: translate(0px, 7px) rotate(0deg);
  }
}
@keyframes shake-rotate {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  2% {
    transform: translate(0px, 0px) rotate(-1.5deg);
  }

  4% {
    transform: translate(0px, 0px) rotate(2.5deg);
  }

  6% {
    transform: translate(0px, 0px) rotate(-3.5deg);
  }

  8% {
    transform: translate(0px, 0px) rotate(-1.5deg);
  }

  10% {
    transform: translate(0px, 0px) rotate(2.5deg);
  }

  12% {
    transform: translate(0px, 0px) rotate(-4.5deg);
  }

  14% {
    transform: translate(0px, 0px) rotate(2.5deg);
  }

  16% {
    transform: translate(0px, 0px) rotate(1.5deg);
  }

  18% {
    transform: translate(0px, 0px) rotate(5.5deg);
  }

  20% {
    transform: translate(0px, 0px) rotate(1.5deg);
  }

  22% {
    transform: translate(0px, 0px) rotate(1.5deg);
  }

  24% {
    transform: translate(0px, 0px) rotate(7.5deg);
  }

  26% {
    transform: translate(0px, 0px) rotate(-1.5deg);
  }

  28% {
    transform: translate(0px, 0px) rotate(-1.5deg);
  }

  30% {
    transform: translate(0px, 0px) rotate(-1.5deg);
  }

  32% {
    transform: translate(0px, 0px) rotate(-5.5deg);
  }

  34% {
    transform: translate(0px, 0px) rotate(3.5deg);
  }

  36% {
    transform: translate(0px, 0px) rotate(1.5deg);
  }

  38% {
    transform: translate(0px, 0px) rotate(7.5deg);
  }

  40% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  42% {
    transform: translate(0px, 0px) rotate(-3.5deg);
  }

  44% {
    transform: translate(0px, 0px) rotate(-6.5deg);
  }

  46% {
    transform: translate(0px, 0px) rotate(-6.5deg);
  }

  48% {
    transform: translate(0px, 0px) rotate(-2.5deg);
  }

  50% {
    transform: translate(0px, 0px) rotate(2.5deg);
  }

  52% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  54% {
    transform: translate(0px, 0px) rotate(-3.5deg);
  }

  56% {
    transform: translate(0px, 0px) rotate(3.5deg);
  }

  58% {
    transform: translate(0px, 0px) rotate(4.5deg);
  }

  60% {
    transform: translate(0px, 0px) rotate(-6.5deg);
  }

  62% {
    transform: translate(0px, 0px) rotate(4.5deg);
  }

  64% {
    transform: translate(0px, 0px) rotate(4.5deg);
  }

  66% {
    transform: translate(0px, 0px) rotate(3.5deg);
  }

  68% {
    transform: translate(0px, 0px) rotate(4.5deg);
  }

  70% {
    transform: translate(0px, 0px) rotate(-0.5deg);
  }

  72% {
    transform: translate(0px, 0px) rotate(6.5deg);
  }

  74% {
    transform: translate(0px, 0px) rotate(1.5deg);
  }

  76% {
    transform: translate(0px, 0px) rotate(-1.5deg);
  }

  78% {
    transform: translate(0px, 0px) rotate(5.5deg);
  }

  80% {
    transform: translate(0px, 0px) rotate(-1.5deg);
  }

  82% {
    transform: translate(0px, 0px) rotate(-2.5deg);
  }

  84% {
    transform: translate(0px, 0px) rotate(1.5deg);
  }

  86% {
    transform: translate(0px, 0px) rotate(6.5deg);
  }

  88% {
    transform: translate(0px, 0px) rotate(1.5deg);
  }

  90% {
    transform: translate(0px, 0px) rotate(3.5deg);
  }

  92% {
    transform: translate(0px, 0px) rotate(7.5deg);
  }

  94% {
    transform: translate(0px, 0px) rotate(-1.5deg);
  }

  96% {
    transform: translate(0px, 0px) rotate(5.5deg);
  }

  98% {
    transform: translate(0px, 0px) rotate(-1.5deg);
  }
}
@keyframes shake-opacity {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
    opacity: 0.3;
  }

  10% {
    transform: translate(-2px, -4px) rotate(1.5deg);
    opacity: 0.3;
  }

  20% {
    transform: translate(2px, -3px) rotate(1.5deg);
    opacity: 0.8;
  }

  30% {
    transform: translate(-4px, -2px) rotate(-0.5deg);
    opacity: 0.3;
  }

  40% {
    transform: translate(0px, 3px) rotate(2.5deg);
    opacity: 0.9;
  }

  50% {
    transform: translate(0px, 0px) rotate(0.5deg);
    opacity: 0.1;
  }

  60% {
    transform: translate(4px, 5px) rotate(-1.5deg);
    opacity: 0.5;
  }

  70% {
    transform: translate(-1px, -2px) rotate(1.5deg);
    opacity: 0.7;
  }

  80% {
    transform: translate(0px, -4px) rotate(1.5deg);
    opacity: 0.5;
  }

  90% {
    transform: translate(0px, 3px) rotate(2.5deg);
    opacity: 0.2;
  }
}
@keyframes shake-crazy {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
    opacity: 0.4;
  }

  10% {
    transform: translate(-15px, -15px) rotate(4deg);
    opacity: 0.2;
  }

  20% {
    transform: translate(8px, -9px) rotate(10deg);
    opacity: 0.5;
  }

  30% {
    transform: translate(3px, 1px) rotate(-8deg);
    opacity: 0.9;
  }

  40% {
    transform: translate(-18px, -9px) rotate(-9deg);
    opacity: 0.9;
  }

  50% {
    transform: translate(7px, -18px) rotate(-8deg);
    opacity: 0.3;
  }

  60% {
    transform: translate(11px, 17px) rotate(-8deg);
    opacity: 0.4;
  }

  70% {
    transform: translate(-5px, -17px) rotate(6deg);
    opacity: 0.1;
  }

  80% {
    transform: translate(9px, 9px) rotate(2deg);
    opacity: 0.3;
  }

  90% {
    transform: translate(-16px, 7px) rotate(-9deg);
    opacity: 1;
  }
}
.div {
  width: 100px;
  height: 100px;
  background-color: red;
}

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

body {
  background: #2ab8ac;
}

.section {
  color: white;
  text-align: center;
  height: 100%;
  padding-top: 20px;
}
.section h1 {
  font-family: 'Dancing Script', cursive;
  font-size: 5em;
}
.section h4 {
  font-size: 1.4em;
  font-family: 'Gentium Basic', serif;
}
.section > p {
  margin-top: 25px;
  line-height: 1.5em;
}
.section a {
  color: rgba(0, 0, 0, 0.5);
}
.section a:link {
  text-decoration: none;
}
.section a:hover {
  color: rgba(0, 0, 0, 0.85);
}
.section footer {
  width: 100%;
  line-height: 1.3em;
  margin-top: 50px;
  margin-bottom: 20px;
}

.arrow {
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -10px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
}
.arrow:before {
  content: '';
  position: absolute;
  top: -15px;
  left: -8px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}
.section.shamrock .arrow:before {
  border-top: 10px solid #2ab8ac;
}
.section.carrot .arrow:before {
  border-top: 10px solid #ffab52;
}
.section.amethyst .arrow:before {
  border-top: 10px solid #9c55a5;
}
.section.scooter .arrow:before {
  border-top: 10px solid #57cadd;
}
.section.dolly .arrow:before {
  border-top: 10px solid #fff68d;
}
.section.shamrock .arrow:before {
  border-top: 10px solid #2ab8ac;
}
.section.pear .arrow:before {
  border-top: 10px solid #cce033;
}

.section.carrot {
  background-color: #ffab52;
}
.section.amethyst {
  background-color: #9c55a5;
}
.section.scooter {
  background-color: #57cadd;
}
.section.dolly {
  background-color: #fff68d;
  color: #2C3E50;
}
.section.shamrock {
  background-color: #2ab8ac;
}
.section.pear {
  background-color: #cce033;
}

.color-carrot {
  color: #ffab52;
}

.color-amethyst {
  color: #9c55a5;
}

.color-scooter {
  color: #57cadd;
}

.color-dolly {
  color: #fff68d;
}

.color-shamrock {
  color: #2ab8ac;
}

.color-pear {
  color: #cce033;
}

.previews {
  display: block;
  list-style: none;
  width: 85%;
  margin: 34px auto 0;
}
.previews li {
  display: inline-block;
  width: 150px;
  padding: 20px;
  vertical-align: middle;
}
.previews.bigs li {
  width: 250px;
}

.preview-item {
  font-family: 'Dancing Script', cursive;
  font-size: 70px;
  line-height: 100px;
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 15px;
  color: rgba(255, 255, 255, 0.3);
  margin: auto;
}
.preview-item.big {
  width: 200px;
  height: 200px;
  font-size: 160px;
  line-height: 200px;
}
.section.carrot .preview-item {
  background-color: #ffc485;
}
.section.amethyst .preview-item {
  background-color: #b075b8;
}
.section.scooter .preview-item {
  background-color: #81d7e6;
}
.section.dolly .preview-item {
  background-color: #fffac0;
}
.section.shamrock .preview-item {
  background-color: #41d4c7;
}
.section.pear .preview-item {
  background-color: #d7e75f;
}
.preview-item:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 33px solid transparent;
  position: absolute;
  bottom: 0px;
  right: 0px;
}
.section.carrot .preview-item:after {
  border-bottom: 33px solid #ffab52;
}
.section.amethyst .preview-item:after {
  border-bottom: 33px solid #9c55a5;
}
.section.scooter .preview-item:after {
  border-bottom: 33px solid #57cadd;
}
.section.dolly .preview-item:after {
  border-bottom: 33px solid #fff68d;
}
.section.shamrock .preview-item:after {
  border-bottom: 33px solid #2ab8ac;
}
.section.pear .preview-item:after {
  border-bottom: 33px solid #cce033;
}

.flip {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-right: 30px solid transparent;
}
.section.carrot .flip {
  border-top: 30px solid #ffd09f;
}
.section.amethyst .flip {
  border-top: 30px solid #ba86c1;
}
.section.scooter .flip {
  border-top: 30px solid #97deea;
}
.section.dolly .flip {
  border-top: 30px solid #fffcda;
}
.section.shamrock .flip {
  border-top: 30px solid #56d8cd;
}
.section.pear .flip {
  border-top: 30px solid #ddea75;
}
.flip:after {
  content: "";
  width: 0;
  height: 0;
  border-bottom: 30px solid rgba(0, 0, 0, 0.15);
  border-left: 30px solid transparent;
  position: absolute;
  bottom: 0;
  left: -30px;
}

.preview-desc {
  margin-top: 20px;
  font-family: 'Gentium Basic', serif;
}

.dropdown {
  position: relative;
  margin: 25px auto;
  height: 50px;
  width: 300px;
}
.dropdown::after {
  content: "➘";
  position: absolute;
  right: 11px;
  top: 13px;
  color: rgba(0, 0, 0, 0.2);
  font-size: 25px;
}

.dropdown-select {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 6px 8px 6px 10px;
  height: 50px;
  line-height: 25px;
  font-family: 'Dancing Script', cursive;
  font-size: 25px;
  color: rgba(0, 0, 0, 0.5);
  background-color: rgba(255, 255, 255, 0.1);
  transition: background-color .3s;
  border: none;
  outline: none;
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
}
.dropdown-select:hover, .dropdown-select:active {
  background-color: rgba(255, 255, 255, 0.5);
}
.dropdown-select > option {
  margin: 3px;
  padding: 6px 8px;
  text-shadow: none;
  border-radius: 3px;
  cursor: pointer;
}

.btn {
  font-family: 'Dancing Script', cursive;
  font-size: 40px;
  padding: 10px 20px;
  margin-top: 34px;
  display: inline-block;
  transition: background-color, .3s;
}
.btn.carrot {
  background-color: #ffab52;
}
.btn.amethyst {
  background-color: #9c55a5;
}
.btn.light:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.btn + small {
  font-family: 'Gentium Basic', serif;
  font-size: 16px;
  margin-top: 10px;
  display: block;
}