/******************************************
* Media Queries (Responsive Design)
*******************************************/
/*
WARNING! DO NOT EDIT THIS FILE!

To make it easy to update your theme, you should not edit the styles in this file. Instead
add your styles in Customizer > Additional CSS.

*/

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

    .wrap, .inner-wrap {
        max-width: 96%;
        margin: 0 auto;
    }

    .single .entry-meta {
        position: relative;
    }

    .single .entry-meta .entry-date,
    .single .entry-meta .entry-author {
        display: none;
    }

    .derive-posts-grid .wpzabb-post-column .wpzabb-post-grid-image a,
    .recent-posts article .post-thumb a,
    .recent-posts article .post-thumb-hidden a {
        height: auto;
    }

    .derive-posts-grid .wpzabb-post-column .wpzabb-post-grid-image a img,
    .recent-posts article .post-thumb a img,
    .recent-posts article .post-thumb-hidden a img {
        height: auto !important;
    }

    .nextprev-posts {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .nextprev-posts .prev-image, .nextprev-posts .next-image {
        height: auto;
    }

}


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

    .recent-posts .entry-title {
        font-size: 22px;
        line-height: 1.5;
    }

    .wrap, .inner-wrap {
        max-width: 92%;
    }

    .home .blog-archive {
        padding-top: 40px;
    }

    .archive-header.withbg {
        padding-top: 100px;
        margin-bottom: 40px;
    }

    .site-header {
        padding-right: 4%;
        padding-left: 4%;
    }

    .site-header .navbar-header { order: 1; margin-left: 0; }
    .site-header .sb-search { order: 2; right: 75px; }
    .site-header .header_social { order: 3; }
    .site-header .navbar-toggle { order: 4; }

    .site-header .navbar-toggle {
        display: block;
        margin-right: 0;
    }

    .site-header .nav {
        display: none;
    }

    /* Menu */
    .site-header.has-menu-overlay .navbar { position: relative; background: #111; }

    .side-nav .navbar-nav {
        display: block;
        margin-left: 0;
        position: relative;
    }

    .navbar-toggle { display: block; }

    .navbar-collapse { display: none; }

    .navbar-nav { float: none; }

    .side-nav .navbar-nav li.menu-item-has-children > a .child-arrow {
        content: "\f347";
        float: right;
/*        top: 50%;
        transform: translateY(-50%);*/

        font-family: 'dashicons';
        font-weight: normal;
        font-size: 22px;
        line-height: 100%;
        -webkit-font-smoothing: antialiased;
        color: #999;
        margin: 4px 0 0 10px;
        transition: 0.1s ease color, 0.5s ease transform;
    }

    .side-nav .navbar-nav li.menu-item-has-children > a .child-arrow:hover,
    .side-nav .navbar-nav li.menu-item-has-children > a .child-arrow:active {
        color: #fff;
    }

    .side-nav .navbar-nav li.menu-item-has-children.open > a .child-arrow {
        transform: rotate(180deg);
    }

    .side-nav .navbar-nav ul {
        display: none;
        margin-left: 20px;
    }

    .navbar-nav li {
        display: block;
        position: relative;
        float: none;
        margin: 10px 0;
        padding: 0 0 5px;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }
    .navbar-nav ul li,
    .navbar-nav li a { border: none; padding: 0; margin: 7px 0; }


    .navbar-nav ul li a { text-transform: none; font-weight: normal; font-size: 14px; }

    .navbar-nav a:hover { border: none; }

    .navbar-nav > li > a:hover { border: none; color: inherit; }

    .navbar-nav > li > a.sf-with-ul:hover { border-bottom: none }

    .navbar-nav li a { padding: 4px 0 }

    .navbar-nav ul:before { display: none }

    .navbar-nav ul ul { left: 0 }

    .navbar-nav li li a { color: #ccc }

    a.cart-button { float: none; margin-top: 12px; }

    .current-menu-item a, .current_page_item a, .current-menu-parent a, .current_page_parent a { border-bottom: none }

    .recent-posts .post-thumb img { max-width: 100%; height: auto; }


    .footer-widgets.widget-columns-4 .column {
        width: 48%;
        margin-right: 4%;
    }

    .footer-widgets.widget-columns-3 .column {
        width: 31%;
        margin-right: 3.5%;
    }

    .footer-widgets.widget-columns-2 .column {
        width: 48%;
        margin-right: 4%;
    }

    .footer-widgets.widget-columns-1 .column {
        width: 100%;
    }

    .footer-widgets.widget-columns-2 .column:nth-child(2n+2),
    .footer-widgets.widget-columns-3 .column:nth-child(3n+3),
    .footer-widgets.widget-columns-4 .column:nth-child(2n+2) {
        margin-right: 0;
    }

}


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

    .page .has-post-cover .entry-header .entry-title,
    .single .has-post-cover .entry-header .entry-title {
        margin-left: 4%;
        margin-right: 4%;
    }

    .single .entry-content,
    .page .entry-content {
        max-width: 94%;
        margin: 0 auto;
    }

    .derive-posts-grid .wpzabb-post-column:first-child .post-thumb,
    .recent-posts.wpz-featured-post article:first-child .post-thumb {
        display: none;
    }

    .site-header > * {
        margin-left: 10px;
        margin-right: 10px;
    }

}


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

    .home .blog-archive {
        padding-top: 20px;
    }

    .nextprev-posts .prev-title, .nextprev-posts .next-title {
        font-size: 18px;
    }

    .single .entry-content .reorderable-content > *,
    .page .entry-content .reorderable-content > * {
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .derive-posts-grid .wpzabb-post-grid, #recent-posts {
        grid-template-columns: 1fr 1fr;
    }

    .derive-posts-grid .wpzabb-post-grid #infscr-loading,
    .recent-posts .navigation,
    .infinite-scroll #infinite-handle {
        grid-column-end: span 2;
    }

    .site-header .sb-search { right: 8%; }

    .navbar-brand-wpz img { max-width: 100%; height: auto; max-height: 100px; width: auto; }

    .inner-wrap .site-main { width: 100%; }
    .inner-wrap .sidebar--shop { width: 100%; }

    .section-title { font-size: 20px; margin-top: 40px; }

    .page .has-post-cover .entry-cover,
    .single .has-post-cover .entry-cover {
        /*align-items: end;*/
        min-height: 450px;
    }
    .page .has-post-cover .entry-header .entry-meta, .single .has-post-cover .entry-header .entry-meta { font-size: 16px !important; }

    .page .has-post-cover .entry-header .entry-title, .single .has-post-cover .entry-header .entry-title { margin-bottom: 10px; }


    .recent-posts .entry-body { width: 100%; float: none; max-width: 100%; }

    .recent-posts .entry-meta { width: 100%; float: none;  }

    .recent-posts .entry-meta p { float: left; margin-right: 15px; }

    .recent-posts .post-thumb img { max-width: 100%; height: auto; }


    #respond input[type="text"] { width: 100% }

    .form-allowed-tags { display: none }

    .feature-posts-list small { font-size: 14px; }

    .footer-widgets { display: block; }

    .footer-widgets .column {
        width: 100% !important;
        display: block;
        border: none;
    }

    .section-footer .zoom-instagram-widget .zoom-instagram-widget__items .zoom-instagram-widget__item a {
        max-width: 150px;
        max-height: 150px;
    }


}

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

    .category_description { font-size: 14px; }

    .navbar-brand-wpz h1 { letter-spacing: 0; line-height: 1; }
    .navbar-brand-wpz a { font-size: 20px; }

    .page .entry-content, .single .entry-content {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .recent-posts .entry-meta { font-size: 14px; }

    .page .has-post-cover .entry-header .entry-meta, .single .has-post-cover .entry-header .entry-meta { font-size: 14px !important; }
    .page .has-post-cover .entry-cover, .single .has-post-cover .entry-cover { align-items: center; }

    .entry-title { font-size: 24px; line-height: 1.5;}

    .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product,
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
        float: none;
        width: 100%;
    }

    .woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering {
        float: none;
    }

    .woocommerce-pagination .page-numbers, .paging-navigation .page-numbers {
        padding: 0 5px;
    }

    .paging-navigation .prev .arrow,
    .paging-navigation .next .arrow {
        display: none;
    }

    .page .has-post-cover .entry-header .entry-title, .single .has-post-cover .entry-header .entry-title { font-size: 24px }

    .widget_wpzoom-instagram li:nth-child(3n+3) { margin-right: 15px }

    .side-nav__close-button { display: block; }

    .side-nav-open .site .navbar-toggle .icon-bar:nth-child(2) { -webkit-transform: rotateZ(-40deg) translate3d(4px, 17px, 0); transform: rotateZ(-40deg) translate3d(4px, 17px, 0); width: 12px; }
    .side-nav-open .site .navbar-toggle .icon-bar:nth-child(3) { -webkit-transform: translateX(3px); -ms-transform: translateX(3px); transform: translateX(3px); opacity: 1; }
    .side-nav-open .site .navbar-toggle .icon-bar:nth-child(4) { -webkit-transform: rotateZ(40deg) translate3d(4px, -17px, 0); transform: rotateZ(40deg) translate3d(4px, -17px, 0); width: 12px; }

    .side-nav__wrap { padding-top: 20px; }

    .site-info { font-size: 14px ; }

    .site-info .copyright, .site-info .designed-by {
        width: 100%;
        float: none;
        text-align: center;
        margin-bottom: 0;
    }

    .header_social { display: none; }

}


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

    .derive-posts-grid .wpzabb-post-grid,
    #recent-posts {
        grid-template-columns: 1fr;
    }

    .derive-posts-grid .wpzabb-post-grid #infscr-loading,
    .recent-posts .navigation,
    .infinite-scroll #infinite-handle {
        grid-column-end: span 1;
    }

    .wrap, .inner-wrap {
        max-width: 90%;
    }

    .site-header {
        padding-right: 5%;
        padding-left: 5%;
    }
}


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

    .site-header .sb-search { right: 11%; }

}

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

    .comment-author .comment-meta {
        display: block;
    }

    .site-header.headroom--not-top .navbar-brand-wpz h1 a,
    .site-header.headroom--not-top .navbar-brand-wpz h1 {
        font-size: 28px;
    }

    .side-nav-open .site {
        -webkit-transform: translateX(-86%);
            -ms-transform: translateX(-86%);
                transform: translateX(-86%);
    }

    .side-nav {
        width: 86%;
    }

    .side-nav-transitioning,
    .side-nav-open .side-nav-overlay {
        right: 86%;
    }

    .side-nav__scrollable-container {
        -webkit-transform: translateX(80%);
            -ms-transform: translateX(80%);
                transform: translateX(80%);
    }

    .side-nav__wrap {
        padding-bottom: 30px;
    }

    .navbar-nav ul {
        width: auto;
    }

    .side-nav .widget {
        margin-bottom: 30px;
    }

    .side-nav .title {
        margin-bottom: 10px;
    }
}

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

    .side-nav__scrollable-container {
        width: 100%;
    }
}
