@import url("/wp-content/plugins/mgb-masonry-image-gallery/lib/css/magnific-popup.css?ver=2.2.3");

:root {
    --background-dark: #222;
    --text-color: #d5d5d3;
}
body {
    margin: 0;
    padding: 0;
    background-color: var(--background-dark) !important;
    color: var(--text-color) !important;

    & > div.wp-site-blocks {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }
}

main,
main > div,
#main-container {
    margin: 0 !important;
    padding: 0 !important;
    /*
	 * ATTENZIONE, RIATTIVARE POSITION ABSOLUTE!!!!
	 * e riattivare header ora messo con display:none
	 *
	 * position: absolute;
	 *
	 * */
    position: relative;
    top: 0;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
}

main {
    margin-top: 152px !important;
}

main p {
    color: var(--BY8, #d5d5d3);

    /* Heading & Body/Body - large */
    font-family: "Red Hat Display";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 177.778% */
    letter-spacing: 2px;
}

main {
    position: absolute;
}

header {
    display: block;
}

.header-div-home {
    width: 100%;
    max-width: 100vw;
}

header.case-study-header {
    width: 100% !important;
}

#main-content,
#correlati-container,
#scopri-dos-content {
    max-width: 1440px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.header-case {
    position: relative;
    width: 100;
}

.header-case > img {
    width: 100%;
    aspect-ratio: 9 / 3;
    object-fit: cover;
    /*filter: brightness(0.2);*/
}

.header-case > .breadcrumb {
    /*position: absolute;
    top: 8%;
    left: 3%;*/
    font-family: Red Hat Display;
    font-weight: 600;
    font-style: SemiBold;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 28px;
    letter-spacing: 1.5px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    max-width: 1440px;
    /*padding-left: 3rem;*/
    margin: 0 auto;
    & .grey-text {
        color: #8a8a85 !important;
    }
}

.header-case > .breadcrumb > .breadcrumb-inner-div {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 0;
    padding-left: clamp(1rem, 4vw, 7rem) !important;
    padding-right: clamp(1rem, 4vw, 7rem) !important;
    & a {
        text-decoration: none;
    }
    & a:hover {
        text-decoration: underline;
    }
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

#content > div {
    padding: 0 112px;
}

.page-title {
    color: var(--BY8, #d5d5d3);
    font-family: "Red Hat Display";
    font-size: clamp(40px, 5vw, 58px);
    font-weight: 600;
    line-height: 32px;
    letter-spacing: 0.5px;
    margin-top: 60px;
    margin-bottom: 32px;
    font-style: SemiBold;
    line-height: 100%;
    letter-spacing: 0.7px;
}

.page-subtitle {
    color: var(--BY7, #c3c3c3);
    /* body/large */
    font-family: "DM Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px; /* 160% */
    letter-spacing: 0.5px;
    align-items: baseline;
}

.hline {
    padding-top: var(--wp--preset--spacing--0);
    padding-right: 0;
    padding-left: 0;
    flex-basis: 96px;
    hr {
        letter-spacing: 0;
        margin-top: 30px;
        margin-bottom: 30px;
        background-color: #e0e0e0;
        color: #e0e0e0;
    }
}

.dos-area {
    color: #fff;
    font-family: "Red Hat Display";
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 4px;
    text-transform: uppercase;
    min-width: max-content;
    display: flex;
    min-width: max-content;
    flex-direction: row;
    white-space: nowrap;
	margin-bottom:0.8rem;
    .hline {
        min-width: 5rem;
        min-width: 5rem;
        display: flex;
        align-items: center;
        height: 1rem;
        margin: 0 0.5rem;
        hr {
            width: 100%;
        }
    }
}

.intro {
    padding-top: 120px !important;
    gap: 2rem;
}

.intro.flex-row > div {
    flex-grow: 1;
    flex-shrink: 0;
    max-width: 100%;
    width: 50%;
}

.intro.flex-row div .text {
    overflow-wrap: break-word;
}

.small-blocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    margin-bottom: 32px;
    gap: 2rem;
    max-width: 90%;
}

.attivita-block {
    grid-column-start: 1;
    grid-column-end: 3;
    .small-text {
        column-count: 2;
        column-gap: 2rem;
        display: flex;
        flex-flow: row wrap-reverse;
        div {
            min-width: max-content;
            /*width: 41%;*/
        }
    }
}

.small-title {
    color: var(--BY8, #d5d5d3);
    text-transform: uppercase;
    font-family: Red Hat Display;
    font-weight: 500;
    font-style: Medium;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 24px;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.small-text {
    color: var(--B10, #f7f7f7);

    /* Body - large */
    font-family: "Red Hat Display";
    font-size: clamp(14px, 1.3vw, 18px);
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 177.778% */
    letter-spacing: 2px;
}

.descrizione {
    color: var(--BY7, #c3c3c3);

    /* Body - large */
    font-family: "Red Hat Display";
    font-size: 18px;
    font-size: clamp(10px, 2vw, 18px);
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 177.778% */
    letter-spacing: 2px;
    margin-bottom: 3rem;
    display: inline-block !important;
}

.attivita {
    color: var(--BY8, #d5d5d3);
    text-align: center;
    font-family: "Red Hat Display";
    font-size: 16px;
    font-size: clamp(14px, 1.3vw, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 1px;
    border-radius: 100px;
    border: 1px solid var(--BY8, #d5d5d3);
    padding: 7px 13px;
    margin-bottom: 12px;
}

button.download {
    border: none;
    display: flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: var(--B10, #f7f7f7);
    /* Label */
    font-family: "Red Hat Display";
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(247, 247, 247, 0.2);
    cursor: pointer;
}

button.download::after {
    content: url("/wp-content/uploads/2026/01/FileDownloadOutlined.svg");
}

a:has(button) {
    text-decoration: none !important;
}

#content > #media-1 {
    padding: 0;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    margin-top: 3rem;
    iframe {
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
    }
}
.sinistra,
.destra {
    display: flex;
    flex-flow: row;
    margin-top: 7rem;
    gap: 10%;
    align-items: center;
}

#impatti-e-valori {
    margin-bottom: 7.5rem;
}

.impatti {
    display: flex;
    flex-flow: row;
    margin-top: 7rem;
    gap: 10%;
    align-items: flex-start;
}

.impatti-rev {
    display: flex;
    flex-flow: row-reverse;
    margin-top: 7rem;
    gap: 10%;
    align-items: flex-start;
}

.impatti-rev .impatto-title > div {
    position: relative;
    left: 30%;
}

.destra {
    flex-flow: row-reverse;
}

#content > .sinistra-block {
    padding-right: 7rem;
}

#content > .sinistra-block:has(.sinistra):has(.sinistra-right) {
    padding-right: 0;
}

.impatti > div {
    flex-basis: 45%;
}

.impatti-rev > div {
    flex-basis: 45%;
}

.sinistra-left {
    flex-basis: 100%;
}

.sinistra-right {
    flex-basis: 45%;
}

.sinistra-left:has(+ .sinistra-right) {
    flex-basis: 45%;
}

.sinistra-left:not(:has(.sinistra-testo > p)) {
    /*display: none;*/
}

.sinistra:not(:has(.sinistra-testo > p)) {
    justify-content: end;
    .sinistra-images {
        align-items: start;
        gap: 3rem;
    }
    .sinistra-right {
        .sinistra-image:nth-child(2) img {
            width: clamp(230px, 40vw, 700px);
            aspect-ratio: 1 / 1;
            object-fit: cover;
            padding-top: 3rem;
        }
        .sinistra-image:first-child img {
            width: clamp(205px, 35vw, 600px);
            aspect-ratio: 1 / 1;
            object-fit: cover;
            /*padding-bottom: 2rem;*/
        }
    }
}

.sinistra-title,
.destra-title,
.impatto-title {
    color: var(--B10, #f7f7f7);
    font-family: "Red Hat Display";
    font-size: 52px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.7px;
    margin-bottom: 3rem;
}

.correlati-title > div > h2,
.correlati-title > div > div,
.sinistra-title > div > h2,
.sinistra-title > div > div,
.destra-title > div > h2,
.destra-title > div > div,
.impatto-title > div > h2,
.impatto-title > div > div {
    margin-left: 0 !important;
    gap: clamp(30px, 5vw, 50px);
}

.sinistra-testo,
.destra-testo,
.sinistra-testo li,
.destra-testo li {
    color: var(--BY8, #d5d5d3);

    /* Body - large */
    font-family: "Red Hat Display";
    font-size: clamp(16px, 2vw, 18px);
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 177.778% */
    letter-spacing: 2px;
}

.sinistra-images {
    display: flex;
    flex-flow: row nowrap;
    gap: 32px;
    justify-content: right;
    align-items: center;
}

.sinistra-image:first-child img {
    width: clamp(160px, 18vw, 276px);
    /*height: 349px;*/
    aspect-ratio: 276 / 369;
    object-fit: cover;
}

.sinistra-image:last-child img {
    width: clamp(230px, 25vw, 389px);
    /*height: 420px;*/
    aspect-ratio: 389 / 449;
    object-fit: cover;
}

.sinistra-image:only-child img {
    aspect-ratio: 1.378 / 1;
    object-fit: cover;
    width: 116%;
    max-width: 626px;
}

#content > .destra-block {
    padding-left: 7rem;
}

#content > .destra-block:has(.destra):has(.destra-right) {
    padding-left: 0;
}

#content > .destra-block:has(.destra):not(:has(.destra-right)) ol {
    display: flex;
    padding-left: 0;
    /*justify-content: space-between;*/
    gap: 2rem;
    li {
        flex: 0 0 calc(100% / sibling-count() - 2%);
    }
}

#content > .sinistra-block:has(.sinistra):not(:has(.sinistra-right)) ol {
    display: flex;
    /*justify-content: space-between;*/
    gap: 2rem;
    li {
        flex: 0 0 calc(100% / sibling-count() - 2%);
    }
}

.destra {
    justify-content: start;
}

.destra-left {
    flex-basis: 100%;
}

.destra-left:has(+ .destra-right) {
    flex-basis: 45%;
}

.destra-right {
    flex-basis: 45%;
}

.destra li,
.sinistra li {
    list-style-position: inside;
}

.destra li::marker,
.sinistra li::marker {
    /*display:block;
    color: #9dd385;
    font-family: "Red Hat Display";
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.7px;*/
    content: "";
}

.destra li::before,
.sinistra li::before {
    display: block;
    color: #9dd385;
    font-family: "Red Hat Display";
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.7px;
    content: "0" counter(list-item) "\A";
    margin-bottom: 5px;
}

.destra-images {
    display: flex;
    flex-flow: row nowrap;
    gap: 3rem;
    justify-content: left;
    align-items: center;
}

.destra-image:first-child img {
    width: clamp(160px, 20vw, 300px);
    /*height: 420px;*/
    aspect-ratio: 11 / 16;
    object-fit: cover;
}

.destra-image:last-child img {
    width: clamp(230px, 18vw, 258px);
    /*height: 349px;*/
    aspect-ratio: 11.8 / 16;
    object-fit: cover;
}

.destra-left {
    display: none;
}

.destra-image:first-child img {
    width: clamp(400px, 40vw, 700px);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    /*padding-bottom: 2rem;*/
}

.destra-image:last-child img {
    width: clamp(300px, 35vw, 600px);
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.destra-left:has(.destra-testo > p),
.destra-left:has(.destra-testo > ol) {
    display: block;
}

.destra:has(.destra-testo > ol),
.destra:has(.destra-testo > p) {
    .destra-images {
        align-items: center;
        gap: 2rem;
    }
    .destra-right {
        .destra-image:first-child img {
            width: clamp(160px, 20vw, 278px);
            /*height: 420px;*/
            aspect-ratio: 278 / 369;
            object-fit: cover;
        }

        .destra-image:nth-child(2) img {
            width: clamp(230px, 28vw, 388px);
            /*height: 349px;*/
            aspect-ratio: 388 / 449;
            object-fit: cover;
        }
        .destra-image:only-child img {
            aspect-ratio: 1.378 / 1;
            object-fit: cover;
            width: 100%;
            max-width: 626px;
        }
    }
}

.impatti > div {
    margin-bottom: 4.25rem;
}

#valori {
    display: grid;
    grid-template-rows: repeat(auto, 1fr);
    grid-template-columns: repeat(4, 1fr);
    column-gap: 2rem;
    row-gap: 3rem;
    margin-top: 4.25rem;
}

.valori-cifra-ext {
    color: #9dd385;
    text-align: right;
    font-family: "Red Hat Display";
    font-size: clamp(50px, 10vw, 88px);
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0.7px;
    display: flex;
    justify-content: end;
}

.valori-cifra {
    color: #9dd385;
    text-align: right;
    font-family: "Red Hat Display";
    font-size: clamp(50px, 10vw, 88px);
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0.7px;
}

.valori-testo {
    color: var(--BY7, #c3c3c3);
    text-align: right;
    font-family: "Red Hat Display";
    font-size: clamp(14px, 2vw, 20px);
    font-style: normal;
    font-weight: 900;
    line-height: 32px; /* 160% */
    letter-spacing: 2px;
}

.testo-valori {
    padding-top: 2rem;
    font-family: Red Hat Display;
    font-weight: 700;
    font-style: Bold;
    font-size: 18px;
    leading-trim: NONE;
    line-height: 32px;
    letter-spacing: 2px;
}

#cs-block {
    margin-top: 2.5rem;
    /*margin-bottom: 7.5rem;*/
    & .file-download-button,
    .cs-download-text {
        /*padding-left: 2.5rem;*/
        padding-bottom: 1rem;
    }
}

.right > .file-download-button {
	display:none;
}

.file-download-button a button {
    background-color: #4c4c4c;
}
.file-download-button a button:hover {
    background-color: #515150 !important;
}

.cs-text {
    margin-bottom: 3rem;
}

.wp-block-migb-masonry-gallery .single-gallery-image figure {
    cursor: pointer;
    margin: 0 !important;
    overflow: hidden;
    padding: 0 !important;
    position: relative;
}

.wp-block-migb-masonry-gallery .single-gallery-image {
    box-sizing: border-box;
    display: block;
    overflow: hidden;
}

.otgs-development-site-front-end {
    display: none;
}

#related-block-ext {
    margin-top: 7.5rem !important;
}

#related-block-ext:not(:has(.related-content a)) {
    display: none;
}

#scopri-dos-container {
    background-color: #e4e4e4;
}

. #restiamo-contatto-container {
    background-color: #f1f1f1;
}

