#app {

		top: 0;

		left: 0;

		position: fixed;

		width: 100%;

		height: 100vh;

		overflow: hidden;

		pointer-events: none;

		opacity:0;

		-webkit-transition: all 0.1s ease-in-out 0.3s;

		transition: all 0.1s ease-in-out 0.3s;

	}

	

	.load-project-thumb #app, .load-project-thumb-with-title #app, .load-project-thumb-with-title-and-scale #app {

		opacity:1;

	}

	

	.grid__item-img--large {

		pointer-events: none;

		position: fixed;

		opacity: 0;

	}

	

	.grid__item-hidden {

		pointer-events: none;

		position: fixed;

		opacity: 0;

	}

	

	#project-holder {

		position: absolute;

		top: 0;

		right: 0;

		bottom: 0;

		left: 0;

		z-index:100;

		pointer-events:none;

	}

	

	#project-holder.open {

		pointer-events:initial;

	}

	

	#showcase-height {

		position:relative;

		width:100vw;

		height:0;

	}

	

	#project-holder #main, #project-holder #main-page-content {

		opacity:1;

	}





	.thumb-container {

		visibility: hidden;

		height:100vh;

		width: 100%;

		left:0px;

		position: fixed;

		top:0;

		z-index:100;

		opacity:1;

		-webkit-transform: scale(1.05);

		transform: scale(1.05);	

		background-color:#161717;

	}

	

	

	.thumb-page {

		cursor: pointer;

		position: absolute;

		height:100vh;

		width:100%;

		top:0;

		left:0px;

		position: fixed;

		visibility:hidden;

		background-position:center center;

		background-size:cover;

		background-repeat:no-repeat;

	}

	

	.thumb-page::after {

		content: "";

		width: 100%;

		height: 60%;

		position: absolute;

		bottom: 0;

		left: 0;

		pointer-events: none;

		background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);

		background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);

		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );

	}

	

/*--------------------------------------------------

	02. Filters

---------------------------------------------------*/		

	

		

	#show-filters {

		font-weight: 600;

		font-family: 'PT Sans', sans-serif;

		font-size: 12px;

		color:#000;

		opacity: 0;

		display: block;

		cursor: pointer;

		position: fixed;

		left: 48px;

		bottom: 30px;

		height: 80px;

		width: 80px;

		background: none;

		transform-origin: 0 0;

		z-index:100;

		pointer-events:none;

	}

	

	.light-content #show-filters {

		color:#fff;

	}

	

	#show-filters.enabled {

		pointer-events:initial;

	}

	

	.show-filters-wrap {

		width: 80px;

		height: 80px;

		float: right;

		top: 0px;

		display: flex;

		position: relative;

		justify-content: center;

		align-items: center;

		cursor: pointer;

	}

	

	.open-filters {

		height: 46px;		

		width: 46px;

		text-align:center;

		line-height:46px;

		font-size:16px;

		cursor: pointer;

		position: relative;		

	}

	

	#filters-overlay {

		position:fixed;

		z-index:15;

		height:100vh;

		width:100%;

		top:0;

		left:0;

		right:0;

		bottom:0;

		opacity:0;

		visibility:hidden;

	    box-sizing: border-box;

		-webkit-transition: all 0.1s ease-in-out 0.6s;

		transition: all 0.1s ease-in-out 0.6s;

	}

	

	#filters-overlay.active {

		opacity:1;

		visibility:visible;

		-webkit-transition: all 0.3s ease-in-out 0.2s;

		transition: all 0.3s ease-in-out 0.2s;

	}

	

	#close-filters {

		position: fixed !important;

		height:100vh;

		width:100vw;

		top:0;

		left:0;

		right:0;

		bottom:0;

	}

	

	#filters-overlay .outer {

		width: 100%;

		margin: 0 auto;

		padding: 80px;

		padding-top:160px;

		box-sizing: border-box;

	}

	

	#filters-overlay .inner {

		vertical-align: middle;

		position: relative;

		pointer-events: none;

		text-align: center;

	}

	

	.filters-wrap {

		position: relative;

		width: 100%;

		max-height: 0px;

		opacity:0;

		margin-top: 100px;

		transition: all 0.6s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.2s;

		-webkit-transition: all 0.6s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.2s;

	}

	

	.filters-wrap.active {

		opacity: 1;

		max-height: 100px;

		transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);

		-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);

	}

	

	#filters {

		height: auto;

		z-index: 15;

		position: relative;

		width: auto;

		display: inline-block;

		padding: 0;

		pointer-events: initial;

		margin: 0;

	}

	

	#filters li {

		display: block;

		opacity: 1;

		position: relative;

		margin: 15px 0;

		opacity: 0;

		text-align: center;

	}

	

	#filters li a {

		display: inline-block;

		color: #000;

		font-family: 'Bodoni Moda', serif;

		font-weight: 500;

		font-size:48px;

		line-height: 60px;

		z-index: 15;

		position: relative;

		-webkit-transition: all 0.15s ease-in-out;

		transition: all 0.15s ease-in-out;

	}

	

	.light-content #filters li a {

		color: #fff;

	}

	

	#filters:hover li a {

		opacity:0.4;

	}

	

	#filters li a:hover {

		opacity:1;

	}

	

	

