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

/* ==========================================================================
	Stablecoin
========================================================================== */

/*
*
* Hero
*
*/

#stablecoin .hero {
	margin-bottom: 125px;
}
#stablecoin .hero p {
	max-width: 550px;
}
#stablecoin .hero h1 {
	margin-top: 75px;
	min-width: 700px;
}
#stablecoin .hero > .grid:first-of-type {
	margin-bottom: 100px;
}
#loan-hero-image {
	filter: drop-shadow(0px 15px 3px rgba(0,0,0,0.1));
	height: auto;
	margin-left: 65px;
	margin-top: -90px;
	width: 440px;
}
#stablecoin .hero .rings img {
	position: absolute;
	z-index: -1;
	animation-iteration-count: infinite;
	animation-name: spin;
	animation-timing-function: linear;
}
#stablecoin .hero .rings img:nth-of-type(1) {
	opacity: 0.4;
	width: 480px;
	top: 79px;
	left: 45px;
	animation-duration: 50s;
	z-index: -2;
}
#stablecoin .hero .rings img:nth-of-type(2) {
	opacity: 0.2;
	width: 700px;
	top: -35px;
	left: -65px;
	animation-duration: 100s;
	z-index: -2;
}
#stablecoin .hero .rings img:nth-of-type(3) {
	opacity: 0.15;
	width: 1000px;
	top: -185px;
	left: -211px;
	animation-duration: 150s;
	z-index: -2;
}
#stablecoin .hero .rings img:nth-of-type(4) {
	opacity: 0.15;
	width: 1400px;
	top: -380px;
	left: -410px;
	animation-duration: 200s;
	z-index: -2;
}
#stablecoin .hero .rings img:nth-of-type(5) {
	opacity: 0.15;
	width: 1900px;
	top: -630px;
	left: -660px;
	animation-duration: 250s;
	z-index: -2;
}
#stablecoin .hero .rings img:nth-of-type(6) {
	opacity: 0.15;
	width: 2550px;
	top: -960px;
	left: -990px;
	animation-duration: 300s;
	z-index: -2;
}
#stablecoin .hero .rings img:nth-of-type(7) {
	opacity: 0.15;
	width: 3400px;
	top: -1390px;
	left: -1420px;
	animation-duration: 350s;
	z-index: -2;
}
@keyframes spin {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);   
	}
}

/*
*
* TL;DR
*
*/

#stablecoin .hero .tldr .grid-cell:nth-of-type(1) object {
	height: 70px;
	margin-top: -10px;
	margin-bottom: 17px;
}
#stablecoin .hero .tldr .grid-cell:nth-of-type(2) object {
	height: 50px;
	margin-bottom: 27px;
}
#stablecoin .hero .tldr .grid-cell:nth-of-type(3) object {
	height: 77px;
	margin-top: -12px;
	margin-bottom: 12px;
}

/*
*
* What is the Balanced Dollar?
*
*/

/* Tracked on / Utilised by */

#tracked-utilised {
	display: grid;
	margin-bottom: 150px;
	margin-top: 50px;
	padding-left: 12.5%;
	padding-right: 12.5%;
}
#tracked-utilised h3 {
	font-size: 35px;
	margin-bottom: 40px;
	text-align: center;
}
#tracked-utilised > .grid-cell {
	width: 100%;
}
#tracked-utilised .panel {
  	border-top: 3px solid #0c4373;
	max-height: 500px;
	padding-top: 40px;
	text-align: center;	
}
#tracked-utilised .available-on .panel {
	padding-bottom: 25px;
	padding-top: 50px;
}
#tracked-utilised .panel a {
	margin: 0 20px;
}
#tracked-utilised .panel a.animation-underline::after {
	margin-bottom: -6px;
}
#tracked-utilised > .grid-cell {
	margin-top: 20px;
}
#tracked-utilised > .grid-cell:last-of-type > .panel > .grid-cell:first-of-type a {
	margin-left: 0;
}
#tracked-utilised > .grid-cell:last-of-type > .panel > .grid-cell:last-of-type a {
	margin-right: 0;
}
#tracked-utilised img {
	display: inline-block;
	height: 50px;
	margin: auto auto 10px auto;
	width: 100%;
}
#tracked-utilised .supported-types img {
	height: 60px;
}
#tracked-utilised .supported-types img.coin-logo {
	background: url(../svg/coin-outline.svg) no-repeat center center;
  	padding: 9px;
}
#tracked-utilised .supported-types .panel.grid,
#tracked-utilised .available-on .panel.grid {
    flex-wrap: wrap;
	justify-content: center;
    max-height: 100%;
}
#tracked-utilised .supported-types .panel.grid,
#tracked-utilised .available-on .panel.grid {
    gap: 40px 10px;
}
#tracked-utilised .supported-types .panel.grid .grid-cell {
    flex-basis: calc(16.66% - 10px);
}
#tracked-utilised .available-on .panel.grid .grid-cell {
	flex-basis: calc(20.33% - 10px);
  }
  /*#tracked-utilised .available-on .panel.grid .grid-cell:nth-child(n+6) {
	  margin-top: 40px;
  }*/
.available-on p,
.supported-types p {
	font-size: 16px;
}
#tracked-utilised > .grid-cell.available-on:first-of-type .panel {
	max-height: 100%;
}
#tracked-utilised > .supported-types.grid-cell:first-of-type .panel {
	max-height: 100%;
	padding-bottom: 50px;
	padding-top: 50px;
}
#tracked-utilised > .grid-cell:last-of-type > .grid > .grid-cell:last-of-type img {
	height: 40px;
	margin-bottom: 10px;
	margin-top: 10px;
}
#tracked-utilised > .grid-cell.available-on:last-of-type > .grid > .grid-cell:last-of-type img {
	margin-top: 0;
	height: 50px;
}
#tracked-utilised .supported-types .panel.grid .grid-cell.empty-space {
	background: url(../svg/coin-outline.svg) no-repeat center top;
	background-size: 60px;
	opacity: 0.2;
}
#tracked-utilised .available-on .panel.grid .grid-cell.empty-space  {
	background: url(../svg/empty-hexagon.svg) no-repeat center top;
	background-size: 60px;
	opacity: 0.2;
}
#tracked-utilised .available-on .panel.grid .grid-cell.empty-space  {
	background: url(../svg/empty-hexagon.svg) no-repeat center top;
	background-size: 50px;
	opacity: 0.2;
}
#tracked-utilised .supported-types .panel.grid .grid-cell.empty-space:empty,
#tracked-utilised .available-on .panel.grid .grid-cell.empty-space:empty {
	margin-top: 0;
}

/* bnUSD hero */

@keyframes rock {
	0% {
		transform: rotate(0);
	}
	25% {
		transform: rotate(2deg);   
	}
	75% {
		transform: rotate(-2deg);   
	}
	100% {
		transform: rotate(0deg);   
	}
}
#stablecoin .grid-center.why-bnusd .grid-cell:nth-of-type(2):after {
	background: url(../svg/balanced-seesaw-rings.svg) no-repeat center center;
	content: '';
	display: block;
	height: 300px;
	opacity: 0.4;
  	position: absolute;
  	transform: scale(3, 0.5) translateY(280px);
	top: 0;
	right: 0;
	width: 100%;
	z-index: -1;
}
#stablecoin .balance-seesaw object {
	height: auto;
	margin-left: 7%;
	margin-top: 20px;
	width: 90%;
}
#stablecoin .tldr h2 {
	line-height: 28px;
}
/* Rebalancing section */

