@keyframes scatter {
    0%, 100% {
        transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0)) scale(1.02);
        filter: blur(var(--blur, 0));
        opacity: var(--opacity, 0.98);
    }

    45% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        filter: blur(0);
        opacity: 1;
    }

    55% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        filter: blur(0);
        opacity: 1;
    }
}

@media (min-width: 1200px) /* Tablet Wide */ {

    footer {
        margin: 2.5rem;
        padding: 2rem 0 1rem 0;
        border-radius: 4.375rem;
        font-size: 1rem;

        & .FooterAbout {
            padding-inline-end: 4rem;
        }
    }

    .page-hero {
        margin: 2rem 2.5rem 0.125rem 2.5rem;
        padding: 2rem 0 1rem 0;
        border-radius: 4.375rem;
        font-size: 1rem;
        min-height: 16rem;

        & .lineImages {
            position: absolute;
            bottom: 50%;
            width: 100%;
            display: flex;
            z-index: 1;

            & img {
                width: 200px;
                max-width: auto;
                height: auto;
                position: absolute;
                border-radius: 3.125rem;
                will-change: transform, filter, opacity;
                animation-name: scatter;
                animation-duration: 6s;
                animation-timing-function: ease-in-out;
                animation-iteration-count: infinite;
                animation-fill-mode: both;
                animation-delay: var(--scatter-delay, 0s);

                &:nth-child(1) {
                    right: -2rem;
                    top: 3rem;
                    --tx: -10px;
                    --ty: -6px;
                    --rot: 3deg;
                    --blur: 4px;
                    --opacity: 0.98;
                    --scatter-delay: 0s;
                }

                &:nth-child(2) {
                    right: 17%;
                    top: -10rem;
                    --tx: 9px;
                    --ty: -5px;
                    --rot: 2.5deg;
                    --blur: 5px;
                    --opacity: 0.98;
                    --scatter-delay: -1.5s;
                }

                &:nth-child(3) {
                    right: 70%;
                    top: 3rem;
                    --tx: -8px;
                    --ty: 7px;
                    --rot: -2.5deg;
                    --blur: 3px;
                    --opacity: 0.97;
                    --scatter-delay: -3s;
                }

                &:nth-child(4) {
                    right: 93%;
                    top: -6rem;
                    --tx: 10px;
                    --ty: 5px;
                    --rot: 3.5deg;
                    --blur: 8px;
                    --opacity: 0.97;
                    --scatter-delay: -4.5s;
                }
            }
        }
    }

    .aboveFooterSocial {
        margin: 2rem 0;

        & ul {
            gap: 2rem;

            & img {
                border-radius: 50%;
                box-shadow: 5px 5px 10px rgba(0,0,0,.2);
            }
        }
    }

    .header-logo {
        padding-inline-start: 1.75rem;
    }

    header .navbar {
        padding: 1.25rem;

        & .nav-item {
            & .nav-link {
            font-size: 0.95rem;
            }
        }
    }

    & .navTools {
        & #secNav {
            & .nav-item {
                & .nav-link {
                    font-size: 1.25rem;
                }
            }
        }
    }

    h2 {
        font-size: 2.5rem;
    }

    .main h2 {
        font-size: 3.5rem;
    }

    .videoPlayer {
        border-radius: 4.375rem;
        inset: .25rem 2.5rem;
        max-width: calc(100% - 5rem);
    }

    .whoAreWe {
        min-height: 600px;
        text-align: center;
        width: 100%;
        padding-top: 4rem;
        font-size: 1.25rem;

        & .spoiler p {
            font-size: 1.2rem;
            font-weight: bold;
            color: #0659AD;
            max-width: 760px;
            margin: .75rem auto 1rem auto;

            & strong {
                color: #DA48A2;
            }
        }

        & .lineImages {
            position: absolute;
            bottom: 50%;
            width: 100%;
            display: flex;
            z-index: -1;

            & img {
                width: 200px;
                max-width: auto;
                height: auto;
                position: absolute;
                border-radius: 3.125rem;
                will-change: transform, filter, opacity;
                animation-name: scatter;
                animation-duration: 6s;
                animation-timing-function: ease-in-out;
                animation-iteration-count: infinite;
                animation-fill-mode: both;
                animation-delay: var(--scatter-delay, 0s);

                &:nth-child(1) {
                    right: -3rem;
                    top: -9rem;
                    --tx: -10px;
                    --ty: -6px;
                    --rot: 3deg;
                    --blur: 4px;
                    --opacity: 0.98;
                    --scatter-delay: 0s;
                }

                &:nth-child(2) {
                    right: 23%;
                    top: 2rem;
                    --tx: 9px;
                    --ty: -5px;
                    --rot: 2.5deg;
                    --blur: 5px;
                    --opacity: 0.98;
                    --scatter-delay: -1.5s;
                }

                &:nth-child(3) {
                    right: 60%;
                    top: 4rem;
                    --tx: -8px;
                    --ty: 7px;
                    --rot: -2.5deg;
                    --blur: 3px;
                    --opacity: 0.97;
                    --scatter-delay: -3s;
                }

                &:nth-child(4) {
                    right: 89%;
                    top: -6rem;
                    --tx: 10px;
                    --ty: 5px;
                    --rot: 3.5deg;
                    --blur: 8px;
                    --opacity: 0.97;
                    --scatter-delay: -4.5s;
                }
            }
        }
    }

    .counters {
        padding: 2rem 0 2rem 0;
        font-size: 1.25rem;
    }

    .achyGarins {
        margin: 0 -5.5rem 5rem -5.5rem;

        & .regionGrains {
            & .btn-outline {
                font-weight: bold;
                padding: .8rem 2rem;
            }
        }

        & h2 {
            font-size: 3.5rem !important;
        }

        & h3 {
            font-size: 1.8rem;
            font-weight: bold;
            margin: 3rem 0 2rem 0;
        }

        & p {
            font-size: 1.2rem;
        }

        & .regionGarinsBtns {
            gap: .8rem;
        }

        & .mapCol {
            padding-inline-start: 2rem;
        }
    }

    .simpleGridItems {
        & .imgPlaceHolder {
            border-radius: 1.5rem;
        }

        & .textPart {
            border-radius: 1.5rem;

            & p:only-of-type {
                min-height: 150px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 5;
                overflow: hidden;
            }
        }
    }

    .achyEvents {

        &:after {
            top: calc(100% - 120px);
            height: 240px;
        }

        & p {
            font-size: 1.2rem;
        }

        & .chosenEvents {
            & .event-text {
                min-height: 220px;
            }
        }
    }

    .achyStories {
        padding-bottom: 10rem;

        & .stories-swiper {
            & .swiper-slide {

                & .stories-item {
                    min-height: 85vh;
                    padding-top: 4rem;
                    padding-right: 15%;


                    .stories-img-wrap {
                        width: 610px;
                        height: 680px;
                        transform: rotate(6.4deg);

                        & .achyTilda {
                            width: 133px;
                            height: 43px;
                            top: 2.5rem;
                            left: -4.5rem;
                        }

                        & .stories-img {

                            & img {
                                bottom: -2rem;
                                max-width: 670px;
                            }
                        }

                        & .stories-title {
                            left: 110%;
                            bottom: 5rem;
                            width: 180px;
                            transform: rotate(-6.4deg);

                            & svg {
                                left: 0;
                                bottom: 100%;
                            }
                        }

                        & .stories-name {
                            right: 110%;
                            bottom: 5rem;
                            width: 180px;
                            transform: rotate(-6.4deg);

                            & svg {
                                right: 0;
                                bottom: 100%;
                            }
                        }
                    }


                    & .stories-quote {
                        top: 0;
                        left: 53.5%;
                        width: 100%;
                        max-width: 589px;
                        min-height: 458px;
                        padding: 3rem;
                    }
                }
            }

            & .swiper-button-next {
                right: 10%;
                top: 80%;

                &:after {
                    min-width: 3rem;
                    height: 3rem;
                }
            }

            & .swiper-button-prev {
                right: calc(10% + 80px);
                top: 80%;

                &:after {
                    min-width: 3rem;
                    height: 3rem;
                }
            }
        }

        & .runningText {
            font-size: 12.5rem;
            font-weight: bold;
            height: 10rem;
            top: 87%;
        }

        .runningText__inner {
            animation: marquee var(--marquee-duration, 30s) linear infinite;
        }

            .runningText__inner span {
                padding-right: 4rem; /* gap between repeats */
            }
    }

    .achyContact {
        & p {
            font-size: 1.2rem;
        }

        & .btn-secondary {
            &.btn-xl {
                margin-top: 40px !important;
            }
        }
    }
    .kbSideNav {
        margin-top: -2.1rem;
    }

    .lessonBlock {
        padding: .5rem .5rem 2.5rem .5rem;
        overflow: hidden;
        
        & .lessonInfo .btn-secondary {
            transform: translateX(-105%);

        }

        &:hover .lessonInfo .btn-secondary {
            transform: translateX(0%);
        }
    }
}


