/* Template A1RO */

/* Instructions - make sure to change the event and news image width default to 990 */
/* The slideshow and event row will duplicate the images they upload so it fills out the circle with footer JS*/

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

:root {
    --page-width: 100vw;
    --primary: #150431;
    --secondary: #2e1a6e;
    --accent: #5d359c;
    --accent-light: hsl(from var(--accent) h s calc(l* 1.9)); /* very light footer link hover color */
    --link-color: #5d1ac7;
    --text: #5a4e65;
    --light-gray: #f4f1f7;
    --radius: 4px;
    font-size: 16px;
    --side-margin: calc((100vw - var(--page-width)) / -2);
    font-family: "Instrument Sans", sans-serif;
    overflow-x: clip;
    --header-height: 125px;
    --footer-height: 116px;
    interpolate-size: allow-keywords;
}

@media (min-width: 768px) {
    :root {
        /* --page-width: 750px; */
    }
}

@media (min-width: 992px) {
    :root {
        --page-width: 970px;
    }
}

@media (min-width: 1201px) {
    :root {
        --page-width: 1170px;
    }
}

* {
    scroll-margin-top: var(--header-height);
}

body {
    color: var(--text);
    position: relative;
    max-width: 100%;
    overflow-x: inherit;
}

body,
header,
nav,
footer {
    font-family: inherit !important;
    font-size: inherit !important;
    /*^^ Overwrites mms_styles.css*/
}


/*--------------------------------------------------------
	H1 - H6
--------------------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    margin-bottom: .5em;
    padding: 0;
    font-weight: 800;
    line-height: 1.2em;
    text-transform:capitalize;
    color: var(--secondary);
    font-family: "Instrument Sans", sans-serif;
}

h1 {
    font-size: 36px;
    line-height: 1;
}

h1.title:empty {
    /*^^Hides the extra margin that is added on pages without a title*/
    display: none;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 22px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 18px;
}

p+h1,
p+h2,
p+h3,
p+h4 {
    margin-top: 1.25em;
}


/*--------------------------------------------------------
	LINKS
--------------------------------------------------------*/

a {
    color: var(--link-color);
    text-decoration: none;
    transition: .125s color ease-in-out;
}

a:is(:hover, :focus) {
    color: var(--accent);
    /* text-decoration: underline; */
    outline: 0;
}

.button-link {
    color: white;
    border: none;
    text-transform: capitalize;
    font-weight: 600;
    padding: .75em 2ch;
    display: block;
    width: fit-content;
    margin: 1.25em 0;
    transition: .125s background-color ease-in-out, .125s color ease-in-out;
    line-height: 1;
    text-decoration: none;
    background-color: var(--secondary);
    border-radius: .3rem;
    white-space: nowrap;
}

.button-link:first-child {
    margin-top: 0;
}

.button-link:last-child {
    margin-bottom: 0;
}

.button-link:is(:hover, :focus) {
    background-color: var(--accent);
    color: white;
    text-decoration: none;
}


/*--------------------------------------------------------
	Objects
--------------------------------------------------------*/

.offscreen {
    position: absolute;
    left: -200vw;
}

.embed-wrapper {
    /* Essentially remove the div added for Embed Script from the DOM */
    display: contents;
}


/* Wrappers*/

.wrapper {
    /* .wrapper acts as a more symantic stand-in for <container><row><col-md-12></col-md-12></row></container> in sections of this build that don't require stacking columns  */
    margin-right: auto;
    margin-left: auto;
    max-width: 100%;
    position: relative;
    height: inherit;
    padding-left: 15px;
    padding-right: 15px;
    width: calc(var(--page-width) - 30px);
    width: var(--page-width);
}

.full-width {
    /* Make an element span the width of the viewport */
    position: relative;
    left: calc(var(--side-margin) + (var(--scrollbarWidth) / 2));
    right: calc(var(--side-margin) - var(--scrollbarWidth));
    width: 100vw;
}

main:is(#homepage-main, #subpage-main) .full-width:not(#hero-row.full-width)>.column {
    padding-left: 0;
    padding-right: 0;
}

#gm-canvas .full-width,
#gm-canvas .background-row {
    left: unset;
    right: unset;
    width: unset;
}

.background-row {
    position: relative;
}

.background-row:not(#mycanvas .background-row)::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--side-margin);
    right: calc(var(--side-margin) - var(--scrollbarWidth));
    display: block;
    background: var(--light-gray);
}

.background-row:not(#mycanvas .background-row)>.column:not(.board-row .column) {
    background: transparent !important;
    font-size: 16px;
    /* color: white; */
    /* text-align: center;*/
    /* font-weight: bold;  */
    /* max-width: 1200px; */
    /* margin: auto; */
    /* line-height: 1.3; */
}

.background-row:not(#mycanvas .background-row)>.column:not(.column:has(+.column)) {
    /* Since element is extended past where the scrollbar is, extra padding is added to make sure it's content is not hidden under the scrollbar */
    /* padding-right: calc(15px + var(--scrollbarWidth)); */
}

#subpage-main:has(.background-row:last-child) {
    /* If .background-row is the last row, don't include a gap between main and footer */
    margin-bottom: 0;
    padding-bottom: 0;
}

#subpage-main>.background-row:last-child {
    /* If .background-row is the last row, don't include a gap between main and footer */
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .background-row:not(#mycanvas .background-row)>.column {
        font-size: 16px;
    }
}

@media (max-width: 992px) {
    .container,
    .wrapper {
        /* Extra wiggle room at a breakpoint that needs it  */
        width: 100%;
    }
    .full-width,
    .background-row {
        left: var(--side-margin);
        /*right: var(--side-margin);
        width: calc(100vw + var(--scrollbarWidth)); */
    }
}

@media (min-width: 992px) and (max-width: 1201px) {
    .container {
        width: 970px;
    }
}

@media (min-width: 1201px) {
    .container {
        width: 1170px;
    }
}

/* Hr */

:is(#homepage-main, #subpage-main) hr {
    border-top: 3px dashed var(--light-gray);
}

/* Lists */

.three-column-grid {
    display: grid;
    gap: 1rem 20px;
    grid-template-columns: repeat(auto-fill, minmax(min(275px, 100%), 1fr));
}

ul.three-column-grid {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Accordions */

:is(#homepage-main, #subpage-main) .panel {
    background-color: var(--primary);
    border: 0;
    border-top-right-radius: var(--radius);
    border-top-left-radius: var(--radius);
}

:is(#homepage-main, #subpage-main) .panel-default>.panel-heading {
    position: relative;
    color: white;
    background-color: var(--secondary);
    border-color: #ddd;
    padding-right: 65px;
}

:is(#homepage-main, #subpage-main) .panel-default:not(#accordion-row .panel-default)>.panel-heading {
    border-radius: var(--radius);
}

:is(#homepage-main, #subpage-main) .panel-default>.panel-heading:is(:hover, :focus) {
    background-color: var(--accent);
}

:is(#homepage-main, #subpage-main) .panel-title {
    font-weight: 600;
}

:is(#homepage-main, #subpage-main) .panel-title>a::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

:is(#homepage-main, #subpage-main) .panel-title>a:is(:hover, :focus) {
    color: white;
    text-decoration: none;
}

:is(#homepage-main, #subpage-main) .panel-title>a::after {
    content: '\002B';
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: white;
    transition: .125s transform ease-in-out;
    line-height: 1;
}

:is(#homepage-main, #subpage-main) .panel-title>a[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(45deg);
}


/* Tables */

#subpage-main table {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    border-color: #d9d9d9;
}

@media (max-width: 990px) {
    #subpage-main table {
        max-width: 100%;
    }
}

@media (max-width: 550px) {
    #subpage-main table {
        font-size: 16px;
        line-height: 1.25em;
    }
}

#subpage-main *+table {
    margin-top: 2em;
}

#subpage-main table+* {
    margin-top: 3em;
}

#subpage-main table caption {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* #subpage-main table tr {
    border-left: .35em solid white;
    border-right: .35em solid white;
} */

#subpage-main table *+strong {
    margin-top: .75em;
}

