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

header { background-color: #00B386;
        color: #FFFFFF;
        height: 175px;
        text-align: center;
        padding-top: 30px;
        padding-left: 3em;
}

nav { font-weight: bold;
     font-size: 120%;
     float: left;
     padding: 1.5em;
     width: 160px;
}

nav a { text-decoration: none;
        transition: color 3s ease-out;
}

a:link { color:#00664D;
}

a:visited { color: #7A7A52;
}
           
a:hover { color: #FFFFFF;
}

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

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

h2 { color: #00664D;
    font-family: "Georgia", "Times New Roman", serif;
}

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

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

dt { color: #00664D;
    font-weight: bold;
}

footer { font-size: 75%;
        font-style: italic;
        text-align: center;
        font-family: "Georgia", "Times New Roman", serif;
        padding: 15px;
        margin-left: 190px;
        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;
}
        
.barn { color: #70DBDB;
       font-weight: bold;
}

.contact { font-size: 90%;
}

#wrapper { width: 80%;
          margin-left: auto;
          margin-right: auto;
          background-color: #0C5442;
          min-width: 900px;
          max-width: 2050px;
          box-shadow: 4px 4px 4px #133926;
          background-image: linear-gradient(#FFFFFF, #0c5442);
          border: 1.5pt solid #003300;
}

#heroHome { background-image: url("sunsetHorse.png");
           height: 300px;
           background-size: 100% 100%;
           background-repeat: no-repeat;
           margin-left: 190px;
}

#heroBoard { background-image: url("fenceline.png");
            height: 300px;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-left: 190px;
}

#heroTraining { background-image: url("BayBella.png");
               height: 300px;
               background-size: 100% 100%;
               background-repeat: no-repeat;
               margin-left: 190px;
}

#gallery { position: relative;
          height: 200px;
}

#gallery ul { list-style-type: none;
             width: 300px;
}

#gallery li { display: inline;
             float: left;
             padding: 10px;
}

#gallery img { border: none;
}

#gallery a { text-decoration: none;
            font-style: italic;
             color: black;
}

#gallery span { position: absolute;
               left: -1000px;
               opacity: 0;
               transition: opacity 3s ease-out;
}

#gallery a:hover span { position: absolute;
                     top: 15px;
                     left: 320px;
                     text-align: center;
                     opacity: 1;
}

#gallery figure { position: absolute;
                  left: 280px;
                  opacity: 0.25;
}
    
#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;
    }

}