@charset "UTF-8";

/* CSS Document */
:root {
   --fuente-documento: 'StRydeRegular';
   --color-primario-ruleta2: #E70031;
   --color-secundario-ruleta2: #FFB500;
}

* {
   outline: none;
}

html {
   font-size: 62.5%;
}

body {
   font-family: var(--fuente-documento);
   color: var(--gris-fuerte);
   overflow-x: hidden !important;
}

/* ==========================================================================
   header
   ========================================================================== */
.campana-ruleta2 {
   background: url("../images/campana-ruleta.jpg") no-repeat center;
   background-size: cover;
   position: relative;
}

.campana-ruleta2 h3 {
   font-family: 'SourceSansPro-Semibold';
   font-size: 2.0rem;
}

.form-cabeza-ruleta {
   max-width: 500px;
   background: #fff;
   padding: 2.0rem;
   border-radius: 2.0rem;
   z-index: 1;
   box-shadow: -1px 2px 6px -2px rgba(0, 0, 0, 0.63);
}

.form-cabeza-ruleta label {
   width: 100%;
   text-align: left;
   font-size: 1.8rem;
   color: #5B5B5E;
}

.form-cabeza-ruleta p {
   width: 100%;
   text-align: left;
   font-size: 1.6rem;
   color: #5B5B5E;
}

.form-cabeza-ruleta input {
   width: 100%;
   border: 1px solid #9B9A9E;
   font-size: 1.6rem;
   border-radius: 6px;
}

.form-cabeza-ruleta button {
   font-family: 'SourceSansPro-Semibold';
   font-size: 2.2rem;
   background: var(--color-primario-ruleta2);
   color: #fff;
   border: none;
   padding: 0.5rem 3.0rem;
   border-radius: 0.8rem;

}

.l-brilla-ruleta {
   position: absolute;
   content: "";
   bottom: -10px;
   right: 1px;
}

.l-brilla-ruleta img {
   max-width: 150px;
}

.l-edusurte {
   position: absolute;
   content: "";
   top: -1px;
   right: 0;
}

.l-edusurte img {
   max-width: 150px;
}

a {
   color: #009FDE;
}

/* ==========================================================================
   header
   ========================================================================== */

/* ==========================================================================
   colors
   ========================================================================== */
.color-primario {
   color: var(--color-primario-ruleta2);
}

.bg-primario {
   background: var(--color-primario-ruleta2);
}

.color-secundario {
   background: var(--color-secundario-ruleta2);
}

.bg-secundario {
   background: var(--color-secundario-ruleta2);
}

/* ==========================================================================
   colors
   ========================================================================== */

/* ==========================================================================
  texts
   ========================================================================== */

/* ==========================================================================
  texts
   ========================================================================== */


