* {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
}

@font-face {
  font-family: "Latina bold";
  src: url("../fonts/latbold/Latina W00 Bold.ttf");
}
@font-face {
  font-family: "Latina regular";
  src: url("../fonts/latregular/Latina W00 Regular.ttf");
}
@font-face {
  font-family: "Latina ultra heavy";
  src: url("../fonts/latultheav/Latina W00 Ultra Heavy.ttf");
}
@font-face {
  font-family: "Digital";
  src: url("../fonts/digital/wwDigital.ttf");
}
@font-face {
  font-family: "Paytone";
  src: url("../fonts/paytone/PaytoneOne.ttf");
}
.fullContent {
  width: 100%;
  height: 100vh;
}

/*sandwatch variables*/
:root {
  --bg: #255ff4;
  --fg: #C2B280;
  --primary: #fff;
}

.paytone {
  font-family: "Paytone";
}

#main {
  background: #001521;
}

#body {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

.menu.menu-opened {
  position: relative;
  top: 40px !important;
  z-index: 2999 !important;
}

.shadowspecial {
  color: #831202;
  font-family: "Latina ultra heavy";
  text-shadow: 0px 0 0 #dd8f4a, 0px 0 0 #d68a35, 0 0px 0 #7c6734, 0 0px 0 #f4c965, 2px 1px #e0a85a, -1px -1px 0 #efa641, 1px -1px 0 #b3863a, -1px 1px 0 #bd813f;
}

.swiper-pagination-bullet-active {
  background: rgb(250, 205, 103) !important;
  background: linear-gradient(90deg, rgb(250, 205, 103) 0%, rgb(254, 166, 53) 60%) !important;
}

.swiper-button-next, .swiper-button-prev {
  color: rgb(250, 205, 103) !important;
  color: linear-gradient(90deg, rgb(250, 205, 103) 0%, rgb(254, 166, 53) 60%) !important;
}

.body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(13, 0, 13, 0.38);
  z-index: 1500;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.5s;
}

.menu-opened.body::after {
  opacity: 1;
  transform: scale(1);
}

#header {
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(360deg, #001521, transparent 47%);
  z-index: 55;
}

#mobileMenu {
  position: fixed;
  width: 50%;
  height: 50%;
  background-color: rgb(0, 74, 61);
  background: linear-gradient(180deg, rgb(0, 74, 61) 0%, rgb(0, 57, 53) 34%, rgb(0, 38, 44) 64%, rgb(0, 21, 33) 100%);
  top: -400%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  border-radius: 0.8rem;
  transition: all 500ms;
  padding: 15%;
}
#mobileMenu .mobileUl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
#mobileMenu .mobileUl li {
  width: 120%;
  height: 100%;
  border: 4px solid #ce7318;
  border-radius: 20px;
}
#mobileMenu .mobileUl li a {
  font-size: 1.5rem;
  transition: all 0.6s;
  padding: 1%;
}
#mobileMenu a img {
  width: 40%;
}

#mobileMenuform {
  position: fixed;
  width: 50%;
  height: 50%;
  background-color: rgb(0, 74, 61);
  background: linear-gradient(180deg, rgb(0, 74, 61) 0%, rgb(0, 57, 53) 34%, rgb(0, 38, 44) 64%, rgb(0, 21, 33) 100%);
  top: -400%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  border-radius: 0.8rem;
  transition: all 500ms;
  padding: 15%;
}
#mobileMenuform .mobileUl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
#mobileMenuform .mobileUl li {
  width: 120%;
  height: 100%;
  border: 4px solid #ce7318;
  border-radius: 20px;
}
#mobileMenuform .mobileUl li a {
  transition: all 0.6s;
  padding: 1%;
}
#mobileMenuform a img {
  width: 40%;
}

#buttonsMobile {
  margin-top: 1.5rem;
}
#buttonsMobile li {
  width: 100%;
  height: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}
#buttonsMobile li a img {
  width: 100%;
}

#navsup {
  width: 85%;
  height: 10vh;
  background: rgb(77, 53, 19);
  background: linear-gradient(90deg, rgb(77, 53, 19) 0%, rgb(70, 48, 16) 35%, rgb(70, 48, 16) 100%);
  border: 5px solid;
  border-image: -webkit-gradient(linear, right bottom, left top, from(#7e5023), to(#dcae19));
  border-image: linear-gradient(right, #7e5023, #dcae19);
  border-image-slice: 1;
  z-index: 199;
  top: 0px;
  padding: 2.5%;
}
#navsup ul {
  width: 45%;
}
#navsup ul a {
  font-size: 1.4rem;
  transition: all 0.6s;
}
#navsup ul a:hover {
  transform: scale(1.5, 1.5);
  transition: all 0.6s;
}

#hambMenu {
  display: none;
}

#hambMenuClose {
  position: absolute;
  top: 0;
  right: 2%;
  display: flex;
  justify-content: end;
}
#hambMenuClose img {
  width: 10%;
}

#logo {
  width: 20%;
}
#logo a {
  left: -4%;
  width: 20%;
}
#logo a img:first-child {
  height: 7.5rem;
  margin-top: -0.5rem;
}
#logo a img:nth-child(2) {
  height: 50%;
}
#logo a img {
  width: 115px;
  height: 115px;
}
#frase {
  width: 73%;
  height: 50%;
}
#frase #frase1 {
  font-family: "Latina ultra heavy";
  font-size: 35px;
}
#frase #frase2 {
  font-family: "Latina regular";
  font-size: 20px;
}
#frase div {
  width: 100%;
  display: flex;
}
#frase div img {
  width: 20%;
  margin-top: 40px;
  z-index: 100;
}

#buttons {
  width: 30%;
}
#buttons li {
  width: 50%;
}
#buttons li a img {
  width: 80%;
}

#bannerAndAnnounce {
  background-color: #001521;
}
#bannerAndAnnounce #banner {
  background-color: #fff;
  width: 70%;
  height: 60%;
}
#bannerAndAnnounce #announce {
  background-color: #fff;
  width: 40%;
  height: 15%;
}

#caracteristics {
  width: 80%;
  background-color: #001521;
}
#caracteristics .caracteristic {
  width: 35%;
  height: 70%;
}
#caracteristics .caracteristic .imagecaract {
  height: 50%;
}
#caracteristics .caracteristic img {
  width: 50%;
}
#caracteristics .caracteristic .title {
  font-family: "Latina ultra heavy";
}
#caracteristics .caracteristic .text {
  width: 70%;
  font-family: "Latina regular";
  font-size: 17px;
}
#caracteristics .caract-center {
  color: white;
  border-width: 3px;
  border-style: solid;
  border-image: linear-gradient(to top, #6d7a80, rgba(0, 0, 0, 0)) 1 100%;
}

#raceSectionAndfaq {
  background-image: url(../img/landing/FONDO\ PIEDRAS-06.png);
  background-size: 100% 100%;
  width: 100%;
  height: auto;
  position: relative;
  padding-bottom: 100px;
  margin-top: 10%;
}
#raceSectionAndfaq #races {
  width: 75%;
  height: 30%;
  margin: auto;
  margin-top: 5%;
  margin-bottom: 5%;
}
#raceSectionAndfaq #races .race {
  position: relative;
  width: 31%;
  height: 40%;
  z-index: 60;
  overflow: hidden;
  border-image-slice: 1;
  border-radius: 1rem;
  cursor: pointer;
}
#raceSectionAndfaq #races .race img {
  transition: all 400ms ease-out;
  will-change: transform;
}
#raceSectionAndfaq #races .race .capa {
  background: rgba(15, 22, 35, 0.342);
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 400ms ease-out;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  border-radius: 1rem;
  opacity: 0;
  visibility: hidden;
  text-align: center;
}
#raceSectionAndfaq #races .race .capa p:first-child {
  font-family: "Latina ultra heavy";
  font-size: 1.5rem;
}
#raceSectionAndfaq #races .race .capa p:nth-child(2) {
  color: #f7c603;
  width: 90%;
  font-family: "Latina bold";
  font-size: 0.9rem;
}
#raceSectionAndfaq #races .race:hover .raceelements {
  display: none;
}
#raceSectionAndfaq #races .race:hover .capa {
  opacity: 1;
  visibility: visible;
}
#raceSectionAndfaq #races .race:hover .capa p:first-child {
  margin-top: 10%;
  margin-bottom: 5%;
}
#raceSectionAndfaq #races .race:hover img {
  transform: scale(1.3);
}
#raceSectionAndfaq #races .race .capa p:first-child {
  margin-bottom: 30%;
  transition: all 400ms ease-out;
  margin-top: 25%;
}
#raceSectionAndfaq .raceTitle {
  font-family: "Latina ultra heavy";
  font-size: 1.6rem;
}
#raceSectionAndfaq .raceDescription {
  color: #ffb800;
  font-family: "Latina bold";
  font-size: 15px;
}
#raceSectionAndfaq #faq {
  width: 90%;
  height: auto;
  margin: auto;
  z-index: 500;
}
#raceSectionAndfaq #faq #textandline {
  width: 80%;
  height: 10%;
  margin-bottom: 5%;
}
#raceSectionAndfaq #faq #textandline p {
  width: 20%;
  font-family: "Latina regular";
  font-size: 85%;
}
#raceSectionAndfaq #faq #textandline #line {
  width: 80%;
  height: 10%;
  border-bottom: 1px solid #fff;
}
#raceSectionAndfaq #faq #faqs {
  box-sizing: border-box;
  width: 80%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#raceSectionAndfaq #faq .accordionfaq {
  display: flex;
  flex-direction: column;
  background-color: #302910;
  border: 5px solid;
  border-image: -webkit-gradient(linear, right bottom, left top, from(#7e5023), to(#dcae19));
  border-image: linear-gradient(right, #7e5023, #dcae19);
  border-image-slice: 1;
  margin-top: 1px;
  margin-bottom: 5px;
  font-family: "Latina bold";
}
#raceSectionAndfaq #faq .accordionfaq .accordion-link {
  font-size: 1.2rem;
  text-decoration: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem;
  margin-left: 1% !important;
  margin-top: 1%;
  margin: auto;
}
#raceSectionAndfaq #faq .accordionfaq .accordion-link i {
  font-size: 1.2rem;
  padding: 0.5rem;
  margin-right: 2%;
}
#raceSectionAndfaq #faq .accordionfaq .accordion-link .fa-solid.fa-minus {
  display: none;
}
#raceSectionAndfaq #faq .accordionfaq .answer {
  max-height: 0;
  overflow: hidden;
  position: relative;
  background-color: #302910;
  transition: max-height 650ms;
}
#raceSectionAndfaq #faq .accordionfaq .answer p {
  color: #fff;
  font-size: 80%;
  padding: 1rem;
}
#raceSectionAndfaq #faq .accordionfaq .answer::before {
  content: "";
  position: absolute;
  width: 0.6rem;
  height: 100%;
  background-color: #a47233;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
}
#raceSectionAndfaq #faq .accordionfaq:target .answer {
  max-height: 20rem !important;
}
#raceSectionAndfaq #faq .accordionfaq:target .accordion-link .fa-solid.fa-plus {
  display: none;
}
#raceSectionAndfaq #faq .accordionfaq:target .accordion-link .fa-solid.fa-minus {
  display: block;
}

