/*
* Omm
* Marketing CSS
* Version 1.0
* Last updated 22/3/22
*/

/* ==========================================================================
	Landing specific styles (Layout styles: sizing, spacing, etc.)
========================================================================== */

html {
	overflow-x: hidden;
}
body {
	width: initial;
	overflow-x: hidden;
	margin-bottom: 0;
}
.overflow-protection {
	overflow-x: hidden;
}
.wrapper {
	position: relative;
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.landing-background {
	background-image: url("../img/feature/hero-background2.png");
	background-size: contain;
	width: 120%;
	height: 2400px;
	position: absolute;
	top: -240px;
	z-index: -1;
	background-repeat: no-repeat;
	margin-left: -8%;
}
h1 {
	font-family: 'metropolis-light';
	font-weight: normal;
}
h2 {
	font-family: 'metropolis-light';
	font-weight: normal;
}
h2.separator {
	margin-bottom: 5px;
}
h3 {
	font-family: 'metropolis-light';
	font-weight: normal;
	font-size: 25px;
}
.italic {
	font-style: italic;
}

/* Header */

.header .logo,
.footer .logo {
	width: 125px;
}
ul.links {
	padding-left: 0;
	text-align: right;
	list-style-type: none;
}
ul.links li {
	display: inline-block;
	margin-left: 25px;
	font-size: 18px;
	cursor: pointer;
}
ul.links li .button {
	font-size: 18px;
	padding: 3px 20px;
}
.header .button,
.footer .button,
.button-multi {
	display: inline-block;
	padding: 8px 30px;
	min-width: 125px;
	background-color: transparent !important;
	text-align: center;
	outline: none;
	border: none;
	color: #49546a;
	background-size: 1px 200px;
	box-shadow: 0 2.8px 2.2px rgba(30, 128, 177, 0.017), 0 6.7px 5.3px rgba(30, 128, 177, 0.024), 0 12.5px 10px rgba(30, 128, 177, 0.03), 0 22.3px 17.9px rgba(30, 128, 177, 0.036), 0 41.8px 33.4px rgba(30, 128, 177, 0.043), 0 100px 80px rgba(30, 128, 177, 0.06);
	border: 3px solid;
	border-image-source: linear-gradient(45deg, #9d4df1, #00d3c2);
	border-image-slice: 1;
	transition: color 0.3s ease, box-shadow 0.3s ease, background-position 0.3s ease;
	cursor: pointer !important;
}
.header .button:hover,
.footer .button:hover,
.button-multi:hover {
	color: #49546a;
	box-shadow: 0 2.8px 2.2px rgba(30, 128, 177, 0.034), 0 6.7px 5.3px rgba(30, 128, 177, 0.048), 0 12.5px 10px rgba(30, 128, 177, 0.06), 0 22.3px 17.9px rgba(30, 128, 177, 0.072), 0 41.8px 33.4px rgba(30, 128, 177, 0.086), 0 100px 80px rgba(30, 128, 177, 0.12);
	background-position: 50px;
	transition: color 0.2s ease, box-shadow 0.2s ease, background-position 0.2s ease;
}

header a,
footer a {
	font-size: 18px;
	color: #49546a;
}

/* HTML elements */

h1 {
	font-size: 60px;
	line-height: 80px;
	margin-bottom: 25px;
}
h2 {
	font-size: 50px;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin-bottom: 25px;
}
p {
	font-size: 20px;
	color: rgba(73,84,106,0.75);
	line-height: 35px;
}
a {
	font-size: 20px;
	line-height: 35px;
}
p + p {
	margin-top: 15px;
}
.label {
	font-size: 18px;
	color: rgba(73,84,106,0.75);
	line-height: 25px;
}
h1 span.text-bold,
h2 span.text-bold {
	font-family: 'metropolis-medium';
}
.text-bold {
	font-family: 'metropolis-semibold';
	color: #49546a;
}

/* Footer */

footer {
	padding-top: 50px;
	margin-top: 250px;
	margin-bottom: 25px;
}
footer .bottom-row {
	margin-top: 75px;
}

/* Modules */

/* Citation */

h2 sup {
    position: absolute;
    top: initial;
    margin-top: 9px;
}
sup.citation a {
    font-size: 12px;
    letter-spacing: 1px;
    padding-left: 6px;
}
p sup.citation a {
    padding-left: 3px;
}

/* Other */

.panel {
	box-shadow: 21.213px 21.213px 35px 0px rgba(174, 196, 215, 0.5);
}
.countdown-remaining {
	position: absolute;
	top: 17px;
	left: 200px;
	border-radius: 10px;
	font-size: 14px;
	z-index: 9;
	background: #ffffff;
	padding: 5px 15px;
	border-radius: 10px;
	box-shadow: 21.213px 21.213px 35px 0px rgba(174, 196, 215, 0.5);
}
.countdown-remaining p {
	font-size: 16px;
}
.opacity-half {
	opacity: 0.5;
}
h2.separator::after,
.separator::after {
	content: '';
	display: block;
	margin-top: 25px;
	width: 125px;
	height: 4px;
	border-radius: 2px;
	background-image: -moz-linear-gradient(120deg, #9d4df1, #00d3c2);
	background-image: -webkit-linear-gradient(120deg, #9d4df1, #00d3c2);
	background-image: -ms-linear-gradient(120deg, #9d4df1, #00d3c2);
}
.separator.green::after {
	background-image: -moz-linear-gradient(0deg, #3f9dd5, #00d3c2);
	background-image: -webkit-linear-gradient(0deg, #3f9dd5, #00d3c2);
	background-image: -ms-linear-gradient(0deg, #3f9dd5, #00d3c2);
}
.separator.purple::after {
	background-image: -moz-linear-gradient(0deg, #6081df, #9d4df1);
	background-image: -webkit-linear-gradient(0deg, #6081df, #9d4df1);
	background-image: -ms-linear-gradient(0deg, #6081df, #9d4df1);
}
h2.separator-center::after {
	margin-left: auto;
	margin-right: auto;
}
.separator.text-center::after {
	margin-left: auto;
	margin-right: auto;
}
.center {
	margin-left: auto;
	margin-right: auto;
}
.eyebrow {
	display: block;
	font-size: 18px;
	margin-bottom: 15px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.75);
}
.animation-underline:after {
	content: '';
	display: block;
	width: 0px;
	height: 3px;
	margin-top: 2px;
	background-image: -moz-linear-gradient(120deg, #9d4df1, #00d3c2);
	background-image: -webkit-linear-gradient(120deg, #9d4df1, #00d3c2);
	background-image: -ms-linear-gradient(120deg, #9d4df1, #00d3c2);
	border-radius: 3px;
	transition: width 0.3s ease, background-color 0.3s ease;
}
.animation-underline:hover::after,
.animation-underline.active::after {
    width: 100%;
	background-image: -moz-linear-gradient(120deg, #9d4df1, #00d3c2);
	background-image: -webkit-linear-gradient(120deg, #9d4df1, #00d3c2);
	background-image: -ms-linear-gradient(120deg, #9d4df1, #00d3c2);
}

/* Animations */

/* Float animation 1 */

.float-1 {
	animation-name: float1;
	animation: float1 5s ease-in-out infinite;
}
@keyframes float1 {
	0%,
	100% {
		transform: translateY(0) translateX(0);
	}
	50% {
		transform: translateY(5px) translateX(-5px);
	}
}

/* Float animation 2 */

.float-2 {
	animation-name: float2;
	animation: float2 12s ease-in-out infinite;
}
@keyframes float2 {
    0%,
    100% {
        transform: translateY(0) translateX(0);
    }
    50% {
        transform: translateY(-25px) translateX(10px);
    }
}

/* Float animation 3 */

.float-3 {
	animation-name: float3;
	animation: float3 7s ease-in-out infinite;
}
@keyframes float3 {
    0%,
    100% {
        transform: translateY(0) translateX(0);
    }
    50% {
        transform: translateY(-5px) translateX(25px);
    }
}

/* Hero */

.hero {
	margin-top: 100px;
	margin-bottom: 600px;
}
.hero p {
	max-width: 450px;
}
.hero-image {
	position: absolute;
	width: 1100px;
	top: 0px;
	left: -50px;
}
.hero .bubble-1 {
	background-image: url(../img/feature/bubble-1.png);
	display: block;
	height: 150px;
	background-repeat: no-repeat;
	position: absolute;
	width: 300px;
	margin-left: -50px;
	margin-top: -125px;
	z-index: -1;
	background-size: contain;
}
.hero .bubble-2 {
	background-image: url(../img/feature/bubble-2.png);
	display: block;
	height: 500px;
	background-repeat: no-repeat;
	position: absolute;
	width: 500px;
	margin-left: -900px;
	margin-top: 250px;
	z-index: -1;
	background-size: contain;
}
.hero .bubble-3 {
	background-image: url(../img/feature/bubble-3.png);
	display: block;
	height: 500px;
	background-repeat: no-repeat;
	position: absolute;
	width: 500px;
	margin-left: -350px;
	margin-top: 550px;
	z-index: -1;
	background-size: contain;
}
.landing .hero .separator::after {
	width: 525px;
	margin-top: 15px;
}
.landing .hero h1 {
	font-size: 58px;
	line-height: 70px;
}

/* TL;DR */

.tldr {
	margin-bottom: 125px;
}
.tldr h2 {
	font-size: 20px;
	margin-bottom: 10px;
	line-height: 1;
	font-family: 'metropolis-medium'
}
.tldr p {
	font-size: 18px;
	line-height: 30px;
}
.tldr img {
	height: 50px;
	margin-bottom: 25px;
}
.tldr .grid-cell {
	margin-right: 50px;
	background-image: -moz-linear-gradient( 22deg, rgb(255,255,255) 0%, rgb(234,238,246) 100%);
	background-image: -webkit-linear-gradient( 22deg, rgb(255,255,255) 0%, rgb(234,238,246) 100%);
	background-image: -ms-linear-gradient( 22deg, rgb(255,255,255) 0%, rgb(234,238,246) 100%);
}
.tldr .grid-cell:last-of-type {
	margin-right: 0;
}

/* Intro */

.intro {
	margin-bottom: 200px;
}
.intro .animation-container {
	position: relative;
	transform: scale(0.9);
	margin-top: 220px;
	margin-left: -125px;
}
#intro h2 {
	max-width: 500px;
}
.intro > .grid-cell:first-of-type {
	min-width: 615px;
}
.landing .intro video {
	width: 500px;
}
.intro .bubble-1 {
	background-image: url(../img/feature/bubble-3.png);
	display: block;
	height: 700px;
	background-repeat: no-repeat;
	position: absolute;
	width: 1500px;
	margin-left: 600px;
	margin-top: -250px;
	z-index: -1;
}
.intro .bubble-2 {
	background-image: url(../img/feature/bubble-1.png);
	display: block;
	height: 700px;
	background-repeat: no-repeat;
	position: absolute;
	width: 1500px;
	margin-left: -1000px;
	margin-top: 800px;
	z-index: -1;
}

/* TL;DR */

.call-to-actions {
	margin-top: 175px;
}
.call-to-actions h2 {
	margin: 0 auto;
	display: block;
	margin-bottom: 35px; 
}
.call-to-actions h3 {
	font-size: 20px;
	margin-bottom: 10px;
	line-height: 1;
	font-family: 'metropolis-medium';
}
.call-to-actions .panel p {
	font-size: 18px;
	line-height: 30px;
}
.call-to-actions img {
	height: 50px;
	margin-bottom: 25px;
}
.call-to-actions .grid-cell {
	margin-right: 50px;
}
.call-to-actions .grid-cell:last-of-type {
	margin-right: 0;
}
.call-to-actions a.grid-cell {
	/*border: 3px solid #ffffff;*/
	transition: border 0.2s ease;
	border-radius: 25px;
	background-image: -moz-linear-gradient( 22deg, rgb(255,255,255) 0%, rgb(234,238,246) 100%);
	background-image: -webkit-linear-gradient( 22deg, rgb(255,255,255) 0%, rgb(234,238,246) 100%);
	background-image: -ms-linear-gradient( 22deg, rgb(255,255,255) 0%, rgb(234,238,246) 100%);
}
.call-to-actions a.grid-cell:hover {
	/*border: 3px solid #ffffff;*/
	transition: border 0.2s ease;
}

/* Social links */

.footer .social-links {
    text-align: right;
    margin: 0;
}
.footer .social-links li {
    display: inline-block;
    margin: 0 9px;
}
.footer .social-links li:first-of-type {
    margin-left: 0;
}
.footer .social-links li:last-of-type {
    margin-right: 0;
}
.footer .social-links a {
    display: block;
    position: relative;
    width: 50px;
    height: 50px;
    border: 2px solid #ffffff;
    background-color: #ffffff;
    border-radius: 50%;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
}
.footer .social-links a:hover {
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
}
.footer .social-links a:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	margin: -5px;
	border-radius: 30px;
	background: linear-gradient(40deg, #9d4df1, #00d3c2);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.footer .social-links a:hover:before {
	opacity: 1;
	transition: opacity 0.2s ease;
}


.footer .social-links .svg {
    display: block;
    height: 16px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
}
.footer .social-links .social-revue img {
	height: 20px;
	margin-top: 13px;
}
.footer .social-links .social-reddit img,
.footer .social-links .social-reddit svg {
	height: 20px;
	margin-top: 13px;
}
.footer .subtle-links {
	font-size: 16px;
}

/* ==========================================================================
	Misc
========================================================================== */

.orb {
	animation: spin 4s linear infinite;
	width: 400px;
	height: 400px;
	margin: auto;
	margin-top: 15px;
	border-radius: 50%;
	box-shadow: inset 0 0 50px #e3e9f4, inset 20px 0 60px #9d4df1, inset -20px 0 60px #00d3c2, inset 20px 0 300px #9d4df1, inset -20px 0 300px #00d3c2, 0 0 50px #e3e9f4, -10px 0 60px rgba(157, 77, 241, 0.85), 10px 0 60px rgba(0, 211, 194, 0.85);
	margin-right: inherit;
	opacity: 0.5;
}
@keyframes spin {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/* ==========================================================================
	Landing specific styles (Layout styles: sizing, spacing, etc.)
========================================================================== */

.landing .omm-animation-container {
	height: 100%;
	position: relative;
    transform: scale(0.75) translate(15%, 5%);
	width: 100%;
}
.landing .omm-circle {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	will-change: auto;
}
.landing .omm-circle::after {
	animation: omm-animation 9s infinite linear;
	background: linear-gradient(0deg, rgba(157,77,241,1) 15%, rgba(81,141,218,1) 30%, rgba(0,211,194,1) 60%, rgba(21,193,200,1) 90%) no-repeat;
	background-size: 300% 300%;
	border-radius: 100%;
	content: "";
	height: 8vmin;
	left: 50%;
	position: absolute;
	transform: translate(-50%, 0) scale(0);
	top: 50%;
	width: 8vmin;
	will-change: auto;
}
.omm-circle:nth-child(1) {
	animation-delay: 0s;
	transform: rotate(0deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(1):after {
	animation-delay: 0s;
}
.omm-circle:nth-child(2) {
	animation-delay: -0.12s;
	transform: rotate(28.8deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(2):after {
	animation-delay: -0.12s;
}
.omm-circle:nth-child(3) {
	animation-delay: -0.24s;
	transform: rotate(57.6deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(3):after {
	animation-delay: -0.24s;
}
.omm-circle:nth-child(4) {
	animation-delay: -0.36s;
	transform: rotate(86.4deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(4):after {
	animation-delay: -0.36s;
}
.omm-circle:nth-child(5) {
	animation-delay: -0.48s;
	transform: rotate(115.2deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(5):after {
	animation-delay: -0.48s;
}
.omm-circle:nth-child(6) {
	animation-delay: -0.6s;
	transform: rotate(144deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(6):after {
	animation-delay: -0.6s;
}
.omm-circle:nth-child(7) {
	animation-delay: -0.72s;
	transform: rotate(172.8deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(7):after {
	animation-delay: -0.72s;
}
.omm-circle:nth-child(8) {
	animation-delay: -0.84s;
	transform: rotate(201.6deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(8):after {
	animation-delay: -0.84s;
}
.omm-circle:nth-child(9) {
	animation-delay: -0.96s;
	transform: rotate(230.4deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(9):after {
	animation-delay: -0.96s;
}
.omm-circle:nth-child(10) {
	animation-delay: -1.08s;
	transform: rotate(259.2deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(10):after {
	animation-delay: -1.08s;
}
.omm-circle:nth-child(11) {
	animation-delay: -1.2s;
	transform: rotate(288deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(11):after {
	animation-delay: -1.2s;
}
.omm-circle:nth-child(12) {
	animation-delay: -1.32s;
	transform: rotate(316.8deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(12):after {
	animation-delay: -1.32s;
}
.omm-circle:nth-child(13) {
	animation-delay: -1.44s;
	transform: rotate(345.6deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(13):after {
	animation-delay: -1.44s;
}
.omm-circle:nth-child(14) {
	animation-delay: -1.56s;
	transform: rotate(374.4deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(14):after {
	animation-delay: -1.56s;
}
.omm-circle:nth-child(15) {
	animation-delay: -1.68s;
	transform: rotate(403.2deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(15):after {
	animation-delay: -1.68s;
}
.omm-circle:nth-child(16) {
	animation-delay: -1.8s;
	transform: rotate(432deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(16):after {
	animation-delay: -1.8s;
}
.omm-circle:nth-child(17) {
	animation-delay: -1.92s;
	transform: rotate(460.8deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(17):after {
	animation-delay: -1.92s;
}
.omm-circle:nth-child(18) {
	animation-delay: -2.04s;
	transform: rotate(489.6deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(18):after {
	animation-delay: -2.04s;
}
.omm-circle:nth-child(19) {
	animation-delay: -2.16s;
	transform: rotate(518.4deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(19):after {
	animation-delay: -2.16s;
}
.omm-circle:nth-child(20) {
	animation-delay: -2.28s;
	transform: rotate(547.2deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(20):after {
	animation-delay: -2.28s;
}
.omm-circle:nth-child(21) {
	animation-delay: -2.4s;
	transform: rotate(576deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(21):after {
	animation-delay: -2.4s;
}
.omm-circle:nth-child(22) {
	animation-delay: -2.52s;
	transform: rotate(604.8deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(22):after {
	animation-delay: -2.52s;
}
.omm-circle:nth-child(23) {
	animation-delay: -2.64s;
	transform: rotate(633.6deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(23):after {
	animation-delay: -2.64s;
}
.omm-circle:nth-child(24) {
	animation-delay: -2.76s;
	transform: rotate(662.4deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(24):after {
	animation-delay: -2.76s;
}
.omm-circle:nth-child(25) {
	animation-delay: -2.88s;
	transform: rotate(691.2deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(25):after {
	animation-delay: -2.88s;
}
.omm-circle:nth-child(26) {
	animation-delay: -3s;
	transform: rotate(720deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(26):after {
	animation-delay: -3s;
}
.omm-circle:nth-child(27) {
	animation-delay: -3.12s;
	transform: rotate(748.8deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(27):after {
	animation-delay: -3.12s;
}
.omm-circle:nth-child(28) {
	animation-delay: -3.24s;
	transform: rotate(777.6deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(28):after {
	animation-delay: -3.24s;
}
.omm-circle:nth-child(29) {
	animation-delay: -3.36s;
	transform: rotate(806.4deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(29):after {
	animation-delay: -3.36s;
}
.omm-circle:nth-child(30) {
	animation-delay: -3.48s;
	transform: rotate(835.2deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(30):after {
	animation-delay: -3.48s;
}
.omm-circle:nth-child(31) {
	animation-delay: -3.6s;
	transform: rotate(864deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(31):after {
	animation-delay: -3.6s;
}
.omm-circle:nth-child(32) {
	animation-delay: -3.72s;
	transform: rotate(892.8deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(32):after {
	animation-delay: -3.72s;
}
.omm-circle:nth-child(33) {
	animation-delay: -3.84s;
	transform: rotate(921.6deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(33):after {
	animation-delay: -3.84s;
}
.omm-circle:nth-child(34) {
	animation-delay: -3.96s;
	transform: rotate(950.4deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(34):after {
	animation-delay: -3.96s;
}
.omm-circle:nth-child(35) {
	animation-delay: -4.08s;
	transform: rotate(979.2deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(35):after {
	animation-delay: -4.08s;
}
.omm-circle:nth-child(36) {
	animation-delay: -4.2s;
	transform: rotate(1008deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(36):after {
	animation-delay: -4.2s;
}
.omm-circle:nth-child(37) {
	animation-delay: -4.32s;
	transform: rotate(1036.8deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(37):after {
	animation-delay: -4.32s;
}
.omm-circle:nth-child(38) {
	animation-delay: -4.44s;
	transform: rotate(1065.6deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(38):after {
	animation-delay: -4.44s;
}
.omm-circle:nth-child(39) {
	animation-delay: -4.56s;
	transform: rotate(1094.4deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(39):after {
	animation-delay: -4.56s;
}
.omm-circle:nth-child(40) {
	animation-delay: -4.68s;
	transform: rotate(1123.2deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(40):after {
	animation-delay: -4.68s;
}
.omm-circle:nth-child(41) {
	animation-delay: -4.8s;
	transform: rotate(1152deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(41):after {
	animation-delay: -4.8s;
}
.omm-circle:nth-child(42) {
	animation-delay: -4.92s;
	transform: rotate(1180.8deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(42):after {
	animation-delay: -4.92s;
}
.omm-circle:nth-child(43) {
	animation-delay: -5.04s;
	transform: rotate(1209.6deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(43):after {
	animation-delay: -5.04s;
}
.omm-circle:nth-child(44) {
	animation-delay: -5.16s;
	transform: rotate(1238.4deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(44):after {
	animation-delay: -5.16s;
}
.omm-circle:nth-child(45) {
	animation-delay: -5.28s;
	transform: rotate(1267.2deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(45):after {
	animation-delay: -5.28s;
}
.omm-circle:nth-child(46) {
	animation-delay: -5.4s;
	transform: rotate(1296deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(46):after {
	animation-delay: -5.4s;
}
.omm-circle:nth-child(47) {
	animation-delay: -5.52s;
	transform: rotate(1324.8deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(47):after {
	animation-delay: -5.52s;
}
.omm-circle:nth-child(48) {
	animation-delay: -5.64s;
	transform: rotate(1353.6deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(48):after {
	animation-delay: -5.64s;
}
.omm-circle:nth-child(49) {
	animation-delay: -5.76s;
	transform: rotate(1382.4deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(49):after {
	animation-delay: -5.76s;
}
.omm-circle:nth-child(50) {
	animation-delay: -5.88s;
	transform: rotate(1411.2deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(50):after {
	animation-delay: -5.88s;
}
.omm-circle:nth-child(51) {
	animation-delay: -6s;
	transform: rotate(1440deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(51):after {
	animation-delay: -6s;
}
.omm-circle:nth-child(52) {
	animation-delay: -6.12s;
	transform: rotate(1468.8deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(52):after {
	animation-delay: -6.12s;
}
.omm-circle:nth-child(53) {
	animation-delay: -6.24s;
	transform: rotate(1497.6deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(53):after {
	animation-delay: -6.24s;
}
.omm-circle:nth-child(54) {
	animation-delay: -6.36s;
	transform: rotate(1526.4deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(54):after {
	animation-delay: -6.36s;
}
.omm-circle:nth-child(55) {
	animation-delay: -6.48s;
	transform: rotate(1555.2deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(55):after {
	animation-delay: -6.48s;
}
.omm-circle:nth-child(56) {
	animation-delay: -6.6s;
	transform: rotate(1584deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(56):after {
	animation-delay: -6.6s;
}
.omm-circle:nth-child(57) {
	animation-delay: -6.72s;
	transform: rotate(1612.8deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(57):after {
	animation-delay: -6.72s;
}
.omm-circle:nth-child(58) {
	animation-delay: -6.84s;
	transform: rotate(1641.6deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(58):after {
	animation-delay: -6.84s;
}
.omm-circle:nth-child(59) {
	animation-delay: -6.96s;
	transform: rotate(1670.4deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(59):after {
	animation-delay: -6.96s;
}
.omm-circle:nth-child(60) {
	animation-delay: -7.08s;
	transform: rotate(1699.2deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(60):after {
	animation-delay: -7.08s;
}
.omm-circle:nth-child(61) {
	animation-delay: -7.2s;
	transform: rotate(1728deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(61):after {
	animation-delay: -7.2s;
}
.omm-circle:nth-child(62) {
	animation-delay: -7.32s;
	transform: rotate(1756.8deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(62):after {
	animation-delay: -7.32s;
}
.omm-circle:nth-child(63) {
	animation-delay: -7.44s;
	transform: rotate(1785.6deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(63):after {
	animation-delay: -7.44s;
}
.omm-circle:nth-child(64) {
	animation-delay: -7.56s;
	transform: rotate(1814.4deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(64):after {
	animation-delay: -7.56s;
}
.omm-circle:nth-child(65) {
	animation-delay: -7.68s;
	transform: rotate(1843.2deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(65):after {
	animation-delay: -7.68s;
}
.omm-circle:nth-child(66) {
	animation-delay: -7.8s;
	transform: rotate(1872deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(66):after {
	animation-delay: -7.8s;
}
.omm-circle:nth-child(67) {
	animation-delay: -7.92s;
	transform: rotate(1900.8deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(67):after {
	animation-delay: -7.92s;
}
.omm-circle:nth-child(68) {
	animation-delay: -8.04s;
	transform: rotate(1929.6deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(68):after {
	animation-delay: -8.04s;
}
.omm-circle:nth-child(69) {
	animation-delay: -8.16s;
	transform: rotate(1958.4deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(69):after {
	animation-delay: -8.16s;
}
.omm-circle:nth-child(70) {
	animation-delay: -8.28s;
	transform: rotate(1987.2deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(70):after {
	animation-delay: -8.28s;
}
.omm-circle:nth-child(71) {
	animation-delay: -8.4s;
	transform: rotate(2016deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(71):after {
	animation-delay: -8.4s;
}
.omm-circle:nth-child(72) {
	animation-delay: -8.52s;
	transform: rotate(2044.8deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(72):after {
	animation-delay: -8.52s;
}
.omm-circle:nth-child(73) {
	animation-delay: -8.64s;
	transform: rotate(2073.6deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(73):after {
	animation-delay: -8.64s;
}
.omm-circle:nth-child(74) {
	animation-delay: -8.76s;
	transform: rotate(2102.4deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(74):after {
	animation-delay: -8.76s;
}
.omm-circle:nth-child(75) {
	animation-delay: -8.88s;
	transform: rotate(2131.2deg) translate(-50%, 16vmin);
}
.omm-circle:nth-child(75):after {
	animation-delay: -8.88s;
}

@keyframes omm-animation {
	0% {
		background-position: 0 0;
	}
	50% {
        background-position: 100% 80%;
		transform: translate(-50%, 120%) scale(1);
	}
	100% {
        background-position: 0 100%;
		transform: translate(-50%, 240%) scale(0);
	}
}

/* Supply */

.landing #supply {
	margin-bottom: 100px;
}
.landing #supply + .side-by-side {
	margin-bottom: 200px;
}
.grid.side-by-side > .grid-cell:first-of-type {
	margin-right: 50px;
}
.landing #supply + .grid.side-by-side h3,
.landing #borrow + .grid.side-by-side h3 {
	margin-bottom: 15px;
}
.landing #supply img,
.landing #supply video {
	width: 470px;
	display: block;
	margin-right: auto;
	border-radius: 20px;
	box-shadow: 21.213px 21.213px 35px 0px rgba(174, 196, 215, 0.5);
	margin-top: -5px;
}
.landing #supply video.dark {
	display: none;
}
.landing #supply-background {
	background-size: contain;
	width: 128%;
	height: 3000px;
	position: absolute;
	z-index: -1;
	background-repeat: no-repeat;
	margin-top: -1150px;
	margin-left: -10%;
}
.landing #supply-background .swirls {
	background-image: url("../img/feature/swirl-background.png");
	background-size: contain;
	width: 128%;
	height: 3000px;
	position: absolute;
	z-index: -2;
	background-repeat: no-repeat;
	margin-top: -120px;
	margin-left: -10%;
	opacity: 0.5;
}
.landing #supply-background .bubble-1 {
	background-image: url(../img/feature/bubble-3.png);
	display: block;
	height: 200px;
	background-repeat: no-repeat;
	position: absolute;
	width: 300px;
	margin-left: -50px;
	margin-top: 875px;
	z-index: -1;
	background-size: contain;
}
.landing #supply-background .bubble-2 {
	background-image: url(../img/feature/bubble-3.png);
	display: block;
	height: 500px;
	background-repeat: no-repeat;
	position: absolute;
	width: 100px;
	margin-left: 1300px;
	z-index: -1;
	background-size: contain;
	top: 100px;
}
.landing #supply-background .bubble-3 {
	background-image: url(../img/feature/bubble-3.png);
	display: block;
	height: 500px;
	background-repeat: no-repeat;
	position: absolute;
	width: 50px;
	margin-left: 700px;
	margin-top: 490px;
	z-index: -1;
	background-size: contain;
}

/* Borrow */

.landing #borrow {
	margin-bottom: 100px;
}

/* Banks */

.tech-slideshow {
  height: 102px;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}
.tech-slideshow > div {
  height: 154px;
  width: 2526px;
  background: url(../img/feature/bank-accounts.png);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
  background-size: 1500px;
}
.tech-slideshow .mover-1 {
  animation: moveSlideshow 50s linear infinite;
}
.tech-slideshow .mover-2 {
  animation: moveSlideshow 50s linear infinite reverse;
}
@keyframes moveSlideshow {
  100% { 
    transform: translateX(-66.6666%);  
  }
}

.landing #borrow-background {
	background-size: contain;
	width: 128%;
	height: 3000px;
	position: absolute;
	z-index: -1;
	background-repeat: no-repeat;
	margin-top: -1150px;
	margin-left: -12%;
}
.landing #borrow-background .swirls {
	background-image: url("../img/feature/swirl-background.png");
	background-size: contain;
	width: 128%;
	height: 3000px;
	position: absolute;
	z-index: -2;
	background-repeat: no-repeat;
	margin-top: -100px;
	margin-left: -27%;
	opacity: 0.5;
	transform: scaleX(-1);
}
.landing #borrow-background .bubble-1 {
	background-image: url(../img/feature/bubble-1.png);
	display: block;
	height: 50px;
	background-repeat: no-repeat;
	position: absolute;
	width: 300px;
	margin-left: 320px;
	margin-top: 520px;
	z-index: -1;
	background-size: contain;
}
.landing #borrow-background .bubble-2 {
	background-image: url(../img/feature/bubble-1.png);
	display: block;
	height: 500px;
	background-repeat: no-repeat;
	position: absolute;
	width: 75px;
	z-index: -1;
	background-size: contain;
	top: 155px;
	left: 650px;
}
.landing #borrow-background .bubble-3 {
	background-image: url(../img/feature/bubble-1.png);
	display: block;
	height: 500px;
	background-repeat: no-repeat;
	position: absolute;
	width: 200px;
	margin-left: 1400px;
	margin-top: 800px;
	z-index: -1;
	background-size: contain;
}
.landing #borrow + .side-by-side {
	margin-bottom: 200px;
}
.landing #borrow img,
.landing #borrow video {
	width: 470px;
	display: block;
	margin-left: auto;
	border-radius: 20px;
	box-shadow: 0 2.8px 2.2px rgba(174, 196, 215, 0.034), 0 6.7px 5.3px rgba(174, 196, 215, 0.048), 0 12.5px 10px rgba(174, 196, 215, 0.06), 0 22.3px 17.9px rgba(174, 196, 215, 0.072), 0 41.8px 33.4px rgba(174, 196, 215, 0.086), 0 100px 80px rgba(174, 196, 215, 0.12);
	margin-top: -5px;
}
.landing #borrow video.dark {
	display: none;
}
.landing #bridge {
	margin-bottom: 200px;
}
.landing #bridge img {
	width: 85%;
	display: block;
	margin-left: 125px; 
}
.landing .bridge-background {
	background-image: url("../img/feature/bridge-background.png");
	background-size: contain;
	width: 120%;
	height: 1000px;
	position: absolute;
	z-index: -1;
	background-repeat: no-repeat;
	margin-top: -1100px;
	margin-left: -10%;
}
.landing .content {
	width: 50%;
	display: block;
	margin: 0 auto; 
}
.landing #shares {
	margin-bottom: 200px;
}
.landing #audit {
	margin-bottom: 200px;
}
.landing #audit img {
	width: 450px;
	margin-top: 70px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.landing #shares img {
	width: 450px;
	margin-left: auto;
	display: block;
}
.landing #shares img.dark {
	display: none;
}
.trustworthy-background {
	background-image: url(../img/feature/audited.png);
	display: block;
	height: 1000px;
	background-repeat: no-repeat;
	position: absolute;
	width: 170%;
	left: 0;
	right: 0;
	z-index: -1;
	margin-top: -625px;
	margin-left: -25%;
	opacity: 0.15;
	background-size: contain;
}

.landing #governance {
	margin-bottom: 200px;
}
.landing #governance-background {
	background-image: url(../img/feature/preps.png);
	display: block;
	height: 1000px;
	background-repeat: no-repeat;
	position: absolute;
	width: 170%;
	left: 0;
	right: 0;
	z-index: -1;
	margin-top: -870px;
	margin-left: -25%;
	opacity: 0.05;
	background-size: contain;
}
.landing #supply-balanced {
	margin-bottom: 200px;
}
.landing #supply-balanced h2 {
	max-width: 500px;
}
.landing #governance img {
	display: block;
	margin: 0 auto;
	width: 75%;
	border-radius: 20px;
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
}
.landing #governance img.dark {
	display: none;
}
.landing #governance h2 {
	display: block;
	margin: 0 auto;
	text-align: center;
	margin-top: 35px;
}
.landing #governance h2::after {
	margin: 15px auto;
}
.landing #governance .content {
	width: 50%;
}

/* APY */

.landing #apy > .grid-cell {
	margin-right: 25px;
	border-radius: 25px;
}
.landing #apy > .grid-cell:last-of-type {
	margin-right: 0;
}

/* Investors */

.landing #investors img {
	max-width: 600px;
	margin: 25px auto;
	display: block;
	margin-right: 75px;
}
.landing #investors img.dark {
	display: none;
}

/* Calls to action */

.landing .call-to-actions a {
	position: relative;
	box-shadow: 0 2.8px 2.2px rgba(174, 196, 215, 0.034), 0 6.7px 5.3px rgba(174, 196, 215, 0.048), 0 12.5px 10px rgba(174, 196, 215, 0.06), 0 22.3px 17.9px rgba(174, 196, 215, 0.072), 0 41.8px 33.4px rgba(174, 196, 215, 0.086), 0 100px 80px rgba(174, 196, 215, 0.12);
	transition: box-shadow 0.3s ease;
}
.landing .call-to-actions a:hover {
	transition: box-shadow 0.2s ease;
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
}

.landing .call-to-actions a.grid-cell:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	margin: -3px;
	border-radius: 28px;
	background: linear-gradient(40deg, #9d4df1, #00d3c2);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.landing .call-to-actions a.grid-cell:hover:before {
	opacity: 1;
	transition: opacity 0.2s ease;
}

/* Want more? */

#want-more > div:nth-child(1) > div:nth-child(1) > p:nth-child(2) {
	max-width: 550px;
	margin-left: auto;
	margin-right: auto;
}

/* More how? */

#more-how {
	margin-bottom: 100px;
}
#more-how h2 {
	font-size: 20px;
	margin-bottom: 10px;
	line-height: 1.3;
	font-family: 'metropolis-medium';
	width: 100%;
}
#more-how p {
	font-size: 16px;
	line-height: 30px;
}
#more-how img {
	height: 50px;
	margin-bottom: 15px;
}
#more-how .grid-cell {
	margin-right: 25px;
	border-radius: 25px;
}
#more-how .grid-cell:last-of-type {
	margin-right: 0;
}
ol li + li {
	margin-top: 15px;
}

/* ==========================================================================
	Brand specific styles (Layout styles: sizing, spacing, etc.)
========================================================================== */

/* Branding kit */

#branding-kit {
	border-radius: 25px;
	padding: 40px;
}
#branding-kit h1 {
	font-size: 50px;
	margin-bottom: 15px;
	line-height: 1;
}
#branding-kit .button-multi {
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 16px;
	padding: 5px 20px;
}
#branding-kit img {
	width: 455px;
	margin-top: 25px;
}
#branding-kit img.dark {
	display: none;
}

/* Branding kit */

#brand h2 {
	font-family: 'metropolis-medium';
}
.text-medium {
	font-family: 'metropolis-medium';	
}
#brand .hero h2 {
	font-size: 35px;
	margin-bottom: 0;
}
#brand .hero .bubble-2 {
	margin-left: -600px;
	margin-top: -150px;
}
#brand .hero-background {
	background-image: url("../img/feature/airdrip-background.png");
	background-size: contain;
	width: 120%;
	height: 2000px;
	position: absolute;
	z-index: -1;
	background-repeat: no-repeat;
	top: -50px;
	margin-left: -10%;
}
#brand section.grid:nth-child(3) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) {
	margin-left: -40px; 
}

/* Logo section */

#brand section.logo > .grid-cell:last-of-type {
	text-align: left;
}

/* Design system section */

#brand section.feature > .grid-cell:last-of-type {
	margin-left: 200px;
}
#brand section.design-system > .grid-cell:last-of-type h3 {
	margin-top: 15px;
	margin-bottom: 15px;
}
#brand section.design-system > .grid-cell:last-of-type p {
	margin: 0 !important;
}

/* Typography section */

#brand section.typography > .grid-cell:last-of-type figure {
	margin: 0;
}
#brand section.typography > .grid-cell:last-of-type figure h3 {
	font-size: 50px;
	margin-bottom: 15px;
}
#brand section.typography > .grid-cell:last-of-type figure p {
	font-size: 20px;
}

/* Color circles */

.brand-circle {
	width: 100px;
	height: 100px;
	border-radius: 100px;
}
.brand-circle.green {
	background-image: -moz-linear-gradient( 45deg, rgb(63,157,213) 0%, rgb(0,211,194) 100%);
	background-image: -webkit-linear-gradient( 45deg, rgb(63,157,213) 0%, rgb(0,211,194) 100%);
	background-image: -ms-linear-gradient( 45deg, rgb(63,157,213) 0%, rgb(0,211,194) 100%);
}
.brand-circle.purple {
	background-image: -moz-linear-gradient( 45deg, rgb(96,129,223) 0%, rgb(157,77,241) 100%);
	background-image: -webkit-linear-gradient( 45deg, rgb(96,129,223) 0%, rgb(157,77,241) 100%);
	background-image: -ms-linear-gradient( 45deg, rgb(96,129,223) 0%, rgb(157,77,241) 100%);
}

.color-container h3 {
	margin-bottom: 5px;
}
.color-container p {
	margin: 0;
}
.color-container + .color-container {
	margin-top: 25px;
}
#brand-design h3 + .color-container {
	margin-top: 25px;
}

/* ==========================================================================
	Design system specific styles (Layout styles: sizing, spacing, etc.)
========================================================================== */

.color-container .grid > .grid-cell:first-of-type {
	max-width: 135px;
}

/* ==========================================================================
	Disclaimer specific styles (Layout styles: sizing, spacing, etc.)
========================================================================== */

#disclaimer .hero h1.separator::after {
	margin-left: auto;
	margin-right: auto;
}
#disclaimer .hero {
	margin-bottom: 0px;
}
#disclaimer #disclaimer-content {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
	Airdrop specific styles (Layout styles: sizing, spacing, etc.)
========================================================================== */

.airdrop .wrapper > main:nth-child(2) > section > div:nth-child(2) > div:nth-child(1) {
	margin-right: 150px;
}
.airdrop h2 {
	max-width: 800px;
}
.airdrop h3 {
	font-family: 'metropolis-medium';
}
.airdrop #want-more h2 {
	margin-left: auto;
	margin-right: auto !important;
	display: block;	
}
.airdrop-controls .button {
	padding: 3px 15px;
	font-size: 16px;
}
#airdrip.airdrop .hero img {
	width: 300px;
	margin-right: -20px;
}

/* Airdrop modal */

#airdrip.airdrop #modal-sign-in-airdrop {
	margin-left: 0;
}
#airdrip.airdrop #modal-sign-in-airdrop .or {
	margin-left: 0;
	margin-top: 55px;
}
#airdrip.airdrop #modal-sign-in-airdrop .or::after {
	width: 1px;
	height: 100px;
}
#airdrip.airdrop #modal-sign-in-airdrop .or span {
	background-color: #ffffff;
}
#airdrip.airdrop #modal-sign-in-airdrop .sign-in-options input[type="text"] {
	border: 2px solid #d3d9e7;
}
#airdrip.airdrop #modal-sign-in-airdrop .sign-in-options > .grid-cell a.sign-in-ledger:hover {
	background-color: initial;
}
#airdrip.airdrop #modal-sign-in-airdrop .sign-in-ledger.animation-underline:hover::after,
#airdrip.airdrop #modal-sign-in-airdrop .sign-in-ledger.animation-underline.active::after,
#airdrip.airdrop #modal-sign-in-airdrop .sign-in-ledger.animation-underline::after {
	display: none;
}
#modal-sign-in-airdrop {
	max-width: 500px;
}
#airdrip.airdrop #modal-sign-in-airdrop .button {
	padding: 0px 25px;
	max-width: 150px;
	margin: 0 auto;
}
#airdrip.airdrop #modal-sign-in-airdrop .button:hover {
	background: none;
}

/* ==========================================================================
	Wallpapers
========================================================================== */

.wallpaper img {
	max-width: 100%;
	border-radius: 20px;
	margin-bottom: 25px;
	box-shadow: 21.213px 21.213px 35px 0px rgba(174, 196, 215, 0.5);
}
.wallpaper .metadata {
	display: inline-block;
	margin-right: 35px;
}
.wallpaper .metadata:last-of-type {
	margin-right: 0;
}
.wallpaper div.grid:nth-child(3) > div:nth-child(1) {
	flex: 2;
}
.wallpaper > .grid-cell:first-of-type {
	margin-right: 50px;
}
.wallpaper + .wallpaper {
	margin-top: 50px;
}
#brand.wallpapers .hero p {
	max-width: 100%;
}
#brand.wallpapers .hero .bubble-1 {
	margin-left: -250px;
	margin-top: -90px;
}
#brand.wallpapers .hero .bubble-2 {
	margin-left: 1000px;
	margin-top: 100px;
}
#brand.wallpapers .hero .bubble-3 {
	margin-left: 950px;
	margin-top: -200px;
}

#brand .feature.wallpapers img {
	max-width: 120%;
	margin-left: -10%;
}
.breadcrumbs {
	list-style-type: none;
	padding-left: 0;
}
.breadcrumbs li,
.breadcrumbs li a {
	font-size: 18px;
}
.wallpaper img + .grid {
	flex-direction: column;
}
.wallpaper .panel {
	border-radius: 25px;
}
.wallpaper .button {
	text-align: center;
	font-size: 16px;
	padding: 2px 15px;
	margin-left: 50px;
	transform: translateY(-10px);
}
.wallpaper img + .grid > .grid-cell {
	text-align: center;
}

/* ==========================================================================
	How it works
========================================================================== */

/* Modules */

#how li {
	font-size: 20px;
	line-height: 35px;
}
#how li + li {
	margin-top: 15px;
}
/*
#how .panel {
	box-shadow: 21.213px 21.213px 35px 0px rgba(174, 196, 215, 0.5);
	margin-right: 50px;
	background-image: -moz-linear-gradient( 22deg, rgb(255,255,255) 0%, rgb(234,238,246) 100%);
	background-image: -webkit-linear-gradient( 22deg, rgb(255,255,255) 0%, rgb(234,238,246) 100%);
	background-image: -ms-linear-gradient( 22deg, rgb(255,255,255) 0%, rgb(234,238,246) 100%);
	border-radius: 25px;
}
*/
#how .panel:last-of-type {
	margin-right: 0;
}

/* Subtle box */

.subtle-box {
	background-color: #d9dfee;
	padding: 25px;
	border-radius: 15px;
}
.subtle-box
.subtle-box p,
.subtle-box a,
.subtle-box .label {
	font-size: 18px !important;
	line-height: 1.7 !important;
}

/* Hero */

#how .hero-background {
	background-image: url("../img/feature/how-background-3.png");
	background-size: contain;
	width: 120%;
	height: 2000px;
	position: absolute;
	z-index: -1;
	background-repeat: no-repeat;
	top: -50px;
	margin-left: -10%;
}
#how .hero-background {
    background-size: cover;
    width: 213%;
    margin-left: -57%;
    top: -400px;
}
#how .hero-background .bubble-1 {
	background-image: url(../img/feature/bubble-1.png);
	display: block;
	height: 150px;
	background-repeat: no-repeat;
	position: absolute;
	width: 300px;
	margin-left: -50px;
	margin-top: -125px;
	z-index: -1;
	background-size: contain;
	margin-left: 705px;
	margin-top: 956px;
	height: 75px;
}
#how .hero-background .bubble-2 {
	background-image: url(../img/feature/bubble-2.png);
	display: block;
	height: 500px;
	background-repeat: no-repeat;
	position: absolute;
	width: 500px;
	margin-left: -900px;
	margin-top: 250px;
	z-index: -1;
	background-size: contain;
	width: 120px;
	margin-left: 2025px;
	margin-top: 500px;
}
#how .hero-background .bubble-3 {
	background-image: url(../img/feature/bubble-3.png);
	display: block;
	height: 500px;
	background-repeat: no-repeat;
	position: absolute;
	width: 500px;
	margin-left: -350px;
	margin-top: 550px;
	z-index: -1;
	background-size: contain;
	margin-top: 1060px;
	width: 170px;
	margin-left: 1110px;
}
#how .hero-background .bubble-4 {
	background-image: url(../img/feature/bubble-3.png);
	display: none;
	height: 500px;
	background-repeat: no-repeat;
	position: absolute;
	width: 500px;
	margin-left: -350px;
	margin-top: 550px;
	z-index: -1;
	background-size: contain;
	margin-top: 1250px;
	width: 100px;
	margin-left: 400px;
}
#how .hero-background .bubble-5 {
	background-image: url(../img/feature/bubble-1.png);
	display: block;
	height: 150px;
	background-repeat: no-repeat;
	position: absolute;
	width: 300px;
	margin-left: -50px;
	margin-top: -125px;
	z-index: -1;
	background-size: contain;
	margin-left: 2005px;
	margin-top: 856px;
	height: 150px;
}
#how #hero object {
	height: auto;
	width: 115%;
}
@supports selector(:nth-child(1 of x)) {
	#how #hero object {
		filter: drop-shadow(20px 20px 30px rgba(174, 196, 215, 0.7));
	}
}

/* Get started */

#how .panel {
	border-radius: 25px;
	background-image: -moz-linear-gradient( 22deg, rgb(255,255,255) 0%, rgb(234,238,246) 100%);
	background-image: -webkit-linear-gradient( 22deg, rgb(255,255,255) 0%, rgb(234,238,246) 100%);
	background-image: -ms-linear-gradient( 22deg, rgb(255,255,255) 0%, rgb(234,238,246) 100%);
}
#how #get-started > .panel {
	margin-right: 50px;
}
#how #get-started > .panel:last-of-type {
	margin-right: 0;
}
#how #get-started h2 {
	width: 100%;
	font-size: 35px;
	margin-bottom: -15px;
}
#how #get-started img {
	height: 50px;
}
#how #supply video,
#how #borrow video {
	float: right;
	width: 500px;
	border-radius: 20px;
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
}

/* Supply */

#how #supply-background {
	background-size: contain;
	width: 128%;
	height: 3000px;
	position: absolute;
	z-index: -1;
	background-repeat: no-repeat;
	margin-top: -350px;
	margin-left: -10%;
}
#how #supply-background .swirls {
	background-image: url("../img/feature/swirl-background.png");
	background-size: contain;
	width: 128%;
	height: 3000px;
	position: absolute;
	z-index: -2;
	background-repeat: no-repeat;
	margin-top: -120px;
	margin-left: -37%;
	opacity: 0.5;
	transform: scaleX(-1);
}
#how #supply-background .bubble-1 {
	background-image: url(../img/feature/bubble-3.png);
	display: block;
	height: 200px;
	background-repeat: no-repeat;
	position: absolute;
	width: 300px;
	margin-left: -100px;
	margin-top: 0;
	z-index: -1;
	background-size: contain;
}
#how #supply-background .bubble-2 {
	background-image: url(../img/feature/bubble-3.png);
	display: block;
	height: 500px;
	background-repeat: no-repeat;
	position: absolute;
	width: 100px;
	margin-left: 1300px;
	z-index: -1;
	background-size: contain;
	top: -500px;
}
#how #supply-background .bubble-3 {
	background-image: url(../img/feature/bubble-3.png);
	display: block;
	height: 500px;
	background-repeat: no-repeat;
	position: absolute;
	width: 50px;
	margin-left: 700px;
	margin-top: 190px;
	z-index: -1;
	background-size: contain;
}

/* Borrow */

#how #borrow video {
	float: left;
}
#how #borrow .subtle-box {
	margin-top: 25px;
}
#how #borrow-background {
	background-size: contain;
	width: 128%;
	height: 900px;
	position: absolute;
	z-index: -1;
	background-repeat: no-repeat;
	margin-top: -900px;
	margin-left: -12%;
}
#how #borrow-background .bubble-1 {
	background-image: url(../img/feature/bubble-1.png);
	display: block;
	height: 50px;
	background-repeat: no-repeat;
	position: absolute;
	width: 300px;
	margin-left: -50px;
	margin-top: 600px;
	z-index: -1;
	background-size: contain;
}
#how #borrow-background .bubble-2 {
	background-image: url(../img/feature/bubble-1.png);
	display: block;
	height: 500px;
	background-repeat: no-repeat;
	position: absolute;
	width: 75px;
	z-index: -1;
	background-size: contain;
	top: 75px;
	left: 447px;
}
#how #borrow-background .bubble-3 {
	background-image: url(../img/feature/bubble-1.png);
	display: block;
	height: 500px;
	background-repeat: no-repeat;
	position: absolute;
	width: 150px;
	margin-left: 1300px;
	margin-top: 800px;
	z-index: -1;
	background-size: contain;
}

/* Rewards */

#how #rewards h2 {
	width: 100%;
}
#how #rewards img {
	display: block;
	margin: 0 auto;
	border-radius: 20px;
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
	max-width: 1000px;
}
#how #rewards img.dark {
	display: none;
}
#how #rewards .content {
	max-width: 600px;
	margin: auto;
	margin-top: 35px;
}

/* Stake */

#how #stake h2 {
	width: 100%;
}
#how #stake img {
	display: block;
	margin: 0 auto;
	border-radius: 20px;
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
	max-width: 1000px;
}
#how #stake img.dark {
	display: none;
}
#how #stake .content {
	max-width: 600px;
	margin: auto;
	margin-top: 35px;
}

/* Governance */

#how #governance h2 {
	width: 100%;
	margin-bottom: 10px;
}
#how #governance h2 + p {
	margin-bottom: 50px;
}
#how #governance h3 {
	margin-bottom: 15px;
}
#how #governance img {
	display: block;
	margin: 0 auto;
	border-radius: 20px;
	box-shadow: 21.213px 21.213px 35px 0px rgba(174, 196, 215, 0.5);
	margin-bottom: 35px;
	width: 100%;
	max-width: 1000px;
}
#how #governance object {
	display: block;
	height: auto;
	margin: 0;
	transform: translate(-10%, -7px);
	width: 110%;
}
#how #governance .vote-omm img {
	box-shadow: none;
	width: 110%;
	margin-left: -12%;
	margin-bottom: 5px;
}
#how #governance .vote-omm img.dark {
	display: none;
}
#how #governance .vote-p-reps img {
	border-radius: 10px;
	margin-bottom: 30px;
}
#how #governance .vote-p-reps img.dark {
	display: none;
}
#how #governance .vote-p-reps img:last-of-type {
	margin-bottom: 40px;
}

/* Next steps */

#how .call-to-actions a.grid-cell {
	position: relative;
}
#how .call-to-actions a.grid-cell::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -3px;
    border-radius: 28px;
    background: linear-gradient(40deg, #9d4df1, #00d3c2);
    opacity: 0;
    transition: opacity 0.3s ease;
}
#how .call-to-actions a.grid-cell:hover::before {
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* ==========================================================================
	Statistics styles
========================================================================== */

/* Modules */

#statistics .label {
	font-size: 16px;
}

/* Overview */

#statistics h1 {
	font-family: 'metropolis-medium';
	font-size: 35px;
}
#statistics h2 {
	font-family: 'metropolis-medium';
	font-size: 30px;
}
#statistics div.panel:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > img:nth-child(1) {
	height: 50px;
}
#statistics .overview {
	margin-top: 15px;
	margin-bottom: 75px;
}
#statistics .overview .metadata {
	display: inline-block;
	margin: 0;
	margin-left: 15px;
	text-align: left;
}
#statistics .overview .metadata dd {
	font-size: 20px;
}
#statistics .overview > .grid-cell > .grid > .grid-cell {
	border-right: 1px solid #d3d9e7;
	text-align: center;
}
#statistics .overview > .grid-cell > .grid > .grid-cell:last-of-type {
	border-right: none;
}
#statistics .overview img {
	height: 55px;
	margin-top: -35px;
}
#statistics .overview > .grid-cell > .grid > .grid-cell:nth-of-type(3) img {
	height: 57px;
}
#statistics #pools .tooltip-item::after {
	left: 0;
}
#statistics .side-by-side .metadata {
	text-align: center;
	border-right: 1px solid #d3d9e7;
}
#statistics .dropdown {
	font-size: 14px;
	margin-left: 3px;
}
#statistics div.panel:nth-child(1) > div:nth-child(4) > div:nth-child(3) > dl:nth-child(1),
#statistics div.grid:nth-child(3) > div:nth-child(2) > div:nth-child(4) > div:nth-child(3) > dl:nth-child(1) {
	border-right: none;
}
#statistics .side-by-side h2 {
	margin-bottom: 5px;
}
#statistics .side-by-side h3 {
	position: absolute;
	z-index: 2;
	height: 20px;
}
#statistics .side-by-side h3 span {
	font-size: 16px;
}
#statistics .tv-lightweight-charts,
#statistics .tv-lightweight-charts > table {
	width: 100% !important;
}

/* Governance */

#statistics #governance {
	margin-top: 75px;
}
#statistics #governance h2 {
	margin-bottom: 0;
}

/* ==========================================================================
	NFT's
========================================================================== */

.nft .hero {
	margin-bottom: 0;
}
.nft .hero p {
	max-width: 100%;
}
.nft .hero .panel {
	margin-bottom: 0;
	padding: 15px 0px;
}
.nft .hero img,
.nft .hero video {
	display: block;
	margin-left: auto;
	margin-right: auto;
	border-radius: 15px;
	width: 100% !important;
	margin-bottom: 0;
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.024), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.032), 0 41.8px 33.4px rgba(0, 0, 0, 0.046), 0 100px 80px rgba(0, 0, 0, 0.06);
	margin-top: 100px;
}
.nft .feature .grid-cell.text-right {
	max-width: 110px;
}
.nft .metadata dt {
	font-size: 16px;
}
.nft .metadata dd {
	font-size: 20px;
}
.nft .metadata dd.clickable {
	color: #2fccdc;
}
.nft .metadata dd.text-bold {
	font-size: 55px;
	margin-top: -25px;
}
.nft .feature + .feature {
	margin-top: 100px;
}
.nft .feature .panel {
	padding: 10px 35px;
	margin-top: 25px;
	margin-bottom: 0;
}
.nft .feature .panel dt {
	font-size: 14px;
}
.nft .feature .panel a,
.nft .feature .panel dd {
	font-size: 16px;
}
.nft hr {
	margin-top: 75px;
	margin-bottom: 50px;
}
.nft .feature > .grid-cell:first-of-type {
	margin-right: 75px;
}
.nft .metadata-group {
	margin: 0 25px;
}
.nft .feature.profile img {
	height: 300px;
	width: initial;
	max-width: inherit;
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin-top: 35px;
	margin-bottom: 35px;
}
.nft .swirl {
	background-image: url(../img/feature/swirl-1.png);
	display: block;
	height: 700px;
	background-repeat: no-repeat;
	position: absolute;
	width: 800px;
	margin-left: 900px;
	margin-top: -1450px;
	z-index: -1;
	background-size: contain;
}

.nft .hero .bubble-1 {
    margin-left: -250px;
    margin-top: -90px;
    background-image: url(../img/feature/bubble-2.png);
	width: 100px;
	background-size: contain;
	opacity: 0.5;
	margin-left: -250px;
	margin-top: -90px;
}
.nft .hero .bubble-2 {
	background-image: url(../img/feature/bubble-2.png);
	width: 250px;
	background-size: contain;
	margin-left: -1000px;
	opacity: 0.5;
	margin-left: 1000px;
	margin-top: 100px;
}
.nft .hero .bubble-3 {
    margin-left: -50px;
    margin-top: -600px;
    background-image: url(../img/feature/bubble-2.png);
	width: 120px;
	background-size: contain;
	opacity: 0.75;
	margin-left: 950px;
	margin-top: -200px;
}
.nft .hero .bubble-1 {
	margin-left: -250px;
	margin-top: -360px;
}
.nft .hero .bubble-2 {
	margin-left: 1100px;
	margin-top: -300px;
}
.nft .hero .bubble-3 {
	margin-left: 950px;
	margin-top: -750px;
}


.clickable {
	cursor: pointer;
	transition: color 0.3s ease;
}
.clickable:hover {
	color: #2fccdc;
}

/* ==========================================================================
	Responsive styles
========================================================================== */

/* 1600px and above */

@media (min-width: 1600px) {

	/* ==========================================================================
		Modules
	========================================================================== */

	ol {
		font-size: 20px;
	}
	.header img.logo,
	.footer img.logo {
		width: 195px;
	}
	.countdown-remaining {
		top: 14px;
		left: 215px;
	}
	footer {
		margin-top: 150px;
		margin-bottom: 50px;
	}

	/* ==========================================================================
		Landing
	========================================================================== */

	/* Hero */

	.hero {
		margin-top: 150px;
		margin-bottom: 550px;
	}
	.landing .hero h1 {
		margin-bottom: 0;
	}
	.hero p {
		max-width: 85%;
	}
	.hero-image {
		top: 125px;
		left: 650px;
		width: 1150px;
	}
	.hero .bubble-1 {
	    margin-left: -320px;
	    margin-top: 525px;
	    height: 180px;
	}
	.hero .bubble-2 {
		width: 120px;
		margin-left: -825px;
		margin-top: 300px;
	}
	.hero .bubble-3 {
		margin-top: -150px;
		width: 120px;
		margin-left: 20px;
	}
	.landing .hero-background {
		background-size: cover;
		width: 3500px;
		margin-left: -61%;
		top: -780px;
		z-index: -2;
		background-repeat: no-repeat;
		height: 2400px;
		position: absolute;
		background-image: url("../img/feature/hero-background.svg");
	}

	/* TL;DR */

	.tldr {
		margin-bottom: 200px;
	}
	.tldr h2 {
		font-size: 20px;
		margin-bottom: 10px;
		line-height: 1;
		width: 100%;
	}
	.tldr p {
		font-size: 16px;
		line-height: 30px;
	}
	.tldr img {
		height: 60px;
		margin-bottom: 20px;
	}
	.tldr .grid-cell {
		margin-right: 50px;
		border-radius: 25px;
	}
	.tldr .grid-cell:last-of-type {
		margin-right: 0;
	}

	/* Intro */

	#intro img {
		width: 90%;
		display: block;
		margin-left: 20%;
		margin-top: -30px;
	}

	/* Supply */

	.landing #supply {
		margin-top: 0;
		margin-bottom: 150px;
	}
	.landing #supply + .side-by-side {
		margin-bottom: 250px;
	}
	.landing #supply img,
	.landing #supply video {
		width: 500px;
		margin-top: 3px;
	}
	.landing #supply img {
		width: 85%;
		margin: 0 auto;
		margin-right: 80px;
	}
	.landing #supply-background {
		margin-top: -1230px;
	}
	.landing #supply + .grid.side-by-side > .grid-cell:first-of-type {
		margin-right: 50px;
		max-width: 550px;
	}
	.landing #supply + .grid.side-by-side > .grid-cell:first-of-type img {
		width: 100% !important;
		margin-bottom: -9px;
	}
	.landing #supply + .grid.side-by-side > .grid-cell:last-of-type img {
		margin-bottom: 25px !important;
		margin-top: -20px !important;
	}
	.landing #supply-background .bubble-1 {
		margin-left: -200px;
	}
	.landing #supply-background .bubble-2 {
		top: 60px;
		margin-left: 1350px;
	}
	.landing #supply-background .bubble-3 {
		margin-left: 680px;
		margin-top: 510px;
	}
	.landing #supply-background .swirls {
		margin-left: 9%;
	}
	h2.separator::after,
	.separator::after {
		margin-top: 15px;
		margin-bottom: 15px;
	}

	/* Borrow */

	.landing #borrow + .side-by-side {
		margin-bottom: 250px;
	}
	.shadow {
		background-image: url("../img/feature/shadow.png");
		background-size: contain;
		width: 8px;
		height: 300px;
		position: absolute;
		background-repeat: no-repeat;
		opacity: 0.3;
	}
	.shadow + .shadow {
		background-image: url("../img/feature/shadow.png");
		background-size: contain;
		width: 8px;
		height: 300px;
		margin-left: 492px;
		position: absolute;
		background-repeat: no-repeat;
		opacity: 0.3;
		transform: scaleX(-1);
	}
	.landing #borrow img,
	.landing #borrow video {
		width: 500px;
	}
	.landing #borrow img {
		width: 85%;
		margin: 0 auto;
		margin-left: 80px;
	}
	.landing #borrow + .grid.side-by-side > .grid-cell:last-of-type {
		margin-left: 50px;
		max-width: 500px;
	}
	.landing #borrow + .grid.side-by-side > .grid-cell:last-of-type img {
		width: 100%;
		margin-bottom: 25px !important;
	}
	.landing #borrow-background .bubble-1 {
		margin-left: -50px;
		margin-top: 490px;
	}
	.landing #borrow-background .bubble-2 {
		top: 85px;
		left: 650px;
	}
	.landing #borrow-background .bubble-3 {
		width: 175px;
		margin-left: 1450px;
		margin-top: 925px;
	}
	.landing #borrow-background .swirls {
		background-image: url("../img/feature/swirl-background.png");
		background-size: contain;
		width: 128%;
		height: 3000px;
		position: absolute;
		z-index: -2;
		background-repeat: no-repeat;
		margin-top: -120px;
		margin-left: -35%;
		opacity: 0.5;
	}
	.landing #graphic-liquidity-pools {
		max-width: 100%;
		margin-bottom: 20px;
	}
	.landing #borrow .grid.side-by-side > .grid-cell:first-of-type {
		margin-right: 25px;
	}
	.tech-slideshow + .tech-slideshow {
		margin-bottom: 25px;
	}

	/* Shares */

	.landing #shares {
		margin-bottom: 300px;
	}
	.landing #shares img {
		width: 575px;
		margin-left: -55px;
		position: absolute;
		margin-top: 5px;
	}

	/* Governance */

	.landing #governance-background {
	    margin-left: -50%;
	    width: 200%;
	    margin-top: -830px;
	}

	/* Audited */

	.landing #audit img {
		margin-top: 110px;
		margin-right: 0;
		position: absolute;
		width: 250px;
		margin-left: 300px;
	}
	.trustworthy-background {
		background-image: url(../img/feature/audited.png);
		display: block;
		height: 1000px;
		background-repeat: no-repeat;
		position: absolute;
		width: 275%;
		left: 0;
		right: 0;
		z-index: -1;
		margin-top: -805px;
		margin-left: -80%;
		opacity: 0.1;
		background-size: contain;
	}

	/* Investors */

	.landing #investors img {
		max-width: 600px;
		margin-right: 70px;
	}

	/* Call to actions */

	.landing .call-to-actions img {
		height: 60px;
	}

	/* ==========================================================================
		Airdrip
	========================================================================== */

	/* Modules */

	#airdrip .panel {
		border-radius: 25px;
	}
	#airdrip ol {
		font-size: 20px;
	}

	/* Hero */

	#airdrip #hero-background {
		height: 100%;
	}
	#airdrip .bubbles-background .bubble-1 {
		background-image: url(../img/feature/bubble-1.png);
		display: block;
		height: 100px;
		background-repeat: no-repeat;
		position: absolute;
		width: 300px;
		margin-left: 50px;
		margin-top: -125px;
		z-index: -1;
		background-size: contain;
	}
	#airdrip .bubbles-background .bubble-2 {
		background-image: url(../img/feature/bubble-2.png);
		display: block;
		height: 500px;
		background-repeat: no-repeat;
		position: absolute;
		width: 100px;
		margin-left: -200px;
		margin-top: -500px;
		z-index: -1;
		background-size: contain;
	}
	#airdrip .bubbles-background .bubble-3 {
		background-image: url(../img/feature/bubble-3.png);
		display: block;
		height: 100px;
		background-repeat: no-repeat;
		position: absolute;
		width: 500px;
		margin-left: -550px;
		margin-top: 50px;
		z-index: -1;
		background-size: contain;
	}
	#airdrip .bubbles-background .bubble-4 {
		background-image: url(../img/feature/bubble-1.png);
		display: block;
		height: 50px;
		background-repeat: no-repeat;
		position: absolute;
		width: 300px;
		margin-left: 1085px;
		margin-top: -305px;
		z-index: -1;
		background-size: contain;
	}
	#airdrip .bubbles-background .bubble-5 {
		background-image: url(../img/feature/bubble-2.png);
		display: block;
		height: 500px;
		background-repeat: no-repeat;
		position: absolute;
		width: 100px;
		margin-left: 1700px;
		margin-top: -350px;
		z-index: -1;
		background-size: contain;
	}
	#airdrip .bubbles-background .bubble-6 {
		background-image: url(../img/feature/bubble-3.png);
		display: block;
		height: 150px;
		background-repeat: no-repeat;
		position: absolute;
		width: 500px;
		margin-left: 1350px;
		margin-top: 0px;
		z-index: -1;
		background-size: contain;
	}

	/* How to catch the drips */

	#airdrip #how-to-catch .panel {
		padding: 50px 50px 25px 50px;
	}
	#airdrip #how-to-catch .label {
		margin-top: 35px;
		font-style: italic;
	}

	/* What are Omm Tokens? */

	#airdrip #what-are-omm-tokens {
		margin-top: 175px;
		margin-bottom: -25px;
	}
	#airdrip #what-are-omm-tokens img {
		display: block;
		position: relative;
		top: -205px;
		left: 90px;
		width: 510px;
	}

	/* Want more? */

	#airdrip #want-more {
		margin-bottom: 35px;
	}
	#airdrip #want-more > div:nth-child(1) > div:nth-child(1) > p:nth-child(2) {
		max-width: 700px;
	}

	/* ==========================================================================
		Airdrop
	========================================================================== */

	#airdrip.airdrop .hero p.panel {
		max-width: 460px;
		margin-top: 25px;
		margin-bottom: 50px;
		font-size: 18px;
	}
	#airdrip.airdrop .airdrop-controls {
		text-align: center;
		max-width: 400px;
		margin-top: 25px;
	}
	#airdrip.airdrop .airdrop-controls h3 {
		font-size: 40px;
	}
	#airdrip.airdrop .side-by-side {
		margin-bottom: 100px;
	}
	#airdrip.airdrop .hero-background + .side-by-side {
		border-bottom: 1px solid rgba(73,84,106,0.25);
		padding-bottom: 100px;
	}
	.airdrop .grid.side-by-side > .grid-cell:first-of-type {
		margin-right: 100px;
		padding-right: 100px;
		border-right: 1px solid rgba(73,84,106,0.25);
	}
	#airdrip.airdrop #what-are-omm-tokens img {
		display: block;
		position: relative;
		top: -173px;
		left: 40px;
		width: 510px;
	}

	/* ==========================================================================
		Brand
	========================================================================== */

	/* Hero */

	#brand .hero {
		margin-bottom: 100px;
	}
	#brand .hero img {
		width: 600px;
	}
	#brand .hero-background {
		background-size: cover;
		width: 213%;
		margin-left: -57%;
		top: -400px;
	}

	/* Branding kit panel */

	#branding-kit {
		width: 1000px;
		margin: auto;
		margin-top: 150px;
		margin-bottom: 150px;
	}
	#branding-kit img {
		display: block;
		width: 455px;
		margin-left: auto;
		margin-top: 25px;
	}

	/* ==========================================================================
		How
	========================================================================== */

	/* Modules */

	#how section {
		margin-bottom: 175px;
	}

	/* Hero */

	#how #hero {
		margin-bottom: 150px;
		margin-top: 100px;
	}
	#how #hero p {
		max-width: 500px;
	}
	#how #hero img,
	#how #hero object {
		margin-top: -25px;
		height: auto;
		width: 115%;
	}

	/* Get started */

	#how #get-started {
		margin-bottom: 150px;
	}
}

