body{ margin:0; padding:0; }

figure{ margin:0; }

.container{ margin:0 auto; padding:0; width:auto; }

/* Common style */
.grid { margin:0 auto; }
.grid a { float:left; max-width:100%; color: #333; }
.grid a:nth-child(odd) { margin:0; }
.grid figure { position: relative; overflow: hidden; background: #fff; border-radius:100%; }
.grid figure img { position: relative; display: block; width: 100%; opacity: 0.7; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }
.grid figcaption { position: absolute; top: 0; z-index: 11; padding:0 10px 10px 10px; width: 100%; height: 100%; text-align: center; }
/*.grid figcaption h2 { margin: 0 0 20px 0; color: #fff; letter-spacing: 1px; font-weight: 300; font-size: 130%; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; }
*/.grid figcaption p { padding:0 20px; color:#fff; font-size:20px; font-family:Calibri; -webkit-transition:opacity 0.3s, -webkit-transform 0.3s; transition:pacity 0.3s, transform 0.3s; margin-top:0px; }
.grid figcaption h2,.grid figcaption p { -webkit-transform: translateY(50px); transform: translateY(50px); }
.grid figure button { position: absolute; padding: 4px 20px; border: none; text-transform: uppercase; letter-spacing: 1px; 	font-weight: bold; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; }
.grid figcaption,.grid figcaption h2,.grid figcaption p,.grid figure button { -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* Style for SVG */
.grid svg { position:absolute; top: -1px; /* fixes rendering issue in FF */ z-index: 10; width:100%; height:100%; border-radius:100%; }
.grid svg path { fill: #ec2029; }

/* Hover effects */
.grid a:hover figure img { opacity: 1; }
.grid a:hover figcaption h2,.grid a:hover figcaption p { -webkit-transform: translateY(0); transform: translateY(0); }
.grid a:hover figcaption p { opacity: 0; }

/* Individual styles */
.demo-1 body { background:none; }
.demo-1 .grid figure button,.demo-3 .grid figure button { top: 50%; left: 50%; border: 3px solid #fff; background: transparent; color: #fff; opacity: 0; -webkit-transform: translateY(-50%) translateX(-50%) scale(0.25); transform: translateY(-50%) translateX(-50%) scale(0.25); }
.demo-1 .grid a:hover figure button,.demo-3 .grid a:hover figure button { opacity: 1; -webkit-transform: translateY(-50%) translateX(-50%) scale(1); transform: translateY(-50%) translateX(-50%) scale(1); }
.demo-2 body { background: #e74c3c; }
.demo-2 .grid figcaption h2 { color: #e74c3c; }
.demo-2 .grid figcaption p { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; }
.demo-2 .grid figure button { bottom: 0; left: 0; padding: 15px; width: 100%; background: #fff; color: #333; font-weight: 300; -webkit-transform: translateY(100%); transform: translateY(100%); }
.demo-2 .grid a:hover figure button { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transform: translateY(0); transform: translateY(0); }
.demo-2 .grid figcaption h2,.demo-2 .grid figcaption p,.demo-3 .grid figcaption h2,.demo-3 .grid figcaption p { -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.115, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.115, 1.445); timing-function: cubic-bezier(0.250, 0.250, 0.115, 1.445); }
.demo-2 .grid a:hover figcaption p,.demo-3 .grid a:hover figcaption p { -webkit-transition-delay: 0s; transition-delay: 0s; 	-webkit-transition-duration: 0.1s; transition-duration: 0.1s; }
.demo-3 body { background: #52be7f; }
.demo-3 .grid figcaption h2 { color: #52be7f; }
.demo-3 .grid a:hover figcaption h2 { -webkit-transform: translateY(5px); transform: translateY(5px); }

/* Media Queries */
/* Let's redefine the width of each anchor and the margins */

@media screen and (max-width: 58em) {
	.grid {
		idth:100%;
	}

	.grid a {
		width:100%;
	}
	
	.grid figcaption p { font-size:18px; margin-top:-10px; }
		
}


@media screen and (max-width: 45em) {
	.grid {
		idth:100%;
	}

	.grid a {
		width:100%;
	}

	.grid figcaption p { font-size:28px; margin-top:50px; }
	
}



@media screen and (max-width: 27em) {
	.grid {
		idth:100%;
	}

	.grid a {
		width: 100%;
	}

	.grid figcaption p { font-size:10px; margin-top:-25px; }
	
}