/*
* Balanced
* Marketing CSS
* Version 2.2
* Last updated 20/4/24
*/

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

body {
	max-width: initial;
	overflow-x: hidden;
}
.wrapper {
	position: relative;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* Header */

.header .logo,
.footer .logo {
	height: auto;
	width: 125px;
	margin-left: 0;
}

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 a,
footer a {
	font-size: 18px;
	color: #ffffff;
}

/* Footer */

footer {
	padding-top: 50px;
	margin-bottom: 25px;
}
footer .bottom-row {
	margin-top: 75px;
}
footer .bottom-row .label {
	font-size: 18px;
	line-height: 1.3;
}

/* Elements */

h1 {
	font-family: 'tex-gyre-adventor-bold', sans-serif;
	font-size: 60px;
	line-height: 72px;
	margin-bottom: 25px;
}
h2 {
	font-size: 50px;
	line-height: 70px;
	margin-bottom: 25px;
}
p {
	font-size: 20px;
	color: rgba(255,255,255,0.75);
	line-height: 35px;
}
a {
	font-size: 20px;
	line-height: 35px;
}
p + p {
	margin-top: 15px;
}
section {
	margin-bottom: 200px;
}

/* Citation */

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

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

/* Link styles */

.subtle-links {
	color: #ffffff;
	font-size: 16px;
}
.label {
	color: rgba(255,255,255,0.75);
}
.panel {
	background: linear-gradient(0deg, #0c2a4d, #15375e);
	border-radius: 25px;
}
.arrow-right::after {
	content: url(../svg/arrow.svg);
	position: absolute;
	width: 18px;
	margin-left: 10px;
	margin-top: 2px;
	transition: margin 0.3s ease;
}

/* Breadcrumbs */

.breadcrumbs {
	list-style-type: none;
	padding-left: 0;
}
.breadcrumbs ol li {
	display: inline-block;
}
.breadcrumbs ol {
	padding-left: 0;
	margin-bottom: 50px;
}
.breadcrumbs li,
.breadcrumbs li a {
	font-size: 18px;
}
.breadcrumbs ol,
.breadcrumbs a {
	font-size: 20px;
}

/*
*
* TL;DR boxes
*
*/

.tldr {
	gap: 35px;
	margin-top: 50px;
}
.tldr h2,
.tldr h3 {
	font-size: 20px;
	margin-bottom: 10px;
	line-height: 1.5;
}
.tldr p {
	font-size: 16px;
	line-height: 1.8;
}
.tldr img,
.tldr object {
	height: 60px;
	margin-bottom: 25px;
	width: auto;
}
.tldr .grid-cell {
	border-top: 3px solid #0c4373;
	margin-bottom: 0;
}
.tldr a.panel {
	color: #ffffff;
	border: 3px solid #0c2a4d;
	transition: border 0.2s ease;
}
.tldr a.panel:hover {
	border: 3px solid #2ca9b7;
	transition: border 0.2s ease;
}

/*
*
* Calls to action boxes
*
*/

.call-to-actions h3 {
	font-size: 20px;
	margin-bottom: 10px;
	line-height: 1;
	color: #ffffff;
	display: inline-block;
}
.call-to-actions h3::after {
	content: url(../svg/arrow.svg);
	position: absolute;
	width: 18px;
	margin-left: 10px;
	margin-top: 2px;
	transition: margin 0.3s ease;
}
.call-to-actions a:hover h3::after {
	margin-left: 15px;
	transition: margin 0.2s ease;
}
.call-to-actions .panel p {
	font-size: 16px;
	line-height: 1.8;
}
.call-to-actions img {
	display: block;
	height: 50px;
	margin-bottom: 25px;
}
.call-to-actions .grid-cell {
	margin-right: 29px;
}
.call-to-actions .grid-cell:last-of-type {
	margin-right: 0;
}
.call-to-actions a.grid-cell {
	margin-bottom: 0;
	border: 3px solid #01002A;
	transition: border 0.2s ease;
}
.call-to-actions a.grid-cell:hover {
	border: 3px solid #2ca9b7;
	transition: border 0.2s ease;
}

/* Feature label */

.label-icon {
	border: 2px solid #1C6690;
	border-radius: 20px;
	color: #ffffff;
	display: inline-block;
	font-size: 14px;
	line-height: 1;
	margin-bottom: 20px;
	padding: 10px 20px;
	font-family: 'tex-gyre-adventor-bold', sans-serif;
}

/* 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;
    width: 50px;
    height: 50px;
    border: 2px solid #0c2a4d;
    background-color: #0c2a4d;
    border-radius: 50%;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
}
.footer .social-links a:hover {
	background-color: #2ca9b7;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
}
.footer .social-links .svg path {
    fill: #ffffff;
    transition: fill 0.2s ease;
}
.footer .social-links a:hover .svg path,
.no-touch .footer .social-links a:hover .svg path,
.footer .social-links a:focus .svg path {
    fill: #ffffff;
    transition: fill 0.3s ease;
}
.footer .social-links .svg {
    display: block;
    height: 18px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
}
.footer .social-links .social-reddit .svg {
    height: 20px;
    margin-top: 12px;
}
.footer .social-links a:hover,
.no-touch .footer .social-links a:hover,
.footer .social-links a:focus {
	border: 2px solid #1a6f88;
    background-color: #2ca9b7;
    box-shadow: 0 0 0 10px rgba(44, 169, 183, 0.5), inset 0 0 0 0 #2ca9b7, 0 0 5px 2px #2ca9b7;
}
.footer .social-links .social-revue img {
	height: 20px;
	margin-top: 13px;
}

/* Other */

.opacity-half {
	opacity: 0.5;
}
.text-gradient {
	background: -webkit-linear-gradient(120deg, #2ca9b7, #1b648f);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    -webkit-animation: AnimationName 5s ease infinite;
    -moz-animation: AnimationName 5s ease infinite;
    animation: AnimationName 5s ease infinite;
}
.text-gradient::selection {
	background: #fff; /* WebKit/Blink Browsers */
	background: -webkit-linear-gradient(120deg, #fff, #fff);
	-webkit-text-fill-color: #2ca9b7;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 79%}
    50%{background-position:100% 22%}
    100%{background-position:0% 79%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 79%}
    50%{background-position:100% 22%}
    100%{background-position:0% 79%}
}
@keyframes AnimationName {
    0%{background-position:0% 79%}
    50%{background-position:100% 22%}
    100%{background-position:0% 79%}
}
h2.separator::after,
.separator::after {
	content: '';
	display: block;
	margin-top: 25px;
	width: 125px;
	height: 5px;
	border-radius: 2px;
	background-image: -moz-linear-gradient(120deg, #2ca9b7, #1b648f);
	background-image: -webkit-linear-gradient(120deg, #2ca9b7, #1b648f);
	background-image: -ms-linear-gradient(120deg, #2ca9b7, #1b648f);
}
h1.separator-center::after,
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);
}
.header {
	z-index: 2;
	position: relative;
}


.hero {
	margin-top: 100px;
}
.hero p {
	max-width: 450px;
}
.hero-image {
	left: -50px;
	position: absolute;
	top: 0px;
	width: 1100px;	
}

/* ==========================================================================
	Animations
========================================================================== */

.animation-underline:after {
	content: '';
	display: block;
	width: 0px;
	height: 3px;
	margin-top: 0;
	background-image: -moz-linear-gradient(120deg, #2ca9b7, #1b648f);
	background-image: -webkit-linear-gradient(120deg, #2ca9b7, #1b648f);
	background-image: -ms-linear-gradient(120deg, #2ca9b7, #1b648f);
	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, #2ca9b7, #1b648f);
	background-image: -webkit-linear-gradient(120deg, #2ca9b7, #1b648f);
	background-image: -ms-linear-gradient(120deg, #2ca9b7, #1b648f);
}

/* 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);
    }
}

.spin {
    animation-name: spin;
    animation-duration: 40000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.anti-spin {
    animation-name: spin;
    animation-duration: 40000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: reverse;
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

.spin1 {
    animation-name: spin;
    animation-duration: 100000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-moz-keyframes spin1 {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin1 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin1 {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

.spin2 {
    animation-name: spin;
    animation-duration: 150000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-moz-keyframes spin2 {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin2 {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

.spin3 {
    animation-name: spin;
    animation-duration: 200000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-moz-keyframes spin3 {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin3 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin3 {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

.spin4 {
    animation-name: spin;
    animation-duration: 200000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-moz-keyframes spin4 {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin4 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin4 {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

/* ==========================================================================
	Error
========================================================================== */

#page-not-found {
	text-align: center;
}
#page-not-found h1 {
	margin-bottom: 10px;
}
#page-not-found .button {
	font-size: 16px;
}
#page-not-found .spin {
	max-width: 300px;
}
#page-not-found > .grid {
	height: 100vh;
}
#page-not-found .question {
	position: absolute;
	width: 80px;
	margin-left: 110px;
	margin-top: 80px;
}

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

/* 1600px and above */

@media (min-width: 1600px) {

	/* ==========================================================================
		Modules: 1600px and above
	========================================================================== */

	/* HTML Elements */

	h1 {
		font-size: 65px;
	}
	h2 {
		line-height: 67px;
	}
	ol {
		font-size: 20px;
	}

	/* Footer */

	footer {
		margin-bottom: 50px;
	}

	/* ==========================================================================
		Landing: 1600px and above
	========================================================================== */

	/* Hero */

	#landing .hero > .grid-cell:first-of-type {
		min-width: 615px;
	}
	#landing .hero p {
	  max-width: 475px;
	}
	#landing .hero-image {
		left: -60px;
	}

	/* Intro */

	#landing #intro .panel {
		margin-top: 25px;
		margin-bottom: 0;
		padding: 25px;
	}
	#landing #intro .panel .label {
		line-height: 30px;
	}
	#landing #intro .asterisk {
		font-size: 30px;
	}
	#landing #intro figure {
		margin-top: 0;
		margin-left: -155px;
	}
	#landing #intro figure img:nth-of-type(1) {
  		max-width: 225px;
  		width: 200px;
	}
	#landing #intro figure img:nth-of-type(2) {
  		max-width: 350px;
  		width: 325px;
	}
	#landing #intro figure img:nth-of-type(3) {
		max-width: 500px;
		width: 475px;
	}
	#landing #intro figure img:nth-of-type(4) {
		max-width: 40px;
		margin-left: 220px;
		margin-top: 220px;
	}

	/* Balanced rewards */

	#landing #rewards .rewards-table thead tr th:last-of-type::before {
		width: 196px;
		height: 565px;
		margin-left: -15px;
	}
	#landing #rewards .panel {
		margin-top: 25px;
		margin-bottom: 0;
		padding: 25px;
	}
	#landing #rewards .panel .label {
		line-height: 30px;
	}

	/* Swap and Supply */

	#landing #swap-supply > .grid-cell:last-of-type img {
		width: 465px;
	}

	/* Receive a fair share from launch */

	#landing #fair img {
		float: right;
		max-width: 600px;
		margin-top: 25px;
	}

	/* Calls to action */

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

	/* ==========================================================================
		How: 1600px and above
	========================================================================== */

	/* Hero */

	#how .hero-cover {
		width: 400%;
		margin-left: -200%;
	}
	#how #get-started {
		margin-bottom: 100px;
		margin-left: auto;
		margin-right: auto;
		max-width: 800px;
	}
	#how .step video {
		width: 515px;
	}
	#how #monitor-and-adjust video {
		width: 1100px;
		margin-top: 50px;
		margin-bottom: 50px;
	}
	#how #view-and-manage img {
		width: 475px;
	}
	#how #swap-assets img {
		width: 425px;
	}
	#return-assets img {
		width: 500px;
		margin-right: 0;
	}
	#how #supply-liquidity video {
		width: 1100px;
	}
	#how #liquidate img {
		width: 400px;
	}
	#claim-and-stake img {
		width: 500px;
	}
	#how ol li:before {
		height: 30px;
		left: -32px;
		width: 30px;
		top: 4px;
	}

	/* ==========================================================================
		Brand: 1600px and above
	========================================================================== */

	#brand .hero {
		margin-bottom: 100px;
	}
	#brand .hero img {
		width: 600px;
	}
	#brand #branding-kit img {
	    max-width: 470px;
	    float: right;
	    margin-top: 0;
	}
	#brand section {
		margin-bottom: 175px;
	}
	#brand .hero .bubble-1 {
	    margin-left: -250px;
	    margin-top: -90px;
	    background-image: url(../png/bubble-2.png);
		width: 100px;
		background-size: contain;
		opacity: 0.5;
	}
	#brand .hero .bubble-2 {
		background-image: url(../png/bubble-2.png);
		width: 250px;
		background-size: contain;
		margin-left: -1000px;
		opacity: 0.5;
	}
	#brand .hero .bubble-3 {
	    margin-left: -50px;
	    margin-top: -600px;
	    background-image: url(../png/bubble-2.png);
		width: 120px;
		background-size: contain;
		opacity: 0.75;
	}

	/* ==========================================================================
		Loan: 1600px and above
	========================================================================== */

	#stablecoin #tracked-utilised .panel a {
		margin-bottom: -20px;
	}

	/* Terms and conditions */

	#stablecoin #terms {
		margin-top: 150px;
		margin-bottom: 150px;
	}
	#stablecoin #terms ul li {
		font-size: 20px;
	}
	#stablecoin #terms ul li + li {
		margin-top: 20px;
	}

	/* Rebalancing */

	#stablecoin #rebalancing #cheap-expensive > .grid-cell:first-of-type {
		margin-right: 50px;
	}

	/* Why borrow */

	#stablecoin #why-borrow h2 {
		margin-bottom: 75px;
	}
	#stablecoin #why-borrow h3 {
		margin-bottom: 20px;
	}
	#stablecoin #why-borrow .feature {
		margin-bottom: 100px;
	}

	/* Open your stablecoin loan */

	#stablecoin #open-loan .steps h3 {
		font-size: 30px;
		margin-bottom: 5px;
	}
}


