* {
      box-sizing: border-box;
}

html {
      background-color: #003366;
      cursor: default;
}


img {
      height: 140px;
      width: 100px;
}

a {
      text-decoration: underline;
      color: #FFFFFF;
      cursor: pointer;
}

.wrapper {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-auto-rows: minmax(100px, auto);
      grid-gap: 10px;
      background-color: #003366;
      color: #FFFFFF;
      height: auto;
      width: auto;
      line-height: 1.5;
}

@font-face {
      font-family: "Courgette";
      src: url(_fonts/courgette.woff2);
      src: url(_fonts/courgette.woff);
      src: url(_fonts/courgette.ttf);
}

@font-face {
      font-family: "Zilla-Med";
      src: url(_fonts/zilla/ZillaSlab-Medium.tff);
      src: url(_fonts/zilla/ZillaSlab-Medium.woff);
}

@font-face {
      font-family: "Zilla-Light";
      src: url(_fonts/zilla/ZillaSlab-Light.tff);
      src: url(_fonts/zilla/ZillaSlab-Light.woff);
}


.header {
      grid-column: 1 / 7;
      grid-row: 1;
      background-image: linear-gradient(#3EA3FA, #003366);
      font-family: courgette;
      color: #FFFFFF;
      text-align: center;
      font-size: 6.5vh;
      text-shadow: 5px 5px 5px #000000;
      padding-top: 1.3%;
      list-style-type: none;
}

.header a {
      list-style-type: none;
      text-decoration: none;
      color: #FFFFFF;
}

.subhead {
      font-size: 3.5vh;

}

.responsive {
      width: 82%;
      height: auto;
}

.sportsHero {
      grid-column: 2 / 6;
      grid-row: 2 / 3;
      margin-left: 10vw;
      margin-right: 10.5vw;

}

.sportsHero img {
      grid-column: 2 / 6;
      grid-row: 2 / 3;
      margin-left: 2vw;
      margin-top: -1.5vh;
      width: 40vw;
}

.video {
      grid-column: 2 / 6;
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 30px;
      height: 0;
      overflow: hidden;
}

.video iframe,
.videor object,
.videor embed {
      position: absolute;
      top: 0;
      left: 10px;
      width: 90%;
      height: 90%;
}

.line {
      height: 2px;
      background-color: #FFFFFF;
      grid-column: 2 / 6;
      align-items: center;
      margin-right: 2vw;
}

.torSec {
      grid-column: 2 / 6;
      text-align: center;
}

.submit {
      grid-column: 4;
      text-align: center;

}

select {
      width: 20vw;
      color: gray;
}

.nomSpan {
      color: red;
}

.form {
      margin-top: .2vw;
      grid-column: 2 / 6;
      margin-left: 5vw;
      margin-right: 5vw;

}

.uploadPic {
      margin-left: 2.5vw;

}

.thankYou {
      grid-column: 2 / 6;
      margin-top: .2vw;
      margin-left: 0vw;

}

input[type=submit] {
      border-radius: 15px 15px 15px;
      height: 2.5vw;
      width: 8vw;
      border: solid 1px #000000;
      background-color: #ffffff;
      color: #003366;
      text-align: center;
      font-weight: bold;
      font-size: 1.3vw;
      margin-left: 2.5vw;
}

input[type=submit]:hover {
      background-color: lightgray;
      font-style: italic;

}

.history {
      grid-column: 2 / 6;
      line-height: 1.6;
      margin-top: .5vw;
      margin-left: 4vw;
      margin-right: 5vw;
      font-size: larger;
      text-align: center;
      text-shadow:
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            1px 1px 0 #000;
}

.officer {
      grid-column: 1 / 7;


}

.office1 {
      grid-column: 1 / 4;
      margin-left: 10vw;
      padding-left: 10vw;
}

.office2 {
      grid-column: 4 / 7;
      margin-left: 10vw;
}

.inaguralMembers {
      grid-column: 1 / 7;
}

.inaguralMembers img {
      width: 50% !important;
      height: 80% !important;
      margin-left: 24.5vw;

}


.CFAops {
      color: #FFFFFF;
      margin-top: -1.5%;
      margin-left: 7%;
      font-size: 3.5vh;
      grid-column: 2 / 5;
      line-height: 250%;
}

.ops {
      display: grid;
      grid-column: 2 / 6;
      grid-row: 3 /5;
      font-size: 3vh;
      line-height: 200%;
      text-align: center;
}

.opsimg {
      margin-top: -1vw;
      margin-left: 4vw;

}

.opsimg img {
      width: 50vw;
}

.years {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      grid-column: 2 / 7;
      grid-row: 3 / 6;
      font-size: 5vh;
      width: 75%;
      margin-left: 3%;
      word-spacing: 100px;
      margin-top: -4%;
      line-height: 250%;
      text-align: center;
}

.years a {
      list-style-type: none;
      text-decoration: none;
      color: #FFFFFF;
}

.years a:hover {
      font-style: italic;
}

.nomLink {
      grid-row: 2;
      grid-column: 2 / 6;
      text-align: center;
      font-size: 2vw;
}

.people {
      display: inline-flex;
      grid-column: 2 / 6;
      grid-row: 2;
      align-content: center;

}

.people2 {
      display: inline-flex;
      grid-column: 2 / 6;
      grid-row: 3;
      align-content: center;
      padding-top: 5%;
}

.people3 {
      display: inline-flex;
      grid-column: 2 / 6;
      grid-row: 4;
      align-content: center;
      padding-top: 5%;
}

.people15 {
      display: inline-flex;
      grid-column: 2 / 6;
      grid-row: 2;
      align-content: center;
      margin-left: -5%;
}

.people16 {
      display: inline-flex;
      grid-column: 2 / 6;
      grid-row: 3;
      align-content: center;
      padding-top: 5%;
      margin-left: -5%;
}

.people20 {
      display: inline-flex;
      grid-column: 2 / 6;
      grid-row: 3;
      align-content: center;
      padding-top: 5%;
      margin-left: 5%;
}

.gallery {
      margin-left: 10%;
      padding-top: 3.5%;
      padding-left: 0%;
      vertical-align: top;
      text-align: center;
      width: 20%;
}

.gallery a {
      list-style: none;
      text-decoration: none;
}

.gallery a:hover {
      font-style: italic;
}

.gallery img {
      border: solid;
      border-width: 3px;
      border-color: #3EA3FA;
}

.gallery img:hover {
      border-width: 3px;
      border: solid;
      border-color: #000000;
}

.gallery img:hover {
      border-width: 3px;
      border: solid;
      border-color: #000000;
}

.caption {
      display: block;
}

.name {
      text-shadow:
            -1.5px -1.5px 0 #000,
            1.5px -1.5px 0 #000,
            -1.5px 1.5px 0 #000,
            1.5px 1.5px 0 #000;
      padding-right: 0%;
}

.name a {
      list-style-type: none;
      text-decoration: none;
      color: #FFFFFF;
      font-family: Zilla-Med;
}

.name a:hover {
      font-style: italic;
}

.name a:visited {
      list-style-type: none;
      text-decoration: none;
      color: #FFFFFF;
}

.name ul li {
      background-color: #1F6BB0;
      font-style: italic;

}

.fullname {
      text-shadow:
            -1.5px -1.5px 0 #000,
            1.5px -1.5px 0 #000,
            -1.5px 1.5px 0 #000,
            1.5px 1.5px 0 #000;
      padding-right: 30%;
}

.fullname a {
      list-style-type: none;
      text-decoration: none;
      color: #FFFFFF;
      font-family: Zilla-Med;
}

.fullname a:hover {
      font-style: italic;
}

.fullname a:visited {
      list-style-type: none;
      text-decoration: none;
      color: #FFFFFF;
}

.fullname ul li {
      background-color: #1F6BB0;
      font-style: italic;

}

#sidenav {
      grid-column: 1;
      grid-row: 2 / 5;
      text-indent: 10%;
      color: #FFFFFF;
      font-size: 3.8vh;
      padding-top: 10px;
      padding-right: 10px;
      list-style-type: none;
      font-size: 1.5vw;
      text-shadow:
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            1px 1px 0 #000;
}

