body{
    font-family: verdana;
    display: flex;
    flex-direction: column;
    margin: 0;
    background-color:#eee ;
}
a{
    text-decoration: none;  
}
.betwen{
    justify-content: space-between;
}
.around{
    justify-content: space-around;
}
.menuArea{
    z-index: 10;
    width:100%;
    display: flex;
    transition: all 5000ms linear;
    position: fixed;
    top: 0px;
}
.menu{
    background-color: black;
    width: 100%;
    height: 78px;
    display: flex;
    justify-content:  space-between;
    padding-right: 200px;
    padding-left: 200px;
    transition: position 5000ms linear;
}
/*#menu.ativo{
    width:100%;
    display: flex;
    transition: all 5000ms linear;
    position: fixed;
    top: 0px;
}*/
.menuItem{ 
    font-size: 20px;
    margin-left: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top:  25px;
/*    border-left: solid 3px rgba(0,152,218,255);*/
}
.menuItem a:hover{
    color: rgba(0,152,218,255);
}
.menuItem a{
    color: white;
}
.iconeMenu{
    height: 200px;
    z-index: 9;
}
.botoesMenu{
    display: flex;
    justify-content:  flex-end;
}
.banner{
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to top, rgba(0,152,218,255) 5%, rgba(0, 0, 0, 1));
}
.conteudo{         
    width: 80%;
    height: auto;
    margin: auto;
    display: flex;
}
.titulo{
    width: auto;
    height: auto;
    margin: auto;
    font-size: 30px;
    font-weight: bold;
    color: white;
    padding: 20px;
    background-color: rgba(0,152,218,255);
    margin-bottom: 50px;
}
.oquefazemos{
    display: flex;
    flex-direction: column;
    margin-top: 80px;
    flex-wrap: wrap;
}
.widgetOQueFazemos{
    width: 320px;
    height: 230px;
    background-color: white;
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}
.widgetOQueFazemos:hover{
    background-color: rgba(0,152,218,255);
}
.widgetOQueFazemosSimbolo{
    margin-top: 20px;
    color: limegreen;
    font-size: 60px;
    font-weight: bolder;
    transform-style: preserve-3d;
    transition: all 0.5s linear;
}
.widgetOQueFazemosTitulo{
    color: rgba(0,152,218,255);
    font-weight: bolder;
    text-align: center;
    margin-top: 10px;
}
.widgetOQueFazemosTexto{
    text-align: center;
    margin-top: 10px;
}
.widgetOQueFazemos:hover .widgetOQueFazemosSimbolo{
    color: white;
    transform: rotateY(360deg);
}
.widgetOQueFazemos:hover .widgetOQueFazemosTitulo{
    color: white;
}
.widgetOQueFazemos:hover .widgetOQueFazemosTexto{
    color: white;
}
.servicos{
    display: flex;
    flex-direction: column;
    margin-top: 80px;
    flex-wrap: wrap;
}
.conteudoServicos{
    width: 100%;
    height: auto;
    margin: auto;
    display: flex;
    justify-content: space-around;
}
.widget{
    margin: 30px;
    width: 400px;
    height: 350px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;    
}
.widget:hover{
    animation-name: widgetAnimacao;
    animation-duration: 10s;
    animation-iteration-count: 1;
    background-size: 1200px;
}
@keyframes widgetAnimacao{
    0%{ background-size: 700px;}
    100%{ background-size: 1200px;}
}
.widgetTitle{
    width: 400px;
    height: 350px;
    background-color: rgba(0,0,0,0.6);
    color: white;
    font-weight: bolder;
    font-size: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: none;
}
@keyframes bgAnimacao{
    0%{ background-color: rgba(0,0,0,0.0);}
    100%{ background-color: rgba(0,0,0,0.6);}
}
.widget:hover .widgetTitle{
    animation-name: bgAnimacao;
    animation-duration: 1s;
    animation-iteration-count: 0.3;
    display: flex;
}
.widgetDescriçao{
    margin-top: 20px;
    font-size: 15px;
    font-weight: normal;
}
.whats{
    width: 60px;
    height: 60px;
    border-radius: 30px;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #34af23 ;
    position:fixed ;
    bottom: 20px;
    right: 30px;
    
    animation-name: whatsAnimacao;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
.whats a {
    text-decoration: none;
    font-weight: bolder;
    color: white;
}
@keyframes whatsAnimacao{
    0%{ right: 40px;}
    1%{ right: 22px;}
    2%{ right: 32px;}
    3%{ right: 40px;}
    4%{ right: 32px;}
    100%{ right: 32px;}
}
.depoimentos{
    width: 100%;
    height: auto;
    padding-bottom: 50px;
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sliderDepoimento{
    width: 100%;
    height: 250px;
    overflow: hidden;
}
.depTitulo{
    width: auto;
    height: auto;
    font-size: 30px;
    font-weight: bold;
    color: white;
    padding: 20px;
    background-color: rgba(0,152,218,255);
    margin-bottom: 50px;
}
.depoimentosArea{
    display: flex;
    justify-content: flex-start;
    transition: all linear 1s;
}
.depoimento{
    margin: 30px;
    margin-bottom: 0px;
    margin-right: 0px;
    width: 370px;
    height: 120px;
    display: flex;   
}
.depoimentoImagem{
    border: solid 7px rgba(0,152,218,255);
    width: 100px;
    height: 100px;
    border-radius: 60px;
    background-size: cover;
}
.depTextos{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 20px;
}
.depoimentoTitulo{
    font-size: 14px;
    font-style:italic ;
}
.depoimentoAutor{
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 10px;
}
.depoimentoLocal{
    font-size: 12px;
}
.depoimentoTexto{
    text-align: justify;
    width: 350px;
    padding: 5px;
    margin-left: 30px;
}
.depoimentoToque{
    margin-top: -235px;
    position: absolute;
    width: 30%;
    height: 250px;
    background-color: #ccc;
    cursor: pointer;
    background-color: rgba(0,152,218,0);
}
.contatos{
    width: 100%;
    height: 300px;
    padding-bottom: 50px;
    background-color: rgba(0,152,218,255);
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.contatosTitulo{
    font-size: 30px;
    font-weight: bold;
    color: white;
    padding: 20px;
    margin-bottom: 50px;
    display: flex;
}
.contatosCorpo{
    width: 100%;
    justify-content: space-around;
    display: flex;

}
.endereco{
    
}
.contatosArea{
    display: flex;
    flex-direction: column;
}
.contatoItem{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.contatoItemIcone{
    font-size: 20px;
    font-weight: bold;
    padding: 5px;
    color: white;
}
.contatoItemTexto{
    padding: 5px;
    color: white;
    font-weight: bold;
}
.formularioEmail{
    margin-top: -170px;
    background-color: rgba(0,152,218,255);;
    border: solid 2px white;
    border-radius: 10px;
    width: 300px;
    padding: 20px;
}
.tituloForm{
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 10px;
    color: white;
}
.formularioEmailItem{
    width: 100%;
    color: white;
    
}
.label{
   width: auto;
   padding-left: 10px;
   padding-right: 10px;
   margin-bottom: 20px; 
}
.tituloLabel{
    padding-left: 10px;
}
textArea, input{
    width: 100%;
    background-color: rgba(0,0,0,0);
    border: none;
    border-bottom: solid 2px white;
}
textArea{
    background-color: rgba(0,0,0,0);
    border: solid 2px white;
    height: 100px;
    color: white;
}
input::placeholder {
    color: rgba(255,255,255,0.5);
}
.enviar{
    display: flex;
    justify-content: flex-end;
}
.enviar button{
    color: rgba(0,152,218,255);
    background-color: white;
    border: solid 2px white;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}
footer{
    background-color: black;
    color: white;
    display: flex;
    height: 140px;
    margin: 0;
    margin-top: 80px;
    align-items:  flex-start;
    font-size: 12px;
}
.logoFooter{
    position: absolute;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
/*.scroll-aparecerSobre{
    overflow: hidden;
    display: flex;
    flex-direction: column;
   width: 100%;
   float: left;
   height: 0;

   
   position: absolute;
   top: 500px;
   left: 0;
   z-index: 999;
}*/