/* Data scroll animation */
[data-scroll="in"]
    opacity: 1

[data-scroll="out"]
    opacity: 0

/* animation */
[data-scroll]
  transition: all 1.5s cubic-bezier(0.22, 0.61, 0.36, 1)

/* Animation delay */
[animate-delay="1"]
    transition-delay: 0.3s !important

[animate-delay="2"]
    transition-delay: 0.6s !important

[animate-delay="3"]
    transition-delay: 0.9s !important

[animate-delay="4"]
    transition-delay: 1.2s !important

[animate-delay="5"]
    transition-delay: 1.5s !important

[animate-delay="6"]
    transition-delay: 1.8s !important

[animate-delay="7"]
    transition-delay: 2s !important

[animate-delay="8"]
    transition-delay: 2.3s !important

[animate-delay="9"]
    transition-delay: 2.6s !important

/* Animation class */
[data-scroll="in"].in-left
    transform: translateX(0)

[data-scroll="out"].in-left
    transform: translateX(-70px)

[data-scroll="in"].in-right
    transform: translateX(0)

[data-scroll="out"].in-right
    transform: translateX(70px)

[data-scroll="in"].in-bottom
    transform: translateY(0)

[data-scroll="out"].in-bottom
    transform: translateY(70px)

[data-scroll="in"].in-top
    transform: translateY(0)

[data-scroll="out"].in-top
    transform: translateY(-70px)

[data-scroll="in"].scale
    transform: scale(1)

[data-scroll="out"].scale
    transform: scale(0)

.first-element
    .in-top
        animation: in-top 1.6s cubic-bezier(0.22, 0.61, 0.36, 1)
        animation-delay: 0.8s
    .in-right
        animation: in-right 1.6s cubic-bezier(0.22, 0.61, 0.36, 1)
        animation-delay: 0.6s
    .in-left
        animation: in-left 1.6s cubic-bezier(0.22, 0.61, 0.36, 1)
        animation-delay: 0.3s
    .in-bottom
        animation: in-bottom 1.6s cubic-bezier(0.22, 0.61, 0.36, 1)
        animation-delay: 0.4s
    .scale
        animation: scale 1.6s cubic-bezier(0.22, 0.61, 0.36, 1)


@keyframes in-top
    0%
        transform: translateY(-70px)
    100%
        transform: translateY(0)

@keyframes in-right
    0%
        transform: translateY(70px)
    100%
        transform: translateY(0)

@keyframes in-left
    0%
        transform: translateX(-70px)
    100%
        transform: translateY(0)

@keyframes in-bottom
    0%
        transform: translateY(70px)
    100%
        transform: translateY(0)

@keyframes scale
    0%
        transform: scale(0)
    100%
        transform: scale(1)



@media (max-width: 576px)
    [data-scroll="out"],[data-scroll="in"]
        opacity: 1 !important
        transform: scale(1) translateY(0) translateX(0) !important
        transition: none !important