/*
* Balanced
* Brand CSS
* Version 2.0
* Last updated 14/6/23
*/

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

.hero .bubble-1 {
	background-image: url(https://balanced.network/img/feature/bubble-1-image.png);
	display: block;
	height: 500px;
	background-repeat: no-repeat;
	position: absolute;
	width: 500px;
	margin-left: -50px;
	margin-top: -125px;
	z-index: -1;
}
.hero .bubble-2 {
	background-image: url(https://balanced.network/img/feature/bubble-2-image.png);
	display: block;
	height: 500px;
	background-repeat: no-repeat;
	position: absolute;
	width: 500px;
	margin-left: -900px;
	margin-top: 250px;
	z-index: -1;
}
.hero .bubble-3 {
	background-image: url(https://balanced.network/img/feature/bubble-3-image.png);
	display: block;
	height: 500px;
	background-repeat: no-repeat;
	position: absolute;
	width: 500px;
	margin-left: -350px;
	margin-top: 550px;
	z-index: -1;
}
#brand .hero h2 {
	font-size: 35px;
	margin-bottom: 0;
}
#brand .hero img {

}
#brand {

}
#brand .hero-background-flow {
	position: absolute;
	top: -209px;
	z-index: -9;
	width: 100%;
	margin-left: 34%;
	opacity: 0.5;
}
#brand .hero .bubble-2 {
	margin-left: -600px;
	margin-top: -150px;
}
#landing .hero-cover {
	position: absolute;
	height: 1400px;
	width: 300%;
	background: linear-gradient(180deg, rgba(1,0,42,0) 0%, rgba(1,0,42,1) 50%, rgba(1,0,42,1) 100%);
	margin-left: -100%;
	margin-top: -700px;
	z-index: -1;
}

/* Logo section */

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

/* Design system section */

#brand section.feature > .grid-cell:last-of-type {
	margin-left: 200px;
}
#brand section.feature > .grid-cell:last-of-type > .grid > .grid-cell:first-of-type {
	margin-right: 75px;
}
#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 {
	color: #ffffff;
	font-size: 20px;
}

/* Color circles */

.brand-circle {
	width: 100px;
	height: 100px;
	border-radius: 100px;
}
.brand-circle.turqoise {
	background-color: #2ca9b7;
}
.brand-circle.navy {
	border: 3px solid #2ca9b7;
	background-color: #01002a;
}
.brand-circle.turqoise {
	background-color: #2ca9b7;
}
.brand-circle.light-grey {
	background-color: #d5d7db;
}
.brand-circle.dark-grey {
	background-color: #8695a6;
}
.brand-circle.white {
	background-color: #ffffff;
}
.brand-circle.red {
	background-color: #fb6a6a;
}
.brand-circle.color-panel {
	background-color: #0c2a4d;
}
.brand-circle.color-parent-panel {
	background-color: #144a68;
}

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

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

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

#brand-color-palette .hero p {
	max-width: 100%;
}
#brand-color-palette .hero {
	margin-bottom: 50px;
	margin-top: 50px;
}
#brand-color-palette .colors h3 {
	margin-bottom: 25px;
	margin-top: 35px;
	margin-left: 100px;
}
#brand-color-palette .color-container h3 {
	margin-bottom: 5px;
	margin-top: 0;
	margin-left: 0;
	
}
#brand-color-palette .hero img {
	position: absolute;
	width: 700px;
	margin-left: 100px;
	margin-top: 75px;
}
#brand-color-palette .hero ul li {
	font-size: 20px;
	color: rgba(255,255,255,0.75);
	line-height: 35px;
}

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

.wallpaper img {
	max-width: 100%;
	border-radius: 15px;
	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);
}
.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%;
}
#brand.wallpapers footer {
	margin-top: 100px;
}
#brand.wallpapers .hero {
	margin-bottom: 100px;
}

/* 1600px and above */

@media (min-width: 1600px) {

	/* ==========================================================================
		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(https://balanced.network/img/feature/bubble-2.png);
		width: 100px;
		background-size: contain;
		opacity: 0.5;
	}
	#brand .hero .bubble-2 {
		background-image: url(https://balanced.network/img/feature/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(https://balanced.network/img/feature/bubble-2.png);
		width: 120px;
		background-size: contain;
		opacity: 0.75;
	}
}

/* ==========================================================================
	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: -35px;
	}
	#brand .hero img {
		width: 1000px;
		margin-right: -325px;
		margin-top: -100px;
	}
	#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: -250px;
	    background-image: url(https://balanced.network/img/feature/bubble-2.png);
		width: 100px;
		background-size: contain;
		opacity: 0.5;
	}
	#brand .hero .bubble-2 {
		background-image: url(https://balanced.network/img/feature/bubble-2.png);
		width: 250px;
		background-size: contain;
		margin-left: -1000px;
		opacity: 0.5;
	}
	#brand .hero .bubble-3 {
	    margin-left: -50px;
	    margin-top: -680px;
	    background-image: url(https://balanced.network/img/feature/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) {

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

	#brand .hero {
		margin-bottom: 0;
	}
	#brand .hero img {
		width: 900px;
		margin-right: -200px;
		margin-top: -100px;
	}
	#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(https://balanced.network/img/feature/bubble-2.png);
	    width: 100px;
	    background-size: contain;
	    opacity: 0.5;
	}
	#brand .hero .bubble-2 {
		background-image: url(https://balanced.network/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(https://balanced.network/img/feature/bubble-2.png);
		width: 120px;
		background-size: contain;
		opacity: 0.75;
	}
}

/* 800px and below */

@media (max-width: 800px) {

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

	/* Hero */

	#brand .hero {
		flex-direction: column-reverse;
	}
	#brand .hero .panel {
		margin-top: 25px;
		margin-bottom: 0;
	}
	#brand .hero img {
		width: 140%;
		margin: 0;
		margin-left: -17%;
		margin-bottom: -50px;
	}
	#brand .hero h2 {
		font-size: 30px;
	}
	#brand #branding-kit {
		margin-top: 50px;
	}
	#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;
	}

}


/* 600px and below */

@media (max-width: 600px) {

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

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

}