section {
    float:left;
    clear:left;
    width:100%;
    position:relative;
    overflow-x:clip;
    overflow-y:visible;
    scroll-margin-top: 120px;
}

.pad_top_0 {
    padding-top:var(--global_pad_med);
}
.pad_top_1 {
    padding-top:var(--global_pad_large);
}
.pad_right_0 {
    padding-right:var(--global_pad_med);
}
.pad_right_1 {
    padding-right:var(--global_pad_large);
}
.pad_bottom_0 {
    padding-bottom:var(--global_pad_med);
}
.pad_bottom_1 {
    padding-bottom:var(--global_pad_large);
}
.pad_left_0 {
    padding-left:var(--global_pad_med);
}
.pad_left_1 {
    padding-left:var(--global_pad_large);
}

.bgvid {
    /* mask-image:url('../img/skin.gif');
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center; */
}

#mute {
    position:Absolute;
    z-index:5;
    width: min(35px,5vw);
    right:1rem;
    bottom:1rem;
}

.patternbg {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    background-repeat: repeat;
}

.col_align_v_Top,
.col_align_v_Top .wrap {
    align-items:start;
}
.col_align_v_Centre,
.col_align_v_Centre .wrap {
    align-items:center;
}
.col_align_v_Bottom,
.col_align_v_Bottom .wrap {
    align-items:end;
}

.full-height {
    min-height:100vh;
}

.col1 {
    display:grid;
    place-items:center;
}

.col1 .text {
    position:relative;
    z-index:1;
    text-align: left;
    font-family: "segoe-ui", sans-serif;
    max-width:100%;

    & :is(h1,h2,h3,h4,h5,h6) {
        margin-bottom:1rem;
        clear:left;

        &:only-child {
            margin:0;
            padding:0;
            color:#fff;
        }
    }

    & p.align_center {
        max-inline-size: 80ch;
        margin-inline:auto;
    }

    & h1:only-child {
        text-align:center;
    }
}

.text{
    ul,ol {
        padding-left:1.5rem;
    }
    h3 {
        font-size:1.6rem;
        margin-top:2lh;
    }
}

:is(h1,h2,h3,h4,h5,h6):only-child {
    margin-bottom:0;
}

:is(h1,h2,h3,h4,h5,h6):not(:first-child) {
    margin-top:2lh;
}

h2 {font-size:2.5rem;}
h3 {font-size:1.5rem;}
h4 {font-size:1rem;}

main .light-text :is(p,li,td,h1,h2,h3,h4,h5,h6) {
    color:#fff;
}

.borderless,
table {
    border:none;
}

.scroll-down {
    position:fixed;
    bottom:2rem;
    left:50%;
    transform:translateX(-50%);
    border:4px solid #fff;
    border-radius:100rem;
    width:3rem;
    height:5rem;

    & .inner {
        width:12px;
        aspect-ratio: 1;
        border-left:4px solid #fff;
        border-bottom:4px solid #fff;
        position:absolute;
        left: calc(50% - 1.5px);
        transform:rotate(-45deg) translateX(-50%);
        top:1rem;
        animation-name:scroll-anim;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
    }
}

@keyframes scroll-anim {
    0%{
        opacity:0;
        top:0.5rem;
    }
    10%{
       opacity:1;
        top:0.5rem;
    }
    80%{
        opacity:1;
    }
    90%{
        top:2.5rem;
    }
    100%{
        opacity:0;
        top:2.5rem;
    }
}

.two-col-text,
.two-col-mixed,
.text-postcard {
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-gap:3rem;
}

.flip :is(.two-col-text,.two-col-mixed,.text-postcard) > div:nth-of-type(2n){
    order:1
} 
.flip :is(.two-col-text,.two-col-mixed,.text-postcard) > div:nth-of-type(2n+1){
    order:2;
} 

main .popup-gallery {
    padding:0;
    margin:0;

    & li {
        padding:0;
        margin:0;

        & a {
            float:left;
            width:100%;
        }

        &::marker {
            content:'';
        }
    }
}

