/*STAGING*/
@import url("font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Oleo+Script:400|Open+Sans:300,300italic,600,600italic,800");
@import url(https://fonts.googleapis.com/css?family=Luckiest+Guy);
@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Nunito);
@import "compass/css3";

/* Reset */

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}

	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block;
	}

	body {
		line-height: 1;
	}

	ol, ul {
		list-style: none;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	body {
		-webkit-text-size-adjust: none;
	}

/* Box Model */

	*, *:before, *:after {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

/* Containers */

	.container {
		margin-left: auto;
		margin-right: auto;
		width: 1400px;
	}

	@media screen and (max-width: 1680px) {

		.container.\31 25\25 {
			width: 100%;
			max-width: 1500px;
			min-width: 1200px;
		}

		.container.\37 5\25 {
			width: 900px;
		}

		.container.\35 0\25 {
			width: 600px;
		}

		.container.\32 5\25 {
			width: 300px;
		}

		.container {
			width: 1200px;
		}

	}

	@media screen and (max-width: 1280px) {

		.container.\31 25\25 {
			width: 100%;
			max-width: 1200px;
			min-width: 960px;
		}

		.container.\37 5\25 {
			width: 720px;
		}

		.container.\35 0\25 {
			width: 480px;
		}

		.container.\32 5\25 {
			width: 240px;
		}

		.container {
			width: 960px;
		}

	}

	@media screen and (max-width: 980px) {

		.container.\31 25\25 {
			width: 100%;
			max-width: 112.5%;
			min-width: 90%;
		}

		.container.\37 5\25 {
			width: 67.5%;
		}

		.container.\35 0\25 {
			width: 45%;
		}

		.container.\32 5\25 {
			width: 22.5%;
		}

		.container {
			width: 90% !important;
		}

	}

	@media screen and (max-width: 736px) {

		.container.\31 25\25 {
			width: 100%;
			max-width: 125%;
			min-width: 100%;
		}

		.container.\37 5\25 {
			width: 75%;
		}

		.container.\35 0\25 {
			width: 50%;
		}

		.container.\32 5\25 {
			width: 25%;
		}

		.container {
			width: 100% !important;
		}

	}

/* Grid */

	.row {
		border-bottom: solid 1px transparent;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.row > * {
		float: left;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.row:after, .row:before {
		content: '';
		display: block;
		clear: both;
		height: 0;
	}

	.row > * {
		padding: 40px 0 0 40px;
	}

	.row {
		margin: -40px 0 -1px -40px;
	}

	.\31 2u, .\31 2u\24 {
		width: 100%;
		clear: none;
		margin-left: 0;
	}

	.\31 1u, .\31 1u\24 {
		width: 91.6666666667%;
		clear: none;
		margin-left: 0;
	}

	.\31 0u, .\31 0u\24 {
		width: 83.3333333333%;
		clear: none;
		margin-left: 0;
	}

	.\39 u, .\39 u\24 {
		width: 75%;
		clear: none;
		margin-left: 0;
	}

	.\38 u, .\38 u\24 {
		width: 66.6666666667%;
		clear: none;
		margin-left: 0;
	}

	.\37 u, .\37 u\24 {
		width: 58.3333333333%;
		clear: none;
		margin-left: 0;
	}

	.\36 u, .\36 u\24 {
		width: 50%;
		clear: none;
		margin-left: 0;
	}

	.\35 u, .\35 u\24 {
		width: 41.6666666667%;
		clear: none;
		margin-left: 0;
	}

	.\34 u, .\34 u\24 {
		width: 33.3333333333%;
		clear: none;
		margin-left: 0;
	}

	.\33 u, .\33 u\24 {
		width: 25%;
		clear: none;
		margin-left: 0;
	}

	.\32 u, .\32 u\24 {
		width: 16.6666666667%;
		clear: none;
		margin-left: 0;
	}

	.\31 u, .\31 u\24 {
		width: 8.3333333333%;
		clear: none;
		margin-left: 0;
	}

	.\31 2u\24 + *,
	.\31 1u\24 + *,
	.\31 0u\24 + *,
	.\39 u\24 + *,
	.\38 u\24 + *,
	.\37 u\24 + *,
	.\36 u\24 + *,
	.\35 u\24 + *,
	.\34 u\24 + *,
	.\33 u\24 + *,
	.\32 u\24 + *,
	.\31 u\24 + * {
		clear: left;
	}

	.\-11u {
		margin-left: 91.66667%;
	}

	.\-10u {
		margin-left: 83.33333%;
	}

	.\-9u {
		margin-left: 75%;
	}

	.\-8u {
		margin-left: 66.66667%;
	}

	.\-7u {
		margin-left: 58.33333%;
	}

	.\-6u {
		margin-left: 50%;
	}

	.\-5u {
		margin-left: 41.66667%;
	}

	.\-4u {
		margin-left: 33.33333%;
	}

	.\-3u {
		margin-left: 25%;
	}

	.\-2u {
		margin-left: 16.66667%;
	}

	.\-1u {
		margin-left: 8.33333%;
	}

	@media screen and (max-width: 1680px) {

		.row > * {
			padding: 40px 0 0 40px;
		}

		.row {
			margin: -40px 0 -1px -40px;
		}

		.row.uniform > * {
			padding: 40px 0 0 40px;
		}

		.row.uniform {
			margin: -40px 0 -1px -40px;
		}
	}

	@media screen and (max-width: 1280px) {

		.row > * {
			padding: 25px 0 0 25px;
		}

		.row {
			margin: -25px 0 -1px -25px;
		}

		.row.uniform > * {
			padding: 25px 0 0 25px;
		}

		.row.uniform {
			margin: -25px 0 -1px -25px;
        }

	}

	@media screen and (max-width: 980px) {

		.row > * {
			padding: 25px 0 0 25px;
		}

		.row {
			margin: -25px 0 -1px -25px;
		}

		.row.uniform > * {
			padding: 25px 0 0 25px;
		}

		.row.uniform {
			margin: -25px 0 -1px -25px;
		}

	}

	@media screen and (max-width: 736px) {

		.row > * {
			padding: 20px 0 0 20px;
		}

		.row {
			margin: -20px 0 -1px -20px;
		}

		.row.uniform > * {
			padding: 20px 0 0 20px;
		}

		.row.uniform {
			margin: -20px 0 -1px -20px;
		}
	}

/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	body {
		background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0)), url("images/bg01.png");
		background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0)), url("images/bg01.png");
		background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0)), url("images/bg01.png");
		background-image: linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0)), url("images/bg01.png");
		background-color: #f7f7f7;
		background-position: top left, top left;
		background-repeat: repeat-x, repeat;
		background-size: 100% 30em, auto;
		font-family: 'Open Sans', sans-serif;
		font-size: 13pt;
		color: #696969;
		font-weight: 300;
		line-height: 2.25em;
	}

		body.is-loading * {
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
		}

	input, select, textarea {
		font-family: 'Open Sans', sans-serif;
		font-size: 13pt;
		color: #696969;
		font-weight: 300;
		line-height: 2.25em;
	}

	a {
		color: #0090c5;
		text-decoration: underline;
	}

		a:hover {
			text-decoration: none;
		}

	h1, h2, h3, h4, h5, h6 {
		color: #444;
		font-weight: 800;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
			outline: 0;
		}

	h2 {
		font-size: 2.25em;
		margin: 0 0 1.1em 0;
		line-height: 1em;
	}

	h3 {
		font-size: 1.75em;
		margin: 0 0 1em 0;
		font-weight: 500;
		
	}

	b, strong {
		font-weight: 600;
		color: #444;
	}

	i, em {
		font-style: italic;
	}

	br.clear {
		clear: both;
	}

	sub {
		position: relative;
		top: 0.5em;
		font-size: 0.8em;
	}

	sup {
		position: relative;
		top: -0.5em;
		font-size: 0.8em;
	}

	hr {
		border: 0;
		border-top: solid 1px #eee;
	}

	blockquote {
		border-left: solid 0.5em #eee;
		padding: 1em 0 1em 2em;
		font-style: italic;
	}

	p, ul, ol, dl, table {
		margin-bottom: 2em;
	}

