/* ==========================================================================
   IMPORTS
   ========================================================================== */
@import url("fontawesome-all.min.css");
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,900&effect=fire-animation");

/*
	STARltd by J.Lowell
*/

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */

/* CSS Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea, button, .button {
	appearance: none;
}

/* Box Model */
html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

/* ==========================================================================
   BASIC STYLES
   ========================================================================== */

/* Body */
body {
	background: #fff;
	color: #7c8081;
	font-family: 'Lato', sans-serif;
	font-size: 15pt;
	font-weight: 300;
	letter-spacing: 0.025em;
	line-height: 1.75em;
	-webkit-text-size-adjust: none;
}

body.is-preload *, body.is-preload *:before, body.is-preload *:after {
	animation: none !important;
	transition: none !important;
}

/* Typography */
a {
	transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
	color: #3fb1a3;
	text-decoration: none;
	border-bottom: dotted 1px;
}

a:hover {
	border-bottom-color: transparent;
}

strong, b {
	font-weight: 400;
}

p, ul, ol, dl, table, blockquote {
	margin: 0 0 2em 0;
}

h1, h2, h3, h4, h5, h6 {
	color: inherit;
	font-weight: 300;
	margin-bottom: 1em;
	text-transform: uppercase;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: inherit;
	text-decoration: none;
	border: 0;
}

h2 {
	font-size: 1.5em;
	letter-spacing: 0.1em;
}

h3 {
	font-size: 1.15em;
	letter-spacing: 0.025em;
    margin-top: 0em;
}

table {
    margin: 0 auto;
}

table th {
    padding: 0 1em;
}

table td {
    padding: 0 1em;
}

table td:first-child {
    text-align: left;
}

table td:last-child {
    text-align: right;
}

/* ==========================================================================
   PAGE SECTIONS
   ========================================================================== */

/* Header */
@keyframes reveal-header {
	0% { top: -5em; }
	100% { top: 0; }
}

#header {
	background: #fff;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.075);
	color: inherit;
	cursor: default;
	font-size: 0.7em;
	left: 0;
	padding: 1em 1.5em;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10000;
}

#header a {
    color: inherit;
    border-bottom-color: transparent;
}

#header h1 {
	font-weight: 900;
	margin: 0;
}

#header h1 span {
	font-weight: 300;
}

#header nav {
	letter-spacing: 0.075em;
	position: absolute;
	right: 1.5em;
	text-transform: uppercase;
	top: 0.75em;
}

#header nav ul {
	list-style: none;
	padding-left: 0;
}

#header nav ul li {
	display: inline-block;
	margin-left: .8em;
	padding-left: 0;
}

#header nav ul li > ul {
	display: none;
}

#header nav ul li a {
	border: solid 1px transparent;
	color: inherit;
	display: inline-block;
	line-height: 1em;
	padding: 0.6em 0.75em;
	text-decoration: none;
}

#header nav ul li input[type="button"],
#header nav ul li input[type="submit"],
#header nav ul li input[type="reset"],
#header nav ul li button,
#header nav ul li .button {
	font-size: 1em;
	min-width: 0;
	width: auto;
}

#header nav ul li.submenu > a {
	text-decoration: none;
}

#header nav ul li.submenu > a:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	text-transform: none !important;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f107';
	margin-right: 0.65em;
}

#header nav ul li.active > a,
#header nav ul li:hover > a {
	transition: all 0.2s ease-in-out;
	background: rgba(188, 202, 206, 0.15);
}

#header nav ul li.current > a {
	font-weight: 900;
}

#header.reveal {
	animation: reveal-header 0.5s;
}

#header.alt nav ul li button.nav-link:hover {
    border: solid 1px;
}

#header nav ul li form.nav-form {
    display: inline;
    margin: 0;
    padding: 0;
}

#header.alt {
	/*animation: none;*/
    background-color: rgba(87, 103, 174, 0.45);
	/*background: transparent;*/
	/*box-shadow: none;*/
	color: #fff;
	/*padding: 2em 2.5em;*/
	/*position: absolute;*/
}

/*#header.alt nav {*/
/*	right: 1.5em;*/
/*	top: 0.75em;*/
/*}*/

