@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');

:root {
  --left-initial-dg: 180deg;
  --right-initial-dg: 180deg;
  --left-time: 12.5s;
  --right-time: 12.5s;
}

.pointer {
  cursor: pointer;
}

html, body {height: 100%; position: relative}
body {font-family: 'Montserrat', sans-serif; font-weight: 400; background-color: #181818;}
h1, h2, h3, h4, h5, h6, p, a {font-family: 'Montserrat', sans-serif;}
p {color: #FFFFFF; font-size: 17px; line-height: 22px;}
h2 {font-size: 25px; line-height: 31px; letter-spacing: 2px; font-weight: 700;}
h3 {font-size: 20px; line-height: 25px; font-weight: 600;}
.w600 {font-weight: 600;}
.w500 {font-weight: 500;}
.w700 {font-weight: 700;}
a {-moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;}
.white {color: #FFFFFF;}
.ls-4 {letter-spacing: 4px;}

/* HOME */

.bg-home {background-image: url(../img/bg-niveles.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center;}
.bg-nivel1 {background-image: url(../img/orientacion-cliente.png);background-position: center center; background-size: contain; min-height: 250px; background-repeat: no-repeat;}
.bg-nivel2 {background-image: url(../img/box-rosa.png);background-position: center center; background-size: contain; min-height: 250px; background-repeat: no-repeat;}
.bg-nivel3 {background-image: url(../img/box-azul.png);background-position: center center; background-size: contain; min-height: 250px; background-repeat: no-repeat;}
.bg-nivel4 {background-image: url(../img/box-naranja.png);background-position: center center; background-size: contain; min-height: 250px; background-repeat: no-repeat;}
.margin-box {margin-top: 21%;margin-left: 20%;}
.btn-play {position: absolute; right: 57px; width: 95px; bottom: 45px;}
.btn-play-rosa {position: absolute; right: 58px; width: 94px; bottom: 38px;}
.btn-play-azul {position: absolute; right: 53px; width: 97px; bottom: 37px;}
.btn-play-naranja {position: absolute; right: 63px; width: 95px; bottom: 36px;}
.bg-line {background-image: url(../img/line-box.png); background-repeat: no-repeat; background-size: 36%; background-position: center center;}
.nav-link {color: #FFFFFF !important; font-size: 13px; font-weight: 500; letter-spacing: 2px;}

.box-level p { font-weight: 600; font-size: 16px; line-height: 21px;}
.box-puntaje {border: 1px solid #e7b1fd; width: fit-content; margin: 0 auto; padding: 3px 27px 5px 20px; border-radius: 10px; background-color: rgb(255 255 255 / 13%);
}

.text-shadow-white {text-shadow: rgba(255,255,255,0.93) 0px 0px 10px;}
.transparent {position: relative;text-align: center;line-height: 44px;vertical-align: middle;color: #ffffff;display: inline-block;border-width: 0;border-style: solid;
border-color: #ffffff;padding: 0px 30px !important;cursor: pointer;background: transparent;height: 44px;}
.transparent span {z-index: 20;position: relative;}
.transparent:hover {border-color: #e7b1fd !important;}
.transparent::before, .transparent::after {content: '';position: absolute;border-color: inherit;border-style: inherit;height: 50%;
width: 100%;left: 0;z-index: 10;background-color:transparent;}
.transparent::before {border-width: 2px 2px 0 2px;top: 0;transform-origin: center bottom;transform: perspective(0.3rem) rotateX(3deg);}
.transparent::after {border-width: 0 2px 2px 2px;bottom: 0;transform-origin: center top;transform: perspective(0.3rem) rotateX(-3deg);}
a.nav-link.transparent:hover {text-shadow: 0px 0px 13px #b58cd5; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;}
.zoom-btn {transition: transform 0.3s ease-in-out;}
.zoom-btn:hover {transform: scale(1.1);}

/* INTRO */
.bg-intro {background-image: url(../img/bg-intro.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center;}
.box-intro {background-image: url(../img/box-intro.png); background-size: contain; background-repeat: no-repeat; background-position: center center; min-height: 520px;}
.rosa {color: #f2d7ff}
.diagonal-box {-moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; transform: skew(20deg); min-height: 60px; background-color: rgb(233 179 255 / 50%); padding: 10px 14px; border: 2px solid #e9b3ff; border-radius: 5px;}
.diagonal-box p {transform: skew(-20deg); font-size: 15px; line-height: 18px; font-weight: 600;}
.mt-30 {margin-top: -30px;}
.transparent.btn-jugar {transition: all 0.35s; font-size: 20px; letter-spacing: 0; font-weight: 700; padding: 0 60px !important; height: 54px; line-height: 52px;}
.rosa2 {color: #e4aff6;}
/*.btn-jugar:hover::after {box-shadow: 0 0.25em 0.25em -0.1em #e7b1fd; border-width: 0 3px 3px 3px;}*/
.btn-jugar:hover {transform: translateY(-0.25em);}
.transparent:hover::after {border-width: 0 3px 3px 3px;}
.transparent:hover::before {border-width: 3px 3px 0 3px;}
.btn-jugar:hover::after {box-shadow: 0 0.4em 0.7em -0.2em #876aa4}



/* NIVEL 1 */
.mh520 {min-height: 520px;}
.back-nivel1 {background-image: url(../img/bg-nivel1.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center;}
.box-nivel1 {background-image: url(../img/box-nivel1.png); background-size: contain; background-repeat: no-repeat; background-position: center center; min-height: 570px;}
.box-intro-nivel1 {background-image: url(../img/box-intro-nivel1.png); background-size: contain; background-repeat: no-repeat; background-position: center center; min-height: 510px;}
.green {color: #92fff7;}
.text-shadow-green {text-shadow: rgba(146,255,247,0.93) 0px 0px 10px;}
.diagonal-green {background-color: rgb(146 255 247 / 25%); border: 2px solid #73f7f0; cursor: pointer; padding: 10px 20px;}
.diagonal-green:hover {background-color: rgb(146 255 247 / 70%);}
.font31 {font-size: 31px; letter-spacing: 0; line-height: 35px;}
.font19 {font-size: 19px; line-height: 28px;}
.mt-73 {margin-top: -73px;}
.btn-nivel1:hover::after {box-shadow: 0 0.4em 0.7em -0.2em #92fff8c0; border-color: #92fff7}
.btn-nivel1:hover::before {border-color: #92fff7}
h1#score_star {
  font-size: 110px;
  line-height: 115px;
}
.progress{width: 55px; height: 55px; line-height:55px; background: none; background: #000000; margin: 0 auto; border-radius: 50%; box-shadow: none; position: relative;}
.progress:after{content: ""; width: 100%; height: 100%; border-radius: 50%; border: 2.5px solid rgb(0 0 0 / 40%);
  position: absolute; top: 0; left: 0;}
.progress > span{width: 50%; height: 100%; overflow: hidden; position: absolute; top: 0;
  z-index: 1;}
.progress .progress-left{left: 0;}
.progress .progress-bar{width: 100%; height: 100%; background: none; border-width: 3px;
  border-style: solid; position: absolute; top: 0;}
.progress .progress-left .progress-bar{
  left: 100%;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.progress .progress-right{
  right: 0;
}
.progress .progress-right .progress-bar{
  left: -100%;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-1 var(--right-time) linear forwards var(--left-time);
  -webkit-transform: rotate(var(--right-initial-dg));
  transform: rotate(var(--right-initial-dg));
}
.progress .progress-value{
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: transparent;
  font-size: 15px;
  color: #ffffff;
  line-height: 50px;
  text-align: center;
  position: absolute;
  top: 5%;
  left: 5%;
}
.progress.violeta .progress-bar{
  border-color: #8f20f3;
}
.progress .progress-left .progress-bar{
  animation: loading-1 var(--left-time) linear forwards;
  -webkit-transform: rotate(var(--left-initial-dg));
  transform: rotate(var(--left-initial-dg));
}

@keyframes loading-1{
  0%{
      -webkit-transform: rotate(var(--left-initial-dg));
      transform: rotate(var(--left-initial-dg));
  }
  100%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
}
@keyframes loading-2{
  0%{
      -webkit-transform: rotate(var(--right-initial-dg));
      transform: rotate(var(--right-initial-dg));
  }
  100%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
}
@keyframes loading-3{
  0%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100%{
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
  }
}
@keyframes loading-4{
  0%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100%{
      -webkit-transform: rotate(36deg);
      transform: rotate(36deg);
  }
}
@keyframes loading-5{
  0%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100%{
      -webkit-transform: rotate(126deg);
      transform: rotate(126deg);
  }
}
.box-pregunta {border: 2px solid; border-radius: 11px; padding: 5px 20px; background-color: #050009;}
.top-timer-verde {right: 150px; top: -25px;}
.border-verde {border-color: #02fbf1;}
.progress.verde .progress-bar{
  border-color: #02fbf1;
}
.top-box-verde {top: -15px; left: 170px;}


/* NIVEL 2 */
.back-nivel2 {background-image: url(../img/bg-nivel2.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center;}
.violeta {color: #c28dff;}
.text-shadow-violeta {text-shadow: rgba(194,141,255,0.93) 0px 0px 10px;}
.box-intro-nivel2 {background-image: url(../img/box-intro-nivel2.png); background-size: contain; background-repeat: no-repeat; background-position: center center; min-height: 470px;}
.box-nivel2 {background-image: url(../img/box-nivel2.png); background-size: contain; background-repeat: no-repeat; background-position: center center; min-height: 570px;}
.diagonal-violeta {background-color: rgba(143, 32, 243, 0.451); border: 2px solid #c28dff; cursor: pointer; padding: 10px 20px;}
.diagonal-violeta:hover {background-color: rgb(143 32 243 / 70%);}
.border-violeta {border-color: rgb(143 32 243);}
.top-box-violeta {top: 5px; left: 160px;}
.box-pregunta p {font-size: 13px;}
.top-timer-violeta {right: 180px; top: 0px;}


/* NIVEL 3 */
.back-nivel3 {background-image: url(../img/bg-nivel3.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center;}
.box-nivel3 {background-image: url(../img/box-nivel3.png); background-size: contain; background-repeat: no-repeat; background-position: center center;}
.azul {color: rgb(62, 141, 255);}
.text-shadow-azul {text-shadow: rgba(62,141,255,0.93) 0px 0px 10px;} 
.diagonal-azul {background-color: rgb(62 141 255 / 45%); border: 2px solid rgb(62, 141, 255); cursor: pointer; padding: 10px 20px;}
.diagonal-azul:hover {background-color: rgb(62 141 255 / 70%);}
.box-intro-nivel3 {background-image: url(../img/box-intro-nivel3.png); background-size: contain; background-repeat: no-repeat; background-position: center center; min-height: 470px;}
.top-timer-azul {right: 100px;  top: 0px;}
.border-azul {border-color: #275cdf;}
.progress.azul .progress-bar{
  border-color: #275cdf;
}
.top-box-azul {top: 37px; left: 130px;}
.btn-nivel3:hover::after {box-shadow: 0 0.4em 0.7em -0.2em #275bdfad; border-color: #3e8dff}
.btn-nivel3:hover::before {border-color: #3e8dff}


/* NIVEL 4 */
.back-nivel4 {background-image: url(../img/bg-nivel4.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center;}
.box-nivel4 {background-image: url(../img/box-nivel4.png); background-size: contain; background-repeat: no-repeat; background-position: center center;}
.naranja {color: #ff6840;}
.text-shadow-naranja {text-shadow: rgba(255,104,64,0.93) 0px 0px 10px;} 
.diagonal-naranja {background-color: rgb(255 104 64 / 15%); border: 2px solid #ff6840; cursor: pointer; padding: 10px 20px;}
.diagonal-naranja:hover {background-color: rgb(255 104 64 / 70%);}
.box-intro-nivel4 {background-image: url(../img/box-intro-nivel4.png); background-size: contain; background-repeat: no-repeat; background-position: center center; min-height: 430px;}
.top-timer-naranja {right: 150px; top: 0px;}
.border-naranja {border-color: #e45f28;}
.progress.naranja .progress-bar{
  border-color: #e45f28;
}
.top-box-naranja {top: 10px; left: 120px;}
.btn-nivel4:hover::after {box-shadow: 0 0.4em 0.7em -0.2em #ff6940b1; border-color: #ff6840}
.btn-nivel4:hover::before {border-color: #ff6840}

/* RANKING */
.box-ranking {background-image: url(../img/bg-ranking.png); background-size: contain; background-repeat: no-repeat; background-position: center center; min-height: 540px;}
.font12 {font-size: 12px;line-height: 17px;}
.font11 {font-size: 11px;line-height: 15px;}
.line-degrade {height: 0.75px; background: rgb(233, 179, 255); background: linear-gradient(90deg, rgba(233, 179, 255, 0) 0%, rgba(233, 179, 255, 1) 50%, rgba(233, 179, 255, 0) 100%);}
.box-ranking-scroll {overflow-x: auto; max-height: 250px;}
/* Chrome, Edge and Safari */
.box-ranking-scroll::-webkit-scrollbar {height: 10px;width: 10px;-webkit-box-shadow:0px 0px 18px 3px rgba(233,179,255,0.26);-moz-box-shadow: 0px 0px 18px 3px rgba(233,179,255,0.26);box-shadow: 0px 0px 18px 3px rgba(233,179,255,0.26);}
.box-ranking-scroll::-webkit-scrollbar-track {border-radius: 4px;background-color: #ffffff00;border: 2px solid #E9B3FF;}
.font13 {font-size: 13px; line-height: 18px;}
.box-ranking-scroll::-webkit-scrollbar-track:hover {
  background-color: #ffffff00;
}

.box-ranking-scroll::-webkit-scrollbar-track:active {
  background-color: #ffffff00;
}

.box-ranking-scroll::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #E9B3FF;
  border: 2px solid #E9B3FF;
}

.box-ranking-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #E9B3FF;
}

.box-ranking-scroll::-webkit-scrollbar-thumb:active {
  background-color: #E9B3FF;
}

/* PUNTAJE */
.bg-puntaje {background-image: url(../img/bg-puntaje.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center;}
.font22 {font-size: 22px; line-height: 30px;}
.font25 {font-size: 25px; line-height: 35px;}
.font40 {font-size: 40px; line-height: 45px;}
.bottom-10 {bottom: 10%;}
.cursor::after {content: ''; background-image: url(../img/cursor-ranking.png); height: 45px; width: 55px; position: absolute; background-size: contain; background-repeat: no-repeat; bottom: -45px; right: -20px;}

/* INDEX */
.bg-index {background-image: url(../img/bg-index.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center;}
h1 {font-size: 75px; line-height: 75px;}
.font32 {font-size: 32px; line-height: 32px;}
.mt-30-index {margin-top: -30px;}

/* FELICITACIONES */
.font15 {font-size: 15px; line-height: 21px;}
.box-felicitaciones {min-height: 280px; background-image: url(../img/box-felicitaciones.png); background-size: contain; background-repeat: no-repeat; background-position: center center;}


.bg-green {background-color: #22D57A !important; color: #FFFFFF;}
.bg-red {background-color: #FC4848 !important; color: #FFFFFF;}
.bg-white{background-color: white !important;}

::selection {background-color: #568fc5; color: #ffffff;}


@media (max-width: 1400px) {
  .margin-box {
    margin-top: 25%;
   }
   .top-timer-naranja {
    right: 120px;
    top: 30px;
}
.top-box-verde {
  top: 20px;
  left: 145px;
 }
   .top-box-naranja {
    top: 40px;
    left: 90px;
}
.top-timer-verde {
  top: 8px;
}
.btn-play {
  right: 35px;
}
.btn-play-rosa {
  right: 36px;
 }
 .btn-play-azul {
  right: 32px;
 }
 .btn-play-naranja {
  right: 41px;
 }
 .top-box-violeta {
  top: 35px;
  left: 140px;
}
.top-timer-violeta {
  top: 25px;
}
.top-box-azul {
  top: 65px; left: 100px;
 }
 .top-timer-azul {
  top: 30px;
}
}

@media screen and (min-width:  1200px) and (max-height: 550px)  {
  .bg-nivel1, .bg-nivel2, .bg-nivel3, .bg-nivel4 {height: 200px; min-height: auto;}
  .box-level p {font-size: 14px; line-height: 20px;}
  .margin-box {margin-top: 18% !important; margin-left: 24%;}
  .btn-play {right: 56px; width: 80px; bottom: 33px;}
.btn-play-rosa {right: 57px; width: 80px; bottom: 27px;}
.btn-play-azul {right: 54px; width: 80px; bottom: 29px;}
.btn-play-naranja {right: 61px; width: 80px; bottom: 25px;}

}

@media screen and (min-width:  1300px) and (max-height: 550px)  {
  .margin-box {margin-top: 18%; margin-left: 24%;}
  .btn-play {right: 56px;}
.btn-play-rosa {right: 57px;}
.btn-play-azul {right: 54px;}
.btn-play-naranja {right: 61px;}

}

@media screen and (min-width:  1400px) and (max-height: 550px)  {
  .margin-box {margin-top: 16% !important; margin-left: 28%;}
  .btn-play {right: 86px;}
  .btn-play-rosa {right: 87px;}
  .btn-play-azul {right: 84px;}
  .btn-play-naranja {right: 91px;}
  }
 


  
@media (max-width: 1300px) {
  .diagonal-box {min-height: 50px;}
  .diagonal-box p {font-size: 13px;line-height: 16px;}
  h3 {
    font-size: 20px;
    line-height: 25px;
 }
.margin-box {
  margin-top: 25%;
}
 }

 @media (max-width: 1200px) {
  .top-timer-violeta {
    top: 15px;
}

  h3 {
    font-size: 21px;
    line-height: 27px;
   }
  .margin-box {
    margin-top: 23%;
}
  .btn-play {
    right: 40px;
  }
  .btn-play-rosa {
    right: 40px;
}
.btn-play-azul {
  right: 37px;
}
.btn-play-naranja {
  right: 46px;
}
.box-intro p {
  font-size: 15px;
  line-height: 20px;
}
.top-box-violeta {
  top: 30px;
}
   }

 @media (max-width: 990px) {
  .top-timer-azul {
    top: 25px;
}
.top-box-azul {
  top: 60px;
}
  .box-ranking-scroll {
    max-height: 180px;
}
  .mt-30 {
    margin-top: -70px;
}
.diagonal-box p {
  font-size: 14px;
  line-height: 19px;
}
.font31 {
  font-size: 27px !important;
  line-height: 33px !important;
}
h3 {
  font-size: 20px;
  line-height: 26px;
 }
  .btn-play {
    right: 36px;
        width: 82px;
        bottom: 57px;
}
.btn-play-rosa {
  right: 38px;
  width: 80px;
  bottom: 51px;
}
.btn-play-naranja {
  right: 42px;
  width: 82px;
  bottom: 47px;
}
.btn-play-azul {
  right: 33px;
  width: 83px;
  bottom: 49px;
}
 .transparent {
  line-height: 35px;
  padding: 0px 26px !important;
  height: 36px;
}

.nav-link {
  font-size: 11px;
 }
 .margin-box {
  margin-top: 28%;
}
 .box-level p {
  font-size: 14px;
  line-height: 20px;
}
 .bg-line {
  background-size: 55%;
}
 h2 {
  font-size: 20px;
  line-height: 25px;
 }
}


@media (max-width: 767px) {
  h1#score_star {
    font-size: 80px;
    line-height: 85px;
  }
  .bg-home {background-image: url(../img/bg-home-mob.jpg);}
  .mh520 {min-height: 470px;}
  .position-absolute.top-timer-violeta {position: relative !important; top: 0; right: 20px;}
  .position-absolute.top-timer-azul {position: relative !important; top: 0; right: 20px;}
  .position-absolute.top-timer-naranja {position: relative !important; top: 0; right: 20px;}
  .position-absolute.top-timer-verde {position: relative !important; top: 0; right: 20px;}
  .line-home img {width: 100%; height: auto !important;}
  .box-intro-nivel1 {min-height: auto; background-image: none;}
  .box-intro-nivel2 {min-height: auto; background-image: none;}
  .box-intro-nivel3 {min-height: auto; background-image: none;}
  .box-intro-nivel4 {min-height: auto; background-image: none;}
  .box-ranking {min-height: auto; background-image: none;}
  .mt-30 {margin-top: 20px;}
  h1 {font-size: 65px; line-height: 65px;}
  .h-768-auto {height: auto !important;}
  .box-nivel1 {min-height: auto; background-image: none;}
  .box-nivel2 {min-height: auto; background-image: none;}
  .box-nivel3 {background-image: none;}
  .box-nivel4 {background-image: none;}
  .box-intro {min-height: auto; background-image: none;}
  .box-mobile-intro {-webkit-box-shadow:0px 0px 11px 2px rgba(233,179,255,0.64); -moz-box-shadow: 0px 0px 11px 2px rgba(233,179,255,0.64); box-shadow: 0px 0px 11px 2px rgba(233,179,255,0.64); border-radius: 5px; border: 2px solid #e9b3ff;}
  .box-mobile-ranking {-webkit-box-shadow:0px 0px 11px 2px rgba(233,179,255,0.64); -moz-box-shadow: 0px 0px 11px 2px rgba(233,179,255,0.64); box-shadow: 0px 0px 11px 2px rgba(233,179,255,0.64); border-radius: 5px; border: 2px solid #e9b3ff;}
  .box-mobile-green {-webkit-box-shadow:0px 0px 11px 2px rgba(115, 247, 240, 0.60); -moz-box-shadow: 0px 0px 11px 2px rgba(115, 247, 240, 0.60); box-shadow: 0px 0px 11px 2px rgba(115, 247, 240, 0.60); border-radius: 5px; border: 2px solid #73f7f0;}
  .box-mobile-violeta {-webkit-box-shadow:0px 0px 11px 2px rgba(194, 141, 255, 0.60); -moz-box-shadow: 0px 0px 11px 2px rgba(194, 141, 255, 0.60); box-shadow: 0px 0px 11px 2px rgba(194, 141, 255, 0.60); border-radius: 5px; border: 2px solid rgb(194, 141, 255);}
  .box-mobile-azul {-webkit-box-shadow:0px 0px 11px 2px rgba(62, 141, 255, 0.60); -moz-box-shadow: 0px 0px 11px 2px rgba(62, 141, 255, 0.60); box-shadow: 0px 0px 11px 2px rgba(62, 141, 255, 0.60); border-radius: 5px; border: 2px solid rgb(62, 141, 255);}
  .box-mobile-naranja {-webkit-box-shadow:0px 0px 11px 2px rgba(233, 97, 42, 0.60); -moz-box-shadow: 0px 0px 11px 2px rgba(233, 97, 42, 0.60); box-shadow: 0px 0px 11px 2px rgba(233, 97, 42, 0.60); border-radius: 5px; border: 2px solid rgb(233, 97, 42);}
  .transparent.btn-jugar {font-size: 17px; padding: 0 50px !important; height: 52px; line-height: 49px; transition: all 0.35s;}
  .box-intro p {font-size: 14px; line-height: 18px;}
  .btn-play {right: 55px; width: 94px; bottom: 45px;}
.btn-play-rosa {right: 55px; width: 95px; bottom: 36px;}
.btn-play-azul {right: 52px; width: 95px; bottom: 38px;}
.btn-play-naranja {right: 61px;width: 95px; bottom: 35px;}
.box-level p {
  font-size: 18px;
  line-height: 22px;
}
.margin-box {
  margin-top: 23%;
}
.bg-line {background-image: none;}
.br-hide {display: none;}
.mt-73 {
  margin-top: 0;
}
.box-pregunta.position-absolute {
  position: relative !important; left: 20px;
}

.top-box-violeta {
  top: 0;
}
.top-box-azul {
  top: 0;
}
.top-box-naranja {
  top: 0; left: auto;
}
.top-box-verde {
  top: 0; 
}
}

@media (max-width: 575px) {
  .font15 {
    font-size: 13px;
    line-height: 19px;
}
.box-felicitaciones .box-puntaje {
  padding: 8px;
}
.box-felicitaciones .font40 {
  font-size: 29px;
  line-height: 39px;
  letter-spacing: 1px;
}
.box-felicitaciones .box-puntaje img {
  height: 40px;
}
  h3 {
    font-size: 17px;
    line-height: 24px;
}
  .mt-80-mob {margin-top: -80px;}
  .font25 {
    font-size: 21px;
    line-height: 30px;
}
.diagonal-box p {
  font-size: 13px;
  line-height: 18px;
}
.cursor::after {
  height: 35px;
  width: 45px;
  bottom: -33px;
  right: -40px;
}
.font40 {
  font-size: 34px;
  line-height: 39px;
}
.font22 {
  font-size: 18px;
  line-height: 26px;
}
  .font19 {
    font-size: 17px;
    line-height: 27px;
}
  img.logo {
    height: 45px;
    width: auto;
}
.transparent {
  padding: 0px 23px !important;
}
.margin-box {
  padding-top: 18%;
  margin-left: 0%;
  margin-top: 0;
}
.box-ranking-scroll {
  max-height: 330px;
}
}

@media (max-width: 450px) {
  h1 {
    font-size: 50px;
    line-height: 50px;
}
.font32 {
  font-size: 24px;
  line-height: 24px;
}
.mt-30-index {
  margin-top: -23px;
}
  .bg-nivel1, .bg-nivel2, .bg-nivel3, .bg-nivel4 {
    min-height: 210px;
}
.box-level p {
  font-size: 15px;
  line-height: 20px;
}
.margin-box {
  padding-top: 19%;
 }
}