/* VARIABLES */

:root, :before, :after {
    --mobile-break-point: 1001px;
    
    --body-bg-color: #fff;
    --body-font:"TTChocolates";
    --body-font-size:1.6vw;
    --body-letter-spacing:.04vw;
    --mobile-body-font-size:5vw;

    /* colors */
    --color-primary:#5495a8;
    --color-secondary:rgba(252, 227, 104, 0.802);

    /* h */
    --h-font-family: "Olyford";
    --h-margin-top:.2vw;
    --h-margin-bottom:.2vw;

    --h1-font-size:3vw;
    --mobile-h1-font-size:9vw;

    --h2-font-size:2vw;
    --mobile-h2-font-size:6vw;

    --h3-font-size:1.5vw;
    --mobile-h3-font-size:4vw;

    /* header */
    --header-gradient-color:#555;
    --header-gradient-color-left:#7f7d7d;
    --header-text-color:#fff;
    --header-height:3.5vw;
    --header-title-font-size:2vw;
    --header-title-left-padding:.5vw;
    --header-title-font-vertical-adjust:.3vw;
    --header-login-form-text-size:1vw;

    --mobile-index-header-text-color:#fff;
    --mobile-index-header-title-font-size:var(--mobile-h3-font-size);
    --mobile-index-header-height:8vw;
    --mobile-index-header-title-left-padding:1.5vw;
    --mobile-index-header-login-link-font-size:3vw;

    /* footer */
    --index-footer-logo-width:7vw;
    --mobile-index-footer-logo-width:15vw;
    --footer-gradient-color: #555;
    --footer-gradient-color-left: #7f7d7d;
    --footer-text-color: #fff;

    /* page status */
    --page-status-background-color: #f0fbff;
    --page-status-outline-color: var(--color-primary);

    /* index */
    --index-section-bg-color:#fff;

    --index-section-hero-text-align:center;
    --index-section-hero-subtitle-margin:2vw 25vw;
    --index-section-hero-logo-width:20%;
    --mobile-index-section-hero-logo-width:35%;
    --mobile-index-section-hero-subtitle-margin:7vw 10vw;

    --index-section-background-padding:0;
    --index-section-background-padding-bottom:3vw;
    --index-section-background-title-padding:5vw 3vw;
    --index-section-background-title-gradient:linear-gradient(to bottom, #d5e4e4ba, #ffffff);
    --mobile-index-section-background-title-padding:10vw;

    --index-section-bubble-width:50%;
    --index-section-bubble-border: 0vw var(--color-secondary) solid;
    --index-section-bubble-border-radius:4vw;
    --index-section-bubble-padding:3vw;
    --index-section-bubble-margin: 5vw auto;
    --mobile-index-section-bubble-width:80%;
    --mobile-index-section-bubble-margin: 10vw auto;
    --mobile-index-section-bubble-padding: 6vw;
    --mobile-index-section-bubble-border-radius:8vw;
    --mobile-index-section-bubble-border: 0vw var(--color-secondary) solid;

    --action-button-font-size:1.3vw;
    --action-button-letter-spacing:.1vw;
    --action-button-text-transform:uppercase;
    --action-button-font-weight:none;
    --action-button-text-color: #000;
    --action-button-bg-color: #b4e1e2;
    --action-button-bg-color-secondary:var(--color-secondary);
    --action-button-padding:1.2vw;
    --action-button-margin-top:1vw;
    --action-button-border-radius:1vw;

    --action-button-hover-right-gradient:#ddd;
    --action-button-hover-left-gradient:#fafafa;
    --action-button-hover-letter-spacing:.2vw;

    --mobile-action-button-font-size:3.5vw;
    --mobile-action-button-letter-spacing:.4vw;
    --mobile-action-button-padding:3vw;
    --mobile-action-button-border-radius:3vw;

    --mobile-action-button-hover-letter-spacing:.8vw;

    --hamburger-link-font-size:40pt;
    --hamburger-li-height:70pt;
    --hamburger-li-padding:5vw;
    --hamburger-item-radius:5vw;
    --hamburger-padding-bottom:40vh;

    --hamburger-line-height:10px;
    --hamburger-line-radius:5px;
    --hamburger-line-spacing-before:-25px;
    --hamburger-line-spacing-after:25px;


    --form-error-text-size:12pt;
    --mobile-form-text-size:5vw;
    --mobile-form-error-text-size:3.5vw;
}

/* GLOBAL ATTRIBUTES */

html, body {
    margin: 0px;
}
* {
    box-sizing: border-box;
}
body {
    background-color: var(--body-bg-color);
    color:#000000;
    font-family: var(--body-font);
    font-size:var(--body-font-size);
    letter-spacing:var(--body-letter-spacing);
}
@media (max-width: 1001px) {
    body {
        font-size:var(--mobile-body-font-size) !important;
    }
}

a:link, a:visited {
    color:#000000;
    text-decoration:underline;
    font-weight:normal;
}
a:hover {
    color:#000000;
    text-decoration:none;
    font-weight:normal;
}

h1 {
    color:#000000;
    font-family: var(--h-font-family);
    font-size: var(--h1-font-size);
    margin-top:var(--h-margin-top);
    margin-bottom:var(--h-margin-bottom);
    font-weight:normal;
}
@media (max-width: 1001px) {
    h1 {
        font-size:var(--mobile-h1-font-size);
    }
}
h2 {
    color:#000000;
    font-family: var(--h-font-family);
    font-size: var(--h2-font-size);
    margin-top:var(--h-margin-top);
    margin-bottom:var(--h-margin-bottom);
    font-weight:normal;
}
@media (max-width: 1001px) {
    h2 {
        font-size:var(--mobile-h2-font-size);
    }
}
h3 {
    color:#000;
    font-family: var(--h-font-family);
    font-size: var(--h3-font-size);
    margin-top:var(--h-margin-top);
    margin-bottom:var(--h-margin-bottom);
    font-weight:normal;
}
@media (max-width: 1001px) {
    h3 {
        font-size:var(--mobile-h3-font-size);
    }
}

.supertitle {
    text-transform:uppercase;
    letter-spacing:.3vw;
    font-size:1.2vw;
    color:#777;
}
@media (max-width: 1001px) {
    .supertitle {
        font-size:3.2vw;
        letter-spacing:.9vw;
        margin-bottom:1vw;
    }
}

.centered p {
    text-align:center;
    width:100%;
}
.centered {
    text-align:center;
}

/* ANIMATED LOGO */
.logo-animated {
    position: relative;
    --animation-duration: 2s; /* Total time for one full rotation */
    clear:both;
}

.logo-animated img {
    width: 100%;
}

.logo-animated-layer-back {
    position: absolute;
    top: 0;
    left: 0;
}

.logo-animated-layer {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    animation: fadeInOut var(--animation-duration) linear infinite;
}

/* Reverse the delay for each layer to create a sequential fade effect from 6 to 1 */
.logo-animated-1 { animation-delay: calc(var(--animation-duration) * 0 / 6); }
.logo-animated-2 { animation-delay: calc(var(--animation-duration) * 1 / 6); }
.logo-animated-3 { animation-delay: calc(var(--animation-duration) * 2 / 6); }
.logo-animated-4 { animation-delay: calc(var(--animation-duration) * 3 / 6); }
.logo-animated-5 { animation-delay: calc(var(--animation-duration) * 4 / 6); }
.logo-animated-6 { animation-delay: calc(var(--animation-duration) * 5 / 6); }

@keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    5% { opacity: 0.2; }  /* Quick start to fading in */
    10% { opacity: 0.5; }
    15% { opacity: 0.8; }
    20% { opacity: 1; }       /* Full visibility reached quickly */
    45% { opacity: 1; }       /* Hold full visibility longer */
    55% { opacity: 0.8; }     /* Start fading out, becoming less opaque */
    65% { opacity: 0.5; }     /* More distinct drop in opacity */
    75% { opacity: 0.2; }     /* Quickly approaching lower transparency */
    85% { opacity: 0.1; }     /* Further emphasize the less opacity */
    90% { opacity: 0; }       /* Almost fully transparent */
}






