.mobile-menu {
    position: fixed;
    top: 60px;
    left: 0px;
    z-index: 99999;
    background-color: rgb(16, 66, 101);
    width: 300px;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    display: none;
}

.mobile-menu-item {
    color: #fff;
    text-align: center;
    padding: 10px 10px;
    float: left;
    width: 280px;
    font-size: 1.3em;
    text-transform: uppercase;
    text-decoration: none;
}

    .mobile-menu-item:hover {
        color: #fff;
        text-decoration: none;
        background-color: rgb(240, 123, 5);
    }

        
.mobile-menu-separator {
    height: 1px;
    background-color: #fff;
    width: 300px;
    float: left;
}

@media (max-width: 450px) {
    .mobile-menu, .mobile-menu-item, .mobile-menu-separator {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .mobile-menu {
        display: block;
    }
}

@media (min-width: 700px) {
    .mobile-menu, .mobile-menu-item, .mobile-menu-separator {
        width: 0%;
    }
}

.slide-in {
    animation: slide-in 0.3s forwards;
    -webkit-animation: slide-in 0.3s forwards;
}

.slide-out {
    animation: slide-out 0.2s forwards;
    -webkit-animation: slide-out 0.2s forwards;
}

@keyframes slide-in {
    100% {
        transform: translateX(0%);
    }
}

@-webkit-keyframes slide-in {
    100% {
        -webkit-transform: translateX(0%);
    }
}

@keyframes slide-out {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@-webkit-keyframes slide-out {
    0% {
        -webkit-transform: translateX(0%);
    }

    100% {
        -webkit-transform: translateX(-100%);
    }
}