/**
 * Layers Showcase CSS file
 *
 * This file contains all theme CSS styling.
 */

/*-------------------------------*/
/*-- PROJECT ARCHIVE -------------*/
.nav-pills a {
	background-color: #f5f5f5;
	border: 0;
}
.nav-pills .active a {
	background-color: #454545;
	color: #fff;
}

/*-------------------------------*/
/*-- PROJECT LAYOUT -------------*/
.single-layers-project .bread-crumbs{
	display: block;
}
.project-image-left > .grid > .column:first-child,
.project-image-top > .grid > .column:first-child{
	order: 2;
}
.project-image-bottom .grid .project-content,
.project-image-top .grid .project-content{
	overflow: hidden;
	float: left;
	width: calc(((100% / 12) * 8) - 20px);
}
.project-image-bottom .grid .project-meta,
.project-image-top .grid .project-meta{
	clear: none;
	float: right;
	width: calc(((100% / 12) * 4) - 20px);
	margin-top: 0;
}


/*-------------------------------*/
/*- PROJECT META ----------------*/
.project-meta{
	margin-top: 30px;
}
.project-meta-title{
	margin-bottom: 10px;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.4);
	font-weight: 600;
	font-size: 1rem;
}
.single .project-meta .meta-item{
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	padding: 8px 0;
}

/*-------------------------------*/
/*-- PROJECT GALLERY ------------*/
.project-gallery{
	overflow: hidden;
}

.project-gallery .project-video,
.project-gallery .project-thumbnail{
	margin-bottom: 20px;
}
.project-gallery .project-thumbnail img{
	display: block;
	margin: auto;
}
.project-gallery .swiper-container .arrows a{
	background-color: rgba(0, 0, 0, 0.45);
	border-radius: 4px;
	padding: 5px 5px;
	cursor: pointer;
}
.project-gallery .swiper-container .arrows a.swiper-button-disabled{
	opacity: 0;
	pointer-events: none;
}
.project-gallery .project-video-thumbnail{
	position: relative;
}
.has-video.has-image .thumbnail-media:after,
.project-gallery .project-video-thumbnail:after{
	z-index: 2;
	display: block;
	content: " ";
	position: absolute;
	bottom: 10px;
	left: 10px;
	width: 12px;
	height: 12px;
	padding: 8px 16px;
	background: rgba(0, 0, 0, 0.55) url(../images/play-button-small.png) center no-repeat;
	background-size: 12px 12px;
	border-radius: 4px;
}
.has-video.has-image .thumbnail-media:hover:after,
.project-gallery .project-video-thumbnail:hover:after{
	background-color: rgba(0, 0, 0, 0.95);
}
.fluid-width-video-wrapper{
	z-index: 3;
}

/*-------------------------------*/
/*-- PROJECT NAVIGATION ---------*/
.project-nav{
	font-size: 1.2rem;
	font-weight: 700;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 3px;
	overflow: hidden;
}
.project-nav a{
	width: 50%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: inline-block;
	box-sizing: border-box;
	padding: 0px;
}
.project-nav a:hover{
	background: #fdfdfd;
}
.project-nav a[rel=next]{
	float: left;
}
.project-nav a[rel=prev] {
	text-align: right;
	float: right;
}
.project-nav i{
	display: inline-block;
	padding: 8px;
	margin: 0 10px 0 0;
	border-right: 1px dotted rgba(0, 0, 0, 0.1);
}
.project-nav a[rel=prev] i{
	border-right: none;
	border-left: 1px dotted rgba(0, 0, 0, 0.1);
	margin: 0 0 0 10px;
}
.project-nav a + a{
	border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.layers-project-slideshow-thumbnails a,
.layers-project-slideshow-thumbnails img{
	display: block;
	margin: auto;
}

.single-layers-project #comments{
	max-width: calc(((100% / 12) * 8) - 20px);
}