/* PAGE ELEMENTS */
.text-block-container {
    margin-left:20vw;
    margin-right:20vw;
}
@media (max-width: 1001px) {
    .text-block-container {
        margin-left:5vw;
        margin-right:5vw;
        font-size:4vw;
    }
}
.text-block {
    width:100%;
    display:flex;
    /* border:1px solid #000; */
}
.text-block-left{
    display:flex;
    flex: 0 0 50%;  
    padding:2vw 4vw;
    padding-right:0vw;
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center vertically */

}
.text-block-right {
    display:flex;
    flex-grow: 1;
    padding:2vw 4vw;
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center vertically */

}
@media (max-width: 1001px) {
    .text-block-mobile-break {
        flex:none !important;
        width:100%;
        clear:both;
        display:block !important;
    }
    .text-block-column-mobile-break {
        flex:none !important;
        width:100%;
    }

}

.text-block-wide-image{
    padding: 0px !important;
}
.text-block-centered-padding{
    padding: 3vw !important;
}
.text-block-left-40 {
    flex: 0 0 40%;  
}
.text-block-image {
    display: block;  /* Ensures the image is treated as a block element */
    margin: 0 auto;  /* Applies automatic margins on the left and right, centering the block horizontally */
}
.text-block-image-column {
    width: 20vw;
}
.text-block-image-column-wide {
    width: 100%;
}
.text-block-image-full {
    width:35vw;
}
.text-block-image-full-wide {
    width:45vw;
}
@media (max-width: 1001px) {
    .text-block-image-column {
        width: 100%;
    }
    .text-block-image-full {
        width:85%;
    }
    .text-block-image-full-wide {
        width:95%;
    }
}