#subpage-main table tbody>tr:nth-of-type(even) {
    background: #F6F6F6;
    /* border-left: .35em solid #F6F6F6;
    border-right: .35em solid #F6F6F6; */
}

#subpage-main table td {
    padding: 3px 5px;
    border-color: #d9d9d9;
}

#subpage-main table tr:is(:hover, :focus),
#subpage-main table tbody>tr:nth-of-type(even):is(:hover, :focus) {
    background-color: #ebebeb;
}


/*Feed items */

[class*="item"] img[src=""] {
    /* Don't display a broken image if no image has been added to a feed item */
    display: none;
}

[class*="item"] img {
    max-width: 100%;
    height: auto;
}

main [class*="item"] br {
    /* Remove gaps in description text of feed items */
    /* <main> included in selector to prevent the inclusion of ...-items in the footer*/
    display: none;
}

.feed-item:not(#event-row .feed-item, #news-row .feed-item) {
    margin-bottom: 30px;
}

.feed-item:not(#event-row .feed-item) h3 {
    margin-bottom: .25em;
}

.feed-item img,
img:has(+ .feed-item) {
    max-width: 100%;
    height: auto;
}

.feed-item:not(#event-row .feed-item, #news-row .feed-item) img {
    display: none;
}

/* Contact Form and Newsletter Sign-up */

:is(#homepage-main, #subpage-main) #contact-form {
    container-name: contact-container;
    container-type: inline-size;
}

@media (min-width: 991px) {
    @container contact-container (width < 600px) {
        :is(#homepage-main, #subpage-main) #contact-form .form-group label {
            width: 100%;
            margin-bottom: 5px;
            text-align: left;
        }

        :is(#homepage-main, #subpage-main) #contact-form .form-group:has(input[type="submit"])>div {
            margin-left: 0;
        }
    }
}

/* Modal */

:is(#homepage-main, #subpage-main) .modal .modal-dialog {
    margin-inline: auto;
}

:is(#homepage-main, #subpage-main) .modal .modal-content {
    max-width: calc(100vw - var(--scrollbarWidth));
}

:is(#homepage-main, #subpage-main) .modal .modal-title {
    padding-right: 20px;
}

:is(#homepage-main, #subpage-main) .modal .modal-header button {
    position: absolute;
    top: 15px;
    right: 15px;
}

body.modal-open:has(#homepage-main, #subpage-main) {
    padding-right: 0 !important;
}

:is(#homepage-main, #subpage-main) button[data-toggle="modal"] {
    color: white;
    border: none;
    text-transform: capitalize;
    font-weight: 600;
    padding: .75em 2ch;
    display: block;
    width: fit-content;
    margin: 1.25em 0;
    transition: .125s background-color ease-in-out, .125s color ease-in-out;
    line-height: 1;
    text-decoration: none;
    background-color: var(--secondary);
    border-radius: .3rem;
    white-space: nowrap;
    outline: 0;
}

:is(#homepage-main, #subpage-main) button[data-toggle="modal"]:is(:hover, :focus) {
    background-color: var(--accent);
    color: white;
    text-decoration: none;
}

/* Slideshow defaults */

.carousel {
    font-size: 20px;
}

.carousel-control.left,
.carousel-control.right {
    display: none;
}

.caption-text {
    font-size: 28px;
    font-weight: bold;
    display: block;
    margin-bottom: 0;
}

.alt-text {
    font-size: 16px;
    color: initial;
    margin-bottom: 10px;
}


/*Responsive Nivo Slideshow*/

div[id^=slider-container-FD],
div[id^=slider_FD],
.nivoSlider img {
    max-width: 100% !important;
    height: auto !important;
}


/*Nivo slideshow controls*/

.nivo-prevNav,
.nivo-nextNav {
    background-image: none !important;
    width: 25px !important;
    top: 25% !important;
    /*Fallback for browsers that don't support calc*/
    top: calc( 50% - 50px) !important;
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 75px;
    font-family: "Instrument Sans", sans-serif;
    text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.4);
}

.nivo-prevNav:hover,
.nivo-nextNav:hover {
    text-decoration: none;
    color: #ae0e0d;
    text-shadow: none;
}

.nivo-prevNav {
    left: 10px !important;
}

.nivo-nextNav {
    right: 10px !important;
}

.nivo-prevNav:after {
    content: "‹";
}

.nivo-nextNav:after {
    content: "›";
}


/*Misc. Objects */

.script-row:not(#mycanvas .script-row) {
    /* Allows scripts to be added via the Grid Editor without displaying the padding, etc that would be included on the published page */
    display: none;
}

address {
    margin-bottom: unset;
    /*Overwrites Bootstrap style*/
}


/* Modal */

.modal-header {
    /*Applies to any modal on the site*/
    border: none;
}

.close,
.close:hover {
    opacity: 1;
}

.close svg.menu-trigger {
    width: 30px;
    height: 30px;
}

.close svg.menu-trigger line {
    stroke-width: 4px;
}

.close svg.menu-trigger .line-1 {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left;
    transform-origin: left;
}

.close svg.menu-trigger .line-4 {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right;
    transform-origin: right;
}

.close svg.menu-trigger .line-2 {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: center;
    transform-origin: center;
}

.close svg.menu-trigger .line-3 {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: center;
    transform-origin: center;
}


/* Header */

header {
    padding-block: 20px;
}

header #top-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
}

header .logo-link :is(img, svg) {
    max-width: 100%;
    height: auto;
}

header .logo-link svg circle {
    transform-origin: 20px 21px;
    animation: negspin 13s linear infinite;
}

header #header-buttons {
    list-style-type: none;
    padding-inline-start: 0;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

header #header-buttons a {
    color: white;
    border: none;
    text-transform: capitalize;
    font-weight: 600;
    padding: .5em 1.5ch;
    display: block;
    width: fit-content;
    transition: .125s background-color ease-in-out, .125s color ease-in-out;
    line-height: 1;
    text-decoration: none;
    background-color: var(--secondary);
    border-radius: .3rem;
    white-space: nowrap;
}

header #header-buttons a:is(:hover, :focus) {
    background-color: var(--accent);
    color: white;
    text-decoration: none;
}

@media (max-width: 600px) {
    header #header-buttons {
        display: none;
    }
}


/* Navigation */

header>nav {
    display: flex;
    justify-content: flex-end;
}

#nav_menu {
    padding: 0;
    margin-top: 20px;
    /* margin-bottom: 20px; */
}

#nav_menu::before,
#nav_menu::after,
#nav_menu>ul::before,
#nav_menu>ul::after {
    content: none;
}

#nav_menu>ul {
    display: flex;
    justify-content: flex-start;
    gap: 1rem 35px;
    /* Overwrite BS defaults */
    float: none;
    margin: 0;
    align-items: flex-start;
}

#nav_menu a {
    font-weight: 600;
    text-decoration: none;
    transition: .125s color ease-in-out;
    font-family: "Instrument Sans", sans-serif;
}

#nav_menu>.nav>li>a {
    font-size: 16px;
    padding: 0;
    position: relative;
    line-height: 1;
    color: var(--accent);
}

#nav_menu a:is(a:hover, a:focus) {
    color: var(--secondary);
}

#nav_menu>.nav>li>a::before {
    --size: 3px;
    content: '';
    position: absolute;
    bottom: calc(var(--size) * -2);
    left: 0;
    right: 0;
    height: 0;
    border-bottom: 3px dashed var(--light-gray);
    /* background: var(--accent); */
    opacity: 0;
    transition: .125s opacity ease-in-out;
    z-index: -1;
}

#nav_menu>.nav>li>a:has(.caret)::before {
    right: -15px;
}

#nav_menu>.nav>li>a:is(a:hover, a:focus)::before {
    opacity: 1;
}

#nav_menu>.nav>li>a:focus,
#nav_menu>.nav>li>a:hover {
    /* Overwrite BS defaults */
    background: unset;
}

#nav_menu .nav .open>a,
#nav_menu .nav .open>a:focus,
#nav_menu .nav .open>a:hover {
    transition: .125s background-color ease-in-out;
    background-color: transparent;
    border: none;
}

#nav_menu .caret {
    position: absolute;
    color: var(--text);
    bottom: .3em; 
    margin-left: 5px;
}

