/*==================
    Portfolio Area 
==================*/

.mesonry-list {
    margin: 0 -22px;
    .masonry_item {
        .portfolio-static {
            padding: 0 22px;
        }
    }
    &.grid-metro3 {
        .resizer {
            width: 33.33%;
            @media #{$md-layout} {
                width: 50%;
            }
            @media #{$sm-layout} {
                width: 100%;
            }
        }

        .portfolio-33-33 {
            width: 33.33%;
            @media #{$md-layout} {
                width: 50%;
            }
            @media #{$sm-layout} {
                width: 100%;
            }
        }

        &.grid-lg-6 {
            .resizer {
                width: 50%;
                @media #{$md-layout} {
                    width: 50%;
                }
                @media #{$sm-layout} {
                    width: 100%;
                }
            }
            .portfolio-33-33 {
                width: 50%;
                @media #{$md-layout} {
                    width: 50%;
                }
                @media #{$sm-layout} {
                    width: 100%;
                }
            }
        }

        &.grid-lg-4 {
            .resizer {
                width: 33.33%;
                @media #{$md-layout} {
                    width: 50%;
                }
                @media #{$sm-layout} {
                    width: 100%;
                }
            }
            .portfolio-33-33 {
                width: 33.33%;
                @media #{$md-layout} {
                    width: 50%;
                }
                @media #{$sm-layout} {
                    width: 100%;
                }
            }
        }

        &.grid-lg-3 {
            .resizer {
                width: 25%;
                @media #{$md-layout} {
                    width: 50%;
                }
                @media #{$sm-layout} {
                    width: 100%;
                }
            }
            .portfolio-33-33 {
                width: 25%;
                @media #{$md-layout} {
                    width: 50%;
                }
                @media #{$sm-layout} {
                    width: 100%;
                }
            }
        }

        &.grid-lg-12 {
            .resizer {
                width: 100%;
                @media #{$md-layout} {
                    width: 100%;
                }
                @media #{$sm-layout} {
                    width: 100%;
                }
            }
            .portfolio-33-33 {
                width: 100%;
                @media #{$md-layout} {
                    width: 100%;
                }
                @media #{$sm-layout} {
                    width: 100%;
                }
            }
        }
    }
}

.portfolio {
    position: relative;
    @extend %transition;
    min-height: 600px;
    width: 100%;
    padding-top: 35%;
    z-index: 4;

    @media #{$laptop-device} {
        min-height: 500px;
    }

    @media #{$lg-layout} {
        min-height: 500px;
    }

    @media #{$md-layout} {
        min-height: 450px;
    }

    @media #{$sm-layout} {
        min-height: 400px;
    }
    .thumbnail-inner {
        transition: transform .28s ease;
        z-index: 3;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-size: cover;
        background-position: center;
        overflow: hidden;
        border-radius: 5px;

        &::before {
            background-color: #f6004c;
            background-image: linear-gradient(#f6004c 10%, #000000 100%);
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 5;
            opacity: 0;
            @extend %transition;
        }
    }

    .thumbnail {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-size: cover;
        background-position: center;
        border-radius: 5px;
        background-color: #0a0a0a;
        transform: scale(1.13) translateZ(0);
        backface-visibility: hidden;
        transition: transform .28s ease;
        z-index: 4;

        &::after {
            background-color: rgba(45, 45, 45, .35);
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            content: ' ';
            z-index: 1;
            display: block;
            border-radius: 5px;
            background-color: rgba(25, 25, 25, .37);
            @extend %transition;
        }
    }

    .bg-blr-image {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-size: cover;
        background-position: center;
        background-color: #0a0a0a;
        @extend %transition;
        transform: translateY(38px);
        opacity: 0;
        z-index: 1;

    }

    .content {
        position: absolute;
        bottom: 40px;
        left: 40px;
        right: 40px;
        max-width: 100% !important;
        z-index: 10;
        padding: 0;

        @media #{$lg-layout} {
            left: 20px;
            right: 20px;
        }

        @media #{$md-layout} {
            left: 20px;
            right: 20px;
        }

        @media #{$sm-layout} {
            left: 15px;
            right: 15px;
        }
        .inner {
            p {
                color: #c6c9d8;
                font-size: 14px;
                line-height: 1.7;
                margin-bottom: 15px;
            }
            h4 {
                font-size: 24px;
                line-height: 36px;
                font-weight: 600;
                @media #{$sm-layout} {
                    font-size: 20px;
                    line-height: 32px;
                }
                a {
                    color: #ffffff;
                }
            }

            .portfolio-button {
                @extend %transition;
                margin-top: 35px;
                transition: 0.7s;

                @media #{$sm-layout} {
                    margin-top: 20px;
                }

                @media #{$large-mobile} {
                    margin-top: 25px;
                }

                a {
                    &.rn-btn {
                        color: #ffffff;
                        border-color: rgba(255, 255, 255, 0.3);

                        &:hover {
                            border-color: var(--color-primary);
                        }
                    }
                }
            }
        }
    }

    &.text-center {
        .content {
            position: absolute;
            bottom: 40px;
            left: 40px;
            max-width: 80% !important;
            z-index: 10;
            padding: 0;
            right: 40px;
            margin: 0 auto;

            @media #{$lg-layout} {
                left: 20px;
                right: 20px;
            }

            @media #{$md-layout} {
                left: 15px;
                right: 15px;
            }

            @media #{$sm-layout} {
                left: 10px;
                right: 10px;
            }
        }
    }

    &:hover {
        .thumbnail-inner {
            transform: scale(1.08) translateZ(0);

            &::before {
                opacity: 0.85;
            }
        }

        .thumbnail {
            transform: scale(1) translateZ(0);

            &::after {
                background-color: rgba(25, 25, 25, .24);
            }
        }

        .bg-blr-image {
            opacity: 0;
            z-index: 9;
        }

    }

    &.portfolio-style--2 {
        .inner {
            margin: 0 20px;
        }
    }
}


