* {
   box-sizing: border-box;
}
body{
    font-family: Arial, Helvetica, sans-serif;    
    background: #f1f1f1;
    margin: 0;
}
.bluebar{
    background-color:#34416b;    
    height: 5.2em;
    box-shadow: black;
}
.whitebar{
    background-color:#f1f1f1;
    color: #34416b;
    height: 2em;
    padding: 0.3em 1.0em;
}
@media (max-width: 720px){
    .whitebar{        
        height: 2.1em;
        padding: 1.6em 1.5em;
    }
    .whitebar div{        
        margin-top: -0.7em;
    }
}

.hidden{
    position: absolute;
    visibility: hidden;    
}

@media (max-width: 500px){
    .whitebar div{        
        visibility: hidden;
    }
    .hidden{
        position: relative;
        visibility: visible;
        color: #f1f1f1;
        padding: 1em;
        margin-top: 1em;
        width: 150px;
        text-align: right;
    }
}

.navbar{
    margin-top: 1em;
    color: #34416b;
    border-radius: 4px 0px 0px 4px;
    background-color: #f1f1f1;
    padding: 1.6em;
}
@media (max-width: 720px){
    .navbar{
        padding: 0;
        position: absolute;
        top: 5rem;
        left: 0;        
        color: #34416b;        
    }
}

.right{
    float: right;
    display: block;
}

.left{    
    float: left;
    display: block;
}

.item{
    margin-top: -0.7em;
    text-align: center;
    padding: 0.1em;
    background-color: #f1f1f1;
}

.itemimg{
    margin-top: -1.6em;
    background-color: #f1f1f1;
    padding: 0.7em 1.3em;
}
.itemimg:hover{
    background-color: #34416b1a;
}

@media (max-width: 720px){
    .item{
        padding: 0.9em 0em 0em 0.3em;
    }
    .itemimg{
        margin-top: 0em;  
        padding: 0.7em 0.6em;
        margin-top: -0.8em;
    }
}

.item a {
    padding: 1em 0.6em;
    text-decoration: none;
    color: #34416b;
}
.item a:hover {
    background-color: #34416b1a;
    color: #333333;
  }
.logo{
    position: absolute;
    top: 0;
    left: 0;
    height: 5em;
    padding: 0.3em 1em 0.1em 1em;
}

.whatsapp-fixo {
    position: fixed;
    padding: 0.5em;
    bottom:1em;
    right:0;
    z-index: 999;    
}


.container-image{  
    width: 100%;
    height: 20em;
    position: relative;
    overflow: hidden;
    
}
@media (max-width: 870px){
    .container-image{  
        height: 15em;
    }
}

@media (max-width: 640px){
    .container-image{  
        height: 10em;
    }
}

.centralize-image{  
    position:absolute;
    bottom:0;
    width:100%; 
}

.banner-image{
    position: absolute;
    right: 0;
    padding-top: 1.5em;
    padding-right: 2em;
    width: 35em;
}
@media (max-width: 870px){
    .banner-image{  
        padding-top: 1em;
        width: 27em;
    }
}

@media (max-width: 720px){
    .banner-image{  
        padding-top: 1.5em;
        width: 25em;
    }
}

@media (max-width: 640px){
    .banner-image{  
        padding-top: 1em;
        width: 18em;
    }
}

@media (max-width: 580px){
    .banner-image{  
        padding-top: 1em;
        width: 18em;
    }
}
@media (max-width: 480px){
    .banner-image{  
        padding-top: 1.5em;
        width: 17em;
    }
}
@media (max-width: 430px){
    .banner-image{  
        padding-top: 1.6em;
        width: 15em;
    }
}
@media (max-width: 390px){
    .banner-image{  
        padding-top: 2.3em;
        width: 14em;
    }
}
@media (max-width: 360px){
    .banner-image{  
        padding-top: 2.9em;
        width: 60%;
    }
}

.card{
    width: 30rem;
    background-color: white;
    border-radius: 4px;
    border: 0.1rem solid gainsboro;
    margin: 1rem;

}

