/*Main frame*/
html {
  height: 100%;
  padding: 0;
  margin: 0;
  font-size: 3em;
}
.top {
  width: 100%;
  height: 4vw;
}

.mainTitle {
  padding-left: 0.7%;
}

.takeMeBack {
  text-decoration: none;
  color: black;
}

.takeMeBack img {
  padding: 0;
  padding-right: 0%;
  height: 3.5vw;
  display: inline-block;
}

.frameBody {
  background-color: lightgreen;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  padding: 0;
  margin: 0%;
  height: 100%;
  overflow: hidden;
}

.logo {
  float: right;
  padding: 0%;
  margin: 0%;
  width: 5%;
  align-content: center;
}

.logo img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

h1 {
  font-size: 2vw;
  text-align: left;
  color: black;
  margin: 0;
  padding: 0.3%;
}

.frame {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  display: flex;
}

.menu {
  float: left;
  border: 0;
  width: 10%;
  height: 100vh;
}

.mainContent {
  float: left;
  border: 0;
  width: 89.5%;
  width: calc(90% - 0px);
  height: calc(100% - 4vw);
  overflow: hidden;
}

.texttopframe {
  display: inline-block;
  padding-top: 0.5%;
}

/*List of years page*/
.yearsBody {
  margin: 0%;
  padding: 0%;
  padding-top: 2%;
  background-color: skyblue;
  overflow: auto;
}

.yearsMenu {
  text-decoration: none;
  color: black;
  margin: 0;
  font-size: 13vw;
  text-align: left;
}

.yearsParagraph {
  margin: 0;
  padding: 7%;
  border-bottom-style: solid;
  border-bottom-color: black;
  border-bottom-width: 1px;
}

.yearsParagraph:hover {
  background-color: darkgray;
}

.dropdown {
  margin: 0;
  padding: 7%;
  background-color: skyblue;
  border: none;
  font-size: 13vw;
  color: black;
  width: 100%;
  border-bottom-style: solid;
  border-bottom-color: black;
  border-bottom-width: 1px;
  text-align: left;
  cursor: pointer;
}

.dropdown:hover {
  background-color: gray;
}

.carrot {
  margin: 0%;
  padding: 0%;
  display: block;
  float: right;
}

.dpDownOptions {
  padding: 0%;
  margin: 0;
  color: black;
  text-align: left;
  display: none;
}

#CurrentYear{
  padding: 0%;
  margin: 0;
  color: black;
  text-align: left;
  display: block;
}

.dpDownOptions p {
  margin: 0%;
  padding: 7%;
  background-color: lightblue;
  border-bottom-style: solid;
  border-bottom-color: darkgray;
  border-bottom-width: 1px;
}

.dropdownIndividual {
  font-size: 13vw;
  padding: 0%;
  text-decoration: none;
  color: #000;
}

.dropdownIndividual p:hover {
  background-color: gray;
}

/*Welcome*/
.welcomeBody {
  background-color: lightyellow;
  padding-right: 5%;
  padding-left: 5%;
  padding-bottom: 8%;
}

#homeTitle {
  text-align: center;
}

.homeAbout p {
  padding: 3%;
  line-height: 160%;
  text-emphasis: bold;
}

.homeTopImage {
  margin: auto;
  display: block;
  width: 90%;
  height: auto;
  padding: 0;
  border-radius: 12px;
}

.homeAbout {
  text-emphasis: bold;
}

.homeAbout h3 {
  display: block;
  padding: 0%;
  font-size: 2vw;
}

.homeAbout p {
  font-size: 1.25vw;
}

.homeRegister h3 {
  display: block;
  padding: 0%;
  font-size: 2vw;
}

.homeRegister p {
  font-size: 1.25vw;
}

.conLoc {
  width: 100%;
  height: 50vh;
  text-align: center;
  display: flex;
  justify-content: center;
}

.homeLocation {
  /*color: gray;*/
  color: black;
  display: block;
  display: inline-block;
  /*background-color: lightgray;*/
  width: 40%;
  height: 30vw;
  margin-left: 12%;
}

.homeLocation h3 {
  display: block;
  padding: 0%;
  font-size: 2vw;
}

.homeLocation p {
  font-size: 1.2vw;
}

.homeLocation iframe {
  width: 30vw;
  height: 20vw;
}

