table.table {
    color: unset !important;
}


.header {
    background-color: transparent;
    border-bottom: 0px;
    padding-top: 20px;
    box-shadow: unset;
    padding-bottom: 20px;
}

.header__logo {
    top: 20px;
}

.menus {
    background: unset;
}

    .menus .account-menu {
        top: 20px;
    }
 

.jconfirm-box {
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background: linear-gradient(to top, #915b39, #2e4372) !important;
}




.indexEvent {
    margin-top: 3px;
}

.EventContainer01 {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

.EventIconIndex {
    height: 40px;
    width: 40px;
    border: 3px solid black;
    padding: 2px;
    background-color: white;
    border-radius: 20px;
    margin-right: 3px;
}


@media only screen and (max-width: 600px) {
    .menus__wrapper {
        background: linear-gradient(to top, #915b39, #2e4372) !important;
    }
}

a:hover {
    color: antiquewhite !important;
}



tr:hover {
    color: white !important;
}

option {
    background: white;
    color: black;
}

 
#uc {
    color: #fff;
    font-family: Verdana, Geneva, sans-serif;
    height: 100%;
    text-align: center;
    font-size: 4rem;
    height: 100px;
    top: 50%;
    position: relative;
    margin-top: -50px;
}

/*    #uc span {
        text-shadow: 10px 10px 3px rgba(0, 0, 0, 0.5);
    }*/

#loading {
    width: 400px;
    height: 20px;
    background: rgba(255,255,255,0.7);
    border: 2px solid rgba(255,255,255,1);
    border-radius: 50px;
    margin: 40px auto;
    box-shadow: inset 2px 2px 5px 0px rgba(0,0,0,0.8);
}

    #loading #wiggle {
        width: 80px;
        height: 18px;
        border: 1px solid #aaa;
        background: rgba(255,255,255,0.5);
        border-radius: 50px;
        margin-left: 0px;
        background: linear-gradient(to bottom, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
        animation: wiggle 5s ease-in-out infinite;
    }

@keyframes wiggle {
    0% {
        margin-left: 0px;
    }

    50% {
        margin-left: 318px;
    }

    100% {
        margin-left: 0px;
    }
}


.video-container {
    margin-top: auto;
    position: relative;
    /*width: 100vw;*/
    height: 100vh;
    /*overflow-x: hidden;*/
    overflow: visible;
    /*overflow-y: hidden;*/
}

    .video-container video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100vh;
        width: auto;
        height: auto;
        z-index: -1;
        transform: translate(-50%, -50%);
    }

.content1 {
    height: 70vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 0;
    color: white;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.1); /* Semi-transparent background for better readability */
    border-radius: 0.5rem;
}

@media (max-width: 768px) {
    .content1 {
        width: 90%;
        font-size: 1rem;
    }
}


.content2 {
    margin: 5vw 20vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.1); /* Semi-transparent background for better readability */
    border-radius: 0.5rem;
}

 

#NavName:hover {
    text-decoration: none !important;
}


    #NavName:hover .svg-inline--fa {
        animation: handwave 2s ease-in-out;
        animation-iteration-count: 3; /* Run three times only */
    }

@keyframes handwave {
    0% {
        transform: rotate(0deg) translateY(0);
    }

    25% {
        transform: rotate(20deg) translateY(-5px);
    }

    50% {
        transform: rotate(-10deg) translateY(5px);
    }

    75% {
        transform: rotate(20deg) translateY(-5px);
    }

    100% {
        transform: rotate(0deg) translateY(0);
    }
}



button.dropdown-toggle.actions-icon {
    color: white !important;
    background: transparent !important;
}


 


p.lead {
    max-height: 59vh;
    overflow-y: auto;
} 
/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px; /* Reduce the width */
    height: 10px; /* Optional: for horizontal scrollbar */
}

/* Scrollbar Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; /* Lighter background for the track */
    border-radius: 10px; /* Rounded corners */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2); /* Soft shadow for the track */
}

/* Scrollbar Thumb */
::-webkit-scrollbar-thumb {
    background: #888; /* Darker color for the thumb */
    border-radius: 10px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); /* Inner shadow for the thumb */
}

    /* Thumb on hover (more visible) */
    ::-webkit-scrollbar-thumb:hover {
        background: #555; /* Change thumb color when hovered */
    }


.dt-layout-cell.dt-layout-full {
    /*overflow-y: scroll;*/
    /*height: 70vh;*/
}


a.btn.btn-primary.text-white.checkCalendar {
    float: right;
    background: transparent;
    margin: 18px;
}



.form-row {
    margin-top: 12px;
}

