html {

	height: 100%;
	overflow-y: scroll;
	font-size: 16px;
}

.button.button-primary {

	background: #F44336;
	border-color: #F44336;
	color: #FFFFFF;
	font-family: 'Livvic', sans-serif;
	font-size: 17px;
	font-weight: 700;
	border-radius: 7px;
}

.button.button-primary:hover {

	background: #EA1C0D;
	border-color: #EA1C0D;
	color: #FFFFFF;
}

.the-content {

	line-height: 1.6;
	font-family: 'Roboto Slab', serif;
}

.the-content p {

	font-size: 1.25em;
}

.the-content h1, .the-content .h1,
.the-content h2, .the-content .h2,
.the-content h3, .the-content .h3,
.the-content h4, .the-content .h4,
.the-content h5, .the-content .h5 {

	font-family: 'Livvic', sans-serif;
	font-weight: 700;
}

.the-content .text-emphasis { color: #00796B; }

.the-content h1, .the-content .h1 { font-size: 3.052em; }
.the-content h2, .the-content .h2 { font-size: 2.441em; }
.the-content h3, .the-content .h3 { font-size: 1.953em; }
.the-content h4, .the-content .h4 { font-size: 1.563em; }
.the-content h5, .the-content .h5 { font-size: 1.250em; }

.animable {

	/* opacity */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}

.img-pixel {

	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}

.progress {

	position: fixed;
	width: 100%;
	height: 5px;
	left: 0;
	top: 0;
	z-index: 1;
	background: #FFFFFF;
}

.progress .bar {

	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 100%;
	background: #CC0000;
}

.app-header {

	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 10;
}

.app-footer {

	background: #282923;
	color: #FFFFFF;
}

.app-footer a {

	color: #FFFFFF;
}

.turbochimp-wrap {

	width: 480px;
	margin: 30px auto;
	position: relative;
}

.turbochimp {

	position: relative;
	height: 0;
	padding-bottom: 129.1666%;
	overflow: hidden;
	background: url('../images/turbochimp_off.png') center top no-repeat;
	background-size: 100% 100%;
	/* transition */
	-webkit-transition: background 350ms;
	-o-transition: background 350ms;
	transition: background 350ms;
}

.turbochimp.on {

	background-image: url('../images/turbochimp_on.png');
}

.turbochimp .turbochimp-screen {

	position: relative;
	width: 75%;
	margin: 4.4% auto 0;
	background: #080808;
	padding: 6px;
}

.turbochimp .iframe-wrap {

	position: relative;
	height: 0;
	padding-bottom: 147%;
	overflow: hidden;
}

.turbochimp .iframe-wrap iframe {

	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.cartridges {

	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	min-height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cartridges .cartridge {

	position: relative;
	list-style: none;
	margin: 0 3px;
	padding: 0;
}

.cartridges .cartridge a {

	display: block;
	width: 64px;
	/* transition */
	-webkit-transition: all 250ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
	-o-transition: all 250ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
	transition: all 250ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
}

.cartridges .cartridge.selected a {

	width: 72px;
}

.cartridges .cartridge a img {

	max-width: 100%;
	height: auto;
	display: block;
}

.block.block-padding {

	padding: 60px 0;
}

.block.block-dark {

	background: #DDDDDD;
}

.the-content .hero {

	margin-bottom: 45px;
	font-family: 'Livvic', sans-serif;
	padding: 45px 0;
}

.the-content .hero h1 {

	font-size: 5em;
	margin-bottom: 3px;
	font-weight: 900;
	color: #FFFFFF;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.65);
}

.the-content .hero p {

	font-size: 3em;
	margin-bottom: 0;
	font-weight: 900;
	color: #FFFFFF;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.65);
}

.the-content .lead {

	font-size: 2em;
	font-style: italic;
	color: #777777;
}

.block.block-splash {

	background: #BBDEFB;
	background-size: cover;
	padding-top: 150px;
	min-height: 440px;
}

.block.block-splash .button-scroll {

	display: block;
	position: absolute;
	z-index: 10;
	left: 50%;
	bottom: 0;
	width: 72px;
	height: 64px;
	margin-left: -32px;
	border-radius: 5px 5px 0 0;
	line-height: 72px;
	text-align: center;
	font-size: 35px;
	background: #FFFFFF;
	color: #222222;
}

.block-info .fa {

	margin-bottom: 15px;
	color: #00897B;
}

.block.block-console {

	background: #2F383F url('../images/landing.jpg') center top no-repeat;
	background-size: cover;
	color: #004D40;
}

.canvas-parallax {

	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.bubble {

	background: rgba(255, 255, 255, 0.85);
	border-radius: 12px;
	padding: 15px;
	margin: 0 auto
}

.bubble::before {

	content: '';
	position: absolute;
	right: 20px;
	bottom: -30px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 30px 30px 0;
	border-color: transparent rgba(255, 255, 255, 0.85) transparent transparent;
}

.archie-wrapper {

	display: none;
}

@media (min-width: 768px) {

	.cartridges .cartridge {

		margin: 0 5px;
	}

	.cartridges .cartridge a {

		width: 96px;
	}

	.cartridges .cartridge.selected a {

		width: 128px;
	}
}

@media (min-width: 1000px) {

	.inner {

		width: 1000px;
		margin: 0 auto;
	}

	.bubble {

		width: 60%;
	}

	.archie-wrapper {

		display: block;
		position: absolute;
		top: 280px;
		right: 0;
		z-index: 1;
		pointer-events: none;
		width: 35%;
	}
}

@media (min-width: 1366px) {

	.bubble {

		width: auto;
	}

	.archie-wrapper {

		top: 220px;
		width: 37.5%;
	}
}