---
# System prepended metadata

title: Warren | Web

---

# Warren | Web
**Author:** Matheus Rafael Morato Rocha
**Turma:** InfoC
**Número:** 40

[toc]


## Faixas

https://lp.warren.com.br/warren-educacao-in-company
## html
> index.html
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../comum/comum.css">
  <link rel="stylesheet" href="index.css">
  <link rel="stylesheet" href="index-responsivo.css">
  <link rel="stylesheet" href="font.css">
  <title>Educação</title>
</head>
<body>
<div class="ContainerTudo">
  <div class="faixa1">  
    <div class="f1-container1">
      <div class="f1-imagem"> <img src= "../../assets/images/warren-educacao-logo-white.png" /></div>
    </div>  
    <div class="f1-cotainer2">
      <div class="f1-texto"> <h2>Educação<br> Financeira para<br> seus colaboradores</h2></div>
      <div class="f1-botao"><button>AGENDE UMA CONVERSA </button> </div>
    </div>
  </div>
      <div class="faixa2">
          <div class="f2-container1">
            <div class="f2-texto">QUEM SOMOS</div>
            <div class="f2-texto2">
               <h2> Levamos educação financeira para os mais diversos momentos de vida do colaborador e da empresa</h2>
            </div>
          </div>    
          <div class="f2-container2">
            <div class="f2-frase1">
              <div class="f2-texto3">
                <p>Somos uma empresa do Mercado Financeiro com profissionais capacitados e certificados para trazer conteúdos para todos os momentos financeiros das pessoas.</p>
            </div> 
            <div class="f2-frase2"> 
              <div class="f2-texto3">
                <p>Além disso, nossa equipe conta com profissionais da área de educação, com uma didática fácil e empática, trazendo a leveza necessária para abordar esse assunto.</p>
              </div>
            </div> 
            <div class="f2-frase3">   
              <div class="f2-texto3">
                <p>Acreditamos que a educação e a construção de um ambiente seguro para nossas finanças pessoais é o melhor investimento para o seu colaborador e consequentemente para a empresa.</p>
              </div>
            </div>  
          </div>
      </div>  
    </div>

      <div class="faixa3">
        <div class="f3-container1">
          <div class="f3-texto">O QUE FAZEMOS</div>
          <div class="f3-texto2">Nossos serviços</div>
          <div class="f5-lista">
              <ul>
                <li class="text">Webinars Personalizados</li>
                <li class="text">Cursos Online para Plataformas Corporativas</li>
                <li class="text">Consultoria de Planejamento Financeiro</li>
                <li class="text">Programas de Educação Financeira</li>
                <li class="text">Campanhas Personalizadas (online e offline)</li>
              </ul> 
          </div> 
        </div>    
        <div class="f3-container2">      
          <div class="f3-imagem"><div class="f1-imagem">
           <img src= "../../assets/images/o-que-fazemos-secao-warren-educacao-in-company.webp" />
          </div>
        </div>    
      </div>
    </div>
    
    
    <div class="faixa4">
      <div class="f4-cabecalho">
        <div class="f4-container1">
          <div class="f4-text1">PARA QUEM</div>
          <div class="f4-textocontainer">
            <div class="f4-texto2"><font color="#f36">Empresas que já  compreenderam:</font><font color="#fffff">o bem-estar do colaborador é investimento</div>
          </div>  
        </div> 
        <div class="f4-container2">
          <div class="f4-texto4">
            Entendemos que problemas financeiros podem
            impactar profundamente na vida do colaborador.
          </div>
          <div class="f4-texto5">
              Afinal, isso é um grande motivo de estresse e
              ansiedade, coisas que não combinam com uma
              mente saudável, criativa e engajada.
          </div>
        </div>
      </div>
    </div>

        <div class="faixa5">
                <div class="f5-texto">
                  83% dos profissionais de RH afirmam que o estresse
                  financeiro prejudica o desempenho dos colaboradores.
                </div>
                <div class="f5-texto1">
                  Society for Human Resources Management
                </div>
        </div>

            <div class="faixa6">
              <div class="f6-container">
                <div class="f6-imagem1"> <div class="f6-texto">Organização <br>Financeira</div></div>
                <div class="f6-imagem2"> <div class="f6-texto">Planejamento <br>Financeiro</div></div>
              </div>  
              <div class="f6-container">
                <div class="f6-imagem3"> <div class="f6-texto">Investimentos</div></div>
                <div class="f6-imagem4"> <div class="f6-texto">Cenário <br>Macroeconômico</div></div>
              </div>  
            </div>

              <div class="faixa7">
                 <div class="f7-container1">
                     <div class="f7-texto">QUEM FAZ PARTE DESTE MOVIMENTO</div>
                     <div class="f7-texto2">
                       <h2>
                        <font color="#1c1b1f"> Mais de </font><font color="#f36">100 empresas<br> e 20 mil colaboradores </font><font color="#1c1b1f"> impactados</font>
                       <h2>

                     </div>
                 </div> 
                 <div class="imagens">
                  <div class="f7-container2">
                       <div class="f7-imagem1"><img src= "../../assets/images/logo-hospital-moinhos.webp"></div>
                       <div class="f7-imagem2"><img src= "../../assets/images/vivo_logo.webp"></div>
                       <div class="f7-imagem3"><img src= "../../assets/images/piccadilly-logo.webp"></div>
                       <div class="f7-imagem4"><img src= "../../assets/images/loreal-logo.webp"></div>
                  </div>
                  <div class="f7-container3">
                       <div class="f7-imagem5"><img src= "../../assets/images/MRV-logo.webp"></div>
                       <div class="f7-imagem6"><img src= "../../assets/images/leroy-merlin-logo.webp"></div>
                       <div class="f7-imagem7"><img src= "../../assets/images/sap-logo.webp"></div>
                  </div>


                 </div>   
              </div>

              <div class="faixa8">
                <div class="f8-botao"><button>AGENDE UMA CONVERSA</button></div>
                </div>
              </div>

              <div class="faixa9">
                <div class="f9-container1">
                   <div class="f9-texto">DEPOIMENTOS</div>
                    <div class="f9-texto1">O que dizem sobre nós</div>
                </div>
                <div class="f9-boxes">
                  <div class="f9-container2">
                    <div class="f9-box1">  
                      <div class="f9-coisas">
                        <div class="f9-imagem"><img src= "../../assets/images/quote-warren-educacao-in-company.webp"></div>
                        <div class="f9-frase">
                          O momento que tivemos com o Papo de
                          Grana foi essencial para entendermos a
                          importância de ter uma vida financia
                          controlada e que sim, é possível se 
                          divertir quando o assunto é finanças.
                        </div>
                        <div class="f9-pessoa">Stephany Lopes</div>
                        <div class="f9-logo"><img src= "../../assets/images/neogrid-logo.webp"></div>
                      </div>  
                    </div>
                  </div>
                  <div class="f9-container3">
                  <div class="f9-box1">  
                    <div class="f9-coisas1">
                      <div class="f9-imagem1"><img src= "../../assets/images/quote-warren-educacao-in-company.webp"></div>
                      <div class="f9-frase1">
                          Consegui ver a transparência e
                          integridade da empresa, eu não tinha
                          conhecimento nenhum na área de
                          investimento e muito menos onde
                          investir sem ter medo de levar a “ré” e
                          acabar perdendo tudo. Foi uma
                          palestra rápida, focada e ágil, não
                          ficaram enrolando ou até mesmo
                          forçando algo.
                      </div>
                      <div class="f9-pessoa1">Emily</div>
                      <div class="f9-logo1"><img src= "../../assets/images/asaas-logo.webp"></div>
                    </div>  
                  </div>
                  </div>
                  <div class="f9-container4">
                      <div class="f9-box1">  
                        <div class="f9-coisas2">
                          <div class="f9-imagem2"><img src= "../../assets/images/quote-warren-educacao-in-company.webp"></div>
                          <div class="f9-frase2">
                            O Papo de Grana levantou assuntos
                            antes considerados muito complicados e
                            muitas vezes restritos a uma pequena 
                            parcela da população, de uma forma
                            didática que traz conhecimento ao
                            alcance de todos e principalmente na
                            palma da mão.
                          </div>
                          <div class="f9-pessoa2">Cícero</div>
                          <div class="f9-logo2"><img src= "../../assets/images/conta-azul-logo.webp"></div>
                        </div>  
                      </div>
                  </div>
                </div> 
              </div>
                  <div class="faixa10">
                    <div class="f10-textos">
                      <div class="f10-texto1">QUEM SOMOS</div>
                      <div class="f10-texto2">Sobre a Warren</div>
                      <div class="f10-textos2">  
                        <div class="f10-texto3">
                        Somos uma plataforma completa de investimentos com sede em
                        Porto Alegre em outras 6 cidades. Temos mais de 100 mil clientes
                        e 250 colaboradores.
                        </div>
                        <div class="f10-texto4">
                          Na Warren você investe nos melhores produtos com eficiência,
                          simplicidade e transparência. Somos responsáveis por criar uma
                          experiência alinhada e transparente, que oferece realmente os
                          melhores produtos, com muita tecnologia, mas com
                          atendimento humano e competente.
                        </div>
                      </div>  
                    </div>
                      <div class="f10-imagem"><img src="../../assets/images/device_sobre-a-warren-educacao-in-company.webp"> </div>
                  </div>

                  
                  <div class="faixa11">
                      <div class="f11-parte1">
                          <div class="f11-titulo">Agende uma conversa</div>
                          <div class="f11-texto">Quer saber mais sobre o Warren Educação in Company e levar educação financeira para a sua empresa? Preencha o formulário abaixo para entrarmos em contato com você.</div>
                        </div>
                        <div class="f11-parte2">
                          <div class="f11-conteiner">
                            <div class="f11-nome">Nome*</div>
                            <input type="text" class="f11-nome1">
                          </div>
                          <div class="f11-meio">
                            <div class="f11-conteiner1">
                              <div class="f11-nome">E-mail*</div>
                              <input type="text" class="f11-nome4">
                            </div>
                            <div class="f11-conteiner2">
                              <div class="f11-nome">Telefone*</div>
                              <input type="text" class="f11-nome2">
                            </div>
                          </div>
                          <div class="f11-outros">
                            <div class="f11-conteiner3">
                              <div class="f11-nome">Cargo*</div>
                              <input type="text" class="f11-nome3">
                            </div>
                            <div class="f11-conteiner4">
                              <div class="f11-nome">Empresa*</div>
                              <input type="text" class="f11-nome3">
                            </div>
                            <div class="f11-conteiner5">
                              <div class="f11-nome">Quantidade de funcionários*</div>
                              <div class = "f11-selecione">
                                <select>
                                  <option value="0">Selecione</option>
                                  <option value="1">0 a 50</option>
                                  <option value="2">51 a 100</option>
                                  <option value="3">100 a 500</option>
                                  <option value="4">500 a 1000</option>
                                  <option value="5">1000 a 5000</option>
                                </select>
                  
                              </div>
                            </div>
                          </div>
                          <div class="f11-mensagem">
                            <div class="f11-d">Deixe sua mensagem</div>
                            <textarea class="f11-deixeaqui"></textarea>
                          </div>
                          <div class="f11-botao">
                            <button>Enviar</button>
                          </div>
                        </div>
                      </div>
                  </div>

                  <div class="faixa12">
                      <div class="f12-warren"><img src="../../assets/images/Wrn_logo-Header_LP.webp"> </div>
                      <div class="f12-zap">
                        <div class="f12-you"><img src="../../assets/images/icon-youtube.webp"></div>
                        <div class="f12-insta"><img src="../../assets/images/icon-facebook.webp"></div>
                        <div class="f12-face"><img src="../../assets/images/icon-instagram.webp"></div>
                        <div class="f12-twitter"><img src="../../assets/images/icon-twitter.webp"></div>
                      </div> 
                          <div class="f12-textos">
                              <div class="f12-texto1">
                                Tem alguma dúvida?<br>
                                Mande um email para<br>
                                meajuda@warrenbrasil.com.br<br>
                              </div>  
                              <div class="f12-texto4">CNPJ: 24.176.946/0001-71</div>
                          </div>     
                  </div>                      
                        
                      
                  </div>
                </div>