/* Section/Article */

	section, article {
		margin-bottom: 5em;
	}

	section > :last-child,
	article > :last-child,
	section:last-child,
	article:last-child {
		margin-bottom: 0;
	}

	header {
		margin: 0 0 2em 0;
	}

		header h2, header h3 {
			margin: 0 0 0.25em 0;
		}

		header p {
			margin: 0;
		}

	footer {
		margin: 2.5em 0 0 0;
	}

/* Forms */

	form label {
		display: block;
		font-weight: 500;
		margin: .5em 0 .25em 0;
		font-size: 0.8em;
		color: #444;
	}

	form input[type="text"],
	form input[type="email"],
	form input[type="password"],
	form select,
	form textarea {
		-webkit-appearance: none;
		display: inline-block;
		border-radius: 8px;
		border: solid 1px #888;
        background-color: #fbfbfb;
	}

		form input[type="text"]:focus,
		form input[type="email"]:focus,
		form input[type="password"]:focus,
		form select:focus,
		form textarea:focus {
			border-color: #000;
		}

	form input[type="text"],
	form input[type="email"],
	form input[type="password"] {
		line-height: 3em;
		padding: 0 1em;
	}

	form select {
		line-height: 3em;
		padding: 0 1em;
	}

	form textarea {
		min-height: 9em;
		padding: 1em;
	}

	form .formerize-placeholder {
		color: #555 !important;
	}

	form ::-webkit-input-placeholder {
		color: #555 !important;
	}

	form :-moz-placeholder {
		color: #555 !important;
	}

	form ::-moz-placeholder {
		color: #555 !important;
	}

	form :-ms-input-placeholder {
		color: #555 !important;
	}

	form ::-moz-focus-inner {
		border: 0;
	}

/* Tables */

	table {
		width: 100%;
	}

		table.default {
			width: 100%;
		}

			table.default tr {
				border-top: solid 1px #eee;
			}

				table.default tr:first-child {
					border-top: 0;
				}

			table.default td {
				padding: 0.5em 1em 0.5em 1em;
			}

			table.default th {
				text-align: left;
				padding: 0.5em 1em 0.5em 1em;
				font-weight: 800;
				margin: 0 0 1em 0;
			}

			table.default thead {
				background: #404248;
				color: #fff;
			}

/* Image */

	.image {
		display: inline-block;
		outline: 0;
	}

		.image img {
			display: block;
			width: 100%;
			border-radius: 8px;
		}

		.image.fit {
			display: block;
			width: 100%;
		}

		.image.featured {
			display: block;
			width: 100%;
			margin: 0 0 2.5em 0;
			border-top-left-radius: 6px;
			border-top-right-radius: 6px;
		}

		.image.left {
			float: left;
			margin: 0 2em 2em 0;
		}

		.image.centered {
			display: block;
			margin: 0 0 2.5em 0;
		}

			.image.centered img {
				margin: 0 auto;
				width: auto;
			}