/* 1600px and below */

@media (max-width: 1600px) {

	/* ==========================================================================
		Modules: 1600px and below
	========================================================================== */

	/* HTML elements */

	html {
		font-size: 18px;
		overflow-x: hidden;
		position: relative;
	}
	h1 {
		font-size: 58px;
		line-height: 72px;
		margin-bottom: 0;
	}
	h2 {
		line-height: 65px;
	}
	h2.separator::after,
	.separator::after {
		margin-top: 20px;
		margin-bottom: 15px;
	}
	a {
		font-size: 18px;
		line-height: 32px;
	}
	p {
		font-size: 18px;
		line-height: 32px;
	}
	p + p {
		margin-top: 15px;
	}

	/* Modules */

	.animation-underline:after {
		margin-top: 0;
	}
	.eyebrow {
		margin-bottom: 0;
	}

	/* Header & Footer */

	header a,
	footer a,
	.label {
		font-size: 16px;
	}
	ul.links li .button {
		font-size: 16px;
		padding: 3px 20px;
	}

	/* Header */

	.header .logo {
		width: 100px;
		margin-left: 0;
		margin-right: 0;
	}

	/* Footer */

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

	/* ==========================================================================
		Brand resources: 1600px and below
	========================================================================== */

	#brand .hero {
		margin-bottom: 100px;
	}
	#brand .hero img {
		width: 535px;
	}
	#brand #branding-kit img {
	    max-width: 400px;
	    float: right;
	    margin-top: 5px;
	}
	#brand section {
		margin-bottom: 150px;
	}
	#brand section.feature p:last-of-type {
		margin-top: 15px;
	}
	#brand #branding-kit {
		max-width: 975px;
		margin-left: auto;
		margin-right: auto;
	}
	#brand .hero .bubble-1 {
	    margin-left: -700px;
	    margin-top: -190px;
	    background-image: url(../png/bubble-2.png);
	    width: 100px;
	    background-size: contain;
	    opacity: 0.5;
	}
	#brand .hero .bubble-2 {
		background-image: url(../png/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(../png/bubble-2.png);
		width: 120px;
		background-size: contain;
		opacity: 0.75;
	}
}

