/*  12.0 ===== Medias/Responsive =====   */

/*
 * Does the same thing as <meta name="viewport" content="width=device-width">,
 * but in the future W3C standard way. -ms- prefix is required for IE10+ to
 * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
 * the meta tag. See https://core.trac.wordpress.org/ticket/25888.
 */

@-ms-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}

/* All Tablet Portrait size smaller than standard 1399 (devices and browsers) */

/* All Tablet Portrait size smaller than standard 1199 (devices and browsers) */

/* @media only screen and (max-width: 1200px) {} */

/* All Tablet Portrait size smaller than standard 1023 (devices and browsers) */

@media only screen and (max-width: 1023px) {
    .mean-container .mean-bar {
        width: 50px;
    }

    .mean-container .mean-nav {
        float: none;
        width: 100%;
        position: absolute;
        right: 0;
        top: 62px;
    }

    .main-navigation li.current-menu-item::after,
    .main-navigation ul li.current_page_item::after {
        width: auto;
    }

    .site-branding {
        max-width: 220px;
        width: auto;
    }

    .site-branding img {
        max-width: 100%;
    }

    .navbar {
        position: static;
    }

    .hgroup-right {
        width: 100%;
        padding-left: 0;
        height: 0;
    }

    .mean-container a.meanmenu-reveal {
        width: 30px;
        height: 30px;
        padding: 0;
        top: 28px;
        bottom: 0;
        margin: auto;
    }

    .mean-container .mean-nav ul li {
        margin: 0;
    }

    .meanmenu-reveal.meanclose span:nth-child(2n) {
        opacity: 0;
    }

    .mean-container .mean-nav ul li a:hover {
        background: var(--secondary);
    }

    .mean-container .mean-nav > ul {
        background: var(--primary) none repeat scroll 0 0;
        width: 110.2%;
        width: calc(100% + 30px);
        width: -webkit-calc(100% + 30px);
        margin: 0;
        top: 70px;
    }

    .main-navigation ul li.menu-item-has-children > a::after {
        display: none;
    }

    .main-navigation ul ul {
        transform: none;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform-origin: none;
        transition: all 0s ease 0s;
        -webkit-transition: all 0s ease 0s;
        -moz-transition: all 0s ease 0s;
        -o-transition: all 0s ease 0s;
        margin: 0;
        position: static;
        top: 0px;
        white-space: none;
        z-index: 999;
        background: #fff;
        min-width: 100%;
        box-shadow: none;
    }

    .main-navigation ul li.menu-item-has-children > ul > li.menu-item-has-children > a::after {
        display: none;
    }

    .main-navigation li li {
        border-bottom: none;
    }

    .mean-container .mean-nav ul ul {
        background: none;
    }

    .main-navigation ul li:hover ul {
        transform: none;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
    }

    .main-navigation ul > li > a::before,
    .main-navigation ul > li > a::after {
        display: none;
    }

    .mean-container .mean-nav ul li a.mean-expand {
        background: #258bc6;
        line-height: 1.1;
        border-left: 1px solid rgba(255, 255, 255, 0.4);
    }

    .mean-container .mean-nav ul li a.mean-expand::before,
    .main-navigation ul > li > a.mean-expand::before {
        content: "\f107";
        font-family: "FontAwesome";
        line-height: 1.4;
        display: block;
        opacity: 1;
        top: 10px;
        margin: auto;
        background: none;
        height: 10px;
        width: 10px;
    }

    .mean-container .mean-nav ul li a.mean-expand:hover {
        background: #012c62;
    }

    .main-navigation ul > li > a:hover,
    .main-navigation ul > li.current-menu-item > a {
        color: #fff;
        background: var(--secondary);
    }

    .mean-container .mean-nav > ul > li:first-child a {
        border-top: none;
    }

    h4,
    h3,
    h2 {
        font-size: 20px;
    }
}

