:root {
	--background-color: #101820;
	--background-color-90: rgba(16,24,32,0.9);
	--background-color-2: #202838;
	--section-background-color: rgba(16, 24, 32, 0.85);
	--section-border-color: #45485a;
	--section-border-radius: 1.5rem;
	--footer-background-color: #101820;
	--text-color: #c4c7da;
	--text-color-2: #9da8d5;
	--text-color-3: #5a6285;
	--bright-text-color: #ebebeb;
	--link-color: rgb(41, 179, 235);
	--primary-font: "Jost", "Helvetica Neue", Helvetica, sans-serif;
	--menu-background-color: #242f44;
	--menu-background-highlight-color: #374868;
	--menu-highlight-color: rgb(41, 179, 235);
	--field-background-color: #161b20;
	--field-text-color: #c4c7da;
	--field-border-color: #656d8a;
    --field-error-color: #f44;
	--nft-background-color: rgb(40, 51, 73);
	--primary-color: rgb(41, 179, 235);
	--primary-contrast-color: #202838;
	--secondary-color: #cc3ea3;
	--secondary-contrast-color: #202838;
	--button-cancel-color: #858fb5;
	--button-cancel-background-color: transparent;
	--button-tertiary-color: #858fb5;
	--button-tertiary-background-color: #2e3747;
	--button-tertiary-background-hover-color: #3e5379;
	--button-tertiary-border-color: #4f699a;
	--table-row-even-color: rgb(36, 42, 54);
	--table-row-odd-color: rgb(40, 51, 73);
	--table-dark-row-odd-color: #171f28; 
	--table-dark-row-even-color: #202836;
	--brand-primary-color: rgb(41, 179, 235);
	--brand-primary-contrast-color: #202838;
	--brand-secondary-color: #cc3ea3;
	--brand-secondary-contrast-color: #fff;
}

* {
	box-sizing: border-box;
}

body {
	background-color: var(--background-color);
	color: var(--text-color);
	font-family: var(--primary-font);
	font-size: 1.2rem;
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-webkit-overflow-scrolling: touch;
	margin: 0;
	padding: 0;
}

/* PAGE LOADING INDICATOR */

body.page-loading {
	overflow: hidden;
	transition: background .5s ease-in-out;
	-moz-transition: background .5s ease-in-out;
	-webkit-transition: background .5s ease-in-out;
}

body.page-loading .page-loading-indicator {
	display: block;
}

.page-loading-indicator {
	display: none;
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	min-height: 100%;
	min-width: 100%;
	background: rgba(0,0,0,0.4);
	text-align:center;
	vertical-align:middle;
	transition: background-color .5s ease-in-out;
	-moz-transition: background-color .5s ease-in-out;
	-webkit-transition: background-color .5s ease-in-out;
}

.page-loading-indicator > div {
	position: absolute;
	top: 50%;
	left: 50%;
	color: var(--brand-primary-color);
}

.page-loading-indicator > div > div {
	position: relative;
	left: -50%;
}

.page-loading-indicator > div > div > i {
	display: block;
}

/* PAGE HEADER */

.top {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 4rem;
	background-color: var(--background-color-90);
	z-index: 40;
}

.top.has-banner {
	height: 8rem;
}

.top-inner {
	position: relative;
	width: 100%;
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
	height: 4rem;
}

.top-inner.wide {
	max-width: 72rem;
}

.top-left {
	position: absolute;
	top: 0;
	left: 1rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 4rem;
}

.top-right {
	position: absolute;
	top: 0;
	right: 1rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 4rem;
}

.stakeaway-logo img {
	height: 2rem;
	vertical-align: middle;
}

.stakeaway-logo.bigger img {
	height: 3rem;
}

.stakeaway-logo.smaller img {
	height: 1.5rem;
}

.stakeaway-logo div {
	display: inline-block;
	font-size: 3rem;
	margin-left: 0.75rem;
	text-align: center;
}

.stakeaway-logo a {
	text-decoration: none;
	color: var(--stakeaway-primary-color);
}

.creator-logo img {
	vertical-align: middle;
	height: 2rem;
}

.logo-divider img {
	margin-left: 0.75rem;
	margin-right: 0.75rem;	
	height: 0.75rem;
}

.top-banner {
	height: 4rem;
}

.top-banner-outer {
	background-color: var(--brand-primary-color);
	color: var(--brand-primary-contrast-color);
	font-weight: 700;
	height: 3rem;
	margin-bottom: 1rem;
	font-size: 1.2rem;
	overflow: hidden;
	position: relative;
}

.top-banner-inner {
	white-space: nowrap;
	position: absolute;
	top: 0;
	left: 0;
	height: 3rem;
	line-height: 3rem;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.4s linear;
	-moz-transition: opacity 0.4s linear;
	-o-transition: opacity 0.4s linear;
	transition: opacity 0.4s linear;
}

.top-banner-inner.visible {
	visibility: visible;
	opacity: 1;
}

@media (max-width: 600px) {
	.top {
		height: 3rem;
	}
	.top.has-banner {
		height: 6rem;
	}
	.top-inner {
		height: 3rem;
	}
	.top-left {
		height: 3rem;
	}
	.top-right {
		height: 3rem;
	}
	.top-banner {
		height: 3rem;
	}
	.top-banner-outer {
		height: 2.25rem;
		margin-bottom: 0.75rem;
	}
	.top-banner-inner {
		height: 2.25rem;
		line-height: 2.25rem;
		font-size: 1rem;
	}
	.stakeaway-logo img {
		height: 1.75rem;
	}
	.stakeaway-logo.bigger img {
		height: 2.6rem;
	}
	.stakeaway-logo.smaller img {
		height: 1.5rem;
	}
	.creator-logo img {
		height: 1.75rem;
	}
}

@media (max-width: 500px) {
	.top {
		height: 2.5rem;
	}
	.top.has-banner {
		height: 5rem;
	}
	.top-inner {
		height: 2.5rem;
	}
	.top-left {
		height: 2.5rem;
	}
	.top-right {
		height: 2.5rem;
	}
	.top-banner {
		height: 2.5rem;
	}
	.top-banner-outer {
		height: 2rem;
		margin-bottom: 0.5rem;
	}
	.top-banner-inner {
		height: 2rem;
		line-height: 2rem;
		font-size: 0.9rem;
	}
	.stakeaway-logo img {
		height: 1.5rem;
	}
	.stakeaway-logo.bigger img {
		height: 2.25rem;
	}
	.stakeaway-logo.smaller img {
		height: 1.5rem;
	}
	.creator-logo img {
		height: 1.5rem;
	}
}

