/**
 *    [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 max 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 max width 1600px  ----------*/
        
    /*----------  1.2. Media screen max width 1024px  ----------*/
        @media screen and (max-width: 1024px) {
            .slz-main-menu-mobile .slz-menu-wrapper .sub-menu .mb-dropdown-open > a {
                background: transparent;
            }
            .slz-footer-top .slz-widget-contact .slz-widget-contact-info .item .icons {
                display: inline-block;
            }
            .slz-topbar-list.float-r i {
                color: #ffffff;
            }
        }

    /*----------  1.3. Media screen max width 768px  ----------*/
        @media screen and (max-width: 768px) {
            .slz-footer-top {
                position: relative;
                top: 0;
                margin-bottom: 0;
            }
            .slz-footer-top .col-sm-12 {
                padding: 0;
            }
            .slz-footer-top .footer-top-wrapper:before {
                content: none;
            }
            .slz-footer-top .slz-widget {
                width: 100%;
                display: block;
            }
            .slz-footer-top .slz-widget + .slz-widget {
                margin-top: 20px;
            }
            .slz-footer-top .slz-widget-contact {
                text-align: center;
            }
            .slz-footer-top .slz-widget-contact .slz-widget-contact-info .item .icons {
                display: none;
            }
            .slz-footer-top .slz-widget-contact .slz-widget-contact-info .item .contact-title {
                font-size: 18px;
            }
            .slz-footer-top .slz-widget-contact .slz-widget-contact-info .item .text {
                font-size: 20px;
            }
            .slz-footer-top .slz-widget-send-mail {
                padding-left: 0;
            }
            .slz-footer-main {
                padding-top: 50px;
            }
            .slz-template-02 .list-layout .slz-block-item-01.style-2 .block-image {
                width: 100%;
                display: block;
            }
            .slz-template-02 .list-layout .slz-block-item-01.style-2 .block-content {
                width: 100%;
                display: block;
            }
            .audio-wrapper  .mejs-controls div.mejs-time-rail{
                width: calc(100% - 130px)!important;
            }
            .header-transparent .slz-header-fixed .slz-main-menu-mobile .slz-menu-wrapper > li > a,
            .header-transparent .slz-header-fixed .slz-menu-wrapper > .current-menu-item > a,
            .header-transparent .slz-header-fixed .slz-menu-wrapper > li:hover > a {
                color: #F13E4B;
            }
            .sc_counter.sc-counter-layout-1-style-2 ~ .text-l {
                margin-top: 80px;
            }
        }

    /*----------  1.4. Media screen max width 767px  ----------*/
        @media screen and (max-width:767px) {
            .header-transparent .slz-header-main {
                top: 0;
            }
            .slz-block-item-01 .slz-carousel-syncing .slider-nav{
                display: none;
            }
            .slz-block-item-01 .slz-carousel-syncing .slick-dots{
                bottom: -25px;
            }
            .slz-block-item-01 .block-image.has-quote{
                padding: 30px 40px;
            }
            .slz-block-item-01 .block-quote-wrapper{
                padding: 45px 20px;
            }
            .block-quote-wrapper .block-quote:before{
                font-size: 90px;
            }
            .slz-block-item-01 .block-quote-wrapper .block-quote{
                font-size: 20px;
            }
            .slz-blog-detail .slz-block-item-01 .block-content .title{
                font-size: 30px;
            }
            .slz-block-item-01 .audio-wrapper{
                padding: 10px 5px;
            }
            .mejs-controls div.mejs-time-rail{
                width: calc(100% - 80px)!important;
                position: relative;
            }
            .audio-wrapper .mejs-controls .mejs-time-rail .mejs-time-total{
                width: 100%!important;
            }
            .audio-wrapper .mejs-container .mejs-controls .mejs-duration-container{
                display: none;
            }
            .mejs-controls a.mejs-horizontal-volume-slider,
            .audio-wrapper .mejs-container .mejs-controls .mejs-volume-button{
                display: none;
            }
            .padding-section-for-mobile .vc_column-inner {
                padding-right: 15px !important;
            }
            .padding-section-for-mobile .slz-list-block {
                margin: 0;
            }
            .sc_tags.tags-links {
                padding-left: 0;
            }
            .block-info li {
                margin-bottom: 10px;
            }
            .padding-section-for-mobile {
                padding-bottom: 100px;
            }
            .banner-give-a-hand > .vc_column-inner{
                padding-top: 100px;
                padding-bottom: 100px !important;
                padding-left: 25px !important;
                padding-right: 25px !important;
                background-size: initial !important;
                -webkit-background-size: initial !important;
                background-position: center center !important;
            }
            .slz-header-mobile-topbar .slz-header-fixed .slz-main-menu-mobile .nav-wrapper + .slz-menu-wrapper {
                height: calc(100vh - 275px);
            }
            .sc_counter.sc-counter-layout-1-style-2 ~ .text-l {
                text-align: center;
            }
            .slz-block-item-01 .block-text + .block-info {
                float: none;
            }
            .slz-block-item-01 .block-read-more {
                float: none;
                display: block;
                margin: 15px auto 0;
            }
            
            .tab-filter li, .tab-list li{
                margin-top: 0px;
                margin-bottom: 20px;
            }
            .home-3-events-carousel .slz-list-block {
                margin: 0;
            }
        }

    /*----------  1.5. Media screen max width 600px  ----------*/

        @media screen and (max-width: 600px) {
            .slz-header-topbar .float-r {
                display: none;
            }
            .slz-volunteer-form .btn-submit-wrapper{
                display: block;
                width: 100px;
                margin-bottom: 10px;
            }
            .slz-volunteer-form{
                padding: 20px;
            }
        }

    /*----------  1.6. Media screen max width 480px  ----------*/
        @media screen and (max-width: 480px) {
            .slz-footer-top .footer-top-wrapper {
                padding: 30px 20px;
            }
            .slz-footer-top .slz-widget-send-mail .widget-content .form-control:only-of-type {
                width: calc( 100% - 60px );
            }
            .slz-footer-top .slz-widget-send-mail .slz-btn {
                font-size: 0;
                width: auto;
                padding: 0 18px;
                margin-left: 15px;
                min-width: 0;
            }
            .slz-footer-top .slz-widget-send-mail .slz-btn:after {
                content: '\f1d9';
                padding-left: 0;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
            }
            .slz-block-item-01 .block-image.has-quote{
                padding: 20px 15px;
            }
            .slz-block-item-01 .block-content{
                padding: 20px;
            }
            .slz-blog-author .media-left {
                position: relative;
                width: 100%;
            }
            .slz-blog-author .media-left .media-image {
                position: relative;
                top: 10px;
                margin: 0 auto;
            }
            .slz-blog-author .media-right {
                width: 100%;
                margin: 0;
                padding: 40px 30px 30px;
            }
            .wpcf7 .cf7-form-control.left,
            .wpcf7-form .cf7-form-control.left {
                width: 100%;
                margin-right: 0;
            }
            .wpcf7 .cf7-form-control.right,
            .wpcf7-form .cf7-form-control.right {
                width: 100%;
                margin-left: 0;
            }
        }

    /*----------  1.7. Media screen max width 414px  ----------*/

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

    /*----------  1.9. Media screen max width 320px  ----------*/
        @media screen and (max-width:320px ) {

            .slz-blog-detail .slz-block-item-01 .block-content .title{
                font-size: 22px;
            }
            .slz-header-topbar {
                display: none;
            }

            .slz-map-01 .office-list,
            .slz-map-01 .office-wrapper .office-list .mCustomScrollBox {
                max-height: none !important;
            }
        }


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