/* ----------------------------------------------------------
    :: Template Name: General outdoor | ooh
    :: Author: Marca Site! - Carlos Augsto A. Cruz 
    :: Author URL: ###
    :: Version: 1.0.0
    :: Created: 06 Julho 2022
    :: Last Updated: 017/08/2022
    ----------------------------------------------------------

/***************************************************************************
       Cores
****************************************************************************

  
  

/***************************************************************************
       Fonts
***************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
  /*font-family: 'Poppins', sans-serif;*/

/***************************************************************************
       Variáveis
***************************************************************************/

  :root {
    
   
    --cor-branco: #ffffff;

    --font-texto: 'Lato', sans-serif;
    --font-titulo: 'Roboto Condensed', sans-serif;
  }

/***************************************************************************
        All
***************************************************************************/
  html {
    margin-top: 0px !important;
}
  html,
  body{
      overflow: auto !important;
    margin: 0;
    scroll-behavior: smooth;
  }
  body{
    
    background: #fff
  }
  *{
    margin: 0;
    box-shadow: 0 0 0 0;
    border: 0 none;
    outline: 0;
  } 



  a{
    text-decoration: none !important; 
    cursor: pointer;
  }
  button:focus { outline: none; }

  .whatsapp img{
    position: fixed;
    z-index: 8;
    bottom: 20px;
    right: 50px;
    width: 50px;
    height: 50px;
    /*opacity: 0.7;*/
    transition: ease .8s all;
  }

  .whatsapp a:hover img{
    opacity: 1;
      filter: drop-shadow(0px 0px 6px black);
  }



/***********************************************************************************
                  MENU
***********************************************************************************/
.btn_veja_menu{
      padding: 10px 40px 10px 40px;
    background: #cd011c;
    border: 2px solid #cd011c; 
    color: #FFF; 
    font-family: var(--font-titulo); 
    transition: 0.7s;
    font-weight: 600;
    border: 2px solid #cd011c;
    position: relative;
    top: -3px;
  }
    .btn_veja_menu:hover{
    border: 2px solid #cd011c;
    background: #fff;
    color: #cd011c;
       
  }
#logo {
  width: 100%;
  height: 100%;
  position: relative;
  top: 18px;
  margin-top: 20px;
}
#logo img{
  margin-top: 20px;
}

#header {
  background: #fff;
  box-sizing: border-box;
  height: 130px;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #b2b2b2; 
 
}

#menu {
  display: flex;
  list-style: none;
  gap: 0.5rem;
  position: relative;
   top: -30px;
}


#menu .links {
  display: block;
  padding: 0.5rem;
  font-family: var(--font-titulo);
  color: #000;
  font-weight: 400;
  font-size: 18px;
}

#btn-mobile {
  display: none;
}

@media (max-width: 600px) {
  #menu {
    display: block;
    position: absolute;
    width: 100%;
    top: 70px;
    right: 0px;
    background: #e7e7e7;
    transition: 0.6s;
    z-index: 1000;
    height: 0px;
    visibility: hidden;
    overflow-y: hidden;
  }

  #nav.active #menu {
    height: calc(100vh - 70px);
    visibility: visible;
    overflow-y: auto;
    margin-top: 60px;
  }
  #menu a {
    padding: 1rem 0;
    margin: 0 1rem;
    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
  }
  #btn-mobile {
    display: flex;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border: none;
    background: none;
    cursor: pointer;
    gap: 0.5rem;
        top: -30px;
    position: relative
  }
  #hamburger {
    border-top: 2px solid;
    width: 20px;
  }
  #hamburger::after,
  #hamburger::before {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    margin-top: 5px;
    transition: 0.3s;
    position: relative;
  }
  #nav.active #hamburger {
    border-top-color: transparent;
  }
  #nav.active #hamburger::before {
    transform: rotate(135deg);
  }
  #nav.active #hamburger::after {
    transform: rotate(-135deg);
    top: -7px;
  }
}
/**********************************************************************************************
***********************************************************************************************
    footer
***********************************************************************************************
***********************************************************************************************/
   .icone_titulo_footer{
    color: #fff;
    font-size: 18px;
    font-family: var(--font-titulo);
    font-weight: 500;
        position: relative;
    left: 10px;
  }
  .formulario_textto_footer{
    color: #fff;
    font-size: 18px;
    font-family: var(--font-texto);
    font-weight: 100;
    position: relative;
    left: 45px;
  }
  #logoFooter {
    width: 100%;
    height: 100%;
   
  }
 #footer{
  background: #363435;
 }
 #footer H3{
  font-family: var(--font-titulo);
    font-size: 26px;
    color: #fff;
 }
  #footer p{
  font-family: var(--font-texto);
    font-size: 18px;
    color: #fff;
    font-weight: 100;
    text-align: left;
 }
 .icones_footer{
  position: relative;
  left: 33px;
  margin-top: 25px;
 }


  #footer .copy{
    font-size: 18px;
    font-family: var(--font-texto);
    color: #FFF; 
    padding-bottom: 10px;
        position: relative;
    top: -10px;
  }