#header.alt nav ul li.active > a,
#header.alt nav ul li:hover > a {
	border: solid 1px;
}

/* Dropotron */
.dropotron {
	list-style: none;
	padding-left: 0;
	background: #fff;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.075);
	line-height: 2.25em;
	min-width: 13em;
	padding: 1em 0;
	text-transform: uppercase;
	margin-top: calc(-1em + 1px);
}

.dropotron.level-0 {
	font-size: 0.7em;
	font-weight: 400;
	margin-top: 1.5em;
}

.dropotron.level-0:before {
	border-bottom: solid 0.5em #fff;
	border-left: solid 0.5em transparent;
	border-right: solid 0.5em transparent;
	content: '';
	left: 0.75em;
	position: absolute;
	top: -0.45em;
}

.dropotron > li {
	border-top: solid 1px rgba(124, 128, 129, 0.2);
	padding-left: 0;
}

.dropotron > li > a {
	transition: none;
	color: inherit;
	text-decoration: none;
	padding: 0 1em;
	border: 0;
}

.dropotron > li:hover > a {
	background: #645862;
	color: #fff;
}

.dropotron > li:first-child {
	border-top: 0;
}

/* Footer */
#footer {
	color: #7c8081;
	padding: 5em 5em 1em 5em;
	text-align: center;
}

#footer .copyright {
	font-size: 0.8em;
	line-height: 1em;
    padding: 1em;
}

#footer .copyright a {
	color: inherit;
}

#footer .copyright li {
	display: inline-block;
	margin-left: 1em;
	padding-left: 1em;
	border-left: dotted 1px;
}

#footer .copyright li:first-child {
	margin: 0;
	padding: 0;
	border: 0;
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* Section/Article */
section.special, article.special {
	text-align: center;
}

header.major {
	padding-bottom: 2em;
}

header.special {
	margin-bottom: 5em;
	padding-top: 7em;
	position: relative;
	text-align: center;
}

header.special:before, header.special:after {
	border-bottom: solid 1.5px;
	border-top: solid 1.5px;
	content: '';
	height: 7px;
	opacity: 0.1;
	position: absolute;
	top: 1.75em;
	width: 43%;
}

header.special:before {
	left: 0;
}

header.special:after {
	right: 0;
}

header.special h2 {
	margin-bottom: 0;
}

header.special h2 + p {
	margin-bottom: 0;
	padding-top: 1.5em;
}

header.special .icon {
	cursor: default;
	height: 7em;
	left: 0;
	position: absolute;
	text-align: center;
	top: 1em;
	width: 100%;
}

header.special .icon:before {
	font-size: 3.5em;
	opacity: 0.35;
}

.close-text {
    margin-top: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.close-text p {
    font-size: 1.1em;
    text-align: center;
}

/* Center text utility class */
.center-text {
    text-align: center;
}

.edit-overlay {
    display: none;
    position: fixed;
    top: 2em;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 1000;
}

.edit-overlay .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 30px;
    border-radius: 5px;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    width: 90%;
}

.edit-overlay .content > div {
    position: relative;
}

/* Classes for aligning bullet points */
.homepage-statement p {
    position: relative;
}

.aligned-bullets {
    margin: 8px 0;
    padding-left: 24px;
    list-style-type: disc;
    list-style-position: outside;
}

.aligned-bullets li {
    margin: 4px 0;
    padding: 0;
    text-align: left;
}

.statement-bullets {
    margin: 0 auto;
    padding-left: 0;
    list-style: none;
    text-align: left;
    display: inline-block;
}

.statement-bullets li {
    margin: 2px 0;
    padding: 0;
    text-align: left;
}

.statement-bullets li .fas {
    margin-right: 8px;  /* Space between star and text */
    color: #f0cb5a;     /* Optional: golden color for stars */
}

