:root {
  --color-primary: #000E31;
  --color-secondary: #00A8B1;
  --padding-wrapper: 160px
}

.color-primary, 
a,
a:hover,
a:focus,
a:active { color: var(--color-primary) } 

.bg-primary { background-color: var(--color-primary) !important }

.color-secondary  { color: var(--color-secondary) } 
.bg-secondary     { background-color: var(--color-secondary) !important }

.bg-light { background: #F3F3F3 !important }

body { 
  overflow-x: hidden;
  font-family: "Spartan", Sans-serif;
  font-size: 12pt;
  color: var(--color-primary) }





/* wrapper 
//////////////////////////////////////////////////*/
.wrapper { padding: var(--padding-wrapper) 0 }

.container { max-width: 1278.98px }

@media(max-width:767.98px){
  .wrapper { padding: calc(var(--padding-wrapper)/3 * 2) 0 }
  .container { padding: 0 30px }
}





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

h1 { font-size: 245%; font-weight: 300  }
h2 { font-size: 150%; font-weight: 300 }
h3 { font-size: 125% }
h4 { font-size: 112.5% }

h1 { letter-spacing: -.125rem }
h2 { letter-spacing: -.1rem }
h3 { letter-spacing: -.075rem}
h4 { letter-spacing: -.05rem }

p { 
  margin-bottom: 1.5rem;
  line-height: 1.5 }

@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 { 
  height: 140px;
  position: relative;
  z-index: 10 }

.inner header { box-shadow: 0 2px 30px rgba(0,0,0,0.075) }  

header .navbar-nav { 
  gap: 2rem;
  align-items: center }

header .nav-link { color: var(--color-primary) }

header .nav-link.active,
header .nav-link:hover { color: var(--color-secondary) }

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

header .navbar-toggler span { 
  background: var(--color-primary);
  height: 3px;
  border-radius: 10px;
  display: block }

header .navbar-toggler:hover,
header .navbar-toggler:active,
header .navbar-toggler:focus { background: var(--color-primary) }

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 4px 0 }


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

  header .nav-link { 
    margin: 0;
    text-align: center; 
    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) }
}

@media(max-width:575.98px){
  header { 
    padding: 0 15px !important;
    height: 70px }

  header .navbar-brand { height: 50px }
  header .navbar-brand img { max-height: 100% }

  header .navbar-collapse { 
    top: 0;
    left: 0;
    width: 100%  }

  header .navbar-nav {
    justify-content: center;
    width: 100%;
    height: 100vh }  

  header .nav-link { 
    text-align: center;
    line-height: 50px;
    font-size: 150% }
}





/* fullbanner 
//////////////////////////////////////////////////*/
.fullbanner .carousel-item { height: calc(100vh - 140px) }

.fullbanner picture,
.fullbanner .container { 
  position: relative;
  height: 100% }

.fullbanner picture {
  position: absolute;
  width: 100% }

.fullbanner img { 
  width: 100%;
  height: 100%;
  object-fit: cover }  

.fullbanner .carousel-caption {
  text-align: left;
  position: relative;
  top: 50%;
  left: 0;
  transform: translate(0,-50%) }  

.fullbanner h1 { 
  font-weight: bold;
  font-size: 500%;
  line-height: 90% } 