.homeContact {
  /*color: gray;*/
  color: black;
  display: block;
  display: inline-block;
  width: 30%;
  height: 100%;
  margin: auto;

  /*background-color: white;*/
}

.homeContact h3 {
  font-size: 2vw;
}

.homeContact p {
  font-size: 1.2vw;
}

.bottom {
  margin-top: 30vh;
  text-align: center;
  font-size: 1.2vw;
  color: gray;
}

.bottom p {
  padding: 0%;
  margin: 0%;
}

.bottom a {
  text-decoration: none;
  color: gray;
}

.bottom a:hover {
  text-decoration: none;
  color: darkgray;
}

/*Actual years pages*/
.yearHomeBody {
  background-image: url("../Pictures/webwxgetmsgimg.jpeg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  height: 100%;
  padding: 0;
  margin: 0;
  /*background: rgba(255, 255, 224, 1);
  padding-top: 0%;
  padding-right: 0%;
  padding-left: 0%;
  padding-bottom: 0%;*/
}

/* used in multiple html files */
.backgroundmain {
  min-height: 100%;
  background: rgba(255, 255, 224, 0.94);
  padding-top: 1%;
  padding-right: 5%;
  padding-left: 5%;
  padding-bottom: 8%;
} 

.yearHomeBody h1 {
  text-align: center;
}

/*Register*/
.calender {
  padding-top: 2%;
  display: block;
  text-align: center;
}

.calender img {
  width: 28vw;
}

.registrationIntro {
  font-size: 1.5vw;
  padding-bottom: 0.7%;
}

.registerButton {
  font-size: 140%;
}

/*Schedule*/
.scheduleYoungerOlder {
  text-align: center;
}

.scheduleYoungerOlder h2 {
  font-size: 2vw;
  padding-left: 15vw;
}

.scheduleYoungerOlder button {
  display: block;
  float: right;
  margin-right: 13%;
  font-size: 70%;
}

.scheduleInstructions {
  text-align: center;
  font-size: 2vw;
}

#scheduleWholeTableOlder {
  padding: 5%;
  padding-top: 0%;
  text-align: center;
  width: 90%;
  display: block;
}

#headButtonOlder {
  display: block;
}
#headButtonYounger {
  display: none;
}

#scheduleWholeTableYounger {
  padding: 5%;
  padding-top: 0%;
  text-align: center;
  width: 90%;
  display: none;
}

.scheduleTable p {
  padding: 2%;
  margin: 0%;
}

.scheduleTable td {
  border: 1px solid black;
  padding-left: 1%;
  padding-right: 1%;
  padding-top: 2%;
  padding-bottom: 2%;
  background-color: white;
  margin: 0%;
  width: auto;
  font-size: 1.5vw;
}

.scheduleTable {
  display: inline;
  width: 100%;
  border-collapse: collapse;
}

.scheduleGrades {
  font-weight: bold;
}

.scheduleTimes {
  font-weight: bold;
}

.firstTableValue {
  border: 0;
}

.calendarCentering {
  text-align: center;
  width: 100;
}

.calWholeJune {
  text-align: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display: inline-block;
  width: 80%;
  margin: 0%;
  padding: 0%;
  border-radius: 15px;
  margin-bottom: 3%;
}

.calWholeJune table {
  display: block;
  border-collapse: collapse;
  padding: 4%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 12px;
}

.calWholeJune td {
  border: 1px solid black;
  padding-left: 1%;
  padding-right: 1%;
  padding-top: 2%;
  padding-bottom: 2%;
  margin: 0%;
  font-size: 1.5vw;
  width: 10%;
  height: 15%;
}

.calWholeJune tr {
  padding: 0;
}

.calBody p {
  padding: 0;
  margin: 0;
  position: relative;
}

.calWeeks td {
  border: none;
}

.calTop td {
  border: none;
  font-weight: bold;
  font-size: 2vw;
}

.calBody .campWeeks {
  background-color: gold;
  font-size: 2vw;
  font-weight: bold;
  padding: 0;
  margin: 0%;
}

.campWeeks a {
  padding: 0;
  margin: 0;
  text-decoration: none;
  color: black;
  display: inline-block;
  height: 100%;
  width: 100%;
}

.odd h3 {
  margin: 0%;
  padding: 0%;
}

.odd p {
  margin: 0%;
  padding: 0%;
}

/*Gallery*/
.photos {
  text-align: center;
}