@media only screen and (max-width: 992px) {
    .entry-header {
        margin-bottom: 25px;
    }
    .site-content section,
    .site-content section.featured-on {
        padding: 65px 0 65px;
    }

    .mean-container a.meanmenu-reveal{
        height: 25px;
    }

    .entry-header .entry-title {
        font-size: 36px;
    }
    blockquote p {
        font-size: 30px !important;
    }
    .services-wrapper,
    .latest-blog-wrapper,
    .featured-on-wrapper,
    .post-wrapper.tab-post-wrapper .post {
        margin: 20px -10px;
    }
    .starting-vermicomposting-wrapper {
        margin: 20px 0px;
    }
    .services-wrapper .service-item,
    .post-wrapper .post,
    .featured-on-wrapper .featured-on-item,
    .archive article,
    .search article,
    .blog article {
        margin: 20px 10px 0 10px;
        width: calc(50% - 20px);
    }
    .our-shop-wrapper,
    .urban-worm-team-wrapper {
        grid-template-columns: auto auto;
    }
    .urban-worm-team-wrapper .item-large {
        grid-column-end: 3;
    }
    .entry-header .subtitle {
        font-size: 24px;
    }
    .services-wrapper .service-item .entry-header .entry-title {
        font-size: 30px;
    }
    .post-wrapper .post .entry-header .post-title a {
        font-size: 24px;
    }
    p,
    li {
        font-size: 16px;
    }

    .banner {
        padding: 0 0 50px;
    }
    .slider-item .entry-content p,
    .testimonial .detail p,
    .accordion-item a.toggle {
        font-size: 20px;
    }
    .starting-vermicomposting-item,
    .testimonial-wrapper .figure-wrapper,
    .testimonial-wrapper .feature-slider-wrapper,
    .who-we-are-image,
    .who-we-are-description,
    .vermiculture-description,
    .vermiculture-images,
    .mission-vission .mission-vission-img-desc,
    .mission-vission figure,
    .objective-desc-wrapper,
    .mission-vission.objective-points,
    .subject-wrapper figure,
    .subject-wrapper .desc,
    .ultimate-guide-wrapper .ultimate-guide-left,
    .ultimate-guide-wrapper .ultimate-guide-right {
        width: 100%;
        margin: 20px 0;
    }
    .site-content section.featured-on {
        margin-top: 0;
    }
    .starting-vermicomposting-wrapper,
    .testimonial-wrapper,
    .who-we-are-wrapper,
    .our-history-wrapper,
    .vermiculture-conference-wrapper,
    .mission-vission-wrapper,
    .worm-farming-objective-wrapper,
    .subject-wrapper,
    .ultimate-guide-wrapper {
        display: block;
    }
    .site-content section.Vermicomposting {
        padding-bottom: 65px;
    }
    .services {
        margin-top: 0px;
    }
    .featured-on-wrapper .featured-on-item {
        width: 45%;
        width: calc(50% - 20px);
    }

    .interviews-with-experts{
        padding-left: 0;
    }

    .widget-area .col-4 {
        max-width: 50%;
        -ms-flex: 0 0 50%;
        -webkit-box-flex: 0;
        flex: 50%;
        text-align: center;
    }
    .site-footer .widget-title {
        text-align: center;
    }
    .site-footer .widget-title {
        font-size: 24px;
    }

    .site-footer ul li,
    .site-footer p {
        font-size: 20px;
    }
    .ultimate-guide-wrapper .ultimate-guide-right .entry-header,
    .ultimate-guide-wrapper .ultimate-guide-right .desc p {
        text-align: center;
    }
    .growing-worm-farm .entry-header,
    .worm-farming-objective .entry-header .use-resource-page .entry-header,
    .subject .entry-header,
    .ultimate-guide .entry-header,
    .farming-alliance .entry-header {
        text-align: center;
    }

    .ultimate-guide-wrapper .ultimate-guide-left {
        padding-right: 25px;
    }
    .ultimate-guide-wrapper .ultimate-guide-right {
        padding: 35px 0px;
    }
    .single #content #secondary,
    .single #content #primary {
        width: 100%;
        float: none;
        padding: 0;
    }

    .breadcum-wrapper {
        margin: 0 0 30px;
    }

    .widget-area .col-6{
        text-align: center;
    }
}
/* All Mobile Portrait size smaller than 768 (devices and browsers) */

