/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/* 
*  CSS TABLE OF CONTENTS
*   
*  1.0 - General Styles / Normalizing
*  2.0 - Animation Keyframes
*  3.0 - Main Landing Page Styles
*     3.1 - Main Page Styles
*     3.2 - Identify User Form Screen Styles
*     3.3 - Recent Quizzes Styles
*  4.0 - Subject Landing Page Styles
*  5.0 - Quiz Page Styles
*     5.1 - Preamble: Quiz / Answer Key Overlaping Styles
*     5.2 - Math Quiz Styles
*     5.3 - Housekeeping
*     5.4 - Buttons
*  6.0 - Form Screen Styles
*     6.1 - Transition Screen Styles
*  7.0 - Answer Key Styles
*     7.1 - Math Answer Key Styles
*  8.0 - Media Queries
*     8.1 - Extra small devices (phones, less than 480px). 320px min boundary.
*     8.2 - Small devices (tablets, 768px and below)
*     8.3 - Medium devices (tablets and small laptops 991px and below)
*     8.4 - Large devices (large laptops and desktops, 1199px and below)
*/

/*****************************************/
/* General Styles / Normalizing          */
/*****************************************/

/* 
Allowed Montserrat:
header 1
ExtraBold 800

Header 2, Header 3
Bold 700

Lead Paragraph
Medium 500

Body copy
Regular 400 
*/

html {
	font-size: 10px;
	scroll-behavior: smooth!important;
	overflow-x: hidden;
}

body {
	a,h1,h2,h3,h4,h5,h6,h7,li,p,span,ul,div,td,th {
		color: #00244d;
		font-family: Montserrat, arial;
		font-weight: 400;
		font-size: 1.6rem;
	}

	h1 {
		font-size: 4rem;
		font-weight: 800;
		margin-bottom: 20px;
	}

	h2,h3 {
		font-weight: 700;
		font-size: 3rem;
		margin-bottom: 5px;
	}

	p, div, span
	line-height: 2rem;
	color: #00244d;
}

li {
	line-height: 23px !important;
}

table {
	width: 92%!important;
	margin-bottom: 10px;
}

form {
	border: unset;
}

img {
	margin-bottom: 5px;
}
}

/*****************************************/
/* Animation Keyframes                   */
/*****************************************/

/* TODO: Add broswers */

@keyframes glow {
	from {
		text-shadow: 0 0 0 #fff, 0 0 20px #fff, 0 0 30px #00bfb8, 0 0 40px #00bfb8, 0 0 50px #00bfb8, 0 0 60px #00bfb8, 0 0 70px #00bfb8;
	}

	to {
		text-shadow: 0 0 0 #fff, 0 0 30px #00bfb8, 0 0 40px #00bfb8, 0 0 50px #00bfb8, 0 0 60px #00bfb8, 0 0 70px #00bfb8, 0 0 80px #00bfb8;
	}
}


@-webkit-keyframes glow {
	from {
		text-shadow: 0 0 0 #fff, 0 0 20px #fff, 0 0 30px #00bfb8, 0 0 40px #00bfb8, 0 0 50px #00bfb8, 0 0 60px #00bfb8, 0 0 70px #00bfb8;
	}

	to {
		text-shadow: 0 0 0 #fff, 0 0 30px #00bfb8, 0 0 40px #00bfb8, 0 0 50px #00bfb8, 0 0 60px #00bfb8, 0 0 70px #00bfb8, 0 0 80px #00bfb8;
	}
}

@-moz-keyframes glow {
	from {
		text-shadow: 0 0 0 #fff, 0 0 20px #fff, 0 0 30px #00bfb8, 0 0 40px #00bfb8, 0 0 50px #00bfb8, 0 0 60px #00bfb8, 0 0 70px #00bfb8;
	}

	to {
		text-shadow: 0 0 0 #fff, 0 0 30px #00bfb8, 0 0 40px #00bfb8, 0 0 50px #00bfb8, 0 0 60px #00bfb8, 0 0 70px #00bfb8, 0 0 80px #00bfb8;
	}
}

