/*RESET*/

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

main {
    display: block;
}

a {
    background-color: transparent;
}

b,
strong {
    font-weight: bolder;
}

img {
    border-style: none;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    appearance: button;
    -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

[hidden] {
    display: none;
}

* {
    margin: 0;
}

.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
    &:focus-visible {
        position: static;
        clip-path: none;
        width: auto;
        height: auto;
        margin: 0;
    }
}

/*OTHER*/
@font-face {
    font-family: "IvyPresto Display Thin Italic";
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: local("IvyPresto Display Thin"),
        url("assets/fonts/fonnts.com-Ivy-Presto-Display-Thin.otf")
            format("opentype");
}
@font-face {
    font-family: "IvyPresto Display Light Italic";
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: local("IvyPresto Display Light"),
        url("assets/fonts/fonnts.com-Ivy-Presto-Display-Light.otf")
            format("opentype");
}
@font-face {
    font-family: "IvyPresto Text Thin";
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: local("IvyPresto Text Thin"),
        url("assets/fonts/fonnts.com-Ivy-Presto-Text-Thin.otf")
            format("opentype");
}
@font-face {
    font-family: "IvyPresto Text Light";
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: local("IvyPresto Text Light"),
        url("assets/fonts/fonnts.com-Ivy-Presto-Text-Light.otf")
            format("opentype");
}
@font-face {
    font-family: "Neue Haas Unica Light";
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: local("Neue Haas Unica Light"),
        url("assets/fonts/NeueHaasUnicaPro-Light.ttf") format("truetype");
}
@font-face {
    font-family: "Neue Haas Unica Light Italic";
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: local("Neue Haas Unica Light Italic"),
        url("assets/fonts/NeueHaasUnicaPro-LightIt.ttf") format("truetype");
}
@font-face {
    font-family: "Neue Haas Unica Medium";
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: local("Neue Haas Unica Medium"),
        url("assets/fonts/NeueHaasUnicaPro-Medium.ttf") format("truetype");
}


:root {
    --gap: 1rem;
    --fluid-size: clamp(10px, 0.8rem + 0.8vw, 3rem);
    --time: 0.3s;
    --timing: cubic-bezier(0.645, 0.045, 0.355, 1);
    --headerHeight: 10px;
    --title-italic-thin: "IvyPresto Display Thin Italic", serif;
    --title-italic: "IvyPresto Display Light Italic", serif;
    --title-normal: "IvyPresto Text Thin", serif;
    --title: "IvyPresto Text Light", serif;
    --paragraph: "Neue Haas Unica Light", Arial, Helvetica, sans-serif;
    --paragraph-italic: "Neue Haas Unica Light Italic", Arial, Helvetica,
        sans-serif;
    --paragraph-medium: "Neue Haas Unica Medium", Arial, Helvetica,
        sans-serif;

    --pad-big: 5.5%;
    --pad-big-inner: 4.5%;
    --pad-vertical: 4.25em;
}
@media screen and (min-width: 45em) {
    :root {
        --pad-big: 10.5%;
        --pad-big-inner: 8.5%;
    }
}

html {
    font-size: 16px;
}
body {
    font-family: var(--paragraph);
    font-size: var(--fluid-size);
    line-height: 1.27;
    /* font-size: 1em; */
    /* font-variation-settings: "wght" 300; */
    /* letter-spacing: .02em; */
}

em {
    font-family: var(--paragraph-italic);
    font-style: normal;
}

h1,
h2,
h3,
.H3,
h4,
h5,
h6 {
    font-family: var(--title-normal);
    font-weight: normal;
    letter-spacing: calc(-1em / 100);
}
h1 > em,
h2 > em,
h3 > em,
.H3 > em,
h4 > em,
h5 > em,
h6 > em {
    font-family: var(--title-italic);
    font-style: normal;
    letter-spacing: normal;
    text-rendering: geometricPrecision;
}

h1 {
    font-size: 4.36em;
    line-height: 1;
    text-rendering: geometricPrecision;
}
h2 {
    font-size: 2.63em;
    line-height: 1.2;
    text-rendering: geometricPrecision;
}
h3,
.H3 {
    font-size: 1.97em;
    line-height: 1.2;
}

strong,
.strong {
    font-family: var(--paragraph-medium);
    font-weight: normal;
}