.text-block-outline {
    border-radius: 6vw;
    padding:2vw;
    border-width: .5vw;
    border-style: solid;
    border-color: var(--color-secondary);
}
@media (max-width: 1001px) {
    .text-block-outline {
        border:1vw var(--color-secondary) solid;
        border-radius: 8vw;
        padding:6vw;
    }
}
.text-block-outline-color {
    border-color:#52a8a8;
}


.text-block-full {
    flex: 0 0 100%;          /* Full width of the container */
    text-align: left;    /* Align text to the right */
}

.text-block-break{
    height:5vw;
}

.text-block-index b{
    display:inline !important;
    color:var(--color-primary);
}

.action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--action-button-padding);
    margin-top: var(--action-button-margin-top);
    border-radius: var(--action-button-border-radius);
    text-decoration: none !important;
    color: var(--action-button-text-color);              
    font-size: var(--action-button-font-size);
    font-weight: var(--action-button-font-weight);
    text-transform:var(--action-button-text-transform);
    background-color: var(--action-button-bg-color); 
    transition: all 0.4s;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: var(--action-button-letter-spacing);
}
@media (max-width: 1001px) {
    .action-button {
        font-size:var(--mobile-action-button-font-size);
        letter-spacing:var(--mobile-action-button-letter-spacing);
        padding:var(--mobile-action-button-padding);
        border-radius:var(--mobile-action-button-border-radius);
    }
}

.action-button-color-secondary {
    background-color: var(--action-button-bg-color-secondary) !important; 
}

.action-button:hover {
    background-image: linear-gradient(to right, var(--action-button-hover-left-gradient), var(--action-button-hover-right-gradient)); /* Gradient darker towards right */
    color: var(--action-button-text-color);
    letter-spacing: var(--action-button-hover-letter-spacing);
}
@media (max-width: 1001px) {
    .action-button:hover {
        letter-spacing:var(--mobile-action-button-hover-letter-spacing);
    }

}
.action-button a:link, a:visited, a:hover {
    color:var(--action-button-text-color);
    text-decoration:none !important;
}


/* PAGE STATUS */

.page-status {
    border:1px solid var(--page-status-outline-color);
    width:100%;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:10px;
    padding:20px;
    background-color: var(--page-status-background-color);
    text-align:center;
    color:var(--color-primary);
}


.page-status ul,
.page-status li {
    display: block;
    list-style-type: none;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}

/* HEADER - INDEX */