.map-container {
    border: 1px solid #ddd;
    border-radius: 4px;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%; /* 4:3 aspect ratio (450/600 = 0.75) */
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.map-container iframe {
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    .map-container {
        height: 250px !important;
    }
}

/* Buttons */
.buttons-wrapper {
    display: flex;
    justify-content: center; /* Horizontally centers the buttons */
    align-items: center;     /* Vertically centers the buttons, though you can omit this */
    gap: 1em;                /* Adds spacing between the buttons */
    padding-bottom: 2em;
}

/* Add a margin to the button to prevent them from touching the edges on small screens */
.buttons-wrapper a.button {
    margin: 0.5em;
}

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.close-text .button,
.button {
	transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
	background: none;
	border: solid 1px;
	border-radius: 32px;
	color: inherit;
	cursor: pointer;
	display: inline-block;
	font-size: 0.8em;
	font-weight: 900;
	letter-spacing: 2px;
	min-width: 18em;
	padding: 0 0.75em;
	line-height: 3.75em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover,
.button:hover {
	background: rgba(163, 175, 179, 0.15);
	border-color: inherit;
}

input[type="button"].primary,
input[type="submit"].primary,
input[type="reset"].primary,
button.primary,
.button.primary {
	background: #122fe6;
	border-color: #122fe6;
	color: #fff !important;
}

input[type="button"].primary:hover,
input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
button.primary:hover,
.button.primary:hover {
	background: #4359e8 !important;
	border-color: #4359e8 !important;
}

/* Danger button variant */
input[type="button"].danger,
input[type="submit"].danger,
input[type="reset"].danger,
button.danger,
.button.danger {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

input[type="button"].danger:hover,
input[type="submit"].danger:hover,
input[type="reset"].danger:hover,
button.danger:hover,
.button.danger:hover {
    background: #c82333;
    border-color: #c82333;
}

/* Close button variant */
input[type="button"].close,
input[type="submit"].close,
input[type="reset"].close,
button.close,
.button.close {
    /* Reset inherited button styles */
    min-width: unset;
    padding: 0;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    font-size: 18px;
    font-weight: bold;

    /* Close button specific styles */
    position: relative;
    background: #333;
    border: none;
    border-radius: 50%;
    color: #fff;
    width: 30px;
    height: 30px;
    display: inline;
    align-items: center;
    justify-content: center;
}

input[type="button"].close:hover,
input[type="submit"].close:hover,
input[type="reset"].close:hover,
button.close:hover,
.button.close:hover {
    background: #555;
    border-color: #555;
}

input[type="button"].fit,
input[type="submit"].fit,
input[type="reset"].fit,
button.fit,
.button.fit {
	width: 100%;
}

input[type="button"].small,
input[type="submit"].small,
input[type="reset"].small,
button.small,
.button.small {
	font-size: 0.7em;
	min-width: 14em;
	padding: 0.5em 0;
}

.button:disabled {
    background: #9aa7b3;
    cursor: not-allowed;
}

/* Button spacing */
.button:not(:last-child) {
    margin-right: 0.5em;
}

.align-right .button:not(:last-child) {
    margin-right: 0;
    margin-left: 0.5em;
}

/* Icons */
.icon {
	text-decoration: none;
	position: relative;
}

.icon:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	text-transform: none !important;
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
}

.icon.solid:before {
	font-weight: 900;
}

.icon.featured {
	cursor: default;
	display: block;
	margin: 0 0 1.5em 0;
	opacity: 0.35;
	text-align: center;
}

.icon.featured:before {
	font-size: 5em;
	line-height: 1em;
}

.icon.brands:before {
	font-family: 'Font Awesome 5 Brands';
}

.icon.circle {
	transition: all 0.2s ease-in-out;
	border: 0;
	border-radius: 100%;
	display: inline-block;
	font-size: 1.25em;
	height: 2.25em;
	left: 0;
	line-height: 2.25em;
	text-align: center;
	text-decoration: none;
	top: 0;
	width: 2.25em;
}

.icon.circle.fa-2x {
    font-size: 1.75em;
}

.icon.circle:hover {
	top: -0.2em;
}

/* Social Media Icons */
.icon.circle.fa-twitter {
	background: #70aecd;
	color: #fff;
}
.icon.circle.fa-twitter:hover {
	background: #7fb7d2;
}

.icon.circle.fa-x-twitter {
	background: #000000;
	color: #fff;
}
.icon.circle.fa-x-twitter:hover {
	background: #1a1a1a;
}

.icon.circle.fa-facebook-f {
	background: #7490c3;
	color: #fff;
}

.icon.circle.fa-facebook-f:hover {
	background: #829bc9;
}

.icon.circle.fa-github {
	background: #dcad8b;
	color: #fff;
}

.icon.circle.fa-github:hover {
	background: #e1b89b;
}

.icon.circle.fa-dribbble {
	background: #da83ae;
	color: #fff;
}

.icon.circle.fa-dribbble:hover {
	background: #df93b8;
}

.icon.circle.fa-instagram {
	background: #e1306c;
	color: #fff;
}

.icon.circle.fa-instagram:hover {
	background: #e6487c;
}

.icon > .label {
	display: none;
}

.rotate-icon {
    color: #666 !important;
    font-size: 1.2em;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    text-decoration: none !important;
}

.rotate-header {
    display: flex;
    /*justify-content: space-between;*/
    align-items: baseline;
    margin-bottom: 1em;
    gap: 10px; /* Adds space between the h3 and gear icon */
}

/*.rotate-header {*/
/*    display: flex;*/
/*    flex-direction: column; !* Stack items vertically *!*/
/*    align-items: flex-start; !* Align items to the left *!*/
/*    margin-bottom: 1em;*/
/*    gap: 5px; !* Smaller gap between lines *!*/
/*}*/

/*.rotate-header-bottom {*/
/*    display: flex;*/
/*    align-items: center; !* Center align the h4 and icon horizontally *!*/
/*    gap: 10px; !* Space between "Add or Update:" and the icon *!*/
/*}*/

.rotate-icon:hover {
    color: #333 !important;
    /*background-color: #f0f0f0;*/
    background-color: #aaaaaa !important;
    /*transform: rotate(90deg);*/
    transform: scale(1.2);
    /*animation: shake 0.5s;*/
}

.rotate-icon i {
    display: block;
}

/*@keyframes shake {*/
/*  0%, 100% { transform: translate(10px, 10px) rotate(0deg); }*/
/*  10%, 90% { transform: translate(-10px, -20px) rotate(-10deg); }*/
/*  20%, 80% { transform: translate(-30px, 0px) rotate(10deg); }*/
/*  30%, 70% { transform: translate(30px, 20px) rotate(0deg); }*/
/*  40%, 60% { transform: translate(10px, -10px) rotate(10deg); }*/
/*  50% { transform: translate(-10px, 20px) rotate(-10deg); }*/
/*}*/

@keyframes shake {
  0%, 100% { transform: translate(1px, 1px) rotate(90deg); }
  10%, 90% { transform: translate(-1px, -2px) rotate(-10deg); }
  20%, 80% { transform: translate(-3px, 0px) rotate(10deg); }
  30%, 70% { transform: translate(3px, 2px) rotate(0deg); }
  40%, 60% { transform: translate(1px, -1px) rotate(10deg); }
  50% { transform: translate(-1px, 2px) rotate(-10deg); }
}

/* Images */
.image {
	border: 0;
	position: relative;
}

.image:before {
	background: #30252e;
	content: '';
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.image.fit {
	display: block;
}

.image.fit img {
	display: block;
	width: 100%;
}

.image-centertile {
    text-align: center;
}

.image-centertile + p,
.image-centertile p {
    margin-top: 0;
    margin-bottom: 1em; /* Reduce from 2em */
}

.image-centertile img {
    max-width: 300px;
    width: 100%;
    height: auto;
    margin: 0 auto 0 auto;
    display: block;
}

.image.featured img {
	display: block;
	width: 100%;
}

/* Last Season Images */
.image-featured {
    display: block;
    width: 100%;
    height: auto;
    object-fit: fill;
    border-radius: 8px;
    margin: 0 0 1.5em 0;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

.image-featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(131, 211, 201, 0.2), rgba(131, 211, 201, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 1;
    border-radius: 8px;
}

/* Wrappers */
.wrapper {
    border-radius: 8px;
	margin-bottom: 5em;
	padding: 2em;
}

.wrapper.style1 {
	padding: 0;
    text-align: center;
}

.wrapper.style2 {
	background-color: rgba(87, 103, 174, 1);
    padding: 4em;
	color: #fff;
}

/* Prevent image from stretching */
.wrapper.style2 .image-featured {
    flex-shrink: 0; /* Prevent the image from shrinking */
    object-fit: cover; /* If you want to crop instead of letterbox */
    /*max-height: 200px; !* Set a maximum height if needed *!*/
}

.wrapper.style2 .rotate-icon {
    color: #333 !important;
}

.wrapper.style2.faded {
	 background-color: rgba(87, 103, 174, 0.85);
}

.wrapper.style2.gold {
	 background-color: rgba(254, 196, 2, 0.75);
}

.wrapper.style2.alt {
	background-color: #fff;
    color: #858585;
}

.wrapper.style2.white {
	background-color: #fff;
    color: #858585;
}

.wrapper.style2.clear {
	background-color: rgba(0, 0, 0, 0.0) !important;
}

/* Workshop Program Section Hover Effects */
/* Make the row a flex container */
.wrapper.style2.tiles .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* This ensures all columns stretch to the same height */
}

/* Make each column a flex container */
.wrapper.style2.tiles .row [class*="col-"] {
    display: flex;
}

.wrapper.style2.tiles .section-link {
    text-decoration: none !important;
    color: inherit;
    display: flex; /* Important: maintain the flex behavior */
}

.wrapper.style2.tiles a {
    text-decoration: none !important;
    border-bottom: none !important;
}

.wrapper.style2.tiles section {
    position: relative;
    min-width: 250px;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 2em;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    overflow: hidden;
    height: 100%; /* Fill the parent container height */
}

.wrapper.style2.tiles section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(131, 211, 201, 0.1), rgba(131, 211, 201, 0.05));
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	z-index: 1;
}

.wrapper.style2.tiles section:hover::before {
	opacity: 1;
}

.wrapper.style2.tiles section:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 35px rgba(131, 211, 201, 0.2);
	background: rgb(186, 194, 239);
    color: #445188 !important;
}

