/* Small - Meduim only */
@media screen and (max-width: 63.9375em) {
    #top-menu li { display: block; }
    html:lang(he-IL) #site-navigation{ right: -175%; }
    html:lang(he-IL) #site-navigation.open{ right: 0!important; }
    html:lang(he-IL) .burger{ right: 0.5rem; }
    
    html:lang(en-US) #site-navigation{ left: -175%; }
    html:lang(en-US) #site-navigation.open{ left: 0!important; }
    html:lang(he-IL) .burger{ left: 0.5rem; }

    #site-navigation {
        position: absolute;
        width: 75%;
        height: 100vh;
        top: 0;
        padding: 7rem 3rem;
        background-color: #fff;
        z-index: 10;
        -webkit-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }
    #site-navigation.open{ overflow-y: scroll; }
    .nav-background.open {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.45);
        top: 0;
        left: 0;
        cursor: pointer;
        -webkit-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }
    #site-navigation.open #top-menu li:first-child {
        -webkit-transition-delay: .3s;
        transition-delay: .3s;
    }
    #site-navigation.open #top-menu li , #site-navigation.open #secondary-menu li{
        left: 0;
        -webkit-transition: left .4s ease-out .3s,opacity .4s ease-out;
        transition: left .4s ease-out .3s,opacity .4s ease-out;
        opacity: 1;
    }

    #site-navigation #top-menu li , #site-navigation #secondary-menu li {
        left: -60px;
        -webkit-transition: left .4s ease-out .4s;
        transition: left .4s ease-out .4s;
        opacity: 0;
        position: relative;
    }
    #site-navigation #top-menu li:nth-child(2), #site-navigation #secondary-menu li:nth-child(2){
        -webkit-transition-delay: .34s;
        transition-delay: .34s;
    }
    #site-navigation #top-menu li:nth-child(3), #site-navigation #secondary-menu li:nth-child(3) {
        -webkit-transition-delay: .38s;
        transition-delay: .38s;
    }
    #site-navigation #top-menu li:nth-child(4),#site-navigation #secondary-menu li:nth-child(4) {
        -webkit-transition-delay: .42s;
        transition-delay: .42s;
    }
    #site-navigation #top-menu li:nth-child(5) {
        -webkit-transition-delay: .46s;
        transition-delay: .46s;
    }
    #site-navigation #top-menu li:nth-child(6) {
        -webkit-transition-delay: .50s;
        transition-delay: .50s;
    }
    #site-navigation #top-menu li:nth-child(7) {
        -webkit-transition-delay: .54s;
        transition-delay: .54s;
    }
    #site-navigation #top-menu li:last-child {
        -webkit-transition-delay: .5s;
        transition-delay: .5s;
    }
    #site-navigation #top-menu li a, #site-navigation #secondary-menu li a { opacity: 0; }
    #site-navigation.open #top-menu li a, #site-navigation.open #secondary-menu li a {
        opacity: 1;
        -webkit-transition: all .3s ease-out;
        transition: all .3s ease-out;
    }
    .burger {
        width: 50px;
        height: 100%;
        position: absolute;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;
        top: 0;
        z-index: 11;
        -webkit-tap-highlight-color: transparent;
    }
    .burger span {
        display: block;
        position: absolute;
        height: 2px;
        width: 60%;
        background: #c1c1c1;
        border-radius: 9px;
        opacity: 1;
        left: 7px;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: top .25s ease-in-out,width .25s ease-in-out,left .25s ease-in-out,transform .25s ease-in-out,background 0s ease-in-out;
        transition: top .25s ease-in-out,width .25s ease-in-out,left .25s ease-in-out,transform .25s ease-in-out,background 0s ease-in-out;
    }
    .burger span:nth-child(1) { top: 0; }
    .burger span:nth-child(2) { top: 8px; }
    .burger span:nth-child(3) { top: 8px; }
    .burger span:nth-child(4) { top: 16px; }

    .burger.open span:nth-child(1) { top: 18px; width: 0; left: 50%; }
    .burger.open span:nth-child(2) { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
    .burger.open span:nth-child(3) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
    .burger.open span:nth-child(4) { top: 18px; width: 0; left: 50%; }    
}