/* @format */

.hero-lp {
	background-color: #000;
	color: #fff;
	padding-bottom: 226px;
	padding-top: 229px;
	position: relative;
	text-align: left;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.hero-lp-titles-container {
	animation: fadeIn 2s forwards;
	opacity: 0;
	position: relative;
	z-index: 1;
}

.hero-lp--content {
  padding-top: 32px;
}

.hero-lp--content p {
  font-weight: 500;
  font-size: 24px;
  line-height: 40px;
}

.hero-lp--list {
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-lp--list li {
  display: flex;
  gap: 12px;
  align-items: center;
  font-weight: 400;
  font-size: 24px;
  line-height: 36px;
}

.hero-lp--list svg {
  width: 24px;
  height: 24px;
  color: #5c6fff;
}

.hero-lp--button {
  display: flex;
  padding-top: 42px;
}

.hero-lp--links {
  padding-top: 42px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero-lp--links a {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
}

.hero-lp--links svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 700px) {
  .hero-lp--content p {
    font-size: 18px;
    line-height: 24px;
  }

  .hero-lp--list li {
    font-size: 18px;
    line-height: 24px;
  }

  .hero-lp--list svg {
    width: 18px;
    height: 18px;
  }

  .hero-lp--button {
    display: block;
    padding-top: 24px;
  }

  .hero-lp--links a {
    font-size: 16px;
    line-height: 20px;
  }
}

.hero-lp-image-container {
	min-height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	width: 55.41%;
}

.hero-lp-image-container::before {
	background-image: url(../../../images/bandlab/sullivan/lp/hero-lp-background.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	content: "";
	height: 100%;
	position: absolute;
	width: 100%;
}

.hero-lp-image-container::after {
	background: linear-gradient(90deg, #5c6fff 6.13%, rgba(92, 111, 255, 0) 70%);
	bottom: 0;
	content: "";
	height: 100%;
	left: 0;
	opacity: 0.8;
	position: absolute;
	right: 0;
	top: 0;
}

@media (max-width: 1024px) {
	.hero-lp {
		padding-bottom: 48px;
		padding-top: 320px;
	}

	.hero-lp-image-container {
    height: 412px;
		min-height: unset;
		width: 100%;
	}

	.hero-lp-image-container::before {
		background-position: top center;
	}
}

.distro-cta {
  background: black;
  color: white;
  padding-top: 100px;
}

.distro-cta--container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-bottom: 100px;
  gap: 48px;
}

.distro-cta--content {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: 142px;
}

.distro-cta--button {
  display: flex;
}

.distro-cta--photo {
  display: flex;
  justify-content: center;
}

.distro-cta--photo img {
  width: 100%;
  object-fit: cover;
}

@media (max-width: 700px) {
  .distro-cta--container {
    grid-template-columns: 1fr;
    gap: 0px;
    padding-bottom: 0px;
  }

  .distro-cta--content {
    padding-top: 24px;
    order: -1;
    gap: 12px;
  }

  .distro-cta--button {
    display: block;
  }
}

.distro-features {
  background: linear-gradient(to bottom, black, #5c6fff);
  color: white;
  padding-bottom: 100px;
  padding-top: 100px;
}

.distro-features--header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.distro-features--header h2 {
  font-weight: 500;
  font-size: 48px;
  line-height: 62px;
}

.distro-features--header p {
  font-weight: 400;
  font-size: 24px;
  line-height: 30px;
}

.distro-features--content {
  background: rgba(255, 255, 255, 0.08);
  padding: 32px 40px;
  margin-top: 48px;
}

.distro-features--content-header {
  display: flex;
  gap: 8px;
  padding-bottom: 48px;
  items-align: center;
}

.distro-features--content-header h3 {
  font-weight: 500;
  font-size: 48px;
  line-height: 62px;
}

.distro-features--content-header u {
  text-decoration-thickness: 4px;
}

.distro-features--list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  font-weight: 500;
  font-size: 24px;
  line-height: 30px;
}

.distro-features--item {
  display: flex;
  gap: 8px;
  align-items: center;
}

@media (max-width: 1024px) {
  .distro-features--header h2 {
    font-size: 28px;
    line-height: 40px;
  }

  .distro-features--header p {
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
  }

  .distro-features--content-header h3 {
    font-size: 24px;
    line-height: 32px;
  }

  .distro-features--content-header u {
    text-decoration-thickness: 2px;
  }

  .distro-features--content-header svg {
    width: 28px;
    height: 28px;
  }

  .distro-features--list {
    grid-template-columns: 1fr;
    gap: 24px;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
  }
}

.career-launch {
	overflow: hidden;
	position: relative;
}

.career-launch::after {
	background: linear-gradient(
		0deg,
		#5c6fff 6.13%,
		rgba(92, 111, 255, 0) 90.12%
	);
	bottom: 0;
	content: "";
	height: 320px;
	left: 0;
	opacity: 0.3;
	position: absolute;
	right: 0;
	top: 0;
	transform: rotate(180deg);
}

.section-title {
	align-items: center;
	display: flex;
	gap: 24px;
}

.career-launch-title {
	padding-bottom: 62px;
	padding-top: 65px;
}

.differences-title {
	padding-bottom: 59px;
	padding-top: 82px;
}

@media (max-width: 460px) {
  .differences-title .logo {
    align-self: flex-start;
    margin-top: 2px;
  }
}

.reverbnation-services-title {
	padding-bottom: 87px;
	padding-top: 84px;
}

.career-launch-title span,
.differences-title span,
.reverbnation-services-title span {
	position: relative;
}

.career-launch-title svg:not(.logo),
.differences-title svg:not(.logo),
.reverbnation-services-title svg:not(.logo) {
	left: 0;
	position: absolute;
	top: 100%;
}

.career-launch-rows-container {
	position: relative;
}

.career-launch-rows-container::after {
	background: linear-gradient(0deg, #fff 0%, rgba(92, 111, 255, 0) 90.12%);
	bottom: 0;
	content: "";
	height: 250px;
	left: 0;
	position: absolute;
	right: 0;
}

.career-launch-row-wrap {
	animation-play-state: running;
	display: flex;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	width: max-content;
}

.career-launch-row-wrap * + * {
	margin-left: 84px;
}

.first-row {
	-webkit-animation-name: first-row;
	animation-name: first-row;
	-webkit-animation-duration: 160s;
	animation-duration: 160s;
}

.second-row {
	-webkit-animation-name: second-row;
	animation-name: second-row;
	-webkit-animation-duration: 140s;
	animation-duration: 140s;
}

.third-row {
	-webkit-animation-name: third-row;
	animation-name: third-row;
	-webkit-animation-duration: 130s;
	animation-duration: 130s;
}

.fourth-row {
	-webkit-animation-name: fourth-row;
	animation-name: fourth-row;
	-webkit-animation-duration: 90s;
	animation-duration: 90s;
}

.fifth-row {
	-webkit-animation-name: fourth-row;
	animation-name: fourth-row;
	-webkit-animation-duration: 80s;
	animation-duration: 80s;
}

@keyframes first-row {
	0% {
		transform: translate(0%, 0);
	}

	50% {
		transform: translate(-50%, 0);
	}

	100% {
		transform: translate(0%, 0);
	}
}

@keyframes second-row {
	0% {
		transform: translate(-5%, 0);
	}

	50% {
		transform: translate(-50%, 0);
	}

	100% {
		transform: translate(-5%, 0);
	}
}

@keyframes third-row {
	0% {
		transform: translate(-5%, 0);
	}

	50% {
		transform: translate(-50%, 0);
	}

	100% {
		transform: translate(-5%, 0);
	}
}

@keyframes fourth-row {
	0% {
		transform: translate(-5%, 0);
	}

	50% {
		transform: translate(-50%, 0);
	}

	100% {
		transform: translate(-5%, 0);
	}
}

@keyframes fifth-row {
	0% {
		transform: translate(0%, 0);
	}

	50% {
		transform: translate(-50%, 0);
	}

	100% {
		transform: translate(0%, 0);
	}
}

svg.logo {
	flex-shrink: 0;
}

@media (max-width: 1024px) {
	.career-launch::after {
		height: 191px;
	}

	.career-launch-title {
		padding-bottom: 35px;
		padding-top: 40px;
	}

	.career-launch-title #underline {
		height: 4px;
		width: 73px;
	}

	.career-launch-title .logo,
	.differences-title .logo,
	.reverbnation-services-title .logo,
	.community-trending .logo {
		height: 24px;
		width: 24px;
	}

	.section-title {
		gap: 8px;
	}

	.career-launch-row-wrap * + * {
		margin-left: 32px;
	}

	.career-launch-rows-container::after {
		background: linear-gradient(0deg, #fff 0%, rgba(92, 111, 255, 0) 100%);
		bottom: 0;
		content: "";
		height: 140px;
		left: 0;
		position: absolute;
		right: 0;
	}
}

.differences-container {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.differences-list {
	list-style-type: none;
	margin: unset;
	max-width: 547px;
	padding: unset;
}

.differences-list p {
	margin-bottom: unset;
	margin-top: 8px;
}

.differences-list li:not(:last-of-type) {
	margin-bottom: 43px;
}

.differences-list h2 {
	align-items: center;
	display: flex;
}

.differences-list svg {
	color: #f035dd;
	margin-left: 16px;
}

@media (max-width: 1024px) {
	.differences-title {
		padding-top: 40px;
		padding-bottom: 35px;
	}

	.differences-title #underline {
		height: 4px;
		width: 58px;
	}

	.differences-container {
		flex-direction: column-reverse;
		gap: 32px;
	}

	.differences-list svg {
		height: 24px;
		margin-left: 10px;
		width: 24px;
	}
}

.featured-tiles {
	margin-top: 136px;
	position: relative;
}

.featured-tiles::before {
	background: linear-gradient(
		0deg,
		#21c9d1 6.13%,
		rgba(33, 201, 209, 0) 90.12%
	);
	bottom: 0;
	content: "";
	height: 320px;
	opacity: 0.2;
	position: absolute;
	transform: matrix(-1, 0, 0, 1, 0, 0);
	width: 100%;
}

.featured-tiles .page-width {
	overflow: hidden;
	position: relative;
}

.section-title-container {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.featured-tiles.section-title-container {
	margin-bottom: 40px;
}

.featured-tiles-list {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	grid-template-rows: 414px;
	overflow: hidden;
	padding-bottom: 118px;
	padding-top: 40px;
}

.feature-tile {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 24px 45px 24px 24px;
	position: relative;
}

.feature-tile[feature="1"] {
	background-image: url(../../../images/bandlab/sullivan/lp/tile-cover-1.png);
}

.feature-tile[feature="2"] {
	background-image: url(../../../images/bandlab/sullivan/lp/tile-cover-2.png);
}

.feature-tile[feature="3"] {
	background-image: url(../../../images/bandlab/sullivan/lp/tile-cover-3.png);
}

.feature-tile[feature="4"] {
	background-image: url(../../../images/bandlab/sullivan/lp/tile-cover-4.png);
}

.feature-tile[feature="5"] {
	background-image: url(../../../images/bandlab/sullivan/lp/tile-cover-5-publishing.png);
}

.feature-tile-container {
	height: 100%;
	position: relative;
}

.feature-tile-icon {
	position: absolute;
	right: 8px;
	top: 8px;
	transform: rotate(-45deg);
}

.feature-tile-title {
	bottom: 0;
	left: 0;
	position: absolute;
}

@media (max-width: 1024px) {
	.featured-tiles {
		margin-top: 56px;
	}

	.featured-tiles-list-container {
		display: contents;
	}

	.featured-tiles-list {
		grid-template-columns: repeat(4, minmax(220px, 1fr));
		grid-template-rows: 300px;
		overflow-x: scroll;
		padding: 16px 16px 48px;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.featured-tiles-list::-webkit-scrollbar {
		display: none;
	}

	.feature-tile {
		padding: 16px 37px 20px 16px;
	}

	.feature-tile-icon {
		height: 24px;
		width: 24px;
	}
}

.reverbnation-services {
	background-color: #000;
	color: #fff;
	overflow: hidden;
	position: relative;
}

.reverbnation-services .page-width {
	position: relative;
	z-index: 1;
}

.reverbnation-services::after {
	background-image: radial-gradient(
		89.09% 101.65% at 97.22% 2.61%,
		rgba(33, 200, 209, 0.9) 0%,
		rgba(33, 200, 209, 0) 100%
	); /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
	bottom: 0;
	content: "";
	left: 0;
	opacity: 0.46;
	position: absolute;
	top: 0;
	transform: matrix(-1, 0, 0, 1, 0, 0);
	width: 100%;
}

.reverbnation-services::before {
	background-image: url(../../../images/bandlab/sullivan/lp/band-banner.png);
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: contain;
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.reverbnation-services-shoutout {
	align-items: center;
	display: flex;
	gap: 48px;
	justify-content: center;
	padding-bottom: 154px;
	padding-top: 366px;
	position: relative;
	z-index: 1;
}

.reverbnation-services-shoutout img {
	position: relative;
}

.reverbnation-services-shoutout-details {
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative;
}

.reverbnation-services-shoutout-details p {
	margin: unset;
	max-width: 896px;
	opacity: 0.8;
}

.reverbnation-services-list-container {
	column-count: 3;
	column-gap: 144px; /* Adjust as needed */
	position: relative;
}

.reverbnation-services-list {
	list-style-type: none;
	margin: unset;
	padding: 0;
}

.reverbnation-services-list li a {
	align-items: center;
	display: flex;
}

.reverbnation-services-cta {
	align-items: center;
	display: flex;
	justify-content: flex-start;
	margin-top: 38px;
	position: relative;
}

.reverbnation-services-cta > * {
	margin: 24px;
}

.reverbnation-services-buttons-container {
	display: flex;
	gap: 24px;
}

.reverbnation-services-button-primary {
	background-color: #00c6d1;
}

@media (min-width: 1024px) {
	.reverbnation-services-list li a {
		gap: 16px;
		margin-bottom: 41px;
	}

	.reverbnation-services .logo {
		align-self: flex-start;
		margin-top: 8px;
	}
}

@media (max-width: 1280px) {
	.reverbnation-services-cta {
		flex-direction: column-reverse;
		margin: unset;
	}

	.reverbnation-services-cta span {
		margin: 32px 0;
		/* text-align: center; */
	}

	.reverbnation-services-shoutout {
		padding-bottom: 144px;
		padding-top: 246px;
	}
}

@media (max-width: 1024px) {
	.reverbnation-services::before {
		bottom: 298px;
	}

	.reverbnation-services::after {
		height: 391px;
		width: 451px;
	}

	.reverbnation-services-title:not(:last-child) #underline {
		width: 49px;
	}

	.reverbnation-services-title #underline {
		height: 4px;
		width: 49px;
	}

	.reverbnation-services-title {
		padding-bottom: 43px;
	}

	.reverbnation-services-title:first-of-type {
		padding-top: 40px;
	}

	.reverbnation-services-title:last-of-type {
		padding-bottom: unset;
	}

	.reverbnation-services-title:not(:first-of-type) {
		padding-top: 55px;
	}

	.reverbnation-services-list li a {
		gap: 24px;
	}

	.reverbnation-services-list li:not(:last-of-type) a {
		margin-bottom: 27px;
	}

	.reverbnation-services-shoutout {
		align-items: flex-start;
		gap: 20px;
		padding: 130px 16px 65px;
	}

	.reverbnation-services-shoutout img {
		flex-shrink: 0;
		height: 54px;
		width: 54px;
	}

	.reverbnation-services-cta {
		flex-direction: column;
		margin: unset;
	}
}

.community-trending {
	position: relative;
}

.community-trending::after {
	background: linear-gradient(0deg, #f5c803 6.13%, rgba(245, 200, 3, 0) 90.12%);
	content: "";
	height: 320px;
	left: 0;
	opacity: 0.1;
	position: absolute;
	top: 0;
	transform: rotate(180deg);
	width: 100%;
	pointer-events: none;
}

.community-trending-picks-container {
	margin-bottom: 107px;
}

.community-trending-picks-container .section-title-container {
	margin-bottom: 16px;
}

.community-trending-charts-container .section-title-container {
	margin-bottom: 56px;
}

.community-trending-charts-main {
	display: flex;
	justify-content: space-between;
}

.community-trending-charts-list {
	margin-right: 112px;
	max-width: 792px;
	width: 100%;
}

.community-trending-chart-item {
	align-items: center;
	box-shadow: inset 0px -1px 0px #f1f4f6;
	display: flex;
	padding: 16px 16px 16px 38px;
	position: relative;
}

.community-trending-chart-item:hover {
	background: linear-gradient(to right, #fff, #f1f4f6);
}

.community-trending-chart-item .chart-item-card {
	margin-right: 24px;
	position: relative;
}

.community-trending-chart-item .chart-item-card:hover {
	margin-right: 24px;
}

.community-trending-chart-item .chart-item-card-buttons {
	opacity: 0;
	display: flex;
	align-items: center;
	position: absolute;
	top: 0; right:0; bottom: 5px; left: 0;
	z-index: 5;
	background-color: rgba(0, 0, 0, 0.2);
}

.community-trending-chart-item:hover .chart-item-card-buttons {
	opacity: 1;
}

.chart-item-card .button--play {
	margin: auto;
}

#item-number {
	left: 0;
	position: absolute;
}

.community-trending-chart-item .chart-item-actions {
	margin-left: auto;
	display: flex;
}

.chart-item-actions .button--play {
	border: 0;
	margin-right: 12px;
}

.chart-item-title {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-width: 0;
}

/* .community-trending-sponsored-list {
	display: flex;
	flex-direction: column;
	row-gap: 16px;
	text-align: left;
} */

.community-trending-sponsored-list .flex-list > .flex-list__item {
	display: block;
}

.sponsored-list-card {
	background-image: url(../../../images/bandlab/sullivan/lp/artist-picture-sample.png);
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	height: 225px;
	width: 300px;
}

.sponsored-list-card-container {
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0 24px 16px;
}

.sullivan .zurbify .crowd-picks-row {
	max-width: none;
}

.sullivan .zurbify .crowd-picks-row > .columns {
	padding: 0;
}

@media only screen and (max-width: 699px) {
	.card__img__blurred-background > img {
		height: 100% !important;
	}
}


@media (max-width: 1024px) {
	.community-trending #underline {
		height: 4px;
		width: 73px;
	}

	.community-trending .section-title-container {
		margin-bottom: 16px;
	}

	.community-trending-charts-list {
		margin: auto;
	}

	.community-trending-chart-item {
		padding-left: 30px;
	}

	.community-trending-chart-item img {
		max-width: none !important;
		height: 60px !important;
		width: 80px !important;
	}

	.community-trending-chart-item a {
		/* display: none; */
	}

	.community-trending-picks-container {
		margin-bottom: 24px;
	}
}