@media (max-width: 425px) {
	.stakeaway-logo img {
		height: 1.25rem;
	}
	.stakeaway-logo.bigger img {
		height: 1.875rem;
	}
	.stakeaway-logo.smaller img {
		height: 1.5rem;
	}
	.creator-logo img {
		height: 1.25rem;
	}
}

@media (max-width: 374px) {
	body {
		font-size: 1rem;
	}
	.top-left {
		left: 0.5rem;
	}
	.top-right {
		right: 0.5rem;
	}
	.logo-divider img {
		margin-left: 0.5rem;
		margin-right: 0.5rem;	
	}
	.top-banner-inner {
		font-size: 0.8rem;
	}
}

/* MENU */

.menu-button {
	visibility: hidden;
	border-radius: 0.4rem;
	padding: 0.3rem 1rem;
	font-family: var(--primary-font);
	font-size: 1.1rem;
	font-weight: 400;
	-webkit-appearance: none;
	-moz-appearance: none;
	outline: none;
	color: var(--primary-color);
	background-color: transparent;
	border: 1px solid var(--primary-color);
}

#change-site-menu-button.menu-button {
	visibility: visible;
}

.mobile-menu {
	display: none;
}

.menu-outer {
	position: relative;
}

.menu-outer + .menu-outer {
	margin-left: 0.5rem;
}

#menu-button.disconnected {
	color: var(--primary-contrast-color);
	background-color: var(--primary-color);
	border: 1px solid var(--primary-color);
}

#menu-bg {
	display: none;
	z-index: 1;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

#menu-bg.visible {
	display: block;
}

.menu {
	display: none;
	position: absolute;
	z-index: 3;
	top: 2.8rem;
	right: 0;
	margin: 0;
	padding: 0;
	min-width: 100%;
	max-height: calc(100vh - 5rem);
	overflow-y: scroll;
	background-color: var(--menu-background-color);
	border-radius: 0.3em;
	line-height: 3rem;
	font-size: 1.1rem;
}

.menu.visible {
	display: block;
}

.menu li {
	position: relative;
	white-space: nowrap;
	list-style-type: none;
}

.menu li span, .menu li a {
	display: block;
	padding: 0 1rem;
	text-decoration: none;
	color: var(--text-color);
}

.menu li span:hover, .menu li a:hover {
	color: var(--menu-highlight-color);
	background-color: var(--menu-background-highlight-color);
}

.menu li span.button, .menu li a.button {
	display: block;
	padding: 0;
	margin: 0 1rem 1rem;
	text-align: center;
	color: #fff;
	font-size: 1.1rem;
}

.menu li + li {
	margin-left: 0;
}

.sub-menu {
	position: absolute;
	top: 0;
	right: calc(100% - 0.2rem);
	margin: 0;
	padding: 0;
	background-color: var(--menu-background-color);
	border-radius: 0.3em;
	line-height: 3rem;
	font-size: 1.1rem;
	max-height: 16.5rem;
	overflow-y: scroll;
	box-shadow: 1px 0px 5px 0px var(--background-color);
	z-index: 4;
	display: none;
}

.menu li:hover .sub-menu, .menu li.selected .sub-menu {
	display: block;
}

/*
@media (max-width: 672px) {
	#change-site-menu-button.menu-button {
		display: none;
	}
	.mobile-menu {
		display: block;
	}
	.menu {
		overflow: visible;
	}
}
*/

@media (max-width: 600px) {
	.menu {
		top: 2.7rem;
		font-size: 1rem;
	}
	.menu-button {
		font-size: 1rem;
		padding: 0.2rem 0.65rem;
	}
}

@media (max-width: 500px) {
	.menu {
		top: 2.35rem;
		font-size: 1rem;
	}
	.menu-button {
		font-size: 0.9rem;
		padding: 0.15rem 0.5rem;
	}
}

@media (max-width: 374px) {
	.menu-button {
		font-size: 0.8rem;
		padding: 0.15rem 0.25rem;
	}
}

/* PAGE FOOTER */

.page-footer {
	width: 100%;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--footer-background-color);
}

.page-footer-inner {
	width: 100%;
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
	height: 4rem;
	line-height: 4rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.page-footer .copyright {
    font-size: 1rem;
    color: var(--primary-color);
    text-align: left;
    font-weight: 400;
	padding-left: 1rem;
}

.page-footer-inner .socials img {
	height: 1.2rem;
	vertical-align: text-top;
	padding-right: 1rem;
	padding-left: 3rem;
	position: relative;
	top: 0.25rem;
}

@media (max-width: 600px) {
	.page-footer-inner {
		height: 3rem;
		line-height: 3rem;
	}
}

@media (max-width: 500px) {
	.page-footer-inner {
		height: 2.5rem;
		line-height: 2.5rem;
	}
}

/* GENERIC PAGE ELEMENTS */

.page-container {
	width: 100%;
	margin-top: 4rem;
	min-height: calc(100vh - 8rem);
	position: relative;
	max-width: 72rem;
	padding: 2rem 1rem;
	margin-left: auto;
	margin-right: auto;
}

.page-container.has-banner {
	margin-top: 8rem;
	min-height: calc(100vh - 12rem);
}

.section-container {
	background-color: var(--section-background-color);
	border: 1px solid var(--section-border-color);
	border-radius: var(--section-border-radius);
	width: 100%;
	max-width: 40rem;
	padding: 2rem;
	margin-left: auto;
	margin-right: auto;
}

.section-container + .section-container {
	margin-top: 2rem;
}

.section-container h2 {
	margin-top: 0;
	margin-bottom: 1.5rem;
}

.section-container h3 {
	margin-bottom: 1.5rem;
}

.page-container h3:first-child {
	margin-top: 0;
}

.section-container .row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.section-container .row + .row {
	margin-top: 0.5rem;
}

.section-container .row.center {
	justify-content: center;
}

.section-container .row.divider {
	border-top: 1px solid #45485a;
	padding-top: 0.75rem;
	margin-top: 0.75rem;
}

.section-container .button {
	margin-top: 1rem;
	margin-bottom: 0rem;
}

@media (max-width: 600px) {
	.page-container {
		margin-top: 3rem;
		min-height: calc(100vh - 6rem);
		padding: 1rem 1rem 2rem;
	}
	.page-container.has-banner {
		margin-top: 6rem;
		min-height: calc(100vh - 9rem);
	}
	.section-container {
		padding: 1.5rem;
	}
}

@media (max-width: 500px) {
	.page-container {
		margin-top: 2.5rem;
		min-height: calc(100vh - 5rem);
	}
	.page-container.has-banner {
		margin-top: 5rem;
		min-height: calc(100vh - 7.5rem);
	}
}

@media (max-width: 374px) {
	.page-container {
		padding: 1rem 0.5rem;
	}
	.section-container {
		padding: 1rem;
	}
}

/* LANDING PAGE */

#landing-top {
	background-color: rgba(16, 24, 32, 0);
}