#header-index {
    position:absolute;
    top:0px;
    right:0px;
    width:100%;
    overflow:auto;
    text-align:right;
    background:transparent;
    z-index:0;
}
@media (max-width: 1001px) {
    #header-index {
        display:none;
    }
}

.header-bar {
    position:relative;
    left:0px;
    width:100%;
    height:var(--header-height);
    margin:0;
    z-index: 0;

    display: flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;

    color: var(--header-text-color);
    background-color: var(--header-gradient-color);
    background: linear-gradient(to left, var(--header-gradient-color), var(--header-gradient-color-left));
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
@media (max-width: 1001px) {
    .header-bar {
        height:var(--mobile-index-header-height);
    }
}

.header-logo {
    position: relative;
    float: left;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.header-logo-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.header-logo-cell a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding:5px;
    font-weight:normal;
}

.header-logo-cell img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    align-self: center;
}

 
.header-title {
    float:left;
    height:100%;
    display:table;
    overflow:hidden;
    color:#fff;
    font-family: var(--h-font-family);
    font-size:var(--header-title-font-size);
    border:0px solid #000;
    margin-left:var(--header-title-left-padding);
    margin-bottom:var(--header-title-font-vertical-adjust);
}

@media (max-width: 1001px) {
    .header-title {
        font-size: var(--mobile-index-header-title-font-size);
    }
}
.header-title-cell{
    display:table-cell; 
    vertical-align:middle;
}

.header-title-cell a:link,
.header-title-cell a:visited,
.header-title-cell a:hover {
    color:#fff;
    text-decoration:none;
    font-weight:normal;
}


.header-login {
    float:right;
    height:80px;
    padding:10px;
    display:table;
    overflow:hidden;
    color:#fff;
    font-family: var(--h-font-family);
    font-size:var(--body-font-size);
    border:0px solid #000;
}

.header-login-cell{
    display:table-cell; 
    vertical-align:middle;
    font-family:var(--body-font);
    font-size: var(--body-font-size);
    font-weight:none;
    text-align:right;
}

.header-login a:link,
.header-login a:visited,
.header-login a:hover {
    color:#fff;
    text-decoration:none;
    font-weight:normal;
}

.header-login-form-password {
    padding-left:5px;
}
.header-login-form-password a:link,
.header-login-form-password a:visited,
.header-login-form-password a:hover {
    color:#fff;
    text-decoration:none;
    font-weight:normal;
    font-size:var(--header-login-form-text-size);
}

.header-login input[type=text]{
    width:120px;
    height:25px;
    border:1px solid #fff;
    background: transparent;
    font-family: var(--body-font);
    font-size:var(--header-login-form-text-size);
    letter-spacing:(var(--body-letter-spacing));
    margin-left:2px;
    margin-right:12px;
    color:#fff;
}
.header-login input[type=password]{
    width:120px;
    height:25px;
    border:1px solid #fff;
    background: transparent;
    font-family: var(--body-font);
    margin-left:2px;
    color:#fff;
    margin-top:auto;
    margin-bottom:auto;

}

.header-login input[type=submit]{
    height:26px;
    width:80px;
    border:1px solid #fff;
    background: transparent;
    color:#fff;
    font-family: var(--h-font-family);
    font-size:var(--header-login-form-text-size);
    line-height:10px;
    margin-left:5px;
    margin-top:0px;
    margin-bottom:0px;
    margin-right:0px;
    padding:5px;
}
.header-login-form {
    padding-top:5px;
    float:right;
}
.header-login-form-cell {
    display:table-cell; 
    vertical-align:middle;
    font-family:var(--body-font);
    font-size: var(--header-login-form-text-size);
    font-weight:none;
    text-align:right;
}


/* HEADER - MOBILE */

#mobile-index-header {
    display: none;
}
@media (max-width: 1001px) {
    #mobile-index-header {
        color:var(--mobile-index-header-text-color);
        display:flex;
        width:100%;
        height: var(--mobile-index-header-height);
        margin:0px;
        padding:0px;
        background-color: var(--header-gradient-color);
        background: linear-gradient(to left, var(--header-gradient-color), var(--header-gradient-color-left));
        box-align:center;
        clear:both;
    }
}