/**********************************************************************************************
***********************************************************************************************
    Banner -- Home
***********************************************************************************************
***********************************************************************************************/
  .banner_mobile{
        display: none;
    }
   #banne{
    margin-top: 30px;
   }
  .img_chamada{
        display: block;
    width: 100%;
    height: 150px;
    object-fit: contain;
  }
  #banner h2{
    
    font-family: var(--font-titulo);
    font-weight: 700;
    font-size: 55px;
    color: #000;
    text-align: center;
    margin-top: 80px;
  }
  #banner .bannerTxt p{
    
    font-family: var(--font-texto);
    font-weight: 300;
    font-size: 16px;
    color: #000;
    text-align: justify;
  }
 .bannerChamada{
    background: #fff;
    padding: 30px;
    position: relative;
    top: 70px;
  }
   .btn_chamada{
    font-family: var(--font-texto);
     font-weight: 700;
     color: #fff;
     font-size: 10px;
     background: #000;
     padding: 15px 35px;
     border: 2px solid #000;
     transition: 0.3s;
  }
   .btn_chamada:hover {
      
     color: #000;
     transition: ;
     background: #fff;
     padding: 15px 35px;
     border: 2px solid #000;
  }


/**********************************************************************************************
***********************************************************************************************
    Sobre -- Home
***********************************************************************************************
***********************************************************************************************/
  #sobre{
    padding-top: 80px;
    padding-bottom: 80px;
    background: #f8f8f8;
  }
  
  #sobre h3{
    font-family: var(--font-titulo);
    font-size: 26px;
    color: #cd011c ;
  }
  #sobre img{
    width: 100%;
    height: 450px;
    object-fit: cover;
  }
   #sobre p{
    font-size: 18px;
    font-family: var(--font-texto);
    color: #000;
    font-weight: 100;
   }
  .btn_veja{
      padding: 10px 90px 10px 90px;
    background: #cd011c;
    border: 2px solid #cd011c; 
    color: #FFF; 
    font-family: var(--font-texto); 
    transition: 0.7s;
    font-weight: 600;
  }
    .btn_veja:hover{
    border: 2px solid #cd011c;
    background: #fff;
    color: #cd011c;
    font-weight: 400;   
  }