#landing-top .stakeaway-logo {
	opacity: 0;
}

.landing-page-container {
	width: 100%;
	min-height: calc(100vh - 4rem);
	position: relative;
}

.landing-section {
	max-width: 76rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 2rem;
	padding-right: 2rem;
}

.landing-hero {
	background-image: url('/gfx/landing-hero-bg.jpg');
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.landing-hero .landing-section {
	padding-top: 4rem;
	padding-left: 1rem;;
	padding-right: 1rem;;
}

.landing {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	_align-items: center;
}

.landing-left {
	margin-top: 8rem;
	margin-bottom: 8rem;
	width: 50%;
	max-width: 36rem;
	background-color: rgba(48, 40, 44, 0.52);
	padding: 1rem 3rem;
	border-radius: 2rem;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.landing-right {
	margin-top: 8rem;
	margin-bottom: 8rem;
	text-align: center;
	width: 33.3%;
	max-width: 22rem;
	background-color: var(--background-color-90);
	padding: 1rem 1rem 2rem;
	border-radius: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.landing-main-logo {
	margin: 3rem auto 3rem;
	text-align: left;
}

.landing-main-logo > img {
	width: 22rem;
	max-width: 90%;
}

.landing-heading {
	color: var(--bright-text-color);
	font-family: var(--primary-font) !important;
	font-size: 3rem;
	line-height: 1.4;
	font-weight: bold;
	text-shadow: 0 0 2px #000;
	text-align: left;
	padding-bottom: 3rem;
}

.landing-heading-nft {
	color: var(--brand-primary-contrast-color);
	color: var(--brand-primary-color);
}

.landing-cta-image > img {
	margin-top: 2rem;
	width: 30px;
}

.landing-cta-heading {
	color: var(--bright-text-color);
	font-size: 1.6rem;
	font-weight: 700;
	text-shadow: 0 0 1px #000;
}

.landing-cta-text {
	margin-top: 1rem;
	font-size: 1.4rem;
	font-weight: 400;
	text-shadow: 0 0 1px #000;
}

.landing-sign-up {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.landing-about {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-top: 8rem;
	margin-bottom: 8rem;
}

.landing-about > div:first-child {
	width: 50%;
}

.landing-about > div:last-child {
	width: 40%;
}

.landing-about-headline {
	font-size: 2rem;
	font-weight: bold;
}

.landing-divider {
	margin-top: 2rem;
	margin-bottom: 2rem;
	width: 200px;
	height: 2px;
	background-color: var(--brand-primary-color);
}

.landing-about-subheadline {
	font-weight: bold;
	color: var(--text-color);
}

.landing-about-paragraph {
	margin-top: 1.5rem;
	font-size: 1.4rem;
	color: var(--text-color-2);
}

.landing-em {
	font-weight: 700;
	color: var(--bright-text-color);
}

.landing-about img {
	width: 100%;
}

.landing-features {
	background-image: url('/gfx/features-bg.jpg');
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	padding-top: 8rem;
	padding-bottom: 4rem;
}

.landing-features-heading {
	margin-bottom: 4rem;
	color: var(--text-color);
	font-size: 3rem;
	line-height: 1;
	font-weight: bold;
	text-align: center;
}

.landing-features-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.landing-feature {
	width: calc(50% - 2rem);
	margin-bottom: 4rem;
	background: rgba(0, 0, 0, 0.75);
	border-radius: 1.5rem;
	padding: 2rem;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.landing-feature-heading {
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 1rem;
}

.landing-get-started {
	background-color: var(--background-color);
	text-align: center;
	padding: 8rem 0;
}

.landing-faq {
	background-image: url('/gfx/faq-bg-2.jpg');
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	padding: 8rem 0;
}

.landing-faq-heading {
	margin-bottom: 4rem;
	color: var(--text-color);
	font-size: 3rem;
	line-height: 1;
	font-weight: bold;
	text-align: center;
}

.landing-faq-item {
	background-color: var(--background-color-90);
	border-radius: 0.75rem;
	padding: 1rem 1.5rem;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.landing-faq-item + .landing-faq-item {
	margin-top: 1rem;
}

.landing-faq-q {
	font-weight: bold;
	position: relative;
	margin-right: 3rem;
}

.landing-faq-a {
	display: none;
	height: 0;
	transition: all 0.4s linear;
	padding-top: 0.75rem;
	padding-bottom: 0.25rem;
	margin-right: 3rem;
}

.landing-faq-a a {
	color: var(--brand-secondary-color) !important;
}

.landing-faq-a .landing-divider {
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
	height: 2px;
	visibility: hidden;
}

.landing-faq-toggle:before {
	position: absolute;
	top: 0.1rem;
	right: -3rem;
	color: var(--brand-primary-color);
	content: '\f107';
	font-family: 'Font Awesome 5 Free';
	font-style: normal;
	font-weight: 900;
}

.open .landing-faq-toggle:before {
	content: '\f106';
}

.open .landing-faq-a {
	display: block;
	height: auto;
}

@media (max-width: 1216px) {
	.landing-about > div:first-child {
		width: 60%;
	}
	.landing-about > div:last-child {
		width: 35%;
	}
}

@media (max-width: 1024px) {
	.landing-left {
		margin-top: 6rem;
		margin-bottom: 6rem;
		padding: 1rem;
	}
	.landing-right {
		margin-top: 6rem;
		margin-bottom: 6rem;
		padding: 1rem;
	}
	.landing-main-logo {
		margin: 2rem auto 2rem;
	}
	.landing-heading {
		font-size: 2.7rem;
		padding-bottom: 2rem;
	}
	.landing-cta-heading {
		font-size: 1.5rem;
	}
	.landing-cta-text {
		font-size: 1.2rem;
	}
	.landing-about {
		margin-top: 6rem;
		margin-bottom: 6rem;
	}
	.landing-features {
		padding-top: 6rem;
		padding-bottom: 3rem;
	}
	.landing-features-heading {
		margin-bottom: 3rem;
	}
	.landing-feature {
		margin-bottom: 3rem;
	}
	.landing-get-started {
		padding: 6rem 0;
	}
	.landing-faq {
		padding: 6rem 0;
	}
	.landing-faq-heading {
		margin-bottom: 3rem;
	}
	.landing-about {
		flex-direction: column;
		justify-content: center;
	}
	.landing-about > div:first-child {
		width: 100%;
	}
	.landing-about > div:last-child {
		margin-top: 4rem;
		width: 35%;
	}
}

@media (max-width: 900px) {
	.landing-heading {
		font-size: 2.4rem;
	}
	.landing-cta-heading {
		font-size: 1.3rem;
	}
	.landing-cta-text {
		font-size: 1.1rem;
	}
	.landing-about > div:last-child {
		width: 40%;
	}
}

@media (max-width: 800px) {
	.landing-cta-heading {
		font-size: 1.2rem;
	}
	.landing-about > div:last-child {
		width: 45%;
	}
}

@media (max-width: 768px) {
	.landing-left {
		margin-top: 4rem;
		margin-bottom: 4rem;
		width: 50%;
	}
	.landing-right {
		margin-top: 4rem;
		margin-bottom: 4rem;
		width: 42%;
		max-width: 14rem;
	}
	.landing-heading {
		font-size: 2rem;
	}
	.landing-cta-heading {
		font-size: 1.1rem;
	}
	.landing-cta-text {
		font-size: 1.0rem;
	}
	.landing-about {
		margin-top: 4rem;
		margin-bottom: 4rem;
	}
	.landing-about > div:last-child {
		width: 50%;
	}
	.landing-features {
		padding-top: 4rem;
		padding-bottom: 2rem;
	}
	.landing-features-heading {
		margin-bottom: 2rem;
		font-size: 2.5rem;
	}
	.landing-feature {
		margin-bottom: 2rem;
		padding: 1rem 1.5rem;
		width: calc(50% - 1rem);
	}
	.landing-feature-heading {
		font-size: 1.5rem;
	}
	.landing-get-started {
		padding: 4rem 0;
	}
	.landing-faq {
		padding: 4rem 0;
	}
	.landing-faq-heading {
		margin-bottom: 2rem;
		font-size: 2.5rem;
	}
	.landing-faq-q {
		margin-right: 2rem;
	}
	.landing-faq-a {
		margin-right: 2rem;
	}
	.landing-faq-toggle:before {
		right: -2rem;
	}
}

@media (max-width: 600px) {
	.landing-section {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	.landing-hero .landing-section {
		padding-top: 2rem;
	}
	.landing {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.landing-left {
		margin-top: 2rem;
		margin-bottom: 1rem;
		width: 100%;
		max-width: 20rem;
	}
	.landing-right {
		margin-top: 1rem;
		margin-bottom: 1rem;
		width: 100%;
		max-width: 20rem;
	}
	.landing-main-logo {
		margin: 1rem auto 1rem;
		text-align: center;
	}
	.landing-main-logo > img {
		width: 80%;
		max-width: 16rem;
	}
	.landing-heading {
		padding-bottom: 1rem;
		max-width: 20rem;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}
	.landing-cta-heading {
		max-width: 14rem;
	}
	.landing-about {
		margin-top: 2rem;
		margin-bottom: 2rem;
	}
	.landing-about > div:last-child {
		width: 65%;
	}
	.landing-features {
		padding-top: 2rem;
		padding-bottom: 1rem;
	}
	.landing-features-heading {
		margin-bottom: 2rem;
		font-size: 2rem;
	}
	.landing-features-container {
		flex-direction: column;
	}
	.landing-feature {
		margin-bottom: 1rem;
		width: 100%;
	}
	.landing-get-started {
		padding: 4rem 0;
	}
	.landing-faq {
		padding: 2rem 0;
	}
	.landing-faq-heading {
		margin-bottom: 2rem;
		font-size: 2rem;
	}
	.landing-faq-q {
		font-size: 1.1rem;
	}
	.landing-faq-a {
		font-size: 1.1rem;
	}
}

@media (max-width: 414px) {
	.landing-main-logo {
		margin: 0rem auto 0rem;
	}
	.landing-heading {
		padding-bottom: 0rem;
	}
	.landing-cta-image > img {
		margin-top: 1rem;
	}
	.landing-sign-up {
		margin-top: 2rem;
		margin-bottom: 1rem;
	}
}

/* old stuff below */

.landing-logo {
	margin: 2rem auto 4rem;
	text-align: center;
}

.landing-logo img {
	width: 100%;
	max-width: 384px;
}

.landing-text {
	color: var(--primary-color);
	font-family: var(--primary-font) !important;
	font-size: 2rem;
	text-align: center;
}

.landing-coming-soon {
	margin-top: 4rem;
	text-align: center;
}

.landing-coming-soon img {
	width: 100%;
	max-width: 500px;
}

/* GET STARTED FORM */

.get-started-icon {
	text-align: center;
}

.get-started-icon img {
	width: 50px;
}

.get-started-step-outer {
	margin-top: 1rem;
	margin-bottom: 1rem;
	margin-left: 3rem;
	position: relative;
}

.get-started-step {
	background-color: var(--brand-primary-color);
	color: var(--brand-primary-contrast-color);
	/* 1.92 is 1.2rem (font-size) x 1.6 (line height) */
	width: 1.92rem;
	height: 1.92rem;
	border-radius: 1rem;
	text-align: center;
	font-weight: bold;
}

.get-started-step.inactive {
	background-color: var(--text-color-3);
}

.get-started-step-outer .get-started-step {
	position: absolute;
	left: -3rem;
	top: 0;
}

.get-started-steps {
	display: flex;
	flex-direction: row;
	margin-bottom: 2rem;
}

.get-started-step-separator {
	flex-grow: 1;
	height: 1px;
	background-color: var(--text-color-3);
	margin-top: 0.96rem;
}

.get-started-collections {
	margin-top: 2rem;
	margin-bottom: 2rem;
	display: flex;
	justify-content: space-around;
	flex-direction: column;
}

.get-started-comments {
	height: 4.7rem !important;
}

/* CONNECT WALLET PAGE */

.connect-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.connect-panel {
	max-width: 40rem;
	background-color: var(--background-color);
	padding: 3rem 4rem;
	border-radius: 0.75rem;
	text-align: center;
}

.connect-creator-logo {
	margin-bottom: 3rem;
}

.connect-creator-logo img {
	height: 3rem;
	max-width: 32rem;
}

.connect-powered-by {
	margin-top: 3rem;
	font-size: 0.9rem;
	color: var(--text-color);
}

.connect-stakeaway-logo {
	margin-top: 0.75rem;
}

.connect-stakeaway-logo img {
	height: 2.5rem;
	max-width: 32rem;
}

.connect-copyright {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
	color: var(--text-color-2);
	font-size: 1rem;
}

@media (max-width: 500px) or (max-height: 400px) {
	.connect-panel {
		padding: 1.5rem 2rem;
	}
	.connect-creator-logo {
		margin-bottom: 1.5rem;
	}
	.connect-powered-by {
		margin-top: 1.5rem;
	}
}

/* GENERAL PURPOSE CLASSES */

.clickable {
	cursor: pointer;
}

.center {
	text-align: center !important;
}

.left {
	text-align: left !important;
}

.right {
	text-align: right !important;
}

/* BUTTONS */

.button {
	border-radius: 0.33rem;
	padding: 0.3rem 1rem;
	font-family: var(--primary-font);
	font-size: 1.2rem;
	font-weight: 400;
	-webkit-appearance: none;
	-moz-appearance: none;
	outline: none;
}

a.button {
	text-decoration: none;
	color: var(--brand-primary-contrast-color);
	display: inline-block;
}

div.button {
	display: inline-block;
}

.button.big {
	font-size: 1.8rem;
	font-weight: 700;
	padding: 0.5rem 2.5rem;
}

.button.primary {
	color: var(--brand-primary-contrast-color);
	background-color: var(--brand-primary-color);
	border: 1px solid var(--brand-primary-color);
}

.button.secondary {
	color: var(--brand-secondary-contrast-color);
	background-color: var(--brand-secondary-color);
	border: 1px solid var(--brand-secondary-color);
}

.button.tertiary {
	color: var(--button-tertiary-color);
	background-color: var(--button-tertiary-background-color);
	border-radius: 0.25rem;
	border: none !important;
	font-size: 1rem;
}

.button.cancel {
	background-color: var(--button-cancel-background-color);
	border: 1px solid var(--button-cancel-color);
	color: var(--button-cancel-color);
}

.button:hover {
	opacity: 0.9;
}

.button.tertiary:hover {
	opacity: 1;
	background-color: var(--button-tertiary-background-hover-color);
}

.button.disabled, .button.disabled:hover {
	opacity: 0.5;
}

.buttons {
	text-align: center;
	margin-top: 1rem;
}

.form-field + .buttons {
	margin-top: 0rem;
}

.buttons.two-wide {
	display: flex;
	justify-content: space-between;
}

.buttons.three-wide {
	display: flex;
	justify-content: space-between;
}

.buttons.two-wide .button {
	width: calc(50% - 0.25rem);
}

.buttons.three-wide .button {
	width: calc(33.333% - 0.33rem);
}

.small-button {
	color: var(--brand-primary-color);
	border: solid 1px var(--brand-primary-color);
	border-radius: 0.5rem;
	padding: 0.25rem 0.5rem;
	text-decoration: none;
	cursor: pointer;
	font-size: 1rem;
}

.small-button:hover {
	background-color: var(--brand-primary-color);
	color: var(--brand-primary-contrast-color);
	transition: 0.2s;
}

.small-button + .small-button {
	margin-left: 0.5rem;
}

.copied-outer {
	position: relative;
}

.copied {
	position: absolute;
	width: 5rem;
	left: calc(50% - 2.5rem);
	bottom: 3rem;
	font-size: 0.9rem;
	text-align: center;
	padding: 0.2rem 0.4rem;
	background-color: var(--button-tertiary-color);
	color: var(--button-tertiary-background-color);
	border-radius: 1rem;
	display: none;
}

@media (max-width: 374px) {
	.button.big {
		padding: 0.5rem 1.5rem;
	}
	.button {
		padding: 0.25rem 0.5rem;
	}
	.small-button {
		padding: 0.15rem 0.25rem;
	}
	.small-button + .small-button {
		margin-left: 0.05rem;
	}
}

/* FIELDS */

.modal-form fieldset {
	margin: 0;
	padding: 0;
	border: none;
	overflow: hidden;
}

fieldset.two-columns {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

fieldset.two-columns .form-field {
	width: 49.5%;
}

fieldset.two-columns .form-field:nth-child(odd) {
	margin-right: 0.5%;
}

fieldset.two-columns .form-field:nth-child(even) {
	margin-left: 0.5%;
}

.modal-form .form-field {
	margin-top: 1rem;
}

.form-field {
	position: relative;
	margin-top: 0.5rem;
}

.form-field input[type=text], .form-field input[type=number], .form-field input[type=email], .form-field input[type=password], .form-field textarea {
    transition: all .2s;
    border: 1px solid var(--field-border-color);
    color: var(--field-text-color);
    background-color: var(--field-background-color);
	font-family: var(--primary-font);
    font-size: 1rem;
    padding: 0.5rem 1rem;
    width: 100%;
    border-radius: 0.3rem;
    outline: none;
	height: 2.5rem;
	line-height: 1.5;
}

.form-field input[type=text]:hover, .form-field input[type=number]:hover, .form-field input[type=email]:hover, .form-field input[type=password]:hover, form-field textarea:hover {
    border: 1px solid var(--brand-primary-color);
}

.form-field textarea {
	height: 8rem;
}

.field-desc {
    width: calc(100% - 1rem);
    margin-top: 0.1rem;
	margin-bottom: 0.5rem;
    margin-left: 1rem;
    font-size: 0.75rem;
    color: var(--text-color-2);
    line-height: 1rem;
    min-height: 1rem;
    text-align: left;
}

.form-field.field-error input[type=text], .form-field.field-error input[type=password], .form-field.field-error input[type=email], .form-field.field-error input[type=number] {
    color: var(--field-error-color);
    border: solid 1px var(--field-error-color);
}

.form-field.field-error textarea {
    color: var(--field-error-color);
    border: solid 1px var(--field-error-color);
}

.form-field.field-error select {
    color: var(--field-error-color);
    border: solid 1px var(--field-error-color);
}

.form-field.field-error .field-desc {
    color: var(--field-error-color);
}

.form-field input[type="checkbox"], .form-field input[type="radio"] {
	display: none;
}

.form-field input[type="checkbox"] + label, .form-field input[type="radio"] + label {
	color: var(--text-color-2);
	cursor: pointer;
	text-align: left;
	display: inline-block;
	margin-left: 3rem;
	font-size: 1rem;
}

.form-field input[type="checkbox"] + label span, .form-field input[type="radio"] + label span {
	display: inline-block;
	width: 21px;
	height: 21px;
	margin: -4px 11px 0 -2rem;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid var(--field-border-color);
	border-radius: 0.25rem;
	background-color: var(--field-background-color);
}

.form-field input[type="radio"] + label span {
	border-radius: 11px;
}

.form-field.field-error input[type="checkbox"] + label span, .form-field.field-error input[type="checkbox"]:checked + label span {
	border-color: var(--field-error-color);
}

.form-field.field-error input[type="radio"] + label span, .form-field.field-error input[type="radio"]:checked + label span {
	border-color: var(--field-error-color);
}

.form-field input[type="checkbox"]:checked + label span {
	border: 1px solid var(--brand-primary-color);
	background-color: var(--brand-primary-color);
	font-size: 13px;
	position: relative;
}

.form-field input[type="radio"]:checked + label span {
	border: 1px solid var(--brand-primary-color);
	background-color: var(--brand-primary-color);
	font-size: 13px;
	position: relative;
}

.form-field input[type="checkbox"]:checked + label span:after, .form-field input[type="radio"]:checked + label span:after {
	position: absolute;
	content: "";
	display: block;
	left: 5.5px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid 0px var(--brand-primary-contrast-color);
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	--ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.form-field select {
	display: inline-block;
	transition: all .2s;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	border: 1px solid var(--field-border-color);
	font-size: 1rem;
	font-weight: 400;
	border-radius: 0.5rem;
	color: var(--field-text-color);
	padding: 0.5rem 1rem;
	width: 100%;
	background-color: var(--field-background-color);
	height: 2.5rem;
	line-height: 1.5;
}

.form-field select:required:invalid {
	color: gray;
}

.form-field option[value=""][disabled] {
	color: gray;
}

.form-field option {
	color: var(--field-text-color);
}

.form-field select:hover {
	border: 1px solid var(--brand-primary-color);
}

.form-field.select:before {
	color: var(--field-border-color);
	content: '\f107';
	font-family: 'Font Awesome 5 Free';
	font-style: normal;
	font-weight: 900;
	font-size: 1rem;
	line-height: 1rem;
	text-decoration: inherit;
	position: absolute;
	right: 0.75rem;
	top: calc(0.9rem);
}

.form-field.select select {
	padding-right: 1.75rem;
}

.field-title {
}

.field-text {
	font-size: 1rem;
	color: var(--text-color-2);
}

/* SWITCH */

.form-field-switch {
	position: relative;
	top: 3px;
	display: inline-block;
}

input[type="checkbox"].ios-switch {
	position: absolute;
	opacity: 0;
}

/* Normal Track */
input[type="checkbox"].ios-switch + div {
	vertical-align: middle;
	width: 40px;	height: 20px;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 999px;
	background-color: rgba(128, 128, 128, 1);
	-webkit-transition-duration: .4s;
	-webkit-transition-property: background-color, box-shadow;
	box-shadow: inset 0 0 0 0px rgba(0,0,0,0.2);
	box-sizing: initial;
}

/* Checked Track (Blue) */
input[type="checkbox"].ios-switch:checked + div {
	width: 40px;
	background-position: 0 0;
	background-color: #4175c4;
	border: 1px solid #0e62cd;
	box-shadow: inset 0 0 0 10px rgba(65,117,196,1);
}

/* Tiny Track */
input[type="checkbox"].tinyswitch.ios-switch + div {
	width: 34px;	height: 18px;
}

/* Big Track */
input[type="checkbox"].bigswitch.ios-switch + div {
	width: 50px;	height: 25px;
}

/* Green Track */
input[type="checkbox"].green.ios-switch:checked + div {
	background-color: #00e359;
	border: 1px solid rgba(0, 162, 63,1);
	box-shadow: inset 0 0 0 10px rgba(0,227,89,1);
}

input[type="checkbox"].brand.ios-switch:checked + div {
	/*background-color: rgb(41, 179, 235);*/
	background-color: var(--brand-primary-color);
	/*border: 1px solid rgba(28, 124, 163, 1);*/
	border: 1px solid var(--brand-primary-color);
	/*box-shadow: inset 0 0 0 10px rgba(41, 179, 235, 1);*/
	box-shadow: inset 0 0 0 10px var(--brand-primary-color);
}

/* Normal Knob */
input[type="checkbox"].ios-switch + div > div {
	float: left;
	width: 18px; height: 18px;
	border-radius: inherit;
	background: #ffffff;
	-webkit-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
	-webkit-transition-duration: 0.4s;
	-webkit-transition-property: transform, background-color, box-shadow;
	-moz-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
	-moz-transition-duration: 0.4s;
	-moz-transition-property: transform, background-color;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 0px 0 1px rgba(0, 0, 0, 0.2);
	pointer-events: none;
	margin-top: 1px;
	margin-left: 1px;
}

/* Checked Knob (Blue Style) */
input[type="checkbox"].ios-switch:checked + div > div {
	-webkit-transform: translate3d(20px, 0, 0);
	-moz-transform: translate3d(20px, 0, 0);
	background-color: #ffffff;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 0px 0 1px rgba(8, 150, 172,1);
}

/* Tiny Knob */
input[type="checkbox"].tinyswitch.ios-switch + div > div {
	width: 16px; height: 16px;
	margin-top: 1px;
}

/* Checked Tiny Knob (Blue Style) */
input[type="checkbox"].tinyswitch.ios-switch:checked + div > div {
	-webkit-transform: translate3d(16px, 0, 0);
	-moz-transform: translate3d(16px, 0, 0);
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 0px 0 1px rgba(38, 120, 142,1);
}

/* Big Knob */
input[type="checkbox"].bigswitch.ios-switch + div > div {
	width: 23px; height: 23px;
	margin-top: 1px;
}

/* Checked Big Knob (Blue Style) */
input[type="checkbox"].bigswitch.ios-switch:checked + div > div {
	-webkit-transform: translate3d(25px, 0, 0);
	-moz-transform: translate3d(16px, 0, 0);
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1), 0px 0px 0 1px rgba(8, 150, 172,1);
}

/* Green Knob */
input[type="checkbox"].green.ios-switch:checked + div > div {
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 162, 63,1);
}

input[type="checkbox"].brand.ios-switch:checked + div > div {
	/*box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(28, 124, 163, 1);*/
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--brand-primary-contrast-color);
}

/* FILE UPLOAD */

.file-upload-button-parent {
	position: relative;
}
.file-upload-button-parent input[type=file] {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	cursor: pointer;
}
.file-upload-text {
	display: inline-block;
	white-space: nowrap;
	padding: 0.5rem 0 0 1rem;
	font-size: 1.1rem;
	vertical-align: top;
	position: absolute;
}

/* TEXT */

.primary-color {
	color: var(--brand-primary-color) !important;
}

h2 {
	margin: 3rem 0;
	letter-spacing: 0;
	text-align: center;
	color: var(--brand-secondary-color);
	font-family: var(--primary-font);
	font-size: 1.5rem;
	font-weight: 600;
	text-transform: uppercase;
}

h3 {
	font-size: 1.2rem;
	font-weight: 600;
	margin: 2rem 0;
	letter-spacing: 0;
	text-align: center;
	color: var(--brand-secondary-color);
	font-family: var(--primary-font);
	text-transform: uppercase;
}

h3.big {
	font-size: 1.5rem;
}

.note {
	font-size: 1rem;
	color: var(--text-color-2);
	margin-left: auto;
	margin-right: auto;
	margin-top: 1rem;
	margin-bottom: 1rem;
	text-align: center;
	font-weight: 400;
}

.note:first-child {
	margin-top: 0;
}

.note.error {
	color: #f44;
}

.link, a, a:visited, a:active {
	color: var(--link-color);
	text-decoration: underline;
	cursor: pointer;
}

.link.brand-link {
	color: var(--brand-primary-color);
}

.link.small-link {
	font-size: 1rem;
}

.wallet-address {
	font-size: 1rem !important;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
}

.row + .wallet-address, .row.gaptop {
	margin-top: 1rem !important;
}

.message {
	margin-top: 1rem;
	text-align: center;
	font-size: 1.2rem;
	font-weight: 300;
	color: var(--text-color-2);
}

.modal-body > .message:first-child {
	margin-top: 0rem;
	margin-bottom: 2rem;
}

.info {
	background-color: var(--brand-primary-color);
	color: var(--brand-primary-contrast-color);
	display: inline-block;
	width: 1.3rem;
	border-radius: 0.65rem;
	font-weight: bold;
	line-height: 1.3;
	cursor: help;
}

@media (max-width: 500px) {
	.wallet-address {
		font-size: 0.8rem !important;
	}
}

@media (max-width: 374px) {
	.wallet-address {
		font-size: 0.7rem !important;
	}
}

/* TABLES */

table.standard-table {
	width: 100%;
	border-collapse: collapse;
}

table.standard-table tbody tr.odd {
	background-color: var(--table-row-odd-color)!important;
}

table.standard-table tbody tr.even {
	background-color: var(--table-row-even-color)!important;
}

table.dark-table tbody tr.odd {
	background-color: var(--table-dark-row-odd-color)!important;
}

table.dark-table tbody tr.even {
	background-color: var(--table-dark-row-even-color)!important;
}

table.standard-table th {
	text-align: left;
	font-family: var(--primary-font);
	font-size: 1rem;
	font-weight: 400;
	color: var(--text-color-2);
	padding: 0.25rem 0.2rem 1rem;
}

table.standard-table td {
	text-align: left;
	font-family: var(--primary-font);
	font-size: 1rem;
	font-weight: 300;
	color: var(--text-color);
	padding: 0.2rem 0.2rem 0.2rem;
}

table.standard-table td a, table.standard-table td a:visited, table.standard-table td a:active {
	color: var(--text-color);
}

table.standard-table th.center, table.standard-table td.center {
	text-align: center;
}

table.standard-table th.right, table.standard-table td.right {
	text-align: right;
}

table.fixed-table {
	table-layout: fixed;
}

table.fixed-table td {
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: top;
}

table.dark-table td, table.dark-table th {
	padding: 0.75rem;
}

table.dark-table tr.disabled td:not(.col-action) {
	color: var(--text-color-3);
}

.col-action {
	width: 4rem;
	white-space: nowrap;
	text-align: right !important;
}

.col-staked {
	min-width: 4rem;
}

.col-balance {
	min-width: 4rem;
}

.col-icon {
	width: 2rem;
}

.col-icon i {
	vertical-align: baseline;
}

.button.tertiary {
	border-radius: 0.25rem;
	border: none !important;
	font-size: 1rem;
}

.action-icon {
	font-size: 1rem;
	color: var(--button-tertiary-color) !important;
	background-color: var(--button-tertiary-background-color);
	border: solid 1px var(--button-tertiary-border-color);
	border-radius: 3px;
	padding: 3px 4px;
}

.action-icon:hover {
	background-color: var(--button-tertiary-background-hover-color);
}

.action-icon.hidden {
	opacity: 0.4;
}

.action-icon.hidden:hover {
	background-color: var(--button-tertiary-background-color);
}

.action-icon + .action-icon {
	margin-left: 0.25rem;
}

.action-icon-divider {
	display: inline-block;
	border: solid 1px var(--button-tertiary-border-color);
	width: 0;
	height: 1.6rem;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	vertical-align: bottom;
	opacity: 0.25;
}

table.fixed-height {
	display: inline-block;
	max-height: 32rem;
	overflow-y: scroll;
	width: auto;
}

table.fixed-height th {
	background-color: var(--section-background-color);
	position: sticky;
	top: 0;
}

@media (max-width: 600px) {
	th.action-icon {
		width: 3rem;
	}
}

@media (max-width: 500px) {
	.col-icon i {
		vertical-align: top;
	}
}

@media (max-width: 374px) {
	th.action-icon {
		width: 2rem;
	}
}

/* COOKIE MESSAGE */

.bottom-message {
	display: none;
	position: fixed;
	padding: 0.25rem;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	text-align: center;
	background-color: var(--background-color-2);
	font-size: 1rem;
}

/* MODALS */

.modal-open {
	overflow: hidden;
}
.modal-open .modal {
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
}
.modal-inner {
	position: relative;
	width: auto;
	height: auto;
	border: none;
	border-radius: 0.75rem;
	background-color: var(--background-color-2);
	opacity: 1;
	max-width: 35rem;
	padding: 2rem;
	margin: 1rem auto;
}
.modal-wide .modal-inner {
	max-width: 55rem;
}
.modal-title {
	height: 3rem;
	line-height: 3rem;
	overflow: hidden;
	font-weight: 600;
	font-size: 1.5rem;
	position: absolute;
	top: 1rem;
	left: 2rem;
	right: 2rem;
}
.modal-title-text {
	max-width: calc(100% - 2rem);
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin-right: 2rem;
	color: var(--brand-secondary-color);
	text-transform: uppercase;
}
.modal-icon {
	float: right;
	cursor: pointer;
	position: relative;
	color: var(--text-color-2);
	font-size: 1.4rem;
	padding: 0 0.5rem;
	z-index: 1;
}
.modal-icon:hover {
	color: var(--brand-primary-color);
}
.modal-body {
	padding: 3rem 0 0;
	width: 100%;
	height: 100%;
}
#modal-underlay {
	display: none;
	position: fixed;
	background-color: rgba(0, 0, 0, 0.7);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
@media (max-width: 32rem) {
	.modal-title {
		top: 0rem;
		left: 1rem;
		right: 1rem;
		font-size: 1.3rem;
	}
	.modal-title-text {
		max-width: calc(100% - 1rem);
		margin-right: 1rem;
	}
	.modal-inner {
		margin: 1rem 1rem;
		padding: 1rem;
	}
}

/* NOTIFICATIONS */

#notifications {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 200000;
}

.notification {
	opacity: 1;
	min-width: 19rem;
	border: solid 1px rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	display: none;
	position: relative;
	cursor: default;
}

.notification_top {
	width: 100%;
	height: 2.5rem;
	position: relative;
}

.notification_top_bg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	/*background-color: rgba(255, 255, 255, 0.75);*/
	background-color: rgba(48, 48, 48, 0.75);
	background: linear-gradient(rgba(48, 48, 48, 0.75), rgba(32, 32, 32, 0.75));
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.notification_top_fg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-top: 1px solid rgba(64, 64, 64, 0.75);
	border-right: 1px solid rgba(48, 48, 48, 0.75);
	border-left: 1px solid rgba(56, 56, 56, 0.75);
}

.notification_bottom {
	width: 100%;
	height: 2.5rem;
	position: relative;
}

.notification_bottom_bg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	background-color: rgba(16, 16, 16, 0.75);
	background: linear-gradient(rgba(32, 32, 32, 0.75), rgba(16, 16, 16, 0.75));
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.notification_bottom_fg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	border-right: 1px solid rgba(40, 40, 40, 0.75);
	border-left: 1px solid rgba(48, 48, 48, 0.75);
	border-bottom: 1px solid rgba(32, 32, 32, 0.75);
}

.notification_text {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	color: white;
	margin-left: 3.5rem;
	margin-right: 0.5rem;
	font-size: 1rem;
	text-shadow: 1px 1px 1px rgba(0,0,0,1);
	overflow: hidden;
}

.notification_icon {
	position: absolute;
	top: 0;
	left: 0.5rem;
	bottom: 0;
	width: 2.5rem;
	color: white;
	font-size: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.notification_error {
	color: #f44;
}

.notification_okay {
	color: #7b9;
}

.notification_warn {
	color: #fa4;
}

.notification_info {
	color: #2af;
}

.notification_neutral {
	color: #fff;
}

.notification + .notification {
	margin-top: 0.5rem;
}

@media (max-width: 400px) {
	#notifications {
		left: 0.5rem;
		right: 0.5rem;
		bottom: 1rem;
	}
}

/* DASHBOARD */

.dashboard-container {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: stretch;
	margin-left: -1rem;
	margin-right: -1rem;
	width: calc(100% + 2rem);
}

.dashboard-item {
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 2rem;
	position: relative;
	width: 10rem;
	background-color: var(--menu-background-color);
	color: var(--link-color);
	border-radius: 1rem;
	border: solid 1px var(--section-border-color);
	text-align: center;
}

.dashboard-item > a {
	display: block;
	padding: 1rem;
}

.dashboard-item-image {
	font-size: 2rem;
	padding-bottom: 1rem;
}

.dashboard-item:hover {
	background-color: var(--menu-background-highlight-color);
}

.dashboard-container a {
	text-decoration: none;
}

.dashboard-bullet {
	margin: 2rem auto;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: var(--link-color);
}

.dashboard-notice {
	margin-top: 4rem;
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
	border: solid 1px var(--section-border-color);
	border-radius: 1rem;
	padding: 2rem 4rem;
	background-color: var(--menu-background-color);
}

.dashboard-big {
	color: var(--brand-secondary-color);
	font-size: 2rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

/* NAV AREA */

.nav-container {
	margin-top: 0rem;
	padding-bottom: 0rem;
}

.back-container {
	float: left;
	font-size: 1rem;
	line-height: 2.5rem;
}

.back-container a {
	text-decoration: none;
}

.buttons-container {
	float: right;
}

/* NFTS */

.nfts {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: flex-start;
	margin-left: -0.75rem;
	margin-right: -0.75rem;
	width: calc(100% + 1.5rem);
}
.nft {
	margin-left: 0.75rem;
	margin-right: 0.75rem;
	margin-bottom: 1.6rem;
	position: relative;
	width: 9rem;
	background-color: var(--nft-background-color);
	color: var(--text-color);
	border-radius: 1rem;
	cursor: default;
}
.nft.clickable {
	cursor: pointer;
}
.nft-logo-outer {
	position: relative;
	width: 9rem;
	height: 9rem;
}
.nft-logo {
	position: absolute;
	transition: all .2s;
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: 100%;
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
	top: 0;
	left: 0;
	width: 9rem;
	height: 9rem;
}
.nft:not(.disabled):hover .nft-logo {
	background-size: 105%;
}
.nft-details {
	height: 5rem;
	padding: 0 0.5rem;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.nft-name {
	text-align: center;
	font-size: 1rem;
	line-height: 1.2;
	color: var(--text-color);
}
.nft:not(.disabled):hover .nft-name {
	/*color: var(--primary-color);*/
}
.nft:not(.disabled):hover {
	/*background-color: var(--menu-background-highlight-color);*/
}
.nft-overlay {
	transition: opacity 0.2s linear;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	color: #fff;
	font-weight: 700;
	background-color: rgba(0, 0, 0, 0);
	border-radius: 1rem;
}
.nft-overlay div {
	background-color: rgba(0, 0, 0, 0);
	opacity: 0;
	display: inline-block;
	padding: 0rem 0.5rem;
	border-radius: 0.33rem;
	font-size: 0.9rem;
	background-color: var(--brand-primary-color);
	color: var(--brand-primary-contrast-color);
	font-family: var(--primary-font);
	font-weight: bold;
	position: relative;
	top: 0.7rem;
}
.nft:not(.disabled):hover .nft-overlay {
}
.nft:not(.disabled):hover .nft-overlay div {
	opacity: 1;
}
.nft a {
	text-decoration: none;
}
/*
.choose-nft .nft {
	margin-left: 0.6rem;
	margin-right: 0.6rem;
	margin-bottom: 1.2rem;
	width: 8rem;
	background-color: var(--button-tertiary-background-color);
}
.choose-nft .nft-logo-outer {
	width: 8rem;
	height: 8rem;
}
.choose-nft .nft-logo {
	width: 8rem;
	height: 8rem;
}
*/
.choose-nft input[type="checkbox"] {
	display: none;
}
.choose-nft input[type="checkbox"] + label .nft-overlay {
	background-color: rgba(0, 0, 0, 0.5);
}
.choose-nft input[type="checkbox"]:checked + label .nft-overlay {
	background-color: rgba(0, 0, 0, 0);
}

/* BANNERS */

.banner-top, .banner-bottom {
	margin-top: 2rem;
	margin-bottom: 2rem;
	margin-left: auto;
	margin-right: auto;
}
.banner-bottom {
	max-width: 40rem;
}
.banner-top a, .banner-bottom a {
	display: block;
	text-decoration: none;
	line-height: 0;
}
.banner-top img, .banner-bottom img {
	width: 100%;
}

/* IMAGE ZOOM */

.image-zoom {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgb(0, 0, 0, 0.9);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100000;
}

.image-zoom img {
	width: 100vw;
	height: 100vh;
	object-position: 50% 50%;
	object-fit: contain;
	cursor: zoom-out;
}

.image-zoom-close {
	position: absolute;
	top: 0.5rem;
	right: 1rem;
	font-size: 1.4rem;
	color: var(--text-color-2);
	cursor: pointer;
	padding: 0.5rem;
}

.image-zoom-close:hover {
	color: var(--brand-primary-color);
}

.click-to-zoom {
	cursor: zoom-in;
}