#nav_menu a:is(:hover, :focus) .caret {
    color: var(--accent);
}

#nav_menu .dropdown-submenu .caret {
    bottom: unset;
    top: .8em;
}

#nav_menu .caret::after {
    /* content: url(../images/dropdown-arrow.svg); */
}

#nav_menu li:has(.caret) {
    /* Adjust width for absolutely positioned caret */
    padding-right: 15px;
}

#nav_menu .dropdown-menu {
    top: calc(100% + 12px);
    border: none;
    font-size: 1rem;
}

#nav_menu .dropdown-menu:is(.men-level-1, .men-level-2) {
    top: -7px;
    margin-left: 15px;
}

#nav_menu .dropdown-menu>li {
    position: relative;
}

#nav_menu .dropdown-menu>li>a:focus,
#nav_menu .dropdown-menu>li>a:hover {
    color: var(--secondary);
    background: transparent;
}

@media (max-width:990px) {
    #nav_menu {
        /* margin-bottom: 30px; */
        display: block;
        /* Overwrite .collapse that hides desktop menu on smaller screens */
    }
    #nav_menu>.nav>li>a {
        font-size: 16px;
    }
}

@media (max-width:767px) {
    #nav_menu {
        margin-top: 0;
    }
}

@media (max-width:550px) {
    #nav_menu {
        /* margin-bottom: 18px; */
    }
    #nav_menu>.nav>li>a {
        font-size: 16px;
    }
}


/* Site originally had no Mobile Navigation per design from outside designers, but this was abandoned by Ilana during Content Population */

#mobileMenuWrapper {
    position: fixed;
    background: white;
    z-index: 100;
    top: 0;
    bottom: 0;
    left: -200vw;
    overflow-y: auto;
    overflow-x: hidden;
    width: 300px;
    transition: .125s left ease-in-out;
    padding: .5rem 2ch;
    box-shadow: 7px 0 5px rgba(0, 0, 0, 0.1);
}

#mobileMenuWrapper.open {
    left: 0;
}

@media (min-width: 768px) {
    .mobileMenuTrigger {
        display: none;
    }
}

button.mobileMenuTrigger {
    background: none;
    border: none;
    margin-left: auto;
    margin-top: 15px;
    color: var(--secondary);
}

button.mobileMenuTrigger:is(:hover, :focus) {
    color: var(--accent);
}

.mobileMenuTrigger label {
    position: absolute;
    left: -200vw;
}

#mobile-menu {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: 20px;
    list-style-type: none;
    padding-inline-start: 0;
    margin-bottom: 0;
}

.triggerClose {
    display: block;
    margin-left: auto;
}

.triggerClose button {
    background: none;
    border: none;
    font-size: 2em;
    line-height: 1;
}

.mDropdown {
    /* display: none; */
    height: 0;
    overflow: hidden;
    transition: height .125s ease-in-out;
    list-style-type: none;
    padding-inline-start: 1em;
    margin-bottom: 0;
}

.mDropdown:not(.mDropdown .mDropdown) {
    margin-top: 3px;
}

.mDropdown.open {
    /* display: block; */
    height: auto;
}

#mobile-menu>li>a {
    font-weight: 600;
}

#mobile-menu>li>a:is(:hover, :focus) {
    text-decoration: none;
}

#mobile-menu .caret {
    border-top-color: var(--link-color);
    margin-left: 5px;
}

#mobile-menu a:is(:hover, :focus) .caret {
    border-top-color: var(--accent);
}

.mDropdown a {
    font-size: 18px;
    font-weight: 600;
}

.mDropdown a:is(:hover, :focus) {
    text-decoration: none;
}

.mDropdown:not(.mDropdown .mDropdown) a {
    border-left: 3px dashed var(--light-gray);
    padding-left: 5px;
}

#mobileMenuWrapper li:has(.mobile-button) {
    margin-top: 15px;
}

#mobileMenuWrapper .button-link {
    padding: .5em 2ch;
    text-align: center;
    width: unset;
}

@media (max-width: 767px) {
    body:has(.mobileMenuTrigger) #nav_menu {
        display: none;
    }
}


/* Search */

.searchbox {
    position: relative;
    --size: 17.5px;
}

.searchbox .search-input {
    padding: .5em 2ch;
    padding-left: calc(2ch + (var(--size)));
    border: none;
    border-radius: .75em;
    font-size: 1rem;
    width: 507px;
    max-width: 100%;
}

.searchbox .search-button {
    background: url(../images/search-new.svg.php?fc=000);
    background-size: 120%;
    height: var(--size);
    width: var(--size);
    position: absolute;
    right: calc(var(--size) / 1.5);
    top: calc(50% - (var(--size) / 2));
    color: transparent;
    border: none;
    outline: none;
}


/* Main */

main {
    --gap: 55px;
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
}

main>.row {
    position: relative;
    padding-block: var(--gap);
}

main:is(#subpage-main, #mms-main)>.row {
    padding-block: calc(var(--gap) / 2);
}

main:is(#subpage-main, #mms-main)>.row:first-child {
    padding-top: var(--gap);
}

main:is(#subpage-main, #mms-main)>.row:last-child {
    padding-bottom: var(--gap);
}

@media (max-width: 990px) {
    main:is(#homepage-main, #subpage-main)>.row:not(#cta-row, .board-row)>.column:not(:first-child) {
        margin-top: var(--gap);
    }
}

@media (max-width: 767px) {
    main {
        --gap: 45px;
    }
}

@media (max-width: 550px) {
    main {
        --gap: 35px;
    }
}


/* Footer */

footer {
    position: relative;
    padding-block: 40px;
}

footer::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--side-margin);
    right: calc(var(--side-margin) - var(--scrollbarWidth));
    background: var(--primary);
    z-index: -1;
}

footer * {
    color: white;
}

footer a:is(:hover, :focus) {
    color: var(--accent-light);
}

footer section {
    display: flex;
    justify-content: space-between;
}

footer .social-list {
    list-style-type: none;
    padding-inline: 0;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: fit-content;
}

footer .social-list svg rect {
    display: none;
}

footer .social-list svg:is(:hover, :focus) * {
    color: var(--accent-light);
}

@media (max-width: 991px) {
    footer section {
        flex-direction: column;
    }
}

/*--------------------------------------------------------
						Homepage Styles
--------------------------------------------------------*/

/* Hero Row */

#hero-row {
    text-align: center;
    padding-inline: 80px;
}

#hero-row:first-child {
    padding-top: calc(var(--gap) - 20px);
}

#hero-row .column {
    border: 5px dashed var(--light-gray);
    padding: 35px;
}

#hero-row h1 {
    font-size: 120px;
}

#hero-row p {
    max-width: 80ch;
    margin-inline: auto;
    font-size: 40px;
    line-height: 1.2em;
}

@media (max-width: 991px) {
    #hero-row {
        padding-inline: 15px;
    }

    #hero-row.full-width {
        left: unset;
        right: unset;
        width: unset;
    }

    #hero-row h1 {
        font-size: 80px;
    }

    #hero-row p {
        font-size: 30px;
    }
}

@media (max-width: 767px) {
    #hero-row .column {
        padding-inline: 25px;
    }

    #hero-row h1 {
        font-size: 60px;
    }

    #hero-row p {
        font-size: 20px;
    }
}

@media (max-width: 576px) {
    #hero-row h1 {
        font-size: 60px;
    }

    #hero-row p {
        font-size: 20px;
    }
}

@media (max-width: 450px) {
    #hero-row h1 {
        font-size: 42px;
    }

    #hero-row p {
        font-size: 18px;
    }
}

@media (max-width: 350px) {
    #hero-row h1 {
        font-size: 36px;
    }

    #hero-row p {
        font-size: 16px;
    }
}

/* Slide Row - There is footer JS that will add copies of the slides to fill out the circle.
When testing, keep in mind that certain total amounts of slides won't exist since slides will be duplicated if there are not enough,
The minimum amount of slides will be 13. Changing the size of the image, or the caption and it's character count could cause slide overlap without adjustments
*/

