:root {
	--black: #0D0D0F;
	--white: #fff;
	--light-grey: #F1F1F1;
	--dark-grey: #6C757B;
	--grey: #6C757B;
	--hover: #00A94E;

	--red: #D92027;
	--purple: #A33593;
	--blue: #006EB8;
	--green: #00A94E;
	--yellow: ##F5C828;
	--light-green: ##01BB5F;
	--light-blue: ##019BD4;

	--discord: #5865f2;
	--ct-section-blue: #006ec4;

	--green-to-blue: linear-gradient(90deg, #00AF00 0%, #0059C6 100%);
	--pink-to-red: linear-gradient(90deg, #A33593 0%, #D92027 100%);
	--light-green-to-blue: linear-gradient(90deg, #01BB5F 0%, #019BD4 100%);
	--red-to-yellow: linear-gradient(90deg, #D92027 0%, #F5C828 100%);
	--yellow-to-green: linear-gradient(90deg, #F5C828 0%, #00A94E 100%);
	--blue-to-purple: linear-gradient(90deg, #5865F2 0%, #7E2FCD 100%);
	--black-fade-in: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
	--black-to-blue: linear-gradient(165deg, black, black 40%, #006EC3 300%);
	--black-to-blue-creator-tools: linear-gradient(180deg, black, #006EC3);
	--black-to-green: linear-gradient(165deg, black, black 40%, #00A94E 300%);
	--black-to-purple: linear-gradient(165deg, black, black 40%, #A33593 200%);
	--black-to-red: linear-gradient(165deg, black, black 40%, #D92027 300%);
}

/* attribute selector */
#body [class^='e-col-'] {
	padding: 20px;
}

@media (min-width: 1441px) {
	.e-row {
		max-width: 1400px;
	}
}

.e-no-padding {
	padding: 0 !important;
}

.e-no-padding-left {
	padding-left: 0 !important;
}

.e-no-padding-right {
	padding-right: 0 !important;
}

.e-no-padding-top {
	padding-top: 0 !important;
}

.e-no-padding-bottom {
	padding-bottom: 0 !important;
}

.e-no-margin {
	margin: 0 !important;
}

.e-no-margin-left {
	margin-left: 0 !important;
}

.e-no-margin-right {
	margin-right: 0 !important;
}

.e-no-margin-top {
	margin-top: 0 !important;
}

.e-no-margin-bottom {
	margin-bottom: 0 !important;
}

@media (min-width: 1400px) {
	.e-row {
		width: 97%;
		max-width: 1400px;
	}
}

html {
	width: 100% !important;
	max-width: 100% !important;
	overflow-x: hidden !important;
}

body {
	width: 100% !important;
	max-width: 100% !important;
	overflow-x: hidden !important;
	height: 100vh;
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
	font-family: 'TT Hoves Pro', Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 25px;
	letter-spacing: -0.01em;
}

/* inline styles */

h1 {
	font-size: 66px;
	font-weight: 600;
	line-height: 68px;
	letter-spacing: -0.02em;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

h2,
.standard h1 {
	font-size: 40px;
	font-weight: 600;
	line-height: 40px;
	letter-spacing: -0.02em;
	margin-top: 1rem;
	margin-bottom: 1rem;
	width: 100%;
}

h3,
.standard h2 {
	font-size: 35px;
	font-weight: 600;
	line-height: 42px;
	letter-spacing: -0.01em;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

h4,
.standard h3 {
	font-size: 24px;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: 0em;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

h5,
.standard h4 {
	font-size: 18px;
	font-weight: 600;
	line-height: 23px;
	letter-spacing: -0.01em;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

h6,
.standard h5 {
	font-size: 30px;
	font-weight: 500;
	line-height: 45px;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

h1.subtext {
	font-size: 18px;
	font-weight: 600;
	line-height: 23px;
	letter-spacing: -0.01em;
}

.breadcrumb {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0em;
}

button {
	font-size: 18px;
	font-weight: 600;
	line-height: 27px;
	letter-spacing: 0em;
}

button.small {
	font-size: 14px;
	font-weight: 600;
	line-height: 21px;
	letter-spacing: 0em;
}

small {
	font-size: 14px;
	font-weight: 500;
	line-height: 21px;
	letter-spacing: 0em;
}

b, strong {
	font-weight: 600;
}

a {
	text-decoration: none;
	color: var(--link);
}

a:hover {
	color: var(--hover);
}

img {
	max-width: 100%;
	height: auto !important;
}

small {
	font-size: 0.8em;
}

#body video {
	width: 100%;
	max-width: 100%;
}

	.youtube-responsive {
		border-radius: 3px;
	}
	
	.video-wrapper {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		height: 0;
	}
	
	.video-wrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	td .video-wrapper {
		margin-bottom: 5px;
		margin-right: 5px;
	}

sup {
	font-size: 0.5em;
}

hr {
	border-top: 0px none;
	border-bottom: 3px solid #000;
	border-radius: 0;
	width: 100px;
	margin-left: 0;
	margin-top: 2em;
	margin-bottom: 2em;
}

blockquote {
	background-color: #f0f1f1;
	color: #000;
	margin-left: 0;
	margin-right: 0;
	border-radius: 3px;
	padding: 10px 16px 10px 16px;
}

	blockquote p {
		margin: 0;
		padding: 0;
	}

table {
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
}

	table tr td {
		vertical-align: top;
		text-align: left;
		padding-right: 5%;
	}

iframe {
	max-width: 100%;
}

input:not([type=submit]):not([type=radio]):not([type=checkbox]),
textarea,
select {
	padding: 6px;
	border-radius: 6px;
	border: 1px solid var(--dark-grey);
	min-width: 225px;
	max-width: 95%;
}

.center,
.text-center {
	text-align: center;
}

.right,
.text-right {
	text-align: right;
}

.left,
.text-left {
	text-align: left;
}

.bottom {
	position: absolute;
	bottom: 0;
}

.float-right {
	float: right;
}

.float-left {
	float: left;
}

.inline-block {
	display: inline-block;
}

.clear {
	clear: both;
}

.no-margin { margin: 0; }
.no-margin-top { margin-top: 0; }
.no-margin-bottom { margin-bottom: 0; }
.no-margin-left { margin-left: 0; }
.no-margin-right { margin-right: 0; }

.padded {
	padding-top: 1.25em;
	padding-bottom: 1.25em;
}

	.padded-top {
		padding-top: 1.25em;
	}

	.padded-bottom {
		padding-bottom: 1.25em;
	}

.collapsible-padding {
	padding-bottom: 2.5em;
}

	@media (max-width: 520px) {
		.collapsible-padding {
			padding-bottom: 1.25em;
		}
	}

.btn-1 {
	font-size: 1em;
	line-height: 24px;
	padding: 6px 16px;
	background-color: var(--dark-grey);
	color: #fff;
	border-radius: 25px;
	border: 0px none;
	-webkit-user-select: none;
	user-select: none;
	text-align: center;
	position: relative;
	white-space: nowrap;
	text-decoration: none !important;
}

	.btn-1:hover {
		background-color: var(--light-grey);
		text-decoration: none !important;
	}

.btn-2 {
	font-size: 0.9em;
	line-height: 24px;
	padding: 6px 16px;
	background-color: var(--dark-grey);
	color: #fff;
	border-radius: 20px;
	border: 0px none;
	-webkit-user-select: none;
	user-select: none;
	text-align: center;
	position: relative;
	white-space: nowrap;
	text-decoration: none !important;
}

	.btn-2:hover {
		background-color: var(--light-grey);
		text-decoration: none !important;
	}

.btn-3,
button,
input[type=submit] {
	font-size: 0.8em;
	line-height: 20px;
	padding: 4px 10px;
	background-color: var(--dark-grey);
	color: #fff;
	border-radius: 20px;
	border: 0px none;
	-webkit-user-select: none;
	user-select: none;
	text-align: center;
	position: relative;
	white-space: nowrap;
}

	.btn-3:hover,
	button:hover,
	input[type=submit]:hover {
		background-color: var(--light-grey);
		text-decoration: none !important;
	}

	.btn-no-hover {
		pointer-events: none;
	}

	.btn-black,
	button,
	input[type=submit] {
		background-color: #000;
		color: #fff;
	}

	.btn-black:hover,
	button:hover,
	input[type=submit]:hover {
		background-color: var(--green);
		color: #fff;
	}

	.btn-green {
		background-color: var(--green);
		color: #fff !important;
	}

	.btn-green:hover {
		background-color: var(--dark-grey);
		color: #fff !important;
	}

	.btn-blue,
	button.btn-blue,
	input[type=submit].btn-blue {
		background-color: var(--blue);
		color: #fff !important;
	}

	.btn-blue:hover,
	button.btn-blue:hover,
	input[type=submit].btn-blue:hover {
		background-color: var(--dark-grey);
		color: #fff !important;
	}

	.btn-grey {
		background-color: var(--dark-grey);
		color: #fff;
	}

	.btn-light-alpha {
		background-color: rgba(0,0,0,0.05);
		color: #000;
	}

		.btn-light-alpha:hover {
			background-color: #fff;
			color: #000;
		}

		.btn-light-alpha.active {
			background-color: #fff;
			color: #000;
		}

	.btn-light-grey {
		background-color: var(--light-grey);
		color: #000 !important;
	}

		.btn-light-grey img {
			filter: invert(100%);
		}

		.btn-light-grey:hover {
			background-color: #fff;
			color: #000;
		}

		.btn-light-grey.active {
			background-color: #fff;
			color: #000;
		}

	.btn-grey:hover {
		background-color: var(--green);
		color: #fff;
	}

	.btn-border {
		border: 3px solid #fff;
	}

	.btn-border-hover {
		border: 3px solid transparent;
	}

		.btn-border-hover:hover {
			border: 3px solid #fff;
		}

	.btn-1 img,
	.btn-2 img {
		margin: 0 !important;
		vertical-align: top;
		padding-top: 4px;
		padding-right: 4px;
	}

	.btn-white {
		background-color: #fff;
		color: #000;
	}

	.btn-white:hover {
		background-color: var(--green);
		color: #fff;
	}

	.btn-alpha {
		background-color: rgba(255, 255, 255, 0.3);
		color: #fff;
	}

	.btn-alpha:hover {
		background-color: #fff;
		color: #000;
	}

	.btn-alpha.active {
		background-color: #fff;
		color: #000;
	}

.img-border img {
	border: 4px solid #fff;
	border-radius: 20px;
}

.img-float-left {
	float: left;
	margin: 0;
	padding: 0;
	margin-left: -10em;
}

	.img-border.img-float-left img {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-left: 0;
	}

.img-float-right {
	float: right;
	margin: 0;
	padding: 0;
	margin-right: -10em;
}

.img-border.img-float-right img {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: 0;
}

.text-color-red {
	background-color: var(--purple);
	background-image: var(--pink-to-red);
	background-clip: text;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	text-fill-color: transparent;
	-webkit-text-fill-color: transparent;
	-moz-text-fill-color: transparent;
}

.text-color-green {
	background-color: var(--green);
	background-image: var(--green-to-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	text-fill-color: transparent;
	-webkit-text-fill-color: transparent;
	-moz-text-fill-color: transparent;
}

.text-color-blue {
	color: var(--blue);
}

@media (max-width: 768px) {
	.img-float-left {
		margin-left: -6em;
	}

	.img-float-right {
		margin-left: -6em;
	}
}

.pinned {
	top: 0;
	z-index: 100;
	position: fixed;
	overflow: hidden;
}

.photo-left .e-col-33 {
	padding-right: 25px;
}

.photo-right .e-col-33 {
	padding-left: 25px;
}

.no-margin-top {
	margin-top: 0px !important;
}

.no-margin-bottom {
	margin-bottom: 0px !important;
}

.small {
	font-size: 0.9em;
}

.smaller {
	font-size: 0.8em;
}

.mejs__container,
.mejs__video {
	max-width: 100% !important;
}

/* switch point to mobile nav is anything smaller than 1024 */
	
@media (min-width: 1024px) {
	.desktop-only {
		display: block;
	}

	.mobile-only {
		display: none !important;
	}
}

@media (max-width: 1023px) {
	.desktop-only {
		display: none !important;
	}

	.mobile-only {
		display: block;
	}

	h1 {
		font-size: 40px;
		line-height: 40px;
	}
	
	h2 {
		font-size: 35px;
		line-height: 42px;
	}
	
	h3 {
		font-size: 24px;
		line-height: 28px;
	}
	
	h4 {
		font-size: 24px;
		line-height: 28px;
	}
	
	h5 {
		font-size: 18px;
		line-height: 23px;
	}
	
	h6 {
		font-size: 18px;
		line-height: 23px;
	}
}

/* body styles */

#body ul,
#marketing ul {
	list-style: none;
}

#body ul li,
#marketing ul li {
	position: relative;
	padding-bottom: 0.5em;
}

#body ul li::before,
#marketing ul li::before {
	content: '';
	position: absolute;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
	width: 8px;
	height: 8px;
	top: 13px;
	left: -20px;
	transform: translateY(-50%) rotate(-45deg);
}

@media (max-width: 640px) {
	#marketing td {
		width: 100% !important;
		display: block;
	}
}

/* form styles */

/* docs style fixes */

#docs-body a {
	color: var(--grey);
	text-decoration: underline;
}

#docs-body a:hover {
	color: var(--green);
	text-decoration: none;
}

	#docs-body .button a {
		color: #fff;
		text-decoration: none;
	}

	#docs-body .button a:hover {
		color: #fff;
	}

	#docs-body li a:hover {
		color: var(--green);
	}

	#docs-body .button-blue a {
		background-color: var(--blue);
	}

	#docs-body .button-blue a:hover {
		background-color: var(--green);
	}

/* blog style fixes */

.blog-post h1 {
	font-size: 35px;
	line-height: 42px;
}

.blog-post h2 {
	font-size: 24px;
	line-height: 28px;
}

.blog-post h3 {
	font-size: 24px;
	line-height: 28px;
}

.blog-post h4 {
	font-size: 18px;
	line-height: 23px;
}

.blog-post>h3:first-child,
.blog>h1:first-child {
	font-size: 40px;
	line-height: 40px;
}

.blog-post a {
	color: var(--grey);
	text-decoration: underline;
}

.blog-post a:hover {
	color: var(--green);
	text-decoration: none;
}

.blog-post a.btn-1,
.blog-post a.btn-2 {
	text-decoration: none;
}

.blog-post h1 a,
.blog-post h2 a,
.blog-post h3 a,
.blog-post li a {
	text-decoration: none;
}

.blog-post figure {
	margin-left: 0;
	margin-right: 0;
}

/* creator portal styles */

.dashboard-nav {
	text-align: center;
}

.standard .dashboard-nav a {
	display: inline-block;
	font-size: 0.8em;
	line-height: 24px;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	background-color: #000;
	border-radius: 20px;
	padding: 4px 12px 4px 12px;
	min-width: 70px;
	text-align: center;
	margin-left: 4px;
	margin-right: 4px;
}

	.standard .dashboard-nav a:hover {
		text-decoration: none !important;
		background-color: var(--green);
		color: #fff;
	}

	.standard .dashboard-nav a.current {
		background-color: var(--dark-grey);
	}

.creator-portal a,
.standard a {
	color: var(--grey);
	text-decoration: underline;
}

.standard a:hover,
.creator-portal a:hover {
	color: var(--green);
	text-decoration: none;
}

.creator-portal .btn-1 a,
.creator-portal a.btn-1,
.standard .btn-1 a,
.standard a.btn-1 {
	color: #fff;
	text-decoration: none;
}

.creator-portal .btn-2 a,
.creator-portal a.btn-2,
.creator-portal .btn-2 a,
.standard a.btn-2 {
	color: #fff;
	text-decoration: none;
}

.creator-portal .btn-1 a:hover,
.creator-portal a.btn-1:hover,
.standard .btn-1 a:hover,
.standard a.btn-1:hover {
	color: #fff;
}

.creator-portal .btn-2 a:hover,
.creator-portal a.btn-2:hover,
.standard .btn-2 a:hover,
.standard a.btn-2:hover {
	color: var(--green);
}

/* about page bios */

#marketing .block img.bio-image {
	margin-top: 0;
	width: 95%;
}

.bio-role {
	margin-top: 0.5em;
	font-size: 22px;
}

.bio-links {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

#marketing .block .bio-links a img {
	display: inline-block;
	margin-right: 0.5em;
	margin-top: 0;
	margin-bottom: 0;
}

#marketing .block img.team-bio-image {
	margin-top: 0;
	width: 95%;
}

.team-bio-role {
	margin-top: 0.5em;
	font-size: 21px;
}