.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 );
} .filters-info {
font-weight: 600;
font-family: 'Poppins', sans-serif;
font-size: 12px;
line-height:30px;
margin:25px 0;
margin-left:0px;
overflow: hidden;
width:140px;
color:#000;
float:left;
opacity:0;
-webkit-transition:translateY(30px);
transform: translateY(30px);
}
.light-content .filters-info {
color:#fff;
}
#show-filters {
margin: 0 auto;
text-align: center;
display: none;
visibility:hidden
}
#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 0;
padding-top:160px;
box-sizing: border-box;
max-width:1180px;
}
#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: 5px 0;
opacity: 0;
text-align: center;
overflow:hidden;
}
#filters li a {
display: inline-block;
color: #000;
font-weight: 700;
font-size: 3vw;
line-height: 3.5vw;
z-index: 15;
position: relative;
color: transparent;
-webkit-text-stroke: 1px rgba(0,0,0,0.3);
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
}
.scale-title #filters li a {
transform: scaleY(0.7);
-webkit-transform: scaleY(0.7);
}
.light-content #filters li a {
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,0.3);
}
#filters li a:hover, #filters li a.active {
opacity:1;
color:#000;
-webkit-text-stroke: 1px rgba(0,0,0,0);
}
.light-content #filters li a:hover, .light-content #filters li a.active {
color:#fff;
-webkit-text-stroke: 1px rgba(255,255,255,0);
} .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;
} .portfolio-wrap {		
position:relative;
margin:0 auto;
width: 60%;
padding:0;
box-sizing:border-box;
margin-top:90px;
min-height:50vh;
}
.portfolio-wrap.grid-portfolio {		
position:relative;
margin:0 auto;
width: 75%;
padding:0;
box-sizing:border-box;
margin-top:90px;
margin-bottom:100px;
min-height:50vh;
}
.portfolio {
position: relative;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
-webkit-transition: height 0.5s ease-out;
transition: height 0.5s ease-out;
}
.portfolio:after {
content:""; 
display:table; 
clear:both;
}
.item {
display: block;
position: relative;
box-sizing: border-box;
z-index: 0;
margin: 80px;
width: calc(100% - 160px);
height: 30vw;
}
.grid-portfolio .item {
display: block;
position: relative;
box-sizing: border-box;
z-index: 0;
margin: 40px;
width: calc(50% - 80px);
height: 22vw;
}
.grid-portfolio .item.wide {
margin: 40px;
width: calc(100% - 80px);
height: 40vw;
}
.parallax-portfolio .item-appear {
display: block;
position: absolute;
box-sizing: border-box;
z-index: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transform:translateY(0px) scale(1.15);
transform: translateY(0px) scale(1.15);
-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);				
}
.parallax-portfolio .item-appear.active, .parallax-portfolio .item:first-child .item-appear{
opacity: 1;
-webkit-transform:translateY(0px) scale(1);
transform: translateY(0px) scale(1);	
}
.grid-portfolio .item-appear {
display: block;
position: absolute;
box-sizing: border-box;
z-index: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transform:translateY(200px) scaleY(1.3);
transform: translateY(200px) 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);				
}
.grid-portfolio .item-appear.active, .grid-portfolio .item:first-child .item-appear{
opacity: 1;
-webkit-transform:translateY(0px) scaleY(1);
transform: translateY(0px) scaleY(1);	
}
.item.above .item-content {
opacity: 1!important;
}
.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;	
}
.item-wrap {
width: 100%;
height: 100%;
position:absolute;  				
}
.item-wrap-image {
width: 100%;
height: 100%;
position:relative;
border-radius: 3px;	
-webkit-clip-path: inset(8px 8px 8px 8px);
clip-path: inset(8px 8px 8px 8px);
-webkit-transition: 1s cubic-bezier(.075,.82,.165,1);
-moz-transition: 1s cubic-bezier(.075,.82,.165,1);
transition: 1s cubic-bezier(.075,.82,.165,1);		
}
.item:hover .item-wrap-image {		
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);		
}
.item-image {
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
width:100%;
height: 100%;
position:relative;
display:block;
z-index:100;
cursor:pointer;
background-color:#000;		
overflow:hidden;
}
.below-caption .item-caption {
z-index: 10;
position: absolute;
bottom: 40px;
height: auto;
padding:0 50px;
box-sizing: border-box;
width: 100%;
cursor:default;
pointer-events: none;
text-align:center;
}
.below-caption .item-title {		
margin: 0;
font-weight: 700;
font-size:48px;
transform: translateY(20px);
-webkit-transform: translateY(20px);
display: block;
position:relative;
color:#fff;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;		
}
.below-caption .item:hover .item-title {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.below-caption .item-cat {
display:block;
font-size: 12px;
font-weight: 600;
opacity: 1;
margin-left:2px;
line-height: 20px;
overflow:hidden;
-webkit-transform: translateY(30px);
transform: translateY(30px);
opacity:0;
color:#fff;
-webkit-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;		
}
.below-caption .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;
}
.centered-caption .item-caption-wrap {
display: table;
width: 100%;
height: 100%;
position: absolute;
top: 0;
pointer-events:none;
}
.centered-caption .item-caption {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.centered-caption .item-caption .item-title {
display:block;
font-weight: 700;
font-size:48px;
line-height:48px;
height:48px;
font-weight: 700;
opacity:1;
color:#FFF;
text-transform:none;
position:relative;
top:0px;
margin:auto;
display:table;
}
.centered-caption .item-caption .item-title span {
display: block;
float:left;
margin: 0;
min-width: 20px;
width:auto;
line-height:48px;
height:48px;
box-sizing: border-box;
opacity: 0;
color:#fff;
-webkit-text-stroke: 0px #fff;
-webkit-transform: translateY(100px) scaleY(2);
transform: translateY(100px) scaleY(2);
}
.centered-caption .item-cat {
display:block;
font-size: 14px;
font-weight: 600;
opacity: 1;
margin-left:2px;
margin-bottom:0;
line-height: 20px;
overflow:hidden;
color:#fff;
-webkit-transform: translateY(30px);
transform: translateY(30px);
opacity:0;	
} #project-nav {
height: 100vh;
width: 100%;
color: #000;
position: absolute;
margin-bottom: 0;
bottom: -100vh;
}
.light-content #project-nav {
color: #fff;
}
.next-project-wrap {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 3;
}
.next-project-image {
position: fixed;
top:50%;
opacity:0;
left: 0;
height: 100vh;
width: 100%;
overflow:hidden;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.next-project-image-bg {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100%;
background-size: cover;
background-position:center center;
background-repeat: no-repeat;
opacity:1;
-webkit-transform: scale(1.05) translateY(0%);
transform: scale(1.05) translateY(0%);
}
.next-project-image::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 );
}
.next-project-title {
display: table;
width: 100%;
max-width:1280px;
padding: 0 20px;
margin: 0 auto;
height: 100%;
position: relative;
box-sizing: border-box;
top:-40%;
opacity:0;
transform: scale(0.8);
}
.next-project-title .inner {
vertical-align: middle;
text-align:center;
}
.main-title {
font-weight: 700;
display:table;
margin:0 auto;
width:auto;
font-size:120px;
line-height:120px;
z-index:10;
color:#000;		
position:relative;
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
pointer-events:none;
}
.light-content .main-title {
color:#FFF;		
}
.main-title div {
display: inline-flex;
margin: 0 0.95vw;
float: none;
}
.main-title span {
display: block;
float:left;
margin: 0;
min-width: 10px;
width:auto;
line-height:120px;
height:120px;
box-sizing: border-box;
opacity: 0;
color:#000;
-webkit-text-stroke: 0px #fff;
-webkit-transform: translateY(200px) scaleY(2);
transform: translateY(200px) scaleY(2);
}
.light-content .main-title span {
color:#fff;
}
.next-title {
font-weight: 700;
display:table;
margin:0 auto;
width:100%;
font-size:120px;
line-height:120px;
z-index:10;
color:#000;		
position:absolute;
cursor:pointer;
left: 50%;
transform: translateX(-50%);
}
.light-content .next-title {
color:#FFF;		
}
.next-title div {
display: inline-flex;
margin: 0 10px;
float: none;
}
.next-title span {
display: inline-block;
margin: 0;
min-width: 10px;
width:auto;
line-height:120px;
height:120px;
box-sizing: border-box;
color:#000;
}
.light-content .next-title span {
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(150px);
-webkit-transform: translateY(150px);
opacity:0;
}
.light-content .next-subtitle-name {
color: #fff;
}
.load-no-ajax #project-nav .main-title {
pointer-events: auto;
} @media only screen and (max-width: 1466px) {
#filters-overlay .outer {
padding: 50px;
}
.portfolio-wrap {	
width: 70%;
}
.portfolio-wrap.grid-portfolio {	
width: 80%;
}
.grid-portfolio .item {
margin: 30px;
width: calc(50% - 60px);
height: 22vw;
}
.grid-portfolio .item.wide {
margin: 30px;
width: calc(100% - 60px);
height: 40vw;
}
.main-title, .next-title {
font-size: 80px;
line-height: 80px;
height:80px;
}
.next-title span, .main-title span { 
line-height:80px;
height:80px;
}
}
@media only screen and (max-width: 1024px) {	
#show-filters {
margin: 0 auto;
text-align: center;
display: table;
visibility:visible;
}
#filters-overlay .outer {
padding: 40px;
}
#filters li a {
font-size: 4vw;
line-height: 6vw;
}
.portfolio-wrap {	
width: 90%;
}
.portfolio-wrap.grid-portfolio {	
width: 90%;
}
.item {
height: 40vw;
}
.grid-portfolio .item {
margin: 30px;
width: calc(50% - 60px);
height: 26vw;
}
.grid-portfolio .item.wide {
margin: 30px;
width: calc(100% - 60px);
height: 48vw;
}
.below-caption .item-title {
font-size: 40px;
}
.main-title, .next-title {
font-size: 60px;
line-height: 60px;
height:60px;
}
.next-title span, .main-title span { 
line-height:60px;
height:60px;
}
}
@media only screen and (max-width: 767px) {
#filters-overlay .outer {
padding: 30px;
}
#filters li a {
font-size: 5vw;
line-height: 7vw;
}
.portfolio-wrap {	
width: 100%;
}
.portfolio-wrap.grid-portfolio {	
width: 100%;
}
.item {
height: 45vw;
margin: 50px;
width: calc(100% - 100px);
}
.grid-portfolio .item {
margin: 30px;
width: calc(100% - 60px);
height: 52vw;
}
.grid-portfolio .item.wide {
margin: 30px;
width: calc(100% - 60px);
height: 52vw;
}
.below-caption .item-title {
font-size: 36px;
}
.below-caption .item-cat {
margin-bottom:0;
}
.centered-caption .item-caption .item-title {
font-size: 36px;
line-height: 36px;
height: 36px;	
}
.centered-caption .item-caption .item-title span {
min-width: 10px;
line-height: 36px;
height: 36px;
}
.main-title, .next-title {
font-size: 50px;
line-height: 50px;
height:50px;
}
.next-title span, .main-title span { 
line-height:50px;
height:50px;
}
.main-title span {
min-width: 10px;
}
}
@media only screen and (max-width: 479px) {
#filters-overlay .outer {
padding: 20px;
}
#filters li a {
font-size: 7vw;
line-height: 9vw;
}
.item {
height: 50vw;
margin: 20px;
width: calc(100% - 40px);
}
.grid-portfolio .item {
margin: 20px;
width: calc(100% - 40px);
height: 52vw;
}
.grid-portfolio .item.wide {
margin: 20px;
width: calc(100% - 40px);
height: 52vw;
}
.below-caption .item-title {
font-size: 30px;
}
.centered-caption .item-caption .item-title {
font-size: 30px;
line-height: 30px;
height: 30px;	
}
.centered-caption .item-caption .item-title span {
min-width: 10px;
line-height: 30px;
height: 30px;
}
.main-title div {
display: inline-flex;
margin: 0 10px;
float: none;
}
}