.answerresp {
  max-height: 20rem !important;
}

.noneans {
  display: none !important;
}

.blockansw {
  display: block !important;
}

#announce2 {
  background-color: #fff;
  width: 40%;
  height: 120px;
  margin-top: 20px;
}

#raceSectionAndfaq::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-image: linear-gradient(180deg, #001521, transparent 67%);
  z-index: 50;
}

#contentfoot {
  margin: auto;
  width: 90%;
}

#footer {
  width: 90%;
  margin: auto;
  padding-top: 40px;
  padding-bottom: 40px;
  border-top: 1px solid #fff;
  height: auto;
  font-family: "Latina regular";
}
#footer #menudown {
  width: 65%;
}
#footer #menudown li {
  transition: all 500ms;
}
#footer #menudown li:hover {
  font-family: "Latina bold";
  font-size: 1.2rem;
  transition: all 500ms;
}
#footer #footernet {
  width: 30%;
  justify-content: end;
}
#footer #footernet ul {
  width: 50%;
}
#footer #footernet ul a i {
  transition: all 500ms;
}
#footer #footernet ul li:hover a i {
  rotate: 360deg;
  transition: all 500ms;
}
#footer #footernet ul li i {
  font-size: 25px;
}

#titreg {
  font-family: "Latina bold";
}

#textreg {
  font-family: "Latina regular";
}

#register {
  width: 90%;
}

#createlog {
  width: 15%;
  border-radius: 90px;
  background-color: #426264;
  font-family: "Latina bold";
}

#registerdiv {
  width: 100%;
}
#registerdiv #form {
  width: 50%;
  margin-bottom: 5%;
}

#formlog input {
  font-family: "Latina bold";
  border: none;
}

#form input {
  background-color: #001521;
  font-family: "Latina bold";
  border: none;
}

#grupo__terminos {
  font-family: "Latina bold";
}

.titulo {
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}

.titulo::before, .titulo::after {
  content: "";
  height: 2px;
  background-color: #fff;
  display: block;
}

#redes {
  width: 20%;
}
#redes a {
  width: 40%;
  border-radius: 40%;
}
#redes a i {
  color: #fff;
}

#redeslog {
  width: 10%;
}
#redeslog a {
  width: 40%;
  border-radius: 40%;
}
#redeslog a i {
  color: #fff;
}

#got {
  border-radius: 90px;
  background-color: #426264;
  font-family: "Latina bold";
}

/* Color forms */
input[type=text],
input[type=password],
input[type=email],
select,
textarea {
  background: #001521;
  color: #fff;
  font-weight: bold;
  border: none;
}

#mainlog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgb(0, 74, 61);
  background: linear-gradient(180deg, rgb(0, 74, 61) 0%, rgb(0, 57, 53) 34%, rgb(0, 38, 44) 64%, rgb(0, 21, 33) 100%);
}
#mainlog header {
  width: 100%;
}
#mainlog #navsup {
  padding: 1% !important;
}
#mainlog #login {
  width: 90%;
  margin: auto;
  margin-top: 5%;
}
#mainlog #login #formlog {
  width: 100%;
}
#mainlog #login #formlog .loginin {
  display: flex;
  width: 40%;
  position: relative;
}
#mainlog #login #formlog .loginin input {
  width: 100%;
}
#mainlog #login #formlog .loginin i:first-child {
  position: absolute;
  transform: translateX(-50%);
  left: 5%;
  color: #fff;
}
#mainlog #login #formlog #loginpass span {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  right: 5%;
}
#mainlog #login #formlog #loginpass span i.hide-btn::before {
  content: "\f070";
}

#logolog {
  width: 150px;
  height: 150px;
}

#loginboton {
  width: 20%;
}

#buttonregister {
  width: 30%;
}

.formulario__input-error {
  font-size: 15px;
  margin-bottom: 0;
  display: none;
}

.formulario__input-error-activo {
  display: block;
  color: #fff;
}

.formulario__validacion-estado {
  position: absolute;
  transform: translateY(70%);
  right: 10px;
  z-index: 100;
  font-size: 16px;
  opacity: 0;
  color: red;
}

.formulario__checkbox {
  margin-right: 10px;
}

.formulario__grupo-terminos,
.formulario__mensaje,
.formulario__grupo-btn-enviar {
  grid-column: span 2;
}

.formulario__mensaje {
  height: 45px;
  line-height: 45px;
  background: #011625;
  padding: 0 15px;
  border-radius: 3px;
  border: 2px solid #fff;
  display: none;
  color: #fff;
}

.formulario__mensaje-activo {
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
}

.formulario__mensaje p {
  margin: 0;
}

.formulario__grupo-btn-enviar {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.formulario__btn {
  height: 45px;
  line-height: 45px;
  width: 30%;
  background: #000;
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: 0.1s ease all;
}

.formulario__btn:hover {
  box-shadow: 3px 0px 30px rgb(163, 163, 163);
}

.formulario__mensaje-exito {
  font-size: 14px;
  color: #011625;
  border: 2px solid #011625;
  background-color: #fff;
  display: none;
}

.formulario__mensaje-exito-activo {
  display: block;
}

/* ----- -----  Estilos para Validacion ----- ----- */
.formulario__grupo-correcto .formulario__validacion-estado {
  position: absolute;
  transform: translateY(70%);
  color: green;
  opacity: 1;
}

.formulario__grupo-incorrecto .formulario__label {
  color: #bb2929;
}

.formulario__grupo-incorrecto .formulario__validacion-estado {
  opacity: 1;
}

.formulario__grupo-incorrecto .formulario__input {
  border: 3px solid #bb2929;
}

/*Interesc styles*/
#headerinter {
  height: 15%;
}
#headerinter #navsup {
  padding: 2.5%;
}
#headerinter #navsup #logo {
  width: 22%;
}
#headerinter #navsup ul {
  width: 50%;
}
#headerinter #navsup .buttonslog {
  width: 25%;
}
#headerinter #navsup .buttonslog li {
  background: rgb(250, 205, 103);
  background: linear-gradient(90deg, rgb(250, 205, 103) 0%, rgb(254, 166, 53) 60%);
  border-radius: 100%;
  margin-left: 1.5% !important;
}

#maininter {
  background: rgb(0, 74, 61);
  background: linear-gradient(180deg, rgb(0, 74, 61) 0%, rgb(0, 57, 53) 34%, rgb(0, 38, 44) 64%, rgb(0, 21, 33) 100%);
  width: 100%;
  height: auto;
}
#maininter #navsup {
  height: 10vh;
}
#maininter #schoolAndRanking {
  width: 85%;
  height: 100vh;
  color: #fff;
  margin-bottom: 10%;
}
#maininter #schoolAndRanking #schoolanddatescanj {
  width: 25%;
  transition: all 500ms;
}
#maininter #schoolAndRanking #schoolanddatescanj #school {
  width: 100%;
  background-color: #001521;
  border-radius: 1rem;
  transition: all 1000ms;
}
#maininter #schoolAndRanking #schoolanddatescanj #school #userAndName {
  width: 90%;
  display: none;
}
#maininter #schoolAndRanking #schoolanddatescanj #school #userAndName #downarrow {
  z-index: 951;
}
#maininter #schoolAndRanking #schoolanddatescanj #school #schoolpicandname {
  width: 90%;
  height: 25%;
  margin: auto;
  font-family: "Latina ultra heavy";
  border-bottom: 1px solid #fff;
}
#maininter #schoolAndRanking #schoolanddatescanj #school #schoolpicandname #pic {
  width: 25%;
  height: 60%;
  background-color: #fff;
  border-radius: 55%;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
#maininter #schoolAndRanking #schoolanddatescanj #school #schoolpicandname #name {
  margin-bottom: 1rem;
}
#maininter #schoolAndRanking #schoolanddatescanj #school #position {
  width: 90%;
  height: 25%;
  margin: auto;
}
#maininter #schoolAndRanking #schoolanddatescanj #school #position span p {
  color: #ffc200;
  font-size: 1.5rem;
  font-weight: bold;
}
#maininter #schoolAndRanking #schoolanddatescanj #school #position .puesto {
  font-family: "Latina bold";
}
#maininter #schoolAndRanking #schoolanddatescanj #school #rankingside {
  cursor: pointer;
  width: 90%;
  height: 25%;
  margin: auto;
  border-bottom: 1px solid #fff;
  border-top: 1px solid #fff;
  font-family: "Latina bold";
}
#maininter #schoolAndRanking #schoolanddatescanj #school #rankingside img {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
#maininter #schoolAndRanking #schoolanddatescanj #school #rankingside p {
  margin-bottom: 1rem;
}
#maininter #schoolAndRanking #schoolanddatescanj #school #points {
  height: 25%;
}
#maininter #schoolAndRanking #schoolanddatescanj #school #points p:first-child {
  font-family: "Latina bold";
}
#maininter #schoolAndRanking #schoolanddatescanj #school #points p:nth-child(2) {
  color: #ffc200;
  font-size: 2rem;
  font-weight: bold;
}
#maininter #schoolAndRanking #schoolanddatescanj #nocanj, #maininter #schoolAndRanking #schoolanddatescanj #bolgo {
  background-color: rgb(28, 25, 1);
  background-color: linear-gradient(180deg, rgb(28, 25, 1) 0%, rgb(60, 44, 10) 50%);
  border: 2px solid #ce7318;
  border-radius: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
#maininter #schoolAndRanking #schoolanddatescanj #nocanj div {
  width: 20%;
  height: 90%;
  background-image: url(../img/acertijos/cofre1.png);
  background-size: 100% 100%;
}
#maininter #schoolAndRanking #schoolanddatescanj #nocanj div img {
  bottom: -0.2rem;
  height: 10rem;
}
#maininter #schoolAndRanking #schoolanddatescanj #nocanj p {
  width: 40%;
}
#maininter #schoolAndRanking #schoolanddatescanj #bolgo a {
  letter-spacing: 0.3rem;
}
#maininter #schoolAndRanking #ranking {
  width: 70%;
  height: 100%;
}

.grower {
  height: 90% !important;
  transition: all 1000ms;
}

.coleg {
  height: 85% !important;
  transition: all 1000ms;
}

#maininteracces {
  background: rgb(0, 74, 61);
  background: linear-gradient(180deg, rgb(0, 74, 61) 0%, rgb(0, 57, 53) 34%, rgb(0, 38, 44) 64%, rgb(0, 21, 33) 100%);
}
#maininteracces #navsup {
  height: 10vh;
}
#maininteracces #interAccesForm {
  width: 80%;
  height: 100vh;
}
#maininteracces #interAccesForm #imgacces {
  width: 40%;
}
#maininteracces #interAccesForm #imgacces img {
  width: 50%;
  margin-bottom: 10%;
}
#maininteracces #interAccesForm #interAccesBack {
  width: 50%;
  height: 50%;
  background-image: url(../img/landing/popup.png);
  background-size: 100% 100%;
}
#maininteracces #interAccesForm #schoolandyear {
  width: 80%;
  height: 50%;
}
#maininteracces #interAccesForm #schoolandyear #selects {
  width: 100%;
  margin-bottom: 2%;
}
#maininteracces #interAccesForm #schoolandyear #selects select {
  border: none;
  border-radius: 5px;
  background-color: #011625;
  font-family: "Latina bold";
  color: #fff;
}
#maininteracces #interAccesForm #schoolandyear #selects #schoolSelect {
  width: 59%;
}
#maininteracces #interAccesForm #schoolandyear #selects #yearSelect {
  width: 39%;
}
#maininteracces #inviteText p {
  color: #fff;
  font-family: "Latina regular";
}
#maininteracces #inviteText p a {
  color: #d5b819;
  font-family: "Latina bold";
}
#maininteracces input {
  margin-bottom: 1%;
  border-radius: 5px;
}
#maininteracces #interAccesButton {
  margin-top: 5%;
  width: 40%;
}