#stablecoin #bnusd-value > .grid object {
	display: block;
	height: auto;
	width: 140%;
	margin-left: -40%;
}
#stablecoin #bnusd-value .grid:nth-of-type(1).maintain-value .grid-cell:nth-of-type(1) p {
	margin-left: auto;
	margin-right: auto;
  	max-width: 65%;
}
#stablecoin #bnusd-value .grid:nth-of-type(1).maintain-value .grid-cell:nth-of-type(1) .overview-panel p {
	max-width: 100%;
}
#stablecoin #bnusd-value .grid.maintain-value > .grid-cell:nth-of-type(2) {
	margin-left: 50px;
}
#stablecoin #rebalancing h2.separator {
	margin-bottom: 50px;
}
#stablecoin #bnusd-value .overview-panel {
	background: linear-gradient(0deg, #0c2a4d, #15375e);
	border-radius: 25px;
	display: grid;
	grid-template-columns:repeat(2,1fr);
	align-items: center;
	margin-bottom: 20px;
	margin-top: 75px;
	border-top: 3px solid #0c4373;
}
#stablecoin #bnusd-value .overview-panel p {
	color: #ffffff;
	letter-spacing: 0.05em;
	line-height: 1.2;
}
#stablecoin #bnusd-value .overview-panel div {
	flex: 1;
	height: 100%;
}
#stablecoin #bnusd-value .overview-panel .total-supply,
#stablecoin #bnusd-value .overview-panel .collateral {
	border-right: 1px solid rgba(47,204,220,0.2);
}
#stablecoin #bnusd-value .overview-panel .total-backing {
	border-bottom: 1px solid rgba(47,204,220,0.2);
}
#stablecoin #bnusd-value .overview-panel > .total-supply {
	grid-row: span 2;
	padding: 20px 50px 50px 50px;
}
#stablecoin #bnusd-value .overview-panel > div:nth-of-type(2) {
	display: flex;
	padding: 30px 60px;
}
#stablecoin #bnusd-value .overview-panel .collateral-stability-fund p {
	font-size: 25px;
}
#stablecoin #bnusd-value .overview-panel .collateral-stability-fund div {
	height: 100%;
}
#stablecoin #bnusd-value .overview-panel .collateral-stability-fund .collateral,
#stablecoin #bnusd-value .overview-panel .collateral-stability-fund .stability-fund-amount {
	padding-top: 30px;
}
#stablecoin #bnusd-value .overview-panel .collateral-stability-fund h3 {
	margin-bottom: 10px;
}
#stablecoin #bnusd-value .overview-panel .collateral-stability-fund .collateral h3,
#stablecoin #bnusd-value .overview-panel .collateral-stability-fund .collateral p {
	width: 100%;
}
#stablecoin #bnusd-value .overview-panel > div:nth-of-type(3) div {
	padding: 0 60px;
}
#stablecoin #bnusd-value .overview-panel h3 {
	color: #2CA9B7;
	font-size: 17px;
	letter-spacing: 0.05em;
	margin: 0;
}
#stablecoin #bnusd-value .overview-panel .total-supply h3 {
	font-size: 22px;
	margin: 30px 0 15px 0;
}
#stablecoin #bnusd-value .overview-panel .total-supply p {
	font-size: 50px;
}
#stablecoin #bnusd-value .overview-panel .total-supply p + p {
	font-size: 25px;
	margin-top: 10px;
}
#stablecoin #bnusd-value .overview-panel .total-backing,
#stablecoin #bnusd-value .overview-panel .collateral-stability-fund {
	display: flex;
	align-items: center;
}
#stablecoin #bnusd-value .overview-panel .total-backing {
	justify-content: space-between;
}
#stablecoin #bnusd-value .overview-panel .total-backing p {
	font-size: 35px;
}
#stablecoin #bnusd-value .overview-panel .total-backing h3 span {
	display: block;
}
#stablecoin h4 {
	margin-bottom: 15px;
}

/*
*
* Stablecoin: Savings rate
*
*/

#stablecoin #stablecoin-savings-rate > .grid-cell:first-of-type {
	margin-right: 50px;
}
#stablecoin #stablecoin-savings-rate .savings-rate-table {
	border-top: 3px solid #0c4373;
	gap: 30px;
	margin-top: 130px;
}
#stablecoin #stablecoin-savings-rate .savings-rate-table .grid-cell {
	gap: 20px;
}
#stablecoin #stablecoin-savings-rate .savings-rate-table .grid-cell:nth-of-type(1) {
	border-right: 3px solid #0c4373;
	flex: 25%;
	padding-right: 10px;
}
#stablecoin #stablecoin-savings-rate .savings-rate-table h4 {
	color: #2CA9B7;
  font-size: 17px;
  letter-spacing: 0.05em;
	line-height: 1.4;
  margin: 0 0 10px 0;
}
#stablecoin #stablecoin-savings-rate .savings-rate-table p {
  color: #ffffff;
  font-size: 21px;
	letter-spacing: 0.025em;
  line-height: 1.4;
  width: 100%;
}
#stablecoin #stablecoin-savings-rate .savings-rate-table h4 span {
	display: block;
}

/*
*
* Stablecoin: Redemption
*
*/

#stablecoin #redemption .burn {
	display: flex;
	justify-content: center;
}
#stablecoin #redemption .burn object {
	display: block;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	max-width: 350px;
	text-align: center;
	z-index: -1;
}
#stablecoin #redemption h3 {
	margin-top: 90px;
}
#stablecoin #redemption h4 {
	margin-top: 25px;
}
#stablecoin #redemption > .grid-cell:nth-of-type(2) {
	margin-left: 50px;
}

/*
*
* Stablecoin: Terms
*
*/

#stablecoin #terms h2 {
	margin-bottom: 10px;
}
#stablecoin #terms h2.separator::after {
	margin-bottom: 0;
}
#stablecoin #terms ul li {
	color: rgba(255,255,255,0.75);
}
#stablecoin #terms ul li + li {
	margin-top: 15px;
}

/*
*
* Stablecoin: Rebalancing
*
*/

#stablecoin #bnusd-value #rebalancing .grid .grid-cell .info-panel {
	background: #0c2a4d;
	border-radius: 10px;
	margin-bottom: 100px;
	margin-top: 150px;
	padding: 30px 35px 20px 30px;
}
#stablecoin #bnusd-value #rebalancing .grid .grid-cell table {
	border-collapse: collapse;
	font-size: 15px;	
	width: 100%;
}
#stablecoin #bnusd-value #rebalancing .grid .grid-cell table tr:nth-of-type(2),
#stablecoin #bnusd-value #rebalancing .grid .grid-cell table tr:nth-of-type(3),
#stablecoin #bnusd-value #rebalancing .grid .grid-cell table tr:nth-of-type(4) {
	border-bottom: 1px solid rgba(47,204,220,0.2);
}
#stablecoin #bnusd-value #rebalancing .grid .grid-cell table th:nth-of-type(1) {
	text-align: left;
}
#stablecoin #bnusd-value #rebalancing .grid .grid-cell table th,
#stablecoin #bnusd-value #rebalancing .grid .grid-cell table td {
	letter-spacing: 0.02em;
	padding-top: 10px;
	padding-bottom: 10px;
}
#stablecoin #bnusd-value #rebalancing .grid .grid-cell table th {
	/*font-family: 'tex-gyre-adventor-bold', sans-serif;*/
	font-size: 12px;
	font-weight: normal;
	letter-spacing: 0.2em;
	text-align: right;
	text-transform: uppercase;
}
#stablecoin #bnusd-value #rebalancing .grid .grid-cell table td {
	padding-left: 40px;
}
#stablecoin #bnusd-value #rebalancing .grid .grid-cell table tr:nth-of-type(2) td:nth-of-type(1) {
	background:url(../svg/iusdc-icon.svg) 0 15px no-repeat;
	background-size: 25px;
}
#stablecoin #bnusd-value #rebalancing .grid .grid-cell table tr:nth-of-type(3) td:nth-of-type(1) {
	background:url(../svg/usds-icon.svg) 0 15px no-repeat;
	background-size: 25px;
}
#stablecoin #bnusd-value #rebalancing .grid .grid-cell table tr:nth-of-type(4) td:nth-of-type(1) {
	background:url(../svg/busd-icon.svg) 0 15px no-repeat;
	background-size: 25px;
}
#stablecoin #bnusd-value #rebalancing .grid .grid-cell table td strong { 
	font-family: 'tex-gyre-adventor-bold';
	letter-spacing: 0.05em;
}
#stablecoin #bnusd-value #rebalancing .grid .grid-cell table td span {
	color: rgba(255,255,255,0.75);
	font-size: 13px;
}
#stablecoin #bnusd-value #rebalancing .grid .grid-cell table td span.positive-number {
	color: #2fccdc;
}
#stablecoin #bnusd-value #rebalancing .grid .grid-cell table td span.negative-number {
	color: #FB6A6A;
}
#stablecoin #bnusd-value #rebalancing .grid .grid-cell table td:not(:nth-of-type(1)) {
	text-align: right;
	vertical-align: top;
}

