@media (min-width: 1025px)
{
	  .gallery
	  {
		  display: flex;
		  flex-wrap: wrap;
		  margin-top: 50px;
	  }
	  .gallery-img
	  {
		  width: 23%;
		  height: 300px;
		  margin: 1%;
		  object-fit: cover;
		  cursor: pointer;
	  }
      .modal 
      {
          display: none;
          position: fixed;
          z-index: 999;
          padding-top: 50px;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0,0,0,0.9);
      }

      .modal-content 
      {
          display: block;
          margin: auto;
          max-width: 90%;
          max-height: 90%;
     }

     .close 
     {
         position: absolute;
         top: 15px;
         right: 25px;
         color: white;
         font-size: 35px;
         cursor: pointer;
     }
     
	.fa-schoolLogo
	{
		margin-top: 50px;
		margin-bottom: 50px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 50%;
	}
	.fa-pageFooter
	{
		margin-top: 300px;
	}
	/* This part keeps notices in a horizontal row, 4 in a row */
	  .notice
	  {
		  display: flex;
		  flex-wrap: wrap;
		  width: 85%;
		  margin: auto;
		  justify-content: space-between;
	  }
	  .noticeheader
	  {
		  width: 23%;
		  /*margin: 2%;*/
		  background-color: black;
		  padding: 10px 15px;
		  text-align: center;
	  }
	  .noticeheader:hover
	  {
	      background-color: orange;
	      cursor: pointer;
	  }
}

@media (min-width: 768px) and (max-width: 1024px)
{
	  .gallery
	  {
		  display: flex;
		  flex-wrap: wrap;
		  margin-top: 50px;
	  }
	  .gallery-img
	  {
		  width: 48%;
		  height: 300px;
		  margin: 1%;
		  object-fit: cover;
		  cursor: pointer;
	  }
      .modal 
      {
          display: none;
          position: fixed;
          z-index: 999;
          padding-top: 50px;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0,0,0,0.9);
      }

      .modal-content 
      {
          display: block;
          margin: auto;
          max-width: 90%;
          max-height: 90%;
     }

     .close 
     {
         position: absolute;
         top: 15px;
         right: 25px;
         color: white;
         font-size: 35px;
         cursor: pointer;
     }
	.fa-schoolLogo
	{
		margin-top: 50px;
		margin-bottom: 50px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 75%;
	}
	.fa-pageFooter
	{
		margin-top: 300px;
	}
	/* This part keeps notices in a horizontal row, 4 in a row */
	  .notice
	  {
		  display: flex;
		  flex-wrap: wrap;
		  width: 85%;
		  margin: auto;
		  justify-content: space-between;
	  }
	  .noticeheader
	  {
		  width: 48%;
		  /*margin: 2%;*/
		  background-color: black;
		  padding: 10px 15px;
		  text-align: center;
	  }
	  .noticeheader:hover
	  {
	      background-color: orange;
	      cursor: pointer;
	  }
}

@media (max-width: 767px)
{
	  .gallery
	  {
		  display: flex;
		  flex-wrap: wrap;
		  margin-top: 50px;
	  }
	  .gallery-img
	  {
		  width: 98%;
		  height: 300px;
		  margin: 2%;
		  object-fit: cover;
		  cursor: pointer;
	  }
      .modal 
      {
          display: none;
          position: fixed;
          z-index: 999;
          padding-top: 50px;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0,0,0,0.9);
      }

      .modal-content 
      {
          display: block;
          margin: auto;
          max-width: 90%;
          max-height: 90%;
     }

     .close 
     {
         position: absolute;
         top: 15px;
         right: 25px;
         color: white;
         font-size: 35px;
         cursor: pointer;
     }
	.fa-schoolLogo
	{
		margin-top: 50px;
		margin-bottom: 50px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 80%;
	}
	.fa-pageFooter
	{
		margin-top: 300px;
	}
	/* This part keeps notices in a horizontal row, 4 in a row */
	  .notice
	  {
		  display: flex;
		  flex-wrap: wrap;
		  width: 85%;
		  margin: auto;
		  justify-content: space-between;
	  }
	  .noticeheader
	  {
		  width: 98%;
		  /*margin: 2%;*/
		  background-color: black;
		  padding: 10px 15px;
		  text-align: center;
	  }
	  .noticeheader:hover
	  {
	      background-color: orange;
	      cursor: pointer;
	  }
}