/*Mail styles*/
#mainmail {
  background: rgb(0, 74, 61);
  background: linear-gradient(180deg, rgb(0, 74, 61) 0%, rgb(0, 57, 53) 34%, rgb(0, 38, 44) 64%, rgb(0, 21, 33) 100%);
  margin-bottom: 50px;
}
#mainmail #contentmail #logolog {
  width: 200px;
  height: 200px;
  transition: all 1500ms;
}
#mainmail #mail .mail {
  font-family: "Latina bold";
  font-size: 40px;
}
#mainmail #mail .frasemail {
  font-family: "Latina regular";
  font-size: 18px;
}
#mainmail #dontreceive {
  width: 50%;
}
#mainmail #dontreceive p {
  font-family: "Latina regular";
  font-size: 35px;
}
#mainmail #buttonsreceive {
  width: 70%;
}
#mainmail #buttonsreceive a {
  width: 50%;
}
#mainmail #buttonsreceive a img {
  width: 200px;
  height: 30px;
}
#mainmail #buttonsreceive .end {
  text-align: end;
}
#mainmail #buttonsreceive .changebut {
  font-family: "Latina bold";
  border: 1px solid #fff;
  text-align: center;
  border-radius: 20px;
}
#mainmail #netbuttons {
  width: 40%;
}
#mainmail #redesbuttons {
  width: 10%;
}
#mainmail #redesbuttons a {
  width: 40%;
  border-radius: 1rem;
}
#mainmail #redesbuttons a i {
  color: #fff;
  font-size: 20px;
}

.buttonslog li {
  width: 20% !important;
  text-align: center;
  background: rgb(250, 205, 103);
  background: linear-gradient(90deg, rgb(250, 205, 103) 0%, rgb(254, 166, 53) 60%);
  border-radius: 100%;
  margin-left: 1.5% !important;
}
.buttonslog li img {
  margin: auto;
}

/*mailconf styles*/
#mailconfcontent {
  background: rgb(0, 74, 61);
  background: linear-gradient(180deg, rgb(0, 74, 61) 0%, rgb(0, 57, 53) 34%, rgb(0, 38, 44) 64%, rgb(0, 21, 33) 100%);
  border-radius: 1rem;
  width: 80%;
  height: 80%;
}
#mailconfcontent #logoandtext {
  width: 100%;
  height: 40%;
}
#mailconfcontent #logoandtext .logo {
  width: 50%;
}
#mailconfcontent #logoandtext .logo img {
  width: 150px;
  height: 150px;
}
#mailconfcontent #logoandtext .text {
  font-family: "Latina bold";
  font-size: 2rem;
}
#mailconfcontent .samewh {
  width: 100%;
  height: 20%;
}
#mailconfcontent #middleText p {
  font-size: 1.5rem;
  font-family: "Latina regular";
}
#mailconfcontent #middleText p span {
  font-family: "Latina bold";
}
#mailconfcontent #buttonconf button {
  width: 25%;
  height: 3rem;
  background: rgb(28, 25, 1);
  background: linear-gradient(180deg, rgb(28, 25, 1) 0%, rgb(60, 44, 10) 50%);
  font-family: "Latina bold";
  border: 4px solid #ce7318;
  border-radius: 1rem;
}
#mailconfcontent #doubt p {
  font-family: "Latina regular";
}

/*Myprofile styles*/
#mainmyprof {
  background: rgb(0, 74, 61);
  background: linear-gradient(180deg, rgb(0, 74, 61) 0%, rgb(0, 57, 53) 34%, rgb(0, 38, 44) 64%, rgb(0, 21, 33) 100%);
  height: auto;
}
#mainmyprof #headerprof {
  height: 10vh;
}
#mainmyprof #headerprof .buttonslog {
  width: 25%;
}
#mainmyprof #headerprof .buttonslog li {
  background: rgb(250, 205, 103);
  background: linear-gradient(90deg, rgb(250, 205, 103) 0%, rgb(254, 166, 53) 60%);
  margin-left: 1.5% !important;
  border-radius: 100%;
}

#profilecontent {
  width: 70%;
  height: 100vh;
  margin: auto;
  margin-top: 5%;
  margin-bottom: 5%;
}
#profilecontent h1 {
  font-size: 2.5rem;
}
#profilecontent #formprof {
  width: 80%;
  height: 20%;
}
#profilecontent #formprof #circles {
  width: 90%;
  height: 80%;
  margin: auto;
}
#profilecontent #formprof #circles .contCirc {
  width: 100%;
  height: 100%;
}
#profilecontent #formprof #circles .contCirc .circle {
  width: 45%;
  height: 90%;
  border-radius: 90%;
  background-color: #fff;
  margin-left: 15px;
  margin-right: 15px;
}
#profilecontent #formProfile {
  width: 80%;
  height: 80%;
}
#profilecontent #formProfile .pointer {
  pointer-events: none;
}
#profilecontent #formProfile input {
  margin-top: 1%;
  margin-bottom: 1%;
  height: 40px;
}
#profilecontent #formProfile .form-container {
  width: 90%;
}
#profilecontent #formProfile #nameandlast input {
  width: 49.8%;
}
#profilecontent #formProfile #changepass {
  width: 90%;
}
#profilecontent #formProfile #profileButtons {
  width: 70%;
  height: 25%;
  margin: auto;
}
#profilecontent #formProfile #profileButtons button {
  font-family: "Latina bold";
  color: #fff;
  border-radius: 20px;
}
#profilecontent #formProfile #profileButtons button:first-child {
  background-color: #426264;
  width: 35%;
  height: 30%;
}
#profilecontent #formProfile #profileButtons button:nth-child(2) {
  border: 1px solid #fff;
  width: 25%;
  height: 30%;
}

/*Try pag*/
/* WHOLE CONTAINER */
.containerdate {
  width: 100%;
  height: 100%;
}
.containerdate .buttons {
  width: 2rem;
  z-index: 949;
  cursor: pointer;
}
.containerdate .buttons i {
  font-size: 2rem;
  color: #66421b;
  text-shadow: 0px 0 0 #dd8f4a, 0px 0 0 #d68a35, 0 0px 0 #7c6734, 0 0px 0 #f4c965, 2px 1px #e0a85a, -1px -1px 0 #efa641, 1px -1px 0 #b3863a, -1px 1px 0 #bd813f;
}
.containerdate .tabs {
  display: flex;
  flex-wrap: nowrap;
  height: 5%;
  overflow: hidden !important;
  align-items: center;
  justify-content: space-between;
  width: 78%;
}
.containerdate .tabs .contentTabs {
  width: 200%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1%;
}
.containerdate .tabs .tab {
  width: 16%;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  background-color: #221c02;
  border: 2px solid #d17519;
  font-family: "Latina ultra heavy";
  font-weight: bold;
}
.containerdate .tabs .fecha.tab-active {
  background-color: #fea433;
}
.containerdate #progress {
  width: 81%;
  height: 30%;
  display: flex;
  margin-top: 2%;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.containerdate #progress #tituloFechas p:nth-child(2) {
  font-family: "Latina bold";
}
.containerdate #progress #tituloFechas p:nth-child(3) {
  font-size: 2rem;
}
.containerdate #progress #bar {
  height: 20%;
  width: 70%;
  background-color: #211b02;
  position: relative;
  border: 4px solid #c97720;
  border-radius: 10px;
}
.containerdate #progress #bar #progressBar {
  position: absolute;
  height: 100%;
  background: rgb(250, 205, 103);
  background: linear-gradient(90deg, rgb(250, 205, 103) 0%, rgb(254, 166, 53) 60%);
  animation: progress-animation 5s forwards;
  border-radius: 5px;
  font-family: "Latina ultra heavy";
}
@keyframes progress-animation {
  0% {
    width: 0%;
  }
  100% {
    width: 50%;
  }
}
.containerdate #progressWithouthRiddle {
  width: 100%;
  height: 10%;
  display: flex;
  align-items: center;
}
.containerdate #progressWithouthRiddle #tituloFechas {
  font-size: 2rem;
}
.containerdate #tabsGeneralContainer {
  width: 90%;
  height: 100%;
}
.containerdate #tabsGeneralContainer #tabsTable {
  display: flex;
  justify-content: space-around;
  width: 30%;
  height: 10%;
  margin: auto;
}
.containerdate #tabsGeneralContainer .tabrank {
  width: 45%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #221c02;
  border: 3px solid #c27520;
  border-radius: 1rem;
  font-family: "Latina bold";
  cursor: pointer;
  transition: all 1000ms;
}
.containerdate #tabsGeneralContainer .tabrankActive {
  background: rgb(250, 205, 103);
  background: linear-gradient(90deg, rgb(250, 205, 103) 0%, rgb(254, 166, 53) 60%);
  transition: all 1000ms;
}
.containerdate #contentTables {
  width: 90%;
  height: 90%;
}
.containerdate .contentRank {
  width: 100%;
  height: 100%;
  display: none;
}
.containerdate .contentRank #rankTable {
  width: 100%;
  margin: auto;
}
.containerdate .contentRank #rankTable .trIndice {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  font-family: "Latina bold";
}
.containerdate .contentRank #rankTable .trDato {
  padding-top: 10px;
}
.containerdate .contentRank #rankTable .trDato p:first-child {
  font-family: "Latina bold";
}
.containerdate .contentRank #rankTable .trDato td {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
.containerdate .contentRank #rankTable .trDato td:first-child {
  width: 63%;
  justify-content: space-between;
}
.containerdate .contentRankActive {
  display: block;
  transition: all 800ms;
}

/* TAB CONTENTS */
.content {
  width: 93%;
  height: 80%;
  margin: auto;
  display: none;
  padding: 0;
  margin: auto;
  border: none;
}

.content-show {
  display: flex;
  animation-name: fade-out;
  animation-duration: 2.5s;
}

