:root {
  --color-primary: #243978;
  --color-secondary: #F7662D;
  --color-secondary-dark: #E9470A;
  --color-light: #F6F6F6;
  --color-light-dark: #EEE;
  --color-white: #FFF;
  --color-default: #333;
  --color-dark: #111;
  --color-danger: #f23333;
  --header-height: ; }

  
.progress, 
.progress-stacked {
    --bs-progress-bar-bg: var(--color-secondary) !important;} 

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

.toast-success { background: #28a745 }
.toast-error { background: #dc3545 }

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

.page-link,
.page-link:hover { color: var(--color-primary) }

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

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

a { 
  color: var(--color-primary);
  text-decoration: none }

a:hover { text-decoration: underline }


section,
.inner main,
.wrapper { 
  padding-top: clamp(2.5rem, 10vw, 5rem);
  padding-bottom: clamp(2.5rem, 10vw, 5rem) }




/* heading/texts
//////////////////////////////////////////////////*/
/* h1 { 
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: clamp(1rem, 1rem + 2vw, 3rem);
  font-size: clamp(125%, 5vw, 150%) }

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

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

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

h1.line { 
  display: flex;
  gap: 1.5rem;
  align-items: center;
  width: 100% }

h1.line:after, 
h1.text-center.line:before,
h1.text-center.line:after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: #DDD }

h1.line.line-white:before,
h1.line.line-white:after { background: rgba(255,255,255,.3) }

h1.line.mr-0:after { margin-right: 0 }

@media(max-width:767.98px){
  h1.line.mr-sm-0:after { margin-right: 0 }
}



/* header 
//////////////////////////////////////////////////*/
header.navbar { 
  position: relative;
  z-index: 1000;
  padding: 0 }

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

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

.navbar-user,
.navbar-balance { line-height: 1.3 }

.navbar-search { font-size: 80% }

@media(min-width:1366px){
  .navbar-search { width: 25vw }
}

@media(max-width:1366px){
  .navbar-search { width: 32.5vw }
}

@media(max-width:1024px){
  .navbar-search { width: 27.5vw }
}

header .nav-link {
  margin: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: #FFF !important;
  font-weight: bold;
  text-decoration: none }

header .nav-link.active, 
header .nav-link:hover { 
  box-shadow: inset 10px 0 10px rgba(0,0,0,0.15), inset 0 0 100px rgba(0,0,0,0.1) }

.navbar-social a i { transition: all 200ms }
  
.navbar-social a:hover i.text-primary { 
  color: var(--color-secondary);
  fill:var(--color-secondary) }

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

.navbar-toggler .navbar-toggler-icon { 
  width: 100%;
  height: 4px;
  margin: 5px 0;
  display: block;
  border-radius: 10px;
  background: var(--color-primary) }

.navbar-toggler:focus { box-shadow: none }

.navbar-toggler:focus .navbar-toggler-icon  { background: var(--color-secondary) }

header .dropdown-item.active,
header .dropdown-item:active,
header .dropdown-item:focus { 
  background: none;
  color:var(--color-secondary) }

@media(min-width:992px) and (max-width:1024px){ 
  .navbar-user,
  .navbar-balance { font-size: 80% }
}

@media(min-width:992px){ 

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

  header.navbar-expand-lg .navbar-nav .nav-link { 
    font-size: clamp(80%, 1.25vw, 87.5%);
    /* padding-left: clamp(.25rem, 2vw, 3rem);
    padding-right: clamp(.25rem, 2vw, 3rem)  */
  }
}

@media(max-width:991.98px){

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

  header .navbar-nav {
    padding: 0;
    width: 100%;
    height: 100vh   }  

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

  header .nav-link { 
    color: #FFF;
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important }

  header .nav-link.active, 
  header .nav-link:hover { box-shadow: inset 0 0 100px rgba(0,0,0,0.2) }

  .navbar-social a { opacity: 1 }
/* 
  .dropdown-menu { 
    border: 0;
    border-radius: auto;
    width: 100% }

  .dropdown-item { 
    padding-left: 0;
    padding-right: 0 } */
}


@media(max-width:575.98px){
  
  .navbar-brand { width: 50% }

}


  

/* hero
//////////////////////////////////////////////////*/
#hero { background: var(--color-dark) }

#hero .carousel-inner { position: relative }
  
/* #hero .carousel-item,
#hero img { height: 550px } */

#hero img {
  height: 100%;
  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:1600px){
  .hero-caption { padding: 0 10vw }

  .carousel-control-prev,
  .carousel-control-next {
    z-index: 5;
    width: auto;
    padding: 0 1rem }

  #hero .carousel-control-prev,
  #hero .carousel-control-next { padding: 0 2rem }
}

@media(max-width:1280px){
  #hero .carousel-indicators { padding: 0 15px }
}

@media(max-width:767.98px){

  .hero-caption { 
    top: auto;
    padding: 0 5rem;
    bottom: 2rem;
    transform: translate(-50%,0) }

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

  #hero .btn { width: 100% }

}




/*  
//////////////////////////////////////////////////*/
.timer {
  color: var(--color-primary);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center }

.text-white .timer,
.text-white .timer span,
.text-white .timer > span:not(:first-child):before {
  color: #FFF !important
}

.timer:before {
  margin-top: .5rem;
  line-height: .5;
  font-weight: normal;
  width: 100%;
  content: "FINALIZA EM";
  display: block;
  font-size: 60% }

.timer.future:before{
  content: "EM BREVE";
}

.timer-lg:before { font-size: 100% }

.timer > span { 
  position: relative;
  font-weight: bold;
  margin-right: .25rem }

.timer-lg > span { 
  margin-right: 1rem;
  font-size: 300% }

@media(max-width:767.98px){
  .timer-lg > span { 
    margin-right: 1rem;
    font-size: 180% }
}

.timer > span:not(:first-child):before { 
  content: ":";
  position: absolute;
  left: -.25rem;
  transform: translate(-50%, 0) }

.timer-lg > span:not(:first-child):before { left: -.5rem }

.timer > span:nth-child(1):after { content: "D" }
/* .timer > span:nth-child(2):after { content: "HORAS" }
.timer > span:nth-child(3):after { content: "MIN" }
.timer > span:nth-child(4):after { content: "SEG" } */

.btn-timer { transition: all 0ms }

.btn .hidden,
article:hover .btn-timer .timer { display: none !important }
article:hover .btn-timer .hidden { display: flex !important  }

article .btn-timer { box-shadow:0 0 0 1px var(--color-primary) }

article:hover .btn-timer { 
  box-shadow:0 0 0 1px var(--color-secondary);
  padding: .775rem  !important }


/* ranking
//////////////////////////////////////////////////*/
#ranking ol {
  padding: 0;
  list-style: none }

