.home-container {
  max-width: 2000px;
  margin: 0 auto;
}

/* HOME: WELCOME */

#home-welcome {
  width: 100%;
  display: grid;
  grid-template-areas: "pic1 pic2 content"
                       "pic3 pic3 content";
  grid-template-rows: 50% 50%;
  padding: 0;
}

.welcome-photo img {
  object-fit: cover;
  display: block;
  width: 100%;
  height: 100%;
  max-height: calc((540px) / 2);
}

#photo-1 {grid-area: pic1;}
#photo-2 {grid-area: pic2;}
#photo-3 {grid-area: pic3;}

#home-welcome-content {
  grid-area: content;
  width: 450px;
  color: white;
  text-align: center;
  padding: 20px;
}

#home-welcome-content h1 {
  background: var(--color-purple);
  padding: 0 20px;
  position: relative;
  left: -70px;
  margin: 10px;
  display: inline-block;
}

@media only screen and (max-width: 999px) {
  #home-welcome {grid-template-areas: "pic1 content"
                                       "pic3 content";}
  #photo-2 {display: none;}
}

@media only screen and (max-width: 799px) {
  #home-welcome {
    grid-template-areas: "pic1 pic2"
                         "pic3 pic3"
                         "content content";}
  #photo-2 {display: inherit;}
  #home-welcome-content {width: 100%;}
  #home-welcome-content h1 {left: 0;}
  .welcome-photo {height: 30vw;}
  .welcome-photo img {max-height: 100vh;}
  #home-welcome {grid-template-rows: auto;}
}

/* HOME: COVID CONTAINER */

/* jpg photo */
.no-webp #home-covid {
  color: black;
  background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)), url("/img/coronavirus_public_domain_500x500.jpg") top center no-repeat fixed;
  background-size: contain;
}
/* webp photo */
.webp #home-covid {
  color: black;
  background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)), url("/img/coronavirus_public_domain_500x500.webp") top center no-repeat fixed;
  background-size: contain;
}

#home-covid-container {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  max-width: 1000px;
  margin: 0 auto;
}

#home-covid-photo {
  flex: 1;
}

#home-covid-photo img {
  object-fit: contain;
  max-width: 500px;
  width: 100%;
}

#home-covid-content {
  flex: 1;
}

#home-covid-content h2 {
  background: var(--color-coral);
  margin: 0;
  padding: 10px;
  display: inline-block;
  transform: rotate(3deg);
}

#home-covid-content h3 {
  background: var(--color-yellow);
  margin: 0;
  padding: 10px;
  display: inline-block;
  transform: rotate(-1deg);
}

@media only screen and (max-width: 799px) {
  #home-covid-container {flex-direction: column;}
  #home-covid-content {margin-top: 20px;}
  #home-covid-container {padding: 0;}
}

/* HOME: AVAILABILITY CONTAINER */

/* png photo */
/*LOGO BACKGROUND (update file name) */
.no-webp #home-availability {
  background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)), url("/img/MSoM_PrimaryLogo.png") left center no-repeat;
  background-size: contain;
}

/* webp photo */
/* UNCOMMENT THIS TO ADD IN LOGO BACKGROUND (update file name) */
.webp #home-availability {
  background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)), url("/img/MSoM_PrimaryLogo.webp") left center no-repeat;
  background-size: contain;
}

#home-availability {
  color: var(--color-blue);
  text-align: center;
  padding: 100px 20px;
  display: flex;
}

#home-availability-left,
#home-availability-right {
  padding: 40px;
  flex: 1;
}

#home-availability img {
  width: 100%;
  max-width: 600px;
  transform: rotate(3deg);
  box-shadow: 10px 10px 15px black;
}

#home-availability p {
  color: black;
}

@media only screen and (max-width: 1099px) {
  #home-availability {
    flex-direction: column;
    padding: 50px 20px;}
  #home-availability-left {order: 2; padding: 20px;}
  #home-availability-right {order: 1; padding: 20px;}
}

/* HOME: PROGRAMS CONTAINER */

#home-programs {
  text-align: center;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
}

.program-content,
.program-photo {
  flex: 0 0 25%;
}

.program-content {
  padding: 10px;
}

.program-content h3 {
  margin: 10px 0;
  display: inline-block;
  background: white;
  padding: 5px 10px;
  transform: rotate(-2deg);
}

.program-photo picture img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  display: block;
}

/* jpg photo */
.no-webp #home-programs-header {
  background: url("/img/IMG_8623_500x333.jpg") center center no-repeat;
  background-size: cover;
}
/* webp photo */
.webp #home-programs-header {
  background: url("/img/IMG_8623_500x333.webp") center center no-repeat;
  background-size: cover;
}

#home-programs-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#programs1,
#programs2 {
  display: inline-block;
  padding: 5px 10px;
  margin: 5px;
  font-size: calc(20px + 1.7vw);
}
#programs1 {
  transform: rotate(7deg);
  color: white;
  background: black;
}

#programs2 {
  transform: rotate(-8deg);
  color: black;
  background: white;
}

@media only screen and (max-width: 999px) {
  .program-content, .program-photo {flex: 0 0 50%;}
  #home-programs-header {order: 1;}
  #home-program-preschool {order: 2;}
  #home-program-kindergarten {order: 3;}
  #home-program-filler1 {order: 4;}
  #home-program-filler2 {order: 5;}
  #home-program-early-elem {order: 6;}
  #home-program-summer {order: 7;}
  #home-program-filler3 {order: 8;}
}

@media only screen and (max-width: 599px) {
  .program-content, .program-photo {flex: 0 0 100%;}
  #home-programs-header {order: 1;}
  #home-program-preschool {order: 2;}
  #home-program-filler1 {order: 3;}
  #home-program-kindergarten {order: 4;}
  #home-program-filler2 {order: 5;}
  #home-program-early-elem {order: 6;}
  #home-program-filler3 {order: 7;}
  #home-program-summer {order: 8;}
  .program-photo {height: 200px;}
}

/* HOME: TESTIMONIALS SLIDES */

/* jpg photo */
.no-webp #home-testimonials {
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url("/img/IMG_20181029_120834624_1000x750.jpg") top center no-repeat fixed;
  background-size: cover;
}
/* webp photo */
.webp #home-testimonials {
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url("/img/IMG_20181029_120834624_1000x750.webp") top center no-repeat fixed;
  background-size: cover;
}

#home-testimonials {
  padding: 5vw 0;
  color: white;
  position: relative;
  text-align: center;
}

.testimonial-slide {
  width: 80vw;
  margin: 0 auto;
}

/* If arrows are too high or low because the testimonials are too short or too long, change the "top" parameter below to line them up better. Try to keep all testimonials in this section around the same length.*/
.prev, .next {
  position: absolute;
  top: 200px;
  font-size: 60px;
  font-weight: 800;
}

.prev {
  left: 20px;
}

.next {
  right: 20px;
}

.prev:hover,
.next:hover {
  color: var(--color-blue);
  cursor: pointer;
}

.author {
  font-family: var(--font-family-quote);
  font-size: 30px;
}