/* 1600px and below */

@media (max-width: 1600px) {

	/* ==========================================================================
		Modules
	========================================================================== */

	html {
		font-size: 18px;
		overflow-x: hidden;
		position: relative;
	}
	p {
		font-size: 18px;
		line-height: 32px;
	}
	a {
		font-size: 18px;
		line-height: 32px;
	}
	p + p {
		margin-top: 25px;
	}
	.header .logo {
		margin-left: 0;
	}
	h1 {
		font-size: 60px;
		line-height: 75px;
		margin-bottom: 0;
	}
	h2 {
		line-height: 65px;
	}
	h2.separator::after,
	.separator::after {
		margin-top: 20px;
		margin-bottom: 15px;
	}
	.animation-underline:after {
		margin-top: 0;
	}
	.header .logo {
		width: 175px;
		margin-right: 0;
	}
	header a,
	footer a,
	.label {
		font-size: 16px;
	}
	ul.links li .button {
		font-size: 16px;
		padding: 3px 20px;
	}
	.eyebrow {
		margin-bottom: 0;
	}
	footer {
		margin-top: 150px;
	}

	/* Footer */

	footer {
		padding-top: 50px;
		margin-bottom: 50px;
	}
	footer .bottom-row {
		margin-top: 75px;
	}
	.footer .logo {
		width: 160px;
	}

	/* ==========================================================================
		Landing specific styles (Layout styles: sizing, spacing, etc.)
	========================================================================== */

	/* Hero */

	.hero {
		margin-top: 75px;
	}
	.hero p {
		font-size: 18px;
		line-height: 32px;
	}
	.hero-image {
		width: 925px;
		top: -75px;
		left: -50px;
	}
	.hero-image {
		width: 900px;
		top: 100px;
		left: 580px;
	}
	.hero .bubble-1 {
	    margin-left: -300px;
	    margin-top: 400px;
	}
	.hero p {
		max-width: 525px;
	}
	.hero .bubble-3 {
		margin-top: -100px;
		width: 100px;
		margin-left: 50px;
	}
	.hero .bubble-2 {
		width: 70px;
		margin-left: -700px;
		margin-top: 300px;
	}
	.hero {
		margin-bottom: 450px;
	}
	.landing .hero-background {
		background-size: cover;
		width: 2000px;
		margin-left: -54%;
		top: -550px;
		z-index: -2;
		background-repeat: no-repeat;
		height: 2000px;
		position: absolute;
		background-image: url("../img/feature/hero-background.svg");
	}


	/* TL;DR */

	.tldr {
		margin-bottom: 175px;
	}
	.tldr h2 {
		font-size: 20px;
		margin-bottom: 10px;
		line-height: 1;
		width: 100%;
	}
	.tldr p {
		font-size: 16px;
		line-height: 30px;
	}
	.tldr img {
		height: 50px;
		margin-bottom: 20px;
	}
	.tldr .grid-cell {
		margin-right: 25px;
		border-radius: 25px;
	}
	.tldr .grid-cell:last-of-type {
		margin-right: 0;
	}

	/* Intro */

	#intro {
		margin-bottom: 200px;
	}
	#intro h2 {
		max-width: 450px;
	}
	#intro .swirl {
		margin-top: 1150px;
		margin-left: 175px;
		width: 800px;
	}
	#intro figure {
		margin-top: 25px;
		margin-left: -100px;
	}
	#intro figure img {
		position: absolute;
		width: 500px;
	}
	#intro figure img:nth-of-type(1) {
		width: 125px;
		margin-left: 138px;
		margin-top: 138px;
	}
	#intro figure img:nth-of-type(2) {
		width: 250px;
		margin-left: 75px;
		margin-top: 75px;
	}
	#intro figure img:nth-of-type(3) {
		width: 400px;
	}
	#intro figure img:nth-of-type(4) {
	    width: 25px;
	    margin-left: 189px;
	    margin-top: 187px;
	}
	#intro img {
		width: 80%;
		display: block;
		margin-left: auto;
		margin-top: 0;
	}

	/* Supply */

	.landing #supply h2 {
		font-size: 42px;
	}
	.landing #supply img,
	.landing #supply video {
		width: 450px;
		margin-right: auto;
		margin-top: 15px;
	}
	#supply > div:nth-child(2) {
		margin-left: 35px;
	}
	.landing div.grid:nth-child(7) > div:nth-child(2) > p:nth-child(3) {
		min-width: 590px;
	}
	.landing div.grid:nth-child(7) > div:nth-child(2) > img:nth-child(1) {
		margin-bottom: 25px !important;
	}

	/* Borrow */

	.tech-slideshow {
		height: 97px;
		max-width: 100%;
		margin-left: initial;
	}
	.tech-slideshow > div {
		background-size: 1400px;
	}
	.shadow {
		background-image: url("../img/feature/shadow.png");
		background-size: contain;
		width: 8px;
		height: 300px;
		position: absolute;
		background-repeat: no-repeat;
		opacity: 0.3;
	}
	.shadow + .shadow {
		background-image: url("../img/feature/shadow.png");
		background-size: contain;
		width: 8px;
		height: 300px;
		margin-left: 527px;
		position: absolute;
		background-repeat: no-repeat;
		opacity: 0.3;
		transform: scaleX(-1);
	}
	.landing #graphic-liquidity-pools {
		width: 100%;
		margin-bottom: 25px;
	}
	.landing #borrow + .grid.side-by-side > .grid-cell:first-of-type {
		margin-right: 90px;
	}
	.landing #withdraw-to-bank {
		max-width: 535px;
	}
	.tech-slideshow + .tech-slideshow {
		margin-bottom: 25px;
	}

	/* Shares */

	.landing #shares img {
		margin-left: initial;
		width: 515px;
		margin-top: 35px;
	}

	/* Governance */

	.landing #governance {
		margin-bottom: 150px;
	}
	.landing #governance-background {
		margin-top: -725px;
	}

	/* Audited */

	.landing #audit img {
		margin-right: initial;
		position: absolute;
		width: 220px;
		margin-left: 305px;
		margin-top: 95px;
	}
	.landing .trustworthy-background {
		width: 250%;
		margin-top: -800px;
		margin-left: -40%;
	}
	.landing .orb {
		margin-top: -15px;
	}

	/* ==========================================================================
		Brand resources specific styles (Layout styles: sizing, spacing, etc.)
	========================================================================== */

	#branding-kit .button-multi {
		font-size: 16px;
		padding: 5px 20px;
	}
	#branding-kit img {
		margin-top: 20px;
	}
	#brand .hero {
		margin-bottom: 100px;
	}
	#brand .hero img {
		width: 535px;
	}
	#brand section {
		margin-bottom: 150px;
	}
	#brand section.feature p:last-of-type {
		margin-top: 15px;
	}
	#brand #branding-kit {
		max-width: 950px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100px;
	}
	#branding-kit > div:nth-child(1) {
		margin-right: 50px;
	}
	#brand .hero-background {
		width: 1650px;
		top: -50px;
		margin-left: -200px;
	}
	#brand .hero .bubble-1 {
	    margin-left: -700px;
	    margin-top: -190px;
	    background-image: url(../img/feature/bubble-2.png);
	    width: 100px;
	    background-size: contain;
	    opacity: 0.5;
	}
	#brand .hero .bubble-2 {
		background-image: url(../img/feature/bubble-2.png);
		width: 200px;
		background-size: contain;
		margin-left: -300px;
		opacity: 0.5;
	}
	#brand .hero .bubble-3 {
	    margin-left: 450px;
	    margin-top: -450px;
	    background-image: url(../img/feature/bubble-2.png);
		width: 120px;
		background-size: contain;
		opacity: 0.75;
	}

	/* ==========================================================================
		Airdrip specific styles (Layout styles: sizing, spacing, etc.)
	========================================================================== */

	#want-more > div:nth-child(1) > div:nth-child(1) > p:nth-child(2) {
		max-width: 640px;
	}
	#airdrip #what-are-omm-tokens img {
		display: block;
		position: relative;
		top: -190px;
		left: 100px;
		width: 510px;
	}
	#what-are-omm-tokens {
		margin-top: 150px;
		margin-bottom: -50px;
	}

	/* Want more? */

	#airdrip #want-more {
		margin-bottom: 35px;
	}

	/* bubbles */

	#airdrip .bubbles-background .bubble-1 {
		background-image: url(../img/feature/bubble-1.png);
		display: block;
		height: 100px;
		background-repeat: no-repeat;
		position: absolute;
		width: 300px;
		margin-left: 175px;
		margin-top: -255px;
		z-index: -1;
		background-size: contain;
	}
	#airdrip .bubbles-background .bubble-2 {
		background-image: url(../img/feature/bubble-2.png);
		display: block;
		height: 500px;
		background-repeat: no-repeat;
		position: absolute;
		width: 100px;
		margin-left: -150px;
		margin-top: -500px;
		z-index: -1;
		background-size: contain;
	}
	#airdrip .bubbles-background .bubble-3 {
		background-image: url(../img/feature/bubble-3.png);
		display: block;
		height: 100px;
		background-repeat: no-repeat;
		position: absolute;
		width: 500px;
		margin-left: -74px;
		margin-top: 0px;
		z-index: -1;
		background-size: contain;
	}
	#airdrip .bubbles-background .bubble-4 {
		background-image: url(../img/feature/bubble-1.png);
		display: block;
		height: 50px;
		background-repeat: no-repeat;
		position: absolute;
		width: 300px;
		margin-left: 1085px;
		margin-top: -145px;
		z-index: -1;
		background-size: contain;
	}
	#airdrip .bubbles-background .bubble-5 {
		background-image: url(../img/feature/bubble-2.png);
		display: block;
		height: 500px;
		background-repeat: no-repeat;
		position: absolute;
		width: 100px;
		margin-left: 900px;
		margin-top: -450px;
		z-index: -1;
		background-size: contain;
	}
	#airdrip .bubbles-background .bubble-6 {
		background-image: url(../img/feature/bubble-3.png);
		display: block;
		height: 150px;
		background-repeat: no-repeat;
		position: absolute;
		width: 500px;
		margin-left: 1250px;
		margin-top: 0px;
		z-index: -1;
		background-size: contain;
	}

	/* ==========================================================================
		Airdrop specific styles (Layout styles: sizing, spacing, etc.)
	========================================================================== */

	#airdrip.airdrop .hero p.panel {
		max-width: 450px;
		font-size: 18px;
	}
	#airdrip.airdrop .wrapper > main:nth-child(2) > section > div:nth-child(2) > div:nth-child(1) {
		margin-right: 0;
		max-width: 520px;
	}
	#airdrip.airdrop h2 {
		max-width: 520px;
	}
	#airdrip.airdrop .side-by-side h2 {
		font-size: 38px;
		line-height: 1.3;
		margin-bottom: 10px;
	}
	#airdrip.airdrop #what-are-omm-tokens img {
		left: 175px;
		margin-top: 15px;
	}
	#airdrip.airdrop #want-more h2 {
		max-width: initial;
	}
	#airdrip .hero p {
		font-size: 20px;
	}
	#airdrip.airdrop .hero p.panel {
		max-width: 460px;
		margin-top: 25px;
		margin-bottom: 50px;
		font-size: 18px;
	}
	#airdrip.airdrop .airdrop-controls {
		text-align: center;
		max-width: 400px;
		margin-top: 25px;
	}
	#airdrip.airdrop .airdrop-controls h3 {
		font-size: 40px;
	}
	#airdrip.airdrop .side-by-side {
		margin-bottom: 100px;
	}
	.airdrop .grid.side-by-side > .grid-cell:first-of-type {
		margin-right: 100px;
	}

	#airdrip.airdrop .hero-background + .side-by-side {
		border-bottom: 1px solid rgba(73,84,106,0.25);
		padding-bottom: 100px;
	}
	.airdrop .grid.side-by-side > .grid-cell:first-of-type {
		margin-right: 100px;
		padding-right: 100px;
		border-right: 1px solid rgba(73,84,106,0.25);
	}

	#airdrip.airdrop .bubbles-background {
	    margin-top: -300px;
	    margin-bottom: 300px;
	}

	/* ==========================================================================
		How
	========================================================================== */

	/* Modules */

	#how section {
		margin-bottom: 175px;
	}

	/* Hero */

	#how #hero {
		margin-top: 100px;
		margin-bottom: 150px;
	}
	#how #hero p {
		max-width: 500px;
	}
	#how #hero img {
		width: 115%;
		margin-top: -25px;
	}

	/* Get started */

	#how #get-started {
		margin-bottom: 150px;
	}
}