/* 1300px and below */

@media (max-width: 1300px) {

	/* Layout */

	.wrapper {
		max-width: 900px;
	}
	.header > div:nth-child(1) > div:nth-child(1) {
		max-width: 300px;
	}
	.footer > div:nth-child(1) > div:nth-child(1) {
		max-width: 150px;
	}
	.bottom-row > div:nth-child(1) {
		max-width: 350px;
	}
}

/* 1100px and below */

@media (max-width: 1100px) {

	/* ==========================================================================
		Modules: 1100px and below
	========================================================================== */

	/* Layout */

	.wrapper {
		max-width: 900px;
	}
	.hero p {
		max-width: 400px;
	}
	.call-to-actions h3 {
		line-height: 1.3;
	}

	/* header */

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

	/* Footer */

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

	/* ==========================================================================
		Brand: 1100px and below
	========================================================================== */

	#brand .hero img {
		width: 450px;
	}
	#brand #branding-kit img {
		margin-top: 30px;
	}
	#brand section.feature > .grid-cell:last-of-type {
		margin-left: 100px;
	}
}

/* 1000px and below */

@media (max-width: 1000px) {

	/* ==========================================================================
		Modules: 1000px and below
	========================================================================== */

	/* Layout */

	.wrapper {
		max-width: 800px;
	}

	/* Header */

	.header > .grid.grid-center > .grid-cell:nth-of-type(2) {
		display: block;
	}

	/* Footer */

	.bottom-row > div:nth-child(1) {
		max-width: 330px;
	}
	footer .bottom-row .label {
		font-size: 16px;
	}
	.footer .social-links {
		display: flex;
		gap: 20px;
		padding-left: 0;
	}
	.footer .social-links li {
		gap: 10px;
    margin: 0;
    width: calc(100% / 6);
	}
	.footer .social-links a {
		aspect-ratio: 1/1;
		display: flex;
		height: 100%;
		line-height: 1;
		width: 100%;
	}
	.footer .social-links a .svg,
	.footer .social-links .social-reddit .svg {
		height: auto;
		margin: auto auto;
		width: 50%;
	}
}

