body { background-color: white; margin: 0; padding: 0; font-family: Montserrat; }

#myVideo { position: relative; max-width: 100%; width: 99vw; height: 70vh; object-fit: cover; }
#myBtn { width: 200px; font-size: 18px; padding: 10px; border: none; background: #000; color: #fff; cursor: pointer; }

.cabeca      { width: 100%; height: 70vh; background-color: black; background-repeat: no-repeat; background-size: cover; background-position: 0px -140px; background-attachment: fixed; background-image: url('../imgs/k_cafe2.jpg'); }

.logo        { position: absolute; right: 30px; top: 50px;  width: 22%; }
.comunicacao { position: absolute; bottom: 38%; font-weight: 900; color: white; font-size: 3.5vw; margin-left: 20px; }
.b_video     { position: absolute; bottom: 34%; font-weight: 300; color: white; font-size: 1.3vh; margin-left: 20px; }
/*.video_b     { transform: rotate(30deg); margin-bottom: -5px; width: 8%; }
.scroll      { position: absolute; bottom: 34%; left: 50%; font-weight: 300; color: #d4145a; color: white; font-size: 1.3vh; margin-left: 20px; }
.scroll_b    { margin-bottom: -3px; width: 12%; }*/

.r_instagram { position: absolute; right: 30px; bottom: 46%; }
.r_facebook  { position: absolute; right: 30px; bottom: 40%; }
.r_youtube   { position: absolute; right: 30px; bottom: 34%; }

@media screen and (max-width: 1024px) { 
  video      { display: none; }
  .b_video   { display: none; }
}

@media screen and (max-width: 896px) { 
  .cabeca      { background-image: url('../imgs/k_cafe1.jpg'); }
}
@media screen and (max-height: 414px) {
  .video       { font-size: 1.5vw; }
  .r_instagram { bottom: 54%; width: 3.5%; }
  .r_facebook  { bottom: 45%; width: 3.5%; }
  .r_youtube   { bottom: 36%; width: 3.5%; }
}
@media screen and (max-width: 414px) { 
  .cabeca      { height: 43vh; background-size: 100%; background-position: 0px 0px; }
  .logo        { right: -10px; top: 40px;  width: 40%; }
  .comunicacao { bottom: 58%; font-size: 6vw; }
  .video       { bottom: 52%; font-size: 1.6vh; }
  .video_b     {  }
  .r_instagram { right: 30px; width: 8%; bottom: 66%; }
  .r_facebook  { right: 30px; width: 8%; bottom: 59%; }
  .r_youtube   { right: 30px; width: 8%; bottom: 52.5%; }
}

