/*

LIST
========================================== 
01-ANIMATION-TITLE
02-ANIMATION-IMAGE 
========================================== 
*/










/* 
========================================== 
01-ANIMATION-TITLE 
========================================== 
*/



h1{
  
transition-duration:0.5s;
animation-duration: 0.5s;
animation-name: title;
}

h2{
 
transition-duration:0.5s;
animation-duration: 0.9s;
transition-duration:0.5s;

animation-name: title;
 
}

p{
 

animation-duration: 1.2s;
transition-duration:0.5s;
animation-name: title;
 
}

@keyframes title{
  0% {transform: translateX(-600px);}
 90% {transform: translateX(5px);} 
100% {transform: translateX(0px);}   
}

.h1out{
   animation-duration: 0.1s;
    transition-duration:0.5s; 
    transform: translateX(1920px);  
}

.h2out{
   animation-duration: 0.1s;
    transition-duration:0.8s; 
    transform: translateX(1920px);  
}
.pout{
   animation-duration: 0.1s;
    transition-duration:1s; 
    transform: translateX(1920px);  
}



/* 
========================================== 
02-ANIMATION-IMAGE 
========================================== 
*/


.image{
    
 animation-duration: 1s;
 transition-duration:0.9s; 
 animation-name: image;
}


.imageToggle{
    animation-duration: 0.1s;
    transition-duration:0.5s; 
    transform: translateX(-200px);
    
}

.imageOut{
    animation-duration: 0.1s;
    transition-duration:0.5s; 
    transform: translateX(700px); 
}





@keyframes image{
  0% {transform: translateX(2000px);}
 90% {transform: translateX(5px);} 
100% {transform: translateX(0px);}   
}

/* 
========================================== 
03b-MENU CONTAINER BOX ROLL
========================================== 
*/

.menu-container-box-toggleClass{
    animation-duration: 0.1s;
    transition-duration:0.5s; 
    transform: translateX(-1000px);
}



.oneRotate{
   animation-duration: 0.5s;
    transition-duration:0.5s;
   margin-top:20px;
    transform: rotate(45deg);
    opacity:1;
    
}

.oneRotateT{
   animation-duration: 0.5s;
    transition-duration:0.5s;
   margin-top:20px;
    transform: rotate(-45deg);
    opacity:0;
    
}



.threeRotate{
    transform: rotate(-45deg);
}

.movedown{
    transform: translateY(20px);
}