/*

----------------------------------



	Name: portfolio.css

	Version: 1.0.0



----------------------------------



	Table of Contents

	

	#General style

	#Grid

	#Slideshow

	#Navigation



*/



/* ==========================================================================

   #General style

   ========================================================================== */

.grid-gallery { height:2600px}

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

	font-weight: 500;

	font-size: 20px;

	font-family: 'Roboto', sans-serif;

	color: #000;

	text-transform: uppercase;

	padding: 0 0 10px 0;

}

.grid-gallery figcaption span {

	border-bottom: 3px solid #ffb400;

	color: #000;

	display: block;

	font-size: 12px;

	margin: 0 0 25px;

	padding: 0 0 15px;

	text-transform: uppercase;

}

/* ==========================================================================

   #Grid

   ========================================================================== */

   

.grid-wrap {

}

.grid {

	margin: 0 auto;

}

.grid li {

	width: 100%;

	float: left;

	cursor: pointer;

	margin: 0 0 70px 0;

	position: relative !important;

	top: inherit !important;

}

.grid figure {

	-webkit-transition: opacity 0.2s;

	transition: opacity 0.2s;

}

.grid li:hover figure {

	opacity: 1;

}

.grid figcaption {

	background-color: #ffb400;

	opacity: 0;

	position: absolute;

	top: 0;

	width: 100%;

	height: 100%;

	transition-timing-function: ease-out;

	-moz-transition-timing-function: ease-out;

	-webkit-transition-timing-function: ease-out;

	-o-transition-timing-function: ease-out;

	transition-duration: .2s;

	-moz-transition-duration: .2s;

	-webkit-transition-duration: .2s;

	-o-transition-duration: .2s;

}

.grid li:hover figcaption {

	opacity: 1;

	transition-timing-function: ease-out;

	-moz-transition-timing-function: ease-out;

	-webkit-transition-timing-function: ease-out;

	-o-transition-timing-function: ease-out;

	transition-duration: .2s;

	-moz-transition-duration: .2s;

	-webkit-transition-duration: .2s;

	-o-transition-duration: .2s;

}

.figcaption-details {

	position: absolute;

	top: 32%;

	width: 100%;

	text-align: center;

}

.figcaption-details img {

	width: 82px !important;

	height: 82px !important;

	display: inline !important;

	margin: 0 0 30px

}

/* ==========================================================================

   #Slideshow

   ========================================================================== */



.slideshow {

	position: fixed;

	background: rgba(255,204,0,1);

	background: -moz-linear-gradient(left, rgba(255,204,0,1) 0%, rgba(229,0,118,0.85) 100%);

	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,204,0,1)), color-stop(100%, rgba(229,0,118,0.85)));

	background: -webkit-linear-gradient(left, rgba(255,204,0,1) 0%, rgba(229,0,118,0.85) 100%);

	background: -o-linear-gradient(left, rgba(255,204,0,1) 0%, rgba(229,0,118,0.85) 100%);

	background: -ms-linear-gradient(left, rgba(255,204,0,1) 0%, rgba(229,0,118,0.85) 100%);

	background: linear-gradient(to right, rgba(255,204,0,1) 0%, rgba(229,0,118,0.85) 100%);

 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc00', endColorstr='#e50076', GradientType=1 );

	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: 630px;

	position: absolute;

	top: 42%;

	left: 47.5%;

	margin: -280px 0 0 -330px;

	visibility: hidden;

}

.slideshow li.show {

	visibility: visible;

}

.slideshow li:after {

	content: '';

	position: absolute;

	width: 114%;

	height: 114%;

	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 figcaption {

	padding-bottom: 20px;

}

.slideshow figcaption h3 {

	font-weight: 300;

	font-size: 200%;

}

/* ==========================================================================

   #Navigation

   ========================================================================== */



.slideshow nav span {

	position: fixed;

	z-index: 1000;

	color: #000;

	text-align: center;

	padding: 3%;

	cursor: pointer;

	font-size: 2.2em;

}

.slideshow nav span:hover {

	color: #FFF

}

.slideshow nav span.nav-prev, .slideshow nav span.nav-next {

	top: 50%;

	-webkit-transform: translateY(-50%);

	transform: translateY(-50%);

}

.slideshow nav span.nav-close {

	top: 0;

	right: 0;

	padding: 0.5em 0.7em;

	color: #fff;

	background-color: #000;

}

.slideshow nav span.nav-close:hover {

	background-color: #FFF;

	color: #000

}

.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 {

	left: 20%

}

span.nav-prev:before {

	content: "\f053";

}

span.nav-next {

	right: 20%

}

span.nav-next:before {

	content: "\f054";

}

span.nav-close:before {

	content: "\f00d";

}