body{
    background-color: #F4F3DC;
    color: #A4211B;
    font-family: Effra, Arial, sans-serif;
    margin: 0px;
}

* { box-sizing: border-box; }

#greybar {
    background-color: #A4211B;
    grid-area: 1 / 1 / 2 / 10;
}

header { 
    line-height: 180%;
    background-position: left;
    background-size: auto;
    padding-left: 1rem;
    padding-top: .5rem;
    height: auto;
    grid-area: 1 / 2 / 2 / 9;
    color: #F4F3DC;
}

header a {
    text-decoration: none;
    color: #F4F3DC;
    font-size: 1.75em;
}

nav {
    font-weight: bold;
    padding: 20px 5px 0px 20px;
    top: 0;
    grid-area: 2 / 3 / 3 / 8;
    font-size: 1.25em;
    
}

nav a {
    text-decoration: none;
    color: #A4211B;
    padding: 1rem 0rem;
    display: block;
    justify-content: space-around;
    text-align: center;
    
}

nav a:hover {color: #686756;}

nav ul {
    list-style-type: none;
    display: flex;
    flex-flow: row nowrap;
    padding: 0;
    margin: 0;
    
    
}

nav ul li {
    width: 100%
}


#wrapper {
    display: grid;
    grid-auto-rows: minmax(0px,auto);
    grid-template-columns: minmax(0px, 1fr) repeat(7, minmax(0, 175px)) minmax(0px, 1fr);
}

#home_main {
    background-image: url(home_main.jpg);
    height: 350px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    grid-area: 3 / 1 / 5 / 10;
}

#contact_us {
    background-color: #F4F3DC;
    grid-area: 4 / 7 / 5 / 9;
    text-align: center;
    margin: 1rem 3rem;
    padding-top: .5rem;
    border-radius: 15px;
    font-size: 2em;
}

#contact_us a {
    text-decoration: none;
    color: #A4211B;
    text-align: center;
    
}

#contact_us a:hover {color: #686756;}
 
.gallery {
    grid-area: 5 / 3 / 6 / 8;
    height: auto;
    margin: 2rem;
    padding-bottom: 1rem;
}

.gallery img {
    width: 48%;
    height: auto;
    padding-left: 2rem;
}

#home_left {
    background-image: url(home_left.jpg);
    height: 333px;
    background-repeat: no-repeat;
    grid-area: 5 / 1 / 6 / 10;
    padding-right: 3em;
}

#home_right {
    background-image: url(home_right.jpg);
    height: 333px;
    background-repeat: no-repeat;
    grid-area: 5 / 1 / 6 / 10;
}

main {
    display: block;
    padding: 1em;
    grid-area: 7 / 2 / 8 / 9;
    text-align: center;
    margin: auto;
}

section {
    float: left;
    width: 50%;
    list-style-position: inside;
    text-align: justify;
    grid-area: 7 / 3 / 8 / 8;
    padding: 0rem 4rem;
    position: static;
    font-size: 1.3rem;
    
}

form {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 200px 25em;
    width: 100%;
    grid-gap: .75rem;
    padding: 2rem 2rem;
    padding-top: 1rem;
    margin: 2.75rem 0rem;
    font-size: 1.25rem;
    
}

input {
    border: .05rem solid #A4211B;
}

textarea {
    border: .05rem solid #A4211B;
}

input[type=submit] {
    background-color: #A4211B;
    color: #F4F3DC;
    border: .05rem solid #A4211B;
    font-size: 1.25rem;
    margin: 1rem;
    padding: .15rem;
}

#map {
    background-image: url(map.jpg);
    background-repeat: no-repeat;
    height: 400px;
    grid-area: 7 / 1 / 8 / 10;
    width: 650px;
    margin: 1rem;
}

#greybar2 {
    background-color: #A4211B;
    grid-area: 8 / 1 / 9 / 10;
}

footer {
    font-size: .9em;
    font-style: italic;
    text-align: center;
    color: #F4F3DC;
    padding: 1rem 1rem;
    padding-bottom: 1.5rem;
    align-items: center;
    grid-area: 8 / 4 / 9 / 7;
}

footer ul {
    list-style-type: none;
    display: flex;
    flex-flow: row nowrap;
    padding: 1rem 1rem;
    margin: 0;
    justify-content: center;
    justify-content: space-between;
}

footer ul items{
    padding: 1rem;
}

















@media only screen and (max-width: 922px) {
   
    header a {
        font-size: 1.25rem;
    }
    
    nav {
        grid-area: 2 / 3 / 3 / 8;
        font-size: 1.1rem;
    }
    
    
    #home_main {
        height: 300px;
        grid-area: 3 / 1 / 5 / 10;
    } 
    
    #contact_us {
        font-size: 1.3em;
        grid-area: 4 / 6 / 5 / 9;
        margin: 1rem 5rem;
        padding-left: .3rem;
        padding-right: .3rem;
        
    }

  .gallery {
        height: auto;
        grid-area: 5 / 1 / 6 / 10;
        margin: 0;
    }
    
    .gallery img{
        background-size: cover;
        padding-top: .5rem;
        height: auto;
        width: 75%;
    }
    
  
    section {
        float: none;
        width: 100%;
    }
    
    form {
        grid-template-columns: 200px 15em;
    }
    
    footer ul {
        flex-flow: column nowrap;
    }
    
    footer li {
        padding: .25rem;
    }
    
}

@media only screen and (max-width: 768px) {
    header h1 {
        background-image: none;
        text-align: center;
    }
    
    nav {
        grid-area: 2 / 1 / 3 / 9;
        font-size: 1rem;
    }
    
    #contact_us {
        grid-area: 4 / 3 / 5 / 8;
    }
    
    .gallery {
        height: auto;
        grid-area: 5 / 1 / 6 / 10;
        margin: 0;
    }
    
    .gallery img{
        background-size: cover;
        padding-top: .5rem;
        height: auto;
        width: 90%;
    }
    
    section {
        font-size: 1rem;
    }
    
    form {
        padding: 2rem 0rem;
        grid-template-columns: 200px 10em;
    }
    
    footer {
        font-size: .8rem;
    }
    
    footer ul {
        flex-flow: column nowrap;
    }
    
    footer li {
        padding: .25rem;
    }
    
}