/* Button */

	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	button,
	.button {
		-moz-transition: background-color .25s ease-in-out;
		-webkit-transition: background-color .25s ease-in-out;
		-ms-transition: background-color .25s ease-in-out;
		transition: background-color .25s ease-in-out;
		-webkit-appearance: none;
		position: relative;
		display: inline-block;
		background: #0090c5;
		color: #fff;
		text-decoration: none;
		border-radius: 6px;
		font-weight: 800;
		outline: 0;
		border: 0;
		cursor: pointer;
		font-size: 1.35em;
	}

		input[type="button"].icon:before,
		input[type="submit"].icon:before,
		input[type="reset"].icon:before,
		button.icon:before,
		.button.icon:before {
			position: relative;
			margin-right: 0.5em;
			top: 0.05em;
		}

		input[type="button"]:hover,
		input[type="submit"]:hover,
		input[type="reset"]:hover,
		button:hover,
		.button:hover {
			background: #10a0d5;
		}

		input[type="button"]:active,
		input[type="submit"]:active,
		input[type="reset"]:active,
		button:active,
		.button:active {
			background: #20b0e5;
		}

/* List */

	ul.default {
		list-style: disc;
		padding-left: 1em;
	}

		ul.default li {
			padding-left: 0.5em;
		}

	ul.actions li {
		display: inline-block;
		padding: 0 0 0 0.25em;
		margin: 0 0 0 0.25em;
	}

		ul.actions li:first-child {
			margin-left: 0;
			padding-left: 0;
		}

	ul.menu li {
		border-left: solid 1px #e0e0e0;
		display: inline-block;
		padding: 0 0 0 0.75em;
		margin: 0 0 0 0.75em;
	}

		ul.menu li:first-child {
			border-left: 0;
			margin-left: 0;
			padding-left: 0;
		}

	ol.default {
		list-style: decimal;
		padding-left: 1.25em;
	}

		ol.default li {
			padding-left: 0.25em;
		}

/* Box */

	.box {
		background: #fff;
		border-radius: 6px;
		box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.05);
		padding: 2em;
	}

		.box.feature {
			padding: 0;
		}

			.box.feature .inner {
				padding: 4em 2em 3em 2em;
			}

			.box.feature h2 {
				font-size: 1.35em;
			}

			.box.feature p {
				margin: 0;
			}

			.box.feature .image {
				position: relative;
				margin: 0;
			}

				.box.feature .image img {
					border-bottom-left-radius: 0;
					border-bottom-right-radius: 0;
				}

/* Wrappers */

	#header-wrapper {
		padding: 4.5em 0 1em 0;
	}

	#features-wrapper {
		padding: 3em 0 3em 0;
	}

	#main-wrapper {
		background: #fff;
		box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.05);
		padding: 5em 0 5em 0;
	}

	#footer-wrapper {
		padding: 6em 0 8em 0;
	}

/* Header */

	#header {
		position: relative;
                margin-top: -30px;
                margin-bottom: 0;
	}

/* Logo */

	#logo {
		display: inline-block;
	}

		#logo h1 {
			background: #ff4486;
			color: #fff;
			border-radius: 6px;
			font-family: 'Oleo Script', serif;
			font-weight: 400;
			padding: 0.25em 0.2em 0.25em 0.2em;
			font-size: 3.25em;
			letter-spacing: 0.05em;
			display: inline-block;
			vertical-align: middle;
		}

		#logo span {
			font-weight: 800;
			line-height: 4.5em;
			letter-spacing: 0.025em;
			font-size: 0.9em;
			vertical-align: middle;
			margin: 0 0 0 1.25em;
		}

/* Nav */

	#nav {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 0.9em;
                margin-top: 50px;
	}

		#nav ul li {
			float: left;
			line-height: 3.5em;
			padding-left: 1.5em;
		}

			#nav ul li a, #nav ul li span {
				-moz-transition: background-color .25s ease-in-out;
				-webkit-transition: background-color .25s ease-in-out;
				-ms-transition: background-color .25s ease-in-out;
				transition: background-color .25s ease-in-out;
				font-weight: 800;
				letter-spacing: 0.025em;
				color: #696969;
				text-decoration: none;
				border-radius: 3px;
				padding: 0.5em 1em 0.5em 1em;
			}

			#nav ul li > ul {
				display: none;
			}

			#nav ul li:hover > a, #nav ul li:hover > span {
				background: #fff;
			}

			#nav ul li.active a, #nav ul li.active span {
				background: #fff;
			}

			#nav ul li.current a {
				background: #444;
				color: #fff;
			}
			
	

/* Banner */

	#banner {
		position: relative;
		padding: 4.5em;
	}

		#banner h2 {
			font-size: 3.5em;
			margin: 0.1em 0 0.35em 0;
		}

		#banner p {
			font-size: 2.75em;
			line-height: 1.35em;
			margin: 0;
		}

		#banner .button {
			width: 100%;
			margin-bottom: 0.5em;
		}

			#banner .button.icon:before {
				position: absolute;
				right: 0.15em;
				top: 50%;
				margin-top: -0.5em;
			}

			#banner .button.alt {
				margin-bottom: 0;
			}

		#banner ul {
			margin: 0 0 0 2em;
		}

/* XLarge */

	@media screen and (max-width: 1680px) {

		/* Basic */

			body, input, select, textarea {
				font-size: 12pt;
			}

	}

/* Large */

	@media screen and (max-width: 1280px) {
        body, input, select, textarea {
            font-size: 11pt;
        }
	}

/* Medium */

	@media screen and (max-width: 980px) {

		/* Basic */
			body, input, select, textarea {
				font-size: 11pt;
			}

		/* Section/Article */

			section, article {
				clear: both;
				margin-bottom: 3em !important;
			}

		/* Button */

			input[type="button"],
			input[type="submit"],
			input[type="reset"],
			button,
			.button {
				width: 100%;
				text-align: center;
				font-size: 1.35em;
				padding: 0.85em 0 !important;
			}

		/* Wrappers */

			#header-wrapper {
				padding: 3em 0 1em 0;
				text-align: center;
			}

		/* Header */

			#header {
				margin: 0 auto;
			}

		/* Logo */

			#logo span {
				display: block;
				margin: 0;
			}

		/* Nav */

			#nav {
                            position: relative;
			}

		/* Banner */

			#banner {
				padding: 4.5em 3em;
				text-align: center;
			}

				#banner ul {
					margin: 2em 0 0 0;
				}

				#banner .button.icon:before {
					position: relative;
					right: auto;
					top: auto;
				}
	}