#scopri-dos-content,
#restiamo-contatto-content {
    justify-content: space-between;
    opacity: 1;
    /*padding-top: 120px;
    padding-bottom: 120px;*/
    margin: 0 auto;
    & col-1 {
        /*width: 592;
        height: 338;
        angle: 0 deg;
        opacity: 1;
        gap: 32px;*/
    }
    & p {
        font-family: Red Hat Display !important;
        font-weight: 400 !important;
        font-size: 18px !important;
        line-height: 32px !important;
        letter-spacing: 2px !important;
    }

    & > div {
        padding-left: clamp(2rem, 8vw, 7rem);
        padding-right: clamp(2rem, 8vw, 7rem);
    }
}

.restiamo-contatto-ext {
    background-size: calc(500px - 5%) !important;
    background-repeat: no-repeat;
    background-position-x: 20%;
    background-position-y: bottom;
}

.scopri-dos-title h2 {
    font-family: Red Hat Display !important;
    font-weight: 600 !important;
    font-size: 52px !important;
    line-height: 100% !important;
    letter-spacing: 0.7px !important;
    vertical-align: middle !important;
}

.scopri-dos-title hr {
    border: 2px solid var(--Green-01, #6aa84f);
}

.scopri-dos {
    margin-left: 7.5rem;
    margin-right: 7.5rem;
}

.scopri-dos-cols {
    /*gap: 5rem !important;
    flex-flow: row nowrap !important;*/
    display: grid !important;
    grid-template-rows: repeat(3, minmax(0px, auto)) !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 0px !important;

    & .col-1 {
        grid-column: 1 / 8;
        grid-row: 1 / 2;
    }
    & .col-2 {
        grid-column: 8 / 13;
        grid-row: 1 / 2;
    }
}

.restiamo-contatto-cols {
    /*gap: 5rem !important;
    flex-flow: row nowrap !important;*/
    display: grid !important;
    grid-template-rows: repeat(3, minmax(0px, auto)) !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 0px !important;

    & .col-1 {
        grid-column: 6 / 13;
        grid-row: 1 / 2;
    }
    & .col-2 {
        grid-column: 1 / 5;
        grid-row: 1 / 2;
    }
}

.link-dos-design {
    min-width: max-content;
    & a {
        font-family: Red Hat Display;
        font-weight: 800;
        font-style: ExtraBold;
        font-size: 16px;
        leading-trim: NONE;
        line-height: 100%;
        letter-spacing: 1px;
        text-align: right;
        vertical-align: middle;
        text-transform: uppercase;
        text-decoration: none;
    }
}

#wpforms-form-2027 .wpforms-field {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.subtitle-with-line h2 {
    font-size: clamp(38px, 1.861rem + ((1vw - 3.2px) * 2.18), 52px) !important;
}

