*{
  font-family:Arial, Helvetica, sans-serif;
}

*{
  margin:0;
}

html {
  overflow: scroll;
  overflow-x: hidden;
}

/* Footer Text */
h1{
  color:black;
  font-size:1em;
  font-weight:normal;
 }

/* Home Headlines */
h2 {
  color: white;
  font-size: 3vw;
}

/* Home Bodytext */
p .home-text {
  text-align: left;
  font-size: 1.5vw;
}

/*About Bodytext*/
p .about-text{
  color:black;
  font-size: 1.5em;
}

/*Join Our Mailing List Text*/
p .mailing-list {
  color:black;
  font-size: 1.5vw;
}
/* Privacy Policy Link Container */
.privacy-policy-link-container {
  text-align: center;
}

/* Privacy Policy Bodytext */
p .privacy-policy-container{
  color: black;
  font-size: 1.5em;
}

/* Privacy Policy Headings */
h3 .privacy-policy-container{
  color:black;
  font-size:large;
}

header {
  background-color:white;
  height: 20%;
  left:5%;
  right:5%;
  width:90%;
  margin:auto;
  position:fixed
}

main{
  top:20%;
  bottom:5%;
  left:5%;
  right:5%;
  margin:auto;
  width:90%;
  position:fixed;
  }

footer {
  margin:auto;
  background-color: white;
  bottom: 0px;
  left: 5%;
  right:5%;
  height: 5%;
  width: 90%;
  position:fixed;
  margin:auto;
  text-align: center;
  padding-top: 2em;
}

.navigation-bar{
  height:100%
}

.nav-bar-logo{
  display: inline-block;
  height:85%;
  margin-top: 1em;
}

.menu-container{
  display:inline-flex;
  flex-direction: row;
  justify-content: end;
  background-color: white;
  float: right;
  height:100%;
  padding-top:2em;
}

.menu-container a {
  color: black;
  text-decoration: none;
  font-size: 1em;
  padding-left: 1.25em;
  text-align: right;
}

.menu-container a:hover {
  background-color: white;
  color: grey;
}

.home-container{
  position:relative;
  background-image: url(/images/HomeImageRev.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);
  height:100%;
}

.home-sub-container{
  height:auto;
  width:70%;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap: 20px;
  row-gap: 5px;
  grid-template-areas: 
  "logo dates"
  "logo times"
  "logo text"
  "logo location"
  "logo admission";
  justify-items:start;
}

.home-logo{
  grid-area: logo;
  object-fit: contain;
  justify-items: right;
 }

.home-dates{
  grid-area:dates;
}

.home-times{
  grid-area:times;
}

.home-text{
  grid-area:text;
  color:white;
}

.home-location{
  grid-area:location
}

.home-admission{
 grid-area:admission;
}

.about-container{
   height: 100%;
   width: 100%;
   overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    }

.about-container::-webkit-scrollbar{
  width: 0;
  height: 0;
}

.about-image-grid{
  width:100%;
  height: 100%;
}

.about-grid-sizer, .about-grid-item{
  width: 24%;
  margin-bottom:1%;
}

.about-grid-item--width2{
  width:11%; 
}

.about-gutter-sizer{
  width:1%;
}

.about-text{
  width: 74%;
  text-align: justify;
}

.about-grid-item img {
  width: 100%;
  object-fit:cover;
}

.mailing-list-container{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin:auto;
  background-color:lightgray;
}

.mailing-list-text{
  text-align: center;
  padding:2em;
}

input[type=text], select {
  width: 70VW;
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

input[type=submit] {
  width: 10VW;
  display:block;
  align-items: center;
  padding: 12px 20px;
  margin: auto;
  border: 1px solid #ccc;
  box-sizing: border-box;
  background-color: white;
  margin-top: 25px;
}

input[type=submit]:hover {
  color: lightgrey;
}

.mailing-list-container a{
  padding-top:20px;
  padding-right: 5%;
  text-decoration: none;;
}

.privacy-policy-link-container{
  width: 10VW;
  display:block;
  align-items: center;
  padding: 12px 20px;
  margin: auto;
  box-sizing: border-box;
  background-color: lightgrey;
  margin-top: 25px;
}

.privacy-policy-container{
  width:100%;
  display:block;
  align-items: center;
  margin: auto;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

.privacy-policy-container::-webkit-scrollbar{
  width: 0;
  height: 0;
}




/* Extra small devices (phones, 775px and down) */
@media only screen and (max-width: 775px) {
  .home-sub-container{
    width:60%;
    height:80%;
    grid-template-columns: 100%;
    grid-template-areas:
    "logo"
    "dates"
    "times"
    "location"
    "admission";
    justify-items:center;
  }

  .home-text, .home-location {
   text-align: center; 
  }
  
  h2{
    font-size:6vw;
  }

    p1{
      font-size:3vw;
  }

    .home-text{
      display:none;  
  }
 
  .menu-container {
    flex-direction: column;
    justify-content: flex-start;
    padding-top:1em;
  }

  main{
    top:27%;
  }

  .nav-bar-logo{
     height:100%; 
  }  

  .about-grid-sizer, .about-grid-item{
    width: 45%;
    margin-bottom:4%;
  }

  .about-grid-item--width2{
    width:45%; 
  }

  .about-text{
      width: 100%;
      text-align: center;
  }
  .about-gutter-sizer{
    width:4%;
  }

  input[type=submit] {
    width: 20VW;
  }

  
  .mailing-list-text {
      padding: 1em;
    }
    
  input[type=text], select {
    width: 70VW;
    padding: 8px 20px;
    margin: 6px 0;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
    
   input[type=submit] {
    width: 30VW;
    padding: 6px 20px;
    margin-top: 15px;
   }
    
   .mailing-list-container a{
    padding-right: 0%;
   }

}



/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 775px) and ( max-width:900) {
 
  .home-sub-container{
      width:90%;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}