.mobile-index-header-logo-title {
    overflow:hidden;
    height:100%;
    border:0px solid #000;
    float:left;
}

.mobile-index-header-logo {
    position:relative;
    float:left;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border:0px solid #ff0000;
}
.mobile-index-header-logo-cell{
    display:flex; 
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
}
.mobile-index-header-logo-cell img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    align-self: center;
}

.mobile-index-header-logo-cell a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding:5px;
}


.mobile-index-header-title {
    float:left;
    height:100%;
    display:table;
    overflow:hidden;
    font-family: var(--h-font-family);
    font-size:var(--mobile-index-header-title-font-size);
    border:0px solid #000;
}

.mobile-index-header-title-cell{
    display:table-cell; 
    vertical-align:middle;
    padding-left:var(--mobile-index-header-title-left-padding);
}

.mobile-index-header-title a:link,
.mobile-index-header-title a:visited,
.mobile-index-header-title a:hover {
    color:#fff;
    text-decoration:none;
    font-weight:normal;
    font-family:var(--h-font-family)
}

.mobile-index-header-login {
    position:absolute;
    top:0;
    right:0;
    height:var(--mobile-index-header-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding:3vw;
}
.mobile-index-header-login a:link,
.mobile-index-header-login a:visited,
.mobile-index-header-login a:hover {
    color:var(--mobile-index-header-text-color);
    text-decoration:none;
    font-weight:none;
    font-family:var(--h-font-family);
    font-size:var(--mobile-index-header-login-link-font-size);
}


.header-login-mobile {
    display: none;
}
@media (max-width: 1001px) {
    .header-login-mobile {
        width:100%;
        display:table;
        
        font-family: var(--h-font-family);
        font-size:var(--mobile-body-font-size);
    
        border:0px solid #ff0000;
        padding-top:5px;
    }   
}
.header-login-mobile-title {
    width:100%;
    display:table;
    font-family: var(--h-font-family);
    font-size:var(--mobile-index-header-title-font-size);
}
.header-login-mobile-show {
    width:100%;
    display:table;
    
    font-family: var(--h-font-family);
    font-size:var(--body-font-size);

    border:0px solid #ff0000;
    padding-top:0px;
}

.header-login-mobile-reset-password {
    padding-top:10px;
    padding-bottom:10px;
    margin:0px;
    border:0px solid #000;
}

 

.header-login-row-mobile{
    display:table-row; 
    padding: 10px;

}

.header-login-column1-mobile{
    display:table-cell; 
    vertical-align:middle;
    text-align:right;
    border:0px solid #00ff00;
    width:30%;
    padding:10px;
}

.header-login-column2-mobile{
    display:table-cell; 
    vertical-align:middle;
    border:0px solid #00ff00;
    width:70%;
    padding:10px;

}


.header-login-mobile input[type=text],
.header-login-mobile-show input[type=text]{
    width:90%;
    border:1px solid #000000;
    background: #ffffff;
    font-family: var(--body-font);
    font-size:30pt;
}
.header-login-mobile input[type=password],
.header-login-mobile-show input[type=password]{
    width:90%;
    border:1px solid #000000;
    background: #ffffff;
    font-family: var(--body-font);
    font-size:30pt;
}

.header-login-mobile input[type=submit],
.header-login-mobile-show input[type=submit]{
    border:1px solid #000000;
    background: #ffffff;
    color:#000000;
    font-family: var(--h-font-family);
    font-size:30pt;
}


/* HEADER MENU LINKS */

.menu-button-container {
    display:none;
}
@media (max-width: 1001px) {
    .menu-button-container {
        display: flex;
        cursor: pointer;
        height: 100%;
        width: 100%;
    
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: 0px solid goldenrod;
        text-align:right;
    
    }
}

#menu-toggle {
    display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
    display: block;
    background-color: #fff;
    position: absolute;
    height: var(--hamburger-line-height);
    width: 100%;
    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: var(--hamburger-line-radius);
}

.menu-button::before {
    content: '';
    margin-top: var(--hamburger-line-spacing-before);
}

.menu-button::after {
    content: '';
    margin-top: var(--hamburger-line-spacing-after);
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
    margin-top: 0px;
    transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
    margin-top: 0px;
    background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
    margin-top: 0px;
    transform: rotate(-405deg);
}
.menu_container {
    display:none;
}

