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

@font-face {
    font-family: MabryPro;
    src: url(../fonts/MabryPro-Bold-Dpb76wdb.woff2) format("woff2"), url(/assets/MabryPro-Bold-BLOjO5YP.woff) format("woff");
    font-weight: 700;
    font-style: normal
}

:root {
    scroll-behavior: smooth;
    font-size: 18px;
    font-family: "DM Sans", sans-serif;
    overflow-x: clip;
    max-width: 100%;
    --h1: 72px;
    --h2: 65px;
    --h3: 55px;
    --h4: 45px;
    --h5: 35px;
    --h6: 30px;
    --text: #333;
    --gray: rgb(183, 190, 198);
    --red: #E8242A;
    --dark-red: #b32025;
    --pink: #F9DFDF;
    --yellow: #FDD407;
    --peach: #FFE1D0;
    --bg-gray: #F4F4F4;
    --gap: 50px;
    --page-width: 100%;
    --side-margin: calc((100vw - var(--page-width)) / -2);
    --clip-1: polygon(0% .8em, .8em 0, 100% 0, 100% calc(100% - .8em), calc(100% - .8em) 100%, 0 100%);
    --clip-2: polygon(0% .4em, .4em 0, 100% 0, 100% calc(100% - .4em), calc(100% - .4em) 100%, 0 100%);
    --buffer: var(--gap);
    /* The width of the background image from the #lets-play-row is 1491px. The height of the jagged top edge is 96px. Dividing these numbers gives us the ratio of width to height. Multiplying the ratio by the width of the screen calculates how tall this part of the background image will be at any screen width. The buffer pushes the content further from this part of the background image. */
    --spike-gap: calc((100vw * (96 / 1491)) + var(--buffer));
    --two-columns: repeat(auto-fill, minmax( min(435px, 100%), 1fr));
    /* There seems to be a bug where if the minimum number for two equally size columns is 435px when viewed on mobile then the contents will spill off the page. If this number is reduced the issue does not happen. */
}

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

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

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

@media (min-width: 1311px) {
     :root {
        --page-width: 1280px;
    }
    .container {
        width: 1280px;
    }
}

@media (max-width: 1200px) {
     :root {
        --gap: 30px;
        --h1: 65px;
        --h2: 55px;
        --h3: 45px;
        --h4: 35px;
        --h5: 30px;
        --h6: 20px;
    }
}

@media (max-width: 992px) {
     :root {
        --h1: 55px;
        --h2: 45px;
        --h3: 35px;
        --h4: 30px;
        --h5: 20px;
        --h6: 18px;
    }
    .container,
    .wrapper {
        /* Extra wiggle room at a breakpoint that needs it  */
        width: 100%;
    }
}

@media (max-width: 767px) {
     :root {
        /* --two-columns: 405px; */
    }
}

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

body {
    color: var(--text);
    position: relative;
    /* max-width: 100%; */
    overflow-x: inherit;
    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: 700;
    line-height: 1em;
    color: rgb(50, 50, 50);
    font-family: "MabryPro", sans-serif;
    letter-spacing: -.05em;
}

h1 {
    font-size: var(--h1);
}

h2 {
    font-size: var(--h2);
}

h3 {
    font-size: var(--h3);
}

h4 {
    font-size: var(--h4);
}

h5 {
    font-size: var(--h5);
}

h6 {
    font-size: var(--h6);
}

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

main:is(#homepage-main, #subpage-main) :is(.checkered h1, .checkered h2) {
    color: white;
}

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

.tilted {
    --notch: .4em;
    border: .1px solid #ffe1d0;
    background: var(--peach);
    color: var(--red);
    transition: .125s rotate ease-in-out;
    rotate: -3deg;
    clip-path: var(--clip-2);
    display: inline-block;
    padding: .18em .25em;
    white-space: nowrap;
}

p {
    color: var(--text);
}

.tilted:is(:hover, :focus) {
    rotate: 0deg;
}

.label {
    font-size: 16px;
    background: var(--pink);
    border: 1px solid #d6000033;
    padding: 2px 1.5em;
    border-radius: .75em;
    display: block;
    width: fit-content;
    color: var(--red);
    margin-bottom: .5em;
    font-weight: 500;
}


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

