@import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css');

@font-face {
	font-family: 'Alte Haas Grotesk';
	src: url("/fonts/AlteHaasGrotesk.ttf") format("opentype");
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Alte Haas Grotesk';
	src: url("/fonts/AlteHaasGroteskBold.ttf") format("opentype");
	font-weight: 700;
	font-display: swap;
}

* {
	box-sizing: border-box
}

:root {
	--color-1: #fff5e1;
	--color-2: #FF62B3; /* E70031 */
	--color-3: #24272A; /* 24272A */
	--color-4: #410096; /* E8002A */
	--color-5: #410099
}

html,
body {
	width: 100%;
	height: 100%
}

body {
	background: var(--color-1);
	font-size: 2vmin;
	font-family: 'Alte Haas Grotesk';
	font-weight: 700;
	color: var(--color-2);
	letter-spacing: -.075vmin
}

a {
	text-decoration: inherit;
	color: inherit
}

#nav {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2vmin 3vmin;
	position: fixed;
	z-index: 5;
	top: 0;
	left: 0
}

.nav--logo {
	height: 3vmin
}

.nav--ul,
#footer ul {
	width: 100%;
	list-style-type: none;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0
}

.nav--ul {
	justify-content: space-between;
}

.nav--ul > div {
	display: flex;
	align-items: center
}

.nav--ul li,
#footer ul li {
	margin-left: 2vmin
}

#footer ul:nth-child(2) {
	justify-content: flex-end
}

.nav--ul li {
	text-transform: uppercase;
	font-size: 2.2vmin;
	color: var(--color-1)
}

.nav--ul li:first-child,
#footer ul li:first-child {
	margin-left: 0
}

.nav--ul li:hover {
	color: var(--color-2);
}

#footer ul li:hover {
	color: var(--color-1)
}

.nav--ul .current[href="#about"],
.nav--ul .current[href="#program"] {
	color: var(--color-3)
}

.nav--ul .current[href="#location"],
.nav--ul .current[href="#line-up"],
.nav--ul .current[href="#activities"] {
	color: var(--color-2)
}

#nav .buy {
	background: var(--color-1);
	color: var(--color-3)
}

#nav .buy:hover {
	color: var(--color-4)
}

section {
	width: 100%;
	height: 100%;
}

.marquee {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	display: inline-flex;
	flex-direction: column
}

.marquee-child {
	width: 100%;
	white-space: nowrap;
	display: flex;
	align-items: center;
	will-change: transform;
}

.marquee-child > * {
	will-change: transform;
	display: flex
}

#intro {
	background: var(--color-2);
	background-image: url('assets/bg/home.jpg?');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding-top: 0;
	flex-flow: column
}

.intro--logo {
	width: 60vmin;
	display: block;
}

.intro--logo:first-of-type {
	margin-bottom: 2.5vmin
}

#intro--marquee {
	position: absolute;
	bottom: 0;
	text-transform: uppercase;
}

#intro--marquee h1 span {
	font-size: 4vmin;
	color: var(--color-1)
}

/*
#intro--marquee h1 > div:nth-child(1n) {
	color: var(--color-7)
}

#intro--marquee h1 > div:nth-child(2n) {
	color: var(--color-8)
}

#intro--marquee h1 > div:nth-child(3n) {
	color: var(--color-4)
} */



h2.h2-o {
	font-size: 18vmin;
	margin: 0;
	color: var(--color-3);
	line-height: .85;
	margin-bottom: 4vmin;
	letter-spacing: -1vmin
}

.title {
	font-size: 6vmin;
	margin: 0;
	color: var(--color-1);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: -.15vmin
}

.buy {
	background: var(--color-1);
	padding: .375vmin 1vmin;
	color: var(--color-3);
	border-radius: .5vmin;
	text-transform: uppercase
}

.buy:hover {
	color: var(--color-2)
}

.section--intro {
	height: 50vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center
}

#about {
	font-size: 4vmin;
	background: var(--color-3);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

#about--sx {
	height: 100%;
	padding: 8vmin 3vmin 4vmin;
	display: flex;
	justify-content: space-between;
	flex-flow: column
}

#about--sx > * {
	margin: 0
}

#about h2 {
	color: var(--color-2)
}

#about--dx {
	background-image: url('assets/bg/about.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#program {
	height: auto
}

#program--intro {
	background-image: url('assets/bg/program.jpg?v');
}

#dates {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.date {
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	padding: 6vmin 3vmin;
}

.date:nth-child(1) {background: var(--color-2);color:var(--color-1)}
.date:nth-child(2) {background: var(--color-4);color:var(--color-2)}
.date:nth-child(3) {background: var(--color-2);color:var(--color-4)}

.date:nth-child(2) .buy:hover {color:var(--color-4)}

 .date h3 {
/* color: var(--color-2); */
	color: inherit
}

