:root {
  --color-default: #777;
  --color-primary: #244152;
  --color-secondary: #00C484;
  --color-dark: #182C36;
  --color-light: #F8F8F8;/*#F2F3F4*/
  --color-light-dark: #EEE;
  --header-height: 200px }

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

.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-light-50          { background: rgba(245,245,245,.75) }

.bg-gradient {
  background: rgb(0,196,132);
  background: linear-gradient(180deg, rgba(0,196,132,1) 0%, rgba(34,66,83,1) 100%) !important }

html, body { height: 100% }

body { 
  overflow-x: hidden;
  position: relative;
  font-family: "Poppins", Sans-serif;
  font-size: 12pt;
  font-weight: 500;
  
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  color: var(--color-default) }
  
body.home{
  background-color: var(--color-light);
}

a { text-decoration: none }

a:hover { text-decoration: underline }


 


/* wrapper 
//////////////////////////////////////////////////*/
section,
.wrapper { padding: clamp(4rem, 10vw, 16rem) 0 }

.inner .wrapper,
.inner main,
.inner section:not(footer section) { padding: clamp(2.5rem, 10vw, 5rem) 0 }

.wrapper-sm { padding: clamp(4rem, 5vw, 8rem) 0 }

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

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

  .container .px-3.bg-body,
  .container .px-3.bg-white { 
    border-radius: 0 !important;
    margin: 0 -2rem;
    padding-left: 2rem !important;
    padding-right: 2rem !important   }
}





/* heading/texts
//////////////////////////////////////////////////*/
h1, .h1 { 
  margin-bottom: clamp(1rem, 1rem + 2vw, 2rem);
  font-size: clamp(200%, 3vw, 300%) }
 
.inner h1 { font-size: clamp(175%, 3vw, 250%) }

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

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

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

h5, .h5 { 
  font-size: clamp(112.5%, 3vw, 125%) }

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

li { margin-bottom: .5rem }

.box-shadow-b { box-shadow: 0 2rem 2rem -1rem rgba(30,80,88, .5)}

.small-sm { font-size: clamp(75%, 1vw, 80%) }





/* header 
//////////////////////////////////////////////////*/
.home header {
  width: 100%;
  align-items: center;
  position: absolute !important;
  top: 0;
  z-index: 2 }

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

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

header .navbar-brand img { max-width: 100%}

/* 
bartop

header > div:first-child > div { font-size: clamp(70%, 1.25vw, 87.5%) }
header .border-bottom { border-bottom-color: rgba(255,255,255,.25) !important }
*/

header .nav-link {
  font-size: clamp(87.5%, 1.25vw, 100%);
  background: 
      linear-gradient(currentColor 0 0) 
      100% 0  /var(--d, 0) 3px 
    no-repeat;
  transition:0.5s;
  margin: 0;

  padding-left: 0 !important;
  padding-right: 0 !important;
  text-decoration: none;
  margin: 0;
  color: #FFF }

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

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

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

.dropdown-item.active, 
.dropdown-item:active { background-color: var(--color-primary) }

@media(min-width:992px){
  header { height: var(--header-height) }
  
  .inner header .nav-link { color: var(--color-primary) }

  header .dropdown-menu {
    left: 50% !important;
    top: calc(100% + 1rem);
    transform: translate(-50%,0)
  }
}

@media(max-width:991.98px){

  header { padding: 2rem 0 !important}

  header .navbar-brand { width: 60% }

  header .navbar-collapse { 
    background: var(--color-primary);
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0  }

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

  header .nav-item { 
    text-align: center;
    padding: .75rem 3rem !important; 
    width: 100%;
    font-size: 120% }

  header .dropdown-menu { 
    border: 0;
    border-radius: 0;
    padding: 1rem;
    background: var(--color-light);
    text-align: center }

  header .dropdown-menu .nav-item { 
    padding: .5rem 3rem !important; 
    font-size: 110% }

  header .nav-item .btn { font-size: 100% }

}

@media(max-height:640px){
  header { height: calc(var(--header-height)/1.5)}  
  header .navbar-brand img { height: 50px }  
}




  

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

#hero img { width: 100% }

#hero .hero-caption { 
  z-index: 1;
  position: absolute;
  /* top: calc(var(--header-height) + 3vw); */
  top: 50%;
  left: 50%;
  bottom: auto;
  /* transform: translate(0,-50%); */
  transform: translate(-50%,calc(-50% + var(--header-height)/4));
  }