@keyframes glow2 {
	from {
		text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #f94868, 0 0 40px #f94868, 0 0 50px #f94868, 0 0 60px #00bfb8, 0 0 70px #00bfb8;
	}

	to {
		text-shadow: 0 0 20px #fff, 0 0 30px #fbe232, 0 0 40px #fbe232, 0 0 50px #00bfb8, 0 0 60px #00bfb8, 0 0 70px #00bfb8, 0 0 80px #00bfb8;
	}
}

@-webkit-keyframes glow2 {
	from {
		text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #f94868, 0 0 40px #f94868, 0 0 50px #f94868, 0 0 60px #00bfb8, 0 0 70px #00bfb8;
	}

	to {
		text-shadow: 0 0 20px #fff, 0 0 30px #fbe232, 0 0 40px #fbe232, 0 0 50px #00bfb8, 0 0 60px #00bfb8, 0 0 70px #00bfb8, 0 0 80px #00bfb8;
	}
}

@-moz-keyframes glow2 {
	from {
		text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #f94868, 0 0 40px #f94868, 0 0 50px #f94868, 0 0 60px #00bfb8, 0 0 70px #00bfb8;
	}

	to {
		text-shadow: 0 0 20px #fff, 0 0 30px #fbe232, 0 0 40px #fbe232, 0 0 50px #00bfb8, 0 0 60px #00bfb8, 0 0 70px #00bfb8, 0 0 80px #00bfb8;
	}
}

/*****************************************/
/* Main Landing Page Styles              */
/*****************************************/

.body-container--home {
	.hero-area {
		h3.game-on {
			text-transform: uppercase;
			margin: 0 0 3rem 0;
			font-family: lores-9-wide;
			font-size: 10rem;
			color: #ffffff;
			text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 30px #00bfb8, 0 0 40px #00bfb8, 0 0 50px #00bfb8, 0 0 60px #00bfb8, 0 0 70px #00bfb8;
			-webkit-animation: glow 1s ease-in-out 10 alternate;
			-moz-animation: glow 1s ease-in-out 10 alternate;
			animation: glow 1s ease-in-out 10 alternate;
		}

		h3.game-on:hover {
			color: #ffffff;
			-webkit-animation: glow2 1s ease-in-out infinite alternate;
			-moz-animation: glow2 1s ease-in-out infinite alternate;
			animation: glow2 1s ease-in-out infinite alternate;
		}

		.subheader {
			font-size: 2rem;
			color: white;
			line-height: 2rem;
		}

		.hero-banner {
			background-size: 100%;

			.banner-content h1.landing-subhead {
				color: #00bfb8;
				font-size: 2rem;
				margin: 0 auto 30px;
				background: #000000e3;
				padding: 5px 106px;
				max-width: 550px;
				line-height: 3rem;
				font-weight: 500;
			}

			.banner-gallery {
				display: none;
			}

			.banner-btn {
				display: none;
			}
		}
	}

	.subject-card {
		width: 100%;
	}

	.categorie-wrap {
		background-color: #041324d4;
		box-shadow: 
			0 0 .2rem #fff,
			0 0 .2rem #fff,
			0 0 1rem #00bfb8,
			0 0 0.8rem #00bfb8,
			0 0 2.8rem #00bfb8,
			0 0 1.3rem #00bfb8;

		&:hover {
			cursor: pointer;
		}
	}

	#recent_quizzes_container {
		h2,
		h3.hlead {
			color: white;
		}
	}
}

.row-fluid-wrapper.row-depth-1.row-number-6.dnd_area-row-2-background-layers.dnd_area-row-2-max-width-section-centering.dnd_area-row-2-background-image.dnd-section.cta-banner-area {
	box-shadow: 0 0 .2rem #fff, 0 0 .2rem #fff, 0 0 1rem #00bfb8, inset 0px 6px 10px 1px #00bfb8,  0 0 2.8rem #00bfb8, 0 0 1.3rem #00bfb8;
}

/* Identify User Screen */
.hero-banner #idUser {
	background-color: #041324e0;
}

