/*
 *
 *    [Table of contents]
 *
 *    [&. Content / #key]
 *    [Let press Ctrl + f and type of paste the key, then press Enter to search the content ]
 *
 *    Summary: Portfolio
 *
 *    0. General Settings
 *    1. Portfolio List 01
 *      - 1.1. Style 02
 *    2. Portfolio List 02
 *    3. Portfolio List 03
 *    4. Portfolio List 04
 *    5. Portfolio List carousel
 *    6. Portfolio Single
 *    7. Responsive
 *
 *
 */

 
/*===========================================
=            0. General Settings            =
===========================================*/

    .slz-block-item-01.portfolio-list,
    .slz-block-item-03.portfolio-item,
    .slz-block-item-04.portfolio-item {
        text-align: center;
    }
    .slz-block-item-01.portfolio-list .block-title,
    .slz-block-item-03.portfolio-item .block-title,
    .slz-block-item-04.portfolio-item .block-title {
        color: #263e5f;
        margin: 0;
        font-weight: 700;
    }
    .slz-block-item-01.portfolio-list .link,
    .slz-block-item-01.portfolio-list .block-text,
    .slz-block-item-04.portfolio-item .block-text {
        font-size: 14px;
    }

    .slz-block-item-01.portfolio-list .link img {
        max-width: none;
        height: 100%;
    }
    
    .slz-block-item-01.portfolio-list .block-info li a:hover,
    .slz-block-item-01.portfolio-list .block-title:hover,
    .slz-block-item-03.portfolio-item .block-title:hover,
    .slz-block-item-04.portfolio-item .block-title:hover {
        color: #d32eb2;
    }

    .portfolio-list .block-read-more i {
        display: none;
    }

    /* tab list layout */
    .sc_portfolio_list .tab-list-wrapper {
        text-align: center;
    }

    .sc_portfolio_list .tab-list-wrapper .tab-list li .link {
        display: block;
    }

/*=====  End of 0. General Settings  ======*/


