.base
{
  animation-fill-mode: both;
  animation-name: base;
  animation-duration: 400ms;
  animation-delay: 0ms;
  animation-timing-function: ease;
  will-change:base;
} 

@keyframes base {
  from {
    will-change:transition;
  }
  to {
    will-change:transition;
  }
}


.base
{
  animation-fill-mode: both;
  animation-name: base;
  animation-duration: 400ms;
  animation-delay: 0ms;
  animation-timing-function: ease;
  will-change:base;
} 

.slideDownArr
{
  animation-fill-mode: both;
  animation-name: fade;
  animation-duration: 1600ms;
  animation-delay: 400ms;
  animation-timing-function: ease;
  will-change:fade;
} 


.NAV.fade, .anhors, #fp-nav{
  animation-fill-mode: both;
  animation-name: fadeDown;
  animation-duration: 960ms;
  animation-delay: 800ms;
  animation-timing-function: ease;
  will-change:fadeDown;  
}

.openMenu .fullMenu {
  animation-fill-mode: both;
  animation-name: fade;
  animation-duration: 320ms;
  animation-delay: 0ms;
  animation-timing-function: ease;
  will-change:fade;
}





.fullMenu ul li
{
  animation-fill-mode: both;
  animation-name: showedMenu;
  animation-duration: 400ms;
  animation-delay: 0ms;
  animation-timing-function: ease-out;
  will-change:animation-name;
} 

.fullMenu ul li:first-child 
{
  animation-delay: 40ms;
} 
.fullMenu ul li:nth-child(1){
  animation-delay: 80ms;
} 
.fullMenu ul li:nth-child(2){
  animation-delay: 120ms;
} 
.fullMenu ul li:nth-child(3){
  animation-delay: 160ms;
} 
.fullMenu ul li:nth-child(4){
  animation-delay: 200ms;
} 
.fullMenu ul li:nth-child(5){
  animation-delay: 240ms;
} 
.fullMenu ul li:nth-child(6){
  animation-delay: 280ms;
} 
.fullMenu ul li:nth-child(7){
  animation-delay: 320ms;
} 
.fullMenu ul li:nth-child(8){
  animation-delay: 460ms;
} 

@keyframes showedMenu {
  from {
    opacity: 0;
    transform: translateY(-26px);
    will-change:transition;
  }
  to {
    opacity: 1;
    transform: translateY(0px);
    will-change:transition;
  }

}




.section.active .fade-content {
  animation-fill-mode: both;
  animation-name: fade__content;
  animation-duration: 880ms;
  animation-delay: 480ms;
  animation-timing-function: ease;
  will-change:fade;  
}

.section.active .fadeContent2 {
  animation-fill-mode: both;
  animation-name: fade__content;
  animation-duration: 880ms;
  animation-delay: 640ms;
  animation-timing-function: ease;
  will-change:fade;  
}
 
/*

.section.active .f__airship {
  animation-fill-mode: both;
  animation-name: airship__fade;
  animation-duration: 960ms;
  animation-timing-function: ease;
  will-change:fadeDown;  
}

.section.active .f__airship-1 {
  animation-delay: 800ms;
}

.section.active .f__airship-2 {
  animation-delay: 960ms;
}

.section.active .f__airship-3 {
  animation-delay: 1200ms;
}


.mainSlide.mainPage {
  animation-fill-mode: both;
  animation-name: fade;
  animation-duration: 1600ms;
  animation-delay: 160ms;
  animation-timing-function: ease;
  will-change:fade;    
}




.section.active .project__wrap h2:after {
  animation-fill-mode: both;
  animation-name: h__line;
  animation-duration: 480ms;
  animation-delay: 640ms;
  animation-timing-function: ease;
  will-change:fade;  
}

.section.active .tools .tool {
  animation-fill-mode: both;
  animation-name: tool__zoom;
  animation-duration: 640ms;
  animation-timing-function: ease;
  will-change:fade;  
}
.section.active .tools .tool.l {
  animation-delay: 640ms; 
}
.section.active .tools .tool.m {
  animation-delay: 800ms; 
}
.section.active .tools .tool.s {
  animation-delay: 960ms; 
}

*/






@keyframes tool__zoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}


@keyframes h__line {
  from {
    width: 0px;
  }
  to {
    width: 56px;
  }
}

@keyframes fade__content {
  from {
    transform: translateY(56px);
    opacity: 0;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes base {
  from {
    will-change:transition;
  }
  to {
    will-change:transition;
  }
}


@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeDown {
  from {
    transform: translateY(-16px);
    opacity: 0;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes fadeBottom {
  from {
    transform: translateY(16px);
    opacity: 0;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes airship__fade {
  from {
    transform: translateY(64px);
    opacity: 0;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}

 

@keyframes scrollDown {
  from {
    opacity: 1;
  }
  25%{
    opacity: 0.5;
    height: 16px;
    top: 10px;
  }
  40% {
    opacity: 0.5;
    top: 20px;
    height: 8px;
  }
  75%{
    top: 10px;
  }
  to {
    opacity: 1;
  }
}




@media screen and (max-width: 991px) {
 
  .section.active .fade-content {
    animation-fill-mode: both;
    animation-name: none;
    animation-duration: 880ms;
    animation-delay: 480ms;
    animation-timing-function: ease;
    will-change:fade___;  
  }






}