@font-face {
	font-family: 'BryantPro';
	src: url('assets/fonts/BryantPro-Light.eot');
	src: url('assets/fonts/BryantPro-Light.woff2') format('woff2'),
	     url('assets/fonts/BryantPro-Light.woff') format('woff'),
	     url('assets/fonts/BryantPro-Light.ttf') format('truetype'),
	     url('assets/fonts/BryantPro-Light.svg#BryantPro-Light') format('svg'),
	     url('assets/fonts/BryantPro-Light.eot?#iefix') format('embedded-opentype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'BryantPro';
	src: url('assets/fonts/BryantPro-Regular.eot');
	src: url('assets/fonts/BryantPro-Regular.woff2') format('woff2'),
	     url('assets/fonts/BryantPro-Regular.woff') format('woff'),
	     url('assets/fonts/BryantPro-Regular.ttf') format('truetype'),
	     url('assets/fonts/BryantPro-Regular.svg#BryantPro-Regular') format('svg'),
	     url('assets/fonts/BryantPro-Regular.eot?#iefix') format('embedded-opentype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'BryantPro';
	src: url('assets/fonts/BryantPro-Medium.otf');
	font-weight: 800;
	font-style: normal;
}

body {
	font-family: 'BryantPro', Helvetica, Arial, sans serif;
	color:#414042;
	background-color: #f6f3ea;
	text-align: center;
}

#topBar {
	height:1.5vh;
	width: 100%;
	position: absolute;
	padding:0;
	top: 0;
	left: 0;
	background: #ea3d57; 
	background: -moz-linear-gradient(to right, #ea3d57, #f47d5d, #f4b42e, #96c447, #2996c1, #6957d4, #207cca, #a22bc3, #c12d89, #ea3d57); /* FF3.6-15 */
	background: -webkit-linear-gradient(to right, #ea3d57, #f47d5d, #f4b42e, #96c447, #2996c1, #6957d4, #207cca, #a22bc3, #c12d89, #ea3d57); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #ea3d57, #f47d5d, #f4b42e, #96c447, #2996c1, #6957d4, #207cca, #a22bc3, #c12d89, #ea3d57); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea3d57', endColorstr='#c12d89',GradientType=0 ); /* IE6-9 */
}

a, a:visited {
	color: #414042;
	text-decoration: none;
	font-weight: bold;
}

#description {
	padding-top:1.5em;
	font-size: 1.2em;
	margin-bottom:1.5em;
}

#help {
	font-size: 1.5em;
	margin-bottom:5em;
	width:80%;
	margin-left:10%;
}

#blob, #phone {
	display: none;
}

#appstore {
	width:50%;
}

/* Community Programs */

.nav-bar {
	display: none;
}

.community-programs-link.desktop {
	display: none;
}

.community-programs-link.mobile {
	display: flex;
	justify-content: center;
	padding-bottom: 2em;
}

.homepage-button.desktop {
	display: none;
}

.main.community {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 1em 1em 1em;
}

img.wonderscopelogo {
	display: block;
	width: 40%;
	margin: 6vh auto 0 auto;
}

img.wonderscopelogo.mobile {
	margin-bottom: 4vh;
}

#community-reading-initiative {
	width: 64%;
	padding: 2em 0 1em 0;
}

#community-reading-initiative img {
	width: 100%;
}

.aspect-ratio {
	position: relative;
	padding-bottom: 56.25%; /* preserve 16:9 aspect ratio */
	height: 0;
}

.aspect-ratio iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.embed-youtube {
	width: 92%; /* match description width */
	padding: 2em 0 2em 0;
}

.description {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 92%;
}

.description p {
	font-size: 1.05em;
	line-height: 1.4em;
	font-weight: 600;
	margin: 1em 0;
}

.description strong {
	font-weight: 800;
}

.la-resources {
	display: flex;
	justify-content: center;
	width: 95%;
	padding: 0.5em 0 2em 0;
}

.la-resources a {
	width: 180px;
	height: auto;
	padding: 0.8em;
}

.la-resources img {
	max-width: 100%;
}

.promo-photos {
	display: flex;
	flex-direction: column;
}

.promo-photos.mobile {
	display: block;
}

.promo-photos.desktop {
	display: none;
}

.promo-photos img {
	width: auto;
	height: auto;
	max-width: 20em;
	max-height: 15em;
	padding: 0.1em;
}

.promo-links {
	display: flex;
	flex-direction: column;
	padding: 1em 0;
}

