.container{
    width: 100%;
    margin:0 auto;
    padding-top: 20px;
    text-align: center;
	background: rgb(235, 255, 249);
	color: black;
}

img{
    max-width:300px;
    max-height:250px;
    width: auto;
    height: auto;
    position: center;    
}


.titulo_principal{
    text-align: center;
    margin: 0 auto;
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
}

.titulo h1{
    text-align: center;
    margin:0 auto;
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
    padding: 1%;
    font-size: 80px;
    font-weight: lighter;
    color: rgb(25, 84, 136);
}

.titulo h3{
    text-align: center;
    margin: 0 auto;
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
    font-weight: lighter;
    font-size: 30px;    
}

#titulo_secao{
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
    font-size: 20px;    
    padding: 1%;
    font-weight: lighter;
}

.menu{
    margin: 0 auto;    
}

.superior_esq{
    display: inline-block;       
    width: 40%; height: 10%;
    text-align: center;
    margin: 0 auto;
    padding-top: 1%;
    padding-bottom: 8%;  
    font-weight: bold; 
}

.superior_esq #item_esq{
    display: inline-flex;
    text-align: center;
    width: 30%; height: 100%;
    margin: 0 auto;
    padding: 2%;
    background-color: rgb(207, 214, 212)
}

.superior_esq #item_dir{
    display: inline-flex;
    width: 30%; height: 100%;
    margin: 0 auto;
    padding: 2%;
    background-color: rgb(162, 170, 168)
}

.superior_dir{
    display: inline-block;
    text-align: center;
    width: 40%; height: 10%;
    margin: 0 auto;
    padding-top: 1%;
    padding-bottom: 8%;
    font-weight: bold;
}

.superior_dir #item_esq{
    display: inline-block;
    width: 30%; height: 100%;
    margin: 0 auto;
    padding: 2%;
    background-color: rgb(127, 252, 137)
}

.superior_dir #item_dir{
    display: inline-block;
    width: 30%; height: 100%;
    margin: 0 auto;
    padding: 2%;
    background-color: rgb(93, 167, 82)
}

.inferior_esq{
    display: inline-block;    
    width: 40%; height: 10%;
    margin: 0 auto;
    padding-bottom: 5%;
    font-weight: bold;
}

.inferior_esq #item_esq{
    display: inline-block;
    width: 30%; height: 100%;
    margin: 0 auto;
    padding: 2%;
    background-color: rgb(142, 200, 255)
}

.inferior_esq #item_dir{
    display: inline-block;
    width: 30%; height:100%;
    margin: 0 auto;
    padding: 2%;
    background-size: 100% 100%;
    background-color: rgb(68, 141, 209)    
}

.inferior_dir{
    display: inline-block;    
    width: 40%; height: 10%;
    margin: 0 auto;
    padding-bottom: 5%;
    font-weight: bold;
}

.inferior_dir #item_esq{
    display: inline-flex;
    width: 30%; height: 100%;
    margin: 0 auto;
    padding: 2%;
    background-color: rgb(184, 174, 84)
}

.inferior_dir #item_dir{
    display: inline-flex;
    width: 30%; height: 100%;
    margin: 0 auto;
    padding: 2%;
    background-color: rgb(202, 103, 64)
}

a:link { 
 text-decoration:none; 
 color:black; 
 font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
}

a:visited{
    text-decoration: none;    
    color: black;
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
}

@media screen and (max-width: 1265px) {

    .superior_esq, .superior_dir, .inferior_dir, .inferior_esq{        
        width: 45%; height: 10%;        
    }
    
    #item_esq, #item_dir{
        width: 40%; height: 100%;        
    }

    .titulo h1{
        font-size: 70px;
    }

    .titulo h3{
        font-size: 25px;
    }

    #titulo_secao{
        font-size: 18px;
    }

    a{        
        font-size: 14px;
        margin-left: auto;        
        margin-right: auto;
    }

    img{
        max-width:200px;
        max-height:150px;        
    }
    

}

@media screen and (max-width: 900px) {  
    
    .superior_esq, .superior_dir, .inferior_esq, .inferior_dir{       
        width: 80%;
        margin: 0 auto 8vw;
        padding-top: 5%;
        padding-bottom: 5%;
        vertical-align: middle;    
        display: inline-block;
    }
    
    .titulo h1{
        font-size: 40px;
    }

    .titulo h3{
        font-size: 20px;
    }

    #titulo_secao{
        font-size: 18px;
    }

    a{
        font-size: 14px;
        text-align: center;
    }

}

@media screen and (max-width: 500px){
    
    .superior_esq, .superior_dir, .inferior_esq, .inferior_dir{       
        width: 100vw;
        margin: 0 auto 8vw;
        padding-top: 8%;
        padding-bottom: 7%;
        vertical-align: middle;    
        display: inline-block;
    }
    .inferior_dir #item_dir{
        display: inline-flex;
    }    


    .titulo h1{
        font-size: 40px;
    }

    .titulo h3{
        font-size: 18px;
    }

    #titulo_secao{
        font-size: 15px;
    }

    a{
        font-size: 13px;
    }

    img{
        max-width:200px;
        max-height:150px;  
    }
        
}