#bnusd-value h3 {
	font-size: 35px;
	margin-bottom: 25px;
	margin-top: 50px;
}
#bnusd-value h4 {
	font-size: 25px;
}

#stablecoin #rebalancing {
	margin-bottom: -25px;
}
#stablecoin #rebalancing object {
	height: auto;
	margin-top: 50px;
	width: 100%;
}

/* Rebalancing stats */

#stablecoin #rebalancing-stats {
	margin-bottom: 200px;
}
#stablecoin #rebalancing-stats h3 {
	text-align: center;
	font-size: 35px;
	margin-bottom: 25px;
}
#stablecoin #rebalancing-stats .metadata {
	text-align: center;
}
#stablecoin #rebalancing-stats .metadata dd {
	font-size: 30px;
	font-family: 'tex-gyre-adventor-bold', sans-serif;
	font-weight: normal;
}

/* Cheap vs expensive */

#stablecoin #rebalancing > .grid.grid-center > .grid-cell:first-of-type {
	margin-right: 50px;
}
#stablecoin #rebalancing #cheap-expensive {
	margin-top: 20px;
}
#stablecoin #rebalancing #cheap-expensive img {
	height: auto;
	margin-top: 30px;
	margin-bottom: 20px;
	max-width: 100%;
}
#stablecoin #rebalancing #cheap-expensive h3 {
	margin-bottom: 0;
	font-size: 35px;
}
#stablecoin #rebalancing #cheap-expensive > .grid-cell:first-of-type {
	margin-right: 50px;
}

/* Why Borrow */

#stablecoin #why-borrow {
	margin-top: 200px;
}
#stablecoin #why-borrow section:not(#terms) h2 {
	margin-bottom: 130px;
}
#stablecoin #why-borrow h2 {
	margin-bottom: 75px;
}
#stablecoin #why-borrow h3 {
	font-size: 35px;
	margin-bottom: 15px;
}
#stablecoin #why-borrow img {
	max-width: 100%;
}
#stablecoin #why-borrow .feature {
	margin-bottom: 0px;
}

#stablecoin #why-borrow .feature > .grid-cell:first-of-type {
	margin-right: 25px;
}
#stablecoin #why-borrow .feature > .grid-cell:last-of-type {
	margin-left: 25px;
}

#stablecoin #why-borrow .feature .call-outs .panel {
	margin-bottom: 25px;
	margin-right: 25px;
}
#stablecoin #why-borrow .feature .call-outs .panel h3 {
	font-size: 40px;
}
#stablecoin #why-borrow .feature .call-outs .panel p {
	color: #ffffff;
}
#stablecoin #why-borrow .feature .call-outs > div:nth-child(2) > .grid-cell {
	margin-bottom: 0;
}

#stablecoin #why-borrow .feature .call-outs h3 {
	margin-bottom: 0;
}
#stablecoin #why-borrow .animation-clock {
	/*display: flex;
	justify-content: flex-end;*/
	position: relative;
}
#stablecoin #why-borrow .animation-clock object {
	margin-top: 20px;
	height: auto;
	width: 100%;
}
@keyframes fullrotation {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);   
	}
}

/* Earn Baln tokens */

#stablecoin #why-borrow .earn-baln-tokens img {
	height: auto;
	margin-bottom: 0px;
	margin-top: 0px;
	max-width: 85%;
}
#stablecoin .earn-baln-tokens object {
	height: auto;
	margin-left: -10%;
	/*margin-top: -160px;*/
	width: 120%;
}

/* Arbitrage opportunities */

#stablecoin #why-borrow .arbitrage {
	margin-bottom: 130px;
	margin-top: -20px;
}
#stablecoin #why-borrow .arbitrage object {
	height: auto;
	max-width: 100%;
	width: 100%;
}

/* Supply liquidity */

#stablecoin #why-borrow .supply-liquidity img {
	margin-top: -20px;
	max-width: 85%;
}
#stablecoin #why-borrow .supply-liquidity object {
	height: auto;
	max-width: 85%;
}

#stablecoin .hero-cover {
	position: absolute;
	height: 1800px;
	width: 1000%;
	background: linear-gradient(180deg,  rgba(1,0,42,0) 0%, rgba(1,0,42,1) 50%, rgba(1,0,42,1) 100%);
	margin-left: -500%;
	z-index: -1;
	margin-top: -100px;
}


/* Higher return */

#stablecoin #why-borrow .higher-return {
	position: relative;
}
#stablecoin #why-borrow .higher-return img {
	margin-top: 100px;
	max-width: 500px;
}
#stablecoin #why-borrow .higher-return .grid-cell:nth-of-type(1):before {
	animation-duration: 3s;
	animation-name: fallin;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in;
	background: url(../balanced-bnusd-falling.html) no-repeat center 0;
	background-size: 80px;
	content: '';
	display: block;
	filter: drop-shadow(0px 0px 10px rgba(2, 32, 58, 0.5));
	height: 220px;
	position: absolute;
	left: 65px;
	top: 0;
	transform-origin: left 0px top 0px;
	width: 150px;
  z-index: -1;
}
#stablecoin #why-borrow .higher-return .omm-token1,
#stablecoin #why-borrow .higher-return .omm-token2,
#stablecoin #why-borrow .higher-return .omm-token3 {
	animation-duration: 5s;
	animation-name: conveyor;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	background: url(../balanced-bnusd-omm-token.html) no-repeat 0 0;
	background-size: 40px;
	filter: drop-shadow(0px 0px 10px rgba(2, 32, 58, 1));
	height: 40px;
	left: 100px;
	position: absolute;
	top: 0;
	width: 40px;
	top: 235px;
	z-index: -1;
}
#stablecoin #why-borrow .higher-return .omm-token1 {
	animation-delay: 1s;
}
#stablecoin #why-borrow .higher-return .omm-token2 {
	animation-delay: 2s;
}
#stablecoin #why-borrow .higher-return .omm-token3 {
	animation-delay: 3s;
}
@keyframes fallin {
	0% {
		opacity: 0;
		transform: translateY(-200px);
	}
	50% {
		opacity: 1;
	}
	70% {
		transform: translateY(140px);
	}
	100% {
		transform: translateY(140px);
  }
}
@keyframes conveyor {
	0% {
		transform: translateX(0);
		transform: translateY(-4px);
	}
	80% {
		transform: translateX(385px) translateY(-4px);
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateX(450px) translateY(200px);

	}
}

#stablecoin #why-borrow .supply-liquidity .grid-cell:nth-of-type(2) h3 {
	margin-top: 75px;
}

/*
*
* Stablecoin: Terms
*
*/

#stablecoin #terms {
	margin-bottom: 200px;
	border-top: 3px solid #0c4373;
}

