*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    
}
/* bordo #8b1c3cff*/


.whats{

    position: fixed;
    bottom: 10px;
    z-index: 5000;
    background-color: rgb(247, 201, 38);
    border-radius: 40px;
    -webkit-box-shadow: 0px 26px 16px -15px rgba(138,133,138,1);
    -moz-box-shadow: 0px 26px 16px -15px rgba(138,133,138,1);
    box-shadow: 0px 26px 16px -15px rgba(138,133,138,1);
    right: 7px;   
}

.whatsimg{

    width: 50px;
    height: 45px;
   
}

.search_tag{

    font-size: 4px;
    color:#e7e7e717;
}


/* efeito */

.efeito{
    
   
    border-radius: 15px;
    animation: efeito 5s infinite;
    -webkit-animation-delay: 2.2s;
      
}

.cham_x{

    display:flex; background-color: #006680ff; height: 600px;

}

@keyframes efeito {
    0% {
        background: linear-gradient(0.25turn, #ffffff00, #ffffff00,#ffffff00,#ffffff00);
       
        
    }
    88% {
        background: linear-gradient(0.25turn, #ffffff00, #ffffff00,#ffffff00,#ffffff00);
       
        
    }
    90% {
        background: linear-gradient(0.25turn, #ffffff3f, #ffffff0a,#ffffff0a,#ffffff0a);
      }

    92% {
        background: linear-gradient(0.25turn,  #ffffff0a,#ffffff3f, #ffffff0a,#ffffff0a);
    }
    97% {
        background: linear-gradient(0.25turn,  #ffffff0a,#ffffff0a,#ffffff3f,#ffffff0a);
    }
    100% {
        background: linear-gradient(0.25turn,  #ffffff0a,#ffffff0a,#ffffff0a,#ffffff3f);
    }
  }

  

.efeito_2{

    border-radius: 15px;
    animation: efeito2 5s infinite;
    cursor: pointer;
    
}

@keyframes efeito2 {
    0% {
        background: linear-gradient(0.25turn, #ffffff00, #ffffff00,#ffffff00,#ffffff00);

        -webkit-box-shadow: 0px 0 7px 8px rgba(255, 255, 255, 0);
        -moz-box-shadow: 0px 0 7px 8px rgb(255, 255, 255, 0);
        box-shadow: 0px 0 7px 8px rgb(255, 255, 255, 0);
       
        
    }
    35% {
        background: linear-gradient(0.25turn, #ffffff00, #ffffff00,#ffffff00,#ffffff00);

        -webkit-box-shadow: 0px 0 7px 8px rgba(255, 255, 255, 0.3);
        -moz-box-shadow: 0px 0 7px 8px rgb(255, 255, 255, 0.3);
        box-shadow: 0px 0 7px 8px rgb(255, 255, 255, 0.3);
       
        
    }

    55% {
        background: linear-gradient(0.25turn, #ffffff00, #ffffff00,#ffffff00,#ffffff00);

        -webkit-box-shadow: 0px 0 7px 8px rgba(255, 255, 255,0.6);
        -moz-box-shadow: 0px 0 7px 8px rgb(255, 255, 255, 0.6);
        box-shadow: 0px 0 7px 8px rgb(255, 255, 255, 0.6);
       
        
    }

    75% {
        background: linear-gradient(0.25turn, #ffffff00, #ffffff00,#ffffff00,#ffffff00);

        -webkit-box-shadow: 0px 0 7px 8px rgba(255, 255, 255, 0.3);
        -moz-box-shadow: 0px 0 7px 8px rgb(255, 255, 255, 0.3);
        box-shadow: 0px 0 7px 8px rgb(255, 255, 255, 0.3);
       
        
    }

    100% {
        background: linear-gradient(0.25turn, #ffffff00, #ffffff00,#ffffff00,#ffffff00);

        -webkit-box-shadow: 0px 0 7px 8px rgba(255, 255, 255, 0);
        -moz-box-shadow: 0px 0 7px 8px rgb(255, 255, 255, 0);
        box-shadow: 0px 0 7px 8px rgb(255, 255, 255, 0);
       
        
    }

   
  }


.animacao_1{
        
    animation: animay 2s;
}

@keyframes animay {
    0% {
      opacity: 0;
      transform: translateY(-100%);
    }
    
    100% {
        opacity: 100%;
        transform: translateY(0);
    }
}

.fade{
    opacity: 0;   
    -webkit-animation: animafade 2s;    
    -webkit-animation-iteration-count: 1 ;
    
    -webkit-animation-fill-mode: forwards;

}

@keyframes animafade {
    0% {
      opacity: 0;
     
    }
    
    100% {
        opacity: 100%;
       
    }
  }



.animacaoX_1{

    transform: translateX(+200%);
    -webkit-animation: animax 2s;   
    -webkit-animation-iteration-count: 1 ;    
    -webkit-animation-fill-mode: forwards;

}

@keyframes animax {
    0% {
      opacity: 0;
      transform: translateX(+100%);
    }
    
    100% {
        opacity: 100%;
        transform: translateX(0);
    }
}

.animacao_zoom{

    transform: scale(10.5);
    -webkit-animation: animax 1s;   
    -webkit-animation-iteration-count: 1 ;    
    -webkit-animation-fill-mode: forwards;

}

@keyframes animax {
    0% {
      opacity: 0;
      transform: scale(10.5);
    }
    
    100% {
        opacity: 100%;
        transform: scale(1);
    }
}


/* efeito fim */




.lbox{
    position: fixed;
    visibility: hidden;
    opacity: 0; 
    margin-left: 0;

}

.lbox:target{
    opacity: 1;
    visibility: visible;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color:rgba(10,10,10, .7);
    position: fixed;
    z-index: 70000;
    transition-duration: 1s;
   

}

.box_img{
    width: 70%;    
    height: 70%;
    top: 20px;
    position: absolute;
    margin-left: 15%;
    background-color:rgb(255, 255, 255, 0.8);
    font-size: 16px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    border-radius: 7px;
    padding: 0 30px;
    margin-top: 90px;

}

.b_img{
    
    width: 100%;  
    height: 90%;
    overflow: scroll;
    overflow-x: hidden;
   
}

.b_img::-webkit-scrollbar {
    width: 5px;
}

.b_img::-webkit-scrollbar-track {
    background:#ddc646;
    border-radius: 10px;
    width: 10px;

}

.b_img::-webkit-scrollbar-thumb {
    background-color: #474775;
    border-radius: 20px;
    border: 1px solid rgb(228, 168, 56);
  }

#politicas{

z-index: 5000;
}


.btnP{
color: rgb(77, 77, 77);
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
position:absolute;                                                                          
z-index: 3000;
}


#close{
width: 90%;
font-size: 12px;
color: rgb(41, 40, 40);
font-weight: 800 ;
text-align: right;


}

#close2{
    width: 70%;
    font-size: 12px;
    color: rgb(41, 40, 40);
    font-weight: 800 ;
    text-align: center;
    color: #fff;
    
    
    }

.b_img{
    
    width: 100%;  
    height: 90%;
    overflow: scroll;
    overflow-x: hidden;
}

/* politicas */

.box_img2{
    width: 70%;    
    height: 90%;
    margin-left: 15%;
    top: 20px;
    position: absolute;
    text-align: center;
    font-size: 16px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    border-radius: 7px;
    z-index: 5000;
    
    
    }

.box_img2 a, a:visited{

    color:#fff;
    
}


html{

    scroll-behavior: smooth;
}

.btn:target{
    scroll-margin-top: .8em;
}

.frase_destaque{

    font-size: 22px;
    font-family: "Poppins", serif;
    font-weight: 400;
    /*color:#006680ff;*/
    color:#fff;
}

.margin_bottom_1{
    
    margin-bottom: 60px;
}

.gradient{

    background-image: linear-gradient(to bottom, rgb(75, 74, 74),rgb(75, 74, 74), rgb(133, 133, 133),rgb(75, 74, 74), rgb(75, 74, 74));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;

}

#left_a {
    margin-left: 20px;
}

.archivo-black-regular {
    font-family: "Archivo Black", serif;
    font-weight: 400;
    font-style: normal;
  }

#margin_top{

    margin-top: 40px;
}

.btn_X{

    width: 250px;
    height: 60px;
    display: flex;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    font-family: "Prompt", sans-serif;
    background-color: #006680ff;
    border-radius: 10px;
    border: solid 2px #8b1c3cff;   
    margin: auto;
    color: #fff;
    box-shadow: 0 5px 5px #000000e0;
    align-items: center;
    z-index: 5000;

}

.btn_X img{
    width: 15px;
    height: auto;
}

.btn_X:hover{

    box-shadow: inset 0 5px 10px #000000e0;
    text-shadow: 0 0 0.9em #ffffffd8;
}




#btn_acao:active{

     box-shadow: 0  0 9px 13px #ffffff75;
   
}

.titulo_1{

    display: flex;
    width: 90%;
    margin-left: 5%;
    font-size: 30px;
    font-family: "Parkinsans", sans-serif;
    font-weight: 800;  
    color:#8b1c3cff;
    border-bottom: solid 3px #8b1c3cff;
}

.titulo_3{

    display: flex;
    width: 90%;
    height: 45px;
    margin-left: 5%;
    font-size: 30px;
    font-family: "Parkinsans", sans-serif;
    font-weight: 800;  
    color:#ffffff;
    border-bottom: solid 3px #fff;
}

.paleta{
    display: flex;
}

.paleta div{
    width: 20%;
    height: 70px;
}

.marcatexto {
	box-shadow: 5px 0 0 0 #ffffffe5, -5px 0 0 0 #ffffffe5; 
	background: #ffffffe5; 
    border-radius: 3px;
	
}

.marcatexto2{
	box-shadow: 5px 0 0 0  #ebcc6e, -5px 0 0 0  #ebcc6e;  
	background: #ebcc6e;  
	
}

.marcatexto3 {
	box-shadow: 5px 0 0 0 #e9e1ca, -5px 0 0 0 #e9e1ca; 
	background: #ffffff; 
	
}

.marcatexto4 {
	
	background: #8b1c3cff; 
	
}

.barra_sup{

    
    position: fixed;
    width: 100vw;
    color: #fff;    
    align-items: center;    
    box-shadow: -1px 5px 10px 0px rgba(0,0,0,0.76);
    background-color: rgba(0, 102, 128, 0.842);
    z-index:51000;
    padding: 15px 0;
    
}

   


.barra_sup .bs{

    display: flex;       
    width: 100%;
    align-items: center;
    justify-content: center;
    
 }

#logo{

  
    display: flex;
    justify-content: center;
    font-size: 24px;
    align-items: center;
    border: none;
    color:#ffffff;
    padding-right: 60px;
    font-family: "Poppins", serif;
    font-weight: 400;  
    font-style: bold;
    /*-webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #123946;*/
    text-shadow: 0 0 5px #000000d8;
   
    
}

#logo img{
    width: 35px; 
    height: 30px;
    margin-right: 12px;
    border: none;
    z-index: 1000;
   

}

.menu {
   
   
    display: flex;
    justify-content:end;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    align-items: center;
    font-size: 18px;
    text-shadow: 0 0 7px #080808;
    
    
}

.menu .btn:hover{
   border-bottom: solid 2px #ffffff;
   cursor: pointer;
   text-shadow: 0 0 0.9em #ffffffd8;
   border-radius: 15px;
}

.menu span{
    
    margin: 0 20px;
    color:#fff
}


.menu span img{
    width: 30px;
    cursor: pointer;
}

.menu span img:hover{
  
    transform: rotate(20deg);
}

.apresentacao{
    width: 100%;
    height: 700px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-image: url(../imagens/banner-principal-criaçãodesite-criaçãodesitesemsãopaulo-criaçãodesitesportoalegre-criaçãodesitesriodejaneiro-criaçãodesitesparaadvogados-agenciacriaçãodesites-empresadecriaçãodesites3.png);
    background-size: cover;    
    background-position-y: 0;
    padding-bottom: 60px;
    align-self: center;

}

.bloco_apres{

    display: flex;
    flex-wrap: wrap;
    width: 100%; 
    margin-top: 80px;
    justify-content: center;

}



.apresentacao h1{

    font-size: 70px;
    font-family: "Poppins", serif;
    font-weight: 400;  
    font-style: bold;
    color:#fff;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #ffffff;
   
    
}

.apresentacao h2{

    font-size: 28px;
    font-family: "Prompt", sans-serif;
    font-weight: 600;
    font-style: bold;
    color: #ddc646;
    /*text-shadow: -3px 3px 4px  #8b1c3cff;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color:  #ecd88dff;*/
    margin-top: 15px;

}

.apresentacao h3{

    font-size: 34px;
    font-family: "Poppins", serif;
    font-weight: 400;
    color:#ffffff;
   

}

.texto_apresentacao{

    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 70%;
    padding-top: 20px;
    margin-bottom: 20px;
    align-items: center;
    padding-left: 50px;
}

.img_perfil{

    display: flex;
    flex-direction: column;
    width: 20%;
    font-size: 10px;
    justify-content: center;
    border: none;
  
}

.div_img_perf{
   
    display: flex;
    align-items: end;
    width: 280px;
    height: 310px;
    text-align: center;
    background-image:  url(../imagens/criacao-de-site-rio-de-janeiro-rj-webdesignerx.png);
    background-size: 280px 280px;
    background-repeat: no-repeat;  
    background-position-x: center;
    /*
    box-shadow: 0 0 5px #070707;
    border-radius: 10px;*/
    color:#fff;
    margin-bottom: -10px;
    margin-top: 80px;
    justify-content: center;
    
}



.bloco_apres button{

    width: 250px;
    height: 60px;
    display: flex;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    font-family: "Prompt", sans-serif;
    
    border-radius: 10px;
    border: solid 1px #ffffff;    
    margin: auto;
    color: #fff;
    box-shadow: 0 5px 5px #000000e0;
    align-items: center;

}

.bloco_apres button:hover{

    box-shadow: inset 0 5px 10px #000000e0;
    text-shadow: 0 0 0.9em #ffffffd8;
    box-shadow: 0 0 7px 2px #ffffffe0;
}

.bloco_apres button img{

    width: 15px;
    height: 20px;
    border:none;
}

.barra{
    display: flex;
    width: 100%;
    height: 80px;
    background-image: url(../imagens/barra_branca.png);
    background-size: cover;
    margin-top: -30px;
}




.bloco_sobre{

    display: flex; 
    width: 90%;
    height: auto;
    flex-direction: column;
    margin-left: 5%;  
    margin-top: 40px;  
    border-radius: 20px;
    color: #686464;
    background-image: url(../imagens/back_ajuda2.png);
    background-size: 700px 550px;
    background-repeat: no-repeat;
    background-position-x: right;

}

.img_sobre{

    border-radius: 15px 15px 0 15px;
    float: left;
    margin: 20px;
    filter: opacity(75%);
   
}



.img_sobre img{
    
    width: 200px;
    height: auto;
  
}

.desc_sobre{
    display: flex;     
    padding-top: 20px;
    font-family: "Prompt", sans-serif;
    font-size: 18px;
    color: #8b1c3cff;
    
}

#desc_texto{

    margin-left: 10px;
   
}

.desc_sobre img{

    width: 500px;
    
}


.sucesso{

    display: flex; 
    width: 100%;   
    margin-top: 130px;
    padding-top: 30px ;
    background: linear-gradient(0.10turn, rgb(180, 165, 111), rgb(253, 215, 77), rgb(255, 255, 255), rgb(255, 255, 255), rgba(255, 255, 255, 0.815));
    align-items: center;
    visibility: visible;

}
.sucesso .texto{

    display: flex; 
    flex-direction: column;    
    width: 60%;
    margin-left: 15%;
    align-items: center;
    padding-right: 40px;
    font-size: 22px;
    font-family: "Poppins", serif;
    font-weight: 400;
    color:#727070;


}

.sucesso .texto p{
    margin-bottom: 15px;
    font-weight: 600;
}

.sucesso .imagem{

    display: flex; 
    justify-content: left;
    width: 10%;
    

}

.sucesso .imagem img{

    width: 250px;
    height: 350px;
    text-align: left;
    margin-top: -100px;
    
}

.sucesso_cel{

    width: 1px;
    height: 1px;
    visibility: hidden;
    position: absolute;
}

.servicos{

    display: flex;
    flex-wrap: wrap;  
    width: 100%; 
    height:  auto;     
    padding-bottom: 60px;
    margin-top: 120px;   
  
}


.backgroundfixo {
    background-image: url(../imagens/plano-de-fundo3.png);
   background-attachment: fixed;
  }

.servicos .titulo{

    font-family: "Prompt", sans-serif;
    font-size: 26px;
    width: 90%;
    margin-left: 5%;
    
}


.servicos h2{

    width: 100%;
    margin-bottom: 30px;
    color: #6d0b23e1;
    
}

   

.bloco_serv{

    display: flex;
    position: relative;
    flex-wrap: wrap;
    width: 90%;        
    margin-left: 5%;
    margin-top: 60px;
    margin-bottom: 90px;    
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    /*background-color: rgba(0, 102, 128, 0.13); */
    /*background: linear-gradient(87deg, rgba(214,240,248,0.7) 62%, rgba(255,255,255,0.7) 80%, rgba(255,255,255,0) 100%);*/
    padding-top: 20px;
    padding-left: 20px;
    padding-right:  20px;
    padding-bottom: 60px;    
    border-radius: 10px;
    /*box-shadow: 0 0 10px #070707;*/
    border-bottom: solid 2px #006680ff;
}

.bloco_serv h2{
   
    color: #006680ff;
}

.bloco_texto{

    width: 60%;
    display: flex;
    flex-direction: column;
    padding-left: 40px;
    color: #006680ff;
    
}

.bloco_texto2{

    width: 60%;
    display: flex;
    flex-direction: column;
    padding-left: 0;
    color: #006680ff;
    
}

.bloco_texto2 span{

    margin-right: 20px;

}

.bloco_texto button{

    margin-bottom: 40px;
}



.bloco_img_serv{

    display: flex;     
    justify-content: center;
    margin-right: 20px;
 
}

.bloco_img_serv img{

    width: 500px;
    height: 250px;
    border-radius: 20px 0 20px 0;
   

}

.bloco_serv span{

    margin-top: 20px;

    font-size: 20px;
}

.bloco_serv button{

    width: 300px;
    height: 60px;
    display: flex;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    font-family: "Prompt", sans-serif;
    background-color:  rgb(247, 201, 38); 
    border-radius: 10px;
    border: solid 1px #555151;    
    margin: auto;
    color: #006680ff;
    box-shadow: 0 5px 5px #000000e0;
    align-items: center;

}

.bloco_serv button:hover{

    box-shadow: inset 0 5px 10px #000000e0;
    text-shadow: 0 0 10px #fff;
  
   
}

.bloco_serv button img{

    width: 15px;
    transform: rotate(20);
}

.chamada{

    display: flex;
    flex-direction: column;  
    text-align: center;
    width: 100%;
    height: 650px;
    background-image: url(../imagens/criacao-de-site-para-minha-empresa-criacao-de-site-profissional-criacao-de-site-para-meu-negocio-criacao-de-site-para-empresa-venda-de-site-rj-criacao-de-site-rio-de-janeiro-criacao-de-site-rj-criacao-de-site-profissional-rj33.png);
    background-size: cover;
    z-index: 50000;
    padding-bottom: 90px;
    margin-top: -100px;

}

.chamada img{

    width:40%;
    height: auto;
    margin-top: 23px;
    filter:opacity(75%);

}

.texto-chamada{

    width: 60%;
    margin: 0 auto;
      margin-top: 0px;
    font-size: 32px;
    font-family: "Poppins", serif;
    font-weight: 400;
    color: #006680ff;
    text-align: justify;
    margin-top: -250px;
    filter:opacity(100%);
    
}

.galeria{

    display: flex;
    width: 100%;
    flex-wrap: wrap;
    padding-top: 30px;
    padding-bottom: 100px;
    background-color: #006680ff;
   
}



.bloco_galeria{

    display:flex;
    width: 90%;
    margin-left: 5%;
    margin-bottom: 60px;
    flex-wrap: wrap;
    justify-content:space-evenly;
   

}

.item_galeria{
    position: relative;
    display:flex;
    justify-items: center;
    flex-direction: column; 
    width: 27%;
    height: 370px;
    overflow-y: scroll;
    overflow: scroll;
    text-align: center;    

}

.item_galeria2{
    position: relative;
    display:flex;
    justify-items: center;
    flex-direction: column; 
    width: 27%;
    height: 240px;
    overflow-y: scroll;
    overflow: scroll;
    text-align: center;    

}




.item_galeria, .item_galeria2 a,a:visited{
    
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 18;
    font-style: bold;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
   
}

.item_galeria img{

    width: 350px;
    height: 500px;
    margin: 0 auto;
    border-radius: 4px;
    box-shadow: 0 0 8px 3px #242424cb;

}

#cartao{

    width: 350px;
    height: 200px;
    margin: 0 auto;
    border-radius: 4px;
    box-shadow: 0 0 8px 3px #242424cb;

}

.role{
    width: 80%;
    margin-left: 10%;
    position: absolute;
    justify-content: center;    
    text-align: center;
    margin-top: 330px;
    font-size: 10px;
    color:#070707be;
    background-color: #ffffffcc;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    z-index: 4000;

}

.role img{
    box-shadow: none;
}

.chamada_2 {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    height: 550px;
    margin-top: 90px;
    background-image: url(../imagens/plano-de-fundo3.png);

}

.borda_cham{

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 80%;
    padding: 50px;
    border: solid 1px #8b1c3cff;  
    border-radius: 50px 50px 0  50px ;
}


.texto-chamada_2{

    display: flex;
    width: 50%;    
    font-size: 26px;
    font-family: "Poppins", serif;
    font-weight: 600;
    color:#6d0b23d5;      
    margin-top: -40px;
    align-self: center;
    padding-right: 40px;
    
}

.chamada_2 img{

    width: 250px;
    height: auto;
    filter:drop-shadow(0 0 4px #8b1c3cff);
}

.chamada_2 .btn{

    width: 100%;
}

.explore{

    display: flex;
    justify-content: center;
    width: 100%;
    font-size: 26px;
    font-family: "Poppins", Serif;
    background-color:  #ecd88dff; 
    padding: 30px 0;

}


/* Perguntas frequentes */

#nav {margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; color: #222121;}
#nav li {list-style: none; background: #ffffff; width: 250 px; border-bottom: 1px solid #666; outline: none;}
#nav li a, #nav li label {display: block; padding: 8px; border-left: 4px solid #b9b8b8; text-decoration: none; box-shadow: 2px 2px 5px #ccc; color: #555; cursor: pointer;}
#nav li a:hover, #nav li label:hover {border-left:4px solid #069; background: #f0eeee;}
#nav li ul, #nav li input{display: none;}
#nav li ul li{background: #ffffff; padding: 10px;}
#nav li:hover ul li {color:ccc;}
#nav li:hover ul li a:hover{ border-left:4px solid #900;}
#nav li input:checked + ul{
   display: block; cursor:pointer;
}

/* Perguntas frequentes fim*/

.perguntas{
    
    display: flex;
    width: 80%;
    margin-left: 10%;
    flex-direction: column;
    margin-top: 100px ;
    margin-bottom: 100px;
    background-color: #006680ff;
    border-radius: 7px;
}

.perguntas .titulo{

    font-family:"Poppins", Serif;
    font-size: 26px;
    margin-bottom: 30px;
    color: #fff;
    margin-top: 7px;
    margin-left: 7px;
}

/* depoimentos */

.conteudo_galeria{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.conteudo_galeria .titulo{

    width: 80vw;
    background-color: #ecd88dff; 
    color: #222121;
    font-family: "Poppins", Serif;
    font-size: 26px;
    padding: 10px;

}



.slider{
   
    width: 80vw;
    height: 10vw;  
    overflow: hidden;
    margin-bottom: 10px;
    border: solid 1px #ecd88dff; 
    border-radius: 0 0 7px 7px;
}

.slides{
    width:400vw;
    height:10vw;
    display: flex;
   
   /* box-shadow: inset 10px -40px 90px 40px rgb(129, 128, 133);*/

}

.slides input {
    display: none;
}

.slide{

    display: flex;    
    width: 100vw;
    position: relative;
    transition: 2s; 
    align-self: center;
    padding-left: 8vw;
   
  
}

.slide label{

    width: 30%;    
    font-size: 14px;
    top:1vw;
    color:rgb(68, 67, 67);   
    font-family: Verdana, Geneva, Tahoma, sans-serif; 
    padding: 20px;
    border: solid 1px #858282;
    border-radius: 15px 15px 0 15px;
    margin: 2%;
  
}

.manual-navigation{
   
    width: 100vw;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2000;
    background-color: #f3cd0f;
}

.manual-btn{
    border: 2px solid #535252;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}

.manual-btn:not(:last-child){
    margin-right: 30px;
}

.manual-btn:hover{
    background-color: #fff;
}

#radio1:checked ~ .first{
    margin-left: 0;
}

#radio2:checked ~ .first{
    margin-left: -25%;
}

#radio3:checked ~ .first{
    margin-left: -50%;
}