#sidenav ul li {
      border-radius: 15px 50px 15px;
      border: solid 1px #000000;
      margin-bottom: 5%;
      background-color: #2F87D5;
      list-style-type: none;
}

#sidenav li {
      width: 13vw;

}

#sidenav li:hover {
      background-color: #1F6BB0;
      font-style: italic;
}

#sidenav a {
      text-decoration: none;
      color: #FFFFFF;
}

.list {
      grid-column: 1;
      grid-row: 2 / 5;
      text-indent: 8%;
      color: #FFFFFF;
      padding-right: 0px;
      list-style-type: none;
      font-size: 1.2vw;
      text-shadow:
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            1px 1px 0 #000;
}

.list ul li {
      border-radius: none;
      margin-bottom: 5%;
      background-color: #2F87D5;
      list-style-type: none;
}

.list li {
      width: 50px;

}

.list li:hover {
      background-color: #1F6BB0;
      font-style: italic;
}

.list a {
      text-decoration: none;
      color: #FFFFFF;

}

#hamMenu {
      width: 100%;
      background: transparent;
}

#hamList {
      display: none;
}

#hamList a {
      flex-grow: 1;
      flex-basis: 0;
      padding: 10px;
      color: #FFFFFF;
      text-decoration: none;
      text-align: center;
}