img {
    max-width: 100%;
    height: auto;
}

nav {
    ul {
        list-style: none;
        padding-inline-start: 0;
    }
}

body > header:first-of-type,
main > *,
[data-header],
.single.two-cards {
    padding-inline: .8rem;
}

@media screen and (min-width: 45em) {
    body > header:first-of-type {
        padding-inline: 3.125rem;
    }
    main > *,
    [data-header],
    .single.two-cards {
        padding-inline: 3.125rem;
    }
}



:root {
    --white: #fefdfc;
    --black: #111111;
    --accent: #ed1c7d;

    --Ochre: #e7c71e;
}

@layer themes.color {
    body {
        color: var(--black);
        background-color: var(--white);
        a {
            color: inherit;
        }
    }
    [data-main-menu] li:last-of-type a {
        color: var(--accent);
    }
}

a {
    background-color: transparent;
    text-decoration: none;
}
*:focus-visible {
    outline-color: var(--accent);
}

button:hover {
    cursor: pointer;
}

video {
    --ratio: 1/1;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: var(--ratio);
    @media screen and (min-width: 45em) {
        --ratio: 16/9;
    }
}

.btn {
    display: inline-block;
    font-family: var(--paragraph-medium);
    font-size: 0.74em;
    border: none;
    border-radius: 2lh;
    padding: 0.625em 1em;
    /* padding: 1.2em 1.8em; */
    background-color: var(--Ochre);
    color: var(--black);
    transition: background-color 0.3s, color 0.3s;
}
.btn:hover,
.btn:focus-visible {
    color: var(--Ochre);
    background-color: var(--black);
}


body {
    > header:first-of-type {

        padding-block: 0.6rem;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .logo {
            width: clamp(140px, 30lvw, 230px);
            cursor: default;
            a {
                border: none;
            }
            svg {
                width: 100%;
                height: auto;
                vertical-align: middle;
            }
        }
    }
    main {
        min-height: 100svh;
    }
}

body > footer {
    padding-block: 0 6.25em;

    section > div[style] {
        padding-inline: var(--pad-big);
        padding-block: 5.33em;
    }

    h1 {
        font-size: 2.66em;
        letter-spacing: calc(-1em * 5 / 100);
        font-family: var(--title);

        + p {
            font-size: 1.66em;
            margin-block-start: 0.8em;
        }
    }

    [data-header] {
        margin-block-start: 5.33em;
        .logo svg {
            width: clamp(130px, 20lvw, 14.3rem);
            height: auto;
        }
        nav {
            border-block-start: 1px solid;
            margin-block-start: 0.5em;
        }
        [data-menu] {
            flex-direction: column;
            inline-size: fit-content;
            margin-inline: auto 0;
            padding-block-start: 1.3em;
        }
    }
    [data-form] {
        background-color: #27a176;
        padding-block: 2.66em;
        text-align: center;
        border-block-end: 1em solid #1c62ed;
        h1,
        h2 {
            font-family: var(--paragraph-medium);
            font-size: 2em;
            margin-block-end: 0.2em;
        }
    }
}

#foot-form {
    padding:0;

    > div[style] {
        padding-inline: var(--pad-big);
        padding-block: 5.33em;
    }

    > div {
        margin:0;
    }


    h1 {
        font-size: 2.66em;
        letter-spacing: calc(-1em * 5 / 100);
        font-family: var(--title);

        + p {
            font-size: 1.66em;
            margin-block-start: 0.8em;
        }
    }


    [data-form] {
        background-color: #27a176;
        padding-block: 2.66em;
        text-align: center;
        border-block-end: 1em solid #1c62ed;
        display:block;
        h1,
        h2 {
            font-family: var(--paragraph-medium);
            font-size: 2em;
            margin-block-end: 0.2em;
        }
    }
}

form[name] {
    position: relative;
    inline-size: fit-content;
    margin-inline: auto;

    label {
        display: block;
        span {
            font-size: 0.66em;
        }
    }
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        width: 100%;
        border: none;
        border-radius: 0.5em;
        background-color: var(--white);
        color: var(--black);
        font-size: 0.666em;
        padding: 0.666em 1em;
        box-sizing: border-box;
        display: block;
        min-width: 20ch;
    }
    textarea {
        min-height: 22ch;
    }

    > div {
        display: grid;
        gap: 2rem;
        margin-block: 1.31em;
    }
    i.required {
        font-style: normal;
        font-size: 1.4em;
        line-height: 0;
    }
    [data-surname] {
        position: absolute;
        top: -10000000em;
    }
}

