@font-face{
	font-family: EmojiSymbols;
	src: URL("../fonts/EmojiSymbols-Regular.woff");
}
@font-face{
	font-family: Montserrat;
	src: URL("../fonts/Montserrat-Italic.ttf");
}
@font-face{
	font-family: "DM Mono";
	src: URL("../fonts/DMMono-Regular.ttf");
}
@font-face{
	font-family: "Share Tech Mono";
	src: URL("../fonts/ShareTechMono-Regular.ttf");
}
body{ padding: 0; margin: 0; background-image: URL("../img/ash-edmonds-0aWZdK8nK2I-unsplash.jpg"); background-size: 100% 100%; font-family: "DM Mono"; }
#tabla_posiciones{ width: 70%; height: 800px; background-color: rgba(81,131,169,0.25); color: #ffffff; margin: 50px auto 0 auto; padding: 20px 50px; backdrop-filter: blur(10px); }
#tabla_posiciones_header h1{ text-align: center; font-size: 32px; margin: 0 0 20px 0; font-family: Montserrat; font-weight: 400; }
#tabla_posiciones_filtro1{ float: left; width: 150px; font-size: 18px; text-align: center; padding: 5px; position: relative; border-radius: 2px; transition: background-color 0.4s; }
#tabla_posiciones_filtro2{ float: right; width: 150px; font-size: 18px; text-align: center; padding: 5px; position: relative; border-radius: 2px; transition: background-color 0.4s; }
.filtro_arrow{ font-size: 14px; position: relative; top: -2px; }
#tabla_posiciones_filtro1:hover, #tabla_posiciones_filtro2:hover{ background-color: rgba(255,255,255,0.2) !important; cursor: pointer; }
#tabla_posiciones_filtro1_content, #tabla_posiciones_filtro2_content{ display: none; position: absolute; top: 31px; left: 0; width: 150px; padding: 5px; background-color: rgba(36,61,85,0.9); font-size: 16px; z-index: 1000; }
#tabla_posiciones_filtro1_content span, #tabla_posiciones_filtro2_content span{ display: block; text-align: center; }
#tabla_posiciones_filtro1_content span:hover, #tabla_posiciones_filtro2_content span:hover{ background-color: #546578; cursor: pointer; }
.position_row_header{ clear: both; font-size: 18px; color: #fc1a2a; margin-top: 75px; }
#tabla_posiciones_body{ clear: both; height: 600px; overflow-y: auto; font-family: "Share Tech Mono"; }
.position_row{ width: 98%; margin: 0 auto; padding: 15px 0; }
.position_row_place{ width: 20%; display: inline-block; text-align: center; color: #ffffff; }
.position_row_name{ width: 35%; display: inline-block; text-align: left; font-weight: bold; }
.position_row_points{ width: 15%; display: inline-block; text-align: center; font-weight: bold; }
.position_row_wins{ width: 15%; display: inline-block; text-align: center; }
.position_row_loses{ width: 15%; display: inline-block; text-align: center; }
.position_row_header .position_row_place{ color: #fc1a2a; }
.position_row_header .position_row_name, .position_row_header  .position_row_points{ font-weight: normal; }
#tabla_posiciones_footer{ font-size: 18px; margin-top: 20px; text-align: center; }
#pagination_first{ float: left; color: #bbbbbb; transition: color 0.4s; visibility: hidden; }
#pagination_first:hover{ color: #ffffff; cursor: pointer;}
#pagination_previous{ float: left; margin-left: 20px; color: #bbbbbb; transition: color 0.4s; visibility: hidden; }
#pagination_previous:hover{ color: #ffffff; cursor: pointer;}
#pagination_next{ float: right; margin-right: 20px; color: #bbbbbb; transition: color 0.4s; visibility: hidden; }
#pagination_next:hover{ color: #ffffff; cursor: pointer;}
#pagination_last{ float: right; color: #bbbbbb; transition: color 0.4s; visibility: hidden; }
#pagination_last:hover{ color: #ffffff; cursor: pointer;}
.pagination_arrows{ font-size: 12px; position: relative; top: -2px; }
#pagination_numbers{ visibility: hidden; }
.award1{ border: 2px solid #5a7ca0; border-bottom: 2px solid #ffd700; background-color: rgba(255,255,255,0.2); box-shadow: 0 2px 15px 0 #1a324e; padding-top: 30px; padding-bottom: 30px; margin: 10px auto; box-sizing: border-box; position: relative; }
.award1 .position_row_place{ color: #ffd700; }
.award2{ border: 2px solid #5a7ca0; border-bottom: 2px solid #c0c0c0; background-color: rgba(255,255,255,0.15); box-shadow: 0 2px 15px 0 #1a324e; padding-top: 22px; padding-bottom: 22px; margin: 10px auto; box-sizing: border-box; position: relative; }
.award2 .position_row_place{ color: #ffd700; }
.award3{ border: 2px solid #5a7ca0; border-bottom: 2px solid #ce8a07; background-color: rgba(255,255,255,0.1); box-shadow: 0 2px 15px 0 #1a324e; padding-top: 17px; padding-bottom: 17px; margin: 10px auto; box-sizing: border-box; position: relative; }
.award3 .position_row_place{ color: #ffd700; }
.crown1{ font-size: 42px; color: #ffd700; font-family: EmojiSymbols; position: absolute; top: 13px; left: 15px; }
.crown2{ font-size: 36px; color: #c0c0c0; font-family: EmojiSymbols; position: absolute; top: 8px; left: 17px; }
.crown3{ font-size: 30px; color: #ce8a07; font-family: EmojiSymbols; position: absolute; top: 6px; left: 19px; }
.mobile_label{ display: none; }
@media all and (max-width: 1280px){
	#tabla_posiciones{ width: 90%; padding: 20px 35px; }
}
@media all and (max-width: 1080px){
	#tabla_posiciones{ padding: 20px; }
}
@media all and (max-width: 980px){
	.position_row_place{ width: 25% }
	.position_row_name{ width: 36%; }
	.position_row_points{ width: 13%; }
	.position_row_wins{ width: 13%; }
	.position_row_loses{ width: 13%; }
}
@media all and (max-width: 950px){
	.tabla_posiciones_filtro1,.tabla_posiciones_filtro2{ font-size: 16px; }
	.filtro_arrow{ font-size: 12px; top: -1px; }
	.position_row_header{ font-size: 16px; }
	#tabla_posiciones_footer{ font-size: 16px; }
	.pagination_arrows{ font-size: 10px; top: -1px; }
}
@media all and (max-width: 840px){
	.position_row_name{ width: 30%; }
	.position_row_points{ width: 15%; }
	.position_row_wins{ width: 15%; }
	.position_row_loses{ width: 15%; }
}
@media all and (max-width: 701px){
	#tabla_posiciones{ padding: 10px; }
	.position_row_header{ display: none; }
	.crown1, .crown2, .crown3{ display: block; width: 100%; text-align: center; position: static; margin-bottom: 20px; font-size: 42px; }
	.position_row{ padding: 15px 0; }
	.position_row_place{ display: block; width: 100%; }
	.position_row_name{ display: block; width: 100%; text-align: center; }
	.position_row_points{ display: block; width: 100%; }
	.position_row_wins{ display: block; width: 100%; }
	.position_row_loses{ display: block; width: 100%; }
	.pagination_word{ display: none; }
	.mobile_label{ display: inline; }
}