#radio4:checked ~ .first{
    margin-left: -75%;
}


#radio5:checked ~ .firstb{
    margin-left: 0;
}

#radio6:checked ~ .firstb{
    margin-left: -25%;
}

#radio7:checked ~ .firstb{
    margin-left: -50%;
}

#radio8:checked ~ .firstb{
    margin-left: -75%;
}

#radio10:checked ~ .firstban{
    margin-left: 0;
}

#radio11:checked ~ .firstban{
    margin-left: -25%;
}

#radio12:checked ~ .firstban{
    margin-left: -50%;
}

#radio13:checked ~ .firstban{
    margin-left: -75%;
}


.navigation-auto div{
    border: 2px solid #20a6ff;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}

.navigation-auto{
    position: absolute;
    width: 80vw;    
    margin-top: 10vw;
    display: flex;
    justify-content: center;
}

.navigation-auto div:not(:last-child){
    margin-right: 30px;
}

.navigation-auto-b div{
    border: 2px solid #20a6ff;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}

.navigation-auto-b{
    position: absolute;
    width: 90vw;    
    margin-top: 22vw;
    display: flex;
    justify-content: center;
}

.navigation-auto-b div:not(:last-child){
    margin-right: 30px;
}


#radio1:checked ~ .navigation-auto .auto-btn1{
    background-color: #616060;    
}

#radio2:checked ~ .navigation-auto .auto-btn2{
    background-color: #616060;   
}

