a {
	text-decoration: none;
	color: #000000;
}
a:visited {
	text-decoration: none;
	color: #000000;
}
html, body {
	overflow-x: hidden;
}
html {
	background: #3ADFCD;
}
button {
	outline: none;
}
.log-in:hover {
	cursor: pointer;
}
@media screen and (min-width: 901px) {
	.sign-up-form-container {
		width: 33%;
	}
}
@media screen and (max-width: 900px) {
	.sign-up-form-container {
		width: 70%;
	}
}
@media screen and (max-width: 420px) {
	.button-group {
		width: 90%;
	}
	.main-heading {
		font-size: 6em;
	}
	.main-sub-heading {
		font-size: 1.5em;
	}
	iframe {
		width: 335px;
		height: 190px;
	}
	.section-header {
		font-size: 1.5em;
		color: #3ADFCD;
	}
	.section-sub-header {
		font-size: 1em;
	}
}
@media screen and (min-width: 421px) {
	.button-group {
		width: 30%;
	}
	.main-heading {
		font-size: 6.5em;
	}
	.main-sub-heading {
		font-size: 1.85em;
	}
	iframe {
		width: 650px;
		height: 365px;
	}
	.section-header {
		text-align: center;
		font-size: 2em;
		color: #3ADFCD;
	}
	.section-sub-header {
		text-align: center;
		font-size: 1.5em;
	}
	.footer-main-content > div:nth-child(2) {
		padding: 25px 50px 0px 50px; 
	}
}

@media screen and (min-width: 801px) {
	div.message-container {
		top: 0px;
	}
	div.message-container > p.message-text {
		line-height: 50px;
	}
	.stack-imgs {
		width: 40%;
	}
	.stack-text {
		width: 60%;
		font-size: 1.5em;
	}
		.stack-text > p {
			font-size: 1.5em;
		}
}

@media screen and (max-width: 800px) {
	div.message-container {
		bottom: 0px;
	}
	div.message-container > p.message-text {
		padding-left: 2.5%;	
		font-size: 10px;
		line-height: 50px;
	}
	.stack-imgs {
		width: 100%;
	}
	.stack-text {
		width: 100%;
		font-size: 1.5em;
	}
		.stack-text > p {
			font-size: 1em;
		}
}

.jagged-break-image {
	position: absolute;
	left: 0px;
	bottom: -1px; 
	width: 100%;
	height: 50px;
	background-position: top;
	z-index: -1;
}
.jagged-break-image-section {
	width: 100%;
	height: 50px;
	background-position: top;
	z-index: -1;
}
.jagged-break-image-section-rev {
	width: 100%;
	height: 50px;
	background-position: top;
	transform: rotate(180deg);
	z-index: -1;
	margin-bottom: 75px;
}
div.message-container {
	position: fixed;
	z-index: 10;
	width: 100%;
	background: #336E7B;
	height: 50px;
	color: #FFFFFF;
	font-family: "Avenir-Heavy";
	font-size: 18px;
}
div.message-container > p {
	float: left;
}
div.message-container > p.message-text {
	padding-left: 2.5%;	
}
div.message-container > p.close-button {
	font-size: 22px;
	line-height: 50px;
	background: rgba(255, 255, 255, 0.25);
	text-align: center;
	height: 100%;
	width: 50px;
	transition: 0.25s all;
}
div.message-container > p.close-button:hover {
	cursor: pointer;
	font-size: 28px;
	background: rgba(255, 255, 255, 0.60);
	transition: 0.25s all;
}
.fixed-image {
	z-index: -2;
	position: fixed;
	background-repeat: repeat;
	height: 100%;
	width: 100%;
	top: 0vw;
	left: 0vw;
	right: 0vw;
	bottom: 0vw;
}
	.social-buttons {
		width: 100%;
	}
		.social-buttons > button {
			font-family: "Avenir-Medium";
			font-size: 100%;
			display: block;
			width: 90%;
			height: 45px;
			margin: 0px auto;
			border-radius: 45px;
			border: none;
			cursor: pointer;
			transition: 0.35s background;
		}
		.facebook-button {
			background: #3B5998;
			color: #FFFFFF;
			opacity: 1.0;
			transition: 0.35s opacity;
		}
		.twitter-button {
			background: #00ACED;
			color: #FFFFFF;
			opacity: 1.0;
			transition: 0.35s opacity;
		}
		.facebook-button:hover {
			background: #3B5998;
			opacity: 0.75;
			transition: 0.35s opacity;
		}
		.twitter-button:hover {
			background: #00ACED;
			opacity: 0.75;
			transition: 0.35s opacity;
		}
	.sign-up-contents > form > h2 {
		text-align: center;
		font-family: "Avenir-Medium";
	}
	.sign-up-contents > form > hr {
		width: 70%;
		margin: 0px auto 25px auto;
		border: none;
		height: 1px;
		background: #000000;
	}
	.sign-up-contents > form > input {
		display: block;
		width: 80%;
		margin: 15px auto 15px auto;
		font-family: "Avenir-Book";
		background: transparent;
		border-left: none;
		border-right: none;
		border-top: none;
		border-bottom: 1px solid #000000;
		outline: none;
		font-size: 14px;
	}
	.social-buttons > h3 {
		text-align: center;
		margin-bottom: 25px;
		font-family: "Avenir-Medium";
	}
	.adjacent-lines {
		width: 70%; 
		height: 12px; 
		border-bottom: 1px solid black; 
		text-align: center;
		margin: 18px auto;
	}
		.adjacent-lines > span {
			font-size: 18px;
			background: #EBEBEB; /* background color needs to be the same as behind adjancent lines div */
			padding: 0 10px;
			font-family: "Avenir-Light";
			text-align: center;

		}
