@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&display=swap');

.color-primary, 
a,
a:hover,
a:focus,
a:active { color: #0B537A;  } 

.bg-primary { background-color: #0B537A !important }

.color-secondary  { color: #E37451 } 
.bg-secondary { background-color: #E37451 !important }

.bg-primary-light { 
  border: 1px solid rgba(0,0,0,0.1);
  background: #EDF3E0 !important }

body { 
  overflow-x: hidden;
  font-family: "Funnel Display", Sans-serif;
  font-size: 12pt;
  color: #333 }


/* wrapper 
//////////////////////////////////////////////////*/
.wrapper { padding: 120px 0 }

.container { max-width: 1278.98px }

@media(max-width:767.98px){
  .wrapper { padding: 60px 0 }
.container { padding: 0 2rem }
}


/* heading / text
//////////////////////////////////////////////////*/
h1 { margin-bottom: 2.5rem }
h2 { margin-bottom: 2rem }
h3 { margin-bottom: 1.5rem }
h4 { margin-bottom: 1.25rem }

h1 { font-size: 300%; font-weight: 700  }
h2 { font-size: 250%; font-weight: 700 }
h3 { font-size: 200% }
h4 { font-size: 150% }

@media(max-width:767.98px){

  h1 { font-size: 200% }
  h2 { font-size: 150% }
  h3 { font-size: 125% }
  h4 { font-size: 112.5% }
  
  h1,
  h2 { margin-bottom: 1.5rem }
  h3,
  h4 { margin-bottom: 1.25rem }

}


/* header 
//////////////////////////////////////////////////*/
header { 
  position: relative;
  z-index: 10;
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important}

.inner header { 
  border-bottom: 1px solid #EFEFEF;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,0.025) }  

.topbar { 
  position: relative;
  z-index: 3;
  font-size: 87.5%;
  background: #FFF;
  border-bottom: 1px solid #EFEFEF }

.topbar .d-flex { 
  align-items: center;
  line-height: 1;
  height: 45px }

.topbar .d-flex > .d-flex:first-child > div { 
  display: inline-flex;
  margin-right: 30px }

.topbar .d-flex > *:last-child > * { display: inline-flex }

.topbar .d-flex div .ico { margin-right: 3.75px }

header .nav-link { 
  color: #0B537A }

header .nav-link:hover { color: #E37451 }

header .navbar {
  padding-left: 0;
  padding-right: 0 }

header .navbar-toggler { 
  width: 45px;
  padding: 10px;
  border: 1px solid #0B537A }

header .navbar-toggler span { 
  background: #0B537A;
  height: 2px;
  display: block }

header .navbar-toggler:hover,
header .navbar-toggler:active,
header .navbar-toggler:focus { background: #0B537A }

header .navbar-toggler:hover span,
header .navbar-toggler:active span,
header .navbar-toggler:focus span { background: #FFF }

header .navbar-toggler span:not(:last-of-type) { margin: 0 0 5px 0 }

@media(min-width:992px){ 
  header .nav-link { 
    font-size: 112.5%;
    margin-left: 2rem }
}

@media(max-width:991.98px){
  header .navbar-collapse { 
    position: absolute;
    z-index: 2;
    top: 100px;
    right: 0;
    min-width: 300px;
    background: #E37451 }

  header .nav-link { 
    margin: 0;
    line-height: 45px;
    padding: 0 15px !important;
    color: #FFF !important }

  header .nav-link:hover,
  header .nav-link:focus,
  header .nav-link:active { box-shadow: inset 0 0 100px rgba(255,255,255,0.1) }

  header .nav-link:not(:last-of-type) { border-bottom: 1px solid rgba(255,255,255,0.2) }
}

@media(max-width:575.98px){
  /* header { height: 100px } */

  header .navbar-brand img { height: 40px }
  
  header .navbar-collapse { 
    top: 100px;
    left: 0;
    width: 100% }
}




/* outdoor 
//////////////////////////////////////////////////*/
.outdoor,
.outdoor .carousel-item { height: 650px }

.outdoor .carousel-inner { 
  overflow: visible;
  position: relative }

.outdoor-bg { 
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute }

.outdoor-caption {
  color: #FFF;
  position: relative;
  top: 50%;
  transform: translate(0,-50%) }  

.outdoor-caption p { 
  margin-bottom: 30px;
  line-height: 130%;
  font-size: 120% }  

.outdoor-caption .large { 
  margin-bottom: 30px;
  line-height: 100%;
  font-size: 350% } 

.carousel-control-prev,
.carousel-control-next { opacity: 1 }

@media(max-width: 767.98px){

  .outdoor,
  .outdoor .carousel-item { height: 650px }
  
  .outdoor .carousel-item { background: #0B537A }

  .outdoor img { opacity: .5}

  .outdoor-caption { padding: 0 30px }

  .outdoor-caption p { font-size: 100% }  
  
  .outdoor-caption .large { 
    font-size: 200% } 
}

@media(min-width: 768px){
  /* .outdoor-caption p { width: 50% } */
}

@media(max-width: 1440px){

  .carousel-control-prev,
  .carousel-control-next { width: 100px }
}



/* about 
//////////////////////////////////////////////////*/
.about p { font-size: 112.5% } 

.inner .about .row.about-more { margin: 3rem 0 }
.inner .about .row.about-more > div { padding: 0 }

.inner .about .row.about-more > div .box { padding: 3rem }

.inner .about .row.about-more > div:nth-child(1) .box { 
  height: 100%;
  background: #0B537A;
  color: #FFF }

.inner .about .row.about-more > div:nth-child(2) .box { 
  height: 100%;
  background: #E37451;
  color: #FFF }

.inner .about .row.about-more > div:nth-child(3) .box { 
  height: 100%;
  background: #DDD;
  color: #0B537A }

@media(min-width:768px){
  .home .about { 
    background: url(img/bg-about.webp) no-repeat center;
    background-size: auto 100% } 

  .home .about p { 
    font-size: 120%;
    width: 40% }
}


  


/* services 
//////////////////////////////////////////////////*/
.services { background: #E37451 }  

.services .ico { margin-bottom: 30px }

.services h3 {
  font-weight: bold; 
  margin-bottom: 30px;
  letter-spacing: -1px;
  font-size: 125% }  

.services .row > div { margin-bottom: 45px }

.services .box { 
  height: 100%;
  padding: 45px;
  margin: 7.5px;
  background: #FFF;
  border-radius: 3px;
  box-shadow: 3px 3px 6px rgba(0,0,0,0.2); }






/* infos 
//////////////////////////////////////////////////*/
.infos ul { padding-left: 20px }

.infos li { margin-bottom: 7.5px }

.infos ul a { color: #777 }

@media(min-width:768px){
  .infos ul li { width: 33% }
}




/* partners 
//////////////////////////////////////////////////*/

.partners .d-flex > div { 
  padding: 30px 45px;
  margin: 7.5px;
  width: calc(16.66666666666667% - 15px) }

@media(max-width:767.98px) {
  .partners .d-flex > div { 
    padding: 1rem;
    width: calc(50% - 15px) }
}

.partners img { object-fit: contain !important }


/* blog 
//////////////////////////////////////////////////*/
.post-header h1 { 
  font-size: 300%;
  margin-bottom: 15px;
  text-transform: initial }

.post-header small { 
  display: block;
  color: #AAA;
  margin-bottom: 15px }

.post-header p {
  margin-bottom: 30px;
  line-height: 130%;
  color: #666;
  font-size: 150% }

.post-body { margin: 30px auto }

.post-body > * { 
  font-size: 112.5%;
  margin-bottom: 30px;
  line-height: 160% }

.post-body > * > * { margin-bottom: 15px }

.post-body h2 { 
  line-height: 120%;
  font-size: 240%;
  text-transform: initial }

.post-body h3 { 
  line-height: 120%;
  font-size: 180%;
  text-transform: initial }

.posts { background: #EEE }

.posts a { 
  position: relative;
  color: #111;
  text-decoration: none }

.posts small {
  display: block;
  margin-bottom: 7.5px;
  color: #666;
  font-size: 87.5%;
  letter-spacing: 2px }

.posts h2 { 
  letter-spacing: normal;
  font-weight: 400;
  font-size: 125% }

.posts a:hover h2 { text-decoration: underline }

@media(min-width:768px){
  /* .posts .row { margin: 0 -30px }
  .posts .row > * { padding: 0 30px } */

  .post-header,
  .post-body { width: 992px }

  .post-header { margin: 0 auto }
}

@media(max-width: 767.98px){
  .posts a:first-child { border-top: 1px solid rgba(0,0,0,.1) }

  .posts a { padding: 15px }

  .posts a:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,.1) }

  .posts a .ratio {
    float: right;
    background: #FFF;
    padding: 0;
    order: 2;
    width: 72px;
    height: 72px } 

  .posts a .ratio img { object-fit: cover }

  .posts a h2 {
    order: 1;
    font-size: 110%;
    display: inline;
    margin: 0 }

  .posts .btn { width: 100% }

}


/* contact 
//////////////////////////////////////////////////*/
.contact { 
  font-size: 112.5%;
  color: #FFF;
  background: #222 url(../img/hero.webp) fixed;
  background-size: cover }

.contact .flex-column > * { margin-bottom: 7.5px } 




/* basesite 
//////////////////////////////////////////////////*/
.basesite {
  padding: 60px 0;
  background: #0B537A  }

.basesite a { color: #FFF }

.basesite .socialmedia > div { 
  align-items: center;
  line-height: 1 }

.basesite .socialmedia strong { 
  color: #FFF;
  font-size: 125% }

.basesite .socialmedia .ico { margin-right: 10px }

.basesite .socialmedia small { 
  color: #FFF;
  opacity: .5;
  font-size: 87.5% }

@media(max-width:767.68px){
  .basesite a { 
    margin-bottom: 7.5px;
    display: block }
}

@media(min-width:768px){
  .mapsite { width: 80% }
  
  .mapsite a {  }
}





/* footer 
//////////////////////////////////////////////////*/
footer { padding: 60px 0 }

footer a.brand-flexpoint {
  display: inline-block;
  text-indent: -1000000px;
  background: url(https://www.flexpoint.com.br/addons/flexpoint-site-sign.png) bottom;
  width: 25px;
  height: 27px } 




/* form 
//////////////////////////////////////////////////*/
.form-control {
  font-size: 112.5%;
  height: 50px;
  color: #666;
  box-shadow: inset 0 2px 2px rgba(0,0,0,0.075);
  background: #F6F6F6 }

.btn {
  padding: 15px 22.5px;
  line-height: normal;
  border: 0;
  border-radius: 6px }

.btn-link {
  text-transform: none;
  font-weight: normal;
  color: #DDD !important }

.btn-xs { 
  font-size: 70%;
  padding: 7.5px 11.25px }

.btn-sm { padding: 11.25px 15px }

.btn-lg { padding: 18.75px 30px }

.btn-primary {
  border: 0;
  background: #0B537A !important;
  color: #FFF !important } 


.btn-light { 
  background: #F2F2F2;
  color: #0B537A }

.btn-primary-outline {
  border: 1px solid #0B537A;
  color: #0B537A  } 

.btn-primary-outline:hover,
.btn-primary-outline:focus,
.btn-primary-outline:active {
  background: #0B537A ;
  color: #FFF !important } 
  
.btn-white {
  background: #FFF;
  color: #0B537A  }

.btn-secondary {
  background: #E37451 !important;
  color: #FFF !important }  

.btn-secondary-outline {
  border: 1px solid #E37451 !important;
  color: #E37451 !important }  

.btn-secondary-outline:hover,
.btn-secondary-outline:active,
.btn-secondary-outline:focus {
  background: #E37451 !important;
  color: #FFF !important }  

.color-green { color: #00B259 }

.btn-green {
  background: #00B259;
  color: #FFF !important }  

.btn-green-outline {
  border: 1px solid #00B259;
  color: #00B259 !important }  

.btn-green-outline:hover,
.btn-green-outline:active,
.btn-green-outline:focus {
  background: #00B259 !important;
  color: #FFF !important }  

.btn-gray-outline {
  border: 1px solid #888;
  color: #888 !important }  

.btn-gray-outline:hover,
.btn-gray-outline:active,
.btn-gray-outline:focus {
  background: #888 !important;
  color: #FFF !important }  

.btn-white-outline {
  border: 1px solid #FFF;
  color: #FFF !important }  


.btn .ico { margin-right: 7.5px }

.btn:active,
.btn:hover,
.btn:focus { box-shadow: inset 0 0 100px rgba(255,255,255,0.2) }

@media(max-width:767.98px){
  .btn-lg {
    line-height: 100%;
    padding-top: 15px;
    padding-bottom: 15px }
}



/* global 
//////////////////////////////////////////////////*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both }

.ico,
.ico-services { 
  display: inline-block;
  position: relative }

.ico          { background: url("img/ico.webp") top left no-repeat }
.ico-services { background: url("img/ico-services.webp") top left no-repeat; }

.ico-phone{ width:21px; height:22px; background-position:0 -229px; }
.ico-mail{ width:21px; height:16px; background-position:0 -251px; }
.ico-fb{ width:42px; height:44px; background-position:0 -287px; }
.ico-ig{ width:43px; height:44px; background-position:0 -331px; }
.ico-wapp-sm{ width:16px; height:17px; background-position:0 -527px; }
.ico-mail-sm{ width:16px; height:17px; background-position:0 -544px; }
.ico-phone-sm{ width:16px; height:17px; background-position:0 -561px; }
.ico-fb-sm{ width:21px; height:21px; background-position:0 -578px; }
.ico-ig-sm{ width:22px; height:22px; background-position:0 -599px; }
.ico-next{ width:44px; height:44px; background-position:0 -621px; }
.ico-prev{ width:44px; height:44px; background-position:0 -665px; }

.ico-hidrante{ width:80px; height:54px; background-position:0 0; }
.ico-extintor{ width:80px; height:54px; background-position:0 -54px; }
.ico-clcb{ width:80px; height:54px; background-position:0 -108px; }
.ico-curso{ width:80px; height:54px; background-position:0 -162px; }
.ico-avcb{ width:80px; height:54px; background-position:0 -216px; }
.ico-art{ width:80px; height:54px; background-position:0 -270px; }
.ico-alarmes{ width:80px; height:54px; background-position:0 -324px; }
.ico-sprinkles{ width:80px; height:54px; background-position:0 -378px; }


  

  



/* aspects ratio
//////////////////////////////////////////////////*/
.ratio {
  /* background: #EEE; */
  position: relative;
  overflow: hidden;
  display: block }

.ratio-1p1  { padding-top: 100% }
.ratio-4p3  { padding-top: 75% }
.ratio-3p2  { padding-top: 66.66% }
.ratio-8p5  { padding-top: 62.5% }
.ratio-16p9 { padding-top: 56.25% }

.ratio img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover }


  


/* ANIMATION: DELAY / DURATION
//////////////////////////////////////////////////////////////////////////////////////////*/
.delay1   { animation-delay: 500ms !important }
.delay2   { animation-delay: 1000ms !important }
.delay3   { animation-delay: 1500ms !important }
.delay4   { animation-delay: 2000ms !important }
.delay5   { animation-delay: 2500ms !important }
.delay6   { animation-delay: 3000ms !important }
.delay7   { animation-delay: 3500ms !important }
.delay8   { animation-delay: 4000ms !important }
.delay9   { animation-delay: 4500ms !important }
.delay10  { animation-delay: 5000ms !important }
.delay11  { animation-delay: 6000ms !important }

.duration1  { animation-duration: 100ms !important }
.duration2  { animation-duration: 200ms !important }
.duration3  { animation-duration: 300ms !important }
.duration4  { animation-duration: 400ms !important }
.duration5  { animation-duration: 500ms !important }
.duration6  { animation-duration: 600ms !important }
.duration7  { animation-duration: 700ms !important }
.duration8  { animation-duration: 800ms !important }
.duration9  { animation-duration: 900ms !important }
.duration10 { animation-duration: 1000ms !important }
.duration20 { animation-duration: 2000ms !important }
.duration30 { animation-duration: 3000ms !important }
.duration40 { animation-duration: 4000ms !important }
.duration50 { animation-duration: 5000ms !important }
.duration60 { animation-duration: 6000ms !important }
.duration70 { animation-duration: 7000ms !important }
.duration80 { animation-duration: 8000ms !important }
.duration90 { animation-duration: 9000ms !important }
.duration100 { animation-duration: 10000ms !important }

/*Form de Contato*/

input.error,
textarea.error,
select.error { background: #FFDFDF  no-repeat right 13px }


#btnWhatsapp {
  z-index: 1000;
  transition: bottom 200ms ease-in-out;
  position: fixed;
  bottom: 2rem;
  right: 2rem }

@media(max-width:767.98px){
  #btnWhatsapp { right:1rem }
}


.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}

.rounded-3 { border-radius: .5rem }

.products .row {
  margin: 0 -.5rem !important;
}

.products .row > [class*="col"] {
  padding: 0 .5rem !important;
}

.products article { 
  overflow: hidden }

.products img {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: all 300ms;
  opacity: .5;
  filter: grayscale(1);
  mix-blend-mode: multiply;
  transform: scale(1);
}

.products article:hover img {
  transform: scale(1.5);
  opacity: 1;
}

.products article h4 { 
 font-weight: bold;
 bottom: 0}

.page-item .page-link { color: #0B537A}
.page-item .page-link:hover { border-color: #0B537A}

.page-item.active .page-link {
  border-color: #0B537A;
  background: #0B537A !important;
}

@media(max-width:767.98px){
  .products h4 { font-size: 110% !important }
}