@font-face {
  font-family: Bold;
  src: url(./fonts/EMprint-Bold.ttf);
}

@font-face {
  font-family: Regular;
  src: url(./fonts/EMprint-Regular.ttf);
}

@font-face {
  font-family: Pro;
  src: url(./fonts/MyriadPro-Regular.otf);
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: unset;
  }
html{
}
body{
	margin: 0;
	padding: 0;
	width: 100vw;
	background-color: white;
	overflow-x: hidden;
}

img{
	width: 100%;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type=number] { -moz-appearance:textfield; }

button{

	background: none;
	border: none;
}


button:focus{
	outline: none;
}

a{
	font-family: 'Pro';
	cursor: pointer;
}

a:hover{
	font-family: 'Pro';
	text-decoration: none;
}

input{
	font-family: 'Pro' !important;
	border: 1px solid  #0061ad !important;
	margin-top: 10px;
}

input::placeholder{
	color: #bdc0c3 !important;
	font-family: 'Pro' !important;

}

.form-error{
	text-align: left;
}

p{
	font-family: 'Pro';
	font-size: 0.8rem;
}




.form-control:focus {
	box-shadow: 0 0 0 0.1rem rgb(0 97 173);
	border-color: #0061ad;
}

.main{
	justify-content: unset;
}

.mobile{
	display: block;
}

.desktop{
	display: none;
}

.header{
	display: flex;
	width: 100vw;
}

.hamburger{
	width: 25px;
    margin: 23px;
}

.logo{
	margin: auto;
    width: 100%;
    max-width: 200px;
}

.middel_space{
	margin: auto;
}

.foto{
	background-image: url(../1x/fotom.png);
    width: 95vw;
    background-position: top;
    background-size: 100% auto;
    background-repeat: no-repeat;
    padding-top: calc(852 / 835 * 100%);
    margin: auto;
}



.left_container{
	width: 95%;
	margin: auto;
}

.login{
	width: 100%;
    box-shadow: 0px 6px 6px 0px #0000000a;
    border-radius: 15px;
    margin-top: 10px;
    margin-bottom: 20px;
    max-width: 640px;
}

.titulo_form{
	color: #CB2128;
	font-family: 'Bold';
	font-size: 30px;
}

.blue_button{
	color:white;
	font-family: 'Bold'!important;
	border:none;
	box-shadow: 0px 3px 6px 0px #00000021;

	background: rgb(0,97,173);
	background: -moz-linear-gradient(222deg, rgba(0,97,173,1) 30%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(0,97,173,1) 70%, rgba(0,97,173,1) 100%);
	background: -webkit-linear-gradient(222deg, rgba(0,97,173,1) 30%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(0,97,173,1) 70%, rgba(0,97,173,1) 100%);
	background: linear-gradient(222deg, rgba(0,97,173,1) 30%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(0,97,173,1) 70%, rgba(0,97,173,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0061ad",endColorstr="#0061ad",GradientType=1);
	background-size: 427% 100%;
	background-position-x: 0%;
	background-repeat: no-repeat;
	transition: all 1s

}

.blue_button:hover{
	background-position-x: 100%;
	color: white;
}

.registrarse{
	color: #0061ad;
	text-align: center;
	margin: auto;
	display: block;
	font-size: 24px;
}

.terminos{
	color: #CB2128;
	font-size: 0.7rem;
	text-align: center;
	width: 80%;
	margin: auto;
	padding-bottom: 10px
}

.terminos a{
	color:  #CB2128;
	text-decoration: underline;
}
.texto_promo{
	width: 85%;
    margin: auto;
}
.titulo-fondo-rojo{
    background-color: #CB2128;
    color: white;
    text-align: center;
    max-width: 411px;
    margin: 15px;
    padding: 2px 14px;
    width: fit-content;
}

.titulo-fondo-rojo p{
	font-family: 'Bold';
    font-size: 20px;
    margin-bottom: 0;
}
.p1{
	width: 84%;
    margin: auto;
    margin-bottom: 20px;
}

.player-card{
	color: white;
    background-color: #ffffff;
    box-shadow: 0px 4px 10px 0px #0000000a;
    text-transform: uppercase;
    width: 320px;
    border-radius: 10px;
    margin-right: auto;
    margin-left: 23px;
}

.player-name{
	font-family: 'Bold';
    font-size: 22px;
    padding: 10px 0 0 10px;
    margin: 0;
    color: #0061ad;

}

.player-score{
	padding: 0 0 0 10px;
    margin: -11px 0 5px 0;
    color: #e40520;
}

.player-score span{
	font-family: 'Bold';
	font-size: 1rem;
	color: black;
}
.widht-compens{
	width: 95vw;
}
.inner-pay-button{
	display: flex;
    align-items: center;
    /* justify-content: center; */
    width: 200px;
    pad
}

.inner-pay-button p{
	font-size: 30px;
    font-family: 'Bold';
    margin-bottom: 0;
}

.play_button{
	border: 1px solid #0061ad;
    width: 222px;
    margin: auto;
    border-radius: 15px;
    padding: 5px 11px;

    background: rgb(255,255,255);
	background: -moz-linear-gradient(121deg, rgba(255,255,255,0) 50%, #0061ad 50%);
	background: -webkit-linear-gradient(121deg, rgba(255,255,255,0) 50%, #0061ad 50%);
	background: linear-gradient(121deg, rgba(255,255,255,0) 50%, #0061ad 50%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#0061ad",GradientType=1);

	background-size: 227% 100%;
	background-position-x: 0%;

	transition: all 0.5s

}

.play_button button{
	color: #0061ad;
}

.play_button button:hover{
	color: white !important;
}


.play_button:hover{
	background-position-x: 100%;
}

.heart{
	width: 34px;
	margin-right: 10px;
}
.red{
	color: #CB2128;
}
.life-card{
	display: flex;
    padding: 14px;
    align-items: center;
    justify-content: flex-end;
}
.game-lifes{
    width: 111px;
    border-radius: 15px;
    padding: 5px 11px;
    box-shadow: 0 2px 7px #00000021;
}

.game-text{
	padding-left: 12px;
    font-size: 1rem;
    font-family: 'Bold';
    margin: 0;
}

.game-text span{
	color: black;
}

.blue-text{
	color: #0061ad ;
}

.red-text{
	color: #CB2128;
}

#instrucciones{
	text-align: center;
}

#instrucciones h4{
	font-family: 'Bold';
    text-transform: uppercase;
    font-size: 1.3rem;
}
#base{
    border: 5px solid grey;
    background-color: #999999;
}
#base canvas{
	width: 100% !important;
    height: auto !important;
    max-width: 640px;
    margin: 0 !important;
}

.score-card{
    box-shadow: -1px 4px 9px 0px #0000000d;
    border-radius: 15px;
    padding: 22px;
    text-align: center;
}

.score-text{
    font-family: 'Bold';
    font-size: 1.05rem;
    text-align: left;
    margin-bottom: 3px;
}

.score-text span{
    font-family: 'Pro';
    font-size: 1.05rem;
    color: black !important;
}


table tbody tr:nth-child(odd) {
	background: ##ffffff;
}
table tbody tr:nth-child(even) {
	background: #f8f9fa;
}
table thead {
  background: #0061ad;
  color: #fff;
  font-size: 18px;
  @include border-radius(5px);
}
table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 20px;
  border-radius: 15px;
}