</body>
</html>
```

# css
> index.css

```css=
body {
  margin: 0px 0px 0px 0px;
}

@font-face {
  font-family: fonte1;
  src: url('../../assets/fonts/font2.woff2');
}

@font-face {
  font-family: fonte2;
  src: url('../../assets/fonts/font2.woff2');
}

@font-face {
  font-family: fonte3;
  src: url('../../assets/fonts/font3.woff2');
}

@font-face {
  font-family: fonte4;
  src: url('../../assets/fonts/font4.woff');
}

.faixa1 {
background-image: url("../../assets/images/hero-warren-educacao-in-company_desktop-min.png");
background-attachment:fixed;
background-size: cover;
height: 100vh;
}

.f1-texto {
font-family: fonte4;
color:white;
font-size: 30px;
}

.f1-botao button {
background-color:#EE2E5D;
color: white;
font-size: 16px;
font-family: fonte1;
padding:25px 40px;
border-radius: 100px;
border:none;

cursor: pointer;
text-transform: uppercase;
align-items: center;
}

.f1-imagem {
 margin-left: 30px; 
}
.f1-container1 {
margin-bottom: 15vh;
}
.f1-texto,.f1-botao {
margin-left: 23vh; 
}

.f1-imagem img {
  margin-top: 20px;
 }


