@charset "utf-8";



.animated {

    animation-duration: 1.5s;

    animation-fill-mode: both;

}

.animated2 {

    animation-duration: 4s;

    animation-fill-mode: both;

}

.animated.hinge {

    animation-duration: 1.5s;

}



@keyframes pulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.1);

    }

    100% {

        transform: scale(1);

    }

    }

    @keyframes pulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.1);

    }

    100% {

        transform: scale(1);

    }

}

.pulse {

    animation-name: pulse;

}

@keyframes flipInX {

    0% {

        opacity: 0;

        transform: perspective(400px) rotateX(90deg);

    }

    40% {

        transform: perspective(400px) rotateX(-10deg);

    }

    70% {

        transform: perspective(400px) rotateX(10deg);

    }

    100% {

        opacity: 1;

        transform: perspective(400px) rotateX(0deg);

    }

}

@keyframes flipInX {

    0% {

        opacity: 0;

        transform: perspective(400px) rotateX(90deg);

    }

    40% {

        transform: perspective(400px) rotateX(-10deg);

    }

    70% {

        transform: perspective(400px) rotateX(10deg);

    }

    100% {

        opacity: 1;

        transform: perspective(400px) rotateX(0deg);

    }

}

.flipInX {

    animation-name: flipInX;

    backface-visibility: visible !important;

}

@keyframes flipOutX {

    0% {

        opacity: 1;

        transform: perspective(400px) rotateX(0deg);

    }

    100% {

        opacity: 0;

        transform: perspective(400px) rotateX(90deg);

    }

}

@keyframes flipOutX {

    0% {

        opacity: 1;

        transform: perspective(400px) rotateX(0deg);

    }

    100% {

        opacity: 0;

        transform: perspective(400px) rotateX(90deg);

    }

}

.flipOutX {

    animation-name: flipOutX;

    backface-visibility: visible !important;

}

@keyframes flipInY {

    0% {

        opacity: 0;

        transform: perspective(400px) rotateY(90deg);

    }

    40% {

        transform: perspective(400px) rotateY(-10deg);

    }

    70% {

        transform: perspective(400px) rotateY(10deg);

    }

    100% {

        opacity: 1;

        transform: perspective(400px) rotateY(0deg);

    }

}

@keyframes flipInY {

    0% {

        opacity: 0;

        transform: perspective(400px) rotateY(90deg);

    }

    40% {

        transform: perspective(400px) rotateY(-10deg);

    }

    70% {

        transform: perspective(400px) rotateY(10deg);

    }

    100% {

        opacity: 1;

        transform: perspective(400px) rotateY(0deg);

    }

}

.flipInY {

    animation-name: flipInY;

    backface-visibility: visible !important;

}

@keyframes fadeIn {

    0% {

        opacity: 0;

    }

    50% {

        opacity: 0.5;

    }

    100% {

        opacity: 1;

    }

}

@keyframes fadeIn {

    0% {

        opacity: 0;

    }

    50% {

            opacity: 0.5;

        }

    100% {

        opacity: 1;

    }

}

.fadeIn {

    animation-name: fadeIn;

}

@keyframes fadeInUp {

    0% {

        opacity: 0;

        transform: translateY(60px);

    }

    100% {

        opacity: 1;

        transform: translateY(0px);

    }

}

@keyframes fadeInUp {

0% {

    opacity: 0;

    transform: translateY(60px);

}

100% {

    opacity: 1;

    transform: translateY(0px);

}

}

.fadeInUp {

    animation-name: fadeInUp;

}

@keyframes fadeInDown {

0% {

    opacity: 0;

    transform: translateY(-60px);

}

100% {

    opacity: 1;

    transform: translateY(0px);

}

}

@keyframes fadeInDown {

0% {

    opacity: 0;

    transform: translateY(-60px);

}

100% {

    opacity: 1;

    transform: translateY(0px);

}

}

.fadeInDown {

    animation-name: fadeInDown;

}

@keyframes fadeInLeft {

0% {

    opacity: 0;

    transform: translateX(-100px);

}

100% {

    opacity: 1;

    transform: translateX(0px);

}

}

@keyframes fadeInLeft {

0% {

    opacity: 0;

    transform: translateX(-100px);

}

100% {

    opacity: 1;

    transform: translateX(0px);

}

}

.fadeInLeft {

    animation-name: fadeInLeft;

}

@keyframes fadeInRight {

0% {

    opacity: 0;

    transform: translateX(100px);

}

100% {

    opacity: 1;

    transform: translateX(0px);

}

}

@keyframes fadeInRight {

0% {

    opacity: 0;

    transform: translateX(100px);

}

100% {

    opacity: 1;

    transform: translateX(0px);

}

}

.fadeInRight {

    animation-name: fadeInRight;

}

@keyframes bounceIn {

0% {

    opacity: 0;

    transform: scale(0.3);

}

50% {

    opacity: 1;

    transform: scale(1.05);

}

70% {

    transform: scale(0.9);

}

100% {

    transform: scale(1);

}

}

@keyframes bounceIn {

0% {

    opacity: 0;

    transform: scale(0.3);

}

50% {

    opacity: 1;

    transform: scale(1.05);

}

70% {

    transform: scale(0.9);

}

100% {

    transform: scale(1);

}

}

.bounceIn {

    animation-name: bounceIn;

}

@keyframes rotateIn {

0% {

    opacity: 0;

    transform: rotate(-200deg);

    transform-origin: center center 0;

}

100% {

    opacity: 1;

    transform: rotate(0deg);

    transform-origin: center center 0;

}

}

@keyframes rotateIn {

0% {

    opacity: 0;

    transform: rotate(-200deg);

    transform-origin: center center 0;

}

100% {

    opacity: 1;

    transform: rotate(0deg);

    transform-origin: center center 0;

}

}

.rotateIn {

    animation-name: rotateIn;

}

@keyframes rollIn {

0% {

    opacity: 0;

    transform: translateX(-100%) rotate(-120deg);

}

100% {

    opacity: 1;

    transform: translateX(0px) rotate(0deg);

}

}

@keyframes rollIn {

0% {

    opacity: 0;

    transform: translateX(-100%) rotate(-120deg);

}

100% {

    opacity: 1;

    transform: translateX(0px) rotate(0deg);

}

}

.rollIn {

    animation-name: rollIn;

}