#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;
}

.hp-load-project-thumb #app, .hp-load-project-thumb-with-title #app, .hp-load-project-thumb-with-title-and-scale #app {
    opacity:1;
}

.hp-grid__item-img--large {
    pointer-events: none;
    position: absolute ;
    opacity: 0;
}

.hp-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 #hp_main-page-content {
    opacity:1;
}


.hp-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;
}


.hp-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;
}

.hp-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: '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;
}

.hp-light-content #show-filters {
    color:#fff;
}

#show-filters.enabled {
    pointer-events:initial;
}

.hp-show-filters-wrap {
    width: 80px;
    height: 80px;
    float: right;
    top: 0px;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.hp-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-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;
}

.hp-light-content #filters li a {
    color: #fff;
}

#filters:hover li a {
    opacity:0.4;
}

#filters li a:hover {
    opacity:1;
}


/*--------------------------------------------------
09. Portfolio Isotope Transitions
---------------------------------------------------*/

.hp-isotope, .hp-isotope .hp-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;
}

.hp-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;
}

.hp-isotope .hp-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
---------------------------------------------------*/


.hp-scale-up .hp-portfolio-wrap {
    pointer-events:none;
}

.hp-portfolio-wrap {
    position:relative;
    margin:0 auto;
    width: 100%;
    padding:0;
    box-sizing:border-box;
    min-height:50vh;
}

.hp-portfolio {
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
    -webkit-transition: height 0.5s ease-out;
    transition: height 0.5s ease-out;
}

.hp-portfolio:after {
    content:"";
    display:table;
    clear:both;
}

.hp-portfolio .hp-item:last-child {
    margin-bottom:0!important;
}

/*-- Spaced Grid --*/

.hp-landing-grid .hp-button-wrap {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
    position: absolute;
    left: calc(100% - (50% - 450px));
    bottom: 35px;
    height: 60px;
    float: none;
    top: auto;
}

.hp-landing-grid:before {
    content:"";
    position:absolute;
    bottom:0;
    width:100%;
    height:20vw;
    background-color:#eee;
    z-index:0;
    -webkit-transition: opacity 0.15s ease-out;
    transition: opacity 0.15s ease-out;
}

.hp-light-content .hp-landing-grid:before {
    background-color:rgb(34, 34, 34);
}

.hp-show-loader .hp-landing-grid:before {
    opacity:0;
}

.hp-item {
    display: block;
    position: relative;
    box-sizing: border-box;
    z-index: 0;
    margin:0px;
    width: 50%;
    height: 32vw;

}

.hp-landing-grid .hp-item:nth-child(1) {
    width: calc(50% - 390px);
    margin-top:20vw;
    height: 20vw;
}

.hp-landing-grid .hp-item:nth-child(2) {
    width: calc(100% - (50% - 390px));
    margin-top:0;
    height: 40vw;
}

.hp-landing-grid .hp-item:nth-last-child(2) {
    width: calc(100% - (50% - 390px));
    margin-top:0;
    height: 40vw;
}

.hp-landing-grid .hp-item:nth-last-child(1) {
    width: calc(50% - 390px);
    margin-top:0;
    height: 20vw;
}

.hp-metro-grid .hp-item:nth-child(1) {
    margin-top:20vw!important;
    height: 20vw!important;
}

.hp-metro-grid .hp-item:nth-of-type(6n+1) {
    width: calc(50% - 390px);
    margin-top:0;
    height: 40vw;
}

.hp-metro-grid .hp-item:nth-of-type(6n+2) {
    width: calc(100% - (50% - 390px));
    margin-top:0;
    height: 40vw;
}

.hp-metro-grid .hp-item:nth-of-type(6n+3) {
    margin:0px;
    width: 50%;
    height: 32vw;
}

.hp-metro-grid .hp-item:nth-of-type(6n+4) {
    margin:0px;
    width: 50%;
    height: 32vw;
}

.hp-metro-grid .hp-item:nth-of-type(6n+5) {
    width: calc(100% - (50% - 390px));
    margin-top:0;
    height: 40vw;
}

.hp-metro-grid .hp-item:nth-of-type(6n+6) {
    width: calc(50% - 390px);
    margin-top:0;
    height: 40vw;
}

