/* RESPONSIVE */

/* DELETE THIS IF WANT TO FULL MOBILE */
@media only screen and (min-width: 980px) {
    .loop-wrap article .article-wrapper .entry-thumbnail {
        height: 225px;
        width: 300px;
    }
}
@media only screen and (min-width: 780px) {
    .loop-wrap .article-wrapper {
        display: block;
        float: left;
    }
    .loop-wrap article .article-wrapper .entry-category {
        display: block;
    }
    .loop-wrap article .article-wrapper .entry-category.entry-category-top {
        display:none;
    }
    .admin-bar .mobile-navigation-wrapper {
        padding-top: 46px;
    }
    #content {
        min-height: calc(100vh - 62px);
    }
    .sticky-nav-desktop .nav-header {
        position: sticky;
    }
    .main-navigation-wrapper,
    .main-navigation-wrapper .main-navigation {
        display: block;
    }
    .mobile-navigation-wrapper {
        display: none;
    }
    .search-bar {
        position: absolute;
        opacity: 0;
        visibility: hidden;
        z-index: 1091;
        background-color: var(--light-color, #fff);
        margin-left: calc(2.7rem + 0.75rem);
        width: calc(100% - 4.0rem + 0.75rem);
        padding-right: 0.75rem;
        padding-top: .5em;
        padding-bottom: .5em;
        border-top: 0;
    }
    .nav-mode-right .search-bar {
        margin-right: calc(2.7rem + 0.75rem);
        margin-left:0;
    }
    .comment-section-wrapper {
        max-width: calc(70% - 1em);
        margin-right: calc(30% + 1em);
    }

}

@media only screen and (max-width: 900px) and (min-width: 780px) {
    .header-meta .font-resizer-wrap {
        float: none;
        margin-left: auto;
        flex: 1 1 auto;
        width: calc(50% - 1em);
        margin-top: 1.5em;
    }
    .sidebar-enable .loop-wrap article .entry-content {
        display:none;
    }
}
@media only screen and (max-width: 639px) {
    .related-post-items .related-post-item {
        flex-basis: calc(50% - 1em);
    }
    body .wp-block-columns,
    body .wp-block-columns {
        flex-wrap: wrap;
    }

    body .wp-block-column,
    body .wp-block-column,
    body .wp-block-column:not(:only-child),
    body .wp-block-column:not(:only-child) {
        flex-basis: 100% !important;
        width: 100%;
        margin-left: 0;
    }
    .main-header-container {
        justify-content: center;
        text-align: center;
        width: 100%;
        flex-direction: column;
    }
    .main-header-container .header-logo {
        text-align: center;
        display: block;
        margin: auto;
    }
    .entry-content .wp-block-columns > .wp-block-column + .wp-block-column {
        margin-top: .5em;
    }
}

/* END DELETE THIS IF WANT TO FULL MOBILE */

/* USE BELOW IF USE FULL MOBILE */
/*
 * JUST LIKE 768px - We Follow The Admin Bar
 */
