:root {
  --color-primary: #64C332;
  --color-secondary: #FF7F00;
  --color-light: #F2F4F9;
  --color-dark: #222;
  --header-height: 120px }

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

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

body { 
  overflow-x: hidden;
  position: relative;
  font-family: "Outfit", Sans-serif;
  font-size: 12pt;
  font-weight: 400;
  color: #333 }

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

a { text-decoration: none }

a:hover { text-decoration: underline }

@media(max-width:992px){
  .inner { padding-top: 86px }
}



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

header { 
  top: 0;
  z-index: 5;
  width: 100% }

header .nav-link {
  text-decoration: none;
  top: 0;
  margin: 0;
  transition: all 300ms;
  text-align: center;
  position: relative;
  color: rgba(255,255,255,.5) }

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

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

@media(min-width:992px){ 

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

  header.position-absolute,
  header.fixed-top { transition: all 500ms }

  .inner header,
  header.fixed-top {  background: rgba(0,0,0,.85) }
  
  header.fixed-top .nav-link { color: rgba(255,255,255,1) !important }
  header .nav-link span { display: block }
  
  header .nav-link .icon-css:nth-child(1) { opacity: .5 }
  header .nav-link .icon-css:nth-child(2) { display: none }
  
  header .nav-link.active,
  header .nav-link:hover { color: #FFF }
  
  header .nav-link:hover { top: -5px }
  
  header .nav-link.active .icon-css:nth-child(1),
  header .nav-link:hover .icon-css:nth-child(1) { display: none }
  
  header .nav-link.active .icon-css:nth-child(2),
  header .nav-link:hover .icon-css:nth-child(2) { display: inline-block }

}

@media(min-width:1280px){
  header .nav-link { padding: 0 1.5rem !important }
}

@media(min-width:992px) and (max-width:1278.98px){
  header .nav-link { 
    font-size: 87.5%;
    padding: 0 1rem !important }
}

@media(max-width:991.98px){

  header { position: absolute !important }

  .inner header { background: var(--color-dark) }

  header .navbar-collapse { 
    background: var(--color-secondary);
    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 { 
    text-align: center;
    width: 100%;
    line-height: 2rem }

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

  header .nav-link .icon-css { display: none }

  .header-social.border-start { border: 0 !important }

  .header-social a { opacity: 1 }

}



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

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



/* heading/texts
//////////////////////////////////////////////////*/
h1, h2, h3, h4, h5, h6 { 
  font-family: "Epilogue", sans-serif;
  font-weight: bold !important }

h1 { 
  margin-bottom: clamp(1rem, 1rem + 2vw, 3rem);
  font-size: clamp(150%, 5vw, 200%) }

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

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

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

li { margin-bottom: .5rem }

p { margin-bottom: clamp(1rem, 1rem + 2vw, 1.5rem) }




  

/* hero
//////////////////////////////////////////////////*/
.hero-inner {
  position: relative;
  height: 100vh }
  
.hero-item { height: 100% }

.hero-cover { height: 100% }

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

.hero-caption { 
  z-index: 2;
  font-family: "Epilogue", sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,calc(-50% + var(--header-height)/2)) }

.hero-caption-eyebow  { 
  line-height: 1;
  font-weight: bold;
  font-size: 160% }  

.hero-caption-display { 
  margin-bottom: 5rem;
  letter-spacing: -10px;
  line-height: .70;
  font-weight: bold;
  font-size: clamp(400%, 15vw, 1225%) }  

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

  .hero-caption { width: 70% }

}

@media(max-width:1280px){

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

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

}

@media(max-width:768px){

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

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

}

  



/* about 
//////////////////////////////////////////////////*/
.about-members { 
  z-index: 1;
  position: relative;
  font-size: 0 }

/* @media(min-width:1400px)    { :root { --width: 140px; --margin: -1rem } }
@media(max-width:1399.98px) { :root { --width: 125px; --margin: -1rem } }
@media(max-width:1199.98px) { :root { --width: 100px; --margin: -.75rem } }
@media(max-width:991.98px)  { :root { --width: 70px;  --margin: -.5rem } }
@media(max-width:767.98px)  { :root { --width: 125px; --margin: -1rem  } }
@media(max-width:425px)     { :root { --width: 94px;  --margin: -.7rem } }
@media(max-width:414px)     { :root { --width: 88px;  --margin: -.6rem } }
@media(max-width:394px)     { :root { --width: 84px;  --margin: -.6rem } }
@media(max-width:375px)     { :root { --width: 80px;  --margin: -.6rem } }
@media(max-width:360px)     { :root { --width: 70px;  --margin: -.5rem } }
@media(max-width:320px)     { :root { --width: 67px;  --margin: -.5rem } }

.about-members > div > div { 
  margin: 0 var(--margin);
  width: var(--width);
  height: calc(var(--width) * .9);
  display: inline-block;
  transition: 300ms;
  position: relative;
  overflow: hidden;
  cursor: pointer }

.about-members > div:nth-child(2),
.about-members > div:nth-child(4),
.about-members > div:nth-child(5n+2),
.about-members > div:nth-child(5n+4) { top: calc(var(--width) * .45) }  

.about-members img {
  transition: 300ms;
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: rgba(0,0,0,.4);
  -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  filter: grayscale(1) } */



  
:root { 
  --width: 20%;
  --margin: calc(var(--width)/-6.25) }

.about-members > div > div { 
  transition: 300ms;
  
  display: inline-block;
  position: relative;
  
  margin: 0 var(--margin);
  width: calc(var(--width) + var(--margin)*-2);
  padding-top: calc(var(--width) * 1.125) }

.about-members > div > div:nth-child(even) { transform: translate(0,50%) }

.about-members > div > div:hover { 
  z-index: 1;
  overflow: visible }

.about-members > div > div img {
  transition: 300ms;
  
  width: 100%;
  height: 100%;
  object-fit: cover;
  
  position: absolute;
  top: 0;
  left: 0;

  filter: grayscale(1);
  -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%) }