/* 1300px and below */

@media (max-width: 1300px) {

	/* ==========================================================================
		Modules
	========================================================================== */

	html {
		font-size: 18px;
	}
	.wrapper {
		max-width: 1000px;
	}
	h1,
	.landing .hero h1 {
		font-size: 52px;
		line-height: 65px;
	}
	p,
	#how li {
		font-size: 18px;
	}
	p + p {
		margin-top: 20px;
	}
	.header > div:nth-child(1) > div:nth-child(1) {
		max-width: 200px;
	}

	/* ==========================================================================
		Landing
	========================================================================== */

	/* Hero */

	.hero {
		margin-top: 50px;
		margin-bottom: 300px;
	}
	.landing .hero {
		margin-bottom: 325px;
	}
	.landing .hero .separator::after {
		width: 475px;
	}
	.hero-image {
		width: 800px;
		top: 90px;
		left: 510px;
	}
	.hero .bubble-1 {
	    margin-left: -200px;
	    margin-top: 400px;
	    width: 120px;
	    height: 150px;
	}
	.hero .bubble-2 {
		width: 70px;
		margin-left: -500px;
		margin-top: 300px;
	}
	.hero .bubble-3 {
		margin-top: -100px;
		width: 70px;
		margin-left: -100px;
	}
	.landing .hero-background {
		background-size: cover;
		width: 2000px;
		margin-left: -54%;
		top: -632px;
		z-index: -2;
		background-repeat: no-repeat;
		height: 2000px;
		position: absolute;
		background-image: url("../img/feature/hero-background.svg");
	}


	/* TL;DR */

	.tldr {
		margin-top: 35px;
		margin-bottom: 100px;
	}
	.tldr h2 {
		line-height: 30px;
	}
	.tldr img {
		height: 50px;
		margin-bottom: 15px;
	}
	.tldr .panel {
		padding: 25px;
	}

	/* Intro */

	.landing #intro {
		margin-bottom: 150px;
	}
	.landing #intro > .grid-cell:first-of-type {
		min-width: 470px;
		margin-right: 15px;
	}
	.landing #intro img {
		margin-top: 55px;
		margin-left: 50px;
		width: 435px;
	}

	/* Supply */

	.landing div.grid:nth-child(7) > div:nth-child(2) > p:nth-child(3) {
		min-width: initial !important;
	}
	.landing #graphic-available-to-supply {
		margin-bottom: 32px !important;
	}

	/* Borrow */

	.landing .tech-slideshow {
		height: 80px;
	}
	.landing .tech-slideshow > div {
		background-size: 1200px;
	}
	.landing .shadow {
		height: 150px;
	}
	.landing .shadow + .shadow {
		margin-left: 447px;
	}
	.landing #borrow-background .bubble-2 {
		top: 65px;
	}
	.landing #borrow-background .bubble-3 {
	    width: 150px;
	    margin-left: 1175px;
	    margin-top: 800px;
	}

	/* Own a piece of Omm */

	.landing #shares h2 {
		width: 520px;
	}
	.landing #shares img {
		margin-left: -50px;
		width: 485px;
		margin-top: 70px;
	}
	.landing #borrow img,
	.landing #borrow video {
		width: 450px;
	}

	/* Audit */

	.landing .orb {
		margin-top: 25px;
	}
	.landing #audit img {
		margin-left: 205px;
		margin-top: 130px;
	}
	.landing #borrow + .side-by-side {
		margin-bottom: 150px;
	}

	/* Investors */

	.landing #investors img {
		max-width: 470px;
		margin-right: 50px;
		margin-top: 35px;
	}

	/* ==========================================================================
		Brand
	========================================================================== */

	.wallpaper .button {
		transform: initial;
		display: block;
		max-width: 115px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* 1100px and below */

@media (max-width: 1100px) {

	/* ==========================================================================
		Modules
	========================================================================== */

	.wrapper {
		max-width: 900px;
	}
	#branding-kit img {
		width: 410px;
	}

	/* Footer */

	.footer > div:nth-child(1) > div:nth-child(1) {
		max-width: 250px;
	}

	/* Hero */

	.hero p {
		max-width: 400px;
	}
	.landing .hero h1 {
		font-size: 48px;
	}
	.landing .hero .separator::after {
		width: 435px;
	}
	.hero-image {
		width: 750px;
		top: 80px;
		left: 475px;
	}

	/* Intro */

	.landing #intro img {
		margin-left: 5px;
		margin-top: 75px;
		width: 420px;
	}
	#intro > .grid-cell:first-of-type {
		margin-right: 150px;
	}

	/* Supply */

	.landing #supply h2 {
		font-size: 37px;
		line-height: 1.4;
	}

	/* Borrow */

	.landing #borrow h2 {
		font-size: 37px;
		line-height: 1.4;
	}

	/* Audit */

	.landing #audit img {
		margin-left: 105px;
		margin-top: 125px;
	}
	.landing .orb {
		margin-top: 25px;
	}

	.landing #supply img, .landing #supply video,
	.landing #borrow img, .landing #borrow video {
		width: 410px;
	}

	.landing #shares h2 {
		width: 100%;
	}

	/* Investors */

	.landing #investors img {
		max-width: 410px;
		margin-right: 30px;
		margin-top: 70px;
	}

	/* ==========================================================================
		Why
	========================================================================== */

	/* Hero */

	#why .hero {
		margin-top: 75px;
	}

	/* Intro */

	#why #intro img {
		position: absolute;
		width: 950px;
		top: -120px;
		left: -125px;
	}

	/* Calculated to minimize risk and maximize participation. */

	#why #maximise-rewards img {
		width: 385px;
	}

	/* Designed to outperform its peers by at least 228%. */



	/* Influence the future of finance. */

	#why .future-direction {
		width: 325px;
		margin-top: 25px;
	}

	/* ==========================================================================
		Airdrop
	========================================================================== */

	#airdrip.airdrop #what-are-omm-tokens img {
		display: block;
		position: relative;
		top: -118px;
		left: 30px;
		width: 450px;
	}

}

