/* HEADER */

body {
	padding: 0;
}

.header {
	background: transparent;
}

/* MARKET PLACE */

.marketplace {
	text-align: left;
	position: relative;
}

.market-slogan {
	min-height: 500px;
	padding: 132px 24px 32px;
	background-image: linear-gradient(151.58deg, #006da2 1.64%, #001223 97.41%);
}

.market-slogan .h3 {
	font-size: 18px;
	line-height: 26px;
	letter-spacing: 0;
	font-weight: 400;
	font-style: italic;
	text-transform: uppercase;
	color: var(--light);
	margin-bottom: 12px;
}

.market-slogan .h2 {
	font-size: 24px;
	line-height: 32px;
	letter-spacing: 0;
	font-weight: 800;
	color: var(--light);
	text-transform: uppercase;
	font-style: italic;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: flex-start;
	align-items: flex-start;
	max-width: 220px;
	margin-left: 0;
}

.market-slogan .h2 span {
	letter-spacing: 0;
	margin-top: -4px;
}

.market-slogan .h2 span:last-child {
	font-size: 72px;
	line-height: 88px;
	letter-spacing: -1.5px;
	margin-right: 0;
}

.market-info {
	padding: 32px 16px 0px;
	margin-bottom: 40px;
}

.market-info p {
	margin: 0 12px;
	text-align: left;
	max-width: 82%;
}

.market-info .h4 {
	color: var(--p3);
	font-weight: 500;
	margin-bottom: 12px;
	text-transform: uppercase;
	line-height: 34px;
}

.market-info .h4 span {
	font-weight: 800;
}

/* COLMEIA */

.colmeia {
	display: block;
	width: 100%;
	min-height: 570px;
	margin-top: -360px;
	filter: drop-shadow(0px 4px 14px rgba(0, 18, 35, 0.08));
	overflow: hidden;
}

.colmeia .colmeia-mob {
	width: 120%;
	max-width: none;
	margin-left: -10%;
}

/* BANNERS */

.banners {
	display: none;
}

.banners .item img {
	border-radius: 8px;
	cursor:pointer;
}

/* APP */

.app {
	width: 100%;
	min-height: 800px;
	margin: 0;
	padding: 162px 16px;
	/* background-color: var(--p3); */
	background-image: url(../img/bg-apps.svg);
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	position: relative;
	z-index: 1;
}

.app .h3 {
	margin-bottom: 18px;
	color: var(--light);
}

.app small {
	display: block;
	font-weight: 400;
	color: var(--s2);
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.25px;
}

.app img#screens-app {
	margin-bottom: -160px;
}

.app ul {
	margin: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: flex-start;
	align-items: center;
	gap: 12px;
	padding: 0;
	list-style: none;
	color: var(--light);
}

.app ul li {
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.25px;
	font-weight: 400;
}

.app-store {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: flex-start;
	align-items: center;
	gap: 24px;
	padding: 40px 0 18px;
}

.app-store img {
	max-width: 120px;
}

.map {
	padding: 0 16px;
	margin-top: 64px;
	background-color: transparent;
	z-index: 0;
	position: relative;
}

.map .h4 {
	color: var(--p3);
	margin-bottom: 14px;
}

.map-area {
	width: calc(100% + 48px);
	margin-top: 80px;
	margin-left: -24px;
}

@media screen and (min-width: 768px) {
	.marketplace:after {
		width: 70%;
		height: 290px;
		top: 0;
		right: 0;
		background-position: top right;
		background-size: 70%;
		transform: rotate(0);
	}

	/* .market-slogan {
		padding: 24px 48px;
	} */

	.market-slogan .h2 {
		font-size: 32px;
		line-height: 40px;
		max-width: 360px;
	}

	.market-slogan .h3 br {
		display: none;
	}

	.market-info {
		padding: 0 16px;
		margin-bottom: 0;
		margin-top: -10px;
	}

	.market-info p {
		max-width: 72%;
	}

	.banners {
		display: block;
		margin: 24px auto 40px 32px;
		width: 70%;
	}

	.colmeia {
		min-height: 600px;
		margin-top: -314px;
	}

	.app {
		padding: 40px 32px;
	}

	.app ul {
		max-width: 50%;
	}

	.app img#screens-app {
		margin-bottom: 0;
		max-width: 400px;
		position: absolute;
		top: 0;
		right: 0;
	}

	.app-store {
		align-content: flex-start;
		justify-content: flex-start;
		max-width: 50%;
	}

	.map {
		padding: 96px 24px 0;
	}

	.map p {
		max-width: 50%;
		text-align: right;
		margin: 0 32px 0 auto;
	}
}

@media screen and (min-width: 992px) {
	.market-slogan {
		padding: 146px 0;
		position: relative;
	}

	.colmeia {
		background-size: 100%;
		width: 60%;
		margin-left: auto;
		margin-right: 100px;
	}

	.map-area {
		width: 100%;
		margin-top: 80px;
		margin-left: 0;
	}
}

@media screen and (min-width: 1366px) {
	.market-slogan .h3 {
		font-size: 28px;
		line-height: 40px;
	}

	.market-slogan .h2 {
		font-size: 48px;
		line-height: 56px;
		max-width: 560px;
	}

	.market-slogan .h2 span {
		font-size: 54px;
	}

	.market-slogan .h2 span:last-child {
		font-size: 88px;
		line-height: 88px;
	}

	.colmeia {
		min-height: 550px;
		max-width: 1000px;
		margin: -340px 96px 0 auto;
		margin-left: auto;
	}

	.market-info p {
		max-width: 100%;
	}

	.market-info p {
		font-size: 24px;
		line-height: 36px;
		margin: 0;
	}

	.market-info .h4 {
		font-size: 44px;
		line-height: 56px;
		margin: 0 0 24px 0;
		font-weight: 400;
	}

	.banners {
		display: block;
		margin: 56px auto 40px;
		width: 100%;
	}

	.app {
		padding: 0;
		background-image: url(../img/bg-apps-web.svg);
		display: flex;
		align-content: center;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.app .box {
		position: relative;
		padding-left: 180px;
	}

	.app img#screens-app {
		margin-bottom: 0;
		max-width: 550px;
		position: absolute;
		top: -140px;
		right: 0;
	}

	.app ul {
		max-width: 60%;
	}

	.map {
		padding: 0;
		margin: 0;
		text-align: center;
	}

	.map p {
		max-width: 100%;
		text-align: center;
		margin: 0 32px 0 auto;
	}
}

@media screen and (min-width: 1600px) {
	.colmeia {
		min-height: 640px;
		margin: -340px 240px 0 auto;
	}
}

.col-area {
	position: absolute;
	top: 100px;
	left: 100px;
	background-color: white;
	padding: 48px;
	z-index: 2;
	width: 450px;
	min-height: 400px;
	border-radius: 24px;
	box-shadow: 0 4px 24px rgb(30 33 48 / 40%);
	display: none;
}

.col-area img.col-logo {
	max-width: 250px;
	margin-bottom: 24px;
}

.col-area img.col-pack {
	max-width: 100%;
	margin-bottom: 48px;
}

.col-area p {
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.25px;
	font-weight: 400;
}