.popupGal {
  display: inline-block;
  text-align: center;
  opacity: 1;
  height: 40vw;
  margin: 0%;
  margin-bottom: 2%;
}

.popupGal:hover {
  box-shadow: 5px 5px gray;
  box-shadow: 5px 5px rgba(0, 0, 0, 0.65);
  opacity: 0.8;
}

.individualImage {
  height: 40vw;
  padding-bottom: 0%;
  display: inline-block;
  image-orientation: from-image;
}

.galleryImageNav {
  text-align: center;
  vertical-align: middle;
}

.galleryNavButtonsLeft {
  width: 3%;
  border-radius: 12px;
  display: inline-block;
  font-size: 3vw;
  padding: 1%;
  vertical-align: middle;
  position: absolute;
  top: 40vh;
  left: 2vw;
}

.galleryNavButtonsLeft:hover {
  color: white;
  background: rgba(0, 0, 0, 0.65);
}

.galleryNavButtonsRight {
  border-radius: 12px;
  width: 3%;
  display: inline-block;
  font-size: 3vw;
  padding: 1%;
  vertical-align: middle;
  position: fixed;
  top: 40vh;
  right: 2vw;
}

.galleryNavButtonsRight:hover {
  color: white;
  background: rgba(0, 0, 0, 0.65);
}

.pics {
  text-align: center;
}

.individualWeek {
  display: inline-block;
  text-decoration: none;
  color: black;
  font-size: 1.7vw;
  padding: 2% 4%;
  background-color: white;
  margin: 1%;
  border: 2px solid black;
}

.individualWeek:hover {
  background-color: gray;
  color: white;
}

.picvidHeading {
  padding: 0;
  margin: 0;
  margin-top: 3%;
  margin-bottom: 1%;
  font-size: 2vw;
}

.morePhotos {
  font-size: 1.7vw;
  text-align: center;
}
.morePhotos p {
  display: inline;
}

.galleryTrueImage {
  display: inline-block;
  padding-top: 1%;
  max-width: 86%;
  max-height: 93vh;
}

/*Video*/

.videos {
  text-align: center;
  height: 20vw;
  width: 30vw;
}

.individualVideo {
  height: 40vw;
  padding-bottom: 2%;
  display: inline-block;
}

.individualName {
  font-size: 1.7vw;
}

/*Lunch*/
#menuList {
  text-align: center;
}

.popup {
  display: inline-block;
  text-align: center;
  overflow: hidden;
  width: 25vh;
  height: 40vh;
  margin-right: 2%;
  margin-left: 2%;
  margin-bottom: 2%;
  opacity: 1;
  position: relative;
}

.popup:hover {
  box-shadow: 5px 5px gray;
  box-shadow: 5px 5px rgba(0, 0, 0, 0.65);
  opacity: 0.8;
}

.textOverlay {
  position: absolute;
  width: inherit;
  height: inherit;
  color: white;
  background-color: rgba(0, 0, 0, 0.65);
  top: 0;
  margin: 0;
  font-size: 4vh;
  padding-top: 17vh;
}

.textOverlay:hover {
  background-color: rgba(0, 0, 0, 0);
}

.lunchCoverImage {
  display: inline-block;
  height: inherit;
  width: inherit;
}

.modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: gray;
  background: rgba(0, 0, 0, 0.65);
}

.modal .show {
  display: block;
}

.modalContent {
  text-align: center;
}

.lunchTrueImage {
  display: inline;
  padding-top: 3%;
  padding-left: 2%;
  max-width: 90%;
  max-height: 90vh;
}

.modalClose {
  padding: 0;
  font-size: 300%;
  float: right;
  color: gray;
  padding-right: 1%;
  margin-left: 90%;
}

.menuButtons {
  display: block;
  top: 95.2%;
  right: 50%;
  transform: translate(45%);
}

.menuButton {
  background-color: gray;
  border: none;
  color: white;
  padding: 1.2vh 4vh;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.3vh;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 3px;
}

.menuButton:hover {
  background-color: darkgray;
}

.galleryTrueImageDual {
  display: inline-block;
  padding-top: 1%;
  max-width: 86%;
  max-height: 88vh;
  /*left: 1vw;*/
}

.modalClose:hover {
  color: gainsboro;
}

#lunchDescriptionDiv {
  text-align: center;
}

