html{
		/* by Atle Mo (design), Sébastien Grosjean (code) */
		background:
			linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
			linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
			linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
			linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
			linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
			linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
			background-color: #131313;
			background-size: 20px 20px;
			font-size: .9em;
	}
	#contenedor {
		width: 90%;
		max-width: 960px;min-width: 350px;
		margin: auto;
		background-color: rgba(200,200,200, .5);
		overflow: auto;
		padding: 1%;
		text-align: center;
		border-radius: 5%;
	}

/* ATENCIÓN uso de Flexbox---------------------------------------- */
	div.caja{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;

}
*/ --------------------------------------------------------------- */
	div.actividad {
		/* Con flexbox no hace falta float: left; */
		flex: 1;
		text-align: center;
		margin: 5px;
		padding: 5px 0;
		width: 200px;

	}
		div.actividad img {
			width: 200px;
			height: 140px;
			margin: 5px;
			box-shadow: 8px 8px 10px #333;
			transition: .5s;
		}
		div.actividad span.comentario{
			display: inline-block;
			margin-top: 10px;
			height: 3.5em;
			max-height: 3.5em;
			overflow: hidden;
		}
		div.actividad img:active, div.actividad img:hover {
			transform: translatey(-7px) scale(1.1);
			
		}