/*delay*/
.delay1{
    transition-delay: 0.2s;
}
.delay2{
    transition-delay: 0.4s;
}
.delay3{
    transition-delay: 0.6s;
}
.delay4{
    transition-delay: 0.8s;
}


/*animations*/
.fadeInDown{
    opacity: 1;
    transform:translateY(0) ;
}

.fadeInLeft{
    opacity: 1;
    transform: translateX(0) ;
}

.angry-animate{
    -webkit-animation:flipinx 0.5s ease-in-out  forwards;
    -moz-animation:flipinx 0.5s ease-in-out  forwards;
    -ms-animation:flipinx 0.5s ease-in-out  forwards;
    animation:flipinx 0.5s ease-in-out  forwards;
    }
    
    @-webkit-keyframes flipinx {
    0%{ opacity: 0; -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(700px) rotateX(80deg); }
    
    100%{ opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); }
    }
    
    @keyframes flipinx {
    0%{ opacity: 0; transform: perspective(700px) rotateX(80deg); }
    
    100%{ opacity: 1; transform: perspective(500px) rotateX(0deg); }
    }

    .angry-animate-out{
        -webkit-animation:flipinx 0.5s ease-in-out  forwards;
        -moz-animation:flipinx 0.5s ease-in-out  forwards;
        -ms-animation:flipinx 0.5s ease-in-out  forwards;
        animation:flipoutx 0.5s ease-in-out  forwards;
        }
        
        @-webkit-keyframes flipoutx {
        
        0%{ opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); }

        100%{ opacity: 0; -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(700px) rotateX(80deg); }
        }
        
        @keyframes flipoutx {
        
        0%{ opacity: 1; transform: perspective(500px) rotateX(0deg); }
        100%{ opacity: 0; transform: perspective(700px) rotateX(80deg); }
        }