/* Color Guide:
#339ac2 -- Turquoise
#808080 -- Gray */
* {
	margin: 0;
	padding: 0;
	border: 0;
}
:focus {
	outline: none;
}
article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
    display:block;
}
@font-face {
	font-family:'chalk';
	src: url('../fonts/chalk.ttf') format('truetype');
}
body {
	background: #808080;
	background-image: url('../images/graybackground.jpg');
	background-size: cover;
	font-family: 'PT Sans', sans-serif;
}
header {
	background-color: white;
	color: #339ac2;
	text-align: center;
	background-image: url('../images/halkboard.jpg');
	background-size: cover;
	height: 250px;
}
a:link, a:visited {
	color: black;
	text-decoration: underline;
}
a:hover, a:active {
	color: #808080;
	background-color: black;
}
nav ul li a:link, nav ul li a:visited {
	color: black;
	text-decoration: none;
}
nav ul li a:hover, nav ul li a:active {
	color: white;
	text-decoration: none;
}
h1 {
	font-size: 2rem;
	font-family: 'chalk';
	padding-top: 55px;
}
h2 {
	color: #339ac2; 
	font-family: 'chalk';
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
	padding-top: 15px;
}
h3, legend{
	color: black; 
	font-family: 'Schoolbell', cursive;
	text-align: center;
	font-size: 1.7rem;
	font-weight: bold;
}
nav {
	font-size: 1.25rem;
	margin-top: 5px;
}
li {
	font-family: helvetica;
	padding: 15px 0;
	margin-bottom: 5px;
	text-align: center;
	background-color: #339ac2;
}
article {
	padding: 1.2%;
}
p {
	text-align: center;
	margin: 1%;
	padding: 2%;
}
footer {
	background-color: #000000;
	color: #ffffff;
	text-align: center;
	padding: .5%;
}
aside {
	background-color: #339ac2;
	padding: 4%;
	clear: both;
}
figure, figcaption {
	margin: auto;
	text-align: center;
	padding: 1%;
}
label, select, textarea {
	display: block;
	padding: 1%;
	margin-bottom: 8px;
	margin-top: 7px;
}
legend {
	margin: 2%;
	text-align: center;
}
select {
	padding: 15px;
}
textarea {
	margin-left: 15px;
	margin-bottom: 15px;
}
input {
	margin-left: 15px;
	padding: 1%;
}
input[type="submit"], input[type="reset"] {
	font-size: 1em;
	margin-top: 20px;
}
fieldset {
	border: 3px solid #fdf247;
	-webkit-border-radius: 22px;
	-moz-border-radius: 22px;
	-ms-border-radius: 22px;
	border-radius: 22px;
}
fieldset {
	margin-bottom: 20px;
	border: 3px solid #808080;
	border-radius: 22px;
	padding: 15px;
}
input, select, textarea {
	border: 1px solid #000000;
	border-radius: 5px;
}
video {
	width: 100%;
	max-width: 750px;
}
.pimages {
	max-width: 100%;
	margin: auto;
	padding: 1%;
}
.whitetext {
	color: white;
}
.blacktext {
	color: black;
}
.socialmediaicons {
	width: 18%;
	padding-top: 10px;
}
.shadow {
	background-color: #808080;
	text-shadow: 3px 3px 3px #000000;
	color: #339ac2; 
	font-family: 'chalk';
	font-size: 1.3rem;
	text-align: center;
	font-weight: bold;
	margin: 15px 0;
	padding: 8px 0;
}
.flushleft {
	text-align: left;
}
.button {
	display: block;
	width: 40%;
	margin: auto;
	margin-bottom: 15px;
	padding: 5%;
	font-size: 1em;
	text-align: center;
	text-decoration: none;
	outline: none;
	color: #ffffff;
	background-color: #4CAF50;
	border: none;
	border-radius: 15px;
	box-shadow: 0 9px #999;
}
.button:hover {
	background-color: #6fa771;
}
.button:active {
  	background-color: #6fa771;
  	box-shadow: 0 5px #666;
  	transform: translateY(4px);
}
.emilychanbox {
	background-color: #808080;
}
.bennelsonbox {
	background-color: #ECF0F5;
	padding-top: 15px;
}
.borderradius {
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}
.instructorimages {
	max-width: 100%;
	height: auto;
	display: block;
	width: 80%;
	margin: auto;
	padding-top: 5px;
}
#weekone {
	background-color: #808080;
}
#weektwo {
	background-color: #ffffff;
}
#weekthree {
	background-color: #808080;
}
#tagline, #piechart90, #piechart25 {
	background-color: #808080;
}
#h3tagline {
	padding: 4%;
}
#spaceicons {
	padding: 0 6%;
}
#bluestripe {
	background-color: #339ac2;
}
#container {
	background-color: #ffffff;
}
#parentform {
	background-color: #339ac2;
	width: 70%;
	margin: 25px auto;
	padding: 2%;
	font-family: 'Ubuntu', sans-serif;
	padding: 4%;
	-webkit-border-radius: 22px;
	-moz-border-radius: 22px;
	-ms-border-radius: 22px;
	border-radius: 22px;
}
#welcomekids {
	background-color: white;
}
#kinders {
	background-color: #FFFFFF;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 20px;
}
#grades {
	background-color: #808080;
	padding-top: 20px;
	padding-bottom: 20px;
}
#teens {
	background-color: #339ac2;
	padding-top: 20px;
	padding-bottom: 20px;
}
#bios p::first-letter {
	font-size: 1.5rem;
	font-weight: bold;
}
/* ----------------- MEDIA QUERY 335PX ----------------*/
@media (min-width: 335px) {
	.pimages {
		display: block;
		padding-bottom: 15px;
	}	
	summary {
		margin-left: 5%;
	}
}
/* ----------------- END MEDIA QUERY 335PX ------------*/

