*{
    margin:0;
    border:0;
    padding:0;
}
/*visualização na desktop*/
 
body{
    position:relative;
    color:#FFF;
    font-family: Verdana;
    text-align: center;
}
 
main{
    width: 90%;
    height:auto;
    /*background-color: chartreuse;*/
    margin:auto;
}
#titulo_pagina{
width: 100%;
height: 120px;
background-color: #000;
display: flex; /*alinhar o titulo*/
align-items: center;
flex-direction: row;
justify-content: center;
}
#menu_superior{
    width: 100%;
    height: 40px;
    background-color: #009;
    display: flex;
    flex-direction:row;
    justify-content: space-between;
    align-items: center;
}
#menu_superior a{
    color: #FFF;
    text-decoration: none;
    width: 16.67%;
    text-align: center;
    padding: 10px;/* almenta a area */
    box-sizing: border-box;/* conteúdo se encaixa no espaço existente*/
}
#menu_superior a:hover{
    background-color: #FFF;
    color: #009;
    transition: 1s all;
    }

#menu_lateral{
    width: 20%;
    height: 480px;
    /*background-color: rgb(173, 174, 169);*/
    float: left;
    display: flex;
    flex-direction: column; /*alimha em colunas*/
    justify-content: space-between;
}
#menu_lateral a{
    width: 100%;
    height: auto;
    background-color: #777;
    padding: 11.6px;/* ir para dentro*/
    box-sizing: border-box;
    color: #FFF;
    text-decoration: none;
    border-bottom: 1px solid #fff;
    text-align: left;/* vai alinha tudo dentro do hyper link*/
}
#menu_lateral a:hover{
    background-color: #000;
    border-color: #f00;
}

#meio{
    width: 58%;
    height: 480px;
    /*background-color: pink;*/
    float: left;
    padding-left: 1%;/* espaçamento da esquerda entre as camadas*/
    padding-right: 1%;/* espaco da direita entre camadas*/
}
#titulo_meio{
    width: 100%;
    height: 40px;
    background-color: #fff;
    color: #000;
}  
#div_meio{
width: 100%;
height: 170px;
/*background-color: #9c4d1b;*/
}
#meio p{
width: 100%;
height: 110px;
background-color: rgb(118, 205, 242);  
margin-top: 10px;
color: #000;
padding: 5px;
box-sizing: border-box;
text-align: left;
}

#div_meio img{
    width: 100%;
    height: 100%;
}
#caixa1{
    background-image:url("../atividade6/img/sol.jpeg") ;
    background-size:cover ;
}
#caixa2{
    background-image:url("../atividade6/img/rua.jpeg") ;
    background-size:cover;
}#caixa3{
    background-image:url("../atividade6/img/rio.jpeg") ;
    background-size:cover ;
}
#conteiner{
width: 100%;
height: 140px;
/*background-color: #ff0;*/
margin-top: 10px;
display: flex; /* avisa q via ter alinhamento a esquerda*/
flex-direction: row; /* alinhamento em limha*/
justify-content: space-between;
}
.caixa{
width: 30%;
height: 140px;
/*background-color: rgb(152, 152, 152);*/

}

aside{
    width: 20%;
    height: 480px;
    /*background-color: rgb(243, 35, 205);*/
    float: left; /* para ficar uma d lado da outra*/
}
aside img{
    width: 100%;
    height: 100%;
}
footer{
width: 100%;
height: 60px;
background-color: #000;
display: flex; /*alinhar o titulo*/
flex-direction: row;
align-items: center;
justify-content: center;
clear: left;
}

/* visualização no mobile */
 
@media only screen and (max-width:480px){
 
 
    main{
        width:98%;
    }
 
 
    #menu_superior{
        height:auto;
        flex-direction: column;
        background-color: transparent;
    }
 
     #menu_superior a{
        width:100%;
       /* height:auto;*/
       background-color: #009;
       margin-top:3px;
     }
 
 
     #menu_lateral, aside, p, #div_meio{
        display:none;
     }
 
      #meio{
            width:100%;
        }
 
    .caixa{
        width:100%;
       /* height:*/
    }
 
    #conteiner{
        flex-direction: column;
        height:auto;
    }
}
 
 
 
/* visyalização no tablet */
 
@media only screen and (min-width:481px){
    @media only screen and (max-width:720px){
 
        main{
            width:95%;
        }
 
        #menu_superior{
            height: 80px;
           flex-wrap:wrap; /* exibe uma quebra de linha se necessário */
        }
 
          #menu_superior a{
           width:33.3%;
           color:#FF0;
        }
 
        #menu_lateral, aside{
            display:none;
        }
 
        #meio{
            width:100%;
        }
 
 
    }
}