/* GLOBAL START */

h1
	{ margin: .67em 0 }

h2
	{ margin: .75em 0 }

h3
	{ margin: .83em 0 }

h4, p, ul, form, ol 
	{ margin: 1.12em 0 }

h5  
	{ margin: 1.5em 0 }

h6
	{ margin: 1.67em 0 }

	
body {
    background: rgb(0, 0, 0);
    box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	color: rgb(255, 255, 255);
	font-style: normal;
	font-weight: normal;
	font-size: clamp(0.7rem , 2vw, 1rem);
	scroll-behavior: smooth;
}

a {
	text-decoration: none;
	color: rgb(255, 255, 255);
}

a:focus, *[tabindex]:focus {
	outline: 3px solid rgb(0, 141, 218);
	border-radius: clamp(2.5px, 1vw, 5px);
	transition: 0.1s linear;
}

a:hover {
	color: rgb(217, 88, 3);
}

ul {
	/* list-style-type: none; */
	margin: 1ch 0;
	padding: 0;
	padding-left: 4ch;
	padding-right: 4ch;
}

@media screen and (min-width: 800px) {
	ul {
		padding-left: 8ch;
		padding-right: 8ch;
	}
}

li {
	margin: 1ch 0;
}

li::marker {
	color: rgb(217, 88, 3);
}

.hidden-image {
	visibility: hidden;
}

/* GLOBAL END*/

/* ----------------------------------------------------------------- */

/* LOGO AND MENU START */

.headerlayout {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-bottom: clamp(25px, 1vw, 100px);
}

.logo {
	width: clamp(300px, 35vw, 600px);
}

.contact {
	width: clamp(250px, 35vw, 600px);
	text-align: center;
	font-weight: bolder;
}

.contact p {
	margin: clamp(2.5px, 0.5vw, 5px) 0;
	white-space: nowrap;
	font-size: clamp(0.7rem , 1.35vw, 1rem);
}

.contact p:first-of-type {
	margin-top: clamp(2.5px, 0.5vw, 5px);
}

.contact p:last-of-type {
	margin-top: 20px;
}

@media screen and (min-width: 565px) {
	.headerlayout {
		justify-content: space-between;
	}

	.contact p:first-of-type {
	margin-top: 20px;
	}
}

.donatebutton {
	background: rgb(255, 169, 10);
	padding: 1ch;
	border-radius: clamp(2.5px, 1vw, 5px);
	font-weight: bolder;
}

.donatebutton:hover, .donatebutton:focus-within {
	background: rgb(217, 88, 3);
	color: rgb(255, 255, 255);
}

.registerbutton {
	background: rgb(217, 88, 3);
	padding: 1ch;
	border-radius: clamp(2.5px, 1vw, 5px);
	font-weight: bolder;
}

.registerbutton:hover, .registerbutton:focus-within {
	background: rgb(0, 141, 218);
	color: rgb(255, 255, 255);
}

.navigationbar {
	position: sticky;
	top: 0%;
	z-index: 100;
	margin: 0 auto;
	padding: clamp(5px, 1vw, 10px) 0;
	width: 100%;
	background: rgb(255, 169, 10);
}

.navigation {
	display: flex;
	justify-content: center;
	margin: auto;
	padding: 0;
	width: clamp(300px, 65vw, 925px);
	text-align: center;
	font-weight: bolder;
	font-size: clamp(0.4rem, 2vw, 1rem);
	gap: clamp(1ch, 5vw, 10ch);
}

.activepage a {
	color: rgb(217, 88, 3);
}

/* LOGO AND MENU END */

/* ----------------------------------------------------------------- */

/* DIVIDER BAR */

.dividerbar3 {
	position: relative;
	margin: 0 auto;
	padding: clamp(5px, 1vw, 10px) 0;
	width: 100%;
	height: clamp(0.7rem ,2vw, 1rem);
	background: rgb(242, 142, 7);
}

.dividerbar2 {
	position: relative;
	margin: 0 auto;
	padding: clamp(5px, 1vw, 10px) 0;
	width: 100%;
	height: clamp(0.7rem ,2vw, 1rem);
	background: rgb(230, 115, 5);
}