@media (max-width: 1024px) {
  
  .faixa1 {
    background-image: url("../../assets/images/fx1-img-responsive.webp");
    background-attachment:fixed;
    background-size: cover;
    background-position: 1000px;
    height: 480px;
  }
  .f1-texto {
    font-family: fonte4;
    color:white;
    font-size: 15px;
  }

  .f1-botao, .f1-texto,.f1-imagem {
    margin: 4.3vh;
    margin-top: 0px;
  }

  .f1-imagem img {
   margin-top: 20px;
  }



}

.f2-texto2 {
font-family: fonte4;
font-size: 25px;
}

.f2-texto {
  font-family: fonte2;
  font-size: 18px; 
  color: #666666;
}

.faixa2 {
flex-direction: row;
display: flex;
justify-content: center;
margin-top: 100px;
margin-left: -90px;
margin-bottom: 70px;
}

.f2-container1 {
margin-right: 100px;
}

.f2-texto2 h2 { 
 height:240px;
 width: 371px;
 color: #171717;
 text-align: left;
 margin: 0px 0px 0px 0px;
}

.f2-texto3 {
font-size: 18px;
}
.f2-container2 {
margin-top: 40px;
height: 350px;
width: 500px;
}

@media (max-width: 1024px) {
  
  .faixa2 {
    flex-direction: column;
    display: flex;
    justify-content: center;
    margin: 0px 0px 0px 0px;
    text-align: justify;
    margin-left: 25px;
  }  

  .f2-texto {
    font-size: 18px;
    margin: 0px 0px 0px 0px;
    padding: 20px;
  }

  .f2-texto2 {
  font-size: 15px;
  margin: 0px 0px 0px 0px;
  }

  .f2-container2 {
  height: 350px;
  width: 250px;
  text-align: left;
  }

  .f2-texto2 h2 { 
  height:240px;
  width: 280px;
  color: #171717;
  text-align: left;
  margin: 0px 0px 0px 0px;
  }

  .f2-container1{
    margin-bottom: -130px;
  }
}

