@media (min-width: 1025px)
{
	  .fa-schoolLogo
	  {
		  margin-top: 50px;
		  margin-bottom: 50px;
		  display: block;
		  margin-left: auto;
		  margin-right: auto;
		  width: 50%;
	  }
 	  figure > figcaption
	  {
		  text-align: left;
		  /* this font size keeps description in one line */
		  font-size: 16px;
		  font-weight: bold;
		  color: red;
	  }
	  .container
	  {
		  margin-top: 10%;
	  }
	  .slideshow-container
	  {
		  box-sizing: border-box;
		  /* this width keeps the photo and caption in the middle of the two arrows */
		  max-width: 650px;
		  position: relative;
		  margin: auto;
		  margin-bottom: 80px;
	  }
	  .mySlides
	  {
		  width: 500px;
		  height: 20px;
		  text-align: center;
		  margin-left: 50px;
	  }
	  /* hide all except first one, by default */
	  .hideSlides
	  {
		  display: none;
	  }
	  /* next and previous buttons */
	  .prev, .next
	  {
		  cursor: pointer;
		  position: absolute;
		  top: 50%;
		  width: auto;
		  margin-top: 200px;
		  padding: 10px;
		  color: red;
		  font-weight: bold;
		  font-size: 50px;
		  transition: 0.6s ease;
		  border-radius: 0 3px 3px 0;
	  }
	  .prev
	  {
		  margin-left: -150px;
	  }
	  /* position the next button to the right */
	  .next
	  {
		  right: -150px;
		  border-radius: 3px 0 0 3px;
	  }
	  /* on hover add black background color */
	  .prev:hover, .next:hover
	  {
		  background-color: rgba(0, 0, 0, 0.8);
	  }
	  .fade
      {
		  -webkit-animation-name: fade;
	      -webkit-animation-duration: 1.5s;
	      animation-name: fade;
	      animation-duration: 1.5s;
      }
      @-webkit-keyframes fade
      {
		  from {opacity: 0.4}
	      to  {opacity: 1}
      }
      @-keyframes fade
      {
		  from { opacity: 0.4 }
	      to  {opacity: 1}
      }
	  /* set individual icons */
	  .photo
	  {
		  width: 500px;
		  height: 500px;
	  }
	  .fa-pageFooter
	  {
		  margin-top: 700px;
	  }
}

@media (min-width: 768px) and (max-width: 1024px)
{
	  .fa-schoolLogo
	  {
		  margin-top: 50px;
		  margin-bottom: 50px;
		  display: block;
		  margin-left: auto;
		  margin-right: auto;
		  width: 75%;
	  }
 	  figure > figcaption
	  {
		  text-align: left;
		  font-size: 20px;
		  font-weight: bold;
		  color: red;
	  }
	  .container
	  {
		  margin-top: 10%;
	  }
	  .slideshow-container
	  {
		  box-sizing: border-box;
		  max-width: 700px;
		  position: relative;
		  margin: auto;
		  margin-bottom: 80px;
	  }
	  .mySlides
	  {
		  width: 300px;
		  height: 20px;
		  text-align: left;
		  margin-left: 200px;
	  }
	  /* hide all except first one, by default */
	  .hideSlides
	  {
		  display: none;
	  }
	  /* next and previous buttons */
	  .prev, .next
	  {
		  cursor: pointer;
		  position: absolute;
		  top: 50%;
		  width: auto;
		  margin-top: 70px;
		  padding: 10px;
		  color: red;
		  font-weight: bold;
		  font-size: 25px;
		  transition: 0.6s ease;
		  border-radius: 0 3px 3px 0;
	  }
	  /* position the next button to the right */
	  .next
	  {
		  right: 0;
		  border-radius: 3px 0 0 3px;
	  }
	  /* on hover add black background color */
	  .prev:hover, .next:hover
	  {
		  background-color: rgba(0, 0, 0, 0.8);
	  }
	  .fade
      {
		  -webkit-animation-name: fade;
	      -webkit-animation-duration: 1.5s;
	      animation-name: fade;
	      animation-duration: 1.5s;
      }
      @-webkit-keyframes fade
      {
		  from {opacity: 0.4}
	      to  {opacity: 1}
      }
      @-keyframes fade
      {
		  from { opacity: 0.4 }
	      to  {opacity: 1}
      }
	  /* set individual icons */
	  .photo
	  {
		  width: 150px;
		  height: 150px;
	  }
	  .fa-pageFooter
	  {
		  margin-top: 350px;
	  }
}

@media (max-width: 767px)
{
	  .fa-schoolLogo
	  {
		  margin-top: 50px;
		  margin-bottom: 50px;
		  display: block;
		  margin-left: auto;
		  margin-right: auto;
		  width: 80%;
	  }
 	  figure > figcaption
	  {
		  text-align: left;
		  font-size: 14px;
		  font-weight: bold;
		  color: red;
	  }
	  .container
	  {
		  margin-top: 10%;
	  }
	  .slideshow-container
	  {
		  box-sizing: border-box;
		  max-width: 250px;   /*300px;*/
		  position: relative;
		  margin: auto;
		  margin-bottom: 80px;
	  }
	  .mySlides
	  {
		  width: 250px; /*300px;*/
		  height: 20px;
		  text-align: left;
		  margin-left: 20px;
	  }
	  /* hide all except first one, by default */
	  .hideSlides
	  {
		  display: none;
	  }
	  /* next and previous buttons */
	  .prev, .next
	  {
		  cursor: pointer;
		  position: absolute;
		  top: 50%;
		  width: auto;
		  margin-top: 5px;   /*-22px;*/
		  padding: 10px;
		  color: red;
		  font-weight: bold;
		  font-size: 15px;
		  transition: 0.6s ease;
		  border-radius: 0 3px 3px 0;
	  }
	  /* position the next button to the right */
	  .next
	  {
		  right: 0;
		  border-radius: 3px 0 0 3px;
		  margin-right: 15px;
	  }
	  /* position the previous button to the left */
	  .prev
	  {
		  margin-left: -30px;
	  }
	  /* on hover add black background color */
	  .prev:hover, .next:hover
	  {
		  background-color: rgba(0, 0, 0, 0.8);
	  }
	  .fade
      {
		  -webkit-animation-name: fade;
	      -webkit-animation-duration: 1.5s;
	      animation-name: fade;
	      animation-duration: 1.5s;
      }
      @-webkit-keyframes fade
      {
		  from {opacity: 0.4}
	      to  {opacity: 1}
      }
      @-keyframes fade
      {
		  from { opacity: 0.4 }
	      to  {opacity: 1}
      }
	  /* set individual icons */
	  .photo
	  {
		  width: 100px;
		  height: 100px;
	  }
	  .fa-pageFooter
	  {
		  margin-top: 250px;
	  }
}