@media (max-width: 1540px){
.card{
        width: 28rem;
    }
}
@media (max-width: 1430px){
    .card{
            width: 25rem;
        }
}
@media (max-width: 1300px){
    .card{
            width: 23rem;
        }
}

@media (max-width: 1200px){
    .card{
        width: 30rem;
    }
}


@media (max-width: 1050px){
    .card{
        width: 28rem;
    }
}
@media (max-width: 950px){
    .card{
        width: 35rem;
    }
}

@media (max-width: 580px){
    .card{
        width: 28rem;
    }
}
@media (max-width: 480px){
    .card{
        width: 25rem;
    }
}
@media (max-width: 430px){
    .card{
        width: 22rem;
    }
}
@media (max-width: 360px){
    .card{
        width: 20rem;
    }
}

.cardheader{
    color: #34416b;
    padding: .75rem 1.25rem;
    background-color: rgba(0,0,0,.03);
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.5rem;
    font-weight: 500;
    border-bottom: 0.1rem solid gainsboro;
}
.cardbody{
    color: #34416b;
    padding: .75rem 1.25rem 1.5rem;
    margin-top: 0em;
}
.cardbody li{
    padding: 1em;
}

.cardcolunm{
    padding: 1.5rem 0rem 1rem 2rem;
    color: #34416b;
    display: grid;
    justify-content: left;
    grid-template-columns: minmax(auto,15rem) minmax(auto,15rem);
    grid-template-rows: auto;
    grid-template-areas: "col col";
    font-size: 0.70em;
}
.cardcolunm li{
    padding: 0rem 1rem 0rem 0rem;
}
@media (max-width: 480px){
    .cardcolunm{
        padding: .75rem 0rem 1rem 2rem;
        grid-template-areas: "col";
        grid-template-columns: 1fr;
        justify-content: left;
    }
}

.cardfooter{
    text-align: right;
    padding: .75rem 1.25rem;
    margin-top: 0em;
    background-color: rgba(0,0,0,.03);
    border-top: 0.1rem solid gainsboro;
}

.container{
    display: grid;
    justify-content: space-evenly;
    justify-content: center;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "card card card";
}

@media (max-width: 1200px){
    .container{    
        grid-template-areas: "card card";
    }
}

@media (max-width: 950px){
    .container{    
        grid-template-areas: "card";
    }
}


label{
    display: flex;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
}

input[type="text"]{
    width: 100%;
    color: #34416b;
    font-size: 1rem;
    font-weight: lighter;
}

.btn{
    background-color: #34416b;
    border: none;
    color: #ffffff;
    padding: 1rem 2rem;
    border-radius: 0.3rem;
}

.btn:hover{
    background-color: #30385a;
}

.footer{
    display: grid;
    justify-content: space-evenly;
    justify-content:center;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "feet feet feet";
    background-color: rgb(209, 209, 209);
    align-items: center;
}

.footercard{
    padding: 0.7em;
}

.footercard h4{    
    padding-bottom: .5rem;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.5rem;
    font-weight: 500;
    border-bottom: 0.1rem solid #30385a25;
    color: #30385a;
}

@media (max-width: 950px){
    .footer{    
        grid-template-areas: "feet";     
    }
}

.footercard p{
    line-height: 1;   
    color: #30385a;
}

.footercard iframe{
    width:  30rem;
    height: 20rem;
}

@media (max-width: 950px){
    .footercard iframe{
        width:  35rem;        
    }
}

@media (max-width: 580px){
    .footercard iframe{
        width:  28rem;        
    }
}
@media (max-width: 480px){
    .footercard iframe{
        width:  25rem;
    }
}

@media (max-width: 430px){
    .footercard iframe{
        width: 22rem;
    }
}
@media (max-width: 360px){
    .footercard iframe{
        width: 20rem;
    }
}

.copyright{
    background: #30385a;
    margin: 0;
    text-align: center;
    padding: 0.3rem;
}

.footer-text {
    text-decoration: none;
    color: #f1f1f1;
    font-size: 0.8em;
}

.footer-text:hover{
    text-decoration: underline;
    color: #f1f1f1;
}