.animated {
    -webkit-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.8s;
    -ms-animation-duration: 0.8s;
    animation-duration: 0.8s;
}

@keyframes fadeInTop {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@-webkit-keyframes fadeInTop {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
.fadeInTop {
    -webkit-animation-name: fadeInTop;
    animation-name: fadeInTop;
}
@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.fadeInOpacity {
    -webkit-animation-name: fadeInOpacity;
    animation-name: fadeInOpacity;
}
@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}
@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotateY(-10deg);
    }
    70% {
        transform: perspective(400px) rotateY(10deg);
    }
    100% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
    }
    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
.flipInY {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    -moz-backface-visibility: visible !important;
    -moz-animation-name: flipInY;
    -o-backface-visibility: visible !important;
    -o-animation-name: flipInY;
    -webkit-backface-visibility: visible !important;
            backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
            animation-name: flipInY;
}


@keyframes fill_animation {
    0% {
        top: 90px;
        left: 0px;
    }

    100% {
        top: -20px;
        left: 150px;
    }
}

@-webkit-keyframes fill_animation {
    0% {
        top: 90px;
        left: 0px;
    }

    100% {
        top: -20px;
        left: 150px;
    }
}

/*@keyframes scaleTop {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    70% {
        opacity: 1;
        transform: scale(3) translateY(-50%);
    }
    100% {
        opacity: 0;
        transform: scale(3) translateY(-50%);
    }
}

@-webkit-keyframes scaleTop {
    0% {
        opacity: 0;
        -webkit-transform: translateY(0);
    }
    70% {
        opacity: 1;
        -webkit-transform: scale(3) translateY(-50%);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(3) translateY(-50%);
    }
}

.scaleTop {
    -webkit-animation-name: scaleTop;
    animation-name: scaleTop;
}*/