#radio3:checked ~ .navigation-auto .auto-btn3{
    background-color: #616060;   
}

#radio4:checked ~ .navigation-auto .auto-btn4{
    background-color: #616060;  
}

#radio5:checked ~ .navigation-auto-b .auto-btn5{
    background-color: #616060;   
}

#radio6:checked ~ .navigation-auto-b .auto-btn6{
    background-color: #616060;  
}

#radio7:checked ~ .navigation-auto-b .auto-btn7{
    background-color: #616060;   
}

#radio8:checked ~ .navigation-auto-b .auto-btn8{
    background-color: #616060;  
}

#radio10:checked ~ .navigation-auto_ban .auto-btn10{
    background-color: #616060;    
}

#radio11:checked ~ .navigation-auto_ban .auto-btn11{
    background-color: #616060;    
}

#radio12:checked ~ .navigation-auto_ban .auto-btn12{
    background-color:  #616060;      
}
#radio13:checked ~ .navigation-auto_ban .auto-btn13{
    background-color:  #616060;     
}


/* depoimentos */

.barra_2{
   
    position: absolute;
    width: 100%;
    height: 70px;
    background-image: url(../imagens/barra-melhor-webdesigner-rio-de-janeiro-anunciar-minha-empresa-na-internet-anunciar-meu-negocio-na-internet-anunciar-meu-trabalho-na-internet-anunciar-meu-servico-na-internet-anunciar-meu-produto-na-internet2.png);
    background-size: cover;
    margin-top: -390px;
    z-index:4000;
}

