#gramcracker {
	width: 150%;
 
	text-align: left;
	visibility: hidden;
	opacity: 0;
    margin-top :22px;
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	transition:.5s;
}

#gramcracker.show {
	visibility: visible;
	opacity: 1;
}

#gramcracker a {
	background-color: #fff;
	width: 26%;
	height: 3.5vw;
	overflow: hidden;
	position: relative;
	display: inline-block;
    margin-right:7px;
	margin-bottom:2px;
	-o-transition:.25s;
	-ms-transition:.25s;
	-moz-transition:.25s;
	-webkit-transition:.25s;
	transition:.25s;
}

#gramcracker a:hover {
	background-color: #000000;
}

#gramcracker a img {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 1;

	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	display: inline-block;

	-o-transition:.25s;
	-ms-transition:.25s;
	-moz-transition:.25s;
	-webkit-transition:.25s;
	transition:.25s;
}

#gramcracker a:hover img {
	width: 105%;
	opacity: 0.75;
}





/*** @media ***/
@media all and (max-width: 768px) and (orientation: portrait) {
	#gramcracker a {
		height: 110px;
	 
		margin: 2vw 2%;
	}


	#gramcracker   {
	 
		 Width: 325px;

	 
	}

}