.transparent-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

// Minimal Portfolio 

.portfolio-tilthover {
    .portfolio {
        margin-top: 30px;

        @media #{$sm-layout} {
            min-height: 400px;
        }

        @media #{$md-layout} {
            min-height: 400px;
        }

        @media #{$lg-layout} {
            min-height: 400px;
        }

        .thumbnail {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-size: cover;
            background-position: center;
            border-radius: 5px;
            background-color: #0a0a0a;
            transform: scale(1.13) translateZ(0);
            backface-visibility: hidden;
            transition: transform .28s ease;
            z-index: 4;

            @media #{$large-mobile} {
                transform: scale(1) translateZ(0);
            }

            

            &::after {
                display: none;
            }
        }

        .thumbnail-inner {
            @media #{$large-mobile} {
                transform: scale(1) translateZ(0);

                &::before {
                    opacity: 0.85;
                }
            }
        }

        .bg-blr-image {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-size: cover;
            background-position: center;
            background-color: #0a0a0a;
            @extend %transition;
            transform: translateY(38px);
            opacity: 0;
            z-index: 1;

            @media #{$large-mobile} {
                opacity: 0;
                z-index: 9;
            }

            
        }

        .content {
            opacity: 0;
            @extend %transition;

            @media #{$large-mobile} {
                opacity: 1;
            }
        }

        &:hover {
            .content {
                opacity: 1;
            }

            .thumbnail-inner {
                transform: scale(1) translateZ(0);

                &::before {
                    opacity: 0.85;
                }
            }

            .thumbnail {
                transform: scale(1) translateZ(0);

                &::after {
                    background-color: rgba(25, 25, 25, .24);
                }
            }

            .bg-blr-image {
                opacity: 0;
                z-index: 9;
            }
        }
    }
}




/* Item Between Spacing  */
.portfolio-slick-activation {
    &.item-fluid {
        &.slick-gutter-15 {
            .slick-list {
                margin-left: -200px;
                margin-right: -200px;
        
                @media #{$lg-layout} {
                    margin-left: 30px;
                    margin-right: 30px;
                }
                @media #{$md-layout} {
                    margin-left: 30px;
                    margin-right: 30px;
                }
                @media #{$sm-layout} {
                    margin-left: 15px;
                    margin-right: 15px;
                }
            }
        } 
    }
}


.portfolio-sacousel-inner {
    .slick-list {
        margin-left: -200px;
        margin-right: -200px;
        @media #{$lg-layout} {
            margin-left: 30px;
            margin-right: 30px;
        }
        @media #{$md-layout} {
            margin-left: 30px;
            margin-right: 30px;
        }
        @media #{$sm-layout} {
            margin-left: 30px;
            margin-right: 30px;
        }
    }
}