.chamada_3{

    width: 100%;
    height: 350px;    
    background-image: url(../imagens/-topo-melhor-webdesigner-rio-de-janeiro-anunciar-minha-empresa-na-internet-anunciar-meu-negocio-na-internet-anunciar-meu-trabalho-na-internet-anunciar-meu-servico-na-internet-anunciar-meu-produto-na-internet2.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    margin-top: 80px;
    z-index:-20000;

}

.chamada_3 .bgcolor{

    display: flex;   
    width: 100%;
    height: 350px;
    /*background-color: rgba(236, 215, 141, 0.884);*/
    background: linear-gradient(0.25turn, rgb(119, 109, 72), #ecd88dff, rgba(236, 215, 141, 0.815));
    align-items: center;
    justify-content: center;
  
}

.chamada_3 .texto{       
  
    display: flex;   
    font-size: 36px;
    font-family: "Poppins", serif;
    font-weight: 600;
    color:#006680ff;   
    margin-right: 30px;
    align-items: center;
    justify-content: center;
 
}

.rodape{

    width: 100%;   
    display: flex;
    flex-wrap: wrap;
    font-family: "Prompt", sans-serif;
    justify-content: center;
    background-image: url(../imagens/banner4.png);
    background-size: cover;
    background-position-y: 0;
    background-repeat: no-repeat;
    padding-top: 50px; 
    align-self: center;  
    color: #fff;

}

.rodape a, a:visited{

   
    color: #fff;
}

.logo_rod {

    width: 20%;
    text-align: center;
    font-size: 20px;
    align-items: center;
    border: none;
    color:#ffffff;
    font-family: "Poppins", serif;
    font-weight: 400;  
    font-style: bold;
}

.logo_rod img{

    width: 70px;
}

.atendimento{

    display: flex;
    flex-direction: column;
    width: 40%;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.rede_soc{

    display: flex;
    margin-bottom: 10px;
    cursor:pointer;

}

.rede_soc img{

    width: 30px;
    height: 30px;

}

.seguranca{

    width: 20%;
    font-size: 10px;
    text-align: center;
    align-items: center;
   
}

.seguranca img{

    width: 100px;
    border-radius: 10px 10px 0 10px;
}

.direitos{

    width: 100%;
    padding: 10px 0;
    text-align: center;
    background-color: #07070771;
    margin-top: 40px;
    font-size: 12px;

}


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


    .barra_sup{
   
        position: fixed;
        padding-top: 7px;
        padding-bottom: 0;
    }
    
    .barra_sup .bs{
        flex-direction: column;
    }
    
    .nome_logo{
        width: 100%;
        text-align: center;
      
    }

   #logo{

    width: 100%;   
    padding-right: 0;
    font-size: 22px;
    flex-direction: column;
    padding-top: 7px;
    padding-bottom: 7px;

   }

   #logo img{
    
    width: 30px;
    height: 25px;
   }

   .menu{

    width: 100%;       
    justify-content:center;   
    font-size: 14px; 
    margin-top: 0;
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
    padding: 7px 0;

   }

   .apresentacao{
    background-image: url(../imagens/banner-principal-criaçãodesite-criaçãodesitesemsãopaulo-criaçãodesitesportoalegre-criaçãodesitesriodejaneiro-criaçãodesitesparaadvogados-agenciacriaçãodesites-empresadecriaçãodesitescel2.png);
     background-size: cover;
   }

   .bloco_apres{

    margin-top: 100px;
   }

   .texto_apresentacao{

 
    width: 90%;
    padding-top: 80px;
    margin-bottom: 20px;
    align-items: center;
    padding-left: 4%;
    }


    .apresentacao h1{

        font-size: 32px;
        font-weight: 400;  
        font-style: normal;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: #ffffff;
        
        
    }

    .apresentacao h2{

        font-size: 18px;
        margin-top: 7px;

    }

    .apresentacao h3{

        font-size: 20px;
        margin-top: 7px;    

    }

    .img_perfil{

        display: flex;
        flex-direction: column;
        width: 100%;
        font-size: 10px;
        justify-content: center;
        border: none;
        align-items: center;       
        margin-top: 70px;
        
    }
    
    .div_img_perf{
       
      
        align-items:none;
        width: 230px;
        height: 260px;    
        background-size: 230px 230px;
        margin-top:30px;
        justify-content: center;
        border-radius: 0 0 15px 15px;   
        color: #222121;      
        
    }

    


    .bloco_apres button{

        width: 200px;
        height: 50px;
        margin-top: -320px;
       
    }

    .titulo_1{

        margin-top: 70px;
        font-size: 26px;
    }

    .titulo_3{
        
        font-size: 24px;
        height: 36px;
    }

    .bloco_sobre{
   
        margin-top: 7px;  
        border-radius: 20px;
        color: #686464;
        background-image: none;
        
    }
    
    .img_sobre{

        width: 100%;
        border-radius: 15px 15px 0 15px;
        float:none;
        margin: 0;
      
    }

    .frase_destaque{
        font-size: 22px;
    }

    .desc_sobre{

        display: flex;     
        padding-top: 20px;
        font-family: "Prompt", sans-serif;
        font-size: 18px;
        color: #8b1c3cff;
        
    }

    #desc_texto{

        margin-left: 0;
        background-image: url(../imagens/back_ajuda2.png);
        background-size: 700px 700px;
        background-position-x: -230px;
        background-position-y: 170px;
        background-repeat: no-repeat;
        background-position: fixed;
       
    }

    .desc_sobre img{

        width: 100%;
       
        height: auto;

    }

    .sucesso{
        width: 1px;
        height: 1px;      
        visibility: hidden;
        position: absolute;
    }

   


    .sucesso_cel{
        display: flex;
        width: 100%;
        height: 750px;
        flex-direction: column;
        margin-top: 130px;
        padding-top: 10px ;
        background: linear-gradient(0.02turn,rgba(255, 255, 255, 0.644), rgb(255, 255, 255), rgb(243, 220, 91), rgba(243, 220, 91, 0.644),rgb(255, 255, 255),rgb(255, 255, 255),rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgba(255, 255, 255, 0.815));
        align-items: center;
        visibility: visible;
        
        

    }
    .sucesso_cel .texto{

        display: flex; 
        flex-direction: column;    
        width: 90%;       
        margin-left: 5%;
        align-items: center;
        padding-right: 0;
        font-size: 22px;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-weight: 400;
        color:#006680ff; 


    }

    .sucesso_cel .texto p{
        margin-bottom: 15px;
        font-weight: 600;
    }

    .sucesso_cel .imagem{

        justify-content: center;
        width: 100%;
        text-align: center;
        

    }

    .sucesso_cel .imagem img{

        width: 250px;
        height: 350px;
        text-align: left;
        margin-top: 0;
        
    }

    .servicos{
           
        padding-bottom: 60px;
        margin-top: 850px;       
      
    }

    .bloco_img_serv {
        margin-right: 0;
    }

    .bloco_img_serv img{

        width: 100%;
        height: auto;
        border-radius: 10px 0 10px 0;  
    
    }

    .chamada {

        height: 550px;
    }

    .chamada .texto-chamada{

        width: 80%;        
        font-size: 18px;
        margin-top: 0;

    }

    .chamada img{

        width: 65%;
        border-radius: 50px 50px 0 0;
        

    }

    .bloco_serv{

        width: 90%;
        margin-bottom: 20px; 
    }

    .bloco_serv h2{

        font-size: 22px;
    }

    .bloco_texto{

        width: 100%;
        padding-left: 0;
    }

    .bloco_texto2{

        width: 100%;
        padding-left: 0;
    }

    #cel{

        margin-top: 30px;
    }

    #left_cel{

        margin-left: 0;

    }
    #left_a{

        width: 100%;        
        margin-left: 0;

    }

    .btn_X{

        width: 230px;
        height: 50px;
    }

    .bloco_serv button{

        width: 200px;
        height: 50px;

    }

    .galeria{
      
        padding-top: -300px;
        padding-bottom: 100px;

              
    }

    .margin_bottom_1{

        margin-bottom: 60px;
    }

    .cham_x{

        height: 480px;
        
    }

    .bloco_galeria{

        flex-direction: column;
        margin-left: 10%;
        margin-bottom: 40px;

    }

    .item_galeria{

        width: 90%;
        margin-left: 0;
        margin-bottom: 40px;
    }

    .item_galeria img{

        width: 100%;

    }

    .role{

        width: 100%;
        margin-left: 0;

    }



    .item_galeria2 {

        width: 90%;

    }

    .item_galeria2 #cartao{

        width: 100%;
        height: auto;

    }

    .borda_cham{

        width: 90%;
        padding: 10px;

    }

    .chamada_2{

        margin-top: 5px;
    }

    .texto-chamada_2{

        width: 90%;
        font-size: 18px;
        padding-left: 5%;
        padding-top: 50px;
        padding-right: 0;
        padding-bottom: 20px;
       
    }

    .chamada_2 img{

        width: 200px;
       
    }

    .perguntas{

        margin-top: 280px;
        
    }

    .perguntas .titulo{

      
        font-size: 22px;
    }
    

    .conteudo_galeria{

        width: 94%;
        margin-left: 3%;
    }

    .conteudo_galeria .titulo{

        width: 100%;

    }

    .slider{

        width: 100vw;
        height: 70vw;
    }

        
    .slides{
        width:400vw;
        height:60vw;
        display: flex;
       
       /* box-shadow: inset 10px -40px 90px 40px rgb(129, 128, 133);*/
    
    }

    .slide label{

        width: 50%;
        font-size: 14px;

    }

    .navigation-auto{

        width: 90vw;
        position: absolute;      
        margin-top: 70vw;

    }


