.header {
    text-align: center;
    /*background-color: #ccc; 444*/
    color: black;
    border-radius: 5px;
    padding: 10px;
    font-family: verdana;
    grid-area: header;
    font-size: 1em;
    display: flex;
    flex: 1;
    flex-direction: column;
    

    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: stretch;
}

.navBar {
    color: blue;
    font-size: 1.5em;
/*    padding-left: 25px;*/
    letter-spacing: .005em;
}

a.navLink:link, a.navLink:visited {
  color: blue;
  text-decoration: none;
}

a.navLink:hover, a.navLink:active {
  color: red;
  text-decoration: none;
}

@media only screen and (min-width: 720px)  {
    .header {
        flex-direction: row;
        text-align: left;
    }
    .navBar {
        padding-left: 15px;
    }

    .navBarInfo {
        padding-left: 8px;
    }
    #nav_logo {
        order: 8;
        padding-left: 75px;
        padding-right: 100px;
    }
    #phone_email {
        order: 7;
    }
    #parties {
        order: 1;
        padding-left: 0px;
    }
    #battlefield {
        order: 2;
    }
    #nerf {
        order: 3;
    }
    #workshop {
        order: 4;
    }
    #contact {
        order: 5;
    }
    #waiver {
        order: 6;
    }
    #facebook {
        order: 9;
    }
    #blue_line {
        width: 100%;
        order: 11;
    }
}

@media only screen and (min-width: 1160px)  {
    .header {
        text-align: left;
        justify-content: flex-start;
    }
    .navBar {
/*        padding-left: 25px;*/
    }

    .navBarInfo {
/*        padding-left: 8px;*/
    }
    #nav_logo {
        order: 1;
        padding-left: 0px;
        padding-right: 0px;
    }
    #phone_email {
        order: 9;
    }
    #parties {
        order: 2;
        padding-left: 15px;
    }
    #battlefield {
        order: 3;
    }
    #nerf {
        order: 4;
    }
    #workshop {
        order: 5;
    }
    #contact {
        order: 6;
    }
    #waiver {
        order: 7;
    }
    #facebook {
        order: 8;
    }
    #blue_line {
        width: 100%;
        order: 10;
    }
}

@media only screen and (min-width: 1312px)  {
    .header {
        text-align: left;
        justify-content: flex-start;
    }
    #nav_logo {
        order: 1;
    }
    #phone_email {
        order: 2;
    }
    #parties {
        order: 3;
    }
    #battlefield {
        order: 4;
    }
    #nerf {
        order: 5;
    }
    #workshop {
        order: 6;
    }
    #contact {
        order: 7;
    }
    #waiver {
        order: 8;
    }
    #facebook {
        order: 9;
    }
    #blue_line {
        background-color: grey;
        width: 100%;
        height: 5px;
        order: 10;
        border: 1px solid grey; 
        border-radius: 5px; 
    }
}