#hero .carousel-caption h1 { letter-spacing: -3px }  

#hero .carousel-caption p { font-size: clamp(100%, 2vw, 180%) }

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

#hero .carousel-indicators button {
  border: 0;
  width: 2.5rem;
  height: .5rem;
  border-radius: 5px;
  opacity: .25;
  background: var(--color-primary);
  z-index: 1 }  

#hero .carousel-indicators button.active { opacity: 1 }

@media(max-width:1650px){
  /* next/prev distance 
  .hero-caption { width: 75% }*/
}

@media(max-width:1280px){
}

@media(min-width:768px){
  #hero .carousel-indicators {
    left: 50%;
    padding-right: var(--bs-gutter-x,.75rem);
    padding-left: var(--bs-gutter-x,.75rem);
    transform: translate(-50%, 0)}  
}

@media(max-width:767.68px){
  #hero .hero-caption { 
    left: auto;
    right: auto;
    top: auto;
    bottom: 6rem;
    transform: translate(0) }

  #hero .carousel-indicators { 
    bottom: 2rem;
    padding: 0 2rem }
}

@media(max-height:720px){
  #hero .hero-caption h1 { font-size: 350%  }  
  #hero .carousel-indicators { bottom: 7.5rem }
}


@media(max-height:640px){
  #hero .hero-caption { transform: translate(-50%,calc(-50% + var(--header-height)/5));  }  
  #hero .hero-caption h1 { font-size: 320%  }  
  #hero .carousel-indicators { bottom: 3rem }
}




/* features 
//////////////////////////////////////////////////*/
@media(min-width:768px) and (min-height:641px){
  #features {
    position: relative;
    transform: translate(0,-25%); 
  } 
}



/* experience 
//////////////////////////////////////////////////*/
@media(max-width:767.68px){
  #protocol,
  #protocol .wrapper { padding-bottom: 0  } 
}

@media(min-width:992px) and (max-width:1365.98px){
  #protocol img { max-width: 120% !important }
}

@media(min-width:768px) and (max-width:991.98px){
  #protocol img { max-width: 175% !important }
}



/* cites 
//////////////////////////////////////////////////*/
.carousel-nav {
  width: calc(108px + 7rem);
  height: 108px;
  z-index: 1 }

  .inner #feedbacks img { max-width: 96px }

  #feedbacks .row .col img { max-width: 64px }
  
  #feedbacks .row .icon { 
    top:  -1.5rem; 
    left: -1rem; 
    opacity: .05; 
    z-index:  0 }
  
  #feedbacks .row .col p { 
    position: relative; 
    z-index: 1 }  
   
  
  @media(min-width:768px){
    #feedbacks .row .col:nth-child(3),
    #feedbacks .row .col:nth-child(4),
    #feedbacks .row .col:nth-child(9),
    #feedbacks .row .col:nth-child(10),
    #feedbacks .row .col:nth-child(15),
    #feedbacks .row .col:nth-child(16),
    #feedbacks .row .col:nth-child(21),
    #feedbacks .row .col:nth-child(22),
    #feedbacks .row .col:nth-child(27) { width: 50% }
  
    #feedbacks .row .col:nth-child(3) p,
    #feedbacks .row .col:nth-child(4) p,
    #feedbacks .row .col:nth-child(9) p,
    #feedbacks .row .col:nth-child(10) p,
    #feedbacks .row .col:nth-child(15) p,
    #feedbacks .row .col:nth-child(16) p,
    #feedbacks .row .col:nth-child(21) p,
    #feedbacks .row .col:nth-child(22) p,
    #feedbacks .row .col:nth-child(27) p { font-size: 150% }
  }
  