.dividerbar {
	position: relative;
	margin: 0 auto;
	padding: clamp(5px, 1vw, 10px) 0;
	width: 100%;
	height: clamp(0.7rem ,2vw, 1rem);
	background: rgb(217, 88, 3);
}

.centerbutton {
	display: flex;
	justify-content: center;
	width: 100%;
}

.rightbutton {
	position: absolute;
	top: 0%;
	bottom: 0%;
	right: 1%;
}

/* ----------------------------------------------------------------- */

/* FOOTER START */

.stamplogo {
	width: clamp(150px, 20vw, 200px);
	margin: auto 0;
	padding: clamp(25px, 2vw, 50px);
}

.footerinfocontainer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	margin: 0 auto;
}

.footerinfo {
	width: clamp(200px, 25vw, 400px);
	text-align: left;
	padding: clamp(25px, 2vw, 50px);
}

.footerinfo p {
	margin: 5px;
}

.footerinfo a {
	font-weight: bold;
}

.footernavigation {
	display: flex;
	justify-content: space-evenly;
	flex-direction: column;
	width: auto;
	text-align: left;
	font-weight: bolder;
	padding: clamp(25px, 2vw, 50px);
}

.footernavigation li {
	margin: 5px;
}

.socialmedia {
	display: flex;
	margin: 0 auto;
	padding-bottom: 16px;
	width: 100%;
	justify-content: center;
	align-items: center;
	/* background: rgb(253, 202, 62); */
}

.socialmediafloater {
	position: fixed;
	top: 50%;
	left: -125px;
	display: flex;
	margin: 0 auto;
	border-radius: 0 clamp(7.5px, 1vw, 15px) clamp(7.5px, 1vw, 15px) 0;
	justify-content: center;
	align-items: center;
	background: rgba(0, 141, 218, 0.75);
	color: rgb(255,255,255);
	font-weight: bolder;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	transition: 0.25s ease-in-out;
	z-index: 100;
}

.socialmediafloater > p {
	padding-left: 2ch;
	padding-right: 2ch;
}

.socialmedia img, .socialmediafloater img {
	display: block;
	width: 30px;
	margin: 16px;
}

.socialmedia a:focus, .socialmediafloater a:focus {
	outline-offset: -8px;
	border-radius: 50%;
}

.socialmediafloater:hover, .socialmediafloater:focus, .socialmediafloater:focus-within {
	color: rgb(217, 88, 3);
	cursor: pointer;
	left: 0px;
	outline: 3px solid rgb(255, 169, 10);
	border-radius: 0 clamp(7.5px, 1vw, 15px) clamp(7.5px, 1vw, 15px) 0;
}

.eventfloatercontainer {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0%;
	width: 100%;
}

.eventfloater {
	display: none;
	margin: 0 auto;
	padding: 0ch 2ch;
	border-radius: 0 0 clamp(7.5px, 1vw, 15px) clamp(7.5px, 1vw, 15px);
	background: rgb(0, 141, 218);
	text-align: center;
	color: rgb(255,255,255);
	font-weight: bolder;
	z-index: 100;
	transform: translateY(-100%);
	animation: eventslide 0.5s ease-in-out 2.5s forwards;
}

@media screen and (min-width: 900px) {
	.eventfloater {
		display: block;
	}
}

@keyframes eventslide {
	0% { transform: translateY(-100%); }
	100% { transform: translateY(0); }
}

footer {
	position: relative;
	display: block;
	bottom: 0;
	width: 100%;
	margin: auto;
	padding: clamp(5px, 1vw, 10px) 0;
	text-align: center;
	font-weight: bolder;
	/* background: rgb(253, 202, 62); */
}

/* FOOTER END */

/* ----------------------------------------------------------------- */

/*  HOME CONTENT START */

.welcomecontainer {
	position: relative;
	margin: 0 auto;
	padding: clamp(50px, 5vw, 125px) 0;
	width: 100%;
}

