@font-face {
    font-family: main-bold;
    src: url(fonts/MinionPro-Bold.woff2);
}

@font-face {
    font-family: main-medium;
    src: url(fonts/MinionPro-Medium.woff2;)
}

@font-face {
    font-family: main-regular;
    src: url(fonts/MinionPro-Bold.woff2);
}

@font-face {
    font-family: main-semibold;
    src: url(fonts/MinionPro-Semibold.woff2);
}

@font-face {
    font-family: LexendDeca-Regular;
    src: url(fonts/LexendDeca-Regular.woff2);
}

@font-face {
    font-family: LaLuxesSerif;
    src: url(fonts/LaLuxesSerif.woff2);
}


#portfolio-categories {
    width: 100%;
    line-height: 15px;
    display: flex;
    position: relative;
    top: 5px;
    padding-bottom: 60px;
    border-radius: 5px;
    transition: 1450ms all ease-in;
    justify-content: center;
    padding-top: 30px;

}

.open-filter {
    max-width: 78% !important;
    height: auto;
}

.alignright {
    background: #2d2d2d;
    background-image: -webkit-linear-gradient(top, #3d3d3d, #272727);
    display: flex;
    align-items: center;
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
    min-height: 25px;


}

#filter-btn span {
    /*background: url('https://pexetothemes.com/demos/photolux_wp/wp-content/themes/photolux/images/filter_icon.png') no-repeat center left;*/
    /*padding-left: 18px;*/
    display: block;
    line-height: 12px;
    color: #FFF;
    font-family: 'main-boldpoppins';
}

#portfolio-categories ul {
    margin-bottom: 0;
    height: 0;
    min-height: 40px;
    max-width: 100%;
    display: flex;
    list-style-type: none;
    background: #2d2d2d;
    text-transform: capitalize;
    text-shadow: -1px -1px 1px rgb(0 0 0 / 80%);
    background: #2d2d2d;
    background-image: -webkit-linear-gradient(top, #3d3d3d, #272727);
    transition: .5s;
    padding: 0;
    overflow: hidden;
    align-items: center;

}

/* .change-size{
    font-size: 13px !important;
} */
#portfolio-categories ul li, #showcase-categories ul li {
    color: white;
    padding: 5px 11px 5px 11px;
    font-size: 16px;
    transition: 0.3s;
    font-family: 'main-mediumpoppins';

}

#portfolio-categories ul li:hover {

    opacity: 0.8;
}

#portfolio-categories ul li:active {
    text-shadow: -1px -1px 1px rgb(0 0 0 / 80%);
    background: url(images/top_navigation_gradient.png) repeat-x #0f0f0f;
    box-shadow: 0px 1px 0px rgb(255 255 255 / 3%) inset;
}

.masonry-brick {
    width: 290px;
    margin-bottom: 5px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    opacity: 0;
}

.masonry-brick.is-visible {
    animation: Items .6s ease-in-out forwards;
}

