.grid { position: relative;width: 540px; height: 662px; list-style: none ;}

/* Common style */
.grid figure {position: relative; float: left; overflow: hidden;width: 540px;height: 662px; background: #3085a3;cursor: pointer;}
.grid figure img {position: relative; display: block; min-height: 100%; max-width: 100%; opacity: 1;}
.grid figure figcaption { color: #fff;font-size: 1.25em; }
.grid figure figcaption,.grid figure figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.grid figure i {display: block; font-size: 36px; color: #FED403;}
.grid figure i, .grid figure p { margin: 0 40px;}
.grid figure p {letter-spacing: 1px; font-size:16px; color: #5b5b5b;}

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

figure.effect-sarah:hover img { opacity:0.9 ; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
figure.effect-sarah figcaption {text-align: right;}
figure.effect-sarah i{position: absolute; overflow: hidden; padding: 0.5em 0 ; right: 25px; bottom: 145px;}
figure.effect-sarah i::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 i::after { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}*/

figure.effect-sarah p { position: absolute; right: 25px; bottom: 95px; 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 { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}




.ishow .t-right .top figure {position: relative; float: left; overflow: hidden; width: 630px; height: 318px; background: #3085a3;cursor: pointer;}
.ishow .t-right .top figure img {position: relative; display: block; min-height: 100%; max-width: 100%; opacity: 1;}
.ishow .t-right .top figure figcaption { color: #fff;font-size: 38px; }
.ishow .t-right .top 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 */
.ishow .t-right .top figure i {display: block; font-size: 36px; color: #fed403;}
.ishow .t-right .top figure i, .grid figure p { margin: 0 40px;}
.ishow .t-right .top figure p {letter-spacing: 1px; font-size:16px; color: #a7a7a7;}
/* Individual effects */


.ishow .t-right .top 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; }

.ishow .t-right .top figure.effect-sarah:hover img {opacity: 0.6; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
.ishow .t-right .top figure.effect-sarah figcaption {text-align: left;}
.ishow .t-right .top figure.effect-sarah i{position: absolute; overflow: hidden; padding: 0.5em 0 ; left: 15px; top: 25px;}
.ishow .t-right .top figure.effect-sarah i::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);}
/*.ishow .t-right .top figure.effect-sarah:hover i::after { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}*/

.ishow .t-right .top figure.effect-sarah p { position: absolute; left: 60px; top: 100px; 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);}
.ishow .t-right .top figure.effect-sarah:hover p { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}