.portfolio-sacousel-inner {
    
    .slick-slide {
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: -10px;
    }
}
.portfolio-sacousel-inner {
    .slick-list {
        overflow: visible;
    }
}
.portfolio-sacousel-inner,
.rn-slick-dot {
    .slick-dots {
        bottom: -30px;
        @media #{$large-mobile} {
            bottom: -30px;
        }
        li {
            width: 30px;
            margin: 0;
            opacity: .35;
            position: relative;

            button {
                &::before {
                    display: none;
                }

                &::after {
                    background: #333;
                    width: 100%;
                    display: block;
                    content: '';
                    position: absolute;
                    left: 0;
                    width: 6px;
                    height: 6px;
                    @extend %transition;
                    border-radius: 50%;
                    margin-left: 11px;
                    background-color: transparent;
                    box-shadow: inset 0 0 0 5px #000;
                }
            }

            &.slick-active {
                opacity: 1;

                button {
                    &::after {
                        -webkit-transform: scale(2);
                        transform: scale(2);
                        box-shadow: inset 0 0 0 1px var(--color-primary);
                        background-color: transparent;
                        background-color: transparent !important;
                    }
                }
            }
        }
    }

    // Dot Light  
    &.dot-light {
        .slick-dots {
            li {
                button {
                    &::after {
                        background: #ffffff;
                        box-shadow: inset 0 0 0 5px #ffffff;
                    }
                }

                &.slick-active {
                    opacity: 1;

                    button {
                        &::after {
                            -webkit-transform: scale(2);
                            transform: scale(2);
                            box-shadow: inset 0 0 0 1px var(--color-primary);
                            background-color: transparent;
                            background-color: transparent !important;
                        }
                    }
                }
            }
        }
    }
}

/* Slick Arrow Button  */

.portfolio-slick-activation {
    position: relative;
    @media #{$sm-layout} {
        margin-left: -5px;
        margin-right: -5px;
    }
    button {
        &.slick-arrow {
            position: absolute;
            z-index: 3;
            background: transparent;
            font-size: 20px;
            width: 253px;
            height: 100%;

            @media #{$lg-layout} {
                width: 136px;
            }

            @media #{$md-layout} {
                width: 100px;
            }

            @media #{$sm-layout} {
                width: 100px;
                display: none !important;
            }

            &::before {
                line-height: 1;
                opacity: 0.75;
                font-size: 30px;
                position: relative;
                top: -14px;
                transition: 0.5s;
            }

            &.slick-prev {
                left: 0;
                background: -moz-linear-gradient(left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
                background: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
                background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#00000000', GradientType=1);

                &::before {
                    content: url(../images/icons/slick-arrow-left.png);
                }

                @media #{$md-layout} {
                    display: none !important;
                }

                @media #{$lg-layout} {
                    display: none !important;
                }

                @media #{$laptop-device} {
                    display: none !important;
                }

            }

            &.slick-next {
                right: 0;
                background: -moz-linear-gradient(right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
                background: -webkit-linear-gradient(right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
                background: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#00000000', GradientType=1);

                &::before {
                    content: url(../images/icons/slick-arrow-right.png);
                }

                @media #{$md-layout} {
                    display: none !important;
                }

                @media #{$lg-layout} {
                    display: none !important;
                }

                @media #{$laptop-device} {
                    display: none !important;
                }
            }


            &:hover {
                &.slick-prev {
                    padding-right: 50px;

                    @media #{$md-layout} {
                        padding-right: 10px;
                    }

                    @media #{$sm-layout} {
                        padding-right: 10px;
                    }
                }

                &.slick-next {
                    padding-left: 50px;

                    @media #{$md-layout} {
                        padding-right: 10px;
                    }

                    @media #{$sm-layout} {
                        padding-right: 10px;
                    }
                }

                &::before {
                    opacity: 1;
                }
            }


        }
    }

    &.layout-2 {
        button {
            &.slick-arrow {
                position: absolute;
                z-index: 3;
                background: transparent;
                font-size: 20px;
                width: auto;
                height: 40px;
                left: -60px;
                @media #{$lg-layout} {
                    width: 136px;
                }
                @media #{$md-layout} {
                    width: 100px;
                }
                @media #{$sm-layout} {
                    width: 100px;
                    display: none !important;
                }
                &::before {
                    line-height: 1;
                    opacity: 0.75;
                    font-size: 30px;
                    position: relative;
                    transition: 0.5s;
                    filter: invert(0.5);
                }
    
                &.slick-prev {
                    
                    &::before {
                        content: url(../images/icons/slick-arrow-left.png);
                    }
                    @media #{$md-layout} {
                        display: none !important;
                    }
    
                    @media #{$lg-layout} {
                        display: none !important;
                    }
    
                    @media #{$laptop-device} {
                        display: none !important;
                    }
    
                }
    
                &.slick-next {
                    left: auto;
                    right: -60px;
                    &::before {
                        content: url(../images/icons/slick-arrow-right.png);
                    }
                    @media #{$md-layout} {
                        display: none !important;
                    }
    
                    @media #{$lg-layout} {
                        display: none !important;
                    }
    
                    @media #{$laptop-device} {
                        display: none !important;
                    }
                }
    
    
                &:hover {
                    &.slick-prev {
                        padding-right: 50px;
    
                        @media #{$md-layout} {
                            padding-right: 10px;
                        }
    
                        @media #{$sm-layout} {
                            padding-right: 10px;
                        }
                    }
    
                    &.slick-next {
                        padding-left: 50px;
    
                        @media #{$md-layout} {
                            padding-right: 10px;
                        }
    
                        @media #{$sm-layout} {
                            padding-right: 10px;
                        }
                    }
    
                    &::before {
                        opacity: 1;
                    }
                }
    
    
            }
        }
    }
}

