.heed1, .heed2 {
    animation-fill-mode: both;
}
.heed1 {
    animation-delay: 1s;
    animation-duration: 2s;
    animation-fill-mode: both;
}
.heed2 {
    animation-delay: 4s;
    animation-duration: 1.5s;
    animation-fill-mode: both;
}
.heed, .heed3 {
    animation-duration: 1s;
    animation-fill-mode: both;
}
.heed3 {
    animation-delay: 7s;
    animation-duration: 1s;
    animation-fill-mode: both;
}
.heed1.infinite, .heed2.infinite, .heed3.infinite {
    animation-iteration-count: infinite;
}
.heed1:hover, .heed2:hover, .heed3:hover {
    animation-play-state: paused;
}
.heed {
    animation-duration: 1s;
    animation-fill-mode: both;
}
.heed:hover {
    animation-play-state: paused;
}
.heed.infinite {
    animation-iteration-count: infinite;
}
.heed_hvr:hover {
    animation-duration: 1s;
    animation-fill-mode: both;
}
.heed_hvr.infinite {
    animation-iteration-count: infinite;
}
@keyframes bouncy {
20%, 53%, 80%, 0%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0px, 0px, 0px);
}
40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0px, -30px, 0px) scale3d(0.95, 1.15, 1);
}
70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0px, -15px, 0px);
}
90% {
    transform: translate3d(0px, -4px, 0px);
}
}
@keyframes bouncy {
20%, 53%, 80%, 0%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0px, 0px, 0px);
}
40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0px, -30px, 0px) scale3d(0.95, 1.15, 1);
}
70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0px, -15px, 0px);
}
90% {
    transform: translate3d(0px, -4px, 0px);
}
}
.bouncy {
    animation-name: bouncy;
    transform-origin: center bottom 0;
}
@keyframes flashy {
50%, 0%, 100% {
    opacity: 1;
}
25%, 75% {
    opacity: 0;
}
}
@keyframes flashy {
50%, 0%, 100% {
    opacity: 1;
}
25%, 75% {
    opacity: 0;
}
}
.flashy {
    animation-name: flashy;
}
@keyframes pulse {
0%, 100% {
    transform: scale3d(1, 1, 1);
}
50% {
    transform: scale3d(1.1, 1.1, 1.1);
}
}
@keyframes pulse {
0%, 100% {
    transform: scale3d(1, 1, 1);
}
50% {
    transform: scale3d(1.1, 1.1, 1.1);
}
}
.pulse {
    animation-name: pulse;
}
@keyframes rubberBand {
0%, 100% {
    transform: scale3d(1, 1, 1);
}
30% {
    transform: scale3d(1.25, 0.75, 1);
}
40% {
    transform: scale3d(0.75, 1.25, 1);
}
50% {
    transform: scale3d(1.15, 0.85, 1);
}
65% {
    transform: scale3d(0.95, 1.05, 1);
}
75% {
    transform: scale3d(1.05, 0.95, 1);
}
}
@keyframes rubberBand {
0%, 100% {
    transform: scale3d(1, 1, 1);
}
30% {
    transform: scale3d(1.25, 0.75, 1);
}
40% {
    transform: scale3d(0.75, 1.25, 1);
}
50% {
    transform: scale3d(1.15, 0.85, 1);
}
65% {
    transform: scale3d(0.95, 1.05, 1);
}
75% {
    transform: scale3d(1.05, 0.95, 1);
}
}
.rubberBand {
    animation-name: rubberBand;
}
@keyframes shaky {
0%, 100% {
    transform: translate3d(0px, 0px, 0px);
}
10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-10px, 0px, 0px);
}
20%, 40%, 60%, 80% {
    transform: translate3d(10px, 0px, 0px);
}
}
@keyframes shaky {
0%, 100% {
    transform: translate3d(0px, 0px, 0px);
}
10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-10px, 0px, 0px);
}
20%, 40%, 60%, 80% {
    transform: translate3d(10px, 0px, 0px);
}
}
.shaky {
    animation-name: shaky;
}
@keyframes headShake {
0% {
    transform: translateX(0px);
}
6.5% {
    transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
    transform: translateX(5px) rotateY(7deg);
}
31.5% {
    transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
    transform: translateX(2px) rotateY(3deg);
}
50% {
    transform: translateX(0px);
}
}
@keyframes headShake {
0% {
    transform: translateX(0px);
}
6.5% {
    transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
    transform: translateX(5px) rotateY(7deg);
}
31.5% {
    transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
    transform: translateX(2px) rotateY(3deg);
}
50% {
    transform: translateX(0px);
}
}
.headShake {
    animation-name: headShake;
    animation-timing-function: ease-in-out;
}
@keyframes swing {
20% {
    transform: rotate3d(0, 0, 1, 15deg);
}
40% {
    transform: rotate3d(0, 0, 1, -10deg);
}
60% {
    transform: rotate3d(0, 0, 1, 5deg);
}
80% {
    transform: rotate3d(0, 0, 1, -5deg);
}
100% {
    transform: rotate3d(0, 0, 1, 0deg);
}
}
@keyframes swing {
20% {
    transform: rotate3d(0, 0, 1, 15deg);
}
40% {
    transform: rotate3d(0, 0, 1, -10deg);
}
60% {
    transform: rotate3d(0, 0, 1, 5deg);
}
80% {
    transform: rotate3d(0, 0, 1, -5deg);
}
100% {
    transform: rotate3d(0, 0, 1, 0deg);
}
}
.swing {
    animation-name: swing;
    transform-origin: center top 0;
}
@keyframes bong {
0%, 100% {
    transform: scale3d(1, 1, 1);
}
10%, 20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.2) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.2) rotate3d(0, 0, 1, -3deg);
}
}
@keyframes bong {
0%, 100% {
    transform: scale3d(1, 1, 1);
}
10%, 20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.2) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.2) rotate3d(0, 0, 1, -3deg);
}
}
.bong {
    animation-name: bong;
}
@keyframes wobble {
0%, 100% {
    transform: none;
}
15% {
    transform: translate3d(-25%, 0px, 0px) rotate3d(0, 0, 1, -5deg);
}
30% {
    transform: translate3d(20%, 0px, 0px) rotate3d(0, 0, 1, 3deg);
}
45% {
    transform: translate3d(-15%, 0px, 0px) rotate3d(0, 0, 1, -3deg);
}
60% {
    transform: translate3d(10%, 0px, 0px) rotate3d(0, 0, 1, 2deg);
}
75% {
    transform: translate3d(-5%, 0px, 0px) rotate3d(0, 0, 1, -1deg);
}
}
@keyframes wobble {
0%, 100% {
    transform: none;
}
15% {
    transform: translate3d(-25%, 0px, 0px) rotate3d(0, 0, 1, -5deg);
}
30% {
    transform: translate3d(20%, 0px, 0px) rotate3d(0, 0, 1, 3deg);
}
45% {
    transform: translate3d(-15%, 0px, 0px) rotate3d(0, 0, 1, -3deg);
}
60% {
    transform: translate3d(10%, 0px, 0px) rotate3d(0, 0, 1, 2deg);
}
75% {
    transform: translate3d(-5%, 0px, 0px) rotate3d(0, 0, 1, -1deg);
}
}
.wobble {
    animation-name: wobble;
}
@keyframes jelly {
11.1%, 0%, 100% {
    transform: none;
}
22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
    transform: skewX(0.39063deg) skewY(0.39063deg);
}
88.8% {
    transform: skewX(-0.19531deg) skewY(-0.19531deg);
}
}
@keyframes jelly {
11.1%, 0%, 100% {
    transform: none;
}
22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
    transform: skewX(0.39063deg) skewY(0.39063deg);
}
88.8% {
    transform: skewX(-0.19531deg) skewY(-0.19531deg);
}
}
.jelly {
    animation-name: jelly;
    transform-origin: center center 0;
}
@keyframes flipy {
0% {
    animation-timing-function: ease-out;
    transform: perspective(500px) rotate3d(0, 1, 0, -360deg);
}
40% {
    animation-timing-function: ease-out;
    transform: perspective(500px) translate3d(0px, 0px, 150px) rotate3d(0, 1, 0, -190deg);
}
50% {
    animation-timing-function: ease-in;
    transform: perspective(500px) translate3d(0px, 0px, 150px) rotate3d(0, 1, 0, -170deg);
}
80% {
    animation-timing-function: ease-in;
    transform: perspective(500px) scale3d(0.95, 0.95, 0.95);
}
}
@keyframes flipy {
0% {
    animation-timing-function: ease-out;
    transform: perspective(500px) rotate3d(0, 1, 0, -360deg);
}
40% {
    animation-timing-function: ease-out;
    transform: perspective(500px) translate3d(0px, 0px, 150px) rotate3d(0, 1, 0, -190deg);
}
50% {
    animation-timing-function: ease-in;
    transform: perspective(500px) translate3d(0px, 0px, 150px) rotate3d(0, 1, 0, -170deg);
}
80% {
    animation-timing-function: ease-in;
    transform: perspective(500px) scale3d(0.95, 0.95, 0.95);
}
}
.flipy {
    animation-name: flipy;
    backface-visibility: visible;
}
@keyframes hinge {
0% {
    animation-timing-function: ease-in-out;
    transform-origin: left top 0;
}
20%, 60% {
    animation-timing-function: ease-in-out;
    transform: rotate3d(0, 0, 1, 80deg);
    transform-origin: left top 0;
}
40%, 80% {
    animation-timing-function: ease-in-out;
    opacity: 1;
    transform: rotate3d(0, 0, 1, 60deg);
    transform-origin: left top 0;
}
}
@keyframes hinge {
0% {
    animation-timing-function: ease-in-out;
    transform-origin: left top 0;
}
20%, 60% {
    animation-timing-function: ease-in-out;
    transform: rotate3d(0, 0, 1, 80deg);
    transform-origin: left top 0;
}
40%, 80% {
    animation-timing-function: ease-in-out;
    opacity: 1;
    transform: rotate3d(0, 0, 1, 60deg);
    transform-origin: left top 0;
}
}
.hinge {
    animation-name: hinge;
}
@keyframes blink {
0% {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
}
40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
}
60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
}
80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
100% {
    transform: perspective(400px);
}
}
@keyframes blink {
0% {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
}
40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
}
60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
}
80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
100% {
    transform: perspective(400px);
}
}
.blink {
    animation-name: blink;
    backface-visibility: visible;
}
@keyframes spin {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}
@keyframes spin {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}
.spin {
    animation-name: spin;
    animation-timing-function: linear;
}
@keyframes flipInY {
0% {
    animation-timing-function: ease-out;
    opacity: 0;
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
}
40% {
    animation-timing-function: ease-out;
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
}
60% {
    opacity: 1;
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
}
80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
100% {
    transform: perspective(400px);
}
}
@keyframes flipInY {
0% {
    animation-timing-function: ease-out;
    opacity: 0;
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
}
40% {
    animation-timing-function: ease-out;
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
}
60% {
    opacity: 1;
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
}
80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
100% {
    transform: perspective(400px);
}
}
.flipInY {
    animation-name: flipInY;
    backface-visibility: visible;
}
.HD-Red {
    color: #f44336;
}
.HD-DeepPurple {
    color: #673ab7;
}
.HD-LightBlue {
    color: #03a9f4;
}
.HD-Green {
    color: #4caf50;
}
.HD-LightGreen {
    color: #8bc34a;
}
.HD-Yellow {
    color: #ffeb3b;
}
.HD-DeepOrange {
    color: #ff5722;
}
.HD-BlueGrey {
    color: #607d8b;
}
.HD-Purple {
    color: #9c27b0;
}
.HD-Pink {
    color: #e91e63;
}
.HD-Blue {
    color: #2196f3;
}
.HD-Teal {
    color: #009688;
}
.HD-Lime {
    color: #cddc39;
}
.HD-Orange {
    color: #ff9800;
}
.HD-Grey {
    color: #9e9e9e;
}
.HD-Brown {
    color: #795548;
}
.HD-Amber {
    color: #ffc107;
}
.HD-Cyan {
    color: #00bcd4;
}
.HD-Indigo {
    color: #3f51b5;
}
.HD-Black {
    color: #212121;
}