/* 850px and below */

@media (min-width: 801px) and (max-width: 850px) {
	.wrapper {
		max-width: 92%;
	}	
}

/* 800px and below */

@media (max-width: 800px) {

	/* ==========================================================================
		Modules: 800px and below
	========================================================================== */

	/* HTML elements */

	html {
		font-size: 16px;
	}
	h1 {
		font-size: 45px;
		line-height: 1.2;
	}

	/* Layout */

	.wrapper {
		padding-left: 5%;
		overflow-x: hidden;
		padding-right: 5%;
	}
	.hero {
		margin-top: 0;
		flex-direction: column-reverse;
		margin-bottom: 75px;
	}
	.tldr {
		flex-direction: column;
	}


	/* Header */

	.header {
		margin-bottom: 25px;
	}
	.header .logo {
		width: 85px;
	}
	.bottom-row > div:nth-child(1) > div:nth-child(1) > p:nth-child(1) {
		text-align: center;
	}
	.header ul.links {
		display: none;
	}
	header a, footer a {
		font-size: 14px;
	}
	.header > div:nth-child(1) > div:nth-child(1) {
		max-width: 100px;
	}

	.footer .social-links {
		max-width: 250px;
		text-align: center;
	}
	.footer .social-links li:nth-child(n+3) {
		margin-top: 20px;
	}
	.footer .social-links li:nth-child(3) {
		margin-right: 0;
	}
	.footer .social-links li:nth-child(4) {
		margin-left: 0;
	}

    /* Display mobile 'Menu' button */

    .header .menu {
        float: right;
    }
    .header .menu #show-menu-label {
        display: block;
        float: right;
        padding: 3px 12px;
        font-size: 14px;
        color: #ffffff;
        background-color: #0c2a4d;
        border: 1px solid #2ca9b7;
        border-radius: 5px;
        cursor: pointer;
        transition: border 0.2s ease;
    }
    .no-touch .header .menu #show-menu-label:hover {
        background-color: #2ca9b7;
        transition: background-color 0.3s ease;
    }
    .header .menu input[type="checkbox"]:checked + #show-menu-label {
        background-color: #2ca9b7;
        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: #2ca9b7;
		transform: initial;;
		border-width: 12px;
		margin-left: -12px;
		left: 90%;
		top: -25px;
		border-bottom-color: #2ca9b7;
		border-top-color: transparent;
	}

    .header .menu input[type="checkbox"]:checked ~ .links {
		position: absolute;
		top: 30px;
		right: 0;
		padding: 25px;
		background-color: #0c2a4d;
		transform: translateX(0);
		z-index: 1;
		transition: opacity 0.6s ease;
		display: block;
		border: 2px solid #2ca9b7;
		box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 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.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    }
    .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;
	}

	/* Calls to action */

	.call-to-actions h2 + .grid {
		flex-direction: column;
	}
	.call-to-actions a.grid-cell {
		margin-bottom: 25px;
	}
	.call-to-actions .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: 14px;
	}

	/* ==========================================================================
		Brand resources: 800px and below
	========================================================================== */

	/* Hero */

	#brand .hero {
		flex-direction: column;
	}
	#brand .hero .panel {
		margin-top: 25px;
		margin-bottom: 0;
	}
	#brand .hero img {
		width: 450px;
	}
	#brand .hero h2 {
		font-size: 30px;
	}
	#brand #branding-kit img {
		max-width: 100%;
		width: 100%;
		margin-top: 25px;
	}
	#brand section.feature > .grid-cell:last-of-type {
		width: 100%;
		margin-top: 25px;
	}
	#brand section {
		margin-bottom: 100px;
	}
	#brand section.feature.logo > .grid-cell:last-of-type {
		margin-top: 0;
	}
	#brand section.logo > .grid-cell:last-of-type img {
		margin-top: 0;
	}
	#brand section.feature.logo > .grid-cell:last-of-type > .grid > .grid-cell:first-of-type,
	#brand section.grid:nth-child(3) > div:nth-child(2) > div:nth-child(1) > div:nth-child(2) {
		width: 50%;
	}

	/* Logo */

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

	/* Design system */

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

	/* Typography */

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

	/* Wallpapers */

	#brand .feature.wallpapers {
		flex-direction: column;
	}
	#brand .feature.wallpapers img {
		margin-left: 0;
		max-width: 100%;
	}

	/* 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;
	}
	#brand section.logo > .grid-cell:last-of-type img {
		width: initial;
		margin-left: 10%;
		margin-top: 0;
		height: 115px;
	}

	/* ==========================================================================
		NFT: 800px and below
	========================================================================== */

	.nft .hero img,
	.nft .hero video {
		width: 100%;
		max-width: 100%;
	}
	.bottom-row div:nth-of-type(2) {
		width: 50%;
	}
	.footer .social-links {
		margin-bottom: 25px;
		max-width: 100%;
		width: 100%;
	}
	.footer .social-links li:nth-child(n+3) {
		margin: 0;
	}

}