#idUser {
	margin: 30px auto;
	padding: 10px 25px;
	background-color: #041324eb;
	max-width: 411px !important;
	text-align: center;

	h3 {
		color: #a539b2;
		font-size: 2rem;
	}

	.hs-form {
		background-color: unset;
	}

	form {
		border: unset;
		display: flex;


		.hs-form {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			padding: 5px 0;
		}

		input[type=email] {
			height: 38px;
		}

		.hs_submit {
			margin-top: 29px;

			input {
				font-family: 'Montserrat';
				height: 39px;
			}
		}
	}

	.hs_email.hs-email.hs-form-field {
		text-align: left;

		span {
			color: white;
		}
	}

	.input {
		margin-right:5px;
	}

	.submitted-message {
		color: #a539b2;
	}

	#waiting {
		margin-top: 10px;

		h2 {
			color: white;
			font-weight: 300;
			margin-top: 10px;
		}

		p {
			color: white;
			font-size: 1.6rem;
			line-height: 2.8rem;
			margin: 20px auto;
		}

		.fa-gear {
			color: white;
		}
	}
}
/* End Identify User Form Screen Styles */ 

/* Recent Quizzes Module */
#recent_quizzes_container {
	position: relative;
	z-index: 2;
	margin: 60px 20px 90px 20px;
	text-align: center;
	color: white;

	h3.hlead {
		margin-top: 0;
		font-size: 2.3rem;
		font-weight: 400;
	}

	#recent_quizzes {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 30px 5px;
	}

	.customized-quiz-card {
		background-size: cover;
		background-repeat: no-repeat;
		min-width: 308px;
		margin: 10px auto;
		transition: all 0.5s ease;
		border-radius: 5px;

		&:hover {
			box-shadow: 0 0 .2rem #00244d,
				0 0 .2rem #00244d,
				0 0 1rem #a539b2,
				0 0 0.8rem #a539b2,
				0 0 2.8rem #a539b2,
				0 0 1.3rem #a539b2;
			transform: scale(1.05);
		}

		h2,h3,h4,p,a {
			color: white;
		}

		.inner {
			margin: 38px;
		}
	}

	.quiz-meta {
		display: flex;
		justify-content: space-evenly;
	}
}
/* End Recent Quizzes Module */

/*****************************************/
/* Subject Landing Page Styles           */
/*****************************************/

.body-container--about {

	.page-banner-section {
		height: unset;
		min-height: 320px;

		&:before {
			background-color: unset;
		}
	}

	.page-banner-content  {
		background-color: #000000cc;
		max-width: 600px;
		margin: 0 auto;

		h1 {
			text-transform: unset;
			padding: 1% 3%;
		}
	}

	.page-banner-content ul li:last-child a {
		color: white;
		margin-bottom: 10px;
		font-size: 2rem;
		font-weight: 500;
	}

	.page-banner-content ul li a::before {
		content: "\f100";
		font-family: "FontAwesome";
		color: white;
	}
}


/*****************************************/
/* Quiz Page Styles                      */
/*****************************************/

/* Preamble: applicable to quiz and answer key: */
#quiz_grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

h3.passage-sub-head {
	font-weight: 500;
	font-size: 2rem;
	font-style: italic;
}

.questions h3 {
	font-weight: 400;
}

span[class*=link-to-passage] {
	cursor: pointer;
	color: blue!important;
	text-decoration: underline;
}

.visuallyhidden {
	display: none;
}

.caption,
.caption span {
	font-size: 1.2rem;
}

.body-container-wrapper {
	h3.eng-article {
		font-size: 2rem;
		font-weight: 500;
	}

	[role="dialog"] {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		display: none;
		z-index: 2;
	}

	#title {
		font-weight: bold;
	}

	#trigger, #close {
		cursor: pointer;
		margin-bottom: 10px;
		background: #2875b5;
		border-radius: 2px;
		color: white;
		border: none;
	}

	#trigger:focus, #trigger:hover, #close:focus, #close:hover  {
		outline: 3px solid #00244d;
	}

	#close {
		position: absolute;
		top: 0.5em;
		right: 0.5em;
		margin-top: 0;
	}

	[role="dialog"][open] {
		display: block;
	}

	#cover {
		background: grey;
		opacity: 0.75;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: none;
		z-index: 2;
	}


	#trigger {
		padding: 2px 5px;
		margin-bottom: 10px;
	}

	[role="dialog"] {
		padding: 1em 1em 1em 2em;
		max-width: 50vw;
		background: white;
		border-radius: 5px;
		box-shadow: unset;
		max-width: 560px;
		min-height: fit-content;
	}  
}
/* end preamble */