label {
    margin-bottom: 1px !important;
}


.dt-layout-cell.dt-layout-full {
    /*border: 2px solid black !important;*/
}





.dt-layout-cell .dt-layout-full {
    height: auto !important;
}



.hidden-important {
    display: none !important;
}



.dataTables_filter {
    float: left;
    margin-left: 5px;
    margin-right: 5px;
}



/* Make the table header sticky */
/*#membersTable*/
thead {
    position: sticky;
    top: 0; /* Keep it at the top when scrolling */
    background-color: rgb(57 64 105);
    color: wheat;
    /* Optional: Background color for the sticky header */
    /*z-index: 1;*/ /* Ensure it stays on top of other elements */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Adds a small shadow under the header */
}

/* Optional: Add some padding to the top of the table so that the sticky header doesn’t overlap content */
#membersTable {
    /*border-collapse: separate;*/ /* Required to allow sticky positioning */
    /*width: 100%;*/
}

    /* Optional: Add styles to avoid any issues with other rows */
    #membersTable tbody {
        /*display: block;
        max-height: 400px;*/ /* Adjust based on your table height */
        /*overflow-y: auto;*/
    }


    #membersTable td, tr {
        white-space: nowrap;
    }



.email-item.red summary::after {
    background: #ff4d4f; /* Red */
}

.email-item.yellow summary::after {
    background: #faad14; /* Yellow */
}

.email-item.green summary::after {
    background: #52c41a; /* Green */
}

.email-item.unknown summary::after {
    background: gray;
}

@media (min-width: 300px) and (max-width: 550px) {
    .content__inner .sidebar {
        margin: 0;
        flex: 1;
        width: 100vw !important;
        min-width: 100vw !important;
    }

}


    @media (min-width: 1023px) and (max-width: 1400px) {
        .content__inner .sidebar {
            margin: 0;
            flex: 1;
            max-width: 400px;
            min-width: 360px;
        }

        .menus .account-menu {
            position: absolute;
            top: 8px;
            right: 1vw;
            float: right;
        }

        article.module.gallery {
            width: 59vw;
        }
    }


    @media (min-width: 600px) and (max-width: 1020px) {
        .content__inner .sidebar {
            width: 100vw;
            min-width: 100vw !important;
            padding: 34px;
            flex: 1;
            max-width: 100vw;
            min-width: 335px;
        }
        
        div#thumbsContainer {
            position: relative;
            overflow: hidden;
            width: 100vw;
            min-width: 100vw;
        }
        .content-spacing-x-breakout.columns-two.content__inner {
            flex-direction: column;
        }

        .content__inner .sidebar .sidebar__wrapper {
            padding: 0;
            width: 100%;
        }

        .menus .account-menu {
            position: absolute;
            top: 8px;
            right: 1vw;
            float: right;
        }

        article.item.search {
            display: flex;
            gap: 80px;
        }

        .sidebar .forecast__container {
            max-width: 80vw;
            overflow: clip;
        }

        article.item.donation {
            width: 286px;
            display: flex;
            gap: 160px;
            text-wrap: nowrap;
        }

        article.youtube {
            display: flex;
            gap: 95px;
        }

        article.item.events {
            display: flex;
            font-size: 31px;
            flex-direction: column;
            /* align-items: center; */
            justify-content: center;
        }


        .EventIconIndex {
            height: 60px;
            width: 60px;
            border: 6px solid black;
            padding: 2px;
            background-color: white;
            border-radius: 31px;
            margin-right: 3px;
        }
    }

    button.f-button {
        background: transparent;
        color: white;
    }

        button.f-button:hover {
            background: transparent;
            color: white;
        }



    .f-thumbs__track {
        max-width: 1024px;
    }


    @media (max-width: 1024px) {
        
        body {
            
        }

        .content-spacing-x.content {
            width: 100vw;
            min-width: 100vw;
            max-width: 100vw;
        }

        .content__inner .sidebar {
            margin: 0;
            flex: 1;
            max-width: 383px;
            min-width: 327px;
        }
    }

    div#thumbsContainer {
        
        overflow: hidden;
        width: 70vw;
        margin-top: 16px;
    }


    @media (min-width: 300px) and {
        .content-spacing-x.content.gallary-sidebar {
            width: 320px !important;
            min-width: 320px !important;
        }
        div#thumbsContainer {
          display:none !important;

          position : relative;
          overflow: hidden;
          width: 100vw;
          min-width : 100vw;
    }
    }


    .form-container-Gallary {
        max-width: 600px;
        margin: 50px auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 10px;
        background-color: transparent;
    }

   


.starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle 3s infinite;
}
@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}