a {
    color: inherit;
    text-decoration: none;
    transition: .125s color ease-in-out;
}

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

.button-link {
    color: white;
    border: none;
    text-transform: capitalize;
    font-weight: 700;
    padding: .75em 2ch;
    display: block;
    width: fit-content;
    margin: 1.25em 0;
    line-height: 1;
    text-decoration: none;
    clip-path: var(--clip-1);
    position: relative;
    overflow: clip;
    border: .1em solid linear-gradient(-35deg, #323232, #e8242a, #280216);
}

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

.button-link::before,
.button-link::after {
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    background: var(--red);
    position: absolute;
    z-index: -1;
}

.button-link::after {
    transition: .125s width ease-in-out;
    right: unset;
    width: 0;
    background: linear-gradient(200deg, var(--red), var(--dark-red));
}

.button-link:is(:hover, :focus)::after {
    width: 100%;
}

.button-link.big {
    text-transform: uppercase;
    padding: 1.3em 4ch;
}

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

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

.arrow-link {
    background: var(--pink);
    display: block;
    width: fit-content;
    color: var(--red);
    font-weight: bold;
    padding: 1em 3ch;
    position: relative;
    padding-right: calc(3ch + 35.25px - .5ch);
    transition: .125s background ease-in-out, .125s color ease-in-out;
}

.arrow-link::after {
    content: url('../images/arrow-icon.svg.php?fc=var(--red)');
    position: absolute;
    top: calc(50% - 11px);
}

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

.arrow-link:is(:hover,
 :focus)::after {
    content: url('../images/arrow-icon.svg.php?fc=white');
}

.search-button {
    background: white;
    font-size: 30px;
    line-height: 1;
    padding: .5em 2ch;
    position: relative;
    color: var(--red);
    border: 2px solid;
    border-radius: 1.5em;
    display: block;
    align-items: center;
    width: fit-content;
    padding-top: .125em;
    transition: .125s color ease-in-out, .125s border ease-in-out;
}

.search-button::after {
    content: '⚲';
    transform: rotate(45deg);
    display: inline-block;
    margin-left: 0.25ch;
    font-weight: bold;
    font-size: 1.5em;
    position: relative;
    bottom: -.125em;
}

.search-button:is(:hover,
 :focus) {
    color: var(--dark-red);
    text-decoration: none;
}


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

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


/* 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-inline: auto;
    max-width: 100%;
    position: relative;
    height: inherit;
    padding-inline: 15px;
    width: var(--page-width);
}

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

main:is(#homepage-main,
#subpage-main) .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::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--side-margin);
    right: var(--side-margin);
    display: block;
    background-size: 100%;
    z-index: -1;
}

@media (min-width: 768px) {
    .background-row::before {
        background-image: url('../images/online-canasta-tournaments-CkMokENr.png');
    }
}

.background-row.checkered::before {
    background: url(../images/in-person-events-bg-H5rcEVM6.png);
}

main:is(#homepage-main,
#subpage-main) .background-row.checked>.column {
    background: transparent;
    color: white;
}

#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;
}


/* 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;
}


/* Tables */

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

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

@media (max-width: 550px) {
    #subpage-main table {
        font-size: 15px;
        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;
}


/*Feed selector */

.feed-selector {
    text-transform: uppercase;
    display: flex;
    border: 2px solid var(--red);
    border-radius: .25em;
    width: fit-content;
    margin: 1rem auto;
    line-height: 1;
    position: relative;
    align-items: center;
}

.feed-selector::before {
    content: '';
    position: absolute;
    border-radius: .125em;
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: calc(50% - 1px);
    background: var(--red);
    transition: .125s left ease-in-out;
}

.feed-selector:has(label:last-child input:checked)::before {
    left: calc(50% - 1px);
}

.feed-selector label {
    position: relative;
    z-index: 2;
    min-width: 175px;
    text-align: center;
    color: var(--red);
    margin: 0;
    transition: .125s color ease-in-out;
    height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.feed-selector label:has(:checked) {
    color: white;
}

.feed-selector input {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    cursor: pointer;
}


/*Feed items */

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

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; */
}

.event-item {
    border: 2px solid white;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 10px 0px;
    padding: 10px;
    border-radius: 15px;
    background-image: url('../images/tournament-card-B-QJWF5o.png');
    background-size: 101% 100%;
    background-position: center;
    overflow: clip;
    display: flex;
    flex-direction: column;
}

@media (min-width: 1201px) {
    .event-item.instruction {
        display: grid;
        grid-template-columns: 230px 2fr;
    }
}

:is(.event-item,
.news-item) .header {
    background-color: rgb(40, 2, 22);
    background-image: url('../images/footer-logo-Co-9nNj5.svg');
    aspect-ratio: 338 / 171;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    padding: 10px 15px;
    color: white;
    border-radius: 7.5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    @media(min-width: 768px) {
        font-size: 12px;
    }
}

@media (min-width: 1201px) {
    .event-item:is(.instruction) .header {
        aspect-ratio: unset;
        background-size: 70%;
    }
}

:is(.event-item,
.news-item) .main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1em;
    flex-grow: 1;
}