.faixa3 {
background-color: #f5f6fa;
flex-direction: row;
display: flex;
padding: 15vh;
}


.f3-texto {
color:#666666; 
font-size: 1.2em;
font-family: fonte1;
}

.f3-texto2 {
color: black;
font-size: 7.15vh;
font-family: fonte1;
}

.f3-imagem img {
width: 531px;
height:  auto;
}

.f3-container2{
margin-left: 14.64vw;
}

ul {
color:#666666;  
margin-left:-20px;
line-height: 40px;
}

li.text {
color:#2D2E33; 
}

@media (max-width: 1024px) {

    .faixa3 {
    justify-content: center;
    flex-direction: column;
    display: flex;
    padding: 0px 0px 0px 0px;
    margin-top: 150px;
    padding-top: 50px;
    }

    .f3-imagem img {
      height: 181.16px;
      width: 288px;
      display: flex;
      justify-content: center;
      margin: 0px;
    }

    ul {
    margin-left: 10px;
    }

    .f3-texto2 {
    font-size: 25px;
    margin-left: 35px;
    }

    .f3-texto {
    font-size: 15px;
    margin-left: 35px;
    }

    .f3-container2 {
    margin: 0px;
    }

}


.faixa4 {
background-color:#1c1b1f; 
justify-content: center;
flex-direction: row;
display: flex;
padding: 80px;
margin-left: -100px;
padding: 10rem;
}
.f4-cabecalho {
  flex-direction: row;
  display: flex;  
}
.f4-text1 {
color:#666666;
font-size: 18px;
font-family: fonte1;
}