@media (min-width: 300px) and (max-width : 1024px){
    div#thumbsContainer {
        display : none !important;
        position: relative;
        overflow: hidden;
        width: 70vw;
        margin-top: 16px;
    }
}


.dt-search {
    padding: 11px;
}


#loadingSpinner {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
}




 
@media (min-width: 600px) {
    .header__logo {
         position: absolute; 
        top: 74px;
        left: var(--content-spacing-x);
    }
}

/* ====== Base overlay ====== */
#slas-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: radial-gradient(ellipse 800px 600px at 30% 20%, rgba(60,80,140,.15), transparent 70%), radial-gradient(ellipse 1200px 800px at 70% 60%, rgba(40,50,100,.25), transparent 70%), radial-gradient(1200px 800px at 50% 40%, rgba(40,50,70,.65), rgba(5,7,12,.95)), #070b13;
    color: #e7ecff;
    opacity: 1;
    visibility: visible;
    transition: opacity .8s cubic-bezier(0.4, 0, 0.2, 1), visibility .8s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

    #slas-splash.slas-hide {
        opacity: 0;
        visibility: hidden;
        transform: scale(1.05);
        transition: opacity .8s cubic-bezier(0.4, 0, 0.2, 1), visibility .8s cubic-bezier(0.4, 0, 0.2, 1), transform .8s cubic-bezier(0.4, 0, 0.2, 1);
    }

/* ====== Main content transition ====== */
#main-content {
    opacity: 0;
    transition: opacity .8s cubic-bezier(0.4, 0, 0.2, 1);
}

    #main-content.slas-show {
        opacity: 1;
    }

/* ====== Enhanced Skip button ====== */
#slas-splash .slas-skip {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(15,25,45,.3);
    border: 1px solid rgba(231,236,255,.2);
    color: #e7ecff;
    padding: .6rem 1rem;
    border-radius: 25px;
    font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: slas-skip-pulse 3s ease-in-out infinite;
}

    #slas-splash .slas-skip:hover {
        border-color: #9fb7ff;
        background: rgba(25,35,55,.4);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(159,183,255,.2);
    }

@keyframes slas-skip-pulse {
    0%, 100% {
        border-color: rgba(231,236,255,.2);
    }

    50% {
        border-color: rgba(159,183,255,.4);
    }
}

/* ====== Enhanced starfield layers ====== */
.slas-stars, .slas-stars--2, .slas-stars--3, .slas-stars--4 {
    position: absolute;
    inset: -30%;
    background-repeat: repeat;
    background-image: radial-gradient(1px 1px at 15% 25%, rgba(255,255,255,.9) 99%, transparent 100%), radial-gradient(1px 1px at 85% 75%, rgba(180,200,255,.8) 99%, transparent 100%), radial-gradient(1px 1px at 45% 15%, rgba(255,240,200,.7) 99%, transparent 100%), radial-gradient(1px 1px at 75% 85%, rgba(200,220,255,.85) 99%, transparent 100%), radial-gradient(1px 1px at 25% 65%, rgba(255,255,255,.75) 99%, transparent 100%), radial-gradient(2px 2px at 60% 30%, rgba(255,255,255,.6) 99%, transparent 100%);
    animation: slas-drift 80s linear infinite;
    opacity: .8;
}

.slas-stars--2 {
    animation-duration: 120s;
    opacity: .6;
    filter: blur(.2px);
    animation-direction: reverse;
}

.slas-stars--3 {
    animation-duration: 150s;
    opacity: .4;
    filter: blur(.4px);
}

.slas-stars--4 {
    animation-duration: 200s;
    opacity: .25;
    filter: blur(.6px);
    animation-direction: reverse;
}

@keyframes slas-drift {
    from {
        transform: translate3d(0,0,0) rotate(0deg)
    }

    to {
        transform: translate3d(-400px, -300px, 0) rotate(5deg)
    }
}

/* ====== Floating particles ====== */
.slas-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.slas-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(207,227,255,.8), transparent);
    border-radius: 50%;
    animation: slas-float 15s ease-in-out infinite;
}

    .slas-particle:nth-child(1) {
        top: 20%;
        left: 10%;
        animation-delay: 0s;
        animation-duration: 12s;
    }

    .slas-particle:nth-child(2) {
        top: 60%;
        left: 80%;
        animation-delay: 2s;
        animation-duration: 18s;
    }

    .slas-particle:nth-child(3) {
        top: 30%;
        left: 70%;
        animation-delay: 4s;
        animation-duration: 14s;
    }

    .slas-particle:nth-child(4) {
        top: 80%;
        left: 20%;
        animation-delay: 1s;
        animation-duration: 16s;
    }

    .slas-particle:nth-child(5) {
        top: 40%;
        left: 90%;
        animation-delay: 3s;
        animation-duration: 13s;
    }

    .slas-particle:nth-child(6) {
        top: 70%;
        left: 5%;
        animation-delay: 5s;
        animation-duration: 17s;
    }