.welcomecontainer > img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.welcome {
	margin: auto;
	padding: clamp(25px, 2vw, 50px);
	width: clamp(300px, 50vw, 650px);
	color: rgb(255, 255, 255);
	border-radius: clamp(7.5px, 1vw, 15px);
	background: rgba(0, 141, 218, 0.75);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	font-weight: 500;
	box-shadow: 0px 0px clamp(35px, 2vw, 75px) rgba(0, 0, 0, 0.479);
}

.welcome p {
	text-align: left;
}

.h1welcome {
	text-align: center;
	padding: 0;
	margin: 0;
}

.splashgrid {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(4, 1fr);
	gap: clamp(25px, 1vw, 100px);
	margin: clamp(25px, 1vw, 100px) auto clamp(25px, 1vw, 100px) auto;
	width: 100%;
	text-align: center;
	font-weight: bolder;
}

.grid1 {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	background: rgb(39, 104, 48);
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	scroll-margin-top: 7ch;
}

.grid2 {
	position: relative;
	grid-column: 1;
	grid-row: 2;
	background: rgb(55, 146, 67);
	min-height: 300px;
	min-width: 275px;
	display: flex;
	align-items: center;
	justify-content: center;
	scroll-margin-top: 7ch;
}

.grid3 {
	position: relative;
	grid-column: 1;
	grid-row: 3;
	background: rgb(190, 83, 0);
	min-height: 300px;
	min-width: 275px;
	display: flex;
	align-items: center;
	justify-content: center;
	scroll-margin-top: 7ch;
}

.grid4 {
	position: relative;
	grid-column: 1;
	grid-row: 4;
	background:rgb(148, 65, 0);
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	scroll-margin-top: 7ch;
}

@media screen and (min-width: 800px) {
	
	.splashgrid {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr;
	}
	
	.grid1 {
		grid-column: 1 / span 2;
		grid-row: 1;
		min-height: 400px;
	}
	
	.grid2 {
		grid-column: 3;
		grid-row: 1;
		min-height: 400px;
	}
	
	.grid3 {
		grid-column: 1;
		grid-row: 2;
		min-height: 400px;
	}
	
	.grid4 {
		grid-column: 2 / span 2;
		grid-row: 2;
		min-height: 400px;
		max-height: 400px;
	}
	
}

.splashfloater {
	margin: 0 auto;
	padding: clamp(25px, 2vw, 50px);
	width: 75%;
	height: 65%;
	background: rgba(255, 255, 255, 0.25);
	border-radius: clamp(7.5px, 1vw, 15px);
	box-shadow: 0px 0px clamp(35px, 2vw, 75px) rgba(0, 0, 0, 0.479);
	z-index: 1;
}

.splashfloater h1 {
	padding-bottom: clamp(0.7rem, 4vw, 1rem);
}

.grid1 .splashfloater {
	display: flex;
	align-items: center;
	justify-content: center;
}

.grid3 .splashfloater {
	display: flex;
	flex-direction: column;
	font-weight: normal;
	cursor: pointer;
}

.alignquotelist {
	margin: 0 auto;
	padding: 0;
	align-self: center;
  	text-align: left;
}

.grid3 .splashfloater:hover, .grid3 .splashfloater:focus {
	transform: scale(1.01);
}

.grid3 img {
	width: clamp(250px, 30vw, 300px);
	align-self: center;
}

@media screen and (min-width: 800px) {
	.grid3 img {
	width: clamp(200px, 25vw, 300px);
	align-self: center;
	}
}

.grid3 p:first-of-type {
	margin-top: 0%;
}

.grid3 li {
	padding: 0%;
	margin: 0%;
}

.grid3 li::marker {
	color: rgb(0, 141, 218);
}

#eventposter {
	width: clamp(150px, 25vw, 250px);
	cursor: pointer;
	border-radius: clamp(7.5px, 1vw, 15px);
	box-shadow: 0px 0px clamp(35px, 2vw, 75px) rgba(0, 0, 0, 0.479);
}

#eventposter:hover {
	transform: scale(1.01);
}

#eventmodal {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 999;
}