/*--------------------------------------------------

	09. Portfolio Isotope Transitions

---------------------------------------------------*/



	.isotope, .isotope .isotope-item {

		-webkit-transition-duration: 1.8s;

		-moz-transition-duration: 1.8s;

		-ms-transition-duration: 1.8s;

		-o-transition-duration: 1.8s;

		transition-duration: 1.8s;

	}

	

	.isotope {

		-webkit-transition-property: height, width;

		-moz-transition-property: height, width;

		-ms-transition-property: height, width;

		-o-transition-property: height, width;

		transition-property: height, width;

	}

	

	.isotope .isotope-item {

		-webkit-transition-property: -webkit-transform, opacity;

		-moz-transition-property: -moz-transform, opacity;

		-ms-transition-property: -ms-transform, opacity;

		-o-transition-property: -o-transform, opacity;

		transition-property: transform, opacity;

	}

	

/*--------------------------------------------------

	03. Portfolio Layout

---------------------------------------------------*/	

	

	

	.scale-up .portfolio-wrap {		

		pointer-events:none;

	}

		

	.portfolio-wrap {		

		position:relative;

		margin:0 auto;

		width: calc(100% - 240px);

		padding:0;

		box-sizing:border-box;

		min-height:50vh;

	}

	

	.portfolio-wrap.classic-grid {

		width: calc(100% - 300px);

	}

	

	.portfolio-wrap.tall-grid {

		width: calc(100% - 300px);

		margin-bottom:100px;

	}

	

	.portfolio-wrap.metro-grid {

		width: calc(100% - 340px);

	}

	

	.portfolio-wrap.sided-grid {

		width: calc(100% - 340px);

	}

	

	.portfolio-wrap.spaced-grid {

		width: 100%;

	}

	

	

	.portfolio {

		position: relative;

		margin: 0 auto;

		box-sizing: border-box;

		-webkit-transition: height 0.5s ease-out;

		transition: height 0.5s ease-out;

	}

	

	.portfolio:after {

		content:""; 

		display:table; 

		clear:both;

	}

	

	.portfolio .item:last-child {

		margin-bottom:0!important;

	}

	

	/*-- Classic Grid --*/

	

	.classic-grid .item {

		display: block;

		position: relative;

		box-sizing: border-box;

		z-index: 0;

		margin:20px;

		width: calc(33.333% - 40px);

		height: 18vw;

	}

	

	.classic-grid.two-cols .item {

		width: calc(50% - 40px);

		height: 26vw;

	}

	

	/*-- Tall Grid --*/

	

	.tall-grid .item {

		display: block;

		position: relative;

		box-sizing: border-box;

		z-index: 0;

		margin:40px;

		width: calc(33.333% - 80px);

		height: 36vw;

	}

	

	.tall-grid .item:nth-of-type(3n+2) {

		transform: translateY(140px);

		-webkit-transform: translateY(140px);

	}

	

	/*-- Metro Grid --*/

	

	.metro-grid .item {

		display: block;

		position: relative;

		box-sizing: border-box;

		z-index: 0;

		margin:0px;

		width: 25%;

	}

	

	.metro-grid .item.wide {

		width: 50%;

	}

	

	.metro-grid .item.tall {

		width: 50%;

	}

	

	.metro-grid .item:after {

		content: "";

		display: block;

		padding-bottom: 100%;

	}

	

	.metro-grid .item.wide:after {

		content: "";

		display: block;

		padding-bottom: 50%;

	}

	

	/*-- Bricks Grid --*/

	

	.bricks-grid .item {

		display: block;

		position: relative;

		box-sizing: border-box;

		z-index: 0;

		margin:20px;

		width: calc(56% - 40px);

		height: 28vw;

	}

	

	.bricks-grid .item:nth-of-type(6n+1) {		

		width: calc(56% - 40px);

		height: 28vw;

		margin-left:22%;

		margin-right:22%;		

	}

	

	.bricks-grid .item:nth-of-type(6n+2) {

		width: calc(56% - 40px);

		height: 28vw;

		margin-left:7%;		

	}

	

	.bricks-grid .item:nth-of-type(6n+3) {

		width: calc(30% - 40px);

		height: 16vw;

		margin-right:7%;		

	}

	

	.bricks-grid .item:nth-of-type(6n+4) {

		width: calc(56% - 40px);

		height: 28vw;

		margin-left:22%;

		margin-right:22%;		

	}

	

	.bricks-grid .item:nth-of-type(6n+5) {

		width: calc(30% - 40px);

		height: 16vw;

		margin-left:7%;		

	}

	

	.bricks-grid .item:nth-of-type(6n+6) {

		width: calc(56% - 40px);

		height: 28vw;

		margin-right:7%;		

	}

	

	/*-- Ladder Grid --*/

	

	.ladder-grid .item {

		display: block;

		position: relative;

		box-sizing: border-box;

		z-index: 0;

		margin:0px;

		width: calc(20% - 0px);

	}

	

	.ladder-grid .item:after {

		content: "";

		display: block;

		padding-bottom: 100%;

	}

	

	.ladder-grid .item:nth-of-type(9n+1) {

		width: 20%;

		margin-top:0;

		margin-bottom:55%;		

	}

	

	.ladder-grid .item:nth-of-type(9n+2) {

		width: 50%;

		margin-top:10%;

		margin-bottom:15%;		

	}

	

	.ladder-grid .item:nth-of-type(9n+3) {

		width: 30%;

		margin-top:calc(45% + 0px);

		margin-bottom:0;		

	}

	

	.ladder-grid .item:nth-of-type(9n+4) {

		width: 50%;

		margin-top: 0;

		margin-bottom: 25%;

	}

	

	.ladder-grid .item:nth-of-type(9n+5) {

		width: 30%;

		margin-top: 35%;

		margin-bottom: 10%;

	}

	

	.ladder-grid .item:nth-of-type(9n+6) {

		width: 20%;

		margin-top:55%;

		margin-bottom:0;		

	}

	

	.ladder-grid .item:nth-of-type(9n+7) {

		width: 30%;

		margin-top:0;

		margin-bottom:40%;			

	}

	

	.ladder-grid .item:nth-of-type(9n+8) {

		width: 40%;

		margin-top: 15%;

		margin-bottom: 15%;

	}

	

	.ladder-grid .item:nth-of-type(9n+9) {

		width:30%;

		margin-top: 40%;

		margin-bottom:0;

	}

	

	

	/*-- Sided Grid --*/

	

	.sided-grid .item {

		display: block;

		position: relative;

		box-sizing: border-box;

		z-index: 0;

		margin:0px;

		margin-bottom:100px;

		padding-right:35%;

		padding-left:0;

		width: 100%;

		height: 32vw;

	}

	

	.sided-grid .item:nth-of-type(2n+2) {

		padding-left:35%;

		padding-right:0;

	}

	

	/*-- Spaced Grid --*/

	

	.spaced-grid .item {

		display: block;

		position: relative;

		box-sizing: border-box;

		z-index: 0;

		margin:0px;

		width: 50%;

		height: 32vw;

	}

	

	.spaced-grid .item:nth-of-type(5n+2) {

		width: 25%;

		margin-top:16.001vw;

		margin-right:25%;

		height: 16vw;

	}

	

	.spaced-grid .item:nth-of-type(5n+3) {

		width: 25%;

		margin-bottom:16vw;

		margin-left:25%;

		height: 16vw;

	}

	

	.spaced-grid .item:nth-of-type(5n+4) {

		width: 50%;

		margin:0px;

		height: 32vw;

	}

	

	.spaced-grid .item:nth-of-type(5n+5) {

		width: 100%;

		margin:0px;

		height: 50vw;

	}

	

	/*-- Scattered Grid --*/

	

	.scattered-grid .item {

		display: block;

		position: relative;

		box-sizing: border-box;

		z-index: 0;

		margin: 120px 80px;

		width: 50%;

		height: 45vw;

	}

	

	.scattered-grid .item:nth-of-type(3n+1) {

		width: calc(60% - 160px);

		margin: 80px;

		height: 28vw;

	}

	

	.scattered-grid .item.tall:nth-of-type(6n+1) {

		width: 50%;

		margin-left:5%;

		margin-right:5%;

		height: 45vw;

	}

	

	.scattered-grid .item:nth-of-type(6n+2) {

		width: calc(40% - 160px);

		margin-top:20vw;	

		height: 17vw;

	}

	

	.scattered-grid .item:nth-of-type(6n+3) {

		width: 60%;

		margin-left:20%;

		height: 32vw;

	}

	

	.scattered-grid .item:nth-of-type(6n+4) {

		width: calc(40% - 160px);

		margin: 120px 80px;

		margin-top:20vw;

		height: 17vw;

	}

	

	.scattered-grid .item:nth-of-type(6n+5) {

		width: calc(60% - 160px);

		margin: 80px;

		height: 28vw;

	}

	

	.scattered-grid .item.tall:nth-of-type(6n+5) {

		width: 50%;

		margin: 120px 5%;

		height: 45vw;

	}

	

	.scattered-grid .item:nth-of-type(6n+6) {

		width: 60%;

		margin-left:25%;

		height: 32vw;

	}	

	

	.tall-grid .item-parallax, .scattered-grid .item-parallax, .spaced-grid .item-parallax, .bricks-grid .item-parallax, .classic-grid .item-parallax {

		height: 100%;

		width: 100%;

		position: absolute;

	}

	

	.ladder-grid .item .item-parallax {

		position: absolute;

		height: calc(100% - 40px);

		width: calc(100% - 40px);

		top:20px;

		left:20px;

	}

	

	.metro-grid .item .item-parallax {

		position: absolute;

		height: 100%;

		width: 100%;

	}

	

	.item-appear {

		display: block;

		position: relative;

		box-sizing: border-box;

		z-index: 0;

		width: 100%;

		height: 100%;

		overflow:hidden;

					

	}

	

	.item-image::after {

		content: "";

		opacity:0;

		width: 100%;

		height: 60%;

		position: absolute;

		bottom: 0;

		left: 0;

		pointer-events: none;

		background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);

		background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);

		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );

		-webkit-transition: all 0.6s ease-in-out;

		transition: all 0.6s ease-in-out;

	}

	

	.load-project-thumb .item-image::after {

		content: "";

		opacity:1;

		width: 100%;

		height: 60%;

		position: absolute;

		bottom: 0;

		left: 0;

		pointer-events: none;

		background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);

		background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);

		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );

		-webkit-transition: all 0.6s ease-in-out;

		transition: all 0.6s ease-in-out;

	}



	.item-content {

		width: 100%;

		height: 100%;

		position:relative;

		opacity:1; 

	}

	

	.fade-scalein-effect .item-content {

		opacity:0; 

		-webkit-transform:scale(0.8);

		transform: scale(0.8);

		-webkit-transition: all 1s cubic-bezier(.165,.84,.44,1) 0.2s;	

		transition: all 1s cubic-bezier(.165,.84,.44,1) 0.2s;	

	}

	

	.fade-scalein-effect .item.active .item-content {

		opacity: 1;

		-webkit-transform: scale(1);

		transform: scale(1);

		position:absolute;

		right:0;	

	}

	

	.fade-scaleout-effect .item-content {

		opacity:0; 

		-webkit-transform:scale(1.2);

		transform: scale(1.2);

		-webkit-transition: all 1s cubic-bezier(.165,.84,.44,1) 0.2s;	

		transition: all 1s cubic-bezier(.165,.84,.44,1) 0.2s;	

	}

	

	.fade-scaleout-effect .item.active .item-content {

		opacity: 1;

		-webkit-transform: scale(1);

		transform: scale(1);

		position:absolute;

		right:0;	

	}

	

	.width-scale-effect .item-content {

		-webkit-transform:scale(1.2);

		transform: scale(1.2);

		-webkit-transition: all .6s cubic-bezier(0.54, 0.49, 0.2, 1.01);

		-o-transition: all .6s cubic-bezier(0.54, 0.49, 0.2, 1.01);

		transition: all .6s cubic-bezier(0.54, 0.49, 0.2, 1.01);	

	}

	

	.width-scale-effect .item.active .item-content {

		-webkit-transform: scale(1);

		transform: scale(1);	

	}

	

	.width-scale-effect .item-content:after {

		content: "";

		width: 100%;

		height: 100%;

		background-color:#141414;

		position:absolute;

		top:0;

		right:0;

		-webkit-transition: all .6s cubic-bezier(0.54, 0.49, 0.2, 1.01);

		-o-transition: all .6s cubic-bezier(0.54, 0.49, 0.2, 1.01);

		transition: all .6s cubic-bezier(0.54, 0.49, 0.2, 1.01);	

	}

	

	.width-scale-effect .item.active .item-content:after {

		width: 0;

	}

	

	.height-scale-effect .item-content {

		opacity: 0;

		-webkit-transition:translateY(220px) scaleY(1.3);

		transform: translateY(220px) scaleY(1.3);

		-webkit-transition: transform 1s cubic-bezier(.165,.84,.44,1), opacity 1s cubic-bezier(.165,.84,.44,1);	

		transition: transform 1s cubic-bezier(.165,.84,.44,1), opacity 1s cubic-bezier(.165,.84,.44,1);		

	}

	

	.height-scale-effect .item.active .item-content {

		opacity: 1;

		-webkit-transition:translateY(0px) scaleY(1);

		transform: translateY(0px) scaleY(1);	

	}

	

	.item-wrap {

		width: 100%;

		height: 100%;

		position:absolute;	 				

	}

	

	.item-wrap-image {

		width: 100%;

		height: 100%;

		position:relative;

		z-index:0;

		overflow:hidden;

		-webkit-transform:scale(1.05);

		transform: scale(1.05);

		-webkit-transition: all 1s cubic-bezier(.165,.84,.44,1) 0s;	

		transition: all 1s cubic-bezier(.165,.84,.44,1) 0s;			

	}

	

	.item:hover .item-appear .item-wrap-image, .above  .item-wrap-image {		

		-webkit-transform:scale(1);

		transform: scale(1);			

	}

	

	.item-image {

		width:100%;

		height: 100%;

		position:relative;

		display:block;

		z-index:100;	

		object-position: center; 

		object-fit: cover;

	}

	

	.portfolio .item-image {

		cursor:pointer;		

	}

	

	.above.item {

		opacity: 1 !important;

	}

	

	.item-caption {

		z-index: 10;

		position: absolute;

		bottom: 0px;

		height: auto;

		padding:50px 80px;

		box-sizing: border-box;

		width: 100%;

		cursor:default;

		pointer-events: none;

		opacity:0;

		-webkit-transition: all 0.2s ease-out 0.4s;

		transition: all 0.2s ease-out 0.4s;	

	}

	

	.item.active .item-caption {

		opacity: 1;

	}

	

	.item-title {		

		margin: 0;

		font-family: 'Bodoni Moda', serif;

		font-weight: 500;

		font-size:24px;

		transform: translateY(20px);

		-webkit-transform: translateY(20px);

		margin-left:-1px;

		display: block;

		position:relative;

		color:#000;

		-webkit-transition: all 0.2s ease-out;

		transition: all 0.2s ease-out;		

	}

	

	.light-content .item-title {

		color:#fff;

	}

	

	.light-content .change-header .item-title {

		color:#000;

	}

	

	.item:hover .item-title {

		-webkit-transform: translateY(0px);

		transform: translateY(0px);

	}

	

	.portfolio .item:first-child .item-title::after {

		content: "New";

		font-family: 'PT Sans', sans-serif;

		font-weight: 300;

		font-size: 10px;

		position: absolute;

		font-weight: 600;

		margin-left: 10px;

		color: #FF1B0B;

		top: -6px;

	}

	

	.item-cat {

		display:block;

		font-size: 12px;

		font-weight: 500;

		opacity: 0;

		line-height: 20px;

		overflow:hidden;

		-webkit-transform: translateY(15px);

		transform: translateY(15px);

		color:#f33a3a;

		-webkit-transition: all 0.1s ease-out;

		transition: all 0.1s ease-out;		

	}

	

	.item:hover .item-cat {

		-webkit-transform: translateY(5px);

		transform: translateY(5px);

		opacity:1;

		-webkit-transition: all 0.1s ease-out 0.1s;

		transition: all 0.1s ease-out 0.1s;

	}

	

	/*-- Other Grid Captions --*/

	

	.classic-grid .item-caption, .metro-grid .item-caption, .ladder-grid .item-caption, .bricks-grid .item-caption, .scattered-grid .item-caption {

		padding: 40px 50px;

	}

	

	/*-- Spaced Grid Captions --*/

	

	.spaced-grid .item:nth-of-type(5n+2) .item-caption {

		padding: 50px 50px;

	}

	

	.spaced-grid .item:nth-of-type(5n+3) .item-caption {

		padding: 50px 50px;

	}

	

	/*-- Sided Grid Captions --*/

	

	

	.sided-grid .item-caption-wrapper {

		width: 35%;

		position: absolute;		

		height: 100%;

		top: 0;

		display:table;

		pointer-events: none;

		box-sizing: border-box;

	}

	

	.sided-grid .item:nth-of-type(2n+1) .item-caption-wrapper{

		right: 0;

		text-align:left;

		padding-left:50px;

	}

	

	.sided-grid .item:nth-of-type(2n+2) .item-caption-wrapper {

		right: auto;

		text-align: right;

		padding-right: 50px;

		left: 0;

	}

	

	.sided-grid .item-caption {

		width:100%;

		height: 100%;

		position: relative;

		padding:0;

		display:table-cell;

		vertical-align:middle;

		-webkit-box-sizing:border-box;

		-moz-box-sizing:border-box;

		box-sizing:border-box;

	}

	

	.sided-grid .item-title {

		font-size:48px;

		line-height:60px;

		transform: translateY(0px);

		-webkit-transform: translateY(0px);

	}

	

	.light-content .sided-grid .change-header .item-title {

		color: #fff;

	}

	

	.sided-grid .item-cat {

		opacity:1;

		transform: translateY(5px);

		-webkit-transform: translateY(5px);

	}

	

	/*-- Hover Captions --*/

	

	.temporary-hero.portfolio-captions {

		opacity:0;

		-webkit-transition: all 0.3s ease-out 0s;

		transition: all 0.3s ease-out 0s;

	}

	

	.temporary-hero.portfolio-captions.enabled {

		opacity:1;

	}

	

	.temporary-hero .item-caption {

		z-index: 10;

		position: absolute;

		top: 50%;

		left:0;

		margin-top: -50px;

		height: auto;

		padding:30px;

		box-sizing: border-box;

		width: 100%;

		cursor:default;

		pointer-events: none;

		opacity:1;

	}

	

	.temporary-hero .item-title {

		font-size:100px;

		line-height:130px;

		position:relative;

		margin:0;

		-webkit-transform: translateY(50px);

		transform: translateY(50px);

		opacity:0;

		-webkit-transition: all 0.2s ease-out;

    	transition: all 0s linear;

	}

	

	.temporary-hero .item-cat {

		position:relative;

		font-size: 18px;

		line-height:30px;

		font-family: 'PT Sans', sans-serif;

		font-weight: 500;

		-webkit-transform: translateY(30px);

		transform: translateY(30px);

		opacity:0;

		-webkit-transition: all 0.2s ease-out;

    	transition: all 0s linear;

	}

	

	/*-- Tooltip Captions --*/

	

	.title-caption-tooltip {

		min-width: 300px;

		position: absolute;

		display: block;

		top:30px;

		left:30px;

	}

	

	.title-caption-tooltip .item-caption {

		position:absolute;

		opacity:0;

		width: auto;

		top:-40px;

		left:-40px;

		-webkit-transition: all 0.1s ease-in-out;

		transition: all 0.1s ease-in-out;

	}

	

	.title-caption-tooltip .item-caption.hover {

		opacity:1;

		top:-40px;

		left:-60px;

	}

	

	.title-caption-tooltip .item-caption .item-title {

		display:block;

		background-color:#000;

		margin:0;

		width:auto;

		color:#fff;

		padding:5px 10px;

		

	}

	

	.title-caption-tooltip .item-caption .item-cat {

		display:block;

		background-color:#000;

		margin:0;

		width:auto;

		padding:10px;

		padding-top:0;

		float:left;

		opacity:1;

	}





