#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: absolute;
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 );
} #show-filters {
font-weight: 600;
font-family: 'Poppins', 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: 'Roboto Slab', 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;
} .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;
} .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 .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 .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 .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 .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 .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 .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 .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 .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;	 				
}
.load-no-ajax .item-wrap {
z-index:20;
}
.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: 'Roboto Slab', 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: 'Poppins', 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;
} .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 .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 .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);
} .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: 'Poppins', 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;
} .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-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: 100%;
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;
} @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 .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 .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);
} .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;
} .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;
}
}