/* 1000px and below */

@media (max-width: 1000px) {

	/* ==========================================================================
		Modules
	========================================================================== */

	.wrapper {
		max-width: 800px;
	}
	.header > .grid.grid-center > .grid-cell:nth-of-type(2) {
		display: block;
	}

	/* ==========================================================================
		Landing
	========================================================================== */

	.landing .hero h1 {
		font-size: 44px;
		line-height: 1.3;
	}
	.landing .hero .separator::after {
		width: 410px;
	}
	.hero-image {
		left: 450px;
	}
	.hero .bubble-3 {
		margin-top: -160px;
		width: 70px;
		margin-left: -15px;
	}

	/* ==========================================================================
		Landing
	========================================================================== */

	.landing #governance img {
		width: 210%;
		border-radius: 10px;
	}

	#airdrip.airdrop .hero img {
		width: 250px;
	}

}



@media (min-width: 801px) and (max-width: 1000px) {
	
	/* How it works */
	
	#how #supply video,
	#how #borrow video {
		width: 100%;
	}
	#supply > div:nth-child(2),
	#borrow > div:nth-child(2),
	#liquidity > div:nth-child(2) {
		margin-left: 5%;
	}
	#how #supply,
	#how #borrow,
	#how #liquidity {
		align-items: stretch;
	}
	#how #rewards img,
	#how #stake img {
		max-width: 100%;
	}
}