/* categories
//////////////////////////////////////////////////*/
#categories .display-2 {
  color: #FFF;
  /* text-stroke: 2px var(--color-secondary);
  -webkit-text-stroke: 2px var(--color-secondary); */
  text-shadow: 
    2px 2px 0 var(--color-secondary),
    -2px 2px 0 var(--color-secondary),
    -2px -2px 0 var(--color-secondary),
    2px -2px 0 var(--color-secondary),
    2px 0 0 var(--color-secondary),
    -2px 0 0 var(--color-secondary),
    0 -2px 0 var(--color-secondary),
    0 2px 0 var(--color-secondary) 
  }




/* ranking
//////////////////////////////////////////////////*/
#ranking .d-table,
.ranking .d-table { font-size: 11pt }

.ranking-avatar {
  width: 40px;
  height: 40px;
  object-fit: cover }

.ranking-filter .selected .form-control,
.ranking-filter .selected .form-select { 
  color: var(--color-secondary);
  border-color: var(--color-secondary) !important }
  
.ranking-badges { font-size: 80% }

.ranking-badges .btn-close {
  width: .5rem;
  height: .5rem;
  background-size: .5rem }

.ranking-podium-image { height: 32px }

.pagination .page-link { 
  text-decoration: none;
  color: var(--color-secondary) }

.pagination .page-item.active .page-link { 
  color: #FFF;
  border-color: var(--color-secondary);
  background: var(--color-secondary) }

@media(max-width:767.98px) {
  #ranking .d-table,
  .ranking .d-table { font-size: 9pt }

  .ranking-avatar {
    width: 32px;
    height: 32px }

  .ranking-name.fw-bold { font-weight: normal !important }

  .ranking-podium-image { height: 18px }

  #ranking [data-label="Colocação"] .fs-5,
  .ranking [data-label="Colocação"] .fs-5 { font-size: 87.5% !important }

  #ranking .d-table > div,
  .ranking .d-table > div { padding: 0 }

  #ranking .d-table > div > div,
  .ranking .d-table > div > div { padding: .5rem  }

  #ranking .d-table > div > div:first-child, 
  .ranking .d-table > div > div:first-child { 
    color: var(--color-default) !important;
    width: 32px }

}



/* athletes
//////////////////////////////////////////////////*/
#athletes .d-table { font-size: 11pt }

#athletes .pagination .page-link { 
  text-decoration: none;
  color: var(--color-secondary) }

#athletes .pagination .page-item.active .page-link { 
  color: #FFF;
  border-color: var(--color-secondary);
  background: var(--color-secondary) }

@media(max-width:767.98px) {
  #athletes .d-table { font-size: 9pt }

  #athletes .d-table > div { padding: 0 }

  #athletes .d-table > div > div { padding: .5rem }

  #athletes .d-table > div > div:first-child { 
    color: var(--color-default) !important;
    width: auto }

}

@media(min-width:768px) {
  #athletes {
    background: url(img/bg-events.jpg) no-repeat center top;
    background: cover 
  }
}




/* events
//////////////////////////////////////////////////*/
#events .d-table { font-size: 11pt }

#events .pagination .page-link { 
  text-decoration: none;
  color: var(--color-secondary) }

#events .pagination .page-item.active .page-link { 
  color: #FFF;
  border-color: var(--color-secondary);
  background: var(--color-secondary) }

@media(min-width:768px) {
  #events {
    background: url(img/bg-events.jpg) no-repeat center top;
    background: cover 
  }
}

@media(max-width:767.98px) {
  #events .d-table { font-size: 9pt }

  #events .d-table > div { padding: 0 }

  #events .d-table > div > div { padding: .5rem }

  #events .d-table > div > div:first-child { color: var(--color-default) !important }

}





/* d-table
//////////////////////////////////////////////////*/
.d-table > div:first-child { font-size: 80% }           

.d-table > div { 
  overflow: hidden;
  position: relative }