.chamada_3{

    display: flex;
    justify-content: center;
    width: 100%;
    height: 350px;    
    background-image: url(../imagens/-topo-melhor-webdesigner-rio-de-janeiro-anunciar-minha-empresa-na-internet-anunciar-meu-negocio-na-internet-anunciar-meu-trabalho-na-internet-anunciar-meu-servico-na-internet-anunciar-meu-produto-na-internet2.png);
    background-repeat: no-repeat;
    background-size: 680px auto;    
    background-position-x: -240px;
    margin-top: 80px;
    z-index:-20000;
    
}

.chamada_3 .bgcolor{

    display: flex; 
    flex-direction: column;      
    height: 350px;
    /*background-color: rgba(236, 215, 141, 0.884);*/
    background: linear-gradient(0.25turn, rgb(119, 109, 72), #ecd88dff, rgba(236, 215, 141, 0.815)); 
    justify-content: center;
   
  
}

.chamada_3 .texto{       
  
    width: 80%;    
    font-size: 26px;
    padding: 0 25px;
    margin-bottom: 20px;
    margin-left: 10%;
 
}

.barra_2{
  
    margin-top: -60px;
    border: solid 2ps red;
 
}

.rodape{

    width: 100%;   
    display: flex;
    flex-wrap: wrap;
    font-family: "Prompt", sans-serif;
    justify-content: center;
    background-image: url(../imagens/banner4.png);
    background-size: cover;
    background-position-y: 0;
    background-repeat: no-repeat;
    padding-top: 50px; 
    align-self: center;  
    color: #fff;

}


.logo_rod {

    width: 100%;


}

.seguranca{
    
    width: 100%;
    margin-top: 20px;
}

.b_img {
    
    width: 90vw;  
   
    
   
}

.b_img img{
    
    width: 90vw;  
    height: auto;
    
   
}

.box_img{
    width: 94%;    
    height: 70%;
    top: 100px;
    position: absolute;
    margin-left: 3%;
    background-color:rgb(255, 255, 255, 0.8);
    font-size: 16px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    border-radius: 7px;
    padding: 5px;
    z-index: 57000;
    
    
    }

.box_img2{
    width: 90%;    
    height: 100vw;
    margin-left: 5%;
    top: 150px;
    position: absolute;
    text-align: center;
    font-size: 16px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    border-radius: 7px;
    z-index: 5000;
    
    
    }

    .lbox:target{
       
        margin-top: 0;

    }

}