/* General style */
.grid-gallery ul {list-style:none; margin:0; padding:0;}
.grid-gallery figure {margin:0; background: #fff;}
.grid-gallery figure img {display:block; width: 100%;}
.grid-gallery figcaption h3 {    margin: 5px 0 0 0;
    height: 75px;
    color: #333;
    font-size: 1.6em;
    font-weight: bold;
    padding: 0;
    overflow: hidden;
    line-height: 1.2;}
.grid-gallery figcaption p {color:#888; font-size:1.6em; font-weight:bold; margin:0; padding:0;}

/* Grid style */
.grid-wrap {max-width:100em; margin:0 auto; padding:0;}
.grid {margin:0 auto;}
.grid li {width:25%; float:left; cursor:pointer;}
.grid figure {padding:6px; -webkit-transition:opacity 0.2s; transition:opacity 0.2s;}
.grid li:hover figure {opacity:0.7;}
.grid figcaption {background: #fff;	padding:5px 10px 15px 0;}

/* Slideshow style */
.slideshow {position:fixed; background:rgba(0,0,0,0.6); width:100%; height:100%; top:0; left:0; z-index:500; opacity:0; visibility:hidden; overflow:hidden; -webkit-perspective:1000px; perspective:1000px; -webkit-transition:opacity 0.5s, visibility 0s 0.5s; transition:opacity 0.5s, visibility 0s 0.5s;}
.slideshow-open .slideshow {opacity:1; visibility:visible; -webkit-transition:opacity 0.5s; transition:opacity 0.5s;}
.slideshow ul {width:100%; height:100%; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transform:translate3d(0,0,150px); transform:translate3d(0,0,150px); -webkit-transition:-webkit-transform 0.5s; transition:transform 0.5s;}
.slideshow ul.animatable li {-webkit-transition:-webkit-transform 0.5s; transition:transform 0.5s;}
.slideshow-open .slideshow ul {-webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0);}
.slideshow li {width:700px; height:530px; position:absolute; top:50%; left:50%; margin:-280px 0 0 -330px; visibility:hidden;}
.slideshow li.show {visibility:visible;}
.slideshow li:after {content:''; position:absolute; width:100%; height:100%; top:0; left:0; background:rgba(255,255,255,0.8); -webkit-transition:opacity 0.3s; transition:opacity 0.3s;}
.slideshow li.current:after {visibility:hidden; opacity:0; -webkit-transition:opacity 0.3s, visibility 0s 0.3s; transition:opacity 0.3s, visibility 0s 0.3s;}
.slideshow figure {width:100%; height:100%; background:#fff; overflow:hidden;}
.slideshow figcaption {padding:0;}
.slideshow figcaption h3 {font-weight:300; font-size:115%; padding:10px;}

/* Navigation */
.slideshow nav span {position:fixed; z-index:1000; color:#59656c; text-align:center; padding:3%; cursor:pointer; font-size:2.2em;}
.slideshow nav span.nav-prev,
.slideshow nav span.nav-next {top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%);}
.slideshow nav span.nav-next {right:0;}
.slideshow nav span.nav-close {top:0; right:0; padding:0.5em 1em; color:#31373a;}
.icon:before,
.icon:after {font-family:'fontawesome'; speak:none; font-style:normal; font-weight:normal; font-variant:normal; text-transform:none; line-height:1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
span.nav-prev:before {content:"\e601";}
span.nav-next:before {content:"\e600";}
span.nav-close:before {content:"\e602";}

/* Info on arrow key navigation */
.info-keys {position:fixed; top:10px; left:10px; width:60px; font-size:8px; padding-top:20px; text-transform:uppercase; color:#fff; letter-spacing:1px; text-align:center;}
.info-keys:before,
.info-keys:after {position:absolute; top:0; width:16px; height:16px; border:1px solid #fff; text-align:center; line-height:14px; font-size:12px;}
.info-keys:before {left:10px; content:"\e603";}
.info-keys:after {right:10px; content:"\e604";}

@media screen and (max-width: 60em) {
.grid-gallery figcaption h3 {height:70px; font-size: 1.4em;}
.grid-gallery figcaption p {font-size:1.5em;}
}

@media screen and (max-width: 50em) {
.grid-gallery figcaption h3 {height:70px; font-size: 1.4em;}
.grid-gallery figcaption p {font-size:1.4em;}

.grid li {width:33.3%;}
.slideshow li {width:100%;	height:100%; top:0; left:0; margin:0;}
.slideshow li figure img {width:auto; margin:0 auto; max-width:100%;}
.slideshow nav span,
.slideshow nav span.nav-close {font-size:1.8em; padding:0.3em;}
.info-keys {display:none;}
}

@media screen and (max-width: 42em) {
.grid-gallery figcaption h3 {height:70px; font-size: 1.2em;}
.grid-gallery figcaption p {font-size:1.3em;}
}

@media screen and (max-width: 35em) {
.grid-gallery figcaption h3 {font-size: 1.2em;}
.grid-gallery figcaption p {font-size:1.3em;}

.grid li {width:50%;}
}