.wrapper.style2.tiles section .icon.featured {
	transition: all 0.3s ease-in-out;
	position: relative;
	z-index: 2;
}

.wrapper.style2.tiles section:hover .icon.featured {
	transform: scale(1.1);
	color: #5767ae;
}

.wrapper.style2.tiles section header,
.wrapper.style2.tiles section p {
	position: relative;
    flex-grow: 1; /* This will push the "Learn More" button to the bottom */
	z-index: 2;
	transition: all 0.3s ease-in-out;
}

/* Prevent image from stretching */
.wrapper.style2.tiles section .image-featured {
    flex-shrink: 0; /* Prevent the image from shrinking */
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* If you want to crop instead of letterbox */
    /*max-height: 200px; !* Set a maximum height if needed *!*/
}

/* Keep header at natural size */
.wrapper.style2.tiles section header {
    flex-shrink: 0;
}

.wrapper.style2.tiles section:hover header h3 {
	color: #5767ae;
}

/* Learn More Button */
.wrapper.style2.tiles section .learn-more {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(135deg, #50759f, #514e9c);
	color: #302a2a;
	padding: 1em;
	text-align: center;
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transform: translateY(100%);
	transition: transform 0.3s ease-in-out;
	z-index: 3;
	font-size: 0.9em;
	border: 0;
    display: block;
}

.wrapper.style2.tiles section:hover .learn-more {
	transform: translateY(0);
}

.wrapper.style2.tiles section .learn-more:hover {
	background: linear-gradient(135deg, #5780ae, #5a57ae);
	color: white !important;
	border-bottom-color: transparent;
}

/* Overlay Text */
.wrapper.style2.tiles section .overlay-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	background: rgb(186, 194, 239);
    color: #445188;
    padding: 1em;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.05em;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 3;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrapper.style2.tiles section:hover .overlay-text {
    opacity: 80%;
}

.wrapper.style2.tiles section .overlay-text p {
    transform: translate(0, calc(-50% - 1em));
    margin: 0;
}

/* Overlay Image */
.wrapper.style2.tiles section .overlay-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(186, 194, 239, 0.1); /* Optional: subtle background tint */
}

.wrapper.style2.tiles section:hover .overlay-image {
    opacity: 1;
}

.wrapper.style2.tiles section .overlay-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Maintains aspect ratio and fits within bounds */
}