#hamList a:hover {
      background: transparent;
      font-style: italic;
}

#hamMenu label,
#hamburger {
      display: none;
}

.bar {
      display: block;
      width: 25px;
      height: 3px;
      margin: 5px auto;
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      background-color: #3EA3FA;
}

.intro {
      grid-column: 2 / 6;
      grid-row: 3;
      margin-left: 0%;
}

.bio {
      grid-column: 2 / 6;
      font-size: large;
      padding-left: 5%;
}

.sponsors {
      grid-column: 2 / 5;
      font-size: 3.5vh;
      margin-left: 1.5%;
}

.sponsors ul {
      list-style-type: none;
}

.sponsors li:hover a {
      font-style: italic;
}

hr {
      border: 1px solid #003366;
}

.information {
      color: #FFFFFF;
      margin-top: -2.5%;
      margin-left: 7%;
      font-size: 4vh;
      grid-column: 2 / 7;
      line-height: 250%;
      width: auto;
}

.information a {
      text-align: center;
      list-style-type: none;
      text-decoration: none;
      color: #FFFFFF;
}

.information a:hover {
      font-style: italic;
}

.information a:visited {
      text-align: center;
      list-style-type: none;
      text-decoration: none;
      color: #FFFFFF;
}

.citation {
      color: #FFFFFF;
      grid-column: 2 / 6;
      font-size: 3.8vh;
      margin-top: -.5%;
      padding-left: 1%;
      line-height: 175%;

}

.citation ul {
      list-style-type: none;
}

.map {
      color: #FFFFFF;
      margin-top: 1.5%;
      margin-left: 4%;
      font-size: 2.75vh;
      grid-column: 2 / 6;
      line-height: 120%;
}

.map ul {
      list-style: none;
}

.hide {
      margin-left: .3%;
}

.hide a {
      color: #003366;
      cursor: default;
}

footer {
      grid-column: 2 / 6;
      text-align: center;
      font-style: italic;
}


@media (min-width: 1025px) and (max-width: 1280px) {
      .opsimg {
            margin-top: -8vw;
            margin-left: 3vw;
      }

      .list {
            grid-column: 1;
            grid-row: 2 / 5;
            text-indent: 8%;
            color: #FFFFFF;
            padding-right: 0px;
            list-style-type: none;
            font-size: 1vw;
            text-shadow:
                  -1px -1px 0 #000,
                  1px -1px 0 #000,
                  -1px 1px 0 #000,
                  1px 1px 0 #000;
      }
}


@media screen and (max-width: 1023px) and (min-width: 768px) {
      img {
            height: 120px;
            width: 80px;
      }

      .list {
            grid-column: 1;
            grid-row: 2 / 5;
            text-indent: 8%;
            color: #FFFFFF;
            padding-right: 0px;
            list-style-type: none;
            font-size: 1vw;
            text-shadow:
                  -1px -1px 0 #000,
                  1px -1px 0 #000,
                  -1px 1px 0 #000,
                  1px 1px 0 #000;
      }

      .gallery {
            margin-left: 10%;
            padding-top: 4%;
      }

      .sportsHero {
            grid-column: 2 / 6;
            grid-row: 2 / 3;
            margin-left: 10vw;
            margin-right: 12vw;
            margin-top: -1.5vw;
      }

      .opsimg {
            margin-top: -8vw;
            margin-left: 3vw;
      }

      .opsimg img {
            width: 50vw;
      }
}

.office1 {
      grid-column: 2 / 4;
      margin-left: -8vw;
}

.office2 {
      grid-column: 4 / 6;
}