@keyframes fade-out {
  0% {
    opacity: 0;
    display: flex;
  }
  99% {
    opacity: 0;
    display: flex;
  }
  100% {
    opacity: 0;
    display: none;
  }
}
.content-active {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3%;
  animation-name: fade-in;
  animation-duration: 2.5s;
}
.content-active #racesInterLocked {
  width: 100%;
  height: 100%;
  background-color: rgba(63, 77, 151, 0.6);
  color: black;
  top: 0;
  border-radius: 1rem;
}
.content-active #racesInterLocked #racesLockedEl {
  width: 90%;
  height: 60%;
}
.content-active #racesInterLocked #racesLockedEl #textblock p {
  font-size: 3.5rem;
}
.content-active #racesInterLocked #racesLockedEl #canjButt {
  width: 25%;
  height: 10%;
  background: rgb(163, 6, 0);
  background: linear-gradient(90deg, rgb(163, 6, 0) 0%, rgb(138, 15, 1) 50%, rgb(108, 27, 4) 100%);
  border-radius: 0.5rem;
}
.content-active #racesInter {
  width: 95%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}
.content-active #racesInter .raceInter {
  position: relative;
  flex: 1 0 auto;
  width: 30%;
  height: 25%;
  background-size: 100% 100%;
}
.content-active #racesInter .raceInter .hour:first-child {
  border: 1px solid white;
}
.content-active #racesInter .raceInter .hour:first-child #symbolandHour:first-child {
  justify-content: space-between;
}
.content-active #racesInter .raceInter #raceInterLocked {
  display: none;
  width: 96%;
  height: 96.5%;
  background-color: rgba(63, 77, 151, 0.6);
  color: black;
  top: 0;
  border-radius: 1rem;
}
.content-active #racesInter .raceInter #raceInterLocked #racesLockedEl {
  width: 90%;
  height: 60%;
}
.content-active #racesInter .raceInter #raceInterLocked #racesLockedEl img {
  width: 3rem;
}
.content-active #racesInter .raceInter #raceInterLocked #racesLockedEl #textblock p {
  font-size: 2rem;
}
.content-active #racesInter .raceInter #raceInterLocked #racesLockedEl #canjButt {
  width: 40%;
  height: 30%;
  background: rgb(163, 6, 0);
  background: linear-gradient(90deg, rgb(163, 6, 0) 0%, rgb(138, 15, 1) 50%, rgb(108, 27, 4) 100%);
  border-radius: 0.5rem;
}
.content-active #racesInter .raceInter #raceInterLocked #racesLockedEl #canjButt button {
  font-size: 1rem;
}
.content-active #racesInter .raceInter .position {
  left: 10%;
  top: 5%;
  font-family: "Latina regular";
  font-weight: bold;
  font-size: 2rem;
  color: rgba(132, 132, 132, 0.72);
}
.content-active #racesInter .raceInter .botonRace img {
  margin: 0;
  position: absolute;
  bottom: -10%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.content-active #racesInter .raceInter .hour {
  width: 100%;
  font-size: 1.5rem;
  font-family: "Digital";
  justify-content: space-between;
  align-items: center;
}
.content-active #racesInter .raceInter .hour #symbolandHour:first-child {
  width: 100%;
  display: flex;
  justify-content: center;
  /* Animations */
  /* Dark mode */
}
.content-active #racesInter .raceInter .hour #symbolandHour:first-child .hourglass, .content-active #racesInter .raceInter .hour #symbolandHour:first-child .hourglass:before, .content-active #racesInter .raceInter .hour #symbolandHour:first-child .hourglass:after {
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
.content-active #racesInter .raceInter .hour #symbolandHour:first-child .hourglass {
  --polygonH: polygon(0% 0%,100% 0%,100% 5.55%,95% 5.55%,95% 28%,60% 46%,60% 54%,95% 72%,95% 94.45%,100% 94.45%,100% 100%,0% 100%,0% 94.45%,5% 94.45%,5% 72%,40% 54%,40% 46%,5% 28%,5% 5.55%,0% 5.55%);
  animation-name: flip;
  animation-timing-function: ease-in-out;
  background-image: linear-gradient(var(--primary) 2rem, rgba(115, 122, 140, 0.3333333333) 2rem 2rem, var(--primary) 2rem);
  clip-path: var(--polygonH);
  -webkit-clip-path: var(--polygonH);
  overflow: hidden;
  position: relative;
  width: 2rem;
  height: 2rem;
  z-index: 0;
}
.content-active #racesInter .raceInter .hour #symbolandHour:first-child .hourglass:before, .content-active #racesInter .raceInter .hour #symbolandHour:first-child .hourglass:after {
  animation-timing-function: linear;
  content: "";
  display: block;
  position: absolute;
}
.content-active #racesInter .raceInter .hour #symbolandHour:first-child .hourglass:before {
  --polygonB1: polygon(0% 0%,100% 0%,100% 24%,50% 47%,50% 47%,50% 47%,50% 47%,50% 47%,50% 47%,50% 47%,50% 47%,0% 24%);
  --polygonB2: polygon(0% 4%,100% 4%,100% 24%,55% 45%,55% 100%,55% 100%,55% 100%,45% 100%,45% 100%,45% 100%,45% 45%,0% 24%);
  --polygonB3: polygon(0% 24%,100% 24%,100% 24%,55% 45%,55% 80%,100% 100%,100% 100%,0% 100%,0% 100%,45% 80%,45% 45%,0% 24%);
  --polygonB4: polygon(45% 45%,55% 45%,55% 45%,55% 45%,55% 58%,100% 76%,100% 100%,0% 100%,0% 76%,45% 58%,45% 45%,45% 45%);
  --polygonB5: polygon(50% 53%,50% 53%,50% 53%,50% 53%,50% 53%,100% 76%,100% 100%,0% 100%,0% 76%,50% 53%,50% 53%,50% 53%);
  animation-name: fill;
  background-color: var(--fg);
  background-size: 100% 2rem;
  clip-path: var(--polygonB1);
  -webkit-clip-path: var(--polygonB1);
  top: 0%;
  left: 0%;
  width: 2rem;
  height: 2rem;
  z-index: 1;
}
.content-active #racesInter .raceInter .hour #symbolandHour:first-child .hourglass:after {
  animation-name: glare;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0.5em, rgba(0, 0, 0, 0.2) 0.5em 1.5em, rgba(0, 0, 0, 0) 1.5em 3.5em, rgba(255, 255, 255, 0.2) 3.5em 4.5em, rgba(255, 255, 255, 0) 4.5em 6.5em, rgba(0, 0, 0, 0.2) 6.5em 7.5em, rgba(0, 0, 0, 0) 7.5em) 0 0/100% 0.5em, linear-gradient(90deg, rgba(0, 0, 0, 0) 0.75em, rgba(0, 0, 0, 0.2) 0.75em 1.25em, rgba(0, 0, 0, 0) 1.25em 3.75em, rgba(255, 255, 255, 0.2) 3.75em 4.25em, rgba(255, 255, 255, 0) 4.25em 6.75em, rgba(0, 0, 0, 0.2) 6.75em 7.25em, rgba(0, 0, 0, 0) 7.25em) 0 0.5em/100% 8em, linear-gradient(90deg, rgba(0, 0, 0, 0) 0.5em, rgba(0, 0, 0, 0.2) 0.5em 1.5em, rgba(0, 0, 0, 0) 1.5em 3.5em, rgba(255, 255, 255, 0.2) 3.5em 4.5em, rgba(255, 255, 255, 0) 4.5em 6.5em, rgba(0, 0, 0, 0.2) 6.5em 7.5em, rgba(0, 0, 0, 0) 7.5em) 0 100%/100% 0.5em;
  background-repeat: no-repeat;
  top: 2%;
  left: 1%;
  width: 100%;
  height: 100%;
  z-index: 2;
}
@keyframes fill {
  from {
    clip-path: var(--polygonB1);
    -webkit-clip-path: var(--polygonB1);
  }
  10% {
    clip-path: var(--polygonB2);
    -webkit-clip-path: var(--polygonB2);
  }
  45% {
    clip-path: var(--polygonB3);
    -webkit-clip-path: var(--polygonB3);
  }
  80% {
    clip-path: var(--polygonB4);
    -webkit-clip-path: var(--polygonB4);
  }
  85%, to {
    clip-path: var(--polygonB5);
    -webkit-clip-path: var(--polygonB5);
  }
}
@keyframes glare {
  from, 90% {
    transform: translateX(0);
  }
  to {
    transform: translateX(3em);
  }
}
@keyframes flip {
  from, 90% {
    transform: rotate(0);
  }
  to {
    transform: rotate(180deg);
  }
}
@media (prefers-color-scheme: dark) {
  .content-active #racesInter .raceInter .hour #symbolandHour:first-child :root {
    --bg: #17181c;
    --fg: #c7cad1;
  }
}
.content-active #racesInter #raceLocked {
  width: 95%;
  height: 95%;
  margin: auto;
  border-radius: 15%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(31, 27, 29, 0.66);
  opacity: 1;
}
.content-active #racesInter #raceLocked img {
  width: 30%;
}

@keyframes fade-in {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0.01;
  }
  100% {
    display: block;
    opacity: 1;
  }
}
/* BUTTON PREVIOUS NEXT */
.button {
  /* position: absolute;
  top: 49%; */
  z-index: 4;
  cursor: pointer;
}

/* .buttons{
    position: absolute;
    top: 0%;
}
.next{
    right: 0%;
} */
#rankingMenu {
  position: fixed;
  width: 50%;
  height: 90%;
  background: rgb(30, 26, 1);
  background: linear-gradient(180deg, rgb(30, 26, 1) 0%, rgb(41, 33, 4) 34%, rgb(51, 38, 7) 64%, rgb(60, 44, 10) 100%);
  display: flex;
  top: -400%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  border-radius: 0.8rem;
  border: 4px solid #8c510f;
  transition: all 500ms;
}
#rankingMenu #rankingClose img {
  width: 8%;
  position: absolute;
  top: -1%;
  right: 0%;
  cursor: pointer;
}
#rankingMenu .rankingContent {
  width: 100%;
}
#rankingMenu .rankingContent p {
  font-size: 2.4rem;
  margin-top: 2rem;
}
#rankingMenu .rankingContent table {
  width: 100%;
  margin-top: 5%;
}
#rankingMenu .rankingContent table tr th {
  font-family: "Latina ultra heavy";
  color: #fff;
}

/*Boleteria styles*/
#ticketDivs #tituloBol h1 {
  font-size: 2rem;
}
#ticketDivs #datesPrices {
  width: 55%;
  height: 80%;
  margin: auto;
}
#ticketDivs #datesPrices #pricesBol {
  display: flex;
  width: 100%;
  height: 80%;
  margin: auto;
  justify-content: space-between;
  align-items: center;
}
#ticketDivs #datesPrices #pricesBol #porFecha {
  width: 45%;
  height: 80%;
  background-image: url(../img/inter/FONDO\ 1-07.png);
  background-size: 100% 100%;
}
#ticketDivs #datesPrices #pricesBol #full {
  width: 45%;
  height: 80%;
  background-image: url(../img/inter/FONDO\ 2-07.png);
  background-size: 100% 100%;
}
#ticketDivs #datesPrices #pricesBol .tituloPrices p:first-child {
  color: #ffb800;
  font-family: "Latina bold";
  font-size: 1.5rem;
  margin-top: 0.5rem;
  font-weight: bold;
}
#ticketDivs #datesPrices #pricesBol #priceTicket {
  height: 40%;
  width: 40%;
}
#ticketDivs #datesPrices #pricesBol #priceTicket img {
  width: 10rem;
  bottom: 0%;
  left: -2%;
}
#ticketDivs #datesPrices #pricesBol .price1 {
  background-image: url(../img/acertijos/cofre1.png);
  background-size: 100% 100%;
}
#ticketDivs #datesPrices #pricesBol .price2 {
  background-image: url(../img/acertijos/cofre2.png);
  background-size: 100% 100%;
}
#ticketDivs #datesPrices #canjear {
  display: flex;
  justify-content: space-between;
  height: 7%;
}
#ticketDivs #datesPrices #canjear input {
  width: 80%;
  height: 100%;
  border-radius: 1rem;
}
#ticketDivs #datesPrices #canjear button {
  background-color: #80a09c;
  width: 19%;
  font-family: "Latina bold";
  border-radius: 1rem;
}