/*
*
* Stablecoin: Mint a crypto-backed stablecoin.
*
*/

#stablecoin #open-loan h2 {
	margin-bottom: 50px;
}
#stablecoin #open-loan .panel {
	margin-bottom: 0;
	border-top: 3px solid #0c4373;
}
#stablecoin #open-loan h3 {
	font-size: 25px;
}
#stablecoin #open-loan .steps {
	margin-bottom: 0;
}
#stablecoin #open-loan .steps h3 {
	font-size: 25px;
	margin-bottom: 15px;
}
#stablecoin #open-loan .steps .one h3::after {
	content: '1';
	display: block;
	font-size: 175px;
	opacity: 0.15;
	position: absolute;
	top: -100px;
	left: -50px;
}
#stablecoin #open-loan .steps .two h3::after {
	content: '2';
	display: block;
	font-size: 175px;
	opacity: 0.15;
	position: absolute;
	top: -100px;
	left: -50px;
}
#stablecoin #open-loan .steps .three h3::after {
	content: '3';
	display: block;
	font-size: 175px;
	opacity: 0.15;
	position: absolute;
	top: -100px;
	left: -50px;
}
#stablecoin #open-loan .steps > .grid-cell {
	margin-right: 50px;
}
#stablecoin #open-loan .steps > .grid-cell:last-of-type {
	margin-right: 0;
}
#stablecoin #open-loan object {
	display: block;
	height: auto;
	margin-top: 10px;
	margin-bottom: 30px;
	max-width: 150px;
}
#stablecoin #open-loan .grid-cell:nth-of-type(2) object {
	max-width: 100px;
}
#stablecoin #open-loan .button {
	margin-top: 50px;
}
#stablecoin #open-loan .panel p {
	font-size: 18px;
	line-height: 30px;
}

/* 1600px and below */

@media (max-width: 1600px) {

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

	/* Hero */

	#loan-hero-image {
		width: 420px;
		margin-left: 35px;
		margin-top: -85px;
	}
	#stablecoin .hero .rings img:nth-of-type(1) {
		left: 7px;
	}
	#stablecoin .hero .rings img:nth-of-type(2) {
		left: -102px;
		top: -31px;
	}
	#stablecoin .hero .rings img:nth-of-type(3) {
		left: -250px;
		top: -180px;
	}
	#stablecoin .hero .rings img:nth-of-type(4) {
		left: -450px;
		top: -380px;
	}
	#stablecoin .hero .rings img:nth-of-type(5) {
		left: -705px;
		top: -630px;
	}
	#stablecoin .hero .rings img:nth-of-type(6) {
		left: -1035px;
		top: -970px;
	}
	#stablecoin .hero .rings img:nth-of-type(7) {
		top: -1400px;
		left: -1450px;
	}
	#stablecoin #open-loan .button {
		margin-top: 75px;
	}
	#stablecoin footer {
		margin-top: 150px;
	}

}

/* 1300px and below */

@media (max-width: 1300px) {

	/* ==========================================================================
		Loan: 1300px and below
	========================================================================== */
	
	#stablecoin #why-borrow .dollar-cost::before {
		right: 37px;
	}
	#stablecoin #why-borrow .dollar-cost .grid-cell:nth-of-type(2)::before {
		left: 185px;
	}
	#stablecoin #why-borrow .dollar-cost .grid-cell:nth-of-type(2)::after {
		left: 90px;
	}
	#stablecoin #rebalancing .grid-center {
		background-position: right 6px;
	}
	#stablecoin .hero h1 {
		min-width: 600px;
	}
	#stablecoin .hero p {
		max-width: 450px;
	}
	#stablecoin #why-borrow .animation-clock::before {
		left: 326px;
	}
	#stablecoin #why-borrow .animation-clock::after {
		left: 390px;
	}

	/* Hero */

	#loan-hero-image {
		width: 380px;
		margin-left: 130px;
		margin-top: -80px;
	}
	#stablecoin .hero .rings {
		transform: translateX(60px) translateY(-430px) scale(0.8);
		z-index: -9;
		position: relative;
	}
	#stablecoin #bnusd-value .overview-panel > div:nth-of-type(2) {
		padding-left: 30px;
	}
	#stablecoin #bnusd-value .overview-panel > div:nth-of-type(3) div {
		padding-left: 30px;
		padding-right: 15px;
	}
	#stablecoin #bnusd-value .overview-panel .total-supply p {
		font-size: 50px;
	}

}


/* 1300px and below */

@media (min-width: 1100px) and (max-width: 1200px) {
	
}

/* 1200px and below */

@media (min-width: 1100px) and (max-width: 1260px) {
	.wrapper {
		max-width: 90%;
	}
	#loan-hero-image {
		margin-left: 20px;
	}
	#stablecoin .hero .rings {
		transform: translateX(0px) translateY(-430px) scale(0.8); 
	}
}

/* 1100px and below */

@media (max-width: 1100px) {

	/* ==========================================================================
		Loan: 110px and below
	========================================================================== */
	
	#stablecoin .hero .hero-image {
		right: 50px;
	}
	#stablecoin .hero .rings {
		transform: translateX(-15px) translateY(-430px) scale(0.8);
	}
	#stablecoin .wrapper::after {
		right: -275px;
	}
	#stablecoin .hero::before {
		right: -20px;
	}
	#stablecoin .hero::after {
		right: -130px;
	}
	#stablecoin #rebalancing .grid-center {
		background-position: right -25px top -102px;
	}
	#stablecoin #rebalancing .grid-center::before {
		right: 0;
		top: -115px;
		width: 50%;
	}
	/*
	#stablecoin #rebalancing .grid-center {
		flex-direction: column;
	}
	#stablecoin #rebalancing .grid-center::after {
		background-position: right -20px top 10px;
		background-size: 850px;
		right: 0px;
		top: -100px;
	}
	#stablecoin #rebalancing > .grid.grid-center > .grid-cell:first-of-type {
		margin-right: 0;
	}
	#stablecoin #bnusd-value #rebalancing .grid .grid-cell:nth-of-type(2) {
		width: 100%;
	}*/
	#stablecoin #why-borrow .dollar-cost img {
		max-width: 270px;
	}
	#stablecoin #why-borrow .dollar-cost:before {
		right: 12px;
	}
	#stablecoin #why-borrow .dollar-cost .grid-cell:nth-of-type(2)::before {
		left: 165px;
	}
	#stablecoin #why-borrow .dollar-cost .grid-cell:nth-of-type(2)::after {
		left: 64px;
	}
	#stablecoin #why-borrow .supply-liquidity img {
		margin-top: 50px;
		max-width: 100%;
	}
	#stablecoin #why-borrow .higher-return .grid-cell:nth-of-type(1)::before {
		left: 45px;
	}
	#stablecoin #why-borrow .higher-return .omm-token1,
	#stablecoin #why-borrow .higher-return .omm-token2,
	#stablecoin #why-borrow .higher-return .omm-token3 {
		left: 30px;
		top: 210px;
	}
	#stablecoin #why-borrow .animation-clock::before {
		left: 284px;
		top: 76px;
	}
	#stablecoin #why-borrow .animation-clock::after {
		left: 350px;
	}

	/* Hero */

	#stablecoin .hero h1 {
		min-width: 510px;
		margin-top: 0;
	}
	#stablecoin .hero p {
		max-width: initial;
	}
	#stablecoin .hero .hero-image {
	  right: 25px;
	}

	#loan-hero-image {
		width: 380px;
		margin-left: 40px;
		margin-top: -81px;
	}

	#stablecoin .grid-center.why-bnusd .grid-cell:nth-of-type(2)::after {
		transform: scale(3, 0.5) translateY(140px);
	}
}

/* 1000px and below */

