/*
GLOBAL, con * se definen los estilos globales de toda la página.
*/
/*
*{
	margin: 0px;
	padding: 0px;
	list-style: none;
	text-decoration: none;
	font-family: sans-serif;
	box-sizing: border-box;
}
*/

/* De esta forma se agrupan las propiedades comunes a las clases 'col-' */
/*[class*="col-"]{
	float: left;
	padding: 10px;
}*/
/* Reset CSS */
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
/*GRID es una librería de CSS que permite organizar los elementos HTML en la página web de una forma muy cómoda
  Para usar GRID solo hay que activarlo dentro la clase que va a usar el elemento contenedor de los elementos que se quieren organizar con esta librería 
  En este caso he declarado una clase .GRID dentro de la cual se activa con el código DISPLAY:GRID; (en minúsculas) */
.grilla {
	display: grid; /*Activa libreía GRID*/
	grid-template-columns: 1fr 4fr 1fr;/*declara tres columnas, una de 2 partes (fr = fracción), la siguiente de 4 partes y la tercer de 2*/
	/*gap: 1em; /*espacio entre todos los elementos*/
}

.grilla div {
	background: #ecf0f1;
	padding: 1em;
}

 .vivo img:hover {
	opacity: 1.0;
}

.grid-l {
	display: grid;
	grid-template-columns: repeat(4, 1fr);

	justify-items: center;
}
#opta {
	width: 90%;
	opacity: 0.7;
}

/* Estilos para entrada a la app con ventana de dialogo modal*/
.oscurecer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background: rgba(0,0,0,.8);
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

}
.registrar {
    width: 36%;
    left: 30%;
    background: #fff;
    border-radius: 1em;
    padding: 3em;
    position: fixed;
    top: 80px;
    z-index: 200;
    font-family: futura;
    color: gray;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}