#eventmodalposter {
    box-sizing: border-box;
    height: auto;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.5);
	max-width: 90vw;
	max-height: 90vh;
    border-radius: clamp(7.5px, 1vw, 15px);
}

.eventtext {
	width: clamp(150px, 25vw, 250px);
	margin-left: 25px;
	text-align: center;
}

.eventtext h2 {
	margin-bottom: 0px;
}

.alignsponsors {
	padding: 2ch 20% 0 20%;
}

.sponsors {
	display: flex;
	justify-content: left;
	align-items: left;
	margin: auto 0;
	width: 100%;
}

.sponsorlogo {
	height: 10ch;
	margin: 2ch;
}

.sponsorsmalllogo {
	max-height: 35px;
	margin-right: 2ch;
	transform: translateY(-10px);
}

#quotesmodal {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 999;
}

#quotesmodalinfo {
    box-sizing: border-box;
	display: flex;
	flex-direction: column;
    height: auto;
    margin: 0 auto;
	padding: clamp(25px, 2vw, 50px);
    background-color: rgba(0, 141, 218, 0.75);
	max-width: 80vw;
	max-height: 90vh;
    border-radius: clamp(7.5px, 1vw, 15px);
}

#quotesmodalinfo p {
	padding: 1ch;
	margin: 0%;
	font-size: clamp(0.7rem , 1.35vw, 1rem);
}

#quotesmodalinfo h3 {
	padding: 0.5ch;
	margin: 0% auto;
}

#quotescorner {
	margin: 0 auto;
	width: clamp(300px, 50vw, 500px);
}

.quote {
	color: rgb(255, 169, 10);
	font-weight: bold;
}

.sourcequote {
	color: rgb(217, 88, 3);
	font-weight: normal;
}

#splashvid {
	position: relative;
	margin: 0 auto;
	border-radius: clamp(7.5px, 1vw, 15px);
	width: clamp(350px, 100%, 1000px);
	height: 100%;
}

.filmcontainer {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(25px, 1vw, 100px);
	margin: 0 auto;
	padding: clamp(50px, 80%, 125px) 0;
	width: 100%;
	text-align: center;
	font-weight: bolder;
}

.filmcontainer > img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.wrapper {
	margin: 0 auto;
	padding: 2.5vw;
	border-radius: clamp(7.5px, 1vw, 15px);
	width: clamp(350px, 50%, 1000px);
	height: 100%;
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
    box-shadow: 0px 0px clamp(35px, 2vw, 75px) rgba(0, 0, 0, 0.479);
}

.h_iframe {
    position: relative;
}

.h_iframe .ratio {
    display:block;
    width: 100%;
    height: auto;
    visibility: hidden;
}

.h_iframe iframe {
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
	border-radius: clamp(7.5px, 1vw, 15px);
}

/* HOME CONTENT END */

/* ----------------------------------------------------------------- */

/* EVENTS CONTENT START */

.calendar {
	display: flex;
	justify-content: center;
	margin: 4ch 0ch;
}

/* EVENTS CONTENT END */

/* ----------------------------------------------------------------- */

/* SPONSORS CONTENT START */

.donationflexbox {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	column-gap: 4ch;
	row-gap: 4ch;
	margin: 4ch auto;
	scroll-margin-top: 7ch;
}

.donationcontainers {
	position: relative;
	margin: 4ch auto;
	padding: 4ch;
	background: rgba(0, 141, 218, 0.75);
	max-width: 100ch;
	border-radius: clamp(7.5px, 1vw, 15px);
	scroll-margin-top: 7ch;
}

#studio h1 {
	text-align: center;
}

#donate:after {
	content: url('../images/other/comingsoon.png');
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 10%;
	left: 10%;
	width: 75%;
	height: 75%;
	padding: 1ch;
	text-align: center;
	font-weight: bolder;
	background: rgba(253, 202, 62, 0.5);
	border-radius: clamp(7.5px, 1vw, 15px);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0px 0px clamp(35px, 2vw, 75px) rgba(0, 0, 0, 0.479);
}

.donationflexbox .donationcontainers {
	margin: 0;
}