/*acertijos styles*/
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial;
  text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall {
  0% {
    top: -10%;
  }
  100% {
    top: 100%;
  }
}
@-webkit-keyframes snowflakes-shake {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(80px);
    transform: translateX(80px);
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}
@keyframes snowflakes-fall {
  0% {
    top: -10%;
  }
  100% {
    top: 100%;
  }
}
@keyframes snowflakes-shake {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(80px);
  }
  100% {
    transform: translateX(0px);
  }
}
.snowflake {
  position: fixed;
  top: -10%;
  z-index: 9999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
  -webkit-animation-name: snowflakes-fall, snowflakes-shake;
  -webkit-animation-duration: 10s, 3s;
  -webkit-animation-timing-function: linear, ease-in-out;
  -webkit-animation-iteration-count: infinite, infinite;
  -webkit-animation-play-state: running, running;
  animation-name: snowflakes-fall, snowflakes-shake;
  animation-duration: 10s, 3s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-play-state: running, running;
}

.snowflake:nth-of-type(0) {
  left: 1%;
  -webkit-animation-delay: 0s, 0s;
  animation-delay: 0s, 0s;
}

.snowflake:nth-of-type(1) {
  left: 10%;
  -webkit-animation-delay: 1s, 1s;
  animation-delay: 1s, 1s;
}

.snowflake:nth-of-type(2) {
  left: 20%;
  -webkit-animation-delay: 6s, 0.5s;
  animation-delay: 6s, 0.5s;
}

.snowflake:nth-of-type(3) {
  left: 30%;
  -webkit-animation-delay: 4s, 2s;
  animation-delay: 4s, 2s;
}

.snowflake:nth-of-type(4) {
  left: 40%;
  -webkit-animation-delay: 2s, 2s;
  animation-delay: 2s, 2s;
}

.snowflake:nth-of-type(5) {
  left: 50%;
  -webkit-animation-delay: 8s, 3s;
  animation-delay: 8s, 3s;
}

.snowflake:nth-of-type(6) {
  left: 60%;
  -webkit-animation-delay: 6s, 2s;
  animation-delay: 6s, 2s;
}

.snowflake:nth-of-type(7) {
  left: 70%;
  -webkit-animation-delay: 2.5s, 1s;
  animation-delay: 2.5s, 1s;
}

.snowflake:nth-of-type(8) {
  left: 80%;
  -webkit-animation-delay: 1s, 0s;
  animation-delay: 1s, 0s;
}

.snowflake:nth-of-type(9) {
  left: 90%;
  -webkit-animation-delay: 3s, 1.5s;
  animation-delay: 3s, 1.5s;
}

/* Demo Purpose Only*/
.demo {
  font-family: "Raleway", sans-serif;
  color: #fff;
  display: block;
  margin: 0 auto;
  padding: 15px 0;
  text-align: center;
}

.demo a {
  font-family: "Raleway", sans-serif;
  color: #000;
}

#acertijoAll {
  background-size: 100% 100%;
}
#acertijoAll #barProg {
  width: 80%;
  height: 10%;
}
#acertijoAll #barProg #barraProg {
  width: 13%;
  height: 45%;
  background: rgb(28, 25, 1);
  background: linear-gradient(180deg, rgb(28, 25, 1) 0%, rgb(60, 44, 10) 50%);
  font-size: 1.5rem;
  font-weight: bold;
  position: relative;
  border: 2px solid #ce7318;
  border-radius: 10px;
}
#acertijoAll #barProg #barraProg p {
  z-index: 2000;
}
#acertijoAll #barProg #barraProg #progressProg {
  position: absolute;
  height: 100%;
  background: rgb(250, 205, 103);
  background: linear-gradient(90deg, rgb(250, 205, 103) 0%, rgb(254, 166, 53) 60%);
  animation: bar-animation 3s forwards;
  border-radius: 10px;
}
@keyframes bar-animation {
  0% {
    width: 5%;
  }
  100% {
    width: 35%;
  }
}
#acertijoAll #barProg #progressProg3 {
  position: absolute;
  height: 100%;
  background: rgb(250, 205, 103);
  background: linear-gradient(90deg, rgb(250, 205, 103) 0%, rgb(254, 166, 53) 60%);
  animation: priddle3-animation 3s forwards;
  border-radius: 10px;
}
@keyframes priddle3-animation {
  0% {
    width: 35%;
  }
  100% {
    width: 65%;
  }
}
#acertijoAll #acertijo {
  width: 65%;
  height: 85%;
}
#acertijoAll #acertijo #acertijoTime {
  width: 20%;
  height: 7%;
  border: 2px solid #ce7318;
  background: rgb(28, 25, 1);
  background: linear-gradient(180deg, rgb(28, 25, 1) 0%, rgb(60, 44, 10) 50%);
}
#acertijoAll #acertijo #acertijoTime p {
  font-size: 1.5rem;
  font-family: "Paytone";
  align-self: center;
}
#acertijoAll #acertijo #acertijotext {
  width: 60%;
  height: 60%;
  border: 2px solid #ce7318;
  background: rgb(28, 25, 1);
  background: linear-gradient(180deg, rgb(28, 25, 1) 0%, rgb(60, 44, 10) 50%);
  border-radius: 10%;
}
#acertijoAll #acertijo #acertijotext #riddleTitle {
  width: 100%;
  height: 20%;
}
#acertijoAll #acertijo #acertijotext #riddleSentence {
  width: 100%;
  height: 55%;
}
#acertijoAll #acertijo #acertijotext #riddleSentence p {
  width: 85%;
  font-family: "Latina bold";
  font-size: 1rem;
}
#acertijoAll #acertijo #acertijotext p:first-child {
  font-family: "Latina ultra heavy";
  font-size: 2rem;
}
#acertijoAll #acertijo #acertijoanswer {
  width: 40%;
  height: 15%;
  background-image: url(../img/acertijos/BARRARESPUESTA-07.png);
  background-size: 100% 100%;
}
#acertijoAll #acertijo #acertijoanswer input {
  width: 80%;
  height: 40%;
  color: gray;
  border-radius: 20px;
  font-family: "Latina regular";
  background-color: #fff !important;
}
#acertijoAll #acertijo #acertijoanswer p {
  width: 72%;
  height: 10%;
  font-size: 0.6rem;
}
#acertijoAll #acertijo .acertijobutton {
  width: 20%;
  height: 10%;
}
#acertijoAll #acertijo .acertijobutton button {
  width: 100%;
  height: 100%;
}
#acertijoAll #acertijo .acertijobutton button img {
  width: 100%;
  height: 100%;
}

#doneall {
  background-size: 100% 100%;
}
#doneall #donecontent #calavera {
  width: 15%;
  height: 40%;
}
#doneall #donecontent #donemsg p {
  width: 100%;
  font-size: 3.5rem;
  font-family: "Latina ultra heavy";
  color: #f1d638;
}
#doneall #donecontent #donehour {
  width: 15%;
}
#doneall #donecontent #donehour p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
}
#doneall #donecontent #donehour #time {
  width: 100%;
  border: 4px solid #ce7318;
  background: rgb(28, 25, 1);
  background: linear-gradient(180deg, rgb(28, 25, 1) 0%, rgb(60, 44, 10) 50%);
  border-radius: 10px;
}
#doneall #donecontent #donehour #time p {
  font-size: 1.5rem;
}
#doneall #donecontent #donePos {
  width: 35%;
  margin: 0px auto;
}
#doneall #donecontent #donePos p {
  font-size: 2rem;
  font-weight: bold;
}
#doneall #donecontent #donePos #posImg {
  width: 80px;
  height: 80px;
  background-image: url(../../img/acertijos/circle.png);
  background-size: 100% 100%;
  margin-left: 10px;
}
#doneall #donecontent #donePos #posImg p {
  left: 50%;
  transform: translateX(-50%);
  top: 0%;
  font-size: 3rem;
  background-color: #000;
  /* Create the gradient. */
  background-image: linear-gradient(45deg, #f6d236, #eda42a, #e19426);
  /* Set the background size and repeat properties. */
  background-size: 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}
#doneall #donecontent #donetable {
  width: 30%;
  height: 40%;
  border: 4px solid #ce7318;
  background: rgb(28, 25, 1);
  background: linear-gradient(180deg, rgb(28, 25, 1) 0%, rgb(60, 44, 10) 50%);
  margin-top: 1%;
  border-radius: 20px;
  overflow: hidden;
}
#doneall #donecontent #donetable #tab {
  width: 80%;
  margin: 0px auto;
  height: 80%;
}
#doneall #donecontent #donetable .rank {
  font-size: 1.4rem;
}
#doneall #donecontent #donetable table {
  width: 100%;
}
#doneall #donecontent #donetable table tr:first-child {
  font-family: "Latina ultra heavy";
}
#doneall #donecontent #donetable table .trInfo td {
  width: 50%;
  margin-top: 2%;
  margin-bottom: 2%;
}
#doneall #donecontent #donetable table .trInfo .positNumber {
  width: 15%;
  height: 100%;
  left: 10%;
  background-image: url(../../img/acertijos/circle.png);
  background-size: 100% 100%;
}
#doneall #donecontent #donetable table .trInfo .positNumber p {
  font-family: "Latina ultra heavy";
  background-color: #000;
  /* Create the gradient. */
  background-image: linear-gradient(45deg, #f6d236, #eda42a, #e19426);
  /* Set the background size and repeat properties. */
  background-size: 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}
#doneall #donecontent #doneTableBut {
  width: 15%;
}

#failriddle {
  position: fixed;
  width: 40%;
  height: 40%;
  background: rgb(30, 26, 1);
  background: linear-gradient(180deg, rgb(30, 26, 1) 0%, rgb(41, 33, 4) 34%, rgb(51, 38, 7) 64%, rgb(60, 44, 10) 100%);
  display: flex;
  top: -400%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  border-radius: 5%;
  border: 4px solid #8c510f;
  transition: all 500ms;
}
#failriddle #failClose img {
  width: 10%;
  position: absolute;
  top: 0;
  right: 2%;
  cursor: pointer;
}

#correctriddle {
  position: fixed;
  width: 40%;
  height: 40%;
  background: rgb(30, 26, 1);
  background: linear-gradient(180deg, rgb(30, 26, 1) 0%, rgb(41, 33, 4) 34%, rgb(51, 38, 7) 64%, rgb(60, 44, 10) 100%);
  display: flex;
  top: -400%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  border-radius: 5%;
  border: 4px solid #8c510f;
  transition: all 500ms;
}