@keyframes Items {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

.masonry-brick img {
    max-width: 100%;
}

.content-box {
    float: left;
    margin: 0 7px 7px 0;
    background: #fff;
}

.content-box h2 {
    text-transform: uppercase;
    color: #262626;
    margin: 0;
    padding-bottom: 8px;
    font-size: 15px;
    font-family: LexendDeca-Regular;
}

.content-box .info {
    font-size: 12px;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: normal;
    padding: 10px 0 0px;
    color: #b5b5b5;
    font-family: main-regular;
}

.content-box-content {
    text-align: center;
}

.portfolio-more {
    width: 100%;
    height: calc(100% - 61px);
    background: url(https://pexetothemes.com/demos/photolux_wp/wp-content/themes/photolux/images/box-hover.png) no-repeat center;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
    opacity: 0;

}

.portfolio-more .portfolio-icon {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: url(https://pexetothemes.com/demos/photolux_wp/wp-content/themes/photolux/images/box-hover-plus.png) no-repeat center;
    opacity: 1;
}

.content-box:hover .portfolio-more {
    opacity: 1 !important;
}

.wrapper {
    background-color: #fff;
    position: relative;
    overflow: hidden;
    padding-top: 20px;
    min-height: 700px;
}


.preview-description {
    min-height: 187px;
    overflow: auto;
    padding: 0px;
    width: 270px;
}

.preview-content {

    position: relative;
    background-color: #2b2b2b;
    padding: 20px 20px 40px;
    max-height: 600px;
    height: 100%;

    box-sizing: border-box;
}

.preview-text {
    max-height: 100%;
    overflow-y: auto;
}

.preview-text p {
    color: #cbcbcb;
    line-height: 1.7em;
    font-size: 15px;
    font-family: main-semibold;

}

.preview-text h2 {

    color: #fff;
    line-height: 1.5em;
    margin-top: 0;
    font-weight: 100;
    font-size: 24px;
    font-family: main-bold;
}

.preview-container {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 100%;
    width: 90%;
    margin: 0 auto;

    padding-bottom: 10px;

}

.back-btn {
    position: absolute;
    border-bottom: 1px solid #1f1f1f;
    text-align: center;
    cursor: pointer;
    background-image: url(https://pexetothemes.com/demos/photolux_wp/wp-content/themes/photolux/images/pattern.png);
}

.back-btn-start {
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 34px;
    text-transform: uppercase;
}

.back-btn-end {
    right: 0%;
    width: 120px;
    bottom: 6% !important;
    padding: 5px 10px 5px 10px;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
    background: url(https://pexetothemes.com/demos/photolux_wp/wp-content/themes/photolux/images/pattern.png) repeat rgba(0, 0, 0, 0.5);
}

.back-btn span {
    position: relative;
    padding-left: 20px;
    background: url(https://pexetothemes.com/demos/photolux_wp/wp-content/themes/photolux/images/back_arrow.png) no-repeat left center;
    color: #cbcbcb !important;
    font-size: 10px;

}

.back-btn-start span {
    top: 6px;
    position: relative;
    padding-left: 20px;
    background: url(https://pexetothemes.com/demos/photolux_wp/wp-content/themes/photolux/images/back_arrow.png) no-repeat left center;
    color: #cbcbcb !important;
    font-size: 15px;

}


.post-info {
    color: #b5b5b5;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%;

}

.preview-img-container {
    display: flex;
    position: relative;
}


.social-share {
    display: flex;
    align-items: center;

}

.share-title {
    display: inline-block;
    text-transform: uppercase;
    font-size: 14px;
    color: #cbcbcb;
}

.social-share ul {
    display: flex;
    margin-left: 14px;
    margin-bottom: 0;
    top: 5px;
    list-style-type: none;
    padding: 5px 0;
}

.social li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    margin-right: 7px;
}

.share-item:hover {
    transform: scale(1.1);
}

.social li .fab {
    color: white;
}

.social-facebook {
    background-color: #3d599b;
}

.social-twitter {
    background-color: #60d7fd;
}

.social-google {
    background-color: #e54a4f;
}

.social-pinterest {
    background-color: #E85D3A;
}

.grid {
    margin: auto;
    position: absolute;
    transition: 1450ms all ease-in;

}

.slidee {
    position: absolute;
    width: 100%;
    top: 10px;
    transform: translatex(200%);
    transition: 1450ms all ease-in;
    height: 90vh;


}

.horizontal-img-wrapper img {
    width: auto;
    max-height: 600px;
}

.slide-left1 {
    transform: translateX(-300%);
    opacity: 0;
    visibility: hidden;
}

.display-none {
    display: none;
}

.slide-left2 {
    transform: translatex(0%);
}

.swiper-container {
    width: 100%;
    max-height: 600px;
    box-sizing: content-box !important;
    padding-bottom: 30px !important;
    margin-left: 10px !important;

}

.swiper-slide img {
    max-height: 600px;
    height: 100%;
}

.swiper-slide {
    width: auto !important;
    flex-grow: 1;
}

.swiper-button-prev, .swiper-button-next {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);;
}

.swiper-button-next:after, .swiper-button-prev:after {
    color: white;
}

.swiper-container-horizontal > .swiper-scrollbar {
    position: absolute;
    left: 0% !important;
    bottom: 6px;
    height: 13px !important;
    width: 100% !important;
}

.swiper-scrollbar-drag {
    background: #373737 url(https://pexetothemes.com/demos/photolux_wp/wp-content/themes/photolux/images/scroll-handle-bg.png) no-repeat center center !important

}

.load-more {
    width: 100%;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
    transition-property: transform;
    transition: 1450ms all ease-in;
}

.append-button:hover {
    opacity: 0.9;
}

.append-button:active {
    position: relative;
    top: 1px;
    opacity: 1;

}

.append-button {
    background-color: #1a1a1a;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    border: 0px;
    padding: 3px 22px 5px 22px;
    text-shadow: 0 1px 1px rgb(0 0 0 / 30%);
    border-radius: 4px;
    color: white !important;

}

.masonry-brick {
    animation: fadein 1s;
}

@media (max-width: 600px) {
    #portfolio-categories ul {
        position: absolute;
        top: 100%;
        flex-direction: column;
        z-index: 11;
        max-width: 80% !important;
        min-height: 0;
        transition: .1s;
        width: 100%;
    }

    #portfolio-categories {
        padding-bottom: 0;
        position: relative;
        margin-bottom: 20px;
        padding-top: 0;
    }

    .open-filter {
        height: auto !important;
    }
    .alignright{
        min-height: 45px;
    }
}