/* Utility classes */
.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}

.animated.fade-in {
     animation: fadeIn .5s;
}
.animated.slide-left {
    animation: slideLeft .5s;
}
.animated.slide-up {
    animation: slideUp .5s;
}
.animated.fade-out {
    animation: fadeOut .5s;
}




/* fade in & out.    */
/* ================= */
@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 1;
    }
}


/* slide             */
/* ================= */


@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes slideLeft {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}



/* success animation */
/* ================= */

@-webkit-keyframes scaleAnimation {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }

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

@keyframes scaleAnimation {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }

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

@-webkit-keyframes drawCircle {
    0% {
        stroke-dashoffset: 151px;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes drawCircle {
    0% {
        stroke-dashoffset: 151px;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes drawCheck {
    0% {
        stroke-dashoffset: 36px;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes drawCheck {
    0% {
        stroke-dashoffset: 36px;
    }

    100% {
        stroke-dashoffset: 0;
    }
}


#successAnimationCircle {
    stroke-dasharray: 151px 151px;
    stroke: #ff8100;
}

#successAnimationCheck {
    stroke-dasharray: 36px 36px;
    stroke: #fff;
}

#successAnimationResult {
    fill: #ff8100;
    opacity: 0;
}

#successAnimation.animated {
    -webkit-animation: 1s ease-out 0s 1 both scaleAnimation;
    animation: 1s ease-out 0s 1 both scaleAnimation;
}

#successAnimation.animated #successAnimationCircle {
    -webkit-animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCircle, 0.3s linear 0.9s 1 both fadeOut;
    animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCircle, 0.3s linear 0.9s 1 both fadeOut;
}

#successAnimation.animated #successAnimationCheck {
    -webkit-animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCheck, 0.3s linear 0.9s 1 both fadeOut;
    animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCheck, 0.3s linear 0.9s 1 both fadeOut;
}

#successAnimation.animated #successAnimationResult {
    -webkit-animation: 0.3s linear 0.9s both fadeIn;
    animation: 0.3s linear 0.9s both fadeIn;
}