/*
Home CSS
*/

/* Home Hero
========================= */
.hero { display: block; background-color: #000; position: relative; height: 500px; margin: 0 2em; max-height: 100%; z-index: 999; }
.hero-block { display: block; width: 100%; height: 0; }
.hero-block .hero-bg { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; border-radius: 20px; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; width: 100%; height: 100%; overflow: hidden; }

/* CTA
========================= */
.home-cta { display: flex; flex-direction: column; align-items: center; padding: 6.5em 1.2em 5.5em; width: 100%; }
.home-cta-inner { display: flex; flex-direction: column; max-width: 1480px; width: 100%; }
.cta-tagline { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto; }
.cta-tagline:nth-of-type(2) { padding: 1.5em 0 0;}
.cta-tagline span { color: #fff; font-family: 'Outfit'; font-size: calc(42px + (42 - 18)*((100vw - 420px) /(1920 - 420))); font-weight: 800; letter-spacing: .03em; line-height: 1.2; }

.cta-tagline:first-of-type span:first-of-type { opacity: 0; padding-right: .15em; }
.cta-tagline:first-of-type span:nth-of-type(2) { opacity: 0; padding-right: .5em; }
.cta-tagline:first-of-type span:nth-of-type(3) { opacity: 0; padding-right: .15em; }
.cta-tagline:first-of-type span:nth-of-type(4) { opacity: 0;  }

.cta-tagline:last-of-type span:first-of-type { opacity: 0; padding-right: .35em; }
.cta-tagline:last-of-type span:nth-of-type(2) { opacity: 0; padding-right: .35em; }
.cta-tagline:last-of-type span:nth-of-type(3) { opacity: 0; }

.cta-tagline:first-of-type span:first-of-type.animate__animated.animate__zoomIn { animation-delay: .01s; animation-duration: .6s; opacity: 1; }
.cta-tagline:first-of-type span:nth-of-type(2).animate__animated.animate__zoomIn { animation-delay: .5s; animation-duration: .6s; opacity: 1; }
.cta-tagline:first-of-type span:nth-of-type(3).animate__animated.animate__zoomIn { animation-delay: 1.2s; animation-duration: .6s; opacity: 1; }
.cta-tagline:first-of-type span:nth-of-type(4).animate__animated.animate__zoomIn { animation-delay: 1.6s; animation-duration: .5s; opacity: 1; }

.cta-tagline:nth-of-type(2) span:first-of-type.animate__animated.animate__fadeIn { animation-delay: 2.3s; animation-duration: 1s; }
.cta-tagline:nth-of-type(2) span:nth-of-type(2).animate__animated.animate__fadeIn { animation-delay: 2.8s; animation-duration: 1s; }
.cta-tagline:nth-of-type(2) span:nth-of-type(3).animate__animated.animate__fadeIn { animation-delay: 3.3s; animation-duration: 1s; }

/* Tout
========================= */
.featured-grid { display: flex; flex-direction: column; align-items: center; padding: 2em; }
.featured-grid-inner { display: flex; flex-direction: column; max-width: 1920px; width: 100%; }
.grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0.5rem; min-height: 800px; }
.grid .tout:nth-of-type(1) { background-position: var(--tout-pos-x, 50%) var(--tout-pos-y, 50%); background-repeat: no-repeat; display: grid; grid-auto-rows: max-content; margin: 0; padding: 0.8em 0.5em; position: relative; border-radius: 20px; min-height: 800px; grid-row: 1 / span 2; grid-column: 1; }
.grid .tout:nth-of-type(2) { background-position: 50% 50%; background-repeat: no-repeat; position: relative; border-radius: 20px; }
.grid .tout:nth-of-type(3) { background-position: var(--tout-pos-x, 50%) var(--tout-pos-y, 50%); border-radius: 20px; position: relative; overflow: hidden; min-height: 0; background-size: cover; background-repeat: no-repeat; }
.grid .tout:nth-of-type(4) { background-position: var(--tout-pos-x, 50%) var(--tout-pos-y, 50%); border-radius: 20px; position: relative; overflow: hidden; min-height: 0; background-size: cover; background-repeat: no-repeat; }
.grid .tout:nth-of-type(5) { background-position: 50% 50%; background-repeat: no-repeat; position: relative; border-radius: 20px; }
.tout-vid { display: block; border-radius: inherit; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Event
========================= */
.event-overview { display: flex; flex-direction: column; align-items: center; padding: 2em 2em 1em; }
.event-overview-inner { display: flex; flex-direction: column; max-width: 1480px; width: 100%; }

.event-details { display: flex; flex-direction: column; margin: 0 auto; padding: 2em 0 1em; width: 100%; }
.event-logo { display: flex; justify-content: center; }
.event-logo img { width: 400px; }
.event-title { display: flex; flex-direction: column; align-items: center; margin: 0 auto; padding: 2.5em 0; }

.event-title span { color: #fff; font-family: 'Outfit'; font-size: calc(26px + (26 - 18) * ((100vw - 420px) / (1480 - 420))); font-weight: 400; letter-spacing: .03em; line-height: 1.2; text-align: center; }
.event-title span:last-of-type { color: #cbb773; font-weight: 800; padding: .5em 0 0; }
.event-info { display: flex; flex-direction: column; align-items: center; margin: 0 auto; padding: .5em 0; }
.event-info .time { color: #fff; font-family: 'Outfit'; font-size: 2.6rem; font-weight: 500; line-height: 1.2; }
.event-location { display: flex; flex-direction: column; align-items: center; padding: .5em 0; }
.event-location span { color: #fff; font-family: 'Outfit'; font-size: 2.6rem; font-weight: 500; line-height: 1.4; text-align: center; }
.event-hosts { display: flex; flex-direction: column; align-items: center; margin: 0 auto; padding: .8em 0 0; }
.event-hosts span { color: #fff; font-family: 'Outfit'; font-size: 2.6rem; font-weight: 500; letter-spacing: .05em; line-height: 1.6; text-align: center; }

/* Artist Lineup
========================= */
.artist-lineup { width: 100%; padding: 1.5em 2em 3em; }
.artist-lineup-title { display: flex; justify-content: center; padding: 0 0 3em; }
.artist-lineup-title span { color: #cbb773; font-family: 'Outfit'; font-size: calc(26px + (26 - 18) * ((100vw - 420px) / (1480 - 420))); font-weight: 600; letter-spacing: .08em; line-height: 1.2; text-align: center; text-transform: uppercase; }
.artist-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 1fr; gap: 24px; }

.grid-item { min-width: 0; }
.grid-item-bg { background-position: center; background-repeat: no-repeat; background-size: cover; border: 2px solid #cbb773; border-radius: 10px; width: 100%; min-height: 400px; }
.grid-item-title { color: #fff; font-family: 'Outfit'; font-size: 2rem; font-weight: 500; line-height: 1.25; margin: .8em 0 0; text-align: center; }

/* Get Tickets
========================= */
.tickets { display: flex; flex-direction: column; align-items: center; padding: 2em 2em 6em; }
.tickets-inner { display: flex; flex-direction: column; max-width: 1480px; width: 100%; }
.event-button { margin: 0 auto; padding: 0; }
.event-button a { display: inline-block; border: 1px solid #fff; border-radius: 20px; color: #db6003; cursor: pointer; font-family: 'Outfit'; font-size: 2.2rem; font-weight: 500; padding: 8px 20px; line-height: 1.2; }

/* Form
========================= */
.reserve-form { background-color: #191b1c; display: flex; flex-direction: column; align-items: center; padding: 3em 2em 6em; width: 100%; position: relative; min-height: 600px; }
.reserve-form-inner { display: flex; flex-direction: column; max-width: 1150px; width: 100%; }
.reserve-form-title { display: flex; justify-content: center; }
.reserve-form-title span { color: #ffffff; font-family: 'Outfit'; font-size: 3.2rem; font-weight: 600; letter-spacing: .05em; line-height: 1.6; margin: 0; padding: 0 0 .5em; text-align: center; text-transform: uppercase; }
.reserve-form .nf-field-element p { color: #fff; font-family: 'Outfit'; font-size: 2.6rem; font-weight: 700; line-height: 1.4; letter-spacing: .05em; margin: 1.5em 0 .2em; }
.reserve-form .nf-form-content label { color: #fff; font-weight: 500; letter-spacing: .03em; }
.reserve-form .nf-label-span { color: #fff; }
.reserve-form .nf-form-content input:not([type=button]) { color: #f1f1f1; }
.reserve-form .nf-form-content textarea.ninja-forms-field { height: 250px; resize: none; }
.reserve-form .nf-input-limit { color: #fff; }
.reserve-form .submit-container { margin-top: 15px; text-align: center; }
.reserve-form .nf-form-content input[type=submit] { background: #191b1c; border: 1px solid #fff; border-radius: 10px; color: #db6003; font-family: 'Outfit'; font-size: 1.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; height: 50px; }

/* Responsive
--------------------------------------------- */
@media only screen and (min-width: 1980px) {}

@media only screen and (min-width: 2500px) {}

@media only screen and (max-width: 1480px) {
.hero { height: 450px; }
.home-cta { padding: 6em 1.2em 5em; }
.event-logo img { width: 375px; }
.grid-item-bg { min-height: 380px; }
.tickets { padding: 2em 2em 5em; }
.reserve-form { padding: 3em 2em 5em; }
.reserve-form-title span { font-size: 3rem; }
}

@media only screen and (max-width: 1280px) {
.hero { height: 425px; }
.home-cta { padding: 5.5em 1.2em 4.5em; }
.grid { grid-template-columns: repeat(2, 1fr); min-height: 700px; }
.grid .tout:nth-of-type(1) { min-height: 700px; }
.grid .tout:nth-of-type(2) { grid-row: 2; }
.grid .tout:nth-of-type(3) { min-height: 345px; }
.grid .tout:nth-of-type(4) { min-height: 345px; }
.grid .tout:nth-of-type(5) { grid-row: 1; }
.event-overview { padding: 1.5em 2em; }
.event-logo img { width: 350px; }
.event-info .time { font-size: 2.4rem; }
.event-location span { font-size: 2.4rem; }
.event-hosts span { font-size: 2.4rem; }
.artist-lineup { padding: 1em 2em; }
.artist-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.grid-item-bg { min-height: 360px; }
.tickets { padding: 1em 2em 4em; }
.event-button a { font-size: 2.1rem; }
.reserve-form { padding: 3em 2em 4em }
.reserve-form .nf-field-element p { margin: 1.25em 0 .2em; }
.reserve-form-title span { font-size: 2.8rem; }
.reserve-form .nf-response-msg span { font-size: 2.2rem; }
}

@media only screen and (max-width: 1140px) {
.hero { height: 400px; }
.home-cta { padding: 5em 1.2em 4em; }
.grid { min-height: 600px; }
.grid .tout:nth-of-type(1) { min-height: 600px; }
.grid .tout:nth-of-type(3) { min-height: 300px; }
.grid .tout:nth-of-type(4) { min-height: 300px; }
.event-overview { padding: 1.5em 2em .5em; }
.event-logo img { width: 325px; }
.artist-lineup-title { padding: 0 0 2.5em; }
.artist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-item-bg { min-height: 340px; }
.tickets { padding: 3em 2em 4em; }
}

@media only screen and (max-width: 1080px) {
.home-cta { padding: 4.5em 1.2em 3.5em; }
}

@media only screen and (max-width: 1024px) {
.home .site-header { margin: 0 0 .5em; }
.hero { height: 375px; }
.home-cta { padding: 4em 1.2em 3em; }
.featured-grid { padding: 2em 2em 1em; }
.grid { min-height: 500px; }
.grid .tout:nth-of-type(1) { min-height: 500px; }
.grid .tout:nth-of-type(3) { min-height: 250px; }
.grid .tout:nth-of-type(4) { min-height: 250px }
.event-details { padding: 1.5em 0 1em; }
.event-logo img { width: 300px; }
.event-title { padding: 2em 0; }
.artist-lineup-title { padding: 0 0 2.25em; }
.artist-grid { gap: 34px; }
.grid-item-bg { min-height: 320px; }
.event-button a {font-size: 2rem; }
.reserve-form-title span { font-size: 2.6rem; }
.reserve-form .nf-field-element p { font-size: 2.4rem; }
.reserve-form .nf-form-content label { font-size: 17px; }
.reserve-form .nf-response-msg span { font-size: 2rem; }
}

@media only screen and (max-width: 880px) {
.hero { height: 350px; }
.grid { min-height: 450px; }
.grid .tout:nth-of-type(1) { min-height: 450px; }
.grid .tout:nth-of-type(3) { min-height: 200px; }
.grid .tout:nth-of-type(4) { min-height: 200px; }
.event-logo img { width: 275px; }
.grid-item-bg { min-height: 300px; }
.tickets { padding: 3em 2em 3.5em; }
}

@media only screen and (max-width: 820px) {
.grid-item-bg { min-height: 280px; }
}

@media only screen and (max-width: 768px) {
.hero { height: 325px; margin: 0 1.5em; }
.home-cta { padding: 3.5em 1.2em 2.5em; }
.cta-tagline:nth-of-type(2) { padding: 1.25em 0 0; }
.featured-grid { padding: 2em 1.5em .5em; }
.grid { min-height: 400px; }
.grid .tout:nth-of-type(1) { min-height: 400px; }
.grid .tout:nth-of-type(3) { min-height: 200px; display: none; }
.grid .tout:nth-of-type(4) { min-height: 200px; display: none; }
.event-overview { padding: 1em 1.5em .5em; }
.event-details { padding: 1em 0; }
.event-title { padding: 1.5em 0; }
.event-info .time { font-size: 2.2rem; }
.event-location span { font-size: 2.2rem; }
.event-hosts span { font-size: 2.2rem; }
.artist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.artist-lineup { padding: 1em 1.5em; }
.artist-lineup-title { padding: 0 0 2em; }
.grid-item-bg { background-position: 50% 15%; min-height: 260px; }
.tickets { padding: 2.5em 2em 3em; }
.reserve-form { padding: 2em 1.5em 3em; }
.reserve-form-title span { font-size: 2.4rem; }
.reserve-form .nf-field-element p { font-size: 2.2rem; }
.reserve-form .submit-container { margin-top: 10px; }
.reserve-form .nf-form-content input[type=submit] { font-size: 1.7rem; height: 45px; }
.reserve-form .nf-response-msg span { font-size: 1.8rem; }
}

@media only screen and (max-width: 719px) {
.hero { height: 300px; }
.home-cta { padding: 3em 1.2em 2em; }
.grid .tout:nth-of-type(1) { background-position: var(--tout-pos-x-720, 50%) var(--tout-pos-y-720, 50%); }
}

@media only screen and (max-width: 640px) {
.hero { height: 275px; }
.home-cta { padding: 2.5em 1.2em 1.5em; }
.cta-tagline span { font-size: calc(38px + (38 - 18) * ((100vw - 420px) / (1920 - 420))); }
.cta-tagline:nth-of-type(2) { padding: 1em 0 0; }
.featured-grid { padding: 1.5em 1.5em 1em; }
.grid { min-height: 375px; }
.grid .tout:nth-of-type(1) { min-height: 375px; }
.event-overview { padding: .5em 1.5em; }
.event-details { padding: .5em 0; }
.event-logo img { width: 250px; }
.event-title { padding: 1.25em 0; }
.event-title span { font-size: calc(24px + (24 - 18) * ((100vw - 420px) / (1480 - 420))); }
.event-info .time { font-size: 2.1rem; }
.event-location { padding: .25em 0; }
.event-location span { font-size: 2.1rem; }
.event-hosts span { font-size: 2.1rem; }
.artist-lineup-title { padding: 0 0 1.8em; }
.artist-grid { gap: 28px; }
.grid-item-bg { min-height: 240px; }
.grid-item-title { font-size: 1.9rem; }
.tickets { padding: 2em 2em 3em; }
.event-button a { font-size: 1.9rem; }
.reserve-form { padding: 2em 1.5em; }
.reserve-form-title span { font-size: 2.2rem; }
.reserve-form .nf-field-element p { font-size: 2rem; }
.reserve-form .nf-form-content input[type=submit] { font-size: 1.6rem; }
.nf-error-msg, .ninja-forms-req-symbol { font-size: 16px; }
.reserve-form .nf-error .nf-error-msg { font-size: 15px; }
.reserve-form .nf-response-msg { padding: .5em 0; }
.reserve-form .nf-response-msg span { font-size: 1.7rem; }
}

@media only screen and (max-width: 580px) {
.hero { height: 250px; }
.featured-grid { padding: 1.25em 1.5em .8em; }
.grid { min-height: 275px; grid-template-columns: 100%; gap: 2.5rem; }
.grid .tout:nth-of-type(1) { min-height: 250px; }
.grid .tout:nth-of-type(2) { display: none; min-height: 250px; grid-row: 5; }
.grid .tout:nth-of-type(3) { display: none; min-height: 250px; }
.grid .tout:nth-of-type(4) { display: none; min-height: 250px; }
.grid .tout:nth-of-type(5) { min-height: 250px; grid-row: 3; }
.artist-lineup-title { padding: 0 0 1.5em; }
}

@media only screen and (max-width: 520px) {
.hero { height: 225px; }
.home-cta { padding: 2em 1.2em; }
.cta-tagline span { font-size: calc(36px + (36 - 18) * ((100vw - 420px) / (1920 - 420))); }
.home-cta { padding: 2.25em 1.2em 1em; }
.artist-lineup { padding: .8em 1.5em; }
.artist-grid { grid-template-columns: 1fr; gap: 30px; }
.grid-item-bg { background-position: 50% 10%; }
.tickets { padding: 1.8em 2em 2.5em; }
}

@media only screen and (max-width: 480px) {
.hero { height: 200px; margin: 0 1.2em; }
.home-cta { padding: 2em 1.2em 1em; }
.cta-tagline span { font-size: calc(34px + (34 - 18) * ((100vw - 420px) / (1920 - 420))); }
.cta-tagline:nth-of-type(2) { padding: .8em 0 0; }
.featured-grid { padding: 1em 1.2em; }
.grid { min-height: 250px; gap: 2rem; }
.grid .tout:nth-of-type(1) { min-height: 250px; }
.grid .tout:nth-of-type(2) { min-height: 250px; }
.grid .tout:nth-of-type(3) { min-height: 250px; }
.grid .tout:nth-of-type(4) { display: none; min-height: 250px; }
.grid .tout:nth-of-type(5) { min-height: 250px; }
.featured-grid { padding: 1em 1.2em .5em; }
.event-overview { padding: .8em 1.5em .5em; }
.event-logo img { width: 225px; }
.event-info .time { font-size: 2rem; }
.event-location span { font-size: 2rem; }
.event-hosts { padding: .5em 0 0; }
.event-hosts span { font-size: 2rem; }
.artist-lineup { padding: .5em 1.2em; }
.artist-lineup-title { padding: 0 0 1.25em; }
.artist-grid { gap: 24px; }
.grid-item-bg { min-height: 220px; }
.tickets { padding: 1.5em 2em 2em; }
.event-button a { font-size: 1.8rem; }
.reserve-form { padding: 1.5em 1.2em; }
.reserve-form-title span { font-size: 2rem; }
.reserve-form .nf-field-container { margin-bottom: 20px; }
.reserve-form .nf-field-element p { margin: 1em 0 .2em; font-size: 1.9rem; }
.reserve-form .nf-form-content label { font-size: 16px; }
.reserve-form .nf-form-content input[type=submit] { font-size: 1.5rem; }
.reserve-form .nf-response-msg span { font-size: 1.6rem; }
}

@media only screen and (max-width: 420px) {
.cta-tagline span { font-size: calc(32px + (32 - 18) * ((100vw - 420px) / (1920 - 420))); }
.event-logo img { width: 200px; }
.event-title { padding: 1em 0; }
.event-info .time { font-size: 1.9rem; }
.event-location span { font-size: 1.9rem; }
.event-button { padding: .5em 0 0; }
.event-button a { font-size: 1.7rem; }
}