/* Firing up your quiz */
#form_loading {
	text-align: center;
	margin-top: 30px;
	color: #00bfb8;

	p {
		color: #00bfb8;
		padding-top: 10px;
	}
}
/* end */

/* Quiz Styles */
.controller-container {
	display: flex;
	margin: 10px;
	justify-content: center;

	.control-left,
	.control-right {
		min-width: 245px;
	}

	#quiz_container {
		margin: 0;
		min-width: 60vw;
		word-break: break-word;
		background: whitesmoke;
		border-radius: 1rem;
		padding: 10px 30px 0 30px;
		box-shadow: -1px 4px 1px #d3d3d3;
		height: 665px;
		overflow-y: scroll;

		.progress {
			background-color: white;
			border-radius: 20px;
			height: 25px;
			margin: 30px auto 0 auto;
			width: 100%;
		}

		.progress-done {
			display: flex;
			align-items: center;
			justify-content: center;
			background-image: repeating-linear-gradient(to right,
				#1d315f,
				#2875b5,
				#00b8b0);
			box-shadow: 0 5px -6px #1d315f, 0 3px 7px #2875b5;
			border-radius: 20px;
			color: whitesmoke;
			height: 100%;
			width: 0;
			transition: 1s ease 0.3s;
		}
	}

	#quiz_intro {

		h1, p {
			color: #00244d;
			line-height: 2.5rem!important;
		}

		a {
			text-decoration: underline;
		}

		li {
			margin-bottom: 5px;
		}

		li::before {
			content: "\f00c";
			font-family: 'FontAwesome';
			margin-right: 5px;
		}
	}

	#quiz_grid  {

		p {
			line-height: 1.5;
		}

		#passage td, 
		#quiz_grid #passage th {
			padding: 3px 8px!important;
		}

	}

	label {
		font-size: 1.5rem;
		color: #00244d;
	}

	.button_container {
		margin-bottom: 20px;
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
		clear: both;

		button {
			font-size: 16px;
			line-height: 2rem;
			margin: 40px 10px 0 0;
		}

		.secondary {
			background: #FFF;
			border-color: #2875b5;
			color: #025ca7;
		}
	}

	.hs-submit .actions .hs-button {
		background: #2875b5;
		border-color: #2875b5;
		color: #FFF;
		font-family: 'Montserrat';
		max-height: 46px;
	}
}

/* Math Quiz Styles */
.controller-container.math-quiz {
	#quiz_grid {
		display: unset;
	}

	#questions {
		display: flex;
		width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
	}

	.item-content {
		width: 68%;
		margin-right: 20px;
	}

	fieldset {
		width: 28%;
		margin-top: 60px;
	}

	#hs_validation_error {
		margin-right: 10px;
		float: right;
    align-content: flex-end;
	}

	.MJX_LiveRegion_Show {
		right: 600px;
		background-color: #d6fffe!important;
		box-shadow: unset;
		border: 2px solid #ffffff;
	}
}
/* End Math Quiz Styles */

/* Makes first question not appear on quiz intro screen */
#p8,
#hs_validation_error,
#quiz_container,
#privacy_policy {
	display: none;
}
/* end */

/* Buttons */
button#hs_next_button:hover,
button#hs_next_button:focus,
button#hs_next_button:active {
	font-size: 16px;
	line-height: 2rem;
}

button#hs_back_button, 
button#hs_next_button {
	z-index: 0;
}

.hs-button {
	cursor: pointer;
	font-weight: 700;
	position: relative;
	text-align: center;
	transition: all .15slinear;
	border-radius: 3px;
	border-style: solid;
	border-width: 1px;
	padding: 12px 24px;
	white-space: pre-wrap;
}

.hs-button, 
.hs-button:hover, 
.hs-button:hover:not(.inactive), 
.hs-button:focus, 
.hs-button:active, 
.hs-button:active:not(.inactive):not(.link) {
	background: #2875b5;
	border-color: #2875b5;
	color: #ffffff;
}

.hs-button, 
.hs-form-field input[type=text], 
.hs-form-field input[type=email], 
.hs-form-field input[type=phone], 
.hs-form-field input[type=number], 
.hs-form-field input[type=tel], 
.hs-form-field input[type=date], 
.hs-form-field textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
}


/*****************************************/
/* Main Form Screen Styles               */
/*****************************************/