/* ----------------- MEDIA QUERY 480PX ----------------*/
@media (min-width: 480px) {
	summary {
		outline: 0;
	}
	.pimages {
		margin-bottom: 15px;
	}
	.socialmediaicons {
		width: 10%;
	}
	#weekone {
		margin-top: 15px;
	}
	h1 {
		text-align: center;
	}
	nav {
		text-align: center;
		margin-top: 15px;
	}
	ul {
		width: 100%;
	}
	li {
		display: inline-block;
		width: 20%;
		max-width: 150px;
		margin: 1.1%;
	}	
}
/* ----------------- END MEDIA QUERY 480PX -------------*/

/* ----------------- MEDIA QUERY 550PX -------------*/
@media (min-width: 550px) {
	p img {
		display: inline-block;
		width: 70%;
	}
}
/* ----------------- END MEDIA QUERY 550PX -------------*/

/* ----------------- MEDIA QUERY 680PX -----------------*/
@media (min-width: 680px) {
	.button {
	  	display: inline-block;
		padding: 2%;
		font-size: 1em;
		margin-left: 7%;
}
	select {
		margin-left: 3%;
	}
	.socialmediaicons {
		width: 7%;
	}
}
/* ----------------- END MEDIA QUERY 680PX -------------*/

/* ----------------- MEDIA QUERY 735PX -----------------*/
@media (min-width: 735px) {
	.shadow {
		background-color: #808080;
		text-shadow: 3px 3px 3px #000000;
		color: #339ac2; 
		font-family: 'chalk';
		font-size: 1.9rem;
		text-align: center;
		font-weight: bold;
		margin: 15px 0;
		padding: 8px 0;
	}
}
/* ----------------- END MEDIA QUERY 735PX -------------*/

/* ----------------- MEDIA QUERY 750PX -----------------*/
@media (min-width: 750px) {
	video {
		display: block;
		margin: auto;
	}
}
/* ----------------- END MEDIA QUERY 750PX -------------*/

/* ----------------- MEDIA QUERY 960PX -----------------*/
@media (min-width: 960px) {
	#weekone, #weektwo, #weekthree {
		width: 33.333%;
		float: left;
	}
	#weekone {
		margin-top: 0;
		padding-bottom: 16px;
	}
	#weektwo {
		background-color: white;
		box-sizing: border-box;
    	border: 1px solid black;
    	width: 33.333%;
	}
	footer {
		clear: both;
	}
	#popoutfont {
		font-size: .65rem;
	}
	.p_down {
		padding-top: 14px;
	}
	.bennelsonbox {
		background-color: #808080;
		padding-top: 15px;
		width: 45%;
		float: left;
		margin: 15px 1% 20px 1%;
	}
	.emilychanbox {
		margin-left: 1.6%;
		width: 45%;
		float: left;
		margin: 15px 1% 20px 1%;
	}
	.shadow {
		height: 70px;
		margin: 1%;
		padding-top: 20px;
	}
	legend {
		font-size: 2rem;
	}
	p img {
		display: inline-block;
		width: 60%;
	}
}
/* ----------------- END MEDIA QUERY 960PX --------------*/

/* ----------------- MEDIA QUERY 1120PX -----------------*/
@media (min-width: 1120px) {
	#container {
		width: 100%;
		max-width: 1120px;
		margin: auto;
	}
	#popoutfont {
		font-size: .6rem;
	}
	html {
		font-size: 20px;
	}
	header {
		padding-bottom: 25px;
	}
	h2 {
		padding: 5%;
	}
	video {
		margin-top: 30px;
	}
}
/* ----------------- END MEDIA QUERY 1120PX ----------------*/

/* ----------------- MEDIA QUERY 1234PX -------------------*/
@media (min-width: 1234px) {
	header {
		padding-bottom: 40px;
	}
}
/* ----------------- END MEDIA QUERY 1234PX ---------------*/

/* ----------------- MEDIA QUERY 1300PX -------------------*/
@media (min-width: 1300px) {
	header {
		padding-bottom: 60px;
	}
	p img {
		display: inline-block;
		width: 50%;
	}
}
/* ----------------- END MEDIA QUERY 1300PX ---------------*/