@media (min-width: 1440px) /* Standard Laptop */ {

    .navbar {
        & .nav-item {
            & .nav-link {
                font-size: 1rem;
            }
        }
    }
    footer {
        & .FooterAbout {
            padding-inline-end: 7rem;

            & p {
                text-align: right;
                line-height: 1.75;
            }
        }
    }
}

@media (min-width: 1600px) /* HighRes & Desktops */ {
    .container {
        max-width: 1580px;
    }
}


@media (max-width: 1199px) /* Tablet Tall*/ {

    footer {
        margin: 2rem 0.5rem .5rem 0.5rem;
        padding: 1rem;
        border-radius: 2rem;
        font-size: .9rem;
    }

    .page-hero {
        margin: 2rem 0.5rem .5rem 0.5rem;
        padding: 1rem;
        border-radius: 2rem;
        min-height: 150px;

        & h1 {
            font-size: 2.5rem;
        }

        .lineImages {
            display: none;
        }
    }

    .breadcrumb li {
        font-size: .75rem;
    }

    .main h2 {
        font-size: 2.5rem;
    }

    #header .header-logo img {
        margin-top: 5px;
    }

    .navbar {
        padding: 0;

        & .nav-item {
            & .nav-link {
                font-size: 1rem;
            }

            & .dropdown-toggle.active + .dropdown-menu {
                display: block;
            }

            & .dropdown-toggle:not(.active) + .dropdown-menu {
                display: none;
            }
        }
    }

    .navSearch {
        box-shadow: 0 10px 10px rgba(0,0,0,.1);
    }

    & .navTools {
        justify-content: space-between;
        padding: .5rem;

        & #secNav {
            display: flex;
            flex-direction: row;

            & .nav-item {
                & .nav-link {
                    font-size: 1.25rem;
                }
            }
        }
    }

    .navCollapser {
        border: 0;
        color: #0659AD;
        border: 1px solid #0659AD;
        border-radius: 50%;
        aspect-ratio: 1 / 1;
        background-color: #fff;
        line-height: 0;
        padding: .5rem .75rem;

        &:hover {
            color: #DA48A2;
        }
    }

    .videoPlayer {
        border-radius: 30px;
        inset: .5rem 0.5rem;
        max-width: calc(100% - 1rem);
        margin-bottom: 1rem;
    }

    .grid-section > div:has(.whoAreWe) {
        padding: 1rem 0;
        background-image: url(/img/bgLine.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center 12rem;
    }

    .whoAreWe {
        min-height: 450px;
        text-align: center;
        width: 100%;
        padding: 0;
        margin-bottom: 4rem;

        & .spoiler p {
            font-size: 1rem;
            font-weight: bold;
            color: #0659AD;
            margin: 0 auto 1rem auto;

            & strong {
                color: #DA48A2;
            }
        }

        & .lineImages {
            position: absolute;
            bottom: 30%;
            width: 100%;
            display: flex;
            z-index: -1;

            & img {
                width: 120px;
                max-width: auto;
                height: auto;
                position: absolute;
                border-radius: 2.125rem;
                will-change: transform, filter, opacity;
                animation-name: scatter;
                animation-duration: 6s;
                animation-timing-function: ease-in-out;
                animation-iteration-count: infinite;
                animation-fill-mode: both;
                animation-delay: var(--scatter-delay, 0s);

                &:nth-child(1) {
                    right: -3rem;
                    top: -1rem;
                    --tx: -10px;
                    --ty: -6px;
                    --rot: 3deg;
                    --blur: 4px;
                    --opacity: 0.98;
                    --scatter-delay: 0s;
                }

                &:nth-child(2) {
                    right: 25%;
                    top: -2.5rem;
                    --tx: 9px;
                    --ty: -5px;
                    --rot: 2.5deg;
                    --blur: 5px;
                    --opacity: 0.98;
                    --scatter-delay: -1.5s;
                }

                &:nth-child(3) {
                    right: 45%;
                    top: 1.5rem;
                    --tx: -8px;
                    --ty: 7px;
                    --rot: -2.5deg;
                    --blur: 3px;
                    --opacity: 0.97;
                    --scatter-delay: -3s;
                }

                &:nth-child(4) {
                    right: 80%;
                    top: -5rem;
                    --tx: 10px;
                    --ty: 5px;
                    --rot: 3.5deg;
                    --blur: 8px;
                    --opacity: 0.97;
                    --scatter-delay: -4.5s;
                }
            }
        }
    }

    .powerBubbles {
        margin: 0 -1rem;

        & .girlsImage {
            & .bubbles {
                & .bubble {
                    width: 4.7rem;
                    height: 3.2rem;
                    font-size: 1rem;
                    padding-bottom: 0.75rem;

                    &:nth-child(2n+1) {
                        top: 40%;
                        left: -2%;

                        &:before {
                            transform: scaleX(-1);
                        }
                    }

                    &:nth-child(2n) {
                        bottom: 10%;
                        right: -2%;
                    }
                }
            }

            & .spark {
                max-width: 40px;
                right: 5%;
                top: 1%;

                &.spark2 {
                    left: -2%;
                    top: 80%;
                }
            }

            & .star {
                max-width: 30px;

                &.star3 {
                    top: .5rem;
                }
            }
        }
    }

    .achyGarins {
        border-radius: 1rem;
        padding: 1rem;
        overflow: hidden;
        margin: 0 -0.25rem 3rem -0.25rem;

        & .mapCol {

            & .regionBtn {

                &:nth-child(1) {
                    top: 5.5%;
                    right: calc(50% + 1.5rem);

                    & .crvArrow {
                        left: 80%;
                        transform: scaleX(-1) rotate(-50deg) translateY(-1.5rem);
                    }

                    &:after {
                        left: 135%;
                        top: 100%;
                    }
                }

                &:nth-child(2) {
                    top: 86%;
                    left: calc(50% + 2rem);

                    & .crvArrow {
                        right: 90%;
                        transform: rotate(20deg) translateY(-4rem);
                    }

                    &:after {
                        right: 135%;
                        bottom: 100%;
                    }
                }

                &:nth-child(3) {
                    top: 45%;
                    right: calc(50% + 2rem);

                    & .crvArrow {
                        left: 110%;
                        transform: scaleX(-1) rotate(-110deg) translateY(2.5rem) translateX(-2rem);
                    }

                    &:after {
                        left: 65%;
                        top: 165%;
                    }
                }

                &:nth-child(4) {
                    top: 30%;
                    left: calc(50% + 1rem);

                    & .crvArrow {
                        right: 82%;
                        transform: rotate(-110deg) translateY(0rem) translateX(-1rem);
                    }

                    &:after {
                        right: 70%;
                        top: 140%;
                    }
                }
            }
        }
    }

    .simpleGridItems {
        padding: 1rem 0;
    }

    .achyProjects {
        padding: 0 1.5rem;
    }

    .achyStories {
        padding-top: 2rem;
        padding-bottom: 9rem;
        margin-right: -1rem;
        margin-left: -1rem;

        & .stories-swiper {
            padding-top: 2rem;

            & .swiper-slide {
                & .stories-item {
                    min-height: 82vh;
                    padding-top: 15rem;
                    padding-right: 35%;
                    padding-bottom: 6rem;


                    .stories-img-wrap {
                        width: 366px;
                        height: 408px;
                        transform: rotate(6.4deg);

                        & .achyTilda {
                            width: 66px;
                            height: 22px;
                            top: 1.25rem;
                            left: -1.25rem;
                        }

                        & .spark {
                            width: 3rem;
                        }

                        & .stories-img {

                            & img {
                                bottom: -1.5rem;
                                left: -4rem;
                                max-width: 396px;
                            }
                        }

                        & .stories-title {
                            left: 105%;
                            bottom: 1rem;
                            width: 160px;
                            font-size: 0.9rem;

                            & svg {
                                left: 0;
                                bottom: 100%;
                            }
                        }

                        & .stories-name {
                            right: auto;
                            left: 5rem;
                            bottom: -6rem;
                            width: 190px;
                            font-size: 0.9rem;
                            text-align: left;

                            & svg {
                                right: 90%;
                                bottom: 80%;
                                transform: scaleX(-1) rotate(90deg);
                            }
                        }
                    }


                    & .stories-quote {
                        left: auto;
                        right: 0;
                        max-width: 100%;
                        min-height: 310px;
                        padding: 2.25rem 2rem 1.75rem 2rem;
                        background-repeat: no-repeat;

                        & p {
                            font-size: .9rem;
                            max-width: 330px;
                        }
                    }
                }
            }

            & .swiper-button-next {
                right: 10%;
                top: 65%;

                &:after {
                    min-width: 3rem;
                    height: 3rem;
                }
            }

            & .swiper-button-prev {
                right: calc(10% + 60px);
                top: 65%;

                &:after {
                    min-width: 3rem;
                    height: 3rem;
                }
            }
        }

        & .runningText {
            font-size: 12.5rem;
            font-weight: bold;
            height: 10rem;
            top: 90%;
        }

        .runningText__inner {
            animation: marquee var(--marquee-duration, 30s) linear infinite;
        }

            .runningText__inner span {
                padding-right: 4rem; /* gap between repeats */
            }
    }

    .achyContact {
        & .form-row {
            justify-content: center;
        }
    }

    .donContent {
        padding: 0 .5rem 6rem .5rem;
        position: relative;

        & .container {
            padding: 0;
        }

        & .preOptionsNote {
            padding: 0 1rem;
            bottom: 1rem;
        }
    }


    .donProjects {
        gap: 3rem;
        padding: 2rem 1rem;

        & .donProject {
            flex-direction: column;

            & .img-wrap {
                padding: 1rem;

                & img {
                    max-width: 92vw;
                    margin: 0 -2rem;
                }
            }

            & .text-wrap {
                padding: 1.5rem 1.5rem 0 1.5rem;
                max-width: 100%;

                & h3 {
                    font-size: 2.25rem;
                }

                & p {
                    font-size: 1.25rem;
                }
            }

            & .action-wrap {
                padding: 1.5rem;
            }
        }
    }

    .donOptions {
        padding: 1rem;

        & .row {
            padding: 1rem 1.5rem 1rem 0;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        & .donOpt {
            padding: 2rem 2.5rem 2rem 2rem;

            & i {
                top: 40%;
                right: 0;
                width: 4rem;
                height: 4rem;
                transform: translate(50%, -50%);

                &[class^='simpleIcon-']:before {
                    background-size: 40px;
                    width: 3rem;
                    height: 3rem;
                }
            }
        }
    }

    .catsNav {
        & .nav-item {
            padding-bottom: .5rem;
        }
    }
    .garinsRow {
        padding-bottom: 0;
        & > div {
            padding-bottom: 1rem;
        }
    }
}

@media (max-width: 500px) /* Big Mobiles */ {
}