.input {
	display: flex;
	flex-direction: column;
}

.hs-form {
	width: 100%;
	padding: 10px 0 30px 0;
	background-color: whitesmoke;
	border-radius: 15px;
}

#hsForm_9bdb486b-b151-46d0-8743-03785492b73d input[checked]:before {
	content: "";
	background-color: #00b8b0;
	width: .5em;
	height: .5em;
	margin-left: .9em;
	margin-top: .15em;
	border-radius: 10px;
	display: flex;
}

.hbspt-form {

	input[type=email]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=url]:focus, select:focus, textarea:focus {
		box-shadow: 0 0 5px 1px #147dc0;
		border: 1px solid #157bbd;
	}

	input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
		height: 35px;
		margin-bottom: 13px;
	}

	.hs-error-msg.hs-main-font-element,
	.hs-error-msgs {
		color: #f94868;
	}
}

.catainer img {
	display: none;
}

/* Transition Screen Styles  */
#score_loading {
	width: 100%;
	overflow-x: hidden;

	p {
		color: #167dc0;
		text-align: center;
	}

	.fa-gamepad {
		color: #167dc0;
		text-align: center;
		width: 100%;
	}
}

p#delay_score {
	font-size: 3rem;
	color: #00bfb8;
	font-weight: 500;
}

#thank_you_message {
	width: 100%;
	padding: 40px;
}

.score-btn {
	text-align: center;
}

button#answer_key_btn {
	font-size: 16px;
	line-height: 2rem;
	margin: 20px 10px 0 0;
}
/* End Transition Screen Styles */

/*****************************************/
/* Answer Key Styles                     */
/*****************************************/

#reloadRequired {
	text-align: center;
	margin: 30px;
	color: #00bfb8;
	font-weight: 400;

	p {
		color: #00bfb8;
		padding-top: 10px;
	}
}

.body-container--event-details {
	overflow-x: hidden;

	.page-banner-content {
		margin: 15px 0 0 18px;

		h1 {
			display: none;
		} 

		ul li a {
			margin: 15px 0 0 0;
			font-size: 2rem;
			font-weight: 500;
		}
	}

	.page-banner-content ul li a::before {
		content: "\f100";
		font-family: "FontAwesome";
	}

	#answer_container {
		background: whitesmoke;
		border-radius: 1rem;
		box-shadow: -3px 3px 1px #d3d3d3;
		margin: 10px 20px 30px;
		padding: 10px 50px 30px;

		#quiz_grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
		}

		#passage {
			margin-right: 30px;
		}

		#questions {
			background-color: white;
			padding: 20px;
			border-radius: 20px;
			margin-top: 20px;
		}

		.answerCorrect {
			color: #00b8b0;
			font-weight: 800;
		}

		.answerIncorrect {
			color: #f94868;
			font-weight: 800;
		}

		.explanation {
			margin-top: 10px;
			border-top: 1px dashed;
			padding-top: 10px;
			border-bottom: 1px solid;
		}

		.explanation p {
			font-weight: 300;
			color: #002d61;
			font-size: 14px;
		}

		h1 {
			margin-bottom: 10px;
		}

		label {
			font-size: 17px;
		}

		h2.passage-sub-head {
			margin-bottom: 25px;
		}

		#questions h2.passage-sub-head {
			margin-bottom: 25px;
			margin-top: 0;
		}

		.item-content h3 {
			font-weight: 400;
		}

		#quiz_intro {
			margin-bottom: -5px;
			border-bottom: 1px solid #d3d3d3;
			padding-bottom: 22px;

			.intro-container {
				display: flex;
				justify-content: space-between;
				align-items: center;

				button {
					margin-bottom: 5px;
				}

				.secondary {
					background: #ffffff;
					border-color: #2875b5;
					color: #025ca7;
				}  
			}

			.high-score {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;

				.share {
					margin-bottom: 0;
					font-weight: 500;
				}

				.fa-brands,
				.fa-envelope {
					margin-right: 15px;
					color: #00bfb8;
				}
			}
		}

		#quiz-score {
			background-image: repeating-linear-gradient(90deg, #a539b2, #00bfb8, #006894);
			font-size: 2rem;
			padding: 10px 20px;
			color: #ffffff;
			border-radius: 5px;
			text-align: center;
		}

		.quiz-score {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.fa-star {
			font-weight: 900;
			margin-left: 15px;
			margin-top: 22px;
			color: #a539b2;
		}
	}

	h2.darkbg {
		color: white;
	}

	.dnd_area-row-1-background-layers {
		position: relative;
	}

	#quiz_not_taken {
		text-align: center;
		margin: 50px auto 200px auto;

		.hs-button {
			white-space: unset;
		}

		.fa-hippo {
			color: #f94868;
		}

		p {
			font-weight: 500;
		}

		p.instruction {
			margin-top: 50px;
			border: 1px solid #cfcfcf;
			border-radius: 5px;
			max-width: 530px;
			margin: 50px auto;
			padding: 15px 0;
			line-height: 22px;
			font-size: 1.2rem;
		}
	}
}