.menu_toggle:checked + .menu_container {
    display:block;

}


.menu {
    width:100%;
}
.menu-links {
    height:100%;
    position:absolute;
    top:0px;
    right:0px;
    height:var(--header-height);
    margin-right:20px;
    display:flex;
    align-items:center;
    justify-content:center;
}
@media (max-width: 1001px) {
    .menu-links {
        padding:10px;
        margin:0px;
        width:100%;
        height:100%;
        font-size:20pt;
        line-height:15pt;
        overflow:auto;
        display:block;
    }
}
.menu a:link,
.menu a:visited,
.menu a:hover {
    color:#fff;
    text-decoration:none;
    font-weight:bold;
}
.menu a:hover {
    text-decoration:underline !important;
}

.menu ul{
    margin-right:0px;
    margin-left:auto;
    margin-top:auto;
    margin-bottom:auto;
}
.menu li{
    display:inline;
    margin:auto;
    padding-left:15px;
}


/* MOBILE MENU */

.hamburger-outer {
    position:absolute;
    top:0;
    right:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:var(--mobile-index-header-height);
    height:var(--mobile-index-header-height);
    border:0px solid orchid;
    padding:20px;
}
.hamburger-inner {
    position:relative;
    width:100%;
    height:100%;
}

@media (max-width: 1001px) {
    .menu {
        position:fixed;
        top:var(--mobile-index-header-height);
        left:0px;
        display:none;

        width:100%;
        height:100%;
        overflow:auto;

        text-align: left;
        padding:20px;
        border:0px solid #7e54a8;
    }

    .menu a:link,
    .menu a:visited {
        color:#000;
        text-decoration:none;
        font-weight:bold;
        font-size:var(--hamburger-link-font-size);
    }
    .menu a:hover {
        text-decoration:underline;
    }

    #menu-toggle:checked ~ .page-content{
        display:none;
    }

    .menu ul {
        width:100%;
        border:0px solid pink;
        padding-inline-start:0px;
        margin-block-start:0px;
        padding-bottom:var(--hamburger-padding-bottom);
    }
    #menu-toggle:checked ~ .menu{
        display:block;
    }
    #menu-toggle ~ .menu li {
        height: 0px;
        margin: 0px;
        padding: 0px;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    #menu-toggle:checked ~ .menu li {
        height: var(--hamburger-li-height);
        padding: var(--hamburger-li-padding);
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
        list-style: none;
        display: flex;
        justify-content: center;
        width: 100%;
        color: #000;
        background-color: #eee;
        border:0px;
        margin: 0px;
        list-style: none;
    }

    .menu li:is(:first-child) {
        border-top-right-radius: var(--hamburger-item-radius);
        border-top-left-radius: var(--hamburger-item-radius);
    }

    .menu li:is(:last-child) {
        border-bottom-right-radius: var(--hamburger-item-radius);
        border-bottom-left-radius: var(--hamburger-item-radius);
    }


}


/* INDEX PAGE CONTENT */


#index-page-content {
    z-index: 0;
    position:absolute;
    top:var(--header-height);
    width:100%;
    border:0px solid #000;
}
@media (max-width: 1001px) {
    #index-page-content {
        top:var(--mobile-index-header-height);
        z-index: 0;
        padding: 0px;
        width:100%;
        min-height:100%;
    }
}

/* PAGE CONTENT */

.page-content {
    position:absolute;
    top:var(--header-height);
    left:0px;
    width:100%;
    overflow:auto;

    text-align: left;
    padding:20px;
    border:0px solid #00FF00;
    padding-bottom:100px;
}
@media (max-width: 1001px) {
    .page-content{
        top:var(--mobile-index-header-height);
        position:fixed;
        bottom:0px;
        right:0px;
    
        border:0px solid #00FF00;
        padding-bottom:100px;
    }
}

.page-content a:link,
.page-content a:visited,
.page-content a:hover {
    color:#000;
    text-decoration:underline;
    font-weight:bold;
}
.page-content a:hover {
    text-decoration:none;
}