/* Small */

	@media screen and (max-width: 736px) {

		/* Basic */

			body, input, select, textarea {
				line-height: 2em;
			}

			h2, h3, h4, h5, h6 {
				font-size: 13pt;
				margin: 0 0 1em 0;
			}

		/* Section/Article */

			section, article {
				clear: both;
				margin-bottom: 3em !important;
			}

				section.last, article.last {
					margin-bottom: 0 !important;
				}

		/* Image */

			.image.left {
				width: 25%;
				margin-bottom: 2em !important;
			}

		/* List */

			ul.menu li {
				display: block;
				border: 0 !important;
				padding: 0 !important;
				margin: 0 !important;
			}

			ul.actions li {
				display: block;
				padding: 0;
				margin: 1em 0 0 0;
			}

				ul.actions li:first-child {
					margin-top: 0;
				}

		/* Button */

			input[type="button"],
			input[type="submit"],
			input[type="reset"],
			button,
			.button {
				width: 100%;
				text-align: center;
				font-size: 1.25em !important;
				padding: 0.65em 0 !important;
			}

				input[type="button"].icon,
				input[type="submit"].icon,
				input[type="reset"].icon,
				button.icon,
				.button.icon {
					padding-right: 0.75em !important;
				}

					input[type="button"].icon:before,
					input[type="submit"].icon:before,
					input[type="reset"].icon:before,
					button.icon:before,
					.button.icon:before {
						margin-right: 0.5em;
						top: 0.05em;
					}

		/* Box */

			.box {
				padding: 15px 15px 15px 15px;
				margin: 0;
			}

				.box.feature {
					margin: 20px 0 0 0 !important;
					padding: 0;
				}

					.box.feature .inner {
						padding: 30px 15px 30px 15px;
					}

					.box.feature p {
						margin: 0;
					}

					.box.feature .image {
						position: relative;
						margin: 0;
					}

						.box.feature .image img {
							border-bottom-left-radius: 0;
							border-bottom-right-radius: 0;
						}

		/* Widgets */

			.widget.thumbnails .image {
				margin: 0;
			}

			.widget.thumbnails .x {
				padding: 1em 0.5em 0 0;
			}

			.widget.thumbnails .y {
				padding: 1em 0 0 0.5em;
			}

			.widget.thumbnails .row:first-child .x, .widget.thumbnails .row:first-child .y {
				padding-top: 0;
			}

		/* Wrappers */

			#header-wrapper {
				padding: 3em 0 1.5em 0;
			}

			#banner-wrapper {
				padding: 0 15px 0 15px;
			}

			#features-wrapper {
				padding: 0 15px 40px 15px;
			}

			#main-wrapper, #footer-wrapper {
				padding: 40px 30px 40px 30px;
			}

		/* Logo */

			#logo h1 {
				font-size: 2.75em;
				padding: 0.2em 0.275em;
			}

			#logo span {
				line-height: 3em;
			}

		/* Banner */

			#banner {
				text-align: center;
				padding: 15px 15px 15px 15px;
				margin: 0 auto !important;
			}

				#banner h2 {
					font-size: 2em;
					margin: 0.75em 0 0.5em 0;
				}

				#banner p {
					font-size: 1.5em;
					line-height: 1.5em;
					margin: 0;
				}

				#banner ul {
					margin: 0;
				}

				#banner .button {
					margin: 0 0 1em 0;
				}

		/* Content */

			#content {
				padding-bottom: 3em;
			}

	}
	
#popup, #popupSizzle {
    position: fixed; 
    display: inline-block;
    top: 150px;
    left: -100px;
    width: 100%; 
    height: 100%;
    z-index: 800;

}
#popup .container {
    position: relative;
    top: 50px;

}
#blanket {
	background-color: rgba(0, 0, 0, 0.3);
	width: 100%;
	height: 100%;
	position: fixed; 
	top: 0;
	left: 0;
	z-index: 799;
}

#playercontent {
    word-wrap: break-word;
    max-height: 650px;
    text-align: center;
}

#close {
    float: right;
    padding: 0;
    color: gray;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 5px;
}
.dropdown-content > ul > li:hover,
.dropdown-content > ul > li > a:hover	{
    background-color: #0090c5;
    border-radius: 5px;
}

.dropdown-content > ul > li,
.dropdown-content > ul > li > a {
    width: 100%;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
    background-color: #f9f9f9;
}
.dropdown:hover .dropdown-content {
    display: block;
    z-index: 1000;
}

#playercontent pre {
	word-break: keep-all;
}

#main-wrapper.stripe1 {
	background-image: url('../images/classroom.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	color: white;
}
	#main-wrapper.stripe1 h2 {
		color: white;
	}
.stripe2 {
	background-image: url('../images/Teacher_Surprise.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	height: 380px;
}
#features-wrapper.stripe3 {
	background-image: url('../images/Skills_Girls.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.stripe4 {
	background-image: url('../images/KidsOnTech.png');
	background-size: cover;
	background-size: 60% 100%;
	background-repeat: no-repeat;
	height: 403px;
	background-position: right;
}

.textLeft {
	text-align: left;
}
.textCenter {
	text-align: center;
}
.textRight {
	text-align: right;
}



#nav ul li a.homepageButton, .homepageButton {
	background-color: #ff9900;
	text-align: center;
	color: white;
	border-radius: 5px;
	text-decoration: none; 	
	padding: 0.5em 1em 0.5em 1em;
	font-weight: 600;
}
.newslink img {
	max-height: 40px;
	max-width: 150px;
	opacity: .45;
}

.nbclink {
	max-height: 40px;
	max-width: 170px;
	opacity: .45;
}