/* -------------------------   MEDIA SIZE --------------------------------- */

@media only screen and (min-width: 1025px) {
    .wp-block-migb-masonry-gallery.migb_294b384d {
        column-count: 3;
        gap: 25px;
    }
}

@media only screen and (min-width: 1025px) and (max-width: 1240px) {
    .header-case > .breadcrumb > .breadcrumb-inner-div {
        padding: 0 60px;
    }
}

@media only screen and (max-width: 1024px) {
    main {
        margin-top: 75px !important;
    }
    .header-case > .breadcrumb > .breadcrumb-inner-div {
        padding: 0 26px !important ;
    }
    .destra-block,
    .sinistra-block,
    .page-subtitle,
    .page-title {
        padding: 0 50px !important;
    }

    .sinistra,
    .destra,
    #impatti,
    #intro,
    .page-subtitle {
        flex-direction: column;
        max-width: 100%;
    }

    .intro.flex-row > div {
        width: 100%;
    }

    #valori {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        margin-right: 1rem;
    }

    #impatti-e-valore,
    #cs-block,
    #related-container,
    #intro {
        padding: 0 50px !important;
    }

    ol {
        padding-left: 0;
    }

    .scopri-dos-cols,
    .restiamo-contatto-cols {
        & .col-1 {
            grid-column: 3 / 13;
            grid-row: 1 / 3;
        }

        & .col-2 {
            grid-column: 1 / 6;
            grid-row: 2 / 3;
        }
    }

    .sinistra-title,
    .destra-title,
    .related-title {
        & .wp-block-columns {
            flex-flow: row nowrap !important;
            align-items: center !important;
            gap: 10px !important;
            & .wp-block-column:first-child {
                flex-basis: unset !important;
                max-width: 70px;
            }
            & .wp-block-column:last-child {
                flex-basis: unset !important;
                position: relative;
                left: 0 !important;
            }
        }
    }
    .destra-testo ol,
    .sinistra-testo ol {
        flex-direction: column;
    }
    .restiamo-contatto-ext {
        background-size: 32% !important;
        background-repeat: no-repeat;
        background-position-x: -1%;
        background-position-y: 48%;
    }
    .sinistra:not(:has(.sinistra-testo > p)) {
        & .sinistra-images {
            align-items: start;
            gap: 1rem;
        }
    }
}