.closePop img {
  width: 10% !important;
  position: absolute;
  top: 0;
  right: 2%;
  cursor: pointer;
}

#completedriddle {
  position: fixed;
  width: 40%;
  height: 40%;
  background: rgb(30, 26, 1);
  background: linear-gradient(180deg, rgb(30, 26, 1) 0%, rgb(41, 33, 4) 34%, rgb(51, 38, 7) 64%, rgb(60, 44, 10) 100%);
  display: flex;
  top: -400%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  border-radius: 5%;
  border: 4px solid #8c510f;
  transition: all 500ms;
}
#completedriddle #completedClose img {
  width: 5%;
  position: absolute;
  top: 0;
  right: 2%;
  cursor: pointer;
}
#completedriddle #completedContent p:first-child {
  color: #fcd20f;
  font-size: 3rem;
  font-family: "Latina bold";
}
#completedriddle #completedContent p:nth-child(2) {
  font-size: 2.5rem;
}
#completedriddle #completedContent p:nth-child(3) span {
  color: #f1a200;
}
#completedriddle #completedContent #buttonCompleted img {
  width: 30%;
}

#failriddle #failContent p:first-child {
  color: #881001;
  font-family: "Latina bold";
  font-size: 4rem;
}
#failriddle #failContent p:nth-child(2) {
  font-size: 1rem;
  font-weight: bold;
}
#failriddle #buttonFail {
  width: 40%;
}

#correctriddle #correctContent {
  height: 80%;
}
#correctriddle #correctContent p:first-child {
  color: #57c32c;
  font-family: "Latina bold";
  font-size: 2.5rem;
}
#correctriddle #correctContent p:nth-child(2) {
  font-size: 2rem;
  font-weight: bold;
}
#correctriddle #correctContent #buttonCorrect img {
  width: 30%;
}

.fail.fail-opened {
  position: relative;
  top: 25% !important;
  z-index: 2999 !important;
}

.fail-opened.body::after {
  opacity: 1;
  transform: scale(1);
}

/*classic styles*/
#mainclassic {
  background: rgb(0, 74, 61);
  background: linear-gradient(180deg, rgb(0, 74, 61) 0%, rgb(0, 57, 53) 34%, rgb(0, 38, 44) 64%, rgb(0, 21, 33) 100%);
  height: auto;
}
#mainclassic #headerinter {
  height: 10vh;
  margin-bottom: 5%;
}
#mainclassic #classicContent #classicTexts {
  width: 100%;
  height: 10%;
}
#mainclassic #classicContent #classicTexts p:first-child {
  font-size: 2.5rem;
}
#mainclassic #classicContent #classicLevels {
  width: 80%;
  height: 70%;
}
#mainclassic #classicContent #classicLevels .classicLevel {
  width: 30%;
  height: 40%;
  border: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}
#mainclassic #classicContent #classicLevels .classicLevel .levelLocked {
  width: 95%;
  height: 95%;
  margin: auto;
  margin-top: 0.5%;
  border-radius: 10%;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: rgba(31, 27, 29, 0.66);
  opacity: 1;
  z-index: 1001;
}
#mainclassic #classicContent #classicLevels .classicLevel .levelItems {
  width: 90%;
  height: 60%;
}
#mainclassic #classicContent #classicLevels .classicLevel .levelItems .levelText {
  font-family: "Latina bold";
  font-size: 2.5rem;
}
#mainclassic #classicContent #classicLevels .classicLevel .levelBar {
  width: 50%;
  margin-top: none;
}
#mainclassic #classicContent #classicLevels .classicLevel .levelBar p {
  font-family: "Latina ultra heavy";
}
#mainclassic #classicContent #classicLevels .classicLevel .levelBar img {
  width: 30%;
  z-index: 1000;
}
#mainclassic #classicContent #classicLevels .classicLevel .levelBar .bar {
  width: 70%;
  height: 50%;
  right: 15%;
  border: 2px solid #ce7318;
  background: rgb(28, 25, 1);
  background: linear-gradient(180deg, rgb(28, 25, 1) 0%, rgb(60, 44, 10) 50%);
}
#mainclassic #classicContent #announceClas {
  width: 100%;
  height: 15%;
}
#mainclassic #classicContent #announceClas #anounce {
  width: 50%;
  height: 90%;
}

#clasAcContent {
  width: 100%;
  height: 200vh;
  overflow: auto;
  margin-bottom: 5%;
}
#clasAcContent #titleClas {
  font-size: 2.5rem;
}
#clasAcContent #listRiddle {
  width: 85%;
  height: 100%;
}
#clasAcContent #listRiddle .riddle {
  width: 23%;
  height: 12%;
  margin-bottom: 2%;
  background-size: 100% 100%;
}
#clasAcContent #listRiddle .riddle .number {
  left: 10%;
  font-family: "Latina regular";
  font-weight: bold;
  font-size: 2.5rem;
  color: rgba(132, 132, 132, 0.72);
}
#clasAcContent #listRiddle .riddle .botonRace img {
  width: 50%;
  margin: 0;
  position: absolute;
  top: 55%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#clasAcContent #listRiddle .riddle .riddleLocked {
  width: 95%;
  height: 95%;
  margin: auto;
  margin-top: 0.5%;
  border-radius: 10%;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: rgba(31, 27, 29, 0.66);
  opacity: 1;
  z-index: 1001;
}
#clasAcContent #listRiddle .riddle .riddleLocked img {
  width: 30%;
}

#viewGame {
  width: 100%;
  height: 100vh;
  background-size: 100% 100%;
}
#viewGame #viewElements #calavera {
  width: 65%;
}
#viewGame #viewElements #gameTitle {
  font-size: 2rem;
  font-family: "Latina bold";
}
#viewGame #viewElements #gameReward {
  font-size: 2rem;
  font-family: "Latina bold";
}
#viewGame #viewElements #gameReward p:nth-child(2) {
  font-size: 3rem;
}
#viewGame #viewElements #gameDate {
  width: 45%;
  padding: 1%;
  font-size: 1.5rem;
  font-weight: bold;
  background: rgb(30, 26, 1);
  background: linear-gradient(180deg, rgb(30, 26, 1) 0%, rgb(41, 33, 4) 34%, rgb(51, 38, 7) 64%, rgb(60, 44, 10) 100%);
  border: 4px solid #8c510f;
  border-radius: 10px;
}
#viewGame #viewElements #gameHour {
  font-size: 2.5rem;
  font-weight: bold;
}

#mainrace {
  width: 100%;
  height: auto;
  background: rgb(0, 74, 61);
  background: linear-gradient(180deg, rgb(0, 74, 61) 0%, rgb(0, 57, 53) 34%, rgb(0, 38, 44) 64%, rgb(0, 21, 33) 100%);
}
#mainrace #navsup {
  height: 10vh;
}
#mainrace #raceContent {
  width: 100%;
  height: auto;
}
#mainrace #raceContent #raceElements {
  width: 100%;
  height: 100vh;
}
#mainrace #raceContent #raceElements #raceGames {
  width: 85%;
  height: 30%;
}
#mainrace #raceContent #raceElements #raceGames #boletLil {
  width: 25%;
  height: 95%;
  margin-left: 2%;
}
#mainrace #raceContent #raceElements #raceGames #boletLil .boletEl:first-child {
  border: 2px solid #ce7318;
  background: rgb(28, 25, 1);
  background: linear-gradient(180deg, rgb(28, 25, 1) 0%, rgb(60, 44, 10) 50%);
  margin-top: -0.1rem;
}
#mainrace #raceContent #raceElements #raceGames #boletLil .boletEl:first-child span {
  color: #f7c603;
  font-weight: bold;
}
#mainrace #raceContent #raceElements #raceGames #boletLil .boletEl:first-child span i {
  font-size: 4px;
}
#mainrace #raceContent #raceElements #raceGames #boletLil .boletEl {
  width: 50%;
}
#mainrace #raceContent #raceElements #raceGames #boletLil .boletEl p span:first-child {
  font-family: "Latina regular";
  font-weight: bold;
}
#mainrace #raceContent #raceElements #raceGames #boletLil .boletEl p span:nth-child(2) {
  font-size: 0.5rem;
}
#mainrace #raceContent #raceElements #raceGames #boletLil .boletEl img {
  margin-right: 5%;
}
#mainrace #raceContent #raceElements #raceGames #titlePub {
  width: 50%;
  height: 100%;
}
#mainrace #raceContent #raceElements #raceGames #titlePub #title p {
  font-size: 2rem;
  margin-top: -3.5px;
}
#mainrace #raceContent #raceElements #raceGames #titlePub #pub {
  width: 100%;
  height: 50%;
  background-color: #fff;
}
#mainrace #raceContent #raceElements #raceGames #officialHour {
  width: 25%;
  height: 20%;
  margin-top: -1px;
}
#mainrace #raceContent #raceElements #raceGames #officialHour p {
  font-family: "Digital";
}
#mainrace #raceContent #raceElements #raceGames #officialHour img {
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
  margin-top: 4.5px;
}
#mainrace #raceContent #raceElements #pubText {
  margin-top: 1rem;
}
#mainrace #raceContent #raceElements #pubText p:nth-child(2) {
  width: 40%;
}
#mainrace #raceContent #raceElements #racesTod {
  width: 85%;
  height: 70%;
  margin: auto;
}
#mainrace #raceContent #raceElements #racesTod #swipRace {
  margin-top: 1rem;
  display: none;
}
#mainrace #raceContent #raceElements #racesTod #swipRace .swiper {
  width: 100%;
  height: 100%;
}
#mainrace #raceContent #raceElements #racesTod #swipRace .swiper-slide {
  width: 100%;
  height: 100%;
  border-radius: 1rem;
}
#mainrace #raceContent #raceElements #racesTod #swipRace .swiperButtonraceNext {
  transform: translateY(-50%);
}
#mainrace #raceContent #raceElements #racesTod #swipRace .swiperButtonracePrev {
  transform: translateY(-50%);
}
#mainrace #raceContent #raceElements #racesTod .racetod {
  width: 28%;
  height: 85%;
  background-size: 100% 100%;
}
#mainrace #raceContent #raceElements #racesTod .racetod .raceTitle {
  width: 60%;
  height: 10%;
  background: rgb(250, 205, 103);
  background: linear-gradient(90deg, rgb(250, 205, 103) 0%, rgb(254, 166, 53) 60%);
  border-radius: 10px;
}
#mainrace #raceContent #raceElements #racesTod .racetod .raceTitle p {
  font-family: "Latina bold";
}
#mainrace #raceContent #raceElements #racesTod .racetod .statusAndHour {
  width: 60%;
  height: 10%;
}
#mainrace #raceContent #raceElements #racesTod .racetod .statusAndHour .statuss {
  width: 30%;
  font-family: "Latina ultra heavy";
  font-weight: bold;
  font-size: 0.7rem;
  text-align: center;
  border-radius: 0.2rem;
}
#mainrace #raceContent #raceElements #racesTod .racetod .statusAndHour .status {
  background: #ff4040;
}
#mainrace #raceContent #raceElements #racesTod .racetod .statusAndHour .status i {
  font-size: 7px;
}
#mainrace #raceContent #raceElements #racesTod .racetod .statusAndHour .statusY {
  background: #feca00;
}
#mainrace #raceContent #raceElements #racesTod .racetod .statusAndHour .hourst {
  width: 30%;
  font-family: "Digital";
  font-weight: bold;
  font-size: 1.5rem;
  color: #fac805;
  margin-left: -1rem;
}
#mainrace #raceContent #raceElements #racesTod .racetod .statusAndHour .hourst img {
  width: 80%;
}
#mainrace #raceContent #raceElements #racesTod .racetod .rewardst {
  width: 60%;
  height: 10%;
}
#mainrace #raceContent #raceElements #racesTod .racetod .rewardst p:first-child {
  font-family: "Latina bold";
}
#mainrace #raceContent #raceElements #racesTod .racetod .rewardst p:nth-child(2) {
  color: #fac805;
  font-weight: bold;
  font-size: 1.5rem;
}
#mainrace #raceContent #raceElements #racesTod .racetod .buttonAndDate {
  width: 100%;
  height: 25%;
}
#mainrace #raceContent #raceElements #racesTod .racetod .buttonAndDate .buttonst {
  width: 50%;
}
#mainrace #raceContent #raceElements #racesTod .racetod .buttonAndDate .buttonst img {
  width: 40%;
  height: 40%;
  margin: auto;
}
#mainrace #raceContent #raceElements #racesTod .racetod .buttonAndDate .datest {
  margin-left: -5%;
}
#mainrace #raceContent #raceElements #racesTod .racetod .buttonAndDate .datest img {
  width: 15%;
}
#mainrace #raceContent #raceElements #racesTod .racetod .buttonAndDate .datest p {
  font-family: "Digital";
  color: #fac805;
}
#mainrace #raceContent #allraces {
  width: 100%;
  height: 100vh;
  margin-bottom: 10%;
}
#mainrace #raceContent #allraces #allracestitle {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 2rem;
}
#mainrace #raceContent #allraces #pubelements {
  width: 85%;
  height: 20%;
}
#mainrace #raceContent #allraces #pubelements .noth {
  width: 25%;
}
#mainrace #raceContent #allraces #pubelements #pub {
  width: 50%;
  height: 50%;
}
#mainrace #raceContent #allraces #pubelements #pub #pubT {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
#mainrace #raceContent #allraces #racesTable {
  width: 85%;
  height: 80%;
  background: rgb(28, 25, 1);
  background: linear-gradient(180deg, rgb(28, 25, 1) 0%, rgb(60, 44, 10) 50%);
  border: 4px solid #ce7318;
  border-radius: 20px;
}
#mainrace #raceContent #allraces #racesTable table {
  width: 85%;
  height: 90%;
  border-collapse: collapse;
}
#mainrace #raceContent #allraces #racesTable table tbody {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#mainrace #raceContent #allraces #racesTable table tbody tr:first-child {
  height: 10%;
}
#mainrace #raceContent #allraces #racesTable table th {
  background: rgb(250, 205, 103);
  background: linear-gradient(90deg, rgb(250, 205, 103) 0%, rgb(254, 166, 53) 60%);
  width: 18%;
  height: 100%;
  border-radius: 10px;
}
#mainrace #raceContent #allraces #racesTable table th:last-child {
  background: none;
}
#mainrace #raceContent #allraces #racesTable table td {
  text-align: center;
  width: 18%;
  margin: none;
}
#mainrace #raceContent #allraces #racesTable table .trRaces {
  height: 20% !important;
}
#mainrace #raceContent #allraces #racesTable table .trRaces td img {
  width: 20%;
  left: -35%;
}
#mainrace #raceContent #allraces #racesTable table .trRaces td:nth-child(2) {
  font-family: "Digital";
  color: #fac805;
}
#mainrace #raceContent #allraces #racesTable table .trRaces td:last-child a {
  width: 100%;
}
#mainrace #raceContent #allraces #racesTable table .trRaces td:last-child a img {
  width: 70%;
}

