*{
    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;
}

header nav ul a{
    color: #ffffffd3;
    text-decoration: none;
    text-transform: uppercase;
    margin: 5px 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: 90px !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: 200px !important;
    }
 
 .banner .banner-img img{

    min-width: 42vh !important;
    min-height: 10vh !important;
    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: 500px){
  header .btn-contato{

    background-color: #4f9cf9;

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

    .banner .banner-img{
        display: none;
    }
    .banner .banner-text h1{
        font-size: 60px !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 .containermanu{  /*Manutenção*/
        display: flex;
        flex-direction: column-reverse;
        }
    .trabalho .trab-text{
         width: 95% !important;  
         margin-top: 60px;       
        }
    .trabalho .trab-img{
        width: 80% !important;
        }




    .trabalho .containercftv{  /*CFTV*/
            display: flex;
            flex-direction: column;
            }
    .trabalho .cftv-text{
             width: 100% !important;  
             margin-top: 60px;       
            }
    .trabalho .cftv-img{
            width: 80% !important;
            }
            
    .trabalho .containerar{  /*AR*/
                display: flex;
                flex-direction: column;
                }
    .trabalho .ar-text{
                 width: 100% !important;  
                 margin-top: 60px;       
                }
    .trabalho .ar-img{
                width: 90% !important;
                margin-top: 10px;
                display: flex !important;
                }

                
    .trabalho .containerilumi{  /*ilumi*/
                display: flex;
                flex-direction: column;
                }
    .trabalho .ilumi-text{
                width: 100% !important;  
                margin-top: 60px;       
                }
    .trabalho .ilumi-img{
                width: 80% !important;
                }

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


    .sobre .containersobre{  /*SOBRE*/
                    display: flex;
                    flex-direction: column-reverse;
                    }
    .sobre .sobre-text{
                    width: 100% !important;  
                    margin-top: 60px;       
                     }

    .sobre .sobre-text h3{
                    font-size: 50px !important;

    }
    .sobre .sobre-img{
                    width: 90% !important;
                    margin-top: 20px;
                    }

}


@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: 10px 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-image: url(image/background.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

}

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

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

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


}

.banner .banner-text{
    width: 50%;
    margin: 150px 100px;
    text-align: right;
    padding: 0 90px;
}
.banner .banner-text h1{
    font-size: 70px;
    color: white;
    text-align: right;
}
.banner .banner-text h2{
    font-size: 30px;
    color: #3580db;
    text-align: right;
}

.banner .banner-text p{
    font-size: 20px;
    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: 30px;
    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;
}





/*Sobre Nós*/
.sobre {
    margin-top: 70px;
    margin-bottom: 70px;

}
.sobre .containersobre{
    display: flex;
    align-items: center;
}

.sobre .sobre-text{
    width: 50%;
    padding: 0 40px;
    
}

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

.sobre .btn-nossotrabalho{
    margin:30px 0 0 0;
}



.sobre .sobre-img{
    width: 50%;
}

.sobre .sobre-img img{
    width: 90%;
    position: relative;
    animation: flutuar 2s ease-in-out infinite alternate;
}


@media(max-width: 1158px){

    .sobre .sobre-img img{
        margin-left: 0px;
    }
    .sobre .sobre-text{
        width: 50%;
    }

}



/*TRABALHO*/

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

.text-trabalhos h3{
    font-size: 46px;
    color: #3580db;
    text-align: center;
}

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

}


@media(max-width: 1158px){
    .text-trabalhos h3{
        font-size: 40px;
        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 .containermanu, .containercftv, .containerar, .containerilumi, .containeracesso{
    visibility: hidden;

}

/* CFTV */

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

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

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


.trabalho .cftv-img{
    width: 50%;
    margin-left: 15%;
}

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

}
@media(max-width: 840px){
        .trabalho .cftv-text h3{

        font-size: 38px;


    }
    .trabalho .cftv-img{
        width: 35%;
        margin-left: 0px;
    }
    .trabalho .cftv-text{
      width: 60%;
        margin-right: 10px;
    }

}
/* FIM CFTV */

/* AR CONDICIONADO */

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

.trabalho .ar-text{
    width: 50%;
    padding: 0 40px;
    
    
}

.trabalho .ar-text h3{
    font-size: 46px;
    color: #3580db;

}
.trabalho .ar-text p{
    margin: 20px 0 10px 0;
    text-align: justify;
    
}

.trabalho .ar-text .ops{
    color: #114e99;
}

.trabalho .ar-img{
    width: 50%;
}

.trabalho .ar-img img{
    width: 100%;
    position: relative;
    max-width: 450px;
    max-height: 450px;
    margin-left: 10%;
}

@media(max-width: 1158px){
    .trabalho .ar-text h3{
        font-size: 25px;
    }
    .trabalho .ar-text p{
        font-size: 15px;
    }
    .trabalho .ar-img{
        display: none;
    }
    .trabalho .ar-img img{
        margin-left: 0px;
    }
    .trabalho .ar-text{
        margin-right: 10px;
        width: 70%;
    }

}

/* AR CONDICIONADO */

/* ILUMINAÇÃO */

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

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

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


.trabalho .ilumi-img{
    width: 50%;
    margin-left: 15%;
}

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

}