.donationcontainers:focus, .donationcontainers:focus-within{
	outline: 3px solid rgb(253, 202, 62);
	border-radius: clamp(2.5px, 1vw, 5px);
	transition: 0.1s linear;
}

.donationcontainers .donatebutton:focus {
	outline: 3px solid rgb(253, 202, 62);
	border-radius: clamp(2.5px, 1vw, 5px);
	transition: 0.1s linear;
}

@media screen and (min-width: 800px) {
	.donationflexbox .donationcontainers {
		width: 50ch;
	}

	.donationflexbox {
		flex-wrap: nowrap;
	}
}

/* SPONSORS CONTENT END */

/* ----------------------------------------------------------------- */

/* ABOUT CONTENT START */

.aboutcontainers {
	position: relative;
	margin: 4ch auto;
	padding: 4ch;
	background: rgb(0, 141, 218);
	max-width: 100ch;
	border-radius: clamp(7.5px, 1vw, 15px);
	scroll-margin-top: 7ch;
}

.aboutcontainersalpha {
	position: relative;
	margin: 4ch auto;
	padding: 4ch;
	background: rgba(0, 141, 218, 0.75);
	max-width: 100ch;
	border-radius: clamp(7.5px, 1vw, 15px);
	scroll-margin-top: 7ch;
}

.boardimages {
	position: absolute;
	float: right;
	top: 3ch;
	right: 2ch;
	max-width: 20ch;
	border: 4px solid rgb(230, 115, 5);
	border-radius: clamp(7.5px, 1vw, 15px);
	box-shadow: 0px 0px clamp(35px, 2vw, 75px) rgba(0, 0, 0, 0.479);
}

hr {
	border: 2px solid rgb(230, 115, 5);
	border-radius: 5px;
}

.aboutcontainers p, .aboutcontainersalpha p {
	padding-right: 20ch;
}

.aboutcontainers h4, .aboutcontainersalpha h4 {
	font-weight: normal;
}

.aboutcontainers .donatebutton:focus, .aboutcontainersalpha .donatebutton:focus {
	outline: 3px solid rgb(255, 169, 10);
	border-radius: clamp(2.5px, 1vw, 5px);
	transition: 0.1s linear;
}

.aboutcontainers:focus, .aboutcontainersalpha:focus {
	outline: 3px solid rgb(255, 169, 10);
	border-radius: clamp(2.5px, 1vw, 5px);
	transition: 0.1s linear;
}

.flipimage {
	transform: scaleX(-1);
}

/* ABOUT CONTENT END */

/* ----------------------------------------------------------------- */

/* BOARD CONTENT START */

.missioncontainer {
	margin: 4ch auto;
	padding: 4ch;
	max-width: 100ch;
	color: rgb(255, 255, 255);
	border-radius: clamp(7.5px, 1vw, 15px);
	background: rgb(0, 141, 218);
	font-weight: normal;
	scroll-margin-top: 7ch;
}

.missioncontaineralpha {
	margin: 4ch auto;
	padding: 4ch;
	max-width: 100ch;
	color: rgb(255, 255, 255);
	border-radius: clamp(7.5px, 1vw, 15px);
	background: rgba(0, 141, 218, 0.75);
	font-weight: normal;
	scroll-margin-top: 7ch;
}

.missioncontainer p, .missioncontaineralpha p {
	text-align: left;
}

.missioncontainer span, .missioncontaineralpha span{
	color: rgb(255, 169, 10);
	font-weight: bold;
}

.missioncontainer:focus, .missioncontaineralpha:focus {
	outline: 3px solid rgb(255, 169, 10);
	border-radius: clamp(2.5px, 1vw, 5px);
	transition: 0.1s linear;
}

.missioncontainer .donatebutton:focus, .missioncontaineralpha .donatebutton:focus {
	outline: 3px solid rgb(255, 169, 10);
	border-radius: clamp(2.5px, 1vw, 5px);
	transition: 0.1s linear;
}

.missioncontainer li::marker, .missioncontaineralpha li::marker {
	color: rgb(255, 255, 255);
	font-weight: bold;
}