.image {
    user-select: none;
}

.img-grid {
    display:grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap:3px;
}

.carousel {
    list-style:none;
    margin:0.5rem 0;

    & li {
        margin:0;
        padding:0;
    }
}

    section:has(.carousel) + section:has(.carousel) {
        & .carousel {
            margin-top:0;
        }
    }

    main .carousel-cell {
        float:left;
        width:unset;
        margin:0 0.25rem;

        & img {
            display:block;
            height:30vh;
            width:auto;
        }
    }


.stats {
    text-align: center;

    & .stat {
        display:inline-block;
        width:min(300px,100%);
        padding-inline:calc(var(--global_padding_inline) / 2);
        text-align: center;
        font-family: "Domine", serif;
        font-weight:bold;
        margin-block:2rem;

        & p {
            line-height:1;
            margin:0;
            font-size:1.4rem;
        }

        & p:has(.count-up) {
            font-size:7rem;
            margin:0;
            line-height:1;
        }
    }
}

.test {
    padding:0 var(--global_padding) 0;
    text-align: center;
    list-style: none;

    & img {
        height:5rem;
        margin-bottom:2rem;
        user-select: none;
    }

    & p {
        margin-inline:auto;
        max-width:70ch;
        font-size:1.6rem;
        font-weight:200;
        font-style:italic;
        margin-bottom:1em;
        text-wrap:balance;

        &.giver {
            font-style: normal;
            font-weight:normal;
            font-size:1rem;
            color:var(--blue);
            text-transform: uppercase;
            letter-spacing: 0.03em;
            padding-top:1rem;
            margin-bottom:0;
        }
    }
}

.flickity-prev-next-button {
    width:50px;
    height:50px;
    border:1px solid #000;
    opacity:0.5;
}


.fbfeed {
    display:grid;
    grid-template-columns: repeat(3,1fr);

    & div {
        aspect-ratio:1;
    }

    & > p {
        position:absolute;
        width:100%;
        top:50%;
        color:#fff;
        text-align: center;
        padding:var(--global_padding);
        font-size:2rem;
        transform:translateY(-50%);
        margin:0;
        z-index:3;
    }

    & div:nth-of-type(odd){
        background-color:#0002;
    }
}

.insta {
    display:grid;
    grid-template-columns: repeat(3,1fr);
}

    .insta a {
        position:relative;
        overflow:hidden;
        aspect-ratio:1/1;
        user-select: none;
    }

        .insta a div {
            position:Absolute;
            inset:0;
            width:100%;
            height:100%;
            transition:all 0.5s ease-out;
        }

        .insta a:hover div {
            width:110%;
            height:110%;
            left:-5%;
            top:-5%;
        }

    .insta img {
        width:100%;
        height:100%;
        aspect-ratio:1/1;
        object-fit:cover;
    }

    .insta .icon {
        position:absolute;
        z-index:2;
        right:1rem;
        bottom:1rem;
        width:3rem;
        height:3rem;
        max-width:5vw;
        max-height:5vw;
    }

.newsletter {
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-gap:3rem;
    align-items:center;
}

form {
    background-color:#fff;
    padding:min(3rem,var(--global_padding));
    border-radius:1rem;
    box-shadow:0 1.5rem 3.5rem hsl(from var(--dblue) h s l / 0.25);
    display:grid;
    grid-gap:0.5rem;

    & button.yellow-btn {
        border:none;
        outline:none;
        width:max-content;
        float:right;
        padding-inline:3rem;
    }
}

    input,
    textarea {
        border:none;
        outline:none;
        background-color:hsl(from var(--green) h s l / 0.2);
        border-radius:0.5rem;
        padding:1rem;
        margin:0;

        &::placeholder {
            color:var(--green);
            opacity:1;
        }
    }