.hp-metro-grid .hp-item:nth-of-type(6n+6):nth-last-child(1) {
    margin-top:0;
    height: 20vw;
}

.hp-item-parallax {
    height: 100%;
    width: 100%;
    position: absolute;
}

.hp-item-appear {
    display: block;
    position: relative;
    box-sizing: border-box;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow:hidden;

}

.hp-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;
}

.hp-load-project-thumb .hp-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;
}

.hp-item-content {
    width: 100%;
    height: 100%;
    position:relative;
    opacity:1;
}

.hp-fade-scalein-effect .hp-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;
}

.hp-fade-scalein-effect .hp-item.hp-active .hp-item-content {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    position:absolute;
    right:0;
}

.hp-fade-scaleout-effect .hp-item-content {
    opacity:0;
    opacity:1;
    -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;
}

.hp-fade-scaleout-effect .hp-item.hp-active .hp-item-content {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    position:absolute;
    right:0;
}

.hp-width-scale-effect .hp-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);
}

.hp-width-scale-effect .hp-item.hp-active .hp-item-content {
    -webkit-transform: scale(1);
    transform: scale(1);
}

.hp-width-scale-effect .hp-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);
}

.hp-width-scale-effect .hp-item.hp-active .hp-item-content:after {
    width: 0;
}

.hp-height-scale-effect .hp-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);
}

.hp-height-scale-effect .hp-item.hp-active .hp-item-content {
    opacity: 1;
    -webkit-transition:translateY(0px) scaleY(1);
    transform: translateY(0px) scaleY(1);
}

.hp-item-wrap {
    width: 100%;
    height: 100%;
    position:absolute;
    left: 0;
}

.hp-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;
}

.hp-item:hover .hp-item-appear .hp-item-wrap-image, .hp-above  .hp-item-wrap-image {
    -webkit-transform:scale(1);
    transform: scale(1);
}

.hp-item-image {
    width:100%;
    height: 100%;
    position:relative;
    display:block;
    z-index:100;
    object-position: center;
    object-fit: cover;
}

.hp-portfolio .hp-item-image {
    cursor:pointer;
}

.hp-above.hp-item {
    opacity: 1 !important;
}

.hp-item-caption {
    z-index: 10;
    position: absolute;
    bottom: 0px;
    height: auto;
    padding:50px 60px;
    box-sizing: border-box;
    width: 100%;
    cursor:default;
    pointer-events: none;
    opacity:0;
    opacity:1;
    -webkit-transition: all 0.2s ease-out 0.4s;
    transition: all 0.2s ease-out 0.4s;
}

.hp-item.hp-active .hp-item-caption {
    opacity: 1;
}

.hp-item-title {
    margin: 0;
    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;
}

.hp-light-content .hp-item-title {
    color:#000;
}

.hp-change-header .hp-item-title {
    color:#fff;
}

.hp-light-content .hp-change-header .hp-item-title {
    color:#fff;
}

.hp-item:hover .hp-item-title {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}



.hp-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:#000;
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}

.hp-change-header .hp-item-cat {
    color:#fff;
}

.hp-light-content .hp-change-header .hp-item-cat {
    color:#fff;
}

.hp-light-content .hp-item-cat {
    color:#000;
}

.hp-item:hover .hp-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;
}


/*--------------------------------------------------
Sided Grid
---------------------------------------------------*/
.hp-sided-grid .hp-item {
    display: block;
    position: relative;
    box-sizing: border-box;
    z-index: 0;
    margin: 0px;
    width: 50%;
    height: 32vw;
}
.hp-sided-grid .hp-item {
    display: block;
    position: relative;
    box-sizing: border-box;
    z-index: 0;
    margin: 0px;
        margin-bottom: 0px;
    margin-bottom: 0px;
    margin-bottom: 100px;
    padding-right: 35%;
    padding-left: 0;
    width: 100%;
    height: 32vw;
}
.hp-sided-grid .hp-item img{
    padding-right: 35%;
    padding-left: 0;
}
.hp-sided-grid .hp-item:nth-of-type(2n+2){
    padding-left: 35%;
    padding-right: 0;
}