.news-item .main {
    min-height: 294px;
}

:is(.event-item,
.news-item) .main>* {
    margin: 0;
}

.event-item .details {
    color: var(--yellow);
    padding: .25em 1.5ch;
    border-radius: 1em;
    border: 1px solid;
    width: fit-content;
    text-transform: capitalize;
}

:is(.event-item,
.news-item) h3 {
    font-size: 25px;
}

.event-item .description {
    border: 1px solid rgb(224, 222, 220);
    border-left: none;
    border-right: none;
    padding-block: 1rem;
}

:is(.event-item,
.news-item) .description:empty {
    display: none;
}

:is(.event-item,
.news-item) .button-link {
    margin-top: auto;
    width: 100%;
    text-align: center;
}

.start-time:not(:empty)::before {
    content: '· ';
}

.events-feed {
    grid-template-columns: repeat(auto-fill, minmax(min(295px, 100%), 1fr));
    gap: 1rem 30px;
    display: grid;
}


/* 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: 10px;
}

.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: Arial, 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,
#gm-canvas.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;
}


/* Header */

header,
footer {
    font-size: 16px;
    color: black;
    /* --gap: 30px; */
}

header {
    padding-top: 1em;
    display: flex;
    gap: 1rem var(--gap);
    justify-content: space-between;
    align-items: center;
}

header .logo img {
    width: 158px;
    max-width: 100%;
    display: block;
}

header .button-link {
    margin: 0;
}


/* Navigation */

header>nav {
    flex-grow: 1;
}

#nav_menu {
    padding: 0;
}

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

#nav_menu>ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 1ch;
    /* Overwrite BS defaults */
    float: none;
    margin: 0;
}

#nav_menu>.nav>li>a {
    padding: 0;
    position: relative;
    line-height: 1;
    font-weight: 500;
}

#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,
#nav_menu a:is(a:hover,
a:focus) {
    color: var(--red);
    transition: .125s color ease-in-out;
    border: none;
}

#nav_menu .dropdown-menu {
    top: calc(100% + 9px);
    border: none;
}

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

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

.tm-link>a::after {
    content: '™';
}

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


/* 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;
}

button.mobileMenuTrigger {
    background: none;
    border: none;
    margin-left: auto;
    display: block;
}

@media (max-width: 1200px) {
    /* Hide menu, show mobile menu trigger */
    #nav_menu {
        display: none !important;
        /* Overwrite BS defaults */
    }
}

@media (min-width: 1201px) {
    /* Hide menu, show mobile menu trigger */
    button.mobileMenuTrigger {
        display: none;
    }
}

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

#mobileMenuWrapper ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

#mobile-menu {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    /* font-size: 20px; */
}

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

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

.mDropdown {
    display: none;
    border: 1px solid var(--text);
    padding-block: 0.5rem;
    border-left: none;
    border-right: none;
}

.mDropdown.open {
    display: block;
}

#mobileMenuWrapper a:is(:hover,
 :focus) {
    text-decoration: none;
}


