@import url('https://fonts.googleapis.com/css?family=Nunito:400,700,900&display=swap');
@import url('circle.css');

h1, h2, h3, h4, h5, h6 {
	font-family: 'Nunito';
	font-weight: 900;
}
.font-family2 {
	font-family: 'Nunito';
}
h3 {
	font-size: 21px;
}
hr{
	border-color: #66caE1;
}

.btn-success{
	background-color: #66CAE1;
	border-color: #66CAE1;
}
.btn-success:hover{
	background-color: #57b4ca;
	border-color: #57b4ca;	
}
.frame {
    background-image: url(../img/back.jpg);
}
.top-nav .divisor-left{
	padding-right: 0;
}
.nav-profile {
	display: flex;
	padding: 0;
}
.nav-profile .avatar {
	margin-top: -8px;
}
.nav-profile .puntajes {
	width: 100%;
	padding: 15px 0 0 15px;
}
.nav-profile .grupo {
	font-size: .8rem;
	text-transform: uppercase;
	text-align: center;
}
.nav-profile .puntaje, .nav-profile .position  {
	width: 100%;
	padding: 0;
	line-height: 1;
	text-align: left;
}
.nav-profile .puntaje span, .nav-profile:hover .puntaje span {
	border: 0;
	padding-top: 6px;
	margin-left: 0;
	margin-right: 0;
	font-family: 'Nunito';
}
.nav-profile .puntaje > span {
	position: relative;
	height: 28px;
}
.nav-profile .puntaje span strong{
	position: absolute;
	left: 0;
	color: #66CAE1;
	margin-left: -18px;
} 
.nav-profile .position span{
	position: absolute;
	z-index: 20;
	bottom: 0;
	border: 0;
	background-color: #fff;
	font-family: 'Nunito';
	color: #d15959;
	width: 25px;
	height: 25px;
	line-height: 26px;
	padding: 0;
	left: 50%;
	text-align: center;
	font-size: 1.8em;
	box-shadow: 0 0 10px rgba(0,0,0,.2);	
}
.nav-profile:hover .position span, .nav-profile:hover .puntaje span {
	border: 0;
}
.nav-profile span.progress {
	height: 10px;
	margin-top: 8px;
	margin-left: 0;
	margin-right: 0;
	position: relative;
	padding: 0;
	background-color: rgba(255,255,255,.2) !important;
	background-image: none;
}
.nav-profile span.progress span {
	position: absolute;
	margin: 0;
	left: 0;
	top: 0;
	bottom: 0;
	background-color: #66CAE1;
}
.title span{
	z-index: 2;
	display: inline-block;
	font-weight: 800;
	color: rgb(255,255,255);
	font-family: 'Montserrat Alternates';
	text-transform: uppercase;
	padding: 0 .4em;
	line-height: 3rem;
	font-size: 78%;
	position: relative;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	background-size: auto 100%;
}
.title span:after {
	display: block;
	content: '';
	height: 100%;
	width: 2rem;
	position: absolute;
	right: -1.9rem;
	top: 0;
	background-size: auto 100%;
	background-position: right center;
}
.title span:before {
	display: block;
	content: '';
	height: 100%;
	width: 2rem;
	position: absolute;
	left: -1.9rem;
	top: 0;
	background-size: auto 100%;
	background-position: left center;
}
.title span{
	color: rgb(255,255,255);
	background-color: #007CC2;
}
.title span:after {
    border-right: 16px solid transparent;
    border-top: 3rem solid #007CC2;
}
.title span:before {
    border-left: 16px solid transparent;
    border-bottom: 3rem solid #007CC2;
}

.modal.rojo .modal-content {
	background-color: #007CC2;
}
.modal-usuario .avatar{
	mask: none;
	-webkit-mask: none;
    -o-mask: none;
    -ms-mask: none;
    border-radius: 100%;
    height: 180px;
    width: 180px;
}
.group-partidos tr{
	border-bottom: 1px dashed rgba(0,0,0,.1);
}
.group-partidos th{
	padding-bottom: 8px;
}