/* 800px and below */

@media (max-width: 800px) {

	/* ==========================================================================
		Modules
	========================================================================== */

	html {
		font-size: 16px;
	}
	body {
		padding-left: 5%;
		overflow-x: hidden;
		padding-right: 5%;
	}
	h1 {
		font-size: 45px;
		line-height: 1.2;
	}
	.header {
		margin-bottom: 25px;
	}
	.header .logo {
		width: 85px;
	}
	.wrapper {
		width: 100%;
	}
	.intro .animation-container {
		position: relative;
		transform: scale(0.9);
		margin-top: 220px;
		margin-left: -125px;
		margin-bottom: 115px;
	}
	.section h2 {
		margin-right: 0;
	}

	/* Countdown */

	.countdown-remaining {
		position: absolute;
		top: 0px;
		left: 150px;
		border-radius: 10px;
		font-size: 14px;
		padding: 5px 15px;
		z-index: 9;
		width: 150px;
	}
	.countdown-remaining p {
		font-size: 12px;
	}

	/* Calls to action */

	.call-to-actions h2 + .grid {
		flex-direction: column;
	}
	.call-to-actions a.grid-cell {
		margin-bottom: 25px;
	}

	/* ==========================================================================
		Landing specific styles (Layout styles: sizing, spacing, etc.)
	========================================================================== */

	/* Header */

	.header ul.links {
		display: none;
	}
	header a, footer a {
		font-size: 16px;
	}
	header ul.links li .button,
	footer ul.links li .button {
		font-size: 14px;
		padding: 3px 15px;
	}
	.header > div:nth-child(1) > div:nth-child(1) {
		max-width: 100px;
	}

	.landing .hero h1 {
		max-width: 410px;
		margin-left: auto;
		margin-right: auto;
	}
	.landing .hero p {
		max-width: 410px;
		margin-left: auto;
		margin-right: auto;
	}


    /* Display mobile 'Menu' button */

    .header .menu {
        float: right;
    }
    .header .menu #show-menu-label {
        display: block;
        float: right;
        padding: 3px 12px;
        font-size: 14px;
        color: #49546a;
		border: 2px solid;
		border-image-source: linear-gradient(45deg, #9d4df1, #00d3c2);
		border-image-slice: 1;
        border-radius: 5px;
        cursor: pointer;
        transition: border 0.2s ease;
    }
    .no-touch .header .menu #show-menu-label:hover {
        transition: background-color 0.3s ease;
    }
    .header .menu input[type="checkbox"]:checked + #show-menu-label {
        transition: background-color 0.3s ease;
    }

    /* Show "hidden" links when menu is active */

    .header .menu .menu-items {
        position: absolute;
        left: 0;
        right: 0;
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;
        transform: translateX(-100%);
    }
    .header .menu .menu-items li {
        opacity: 0;
        transform: translateX(-18px);
        transition: transform 0.3s ease, opacity 0.6s ease;
    }

    .header .menu li .animation-underline:hover::after {
    	width: 50%;
    	margin: auto;
    }

    /* Menu list styles */

	.header ul.links::after {
		content: '';
		position: absolute;
		left: 50%;
		top: initial;
		bottom: -24px;
		border: solid transparent;
		height: 0;
		width: 0;
		pointer-events: none;
		border-color: transparent;
		border-top-color: #ffffff;
		transform: initial;;
		border-width: 12px;
		margin-left: -21px;
		left: 90%;
		top: -24px;
		border-bottom-color: #ffffff;
		border-top-color: transparent;
	}

    .header .menu input[type="checkbox"]:checked ~ .links {
        position: absolute;
        top: 30px;
        right: 0;
        padding: 25px;
        background-color: #ffffff;
        transform: translateX(0);
        z-index: 99;
        transition: opacity 0.6s ease;
        display: block;
        box-shadow: 21.213px 21.213px 35px 0px rgba(174, 196, 215, 0.5);
    }
    .header .menu ul,
    .footer .menu ul {
        min-width: initial;
    }

    .header .menu .links li,
    .header .menu .links li a {
        width: 100%;
        text-align: center;
    }
    .header .menu .animation-underline.active::after {
        width: 50px;
		margin-left: auto;
		margin-right: auto;
    }
	.header .menu .links {
		width: 240px;
		float: right;
		right: 0;
		border-radius: 20px;
		padding: 25px;
		display: none;
	}
	.header .menu .links li {
		margin-left: 0;
		margin-bottom: 15px;
	}
	.header .menu .links li:last-of-type {
		margin-bottom: 0;
	}
	.header > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
		display: block;
	}
	.header .logo {
		width: 135px;
	}

	/* Hero */

	.hero,
	.landing .hero {
		margin-top: 0;
		flex-direction: column-reverse;
		margin-bottom: 75px;
	}
	.hero p {
		max-width: 100%;
		font-size: 16px;
		line-height: 28px;
	}
	.hero-image {
		width: 100%;
		top: 0;
		left: 0;
		position: relative;
	}
	.landing .hero .separator::after {
		width: 100%;
	}

	/* TL;DR */

	.tldr {
		flex-direction: column;
		margin-bottom: 100px;
	}
	.tldr .grid-cell {
		margin-right: 0;
		margin-bottom: 25px;
	}

	/* Intro */

	#intro {
		flex-direction: column-reverse;
	}
	.landing #intro > .grid-cell:first-of-type {
		min-width: 100%;
		margin-right: 0;
	}
	.landing #intro img {
		width: 75%;
		margin-left: 0;
	}
	.landing .omm-animation-container {
		transform: scale(1.2) translate(0%, 0%);
		width: 100%;
		margin-bottom: 225px;
		margin-top: 190px;
	}

	/* Supply */

	.landing #supply,
	.landing #supply + .side-by-side {
		flex-direction: column;
	}
	.landing #supply {
		width: 100%;
	}
	.landing #supply img,
	.landing #supply video {
		width: 100%;
	}
	#supply > div:nth-child(2) {
		margin-left: 0;
	}
	.landing #supply-background .bubble-1 {
		margin-top: 755px;
		width: 150px;
		margin-left: -50px;
		height: 200px;
	}

	/* Borrow */

	.landing #borrow,
	.landing #borrow + .side-by-side {
		flex-direction: column;
	}
	.grid.side-by-side > .grid-cell:first-of-type {
		margin-right: 0;
	}
	.landing #borrow img,
	.landing #borrow video {
		width: 100%;
	}
	.landing #borrow + .grid.side-by-side > .grid-cell:first-of-type {
		margin-right: 0;
	}
	.landing #borrow-background .bubble-1 {
		margin-top: 580px;
	}

	/* Shares */

	.landing #shares {
		flex-direction: column-reverse;
	}
	.landing #shares h2 {
		width: 100%;
	}
	.landing #shares img {
		margin-left: auto;
		margin-right: auto;
		width: 100%;
	}

	/* Governance */

	.landing #governance .content {
		width: 100%;
	}

	.landing #supply-balanced {
		flex-direction: column;
	}

	/* Audit */

	.landing #audit {
		flex-direction: column-reverse;
	}
	#audit > div:nth-child(2) {
		margin-bottom: 25px;
	}
	.landing #audit img {
	    width: 200px;
	    display: block;
	    left: 50%;
	    margin-left: -82px;
	    margin-top: 62px;
	}
	.landing .orb {
		margin: 0 auto;
		width: 300px;
		height: 300px;
	}

	.landing #investors {
		flex-direction: column;
	}
	.landing #investors img {
		margin-left: 0;
		max-width: 100%;
	}

	/* Take the next step */

	.call-to-actions a.grid-cell {
		margin-right: 0;
	}

	/* Footer */

	footer > .grid {
		flex-direction: column;
	}
	footer > .grid:last-of-type {
		flex-direction: column-reverse;
		margin-top: 15px;
	}
	.footer .social-links {
		padding-left: 0;
		margin-bottom: 15px;
	}
	footer ul.links.secondary {
		margin-top: 0;
	}
	ul.links li .button {
		margin-top: 5px;
	}
	footer ul.links {
		text-align: center;
	}
	footer ul.links li {
		margin: 0;
		margin-top: 15px;
		margin-bottom: 15px;
		display: block;
	}
	footer .label,
	footer ul.links li .button {
		font-size: 16px;
	}
	footer .label {
		text-align: center;
	}

	/* ==========================================================================
		Airdrip
	========================================================================== */

	/* Hero */

	#airdrip-controls h3 {
		font-size: 16px;
	}
	#airdrip-controls p {
		font-size: 16px;
	}
	#airdrip-controls .border-right {
		max-width: 140px;
	}
	#airdrip .hero-background {
		width: 1000px;
		margin-left: -29%;
		top: -880px;
	}

	/* How to catch? */

	#airdrip #how-to-catch h2 {
		text-align: left;
	}
	#airdrip #how-to-catch h2::after {
		margin-left: initial;
	}
	#airdrip #how-to-catch > .grid {
		flex-direction: column;
	}
	#airdrip #how-to-catch .panel:first-of-type {
		margin-right: 0;
		margin-bottom: 35px;
	}

	/* What are Omm tokens? */

	#airdrip #what-are-omm-tokens {
		margin-bottom: 50px;
	}
	#airdrip #what-are-omm-tokens h2 {
		width: 100%;
	}
	#airdrip #what-are-omm-tokens > .grid {
		flex-direction: column-reverse;
	}
	#airdrip #what-are-omm-tokens img {
		top: 0;
		width: 85%;
		left: 0;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 25px;
	}

	/* Want more? */

	#airdrip #want-more h2 {
		text-align: left !important;
	}
	#airdrip #want-more h2::after {
		margin-left: initial;
	}

	/* More how? */

	#airdrip #more-how {
		margin-bottom: 0;
	}
	#airdrip #more-how > .grid {
		flex-direction: column;
	}
	#airdrip #more-how .grid-cell {
		margin-right: 0;
		margin-bottom: 35px;
	}

	/* ==========================================================================
		Airdrop
	========================================================================== */

	/* More how? */

	#airdrip.airdrop #airdrip-controls {
		width: 100%;
		margin-top: 35px;
		margin-bottom: 50px;
	}
	#airdrip.airdrop .hero p.label:nth-child(4) {
		font-size: 16px;
	}
	#airdrip.airdrop #airdrip-controls > div:nth-child(1) > div:nth-child(1) {
		margin-bottom: 0;
		padding-bottom: 0;
	}

	/* More how? */

	#airdrip.airdrop #active-voters > .grid {
		flex-direction: column;
	}

	/* More how? */

	#airdrip.airdrop #balanced-lps > .grid {
		flex-direction: column;
	}

	/* More how? */

	#airdrip.airdrop #omm-community > .grid {
		flex-direction: column;
	}

	/* More how? */

	#airdrip.airdrop #aave-compound > .grid {
		flex-direction: column;
	}

	/* More how? */

	#airdrip.airdrop #what-are-omm-tokens {
		margin-bottom: 150px;
	}
	#airdrip.airdrop #what-are-omm-tokens img {
		left: 0;
		margin-top: 25px;
		width: 50%;
		margin-left: initial;
		top: 0;
	}

	/* Column */

	#airdrip.airdrop .side-by-side {
		flex-direction: column;
	}
	.airdrop .grid.side-by-side > .grid-cell:first-of-type {
		margin-right: 0;
	}
	#airdrip.airdrop .wrapper > main:nth-child(2) > section > div:nth-child(2) > div:nth-child(1) {
		max-width: 100%;
	}
	#airdrip.airdrop .side-by-side {
		margin-bottom: 0;
	}
	#airdrip.airdrop .side-by-side > .grid-cell {
		margin-bottom: 75px;
	}
	#airdrip.airdrop .airdrop-controls {
		max-width: 100%;
	}
	#airdrip.airdrop .hero-background + .side-by-side {
		padding-bottom: 0;
		border-bottom: none;
	}
	.airdrop .grid.side-by-side > .grid-cell:first-of-type {
		margin-right: 0;
		padding-right: 0;
		border-right: none;
	}

	/* ==========================================================================
		Brand resources specific styles (Layout styles: sizing, spacing, etc.)
	========================================================================== */

	/* Hero */

	#brand .hero {
		flex-direction: column;
	}
	#brand .hero .panel {
		margin-top: 25px;
		margin-bottom: 0;
	}
	#brand .hero h2 {
		font-size: 30px;
	}
	#branding-kit {
		flex-direction: column;
	}
	#branding-kit img {
		width: 100%;
	}
	#branding-kit > div:nth-child(1) {
		margin-right: 0;
	}

	/* Logo */

	#brand .feature.logo {
		flex-direction: column;
	}

	/* Design system */

	#brand .feature.design-system {
		flex-direction: column;
	}

	/* Typography */

	#brand .feature.typography {
		flex-direction: column;
	}

	/* Wallpaper */

	#brand .feature.wallpapers {
		flex-direction: column;
	}
	.grid.wallpaper {
		flex-direction: column;
	}
	.wallpaper > .grid-cell:first-of-type {
		margin-right: 0;
	}

	/* Other */

	#brand section.feature > .grid-cell:last-of-type > .grid > .grid-cell:first-of-type {
		margin-right: 50px;
	}
	#brand section.grid:nth-child(3) > div:nth-child(1) {
		margin-bottom: 25px;
	}
	#brand section.feature > .grid-cell:last-of-type {
		margin-left: 0;
		width: 100%;
		margin-top: 25px;
	}
	#brand section.logo > .grid-cell:last-of-type img {
		width: 80%;
		margin-left: 10%;
		margin-top: 25px;
	}

	#airdrip.airdrop .hero img {
		width: 200px;
	}

	/* ==========================================================================
		How
	========================================================================== */

	/* Modules */

	#how .panel {
		margin-right: 0;
		margin-bottom: 35px;
	}

	/* Hero */

	#how #hero {
		flex-direction: column-reverse;
		margin-bottom: 50px;
	}
	#how #hero img,
	#how #hero object {
		width: 100%;
		margin-top: -75px;
	}

	/* Get started */

	#how #get-started > .panel {
		margin-right: 0;
	}

	/* Supply */

	#how #supply {
		flex-direction: column-reverse;
	}
	#how #supply video,
	#how #borrow video {
		width: 100%;
		margin-bottom: 25px;
	}

	/* Borrow */

	#how #borrow {
		flex-direction: column;
	}

	/* Rewards */

	#how #rewards img {
		width: 100%;
		border-radius: 5px;
	}

	/* Stake */

	#how #stake img {
		width: 100%;
		border-radius: 5px;
	}

	/* Governance */

	#how #governance .side-by-side {
		flex-direction: column;
	}
	#how #governance object {
		margin-bottom: 30px;
		transform: translate(0, 0);
		width: 100%;
	}
	#how #governance .vote-omm img {
		width: 100%;
		margin-left: 0;
	}
	#how #governance .vote-p-reps {
		margin-top: 100px;
	}

	/* Liquidity */

	#how #liquidity {
		flex-direction: column;
	}
	#how #liquidity .grid-cell:nth-of-type(2) {
		margin-top: 30px;
	}

	/* Get started */

	#how #get-started {
		flex-direction: column;
	}

}

