@-webkit-keyframes rotation {
  from {
      -webkit-transform: rotate(0deg);
  }
  to {
      -webkit-transform: rotate(359deg);
  }
}

@keyframes rotation {
  from {
      -webkit-transform: rotate(0deg);
  }
  to {
      -webkit-transform: rotate(359deg);
  }
}

@-webkit-keyframes translateright{
  0%{
    right: -50px;
    color: transparent;
    display: none;
  }

  30%{
    right: 150px;
    color: transparent;
    display: block;
  }

  100%{
    right: 200px;
    color: white;
  }
}

@keyframes translateright{
  0%{
    right: -50px;
    color: transparent;
    display: none;
  }

  30%{
    right: 150px;
    color: transparent;
    display: block;
  }

  100%{
    right: 200px;
    color: white;
  }
}

@-webkit-keyframes translateleft{
  0%{
    right: 200px;
    color: white;
    display: block;
  }
  30%{
    right: 150px;
    color: transparent;
  }

  100%{
    right: -200px;
    color: transparent;
    display: none;
  }
}

@keyframes translateleft{
  0%{
    right: 200px;
    color: white;
    display: block;
  }
  30%{
    right: 150px;
    color: transparent;
  }

  100%{
    right: -200px;
    color: transparent;
    display: none;
  }
}

@-webkit-keyframes reducH{
  0%{
    fill: white!important;
    stroke-width:3!important;
  }

  70%{
    // -webkit-text-stroke : 1px black;
    // color: black;
  }

  100%{
    fill: black!important;
    stroke-width:0!important;
  }
}

@keyframes reducH{
  0%{
    font-size: $fh1;
    -webkit-text-stroke : 2px black;
    color: transparent;
    line-height: 5rem;
  }

  70%{
    -webkit-text-stroke : 1px black;
    color: black;
  }

  100%{
    font-size: $min-h1;
    -webkit-text-stroke : 0px black;
    color: black;
    line-height: 5rem;
  }
}

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

  100%{
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
    opacity: 0;
  }
}

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

  100%{
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
    opacity: 0;
  }
}

@-webkit-keyframes showcatlist {
  0%{
    width: 0;
    -webkit-box-shadow: 0px 0px 0px 0px black;
            box-shadow: 0px 0px 0px 0px black;
    opacity: 1;
  }

  100%{
    width: 100%;
    -webkit-box-shadow: 0px -2px 0px -2px black;
            box-shadow: 0px -2px 0px -2px black;
    opacity: 1;
  }
}

@keyframes showcatlist {
  0%{
    width: 0;
    -webkit-box-shadow: 0px 0px 0px 0px black;
            box-shadow: 0px 0px 0px 0px black;
    opacity: 1;
  }

  100%{
    width: 100%;
    -webkit-box-shadow: 0px -2px 0px -2px black;
            box-shadow: 0px -2px 0px -2px black;
    opacity: 1;
  }
}

@-webkit-keyframes showborder {
  0%{
    width: 0;
    background: black;
  }
  100%{
    width: 100%;
    background: black;
  }
}

@keyframes showborder {
  0%{
    width: 0;
    background: black;
  }
  100%{
    width: 100%;
    background: black;
  }
}

@-webkit-keyframes ultranslate {
  0%{
    opacity: 0;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  100%{
    opacity: 1;
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
}

@keyframes ultranslate {
  0%{
    opacity: 0;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  100%{
    opacity: 1;
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
}


@-webkit-keyframes showcard {
  0%{
    opacity: 0;

  }
  100%{
    opacity: 1;

  }
}


@keyframes showcard {
  0%{
    opacity: 0;

  }
  100%{
    opacity: 1;

  }
}