/*Portfolio styling */

@font-face {	font-family: 'fontawesome';src:url('../fonts/fontawesome/fontawesome.eot?-e43dk9');src:url('../fonts/fontawesome/fontawesome.eot?#iefix-e43dk9') format('embedded-opentype'),url('../fonts/fontawesome/fontawesome.woff?-e43dk9') format('woff'),url('../fonts/fontawesome/fontawesome.ttf?-e43dk9') format('truetype'),url('../fonts/fontawesome/fontawesome.svg?-e43dk9#fontawesome') format('svg');font-weight: normal;font-style: normal;}              
.grid-gallery ul {	list-style: none;margin: 0;padding: 0;}
.grid-gallery figure {margin: 0;}
.grid-gallery figure img {display: block;width: 100%; }
.grid-gallery figcaption h3 {margin: 0;padding: 0 0 0.5em}
.grid-gallery figcaption p {margin: 0;}
.grid-wrap {max-width: 69em;margin: 0 auto;padding: 0 1em 1.875em;}

.grid {margin-left: -11px!important;}
.grid li {width: 25%;float: left;cursor: pointer;}
.grid figure {padding: 15px;-webkit-transition: opacity 0.2s;transition: opacity 0.2s;}
.grid li:hover figure {opacity: 0.7;}
.grid figcaption {background: #e4e4e4;padding: 25px;}
.slideshow {position: fixed;background: rgba(0,0,0,0.6);width: 100%;height: 100%;top: 110px;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: 660px;height: 560px;position: absolute;top: 43%;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;border: 50px solid #fff;overflow: hidden;}
.slideshow figure {width: 100%;height: 100%;background: #fff;border: 50px solid #fff;overflow: hidden;}
.slideshow figure img { border: 2px solid #ddd;}

.slideshow figcaption {padding-bottom: 20px;}
.slideshow figcaption h3 {font-weight: 300;font-size: 200%;}
.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-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) {
	/* responsive for portfolio*/
	.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: 35em) {
	.grid li {width: 50%;}
}

@media screen and (max-width: 24em) {
	.grid li {	width: 100%;}
}