.hp-sided-grid .hp-item-caption-wrapper {
    width: 35%;
    position: absolute;
    height: 100%;
    top: 0;
    display: table;
    pointer-events: none;
    box-sizing: border-box;
}
.hp-sided-grid .hp-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;
}
.hp-sided-grid .hp-item-title {
    font-size: 2rem;
    line-height: 3rem;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
}
.hp-sided-grid .hp-item-cat {
    opacity: 1;
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
}
.hp-sided-grid .hp-item:nth-of-type(2n+1) .hp-item-caption-wrapper {
    right: 0;
    text-align: left;
    padding-left: 40px;
}
.hp-sided-grid .hp-item:nth-of-type(2n+2) .hp-item-caption-wrapper {
    right: auto;
    text-align: right;
    padding-right: 40px;
    left: 0;
}




/*--------------------------------------------------
Project Page Navigation
---------------------------------------------------*/

#project-nav {
    height: 100vh;
    width: 100%;
    color: #000;
    position: absolute;
    margin-bottom: 0;
    bottom: -100vh;
    overflow:hidden;
}

.hp-light-content #project-nav {
    color: #fff;
}

.hp-next-project-wrap {
    display: table;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    opacity:0;
    top:-40%;
    z-index:10;
}

.hp-next-project-image-wrapper {
    background-color: #171717;
    position: fixed;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
}

.hp-next-project-image {
    position: fixed;
    top:60%;
    opacity:0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow:hidden;
}

.hp-load-project-thumb-with-title .hp-next-project-image {
    z-index:10;
}

.hp-next-project-image.hp-temporary {
    top:0!important;
}

.hp-next-project-image.hp-visible {
    opacity:1!important;
}

.hp-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);
}

.hp-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);
}

.hp-app-canvas .hp-next-project-title {
    padding: 0px;
    max-width:none;
}

.hp-next-project-caption {
    display: table-cell;
    vertical-align: middle;
    box-sizing: border-box;
    vertical-align: middle;
    text-align:left;

}

.hp-next-caption-wrapper {
    display: table;
    margin: 0 auto;
    width: 100%;
    position:relative;
    padding: 20px;
    padding-left:calc(50% - 390px);
    max-width:none;
    box-sizing:border-box;
}

#project-nav .hp-next-ajax-link-project {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index:10;
}

.hp-next-caption {
    display:block;
    position:relative;
    z-index:1;
}

.hp-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;
}

.hp-light-content .hp-main-title {
    color:#fff;
}

.hp-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;
}

.hp-light-content .hp-main-title span {
    background-image: linear-gradient(transparent calc(100% - 3px), #fff 1px);
}

  .hp-main-title:hover span {
      background-size: 100%;
}

.hp-page-is-changing .hp-main-title span {
    background-size: 0;
    transition: 0.3s ease;
}

.hp-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);
}

.hp-light-content .hp-next-title {
    color:#FFF;
}

.hp-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;
}

.hp-next-subtitle-name {
    transform: translateY(50px) rotate(-7deg);
    -webkit-transform: translateY(50px) rotate(-7deg);
    opacity:0;
}

.hp-light-content .hp-next-subtitle-name {
    color: #fff;
}




/*--------------------------------------------------
Responsive
---------------------------------------------------*/




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

#filters-overlay .hp-outer {
    padding: 60px;
}

#show-filters {
    left: 26px;
    bottom: 20px;
}

#main .hp-landing-grid .hp-large-btn .hp-button-text {
    font-size: 12px;
    font-weight: 600;
    margin: 15px 0;
}


}


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

.hp-landing-grid::before {
    height: calc(50vw + 60px);
}

.hp-landing-grid .hp-item:nth-child(1) {
    width: calc(100% - (50% - 390px));
    margin-top: 0;
    margin-left:calc(50% - 390px);
    height: 50vw;
}

.hp-landing-grid .hp-item:nth-child(2) {
    margin: 0px;
    width: 70%;
    height: 40vw;
}

.hp-landing-grid .hp-item:nth-last-child(2) {
    margin: 0px;
    width: 30%;
    height: 40vw;
}

.hp-landing-grid .hp-item:nth-last-child(1) {
    width: calc(100% - (50% - 390px));
    margin-top: 0;
    height: 50vw;
}

.hp-metro-grid .hp-item:nth-child(1) {
    width: calc(100% - (50% - 390px))!important;
    margin-top: 0!important;
    margin-left:calc(50% - 390px)!important;
    height: 50vw!important;
}