form[name="signup"], form[name="user-email"] {
    inline-size: clamp(23ch, 30lvw, 27rem);
    padding: 0.666em 1em;
    text-align: center;
}

#log {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    background: var(--black);
    color: var(--white);
    padding: 3em;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.2s linear;
    border-radius: 0.3em;
}
#log:empty {
    opacity: 0;
    z-index: -1;
}
form[name="contact"],
form[name="share"] {
    width: auto;
    padding-inline: max(1em, 18%);

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        border-radius: 0.25em;
        padding-block: 1.4em;
    }

    select {
        padding-block: 1.2em;
    }

    ::placeholder {
        color: var(--black);
    }

    label span {
        position: absolute;
        padding-inline-start: 1.1em;
        font-size: 0.6em;
        line-height: 1.7;
    }

    > div {
        text-align: start;
        gap: 0.66em;
    }
    label:has(:placeholder-shown) {
        span {
            visibility: hidden;
        }
    }

    @media screen and (min-width: 45em) {
        > div {
            grid-template-columns: 50% 50%;
        }
        label:has(select, textarea) {
            grid-column: span 2;
        }
    }
}

[data-menu] {
    display: flex;
    gap: 0.3em 0.625em;
    .current-menu-item a {
        pointer-events: none;
        background-color: var(--Ochre);
    }
    li {
        font-family: var(--paragraph-medium);
        font-size: 0.66em;
    }
    a {
        display: block;
        text-rendering: geometricPrecision;
        &:hover {
            text-decoration: underline;
        }
    }
}
[data-main-menu] a {
    padding: 0.52em 0.5em 0.7em;
    border-radius: 0.31em;
}

[style*="--BGimg:"] {
    background-image: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 50.02%,
            rgba(0, 0, 0, 0.5) 75%
        ),
        var(--BGimg);
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--white);
}
[style*="--ratio:"] {
    aspect-ratio: var(--ratio, none);
}
[style*="--imgs:"] {
    background-image: var(--imgs);
    background-repeat: no-repeat;
}
[style*="--imgs-pos:"] {
    background-position: var(--imgs-pos);
}
[style*="--imgs-size:"] {
    background-size: var(--imgs-size);
}
[style*="--BGcol:"] {
    background-color: var(--BGcol);
}

.two-cards {
    margin-block: 1.83em 5.3em;
    >a.btn {
        display: block;
        inline-size: fit-content;
        margin-inline: auto 0;
        margin-block-end: 2.44em;
    }
    > div {
        display: grid;
        gap: 1.33em;
        @media screen and (min-width: 45em) {
            grid-template-columns: 1fr 1fr;
        }
    }
    article {
        padding: 1.33em 1.8em;
        align-content: end;
        border-radius: .84em;
    }
    h1 {
        font-size: 1.66em;
        font-family: var(--paragraph-medium);
        letter-spacing: normal;
        margin-block-end: .8em;
    }
    h2 {
        font-size: 1em;
        font-family: var(--paragraph-medium);
        letter-spacing: normal;
        margin-block-end: 1.33em;
    }
}



[name="signup"] [name="user-email"] {
    inline-size: clamp(23ch, 30lvw, 27rem);
    padding: 0.666em 1em;
    text-align: center;
}


/*MAIN MENU*/
html.noscroll.menu-open {
    overflow: clip;
}
[data-main-menu] {

    [data-menu-button] {
        appearance: none;
        background: none;
        border: none;
        padding: 0;
        color: inherit;
        z-index: 10;
        position: fixed;
        inset: .5em 0 auto auto;
        cursor: pointer;

        @media screen and (max-width: 44.99999em) {
            &[aria-expanded="true"] {
                color: var(--accent, red);
            }
        }

        @media screen and (min-width: 45em) {
            display: none;
        }
    }

    [data-menu] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        justify-items: center;
        align-items: center;
        transition: translate 1s cubic-bezier(0.77, 0, 0.175, 1);

        @media screen and (max-width: 44.99999em) {
            background-color: var(--white);
            position: fixed;
            inset: 0;
            padding-block-start: 2.5rem;
            height: calc(100svh - 0rem);
            font-size: 1.5em;

            &[hidden] {
                translate: 0 calc(-120% - 2.5rem);
            }
        }

        @media screen and (min-width: 45em) {
            flex-direction: row;
            justify-content: center;
        }

        /* &[hidden] {
            translate: 0;
        } */
    }
}
[data-menu-button] {
    svg {
        border-radius: .4em;
    }
    path[fill="none"] {
        fill: rgba(255, 255, 255, 0.5);
    }
}

