@media only screen and (max-width: 699px){
    .top img {
        width: 50px;
    }
    .top .left ul { width: 70%}
    .top .left ul .hidden-res{ display: none;
        position: absolute; width: 100%; left: 0;top: 80px; background: #1f1d33; z-index: 3;
        text-align: center;
    }
    .top .left .icon-res-top {
        display: inline; text-align: right; width: 30%;
    }
    .top .left {
         width: 100%;
    }
    .top .left .btn{ font-size: smaller}
    .top .right {
        text-align: center !important; width: 100%;
    }
    .top .right .btn {
        font-size: smaller;
    }
    .top .left ul li.dsmc .submenu {
        width: 100%; text-align: left;
    }
    .menu { height: 70px; line-height: 70px; }
    .menu .menu-item {
        width: 65%; text-align: left;
    }
    .menu ul .menu-hidden {
        display: none; position: absolute; text-align: left; background: rgba(135,161,170,0.98); left: 0; right: 0;
        width: 100%; top: 70px; z-index: 2;
    }
    .menu ul .menu-hidden li a{
        color: white;
    }
    .menu .icon-res-menu {
        display: inline-block; width: 30%; text-align: right;
    }
}
@media only screen and (min-width: 700px) and (max-width: 768px) {
    .top img {
        width: 60px;
    }
    .top .left{ width: 60% !important; font-size: small; text-align: center}
    .top .right {width: 40%!important; text-align:center}
    .top .btn { font-size: small}
    .menu { font-size: 15px}
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .top .left{ width: 65% !important; font-size: small}
    .top .right {width: 35%!important; text-align:center}
}