/* 600px and below */

@media (max-width: 600px) {

	/* ==========================================================================
		HTML / Modules
	========================================================================== */	

	h2 {
		font-size: 40px;
		line-height: 1.3;
	}

	.header .logo {
		width: 125px;
	}

	/* ==========================================================================
		Landing page
	========================================================================== */

	/* Hero */

	.landing .hero {
		margin-bottom: 25px;
	}
	.hero-image {
		width: 125%;
		top: 0;
		left: 0;
		position: relative;
		margin-bottom: 0px;
	}
	.hero .bubble-1 {
		width: 50px;
		margin-left: 170px;
		margin-top: -475px;
	}
	.hero .bubble-3 {
		margin-top: -100px;
		width: 100px;
		margin-left: -60px;
	}

	/* Intro */

	#intro h2 {
		max-width: 100%;
	}
	.tldr h2 {
		margin-bottom: 0;
	}
	#intro > .grid-cell:first-of-type {
		min-width: initial;
		margin-right: 0;
	}
	#intro figure img:nth-of-type(4) {
	    max-width: 20px;
	    margin-left: 46%;
	    margin-top: 45%;
	}
	#intro figure {
		height: 300px;
	}
	#intro .swirl {
		margin-top: 1575px;
		margin-left: 75px;
	}
	.tldr .grid-cell:last-of-type {
		margin-bottom: 0;
	}
	#intro img {
		margin-left: 0;
		margin-bottom: 15px;
	}
	#intro {
		margin-bottom: 100px;
	}

	/* Supply */

	.landing #supply {
		margin-bottom: 75px;
	}
	.landing #supply video {
		margin-top: 0;
		margin-bottom: 35px;
	}
	div.grid:nth-child(7) > div:nth-child(1) > img:nth-child(1) {
		width: 100% !important;
		margin-left: 0 !important;
	}

	/* Borrow */

	.landing .shadow + .shadow {
		margin-left: 0;
		right: 0;
	}
	.landing #borrow video {
		margin-top: 25px;
	}
	.landing div.grid:nth-child(10) > div:nth-child(2) {
		margin-top: 75px;
	}
	div.grid:nth-child(7) > div:nth-child(2) > img:nth-child(1) {
		margin-top: 50px !important;
		margin-bottom: 25px !important;
	}

	/* Fair */

	.landing #fair {
		flex-direction: column;
		margin-bottom: 125px;
	}
	.landing #fair img {
		max-width: 100%;
	}
	.landing #trustworthy h2 {
		max-width: 250px;
	}

	/* ==========================================================================
		Why
	========================================================================== */

	#why .hero img {
		margin-top: 0px;
		width: 400px;
	}
	#why #intro img {
		position: relative;
		width: 175%;
		display: block;
		top: 0;
		left: 0;
		height: 290px;
		margin-top: 0;
	}

	#why .quotes {
		margin-top: 25px;
	}
	#why .quotes .panel {
		margin-bottom: 25px;
	}
	#why .quotes + .quotes {
		margin-top: 0;
	}
	#why #maximise-rewards img {
		width: 100%;
		left: 0;
		margin-top: 50px;
		margin-left: 0;
	}
	#why .future-direction {
		margin-top: 35px;
		width: 100%;
		margin-left: initial;
	}
	#why #outperform img {
		width: 106%;
		margin-top: 35px;
	}

	/* ==========================================================================
		How it works specific styles (Layout styles: sizing, spacing, etc.)
	========================================================================== */

	#how .hero {
		margin-bottom: 35px;
	}
	#how #get-started p {
		text-align: left;
	}
	#how #claim-and-stake img {
		margin-top: 35px;
	}
	#how #monitor-and-adjust video {
		width: 180%;
		margin: 0;
		margin-left: -70%;
		margin-top: 25px;
		margin-bottom: 25px;
	}
	#how #view-and-manage img {
		width: 100%;
		margin: 0;
		margin-top: 25px;
	}
	#how #swap-assets img {
		width: 100%;
	}
	#how #return-assets img {
		width: 100%;
	}
	#how #supply-liquidity video {
		width: 250%;
	}
	#how #liquidate img {
		width: 250px;
	}

	/* ==========================================================================
		Brand
	========================================================================== */

	/* Typography */

	#brand section.grid:nth-child(3) > div:nth-child(2) > div:nth-child(1) {
		flex-direction: column;
	}
	#brand section.feature > .grid-cell:last-of-type > .grid > .grid-cell:first-of-type {
		margin-right: 0;
		margin-bottom: 25px;
	}
	#brand section.feature > .grid-cell:last-of-type {
		width: 100%;
	}
	#brand section.grid:nth-child(3) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) {
		margin-left: 0;
	}
	#brand section.logo > .grid-cell:last-of-type img {
		margin-left: 0;
		width: 100%;
	}
	#brand section.grid:nth-child(4) > div:nth-child(2) > div:nth-child(1) {
		flex-direction: column;
		text-align: center;
		margin-top: 25px;
	}
	.brand-circle {
		margin: 0 auto;
	}
	#brand section {
		margin-bottom: 75px;
	}

	/* ==========================================================================
		Airdrip
	========================================================================== */

	#airdrip #hero-background {
		height: 100%;
	}
	#airdrip-controls > div:nth-child(1) {
		flex-direction: column;
	}
	#airdrip-controls > div:nth-child(1) > div:nth-child(1) {
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	/* bubbles */

	#airdrip .bubbles-background .bubble-1 {
		height: 60px;
		width: 300px;
		margin-left: 0%;
		margin-top: -255px;
	}
	#airdrip .bubbles-background .bubble-2 {
		background-image: url(../img/feature/bubble-2.png);
		height: 500px;
		width: 50px;
		margin-left: 10%;
		margin-top: -430px;
	}
	#airdrip .bubbles-background .bubble-3 {
		height: 100px;
		width: 500px;
		margin-left: -74px;
		margin-top: 50px;
	}
	#airdrip .bubbles-background .bubble-4 {
		height: 35px;
		width: 300px;
		margin-left: 90%;
		margin-top: -145px;
	}
	#airdrip .bubbles-background .bubble-5 {
		height: 500px;
		width: 100px;
		margin-left: 82%;
		margin-top: -350px;
	}
	#airdrip .bubbles-background .bubble-6 {
		height: 150px;
		width: 500px;
		margin-left: 1250px;
		margin-top: 0px;
	}
	#airdrip.airdrop .bubbles-background {
	    margin-top: -300px;
	    margin-bottom: 300px;
	    margin-left: 0px;
	}

}

