@media (min-width: 1200px) and (max-width: 1400px) {

}
@media (min-width: 1024px) and (max-width: 1200px) {

}
@media (min-width: 800px) and (max-width: 1024px) {

}
@media (min-width: 700px) and (max-width: 800px) {


}
@media (min-width: 500px) and (max-width: 700px) {
    .home-page-content h2{line-height: 35px !important; font-size: 35px !important; text-align: center;}
    .right-nav{display: none !important; }
    .mobile-nav{display: block !important; }

    .home-button-holder{left: 35%; top: 80%;}
    .home-page-content{top: 30%;}
    #home .mid-right-section{display: none;}
    section.page.home{margin: 0;}
    .custom-logo-link img{width: 90%;}
    .site-logo{top: 12px;}
    section.page .container, section.page{margin: 0;}
    #about .about-content{margin: 0px !important;}
    #about .about-content .col-7, #about .about-content .col-5{width: 100%; flex: 100%; max-width: 100%;}
    #about .about-content h4{font-size: 32px !important;} 
    #services .container .row .col-6{width: 100%; max-width: 100%; flex: 100%;}
    #services .container .row .col-6 .mid-right-section{display: none;}
    #services .container .row .col-6 .mid-left-section.services{width: 100%;}
    #services .container .row .col-6 .mid-left-section.services .page-content-text h4.heading.fnt-50{font-size: 32px !important;}
    #services .container .row .col-6 .mid-left-section.services .page-content-text h4.heading{font-size: 24px !important;}
    #work .container .work-content h4{font-size: 32px !important;}
    #about-tostri-live .container .about-content .row .col-7,
    #about-tostri-live .container .about-content .row .col-5{width: 100%; flex: 100%; max-width: 100%;}
    #about-tostri-live .container .about-content .row .col-7 h4{font-size: 32px !important;}
    #about-tostri-live .container .about-content .row .col-5 h4{font-size: 28px !important;}
    #tostri-live-work .container .work-content h4{font-size: 32px !important;}
    #clients .container .post-imgs img:hover{ transform: none; border: none; background: none; z-index: unset; cursor: unset;}
    section#clients{height: 100% !important;}
    .content-block .post-imgs.team img{height: 400px !important; }
    section#contact .col-8{width: 100% !important; flex: 100% !important; max-width: 100% !important; }
    section#contact .col-4 .mid-right-section{display: none !important; }
    section#contact .col-8 .mid-left-section.contact .col-6{width: 100% !important; flex: 100% !important; max-width: 100% !important;}
    .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea{ width: 100% !important;}
    section#contact .page-content-text h4{ font-size: 32px !important;}
    .btn-contact-sbmt{width: 100% !important; }
    .mobile-nav .custom-menu-class ul{ background:  #2c2c2c;}
    .mobile-nav .custom-menu-class ul li{text-align: center !important; padding: 12px 0;}
    .mobile-nav .custom-menu-class ul li a{color: #fff !important; text-transform: uppercase !important; font-size: 24px;}
    .site-logo{left: unset !important}
}
@media (min-width: 320px) and (max-width: 500px) {
    .home-page-content h2{line-height: 35px !important; font-size: 35px !important; text-align: center;}
    .right-nav{display: none !important; }
    .mobile-nav{
        display: block !important;
        width: 100%;
        /* min-height: 100vh; */
        height: 100%;
        left: 0;
        top: 0;
        position: fixed;
        background: #2c2c2c;
        padding: 20px;
        z-index: 100;
    }

    .mobile-nav #primary-menu-list {padding-top: 30px;}
    #about .about-content{margin: 0px !important;}
    nav .navbar-toggler{padding: 0px !important;position: fixed; top: 0px; right: 0; z-index: 20000;}

    nav .animated-icon2{position: absolute; right: 20px; top: 25px;}

    .home-button-holder{left: 35%; top: 80%;}
    .home-page-content{top: 30%;}
    #home .mid-right-section{display: none;}
    section.page.home{margin: 0;}
    .custom-logo-link img{width: 90%;}
    .site-logo{top: 12px;left: unset !important; position: unset !important}
    section.page .container, section.page{margin: 0;}
    #about .about-content .col-7, #about .about-content .col-5{width: 100%; flex: 100%; max-width: 100%;}
    #about .about-content h4{font-size: 32px !important;} 
    #services .container .row .col-6{width: 100%; max-width: 100%; flex: 100%;}
    #services .container .row .col-6 .mid-right-section{display: none;}
    #services .container .row .col-6 .mid-left-section.services{width: 100%;}
    #services .container .row .col-6 .mid-left-section.services .page-content-text h4.heading.fnt-50{font-size: 32px !important;}
    #services .container .row .col-6 .mid-left-section.services .page-content-text h4.heading{font-size: 24px !important;}
    #work .container .work-content h4{font-size: 32px !important;}
    #about-tostri-live .container .about-content .row .col-7,
    #about-tostri-live .container .about-content .row .col-5{width: 100%; flex: 100%; max-width: 100%;}
    #about-tostri-live .container .about-content .row .col-7 h4{font-size: 32px !important;}
    #about-tostri-live .container .about-content .row .col-5 h4{font-size: 28px !important;}
    #tostri-live-work .container .work-content h4{font-size: 32px !important;}
    #clients .container .post-imgs img:hover{ transform: none; border: none; background: none; z-index: unset; cursor: unset;}
    section#clients{height: 100% !important;}
    .content-block .post-imgs.team img{height: 400px !important; }
    section#contact .col-8{width: 100% !important; flex: 100% !important; max-width: 100% !important; }
    section#contact .col-4 .mid-right-section{display: none !important; }
    section#contact .col-8 .mid-left-section.contact .col-6{width: 100% !important; flex: 100% !important; max-width: 100% !important;}
    .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea{ width: 100% !important;}
    section#contact .page-content-text h4{ font-size: 32px !important;}
    .btn-contact-sbmt{width: 100% !important; }
    .mobile-nav .custom-menu-class ul{ background:  #2c2c2c;}
    .mobile-nav .custom-menu-class ul li{text-align: center !important; padding: 12px 0;}
    .mobile-nav .custom-menu-class ul li a{color: #fff !important; text-transform: uppercase !important; font-size: 24px;}
    section.single-post .col-6.lefto{width: 100%;flex: 100%; max-width: 100%;}
    section.single-post .col-6.righto{width: 100%;flex: 100%; max-width: 100%;}
    section.single-post .col-6.lefto h4{font-size: 35px !important;}
    .animated-icon2.open{
        z-index: 200;
        right: 20px;
    }

    #clients .clients-content.page-content .w-20{width: 50% !important;}
    section.page.contact{margin: 0;}
    .n2-section-smartslider{padding: 20px 0;}
    .navbar.fixed-top{position: relative !important}

    #more-work-page .site-logo{
        position: relative !important;
        top: 0 !important;
        margin-top: -40px !important;
    }

    #more-work-page .site-logo img{width: auto !important }

    #more-work-page .more-work-content h4{ font-size: 32px !important;}

    .particles-1,
    .particles-2,
    .particles-3,
    .particles-4,
    .particles-5{
        width: 100% !important;
    }
}
@media (min-width: 0px) and (max-width: 320px) {
    .home-page-content h2{line-height: 35px !important; font-size: 35px !important; text-align: center;}
    .right-nav{display: none !important; }
    .mobile-nav{
        display: block !important;
        width: 100%;
        /* min-height: 100vh; */
        height: 100%;
        left: 0;
        top: 0;
        position: fixed;
        background: #2c2c2c;
        padding: 20px;
        z-index: 100;
    }

    .mobile-nav #primary-menu-list {
        padding-top: 30px;
    }

    nav .navbar-toggler{padding: 0px !important;position: fixed; top: 0px; right: 0; z-index: 20000;}

    nav .animated-icon2{position: absolute; right: 20px; top: 25px;}

    .home-button-holder{left: 35%; top: 80%;}
    .home-page-content{top: 30%;}
    #home .mid-right-section{display: none;}
    section.page.home{margin: 0;}
    .custom-logo-link img{width: 90%;}
    .site-logo{top: 12px;position:unset !important}
    section.page .container, section.page{margin: 0;}
    #about .about-content .col-7, #about .about-content .col-5{width: 100%; flex: 100%; max-width: 100%;}
    #about .about-content h4{font-size: 32px !important;} 
    #services .container .row .col-6{width: 100%; max-width: 100%; flex: 100%;}
    #services .container .row .col-6 .mid-right-section{display: none;}
    #services .container .row .col-6 .mid-left-section.services{width: 100%;}
    #services .container .row .col-6 .mid-left-section.services .page-content-text h4.heading.fnt-50{font-size: 32px !important;}
    #services .container .row .col-6 .mid-left-section.services .page-content-text h4.heading{font-size: 24px !important;}
    #work .container .work-content h4{font-size: 32px !important;}
    #about-tostri-live .container .about-content .row .col-7,
    #about-tostri-live .container .about-content .row .col-5{width: 100%; flex: 100%; max-width: 100%;}
    #about-tostri-live .container .about-content .row .col-7 h4{font-size: 32px !important;}
    #about-tostri-live .container .about-content .row .col-5 h4{font-size: 28px !important;}
    #tostri-live-work .container .work-content h4{font-size: 32px !important;}
    #clients .container .post-imgs img:hover{ transform: none; border: none; background: none; z-index: unset; cursor: unset;}
    section#clients{height: 100% !important;}
    .content-block .post-imgs.team img{height: 400px !important; }
    section#contact .col-8{width: 100% !important; flex: 100% !important; max-width: 100% !important; }
    section#contact .col-4 .mid-right-section{display: none !important; }
    section#contact .col-8 .mid-left-section.contact .col-6{width: 100% !important; flex: 100% !important; max-width: 100% !important;}
    .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea{ width: 100% !important;}
    section#contact .page-content-text h4{ font-size: 32px !important;}
    .btn-contact-sbmt{width: 100% !important; }
    .mobile-nav .custom-menu-class ul{ background:  #2c2c2c;}
    .mobile-nav .custom-menu-class ul li{text-align: center !important; padding: 12px 0;}
    .mobile-nav .custom-menu-class ul li a{color: #fff !important; text-transform: uppercase !important; font-size: 24px;}
    
    .particles-1,
    .particles-2,
    .particles-3,
    .particles-4,
    .particles-5{
        width: 100% !important;
    }

    section.single-post .col-6.lefto{width: 100%;flex: 100%; max-width: 100%;}
    section.single-post .col-6.righto{width: 100%; flex: 100%; max-width: 100%;}

    section.single-post .col-6.lefto h4{font-size: 35px !important;}

    .animated-icon2.open{
        z-index: 200;
        right: 20px;
    }

    #clients .clients-content.page-content .w-20{width: 50% !important;}
    section.page.contact{margin: 0;}
    .n2-section-smartslider{padding: 20px 0;}
    .navbar.fixed-top{position: relative !important}
    #more-work-page .site-logo{
        position: relative !important;
        top: 0 !important;
        margin-top: -40px !important;
    }

    #more-work-page .site-logo img{width: auto !important }

    #more-work-page .more-work-content h4{ font-size: 32px !important;}
}