@media only screen and (max-width: 575px) {
    main {
        margin-top: 80px !important;
    }
    .header-case > .breadcrumb {
        /*display: none;*/
        max-width: 95vw;
        padding: 0 16px !important;
        & .breadcrumb-inner-div {
            padding: 0 !important;
        }
    }
    #intro {
        padding-top: 2rem !important;
    }
    .small-blocks {
        display: grid;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        margin-bottom: 32px;
        gap: 1rem;
        max-width: 90%;
    }
    .attivita-block {
        grid-column-start: unset;
        grid-column-end: unset;
    }
    .descrizione.text {
        font-family: Red Hat Display;
        font-weight: 700;
        font-style: Bold;
        font-size: 18px;
        leading-trim: NONE;
        line-height: 32px;
        letter-spacing: 2px;
    }

    .restiamo-contatto-ext {
        background-size: 85% !important;
        background-repeat: no-repeat;
        background-position-x: -3%;
        background-position-y: 103%;
    }

    .destra:has(.destra-testo > ol),
    .destra:has(.destra-testo > p) {
        & .destra-images {
            align-items: center;
            gap: 1rem;
            flex-direction: column;
        }
    }

    .sinistra:not(:has(.sinistra-testo > p)) {
        & .sinistra-images {
            align-items: center;
            gap: 1rem;
            flex-direction: column;
        }
    }
    .sinistra-images {
        gap: 1rem;
        justify-content: right;
        align-items: center;
        flex-direction: column;
    }
    .destra-block,
    .sinistra-block,
    .page-subtitle,
    .page-title,
    #impatti-e-valore,
    #cs-block,
    #related-container,
    #intro {
        padding-right: clamp(1rem, 4vw, 7rem) !important;
        padding-left: clamp(1rem, 4vw, 7rem) !important;
    }
    .sinistra-image:first-child img,
    .sinistra-image:last-child img,
    .destra-image:first-child img,
    .destra-image:nth-child(2) img {
        width: 100% !important;
        /*height: 349px;*/
        aspect-ratio: unset !important;
        /*aspect-ratio: 388 / 449 !important;*/
        object-fit: cover !important;
    }
}