/*!
 * meny 0.4
 * http://lab.hakim.se/meny
 * MIT licensed
 *
 * Created by Hakim El Hattab, http://hakim.se
 */

* {
	margin: 0;
	padding: 0;

	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

body {
	background-color: #191919;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=);
	background-repeat: repeat;

	font-family: 'Lato', Helvetica, sans-serif;
	font-size: 16px;
	color: #eee;
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
}

article {
	display: inline-block;
	position: relative;
	width: 320px;
	height: 160px;
	margin: 20px;
	vertical-align: top;
}
	article a {
		display: block;
		height: 100%;
		overflow: hidden;
		border: 4px solid #000;
		background: #111;
		vertical-align: top;

		-webkit-transition: all 0.2s ease;
		   -moz-transition: all 0.2s ease;
		    -ms-transition: all 0.2s ease;
		     -o-transition: all 0.2s ease;
		        transition: all 0.2s ease;
	}
		article a:hover {
			border: 4px solid #2ea7aa;
			box-shadow: 0px 0px 20px rgba( 0, 0, 0, 0.5 );
		}
		article a h3 {
			position: absolute;
			bottom: 0;
			padding: 10px;
			text-align: left;
			color: #eee;
			z-index: 2;
			border-top-right-radius: 2px;
			background: rgba( 10, 10, 10, 0.8 );

			-webkit-transition: background 0.2s ease;
			   -moz-transition: background 0.2s ease;
			    -ms-transition: background 0.2s ease;
			     -o-transition: background 0.2s ease;
			        transition: background 0.2s ease;
		}
			article a:hover h3 {
				background: #2ea7aa;
			}
		article a img {
			position: relative;

			-webkit-filter: grayscale(0);
			
			-webkit-transition: all 0.2s ease;
			   -moz-transition: all 0.2s ease;
			    -ms-transition: all 0.2s ease;
			     -o-transition: all 0.2s ease;
			        transition: all 0.2s ease;
		}
			article a:hover img {
				-webkit-filter: grayscale(0.5);
			}