#ranking ol li { 
  width: 100%;
  display: flex;
  margin-bottom: 1rem  }

#ranking ol .small { margin-left: auto }

#ranking ol li:nth-child(1),
#ranking ol li:nth-child(2),
#ranking ol li:nth-child(3),
#ranking ol li:nth-child(4),
#ranking ol li:nth-child(5) { color: var(--color-primary) }

#ranking ol li:nth-child(6),
#ranking ol li:nth-child(7),
#ranking ol li:nth-child(8),
#ranking ol li:nth-child(9),
#ranking ol li:nth-child(10) { margin-left: auto }

#ranking ol li:before { margin-right: .5rem }

#ranking ol li:nth-child(1):before  { content: "01. " }
#ranking ol li:nth-child(2):before  { content: "02. " }
#ranking ol li:nth-child(3):before  { content: "03. " }
#ranking ol li:nth-child(4):before  { content: "04. " }
#ranking ol li:nth-child(5):before  { content: "05. " }
#ranking ol li:nth-child(6):before  { content: "06. " }
#ranking ol li:nth-child(7):before  { content: "07. " }
#ranking ol li:nth-child(8):before  { content: "08. " }
#ranking ol li:nth-child(9):before  { content: "09. " }
#ranking ol li:nth-child(10):before { content: "10. " }

#ranking ol li:nth-child(1):before,
#ranking ol li:nth-child(2):before,
#ranking ol li:nth-child(3):before,
#ranking ol li:nth-child(4):before,
#ranking ol li:nth-child(5):before,
#ranking ol .small { color: var(--color-secondary) }

#ranking ol li:nth-child(6):before,
#ranking ol li:nth-child(7):before,
#ranking ol li:nth-child(8):before,
#ranking ol li:nth-child(9):before,
#ranking ol li:nth-child(10):before{ 
  margin-left: auto;
  color: var(--color-primary) }

@media(min-width:992px){
  #ranking ol { height: 200px }
  #ranking ol li { width: 45% }
}





/* cites 
//////////////////////////////////////////////////*/
.home #cites {
  background: url(img/bg-cites.jpg) no-repeat center;
  background-size: cover }

#cites .carousel-item article:not(:last-child) { margin-right: 5rem }


.home #citesmob {
  background: url(img/bg-cites.jpg) no-repeat center;
  background-size: cover }