@media screen and (max-width: 767px) {

      #sidenav {
            display: none;
            visibility: hidden;
      }

      img {
            height: 80px;
            width: 50px;
      }

      .intro {
            font-size: 3vw;
      }

      .sportsHero {
            grid-column: 2 / 7;
            grid-row: 2 / 3;
            margin-left: 0%;
            margin-top: -5%;
      }

      .eligibility {
            grid-column: 1 / 6;

      }

      .ops {
            display: grid;
            grid-column: 1 / 7;
            grid-row: 3 /5;
            margin-left: 2vw;
            margin-right: 2vw;
            font-size: 2vh;
            line-height: 200%;
            text-align: center;
      }

      .opsimg {
            margin-left: -2vw;
      }

      .opsimg img {
            width: 60vw;
      }

      .header {
            font-size: 6vw;
            margin-left: 1.5px;
            margin-right: 1.5px;
            border-bottom: solid #FFFFFF;
      }

      .subhead {
            font-size: 4.5vw;
      }

      .sportsHero {
            grid-column: 2 / 6;
            grid-row: 2 / 3;
            margin-left: 10vw;
            margin-right: 12vw;
            margin-top: -1.5vw;
      }

      .gallery {
            margin-left: 0vw;
            min-width: 90px;
            max-width: 120px;
      }

      .years {
            grid-column: 1 / 7;
            font-size: 4.5vw;
            justify-content: space-between;
            margin-left: 10vw;
      }

      .nomLink {
            font-size: large;
      }

      .caption {
            text-align: center;
            font-size: 3vw;
      }

      .people {
            display: inline-flex;
            grid-column: 2 / 7;
            grid-row: 2;
            margin-left: -2vw;
      }

      .people2 {
            display: inline-flex;
            grid-column: 2 / 7;
            grid-row: 3;
            padding-top: 5%;
            margin-left: -2vw;
      }

      .people3 {
            display: inline-flex;
            grid-column: 1 / 6;
            grid-row: 4;
            margin-left: 14.5vw;
            padding-top: 5%;
      }

      .people15 {
            display: inline-flex;
            grid-column: 1 / 6;
            grid-row: 2;
            margin-left: 4.5vw;
      }

      .people16 {
            display: inline-flex;
            grid-column: 1 / 6;
            grid-row: 3;
            padding-top: 5%;
            margin-left: 4.5vw;
      }

      .people20 {
            display: inline-flex;
            grid-column: 1 / 6;
            grid-row: 3;
            padding-top: 5%;
            margin-left: 8vh;
      }

      #hamList {
            display: none;
      }

      #hamList a {
            box-sizing: border-box;
            display: block;
            width: 100%;
            border-bottom: 1px solid black;
      }

      #hamMenu {
            margin-bottom: 0vh;
      }

      #hamMenu label {
            display: inline-block;
            color: white;
            background: transparent;
            font-style: normal;
            font-size: 2em;
            padding: 10px;
            grid-row: 1;
      }

      #hamMenu label :visited {
            color: #FFFFFF;
      }

      #hamMenu :hover {
            cursor: pointer;
      }

      #hamMenu input:checked~#hamList {
            display: block;
            margin-bottom: 5vw;
      }

      .name {
            text-shadow:
                  -1.5px -1.5px 0 #000,
                  1.5px -1.5px 0 #000,
                  -1.5px 1.5px 0 #000,
                  1.5px 1.5px 0 #000;
            padding-right: 0%;
            text-align: center;
            font-size: 2vh;
      }

      .sponsors {
            grid-column: 1 / 6;
            font-size: 3vh;
            margin-left: -5vw;
      }

      .information {
            color: #FFFFFF;
            grid-column: 1 / 7;
            margin-top: -3%;
            font-size: 4.5vw;
      }

      .citation {
            grid-column: 1 / 7;
            margin-left: -5vw;
            font-size: 4vw;
      }

      .map {
            grid-column: 1 / 7;
      }

      .hide {
            margin-left: 0vw;
      }


      .hide p iframe {
            max-width: 300px;
            max-height: 300px;
            margin-left: 2vw;
      }

      .officer {
            grid-column: 2 / 6;
      }

      .office1 {
            grid-column: 2 / 4;
            margin-left: 0vw;
      }

      .office2 {
            grid-column: 4 / 6;
      }

      form {
            margin-left: -16vw;

      }

      textarea {
            width: 120%;
      }

      input[type=text] {
            width: 120%;
      }

      input[type=submit] {
            height: 8vw;
            width: 25vw;
            font-size: large;
            margin-left: 9vw;
            margin-top: -10vw;
      }

      footer {
            grid-column: 1 / 7;
      }



}