/*
17/02/2025
Theme Name: Houz Comunicação
Theme URI: https://houzcomunica.com/
Description: Produzido por Cociente Consultoria e Desenvolvimento em Tecnologia
Version: 2025
Autor Desenvolvimento: Produzido por Cociente Consultoria e Desenvolvimento em Tecnologia
Autor URI: http://www.cociente.com.br
*/

/* default */
*{margin:0; padding:0; outline:none; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary, div, ul, li{display: block; position: relative; }
html {font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
body, html, button, input, select, textarea, p, h1, h2, h3, h4, h5, h6, li, address, small, td, span {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
@-webkit-keyframes fadeIn { 
  0% { opacity: 0; }
  20% { opacity: 0; }
  40% { opacity: 0.3; }
  60% { opacity: 0.5; }
  80% { opacity: 0.9; }
  100% { opacity: 1; }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  20% { opacity: 0; }
  40% { opacity: 0.3; }
  60% { opacity: 0.5; }
  80% { opacity: 0.9; }
  100% { opacity: 1; }
}
.homemade-apple-regular{
  font-family: "Homemade Apple", cursive;
  font-weight: 400;
  font-style: normal;
}
body{ background: #FFF; }
figure{ margin: 0; padding: 0; }
b,.bold,strong{ font-weight: 700; }
.text-center{ text-align: center; }
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #0082C3; color: #fff; text-shadow: none; }
::placeholder {
  color: #C4C4C4;
  opacity: 1;
}
:-ms-input-placeholder {
 color: #C4C4C4;
}
::-ms-input-placeholder {
 color: #C4C4C4;
}
input, textarea{
  background: #FFF !important;
  opacity: 1 !important;
}

a, a:hover, a:active, a:focus { color: inherit; text-decoration:none }
.none{ display:none !important; }
.show{ opacity: 1 }
.hide{ opacity: 0 }
.clear{ clear: both; }
//.alignnone, .alignleft{ width: 50% !important; height: auto; float:left; margin:0 10px 10px 0;}
//.alignright{ width: 50% !important; height: auto; float:right; margin:0 0 10px 10px}
.aligncenter {margin-left: auto; margin-right: auto; clear: both; display: block;}
.btn{ color: #FFF !important; }
.progress{ display: none; }
input[type="radio"], label{ cursor: pointer; }
.col-centered{ float: none; margin: 0 auto; }
.no-padding{ padding: 0 !important; }
.no-scroll{
  overflow: hidden !important;
}
.no-scroll-menu{
  overflow: hidden !important;
  &::after{
    overflow: hidden !important;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110vh;
    background: rgba(0,30,55,0.7);
    z-index: 999;
  }
}
.error_field{ border-color: red !important; }
.container-sm{ width: 860px; margin: 0 auto; display: block; clear: both; }
.anim{
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.container-fluid{ max-width: 1328px; }

.wp_pagenavi_container{
  width: 100%;
  text-align: center;
  margin-top: 35px;
  padding-bottom: 35px;
  .wp-pagenavi{
    display: block;
    width: 100%;
    a,span{
        border: 2px solid var(--gray-dark);
        color: var(--gray-dark);
        margin: 5px;
        padding: 8px 18px;
        border-radius: 20px;
    }
    .current{
        border: 2px solid var(--red);
        color: #FFF;
        background: var(--red);
    }
  }
}

#fancybox-overlay{
	z-index: 999999999 !important;
}
#fancybox-wrap{
	z-index: 9999999999 !important;
}

#fancybox-title-over{
	color: #FFF !important;
	background: rgba(52, 97, 177, 0.8) !important;
	font-size: 18px;
	text-transform: uppercase;
}

.bt{
    display: table;
    min-width: 180px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 400;
    padding: 10px 35px;
    text-align: center;
    text-transform: uppercase;    
    &.w-100{
        width: 100%;
    }
    &.bt-square{
        border-radius: 4px;
    }
    &.bt-shadown{
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    }
    &.bt-sm{
      font-size: 16px;
      padding: 8px 20px;
    }
    &.bt-yellow{
      background: var(--yellow);
      border: 1px solid var(--yellow);
      color: var(--blue-100);
    }
    &.bt-yellow-border{
      background: var(--yellow);
      border: 1px solid var(--blue-100);
      color: var(--blue-100);
    }
    &.bt-border-blue-80{
      background: none;
      border: 1px solid var(--blue-80);
      color: var(--blue-80);
    }
    &.bt-border-blue-100{
      background: none;
      border: 1px solid var(--blue-80);
      color: var(--blue-80);
    }
    &.bt-blue-80{
      background: var(--blue-80);
      border: 1px solid var(--blue-80);
      color: #FFF;
    }
    &.bt-gray{
      background: var(--gray-50);
      border: 1px solid var(--gray-50);
      color: #FFF;
    }
    &.bt-center{
      margin: 0 auto;
    }
    &.bt-br{
      position: absolute;
      bottom: 25px;
      right: 25px;
    }
    &.bt-bl{
      position: absolute;
      bottom: 25px;
      left: 25px;
    }
    &.fixed-bottom-left{
      position: fixed;
      bottom: 25px;
      left: 25px;
      z-index: 9999999999;
    }
  }
  
  .gradient-blue{
    background: var(--blue-100);
    background: linear-gradient(90deg, var(--blue-80) 0%, var(--blue-100) 50%);
  }

.video-container{
  position:relative;
  padding-bottom:56.25%;
  padding-top:30px;
  height:0;
  overflow:hidden;
  iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border-radius: 8px;
  }
}

.title-section{ font-size: 16px; font-weight: 700; margin-bottom: 20px; }
.title-section-text{ font-size: 32px; font-weight: 700; margin-bottom: 30px; }
.title-page{ font-size: 61px; color: var(--blue-dark); font-weight: 700; line-height: 58px; }
.title-page-xs{ font-size: 50px; color: var(--blue-dark); font-weight: 700; line-height: 50px; }
.title-page-description{ color: var(--gray-dark); font-size: 16px; line-height: 23px; padding-bottom: 15px; margin-top: 15px }

.ico-title{
  margin: 0 9px 0 -42px;
  img{
    height: auto;
    width: 34px;
  }
}

.curved-border-lr{
  margin-top: 39px;
  border-left: 1px solid var(--red);
  &::before{
    content: "";
    position: absolute;
    bottom: -39px;
    right: 0;
    width: 20px;
    height: 20px;
    border-top: 1px solid var(--red);
    border-right: 1px solid var(--red);
    border-radius: 0 20px 0 0;
    width: 20px;
  }
  &::after{
    content: "";
    position: absolute;
    bottom: -20px;
    left: -1;
    width: 20px;
    height: 20px;
    border-left: 1px solid var(--red);
    border-bottom: 1px solid var(--red);
    border-radius: 0 0 0 20px;
    width: calc(100% - 19px);
  }
}
.curved-border-rl{
  border-right: 1px solid var(--red);
        &::before{
          content: "";
          position: absolute;
          bottom: -39px;
          left: 0;
          width: 20px;
          height: 20px;
          border-top: 1px solid var(--red);
          border-left: 1px solid var(--red);
          border-radius: 20px 0 0 0;
          width: calc(100% - 19px);
        }
        &::after{
          content: "";
          position: absolute;
          bottom: -20px;
          right: -1;
          width: 20px;
          height: 20px;
          border-right: 1px solid var(--red);
          border-bottom: 1px solid var(--red);
          border-radius: 0 0 20px 0;
          width: 20px;
        }
}

:root{
    /* COLORS */
    --gray-100		   : #939393;
    --gray-50		     : #E8E8E8;
    --gray-10	       : #F1F1F1;
    --blue-gray      : #6e808e;
    --blue-100       : #001E37;
    --blue-80        : #0D5575;
    --blue-50        : #217EA7;
    --blue-10        : #86CFD7;
    --yellow         : #FFC23E;
  
  /* PADDINGS */
  --p-section: 100px 0;
  --pt-section: 100px 0 0 0;
  --pb-section: 0 0 100px 0;
  
  /* MARGINS */
}

@media only screen and  (max-width: 768px) {
  :root{
    /* PADDINGS */
    --p-section: 70px 0;
    --pt-section: 70px 0 0 0;
    --pb-section: 0 0 70px 0;
    /* MARGINS */
  } 
}

.section-space{ padding: var(--p-section); }
.section-space-t{ padding: var(--pt-section); }
.section-space-b{ padding: var(--pb-section); }


.gray-100{color: var(--gray-100);&:hover{color: var(--gray-100);}}
.gray-50{color: var(--gray-50);&:hover{color: var(--gray-50);}}
.gray-10{color: var(--gray-10);&:hover{color: var(--gray-10);}}
.blue-gray{color: var(--blue-gray);&:hover{color: var(--blue-gray);}}
.blue{color: var(--blue-100);&:hover{color: var(--blue-100);}}
.blue-100{color: var(--blue-100);&:hover{color: var(--blue-100);}}
.blue-80{color: var(--blue-80);&:hover{color: var(--blue-80);}}
.blue-50{color: var(--blue-50);&:hover{color: var(--blue-50);}}
.blue-10{color: var(--blue-10);&:hover{color: var(--blue-10);}}
.yellow{color: var(--yellow);&:hover{color: var(--yellow);}}
.white{color: #FFF;&:hover{color: #FFF;}}

.gray-100-bg{background-color: var(--gray-100);}
.gray-50-bg{background-color: var(--gray-50);}
.gray-10-bg{background-color: var(--gray-10);}
.blue-gray{background-color: var(--blue-gray);}
.blue-bg{background-color: var(--blue-100);}
.blue-100-bg{background-color: var(--blue-100);}
.blue-80-bg{background-color: var(--blue-80);}
.blue-50-bg{background-color: var(--blue-50);}
.blue-10-bg{background-color: var(--blue-10);}
.yellow-bg{background-color: var(--yellow);}
.white-bg{background-color: #FFF;}

////////////
// GLOBAL //
////////////
.banner{
  width: 100%;
  img,iframe{
    max-width: 98%;
  }
  iframe{
    text-align: center;
  }
}
.banner-mt{
  margin-top: 25px !important;
}
.banner-970x250{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  img{
    max-width: 100%;
  }
}
.banner-lateral{
  text-align: center;
  img{
    width: 250px;
    height: auto;
  }
}
.ads{
  margin-bottom: 25px;
}

.cat-label{
  display: table;
  margin-bottom: 10px;
  border-radius: 4px;
  font-size: 12px !important;
  font-weight: 400 !important;
  padding: 2px 8px;
  text-transform: uppercase;
  color: #FFF;
  background: var(--red);
  &.title{
    font-size: 36px !important;
    font-weight: 800 !important;
    padding: 2px 18px !important;
  }
  &.sobretudo{
    text-transform: none;
  }
}

.search-box{
  align-items: center;
  .search-form{
    display: flex;
    width: 100%;
    input{
      font-size: 16px;
      color: var(--gray-dark);
      padding: 6px 10px;
      border: 2px solid var(--gray-border);
      border-radius: 4px;
    }
    button{
      margin-left: 10px;
      border: none;
      background: none;
      font-size: 24px;
      color: var(--red);
    }
  }
}

.section-title{
  color: var(--red);
  font-weight: bold;
}

.figure-title{
  img{
    max-width: 100%;
  }
}

.wpcf7-form label{ display: block; color: var(--blue-pastel); }
.social-interna{
  display: flex;
  margin-top: 25px;
  a{
    color: var(--red);
    float: left;
    margin-right: 5px;
    font-size: 28px;
    &.circle{
      color: #FFF;
      background: var(--red);
      width: 28px;
      height: 28px;
      border-radius: 50%;
      font-size: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    &.search{
      font-size: 18px;
    }
  }
}

.content-more{
  display: none;
}

.underline-text-fx{
    display: inline-block;
    position: relative;
    &::after{
      content: "";
      position: absolute;
      bottom: -32px;
      right: -2px;
      width: 100%;
      height: 60px;
      background: url(../img/underline-text-fx.svg) no-repeat center;
    }
}

.circled-text-fx{
    display: inline-block;
    position: relative;
    &::after{
      content: "";
      position: absolute;
      bottom: -5px;
      right: -5px;
      width: 102%;
      height: 102%;
      background: url(../img/circled-text-fx-white.svg);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      z-index: -1;
    }
}

.circled-text-fx-yellow{
    display: inline-block;
    position: relative;
    &::after{
      content: "";
      position: absolute;
      bottom: -6px;
      right: -16px;
      width: 108%;
      height: 56px;
      background: url(../img/circled-text-fx-yellow.svg);
      background-size: contain;
      background-repeat: no-repeat;
      z-index: -1;
    }
}

.blur{
  filter: blur(5px);
}

@media only screen and  (max-width: 768px) {
  .circled-text-fx{
    &::after{
      bottom: -20px;
      right: -4px;
      width: 190px;
      height: 45px;
      background-size: 100% auto;
    }
  }
  .circled-text-fx-yellow{
    &::after{
      bottom: -22px;
      right: -16px;
      width: 108%;
      height: 56px;
    }
}
}