@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'AgencyFB Bold Wide';
    src: url('webFonts/AgencyFB-BoldWide.woff2') format('woff2'),
        url('webFonts/AgencyFB-BoldWide.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

body {
	background-color: #FFF;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	text-size-adjust: none;
}

.theHolder {
	position:relative;
	left:0px;
	top:0px;
	width: 100%;
	height:auto;
	display:inline-block;
	box-sizing:border-box;
	overflow:hidden;
	text-align:center;
	/*
	-webkit-user-select:none;
	-ms-user-select:none;
	user-select:none;
	*/
	font-size:1px;
	line-height:0px;
	background-color:#FFF;
	-webkit-text-size-adjust: none;
}

.sectionHolder {
	position:relative;
	left:0px;
	top:0px;
	width: 100%;
	height:auto;
	display:inline-block;
	box-sizing:border-box;
}

.sectionHolder.header {
	background-image: url("images/campus_background.jpg");
	background-size: cover;
	background-repeat:no-repeat;
	background-position:30% 20%;
	min-height:459px;
}

.sectionHolder.header .elbow {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	display:inline-block;
	background-image: url("images/campus_background.png");
	background-size: cover;
	background-repeat:no-repeat;
	background-position:30% 20%;
	pointer-events: none;
}

.theSection {
	position:relative;
	left:0px;
	top:0px;
	width: 100%;
	height:auto;
	display:inline-block;
	box-sizing:border-box;
	max-width:1080px;
}

.sectionHolder .theSection h3 {
	margin:0px;
	padding:0px;
	position:relative;
	left:0px;
	top:0px;
	width: 100%;
	height:auto;
	display:inline-block;
	box-sizing:border-box;
	font-family:MuseoSans-900;
	font-weight:normal;
	color:#FFF;
	padding-left:25px;
	padding-right:25px;
	font-size:32px;
	line-height:1.1;
	margin-top:20px;
}

.sectionHolder.header .theSection .titleSection {
	position:relative;
	left:51.5%;
	top:0px;
	width:422px;
	height:459px;
	display:inline-block;
	background-image: url("images/header_box.png");
	background-size: 100% 100%;
	background-repeat:no-repeat;
	background-position: left top;
	float:left;
}

.logoHolder {
	position:absolute;
	left:0px;
	top:0px;
	width: 100%;
	height:auto;
	display:inline-block;
	box-sizing:border-box;
	padding-left:30px;
	padding-right:30px;
	margin-top:25px;
	padding-bottom:20px;
}

.logoHolder .sponsoredBy {
	position:relative;
	left:0px;
	top:0px;
	width:190px;
	height:auto;
	display:inline-block;
	text-align: left;
	float:left;
	
}

.sectionHolder.header .theSection .titleSection .logo {
	position:absolute;
	bottom:0px;
	width:50%;
	height:auto;
	display:inline-block;
}

.sectionHolder.header .theSection .titleSection .logo.logo1 {
	left:0px;
}

.sectionHolder.header .theSection .titleSection .logo.logo2 {
	right:0px;
}

.logoHolder .sponsoredBy p {
	margin:0px;
	padding:0px;
	position:relative;
	left:0px;
	top:0px;
	width: 100%;
	height:auto;
	display:inline-block;
	box-sizing:border-box;
	font-family:MuseoSans-500;
	font-size:10px;
	line-height:10px;
	color:#FFF;
}

.logoHolder .sponsoredBy p.grades {
	font-family:MuseoSans-700;
	font-size:20px;
	line-height:24px;
	margin-top:15px;
}

.sectionHolder.header .theSection .titleSection h1 {
	margin:0px;
	padding:0px;
	position:relative;
	left:0px;
	top:0px;
	width: 100%;
	height:auto;
	display:inline-block;
	box-sizing:border-box;
	font-family: 'AgencyFB Bold Wide';
	font-weight:bold;
	color:#FFF;
	font-size:52px;
	line-height:60px;
	text-transform: uppercase;
	margin-top:112px;
}

.sectionHolder.header .theSection h2 {
	margin:0px;
	padding:0px;
	position:relative;
	left:0px;
	top:0px;
	width: 100%;
	height:auto;
	display:inline-block;
	box-sizing:border-box;
	font-family: MuseoSans-700;
	font-weight:normal;
	color:#FFF;
	font-size:24px;
	line-height:28px;
	margin-top:8px;
}

.sectionHolder.header .theSection h2 span {
	color:#00a17b;
}

.sectionHolder.header .theSection .planets {
	width: 100%;
}

@media (max-width: 912px) {
	
	.sectionHolder.header .theSection .titleSection {
		left:0px;
		float:right;
		margin-right:25px;
	}
	
	.sectionHolder.header, .sectionHolder.header .elbow {
		background-position:65% 50%;
	}
}


@media (max-width: 620px) {
	.sectionHolder.header .elbow {
		display: none;
	}
	.sectionHolder.header .theSection .titleSection {
		float:none;
		margin-right:0px;
		margin-top:120px;
		width:100%;
		max-width:422px;
	}
	.sectionHolder.header {
		background-position:35% 50%;
	}
}


@media (max-width: 413px) {
	
	.sectionHolder.header .theSection .titleSection h1 {
		font-size:45px;
	}
}

@media (max-width: 374px) {
	
	.sectionHolder.header .theSection .titleSection h1 {
		font-size:42px;
	}
}


.theNav {
	position:relative;
	left:0px;
	top:0px;
	width: 100%;
	height:auto;
	display:inline-block;
	box-sizing:border-box;
	background-color:#ba0c2f;
}

.theNav a {
	position:relative;
	left:0px;
	top:0px;
	width:33.33%;
	height:auto;
	display:inline-block;
	box-sizing:border-box;
	color:#FFF;
	font-family:MuseoSans-700;
	font-size:12px;
	line-height:70px;
	text-decoration: none;
	max-width:360px;
	text-transform: uppercase;
}

.theNav a:nth-child(2) {
	border-left:solid;
	border-left-width:8px;
	border-left-color:#FFF;
	border-right:solid;
	border-right-width:8px;
	border-right-color:#FFF;
}

@media (max-width: 600px) {
	.theNav {
		padding-top:0px;
		padding-bottom:0px;
	}
	
	.theNav a {
		width:100%;
		max-width:none;
		line-height:50px;
	}
	
	.theNav a:nth-child(2) {
		border-top:solid;
		border-top-width:2px;
		border-top-color:#FFF;
		border-bottom:solid;
		border-bottom-width:2px;
		border-bottom-color:#FFF;
		border-left:none;
		border-right:none;
	}
}

.sectionHolder.subText {
	background-color:#FFF;
	color:#000;
	padding-top:40px;
	padding-bottom:40px;
}

.sectionHolder.subText p {
	position:relative;
	left:0px;
	top:0px;
	width:100%;
	height:auto;
	display:inline-block;
	box-sizing:border-box;
	margin:0px;
	padding:0px;
	font-family:MuseoSans-500;
	color:#000;
	font-size:20px;
	line-height:30px;
	padding-left:25px;
	padding-right:25px;
	max-width:1025px;
}

.sectionHolder.subText p i {
	font-style: normal;
	font-family:MuseoSans-500Italic;
}

.sectionHolder.subText p span {
	white-space: nowrap;
}

.sectionHolder.lessons {
	padding-top:40px;
	padding-bottom:40px;
	background-color:#004c97;
}

.lessonsIcon {
	position:relative;
	left:0px;
	top:0px;
	width:55px;
	height:auto;
	display:inline-block;
}

.sectionHolder.lessons p.subTitle {
	margin:0px;
	padding:0px;
	position:relative;
	left:0px;
	top:0px;
	width: 100%;
	height:auto;
	display:inline-block;
	box-sizing:border-box;
	font-family:MuseoSans-300;
	font-weight:normal;
	color:#FFF;
	padding-left:25px;
	padding-right:25px;
	font-size:18px;
	line-height:21px;
	margin-top:15px;
}

.sectionHolder.lessons .heroes {
	position: absolute;
	bottom:0px;
	width:191px;
	height:349px;
	display:inline-block;
}

.sectionHolder.lessons .heroes.groot {
	right:0px;
	margin-right:73px;
}

.sectionHolder.lessons .heroes.danvers {
	left:0px;
	margin-left:67px;
}

.guideFan {
	position:relative;
	left:0px;
	top:0px;
	width: 100%;
	height:auto;
	display:inline-block;
	box-sizing:border-box;
	max-width:379px;
	margin-top:25px;
}

.roundButton {
	position:relative;
	left:0px;
	top:0px;
	width: 100%;
	height:40px;
	display:inline-block;
	box-sizing:border-box;
	max-width:236px;
	background-color:#FFF;
	font-family:MuseoSans-700;
	color:#000;
	font-size:13px;
	line-height:40px;
	border-radius:20px;
	text-decoration: none;
	text-transform: uppercase;
	border:solid;
	border-width:1px;
	border-color:#000;
}

.roundButton:hover {
	background-color:#f4c08a;
	color:#000;
	text-decoration: none;
}

.roundButton.downloadAll {
	margin-top:55px;
}

.cardHolder {
	position:relative;
	left:0px;
	top:0px;
	width: 100%;
	height:auto;
	display:inline-block;
	box-sizing:border-box;
}

.cardHolder .card {
	position:relative;
	left:0px;
	top:0px;
	width: 490px;
	height:auto;
	display:inline-block;
	box-sizing:border-box;
	background-color:#FFF;
	vertical-align: top;
	box-shadow: 1px 1px 5px rgba(0,0,0,.5);
	margin-top:70px;
	margin-left:15px;
	margin-right:15px;
}


.cardHolder .card .wasp {
	position:absolute;
	right:4px;
	top:-210px;
	width:354px;
	height:287px;
	display:block;
	pointer-events: none;
}

.cardHolder .card .cardLeft {
	position: relative;
	left:0px;
	top:0px;
	width:240px;
	height:auto;
	display: inline-block;
	float:left;
	text-align: left;
	box-sizing:border-box;
	padding-left:25px;
}

.cardHolder .card .theLessonImage {
	position: relative;
	left:0px;
	top:0px;
	width:250px;
	height:auto;
	display: inline-block;
	float:right;
	box-sizing:border-box;
	margin-top:-35px;
}

.cardHolder .card .cardImage {
	position:relative;
	left:0px;
	top:0px;
	width: 100%;
	height:auto;
	display:inline-block;
	box-sizing:border-box;
}

.cardHolder .card p {
	margin:0px;
	padding:0px;
	position:relative;
	left:0px;
	top:0px;
	width: 100%;
	height:auto;
	display:inline-block;
	box-sizing:border-box;
	font-weight:normal;
}

.cardHolder .card p.typeClass {
	margin-top:15px;
	font-family:MuseoSans-700;
	color:#4d4d4d;
	font-size:14px;
	line-height:14px;
}

.cardHolder .card p.titleClass {
	margin-top:25px;
	font-family:MuseoSans-700;
	color:#b90c2f;
	font-size:18px;
	line-height:21px;
	height:42px;
}

.cardHolder .card p.gradesTitleClass {
	font-family:MuseoSans-700;
	color:#000;
	font-size:8px;
	line-height:8px;
	height:15px;
}

.cardHolder .card p.gradesClass {
	font-family:MuseoSans-900;
	color:#b1b1b1;
	font-size:15px;
	line-height:15px;
	height:27px;
}

.cardHolder .card .cardButton {
	position:relative;
	left:0px;
	top:0px;
	width: 120px;
	height:40px;
	display:inline-block;
	box-sizing:border-box;
	background-color:#FFF;
	font-family:MuseoSans-700;
	color:#000;
	font-size:11px;
	line-height:40px;
	border-radius:20px;
	text-decoration: none;
	border:solid;
	border-width:1px;
	border-color:#000;
	text-align: center;
	margin-top:15px;
}

.cardHolder .card .cardButton:hover {
	background-color: #66ccff;
}

.cardHolder .card p.googleDoc {
	font-family:MuseoSans-900;
	color:#000;
	font-size:12px;
	line-height:12px;
	margin-top:12px;
}

.cardHolder .card p.googleDoc a {
	color:#000;
	text-decoration: underline;
}


@media (max-width: 1050px) {
	.cardHolder {
		max-width:720px;
	}
	.sectionHolder.lessons .heroes.groot {
		margin-right:25px;
	}

	.sectionHolder.lessons .heroes.danvers {
		margin-left:20px;
	}
	.cardHolder .card .wasp {
		display:none !important;
	}
	.cardHolder .card {
		width: calc(100% - 30px);
		max-width:490px;
	}
	
}

@media (max-width: 920px) {
	.sectionHolder.lessons .heroes.groot {
		margin-right:-50px;
	}

	.sectionHolder.lessons .heroes.danvers {
		margin-left:-50px;
	}
}

@media (max-width: 680px) {
	.sectionHolder.lessons {
		padding-bottom:250px;
	}
	
	.cardHolder .card .cardLeft {
		width:100%;
		padding-left:25px;
		padding-right:25px;
		float:none;
		max-width:384px;
	}
	.cardHolder .card .theLessonImage {
		float:none;
		margin-top:10px;
		width:90%;
		max-width:300px;
	}
	.cardHolder .card {
		padding-bottom:15px;
		max-width:390px;
	}
}

@media (max-width: 450px) {
	.sectionHolder.lessons {
		padding-bottom:350px;
	}
	.sectionHolder.lessons .heroes.groot {
		margin-right:0px;
	}

	.sectionHolder.lessons .heroes.danvers {
		margin-left:0px;
	}
}


.sectionHolder.videoSection {
	background-image: url("images/video_background.jpg");
	background-size: cover;
	background-repeat:no-repeat;
	background-position:center center;
	background-color:#000;
}

.sectionHolder.videoSection .theSection {
	
}

.sectionHolder.videoSection .theSection .theContent {
	position:relative;
	left:0px;
	top:0px;
	width:100%;
	height:auto;
	min-height:652px;
	display:inline-block;
	box-sizing:border-box;
	float:right;
	padding-top:25px;
	padding-bottom:25px;
	max-width:604px;
}

.sectionHolder.videoSection .theSection .theContent .videoIcon {
	position:relative;
	left:0px;
	top:0px;
	width:53px;
	height:auto;
	display:inline-block;
}

.sectionHolder.videoSection .theSection .theContent h3 {
	margin:0px;
	padding:0px;
	font-weight:normal;
	position:relative;
	left:0px;
	top:0px;
	width:100%;
	height:auto;
	display:inline-block;
	box-sizing:border-box;
	padding-left:25px;
	padding-right:25px;
	font-family:MuseoSans-900;
	color:#FFF;
	font-size:32px;
	line-height:38px;
	margin-top:15px;
	max-width:400px;
	text-shadow: 0px 0px 5px rgba(0,0,0,1);
}

.sectionHolder.videoSection .theSection .theContent h3 i {
	font-style:normal;
	font-family:MuseoSans-900Italic;
}

.sectionHolder.videoSection .theSection .theContent h3 i span {
	white-space: nowrap;
}

.sectionHolder.videoSection p.subTitle {
	margin:0px;
	padding:0px;
	position:relative;
	left:0px;
	top:0px;
	width: 100%;
	height:auto;
	display:inline-block;
	box-sizing:border-box;
	font-family:MuseoSans-300;
	font-weight:normal;
	color:#FFF;
	padding-left:25px;
	padding-right:25px;
	font-size:18px;
	line-height:21px;
	margin-top:7px;
	text-shadow: 0px 0px 5px rgba(0,0,0,1);
}

.videoThumb {
	position:relative;
	left:0px;
	top:0px;
	width: 248px;
	height:auto;
	display:inline-block;
	box-sizing:border-box;
	margin-left:15px;
	margin-right:15px;
	margin-top:15px;
}

.videoThumb .thumbImage {
	position:relative;
	left:0px;
	top:0px;
	width: 100%;
	height:auto;
	display:inline-block;
	box-sizing:border-box;
	border:solid;
	border-width:2px;
	border-color:#FFF;
}

.videoThumb .thumbImage:hover {
	border-color:#eada0b;
}

.videoThumb p {
	margin:0px;
	padding:0px;
	position:relative;
	left:0px;
	top:0px;
	width: 100%;
	height:auto;
	display:inline-block;
	box-sizing:border-box;
	font-family:MuseoSans-300;
	color:#FFF;
	font-size:15px;
	line-height:18px;
	margin-top:10px;
}

@media (max-width: 767px) {
	.sectionHolder.videoSection {
		background-size: auto 628px;
		background-position:10% top;
	}
	.sectionHolder.videoSection .theSection .theContent {
		margin-top:628px;
		float:none;
	}
}

.nasawebb_section {width:100%; position:relative; z-index:1;/*background: #00b2c7;*/}

/*
a.nasawebb_btn {display:inline-block; height:40px; line-height:40px; background:#7a1878; font-family:MuseoSans-900, sans-serif; font-weight: normal; color:#FFF; text-decoration:none; text-align:center; box-sizing:border-box; padding:0 27.25px; font-size:13px; letter-spacing:1px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
white-space: nowrap;
margin: 0 auto;
position: relative;
width: 193px;
}

a.nasawebb_btn:hover {
	background-color:#eada0b;
	color:#000;
	text-decoration: none;
}
*/

a.nasawebb_btn {
	position:relative;
	left:0px;
	top:0px;
	width: 100%;
	height:40px;
	display:inline-block;
	box-sizing:border-box;
	max-width:236px;
	background-color:#FFF;
	font-family:MuseoSans-700;
	color:#000;
	font-size:13px;
	line-height:40px;
	border-radius:20px;
	text-decoration: none;
	text-transform: uppercase;
	border:solid;
	border-width:1px;
	border-color:#000;
}

a.nasawebb_btn:hover {
	background-color:#f4c08a;
	color:#000;
	text-decoration: none;
}


/* Survey */
#survey {width:1px; height:1px; top:-60px; left:0; position:absolute;}
#surveySection {text-align: center; padding: 28px 20px 29px 10px; background: #FFF; margin: 0;}
#surveySection #survey_intro {max-width: 880px; margin: 0 auto;}
#surveySection #survey_intro #survey_icon {width:63px; height: auto; margin-bottom:17px;}
#surveySection #survey_intro h2 {margin:0 0 7px 0; padding:0; font-family:MuseoSans-900, sans-serif; font-weight: normal; color: #ba0c2f; font-size: 32px; line-height: 38px;}
#surveySection #survey_intro p {max-width: 880px; margin:0 auto; padding:0; font-family:MuseoSans-500, sans-serif; font-weight: normal; color: #000; font-size:20px; line-height:24px;letter-spacing: -.1px;}
#surveySection #survey_intro p em {font-weight: 700; font-family:MuseoSans-700Italic, sans-serif; font-weight: normal; font-style: normal;}
#surveySection #survey_intro a.nasawebb_btn {width: 240px;margin: 25px auto;}
#surveySection #survey_bottom {max-width: 930px; margin:0 auto;}
#surveySection #survey_bottom p {margin:0 auto; padding:0; font-family:MuseoSans-500, sans-serif; font-weight: normal; color: #2D382A; font-size:11px; line-height:13px;text-align: center;max-width: 928px; width: 90%;}
#surveySection #survey_bottom p strong {font-family:MuseoSans-700Italic, sans-serif; font-weight: normal; font-size: 11px;}
#surveySection #survey_bottom a {color: #000;} 
#surveySection #survey_bottom p:nth-child(2) {padding: 60px 0 0 0;}

/* Extra Credit */
#nasawebb_extracredit {text-align: center; padding: 14px 20px 23px 10px; background: #13294b; margin: 0;}
#nasawebb_extracredit  p {max-width: 700px; width: 90%; margin:0 auto; padding:0; font-family:MuseoSans-300, sans-serif; font-weight: normal; color: #fff; font-size:16px; line-height:24px;}
#nasawebb_extracredit  p a {font-family:MuseoSans-700, sans-serif; font-weight: normal; color: #fff; text-decoration: underline;}
#nasawebb_extracredit #extracredit_icon {width:143px; height: auto; margin-bottom:5px;}

.sectionHolder.lessons.contest {
	background-color:#00676b;
}

.sectionHolder.lessons.contest .contestParagraph {
	margin:0px;
	padding:0px;
	position:relative;
	left:0px;
	top:0px;
	width: 100%;
	height:auto;
	display:inline-block;
	box-sizing:border-box;
	font-family:MuseoSans-300;
	color:#FFF;
	font-size:24px;
	line-height:32px;
	margin-top:25px;
	padding-left:25px;
	padding-right:25px;
	max-width:938px;
}

.sectionHolder.lessons.contest .contestParagraph.contestParagraph2 {
	width: calc(100%  - 380px);
	max-width:none;
}

.sectionHolder.lessons.contest .contestParagraph.contestParagraph3 {
	max-width:none;
	width: calc(100%  - 380px);
	font-family:MuseoSans-700;
	font-size:28px;
	line-height:32px;
}

.sectionHolder.lessons.contest .contestParagraph i {
	font-style: normal;
	font-family:MuseoSans-300Italic;
}

.sectionHolder.lessons.contest .contestParagraph sup {
	font-family:MuseoSans-300;
	font-size:.6em;
	display:inline-block;
	margin-left:2px;
}

.sectionHolder.lessons.contest .contestParagraph strong {
	font-weight:normal;
	font-family:MuseoSans-700;
}
.sectionHolder.lessons.contest .contestParagraph.contestParagraph2 strong {
	color:#80d5f6
}

.sectionHolder.lessons.contest .contestParagraph a {
	color:#FFF;
	text-decoration: underline;
}

.sectionHolder.lessons.contest .roundButton {
	margin-top:35px;
}

.formImage {
	position:absolute;
	left:0px;
	bottom:0px;
	width:169px;
}

#contestSection .roundButton {
	text-transform: uppercase;
	color:#b90c2f;
	font-size:16px;
}