.d-table > div:nth-child(odd){ background: #F9F9F2 }

.d-table > div > div:first-child {
  border-top-left-radius: .5rem;
  border-bottom-left-radius: .5rem }

.d-table > div > div:last-child {
  border-top-right-radius: .5rem;
  border-bottom-right-radius: .5rem }

.d-table > div > div { padding: .5rem 1.5rem } 

@media(min-width:768px){

  .d-table              { display: table }
  .d-table > div        { display: table-row }
  .d-table > div > div  { display: table-cell }

  .d-table > div > .p-md-auto { padding: .5rem 1.5rem !important } 

}

@media(max-width:767.98px){

  .d-table { display: block !important }
  
  .d-table > div:first-child { display: none }
  
  .d-table > div { 
    margin-bottom: .125rem;
    border-radius: .5rem;
    background: #F6F6F6;
    padding: 1rem .5rem }
  
  .d-table > div > div { padding: .125rem .5rem }
  
  .d-table:not(.unlabeled) > div > div:not(.unlabeled):before { 
    font-weight: normal;
    content: attr(data-label)": ";
    color: rgba(0,0,0,.5) }
  
  /* .d-table > div > div:last-child  { 
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem  } */
  
}






/* profile
//////////////////////////////////////////////////*/
.profile-avatar img { 
  width: 156px;
  height: 156px;
  object-fit: cover }

.profile-avatar span { 
  position: absolute;
  top: 0;
  left: 75%;
  border-radius: 100%;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center }

.profile-avatar .bg-platinum  { color: #FFF }
.profile-avatar .bg-diamont   { color: var(--color-default)  }
.profile-avatar .bg-gold      { color: var(--color-default)  }
.profile-avatar .bg-silver    { color: #FFF }
.profile-avatar .bg-bronze    { color: #FFF  }

.profile-progress-text { 
  letter-spacing: .125rem;
  font-size: 75% }

.profile-best-times .d-flex > span {
  height: 0;
  border-bottom: 2px dotted rgba(255,255,255,.5) }

#profile #registros-iniciais p { margin: 0 }

#profile .profile-lastest-times-box-item:not(:last-child) { 
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid rgba(0,0,0,.125) }

.profile-lastest-times-box p  { margin: 0 }

#profile #ranking .d-table { font-size: 10pt !important }

#profile #ranking .d-table > div > div { padding: .5rem }

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

.bg-platinum  { background: #7D7669 }
.bg-diamont   { background: #DCD493 }
.bg-gold      { background: #FEC835  }
.bg-silver    { background: #999  }
.bg-bronze    { background: #E5820A  }

@media(max-width:767.98px){
  .profile-avatar span { left: 60% }
}





/* contact 
//////////////////////////////////////////////////*/
.bg-primary .border-bottom,
.bg-dark .border-bottom { border-bottom-color: rgba(255,255,255,.15) !important }




/* footer 
//////////////////////////////////////////////////*/
footer section { padding: clamp(3.25rem, 10vw, 6.5rem) 0 }

footer section:last-child { padding: 3.25rem 0 }

footer .border-top { border-color: rgba(255,255,255,.3) !important}

#footer-newsletter .form-control,
#footer-newsletter .btn { height: 50px }

#footer-newsletter .btn { padding: 0 1rem }

#footer-mapsite a {
  display: block; 
  line-height: 1.75;
  color: #FFF }

@media(min-width:992px){
  .footer-mapsite { height: 140px }
}

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

footer .brand-flexpoint.brand-black { background-position: bottom }
footer .brand-flexpoint.brand-white { background-position: top }





/* form elements
//////////////////////////////////////////////////*/
.form-control { padding: 1rem 1.5rem }

.btn { 
  font-weight: bold;
  border-radius: .5rem;
  text-decoration: none !important;
  padding: .75rem 2rem;
  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-secondary  { background: var(--color-secondary) !important } 
.btn-link       { color: var(--color-primary) !important } 

.btn-outline-primary {
  box-shadow: inset 0 0 0 1px var(--color-primary);
  color: var(--color-primary) } 

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background: var(--color-primary);
  color: #FFF } 
  
.btn-outline-secondary {
  box-shadow: inset 0 0 0 1px var(--color-secondary);
  color: var(--color-secondary) }  

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

.btn-outline-secondary-dark {
  box-shadow: inset 0 0 0 1px var(--color-secondary-dark);
  color: var(--color-primary) }  

.btn-outline-secondary-dark:hover,
.btn-outline-secondary-dark:active,
.btn-outline-secondary-dark:focus { 
  background: var(--color-secondary-dark);
  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 }  

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

.btn-white-10 { 
  color: #FFF;
  background: rgba(255,255,255,.1) }  

.btn-white-10:hover,
.btn-white-10:active,
.btn-white-10:focus { 
  color: var(--color-default);
  background: rgba(255,255,255,1) }  

.btn-light { background: var(--color-light) }  

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

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

.btn-outline-white:hover,
.btn-outline-white:active,
.btn-outline-white:focus {   }  

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

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

.gap-10 { gap: 6rem }

.ps-10 { padding-left: 6rem }

.ls-1 { letter-spacing: .25rem }

@media(min-width:992px){

  .scroll-x { overflow-x: scroll }

  .pt-md-10 { padding-top: 6rem !important }
  .ps-md-10 { padding-left: 6rem !important }
  .pb-md-10 { padding-bottom: 6rem !important }

  .gap-md-10 { gap: 6rem !important }

  .ps-md-10 { padding-left: 6rem !important }
    
  .g-md-10, 
  .gy-md-10 {
    --bs-gutter-y: 6rem;
  }

  .g-md-10, 
  .gx-md-10 {
    --bs-gutter-x: 6rem;
  }

}




/* scrollbar
//////////////////////////////////////////////////*/
::-webkit-scrollbar { 
  padding: 1px;
  background: var(--color-primary);
  height: .5rem;
  width: .5rem }

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb { 
  padding: 3px }

::-webkit-scrollbar-thumb { background: rgba(255,255,255,.5) }
::-webkit-scrollbar-thumb:hover { background: var(--color-secondary)  }





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

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

  


/* 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,
.icon-image { 
  display: inline-block;
  position: relative }

.icon-12,
.icon-12 img { width: 12px; height: 12px }

.icon-16,
.icon-16 img { width: 16px; height: 16px }

.icon-24,
.icon-24 img { width: 24px; height: 24px }

.icon-32,
.icon-32 img { width: 32px; height: 32px }

.icon-48,
.icon-48 img { width: 48px; height: 48px }

.icon-56,
.icon-56 img { width: 56px; height: 56px }

.icon-64,
.icon-64 img { width: 64px; height: 64px }

.icon-96,
.icon-96 img { width: 96px; height: 96px }

.icon-128,
.icon-128 img { width: 96px; height: 96px }

@media(min-width:768px){
  .icon-md-32 { width: 32px; height: 32px  }
}

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

.icon.text-platinum  { fill: #7D7669; color:#7D7669; }
.icon.text-diamont { fill: #99E5FF; color:#99E5FF;  }
.icon.text-gold { fill: #FEC835; color:#FEC835;  }
.icon.text-silver { fill: #999; color:#999;  }
.icon.text-bronze { fill: #E5820A; color:#E5820A;  }




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

.icon-s9{ width:191px; height:169px; background-position:0 0; }
.icon-s1{ width:168px; height:169px; background-position:0 -169px; }
.icon-s3{ width:198px; height:169px; background-position:0 -338px; }
.icon-s5{ width:167px; height:169px; background-position:0 -507px; }
.icon-s7{ width:212px; height:169px; background-position:0 -676px; }
.icon-s8{ width:196px; height:169px; background-position:0 -845px; }
.icon-s4{ width:198px; height:169px; background-position:0 -1014px; }
.icon-s6{ width:182px; height:169px; background-position:0 -1183px; }
.icon-s2{ width:186px; height:169px; background-position:0 -1352px; }
  
  


/* OTHERS
//////////////////////////////////////////////////////////////////////////////////////////*/
@media(min-width:992px){
  .position-md-absolute { position: absolute }
  .translate-md-middle-y { transform: translateY(-50%)!important }
  .mw-50 { max-width: 50% }
}