:root {
  --color-primary: #2195A8;
  --color-secondary: #E5AC10;
  --color-light: #F7F7F7;
  --color-white: #FFF;
  --color-default: #444;
  --color-primary-dark: #0F424A;
  --color-dark: #111;
  --header-height: 125px;
  --gradient: linear-gradient(60deg, 
              var(--color-primary) 30%, 
              var(--color-secondary) 70%) }

.color-primary    { color: var(--color-primary) !important }
.color-secondary  { color: var(--color-secondary) }
.color-white      { color: var(--color-white) }
.color-default    { color: var(--color-default) }

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

.bg-secondary,
.nav-pills .nav-link.active, 
.nav-pills .show>.nav-link { background: var(--color-secondary) !important }

.bg-light        { background: var(--color-light) !important }
.bg-white        { background: var(--color-white) }
.bg-dark         { background: var(--color-dark) }
.bg-gradient     { background: var(--gradient) !important  }

body { 
  overflow-x: hidden;
  position: relative;
  font-family: "Poppins", Sans-serif;
  font-size: clamp(.875rem, .5rem + .625vw, 1rem);
  font-weight: 400;
  color: var(--color-default) }

a { text-decoration: none }

a:hover { text-decoration: underline }


 


/* wrapper 
//////////////////////////////////////////////////*/
.wrapper { 
  padding-top: clamp(6rem, 10vw, 12rem);
  padding-bottom: clamp(6rem, 10vw, 12rem)  }

@media(max-width:1440px){
  .container-xxl { padding: 0 2rem }
}

@media(max-width:767.98px){
  section { overflow-x: hidden }
  [class*="container"] { padding: 0 2.5rem }
}




/* heading/texts
//////////////////////////////////////////////////*/
h1 { 
  text-transform: uppercase;
  font-weight: lighter;
  line-height: 1;
  margin-bottom: clamp(1rem, 1rem + 2vw, 3rem);
  font-size: clamp(200%, 5vw, 375%) }

h2 { 
  font-weight: bold;
  margin-bottom: clamp(1rem, 1rem + 2vw, 2rem);
  font-size: clamp(175%, 5vw, 250%) }

h3 { 
  font-weight: bold;
  margin-bottom: clamp(1rem, 1rem + 2vw, 1.5rem);
  font-size: clamp(112.5%, 5vw, 150%) }

h4 { 
  font-weight: bold;
  margin-bottom: clamp(1rem, 1rem + 2vw, 1.25rem);
  font-size: clamp(100%, 5vw, 115%) }

li { margin-bottom: .5rem }

p { 
  font-size: clamp(87.5%, 2vw, 100%);
  margin-bottom: clamp(1rem, 1rem + 2vw, 1.5rem) }

@media(max-width:767.98px){
  .fs-3 { font-size: 120% !important }
}