#lunchDescription {
  margin-top: 1%;
  margin-bottom: 1%;
  display: inline-block;
  background-color: white;
  border-bottom: 6px solid gray;
  width: 80%;
  text-align: left;
}

#lunchDescription p {
  padding-left: 2%;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*Volunteer*/
.hrNoMargin {
  margin-bottom: 0;
}

.volunteerContent {
  text-align: center;
}
.volunteerContent ul {
  list-style-type: none;
  font-size: 1px;
  padding: 0%;
  margin: 0%;
}
li{
  font-size: 24px;
}

/* .volunteerContent ul li {
  padding: 0%;
} */

.imageAndPosition {
  display: inline-block;
  margin-left: 0%;
  margin-top: 0%;
  margin-bottom: 0%;
  vertical-align: top;
  padding-top: 3%;
  margin-bottom: 2%;
}

.popupVol {
  display: inline-block;
  text-align: center;
  width: 40vw;
  height: 30vw;
  margin-right: 6%;
  opacity: 1;
  position: relative;
}

.popupVol:hover {
  box-shadow: 5px 5px gray;
  box-shadow: 5px 5px rgba(0, 0, 0, 0.65);
  opacity: 0.8;
}

.volPositionDescript {
  color: #000;
  font-size: 20px;
  margin: 0;
  width: 40vw;
  display: inline-block;
}

.modalPage {
  height: 96vh;
  width: 60%;
  background: rgba(255, 255, 224, 1);
  display: inline-block;
  border-radius: 2vw;
  margin: 0%;
  margin-top: 1%;
}

.modalVolClose {
  font-size: 3vh;
  float: right;
  color: gray;
  padding-top: 1vw;
  padding-right: 1.75vw;
}

.medalRanking {
  padding: 0;
  display: inline-block;
  margin: 0;
  vertical-align: bottom;
  color: inherit;
}

.modalImageText {
  color: inherit;
  font-size: 3vh;
  padding: 0;
  margin: 0;
}

.modalPageTitle {
  color: black;
  font-size: 4vh;
  padding-top: 1%;
}

.medalAwards {
  display: inline-block;
  height: 3vh;
  padding-right: 2%;
}

.awardTitle {
  border-bottom: 2px solid gray;
  margin: 0;
  padding: 0%;
  padding-top: 3%;
  border-width: 3px;
}

.goldRank {
  border-bottom: 2px solid gold;
  color: gold;
}

.silverRank {
  border-bottom: 2px solid silver;
  color: silver;
}
.bronzeRank {
  border-bottom: 2px solid #cd7f32;
  color: #cd7f32;
}

.noRank {
  border-bottom: 2px solid black;
  color: black;
}

.modalPageText {
  padding: 0;
  display: inline-block;
  margin: 0;
  color: inherit;
}

.modalUnorderedList {
  display: inline-block;
  padding: 0;
  margin-left: 0;
}

.volCoverText {
  position: absolute;
  width: inherit;
  height: inherit;
  color: white;
  background-color: rgba(0, 0, 0, 0.65);
  padding-top: 10vw;
  top: 0;
  margin: 0;
  font-size: 3vh;
}

.volCoverText:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

#imageAndPositionAdjust {
  margin-right: 1vw;
}

.thankYou {
  border-left: 6px solid gray;
  text-align: left;
  background-color: white;
  display: inline-block;
}

.thankYouText {
  color: gray;
  margin-right: 3vw;
  margin-left: 3vw;
}

#myCarousel {
  margin: 0%;
  vertical-align: top;
}

.textAndCarousel {
  transform: translate(2%);
}

.awardsExplanationDiv {
  margin-top: 3%;
  display: inline-block;
  background-color: white;
  border-left: 6px solid gray;
  width: 91.5%;
  padding: 1%;
}

.awardsExplanationTable {
  text-align: left;
  font-size: 1.3vw;
  display: inline-block;
}

.awardsMainTitles {
  background-color: lightblue;
}

.awardsExplanationTable td {
  width: 14vw;
  padding: 0.5%;
  border: 1;
}

.awardsExplanationList {
  display: inline-block;
  text-align: left;
  font-size: 1.3vw;
  vertical-align: top;
  width: 20vw;
}

#awardsSite {
  display: block;
  padding-top: 2%;
  font-size: 1.3vw;
  padding-bottom: 1%;
}

.aligncenter{
  display:flex;
  justify-content: center;
}

.aligntop{
  align-self:top;
}