.home, .page-template-page-home {
    main >div:nth-child(1) {
        padding-block-end: 6.25em;
        padding-inline: var(--pad-big);
        h1 {
            max-inline-size: 14ch;
            padding-block-start: 2em;
        }
        p {
            margin-block: .8em;
            font-size: 1.64em;
        }
    }
    main >div:nth-child(2) {
        padding-block: 3em 6.66em;
        padding-inline: var(--pad-big);
        h2 {
            max-inline-size: 14ch;
        }
        p {
            font-size: 1.644em;
            line-height: 1.3;
            max-inline-size: 30ch;
            margin-inline: auto;
            margin-block-start: .8em;
        }
        
    }
    main >div:nth-child(3) {
        padding-block: 6.66em;
        padding-inline: var(--pad-big);

        display: grid;
        grid-template-columns: 100%;
        gap: var(--pad-vertical) 1.3em;
        img {
            margin-inline: auto;
        }
        @media screen and (min-width: 45em) {
            grid-template-columns: 50% 50%;
            img {
                grid-column: span 2;
            }
        }
        section {
            padding: 1.32em;
            border-radius: .33em;
            letter-spacing: -.032em;
        }
        p {
            margin-block: 1.32em;
        }
        li {
            line-height: 1.8;
        }
    }
    main >div:nth-child(4) {
        padding-block: 2.6em;
        > p,
        > h3 {
            padding-inline: 7.7%;
        }
        p.strong {
            margin-block-start: 1em;
            font-size: 1.32em;
        }
        > ul {
            padding-inline-start: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: start;
            gap: 1.32em;
            list-style: none;
            margin-block: 2.63em;
        }
        li {
            flex: 1;
            padding: 1.32em .4em;
            border-radius: 0.33em;
            h3 {
                font-family: var(--paragraph-medium);
                font-size: 1.31em;
                letter-spacing: calc( 1em / 100 );
            }
            p {
                font-size: .65em;
                margin-block-start: 1em;
                line-height: 1.5;
                letter-spacing: calc( 1em / 100 );
            }
        }
    }

    main >div:nth-child(5) {
        padding-block-start: 5.26em;
        text-align: center;
        border-block-end: .82em solid var(--accent);

        h2 {
            font-family: var(--paragraph-medium);
            font-size: 2em;
            padding-inline: var(--pad-big);
        }
        ul {
            list-style: none;
            padding-inline: var(--pad-big);
            display: grid;
            gap: 1.33em;
            margin-block-start: 1.3em;
            @media screen and (min-width: 45em) {
                grid-template-columns: 1fr 1fr;
            }
        }
        li {
            padding-block: 2.23em;
            padding-inline: .57em;
            border-radius: .33em;

            &:nth-child(odd) {
                background-color: #F5EFE6;
            }

            &:nth-child(even) {
                background-color: #FEFAF5;
            }
        }
        p {
            font-family: var(--paragraph-medium);
            margin-block-start: .66em
        }
    }

    main >*:nth-child(7) {
        padding-block: 7.5em 2em;
        background-repeat: repeat-x;
        background-position: top center;
        background-size: auto;
    }

    main >*:nth-child(8) {
        padding-block: 4.4em;
        text-align: center;
    }
}