.newslist {
	vertical-align: middle;
}

pre a, pre p{
	text-decoration: none;
	margin-bottom: 0;
	font-size: 8px;
}

.contentMain {
	border: 20px solid rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	margin-left: 15%; 
	margin-right: 15%; 
	display: inline-block; 
	max-width: 70%;
	max-height: 750px;
        padding: 20px;
}
.contentArea {
    overflow: auto;
    margin: 0;
    max-height: 575px;
}

.gifInfo {
    position: relative;
    margin-top: 14%;
}

#banner p.login {
	font-size: 2em;
	font-weight: 600;
}
#banner p.loginSub {
	font-size: 1.50em;
	font-weight: 500;
}
#banner p.quote {
	font-size: 1.75em;
	font-weight: 600;
}
#banner p.quoteSub {
	font-size: 1em;
	font-weight: 500;
}
#banner p.contact {
	font-size: 1.5em;
	font-weight: 500;
}
#banner p.number {
	font-size: 1.70em;
	font-weight: 500;
}
#banner p.hours {
	font-size: .75em;
	font-weight: 500;
}
#banner p.loginSwitch {
	font-size: 1em;
	font-weight: 500;
}
h2.login {
	font-weight: 500;
}

.sidelink a {
	font-size: 1em;
	font-weight: 600;
	text-decoration: none;
	color: black;
}
.side {
	text-align: center;
}

.sidelink .dropdown-content a {
	font-size: 1em;
	font-weight: 500;
	text-decoration: none;
	color: black;
}

.clickdown.sidelink .dropdown-content {
	position: relative;
}
.sidelink ul p {
    font-weight: 600;
    margin-bottom: 0;
    margin-left: 10%;
}

.sidelink ul p.active {
    color: black;
}

#nav ul li.accountlink > a {
	background-color: gray;
	color: white;
}

.sidelink .active {
	color: #0090c5;
}

.sidelink .dropdown-content .active {
	font-weight: 800;
}

.nolink {
	cursor: pointer; 
}

.asset {
	display: inline-block;
	width: 33.3333333333%;
	background: #fff;
	height: 250px;
	overflow: hidden;
    border-radius: 3px;
    padding: 2em;
	float: left;
}

.asset img {
    width: 100%;
    cursor: pointer;
}

.content.characters .asset {
	height: 450px;
}

.row > .content {
	padding: 20px 40px 0 40px;
}

.row > .content.animations {
	max-height: 600px;
}

.addAnim {
	float: right;
	position: relative;
    z-index: 800;   
    color: black;
}

.content.animations .asset.activeAsset {
	background-color: #96b4dc;
}

#thumbWrapper ul {
    margin: 0;
}

#contentHeader {
    padding: 5px 0 5px 40px;
}

.pagination>li {
    display: inline;
}

.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #337ab7;
    border-color: #337ab7;
}

.explainer {
    padding-top: 0;
}

.characterThumb {
    height: 450px;
}

.charImage {
	margin-right: 5px;
	float: left;
	height: 575px;
	overflow: hidden;
}

#selectedMoves {
    overflow: auto;
    max-height: 150px;
    padding-top: 2px;
}

.bio {
    max-height: 450px;
    overflow: auto;
    
    padding-top: 0;
    margin-top: 20px;
}
.bio b {
    font-weight: 800;
}
.bio > p {
    font-weight: 600;
    font-size: .85em;
    line-height: 1.5em;
}

.map {
    width: 100%;
    position: relative;
}
.map .hotspots {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.map img {
    display: block;
    width: 100%;
    z-index: 750;
}
.map a {
    display: block;
    position: absolute;
    z-index: 800;
    opacity: 0.2;
}
.geraldMap, .milesMap, .kiaraMap {
    left: 30%;
    top: 8%;
    height: 90%;
    width: 13%;
}
.brandiMap, .brookeMap, .hectorMap {
    left: 47%;
    top: 8%;
    height: 90%;
    width: 12%;
}
.ryanMap, .rubyMap, .amandaMap {
    left: 64%;
    top: 5%;
    height: 93%;
    width: 11%;
}
.vaniaMap, .theoMap, .trevorMap {
    left: 80%;
    top: 8%;
    height: 90%;
    width: 13%;
}
.backMap {
    width: 18%;
    height: 11%;
    bottom: 2%;
    left: 7%;
}

.hwMap {
    width: 18%;
    height: 40%;
    top: 42%;
    left: 7%;
}


.charImg {
    max-height: 400px;
    max-width: 100%;
}

.characterName {
    font-weight: 500;
    font-size: 3em;
    text-transform: uppercase;
    margin-bottom: 10px;
    margin-top: 20px;
}

.Gerald, .Brandi, .Ryan, .Vania {
    font-family: 'Luckiest Guy', cursive;
}
    .Gerald {
        color: #7c9a35;
    }
    .Brandi {
        color: #a93d6f;
    }
    .Ryan {
        color: #1a8d87;
    }
    .Vania {
        color: #bd3a3e;
    }

.Miles, .Brooke, .Ruby, .Theo {
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
}
    .Miles {
        color: #b11316;
    }
    .Brooke {
        color: #1d7ca8;
    }
    .Ruby {
        color: #633473;
    }
    .Theo {
        color: #557122;
    }
.Kiara, .Hector, .Amanda, .Trevor {
    font-family: 'Nunito', sans-serif;
}
    .Kiara {
        color: #383835;
    }
    .Hector {
        color: #674170;
    }
    .Amanda { 
        color: #616032;
    }
    .Trevor {
        color: #058e94;
    }

#canvas {
    border: solid black 2px;
    position: relative;
    width: 500px;
    height: 500px;
    top: 25%;
    left: 25%;
}