/* 750px and below */

@media (max-width: 750px) {

	#stablecoin #bnusd-value .overview-panel {
	 	grid-template-columns: repeat(2,1fr);
		margin-top: 30px;
	}	
	#stablecoin #bnusd-value .overview-panel > .total-supply {
		border-bottom: 1px solid rgba(47,204,220,0.2);
    	grid-row: span 1;
	}
	#stablecoin #bnusd-value .overview-panel > div:nth-of-type(2) {
		display: block;
	}
	#stablecoin #bnusd-value .overview-panel > .total-supply,
	#stablecoin #bnusd-value .overview-panel > div:nth-of-type(2) {
		grid-column: span 2;
	}
	#stablecoin #bnusd-value .overview-panel > div:nth-of-type(2) {
    	background: #0A2448;
  	}
	#stablecoin #bnusd-value .overview-panel .collateral-stability-fund {
		grid-column: span 2;
	}
	#stablecoin #bnusd-value .overview-panel .collateral-stability-fund .collateral,
	#stablecoin #bnusd-value .overview-panel .collateral-stability-fund .stability-fund-amount {
		background: #091D42;
		padding-bottom: 30px;
		padding-top: 25px;
	}
	#stablecoin #bnusd-value .overview-panel .collateral-stability-fund .collateral {
		border-radius: 0 0px 0px 10px;
	}
	#stablecoin #bnusd-value .overview-panel .collateral-stability-fund .stability-fund-amount {
		border-radius: 0 0px 10px 0px;
	}
	#stablecoin #bnusd-value .overview-panel .total-backing p {
    	font-size: 30px;
		margin-top: 10px;
  	}
	#stablecoin #bnusd-value .overview-panel .total-supply h3 {
		margin-top: 10px;
	}
	#stablecoin #bnusd-value h3 {
		margin-top: 80px;
	}

}