@media(max-width: 1158px){
    .trabalho .ilumi-text h3{
        font-size: 38px;

    }
    .trabalho .ilumi-img{
        width: 35%;
        margin-left: 0px;
    }
    .trabalho .ilumi-text{
      width: 60%;
        margin-right: 10px;
    }


}
/* FIM ILUMINAÇÃO */


/* CONTROLE DE ACESSO */

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

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

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


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

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

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

}
/* FIM CONTROLE DE ACESSO */


/*slidestrabalho*/

.cards {
    justify-content: center;
    display: flex;
    padding: 32px;
    background-color: #4a81c5;
}


.cards section.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 50px;
    max-height: 250px;
}

.cards .card {
  background-color: #4a81c5;
  border: 0;
}


.cards section.card:first-child {
    margin-left: 0;
}

.cards section.card .icon {
    width: 100px;
    height: 100px;
}

.cards section.card img {
    border-radius: 100%;
    width: 100%;
    
}

.cards section.card h3 {
    font-size: 100%;
    margin-top: 20px;
    color: rgb(255, 255, 255);
}

.cards section.card h2 {
    font-size: 100%;
    margin-bottom: 20px;
    color: rgb(255, 255, 255);
}






/*Projetos*/
.projetoss h3{
    margin-top: 70px;
    text-align: center;
    font-size: 46px;
    color: #3580db;
}
.projetoss p{
    margin-bottom: 50px;
    text-align: center;
}






  .containerproj {
    text-decoration: none;
    display: grid;
    place-items: center;
    

  }
  
  .containerproj .card__container {
    display: grid;
    row-gap: 3.5rem;
    
  }
  
  .containerproj .card__article {
    position: relative;
    overflow: hidden;


  }
  
  .containerproj  img {
    max-width: 328px;
    border-radius: 1.5rem;
    filter: grayscale(80%);
    transition: 0.7s;
    

  }

  .containerproj  img:hover{
    transition: 0.8s;
    filter: grayscale(0%);
    
  }
  


  
  
  .containerproj .card__data {
    width: 280px;
    background-color: #ffffff;
    padding: 1.5rem 2rem;
    box-shadow: 0 8px 24px hsla(0, 0%, 0%, .15);
    border-radius: 1rem;
    position: absolute;
    bottom: -9rem;
    left: 0;
    right: 0;
    margin-inline: auto;
    opacity: 0;
    transition: opacity 1s 1s;
    
  }
  
  .containerproj .card__description {
    display: block;
    margin-bottom: .65rem;
  }
  
  .containerproj .card__title {
    font-weight: 500;
    color: #2d2a30;
    margin-bottom: .75rem;
  }
  
  .containerproj  .card__button {
    text-decoration: none;
    background-color: #ffffff;
    color: #4f9cf9;
    padding: 8px 20px;
    border: 2px solid #4f9cf9;
    border-radius: 10px;    
    cursor: pointer;
    display: inline-block;
    margin-right: 10px;
    transition: 0.5s;
    font-weight: 500; 
  }

  .containerproj  .card__button:hover {
    background-color: #4f9cf9;
    color: #ffffff;
    transition: 0.7s;
  }

  .card__article:hover .card__data {
    animation: show-data 1s forwards;
    opacity: 1;
    transition: opacity .3s;
  }
  
  .card__article:hover {
    animation: remove-overflow 2s forwards;
  }
  
  .card__article:not(:hover) {
    animation: show-overflow 2s forwards;
  }
  
  .card__article:not(:hover) .card__data {
    animation: remove-data 1s forwards;
  }
  
  /* Animação */
  @keyframes show-data {
    50% {
      transform: translateY(-10rem);
    }
    100% {
      transform: translateY(-7rem);
    }
  }
  
  @keyframes remove-overflow {
    to {
      overflow: initial;
    }
  }
  
  @keyframes remove-data {
    0% {
      transform: translateY(-7rem);
    }
    50% {
      transform: translateY(-10rem);
    }
    100% {
      transform: translateY(.5rem);
    }
  }
  
  @keyframes show-overflow {
    0% {
      overflow: initial;
      pointer-events: none;
    }
    50% {
      overflow: hidden;
    }
  }
  
  /*=============== BREAKPOINTS ===============*/
  /* For small devices */
  @media screen and (max-width: 340px) {
    .containerproj {
      margin-inline: 1rem;
    }
  
    .card__data {
      width: 250px;
      padding: 1rem;
    }
  }
  
  /* For medium devices */
  @media screen and (min-width: 768px) {
    .card__container {
      grid-template-columns: repeat(2, 1fr);
      column-gap: 1.5rem;
    }
  }
  
  /* For large devices */
  @media screen and (min-width: 1120px) {
    .containerproj {
      height: 100%;
    }
  
    .card__container {
      grid-template-columns: repeat(3, 1fr);
    }
    .card__img {
      width: 348px;
    }
    .card__data {
      width: 316px;
      padding-inline: 2.5rem;
    }
  }


/*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: #434344;
    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*/
/*JANELA MODAL*/




/*FIM JANELA MODAL*/



/*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);
    }
    
}