@media (max-width: 1000px) {
	
	/* ===========================================================================
	  Loan: 1000px and below
	=========================================================================== */
	
	#stablecoin #rebalancing #cheap-expensive h3 {
		font-size: 33px;
		line-height: 1.3;
	}
	#stablecoin .wrapper:after {
		right: -350px;
	}
	#stablecoin .hero::before {
		right: -100px;
	}
	#stablecoin .hero::after {
		right: -210px;
	}
	#stablecoin .hero .hero-image {
		right: -55px;
	}
	#loan-hero-image {
		width: 280px;
	}
	#stablecoin .hero .rings {
    	transform: translateX(-55px) translateY(-380px) scale(0.8);
  	}
	#stablecoin .tldr h2 {
		line-height: 1.4;
	}
	#stablecoin .panel {
		padding: 30px;
	}
	#stablecoin #stablecoin-savings-rate .savings-rate-table {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(2,1fr);
		grid-template-rows:repeat(2,1fr);
		margin-bottom: 100px;
		margin-top: 20px;
	}
	#stablecoin #stablecoin-savings-rate .savings-rate-table .grid-cell {
		width: 100%;
	}
	#stablecoin #stablecoin-savings-rate .savings-rate-table .grid-cell h4 {
		font-size: 16px;
	}
	#stablecoin #stablecoin-savings-rate .savings-rate-table .grid-cell:nth-of-type(1) {
		border-bottom: 3px solid #0c4373;
		border-right: 0;
		grid-column: span 2;
		padding-bottom: 30px;
		padding-right: 0;
	}
	#stablecoin #stablecoin-savings-rate .savings-rate-table .grid-cell:nth-of-type(1) h4 span {
		display: inline;
	}
	#stablecoin #rebalancing #cheap-expensive > .grid-cell:first-of-type {
		margin-bottom: 50px;
	}
	#stablecoin #rebalancing .grid-center {
		flex-direction: column;
	}
	#stablecoin #rebalancing h2.separator {
		margin-bottom: 400px;
	}
	#stablecoin #rebalancing .grid-center {
		background-position: right 310px top 260px;
	}
	#stablecoin #rebalancing .grid-center::before {
		background-position:  0 190px;
		left: 0px;
		top: 228px;
		width: 70%;
	}
	#stablecoin #rebalancing .grid-center::after {
		background-size: 1000px;
		background-position: right 280px top 90px;
		left: 0;
		right: auto;
		top: 130px;
	}
	#stablecoin #bnusd-value h3 {
		margin-top: 0;
	}
	#stablecoin #redemption .burn {
		margin-bottom: -120px;
	}
	#stablecoin #tracked-utilised {
		flex-direction: column;
	}
	#stablecoin #tracked-utilised .grid-cell .grid.panel {
		flex-direction: row;
	}
	#stablecoin #tracked-utilised > .grid-cell:first-of-type .panel {
		margin-right: 0;
	}
	#stablecoin #tracked-utilised > .grid-cell:last-of-type h3,
	#stablecoin #tracked-utilised > .grid-cell:last-of-type .panel {
		margin-left: 0;
	}
	#stablecoin #why-borrow .animation-clock::before {
		left: 248px;
		top: 78px;
	}
	#stablecoin #why-borrow .animation-clock::after {
		left: 300px;
	}
	#stablecoin #why-borrow .dollar-cost .grid-cell:nth-of-type(2)::before {
		left: 135px;
	}
	#stablecoin #why-borrow .dollar-cost .grid-cell:nth-of-type(2)::after {
		left: 37px;
	}
	#stablecoin #why-borrow .dollar-cost::before {
		right: -14px;
	}
	#stablecoin #why-borrow .higher-return .grid-cell:nth-of-type(1)::before {
		left: 25px;
		top: -20px;
	}
	#stablecoin #why-borrow .higher-return .omm-token1,
	#stablecoin #why-borrow .higher-return .omm-token2,
	#stablecoin #why-borrow .higher-return .omm-token3 {
		left: -15px;
		top: 193px;
	}
	#stablecoin #open-loan .steps .one h3::after,
	#stablecoin #open-loan .steps .two h3::after,
	#stablecoin #open-loan .steps .three h3::after {
		font-size: 100px;
		left: -30px;
		top: -40px;
	}
	#stablecoin #why-borrow {
		margin-top: 100px;
	}
	#stablecoin #terms {
		line-height: 1.7;
		margin-bottom: 100px;
	}
	#stablecoin #terms ul {
		padding-left: 10px;
	}
	#stablecoin #open-loan .text-center {
		text-align: left;
	}
	#stablecoin #open-loan h2 {
		margin-bottom: 50px;
	}
	#stablecoin #open-loan .steps .three {
		margin-bottom: 50px;
	}
	#stablecoin #why-borrow .animation-clock::before {
		top: 58px;
	}
	#stablecoin #bnusd-value .overview-panel > .total-supply {
		padding-left: 30px;
		padding-right: 15px;
	}
  	#stablecoin #bnusd-value .overview-panel .total-supply p {
		font-size: 42px;
	}
	#stablecoin #bnusd-value .overview-panel .collateral-stability-fund .collateral, #stablecoin #bnusd-value .overview-panel .collateral-stability-fund .stability-fund-amount {
    	padding-top: 15px;
  	}
	#stablecoin #bnusd-value .overview-panel .collateral-stability-fund p {
		font-size: 20px;
	}
  	#stablecoin #bnusd-value .overview-panel > div:nth-of-type(2) {
		padding-right: 20px;
	}

	#stablecoin #why-borrow .supply-liquidity object {
		margin-top: 50px;
		max-width: 100%;
	}

}

/* Between 801px and 920px */

@media (min-width: 801px) and (max-width: 920px) {

	#stablecoin .wrapper {
    	max-width: 90%;
  	}
	#stablecoin #why-borrow .animation-clock img {
		width: 280px;
	}
	#stablecoin #why-borrow .animation-clock::before {
		background-size: 20px;
		height: 101px;
		left: 254px;
		top: 73px;
		width: 20px;
	}
	#stablecoin #why-borrow .animation-clock::after {
		background-size: 60px;
		height: 60px;
		width: 60px;
	}
}

/* 890px and below */

@media (max-width: 890px) {
	#loan-hero-image {
		width: 250px;
	}
	#stablecoin .hero .rings {
    	transform: translateX(-55px) translateY(-380px) scale(0.8);
  	}
	#tracked-utilised {
		padding-left: 0;
		padding-right: 0;
	}
}


/* 800px and below */

