/* ===== Keyframe Animation ===== */
.dl-animation {
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

.animated{
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

/* == FadeIn == */
.sg-fadeIn {
    -webkit-animation-name: sgFadeIn;
    animation-name: sgFadeIn;
}

@-webkit-keyframes sgFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes sgFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* == FadeInLeft == */
.sg-fadeInLeft {
    -webkit-animation-name: sgFadeInLeft;
    animation-name: sgFadeInLeft;
}

@-webkit-keyframes sgFadeInLeft {
    from {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        opacity: 0;
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes sgFadeInLeft {
    from {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        opacity: 0;
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

/* == FadeInRight == */
.sg-fadeInRight {
    -webkit-animation-name: sgFadeInRight;
    animation-name: sgFadeInRight;
}

@-webkit-keyframes sgFadeInRight {
    from {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes sgFadeInRight {
    from {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

/* == FadeInTop == */
.sg-fadeInTop {
    -webkit-animation-name: sgFadeInTop;
    animation-name: sgFadeInTop;
}

@-webkit-keyframes sgFadeInTop {
    from {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
        opacity: 0;
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes sgFadeInTop {
    from {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
        opacity: 0;
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

/* == FadeInBottom == */
.sg-fadeInBottom {
    -webkit-animation-name: sgFadeInBottom;
    animation-name: sgFadeInBottom;
}

@-webkit-keyframes sgFadeInBottom {
    from {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes sgFadeInBottom {
    from {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

/* == Text FadeIn == */
.splitting.sg-textFadeIn.animated .char {
    -webkit-animation: textFadeIn 0.3s cubic-bezier(0.3, 0, 0.7, 1) both;
    animation: textFadeIn 0.3s cubic-bezier(0.3, 0, 0.7, 1) both;
    -webkit-animation-delay: calc(30ms * var(--char-index));
    animation-delay: calc(30ms * var(--char-index));
}

.splitting.sg-textFadeIn .whitespace {
    width: 5px;
}

@-webkit-keyframes textFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes textFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* == Text FadeInTop == */
.splitting.sg-textFadeInTop.animated .char {
    -webkit-animation: textFadeInTop 0.4s cubic-bezier(0.3, 0, 0.7, 1) both;
    animation: textFadeInTop 0.4s cubic-bezier(0.3, 0, 0.7, 1) both;
    -webkit-animation-delay: calc(30ms * var(--char-index));
    animation-delay: calc(30ms * var(--char-index));
    display: inline-block;
}

.splitting.sg-textFadeInTop .whitespace {
    width: 10px;
}

@-webkit-keyframes textFadeInTop {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes textFadeInTop {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

/* == Text FadeInBottom == */
.splitting.sg-textFadeInBottom.animated .char {
    -webkit-animation: textFadeInBottom 0.4s cubic-bezier(0.3, 0, 0.7, 1) both;
    animation: textFadeInBottom 0.4s cubic-bezier(0.3, 0, 0.7, 1) both;
    -webkit-animation-delay: calc(30ms * var(--char-index));
    animation-delay: calc(30ms * var(--char-index));
    display: inline-block;
}

.splitting.sg-textFadeInBottom .whitespace {
    width: 10px;
}

@-webkit-keyframes textFadeInBottom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes textFadeInBottom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}