.centerheader {
	display: flex;
	justify-content: center;
	font-weight: bolder;
}

.h1mission {
	text-align: center;
	/* color: rgb(253, 202, 62); */
	padding: 0;
	margin: 0;
}

#contactus {
	scroll-margin-top: 7ch;
	text-align: center;
}

#contactus p {
	text-align: center;
}

/* BOARD CONTENT END */


/* FOUNDATION CONTENT*/

.foundationcontainer {
	position: relative;
	margin: 4ch auto;
	padding: 4ch;
	max-width: 100ch;
	color: rgb(255, 255, 255);
	border-radius: clamp(7.5px, 1vw, 15px);
	background: rgba(0, 141, 218, 0.75);
	font-weight: normal;
	scroll-margin-top: 7ch;
}

.foundationcontainer img {
	margin: 0 auto;
	width: clamp(300px,35vw, 600px);
	border-radius: clamp(7.5px, 1vw, 15px);
}

.foundationcontainer:focus {
	outline: 3px solid rgb(255, 169, 10);
	border-radius: clamp(2.5px, 1vw, 5px);
	transition: 0.1s linear;
}

.foundationcontainer h2{
		text-align: center;
}

.foundationcontainer hr {
	margin: 4ch 0;
}

.foundationgrid {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
	gap: 2ch;
	margin: 0 auto;
}

.foundgrid1 {
	grid-column: 1;
	grid-row: 1;
}

.foundgrid2 {
	grid-column: 1;
	grid-row: 2;
}

.foundgrid3 {
	grid-column: 1;
	grid-row: 3;
}

.foundgrid4 {
	grid-column: 1;
	grid-row: 4;
}

.foundgrid5 {
	grid-column: 1;
	grid-row: 5;
}

.foundgrid6 {
	grid-column: 1;
	grid-row: 6;
}

@media screen and (min-width: 675px) {

	.foundationcontainer img {
	margin: 0 auto;
	width: clamp(300px,30vw, 400px);
	border-radius: clamp(7.5px, 1vw, 15px);
	box-shadow: 0px 0px clamp(35px, 2vw, 75px) rgba(0, 0, 0, 0.479);
	}

	.foundationgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	gap: 2ch;
	margin: 0 auto;
	}

	.foundgrid1 {
	grid-column: 1;
	grid-row: 1;
	}

	.foundgrid2 {
		grid-column: 2;
		grid-row: 1;
	}

	.foundgrid3 {
		grid-column: 1;
		grid-row: 2;
	}

	.foundgrid4 {
		grid-column: 2;
		grid-row: 2;
	}

	.foundgrid5 {
		grid-column: 1;
		grid-row: 3;
	}

	.foundgrid6 {
		grid-column: 2;
		grid-row: 3;

	}
}

.centered-image {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

/* FOUNDATION CONTENT END */

/* SOCIAL CONTENT START */

.socialcontainer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 4ch auto;
	padding: 4ch;
	max-width: 100ch;
	color: rgb(255, 255, 255);
	border-radius: clamp(7.5px, 1vw, 15px);
	background: rgb(0, 141, 218);
	font-weight: normal;
	text-align: center;
	scroll-margin-top: 7ch;
}

.socialcontaineralpha {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 4ch auto;
	padding: 4ch;
	max-width: 100ch;
	color: rgb(255, 255, 255);
	border-radius: clamp(7.5px, 1vw, 15px);
	background: rgba(0, 141, 218, 0.75);
	font-weight: normal;
	text-align: center;
	scroll-margin-top: 7ch;
}

.socialcontainer:focus, .socialcontaineralpha:focus {
	outline: 3px solid rgb(255, 169, 10);
	border-radius: clamp(2.5px, 1vw, 5px);
	transition: 0.1s linear;
}

.groupVid {
	/* position: relative; */
	margin: 0 auto;
	width: clamp(350px, 100%, 1000px);
	background-image: url(../images/social/S1E1/Group_Photo_Comp_FINAL_1k.jpeg);
	background-size: 100%;
	border-radius: clamp(7.5px, 1vw, 15px);
}