@media (max-width: 800px) {

	/*
	*
	* Hero: 800px and below
	*
	*/

	#stablecoin .hero > .grid:first-of-type {
		margin-bottom: 100px;
		flex-direction: column-reverse;
	}

	/* Loan */
	
	#stablecoin .hero h1 {
		line-height: 1.2;
		margin-top: 35px;
	}
	#stablecoin #why-borrow .animation-clock {
		justify-content: flex-start;
	}
	#stablecoin #why-borrow .feature {
		margin-bottom: 50px;
	}
	#stablecoin #why-borrow .grid.arbitrage {
		display: flex;
	}
	#stablecoin #why-borrow .grid.arbitrage .grid-cell:nth-of-type(1) {
		order: 1;
	}
	#stablecoin #why-borrow .grid.arbitrage .grid-cell:nth-of-type(2) {
		justify-content: flex-start;
		order: 2;
	}
	#stablecoin #bnusd-value .grid:nth-of-type(1) {
		flex-direction: column;
	}
	#stablecoin #bnusd-value #redemption .grid .grid-cell:first-of-type {
		flex: auto;
		margin-right: 0;
	}
	#stablecoin #redemption .burn {
		justify-content: left;
		margin-bottom: 0;
	}
	#stablecoin #bnusd-value .grid:nth-of-type(1) .grid-cell {
		margin-right: 0;
		width: 100%;
	}
	#stablecoin #bnusd-value > .grid:nth-of-type(1) .grid-cell:nth-of-type(2) {
		flex: auto;
		/*height: 400px;*/
		margin-top: 50px;
	}
	#stablecoin #bnusd-value h3 {
		margin-top: 50px;
	}
	#stablecoin #bnusd-value > .grid:nth-of-type(1) .grid-cell:nth-of-type(2)::before {
		width: 100%;
	}
	#stablecoin #bnusd-value .overview-panel .total-supply p {
		font-size: 38px;
	}
	#stablecoin #bnusd-value > .grid:nth-of-type(1) .grid-cell:nth-of-type(2)::after {
		background-position: left -510px top 0px;
	}
	#stablecoin #bnusd-value > .grid object {
		transform: translateX(3%);
		width: 80%;
	}
	#stablecoin #bnusd-value .overview-panel {
		margin-bottom: 50px;
		margin-top: 50px;
	}
	#stablecoin #bnusd-value .grid:nth-of-type(1).maintain-value .grid-cell:nth-of-type(1) p {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}
	#stablecoin #bnusd-value .overview-panel > div:nth-of-type(2) {
		padding-bottom: 20px;
		padding-top: 20px;
	}
	#stablecoin #bnusd-value .overview-panel .total-backing {
		flex-wrap: wrap;
	}
	#stablecoin #bnusd-value .overview-panel .total-backing h3 {
		margin-top: 10px;
		width: 100%;
	}
	#stablecoin #bnusd-value .overview-panel .total-backing  h3 span {
		display: inline;
	}
	#stablecoin .earn-baln-tokens object {
		margin-bottom: -50px;
	}
	#cheap-expensive {
		flex-direction: column;
	}

	/* Hero */

	#loan-hero-image {
		display: block;
		width: 320px;
		margin-left: auto;
		margin-right: auto;
		margin-top: -25px;
	}
	#stablecoin .hero .rings {
		position: absolute;
		top: -50px;
		left: 10%;
		transform: translateX(115px) translateY(80px) scale(0.6);
	}
	#stablecoin .grid.hero {
		margin-bottom: 100px;
		margin-top: 120px;
	}
	#stablecoin .hero .hero-image {
		background-size: 280px;
		height: 500px;
		left: 15%;
		right: auto;
		width: 300px;
		top: 15px;
	}
	#stablecoin .hero p {
		max-width: 100%;
	}
	#stablecoin .grid.grid-center.why-bnusd {
		flex-direction: column;
		margin-bottom: 100px;
	}
	#stablecoin .grid.grid-center.why-bnusd .grid-cell {
		width: 100%;
	}

	/* TL;DR */

	#stablecoin .tldr {
	    flex-direction: column;
	  }
	#stablecoin .tldr .grid-cell {
		margin-right: 0%;
	}
	#stablecoin .tldr .grid-cell:nth-of-type(3n) {
		margin-right: 0;
	}
	#stablecoin .tldr .panel {
		box-sizing: border-box;
		padding: 20px;
	}

	/* Tracked on / Utilised by */

	#tracked-utilised {
		flex-direction: column;
	}
	#tracked-utilised > .grid-cell:first-of-type .panel {
		margin-right: 0;
	}
	#stablecoin #tracked-utilised {
		margin-bottom: 100px;
	}
	#stablecoin #tracked-utilised .panel {
		flex-direction: row;
	}
	#stablecoin #tracked-utilised > .grid-cell:last-of-type .panel,
	#stablecoin #tracked-utilised > .grid-cell:last-of-type h3 {
		margin-left: 0;
	}
	#stablecoin #tracked-utilised p {
		line-height: 1.6;
	}

	/* Rebalancing */

	#stablecoin #rebalancing {
		margin-bottom: 50px;
	}
	#stablecoin #rebalancing #cheap-expensive > .grid-cell:first-of-type {
		margin-right: 0;
	}
	#stablecoin #rebalancing > .grid.grid-center > .grid-cell:first-of-type {
		margin-right: 0;
	}
	#stablecoin #rebalancing .grid-center {
		background-position: right 100px top 215px;
		background-size: 1000px;
	}
	#stablecoin #rebalancing .grid-center::before {
		width: 90%;
	}
	#stablecoin #rebalancing .grid-center::after {
		background-position: right 100px top 90px;
		top: 130px;
  	}
	#stablecoin #why-borrow .animation-clock img {
		margin-bottom: 20px;
		margin-top: 0;
		width: 300px;
	}
	#stablecoin #why-borrow .animation-clock::before {
		height: 150px;
		left: 199px;
		top: 35px;
		width: 30px;
  	}
	#stablecoin #why-borrow .animation-clock::after {
		background-size: 70px;
		left: 250px;
	}
	#stablecoin #why-borrow .earn-baln-tokens img {
		margin-bottom: 50px;
	}
	#stablecoin #why-borrow .earn-baln-tokens .grid-cell:nth-of-type(1) {
		order: 2;
	}
	#stablecoin #why-borrow .dollar-cost::before {
		left: -70px;
		top: -55px;
	}
	#stablecoin #why-borrow .dollar-cost img {
		max-width: auto;
		margin-bottom: 20px;
		margin-left: 30px;
		width: 200px;
	}
	#stablecoin #why-borrow .dollar-cost .grid-cell:nth-of-type(2) {
		text-align: left;
	}
	#stablecoin #why-borrow .dollar-cost .grid-cell:nth-of-type(2)::before {
		background-size: 115px;
    	left: 62px;
		top: -25px;
  	}
	#stablecoin #why-borrow .dollar-cost .grid-cell:nth-of-type(2)::after {
		background-size: 115px;
    	left: -7px;
		top: 245px;
  	}
	#stablecoin #why-borrow .arbitrage {
		margin-bottom: 50px;
	}
	#stablecoin #why-borrow .arbitrage .grid-cell:nth-of-type(1) {
		order: 2;
		margin-bottom: 30px;
	}
	#stablecoin #why-borrow .supply-liquidity .grid-cell:nth-of-type(2) {
		text-align: left;
	}
	#stablecoin #why-borrow .arbitrage .grid-cell:nth-of-type(1) img,
	#stablecoin #why-borrow .supply-liquidity img {
		width: 350px;
	}
	#stablecoin #why-borrow .higher-return .grid-cell:nth-of-type(1) {
		margin-bottom: 40px;
		order: 1;
	}
	#stablecoin #why-borrow .higher-return .grid-cell:nth-of-type(1)::before {
		background-size: 70px;
    	left: 20px;
  	}
	#stablecoin #why-borrow .higher-return .omm-token1, #stablecoin #why-borrow .higher-return .omm-token2, #stablecoin #why-borrow .higher-return .omm-token3 {
    	left: 0;
    	top: 183px;
  }
	#stablecoin #open-loan .steps {
		margin-bottom: 50px;
	}

	/*
	*
	* Stablecoin: Redemption
	*
	*/

	#stablecoin #redemption {
		flex-direction: column;
	}
	#stablecoin #redemption > .grid-cell:nth-of-type(2) {
		margin-left: 0;
	}
	#stablecoin #bnusd-value .grid.maintain-value > .grid-cell:nth-of-type(2) {
		margin-left: 0;
	}
	#stablecoin #bnusd-value > .grid object {
		margin-bottom: 40px;
		width: 100%;
	}
	
	/* Why Borrow */

	#stablecoin #why-borrow h2 {
		margin-bottom: 90px;
		text-align: left;
	}
	#stablecoin #why-borrow img {
		max-width: 75%;
	}
	#stablecoin #why-borrow .feature {
		flex-direction: column-reverse;
		align-items: initial;
	}
	#stablecoin #why-borrow .grid.supply-liquidity {
		display: flex;
	}
	#stablecoin #why-borrow .grid.supply-liquidity .grid-cell:nth-of-type(1) {
		order: 1;
	}
	#stablecoin #why-borrow .feature > .grid-cell:last-of-type {
		margin-left: 0;
	}
	#stablecoin #why-borrow .feature > .grid-cell:first-of-type {
		margin-right: 0;
	}
	#stablecoin #why-borrow .feature > .grid-cell:last-of-type {
		margin-bottom: 25px;
	}
	#stablecoin #why-borrow .earn-baln-tokens img {
		max-width: 80%;
	}

	/* Terms and conditions */

	#stablecoin #terms h2 {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		max-width: 300px;
	}
	#stablecoin #terms > .grid-cell >.grid {
		flex-direction: column;
	}

	/* Open your stablecoin loan */

	#open-loan .steps {
		flex-direction: column;
	}
	#stablecoin #open-loan .steps > .grid-cell {
    margin-right: 0;
	}

	#stablecoin #open-loan .button {
		margin-top: 0;
	}
	#stablecoin #open-loan .steps > .grid-cell {
		margin-bottom: 50px;
	}
	#stablecoin #open-loan .steps > .grid-cell:last-of-type {
		margin-bottom: 0;
	}
	#stablecoin #open-loan .steps .one h3::after,
	#stablecoin #open-loan .steps .two h3::after,
	#stablecoin #open-loan .steps .three h3::after {
		font-size: 100px;
		left: -15px;
		top: -55px;
	}


}