/**********************************************************************************************
***********************************************************************************************
    Grandes Formatos -- Home
***********************************************************************************************
***********************************************************************************************/
#grandes_slide{
  margin-top: 50px;

}
 #grandes{
  padding-top: 80px;
  padding-bottom: 80px;
    
 }
 #grandes h3{
  font-family: var(--font-titulo);
    font-size: 26px;
    color: #cd011c;
 }
  #grandes p{
  font-family: var(--font-texto);
  font-size: 18px;
  color: #000;
  font-weight: 100;
 }
 #grandes img{
  display: block;
    width: 100%;
    height: 450px;
    object-fit: cover;
 }

   .btnslide1{
  position: absolute;
    top: -250px;
    z-index: 7;
    left: -8px;
}
.btnslide2{
  position: absolute;
    top: -250px;
    z-index: 7;
    right: -8px;
}
/**********************************************************************************************
***********************************************************************************************
   digital
***********************************************************************************************
***********************************************************************************************/
  #digital_slide{
  margin-top: 50px;
 }
 #digital{
  background: #f8f8f8;
  padding-top: 80px;
    padding-bottom: 80px;
 }
 #digital h3{
  font-family: var(--font-titulo);
    font-size: 26px;
    color: #cd011c;
 }
  #digital p{
  font-family: var(--font-texto);
  font-size: 18px;
  color: #000;
  font-weight: 100;
 }
 #digital img{
  display: block;
    width: 100%;
    height: 450px;
    object-fit: cover;
 }

   .btnslide1_digital{
  position: absolute;
    top: -250px;
    z-index: 7;
    left: -8px;
 }
 .btnslide2_digital{
  position: absolute;
    top: -250px;
    z-index: 7;
    right: -8px;
 }
 /**********************************************************************************************
***********************************************************************************************
   busdoors
***********************************************************************************************
***********************************************************************************************/
  #busdoors_slide{
    margin-top: 50px;
  }
 #busdoors{
  background: #f0efef;
  padding-top: 80px;
    padding-bottom: 80px;
 }
 #busdoors h3{
  font-family: var(--font-titulo);
    font-size: 26px;
    color: #cd011c;
 }
  #busdoors p{
  font-family: var(--font-texto);
  font-size: 18px;
  color: #000;
  font-weight: 100;
 }
 #busdoors img{
  display: block;
    width: 100%;
    height: 450px;
    object-fit: cover;
 }

   .btnslide1_busdoors{
  position: absolute;
    top: -250px;
    z-index: 7;
    left: -8px;
 }
 .btnslide2_busdoors{
  position: absolute;
    top: -250px;
    z-index: 7;
    right: -8px;
 }
 /**********************************************************************************************
***********************************************************************************************
  Urbanos
***********************************************************************************************
***********************************************************************************************/
  #urbanos_slide{
     margin-top: 50px;
  }
 #urbanos{
  background: #fff;
  padding-top: 80px;
    padding-bottom: 80px;
 }
 #urbanos h3{
  font-family: var(--font-titulo);
    font-size: 26px;
    color: #cd011c;
 }
  #urbanos p{
  font-family: var(--font-texto);
  font-size: 18px;
  color: #000;
  font-weight: 100;
 }
 #urbanos img{
  display: block;
    width: 100%;
    height: 450px;
    object-fit: cover;
 }

   .btnslide1_urbanos{
  position: absolute;
    top: -250px;
    z-index: 7;
    left: -8px;
 }
 .btnslide2_urbanos{
  position: absolute;
    top: -250px;
    z-index: 7;
    right: -8px;
 }
 /**********************************************************************************************
***********************************************************************************************
  outdoors
***********************************************************************************************
***********************************************************************************************/
  #outdoors_slide{
     margin-top: 50px;
  }
 #outdoors{
  background: #f8f8f8;
  padding-top: 80px;
    padding-bottom: 80px;
 }
 #outdoors h3{
  font-family: var(--font-titulo);
    font-size: 26px;
    color: #cd011c;
 }
  #outdoors p{
  font-family: var(--font-texto);
  font-size: 18px;
  color: #000;
  font-weight: 100;
 }
 #outdoors img{
  display: block;
    width: 100%;
    height: 450px;
    object-fit: cover;
 }

   .btnslide1_outdoors{
  position: absolute;
    top: -250px;
    z-index: 7;
    left: -8px;
 }
 .btnslide2_outdoors{
  position: absolute;
    top: -250px;
    z-index: 7;
    right: -8px;
 }
  /**********************************************************************************************
***********************************************************************************************
  pedagios
***********************************************************************************************
***********************************************************************************************/
  #pedagios_slide{
     margin-top: 50px;
  }
 #pedagios{
  background: #f0efef;
  padding-top: 80px;
    padding-bottom: 80px;
 }
 #pedagios h3{
  font-family: var(--font-titulo);
    font-size: 26px;
    color: #cd011c;
 }
  #pedagios p{
  font-family: var(--font-texto);
  font-size: 18px;
  color: #000;
  font-weight: 100;
 }
 #pedagios img{
  display: block;
    width: 100%;
    height: 450px;
    object-fit: cover;
 }

   .btnslide1_pedagios{
  position: absolute;
    top: -250px;
    z-index: 7;
    left: -8px;
 }
 .btnslide2_pedagios{
  position: absolute;
    top: -250px;
    z-index: 7;
    right: -8px;
 }
