a {
	text-decoration: none;
	color: #ff3d53;
	outline: none;
	transition: color 0.2s;
}
/*MENSAJE DEL CELULAR
section .message-mobile {
	font-size: 0.85em;
	display: none;
	width: 100%;
	padding: 0.5em;
	text-align: center;
	background: #ff3d53;
}
*/

/* Grid  mantiene alineada a las imagenes*/
.grid {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 0 .4em; /* el segundo valor indica los margenes laterales*/
	perspective: 950px; /*indica la distancia y el angulo de la animacion ****************/
	perspective-origin: 50% 100%;
}


/*indica el ancho de la imagen***********************/
.grid__item {
	position: relative;
	display: block;
	flex: none;
	width: 380px;
	margin: 4.5em .7vw; /* el segundo valor indica la distancia hosrizotal entre cada imagen */
	cursor: default;
	transform-style: preserve-3d;
}
/*indica los colores de los cuadros que rebotan*/
.grid__item:hover,
.grid__item:focus {
	outline: none;
}

.grid__item--c1,
.grid__item--c1:hover,
.grid__item--c1:focus {
	color: #52649e;
}

.grid__item--c2,
.grid__item--c2:hover,
.grid__item--c2:focus {
	color: #ee7074;
}

.grid__item--c3,
.grid__item--c3:hover,
.grid__item--c3:focus {
	color: #f7f295;
}

.stack {
	position: relative;
	width: 370px;
	height: 270px; /*modifica el contendor de la imagen*/
	transform-style: preserve-3d;
}

.stack__deco {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	transform-origin: 50% 100%;
}

.stack__deco:first-child {
	opacity: 0.2;
}

.stack__deco:nth-child(2) {
	opacity: 0.4;
}

.stack__deco:nth-child(3) {
	opacity: 0.6;
}

.stack__deco:nth-child(4) {
	opacity: 0.8;
}
/*indica la alineacion de la imagen*/
.stack__figure {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	width: 100%;
	height: 100%;
	cursor: pointer;
	transform-origin: 50% 100%;/*el segundo valor indica la animacion del mouse hover*/
}
/*indica medidas de la imagen inicial*/
.stack__img {
	position: relative;
	display: block;
	flex: none;
        height: 380px;
        width: 500px;
}

/*indica el color del titulo de la imagen*/
.grid__item-title {
	font-size: 1.4em;
	width: 100%;
	margin: 1em 0;
	text-align: center;
	color: gray;
}

/* cone ste nombre llama a la libreria "rigel" */
.grid--effect-rigel {
	perspective-origin: 50% 100%;
}

.grid--effect-rigel .column {
	opacity: 1;
}


@media screen and (max-width: 42em) {
	.codrops-header {
		display: block;
		text-align: center;
	}
	.github {
		width: 100%;
		margin: 0;
		padding: 0.5em 0;
	}
	.message-mobile {
		display: block;
	}
}