/* Main */

main {
    min-height: calc(100vh - var(--headerHeight) - var(--footerHeight));
    max-width: calc(100vw - var(--scrollbarWidth));
}

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

main:is(#subpage-main,
#mms-main)>.row:first-child:has(.col-md-12) {
    text-align: center;
}

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


/* Homepage centered headings */

:is(#tournaments-row,
#lets-play-row,
#insights-row,
#pricing-row,
#connect-row,
#instructions-row,
#instruction-events-row) :is(.label,
.button-link,
.search-button) {
    margin-inline: auto;
}

:is(#tournaments-row,
#lets-play-row,
#insights-row,
#pricing-row,
#connect-row,
#instructions-row,
#instruction-events-row) h2 {
    text-align: center;
}


/* First row styles for homepage/subpages */

.row:first-child:is(#slideshow-row,
#intro-row)::before,
#subpage-main>.row:first-child::before {
    content: '';
    position: absolute;
    top: calc(var(--headerHeight) * -1);
    bottom: 0;
    left: var(--side-margin);
    right: var(--side-margin);
    display: block;
    z-index: -1;
    background: url('../images/hero-section-bg-BqWXOt7P.png');
    background-size: cover;
}

#subpage-main>.row:first-child {
    padding-top: calc(var(--gap) * 2);
}


/* Slideshow row */

.row:first-child:is(#slideshow-row)::before {
    bottom: calc(var(--spike-gap) * -1);
}

#slideshow-row .active.item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-columns: repeat(auto-fill, minmax( min(435px, 100%), 1fr));
    grid-template-columns: var(--two-columns);
    align-items: center;
    /* @media (max-width: 767px) {
        display: flex;
        flex-direction: column;
    } */
}

#slideshow-row img {
    opacity: 0;
    transition: .125s opacity ease-in-out;
}

#slideshow-row .active img {
    opacity: 1;
}

#slideshow-row .carousel-caption {
    all: revert;
    order: -1;
}

#slideshow-row .caption-text {
    font-size: var(--h1);
    line-height: 1.1;
}

#slideshow-row .carousel-indicators {
    display: flex;
    gap: .5ch;
    left: 0;
    right: 0;
    bottom: 0;
    margin: unset;
    justify-content: center;
    width: 100%;
}

#slideshow-row .carousel-indicators li {
    border: none;
    outline: 2px solid var(--red);
    width: 20px;
    height: 20px;
    margin: 0;
}

#slideshow-row .carousel-indicators .active {
    background: var(--red);
}

@media (max-width: 990px) {
    #slideshow-row .caption-text {
        font-size: var(--h2);
    }
}

@media (max-width: 767px) {
    #slideshow-row .caption-text {
        font-size: var(--h3);
    }
}


/* Lets play row */

#lets-play-row {
    padding-top: var(--spike-gap);
}

#lets-play-row.checkered::before {
    background: url('../images/online-play-section-bg-B88z0d5s.png');
    background-size: cover;
    bottom: 10%;
}

#lets-play-row figure {
    background-image: url(../images/online-play-game-img-rSh_3IXh.png);
    background-size: 100% 100%;
    position: relative;
    margin-top: 10vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
}

#lets-play-row figure::before,
#lets-play-row figure::after {
    content: '';
    background-image: url(../images/online-play-game-characters-2-Cl10bi_5.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 20vw;
    position: absolute;
    bottom: calc(100% - var(--spike-gap));
    right: calc(100% - 15vw);
    z-index: -1;
    display: block;
    aspect-ratio: 473 / 484;
}

#lets-play-row figure::after {
    content: '';
    background-image: url(../images/online-play-game-characters-1-BZArjLpD.png);
    left: unset;
    right: calc(var(--side-margin)* .25);
}

#lets-play-row figure img {
    width: 400px;
    aspect-ratio: 215 / 109;
    max-width: 30vw;
    min-width: 200px;
}


/* Tournaments row */

#tournaments-row .events-feed {
    /* Hide feeds so they can be revealed with radio buttons */
    display: none;
}