#slide-row:not(#mycanvas #slide-row) {
    padding-top: 0;
    animation-name: startRotate;
    animation-duration: 1s; 
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    transform-origin: center calc(((var(--page-width) * 4) + 40px) / 2);
}

@keyframes startRotate {
    /* On page load animation */
    from {
        transform: rotate(35deg);
    }
    to {
        transform: rotate(0deg);
    }
}

#slide-row:not(#mycanvas #slide-row) .column {
    aspect-ratio: 5;
    margin-bottom: 250px;
    display: flex;
    justify-content: center;
    position: relative;
}

#slide-row .carousel {
    aspect-ratio: 2;
    width: calc((var(--page-width) * 4) + 40px);
    position: absolute;
    top: 0;
    /* left: -150%; */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
}

#slide-row .carousel::before {
    content: '';
    position: absolute;
    top: 80%;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(transparent 0%, white 100%);
    z-index: 2;
}

#homepage-main .row:not(#slide-row) {
    z-index: 3;
}

#slide-row  .carousel-inner {
    width: 100%;
    aspect-ratio: 1;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: unset;
    transform-origin: center center;
    animation: 90s linear 0s infinite normal none paused rotateAll;
    will-change: transform;
    animation-play-state: running; 
}

#slide-row  .carousel-inner:is(:hover, :focus) {
    animation-play-state: paused;
}

/* #slide-row  .carousel-inner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
    background-color: red;
} */

@keyframes rotateAll{
    /* Continual Rotation Animation */
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

#slide-row .item {
    display: block;
    left: unset;
    width: 510px;
    margin: auto;
    padding: 5px;
    border-radius: var(--radius);
    background-color: var(--primary);
    
    /* There is footer JS that will set this variable on the main element if this doesn't work in browser */
    /* --slide-count: sibling-count();   */
    /* --slide-index: sibling-index(); */
    --degreecalc: calc(360deg / var(--slide-count, sibling-count()));
    --rotatecount: calc(var(--degreecalc) * (var(--slide-index, sibling-index()) - 1));
}

/* 825px and wider */
@media (min-width: 825px) {
    #slide-row .item {
        position: absolute;
    }

    #slide-row .item.next,
    #slide-row .item.left {
        top: unset;
    }

    #slide-row .item:first-child {
        transform: rotate(0deg) translateY(calc((var(--page-width) * -2) + 50%)); /* -2 comes from .5 for every page width used for width in .carousel */
    }

    #slide-row .item:not(:first-child) {
        transform: rotate(var(--rotatecount)) translateY(calc((var(--page-width) * -2) + 50%));
    }

    /* if there are 12 - 15 slides */
    #slide-row .carousel-inner:has(.item:nth-child(12)):not(:has(.item:nth-child(16))) .item {
        width: 610px;
    }
    #slide-row .carousel-inner:has(.item:nth-child(12)):not(:has(.item:nth-child(16))) img {
        width: 600px;
        height: 300px;
        object-fit: cover;
    }
}

#slide-row .item:not(:has(.carousel-caption)) {
    padding-bottom: calc(40px + 3em);
}

#slide-row .item.next,
#slide-row .item.left {
    opacity: 1;
    display: block;
}

#slide-row .carousel img {
    border-radius: var(--radius);
}

#slide-row .carousel-caption {
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-bottom: 15px;
}

#slide-row .caption-wrapper {
    padding-inline: 25px;
}

#slide-row .caption-text {
    min-height: 3em;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
    text-shadow: none;
}

#slide-row .alt-text {
    display: none;
    margin-bottom: 0;
    text-shadow: none;
}

/* #slide-row .carousel-control.left, 
#slide-row .carousel-control.right {
    display: block;
} */

#slide-row .carousel-indicators {
    display: none;
}

/* Slide Row - Background Lines */

.carousel::after {
    content: '';
    position: absolute;
    top: 470px;
    right: 470px;
    bottom: calc(470px + (100% * -1));
    left: 470px;
    border-top: 6px solid white;
    border-right: 6px solid var(--light-gray);
    border-bottom: 6px solid var(--light-gray);
    border-left: 6px solid var(--light-gray);
    border-radius: 50%;
    z-index: 0;
    animation: spin 30s linear infinite;
    border-style: dashed;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#slide-row  .carousel-inner::after {
    content: '';
    position: absolute;
    top: 490px;
    right: 490px;
    bottom: 490px;
    left: 490px;
    border-top: 6px solid white;
    border-right: 6px solid var(--light-gray);
    border-left: 6px solid var(--light-gray);
    border-bottom: 6px solid white;
    border-radius: 50%;
    z-index: -1;
    animation: spin 40s linear infinite;
    border-style: dashed;
}

#slide-row  .carousel-inner::before {
    content: '';
    position: absolute;
    top: 510px;
    right: 510px;
    bottom: 510px;
    left: 510px;
    border: 6px solid var(--light-gray);
    border-bottom: 6px solid white;
    border-radius: 50%;
    z-index: -1;
    animation: negspin 24s linear infinite;
}

@keyframes negspin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

/* Slide Row Media Queries */

/* 1201 and less */
@media (max-width: 1201px) {
    #slide-row:not(#mycanvas #slide-row) .column {
        margin-bottom: 275px;
    }

    #slide-row .item {
        width: 450px;
    }

    #slide-row .caption-text {
        min-height: 3.6em;
        font-size: 20px;
    }

    #slide-row .item:not(:has(.carousel-caption)) {
        padding-bottom: calc(40px + 1.25em);
    }
}

@media (min-width: 991px) and (max-width: 1201px) {
    /* if there are 12 - 15 slides */
    #slide-row .carousel-inner:has(.item:nth-child(12)):not(:has(.item:nth-child(16))) .item {
        width: 610px;
    }
    #slide-row .carousel-inner:has(.item:nth-child(12)):not(:has(.item:nth-child(16))) img {
        width: 600px;
        height: 300px;
        object-fit: cover;
    }
    #slide-row .carousel-inner:has(.item:nth-child(12)):not(:has(.item:nth-child(16))) .caption-text {
        min-height: 3em;
    }

    /* if there are 21 slides */
    #slide-row .carousel-inner:has(.item:nth-child(22)):not(:has(.item:nth-child(23))) img {
        height: 225px;
        width: 440px;
        object-fit: cover;
    }    
}

@media (max-width: 991px) {
    #slide-row .item {
        width: 400px;
    }

    #slide-row .caption-text {
        font-size: 16px;
        line-height: 1.2;
        min-height: 3em;
    }

    #slide-row .item:not(:has(.carousel-caption)) {
        padding-bottom: calc(40px + 3em);
    }

    .carousel::after {
        top: 390px;
        right: 390px;
        bottom: calc(390px + (100% * -1));
        left: 390px;
    }

    #slide-row .carousel-inner::after {
        top: 410px;
        right: 410px;
        bottom: 410px;
        left: 410px;
    }

    #slide-row .carousel-inner::before {
        top: 430px;
        right: 430px;
        bottom: 430px;
        left: 430px;
    }
}

@media (min-width: 825px) and (max-width: 991px) {
    /* if there are 12 - 15 slides */
    #slide-row .carousel-inner:has(.item:nth-child(12)):not(:has(.item:nth-child(16))) .item {
        width: 560px;
    }
    #slide-row .carousel-inner:has(.item:nth-child(12)):not(:has(.item:nth-child(16))) img {
        width: 550px;
        height: 250px;
        object-fit: cover;
    }
    #slide-row .carousel-inner:has(.item:nth-child(12)):not(:has(.item:nth-child(16))) .caption-text {
        min-height: 2em;
    }
}