.about-members > div > div:hover img { 
  transform: scale(2);
  filter: grayscale(0) }

.about-members .info {
  font-size: 12pt;
  transition: 300ms;
  top: calc(100% + 4rem);
  opacity: 0 }

.about-members .info,
.about-members .info:before { 
  left: 50%;
  transform: translate(-50%, 0) }

.about-members .info:before { 
  content: '';
  position: absolute;
  top: -7px;
  width: 0; 
  height: 0; 
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid var(--color-primary) }

.about-members > div > div:hover .info { 
  top: calc(100% + 3.5rem);
  background: var(--color-primary);
  width: calc(var(--width) * 7.5);
  min-width: 120px;
  opacity: 1  }

@media(min-width:1280px){
  .about-members { margin: -3rem 0 }
}



/* services 
//////////////////////////////////////////////////*/
.services { background: var(--color-light) }




/* posts 
//////////////////////////////////////////////////*/
.posts {
  background: rgb(255,255,255);
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(242,244,249,1) 100%) }




/* work 
//////////////////////////////////////////////////*/
@media(min-width:768px){
  .home .work .row > div:first-of-type { padding: 5.5rem }
}
@media(max-width:767.98px){
  .home .work { padding: 0 1.5rem }
  .home .work .row > div:first-of-type { padding: 2.5rem 1rem }
}




/* local 
//////////////////////////////////////////////////*/
#svg-map path { 
  fill:var(--color-primary);	
  transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out; }
  
#svg-map text { 
  fill:#fff; 
  font: 65% "Poppins", Sans-serif; 
  cursor: pointer }

#svg-map a{ text-decoration:none; }

#svg-map a:hover { 
  cursor:pointer; 
  text-decoration:none }

#svg-map a:hover path{ 
  fill: var(--color-secondary) !important; 
  color:#FFF!important; }

#svg-map .circle { fill:var(--color-secondary) }

#svg-map a:hover .circle { 
  fill:var(--color-secondary) !important; 
  cursor:pointer }





/* footer 
//////////////////////////////////////////////////*/
.basesite,
footer { padding: 5rem 0 }

.basesite a { 
  line-height: 2;
  color: #FFF }

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

  .mapsite { height: 64px }
  
  .mapsite a { 
    opacity: .75;
    margin-right: 3rem }

  .mapsite a:hover { opacity: 1 }

}


  

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

.btn { 
  text-decoration: none !important;
  font-weight: bold;
  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) }




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



/* aspects ratio
//////////////////////////////////////////////////*/
[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.color-primary   { fill: var(--color-primary) }
.icon.color-secondary { fill: var(--color-secondary) }
.icon.text-white      { fill: #FFF }
.icon-whatsapp        { fill: #03B35B }




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

.icon-products{ width:38px; height:44px; background-position:0 -56px; }
.icon-work{ width:43px; height:40px; background-position:0 -100px; }
.icon-about{ width:40px; height:42px; background-position:0 -196px; }

.icon-s2{ width:72px; height:68px; background-position:0 -266px; }
.icon-s3{ width:69px; height:68px; background-position:0 -334px; }
.icon-s1{ width:69px; height:68px; background-position:0 -402px; }

.icon-local{ width:28px; height:42px; background-position:0 -470px; }
.icon-contact{ width:40px; height:42px; background-position:0 -512px; }
.icon-blog{ width:42px; height:42px; background-position:0 -554px; }
.icon-style{ width:44px; height:42px; background-position:0 -596px; }

.icon-menu-about{ width:27px; height:28px; background-position:0 -750px; }
.icon-menu-about2{ width:27px; height:28px; background-position:0 -862px; }
.icon-menu-style{ width:28px; height:28px; background-position:0 -638px; }
.icon-menu-style2{ width:28px; height:28px; background-position:0 -778px; }
.icon-menu-blog{ width:29px; height:28px; background-position:0 -666px; }
.icon-menu-blog2{ width:29px; height:28px; background-position:0 -806px; }
.icon-menu-loja{ width:30px; height:28px; background-position:0 -694px; }
.icon-menu-loja2{ width:30px; height:28px; background-position:0 -238px; }
.icon-menu-contact{ width:27px; height:28px; background-position:0 -722px; }
.icon-menu-contact2{ width:27px; height:28px; background-position:0 -834px; }
.icon-menu-products2{ width:24px; height:28px; background-position:0 0; }
.icon-menu-products{ width:24px; height:28px; background-position:0 -28px; }
.icon-menu-work2{ width:30px; height:28px; background-position:0 -140px; }
.icon-menu-work{ width:30px; height:28px; background-position:0 -168px; }
  

img[width]{
  width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height) }