.animatable {
  visibility: hidden;
  -webkit-animation-play-state: paused;   
  -moz-animation-play-state: paused;     
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;   
  animation-play-state: paused; 
}
.animated.fadeInUp {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;

}
#footer-main-nav-ct li:hover a svg,
#h-projects article:hover .ct-clm svg,
#main-nav-ct li:hover a svg{
    -webkit-animation-name: fadeInUps;
    -moz-animation-name: fadeInUps;
    -o-animation-name: fadeInUps;
    animation-name: fadeInUps;
}
#h-projects article.ct-hide-item.active,
 .open-acc+.post-des-ser,
.about-slider figure.is-selected h2,
#tech-about .active .a-tecg-des,
#main-nav-ct li.m-an-text,
#menu-n p span.m-an-text {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;
      -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  -ms-animation-delay: .3s;
  -o-animation-delay: .3s;
  animation-delay: .3s;

}
#h-projects article.ct-hide-item.active{
  display: table;
  pointer-events: all;
}

#main-nav-ct li.m-an-text-r,
#menu-n p span.m-an-text-r{
     -webkit-animation-name: fadeInUpR;
    -moz-animation-name: fadeInUpR;
    -o-animation-name: fadeInUpR;
    animation-name: fadeInUpR; 
      -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  -ms-animation-delay: .3s;
  -o-animation-delay: .3s;
  animation-delay: .3s;
}
#h-projects article.ct-hide-item,
body::before,
.about-slider figure h2,
.post-des-ser,
#tech-about .a-tecg-des,
#main-nav-ct li,
#menu-n p span,
#footer-main-nav-ct li a svg,
#h-projects article .ct-clm svg,
#main-nav-ct li a svg,
.animatedpre{
    visibility: visible;
  will-change:all;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;

}
.animated {
  visibility: visible;
  will-change:all;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}
@media only screen and (min-width:1px) and (max-width: 1022px){
 header #in-header-links > figure div{
  opacity: 0;
  visibility: visible;
  will-change:all;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
 } 
 .m-menu-open header #in-header-links > figure div{
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;
      -webkit-animation-delay: .6s;
  -moz-animation-delay: .6s;
  -ms-animation-delay: .6s;
  -o-animation-delay: .6s;
  animation-delay: .6s;  
 }
}


@-moz-keyframes fadeInUps {
    0% {
        fill-opacity: 0;
        -moz-transform: translateX(-1em) translateZ(0);
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0) translateZ(0);
    }
}

@-o-keyframes fadeInUps {
    0% {
        fill-opacity: 0;
        -o-transform: translateX(-1em) translateZ(0);
    }

    100% {
        fill-opacity: 1;
        -o-transform: translateX(0) translateZ(0);
    }
}

@keyframes fadeInUps {
    0% {
        fill-opacity: 0;
        transform: translateX(-1em) translateZ(0);
    }

    100% {
        fill-opacity: 1;
        transform: translateX(0) translateZ(0);
    }
}

@-moz-keyframes fadeInUpR {
    0% {
        opacity: 1;
        -moz-transform: translateY(0) translateZ(0);

    }

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

@-o-keyframes fadeInUpR {
    0% {
        opacity: 1;
        -o-transform: translateY(0) translateZ(0);

    }

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

@keyframes fadeInUpR {
    0% {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }

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

@-moz-keyframes fadeInUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(20px) translateZ(0);
    }

    100% {
        opacity: 1;
        -moz-transform: translateY(0) translateZ(0);
    }
}

@-o-keyframes fadeInUp {
    0% {
        opacity: 0;
        -o-transform: translateY(20px) translateZ(0);
    }

    100% {
        opacity: 1;
        -o-transform: translateY(0) translateZ(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px) translateZ(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}