/* .date:nth-child(1) h3 {
	color: var(--color-1)
} */

.date h3 b {
	color: var(--color-1)
}

.date h3 small {
	display: block;
	text-transform: none;
	font-size: 2.5vmin
}

.date--content {
	font-size: 2.75vmin
}

.date--w {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 12vmin
}

.date--w p {
	margin: 0
}

/* .date--description {
	text-transform: uppercase
} */

.date .buy {
	font-size: 3vmin;
	margin-top: 2vmin;
	display: block;
	max-width: fit-content
}

.date-full {
	width: 100%;
	height: 100vh;
	background: var(--color-5);
	display: flex;
}

.date-full:nth-of-type(2) {
	flex-direction: row-reverse;
	text-align: right
}

.date-full h3 {
	color: var(--color-2)
}

.date-full--sx {
	width: 50%;
	padding: 6vmin 3vmin;
	font-size: 6vmin;
	letter-spacing: -.15vmin;
	display: flex;
	justify-content: space-between;
	flex-flow: column
}

.date-full--sx > div {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	line-height: 1;
	gap: 1vmin
}

.date-full--sx > div > *:nth-of-type(2) {
	text-align: right
}

.date-full:nth-of-type(2) > .date-full--sx > div {
	flex-direction: row-reverse;
}

.date-full--sx p {
	margin: 0;
	text-transform: uppercase
}

.date-full--sx p b {
	color: var(--color-2)
}

.date-full--dx {
	width: 50%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.date--after-party {
	background: var(--color-5);
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: flex-end;

}

.date--after-party,
.date--spec {
	font-size: 6vmin;
	letter-spacing: -.15vmin;
	padding: 6vmin 3vmin;
}

.date--spec p,
.date--after-party p {
	margin: 0
}

.date--after-party h3 {
	color: var(--color-2)
}

.date--after-party--sx {
	height: 100%;
	display: flex;
	flex-flow: column;
	justify-content: space-between
}

.date--after-party--sx > div {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.date--after-party--dx p {
	text-transform: uppercase;
	text-align: right;
	margin-top: 6vmin
}

.date--after-party--dx p b {
	color: var(--color-2)
}

.date--specs {
	background: var(--color-2);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: flex-start
}

.date--specs h3 {
	padding: 6vmin 3vmin;
	grid-column: span 2
}

.date--spec {
	background: none
}

.date--specs b {
	color: var(--color-5)
}

.date--spec p {
	line-height: .6
}

#location {
	height: auto
}

#location--intro {
	background-image: url('assets/bg/patrocinio.jpg');
}

/*#location--intro h2 {
	text-transform: none;
	font-size: 12.5vmin;
	letter-spacing: -1vmin
} */

.location {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-flow: column;
	flex-direction: column-reverse;
	justify-content: space-between;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 6vmin 3vmin;
	padding-right: 50%;
	position: relative
}

.location::before {
	content: "";
	display: block;
	z-index: 2;
	background-image: url('assets/opacity.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.location > * {
	z-index: 3
}

.location:nth-child(even) {
	text-align: right;
	padding-right: 3vmin;
	padding-left: 50%;
	align-items: flex-end
}

.location > div {
	display: flex;
	flex-flow: column;
	flex-direction: column-reverse;
}

.location h3 {
	font-size: 12.5vmin;
	letter-spacing: -1vmin;
	margin: 0
}

.location--htgt {
	text-transform: uppercase;
	font-size: 3vmin
}

.location--ll {
	font-size: 5vmin;
	margin: 0
}

.location--description {
	font-size: 4vmin;
	width: 75%
}

#line-up {
	height: auto
}

#lineup--intro {
	background-image: url('assets/bg/line-up.jpg?v');
}


#tickets {
	background-image: url('assets/bg/tickets.jpg?v');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding: 10%;
	gap: 5vmin;
	height: auto
}

.ticket {
	padding: 2vmin;
	background: var(--color-2);
	border-radius: .5vmin;
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	justify-content: space-between;
	font-size: 2.2vmin
}

.ticket.first-row-item {
	grid-column: span 3;
}

.ticket.second-row-item {
	grid-column: span 2;
}

.ticket p {
	margin: 0
}

.ticket .buy {
	background: var(--color-3);
	color: var(--color-1);
	margin-top: .5vmin
}

.ticket .buy:hover {
	color: var(--color-2)
}

.ticket .buy.coming{opacity:.75}

#activities {
	display: grid;
	grid-template-columns: repeat(2, 1fr)
}

#activities--sx {
	background: var(--color-5);
	color: var(--color-2);
	padding: 6vmin 3vmin;
	display: flex;
	justify-content: center;
	flex-flow: column
}

#activities--sx h4 {
	margin: 0;
	text-transform: uppercase;
	cursor: pointer;
	font-size: 12vmin;
	letter-spacing: -1vmin;
	line-height: 1;
}