/*============================================
=            1. Portfolio List 01            =
============================================*/

    .slz-block-item-01 .block-content {
        padding: 22px 0 0 0;
    }

    .slz-block-item-01.portfolio-list .block-info {
        margin-top: 3px;
        padding: 0;
        border-top: 0;
        border-bottom: 0;
    }

    .slz-block-item-01.portfolio-list .block-info li a {
        color: #263e5f;
        line-height: 1.4;
        font-style: normal;
    }

    .slz-block-item-01.portfolio-list .block-info li .link {
        left: auto;
        width: auto;
        transform: none;
        -webkit-transform: none;
    }

    .slz-block-item-01.portfolio-list .block-read-more {
        margin-top: 25px;
        color: #fff;
    }

    .slz-block-item-01.portfolio-list .block-read-more:before {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 30px;
        -webkit-border-radius: 30px;
        background: #d32eb2;
        background: -moz-linear-gradient(90deg, #0c72c7, #d32eb2, #0c72c7);
        background: -webkit-linear-gradient(90deg, #0c72c7, #d32eb2, #0c72c7);
        background: linear-gradient(90deg, #0c72c7, #d32eb2, #0c72c7);
        background-position: -100% 0;
        background-size: 200% 100%;
        -webkit-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
        z-index: 1;
    }

    .slz-block-item-01.portfolio-list .block-read-more:hover,
    .slz-block-item-01.portfolio-list .block-read-more:focus {
        color: #fff;
    }

    .slz-block-item-01.portfolio-list .block-read-more:hover:before {
        background-position: -200% 0;
    }

    .slz-block-item-01.portfolio-list.style-1 {
        background-color: transparent;
    }

    .slz-block-item-01.portfolio-list.style-1 .link {
        left: 50%;
        right: auto;
        width: 67%;
        -webkit-transform: translate3d(-50%, 0, 0);
        -moz-transform: translate3d(-50%, 0, 0);
        -o-transform: translate3d(-50%, 0, 0);
        -ms-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
        transition-duration: 0.5s;
        -webkit-transition-duration: 0.5s;
    }

    .slz-block-item-01.portfolio-list.style-1 .block-image {
        overflow: visible;
    }

    .slz-block-item-01.portfolio-list.style-1 .block-image .link:after {
        content: none;
    }

    .slz-block-item-01.portfolio-list.style-1 .block-image .img-cd {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 67%;
        height: 100%;
    }

    .slz-block-item-01.portfolio-list.style-1 .block-image .img-cd:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('../../../../../static/img/theme-img/cd.png') no-repeat center center;
        background-size: 98%;
        transition: left 0.5s ease;
        -webkit-transition: left 0.5s ease;
        -moz-transition: left 0.5s ease;
        -o-transition: left 0.5s ease;
        -ms-transition: left 0.5s ease;
    }

    .slz-block-item-01.portfolio-list.style-1 .block-image .img-cd:after {
        pointer-events: none;
        position: absolute;
        content: '';
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        height: 5px;
        width: 60%;
        background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
        transition: left 0.5s ease;
        -webkit-transition: left 0.5s ease;
        -moz-transition: left 0.5s ease;
        -o-transition: left 0.5s ease;
        -ms-transition: left 0.5s ease;
    }

    .slz-block-item-01.portfolio-list.style-1:hover .link {
        transform: translate3d(-70%, 0, 0);
        -webkit-transform: translate3d(-70%, 0, 0);
        -moz-transform: translate3d(-70%, 0, 0);
        -o-transform: translate3d(-70%, 0, 0);
        -ms-transform: translate3d(-70%, 0, 0);
    }

    .slz-block-item-01.portfolio-list.style-1:hover .block-image .img-cd:before {
        left: 25%;
        animation-name: Rotate;
        animation-duration: 2.5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    .slz-block-item-01.portfolio-list.style-1:hover .block-image .img-cd:after {
        left: 45%;
        right: auto;
    }


    /*----------  1.1. Style 02  ----------*/
    
        .slz-block-item-01.portfolio-list.style-2,
        .slz-block-item-01.portfolio-list.style-2 .block-content {
            display: block;
        }
        .slz-block-item-01.portfolio-list.style-2 .block-image {
            display: block;
            width: 100%;
            position: relative;
            overflow: hidden;
            margin-bottom: 0;
            background-color: #fff;
        }

        .slz-block-item-01.portfolio-list.style-2 .block-image:before {
            padding-top: 100%;
        }

        .slz-block-item-01.portfolio-list.style-2 .block-content {
            padding: 25px 0 0;
        }

        .slz-block-item-01.portfolio-list.style-2:hover .block-image .link:after {
            content: none;
        }

        .portfolio-play {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background-color: #c533b4;
            opacity: 0;
            -webkit-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
            z-index: 4;
            pointer-events: none;
        }

        .portfolio-play i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            background-color: transparent;
            width: 60px;
            height: 60px;
            line-height: 55px;
            font-size: 25px;
            color: #fff;
            border: 2px solid #fff;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            font-style: normal;
        }

        .portfolio-play i:before {
            content: "\0025B7";
            position: absolute;
            margin-left: 6px;
        }

        .portfolio-play i:after {
            content: "\0025B7";
        }

        .slz-block-item-01.portfolio-list.style-2:hover .portfolio-play {
            opacity: 0.9;
            top: 8%;
            left: 12%;
        }

        /* carousel settings */
        .sc_portfolio_list .slz-carousel-wrapper .carousel-overflow {
            overflow: visible;
        }
        .slz-carousel-wrapper .slz-block-item-01.portfolio-list .block-read-more {
            margin-bottom: 3px;
        }

/*=====  End of 1. Portfolio List 01  ======*/

    
/*============================================
=            2. Portfolio List 02            =
============================================*/

    .sc_portfolio_list .slz-block-item-01.style-2 .block-title {
        font-weight: 500;
    }

/*=====  End of 2. Portfolio List 02  ======*/
    


/*============================================
=            3. Portfolio List 03            =
============================================*/

    .slz-block-item-03.portfolio-item .block-content {
        padding-top: 22px;
        margin-top: 0;
    }

    .slz-block-item-03.portfolio-item.style-2 .block-image {
        float: left;
    }

    .slz-block-item-03.portfolio-item.style-2 .block-text {
        display: inline-block;
        vertical-align: top;
        width: calc(100% - 170px);
        padding-left: 25px;
    }

/*=====  End of 3. Portfolio List 03  ======*/


/*============================================
=            4. Portfolio List 04            =
============================================*/
    

    .slz-block-item-04.portfolio-item .block-content {
        padding: 0;
    }

    .slz-block-item-04.portfolio-item .block-image {
        margin-bottom: 25px;
    }


/*=====  End of 4. Portfolio List 04  ======*/


/*==================================================
=            5. Portfolio List Carousel            =
==================================================*/

    .slz-carousel-wrapper.layout-2 .portfolio_slide_slick {
        margin-top: 50px;
    }

    .slz-carousel-wrapper.layout-2 .portfolio_slide_slick .item {
        padding-top: 30px;
    }

    .portfolio_slide_slick .slz-block-item-03.style-2 .block-content {
        width: auto;
    }

    .portfolio_slide_slick .feature-image {
        position: relative;
        z-index: 1;
        width: 100%;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
    }

    .portfolio_slide_slick .feature-image .block-img img {
        width: 100%;
    }

    .portfolio_slide_slick .feature-image + .slz-block-item-03.portfolio-item {
        width: 100%;
        padding-left: 0;
        opacity: 0;
        -webkit-transform: translateY(-30px);
        -moz-transform: translateY(-30px);
        -o-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        transform: translateY(-30px);
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
    }

    .portfolio_slide_slick .feature-image + .slz-block-item-03.portfolio-item .block-content {
        padding-top: 0;
    }

    .portfolio_slide_slick .item:hover .feature-image {
        transform: translateY(-30px);
        -webkit-transform: translateY(-30px);
        -moz-transform: translateY(-30px);
        -o-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
    }

    .portfolio_slide_slick .item:hover .feature-image + .slz-block-item-03.portfolio-item {
        opacity: 1;
        transform: translateY(-15px);
        -webkit-transform: translateY(-15px);
        -moz-transform: translateY(-15px);
        -o-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        transition-delay: 0.3s;
        -webkit-transition-delay: 0.3s;
    }

    .portfolio_slide_slick .slz-block-item-03.portfolio-item .block-read-more:hover {
        color: #d32eb2;
    }

    .portfolio_slide_slick .slz-block-item-03.portfolio-item .block-content .block-category {
        margin-bottom: 0;
    }

    .portfolio_slide_slick .slz-block-item-03.portfolio-item .block-read-more {
        text-transform: capitalize;
        color: #0c72c7;
        margin-top: -1px;
        background: linear-gradient(to right, transparent 0%, transparent 100%);
        padding: 0;
    }
    .portfolio_slide_slick .slz-block-item-03.portfolio-item .block-read-more:before {
        content: none;
    }
    .slz-carousel-wrapper.layout-2 .slz-carousel-content .img-content,
    .slz-carousel-wrapper.layout-2 .slz-carousel-content .content {
        padding-left: 15px;
        padding-right: 15px;
        width: 50%;
        display: inline-block;
        vertical-align: top;
    }

    .slz-carousel-wrapper.layout-2 .slz-carousel-content .img-content img,
    .slz-carousel-wrapper.layout-3 .slz-carousel-content .img-content img {
        width: 330px;
        height: 330px;
    }

    .slz-carousel-wrapper.layout-2 .slz-carousel-content .title .block-title,
    .slz-carousel-wrapper.layout-3 .slz-carousel-content .title .block-title {
        font-weight: 700;
        text-transform: uppercase;
        font-size: 20px;
        color: #00234e;
        display: inline-block;
        vertical-align: top;
    }

    .slz-carousel-wrapper.layout-2 .slz-carousel-content .title .block-title:hover,
    .slz-carousel-wrapper.layout-3 .slz-carousel-content .title .block-title:hover {
        color: #d32eb2;
    }

    .slz-carousel-wrapper.layout-2 .slz-carousel-content .artist,
    .slz-carousel-wrapper.layout-3 .slz-carousel-content .artist {
        padding: 0;
        margin: 7px 0 10px;
        list-style-type: none;
    }

    .slz-carousel-wrapper.layout-2 .slz-carousel-content .artist li,
    .slz-carousel-wrapper.layout-3 .slz-carousel-content .artist li {
        color: #74808e;
        margin-bottom: 5px;
        margin-right: 40px;
        display: inline-block;
        font-size: 14px;
    }

    .slz-carousel-wrapper.layout-2 .slz-carousel-content .artist li:last-child,
    .slz-carousel-wrapper.layout-3 .slz-carousel-content .artist li:last-child {
        margin-right: 0;
    }

    .slz-carousel-wrapper.layout-2 .slz-carousel-content .slz-playlist .mejs-container .mejs-controls,
    .slz-carousel-wrapper.layout-3 .slz-carousel-content .slz-playlist .mejs-container .mejs-controls {
        height: 60px;
        padding: 0 20px;
    }
    
    .slz-carousel-wrapper.layout-2 .slz-carousel-content .slz-playlist .mejs-container .mejs-controls > div,
    .slz-carousel-wrapper.layout-3 .slz-carousel-content .slz-playlist .mejs-container .mejs-controls > div,
    .slz-carousel-wrapper.layout-2 .slz-carousel-content .slz-playlist .mejs-container .mejs-controls .mejs-horizontal-volume-slider,
    .slz-carousel-wrapper.layout-3 .slz-carousel-content .slz-playlist .mejs-container .mejs-controls .mejs-horizontal-volume-slider {
        margin-left: 0;
        margin-right: 0;
        margin-top: 13px;
        margin-bottom: 13px;
    }

    .slz-carousel-wrapper.layout-2 .slz-carousel-content .slz-playlist .mejs-container .mejs-controls .mejs-button button,
    .slz-carousel-wrapper.layout-3 .slz-carousel-content .slz-playlist .mejs-container .mejs-controls .mejs-button button {
        -webkit-transform: scale(0.65);
        -ms-transform: scale(0.65);
        -o-transform: scale(0.65);
        transform: scale(0.65);
    }

    .slz-carousel-wrapper.layout-2 .slz-carousel-content .slz-playlist .mejs-container .mejs-controls .mejs-time,
    .slz-carousel-wrapper.layout-3 .slz-carousel-content .slz-playlist .mejs-container .mejs-controls .mejs-time {
        font-size: 14px;
    }

    .slz-carousel-wrapper.layout-2 .slz-carousel-content .slz-playlist .mejs-container .mejs-playlist ul {
        max-height: 100px;
    }

    .slz-carousel-wrapper.layout-2 .slz-carousel-content .slz-playlist .mejs-container .mejs-playlist ul li,
    .slz-carousel-wrapper.layout-3 .slz-carousel-content .slz-playlist .mejs-container .mejs-playlist ul li {
        padding: 13px 20px;
        font-size: 14px;
    }

    .slz-carousel-wrapper.layout-2 .slz-carousel-content .slz-playlist .mejs-container .mejs-playlist ul li .playlist-name,
    .slz-carousel-wrapper.layout-3 .slz-carousel-content .slz-playlist .mejs-container .mejs-playlist ul li .playlist-name {
        width: 75%;
    }

    .slz-carousel-wrapper.layout-2 .slz-carousel-content .slz-playlist .slz-album-01 .bar-wrapper,
    .slz-carousel-wrapper.layout-3 .slz-carousel-content .slz-playlist .slz-album-01 .bar-wrapper {
        height: 60px;
    }

    .slz-carousel-wrapper.layout-3 .slz-carousel-content .slz-playlist .mejs-container .mejs-controls {
        background: #313131;
    }

    .slz-carousel-wrapper.layout-3 .slz-carousel-content .slz-playlist .mejs-container .mejs-playlist ul {
        max-height: 240px;
    }
    .slz-carousel-wrapper.layout-3 .slz-carousel-content .slz-playlist .mejs-container .mejs-playlist ul li {
        background-color: #313131;
        color: #7d858f;
        margin-top: 10px;
    }
    .slz-carousel-wrapper.layout-3 .slz-carousel-content .slz-playlist .mejs-container .mejs-playlist ul li.current {
        background-color: #fbfbfb;
        color: #263e5f;
    }

    .slz-carousel-wrapper.layout-2 .slz-carousel-content .block-img,
    .slz-carousel-wrapper.layout-3 .slz-carousel-content .block-img {
        display: inline-block;
        position: relative;
        z-index: 1;
    }

    .slz-carousel-wrapper.layout-2 .slz-carousel-content .block-img.cont-animation:before,
    .slz-carousel-wrapper.layout-3 .slz-carousel-content .block-img.cont-animation:before {
        animation-play-state: running;
        -webkit-animation-play-state: running;
        -moz-animation-play-state: running;
        -o-animation-play-state: running;
    }

    .slz-carousel-wrapper.layout-2 .slz-carousel-content .block-img:before {
        content: '';
        position: absolute;
        top: 0;
        left: 45%;
        width: 100%;
        height: 100%;
        background: url('../../../../../static/img/theme-img/cd.png') no-repeat center center;
        background-size: 98%;
        animation-name: Rotate;
        animation-duration: 2.5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        z-index: -1;
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
        -moz-animation-play-state: paused;
        -o-animation-play-state: paused;
    }

    .slz-carousel-wrapper.layout-2 .slz-carousel-content .block-img:after {
        pointer-events: none;
        position: absolute;
        z-index: -1;
        content: '';
        top: auto;
        bottom: 0;
        left: 60%;
        height: 5px;
        width: 60%;
        background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
    }

    .sc_portfolio_list .slz-list-block > .item {
        margin-top: 45px;
    }

    .sc_portfolio_list .slz-list-block.slz-column-3 > .item:nth-child(-n + 3) {
        margin-top: 0;
    }

    .sc_portfolio_list .slz-project-carousel.layout-3 .slz-carousel-content {
        margin-left: -15px;
        margin-right: -15px;
    }
    .sc_portfolio_list .slz-project-carousel.layout-3 .img-content {
        width: 50%;
        float: right;
        padding-left: 15px;
        padding-right: 15px;
        text-align: right;
    }
    .sc_portfolio_list .slz-project-carousel.layout-3 .content {
        width: 50%;
        float: left;
        padding-left: 15px;
        padding-right: 15px;
    }

    .slz-carousel-wrapper.layout-3 .slz-carousel-content .block-img:before {
        content: '';
        position: absolute;
        top: 0;
        left: auto;
        right: 45%;
        width: 100%;
        height: 100%;
        background: url('../../../../../static/img/theme-img/cd.png') no-repeat center center;
        background-size: 98%;
        animation-name: Rotate;
        animation-duration: 2.5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        z-index: -1;
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
        -moz-animation-play-state: paused;
        -o-animation-play-state: paused;
    }
    .slz-carousel-wrapper.layout-3 .slz-carousel-content .block-img:after {
        pointer-events: none;
        position: absolute;
        z-index: -1;
        content: '';
        top: auto;
        bottom: 0;
        left: auto;
        right: 60%;
        height: 5px;
        width: 60%;
        background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
    }

    .slz-carousel-wrapper.layout-3 .slick-dotted.slick-slider {
        margin-bottom: 70px;
    }
    .slz-carousel-wrapper.layout-3 .slick-dots {
        bottom: -65px;
    }


/*=====  End of 5. Portfolio List Carousel  ======*/



/*===========================================
=            6. Portfolio Single            =
===========================================*/

    .slz-blog-detail.slz-portfolio .slz-portfolio-content {
        display: table;
        width: 100%;
        margin-bottom: 70px;
    }

    .slz-blog-detail.slz-portfolio .slz-portfolio-content .block-image {
        display: table-cell;
        vertical-align: top;
        width: 58%;
    }

    .slz-blog-detail.slz-portfolio .slz-portfolio-content .block-image:before {
        padding-top: 63%;
    }

    .slz-blog-detail.slz-portfolio .slz-portfolio-content .content {
        display: table-cell;
        vertical-align: top;
        padding-left: 30px;
    }

    .slz-blog-detail.slz-portfolio .slz-portfolio-content .content .block-title {
        font-size: 24px;
        font-weight: 700;
        color: #00234e;
        pointer-events: none;
    }

    .slz-blog-detail.slz-portfolio .slz-portfolio-content .content .artist {
        margin-top: 20px;
        margin-bottom: 0;
        font-size: 0;
        padding-left: 0;
    }

    .slz-blog-detail.slz-portfolio .slz-portfolio-content .content .artist li {
        list-style: none;
        padding-bottom: 5px;
        margin-bottom: 5px;
        border-bottom: 1px solid #eaeaea;
    }

    .slz-blog-detail.slz-portfolio .slz-portfolio-content .content .artist li:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: none;
    }

    .slz-blog-detail.slz-portfolio .slz-portfolio-content .content .artist .title {
        display: inline-block;
        vertical-align: top;
        width: 50%;
        font-size: 14px;
        font-weight: 500;
        color: #00234e;
    }

    .slz-blog-detail.slz-portfolio .slz-portfolio-content .content .artist .title:before {
        content: '\f111';
        font-family: 'FontAwesome';
        padding-right: 10px;
        font-size: 5px;
        vertical-align: top;  
    }

    .slz-blog-detail.slz-portfolio .slz-portfolio-content .content .artist .value {
        display: inline-block;
        vertical-align: top;
        width: 50%;
        font-size: 14px;
    }

    .slz-blog-detail.slz-portfolio .slz-portfolio-content .content .price-album {
        margin-top: 25px;
        font-size: 0;
    }

    .slz-blog-detail.slz-portfolio .slz-portfolio-content .content .price-album .btn-buy {
        font-size: 14px;
    }

    .slz-blog-detail.slz-portfolio .slz-portfolio-content .content .price-album .price {
        vertical-align: top;
        font-size: 14px;
        font-weight: 500;
        color: #00234e;
        float: right;
        width: 50%;
        padding-top: 8px;
    }

    .slz-blog-detail.slz-portfolio .slz-portfolio-content .content .price-album .price span {
        font-size: 25px;
        color: #d32eb2;
    }

    .slz-blog-detail.slz-portfolio .slz-playlist {
        margin-bottom: 70px;
    }

    .slz-blog-detail.slz-portfolio .project-detail-wrapper {

    }

    

    .sc_portfolio_list .slz-list-block > .item .slz-block-item-01.style-1 {
        margin-bottom: 0;
    }

/*=====  End of 6. Portfolio Single  ======*/


/*=====================================
=            7. Responsive            =
=====================================*/

    @media screen and (max-width: 1024px) {
        .slz-carousel-wrapper.layout-2 .slz-carousel-content .img-content img,
        .slz-carousel-wrapper.layout-3 .slz-carousel-content .img-content img {
            width: 300px;
            height: 300px;
        }

        .slz-carousel-wrapper.layout-2 .slz-carousel-content .sc_audio_portfolio .mejs-container .mejs-playlist ul li .playlist-name,
        .slz-carousel-wrapper.layout-3 .slz-carousel-content .sc_audio_portfolio .mejs-container .mejs-playlist ul li .playlist-name {
            width: 70%;
        }
    }

    @media screen and (max-width: 768px) {
        .slz-carousel-wrapper.layout-2 .slz-carousel-content .img-content,
        .slz-carousel-wrapper.layout-3 .slz-carousel-content .img-content {
            width: 30%;
        }

        .slz-carousel-wrapper.layout-2 .slz-carousel-content .content,
        .slz-carousel-wrapper.layout-3 .slz-carousel-content .content {
            width: 70%;
        }

        .slz-carousel-wrapper.layout-2 .slz-carousel-content .sc_audio_portfolio .mejs-container .mejs-playlist ul li .playlist-name,
        .slz-carousel-wrapper.layout-3 .slz-carousel-content .sc_audio_portfolio .mejs-container .mejs-playlist ul li .playlist-name {
            width: 74%;
        }

        .slz-carousel-wrapper.layout-2 .slz-carousel-content .img-content img,
        .slz-carousel-wrapper.layout-3 .slz-carousel-content .img-content img {
            width: 100%;
            height: auto;
        }

        .slz-carousel-wrapper.layout-2 .slz-carousel-content .block-img:before,
        .slz-carousel-wrapper.layout-3 .slz-carousel-content .block-img:before,
        .slz-carousel-wrapper.layout-2 .slz-carousel-content .block-img:after,
        .slz-carousel-wrapper.layout-3 .slz-carousel-content .block-img:after {
            content: none;
        }

        .slz-carousel-wrapper.layout-2 .slz-carousel-content .sc_audio_portfolio .mejs-container .mejs-playlist ul li,
        .slz-carousel-wrapper.layout-3 .slz-carousel-content .sc_audio_portfolio .mejs-container .mejs-playlist ul li {
            padding: 15px;
        }

        .sc_portfolio_list .slz-list-block > .item {
            margin-top: 0;
            margin-bottom: 60px;
        }

        .sc_portfolio_list .slz-list-block {
            margin-bottom: -60px;
        }

        .slz-blog-detail.slz-portfolio .slz-portfolio-content .content .price-album .btn-buy {
            min-width: 0;
        }
        .slz-block-item-01.portfolio-list.style-1 .block-content,
        .slz-block-item-01.portfolio-list.style-2 .block-content {
            padding: 15px 0 0 0;
        }
        .slz-block-item-01 .block-text {
            margin-top: 8px;
        }
        .slz-block-item-01.portfolio-list .block-read-more {
            margin-top: 15px;
        }
    }

    @media screen and (max-width: 767px) {
        .slz-carousel-wrapper.layout-2 .slz-carousel-content .sc_audio_portfolio .mejs-container .mejs-playlist ul li .playlist-name,
        .slz-carousel-wrapper.layout-3 .slz-carousel-content .sc_audio_portfolio .mejs-container .mejs-playlist ul li .playlist-name {
            width: 80%;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            vertical-align: bottom;
        }

        .slz-carousel-wrapper.layout-2 .slz-carousel-content .img-content,
        .slz-carousel-wrapper.layout-3 .slz-carousel-content .img-content {
            padding-left: 0;
        }

        .slz-carousel-wrapper.layout-2 .slz-carousel-content .content,
        .slz-carousel-wrapper.layout-3 .slz-carousel-content .content {
            padding-right: 0;
        }

        .sc_portfolio_list .tab-list-wrapper .tab-list li {
            margin: 0 5px 5px 0;
        }

        .slz-blog-detail.slz-portfolio .slz-portfolio-content .content .price-album {
            text-align: center;
        }

        .slz-blog-detail.slz-portfolio .slz-portfolio-content .content .price-album .price {
            display: block;
            float: none;
            margin: 0 auto;
            padding-top: 15px;
        }

        .slz-blog-detail.slz-portfolio .slz-portfolio-content .block-image {
            display: block;
            width: 100%;
        }

        .slz-blog-detail.slz-portfolio .slz-portfolio-content .content {
            display: block;
            padding-left: 0;
            padding-top: 30px;
        }

        .slz-blog-detail.slz-portfolio .slz-portfolio-content .content {
            display: block;
            padding-left: 0;
            padding-top: 30px;
        }

        .slz-blog-detail.slz-portfolio .slz-portfolio-content .content .price-album {
            text-align: left;
        }

        .slz-blog-detail.slz-portfolio .slz-portfolio-content .content .price-album .btn-buy {
            min-width: 150px;
        }

        .slz-blog-detail.slz-portfolio .slz-portfolio-content .content .price-album .price {
            display: inline-block;
            padding-top: 8px;
            float: right;
        }

    }

    @media screen and (max-width: 600px) {
        .slz-carousel-wrapper.layout-2 .slz-carousel-content .img-content,
        .slz-carousel-wrapper.layout-2 .slz-carousel-content .content {
            width: 100%;
            padding: 0;
        }

        .sc_portfolio_list .slz-project-carousel.layout-3 .slz-carousel-content {
            margin-left: 0;
            margin-right: 0;
        }

        .slz-carousel-wrapper.layout-3 .slz-carousel-content .img-content,
        .slz-carousel-wrapper.layout-3 .slz-carousel-content .content {
            width: 100%;
            float: none;
            padding-left: 0;
            padding-right: 0;
        }

        .slz-carousel-wrapper.layout-2 .slz-carousel-content .sc_audio_portfolio .mejs-container .mejs-playlist ul li .playlist-name,
        .slz-carousel-wrapper.layout-3 .slz-carousel-content .sc_audio_portfolio .mejs-container .mejs-playlist ul li .playlist-name {
            width: 85%;
        }

        .slz-carousel-wrapper.layout-2 .slz-carousel-content .block-img,
        .slz-carousel-wrapper.layout-3 .slz-carousel-content .block-img {
            width: 100%;
            margin-bottom: 25px;
        }

        .sc_portfolio_list .slz-list-block > .item {
            width: 100%;
        }

        .sc_portfolio_list .slz-list-block > .item:nth-child(-n + 2) {
            margin-top: 45px;
        }

        .sc_portfolio_list .slz-list-block > .item:first-child {
            margin-top: 0;
        }

        .sc_portfolio_list .slz-list-block > .item:last-child {
            margin-bottom: 0;
        }
        .sc_portfolio_list .slz-list-block {
            margin-bottom: 0;
        }
    }

    @media screen and (max-width: 414px) {
        .slz-carousel-wrapper.layout-2 .slz-carousel-content .sc_audio_portfolio .mejs-container .mejs-playlist ul li .playlist-name,
        .slz-carousel-wrapper.layout-3 .slz-carousel-content .sc_audio_portfolio .mejs-container .mejs-playlist ul li .playlist-name {
            width: 83%;
        }
    }

    @media screen and (max-width: 380px) {
        .slz-carousel-wrapper.layout-2 .slz-carousel-content .sc_audio_portfolio .mejs-container .mejs-playlist ul li .playlist-name,
        .slz-carousel-wrapper.layout-3 .slz-carousel-content .sc_audio_portfolio .mejs-container .mejs-playlist ul li .playlist-name {
            width: 80%;
        }
        .slz-blog-detail.slz-portfolio .slz-portfolio-content .content .price-album .btn-buy {
            min-width: 0;
        }
    }

    @media screen and (max-width: 320px) {
        .slz-carousel-wrapper.layout-2 .slz-carousel-content .sc_audio_portfolio .mejs-container .mejs-playlist ul li .playlist-name,
        .slz-carousel-wrapper.layout-3 .slz-carousel-content .sc_audio_portfolio .mejs-container .mejs-playlist ul li .playlist-name {
            width: 75%;
            font-size: 14px;
        }
    }

/*=====  End of 7. Responsive  ======*/