@charset "utf-8"; /*sets the character set to the standard*/

* { /*Selector that selects all elements*/
	box-sizing: border-box; /*includes padding and border in all element sizing*/

	}
img { /*selects all the images*/
	padding: 1%; /*sets a small (1%) border of space around each image*/
}

html { /*selects the entire document*/
	background: white; /*Sets the background of the entire document to white*/
	
	}
body { 
	margin: 0; /*removes the margin around the edge of the screen*/
	font-family: Helvetica, sans-serif;
}

.content {
	max-width: 960px;
	margin: auto;
}

form {
	float: left;
}

.contact {
	float: left;
}

.button {
	float: right;
}

header {
	background-color: #AA9EFF; /*sets the background of the header to purple*/
}

.logo { /*selects the logo*/
	width: 33%; /*sets the logo width to 33% of screen*/
} 

h2 { /*selects the h1 and h2s*/
	margin: 3%; /*sets the margins to 3%*/
}
/*NAVIGATION STYLES*/
.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #8c1aff;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.main { /*selects the main feature*/
	float: left; /*floats the main feature left*/
	margin: 2%;
}

.mainAbout {
	float: left;
	margin: 2%;
	width: 60%;
}

.mainImage { /*selects the main image*/
	width: 75%; /*sets the image width to 75% of the main feature area*/
	float: left; /*floats the main feature image left next to the text*/
}

.mainText { /*selects the main text*/
	width: 25%; /*sets the width of the main text area to 25% of the main feature area*/
	float: left; /*floats the text left*/
	
}
.thirds { /*selects the entire featurette section*/
	width: 100%; /*sets the width of the entire featurette section to 100%*/
}

.featurettes { /*selects the featurettes*/
	width: 31%; /*sets the width of each featurette to 1/3*/
	float: left; /*floats each column left next to one another*/
	margin: 1%
}

.featurettes p {
	text-align: justify;
}

.featurettes h2 {
	text-align: center;
}

.awardImage, .eventImage { /*selects the award images*/
	width: 100%; /*sets the width to 100% of the section*/
}

.sidebar { /*selects the sidebar in about page*/
	float: right; /*floats the section to the right of the page*/
	width: 31%; /*sets the width to 31% of the page*/
	text-align: left; /*aligns the text to the left*/
	margin: 1%; /*sets the margin around the text to 1%*/
}

.about p { /*selects the p elements with class about*/
	margin: 1%; /*sets the margin to 1%*/
}

.together { /*selects elements of class together*/
	float: right; /*floats the elements to the right of the screen*/
	margin: 1%; /*sets the margin to 1%*/
}

.title { /*selects the title elements*/
	width:33%; /*sets the width to 33%*/
}

.description {
	width: 50%;
	text-align: justify;
	margin: 2%;
}

.eventDate {
	text-align: center;
}

.contact {
	float: right;
	width:40%;
}

.contactPhoto {
	width:100%;
}

textarea {
  width: 550px;
  height: 150px;
  font-family: inherit;
}
textfield {
	width: 225px;
}

.boardName {
	color: #AA9EFF;
	font-weight: bold;
}

th {
	text-align:left;
}

table {
	margin: 3%;
}

/*ACCORDION STYLES*/

.accordion {
  background-color:  #AA9EFF;
  color: #000000;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  border-radius: 25px;
}

.active, .accordion:hover {
  background-color: #333;
  color: white;
}

.accordion:after {
  content: '\002B';
  color: #000000;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.citation{
	font-weight: bold;
	float: right;
}

.groupCommunityPhoto {
	width: 20%;
}
/*PARENTS STYLES*/
.teenagers {
	width:60%;
}

.parentThumbnails {
	width: 10%;
}

.parents h1 {
	text-align: center;
}

/*DONATIONS STYLES*/
iframe {
	float: right;
}

.textWrap {
	float: right;
	margin: 10px
}

.donationsText {
	width: 30%;
}

/*SPONSOR STYLES*/
.center {
	margin: auto;
	width: 70%;
}

/*SHOP STYLES*/

.shopImage {
	width: 50%;
	float: right;
}

/*FOOTER STYLES*/
footer { /*selects the footer*/
	position: fixed; /*keeps the purple contained to the footer section*/
	left:0; /*sets the left margin of the footer to 0*/
	bottom:0; /*sticks the footer to the bottom of the page with zero margin*/
	width:100%; /*sets the footer width to 100%*/
	text-align: left; /*aligns the text left*/
	background-color: #AA9EFF; /*sets the background of the header to purple*/
	font-size: .75em;
}
/*COLLEGE STYLES*/
.collegeImage {
	max-width: 100%;
}

/*LETTER FROM THE BOARD STYLES*/
.boardLetter {
	width: 100%;
	
}

.dearFriends p {
	margin: 2% 5%;
	
}

/*Incomplete Styles*/
.center-top {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 300px;
	padding-top: 100px;
}

.center-bottom {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 50px;
	padding-bottom: 150px;
}