.grid { position: relative; clear: both; margin: 0 auto; padding: 0 0 0.5em; max-width: 360px; list-style: none; text-align: center; }
/* Common style */
.grid figure { position: relative; float: left; overflow: hidden; margin: 4px 1% 40px; /*min-width: 320px; max-height: 360px; max-width: 480px; width: 100%; height: auto;*/ height:260px; width:360px; background: rgb(255, 228, 0, 0.5);; text-align: center; cursor: pointer; }
.grid figure img { position: relative; display: block; /*min-height: 100%;*/ width: 100%; opacity: 0.8; }
.grid figure figcaption { padding: 1em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.grid figure figcaption::before, .grid figure figcaption::after { pointer-events: none; }
.grid figure figcaption, .grid figure figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; }
.grid figure h2 {font-weight: 300; font-size:2em }
.grid figure h2 span { font-weight: 800; }
.grid figure h2, .grid figure p { margin: 0; }
.grid figure p { letter-spacing: 1px; font-size: 68.5%; }
/* Individual effects */

/*-----------------*/
/***** Apollo *****/
/*-----------------*/

figure.effect-apollo { background: #3498db;}
figure.effect-apollo img { opacity: 0.95; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale3d(1.05, 1.05, 1); transform: scale3d(1.05, 1.05, 1); }
figure.effect-apollo figcaption::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.5); content: ''; -webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s; -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); }
figure.effect-apollo p { position: absolute; right: 0; bottom: 0; margin: 3em; padding: 0 1em; max-width: 150px; border-right: 4px solid #fff; text-align: right; opacity: 0; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; }
figure.effect-apollo h2 { text-align: left; color: #151515; background-color: rgba(0,0,0,0.5); padding: 5px; }
figure.effect-apollo:hover h2 { color: #FFFFFF }
figure.effect-apollo:hover img { opacity: 0.6; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
figure.effect-apollo:hover figcaption::before { -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0); }
figure.effect-apollo:hover p { opacity: 1; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }

/*-----------------*/
/***** Ming *****/
/*-----------------*/

.grid figure figcaption {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical centering */
  align-items: center;     /* horizontal centering */
  padding: 1em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
}

figcaption.caption-center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

figure.effect-ming {
	/*background: #030c17;*/
	border-radius: 10px;
	/*border:5px solid #434343;*/
}

figure.effect-ming img {
	opacity: 0.9;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-ming figcaption::before {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	border: 2px solid #fff;
	box-shadow: 0 0 0 30px rgba(255,255,255,0.2);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1.4,1.4,1);
	transform: scale3d(1.4,1.4,1);
}

figure.effect-ming h2 {
	/*margin: 15% 0 10px 0;*/
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	text-align: center;
        background-color: rgba(38,40,64,0.5);
        padding: 5px;
}

figure.effect-ming p {
	padding: 1em;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}

figure.effect-ming:hover h2 {
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}

figure.effect-ming:hover figcaption::before,
figure.effect-ming:hover p {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

figure.effect-ming:hover figcaption {
	background-color: rgba(58,52,42,0);
}

figure.effect-ming:hover img {
	opacity: 0.4;
}

/*-----------------*/
/***** Zoe *****/
/*-----------------*/
figure.effect-zoe { background: #3498db;}
figure.effect-zoe img { opacity: 0.95; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale3d(1.05, 1.05, 1); transform: scale3d(1.05, 1.05, 1); }
figure.effect-zoe figcaption::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.5); content: ''; -webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s; -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); }
figure.effect-zoe p { position: absolute; right: 0; bottom: 0; margin: 3em; padding: 0 1em; max-width: 150px; border-right: 4px solid #fff; text-align: right; opacity: 0; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; }
figure.effect-zoe h2 { text-align: left; color: #f5f5f5;  font-size:0.8em;}
figure.effect-zoe:hover h2 { color: #FFFFFF;}
figure.effect-zoe:hover img { opacity: 0.6; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
figure.effect-zoe:hover figcaption::before { -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0); }
figure.effect-zoe:hover p { opacity: 1; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }

/*---------------*/
/***** Jazz *****/
/*---------------*/

figure.effect-jazz { background: #3498db;}
figure.effect-jazz img { opacity: 0.9; }
figure.effect-jazz figcaption::after, figure.effect-jazz img, figure.effect-jazz p { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; }
figure.effect-jazz figcaption::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-top: 1px solid #fff; border-bottom: 1px solid #fff; content: ''; opacity: 0; -webkit-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1); transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
figure.effect-jazz h2, figure.effect-jazz p { opacity: 1; -webkit-transform: scale3d(0.8, 0.8, 1); transform: scale3d(0.8, 0.8, 1); }
figure.effect-jazz h2 { padding-top: 26%; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; }
figure.effect-jazz p { padding: 0.5em 2em; text-transform: none; font-size: 0.85em; opacity: 0; }
figure.effect-jazz:hover img { opacity: 0.7; -webkit-transform: scale3d(1.05, 1.05, 1); transform: scale3d(1.05, 1.05, 1); }
figure.effect-jazz:hover figcaption::after { opacity: 1; -webkit-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); }
figure.effect-jazz:hover h2, figure.effect-jazz:hover p { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }

/* Media queries */
@media screen and (max-width: 50em) {
.content { padding: 0 10px; text-align: center; }
.grid figure { display: inline-block; float: none; margin: 10px auto; width: 100%; }
}

@media (max-width: 768px) {
	.grid figure {
		height: 224px;
	}
}