/* 600px and below */

@media (max-width: 600px) {

	/* ==========================================================================
		Stablecoin borrowing: 600px and below
	========================================================================== */
	
	#stablecoin #tracked-utilised h3,
	#bnusd-value h3 {
		font-size: 28px;
	}
	#stablecoin #rebalancing .grid-center {
		background-position: -210px 265px;
		background-size: 600px;
		right: auto;
	}
	#stablecoin #rebalancing .grid-center::before {
		left: 0;
		right: auto;
		top: 195px;
		width: 350px;
	}
	#stablecoin #rebalancing .grid-center::after {
		background-position: left -380px top 90px;
		background-size: 800px;
	}
	#stablecoin .hero .rings {
		position: absolute;
		top: -50px;
		left: -50px;
	}

	#stablecoin #why-borrow .supply-liquidity .grid-cell:nth-of-type(2) h3 {
		margin-top: 35px;
	}
	#stablecoin #why-borrow .supply-liquidity object {
		max-width: 100%;
		width: 100%;
	}
	#stablecoin #why-borrow .arbitrage {
		margin-bottom: 0;
	}
	#stablecoin #bnusd-value > .grid:nth-of-type(1) .grid-cell:nth-of-type(2) {
    	background-position: right -70px top -35px;
	}
	#stablecoin #bnusd-value > .grid:nth-of-type(1) .grid-cell:nth-of-type(2)::after {
		background-size: 210%;
		background-position: right 11% top 0;
	}
	#stablecoin #bnusd-value #rebalancing .grid .grid-cell .info-panel {
		margin-top: 50px;
	}
	#stablecoin #redemption h3 {
		margin-top: 0;
	}
	#stablecoin .hero .rings {
		position: absolute;
		top: initial;
		left: initial;
		scale: 0.9;
		transform: translateX(73px) translateY(-430px) scale(0.8);
	}
	#loan-hero-image {
		margin-top: 0;
	}
	#stablecoin #tracked-utilised .grid-cell.supported-types .grid.panel,
	#stablecoin #tracked-utilised .grid-cell.available-on .grid.panel {
		flex-wrap: wrap;
		justify-content: center;
		padding-bottom: 0;
	}
	#stablecoin #tracked-utilised .grid-cell.supported-types .grid.panel {
		gap: 10px 2%;
		padding-bottom: 0;
	}
	#stablecoin #tracked-utilised .grid-cell.supported-types .grid.panel .grid-cell {
		flex-basis: calc(25% - 10px);
		letter-spacing: 0.05rem;
		max-width: calc(25% - 10px);
	}
	#stablecoin #tracked-utilised .grid-cell.supported-types .grid.panel .grid-cell,
	#stablecoin #tracked-utilised .grid-cell.available-on .grid.panel .grid-cell {
		display: block;
		margin-bottom: 0px;
	}
	#stablecoin #tracked-utilised .grid-cell.available-on .panel.grid {
		gap: 50px 0px;
		padding-bottom: 50px;
		padding-top: 50px;
	}
	#stablecoin #tracked-utilised .grid-cell.available-on .panel.grid .grid-cell {
		flex-basis: 25%;
		max-width: 25%;
	}
	#tracked-utilised .available-on .panel.grid .grid-cell.empty-space {
		background-size: 40px;
	}
    /*#tracked-utilised .available-on .panel.grid .grid-cell:nth-child(n+4) {
        margin-top: 10px;
    }*/
    #tracked-utilised .available-on img,
    #tracked-utilised > .grid-cell.available-on:last-of-type > .grid > .grid-cell:last-of-type img {
        height: 40px;
    }
	#tracked-utilised .available-on .panel.grid .grid-cell:nth-child(n+6) {
		margin-top: 0;
	}
	#tracked-utilised > .supported-types.grid-cell:first-of-type .panel {
		max-height: 2000px;
	}
	#stablecoin #tracked-utilised .grid-cell.supported-types .grid.panel .grid-cell p {
		margin-bottom: 40px;
	} 
	#stablecoin #tracked-utilised .grid-cell.supported-types .grid.panel .grid-cell.empty-space p:empty {
		margin-bottom: 0;
	}
}

/* 550px and below */

@media (max-width: 550px) {

	#stablecoin #rebalancing {
		margin-bottom: 20px;
		margin-top: 27%;
	}
	#stablecoin #bnusd-value > .grid object {
		width: 137%;
		margin-bottom: 0;
	}
	#stablecoin #stablecoin-savings-rate {
		flex-direction: column;
	}
	#stablecoin #stablecoin-savings-rate .savings-rate-table {
		display: grid;
		margin-top: 50px;
	}
	#stablecoin #stablecoin-savings-rate .grid-cell h4 span {
		display: inline;
	}
	#stablecoin #stablecoin-savings-rate .savings-rate-table .grid-cell p {
		font-size: 25px;
	}
	#stablecoin #stablecoin-savings-rate .savings-rate-table .grid-cell:nth-of-type(1) {
		padding-bottom: 20px;
	}
	#stablecoin #redemption .grid {
		display: flex;
		flex-direction: column;
	}
	#stablecoin #redemption .grid .grid-cell:nth-of-type(1) {
		order: 2;
	}
	#stablecoin #redemption .grid .grid-cell:nth-of-type(2) {
		max-height: 320px;
		order: 1;
		overflow: hidden;
		width: 100%;
	}
	#stablecoin #redemption .burn {
		justify-content: left;
		margin-bottom: 50px;
	}
	#stablecoin #redemption .burn object {
		height: 400px;
		margin-left: -30px;
	}
	#why-borrow .grid:nth-of-type(2) .text-gradient:nth-of-type(1) {
		display: inline-block;
	}
}

/* 500px and below */

