.fa-parallax
{
	margin-top: 50px;
	margin-bottom: 50px;
}

@media (min-width: 1025px)
{
	.fa-schoolLogo
	{
		margin-top: 50px;
		margin-bottom: 50px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 50%;
	}
    .fa-heading
    {
		text-align: center;
	    font-weight: bold;
	    margin-top: 5%;
	    color: black;
    }
    .fa-affiliation
    {
		color: black;
	    text-align: center;
	    font-weight: bold;
	    margin-top: 3%;
    }
	  .founderContainer
	  {
		  text-align: center;
		  margin-top: 3%;
	  }
	  .fa-founderName, .fa-founder
	  {
		  color: red;
	  }
	  .founderMessage
	  {
		  text-align: center;
	  }
	  .fa-message
	  {
		  font-size: 18px;
		  margin-left: 25%;
		  margin-right: 25%;
		  text-align: justify;
		  text-align-last: justify;
	  }
	.gallery
	{
		width: 85%;
		height: inherit;
		display: flex;
		margin: auto;
		margin-top: 100px;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	a
	{
		text-decoration: none;
	}
	/* set individual icons */
	.photo
	{
		width: 300px;
		height: 300px;
	}
	.text
	{
		cursor: pointer;
		color: white;
		font-size: 20px;
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}
    .flip-card 
	{
		background-color: transparent;
		width: 300px;
		height: 300px;
		perspective: 1000px; /* This gives 3D effect */
	}
	/* This container is needed to position the front and back side */
	.flip-card-inner 
	{
		position: relative;
		width: 100%;
		height: 100%;
		text-align: center;
		transition: transform 0.6s;
		transform-style: preserve-3d;
		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	}
	/* Do a horizontal flip when you move mouse over the box */
	.flip-card:hover .flip-card-inner 
	{
		transform: rotateY(180deg);
	}
	/* Position the front and back side */
	.flip-card-front, .flip-card-back 
	{
		position: absolute;
		width: 100%;
		height: 100%;
		-webkit-backface-visibility: hidden; /* safari */
		backface-visibility: hidden;
	}
	/* Style the front side (fall back if image is missing) */
	.flip-card-front 
	{
		background-color: #bbb;
		color: black;
	}
	/* Style the back side */
	.flip-card-back 
	{
		background-color: #2980b9;
		color: white;
		transform: rotateY(180deg);
	}
	.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%;
	}
    .fa-heading
    {
		text-align: center;
	    font-weight: bold;
	    margin-top: 5%;
	    color: black;
    }
    .fa-affiliation
    {
		color: black;
	    text-align: center;
	    font-weight: bold;
	    margin-top: 3%;
    }
	  .founderContainer
	  {
		  text-align: center;
		  margin-top: 3%;
	  }
	  .fa-founderName, .fa-founder
	  {
		  color: red;
	  }
	  .founderMessage
	  {
		  text-align: center;
	  }
	  .fa-message
	  {
		  margin-left: 25%;
		  margin-right: 25%;
		  text-align: justify;
		  text-align-last: justify;
	  }
	.gallery
	{
		width: 85%;
		height: inherit;
		display: flex;
		margin: auto;
		margin-top: 100px;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	a
	{
		text-decoration: none;
	}
	/* set individual icons */
	.photo
	{
		width: 150px;
		height: 150px;
	}
	.text
	{
		color: white;
		font-size: 20px;
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}
    .flip-card 
	{
		background-color: transparent;
		width: 120px;
		height: 120px;
		perspective: 1000px; /* This gives 3D effect */
	}
	/* This container is needed to position the front and back side */
	.flip-card-inner 
	{
		position: relative;
		width: 100%;
		height: 100%;
		text-align: center;
		transition: transform 0.6s;
		transform-style: preserve-3d;
		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	}
	/* Do a horizontal flip when you move mouse over the box */
	.flip-card:hover .flip-card-inner 
	{
		transform: rotateY(180deg);
	}
	/* Position the front and back side */
	.flip-card-front, .flip-card-back 
	{
		position: absolute;
		width: 100%;
		height: 100%;
		-webkit-backface-visibility: hidden; /* safari */
		backface-visibility: hidden;
	}
	/* Style the front side (fall back if image is missing) */
	.flip-card-front 
	{
		background-color: #bbb;
		color: black;
	}
	/* Style the back side */
	.flip-card-back 
	{
		background-color: #2980b9;
		color: white;
		transform: rotateY(180deg);
	}
	.fa-pageFooter
	{
		margin-top: 50px;
	}
}

@media (max-width: 767px)
{
	.fa-schoolLogo
	{
		margin-top: 50px;
		margin-bottom: 50px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 80%;
	}
    .fa-heading
    {
		text-align: center;
	    font-weight: bold;
	    margin-top: 5%;
	    color: black;
		font-size: 25px;
    }
    .fa-affiliation
    {
		color: black;
	    text-align: center;
	    font-weight: bold;
	    margin-top: 3%;
		font-size: 20px;
    }
	  .founderContainer
	  {
		  text-align: center;
		  margin-top: 3%;
	  }
	  .fa-founderName, .fa-founder
	  {
		  color: red;
		  font-size: 15px;
	  }
	  .founderMessage
	  {
		  text-align: center;
	  }
	  .fa-message
	  {
		  text-align: justify;
		  text-align-last: justify;
	  }
	.gallery
	{
		margin-left: 20%;
		margin-right: 20%;
	}
	a
	{
		text-decoration: none;
	}
	/* set individual icons */
	.photo
	{
		width: 100px;
		height: 100px;
	}
	.text
	{
		color: white;
		font-size: 10px;
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}
    .flip-card 
	{
		background-color: transparent;
		width: 100px;
		height: 100px;
		perspective: 1000px; /* This gives 3D effect */
	}
	/* This container is needed to position the front and back side */
	.flip-card-inner 
	{
		position: relative;
		width: 100%;
		height: 100%;
		text-align: center;
		transition: transform 0.6s;
		transform-style: preserve-3d;
		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	}
	/* Do a horizontal flip when you move mouse over the box */
	.flip-card:hover .flip-card-inner 
	{
		transform: rotateY(180deg);
	}
	/* Position the front and back side */
	.flip-card-front, .flip-card-back 
	{
		position: absolute;
		width: 100%;
		height: 100%;
		-webkit-backface-visibility: hidden; /* safari */
		backface-visibility: hidden;
	}
	/* Style the front side (fall back if image is missing) */
	.flip-card-front 
	{
		background-color: #bbb;
		color: black;
	}
	/* Style the back side */
	.flip-card-back 
	{
		background-color: #2980b9;
		color: white;
		transform: rotateY(180deg);
	}
	.fa-pageFooter
	{
		margin-top: 50px;
	}
}