@keyframes slas-float {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: .3;
    }

    25% {
        transform: translateY(-30px) translateX(20px) scale(1.2);
        opacity: .8;
    }

    50% {
        transform: translateY(-10px) translateX(-15px) scale(.8);
        opacity: .6;
    }

    75% {
        transform: translateY(-40px) translateX(10px) scale(1.1);
        opacity: .9;
    }
}

/* ====== Cosmic dust trails ====== */
.slas-cosmic-dust {
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(159,183,255,.02) 50%, transparent 70%), linear-gradient(-45deg, transparent 40%, rgba(207,227,255,.03) 60%, transparent 80%);
    animation: slas-dust-swirl 25s linear infinite;
}

@keyframes slas-dust-swirl {
    from {
        transform: rotate(0deg) scale(1);
        opacity: .5;
    }

    to {
        transform: rotate(360deg) scale(1.1);
        opacity: .3;
    }
}

/* ====== Enhanced Logo & orbit system ====== */
.slas-logo {
    display: grid;
    place-items: center;
    gap: .6rem;
    text-align: center;
    transform: translateY(-4vh);
    animation: slas-logo-entrance 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slas-logo-entrance {
    0% {
        transform: translateY(-4vh) scale(.8);
        opacity: 0;
    }

    50% {
        transform: translateY(-4vh) scale(1.05);
        opacity: .7;
    }

    100% {
        transform: translateY(-4vh) scale(1);
        opacity: 1;
    }
}

/* ====== Animated wordmark letters ====== */
.slas-wordmark {
    font: 800 clamp(40px, 7vw, 84px)/1.02 "Segoe UI", Roboto, Inter, system-ui, Arial, sans-serif;
    letter-spacing: .06em;
    text-shadow: 0 0 20px rgba(120,160,255,.3), 0 0 40px rgba(120,160,255,.1);
    animation: slas-glow-pulse 4s ease-in-out infinite;
}

.slas-letter {
    display: inline-block;
    animation: slas-letter-wave 3s ease-in-out infinite;
}

    .slas-letter:nth-child(1) {
        animation-delay: 0s;
    }

    .slas-letter:nth-child(2) {
        animation-delay: .2s;
    }

    .slas-letter:nth-child(3) {
        animation-delay: .4s;
    }

    .slas-letter:nth-child(4) {
        animation-delay: .6s;
    }

@keyframes slas-letter-wave {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-8px) scale(1.05);
    }
}

@keyframes slas-glow-pulse {
    0%, 100% {
        text-shadow: 0 0 20px rgba(120,160,255,.3), 0 0 40px rgba(120,160,255,.1);
    }

    50% {
        text-shadow: 0 0 30px rgba(120,160,255,.5), 0 0 60px rgba(120,160,255,.2);
    }
}

.slas-sub {
    font: 500 clamp(12px, 1.8vw, 16px)/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    opacity: .85;
    letter-spacing: .08em;
    text-transform: uppercase;
    animation: slas-subtitle-fade 3s ease-in-out infinite alternate;
}

@keyframes slas-subtitle-fade {
    0% {
        opacity: .85;
    }

    100% {
        opacity: .95;
    }
}

/* ====== Enhanced orbit system ====== */
.slas-orbit {
    width: clamp(120px, 22vw, 200px);
    height: auto;
    margin-bottom: .6rem;
    color: #9fb7ff;
    filter: drop-shadow(0 0 8px rgba(159,183,255,.3));
}

/* Orbit rings with different animations */
.slas-outer-ring {
    animation: slas-ring-pulse 6s ease-in-out infinite;
}

.slas-main-ring {
    animation: slas-ring-rotate 20s linear infinite;
}

.slas-inner-ring {
    animation: slas-ring-rotate 15s linear infinite reverse;
}

@keyframes slas-ring-pulse {
    0%, 100% {
        opacity: .2;
        stroke-width: .5;
    }

    50% {
        opacity: .4;
        stroke-width: .8;
    }
}

@keyframes slas-ring-rotate {
    from {
        stroke-dasharray: 0 400;
    }

    to {
        stroke-dasharray: 400 400;
    }
}

/* Multiple satellites with different orbits */
.slas-satellite {
    transform-origin: 100px 100px;
}

