.single-event #page,
.single-event #main,
.single-event .site,
.single-event .site-content,
.single-event .content-area,
.single-event article,
.single-event .entry-content {
margin: 0 auto;
padding: 0;
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
html,
body.single-event {
overflow-x: clip; } @media (max-width: 768px) {
.single-event #page,
.single-event #main,
.single-event .site,
.single-event .site-content {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
.entry-content img,
.entry-content table {
max-width: 100%;
height: auto;
}
.single-event #content.site-content {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
.highlight-arrow {
animation: arrow-pulse-accent 1s 1;
animation-fill-mode: none;
} .event-container {
max-width: 90%;
margin: var(--spacing-xl) auto;
overflow: visible;
display: grid;
grid-template-columns: 3fr 1fr; align-items: start;
min-width: 320px;
box-sizing: border-box;
width: 100%;
} @media (min-width: 1200px) and (max-width: 1599px) {
.event-container {
max-width: 96%;
gap: var(--spacing-4xl);
}
}  @media (max-width: 782px) {
.admin-bar .event-container {
padding-top: 126px; }
} @media (max-width: 1199px) {
.event-container {
grid-template-columns: 1fr;
gap: var(--spacing-3xl);
padding: 0 var(--spacing-xl);
margin: var(--spacing-3xl) auto;
width: 100%;
}
} @media (min-width: 1200px) {
.event-container {
display: grid;
grid-template-columns: 1fr var(--sidebar-width-desktop);
gap: var(--spacing-6xl);
min-height: 1200px;
overflow: visible;
}
} @media (min-width: 1600px) {
.event-container {
max-width: var(--container-max-width-desktop);
gap: var(--spacing-6xl);
width: 100%;
}
} @media (max-width: 768px) {
.event-container {
padding: 0 var(--spacing-md);
margin: 0 auto;
width: 100%;
max-width: 100%;
gap: var(--spacing-md);
padding-top: var(--spacing-md);
box-sizing: border-box;
}
.single-event #page,
.single-event #main,
.single-event .site,
.single-event .site-content,
.single-event .content-area,
.single-event article,
.single-event .entry-content {
margin: 0 !important;
padding: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
} @media (max-width: 400px) {
.event-container {
padding: 0 var(--spacing-sm);
margin: 0;
width: 100%;
}
} .event-main-content {
background: var(--color-white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--spacing-4xl) var(--spacing-2xl);
border: 1px solid var(--color-gray-300);
min-width: 0;
overflow-wrap: break-word;
word-wrap: break-word;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow-x: hidden;
} @media (min-width: 1200px) and (max-width: 1599px) {
.event-main-content {
padding: var(--spacing-3xl) var(--spacing-xl);
}
} .event-main-content > * {
max-width: 100%;
box-sizing: border-box;
}
.event-main-content h1,
.event-main-content h2,
.event-main-content h3 {
color: var(--primary-color);
margin-top: 1.5em;
margin-bottom: 0.7em;
}
h1,
h2,
h3,
h4 {
font-family: var(--font-family-primary);
}
.event-main-content h2 {
font-size: 2em;
}
.event-main-content h3 {
font-size: 1.5em;
font-weight: 500;
}
.event-main-content p {
line-height: 1.8;
margin-bottom: 1.2em;
color: var(--text-dark);
} .event-main-content ul,
.event-main-content ol {
margin: 0 0 24px;
margin: 0 0 1.714285714rem;
line-height: 1.714285714;
}
.event-main-content ul {
list-style: disc outside;
}
.event-main-content ol {
list-style: decimal outside;
}
.event-main-content li {
margin: 0 0 0 36px;
margin: 0 0 0 2.571428571rem;
}
.event-main-content ul ul,
.event-main-content ul ol,
.event-main-content ol ul,
.event-main-content ol ol {
margin-bottom: 0;
} .event-main-content img {
max-width: 100%;
height: auto;
} @media (min-width: 1401px) {
.event-main-content {
padding: var(--spacing-6xl) var(--spacing-4xl);
}
} @media (max-width: 768px) {
.event-main-content {
padding: var(--spacing-xl) var(--spacing-md);
margin: 0;
}
} @media (max-width: 400px) {
.event-main-content {
padding: 15px var(--spacing-xs);
margin: 0;
}
} .event-banner {
position: relative;
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
height: clamp(280px, 40vw, 460px);
background-size: cover;
background-position: center bottom;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 0;
gap: var(--spacing-xs);
text-align: center;
}
.event-banner-logo {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: var(--z-banner-logo);
pointer-events: none;
margin-bottom: 0;
}
.event-banner-logo img {
width: 33.6%;
min-width: 160px;
max-width: 380px;
height: auto;
display: block;
margin: 0 auto;
}
.event-banner-content {
width: 100%;
max-width: 1100px;
padding: 0 var(--spacing-3xl);
position: relative;
z-index: var(--z-banner-content);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin: 0 auto;
box-sizing: border-box;
}
.event-banner-content img {
min-width: 200px;
max-width: 50%;
height: auto;
}
.event-title {
color: var(--text-light);
font-size: clamp(1.6em, 6vw, 4.2em);
text-align: center;
font-weight: 700;
line-height: 1.2;
margin: 0;
text-shadow: var(--text-shadow);
}
.event-subtitle {
color: var(--text-light);
font-size: clamp(1em, 2.4vw, 2em);
text-align: center;
font-weight: 500;
line-height: 1.3;
margin: var(--spacing-xs) 0 0 0;
text-shadow: var(--text-shadow-light);
} @media (max-width: 600px) {
.event-banner {
height: 280px;
gap: var(--spacing-xs);
}
.event-banner-content {
max-width: 100%;
padding: 0 var(--spacing-sm);
}
.event-banner-logo img {
width: 67.2%;
min-width: 100px;
max-width: 215px;
}
.event-title {
font-size: 1.8em;
margin-top: var(--spacing-xs);
}
.event-subtitle {
font-size: 1.1em;
margin-top: var(--spacing-sm);
}
}