@charset "utf-8";
/* CSS Document */

.grid-nav {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
}

.grid-options {
    display: grid;
    grid-template-columns: 32% 32% 32%;
    grid-column-gap: 2%;
}

.four-square {
    display: grid;
    grid-template-columns: 49% 49%;
    grid-column-gap: 2%;
}


.contact {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 80%;
    margin: 0 auto;
}

.form-parts {
    display: grid;
    grid-template-columns: 25% 75%;
}

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

    .grid-nav {
        grid-template-columns: 50% 50%;
    }

}

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

    .grid-options {
        grid-template-columns: 100%;
    }

    .residential-option {
        grid-row: 1 / 2;
    }

    .residential-choice {
        grid-row: 2 / 3;
    }

    .commercial-option {
        grid-row: 3 / 4;
    }

    .commercial-choice {
        grid-row: 4 / 5;
    }

    .contact-option {
        grid-row: 5 / 6;
    }

    .contact-choice {
        grid-row: 6 / 7;
    }

}

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

    .four-square {
        grid-template-columns: 100%;
    }

    .form-parts {
    grid-template-columns: 100%;
    }

    .contact {
    grid-template-columns: 100%;
    width: 90%;
    }

}


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

    .grid-nav {
        grid-template-columns: 100%;
    }

}