.header_section {
margin-bottom: 100px;
}
#ctl00_mainSection.container .row {
padding: 4px 28px 0 !important;
}
#ctl00_mainSection{
//max-width: none;
padding: 0px !important;
scroll-margin-top: 0 !important;
margin-top: 0 !important;
}
/*
#ctl00_divContent{
padding: 0px !important;
margin: 0px !important;
}
*/
/* ===== INFAMOUS SPIEGEL BIG TOP — index.css ===== */
/* Body section components live here as classes so the HTML
can be pasted into CKEditor without inline styles being mangled. */
/* --- Base reset --- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
background: #0a0a12;
color: #e2e2f0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
overflow-x: hidden;
}
::placeholder {
color: rgba(255, 255, 255, 0.3);
}
@keyframes pulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(0.85);
}
}
/* ==========================================================
TYPOGRAPHY UTILITIES
========================================================== */
.ifm-label {
color: #e8b464;
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
font-weight: 600;
margin: 0 0 12px;
}
.ifm-label-tight {
margin-bottom: 10px;
}
.ifm-label-loose {
margin-bottom: 14px;
}
/* ==========================================================
SECTION WRAPPERS
========================================================== */
.ifm-sec-dark {
padding: 100px 0;
background: #0a0a12;
position: relative;
}
.ifm-sec-darker {
padding: 100px 0;
background: #07070f;
}
.ifm-sec-video {
padding: 120px 0;
background: #07070f;
position: relative;
overflow: hidden;
}
.ifm-sec-calendar {
padding: 80px 0;
background: linear-gradient(180deg, #0a0a12 0%, #0f0a15 100%);
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ifm-sec-about {
padding: 100px 0;
background: linear-gradient(180deg, #07070f 0%, #0a0a12 100%);
}
/* Shared section-header blocks */
.ifm-section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 56px;
}
.ifm-section-header-center {
text-align: center;
margin-bottom: 56px;
}
.ifm-section-header-center-sm {
text-align: center;
margin-bottom: 48px;
}
/* ==========================================================
HERO
========================================================== */
.ifm-hero {
position: relative;
min-height: 100vh;
padding: 80px 0 60px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: #07070f;
}
.ifm-hero::before {
content: "";
position: absolute;
inset: 0;
background: rgba(7, 7, 15, 0.16);
z-index: 1;
pointer-events: none;
}
.ifm-hero::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at center, rgba(7, 7, 15, 0.08) 0%, rgba(7, 7, 15, 0.38) 62%, rgba(7, 7, 15, 0.72) 100%),
linear-gradient(180deg, rgba(7, 7, 15, 0.22) 0%, transparent 34%, transparent 72%, rgba(7, 7, 15, 0.88) 100%);
z-index: 1;
pointer-events: none;
}
.ifm-hero-video-bg {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 56.25vw;
min-width: 177.78vh;
min-height: 100vh;
transform: translate(-50%, -50%);
z-index: 0;
pointer-events: none;
background: #07070f;
opacity: 0;
transition: opacity 0.8s ease;
}
.ifm-hero-video-bg.ifm-video-ready {
opacity: 1;
}
#ifm-yt-player,
.ifm-hero-video-bg iframe {
width: 100%;
height: 100%;
border: 0;
pointer-events: none;
}
.ifm-hero-video-shield {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: auto;
}
.ifm-hero-title {
font-family: 'Bebas Neue', Impact, sans-serif;
font-weight: 400;
font-size: clamp(44px, 9vw, 120px);
line-height: 0.9;
letter-spacing: 2px;
margin: 0 0 12px;
color: #ffffff;
text-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
}
.ifm-hero-title-accent {
background: linear-gradient(135deg, #e8b464 0%, #d4412d 50%, #b03028 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
.ifm-hero-lead {
font-size: clamp(16px, 2vw, 22px);
color: #c9c9d4;
max-width: 640px;
margin: 0 auto 40px;
font-weight: 300;
letter-spacing: 1px;
}
.ifm-hero-ctas {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.ifm-hero-stats {
margin-top: 80px;
display: flex;
gap: 40px;
justify-content: center;
flex-wrap: wrap;
padding-top: 40px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ifm-hero-stat {
text-align: center;
}
.ifm-hero-stat-num {
font-family: 'Bebas Neue', sans-serif;
font-size: 36px;
color: #e8b464;
line-height: 1;
}
.ifm-hero-stat-label {
font-size: 11px;
letter-spacing: 2px;
color: #9393a8;
text-transform: uppercase;
margin-top: 4px;
}
.ifm-hero-scroll {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, 0.4);
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
z-index: 2;
}
.ifm-hero-scroll::after {
content: "";
width: 1px;
height: 40px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), transparent);
}
/* ==========================================================
BUTTONS
========================================================== */
.ifm-btn-primary,
.ifm-btn-ghost {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 36px;
text-decoration: none;
font-weight: 700;
letter-spacing: 2px;
font-size: 14px;
text-transform: uppercase;
border-radius: 4px;
transition: all 0.3s;
}
.ifm-btn-primary {
background: linear-gradient(135deg, #d4412d, #b03028);
color: #fff;
box-shadow: 0 10px 30px rgba(212, 65, 45, 0.35);
border: 1px solid transparent;
}
.ifm-btn-ghost {
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.4);
}
.ifm-btn-sm {
padding: 14px 30px;
font-size: 13px;
}
.ifm-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 15px 40px rgba(212, 65, 45, 0.5);
filter: brightness(1.1);
color: #fff;
}
.ifm-btn-ghost:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #e8b464;
color: #e8b464;
}
.ifm-btn-arrow {
font-size: 18px;
}
/* Arrow link (gold text with underline) */
.ifm-link-arrow {
color: #e8b464;
text-decoration: none;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600;
border-bottom: 1px solid #e8b464;
padding-bottom: 4px;
transition: color 0.2s, border-color 0.2s;
}
.ifm-link-arrow:hover {
color: #fff;
border-bottom-color: #fff;
}
/* ==========================================================
MARQUEE STRIP
========================================================== */
.ifm-marquee-strip {
background: #d4412d;
padding: 14px 0;
overflow: hidden;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.ifm-marquee {
display: flex;
gap: 60px;
white-space: nowrap;
font-family: 'Bebas Neue', sans-serif;
font-size: 22px;
letter-spacing: 4px;
color: #fff;
animation: ifm-marquee 40s linear infinite;
will-change: transform;
}
.ifm-marquee:hover {
animation-play-state: paused;
}
@keyframes ifm-marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* ==========================================================
EVENTS HEADER (injected inside #ctl00_mainSection)
========================================================== */
.ifm-events-header {
padding: 72px 0 28px;
}
.ifm-events-header .container {
position: relative;
}
.ifm-events-header .container::before {
content: "◆ Now Playing";
display: block;
margin-bottom: 10px;
color: #e8b464;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 4px;
line-height: 1.2;
text-transform: uppercase;
}
.ifm-events-title {
font-family: 'Bebas Neue', Impact, sans-serif;
font-weight: 400;
font-size: clamp(40px, 6vw, 72px);
line-height: 1;
letter-spacing: 2px;
color: #fff;
margin: 0;
text-transform: uppercase;
}
@media (max-width: 768px) {
.ifm-events-header {
padding: 48px 0 20px;
}
}
/* ==========================================================
SECTION TITLES (Bebas Neue h2 variants)
========================================================== */
.ifm-h2-lg {
font-family: 'Bebas Neue', sans-serif;
font-weight: 400;
font-size: clamp(40px, 6vw, 72px);
color: #fff;
line-height: 1;
margin: 0;
letter-spacing: 2px;
}
.ifm-h2-md {
font-family: 'Bebas Neue', sans-serif;
font-weight: 400;
font-size: clamp(36px, 5vw, 56px);
color: #fff;
line-height: 1;
margin: 0;
letter-spacing: 2px;
}
.ifm-h2-video {
font-family: 'Bebas Neue', sans-serif;
font-weight: 400;
font-size: clamp(40px, 6vw, 72px);
color: #fff;
line-height: 1;
margin: 0 0 18px;
letter-spacing: 2px;
}
.ifm-h2-lead {
color: #9393a8;
font-size: 16px;
max-width: 560px;
margin: 0 auto;
font-weight: 300;
}
/* ==========================================================
EVENTS RAIL
========================================================== */
.ifm-sec-events-rail {
padding: 100px 0;
//background: #0a0a12;
overflow: hidden;
}
.ifm-sec-events-rail-alt {
background: #07070f;
}
.ifm-events-rail-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 42px;
}
.ifm-events-rail-wrap {
position: relative;
}
.ifm-events-rail {
display: flex;
gap: 24px;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scrollbar-width: none;
//padding: 4px 2px 20px;
}
.ifm-events-rail::-webkit-scrollbar {
display: none;
}
.ifm-event-card {
flex: 0 0 calc((100% - 48px) / 3);
scroll-snap-align: start;
background: #100d16;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.38);
}
.ifm-event-card-media {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #1a0a10;
}
.ifm-event-card-media img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 0.5s ease;
}
.ifm-event-card:hover .ifm-event-card-media img {
transform: scale(1.06);
}
.ifm-event-card-body {
padding: 24px;
}
.ifm-event-meta,
.ifm-event-date {
color: #e8b464;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
line-height: 1.35;
text-transform: uppercase;
}
.ifm-event-title {
font-family: 'Bebas Neue', Impact, sans-serif;
font-weight: 400;
font-size: 42px;
line-height: 0.95;
letter-spacing: 1px;
color: #fff;
margin: 10px 0;
}
.ifm-event-date {
color: #c9c9d4;
margin-bottom: 14px;
}
.ifm-event-desc {
color: #9393a8;
font-size: 14px;
line-height: 1.7;
min-height: 72px;
margin: 0 0 22px;
}
.ifm-scroll-btn {
position: absolute;
top: 50%;
z-index: 3;
width: 46px;
height: 72px;
border: 1px solid rgba(232, 180, 100, 0.5);
border-radius: 4px;
background: rgba(212, 65, 45, 0.92);
color: #fff;
font-size: 42px;
line-height: 1;
transform: translateY(-50%);
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.ifm-scroll-btn:hover,
.ifm-scroll-btn:focus {
background: #d4412d;
border-color: #e8b464;
color: #fff;
outline: none;
}
.ifm-scroll-btn[hidden] {
display: none;
}
.ifm-scroll-btn-left {
left: -18px;
}
.ifm-scroll-btn-right {
right: -18px;
}
/* ==========================================================
EVENT TILES (What's On)
========================================================== */
.ifm-tile {
display: block;
position: relative;
height: 480px;
border-radius: 6px;
overflow: hidden;
text-decoration: none;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
background: #1a0a10;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.ifm-tile::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 10, 18, 0.2) 0%, rgba(10, 10, 18, 0.4) 40%, rgba(10, 10, 18, 0.95) 100%);
pointer-events: none;
z-index: 1;
}
.ifm-tile:hover {
transform: translateY(-6px);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(232, 180, 100, 0.3);
}
.ifm-tile:hover .ifm-tile-bg {
transform: scale(1.08);
}
/* Dark color fallbacks behind each tile image */
.ifm-tile--infamous {
background: #1a0a10;
}
.ifm-tile--ashtons {
background: #0d1518;
}
.ifm-tile--jimeoin {
background: #0c111a;
}
.ifm-tile--music {
background: #140a1a;
}
.ifm-tile--hughes {
background: #1a1008;
}
.ifm-tile--special {
background: #08141a;
}
.ifm-tile-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.6s ease;
}
.ifm-tile-badge {
position: absolute;
top: 20px;
left: 20px;
padding: 6px 12px;
color: #fff;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 700;
border-radius: 3px;
z-index: 2;
}
.ifm-tile-badge--red {
background: #d4412d;
}
.ifm-tile-badge--gold {
background: #e8b464;
color: #0a0a12;
}
.ifm-tile-badge--blue {
background: #4a7ab8;
}
.ifm-tile-badge--purple {
background: #9b4bcb;
}
.ifm-tile-badge--orange {
background: #e07a2f;
}
.ifm-tile-badge--teal {
background: #2ea39a;
}
.ifm-tile-body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 28px;
z-index: 2;
}
.ifm-tile-category {
color: #e8b464;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 8px;
}
.ifm-tile-title {
font-family: 'Bebas Neue', sans-serif;
font-weight: 400;
font-size: 48px;
color: #fff;
margin: 0 0 10px;
line-height: 0.95;
letter-spacing: 1px;
}
.ifm-tile-title--md {
font-size: 44px;
}
.ifm-tile-title--sm {
font-size: 42px;
}
.ifm-tile-excerpt {
color: #c9c9d4;
font-size: 14px;
margin: 0 0 18px;
line-height: 1.5;
}
.ifm-tile-meta {
display: flex;
align-items: center;
justify-content: space-between;
}
.ifm-tile-time {
color: #9393a8;
font-size: 12px;
letter-spacing: 1px;
}
.ifm-tile-cta {
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
/* ==========================================================
VIDEO SHOWCASE
========================================================== */
.ifm-sec-video::before {
content: "";
position: absolute;
top: -100px;
left: -100px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(212, 65, 45, 0.15), transparent 70%);
filter: blur(40px);
pointer-events: none;
z-index: 0;
}
.ifm-sec-video::after {
content: "";
position: absolute;
bottom: -100px;
right: -100px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(232, 180, 100, 0.12), transparent 70%);
filter: blur(40px);
pointer-events: none;
z-index: 0;
}
.ifm-sec-video>.container {
position: relative;
z-index: 2;
}
.ifm-video-wrap {
max-width: 1100px;
margin: 0 auto;
position: relative;
}
.ifm-video-wrap::before {
content: "";
position: absolute;
inset: -2px;
background: linear-gradient(135deg, #e8b464, #d4412d, #b03028);
border-radius: 10px;
opacity: 0.6;
filter: blur(20px);
pointer-events: none;
z-index: 0;
}
.ifm-video-frame {
position: relative;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(232, 180, 100, 0.3);
background: #000;
z-index: 1;
}
.ifm-video-ratio {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.ifm-video-ratio iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* ==========================================================
CALENDAR
========================================================== */
.ifm-day {
position: relative;
padding: 24px 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
text-align: center;
transition: all 0.3s;
}
.ifm-day-featured {
background: rgba(212, 65, 45, 0.12);
border-color: rgba(212, 65, 45, 0.4);
}
.ifm-day:hover {
transform: translateY(-4px);
border-color: rgba(232, 180, 100, 0.5);
background: rgba(232, 180, 100, 0.06);
}
.ifm-day-weekday {
color: #9393a8;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
}
.ifm-day-featured .ifm-day-weekday {
color: #e8b464;
}
.ifm-day-date {
font-family: 'Bebas Neue', sans-serif;
font-size: 40px;
color: #fff;
line-height: 1;
margin: 4px 0;
}
.ifm-day-show {
color: #e8b464;
font-size: 12px;
font-weight: 600;
margin-top: 10px;
}
.ifm-day-time {
color: #9393a8;
font-size: 11px;
}
.ifm-day-tag {
position: absolute;
top: 10px;
right: 10px;
display: inline-flex;
align-items: center;
padding: 4px 8px;
border-radius: 999px;
background: #e8b464;
color: #0a0a12;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
line-height: 1;
}
.ifm-day-tag-upcoming {
background: rgba(232, 180, 100, 0.16);
color: #f3d9a4;
border: 1px solid rgba(232, 180, 100, 0.3);
}
.ifm-day-tag-today {
background: #e8b464;
color: #0a0a12;
}
.ifm-day-tag-ended {
background: rgba(147, 147, 168, 0.14);
color: #c8c8d8;
border: 1px solid rgba(147, 147, 168, 0.25);
}
.ifm-day-today {
background: rgba(232, 180, 100, 0.12);
border-color: rgba(232, 180, 100, 0.45);
box-shadow: 0 0 0 1px rgba(232, 180, 100, 0.18);
}
.ifm-day-today .ifm-day-weekday,
.ifm-day-today .ifm-day-time {
color: #f1d29a;
}
.ifm-day-upcoming {
border-color: rgba(232, 180, 100, 0.2);
}
.ifm-day-ended {
opacity: 0.72;
}
.ifm-day-ended .ifm-day-show {
color: #b2b2c2;
}
.ifm-cal-footer {
text-align: center;
margin-top: 40px;
}
.ifm-cal-link {
display: inline-flex;
align-items: center;
gap: 10px;
color: #fff;
text-decoration: none;
padding: 14px 32px;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 4px;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600;
transition: all 0.3s;
}
.ifm-cal-link:hover {
border-color: #e8b464;
color: #e8b464;
}
/* ==========================================================
VENUE INFO CARDS
========================================================== */
.ifm-info-card {
padding: 36px 28px;
background: linear-gradient(180deg, rgba(232, 180, 100, 0.08), transparent);
border: 1px solid rgba(232, 180, 100, 0.15);
border-radius: 6px;
height: 100%;
}
.ifm-info-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(232, 180, 100, 0.15);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
font-size: 22px;
}
.ifm-info-title {
font-family: 'Bebas Neue', sans-serif;
font-weight: 400;
font-size: 24px;
color: #fff;
letter-spacing: 1px;
margin: 0 0 10px;
}
.ifm-info-body {
color: #9393a8;
font-size: 14px;
margin: 0;
line-height: 1.6;
}
/* ==========================================================
ABOUT SECTION
========================================================== */
.ifm-about-hero-copy {
margin-bottom: 36px;
}
.ifm-about-hero-copy .ifm-hero-title {
font-size: clamp(44px, 6vw, 86px);
margin-bottom: 16px;
}
.ifm-about-hero-copy .ifm-hero-lead {
max-width: 620px;
margin: 0 0 28px;
}
.ifm-about-hero-copy .ifm-hero-stats {
justify-content: flex-start;
gap: 28px;
margin-top: 0;
margin-bottom: 0;
padding-top: 24px;
}
.ifm-sec-about .row {
align-items: stretch !important;
}
.ifm-sec-about .col-lg-6:first-child {
display: flex;
}
.ifm-about-media {
position: relative;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
min-height: 0;
}
.ifm-about-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.ifm-about-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 50%, rgba(212, 65, 45, 0.3));
pointer-events: none;
}
.ifm-about-badge {
position: absolute;
bottom: 20px;
left: 20px;
padding: 8px 14px;
background: rgba(7, 7, 15, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(232, 180, 100, 0.3);
border-radius: 3px;
color: #e8b464;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600;
z-index: 2;
}
.ifm-about-title {
font-family: 'Bebas Neue', sans-serif;
font-weight: 400;
font-size: clamp(40px, 5vw, 64px);
color: #fff;
line-height: 1;
margin: 0 0 24px;
letter-spacing: 2px;
}
.ifm-about-body {
color: #c9c9d4;
font-size: 16px;
line-height: 1.8;
margin-bottom: 18px;
}
.ifm-about-body-sm {
color: #9393a8;
font-size: 15px;
line-height: 1.8;
margin-bottom: 32px;
}
.ifm-about-ctas {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
/* ==========================================================
TESTIMONIALS
========================================================== */
.ifm-testimonial-card {
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.ifm-testimonial-card:hover {
transform: translateY(-4px);
border-color: rgba(232, 180, 100, 0.4) !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
}
.ifm-rating::before {
content: "\2605\2605\2605\2605\2605";
}
/* ==========================================================
TICKETS CTA BAND
========================================================== */
.ifm-sec-tickets {
padding: 100px 0;
background: linear-gradient(135deg, #b03028 0%, #d4412d 50%, #7a1e18 100%);
position: relative;
overflow: hidden;
}
.ifm-sec-tickets::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
radial-gradient(circle at 80% 80%, rgba(232, 180, 100, 0.2) 0%, transparent 40%);
pointer-events: none;
}
.ifm-tickets-inner {
position: relative;
z-index: 2;
text-align: center;
}
.ifm-tickets-title {
font-family: 'Bebas Neue', sans-serif;
font-weight: 400;
font-size: clamp(42px, 7vw, 84px);
color: #fff;
line-height: 1;
margin: 0 0 20px;
letter-spacing: 2px;
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}
.ifm-tickets-lead {
font-size: 18px;
color: rgba(255, 255, 255, 0.9);
max-width: 560px;
margin: 0 auto 36px;
font-weight: 300;
}
.ifm-btn-dark {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 20px 48px;
background: #07070f;
color: #fff;
text-decoration: none;
font-weight: 800;
letter-spacing: 3px;
font-size: 15px;
text-transform: uppercase;
border-radius: 4px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
transition: all 0.3s;
}
.ifm-btn-dark:hover {
transform: translateY(-2px);
box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55);
color: #e8b464;
}
.ifm-btn-dark-arrow {
font-size: 20px;
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media (max-width: 768px) {
.ifm-hero {
min-height: 100vh;
}
.ifm-marquee {
font-size: 16px;
gap: 40px;
}
.ifm-sec-dark,
.ifm-sec-darker,
.ifm-sec-about,
.ifm-sec-tickets,
.ifm-sec-testimonials {
padding: 60px 0 !important;
}
.ifm-sec-video {
padding: 72px 0;
}
.ifm-sec-events-rail {
padding: 40px 0;
}
.ifm-events-rail-header {
align-items: flex-start;
flex-direction: column;
margin-bottom: 32px;
}
.ifm-scroll-btn {
width: 40px;
height: 58px;
font-size: 34px;
}
.ifm-scroll-btn-left {
left: 4px;
}
.ifm-scroll-btn-right {
right: 4px;
}
.ifm-event-card {
flex-basis: min(420px, 82vw);
}
.ifm-section-header {
margin-bottom: 40px;
}
.ifm-tile-title {
font-size: 40px;
}
.ifm-tile-title--md {
font-size: 36px;
}
.ifm-tile-title--sm {
font-size: 34px;
}
}
@media (max-width: 991.98px) {
.ifm-sec-about .row {
align-items: center !important;
}
.ifm-sec-about .col-lg-6:first-child {
display: block;
}
.ifm-about-media {
aspect-ratio: 4 / 5;
height: auto;
}
}
@media (max-width: 576px) {
.ifm-tile {
height: 420px;
}
}
/* ===== NAVBAR — targets existing element classes/IDs only ===== */
/* Header HTML is static. Styling only via class/ID selectors. */
#ctl00_nav,
#ctl00_nav.navbar-custom,
#ctl00_nav.navbar-dark {
position: fixed !important;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1000;
background: transparent !important;
background-image: linear-gradient(180deg, rgba(7, 7, 15, 0.85) 0%, rgba(7, 7, 15, 0.55) 60%, rgba(7, 7, 15, 0) 100%) !important;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-bottom: none !important;
box-shadow: none !important;
padding: 0 !important;
min-height: 84px;
transition: background-image 0.3s ease;
}
#ctl00_navContainer {
display: flex;
align-items: center !important;
padding: 14px 40px !important;
max-width: 1600px;
margin: 0 auto;
width: 100%;
}
/* ── Logo ── */
#ctl00_A1 {
display: flex !important;
align-items: center;
text-decoration: none !important;
padding: 0 !important;
margin-right: 2rem !important;
}
#ctl00_imgLogo {
display: flex !important;
align-items: center;
}
#ctl00_imgLogo > div,
#ctl00_imgLogoMobile > div {
display: flex;
align-items: center;
line-height: 0;
}
#ctl00_imgLogo img,
#ctl00_imgLogoMobile img {
height: 102px !important;
width: auto !important;
max-width: 220px;
object-fit: contain;
aspect-ratio: auto !important;
filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
transition: transform 0.3s ease, filter 0.3s ease;
}
#ctl00_A1:hover img {
transform: scale(1.03);
filter: drop-shadow(0 4px 14px rgba(232, 180, 100, 0.3));
}
#ctl00_imgLogoMobile img {
height: 42px !important;
}
/* ── Nav collapse / list ── */
#ctl00_nav .navbar-collapse {
display: flex !important;
align-items: center;
flex: 1;
}
#ctl00_nav .navbar-nav {
display: flex;
align-items: center;
gap: 0.25rem;
list-style: none;
margin: 0;
padding: 0;
}
#ctl00_nav .nav-item {
list-style: none;
}
#ctl00_nav .nav-link {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 0.75rem !important;
font-weight: 700 !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
color: rgba(255, 255, 255, 0.8) !important;
text-decoration: none;
padding: 0.6rem 1.1rem !important;
transition: color 0.2s ease;
white-space: nowrap;
position: relative;
}
#ctl00_nav .nav-link::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 2px;
background: #e8b464;
transition: width 0.3s ease, left 0.3s ease;
}
#ctl00_nav .nav-link:hover,
#ctl00_nav .nav-link:focus {
color: #e8b464 !important;
background: transparent !important;
}
#ctl00_nav .nav-link:hover::after {
width: 60%;
left: 20%;
}
/* Dropdown */
#ctl00_nav .dropdown-menu {
background: rgba(7, 7, 15, 0.96) !important;
border: 1px solid rgba(232, 180, 100, 0.2) !important;
border-radius: 4px !important;
padding: 8px 0 !important;
backdrop-filter: blur(12px);
margin-top: 8px !important;
min-width: 180px;
}
#ctl00_nav .dropdown-menu .nav-link {
padding: 10px 20px !important;
}
#ctl00_nav .dropdown-toggle::after {
content: "" !important;
position: static !important;
display: inline-block !important;
width: 10px !important;
height: 10px !important;
margin-left: 8px !important;
vertical-align: middle !important;
border: none !important;
background-color: transparent !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
transition: transform 0.3s ease !important;
left: auto !important;
bottom: auto !important;
}
#ctl00_nav .dropdown-toggle:hover::after,
#ctl00_nav .show > .dropdown-toggle::after {
transform: translateY(2px);
}
/* Kill the hover underline on dropdown menu items */
#ctl00_nav .dropdown-menu .nav-link::after {
display: none !important;
content: none !important;
}
/* ── Top-right action buttons (Book Tickets / My Account) ── */
#ctl00_nav .top_rhs_button {
display: flex !important;
align-items: center;
gap: 0.75rem;
margin-left: auto;
}
#ctl00_nav .top_rhs_button .mx-3 {
display: none !important;
}
#ctl00_nav .top_rhs_button .rounded-btn-custom {
display: inline-flex !important;
align-items: center;
gap: 0.55rem;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 0.72rem !important;
font-weight: 700 !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
padding: 0.72rem 1.4rem !important;
border-radius: 4px !important;
text-decoration: none !important;
white-space: nowrap;
transition: all 0.3s ease;
line-height: 1;
}
#ctl00_nav .top_rhs_button .rounded-btn-custom .fa {
font-size: 0.85rem;
margin-left: 2px;
}
/* Primary action — Book Tickets (red gradient) */
#ctl00_nav #ctl00_hlBookTickets.rounded-btn-custom {
background: linear-gradient(135deg, #d4412d, #b03028) !important;
color: #fff !important;
border: 1px solid transparent !important;
box-shadow: 0 6px 18px rgba(212, 65, 45, 0.35);
}
#ctl00_nav #ctl00_hlBookTickets.rounded-btn-custom:hover,
#ctl00_nav #ctl00_hlBookTickets.rounded-btn-custom:focus {
background: linear-gradient(135deg, #e8502f, #c03525) !important;
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(212, 65, 45, 0.5);
filter: brightness(1.05);
}
/* Secondary action — My Account (gold outline) */
#ctl00_nav #ctl00_hlAccount.rounded-btn-custom {
background: transparent !important;
color: #e8b464 !important;
border: 1px solid rgba(232, 180, 100, 0.5) !important;
}
#ctl00_nav #ctl00_hlAccount.rounded-btn-custom:hover,
#ctl00_nav #ctl00_hlAccount.rounded-btn-custom:focus {
background: rgba(232, 180, 100, 0.1) !important;
color: #fff !important;
border-color: #e8b464 !important;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(232, 180, 100, 0.2);
}
@media (max-width: 991px) {
#ctl00_nav .top_rhs_button {
flex-direction: column;
align-items: stretch;
gap: 0.6rem;
width: 100%;
margin: 0.75rem 0 0 !important;
padding-top: 0.75rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#ctl00_nav .top_rhs_button .rounded-btn-custom {
justify-content: center;
width: 100%;
padding: 0.85rem 1.25rem !important;
}
}
/* Social icons */
#ctl00_nav .nav-link-social-custom {
color: rgba(255, 255, 255, 0.6) !important;
}
#ctl00_nav .nav-link-social-custom:hover {
color: #e8b464 !important;
}
#ctl00_nav .nav-link-social-custom::after {
display: none;
}
/* ── Mobile toggler ── */
#ctl00_nav .navbar-toggler {
border: 1px solid rgba(232, 180, 100, 0.4) !important;
border-radius: 4px !important;
padding: 0.45rem 0.65rem !important;
background: rgba(7, 7, 15, 0.6) !important;
margin-left: auto;
}
#ctl00_nav .navbar-toggler:focus {
box-shadow: 0 0 0 2px rgba(232, 180, 100, 0.3) !important;
}
#ctl00_nav .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(232,180,100,0.9)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
width: 22px;
height: 22px;
}
/* ── Mobile collapse ── */
@media (max-width: 991px) {
#ctl00_navContainer {
padding: 12px 20px !important;
}
#ctl00_A1::before {
font-size: 24px;
}
#ctl00_A1::after {
font-size: 9px;
max-width: 70px;
}
#ctl00_nav .navbar-collapse {
background: rgba(7, 7, 15, 0.98);
backdrop-filter: blur(20px);
border-top: 1px solid rgba(232, 180, 100, 0.15);
padding: 20px 24px 24px;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: flex-start;
gap: 0.4rem;
}
#ctl00_nav .navbar-collapse:not(.show) {
display: none !important;
}
#ctl00_nav .navbar-nav {
flex-direction: column;
align-items: flex-start;
width: 100%;
gap: 0;
margin-left: 0 !important;
}
#ctl00_nav .nav-link {
padding: 0.85rem 0 !important;
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
#ctl00_nav .nav-link::after {
display: none;
}
#ctl00_nav .dropdown-menu {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 0 0 16px !important;
}
}
/* ===== FOOTER — targets existing element classes/IDs only ===== */
/* Footer HTML is static. Styling only via class/ID selectors. */
footer {
position: relative;
background: #050509;
background-image:
radial-gradient(ellipse at top left, rgba(212, 65, 45, 0.1), transparent 55%),
radial-gradient(ellipse at bottom right, rgba(232, 180, 100, 0.07), transparent 55%);
border-top: 1px solid rgba(232, 180, 100, 0.18);
color: rgba(255, 255, 255, 0.6);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
overflow: hidden;
}
footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(232, 180, 100, 0.6) 20%, #d4412d 50%, rgba(232, 180, 100, 0.6) 80%, transparent 100%);
}
footer section {
padding: 5rem 0 2.5rem !important;
position: relative;
z-index: 2;
}
footer .container {
max-width: 1100px;
}
/* Collapse the empty sponsors block so it doesn't leave a gap */
footer .sponsors:empty {
display: none;
}
/* ── Contact block ── */
.fw-contact {
max-width: 720px;
margin: 0 auto 3.5rem;
padding: 3rem 2.5rem;
background:
linear-gradient(180deg, rgba(232, 180, 100, 0.04), rgba(212, 65, 45, 0.04));
border: 1px solid rgba(232, 180, 100, 0.18);
border-radius: 10px;
position: relative;
overflow: hidden;
}
.fw-contact::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #e8b464, #d4412d, #e8b464, transparent);
opacity: 0.7;
}
.fw-contact .container {
padding: 0;
max-width: 100%;
}
.fw-contact .k {
font-family: 'Bebas Neue', Impact, sans-serif;
font-size: 0.75rem;
letter-spacing: 4px;
color: #e8b464;
text-transform: uppercase;
margin-bottom: 0.75rem;
}
.fw-contact .k strong {
font-weight: 400;
}
.fw-contact h2 {
font-family: 'Bebas Neue', Impact, sans-serif;
font-size: 2.25rem;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
margin: 0 0 1rem;
background: linear-gradient(135deg, #fff 0%, #e8b464 60%, #d4412d 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
.fw-contact p {
color: rgba(255, 255, 255, 0.65);
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: 1.5rem;
}
.fw-contact p:last-child {
margin-bottom: 0;
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
/* ── Contact buttons ── */
.btn-contact,
.btn-contact-outline {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
padding: 0.85rem 1.9rem;
border-radius: 4px;
text-decoration: none !important;
transition: all 0.3s ease;
white-space: nowrap;
}
.btn-contact {
background: linear-gradient(135deg, #d4412d, #b03028);
color: #fff !important;
border: 1px solid transparent;
box-shadow: 0 6px 18px rgba(212, 65, 45, 0.3);
}
.btn-contact:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(212, 65, 45, 0.5);
filter: brightness(1.08);
color: #fff !important;
}
.btn-contact-outline {
background: transparent;
color: #e8b464 !important;
border: 1px solid rgba(232, 180, 100, 0.45);
}
.btn-contact-outline:hover {
background: rgba(232, 180, 100, 0.08);
border-color: #e8b464;
color: #fff !important;
transform: translateY(-2px);
}
/* ── Newsletter ── */
footer h3 {
font-family: 'Bebas Neue', Impact, sans-serif;
font-size: 1.65rem;
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
color: #fff;
margin: 1rem 0 1rem;
text-align: center;
}
footer h3 strong {
font-weight: 400;
background: linear-gradient(135deg, #e8b464, #d4412d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
footer h3::before,
footer h3::after {
content: "◆";
display: inline-block;
color: #e8b464;
font-size: 0.7rem;
vertical-align: middle;
margin: 0 0.75rem;
opacity: 0.7;
}
footer .col-md-12 > p {
text-align: center;
font-size: 0.9rem;
line-height: 1.7;
max-width: 560px;
margin: 0 auto 1.5rem;
}
#idIframe {
display: block;
margin: 1rem auto 0;
width: 100%;
max-width: 560px;
background: transparent;
border-radius: 6px;
}
/* ── Copyright / bottom bar ── */
footer .container > div:last-child {
border-top: 1px solid rgba(232, 180, 100, 0.12);
padding-top: 2rem;
margin-top: 2.5rem;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.4);
text-align: center;
line-height: 2;
text-transform: uppercase;
}
footer .container > div:last-child a,
#ctl00_footer_hlPoweredBy,
#ctl00_footer_hlPrivacy,
#ctl00_footer_hlTandCs,
#ctl00_footer_hlAdmin {
color: #e8b464;
text-decoration: none;
transition: color 0.2s ease;
font-weight: 600;
}
footer .container > div:last-child a:hover,
#ctl00_footer_hlPoweredBy:hover,
#ctl00_footer_hlPrivacy:hover,
#ctl00_footer_hlTandCs:hover,
#ctl00_footer_hlAdmin:hover {
color: #fff;
}
footer .text-muted {
color: rgba(255, 255, 255, 0.6) !important;
}
/* ── Responsive ── */
@media (max-width: 768px) {
footer section {
padding: 3.5rem 0 2rem !important;
}
.fw-contact {
padding: 2.25rem 1.5rem;
margin-bottom: 2.5rem;
}
.fw-contact h2 {
font-size: 1.75rem;
}
.fw-contact p:last-child {
flex-direction: column;
align-items: stretch;
}
.btn-contact,
.btn-contact-outline {
width: 100%;
padding: 0.9rem 1.25rem;
}
footer h3 {
font-size: 1.35rem;
letter-spacing: 2px;
}
#idIframe {
max-width: 100%;
}
footer .container > div:last-child {
font-size: 0.66rem;
line-height: 2.2;
}
}
/* Event Details Override */
body.ifm-event-detail-page {
background:
radial-gradient(circle at top center, rgba(212, 65, 45, 0.22), transparent 30%),
radial-gradient(circle at bottom left, rgba(232, 180, 100, 0.12), transparent 28%),
linear-gradient(180deg, #090912 0%, #0c0914 100%) !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
background-size: cover !important;
color: #dddcea !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
body.ifm-event-detail-page #ctl00_mainSection.content {
position: relative;
padding: 48px 0 88px;
}
body.ifm-event-detail-page #ctl00_divContent {
position: relative;
z-index: 1;
--bs-gutter-x: 40px;
--bs-gutter-y: 40px;
align-items: flex-start;
}
body.ifm-event-detail-page .ifm-event-content,
body.ifm-event-detail-page .ifm-event-sidebar {
position: relative;
}
body.ifm-event-detail-page .ifm-event-content-inner,
body.ifm-event-detail-page .ifm-event-sidebar .sticky-custom {
background: linear-gradient(180deg, rgba(18, 16, 30, 0.96), rgba(12, 10, 22, 0.94));
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
backdrop-filter: blur(16px);
}
body.ifm-event-detail-page .ifm-event-content-inner {
padding: 34px 30px 38px;
}
body.ifm-event-detail-page .ifm-event-sidebar .sticky-custom {
top: 120px !important;
padding: 22px;
}
body.ifm-event-detail-page .event_headline {
margin: 0 0 22px !important;
color: #fff;
font-family: 'Bebas Neue', Impact, sans-serif;
font-size: clamp(3rem, 6vw, 5.75rem);
font-weight: 400;
letter-spacing: 1.5px;
line-height: 0.92;
text-transform: uppercase;
}
body.ifm-event-detail-page .event_headline::before {
content: "◆ Event Details";
display: block;
margin-bottom: 12px;
color: #e8b464;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 4px;
line-height: 1.2;
text-transform: uppercase;
}
body.ifm-event-detail-page .ifm-event-content p,
body.ifm-event-detail-page .ifm-event-content li {
color: #bebdd0;
font-size: 15px;
line-height: 1.8;
}
body.ifm-event-detail-page .ifm-event-content ul {
padding-left: 20px;
margin-bottom: 18px;
}
body.ifm-event-detail-page .ifm-event-content h4,
body.ifm-event-detail-page .event-dates h4,
body.ifm-event-detail-page .event-prices h4 {
margin: 28px 0 14px;
color: #fff !important;
font-family: 'Bebas Neue', Impact, sans-serif;
font-size: 28px;
font-weight: 400;
letter-spacing: 1px;
line-height: 1;
text-transform: uppercase;
}
body.ifm-event-detail-page .event-dates h4 a,
body.ifm-event-detail-page .event-prices h4 a,
body.ifm-event-detail-page .event-dates h4 i,
body.ifm-event-detail-page .event-prices h4 i {
color: #fff !important;
}
body.ifm-event-detail-page .ifm-event-content figure,
body.ifm-event-detail-page .ifm-event-content iframe,
body.ifm-event-detail-page .ifm-event-sidebar img {
display: block;
width: 100% !important;
max-width: 100% !important;
border-radius: 10px;
overflow: hidden;
}
body.ifm-event-detail-page .ifm-event-content figure {
margin: 18px 0 22px;
padding: 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
}
body.ifm-event-detail-page .ifm-event-content img {
height: auto;
}
body.ifm-event-detail-page #ctl00_ContentPlaceHolder1_imgEventGroupImage {
margin: 0 0 18px !important;
box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
}
body.ifm-event-detail-page .dates_venue_tickets {
margin: 0;
padding: 24px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
}
body.ifm-event-detail-page .dates_venue_tickets h2[itemprop="name"] {
margin: 0 0 12px;
color: #fff;
font-family: 'Bebas Neue', Impact, sans-serif;
font-size: clamp(2.2rem, 4vw, 3.4rem);
font-weight: 400;
letter-spacing: 1px;
line-height: 0.95;
text-transform: uppercase;
}
body.ifm-event-detail-page .dates_venue_tickets p {
margin-bottom: 12px;
color: #cbc9da;
font-size: 16px;
}
body.ifm-event-detail-page .dates_venue_tickets .times,
body.ifm-event-detail-page .dates_venue_tickets .tickets {
margin-top: 12px;
}
body.ifm-event-detail-page .dates_venue_tickets strong[itemprop="name"] {
display: inline-block;
color: #e8b464;
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
}
body.ifm-event-detail-page .btn.btn-primary.btn-block,
body.ifm-event-detail-page .btn.btn-primary.w-100 {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
border: none !important;
border-radius: 10px !important;
background: linear-gradient(135deg, #d4412d, #b52917) !important;
box-shadow: 0 18px 32px rgba(212, 65, 45, 0.32);
color: #fff !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
}
body.ifm-event-detail-page .btn.btn-primary.btn-block:hover,
body.ifm-event-detail-page .btn.btn-primary.w-100:hover {
transform: translateY(-1px);
filter: brightness(1.04);
}
body.ifm-event-detail-page hr {
margin: 26px 0;
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
opacity: 1;
}
body.ifm-event-detail-page .event-dates,
body.ifm-event-detail-page .event-prices {
margin-top: 10px;
padding: 22px 24px 24px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 10px;
}
body.ifm-event-detail-page .event-dates h4,
body.ifm-event-detail-page .event-prices h4 {
margin: 0 0 18px;
}
body.ifm-event-detail-page .table,
body.ifm-event-detail-page .event-dates .table,
body.ifm-event-detail-page .event-prices .table {
margin-bottom: 0;
color: #d8d6e3 !important;
border-color: rgba(255, 255, 255, 0.08);
}
body.ifm-event-detail-page .table> :not(caption)>*>* {
padding: 16px 18px;
background: transparent !important;
border-color: rgba(255, 255, 255, 0.08);
box-shadow: none;
color: #d8d6e3 !important;
}
body.ifm-event-detail-page .event-dates .table td,
body.ifm-event-detail-page .event-prices .table td,
body.ifm-event-detail-page .event-dates .table th,
body.ifm-event-detail-page .event-prices .table th {
color: #d8d6e3 !important;
}
body.ifm-event-detail-page .table-striped>tbody>tr:nth-of-type(odd)>* {
background: rgba(255, 255, 255, 0.02) !important;
}
body.ifm-event-detail-page .priceAdditionDetails,
body.ifm-event-detail-page .priceAdditionIndicate {
color: #e8b464;
}
body.ifm-event-detail-page .extraInfo,
body.ifm-event-detail-page .card.extraInfo {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
color: #d9d8e6;
}
@media (max-width: 991.98px) {
body.ifm-event-detail-page #ctl00_mainSection.content {
padding: 26px 0 72px;
}
body.ifm-event-detail-page .ifm-event-content-inner {
padding: 24px 20px 28px;
}
body.ifm-event-detail-page .ifm-event-sidebar .sticky-custom {
position: static !important;
top: auto !important;
padding: 18px;
}
body.ifm-event-detail-page .event_headline {
font-size: clamp(2.4rem, 11vw, 4rem);
}
}
@media (max-width: 575.98px) {
body.ifm-event-detail-page #ctl00_mainSection.content::before {
width: calc(100vw - 24px);
border-radius: 10px;
}
body.ifm-event-detail-page .dates_venue_tickets,
body.ifm-event-detail-page .event-dates,
body.ifm-event-detail-page .event-prices,
body.ifm-event-detail-page .ifm-event-content-inner,
body.ifm-event-detail-page .ifm-event-sidebar .sticky-custom {
border-radius: 16px;
}
}
/* ==========================================================
NEWSLETTER WIDGET — legacy /subscribe/?widget=true iframe
Load this stylesheet inside the subscribe widget page so it
inherits the Infamous look-and-feel.
========================================================== */
/* --- Text inputs --- */
#ctl00_ContentPlaceHolder1_NewsletterSignup_txtSignupAddress,
#ctl00_ContentPlaceHolder1_NewsletterSignup_txtFirstName,
#ctl00_ContentPlaceHolder1_NewsletterSignup_txtPostcode,
form#aspnetForm input.form-control {
display: block !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 14px 16px !important;
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
border-radius: 10px !important;
box-shadow: none !important;
color: #fff !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: 0.3px !important;
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
-webkit-appearance: none;
appearance: none;
}
form#aspnetForm input.form-control::placeholder {
color: #8a8a9c;
font-weight: 400;
letter-spacing: 0.5px;
}
form#aspnetForm input.form-control:hover {
border-color: rgba(255, 255, 255, 0.25) !important;
background: rgba(255, 255, 255, 0.06) !important;
}
form#aspnetForm input.form-control:focus {
outline: none !important;
border-color: #e8b464 !important;
background: rgba(255, 255, 255, 0.07) !important;
box-shadow: 0 0 0 3px rgba(232, 180, 100, 0.18) !important;
color: #fff !important;
}
/* Autofill override (Chrome) */
form#aspnetForm input.form-control:-webkit-autofill,
form#aspnetForm input.form-control:-webkit-autofill:hover,
form#aspnetForm input.form-control:-webkit-autofill:focus {
-webkit-text-fill-color: #fff !important;
-webkit-box-shadow: 0 0 0 1000px #13111f inset !important;
caret-color: #fff !important;
}
/* --- Submit button --- */
#ctl00_ContentPlaceHolder1_NewsletterSignup_btnSignup,
form#aspnetForm input.sign_up_button,
form#aspnetForm input.btn.btn-primary {
display: block !important;
width: 100% !important;
margin: 6px 0 0 !important;
padding: 16px 24px !important;
background: linear-gradient(135deg, #d4412d 0%, #b52917 100%) !important;
border: none !important;
border-radius: 10px !important;
box-shadow: 0 14px 30px rgba(212, 65, 45, 0.32) !important;
color: #fff !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
cursor: pointer;
transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
float: none !important;
-webkit-appearance: none;
appearance: none;
}
#ctl00_ContentPlaceHolder1_NewsletterSignup_btnSignup:hover,
form#aspnetForm input.sign_up_button:hover {
transform: translateY(-1px);
filter: brightness(1.05);
box-shadow: 0 18px 36px rgba(212, 65, 45, 0.42) !important;
}
#ctl00_ContentPlaceHolder1_NewsletterSignup_btnSignup:active,
form#aspnetForm input.sign_up_button:active {
transform: translateY(0);
filter: brightness(0.95);
}
#ctl00_ContentPlaceHolder1_NewsletterSignup_btnSignup:focus-visible,
form#aspnetForm input.sign_up_button:focus-visible {
outline: 2px solid #e8b464;
outline-offset: 3px;
}
/* --- Success / thank-you message (shown after postback) --- */
form#aspnetForm .alert-success,
form#aspnetForm .thank-you,
form#aspnetForm .success-message {
margin: 0 !important;
padding: 16px 18px !important;
background: rgba(120, 180, 100, 0.12) !important;
border: 1px solid rgba(120, 180, 100, 0.45) !important;
border-radius: 10px !important;
color: #c6e5b1 !important;
font-size: 14px !important;
}
/* Scrollbar nicety if the iframe body overflows */
body::-webkit-scrollbar {
width: 6px;
}
body::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 3px;
}
/* =====================================================
CAST / LINEUP PAGE
Styled to match the Infamous Spiegel Big Top theme
(Bebas Neue + Inter, gold/red accents on deep navy).
Targets the untouchable legacy HTML by class/id only.
===================================================== */
/* --- Main section wrapper --- */
#ctl00_mainSection.content {
background: #07070f;
padding-bottom: 100px !important;
position: relative;
overflow: hidden;
}
/* Soft ambient glows behind the grid (matches ifm-sec-video vibe) */
#ctl00_mainSection.content::before {
content: "";
position: absolute;
top: 120px;
left: -150px;
width: 420px;
height: 420px;
background: radial-gradient(circle, rgba(212, 65, 45, 0.18), transparent 70%);
filter: blur(60px);
pointer-events: none;
z-index: 0;
}
#ctl00_mainSection.content::after {
content: "";
position: absolute;
bottom: 80px;
right: -180px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(232, 180, 100, 0.12), transparent 70%);
filter: blur(60px);
pointer-events: none;
z-index: 0;
}
/* =====================================================
PAGE HEADER — injected via ::before on the container
(no HTML edits required)
===================================================== */
#ctl00_ContentPlaceHolder1_scheduleFeed_pnlBootstrapGrid {
position: relative;
z-index: 1;
max-width: 1200px;
padding: 80px 24px 20px !important;
margin-top: 0 !important;
}
#ctl00_ContentPlaceHolder1_scheduleFeed_pnlBootstrapGrid::before {
content: "◆ The Infamous Cast";
display: block;
color: #e8b464;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
text-align: center;
margin-bottom: 56px;
}
/* =====================================================
ARTIST GRID
===================================================== */
#ctl00_ContentPlaceHolder1_scheduleFeed_pnlRow {
--bs-gutter-x: 2rem;
--bs-gutter-y: 2.5rem;
position: relative;
z-index: 1;
}
/* --- Each artist card --- */
#ctl00_ContentPlaceHolder1_scheduleFeed_pnlRow .ifm-cast-card {
position: relative;
background: #100d16;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
overflow: hidden;
padding-bottom: 22px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
cursor: default;
}
#ctl00_ContentPlaceHolder1_scheduleFeed_pnlRow .ifm-cast-card:hover {
transform: translateY(-6px);
border-color: rgba(232, 180, 100, 0.45);
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(232, 180, 100, 0.25);
}
/* --- Image treatment: grayscale → color on hover --- */
#ctl00_ContentPlaceHolder1_scheduleFeed_pnlRow .ifm-cast-card img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
object-fit: cover;
filter: grayscale(0.85) brightness(0.85) contrast(1.05);
transition: filter 0.5s ease, transform 0.6s ease;
}
#ctl00_ContentPlaceHolder1_scheduleFeed_pnlRow .ifm-cast-card:hover img {
filter: grayscale(0) brightness(1) contrast(1);
transform: scale(1.04);
}
/* Subtle gradient wash over the image to blend into the card body */
#ctl00_ContentPlaceHolder1_scheduleFeed_pnlRow .ifm-cast-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
aspect-ratio: 3 / 4;
background: linear-gradient(180deg,
transparent 0%,
transparent 55%,
rgba(16, 13, 22, 0.55) 85%,
#100d16 100%);
pointer-events: none;
z-index: 1;
transition: opacity 0.4s ease;
}
/* Gold corner accent that appears on hover */
#ctl00_ContentPlaceHolder1_scheduleFeed_pnlRow .ifm-cast-card::after {
content: "";
position: absolute;
top: 14px;
right: 14px;
width: 14px;
height: 14px;
border-top: 2px solid #e8b464;
border-right: 2px solid #e8b464;
opacity: 0;
transform: translate(6px, -6px);
transition: opacity 0.35s ease, transform 0.35s ease;
z-index: 2;
}
#ctl00_ContentPlaceHolder1_scheduleFeed_pnlRow .ifm-cast-card:hover::after {
opacity: 1;
transform: translate(0, 0);
}
/* --- Artist name / role --- */
#ctl00_ContentPlaceHolder1_scheduleFeed_pnlRow .ifm-cast-card p.primary-font-custom {
position: relative;
z-index: 2;
font-family: 'Bebas Neue', Impact, sans-serif !important;
font-weight: 400 !important;
font-size: 22px !important;
line-height: 1.15 !important;
letter-spacing: 2.5px !important;
color: #fff !important;
padding: 0 20px;
margin: 18px 0 0 !important;
transition: color 0.3s ease;
}
#ctl00_ContentPlaceHolder1_scheduleFeed_pnlRow .ifm-cast-card:hover p.primary-font-custom {
color: #e8b464 !important;
}
/* Thin gold underline below the name on hover */
#ctl00_ContentPlaceHolder1_scheduleFeed_pnlRow .ifm-cast-card p.primary-font-custom::after {
content: "";
display: block;
width: 28px;
height: 2px;
background: #e8b464;
margin: 10px auto 0;
opacity: 0.35;
transition: width 0.35s ease, opacity 0.35s ease;
}
#ctl00_ContentPlaceHolder1_scheduleFeed_pnlRow .ifm-cast-card:hover p.primary-font-custom::after {
width: 56px;
opacity: 1;
}
/* =====================================================
RESPONSIVE
===================================================== */
@media (max-width: 991.98px) {
#ctl00_ContentPlaceHolder1_scheduleFeed_pnlBootstrapGrid {
padding: 60px 20px 20px !important;
}
#ctl00_ContentPlaceHolder1_scheduleFeed_pnlBootstrapGrid::before {
margin-bottom: 40px;
}
#ctl00_ContentPlaceHolder1_scheduleFeed_pnlRow {
--bs-gutter-x: 1.25rem;
--bs-gutter-y: 1.75rem;
}
#ctl00_ContentPlaceHolder1_scheduleFeed_pnlRow .col p.primary-font-custom {
font-size: 19px !important;
letter-spacing: 2px !important;
}
}
@media (max-width: 576px) {
#ctl00_ContentPlaceHolder1_scheduleFeed_pnlBootstrapGrid::before {
font-size: 11px;
letter-spacing: 3px;
margin-bottom: 32px;
}
#ctl00_ContentPlaceHolder1_scheduleFeed_pnlRow .col img {
aspect-ratio: 4 / 5;
}
}
/* =====================================================
GALLERY PAGE
Themed to match the Infamous Spiegel Big Top look
(Bebas Neue + Inter, gold/red on deep navy).
Targets the legacy untouchable HTML by class/id only.
===================================================== */
/* --- Main section wrapper --- */
#ctl00_mainSection.content {
background: #07070f;
padding-top: 0 !important;
padding-bottom: 100px !important;
position: relative;
overflow: hidden;
}
/* Soft ambient glows in the background */
#ctl00_mainSection.content::before {
content: "";
position: absolute;
top: 140px;
left: -160px;
width: 420px;
height: 420px;
background: radial-gradient(circle, rgba(212, 65, 45, 0.16), transparent 70%);
filter: blur(60px);
pointer-events: none;
z-index: 0;
}
#ctl00_mainSection.content::after {
content: "";
position: absolute;
bottom: 100px;
right: -180px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(232, 180, 100, 0.12), transparent 70%);
filter: blur(60px);
pointer-events: none;
z-index: 0;
}
/*
#ctl00_divContent {
position: relative;
z-index: 1;
}
*/
/* =====================================================
PAGE TITLE — "All Galleries"
(Pushes clear of the fixed navbar and gets the
Bebas Neue display treatment used across the site.)
===================================================== */
#ctl00_divContentColumnOne > h1 {
font-family: 'Bebas Neue', Impact, sans-serif;
font-weight: 400;
font-size: clamp(44px, 7vw, 84px);
line-height: 1;
letter-spacing: 3px;
color: #fff;
text-align: center;
text-transform: uppercase;
margin: 0 auto;
padding: 120px 24px 16px;
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
position: relative;
}
/* Gold eyebrow above the title */
#ctl00_divContentColumnOne > h1::before {
content: "◆ The Archive";
display: block;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 4px;
color: #e8b464;
margin-bottom: 14px;
text-shadow: none;
}
/* Short gold rule under the title */
#ctl00_divContentColumnOne > h1::after {
content: "";
display: block;
width: 64px;
height: 2px;
background: linear-gradient(90deg, transparent, #e8b464, transparent);
margin: 22px auto 0;
}
/* =====================================================
GALLERY GRID
===================================================== */
#ctl00_ContentPlaceHolder1_galleryMain.vn-gallery {
padding: 40px 16px 0 !important;
max-width: 1200px;
margin: 0 auto;
}
#ctl00_ContentPlaceHolder1_galleryMain .gallery {
--bs-gutter-x: 2rem;
--bs-gutter-y: 2rem;
}
/* --- Gallery card --- */
#ctl00_ContentPlaceHolder1_galleryMain .card.bg-dark {
background: #100d16 !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 10px !important;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
#ctl00_ContentPlaceHolder1_galleryMain .card.bg-dark:hover {
transform: translateY(-6px);
border-color: rgba(232, 180, 100, 0.45) !important;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(232, 180, 100, 0.25);
}
/* --- Card image --- */
#ctl00_ContentPlaceHolder1_galleryMain .card-img {
opacity: 1 !important;
filter: grayscale(0.4) brightness(0.7);
transition: filter 0.5s ease, transform 0.6s ease;
border-radius: 0 !important;
aspect-ratio: 16 / 10;
object-fit: cover;
width: 100%;
display: block;
transform-origin: center bottom;
margin-bottom: -1px;
}
#ctl00_ContentPlaceHolder1_galleryMain .card.bg-dark:hover .card-img {
filter: grayscale(0) brightness(0.9);
transform: scale(1.04);
}
/* --- Image overlay (title + description sitting on top of image) --- */
#ctl00_ContentPlaceHolder1_galleryMain .card-img-overlay {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 24px 24px 20px !important;
background: linear-gradient(180deg,
rgba(10, 10, 18, 0) 0%,
rgba(10, 10, 18, 0) 40%,
rgba(10, 10, 18, 0.55) 75%,
rgba(10, 10, 18, 0.9) 100%);
transition: background 0.4s ease;
aspect-ratio: 16 / 10;
top: 0;
left: 0;
right: 0;
bottom: auto;
height: auto;
}
#ctl00_ContentPlaceHolder1_galleryMain .card-img-overlay:hover {
background: linear-gradient(180deg,
rgba(10, 10, 18, 0.1) 0%,
rgba(10, 10, 18, 0.3) 40%,
rgba(10, 10, 18, 0.75) 75%,
rgba(10, 10, 18, 0.95) 100%);
}
#ctl00_ContentPlaceHolder1_galleryMain .card-img-overlay .card-title {
font-family: 'Bebas Neue', Impact, sans-serif !important;
font-weight: 400 !important;
font-size: 36px !important;
line-height: 1 !important;
letter-spacing: 2px !important;
color: #fff !important;
margin: 0 0 6px !important;
text-transform: uppercase;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}
#ctl00_ContentPlaceHolder1_galleryMain .card-img-overlay .card-text {
font-family: 'Inter', sans-serif;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 3px !important;
text-transform: uppercase;
color: #e8b464 !important;
margin: 0 !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
/* Gold corner accent on the image (appears on hover) */
#ctl00_ContentPlaceHolder1_galleryMain .card-img-overlay::after {
content: "";
position: absolute;
top: 16px;
right: 16px;
width: 16px;
height: 16px;
border-top: 2px solid #e8b464;
border-right: 2px solid #e8b464;
opacity: 0;
transform: translate(6px, -6px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
#ctl00_ContentPlaceHolder1_galleryMain .card.bg-dark:hover .card-img-overlay::after {
opacity: 1;
transform: translate(0, 0);
}
/* --- Card footer (date + View Gallery button) --- */
#ctl00_ContentPlaceHolder1_galleryMain .card-footer {
background: #0c0a14 !important;
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
color: #9393a8 !important;
padding: 16px 20px !important;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
}
#ctl00_ContentPlaceHolder1_galleryMain .card-footer span {
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
color: #9393a8;
}
/* --- "View Gallery" button — override Bootstrap .btn-primary --- */
#ctl00_ContentPlaceHolder1_galleryMain .card-footer .btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #d4412d, #b03028) !important;
border: 1px solid transparent !important;
color: #fff !important;
float: none !important;
margin-left: auto;
padding: 10px 22px !important;
font-family: 'Inter', sans-serif;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 2.5px !important;
text-transform: uppercase;
text-decoration: none !important;
border-radius: 4px !important;
box-shadow: 0 6px 20px rgba(212, 65, 45, 0.3);
transition: all 0.3s ease;
}
#ctl00_ContentPlaceHolder1_galleryMain .card-footer .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(212, 65, 45, 0.5);
filter: brightness(1.08);
color: #fff !important;
}
#ctl00_ContentPlaceHolder1_galleryMain .card-footer .btn-primary::after {
content: "→";
font-size: 14px;
line-height: 1;
}
/* =====================================================
RESPONSIVE
===================================================== */
@media (max-width: 991.98px) {
#ctl00_divContentColumnOne > h1 {
padding: 100px 20px 12px;
}
#ctl00_ContentPlaceHolder1_galleryMain.vn-gallery {
padding: 28px 8px 0 !important;
}
#ctl00_ContentPlaceHolder1_galleryMain .gallery {
--bs-gutter-x: 1.25rem;
--bs-gutter-y: 1.5rem;
}
#ctl00_ContentPlaceHolder1_galleryMain .card-img-overlay .card-title {
font-size: 30px !important;
}
}
@media (max-width: 576px) {
#ctl00_divContentColumnOne > h1 {
padding: 90px 16px 8px;
}
#ctl00_divContentColumnOne > h1::before {
font-size: 11px;
letter-spacing: 3px;
}
#ctl00_ContentPlaceHolder1_galleryMain .card-img,
#ctl00_ContentPlaceHolder1_galleryMain .card-img-overlay {
aspect-ratio: 4 / 3;
}
#ctl00_ContentPlaceHolder1_galleryMain .card-img-overlay .card-title {
font-size: 28px !important;
}
#ctl00_ContentPlaceHolder1_galleryMain .card-footer {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
#ctl00_ContentPlaceHolder1_galleryMain .card-footer .btn-primary {
margin-left: 0;
}
}
/* =====================================================
EVENTS / BOOK TICKETS PAGE
Themed to match the Infamous Spiegel Big Top look
(Bebas Neue + Inter, gold/red on deep navy).
Targets the legacy untouchable HTML by class/id only.
All rules forced with !important so this stylesheet
always wins over other loaded CSS.
===================================================== */
/* --- Main section wrapper --- */
#ctl00_mainSection.content {
background: #07070f !important;
padding-top: 0 !important;
padding-bottom: 100px !important;
position: relative !important;
overflow: hidden !important;
}
/* Soft ambient glows */
#ctl00_mainSection.content::before {
content: "" !important;
position: absolute !important;
top: 120px !important;
left: -160px !important;
width: 420px !important;
height: 420px !important;
background: radial-gradient(circle, rgba(212, 65, 45, 0.16), transparent 70%) !important;
filter: blur(60px) !important;
pointer-events: none !important;
z-index: 0 !important;
}
#ctl00_mainSection.content::after {
content: "" !important;
position: absolute !important;
bottom: 100px !important;
right: -180px !important;
width: 500px !important;
height: 500px !important;
background: radial-gradient(circle, rgba(232, 180, 100, 0.12), transparent 70%) !important;
filter: blur(60px) !important;
pointer-events: none !important;
z-index: 0 !important;
}
/*
#ctl00_divContent {
position: relative !important;
z-index: 1 !important;
max-width: 1280px !important;
margin-top: 0 !important;
margin-right: auto !important;
margin-bottom: 0 !important;
margin-left: auto !important;
padding: 100px 24px 0 !important;
display: flex !important;
flex-wrap: nowrap !important;
gap: 36px !important;
--bs-gutter-x: 0 !important;
--bs-gutter-y: 0 !important;
}
*/
/* --- Two-column layout (main content + Account sidebar) --- */
#ctl00_divContentColumnOne {
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: none !important;
width: auto !important;
padding: 0 !important;
}
#ctl00_divContentColumnTwo.content_column_two {
flex: 0 0 280px !important;
max-width: 280px !important;
width: 280px !important;
padding: 0 0 0 28px !important;
border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
align-self: flex-start !important;
//position: sticky !important;
//top: 96px !important;
max-height: calc(100vh - 120px) !important;
overflow-y: auto !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(232, 180, 100, 0.3) transparent !important;
margin-left: 30px;
}
#ctl00_divContentColumnTwo.content_column_two::-webkit-scrollbar {
width: 4px !important;
}
#ctl00_divContentColumnTwo.content_column_two::-webkit-scrollbar-thumb {
background: rgba(232, 180, 100, 0.25) !important;
border-radius: 2px !important;
}
.sticky-custom {
top: 96px !important;
}
/* =====================================================
ACCOUNT AREA SIDEBAR
===================================================== */
.rhs_box {
margin-bottom: 28px !important;
background: #100d16 !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 10px !important;
overflow: hidden !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3) !important;
}
.rhs_box .title-bg {
display: block !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 3.5px !important;
text-transform: uppercase !important;
color: #e8b464 !important;
background: linear-gradient(180deg, rgba(232, 180, 100, 0.08), transparent) !important;
border: none !important;
border-bottom: 1px solid rgba(232, 180, 100, 0.18) !important;
padding: 16px 20px !important;
margin: 0 !important;
}
.rhs_box .title-bg::before {
content: "◆ " !important;
color: #e8b464 !important;
margin-right: 4px !important;
}
.rhs_box .list-group {
background: transparent !important;
border-radius: 0 !important;
padding: 6px 0 !important;
}
.rhs_box .list-group-item {
background: transparent !important;
border: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
padding: 12px 20px !important;
color: #c9c9d4 !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
border-radius: 0 !important;
transition: background 0.2s ease, padding-left 0.2s ease !important;
}
.rhs_box .list-group-item:last-child {
border-bottom: none !important;
}
.rhs_box .list-group-item:hover {
background: rgba(232, 180, 100, 0.05) !important;
padding-left: 24px !important;
}
.rhs_box .list-group-item .fa {
color: #e8b464 !important;
margin-right: 10px !important;
font-size: 12px !important;
width: 14px !important;
text-align: center !important;
}
.rhs_box .list-group-item a {
color: #c9c9d4 !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.rhs_box .list-group-item:hover a {
color: #fff !important;
}
/* "BOOK TICKETS" highlighted CTA in sidebar */
.rhs_box .list-group-item a.buy_tickets {
color: #e8b464 !important;
font-weight: 800 !important;
letter-spacing: 2.5px !important;
}
.rhs_box .list-group-item:has(a.buy_tickets) {
background: rgba(212, 65, 45, 0.08) !important;
border-bottom: 1px solid rgba(212, 65, 45, 0.2) !important;
}
.rhs_box .list-group-item:has(a.buy_tickets):hover {
background: rgba(212, 65, 45, 0.14) !important;
}
.rhs_box .list-group-item:has(a.buy_tickets) .fa {
color: #ff8b78 !important;
}
.rhs_box .list-group-item a.buy_tickets:hover {
color: #fff !important;
}
.sub_nav {
padding: 0 !important;
}
/* =====================================================
COUNTDOWN BAR
===================================================== */
#ctl00_ContentPlaceHolder1_pCountdown.alert-danger {
background: rgba(212, 65, 45, 0.08) !important;
border: 1px solid rgba(212, 65, 45, 0.5) !important;
color: #ff8b78 !important;
border-radius: 4px !important;
padding: 14px 20px !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
margin-bottom: 28px !important;
}
/* =====================================================
BROWSE-BY FILTERS
===================================================== */
.tertiary {
margin-bottom: 40px !important;
padding: 28px 28px 24px !important;
background: linear-gradient(180deg, rgba(232, 180, 100, 0.04), transparent) !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
border-radius: 8px !important;
}
.tertiary .row {
--bs-gutter-x: 1.25rem !important;
}
.tertiary .row + .row {
margin-top: 24px !important;
}
.tertiary span.fw-bold {
display: block !important;
color: #e8b464 !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
margin-bottom: 8px !important;
}
.tertiary br {
display: none !important;
}
/* Active genre pill — applied via JS class */
.infamous-genre-active,
a.infamous-genre-active {
color: #e8b464 !important;
background: rgba(232, 180, 100, 0.12) !important;
border-color: rgba(232, 180, 100, 0.6) !important;
text-decoration: none !important;
}
/* Reset filters link — full-width block in the date col slot */
#infamous-reset-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin-top: 0 !important;
padding: 10px 14px !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
text-decoration: none !important;
color: #fff !important;
background: linear-gradient(135deg, #d4412d, #b03028) !important;
border-radius: 4px !important;
cursor: pointer !important;
transition: opacity 0.2s ease !important;
box-sizing: border-box !important;
}
#infamous-reset-btn:hover {
opacity: 0.85 !important;
color: #fff !important;
text-decoration: none !important;
}
/* Genre filter pills */
.btn-custom-filter {
display: inline-block !important;
padding: 6px 14px !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 1.8px !important;
text-transform: uppercase !important;
color: #e2e2f0 !important;
background: rgba(255, 255, 255, 0.07) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: 4px !important;
text-decoration: none !important;
transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
}
.btn-custom-filter:hover {
color: #e8b464 !important;
background: rgba(232, 180, 100, 0.1) !important;
border-color: rgba(232, 180, 100, 0.5) !important;
text-decoration: none !important;
}
/* Reorder: move keyword (3rd) to position 2, date/reset col to position 3 */
#ctl00_ContentPlaceHolder1_pnlBrowseBy .row + .row {
display: flex !important;
flex-wrap: wrap !important;
}
#ctl00_ContentPlaceHolder1_pnlBrowseBy .row + .row .col-md-4:nth-child(1) { order: 1 !important; }
#ctl00_ContentPlaceHolder1_pnlBrowseBy .row + .row .col-md-4:nth-child(2) { order: 3 !important; }
#ctl00_ContentPlaceHolder1_pnlBrowseBy .row + .row .col-md-4:nth-child(3) { order: 2 !important; }
/* Browse by Date col — hide original contents only, not the injected reset elements */
#ctl00_ContentPlaceHolder1_pnlBrowseBy .row + .row .col-md-4:nth-child(2) > :not(#infamous-reset-btn):not(#infamous-reset-label) {
display: none !important;
}
/* Dark selects + inputs */
.tertiary .form-select,
.tertiary .form-control {
background-color: #100d16 !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #e2e2f0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
padding: 10px 14px !important;
border-radius: 4px !important;
box-sizing: border-box !important;
height: auto !important;
min-height: 0 !important;
line-height: 1.5 !important;
transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
/* Keyword input — extra specificity to override platform-injected height */
#inputNameFilter,
#ctl00_ContentPlaceHolder1_pnlBrowseBy .row + .row .col-md-4:nth-child(3) input,
#ctl00_ContentPlaceHolder1_pnlBrowseBy .row + .row .col-md-4:nth-child(3) .form-control,
#ctl00_ContentPlaceHolder1_pnlBrowseBy .row + .row .col-md-4:nth-child(3) input[type="text"] {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 10px 14px !important;
font-size: 14px !important;
line-height: 1.5 !important;
box-sizing: border-box !important;
background-color: #100d16 !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #e2e2f0 !important;
border-radius: 4px !important;
font-family: 'Inter', sans-serif !important;
}
.tertiary .form-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23e8b464' d='M3.5 6l4.5 4.5L12.5 6z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 14px 14px !important;
padding-right: 34px !important;
}
.tertiary .form-select:focus,
.tertiary .form-control:focus {
border-color: rgba(232, 180, 100, 0.5) !important;
box-shadow: 0 0 0 3px rgba(232, 180, 100, 0.15) !important;
outline: none !important;
}
.tertiary .form-select option {
background: #100d16 !important;
color: #e2e2f0 !important;
}
.tertiary .form-control::placeholder {
color: rgba(255, 255, 255, 0.35) !important;
}
/* =====================================================
INTRO / INSTRUCTIONS ALERT
===================================================== */
#ctl00_ContentPlaceHolder1_pnlChooseEventInstructions .alert-info {
background: linear-gradient(135deg, rgba(212, 65, 45, 0.12), rgba(7, 7, 15, 0.8)) !important;
border: 1px solid rgba(232, 180, 100, 0.2) !important;
border-radius: 8px !important;
color: #c9c9d4 !important;
padding: 32px !important;
margin-bottom: 40px !important;
position: relative !important;
overflow: hidden !important;
}
#ctl00_ContentPlaceHolder1_pnlChooseEventInstructions .alert-info::before {
content: "◆" !important;
position: absolute !important;
top: 20px !important;
right: 24px !important;
color: rgba(232, 180, 100, 0.25) !important;
font-size: 42px !important;
line-height: 1 !important;
}
#ctl00_ContentPlaceHolder1_pnlChooseEventInstructions .alert-info h3 {
font-family: 'Bebas Neue', Impact, sans-serif !important;
font-weight: 400 !important;
font-size: clamp(26px, 3vw, 36px) !important;
color: #fff !important;
letter-spacing: 2px !important;
margin: 0 0 12px !important;
text-transform: uppercase !important;
}
#ctl00_ContentPlaceHolder1_pnlChooseEventInstructions .alert-info h3 strong {
font-weight: 400 !important;
}
#ctl00_ContentPlaceHolder1_pnlChooseEventInstructions .alert-info p {
color: #c9c9d4 !important;
font-size: 15px !important;
line-height: 1.7 !important;
margin: 0 0 8px !important;
}
#ctl00_ContentPlaceHolder1_pnlChooseEventInstructions .alert-info p:last-child {
margin-bottom: 0 !important;
}
#ctl00_ContentPlaceHolder1_pnlChooseEventInstructions .alert-info a {
color: #e8b464 !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(232, 180, 100, 0.4) !important;
transition: color 0.2s ease, border-color 0.2s ease !important;
}
#ctl00_ContentPlaceHolder1_pnlChooseEventInstructions .alert-info a:hover {
color: #fff !important;
border-bottom-color: #fff !important;
}
#ctl00_ContentPlaceHolder1_pnlChooseEventInstructions .alert-info a span,
#ctl00_ContentPlaceHolder1_pnlChooseEventInstructions .alert-info a strong {
color: inherit !important;
}
/* =====================================================
EVENT GROUP HEADING
===================================================== */
.event_group_container {
margin-bottom: 48px !important;
}
.event_group_container h3 {
font-family: 'Bebas Neue', Impact, sans-serif !important;
font-weight: 400 !important;
font-size: clamp(32px, 4vw, 48px) !important;
color: #fff !important;
letter-spacing: 2px !important;
line-height: 1 !important;
margin: 16px 0 28px !important;
text-transform: uppercase !important;
padding-bottom: 16px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
position: relative !important;
}
.event_group_container h3::before {
content: "◆ Now Playing" !important;
display: block !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 4px !important;
color: #e8b464 !important;
margin-bottom: 10px !important;
text-transform: uppercase !important;
}
.event_group_container h3::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
bottom: -1px !important;
width: 56px !important;
height: 2px !important;
background: linear-gradient(90deg, #d4412d, #e8b464) !important;
}
/* =====================================================
EVENT LIST
===================================================== */
#ctl00_divContentColumnOne .event-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
/* --- Each event row --- */
#ctl00_divContentColumnOne .event-list li.span12 {
display: grid !important;
grid-template-columns: 72px 220px 1fr 108px !important;
grid-template-areas: "date image info cta" !important;
grid-template-rows: auto !important;
gap: 0 20px !important;
align-items: stretch !important;
background: #100d16 !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 10px !important;
padding: 20px !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35) !important;
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
position: relative !important;
overflow: hidden !important;
}
#ctl00_divContentColumnOne .event-list li.span12:hover {
transform: translateY(-3px) !important;
border-color: rgba(232, 180, 100, 0.4) !important;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(232, 180, 100, 0.2) !important;
}
/* Red accent strip on the left edge */
#ctl00_divContentColumnOne .event-list li.span12::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: 3px !important;
background: linear-gradient(180deg, #d4412d, #b03028) !important;
opacity: 0.7 !important;
transition: opacity 0.3s ease, width 0.3s ease !important;
}
#ctl00_divContentColumnOne .event-list li.span12:hover::before {
opacity: 1 !important;
width: 4px !important;
}
/* =====================================================
DATE BLOCK
===================================================== */
#ctl00_divContentColumnOne .event-list li.span12 > time {
grid-area: date !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
padding-right: 16px !important;
}
#ctl00_divContentColumnOne .event-list li.span12 > time a {
text-decoration: none !important;
color: inherit !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 4px !important;
}
#ctl00_divContentColumnOne .event-list li.span12 > time .day {
display: block !important;
}
#ctl00_divContentColumnOne .event-list li.span12 > time .day .start {
display: block !important;
font-family: 'Bebas Neue', Impact, sans-serif !important;
font-size: 52px !important;
line-height: 1 !important;
color: #fff !important;
font-weight: 400 !important;
}
#ctl00_divContentColumnOne .event-list li.span12 > time .month .start {
display: block !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: #e8b464 !important;
}
#ctl00_divContentColumnOne .event-list li.span12 > time .hyphen,
#ctl00_divContentColumnOne .event-list li.span12 > time .end {
display: none !important;
}
/* =====================================================
THUMBNAIL
===================================================== */
#ctl00_divContentColumnOne .event-list li.span12 > img {
grid-area: image !important;
width: 100% !important;
height: 100% !important;
min-height: 150px !important;
object-fit: cover !important;
border-radius: 8px !important;
filter: grayscale(0.15) brightness(0.88) !important;
transition: filter 0.4s ease, transform 0.5s ease !important;
display: block !important;
align-self: stretch !important;
}
#ctl00_divContentColumnOne .event-list li.span12:hover > img {
filter: grayscale(0) brightness(1) !important;
transform: scale(1.02) !important;
}
/* =====================================================
INFO BLOCK
===================================================== */
#ctl00_divContentColumnOne .event-list li.span12 .info {
grid-area: info !important;
min-width: 0 !important;
padding-top: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .info .title {
font-family: 'Bebas Neue', Impact, sans-serif !important;
font-weight: 400 !important;
font-size: clamp(22px, 2vw, 28px) !important;
line-height: 1.05 !important;
letter-spacing: 1.5px !important;
color: #fff !important;
margin: 0 0 10px !important;
text-transform: uppercase !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .info .desc.d-block {
color: #c9c9d4 !important;
font-size: 14px !important;
line-height: 1.55 !important;
margin-bottom: 12px !important;
display: block !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .info p.desc {
display: none !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .info p.desc strong {
color: #e8b464 !important;
font-weight: 700 !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .info p.desc .fa-regular,
#ctl00_divContentColumnOne .event-list li.span12 .info p.desc .fa-solid {
color: #e8b464 !important;
font-size: 12px !important;
margin-right: 2px !important;
}
/* =====================================================
SOCIAL / CTA BUTTONS — vertical stack on right edge
===================================================== */
#ctl00_divContentColumnOne .event-list li.span12 .social {
grid-area: cta !important;
margin-top: 0 !important;
padding-top: 0 !important;
border-top: none !important;
border-left: 1px solid rgba(255, 255, 255, 0.07) !important;
padding-left: 16px !important;
display: flex !important;
align-items: stretch !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .social ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
width: 100% !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .social ul li {
display: flex !important;
flex: 1 1 0 !important;
width: 100% !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .social a {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
width: 100% !important;
padding: 12px 6px !important;
text-decoration: none !important;
font-family: 'Inter', sans-serif !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
border-radius: 6px !important;
transition: all 0.3s ease !important;
}
/* TICKETS — red */
#ctl00_divContentColumnOne .event-list li.span12 .social ul li:first-child a {
background: linear-gradient(160deg, #d4412d, #b03028) !important;
border: 1px solid transparent !important;
color: #fff !important;
box-shadow: 0 6px 18px rgba(212, 65, 45, 0.35) !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .social ul li:first-child a:hover {
filter: brightness(1.1) !important;
box-shadow: 0 10px 26px rgba(212, 65, 45, 0.55) !important;
}
/* INFO — ghost */
#ctl00_divContentColumnOne .event-list li.span12 .social ul li:nth-child(2) a {
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
color: #c9c9d4 !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .social ul li:nth-child(2) a:hover {
border-color: #e8b464 !important;
color: #e8b464 !important;
background: rgba(232, 180, 100, 0.06) !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .social a .fa,
#ctl00_divContentColumnOne .event-list li.span12 .social a i.fa {
font-size: 18px !important;
}
/* =====================================================
RESPONSIVE
===================================================== */
@media (max-width: 991.98px) {
#ctl00_mainSection.content {
overflow-x: hidden !important;
}
#ctl00_divContent {
padding: 90px 16px 0 !important;
flex-wrap: wrap !important;
gap: 0 !important;
}
#ctl00_divContentColumnOne {
flex: 1 1 100% !important;
max-width: 100% !important;
width: 100% !important;
min-width: 0 !important;
order: 1 !important;
}
#ctl00_divContentColumnTwo.content_column_two {
flex: 1 1 100% !important;
max-width: 100% !important;
width: 100% !important;
position: static !important;
max-height: none !important;
overflow: visible !important;
border-left: none !important;
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
padding: 32px 0 0 !important;
margin-top: 32px !important;
order: 2 !important;
}
.event_group_container h3,
#ctl00_ContentPlaceHolder1_pnlChooseEventInstructions .alert-info h3 {
overflow-wrap: break-word !important;
word-wrap: break-word !important;
hyphens: auto !important;
}
.tertiary .row {
--bs-gutter-x: 0.75rem !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#ctl00_divContentColumnOne .event-list li.span12 {
grid-template-columns: 60px 180px 1fr 90px !important;
gap: 0 14px !important;
padding: 16px !important;
}
#ctl00_divContentColumnOne .event-list li.span12 > time,
#ctl00_divContentColumnOne .event-list li.span12 > img {
position: static !important;
left: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
width: auto !important;
height: auto !important;
}
#ctl00_divContentColumnOne .event-list li.span12 > img {
min-height: 130px !important;
}
}
@media (max-width: 767.98px) {
#ctl00_divContentColumnOne .event-list li.span12 {
grid-template-columns: 72px 1fr !important;
grid-template-areas:
"image image"
"date info"
"cta cta" !important;
grid-template-rows: auto auto auto !important;
gap: 12px 16px !important;
}
#ctl00_divContentColumnOne .event-list li.span12 > img {
height: 240px !important;
width: 100% !important;
min-height: 0 !important;
border-radius: 6px !important;
}
#ctl00_divContentColumnOne .event-list li.span12 > time {
border-right: none !important;
padding-right: 0 !important;
align-items: center !important;
}
#ctl00_divContentColumnOne .event-list li.span12 > time .day .start {
font-size: 38px !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .social {
border-left: none !important;
padding-left: 0 !important;
border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
padding-top: 12px !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .social ul {
flex-direction: row !important;
gap: 10px !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .social ul li {
flex: 1 1 0 !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .social a {
font-size: 10px !important;
padding: 12px 8px !important;
flex-direction: row !important;
gap: 6px !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .social a i.fa {
font-size: 14px !important;
}
}
@media (max-width: 576px) {
#ctl00_divContent {
padding: 80px 12px 0 !important;
}
.tertiary {
padding: 18px 16px !important;
margin-bottom: 28px !important;
}
.tertiary .col,
.tertiary [class*="col-"] {
margin-bottom: 10px !important;
}
#ctl00_ContentPlaceHolder1_pCountdown.alert-danger {
padding: 12px 14px !important;
font-size: 11px !important;
letter-spacing: 2px !important;
}
#ctl00_ContentPlaceHolder1_pnlChooseEventInstructions .alert-info {
padding: 22px !important;
}
#ctl00_ContentPlaceHolder1_pnlChooseEventInstructions .alert-info h3 {
font-size: 24px !important;
letter-spacing: 1px !important;
}
#ctl00_ContentPlaceHolder1_pnlChooseEventInstructions .alert-info p {
font-size: 14px !important;
}
#ctl00_ContentPlaceHolder1_pnlChooseEventInstructions .alert-info::before {
font-size: 30px !important;
top: 14px !important;
right: 16px !important;
}
.event_group_container h3 {
font-size: 28px !important;
letter-spacing: 1px !important;
margin-bottom: 20px !important;
}
#ctl00_divContentColumnOne .event-list li.span12 {
padding: 12px !important;
gap: 10px 12px !important;
}
#ctl00_divContentColumnOne .event-list li.span12 > img {
height: 240px !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .info .title {
font-size: 18px !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .info p.desc {
font-size: 10px !important;
letter-spacing: 1px !important;
}
}
/* =====================================================
PLATFORM NEUTRALIZER
Explicit resets for properties the legacy platform
stylesheet sets on .event-list descendants at
@media (min-width: 768px). Without these declarations,
!important doesn't matter — the platform wins by default
because we never named the property.
===================================================== */
#ctl00_divContentColumnOne .event-list {
color: #c9c9d4 !important;
}
#ctl00_divContentColumnOne .event-list li.span12 {
height: auto !important;
min-height: 0 !important;
border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
float: none !important;
}
#ctl00_divContentColumnOne .event-list li.span12 > img {
float: none !important;
margin: 0 !important;
padding: 0 !important;
position: static !important;
left: auto !important;
top: auto !important;
}
/* Platform positions time absolutely inside the li — pull it back into grid flow */
#ctl00_divContentColumnOne .event-list li.span12 > time {
position: static !important;
left: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
width: auto !important;
height: auto !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .info {
height: auto !important;
overflow: visible !important;
padding-right: 0 !important;
padding-top: 0 !important;
background: transparent !important;
position: static !important;
text-align: left !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .social {
position: static !important;
top: auto !important;
right: auto !important;
width: auto !important;
height: auto !important;
background: transparent !important;
display: block !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .social > ul {
border-left: 0 !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .social ul li,
#ctl00_divContentColumnOne .event-list li.span12 .social ul li:hover,
#ctl00_divContentColumnOne .event-list li.span12 .social ul li:focus,
#ctl00_divContentColumnOne .event-list li.span12 .social ul li:active {
padding: 0 !important;
background: transparent !important;
background-color: transparent !important;
color: inherit !important;
box-shadow: none !important;
cursor: default !important;
}
/* Kill platform inset shadow on first-child li (TICKETS wrapper) */
#ctl00_divContentColumnOne .event-list li.span12 .social ul li:first-child,
#ctl00_divContentColumnOne .event-list li.span12 .social ul li:first-child:hover {
box-shadow: none !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .social ul li a {
width: 100% !important;
height: auto !important;
padding: 10px 22px !important;
text-align: center !important;
line-height: 1 !important;
border: 1px solid transparent !important;
border-bottom: 1px solid transparent !important;
background-image: none !important;
}
/* Kill platform underline / pseudo / hover artifacts under the pill */
#ctl00_divContentColumnOne .event-list li.span12 .social ul li a,
#ctl00_divContentColumnOne .event-list li.span12 .social ul li a:hover,
#ctl00_divContentColumnOne .event-list li.span12 .social ul li a:focus,
#ctl00_divContentColumnOne .event-list li.span12 .social ul li a:active,
#ctl00_divContentColumnOne .event-list li.span12 .social ul li a:visited {
text-decoration: none !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .social ul li a::after,
#ctl00_divContentColumnOne .event-list li.span12 .social ul li a::before {
content: none !important;
display: none !important;
background: none !important;
border: 0 !important;
}
/* Re-assert ticket/info pill borders after the blanket border reset above */
#ctl00_divContentColumnOne .event-list li.span12 .social ul li:nth-child(2) a {
border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .social ul li:nth-child(2) a:hover {
border: 1px solid #e8b464 !important;
}
/* Inner and — normalize so nothing protrudes below baseline */
#ctl00_divContentColumnOne .event-list li.span12 .social ul li a > span,
#ctl00_divContentColumnOne .event-list li.span12 .social ul li a > i {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
text-decoration: none !important;
line-height: 1 !important;
vertical-align: middle !important;
display: inline-flex !important;
align-items: center !important;
}
#ctl00_divContentColumnOne .event-list li.span12 .social ul li a > i.fa {
font-size: 13px !important;
}
/* =====================================================
CAST DETAILS (Artist Profile) PAGE
Themed to match the Infamous Spiegel Big Top look
(Bebas Neue + Inter, gold/red on deep navy).
Targets the legacy untouchable HTML by class/id only.
===================================================== */
/* --- Main section wrapper --- */
#ctl00_mainSection.content {
background: #07070f !important;
padding-top: 0 !important;
padding-bottom: 100px !important;
position: relative !important;
overflow: hidden !important;
//max-width: none !important;
}
#ctl00_mainSection.content::before {
content: "" !important;
position: absolute !important;
top: 140px !important;
left: -180px !important;
width: 480px !important;
height: 480px !important;
background: radial-gradient(circle, rgba(212, 65, 45, 0.18), transparent 70%) !important;
filter: blur(70px) !important;
pointer-events: none !important;
z-index: 0 !important;
}
#ctl00_mainSection.content::after {
content: "" !important;
position: absolute !important;
bottom: 80px !important;
right: -200px !important;
width: 520px !important;
height: 520px !important;
background: radial-gradient(circle, rgba(232, 180, 100, 0.14), transparent 70%) !important;
filter: blur(70px) !important;
pointer-events: none !important;
z-index: 0 !important;
}
/*
#ctl00_divContent {
position: relative !important;
z-index: 1 !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 110px 24px 0 !important;
}
*/
#ctl00_ContentPlaceHolder1_pnlPage {
color: #c9c9d4 !important;
font-family: 'Inter', sans-serif !important;
}
/* =====================================================
PAGE HEADING — artist role / name
===================================================== */
#ctl00_ContentPlaceHolder1_pnlPage > h1 {
font-family: 'Bebas Neue', Impact, sans-serif !important;
font-weight: 400 !important;
font-size: clamp(40px, 6vw, 72px) !important;
line-height: 1 !important;
letter-spacing: 3px !important;
color: #fff !important;
text-transform: uppercase !important;
text-align: center !important;
margin: 0 auto 48px !important;
padding: 0 16px 24px !important;
position: relative !important;
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6) !important;
}
/* Gold eyebrow above the title */
#ctl00_ContentPlaceHolder1_pnlPage > h1::before {
content: "◆ Meet The Artist" !important;
display: block !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 4px !important;
color: #e8b464 !important;
margin-bottom: 14px !important;
text-shadow: none !important;
text-transform: uppercase !important;
}
/* Short gold rule under the title */
#ctl00_ContentPlaceHolder1_pnlPage > h1::after {
content: "" !important;
display: block !important;
width: 64px !important;
height: 2px !important;
background: linear-gradient(90deg, transparent, #e8b464, transparent) !important;
margin: 22px auto 0 !important;
}
/* =====================================================
TWO-COLUMN ROW (bio + media)
===================================================== */
#ctl00_ContentPlaceHolder1_pnlPage > .row {
--bs-gutter-x: 3rem !important;
--bs-gutter-y: 2rem !important;
align-items: flex-start !important;
}
/* =====================================================
LEFT — BIO / LINKS
===================================================== */
#ctl00_ContentPlaceHolder1_pnlPage > .row > .col-md-8 {
padding-top: 4px !important;
}
#ctl00_ContentPlaceHolder1_pnlPage > .row > .col-md-8 > p {
color: #c9c9d4 !important;
font-family: 'Inter', sans-serif !important;
font-size: 16px !important;
line-height: 1.8 !important;
margin: 0 0 18px !important;
}
/* Website CTA button (.btn-primary with globe icon) */
#ctl00_ContentPlaceHolder1_hlWww.btn-primary {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
background: linear-gradient(135deg, #d4412d, #b03028) !important;
border: 1px solid transparent !important;
color: #fff !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
padding: 12px 22px !important;
border-radius: 4px !important;
text-decoration: none !important;
box-shadow: 0 8px 22px rgba(212, 65, 45, 0.3) !important;
transition: all 0.3s ease !important;
white-space: nowrap !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
#ctl00_ContentPlaceHolder1_hlWww.btn-primary:hover {
transform: translateY(-2px) !important;
box-shadow: 0 14px 30px rgba(212, 65, 45, 0.5) !important;
filter: brightness(1.08) !important;
color: #fff !important;
}
#ctl00_ContentPlaceHolder1_hlWww.btn-primary .fa {
font-size: 14px !important;
color: inherit !important;
}
#ctl00_ContentPlaceHolder1_pWww {
margin: 24px 0 28px !important;
}
/* --- Social icons (twitter, facebook, youtube) --- */
#ctl00_ContentPlaceHolder1_pArtistLinks {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 12px !important;
margin: 0 0 32px !important;
padding: 20px 0 !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
position: relative !important;
}
#ctl00_ContentPlaceHolder1_pArtistLinks::before {
content: "Follow" !important;
display: inline-block !important;
color: #e8b464 !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
margin-right: 8px !important;
}
#ctl00_ContentPlaceHolder1_pArtistLinks a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 50% !important;
color: #c9c9d4 !important;
background: rgba(255, 255, 255, 0.02) !important;
font-size: 16px !important;
transition: all 0.3s ease !important;
text-decoration: none !important;
}
#ctl00_ContentPlaceHolder1_pArtistLinks a:hover {
border-color: #e8b464 !important;
color: #e8b464 !important;
background: rgba(232, 180, 100, 0.1) !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 20px rgba(232, 180, 100, 0.15) !important;
}
#ctl00_ContentPlaceHolder1_pArtistLinks a.fa-2x {
font-size: 16px !important;
}
/* "View more ..." back button */
#pGoBack .btn-outline-secondary {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
color: #e2e2f0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
padding: 10px 20px !important;
border-radius: 4px !important;
text-decoration: none !important;
transition: all 0.25s ease !important;
}
#pGoBack .btn-outline-secondary::before {
content: "←" !important;
font-size: 14px !important;
line-height: 1 !important;
}
#pGoBack .btn-outline-secondary:hover {
border-color: #e8b464 !important;
color: #e8b464 !important;
background: rgba(232, 180, 100, 0.06) !important;
transform: translateX(-2px) !important;
}
#pGoBack {
margin: 0 !important;
}
/* =====================================================
RIGHT — ARTIST MEDIA (portrait, banner, video)
===================================================== */
#ctl00_ContentPlaceHolder1_pnlPage > .row > .col-md-4 .sticky-top {
display: flex !important;
flex-direction: column !important;
gap: 18px !important;
top: 110px !important;
}
.sticky-custom {
top: 110px !important;
}
/* Artist portrait */
#ctl00_ContentPlaceHolder1_imgArtistImg {
width: 100% !important;
height: auto !important;
aspect-ratio: 3 / 4 !important;
object-fit: cover !important;
border-radius: 8px !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(232, 180, 100, 0.08) !important;
display: block !important;
margin: 0 !important;
position: relative !important;
z-index: 1 !important;
filter: contrast(1.03) !important;
}
/* Artist banner */
#ctl00_ContentPlaceHolder1_imgBannerImg {
width: 100% !important;
height: auto !important;
border-radius: 6px !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
display: block !important;
margin: 0 !important;
}
/* YouTube video wrapper */
#ctl00_ContentPlaceHolder1_divYoutube {
width: 100% !important;
border-radius: 8px !important;
overflow: hidden !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
background: #000 !important;
position: relative !important;
aspect-ratio: 16 / 9 !important;
}
#ctl00_ContentPlaceHolder1_divYoutube iframe {
width: 100% !important;
height: 100% !important;
border: 0 !important;
display: block !important;
}
/* =====================================================
RESPONSIVE
===================================================== */
@media (max-width: 991.98px) {
#ctl00_mainSection.content {
overflow-x: hidden !important;
}
#ctl00_divContent {
padding: 90px 20px 0 !important;
}
#ctl00_ContentPlaceHolder1_pnlPage > h1 {
margin-bottom: 36px !important;
}
#ctl00_ContentPlaceHolder1_pnlPage > .row {
--bs-gutter-x: 1.5rem !important;
}
/* Disable sticky behavior on tablet/mobile — image is order 1 and too tall */
#ctl00_ContentPlaceHolder1_pnlPage > .row > .col-md-4 .sticky-top {
position: static !important;
top: auto !important;
max-width: 360px !important;
margin: 0 auto 20px !important;
}
}
@media (max-width: 767.98px) {
#ctl00_divContent {
padding: 80px 16px 0 !important;
}
#ctl00_ContentPlaceHolder1_pnlPage > h1 {
letter-spacing: 2px !important;
margin-bottom: 28px !important;
}
#ctl00_ContentPlaceHolder1_pnlPage > h1::before {
font-size: 11px !important;
letter-spacing: 3px !important;
}
#ctl00_ContentPlaceHolder1_pnlPage > .row > .col-md-4 .sticky-top {
max-width: 320px !important;
}
#ctl00_ContentPlaceHolder1_imgArtistImg {
aspect-ratio: 4 / 5 !important;
}
#ctl00_ContentPlaceHolder1_hlWww.btn-primary {
font-size: 11px !important;
letter-spacing: 1.5px !important;
padding: 10px 18px !important;
}
#ctl00_ContentPlaceHolder1_pArtistLinks a {
width: 36px !important;
height: 36px !important;
}
}
@media (max-width: 480px) {
#ctl00_ContentPlaceHolder1_pnlPage > .row > .col-md-4 .sticky-top {
max-width: 100% !important;
}
#ctl00_ContentPlaceHolder1_hlWww.btn-primary {
max-width: 100% !important;
word-break: break-all !important;
white-space: normal !important;
}
}
/* Event Details Override */
body.ifm-event-detail-page {
background:
radial-gradient(circle at top center, rgba(212, 65, 45, 0.22), transparent 30%),
radial-gradient(circle at bottom left, rgba(232, 180, 100, 0.12), transparent 28%),
linear-gradient(180deg, #090912 0%, #0c0914 100%) !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
background-size: cover !important;
color: #dddcea !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
body.ifm-event-detail-page #ctl00_mainSection.content {
position: relative;
padding: 48px 0 88px;
}
body.ifm-event-detail-page #ctl00_divContent {
position: relative;
z-index: 1;
--bs-gutter-x: 40px;
--bs-gutter-y: 40px;
align-items: flex-start;
}
body.ifm-event-detail-page .ifm-event-content,
body.ifm-event-detail-page .ifm-event-sidebar {
position: relative;
}
body.ifm-event-detail-page .ifm-event-content-inner,
body.ifm-event-detail-page .ifm-event-sidebar .sticky-custom {
background: linear-gradient(180deg, rgba(18, 16, 30, 0.96), rgba(12, 10, 22, 0.94));
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
backdrop-filter: blur(16px);
}
body.ifm-event-detail-page .ifm-event-content-inner {
padding: 34px 30px 38px;
}
body.ifm-event-detail-page .ifm-event-sidebar .sticky-custom {
top: 120px !important;
padding: 22px;
}
body.ifm-event-detail-page .event_headline {
margin: 0 0 22px !important;
color: #fff;
font-family: 'Bebas Neue', Impact, sans-serif;
font-size: clamp(3rem, 6vw, 5.75rem);
font-weight: 400;
letter-spacing: 1.5px;
line-height: 0.92;
text-transform: uppercase;
}
body.ifm-event-detail-page .event_headline::before {
content: "◆ Event Details";
display: block;
margin-bottom: 12px;
color: #e8b464;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 4px;
line-height: 1.2;
text-transform: uppercase;
}
body.ifm-event-detail-page .ifm-event-content p,
body.ifm-event-detail-page .ifm-event-content li {
color: #bebdd0;
font-size: 15px;
line-height: 1.8;
}
body.ifm-event-detail-page .ifm-event-content ul {
padding-left: 20px;
margin-bottom: 18px;
}
body.ifm-event-detail-page .ifm-event-content h4,
body.ifm-event-detail-page .event-dates h4,
body.ifm-event-detail-page .event-prices h4 {
margin: 28px 0 14px;
color: #fff !important;
font-family: 'Bebas Neue', Impact, sans-serif;
font-size: 28px;
font-weight: 400;
letter-spacing: 1px;
line-height: 1;
text-transform: uppercase;
}
body.ifm-event-detail-page .event-dates h4 a,
body.ifm-event-detail-page .event-prices h4 a,
body.ifm-event-detail-page .event-dates h4 i,
body.ifm-event-detail-page .event-prices h4 i {
color: #fff !important;
}
body.ifm-event-detail-page .ifm-event-content figure,
body.ifm-event-detail-page .ifm-event-content iframe,
body.ifm-event-detail-page .ifm-event-sidebar img {
display: block;
width: 100% !important;
max-width: 100% !important;
border-radius: 10px;
overflow: hidden;
}
body.ifm-event-detail-page .ifm-event-content figure {
margin: 18px 0 22px;
padding: 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
}
body.ifm-event-detail-page .ifm-event-content img {
height: auto;
}
body.ifm-event-detail-page #ctl00_ContentPlaceHolder1_imgEventGroupImage {
margin: 0 0 18px !important;
box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
}
body.ifm-event-detail-page .dates_venue_tickets {
margin: 0;
padding: 24px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
}
body.ifm-event-detail-page .dates_venue_tickets h2[itemprop="name"] {
margin: 0 0 12px;
color: #fff;
font-family: 'Bebas Neue', Impact, sans-serif;
font-size: clamp(2.2rem, 4vw, 3.4rem);
font-weight: 400;
letter-spacing: 1px;
line-height: 0.95;
text-transform: uppercase;
}
body.ifm-event-detail-page .dates_venue_tickets p {
margin-bottom: 12px;
color: #cbc9da;
font-size: 16px;
}
body.ifm-event-detail-page .dates_venue_tickets .times,
body.ifm-event-detail-page .dates_venue_tickets .tickets {
margin-top: 12px;
}
body.ifm-event-detail-page .dates_venue_tickets strong[itemprop="name"] {
display: inline-block;
color: #e8b464;
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
}
body.ifm-event-detail-page .btn.btn-primary.btn-block,
body.ifm-event-detail-page .btn.btn-primary.w-100 {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
border: none !important;
border-radius: 10px !important;
background: linear-gradient(135deg, #d4412d, #b52917) !important;
box-shadow: 0 18px 32px rgba(212, 65, 45, 0.32);
color: #fff !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
}
body.ifm-event-detail-page .btn.btn-primary.btn-block:hover,
body.ifm-event-detail-page .btn.btn-primary.w-100:hover {
transform: translateY(-1px);
filter: brightness(1.04);
}
body.ifm-event-detail-page hr {
margin: 26px 0;
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
opacity: 1;
}
body.ifm-event-detail-page .event-dates,
body.ifm-event-detail-page .event-prices {
margin-top: 10px;
padding: 22px 24px 24px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 10px;
}
body.ifm-event-detail-page .event-dates h4,
body.ifm-event-detail-page .event-prices h4 {
margin: 0 0 18px;
}
body.ifm-event-detail-page .table,
body.ifm-event-detail-page .event-dates .table,
body.ifm-event-detail-page .event-prices .table {
margin-bottom: 0;
color: #d8d6e3 !important;
border-color: rgba(255, 255, 255, 0.08);
}
body.ifm-event-detail-page .table> :not(caption)>*>* {
padding: 16px 18px;
background: transparent !important;
border-color: rgba(255, 255, 255, 0.08);
box-shadow: none;
color: #d8d6e3 !important;
}
body.ifm-event-detail-page .event-dates .table td,
body.ifm-event-detail-page .event-prices .table td,
body.ifm-event-detail-page .event-dates .table th,
body.ifm-event-detail-page .event-prices .table th {
color: #d8d6e3 !important;
}
body.ifm-event-detail-page .table-striped>tbody>tr:nth-of-type(odd)>* {
background: rgba(255, 255, 255, 0.02) !important;
}
body.ifm-event-detail-page .priceAdditionDetails,
body.ifm-event-detail-page .priceAdditionIndicate {
color: #e8b464;
}
body.ifm-event-detail-page .extraInfo,
body.ifm-event-detail-page .card.extraInfo {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
color: #d9d8e6;
}
@media (max-width: 991.98px) {
body.ifm-event-detail-page #ctl00_mainSection.content {
padding: 26px 0 72px;
}
body.ifm-event-detail-page .ifm-event-content-inner {
padding: 24px 20px 28px;
}
body.ifm-event-detail-page .ifm-event-sidebar .sticky-custom {
position: static !important;
top: auto !important;
padding: 18px;
}
body.ifm-event-detail-page .event_headline {
font-size: clamp(2.4rem, 11vw, 4rem);
}
}
@media (max-width: 575.98px) {
body.ifm-event-detail-page #ctl00_mainSection.content::before {
width: calc(100vw - 24px);
border-radius: 10px;
}
body.ifm-event-detail-page .dates_venue_tickets,
body.ifm-event-detail-page .event-dates,
body.ifm-event-detail-page .event-prices,
body.ifm-event-detail-page .ifm-event-content-inner,
body.ifm-event-detail-page .ifm-event-sidebar .sticky-custom {
border-radius: 16px;
}
}
/* =====================================================
BOOK-TICKET PAGE
Themed to match the Infamous Spiegel Big Top look
(Bebas Neue + Inter, gold/red on deep navy).
Targets the legacy untouchable HTML by class/id only.
All rules forced with !important so this stylesheet
always wins over platform / Bootstrap defaults.
===================================================== */
/* --- Main section wrapper --- */
#ctl00_mainSection.content {
background: #07070f !important;
padding-top: 0 !important;
padding-bottom: 100px !important;
position: relative !important;
overflow: hidden !important;
//max-width: none !important;
}
#ctl00_mainSection.content::before {
content: "" !important;
position: absolute !important;
top: 120px !important;
left: -160px !important;
width: 420px !important;
height: 420px !important;
background: radial-gradient(circle, rgba(212, 65, 45, 0.16), transparent 70%) !important;
filter: blur(60px) !important;
pointer-events: none !important;
z-index: 0 !important;
}
#ctl00_mainSection.content::after {
content: "" !important;
position: absolute !important;
bottom: 100px !important;
right: -180px !important;
width: 500px !important;
height: 500px !important;
background: radial-gradient(circle, rgba(232, 180, 100, 0.12), transparent 70%) !important;
filter: blur(60px) !important;
pointer-events: none !important;
z-index: 0 !important;
}
/* --- Two-column layout (content + sticky sidebar) --- */
/*
#ctl00_divContent {
position: relative !important;
z-index: 1 !important;
max-width: 1280px !important;
margin-top: 0 !important;
margin-right: auto !important;
margin-bottom: 0 !important;
margin-left: auto !important;
padding: 100px 24px 0 !important;
display: flex !important;
flex-wrap: nowrap !important;
gap: 36px !important;
--bs-gutter-x: 0 !important;
--bs-gutter-y: 0 !important;
color: #c9c9d4 !important;
}
*/
#ctl00_divContentColumnOne {
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: none !important;
width: auto !important;
padding: 0 !important;
}
#ctl00_divContentColumnTwo.content_column_two {
flex: 0 0 280px !important;
max-width: 280px !important;
width: 280px !important;
padding: 0 0 0 28px !important;
border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
align-self: flex-start !important;
//position: sticky !important;
//top: 96px !important;
max-height: calc(100vh - 120px) !important;
overflow-y: auto !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(232, 180, 100, 0.3) transparent !important;
margin-left: 30px;
}
#ctl00_divContentColumnTwo.content_column_two::-webkit-scrollbar {
width: 4px !important;
}
#ctl00_divContentColumnTwo.content_column_two::-webkit-scrollbar-thumb {
background: rgba(232, 180, 100, 0.25) !important;
border-radius: 2px !important;
}
.sticky-custom {
top: 96px !important;
}
/* =====================================================
COUNTDOWN BAR
===================================================== */
#ctl00_ContentPlaceHolder1_pCountdown.alert-danger {
background: rgba(212, 65, 45, 0.08) !important;
border: 1px solid rgba(212, 65, 45, 0.5) !important;
color: #ff8b78 !important;
border-radius: 4px !important;
padding: 14px 20px !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
margin: 0 0 28px !important;
text-align: center !important;
}
/* Hide the invisible defib iframe spacing */
#ctl00_ContentPlaceHolder1_defib_DefibFrame {
display: block !important;
height: 0 !important;
width: 0 !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* =====================================================
EVENT HEADER — image + title + "Event Info" toggle
Platform uses .border-top .border-bottom on the wrapper.
===================================================== */
#ctl00_divContentColumnOne > .border-top.border-bottom {
background: #100d16 !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-top: 1px solid rgba(232, 180, 100, 0.25) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
border-radius: 10px 10px 0 0 !important;
padding: 20px 24px !important;
margin-bottom: 0 !important;
position: relative !important;
overflow: hidden !important;
}
#ctl00_divContentColumnOne > .border-top.border-bottom::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 2px !important;
background: linear-gradient(90deg, #d4412d, #e8b464, #d4412d) !important;
}
/* Title next to thumbnail */
#ctl00_divContentColumnOne > .border-top.border-bottom h3 {
font-family: 'Bebas Neue', Impact, sans-serif !important;
font-weight: 400 !important;
font-size: clamp(24px, 2.5vw, 34px) !important;
letter-spacing: 1.8px !important;
line-height: 1.05 !important;
color: #fff !important;
margin: 0 !important;
text-transform: uppercase !important;
}
/* Thumbnail — round corners and aspect */
#ctl00_divContentColumnOne .buying-process-img {
width: 110px !important;
max-width: 110px !important;
float: none !important;
height: auto !important;
aspect-ratio: 16 / 10 !important;
object-fit: cover !important;
border-radius: 6px !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
margin: 0 16px 0 0 !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
}
/* "Event Info" toggle button */
#eventInfoButton.btn-primary {
background: transparent !important;
border: 1px solid rgba(232, 180, 100, 0.4) !important;
color: #e8b464 !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
padding: 10px 18px !important;
border-radius: 4px !important;
transition: all 0.25s ease !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
white-space: nowrap !important;
box-shadow: none !important;
}
#eventInfoButton.btn-primary:hover {
background: rgba(232, 180, 100, 0.1) !important;
border-color: #e8b464 !important;
color: #fff !important;
}
#eventInfoButton.btn-primary i {
font-size: 12px !important;
color: inherit !important;
}
/* =====================================================
EVENT INFO COLLAPSE PANEL
===================================================== */
#ctl00_ContentPlaceHolder1_eventInfoCollapse.border-bottom {
background: #0c0a14 !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
border-top: none !important;
border-radius: 0 0 10px 10px !important;
padding: 20px 24px !important;
margin-bottom: 32px !important;
color: #c9c9d4 !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
line-height: 1.75 !important;
}
#ctl00_ContentPlaceHolder1_eventInfoCollapse .fa-regular,
#ctl00_ContentPlaceHolder1_eventInfoCollapse .fa-solid {
color: #e8b464 !important;
margin-right: 6px !important;
width: 14px !important;
display: inline-block !important;
}
#ctl00_ContentPlaceHolder1_eventInfoCollapse strong {
color: #fff !important;
font-weight: 600 !important;
letter-spacing: 0.5px !important;
}
#ctl00_ContentPlaceHolder1_eventInfoCollapse span {
color: inherit !important;
}
/* Drop the outer wrapper's margin-bottom so it flows into the panel */
#ctl00_divContentColumnOne > div.mb-2:has(> #ctl00_ContentPlaceHolder1_eventInfoCollapse) {
margin-bottom: 0 !important;
}
/* =====================================================
TICKET SELECTION TABLE
===================================================== */
#ctl00_ContentPlaceHolder1_gvTickets.table.table-bordered {
width: 100% !important;
margin: 0 0 24px !important;
border-collapse: separate !important;
border-spacing: 0 !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 10px !important;
overflow: hidden !important;
background: #100d16 !important;
color: #e2e2f0 !important;
font-family: 'Inter', sans-serif !important;
}
#ctl00_ContentPlaceHolder1_gvTickets thead th {
background: linear-gradient(180deg, #15121c, #0c0a14) !important;
color: #e8b464 !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
padding: 14px 16px !important;
border: none !important;
border-bottom: 1px solid rgba(232, 180, 100, 0.25) !important;
text-align: left !important;
}
#ctl00_ContentPlaceHolder1_gvTickets thead th.textaligncenter {
text-align: center !important;
}
#ctl00_ContentPlaceHolder1_gvTickets thead th.textalignright {
text-align: right !important;
}
/* --- Category group rows (yellow gold bands) ---
The platform sets inline style="background-color:#ECC245 !important" which
we cannot defeat from CSS. We embrace it and style the text for contrast. */
#ctl00_ContentPlaceHolder1_gvTickets tr.catGroupRow > td {
padding: 12px 18px !important;
border: none !important;
border-bottom: 1px solid rgba(212, 65, 45, 0.4) !important;
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0)) !important;
}
#ctl00_ContentPlaceHolder1_gvTickets tr.catGroupRow strong span {
font-family: 'Bebas Neue', Impact, sans-serif !important;
font-weight: 400 !important;
font-size: 22px !important;
letter-spacing: 2px !important;
line-height: 1 !important;
color: #1a1408 !important;
text-transform: uppercase !important;
}
/* --- Ticket option rows --- */
#ctl00_ContentPlaceHolder1_gvTickets tbody tr:not(.catGroupRow) > td {
background: transparent !important;
padding: 16px 18px !important;
border: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
vertical-align: middle !important;
}
#ctl00_ContentPlaceHolder1_gvTickets tbody tr:not(.catGroupRow):last-child > td {
border-bottom: none !important;
}
#ctl00_ContentPlaceHolder1_gvTickets tbody tr:not(.catGroupRow):hover > td {
background: rgba(232, 180, 100, 0.04) !important;
}
/* Ticket name cell */
#ctl00_ContentPlaceHolder1_gvTickets tbody tr:not(.catGroupRow) td:first-child strong span {
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
color: #fff !important;
letter-spacing: 0.5px !important;
text-transform: none !important;
}
#ctl00_ContentPlaceHolder1_gvTickets img[src*="icons/tickets/ticket.png"] {
width: 20px !important;
height: auto !important;
opacity: 0.7 !important;
filter: brightness(0) invert(76%) sepia(44%) saturate(548%) hue-rotate(2deg) brightness(95%) contrast(88%) !important;
margin-right: 10px !important;
}
/* "Extra Info" button — ghost */
#ctl00_ContentPlaceHolder1_gvTickets .btn.btn-outline-secondary {
background: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
color: #c9c9d4 !important;
font-family: 'Inter', sans-serif !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 1.8px !important;
text-transform: uppercase !important;
padding: 6px 12px !important;
border-radius: 4px !important;
margin-left: 12px !important;
transition: all 0.2s ease !important;
white-space: nowrap !important;
}
#ctl00_ContentPlaceHolder1_gvTickets .btn.btn-outline-secondary:hover {
border-color: #e8b464 !important;
color: #e8b464 !important;
background: rgba(232, 180, 100, 0.06) !important;
}
/* Qty select */
#ctl00_ContentPlaceHolder1_gvTickets select.qty.form-select {
background-color: #0c0a14 !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
color: #e2e2f0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
padding: 8px 30px 8px 12px !important;
border-radius: 4px !important;
width: auto !important;
min-width: 70px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23e8b464' d='M3.5 6l4.5 4.5L12.5 6z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 10px center !important;
background-size: 12px 12px !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
#ctl00_ContentPlaceHolder1_gvTickets select.qty.form-select:focus {
border-color: rgba(232, 180, 100, 0.5) !important;
box-shadow: 0 0 0 3px rgba(232, 180, 100, 0.12) !important;
outline: none !important;
}
#ctl00_ContentPlaceHolder1_gvTickets select.qty.form-select option {
background: #0c0a14 !important;
color: #e2e2f0 !important;
}
/* Price cell */
#ctl00_ContentPlaceHolder1_gvTickets .textalignright.textpushdown {
font-family: 'Bebas Neue', Impact, sans-serif !important;
font-size: 22px !important;
font-weight: 400 !important;
letter-spacing: 1px !important;
color: #e8b464 !important;
text-align: right !important;
white-space: nowrap !important;
}
#ctl00_ContentPlaceHolder1_gvTickets td.textaligncenter,
#ctl00_ContentPlaceHolder1_gvTickets th.textaligncenter {
text-align: center !important;
}
#ctl00_ContentPlaceHolder1_gvTickets td.textalignright,
#ctl00_ContentPlaceHolder1_gvTickets th.textalignright {
text-align: right !important;
}
/* Warning block inside rows */
#ctl00_ContentPlaceHolder1_gvTickets .warn-ticket-info.alert-danger {
background: rgba(212, 65, 45, 0.1) !important;
border: 1px solid rgba(212, 65, 45, 0.4) !important;
color: #ff8b78 !important;
border-radius: 4px !important;
padding: 8px 14px !important;
margin: 8px 0 0 !important;
font-size: 12px !important;
letter-spacing: 0.5px !important;
}
/* =====================================================
CONTINUE BUTTON (Submit)
===================================================== */
#ctl00_ContentPlaceHolder1_btnSelectTickets.btn-primary.btn-large {
background: linear-gradient(135deg, #d4412d, #b03028) !important;
border: 1px solid transparent !important;
color: #fff !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
padding: 14px 36px !important;
border-radius: 4px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
box-shadow: 0 10px 28px rgba(212, 65, 45, 0.35) !important;
margin-top: 8px !important;
}
#ctl00_ContentPlaceHolder1_btnSelectTickets.btn-primary.btn-large:hover {
transform: translateY(-2px) !important;
box-shadow: 0 16px 36px rgba(212, 65, 45, 0.55) !important;
filter: brightness(1.08) !important;
}
#ctl00_ContentPlaceHolder1_btnSelectTickets.btn-primary.btn-large:disabled,
#ctl00_ContentPlaceHolder1_btnSelectTickets.btn-primary.btn-large.submitted {
opacity: 0.6 !important;
cursor: not-allowed !important;
transform: none !important;
}
/* =====================================================
MODALS (Extra Info popups)
===================================================== */
.modal-content {
background: #100d16 !important;
border: 1px solid rgba(232, 180, 100, 0.2) !important;
border-radius: 10px !important;
color: #c9c9d4 !important;
}
.modal-header {
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
padding: 18px 22px !important;
background: linear-gradient(180deg, rgba(232, 180, 100, 0.06), transparent) !important;
}
.modal-header .modal-title {
font-family: 'Bebas Neue', Impact, sans-serif !important;
font-weight: 400 !important;
font-size: 26px !important;
letter-spacing: 1.5px !important;
color: #fff !important;
text-transform: uppercase !important;
margin: 0 !important;
}
.modal-header .btn-close {
filter: invert(1) brightness(1.2) !important;
opacity: 0.6 !important;
}
.modal-header .btn-close:hover {
opacity: 1 !important;
}
.modal-body {
padding: 22px !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
line-height: 1.7 !important;
color: #c9c9d4 !important;
}
.modal-body ul {
padding-left: 18px !important;
margin: 6px 0 14px !important;
}
.modal-body ul li {
color: #e8b464 !important;
margin-bottom: 4px !important;
}
.modal-body p {
margin: 0 0 10px !important;
color: #c9c9d4 !important;
}
.modal-body p strong {
color: #fff !important;
}
.modal-footer {
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
padding: 14px 22px !important;
background: #0c0a14 !important;
}
.modal-footer .btn.btn-secondary {
background: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
color: #e2e2f0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
padding: 8px 18px !important;
border-radius: 4px !important;
transition: all 0.2s ease !important;
}
.modal-footer .btn.btn-secondary:hover {
border-color: #e8b464 !important;
color: #e8b464 !important;
background: rgba(232, 180, 100, 0.06) !important;
}
/* =====================================================
ACCOUNT AREA SIDEBAR (matches events.css)
===================================================== */
.rhs_box {
margin-bottom: 28px !important;
background: #100d16 !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 10px !important;
overflow: hidden !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3) !important;
}
.rhs_box .title-bg {
display: block !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 3.5px !important;
text-transform: uppercase !important;
color: #e8b464 !important;
background: linear-gradient(180deg, rgba(232, 180, 100, 0.08), transparent) !important;
border: none !important;
border-bottom: 1px solid rgba(232, 180, 100, 0.18) !important;
padding: 16px 20px !important;
margin: 0 !important;
}
.rhs_box .title-bg::before {
content: "◆ " !important;
color: #e8b464 !important;
margin-right: 4px !important;
}
.rhs_box .list-group {
background: transparent !important;
border-radius: 0 !important;
padding: 6px 0 !important;
}
.rhs_box .list-group-item {
background: transparent !important;
border: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
padding: 12px 20px !important;
color: #c9c9d4 !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
border-radius: 0 !important;
transition: background 0.2s ease, padding-left 0.2s ease !important;
}
.rhs_box .list-group-item:last-child {
border-bottom: none !important;
}
.rhs_box .list-group-item:hover {
background: rgba(232, 180, 100, 0.05) !important;
padding-left: 24px !important;
}
.rhs_box .list-group-item .fa {
color: #e8b464 !important;
margin-right: 10px !important;
font-size: 12px !important;
width: 14px !important;
text-align: center !important;
}
.rhs_box .list-group-item a {
color: #c9c9d4 !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.rhs_box .list-group-item:hover a {
color: #fff !important;
}
.rhs_box .list-group-item a.buy_tickets {
color: #e8b464 !important;
font-weight: 800 !important;
letter-spacing: 2.5px !important;
}
.rhs_box .list-group-item:has(a.buy_tickets) {
background: rgba(212, 65, 45, 0.08) !important;
border-bottom: 1px solid rgba(212, 65, 45, 0.2) !important;
}
.rhs_box .list-group-item:has(a.buy_tickets):hover {
background: rgba(212, 65, 45, 0.14) !important;
}
.rhs_box .list-group-item:has(a.buy_tickets) .fa {
color: #ff8b78 !important;
}
.rhs_box .list-group-item a.buy_tickets:hover {
color: #fff !important;
}
.sub_nav {
padding: 0 !important;
}
/* =====================================================
RESPONSIVE
===================================================== */
@media (max-width: 991.98px) {
#ctl00_mainSection.content {
overflow-x: hidden !important;
}
#ctl00_divContent {
padding: 90px 16px 0 !important;
flex-wrap: wrap !important;
gap: 0 !important;
}
#ctl00_divContentColumnOne {
flex: 1 1 100% !important;
max-width: 100% !important;
width: 100% !important;
min-width: 0 !important;
order: 1 !important;
}
#ctl00_divContentColumnTwo.content_column_two {
flex: 1 1 100% !important;
max-width: 100% !important;
width: 100% !important;
position: static !important;
max-height: none !important;
overflow: visible !important;
border-left: none !important;
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
padding: 32px 0 0 !important;
margin-top: 32px !important;
order: 2 !important;
}
#ctl00_divContentColumnOne > .border-top.border-bottom .row {
--bs-gutter-x: 0.75rem !important;
}
#ctl00_ContentPlaceHolder1_gvTickets tbody tr:not(.catGroupRow) > td {
padding: 14px 12px !important;
}
#ctl00_ContentPlaceHolder1_gvTickets .btn.btn-outline-secondary {
margin-left: 8px !important;
font-size: 9px !important;
letter-spacing: 1.5px !important;
padding: 5px 10px !important;
}
}
@media (max-width: 767.98px) {
#ctl00_divContentColumnOne > .border-top.border-bottom .col-md-10,
#ctl00_divContentColumnOne > .border-top.border-bottom .col-md-2 {
width: 100% !important;
margin-bottom: 10px !important;
}
#ctl00_divContentColumnOne > .border-top.border-bottom .col-md-2 > div {
justify-content: flex-start !important;
}
#ctl00_ContentPlaceHolder1_eventInfoCollapse .col-md-5,
#ctl00_ContentPlaceHolder1_eventInfoCollapse .col-md-7 {
width: 100% !important;
margin-bottom: 12px !important;
}
#ctl00_ContentPlaceHolder1_gvTickets thead {
display: none !important;
}
#ctl00_ContentPlaceHolder1_gvTickets tbody tr:not(.catGroupRow) {
display: grid !important;
grid-template-columns: 1fr auto !important;
grid-template-areas:
"info info"
"qty price" !important;
gap: 10px !important;
padding: 14px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
#ctl00_ContentPlaceHolder1_gvTickets tbody tr:not(.catGroupRow) > td {
border: none !important;
padding: 0 !important;
}
#ctl00_ContentPlaceHolder1_gvTickets tbody tr:not(.catGroupRow) > td:first-child {
grid-area: info !important;
}
#ctl00_ContentPlaceHolder1_gvTickets tbody tr:not(.catGroupRow) > td:nth-child(2) {
grid-area: qty !important;
}
#ctl00_ContentPlaceHolder1_gvTickets tbody tr:not(.catGroupRow) > td:nth-child(3) {
grid-area: price !important;
align-self: center !important;
}
}
@media (max-width: 576px) {
#ctl00_divContent {
padding: 80px 12px 0 !important;
}
#ctl00_divContentColumnOne > .border-top.border-bottom {
padding: 16px !important;
}
#ctl00_divContentColumnOne .buying-process-img {
width: 80px !important;
max-width: 80px !important;
}
#ctl00_divContentColumnOne > .border-top.border-bottom h3 {
font-size: 20px !important;
letter-spacing: 1px !important;
}
#ctl00_ContentPlaceHolder1_gvTickets tr.catGroupRow strong span {
font-size: 18px !important;
letter-spacing: 1.5px !important;
}
#ctl00_ContentPlaceHolder1_btnSelectTickets.btn-primary.btn-large {
width: 100% !important;
padding: 14px 24px !important;
}
}