/* ABOUT US PAGE -------------- */


body {
	overflow-x:hidden;
	background-color: #b0defb;
	}
	
@keyframes rsrclogofadein {
	0% {opacity: 0;}
	30% {opacity: 0;}
	70% {opacity: 0.9;}
	80% {opacity: 0.9;}
	100% {opacity: 0.5;}
}

.logobackaboutus-container {
	z-index: -2;
	position: fixed;
	text-align: center;
	top: 100px;
	width: 80%;
	left: 10%;
	height: 80%;
	transition: top 2s ease, left 2s ease, height 2s ease;
}

.aboutuslogo {
	height: 90%;
	width: auto;
	opacity: 0.5;
	z-index: -4;
	left: 25%;
	transition: height 2s ease, width 2s ease, left 2s ease, top 2s ease;
	animation: rsrclogofadein 6s linear;
}
	
	

@keyframes revealleft {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes revealright {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

	
@keyframes revealheader {
  from {
    clip-path: ellipse(0% 0%);
  }
  to {
    clip-path: ellipse(100% 100%);
  }
}

	
.page_header-container {
	position: absolute;
	width: 100%;
	top: 70px;
	z-index: 50;
	text-align: center;
}	

.left{
	position: absolute; 
	left: 5%;
	width: calc((90% - 275px) / 2);
	opacity: 0.6;
	height: 5px;
	top: 25px;
	animation: revealleft 1s ease;
}

.right{
	position: absolute; 
	right: 5%;
	width: calc((90% - 275px) / 2);
	opacity: 0.6;
	height: 5px;
	top: 25px;
	animation: revealright 1s ease;
}

.page_header {
	height: 60px;
	animation: revealheader 2s ease;
}

.aboutus-image {
  object-fit: cover;
  position: relative;
  clip-path: ellipse();
  max-width: 100%; 
  height: 300px;
}


/* UNUSED -------
.aboutus-joe {
  object-fit: cover;
  position: relative;
  clip-path: circle();
  max-width: 100%; 
  height: 300px;
}
------------------- */

	
.early1 {
	grid-area: early1;
	place-self: center;
	text-align: justify;
}


.early1::first-letter{
	font-size: 300%;
	font-family: times, serif;
}

.early2 {
	grid-area: early2;
	place-self: center;
}

.early3 {
	grid-area: early3;
	place-self: center;
}
	
.early4 {
	grid-area: early4;
	place-self: center;
	text-align: justify;
}

.early4::first-letter{
	font-size: 300%;
	font-family: times, serif;
}	

.mid1 {
	grid-area: mid1;
	place-self: center;
	text-align: justify;
}

.mid1::first-letter{
	font-size: 300%;
	font-family: times, serif;
}	

.mid2 {
	grid-area: mid2;
	place-self: center;
}

.mid3 {
	grid-area: mid3;
	place-self: center;
}

.mid4 {
	grid-area: mid4;
	place-self: center;
	text-align: justify;
}

.mid4::first-letter{
	font-size: 300%;
	font-family: times, serif;
}	

.final1 {
	grid-area: final1;
	place-self: center;
	text-align: justify;
}

.final1::first-letter{
	font-size: 300%;
	font-family: times, serif;
}	

.final2 {
	grid-area: final2;
	place-self: center;
}


/* GRID SETUP AND LAYOUT ----------------------------------------------------------- */
.grid-container-aboutus {
  display: grid;
  position: relative;
  overflow-x: hidden;
  grid-gap: 10px;
  background-color: rgba(0, 0, 0, 0);
  top: 95px;
  left: 0%;
  width: 98%;
  color: black;
  padding: 20px;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  grid-template-areas: 
  'early1 early2'
  'early3 early4'
  'mid1 mid2'
  'mid3 mid4'
  'final1 final2';
}

.grid-container-aboutus > div {
	padding: 20px;
}


/* ------------------------------------------------PORTRAIT ORIENTATION ------------------------------------------------------------------- */
 @media (orientation: portrait) {
  .grid-container-aboutus {
  grid-template-areas: 
  'early2' 
  'early1' 
  'early3'
  'early4'
  'mid2'
  'mid1'
  'mid3'
  'mid4'
  'final2'
  'final1';
  }	 
	 
}