.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 {
margin: 0 auto;
text-align: center;
display: none;
visibility:hidden
}
#sidebar-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;
}
#sidebar-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-sidebar {
position: fixed !important;
height:100vh;
width:100vw;
top:0;
left:0;
right:0;
bottom:0;
}
#sidebar-overlay .outer {
width: 100%;
margin: 0 auto;
padding: 80px;
box-sizing: border-box;
}
#sidebar-overlay .inner {
vertical-align: middle;
position: relative;
pointer-events: none;
text-align: left;
}
#sidebar-overlay.right .inner {
text-align: right;
}
.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;
text-align: left;
overflow:hidden;
}
#sidebar-overlay.right #filters li {
text-align: right;
}
#filters li a {
display: inline-block;
color: #000;
font-weight: 700;
font-family: 'Poppins', sans-serif;
font-size: 14px;
line-height: 30px;
text-transform:uppercase;
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:#fff;
}
#filters:hover li a {
opacity:0.3;
}
#filters li a:hover {
color:#000;
opacity:1;
}
.light-content #filters li a:hover {
color:#fff;
}
#filters li a::before {
position: absolute;
top: 100%;
width:100%;
left:0;
content: attr(data-hover);
}
#filters li a:hover {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
} .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;
box-sizing: border-box;
margin-top:90px;
min-height:50vh;
padding:0 60px;
}
#portfolio-wrap.boxed {	
max-width:1320px;
padding:0;
}
#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;
width: calc(50% - 40px);
height: 28vw;
margin: 50px 20px;
}
#portfolio-wrap.boxed .item {
height: 380px;
}	
.item.wide {
width: calc(100% - 40px);
height: 45vw;		
}
#portfolio-wrap.boxed .item.wide {
height: 680px;
}
.item-appear{
display: block;
position: absoluter;
box-sizing: border-box;
z-index: 0;
width: 100%;
height: 100%;
opacity: 0.0001;
-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);		
}
.item:nth-child(2n+0) .item-appear {
-webkit-transition-delay:0.15s;
transition-delay:0.15s;
}
.item-appear.active{
opacity: 1;
-webkit-transition: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: -60px;
height: 60px;
padding-top: 25px;
padding-left:30px;
box-sizing: border-box;
width: 100%;
cursor:default;
}
.below-caption .item-title {
font-size: 16px;
line-height: 20px;
margin: 0;
font-weight: 700;
display: block;
float:left;
position:relative;
}
.below-caption .item-title::after {
content: '';
width: 20px;
height: 1px;
background-color: #333;
position: absolute;
top: 9px;
right: -40px;
}
.below-caption .item-cat {
display:block;
float:left;
font-size: 14px;
font-weight: 500;
opacity: 0.3;
line-height: 20px;
overflow:hidden;
margin-left: 55px;
}
.below-caption .item-cat span {
position: relative;
display: block;
width:120px;
-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%;
} #project-nav {
height: 50vh;
width: 100%;
color: #000;
position: absolute;
margin-bottom: 0;	
bottom: -45vh;	
}
.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: absolute;
top: 100%;
left: 0;
height: 100vh;
width: 100%;
overflow:hidden;
}
.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%;
width:auto;
padding: 0 30px;
margin: 0 auto;
height: 100%;
position: relative;
box-sizing: border-box;
transform: translateY(-40%);
-webkit-transform: translateY(-40%);
}
.next-project-title .inner {
vertical-align: bottom;
text-align:center;
}
.main-title {
font-weight: 700;
font-family: 'Poppins', sans-serif;
position: relative;
display:block;
margin-bottom:0px;
display:inline-block;
vertical-align: top;
width:auto;
font-size:3.5vw;
line-height:90px;
}
.main-title span {
display: block;
float:left;
margin: 0;
min-width: 20px;
width:auto;
line-height:90px;
height:90px;
box-sizing: border-box;
}
.light-content .main-title {
color:transparent;
}
.light-content .main-title span {
color:transparent;
-webkit-text-stroke: 1px #fff;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.light-content .main-title:hover span, .page-is-changing .light-content .main-title span {
color:#fff;
-webkit-text-stroke: 1px transparent;
}
.main-subtitle {
margin-bottom: 0;
opacity: 1;
line-height: 20px;
height:20px;
overflow:hidden;
position: relative;
left: 0;
display: block;
font-size:14px;
font-weight: 600;
font-family: 'Poppins', sans-serif;
transform: translateY(-10px);
-webkit-transform: translateY(-10px);
}
.subtitle-name {
transform: translateY(-20px);
-webkit-transform: translateY(-20px);
opacity:0;
}
.light-content .main-subtitle {
color: #fff;
} @media only screen and (max-width: 1466px) {
#sidebar-overlay .outer {
padding: 50px;
}
#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);	
}
.main-title {
font-size: 4.5vw;
line-height: 70px;
}
.main-title span {
line-height: 70px;
height: 70px;
}
}
@media only screen and (max-width: 1320px) {	
#portfolio-wrap .item, #portfolio-wrap.boxed .item {
height: 28vw;
}
#portfolio-wrap .item.wide, #portfolio-wrap.boxed .item.wide {
height: 50vw;
}
}
@media only screen and (max-width: 1024px) {	
#show-filters {
margin: 0 auto;
margin-top:20px;
text-align: center;
display: table;
visibility:visible;
}
#sidebar-overlay .outer {
padding: 20px;
}
#sidebar-overlay.right .inner, #sidebar-overlay.left #filters li, #sidebar-overlay.right #filters li {
text-align: center;
}
#portfolio-wrap, #portfolio-wrap.boxed {
box-sizing: border-box;
padding: 0 30px;
}
#portfolio-wrap .item, #portfolio-wrap.boxed .item {
width: calc(50% - 20px);
margin: 50px 10px;
}
#portfolio-wrap .item.wide, #portfolio-wrap.boxed .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;
padding-left: 20px;
}
.main-title {
font-size: 5.5vw;
}
}
@media only screen and (max-width: 767px) {
#portfolio-wrap, #portfolio-wrap.boxed {
box-sizing: border-box;
padding: 0 20px;
margin-top:20px;
}
#portfolio-wrap .item, #portfolio-wrap.boxed .item {
width: calc(100% - 20px);
height: 50vw;
margin: 50px 10px;
}
.main-title {
font-size: 7vw;
}
.main-title span {
min-width: 10px;
}
}
@media only screen and (max-width: 479px) {
#portfolio-wrap, #portfolio-wrap.boxed {
margin-top:0px;
}
#portfolio-wrap .item, #portfolio-wrap.boxed .item {
width: 100%;
height: 50vw;
margin: 50px 0px;
}
.below-caption .item-caption {
padding-top: 20px;
padding-left:0px;
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;
}
.main-title {
font-size: 9vw;
}
.main-title span {
min-width: 10px;
}
.next-project-title {
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
}