/* header 
//////////////////////////////////////////////////*/
header { 
  padding: 0 !important;
  background: #FFF}

header .navbar-brand { 
  padding: 0;
  margin: 0 }

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

header .nav-link {
  text-decoration: none;
  top: 0;
  margin: 0;
  transition: all 300ms;
  position: relative;
  color: var(--color-default) !important }

header .nav-link span { display: block }

header .nav-link.active,
header .nav-link:hover { color: var(--color-primary) !important }

header .nav-link:hover { top: -5px }

header .border-bottom { border-bottom-color: rgba(255,255,255,.25) !important }

.header-social a { 
  transition: all 300ms;
  opacity: .5 }
  
.header-social a:hover { opacity: 1 }

.navbar-toggler { 
  border: 0;
  width: 2rem;
  font-size: 100%;
  padding: 0 }

.navbar-toggler .navbar-toggler-icon { 
  width: 100%;
  height: 4px }

.navbar-toggler .navbar-toggler-icon,
.navbar-toggler .navbar-toggler-icon:before,
.navbar-toggler .navbar-toggler-icon:after { 
  display: block;
  border-radius: 10px;
  background: var(--color-primary) !important }

.navbar-toggler .navbar-toggler-icon:before,
.navbar-toggler .navbar-toggler-icon:after { 
  position: relative;
  height: 4px;
  content: '' }

.navbar-toggler .navbar-toggler-icon:before { top: -10px }
.navbar-toggler .navbar-toggler-icon:after  { bottom: -6px }

header .navbar-brand img { 
  max-width: clamp(80%, 80% + 1vw, 100%);;
  max-height: 100px }

@media(min-width:992px){ 

  header > div { height: var(--header-height) }

  header.navbar-expand-lg .navbar-nav .nav-link { 
    font-size: clamp(80%, 1.25vw, 100%);
    padding-left: clamp(.25rem, 1vw, 1rem);
    padding-right: clamp(.25rem, 1vw, 1rem) }

  header .nav-link:last-child { padding-right: 0 !important }
}

@media(max-width:991.98px){

  header > div { height: calc(var(--header-height)*.75) }

  /* header [class*="container"] { padding: 0 1rem } */

  header .navbar-brand { width: 75% }

  header .navbar-collapse { 
    background: var(--color-primary-dark);
    width: 100%;
    height: 100%;
    position: fixed;
    overflow-y: scroll;
    z-index: 3;
    top: 0;
    left: 0  }

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

  header .nav-item { 
    color: #FFF !important;
    text-align: center;
    width: 100%;
    line-height: 2rem;
    font-size: 125% }

  .header-social a { opacity: 1 }

}





  

/* hero
//////////////////////////////////////////////////*/
.hero-inner {
  background: var(--color-primary-dark);
  position: relative;
  height: calc(100vh - var(--header-height)) }
  
.hero-item,
.hero-cover { height: 100% }

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

.hero-caption { 
  color: #FFF;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,calc(-50% + var(--header-height)/2)) }

.hero-caption-eyebow  { 
  position: relative;
  z-index: 1;
  line-height: 1;
  font-size: clamp(150%, 3vw, 250%) }  

.hero-caption-display { 
  letter-spacing: -3px;
  line-height: 1;
  font-weight: lighter;
  font-size: clamp(275%, 7vw, 400%) }  

.hero-caption-summary {
  line-height: 1.25; 
  font-weight: lighter;
  font-size: clamp(100%, 7vw, 150%);
  margin-bottom: 3rem }

.hero .carousel-indicators {
  justify-content: start;
  align-items: flex-start;
  margin: 0;
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 5 }  

.hero .carousel-indicators li {
  border: 0;
  width: 15px;
  height: 15px;
  margin: 0 5px 0 0;
  border-radius: 5px;
  background: var(--color-primary) } 

@media(max-width:1650px){

  .hero-caption { width: 75% }

}

@media(max-width:1280px){

  .hero .carousel-indicators { padding: 0 15px }
  .hero-caption-display { letter-spacing: -2px }

}

@media(max-width:991.98px){

  .hero-inner { height: calc(100vh - (var(--header-height)*.75)) }

  .hero-cover { opacity: .5 }

}

@media(max-width:768px){

  .hero-caption {  transform: translate(-50%,calc(-50% + var(--header-height)/4)) }

  .hero-caption-display { letter-spacing: -1px }

  .hero .btn { width: 100% }

}

  



/* heading triangles
//////////////////////////////////////////////////*/
@media(max-width:768px) { :root { --triangles-size: 10vw  } }
@media(min-width:769px) { :root { --triangles-size: 7vw   } }
@media(min-width:1366px){ :root { --triangles-size: 100px } }

@keyframes floatx {
  0%    { transform: translateX(0px) scaleX(.866); }
  50%   { transform: translateX(1vw) scaleX(.866); }
  100%  { transform: translateX(0px) scaleX(.866); }
}

@keyframes floaty {
  0%    { transform: translateY(0px) scaleX(.866); }
  50%   { transform: translateY(1vw) scaleX(.866); }
  100%  { transform: translateY(0px) scaleX(.866); }
}


h1.custom { 
  position: relative;
  padding-left: calc(var(--triangles-size)*1.36) }

h1.custom i { position: absolute }

h1.custom b { position: relative }

h1.custom i { 
  height: calc(var(--triangles-size) + var(--triangles-size)/2.5);
  top: 50%;
  left: 2px;
  transform: translate(0, -50%);
  padding-left: calc(var(--triangles-size)*.16) }

h1.custom b::after,
h1.custom i::after,
h1.custom i::before {
  line-height: 1;
  z-index: 2;
  position: absolute;
  content: '►';
  font-size: var(--triangles-size) }  

h1.custom i::before { 
  animation: floatx 5.5s ease-in-out infinite;
  color: var(--color-primary) }

h1.custom i::after { 
  animation: floatx 6s ease-in-out infinite;
  top: calc(var(--triangles-size)*0.32);
  left: calc(var(--triangles-size)*0.32);
  color: var(--color-secondary) }

h1.custom b::after { 
  z-index: 1;
  animation: floaty 6.5s ease-in-out infinite;
  top: calc(var(--triangles-size)*-0.56);
  left: calc(var(--triangles-size)*-0.56);
  color: #FFF;
  text-shadow: 0 0 1px rgba(0,0,0,.8);
  font-size: calc(var(--triangles-size)*2) }

.bg-light h1.custom b::after    { color: var(--color-light) }

.bg-primary h1.custom b::after  { 
  text-shadow: 0 0 1px rgba(255,255,255,.8);
  color: var(--color-primary) }

.bg-primary h1.custom i::before { color: #FFF }




/* benefits 
//////////////////////////////////////////////////*/
.benefits .row > div { line-height: 1.4 }


/* portfolio 
//////////////////////////////////////////////////*/




/* posts 
//////////////////////////////////////////////////*/




/* cases 
//////////////////////////////////////////////////*/
:root { --case-triangle-base: 30vw }

.cases h1 { 
  /* padding-right: calc(var(--triangles-size)*1.25); */
  padding-left: 0 }

.cases h1.custom i { 
  right: 0;
  transform: translate(0, -50%) scale(-1, 1) }

/* .cases .clip { 
  background: #FFF;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 25px rgba(0,0,0,0.1) } */

.cases .ratio { 
  background: #FFF;
  position: relative;
  z-index: 2 }

@media(min-width:768px){

  /* .cases {
    background: url(img/bg-cases.jpg) no-repeat center;
    background-size: auto  100% } */

  .cases .cases-nav {
    position: absolute;
    right: 0;
    z-index: 1000 }  

  /* .cases .clip { 
    width: calc(var(--case-triangle-base) + 50px);
    height: calc(var(--case-triangle-base) + 50px);
    margin-top: -13vw !important;
    padding: 25px 25px 25px 35px }

  .cases .clip,
  .cases .clip img {
    -webkit-clip-path: polygon(15% 50%, 100% 100%, 100% 0);
    clip-path: polygon(15% 50%, 100% 100%, 100% 0) }

  .cases .clip img {
    width: var(--case-triangle-base);
    height: var(--case-triangle-base);
    object-fit: cover } */

  .cases .ratio { margin-top: -11vw !important }  

}


@media(min-width:768px) and (max-width:1024px){
/* 
  .cases { 
    background: url(img/bg-cases.jpg) no-repeat -150px center ;
    background-size: cover } */

  .cases .ratio { margin-top: -13vw !important }  

}





/* footer 
//////////////////////////////////////////////////*/
footer .wrapper { padding: clamp(3rem, 10vw,6rem) 0 }

.footer-mapsite a { color: var(--color-default) }
.footer-mapsite > div > div:first-child a:last-child { display: none }

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

footer .brand-flexpoint.brand-white { background: url(https://www.flexpoint.com.br/addons/flexpoint-site-sign.png) top }  
footer .brand-flexpoint.brand-pb    { background: url(https://www.flexpoint.com.br/addons/flexpoint-site-sign.png) center }  

@media(min-width:992px){
  .footer-mapsite { font-size: 87.5% }
  
  .footer-mapsite > div > div:first-child { height: 75px }
}


  

/* form elements
//////////////////////////////////////////////////*/
::placeholder  { 
  color: var(--color-primary);
  font-size: 80%  }

.form-select-lg { 
  color: var(--color-default);
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: 100% }  

.btn { 
  text-decoration: none !important;
  padding: .75rem 1.25rem;
  border: 0 }

.btn-sm { 
  font-size: 87.5%;
  padding: .50rem 1rem }

.btn-lg { padding: 1.25rem 1.5rem }

.btn-primary    { background: var(--color-primary) !important } 
.btn-secondary  { background: var(--color-secondary) !important } 
.btn-link       { color: var(--color-primary) !important } 

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

.btn-primary-outline:hover,
.btn-primary-outline:focus,
.btn-primary-outline:active {
  background: var(--color-primary);
  color: #FFF } 
  
.btn-secondary-outline {
  border: 2px solid var(--color-secondary);
  color: var(--color-secondary) }  

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

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

.btn-whatsapp-outline {
  border: 2px solid #31BE42;
  color: #31BE42 }  

.btn-whatsapp-outline:hover,
.btn-whatsapp-outline:active,
.btn-whatsapp-outline:focus {
  background: #31BE42;
  color: #FFF }  

.btn-light-outline {
  border: 3px solid #999;
  color: #999 }  

.btn-light-outline:hover,
.btn-light-outline:active,
.btn-light-outline:focus {
  background: #999;
  color: #FFF }  

.btn-white {
  background: #FFF;
  color: #999 }  

.btn-white:hover,
.btn-white:active,
.btn-white:focus { background: none }  

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

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

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

@media(max-width:767.98px){
  .btn-block { width: 100% }
}


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



/* aspects ratio
//////////////////////////////////////////////////*/
/*.ratio > img { object-fit: cover }*/

[class~="ratio"]{
  position: relative;
  overflow: hidden;
  display: block }

[class~="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 }

.duration100  { animation-duration: 100ms !important }
.duration200  { animation-duration: 200ms !important }
.duration300  { animation-duration: 300ms !important }
.duration400  { animation-duration: 400ms !important }
.duration500  { animation-duration: 500ms !important }
.duration600  { animation-duration: 600ms !important }
.duration700  { animation-duration: 700ms !important }
.duration800  { animation-duration: 800ms !important }
.duration900  { animation-duration: 900ms !important }
.duration1000 { animation-duration: 1000ms !important }
.duration2000 { animation-duration: 2000ms !important }
.duration3000 { animation-duration: 3000ms !important }
.duration4000 { animation-duration: 4000ms !important }
.duration5000 { animation-duration: 5000ms !important }
.duration6000 { animation-duration: 6000ms !important }
.duration7000 { animation-duration: 7000ms !important }
.duration8000 { animation-duration: 8000ms !important }
.duration9000 { animation-duration: 9000ms !important }
.duration10000 { animation-duration: 10000ms !important }
.duration20000 { animation-duration: 20000ms !important }
.duration30000 { animation-duration: 30000ms !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-fluid { width: 100% }

.icon.color-primary   { fill: var(--color-primary) }
.icon.color-secondary { fill: var(--color-secondary) }
.icon.color-default   { fill: var(--color-default) }
.icon.text-white      { fill: #FFF }
.icon-whatsapp        { fill: #03B35B }
.icon.text-black-50   { opacity: .5 }
.icon.text-black-25   { opacity: .25 }




/* CSS SPRITES
//////////////////////////////////////////////////*/
.icon-benefits { 
  display: inline-block;
  position: relative;
  background: url("img/icons-benefits.png") top left no-repeat }

.icon-b5{ width:103px; height:102px; background-position:0 0; }
.icon-b2{ width:92px; height:102px; background-position:0 -102px; }
.icon-b6{ width:105px; height:102px; background-position:0 -204px; }
.icon-b4{ width:103px; height:102px; background-position:0 -306px; }
.icon-b3{ width:109px; height:102px; background-position:0 -408px; }
.icon-b1{ width:106px; height:102px; background-position:0 -510px; }