.hp-metro-grid .hp-item:nth-of-type(6n+1) {
    margin: 0px;
    width: 30%;
    height: 40vw;
}

.hp-metro-grid .hp-item:nth-of-type(6n+2) {
    margin: 0px;
    width: 70%;
    height: 40vw;
}

.hp-metro-grid .hp-item:nth-of-type(6n+3) {
    margin: 0px;
    width: 30%;
    height: 40vw;
}

.hp-metro-grid .hp-item:nth-of-type(6n+4) {
    margin: 0px;
    width: 30%;
    height: 40vw;
}

.hp-metro-grid .hp-item:nth-of-type(6n+5) {
    margin: 0px;
    width: 70%;
    height: 40vw;
}

.hp-metro-grid .hp-item:nth-of-type(6n+6) {
    margin: 0px;
    width: 70%;
    height: 40vw;
}

.hp-metro-grid .hp-item:nth-of-type(6n+6):nth-last-child(1) {
    width: calc(100% - (50% - 390px));
    margin-top: 0;
    height: 50vw;
}

.hp-see-all-works {
    display: table;
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0 20px;
    box-sizing: border-box;
}

.hp-landing-grid .hp-button-wrap {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
    position: relative;
    left: auto;
    bottom: auto;
    height: 60px;
    float: none;
    top: 20px;
}

}

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

#filters-overlay .hp-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;
}

.hp-show-filters-wrap {
    width: 46px;
    height: 46px;
}

.hp-landing-grid .hp-item:nth-child(1) {
    width: 100%;
    margin-top: 0;
    margin-left:0;
    height: 50vw;
}

.hp-landing-grid .hp-item:nth-child(2) {
    width: 50%;
    margin-top: 0;
    height: 30vw;
}

.hp-landing-grid .hp-item:nth-last-child(2) {
    width: 50%;
    margin-top: 0;
    height: 30vw;
}

.hp-landing-grid .hp-item:nth-last-child(1) {
    width: 100%;
    margin-top: 0;
    margin-left:0;
    height: 50vw;
}

.hp-metro-grid .hp-item:nth-child(1) {
    width: 100%!important;
    margin-top: 0!important;
    margin-left:0!important;
    height: 50vw!important;
}

.hp-metro-grid .hp-item {
    width: 50%!important;
    margin-top: 0!important;
    height: 30vw!important;
}

.hp-metro-grid .hp-item:nth-of-type(6n+6):nth-last-child(1) {
    width: 100%!important;
    margin-top: 0!important;
    margin-left:0!important;
    height: 50vw!important;
}

.hp-item-caption {
    padding: 30px 40px;
}

.hp-see-all-works {
    padding: 0px 40px;
}

.hp-next-caption-wrapper {
    padding: 0 40px;
    max-width: 860px;
}

}

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

#filters-overlay .outer {
    padding: 30px;
    padding-bottom:80px;
}

#show-filters {
    left: 12px;
    bottom: 10px;
}

.hp-landing-grid .hp-item, .hp-metro-grid .hp-item, .hp-metro-grid .hp-item:nth-child(1), .hp-metro-grid .hp-item:nth-of-type(6n+6):nth-last-child(1) {
    width: 100%!important;
    margin-top: 0!important;
    height: 64vw!important;
}

.hp-item-caption {
    padding: 30px 30px;
}

.hp-see-all-works {
    padding: 0px 30px;
}

.hp-next-caption-wrapper {
    padding: 0 30px;
}

}

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

#filters-overlay .hp-outer {
    padding: 20px;
    padding-bottom:80px;
}

#show-filters {
    left: 2px;
    bottom: 2px;
}

.hp-portfolio {
    overflow:hidden;
}

.hp-item-caption {
    padding: 30px 20px;
}

.hp-item-title {
    font-size: 18px;
}

.hp-see-all-works {
    padding: 0px 20px;
}

.hp-next-caption-wrapper {
    padding: 0 20px;
}

}
.hp-single-image, .hp-swiper-container {
margin-bottom: 50px;
}


#home #main-page-content {
    width: 100%;
    max-width: none;
    padding: 0;
}

.home .hp-item-title,
.home .hp-item-cat {
		@include text-shadow;
	}