/*Inicio da versão para celular*/

@media (max-width: 600px) {
  #btnMenuHamburguer {
    display: none;
  }

  nav {
    display: none;
    z-index: 900;
    flex-direction: column;
    position: fixed;
    padding: 5px;
    width: 250px;
    height: 100%;
    background-color: #000000;
    box-shadow: -5px 0px 60px black;
    transition: ease-in-out 0.2s;
    text-transform: uppercase;
    background-size: 250%;
    background-position: -10px 100px;
    background-repeat: no-repeat;
    background-blend-mode: color-burn;
    animation-name: transicao-suave;
    animation-timing-function: ease-in-out;
    animation-duration: 0.3s;
  }

  nav div {
    display: flex;
  }

  nav #divNavLinks {
    flex-direction: column;

    margin-top: 30px;
  }

  #divBtnVoltarHome {
    display: none;
  }

  nav #divNavLinks a,
  nav div a {
    flex-direction: column;

    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 4px;
    margin-bottom: 4px;
    cursor: pointer;
    color: white;

    font-size: 20px;
    text-decoration: none;
    font-family: AlongsansM;
    font-weight: 900;

    transition: 0.2s;
  }

  #divLinksDireita {
    display: flex;
    flex-direction: row;
  }

  .lang {
    display: none;
  }

  .langCel {
    width: 65px;
    height: 65px;
  }

  #languages {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  nav #imgLogoNav {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    height: 51px;
    width: 140px;
  }

  nav #btnFecharMenu {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;

    cursor: pointer;

    position: relative;
    left: 60px;
    margin-top: 10px;
    padding: 8px 14px 6px 14px;

    color: white;
    border: 1.5px solid white;
    border-radius: 6px;

    font-weight: 900;
    font-size: 25px;

    transition: 0.2s;
  }

  nav #btnFecharMenu:hover {
    background-color: #000000;
    color: #424242;
  }

  /**/

  header {
    position: unset;
    top: 0px;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;

    font-family: Poppins;
    text-transform: uppercase;
    font-weight: 900;

    transition: 0.5s ease-in-out;
  }

  header .link-header {
    display: none;
  }

  header #linkLogin,
  #linkCadastro {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;

    color: black;
    text-decoration: none;
    font-size: 15px;

    transition: 0.2s;
  }

  header #imgLogoNav {
    display: none;
  }

  header #imgLogoNav-mq {
    display: block;

    width: 35px;
    height: 35px;
    margin-left: 16px;
  }

  nav #divNavlinks {
    display: flex;
    flex-direction: column;
  }

  header #btnMenuHamburguer {
    -webkit-user-select: none;
    -webkit-user-drag: none;
    user-select: none;
    cursor: pointer;
    display: block;

    width: 35px;
    height: 35px;
    margin-left: 10px;
    margin-right: 6px;

    transition: ease-in-out 0.9s;
  }

  body {
    background-color: rgb(255, 255, 255);
    height: 100%;
    display: block;
    margin: 0;
    font-family: Gotham;
  }

  /*Links do header*/

  a {
    text-decoration: none;
  }

  /*Espaço do header*/
  header {
    z-index: 700;
    top: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    background-color: rgb(0, 0, 0);
    text-transform: lowercase;
    font-weight: 900;
  }

  .active {
    z-index: 700;
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    background-color: rgb(0, 0, 0);
    text-transform: lowercase;
    font-weight: 900;
    position: -webkit-sticky;
    position: fixed;
    top: 0;
  }

  /*3 partes do header centralizadas e em linhas*/
  header #divLinksHeader,
  #divLinkDireita,
  #divLogoEMenu {
    font-family: AlongsansM;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }

  /*Logo da pagina na esquerda*/
  header #logoBHUB {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    width: 140px;
    margin-left: 40px;
    margin-top: 8px;
    margin-bottom: 8px;
  }

  /*Partes do meio do header*/
  header .link-header {
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 25px;
    padding-right: 25px;
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 20px;
    transition: 0.2s;
  }

  /*Imagens da parte direita do header*/
  header #divLinksDireita img {
    height: 50px;
    margin-right: 40px;
  }

  /*Header acaba aqui*/

  /*Começa o body do site*/
  .Letreiro {
    background-color: black;
    padding-top: 10px;
    height: 800px;
    width: 100%;
  }

  span:before {
    content: "hub";
    color: white;
    animation: BHUB 10s infinite backwards;
  }

  .Letreiro h1 {
    color: white;
    margin-top: -500px;
    margin-left: 5%;
    font-size: 4.1rem;
    font-family: alongsans;
  }

  .solucoes {
    height: 450px;
  }

  .solucoes h3 {
    font-size: 2rem;
    color: rgb(0, 0, 0);
  }

  .linha1 {
    display: flex;
    background-color: #f9bc14;
    height: 775px;
    margin-top: -2px;
    text-align: center;
  }

  .linha2 {
    display: flex;
    background-color: #f9bc14;
    height: 1000px;
    text-align: center;
  }

  .tituloValues{
    font-size: 3.5rem;
    margin-left: 65px;
    font-family: AlongsansM;
  }

  #ourValues h2{
    font-size: 1.3rem;
    padding-left: 0%;
    padding-right: 0%;
    width: 95%;  
    margin-left: 10px;
    font-family: AlongsansM;
  }

  .imgValues{
    display: none;
  }

  .titulo {
    font-size: 3.5rem;
    position: absolute;
    margin-left: 20px;
    font-family: AlongsansM;
  }

  .titulo2 {
    font-size: 3.5rem;
    position: absolute;
    margin-left: 40px;
    font-family: AlongsansM;
    color: #fef0cd;
    margin-top: 18px;
  }

  .titulo3 {
    font-size: 3.5rem;
    position: absolute;
    margin-left: 85px;
    font-family: AlongsansM;
    color: #6c6c6c;
    margin-top: 18px;
  }

  .subtitulo {
    font-size: 3rem;
    position: absolute;
    margin-top: 600px;
    margin-left: 70px;
    font-family: AlongsansG;
  }

  .texto1 {
    display: flex;
    width: 95%;
    margin-left: 10px;
    margin-top: 650px;
    position: absolute;
  }

  .texto1 h3 {
    font-size: 1.3rem;
    font-weight: bolder;
    color: #201b39;
  }

  .bhub {
    display: flex;
  }

  .VIDBHUB {
    display: block;
    height: 350px;
    width: 350px;
    margin-top: 175px;
    margin-left: 30px;
  }

  .IMGBHUB {
    display: block;
    height: 350px;
    width: 350px;
    margin-top: 175px;
    margin-left: 30px;
  }

  /*Inicio das cases*/

  .titulo5 {
    color: #fef0cd;
    font-size: 3.5rem;
    position: absolute;
    font-family: AlongsansM;
    margin-left: 115px;
  }

  .cases {
    background-color: #59b069;
    color: #fef0cd;
    display: inline-block;
    width: 100%;
  }

  .casesR {
    display: none;
  }

  .case {
    padding-left: 5px;
  }

  #vid1 {
    display: flex;
    flex-direction: column;
    margin-top: 115px;
    padding-top: 0px;
    padding-bottom: 0px;
  }

  #vid1 video {
    width: 350px;
    padding-top: 55px;
    margin-left: 30px;
  }

  #vid1 h1 {
    font-size: 1.2rem;
    margin-left: 30px;
  }

  #vid {
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
    padding-top: 0px;
  }

  #vid video {
    width: 350px;
    padding-top: 55px;
    margin-left: 30px;
  }

  #vid h1 {
    font-size: 1.2rem;
    margin-left: 30px;
  }

  /*Fim das cases*/

  /*Inicio do quem somos*/

  .alinhar {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  .integrantes {
    margin-top: 118px;
    margin-left: 55px;
  }

  .integrantes h1 {
    text-align: center;
    color: #fef0cd;
    font-size: 1.5rem;
    font-family: alongsans;
  }

  .integrantes p {
    text-align: center;
    color: #fef0cd;
    font-size: 20px;
    margin-top: -10px;
  }

  .info {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    margin-top: -375px;
    margin-left: 10px;
    height: 40px;
    width: 40px;
  }

  .info2 {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    margin-top: -410px;
    margin-left: 10px;
    height: 40px;
    width: 40px;
  }

  .integrantes img {
    width: 300px;
    height: 300px;
  }

  .info img {
    height: 40px;
    width: 40px;
  }

  .info2 img {
    height: 40px;
    width: 40px;
  }

  .overlay {
    width: 300px;
    height: 300px;
    margin-top: -304px;
    z-index: -1; /* começa com a z-index 0 para que a imagem de fundo seja visível */
  }

  /* Imagens dos integrantes da BHUB*/

  #deborah, #heruza, #adriana, #jade, #rafael, #diego, #camila, #mahmed, #nayara, #nathalia, #sandra, #miguel, #felipe, #maria, #luiza, #gustavo{
    margin-left: 50px;
  }
  
  /* Fim das imagens dos integrantes da BHUB*/

  /* Inicio dos clientes da BHUB*/
  .Clientes {
    background-color: white;
    height: 2350px;
    display: block;
  }

  .linha_Clientes {
    display: none;
  }

  .linha_Clientes2 {
    display: none;
  }

  .linha_Clientes3 {
    display: none;
  }

  .linha_Clientes4 {
    display: none;
  }

  .linha_cel {
    padding-top: 20px;
    display: flex;
  }

  .linha_cel img {
    margin-top: 40px;
    width: 200px;
  }

  #clientes_cel {
    position: absolute;
    margin-top: 20px;
  }
  /* Fim dos clientes da BHUB*/

  /* Começo contato*/

  .contato {
    height: 1300px;
    width: auto;
    background-color: #2a2a28;
  }

  .titulo4 {
    color: #fef0cd;
    font-size: 3.5rem;
    position: absolute;
    margin-left: 100px;
    font-family: AlongsansM;
    margin-top: 18px;
  }

  .linha_contato {
    display: flex;
    flex-direction: row;
  }

  .endereco {
    position: absolute;
    color: #fef0cd;
    margin-top: 110px;
    margin-left: 80px;
    font-size: 1.1rem;
  }

  .fone {
    position: absolute;
    color: #fef0cd;
    margin-top: 170px;
    margin-left: 135px;
    font-size: 1.1rem;
  }

  .cidade {
    position: absolute;
    color: #fef0cd;
    margin-top: 140px;
    margin-left: 140px;
    font-size: 1.1rem;
  }

  #mapa {
    display: none;
  }

  .linha_contato h2 {
    color: #fef0cd;
    font-size: 1rem;
  }

  .inputs {
    display: flex;
    flex-direction: column;
    margin-top: 200px;
    margin-left: 15px;
  }

  .contato input,
  .contato textarea {
    width: 375px;
    height: 50px;
    margin-left: 0px;
    font-size: 1.2rem;
  }

  .inputs h2 {
    margin-left: 0px;
    font-size: 20px;
  }

  #mensagem {
    height: 250px;
  }

  .inputs button {
    width: 150px;
    margin-left: 20px;
    background-color: #2a2a28;
    border-color: #fef0cd;
    border-radius: 10px;
    margin-top: 30px;
    color: #fef0cd;
    font-size: 35px;
    cursor: pointer;
  }

  .inputs button p {
    margin-top: 0px;
    font-family: AlongsansG;
  }

  #response {
    color: white;
    font-size: 25px;
    height: 100px;
    margin-left: 50px;
    margin-top: 25px;
  }

  #envio {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-top: 40px;
    justify-content: center;
    align-items: center;
    margin-left: 0px;
  }

  /* Footer */

  #footer {
    background-color: #000000;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #footer img {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    width: 115px;
    margin-top: 15px;
  }

  #footer #termos {
    margin-top: 30px;
    text-align: center;
    color: white;
    font-size: 0.9rem;
  }

  #footer #politica {
    position: absolute;
    margin-top: 70px;
    color: white;
    font-size: 0.9rem;
  }

  #footer #footerLogos {
    display: none;
  }

  @keyframes transicao-suave {
    0% {
      opacity: -100%;
    }

    20% {
      opacity: -80%;
    }

    30% {
      opacity: -60%;
    }

    40% {
      opacity: -40%;
    }

    20% {
      opacity: -20%;
    }

    0% {
      opacity: 0%;
    }
  }
}