/*--------------------------------------------------

	Project Page Navigation

---------------------------------------------------*/	

	

	#project-nav {

		height: 100vh;

		width: 100%;

		color: #000;

		position: absolute;

		margin-bottom: 0;

		bottom: -100vh;

		overflow:hidden;

	}

	

	.light-content #project-nav {

		color: #fff;

	}

	

	.next-project-wrap {

		display: table;

		width: 100%;

		padding:20px;

		margin: 0 auto;

		height: 100%;

		position: relative;

		box-sizing: border-box;

		opacity:0;

		top:-40%;

		z-index:10;

		-webkit-transform: scale(0.9);

		transform: scale(0.9);

	}

	

	.next-project-image-wrapper {

		background-color: #171717;

		position: fixed;

		width: 100%;

		height: 100%;

		top:0;

		left:0;

	}

	

	.next-project-image {

		position: fixed;

		top:60%;

		opacity:0;

		left: 0;

		height: 85%;

		width: 100%;

		overflow:hidden;

	}

	

	.load-project-thumb-with-title .next-project-image {

		z-index:10;

	}

	

	.next-project-image.temporary {

		top:0!important;

	}

	

	.next-project-image.visible {

		opacity:1!important;

	}

	

	.next-project-image-bg {

		position: absolute;

		top: 0;

		left: 0;

		height: 100%;

		width: 100%;

		background-size: cover;

		background-position:center center;

		background-repeat: no-repeat;

		opacity:1;

		z-index:1;

		-webkit-transform: scale(1);

		transform: scale(1);	

	}

	

	.next-project-title {

		display: table;

		width: 100%;

		padding:20px;

		margin: 0 auto;

		height: 100%;

		position: relative;

		box-sizing: border-box;

		opacity:0;

		top:-40%;

		z-index:10;

		-webkit-transform: scale(0.9);

		transform: scale(0.9);

	}

	

	.app-canvas .next-project-title {

		padding: 0px;

		max-width:none;

	}

	

	.next-project-caption {

		display: table-cell;

		vertical-align: middle;

		box-sizing: border-box;

		vertical-align: middle;

		text-align:center;

	}

	

	.next-caption-wrapper {

		display: table;

		margin: 0 auto;

		width: auto;

		position:relative;

	}

	

	#project-nav .next-ajax-link-project {

		display: block;

		margin: 0 auto;

		width: 100%;

		height: 100%;

		position: absolute;

		top: 0;

		left: 0;

		z-index:10;

	}

	

	.next-caption {

		display:block;

		position:relative;

		z-index:1;

	}



	.main-title {

		display:block;

		width:auto;

		font-size:60px;

		line-height:70px;

		font-weight: 500;

		z-index:10;

		color:#000;		

		position:relative;

		margin:0 auto;

		margin-bottom: 20px;

		margin-left: -3px;

	}

	

	.light-content .main-title {

		color:#fff;		

	}

	

	.main-title span {

		background-image: linear-gradient(transparent calc(100% - 3px), #000 1px);

		background-size: 0;

		background-repeat: no-repeat;

		display: inline;

		transition: 0.5s ease;

	}

	

	.light-content .main-title span {

		background-image: linear-gradient(transparent calc(100% - 3px), #fff 1px);

	}

  

  	.main-title:hover span {    

      	background-size: 100%;

    }

	

	.page-is-changing .main-title span {

		background-size: 0;

		transition: 0.3s ease;

	}

	

	.next-title {

		margin-bottom: 0;

		line-height: 20px;

		height:20px;

		overflow:hidden;

		position: relative;

		left: 0;

		display: block;

		font-size:16px;

		font-weight: 600;		

		transform: translateY(-20px);

		-webkit-transform: translateY(-20px);

	}

	

	.light-content .next-title {

		color:#FFF;		

	}

	

	.next-subtitle-name {

		margin-bottom: 0;

		opacity: 1;

		line-height: 20px;

		height:20px;

		overflow:hidden;

		position: relative;

		left: 0;

		display: block;

		font-size:16px;

		font-weight: 600;

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

		color: #000;

	}

	

	.next-subtitle-name {

		transform: translateY(50px) rotate(-7deg);

		-webkit-transform: translateY(50px) rotate(-7deg);

		opacity:0;

	}

	

	.light-content .next-subtitle-name {

		color: #fff;

	}

	

	#project-nav #itemsWrapperLinks {

		height:auto;

	}

	

	#project-nav #itemsWrapper {

		z-index:10!important;

		position:relative;

		padding: 0;

		max-width:1000px;

		margin: 0 auto;

	}

	

	#project-nav .item .item-title {

		-webkit-transform: translateY(10px);

		transform: translateY(10px);

		font-size:14px;

	}

	

	#project-nav .item-wrap-image {

		-webkit-transform:scale(1);

		transform: scale(1);	

	}

	

	#project-nav .item-image {

		opacity: 1 !important;

	}

	

	#project-nav .item-caption {

		bottom:-5px;

		text-align:center;

	}

	

	

