#showcase, #services, #about{
    animation: section_load 1.5s ease-out;
    animation-fill-mode: both;
}
.show_container, .service_container, .about_container{
    animation: display_animation 1s ease;
    animation-fill-mode: both;
    animation-delay: 1.5s;
}
.on_home{
    animation: fade 1.5s ease;
    animation-fill-mode: both;
}
@keyframes fade {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@media screen and (max-width: 899px){
    .show{
        animation: nav_load 1s ease;
        animation-fill-mode: both;
    }
    .close{
        animation: nav_close 1s ease;
        animation-fill-mode: both;
    }
}

@keyframes nav_close {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-500px);
    }
}
@keyframes nav_load {
    from{
        transform: translateX(-500px);
    }
    to{
        transform: translateX(0);
    }
}

@keyframes opacity_animation {
    0%{
        display: none;
    }
    100%{
        display: flex;
    }
}
@keyframes display_animation {
    0%{
        display: none;
    }
    100%{
        display: flex;
    }
}
@keyframes section_load {
    0%{
        width: 0;
        background-color: #996633;
    }
    50%{
        width: 100%;
        height: 78px;
    }
    60%{
        width: 100%;
        height: 78px;
    }
    98%{
        background-color: #996633;
    }
    100%{
        height: 100%;
        width: 100%;
        background-color: #FFCC99;
    }
}