li {
    list-style-type: none;

}

ul {
    display: block;
}

 .menu {
    display: block;
    background-color: #222;
    height: 200px;
 }
 
button, .mitem {
    float: left;
    background-color: #333;
    padding: 20px;

}

button, .mitem a {
    display: block;
    border-color: #ddd;
    border-style: solid;
    border-spacing: 10px;
    border-width: 1px;
    color:#ddd;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 1em;
    
}

button, .mitem a:visited {
    color: #ccc;
}

button, a {
    color:#ddd;
    ;
  }
  

button, a:hover {
    color: #ff6347;
}

.list {
    list-style-type: none;
    border: 1px solid black;
    background-color: #333;
    width: 65%;
    margin: 0px;
    padding: 0px;

}

.litem {
    background-color: #333;
    color: #ddd;
    margin: 2px 2px 2px 2px;
    padding: 0px 0px 0px 0px;
}

.litem:hover {
    background-color: #eee;
}

.litem a {
    display: block;
    color: #ddd;
    padding: 14px 16px;
    text-decoration: none;
}

.litem a:hover {
    color: #333;
}


#logo {
    float: right;
    width: 30%;
}

#logo-mobile {
    height:25px;
    margin-right: 10px;
}
.menu-mobile-button {
    display: none;
    background-color: red;
    text-align: right;
    padding: 8px 8px 5px 8px;
    margin: 0px;
    background-color: #444;
    height: 30px;
}
.menu-mobile-title {
    text-align: left;
    float:left;
}
@media only screen and (max-width: 768px) {
    .mitem {
        float: none;
    }
    .mitem a {
        text-align: left;
    }
    .list {
        width: 100%;
    }
    .menu {
        display: none;
    }
    .menu-mobile-button {
        display: inline-block;
    }
}