/*
 *    [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 768px
 *        - 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-icon-box-1 .wrapper-icon-image {
                min-width: 70px;
            }

            .slz-logo-wrapper .logo img {
                left: 50%;
                -webkit-transform: translate(-50%,-50%);
                -ms-transform: translate(-50%,-50%);
                -o-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
            }

            .slz-carousel-wrapper .btn, 
            .slz-image-carousel .btn {
                display: none !important;
            }

        }

    /*----------  1.3. Media screen max width 768px  ----------*/
        @media screen and (max-width: 768px) {
            .slz-main-title .title {
                font-size: 32px;
            }

            .slz-icon-box-1 .wrapper-icon-image {
                min-width: 70px;
            }

            .sc_isotope_post .slz-isotope-nav {
                margin-bottom: 40px;
            }

            .slz-footer-main {
                padding: 100px 0 90px 0;
            }
        }

    /*----------  1.4. Media screen max width 767px  ----------*/
        @media screen and (max-width: 767px) {
            .slz-map-01 {
                height: 350px;
            }

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

            .slz-list-block .slz-block-item-01.style-1 {
                margin-bottom: 20px;
            }

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

            .slz-block-team-01 .team-body {
                padding-top: 20px;
            }

            .modal-dialog .modal-content .modal-body iframe {
                width: 500px;
                max-width: none;
            }
        }

    /*----------  1.5. Media screen max width 600px  ----------*/
        @media screen and (max-width: 600px) {
            .slz-map-01 {
                height: 250px;
            }

            .slz-main-title .title {
                font-size: 30px;
            }

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

            .slz-footer-main .col-md-3.col-sm-6,
            .slz-footer-main .col-md-3.col-sm-6:nth-child(-n + 2) {
                margin-top: 50px;
            }

            .slz-footer-main .col-md-3.col-sm-6:first-child {
                margin-top: 0;
            }

            .slz-widgets.slz-wrapper-footer .widget-title, 
            .slz-widgets.slz-wrapper-footer .title-widget {
                margin-bottom: 25px;
            }

            .slz-wrapper-footer .slz-footer-bottom .item-wrapper {
                padding: 45px 0 40px 0;
            }

            .slz-title-command .title-command-wrapper  .title {
                font-size: 45px !important;
            }

            .slz-header-main.slz-header-fixed.slz-wpadminbar {
                top: 0px;
            }
        }

    /*----------  1.6. Media screen max width 480px  ----------*/
        @media screen and (max-width: 480px) {
            .slz-group-btn .slz-btn + .slz-btn, 
            .slz-btn + .slz-btn {
                margin-left: 15px;
                margin-top: 0;
            }

            .slz-widget-events .slz-event-01 .event-info {
                padding: 0 10px;
            }

            .slz-widget-events .slz-event-01 .event-info.info .info-img {
                padding-right: 10px;
            }

            .slz-widget-events .slz-event-01 .event-info.info .info-content {
                padding-left: 10px;
            }

            .slz-list-event-01 .search-event .search-field.half {
                width: 100%;
            }

            .slz-list-event-01 .search-event .search-field.half + .half {
                margin-left: 0;
                margin-top: 20px;
            }

            .sc-video.slz-block-video .title {
                font-size: 36px;
            }

            .slz-block-video .wrapper-video p {
                padding-left: 0 !important;
                padding-right: 0 !important;
                font-size: 16px !important;
            }

            .sc-video.slz-block-video .btn-play .icons {
                width: 50px;
                height: 50px;
                line-height: 48px;
                font-size: 18px;
            }

            .slz-testimonial-02 .quote-item {
                display: inline-block;
            }

            .modal-dialog .modal-content .modal-body iframe {
                width: 320px;
                height: 300px;
            }
            
        }

    /*----------  1.7. Media screen max width 414px  ----------*/
        @media screen and (max-width: 414px) {
            .slz-map-01 {
                height: 450px;
            }

            .slz-title-command .title-command-wrapper  .title {
                font-size: 35px !important;
            }

            .slz-logo-wrapper .logo img {
                left: auto;
                right: 0;
                -webkit-transform: translate(0, -50%);
                -ms-transform: translate(0, -50%);
                -o-transform: translate(0, -50%);
                transform: translate(0, -50%);
            }

            .slz-carousel-mockup {
                padding-top: 80px;
                padding-bottom: 80px;
            }

            .slz-event-single-block .slz-block-item-06.style-4 .block-image:before {
                padding-top: 60%;
            }

            .slz-event-single-block .slz-block-item-06.style-4 .block-content {
                padding: 20px 10px;
            }

            .slz-timeline .milestone .milestone-number-wrapper,
            .slz-timeline .milestone  .milestone-info-wrapper {
                padding: 0 10px;
            }
        }

    /*----------  1.8. Media screen max width 380px  ----------*/
        @media screen and (max-width: 380px) {
            .slz-map-01 {
                height: 350px;
            }

            .sc-video.slz-block-video .title {
                font-size: 32px;
            }

        }

    /*----------  1.9. Media screen max width 320px  ----------*/
        @media screen and (max-width: 320px) {
            .slz-main-title .title {
                font-size: 25px;
            }

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

            .slz-group-btn .slz-btn + .slz-btn, 
            .slz-btn + .slz-btn {
                margin-left: 15px;
                margin-top: 15px;
                margin-right: 15px;
            }

            .slz-testimonial-02 .img-wrapper {
                width: 50px;
                height: 50px;
            }
        }

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