.event_background {
background: center / cover no-repeat;
min-height: 36.4vw;
}
.event_content {
background: white;
border-radius: 10px;
margin-top: -200px;
}
.event_content__header {
display: flex;
}
.event_content .date_container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 10px 0px 15px 0px;
background: var(--tertiary);
color: white;
transition: 0.3s;
min-height: 156px;
min-width: 156px;
}
.event_content .date_container > * {
margin: 0;
}
.event_content .date_container .month {
text-transform: uppercase;
font-weight: 800;
font-size: 41px;
}
.event_content .date_container .day {
-webkit-text-stroke-color: var(--white) !important;
font-size: 70px;
}
.event_content__header_content {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 40px;
}
.event_content__header_content h1 {
font-weight: 800;
margin: 0;
}
.event_content__header_content a:not(.button) {
color: var(--font);
}
.event_content__header_content a:not(.button):hover {
color: var(--secondary);
}
.event_content__body {
display: flex;
flex-flow: row wrap;
align-items: center;
gap: 10px;
padding: clamp(15px, 4vw, 40px);
}
.event_content__body .event_metadata {
flex-grow: 1;
padding: var(--gap-m) var(--gap-s) var(--gap-m) calc(var(--gap-s) + 40px);
background: var(--gap-s) / 20px no-repeat var(--white-smoke);
text-transform: uppercase;
font-weight: 700;
}
.event_content__body .event_metadata span {
font-weight: 400;
}
.event_content__body .event_metadata.event_class,
.event_content__body .event_metadata.dates,
.event_content__body .event_metadata.categories,
.event_content__body .event_metadata.divisions {
grid-column: span 2;
}
.event_content__body .event_metadata.divisions {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3e%3cpath fill='%23274892' fill-rule='evenodd' d='M10 20a10 10 0 1 0 0-20 10 10 0 0 0 0 20Zm3.4-10.4c.4-.6.6-1.4.6-2 0-2-1.8-3.6-4-3.6S6 5.6 6 7.6a4.6 4.6 0 0 0 .6 2l1.7 3.7L10 17l3.4-7.3Z' clip-rule='evenodd'/%3e%3cpath fill='%23274892' d='M13 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3e%3c/svg%3e");
}
.event_content__body .event_metadata.dates {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='21' height='20' fill='none'%3e%3cpath fill='%23274892' fill-rule='evenodd' d='M5.1 1.7a10 10 0 1 1 11.1 16.6 10 10 0 0 1-11-16.6Zm6.7 7.7 1.7-.8c.6-.2 1.2 0 1.5.6.3.6 0 1.3-.6 1.6l-3.3 1.4a1 1 0 0 1-1 0 1.2 1.2 0 0 1-.6-1v-6a1.2 1.2 0 1 1 2.3 0v4.2Z' clip-rule='evenodd'/%3e%3c/svg%3e");
}
.event_content__body .event_metadata.event_class {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3e%3cg clip-path='url(%23a)'%3e%3cpath fill='%23274892' fill-rule='evenodd' d='M4.4 1.7a10 10 0 1 1 11.2 16.6A10 10 0 0 1 4.4 1.7Z' clip-rule='evenodd'/%3e%3cpath fill='%23F5F5F5' d='m15.9 5.7-3.3-1a.1.1 0 0 0-.1 0c-.2.6-.5 1-1 1.4a2.5 2.5 0 0 1-3 0 2.4 2.4 0 0 1-1-1.4L4 5.6 4 6v.3l.4 2.2.1.2h.3l1.2.2H6V9L6 15v.2a.4.4 0 0 0 .4.2H14l.1-.2.1-.2-.2-6V9h.2l1.2-.2.3-.1v-.2l.5-2.2v-.3l-.2-.2Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='white' d='M20 20H0V0h20z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
}
.event_content__body .event_metadata.categories {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='21' height='20' fill='none'%3e%3cpath fill='%23274892' d='M10.3 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm.1 4.6a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7Zm0 13.9A8.4 8.4 0 0 1 4 15.7c.4-2.2 4.3-2.6 6.2-2.6 2 0 5.8.4 6.2 2.6a8.4 8.4 0 0 1-6.2 2.8Z'/%3e%3c/svg%3e");
}
.event_content__body .event_metadata.address {
grid-column: span 4;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3e%3cpath fill='%23274892' fill-rule='evenodd' d='M10 20a10 10 0 1 0 0-20 10 10 0 0 0 0 20Zm3.4-10.4c.4-.6.6-1.4.6-2 0-2-1.8-3.6-4-3.6S6 5.6 6 7.6a4.6 4.6 0 0 0 .6 2l1.7 3.7L10 17l3.4-7.3Z' clip-rule='evenodd'/%3e%3cpath fill='%23274892' d='M13 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3e%3c/svg%3e");
}
.event_content__body .event_metadata.entry {
flex-basis: calc(50% - 5px);
box-sizing: border-box;
padding: var(--gap-m) var(--gap-s) var(--gap-m) var(--gap-s);
}
.event_content__fc{
display: flex;
flex-direction: column;
gap: var(--gap-xl);
}
.event_content__fc .the_downloads{
grid-template-columns: 1fr 1fr;
}
.event_content__fc .event_content__title{
color: var(--primary);
font-weight: bold;
background: left / 28px 30px no-repeat url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='28' height='30' fill='none'%3e%3cpath fill='%23274892' d='M10.7 1.7c0-.5.4-1 1-1l4-.7a1 1 0 0 1 1.2 1v27.5c0 .5-.4 1-1 1l-4 .5a1 1 0 0 1-1.2-1V1.6Z'/%3e%3cpath fill='%23F93A3C' d='M17.8 4.7c0-.5.4-1 1-1l4.4-.5a1 1 0 0 1 1.2 1v18.9c0 .5-.5 1-1 1l-4.5.4a1 1 0 0 1-1-1V4.6ZM3.2 6.7c0-.5.5-1 1-1l4.4-.5a1 1 0 0 1 1.2 1v18.9c0 .5-.4 1-1 1l-4.4.4a1 1 0 0 1-1.2-1V6.6Z'/%3e%3cpath fill='%23274892' d='M0 14c0-.5.4-1 1-1h.2a1 1 0 0 1 1.1 1v4.8c0 .5-.4 1-1 1h-.2a1 1 0 0 1-1.1-1V14ZM25.3 10.5c0-.5.4-1 1-1h.2a1 1 0 0 1 1.1 1v4.7c0 .6-.4 1-1 1.1h-.2a1 1 0 0 1-1-1v-4.8Z'/%3e%3c/svg%3e");
padding-left: 48px;
}
@media (max-width: 1080px) {
.event_content__body .event_metadata {
grid-column: span 3 !important;
}
.event_content__body .event_metadata.address {
grid-column: span 6 !important;
order: 1;
}
.event_content__body .event_metadata.entry {
order: 2;
}
}
@media (max-width: 800px) {
.event_content__header_content {
flex-direction: column;
align-items: flex-start;
gap: var(--gap-s)
}
.event_content__fc .the_downloads{
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.event_content__body {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.event_content__body > * {
width: 100%;
box-sizing: border-box;
}
.event_content .date_container {
min-height: 100px;
min-width: 100px;
}
.event_content .date_container .month {
font-size: 21px;
text-transform: uppercase;
font-weight: 800;
margin: 0;
}
.event_content .date_container .day {
font-size: 50px;
margin: 0;
}
.event_content__header {
flex-direction: column;
}
}
@media (max-width: 450px) {
.event_content__header_content .button {
min-width: 0;
}
}