.rn-slick-activation {
    &.item-fluid {
        .slick-dots {
            bottom: -60px;
        }
    }
}

/* Slick Gutter Space  */
.slick-space-gutter--15 {
    margin-left: -15px;
    margin-right: -15px;

    .slick-slide {
        padding-left: 15px;
        padding-right: 15px;
    }

    .portfolio {
        margin: 40px 0;
    }
}

.slickdot--20 {
    .slick-dots {
        bottom: -20px;
    }
}



/*-----------------------------
Portfolio Style Three  
--------------------------------*/
.portfolio-style--3 {
    position: relative;
    margin-bottom: 40px;
    @extend %transition;
    overflow: hidden;
    border-radius: 6px;

    .thumbnail {
        a {
            display: block;
            position: relative;
            z-index: 1;

            img {
                @extend %transition;
            }

            &::after {
                background: linear-gradient(to bottom, #fc004d 0, #000000 100%);
                position: absolute;
                left: 0;
                right: 0;
                width: 100%;
                height: 100%;
                content: "";
                z-index: 1;
                opacity: 0;
                @extend %transition;

                @media #{$large-mobile} {
                    opacity: 0.85;
                    top: 0;
                }

            }
        }
    }

    .content {
        position: absolute;
        bottom: -92px;
        width: 100%;
        padding: 50px 35px;
        z-index: 3;
        @extend %transition;

        @media #{$large-mobile} {
            bottom: 0;
        }

        @media #{$large-mobile} {
            padding: 30px 20px;
        }

        &::before {
            position: absolute;
            content: "";
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0, #000000 70%);
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 1;
            @extend %transition;
            z-index: -1;

            @media #{$large-mobile} {
                opacity: 0;
            }
        }

        p {
            &.portfoliotype {
                font-size: 14px;
                margin-bottom: 5px;
                color: #c6c9d8;
            }
        }

        h4 {
            &.title {
                margin-bottom: 0;
                a {
                    color: #ffffff;
                    font-size: 24px;
                    font-weight: 500;
                    line-height: 36px;
                    @extend %transition;
                    @media #{$sm-layout} {
                        font-size: 18px;
                        line-height: 29px;
                    }
                }
            }
        }

        .portfolio-btn {
            @extend %transition;
            margin-top: 35px;
            transition: 0.7s;
            opacity: 0;
            visibility: hidden;

            @media #{$large-mobile} {
                margin-top: 22px;
            }

            @media #{$large-mobile} {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    &:hover {
        .content {
            bottom: 0;

            &::before {
                opacity: 0;
            }
        }

        .thumbnail {
            a {
                img {
                    transform: scale(1.1);
                }

                &::before {
                    opacity: 0;
                }

                &::after {
                    opacity: 0.85;
                    top: 0;
                }
            }
        }

        .content {
            .portfolio-btn {
                opacity: 1;
                visibility: visible;
            }
        }
    }
}

.row--5 {
    .portfolio-style--3 {
        margin-bottom: 10px;
    }
}


/*--------------------------
    Portfolio Style Static 
-----------------------------*/
a {
    &.item-portfolio-static  {
        transition: inherit;
    }
}
.item-portfolio-static {
    margin-top: 60px;
    margin-bottom: 0;
    @media #{$sm-layout} {
        margin-top: 30px;
    }
    @media #{$md-layout} {
        margin-top: 30px;
    }
    .inner {
        padding-top: 20px;
        p {
            margin-bottom: 5px;
            font-size: 16px;
            color: var(--color-heading);
            transition: 0.3s;
            &:hover {
                color: var(--color-primary);
            }
        }
        .gallery-title {
            color: var(--color-heading);
            transition: 0.3s;
            margin-bottom: 0;
            &:hover {
                color: var(--color-primary);
            }
        }
    }
    .thumbnail {
        img {
            transition: 0.3s;
            width: 100%;
            border-radius: 5px;
            box-shadow: 0 25px 65px rgba(0, 0, 0, 0.1);
        }
    }
    &:hover {
        .thumbnail {
            img {
                box-shadow: 0 50px 80px -10px rgba(0, 0, 0, 0.17);
                transform: translate3d(0, -10px, 0);
            }
        }
    }
}


.portfolio-content-wrap-row {
    &.row--5 {
        margin-top: -10px;
    }
}

.dialog-type-lightbox {
    background-color: rgba(0,0,0,.8) !important;
}
.dialog-lightbox-widget .animated {
    opacity: 1;
    transform: none;
}