@media (max-width: 825px) {
    /* Disable the rotation styles */

    #slide-row:not(#mycanvas #slide-row) .column {
        display: block;
        aspect-ratio: unset;
        margin-bottom: 0;
    }

    #slide-row .carousel::before,
    #slide-row .carousel-inner::before,
    #slide-row .carousel-inner::after,
    #slide-row .carousel::after {
        display: none;
    }

    #slide-row .carousel {
        display: block;
        aspect-ratio: unset;
        width: unset;
        position: relative;
        overflow: unset;
    }

    #slide-row .carousel-inner {
        display: block;
        animation: unset;
        aspect-ratio: unset;
        position: relative;
        overflow: hidden;
    }

    #slide-row .item {
        display: none;
        width: 100%;
        margin: auto;
    }

    #slide-row .carousel-inner>.active, 
    #slide-row .carousel-inner>.next, 
    #slide-row .carousel-inner>.prev {
        display: block;
    }

    /* #slide-row .item:first-child,
    #slide-row .item:not(:first-child) {
        transform: unset;
    } */

    /* New Styles */

    #slide-row .carousel img {
        width: 100%;
    }

    #slide-row .carousel-caption {
        padding-inline: 45px;
    }

    #slide-row .caption-text {
        min-height: 3em;
    }

    #slide-row .carousel-control.left, 
    #slide-row .carousel-control.right {
        display: block;
        background-image: none;
        text-indent: -9999px;
    }

    #slide-row .carousel-control.left {
        top: calc(((100vw - 40px) * .6) - 100px);
        right: auto;
        bottom: 0;
        left: 0;
        margin: auto;
        vertical-align: middle;
        text-align: center;
        padding-right: 5px;
        width: 40px;
        height: 40px;
    }

    #slide-row .carousel-control.left:after {
        content: url(../images/left-arrow.svg);
        width: 40px;
        height: 40px;
        display: block;
        position: relative;
        top: 0;
        left: 10px;
        text-indent: 0;
    }

    #slide-row .carousel-control.right {
        top: calc(((100vw - 40px) * .6) - 100px);
        right: 0;
        left: auto;
        bottom: 0;
        margin: auto;
        vertical-align: middle;
        text-align: center;
        padding-left: 5px;
        width: 40px;
        height: 40px;
    }

    #slide-row .carousel-control.right:after {
        content: url(../images/right-arrow.svg);
        width: 40px;
        height: 40px;
        display: block;
        position: relative;
        top: 0;
        right: 10px;
        text-indent: 0;
    }
}


/* Intro Row */

#intro-row {
    padding-inline: 40px;
}

#intro-row h2 {
    max-width: 900px;
    margin-inline: auto;
    font-size: 40px;
    font-weight: 400;
    color: var(--text);
    text-transform: unset;
    text-align: center;
}

#intro-row h2:last-child {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    #intro-row {
        padding-inline: 25px;
    }

    #intro-row h2 {
        font-size: 30px;
    }
}

@media (max-width: 767px) {
    #intro-row {
        padding-inline: 15px;
    }

    #intro-row h2 {
        font-size: 24px;
    }
}


/* Accordion Row */

#accordion-row img,
:is(#homepage-main, #subpage-main) img.dashed {
    outline: 3px dashed var(--light-gray);
    padding: 8px;
    margin-bottom: 15px;
}

#accordion-row .panel {
    margin-bottom: 0;
}

#accordion-row .panel-body {
    border-bottom-right-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
    border-left: 3px dashed var(--light-gray);
    border-right: 3px dashed var(--light-gray);
}

#accordion-row .panel-collapse:last-of-type .panel-body {
    border-bottom: 3px dashed var(--light-gray);
}

#accordion-row .panel-body>*:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Profile-row */

#profile-row:not(#mycanvas #profile-row) {
    padding-block: calc(var(--gap) - 20px);
    transition: .125s transform ease-in-out;
}

@media (min-width: 620px) {
    #profile-row:not(#mycanvas #profile-row) {
    /* Animation */
        transform-origin: center center;
        animation: startToRotate linear forwards;
        animation-timeline: view();
        animation-range: entry 0% cover 45%;
    }
}

@keyframes startToRotate {
    from {
        transform: rotate(45deg);
    }
    to {
        transform: rotate(0deg);
    }
}

#profile-row:not(#mycanvas #profile-row)>.column>* {
    --profile-image-count: sibling-count(); 
    --profile-image-count: var(--profile-count); 
}

#profile-row:not(#mycanvas #profile-row) .column {
    display: grid;
    min-height: 850px;
}

#profile-row h2 {
    margin-inline: auto;
    margin-bottom: 0;
    max-width: 185px;
    grid-row: 1 / 3;
    grid-column: 1 / 2;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 42px;
    transition: .125s transform ease-in-out;
}

@media (min-width: 620px) {
    /* Animation doesn't apply to smaller screen widths */
    #profile-row:not(#mycanvas #profile-row) h2 {
        /* Animation */
        transform-origin: center center;
        animation: counterRotateHeader linear forwards;
        animation-timeline: view();
        animation-range: entry 0% cover 45%;
    }
}

@keyframes counterRotateHeader {
    from {
        transform: rotate(-45deg);
    }
    to {
        transform: rotate(0deg);
    }
}

#profile-row:not(#mycanvas #profile-row) a:has(img) {
    display: inline-block;
    width: fit-content;
    height: fit-content;
}
#profile-row:not(#mycanvas #profile-row) a:has(img),
#profile-row:not(#mycanvas #profile-row) img:not(a>img) {
    grid-area: 1/1;
    /* if changing below line, change in animation below too */
    offset: circle(300px) calc(100% * (var(--profile-index, sibling-index()) - 1) / (var(--profile-image-count) - 1)) 0deg; /* creates a circular path and spaces the images equally along the path */
    transition: .125s offset ease-in-out;
    z-index: 2;
}

@media (min-width: 620px) {
    /* Animation - doesn't apply to smaller screen widths */
    #profile-row:not(#mycanvas #profile-row) a:has(img),
    #profile-row:not(#mycanvas #profile-row) img:not(a>img) {
        transform-origin: center center;
        animation: counterRotate linear forwards;
        animation-timeline: view();
        animation-range: entry 0% cover 45%;
    }
}
@keyframes counterRotate {
    from {
        offset: circle(300px) calc(100% * (var(--profile-index, sibling-index()) - 1) / (var(--profile-image-count) - 1)) -45deg;
    }
    to {
        offset: circle(300px) calc(100% * (var(--profile-index, sibling-index()) - 1) / (var(--profile-image-count) - 1)) 0deg;
    }
}

#profile-row:not(#mycanvas #profile-row) img {
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--accent);
    outline: 3px dashed var(--light-gray);
    outline-offset: 10px;
}

/* Changes depending on how many are added - nth-child count includes the h2 element */

/* Four or more */
#profile-row:not(#mycanvas #profile-row) a:has(img),
#profile-row:not(#mycanvas #profile-row) img:not(a>img) {
    max-width: calc(1500px / var(--profile-image-count));
}
/* Three or less */
#profile-row:not(#mycanvas #profile-row) .column:not(:has(img:nth-child(5), a:nth-child(5))) a:has(img),
#profile-row:not(#mycanvas #profile-row) .column:not(:has(img:nth-child(5), a:nth-child(5))) img:not(a>img) {
    max-width: 290px;
}
/* Three */
#profile-row:not(#mycanvas #profile-row) .column:not(:has(img:nth-child(5), a:nth-child(5))):has(img:nth-child(4), a:nth-child(4)) a:has(img),
#profile-row:not(#mycanvas #profile-row) .column:not(:has(img:nth-child(5), a:nth-child(5))):has(img:nth-child(4), a:nth-child(4)) img:not(a>img) {
    transform: translateY(-450px);
    offset: circle(500px) calc(38% * (var(--profile-index, sibling-index()) - 1) / (var(--profile-image-count) - 1)) 0deg; /* if changing, change in animation below too */
}
#profile-row:not(#mycanvas #profile-row) .column:not(:has(img:nth-child(5), a:nth-child(5))):has(img:nth-child(4), a:nth-child(4)) {
    display: block;
    margin-bottom: -350px;
}
@media (min-width: 991px) {
    /* Three Animation */
    #profile-row:not(#mycanvas #profile-row) .column:not(:has(img:nth-child(5), a:nth-child(5))):has(img:nth-child(4), a:nth-child(4)) a:has(img),
    #profile-row:not(#mycanvas #profile-row) .column:not(:has(img:nth-child(5), a:nth-child(5))):has(img:nth-child(4), a:nth-child(4)) img:not(a>img) {
        animation: counterRotateThree linear forwards;
    }
    @keyframes counterRotateThree {
        from {
            offset: circle(500px) calc(38% * (var(--profile-index, sibling-index()) - 1) / (var(--profile-image-count) - 1)) -45deg;
        }
        to {
            offset: circle(500px) calc(38% * (var(--profile-index, sibling-index()) - 1) / (var(--profile-image-count) - 1)) 0deg;
        }
    }
}
/* Two or less */
#profile-row:not(#mycanvas #profile-row) .column:not(:has(img:nth-child(4), a:nth-child(4))) {
    margin-block: -260px;
}

