.grid {

	position: relative;

	margin:0;

	padding:0;

	max-width: 100%;

	list-style: none;

	text-align: center;

	

}



/* Common style */

.grid figure {

	position: relative;

	float: left;

	overflow: hidden;

	min-width: 100%;

	max-width: 100%;

	max-height: 100%;

	width: 100%;

	background: #222222;

	text-align: center;

	cursor: pointer;

	

}



.grid figure img {

	position: relative;

	display: block;

	min-height: 100%;

	max-width: 100%;

	opacity: 1;

	background-color:#343434

}



.grid figure figcaption {

	padding: 2em;

	color: #fff;

	

	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 {

	word-spacing: -0.15em;

	font-weight: normal;

	color: #fff;

	font-family: 'Poppins', sans-serif

}



.grid figure h2 span {

	font-weight: 600;
	text-transform: uppercase;

}



.grid figure h2,

.grid figure p {

	margin: 0;

	color: #fff;

}



.grid figure p {

	letter-spacing: 1px;

	font-size: 68.5%;

	color: #fff; 
	
	line-height: 1.5;

}

.icon-pan{ color:#FFF; background-color:rgba(52,52,52,0.6); padding:2px 8px; border-radius:3px; margin:0 5px; text-align:center; font-weight:normal}

.icon-pan i{ color:#FFF}

/* Individual effects */





/*---------------*/

/***** Zoe *****/

/*---------------*/



/*---------------*/

/***** Sarah *****/

/*---------------*/



figure.effect-sarah {

	background: #343434;

}



figure.effect-sarah img {

	max-width: none;

	width: -webkit-calc(100% + 20px);

	width: calc(100% + 20px);

	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

	transition: opacity 0.35s, transform 0.35s;

	-webkit-transform: translate3d(-10px,0,0);

	transform: translate3d(-10px,0,0);

	-webkit-backface-visibility: hidden;

	backface-visibility: hidden;

	filter: url("data:image/svg xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10 */
	filter: gray; /*IE6-9*/
	-webkit-filter: grayscale(100%); /*Chrome 19+ & Safari 6+*/
	-webkit-transition: all 1.5s ease; /*Fade to color for Chrome and Safari*/
	-moz-transition: all 1.5s ease;
	-webkit-backface-visibility: hidden; /*Fix for transition flickering*/


}



figure.effect-sarah:hover img {

	opacity: 0.4;

	-webkit-transform: translate3d(0,0,0);

	transform: translate3d(0,0,0);

	filter: none;
-webkit-filter: grayscale(0%);



}



figure.effect-sarah figcaption {

	text-align: left;

}



figure.effect-sarah h2 {

	position: relative;
	padding: 0.5em 0;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
	font-size: calc(18px + 0.4vw);

}



figure.effect-sarah h2::after {

	position: absolute;

	bottom: 0;

	left: 0;

	width: 100%;

	height: 3px;

	background: #fff;

	content: '';

	-webkit-transition: -webkit-transform 0.35s;

	transition: transform 0.35s;

	-webkit-transform: translate3d(-100%,0,0);

	transform: translate3d(-100%,0,0);

}



figure.effect-sarah:hover h2::after {

	-webkit-transform: translate3d(0,0,0);

	transform: translate3d(0,0,0);

	

}



figure.effect-sarah p {

	padding: 1em 0;

	opacity: 0;

	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

	transition: opacity 0.35s, transform 0.35s;

	-webkit-transform: translate3d(100%,0,0);

	transform: translate3d(100%,0,0);

}



figure.effect-sarah:hover p,figure.effect-sarah:hover h2 {

	opacity: 1;

	-webkit-transform: translate3d(0,0,0);

	transform: translate3d(0,0,0);

}