.sign-up-form-container {
	display: table;
}
.sign-up-contents {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
}
.sign-up-contents > form {
	width: 100%;
}
.video-container > iframe {
	display: block;
	margin: 25px auto;
}
.main-jumbotron {
	display: flex;
	position: relative;
	width: 100%;
	height: 110%;
}
.main-jumbotron-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #3ADFCD;
	z-index: -1;
	opacity: 0.55;
}
.main-jumbotron-image {
	position: absolute;
	z-index: -2;
	width: 100%;
	height: 100%;
	background: url(./../images/sketch-underlay-bg.png);
	background-size: cover;
	background-position: center;
}
	.close-form-button {
		display: none;
		color: white;
		position: absolute;
		font-family: "Avenir-Book";
		outline: none;
		font-size: 50px;
		border: 2px solid white;
		transition: 0.35s background;
		width: 60px;
		height: 60px;
		border-radius: 60px;
		cursor: pointer;
		text-align: center;
		z-index: 999;
	}
	.close-form-button:hover {
		transition: 0.35s background;
	}
	.main-jumbotron-cover {
		display: none;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		position: absolute;
		height: 100%;
		width: 100%;
		background: #000000;
		opacity: 0.60;
		z-index: 998;
	}
	.sign-up-form-container {
		position: absolute;
		height: 100%;
		min-width: 250px;
		left: 100%;
		background: #EBEBEB;
		z-index: 999;
	}
	.scroll-down-button {
		font-family: "Avenir-Book";
		outline: none;
		font-size: 60px;
		color: white;
		border: 2px solid white;
		transition: 0.35s background;
		width: 60px;
		height: 60px;
		border-radius: 60px;
		margin: 0px auto;
		cursor: pointer;
		transform: rotate(180deg);
		text-align: center;
		z-index: 7;
	}
	.scroll-down-button:hover {
		transition: 0.35s background;
	}
	.jumbotron-content {
		margin: 0px auto;
		align-self: center;
		width: 100%;
		height: 55%;
	}
		hgroup {
			height: 60%;
			width: 100%;
		}
			.main-heading {
				font-family: "Avenir-Heavy";
				width: 100%;
				color: white;
				text-align: center;
			}
			.main-sub-heading {
				font-family: "Avenir-Light";
				color: white;
				width: 100%;
				text-align: center;
			}
		.button-group {
			margin: 0px auto;
		}
			.button-group > a > button {
				width: 100%;
				background: white;
				text-align: center;
				border: 2px solid white;
				height: 35.5%;
				border-radius: 100px;
				color: #336E7B;
				margin-bottom: 25px;
				transition: 0.35s background;
				font-family: "Avenir-Medium";
				font-size: 1.5em;
			}
			.button-group > a > button:hover {
				cursor: pointer;
				background: #336E7B;
				border-color: #336E7B;
				color: white;
				transition: 0.35s background;
			}