.page-content-container {
    width:100%;
    margin-right:auto;
    margin-left:auto;
    background:#fff;
}
@media (max-width: 1001px) {
    .page-content-container {
        width:100%;
        margin-right:auto;
        margin-left:auto;
    }
}

/* REMOVE?
    .game-content-container {
    width:100%;
    margin-right:auto;
    margin-left:auto;
    overflow:auto;

} */


.page-content-form {
    width:100%;
    display:table;
    
    font-family: var(--body-font);
    font-size:15pt;

    border:0px solid #ff0000;
    padding-top:5px;
}

.page-content-form-row{
    display:table-row; 
    padding: 10px;

}

.page-content-form-column1{
    display:table-cell; 
    text-align:right;
    border:0px solid #00ff00;
    width:30%;
    padding:10px;
}

.page-content-form-column2{
    display:table-cell; 
    border:0px solid #00ff00;
    width:70%;
    padding:10px;

}

.page-content-form form{
    width:100%;
    border:1px solid #000;
}

.page-content-form input[type=text],
.page-content-form input[type=email],
.page-content-form input[type=password]
{
    width:90%;
    border:1px solid #000000;
    background: #ffffff;
    font-family: var(--body-font);
    font-size:15pt;
    padding:4px;
}

.page-content-form input[type=submit]{
    width:50%;
    border:1px solid #000000;
    background: #ffffff;
    color:#000000;
    font-family: var(--body-font);
    font-size:15pt;
}

.page-content-form-help-text{
    font-size:var(--form-error-text-size);
    color:#bbb;
}
@media (max-width: 1001px) {
    .page-content-form-help-text{
        font-size:var(--mobile-form-error-text-size);
    }
}

.page-content-form-error-text{
    font-size:var(--form-error-text-size);
    color:#ff0000;
}
@media (max-width: 1001px) {
    .page-content-form-error-text{
        font-size:var(--mobile-form-error-text-size);
    }
    
}

@media (max-width: 1001px) {
    .page-content-form input[type=text],
    .page-content-form input[type=email],
    .page-content-form input[type=password]
    {
        width:100%;
        font-size:var(--mobile-form-text-size);
    }
    
    .page-content-form input[type=submit]{
        width:100%;
        font-size:var(--mobile-form-text-size);
    }
    
    .page-content-form-column1{
        font-size:var(--mobile-form-text-size);
    }
    
    .page-content-form-column2{
        font-size:var(--mobile-form-text-size);
    }
}





.index-section {
    background:var(--index-section-bg-color);
    padding:2vw 0vw;;
}

.index-section-hero {
    text-align:var(--index-section-hero-text-align);
}

.index-section-hero-logo {
    width:var(--index-section-hero-logo-width);
}
@media (max-width: 1001px) {
    .index-section-hero-logo {
        width:var(--mobile-index-section-hero-logo-width);
    }
}
.index-section-hero-subtitle {
    margin:var(--index-section-hero-subtitle-margin);
}
@media (max-width: 1001px) {
    .index-section-hero-subtitle {
        margin:var(--mobile-index-section-hero-subtitle-margin);
    }
}

.index-section-background {
    padding:var(--index-section-background-padding);
    padding-bottom:var(--index-section-background-padding-bottom);
}
/* START */
.index-section-title {
    background-image: var(--index-section-background-title-gradient);
    padding: var(--index-section-background-title-padding);
    text-align: center;
    z-index: 1000;
    opacity: 1; /* Always visible */
}

@media (max-width: 1001px) {
    .index-section-title {
        padding: var(--mobile-index-section-background-title-padding);
    }
}