.promo-links h2 {
	font-size: 1.75em;
}

.promo-links div {
	padding: 1em 0;
}

.promo-links a {
	color: #6957D4;
}

.hashtags {
	display: flex;
	flex-direction: column;
	padding-top: 3em;
	padding-bottom: 1.5em;
	font-size: 1.1em;
}

.video {
	width:100%;
	margin-left: 0;
}

.videoWrapper {
	position: relative;
	padding-bottom: 50%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.miniTitle {
	text-transform: uppercase;
	display: block;
	font-size: 0.9em;
	letter-spacing: 2px;
	padding-bottom: 1em;
	font-weight: bold;
	margin-top: 2em;
}

#contact {
	margin-top: -1em;
	margin-bottom: 2em;
}

.inline {
	display: inline;
}

svg {
	width:50px;
	height:50px;
	display: inline-block;
}

.socialMedia img {
	width: 100%;
	margin-bottom: 2vw;
}

svg:hover {
	-webkit-animation:rainbow 1s infinite;
	-ms-animation:rainbow 1s infinite;
	-o-animation:rainbow 1s infinite;
	animation:rainbow 1s infinite;
}
	@-webkit-keyframes rainbow {
	0% {fill: #ea3d57;}
	12.5% {fill: #f47d5d;}
	25% {fill: #f4b42e;}
	37.5% {fill: #96c447;}
	50% {fill: #2996c1;}
	62.5% {fill: #6957d4;}
	75% {fill: #207cca;}
	87.5% {fill: #a22bc3;}
	100% {fill: #c12d89;}
	}
	@-ms-keyframes rainbow {
	0% {fill: #ea3d57;}
	12.5% {fill: #f47d5d;}
	25% {fill: #f4b42e;}
	37.5% {fill: #96c447;}
	50% {fill: #2996c1;}
	62.5% {fill: #6957d4;}
	75% {fill: #207cca;}
	87.5% {fill: #a22bc3;}
	100% {fill: #c12d89;}
	}
	@-o-keyframes rainbow {
	0% {fill: #ea3d57;}
	12.5% {fill: #f47d5d;}
	25% {fill: #f4b42e;}
	37.5% {fill: #96c447;}
	50% {fill: #2996c1;}
	62.5% {fill: #6957d4;}
	75% {fill: #207cca;}
	87.5% {fill: #a22bc3;}
	100% {fill: #c12d89;}
	}
	@keyframes rainbow {
	0% {fill: #ea3d57;}
	12.5% {fill: #f47d5d;}
	25% {fill: #f4b42e;}
	37.5% {fill: #96c447;}
	50% {fill: #2996c1;}
	62.5% {fill: #6957d4;}
	75% {fill: #207cca;}
	87.5% {fill: #a22bc3;}
	100% {fill: #c12d89;}
	}

.promo-links a:hover {
	-webkit-animation:font-color 1s infinite;
	-ms-animation:font-color 1s infinite;
	-o-animation:font-color 1s infinite;
	animation:font-color 1s infinite;
}
	@-webkit-keyframes font-color {
	0% {color: #ea3d57;}
	12.5% {color: #f47d5d;}
	25% {color: #f4b42e;}
	37.5% {color: #96c447;}
	50% {color: #2996c1;}
	62.5% {color: #6957d4;}
	75% {color: #207cca;}
	87.5% {color: #a22bc3;}
	100% {color: #c12d89;}
	}
	@-ms-keyframes font-color {
	0% {color: #ea3d57;}
	12.5% {color: #f47d5d;}
	25% {color: #f4b42e;}
	37.5% {color: #96c447;}
	50% {color: #2996c1;}
	62.5% {color: #6957d4;}
	75% {color: #207cca;}
	87.5% {color: #a22bc3;}
	100% {color: #c12d89;}
	}
	@-o-keyframes font-color {
	0% {color: #ea3d57;}
	12.5% {color: #f47d5d;}
	25% {color: #f4b42e;}
	37.5% {color: #96c447;}
	50% {color: #2996c1;}
	62.5% {color: #6957d4;}
	75% {color: #207cca;}
	87.5% {color: #a22bc3;}
	100% {color: #c12d89;}
	}
	@keyframes font-color {
	0% {color: #ea3d57;}
	12.5% {color: #f47d5d;}
	25% {color: #f4b42e;}
	37.5% {color: #96c447;}
	50% {color: #2996c1;}
	62.5% {color: #6957d4;}
	75% {color: #207cca;}
	87.5% {color: #a22bc3;}
	100% {color: #c12d89;}
	}

.community-programs-link:hover {
	-webkit-animation:custom 1s infinite;
	-ms-animation:custom 1s infinite;
	-o-animation:custom 1s infinite;
	animation:custom 1s infinite;
}
	@-webkit-keyframes custom {
	0% {filter: hue-rotate(0deg);}
	12.5% {filter: hue-rotate(45deg);}
	25% {filter: hue-rotate(90deg);}
	37.5% {filter: hue-rotate(135deg);}
	50% {filter: hue-rotate(180deg);}
	62.5% {filter: hue-rotate(225deg);}
	75% {filter: hue-rotate(270deg);}
	87.5% {filter: hue-rotate(315deg);}
	100% {filter: hue-rotate(360deg);}
	}
	@-ms-keyframes custom {
	0% {filter: hue-rotate(0deg);}
	12.5% {filter: hue-rotate(45deg);}
	25% {filter: hue-rotate(90deg);}
	37.5% {filter: hue-rotate(135deg);}
	50% {filter: hue-rotate(180deg);}
	62.5% {filter: hue-rotate(225deg);}
	75% {filter: hue-rotate(270deg);}
	87.5% {filter: hue-rotate(315deg);}
	100% {filter: hue-rotate(360deg);}
	}
	@-o-keyframes custom {
	0% {filter: hue-rotate(0deg);}
	12.5% {filter: hue-rotate(45deg);}
	25% {filter: hue-rotate(90deg);}
	37.5% {filter: hue-rotate(135deg);}
	50% {filter: hue-rotate(180deg);}
	62.5% {filter: hue-rotate(225deg);}
	75% {filter: hue-rotate(270deg);}
	87.5% {filter: hue-rotate(315deg);}
	100% {filter: hue-rotate(360deg);}
	}
	@keyframes custom {
	0% {filter: hue-rotate(0deg);}
	12.5% {filter: hue-rotate(45deg);}
	25% {filter: hue-rotate(90deg);}
	37.5% {filter: hue-rotate(135deg);}
	50% {filter: hue-rotate(180deg);}
	62.5% {filter: hue-rotate(225deg);}
	75% {filter: hue-rotate(270deg);}
	87.5% {filter: hue-rotate(315deg);}
	100% {filter: hue-rotate(360deg);}
	}

#follow {
	margin-top: 2em;
}

.bottomRainbow {
	padding-bottom: 5px;
	border-bottom: 5px transparent solid;
	margin-bottom: 2em;
}

.bottomRainbow:hover {
	-webkit-animation:rainbowborder 1s infinite;
	-ms-animation:rainbowborder 1s infinite;
	-o-animation:rainbowborder 1s infinite;
	animation:rainbowborder 1s infinite;
}
	@-webkit-keyframes rainbowborder {
	0% {border-color: #ea3d57;}
	12.5% {border-color: #f47d5d;}
	25% {border-color: #f4b42e;}
	37.5% {border-color: #96c447;}
	50% {border-color: #2996c1;}
	62.5% {border-color: #6957d4;}
	75% {border-color: #207cca;}
	87.5% {border-color: #a22bc3;}
	100% {border-color: #c12d89;}
	}
	@-ms-keyframes rainbowborder {
	0% {border-color: #ea3d57;}
	12.5% {border-color: #f47d5d;}
	25% {border-color: #f4b42e;}
	37.5% {border-color: #96c447;}
	50% {border-color: #2996c1;}
	62.5% {border-color: #6957d4;}
	75% {border-color: #207cca;}
	87.5% {border-color: #a22bc3;}
	100% {border-color: #c12d89;}
	}
	@-o-keyframes rainbowborder {
	0% {border-color: #ea3d57;}
	12.5% {border-color: #f47d5d;}
	25% {border-color: #f4b42e;}
	37.5% {border-color: #96c447;}
	50% {border-color: #2996c1;}
	62.5% {border-color: #6957d4;}
	75% {border-color: #207cca;}
	87.5% {border-color: #a22bc3;}
	100% {border-color: #c12d89;}
	}
	@keyframes rainbowborder {
	0% {border-color: #ea3d57;}
	12.5% {border-color: #f47d5d;}
	25% {border-color: #f4b42e;}
	37.5% {border-color: #96c447;}
	50% {border-color: #2996c1;}
	62.5% {border-color: #6957d4;}
	75% {border-color: #207cca;}
	87.5% {border-color: #a22bc3;}
	100% {border-color: #c12d89;}
	}

#withinlogo {
	display: inline;
	vertical-align: middle;
	height: 40px;
	margin-bottom: 5em;
}

#copyright {
	font-size: 0.8em;
	display: block;
	margin-top:-2em;
	margin-bottom: 5em;
}

h2 {
	padding:0;
	margin:0;
}

.formInput {
	display:block;
	width:100%;
	background-color: #f6f3ea;
	box-sizing: border-box;
	padding:8px;
	border-radius: 24px;
	font-size: 0.6em;
	border: 2px #DAD2C3 solid;
	font-weight: normal;
	font-family: 'BryantPro', Helvetica, Arial, sans serif;
}

.formInput:focus { 
	outline: 0; 
	-webkit-box-shadow: none !important; 
	-moz-box-shadow: none !important; 
	box-shadow: none !important; 
	-webkit-animation:rainbowborder 1s infinite;
	-ms-animation:rainbowborder 1s infinite;
	-o-animation:rainbowborder 1s infinite;
	animation:rainbowborder 1s infinite;
}

.formInput:hover {
	-webkit-animation:rainbowborder 1s infinite;
	-ms-animation:rainbowborder 1s infinite;
	-o-animation:rainbowborder 1s infinite;
	animation:rainbowborder 1s infinite;
}

.formTitle {
	font-size: 0.6em;
	font-weight: bold;
	margin-left:8px;
}

.formPadding {
	margin-top:10px;
}

#zd-description {
	height:20vh;
}

#submit {
	width:100%;
	background-color: #DAD2C3;
	box-sizing: border-box;
	padding:8px;
	border-radius: 24px;
	text-align: center;
	margin-top: 15px;
	font-size: 0.6em;
	font-family: 'BryantPro', Helvetica, Arial, sans serif;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	border: 2px #f6f3ea solid;
}

#submit:hover{
	-webkit-animation:rainbowborder 1s infinite;
	-ms-animation:rainbowborder 1s infinite;
	-o-animation:rainbowborder 1s infinite;
	animation:rainbowborder 1s infinite;
	font-weight: bold;
	box-sizing: border-box;
}

#submit:focus { 
	outline: 0; 
	-webkit-box-shadow: none !important; 
	-moz-box-shadow: none !important; 
	box-shadow: none !important; 
}

#submit-success, #submit-failure, #validation-failure, #email-validation-failure {
	font-size:0.6em;
	padding-top: 10px;
}

#submit-failure, #validation-failure, #email-validation-failure {
	color:red;
}

#contact-form {
	text-align: left;
}

.red {
	color: red;
}

input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0px 9999px #f6f3ea;
}

table {
	width:80%;
	margin-left:10%;
	font-weight: bold;
	font-size: 1.2em;
}

.reviewLogo {
	text-align: center;
	display: block;
	padding: 5px;
	max-width: 100%;
}

#VRScout {
	width: 144px;
}

.reviewQuote{
	text-align: center;
	display: block;
	padding:1em;
	hanging-punctuation: first;
	padding-bottom: 2em;
}

.stars {
	width:20px;
	height:20px;
	padding:2px;
	padding-top:10px;
}

@media only screen and (max-width: 320px) {
	/* Community Programs 320px */

	.main.community {
		padding: 0;
	}

	.embed-youtube {
		width: 84%;
		padding: 2em 0 1em 0;
	}

	.description {
		width: 84%;
	}

	.promo-links {
		padding: 0 0.8em;
	}

	.promo-photos img {
		width: auto;
		height: auto;
		max-width: 17em;
		max-height: 12.75em;
	}

	.la-resources {
		width: 90%;
	}
}

@media only screen and (min-width: 425px) {
	/* Community Programs 425px */

	.wonderscopelogo {
		margin: 8vh auto 0 auto;
	}

	.promo-photos img {
		width: auto;
		height: auto;
		max-width: 22em;
		max-height: 16.5em;
	}

	.la-resources {
		width: 95%;
	}
}

@media only screen and (min-width: 600px) {

	#mainContent {
		width:92vw;
		padding:3vw;
		top:1.3vw;
		left:1vw;
		margin-bottom: 1vw;
	}

	#description {
		padding-bottom: 2vw;
		max-width: 550px;
		position: relative;
		left: 50vw;
		margin-left: -275px;
		font-size: 1.75em;
		margin-bottom:0em;
		z-index: 3;
		margin-top: 1vw;
	}

	#appstore {
		width:30%;
		max-width: 250px;
		min-width: 100px;
		align-self: center;
	}

	#help {
		padding-bottom: 2vw;
		max-width: 400px;
		position: relative;
		left: 50vw;
		margin-left: -200px;
		font-size: 1.75em;
		margin-bottom:5em;
		z-index: 3;
		margin-top: 1vw;
	}

	a, span, img, .miniTitle {
		position: relative;
		z-index: 3;
	}

	#support {
		display: block;
		padding: 1vw;
		padding-top:3vw;
		padding-bottom: 5vw;
	}

	.video {
		width: 80%;
		margin-left: 10%;
	}

	.videoWrapper {
		position: relative;
		padding-bottom: 50%; /* 16:9 */
		padding-top: 25px;
		height: 0;
	}

	.videoWrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	/* Community Programs 600px */

	.wonderscopelogo {
		display: block;
		position: relative;
		z-index: 3;
	}

	.description {
		text-align: justify;
		text-justify: inter-word;
	}
	
	.promo-photos {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.promo-photos.mobile {
		display: none;
	}
	
	.promo-photos.desktop {
		display: block;
	}

	.promo-photos img {
		width: auto;
		height: auto;
		max-width: 16em;
		max-height: 12em;
	}
}

@media only screen and (min-width: 750px) {
	/* Community Programs 750px */

	img.wonderscopelogo {
		width: 27%;
	}

	#community-reading-initiative {
		width: 56%;
		padding: 3em 0 2em 0;
	}

	.embed-youtube {
		width: 81%;
	}

	.description {
		width: 81%;
		text-align: justify;
		text-justify: inter-word;
	}

	.promo-photos img {
		width: auto;
		height: auto;
		max-width: 21em;
		max-height: 15.75em;
	}
}

@media only screen and (min-width: 900px) {
	#blob {
		position: absolute;
		z-index: 0;
		width:87vw;
		left: 5vw;
		margin-top: -15vw;
		display: block;
	
	}

	#phone {
		position: absolute;
		z-index: 0;
		width: 52vw;
		left: 24vw;
		margin-top: -4.5vw;
		display: block;
	}

	.video {
		z-index: 3;
		width:40%;
		margin-left: 30%;
		margin-top:-3%;
	}

	.videoWrapper {
		position: relative;
		padding-bottom: 52.5%; 
		padding-top: 25px;
		height: 0;
	}

	.videoWrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	table {
		width:60%;
		margin-left:20%;
	}

	.reviewLogo {
		text-align: right;
		display: inline-block;
		width: 28%;
	}

	.reviewQuote{
		text-align: left;
		display: inline-block;
		width:63%;
		padding-bottom: 1em;
	}

	/* Community Programs 900px */

	.nav-bar {
		display: flex;
		justify-content: space-between;
		padding: 2em 1em 0 2em;
		margin-bottom: 14em;
	}

	.community-programs-link.mobile {
		display: none;
	}

	.community-programs-link.desktop {
		display: inline-block;
	}

	.homepage-button.desktop {
		display: inline-block;
		width: 255px;
	}

	.wonderscopelogo.mobile {
		display: none;
	}

	img.wonderscopelogo {
		width: 22%;
	}

	.embed-youtube {
		width: 66%;
	}

	.description {
		width: 66%;
	}

	#community-reading-initiative {
		width: 46.2%;
	}
	
	#fastcompany {
		margin-left: -2em;
	}

	.promo-photos img {
		width: auto;
		height: auto;
		max-width: 24em;
		max-height: 18em;
	}
}

@media only screen and (min-width: 1050px) {
	/* Community Programs 1050px */

	img.wonderscopelogo {
		width: 12%;
	}

	#community-reading-initiative {
		width: 26%;
	}

	.embed-youtube {
		width: 36%;
	}

	.description {
		width: 36%;
	}

	.promo-photos img {
		width: auto;
		height: auto;
		max-width: 28em;
		max-height: 21em;
	}
}

@media only screen and (min-width: 2560px) {
	/* Community Programs 2560px */
	img.wonderscopelogo {
		width: 250px;
	}

	.embed {
		width: 30%;
	}
	
	.description {
		width: 30%;
	}
	#community-reading-initiative {
		width: 21%;
	}
}