.fullbanner h1 small {
  font-size: 50%;
  color: #FFF }

.fullbanner .carousel-caption > div { 
  font-size: 112.5%;
  line-height: 1.5 }

.fullbanner .carousel-indicators { z-index: 2 }

@media(min-width: 768px){
  
  .fullbanner .carousel-caption { width: 50% }

  .fullbanner h1 { letter-spacing: -7px } 
  
  .fullbanner h1 small { letter-spacing: -4px }

}

@media(max-width: 767.98px){

  .fullbanner .carousel-item { 
    background: var(--color-primary);
    height: calc(100vh - 70px) }

  .fullbanner img { opacity: .5 }

  .fullbanner .carousel-caption { padding: 0 60px }
  
  .fullbanner h1 { font-size: 275% } 

  .fullbanner h1 small { font-size: 75% } 

  .fullbanner .carousel-caption > div { font-size: 87.5% }  

}




  
/* differential 
//////////////////////////////////////////////////*/
.differential { padding: calc(var(--padding-wrapper)/2) 0 }

.differential p { 
  opacity: .6;
  margin: 0 }



  

/* about 
//////////////////////////////////////////////////*/
.about { 
  position: relative;
  background: #F3F3F3 url(img/bg-about.webp) no-repeat bottom right } 

.about p { line-height: 1.5 }  

.about-more p { 
  font-size: 87.5% }  

.about-more p:last-child { margin: 0 }  

.about .border-left { border-left: 4px solid var(--color-primary) !important }

.about-stats {
  background: var(--color-secondary);
  color: #FFF }

.about-stats h2 { 
  margin: 0;
  font-size: 500%  }

.about-stats p { 
  margin: 0;
  opacity: .7 }

.about-stats .border { border-color: rgba(255,255,255,.5) !important }  

@media(min-width:768px){

  .about-stats h1 { font-size: 400% }

  .about-values > div > div { width: 20% }
  
}

@media(max-width:767.98px){

  .about { background-position: center right } 

  .about .border-left { border-left: 0 !important }

  .about-stats h2 { font-size: 250%  }

}




  
/* cites 
//////////////////////////////////////////////////*/
.cites .scroll { overflow-x: scroll }

.cites hr {
  margin: 1.75rem auto;
  width: 100px;
  height: 3px;
  background: var(--color-secondary) }

.cites .scroll::-webkit-scrollbar { height: 10px }
 
.cites .scroll::-webkit-scrollbar-track { 
  background: #F3F3F3;
  border-radius: 10px }
 
.cites .scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--color-secondary) }

.cites .scroll::-webkit-scrollbar-thumb:window-inactive { background: var(--color-secondary) }

@media(min-width:768px){
  .cites .scroll > div { min-width: 50% }
}

@media(max-width:767.98px){
  .cites .scroll > div { width: 100% }
}





/* services 
//////////////////////////////////////////////////*/

.services i { 
  position: relative;
  top:0;
  transition: all 300ms  }

.services .row > div > div:hover { 
  box-shadow: inset 1px 2px 3px rgba(0,0,0,0.15);
  background: #F6F6F6 }

.services .row > div > div:hover i { top: -3px }

.services p { margin: 0 }

.services a { color: var(--color-secondary) }

.services p { 
  font-size: 87.5%;
  opacity: .75 }





/* work 
//////////////////////////////////////////////////*/
.work { 
  background: var(--color-primary) url(img/bg-work.webp) center;
  background-size: cover } 
  
@media(min-width:768px){
  .work h1 { font-size: 490% }
  .work h2 { font-size: 225% }
}





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

.post-header small { 
  line-height: 1.4;
  display: block;
  color: #AAA }

.post-header p {
  margin-bottom: 30px;
  line-height: 130%;
  color: var(--color-primary);
  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 }

.inner .posts { background: #EEE }

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

.posts img { border-radius: 7.5px }

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

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

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

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

  .posts a { padding: 15px 30px }

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

  .posts a .ratio {
    float: right;
    background: #FFF;
    padding: 0;
    margin-left: 15px;
    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% }
}

@media(min-width:768px){
  .post-header { 
    width: 800px;
    margin: 0 auto }
  
  .post-body { width: 800px }
  
  .posts .row { margin: 0 -30px }
  .posts .row > * { padding: 0 30px }

}





/* contact 
//////////////////////////////////////////////////*/

.contact a { 
  text-decoration: none }  

@media(max-width:767.98px){
  .contact .border-right { border: 0 !important }
}

.contact .small, .contact small { font-size: 70% !important }

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

.fs-5 { font-size: 112.5% }





/* open-firm 
//////////////////////////////////////////////////*/
/* .open-firm { background: #F3F3F3 url(img/bg-about.jpg) no-repeat right bottom }

.open-firm .form-control { background: #FFF }

@media(max-width:767.98px){
  .open-firm { background: #F3F3F3 }
} */



/* footer 
//////////////////////////////////////////////////*/
footer { 
  font-size: 87.5%;
  background: var(--color-primary);
  color: #FFF }

.footer-summary .container { border-bottom: 1px solid rgba(255,255,255,.2) }

.footer-summary a { color: #FFF }

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

@media(min-width:768px){
  .footer-about { width: 50% }

  .footer-mapsite { 
    width: 50%;
    height: 84px }
  
  .footer-mapsite a { 
    margin-left: 3rem;
    line-height: 1.7;
    white-space: nowrap }
}
  
@media(max-width:767.68px){
  .footer-summary a { 
    margin-bottom: 7.5px;
    display: block }
}






/* form 
//////////////////////////////////////////////////*/
.form-control {
  height: 45px;
  padding: 15px;
  border: 0;
  color: #666;
  box-shadow: inset 0 2px 2px rgba(0,0,0,0.075);
  background: #F3F3F3 }

.custom-control label { cursor: pointer }

.custom-control-input:checked~.custom-control-label::before {
  border-color: #ED323E;
  background-color: #F78D1A}

.custom-switch .custom-control-label::before { 
  height: 1.25rem }

.custom-switch .custom-control-label::before { 
  width: 2rem;
  border-radius: .75rem }

.custom-switch .custom-control-label::after {
  width: calc(1.25rem - 4px);
  height: calc(1.25rem - 4px) }

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

.btn-light { background: #EBEBEB }

.btn-link {
  text-transform: none;
  font-weight: normal;
  color: var(--color-secondary) !important }

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

.btn-primary-outline {
  border: 1px solid var(--color-primary) !important;
  color: var(--color-primary) !important } 

.btn-primary-outline:hover,
.btn-primary-outline:focus,
.btn-primary-outline:active {
  background: var(--color-primary) !important;
  color: #FFF !important } 
  
.btn-white {
  background: #FFF;
  color: var(--color-secondary) !important }

.btn-secondary {
  background: var(--color-secondary) !important;
  color: #FFF !important }  

.btn-secondary-outline {
  border: 1px solid var(--color-secondary) !important;
  color: var(--color-primary) !important }  

.btn-secondary-outline:hover,
.btn-secondary-outline:active,
.btn-secondary-outline:focus {
  background: var(--color-primary) !important;
  color: #FFF !important }  

.btn-green {
  background: #31BE42;
  color: #FFF !important }  

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

.btn-green-outline:hover,
.btn-green-outline:active,
.btn-green-outline:focus {
  background: #31BE42 !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:active,
.btn:hover,
.btn:focus { box-shadow: inset 0 0 100px rgba(255,255,255,0.2) }





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



/* aspects ratio
//////////////////////////////////////////////////*/
.ratio {
  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-9p16 { padding-top: 177% }

.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 }

@media(max-width:767.98px){
  .delay-xs-0 { animation-delay: initial !important }
}




.parallax {
  display: block;
  min-height: 100%;
  position: relative;
  overflow: hidden }

.parallax img { position: absolute }





/* SVG ICONS
//////////////////////////////////////////////////////////////////////////////////////////*/
.icon { 
  display: inline-block;
  position: relative}

.icon-16 { width: 16px; height: 16px }
.icon-24 { width: 24px; height: 24px }
.icon-32 { width: 32px; height: 32px }
.icon-48 { width: 48px; height: 48px }
.icon-64 { width: 64px; height: 64px }
.icon-96 { width: 96px; height: 96px }

.icon-color-primary   { fill: var(--color-primary) }
.icon-color-secondary { fill: var(--color-secondary) }
.icon-color-white     { fill: #FFF }
.icon-whatsapp        { fill: #03B35B }





/* CSS ICONS
//////////////////////////////////////////////////////////////////////////////////////////*/
.icon-css,
.icon-about { 
  display: inline-block;
  background:url("img/icons.webp") top left no-repeat; }

.icon-about { background:url("img/icon-about.png") top left no-repeat }

.icon-s7 { width:35px; height:38px; background-position:0 0; }
.icon-s6 { width:33px; height:38px; background-position:0 -38px; }
.icon-s5 { width:35px; height:38px; background-position:0 -76px; }
.icon-s3 { width:38px; height:38px; background-position:0 -114px; }
.icon-s4 {  width:35px; height:38px; background-position:0 -152px; }
.icon-s2 { width:30px; height:38px; background-position:0 -190px; }
.icon-s1 { width:30px; height:38px; background-position:0 -228px; }

.icon-adv1{ width:59px; height:59px; background-position:0 -266px; }
.icon-adv2{ width:52px; height:59px; background-position:0 -443px; }
.icon-adv3{ width:47px; height:59px; background-position:0 -384px; }
.icon-adv4{ width:50px; height:59px; background-position:0 -325px; }

.icon-about5{ width:50px; height:61px; background-position:0 0; }
.icon-about2{ width:53px; height:61px; background-position:0 -61px; }
.icon-about1{ width:44px; height:61px; background-position:0 -122px; }
.icon-about3{ width:66px; height:61px; background-position:0 -183px; }
.icon-about4{ width:57px; height:61px; background-position:0 -244px; }






.btn-whatsapp2 {
  background: rgba(40, 167, 69,1);
  padding: .5rem;
  border-radius: 100%;
  right: 1.25rem;
  bottom:  1.25rem;
  transition-duration: 0.5s !important;
  animation: pulse-shadow 3s infinite !important;
  z-index: 10000;
}

@-webkit-keyframes pulse-shadow {
  0% {
      -webkit-box-shadow: 0 0 0 0 rgba(40, 167, 69,1);
  }

  70% {
      -webkit-box-shadow: 0 0 0 20px rgba(40, 167, 69, 0);
  }

  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
  }
}