body { color: #666666;
      font-family: Arial, Helvetica, sans-serif;
      margin: 0;
}

header { background-image: linear-gradient(DarkBlue, CornflowerBlue, AliceBlue);
        background-repeat: no-repeat;
        background-size: cover;
        color: #FFFFFF;
        height: 175px;
        text-align: center;
        padding-top: 4em;
        padding-bottom: 21.5em;
}

header h1 { line-height: 1.5em;
}

header img { padding-bottom: 2em;
}

nav { font-weight: bold;
     font-size: 110%;
     text-align: center;
     background-color: rgba(65, 100, 255, 0.3);
     padding: 0.5em;
     height: 53px;
}

nav a { text-decoration: none;
}

a:link { color:#FFFFFF;
}

footer a:link { color: #344dbe;
}

footer a:visited { color: #344dbe;
}

a:visited { color: #FFFFFF;
}
           
a:hover { color: #344dbe;
}

nav ul { list-style-type: none;
        margin: 0;
        font-size: 1.2em;
}

nav li { display: inline;
         padding-right: 2em;
}

main { padding-top: 100px;
      padding-right: 20px;
      padding-bottom: 20px;
      padding-left: 20px;
      display: block;
      background-color: #FFFFFF;
}
      
h1 { margin-top: 0;
    margin-bottom: 0;
    font-family: "Georgia", "Times New Roman", serif;
    font-size: 3em;
    text-shadow: 1px 1px 1px #CCCCCC;
}

h2 { color: #4d391e;
    font-family: "Georgia", "Times New Roman", serif;
    font-size: 1.8em;
    padding-bottom: 1em;
}

h3 { font-family: "Georgia", "Times New Roman", serif;
     color: #8eb51f;
}

p { font-size: 1.1em;
    line-height: 1.3em;
    margin-bottom: 2em;
}

dt { font-size: 1.1em;
    line-height: 1.3em;
    margin-bottom: 1.3em;
    color: #8eb51f;
    font-weight: bold;
}

dd { font-size: 1.1em;
    line-height: 1.3em;
    margin-bottom: 2em;
}

main ul {
  list-style-image: url('marker.gif');
  margin-bottom: 4em;
}

main li { font-size: 1.1em;
          margin-bottom: 1.2em;
}

footer { font-size: 75%;
        font-style: italic;
        text-align: center;
        font-family: "Georgia", "Times New Roman", serif;
        padding: 15px;
        background-color: #FFFFFF;
        clear: both;
}

table { border: 1.5px solid #006600;
        border-collapse: collapse;
}

td { padding: 0.5em;
     border: 1px solid #006600;
}

th { padding: 0.5em;
     border: 1px solid #006600;
}

tr:nth-of-type(odd) { background-color: #ECF9EC;
}



label { float: left;
       display: block;
       margin-bottom: 20px;
       text-align: right;
       width: 125px;
       padding-right: 2em;
}

input { display: block;
        margin-bottom: 20px;
}

input [type="submit"] { margin-left: 135px;
}

textarea { display: block;
          margin-bottom: 20px;
}

.row { display: flex;
       padding-bottom: 3em;
}

.column { flex-basis: 50%;
          padding-left: 50px;
          padding-right: 50px;
          max-width: 50%;
}

.column img { max-width: 100%;
              padding-bottom: 5em;
}
        
.barn { color: #8eb51f;
       font-weight: bold;
}

.contact { font-size: 90%;
}

#contactForm { margin-left: 30%;
               margin-right: 30%;
               max-width: 100%;
               margin-bottom: 5em;
}

#gallery { text-align: center;
           margin-top: 2em;
           margin-bottom: 4em;
}

.galleryColumn img { max-width: 20%;
                     margin: 3px;
}
    
#contact { font-size: 90%;
}

#mobile { display: none;
}

#desktop { display: inline;
}

* { box-sizing: border-box;
}

@media only screen and (max-width: 64em) { 
    body { margin: 0;
          background-color: #FFFFFF;
    }

    #wrapper { min-width: 0;
              width: auto;
              box-shadow: none;
              border: none;
    }

    header { padding-top: 0.5em;
            padding-bottom: 0.5em;
            padding-left: 0;
            height: auto;
    }

    h1 { letter-spacing: 0.1em;
    }

    main { margin-left: 0;
    }

    nav { float: none;
         width: auto;
         text-align: center;
         padding: 0.5em;
    }

    nav li { display: inline;
            padding-top: 0.25em;
            padding-bottom: 0.25em;
            padding-left: 0.75em;
            padding-right: 0.75em;
    }

    #heroHome { margin-left: 0;
               height: 200px;
    }

    #heroBoard { margin-left: 0;
               height: 200px;
    }

    #heroTraining { margin-left: 0;
                    height: 200px;
    }

    footer { margin-left: 0;
    }
            
}

@media only screen and (max-width: 37.5em) {

    main { padding-top: 0.1em;
          padding-bottom: 0.1em;
          padding-left: 1em;
          padding-right: 1em;
          font-size: 2em;
    }

    h1 { font-size: 2em;
    }

    nav { padding: 0;
    }

    nav li { display: block;
            margin: 0;
            border-bottom: solid 2px #330000;
    }

    nav a { display: block;
    }

    #heroHome { background-image: none;
               height: 0;
    }

    #mobile { display: inline;
    }

    #desktop { display: none;
    }

    label { float: none;
           text-align: left;
    }

    input [type="submit"] { margin-left: 0;
    }

    #gallery { display: none;
    }
}