#activities--sx h4:hover {
	color: var(--color-1)
}

#activities--dx {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#activities--book {
	text-transform: uppercase;
	color: var(--color-1);
	font-size: 3vmin;
}

.swiper-section {
	display: flex;
	flex-flow: column;
	overflow: hidden;
	padding-left: 0;
	padding-right: 0
}

.swiper-section h2 {
	margin-left: 3vmin
}

.swiper-section .swiper {
	width: 100%
}

.swiper-section .swiper:not(#talks-swiper) {
	height: 100%
}

.swiper-section .swiper-slide {
	margin: 0 3vmin;
	overflow: hidden
}

.swiper-section .swiper-slide:first-child {
	margin-left: 3vmin;
}

.swiper-section .swiper-slide:last-child {
	margin-right: 3vmin;
}

.swiper-slide * {
	word-break: break-word;
}

#cover-carousel {
	height: auto;
	background: var(--color-2);
	padding: 3vmin 0
}

.cover-carousel {
	width: 30%;
	padding: 0 3vmin
}

.swiper-slide.cover-carousel {
	margin: 0
}

.cover-carousel img {
	width: 100%;
	display: block
}


#people {
	height: auto;
	padding: 6vmin 3vmin;
	background: var(--color-5);
	line-height: 1
}

.person {
	font-size: 12vmin;
	color: var(--color-2);
	letter-spacing: -1vmin
}

.person::after {
	content: " - "
}

.person:last-child::after {
	content: ""
}

#partners {
	height: auto;
	background: var(--color-2);
	padding: 6vmin 3vmin;
}

#partners img {
	display: block;
/*	width: 100%; */
	height: 6vmin;
	margin: 0 3vmin 
}

#partners .swiper-wrapper {
	align-items: center
}

#partners .swiper-slide {
	width: calc((100% / 8) - 6vmin)
}

#partners img[alt="Void"] {
	height: 5vmin
}

#partners img[alt="K-Way"],
#partners img[alt="CoopCortina"],
#partners img[alt="Mixum"],
#partners img[alt="WineGoverno"],
#partners img[alt="M'Over"] {
	height: 9vmin;
}

#footer {
	background: var(--color-3);
	color: var(--color-2);
	padding: 3vmin;
}

#footer ul {
	margin: 0 0 3vmin;
	width: auto;
}

#footer-inside {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	font-weight: 400;
}

#footer--links {
	display: flex;
	justify-content: space-between;
	align-items: flex-start
}

#email {
	font-size: 7.95vw;
}

#email:hover {
	color: var(--color-1)
}

.legal {
	margin: 0;
}

.legal a {
	text-decoration: underline
}

.legal a:hover {
	color: var(--color-1)
}

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

/*
@media screen and (max-width: 1401px) and (min-width: 768px) {
	.location {
		padding-right: 30%
	}
	.location:nth-child(odd) {
		padding-left: 30%
	}
	
} */
	


@media screen and (max-width: 980px) and (orientation:portrait) {
/*	#nav {
		flex-flow: column
	}
	
	.nav--logo {
		height: 5vmin;
		margin-bottom: 2vmin
	} 
	
	section {
		padding-top: 16vmin
	} */
	
	#dates {
		grid-template-columns: repeat(2, 1fr);
		background: var(--color-2)
	}
	
	/* .date--content[data-id="1"] {margin-top:6vmin} */
	
	.date-full {
		display: block
	}
	
	.date-full--sx,
	.date-full--dx {
		width: 100%;
		height: 50%
	}
	
	.date--after-party {
		display: block
	}
	
	.location {
		padding-right: 3vmin !important;
		padding-left: 3vmin !important
	}

	#about,
	#activities {
		grid-template-rows: repeat(2, 1fr);
		grid-template-columns: auto
	}
	
	#tickets {
		padding: 8%
	}
	
	.person {
		font-size: 9vmin
	}
	
	#email {
		font-size: 7.9vw
	}
	
	#footer-inside {
		display: block
	}
	
	#footer-logo {
		display: flex;
		align-items: center;
		justify-content: flex-end
	}
}

@media screen and (max-width: 767px) {
	.nav--logo {
		height: 6vmin
	}
	
	#nav {
		display: block;
	}
	
	.nav--ul {
		overflow-x: scroll;
		white-space: nowrap;
		padding: 1vmin 0
	}
	
	.nav--ul > div:first-child {
		margin-right: 2vmin
	}
	
	.nav--ul li {
		font-size: 4vmin
	}
	
	#intro--marquee h1 span {
		font-size: 8vmin
	}
	
	.date--specs {
		grid-template-columns: repeat(2, 1fr)
	}
	
	#partners img {
		margin: 0 2vmin 
	}

	#partners .swiper-slide {
		width: calc((100% / 6) - 4vmin)
	}
}