.animation.asset {
    display: inline;
    height: 200px;
    width: 30%;
    margin-right: 3%;
    margin-bottom: 3%;
    padding: 4px;
}
.animation.asset:hover {
    border: 2px solid black;
}
.animation.asset a {
    text-decoration: none;
    color: #0090c5;
    font-size: 1.25em;
    font-weight: 600;
}
.asset.animation img {
    height: 70%;
    max-width: 50%;
    width: auto;
    height: auto;
    margin-left: 24%;
    cursor: pointer;
}

#charPop {
    padding-bottom: 10px;
    float: right;
    margin-top: 20px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.05);
    padding: 2em;
}

.festivalBanner {
    margin-bottom: 50px;
}
.festivalBanner img {
    width: 100%;
}

.festivalNav {
    width: 100%;
    padding-left: 0;
    padding-top: 5px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.festivalLink {
    flex-grow: 1;
    text-align: center;
    border-radius: 5px;
    background-color: gray;
    color: white;
    text-decoration: none;
    font-size: 1em;
    font-weight: 600;
    margin: 0 5px 0 5px;
}

.festivalLink:hover {
    background-color: rgb(95, 24, 97);
}

.festivalLink.active {
    background-color: rgb(95, 24, 97);
}

.festivalText ul {
    list-style-type: circle;
    list-style-position: inside;
}

.footList {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    padding: 0;
}

.footLink {
    flex-grow: 1;
    float: left;
}

.submitHead {
    font-size: 1.5em;
    font-weight: 600;
    color: black;
}

.submitHead b {
    font-weight: 800;
}

.submitText {
    width: 100%;
}
.submitThumb {
    height: 60%;
    max-width: 100%;
}
.submitLabel {
    font-size: 1em;
    font-weight: 600;
}

.submitTitle {
    color: #0090c5;
    font-size: 1.25em;
    font-weight: 600;
    margin-bottom: 0;
}
.by {
    font-weight: 600;
    margin-bottom: 0;
    color: black;
}
.watchTitle {
    color: #0090c5;
    font-size: 1.75em;
    font-weight: 700;
    margin-bottom: 0;
}
.watchSubmitter {
    margin-bottom: 0;
    font-weight: 600;
    color: black;
}

.watchContent {
    border: 20px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin-left: auto; 
    margin-right: auto; 
    display: inline-block; 
    max-width: 100%;
}

.submitVote {
    width: 100%;
    padding: 10px 0 10px 0;
    background-color: orange;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    font-weight: 600;
    color: white;
}

.votePanel {
    margin-left: -2%;
}

.votePanel * {
    padding-left: 0;
}

.voteLabel {
    font-size: 1.5em;
    font-weight: 600;
    text-align: center;
    padding: 1em 0 1em 0;
    line-height: 1.25em;
}
.voteLabel input[type=checkbox] {
    /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  padding: 10px;
  margin-right: 10px;
}

.submitWatch iframe {
    width: 100%;
    height: 450px;
}

.submitWatch {
    padding-right: 40px;
}

.watchBox {
    height: 450px;
}

.backButton {
    background-color: gray;
    border-radius: 5px;
    width: 20%;
    text-align: center;
    color: white;
    margin-top: 20px;
    text-decoration: none;
    font-weight: 600;
    padding: 10px 0 10px 0;
    margin-left: 3%;
}

.winner {
    width: 100%;
    height: 500px;
    line-height: 145%;
    padding: 20px 10px 20px 10px;
}
.winner:nth-child(odd) {
    background-color: white;
}
.winnerInfo {
    text-align: right;
    position: relative;
    top: 145px;
}
.awardTitle {
    display: block;
    font-size: 1.75em;
    margin-bottom: 35px;
}
.winnerTitle {
    color: #0090c5;
    font-weight: 800;
    font-size: 2em;
    margin-bottom: 12px;   
}
.winnerName {
    font-size: 1.25em;
    font-weight: 600;
    color: black;
    margin-bottom: 12px;
}
.winnerSchool {
    font-weight: 600;
}
.winnerVideo iframe {
    width: 90%;
    height: 400px;
    position: relative;
    top: 25px;
}
.runnersUp {
    text-align: center;
}
.runnersUp h2 {
    font-size: 2em;
    background-color: white;
    width: 100%;
    margin-bottom: 0;
    padding: 1em 0 1em 0;
    border-top: solid black 3px;
    
}
.runner {
    padding: 10px 0 10px 0;
}
.runner:nth-child(odd) {
    background-color: white;
}
.runner .winnerSchool {
    margin-bottom: 0;
}

.addButton {
    display: inline-block;
    background-color: #0090c5;
}
.removeButton {
    display: inline-block;
    background-color: darkred;
}
    .removeButton:hover {
        background-color: red;
    }
     
.catSelect {
    width: 100%;
    padding: 20px 20px 20px 20px;
    margin-bottom: .5em;
    font-size: 1.75em;
    background-color: #0090c5;
    color: white;
    border-radius: 6px;
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
}

.audio p {
    margin-bottom: 0;
    font-weight: 700;
    font-size: 1em;
}
.audio audio {
    width: 90%;
}
.audio {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #0090c5;
    margin-bottom: 10px;
    border-radius: 5px;
    width: 30%;
    height: 150px;
    color: white;
    padding: 0;
    text-align: center;
    margin: 5px 1.5% 5px 1.5%;
}
.episodeStages > h2:first-child {
    color: #0090c5;
    font-size: 2.25em;
    margin: 0 0 .75em 0;    
}
.episodeStages h2 {
    font-size: 2em;
    color: gray;
}
episodeStages > h1 {
    margin: 0 0 .75em 0;
}
.episodeStages p {
    font-weight: 600;
}

.moreButton, .downloadButton {
    border-radius: 6px;
    display: inline-block;
    color: white;
    font-size: 20px;
    font-weight: 600;
    padding: 10px 20px 10px 20px;
    margin-bottom: 1em;
    text-decoration: none;
}
.moreButton {
    background-color: orange;
}
.downloadButton {
    background-color: #0090c5;
}

#contentWrapper {
    width: 70%;
    float: right;
}
#contentWrapper.bgWrapper {
    padding-right: 0;
}