/* Math answer key styles */
.math-answer {
	div#quiz_grid {
		display: unset!important;
	}

	h2.passage-sub-head {
		display: none;
	}
}
/* End Math answer key styles */

/*****************************************/
/* Media Queries                         */
/*****************************************/

@media (max-width: 991px) {

	.body-container--home {
		.hero-area {
			.hero-banner {
				background-size: 170%;
				min-height: 450px;
			}
		}

		.dnd-row>.row-fluid, .edumind-container>.row-fluid {
			max-width: unset;
		}

		.row-fluid {
			flex-wrap: wrap;
		}
	}

	.body-container--event-details {
		#recent_quizzes_container {
			#recent_quizzes {
				flex-direction: column;
			}
		}

		#answer_container {
			#quiz_grid {
				grid-template-columns: 1fr;
			}

			#questions {
				order: -1;
			}

			#passage {
				order: 1;
				margin-right: 0!important;
			}
		}
	}  
}

@media (max-width: 768px) {
	.body-container--home { 
		.hero-banner .banner-content {

			h3.game-on {
				font-size: 7rem!important;
			}

			h1.landing-subhead {
				font-size: 2rem!important;
			}

		}

		.dnd-row>.row-fluid, .edumind-container>.row-fluid {
			max-width: unset;
		}
	}

	#quiz_container #quiz_grid {
		grid-template-columns: 1fr;
	}

	.controller-container {
		.control-left, 
		.control-right {
			display: none;
		}

		#passage {
			padding-bottom: 10px;
			border-bottom: 1px solid gray;
		}
	}

	.body-container--event-details {

		#answer_container {

			.intro-container {
				flex-wrap: wrap;
			}

			.high-score {
				flex-wrap:wrap;
			}

			.buttons button {
				min-width: 247px;
			}

			#conditional-b {
				width: 100%;
			}
		}

		.button-wrap {
			text-align: center!important;
			margin-bottom: 10px;
		}

		.widget-type-cell .row-fluid {
			flex-wrap: wrap;
		}
	}

	.dnd-row>.row-fluid, 
	.edumind-container>.row-fluid {
		max-width: unset;
	}
}

@media (max-width: 480px) {
	.body-container--home {
		h3.game-on {
			margin-top: 50px;
		}

		.hero-area {
			.hero-banner {
				background-size: 230%;
				min-height: 430px;

				.banner-content {
					h1.landing-subhead {
						padding: 5px 20px;
					}
				}   
			}
		}
	}

	.body-container--about {
		.dnd_area-row-0-background-layers {
			background-size: 210%!important;
		}
	}

	#quiz_intro {
		h1 {
			font-size: 3rem;
		}
	}

	.body-container--event-details {
		#thank_you_message {
			padding: unset;
		}

		#answer_container {
			padding: 10px 20px 30px;
			margin: 10px 5px 30px;

			h1 {
				margin-bottom: 10px;
				font-size: 2.6rem;
			}

			#quiz-score {
				font-size: 1.2rem;
			}      
		}

		.controller-container.math-quiz {
			#questions {
				flex-direction: column;
			}

			.item-content {
				width: 100%;
			}

			fieldset {
				width: 100%;
				margin-top: 30px;
				border-top: 1px solid gray;
				padding-top: 33px;
			}
		}
	} 
}



header.header {
	z-index: unset;
}

header.header .container-fluid .dnd-section {
	overflow: unset;
}



.explanation p span {
	white-space: nowrap;
}