.page-template-page-about {
    main >:nth-child(2) {
        padding-block: 1.33em 5.33em;
        h2 {
            letter-spacing: calc(-1em * 4 / 100);
            em {
                font-family: var(--title-italic-thin);
            }
        }
        h2, p {
            margin-inline: var(--pad-big-inner);
        }
        p {
            font-size: 1.66em;
            letter-spacing: calc(-1em / 100);
        }
        img {
            border-radius: .42em;
            margin-block: 2.66em;
            display: block;
        }
    }
    main >:nth-child(3) {
        padding-block-start: 5.33em;
        padding-inline: 0;
        p, h3 {
            margin-inline: var(--pad-big);
            font-family: var(--title);
            text-rendering: geometricPrecision;
        }
    }
    main >:nth-child(4) {
        padding-block: 5.33em 1.83em;
        padding-inline: var(--pad-big);
        section {
            margin-block-end: 2.83em;
            border-radius: .4em;
            display: grid;
            gap: 2em;
            align-items: center;
            img {
                object-fit: cover;
                align-self: stretch;
                min-inline-size: 5rem;
            }
            > div {
                max-inline-size: 38ch;
                padding-block: 2em;
            }
            &:nth-child(odd) {
                grid-template-columns: 1fr auto;
                > div {
                    margin-inline-end: 1.8em;
                }
            }
            &:nth-child(even) {
                grid-template-columns: auto 1fr;
                > div {
                    margin-inline-start: 1.8em;
                }
                img {
                    order: 2;
                }
            }
            h3 {
                margin-block-end: .666em;
            }
        }
    }

    main >:nth-child(5) {
        padding-block: 5em;
        border-block-start: .82em solid var(--accent);

        h2 {
            margin-inline: auto;
            max-inline-size: 29ch;
        }
    }

    main >:nth-child(6) {
        padding-block: 2.44em;
        padding-inline: var(--pad-big);
        ul {
            list-style: none;
            padding: 0;
        }
        h3 {
            font-family: var(--paragraph-medium);
        }
        li {
            margin-block: 2.44em;
            display: grid;
            gap: 1.5em;
            align-items: center;
            grid-template-columns: 1fr auto;
        }
        img {
            border-radius: .4em;
            min-inline-size: 12rem;
        }
        p {
            margin-block: 1em;
            max-inline-size: 37ch;
            font-size: 1.33em;
            letter-spacing: calc(-1em * 4 / 100);
        }
        li:nth-child(even) {
            grid-template-columns: auto 1fr;
            img {
                order: 2;
            }
        }
    }
}

.page-template-page-getinvolved {
    h1 > em,
    h2 > em,
    h3 > em,
    .H3 > em,
    h4 > em,
    h5 > em,
    h6 > em {
        font-family: var(--title-italic-thin);
    }
    main img {
        border-radius: .4em;
    }
    main >:nth-child(1) {
        padding-block: 1.33em 5.33em;
        h1, p {
            margin-inline: var(--pad-big-inner);
        }
        h1 {
            margin-block: 0.6em;
            letter-spacing: calc(-1em * 4 / 100)
        }
        p {
            font-size: 1.66em;
        }
    }
    
    main > section {
        padding-block: 5.3em;
        padding-inline: var(--pad-big);
        h2 {
            font-family: var(--title);
            letter-spacing: calc(-1em * 5 / 100);
            em {
                font-family: var(--title-italic);
            }
        }
        h3 {
            font-family: var(--paragraph);
            font-size: 1.66em;
            margin-block: .8em;
        }
        h4 {
            font-family: var(--paragraph-medium);
            font-size: 1em;
        }
        p {
            margin-block-end: 1.3em;
            line-height: 1.3;
        }
        > div {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 1.3em;
            img {
                flex: 0;
            }
            > div {
                flex: 1;
                min-inline-size: 18ch;
            }
        }
        small {
            font-size: .66em;
        }
        
        &:nth-child(odd) {
            img {
                order: 2;
            }
        }


        @media screen and (max-width: 44.99999em) {
            > div img {
                max-width:70%;
            }
        }

        @media screen and (min-width: 45em) {
            > div img {
                max-width:35%;
            }
        }
    }
}

