*{
    margin:0;
    border: 0;
    padding:0;
    
}

body{
    position:relative;
    color:#FFF;
    font-family: Verdana;
    text-align: center;
}
 
main{
    width:90%;
    height:800px;
    margin:auto;
    
   
}
 
#cabecalho_pagina{
    width:100%;
    height:120px;
    background-color: #000;
    display: flex;
    flex-direction: row;
    align-items: center;        
    justify-content: center;
    
}
 
#nav_superior{
    width:100%;
    height:35px;
    background-color: #009;
    display: flex;
    flex-direction:row;
    justify-content: space-between;
    align-items: center;
}
 
 #nav_superior a {
 width: 16.6%;
 color: #FFF;
 text-decoration: none;
 text-align: center;
 padding: 10px;/* almenta a area */
 box-sizing: border-box;/* conteúdo se encaixa no espaço existente*/
 }

 #nav_superior a:hover {
    background-color: #FFF;
    color: #009;
    transition: 1s all;
    }
 

#nav_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;
}

#nav_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*/
}

#nav_lateral a:hover{
    background-color: #000;
    border-color: #f00;
}

#meio{
   width: 58%;
    height: 480px;
    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;
}
#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("../img/sol.jpeg") ;
    background-size:cover ;
}
#caixa2{
    background-image:url("../img/rio.jpeg") ;
    background-size:cover;
}#caixa3{
    background-image:url("../img/rua.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;
}