/* Custom MarioKart Theme leaderboard */
.leaderboard .kart.me td, .leaderboard .kart td, .leaderboard .kart.podio  {
	background-color: transparent;
	border: 0;
	color: #fff;
}
.leaderboard .kart .avatar{
	position: absolute;
	top: -8px;
	left: 17px;
	width: 40px;
	height: 40px;
}
.leaderboard tr.kart.me:hover td {
	background-color: transparent;
}
.leaderboard tr.kart:hover td {
	background-color: transparent;
}
.leaderboard .kart.me td:first-child:before {
	display: none;
}
.leaderboard .kart.me td:first-child:after {
	display: none;
}
.leaderboard .list .kart td {
	height: 100px;
	background-image: url(../img/leaderboard-pista.png);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 100% 30px;
	position: relative;
	line-height: 1;
}
.leaderboard .list .wide td {
	background-image: url(../img/leaderboard-pista-wide.png);	
	background-size: 130% 30px;
	background-position: bottom right;
	height: 110px;
}
.leaderboard .list .kart img.kart {
	max-height: 70px;
	position: relative;
	z-index: 100;
}
.leaderboard .list .kart .block {
	position: absolute;
	left: 0;
	top: auto;
	bottom: 15px;
}
.leaderboard .list .kart .block .marcador {
	position: absolute;
	left: 80px;
	min-width: 100px;
	top: 0;
	background-image: url(../img/marcador-arrow.png);
	background-repeat: no-repeat;
    background-position: top left;
    padding-left: 13px;
    height: 60px;
    z-index: 1;
}
.leaderboard .list .kart .block.left .marcador{
	right: 80px;
	left: auto;
	top: auto;
	bottom: 10px;
	text-align: right;
	background-image: url(../img/marcador-arrow.png);
	background-position: top right;
    padding-left: 0;
    padding-right: 13px;
}
.leaderboard .list .kart .block .name {
	color: #fff;
	font-size: 1rem;
	font-weight: 800;
	text-transform: uppercase;
	font-family: Nunito;
	display: block;
    white-space: nowrap;
}
.leaderboard .list .kart .block .points {
	font-size: 1.6rem;
	font-weight: 900;
	color: #FFC107;
	font-family: 'Nunito';
	line-height: 28px;
}

.leaderboard .me td.puntos strong {
	font-size: 1.4em;
}
.leaderboard .me td.puntos strong .alcance{
	opacity: .8;
	font-size: .7em;
}
.leaderboard .avatar {
	mask: none;
	-webkit-mask: none;
	-o-mask: none;
	-ms-mask: none;
	height: 45px;
	width: 45px;
	border-radius: 100%;
}
.leaderboard .me td {
	background-color: #007CC2;
	color: #fff !important;
}
.leaderboard .me td:first-child:before {
	background-color: #007CC2;
	transition: all .2s ease 0s;
    -webkit-transition: all .2s ease 0s;
    -moz-transition: all .2s ease 0s;
}
.leaderboard .me td:last-child:after {
	background-color: #007CC2;
	display: none;
	transition: all .2s ease 0s;
    -webkit-transition: all .2s ease 0s;
    -moz-transition: all .2s ease 0s;
}
.leaderboard .me td:first-child:before {
	display: none;
}
.leaderboard .me:hover td:last-child:after {
	background-color: #1b91d3;
}
.leaderboard .me:hover td:first-child:before  {
	background-color: #1b91d3;
}
.sidebar .leaderboard .me td:first-child:before {
	display: none;
}
.sidebar .leaderboard .me td:last-child:after {
	display: none;
}
.sidebar .leaderboard tbody tr.me td, .sidebar .leaderboard tbody tr.me:hover td{
	background-color: transparent;
}
.sidebar .leaderboard-scroll {
	padding-right: 0;
}
.leaderboard.leaderboard-group .uppercase{
	font-size: 1.2em;
	font-weight: 900;
}
.leaderboard.leaderboard-group .me .position{
	background-color: #66caE1 !important;
	color: #fff !important;
}
.leaderboard .podio.me td{
	color: #66caE1 !important;
}
.leaderboard .me td.puntos strong {
	color: #FFC107;
}

.leaderboard tbody tr.me:hover td{
	background-color: #1b91d3;
}
.leaderboard .me .position {
	background-color: #fff;
	color: #66caE1 !important;
}
.leaderboard-search h3{
	font-weight: 800;
}
#leaderboard-0 {	
	margin-right: -20px;
}
#leaderboard-0 .leaderboard{	
	margin-left: 0;
}
#leaderboard-0 .leaderboard-scroll{
	padding-right: 0;
	overflow: visible;
}