.f4-texto2 {
color: #ee2e5d;
font-size: 40px;
font-family: fonte4;
height: 220px;
width: 540px;
line-height: 35px;
}


.f4-texto3 {
color: white;
font-size: 40px;
font-family: fonte4;
height: 247px;
width: 360px;
margin-top: -150px;
line-height: 41px;
}

.f4-texto4 {
  color: white; 
  height: 250px;
  width: 320px; 
  margin-top: 60px;
  font-size: 19px;
}

.f4-texto5 {
  color: white;
  height: 143px;
  width: 320px;
  margin-top: -160px;
  font-size: 19px;
}
.f4-container1 {
margin-right: 250px;
}
.f4-container1 {
  height: 233px;
  width: 390px;
}

@media (max-width: 1024px) {
  
  .faixa4 {
  justify-content: center;
  flex-direction: column;
  display: flex;
  margin: 0px;
  padding: 0px
  }

  .f4-text1 {
    height: 30px;
    width: 320px;
  }

  .f4-texto2 {
  font-size: 20px;
  line-height: 1em;
  height: 100px;
  width: 280px;
  }
 

  .f4-cabecalho {
  margin-left: 2em;  
  margin-top: 3em;
  margin-right: 3em;
  flex-direction: column;
  display: flex;  
  }
  .f4-texto4 {
   margin-right: -2em; 
   margin-top: -2em;
  }
}

.faixa5 {

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-color: #000000;
  background-image: url('../../assets/images/quote_warren_educacao_company.webp');
  background-repeat: no-repeat;
  background-position: 38% 30%;
  background-size: 5%;
  color: #fff;

  padding: 7em;
}

.f5-texto1 {
color: white; 
margin-top: 60px; 
}

.f5-texto {
font-size: 20px;
line-height: 20px;
height: 40px;
width: 360px;
color: white; 
text-align: center;
}

@media (max-width: 1024px) {

  .f5-texto {
    height: 60px;
    width: 290px;
  }

  .f5-texto1 {
    margin-top: 50px;
    height: 60px;
    width: 290px;

  }

  .faixa5 {
  background-color: #000000;
  background-image: url('../../assets/images/quote_warren_educacao_company.webp');
  background-repeat: no-repeat;
  background-position: 20% 30%;
  background-size: 15%;
  }

}

.faixa6 {
  background-image: url("../../assets/images/background-palestra-warren-educacao-incompany.png");
  background-attachment:fixed;
  background-size: cover;
  background-size: 100%;
  background-color: black;


  flex-direction: column;
  justify-content: center;
  display: flex;
  align-items: center;

  padding: 7em;
}

.f6-texto {
  text-align: left;
  margin: 10% 0% 10% 20%;
}


.f6-imagem1 {
  background-image: url("../../assets/images/educacao-financeira 1.png");
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: -18% 0%;

  height: 150px;
  width: 340px;
}

.f6-imagem2 {
  background-image: url("../../assets/images/planejamento-financeiro 1.png");

  background-size: 50%;
  background-repeat: no-repeat;
  background-position: -18% 0%;

  height: 150px;
  width: 340px;
}

.f6-imagem3 {
  background-image: url("../../assets/images/investimento 1.png");

  background-size: 50%;
  background-repeat: no-repeat;
  background-position: -18% 0%;

  height: 150px;
  width: 340px;
}

.f6-imagem4 {
  background-image: url("../../assets/images/cenario-macroeconomico 1.png");
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: -18% 0%;

  height: 150px;
  width: 340px;
}

.f6-texto {
display: flex;
flex-direction: row;
color: #fff;

font: 1.7rem fonte4;
line-height: 1.7rem;
}

.f6-container {
  justify-content: center;
  display: flex;
  flex-direction: row;
}

