:root {
  --color-default: #666;
  --color-primary: #47d5dc;
  --color-primary-dark: #062122;
  --color-secondary: #FF841F;
  --color-light: #F3F3F3;
  --header-height: 140px }

.color-primary        { color: var(--color-primary) }
.color-primary-dark   { color: var(--color-primary-dark) }
.color-secondary      { color: var(--color-secondary) }

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

body { 
  overflow-x: hidden;
  position: relative;
  font-family: "Poppins", Sans-serif;
  font-size: 12pt;
  font-weight: 400;
  color: var(--color-default) }

a { text-decoration: none }

a:hover { text-decoration: underline }

.wrapper { padding: calc(4rem + 3vw) 0 }

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

@media(max-width:767.98px){
  section { overflow-x: hidden }
  .container { padding: 0 2rem }
}

@media (min-width: 1200px){
  .container, 
  .container-lg, 
  .container-md, 
  .container-sm, 
  .container-xl {
      max-width: 1200px !important
  }
}

h1, .h1 { 
  font-weight: lighter;
  margin-bottom: clamp(1rem, 1rem + 2vw, 3rem);
  font-size: clamp(150%, 3vw, 300%) }

h2, .h2 { 
  font-weight: bold;
  margin-bottom: clamp(1rem, 1rem + 2vw, 2rem);
  font-size: clamp(125%, 3vw, 200%) }

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

h4, .h4 { 
  font-weight: bold;
  margin-bottom: clamp(1rem, 1rem + 2vw, 1.25rem);
  font-size: clamp(106.25%, 3vw, 150%) }

h5, .h5 { 
  font-weight: bold;
  font-size: clamp(100%, 3vw, 125%) }

li { margin-bottom: .5rem }

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

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

.home header { 
  z-index: 5;
  position: relative }

.inner header { 
  position: relative;
  z-index: 1;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1) }

header .nav-link {
  line-height: 1.1;
  background: 
      linear-gradient(currentColor 0 0) 
      0 100% /var(--d, 0) 3px 
    no-repeat;
  transition:0.5s;

  padding-left: 0 !important;
  padding-right: 0 !important;
  text-decoration: none;
  margin: 0;
  color: var(--color-default) }

header .nav-link.active,
header .nav-link:hover { 
  --d: 100%;
  color: var(--color-primary) }

.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-secondary) !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 }

@media(min-width:992px){ 

  .inner header { height: var(--header-height) }

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

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

@media(max-width:991.98px){

  header .navbar-brand img { height:60px }

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

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

  header .nav-item { 
    width: 100%;
    line-height: 2rem }

  header .nav-link,
  header .btn { 
    color: #FFF;
    font-size: 130% }

  header .nav-link {
    padding-right: 3rem !important;
    padding-left: 3rem !important }

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

  .header-social a { opacity: 1 }

}
.hero-inner { position: relative }

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

.hero-caption { 
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
 }

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

.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:1280px){

  .hero .carousel-indicators { padding: 0 15px }

}

@media(max-width:768px){

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

  .hero .carousel-indicators { padding: 0 30px }

}

.plans .card { border-radius: 1rem }

.plans .row > div:nth-child(1) .card { background: url(img/bg-plan1.jpg) no-repeat center; background-size: cover }
.plans .row > div:nth-child(2) .card { background: url(img/bg-plan2.jpg) no-repeat center; background-size: cover }
.plans .row > div:nth-child(3) .card { background: url(img/bg-plan3.jpg) no-repeat center; background-size: cover }

.plans .plan-speed  { font-size: clamp(300%, 300% + 5vw, 687.5%) }
.plans .plan-unit   { font-size: clamp(150%, 150% + 5vw, 300%) }

.plans .plan-speed,
.plans .plan-unit { line-height: .75 }

.about .rounded { border-radius: 1rem !important }

@media(max-width:991.98px){

  .plataform .fs-3, 
  .plataform .fs-4 { font-size: 100% !important }

}

.contact .container { z-index: 1 }

@media(min-width:768px){
  .contact img { margin-top: -100px }
}

@media(max-width:767.98px){
  .contact .ratio { margin-top: -100px }
}

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

.footer-mapsite a { 
  line-height: 1.4;
  color: #FFF }

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 }  

::placeholder  { 
  color: var(--color-primary);
  font-size: 80%  }

.btn { 
  font-weight: bold;
  border-radius: 5px;
  text-decoration: none !important;
  padding: 1rem 1.5rem;
  border: 0 }

.btn-sm { 
  font-size: 87.5%;
  padding: .75rem 1.5rem }

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

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

.btn-primary-outline {
  box-shadow: inset 0 0 0 1px 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 {
  box-shadow: inset 0 0 0 1px 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-outline {
  box-shadow: inset 0 0 0 1px var(--color-secondary);
  color: var(--color-primary) }  

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

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

.btn-whatsapp-outline {
  box-shadow: inset 0 0 0 1px #31BE42;
  color: #31BE42 }  

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

.btn-light-outline {
  box-shadow: inset 0 0 0 1px #999;
  color: #999 }  

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

.btn-white { background: #FFF }  

.btn-white:hover,
.btn-white:active,
.btn-white:focus { 
  color: #FFF;
  background: rgba(255,255,255,.3) }  

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

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

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

.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-primary-dark    { fill: var(--color-primary-dark ) }
.icon.color-secondary       { fill: var(--color-secondary) }
.icon.text-white      { fill: #FFF }
.icon-whatsapp        { fill: #03B35B }
.icon-css { 
  display: inline-block;
  position: relative;
  background: url("img/icons.png") top left no-repeat }

.brand-lev{ width:76px; height:34px; background-position:0 0; }
.brand-watch{ width:85px; height:35px; background-position:0 -34px; }
.brand-tv{ width:63px; height:45px; background-position:0 -69px; }
.icon-about1{ width:40px; height:43px; background-position:0 -114px; }
.icon-about2{ width:44px; height:42px; background-position:0 -157px; }
.icon-about3{ width:39px; height:43px; background-position:0 -199px; }

@media(min-width:992px){
  .position-md-absolute { position: absolute }
}
  
.ls-5 { letter-spacing: 5px }  

.setores li { 
  margin: 0 !important;
  background: rgb(71, 213, 220, .1) !important; }

.setores li a { position:relative}

.setores li:hover a:after {
  content: "Enviar currículo";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translate(0,-50%) }

.accordion-button:not(.collapsed) {
  color: var(--color-primary-dark) !important;
  background-color:  rgb(71, 213, 220, .1) !important;
}

.accordion-button:focus {
  z-index: 3;
  border-color: rgb(6, 33, 34, .2);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgb(6, 33, 34, .1);
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2062122'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
  transform: rotate(180deg);
}