#linkWrapper > .row > * {
    padding-left: 0;
}

#linkWrapper h1 {
    padding-top: 0;
}

#roleSource {
    height: 500px;
}

.festivalText strong{
    font-size: 20px;
    font-weight: 600;
    padding: 10px 0 10px 0;
}

.festivalText strong p{
    font-size: 100%;
    font-weight: 600;
    padding: 10px 0 10px 0;
}

.festivalText p {
    margin-bottom: 0;
}

.festivalText h2 {
    margin: 40px 0 10px 0;
}

.pressbox p {
    line-height: 1.5em;
    margin-bottom: 1em;
}

.pressbox h1 {
    color: #0090c5;
    font-size: 2em;
    font-weight: 800;
    margin-bottom: 15px;
    margin-top: 15px;
}

.pressbox > div {
    margin-bottom: 50px;
}

#lesson p, #lesson li, #lesson ul {
    margin: 0 10px 0 10px;
}

.sublink a {
    font-size: 1em;
    font-weight: 500;
    text-decoration: none;
    text-decoration: none;
    color: black;
}

.sublink .active {
	color: #0090c5;
}

.rsvpForm {
    display: flex;
    flex-direction: row; 
    justify-content: flex-end;
}

.formLeft {
    display: flex;
    justify-content: flex-end;
}

.rsvpForm p {
    margin-bottom: .1em;
    font-weight: 600;
    color: black;
}

.rsvpForm form {
    width: 100%;
    text-align: right;
    padding-right: 1em;
}

.formRight {
    text-align: right;
    padding-right: 5%;
}

.rsvpForm form input {
    width: 70%;
    line-height: 2em;
    background-color: #ededed;
}
.rsvpForm select {
    background-color: #ededed;
    border-radius: 10px;
}
.rsvpInfo p {
    font-size: .9em;
    line-height: 1.5em;
    
}

.rsvpInfo h1 {
    font-size: 1em;
    padding: .5em 0;
}

.rsvpBox {
    background-color: #ededed;
    padding: .05em 2em;
    border-radius: 10px;
}

.rsvpLogo {
    text-align: right;
    padding-right: 40px;
}

.deadline h1{
    text-align: center;
    color: #c10000;
    font-size: 1.5em;
}

.rsvpHead {
    margin-bottom: -3em;
    color: black;
    padding-top: 20px;
}

.rsvpChar {
    margin-bottom: -20px;
}

.rsvpChar img {
    margin-top: -200px;
}

.successMessage p {
    position: relative;
    z-index: 1;
    margin: 0 25% 0 25%;
    line-height: 1.5em;
    
}
.successMessage h1 {
    text-align: center;
    margin-bottom: 2em;
}

.successMessage h2 {
    text-align: center;
    color: green;
}

.box.successbox {
    padding-bottom: 0;
    overflow: hidden;
}

.projects object {
    height: 500px;
}

#clock {
    color: rgb(222,0,3);
    font-size: 60px;
    font-weight: 800;
    position: relative;
    left: 46%;
    top: -140px;
}