/*terminos styles*/
#terminos {
  margin-bottom: 4%;
}
#terminos #termsTitle p {
  width: 85% !important;
  margin: auto;
  font-size: 2.5rem;
}
#terminos #termsText {
  width: 50%;
  height: 90%;
  overflow: auto;
}
/*Libro styles*/
#bookContent #bookTitle p {
  font-size: 2rem;
}
#bookContent #formDivBokk {
  width: 85%;
  height: 85%;
  overflow: auto;
}
#bookContent #formDivBokk .peoplePresent {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
#bookContent #formDivBokk .peoplePresent p {
  margin-left: 0.3rem;
}
#bookContent #formDivBokk #formd {
  width: 100%;
  height: 100%;
}
#bookContent #formDivBokk #formd p {
  font-family: "Latina bold";
}
#bookContent #formDivBokk .twoinp {
  width: 100%;
}
#bookContent #formDivBokk .twoinp .inp {
  width: 48%;
}
#bookContent #formDivBokk .twoinp .inp input {
  width: 100%;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  border-radius: 1rem;
}
#bookContent #formDivBokk .threeinp {
  width: 100%;
}
#bookContent #formDivBokk .threeinp .inpt {
  width: 30%;
}
#bookContent #formDivBokk .threeinp input {
  width: 100%;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  border-radius: 1rem;
}
#bookContent #formDivBokk #secondpart #oneinp {
  width: 100%;
}
#bookContent #formDivBokk #secondpart #oneinp .oneinpt {
  position: relative;
  display: inline-block;
  width: 48%;
}
#bookContent #formDivBokk #secondpart #oneinp .oneinpt select {
  width: 100%;
  border-radius: 1rem;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../../img/arrow.ico) 97%/2% no-repeat #001521;
}
#bookContent #formDivBokk #thirdPart .radio1 {
  margin-right: 1rem;
  margin-bottom: 1rem;
  margin-left: 0.5rem;
}
#bookContent #formDivBokk #thirdPart #twoRadios .radioTitle p {
  margin-left: 0.3rem;
}
#bookContent #formDivBokk #thirdPart #twoRadios .radio {
  width: 50%;
  margin-top: 1rem;
}
#bookContent #formDivBokk #thirdPart #twoRadios .radio .radiocont {
  width: 100%;
}
#bookContent #formDivBokk #thirdPart #twoRadios #ammount {
  width: 100%;
}
#bookContent #formDivBokk #thirdPart #twoRadios #ammount input {
  width: 96.5%;
  border-radius: 1rem;
}
#bookContent #formDivBokk #fourthpart textarea {
  width: 100%;
  border-radius: 1rem;
}
#bookContent #formDivBokk #fifthpart {
  width: 100%;
}
#bookContent #formDivBokk #fifthpart #threebuttons {
  width: 60%;
  margin-top: 2rem;
}
#bookContent #formDivBokk #fifthpart #threebuttons button {
  width: 30%;
  height: 5rem;
  border-radius: 1rem;
  background-color: #426264;
  font-family: "Latina bold";
}

/*formpresent styles*/
.latbold {
  font-family: "Latina bold";
}

#interPresentcont1 {
  background-image: url("../../img/landing/FONDO AMARILLO T-06-06.png");
  background-size: 100% 100%;
}
#interPresentcont1 #interPresentHead {
  width: 100%;
  height: 20%;
}
#interPresentcont1 #interPresentHead nav {
  width: 95%;
  height: 90%;
}
#interPresentcont1 #interPresentHead nav #logoPres {
  width: 30%;
}
#interPresentcont1 #interPresentHead nav #logoPres #logo1 {
  width: 135px;
  height: 135px;
}
#interPresentcont1 #interPresentHead nav #presMenu {
  width: 38.5%;
}
#interPresentcont1 #interPresentHead nav #presMenu ul li {
  font-family: "Latina bold";
  font-size: 1.5rem;
}
#interPresentcont1 #interPresentHead nav #presMenu ul li a {
  transition: all 500ms;
}
#interPresentcont1 #interPresentHead nav #presMenu ul li > a:hover {
  font-family: "Latina bold";
  font-size: 1.5rem;
  transition: all 500ms;
}
#interPresentcont1 #contentPres {
  width: 95%;
  height: 80%;
}
#interPresentcont1 #contentPres #presTitle {
  width: 100%;
  height: 20%;
}
#interPresentcont1 #contentPres #presTitle span {
  font-family: "Paytone";
}
#interPresentcont1 #contentPres #presTitle p:first-child {
  font-size: 3.4rem;
}
#interPresentcont1 #contentPres #presTitle p:nth-child(2) {
  font-family: "Latina bold";
  font-size: 19px;
}
#interPresentcont1 #contentPres #imgandbutts {
  width: 100%;
  height: 80%;
}
#interPresentcont1 #contentPres #imgandbutts .things {
  width: 50%;
  height: 100%;
}
#interPresentcont1 #contentPres #imgandbutts #img img {
  height: 100%;
  margin-left: 1rem;
}
#interPresentcont1 #contentPres #imgandbutts #butts .butt {
  width: 77%;
  height: 30%;
  font-family: "Latina bold";
  font-size: 2rem;
  background: rgb(28, 25, 1);
  background: linear-gradient(180deg, rgb(28, 25, 1) 0%, rgb(60, 44, 10) 50%);
  border-radius: 1rem;
  border: 4px solid #ce7318;
  transition: all 500ms;
}
#interPresentcont1 #contentPres #imgandbutts #butts .butt:hover {
  background: rgb(250, 205, 103);
  background: linear-gradient(90deg, rgb(250, 205, 103) 0%, rgb(254, 166, 53) 60%);
  transition: all 500ms;
  border: #ce7318;
}

#interPresentcont2 {
  background: rgb(13, 22, 38);
  background: linear-gradient(180deg, rgb(13, 22, 38) 0%, rgb(44, 115, 82) 100%);
}
#interPresentcont2 #titlepres2 {
  width: 100%;
  height: 15%;
}
#interPresentcont2 #titlepres2 p {
  font-size: 2.5rem;
  font-family: "Latina bold";
}
#interPresentcont2 #textpres2 {
  width: 90%;
  height: 30%;
  font-size: 1.3rem;
  font-family: "Latina regular";
}
#interPresentcont2 #textpres2 span {
  font-family: "Latina bold";
}
#interPresentcont2 #dynamicAndReward {
  width: 70%;
  height: 55%;
}
#interPresentcont2 #dynamicAndReward .thingsd:nth-child(2) .modes {
  margin-top: 0.1rem;
}
#interPresentcont2 #dynamicAndReward .thingsd:nth-child(2) .modes .modesimg {
  margin-top: 0.7rem;
}
#interPresentcont2 #dynamicAndReward .thingsd {
  width: 50%;
  height: 100%;
}
#interPresentcont2 #dynamicAndReward .thingsd .modes {
  width: 80%;
  height: 80%;
}
#interPresentcont2 #dynamicAndReward .thingsd .modes .modesimg {
  width: 30%;
  height: 100%;
}
#interPresentcont2 #dynamicAndReward .thingsd .modes .ulmodes {
  width: 50%;
  height: 50%;
  margin-top: 3.2rem;
  margin-left: 1rem;
  font-size: 1rem;
}
#interPresentcont2 #dynamicAndReward .thingsd .modes .ulmodes .modes200 {
  width: 200% !important;
}
#interPresentcont2 #dynamicAndReward .thingsd .modes .ulmodes p {
  font-family: "Latina bold";
  font-size: 1.5rem;
}
#interPresentcont2 #dynamicAndReward .thingsd .modes .ulmodes ul span:first-child {
  font-family: "Latina bold";
  color: #f2b203;
}
#interPresentcont2 #dynamicAndReward .thingsd .modes .ulmodes ul li {
  color: #fff;
  font-family: "Latina bold";
}
#interPresentcont2 #dynamicAndReward .thingsd .modes .ulmodes2 {
  margin-top: 4rem;
}