.puesto{
	color: red;
	font-family: 'Bold';
	border-right: 1px solid #e9ecef; 

}

.name{
	font-family: 'Regular';
	border-right: 1px solid #e9ecef; 
	font-size: 0.8rem;
}
.best-score{
	font-family: 'Pro'
}


.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #0061ad;
    border-color: #0061ad;
}

.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    padding-top: 0.5rem;
    padding-right: 0.75rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #0061ad;
    background-color: #fff;
    border: 1px solid #dee2e6;
}

.footer{
	width: 96vw;
    margin: 10px;
}

ul{
	padding: 25px;
    box-shadow: -2px 5px 9px 1px #0000000f;
    margin: auto;
    width: 95%;

}
li::marker{
	color:#cb2128;
}

li{
	font-family: 'Pro';
	font-size: 15px;
	text-align: left;
	margin-top: 20px;
}

.bono1{
	display: flex;
    align-items: center;
}
.bono1 div{
	width: 123px;
    margin-right: 18px;
}
.bono1 p{
	font-family: 'Bold';
    color: #0061a8;
    line-height: 31px;
    margin: 0;
    font-size: 27px;
}
.bono2{
	display: flex;
    align-items: center;
    padding-left: 21px;
}
.bono2 div{
	width: 60px;
    margin-right: 18px;
}
.bono2 p{
	font-family: 'Regular';
    font-size: 20px;
    line-height: 18px;
    margin: 0;
    color: #d63832;
}

.prices{
	font-family: 'Pro';
	padding-left: 20px;
}
.prices p{
	margin: 0;
}

.terminos-text{
    width: 95vw;
    max-width: 800px;
    margin: auto;
}

.menu_mobile{
    background-color: #0061a8f7;
    position: fixed;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(3px); 
    left: -100vw;
    transition: all 0.5s;
    z-index: 1;

}

.close_mobile{
    margin-left: auto;
    margin-right: 10px;
    margin-top: 10px;
    display: block;
    width: 26px;
}

.mobile_menu_button {
    width: 100vw;
    font-family: 'Bold';
    color: white;
    font-size: 22px;
    text-align: left;
    padding: 5px 21px;
    border-bottom: 1px solid white;
}

.mobile_menu_logout{
    width: 100vw;
    font-family: 'Bold';
    color: white;
    font-size: 22px;
    text-align: left;
    padding: 5px 21px;
    border-bottom: 1px solid white;
    background-color: #c12a21;
}