.main-body-content > section {
	padding: 75px 5% 5% 5%;
	background: #FFFFFF;
}
.section-header {
	text-align: center;
	font-family: "Avenir-Heavy";
	color: #000000;
}
.section-sub-header {
	text-align: center;
	font-family: "Avenir-Light";
	color: #000000;
}
.phone-imgs-container {
	width: 100%;
	text-align: center;
}
	.phone-imgs-container > img {
		height: 350px;
		width: 350px;
	}
.stack-imgs-container {
	position: relative;
	overflow: auto;
}
	.stack-component {
		float: left;
	}
		.stack-imgs {
			height: 320px;
		}
			.stack-imgs > img {
				position: absolute;
				width: 200px;
				height: auto;
				display: block;
			}
			#band-card {
				top: 0px;
				left: 20px;
			}
			#hologram-card {
				top: 40px;
				left: 60px;	
			}
			#super-card {
				top: 80px;
				left: 100px;
			}
		.stack-text > p {
			font-family: "Avenir-Light";
		}
.description-icon-container {
	overflow: auto;
}
	.description-icon {
		float: left;
		width: 20%;
	}
		.description-icon > p {
			margin: 0px auto;
		}
		.description-icon > img {
			margin: 0px auto;
		}

ul.errorlist {
	width: 90%;
	margin: 0px auto;
	background: #FF9877;
	text-align: center;
	list-style-type: none;
	padding: 0px;
	right: 10px;
	border-radius: 0px 0px 5px 5px;
}
	ul.errorlist > li {
		font-family: "Avenir-Medium";
		color: #FFFFFF;
	}
#email-login-form > div > input {
    -webkit-appearance: none;
	border: none;
	border-radius: 5px;
	height: 50px;
	font-size: 16px; 
	font-family: "Avenir-Book"; 
	text-align: center; 
	padding: 6px; 
	width: 90%;
	background-repeat: no-repeat;
	background-size: 45px;
	background-position: left;
}
#login-email-field:-webkit-autofill {
	background-color: #FFFFFF !important;
	background-image: url("{% static 'images/email-field-icon.png'%}") !important;
}
#login-password-field:-webkit-autofill {
	background-color: #FFFFFF !important;
	background-image: url("{% static 'images/lock-field-icon.png'%}") !important;
}
#email-login-form > div > input:focus {
	outline: none;
}
@media screen and (max-width: 800px) {
	.section-container {
		display: block;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
}
@media screen and (min-width: 801px) {
	.section-container {
		float: left;
		width: 43%;
	}
}
.section-container {
	padding: 3.5%;
}
.section-container > img {
	display: block;
	width: 100%;
}

@media screen and (max-width: 400px) {
	hgroup > h3.main-sub-heading {
		font-size: 0px;
	}
}
@media screen and (max-width: 710px) {
	.bottom-ting-image {
		transform: rotateY(180deg);
		height: 250px;
		width: 250px;
	}	
}
@media screen and (min-width: 711px) {
	.bottom-ting-image {
		position: absolute;
		right: -120px;
	    bottom: -120px;
	    height: 375px;
		width: 375px;
	}	
}
.join-button {
    font-size: 18px;
	display: block;
	height: 50px;
	line-height: 50px;
	width: 200px;
	font-family: "Avenir-Book";
	border-radius: 50px;
	color: #FFFFFF;
	margin: 25px auto 75px auto;
	border: none;
	transition: 0.35s all;
	font-size: 24px;
}
.join-button > .upper-portion {
	background-color: #306E79;
}
.join-button > .lower-portion {
	background-color: #255059;
}
.join-button:hover {
	cursor: pointer;
}
.bottom-ting-image {
	z-index: 0;
}
.featured-on-graphic {
	object-fit: contain;
	object-position: center;
	display: block;
	margin: 10px auto;
	width: 85%;
}