#interPresentcont3 {
  height: 70vh;
}
#interPresentcont3 #titlepres3 {
  width: 100%;
  height: 20%;
}
#interPresentcont3 #titlepres3 p {
  font-size: 2.5rem;
  font-family: "Latina bold";
}
#interPresentcont3 #competitors {
  width: 75%;
  height: 80%;
}
#interPresentcont3 #competitors .competitor {
  width: 50%;
  height: 80%;
  font-family: "Latina bold";
}
#interPresentcont3 #competitors .competitor .modescomp {
  width: 45%;
}
#interPresentcont3 #competitors .competitor .modescomp .ulmodes ul {
  width: 200%;
}
#interPresentcont3 #competitors .competitor .modescomp .ulmodes span {
  color: #f2b203;
}
#interPresentcont3 #competitors .competitor .modescomp .ulmodes p {
  width: 130%;
}
#interPresentcont3 #competitors .competitor .modescomp2 {
  width: 50%;
}
#interPresentcont3 #competitors .competitor .modescomp2 p {
  margin-top: 3rem;
}

#formAlumn {
  position: fixed;
  width: 50%;
  height: 90%;
  display: flex;
  top: -400%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  border-radius: 0.8rem;
  transition: all 500ms;
}

#formWorker {
  position: fixed;
  width: 50%;
  height: 90%;
  display: flex;
  top: -400%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  border-radius: 0.8rem;
  transition: all 500ms;
}

.menuform {
  background: rgb(0, 74, 61);
  background: linear-gradient(180deg, rgb(0, 74, 61) 0%, rgb(0, 57, 53) 34%, rgb(0, 38, 44) 64%, rgb(0, 21, 33) 100%);
  overflow: auto;
}
.menuform .formclose {
  width: 10%;
  top: 1px;
  right: 0;
}
.menuform .formclose img {
  width: 80%;
}
.menuform #formContent {
  width: 100%;
  height: 100%;
}
.menuform #formContent #formTitleBox {
  width: 60%;
  height: 15%;
  font-family: "Latina bold";
  font-size: 1.5;
  background: rgb(28, 25, 1);
  background: linear-gradient(180deg, rgb(28, 25, 1) 0%, rgb(60, 44, 10) 50%);
  border: 4px solid #ce7318;
  border-radius: 1rem;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}
.menuform #formContent #formend {
  width: 100%;
  height: 80%;
}
.menuform #formContent #formend form {
  width: 100%;
  height: 100%;
}
.menuform #formContent #formend form .inp {
  width: 80%;
  height: 3rem;
}
.menuform #formContent #formend form .inp input,
.menuform #formContent #formend form .inp select {
  width: 100%;
  height: 100%;
  border-radius: 1rem;
}
.menuform #formContent #formend form .inp select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../../img/arrow.ico) 97%/2% no-repeat #001521;
}
.menuform #formContent #formend form #buttonsend {
  width: 100%;
  height: 3rem;
}
.menuform #formContent #formend form #buttonsend button {
  font-family: "Latina bold";
  width: 25%;
  height: 100%;
  border-radius: 1rem;
  background-color: #426264;
}

/*como styles*/
#howcontent #howtitle p {
  font-size: 2.5rem;
}
#howcontent #howDivs {
  width: 85%;
  height: 45%;
}
#howcontent #howDivs .howdiv:hover {
  background: rgb(250, 205, 103);
  background: linear-gradient(90deg, rgb(250, 205, 103) 0%, rgb(254, 166, 53) 60%);
  transition: all 500ms;
}
#howcontent #howDivs .howdiv {
  width: 40%;
  height: 15%;
  background: rgb(28, 25, 1);
  background: linear-gradient(180deg, rgb(28, 25, 1) 0%, rgb(60, 44, 10) 50%);
  transition: all 500ms;
  border-top: 2px solid #ce7318;
  border-bottom: 2px solid #ce7318;
}
#howcontent #howDivs .howdiv .star {
  width: 15%;
  height: 150%;
  background-image: url(../img/race/estrella.png);
  background-size: 100% 100%;
}
#howcontent #howDivs .howdiv .starLeft {
  left: -8%;
}
#howcontent #howDivs .howdiv .starRight {
  right: -8%;
}
#howcontent #howDivs .howdiv p {
  font-family: "Latina bold";
  font-size: 2rem;
}

/*support styles*/
#supportContent #supportElements {
  width: 85%;
  height: 100%;
}
#supportContent #supportElements #supportTitle {
  width: 100%;
}
#supportContent #supportElements #supportTitle p {
  font-size: 2.5rem;
}
#supportContent #supportElements #supportInfo {
  width: 50%;
  height: 20%;
}
#supportContent #supportElements #supportInfo #supportInfTit {
  height: 15%;
}
#supportContent #supportElements #supportInfo #supportInfTit p {
  font-family: "Latina bold";
}
#supportContent #supportElements #supportInfo #support2info {
  height: 85%;
}
#supportContent #supportElements #supportInfo #support2info i {
  font-size: 2.5rem;
  margin-right: 2.5rem;
}
#supportContent #supportElements #supportForm {
  width: 100%;
  height: 40%;
}
#supportContent #supportElements #supportForm p {
  font-family: "Latina bold";
}
#supportContent #supportElements #supportForm form {
  width: 100%;
  height: 70%;
}
#supportContent #supportElements #supportForm form .inpt {
  width: 100%;
}
#supportContent #supportElements #supportForm form .inpt input,
#supportContent #supportElements #supportForm form .inpt textarea {
  width: 100%;
  border-radius: 1rem;
}
#supportContent #supportElements #supportForm form #supportButton button {
  font-family: "Latina bold";
  background-color: #426264;
  width: 15%;
  height: 2rem;
  border-radius: 1rem;
}
#supportContent #supportElements #supportNet {
  width: 100%;
  height: 30%;
}
#supportContent #supportElements #supportNet p {
  font-family: "Latina bold";
}
#supportContent #supportElements #supportNet ul {
  width: 35%;
  height: 80%;
}
#supportContent #supportElements #supportNet ul li {
  font-size: 2.5rem;
}

/*toggle*/
#divNav {
  visibility: hidden;
  top: 35%;
  right: 0;
  width: 20%;
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 950;
  cursor: grab;
}
#divNav .divnav-content {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-45deg);
}
#divNav .divnav-content .toggle-btn,
#divNav .divnav-content span a {
  height: 60px;
  width: 60px;
  background: rgb(250, 205, 103);
  background: linear-gradient(90deg, rgb(250, 205, 103) 0%, rgb(254, 166, 53) 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
#divNav .divnav-content .toggle-btn {
  font-size: 3rem;
  color: #fff;
  z-index: 100;
  cursor: pointer;
  transform: rotate(-225deg);
  transition: all 0.6s ease;
}
#divNav .divnav-content span {
  position: absolute;
  transition: all 0.6s ease;
  opacity: 0;
}
#divNav .divnav-content span a {
  text-decoration: none;
  transform: rotate(45deg);
}
#divNav .divnav-content span a i {
  font-size: 24px;
  color: black;
  transform: rotate(calc(var(--i) * -45deg));
  opacity: 0.8;
  transition: 2s;
}

#divNav.open .toggle-btn {
  transform: rotate(0deg);
}

#divNav.open .divnav-content span {
  transform: rotate(calc(var(--i) * 45deg)) translateY(120px);
  opacity: 1;
}

.divnav-content span a .divnav-content span a:hover i {
  opacity: 1;
}

/*Activar styles*/
#activar #actContent {
  width: 90%;
  height: 90%;
}
#activar #actContent #actlogo {
  width: 100%;
  height: 15%;
  border: 1px solid white;
  background: rgb(0, 74, 61);
  background: linear-gradient(180deg, rgb(0, 74, 61) 0%, rgb(0, 57, 53) 34%, rgb(0, 38, 44) 64%, rgb(0, 21, 33) 100%);
}
#activar #actContent #actlogo img {
  width: 10rem;
}
#activar #actContent #actEnnounce {
  width: 100%;
  height: 75%;
  background: #fff;
}
#activar #actContent #actEnnounce #ennounce {
  width: 100%;
  height: 55%;
}
#activar #actContent #actEnnounce #ennounce #enntext {
  width: 90%;
  height: 90%;
}
#activar #actContent #actEnnounce #ennounce #enntext p {
  font-size: 1.5rem;
}
#activar #actContent #actEnnounce #ennounceButt {
  width: 100%;
  height: 30%;
}
#activar #actContent #actEnnounce #ennounceButt button {
  width: 20%;
  height: 45%;
}
#activar #actContent #actEnnounce #ennounceButt button img {
  width: 100%;
  height: 90%;
}
#activar #actContent #actEnnounce #actDoubt {
  width: 100%;
  height: 15%;
}
#activar #actContent #actFoot {
  width: 100%;
  height: 10%;
  background: #001521;
  border: 1px solid white;
}
#activar #actContent #actFoot ul {
  width: 30%;
}
#activar #actContent #actFoot ul li {
  font-size: 1.5rem;
}

#canjAvai {
  position: fixed;
  width: 40%;
  height: 40%;
  background: rgb(30, 26, 1);
  background: linear-gradient(180deg, rgb(30, 26, 1) 0%, rgb(41, 33, 4) 34%, rgb(51, 38, 7) 64%, rgb(60, 44, 10) 100%);
  display: flex;
  top: -400%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  border-radius: 5%;
  border: 4px solid #8c510f;
  transition: all 500ms;
}
#canjAvai #canjtitle {
  font-size: 2rem;
}
#canjAvai #canjtext {
  width: 90%;
  font-size: 1.5rem;
}

.canj.canj-opened {
  position: relative;
  top: 25% !important;
  z-index: 3999 !important;
}

.canj-opened.body::after {
  opacity: 1;
  transform: scale(1);
}

#buytickets {
  position: fixed;
  width: 40%;
  height: 40%;
  background: rgb(30, 26, 1);
  background: linear-gradient(180deg, rgb(30, 26, 1) 0%, rgb(41, 33, 4) 34%, rgb(51, 38, 7) 64%, rgb(60, 44, 10) 100%);
  display: flex;
  top: -400%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  border-radius: 5%;
  border: 4px solid #8c510f;
  transition: all 500ms;
}
#buytickets #canjtitle {
  font-size: 2rem;
}
#buytickets #canjtext {
  width: 90%;
  font-size: 1.5rem;
}

/*# sourceMappingURL=styles.css.map */