.play.button:before,#embed_overlay .copy-button:before,#actions .nav-video:before,#actions .edit:before,#actions .embed:before,.video-dropdown:before {
	font-family:FontAwesome;
	font-weight:normal;
	font-style:normal;
	display:inline-block;
	text-decoration:inherit;
	line-height:1
}
#builder {
	background-color:#F0F2F2;
	border-radius:4px;
	margin:-2em auto .6rem;
	max-width:800px;
	padding:1.8rem 2.4rem;
	text-align:left;
	font-size:90%
}
#builder section {
	margin-right:1.2rem
}
#builder h4 {
	font-size:110%;
	margin:0 0 .6rem
}
#builder label {
	display:block;
	margin-bottom:.3rem
}
@media (max-width:800px) {
	#builder {
		max-width:400px;
		background-color:transparent;
		display:block
	}
	#builder section {
		margin-bottom:2em
	}
}
#main-color {
	min-width:250px
}
#main-color .tint {
	border:2px solid white;
	display:inline-block;
	border-radius:2px;
	cursor:pointer;
	height:3.5em;
	width:3.5em
}
#main-color .tint:hover {
	border-color:transparent
}
#main-color .tint.selected {
	border-color:black
}
#hex-color {
	vertical-align:top;
	border:2px solid #ddd;
	font-size:118%;
	width:6.2em;
	padding-left:.6rem;
	padding-right:0
}
#hex-color:focus {
	border-color:#00ABCD
}
#hex-color.selected {
	border-color:black
}
#custom-logo {
	margin-top:.9rem
}
#custom-logo h4 {
	margin:0 0 .6rem;
	font-size:105%
}
#custom-logo input {
	position:absolute;
	width:360px
}
body {
	background-color:#f9f9f9
}
#footer {
	background-color:white
}
.custom-select {
	background-color:white;
	padding-bottom:.4em;
	padding-top:.4em;
	width:100%
}
.custom-select select {
	font-weight:500
}
.custom-select:after {
	z-index:1;
	top:1em
}
.hgroup {
	margin:2em 0 5em
}
.hgroup h1 {
	margin-bottom:.2rem
}
.hgroup p {
	max-width:800px;
	margin-left:auto;
	margin-right:auto
}
#hero {
	text-align:center
}
#cards {
	max-width:900px;
	margin:5em auto 0;
	text-align:center
}
#cards h2 {
	font-weight:500;
	font-size:160%;
	margin-bottom:1.2rem
}
#cards .card {
	box-shadow:0 .3rem .6rem rgba(0,0,0,0.2);
	background-color:white;
	display:inline-block;
	border-radius:3px;
	overflow:hidden;
	text-align:left;
	transition:.1s;
	cursor:pointer;
	max-width:20em;
	margin:1.8rem
}
#cards .card:hover {
	transform:scale(1.015)
}
#cards .card:active {
	box-shadow:0 0 .6rem rgba(0,0,0,0.2) inset;
	transform:scale(1.005)
}
#cards .card.selected {
	border:5px solid #00ABCD;
	transform:scale(1.015) translateY(4px);
	box-shadow:none;
	cursor:default
}
#cards figure {
	margin:0 -1px;
	height:221px
}
#cards .body {
	padding:1.2rem 1.8rem 1.8rem;
	font-size:90%
}
#cards p {
	color:#6E7B7F
}
@media (max-width:950px) {
	#cards {
		max-width:25em
	}
}
.info {
	margin:30px auto;
	max-width:800px;
	font-size:110%
}
.play.button {
	padding:1.4rem 3rem
}
.play.button:before {
	margin-right:.9rem;
	content:"\f144"
}
.dark-hero .hgroup {
	margin-top:7%
}
.dark-hero #cards {
	margin-top:10%
}
.dark-hero .hgroup>*,.dark-hero #cards h2,.dark-hero #actions a {
	color:white
}
.dark-hero #actions a:before {
	color:rgba(255,255,255,0.6)
}
.dark-hero #actions a:hover {
	color:#A1E0ED
}
#embed_overlay {
	background-color:rgba(0,0,0,0.7);
	overflow:auto;
	display:none;
	top:0;
	text-align:center;
	position:fixed;
	z-index:10;
	height:100%;
	width:100%;
	left:0
}
#embed_overlay>* {
	background-color:#fff;
	display:inline-block;
	border-radius:4px;
	text-align:left;
	max-width:33em
}
#embed_overlay.is-active {
	display:block
}
#embed_overlay .panel {
	box-shadow:0 .6rem 2.4rem rgba(0,0,0,0.6);
	max-width:40em;
	width:40em;
	position:relative;
	margin-top:1%;
	padding:2em 5vw
}
#embed_overlay .close {
	right:1.8rem
}
#embed_overlay header {
	margin-top:1.8rem
}
#embed_overlay header h2 {
	letter-spacing:-1px;
	font-weight:500;
	font-size:155%
}
#embed_overlay pre {
	border-left:3px solid #E4E9EA;
	box-shadow:0 0 .6rem rgba(0,0,0,0.1) inset;
	background-color:rgba(204,204,204,0.1);
	margin-bottom:2.4rem;
	min-height:10em;
	max-height:55vh;
	overflow:auto;
	color:#22829B;
	font-size:80%;
	padding:.9rem
}
#embed_overlay footer {
	font-size:90%;
	text-align:right
}
#embed_overlay .copy-button {
	padding-right:1.2rem;
	padding-left:1.2rem;
	width:14em
}
#embed_overlay .copy-button:before {
	content:"\f0ea";
	padding-right:.4rem;
	color:#00ABCD
}
#embed_overlay .close-button {
	font-weight:400
}
#actions {
	position:relative;
	display:inline-block;
	margin:2em auto 0;
	font-size:90%
}
#actions>a {
	font-weight:500;
	cursor:pointer;
	color:#00ABCD;
	margin:0 .6rem
}
#actions>a:hover {
	color:#006680
}
#actions .nav-video:before {
	content:"\f107";
	padding-right:.4rem;
	color:rgba(0,0,0,0.4)
}
#actions .edit:before {
	content:"\f1cb";
	padding-right:.4rem;
	color:rgba(0,0,0,0.4)
}
#actions .embed:before {
	content:"\f144";
	padding-right:.4rem;
	color:rgba(0,0,0,0.4)
}
.video-dropdown {
	box-shadow:0 .3rem 1.2rem rgba(102,102,102,0.4);
	background-color:white;
	border-radius:3px;
	position:absolute;
	text-align:left;
	padding:.6rem 0;
	font-size:100%;
	display:none;
	top:40px;
	left:-10px;
	z-index:100
}
.video-dropdown:before {
	text-shadow:0 -3px 5px rgba(204,204,204,0.4);
	position:absolute;
	font-size:2.3rem;
	line-height:1;
	color:white;
	left:1.5em;
	top:-22px;
	content:"\f0d8"
}
.video-dropdown:after {
	position:absolute;
	top:-1.6em;
	left:0;
	width:100%;
	height:2rem;
	content:"";
	display:block;
	background-color:transparent
}
.video-dropdown.is-active {
	display:block
}
.video-dropdown h4 {
	margin:0 0 .3rem
}
.video-dropdown div {
	align-items:center;
	padding:.6rem 1.8rem;
	display:flex;
	cursor:pointer
}
.video-dropdown div:hover {
	background-color:#F0F2F2
}
.video-dropdown figure {
	margin:0 1rem -.3rem 0;
	width:9em
}
.video-dropdown label {
	font-weight:500;
	color:#8a9598;
	margin:0
}
.video-dropdown form {
	padding:.6rem 1.8rem .9rem
}
.video-dropdown input {
	width:100%
}
.video-dropdown .subtle {
	white-space:nowrap;
	font-size:90%;
	color: #555e61
}