/*-------------------------------*/
/*-- PRETTY PHOTO ---------------*/
div.pp_default .pp_content,
div.light_rounded .pp_content {

}
body a.pp_expand, a.pp_contract {
	right: auto;
	left: 30px;
}
div.light_square .pp_details, div.facebook .pp_details {
	/* position: absolute !important; */
	/* top: -42px; */
	/* right: -10px; */
}
div.ppt {
	display: none !important;
}
div.pp_pic_holder {
	box-shadow: 0px 5px 100px rgba(0,0,0,0.3);
}
div.light_square .pp_close {
	width: 22px;
	height: 22px;
	background: url(../js/layers-lightbox/prettyPhoto/images/prettyPhoto/facebook/sprite.png) -1px -1px no-repeat;
	cursor: pointer;
	border-radius: 100px;
	top: 5px;
}
div.light_square .pp_nav .pp_play,
div.light_square .pp_nav .pp_pause{
	margin: 3px 7px 0 0;
}
div.light_square .pp_nav .pp_arrow_previous{
	margin-top: 7px;
}
div.light_square .pp_nav .currentTextHolder{
	margin: 2px 5px;
}
div.light_square .pp_nav .pp_arrow_next{
	margin-top: 7px;
}
div.light_square a.pp_next,
div.light_square a.pp_previous{
	transition: .15s ease-in-out;
}
div.light_square a.pp_next{
	background-image: url(../js/layers-lightbox/prettyPhoto/images/prettyPhoto/facebook/btnNext.png);
	background-position: right center;
	background-repeat: no-repeat;
	opacity: 0;
}
div.light_square a.pp_next:hover{
	background-image: url(../js/layers-lightbox/prettyPhoto/images/prettyPhoto/facebook/btnNext.png);
	background-position: right center;
	background-repeat: no-repeat;
	opacity: 1;
}
div.light_square a.pp_previous{
	background-image: url(../js/layers-lightbox/prettyPhoto/images/prettyPhoto/facebook/btnPrevious.png);
	background-position: left center;
	background-repeat: no-repeat;
	opacity: 0;
}
div.light_square a.pp_previous:hover{
	background-image: url(../js/layers-lightbox/prettyPhoto/images/prettyPhoto/facebook/btnPrevious.png);
	background-position: left center;
	background-repeat: no-repeat;
	opacity: 1;
}

	/*---------------------------*/
	div.light_rounded .pp_top .pp_middle,
	div.light_rounded .pp_content_container .pp_left,
	div.light_rounded .pp_content_container .pp_right,
	div.light_rounded .pp_bottom .pp_middle,
	div.light_square .pp_left,
	div.light_square .pp_middle,
	div.light_square .pp_right,
	div.light_square .pp_content,
	div.facebook .pp_content{
		background: rgba(0, 0, 0, 0.85);
	}
	div.light_square .pp_content_container .pp_right,
	div.light_square .pp_content{
		background: none;
	}
	div.light_square .pp_nav{
		color: rgba(255, 255, 255, 0.7);
	}

/*-------------------------------*/
/*-- PHONES ---------------------*/
/*-------------------------------*/
@media only screen and (max-width: 480px){

	.project-image-bottom .grid .project-content,
	.project-image-top .grid .project-content{
		float: none;
		width: 100%;
	}

	.project-image-bottom .grid .project-meta,
	.project-image-top .grid .project-meta{
		float: none;
		width: 100%;
		margin-bottom: 40px;
	}

	.swiper-container + .layers-project-slideshow-thumbnails{
		display: none;
	}

	.single-layers-project #comments{
		max-width: none;
	}

}

/*-------------------------------*/
/*-- TABLETS --------------------*/
/*-------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 769px){

	.project-image-bottom .grid .project-content,
	.project-image-top .grid .project-content{
		float: none;
		width: 100%;
	}

	.project-image-bottom .grid .project-meta,
	.project-image-top .grid .project-meta{
		float: none;
		width: calc(((100% / 12) * 6) - 20px);
		margin-bottom: 40px;
	}

	.single-layers-project #comments{
		max-width: none;
	}

}