.wrapper-visible {
    overflow: visible;
}
.wrapper-hidden {
    overflow: hidden;
}

[data-anim] {}

/* inViewport */

[data-anim="fade"] {
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

[data-anim="fade"].animated {
    opacity: 1;
}

[data-anim="fadeZoom"] {
    opacity: 0;
    transform: scale(0.95);
    transition-property: opacity transform;
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

[data-anim="fadeZoom"].animated {
    opacity: 1;
    transform: scale(1);
}

[data-anim="fadeFromTop"] {
    opacity: 0;
    transform: translateY(-30px);
    transition-property: opacity transform;
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

[data-anim="fadeFromTop"].animated {
    opacity: 1;
    transform: translateY(0);
}

[data-anim="fadeFromBottom"] {
    opacity: 0;
    transform: translateY(30px);
    transition-property: opacity transform;
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

[data-anim="fadeFromBottom"].animated {
    opacity: 1;
    transform: translateY(0);
}

[data-anim="fadeFromLeft"] {
    opacity: 0;
    transform: translateX(-30px);
    transition-property: opacity transform;
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

[data-anim="fadeFromLeft"].animated {
    opacity: 1;
    transform: translateX(0);
}

[data-anim="fadeFromRight"] {
    opacity: 0;
    transform: translateX(30px);
    transition-property: opacity transform;
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

[data-anim="fadeFromRight"].animated {
    opacity: 1;
    transform: translateX(0);
}

/* duration */

[data-duration="100"] {
    transition-duration: 100ms;
}

[data-duration="200"] {
    transition-duration: 200ms;
}

[data-duration="300"] {
    transition-duration: 300ms;
}

[data-duration="400"] {
    transition-duration: 400ms;
}

[data-duration="500"] {
    transition-duration: 500ms;
}

[data-duration="600"] {
    transition-duration: 600ms;
}

[data-duration="700"] {
    transition-duration: 700ms;
}

[data-duration="800"] {
    transition-duration: 800ms;
}

[data-duration="900"] {
    transition-duration: 900ms;
}

[data-duration="1000"] {
    transition-duration: 1000ms;
}

[data-duration="1100"] {
    transition-duration: 1100ms;
}

[data-duration="1200"] {
    transition-duration: 1200ms;
}

[data-duration="1300"] {
    transition-duration: 1300ms;
}

[data-duration="1400"] {
    transition-duration: 1400ms;
}

[data-duration="1500"] {
    transition-duration: 1500ms;
}

[data-duration="1600"] {
    transition-duration: 1600ms;
}

[data-duration="1700"] {
    transition-duration: 1700ms;
}

[data-duration="1800"] {
    transition-duration: 1800ms;
}

[data-duration="1900"] {
    transition-duration: 1900ms;
}

[data-duration="2000"] {
    transition-duration: 2000ms;
}

/* delay */

[data-delay="50"] {
    transition-delay: 50ms;
}

[data-delay="100"] {
    transition-delay: 100ms;
}

[data-delay="150"] {
    transition-delay: 150ms;
}

[data-delay="200"] {
    transition-delay: 200ms;
}

[data-delay="250"] {
    transition-delay: 250ms;
}

[data-delay="300"] {
    transition-delay: 300ms;
}

[data-delay="350"] {
    transition-delay: 350ms;
}

[data-delay="400"] {
    transition-delay: 400ms;
}

[data-delay="450"] {
    transition-delay: 450ms;
}

[data-delay="500"] {
    transition-delay: 500ms;
}

[data-delay="550"] {
    transition-delay: 550ms;
}

[data-delay="600"] {
    transition-delay: 600ms;
}

[data-delay="650"] {
    transition-delay: 650ms;
}

[data-delay="700"] {
    transition-delay: 700ms;
}

[data-delay="750"] {
    transition-delay: 750ms;
}

[data-delay="800"] {
    transition-delay: 800ms;
}

[data-delay="850"] {
    transition-delay: 850ms;
}

[data-delay="900"] {
    transition-delay: 900ms;
}

[data-delay="950"] {
    transition-delay: 950ms;
}

[data-delay="1000"] {
    transition-delay: 1000ms;
}

[data-delay="1050"] {
    transition-delay: 1050ms;
}

[data-delay="1100"] {
    transition-delay: 1100ms;
}

[data-delay="1150"] {
    transition-delay: 1150ms;
}

[data-delay="1200"] {
    transition-delay: 1200ms;
}

[data-delay="1250"] {
    transition-delay: 1250ms;
}

[data-delay="1300"] {
    transition-delay: 1300ms;
}

[data-delay="1350"] {
    transition-delay: 1350ms;
}

[data-delay="1400"] {
    transition-delay: 1400ms;
}

[data-delay="1450"] {
    transition-delay: 1450ms;
}

[data-delay="1500"] {
    transition-delay: 1500ms;
}

[data-delay="1550"] {
    transition-delay: 1550ms;
}

[data-delay="1600"] {
    transition-delay: 1600ms;
}

[data-delay="1650"] {
    transition-delay: 1650ms;
}

[data-delay="1700"] {
    transition-delay: 1700ms;
}

[data-delay="1750"] {
    transition-delay: 1750ms;
}

[data-delay="1800"] {
    transition-delay: 1800ms;
}

[data-delay="1850"] {
    transition-delay: 1850ms;
}

[data-delay="1900"] {
    transition-delay: 1900ms;
}

[data-delay="1950"] {
    transition-delay: 1950ms;
}

[data-delay="2000"] {
    transition-delay: 2000ms;
}