@media (max-width: 991px) {
    #profile-row:not(#mycanvas #profile-row) .column {
        min-height: 700px;
    }

    #profile-row:not(#mycanvas #profile-row) a:has(img), 
    #profile-row:not(#mycanvas #profile-row) img:not(a>img) {
        max-width: calc(var(--width-number) / var(--profile-image-count));
        --offset-number: calc((100vw / 3.3));
        --width-number: calc(100vw * 1.25);
        offset: circle(var(--offset-number)) calc(100% * (sibling-index() - 1) / (var(--profile-image-count) - 1)) 0deg; /* if changing, change in animation below in the next mq too */
    }

    /* Three or less */
    #profile-row:not(#mycanvas #profile-row) .column:not(:has(img:nth-child(5), a:nth-child(5))) a:has(img),
    #profile-row:not(#mycanvas #profile-row) .column:not(:has(img:nth-child(5), a:nth-child(5))) img:not(a>img) {
        max-width: 210px;
    }

    /* Three */
    #profile-row:not(#mycanvas #profile-row) .column:not(:has(img:nth-child(5), a:nth-child(5))):has(img:nth-child(4), a:nth-child(4)) a:has(img),
    #profile-row:not(#mycanvas #profile-row) .column:not(:has(img:nth-child(5), a:nth-child(5))):has(img:nth-child(4), a:nth-child(4)) img:not(a>img) {
        transform: translateY(-275px);
        offset: circle(320px) calc(38% * (var(--profile-index, sibling-index()) - 1) / (var(--profile-image-count) - 1)) 0deg; /* if changing, change in animation below in one of the next mq too */
    }
    #profile-row:not(#mycanvas #profile-row) .column:not(:has(img:nth-child(5), a:nth-child(5))):has(img:nth-child(4), a:nth-child(4)) {
        display: block;
        margin-bottom: -280px;
    }
}
@media (min-width: 620px) and (max-width: 991px) {
    /* Animation -  doesn't apply to smaller screen widths */
    #profile-row:not(#mycanvas #profile-row) a:has(img), 
    #profile-row:not(#mycanvas #profile-row) img:not(a>img) {
        animation: counterRotateMedium linear forwards;
    }
    @keyframes counterRotateMedium {
        from {
            offset: circle(var(--offset-number)) calc(100% * (var(--profile-index, sibling-index()) - 1) / (var(--profile-image-count) - 1)) -45deg;
        }
        to {
            offset: circle(var(--offset-number)) calc(100% * (var(--profile-index, sibling-index()) - 1) / (var(--profile-image-count) - 1)) 0deg;
        }
    }
}

@media (min-width: 730px) and (max-width: 991px) {
    /* Three Animation */
    #profile-row:not(#mycanvas #profile-row) .column:not(:has(img:nth-child(5), a:nth-child(5))):has(img:nth-child(4), a:nth-child(4)) a:has(img),
    #profile-row:not(#mycanvas #profile-row) .column:not(:has(img:nth-child(5), a:nth-child(5))):has(img:nth-child(4), a:nth-child(4)) img:not(a>img) {
        animation: counterRotateMediumThree linear forwards;
    }
    @keyframes counterRotateMediumThree {
        from {
            offset: circle(320px) calc(38% * (var(--profile-index, sibling-index()) - 1) / (var(--profile-image-count) - 1)) -45deg;
        }
        to {
            offset: circle(320px) calc(38% * (var(--profile-index, sibling-index()) - 1) / (var(--profile-image-count) - 1)) 0deg;
        }
    }
}

@media (max-width: 730px) {
    /* Three or less */
    #profile-row:not(#mycanvas #profile-row) .column:not(:has(img:nth-child(5), a:nth-child(5))) a:has(img),
    #profile-row:not(#mycanvas #profile-row) .column:not(:has(img:nth-child(5), a:nth-child(5))) img:not(a>img) {
        max-width: 175px;
    }

    /* Three */
    #profile-row:not(#mycanvas #profile-row) .column:not(:has(img:nth-child(5), a:nth-child(5))):has(img:nth-child(4), a:nth-child(4)) a:has(img),
    #profile-row:not(#mycanvas #profile-row) .column:not(:has(img:nth-child(5), a:nth-child(5))):has(img:nth-child(4), a:nth-child(4)) img:not(a>img) {
        transform: translateY(-235px);
        offset: circle(275px) calc(38% * (var(--profile-index, sibling-index()) - 1) / (var(--profile-image-count) - 1)) 0deg; /* if changing, change in animation below too */
    }
}

@media (min-width: 620px) and (max-width: 730px) {
    /* Three Animation */
    #profile-row:not(#mycanvas #profile-row) .column:not(:has(img:nth-child(5), a:nth-child(5))):has(img:nth-child(4), a:nth-child(4)) a:has(img),
    #profile-row:not(#mycanvas #profile-row) .column:not(:has(img:nth-child(5), a:nth-child(5))):has(img:nth-child(4), a:nth-child(4)) img:not(a>img) {
        animation: counterRotateSmall linear forwards;
    }
    @keyframes counterRotateSmall {
        from {
            offset: circle(275px) calc(38% * (var(--profile-index, sibling-index()) - 1) / (var(--profile-image-count) - 1)) -45deg;
        }
        to {
            offset: circle(275px) calc(38% * (var(--profile-index, sibling-index()) - 1) / (var(--profile-image-count) - 1)) 0deg;
        }
    }
}

/* At 620px or less - normal grid layout instead of the circular layout */
@media (max-width: 620px) {
    #profile-row:not(#mycanvas #profile-row) .column {
        min-height: unset;
        grid-template-columns: repeat(2, 1fr);
        gap: 5px 45px;
        padding-inline: 25px;
    }

    #profile-row h2 {
        grid-row: unset;
        grid-column: 1 / -1;
        max-width: unset;
    }

    #profile-row:not(#mycanvas #profile-row) a:has(img), 
    #profile-row:not(#mycanvas #profile-row) img:not(a>img) {
        grid-area: unset;
        offset: unset;
        max-width: unset;
        margin: 20px auto;
    }
}

@media (max-width: 450px) {
    #profile-row:not(#mycanvas #profile-row) .column {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* CTA Row */

#cta-row:not(#mycanvas #cta-row) {
    display: flex;
    gap: 15px;
}

#cta-row .column {
    border-radius: var(--radius);
    padding: 25px 30px;
    background-color: var(--light-gray);
    display: flex;
    flex-direction: column;
}

#cta-row h2 {
    font-size: 24px;
}

#cta-row p:has(.button-link) {
    margin-top: auto;
}

#cta-row .button-link {
    margin-inline: auto 0;
}

#cta-row.active .button-link {
    animation-name: changeColor;
    animation-duration: .5s;
    animation-fill-mode: forwards;
}

#cta-row.active .button-link:is(:hover, :focus) {
    background-color: var(--accent) !important;
}

@keyframes changeColor {
    0% {
        background-color: var(--secondary);
    }
    50% {
        background-color: var(--accent);
    }   
    100% {
        background-color: var(--secondary);
    }
}

#cta-row .column:nth-child(2) .button-link {
    animation-delay: .5s;
}
#cta-row .column:nth-child(3) .button-link {
    animation-delay: 1s;
}
#cta-row .column:nth-child(4) .button-link {
    animation-delay: 1.5s;
}
#cta-row .column:nth-child(5) .button-link {
    animation-delay: 2s;
}
#cta-row .column:nth-child(6) .button-link {
    animation-delay: 2.5s;
}

