* {
    box-sizing: border-box;  
}

body {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    background-image: url('../img/logo-hagane90.png');
}
 
.cabecalho {
    margin: 0;
    padding: 0;
    background: #000080;
    border-bottom: solid 5px #4faddb;
    height: 90px;
    box-sizing: content-box;
}

.logo {
    display: inline-block;
    height: 90px;
    padding: 3px;
}

.logo img {
    height: 100%;
    border-radius: 5px;

}

/* menu */
.menu {
    display: inline-block;
    vertical-align: top;
    height: 80px;
    padding: 25px;

}

.menu ul {
    margin: 0;
    padding: 0;
}

.menu li {
    display: inline-block;
}

.cabecalho a {
    text-decoration: none;
    color: #eee;
    font-size: 1.3em;
}

.menu a {
    padding: 15px;
}

.menu a:hover {
    background-color: #4faddb;
    color: #000;   
} 


@media (min-width: 200px) and (max-width: 450px)  {
    .icone { 
        display: none; 
    }
    fas {
         display: none; 
    }
    i {
        display: none; 
    }
    .cabecalho a {
        text-decoration: none;
        color: #eee;

    }
    .logo {
        display: inline-block;
        height: 90px;
        width: 100%;
        padding: 3px;
    }

    .logo img {
        width: 100%;
        height: 100%;
        border-radius: 5px;
    }
    .menu {
        display: block;
        vertical-align: top;
        height: 310px;       
    }
    .menu a {
        padding: 15px;       
    }
 
    .menu li {
        display: block;
        margin-top: 5px;
        
    }
 
    #pular {
        margin-top: 280px;
        background: #eee;
    }
    .usuario{
        font-size: 10px;
       
    }
}

@media (min-width: 451px) and (max-width: 700px)  {
    .icone { 
        display: none; 
    }
    fas {
         display: none; 
    }
    i {
        display: none; 
    }
    .menu {
        display: block;
        vertical-align: top;
    
        margin-top: 10px;
    }
    .menu li {     
        margin-top: 5px;       
    }
 
    #pular {
        margin-top: 120px;
        background: #eee;
    }
    .incmaq{
        margin-top: 5px;
    }
}

@media (min-width: 701px) and (max-width: 1067px)  {
    .icone { 
        display: none; 
    }
    fas {
         display: none; 
    }
    i {
        display: none; 
    }
    .menu {
        display: block;
        vertical-align: top;
    
        margin-top: 10px;
    }
    .menu li {
     
        margin-top: 5px;
       
    }
   .incmaq{
       
        margin-left: 30px;
    }
    .altmaq{
       
        margin-top: 10px;
    }
    
    #pular {
        margin-top: 70px;
        background: #eee;
    }
 
}