@media (min-width: 1025px)
{
	  .fa-schoolLogo
	  {
		  margin-top: 50px;
		  margin-bottom: 50px;
		  display: block;
		  margin-left: auto;
		  margin-right: auto;
		  width: 50%;
	  }
      .gallery
      {
		  width: 85%;
	      height: inherit;
	      display: flex;
	      margin: auto;
	      justify-content: space-between; /* center */
	      /* to avoid the below problem of putting images in one row, we use flex-wrap property to put images in multiple rows. */
	      flex-wrap: wrap;
      }
	  figure
      {
		  width: 200px;
	      /* flex items by default have flex shrink property set to 1. So all images shrink to fit in one row. */
	      /* A value 0 will say not to shrink the flex items, but let images go beyond the gallery, and still be in the same row. */
	      /*flex-shrink: 0;*/
      }
	  .modal
      {
		  display: none;
	      position: fixed;
	      z-index: 1;
	      left: 0;
	      top: 0;
	      width: 100%;
	      height: 100%;
	      overflow: auto;
	      background-color: rgb(0, 0, 0);
	      background-color: rgba(0, 0, 0, 0.7);
	      padding-top: 60px;
      }
/*      .modalcontent
      {
		  background-color: #fefefe;
	      margin: 5% auto 15% auto;
	      width: 50%;
      }*/
      .modalphoto   /* my code */
      {
		  display: block;
	      position: absolute;
	      z-index: 1;
	      margin: auto;
	      left: 600px;
	      top: 200px;
	      height: 400px;
	      overflow: auto;
	      padding-bottom: 100px; /* my code */
	      width: 400px;
      }
      .close
      {
		  top: 25px;
	      right: 35px;
	      color: white;
	      position: absolute;
	      font-size: 35px;
	      font-weight: bold;
	      /* my code here */
	      width: 40px;
	      height: 40px;
	      border: 2px solid white;
	      border-radius: 50%;
	      background-color: gray;
	      text-align: center; /* to keep the cross at the center of the circle */
      }
      .close:hover, .close:focus
      {
		  color: red;
	      cursor: pointer;
      }
      /* next and previous buttons */
      .prev, .next
      {
		  cursor: pointer;
	      position: absolute;
	      top: 50%;
	      width: auto;
	      padding: 30px; /* 30px from the side of the screen */
	      color: white;
	      font-weight: bold;
	      font-size: 50px;
	      border-radius: 0 5px 5px 0;
	      transition: 0.6s ease;
	      margin-top: -70px; /* position buttons in the middle of the screen */
      }
      /* position the next button to the right */
      .next
      {
		  right: 0;
      }
      .prev:hover, .next:hover
      {
		  color: red;
      }
      .animate
      {
		  -webkit-animation: animatezoom 0.6s;
	      animation: animatezoom 0.6s;
      }
      @-webkit-keyframes animatezoom
      {
		  from {-webkit-transform: scale(0)}
	      to {-webkit-transform: scale(1)}
      }
      @keyframes animatezoom
      {
		  from {transform: scale(0)}
	      to {transform: scale(1)}
      }
	  /* set individual icons */
	  .photo
	  {
		  width: 300px;
		  height: 300px;
	  }
	  .fa-pageFooter
	  {
		  margin-top: 150px;
	  }
}

@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%;
	  }
      .gallery
      {
		  width: 85%;
	      height: inherit;
	      display: flex;
	      margin: auto;
	      justify-content: space-between; /* center */
	      /* to avoid the below problem of putting images in one row, we use flex-wrap property to put images in multiple rows. */
	      flex-wrap: wrap;
      }
	  figure
      {
		  width: 200px;
	      /* flex items by default have flex shrink property set to 1. So all images shrink to fit in one row. */
	      /* A value 0 will say not to shrink the flex items, but let images go beyond the gallery, and still be in the same row. */
	      /*flex-shrink: 0;*/
      }
	  .modal
      {
		  display: none;
	      position: fixed;
	      z-index: 1;
	      left: 0;
	      top: 0;
	      width: 100%;
	      height: 100%;
	      overflow: auto;
	      background-color: rgb(0, 0, 0);
	      background-color: rgba(0, 0, 0, 0.7);
	      padding-top: 60px;
      }