#tournaments-row:has(#active:checked) #active-events,
#tournaments-row:has(#upcoming:checked) #upcoming-events {
    display: grid;
}


/* Connect row */

#connect-row:not(#mycanvas .row,
#gm-canvas .row) {
    padding-block: calc(var(--gap) * 2) calc(var(--gap) * 4);
    margin-bottom: calc(var(--gap) * -2);
}


/* Join row */

#join-row {
    padding-block: 0;
    --text: white;
    position: relative;
    z-index: 1;
}

#join-row::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 5px solid rgb(255, 119, 122);
    display: block;
    background-image: linear-gradient(285deg, #450002 6.67%, #a90005 75.48%, #de0006 110.93%);
}

#join-row:not(#mycanvas .row,
#gm-canvas .row)>.column {
    display: grid;
    grid-template-columns: var(--two-columns);
}

#join-row section {
    padding: var(--gap);
    max-width: calc(100% - var(--scrollbarWidth));
}

#join-row h2 {
    color: white;
    font-size: var(--h3);
}

@media (min-width: 1201px) {
    #join-row img {
        min-height: 100%;
    }
}

#join-row img {
    margin-top: auto;
}


/* #join-row .button-link {
    border-color: white;
}

#join-row .button-link:not(:is(:hover,
 :focus)) {
    color: var(--red);
}

#join-row .button-link:not(:is(:hover,
 :focus))::before {
    background: white;
} */

#join-row .button-link::before,
#join-row .button-link::after {
    content: none;
}

#join-row .button-link:not(:is(:hover,
 :focus)) {
    color: var(--red);
    background: white;
}

#join-row .button-link:is(:hover,
:focus) {
    color: var(--dark-red);
    background: white;
}

@media (max-width: 970px) {
    #join-row::before {
        border-left: none;
        border-right: none;
    }
    #join-row section {
        padding-left: 0;
    }
}


/* Instructions row */

#instructions-row:not(#mycanvas .row,
#gm-canvas .row) {
    padding-block: calc(var(--gap) * 4) calc(var(--gap) * 2);
    margin-top: calc(var(--gap) * -2);
}


/* Pricing row */

#pricing-row::before {
    background: #F4F4F4;
}

.pricing-list {
    /* Client requested this be removed. Hiding for now incase they change their mind. */
    display: none;
}


/* .pricing-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(295px, 1fr));
    gap: 1rem 30px;
    color: black;
}

.pricing-list>li {
    background: white;
    border: 2px solid var(--gray);
    text-align: left;
}

.pricing-list>li>* {
    padding-inline: 30px;
}

.pricing-list h3 {
    color: var(--red);
    padding-block: 3rem 1.5rem;
    margin-bottom: 0;
}

.pricing-list section {
    padding-block: 2rem 1.5rem;
    border-block: 2px dashed var(--gray);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pricing-list section>* {
    margin: 0;
}

.pricing-list .price {
    font-size: 35px;
    font-family: "MabryPro", sans-serif;
}

.pricing-list .check-list {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding-block: 1.5rem;
    font-weight: bold;
}

.pricing-list .check-list li {
    list-style: none;
    position: relative;
    padding-left: calc(35.25px - .5ch);
    line-height: 1;
}

.pricing-list .check-list li::before {
    content: url(../images/check-icon.svg);
    position: absolute;
    left: -0.5ch;
    top: 2px;
} */

#pricing-row table {
    width: 1080px;
    max-width: calc(100% - var(--scrollbarWidth));
    margin: 1rem auto;
}

#pricing-row thead {
    background: var(--red);
    color: white;
    font-size: 22px;
}

#pricing-row tbody {
    text-align: left;
}

#pricing-row thead th {
    padding: .75rem 1rem;
}

#pricing-row tbody tr {
    border-bottom: 1px solid #8080808c;
}

#pricing-row tbody tr:nth-child(odd) {
    background: #fad3d4a3;
}

#pricing-row tbody tr:nth-child(even) {
    background: #ffe1d082;
}

#pricing-row :is(th,
td):not(:first-child) {
    text-align: center;
}

#pricing-row tbody td {
    padding: .75rem 1rem;
}