.slas-satellite--main {
    fill: #cfe3ff;
    animation: slas-orbit-main 3s cubic-bezier(.6,.1,.2,1) infinite;
    filter: drop-shadow(0 0 4px rgba(207,227,255,.8));
}

.slas-satellite--small {
    fill: #9fb7ff;
    animation: slas-orbit-small 4.5s cubic-bezier(.4,.1,.3,1) infinite reverse;
}

.slas-satellite--tiny {
    fill: #7fa3ff;
    animation: slas-orbit-tiny 6s linear infinite;
}

@keyframes slas-orbit-main {
    from {
        transform: rotate(0deg) translateX(62px) rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) translateX(62px) rotate(-180deg) scale(1.2);
    }

    to {
        transform: rotate(360deg) translateX(62px) rotate(-360deg) scale(1);
    }
}

@keyframes slas-orbit-small {
    from {
        transform: rotate(0deg) translateX(48px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(48px) rotate(-360deg);
    }
}

@keyframes slas-orbit-tiny {
    from {
        transform: rotate(0deg) translateX(38px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(38px) rotate(-360deg);
    }
}

/* Center glow animation */
.slas-center-glow {
    animation: slas-center-pulse 2s ease-in-out infinite alternate;
}

@keyframes slas-center-pulse {
    0% {
        opacity: .1;
        r: 8;
    }

    100% {
        opacity: .25;
        r: 12;
    }
}

/* ====== Progress indicator ====== */
.slas-progress {
    width: 150px;
    height: 2px;
    background: rgba(159,183,255,.2);
    border-radius: 1px;
    margin-top: 1.5rem;
    overflow: hidden;
}

.slas-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #9fb7ff, #cfe3ff, #9fb7ff);
    border-radius: 1px;
    animation: slas-progress 4s ease-in-out infinite;
}

@keyframes slas-progress {
    0% {
        transform: translateX(-100%) scaleX(0);
    }

    50% {
        transform: translateX(0%) scaleX(1);
    }

    100% {
        transform: translateX(100%) scaleX(0);
    }
}

/* ====== Shooting stars ====== */
.slas-shooting-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.slas-shooting-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: linear-gradient(45deg, rgba(255,255,255,.8), rgba(207,227,255,.4));
    border-radius: 50%;
}

    .slas-shooting-star::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 1px;
        background: linear-gradient(90deg, rgba(255,255,255,.6), transparent);
        transform-origin: 0 50%;
    }

    .slas-shooting-star:nth-child(1) {
        top: 20%;
        left: 10%;
        animation: slas-shoot-1 8s ease-out infinite;
    }

    .slas-shooting-star:nth-child(2) {
        top: 60%;
        left: 80%;
        animation: slas-shoot-2 12s ease-out infinite;
    }

    .slas-shooting-star:nth-child(3) {
        top: 30%;
        left: 90%;
        animation: slas-shoot-3 15s ease-out infinite;
    }

@keyframes slas-shoot-1 {
    0%, 90%, 100% {
        opacity: 0;
        transform: translate(0, 0);
    }

    10%, 80% {
        opacity: 1;
    }

    80% {
        transform: translate(300px, 200px);
    }
}

@keyframes slas-shoot-2 {
    0%, 85%, 100% {
        opacity: 0;
        transform: translate(0, 0);
    }

    15%, 75% {
        opacity: 1;
    }

    75% {
        transform: translate(-250px, 180px);
    }
}

@keyframes slas-shoot-3 {
    0%, 80%, 100% {
        opacity: 0;
        transform: translate(0, 0);
    }

    20%, 70% {
        opacity: 1;
    }

    70% {
        transform: translate(-350px, 220px);
    }
}

/* ====== Reduced motion ====== */
@media (prefers-reduced-motion: reduce) {
    .slas-stars, .slas-stars--2, .slas-stars--3, .slas-stars--4,
    .slas-satellite, .slas-satellite--main, .slas-satellite--small, .slas-satellite--tiny,
    .slas-particle, .slas-cosmic-dust, .slas-shooting-star,
    .slas-letter, .slas-center-glow, .slas-progress-bar,
    .slas-outer-ring, .slas-main-ring, .slas-inner-ring {
        animation: none;
    }

    .slas-wordmark {
        animation: none;
    }
}

/*////////////////////////////initial homepage animation////////////////////////////////////*/
 
article.item.donation {
    margin: -16px;
    padding-left: 19px;
}

.content-spacing-x-breakout.columns-two.content__inner {
    margin-bottom: 16px;
}


.grid > * {
    border: 1px solid white; /* border for each grid cell */
    box-sizing: border-box; /* ensures border doesn't mess with layout */
}