@media (max-width: 420px) and (max-height: 750px) , (max-width: 750px) and (max-height: 420px) , (max-width: 1023px) {

    #header {
        height: 70px;
    }

    #header > .nav {
        display: none;
    }

    .logo {
        width: 100%;
    }

    .logo a h1 {
        font-size: 20px;
    }

    #mobile-menu-icon {
        display: inline-block;
        position: absolute;
        top: 35%;
        right: 10%;
    }

    .close-btn {
        display: block;
    }

    .responsive-nav {
        /*display: block!important;        */
    }

    .projects-submenu {
        position: initial;
        background-color: rgba(59, 58, 58 , 1);
    }

    .section-title {
        font-size: 45px;
    }


    #landing-section {
        background-position: 45% !important;
        background-attachment: initial;
    }

    .landing-caption {
        display: none;
    }

    .services-flex-container {
        justify-content: center;
        width: 100%;
    }

    .service-flex-box {
        width: 90%;
        margin: 15px auto;
    }

    .service-text h3 {
        text-align: center;
    }

    #about {
        width: 100%;
        height: auto;
    }

    .about-text {
        max-width: 100%;
        padding: 25px;
        flex-basis: 100%;
    }

    .about-text h2 {
        text-align: center;
    }

    .about-bar {
        margin-left: auto;
        margin-right: auto;
    }

    .about-img {
        display: none;
    }

    #work-bar {
        height: auto;
    }

    .work-bar-box {
        max-width: 100%;
        flex-basis: 90%;
        border-bottom: 1px solid white;
        margin: auto;
        padding: 10px 0;
    }

    .work-bar-box h3 {
        font-size: 40px;
    }

    .work-bar-box p {
        font-size: 20px;
    }

    .work-bar-box-border {
        display: none;
    }

    .projects-container {
        max-width: 100%;
    }

    .project-box {
        flex-basis: 90%;
    }

    /*
    .map-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }*/

    .map-container {
        width:  100%;
        overflow:hidden;
        padding-bottom:56.25%;
        position:relative;
        height:0;
        margin: 45px auto 20px;
    }

    .map-container iframe{
        left:0;
        top:0;
        height:100%;
        width:100%;
        position:absolute;
    }


    .contact-info {
        width: 100%;
    }

    .contact-info-box {
        flex-basis: 100%;
    }

    .contact-info form textarea , .contact-info form input {
        width: 100% !important;
        margin: 5px auto;
    }

    .contact-info form input[type="submit"] {
        margin: 5px auto;
        display: block;
        float: none;
        width: 100%;
    }

    .contact-info-box.box-2 {
        order: 1;
    }

    .contact-info-box.box-1 {
        order: 2;
    }

    #footer {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
        height: auto;
        font-size: 13px;
    }

    #footer > h4 , #footer > div {
        flex-basis: 95%;
        margin: 5px auto;
    }

    .project-container {
        width: 100%;
    }

    #project-content {
        height: auto;
    }

    .project-container > .project-title {
        font-size: 30px;
        text-align: center;
    }

    .project-flex-box {
        flex-basis: 90%;
        margin: 20px auto;
    }

    .project-title-bar {
        margin: auto;
    }

    .slider {
        width: 100% !important;
    }

    .slider-img {
        width: 100%!important;
    }

    .project-flex-box.right {
        order: 1;
    }

    .project-flex-box.left {
        order: 2;
        text-align: center;
    }

    .show-projects-btn {
        margin: 30px auto auto;
        position: initial !important;
    }

    #project-landing-section {
        height: auto;
        padding: 10px 0 20px;
    }
}

@media all and (min-width: 480px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 800px) , (max-height: 1366px) and (max-width: 1024px) and (min-width: 1024px)
{

    #header .logo {
        width: 25%;
    }

    .landing-caption {
        left: 5%;
        font-size: 40px;
        width: 250px;
    }

    #landing-section {
        background-attachment: initial;
        background-position: center;
    }

    .about-img {
        background-attachment: initial;
        background-position: center;
    }
}


@media all and (min-width: 480px) and (max-width: 800px) and (min-height: 750px) and (max-height: 1280px)/* ,
    (min-width: 480px) and (max-width: 1280px) and (min-height: 750px) and (max-height: 800px)*/ {


    .responsive-nav > ul {
        width: 70%;
        margin: 15% auto;
    }

    .service-flex-box {
        width: 55%;
    }

    .contact-info {
        width: 70%;
    }
}