.indicadores .indicador{
	border-radius: 8px;
	padding: 7px 7px 22px ;
	margin: 0 0 10px 20px;
}
.indicadores .indicador-1{
	background-color: rgba(209, 221,10, .3)
}
.indicadores .indicador-2{
	background-color: rgba(128, 217,84, .3)
}
.indicadores .indicador-3{
	background-color: rgba(245, 152, 157, .3)
}
.indicadores .badge {
	float: left;
	width: 70px;
	display: block !important;
	background-color: transparent;
}
.indicadores .data {
	padding-left: 80px;
	text-align: left;
	text-transform: uppercase;
	font-size: .8em;
}
.indicadores h3 {
	margin: 0;
	font-size: 1.8em;
	font-weight: 800;
}
.indicadores small {
	font-family: 'Titillium Web';
	font-size: .5em;
	font-weight: 500;
	display: block;
	float: left;
	clear: both;
	line-height: 0;
}
.indicadores .progreso {
	width: 100%;
	padding: 9px 0 2px;
	display: block;
	line-height: 10px;
	font-size: 1.7em;
	font-family: "Nunito";
	font-weight: 800;
}
.indicadores .progreso .bar{
	border-radius: 10px;	
	width: 64%;
	height: 9px;
	background-color: rgba(0,0,0,.3	);
	background-image: none;
	position: relative;
	display: inline-block;
	float: left;
	margin-right: 10px;
}
.indicadores .progreso .bar span{
	border-radius: 10px;
	top: 0;
	bottom: 0;
	left: 0;	
	position: absolute;
	background-color: rgba(255,255,255, 1);
	display: inline-block;
}
.indicadores .alcance {
	font-size: 2em;
	font-weight: 800;
	float: right;
	font-family: "Nunito";
}

.premios img.medalla {
    top: -6%;
    right: 15%;
    left: auto;
    width: 30%;
}
.premios .premio{
	margin-top: 30px;
	background-color: transparent;
	box-shadow: none;
	cursor: default;
	overflow: visible;
}
.premios .premio:hover{
	box-shadow: none;
}
.premios .info {
	text-align: center;
}
.premios .info h4, .premios .info p{
	color: #fff;
}
.premios .info h3{
	font-size: 1.5em;
}

.leaderboard-scroll {
	max-height: none;
}
.leaderboard tr {
	border-bottom: 0;
}

.leaderboard .badges{
	position: absolute;
	right: -81px;
    top: 16px;
}
.leaderboard .left .badges{
	left: -125px;
	right: auto;
	top: 13px;
}
.leaderboard .coin {
	width: 20px;
	vertical-align: initial;
}

body.home .noticias h2 {
	font-size: 2em;
}

.leaderboard.leaderboard-group tr.zona-oeste .position, .leaderboard.leaderboard-group tr.zona-oeste .position span, .modal-grupo.zona-oeste .modal-content{
	color: #fff;
	background-color: #a00;
}
.leaderboard.leaderboard-group tr.zona-sur .position, .leaderboard.leaderboard-group tr.zona-sur .position span, .modal-grupo.zona-sur .modal-content{
	color: #fff;
	background-color: #2196F3;
}
.leaderboard.leaderboard-group tr.zona-norte .position, .leaderboard.leaderboard-group tr.zona-norte .position span, .modal-grupo.zona-norte .modal-content{
	color: #fff;
	background-color: #8bc34a;
}

.modal.rojo .title span {
	background-color: transparent;
	font-size: 130%;
}

.screenmode {
	display: inline-block;
	padding: 8px 2px;
	font-size: 13px;
	color: #fff;
	position: absolute;
	left: 167px;
    top: 10px;
    z-index: 1000;
}
.screenmode.back {
	padding: 15px 26px;
	font-size: 1em;
	margin-top: -13px;
	opacity: .6;
	top: 39px;
	right: 0;
	left: auto;
}
.screenmode .fas{
	margin-right: 6px;
}
#fullscreen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    background-image: url(../img/back.jpg);
    background-size: cover;
    display: none;
	z-index: 1040;
}

