.fadeInDown {
    -webkit-animation-fill-mode:both;
    -ms-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation-duration:3s;
    -ms-animation-duration:3s;
    animation-duration:3s;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    visibility: visible !important;
   }
   @-webkit-keyframes fadeInDown {
    0% { opacity: 0; -webkit-transform: translateY(-20px); }
    100% { opacity: 1; -webkit-transform: translateY(0); }
   }
   @keyframes fadeInDown {
    0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
    100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
   }

.fadeIn {
    -webkit-animation-fill-mode:both;
    -ms-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation-duration:3s;
    -ms-animation-duration:3s;
    animation-duration:3s;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    visibility: visible !important;
}
@-webkit-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


.fadedwn {
    opacity : 0;
    transform: translateY(-50px);
    transition: opacity 2s, transform 2s;
}

.fadedwn.view{
    opacity: 1;
    transform: translateY(0);
}

.fadeleft {
    opacity : 0;
    transform: translateX(50px);
    transition: opacity 2.5s, transform 2.5s;
}

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

.faderight {
    opacity : 0;
    transform: translateX(-50px);
    transition: opacity 3s, transform 3s;
}

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