#citesmob .carousel-item article:not(:last-child) { margin-right: 5rem }










/* packs 
//////////////////////////////////////////////////*/
#packs .form-check-label small { 
  font-weight: normal;
  color: rgba(0,0,0,.5) }
  
#packs .form-check-input:checked[type=radio] + .form-check-label,
#packs .form-check-input:checked[type=radio] + .form-check-label small { 
  font-weight: bold;
  color: var(--color-primary) }

@media(min-width:768px){
  #packs .fst-italic.fw-bold { 
    font-size: 3rem !important;
    letter-spacing: -2px }
}

@media(max-width:767.98px){
  #packs .fst-italic.fw-bold { font-size: 2.5rem !important }
  #packs [class*="icon-cifrao-lg"] { transform: scale(.65) }
}




/* product
//////////////////////////////////////////////////*/
#product .timer > span { color: var(--color-primary) }

.product-thumbs .more {
  position: absolute;
  color: #FFF;
  font-size: 400%;
  background: rgba(0,0,0,.5);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100% }

@media(min-width:768px){
  #product .scroll {
    max-height: 110px;
    padding-right: 1rem;
    overflow-y: scroll }
}








/* d-table
//////////////////////////////////////////////////*/
.d-table > div:first-child {
  text-transform: uppercase;
  font-weight: bold;
  color: var(--color-dark) }           

.d-table > div { 
  position: relative }

.d-table > div > div {
  vertical-align: middle;
}

@media(min-width:768px) and (max-width:992px){
  .d-table > div > div:nth-child(3) { display: none }
}

@media(min-width:768px){
  .d-table              { display: table }
  .d-table > div        { display: table-row }
  .d-table > div > div  { display: table-cell }
  
  .d-table > div > div  { 
    padding: 1rem 1.5rem;
    line-height: 2rem;
    border-bottom: 1px solid rgba(0,0,0,0.1) }

  .d-table > div > div:first-child  { padding-left: 0 }
  .d-table > div > div:last-child   { padding-right: 0 }
}

@media(max-width:767.98px){
  
  .d-table > div:first-child { display: none }
  
  .d-table > div { 
    border-radius: .5rem;
    background: rgba(0,0,0,.5);
    padding: 1rem;
    margin-bottom: .5rem }

  .d-table.text-black > div { 
    padding: 0;
    background: none }

  .d-table > div > div:not(:nth-last-child(1),:nth-last-child(2)):before,
  .card .d-table > div > div:before { 
    font-weight: normal;
    content: attr(data-label)": ";
    color: rgba(255,255,255,.5) }
    
  .d-table.text-black > div > div:before  {
      color: rgba(0,0,0,.5)
    }
  
  .d-table > div > div:last-child  { 
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem  }
  
}





/* faq 
//////////////////////////////////////////////////*/
#faq.accordion > div > a { 
  color: var(--color-default);
  position: relative;
  text-decoration: none }

#faq.accordion > div > a:hover { color:var(--color-primary) }

#faq.accordion > div > a,
#faq.accordion > div > div { padding-left: 2.25rem }

#faq.accordion > div > a:before {
  color:var(--color-primary);
  text-align: center;
  position: absolute;
  left: 0;
  top: 1rem;
  transition: all 300ms;
  content: "+";
  width: 24px;
  height: 24px;
  transition: all 300ms;
  color: #FFF;
  background: var(--color-default)  }
  
#faq.accordion > div > a[aria-expanded="true"]:before { 
  content: "-";
  background: var(--color-primary) }

#faq.accordion > div > a:hover:before,
#faq.accordion > div > a[aria-expanded="true"]:before { 
  color: #FFF;
  background: var(--color-primary) }

#faq.accordion > div > a[aria-expanded="true"] { color:var(--color-primary) }




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

footer a { 
  line-height: 1.4;
  color: #FFF !important }

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:768px){
  #mapsite { height: 130px }
  #mapsite a { margin-right: 2rem }
}

  

/* form elements
//////////////////////////////////////////////////*/
header .form-control { 
  padding-left: 1.75rem !important;
  padding-right: 1.75rem !important }

::placeholder { 
  font-size: 87.5%;
  color: var(--color-default) }

.form-check-input:checked {
  border-color: var(--color-secondary);
  background-color: var(--color-secondary) }

.form-check-input:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 0.25rem rgb(242 133 51 / 25%) }

.form-label { 
  margin-bottom: .25rem;
  font-size: 80%;
  opacity: .75
}