#fullscreen .leftpanel{
	width: 70%;
	padding: 20px 40px;	
	position: absolute;
	bottom: 0;
	left: 0;
	top: 0;
}
#fullscreen .rightpanel{
	width: 30%;
	padding: 40px 14px;
	min-width: 400px;
	position: absolute;
	bottom: 0;
	right: 0;
	top: 0;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
	background-color: rgba(0,0,0,.5);
}
#fullscreen .leftpanel h2 {
	color: #fff;
	font-size: 27px;
}

#leaderboard-full .leaderboard-users {
    position: absolute;
    top: 80px;
    left: -15px;
    bottom: 80px;
    right: 26px;
}
#leaderboard-full .leaderboard-users .list{
	display: table;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#leaderboard-full .leaderboard-users .list tr{
	width: 100%;
}
#leaderboard-full .leaderboard-users .list td{
	width: 100%;
	padding-left: 20px;
}
#leaderboard-full .leaderboard .list .kart .block .marcador {
	top: -8px;
}
#leaderboard-full .leaderboard .list .kart .block .marcador .indicadores {
	clear: both;
	display: block;	
	width: 300px;
}
#leaderboard-full .leaderboard .list .kart .block .marcador .indicadores span{
	display: inline-block;
	padding: 1px 2px;
}
#leaderboard-full .leaderboard .list .kart .block .marcador .indicadores span i{
	color: #eef2b5;
	font-size: .75em;
	margin: 0 3px;
}

#fullscreen .rightpanel .indicadores {
	background-color: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
}
#fullscreen .rightpanel .indicadores .indicador h6{
	color: #fff799;
}
	
#fullscreen .rightpanel .indicadores .indicador {
	padding: 0;	
}
#fullscreen .rightpanel .indicadores .ind{
	width: 50%;
	float: left;
	display: flex;
    justify-content: center;
}
#fullscreen .rightpanel .indicadores .progreso {
	font-size: 3em;
}
#fullscreen .rightpanel .indicadores h3{
	display: none;
}
#fullscreen .rightpanel .indicadores .ind h3{
	display: block !important;
}
#fullscreen .rightpanel .indicadores .c100 h3{
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	bottom: 48px;
	z-index: 2000;
}
.c100 {
	margin: 13px 10px;
}
.c100 h3 {
	color: #fff !important;
}
.c100.dark {
	background-color: rgba(119, 119, 119, 0.43);
}
.c100 > span {
	font-family: 'Nunito';
	font-weight: 900;
	letter-spacing: -.05em;
	margin-top: -.1em;
	color: #ffefa2 !important;
}
.c100:hover > span {
	width: 5em;
    line-height: 5em;
    font-size: 0.2em;
	transform: scale(1.3);
}
.c100.dark:after {
	background-color: #313131;
}

#fullscreen .podio {
	margin: 20px;
}
#fullscreen .podio .user .avatar {
	border: 10px solid rgba(255,255,255,.1);
	border-radius: 100%;
	margin-bottom: 10px;
	width: 120px;
	height: 120px;
}
#fullscreen .podio .user .nombre {
	text-transform: uppercase;
	font-family: 'Nunito';
	font-weight: 900;
    font-size: 1.2em;
    line-height: 1;
    margin-bottom: 9px;
}
#fullscreen .podio .user .indicador span{
	font-family: 'Nunito';
	font-weight: 900;
	font-size: 1.5em;
	padding: 1px 15px;
	border-radius: 40px;
	background-color: #fff799;
	color: #222;
}
#fullscreen .podio .user .indicador span i{
	margin-right: 5px;
	opacity: .7;
}
#fullscreen .grupo {
	background-color: rgba(255,255,255,.2);
	border-radius: 100px;
	color: #fff799;
	font-family: 'Nunito';
	font-weight: 900;
	text-transform: uppercase;
	text-align: left;
	padding: 12px 35px 12px 58px;
    line-height: 1;
    position: relative;
    overflow-y: hidden;
}
#fullscreen .grupo span {
	font-size: 2em;
	display: block;
	color: #fff;
}
#fullscreen .grupo span.posicion {
	background-color: rgba(255,255,255,.8);
    position: absolute;
    left: 11px;
    width: 45px;
    margin: -12px;
    height: 100%;
    padding: 19px 15px;
    color: #333;
}