*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    outline: none;
    font-family: "Inter", sans-serif;
    letter-spacing: 1px;
    
}

.body{

    background-color: #00000031;
}

.flex{
    display: flex;
    align-items: center;
    justify-content: space-between;

}

/*Menu*/
header{
    width: 100%;
    padding: 60px 4%;
    position: fixed;
    top:0;
    left: 0;
    transition: 0.5s;
    z-index: 9998;
}

nav{
  display: flex;
  align-items: center;
  justify-content: space-between;

}

header nav ul{
    list-style: none;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

header nav ul a{
    color: #ffffffd3;
    text-decoration: none;
    text-transform: uppercase;
    margin: 2px 40px;
    font-family: "Inter", sans-serif;
}


/*Linhas Animação*/
header ul a::after{
    content: "";
    background-color: #4f9cf9;
    height: 3px;
    width: 0%;
    display: block;
    transition: 0.3s;
}
nav ul a:hover::after{
    width: 100%;
}

/*Menu Mobile*/
nav .menuicon{
  cursor: pointer;
  font-size: 25px;
  color:white;
  display:none;
}

nav .closeicon{
  cursor: pointer;
  font-size: 30px;
  display: none;
  color:white;
}
@media(max-width: 1158px){

/*Menu*/

  .ul{
    position: fixed;
    top:0;
    right:0;
    background-color: #09438a67 ;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: 0.7s;
    clip-path: circle(0% at 100% 0);

  }
  
  .ul.open{
    clip-path: circle(141.2% at 100% 0);
    backdrop-filter: blur(15px);
   
  }

  .ul a{
    margin: 10px 0;
    font-size: 16px;
    color: white;
    }
  nav .closeicon{
    display: block;
    position: absolute;
    top: 46px;
    right: 30px;
  }

  nav .menuicon{
    display:block;

  }

  header a{
    font-size: 20px !important;
    
}
}
@media(max-height: 1158px){
    .btn-nossotrabalho2{
        padding: 8px 12px !important;
    }
}
@media(max-width: 840px){
    header .btn-contato{
        background-color: #4f9cf9;
      }
    
     /*Banner*/
     .banner .containerbanner{
    
        display: flex;
        flex-direction: column-reverse;
    }
    
     .banner .banner-img{
        display: hidden;
        margin-right: 120px !important;
        }
     
     .banner .banner-img img{
        position: relative !important;
    
     }
     
     .banner .banner-text{
        width: 100% !important;
        text-align: center !important;
        padding: 0px !important;
        }
        
     .banner .banner-text h1{
        font-size: 70px !important;
        color: white !important;
        text-align: center !important;
        }
      
      .banner .banner-text h2{
        font-size: 30px;
        color: #3580db;
        text-align: center !important;
    }
    
    .banner .banner-text p{
        text-align: center !important;
        }
        
}
@media(max-width: 800px){
  header .btn-contato{
    background-color: #4f9cf9;
  }

 /*Banner*/
 .banner .containerbanner{

    display: flex;
    flex-direction: column-reverse;
}

 .banner .banner-img{
    display: hidden;
    margin-right: 290px !important;
    }
 
 .banner .banner-img img{

    min-width: 42vh !important;
    min-height: 0vh !important;
    position: relative !important;

 }
 
 .banner .banner-text{
    width: 100% !important;
    text-align: center !important;
    padding: 0px !important;
    }
    
 .banner .banner-text h1{
    font-size: 50px !important;
    color: white !important;
    text-align: center !important;
    }
  
  .banner .banner-text h2{
    font-size: 30px;
    color: #3580db;
    text-align: center !important;
}

.banner .banner-text p{
    text-align: center !important;
    }
    
}


@media(max-width: 500px){
  header .btn-contato{

    background-color: #4f9cf9;

  }
.banner{
    background-image: url(imagens/bannercelular.png) !important;
    background-attachment: scroll !important;
}
.btn-nossotrabalho2{
    padding: 8px 25px !important;
}

    .banner .banner-img{
        display: none;
    }
    .banner .banner-text h1{
        font-size: 50px !important;
        }
        .banner .banner-text h2{
            font-size: 15px !important;
            }
    .banner .banner-text p{
        text-align: center !important;
        font-size: 18px !important;
        }

    .ul.open{
        clip-path: circle(141.2% at 100% 0);
        -webkit-backdrop-filter:  blur(15px) !important;
        backdrop-filter:  blur(15px) !important;
           
        }


    

    .trabalho .containertexto{  /*Controle de Acesso*/
                    display: flex;
                    flex-direction: column-reverse;
                    }
    .trabalho .texto-text{
                    width: 100% !important;  
                    margin-top: 60px;       
                    }
    .trabalho .texto-img{
                    width: 90% !important;
                    }




}


@media(max-width: 768px){

.logo {
        height: 50px !important;
        }

.logo img {
        width: 20vw !important;
        height: 5vh !important;
        }
        header .imgmenu{
            display: none;
        }
}

/*Efeito Rolagem Menu*/
header.rolagem{
    background-color: rgba(0, 0, 0, 0.822);
    padding: 5px 4%;
    
}

header.rolagem a{
    color: rgb(255, 255, 255);
    
}


/*Logo*/
.logo {
    padding-top: 5px;
    height: 70px;
    align-items: center;
}




/*Botão Contato*/

.btn-contato{
    background-color: transparent;
    color: rgba(255, 255, 255, 0.76);
    padding: 8px 20px;
    border: 2px solid #4f9cf9;
    border-radius: 10px;    
    cursor: pointer;
    display: inline-block;
    margin-right: 10px;
    transition: 0.5s;
}


.btn-contato a{
    color: white;
}

.btn-contato:hover{
    color: white;
    background-color: #4f9cf9;
    transition: 0.7s;
}

header.rolagem .btn-contato{
    background-color: #4f9cf9;
    color: white;
    padding: 8px 20px;
    border-radius: 10px;    
    cursor: pointer;
    display: inline-block;
    transition: 0.5s;
}


/*Banner 1 Fundo*/

.banner{

    height: 100vh;
    background-color: #000;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

}

.banner .containerbanner{
    display: flex;
    align-items: center;
    margin-top: 70px;
    width: 100%;
}
.banner .banner-img{
    max-width: 70vh;
    max-height: 70vh;
    width: 50%;
    margin-left: 250px;
    margin-top: 50px;
}

@media (max-width: 1920px){
    .banner .banner-img{
        max-width: 90vh;
        max-height: 90vh;
        width: 50%;
        margin-left: 150px;
        margin-top: 0px;
    }

}
.banner .banner-img img{
    width: 100%;
    position: relative;


}

.banner .banner-text{
    width: 50%;
    margin: 150px 100px;
    text-align: right;
    padding: 0 9px;
}
.banner .banner-text h1{
    font-size: 50px;
    color: white;
    text-align: right;
}
.banner .banner-text h2{
    font-size: 20px;
    color: #4f9cf9;
    text-align: right;
}

.banner .banner-text p{
    font-size: 15px;
    color: rgba(255, 255, 255, 0.842);
    font-weight:700;
    text-align: right;
}

.banner h1{

    font-size: 4em;
}
section.banner, footer {
    padding: 54px 0;
}

.banner h3{
    font-size: 50px;
}
.banner p{
    color: #ffffff;
    padding: 5px;
}

.btn-nossotrabalho{
    background-color: #09438a;
    color: white;
    padding: 8px 25px;
    border-radius: 10px;    
    cursor: pointer;
    display: inline-block;
    transition: 0.5s;
    margin-top: 0px;
    text-decoration:none;

}

.btn-nossotrabalho:hover{
    color: white;
    background-color: #4f9cf9;
    transition: 0.7s;
}

.btn-nossotrabalho2{
    background-color: transparent;
    color: white;
    padding: 8px 15px;
    border-radius: 10px;    
    cursor: pointer;
    display: inline-table;
    transition: 0.5s;
    margin-top: 30px;
    text-decoration:none;
    border: 3px #09438a solid;

}
.btn-nossotrabalho2:hover{
    color: white;
    background-color: #09438a;
    transition: 0.7s;
}






/*TRABALHO*/

.text-trabalhos{
    margin-top: 60px;
}

.text-trabalhos h3{
    font-size: 46px;
    color: #3580db;
    text-align: center;
}
.text-trabalhos h2{
    font-size: 20px;
    color: #949494;
    text-align: center;
    margin-bottom: 30px;
}

.text-trabalhos p{
    text-align: center;
    margin-bottom: 30px;

}


@media(max-width: 1158px){
    .text-trabalhos h3{
        font-size: 35px;
        margin-bottom: 10px;
    }

}





/*TRABALHO*/
.trabalho .containermanu{
    display: flex;
    align-items: center;
    margin-top: 70px;
    
}

.trabalho .trab-text{
    width: 50%;
    padding: 0 40px;
    margin-left: 15%;
    
}

.trabalho .trab-text h3{
    font-size: 36px;
    color: #3580db;
}
.trabalho .trab-text p{
    margin: 20px 0 10px 0;
    text-align: justify;
}


.trabalho .trab-img{
    width: 50%;
    margin-right: 7%;
}

.trabalho .trab-img img{
    width: 100%;
    position: relative;
    max-width: 450px;
    max-height: 450px;

}



@media(max-width: 1158px){
    .trabalho .trab-text h3{
        font-size: 38px;
    }
    .trabalho .trab-img img{
        margin-left: 0px;
    }
    .trabalho .trab-text{
        margin-left: 10px;
        width: 70%;
    }

}


.trabalho .containertexto{
    visibility: hidden;

}


/* CONTROLE DE ACESSO */

.trabalho .containertexto{
    display: flex;
    align-items: center;
    margin-top: 70px;
    margin-bottom: 70px;
}

.trabalho .texto-text{
    width: 50%;
    padding: 0 40px;
    margin-left: 15%;
}

.trabalho .texto-text h3{
    font-size: 36px;
    color: #3580db;
}
.trabalho .texto-text p{
    margin: 20px 0 10px 0;
    text-align: justify;
}
.trabalho .texto-text .ponto{
    color:#114e99; 
}


.trabalho .texto-img{
    width: 50%;
    margin-right: 5%;
}

.trabalho .texto-img img{
    width: 100%;
    position: relative;
    max-width: 450px;
    max-height: 450px;
}

@media(max-width: 1158px){
    .trabalho .texto-text h3{
        font-size: 38px;
    }
    .trabalho .texto-img{
        width: 40%;
        margin-right: 25px;
    }
    
    .trabalho .texto-text{
      width: 60%;
        margin-left: 10px;
        margin-right: 10px;
    }

}
/* FIM CONTROLE DE ACESSO */

/*CARROSEL*/
.carr{
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel{
  width: 30%;
  margin-bottom: 50px;
  border-radius: 20px;
  padding: 10px;
}

@media(max-width: 1158px){
    .carousel{
        width: 90%;
      }
      
}
@media(max-width: 390px){
    .carousel{
        width: 90%;
      }
}

.carr .carousel-control-prev{
    width: 50px;
    height: 50px;
    background-color: #09438a;
    border-radius: 50%;
    right: 100%;
    top: calc(50% - 25px);
}

.carr .carousel-control-next{
    width: 50px;
    height: 50px;
    background-color: #09438a;
    border-radius: 50%;
    left: 88,5%;
    top: calc(50% - 25px);
}








/* INICIOGRID */

.image-gallery {
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    padding: 50px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 250px;
    grid-auto-flow: dense;
    grid-gap: 20px;
  }
  
  .image-gallery .image-box {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    cursor: pointer;
  }
  
  .image-gallery .image-box:nth-child(7n + 1) {
    grid-column: span 2;
    grid-row: span 2;
  }



  
  .image-gallery .image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  

  
  .image-gallery .image-box .overlay {
    position: absolute;
    
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #3580dbef;
    border-radius: 15px;
    padding: 10px 10px;
    opacity: 1;
    margin: 10px 10px 10px 10px;
    
  }
  .image-gallery .image-box .details .title{
    font-size: 15px;
    color: white;
    text-decoration: none;
  }
  .image-gallery .image-box .details .descricao{
    font-size: 15px;
    color: white;
    text-decoration: none;
  }




  
  
  /*PARTE RESPONSIVA*/
  @media (max-width: 768px) {
    .image-gallery {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      grid-auto-rows: 250px; /*Tamanho do Quadrado*/
    }
  
    .image-gallery .image-box:nth-child(7n + 1) {
      grid-column: unset;
      grid-row: unset;
    }
  }
  /* FIM */



/*INICIO CONTATO*/
.imgtext{
    display: flex;
    justify-content: center;
    
}
.imgtext .imgtitulo{
    max-width: 60%;
    animation: flutuar2 2s ease-in-out infinite alternate;
}
.imgtext .imgtitulo img{
    width: 206px;
    height: 206px;
    
}
.text-contato{
    max-width: 40%;
    margin-top: 60px;
}

.text-contato h3{
    font-size: 38px;
    padding: 0px 50px;
    color: #3580db;
    text-align: center;
}

@media (max-width:1280px){
    .text-contato h3{
        font-size: 30px;
        padding: 10px 10px;
        margin-bottom: 30px;
    }
    .imgtext .imgtitulo img{
        width: 180px;
        height: 180px;
        
    }
}
@media (max-width:435px){
    .imgtext{
        flex-direction: column-reverse;
    }
    .imgtext .imgtitulo{
        max-width: 100%;
        margin-left: 130px;
        margin-bottom: 60px;
    }
    .text-contato{
        max-width: 100%;
        margin-top: 60px;
    }
}

@media (max-width:400px){
    .imgtext{
        flex-direction: column-reverse;
    }
    .imgtext .imgtitulo{
        max-width: 100%;
        margin-left: 100px;
        margin-bottom: 60px;
    }
    .text-contato{
        max-width: 100%;
        margin-top: 60px;
    }
    .text-contato h3{
        font-size: 30px;
        padding: 10px 10px;
        margin-bottom: 30px;
    }
}

.text-contato p{
    text-align: center;
    margin-bottom: 20px;

}

.containercontato {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    background-attachment: fixed;

}
.content {
    background-color: #fff;
    border: #1c1c1d 1px solid;
    border-radius: 20px;
    width: 960px;
    height: 50%;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
.content::before {
    content: "";
    position: absolute;
    background-color: #33383b;
    width: 40.1%;
    height: 100%;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    left: 0;
}
.title {
    font-size: 28px;
    font-weight: bold;
    text-transform: capitalize;
}
.imagemcontato{
    margin-top: 20px;
}
.imagemcontato img{
   width: 150px;
   height: 150px;
}
.title-primary {
    color: #fff;
}
.title-second {
    color: #33383b;
}
.description {
    font-size: 14px;
    font-weight: 300;
    line-height: 30px;
}
.description-primary {
    color: #fff;
}
.description-second {
    color: #7f8c8d;
}
.btn-primary{
    background-color: transparent;
    border: 1px solid #fff;
    transition: background-color .5s;
    border-radius: 15px;

    text-transform: uppercase;

    color: #fff;
    font-size: 10px;
    padding: 10px 10px;
    cursor: pointer;
    font-weight: bold;
    width: 150px;
    align-self: center;
    margin-top: 1rem;
}
.btn-primary:hover {
    background-color: #fff;
    color: #000;
}
.btn-second {
    background-color: #33383b;
    transition: background-color .5s;
    border: 1px solid #fff;
    transition: background-color .5s;
    border-radius: 15px;
    text-transform: uppercase;
    color: #fff;
    font-size: 10px;
    padding: 10px 10px;
    cursor: pointer;
    font-weight: bold;
    width: 150px;
    align-self: center;
    margin-top: 1rem;
    
}
.btn-second:hover {
    background-color: #fff;
    border: 1px solid #33383b;
    color: #33383b;
}

.containercontato .btn-enviarcontato{
    text-align: center;
}
.containercontato .btn-enviarcontato input {
    background-color: #33383b;
    transition: background-color .5s;
    border: 1px solid #33383b;
    border-radius: 15px;
    text-transform: uppercase;
    color: #fff;
    font-size: 10px;
    padding: 10px 10px;
    cursor: pointer;
    font-weight: bold;
    width: 150px;
    align-self: center;
    margin-top: 1rem;
    
}
.containercontato .btn-enviarcontato input:hover {
    background-color: #fff;
    border: 1px solid #33383b;
    color: #33383b;
    
}



.first-content {
    display: flex;
    transition: 0.5s;
}
.first-content .second-column {
    z-index: 11;
    transition: 0.5s;
}
.first-column {
    text-align: center;
    width: 40%;
    z-index: 10;
    transition: 0.5s;
}
.second-column {
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: 0.5s;
}


.containercontato form{
    display: flex;
    flex-direction: column;
    width: 60%;
    z-index: 1;
    cursor: pointer;
    margin-top: 9px;

}
.containercontato .inputclass label{
    position: absolute;
    left: 10px;
    margin: 5px 0;
    z-index: 1;
    cursor: pointer;
    transition: all 0.2s;
}
.containercontato .inputclass{
    color: #7f8c8d;
    position: relative;
    margin: 10px 0;
    z-index: 1;
    
}

input{
    background-color: #fff;
    width: 100%;
    border: 0;
    border-bottom: 2px solid #7f8c8d;
    padding: 5px;
    font-size: 17px;
    outline: none;
    cursor: pointer;
}


input:focus ~ label,
input:valid ~ label{
    transform: translateY(-15px);
    font-size: 12px;
}
/* second content*/

.second-content {
    position: absolute;
    display: flex;
}
.second-content .first-column {
    order: 2;
    z-index: -1;
    transition: 0.5s;
}
.second-content .second-column {
    order: 1;
    z-index: -1;
    transition: 0.5s;
}
.password::first-letter {
    text-transform: capitalize;
}



.sign-in-js .first-content .first-column {
    z-index: -1;
}

.sign-in-js .second-content .second-column {
    z-index: 11;
}
.sign-in-js .second-content .first-column {
    z-index: 13;
}

.sign-in-js .content::before {
    left: 60%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    animation: slidein 1.3s; /*MODIFIQUEI DE 3s PARA 1.3s*/

    z-index: 12;
}

.sign-up-js .content::before {
    animation: slideout 1.3s; /*MODIFIQUEI DE 3s PARA 1.3s*/

    z-index: 12;
}

.sign-up-js .second-content .first-column,
.sign-up-js .second-content .second-column {
    z-index: -1;
}

.sign-up-js .first-content .second-column {
    z-index: 11;
}

.sign-up-js .first-content .first-column {
    z-index: 13;    
}


/* DESLOCAMENTO CONTEÚDO ATRÁS DO CONTENT:BEFORE*/
.sign-in-js .first-content .second-column {

    z-index: -1;
    position: relative;
    animation: deslocamentoEsq 1.3s; /*MODIFIQUEI DE 3s PARA 1.3s*/
}

.sign-up-js .second-content .second-column {
    position: relative;
    z-index: -1;
    animation: deslocamentoDir 1.3s; /*MODIFIQUEI DE 3s PARA 1.3s*/
}

/*ANIMAÇÃOO CSS PARA O CONTEÚDO*/

@keyframes deslocamentoEsq {

    from {
        left: 0;
        opacity: 1;
        z-index: 12;
    }

    25% {
        left: -30px;
        
        /* z-index: 12; NÃO HÁ NECESSIDADE */
    }

    50% {
        opacity: 0;
        left: -60px;
       
        /* z-index: 12; NÃO HÁ NECESSIDADE */
    }

    to {
        opacity: 0;
        z-index: -1;
    }
}


@keyframes deslocamentoDir {

    from {
        opacity: 1;
        left: 0;
        z-index: 12;
    }

    35%{
        opacity: 0;
    }

    to {
        opacity: 0;
        z-index: -1;
    }
}


/*ANIMAÇÃO CSS*/

@keyframes slidein {

    from {
        left: 0;
        width: 40%;
    }

    to {
        left: 60%;
        width: 40%;
    }
}

@keyframes slideout {

    from {
        left: 60%;
        width: 40%;
    }

    to {
        left: 0;
        width: 40%;
    }
}

/*VERSÃO MOBILE*/
@media screen and (max-width: 1040px) {
    .content {
        width: 90%;
        height: 90%;
        border-radius: 20px;
    }

    .content::before {
        width: 100%;
        height: 40%;
        top: 0;
        border-radius: 20px;
    }
    .first-content, .second-content {
        flex-direction: column;
        justify-content: space-around;
    }

    .first-column, .second-column {
        width: 100%;
    }
    
    .sign-in-js .content::before {
        top: 60%;
        left: 0;
        border-radius: 20px;

    }

    .form {
        width: 90%;
    }
    
    /* ANIMAÇÃO MOBILE CSS*/

    @keyframes deslocamentoEsq {

        from {
            top: 0;
            opacity: 0;
            z-index: 12;
        }
    
        25% {
            top: -30px;
            
            /* z-index: 12; NÃO HÁ NECESSIDADE */
        }
    
        50% {
            top: -60px;
           
            /* z-index: 12; NÃO HÁ NECESSIDADE */
        }
    
        to {
            opacity: 1;
            z-index: -1;
        }
    }
    
    @keyframes imagemanimacaocontato{
        from{
            opacity: 0;
        }

        to{
            opacity: 1;
        }

    }
    @keyframes deslocamentoDir {
    
        from {
            opacity: 1;
            top: 0;
            z-index: 12;
        }
    
        35%{
            opacity: 0;
        }
    
        to {
            opacity: 0;
            z-index: -1;
        }
    }
    
    
    @keyframes slidein {
    
        from {
            top: 0;
            height: 40%;
        }
    
        to {
            top: 60%;
            height: 40%;
        }
    }
    
    @keyframes slideout {
    
        from {
            top: 60%;
            height: 40%;
        }
    
    
        to {
            top: 0;
            height: 40%;
        }
    }
    .containercontato {
        height: 100vh;
    }
}

@media screen and (max-width: 740px) {
    .form {
        width: 50%;
    }

}

@media screen and (max-width: 430px) {    
    .content {
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
        height: 100%;
        border-radius: 0;
        border: 0px;
    }

    .content::before {
        border-radius: 0;
    }

    .sign-in-js .content::before {
        top: 60%;
        left: 0;
        border-radius: 0;

    }

    .form {
        width: 100%;
        
    }

    .imagemcontato{
        display: none;
    }

}



/*FIM CONTATO*/

/*MODAL*/
.modal{
    backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.modal-content{
--bs-modal-bg: #000000b4;
--bs-modal-footer-border-color:#464545b4;

}

.modal-footer .btn{
    border: #000;
    background-color: #B22222;

}

.modal-content .btn:hover{
    background-color: #800000;
    border: none;
}

.modal-content{
    margin:0px 33px;
    margin-top: 100px;
	max-width: 84%;
    max-height: 84%;

}
.modal-body video{
    border-radius: 10px;
	max-width: 100%;
}
.modal-body img{
    border-radius: 10px;
	max-width: 100%;
}
#gallery-modal .modal-img{
	width: 100%;
}


/*FIMMODAL*/


/*RODAPÉ*/

footer {
    position: fixed;
    bottom: 0;
    z-index: 900;
}

@media (max-height:1400px) {
    footer {
        position: static;
    }
    header {
        padding-top: 40px;
    }
}

.footer-distributed {
    background-color: #1c1c1d;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 50px 50px 60px 50px;
    
}

.footer-distributed .footer-left, .footer-distributed .footer-center, .footer-distributed .footer-right {
    display: inline-block;
    vertical-align: top;
}

/* Footer left */

.footer-distributed .footer-left {
    width: 30%;
}

.footer-distributed h3 {
    color: #ffffff;
    font: normal 36px 'Cookie', cursive;
    margin: 0;
}


.footer-distributed h3 span {
    color: #3F71EA;
}

/* Footer links */

.footer-distributed .footer-links {
    color: #ffffff;
    margin: 20px 0 12px;
}

.footer-distributed .footer-links a {
    display: inline-block;
    line-height: 1.8;
    text-decoration: none;
    color: inherit;
}

.footer-distributed .footer-company-name {
    color: #8f9296;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
}

/* Footer Center */

.footer-distributed .footer-center {
    width: 35%;
}

.footer-distributed .footer-center i {
    background-color: #33383b;
    color: #ffffff;
    font-size: 25px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    text-align: center;
    line-height: 42px;
    margin: 10px 15px;
    vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope {
    font-size: 17px;
    line-height: 38px;
}

.footer-distributed .footer-center p {
    display: inline-block;
    color: #ffffff;
    vertical-align: middle;
    margin: 0;
}

.footer-distributed .footer-center p span {
    display: block;
    font-weight: normal;
    font-size: 14px;
    line-height: 2;
}


.footer-distributed .footer-center p a {
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    transition: 0.2s;
    
}

.footer-distributed .footer-center p a:hover {
    color: #3F71EA;  
}

/* Footer Right */

.footer-distributed .footer-right {
    width: 30%;
}



.footer-distributed .footer-company-about span {
    display: block;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
}

.footer-distributed .footer-icons {
    margin-top: 25px;
}

.footer-distributed .footer-icons a {
    display: inline-block;
    width: 35px;
    height: 35px;
    cursor: pointer;
    background-color: #33383b;
    border-radius: 2px;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    line-height: 35px;
    margin-right: 3px;
    margin-bottom: 5px;
    transition: 0.5s;
}

.footer-distributed .footer-icons a:hover {
    background-color: #3F71EA;
}

.footer-links a:hover {
    transition: 0.3s;
    color: #3F71EA;
}

@media (max-width: 880px) {
    .footer-distributed .footer-left, .footer-distributed .footer-center, .footer-distributed .footer-right {
        display: block;
        width: 100%;
        margin-bottom: 40px;
        text-align: center;
    }
    .footer-distributed .footer-center i {
        margin-left: 0;
    }
}       

/*FIMRODAPÉ*/

#whats{
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    background-color: #24D265;
    width: 230px;
    height: 53px;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    transition: 0.7s all;
    overflow: hidden;
}



#whats h1{
    display: block;
    color: white;
    font-weight: bold;
    font-size: 18px;
    margin-left: 15px;
    min-width: 170px;
    transition: 0.7s all;
    margin-top: 10px;
}

#whats.shrink {
    width: 50px;
    transition: 0.7s all;
    overflow: hidden;
    text-decoration: none;
}


@media(max-width: 430px){ /* Celular*/
    #whats{
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 9999;
        background-color: #24D265;
        width: 50px;
        cursor: pointer;
        display: flex;
    }
    #whats h1{
        display: none;
    }
    #whats.shrink {
    display: fixed;
    }

    .flutuar{
        animation-name: flutuar;
        animation-duration: 0.8s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: ease-in-out;
    }
@keyframes flutuar {
    from {
        transform: translate3d(0, 0, 0);
    }
    to{
        transform: translate3d(0, -15px, 0);
    }
    
}
}

@keyframes flutuar2 {
    from {
        transform: translate3d(0, 0, 0);
    }
    to{
        transform: translate3d(0, -15px, 0);
    }
    
}