.menu-drop{
    position: absolute;
    width: 80%;
    height: auto;
    left: 0px;
    top: 46px;
    display: none;
    z-index: 1000;
    transition: 1s ease-out;
}

.active-nav:hover > .menu-drop{
    display: block;
}


.menu-drop li{
    border-bottom: 1px solid #fff;
    text-align: right;
    transition: 1s ease-out;
    box-shadow: 0px 0px 15px -7px black;
    background-color: #ffffff;
    color: #44362f;

}

.menu-drop li:after{
    content: " ";
    display: inline-block;
    opacity: 1;
    position: absolute;
    left: 0;
    width: 20%;
    height: 80%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    background-position: center center;
}

.menu-drop li::value ~ .menu-drop li:after{
    opacity: 0;
}




.menu-drop li:hover{
    width: 120%;
    position: relative;
    right: 28px;
    transition: 1s ease-out;
}


.menu-drop li:nth-child(1){
    padding: 5%;
    list-style: none;
    opacity: 0;
    border-bottom: 1px solid #fff;
    transition: 1s ease;
    animation: menu 300ms ease-out forwards;
    animation-delay: 300ms;

}
.menu-drop li:nth-child(2){
    padding: 5%;
    list-style: none;
    opacity: 0;
    border-bottom: 1px solid #fff;
    animation: menu 300ms ease-out forwards;
    animation-delay: 600ms;
}
.menu-drop li:nth-child(3){
    padding: 5%;
    list-style: none;
    opacity: 0;
    border-bottom: 1px solid #fff;

    animation: menu 300ms ease-out forwards;
    animation-delay: 900ms;
}
.menu-drop li:nth-child(4){
    padding: 5%;
    list-style: none;
    opacity: 0;
    border-bottom: 1px solid #fff;
    animation: menu 300ms ease-out forwards;
    animation-delay: 1200ms;
}

@keyframes menu{
    0%{
        transform: rotateX(-20deg) translateY(120px) ;
        opacity: 0;
        transition-delay: 100ms;
    }
    100%{
        transform: rotateX(0deg) translateY(0px) ;
        opacity: 1;
        transition-delay: 100ms;

    }
}
.menu-drop a{
    text-decoration-line: none;
    text-decoration-color: transparent;
    list-style: none;
    color: #ffffff;
}

/*.active-nav:hover > .menu-drop{
    display: block;
}*/

.navbar-select span:nth-child(2)::after{
    content: ' ';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-left: 2px solid #44362f;
    border-bottom: 2px solid #44362f;
    position: relative;
    left: 20px;
    bottom: 2px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.active-nav:hover > span:nth-child(2)::after{
    animation: full 1s ease-out infinite;
}

@keyframes full {
    0%{
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg) translateY(1px);
    }
    50%{
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg) translateY(-5px) translateX(5px);
    }
    100%{
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg) translateY(1px);
    }


}

@media only screen and (max-width: 500px) {

    .menu-drop{
        position: absolute;
        width: 100%;
        height: auto;
        left: -5px;
        top: 46px;
        display: none;
        z-index: 1000;
        transition: 1s ease-out;
    }

}