:root {
  --primario-web: #F45000;
  /* Naranja*/
  --secundario-web: #ff8c5a;
  /* Naranja secundario */
  --negro-web: #181818;
  --blanco-web: #ffffff;
  --gris-web: #6b6b6b;
  --blanco-texto: #fcfcfc;
  --gris-claro: #d0d0d0;
}

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap");

* {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
}



footer {
  z-index: 999;
}

.block-scroll {
  overflow-y: hidden;
}

.mw100{
  max-width: 100% !important;
}
.ocultar-movil {
  display: block;
}
.ocultar-desktop {
  display: none;
}
#boton-top {
  display: inline-block;
  background-color: var(--primario-web);
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s,
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 100;
  border: 1px solid var(--blanco-web);
}

#boton-top::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}

#boton-top:hover {
  cursor: pointer;
  background-color: var(--gris-web);
}

#boton-top:active {
  background-color: var(--secundario-web);
}

#boton-top.show {
  opacity: 1;
  visibility: visible;
}

input:focus-visible {
  border-color: var(--primario-web) !important;
}


/* ? MEDIA QUERY MOVIL */
@media (min-width: 768px) {
  header {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: var(--blanco-web);
  }

  .container {
    max-width: 90% !important;
    margin-left: 5% !important;
    margin-right: 5% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  h1 {
    text-transform: uppercase;
    font-size: 2.8vw !important;
    font-weight: bold !important;
  }

  h2 {
    font-size: 2.8vw !important;
    font-weight: bold !important;
  }

  h3 {
    text-transform: uppercase;
    font-size: 1.6vw !important;
    font-weight: 700 !important;
  }

  p,
  li {
    font-size: 18px;
    line-height: 18pt;
  }

  .iframe-mapa {
    border-radius: 45px;
    width: 100%;
    height: 70vh;
    border: 0;
    margin-top: 5%;
  }

  .boton-primario-contacto {
    padding-top: 1%;
    padding-bottom: 1%;
    background-color: var(--primario-web);
    border-radius: 45px;
    width: 30%;
    margin-left: 35%;
    border: 2px solid var(--primario-web);
    font-size: 1.4vw;
  }

  .boton-primario-contacto:hover,
  .boton-gris-faqs:hover,
  .boton-contacto-primario-d:hover,
  .boton-contacto-secundario-d:hover,
  .boton-form-primario:hover {
    background-color: var(--secundario-web);
    border: 2px solid var(--secundario-web);
    color: var(--blanco-texto);
  }

  a:hover {
    text-decoration: none !important;
  }

  .boton-secundario-contacto {
    padding-top: 1%;
    padding-bottom: 1%;
    background-color: var(--blanco-web);
    border-radius: 45px;
    width: 30%;
    margin-left: 35%;
    border: 2px solid var(--primario-web);
    font-size: 1.4vw;
  }

  .boton-form-primario {
    padding-top: 2%;
    margin-top: 10%;
    margin-left: 20%;
    margin-right: 20%;
    padding-bottom: 2%;
    background-color: var(--primario-web);
    border-radius: 45px;
    width: 60%;
    border: 2px solid var(--primario-web);
  }

  .fix-boton-tasador .boton-form-primario{
    margin-left: 10%!important;
    margin-right: 10% !important;
    width: 80%; 
  }

  .formp {
    margin-left: 2.8%;
  }

  .texto-gracias-form {
    width: 80% !important;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 60%;
    margin-bottom: 60%;
  }

  .acepto-form {
    color: var(--primario-web) !important;
  }

  .acepto-form:hover {
    color: var(--primario-web);
    text-decoration: underline !important;
  }

  input#start {
    padding-top: 1.5%;
    padding-bottom: 1.5%;
    background-color: var(--blanco-web);
    border-radius: 45px;
    width: 100%;
    padding-left: 12px;
    border: 2px solid var(--blanco-web);

  }

  .form-input {
    padding-top: 1.5%;
    padding-bottom: 1.5%;
    background-color: var(--blanco-web);
    border-radius: 45px;
    width: 100%;
    padding-left: 12px;
    border: 2px solid var(--blanco-web);
  }

  .form-input:focus {
    border: 2px solid var(--primario-web);
    outline: none;
  }

  .form-glass.form-steps {
    padding-left: 4%;
    padding-right: 4%;
  }


  .texto-blanco {
    color: var(--blanco-texto);
  }

  .texto-negro {
    color: var(--negro-web);
  }

  .texto-primario {
    color: var(--primario-web);
  }

  a:hover {
    color: var(--primario-web) !important;
  }

  .card-primario {
    background-color: var(--primario-web);
    border-radius: 45px;
    margin-top: 10%;
    margin-bottom: 5%;
    margin-left: 10%;
    margin-right: 10%;
    padding-left: 6.5%;
    padding-right: 6.5%;
    padding-top: 10%;
    padding-bottom: 10%;
    text-align: center;
  }

  .card-blanco {
    width: 22%;
    background-color: var(--blanco-web);
    border-radius: 60px;
    margin-top: 5%;
    margin-bottom: 5%;
    padding: 1% 2% 1% 2%;
    text-align: center;
  }

  .align-card {
    margin-left: 3%;
    margin-right: 3%;
  }

  .form-glass {
    width: 30%;
    backdrop-filter: blur(3px);
    background-color: rgba(0, 0, 0, 0.3);
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: 8%;
    border-radius: 30px;
    display: inline-block;
  }

  /* * MENU STYLE */
  .menumovil {
    display: none;
  }
  
  .logo-link {
    z-index: 10;
  }

  .logo {
    width: 12vw;
    padding-top: 15px;
  }

  header {
    height: 20%;
  }

  nav.menudesktop {
    position: absolute;
    right: 10%;
  }
  .menudesktop a {
    color: var(--negro-web);
    font-weight: bold;
  }

  .menudesktop a:hover {
    color: var(--primario-web);
    text-decoration: none !important;
  }

  .menudesktop p {
    font-weight: bold;
  }

  /* ! MENU FIN */

  /* * HOME */
  .texto-home {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    padding-top: 15%;
  }

  .texto-home h1 {
    font-size: 2.8vw !important;
    padding-left: 12vw;
  }

  .bg-home {
    padding-bottom: 10%;
  }

  .form-home {
    background-image: url(https://storage.googleapis.com/flexibike/assets/1\ FOTO\ banner-moto.png);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .motos-home {
    position: relative;
    bottom: 400px;
    width: 100%;
    height: 15vh;

  }

  .moto-home {
    background-image: url(https://storage.googleapis.com/flexibike/assets/home\ moto.png);
    background-repeat: no-repeat;
    background-position: 30%;
    background-size: 20% auto;
    position: absolute;
    top: 0%;
    width: 100%;
    overflow: hidden;
    height: 58vh;
  }

  .moto-home2 {
    background-image: url(https://storage.googleapis.com/flexibike/assets/home\ moto\ 2.png);
    background-repeat: no-repeat;
    background-size: 30% auto;
    background-position: 70% 120%;
    position: absolute;
    top: 80%;
    width: 100%;
    overflow: hidden;
    height: 58vh;

  }
  .motos-home-desktop {
    background-image: url(https://storage.googleapis.com/flexibike/assets/2\ FOTO\ motos\ juntas.png);
    background-size: 50vw;
    margin-left: 25vw;
    width: 75vw !important;
    height: 100vh !important;
    background-repeat: no-repeat;
    position: absolute;
    top: 0 !important;
  }

  .foto-banner {
    /* position: relative; */
    background: url(https://storage.googleapis.com/flexibike/assets/foto\ banner\ flexicar.png);
    /* height: 100%; */
    background-attachment: fixed;
    background-position: right 64% top 20%;
    background-repeat: no-repeat;
    background-size: cover;
    /* min-height: 100%; */
  }

  .foto-banner h2 {
    padding-top: 5%;
    margin-bottom: 3%;
  }

  a.boton_flexicar {
    text-decoration: none;
    color: var(--blanco-texto);
  }

  .bloque-icono {
    width: 20%;
    text-align: start;
    display: inline-block;
    vertical-align: top;
  }

  .bloque-icono>img {
    width: 8vw;
  }

  .bloque-icono>p {
    line-height: 200%;
  }

  .px-bloque-icono {
    margin-left: 7.5%;
    margin-right: 7.5%;
  }

  .bloque-valoracion h2 {
    margin-top: 5%;
  }

  .bloque-valoracion>p {
    font-size: 2.2vw;
    padding-bottom: 5%
  }

  .bloque-valoracion {
    margin-bottom: 4%;
  }

  /* ! HOME FIN */

  /* * COMO-FUNCIONA */

  .bg-web-primario {
    background-color: var(--primario-web);
    text-align: center;
  }

  .card-blanco-venta {
    background-color: var(--blanco-web);
    border-radius: 45px;
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: 10%;
    margin-right: 10%;
    padding-left: 11% !important;
    padding-right: 11% !important;
    padding-top: 8%;
    padding-bottom: 10%;
    text-align: center;
  }

  .card-blanco-venta h3 {
    font-weight: 550;
  }

  .venta-tit {
    margin-left: 18%;
    margin-right: 18%;
  }

  .image-venta {
    width: 6vw;
  }

  .ayuda-venta {
    background-image: url(https://storage.googleapis.com/flexibike/assets/foto_banner_silueteado1.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    padding-top: 15%;
    padding-bottom: 5%;
  }

  .ayuda-venta.row {
    margin-left: 20%;
    margin-top: 10%;
  }

  .boton-primario {
    background-color: var(--primario-web);
    border-radius: 45px;
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: 10%;
    margin-right: 10%;
    padding-left: 6.5%;
    padding-right: 6.5%;
    padding-top: 3%;
    padding-bottom: 3%;
    text-align: center;
    width: 70%;
    border: 2px solid var(--primario-web);
  }

  .bg-como-funcionamos-list {
    background-image: url(https://storage.googleapis.com/flexibike/assets/foto_como_funcionamos_fondo.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 300% auto;
    padding-bottom: 60%;
    text-align: center;
  }

  .motero-funcionamos {
    /* position: absolute;*/
    width: 100vw;
    height: 100vh;
    background-image: url(https://storage.googleapis.com/flexibike/assets/como_funcionamos_moto_silueteada.png);
    background-size: cover;
    bottom: 0%;
  }

  .lista-funcionamos {
    color: var(--blanco-web);
    list-style-type: inherit;
    text-align: left;
    padding-top: 5%;
    padding-bottom: 5%;
    column-gap: 7em;
  }

  .lista-funcionamos a {
    color: var(--negro-web);
    text-decoration: underline;
  }

  .lista-funcionamos li {
    padding-bottom: 15%;
    font-size: 1.4vw;
  }

  .listado-como {
    position: relative;
    background-image: url(https://storage.googleapis.com/flexibike/assets/foto_como_funcionamos_fondo.png);
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 150% auto;
    padding-bottom: 5%;
    padding-right: 0px !important;
    padding-left: 0px !important;
  }

  .moto-listado {
    position: absolute;
    width: 60%;
    height: 100%;
    background-image: url(https://storage.googleapis.com/flexibike/assets/como_funcionamos_moto_silueteada_desktop.png);
    background-size: cover;
    top: 0%;
    background-position: left center;
    pointer-events: none;
  }

  ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    list-style-type: none;
  }

  .listado-como .card-primario {
    padding-top: 5%;
    margin-top: 5%;
    padding-bottom: 2%;
    margin-left: -100px;
    padding-left: 25%;
    margin-right: 12%;
  }

  /* ! COMO-FUNCIONA FIN */

  /* * TASADOR */

  .tasador {
    position: relative;
    background-image: url(https://storage.googleapis.com/flexibike/assets/foto\ tasacion.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding-right: 0px !important;
    padding-left: 0px !important;
  }

  .tasador h2 {
    padding-top: 5%;
    font-weight: 400 !important;
  }

  .bloque-moto-tasador {
    margin-left: 10%;
    margin-right: 10%;
    height: 100vh;
  }

  .bloque-moto-tasador p {
    width: 100%;
    padding-top: 15%;
    padding-left: 20%;
    padding-right: 20%;
    text-align: center;
    background-image: url(https://storage.googleapis.com/flexibike/assets/1d\ FOTO\ cabecera\ -\ moto\ +\ fondonaranja\ \(2\).png);
    background-size: cover;
    height: 100%;
  }

  .moto-tasador {
    position: absolute;
    width: 100vw;
    height: 30vh;
    background-image: url(https://storage.googleapis.com/flexibike/assets/moto\ tasacion.png);
    background-size: cover;
    bottom: 0;
  }

  .icono-tasador {
    width: 20vw;

  }

  .form-tasador {
    background-image: url(https://storage.googleapis.com/flexibike/assets/foto\ oscura.png);
    background-size: cover;
    background-repeat: no-repeat;
  }

  /* ! TASADOR FIN */

  /* * FAQs */
  .accordion-header {
    background-color: var(--blanco-web);
    cursor: pointer;
    color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 3rem;
    transition: all 0.4s ease-in-out;
    border-radius: 45px;
  }

  .accordion-body {
    transition: all 0.35s ease-in-out;
    max-height: 0;
    overflow: hidden;
    background-color: var(--blanco-web);
    border-radius: 45px;
    width: 96%;
    padding-left: 2%;
  }

  .accordion-header h3 {
    margin-bottom: 0.8vh;
    margin-top: 0.8vh;
    font-size: 1.2vw !important;
  }

  .accordion-body p {
    padding: 1rem 1.5rem;
    line-height: 1.8;
  }

  .accordion+.accordion {
    margin-top: 1rem;
  }

  .accordion-icon {
    transition: transform 0.4s ease-in-out;
  }

  .accordion.active .accordion-header {
    background-color: var(--blanco-web);
    color: var(--negro-web);
  }

  .accordion.active .accordion-icon {
    transform: rotate(-180deg);
  }

  .cabecera-faqs {
    background-color: var(--primario-web);
    height: 20vh;
    padding-left: 30%;
    padding-right: 30%;
  }

  .accordion {
    border: 2px solid var(--primario-web);
    border-radius: 45px;
  }

  .prefooter-faqs {
    background-color: var(--primario-web);
    padding-top: 5%;
    padding-bottom: 5%;
  }

  .boton-gris-faqs {
    padding-top: 1%;
    padding-bottom: 1%;
    background-color: var(--gris-web);
    border-radius: 45px;
    width: 30%;
    margin-left: 35%;
    border: 2px solid var(--gris-web);
    font-size: 1.4vw;
  }

  .prefooter-faqs h2 {
    width: 60%;
    margin-left: 20%;
    margin-bottom: 2%;

  }

  /* !FIN FAQs */

  /* * 404 */

  .pagina-error {
    background-image: url(https://storage.googleapis.com/flexibike/assets/ERROR\ nuevo.png);
    background-size: 105%;
    background-position: center bottom;
    height: 60vw;
    background-repeat: no-repeat;
    font-weight: bold;
  }

  .pagina-error h1 {
    font-size: 9vw !important;
    font-weight: bold;
  }

  .pagina-error h3 {
    font-size: 3vw !important;
    font-weight: bold !important;
    padding-left: 12% !important;
  }

  .pagina-error p {
    font-size: 2vw !important;
    padding-left: 0 !important;

  }

  .titulo-error {
    text-transform: none !important;
    font-weight: bolder !important;
  }

  .pagina-error .col {
    padding-left: 55% !important;
  }

  /* ! 404 FIN */

  /* * GRACIAS */

  .gracias-tit {
    font-size: 8vw !important;
    font-weight: 900;
    margin-bottom: 0px;
    padding-top: 5%;
  }

  .gracias-tit2 {
    font-size: 2.8vw !important;
    font-weight: 500;
    padding-bottom: 5%;
  }

  .texto-gracias h3 {
    width: 20vw;
  }

  .texto-gracias p {
    width: 30vw;
    font-size: 1.5vw;
    line-height: 4vh;
    padding-top: 2%;
    padding-bottom: 10%;
  }

  .bg-bloque-gracias {
    background-image: url(https://storage.googleapis.com/flexibike/assets/GRACIAS\ nuevo.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding-left: 12vw;
    padding-right: 12vw;
    padding-bottom: 5%;
  }

  /* ! GRACIAS FIN */

  /* * CONTACTO */

  .form-contacto {
    background-image: url(https://storage.googleapis.com/flexibike/assets/foto\ oscura\ \(1\).png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .error-form {
    color: var(--primario-web);
    padding-top: 0.8em;
  }

  .input-texto {
    padding-bottom: 40%;
    border-radius: 20px;
    ;
  }

  .titulo-contacto {
    text-transform: none !important;
  }

  .bloque-botones-contacto {
    width: 100%;
    justify-content: center;
  }

  .contenedor-boton-contacto {
    width: 30%;
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: 40px;
    margin-right: 40px;
  }
  .contenedor-boton-como-funciona {
    width: 30%;
    margin-left: 40px;
    margin-right: 40px;
  }

  .boton-contacto-primario-d {
    background-color: var(--primario-web);
    border: 2px solid var(--primario-web);
    border-radius: 45px;
    height: 80px;
    padding-top: 2.5%;
    font-size: 28px;
    color: var(--blanco-texto);
  }

  .boton-contacto-secundario-d {
    background-color: var(--blanco-web);
    border: 2px solid var(--primario-web);
    border-radius: 45px;
    height: 80px;
    padding-top: 2.5%;
    font-size: 28px;
    color: var(--primario-web);
  }

  .bloque-iconos-contacto div {
    display: flex;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center;
  }

  .bloque-iconos-contacto p {
    font-size: 1.4vw;
  }

  .bloque-iconos-contacto .icono-tasador {
    width: 8vw;

  }

  /* ! CONTACTO FIN */

  /* * LEGAL PAGES */
  .cabecera-legal {
    background-color: var(--primario-web);
  }

  .cabecera-legal h2 {
    width: 50%;
    margin-left: 25% !important;
    font-weight: 500 !important;
    padding-top: 3% !important;
    padding-bottom: 2% !important;
  }

  .contenedor-legal {
    padding-left: 10%;
    padding-right: 10%;
  }

  .contenedor-legal h3 {
    padding-bottom: 3%;
  }

  /* ! FIN LEGAL PAGES */

  /* * FOOTER */

  footer {
    background-color: var(--negro-web);
  }

  footer.contenido-footer {
    padding-left: 12%;
    padding-right: 12%;
    padding-top: 20px;
  }

  .logo-footer {
    width: 24vw;
  }

  h3.claim-footer {
    color: var(--primario-web);
    font-size: 1.4vw !important;
    font-weight: 500 !important;
    padding-bottom: 2%;
  }

  a.texto-footer {
    font-size: small;
  }

  a.texto-footer:hover {
    color: var(--primario-web);
  }

  hr {
    background-color: var(--primario-web);
    width: 100%;
  }

  .rrss {
    padding-inline-start: 6vw;
    padding-inline-end: 6vw;
  }

  a.btn-social,
  .btn-social {
    border-radius: 50%;
    color: var(--negro-web);
    display: inline-block;
    height: 60px;
    line-height: 60px;
    margin: 8px 22px;
    text-align: center;
    text-decoration: none;
    width: 60px;
  }

  .btn-social .fa,
  .btn-social i {
    backface-visibility: hidden;
    transition: all .25s;

  }

  .btn-social:hover,
  .btn-social:focus {
    color: var(--negro-web);
    outline: none;
    text-decoration: none;
  }

  .btn-social:hover .fa,
  .btn-social:focus .fa,
  .btn-social:hover i,
  .btn-social:focus i {
    transform: scale(1.6);
  }

  .btn-social.btn-xs {
    font-size: 3px;
    height: 24px;
    line-height: 13px;
    margin: 6px 2px;
    width: 24px;
  }

  .btn-social.btn-sm {
    font-size: 13px;
    height: 36px;
    line-height: 18px;
    margin: 6px 2px;
    width: 36px;
  }

  .btn-social.btn-lg {
    font-size: 22px;
    height: 72px;
    line-height: 40px;
    margin: 10px 6px;
    width: 72px;
  }

  .btn-social {
    background-color: var(--primario-web);
  }

  .btn-social:hover {
    background-color: var(--blanco-web);
  }

  .rrss {
    margin: 1px;
    font-size: 14px;
  }

  a.copy:hover {
    color: var(--negro-web);
  }

  .copy {
    font-size: 8px;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0.8;
    }

    100% {
      opacity: 1;
    }
  }

  .fade-in-efecto {
    animation: fadeIn 1400ms;
  }

  footer .ocultar-movil a {
    font-size: 1vw !important;
  }

  .bloque-copy-footer div {
    font-size: 0.8vw;
  }

  .bloque-copy-footer div a {
    font-size: 0.8vw;
  }

  /*  ! FOOTER FIN */
}

@media (min-width: 768px) and (max-width: 1500) {
  .menudesktop li.pt-5 {
    padding-top: 2rem !important;
  }
}
/* ? MEDIA QUERY MOBILE */
@media (max-width: 767px) {
  body {
    margin-top: 3em !important;
  }
  header {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
    background-color: var(--blanco-web);
  }

  .ocultar-desktop {
    display: block !important;
  }
  .ocultar-movil {
    display: none;
  }
  h1 {
    text-transform: uppercase;
    font-size: 4.8vw !important;
    font-weight: bold;
  }

  h2 {
    font-size: 4.8vw !important;
    font-weight: bold;
  }

  h3 {
    text-transform: uppercase;
    font-size: 16px !important;
  }

  p,
  li {
    font-size: 16px;
    line-height: 18pt;
  }

  .iframe-mapa {
    border-radius: 45px;
    width: 80vw;
    height: 50vh;
    border: 0;
  }

  .boton-primario-contacto {
    padding-top: 3%;
    padding-bottom: 3%;
    background-color: var(--primario-web);
    border-radius: 45px;
    width: 70%;
    margin-left: 15%;
    border: 2px solid var(--primario-web);
  }

  .boton-secundario-contacto {
    padding-top: 3%;
    padding-bottom: 3%;
    background-color: var(--blanco-web);
    border-radius: 45px;
    width: 70%;
    margin-left: 15%;
    border: 2px solid var(--primario-web);
  }

  .boton-form-primario {
    padding-top: 3%;
    margin-top: 20%;
    padding-bottom: 3%;
    background-color: var(--primario-web);
    border-radius: 45px;
    width: 100%;
    border: 2px solid var(--primario-web);
  }
  .fix-boton-tasador .boton-form-primario{
    height: 60%!important;
  }

  .texto-gracias-form {
    width: 80% !important;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 60%;
    margin-bottom: 60%;
  }

  .acepto-form {
    color: var(--primario-web) !important;
  }

  .acepto-form:hover {
    color: var(--primario-web);
    text-decoration: underline !important;
  }

  input#start {
    padding-top: 1.5%;
    padding-bottom: 1.5%;
    background-color: var(--blanco-web);
    border-radius: 45px;
    width: 100%;
    padding-left: 12px;
    border: 2px solid var(--blanco-web);

  }

  .form-input {
    padding-top: 3%;
    padding-bottom: 3%;
    background-color: var(--blanco-web);
    border-radius: 45px;
    width: 100%;
    padding-left: 6%;
    border: 2px solid var(--blanco-web);
  }

  .form-input:focus {
    border: 2px solid var(--primario-web);
    outline: none;
  }

  .form-input::placeholder {
    color: var(--negro-web);
    font-size: 3.2vw !important;
  }

  .texto-blanco {
    color: var(--blanco-texto);
  }

  .texto-negro {
    color: var(--negro-web);
  }

  .texto-primario {
    color: var(--primario-web);
  }

  a:hover {
    color: var(--primario-web) !important;
  }

  .card-primario {
    background-color: var(--primario-web);
    border-radius: 45px;
    margin-top: 10%;
    margin-bottom: 5%;
    margin-left: 10%;
    margin-right: 10%;
    padding-left: 6.5%;
    padding-right: 6.5%;
    padding-top: 10%;
    padding-bottom: 10%;
    text-align: center;
  }

  .card-blanco {
    background-color: var(--blanco-web);
    border-radius: 45px;
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: 10%;
    margin-right: 10%;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 10%;
    padding-bottom: 10%;
    text-align: center;
  }


  .form-glass {
    backdrop-filter: blur(3px);
    background-color: rgba(0, 0, 0, 0.3);
  }

  /* * MENU STYLE */
  .menudesktop {
    display: none;
  }

  .logo {
    width: 40vw;
  }

  nav {
    position: absolute;
    left: 0;
    right: 0;
  }

  #menuToggle {
    display: block;
    position: absolute;
    top: 25px;
    right: 2em;
    width: 2.1em;
    z-index: 1;

    -webkit-user-select: none;
    user-select: none;
  }

  #menu a {
    text-decoration: none;
    color: var(--negro-web);

    transition: color 0.3s ease;
  }

  #menuToggle a:hover {
    color: var(--primario-web);
    text-decoration: none !important;
  }


  #menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;

    cursor: pointer;

    opacity: 0;
    z-index: 2;

    -webkit-touch-callout: none;
  }

  #menuToggle span {
    display: block;
    width: 25px;
    height: 2px;
    margin-bottom: 6px;
    position: relative;

    background: var(--negro-web);
    border-radius: 3px;

    z-index: 1;

    transform-origin: 4px 0px;

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
      background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
      opacity 0.55s ease;
  }

  #menuToggle span:first-child {
    transform-origin: 0% 0%;
  }

  #menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
  }

  /*  Transformacion de la hamburguesa en la cruz */
  #menuToggle input:checked~span {
    opacity: 1;
    /* transform: rotate(45deg) translate(-2px, -1px); */
    background: var(--primario-web);
  }

  /* Oculta la carne y se quedan solo los panes */
  #menuToggle input:checked~span:nth-last-child(3) {
    opacity: 0;
    /* transform: rotate(0deg) scale(0.2, 0.2); */
  }

  /* Cambio de direccion en la de abajo. */
  #menuToggle input:checked~span:nth-last-child(2) {
    /* transform: rotate(-45deg) translate(0, -1px); */
  }

  /* Posicion del icono */
  #menu {
    position: absolute;
    left:0;
    top: 4.3em;
    padding-top: 4em;
    padding-bottom: 20px;

    width: 100%;
    overflow: hidden;

    background: var(--blanco-web);
    list-style-type: none;
    -webkit-font-smoothing: antialiased;

    transform-origin: 0% 0%;
    /* Movimiento horizontal */
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
  }

  #menu li {
    padding: 10px 0;
    font-size: 16px;
    margin-left: 40px;
    position: relative;
  }

  #menu li:hover {
    color: var(--primario-web);
    text-decoration: none !important;
  }


  /* Efecto del slide */
  .menumovil:has(input:checked) #menu {
    clip-path: inset(0 0 0 0);
  }

  .barra-menu {
    background-color: var(--primario-web);
    width: 65%;
  }

  #menuToggle input:checked~body {
    -webkit-filter: blur(5px);
    /* Chrome, Safari, Opera */
    filter: blur(5px);
  }

  /* ! MENU FIN */

  /* * HOME */
  .bg-home {
    padding-bottom: 40%;
  }

  .form-home {
    background-image: url(https://storage.googleapis.com/flexibike/assets/foto\ formulario\ contacto.png);
    background-size: 250%;
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 10%;
    padding-bottom: 10%;
  }

  .error-form {
    color: var(--primario-web);
  }

  .motos-home {
    position: relative;
    bottom: 300px;
    width: 100%;
    height: 10vh;

  }

  .moto-home {
    background-image: url(https://storage.googleapis.com/flexibike/assets/home\ moto.png);
    background-repeat: no-repeat;
    background-position: 20%;
    background-size: 45% auto;
    position: absolute;
    top: 30%;
    width: 100%;
    overflow: hidden;
    height: 58vh;
  }

  .moto-home2 {
    background-image: url(https://storage.googleapis.com/flexibike/assets/home\ moto\ 2.png);
    background-repeat: no-repeat;
    background-size: 65% auto;
    background-position: right 10%;
    position: absolute;
    top: 80%;
    width: 100%;
    overflow: hidden;
    height: 58vh;

  }

  .foto-banner {
    /* position: relative; */
    background: url(https://storage.googleapis.com/flexibike/assets/foto\ banner\ flexicar.png);
    /* height: 100%; */
    background-attachment: fixed;
    background-position: right 64% top 20%;
    background-repeat: no-repeat;
    background-size: cover;
    /* min-height: 100%; */
  }

  .bg-web-primario .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ! HOME FIN */

  /* * COMO-FUNCIONA */

  .bg-web-primario {
    background-color: var(--primario-web);
    text-align: center;
  }

  .card-blanco-venta {
    background-color: var(--blanco-web);
    border-radius: 45px;
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: 10%;
    margin-right: 10%;
    padding-left: 11% !important;
    padding-right: 11% !important;
    padding-top: 8%;
    padding-bottom: 10%;
    text-align: center;
  }

  .card-blanco-venta h3 {
    font-weight: 550;
  }

  .venta-tit {
    margin-left: 18%;
    margin-right: 18%;
  }

  .image-venta {
    width: 30vw;
  }

  .ayuda-venta {
    background-image: url(https://storage.googleapis.com/flexibike/assets/foto_banner_silueteado1.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 200%;
    padding-top: 10%;
    padding-bottom: 5%;
  }

  .ayuda-venta.row {
    margin-left: 20%;
    margin-top: 10%;
  }

  .boton-primario {
    background-color: var(--primario-web);
    border-radius: 45px;
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: 10%;
    margin-right: 10%;
    padding-left: 6.5%;
    padding-right: 6.5%;
    padding-top: 3%;
    padding-bottom: 3%;
    text-align: center;
    width: 70%;
    border: 2px solid var(--primario-web);
  }

  .bg-como-funcionamos-list {
    background-image: url(https://storage.googleapis.com/flexibike/assets/foto_como_funcionamos_fondo.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 300% auto;
    padding-bottom: 60%;
    text-align: center;
  }

  .motero-funcionamos {
    /* position: absolute;*/
    width: 100vw;
    height: 100vh;
    background-image: url(https://storage.googleapis.com/flexibike/assets/como_funcionamos_moto_silueteada.png);
    background-size: cover;
    bottom: 0%;
  }

  .lista-funcionamos {
    color: var(--blanco-web);
    list-style-type: inherit;
    text-align: left;
    padding-top: 10%;
    padding-bottom: 10%;
    column-gap: 7em;
  }

  .lista-funcionamos a {
    color: var(--negro-web);
    text-decoration: underline;
  }

  .lista-funcionamos li {
    padding-bottom: 11%;
  }

  .listado-como {
    position: relative;
    background-image: url(https://storage.googleapis.com/flexibike/assets/foto_como_funcionamos_fondo.png);
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 250% auto;
    padding-bottom: 30%;
    padding-right: 0px !important;
    padding-left: 0px !important;
  }

  .moto-listado {
    position: absolute;
    width: 100vw;
    height: 100%;
    background-image: url(https://storage.googleapis.com/flexibike/assets/como_funcionamos_moto_silueteada.png);
    background-size: cover;
    bottom: 0;
    background-position: left 40% center;
  }



  /* ! COMO-FUNCIONA FIN */

  /* * TASADOR */

  .tasador {
    position: relative;
    background-image: url(https://storage.googleapis.com/flexibike/assets/foto\ tasacion.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 300% auto;
    padding-bottom: 30%;
    padding-right: 0px !important;
    padding-left: 0px !important;
  }

  .moto-tasador {
    position: absolute;
    width: 100vw;
    height: 30vh;
    background-image: url(https://storage.googleapis.com/flexibike/assets/moto\ tasacion.png);
    background-size: cover;
    bottom: 0;
  }

  .icono-tasador {
    width: 20vw;

  }

  .form-tasador {
    background-image: url(https://storage.googleapis.com/flexibike/assets/foto\ formulario\ tasacion2.png);
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 10%;
    padding-bottom: 10%;
  }

  /* ! TASADOR FIN */

  /* * FAQs */
  .accordion-header {
    background-color: var(--blanco-web);
    cursor: pointer;
    color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    transition: all 0.4s ease-in-out;
    border-radius: 25px;
  }

  .accordion-body {
    transition: all 0.35s ease-in-out;
    max-height: 0;
    overflow: hidden;
    background-color: var(--blanco-web);
    border-radius: 25px;
  }

  .accordion-header h3 {
    margin-bottom: 0.8vh;
    margin-top: 0.8vh;
    font-size: 3.5vw !important;
  }

  .accordion-body p {
    padding: 1rem 1.5rem;
    line-height: 1.8;
  }

  .accordion+.accordion {
    margin-top: 1rem;
  }

  .accordion-icon {
    transition: transform 0.4s ease-in-out;
  }

  .accordion.active .accordion-header {
    background-color: var(--blanco-web);
    color: var(--negro-web);
  }

  .accordion.active .accordion-icon {
    transform: rotate(-180deg);
  }

  .cabecera-faqs {
    background-color: var(--primario-web);
    height: 10vh;
    padding-left: 30%;
    padding-right: 30%;
  }

  .accordion {
    border: 1.5px solid var(--primario-web);
    border-radius: 25px;
  }

  .prefooter-faqs {
    background-color: var(--primario-web);
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 10%;
    padding-bottom: 10%;
  }

  .boton-gris-faqs {
    padding-top: 3%;
    padding-bottom: 3%;
    background-color: var(--gris-web);
    border-radius: 45px;
    width: 80%;
    margin-left: 10%;
    border: 2px solid var(--gris-web);
  }

  /* !FIN FAQs */

  /* * 404 */

  .pagina-error {
    background-image: url(https://storage.googleapis.com/flexibike/assets/error.png);
    background-position: center top;
    background-size: 125% auto;
    height: 125vw;
    background-repeat: no-repeat;
    font-weight: bold;
  }

  .pagina-error h1 {
    font-size: 65px !important;
    font-weight: bold;
  }

  .pagina-error h3 {
    font-weight: bold !important;
  }

  .titulo-error {
    text-transform: none !important;
    font-weight: bolder !important;
  }

  /* ! 404 FIN */

  /* * GRACIAS */
  .bg-gracias {
    padding-bottom: 10%;
  }

  .gracias-tit {
    font-size: 14vw !important;
    font-weight: 900;
    margin-bottom: 0px;
  }

  .gracias-tit2 {
    font-size: 5vw !important;
    font-weight: 500;
  }

  .texto-gracias {
    width: 60vw;
  }

  .bg-bloque-gracias {
    background-image: url(https://storage.googleapis.com/flexibike/assets/moto\ gracias.png);
    background-repeat: no-repeat;
    background-size: 50% auto;
    background-position: right -10% bottom 25%;
  }

  .bg-bloque-gracias .boton-gris-faqs {
    margin-top: 15% !important;
  }

  /* ! GRACIAS FIN */

  /* * CONTACTO */

  .form-contacto {
    background-image: url(https://storage.googleapis.com/flexibike/assets/fondo\ formulario\ contacto2.png);
    background-size: 350%;
    background-repeat: no-repeat;
    background-position: left 40% center;
    padding-top: 10%;
    padding-bottom: 10%;
  }

  .input-texto {
    padding-bottom: 40%;
    border-radius: 20px;
    ;
  }

  .titulo-contacto {
    text-transform: none !important;
  }

  /* ! CONTACTO FIN */

  /* * LEGAL PAGES */
  .cabecera-legal {
    background-color: var(--primario-web);
    height: 20%;
  }

  /* ! FIN LEGAL PAGES */

  /* * FOOTER */

  footer {
    background-color: var(--negro-web);
  }

  footer.contenido-footer {
    padding-left: 12vw;
    padding-right: 12vw;
    padding-top: 20px;
  }

  .logo-footer {
    width: 50vw;
  }

  h3.claim-footer {
    color: var(--primario-web);
    font-size: medium;
  }

  a.texto-footer {
    font-size: small;
  }

  a.texto-footer:hover {
    color: var(--primario-web);
  }

  hr {
    background-color: var(--primario-web);
    width: 100%;
  }

  .rrss {
    padding-inline-start: 6vw;
    padding-inline-end: 6vw;
  }

  a.btn-social,
  .btn-social {
    border-radius: 50%;
    color: var(--negro-web);
    display: inline-block;
    height: 28px;
    line-height: 28px;
    margin: 8px 4px;
    text-align: center;
    text-decoration: none;
    width: 28px;
  }

  .btn-social .fa,
  .btn-social i {
    font-size: 1.33333333em;
    backface-visibility: hidden;
    transition: all .25s;

  }

  .btn-social:hover,
  .btn-social:focus {
    color: var(--negro-web);
    outline: none;
    text-decoration: none;
  }

  .btn-social:hover .fa,
  .btn-social:focus .fa,
  .btn-social:hover i,
  .btn-social:focus i {
    transform: scale(1.3);
  }

  .btn-social.btn-xs {
    font-size: 3px;
    height: 24px;
    line-height: 13px;
    margin: 6px 2px;
    width: 24px;
  }

  .btn-social.btn-sm {
    font-size: 13px;
    height: 36px;
    line-height: 18px;
    margin: 6px 2px;
    width: 36px;
  }

  .btn-social.btn-lg {
    font-size: 22px;
    height: 72px;
    line-height: 40px;
    margin: 10px 6px;
    width: 72px;
  }

  .btn-social {
    background-color: var(--primario-web);
  }

  .btn-social:hover {
    background-color: var(--blanco-web);
  }

  .rrss {
    margin: 1px;
    font-size: 14px;
  }

  a.copy:hover {
    color: var(--negro-web);
  }

  .copy {
    font-size: 8px;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0.8;
    }

    100% {
      opacity: 1;
    }
  }

  .fade-in-efecto {
    animation: fadeIn 1400ms;
  }

  /*  ! FOOTER FIN */

  /* * VENTA INICIO */
  .cabecera-venta {
    height: 30%;
    background-image: url(https://storage.googleapis.com/flexibike/assets/FOTO1.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 12%;
    padding-bottom: 12%;
  }

  .cabecera-venta h2 {
    padding-bottom: 5%;
  }

  .bloque-filtros-listado p {
    font-size: 12px !important;
  }

  .bloque-filtros-listado {
    font-size: 12px !important;
    padding-top: 5%;
    padding-bottom: 5%;
  }

  .btn-venta-primario,
  .btn-venta-secundario p {
    margin-bottom: 0%;
  }

  .btn-venta-primario {
    height: 40px !important;
    padding-top: 5px;
    margin-left: 15px;
    width: 35%;
    background-color: var(--primario-web);
    border: 2px solid var(--primario-web);
    border-radius: 45px;
  }

  .btn-venta-blanco {
    color: var(--negro-web);
    height: 30px !important;
    margin-left: 5px;
    margin-right: 5px;
    width: 18%;
    background-color: var(--blanco-web);
    border: 2px solid var(--primario-web);
    border-radius: 45px;
  }

  .btn-venta-secundario {
    height: 40px !important;
    padding-top: 5px;
    margin-right: 15px;
    width: 35%;
    background-color: var(--gris-web);
    border: 2px solid var(--gris-web);
    border-radius: 45px;
  }

  .dropdown-menu {
    border: 2px solid var(--primario-web) !important;
    background-color: var(--blanco-web) !important;
    border-radius: 25px !important;
  }

  .contenedor-moto-venta {
    padding-left: 12%;
    padding-right: 12%;
    padding-top: 5%;
    padding-bottom: 5%;
  }

  .imagen-contenedor-moto {
    width: 84vw;
  }

  .datos-contenedor-moto h3 {
    color: var(--gris-web);
    border-right: 2px solid var(--gris-web);
    padding-right: 5px;
    padding-left: 5px;

  }

  .precio-contenedor-moto {
    background-color: var(--primario-web);
    padding-top: 10px;
  }

  .filtros-up {
    height: 5%;
    width: 100vw;
    position: fixed;
    bottom: 0;
    background-color: var(--primario-web);
  }

  .filtros-up h3 {
    font-weight: 700;
  }

  .overlay {
    width: 100vw;
    height: 0;
    position: fixed;
    z-index: 1;
    bottom: 5%;
    left: 0;
    background-color: var(--blanco-web);
    overflow-x: hidden;
    transition: 0.5s;
  }

  .overlay-content {
    position: relative;
    top: 10%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
  }

  .overlay .closebtn {
    padding: 2px;
    text-decoration: none;
    font-size: 36px;
    color: var(--negro-web);
    display: block;
    transition: 0.3s;
  }

  .overlay a:hover,
  .overlay a:focus {
    color: #f1f1f1;
  }

  .closebtn {
    padding-right: 8px !important;
  }

  .overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 6px;
    font-size: 60px;
  }

  .acordeon-filtros .accordion {
    border: 0px !important;
    border-radius: 0px !important;
  }

  .acordeon-filtros .accordion-body {
    color: var(--gris-web);
    padding: 0rem 1.5rem;
  }

  .acordeon-filtros .accordion .accordion-body input[type="radio"]:checked+label,
  input[type="radio"],
  input[type="checkbox"]:checked+label,
  input[type="checkbox"] {
    accent-color: var(--primario-web);
    color: var(--primario-web);
  }

  .overlay-content .accordion-body {
    text-align: start;
  }

  .checkbox-iva {
    text-align: start;
    padding-left: 10%;
  }

  .selector-year {
    border: 1px solid var(--primario-web);
    margin-left: 15px;
    margin-right: 15px;
  }

  .selector-year input {
    border: 0px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 10%;
  }

  .selector-year label {
    color: var(--primario-web);
    font-size: 80%;
  }

  .contenedor-year {
    width: 95%;
  }

  #desde,
  #hasta {
    text-align: center !important;
  }

  .color-box {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gris-web);
  }

  .color-activo {
    border: 2px solid var(--primario-web) !important;
  }

  #color-uno {
    background-color: #ffffff;
  }

  #color-dos {
    background-color: aquamarine;
  }

  .carnet-container label {
    width: 20%;
  }

  .carnet-container img {
    width: 90%;
    margin-right: 5%;
  }

  #carnet-am,
  #carnet-auno,
  #carnet-ados,
  #carnet-a {
    display: none;
  }

  .carnet-activo-am {
    content: url(https://storage.googleapis.com/flexibike/assets/carnet\ AM\ naranja.png);
  }

  .carnet-activo-auno {
    content: url(https://storage.googleapis.com/flexibike/assets/carnet\ A1B\ naranja.png);
  }

  .carnet-activo-ados {
    content: url(https://storage.googleapis.com/flexibike/assets/carnet\ A2\ naranja.png);
  }

  .carnet-activo-a {
    content: url(https://storage.googleapis.com/flexibike/assets/carnet\ A\ naranja.png);
  }

  /* * DETALLES VENTA MOTOS */
  .flechas-carrousel {
    background-color: rgba(0, 0, 0, 0.5);
    width: 7vw !important;
  }

  .garantia-venta>p {
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 5px;
    color: var(--negro-web);
    font-weight: bold !important;
  }

  .garantia-venta .texto-garantia {
    margin-bottom: 0px;
  }

  .parrafo-post-gatantia p {
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 5px;
    font-size: 10px;
  }

  .parrafo-post-gatantia p {
    line-height: 10px;
  }

  div.precio-contenedor-moto {
    width: 110%;
    text-align-last: center;
  }

  div.tabs-contenedor {
    width: 110%;
    text-align-last: center;
    display: block;

  }

  .tabs {
    width: 100%;
    background-color: var(--gris-claro);
  }

  .tabs .tabs-nav li {
    list-style: none;
    padding-top: 15px;
    padding-bottom: 15px;
    width: 100%;
  }

  .tabs .tabs-nav li a {
    color: var(--negro-web);
    font-weight: bold;
  }

  .tabs .tabs-nav li.active {
    background-color: var(--primario-web);
    font-weight: bold;
  }

  .tabs .tabs-nav li.active a {
    color: var(--blanco-texto);
  }

  .tabs .tabs-nav li a:active {
    color: var(--blanco-texto) !important;
  }

  .tabs .tabs-nav li.active a {
    color: var(--blanco-texto) !important;
    text-decoration: none;
  }

  .contenedor-me-interesa {
    background-color: var(--primario-web);
    height: 5vh !important;
    padding-top: 1.5vh;
  }

  .contenedor-me-interesa h3 {
    margin-bottom: 0 !important;
  }

  .form-detalle-motos-venta {
    background-image: url(https://storage.googleapis.com/flexibike/assets/FOTO_formulario_\(solo\ movil\).png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left 70% center;
    padding-top: 10%;
    padding-bottom: 10%;
  }

  .contenido-tabs-detalle-motos .icono-contenido-tabs {
    height: 28px;
    width: 33px;
  }

  .contenido-tabs-detalle-motos .img-texto {
    height: 28px;
    width: 33px;
  }

  .contenido-general-detalle-motos .texto2-contenido-tabs {
    padding-bottom: 8px;
    font-size: 14px;
  }

  .contenido-tabs-detalle-motos {
    align-items: center !important;
  }

  .contenido-tabs-detalle-motos .texto-contenido-tabs {
    padding-left: 4%;
    text-transform: uppercase;
  }

  .contenido-general-detalle-motos .lista-detalle li {
    list-style: none;
  }

  .contenido-general-detalle-motos .lista-detalle .datos {
    display: inline;
    padding-left: 59px;
  }

  /* ! FIN DETALLES VENTA MOTOS */

  /* * Double Slider */

  section.range-slider {
    position: relative;
    width: 250px;
    height: 80px;
    float: left;
    text-align: center;
  }

  section.range-slider input[type=range] {
    pointer-events: none;
    position: absolute;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    border: none;
    border-radius: 14px;
    background: var(--blanco-web);
    box-shadow: inset 0 1px 0 0 var(--secundario-web), inset 0 -1px 0 0 var(--primario-web);
    -webkit-box-shadow: inset 0 1px 0 0 var(--secundario-web), inset 0 -1px 0 0 var(--primario-web);
    overflow: hidden;
    left: 0;
    top: 50px;
    width: 250px;
    outline: none;
    height: 20px;
    margin: 0;
    padding: 0;
  }

  section.range-slider input[type=range]::-webkit-slider-thumb {
    pointer-events: all;
    position: relative;
    z-index: 1;
    outline: 0;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 14px;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dad8da), color-stop(100%, #413f41));
    /* android <
	= 2.2 */
    background-image: -webkit-linear-gradient(top, var(--secundario-web) 0, var(--primario-web) 100%);
    /* older mobile safari and android >
	 2.2 */
    background-image: linear-gradient(to bottom, var(--secundario-web) 0, var(--primario-web) 100%);
    /* W3C */
  }

  section.range-slider input[type=range]::-moz-range-thumb {
    pointer-events: all;
    position: relative;
    z-index: 10;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 14px;
    background-image: linear-gradient(to bottom, #dad8da 0, #413f41 100%);
    /* W3C */
  }

  section.range-slider input[type=range]::-ms-thumb {
    pointer-events: all;
    position: relative;
    z-index: 10;
    -ms-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 14px;
    border: 0;
    background-image: linear-gradient(to bottom, #dad8da 0, #413f41 100%);
    /* W3C */
  }

  section.range-slider input[type=range]::-moz-range-track {
    position: relative;
    z-index: -1;
    background-color: rgba(0, 0, 0, 1);
    border: 0;
  }

  section.range-slider input[type=range]:last-of-type::-moz-range-track {
    -moz-appearance: none;
    background: none transparent;
    border: 0;
  }

  section.range-slider input[type=range]::-moz-focus-outer {
    border: 0;
  }
}

.s2 {
  font-size: 2.8vw !important;
  padding-bottom: 5%;
  line-height: 1.2;
  text-transform: none;
}