.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: ease-out; 
    animation-timing-function: ease-out; 
} 

/*fly from left*/
.ffl { 
    -webkit-animation-name: ffl; 
    animation-name: ffl; 
}

@-webkit-keyframes ffl { 
    0% { opacity: 0; 
        -webkit-transform: translateX(2000px); 
    }
    50% { 
        opacity: 0; 
        -webkit-transform: translateX(200px); 
    }    
    100% { opacity: 1; 
        -webkit-transform: translateX(0); 
    }
} 
@keyframes ffl { 
    0% { 
        opacity: 0; 
        transform: translateX(2000px); 
    }
    50% { 
        opacity: 0; 
        transform: translateX(200px); 
    }
    100% { 
        opacity: 1; 
        transform: translateX(0); 
    } 
} 

/*fly from right*/
.ffr { 
    -webkit-animation-name: ffr; 
    animation-name: ffr; 
}

@-webkit-keyframes ffr { 
    0% { opacity: 0; -webkit-transform: translateX(-2000px); }
    50% { 
        opacity: 0; 
        -webkit-transform: translateX(-200px); 
    }    
    100% { opacity: 1; 
        -webkit-transform: translateX(0); 
    }
} 
@keyframes ffr { 
    0% { 
        opacity: 0; 
        transform: translateX(-2000px); 
    }
    50% { 
        opacity: 0; 
        transform: translateX(-200px); 
    }
    100% { 
        opacity: 1; 
        transform: translateX(0); 
    } 
} 

/*fly from top*/
.fft { 
    -webkit-animation-name: fft; 
    animation-name: fft; 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}

@-webkit-keyframes fft { 
    0% { opacity: 0; -webkit-transform: translateY(-30px); }
    50% { 
        opacity: 0; 
        -webkit-transform: translateY(-20px); 
    }    
    100% { opacity: 1; 
        -webkit-transform: translateY(0); 
    }
} 
@keyframes fft { 
    0% { 
        opacity: 0; 
        transform: translateY(-30px); 
    }
    50% { 
        opacity: 0; 
        transform: translateY(-20px); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
} 

.fft2 { 
    -webkit-animation-name: fft2; 
    animation-name: fft2; 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
}

@-webkit-keyframes fft2 { 
    0% { opacity: 0; -webkit-transform: translateY(-30px); }
    50% { 
        opacity: 0; 
        -webkit-transform: translateY(-20px); 
    }    
    100% { opacity: 1; 
        -webkit-transform: translateY(0); 
    }
} 
@keyframes fft2 { 
    0% { 
        opacity: 0; 
        transform: translateY(-30px); 
    }
    50% { 
        opacity: 0; 
        transform: translateY(-20px); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
} 

/*pop in*/
.animate-pop-in {
  animation: pop-in .6s cubic-bezier(0, 0.9, 0.3, 1.2) forwards;
  opacity: 0;
}

@-webkit-keyframes pop-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-4rem) scale(.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
  }
}

@keyframes pop-in {
  0% {
    opacity: 0;
    transform: translateY(-4rem) scale(.8);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/*fade-slide-down*/
@keyframes fade-slide-down {
  0% {
    opacity: 0;
    transform: translateY(-4rem);
  }
  50% {
    opacity: 0;
    transform: translateY(-2rem);
  }    
  100% {
    opacity: 1;
    transform: none;
  }
}

@-webkit-keyframes fade-slide-down {
  0% {
    opacity: 0;
    -webkit-transform:: translateY(-4rem);
  }
  50% {
    opacity: 0;
    -webkit-transform:: translateY(-2rem);
  }    
  100% {
    opacity: 1;
    -webkit-transform:: none;
  }
}