.greenPhoto {
	margin: 8px;
	width: clamp(150px, 40vw, 350px);
	border-radius: clamp(7.5px, 1vw, 15px);
}

.DirectorsPhoto {
	margin: 8px;
	width: clamp(100px, 40vw, 250px);
	border-radius: clamp(7.5px, 1vw, 15px);
}

.socialgalleryphoto {
	margin: 8px;
	width: clamp(300px, 100%, 1080px);
	border-radius: clamp(7.5px, 1vw, 15px);
}

#textleft {
	text-align: left;
}

.socialcontaineralpha h1,h2,h3,h4 {
	margin-bottom: 0;
}

.socialgreengrid1 {
	grid-area: grid1;
}

.socialgreengrid2 {
	grid-area: grid2;
}

.socialgreengrid3 {
	grid-area: grid3;
}

.socialgreengrid4 {
	grid-area: grid4;
}

.socialgreengrid5 {
	grid-area: grid5;
}

.socialgreengrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
  	grid-template-rows: auto;
  	grid-template-areas: 
    "grid5 grid1"
    "grid5 grid2"
	"grid3 grid4";
}

.socialdirectorsgrid1 {
	grid-area: grid1;
}

.socialdirectorsgrid2 {
	grid-area: grid2;
}

.socialdirectorsgrid3 {
	grid-area: grid3;
}

.socialdirectorsgrid4 {
	grid-area: grid4;
}

.socialdirectorsgrid5 {
	grid-area: grid5;
}

.socialdirectorsgrid6 {
	grid-area: grid6;
}

.socialdirectorsgrid7 {
	grid-area: grid7;
}

.socialdirectorsgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
  	grid-template-rows: auto;
  	grid-template-areas: 
    "grid1 grid2"
    "grid3 grid4"
	"grid5 grid6";
}

@media screen and (min-width: 870px) {
	.socialdirectorsgrid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-template-areas: 
		"grid1 grid2 grid3"
		"grid4 grid5 grid6";
	}
}

/* SOCIAL CONTENT END */

/* OUTREACH CONTENT START */

.outreachcontainer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 4ch auto;
	padding: 4ch;
	max-width: 100ch;
	color: rgb(255, 255, 255);
	border-radius: clamp(7.5px, 1vw, 15px);
	background: rgb(0, 141, 218);
	font-weight: normal;
	text-align: center;
	scroll-margin-top: 7ch;
}

.outreachcontaineralpha {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 4ch auto;
	padding: 4ch;
	max-width: 100ch;
	color: rgb(255, 255, 255);
	border-radius: clamp(7.5px, 1vw, 15px);
	background: rgba(0, 141, 218, 0.75);
	font-weight: normal;
	text-align: center;
	scroll-margin-top: 7ch;
}

.outreachcontainer:focus, .outreachcontaineralpha:focus {
	outline: 3px solid rgb(255, 169, 10);
	border-radius: clamp(2.5px, 1vw, 5px);
	transition: 0.1s linear;
}

.outreachimagecaptioncontainer {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: center;
	gap: 4ch;
}

.outreachimagecaption {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	width: clamp(150px, 25%, 300px);
}

.outreachimagecaption a:hover {
	transform: scale(1.01);
	transition: 0.1s linear;
}

.outreachimagecaption a:focus {
	transform: scale(1.01);
	outline: 3px solid rgb(255, 169, 10);
	border-radius: clamp(2.5px, 1vw, 5px);
	transition: 0.1s linear;
}

.outreachimagecaption a img {
	max-width: 25ch;
}

.outreachimagegallerycontainer {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	width: 100%;
	margin: 4ch 0;
	gap: 4ch;
}

.outreachimagegallery {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
	width: clamp(250px, 80%, 1080px);
}

.outreachimagegallery img {
	border-radius: clamp(7.5px, 1vw, 15px);
}

@media screen and (min-width: 815px) {

	.outreachimagegallery {
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;
		margin: 0 auto;
		width: clamp(350px, 45%, 540px);
	}
}


/* OUTREACH CONTENT END */