/* ==========================================================================
   LAYOUT COMPONENTS
   ========================================================================== */

/* General alignment classes */
.align-left { text-align: left; }
.align-right { text-align: right; }
.align-center { text-align: center; }

/* Container */
.container {
	margin: 0 auto;
	max-width: 100%;
	width: 1400px;
}

.container.medium {
	width: 1050px;
}

/* Grid System (Row) */
.row {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	align-items: stretch;
	margin-top: -50px;
	margin-left: -50px;
}

.row > * {
	box-sizing: border-box;
	padding: 50px 0 0 50px;
}

.row.no-padding {
    padding: 0;
}

.row.gtr-uniform {
	margin-top: -50px;
}

.row.gtr-uniform > * {
	padding-top: 50px;
}

.row.gtr-uniform > * > :last-child {
	margin-bottom: 0;
}

/* Alignment */
.row.aln-left { justify-content: flex-start; }
.row.aln-center { justify-content: center; }
.row.aln-right { justify-content: flex-end; }
.row.aln-top { align-items: flex-start; }
.row.aln-middle { align-items: center; }
.row.aln-bottom { align-items: flex-end; }

/* Column Widths */
.row > .imp { order: -1; }
.row > .col-1 { width: 8.33333%; }
.row > .col-2 { width: 16.66667%; }
.row > .col-3 { width: 25%; }
.row > .col-4 { width: 33.33333%; }
.row > .col-5 { width: 41.66667%; }
.row > .col-6 { width: 50%; }
.row > .col-7 { width: 58.33333%; }
.row > .col-8 { width: 66.66667%; }
.row > .col-9 { width: 75%; }
.row > .col-10 { width: 83.33333%; }
.row > .col-11 { width: 91.66667%; }
.row > .col-12 { width: 100%; }

