.fade-in-animation {
    animation: fade-in 0.2s ease both;
}

.fade-out-animation {
    animation: fade-out 0.2s ease both;
}

.side-modal-appear-animation {
    animation: side-modal-appear 0.2s ease-in-out both;
}

.side-modal-disappear-animation {
    animation: side-modal-disappear 0.2s ease-in-out both;
}

.modal-appear-animation {
    animation: modal-appear 0.15s ease-in-out both;
}

.modal-disappear-animation {
    animation: modal-disappear 0.15s ease-in-out both;
}
.side-nav-open-animation {
    animation: nav-open 0.15s ease-in-out both;
}

    .side-nav-open-animation span {
        animation: fade-in-none 0.1s ease both;
    }
.side-nav-close-animation {
    animation: nav-close 0.15s ease-in-out both;
}

    .side-nav-close-animation span {
        animation: fade-out-none 0.1s ease both;
    }

@keyframes fade-out-none {
    from {
        opacity: 1;
        max-width: 500px;
    }

    to {
        opacity: 0;
        max-width: 0px;
    }
}

@keyframes fade-in-none {
    from {
        opacity: 0;
        max-width: 0px;
    }

    to {
        opacity: 1;
        max-width: 500px;
    }
}



@keyframes nav-open {
    from {
        min-width: 62px;
    }
    to {
        min-width: 270px;
    }
}
@keyframes nav-close {
    from {
        min-width: 270px;
    }

    to {
        min-width: 62px;
    }
}

@keyframes nav-open-mobile {
    from {
        left: -76px
    }

    to {
        left: 0px
    }
}

@keyframes nav-close-mobile {
    from {
        left: 0px
    }

    to {
        left: -76px
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes side-modal-appear {
    from {
        transform: translateX(600px);
    }

    to {
        transform: translateX(0px);
    }
}

@keyframes side-modal-disappear {
    from {
        transform: translateX(0px);
    }
    to {
        transform: translateX(600px);
    }
}

@keyframes modal-appear {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    85% {
        transform: scale(1.02);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}

@keyframes modal-disappear {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    30% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(0.9);
        opacity: 0;
    }
}