.allBG {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.bgCategory {
    width: 30%;
    max-height: 250px;
    background-color: white;
    margin-bottom: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.bgCategory img {
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.bgCategory a {
    text-decoration: none;
    font-weight: 600;
    color: gray;
    padding-bottom: 10px
}

.bgCategory p {
    line-height: 1.5em;
    margin-bottom: 0;
}

.bgCategoryheader {
    width: 100%;
    margin-bottom: 10px;
    height: 80px;
}

.CatTitle {
    font-weight: 700; 
    color: #0090c5; 
    font-size: 3em; 
    margin-bottom: 0;
    float: left
}

.homeVideoWrapper {    
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.homeVideoContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    background-color: white;
    width: 100%;
    position: relative;
    height: 500px;
}

.WhySMWorks {
    width: 100%;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 2em;
    color: #00AEDF;
    position: relative;
    top: -15px;
}
.homeVideo {
    width: 25%;
    padding: 10px 10px;
    max-height: 550px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.homeVideo img {
    height: 150px;
    max-width: 100%;
}

.sizzleTitle {
    font-weight: 600;
    text-align: center;
    margin-bottom: 5px;
    color: #00AEDF;
    line-height: 1.25em;
}
.sizzleBlurb {
    font-weight: 500;
    font-size: 1em;
    line-height: 1.25em;
}
.slider {
    width: 8%;
    padding: 10px;
    color: #00AEDF;
}
.slideLeft {
    text-align: right;
}

.sizzleContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 5px 40px 5px;
}
.sizzleVideo {
    width: 60%;
}
.sizzleVideo video {
    width: 100%;
}
.sizzleDescription {
    display: flex;
    flex-direction: column;
    width: 40%;
}

.contentMain.sizzle {
    margin-left: 5%;
    max-width: 90%;
}

.slick-slider {
    max-width: 1400px;
    max-height: 300px;
    width: 100%;
}

.videoSlider {
    width: 100%;
}

.video div {
    padding: 10px;
    width: 100%;
    cursor: pointer;
}
.video img {
    width: 100%;
}

.video p {
    line-height: 1.25em;
    color: black;
}

.play {
    position: relative;
    top: -125px;
    left: 150px;
    float: left;
}

.slick-prev, .slick-next {
    height: 100px !important;
    width: 20px !important;
}
.slick-prev:before, .slick-next:before {
    color:#0090c5 !important;
    font-size: 50px !important;
}

.slick-prev:hover, .slick-next:hover {
    background-color: transparent !important;
    
}
.slick-prev {
    left: -55px !important;
}
.slick-dots {
    position: relative !important;
    top: -100px !important;
}

.slick-list {
    position: relative;
    top: -80px;
}

.sizzleIndex {
    position: relative;
    top: 20px;
    left: -5px;
    width: 25px !important;
    height: 25px;
    background-color: white;
    border-radius: 50%;
    border: black solid 1px;
    z-index: 1000;
    padding: 0 7px !important;
}

.gradeSelector {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.gradeSelect {
    width: 100%;
}
.lessonGradeSelector {
    border-radius: 5px;
    height: 65px;
    text-align: center;
    background-color: #0090c5;
    color: white;
    width: 100%;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 1.5em;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

#lesson .lessonGradeSelector {
    height: 100px;
    font-size: 2em;
    margin-bottom: 15px;
}

.socialTut video {
    width: 100%;
}

.scenes {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}
.ozScene {
    width: 32%;
    padding: 1%;
}
.ozScene img {
    width: 100%;
}

.ozScene p{
    margin-bottom: 1em;
}

.bannerWrapper {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.banner {
    width: 100%;
    background-color: white;
    height: 425px !important;
}

.slidingBanner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    
    width: 100%;
    position: relative;
    height: 425px;
}

.characterBanner {
    position: relative;
    bottom: -85px;
    width: 360px;
    height: 377px;
}

.storyBanner {
    text-align: center;
    margin-top: 95px;
}


.sequenceTitle {
    margin-bottom: 0;
    padding-top: 10px;
    font-size: 1.25em;
}
.sequenceDetails {
    overflow: auto;
    margin: 0;
    max-height: 600px;
}
.sequenceDetails div {
    margin-top: 15px;
    margin-bottom: 35px;
}

.sequencePoster {
    margin-top: -45px;
    padding-top: 0;
}
.sequencePoster img {
    width: 100%;
}

.newsArticle p, .newsArticle h1, .newsArticle h2, .newsArticle img {
    margin-bottom: 10px;
    padding-top: 5px;
}
.newsArticle img {
    width: 100%;
}

.newsTitle {
    
}
.newsAuthor {
    
}

.newsHeader {
    
}

.meter {
    width: 0%;
    background-color: #0090c5;
    color: white;
}

.meter.success {
    background-color: green;
}

.deliver input {
    width: 100%;
}

.progresscontainer {
    border: 2px black;
    height: 68px;
}
#afile {
    margin-top: 20px;
}
.uploadStart {
    height: 150px;
}
.uploadStart button {
    height: 95px;
    width: 100%;
}

.rehearseDesc p, .rehearseDesc ul {
    font-weight: 600;
    line-height: 1.25em;
    margin-bottom: 15px;
}

.rehearseDesc p, .rehearseDesc h1, .rehearseDesc ul {
    float: none;
    padding-top: 0;
}

.downloadResource {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 500px;
}
.downloadResource button {
    padding: 10px;
}
.downloadResource a {
    text-decoration: none;
    color: white;
}
.rehearseDesc b{
    font-weight: 800;
}

.ozSQ .\36 u {
    height: 616px;
}

.animAsset {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 19%;
    background: #0090C5;
    height: 75px;
    overflow: hidden;
    padding: .25em;
    float: left;
    text-align: center;
    border-radius: 5px;
    margin: 0 1% 1% 0;
}

.animAsset.active {
    background: #8DBBFB;
}

.animAsset a {
    text-decoration: none;
    color: white;
    font-weight: 600;
    
}

.topSelector .sidelink button {
    font-size: 1.25em;
    font-weight: 500;
    background-color: #8264B8;
}

.topSelector .sidelink button.active {
    background-color: #CBBEE1;
    color: white;
}

.topSelector {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    margin-bottom: 5px;
    margin-top: 5px;
}

.topSelector li {
    flex-grow: 1;
    margin: 0 5px 0 5px;
}
.topSelector li a, .topSelector li a button {
    width:100%;
}

.topBox {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.05);
    padding: .5em;
}

.previewAnims {
    height: 500px;
    margin-top: 15px;
    padding: 0;
    display: flex;
    flex-direction: row;
}

.previewAnims .animationSelect {
    height: 95%;
    width: 65%;
    overflow: scroll;
    overflow-x: hidden;
    padding: 0;
    margin-top: 10px;
}

.character {
    display: flex !important;
    flex-direction: row;
    justify-content: space-around;
    height: 100%;
    width: 35%;
    padding: 1%;
    height: 100%;
    
}

.characterSelect {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 25%;
    padding: 2%;
    padding-left: 0;
    overflow: scroll;
    overflow-x: hidden;
}

.characterIcon {
    width: 100%;
    background-color: white;
    border-radius: 5px;
    margin: 2%;
    box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.05);
}
.characterIcon img.active {
    border: 2px solid #8264B8;
    border-radius: 5px;
}
.characterIcon img {
    width: 100%;
}

.viewAnim {
    width: 75%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.viewAnim img {
    flex-grow: 1;
    width: 100%;
    border-radius:5px;
    margin-left: 2%;
}

.characterNameDisplay {
    font-size: 1.5em;
    font-weight: 700;
    padding: 0;
    margin: 0;
    font-family: 'Luckiest Guy', cursive;
}

.characterAnimationDisplay {
    padding: 0;
    margin: 0;
    font-size: 1.25em;
    font-family: 'Luckiest Guy', cursive;
}

.characterIconStart {
    width: 9%;
    box-shadow: 2px 3px 2px 0px rgba(0, 0, 0, 0.05);
}

.startupAnims {
    display: flex;
    flex-driection: row;
    flex-wrap: wrap;
    justify-content: space-around;    
    overflow: scroll;
    overflow-x: hidden;
    text-align: center;
}

.iconName {
    margin-top: -10%;
    margin-bottom: 0;
}

/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #0090C5; 
  border-radius: 10px;
}