/* 400px and below */

@media (max-width: 400px) {



	.landing #governance h2 {
		text-align: left;
	}
	.countdown-remaining {
		top: 45px;
		left: 0px;
		padding: 2px 10px;
		width: initial;
	}
	.landing .hero-background {
		top: -977px;
	}
	.landing .hero .bubble-1 {
		width: 50px;
		margin-left: 170px;
		margin-top: -370px;
	}

	.landing .hero h1 {
		line-height: 55px;
	}

	/* Intro */

	.landing #intro h2 {
		font-size: 39px;
	}

	.landing #supply + .side-by-side,
	.landing #borrow + .side-by-side,
	.landing #shares,
	.landing #governance {
		margin-bottom: 75px;
	}
	.landing #governance img {
		width: 210%;
		border-radius: 10px;
	}
	.landing #governance-background {
		margin-top: -690px;
		width: 300%;
		margin-left: -82%;
	}
	div.grid:nth-child(10) > div:nth-child(2) > img:nth-child(1) {
		margin-bottom: 20px !important;
		width: 80% !important;
	}
	.call-to-actions h2 {
		text-align: left !important;
		max-width: 200px;
		margin: inherit;
		margin-bottom: 35px;
	}
	body {
		margin-bottom: 0;
	}

	/* ==========================================================================
		Brand
	========================================================================== */

	#airdrip #want-more h2 {
		max-width: 300px;
	}

}