/* 650px and below */

@media (max-width: 650px) {

	/* bnUSD */
	
	.hero p {
    	max-width: 100%;
  	}
	#stablecoin .grid.hero {
		margin-bottom: 100px;
	}
	#stablecoin #bnusd-value .overview-panel > .total-supply {
		border-right: none;
		padding-bottom: 30px;
	}
	#stablecoin #bnusd-value .overview-panel > .total-supply,
	#stablecoin #bnusd-value .overview-panel > div:nth-of-type(2) {
		grid-column: span 2;
	}
	#stablecoin #bnusd-value .overview-panel > div:nth-of-type(2) {
		background: #0A2448;
	}
	#stablecoin #bnusd-value .overview-panel .total-backing h3 {
		margin-top: 0;
	}
	#stablecoin #bnusd-value h3 {
		margin-top: 130px;
	}
	
}


/* 600px and below */

@media (max-width: 600px) {

	/* ==========================================================================
		Modules: 600px and below
	========================================================================== */	

	h2 {
		font-size: 38px;
		line-height: 1.3;
	}
	.header .logo {
		width: 80px;
	}
	.arrow-right::after {
		width: 15px;
	}

	/* ==========================================================================
		Brand: 600px and below
	========================================================================== */

	/* Typography */

	#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%;
	}

	/* ==========================================================================
		Error: 600px and below
	========================================================================== */

	#page-not-found > .grid {
		height: initial;
		margin-top: 75px;
	}
	#page-not-found .question {
		position: absolute;
		width: 85px;
		margin-left: 106px;
		margin-top: 77px;
	}
	#page-not-found h1 + p {
		max-width: 240px;
		margin-left: auto;
		margin-right: auto;
	}

	/* ==========================================================================
		NFT: 600px and below
	========================================================================== */

	.nft .hero img, #brand.nft .hero video {
		width: 100%;
		max-width: 100%;
	}
	.nft .grid.hero > .grid-cell > .grid {
		flex-direction: column;
		align-items: initial;
	}
	.nft .grid.hero > .grid-cell > .grid > .grid-cell:first-of-type {
		margin-right: 0 !important;
	}
	.nft .feature.profile img {
		width: 100%;
		height: initial;
	}
	.nft .grid.feature {
		flex-direction: column;
	}
	.bottom-row div:nth-of-type(2) {
		width: 70%;
	}

}

/* 500px and below */

@media (max-width: 500px) {

	footer {
		margin-top: 50px;
	}
	.bottom-row div:nth-of-type(2) {
		width: 90%;
	}
}

/* 400px and below */

@media (max-width: 400px) {

	/* ==========================================================================
		Modules: 400px and below
	========================================================================== */

	/* HTML elements */

	h1 {
		font-size: 40px;
	}

	/* Footer */

	.footer .social-links {
		text-align: center;
	}
	.footer .social-links  {
		margin-bottom: 30px;
	}

	/* ==========================================================================
		Error: 400px and below
	========================================================================== */

	#page-not-found > .grid {
		height: initial;
		margin-top: 75px;
	}
	#page-not-found .question {
		position: absolute;
		width: 85px;
		margin-left: 88px;
		margin-top: 58px;
	}
	#page-not-found h1 + p {
		max-width: 240px;
		margin-left: auto;
		margin-right: auto;
	}
}