/* Start state */
.animated-modal {
    max-width: 100vw;
    border-radius: 4px;
    overflow: hidden;

    transform: translateY(-50px);
    transition: all .7s;
}

.animated-modal h2,
.animated-modal p,
.animated-modal ul{
    transform: translateY(-50px);
    opacity: 0;

    transition-property: transform, opacity;
    transition-duration: .4s;
}

/* Final state */
.fancybox-slide--current .animated-modal,
.fancybox-slide--current .animated-modal h2,
.fancybox-slide--current .animated-modal p,
.fancybox-slide--current .animated-modal ul{
    transform: translateY(0);
    opacity: 1;
}

/* Reveal content with different delays */
.fancybox-slide--current .animated-modal h2 {
    color: #797171;
    transition-delay: .1s;
}

.fancybox-slide--current .animated-modal p {
    color: #797171;
    transition-delay: .3s;
}