@layer main {
/* Animations
----------------------*/
@keyframes fade {
    0% { opacity: 0.00001; }
    100% { opacity: 1; }
  }
  @keyframes fadeInLogo {
      0% {
        opacity: 0.00001;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fadeOut {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
    @keyframes rotateThis {
      0% {
        transform: rotate(0deg);
        top: 0px;
        left: 0px;
      }
      100% {
        transform: rotate(90deg);
        top: -4rem;
        left: 4.5rem;
      }
    }
  @keyframes grow {
    0% { heigth: 0; }
    100% { height: 100%; }
  }
  @keyframes fadeReverse {
    0% { opacity: 1; }
    100% { opacity: 0; }
  }
  @keyframes fadeDown {
    0% { translate: 0 -2rem 0; opacity: 0.00001; }
    100% { translate: 0 0 0; opacity: 1; }
  }
  @keyframes fadeUp {
    0% { translate: 0 5rem 0; opacity: 0.00001; }
    100% { translate: 0 0 0; opacity: 1; }
  }
  @keyframes scaleIn {
      0% {scale: 0;}
      100% {scale: 1;}
  }
  @keyframes fadeScaleFull {
    0% { scale: 0; opacity: 0.00001; }
    100% { scale: 1; opacity: 1; }
  }
  @keyframes fadeScale {
    0% { scale: .5; opacity: 0.00001; }
    100% { scale: 1; opacity: 1; }
  }
  @keyframes fadeScaleReverse {
    0% { scale: 1.5; opacity: 0.00001; }
    100% { scale: 1; opacity: 1; }
  }
  @keyframes fadeScaleDown {
    0% { scale: 1.2; opacity: 0.00001; }
    100% { scale: 1; opacity: 1; }
  }
  @keyframes ScaleDown {
    0% { scale: 1.2; }
    100% { scale: 1; }
  }
  @keyframes fadeLeft {
    0% { translate: -5rem 0 0; opacity: 0.00001; }
    100% { translate: 0 0 0; opacity: 1; }
  }
  @keyframes fadeRight {
    0% { translate: 5rem 0 0; opacity: 0.00001; }
    100% { translate: 0 0 0; opacity: 1; }
  }
  @keyframes toLeft {
    0% { translate: 80% 0 0; rotate: -2.5deg; }
    100% { translate: 0 0 0; rotate: 0deg; }
  }
  @keyframes toRight {
    0% { translate: -80% 0 0; rotate: 2.5deg; }
    100% { translate: 0 0 0; rotate: 0deg; }
  }
  @keyframes menuDown {
   0% { translate: 0 -7.5rem 0; }
   100% { translate: 0 0 0; }
  }
  @keyframes textUp {
   0% { translate: 0 2rem 0; opacity: 0.00001; }
   100% { translate: 0 0 0; opacity: 1; }
  }
  @keyframes navDown {
   0% { translate: 0 -2rem 0; }
   100% { translate: 0 0 0; }
  }
  @keyframes fullDown {
   0% { translate: 0 -100% 0; }
   100% { translate: 0 0 0; }
  }
  @keyframes fullUp {
   0% { translate: 0 100% 0; }
   100% { translate: 0 0 0; }
  }
  @keyframes fullUpOp {
   0% { translate: 0 100% 0; opacity: 0.00001; }
   100% { translate: 0 0 0; opacity: 1; }
  }
  @keyframes fullLeft {
   0% {  translate: -100% 0 0; opacity: 0.00001; }
   100% { translate: 0 0 0; opacity: 1; }
  }
  @keyframes fullRight {
   0% {  translate: 100% 0 0; opacity: 0.00001; }
   100% { translate: 0 0 0; opacity: 1; }
  }
  @-webkit-keyframes hvr-icon-hang {
    0% { translate: 0 .6rem 0; }
    50% { translate: 0 .2rem 0; }
    100% { translate: 0 .6rem 0; }
  }
  @-webkit-keyframes hvr-icon-hang-sink {
    100% { translate: 0 .6rem 0; }
  }
  @keyframes toTopFromBottom {
      49% { translate: 0 -100% 0; }
      50% { opacity: 0; translate: 0 100% 0; }
      51% { opacity: 1; }
  }
  @keyframes toBottomFromTop {
      49% { translate: 0 100% 0; }
      50% { opacity: 0; translate: 0 -100% 0; }
      51% { opacity: 1; }
  }
  @keyframes toRightFromLeft {
      49% { translate: 100% 0 0; }
      50% { opacity: 0; translate: -100% 0 0; }
      51% { opacity: 1; }
  }
  @keyframes toLeftFromRight {
      49% { translate: -100% 0 0; }
      50% { opacity: 0; translate: 100% 0 0; }
      51% { opacity: 1; }
  }
  @keyframes openDraw {
    0% { max-height: 0; }
    100% { max-height: 999vh; }
  }
  @keyframes closeDraw {
    0% { max-height: 999vh; }
    100% { max-height: 0; }
  }
  @keyframes fadeRotate {
    0% { opacity: 0.00001; }
    100% { opacity: 1; rotate: 720deg; }
  }
  @keyframes circleSVGnoScale {
    0% { rotage: 360deg; }
    100% { rotage: 0deg; }
  }
  @keyframes filltext {
    0% { background-size: 0% 100%; }
    100% { background-size: 100% 100%; }
  }
  @keyframes emptytext {
    0% { background-size: 100% 100%; }
    100% { background-size: 0% 100%; }
  }
  @keyframes bannerDown {
    0% { translate: 0 -8rem 0; }
    100% { translate: 0 0 0; }
  }
  @keyframes upndown {
      0% { translate: 0 .5rem 0; }
      50% { translate: 0 0 0; }
      100% { translate: 0 .5rem 0; }
  }
  @keyframes circleLife {
    0% { stroke-dashoffset: 523; }
    100% { stroke-dashoffset: 0; }
  }
}