.page-template-page-diy {
    h1 > em,
    h2 > em,
    h3 > em,
    .H3 > em,
    h4 > em,
    h5 > em,
    h6 > em {
        font-family: var(--title-italic-thin);
    }
    main img {
        border-radius: .4em;
    }
    main >div:not(#foot-form) {
        /*padding-block: 5.21em;*/
        > * {
            margin-inline: var(--pad-big-inner);
        }
        p {
            font-size: 1.66em;
            margin-block: 0.8em;
        }
        p:has(+ ul) {
            margin-block-end: 0;
        }
        ul, ol {
            font-size: 1.66em;
        }
        h2 {
            font-family: var(--title);
            letter-spacing: calc(-1em / 100 * 5);
            em {
                font-family: var(--title-italic);
            }
        }
        ul li::marker {
            font-size: .5em;
        }
        ol li::marker {
            font-family: var(--paragraph-medium);
        }
    }

    main >:nth-child(2), 
    main >:nth-child(3), 
    main >:nth-child(4), 
    main >:nth-child(5) {
        padding-block: 5.21em;
    }

    main >:nth-child(1) {
        padding-block: 1.33em 5.33em;
        h1 {
            margin-block: 0.6em;
            letter-spacing: calc(-1em * 4 / 100)
        }
        p:first-of-type {
            margin-block-end: 1.5em;
        }
    }
    main >:nth-child(4) {
        ol {
            margin-block: 0.8em;
        }
        ol li {
            margin-block-end: 1.3em;
        }
        ol li:last-of-type {
            margin-block-end: 0;
        }
    }

    main >:nth-child(5) {
        /*margin-inline: var(--pad-big-inner);*/
        margin-inline: auto !important;
        padding-block-start: 0 !important;
        img {
            display: block;
            margin-block-end: 2.6em;
            margin-inline: auto !important;
        }
        img:last-of-type {
            margin-block-end: 1.6em;
        }
    }

    @media screen and (max-width: 45em) {

        main >:nth-child(5) {
            margin-inline:0 !important;
        }
    }
}

.page-template-page-voicesatthetable {
    h1 > em,
    h2 > em,
    h3 > em,
    .H3 > em,
    h4 > em,
    h5 > em,
    h6 > em {
        font-family: var(--title-italic-thin);
    }
    main img {
        border-radius: .4em;
    }
    main >:nth-child(1) {
        padding-block: 1.33em 5.33em;
        h1, p {
            margin-inline: var(--pad-big-inner);
        }
        h1 {
            margin-block: 0.6em;
            letter-spacing: calc(-1em * 4 / 100)
        }
        p {
            font-size: 1.63em;
        }
    }
    
    .two-cards {
        margin-block: 5.33em;
    }
}

.single {
    main img {
        border-radius: .4em;
        margin-block-end: 2.6em;
    }
    
    main {
        /*background-color: #FEFAF5;
        background-image: url(assets/media/cerchi-colorati-2.png);
        background-repeat: no-repeat;
        background-position: 111% 100%;
        background-size: 50%;
        border-block-end: 1em solid var(--accent);
        padding-inline: var(--pad-big);
        padding-block: 4.1em;
        display: grid;
        gap: 0 1.33em;*/
        > article {
            background-color: #FEFAF5;
            background-image: url(assets/media/cerchi-colorati-2.png);
            background-repeat: no-repeat;
            background-position: 111% 100%;
            background-size: 50%;
            border-block-end: 1em solid var(--accent);
            padding-inline: var(--pad-big);
            padding-block: 4.1em;
            display: grid;
            gap: 0 1.33em;
        }

        > * {
            padding-inline: 0;
        }

        h1 {
            font-family: var(--title);
            font-size: 2em;
            letter-spacing: calc(-1em / 100 * 5);
        }
        h2 {
            font-size: 1.33em;
            font-family: var(--paragraph);
            /* margin-block: 1em 1.9em;*/
            margin-block: 1em;
        }

        p {
            margin-block: 1.3em 2.6em;
            letter-spacing: calc(-1em / 100);
        }
        strong {
            font-family: var(--paragraph-medium);
            letter-spacing: calc(-1em / 100);
            margin-bottom:-20px;
        }
    }
    
    .two-cards {
        margin-block: 5.33em;
    }

    @media (width > 768px) {
        main > article {
            grid-template-columns: 1fr 36.8%;
        }
        article .imgs {
            grid-row: span 2;
        }
    }
    .two-cards {
        margin-block: 5.3em 5.1em;
    }
}