@media only screen and (max-width: 767px) {
    .services-wrapper .service-item,
    .post-wrapper .post,
    .featured-on-wrapper .featured-on-item,
    .archive article,
    .search article,
    .blog article,
    .urban-worm-team.hrizontal-team .team-detail,
    .growing-worm-farm figure,
    .growing-worm-farm .figure-description {
        width: 100%;
    }
    .urban-worm-team-wrapper .urban-worm-team * {
        text-align: center;
    }
    .urban-worm-team-wrapper {
        grid-template-columns: auto;
    }
    .urban-worm-team-wrapper .item-large {
        grid-column-end: 2;
        flex-direction: column;
    }
    .urban-worm-team-wrapper .item-large .description,
    .urban-worm-team-wrapper .item-large figure {
        width: 100%;
        border-left: 0;
        padding-left: 0;
    }
    .entry-header .subtitle,
    .post-wrapper .post .entry-header .post-title a {
        font-size: 20px;
    }
    .services-wrapper .service-item .entry-header .entry-title {
        font-size: 24px;
    }

    /* p,
    li {
        font-size: 14px;
    } */

    .site-content section,
    .site-content section.featured-on {
        padding: 30px 0 30px;
    }

    .our-history-wrapper .our-history-description{
        padding: 0 20px;
    }

    .slick-dots{
        text-align: center;
        margin: 0;
        width: 100%;
    }

    .testimonial-wrapper .featured-image{
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .testimonial .detail p{
        text-align: center;
    }

    blockquote p,
    .entry-header .entry-title {
        font-size: 28px !important;
    }
    .our-shop-wrapper {
        grid-template-columns: auto;
    }
    .widget-area .col-4 {
        max-width: 100%;
        -ms-flex: 0 0 100%;
        -webkit-box-flex: 0;
        flex: 100%;
        text-align: center;
    }

    .site-footer .widget-title {
        font-size: 20px;
    }

    .site-footer ul li,
    .site-footer p {
        font-size: 18px;
    }
    .hgroup-content-wrap .site-branding {
        width: 65px;
    }
    input.search-submit {
        font-size: 0 !important;
        background-size: 50%;
        background-position: center center !important;
    }

    .wp-block-media-text,
    .farming-alliance .urban-worm-team-wrapper,
    .hrizontal-team,
    .growing-worm-farm {
        display: block !important;
    }
    .farming-alliance .urban-worm-team-wrapper .urban-worm-team {
        margin: 30px 24px;
    }
    .site-footer .wp-block-media-text__content p {
        text-align: center;
    }
    .site-footer .wp-block-media-text__media {
        margin: auto;
    }
    .site-footer .menu-footer-social-menu-container ul{
        justify-content: center;
    }

    .urban-worm-team.hrizontal-team .team-detail {
        text-align: center;
    }
    .urban-worm-team .inline-social-icon{
        justify-content: center;
    }

    .growing-worm-farm .figure-description {
        padding-left: 0;
    }
    .comment-field-wrapper {
        display: block;
    }
    .breadcrumb {
        padding-left: 0;
    }

    .hgroup-content-wrap > div {
        padding: 0 10px;
    }

    .search-icon{
        width: unset;
        margin-left: 40px;
        padding-left: 0 !important;
    }

    .call-button{
        width: unset;
    }

    .mean-container .mean-nav > ul{
        top: 20px;
    }

    .widget-area{
        padding: 60px 0 30px;
    }

    .widget-area .needsclick {
        display: block !important;
    }

    .widget-area .needsclick img {
        margin: auto;
    }

    .widget-area .needsclick p{
        margin-bottom: 15px;
    }
}

@media only screen and (max-width: 567px) {
    body,
    .box-button,
    input[type="submit"],
    .wpcf7 input[type="submit"],
    .give-btn,
    .nav-links a,
    .back-to-top a {
        font-size: 15px;
    }

    .entry-header .subtitle,
    .post-wrapper .post .entry-header .post-title a {
        font-size: 18px;
    }
    .services-wrapper .service-item .entry-header .entry-title {
        font-size: 22px;
    }

    /* p,
    li {
        font-size: 13px;
    } */

    .entry-header {
        margin-bottom: 18px;
    }

    blockquote p,
    .entry-header .entry-title {
        font-size: 26px !important;
    }
    .our-shop .primary-button {
        font-size: 20px;
    }

    .hgroup-content-wrap{
        align-items: unset;
    }

    .call-button a{
        font-size: 0;
    }

    .call-button a i{
        font-size: 19px;
    }

    .banner .banner-content .entry-header .subtitle{
        padding: 8px 20px;
    }

    .banner .banner-content .entry-header .entry-title{
        padding: 8px 30px 13px;
    }
}

/* All Mobile size smaller than standard 479 (devices and browsers) */

@media only screen and (max-width: 479px) {
    .site-branding {
        max-width: 140px;
    }

    body,
    .box-button,
    input[type="submit"],
    .wpcf7 input[type="submit"],
    .give-btn,
    .nav-links a,
    .back-to-top a {
        font-size: 12px;
    }
    /* input.search-submit {
        padding-right: 7px;
    } */
    .search-icon {
        width: 135px;
    }
    .call-button {
        width: 10px;
    }
    .call-button a {
        font-size: 0;
        padding: 13px 10px;
    }
    .call-button a i {
        font-size: 13px;
    }

    .entry-header .subtitle,
    .post-wrapper .post .entry-header .post-title a {
        font-size: 17px;
    }
    .services-wrapper .service-item .entry-header .entry-title {
        font-size: 21px;
    }

    /* p,
    li {
        font-size: 13px;
    } */
    .entry-header,
    .slider-item .entry-content p,
    .testimonial .detail p,
    .accordion-item a.toggle {
        margin-bottom: 16px;
    }

    blockquote p,
    .entry-header .entry-title {
        font-size: 21px !important;
    }
    .hgroup-content-wrap > div {
        padding: 0 3px;
    }
    .counter-post {
        display: block;
    }

    .secondary-tab-post .post-wrapper.tab-post-wrapper .post .post-content {
        width: 100%;
    }
    .secondary-tab-post .post-wrapper.tab-post-wrapper .post .post-content .entry-title {
        text-align: center;
    }

    .menu-footer-social-menu-container li{
        margin-right: 10px;
    }

    .menu-footer-social-menu-container li a{
        margin: 0;
        min-width: 35px;
        height: 35px;
        line-height: 35px;
    }

    .widget-area .needsclick p span {
        font-size: 14px !important;
    }

    .widget-area form input{
        max-width: 100% !important;
        padding-left: 5px !important;
    }

    .widget-area form input::placeholder{
        font-size: 13px !important;
    }
}