@media only screen and (max-width: 779px) {
    .header-right {
        justify-content: center;
    }
    .sticky-nav-mobile .nav-header {
        position: sticky;
    }
    .site-main .loop-wrap {
        display: flex;
        flex-wrap: wrap;
        column-gap: 1em;
    }
    .nav-links.prev-next a:first-child {
        padding-left: 0;
    }
    .nav-links.prev-next a:last-child {
        padding-right: 0;
    }
    .nav-header {
        border-bottom: 0;
        box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
    }
    .nav-header-container .menu-toggle,
    .mobile-home-button {
        display: block;
    }
    .nav-mode-right .nav-header-container {
        flex-direction: row;
    }
    .loop-wrap article .entry-content,
    body.home-mobile-no-sidebar #primary .sidebar-section,
    body:not(.top-menu-mobile-show) .nav-top,
    body:not(.top-header-mobile-show) .main-header,
    .nav-header-container > .toggle-search-btn,
    .main-navigation-wrapper {
        display: none;
    }
    .nav-bottom {
        display: flex;
    }
    .search-bar {
        border-top: 0;
        padding: 10px 5px;
        box-sizing: border-box;
        flex: 1;
        top: 0;
        margin-top: 0;
        opacity: 1;
        visibility: visible;
    }
    .search-bar .form-control,
    .search-bar input[type="search"].form-control {
        padding-left: 1em;
        padding-right: 0;
        font-size: 0.8em;
        border-right: 0;
    }
    .search-bar .input-group-text {
        padding: 0;
    }
    .search-bar .input-group-text,
    .search-bar .form-control,
    .search-bar input[type="search"].form-control {
        border-width: 1px;
    }
    /* CONTENT */
    .load-more-wrapper button {
        transition: none;
    }
    .content-article-wrapper > div {
        width: 100%;
    }
    .content-article-wrapper,
    .site-main {
        /*flex-direction: column;*/
    }
    .content-article-wrapper > .sidebar-enable {
        margin-right: 0;
        width: 100%;
        display: block;
    }
    .content-article-wrapper > .sidebar-enable + .sidebar-section {
        margin: 1em 0 0;
        box-sizing: border-box;
        display: block;
        width: 100%;
        padding: 0;
    }

    .content-article-wrapper .sidebar-enable + .sidebar-section .sidebar-entry,
    body.admin-bar .sidebar-enable + .sidebar-section .sidebar-entry,
    body .sidebar-enable + .sidebar-entry {
        position: relative;
        top: 0;
        display: block;
    }

    .site-content .sidebar-entry::after {
        clear: both;
        display: table;
        content: '';
    }
    .loop-wrap article {
        padding: 0;
        display: flex;
        align-items: flex-start;
        position: relative;
        flex: 1 1 calc(50% - 1em);
    }
    .content-article .navigation.pagination {
        margin: 1em auto;
    }
    .loop-wrap article .entry-thumbnail {
        float: none;
        width: 100%;
        max-width: 100%;
        align-items: stretch;
        vertical-align: middle;
        border-radius: 5px;
        margin-right: 0;
        display: flex;
        flex-direction: column;
        /*flex-basis: 100%;*/
    }
    .loop-wrap article .entry-thumbnail a {
        box-shadow: inset 0 0 4px rgba(0, 0, 0, .1);
        background-color: rgba(0, 0, 0, .1);
    }
    .loop-wrap article .entry-thumbnail img {
        aspect-ratio: 4/3;
        height: auto;
    }
    .loop-wrap article .entry-thumbnail img,
    .loop-wrap article .entry-thumbnail iframe {
        width: 100%;
        border-radius: 5px;
    }

    .loop-wrap article .entry-header {
        display: flex;
        align-content: space-between;
        flex: 1 1 100%;
        flex-direction: row;
    }
    .entry-category-header {
        display:none;
    }
    .loop-wrap article .entry-header,
    .loop-wrap article .entry-content {
        margin-left: 0;
        width: 100%;
    }
    .loop-wrap article .entry-title {
        position: relative;
        /* padding-top: 1em; */
        /* padding: 10px 0 0; */
        /*         padding-bottom: .5em; */
        right: auto;
        margin-bottom: 0;
        font-size: 1.1em;
        letter-spacing: 1px;
        font-weight: 400;
        width: 100%;
    }
    .loop-wrap article .entry-title a {
        display: flex;
        flex: 1 1 100%;
        flex-direction: column;
        flex-wrap: wrap;
    }
    .grid-list .loop-wrap article .entry-title {
        padding-top:0;
    }
    .loop-wrap .entry-category {
        margin: 1em 0;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .grid-list .entry-category {
        display: block;
    }
    .grid-list .loop-wrap article .entry-title {
        width: 100%;
    }
    .loop-wrap article .entry-date {
        font-size: .8em;
        margin: .3em 0;
    }
    .loop-wrap article .entry-author {
        font-size: .8em;
    }
    .grid-list .loop-wrap article {
        flex-basis: 100%;
        column-gap: 1em;
        margin: 1em 0 0;
    }
    .grid-list .loop-wrap .article-wrapper {
        display: flex;
        flex-direction: row;
        column-gap: 1em;
    }
    .grid-list .loop-wrap .entry-author,
    .grid-list .loop-wrap .entry-date:after,
    .grid-list .entry-category-top {
        display:none;
    }
    .grid-list .loop-wrap article .entry-thumbnail {
        width: calc(40% - 1em);
        flex-basis: calc(40% - 1em);
        min-width: 160px;
    }
    .grid-list .loop-wrap article .entry-header {
        flex-direction: row;
        flex: 0 1 60%;
        display:flex;
        align-content: flex-start;
    }
    .admin-bar .nav-header {
        top: 45px;
    }
    .admin-bar .mobile-navigation-wrapper {
        padding-top: 46px;
    }
    #content {
        min-height: calc(100vh - 62px);
    }
    .owl-carousel.owl-theme .owl-dots .owl-dot span {
        /* width: 10px; */
        /*         height: 10px; */
    }
    .slider-home-feature,
    .archive-feature,
    .home-feature.owl-carousel {
        margin-top: 0;
    }
    .slider-home-feature .home-feature.owl-carousel,
    .slider-home-feature .home-feature,
    .archive-feature,
    .feature-tags {
        position: relative;
        margin-left: -.75rem;
        margin-right: -.75rem;
        width: calc(100% + 1.5rem);
    }

    .singular .feature-image {
        margin-left: -.75rem;
        margin-right: -.75rem;
    }
    .singular .feature-image .feature-description {
        padding-left: .75rem;
        padding-right: .75rem;
    }
    .loop-filter {
        display: block;
    }
    /* COMMENT */
    .comment-form-author,
    .comment-form-email {
        width: 50%;
    }
    .comment-form-email {
        padding-left: .5em;
        padding-right: 0;
    }
    .comment-form-url {
        width: 100%;
        padding: 0;
    }
    .wp-block-column {
        flex-basis: 100%;
        width: 100%;
    }

    .archive-feature .feature-item .entry-thumbnail a::after {
        background-color: rgba(0,0,0, .4);
    }
    .archive-feature .feature-item .entry-title {
        font-size: 1.3em;
    }
    .archive-feature .feature-item .entry-header {
        display: block;
        padding-bottom: 3em;
    }
    .archive-feature .feature-item .entry-meta-data {
        visibility: visible;
        opacity:1;
        transform: translateX(0);
    }
    .archive-feature .feature-item .entry-header:before,
    .archive-feature .feature-item .entry-date:after,
    .archive-feature .feature-item  .entry-author {
        display: none;
    }
}