@font-face {
   font-family: 'St-Ryde-medium';
   src: url('../fonts/StRyde-Medium.woff2') format('woff2'),
      url('../fonts/StRyde-Medium.woff') format('woff');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'StRyde-Light';
   src: url('../fonts/StRyde-Light.woff2') format('woff2'),
      url('../fonts/StRyde-Light.woff') format('woff');
   font-weight: 300;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'StRydeRegular';
   src: url('../fonts/StRydeRegular.woff2') format('woff2'),
      url('../fonts/StRydeRegular.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'StRyde-Bold';
   src: url('../fonts/StRyde-Bold.woff2') format('woff2'),
      url('../fonts/StRyde-Bold.woff') format('woff');
   font-weight: bold;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'SourceSansPro-BlackIt';
   src: url('../fonts/SourceSansPro-BlackIt.woff2') format('woff2'),
      url('../fonts/SourceSansPro-BlackIt.woff') format('woff');
   font-weight: 900;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'SourceSansPro-Black';
   src: url('../fonts/SourceSansPro-Black.woff2') format('woff2'),
      url('../fonts/SourceSansPro-Black.woff') format('woff');
   font-weight: 900;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'SourceSansPro-Bold';
   src: url('../fonts/SourceSansPro-Bold.woff2') format('woff2'),
      url('../fonts/SourceSansPro-Bold.woff') format('woff');
   font-weight: bold;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'SourceSansPro-BoldIt';
   src: url('../fonts/SourceSansPro-BoldIt.woff2') format('woff2'),
      url('../fonts/SourceSansPro-BoldIt.woff') format('woff');
   font-weight: bold;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Source Sans Pro';
   src: url('../fonts/SourceSansPro-Regular.woff2') format('woff2'),
      url('../fonts/SourceSansPro-Regular.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'SourceSansPro-ExtraLight';
   src: url('../fonts/SourceSansPro-ExtraLight.woff2') format('woff2'),
      url('../fonts/SourceSansPro-ExtraLight.woff') format('woff');
   font-weight: 200;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'SourceSansPro-It';
   src: url('../fonts/SourceSansPro-It.woff2') format('woff2'),
      url('../fonts/SourceSansPro-It.woff') format('woff');
   font-weight: normal;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'SourceSansPro-Semibold';
   src: url('../fonts/SourceSansPro-Semibold.woff2') format('woff2'),
      url('../fonts/SourceSansPro-Semibold.woff') format('woff');
   font-weight: 600;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'SourceSansPro-LightIt';
   src: url('../fonts/SourceSansPro-LightIt.woff2') format('woff2'),
      url('../fonts/SourceSansPro-LightIt.woff') format('woff');
   font-weight: 300;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'SourceSansPro-Light';
   src: url('../fonts/SourceSansPro-Light.woff2') format('woff2'),
      url('../fonts/SourceSansPro-Light.woff') format('woff');
   font-weight: 300;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'SourceSansPro-ExtraLightIt';
   src: url('../fonts/SourceSansPro-ExtraLightIt.woff2') format('woff2'),
      url('../fonts/SourceSansPro-ExtraLightIt.woff') format('woff');
   font-weight: 200;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'SourceSansPro-SemiboldIt';
   src: url('../fonts/SourceSansPro-SemiboldIt.woff2') format('woff2'),
      url('../fonts/SourceSansPro-SemiboldIt.woff') format('woff');
   font-weight: 600;
   font-style: italic;
   font-display: swap;
}

/* ==========================================================================
  font-face
   ========================================================================== */

/* ==========================================================================
  font-face
   ========================================================================== */


/* ==========================================================================
  inputs
   ========================================================================== */

.contact input[type=text] {
   border: none;
   background: none;
}

.contact input::placeholder {
   color: #fff !important;
}

.div-owl-ali {
   height: 250px;
}

.div-owl-ali img {
   width: auto !important;
}

button:focus {
   outline: none !important;
}

.owl-aliados .owl-nav {
   position: absolute;
   top: 7em;
   left: 0em;
   width: 100%;
   display: flex !important;
   justify-content: space-between;
}

.owl-aliados .owl-nav .owl-prev {
   background: #fed280 !important;
   border-radius: 50px;
   height: 75px;
   width: 75px;
   position: relative;
}

.owl-aliados .owl-nav .owl-prev span {
   font-size: 10rem;
   position: absolute;
   top: -48px;
   left: 0.25em;
   color: #d0b585;
}

.owl-aliados .owl-nav .owl-next {
   background: #fed280 !important;
   border-radius: 50px;
   height: 75px;
   width: 75px;
   position: relative;
}

.owl-aliados .owl-nav .owl-next span {
   font-size: 10rem;
   position: absolute;
   top: -48px;
   right: 0.25em;
   color: #d0b585;
}

/* ==========================================================================
  inputs
   ========================================================================== */
.boton-conocer {
   background-color: #FFB401 !important;
   border-radius: 10px;
   border: 0;
   font-family: 'St Ryde';
   color: #fff;
}

.franja1-r2 {
   background: var(--color-secundario-ruleta2);
   border-radius: 0 0 5.0rem 0;
}

.franja1-r2 h1 {
   font-family: 'SourceSansPro-Bold';
   font-size: 4.0rem;
}

.franja1-r2 h2 {
   font-size: 3.0rem;
   font-family: 'SourceSansPro-Semibold';
   color: #fff;
   text-align: right;
}

.ruleta-b-2 {
   position: relative;
   font-size: 2.5rem;
   font-family: 'SourceSansPro-Semibold';
   color: #818084;
   top: -50px;
}

.ruleta-b-2 div {
   background: #E9EEF1;
   padding: 3.0rem;
   border-radius: 0 3.0rem 3.0rem 0;
   position: absolute;
   content: "";
   top: 48%;
   line-height: 3rem;
}

.f-ruleta2 {
   background: url(../images/fondo-cupo-r2.jpg) no-repeat center;
   height: 334px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.f-ruleta2 img {
   max-width: 600px;
   width: 100%;
}

.content-ruleta {
   max-width: 1400px;
   margin: auto;
}

.content-ruleta h2 {
   font-size: 6.0rem;
   font-family: 'SourceSansPro-Bold';
   color: #818084;
}

.content-ruleta h3 {
   font-size: 3.5rem;
   font-family: 'SourceSansPro-Semibold';
   color: var(--color-primario-ruleta2);
   line-height: 3.5rem;
}

.content-ruleta h6 {
   font-size: 1.5rem;
   font-family: 'SourceSansPro-Semibold';
   color: var(--color-primario-ruleta2);
}

.content-ruleta ul li {
   list-style: url(../images/vineta-ruleta.png);
   font-size: 2.5rem;
   font-family: 'Source Sans Pro';
   line-height: 2.5rem;
   color: #818084;
   margin-bottom: 4.0rem;
}

.content-ruleta p {
   font-size: 2.5rem;
   font-family: 'Source Sans Pro';
   line-height: 2.5rem;
   color: #818084;
}

.content-ruleta ul li:last-child {
   list-style: none;

}

.content-ruleta-boton {
   font-size: 5.0rem;
   font-family: 'StRyde-Bold';
   color: #fff;
   background: var(--color-primario-ruleta2);
   border: none;
   padding: 0 3rem;
   border-radius: 3.0rem;
}

.barra-ruleta {
   background: var(--color-secundario-ruleta2);
   height: 10px;
   width: 100%;
   border-radius: 3.0rem;
}

.botonr-2 {
   background: var(--color-secundario-ruleta2) !important;
   font-size: 4.0rem !important;
}

.motos-rule {
   border: 10px solid #D9DADE;
}

.manchas-ruleta {
   background: url(../images/mancha-izq.jpg) no-repeat left, url(../images/mancha-der.jpg) no-repeat right;
}

.f-motos-rule {
   background: url(../images/fondo-motos-ruleta.jpg) no-repeat;
   background-size: cover;
}


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

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

@media (max-width: 768px) {
   html {
      font-size: 52.5%;
   }
}

@media(max-width:500px) {
   .ruleta-b-2 div {
      background: #E9EEF1;
      padding: 3.0rem;
      border-radius: 0 3.0rem 3.0rem 0;
      position: static;
      content: "";
      top: 48%;
      line-height: 3rem;
   }

   .content-ruleta h2 {
      font-size: 4.0rem;
      font-family: 'SourceSansPro-Bold';
      color: #818084;
   }

   .botonr-2 {
      background: var(--color-secundario-ruleta2) !important;
      font-size: 2.3rem !important;
   }

}

/* ==========================================================================
   CLASES GLOBALES!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
   ========================================================================== */

/* ==========================================================================
   modales landing!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
   ========================================================================== */
.modales-ruleta-land {
   max-width: 700px;
   margin: auto;
   text-align: center;
   background: #fff;
   /* padding: 2.0rem; */
   border-radius: 3.0rem;
   -webkit-box-shadow: 0px 1px 15px -3px rgba(0, 0, 0, 0.55);
   box-shadow: 0px 1px 15px -3px rgba(0, 0, 0, 0.55);
}

.modales-ruleta-land div {
   background: var(--color-secundario-ruleta2);
   padding: 3.0rem;
   border-radius: 3.0rem;
   -webkit-box-shadow: 0px 1px 15px -3px rgba(0, 0, 0, 0.55);
   box-shadow: 0px 1px 15px -3px rgba(0, 0, 0, 0.55);
}

.modales-ruleta-land h1 {
   font-size: 4rem;
   font-family: 'SourceSansPro-Bold';
   color: #fff;
}

.modales-ruleta-land h4 {
   font-size: 3.0rem;
   font-family: 'SourceSansPro-Bold';
   color: #fff;
}

.modales-ruleta-land button {
   font-size: 3.0rem;
   font-family: 'SourceSansPro-Bold';
   color: #fff;
   background: var(--color-primario-ruleta2);
   border: none;
   box-shadow: 0px 1px 15px -3px rgba(0, 0, 0, 0.55);
   padding: 0 3rem;
   border-radius: 2.0rem;
   text-shadow: 0px 1px 15px -3px rgba(0, 0, 0, 0.55);
}

#contenedor {
   background: rgb(0 0 0 / 34%);
   position: fixed;
   z-index: 99999999;
   width: 100%;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   top: 0;
}

/* .row-modal {
   width: 100%;
   border-radius: 10px;
   position: fixed;
   top: -2%;
   height: 100%;
} */

.modal-contenido {
   max-width: 800px;
   margin: 0 auto;
   background: rgb(244 244 244);
   padding: 2rem;
   height: auto;
}

.modales-ruleta-land figure:hover {
   cursor: pointer;
}

button:hover {
   cursor: pointer;
}

/* ==========================================================================
   modales landing!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
   ========================================================================== */
/* ==========================================================================
   juego ruleta!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
   ========================================================================== */
.f-juego-ruleta2 {
   background: url(../images/fondo-rule.jpg) no-repeat center;
   background-size: cover;
   min-height: 100vh;
   overflow: hidden;
   align-items: inherit;
}

.l-brilla-ruleta2 {
   position: fixed;
   content: "";
   bottom: -10px;
   right: 1px;
}

.l-brilla-ruleta2 img {
   max-width: 200px;
}

.l-edusurte2 {
   position: absolute;
   content: "";
   top: -1px;
   right: 0;
}

.l-edusurte2 img {
   max-width: 250px;
}

.trian-gulo {
   position: absolute;
   top: 0;
   left: 0;
}

.trian-gulo img {
   max-width: 160px;
}

.super-salud-ruleta {
   position: fixed;
   bottom: 1rem;
   left: 1rem;
}

.super-salud-ruleta img {
   max-width: 40px;
}

.terminos-ruleta-2 {
   max-width: 700px;
   margin: auto;
   text-align: center;
   background: var(--color-secundario-ruleta2);
   padding: 2.0rem;
   border-radius: 3.0rem;
   -webkit-box-shadow: 0px 1px 15px -3px rgba(0, 0, 0, 0.55);
   box-shadow: 0px 1px 15px -3px rgba(0, 0, 0, 0.55);
}

.terminos-ruleta-2 article {
   background: #fff;
   padding: 3.0rem;
   border-radius: 3.0rem;
   -webkit-box-shadow: 0px 1px 15px -3px rgba(0, 0, 0, 0.55);
   box-shadow: 0px 1px 15px -3px rgba(0, 0, 0, 0.55);
}

.terminos-ruleta-2 p {
   font-size: 1.4rem;
   font-family: 'Source Sans Pro';
   line-height: 1.5rem;
   color: #000;
}

.terminos-ruleta-2 p span {
   font-family: 'SourceSansPro-Bold';
}

.terminos-ruleta-2 input {
   width: 100%;
   border: 1px solid #9B9A9E;
   font-size: 1.6rem;
   border-radius: 6px;
}

.terminos-ruleta-2 button {
   font-family: 'SourceSansPro-Semibold';
   font-size: 2.2rem;
   background: var(--color-primario-ruleta2);
   color: #fff;
   border: none;
   padding: 0.5rem 3.0rem;
   border-radius: 0.8rem;

}

.ruleta-2022 {
   width: 500px;
   position: relative;
   margin-top: -10em;
}

.la-ruleta2 {
   position: relative;
   z-index: 3;

}

.la-ruleta2 img {
   width: 100%;
   width: 500px;
}

.capa-ruleta {
   position: absolute;
   z-index: 999999;
   top: 10em;

}

.capa-ruleta img {

   width: 500px;
}

.podium-ruleta img {

   max-width: 500px;
}

.podium-ruleta {
   position: absolute;
   bottom: -32%;
   z-index: 1;
}

.image_rotate {
   animation: rotation 2s infinite linear;
}

@keyframes rotation {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(359deg);
   }
}

.btn-ruleta {
   font-size: 3.8rem;
   line-height: 3.2rem;
   padding: 1rem 2rem;
   border-radius: 20px;
   font-family: 'SourceSansPro-Bold';
   background: var(--color-secundario-ruleta2);
   color: var(--color-primario-ruleta2);
   border: 2px solid #fff;

}

.parrafo-modal-rule {
   font-size: 1.8rem;
   font-family: 'Source Sans Pro';
   color: #fff;
}

.img-modal {
   max-width: 150px;
}





@media (max-width: 768px) {
   .l-brilla-ruleta2 img {
      max-width: 150px;
   }

   .l-edusurte2 img {
      max-width: 150px;
   }

   .trian-gulo img {
      max-width: 50px;
   }

   .super-salud-ruleta {
      position: absolute;
      top: 35%;
      left: 10px;
   }

   .super-salud-ruleta img {
      max-width: 25px;
   }


}

@media (max-width: 600px) {
   .ruleta-2022 {
      width: 280px;

   }

   .la-ruleta2 {
      position: relative;
      z-index: 3;

   }

   .la-ruleta2 img {
      width: 280px;
   }

   .capa-ruleta {
      position: absolute;
      z-index: 4;

   }

   .capa-ruleta img {

      width: 280px;
   }

   .podium-ruleta img {

      max-width: 280px;
   }

   .podium-ruleta {
      position: absolute;
      bottom: -30%;
      z-index: 1;
   }


}

.box-roulette {
   /* transform: rotate(90deg); */
   position: relative;
   margin: 0 auto;
   width: 480px;
   height: 480px;
   border: 0 solid #f6b93b;
   border-radius: 50%;
   background: #f6b93b;
   overflow: hidden;
}

.box-roulette .markers {
   position: absolute;
   left: 50%;
   top: -2%;
   margin-left: 0px;
   width: 0;
   height: 0;
   border: 18px solid transparent;
   border-right-color: transparent;
   z-index: 9999;
   border-left: 30px solid #ffffff00;
   border-top: 0px solid transparent;
   border-bottom: 55px solid transparent;
   transform: rotate(-15deg);
}

.box-roulette .roulette {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
}

.box-roulette .item {
   position: absolute;
   top: 0;
   width: 0;
   height: 0;
   border: 0 solid transparent;
   transform-origin: 0 100%;
}

.box-roulette .label {
   position: absolute;
   left: 0px;
   top: -14px;
   color: #fff;
   width: 108px;
   transform-origin: 0 0;
   text-shadow: 0px 4px 8px rgb(0 0 0 / 20%);
   font-family: 'Source Sans Pro';
   letter-spacing: 0;
}

.box-roulette .label .text {
   display: inline-block;
   font-size: 13px;
   font-weight: bold;
   line-height: 1;
   vertical-align: middle;
   white-space: break-spaces;
   text-transform: none;
   letter-spacing: 0;
   text-align: left;
}

.info {
   position: absolute;
   width: 480px;
   left: 240px;
   font-size: 20px;
   line-height: 1.4;
}

.info.r {
   right: 240px;
   left: unset;
}

.info p {
   margin-bottom: 28px;
}

span.b {
   font-weight: bold;
   color: white;
   padding: 2px;
}

span.red {
   background-color: #e55039;
}

span.green {
   background-color: #079992;
}

span.black {
   background-color: #0a3d62;
}

.pattern {

   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
   position: absolute;
}

@media (max-width: 914px) {
   .ruleta-2022 {
      margin-top: 25em;
   }
}

@media (max-width: 540px) {
   .capa-ruleta {
      top: 8em;
   }

   .podium-ruleta {
      bottom: 22%;
   }

   .modales-ruleta-land {
      width: 84%;
   }

   .ruleta-2022 {
      margin-top: 15em;
   }

   .box-roulette {
      width: 250px;
      height: 250px;
   }

   .box-roulette .label {
      width: 68px;
   }

   .box-roulette .label .text {
      font-size: 10px;
   }
}

@media (max-width: 480px) {
   .modales-ruleta-land h4 {
      font-size: 1.8rem;
   }

   .capa-ruleta {
      top: 12em;
   }

   .podium-ruleta {
      bottom: 29%;
   }

   .modales-ruleta-land {
      width: 84%;
   }

   #terminos {
      width: 20px;
   }

   .box-roulette {
      width: 260px;
      height: 260px;
      margin-top: 31px;
   }

   .ruleta-2022 {
      margin-top: 18em;
   }

   .box-roulette .label {
      left: 2px;
      top: -15px;
      color: #fff;
      width: 68px;
      letter-spacing: 0;
   }

   .box-roulette .label .text {
      font-size: 9px;
   }
}

/* ==========================================================================
   juego ruleta!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
   ========================================================================== */