/*
 *    [Table of contents]
 *
 *    [&. Content / #key]
 *    [Let press Ctrl + f and type of paste the key, then press Enter to search the content ]
 *
 *    Summary:
 *
 *    1. RESPONSIVE SCREEN
 *        - 1.0. Responsive for layout boxed style
 *        - 1.1. Media screen min width 1600px
 *        - 1.2. Media screen max width 1024px
 *        - 1.3. Media screen max width 991px
 *        - 1.4. Media screen max width 767px
 *        - 1.5. Media screen max width 600px
 *        - 1.6. Media screen max width 480px
 *        - 1.7. Media screen max width 414px
 *        - 1.8. Media screen max width 380px
 *        - 1.9. Media screen max width 320px
 */



/*=========================================
=            RESPONSIVE SCREEN            =
=========================================*/

    /*----------  1.0. Responsive for layout boxed style  ----------*/

        @media (min-width:992px) and (max-width:1023px) {
            .body-wrapper.style-boxed {
                width: auto!important
            }
            .body-wrapper.style-boxed .header-middle {
                width: auto;
            }
        }

        @media (min-width:1024px) and (max-width:1199px) {
            .body-wrapper.style-boxed {
                width: 1000px!important
            }
            .body-wrapper.style-boxed .header-middle {
                width: 1000px;
            }
            .body-wrapper.style-boxed .container {
                width: 100%
            }
        }

        @media (min-width:1200px) {
            .body-wrapper.style-boxed .container {
                width: 100%
            }
        }

        @media screen and (max-width: 991px) {
        	 /*boxed style*/
            .body-wrapper.style-boxed {
                width: auto!important
            }

            .body-wrapper.style-boxed .header-middle {
                width: auto;
            }
        }

    /*----------  1.1. Media screen min width 1600px  ----------*/

    /*----------  1.2. Media screen max width 1024px  ----------*/
        @media screen and (max-width: 1024px) {
            
            .slz-carousel-syncing .slider-nav:hover .slick-current .thumbnail-image:after {
                opacity: 0;
            }

            /*----------  T CSS Grass Theme  ----------*/
                .sc_counter.slz-column-4.layout-2 .item:nth-last-child(-n+4) .slz-counter-item-1:before,
                .sc_counter.slz-column-4.layout-2 .item:nth-child(4n) .slz-counter-item-1:after {
                    content: '';
                }
                .sc_counter.slz-column-4.layout-2 .item:nth-child(3n) .slz-counter-item-1:after {
                    content: none;
                }

                .sc_counter.slz-column-4.layout-2 .item:nth-last-child(-n+2) .slz-counter-item-1:before {
                    content: none;
                }

                .sc_counter.slz-list-block.slz-column-4 > .item:nth-child(-n + 4) {
                    margin-bottom: 0;
                }

                .sc_counter.layout-1.slz-column-4 > .item:nth-child(-n + 3) {
                    margin-bottom: 30px;
                }

                .sc_partner .slz-list-block.slz-column-4 > .item:nth-child(-n + 3) {
                    margin-bottom: 30px;
                }

                .style-1 .slz-list-contact-01 .slz-contact-01 {
                    padding: 55px 10px;
                }

                .coming-soon .main-count-wrapper .main-count {
                    padding: 45px 0px;
                }

                .slz-block-item-01.portfolio-list .block-image + .block-content .block-info {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    padding: 10px 10px;
                    margin: 0 0 8px;
                    background-color: rgba(255, 255, 255, 0.9);
                    transform: translateY(-100%);
                    -webkit-transform: translateY(-100%);
                }

                .sc_working_hour {
                    padding: 50px 50px;     

                }

        }
    /*----------  1.3. Media screen max width 991px  ----------*/

        @media screen and (max-width: 991px) {
            .slz-portfolio-single-block .slz-block-item-06 {
                padding: 30px;
            }

            .slz-portfolio-single-block .slz-block-item-06 .sc_image_carousel {
                display: block;
                width: 100%;
                top: 0;
            }
            
            .slz-portfolio-single-block .slz-block-item-06 .block-content {
                display: block;
                width: 100%;
                padding-left: 0;
                padding-top: 0;
                margin-top: 35px;
            }

            .slz-portfolio-single-block .slz-block-item-06 .block-content .block-title + .block-attributes,
            .slz-portfolio-single-block .slz-block-item-06 .block-content .block-title + .block-description {
                margin-top: 15px;
            }
        }

    /*----------  Media screen max width 768px  ----------*/
        @media screen and (max-width:768px) {

            /*----------  T CSS Grass Theme  ----------*/

                .sc_counter.slz-column-4.layout-2 .item:nth-child(3n) .slz-counter-item-1:after {
                    content: '';
                }

                .sc_counter.slz-column-4.layout-2 .item:nth-child(2n) .slz-counter-item-1:after {
                    content: none;
                }

                .coming-soon .main-count-wrapper .main-count {
                    padding: 30px 0px;
                }

                .st-california .coming-soon .main-count-wrapper .time {
                    font-size: 40px;
                }

                .st-california .coming-soon .main-count-wrapper .main-count {
                    padding: 25px 0;
                }

                .style-1 .slz-list-block.slz-list-contact-01.slz-column-3 .item:nth-child(-n + 2) {
                    margin-bottom: 30px;
                }
                
                .slz-contact-form-2 {
                    padding: 40px 25px 200px 25px;
                }

                .cf7-grass .cf7-input-50 {
                    width: 100%;
                }

                .cf7-grass .slz-two-col-contact-left,
                .cf7-grass .slz-two-col-contact-right {
                    padding: 0;
                }

                 .sc-contact-form + .slz-list-contact-01 {
                    padding: 0 25px;
                    transform: translateY(-25%);
                }

                .slz-block-item-01.portfolio-list .block-info li {
                    margin-right: 5px;
                }

                .slz-footer-banner .banner-image,
                .slz-header-banner .banner-image {
                    display: none;
                }

                .slz-footer-banner .banner-description,
                .slz-header-banner .banner-description {
                    margin-left: 0;
                    margin-right: 0;
                    width: 100%;
                }

            
        }
    /*----------  1.4. Media screen max width 767px  ----------*/

        @media screen and (max-width: 767px) {
            .slz-portfolio-single-block .slz-block-item-06 .slz-image-carousel .slick-arrow {
                display: block!important;
            }
        }

    /*----------  1.5. Media screen max width 600px  ----------*/
        
        @media screen and (max-width: 600px) {
            .slz-portfolio-single-block .slz-block-item-06 {
                padding: 20px;
            }

            .slz-carousel-syncing .slider-for + .slider-nav,
            .slz-carousel-syncing .slider-nav + .slider-for {
                margin-top: 20px;
            }

            .slz-carousel-syncing .slider-nav .item {
                margin: 0 10px;
            }

            .sc_gallery_carousel.slz-carousel-syncing .slider-nav {
                margin-left: -10px;
                margin-right: -10px;
            }


            /*----------  T CSS Grass Theme  ----------*/
                .coming-soon .main-count-wrapper .time {
                    font-size: 30px;
                }

                .coming-soon .main-count-wrapper .stat-label {
                    font-size: 15px;
                }

                .slz-counter-item-1 .wrapper-icon {
                    font-size: 50px;
                }

                .slz-counter-item-1 .content-cell .suffix, 
                .slz-counter-item-1 .content-cell .prefix {
                    font-size: 30px;
                }

                .slz-counter-item-1 .content-cell .number {
                    font-size: 40px;
                }

                .style-4 .slz-main-title .title,
                .style-4 .slz-main-title .title .main-color {
                    font-size: 24px;
                }

                .style-4.text-l .slz-main-title .title {
                    padding-left: 80px;
                }

                .style-4.text-r .slz-main-title .title {
                    padding-right: 80px;
                }

                .style-4 .slz-main-title .title:before,
                .style-4.text-r .slz-main-title .title:after {
                    top:27px;
                }

                .st-california .coming-soon .main-count-wrapper .time {
                    font-size: 20px;
                }

                .st-california .coming-soon .main-count-wrapper .main-count {
                    padding: 13px 0;
                }

                .slz-page-countdown {
                    padding: 30px 20px;
                }

                .style-4.text-l .slz-main-title .title:after, 
                .style-4.text-r .slz-main-title .title:after,
                .style-4 .slz-main-title .title:before {
                    width: 70px;
                }
        }
    /*----------  1.6. Media screen max width 480px  ----------*/
        @media screen and  (max-width: 480px) {


            /*----------  T CSS Grass Theme  ----------*/
                .slz-main-title .title,
                .slz-main-title .title .main-color {
                    font-size: 24px;
                }

                .style-1 .slz-main-title .title,
                .style-1 .slz-main-title .title .main-color,
                .style-3 .slz-main-title .title,
                .style-3 .slz-main-title .title .main-color {
                    font-size: 18px;
                }

                .slz-main-title .subtitle,
                .sc_main_title.style-2 .slz-main-title .subtitle,
                .sc_main_title.style-3 .slz-main-title .subtitle {
                    font-size: 14px;
                }

                .sc_main_title.style-4 .slz-main-title .subtitle {
                    font-size: 30px;
                }

                .sc_counter.slz-column-4.layout-2 .item:nth-last-child(-n+2) .slz-counter-item-1:before {
                    content: '';
                }

                .sc_counter.slz-column-4.layout-2 .item:nth-last-child(-n+1) .slz-counter-item-1:before {
                    content: none;
                }

                .sc_counter.slz-column-4.layout-2 .item:nth-child(n) .slz-counter-item-1:after {
                    content: none;
                }
                
                .coming-soon {
                    margin: 0 -15px;
                }
                .coming-soon .main-count-wrapper {
                    padding: 0 12px;
                }

                .coming-soon .main-count-wrapper .main-count {
                    padding: 15px 0;
                }

                .style-1 .slz-list-contact-01 .slz-contact-01 {
                    padding: 30px 10px;
                }

                .sc-contact-form + .slz-list-contact-01 {
                    transform: translateY(-18%);
                }


                .style-4.text-r .slz-main-title .title:after,
                .style-4 .slz-main-title .title:before {
                    top: 15px;
                }

                .style-2 .slz-contact-01 {
                    padding: 10px 5px;
                }

                .slz-shortcode-send-mail2 .input-group-button{
                    display: block;
                    width: 100%;
                    margin-top: 20px;
                }

                .slz-shortcode-send-mail2 .form-control {
                    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.15);
                }

                .slz-shortcode-send-mail2 .slz-input-group {
                    border: none;
                    display: block;
                }

                .sc_working_hour {
                    padding: 40px 40px;
                }

                .content-cell .content-left {
                    width: 44%;
                }

                .sc_working_hour .description, .content-cell {
                    font-size: 14px;
                }

                .sc_working_hour .description:before,
                .sc_working_hour .description:after {
                    top: 10px;
                }

                .slz-footer-banner .banner-description strong {
                    font-size: 20px;
                }

                .coming-soon .main-count-wrapper + .main-count-wrapper:before {
                    font-size: 30px;
                }
        }

    /*----------  1.7. Media screen max width 414px  ----------*/
        @media screen and (max-width: 414px) {
            .slz-portfolio-single-block .slz-block-item-06 .block-attributes ul li .name {
                min-width: 0;
            }

            .slz-portfolio-single-block .slz-block-item-06 .block-attributes ul li .value {
                margin-left: 5px;
            }
        }

    /*----------  1.8. Media screen max width 380px  ----------*/

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

            /*----------  T CSS Grass Theme  ----------*/
                .sc_working_hour .description:before, .sc_working_hour .description:after {
                    width: 60px;
                }

                .sc_working_hour .description:before {
                    left: -70px;
                }

                .sc_working_hour .description:after {
                    right: -70px;
                }
        }

    /*----------  1.9. Media screen max width 320px  ----------*/

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


            /*----------  T CSS Grass Theme  ----------*/
                .slz-block-item-01.portfolio-list .block-image + .block-content .block-info {
                    padding: 10px 3px;
                }

                .coming-soon .main-count-wrapper {
                    padding: 0 6px;
                }
        }

/*=====  End of RESPONSIVE SCREEN  ======*/