@media only screen and (max-width: 600px) {
    .admin-bar .nav-header {
        top: -1px;
    }
    .admin-bar .mobile-navigation-wrapper {
        padding-top: 0;
    }
    .header-meta .font-resizer-wrap {
        float: none;
        flex: 1 1 auto;
        width: 50%;
        margin: 1.5em 0 0;
        display:block;
    }
    .footer-copyright .footer-container {
        align-content: center;
        flex-direction: column;
    }
    .footer-social-content {
        margin-top: 1em;
    }
}

@media only screen and (max-width: 375px) {
    .related-post-items .related-post-item {
        flex-basis: 100%;
        flex-wrap: nowrap;
    }
    .related-post-items .related-post-container {
        display: flex;
        column-gap: 1em;
        flex-direction: row;
    }
    .related-post-items .related-post-title {
        margin-top: 0;
    }
    .related-post-items .related-post-item .related-post-thumbnail {
        max-width: 120px;
    }
}

/* 414 IS IPHONE XR */
@media only screen and (max-width: 414px) {
    .load-more-wrapper:after, .load-more-wrapper:before {
        max-width: 15%;
    }
    .entry-content > .code-block {
        max-width: none;
    }
    .breadcrumbs > .google-auto-placed > ins.adsbygoogle,
    .breadcrumbs + .google-auto-placed > ins.adsbygoogle,
    .entry-header .google-auto-placed > ins.adsbygoogle,
    .header-entry-wrap .google-auto-placed > ins.adsbygoogle,
    .article-wrapper > .google-auto-placed > ins.adsbygoogle,
    .article-container > .google-auto-placed > ins.adsbygoogle,
    .site-main > .google-auto-placed > ins.adsbygoogle,
    .site-main > ins.adsbygoogle,
    #footer > ins.adsbygoogle,
    #footer > .google-auto-placed > ins.adsbygoogle,
    .main-header > .google-auto-placed > ins.adsbygoogle,
    .main-header > ins.adsbygoogle,
    .site-content > .google-auto-placed > ins.adsbygoogle,
    .site-content > ins.adsbygoogle,
    .sidebar-entry > .google-auto-placed > ins.adsbygoogle,
    .sidebar-entry > ins.adsbygoogle,
    .singular article .entry-content > .google-auto-placed,
    .singular article .entry-content > ins.adsbygoogle,
    /* auto insert ads*/
    div > .code-block,
    /* end auto insert ads*/
    .sidebar-section > ins.adsbygoogle,
    .sidebar-section > .google-auto-placed > ins.adsbygoogle {
        margin-right: -.75rem !important;
        margin-left: -.75rem !important;
    }
}