.btn { 
  text-transform: uppercase;
  font-weight: bold;
  /* border-radius: 10rem; */
  text-decoration: none !important;
  border: 0 }

.btn-sm { 
  font-size: 87.5%;
  padding: .5rem 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-secondary) !important } 

.btn-light      { background: var(--color-light) !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 { background: var(--color-secondary) !important }   

.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 {
  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-outline-white {
  box-shadow: inset 0 0 0 1px #FFF;
  color: #FFF }  

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

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

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

.btn-white {
  background: #FFF;
  color: var(--color-default) }  

.btn-light:hover,
.btn-light:active,
.btn-light:focus
.btn-white:hover,
.btn-white:active,
.btn-white:focus { 
  color: var(--color-primary);
  background: none !important }  

.btn-outline-white {
  box-shadow: inset inset 0 0 0 1px rgba(255,255,255,.3);
  color: #FFF }  

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

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

.btn-link:hover,
.btn-link:focus,
.btn-link:active,
.btn-white:hover,
.btn-white:focus,
.btn-white:active,
.btn-light:hover,
.btn-light:focus,
.btn-light:active { box-shadow: inset 0 0 100px rgba(255,255,255,0), inset 0 0 0 1px var(--color-secondary) }

@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
//////////////////////////////////////////////////*/
[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: contain }

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 }

.scroll::-webkit-scrollbar { width: .25em }
 
.scroll::-webkit-scrollbar-track { 
  border-radius: 1rem;
  background: #EEE}
 
.scroll::-webkit-scrollbar-thumb { 
  border-radius: 1rem;
  background: var(--color-primary) }




/* SVG ICONS
//////////////////////////////////////////////////////////////////////////////////////////*/
.icon { 
  display: inline-block;
  position: relative }

.icon-12 { width: 12px; height: 12px }
.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-56 { width: 56px; height: 56px }
.icon-64 { width: 64px; height: 64px }
.icon-96 { width: 96px; height: 96px }

.icon.text-primary    { fill: var(--color-primary) }
.icon.text-danger    { fill: var(--color-danger) }
.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 }




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

.icon-chutz-lg-primary{ width:74px; height:71px; background-position:0 0; }
.icon-chutz-lg-secondary{ width:74px; height:71px; background-position:0 -71px; }
.icon-cifrao-lg-secondary{ width:44px; height:56px; background-position:0 -142px; }
.icon-cifrao-lg-primary{ width:44px; height:56px; background-position:0 -198px; }
.icon-cifrao-sm-secondary{ width:9px; height:13px; background-position:0 -254px; }
.icon-balance{ width:29px; height:26px; background-position:0 -267px; }
.icon-user{ width:25px; height:30px; background-position:0 -293px; }
.icon-chutz{ width:26px; height:25px; background-position:0 -323px; }
.icon-how{ width:22px; height:22px; background-position:0 -348px; }
.icon-finalized{ width:22px; height:22px; background-position:0 -370px; }
.icon-active{ width:22px; height:22px; background-position:0 -392px; }
.icon-status{ width:22px; height:21px; background-position:0 -414px; }
.icon-favorites{ width:22px; height:22px; background-position:0 -435px; }
.icon-ranking{ width:22px; height:22px; background-position:0 -457px; }
  


@media(max-width:767.98px){
  .box-lance { 
    position: fixed;
    z-index: 100000;
    border-radius: 0 !important;
    border: 0 !important;
    bottom: 0;
    left: 0;
    width: 100%;
    box-shadow: -.5rem 0 2rem rgba(0,0,0,.25) !important;
  }
  
  .captcha {
    display: flex;
    justify-content: center;
    background: #F9F9F9 !important;
    overflow: hidden;
    width: 100%;
    height: 70px;
  }

  .captcha > div {
    display: flex;
    justify-content: center;
    height: 70px;
    max-width: 295px;
    overflow: hidden;
    margin: -5px 0 0 -2px
  }
}


@media(min-width:768px){
  .captcha {
    display: flex;
    justify-content: center;
    background: #F9F9F9 !important;
    overflow: hidden;
    width: 100%;
    padding: 0 .5rem;
    height: 70px;
  }

  .captcha > div {
    display: flex;
    justify-content: center;
    max-width: 295px;
    height: 70px;
    overflow: hidden;
    margin: -5px 0 0 0
  }
}



.favorite-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.favorite-checkbox {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.favorite-icon {
  font-size: 24px;
  transition: transform 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.favorite-icon:hover {
  transform: scale(1.2);
}

.inner #static li { margin-bottom: .75rem }
.inner #static ol, .inner #static ul  { margin-bottom: 1.5rem }