.proposito1  { float: left; width: 55%; background-color: #fff; color: black; margin: 0 auto; }
.proposito2  { float: left; width: 45%; background-color: #fff; color: black; margin: 0 auto; }
.proposito3  { display: none; }

.margem            { margin: 0 60px 0 0; }
.margemLeft        { margin: 0 0 0 15px; }

.proposito2_pre    { font-weight: 300; font-size: 0.8em; margin-left: 20px; }
.proposito2_titulo { font-weight: 900; color: #0071bc; font-size: 3em; margin-left: 20px; }
.proposito2_texto  { font-weight: 300; font-size: 1em; line-height: 2em; margin-left: 20px; }
.proposito2_saiba  { margin-left: 20px; height: 50px }

@media screen and (max-width: 896px) { 
  .proposito1        { display: none; }
  .proposito2        { width: 100%; }
  .proposito3        { display: block; width: 100%; /*background-color: gray;*/ }
  .proposito2_pre    { font-size: 0.8em; margin: 10px 0 0 20px; }
  .proposito2_titulo { font-size: 3.0em; margin: 10px 0 0 20px; }
  .proposito2_texto  { font-size: 1.0em; margin: 10px 0 0 20px; }
  .proposito2_saiba  { height: 50px      margin: 10px 0 0 20px; }
}

@media screen and (max-width: 414px) { 
  .proposito2_pre    { font-size: 0.8em; margin-top: 0px; margin-left: 20px; }
  .proposito2_titulo { font-size: 3.0em; margin: 10px 0 0 20px; }
  .proposito2_texto  { font-size: 1.0em; margin: 10px 0 0 20px; }
  .proposito2_saiba  { height: 50px;     margin: 0 0 40px 20px; }
}


.fazemos1          { float: left; width: 45%; background-color: #fff; color: black; }
.fazemos2          { float: left; width: 55%; background-color: #fff; color: black; text-align: right; }
.fazemos3          { display: none; }
.b_fazemos         { height: 55px; margin: 6px; }

.fez               { border: 0px solid black; padding: 20px; max-width: 26%; width: 26%; text-align: center; float: left; }
.isvg              { width: 50px; height: 45px; }

.fazemos1_pre    { font-weight: 300; font-size: 0.8em; margin-left: 20px; }
.fazemos1_titulo { font-weight: 900; color: #0071bc; font-size: 2.5em; margin-left: 20px; }

@media screen and (max-width: 896px) { 
  .fazemos1        { width: 100%; }
  .fazemos2        { display: none; }
  .fazemos3        { display: block; width: 100%; }
  .fazemos1_pre    { font-size: 0.8em; margin: 10px 0 0 20px; }
  .fazemos1_titulo { font-size: 2.5em; margin: 20px; }
}
@media screen and (max-width: 414px) { 
  .fazemos1_pre    { font-size: 0.8em; margin-top: 0px; margin-left: 20px; }
  .fazemos1_titulo { font-size: 3.0em; margin: 20px; }
  .fazemos3        { display: block; width: 100%; }
  .fez             { border: 0px solid black; padding: 20px; max-width: 36%; width: 36%; text-align: center; float: left; }
}

.ultimos { font-weight: 900; color: #0071bc; font-size: 3em; margin-left: 20px; }

    div.wrapper { 
         max-width: 100%;
         border: 0px solid black;
         background-color: #fff;
         margin: 0 60px 0 60px;
      }
    div.masonry {
         column-count: 3;
         -webkit-column-count: 3;
         -moz-column-count: 3;
         /* column-gap: 0.5; 
         -webkit-column-gap:0.5;
         -moz-column-gap: 0.5; */
          max-width: 100%; /*total width of 3 columns combined*/
      }
    div.projetos { /* Masonry bricks or child elements */
        display: inline-block; /*needed to align tiles correctly*/
        width:100%; 
        height: 500px;  
        margin: 10px; /*white space around image */
        /*border: solid 1px #ccc;*/
        padding: 20px 0 20px 0;
      }
    @media screen and (max-width: 1024px) {
      div.wrapper { margin: 0 30px 0 30px; }
      div.masonry {
           column-count: 2; 
           -webkit-column-count: 2;
           -moz-column-count: 2; }
      }
    @media screen and (max-width: 667px) {
      div.masonry {
           column-count: 1; 
           -webkit-column-count: 1;
           -moz-column-count: 1; }
      }
  @media screen and (max-width: 414px) {
      div.wrapper  { margin: 0; }
      div.projetos { margin: 0; }
      .ultimos     { margin-bottom: 0px; }
    }

.saiba { margin-left: 20px; height: 40px; }
.projeto_tipo { font-weight: 900; color: #d4145a; font-size: 2.5em; line-height: 1.8em; margin: 0 0 0 20px; }
.projeto_nome { font-weight: 900; color: #0071bc; font-size: 1.2em; margin-top: -40px; margin-left: 20px; }
.projetos p   { font-weight: 300; font-size: 1em; line-height: 1.8em; margin: 20px; }
/*.claro { background-color: #aaa; }*/
/*.escuro { background-color: #ccc; }*/

  @media screen and (max-width: 896px) {
    .projeto_tipo { font-size: 2em; line-height: 1.8em; margin: 0 0 0 20px; }
    .projeto_nome { font-size: 1em; margin-top: -40px; margin-left: 20px; }
  }

.equipe { max-width: 33%; float: left; background-color: white; margin: 20px 0 20px 0; overflow: auto; }
  @media screen and (max-width: 1024px) {
    .equipe { max-width: 50%; } }
  @media screen and (max-width: 501px) {
    .equipe { max-width: 100%; } }

.quem_somos { font-weight: 900; color: #0071bc; font-size: 2.5em; margin-left: 60px; }

.quem_somos_nome   { font-weight: 900; color: #d4145a; font-size: 2em; margin-top: 0px; margin-left: 20px; }
.quem_somos_funcao { font-weight: 900; font-size: 1.4em; margin-top: -30px; margin-left: 20px; }
.quem_somos_texto  { font-weight: 300; font-size: 1em; margin: -20px 20px 20px 20px; line-height: 2em; }

.fale1 { float: left; width: 50%; height: 75vh; background-color: #ffd400; color: black; margin: 0 auto; }
.fale2 { float: left; width: 50%; height: 75vh; background-color: #fbe357; color: black; margin: 0 auto; }

.fale1_titulo { font-weight: 900; font-size: 2.5em; margin-bottom: 4px; }
.fale_sub     { font-weight: 900; font-size: 1em; margin-bottom: 4px; }

  @media screen and (max-width: 896px) { 
    .quem_somos { margin-left: 20px; }
  }

  @media screen and (max-width: 896px) { 
    .fale1 { width: 100%; height: 50vh; }
    .fale2 { width: 100%; }
  }

  textarea, input[type=text], input[type=tel] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid black;
    outline: none;
    background-color: #fbe357;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }

  textarea:focus {
    background-color: lightblue;
  }

  input[type=text]:focus {
    background-color: lightblue;
  }
  input[type=tel]:focus {
    background-color: lightblue;
  }

@media screen and (max-width: 375px) { 
  .proposito2_titulo, .fazemos1_titulo, .ultimos, .quem_somos, .fale1_titulo { font-size: 2.0em; }
}

.rodape { width: 100%; height: 220px; background-color: black; 
          background-repeat: no-repeat; 
          background-attachment: fixed; 
          background-size: cover; 
          background-position: left 450px; 
          position: relative; 
          background-image: url('../imgs/k_rose.jpg');
          /*-webkit-transform: rotate(0deg);*/
          /*-moz-transform:    rotate(0deg);*/
          /*-ms-transform:     rotate(0deg);*/
          /*-o-transform:      rotate(0deg);*/
          /*transform:         rotate(0deg);*/
        }

.rodape_instagram { position: absolute; bottom: 20px;  left: 30px; }
.rodape_youtube   { position: absolute; bottom: 20px;  left: 80px; }
.rodape_facebook  { position: absolute; bottom: 20px;  left:130px; }
.rodape_logo      { position: absolute; bottom:  0px; right: 30px; }

@media screen and (max-width: 414px) {
.rodape { background-size: 120%; 
          background-position: bottom right; }
}