.page-template-page-contact {
    h1 > em,
    h2 > em,
    h3 > em,
    .H3 > em,
    h4 > em,
    h5 > em,
    h6 > em {
        font-family: var(--title-italic-thin);
    }
    main#content {
        min-height: auto;
    }
    main img {
        border-radius: .4em;
    }
    main >:nth-child(1) {
        padding-block: 1.33em 5.33em;
        h1, p {
            margin-inline: var(--pad-big-inner);
        }
        h1 {
            margin-block: 0.6em;
            letter-spacing: calc(-1em * 4 / 100)
        }
        p {
            font-size: 1.66em;
        }
    }
    
    main > section {
        padding-block: 5.3em;
        padding-inline: var(--pad-big);
        h2 {
            font-family: var(--title);
            letter-spacing: calc(-1em * 5 / 100);
            em {
                font-family: var(--title-italic);
            }
        }
        h3 {
            font-family: var(--paragraph);
            font-size: 1.66em;
            margin-block: .8em;
        }
        h4 {
            font-family: var(--paragraph-medium);
            font-size: 1em;
        }
        p {
            margin-block-end: 1.3em;
            line-height: 1.3;
        }
        > div {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 1.3em;
            img {
                flex: 0;
            }
            > div {
                flex: 1;
                min-inline-size: 18ch;
            }
        }
        small {
            font-size: .66em;
        }
        
        &:nth-child(odd) {
            img {
                order: 2;
            }
        }
    }
}

/*Contact Form 7*/
#foot-form {

    form.wpcf7-form {

        p {
            font-size:14px;

            label {
                font-size:14px;
            }

            span {

                input[type="text"],
                input[type="email"],
                input[type="tel"],
                textarea,
                select {
                    width: 30%;
                    margin:0 auto;
                    margin-top:10px;
                    border: none;
                    border-radius: 0.5em;
                    background-color: var(--white);
                    color: var(--black);
                    font-size: 14px;
                    padding: 1em 1em;
                    box-sizing: border-box;
                    display: block;
                    min-width: 20ch;
                }
                textarea {
                    min-height: 22ch;
                }


            }

            input.wpcf7-submit {
                cursor: pointer;
                display: inline-block;
                font-family: var(--paragraph-medium);
                font-size: 16px;
                border: none;
                border-radius: 2lh;
                padding: 0.625em 1em;
                background-color: var(--Ochre);
                color: var(--black);
                transition: background-color 0.3s, color 0.3s;
            }

            span.wpcf7-spinner {
                display:none;
            }

            span.wpcf7-not-valid-tip {
                color: var(--Ochre);
                font-weight: 900;
            }
        }
    }

    &.getinvolved {
        form.wpcf7-form {
            width: 66%;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;

            p {
                width: 50%;
                text-align: left;
                margin-bottom:20px;
                font-size:14px;

                label {
                    padding-left:5%;
                    font-size:14px;
                }

                span.wpcf7-form-control-wrap{
                    input[type="text"], 
                    input[type="email"], 
                    input[type="tel"], 
                    textarea, 
                    select {
                        width:90%;
                        font-size: 14px;
                        padding: 1em 1em;
                    }

                    .wpcf7-not-valid-tip {
                        margin-left:5%;
                    }
                }

                &:nth-child(6),
                &:nth-child(7),
                &:nth-child(8) {
                    width: 100%;

                    label {
                        padding-left:2.5%;
                    }

                    span.wpcf7-form-control-wrap{
                        textarea, 
                        select {
                            width:95%;
                        }
                    }
                }

                &:nth-child(8) {
                    text-align: center;
                }
            }
        }

        @media screen and (max-width: 45em) {
            form.wpcf7-form {
                width: 95%;
            }
        }
    }

    &.voices {
        form.wpcf7-form {
            width: 66%;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;

            p {
                width: 50%;
                text-align: left;
                margin-bottom:20px;
                font-size:14px;

                label {
                    padding-left:5%;
                    font-size:14px;
                }

                span.wpcf7-form-control-wrap{
                    input[type="text"], 
                    input[type="email"], 
                    input[type="tel"], 
                    textarea, 
                    select {
                        width:90%;
                        font-size: 14px;
                        padding: 1em 1em;
                    }

                    .wpcf7-not-valid-tip {
                        margin-left:5%;
                    }
                }

                &:nth-child(6),
                &:nth-child(7) {
                    width: 100%;

                    label {
                        padding-left:2.5%;
                    }

                    span.wpcf7-form-control-wrap{
                        textarea, 
                        select {
                            width:95%;
                        }
                    }
                }

                &:nth-child(7) {
                    text-align: center;
                }
            }
        }

        @media screen and (max-width: 45em) {
            form.wpcf7-form {
                width: 95%;
            }
        }
    }
}