/*TEST*/
.pht_page .grid {
   position: relative;
   margin: 0 auto;
   padding: 1em 0 1em;
   max-width: 1000px;
   list-style: none;
   text-align: center;
}

/* Common style */
.pht_page.textbody .grid figure {
   position: relative;
   float: left;
   overflow: hidden;
   height: 300px; 
   margin: 10px 1%;
   /*min-width: 320px;*/
   max-width: 480px;
   max: 360px;
   width: 31%;
   background: #675c53;
   text-align: center;
   cursor: pointer;
}

.pht_page.textbody .grid figure img {
   position: relative;
   display: block;
   min-height: 100%;
   max-width: 120%;
   opacity: 0.2;
}

.pht_page .grid figure figcaption {
   padding: 2em;
   color: #fff;
   text-transform: uppercase;
   font-size: 1.25em;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
}

.pht_page .grid figure figcaption::before,
.pht_page .grid figure figcaption::after {
   pointer-events: none;
}

.pht_page .grid figure figcaption,
.pht_page .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 */
.pht_page .grid figure figcaption > a {
   z-index: 1000;
   text-indent: 200%;
   white-space: nowrap;
   font-size: 0;
   opacity: 0;
}

.pht_page .grid figure h2 {
   word-spacing: -0.15em;
   font-weight: 300;
}

.pht_page .grid figure h2 span {
   font-weight: 800;
}

.pht_page .grid figure h2,
.pht_page .grid figure p {
   margin: 0;
}

.pht_page .grid figure p {
   letter-spacing: 1px;
   font-size: 68.5%;
}



/*---------------*/
/***** Sarah *****/
/*---------------*/

.pht_page figure.effect-sarah {
   background: #42b078;
}

.pht_page 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;
}

.pht_page figure.effect-sarah:hover img {
   opacity: 0.1;
   -webkit-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
}

.pht_page figure.effect-sarah figcaption {
   text-align: left;
}

.pht_page figure.effect-sarah h2 {
   position: relative;
   overflow: hidden;
   padding: 0.5em 0;
}

.pht_page 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);
}

.pht_page figure.effect-sarah:hover h2::after {
   -webkit-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
}

.pht_page 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);
}

.pht_page figure.effect-sarah:hover p {
   opacity: 1;
   -webkit-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
}