/*** SLIDING CONTAINERS ***/
/*.slide-up
  {position: relative;
   animation-name: buttonslide;
   animation-duration: 3s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-in-out;}
@keyframes buttonslide {
  0% {top: 10vw; opacity: 0;}
  100% {top: 0; opacity: 1.0;}}*/

/*.slide-up-01
  {position: relative;
   animation-name: buttonslide;
   animation-duration: 1s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-in-out;}
@keyframes buttonslide {
  0% {top: 10vw; opacity: 0;}
  100% {top: 0; opacity: 1.0;}}

.slide-up-02
  {position: relative;
   animation-name: buttonslide;
   animation-duration: 1.5s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-in-out;}
@keyframes buttonslide {
  0% {top: 10vw; opacity: 0;}
  100% {top: 0; opacity: 1.0;}}

.slide-up-03
  {position: relative;
   animation-name: buttonslide;
   animation-duration: 2s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-in-out;}
@keyframes buttonslide {
  0% {top: 10vw; opacity: 0;}
  100% {top: 0; opacity: 1.0;}}

.slide-up-04
  {position: relative;
   animation-name: buttonslide;
   animation-duration: 2.5s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-in-out;}
@keyframes buttonslide {
  0% {top: 10vw; opacity: 0;}
  100% {top: 0; opacity: 1.0;}}*/

/*.slide-down
  {position: relative;
   animation-name: slidedown;
   animation-duration: 5s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-in-out;}
@keyframes slidedown {
  0% {bottom: 5vw; opacity: 0;}
  25% {bottom: 0vw; opacity: 1.0;}
  50% {bottom: 1vw; opacity: 1.0;}
  75% {bottom: 0vw; opacity: 1.0;}
  100% {bottom: 0vw; opacity: 1.0;}}

.slide-down-home
  {position: relative;
   animation-name: slidedown-home;
   animation-duration: 5s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-in-out;}
@keyframes slidedown-home {
  0% {bottom: 15vw; opacity: 0;}
  20% {bottom: 0vw; opacity: 1.0;}
  40% {bottom: 2vw; opacity: 1.0;}
  60% {bottom: 0vw; opacity: 1.0;}
  80% {bottom: 1vw; opacity: 1.0;}
  100% {bottom: 0vw; opacity: 1.0;}}

.slide-down-links-01
  {position: relative;
   animation-name: slidedown-links;
   animation-duration: 1s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-in-out;}
@keyframes slidedown-links {
  0% {bottom: 15vw; opacity: 0;}
  100% {bottom: 0vw; opacity: 1.0;}}

.slide-down-links-02
  {position: relative;
   animation-name: slidedown-links;
   animation-duration: 1.5s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-in-out;}
@keyframes slidedown-links {
  0% {bottom: 15vw; opacity: 0;}
  100% {bottom: 0vw; opacity: 1.0;}}

.slide-down-links-03
  {position: relative;
   animation-name: slidedown-links;
   animation-duration: 2s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-in-out;}
@keyframes slidedown-links {
  0% {bottom: 15vw; opacity: 0;}
  100% {bottom: 0vw; opacity: 1.0;}}

.slide-down-links-04
  {position: relative;
   animation-name: slidedown-links;
   animation-duration: 2.5s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-in-out;}
@keyframes slidedown-links {
  0% {bottom: 15vw; opacity: 0;}
  100% {bottom: 0vw; opacity: 1.0;}}

.slide-down-links-05
  {position: relative;
   animation-name: slidedown-links;
   animation-duration: 3s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-in-out;}
@keyframes slidedown-links {
  0% {bottom: 15vw; opacity: 0;}
  100% {bottom: 0vw; opacity: 1.0;}}

.slide-left-01
  {position: relative;
   animation-name: slideleft_01;
   animation-duration: 2s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-in-out;}
@keyframes slideleft_01 {
  0% {left: 80%; opacity: 0;}
  100% {left: 0%; opacity: 1.0;}}

.slide-left-02
  {position: relative;
   animation-name: slideleft_02;
   animation-duration: 2.5s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-in-out;}
@keyframes slideleft_02 {
  0% {left: 80%; opacity: 0;}
  100% {left: 0%; opacity: 1.0;}}

.slide-left-03
  {position: relative;
   animation-name: slideleft_03;
   animation-duration: 3s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-in-out;}
@keyframes slideleft_03 {
  0% {left: 80%; opacity: 0;}
  100% {left: 0%; opacity: 1.0;}}

.slide-left-04
  {position: relative;
   animation-name: slideleft_04;
   animation-duration: 3.5s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-in-out;}
@keyframes slideleft_04 {
  0% {left: 80%; opacity: 0;}
  100% {left: 0%; opacity: 1.0;}}

.slide-right-0
  {position: relative;
   animation-name: slideright_01;
   animation-duration: 1s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-in-out;}
@keyframes slideright_01 {
  0% {right: 80%; opacity: 0;}
  100% {right: 0%; opacity: 1.0;}}

.slide-right-01
  {position: relative;
   animation-name: slideright_01;
   animation-duration: 2s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-in-out;}
@keyframes slideright_01 {
  0% {right: 80%; opacity: 0;}
  100% {right: 0%; opacity: 1.0;}}

.slide-right-02
  {position: relative;
   animation-name: slideright_02;
   animation-duration: 2.5s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-in-out;}
@keyframes slideright_02 {
  0% {right: 80%; opacity: 0;}
  100% {right: 0%; opacity: 1.0;}}

.slide-right-03
  {position: relative;
   animation-name: slideright_03;
   animation-duration: 3s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-in-out;}
@keyframes slideright_03 {
  0% {right: 80%; opacity: 0;}
  100% {right: 0%; opacity: 1.0;}}

.slide-right-04
  {position: relative;
   animation-name: slideright_04;
   animation-duration: 3.5s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-in-out;}
@keyframes slideright_04 {
  0% {right: 80%; opacity: 0;}
  100% {right: 0%; opacity: 1.0;}}*/


