.juego {
	display: flex;
	border-bottom: 0.07rem solid silver;
	min-width: 200px;
	padding: 0.3rem 0;
}

.juego img {
    width: auto;
    height: 1.3rem;
	border-radius: 25%;
}

.juego span{
	display: flex;
	align-items: center;
	width: auto;
	padding: 0 0.5rem;	
}

span.nro { flex-grow: 0;	padding: 0.3rem;}
span.hora {	flex-grow: 0;}
span.utc {
	flex-grow: 1;
	font-size: 0.7rem;
	padding-left: 0.3rem;
}
span.sede, span.ronda {	font-size: 0.7rem;}
span.bdlocal, span.bdvisitante {
	flex-grow: 1;
	justify-content: center;
}
span.local {
	text-align: right;
	display: none;
	justify-content: flex-end;
	flex-basis: 8rem;
}
span.loc{
	justify-content: center;
	width: 3rem;
	flex-grow: 0;
	padding: 0 0.3rem; 
}	
span.visitante {
	display: none;
	flex-basis: 8rem;
}	
span.vis {
	justify-content: left;
	flex-grow: 1; 
	padding: 0 0.3rem;
}	
span.sede {
	text-align: left;
	display: none;
	width: 15rem;
}	
span.vs {
	flex-grow:0;
	padding: 0.3rem;	
	justify-content: center;
}
span.grupo {
	display: none;
}
span.ronda {
	display: none;
}

/*
article h1 {
	color: #B71C1C;
	padding: 1rem 0;
	border-bottom: 0.1rem solid #B71C1C;
}*/

article h2 {
	text-align: left;
	color: #212121;
	margin: 2rem 0 1rem 1rem;
}
article h3{
	text-align: left;
	padding: 0.5rem 0;
	margin: 1rem 0 0 0;
	color: #484848;
	border-bottom: 0.07rem solid #212121;
	text-indent: 1rem;
}

h4 {
		text-align: center;	
		margin: 1rem 0;
		width: 100%;
	}

#btnmf{display: none;}
#btnmf:checked ~ aside.menu_flotante { top:0;}
#btnmf:checked ~ label div.mf_ocultar {display: flex;}
#btnmf:checked ~ label div.mf_mostrar {display: none;}
	
aside.menu_flotante {
	background: whitesmoke;
	padding: 0 0.5rem 0.5rem 0.5rem;
	height: 100%;
	width: 17rem;
	z-index: 600;
	flex-wrap: wrap;
	display: flex;
	position: fixed;
	top:-200vh;
	right: 0;
	box-shadow: 0.25rem 0.25rem 0.5rem #484848;
	transition: top 0.3s ease-in-out;
	overflow-y: scroll;
}

aside.menu_flotante div{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

div.mf_ocultar {
	position: fixed;
	background: black;
	width: 100%;
	height: 100vh;	
	opacity: .4;
	top: 0;
	left: 0;
	z-index: 200;
	display: flex;
	padding-right: 17rem;
	align-items: center;
	justify-content: center;
	display: none;
}

div.mf_mostrar {
	position: fixed;
	background: #7BAB1A;	
	width: 3rem;
	height: 3rem;
	border-radius: 1.5rem;
	text-align: center;
	bottom: 1rem;
	right: 1rem;
	padding-top: 0.1rem;
	box-shadow: 0.15rem 0.15rem 0.15rem #484848;
	cursor: pointer;	
	z-index: 250;	
}
div.mf_mostrar:hover {
	box-shadow: 0.0625rem 0.0625rem 0.0625rem #484848;	
}
.CF, .SF, .TL, .JF {	width: 50%;}
.SF, .JF { border-left: 0.07rem solid silver;}

a.mf_link {
	width: 3.5rem;
	height: 3.5rem;
	background: #116E6E;
	color: whitesmoke; /*#B7E261;#B71C1C*/
	border-radius: 1.75rem;
	font-size: 0.8rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 0.5rem;
	padding-top: 0.3rem;
	box-shadow: 0.15rem 0.15rem 0.15rem #484848;
}

a.mf_link:hover { box-shadow: 0.0625rem 0.0625rem 0.0625rem #484848;}

@media (min-width:576px) and (max-width:991px){	
	aside.menu_flotante a.mf_link div{font-size: 0.8rem;}	
	span.ronda { display: flex;}
}

@media (min-width:992px) {	
	aside.menu_flotante {
		padding: 0 1rem 1rem 1rem;
		width: 22rem;
	}
	
	aside.menu_flotante a.mf_link div{font-size: 0.8rem;}	
	
	article.tot h2 { margin: 2rem 0 0 2rem;}	
		
	article h3 { margin: 1.5rem 0 0 0;}
	
	.juego {
		height: 3rem;
		background: snow;
	}
	
	.juego img {
   	width: auto;
    	height: 2rem;
}
	
	span.local { display: flex;}
	article.tot span.loc { display: none;}
	span.visitante { display: flex;}	
	article.tot span.vis { display:none;}
	span.vs { font-size: 1rem;}	
	span.sede {	
		display: flex;
		padding-right: 1rem;
	}	
	span.grupo { display: flex;}
	span.ronda { display: flex;}
	span.nro { padding: 0 1rem;}
}