/*--------------------------------------------------

	Responsive

---------------------------------------------------*/	









@media only screen and (max-width: 1466px) {

	

	#filters-overlay .outer {

		padding: 60px;

	}

	

	#show-filters {

		left: 26px;

		bottom: 20px;

	}

	

	.portfolio-wrap {

		width: calc(100% - 160px);

	}

	

	.portfolio-wrap.ladder-grid {

		width: calc(100% - 80px);

	}

	

	.portfolio-wrap.sided-grid {

		width: calc(100% - 120px);

	}

	

	.portfolio-wrap.classic-grid {

		width: calc(100% - 80px);

	}

	

	.portfolio-wrap.tall-grid {

		width: calc(100% - 200px);

		margin-bottom:80px;

	}

	

	.portfolio-wrap.metro-grid {

		width: calc(100% - 120px);

	}

	

	/*-- Tall Grid --*/

	

	.tall-grid .item {

		display: block;

		position: relative;

		box-sizing: border-box;

		z-index: 0;

		margin:30px;

		width: calc(33.333% - 60px);

		height: 34vw;

	}

	

	.tall-grid .item:nth-of-type(3n+2) {

		transform: translateY(120px);

		-webkit-transform: translateY(120px);

	}

	

	/*-- Ladder Grid --*/

	

	.ladder-grid .item {

		display: block;

		position: relative;

		box-sizing: border-box;

		z-index: 0;

		margin:0px;

		width: calc(20% - 0px);

	}

	

	.ladder-grid .item:after {

		content: "";

		display: block;

		padding-bottom: 100%;

	}

	

	.ladder-grid .item:nth-of-type(9n+1) {

		width: 30%;

		margin-top:0;

		margin-bottom:40%;		

	}

	

	.ladder-grid .item:nth-of-type(9n+2) {

		width: 40%;

		margin-top: 15%;

		margin-bottom: 15%;		

	}

	

	.ladder-grid .item:nth-of-type(9n+3) {

		width:30%;

		margin-top: 40%;

		margin-bottom:0;		

	}

	

	.ladder-grid .item:nth-of-type(9n+4) {

		width: 40%;

		margin-top: 0;

		margin-bottom: 30%;

	}

	

	.ladder-grid .item:nth-of-type(9n+5) {

		width: 30%;

		margin-top: 25%;

		margin-bottom: 15%;

	}

	

	.ladder-grid .item:nth-of-type(9n+6) {

		width: 30%;

		margin-top:40%;

		margin-bottom:0;		

	}

	

	.ladder-grid .item:nth-of-type(9n+7) {

		width: 30%;

		margin-top:0;

		margin-bottom:40%;			

	}

	

	.ladder-grid .item:nth-of-type(9n+8) {

		width: 40%;

		margin-top: 15%;

		margin-bottom: 15%;

	}

	

	.ladder-grid .item:nth-of-type(9n+9) {

		width:30%;

		margin-top: 40%;

		margin-bottom:0;

	}

	

	.scattered-grid .item {

		display: block;

		position: relative;

		box-sizing: border-box;

		z-index: 0;

		margin: 120px 60px;

		width: 50%;

		height: 45vw;

	}

	

	.scattered-grid .item:nth-of-type(6n+1) {

		width: calc(60% - 120px);

		margin: 60px;

		height: 28vw;

	}

	

	.scattered-grid .item.tall:nth-of-type(6n+1) {

		width: 50%;

		margin-left:5%;

		margin-right:5%;

		height: 45vw;

	}

	

	.scattered-grid .item:nth-of-type(6n+2) {

		width: calc(40% - 120px);

		margin-top:20vw;	

		height: 17vw;

	}

	

	.scattered-grid .item:nth-of-type(6n+3) {

		width: 60%;

		margin-left:20%;

		height: 32vw;

	}

	

	.scattered-grid .item:nth-of-type(6n+4) {

		width: calc(40% - 120px);

		margin: 120px 60px;

		margin-top:20vw;

		height: 17vw;

	}

	

	.scattered-grid .item:nth-of-type(6n+5) {

		width: calc(60% - 120px);

		margin: 60px;

		height: 28vw;

	}

	

	.scattered-grid .item.tall:nth-of-type(6n+5) {

		width: 50%;

		margin: 120px 5%;

		height: 45vw;

	}

	

	.scattered-grid .item:nth-of-type(6n+6) {

		width: 60%;

		margin-left:25%;

		height: 32vw;

	}

	

	.classic-grid .item-caption, .tall-grid .item-caption, .metro-grid .item-caption, .ladder-grid .item-caption, .bricks-grid .item-caption, .scattered-grid .item-caption {

		padding: 30px 30px;

	}

	

	.spaced-grid .item-caption {

    	padding: 40px 60px!important;

	}

	

	.sided-grid .item:nth-of-type(2n+1) .item-caption-wrapper {

		padding-left: 40px;

	}

	

	.sided-grid .item:nth-of-type(2n+2) .item-caption-wrapper {

		padding-right: 40px;

	}

	

	.sided-grid .item-title {

		font-size: 40px;

		line-height: 56px;

	}

	

	

}