/* Marketing dark mode */

@media (prefers-color-scheme: dark) {

	/* ==========================================================================
		Modules (Dark)
	========================================================================== */

	/* Header */

	.logo {
		display: none;
	}
	.logo.dark {
		display: block;
	}
	.header .menu input[type="checkbox"]:checked ~ .links {
		background-color: #3f414a;
		box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
	}
	.header .menu #show-menu-label {
		color: #ffffff;
	}
	.header ul.links::after {
		border-bottom-color: #3f414a;
	}

	/* Text styles */

	.label {
		color: #a8b1c4;
	}

	/* Box styles */

	.subtle-box {
		background-color: #32343c;
	}

	/* Buttons */

	.header .button:hover,
	.footer .button:hover,
	.button-multi:hover {
		color: #a8b1c4;
	}

	/* ==========================================================================
		Landing (Dark)
	========================================================================== */

	/* Hero */

	.hero-image {
		display: none;
	}
	.hero-image.dark {
		display: block;
	}
	.landing .hero-background {
		background-image: url("../img/feature/hero-background-dark2.png");
	}
	.hero .bubble-1 {
		background-image: url(../img/feature/bubble-1-dark.png);
		margin-left: -320px;
		margin-top: 525px;
		height: 140px;
	}
	.hero .bubble-2 {
		background-image: url(../img/feature/bubble-2-dark.png);
		width: 70px;
		margin-left: -825px;
		margin-top: 300px;
	}
	.hero .bubble-3 {
		background-image: url(../img/feature/bubble-3-dark.png);
		margin-top: -130px;
		width: 75px;
		margin-left: -55px;
	}

	.landing #supply img,
	.landing #supply video,
	.landing #borrow img,
	.landing #borrow video {
		box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
	}

	/* Supply */

	.landing #supply video {
		display: none;
	}
	.landing #supply video.dark {
		display: block;
	}
	.landing #supply-background .bubble-1 {
		background-image: url(../img/feature/bubble-3-dark.png);
		height: 135px;
	}
	.landing #supply-background .bubble-2 {
		background-image: url(../img/feature/bubble-3-dark.png);
		width: 60px;
	}
	.landing #supply-background .bubble-3 {
		background-image: url(../img/feature/bubble-3-dark.png);
		width: 40px;
	}
	#graphic-bridge {
		display: none;
	}
	#graphic-bridge.dark {
		display: block;
	}

	/* Available to supply */

	#graphic-available-to-supply {
		display: none !important;
	}
	#graphic-available-to-supply.dark {
		display: block !important;
		width: 100%;
		margin: 0 auto;
		display: block;
		margin-bottom: 35px;
		margin-top: -10px;
	}

	/* Liquidity pools */

	#graphic-liquidity-pools {
		display: none;
	}
	#graphic-liquidity-pools.dark {
		display: block;
	}

	/* Borrow */

	.landing #borrow video {
		display: none;
	}
	.landing #borrow video.dark {
		display: block;
	}
	.tech-slideshow {
		display: none;
	}
	.tech-slideshow.dark {
		display: block;
	}
	.tech-slideshow.dark > div {
		background: url(../img/feature/bank-accounts-dark.png);
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		transform: translate3d(0, 0, 0);
		background-size: 1500px;
	}
	.landing #borrow-background .bubble-1,
	.landing #borrow-background .bubble-2,
	.landing #borrow-background .bubble-3 {
		background-image: url(../img/feature/bubble-1-dark.png);
	}
	.landing #borrow-background .bubble-2 {
		top: 30px;
		left: 670px;
		width: 55px;
	}
	.landing #borrow-background .bubble-3 {
		width: 135px;
		margin-left: 1450px;
		margin-top: 900px;
	}

	/* Shares */

	.landing #shares img {
		display: none;
	}
	.landing #shares img.dark {
		display: block;
	}

	/* Governance */

	.landing #governance img {
		display: none;
	}
	.landing #governance img.dark {
		display: block;
	}

	/* Security */

	.orb {
		display: none;
	}
	.landing #audit img {
	    margin-top: 5px;
	    margin-right: 0;
	    position: absolute;
	    width: 435px;
	    margin-left: 165px;
	}
	.trustworthy-background {
		display: none;
	}

	/* Investors */

	.landing #investors img {
		display: none;
	}
	.landing #investors img.dark {
		display: block;
	}

	/* Footer */

	.footer .social-links a {
		background-color: #3f414a;
		border: 2px solid #3f414a;
	}
	.footer .label {
		color: #7f8898;
	}

	/*  */

	.tldr .grid-cell,
	.call-to-actions a.grid-cell {
		background-image: none;
		box-shadow: 0 2.8px 2.2px rgba(35, 36, 41, 0.034), 0 6.7px 5.3px rgba(35, 36, 41, 0.048), 0 12.5px 10px rgba(35, 36, 41, 0.06), 0 22.3px 17.9px rgba(35, 36, 41, 0.072), 0 41.8px 33.4px rgba(35, 36, 41, 0.086), 0 100px 80px rgba(35, 36, 41, 0.12);
	}
	p {
		color: #a8b1c4;
	}
	.text-bold {
		color: #ffffff;
	}

	.landing #supply-background .swirls {
		background-image: none;
	}
	.landing #borrow-background .swirls {
		background-image: none;
	}
	header a,
	footer a,
	ul.links li .button {
		color: #ffffff;
	}

	/* ==========================================================================
		Branding (Dark)
	========================================================================== */

	/* Hero */

	#brand .hero-background {
		display: none;
	}

	/* Branding kit */

	#branding-kit {
		box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
	}
	#branding-kit .button-multi {
		color: #ffffff;
	}
	#branding-kit img {
		display: none;
	}
	#branding-kit img.dark {
		display: block;
	}

	/* ==========================================================================
		How it works (Dark)
	========================================================================== */

	/* Hero */

	#how #hero img.dark {
		display: block;
	}
	#how .hero-background {
		background-image: none;
	}
	#how .hero-background .bubble-1 {
		background-image: url(../img/feature/bubble-1-dark.png);
	}
	#how .hero-background .bubble-2 {
		background-image: url(../img/feature/bubble-2-dark.png);
	}
	#how .hero-background .bubble-3 {
		background-image: url(../img/feature/bubble-3-dark.png);
	}
	#how .hero-background .bubble-4 {
		background-image: url(../img/feature/bubble-3-dark.png);
	}
	#how .hero-background .bubble-5 {
		background-image: url(../img/feature/bubble-1-dark.png);
	}

	/* Get started */

	#how #get-started > .panel {
		box-shadow: 0 2.8px 2.2px rgba(35, 36, 41, 0.034), 0 6.7px 5.3px rgba(35, 36, 41, 0.048), 0 12.5px 10px rgba(35, 36, 41, 0.06), 0 22.3px 17.9px rgba(35, 36, 41, 0.072), 0 41.8px 33.4px rgba(35, 36, 41, 0.086), 0 100px 80px rgba(35, 36, 41, 0.12);
	}

	/* Supply */

	#how #supply video {
		display: none;
	}
	#how #supply video.dark {
		display: block;
	}
	#how #supply-background .swirls {
		display: none;
	}
	#how #supply-background .bubble-1 {
		background-image: url(../img/feature/bubble-3-dark.png);
	}
	#how #supply-background .bubble-2 {
		background-image: url(../img/feature/bubble-3-dark.png);
	}
	#how #supply-background .bubble-3 {
		background-image: url(../img/feature/bubble-3-dark.png);
	}

	/* Borrow */

	#how #borrow video {
		display: none;
	}
	#how #borrow video.dark {
		display: block;
	}
	#how #borrow-background .bubble-1 {
		background-image: url(../img/feature/bubble-1-dark.png);
	}
	#how #borrow-background .bubble-2 {
		background-image: url(../img/feature/bubble-1-dark.png);
	}
	#how #borrow-background .bubble-3 {
		background-image: url(../img/feature/bubble-1-dark.png);
	}

	/* Rewards */

	#how #rewards img {
		display: none;
	}
	#how #rewards img.dark {
		display: block;
	}

	/* Stake */

	#how #stake img {
		display: none;
	}
	#how #stake img.dark {
		display: block;
	}

	/* Governance */

	#how #governance .vote-omm img {
		display: none;
	}
	#how #governance .vote-omm img.dark {
		display: block;
	}
	#how #governance .vote-p-reps img {
		display: none;
	}
	#how #governance .vote-p-reps img.dark {
		display: block;
		box-shadow: 0 2.8px 2.2px rgba(35, 36, 41, 0.034), 0 6.7px 5.3px rgba(35, 36, 41, 0.048), 0 12.5px 10px rgba(35, 36, 41, 0.06), 0 22.3px 17.9px rgba(35, 36, 41, 0.072), 0 41.8px 33.4px rgba(35, 36, 41, 0.086), 0 100px 80px rgba(35, 36, 41, 0.12);
	}

	/* Liquidity */

	#how #liquidity img {
		display: none;
	}
	#how #liquidity img.dark {
		display: block;
	}

}