/**********************************************************************************************
***********************************************************************************************
  formulario
***********************************************************************************************
***********************************************************************************************/
#formulario h3{
  font-family: var(--font-titulo);
  font-size: 26px;
  color: #fff;
  text-align: center;
  margin-top: 105px;
}
 .btn_veja_form{
      padding: 10px 90px 10px 90px;
    background: #cd011c;
    border: 2px solid #cd011c; 
    color: #FFF; 
    font-family: var(--font-texto); 
    transition: 0.7s;
    font-weight: 600;
    display: table;
    margin: auto;
  }
 .btn_veja_form:hover{
    border: 2px solid #cd011c;
    background: #fff;
    color: #cd011c;
    font-weight: 400;   
  }

  .card_formulario{
   margin-bottom: -200px;
    position: relative;
    top: -315px;
    
  }
   .card_formulario p{
   margin-bottom: 0px;
    
  }
  .coluna_preta{
    box-shadow: 0 0 20px -1px #343333;
    background: #343333;
  }
   .coluna_branca{
    box-shadow: 0 0 20px -1px #343333;
    background: #fff;
  }
  i {
    color: #fff;
    font-size: 25px;
  }
  .icone_titulo{
    color: #fff;
    font-size: 18px;
    font-family: var(--font-titulo);
    font-weight: 500;
        position: relative;
    left: 10px;
  }
  h4{
    color: #fff;
    font-size: 26px;
    font-family: var(--font-titulo);
    
    margin-top: 20px;
  }
  .formulario_textto{
    color: #fff;
    font-size: 18px;
    font-family: var(--font-texto);
    font-weight: 100;
    position: relative;
    left: 35px;
  }
  .formulario_textto_phone a{
    color: #fff;
    font-size: 18px;
    font-family: var(--font-texto);
    font-weight: 100;
    position: relative;
    left: 36px;
  }

  .formulario_textto_yt{

    color: #fff;
    font-size: 18px;
    font-family: var(--font-texto);
    font-weight: 100;
    position: relative;
    left: 40px;
  }
  #formulario input{
    font-size: 16px;
    width: 100%;
    border: 1px solid #ddd9d9;
    background: #fafafa;
    padding: 15px;
    font-family: var(--font-texto);
  }
   #formulario textarea{
    font-size: 16px;
    width: 100%;
    border: 1px solid #ddd9d9;
    background: #fafafa;
    height: 200px;
    padding: 15px;
    font-family: var(--font-texto);
  }
  #btn_veja_enviar input{
      padding: 8px 90px 8px 90px!important;
    background: #cd011c!important;
    border: 2px solid #cd011c; 
    color: #FFF!important; 
    font-family: var(--font-texto)!important; 
    transition: 0.7s!important;
    font-weight: 600!important;
    display: table!important;
    font-size: 16px!important;
    margin-bottom: 20px!important;
    width: 250px!important;
  }
 #btn_veja_enviar input:hover{
    border: 2px solid #cd011c!important;
    background: #fff!important;
    color: #cd011c!important;
    font-weight: 400!important;   
  }

  .margin_top_footer{
    margin-top: 3rem;
  }
  .left_footer_fone{
    position:
     relative;left: 55px;
  }
/**********************************************************************************************
***********************************************************************************************
                                      MOBILE
***********************************************************************************************
***********************************************************************************************/


@media (max-width: 991px){
  .#banner h2{
    margin-top: 0px;
  }
  #sobre img{
    margin-top: 50px;
  }
  #footer H3{
    text-align: center;
  }
  .formulario_textto_footer{
    text-align: center;
    left: 0;
    padding-top: 10px;
  }
  #logoFooter img{
    display: block;
    margin: auto;
  }
.icone_titulo_footer{
  left: 0;
}
.icones_footer{
  display: table;
  margin: auto;
  left: 0px;
}
.margin_top_footer{
    margin-top: 10px;
  }
  #footer p{

    text-align: center;
  }
  .alinhamento_end{
    text-align: center;
  }
  .h3_cinza{
    display: none;
  }
   .left_footer_fone{
    position:
     relative;left: 0px;
  }
  #footer .copy{
    text-align: center;
    display: block;
  }
  .whatsapp img{
        right: 30px;

  }
  .banner_mobile{
                               
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: right;
    }
    .bannerChamada{
      top: 0px;
    }
    .btn_veja_menu{
      top: 10px;
      padding: 10px 40px 10px 40px!important;
    }


}