@media only screen and (max-width: 1024px) {	

	

	#filters-overlay .outer {

		padding: 40px;

		padding-bottom:80px;

	}

	

	#filters li a {

		font-size: 24px;

		line-height: 40px;

	}

	

	#show-filters {

		left: 22px;

		bottom: 14px;

		height: 46px;

		width: 46px;

	}

	

	#show-filters[data-tooltip][data-placement="top"]::before {

		display:none;

	}

	

	.show-filters-wrap {

		width: 46px;

		height: 46px;

	}

	

	.portfolio-wrap {

		width: calc(100% - 100px);

	}

	

	.portfolio-wrap.sided-grid, .portfolio-wrap.metro-grid {

		width: calc(100% - 80px);

	}

	

	.portfolio-wrap.ladder-grid {

		width: calc(100% - 60px);

	}

	

	.portfolio-wrap.classic-grid, .portfolio-wrap.bricks-grid {

		width: calc(100% - 40px);

	}

	

	/*-- Tall Grid --*/

	

	.portfolio-wrap.tall-grid {

		width: calc(100% - 60px);

		margin-bottom:80px;

	}

	

	.tall-grid .item {

		display: block;

		position: relative;

		box-sizing: border-box;

		z-index: 0;

		margin:15px;

		width: calc(33.333% - 30px);

		height: 38vw;

	}

	

	.tall-grid .item:nth-of-type(3n+2) {

		transform: translateY(100px);

		-webkit-transform: translateY(100px);

	}

	

	.bricks-grid .item {

		margin: 10px;

	}

	

	.scattered-grid .item {

		display: block;

		position: relative;

		box-sizing: border-box;

		z-index: 0;

		margin: 120px 40px;

		width: 50%;

		height: 45vw;

	}

	

	.scattered-grid .item:nth-of-type(6n+1) {

		width: calc(60% - 80px);

		margin: 40px;

		height: 28vw;

	}

	

	.scattered-grid .item.tall:nth-of-type(6n+1) {

		width: 50%;

		margin-left:5%;

		margin-right:5%;

		height: 45vw;

	}

	

	.scattered-grid .item:nth-of-type(6n+2) {

		width: calc(40% - 80px);

		margin-top:20vw;	

		height: 17vw;

	}

	

	.scattered-grid .item:nth-of-type(6n+3) {

		width: 60%;

		margin-left:20%;

		height: 32vw;

	}

	

	.scattered-grid .item:nth-of-type(6n+4) {

		width: calc(40% - 80px);

		margin: 120px 40px;

		margin-top:20vw;

		height: 17vw;

	}

	

	.scattered-grid .item:nth-of-type(6n+5) {

		width: calc(60% - 80px);

		margin: 40px;

		height: 28vw;

	}

	

	.scattered-grid .item.tall:nth-of-type(6n+5) {

		width: 50%;

		margin: 120px 5%;

		height: 45vw;

	}

	

	.scattered-grid .item:nth-of-type(6n+6) {

		width: 60%;

		margin-left:25%;

		height: 32vw;

	}

	

	.spaced-grid .item-caption, .classic-grid .item-caption, .metro-grid .item-caption, .bricks-grid .item-caption, .scattered-grid .item-caption, .spaced-grid .item-caption {

		padding: 30px 40px!important;

	}

	

	.ladder-grid .item-caption {

		padding: 20px!important;

	}

	

	.ladder-grid .item .item-parallax {

		position: absolute;

		height: calc(100% - 20px);

		width: calc(100% - 20px);

		top: 10px;

		left: 10px;

	}

	

	.sided-grid .item:nth-of-type(2n+1) .item-caption-wrapper {

		padding-left: 30px;

	}

	

	.sided-grid .item:nth-of-type(2n+2) .item-caption-wrapper {

		padding-right: 30px;

	}

	

	.sided-grid .item-title {

		font-size: 36px;

		line-height: 50px;

	}

	

}