#contestSection .roundButton:hover {
	background-color:#b90c2f;
	color:#FFF;
}

@media (max-width: 1023px) {
	.formImage {
		position:absolute;
		left:-20px;
		bottom:0px;
		width:169px;
	}
	.sectionHolder.lessons.contest .contestParagraph.contestParagraph2 {
		width: calc(100%  - 290px);
		max-width:none;
	}

	.sectionHolder.lessons.contest .contestParagraph.contestParagraph3 {
		max-width:none;
		width: calc(100%  - 290px);
		font-family:MuseoSans-700;
		font-size:28px;
		line-height:32px;
	}
}

@media (max-width: 767px) {
	.sectionHolder.lessons.contest {
		padding-bottom:200px !important;
	}
	.formImage {
		bottom:-200px;
		left:50%;
		margin-left:-84px;
	}
	.sectionHolder.lessons.contest .contestParagraph.contestParagraph2 {
		width: 100%;
	}

	.sectionHolder.lessons.contest .contestParagraph.contestParagraph3 {
		width: 100%;
	}
}

@media (max-width: 450px) {
	.formImage {
		display:inline-block;
	}
}

/* Modal */
#contestModal {}
#contestModal .modal-dialog {width:auto; max-width:990px;}
#contestModal .modal-content {border:#005fa1 3px solid; 
} 
#contestModal .modal-header {border-bottom: none; padding:10px; background:#fff;
}
#contestModal .modal-header h2 {margin:0; font-size:30px; font-family:MuseoSans-900, sans-serif; font-weight:normal; color:#b90b2e; text-align:center; margin-top:15px;}
#contestModal .modal-body {padding:0;}
.ContestClose {display: block; position: absolute; right:22px; top:2px;}
.ContestClose img {width:24px; height:auto; margin-top: 10px;}

#ContestLinks {text-align: center; font-family:MuseoSans-700, sans-serif; font-weight:normal; color:#000; font-size:16px; padding-bottom:30px;}
#ContestLinks a {color:#000; text-decoration: underline;}

/* Footer */
#sunsafety_footer {text-align: center; padding:20px 20px 40px 10px; background:#fff;}

#sunsafety_footer p {margin:0 auto; padding:0 0 20px 0; font-family:MuseoSans-500, sans-serif; color:#000; font-size:11px; line-height:13px; text-align:left; max-width: 928px; width: 90%;}
#sunsafety_footer p a {color:#000; text-decoration:underline;}