/*      .modalcontent
      {
		  background-color: #fefefe;
	      margin: 5% auto 15% auto;
	      width: 50%;
      }*/
      .modalphoto   /* my code */
      {
		  display: block;
	      position: absolute;
	      z-index: 1;
	      margin: auto;
	      left: 350px;
	      top: 550px;
	      height: 300px;
	      overflow: auto;
	      padding-bottom: 100px; /* my code */
	      width: 300px;
      }
      .close
      {
		  top: 25px;
	      right: 35px;
	      color: white;
	      position: absolute;
	      font-size: 35px;
	      font-weight: bold;
	      /* my code here */
	      width: 40px;
	      height: 40px;
	      border: 2px solid white;
	      border-radius: 50%;
	      background-color: gray;
	      text-align: center; /* to keep the cross at the center of the circle */
      }
      .close:hover, .close:focus
      {
		  color: red;
	      cursor: pointer;
      }
      /* next and previous buttons */
      .prev, .next
      {
		  cursor: pointer;
	      position: absolute;
	      top: 50%;
	      width: auto;
	      padding: 30px; /* 30px from the side of the screen */
	      color: white;
	      font-weight: bold;
	      font-size: 50px;
	      border-radius: 0 5px 5px 0;
	      transition: 0.6s ease;
	      margin-top: -70px; /* position buttons in the middle of the screen */
      }
      /* position the next button to the right */
      .next
      {
		  right: 0;
      }
      .prev:hover, .next:hover
      {
		  color: red;
      }
      .animate
      {
		  -webkit-animation: animatezoom 0.6s;
	      animation: animatezoom 0.6s;
      }
      @-webkit-keyframes animatezoom
      {
		  from {-webkit-transform: scale(0)}
	      to {-webkit-transform: scale(1)}
      }
      @keyframes animatezoom
      {
		  from {transform: scale(0)}
	      to {transform: scale(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%;
	  }
	  .gallery
	  {
		  margin-left: 20%;
		  margin-right: 20%;
	  }
	  figure
      {
		  width: 200px;
	      /* flex items by default have flex shrink property set to 1. So all images shrink to fit in one row. */
	      /* A value 0 will say not to shrink the flex items, but let images go beyond the gallery, and still be in the same row. */
	      /*flex-shrink: 0;*/
      }
	  .modal
      {
		  display: none;
	      position: fixed;
	      z-index: 1;
	      left: 0;
	      top: 0;
	      width: 100%;
	      height: 100%;
	      overflow: auto;
	      background-color: rgb(0, 0, 0);
	      background-color: rgba(0, 0, 0, 0.7);
	      padding-top: 60px;
      }
/*      .modalcontent
      {
		  background-color: #fefefe;
	      margin: 5% auto 15% auto;
	      width: 50%;
      }*/
      .modalphoto   /* my code */
      {
		  display: block;
	      position: absolute;
	      z-index: 1;
	      margin: auto;
	      left: 85px;
	      top: 250px;
	      height: 200px;
	      overflow: auto;
	      padding-bottom: 100px; /* my code */
	      width: 200px;
      }
      .close
      {
		  top: 25px;
	      right: 35px;
	      color: white;
	      position: absolute;
	      font-size: 35px;
	      font-weight: bold;
	      /* my code here */
	      width: 40px;
	      height: 40px;
	      border: 2px solid white;
	      border-radius: 50%;
	      background-color: gray;
	      text-align: center; /* to keep the cross at the center of the circle */
      }
      .close:hover, .close:focus
      {
		  color: red;
	      cursor: pointer;
      }
      /* next and previous buttons */
      .prev, .next
      {
		  cursor: pointer;
	      position: absolute;
	      top: 50%;
	      width: auto;
	      padding: 30px; /* 30px from the side of the screen */
	      color: white;
	      font-weight: bold;
	      font-size: 50px;
	      border-radius: 0 5px 5px 0;
	      transition: 0.6s ease;
	      margin-top: -70px; /* position buttons in the middle of the screen */
      }
      /* position the next button to the right */
      .next
      {
		  right: 0;
      }
      .prev:hover, .next:hover
      {
		  color: red;
      }
      .animate
      {
		  -webkit-animation: animatezoom 0.6s;
	      animation: animatezoom 0.6s;
      }
      @-webkit-keyframes animatezoom
      {
		  from {-webkit-transform: scale(0)}
	      to {-webkit-transform: scale(1)}
      }
      @keyframes animatezoom
      {
		  from {transform: scale(0)}
	      to {transform: scale(1)}
      }
	  /* set individual icons */
	  .photo
	  {
		  width: 100px;
		  height: 100px;
	  }
	  .fa-pageFooter
	  {
		  margin-top: 50px;
	  }
}