/**
*
* @package Cocoon
*
* @since 1.0
* 
* ========================
* RESPONSIVE STYLES
* ========================
*     
**/




/*------------------------------------------
  Responsive Grid Media Queries
--------------------------------------------*/


/* ---- Start of min-width 992px and max-width 1024px CSS ---- */

@media all and (min-width: 992px) and (max-width: 1024px) {
    .hamburger {
        width: 100%;
        text-align: right;
    }
}


/* ---- Start of max-width 1024px CSS ---- */

@media (max-width: 1024px) {
    .d-flex {
        display: block !important;
    }
    #main-nav .navbar-nav,
    header.header2 .header-content .extra-menu-items,
    header.header2 .header-content .general-search-wrapper,
    header.header2 .navigation-wrapper {
        display: none;
    }
    a.mobile-cart {
        display: block !important;
    }
    .hamburger {
        display: inline-block !important;
    }
    .footer-copyright-area {
        text-align: center;
    }
    body.admin-bar nav#main-mobile-nav {
        margin-top:  32px;
    }
    header.header2 .header-content .logo-wrapper {
        width: auto !important;
    }
}


/* ---- End of max-width 992px CSS ---- */


/* ---- Start of max-width 992px CSS ---- */

@media (max-width: 992px) {
    
    /**************** 
		COUNTER
	****************/
    .counter {
        margin-bottom: 30px;
        text-align: center !important;
    }
    .countdown {
        width: 100% !important;
        margin: 0;
        left: 0;
        padding: 0;
        height: auto;
    }
    .countdown .CountdownSeparator {
        display: none;
    }
    .countdown .CountdownContent {
        width: 25%;
        height: 70px;
        border: none;
        font-size: 30px;
        text-align: center;
        display: inline-block;
        margin: 0;
        letter-spacing: 0;
        line-height: inherit;
        float: none;
    }
    .CountdownContent .CountdownLabel {
        margin-top: 0;
    }
    /**************** 
		COMMENTS
	****************/
    .comment-list .children > .depth-3 .children {
        padding:  0;
    }
    /**************** 
		WIDGETS
	****************/
    .widget ul li li {
        padding: 0;
    }
}

/* ---- End of max-width 992px CSS ---- */


/* ---- Start of min-width 480px and max-width 768px CSS ---- */

@media all and (min-width: 480px) and (max-width: 768px) {}


/* ---- End of min-width 480px and max-width 768px CSS ---- */


@media all and (max-width: 782px) { 
    /**************** 
		HEADER
	****************/
    .admin-bar header.header1.header-fixed {
        top: 46px !important;
    }
    body.admin-bar nav#main-mobile-nav {
        margin-top:  46px;
    }
}


/* ---- Start of max-width 767px CSS ---- */

@media all and (max-width: 767px) {
    .sidebar-left {
        order: 1;
    }
    /**************** 
		BLOG
	****************/
    /****** Blog - Sidebar ********/
    .sidebar {
        margin-top: 50px;
    }
    /**************** 
		PRICING TABLE
	****************/
    .pricing-table,
    .pricing-table2 {
        margin-bottom: 40px !important;
    }
    /**************** 
		TABS
	****************/
    .wpb-js-composer .vc_tta.vc_general.vc_tta-style-classic.vc_tta-color-white.vc_tta-tabs-position-top .vc_tta-panel-body {
        padding: 20px !important;
    }
    /**************** 
		ICON BOXES
	****************/
     .icon-box.icon-top.icon-default {
        text-align: center;
        max-width: 420px;
        margin: auto;
        margin-bottom: 30px;
    }
    .icon-box.icon-left.icon-default {
        max-width: 420px;
        margin-bottom: 30px;
    }
    /**************** 
		NEWSLETTER
	****************/
    .cocoon-newsletter.nl-style-2 form {
        margin-top: 30px;
    }
}


/* ---- End of max-width 767px CSS ---- */


@media all and (max-width: 600px) { 
    /**************** 
		HEADER
	****************/
    .admin-bar header.header1.header-fixed {
        top: 0px !important;
    }
    body.admin-bar nav#main-mobile-nav.not-on-top {
        margin-top:  0;
    }
}


/* ---- Start of max-width 580px CSS ---- */

@media all and (max-width: 580px) {
    /**************** 
		HEADER
	****************/
    header.header2 a.mobile-cart {
        margin-right: 20px !important;
    }
    /**************** 
		BANNER GRID
	****************/
    .cocoon-banners-grid ul li {
        width: 100% !important;
    }
}


/* ---- End of max-width 580px CSS ---- */


/* ---- Start of max-width 480px CSS ---- */

@media all and (max-width: 480px) {
     /**************** 
		COOKIE BAR
	****************/
    .cocoon-cookies-inner {
        display: block !important;
        text-align: center;
    }
    .cocoon-cookies-inner .cookies-buttons {
        margin: 15px auto !important;
    }

}
/* ---- End of max-width 480px CSS ---- */


/* ---- Start of max-width 420px CSS ---- */

@media all and (max-width: 420px) {
    /**************** 
		OFF CANVAS
	****************/
    .cocoon-off-canvas-panel,
    .off-canvas-layer {
        display: none;
    }
}


/* ---- End of max-width 420px CSS ---- */


/* ---- Start of max-width 380px CSS ---- */

@media all and (max-width: 380px) {
     /**************** 
		NEWSLETTER
	****************/
    .cocoon-newsletter.nl-style-2 .nl-form input[type=submit] {
        min-width: 100px !important;
    }
    
}
/* ---- End of max-width 380px CSS ---- */