/* -------------------------------------------------------------- Euclid Circular B */

@font-face{
	font-family: euclid;
	src: url("fonts/EuclidCircularB-Light-WebS.eot?#iefix");
	src: url("fonts/EuclidCircularB-Light-WebS.eot?#iefix") format("eot"),
		 url("fonts/EuclidCircularB-Light-WebS.woff2") format("woff2"),
		 url("fonts/EuclidCircularB-Light-WebS.woff") format("woff"),
		 url("fonts/EuclidCircularB-Light-WebS.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
}

@font-face{
	font-family: euclid;
	src: url("fonts/EuclidCircularB-Regular-WebS.eot?#iefix");
	src: url("fonts/EuclidCircularB-Regular-WebS.eot?#iefix") format("eot"),
		 url("fonts/EuclidCircularB-Regular-WebS.woff2") format("woff2"),
		 url("fonts/EuclidCircularB-Regular-WebS.woff") format("woff"),
		 url("fonts/EuclidCircularB-Regular-WebS.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
}

@font-face{
	font-family: euclid;
	src: url("fonts/EuclidCircularB-Medium-WebS.eot?#iefix");
	src: url("fonts/EuclidCircularB-Medium-WebS.eot?#iefix") format("eot"),
		 url("fonts/EuclidCircularB-Medium-WebS.woff2") format("woff2"),
		 url("fonts/EuclidCircularB-Medium-WebS.woff") format("woff"),
		 url("fonts/EuclidCircularB-Medium-WebS.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
}

@font-face{
	font-family: euclid;
	src: url("fonts/EuclidCircularB-Semibold-WebS.eot?#iefix");
	src: url("fonts/EuclidCircularB-Semibold-WebS.eot?#iefix") format("eot"),
		 url("fonts/EuclidCircularB-Semibold-WebS.woff2") format("woff2"),
		 url("fonts/EuclidCircularB-Semibold-WebS.woff") format("woff"),
		 url("fonts/EuclidCircularB-Semibold-WebS.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
}

@font-face{
	font-family: euclid;
	src: url("fonts/EuclidCircularB-Bold-WebS.eot?#iefix");
	src: url("fonts/EuclidCircularB-Bold-WebS.eot?#iefix") format("eot"),
		 url("fonts/EuclidCircularB-Bold-WebS.woff2") format("woff2"),
		 url("fonts/EuclidCircularB-Bold-WebS.woff") format("woff"),
		 url("fonts/EuclidCircularB-Bold-WebS.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
}

/* -------------------------------------------------------------- perfect_dos_vga_437_winRg */

@font-face {
	font-family: 'perfect_dos_vga_437_winRg';
	src: url('fonts/perfect_dos_vga_437_win-webfont.woff2') format('woff2'),
		 url('fonts/perfect_dos_vga_437_win-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/* -------------------------------------------------------------- CSS Reset */

html, body, div, span, h1, h2, h3, h4, h5, h6, h7, p, a, img, strong, b, form, label {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

ul,li {
	list-style: none;
}

body {
	line-height: 1;
}

* {
	margin: 0;
	padding: 0;
	background-repeat: no-repeat;
	background-position: center center;-webkit-tap-highlight-color: rgba(0,0,0,0);
}

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

* :focus {outline: none;}

*, * :active {
	-webkit-tap-highlight-color: rgba(0,0,0,0.05);
}

/* -------------------------------------------------------------- Body */

html, body {
	height: 100%;
}

html {
	  overflow-y: scroll; 
}

body {
	-webkit-text-size-adjust: none;
	font-family: 'perfect_dos_vga_437_winRg', Helvetica, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 1em;
	width: 100%;
	height: 100%;
	color: #fbf2ea;
	background-color: #000;
	text-rendering: optimizeLegibility;
	font-variant-ligatures: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.open {
	background-color: #043d78;
}

@media (max-width: 480px) {
	body {
		height: auto;
		min-height: auto;
	}
}

/* -------------------------------------------------------------- Fonts */

b,strong {
	font-weight: 600;
}

p {
	position: relative;
	float: left;
	width: 100%;
	font-size: 1.2em;
	line-height: 1.4em;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

del {
	text-decoration: line-through;
}

a,a:active,a:visited {
	text-decoration: none;
	color: #ff9000;
	-webkit-transition: all .3s;
	transition: all .3s;
}

a:hover {
	color: #ffcf0e;
}

@media (max-width: 768px) {
	p {
		font-size: 1.1em;
	}
}

/* -------------------------------------------------------------- Site */

.site {
	position: relative;
	float: left;
	width: 100%;
}

/* -------------------------------------------------------------- Main */

.main {
	position: relative;
	float: left;
	width: 100%;
	height: auto;
	opacity: 1;
}

.main.open {
	height: 0;
	overflow: hidden;
	opacity: 0;
}

/* -------------------------------------------------------------- Holder */

.holder {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 1680px;
	padding: 0 40px 0 40px;
}

@media (max-width: 768px) {
	.holder {
		max-width: 100%;
		padding: 0 20px 0 20px;
	}
}

/* -------------------------------------------------------------- Header */

header {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 998;
}

header .holder {
	max-width: 1680px;
}

@media (max-width: 960px) {
	header .holder {
		max-width: 500px;
	}
}

/* -------------------------------------------------------------- Notification */

.notification a, .notification a:active, .notification a:visited {
	position: relative;
	float: left;
	width: 100%;
	height: 30px;
	font-size: 1em;
	line-height: 30px;
	color: #fbf2ea;
	text-align: center;
	word-wrap: break-word;
	overflow-wrap: break-word;
	background-color: #000;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease; 
	transition: all 0.3s ease;
}

.notification a:hover {
	color: #ffcf0e;
}

@media (max-width: 960px) {
	.notification a, .notification a:active, .notification a:visited {
		line-height: 28px;
	}
}

/* -------------------------------------------------------------- Top */

.top {
	position: relative;
	float: left;
	width: 100%;
	padding: 15px 0 15px 0;
	text-align: center;
	background: #043d78;
	background: linear-gradient(to bottom, rgba(4,61,120,1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	-o-transition: all .2s;
	-ms-transition: all .2s;
	-moz-transition: all .2s;
	-webkit-transition: all .2s;
	transition: all .2s;
}

@media (max-width: 960px) {
	html:not([data-scroll='0']) .top {
		padding: 10px 0 10px 0;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		-o-transition: all 0.3s ease; 
		transition: all 0.3s ease;
	}
}

/* -------------------------------------------------------------- Logo */

.logo a, .logo a:active, .logo a:visited {
	display: inline-block;
	width: 420px;
	margin: 0 0 -4px 0;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease; 
	transition: all 0.3s ease;
}

.logo img {
	display: block;
	width: 100%;
	height: auto;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
	object-fit: contain;
}

@media (min-width: 1180px) {
	html:not([data-scroll='0']) .logo a, html:not([data-scroll='0']) .logo a:active, html:not([data-scroll='0']) .logo a:visited {
		width: 210px;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		-o-transition: all 0.3s ease; 
		transition: all 0.3s ease;
	}
}

@media (max-width: 1280px) and (min-width: 960px) {
	.logo a, .logo a:active, .logo a:visited {
		float: left;
	}
	
	html:not([data-scroll='0']) .logo a, html:not([data-scroll='0']) .logo a:active, html:not([data-scroll='0']) .logo a:visited {
		width: 210px;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		-o-transition: all 0.3s ease; 
		transition: all 0.3s ease;
	}
}

@media (max-width: 960px) {
	.logo a, .logo a:active, .logo a:visited {
		display: inline-block;
		width: 100%;
		margin: 0 0 11px 0;
	}
	
	html:not([data-scroll='0']) .logo a, html:not([data-scroll='0']) .logo a:active, html:not([data-scroll='0']) .logo a:visited {
		width: 210px;
		margin: 0 0 6px 0;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		-o-transition: all 0.3s ease; 
		transition: all 0.3s ease;
	}
}

/* -------------------------------------------------------------- Buttons */

.buttons {
	position: absolute;
	top: 0;
	right: 35px;
	width: 330px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease; 
	transition: all 0.3s ease;
}

.button {
	float: left;
	width: 33.33%;
	padding: 0 5px 0 5px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease; 
	transition: all 0.3s ease;
}

@media (max-width: 960px) {
	.buttons {
		position: relative;
		float: left;
		display: block;
		top: 0;
		right: 0;
		width: calc(100% + 10px);
		margin: 0 0 0 -5px;
	}
}

/* -------------------------------------------------------------- Button Container */

.button-container {
	float: left;
	width: 100%;
	height: 35px;
}

/* -------------------------------------------------------------- Discord */

.discord a, .discord a:active, .discord a:visited {
	float: left;
	width: 100%;
	font-size: 1.2em;
	line-height: 33px;
	letter-spacing: -.02em;
	color: #000;
	text-shadow: 0 1px 0 #ff9000;
	text-align: center;
	background: #ff9000;
	background: linear-gradient(to bottom, rgba(255,144,0,1) 0%,rgba(255,144,0,1) 50%,rgba(247,96,25,1) 50%,rgba(247,96,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-bottom: 4px solid #000;
	-webkit-box-shadow: inset 0 1px 0 rgba(255,247,78,.75);
	-moz-box-shadow: inset 0 1px 0 rgba(255,247,78,.75);
	box-shadow: inset 0 1px 0 rgba(255,247,78,.75);
}

.discord a:hover {
	margin: 2px 0 0 0;
	background: #ffcf0e;
	background: linear-gradient(to bottom, rgba(255,207,14,1) 0%,rgba(255,207,14,1) 50%,rgba(255,144,0,1) 50%,rgba(255,144,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-bottom: 2px solid #000;
}

@media (max-width: 768px) {
	.discord a, .discord a:active, .discord a:visited {
		font-size: 1.1em;
	}
}

/* -------------------------------------------------------------- Twitter */

.twitter a, .twitter a:active, .twitter a:visited {
	float: left;
	width: 100%;
	font-size: 1.2em;
	line-height: 33px;
	letter-spacing: -.02em;
	color: #000;
	text-shadow: 0 1px 0 #ff9000;
	text-align: center;
	background: #ff9000;
	background: linear-gradient(to bottom, rgba(255,144,0,1) 0%,rgba(255,144,0,1) 50%,rgba(247,96,25,1) 50%,rgba(247,96,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-bottom: 4px solid #000;
	-webkit-box-shadow: inset 0 1px 0 rgba(255,247,78,.75);
	-moz-box-shadow: inset 0 1px 0 rgba(255,247,78,.75);
	box-shadow: inset 0 1px 0 rgba(255,247,78,.75);
}

.twitter a:hover {
	margin: 2px 0 0 0;
	background: #ffcf0e;
	background: linear-gradient(to bottom, rgba(255,207,14,1) 0%,rgba(255,207,14,1) 50%,rgba(255,144,0,1) 50%,rgba(255,144,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-bottom: 2px solid #000;
}

@media (max-width: 768px) {
	.twitter a, .twitter a:active, .twitter a:visited {
		font-size: 1.1em;
	}
}

/* -------------------------------------------------------------- Help */

.faq-button {
	float: left;
	width: 100%;
	font-size: 1.2em;
	line-height: 33px;
	letter-spacing: -.02em;
	color: #000;
	text-shadow: 0 1px 0 #ff9000;
	text-align: center;
	background: #ff9000;
	background: linear-gradient(to bottom, rgba(255,144,0,1) 0%,rgba(255,144,0,1) 50%,rgba(247,96,25,1) 50%,rgba(247,96,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-bottom: 4px solid #000;
	-webkit-box-shadow: inset 0 1px 0 rgba(255,247,78,.75);
	-moz-box-shadow: inset 0 1px 0 rgba(255,247,78,.75);
	box-shadow: inset 0 1px 0 rgba(255,247,78,.75);
	cursor: pointer;
}

.faq-button .close-faq {
	display: none;
}

.faq-button.is-active .close-faq {
	display: block;
}

.faq-button.is-active .open-faq {
	display: none;
}

@media (hover: hover) {
	.faq-button:hover {
		margin: 2px 0 0 0;
		background: #ffcf0e;
		background: linear-gradient(to bottom, rgba(255,207,14,1) 0%,rgba(255,207,14,1) 50%,rgba(255,144,0,1) 50%,rgba(255,144,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		border-bottom: 2px solid #000;
	}
}

@media (max-width: 768px) {
	.faq-button {
		font-size: 1.1em;
	}
}

/* -------------------------------------------------------------- Intro */

.intro {
	margin: 0 auto;
	width: 100%;
	max-width: 700px;
}

.intro h1 {
	float: left;
	width: 100%;
	padding: 20px 0 40px 0;
	font-size: 1.4em;
	line-height: 1.2em;
	text-align: center;
	color: #a3f6fd;
}

@media (max-width: 768px) {
	.intro h1 {
		padding: 10px 0 30px 0;
		font-size: 1.2em;
		line-height: 1.1em;
	}
}

/* -------------------------------------------------------------- Front */

.front {
	position: relative;
	float: left;
	width: 100%;
}

.front .holder {
	max-width: 1680px;
	overflow: hidden;
}

.slider {
	position: relative;
	float: left;
	width: 100%;
}

.items {
	position: relative;
	float: left;
	width: 100%;
	padding-top: 46.15%;
	overflow: hidden;
}

.item {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: opacity .5s ease-in-out;
	opacity: 0;
}

.item.current {
	opacity: 1;
}

.item img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
	object-fit: contain;
}

.navigation {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 991;
}

.next {
	float: right;
	padding: 0 10px 0 10px;
	font-size: 1.2em;
	line-height: 33px;
	letter-spacing: -.02em;
	color: #000;
	text-shadow: 0 1px 0 #ff9000;
	text-align: center;
	background: #ff9000;
	background: linear-gradient(to bottom, rgba(255,144,0,1) 0%,rgba(255,144,0,1) 50%,rgba(247,96,25,1) 50%,rgba(247,96,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-bottom: 4px solid #000;
	-webkit-box-shadow: inset 0 1px 0 rgba(255,247,78,.75);
	-moz-box-shadow: inset 0 1px 0 rgba(255,247,78,.75);
	box-shadow: inset 0 1px 0 rgba(255,247,78,.75);
	cursor: pointer;
}

@media (hover: none) {
	.next {
		border-bottom: 0;
	}
}

@media (hover: hover) {
	.next:hover {
		margin: 2px 0 0 0;
		background: #ffcf0e;
		background: linear-gradient(to bottom, rgba(255,207,14,1) 0%,rgba(255,207,14,1) 50%,rgba(255,144,0,1) 50%,rgba(255,144,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		border-bottom: 2px solid #000;
	}
}

@media (max-height: 960px) and (orientation: landscape) {
	.front .holder {
		max-width: 1280px;
		padding: 0;
		overflow: hidden;
	}
}

@media (max-width: 768px) {
	.front .holder {
		padding: 0;
	}
	
	.items {
		position: relative;
		float: left;
		width: 100%;
		padding-top: 69.2%;
	}
	
	.items img {
		right: -25%;
		left: -25%;
		width: 150%;
	}
	
	.next {
		font-size: 1.1em;
	}
}

/* -------------------------------------------------------------- Bull */

.bull-front {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	animation: 2s reveal ease;
}

.bull-pilot,
.bull-hoodie,
.bull-sheriff,
.bull-racer,
.bull-spaceman {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 990;
}

.bull-pilot {
	background-image: url('bull-pilot.png') !important;
	background-size: cover !important;
}

.bull-hoodie {
	background-image: url('bull-hoodie.png') !important;
	background-size: cover !important;
}

.bull-sheriff {
	background-image: url('bull-sheriff.png') !important;
	background-size: cover !important;
}

.bull-racer {
	background-image: url('bull-racer.png') !important;
	background-size: cover !important;
}

.bull-spaceman {
	background-image: url('bull-spaceman.png') !important;
	background-size: cover !important;
}

@keyframes reveal {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (-webkit-min-device-pixel-ratio: 2) {
	.bull-pilot {
		background-image: url('bull-pilot.png') !important;
		background-size: cover !important;
	}
	
	.bull-hoodie {
		background-image: url('bull-hoodie.png') !important;
		background-size: cover !important;
	}
	
	.bull-sheriff {
		background-image: url('bull-sheriff.png') !important;
		background-size: cover !important;
	}
	
	.bull-racer {
		background-image: url('bull-racer.png') !important;
		background-size: cover !important;
	}
	
	.bull-spaceman {
		background-image: url('bull-spaceman.png') !important;
		background-size: cover !important;
	}
}

/* -------------------------------------------------------------- Columns */

.mint {
	position: relative;
	float: left;
	width: 100%;
	margin: 18px 0 0 0;
}

.columns {
	position: relative;
	float: left;
	width: calc(100% + 20px);
	margin: 0 0 -10px -10px;
}

.column {
	position: relative;
	float: left;
	width: calc(50% - 20px);
	margin: 10px;
}

.mint-stat {
	position: relative;
	float: left;
	width: 100%;
	line-height: 1.4em;
}

.mint-stat:nth-child(even) {
	background-color: #201d24;
}

.mint-subject {
	position: relative;
	float: left;
	color: #06955e;
}

.mint-value {
	position: relative;
	float: right;
}

.mint-stat:first-child {
	font-size: 1.2em;
	text-transform: uppercase;
}

.rarity {
	padding: 0 50px 0 0;
}

.rarity-ratio {
	position: absolute;
	top: calc(50% - 8px);
	right: 0;
	width: 40px;
	height: 16px;
	padding: 8px 0 0 0;
}

.rarity-balanced {
	position: absolute;
	top: 0;
	right: calc(50% - 6px);
	width: 0; 
	height: 0; 
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #fbf2ea;
	z-index: 1;
}

.rarity-high {
	position: absolute;
	top: 0;
	right: 0;
	width: 0; 
	height: 0; 
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #fbf2ea;
	z-index: 1;
}

.rarity-map {
	float: left;
	width: 100%;
	height: 5px;
	background: linear-gradient(to right, rgba(196,34,40,1) 0%,rgba(255,207,14,1) 50%,rgba(11,200,120,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

@media (max-width: 768px) {
	.columns {
		width: 100%;
		margin: 0;
	}
	
	.column {
		float: left;
		width: 100%;
		margin: 10px 0 10px 0;
	}
	
	.mint-stat:first-child {
		font-size: 1.1em;
	}
}

/* -------------------------------------------------------------- About */

.about {
	position: relative;
	float: left;
	width: 100%;
	margin: 18px 0 18px 0;
}

.boxes {
	position: relative;
	float: left;
	width: calc(100% + 20px);
	margin: 0 0 0 -10px;
}

.box {
	position: relative;
	float: left;
	width: calc(25% - 20px);
	margin: 10px;
	padding: 2px;
	background-color: #a3f6fd;
}

.box-title {
	float: left;
	width: 100%;
	padding: 6px 0 4px 0;
	line-height: 1em;
	text-transform: uppercase;
	color: #a3f6fd;
	text-align: center;
	background-color: #000;
	border-bottom: 2px solid #a3f6fd;
}

.box-corner-tl,
.box-corner-tr,
.box-corner-br,
.box-corner-bl {
	position: absolute;
	display: block;
	width: 2px;
	height: 2px;
	background-color: #000;
	z-index: 1;
}

.box-corner-tl {
	top: 0;
	left: 0;
}

.box-corner-tr {
	top: 0;
	right: 0;
}

.box-corner-br {
	right: 0;
	bottom: 0;
}

.box-corner-bl {
	bottom: 0;
	left: 0;
}

.box-content {
	float: left;
	width: 100%;
	padding: 10px;
	border: 2px solid #000;
	background-color: #043d78;
}

.box-content p {
	color: #fbf2ea;
	text-shadow: 0 2px 0 #000;
}

@media (max-width: 1280px) and (min-width: 768px) {
	.about .holder {
		max-width: 1000px;	
	}
	
	.box-row {
		float: left;
		width: 50%;
	}
	
	.box {
		width: calc(100% - 20px);
	}
}

@media (max-width: 768px) {
	.boxes {
		width: 100%;
		margin: 0;
	}
	
	.box {
		float: left;
		width: 100%;
		margin: 10px 0 10px 0;
	}
}

/* -------------------------------------------------------------- Escape */

.whitelist {
	position: relative;
	float: left;
	width: 100%;
}

.whitelist p {
	margin: 0 0 7px 0;
}

/* -------------------------------------------------------------- Enter */

.check a,.check a:active,.check a:visited {
	float: left;
	width: 100%;
	font-family: 'perfect_dos_vga_437_winRg', Helvetica, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 1.2em;
	line-height: 29px;
	letter-spacing: -.02em;
	color: #a3f6fd;
	text-align: center;
	border: 2px solid #a3f6fd;
	border-bottom: 4px solid #a3f6fd;
	background-color: #043d78;
	cursor: pointer;
	-webkit-appearance: none;
	-webkit-font-smoothing: antialiased !important;
	-o-transition: all .2s;
	-ms-transition: all .2s;
	-moz-transition: all .2s;
	-webkit-transition: all .2s;
	transition: all .2s;
	-webkit-border-radius: 0px; 
	-moz-border-radius: 0px; 
	border-radius: 0px;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

@media (hover: hover) {
	.check a:hover {
		margin: 2px 0 0 0;
		border-bottom: 2px solid #a3f6fd;
	}
}

@media (max-width: 768px) {
	.check a,.check a:active,.check a:visited {
		font-size: 1.1em;
	}
}

/* -------------------------------------------------------------- Escape */

.escape {
	float: right;
	padding: 0 10px 0 10px;
	font-size: 1.2em;
	line-height: 29px;
	letter-spacing: -.02em;
	color: #a3f6fd;
	text-align: center;
	border: 2px solid #a3f6fd;
	border-bottom: 4px solid #a3f6fd;
	cursor: pointer;
}

@media (hover: hover) {
	.escape:hover {
		margin: 2px 0 0 0;
		border-bottom: 2px solid #a3f6fd;
	}
}

@media (max-width: 768px) {
	.escape {
		font-size: 1.1em;
	}
}

/* -------------------------------------------------------------- Terminal */

::-webkit-input-placeholder {
	color:#b5bec4;
}

::-moz-placeholder {
	color:#b5bec4;
}

:-ms-input-placeholder {
	color:#b5bec4;
}

input:-moz-placeholder {
	color:#b5bec4;
}

.terminal-logo a, .terminal-logo a:active, .terminal-logo a:visited {
	float: left;
	width: 420px;
}

.terminal-logo img {
	display: block;
	width: 100%;
	height: auto;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
	object-fit: contain;
}

.terminal-control {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	overflow: hidden;
	background: #043d78;
	background: linear-gradient(to bottom, rgba(4,61,120,1) 0%,rgba(4,61,120,.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	-o-transition: all .2s;
	-ms-transition: all .2s;
	-moz-transition: all .2s;
	-webkit-transition: all .2s;
	transition: all .2s;
	z-index: 999;
}

.terminal-top {
	position: relative;
	float: left;
	width: 100%;
	padding: 14px 0 0 0;
}

.terminal-top input {
	float: left;
	width: 100%;
	margin: 14px 0 0 0;
	padding: 0 10px 0 10px;
	font-family: 'perfect_dos_vga_437_winRg', Helvetica, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 1.2em;
	line-height: 35px;
	text-decoration: none;
	color: #fbf2ea;
	border: 0;
	background: rgba(0,0,0,.9);
	-webkit-appearance: none;
	-webkit-font-smoothing: antialiased !important;
	-o-transition: all .2s;
	-ms-transition: all .2s;
	-moz-transition: all .2s;
	-webkit-transition: all .2s;
	transition: all .2s;
	-webkit-border-radius: 0px; 
	-moz-border-radius: 0px; 
	border-radius: 0px;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.terminal {
	position: relative;
	float: left;
	width: 100%;
	height: 0;
	overflow: hidden;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

.terminal-control.open,
.terminal.open {
	height: auto;
	overflow: visible.
}

.terminal-control .holder,
.terminal .holder {
	max-width: 1040px;
}

.examples {
	float: left;
	width: 100%;
	margin: 0 0 14px 0;
	padding: 14px 0 14px 0;
	font-size: 1.1rem;
	line-height: 1.4em;
	text-shadow: 0 2px 0 #000;
	border-bottom: 2px dashed #b5bec4;
}

.examples-description {
	float: left;
	width: 100%;
	color: #fbf2ea;
}

.examples-column {
	float: left;
	width: 33.33%;
}

.example {
	float: left;
	width: 100%;
	color: #fff74e;
}

.scroll-container {
	float: left;
	width: 100%;
	text-align: left;
	overflow-wrap: break-word;
}

.responses {
	float: left;
	width: 100%;
	display: flex;
	flex-direction: column-reverse;
}

.responses span {
	float: left;
	width: 100%;
	padding: 14px 0 14px 0;
	font-size: 1.2em;
	line-height: 1.4em;
	border-bottom: 2px dashed #b5bec4;
}

.user {
	color: #fff74e;
	text-shadow: 0 2px 0 #000;
}

.bot {
	color: #fbf2ea;
	text-shadow: 0 2px 0 #000;
}

@media (max-width: 768px) {
	.terminal-top {
		padding: 10px 0 0 0;	
	}
	
	.terminal-logo a, .terminal-logo a:active, .terminal-logo a:visited {
		width: 210px;
	}
	
	.terminal-top input {
		margin: 10px 0 0 0;
		font-size: 1.1em;	
	}
	
	.examples {
		font-size: 1.1rem;
		margin: 0 0 10px 0;
		padding: 10px 0 10px 0;
	}
	
	.responses span {
		padding: 10px 0 10px 0;
		font-size: 1.1em;
	}
}

/* -------------------------------------------------------------- Bottom */

.bottom {
	position: relative;
	float: left;
	width: 100%;
	padding: 28px 0 56px 0;
}

@media (max-width: 768px) {
	.bottom {
		padding: 14px 0 28px 0;
	}
}

/* -------------------------------------------------------------- iframe */

iframe {
	position: relative;
	float: left;
	width: 100%;
}

/* -------------------------------------------------------------- Footer */

.footer {
	position: relative;
	float: left;
	width: 100%;
	border-bottom: 2px dashed #06955e;
}

/* -------------------------------------------------------------- Social */

.social {
	float: left;
	margin: 0 0 0 -14px;
}

.social a,.social a:active,.social a:visited {
	display: inline-block;
	padding: 10px 14px 10px 14px;
	font-size: 1.2em;
	color: #06955e;
}

.social a:hover {
	color: #0bc878;
}

@media (max-width: 768px) {
	.social {
		width: 100%;
		margin: 0 0 0 -14px;
	}
	
	.social a,.social a:active,.social a:visited {
		font-size: 1em;
	}
}

/* -------------------------------------------------------------- Orange Farm */

.orangefarm {
	float: right;
	margin: 0 -14px 0 0;
}

.orangefarm a,.orangefarm a:active,.orangefarm a:visited {
	display: inline-block;
	padding: 10px 14px 10px 14px;
	font-size: 1.2em;
	color: #06955e;
}

.orangefarm a:hover {
	color: #0bc878;
}

@media (max-width: 768px) {
	.orangefarm {
		float: left;
		width: 100%;
		margin: 0 0 0 -14px;
	}
	
	.orangefarm a,.orangefarm a:active,.orangefarm a:visited {
		font-size: 1em;
	}
}