@media (max-width: 1024px) {

  .f6-texto {
    display: flex;
    flex-direction: column;
    }
    
    .f6-container {
      justify-content: center;
      display: flex;
      flex-direction: column;
    }

    .f6-imagem1,.f6-imagem2,.f6-imagem3,.f6-imagem4 {
      height: 100px;
      width: 260px;
      margin-top: 50px;
    }

    .f6-texto {
    display: flex;
    flex-direction: row;
    color: #fff;

    font: 1.7rem fonte4;
    line-height: 1.7rem;
    }


}
.f7-imagem1 img {
height: 70.8px;
width: 176px;
}

.f7-imagem2 img{
height: 40.05px;
width: 103px;
}

.f7-imagem3 img{
  height: 14.18px;
  width: 147px;
}  


.f7-imagem4 img{
  height:19.57px;
  width: 103px;
}  

.f7-imagem5 img {
  height:33.02px;
  width: 114px;
}  

.f7-imagem6 img {
  height:61.95px;
  width: 103px;
}  

.f7-imagem7 img {
  height:auto;
  width: 103px;
}  

.faixa1{
background-color: #f5f6fa;
}
.f7-container2,.f7-container3  {
 flex-direction: row;
 display: flex;
align-items: center;
justify-content: center;
}

.f7-imagem1,.f7-imagem2,.f7-imagem3,.f7-imagem4,.f7-imagem5,.f7-imagem6,.f7-imagem7 img {
  margin: 2.5rem;
} 

.f7-container2 {
 margin-top: 6.25rem; 
}

.f7-texto {
font-size: 1rem;
font-family: fonte1;
}

.f7-container1 {
  align-items: center; 
  justify-content: center;
  display: flex;
  flex-direction: column;
  margin-top: 8rem;
}


.f7-texto {
margin-top: 2rem;
color: #666666;
margin-bottom: -2rem;
margin-right: 55.9rem;
}


.f7-texto2 h2 {
font-size: 2.5rem;
font-family: fonte1;
height: 180px;
width: 800px;
margin-bottom: -10rem;
margin-right: 9em;
}

.f7-container3 {
margin-bottom: 5rem;
}


@media (max-width: 1024px) {

  .f7-texto {
    margin-bottom: 5rem;
    margin-right: 0rem;
    margin-top: -6rem;
  }

  .f7-texto2 h2 {
  height: 180px;
  width: 250px;
  font-size: 1.5rem;
  margin-bottom: -15rem;
  margin-top: -5rem;
  margin-right: 0em;
  justify-content: center;
  }

  .f7-imagem1,.f7-imagem2,.f7-imagem3,.f7-imagem4,.f7-imagem5,.f7-imagem6,.f7-imagem7 img {
    margin: 2rem;
  } 

  .f7-container2,.f7-container3 {
   flex-direction: column;
   display: flex; 
  }
}  


.faixa8 {
background-color: #1c1b1f;
padding-top: 3.25rem;
padding-bottom: 3.25rem; 
}


.f8-botao button {
  background-color:#EE2E5D;
  color: white;
  font-size: 16px;
  font-family: fonte1;
  padding:25px 40px;
  border-radius: 100px;
  border:none;

  cursor: pointer;
  text-transform: uppercase;
  align-items: center;
}

.f8-botao  {
  display: flex;
  align-items: center;
  justify-content: center;
}


@media (max-width: 1024px) {

  .f8-botao button {
  margin: 0px;  
  }
}


.f9-container1 {
margin-left: 8.1rem;
}

.f9-logo img {
  width: 80px;
  height: auto;
}

.f9-texto {
color: #666666;
font-family: fonte4;
font-size: 1.0rem;
margin-top: 7rem;
}

.f9-texto1 {
  color: black;
  font-family: fonte2;
  font-size: 2.5rem;
  margin-bottom: 4rem;
}

.f9-box1{
 background-color:  #f5f6fa;
 height: 322px;
 width: 272px;
 padding: 2rem;
 margin-top: 2rem;
 border-radius: 0.5rem;
}

.f9-frase {
color: #2e2d33;
height: 320px;
width: 272px;
font-size: 1rem;
margin-top: 1rem;
}

.f9-pessoa {
  color: black;
  font-family: fonte2;
  font-size: 1rem;
  margin-top: -12rem;
}

.f9-imagem {
 margin-top: 1rem; 
}

