.menu-top {
    padding          : 16px;
    border-bottom    : 6px solid #0072C6;
    opacity          : 1;
    z-index          : 400;
    /*position: fixed;*/
    top              : 0;
    left             : 0;
    /*width            : 100%;*/
    background-color : #FFFFFF;
    /*text-align       : center;*/
}

.menu-top:hover {
    opacity : 1.0;
}

.menu-top a {
    padding          : 12px 5px;
    color            : rgba(0, 0, 0, 0.72);
    /*font-weight      : bold;*/
    margin           : 0 2px 0 0;
    text-decoration  : none;
    border           : 1px solid transparent;
    border-radius    : 4px;
    background-color : #FFFFFF;
    font-size        : 14px;
}

.menu-top a span {
    display     : inline-block;
    margin-left : 2px;
}

.menu-top a img {
    opacity : 0.0;
}

.menu-top a:hover {
    /*border     : 1px solid #CCCCCC;*/
    /*box-shadow : inset 0px -8px 8px #F4F4F4;*/
    /*color      : #444444;*/
    /*color      : #0072C6;*/
}

.menu-top a:hover img {
    opacity : 1.0;
}

@media all and (max-width : 400px) {
    .menu-top {
        position : absolute;
        display  : block;
        width    : 100%;
        overflow : hidden;
    }

    .menu-top:hover {
        transition : all 500ms ease !important;
        height     : auto;
    }
}

@media all and (max-width : 750px) {
    .menu-top a span {
        font-size : 12px;
    }
}

@media all and (max-width : 650px) {
    .menu-top a {
        padding : 2px;
    }
}

@media all and (max-width : 600px) {
    .menu-top a {
        padding : 5px;
    }

    .menu-top a span {
        display : none;
    }

    .menu-top a i {
        font-size : 24px;
    }
}

@media all and (max-width : 400px) {
    .menu-top a i {
        font-size : 20px;
    }
}

@media all and (max-width : 320px) {
    .menu-top a i {
        font-size : 14px;
    }
}