@media screen and (max-width:800px) {
    .header-left > .logo{    
        position: absolute;
        top: 10px;
        width: calc(100% - 100px);
        text-align: center;
        z-index: 0;
        left: 50px;
        right: 50px;
    }
}
.header {
    height: 72px;
}
#menu {
    display: none;
}
@media screen and (max-width: 800px){
    #menu {
        display: block;
        z-index: 2;
    }
    #menu > nav.change{
        display: block !important;
    }
    .menu{
        display: none;
    }
    #menu-bar {
        width: 45px;
        height: 40px;
        margin: 30px 0 20px 20px;
        cursor: pointer;
    }
    .bar {
        height: 5px;
        width: 100%;
        background-color: #fff;
        display: block;
        border-radius: 5px;
        transition: 0.3s ease;
    }

    #bar1 {
        transform: translateY(-4px);
    }

    #bar3 {
        transform: translateY(4px);
    }

    .nav {
        transition: 0.3s ease;
        display: none;
    }

    .nav ul {
        padding: 0 22px;
    }

    .nav li {
        list-style: none;
        padding: 12px 0;
    }

    .nav li a {
        color: white;
        font-size: 20px;
        text-decoration: none;
        -webkit-text-stroke: 1px black;
        color: red;
    }

    .nav li a:hover {
        font-weight: bold;
    }

    .menu-bg, #menu {
        top: 0;
        left: 0;
        position: absolute;
    }

    .menu-bg {
        z-index: 1;
        width: 0;
        height: 0;
        /*margin: 30px 0 20px 20px;*/
        /*background: radial-gradient(circle, #e5eb00, #e5eb00);*/
        background-color: #e5eb00;
        border-radius: 50%;
        transition: 0.3s ease;
        background-image: url("../images/soft.png");
        background-repeat: no-repeat;
        background-size: 721px 721px;
        background-position: 277px 124px !important;
        box-shadow: 10px 7px 16px 19px rgba(0, 46, 27, 0.3) !important;
    }

    .change {
        display: block;
    }

    .change .bar {
        background-color: white;
    }

    .change #bar1 {
        transform: translateY(4px) rotateZ(-45deg);
    }

    .change #bar2 {
        opacity: 0;
    }

    .change #bar3 {
        transform: translateY(-6px) rotateZ(45deg);
    }

    .change-bg {
        width: 800px;
        height: 740px;
        transform: translate(-60%,-30%);
    }

    .nav { 
        background: transparent !important;
    }
    .nav li a {
        border: none !important;
    }
    .nav:after {
        border: none !important;
    }
}