@keyframes subNavIn{
  from{
    transform: translateX(180px);
    -webkit-transform: translateX(180px);
    opacity: 0;
  }
  to{
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
}

@-webkit-keyframes subNavIn{
  from{
    transform: translateX(180px);
    -webkit-transform: translateX(180px);
    opacity: 0;
  }
  to{
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes subNavOut{
  from{
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
  to{
    transform: translateX(180px);
    -webkit-transform: translateX(180px);
    opacity: 0;
  }
}

@-webkit-keyframes subNavOut{
  from{
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
  to{
    transform: translateX(180px);
    -webkit-transform: translateX(180px);
    opacity: 0;
  }
}

@keyframes mainNavOut{
  from{
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
  to{
    transform: translateX(-180px);
    -webkit-transform: translateX(-180px);
    opacity: 0;
  }
}

@-webkit-keyframes mainNavOut{
  from{
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
  to{
    transform: translateX(-180px);
    -webkit-transform: translateX(-180px);
    opacity: 0;
  }
}

@keyframes mainNavIn{
  from{
    transform: translateX(-180px);
    -webkit-transform: translateX(-180px);
    opacity: 0;
  }
  to{
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
}

@-webkit-keyframes mainNavIn{
  from{
    transform: translateX(-180px);
    -webkit-transform: translateX(-180px);
    opacity: 0;
  }
  to{
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
}

.fadeIn{
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;

  animation-duration: 1s;
  -webkit-animation-duration: 1s;

  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  visibility: visible !important;
  display: inline-block !important;
}

@keyframes fadeIn {
  0% {
    transform: scale(1);
    opacity: 0.0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    -webkit-transform: scale(1);
    opacity: 0.0;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}

.slideUp{
  animation-name: slideUp;
  -webkit-animation-name: slideUp;

  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;

  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  -ms-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  visibility: visible !important;
}

@keyframes slideUp {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10%);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0%);
  }
}

@-webkit-keyframes slideUp {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(10%);
  }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0%);
  }
}

.slideUp2{
  animation-name: slideUp2;
  -webkit-animation-name: slideUp2;

  animation-duration: 0.2s;
  -webkit-animation-duration: 0.2s;

  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  -ms-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
}

@keyframes slideUp2 {
  0% {
    opacity: 0;
    transform: translateY(5%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

@-webkit-keyframes slideUp2 {
  0% {
    opacity: 0;
    transform: translateY(5%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

.slideDown{
  animation-name: slideDown;
  -webkit-animation-name: slideDown;

  animation-duration: 1s;
  -webkit-animation-duration: 1s;

  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;

  visibility: visible !important;
}

@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

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

.slideDown2{
  animation-name: slideDown2;
  -webkit-animation-name: slideDown2;

  animation-duration: 0.2s;
  -webkit-animation-duration: 0.2s;

  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;

  visibility: visible !important;
  display: inline-block !important;
}

@keyframes slideDown2 {
  0% {
    opacity: 0;
    transform: translateY(-50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

@-webkit-keyframes slideDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-50%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}

.bigEntrance{
  animation-name: bigEntrance;
  -webkit-animation-name: bigEntrance;

  animation-duration: 1s;
  -webkit-animation-duration: 1s;

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;

  visibility: visible !important;
}

@keyframes bigEntrance {
  0% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  30% {
    transform: scale(1.03);
    opacity: 1 !important;
  }
  45% {
    transform: scale(0.98);
    opacity: 1 !important;
  }
  60% {
    transform: scale(1.01);
    opacity: 1 !important;
  }
  100% {
    transform: scale(1);
    opacity: 1 !important;
  }
}

@-webkit-keyframes bigEntrance {
  0% {
    -webkit-transform: scale(0.5);
    opacity: 0.5;
  }
  30% {
    -webkit-transform: scale(1.03);
    opacity: 1 !important;
  }
  45% {
    -webkit-transform: scale(0.98);
    opacity: 1 !important;
  }
  60% {
    -webkit-transform: scale(1.01);
    opacity: 1 !important;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1 !important;
  }
}

.slideLeft{
  animation-name: slideLeft;
  -webkit-animation-name: slideLeft;

  animation-duration: 0.7s;
  -webkit-animation-duration: 0.7s;

  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;

  visibility: visible !important;
}

@keyframes slideLeft {
  0% {
    transform: translateX(10%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1 !important;
  }
}

@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform: translateX(10%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0%);
    opacity: 1 !important;
  }
}

.slideRight{
  animation-name: slideRight;
  -webkit-animation-name: slideRight;

  animation-duration: 0.7s;
  -webkit-animation-duration: 0.7s;

  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;

  visibility: visible !important;
}

@keyframes slideRight {
  0% {
    opacity: 0;
    transform: translateX(-10%);
  }
  100% {
    transform: translateX(0%);
    opacity: 1 !important;
  }
}

@-webkit-keyframes slideRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-10%);
  }
  100% {
    -webkit-transform: translateX(0%);
    opacity: 1 !important;
  }
}