.success {
    display:grid;
    grid-template-columns: 3rem 1fr;
    grid-gap:1rem;
    align-items: center;

    & .tick {
        font-weight:bold;
        width:100%;
        aspect-ratio: 1;
        border-radius:100%;
        background-color:var(--green);
        padding:0.75rem;
        text-align: center; 
        color:#fff;
    }

    & p {
        margin:0;
    }
}


.team {
    display:grid;
    grid-template-columns: repeat(4,1fr);
    /* grid-gap:3rem; */
}

    .mem {
        position:relative;
        transform-style: preserve-3d;
        perspective: 1000px;
        text-decoration: none;
        filter:drop-shadow(0 3px 6px #0004);

        &:nth-of-type(7n +1){
            rotate:-3deg;
        }
        &:nth-of-type(7n +2){
            rotate:1deg;
        }
        &:nth-of-type(7n +3){
            rotate:4deg;
        }
        &:nth-of-type(7n +4){
            rotate:-5deg;
        }
        &:nth-of-type(7n +5){
            rotate:-2deg;
        }
        &:nth-of-type(7n +6){
            rotate:3deg;
        }
        &:nth-of-type(7n +7){
            rotate:0deg;
        }
    }

        .mem .front {
            position:relative;
            transform:rotateY(0deg);
            backface-visibility: hidden;
            transition:transform 0.5s ease-out;
            user-select: none;
            

            & .photo,
            &::after {
                position:absolute;
                width:95%;
                left:2.4%;
                top:5%;
                aspect-ratio: 1;
                object-fit:cover;
                z-index:1;
            }

            &::after {
                content:'';
                box-shadow:0 0 50px inset #0005;
                z-index:2;
            }

            & .polaroid {
                position: relative;
                z-index:3;
                aspect-ratio: 0.827;
            }

            & .front-name {
                position:absolute;
                z-index:4;
                font-family: "Caveat", cursive;
                color:var(--dblue);
                letter-spacing: -0.03em;
                font-size:12cqw;
                bottom:0;
                left:0;
                width:100%;
                padding:0.25lh;
                text-align: center;
                margin:0;
                rotate:-5deg;
                font-weight:bold;
            }
        }
        .mem .back {
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            overflow-y:auto;
            background-color:#eceeef;
            transform:rotateY(-180deg);
            backface-visibility: hidden;
            padding:min(2rem,5cqw);
            text-align: center;
            transition:transform 0.5s ease-out;
            display: grid;
            align-content: center;

            & .dblue-outline-btn {
                padding:3cqw;
                font-size:5cqw;
            }

            & h2{
                margin-bottom:0;
                font-size:12cqw;
            } 

            & p {
                font-size:6cqw;
            }
        }

        .mem:hover .front {
            transform:rotateY(180deg);
        }
        .mem:hover .back {
            transform:rotateY(0deg);
        }

.polaroids {
    display:grid;
    grid-template-columns: 1fr;
}

.polaroids:has(.pol:nth-of-type(2)){
    grid-template-columns: repeat(2,1fr);
}
.polaroids:has(.pol:nth-of-type(3)){
    grid-template-columns: repeat(3,1fr);
}

.pol {
    filter:drop-shadow(0 3px 6px #0004);
    width:100%;
    float:left;
    user-select: none;

    &:nth-of-type(7n +1){
        rotate:-3deg;
    }
    &:nth-of-type(7n +2){
        rotate:1deg;
    }
    &:nth-of-type(7n +3){
        rotate:4deg;
    }
    &:nth-of-type(7n +4){
        rotate:-5deg;
    }
    &:nth-of-type(7n +5){
        rotate:-2deg;
    }
    &:nth-of-type(7n +6){
        rotate:3deg;
    }
    &:nth-of-type(7n +7){
        rotate:0deg;
    }

    & .photo,
    &::after {
        position:absolute;
        width:95%;
        left:2.4%;
        top:5%;
        aspect-ratio: 1;
        object-fit:cover;
        z-index:1;
    }

    &::after {
        content:'';
        box-shadow:0 0 50px inset #0005;
        z-index:2;
    }

    & .polaroid {
        position: relative;
        z-index:3;
        aspect-ratio: 0.827;
    }
}

.text-postcard .rs li {
    width:100%;
}

.postcard {
    box-shadow: -1px 1px 1px #ddd;
    position: relative;
    rotate:-3deg;
    
    & li a img {
        user-select: none;
    }
}

.postcard::after {
    content: '';
    position:absolute;
    display:block;
    height:6rem;
    width:calc(100% - 2rem);
    bottom:3rem;
    background-image:radial-gradient(rgba(0,0,0,6) 0%, rgba(0,0,0,0) 65%);
    z-index:3;
    top:calc(100% - 3rem);
    left:1rem;
    opacity:0.4;
    z-index:-1;
    user-select: none;
}

.postcard li {
    background-color:#f5f5f5;
}

.postcard img {
    padding:2cqw;
}

.map-outer {
    display:grid;
    grid-template-columns: 2fr 1fr;
    grid-gap:var(--global_padding_inline);
}

.map {
    position:relative;

    & img {
        user-select: none;
    }
}

    .loc { 
        position:absolute;        
        left:calc(var(--lon) * 1%);
        bottom:calc(var(--lat) * 1%);

        & img {
            position:Absolute;
            width:1rem;
            max-width:1rem;
            transform:translate(-50%, -100%);
            transition: transform 0.25s ease-in-out;
        }

        & p {
            position:absolute;
            width:max-content;
            z-index:5;
            font-size:0.8rem;
            transform:translateX(-50%);
            bottom:calc(100% + 2rem);
            margin:0;
            background-color:var(--prestige_dblue);
            color:#fff;
            padding:0.25rem 1rem;
            border-radius:100rem;
            opacity:0;
            pointer-events: none;
            user-select: none;
            border:1px solid #fff;
            transition:opacity 0.25s ease;
            font-family: "Domine", serif;;
        }

        &:hover p {
            opacity:1;
        }

        &:hover img {
            transform:translate(-50%, calc(-100% - 0.25rem));
        }
    }

.logos {
    display:flex;
    gap:3rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    & .image {
        width:min(200px,100%);
    }
}

.wrap:has(.logos) h2 {
    margin-bottom:2rem;
}

.heading {
    text-align: center;
    margin-bottom:1lh;
}


@media screen and (max-width:1000px){
    :root {
        --global_pad_large:5vw;
    }

    .team {
        grid-template-columns: repeat(3,1fr);
    }
}

@media screen and (max-width:800px){
    .two-col-text,
    .two-col-mixed,
    .newsletter,
    .text-postcard,
    .map-outer {
        grid-template-columns: 1fr;
        text-align: center;

        & .align_right {
            width:100%;
            text-align:center;
        }
    }

    .contact .text {
        order:-1;
    }

    .pad_top_1 {
        padding-block-start:6rem;
    }
    .pad_top_0 {
        padding-block-start:4rem;
    }

    .pad_bottom_1 {
        padding-block-end:6rem;
    }
    .pad_bottom_0 {
        padding-block-end:4rem;
    }
}

@media screen and (max-width:700px){

    h1 {
        font-size:2rem;
    }

    .two-col-text {
        padding:0;
    }
}

@media screen and (max-width:600px){
    .team {
        grid-template-columns: 1fr 1fr;
    }

    .insta {
        grid-template-columns: repeat(2,1fr);
    }
}

@media screen and (max-width:500px){
    h1 {
        font-size:1.75rem;
    }

    .carousel-cell img {
        height:25vh;
    }

    .text p {
        font-size:1.4rem;
    }
}

@media screen and (max-width:450px){
    .polaroids {
        grid-template-columns: 1fr;
    }

    .polaroids:has(.pol:nth-of-type(2)),
    .polaroids:has(.pol:nth-of-type(3)){
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width:350px){
    .team {
        grid-template-columns: 1fr;
    }
}