/*--------------------------------------------------*/
/* HEADER */
/*--------------------------------------------------*/
#announcement {
  text-align: center;
  background-color: #e1ccbe;
  color: #757263;
  padding: 1%;
  border: 1px solid #757263;
  font-family: 'brandon-grotesque', sans-serif;
}
#logoPanel ul {
  list-style-type: none;
  display: flex;
  justify-content: space-around;
  margin: 0;
  padding-left: 0;
  padding-top: 1%;
  background-color: #757263;
}
nav ul {
  list-style-type: none;
  background-color: #e1ccbe;
  padding: 1%;
  margin: 0;
  text-align: center;
  font-size: 1.5em;
  border: 1px solid #757263;
  font-family: 'brandon-grotesque', sans-serif;
}
nav li {
  border-bottom: 1px solid #757263;
}
nav a {
  text-decoration: none;
  color: #757263;
}
.selected {
  color: black;
}
/*--------------------------------------------------*/
/* INDEX */
/*--------------------------------------------------*/
#registerPanel {
  background-image: url("assets/winter.jpg");
  background-size: cover;
  padding: 10%;
  text-align: center;
}
#registerTitle {
  text-decoration: underline;
}
#infoPanel {
  align-items: center;
  background-color: #757263;
  color: whitesmoke;
}
#infoPanel div {
  padding: 2em;
  font-family: 'granville', sans-serif;
}
#joinButton {
  text-decoration: underline;
  color: whitesmoke;
}
#featureTitle {
  text-decoration: underline;
}
#featurePanel {
  background-color: #e1ccbe;
  padding-bottom: 2em;
  text-align: center;
}
#eventPanel {
  padding-bottom: 1em;
}
#picturePanel {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
  padding-top: 3em;
  background-color: #757263;
}
#picturePanel img {
  width: 100%;
}
/*--------------------------------------------------*/
/* CALENDAR */
/*--------------------------------------------------*/
.calendar {
  padding: 1em 0;
}
/*--------------------------------------------------*/
/* CLASSES */
/*--------------------------------------------------*/
#classPanel {
  text-align: center;
}
.disclaimer {
  font-family: 'granville', sans-serif;
}
/*--------------------------------------------------*/
/* SUMMER */
/*--------------------------------------------------*/
#summerInfoPanel {
  background-color: rgba(255, 255, 255, 0.5);
  background-image: url("gallery/barn.png");
  background-blend-mode: lighten;
  text-align: center;
}
#summerButton {
  margin: 10px 0px 20px 0px;
}
#summerSchedule {
  text-decoration: underline;
  color: #757263;
  display: inline-block;
  background-color: #e1ccbe;
  width: 100%;
  padding: 1em 0 1em 0;
  border: 1px solid #757263;
}
#endOfSummerPanel {
  text-align: center;
  font-family: 'granville', sans-serif;
}
#summerProgramPanel {
  text-align: center;
}
#summerText {
  max-width: 500px;
}
/*--------------------------------------------------*/
/* ABOUT */
/*--------------------------------------------------*/
#aboutPanel {
  display: flex;
  flex-direction: column;
}
#aboutJoinButton {
  text-align: center;
  margin-bottom: 1em;
  padding-top: 1em;
}
#ownerPanel {
  display: flex;
  flex-direction: column;
  padding-bottom: 1em;
}
#aboutText p {
  font-family: 'brandon-grotesque', sans-serif;
}
#ownerText p {
  font-family: 'brandon-grotesque', sans-serif;
}
#ownerPic {
  padding: 2em 1em;
}
#certPanel {
  display: flex;
  flex-direction: column;
  padding: 0 1em;
}
#certPanel img {
  width: 100%;
  padding: 1em 0;
}
#mapPanel {
  display: flex;
  flex-direction: column;
  padding-bottom: 1em;
}
#mapPanel img {
  width: 100%;
}
#mapPic {
  align-content: center;
}
#hoursInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#hoursInfo p {
  font-family: 'brandon-grotesque', sans-serif;
  text-align: center;
}
#hoursInfo td {
  font-family: 'brandon-grotesque', sans-serif;
}
#hoursInfo th {
  font-family: 'granville', sans-serif;
}
/*--------------------------------------------------*/
/* CONTACT */
/*--------------------------------------------------*/
#contactBox {
  padding-bottom: 1em;
}
#contactBox p {
  font-family: 'brandon-grotesque', sans-serif;
}
#contactSocial a {
  padding-right: 0.5em;
}
/*--------------------------------------------------*/
/* COMPONENTS */
/*--------------------------------------------------*/
.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.collection {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-evenly;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.collection li {
  width: 320px;
  padding: 1em;
  align-content: center;
  font-family: 'brandon-grotesque', sans-serif;
}
.collection a {
  text-decoration: underline;
  color: #757263;
}
.collection img {
  width: 100%;
}
.titleA {
  display: inline-block;
  background-color: #e1ccbe;
  color: #757263;
  padding: 10px;
  border: 1px solid #757263;
  font-family: 'granville', sans-serif;
}
.titleB {
  text-align: center;
  color: #757263;
  font-family: 'granville', sans-serif;
}
.button {
  text-decoration: none;
  color: whitesmoke;
  display: inline-block;
  background-color: black;
  padding: 1em;
  border: 1px solid whitesmoke;
  font-family: 'granville', sans-serif;
}
.textBox {
  color: #757263;
  background-color: #e1ccbe;
  border: 1px solid #757263;
  padding: 0 1em;
  margin: 1em;
}
.contactForm {
  color: #757263;
  background-color: #e1ccbe;
  border: 1px solid #757263;
  padding: 1em;
  margin: 1em;
  font-family: 'brandon-grotesque', sans-serif;
}
.submit {
  width: 7em;
  background-color: black;
  color: white;
  padding: 1em 0;
  font-family: 'granville', sans-serif;
  font-size: 5;
  margin: 1em 0 0;
}
.nameField {
  display: flex;
  flex-direction: column;
}
form {
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 750px;
}
form input {
  margin-bottom: 1em;
}
/*--------------------------------------------------*/
/* FOOTER */
/*--------------------------------------------------*/
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #757263;
  padding: 3% 0 3% 0;
}
#bottomInfo {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  text-align: center;
  align-content: center;
  justify-content: center;
  color: whitesmoke;
  border-bottom: 1px solid antiquewhite;
  font-family: 'brandon-grotesque', sans-serif;
}
#signUp {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  text-align: center;
  justify-content: center;
  color: whitesmoke;
  border-bottom: 1px solid antiquewhite;
  font-family: 'granville', sans-serif;
  padding-bottom: 1em;
}
#signUpForm {
  align-items: center;
}
#bottomLinks {
  display: flex;
  flex-direction: column;
  text-align: center;
  color: antiquewhite;
  padding-top: 1em;
  font-family: 'brandon-grotesque', sans-serif;
}
#bottomLinks ul {
  list-style-type: none;
  margin: 0;
  padding: 0 0 10% 0;
}
#bottomLinks li {
  padding: 3% 0 3% 0;
}
#bottomLinks a {
  text-decoration: underline;
  color: antiquewhite;
}
#bottomSocial {
  filter: invert(100%);
  justify-content: center;
}
#bottomSocial a {
  padding: 0 0.5em;
}
/*--------------------------------------------------*/
/* QUERIES */
/*--------------------------------------------------*/
@media (min-width: 700px) {
  nav ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 1.2em;
  }
  nav li {
    border-bottom: 0;
    padding-left: 2%;
    padding-right: 2%;
  }
  footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
  }
  #bottomInfo {
    border-bottom: 0;
  }
  #signUp {
    border-bottom: 0;
  }
  #bottomLinks {
    padding-top: 0;
  }
  #infoPanel {
    display: flex;
  }
  #logoPanel {
    display: flex;
    align-items: stretch;
  }
  #logoPanel ul {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
    padding-right: 4%;
    border: 0;
    background-color: white;
    filter: none;
  }
  #infoPanel {
    flex-direction: row;
  }
  #contactPanel {
    flex-direction: row;
    align-items: stretch;
    width: auto;
  }
  #aboutPanel {
    flex-direction: row;
  }
  #aboutTitle {
    padding: 1em;
    width: 35%;
    margin-right: 0.5em;
  }
  #aboutText {
    padding-right: 1em;
  }
  #aboutJoinButton {
    text-align: start;
  }
  #ownerPanel {
    flex-direction: row;
  }
  #ownerText {
    padding: 1em;
    width: 50%;
  }
  #ownerPic {
    width: 50%;
    text-align: center;
  }
  #ownerPic img {
    width: 75%;
    padding-top: 5em
  }
  #certPanel {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
  }
  #mapPanel {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
  #hoursInfo p {
    margin-top: 0;
  }
  #eventContactForm .nameField {
    flex-direction: row;
    justify-content: space-between;
  }
  #eventContactForm #firstName {
    width: 33%
  }
  #eventContactForm #lastName {
    width: 33%;
  }
  @media (min-width: 950px) {
    #contactForm .nameField {
      flex-direction: row;
      justify-content: space-between;
    }
    #contactForm #firstName {
      width: 33%
    }
    #contactForm #lastName {
      width: 33%;
    }
  }
  @media (min-width: 1400px) {
    #wrapper {
      margin: auto;
      width: 80%;
      max-width: 1600px;
    }
  }
}