body { 
    color: #666666; 
    font-family:Arial, Helvetica, sans-serif; 
    background-color: #FFFFFF; 
} 

nav { 
    font-weight: bolder; 
    padding: 1.5em; 
    font-size: 120%; 
    margin-top: 30px;
}

h2 { 
    color: #00664D; 
    font-family: Georgia, 'Times New Roman', Times, serif; 
    text-shadow: 1px 1px #CCCCCC; 
} 

dt { 
    color: #00664D; 
} 

footer { 
    font-size: 75%; 
    text-align: center; 
    padding: 15px;
    margin-left: 190px; 
    background-color: #FFFFFF; 
    clear: both;
}  

.bullet { 
    height: 30px;
    padding-top: 7px;
    padding-left: 44px; 
    font-size: large;
} 

.list{
    padding: 0;
    margin: 0; 
} 

.wrapper { 
    width: 100vw; 
    height: 100vh; 
    font-family:Georgia, 'Times New Roman', Times, serif; 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: 50px 1fr 1fr 100px; 
    box-sizing: border-box;
} 

.wrapperBoard { 
    width: 100vw; 
    height: 100vh; 
    font-family:Georgia, 'Times New Roman', Times, serif; 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: 50px 1fr 1fr 100px; 
    box-sizing: border-box;
}

.header { 
    grid-column-start: 1; 
    grid-column-end: span 4; 
    font-size: 40px; 
    text-align: center; 
    background-color: rgb(0, 128, 55); 
    color: #FFFFFF; 
    font-weight: bold; 
    border-left: 1px solid black; 
    border-top: 1px solid black; 
    border-right: 1px solid black;
} 

.content { 
    grid-row-start: 2; 
    grid-row-end: span 2; 
    grid-column-start: 1; 
    grid-column-end: 4; 
    border-left: 1px solid black;
} 

.contentBoard { 
    grid-row-start: 2; 
    grid-row-end: 3; 
    grid-column-start: 1; 
    grid-column-end: 4; 
    border-left: 1px solid black;
} 

.contentTrain { 
    grid-row-start: 2; 
    grid-row-end: 3; 
    grid-column-start: 1; 
    grid-column-end: 4; 
    border-left: 1px solid black;
} 

.contentContact { 
    grid-row-start: 2; 
    grid-row-end: 3; 
    grid-column-start: 1; 
    grid-column-end: 4; 
    border-left: 1px solid black;
}

.sunsetHorse { 
    width: 100%; 
    height: 50%
} 

.fenceline { 
    width: 100%; 
    height: 30% 
} 

.bayBella { 
    width: 100%;
}

.content2 { 
    border-left: 1px solid black; 
    border-right: 1px solid black;
} 

.contentBoard2 { 
    border-left: 1px solid black; 
    border-bottom: 1px solid black; 
    border-right: 1px solid black; 
    grid-row-start: 2; 
    grid-row-end: 4 ; 
    text-align: center;
} 

.contentTrain2 { 
    border-left: 1px solid black; 
    border-right: 1px solid black; 
    border-bottom: 1px solid black;
    grid-row-start: 2; 
    grid-row-end: 4; 
    text-align: center;
} 

.contentContact2 { 
    border-left: 1px solid black; 
    border-right: 1px solid black; 
    border-bottom: 1px solid black;
    grid-row-start: 2; 
    grid-row-end: 4; 
    text-align: center;
}

.gpLogo { 
    width: 300px; 
    object-fit: fill;
}

.content3 { 
    grid-row-start: 3; 
    grid-row-end: span 3; 
    text-align: center; 
    border-left: 1px solid black; 
    border-bottom: 1px solid black; 
    border-right: 1px solid black;
} 

.contentBoard3 { 
    grid-row-start: 3; 
    grid-row-end: span 2; 
    text-align: center; 
    border-left: 1px solid black; 
    border-bottom: 1px solid black; 
    border-right: 1px solid black;
}

.footer { 
    grid-column-start: 1; 
    grid-column-end: span 3; 
    text-align: center; 
    border-bottom: 1px solid black; 
    border-left: 1px solid black;
} 

.footerBoard { 
    grid-column-start: 1; 
    grid-column-end: span 3; 
    text-align: center; 
    border-bottom: 1px solid black; 
    border-left: 1px solid black;
} 

.footerTrain { 
    grid-column-start: 1; 
    grid-column-end: span 3; 
    text-align: center; 
    border-bottom: 1px solid black; 
    border-left: 1px solid black;
} 

.footerContact { 
    grid-column-start: 1; 
    grid-column-end: span 3; 
    text-align: center; 
    border-bottom: 1px solid black; 
    border-left: 1px solid black;  
    margin-top: 120px;
}

a:link { 
    color: #00775a
} 

a:visited { 
    color: #7A7A52
} 

.links { 
    list-style-type: none; 
    margin-top: 20px; 
    padding-right: 50px;
}

@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: 90%;
    } 
    h1 { 
        font-size: 2em;
    } 
    nav { 
        padding: 0; 
    } 
    nav li { 
        display: block; 
        margin: 0; 
        border-bottom: 2px solid #330000;
    } 
    nav a { 
        display: block;
    } 
    #heroHome { 
        background-image: none; 
        height: 0;
    } 
    #heroBoard { 
        background-image: none; 
        height: 0;
    } 
    #heroTraining { 
        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;
    }
} 

table { 
    border-style: solid; 
    border-width: 1.5px; 
    border-color: #006600; 
    border-collapse: collapse;
} 

td, th { 
    padding: 0.5em; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #006600;
} 

tr:nth-child(odd) { 
    background-color: #ECF9EC; 
} 

h3 { 
    color: #006646
}  

label { 
    float: left; 
    display: block; 
    text-align: right; 
    width: 125px; 
    padding-right: 2em;
} 

input, textarea { 
    display: block; 
    margin-bottom: 20px;
} 

#sub { 
    margin-left: 135px;
} 

#gallery { 
    position: relative; 
    height: 200px;
} 

#gallery ul { 
    list-style-type: none; 
    width: 300px; 
    display: inline; 
    float: left; 
    padding: 10px;
}  

#gallery img { 
    border: none;
} 

#gallery a { 
    text-decoration: none; 
    font-style: italic; 
    color: white;
} 

#gallery span { 
    position: absolute; 
    left: -1000px; 
    opacity: 0; 
    transition: 3s ease-in-out;
} 

#gallery span:hover { 
    position: absolute; 
    top: 15px; 
    left: 320px; 
    text-align: center; 
    opacity: 1;
}

figure { 
    position: absolute; 
    left: 280px; 
    opacity: .25;
} 









