body { background: var(--flex-light) }

.inner .wrapper, 
.inner main, 
.inner section {
  padding: calc(5rem + 1vw) 0;
}
.container, 
.container-fluid, 
.container-lg, 
.container-md, 
.container-sm, 
.container-xl, 
.container-xxl {
    --flex-gutter-x: 4rem
}

.bg-gradient-dark {
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%) }

.bg-black { background: rgb(0,0,0); }

/* header {
  position: absolute !important;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  background: #FFF
}     */

.inner header { box-shadow: 0 .75rem 5rem rgba(20,76,92,.1)!important;  }

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

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

.navbar-toggler { 
  border: 0;
  width: 48px;
  height: 48px;
  display: flex;
  gap: .375rem;
  flex-direction: column;
  justify-content: center;
  font-size: 100%;
  padding: .75rem .5rem }

.navbar-toggler .navbar-toggler-icon { 
  width: 100%;
  display: block;
  height: .25rem;
  border-radius: 4px;
  background: var(--flex-dark) !important }

@media(max-width:1199.98px){
    header .navbar-brand img {
      max-width: 60vw;
      max-height: calc(2.5rem + 1.75vw) }
}
  
@media(max-width:991.98px){
    header [class*="container"] { padding: 0 1rem  !important }
  
    header .navbar-collapse { 
      background: var(--flex-dark);
      width: 100%;
      position: fixed;
      z-index: 100000;
      top: 0;
      left: 0  }
  
    header .navbar-nav {
      justify-content: center;
      width: 100%;
      height: 100vh }  
  
    header .nav-link { 
      text-align: center;
      color: var(--flex-primary);
      padding: .75rem 3rem !important; 
      width: 100%;
      font-size: 120% }
  
    header .nav-link:hover,
    header .nav-link:active,
    header .nav-link:focus { color: var(--flex-secondary) !important }
  
    header .nav-item .btn { font-size: 120% }
}


#hero h1 { font-size: clamp(1.5rem, 4rem + 2vw, 3.25vw) }
#hero h1 .display-1,
#hero h1.display-1 { font-size: clamp(3rem, 4rem + 5vw, 6vw) }

#hero .h2 { font-size: clamp(1.5rem, 4rem + 2vw, 3vw) }
#hero h1 .display-2 { font-size: clamp(3rem, 4rem + 3vw, 4vw) }

@media(max-width:767.98px){
  #hero [class*="container"] {
    position: static !important;
    transform: translate(0,0) !important
  }
  #hero h1 { letter-spacing: normal }
}

#crm article {
  position: relative;
  transition: 300ms all }

#crm article:hover {
  z-index: 1;
  transform: scale(1.15);
  background: var(--flex-secondary) !important }

#segments article {
  position: relative;
  transition: 300ms all }

#segments article:hover {
  z-index: 1;
  /* transform: scale(1.15); */
  box-shadow: 0 .75rem 1rem rgba(20,76,92,.075)!important; 
  background: var(--flex-white) !important }


  
@media(min-width:572px){

  .timeline-year {
      width: 160px;
      line-height: .8;
      word-break: break-all }

  #timeline article .timeline-year:before {
      content: " ";
      z-index: 1;
      background: var(--flex-light);
      border-radius: 100%;
      width: 1.5rem;
      height: 1.5rem;
      border: .25rem solid var(--flex-secondary);
      position: absolute;
      right: -.625rem }

  #timeline article .timeline-year:after {
      content: " ";
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      width: .25rem;
      background: var(--flex-secondary);
  }
  
  #timeline article:first-of-type .timeline-year:after {
      height: 50%;
      top: 50%
  }
  
  #timeline article:last-of-type .timeline-year:after {
      height: 50%;
      top: 0
  }

}

.btn-whatsapp,
.btn-whatsapp:hover,
.btn-whatsapp:active,
.btn-whatsapp:focus { 
    color: #FFF !important;
    border-color: #03B35B; 
    background: #03B35B;
}

.shadow { box-shadow: 0 .75rem 1rem rgba(20,76,92,.075)!important; }
/* .text-secondary { text-shadow: 1px 1px 0 rgba(20,76,92,.5) } */

@media(min-width:1024px){
  .ls-n3 { letter-spacing: -3px }
}

strong { font-weight: bold }



/* 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 }

.lds-ring {
  display: inline-block;
  position: relative;
  width: 3rem;
  height: 3rem;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 2rem;
  height: 2rem;
  margin: 8px;
  border: 6px solid var(--flex-primary);
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: var(--flex-primary) transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.modal blockquote {
  font-style: italic;
  margin: 1.5rem 0 1.5rem 1.5rem !important;
  padding-left: 1.5rem !important;
  border-left: 3px solid rgba(0,0,0,0.125)
}

a.whatsapp {
  background: #25d366;
  border-radius: 100%;
  transition: all 300ms;
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  padding: .5rem;
  color: #FFF;
  display: inline-block;
  text-align: center;
  z-index: 10000;
}