.index-section-title-sticky {
    opacity: 0; /* Start fully invisible */
    position: fixed;
    top: 0px;
    left: 0px;
    text-align: left !important;
    width: 20vw;
    padding: 2vw;
    background-color: transparent; /* Background when sticky */
    background-image: none;
}
@media (max-width: 1001px) {
    .index-section-title-sticky {
        width:100%;        
        background-color:#fff;
        border-bottom:1vw solid var(--color-primary);
    }
    .index-section-title-sticky h2 {
        font-size:4.5vw;
        line-height:4vw;
    }
    .index-section-title-sticky .supertitle {
        font-size:2.4vw;
        line-height:2vw;
    }
    .index-section-title-sticky-part {
        position:fixed;
        top:0px;
        right:0px;
        font-size:4vw !important;
        padding-top:1.4vw;
        padding-right:2.5vw;
        text-transform:uppercase;
        letter-spacing:.5vw;
    }
}
.index-section-title-sticky-part {
    margin-top:2vw;
    color:var(--color-primary) !important;
    font-size:1.5vw;
    text-transform:uppercase;
    letter-spacing:.2vw;
}

.sticky-active {
    opacity: 1; /* Fully visible when sticky-active */
    transition: opacity 1s ease; /* Smooth fade-in transition */
}

.sticky-inactive {
    opacity: 0; /* Fully invisible when sticky-inactive */
    transition: none; /* No transition for fade-out */
}



/* END */
.index-section-bubble {
    border: var(--index-section-bubble-border);
    border-radius: var(--index-section-bubble-border-radius);
    margin:var(--index-section-bubble-margin);
    padding:var(--index-section-bubble-padding);
    width:var(--index-section-bubble-width);
}
@media (max-width: 1001px) {
    .index-section-bubble {
        margin:var(--mobile-index-section-bubble-margin);
        padding:var(--mobile-index-section-bubble-padding);
        width:var(--mobile-index-section-bubble-width);
        border-radius: var(--mobile-index-section-bubble-border-radius);
        border: var(--mobile-index-section-bubble-border);
    }
}

.index-footer .supertitle {
    color:#ccc;
    font-size:1vw;
}
@media (max-width: 1001px) {
    .index-footer .supertitle {
        font-size:2.5vw;
    }
}

.index-footer {
    background-color: var(--header-gradient-color);
    background: linear-gradient(to left, var(--header-gradient-color), var(--header-gradient-color-left));
    color:var(--footer-text-color);
    padding:4vw;
}
.index-footer-logo{
    position:relative;
    width:var(--index-footer-logo-width);
    height:var(--index-footer-logo-width);
    clear:both;
}
@media (max-width: 1001px) {
    .index-footer-logo{
        position:relative;
        width:var(--mobile-index-footer-logo-width);
        height:var(--mobile-index-footer-logo-width);
        clear:both;
        margin:auto auto;
    }
    .index-footer{
        text-align:center;
    }

}

.index-footer a:link,
.index-footer a:visited {
    color:var(--footer-text-color);
    text-decoration:none;
    font-weight:normal;
}
.index-footer a:hover {
    text-decoration:underline !important;
}

.index-footer-column {
    float: left;
    width: 33.33%;
}
@media (max-width: 1001px) {
    .index-footer-column {
        float: left;
        width: 100%;
    }
}
  
.index-footer-column ul{
    list-style-type: none;
    margin-bottom:20px;
    padding:0;
}
.index-footer-column li{
    margin:0;
    padding:0;
}

/* Clear floats after the columns */
.index-footer-row:after {
    content: "";
    display: table;
    clear: both;
}

.index-footer-title {
    padding-top:1vw;
    position:relative;
    font-family: var(--h-font-family);
    font-size: var(--h2-font-size);
}
@media (max-width: 1001px) {
    .index-footer-title {
        font-size: var(--mobile-h2-font-size);
    }
}    
.parent {
    width: 100%;  /* Adjust width as necessary */
}

.child {
    width: 100%;  /* Adjust width as necessary */
    margin-top: 10px; /* Adjust spacing between divs */
    clear:both;
}




/* GAME PAGE CONTENT */

.select_game_option_button {
    line-height:20px;
    background-color:transparent;
    font-size:20px;
    border:1px solid #000;
    border-radius:10px;
    text-decoration:noone;
    font-weight:none;
    padding:10px;
    margin:0;
}

.select_game_option_button:hover {
    cursor:pointer;
    background-color:#eee;
}

.userNotifications {
    background-color:red;
    color:white;
    width:2vw;
    height:2vw;
    text-align:center;
    border-radius:50%;
    padding:.1vw;
    float:left;
    margin-left:.7vw;
}