@media (max-width: 991px) {
    #cta-row:not(#mycanvas #cta-row) {
        padding-inline: 15px;
        flex-direction: column;
    }

    #cta-row:not(#mycanvas #cta-row)::before,
    #cta-row:not(#mycanvas #cta-row)::after {
        display: none;
    }
}

/* Event Header Row */

#event-header-row {
    padding-bottom: 0;
}

#event-header-row h2 {
    font-size: 42px;
}

/* Event Row - There is footer JS that will add duplicate feed-items to fill out the circle and rotate it when dragging */

#event-row:not(#mycanvas #event-row) {
    width: 100vw;
    height: 1000px; /* this is used to clip most of the circle */
    left: var(--side-margin);
    right: calc(var(--side-margin) - var(--scrollbarWidth));
    overflow: clip;
    padding-bottom: 0;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    touch-action: pan-y;
    user-select: none;
}

#event-row:not(#mycanvas #event-row)+.row {
    margin-top: calc(var(--gap) * -2);
    padding-top: 0;
}

/* Fade out for clipped part */
#event-row:not(#mycanvas #event-row)::before {
    content: '';
    position: absolute;
    top: 80%;
    bottom: 0;
    left: var(--side-margin);
    right: calc(var(--side-margin) + var(--scrollbarWidth));
    display: block;
    background: linear-gradient(transparent 0%, white 100%);
    z-index: 2;
}

#event-row:not(#mycanvas #event-row) .column {
    aspect-ratio: 1; /* The column must be square and the full height of the circle for dragging to work properly */
    height: 5400px; /* If this is changed, change the transform origin too */
    max-width: 1170px; 
    /* width: 5400px; */
    margin-inline: auto;
    float: unset;
    position: relative;
    display: flex;
    gap: 15px;
    touch-action: pan-y;
    will-change: transform;
    backface-visibility: hidden;
    transform-origin: 50% 2700px;/* 2700 is half the height - If you change this, also change it in the footer object center calculation */
}

/* Helper for finding transform origin of column */
/* #event-row .column::after {
    content: '';
    position: absolute;
    top: 2700px;
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 1px;
    height: 1px;
    background-color: rgb(0, 255, 0);
} */

#event-row:not(#mycanvas #event-row) .column.active .feed-item {
    cursor: grabbing;
}

#event-row .feed-item {
    width: 585px;
    padding-block: 5px 20px;
    padding-inline: 5px;
    background-color: var(--primary);
    border-radius: var(--radius);
    z-index: 2;

    position: absolute;
    top: 0;
    left: 50%;

    --eventdegree: calc(360deg / var(--event-count, sibling-count())); /* 20 deg for 6 * 4 items */
    --eventrotation: calc(var(--eventdegree) * (var(--event-index, sibling-index()) - 1));
    transform-origin: 0% 2700px;  /* 2700 is half the height */
    scroll-snap-align: start;
    cursor: grab;
}

/* Helper for finding transform origin of feed item */
/* #event-row .feed-item::after {
    content: '';
    position: absolute;
    top: 2700px;
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 1px;
    height: 1px;
    background-color: #f0f;
}
#event-row .feed-item:first-of-type::after {
    background-color: rgb(111, 0, 255);
} */

#event-row .feed-item:first-child {
    transform: rotate(0deg) translate(-50%, 0%);
}

#event-row .feed-item:not(:first-child) {
    transform: rotate(var(--eventrotation)) translate(-50%, 0%);
}

#event-row .feed-item img {
    width: 100%;
    border-radius: var(--radius);
    margin-bottom: 20px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

#event-row .event-feed-content {
    padding-inline: 25px;
}

#event-row .feed-item * {
    color: white;
}

#event-row .feed-item h3 {
    font-size: 18px;
    min-height: 2em;
}

#event-row .feed-item p {
    margin-bottom: 0;
    min-height: 5em;
}

/* Event Row Background Lines */

#event-row:not(#mycanvas #event-row) .column::before {
    content: '';
    position: absolute;
    top: 665px;
    right: -1450px; /* right and left determines the size of the circle - top will need to be adjusted if changed to center it - rotate it all the way around and check */
    left: -1450px;
    aspect-ratio: 1;
    border-top: 6px solid white;
    border-right: 6px solid var(--light-gray);
    border-bottom: 6px solid white;
    border-left: 6px solid var(--light-gray);
    border-radius: 50%;
    z-index: 0;
    animation: spin 12s linear infinite;
}

#event-row:not(#mycanvas #event-row) .column::after {
    content: '';
    position: absolute;
    top: 665px;
    right: -1450px; 
    left: -1450px;
    aspect-ratio: 1;
    outline: 6px dashed var(--light-gray);
    outline-offset: 25px;
    border-radius: 50%;
    z-index: 0;
    color: var(--light-gray);
    animation: spin 60s linear infinite;
}


@media (min-width: 992px) {
    /* 14 - 15 Feed Items - widens */
    #event-row:not(#mycanvas #event-row) .column:has(:nth-child(14)):not(:has(:nth-child(16))) .feed-item {
        width: 700px;
    }

    /* 12 - 13 Feed Items - widens */
    #event-row:not(#mycanvas #event-row) .column:has(:nth-child(12)):not(:has(:nth-child(14))) .feed-item {
        width: 800px;
    }

    /* 12 - 15 Feed Items */
    #event-row:not(#mycanvas #event-row) .column:has(:nth-child(12)):not(:has(:nth-child(16))) .feed-item img {
        height: 375px;
    }

    /* 12 - 14 Feed Items - arrows added to give indication that you can rotate */
    #event-row:not(#mycanvas #event-row) .column:has(:nth-child(12)):not(:has(:nth-child(15))) .feed-item:first-of-type .event-feed-content {
        position: relative;
    }

    #event-row:not(#mycanvas #event-row) .column:has(:nth-child(12)):not(:has(:nth-child(15))) .feed-item:first-of-type .event-feed-content::before {
        content: url(../images/left-round-arrow.svg);
        position: absolute;
        bottom: 0;
        left: -120px;
        width: 96px;
        height: 32px;
    }

    #event-row:not(#mycanvas #event-row) .column:has(:nth-child(12)):not(:has(:nth-child(15))) .feed-item:first-of-type .event-feed-content::after {
        content: url(../images/right-round-arrow.svg); /* You spin me right round like a record */
        position: absolute;
        bottom: 0;
        right: -120px;
        width: 96px;
        height: 32px;
    }
}

/* Event Row MQs */
@media (max-width: 1201px) {
    #event-row:not(#mycanvas #event-row) .column {
        height: 4800px; /* If this is changed, change the transform origin too */
        transform-origin: 50% 2400px;/* 2400 is half the height - If you change this, also change it in the footer object center calculation */
    }

    #event-row .feed-item {
        width: 525px;
        transform-origin: 0% 2400px;  /* 2400 is half the height */
        scroll-snap-align: start;
    }

    /* Event Row Background Lines */

    #event-row:not(#mycanvas #event-row) .column::before {
        top: 650px;
        width: 3500px;
        height: 3500px;
        left: calc(50% - 1750px);
    }

    #event-row:not(#mycanvas #event-row) .column::after {
        top: 650px;
        width: 3500px;
        height: 3500px;
        left: calc(50% - 1750px);
    }
} 

/* Returns to normal, non-rotating display at 991px*/
/* If you change the screen width below, also change it in the footer JS MQs*/
@media (max-width: 991px) {
    #event-row:not(#mycanvas #event-row) {
        height: unset;
        width: unset;
        padding-bottom: var(--gap);
    }

    #event-row:not(#mycanvas #event-row) .column {
        aspect-ratio: unset;
        height: unset;
        max-width: unset;
        flex-direction: column;
        transform-origin: unset;
        cursor: default;
        transform: rotate(0deg) !important;
    }

    #event-row:not(#mycanvas #event-row) .column.active {
        cursor: default;
    }

    #event-row .feed-item {
        width: 100%;
        position: static;
        transform-origin: unset;
    }

    #event-row .feed-item:not(.feed-item.og-event) {
        display: none;
    }

    #event-row .feed-item:first-child,
    #event-row .feed-item:not(:first-child) {
        transform: unset;
    }

    #event-row:not(#mycanvas #event-row)::before,
    #event-row .column::before,
    #event-row .column::after {
        display: none;
    }

    #event-row:not(#mycanvas #event-row)+.row {
        margin-top: 0;
        padding-top: var(--gap);
    }

    #event-row .feed-item {
        cursor: unset;
    }

    #event-row .feed-item p {
        min-height: unset;
    }
}