/* FADING CONTAINERS */
/*.fade-in
  {opacity: 1.0;
   animation-name: fade-in;
   animation-duration: 7s;}
@keyframes fade-in {
  0% {opacity: 0.0;}
  50% {opacity: 0.0;}
  100% {opacity: 1.0;}}

.fade-slow
  {opacity: 1.0;
   animation-name: fade-slow;
   animation-duration: 6s;}
@keyframes fade-slow {
  0% {opacity: 0;}
  75% {opacity: 0;}
  100% {opacity: 1.0;}}*/

/*.fade-really-slow
  {opacity: 1.0;
   animation-name: fade-really-slow;
   animation-duration: 7s;}
@keyframes fade-really-slow {
  0% {opacity: 0;}
  100% {opacity: 1.0;}}*/

/*.fade-in-01
  {opacity: 1.0;
   animation-name: fade-in-one;
   animation-duration: 2s;}
@keyframes fade-in-one {
  0% {opacity: 0;}
  100% {opacity: 1.0;}}*/

/*.fade-in-02
  {opacity: 1.0;
   animation-name: fade-in-two;
   animation-delay: 1s;
   animation-duration: 2.5s;}
@keyframes fade-in-two {
  0% {opacity: 0;}
  100% {opacity: 1.0;}}*/

/*.fade-in-03
  {opacity: 1.0;
   animation-name: fade-in-three;
   animation-delay: .2s;
   animation-duration: 3s;}
@keyframes fade-in-three {
  0% {opacity: 0;}
  100% {opacity: 1.0;}}*/

/*.fade-in-04
  {opacity: 1.0;
   animation-name: fade-in-four;
   animation-delay: .3s;
   animation-duration: 3.5s;}
@keyframes fade-in-four {
  0% {opacity: 0;}
  100% {opacity: 1.0;}}*/

/*.fade-in-05
  {opacity: 1.0;
   animation-name: fade-in-five;
   animation-delay: .4s;
   animation-duration: 4s;}
@keyframes fade-in-five {
  0% {opacity: 0;}
  100% {opacity: 1.0;}}*/

/*.fade-in-06
  {opacity: 1.0;
   animation-name: fade-in-six;
   animation-delay: .5s;
   animation-duration: 4.5s;}
@keyframes fade-in-six {
  0% {opacity: 0;}
  100% {opacity: 1.0;}}*/

/*.fade-in-07
  {opacity: 1.0;
   animation-name: fade-in-seven;
   animation-delay: 4.6s;
   animation-duration: 6s;}
@keyframes fade-in-seven {
  0% {opacity: 0;}
  100% {opacity: 1.0;}}*/


/* COLOR CHANGERS (not in use) */
/*.color-changer
  {animation-name: colorchanger;
   animation-duration: 14s;
   animation-iteration-count: infinite;}
@keyframes colorchanger {
  0% {color: grey;}
  25% {color: #BF3F3F;}
  50% {color: grey;}
  75% {color: #BF3F3F;}
  100% {color: grey;}}*/

/* COIN SPINNER */
/*.coin-spinner
    {animation-name: coinspinner;
     animation-duration: 3s;
     animation-delay: 2s;
     animation-iteration-count: 1;}
@keyframes coinspinner {
    0% {transform: rotateY(0deg);}
    100% {transform: rotateY(360deg);}}*/

.fade-slow
  {opacity: 1.0;
   animation-name: fade-slow;
   animation-duration: 3s;
   animation-iteration-count: infinite;}
@keyframes fade-slow {
  0% {opacity: 0.8;}
  50% {opacity: 0.32;}
  100% {opacity: 0.8;}}