#pricing-row table a {
    text-decoration: underline;
}

#pricing-row table a:is(:hover,
 :focus) {
    color: var(--yellow);
}

#pricing-row table svg {
    height: 22px;
    width: 30px;
    min-height: 30px;
    display: inline-block;
    padding: 4px;
    border-radius: 50%;
    border: 1px solid rgb(183, 190, 198);
    vertical-align: top;
}

#pricing-row .fa-check {
    color: #71dd37;
    background: rgb(232, 250, 223);
}

#pricing-row .fa-xmark {
    color: var(--red);
    background: rgb(255, 224, 219);
}

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

@media (max-width: 500px) {
    #pricing-row thead {
        position: sticky;
        top: 0;
    }
    #pricing-row tr {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    #pricing-row tr> :first-child {
        grid-column: 1 / -1;
    }
}


/* Story row */

#story-row:not(#mycanvas .row,
#gm-canvas .row)>.column {
    display: grid;
    grid-template-columns: var(--two-columns);
    gap: 1rem 30px;
}

@media (min-width: 991px) {
    #story-row h2 {
        font-size: 150px;
        line-height: 1;
        position: relative;
    }
    #story-row h2 span {
        font-size: 50px;
        position: absolute;
        top: calc(50% - .5em);
        left: 4ch;
        letter-spacing: 0;
    }
}


/* Insights row */

#insights-row:is(:not(#mycanvas .row,
#gm-canvas .row))>.column {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(305px, 100%), 1fr));
    gap: 1rem 30px;
}

#insights-row :is(.label,
h2) {
    grid-column: 1/-1;
}

#insights-row .label {
    margin-bottom: -5px;
}


/* Learn Canasta page */

#instruction-events {
    grid-template-columns: repeat(auto-fill, minmax(min(405px, 100%), 1fr));
}


/* Stuff spilling into the digital void at screen's edge */

@media (max-width: 500px) {
     :is(#slideshow-row,
    #join-row,
    #story-row)>.column {
        /* padding-right: 30px; */
    }
}


/* Footer */

footer {
    position: relative;
    color: white;
}

#logo-sign-up-section {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between;
    padding-block: var(--gap);
    position: relative;
}

@media (max-width: 990px) {
    #logo-sign-up-section {
        justify-content: space-around;
    }
}

#logo-sign-up-section::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--side-margin);
    right: var(--side-margin);
    background: rgb(40, 2, 22);
    display: block;
    z-index: -1;
}

#logo-sign-up-section>div:first-child {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2ch;
}

footer .logo img {
    width: 214px;
    display: block;
    max-width: 100%;
}

footer .social-list {
    display: flex;
    gap: .5rem 15px;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
}

.social-list svg {
    background: var(--red);
    transition: .125s background ease-in-out;
    border-radius: 50%;
    padding: 3px;
}

.social-list rect {
    display: none;
}

footer h2 {
    font-size: 20px;
    margin-bottom: 1em;
    color: white;
}

#footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: .5rem 30px;
    padding-block: 1rem;
    position: relative;
    flex-wrap: wrap;
}

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

#footer-bottom>* {
    margin: 0;
    color: white;
}

#footer-bottom a {
    text-decoration: underline;
}

#footer-bottom a:is(:hover,
 :focus) {
    color: rgb(40, 2, 22);
}

footer form {
    display: grid;
    grid-template-columns: min-content 1fr;
    align-items: center;
    gap: .75em 1ch;
}

footer form label {
    text-align: right;
    margin: 0;
}

footer .form-horizontal .form-group::before,
footer .form-horizontal .form-group::after {
    content: none;
}

footer form div {
    display: contents;
}

footer form input:is(.form-control) {
    width: 314px;
    max-width: calc(100%);
}

footer form img {
    object-fit: cover;
    width: 50px;
    height: 40px;
    object-position: -6px;
}

footer .button-link {
    background: var(--red);
    grid-column: span 2;
}

.footer-links {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    gap: .5rem 2ch;
}


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


/*--------------------------------------------------------
						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,
#gm-canvas a {
    text-decoration: none;
}

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