/* Column Offsets */
.row > .off-1 { margin-left: 8.33333%; }
.row > .off-2 { margin-left: 16.66667%; }
.row > .off-3 { margin-left: 25%; }
.row > .off-4 { margin-left: 33.33333%; }
.row > .off-5 { margin-left: 41.66667%; }
.row > .off-6 { margin-left: 50%; }
.row > .off-7 { margin-left: 58.33333%; }
.row > .off-8 { margin-left: 66.66667%; }
.row > .off-9 { margin-left: 75%; }
.row > .off-10 { margin-left: 83.33333%; }
.row > .off-11 { margin-left: 91.66667%; }
.row > .off-12 { margin-left: 100%; }

/* Grid Gutters */
.row.gtr-0 {
	margin-top: 0px;
	margin-left: 0px;
}
.row.gtr-0 > * {
	padding: 0px 0 0 0px;
}
.row.gtr-0.gtr-uniform {
	margin-top: 0px;
}
.row.gtr-0.gtr-uniform > * {
	padding-top: 0px;
}

.row.gtr-25 {
	margin-top: -12.5px;
	margin-left: -12.5px;
}
.row.gtr-25 > * {
	padding: 12.5px 0 0 12.5px;
}
.row.gtr-25.gtr-uniform {
	margin-top: -12.5px;
}
.row.gtr-25.gtr-uniform > * {
	padding-top: 12.5px;
}

.row.gtr-50 {
	margin-top: -25px;
	margin-left: -25px;
}
.row.gtr-50 > * {
	padding: 25px 0 0 25px;
}
.row.gtr-50.gtr-uniform {
	margin-top: -25px;
}
.row.gtr-50.gtr-uniform > * {
	padding-top: 25px;
}

.row.gtr-150 {
	margin-top: -75px;
	margin-left: -75px;
}
.row.gtr-150 > * {
	padding: 75px 0 0 75px;
}
.row.gtr-150.gtr-uniform {
	margin-top: -75px;
}
.row.gtr-150.gtr-uniform > * {
	padding-top: 75px;
}

.row.gtr-200 {
	margin-top: -100px;
	margin-left: -100px;
}
.row.gtr-200 > * {
	padding: 100px 0 0 100px;
}
.row.gtr-200.gtr-uniform {
	margin-top: -100px;
}
.row.gtr-200.gtr-uniform > * {
	padding-top: 100px;
}

/* Row alignment for shows_list */
.row.shows-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* Make all columns the same height */
}

.row.shows-grid .col-4 {
    display: flex;
}

.row.shows-grid section {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.row.shows-grid .image-link {
    margin-top: auto; /* Push images to bottom of their containers */
}