/*
 * Keyframes
 */

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}


@keyframes slideUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(300%);
            transform: translateY(300%);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@-webkit-keyframes slideUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(300%);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
  }
}


@-webkit-keyframes slideDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}


@keyframes slideDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}


@keyframes example {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@-webkit-keyframes example {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


@keyframes slideinDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-300%);
            transform: translateY(-300%);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@-webkit-keyframes slideinDown {
  0% {
    opacity: 0;
        -webkit-transform: translateY(-300%);
  }

  100% {
    opacity: 1;
        -webkit-transform: none;
  }
}


  nav.home {
  -webkit-animation-duration: 0.25s;
  animation-duration: 0.25s;
    animation-name: slideinDown;
    -webkit-animation-name: slideinDown;
    -moz-animation-name: slideinDown;
	-o-animation-name: slideinDown;
}
   #navpage { 
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
    animation-name: slideUp;
    -webkit-animation-name: slideUp;
    -moz-animation-name: slideUp;
    -o-animation-name: slideUp;
}
  #contenttop { 
  -webkit-animation-duration: 0s;
  animation-duration: 0s;
    animation-name: example;
    -webkit-animation-name: example;
    -moz-animation-name: example;
    -o-animation-name: example;
}
#contentbot {

  -webkit-animation-duration: 0.25s;
  animation-duration: 0.25s;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
}