@media only screen and (max-width: 767px) {

	

	#filters-overlay .outer {

		padding: 30px;

		padding-bottom:80px;

	}

	

	#show-filters {

		left: 12px;

		bottom: 10px;

	}

	

	.portfolio-wrap, .portfolio-wrap.metro-grid, .portfolio-wrap.classic-grid, .portfolio-wrap.sided-grid, .portfolio-wrap.bricks-grid, .portfolio-wrap.ladder-grid {

		width: 100%;

	}

	

	.item-parallax {

		transform: none!important;

	}

	

	/*-- Tall Grid --*/

	

	.portfolio-wrap.tall-grid {

		width: 100%;

		margin-bottom:0px;

	}

	

	.tall-grid .item {

		width: calc(100% - 60px)!important;

		margin:15px 30px!important;

		height: 60vw!important;

		padding:0!important;

	}

	

	.tall-grid .item:nth-of-type(3n+2) {

		transform: translateY(0px);

		-webkit-transform: translateY(0px);

	}

	

	.ladder-grid .item, .bricks-grid .item, .classic-grid .item, .sided-grid .item {

		width: calc(100% - 60px)!important;

		margin:15px 30px!important;

		height: 60vw!important;

		padding:0!important;

	}

	

	.metro-grid .item, .spaced-grid .item {

		width: 100%!important;

		margin: 0px!important;

		height: 62vw!important;

	}

	

	.ladder-grid .item .item-parallax {

		position: absolute;

		height: 100%;

		width: 100%;

		top: 0px;

		left: 0px;

	}

	

	.scattered-grid .item:nth-of-type(6n+1), .scattered-grid .item:nth-of-type(6n+2), .scattered-grid .item:nth-of-type(6n+3), .scattered-grid .item:nth-of-type(6n+4), .scattered-grid .item:nth-of-type(6n+5), .scattered-grid .item:nth-of-type(6n+6) {

		width: calc(100% - 60px);

		margin: 15px 30px;

		height: 60vw;

	}

	

	.scattered-grid .item.tall:nth-of-type(6n+1), .scattered-grid .item.tall:nth-of-type(6n+5) {

		width: calc(100% - 60px);

		margin: 15px 30px;

		height: 100vw;

	}

	

	.sided-grid .item:nth-of-type(2n+1) .item-caption-wrapper {

		right: 0;

		text-align: center;

		padding-left: 0;

	}

	

	.sided-grid .item:nth-of-type(2n+2) .item-caption-wrapper {

		right: 0;

		text-align: center;

		padding-right: 0px;

	}

	

	.sided-grid .item-caption-wrapper {

		width: 100%;

		position: absolute;

		height: 100%;

	}

	

	.sided-grid .item-title {

		font-size: 24px;

		line-height: 32px;

	}

	

	.light-content .sided-grid .change-header .item-title {

		color: #000;

	}

	

	.spaced-grid .item-caption, .classic-grid .item-caption, .metro-grid .item-caption, .ladder-grid .item-caption, .bricks-grid .item-caption, .scattered-grid .item-caption {

		padding: 30px 30px!important;

	}

	

}



