#nav-icon { width: 50px; height: 50px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; z-index:9999;}
#nav-icon span { display: block; position: absolute; height: 5px; width: 100%; background: #ed1b24; border-radius: 10px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out;}
#nav-icon span:nth-child(1) { top: 0px;}
#nav-icon span:nth-child(2) { top: 20px;}
#nav-icon span:nth-child(3) { top: 40px;}
#nav-icon.open span:nth-child(1) { top: 18px; background: #fff; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg);}
#nav-icon.open span:nth-child(2) { opacity: 0; background: #fff; left: -60px;}
#nav-icon.open span:nth-child(3) { top: 18px; background: #fff; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg);}
.navBox:before { display: block; position: fixed; top: 0; left: 0; content: ''; width: 100vw; height: 100vh; background: #ed1b24; transition: all 400ms ease-in-out; clip-path: circle(70px at calc(100% - 120px) 80px); visibility: hidden; z-index:9000;}
.open + .navBox:before { visibility: visible; clip-path: circle(100%);}

@media screen and (max-width:767px) {    
    #nav-icon { width: 35px; height: 35px; }    
    #nav-icon span { height: 4px;}    
    #nav-icon span:nth-child(1) { top: 0px; }    
    #nav-icon span:nth-child(2) { top: 13px; }    
    #nav-icon span:nth-child(3) { top: 26px; }    
    #nav-icon.open span:nth-child(1) { top: 10px; }    
    #nav-icon.open span:nth-child(3) { top: 10px; }    
    .navBox:before { clip-path: circle(40px at calc(100% - 60px) 40px);}
    .open + .navBox:before { visibility: visible; clip-path: circle(100%);}
}