/* Goes to display grid at 767 - 991px - Returns to normal flex display at 767px*/
@media (min-width: 767px) and (max-width: 991px) {
    #event-row:not(#mycanvas #event-row) .column {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    #event-row .feed-item:first-of-type {
        grid-column: 1 / -1;
    }

    #event-row .feed-item:nth-last-child(1 of .og-event):nth-child(even) {
        grid-column: 1 / -1;
    }

    #event-row .feed-item:nth-last-child(1 of .og-event):nth-child(even) img {
        aspect-ratio: 5 / 2;
    }
}

@media (max-width: 500px) {
    #event-row .event-feed-content {
        padding-inline: 15px;
    }
}


/* Highlight Row */

#highlight-row .column:last-of-type {
    padding: 40px 30px;
    border-radius: var(--radius);
    background-color: var(--light-gray);
}

#highlight-row .column:last-of-type .button-link {
    margin-inline: auto 0;
}

@media (max-width: 991px) {
    #highlight-row .column:last-of-type {
        padding-inline: 15px;
        border-radius: unset;
    }
}


/* News Row */

#news-row .column {
    position: relative;
}

#news-row .feed-item {
    position: relative;
    padding: 11px 15px;
    border-radius: var(--radius);
}

#news-row .feed-item:is(:hover, :focus) {
    background-color: var(--light-gray);
}

#news-row img:has(+ .feed-item) {
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    position: absolute;
    top: 70px;
    left: 15px;
    outline: 3px dotted var(--light-gray);
    outline-offset: 8px;
    margin: 15px;
}

#news-row img:has(+ .feed-item):first-of-type {
    z-index: 4;
}

#news-row img:has(+ .feed-item:is(:hover, :focus))  {
    z-index: 5;
}

#news-row:not(#gm-canvas #news-row) .feed-item h3>a {
    color: var(--accent);
}

#news-row:not(#gm-canvas #news-row) .feed-item h3>a:is(:hover, :focus) {
    color: var(--secondary);
}

#news-row:not(#gm-canvas #news-row) .feed-item h3>a::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#news-row .news-feed-cat {
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 5px;
}

#news-row .news-feed-cat::before {
    content: '|';
    color: var(--accent);
    font-weight: 700;
    margin-right: 5px;
}

#news-row .feed-item p:last-child {
    margin-bottom: 0;
}

#news-row .button-link {
    margin-inline: auto 0;
}

/* Make room for the absolutely positioned image based on how many feed items there are */
/* Default - If there are two or less feed items with images */
#news-row .column:has(img) {
    min-height: 380px;
}
#news-row img:has(+ .feed-item) {
    max-width: 250px;
    height: 250px;
}
#news-row .column:has(img) .feed-item {
    margin-left: 310px;
}

/* If there are three feed-items with images */
#news-row:has(img) .column:has(.feed-item:nth-of-type(3)) {
    min-height: 485px;
}
#news-row:has(img) .column:has(.feed-item:nth-of-type(3)) img:has(+ .feed-item) {
    max-width: 400px;
    height: 400px;
}
#news-row:has(img) .column:has(.feed-item:nth-of-type(3)) .feed-item {
    margin-left: 440px;
}

#news-row img:has(+ .feed-item) {
    transform-origin: center center;
    animation: rotateCircle linear forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
    transition: .125s transform ease-in-out;
}

@keyframes rotateCircle {
    from {
        transform: rotate(-45deg)
    }
    to {
        transform: rotate(0deg)
    }
}

@media (max-width: 991px) {
    #news-row img:has(+ .feed-item) {
        position: relative;
        top: 5px;
        float: left;
        margin-right: 55px;
    }

    #news-row img:has(+ .feed-item:is(:hover, :focus)) {
        outline: 3px dotted hsl(from var(--light-gray) h s calc(l* .925));
    }

    #news-row .feed-item {
        margin-block: 15px;
    }

    #news-row .feed-item::after {
        content: '';
        display: table;
        clear: both;
    }

    /* Default - If there are two or less feed items with images */
    #news-row .column:has(img) {
        min-height: unset;
    }

    #news-row .column:has(img) .feed-item {
        margin-left: 0;
    }

    #news-row img:has(+ .feed-item) {
        max-width: 275px;
        height: 275px;
    }

    /* If there are three feed-items with images */
    #news-row:has(img) .column:has(.feed-item:nth-of-type(3)) {
        min-height: unset;
    }

    #news-row:has(img) .column:has(.feed-item:nth-of-type(3)) .feed-item {
        margin-left: 0;
    }

    #news-row:has(img) .column:has(.feed-item:nth-of-type(3)) img:has(+ .feed-item) {
        max-width: 275px;
        height: 275px;
    }
}

@media (max-width: 700px) {
    #news-row img:has(+ .feed-item) {
        display: block;
        position: static;
        float: unset;
        margin-inline: auto;
        margin-block: 30px;
        outline: 3px dotted hsl(from var(--light-gray) h s calc(l* .925));
    }
}

@media (max-width: 345px) {
    /* Default - If there are two or less feed items with images */
    #news-row img:has(+ .feed-item) {
        max-width: 250px;
        height: 250px;
    }

    /* If there are three feed-items with images */
        #news-row:has(img) .column:has(.feed-item:nth-of-type(3)) img:has(+ .feed-item) {
        max-width: 250px;
        height: 250px;
    }
}

/*--------------------------------------------------------
						Subpage Styles
--------------------------------------------------------*/

/* Board Page */

.board-row:not(#mycanvas .board-row) {
    padding-inline: 15px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.board-row::before,
.board-row::after {
    display: none;
}

.board-row img {
    width: 100% !important;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-top-right-radius: calc(var(--radius) * 2);
    border-top-left-radius: calc(var(--radius) * 2);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    margin-bottom: 15px;
}

.board-row:not(#mycanvas .board-row) .column {
    width: 100%;
    border: 2px solid var(--light-gray);
    border-radius: calc((var(--radius) * 2) + 2px);
    padding: 0;
    background-color: white;
}

.board-row.background-row:not(#mycanvas .board-row.background-row) .column {
    border: solid 2px hsla(from var(--light-gray) h s l / 0.2);
}

.board-row :is(p, h1, h2, h3, h4, h5, h6) {
    padding-inline: 15px;
}

.board-row .column p:first-of-type {
    margin: 0 0 .25em;
    font-size: 18px;
    font-weight: 600;
}

@media (max-width: 991px) {
    .board-row:not(#mycanvas .board-row) {
        padding-inline: 15px;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .board-row:not(#mycanvas .board-row) .column {
        margin-top: 0;
    }
}

@media (max-width: 767px) {
    .board-row:not(#mycanvas .board-row) {
        grid-template-columns: repeat(1, 1fr);
    }

    .board-row:not(#mycanvas .board-row) .column {
        max-width: 450px;
        margin-inline: auto;
    }
}



/*--------------------------------------------------------
						MMS Styling
--------------------------------------------------------*/

#mms-main *[face] {
    font-family: inherit;
    font-size: inherit;
}

#mms-main *[style*="erdana"],
#mms-main *[font-family*="erdana"],

/*^^Targets both elements with Verdana and verdana spec'd*/

#mms-main div,
#mms-main span:not([class^="fa"]),

/*Allows the Font Awesome icons in the Grid Editor to show*/

#mms-main td,
#mms-main tr,
#mms-main table,
#mms-main input,
#mms-main textarea,
#mms-main label
/*^^Styles are meant to overwrite the MMS styles that set everything to Verdana*/

{
    font-family: inherit !important;
}


/*-----------Grid Page Editor-------------*/

#mycanvas a {
    text-decoration: none;
}

#mycanvas a::before {
    position: initial;
    bottom: initial;
    left: initial;
    right: initial;
    background: initial;
    height: initial;
    transition: initial;
    display: initial;
    z-index: initial;
}