.f9-coisas {
 margin-left: 1rem; 
}

.f9-boxes {
 flex-direction: row;
 display: flex;
}

.f9-logo img {
  width: 80px;
  height: auto;
  margin-top: 1rem;
}

.f9-texto {
color: #666666;
font-family: fonte4;
font-size: 1.0rem;
margin-top: 7rem;
}




.f9-texto1 {
  color: black;
  font-family: fonte2;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.f9-box1{
 background-color:  #f5f6fa;
 height: 322px;
 width: 272px;
 padding: 2,5rem 2.5rem 0rem 2.5rem ;
 margin-left: 2rem;
 margin-top: 2rem;
 border-radius: 0.5rem;
}

.f9-frase1 {
color: #2e2d33;
height: 320px;
width: 272px;
font-size: 1rem;
margin-top: 1rem;
}

.f9-pessoa1 {
  color: black;
  font-family: fonte2;
  font-size: 1rem;
  margin-top: -10rem;
}

.f9-imagem1 {
 margin-top: 1rem; 
}

.f9-coisas1 {
 margin-left: 1rem; 
}

.f9-boxes1 {
 flex-direction: row;
 display: flex 
}

.f9-logo1 img {
  width: 70px;
  height:auto;
  margin-top: 1.5rem;
}



.f9-texto2 {
  color: black;
  font-family: fonte2;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}


.f9-frase2 {
color: #2e2d33;
height: 190px;
width: 225px;
font-size: 1rem;
margin-top: 1rem;
}

.f9-pessoa2 {
  color: black;
  font-family: fonte2;
  font-size: 1rem;
  margin-bottom: -10rem;
  margin-top: -2rem;
}

.f9-imagem2 {
 margin-top: 1rem; 
}

.f9-coisas2 {
 margin-left: 1rem; 
}

.f9-boxes2 {
 flex-direction: row;
 display: flex;
}

.f9-logo2 img {
  width: 70px;
  height:auto;
  margin-top: 10rem; 
}

.f9-boxes {
justify-content: center;
align-items: center;
display: flex;
}

@media (max-width: 1024px) {

  .f9-boxes {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    }

  .f9-texto1 {
  color: black;
  font-family: fonte2;
  font-size: 2rem;
  margin-bottom: 4rem;
  }

.f9-container1 {
  margin-left: 1rem;
  margin-bottom: -1rem;
  }
  .f9-box1 {
   margin-left: 0rem; 
  }

}

.faixa10 {
 background-color: #ee2e5d;
 flex-direction: row;
 display: flex; 
 justify-content: space-evenly;
}

.f10-texto1 {
  font-family: fonte2;
  font-size: 1.2rem;
}
.f10-texto2 {
  font-family: fonte2;
  font-size: 3rem;
}

.f10-imagem img {
height: auto;
width: 383px;
}

.f10-textos {
 flex-direction: column;
 display: flex; 
 margin-right: 10rem;
}

.f10-textos2 {
  height: 450px;
  width: 510px;
  margin-top: 3rem;
}

.f10-texto4 {
margin-top: 1rem;
font-size: 1.2rem;
height: 180px;
width: 495px;
font-family: fonte3;
}

.f10-texto3 {
font-size: 1.2rem;
font-family: fonte3;
}

.faixa9 {
margin-bottom: 5rem;
}

.faixa10 {
 padding: 9rem 0rem 9rem 9rem;
 padding-bottom: 0px;
 margin-bottom: 9rem; 
}
.f10-imagem {
 margin-right: 10rem; 
}

@media (max-width: 1024px) {

  .faixa10 {
    flex-direction: column;
    display: flex;
    justify-content: center;
    padding: 0px;
    align-items: center;
  }
  .f10-textos {
  margin-right: 0rem;
  }
  .f10-texto1 {
    font-size: 0.8rem;
  }

  .f10-imagem  img{
    height: auto;
    width: 288px;
    margin-top: 8rem;
    margin-left: 10rem;
  }


  .f10-texto1 {
  font-family: fonte2;
  font-size: 1.2rem;
  margin-top: 2rem;
  }
  .f10-texto2 {
  font-family: fonte2;
  font-size: 2rem;
  }

  .f10-texto3 {
  font-size: 1rem;
  }

  .f10-texto4 {
    font-size: 1rem;
    height: 180px;
    width: 280px;

  }
  .f10-texto3 {
    height: 80px;
    width: 280px;
    margin: 0px;
  }

  .f10-textos2 {
    height: 230;
    width: 320;
    margin-top: 3rem;
  }
}


.faixa11 {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.f11-titulo {
font-size: 3rem;
font-family: fonte2;
color: black;
margin-top: -1em;
}

.f11-texto {
  color: black;
  height: 80px;
  width: 650px;
  text-align: center;
  margin-top: 2em;

  line-height: 1.7rem;
}

.f11-nome {
color: black;
}

.f11-parte1 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

input, select, textarea {
  border: none;
  background-color: #F5F6FA;
  padding: 12px 15px;
  resize: none;
}

.f11-conteiner input {
height:auto;
width: 50.5em;
}

.f11-conteiner1 input{
  height:auto;
  width:320px;
}

.f11-conteiner2 input {
  height:auto;
  width:320px;
}

.f11-conteiner2 {
  margin-left: 2rem;
}

.f11-meio {
  display: flex;
  flex-direction: row;
}

.f11-outros {
  display: flex;
  flex-direction: row;
}

.f11-conteiner3 input {
  height:auto;
  width:208px;
}

.f11-conteiner4 input {
  height:auto;
  width:208px;
}

.f11-conteiner5 select {
  height:auto;
  width:208px;
}

.f11-conteiner5,.f11-conteiner4 {
  margin-left: 1.5rem;
}

textarea {
  width: 50.5em;
  height: 8em;
}


.f11-botao button:hover {
  transition-delay: 0.5s;
  background-color: #f33c69;
}
.f11-botao button {
border: none;
border-radius: 10em;
background-color: #ee2e5d;
color: white;
font-size: 16px;
font-family: fonte1;

cursor: pointer;
text-transform: uppercase;
align-items: center;

padding: 1.5em 3em;
}

.f11-botao {
margin-top: 1em;
justify-content: center;
align-items: center;
align-content: center;
display: flex;
padding-bottom: 5em;
}

@media (max-width: 1024px) {

  .f11-titulo {
    font-size: 1.5rem;
    margin-top: -2em;
   }

   .f11-texto {
    color: black;
    height: 168px;
    width: 248px;
   }

   .f11-conteiner input {
    height:auto;
    width: 20em;
    margin: 0rem;
    }

    .f11-conteiner1 input{
    height:auto;
    width: 20em;
    margin: 0rem;
    }

    .f11-conteiner2 input {
      height:auto;
      width: 20em;
      margin: 0rem;
    }

    .f11-conteiner3 input {
      height:auto;
      width: 20em;
      margin: 0rem;
    }

    .f11-conteiner4 input {
      height:auto;
      width: 20em;
      margin: 0rem;
    }

    .f11-selecione select {
      height:auto;
      width: 20em;
      margin: 0rem;
    }    

    .f11-meio {
      display: flex;
      flex-direction: column;
    }
    
    .f11-outros {
      display: flex;
      flex-direction: column;
    }

    .f11-conteiner2 {
      margin: 0rem;
    }

    .f11-conteiner5,.f11-conteiner4 {
      margin-left: 0em;
    }

    .faixa11 {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }

  textarea {
    width: 20em;
    height: 8em;
  }
}


.faixa12 {
 background-color: #2e2d33; 
 align-items: center;
 display: flex;
 justify-content: space-evenly;
 padding: 3rem;
}

.f12-zap {
flex-direction: row;
display: flex;

cursor: pointer;
text-transform: uppercase;
align-items: center;
}
.f12-warren {
  cursor: pointer;
  text-transform: uppercase;
  align-items: center;
}

.f12-textos {
text-align: center;
}

.f12-texto1 {
 line-height: 1.2rem;
}

.f12-texto4 {
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

.f12-you,.f12-insta,.f12-face {
margin-right: 0.5em;
}


@media (max-width: 1024px) { 
  
    .faixa12 {
    flex-direction: column;
    display: flex;
    }
    .f12-textos {
      margin-bottom: 2rem;
      margin-top: 2rem;
    }
    .f12-zap  {
      margin-top: 2rem;
    }
    html {
      margin-right: -4rem;
    }



  
}




```