@media only screen and (max-width: 479px) {

	

	#filters-overlay .outer {

		padding: 20px;

		padding-bottom:80px;

	}

	

	#show-filters {

		left: 2px;

		bottom: 2px;

	}

	

	.portfolio {

		overflow:hidden;

	}

	

	.ladder-grid .item, .bricks-grid .item, .classic-grid .item, .sided-grid .item, .tall-grid .item {

		width: calc(100% - 40px)!important;

		margin:10px 20px!important;

		height: 60vw!important;

	}

	

	.metro-grid .item, .spaced-grid .item {

		width: 100%!important;

		margin: 0px!important;

		height: 62vw!important;

	}

	

	.scattered-grid .item:nth-of-type(6n+1), .scattered-grid .item:nth-of-type(6n+2), .scattered-grid .item:nth-of-type(6n+3), .scattered-grid .item:nth-of-type(6n+4), .scattered-grid .item:nth-of-type(6n+5), .scattered-grid .item:nth-of-type(6n+6) {

		width: calc(100% - 40px);

		margin: 10px 20px;

		height: 60vw;

	}

	

	.scattered-grid .item.tall:nth-of-type(6n+1), .scattered-grid .item.tall:nth-of-type(6n+5) {

		width: calc(100% - 40px);

		margin: 10px 20px;

		height: 100vw;

	}

	

	.spaced-grid .item-caption, .classic-grid .item-caption, .metro-grid .item-caption, .ladder-grid .item-caption, .bricks-grid .item-caption, .scattered-grid .item-caption {

		padding: 30px 20px!important;

	}

		

}