@media (max-width: 500px) {

	/* Loan */

	#stablecoin .grid.hero {
		margin-bottom: 50px;
	}
	#stablecoin .hero h1  {
		min-width: auto;
	}
	#stablecoin h1 span.make-block {
		display: block;
	}

	#stablecoin #bnusd-value #rebalancing .grid .grid-cell .info-panel {
		margin: 80px 0;
		padding: 15px;
	}
	#stablecoin #bnusd-value #rebalancing .grid .grid-cell table td {
		font-size: 14px;
		padding-left: 0;
	}
	#stablecoin #bnusd-value #rebalancing .grid .grid-cell table td:nth-of-type(1) {
		padding-left: 25px;
	}
	#stablecoin #bnusd-value #rebalancing .grid .grid-cell table tr:nth-of-type(2) td:nth-of-type(1),
	#stablecoin #bnusd-value #rebalancing .grid .grid-cell table tr:nth-of-type(3) td:nth-of-type(1),
	#stablecoin #bnusd-value #rebalancing .grid .grid-cell table tr:nth-of-type(4) td:nth-of-type(1){
		background-size: 15px;
	}
	#stablecoin #bnusd-value #rebalancing .grid .grid-cell table th {
    	font-size: 10px;
		letter-spacing: 0.1em;
	}
	#stablecoin #bnusd-value #rebalancing .grid .grid-cell table td strong {
		letter-spacing: 0em;
	}
	#stablecoin #bnusd-value #rebalancing .grid .grid-cell table td:not(:nth-of-type(1)) {
		padding-left: 10px;
	}
	#stablecoin #loan-hero-image {
		width: 70%;
	}
	#stablecoin h1 {
		font-size: 42px;
	}
	#stablecoin #open-loan .steps h3 {
		font-size: 25px;
	}
	#stablecoin #open-loan .text-center {
		margin-bottom: 50px;
	}
	#stablecoin #bnusd-value > .grid:nth-of-type(1) .grid-cell:nth-of-type(2)::after {
		background-position: right 8% top 22%;
	}
	#stablecoin #tracked-utilised .grid-cell.available-on .panel.grid {
		flex-wrap: wrap;
		max-height: 100%;
		padding: 30px 15px 0px 15px;
	}
	#stablecoin #tracked-utilised .grid-cell.supported-types .panel.grid {
		padding: 30px 15px 0px 15px;
	}
	#stablecoin #tracked-utilised p {
		font-size: 15px;
		line-height: 1.6;
	}
	#stablecoin #tracked-utilised .panel {
		padding: 30px 15px;
	}
	#stablecoin #tracked-utilised .panel img {
		height: 40px;
		margin: auto auto 10px auto;
	}
	#stablecoin #tracked-utilised .grid-cell.supported-types .grid.panel .grid-cell p {
		margin-bottom: 30px;
	}
	#stablecoin #tracked-utilised .grid-cell.available-on .panel.grid {
		padding-bottom: 40px;
	}
	#stablecoin #tracked-utilised .available-on .panel img {
		height: 40px;
	}
	#tracked-utilised .supported-types .panel.grid .grid-cell.empty-space {
		background-size: 40px;
	}
	#stablecoin #terms,
	#stablecoin footer {
		margin-top: 100px;
	}
	#stablecoin #terms ul {
		padding-left: 10px;
	}
	#stablecoin #bnusd-value .text-center {
		text-align: left;
	}
	footer {
		margin-top: 50px;
	}
}

/* 450px and below */

@media (max-width: 450px) {
	#stablecoin #stablecoin-savings-rate .grid-cell h4 span {
		display: block;
	}
	#stablecoin #stablecoin-savings-rate .savings-rate-table .grid-cell p {
		font-size: 22px;
	}
}

/* 430px and below */

@media (max-width: 430px) {

	#stablecoin .hero .hero-image {
		background-position: 50px 0;
	}
	#stablecoin .hero::before {
		left: -30px;
	}
	#stablecoin .hero::after {
		left: -170px;
	}
	#stablecoin .wrapper::after {
		left: -200px;
	}
	#stablecoin .tldr {
		margin-bottom: 50px;
	}
	#stablecoin .grid-center.why-bnusd .grid-cell:nth-of-type(2)::after {
		top: -30px;
	}
	#stablecoin .hero .rings {
		top: -100px;
		left: -35px;
	}

	/* Dollar cost */

	#stablecoin #why-borrow .dollar-cost img {
		margin-left: 80px;
	}
	#stablecoin #why-borrow .dollar-cost::before {
		left: -20px;
	}
	#stablecoin #why-borrow .dollar-cost .grid-cell:nth-of-type(2)::before {
		left: 112px;
	}
	#stablecoin #why-borrow .dollar-cost .grid-cell:nth-of-type(2)::after {
		left: 43px;
	}
}

/* 430px and below */

@media (max-width: 430px) {
	/* ==========================================================================
		Stablecoin: 400px and below
	========================================================================== */

	/* Hero */

	#stablecoin .hero h1 {
		font-size: 40px;
		line-height: 1.2;
		margin-top: 50px;
	}
	#stablecoin #tracked-utilised > .grid-cell:first-of-type .panel {
		padding: 30px 0;
	}
	#stablecoin #tracked-utilised .panel {
		padding: 15px;
	}
	#stablecoin #tracked-utilised .panel a {
		display: block;
		padding: 0;
		margin: 0 10px;
	}
	#stablecoin #tracked-utilised .panel p {
		font-size: 14px;
	}
	#stablecoin #rebalancing h2.separator {
		margin-bottom: 330px;
	}
	#stablecoin #rebalancing .grid-center::after {
		background-size: 750px;
		background-position: left -360px top 90px;
	}
	#stablecoin #rebalancing .grid-center::before {
		top: 148px;
		width: 330px;
	}
	#stablecoin #rebalancing .grid-center {
		background-position: -230px 217px;
		background-size: 600px;
	}
	#stablecoin #why-borrow .earn-baln-tokens img {
		margin-bottom: 25px;
		margin-left: auto;
		margin-right: auto;
		display: block;
		max-width: 90%;
	}

	#stablecoin #rebalancing .grid-center::after {
		top: 100px;
	}

	#stablecoin .grid.grid-center.why-bnusd .grid-cell:nth-of-type(1) {
		order: 2;
	}
	#stablecoin .grid.grid-center.why-bnusd .grid-cell:nth-of-type(2) {
		margin-bottom: 60px;
		order: 1;
	}

	/* Dollar cost */

	#stablecoin #why-borrow .dollar-cost img {
		margin-left: 70px;
	}
	#stablecoin #why-borrow .dollar-cost::before {
		left: -30px;
	}
	#stablecoin #why-borrow .dollar-cost .grid-cell:nth-of-type(2)::before {
		left: 102px;
	}
	#stablecoin #why-borrow .dollar-cost .grid-cell:nth-of-type(2)::after {
		left: 33px;
	}

	/* Hero */

	#stablecoin .hero h1 {
		margin-top: 35px;
		min-width: initial;
	}
	#stablecoin .hero h1 .text-gradient {
		display: block;
	}
	#stablecoin .hero #loan-hero-image {
		width: 240px;
	}
	#stablecoin .hero .rings {
		transform: translateX(128px) translateY(210px) scale(0.5);
	}
	#stablecoin #bnusd-value > .grid:nth-of-type(1) .grid-cell:nth-of-type(2)::after {
		background-position: right 8% top 28%;
	}
	#stablecoin #bnusd-value > .grid:nth-of-type(1) .grid-cell:nth-of-type(2)::before {
		background-position: 12px 195px;
	}

	#stablecoin #redemption .burn {
		display: block;
		margin-bottom: 0;
	}
	#stablecoin #redemption .burn object {
		height: auto;
		margin-left: 0;
		margin-right: 0;
		transform: translateX(0);
		width: 70%;
	}
	#stablecoin #why-borrow h2 {
		margin-bottom: 20px;
	}
	#stablecoin #why-borrow h3 {
		font-size: 30px;
		margin-bottom: 15px;
	}
	#stablecoin #why-borrow .feature > .grid-cell:last-of-type {
		margin-bottom: 0;
	}
}

/* 390px and below */

@media (max-width: 390px) {

	#stablecoin .hero .rings {
		transform: translateX(109px) translateY(210px) scale(0.5);
	}
	#stablecoin #rebalancing {
		margin-bottom: 20px;
		margin-top: 40%;
	}
}