.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  {
width: 80px;
height: 80px;
float: left;
top: 0px;
right: -10px;
display: flex;
position: relative;
justify-content: center;
align-items: center;
cursor: pointer;		
}
#show-filters.active {
visibility:hidden;
pointer-events:none;
}
#show-filters-wrap {
width: 30px;
height: 30px;
position: relative;
margin: 0 auto;		
z-index:2;
pointer-events: none;
}
#show-filters span {
background-color: #000;
width: 5px;
height: 5px;
border-radius: 6px;
display: block;
float: left;
margin: 12px 2px;
line-height: 30px;
transform:scale(0);
-webkit-transform:scale(0);
-webkit-transition: transform 0.3s ease-out 0.5s;
transition: transform 0.3s ease-out 0.5s;
}
#show-filters span:nth-child(2) {
-webkit-transition: transform 0.3s ease-out 0.55s;
transition: transform 0.3s ease-out 0.55s;
}
#show-filters span:nth-child(3) {
-webkit-transition: transform 0.3s ease-out 0.6s;
transition: transform 0.3s ease-out 0.6s;
}
.light-content #show-filters span {
background-color: #fff;
}
.transparent #show-filters span {
transform:scale(1);
-webkit-transform:scale(1);
opacity:1;
}
#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-bottom:60px;
box-sizing: border-box;
}
#filters-overlay .inner {
vertical-align: bottom;
position: relative;
pointer-events: none;
text-align: left;
}
.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;
line-height: 30px;
opacity: 1;
position: relative;
margin: 5px 0;
opacity: 0;
overflow:hidden;
}
#filters li a {
display: inline-block;
color: transparent;
-webkit-text-stroke: 1px #000;
font-weight: 700;
font-family: 'Poppins', sans-serif;
font-size: 48px;
line-height: 60px;
z-index: 15;
position: relative;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.light-content #filters li a {
color:transparent;
-webkit-text-stroke: 1px #fff;
}
#filters:hover li a {
opacity:0.3;
}
#filters li a:hover {
color:#000;
opacity:1;
}
.light-content #filters li a:hover {
color:#fff;
} .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: 100%;		
max-width:none;
padding:0 50px;
box-sizing: border-box;
min-height:50vh;
}
#portfolio-wrap.boxed {	
max-width:1220px;
padding:0;
}
#portfolio {
position: relative;
margin: 0 auto;
padding: 0;
padding-bottom:100px;
box-sizing: border-box;
-webkit-transition: height 0.5s ease-out;
transition: height 0.5s ease-out;
overflow:hidden;
}
#portfolio:after {
content:""; 
display:table; 
clear:both;
}
.item {
display: block;
position: relative;
box-sizing: border-box;
z-index: 0;
width: calc(50% - 40px);
height: 28vw;
margin: 60px 20px;
}
#portfolio-wrap.boxed .item {
height: 380px;
}
.item.wide {
width: calc(100% - 40px);
height: 45vw;
margin: 60px 20px;
}
#portfolio-wrap.boxed .item.wide {
height: 680px;
}
.item-appear {
display: block;
position: absolute;
box-sizing: border-box;
z-index: 0;
width: 100%;
height: 100%;
opacity: 0.0001;
-webkit-transition:translateY(220px);
transform: translateY(220px);
-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);		
}
.item-appear.active{
opacity: 1;
-webkit-transition:translateY(0px);
transform: translateY(0px);	
}
.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;  				
}
.thumb-no-ajax .item-wrap {
z-index:10;		
}
.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;	
}
.item-wrap-image .hero-video-wrapper video.bgvid {
height: 100%;
}
.below-caption .item-caption {
z-index: 10;
position: absolute;
bottom: -60px;
height: 60px;
padding-top: 15px;
box-sizing: border-box;
width: 100%;
cursor:default;
text-align:center
}
.below-caption .item-title {
font-size: 20px;
line-height: 30px;
margin: 0;
font-weight: 700;
display: block;
position:relative;
}
.below-caption .item-cat {
display:block;
font-size: 12px;
font-weight: 500;
opacity: 0.3;
line-height: 20px;
overflow:hidden;
}
.below-caption .item-cat span {
position: relative;
display: block;
width:auto;
-webkit-transition: -webkit-transform 0.2s;
transition: transform 0.2s;
transform-origin: 100% 0%;
}
.below-caption .item-cat span::before {
position: absolute;
top: 100%;
width:100%;
left:0;
content: attr(data-hover);
}
.below-caption .item:hover .item-cat span, .below-caption .item.above .item-cat span {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
transform-origin: 0% 0%;
} @media only screen and (max-width: 1466px) {
#filters-overlay .outer {
padding: 60px;
padding-bottom:60px;
}
#portfolio-wrap, #portfolio-wrap.boxed  {
box-sizing: border-box;
padding: 0 30px;
}
.item:nth-child(1) .item-appear, .item:nth-child(2) .item-appear {
opacity: 1;
-webkit-transition:translateY(0px) scaleY(1);
transform: translateY(0px) scaleY(1);	
}
}
@media only screen and (max-width: 1320px) {	
.item {
height: 28vw;
}
}
@media only screen and (max-width: 1024px) {	
#show-filters {
right: -40px;
}
#filters-overlay .outer {
padding: 50px;
padding-bottom:40px;
}
#portfolio-wrap, #portfolio-wrap.boxed  {
box-sizing: border-box;
padding: 0 40px;
}
.item {
width: calc(50% - 20px);
margin: 50px 10px;
}
.item.wide {
margin: 50px 10px;
height: 50vw;
width:calc(100% - 20px);
}
.item-wrap-image {
-webkit-clip-path: inset(0px 0px 0px 0px);
clip-path: inset(0px 0px 0px 0px);
}
.below-caption .item-caption {
padding-top: 20px;
}
}
@media only screen and (max-width: 767px) {
#show-filters {
right: -30px;
}
#filters-overlay .outer {
padding: 40px;
padding-bottom:40px;
}
#portfolio-wrap, #portfolio-wrap.boxed  {
box-sizing: border-box;
padding: 0 30px;
margin-top:20px;
}
#portfolio {
padding-bottom:60px;
}
.item {
width: calc(100% - 20px);
height: 50vw;
margin: 50px 10px;
}
}
@media only screen and (max-width: 479px) {
#show-filters {
right: -20px;
}
#filters-overlay .outer {
padding: 20px;
padding-bottom:40px;
}
#portfolio-wrap, #portfolio-wrap.boxed  {
margin-top:0px;
padding: 0 20px;
}
#portfolio {
padding-bottom:30px;
}
.item {
width: 100%;
height: 50vw;
margin: 50px 0px;
}
.below-caption .item-caption {
padding-top: 20px;
text-align:center;
}
.below-caption .item-title::after {
display:none;
}
.below-caption .item-title {
float:none;
}
.below-caption .item-cat {
margin-left: 0px;	
font-size:12px;
float:none;
}
.below-caption .item-cat span {
width:auto;
}
}