芝麻web文件管理V1.00
编辑当前文件:/home/qrafawbu/thefirstcookout.com/assets/style.v5.css
*, :after, :before { -webkit-box-sizing: inherit; box-sizing: inherit; outline: 0; } html { -webkit-box-sizing: border-box; box-sizing: border-box; } @font-face { font-family: Carena; src: url("https://media-prd.coachella.com/templates/template10/fonts/Carena-Regular.woff") format("woff"); font-style: normal; font-weight: 400; } @font-face { font-family: Bolton; src: url("https://aegwebprod.blob.core.windows.net/templates/template10/fonts/Bolton.woff2") format("woff2"); font-style: normal; font-weight: 400; } @font-face { font-family: Dream Orphan; src: url("https://aegwebprod.blob.core.windows.net/templates/template10/fonts/Dream%20Orphans.woff2") format("woff2"); font-style: normal; font-weight: 400; } @font-face { font-family: Dream Orphan; src: url("https://aegwebprod.blob.core.windows.net/templates/template10/fonts/Dream%20Orphans%20Bd.woff2") format("woff2"); font-style: bold; font-weight: 700; } img { max-width: 100%; vertical-align: middle; } figure { margin: 0 0 20px; } figcaption { font-size: em(12px); font-style: italic; } svg { fill: currentColor; } html { height: 100%; background-color: #ffffff; color: #121515; font-family: transducer-variable, sans-serif; font-size: 16px; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; min-width: 360px; } .ada-statement, body.overflow { overflow: hidden; } .ada-statement { position: absolute !important; clip: rect(1px 1px 1px 1px); left: -10000px; top: -1px; width: 1px; height: 1px; } a.anchor { display: block; position: relative; top: -50px; visibility: hidden; } .sticky-image { position: sticky; top: 30px; width: 100%; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-scrolling iframe { pointer-events: none; } h1, h2, h3, h4, h5, h6 { -webkit-font-variant-ligatures: none; font-variant-ligatures: none; margin: 0; } h1 { font-family: Bolton, sans-serif; font-size: clamp(48px, 6vw, 120px); font-weight: 400; line-height: 1.2; } h2 { font-family: Dream Orphan, sans-serif; font-size: clamp(36px, 3vw, 56px); font-weight: 700; line-height: 1; } h3 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1; } h3, h4 { font-family: Dream Orphan, sans-serif; font-weight: 400; } h4 { line-height: 1.1; font-size: clamp(1.25rem, 3vw, 1.5rem); } h4, h5, h6 { line-height: 1; } h5, h6 { font-family: Dream Orphan, sans-serif; font-size: clamp(1rem, 3vw, 1.25rem); font-weight: 400; } p { margin: 0 0 20px; font-family: transducer-variable, sans-serif; line-height: 1.375; font-size: clamp(16px, 3vw, 24px); } div { font-size: clamp(1rem, 3vw, 1.25rem); } a { color: #121515; font-weight: 700; } hr { width: 79px; height: 4px; border-radius: 2.5px; border-width: 0 0 1px; margin: 56px 0; } button { background: none; border: none; font-size: 1rem; font-weight: 700; color: #121515; -webkit-transition: timer("normal"); transition: timer("normal"); } caption { font-size: 0.875rem; font-weight: 400; } sup { margin-left: 3px; color: #121515; font-size: em(1px, 2px); top: em(-8px, 10px); } ul { padding-left: 0; } br { height: 20px; } ol { font-family: transducer-variable, sans-serif; font-weight: 300; } ol li { padding-left: 20px; } b { font-weight: 700; } i { font-style: italic; } small { font-size: 0.875rem; font-weight: 400; } form { width: 100%; } form, label { display: -webkit-box; display: -ms-flexbox; display: flex; } label { margin-bottom: 24px; position: relative; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .o-grid { margin-right: -2%; margin-left: -2%; } @media (min-width: 1024px) { .o-grid { margin-right: -3%; margin-left: -3%; } } .o-grid__column { position: relative; padding-right: 2%; padding-left: 2%; width: 100%; min-height: 1px; float: left; } @media (min-width: 1024px) { .o-grid__column { padding-right: 3%; padding-left: 3%; } } .o-grid__column--1 { width: 8.33333333%; } .o-grid__column--2 { width: 16.66666667%; } .o-grid__column--3 { width: 25%; } .o-grid__column--4 { width: 33.33333333%; } .o-grid__column--5 { width: 41.66666667%; } .o-grid__column--6 { width: 50%; } .o-grid__column--7 { width: 58.33333333%; } .o-grid__column--8 { width: 66.66666667%; } .o-grid__column--9 { width: 75%; } .o-grid__column--10 { width: 83.33333333%; } .o-grid__column--11 { width: 91.66666667%; } .o-grid__column--12 { width: 100%; } @media (min-width: 768px) { .o-grid__column--1\@sm { width: 8.33333333%; } .o-grid__column--2\@sm { width: 16.66666667%; } .o-grid__column--3\@sm { width: 25%; } .o-grid__column--4\@sm { width: 33.33333333%; } .o-grid__column--5\@sm { width: 41.66666667%; } .o-grid__column--6\@sm { width: 50%; } .o-grid__column--7\@sm { width: 58.33333333%; } .o-grid__column--8\@sm { width: 66.66666667%; } .o-grid__column--9\@sm { width: 75%; } .o-grid__column--10\@sm { width: 83.33333333%; } .o-grid__column--11\@sm { width: 91.66666667%; } .o-grid__column--12\@sm { width: 100%; } } @media (min-width: 1024px) { .o-grid__column--1\@md { width: 8.33333333%; } .o-grid__column--2\@md { width: 16.66666667%; } .o-grid__column--3\@md { width: 25%; } .o-grid__column--4\@md { width: 33.33333333%; } .o-grid__column--5\@md { width: 41.66666667%; } .o-grid__column--6\@md { width: 50%; } .o-grid__column--7\@md { width: 58.33333333%; } .o-grid__column--8\@md { width: 66.66666667%; } .o-grid__column--9\@md { width: 75%; } .o-grid__column--10\@md { width: 83.33333333%; } .o-grid__column--11\@md { width: 91.66666667%; } .o-grid__column--12\@md { width: 100%; } } @media (min-width: 1250px) { .o-grid__column--1\@lg { width: 8.33333333%; } .o-grid__column--2\@lg { width: 16.66666667%; } .o-grid__column--3\@lg { width: 25%; } .o-grid__column--4\@lg { width: 33.33333333%; } .o-grid__column--5\@lg { width: 41.66666667%; } .o-grid__column--6\@lg { width: 50%; } .o-grid__column--7\@lg { width: 58.33333333%; } .o-grid__column--8\@lg { width: 66.66666667%; } .o-grid__column--9\@lg { width: 75%; } .o-grid__column--10\@lg { width: 83.33333333%; } .o-grid__column--11\@lg { width: 91.66666667%; } .o-grid__column--12\@lg { width: 100%; } } .o-grid__column--offset-1 { margin-left: 8.33333333%; } .o-grid__column--offset-2 { margin-left: 16.66666667%; } .o-grid__column--offset-3 { margin-left: 25%; } .o-grid__column--offset-4 { margin-left: 33.33333333%; } .o-grid__column--offset-5 { margin-left: 41.66666667%; } .o-grid__column--offset-6 { margin-left: 50%; } .o-grid__column--offset-7 { margin-left: 58.33333333%; } .o-grid__column--offset-8 { margin-left: 66.66666667%; } .o-grid__column--offset-9 { margin-left: 75%; } .o-grid__column--offset-10 { margin-left: 83.33333333%; } .o-grid__column--offset-11 { margin-left: 91.66666667%; } .o-grid__column--offset-12 { margin-left: 100%; } .o-grid__row--offset-1 { padding-top: 8.33333333%; } .o-grid__row--offset-2 { padding-top: 16.66666667%; } .o-grid__row--offset-3 { padding-top: 25%; } .o-grid__row--offset-4 { padding-top: 33.33333333%; } .o-grid__row--offset-5 { padding-top: 41.66666667%; } .o-grid__row--offset-6 { padding-top: 50%; } .o-grid__row--offset-7 { padding-top: 58.33333333%; } .o-grid__row--offset-8 { padding-top: 66.66666667%; } .o-grid__row--offset-9 { padding-top: 75%; } .o-grid__row--offset-10 { padding-top: 83.33333333%; } .o-grid__row--offset-11 { padding-top: 91.66666667%; } .o-grid__row--offset-12 { padding-top: 100%; } @media (min-width: 768px) { .o-grid__column--offset-1\@sm { margin-left: 8.33333333%; } .o-grid__column--offset-2\@sm { margin-left: 16.66666667%; } .o-grid__column--offset-3\@sm { margin-left: 25%; } .o-grid__column--offset-4\@sm { margin-left: 33.33333333%; } .o-grid__column--offset-5\@sm { margin-left: 41.66666667%; } .o-grid__column--offset-6\@sm { margin-left: 50%; } .o-grid__column--offset-7\@sm { margin-left: 58.33333333%; } .o-grid__column--offset-8\@sm { margin-left: 66.66666667%; } .o-grid__column--offset-9\@sm { margin-left: 75%; } .o-grid__column--offset-10\@sm { margin-left: 83.33333333%; } .o-grid__column--offset-11\@sm { margin-left: 91.66666667%; } .o-grid__column--offset-12\@sm { margin-left: 100%; } } @media (min-width: 768px) { .o-grid__row--offset-1\@sm { padding-top: 8.33333333%; } .o-grid__row--offset-2\@sm { padding-top: 16.66666667%; } .o-grid__row--offset-3\@sm { padding-top: 25%; } .o-grid__row--offset-4\@sm { padding-top: 33.33333333%; } .o-grid__row--offset-5\@sm { padding-top: 41.66666667%; } .o-grid__row--offset-6\@sm { padding-top: 50%; } .o-grid__row--offset-7\@sm { padding-top: 58.33333333%; } .o-grid__row--offset-8\@sm { padding-top: 66.66666667%; } .o-grid__row--offset-9\@sm { padding-top: 75%; } .o-grid__row--offset-10\@sm { padding-top: 83.33333333%; } .o-grid__row--offset-11\@sm { padding-top: 91.66666667%; } .o-grid__row--offset-12\@sm { padding-top: 100%; } } @media (min-width: 1024px) { .o-grid__column--offset-1\@md { margin-left: 8.33333333%; } .o-grid__column--offset-2\@md { margin-left: 16.66666667%; } .o-grid__column--offset-3\@md { margin-left: 25%; } .o-grid__column--offset-4\@md { margin-left: 33.33333333%; } .o-grid__column--offset-5\@md { margin-left: 41.66666667%; } .o-grid__column--offset-6\@md { margin-left: 50%; } .o-grid__column--offset-7\@md { margin-left: 58.33333333%; } .o-grid__column--offset-8\@md { margin-left: 66.66666667%; } .o-grid__column--offset-9\@md { margin-left: 75%; } .o-grid__column--offset-10\@md { margin-left: 83.33333333%; } .o-grid__column--offset-11\@md { margin-left: 91.66666667%; } .o-grid__column--offset-12\@md { margin-left: 100%; } } @media (min-width: 1024px) { .o-grid__row--offset-1\@md { padding-top: 8.33333333%; } .o-grid__row--offset-2\@md { padding-top: 16.66666667%; } .o-grid__row--offset-3\@md { padding-top: 25%; } .o-grid__row--offset-4\@md { padding-top: 33.33333333%; } .o-grid__row--offset-5\@md { padding-top: 41.66666667%; } .o-grid__row--offset-6\@md { padding-top: 50%; } .o-grid__row--offset-7\@md { padding-top: 58.33333333%; } .o-grid__row--offset-8\@md { padding-top: 66.66666667%; } .o-grid__row--offset-9\@md { padding-top: 75%; } .o-grid__row--offset-10\@md { padding-top: 83.33333333%; } .o-grid__row--offset-11\@md { padding-top: 91.66666667%; } .o-grid__row--offset-12\@md { padding-top: 100%; } } @media (min-width: 1250px) { .o-grid__column--offset-1\@lg { margin-left: 8.33333333%; } .o-grid__column--offset-2\@lg { margin-left: 16.66666667%; } .o-grid__column--offset-3\@lg { margin-left: 25%; } .o-grid__column--offset-4\@lg { margin-left: 33.33333333%; } .o-grid__column--offset-5\@lg { margin-left: 41.66666667%; } .o-grid__column--offset-6\@lg { margin-left: 50%; } .o-grid__column--offset-7\@lg { margin-left: 58.33333333%; } .o-grid__column--offset-8\@lg { margin-left: 66.66666667%; } .o-grid__column--offset-9\@lg { margin-left: 75%; } .o-grid__column--offset-10\@lg { margin-left: 83.33333333%; } .o-grid__column--offset-11\@lg { margin-left: 91.66666667%; } .o-grid__column--offset-12\@lg { margin-left: 100%; } } @media (min-width: 1250px) { .o-grid__row--offset-1\@lg { padding-top: 8.33333333%; } .o-grid__row--offset-2\@lg { padding-top: 16.66666667%; } .o-grid__row--offset-3\@lg { padding-top: 25%; } .o-grid__row--offset-4\@lg { padding-top: 33.33333333%; } .o-grid__row--offset-5\@lg { padding-top: 41.66666667%; } .o-grid__row--offset-6\@lg { padding-top: 50%; } .o-grid__row--offset-7\@lg { padding-top: 58.33333333%; } .o-grid__row--offset-8\@lg { padding-top: 66.66666667%; } .o-grid__row--offset-9\@lg { padding-top: 75%; } .o-grid__row--offset-10\@lg { padding-top: 83.33333333%; } .o-grid__row--offset-11\@lg { padding-top: 91.66666667%; } .o-grid__row--offset-12\@lg { padding-top: 100%; } } .o-aspect { overflow: hidden; width: 100%; position: relative; } .o-aspect:before { content: ""; display: block; width: 100%; } .o-aspect > * { margin: 0; width: 100%; height: auto; position: absolute; top: 0; left: 0; } .o-aspect > embed, .o-aspect > iframe, .o-aspect > video { height: 100%; } .o-aspect--16x9:before { padding-top: 56.25%; } .yu6jvdPE6xUnV45_qkLW0.youtube span { display: block; width: 100%; padding-top: 100%; } .yu6jvdPE6xUnV45_qkLW0.youtube span > *, .yu6jvdPE6xUnV45_qkLW0.youtube span > iframe { margin: 0; width: 100%; height: auto; position: absolute; top: 0; left: 0; } ._6RsbJE0YKwgzLMS3fDgpj.youtube span, .ratio16x9:before { padding-top: 56.25%; } .c-footer { -webkit-box-align: center; -ms-flex-align: center; align-items: center; aspect-ratio: 1; border: 1px solid #000; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 16px 16px 64px; position: relative; width: 100%; } @media (min-width: 768px) { .c-footer { padding-bottom: 64px; padding-top: 64px; max-height: 508px; } } @media (min-width: 1024px) { .c-footer { aspect-ratio: 1728/508; } } .c-footer__container { margin: 0 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 32px; max-width: 1920px; width: 100%; text-align: center; } @media (min-width: 768px) { .c-footer__container { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 0 auto; text-align: left; } } @media (min-width: 1250px) { .c-footer__container { gap: 50px; padding: 0 6.72%; } } .c-footer__contentContainer { display: grid; gap: 32px; } .c-footer__contentLogos { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 32px; } .c-footer__contentLogos * { margin: auto; } @media (min-width: 768px) { .c-footer__contentLogos { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .c-footer__list { display: grid; grid-template-columns: 1fr; gap: 24px; list-style: none; padding: 0; margin: 0; } @media (min-width: 768px) { .c-footer__list { grid-template-columns: repeat(3, 1fr); height: 116px; } } @media (min-width: 1024px) { .c-footer__list { gap: 32px; } } @media (min-width: 1440px) { .c-footer__list { gap: 32px 117px; } } .c-footer__listItem { font-family: transducer-variable, sans-serif; font-size: 1rem; } .c-footer__listItem a { font-family: inherit; font-size: inherit; text-decoration: none; } @media (min-width: 1250px) { .c-footer__listItem a { white-space: nowrap; } } .c-footer__socials { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .c-footer__socials .c-primaryButton { margin: 0; max-width: 194px; width: 100%; } @media (min-width: 768px) { .c-footer__socials .c-primaryButton { margin-left: auto; } } .c-footer__socialList { -webkit-box-align: center; -ms-flex-align: center; align-items: center; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 15px 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0; } .c-footer__socialList li { display: grid; place-content: center; } @media (min-width: 768px) { .c-footer__socialList { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .c-footer__socialIcon { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .c-footer__socialIcon svg { width: 100%; height: 100%; } .c-footer__socialIcon path { -webkit-transition: all 0.3s; transition: all 0.3s; } .c-footer__button { margin-right: auto; } .c-footer__coachellaLogo { max-width: 177px; width: 100%; } .c-footer__goldenVoiceLogo { max-width: 105px; width: 100%; } .c-footer__copyright { font-family: "pt-serif", sans-serif; font-size: 1rem; font-weight: 400; margin-bottom: 0; } .c-footer__legal { padding-top: 70px; } .c-footer__bottomImg { aspect-ratio: 1; position: absolute; inset: 0; height: 100%; width: 100%; z-index: -1; -o-object-fit: cover; object-fit: cover; -o-object-position: bottom; object-position: bottom; } @media (min-width: 1024px) { .c-footer__bottomImg { aspect-ratio: 1728/508; min-height: auto; max-height: 508px; } } .c-footer__privacy-icon { white-space: nowrap; padding-left: 30px; position: relative; } .c-footer__privacy-icon:before { content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 25px; height: 12px; background-image: url(https://aegwebprod.blob.core.windows.net/content/aegpresents/privacyoptions29x14.png); background-repeat: no-repeat; background-size: contain; background-position: 0; } .c-layout { min-width: 350px; width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; z-index: 1; overflow: hidden; } .c-layout.c-layout--mirage { background: none; position: static; overflow-x: hidden; } .c-layout__home-gradient--mobile { position: absolute; top: 0; right: 0; -webkit-transform: scale(1.2); transform: scale(1.2); z-index: 0; } @media (min-width: 768px) { .c-layout__home-gradient--mobile { display: none; } } .c-layout__home-gradient { position: absolute; top: 0; z-index: 0; } .c-layout__home-gradient--left { display: none; left: 0; } @media (min-width: 768px) { .c-layout__home-gradient--left { display: block; } } .c-layout__home-gradient--right { display: none; right: 0; } @media (min-width: 768px) { .c-layout__home-gradient--right { display: block; } } .c-navigation { position: absolute; left: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; height: 0; width: 100%; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 auto; padding: 35px 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transform: translate(-50%); transform: translate(-50%); z-index: 1; } @media (min-width: 1024px) { .c-navigation { padding: 0; } } .c-navigation__wrapper { height: auto; width: 100%; display: none; left: 0; position: fixed; top: 0; z-index: 20; -webkit-font-variant-ligatures: none; font-variant-ligatures: none; } @media (min-width: 1024px) { .c-navigation__wrapper { display: block; } } .c-navigation__wrapper.is-active { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgba(18, 21, 21, 0.7); height: 100vh; -webkit-animation: animateNavigationFadeIn 0.2s forwards; animation: animateNavigationFadeIn 0.2s forwards; position: fixed; } .c-navigation__wrapper--mirage .c-navigation__innerContainer * { color: inherit; } .c-navigation__wrapper--mirage .c-navigation__navList.text-black .c-navigation__searchLogo--mirage { display: none; } .c-navigation__wrapper--mirage .c-navigation__navList .c-navigation__searchLogo--mirage, .c-navigation__wrapper--mirage .c-navigation__navList.text-black .c-navigation__searchLogo--black { display: block; } .c-navigation__wrapper--mirage .c-navigation__logoBlock.text-black .c-navigation__logo--mirage, .c-navigation__wrapper--mirage .c-navigation__navList .c-navigation__searchLogo--black { display: none; } .c-navigation__wrapper--mirage .c-navigation__logoBlock .c-navigation__logo--mirage, .c-navigation__wrapper--mirage .c-navigation__logoBlock.text-black .c-navigation__logo--black { display: block; } .c-navigation__wrapper--mirage .c-navigation__logoBlock .c-navigation__logo--black { display: none; } .c-navigation__wrapper--mirage .is-active.c-navigation__innerContainer .c-navigation__dates, .c-navigation__wrapper--mirage .is-active.c-navigation__innerContainer .c-navigation__navList.text-black { color: #fff; } .c-navigation__wrapper--mirage .is-active.c-navigation__innerContainer .c-navigation__divider--mirage:before { background-color: #fff; } .c-navigation__wrapper--mirage .is-active.c-navigation__innerContainer .c-navigation__logo--mirage, .c-navigation__wrapper--mirage .is-active.c-navigation__innerContainer .c-navigation__searchLogo--mirage { display: block; } .c-navigation__wrapper--mirage .is-active.c-navigation__innerContainer .c-navigation__logo--black, .c-navigation__wrapper--mirage .is-active.c-navigation__innerContainer .c-navigation__searchLogo--black { display: none; } .c-navigation__container { position: relative; width: 100%; height: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; z-index: 2; } .is-active .c-navigation__container { height: 30%; z-index: 9999; } .c-navigation__logoBlock { color: #000; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px; } @media (min-width: 1024px) { .c-navigation__logoBlock { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 0; } } .c-navigation-divider { display: none; height: 80px; padding: 0 32px; position: relative; } @media (min-width: 1024px) { .c-navigation-divider { display: block; } .c-navigation-divider:before { background-color: #000; content: ""; height: 100%; left: 50%; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 0; width: 1px; } .c-navigation-divider.text-black:before { background-color: #000; } } .c-navigation__navList { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; margin-left: auto; width: auto; } @media (min-width: 1250px) { .c-navigation__navList { gap: 48px; } } .c-navigation__navItem { font-family: transducer-variable, sans-serif; font-size: 1.25rem; font-weight: 700; color: #000; cursor: pointer; padding: 12px; position: relative; text-align: center; text-transform: uppercase; } .c-navigation__navItem:hover .c-navigation__navItem-bg, .is-active .c-navigation__navItem.show-blob .c-navigation__navItem-bg { opacity: 1; visibility: visible; z-index: 0; } .c-navigation__navItem a { font-family: inherit; font-weight: inherit; text-decoration: none; } @media (min-width: 1024px) { .c-navigation__navItem a { color: inherit; font-size: inherit; } } .c-navigation__navItem svg { height: 10px; margin-left: 5px; width: 10px; } @media (min-width: 1024px) { .c-navigation__navItem { font-size: 1rem; font-weight: 500; } } .c-navigation__navItem-bg { height: auto; left: 50%; position: absolute; -o-object-fit: cover; object-fit: cover; opacity: 0; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); visibility: hidden; z-index: -1; } .c-navigation__navItem-bg--lg { height: 75px; } .c-navigation__innerContainer { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #ffffff; border-bottom: 1px solid #000; border-top: 1px solid #000; display: -webkit-box; display: -ms-flexbox; display: flex; height: 80px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; padding: 0 25px; position: relative; } .c-navigation__innerContainer.is-active { background: #ffffff; } @media (min-width: 1024px) { .c-navigation__innerContainer { margin: 0; padding: 11px 40px; } } .c-navigation__dates { color: #000; font-size: clamp(0.75rem, 3vw, 1rem); font-weight: 700; line-height: 1.16666667; text-align: left; } .c-navigation_dropDownContainer { position: relative; -webkit-transform: translateY(-150%); transform: translateY(-150%); width: 100%; } .c-navigation_dropDownContainer.is-active { -webkit-animation: animateDropDownSlideIn 0.4s forwards; animation: animateDropDownSlideIn 0.4s forwards; background-color: #ffffff; } .c-navigation_dropDownContainer.not-active { -webkit-animation: animateDropDownSlideOut 0.5s; animation: animateDropDownSlideOut 0.5s; } .c-navigation_dropDownContainer.not-active .curtains-wrap { display: none; } @media (min-width: 1024px) { .c-navigation_dropDownContainer { padding: 64px 30px; } } .c-navigation__dropDown { width: 100%; margin: 0 auto; } .c-navigation__dropDownChild { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: grid; gap: 50px; grid-template-columns: 1fr 2fr; height: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: auto; max-width: 1440px; min-height: 250px; position: relative; -webkit-transition: opacity 3s; transition: opacity 3s; visibility: hidden; width: 100%; } .is-active .c-navigation__dropDownChild { visibility: visible; } .c-navigation__dropDown__image { display: none; width: 100%; max-width: 444px; height: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; top: 0; left: 0; opacity: 0; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } @media (min-width: 1024px) { .c-navigation__dropDown__image { display: block; } } .c-navigation__dropDown__image.is-active { opacity: 1; } .c-navigation__search { cursor: pointer; margin-left: 50px; position: relative; } .c-navigation__search:before { background-color: #000; content: ""; height: 80px; left: -25px; position: absolute; top: -30px; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 1px; } @media (min-width: 1024px) { .c-navigation__search:before { left: -40px; } } @media (min-width: 1024px) { .c-navigation__search { margin-left: 80px; } } .c-navigation__subList-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .c-navigation__subList { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; } .c-navigation__subList, .c-navigation__subListDesktop { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; } .c-navigation__subListDesktop { display: none; height: 300px; gap: 0 30px; position: relative; opacity: 0; -webkit-transform: translate(0); transform: translate(0); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; width: 100%; } .c-navigation__subListDesktop.is-active { display: -webkit-box; display: -ms-flexbox; display: flex; z-index: 1; opacity: 1; max-width: 500px; -webkit-transform: translate(0); transform: translate(0); -ms-flex-line-pack: end; align-content: flex-end; } @media (min-width: 1024px) { .c-navigation__subListDesktop.is-active { max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; } } .c-navigation__subList-images { position: relative; height: 100%; } .c-navigation__subList-img { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%; height: 100%; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.4s; transition: opacity 0.4s; } .c-navigation__subList-img.is-active { opacity: 1; visibility: visible; } .c-navigation__subList-img .curtains__plane-wrapper { max-width: 100%; height: 100%; max-height: 250px; aspect-ratio: 1; margin: 1rem auto; } .c-navigation__subList-img .curtains__canvas { top: -50%; height: 100vh; } .c-navigation__subList-img:nth-child(2) .curtains__plane-wrapper { aspect-ratio: 507/389; } .c-navigation__subList-img:nth-child(3) .curtains__plane-wrapper { aspect-ratio: 485/385; } .c-navigation__subList-img:nth-child(4) .curtains__plane-wrapper { aspect-ratio: 460/384; } .c-navigation__subList-img:nth-child(5) .curtains__plane-wrapper { aspect-ratio: 507/389; } .c-navigation__subItem { color: #000; width: -webkit-max-content; width: -moz-max-content; width: max-content; } .c-navigation__subItem a { display: inline-block; font-family: inherit; font-size: clamp(1rem, 2vw, 1.25rem); position: relative; text-decoration: none; } .c-navigation__subItem a:before { background: #000; bottom: -3px; content: ""; display: block; height: 1px; left: 0; position: absolute; width: 100%; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; -webkit-transition: -webkit-transform 0.4s ease; transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; } .c-navigation__subItem a:hover:before { -webkit-transform: scaleX(1); transform: scaleX(1); } @media (min-width: 1024px) { .c-navigation__subItem { height: 20%; } } @-webkit-keyframes animateDropDownSlideIn { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 5% { z-index: 9999; } 55% { opacity: 0.8; } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes animateDropDownSlideIn { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 5% { z-index: 9999; } 55% { opacity: 0.8; } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @-webkit-keyframes animateDropDownSlideOut { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 85% { opacity: 0; } to { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes animateDropDownSlideOut { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 85% { opacity: 0; } to { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } .c-navigation__mobile { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #ffffff; border-bottom: 1px solid #000; border-top: 1px solid #000; display: -webkit-box; display: -ms-flexbox; display: flex; height: 55px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 16px; position: fixed; top: 0; width: 100%; z-index: 10; } @media (min-width: 1024px) { .c-navigation__mobile { display: none; } } .c-navigation__wrapperMobile { display: block; overflow-y: scroll; overflow-x: hidden; background-color: #ffffff; z-index: -1; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; position: fixed; -webkit-font-variant-ligatures: none; font-variant-ligatures: none; } .c-navigation__wrapperMobile.is-active { -webkit-transform: translateX(0); transform: translateX(0); } .c-navigation__wrapperMobile.deactivate { -webkit-transform: translateX(100%); transform: translateX(100%); } @media (min-width: 1024px) { .c-navigation__wrapperMobile { display: none; } } .c-navigation__wrapperMobile.fixed { position: fixed; z-index: 30; height: 100%; } .c-navigation__wrapperMobile.fixed:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: bottom; z-index: -1; } .c-navigationMobile { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; visibility: visible; opacity: 1; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; position: absolute; top: 97px; } .c-navigationMobile.hide { opacity: 0; visibility: hidden; height: 0; } .c-navigation__containerMobile { background: #ffffff; position: relative; width: 100%; height: 100vh; z-index: 3; overflow-y: scroll; overflow-x: hidden; } .c-navigation__mobileButton { width: 30px; height: 30px; background-repeat: no-repeat; background-position: 50%; position: relative; z-index: 40; } @media (min-width: 1024px) { .c-navigation__mobileButton { display: none; } } .c-navigation__mobileButtonImage { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 30px; } .c-navigation__mobileButtonImage--close { width: 24px; } .c-navigation__mobileButton--hamburger { color: transparent; opacity: 1; position: relative; visibility: visible; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .c-navigation__mobileButton--hamburger:before { background-color: #000; content: ""; height: 55px; left: -16px; position: absolute; top: -12px; width: 1px; } .c-navigation__mobileButton--hamburger.hide { opacity: 0; visibility: hidden; z-index: -1; } .c-navigation__logoBlockMobile { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: grid; gap: 19px; grid-template-columns: minmax(auto, 133px) 1fr; text-align: center; z-index: 10; } .c-navigation__logoBlockMobile img { width: 183px; } @media (min-width: 1024px) { .c-navigation__logoBlockMobile { display: none; } } .c-navigation__navListMobile { display: grid; gap: 45px; list-style: none; margin: 0; } .c-navigation__navItemMobile { text-align: left; margin-left: 25px; } .c-navigation__backButtonMobile { display: block; width: 24px; z-index: 40; padding: 0; } .c-navigation__backButtonMobile img { width: 100%; height: auto; } .c-navigation__dropDownContainerMobile { height: 100%; } .c-navigation__dropDownContainerMobile, .c-navigation__dropDownMobile { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; } .c-navigation__dropDownChildMobile { max-width: 100%; width: 100%; display: block; position: relative; } .c-navigation__dropDownChildMobile:first-child { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin-bottom: auto; } .c-navigation__dropDownChildMobile:last-child { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .c-navigation__dropDownContainerMobile-header { border-bottom: 1px solid #000; border-top: 1px solid #000; height: 55px; padding: 0 16px; } .c-navigation__dropDownContainerMobile-header, .c-navigation__dropDownContainerMobile-header > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .c-navigation__subListMobile { display: grid; gap: 35px; height: auto; opacity: 0; padding-left: 0; position: absolute; margin-top: 42px; top: 0; -webkit-transition: all 0.75s ease; transition: all 0.75s ease; visibility: hidden; } .c-navigation__subListMobile.is-active { visibility: visible; opacity: 1; position: static; } .c-navigation__subItemMobile { font-size: 1rem; font-weight: 500; margin: 0 24px; text-transform: uppercase; } .c-navigation__subItemMobile a { font-size: inherit; font-weight: inherit; } .c-navigation__mobile-close { padding: 0; position: absolute; right: 15px; } .c-navigation__mobile-close:before { border-left: 1px solid #000; content: ""; height: 55px; position: absolute; top: -13px; left: -18px; } .c-navigation__parentHeader { font-size: 1.25rem; font-weight: 700; margin-left: 24px; margin-top: 5px; text-transform: uppercase; } .c-homehero__poster-wrapper, .c-homehero__wrapper { width: 100%; z-index: 0; -webkit-font-variant-ligatures: none; font-variant-ligatures: none; } .c-homehero__wrapper { position: relative; } .c-homehero__wrapper:before { content: ""; position: absolute; right: -578px; width: 979px; height: 1251px; -webkit-transform: rotate(-0.6deg); transform: rotate(-0.6deg); top: 310.602px; border-radius: 1251px; opacity: 0.4; background: linear-gradient(128deg, #ebff00 22.02%, rgba(245, 138, 37, 0) 71.58%); -webkit-filter: blur(159px); filter: blur(159px); } @media (min-width: 768px) { .c-homehero__wrapper:before { border-radius: 2980px; opacity: 0.4; background: linear-gradient(128deg, #50eaf3 22.02%, rgba(245, 138, 37, 0) 71.58%); -webkit-filter: blur(300px); filter: blur(300px); z-index: -1; width: 1846px; height: 2980px; right: -318px; top: 587px; } } .c-homehero__btnContainer { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 1.5rem; } @media (min-width: 768px) { .c-homehero__btnContainer { gap: 48px; margin-top: 3rem; } } .c-homehero__container, .c-homehero__poster-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0 auto; max-width: 1484px; padding: 103px 1.375rem 20px; position: relative; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } @media (min-width: 768px) { .c-homehero__container, .c-homehero__poster-container { padding: 230px 1.375rem 40px; } } .c-homehero__poster-container { padding-top: 0; padding-bottom: 7.5rem; } @media (min-width: 768px) { .c-homehero__poster-container { padding-bottom: 40px; } } .c-homehero__btnContainer, .c-homehero__headerSubtitle, .c-homehero__headerText, .c-homehero__links-container, .c-homehero__textContent { z-index: 10; position: relative; } .c-homehero__headerText { font-family: Bolton, sans-serif; font-size: clamp(3rem, 10vw, 7.5rem); font-weight: 400; max-width: 1360px; } .c-homehero__headerSubtitle, .c-homehero__headerText { color: #000; line-height: 1.2; text-align: center; pointer-events: none; } .c-homehero__headerSubtitle { width: 80%; font-family: Dream Orphan, sans-serif; font-size: clamp(1rem, 3vw, 3.5rem); font-weight: 700; margin-top: 1.5rem; } @media (min-width: 768px) { .c-homehero__headerSubtitle { width: 60%; margin-top: 3rem; } } .c-homehero__textContent { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 1rem; line-height: 1; } @media (min-width: 375px) { .c-homehero__textContent { margin-bottom: 2rem; } } .c-homehero__squiggles { width: 40px; padding: 1.5rem 0; } .c-homehero__title { text-align: center; max-width: 400px; } @media (min-width: 768px) { .c-homehero__title { max-width: 100%; } } .c-homerhero__title--inner { display: inline-block; text-align: right; width: 100%; } @media (min-width: 768px) { .c-homerhero__title--inner { all: unset; } } .c-homehero__subTitle { text-align: center; } .c-homehero__links-container { margin-top: 1.5rem; } @media (min-width: 1024px) { .c-homehero__links-container { margin-top: 2.5rem; } } .c-homehero__links { list-style: none; display: grid; gap: 33px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } @media (min-width: 768px) { .c-homehero__links { gap: 20px; grid-template-columns: repeat(2, auto); } } .c-homehero__linkItem { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; } .c-homehero__linkItem a { text-decoration: none; } .c-homehero__linkItem a:after { content: ""; background-color: #ff9c03; bottom: -3px; height: 2px; left: 0; position: absolute; width: 100%; } .c-homehero__buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 768px) { .c-homehero__buttons { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .c-homehero__button { margin: 0.375rem; padding: 12.5px 18px; } @media (min-width: 768px) { .c-homehero__button { margin: 1.0625rem; } } .c-homehero__image { -webkit-transform: scale(1.5); transform: scale(1.5); pointer-events: none; } @media (min-width: 768px) { .c-homehero__image { -webkit-transform: scale(1); transform: scale(1); } } .c-homehero__video-container { z-index: 10; display: none; margin-top: 2rem; position: relative; aspect-ratio: 774/434; width: calc(100vw - 2rem); max-width: 774px; } @media (min-width: 768px) { .c-homehero__video-container { display: block; } .c-homehero__video-container.hidden { display: none; } } .c-homehero__video-play-button-wrapper { z-index: 9; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; cursor: pointer; -webkit-transition: opacity 0.1s ease-in; transition: opacity 0.1s ease-in; } .c-homehero__video-play-button-wrapper:before { content: ""; display: block; z-index: -1; position: absolute; top: 6px; left: 4px; aspect-ratio: 1; width: 7.5rem; border: 2px solid #000; border-radius: 9999px; outline: 0; -webkit-box-shadow: 0; box-shadow: 0; background: #000; -webkit-transition: all 0.3s; transition: all 0.3s; } .c-homehero__video-play-button-wrapper:hover:before { -webkit-transform: translate(1px, 2px); transform: translate(1px, 2px); } .c-homehero__video-play-button-wrapper:hover .c-homehero__video-play-button { -webkit-transform: translate(-2px, -3px); transform: translate(-2px, -3px); } .c-homehero__video-play-button { aspect-ratio: 1; width: 7.5rem; padding: 0; border: 2px solid #000; border-radius: 9999px; outline: 0; -webkit-box-shadow: 0; box-shadow: 0; background: #ffffff; -webkit-transition: all 0.3s; transition: all 0.3s; cursor: pointer; } .c-homehero__video-play-button:before { content: ""; margin: 0 auto; -webkit-transform: translateX(5px); transform: translateX(5px); display: block; background-image: url("./icon-video-play-button.png"); background-repeat: none; background-size: contain; aspect-ratio: 45/51; width: 43px; } .c-homehero__video { width: 100%; height: 100%; border-radius: 8px; pointer-events: none; } .c-homehero__poster { z-index: 2; position: relative; aspect-ratio: 1040/1387; margin: 15px 0 0; max-width: 1040px; width: 100%; border-radius: 8px; } #c-homehero__cloud-twirl { z-index: 9; position: absolute; top: 10rem; right: -18rem; background: url("./cloud-twirl-1.png"); width: 90%; aspect-ratio: 1493/1270; background-size: contain; background-repeat: no-repeat; pointer-events: none; } #c-homehero__cloud-wisp { z-index: 1; position: absolute; top: 38rem; left: -7rem; background: url("./cloud-wisp-3.png"); width: 90%; aspect-ratio: 1034/407; background-size: contain; background-repeat: no-repeat; } .c-homehero__blob-left { z-index: 8; position: absolute; top: 4rem; left: calc(-50% - 2rem); width: 100%; } @media (min-width: 768px) { .c-homehero__blob-left { left: calc(-50% - 15rem); } } .c-homehero__blob-left .c-homehero__blob-video, .c-homehero__blob-left .curtains__plane-wrapper { margin-left: auto; width: 878px; max-width: 75%; min-width: 250px; aspect-ratio: 894/810; } .c-homehero__blob-left .c-homehero__blob-video { top: 0; right: 0; -o-object-position: left center; object-position: left center; mask-image: url("./blob-hero-green-outline.png"); -webkit-mask-image: url("./blob-hero-green-outline.png"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .c-homehero__blob-right { z-index: 8; position: absolute; top: -1rem; right: -50%; width: 100%; } @media (min-width: 768px) { .c-homehero__blob-right { top: 10rem; right: calc(-50% - 11rem); } } .c-homehero__blob-right .c-homehero__blob-video, .c-homehero__blob-right .curtains__plane-wrapper { width: 634px; max-width: 60%; min-width: 225px; aspect-ratio: 709/521; } .c-homehero__blob-right .c-homehero__blob-video { top: 0; left: 0; -o-object-position: left center; object-position: left center; mask-image: url("./blob-hero-blue-outline.svg"); -webkit-mask-image: url("./blob-hero-blue-outline.svg"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .c-homehero__blob-video { position: absolute; opacity: 0; -webkit-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-object-fit: cover; object-fit: cover; -webkit-filter: opacity(70%); filter: opacity(70%); -webkit-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in; } .c-homehero__poster-blob-left { position: absolute; bottom: -2rem; left: -6rem; } @media (min-width: 1024px) { .c-homehero__poster-blob-left { bottom: 12rem; left: -12rem; } } .c-homehero__poster-blob-left .curtains__plane-wrapper { width: 280px; aspect-ratio: 556/500; } @media (min-width: 1024px) { .c-homehero__poster-blob-left .curtains__plane-wrapper { max-width: none; width: 587px; } } .c-homehero__poster-blob-right { display: none; position: absolute; top: 24rem; right: -12rem; } @media (min-width: 1024px) { .c-homehero__poster-blob-right { display: block; } } .c-homehero__poster-blob-right .curtains__plane-wrapper { width: 517px; aspect-ratio: 600/897; } .c-headerbanner__wrapper { height: 40px; position: absolute; z-index: 2; visibility: visible !important; left: 0; right: 0; top: calc(100% + 1px); border: 1px solid #000; border-top: none; } .c-headerbanner__wrapper.dismiss { height: 0; visibility: hidden !important; -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transition-property: height; transition-property: height; } .c-headerbanner { width: 100%; height: 100%; z-index: 100; } .c-headerbanner__container { width: 100%; height: 100%; max-width: 1920px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 24px; margin: 0 auto; } .dismiss .c-headerbanner__container { visibility: hidden; } @media (min-width: 375px) { .c-headerbanner__container { padding: 0 52px; } } @media (min-width: 1024px) { .c-headerbanner__container { padding: 0 86px; } } .c-headerbanner__alert { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; text-align: center; } .c-headerbanner__link { text-decoration: none; padding-bottom: 2px; margin: 0 12px 2px; border-bottom: 1px solid #121515; } .c-headerbanner__link:first-of-type { margin-left: auto; } .c-headerbanner__dismiss { aspect-ratio: 1; cursor: pointer; width: 24px; } .c-secondary-hero__blob { display: none; position: absolute; left: -35%; top: -60px; width: 650px; z-index: 0; } @media (min-width: 768px) { .c-secondary-hero__blob { display: block; } } @media (min-width: 950px) { .c-secondary-hero__blob { left: -30%; } } @media (min-width: 1024px) { .c-secondary-hero__blob { left: -25%; } } @media (min-width: 1250px) { .c-secondary-hero__blob { left: -22%; width: 700px; } } @media (min-width: 1440px) { .c-secondary-hero__blob { aspect-ratio: 895/778; left: -19%; width: unset; } } .c-secondary-hero { margin: 120px 1rem 0; position: relative; z-index: 0; max-width: calc(1440px + 13.44%); } .c-secondary-hero .c-secondaryButton--reverse { left: 1rem; position: relative; top: -5%; z-index: 20; } @media (min-width: 768px) { .c-secondary-hero .c-secondaryButton--reverse { top: 0; } } @media (min-width: 768px) { .c-secondary-hero { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 620px; margin: 176px 1rem 96px; } } @media (min-width: 1024px) { .c-secondary-hero { margin: 176px 6.72% 96px; } } .c-secondary-hero__content { display: grid; gap: 24px; padding: 0 1rem; position: relative; z-index: 1; } .c-secondary-hero__content h1 { font-size: clamp(48px, 10vw, 120px); line-height: 1.2; } .c-secondary-hero__content p { font-size: clamp(16px, 2vw, 24px); line-height: 1.4; } @media (min-width: 768px) { .c-secondary-hero__content { padding: 0; } } .c-secondary-hero__img img, .c-secondary-hero__img svg { width: 100%; } @media (min-width: 768px) { .c-secondary-hero__img img, .c-secondary-hero__img svg { position: relative; right: -5%; } } @media (min-width: 1250px) { .c-secondary-hero__img img, .c-secondary-hero__img svg { right: -10%; } } .c-secondary-hero__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; gap: 25px; margin-left: auto; margin-right: auto; max-width: 1920px; position: relative; } @media (min-width: 768px) { .c-secondary-hero__inner { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: grid; height: 100%; gap: 50px; grid-template-columns: 1fr 1fr; } } @media (min-width: 1250px) { .c-secondary-hero__inner { gap: 90px; grid-template-columns: minmax(auto, 750px) minmax(auto, 600px); } } .passes-radient { position: absolute; border-radius: 2980.247px; opacity: 0.4; background: linear-gradient(128deg, #50eaf3 22.02%, rgba(245, 138, 37, 0) 71.58%); -webkit-filter: blur(300px); filter: blur(300px); pointer-events: none; right: -1581px; top: 19px; width: 1846px; height: 2980px; -webkit-transform: rotate(-0.6deg); transform: rotate(-0.6deg); z-index: -1; } @media (min-width: 768px) { .passes-radient { right: -318px; top: 59px; } } .festival-info-radient { position: absolute; border-radius: 2980.247px; opacity: 0.4; background: linear-gradient(128deg, #f3c650 22.02%, rgba(245, 138, 37, 0) 71.58%); -webkit-filter: blur(300px); filter: blur(300px); pointer-events: none; right: -1581px; top: 19px; width: 1846px; height: 2980px; -webkit-transform: rotate(-0.6deg); transform: rotate(-0.6deg); z-index: -1; } @media (min-width: 768px) { .festival-info-radient { right: -318px; top: 59px; } } .support-radient { position: absolute; border-radius: 2980.247px; opacity: 0.4; background: linear-gradient(128deg, #0092ff 22.02%, rgba(245, 138, 37, 0) 71.58%); -webkit-filter: blur(300px); filter: blur(300px); pointer-events: none; right: -1581px; top: 19px; width: 1846px; height: 2980px; -webkit-transform: rotate(-0.6deg); transform: rotate(-0.6deg); z-index: -1; } @media (min-width: 768px) { .support-radient { right: -318px; top: 59px; } } .activities-radient { position: absolute; border-radius: 2980.247px; opacity: 0.4; background: linear-gradient(128deg, #0092ff 22.02%, rgba(245, 138, 37, 0) 71.58%); -webkit-filter: blur(300px); filter: blur(300px); pointer-events: none; right: -1581px; top: 19px; width: 1846px; height: 2980px; -webkit-transform: rotate(-0.6deg); transform: rotate(-0.6deg); z-index: -1; } @media (min-width: 768px) { .activities-radient { right: -318px; top: 59px; } } .c-secondary-hero__cloud { display: none; position: absolute; pointer-events: none; } @media (min-width: 768px) { .c-secondary-hero__cloud { display: block; } } .passes-twist-cloud-2 { right: 0; bottom: -70%; z-index: -1; pointer-events: none; } .passes-cloud-wisp-3-bottom { left: -20%; top: 80%; z-index: 0; pointer-events: none; } .passes-cloud-wisp-3-top { right: 0; top: 0; z-index: -1; pointer-events: none; } .c-l2-header__btnGroup { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; } .c-l2-header__button { border: 1px solid #fff; color: #fff; border-radius: 24px 4px; position: relative; font-family: "pt-serif", sans-serif; line-height: 1.4; font-size: 1rem; font-weight: 700; padding: 13px 30px; margin: 10px; text-decoration: none; white-space: nowrap; } .c-l2-header__container { color: #fff; margin: 32% 0 0; width: 100%; position: relative; z-index: 5; padding: 0 25px; } @media (min-width: 768px) { .c-l2-header__container { margin: 0; position: absolute; top: 27%; padding: 0 6.72%; } } @media (min-width: 2220px) { .c-l2-header__container { padding: 0 calc(50vw - 960px); } } .c-l2-header__bottomContainer { color: inherit; opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; -webkit-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-delay: 1s; transition-delay: 1s; } .animate .c-l2-header__bottomContainer { opacity: 1 !important; -webkit-transform: translateY(0); transform: translateY(0); } .c-l2-header__wrapper { position: relative; height: 100vh; width: 100%; margin: 0 auto; overflow: hidden; -webkit-transition: height 0.8s; transition: height 0.8s; z-index: 1; } .c-l2-header__wrapper.animate { height: 566px; } @media (min-width: 768px) { .c-l2-header__wrapper.animate { height: 600px; } } .c-l2-header__contentLeft { position: relative; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 1.25rem; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; padding-left: 0; } @media (min-width: 768px) { .c-l2-header__contentLeft { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } .c-l2-header__contentRight { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 0; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } @media (min-width: 768px) { .c-l2-header__contentRight { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } .c-l2-header__contentRight .c-l2-header__image:nth-child(2) { position: absolute; } .c-l2-header__textContent { width: 100%; max-width: 600px; padding-top: 2.1875rem; } .c-l2-header__textContent a { color: #fff; } .c-l2-header__textHeader { opacity: 0; color: inherit; font-size: 3rem; margin: 0; -webkit-transform: translateY(30px); transform: translateY(30px); -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; -webkit-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-delay: 0.8s; transition-delay: 0.8s; } .animate .c-l2-header__textHeader { opacity: 1 !important; -webkit-transform: translateY(0); transform: translateY(0); } @media (min-width: 768px) { .c-l2-header__textHeader { font-size: 4rem; } } .c-l2-header__image { position: absolute; inset: 0; -o-object-fit: cover; object-fit: cover; -o-object-position: bottom; object-position: bottom; opacity: 0; width: 100%; height: 100%; -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; -webkit-transition-duration: 1.2s; transition-duration: 1.2s; } .animate .c-l2-header__image { opacity: 1 !important; -webkit-transform: scale(1); transform: scale(1); } .c-l2-header__anchorContainer--mobile { width: 100%; min-height: 48px; padding: 48px 0 0; margin: 0 1rem; } @media (min-width: 768px) { .c-l2-header__anchorContainer--mobile { display: none; } } .c-l2-header__anchorContainer { display: none; font-family: transducer-variable, sans-serif; font-size: 1rem; font-weight: 700; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; max-width: calc(1440px + 13.44%); min-height: 50px; padding: 30px 1rem; -webkit-transition: opacity 0.35s ease; transition: opacity 0.35s ease; z-index: 1; } @media (min-width: 768px) { .c-l2-header__anchorContainer { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 2.5rem; margin-bottom: 2.5rem; } } @media (min-width: 1024px) { .c-l2-header__anchorContainer { position: relative; z-index: 1; padding: 0 6.72%; } } .c-l2-header__anchorJumpText { font-family: inherit; font-size: inherit; font-weight: 700; opacity: 1; text-transform: uppercase; -webkit-transform: translateY(30px); transform: translateY(30px); -webkit-transition: all 0.6s; transition: all 0.6s; margin-bottom: 10px; } .c-l2-header__anchorJumpText.animate { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .c-l2-header__anchorList { gap: 24px; font-family: inherit; font-size: inherit; font-weight: inherit; list-style: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 auto; } .c-l2-header__anchorList, .c-l2-header__anchorList-container { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -ms-flex-wrap: wrap; flex-wrap: wrap; } .c-l2-header__anchorList-container { max-width: 1920px; min-height: 50px; padding: 35px 0; margin: auto 6.72%; } .c-l2-header__anchorItem { font-family: inherit; font-size: inherit; font-weight: inherit; min-width: -webkit-max-content; min-width: -moz-max-content; min-width: max-content; line-height: 1.2; opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); -webkit-transition: all 0.6s; transition: all 0.6s; } .c-l2-header__anchorItem.animate { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } @media (min-width: 1024px) { .c-l2-header__anchorItem { width: auto; } } .c-l2-header__anchorItem a { border-bottom: 1px solid; display: block; font-size: inherit; font-family: inherit; font-weight: inherit; text-decoration: none; } .c-l2-header__anchorItem:last-child { margin-right: 6.875rem; } @media (min-width: 1024px) { .c-l2-header__anchorItem:last-child { margin-right: 0; } } .c-l2-header__asset { position: absolute; z-index: -1; pointer-events: none; } .c-l2-header__bottom { bottom: 10%; } .c-l2-header__top { top: 10%; } .c-l2-header__left { right: 90%; } .c-l2-header__right { left: 90%; } .c-l2-header__squiggle { width: 6.125rem; } @media (min-width: 768px) { .c-l2-header__squiggle { width: 7rem; } } @media (min-width: 1024px) { .c-l2-header__squiggle { width: 11.4375rem; } } .c-l2-header__circle { width: 9.4375rem; } @media (min-width: 768px) { .c-l2-header__circle { width: 8.3125rem; } } @media (min-width: 1024px) { .c-l2-header__circle { width: 15.625rem; } } .c-l2-header__youtube { max-width: 470px; width: 100%; margin: 20px 0; } .c-l2-header__youtube-phone { max-width: 80%; } .c-l2-header__dropdownContainer { position: relative; } .c-l2-header__dropdownHeader { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: hsla(48, 45%, 94%, 0.6); border: 1px solid #121515; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 1rem 14px; font-weight: 700; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 14px 24px; text-transform: uppercase; } .is-active .c-l2-header__dropdownCaret { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .c-l2-header__dropdownList { background: #ffffff; display: none; left: 0; position: absolute; padding: 0; margin: 0; list-style-type: none; top: 100%; width: 100%; } .c-l2-header__dropdownList li { background: #ffffff; border: 1px solid rgba(18, 21, 21, 0.5); border-top: none; margin-bottom: 0; padding: 14px 24px; cursor: pointer; } .c-l2-header__dropdownList a { color: #121515; display: block; font-size: 1rem; line-height: 1.375; text-decoration: none; } .is-active .c-l2-header__dropdownList { display: block; z-index: 10; } :root { --app-height: 100vh; } #loading { background: #effcf8; position: absolute; inset: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 99; color: #fff; } #canvas, #loading { height: var(--app-height); width: 100vw; } #canvas { position: fixed; top: 0; left: 0; z-index: 2; opacity: 0; -webkit-transition: opacity 0.8s ease-in; transition: opacity 0.8s ease-in; pointer-events: none; } .planes-loaded #canvas { opacity: 1; } #background-image { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; } #planes { overflow: hidden; opacity: 0; position: relative; height: var(--app-height); } .planes-loaded #planes { opacity: 1; } .plane-wrapper { position: absolute; } #object1 { width: 34.82px; height: 34.33px; top: 150px; left: 10vw; } #object2 { width: 61.3px; height: 64.74px; top: 191px; right: 1px; } #object3 { width: 71.6px; height: 78.47px; top: 461px; left: 25px; } #object4 { width: 152px; height: 161px; top: 510px; right: 3.1vw; } .plane { position: absolute; top: 0; right: 0; bottom: 0; left: 0; -o-object-fit: cover; object-fit: cover; -o-object-position: center center; object-position: center center; } body.is-fullscreen .plane { cursor: auto; } .plane img { height: 100%; width: auto; display: none; } .c-l2-mirage__header { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; } #header-content { color: inherit; position: absolute; top: 134px; left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%); z-index: 10; width: 90%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; max-width: 650px; } #time { font-size: 0.875rem; margin-bottom: 0.75rem; line-height: 140%; } #header-content h1 { font-size: 3rem; margin: 0; line-height: 110%; margin-bottom: 1rem; } #header-content p { font-size: 1.25rem; margin-bottom: 1.75rem; line-height: 140%; padding: 0 1rem; } #header-content a { color: #000; text-decoration: none; background-color: #ff9c03; border-radius: 24px 4px; padding: 1rem 1.5rem; width: -webkit-min-content; width: -moz-min-content; width: min-content; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.75rem; line-height: 100%; } .clouds { position: absolute; bottom: 115px; left: 50%; right: 0; -webkit-transform: translate(-50%, 55%); transform: translate(-50%, 55%); width: 100%; overflow-x: hidden; z-index: 25; } .clouds img { width: 200%; } .text-black { color: #000; } .c-l2-mirage__main { background: inherit; margin-top: 90vh; z-index: 20; } .c-l2-mirage__main iframe { aspect-ratio: 16/9; width: 100%; } .content-wrapper { position: relative; background: inherit; padding-top: 25vh; z-index: 20; } @media (min-width: 768px) { .content-wrapper { padding-top: 35vh; } } @media (min-width: 1250px) { .content-wrapper { padding-top: 50vh; } } @media (min-width: 1920px) { .content-wrapper { padding-top: 64vh; } } @media screen and (min-width: 768px) { #header-content { top: 200px; left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%); max-width: 777px; } #time { font-size: 1rem; margin-bottom: 1rem; } #header-content h1 { font-size: 5rem; max-width: none; } .clouds { -webkit-transform: translate(-50%, 67%); transform: translate(-50%, 67%); } .clouds img { width: 150%; } #object1 { width: 70px; height: 71px; top: 146px; left: 9vw; } #object2 { width: 125px; height: 132px; top: 145px; right: 2vw; } #object3 { width: 146px; height: 160px; top: 526px; left: 15vw; } #object4 { width: 308px; height: 326px; right: 10vw; top: 600px; } } @media screen and (min-width: 1280px) { #header-content { max-width: 928px; } #time { font-size: 1.25rem; margin-bottom: 1rem; } #header-content h1 { font-size: 6rem; } #header-content p { font-size: 1.5rem; margin-bottom: 2rem; } .clouds img { width: 100%; } #object1 { width: 70px; height: 71px; top: 146px; left: 11vw; } #object2 { width: 125px; height: 132px; top: 145px; right: 7vw; } #object3 { width: 146px; height: 160px; top: 526px; left: 15vw; } #object4 { width: 308px; height: 326px; right: 14vw; } } .no-curtains .plane-title { z-index: 1; } .no-curtains .plane { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; } .no-curtains .plane img { display: block; min-width: 100%; min-height: 100%; -o-object-fit: cover; object-fit: cover; } .c-wysiwyg__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 0; flex: 1 0; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; color: #121515; margin: 0 25px; max-width: 1920px; padding: 60px 0; } @media (min-width: 768px) { .c-wysiwyg__wrapper { margin: 0 6.72%; } } .c-wysiwyg__wrapper ul { padding-left: 25px; } .c-buttonContainer { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; margin: 25px 0 0; } .c-primaryButton { position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; } .c-primaryButton a { border: 2px solid #000; border-radius: 16px; color: #121515; display: block; font-family: transducer-variable, sans-serif; line-height: 1; font-size: clamp(0.625rem, 3vw, 0.875rem); font-weight: 700; padding: 16px 12px; position: relative; text-decoration: none; text-transform: uppercase; -webkit-transition: inherit; transition: inherit; width: -webkit-max-content; width: -moz-max-content; width: max-content; } @media (min-width: 768px) { .c-primaryButton a { border-width: 3px; padding: 20px 16px; } } .c-primaryButton:before { background: #000; border-radius: 16px; content: ""; height: calc(100% + 2px); left: 0; position: absolute; top: 0; -webkit-transform: translate(2px, 2px); transform: translate(2px, 2px); -webkit-transition: inherit; transition: inherit; width: calc(100% + 2.5px); z-index: -1; } .c-primaryButton.disable { pointer-events: none; } .c-primaryButton.disable:before { all: unset; } .c-primaryButton:hover a { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } .c-primaryButton:hover:before { height: calc(100% + 4px); -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px); width: calc(100% + 3px); } .c-primaryButton:active { left: -2px; top: -2px; } .c-primaryButton:active:before { height: calc(100% + 2px); left: 3px; top: 4px; width: calc(100% + 1.5px); } .c-primaryButton a { background: #0092ff; } .c-primaryButton.disable a { background: #d3d3d3; border: 2px solid #8e8e8e; color: #8e8e8e; pointer-events: none; z-index: 1; } .c-primaryButton.disable a:after { background: repeating-linear-gradient(-45deg, hsla(48, 45%, 94%, 0.6), hsla(48, 45%, 94%, 0.6) 1px, #d3d3d3 0, #d3d3d3 7px); border-radius: 12px; content: ""; inset: 0; position: absolute; z-index: -1; } .c-primaryButton.disable a:before { all: unset; } @media (min-width: 768px) { .c-primaryButton.disable a { border-width: 3px; } } .c-primaryButton--alt { position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; } .c-primaryButton--alt a { border: 2px solid #000; border-radius: 16px; color: #121515; display: block; font-family: transducer-variable, sans-serif; line-height: 1; font-size: clamp(0.625rem, 3vw, 0.875rem); font-weight: 700; padding: 16px 12px; position: relative; text-decoration: none; text-transform: uppercase; -webkit-transition: inherit; transition: inherit; width: -webkit-max-content; width: -moz-max-content; width: max-content; } @media (min-width: 768px) { .c-primaryButton--alt a { border-width: 3px; padding: 20px 16px; } } .c-primaryButton--alt:before { background: #000; border-radius: 16px; content: ""; height: calc(100% + 2px); left: 0; position: absolute; top: 0; -webkit-transform: translate(2px, 2px); transform: translate(2px, 2px); -webkit-transition: inherit; transition: inherit; width: calc(100% + 2.5px); z-index: -1; } .c-primaryButton--alt.disable { pointer-events: none; } .c-primaryButton--alt.disable:before { all: unset; } .c-primaryButton--alt:hover a { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } .c-primaryButton--alt:hover:before { height: calc(100% + 4px); -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px); width: calc(100% + 3px); } .c-primaryButton--alt:active { left: -2px; top: -2px; } .c-primaryButton--alt:active:before { height: calc(100% + 2px); left: 3px; top: 4px; width: calc(100% + 1.5px); } .c-primaryButton--alt a { background: #c7dfeb; } .c-primaryButton--alt.disable a { background: #d3d3d3; border: 2px solid #8e8e8e; color: #8e8e8e; pointer-events: none; z-index: 1; } .c-primaryButton--alt.disable a:after { background: repeating-linear-gradient(-45deg, hsla(48, 45%, 94%, 0.6), hsla(48, 45%, 94%, 0.6) 1px, #d3d3d3 0, #d3d3d3 7px); border-radius: 12px; content: ""; inset: 0; position: absolute; z-index: -1; } .c-primaryButton--alt.disable a:before { all: unset; } @media (min-width: 768px) { .c-primaryButton--alt.disable a { border-width: 3px; } } .c-secondaryButton { display: inline-block; font-size: clamp(0.625rem, 2vw, 0.875rem); font-weight: 700; padding-bottom: 3px; position: relative; text-decoration: none; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; text-transform: uppercase; } .c-secondaryButton:hover:after { background-position: 100% 0; } .c-secondaryButton:after { background: url(https://media-prd.coachella.com/content/coachella-2024/secondary-gradient-sprite.png) no-repeat; background-position: 0 0; bottom: 0; content: ""; height: 2px; left: 0; position: absolute; -webkit-transition: background 0.3s; transition: background 0.3s; width: 100%; } @media (min-width: 768px) { .c-secondaryButton:after { height: 3px; } } .c-secondaryButton.arrow { margin-right: 28px; white-space: nowrap; } .c-secondaryButton.arrow:before { aspect-ratio: 31/24; background: url(https://media-prd.coachella.com/content/coachella-2024/icon-arrow-right.svg) no-repeat; background-size: contain; content: ""; height: auto; position: absolute; right: -28px; top: 5px; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 16px; } @media (min-width: 768px) { .c-secondaryButton.arrow:before { right: -36px; width: 22px; top: 6px; } } @media (min-width: 768px) { .c-secondaryButton.arrow { margin-right: 36px; padding-bottom: 4px; } } .c-secondaryButton--reverse { display: inline-block; font-size: clamp(0.625rem, 2vw, 0.875rem); font-weight: 700; padding-bottom: 3px; position: relative; text-decoration: none; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; text-transform: uppercase; margin-left: 28px; margin-right: unset; } .c-secondaryButton--reverse:hover:after { background-position: 100% 0; } .c-secondaryButton--reverse:after { background: url(https://media-prd.coachella.com/content/coachella-2024/secondary-gradient-sprite.png) no-repeat; background-position: 0 0; bottom: 0; content: ""; height: 2px; left: 0; position: absolute; -webkit-transition: background 0.3s; transition: background 0.3s; width: 100%; } @media (min-width: 768px) { .c-secondaryButton--reverse:after { height: 3px; } } .c-secondaryButton--reverse:before { aspect-ratio: 31/24; background: url(https://media-prd.coachella.com/content/coachella-2024/icon-arrow-right.svg) no-repeat; background-size: contain; content: ""; height: auto; position: absolute; left: -28px; top: 5px; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transform: translateY(-50%) scaleX(-1); transform: translateY(-50%) scaleX(-1); width: 16px; } @media (min-width: 768px) { .c-secondaryButton--reverse:before { left: -36px; top: 6px; width: 22px; } } .c-secondaryButton--reverse:hover:before { opacity: 0; } @media (min-width: 768px) { .c-secondaryButton--reverse { margin-left: 36px; margin-right: unset; } } .c-tertiaryButton, .c-tertiaryLink { border-bottom: 2px solid #ff9c03; font-family: "pt-serif", sans-serif; font-size: 1rem; font-weight: 700; line-height: 1.4; padding: 0 0 7px; position: relative; } .c-tertiaryButton > *, .c-tertiaryLink > * { font-family: inherit; font-size: inherit; font-weight: inherit; padding-right: 18px; position: relative; text-decoration: none; } .c-tertiaryButton > :before, .c-tertiaryLink > :before { background-image: url("https://media.web.aegpresents.com/content/coachella-2023/icon-chevron-right-diagonal.svg"); background-repeat: no-repeat; background-size: cover; content: ""; height: 8px; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 8px; } .c-displayMore { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.375rem; visibility: hidden; text-transform: uppercase; letter-spacing: 0.8px; } @media (min-width: 768px) { .c-displayMore { visibility: visible; } } .c-displayMore:after { visibility: visible; content: ""; display: block; aspect-ratio: 1; width: 12px; background-image: url("https://media-prd.coachella.com/content/coachella-2024/icon-plus.svg"); background-repeat: no-repeat; background-size: contain; -webkit-transform: translateY(-1px); transform: translateY(-1px); } .c-displayMore.is-active:after { background-image: url("https://media-prd.coachella.com/content/coachella-2024/icon-minus.svg"); } .c-jumpToButton { display: block; position: fixed; bottom: 40px; right: 30px; width: 64px; height: 64px; padding: 0; background-size: 100%; background-repeat: no-repeat; background-position: 50%; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: -webkit-transform 0.4s ease; transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; cursor: pointer; } .c-jumpToButton > img { width: 100%; height: auto; } @media (min-width: 768px) { .c-jumpToButton { right: 60px; } } .c-jumpToButton.sticky { -webkit-transform: translateY(0); transform: translateY(0); } .c-musicPlaylist__container { width: 100%; height: auto; margin: auto; } @media only screen and (min-width: 1920px) { .c-musicPlaylist__container { max-width: calc(1440px + 13.44%); } } .c-musicPlaylist__block { min-height: 240px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 48px 0 0 24px; border-top-left-radius: 44px; border-bottom-left-radius: 44px; } @media (min-width: 1024px) { .c-musicPlaylist__block { padding: 96px 0 0; margin-left: 6.72%; margin-right: 0; } } @media only screen and (min-width: 1920px) { .c-musicPlaylist__block { margin-left: 0; margin-right: calc((100vw - (1440px + 13.44%)) / 2 * -1); } } .c-musicPlaylist__chevronLeft { -webkit-transform: scaleX(-1); transform: scaleX(-1); height: 20px; stroke: #000; } .c-musicPlaylist__chevronRight { height: 20px; stroke: #000; } .c-musicPlaylist__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-bottom: 56px; } @media (min-width: 768px) { .c-musicPlaylist__header { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 0; } } .c-musicPlaylist__textHeader { margin-bottom: 24px; } .c-musicPlaylist__textBody { max-width: 80%; font-size: clamp(1rem, 3vw, 1.5rem); } .c-musicPlaylist__image { padding: 0 25px 35px; } @media (min-width: 768px) { .c-musicPlaylist__image { padding: 56px 35px; } } .c-musicPlaylist__imageContent { padding: 0; } .c-musicPlaylist__textContent { display: block; position: relative; margin-bottom: 24px; } @media (min-width: 768px) { .c-musicPlaylist__textContent { margin: auto 6.72% auto 0; margin-bottom: 48px; } } .c-musicPlaylist__textContentSlider { margin-bottom: 24px; } @media (min-width: 768px) { .c-musicPlaylist__textContentSlider { margin-bottom: 48px; } } .main-carousel-wrapper { overflow: hidden; padding-top: 100px; padding-bottom: 16px; margin-top: -100px; } .carousel-cell { background-color: #fff; border-radius: 8px; margin-right: 24px; min-width: 200px; min-height: 450px; overflow: hidden; } .carousel-cell a { display: grid; height: 100%; padding: 16px; gap: 24px; text-decoration: none; } @media (min-width: 768px) { .carousel-cell a { -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .carousel-cell a { grid-template-columns: minmax(200px, 318px) 1fr; } } @media (min-width: 375px) { .carousel-cell { width: calc(75% - 32px); min-height: 480px; } } @media (min-width: 768px) { .carousel-cell { max-height: 350px; min-height: auto; max-width: 750px; } } @media (min-width: 1250px) { .carousel-cell { height: 350px; } } .carousel-cell__imageOnly { aspect-ratio: 1; margin-right: 16px; min-width: 200px; width: calc(40% - 32px); max-width: 450px; background-color: #fff; border-radius: 8px; overflow: hidden; } .carousel-cell__imageOnly img { width: 100%; aspect-ratio: 1; } @media (min-width: 768px) { .carousel-cell__imageOnly { width: calc(60% - 32px); margin-right: 24px; } } .flickity-viewport { overflow: visible; } button.flickity-button { display: none; background: url("https://media-prd.coachella.com/content/coachella-2024/icon-arrow-right.svg"); background-size: contain !important; background-repeat: no-repeat !important; aspect-ratio: 32/24; padding: 0; border: 0; border-radius: 0; } button.flickity-button:hover { background: url("https://media-prd.coachella.com/content/coachella-2024/icon-arrow-right.svg"); } @media (min-width: 768px) { button.flickity-button { display: block; } } .flickity-button-icon { display: none; } .flickity-prev-next-button.previous { top: -80px; right: 76px; -webkit-transform: rotate(180deg); transform: rotate(180deg); width: 36px; height: 28px; } @media (min-width: 1024px) { .flickity-prev-next-button.previous { right: calc(6.72% + 60px); } } @media (min-width: 1920px) { .flickity-prev-next-button.previous { right: unset; left: calc(1440px + 13.44% - 60px); } } .flickity-prev-next-button.next { top: -65px; right: 16px; width: 36px; height: 28px; } @media (min-width: 1024px) { .flickity-prev-next-button.next { right: 6.72%; } } @media (min-width: 1920px) { .flickity-prev-next-button.next { right: unset; left: calc(1440px + 13.44%); } } .c-featuredContent__container { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 24px; max-width: 1920px; } .c-featuredContent__container, .c-featuredContent__container.on-right { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } @media (min-width: 768px) { .c-featuredContent__container.on-right { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } @media (min-width: 1440px) { .c-featuredContent__container.on-right { grid-template-columns: minmax(auto, 728px) minmax(350px, 1fr); } } @media (min-width: 768px) { .c-featuredContent__container { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: grid; gap: 50px; grid-template-columns: 1fr 1fr; margin: 0 auto; max-height: 750px; padding: 40px 6.72%; } } @media (min-width: 1024px) { .c-featuredContent__container { gap: 90px; } } @media (min-width: 1440px) { .c-featuredContent__container { grid-template-columns: minmax(350px, 1fr) minmax(auto, 728px); width: 100%; } } .c-featuredContent__container--parent { display: grid; gap: 100px; width: 100%; margin: 20px 0; } @media (min-width: 768px) { .c-featuredContent__container--parent { gap: 90px; margin: 60px 0; } } .c-featuredContent__Left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0; position: relative; } @media (min-width: 768px) { .on-right .c-featuredContent__Left { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } .c-featuredContent__right { padding: 20px 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (min-width: 768px) { .c-featuredContent__right { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; padding-top: 0; } } .c-featuredContent__imgContainer { height: 100%; width: 100%; } .c-featuredContent__imgContainer img, .c-featuredContent__imgContainer svg { height: 100%; -o-object-fit: cover; object-fit: cover; width: 100%; } @media (min-width: 768px) { .on-right .c-featuredContent__imgContainer { position: relative; right: -20%; } } .c-featuredContent__imgContainer .curtains__plane-wrapper { width: calc(320px + 10vw); aspect-ratio: 583/447; } @media (min-width: 768px) { .c-featuredContent__imgContainer .curtains__plane-wrapper { width: calc(400px + 10vw); max-width: 583px; } } .on-right .c-featuredContent__imgContainer .curtains__plane-wrapper { max-width: 643px; aspect-ratio: 670/868; } .c-featuredContent__Image { -ms-flex-item-align: baseline; align-self: baseline; width: 100%; max-width: 630px; } @media (min-width: 768px) { .c-featuredContent__Image { width: auto; height: 447px; } } @media (min-width: 768px) { .c-featuredContent__Image--right { width: auto; height: 778px; } } .c-featuredContent__squiggle { width: 48px; height: 27px; } .c-featuredContent__btn a, .c-featuredContent__button { margin: 0; } .c-featuredContent__btn p { font-size: clamp(0.75rem, 2vw, 0.875rem); } .c-featuredContent__textContent { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .c-featuredContent__textHeader { padding-top: 12px; } .c-featuredContent__btnContainer { display: grid; gap: 20px; margin-top: 1.875rem; width: 100%; } @media screen and (min-width: 475px) { .c-featuredContent__btnContainer { margin-top: 4.0625rem; grid-template-columns: repeat(2, minmax(auto, 175px)); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .c-featuredContent__textBody { margin-top: 6px; } @media (min-width: 768px) { .c-featuredContent__textBody { margin-top: 16px; } } .c-featuredContent__textBody p { font-size: clamp(1rem, 2vw, 1.125rem); line-height: 1.375; margin-bottom: 0; } .c-featuredContent__textBody ul { padding-left: 15px; } .c-featuredContent__textBody ul li { margin-bottom: 10px; } .c-featuredContent__figure { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media (min-width: 768px) { .c-featuredContent__figure { padding-top: 106px; } } .c-featuredContent__figureCaption { position: relative; margin: 10px 0 0 auto; } @media (min-width: 768px) { .c-featuredContent__figureCaption { margin: 10px 0 0 10px; } } .c-featuredContent__figureCaption:before { content: ""; display: block; left: 0; top: -10px; width: 50px; height: 10px; background-repeat: no-repeat; background-size: contain; } @media (min-width: 768px) { .c-featuredContent__figureCaption:before { position: absolute; } } .c-flexibleContent__branding { display: -webkit-box; display: -ms-flexbox; display: flex; } .c-flexibleContent__brandingButton { padding: 0 6px; } .c-flexibleContent__brandingGoogle { height: 57px; width: 148px; } .c-filterable__container { max-width: 1920px; margin: 0 auto; padding: 90px 0; position: relative; } @media (min-width: 768px) { .c-filterable__container { padding: 60px 1rem; } } @media (min-width: 1024px) { .c-filterable__container { padding-left: 0; padding-right: 0; margin: 0 6.72%; } } .c-radial__container { position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 0; } .c-filterable__wrapper, .c-radial__container { display: -webkit-box; display: -ms-flexbox; display: flex; } .c-filterable__wrapper { width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 1; } .c-filterable__text { width: 100%; margin-bottom: 15px; } .c-filterable__radials { z-index: 10; } @media (min-width: 768px) { .c-filterable__radials { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 0; max-width: 1440px; } } .c-filterable__radials::-webkit-scrollbar { width: 0; background: transparent; } .c-filterable__labels { border-bottom: 1px solid; border-top: 1px solid; padding: 16px 25px; position: absolute; top: 26px; left: 0; right: 0; overflow-x: auto; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; white-space: nowrap; } @media (min-width: 768px) { .c-filterable__labels { border: none; gap: 32px; padding: 0; position: unset; width: auto; } } .c-filterable__labels::-webkit-scrollbar { width: 0 !important; background: transparent; } .c-filterable__content { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 24px 25px 0; display: grid; gap: 24px; max-width: 1440px; } @media (min-width: 768px) { .c-filterable__content { grid-template-columns: repeat(2, 1fr); padding-left: 0; padding-right: 0; } } @media (min-width: 1024px) { .c-filterable__content { grid-template-columns: repeat(3, 1fr); } } .c-filterable__column { background: hsla(48, 45%, 94%, 0.6); border-radius: 8px; -webkit-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; position: relative; padding: 0.5rem; } .c-filterable__column:before { content: ""; position: absolute; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; z-index: -1; } @media (min-width: 768px) { .c-filterable__column { gap: 32px; padding: 1rem; } } .c-filterable__imageContainer { position: relative; width: 100%; height: auto; z-index: 1; } .c-filterable__showAll { background-color: transparent; border: none; cursor: pointer; display: none; font-size: 1rem; gap: 8px; letter-spacing: 0.8px; padding: 0; font-weight: 700; } @media (min-width: 768px) { .c-filterable__showAll { display: -webkit-box; display: -ms-flexbox; display: flex; } } .c-filterable__showMore { background-color: transparent; border: none; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 1.375rem; gap: 8px; letter-spacing: 0.8px; padding: 0; position: absolute; font-weight: 700; right: 0; top: 0; } .c-filterable__showMore span { display: none; } @media (min-width: 768px) { .c-filterable__showMore span { display: inline-block; } } .active .c-filterable__showMore { bottom: 0; top: unset; } @media (min-width: 768px) { .c-filterable__showMore { font-size: 1rem; } } .c-filterable__span { color: #6d8e4e; display: inline-block; font-variation-settings: "wght" 700; text-transform: uppercase; } @media (min-width: 768px) { .c-filterable__span { width: 65%; } } .c-filterable__title-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0 25px; max-width: calc(1440px + 13.44%); font-weight: 700; } @media (min-width: 768px) { .c-filterable__title-wrapper { padding-left: 6.72%; padding-right: 6.72%; } } .c-filterable__title { margin-top: 0.25rem; } @media (min-width: 768px) { .c-filterable__title { margin-top: 0.5rem; } } .c-filterable__description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top: 0.5rem; } .active .c-filterable__description { display: block; height: auto; overflow: visible; text-overflow: unset; -webkit-line-clamp: unset; -webkit-box-orient: unset; } .c-filterable__description p { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; } @media (min-width: 768px) { .c-filterable__description { margin-top: 1.0625rem; height: 44px; } } .c-filterable__textContent { position: relative; } .active .c-filterable__textContent { padding-bottom: 2rem; } .c-carousel-cell__image { aspect-ratio: 1; height: 100%; width: 100%; -o-object-fit: contain; object-fit: contain; border-radius: 8px; } .c-carousel-cell__name { font-weight: 700; font-size: clamp(24px, 3vw, 32px); } .c-carousel-cell__text { font-family: transducer-variable, sans-serif; font-size: 1rem; font-weight: 400; margin-top: 8px; } @media (min-width: 1024px) { .c-carousel-cell__text { margin-top: 18px; } } .c-links__container { padding-bottom: 3px; overflow: hidden; display: inline-block; } .c-link { text-decoration: none; border-bottom: 1.5px solid; padding-bottom: 0.5px; } .c-links__item { position: relative; overflow-x: hidden; text-decoration: none; } .c-links__item:before { background: #121515; -webkit-transform: translateX(-130%); transform: translateX(-130%); } .c-links__item:after, .c-links__item:before { content: ""; position: absolute; bottom: -3px; display: block; width: 100%; height: 1px; -webkit-transition: -webkit-transform 0.5s ease; transition: -webkit-transform 0.5s ease; transition: transform 0.5s ease; transition: transform 0.5s ease, -webkit-transform 0.5s ease; } .c-links__item:after { background: #ff9c03; } .c-links__item:hover:after { -webkit-transform: translateX(130%); transform: translateX(130%); } .c-links__item:hover:before { -webkit-transform: translateX(0); transform: translateX(0); } .c-links__forwardArrow { color: #121515; text-transform: uppercase; display: -webkit-box; display: -ms-flexbox; display: flex; } .c-links__forwardArrow:focus { outline: none; } .c-links__forwardArrow img { width: 0.875rem; height: 0.875rem; } .c-links__forwardArrow a { border-bottom: none !important; } @-webkit-keyframes animateChevronSlideForward { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } 55% { -webkit-transform: translateX(-30%); transform: translateX(-30%); } to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes animateChevronSlideForward { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } 55% { -webkit-transform: translateX(-30%); transform: translateX(-30%); } to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } .c-linkIcon--rarr { width: 20px; height: 20px; margin-top: -1px; } .c-linkIcon--nearr { width: 14px; height: 14px; margin-top: 6px; } .c-collage__container { position: relative; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 0 240px; } @media (min-width: 768px) { .c-collage__container { margin: 0 6.72% 250px; } } @media (min-width: 1024px) { .c-collage__container { margin-bottom: 350px; } } .c-collage__wrapper { position: relative; background-color: #faf4e6; display: grid; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; margin-top: 100px; } @media (min-width: 1440px) { .c-collage__wrapper { margin-top: 192px; } } .c-collage__wrapper:after, .c-collage__wrapper:before { content: ""; position: absolute; width: 100%; height: 100%; max-height: 100px; background-size: contain; background-repeat: no-repeat; background-position: 100% 100%; } @media (min-width: 768px) { .c-collage__wrapper:after, .c-collage__wrapper:before { max-height: 192px; } } @media (min-width: 1440px) { .c-collage__wrapper:after, .c-collage__wrapper:before { max-height: 400px; } } .c-collage__wrapper:before { top: -100px; left: 0; } @media (min-width: 1440px) { .c-collage__wrapper:before { top: -250px; } } .c-collage__wrapper:after { bottom: 0; left: 0; } .c-collage__backgroundImage { position: absolute; top: 40%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; max-width: 1920px; pointer-events: none; z-index: 1; } @media (min-width: 768px) { .c-collage__backgroundImage { top: 60%; height: 75%; width: auto; } } .c-collage__images { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 auto; max-width: 1920px; } @media (min-width: 768px) { .c-collage__images { display: block; } } .c-collage__imageContainer { padding-left: 0; padding-right: 0; z-index: 2; } .c-collage__imageContainer:first-of-type { z-index: 0; } @media (min-width: 768px) { .c-collage__imageContainer:first-of-type { z-index: 2; } } .c-collage__image--order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .c-collage__image--order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .c-collage__image--order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .c-radial { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; position: relative; } .c-radial:checked ~ .c-radial__background, .c-radial:hover ~ .c-radial__background { display: -webkit-box; display: -ms-flexbox; display: flex; } .c-radial__text { cursor: pointer; font-size: clamp(0.75rem, 2vw, 1.25rem); font-variation-settings: "wght" 500; } .active .c-radial__text, .c-radial__text:hover { text-decoration: underline; } .c-radial__background { position: absolute; top: 0; left: 0; width: 30px; height: 30px; display: none; background-repeat: no-repeat; background-position: 50%; background-size: 100%; mix-blend-mode: multiply; z-index: -1; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .c-radial__background { background-size: 100%; } } .c-breadcrumb { color: #121515; text-transform: uppercase; } .c-breadcrumb:focus { outline: none; } .c-breadcrumb:hover > img { -webkit-animation: animateChevronSlide 1s forwards; animation: animateChevronSlide 1s forwards; } .c-breadcrumb > img { -webkit-transform: rotate(180deg); transform: rotate(180deg); width: 0.875rem; height: 0.875rem; } @-webkit-keyframes animateChevronSlide { 0% { opacity: 1; -webkit-transform: rotate(180deg); transform: rotate(180deg); } 50% { opacity: 0; -webkit-transform: translateX(-100%) rotate(180deg); transform: translateX(-100%) rotate(180deg); } 55% { -webkit-transform: translateX(30%) rotate(180deg); transform: translateX(30%) rotate(180deg); } to { opacity: 1; -webkit-transform: translateX(0) rotate(180deg); transform: translateX(0) rotate(180deg); } } @keyframes animateChevronSlide { 0% { opacity: 1; -webkit-transform: rotate(180deg); transform: rotate(180deg); } 50% { opacity: 0; -webkit-transform: translateX(-100%) rotate(180deg); transform: translateX(-100%) rotate(180deg); } 55% { -webkit-transform: translateX(30%) rotate(180deg); transform: translateX(30%) rotate(180deg); } to { opacity: 1; -webkit-transform: translateX(0) rotate(180deg); transform: translateX(0) rotate(180deg); } } .c-backstroke { position: relative; z-index: 1; } .c-backstroke:before { content: ""; position: absolute; width: 110%; min-width: 85px; height: 10px; opacity: 0; bottom: -5px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-repeat: no-repeat; background-size: 100% 100%; z-index: -1; -webkit-clip-path: polygon(0 0, 100% 0, 0 50%, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 0 50%, 100% 100%, 0 100%); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .c-backstroke.is-active:before, .c-backstroke:hover:before { opacity: 1; -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%); } .c-backstroke--passes-menu:before { height: 20px; bottom: -10px; } .c-backstroke--experience:before, .c-backstroke--plan:before { height: 24px; bottom: -12px; } .c-backstroke--shop-nav:before { height: 24px; bottom: -18px; } .c-passes__container a, .c-passes__container h1, .c-passes__container h2, .c-passes__container h3, .c-passes__container h4, .c-passes__container h5, .c-passes__container h6 { z-index: 3; position: relative; } .c-passes__cardInfo { font-size: clamp(1rem, 2vw, 1.125rem); line-height: 1.55555556; margin-top: 0.375rem; } .c-passes__cardInfo ul { padding-left: 15px; } .c-passes__cardInfo p { font-size: inherit; line-height: inherit; } .c-passes__cardInfo h5, .c-passes__cardInfo h6 { font-family: transducer-variable, sans-serif; } .c-passes__cardInfo h4, .c-passes__cardInfo h5, .c-passes__cardInfo h6 { font-weight: 700; } @media (min-width: 768px) { .c-passes__cardInfo { margin-top: 1rem; } } .c-passes__standard-container { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; display: grid; gap: 48px; max-width: calc(1440px + 13.44%); margin: auto; padding: 68px 25px; } .c-passes__standard-container .c-lottie-target { display: none; } @media (min-width: 768px) { .c-passes__standard-container .c-lottie-target { display: block; } } .c-passes__standard-container .c-passes__img-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (min-width: 768px) { .c-passes__standard-container { gap: 6%; grid-template-columns: 34.7% 1fr; } .c-passes__standard-container:nth-child(2n) { grid-template-columns: 1fr 34.7%; } .c-passes__standard-container:nth-child(2n) .c-passes__img-container { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } @media (min-width: 1250px) { .c-passes__standard-container { gap: 13.5%; padding: 96px 6.72%; } } .c-passes__img-container { position: relative; z-index: 1; } .c-passes__textContent-wrapper { position: relative; z-index: 1; max-width: 100vw; } .c-passes__showMore { border-bottom: 1px solid #000; cursor: pointer; font-size: clamp(12px, 2vw, 16px); font-weight: 700; padding-right: 15px; position: relative; width: -webkit-max-content; width: -moz-max-content; width: max-content; text-transform: capitalize; } .c-passes__showMore:before { content: "+"; position: absolute; right: 0; } .c-passes__showMore.is-active:before { content: "-"; } .sold-out .c-passes__showMore { color: #8e8e8e; } .c-passes__showMoreContent { display: block; visibility: hidden; width: 100%; height: 0; padding: 5px 0; } .c-passes__showMoreContent.is-active li { font-family: transducer-variable, sans-serif; font-size: clamp(0.75rem, 2vw, 1rem); font-weight: 400; text-transform: none; } .c-passes__showMoreContent.is-active { visibility: visible; height: 100%; } .c-passes { margin-top: 48px; position: relative; z-index: 1; } @media (min-width: 768px) { .c-passes { margin-top: 96px; } } .c-passes:last-of-type { margin-bottom: 48px; } @media (min-width: 768px) { .c-passes:last-of-type { margin-bottom: 96px; } } .c-passes__blob { position: absolute; z-index: -1; top: 0; } .c-passes__blob-wrap--1 { top: 50px; left: -150px; } @media (min-width: 768px) { .c-passes__blob-wrap--1 { top: 80px; left: -100px; } } .c-passes__blob-wrap--1 canvas { -webkit-filter: brightness(1.4); filter: brightness(1.4); } .c-passes__blob--1 { aspect-ratio: 1.85240175; width: 707px; -webkit-transform: rotate(-6deg); transform: rotate(-6deg); } @media (min-width: 768px) { .c-passes__blob--1 { width: calc(450px + 7vw); max-width: 650px; } } .c-passes__blob-wrap--2 { left: -200px; } @media (min-width: 768px) { .c-passes__blob-wrap--2 { left: -130px; } } .c-passes__blob-wrap--2 canvas { -webkit-filter: brightness(1.6); filter: brightness(1.6); } .c-passes__blob--2 { aspect-ratio: 1.23217623; width: 961px; -webkit-transform: rotate(10deg); transform: rotate(10deg); } @media (min-width: 768px) { .c-passes__blob--2 { width: calc(500px + 7.5vw); max-width: 839px; } } .c-passes__blob-wrap--3 { left: -100px; } @media (min-width: 768px) { .c-passes__blob-wrap--3 { left: -150px; } } .c-passes__blob-wrap--3 canvas { -webkit-filter: brightness(2); filter: brightness(2); } .c-passes__blob--3 { aspect-ratio: 1.49616858; width: 500px; -webkit-transform: rotate(-7deg); transform: rotate(-7deg); scale: 1.5; } @media (min-width: 768px) { .c-passes__blob--3 { scale: unset; width: calc(350px + 7.5vw); max-width: 710; } } .c-passes__blob-wrap--4 { left: -100px; } @media (min-width: 768px) { .c-passes__blob-wrap--4 { left: -30px; } } @media (min-width: 1250px) { .c-passes__blob-wrap--4 { left: 20px; } } .c-passes__blob-wrap--4 canvas { -webkit-filter: brightness(2); filter: brightness(2); } .c-passes__blob--4 { aspect-ratio: 1.16639478; width: 500px; -webkit-transform: rotate(-23deg); transform: rotate(-23deg); scale: 1.1; } @media (min-width: 768px) { .c-passes__blob--4 { scale: 1; width: calc(250px + 7vw); max-width: 650; } } @media (min-width: 1024px) { .c-passes__blob--4 { scale: 1.1; } } @media (min-width: 1250px) { .c-passes__blob--4 { scale: 1.2; } } .c-passes__blob-wrap--5 { top: 0; left: 0; } @media (min-width: 768px) { .c-passes__blob-wrap--5 { top: -30px; left: -70px; } } @media (min-width: 1024px) { .c-passes__blob-wrap--5 { top: -20px; left: -60px; } } @media (min-width: 1250px) { .c-passes__blob-wrap--5 { top: -10px; left: -40px; } } .c-passes__blob-wrap--5 canvas { -webkit-filter: brightness(2); filter: brightness(2); } .c-passes__blob--5 { aspect-ratio: 0.99007092; width: 698px; scale: 1.1; } @media (min-width: 768px) { .c-passes__blob--5 { scale: 1; width: calc(350px + 7vw); max-width: 698; } } @media (min-width: 1024px) { .c-passes__blob--5 { scale: 1.1; } } @media (min-width: 1250px) { .c-passes__blob--5 { scale: 1.2; } } .c-passes__card { -webkit-box-align: start; -ms-flex-align: start; background: hsla(48, 45%, 94%, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 8px; border: 1px solid #b7b7b7; -webkit-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15); display: grid; padding: 16px; align-items: flex-start; } .c-passes__card p { font-size: clamp(0.75rem, 2vw, 1rem); margin-top: 16px; } .c-passes__card p strong { display: block; font-weight: 700; margin-bottom: 24px; } .c-passes__card h3 { font-size: clamp(24px, 2vw, 32px); font-weight: 700; } .c-passes__card li { font-size: inherit; font-weight: 700; letter-spacing: 0.8px; position: relative; text-transform: uppercase; } .c-passes__card li div span { font-size: clamp(16px, 1.4vw, 24px); letter-spacing: normal; position: relative; text-transform: capitalize; } .c-passes__card li div a span { font-size: clamp(10px, 1.2vw, 16px); } .c-passes__card li div { display: inline-block; position: relative; } .c-passes__card li.sold-out div:before { background: url(https://media-prd.coachella.com/content/coachella-2024/icon-strike-through.svg) no-repeat; background-size: contain; content: ""; height: 8px; left: 0; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 120%; } .c-passes__card li:not(:last-child) { margin-bottom: 5px; } .c-passes__card ul { display: grid; font-size: clamp(8px, 3vw, 10px); gap: 6px; margin-top: 16px; } @media (min-width: 768px) { .c-passes__card ul { gap: 8px; margin-top: 24px; } } .c-passes__card.sold-out { -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); pointer-events: none; } .c-passes__card.sold-out p, .c-passes__card.sold-out ul { opacity: 0.6; } .c-passes__card.sold-out p { color: #8e8e8e; } .c-passes__card.sold-out:after { background: repeating-linear-gradient(-45deg, hsla(0, 0%, 50%, 0.3), hsla(0, 0%, 50%, 0.3) 2px, transparent 0, transparent 15px); content: ""; inset: 0; position: absolute; z-index: -1; } .c-passes__card.sold-out h3 { color: #8e8e8e; } .c-passes__card.sold-out li div:before { background: url(https://media-prd.coachella.com/content/coachella-2024/icon-strike-through.svg) no-repeat; background-size: contain; content: ""; height: 8px; left: 0; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 120%; } @media (min-width: 1024px) { .c-passes__card { height: auto; padding: 24px; } } @media (min-width: 1250px) { .c-passes__card { aspect-ratio: 1; } } .c-passes__card-btn-group { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 12px; margin-top: 32px; pointer-events: all; } @media (min-width: 768px) { .c-passes__card-btn-group { gap: 16px; padding-top: 48px; margin-top: auto; } } @media (min-width: 1440px) { .c-passes__card-btn-group { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } .c-passes__img { aspect-ratio: 1; border-radius: 8px; position: relative; width: 100%; pointer-events: none; } .c-passes__img img:not(.c-passes__blob) { height: auto; -o-object-fit: cover; object-fit: cover; width: 100%; border-radius: 6px; } @media (min-width: 768px) { .c-passes__img img:not(.c-passes__blob) { border-radius: 8px; } } .c-passes__inner { display: grid; gap: 48px; margin: auto; max-width: calc(1440px + 13.44%); padding: 0 1rem; } @media (min-width: 768px) { .c-passes__inner { gap: 96px; } } @media (min-width: 1024px) { .c-passes__inner { padding: 0 6.72%; max-width: calc(1440px + 13.44%); } } .c-passes__passes-cards { display: grid; gap: 18px; } @media (min-width: 768px) { .c-passes__passes-cards { gap: 24px; } } @media (min-width: 1250px) { .c-passes__passes-cards { grid-template-columns: 1fr 1fr; } } .c-passes__buttons { margin-top: 20px; } .c-passes__passes-grid { z-index: 2; display: grid; gap: 18px; position: relative; margin-top: 24px; } @media (min-width: 768px) { .c-passes__passes-grid { gap: 24px; grid-template-columns: 1fr minmax(auto, 458px); } } @media (min-width: 1250px) { .c-passes__passes-grid { grid-template-columns: 23% 1fr; } } @media (min-width: 1440px) { .c-passes__passes-grid { grid-template-columns: 458px 1fr; } } .c-passes__price-tier { list-style: none; } .c-passes__price-tier .c-passes__price-tier-title { font-size: clamp(12px, 3vw, 16px); text-transform: capitalize; } .c-passes__price-tier li { position: relative; bottom: 2px; } @media (min-width: 1440px) { .c-passes__price-tier li { bottom: 3px; } } @media (min-width: 1920px) { .c-passes__price-tier li { bottom: 4px; } } .c-passes__price-tier li div { font-size: inherit; } .c-passes__price-tier li span { position: relative; bottom: -2px; } @media (min-width: 1440px) { .c-passes__price-tier li span { bottom: -3px; } } @media (min-width: 1920px) { .c-passes__price-tier li span { bottom: -4px; } } .c-passes__price-tier div a { text-decoration: none; position: relative; font-size: clamp(8px, 3vw, 10px); } .c-passes__price-tier-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 36px; } .c-passes__blob-wrap-standard--1 { top: -11%; left: -15%; } @media (min-width: 768px) { .c-passes__blob-wrap-standard--1 { top: -14%; left: -25%; } } .c-passes__blob-wrap-standard--1 canvas { -webkit-filter: brightness(2); filter: brightness(2); } .c-passes__blob-standard--1 { aspect-ratio: 630/638; width: 110vw; max-width: 630px; } @media (min-width: 768px) { .c-passes__blob-standard--1 { width: calc(350px + 4vw); } } @media (min-width: 1024px) { .c-passes__blob-standard--1 { width: calc(400px + 5vw); } } @media (min-width: 1250px) { .c-passes__blob-standard--1 { width: calc(450px + 5vw); } } @media (min-width: 1440px) { .c-passes__blob-standard--1 { width: calc(500px + 5vw); } } .c-passes__blob-wrap-standard--2 { bottom: -10%; right: -5%; } @media (min-width: 768px) { .c-passes__blob-wrap-standard--2 { bottom: -14%; right: -25%; } } .c-passes__blob-wrap-standard--2 canvas { -webkit-filter: brightness(2); filter: brightness(2); } .c-passes__blob-standard--2 { aspect-ratio: 630/637; width: 110vw; max-width: 630px; } @media (min-width: 768px) { .c-passes__blob-standard--2 { width: calc(350px + 4vw); } } @media (min-width: 1024px) { .c-passes__blob-standard--2 { width: calc(400px + 5vw); } } @media (min-width: 1250px) { .c-passes__blob-standard--2 { width: calc(450px + 5vw); } } @media (min-width: 1440px) { .c-passes__blob-standard--2 { width: calc(500px + 5vw); } } .c-passes__blob-wrap-standard--3 { top: -11%; left: -15%; } @media (min-width: 768px) { .c-passes__blob-wrap-standard--3 { top: -14%; left: -25%; } } .c-passes__blob-wrap-standard--3 canvas { -webkit-filter: brightness(1.1); filter: brightness(1.1); } .c-passes__blob-standard--3 { aspect-ratio: 650/650; width: 110vw; max-width: 650px; } @media (min-width: 768px) { .c-passes__blob-standard--3 { width: calc(350px + 4vw); } } @media (min-width: 1024px) { .c-passes__blob-standard--3 { width: calc(400px + 5vw); } } @media (min-width: 1250px) { .c-passes__blob-standard--3 { width: calc(450px + 5vw); } } @media (min-width: 1440px) { .c-passes__blob-standard--3 { width: calc(500px + 5vw); } } .c-passes__blob-wrap-standard--4 { bottom: -11%; left: -15%; } @media (min-width: 768px) { .c-passes__blob-wrap-standard--4 { bottom: -15%; left: -15%; } } .c-passes__blob-wrap-standard--4 canvas { -webkit-filter: brightness(2); filter: brightness(2); } .c-passes__blob-standard--4 { aspect-ratio: 641/645; width: 110vw; max-width: 641px; } @media (min-width: 768px) { .c-passes__blob-standard--4 { width: calc(350px + 4vw); } } @media (min-width: 1024px) { .c-passes__blob-standard--4 { width: calc(400px + 5vw); } } @media (min-width: 1250px) { .c-passes__blob-standard--4 { width: calc(450px + 5vw); } } @media (min-width: 1440px) { .c-passes__blob-standard--4 { width: calc(500px + 5vw); } } .c-passes__blob-wrap-standard--5 { top: -11%; left: -15%; } @media (min-width: 768px) { .c-passes__blob-wrap-standard--5 { top: -14%; left: -25%; } } .c-passes__blob-wrap-standard--5 canvas { -webkit-filter: brightness(2); filter: brightness(2); } .c-passes__blob-standard--5 { aspect-ratio: 630/637; width: 110vw; max-width: 630px; } @media (min-width: 768px) { .c-passes__blob-standard--5 { width: calc(350px + 4vw); } } @media (min-width: 1024px) { .c-passes__blob-standard--5 { width: calc(400px + 5vw); } } @media (min-width: 1250px) { .c-passes__blob-standard--5 { width: calc(450px + 5vw); } } @media (min-width: 1440px) { .c-passes__blob-standard--5 { width: calc(500px + 5vw); } } .c-passes__blob-wrap-standard--6 { bottom: -11%; right: -15%; } @media (min-width: 768px) { .c-passes__blob-wrap-standard--6 { bottom: -14%; right: -25%; } } .c-passes__blob-wrap-standard--6 canvas { -webkit-filter: brightness(1.8); filter: brightness(1.8); } .c-passes__blob-standard--6 { aspect-ratio: 606/633; width: 110vw; max-width: 606px; } @media (min-width: 768px) { .c-passes__blob-standard--6 { width: calc(350px + 4vw); } } @media (min-width: 1024px) { .c-passes__blob-standard--6 { width: calc(400px + 5vw); } } @media (min-width: 1250px) { .c-passes__blob-standard--6 { width: calc(450px + 5vw); } } @media (min-width: 1440px) { .c-passes__blob-standard--6 { width: calc(500px + 5vw); } } .c-accordion__container { max-width: calc(1440px + 13.44%); width: 100%; margin: 0 24px; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.35s ease-out, -webkit-transform 0.3s ease-out; transition: opacity 0.35s ease-out, -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out, opacity 0.35s ease-out; transition: transform 0.3s ease-out, opacity 0.35s ease-out, -webkit-transform 0.3s ease-out; cursor: pointer; } @media (min-width: 768px) { .c-accordion__container { margin: 0 6.72%; } } .c-accordion__container.scale-down { -webkit-transform: scale(0.9); transform: scale(0.9); } .c-accordion__container a { padding-bottom: 0.5px; } .c-accordion__container.is-collapsible:not(.is-active) { border-bottom: 1px solid #000; } .c-accordion { display: -webkit-box; display: -ms-flexbox; display: flex; } .c-accordion__content { margin-bottom: 40px; } .c-accordion__container.is-collapsible:not(.is-active) .c-accordion__content { display: none; } .c-accordion__container.is-collapsible.is-active .c-accordion__content { display: block; } .c-accordion__block { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 2rem; cursor: pointer; padding-bottom: 16px; scroll-margin-top: 65px; } .c-search__resultsItem .c-accordion__block { border-bottom: 1px solid #000; } .c-accordion__content .c-accordion__block { border-top: 1px solid #000; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; padding: 16px 0; } .c-accordion__content .c-accordion__block:last-child { border-bottom: 1px solid #000; } @media (min-width: 768px) { .c-accordion__content .c-accordion__block { padding: 32px 0; } } @media (min-width: 768px) { .c-accordion__block { padding-bottom: 24px; scroll-margin-top: 90px; } } .c-accordion__block.selected { background-color: #fff; } .c-accordion__block.fadeout { background-color: transparent; -webkit-transition-property: background-color; transition-property: background-color; -webkit-transition-duration: 1.5s; transition-duration: 1.5s; } .c-accordion__title-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 32px 0; gap: 16px; } .c-accordion__question { font-weight: 700; } .c-accordion__answer, .c-accordion__question { font-family: transducer-variable, sans-serif; font-size: clamp(1rem, 2vw, 1.5rem); } .c-accordion__answer { font-weight: 400; margin-top: 16px; margin-bottom: 0; content-visibility: auto; line-height: 1.4; display: none; } .c-accordion__answer * { font-family: inherit; font-size: inherit; } .c-accordion__answer p { margin-bottom: 16px; } .c-accordion__answer p:last-child { margin-bottom: 0; } .c-accordion__answer ol, .c-accordion__answer ul { margin-bottom: 16px; } .c-accordion__answer ol:last-child, .c-accordion__answer ol li:last-child, .c-accordion__answer ul:last-child, .c-accordion__answer ul li:last-child { margin-bottom: 0; } .c-accordion__block.is-active .c-accordion__answer { display: block; } .c-accordion__answer ul { margin-top: 0; padding-left: 25px; } .c-accordion__answer ul li { margin-bottom: 12px; padding-left: 8px; } .c-accordion__answer ol { list-style: none; counter-reset: li; -webkit-padding-start: 0; padding-inline-start: 0; } .c-accordion__answer ol li { counter-increment: li; margin-bottom: 12px; padding-left: 8px; } .c-accordion__answer ol li:before { content: counter(li); left: 10px; display: inline-block; padding: 0 1px; position: absolute; } .c-accordion__icon { aspect-ratio: 1; width: 12px; } .c-accordion__icon--plus { display: block; } .c-accordion__block.is-active .c-accordion__icon--plus, .c-accordion__icon--minus { display: none; } .c-accordion__block.is-active .c-accordion__icon--minus { display: block; } .c-accordion__textContent { margin-left: 0; } .c-accordion__expand, .c-accordion__expandAll { cursor: pointer; font-family: transducer-variable, sans-serif; font-size: 1rem; font-weight: 700; } .c-accordion__expandAllWrapper { z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; max-width: calc(1440px + 13.44%); width: 100%; margin: 0 24px; padding: 64px 0 32px; } @media (min-width: 768px) { .c-accordion__expandAllWrapper { margin: 0 6.72%; } } .c-posterList__container { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 1920px; margin: 0 6.72%; } .c-posterList__column { padding: 0 8px; margin-bottom: 50px; } .c-posterList__date { font-family: Carena, sans-serif; line-height: 1.1; font-size: clamp(1.25rem, calc(1.16211rem + 0.375vw), 1.5rem); } .c-posterList__image { margin-bottom: 20px; } .c-imageCollage__image { margin: 6px 0; width: 100%; -o-object-fit: contain; object-fit: contain; } @media (min-width: 768px) { .c-imageCollage__image { width: calc(25% - 6px); margin: 0 6px; } } .c-imageCollage__wrapper { width: 100%; max-width: 1920px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 128px 0; margin: 0 24px; } @media (min-width: 768px) { .c-imageCollage__wrapper { margin: 0 6.72%; } } .c-imageCollage__textContent { width: 100%; } .c-imageCollage__images { width: 100%; height: auto; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 10% 0; } @media (min-width: 768px) { .c-imageCollage__images { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } .c-imageCollage__images-group { width: calc(50% - 12px); margin: 0 6px; } .c-imageCollage--desktop { display: none; position: relative; } @media (min-width: 768px) { .c-imageCollage--desktop { display: -webkit-box; display: -ms-flexbox; display: flex; } } .c-imageCollage--mobile { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; } @media (min-width: 768px) { .c-imageCollage--mobile { display: none; } } .c-imageCollage__orangeSwirl { position: absolute; left: -60px; width: 170px; bottom: 0; } .c-imageCollage__blueSquiggle { position: absolute; width: 210px; right: -20px; top: 0; } @media (min-width: 1250px) { .c-imageCollage__blueSquiggle { width: 420px; } } .c-multiColumnList__column { border-radius: 8px; -webkit-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15); display: grid; gap: 8px; grid-template-columns: 87px 1fr; padding: 0.5rem; } .c-multiColumnList__column:nth-child(4n + 1) .c-multiColumnList__item-container { background-color: #a4d07a; } .c-multiColumnList__column:nth-child(4n + 2) .c-multiColumnList__item-container { background-color: #6fcefd; } .c-multiColumnList__column:nth-child(4n + 3) .c-multiColumnList__item-container { background-color: #f9ffc6; } .c-multiColumnList__column:nth-child(4n + 4) .c-multiColumnList__item-container { background-color: #0092ff; } @media (min-width: 768px) { .c-multiColumnList__column { gap: 16px; grid-template-columns: 118px 1fr; padding: 1rem; } } .c-multiColumnList__container { max-width: calc(1440px + 13.44%); margin: 48px 25px; z-index: 1; } @media (min-width: 768px) { .c-multiColumnList__container { margin: 0 6.72%; } .c-multiColumnList__container:last-of-type { margin-bottom: 96px; } } .c-multiColumnList__eventText { font-size: clamp(1rem, 2vw, 1.25rem); margin-bottom: 0; margin-top: 8px; } .c-multiColumnList__grid { display: grid; gap: 24px; } @media (min-width: 768px) { .c-multiColumnList__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .c-multiColumnList__grid { grid-template-columns: repeat(3, 1fr); } } .c-multiColumnList__item-container { aspect-ratio: 1; border-radius: 8px; position: relative; display: inline-block; background-color: #bbf3f8; padding: 1.25rem; } .c-multiColumnList__item-img-container { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; } .c-multiColumnList__hr { margin: 16px 0; width: 17px; } .c-multiColumnList__textContent { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .c-multiColumnList__textContent .c-secondaryButton { margin-top: 20px; } .c-multiColumnList__textContent .c-links__forwardArrow { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 1rem; gap: 9px; margin-top: 24px; text-transform: capitalize; } .c-multiColumnList__textContent .c-multiColumnList__eventTitle { font-size: clamp(0.75rem, 3vw, 1.25rem); margin: 0; } .c-multiColumnList__textContent .c-links__container { margin-top: 23px; padding: 0; } @media (min-width: 768px) { .c-multiColumnList__textContent .c-links__container { margin-top: 37px; } } .c-multiColumnList__textContent a { text-decoration: none; } .c-multiColumnList__textContent p:not(.u-font-p2):not(.u-font-p1--bold-override) { font-family: transducer-variable, sans-serif; font-size: clamp(0.75rem, 3vw, 1rem); margin-bottom: 0; margin-top: 8px; } .c-multiColumnList__titleContainer { display: grid; -ms-flex-wrap: wrap; flex-wrap: wrap; grid-template-columns: 1fr; margin-bottom: 30px; gap: 24px; } @media (min-width: 1250px) { .c-multiColumnList__titleContainer { grid-template-columns: repeat(2, auto); gap: 150px; } } .c-collapsible { padding: 0 1rem; max-width: calc(1440px + 13.44%); width: 100%; z-index: 1; } @media (min-width: 1024px) { .c-collapsible { padding: 0 6.72%; } } .c-collapsible__title-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0; max-width: calc(1440px + 13.44%); } .c-collapsible__expand-all { background: transparent; border: none; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 1rem; font-variation-settings: "wght" 700; gap: 6px; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; width: 100%; text-transform: uppercase; } .c-collapsible__inner { display: grid; gap: 12px; margin: 32px 0 96px; } @media (min-width: 768px) { .c-collapsible__inner { gap: 16px; } } .c-collapsible__category { font-size: clamp(12px, 3vw, 20px); font-variation-settings: "wght" 700; } @media (max-width: 767px) { .active .c-collapsible__category { font-size: 1rem; } } .c-collapsible__category-container { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .active .c-collapsible__category-container { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media (max-width: 767px) { .active .c-collapsible__category-container { -webkit-box-align: unset; -ms-flex-align: unset; align-items: unset; } } .c-collapsible__card { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: hsla(48, 45%, 94%, 0.6); border-radius: 8px; -webkit-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15); cursor: pointer; display: grid; gap: 8px; grid-template-columns: minmax(10%, 87px) 1fr; padding: 8px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .c-collapsible__card.active { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 24px; grid-template-columns: 1fr; grid-template-rows: 338px auto; } @media (min-width: 768px) { .c-collapsible__card.active { grid-template-columns: 328px 1fr; grid-template-rows: auto; } } @media (min-width: 768px) { .c-collapsible__card { gap: 24px; grid-template-columns: 69px 1fr; padding: 16px 24px; } } .c-collapsible__expand-icon { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: transparent; border: none; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 6px; font-size: 24px; font-variation-settings: "wght" 700; position: relative; } .c-collapsible__expand-icon span { display: none; font-size: 1rem; } @media (min-width: 768px) { .c-collapsible__expand-icon span { display: block; } } @media (max-width: 767px) { .active .c-collapsible__expand-icon { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; top: -5px; } } .c-collapsible__icon { aspect-ratio: 1; border-radius: 8px; height: 100%; position: relative; width: 100%; } .c-collapsible__card:nth-child(4n + 1) .c-collapsible__icon { background: #a4d07a; } .c-collapsible__card:nth-child(4n + 2) .c-collapsible__icon { background: #0092ff; } .c-collapsible__card:nth-child(4n + 3) .c-collapsible__icon { background: #6fcefd; } .c-collapsible__card:nth-child(4n + 4) .c-collapsible__icon { background: #f9ffc6; } .c-collapsible__content-body { margin-top: 8px; position: absolute; opacity: 0; visibility: hidden; } .active .c-collapsible__content-body { opacity: 1; visibility: visible; position: relative; } .c-collapsible__content-body p { font-size: 1rem; } @media (min-width: 768px) { .c-collapsible__content-body { margin-top: 24px; width: 95%; } } @media (min-width: 1200px) { .c-collapsible__content-body { width: 66%; } } .c-twoColumn { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; max-width: calc(1440px + 13.44%); margin: 0 24px; padding-top: 12px; position: relative; z-index: 1; } @media (min-width: 768px) { .c-twoColumn { padding-top: 16px; } } @media (min-width: 1024px) { .c-twoColumn { margin: 0 6.72%; } } .c-twoColumn div, .c-twoColumn p { font-size: 16px; line-height: 1.4; } .c-twoColumn p { margin-bottom: 8px; } @media (min-width: 768px) { .c-twoColumn p { margin-bottom: 16px; } } .c-twoColumn h5 { font-weight: 700; margin-bottom: 16px; font-size: clamp(24px, 3vw, 32px); } .c-twoColumn ul { margin: 16px 0; } .c-twoColumn ul li { position: relative; margin-bottom: 8px; margin-left: 16px; padding-left: 8px; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; font-size: 16px; } @media (min-width: 768px) { .c-twoColumn ul li { margin-bottom: 16px; } } .c-twoColumn ul li::marker { padding-right: 12px; } .c-twoColumn .c-passes__showMoreContainer .c-passes__showMore { padding-right: 14px; font-size: 16px; border: 0; } .c-twoColumn .c-passes__showMoreContainer .c-passes__showMore:before { top: 0; } .c-twoColumn .c-passes__showMoreContainer .c-passes__showMoreContent { margin-top: 16px; padding: 0; } .c-twoColumn .c-passes__showMoreContainer .c-passes__showMoreContent ul { margin: 16px 0; } .c-twoColumn .c-passes__showMoreContainer .c-passes__showMoreContent ul li { position: relative; margin-bottom: 8px; margin-left: 16px; padding-left: 8px; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; font-size: 16px; } @media (min-width: 768px) { .c-twoColumn .c-passes__showMoreContainer .c-passes__showMoreContent ul li { margin-bottom: 16px; } } .c-twoColumn .c-passes__showMoreContainer .c-passes__showMoreContent ul li::marker { padding-right: 12px; } .c-twoColumn__grid { width: 100%; } @media (min-width: 768px) { .c-twoColumn__grid { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 20px; gap: 48px; } .c-twoColumn__grid .o-grid__column { width: 100%; } .c-twoColumn__grid .o-grid__column--offset-1\@sm { margin-left: 0; } } .c-twoColumn__list { display: inline-block; } .c-video__container { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 25px; padding: 64px 0; } @media (min-width: 768px) { .c-video__container { margin: 0 6.72%; } } .c-search__overlay { display: none; position: fixed; z-index: 999; top: 0; left: 0; right: 0; bottom: 0; background: rgba(18, 21, 21, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .c-search__wrapper { background: #ffffff; width: 100%; height: 100vh; visibility: hidden; opacity: 0; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-font-variant-ligatures: none; font-variant-ligatures: none; overflow: hidden; } .c-search__wrapper, .c-search__wrapper.is-active { display: -webkit-box; display: -ms-flexbox; display: flex; } .c-search__wrapper.is-active { opacity: 1 !important; visibility: visible; } @media (min-width: 768px) { .c-search__wrapper { max-height: 800px; background: -webkit-gradient(linear, left top, left bottom, color-stop(15.14%, #ffffff), color-stop(54.71%, #ecfcfc), color-stop(66.04%, #ebfdfe), to(#ffffff)); background: linear-gradient(180deg, #ffffff 15.14%, #ecfcfc 54.71%, #ebfdfe 66.04%, #ffffff); } .c-search__wrapper:before { content: ""; position: absolute; top: 0; left: -633px; width: 3651px; height: 2958px; -webkit-transform: rotate(90deg); transform: rotate(90deg); display: block; border-radius: 3651px; opacity: 0.2; background: #ffa06a; -webkit-filter: blur(400px); filter: blur(400px); pointer-events: none; } .c-search__wrapper:after { content: ""; position: absolute; width: 1846.657px; height: 2980.247px; -webkit-transform: rotate(-0.637deg); transform: rotate(-0.637deg); top: 458.622px; right: -318.635px; border-radius: 2980.247px; opacity: 0.4; background: linear-gradient(100deg, #d3bd46 12.28%, rgba(245, 138, 37, 0) 72.48%, #3e05ff 0); -webkit-filter: blur(300px); filter: blur(300px); pointer-events: none; } } .c-search__container { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; max-width: calc(1440px + 13.44%); height: calc(100% - 120px); top: 96px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding: 0 16px; } @media (min-width: 768px) { .c-search__container { top: calc(48px + 48px + 6.72%); padding: 0 6.72%; padding-bottom: 6.72%; } } .c-search__formWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; } @media (min-width: 768px) { .c-search__formWrapper { gap: 16px; } } .c-search__formSubtitle { font-family: transducer-variable, sans-serif; font-weight: 900; font-size: 16px; text-transform: uppercase; } .c-search__form { color: #121515; border-bottom: 2px solid #000; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } @media (min-width: 768px) { .c-search__form { border-color: rgba(18, 21, 21, 0.35); } } .c-search__icon { width: 32px; height: 32px; margin: auto 0; margin-right: 8px; } @media (min-width: 768px) { .c-search__icon { width: 48px; height: 48px; margin-right: 16px; } } .c-search__input { color: #121515; font-family: Dream Orphan, sans-serif; font-weight: 700; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1; width: 100%; border: none; background-color: transparent; -webkit-font-variant-ligatures: none; font-variant-ligatures: none; padding: 8px 0; } .c-search__input::-webkit-input-placeholder { color: #121515; opacity: 0.15; } .c-search__input::-moz-placeholder { color: #121515; opacity: 0.15; } .c-search__input::-ms-input-placeholder { color: #121515; opacity: 0.15; } .c-search__input::placeholder { color: #121515; opacity: 0.15; } .c-search__results { overflow: hidden; height: 0; opacity: 0; visibility: hidden; color: #121515; -webkit-transition: height 0.5s ease, opacity 1s ease; transition: height 0.5s ease, opacity 1s ease; -ms-overflow-style: none; scrollbar-width: none; width: 100%; } .c-search__results.is-active { visibility: visible; height: 100%; opacity: 1; } .c-search__results .c-accordion__block { cursor: unset; } .c-search__results ul { list-style-type: disc; } .c-search__results::-webkit-scrollbar { width: 0 !important; background: transparent; } .c-search__resultsList { width: 100%; height: 100%; overflow-y: scroll; list-style: none; color: #121515; -ms-overflow-style: none; scrollbar-width: none; margin: auto 0; } .c-search__resultsList::-webkit-scrollbar { width: 0 !important; background: transparent; } .c-search__resultsItem { margin-bottom: 16px; } .c-search__resultsItem > a { border-bottom: 1px solid #000; display: block; padding-bottom: 16px; text-decoration: none; } @media (min-width: 768px) { .c-search__resultsItem > a { padding-bottom: 24px; } } @media (min-width: 768px) { .c-search__resultsItem { margin-bottom: 24px; } } .c-search__resultsItem .c-accordion__question, .c-search__resultsPageTitle { font-family: Dream Orphan, sans-serif; font-size: 2rem; font-weight: 700; line-height: 1; } .c-search__resultsItem .c-accordion__question { font-family: transducer-variable, sans-serif; font-size: 1.5rem; } .c-search__resultsItem .c-accordion__answer, .c-search__resultsPageDescription { font-family: transducer-variable, sans-serif; font-size: clamp(1rem, 2vw, 1.125rem); font-weight: 400; margin-top: 4px; margin-bottom: 0; } .c-search__resultsItem .c-accordion__answer *, .c-search__resultsPageDescription * { font-family: inherit; font-size: inherit; font-weight: inherit; } @media (min-width: 768px) { .c-search__resultsItem .c-accordion__answer, .c-search__resultsPageDescription { margin-top: 10px; } } .c-search__buttonClose { cursor: pointer; aspect-ratio: 1; width: 100%; } .c-search__button { display: block; position: absolute; top: -80px; right: 16px; width: 32px; height: 32px; padding: 0; margin-left: auto; background-repeat: no-repeat; background-position: 50%; z-index: 40; } @media (min-width: 768px) { .c-search__button { top: -100px; right: 6.72%; width: 48px; height: 48px; } } span[data-search-result-count] { color: #000; display: block; font-weight: 700; margin-top: 48px; margin-bottom: 16px; } span[data-search-result-count], span[data-search-result-count] h3 { font-family: transducer-variable, sans-serif; font-size: clamp(0.75rem, 4vw, 1rem); line-height: 1; text-transform: uppercase; } span[data-search-result-count] h3 { font-weight: 900; } span[data-search-result-count] > span { display: block; margin-bottom: 24px; } @media (min-width: 768px) { span[data-search-result-count] { margin-top: 32px; margin-bottom: 24px; } } .c-search__queryItem:not(:first-child) { margin-top: 8px; } @media (min-width: 768px) { .c-search__queryItem:not(:first-child) { margin-top: 16px; } } .c-search__query { font-family: transducer-variable, sans-serif; font-size: clamp(1rem, 4vw, 1.5rem); font-weight: 400; text-decoration: none; line-height: 1.4; } .c-newsletter__container { width: 100%; max-width: 1920px; padding-top: 140px; padding-bottom: 70px; } @media (min-width: 768px) { .c-newsletter__container { margin: 0 6.72%; } } @media (min-width: 768px) { .c-newsletter__container .o-grid__column { padding-left: 0; } } .c-newsletter__imageContainer { padding-top: 40px; position: relative; } @media (min-width: 768px) { .c-newsletter__imageContainer { padding-top: 0; } } .c-newsletter__title { margin-bottom: 75px; } .c-newsletter__text { margin-right: 20px; } .c-newsletter__form { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .c-newsletter__input { width: 100%; height: 48px; border: 1px solid #121515; border-radius: 3px; padding-left: 2px; } .c-newsletter__subscribe { width: 110px; margin-top: 40px; } .c-newsletter__checkboxContainer { display: block; position: relative; width: 24px; height: 24px; margin-right: 20px; } .c-newsletter__labelCheckbox { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: block; position: relative; padding-left: 35px; margin-bottom: 12px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .c-newsletter__labelCheckbox input:checked ~ .c-newsletter__checkmark:after { display: block; } .c-newsletter__checkbox { position: absolute; opacity: 0; height: 0; width: 0; } .c-newsletter__checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; border: 2px solid #121515; border-radius: 3px; } .c-newsletter__checkmark:after { content: ""; position: absolute; display: none; left: 9px; top: 5px; width: 5px; height: 10px; border: solid; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .c-newsLetter__squiggle { position: absolute; width: 180px; left: -30px; bottom: 20px; z-index: -1; } .c-newsLetter__swirl { position: absolute; width: 210px; top: 0; right: -50px; z-index: -1; } .c-mainposter { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin: 0 25px; max-width: 1036px; } @media (min-width: 768px) { .c-mainposter { margin: 0 6.72%; } } .c-homehero__wrapper + .c-mainposter { margin: 0 25px; } @media (min-width: 768px) { .c-homehero__wrapper + .c-mainposter { margin: 0 6.72%; } } .c-mainposter__title { margin-top: 75px; } .c-notFound__wrapper { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; background-repeat: no-repeat; background-size: 100%; background-position: bottom; } @media (min-width: 768px) { .c-notFound__wrapper { height: 100vh; background-position: 50%; } } .c-notFound__container { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 1920px; margin: 0 auto; } .c-notFound__title { padding-bottom: 36px; } .c-notFound__text { margin-bottom: 0; } .c-notFound__button { margin-top: 30px; } .c-notFound__textContent { padding-top: 179px; margin-bottom: 179px; } .c-colorHighlight { position: absolute; top: 0; left: 0; right: 0; z-index: -1; } .activate-sub .c-colorHighlight { -webkit-animation: fadeInStroke 1s ease; animation: fadeInStroke 1s ease; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } @-webkit-keyframes fadeInStroke { 0% { clip-path: circle(0 at 50% 50%); -webkit-clip-path: circle(0 at 50% 50%); } to { clip-path: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%); } } @keyframes fadeInStroke { 0% { clip-path: circle(0 at 50% 50%); -webkit-clip-path: circle(0 at 50% 50%); } to { clip-path: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%); } } .c-gbs_lineups { text-align: center; padding: 5.375rem 5%; width: 100%; } .c-gbs_lineups h2 { margin-bottom: 30px; } .c-gbs_lineups-content { width: 100%; max-width: 1920px; margin: 0 auto; } #goevent-web #gc__ .gc__general-colors-primVariable__background, .gc_no-touchevents #goevent-web #gc__ .gc__general-colors-primAccent__background_hover:hover { background: !important; } .c-image-tab-module, .c-image-tab-module--flipped { margin: 80px 0; width: 100%; padding: 0 25px; position: relative; } @media (min-width: 768px) { .c-image-tab-module, .c-image-tab-module--flipped { margin: 0; padding: 0 6.72%; } } @media (min-width: 1664px) { .c-image-tab-module, .c-image-tab-module--flipped { padding: 0 calc(50vw - 720px); } } .c-image-tab-module:before { content: ""; aspect-ratio: 904/964; position: absolute; width: 65%; max-width: 904px; height: auto; left: 0; background-image: url("https://media.web.aegpresents.com/content/coachella-2023/image-tab-background-trees-left.png"); background-repeat: no-repeat; background-size: 100% 100%; z-index: -1; } @media (min-width: 768px) { .c-image-tab-module:before { width: 50%; } } @media (min-width: 768px) { .c-image-tab-module:after { content: ""; aspect-ratio: 464/392; position: absolute; width: 50%; max-width: 464px; height: auto; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: #ff9c03; background-repeat: no-repeat; background-size: 100% 100%; -webkit-filter: blur(406px); filter: blur(406px); z-index: -2; } } .c-image-tab-module--flipped:before { content: ""; aspect-ratio: 400/982; position: absolute; width: 65%; max-width: 400px; height: auto; right: 0; background-image: url("https://media.web.aegpresents.com/content/coachella-2023/image-tab-background-trees-right.png"); background-repeat: no-repeat; background-size: 100% 100%; z-index: -1; } @media (min-width: 768px) { .c-image-tab-module--flipped:before { width: 50%; } } @media (min-width: 768px) { .c-image-tab-module--flipped:after { content: ""; aspect-ratio: 590/498; position: absolute; width: 50%; max-width: 590px; height: auto; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: #fe9179; background-repeat: no-repeat; background-size: 100% 100%; -webkit-filter: blur(406px); filter: blur(406px); z-index: -2; } } .c-image-tab-module__content-img { border-radius: 24px 8px; height: 100%; margin-bottom: 16px; width: 100%; } .c-image-tab-module__img-top { top: 25%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 15%; } .c-image-tab-module__img-bottom { top: -15%; left: 30%; } .c-image-tab-module__img-container { border-radius: 24px 8px; position: relative; width: 100%; max-width: 200px; pointer-events: none; z-index: 1; } .c-image-tab-module__img-container:after { content: ""; display: block; padding-top: 100%; } .c-image-tab-module__img-container:before { -webkit-animation: setZIndexWithDelay 0.6s 0.5s forwards; animation: setZIndexWithDelay 0.6s 0.5s forwards; border-radius: inherit; content: ""; position: absolute; inset: 0; background: -webkit-gradient(linear, left bottom, left top, from(rgba(180, 223, 223, 0.7)), to(rgba(180, 223, 223, 0.7))); background: linear-gradient(0deg, rgba(180, 223, 223, 0.7), rgba(180, 223, 223, 0.7)); opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; z-index: 5; } .c-image-tab-module__images-container { display: none; height: 100%; position: relative; } .c-image-tab-module__info-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; cursor: pointer; margin-top: 28px; position: relative; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.4s; transition: -webkit-transform 0.4s; transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s; pointer-events: none; } .c-image-tab-module--flipped .c-image-tab-module__content-container { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .c-image-tab-module__info-copy { margin: 9px 0 0; } .c-image-tab-module__info-header { margin: 0; } .c-image-tab-module__info-container:before { border-left: 1px solid #ff9c03; content: ""; height: 100%; left: -30px; position: absolute; top: 0; opacity: 0; -webkit-transition: opacity 0.4s; transition: opacity 0.4s; } .c-image-tab-module__inner { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: grid; } @media (min-width: 768px) { .c-image-tab-module__content-img { display: none; } .c-image-tab-module__img { border-radius: inherit; height: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; width: 100%; } .c-image-tab-module__images-container { display: block; } .c-image-tab-module__img-container { border-radius: 24px 8px; cursor: pointer; max-width: 250px; pointer-events: auto; } .c-image-tab-module__info-container { max-width: 344px; padding: 5px 0; pointer-events: auto; } .show.c-image-tab-module__info-container:before { opacity: 1; } .show.c-image-tab-module__img-container { z-index: 5; } .show.c-image-tab-module__img-container:before { opacity: 0; } .show.c-image-tab-module__info-container { -webkit-transform: translateX(30px); transform: translateX(30px); } .c-image-tab-module__inner { gap: 50px; grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1200px) { .c-image-tab-module__img-container { max-width: 370px; } } @-webkit-keyframes setZIndexWithDelay { to { z-index: 1; } } @keyframes setZIndexWithDelay { to { z-index: 1; } } .c-support-search__wrapper { max-width: 1920px; position: relative; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 200px 0 0; } .c-support-search__container, .c-support-search__wrapper { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; color: #121515; } .c-support-search__container { border-bottom: 2px solid #94b0ad; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .c-support-search__icon { width: 25px; height: 25px; margin-right: 17px; } @media (min-width: 768px) { .c-support-search__icon { width: 40px; height: 40px; margin-right: 30px; } } .c-support-search__input { color: #121515; font-family: Carena, sans-serif; font-size: clamp(1.25rem, 4vw, 3rem); line-height: 1.09375; width: 100%; border: none; background-color: transparent; -webkit-font-variant-ligatures: none; font-variant-ligatures: none; } .c-support-search__input::-webkit-input-placeholder { color: inherit; opacity: 0.15; } .c-support-search__input::-moz-placeholder { color: inherit; opacity: 0.15; } .c-support-search__input::-ms-input-placeholder { color: inherit; opacity: 0.15; } .c-support-search__input::placeholder { color: inherit; opacity: 0.15; } @media (min-width: 768px) { .c-support-search__input { line-height: 1.08333333; } } .c-support-search__results { display: none; padding: 50px 0; max-width: 1920px; margin: 0 6.72%; position: relative; } .c-support-search__results.show { display: block; width: 100%; } @media (min-width: 768px) { .c-support-search__results { padding: 100px 0 64px; } } span[data-support-search-result-count] { font-family: "pt-serif", sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.375; } .show.c-support-search__results + .c-l2-header__anchorContainer { display: none; } .c-lottie-meta-data { height: 0; opacity: 0; position: absolute; visibility: hidden; width: 0; } .c-lottie-target { position: absolute; z-index: 1; } #c-lottie__palm-trees { position: absolute; z-index: 9; top: 30rem; left: -2rem; background: url("https://media-prd.coachella.com/content/coachella-2024/illustration-palm-trees.svg"); width: 324px; max-width: 30%; min-width: 104px; aspect-ratio: 235/476; background-size: contain; background-repeat: no-repeat; pointer-events: none; } @media (min-width: 1024px) { #c-lottie__palm-trees { top: 30rem; left: -11rem; } } @media (min-width: 1250px) { #c-lottie__palm-trees { top: 24rem; } } #c-lottie__ferris-wheel { z-index: 9; position: absolute; top: 28rem; right: -2rem; width: 400px; max-width: 25%; aspect-ratio: 840/1200; pointer-events: none; } @media (min-width: 350px) { #c-lottie__ferris-wheel { max-width: 35%; } } @media (min-width: 768px) { #c-lottie__ferris-wheel { max-width: 25%; } } @media (min-width: 1024px) { #c-lottie__ferris-wheel { right: -6rem; } } #c-lottie__dandelion { display: none; position: absolute; bottom: -10px; right: 3.72%; pointer-events: none; background-size: contain; background-repeat: no-repeat; background: url("https://media-prd.coachella.com/content/coachella-2024/illustration-dandelion-with-seeds.svg"); height: 425px; aspect-ratio: 390/420; } @media (min-width: 768px) { #c-lottie__dandelion { display: block; } } .c-news { margin: 48px 0; max-width: 1920px; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; width: 100%; } .c-news, .c-news.animate { opacity: 1; visibility: visible; } @media (min-width: 768px) { .c-news { margin: 96px auto; padding: 0 6.72%; } } @media (min-width: 1024px) { .c-news { margin-top: 128px; } } .c-news-card { z-index: 2; aspect-ratio: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 450px; opacity: 1; position: relative; padding: 24px 40px; } .c-news-card.animate { -webkit-animation: fade-in 1.75s forwards; animation: fade-in 1.75s forwards; } .c-news-card .curtains-wrap { position: absolute; z-index: -1; top: -5px; left: 0; } @media (min-width: 768px) { .c-news-card .curtains-wrap { top: -55px; left: -40px; } } @media (min-width: 1024px) { .c-news-card .curtains-wrap { top: -5px; left: 0; } } @media (min-width: 1250px) { .c-news-card .curtains-wrap { top: -55px; left: -40px; } } @media (min-width: 1440px) { .c-news-card .curtains-wrap { top: -5px; left: 0; } } .c-news-card .blob-grid-1 { width: 405px; height: 405px; } @media (min-width: 768px) { .c-news-card .blob-grid-1 { width: calc(340px + 4.5vw); height: calc(340px + 4.5vw); } } .c-news-card .blob-grid-2 { width: 390.6px; height: 403.2px; } @media (min-width: 768px) { .c-news-card .blob-grid-2 { width: calc(340px + 4.5vw); height: calc(351px + 4.5vw); } } .c-news-card .blob-grid-3 { width: 393.3px; height: 382.5px; } @media (min-width: 768px) { .c-news-card .blob-grid-3 { width: calc(340px + 4.5vw); height: calc(331px + 4.5vw); } } .c-news-card .blob-grid-4 { width: 403.2px; height: 403.2px; } @media (min-width: 768px) { .c-news-card .blob-grid-4 { width: calc(340px + 4.5vw); height: calc(340px + 4.5vw); } } .c-news-card .blob-grid-5 { width: 389.7px; height: 393.3px; } @media (min-width: 768px) { .c-news-card .blob-grid-5 { width: calc(340px + 4.5vw); height: calc(343px + 4.5vw); } } .c-news-card .blob-grid-6 { width: 401.4px; height: 426.6px; } @media (min-width: 768px) { .c-news-card .blob-grid-6 { width: calc(340px + 4.5vw); height: calc(361px + 4.5vw); } } @media (min-width: 1024px) { .c-news-card { padding: 24px; } } .c-news-card__bg-img { aspect-ratio: 1; height: 100%; inset: 0; left: 50%; -o-object-fit: cover; object-fit: cover; overflow: visible; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; z-index: -1; } .c-news-card__btn { margin-bottom: 25px; margin-top: 40px; font-size: 0.875rem; } .c-news-card__image { max-width: 320px; width: calc(100% - 30px); } @media (min-width: 768px) { .c-news-card__image { max-width: 350px; width: calc(100% - 16px); } } .c-news-card__inner { text-decoration: none; pointer-events: none; } .c-news-card__content { margin-top: 24px; } @media (min-width: 768px) { .c-news-card__content { margin-top: 17px; } } .c-news-card__copy { margin-top: 8px; } .c-news-card__copy p { all: inherit; font-size: 14px; } @media (min-width: 1250px) { .c-news-card__copy p { font-size: 16px; } } .c-news__content { display: grid; gap: 30px; place-content: center; } @media (min-width: 768px) { .c-news__content { gap: 100px; grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .c-news__content { gap: 40px 70px; } } @media (min-width: 1250px) { .c-news__content { gap: 70px 120px; grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1440px) { .c-news__content { gap: 70px 100px; } } .c-news__title { left: 16px; position: relative; z-index: -1; } @media (min-width: 768px) { .c-news__title { left: 0; } } @-webkit-keyframes fade-in { 0% { opacity: 0; } to { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } to { opacity: 1; } } .curtains__canvas { position: fixed; top: 0; right: 0; left: 0; bottom: 0; opacity: 0; -webkit-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in; pointer-events: none; } .curtains__planes-loaded .curtains__canvas { opacity: 1; } .curtains__content { position: relative; z-index: 1; -webkit-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in; } .curtains__planes { opacity: 0; -webkit-transition: opacity 0.5s ease-in; transition: opacity 0.5s ease-in; } .curtains__planes-loaded .curtains__planes { opacity: 1; } .curtains__plane-wrapper { position: relative; } .curtains__plane { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .curtains__plane img { display: none; } .no-curtains .curtains__plane { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; } .no-curtains .curtains__plane img { display: block; min-width: 100%; min-height: 100%; -o-object-fit: contain; object-fit: contain; } .u-responsive-image { max-width: 100%; height: auto; } .u-image { width: 100%; height: auto; } .u-sticky-header { position: fixed; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 0; z-index: 100; } .u-padding-top-128 { padding-top: 128px; } .u-padding-bottom-128 { padding-bottom: 128px; } .u-padding-bottom-0 { padding-bottom: 0; } .u-margin-top-minus--50sm { margin-top: -50px; } @media (min-width: 768px) { .u-margin-top-minus--50sm { margin-top: 0; } } .u-font-caption { font-weight: 400; line-height: 1.375; } .u-font-caption, .u-font-caption--bold { font-family: transducer-variable, sans-serif; font-size: 0.875rem; } .u-font-caption--bold { font-weight: 700; line-height: 1.21428571; } .u-font-eyebrow { font-size: clamp(0.75rem, 3vw, 1rem); } .u-font-eyebrow, .u-font-eyebrow--lg { font-family: transducer-variable, sans-serif; font-weight: 900; line-height: 1; } .u-font-eyebrow--lg { font-size: clamp(0.75rem, 3vw, 1.5rem); } @media (min-width: 1250px) { .u-font-h1--override { font-size: 10.5rem; line-height: 1; } } .u-font-h3--override { font-weight: 700; } .u-font-label { font-size: 0.75rem; } .u-font-label, .u-font-label--lg { font-family: transducer-variable, sans-serif; font-weight: 500; line-height: 1; } .u-font-label--lg { font-size: clamp(0.75rem, 3vw, 1rem); } .u-font-p1 { font-family: transducer-variable, sans-serif; font-size: clamp(0.75rem, 3vw, 1.5rem); font-weight: 400; line-height: 1.375; } .u-font-p1--bold { line-height: 1.08333333; } .u-font-p1--bold, .u-font-p1--bold-override { font-family: transducer-variable, sans-serif; font-size: clamp(0.75rem, 3vw, 1.5rem); font-weight: 400; font-weight: 700; } .u-font-p1--bold-override { line-height: 1.3; } @media (min-width: 768px) { .u-font-p1--bold-override { font-size: 1.25rem; } } .u-font-p2 { font-weight: 400; line-height: 1.375; } .u-font-p2, .u-font-p2--bold { font-family: transducer-variable, sans-serif; font-size: clamp(0.75rem, 3vw, 1rem); } .u-font-p2--bold { font-weight: 700; line-height: 1.1875; } .u-font-subtitle { font-family: transducer-variable, sans-serif; font-size: clamp(0.75rem, 3vw, 1.5rem); font-weight: 400; } @media (min-width: 768px) { .u-font-subtitle { font-weight: 700; } } /*! Flickity v2.2.1 https://flickity.metafizzy.co ---------------------------------------------- */ .flickity-enabled { position: relative; } .flickity-enabled:focus { outline: none; } .flickity-viewport { position: relative; height: 100%; } .flickity-slider { position: absolute; width: 100%; height: 100%; } .flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab; } .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing; } .flickity-button { background: hsla(0, 0%, 100%, 0.75); color: #333; position: absolute; border: 1px solid #000; -webkit-transition: all 0.3s; transition: all 0.3s; } .flickity-button:hover { cursor: pointer; } .flickity-button:focus { outline: none; -webkit-box-shadow: 0 0 0 5px #19f; box-shadow: 0 0 0 5px #19f; } .flickity-button:active { opacity: 0.6; } .flickity-button:disabled { opacity: 0.3; cursor: auto; pointer-events: none; } .flickity-button-icon { fill: currentColor; } .flickity-prev-next-button { top: 50%; width: 44px; height: 44px; border-radius: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .flickity-rtl .flickity-prev-next-button.previous { left: auto; right: 10px; } .flickity-rtl .flickity-prev-next-button.next { right: auto; left: 10px; } .flickity-prev-next-button .flickity-button-icon { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 40%; height: 40%; } .flickity-prev-next-button.next:hover .flickity-button-icon { -webkit-animation: animateFlickitySlideForward 1s forwards; animation: animateFlickitySlideForward 1s forwards; } .flickity-prev-next-button.previous:hover .flickity-button-icon { -webkit-animation: animateFlickitySlideReverse 1s forwards; animation: animateFlickitySlideReverse 1s forwards; } @-webkit-keyframes animateFlickitySlideForward { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } 55% { -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); } to { opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @keyframes animateFlickitySlideForward { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } 55% { -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); } to { opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @-webkit-keyframes animateFlickitySlideReverse { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); } 55% { -webkit-transform: translateY(-50%); transform: translateY(-50%); } to { opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @keyframes animateFlickitySlideReverse { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); } 55% { -webkit-transform: translateY(-50%); transform: translateY(-50%); } to { opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } .fancybox-container { background: rgba(0, 0, 0, 0.9) !important; } .fancybox-bg { background: transparent !important; z-index: 99995 !important; } .fancybox-stage { z-index: 99999; }