@import '../Headers/header-components/MainBar/mainbar_01.css';
@import '../Headers/header-components/HeaderContent/header-content_01.css';

@import "../Moduli/Fasce/sticky-box-stripe.css";

@import '../Moduli/SliderScorrimento/news-stripe_2.css';
@import "../Moduli/SliderScorrimento/carousel-big.css";

/* intro Stripe
-----------------------------------------------------*/
    #arena .two-col-grid {
        grid-template-columns: 43.13vw 1fr; /* 828 */
        align-items: flex-start;
    }
    #arena .two-col-grid .col-2 {
        padding-top: 22.4vw; /* 430 */
    }
    #arena h2 {
        padding-right: 90px;
    }
    #arena img {
        height: 45.83vw; /* 880 */
    }
    #arena .red-line {
        position: absolute;

        left: 99.9%;
        top: 4.17vw; /* 80 */
        z-index: -1;

        width: 10.42vw; /* 200 */
        height: 0.26vw; /* 5 */

        background: var(--color_1);

        transform-origin: left center;
        transform: rotate(31deg);
    }
    #arena .red-line::after {
        content: "";

        position: absolute;

        width: 0.26vw; /* 5 */
        height: 10.42vw; /* 200 */

        background: var(--color_1);

        right: -0.1vw; /* 2 */
        top: 0.05vw; /* 1 */

        transform-origin: top center;
        transform: rotate(-31deg);
    }

/* Configurations Stripe
-----------------------------------------------------*/
    #configurations h2 {
        width: 60%;
    }
    #configurations .stripe-description-inner {
        width: 70%;
    }
   
    #configurations .swiper-slide {
        width: 35.68vw; /* 685 */
        min-width: 456px;
        margin-right: 1.25vw; /* 24 */
    }
    #configurations .swiper-slide:first-child,
    .quotes-slider .swiper-slide:first-child {
        margin-left: 13.75vw;
    }
    #configurations .swiper-slide:last-child,
    .quotes-slider .swiper-slide:last-child  {
        margin-right: 3.125vw;
    }
    #configurations .swiper-slide .col-image {
        height: 33.33vw; /* 640 */
        min-height: 426px;
    }
    #configurations .slider-buttons {
        margin-bottom: -10px;
    }
    #configurations .col-image {
        z-index: 1;
    }
    #configurations .col-text {
        padding: 2.34vw 1.56vw; /* 45 30 */
        z-index: 2;
    }
    #configurations h3 {
        line-height: 1;
    }
    #configurations .hightlight-text {
        display: inline-block;
        padding: 0.78vw 0.78vw 0.68vw 0.78vw; /* 15px 15px 13px 15px */
        line-height: 1;
    }

/* Services Stripe
-----------------------------------------------------*/
    #services .two-col-grid {
        grid-gap: 1.25vw; /* 24 */
    }
    #services .col-image {
        height: 37.5vw; /* 720 */
        min-height: 440px;
    }
    #services .col-text {
        padding: 3.39vw 2.34vw; /* 65 45 */
        z-index: 2;
    }

/* Organize Event Stripe
-----------------------------------------------------*/
    #organize-event .bg-img:before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #000;
        opacity: 0.3;
        z-index: -1;
    }


/* Stripe Visita
---------------------------------------------*/
    #your-visit {
        position: relative;
        z-index: 3;
    }
    #your-visit .map {
        z-index: -1;
    }
    #your-visit .map-content {
        z-index: 2;
    }

    #your-visit .city {
        padding-top: 12em;
        max-width: 29%;
    }

    /* Location Box
    -----------------------------------*/
        #your-visit .address-box {
            width: 38.8vw; /* 745 */
            min-width: 370px;
            padding-top: 5.73vw; /* 110 */
        }
        #your-visit .address-box-container {
            height: 25.05vw; /* 480 */
            min-height: 300px;
            padding: 2.08vw; /* 40 */
        }
        #your-visit .address-box .bg-col {
            height: 100%;
            width: 100%;
            z-index: -1;
        }
        #your-visit .address-box .address-box-container-inner {
            position: relative;
            z-index: 2;
        }
        #your-visit .contact-info,
        .contact-info  a {
            font-family: var(--rg-font);
            text-decoration: unset;
        }
        #your-visit .contact-info {
            padding-top: 0.68vw; /* 13 */
        }
        #your-visit .button-container {
            gap: 8px;
        }

    /* Info Box
    -----------------------------------*/
        .info-box {
            position: absolute;
            bottom: -28%;
            right: 0;
            width: 41.93vw; /* 805 */
        }
        .info-box .swiper-slide {
            width: 22.66vw; /* 435 */
            height: 25vw; /* 480 */
            margin-right: 1.25vw;
        }
        .info-box .swiper-slide:last-child {
            margin-right: 2vw;
        }
        .info-box .swiper-slide .col-container-inner {
            padding: 6.77vw 2.6vw 2.6vw 2.6vw; /* 130 50 50 50 */
            z-index: 2;
        }
        .info-box .col-number {
            position: absolute;
            top: 1.56vw; /* 30 */
            left: 1.56vw; /* 30 */
            opacity: 0.2;
        }
        .info-box p {
            line-height: 1.45;
        }
        #your-visit .info-box .bg-col {
            height: 100%;
            width: 100%;
            z-index: 0;
        }
        .info-box .swiper-slide:nth-child(odd) .col-container {
            background: #be0e19;
            background: linear-gradient(to top right, #be0e19 10%, #e31625 100%)
        }
        .info-box .swiper-slide:nth-child(even) .col-container {
            background: #0f3250;
            background: linear-gradient(to top right, #0f3250 10%, #15446e 100%)
        }

/* Events
-----------------------------------------------------*/
    #events .bg-img:before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #0b2849;
        z-index: -1;
    }
    #events .bg-img img {
        position: relative;
        z-index: 2;
        opacity: 0.04;
        object-position: center 80%;
    }
    #events .stripe-container {
        padding-top: 23.18vw; /* 445 */
        padding-bottom: 26.04vw; /* 500 */
    }
    #events:before {
        content: "";
        position: absolute;
        top: -1px;
        left: 0;
        width: 100%;
        height: 29.38vw;
        background: #fff;
        clip-path: polygon(
            0% 0%,
            100% 0%,
            107% 65%,
            74.7% 1%,
            0 99%
        );
        z-index: 2;
    }
    #events:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 26.04vw;
        background: #f9f9f9;
        clip-path: polygon(
            0 100%,
            74.7% 3%,
            100% 57%,
            100% 100%
        );
        z-index: 2;
        pointer-events: none;
    }

    /* Event preview
    ------------------------------------------------*/
        .events-list > * {
            padding-top: 2.34vw; /* 45 */
            padding-bottom: 2.34vw; /* 45 */
        }
        .events-list > *:first-child {
            padding-top: 0;
        }
        .events-list > *:last-child {
            border-top: unset;
        }

        .event-preview {
            grid-template-columns: 6.25vw 13.54vw 22.4vw 5.99vw auto; /* 120 260 430 115 */
            display: grid;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgb(255 255 255 / 10%);
        }
        .event-date .main {
            margin-bottom: -0.26vw; /* 5 */
            margin-bottom: 0;
        }
        .event-image {
            width: 13.54vw; /* 260 */
            height: 13.54vw; /* 260 */
        }
        .event-description {
            padding: 0 0.52vw; /* 10 */
        }
        .event-category-box {
            padding: 0.94vw; /* 18 */
            border-radius: 2px; /* 2 */
            letter-spacing: 0.05em;
        }


/* Project Stripe
-----------------------------------------------------*/
    #project .two-col-grid,
    #network .two-col-grid {
        grid-template-columns: 44.38vw 1fr;
    }
    #project .stripe-content >*:last-child .four-col-grid {
        padding-bottom: 0;
    }

    /* Numbers Section 
    ------------------------------------*/
        #project .stripe-container.md-c {
            overflow: hidden;
        }
        .numbers-container .tot {
            gap: 1.25vw; /* 24 */
        }
        .numbers-container {
            justify-content: space-between;
            padding: 0 2.6vw; /* 50 */
        }
        #project h3 {
            border-bottom: 1px solid #CAD1D7;
        }
        .numbers-container {
            padding: 5.21vw 0; /* 100 */
            grid-gap: 1.25vw; /* 24 */
        }
        #project .number {
            letter-spacing: -0.1em;
        }
        #project .prefix, 
        #project .suffix {
            padding-bottom: 0.36vw; /* 7 */
        }
        .number-title * {
            letter-spacing: -0.04em;
        }


/* Network Stripe
-----------------------------------------------------*/
    .network-logo {
        max-width: 13.54vw; /* 260 */
        height: 6.09vw; /* 117 */
    }
    #network .stripe-content .d-flex {
        justify-content: space-between;
        gap: 40px;
    }


/* Quote Stripe
-----------------------------------------------------*/
    .quotes-slider .swiper-slide {
        width: 50.52vw; /* 970 */
        min-width: 550px;
        height: auto;
        margin-left: 1.25vw;
    }
    .quotes-slider .swiper-slide .col-container {
        padding: 3.33vw 2.08vw;
    }
    .quotes-slider .quote-text p {
        font-style: italic;
        letter-spacing: 0;
    }
    .quote-text p:first-child::before,
    .quote-text p:first-child::after {
        content: '"';
        color: var(--color_1-);
        font-size: 1.88vw; /* 36 */
        font-family: var(--xbd-font);
    }
    .quote-text p:first-child::before {
        line-height: 1;
        margin-right: 0.78vw; /* 15 */
    }
    .quote-text p:last-child::after {
        line-height: 0;
        margin-left: 0.31vw; /* 6 */
        vertical-align: bottom;
    }
    #quotes .stripe-container-inner {
        padding-right: 2em;
    }


/* 1920x1080
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1920px) {
    /* intro Stripe
    -----------------------------------------------------*/
        #arena .red-line {
            height: 5px; /* 5 */
        }
        #arena .red-line::after {
            width: 5px;

            right: -2px;
            top: 1px;
        }

    /* Configurations Stripe
    -----------------------------------------------------*/
        #configurations .hightlight-text {
            padding: 15px 15px 13px 15px; /* 13 15 */
        }
}

/* Big Laptops - Ok until 1441 px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1600px) {

}

/* Standard Laptops - Ok until 1281px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1440px) {
    /* Intro Stripe
    -----------------------------------------------------*/
        #arena .red-line {
            height: 4px;
        }
        #arena .red-line::after {
            width: 4px;
        }
        #arena .col-text {
            padding-right: 0;
        }

    /* Service Stripe
    -----------------------------------------------------*/    
        #services .col-container {
            padding-right: 0;
        }

    /* Event Stripe
    -----------------------------------------------------*/
        .event-preview {
            grid-template-columns: 6.25vw 13.54vw 24.4vw 6.99vw auto;
        }
        .event-category-box {
            padding: 15px 10px;
        }
}

/* Small Laptops - Ok until 1151px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1280px) {
    /* intro Stripe
    -----------------------------------------------------*/
        #arena .red-line {
            width: 6.7vw;
        }
        #arena .two-col-grid {
            grid-template-columns: 46.13vw 1fr;
            grid-gap: 5.59vw;
        }
        #arena img {
            height: 48.91vw;
        }

    /* Configuration Stripe
    -----------------------------------------------------*/
        #configurations .swiper-slide:first-child, 
        .quotes-slider .swiper-slide:first-child {
            margin-left: 7.125vw;
        }
        #configurations h2 {
            width: 57%;
        }
        #configurations .col-text {
            padding: 30px 20px;
        }

    /* Services Stripe
    -----------------------------------------------------*/
        #services .col-text {
            padding: 40px 30px;
        }

    /* La tua visita
    -----------------------------------------------------*/
        #your-visit .address-box-container {
            padding: 30px;
        }
        .info-box .swiper-slide {
            width: 300px;
            height: 353px;
        }
        .info-box .swiper-slide .col-container-inner {
            padding: 80px 30px 30px 30px;
        }
}

/* Small Laptops - Ok until 993px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1150px) {
    #arena .two-col-grid {
        grid-gap: 2.59vw;
    }
    #arena .two-col-grid .col-2 {
        padding-top: 19.4vw;
    }
    #arena .red-line {
        width: 3.7vw;
    }
    #arena .red-line::after {
        height: 8.42vw;
    }

    #configurations h2 {
        width: 70%;
    }
    #configurations .stripe-description-inner {
        width: 84%;
    }

    #services .col-text {
        padding: 30px 20px;
    }

    .info-box .swiper-slide .col-container-inner {
        padding: 80px 30px 30px 30px;
    }
    .info-box .col-number {
        top: 20px;
        left: 20px;
    }

    #project .two-col-grid, #network .two-col-grid {
        grid-template-columns: 49.38vw 1fr;
    }

    #ecosystem h2 {
        zoom: 0.8;
    }

    .quotes-slider .swiper-slide .col-container {
        padding: 40px 25px;
    }
    .quote-text p:first-child::before,
    .quote-text p:first-child::after {
        font-size: 24px;
    }
    .quote-text p:first-child::before {
        margin-right: 10px;
    }
    .quote-text p:last-child::after {
        margin-left: 10px;
    }

}

/* Mobile Start ok until 768px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 992px) {
    #arena .col-container {
        padding-right: 0;
    }
    .red-line {
        display: none;
    }
    #arena .two-col-grid .col-2 {
    padding-top: 0;
    }
    #arena h2 {
        padding-right: 0;
    }
    #arena img {
        height: 480px;
    }

    #configurations .stripe-title {
        padding-right: 2em;
    }
    #configurations h2 {
        padding-right: 0;
    }
    #configurations .swiper-slide:first-child, 
    .quotes-slider .swiper-slide:first-child {
        margin-left: 2em;
    }
    #configurations .swiper-slide:last-child,
    .quotes-slider .swiper-slide:last-child {
        margin-right: 2em;
    }


    #your-visit .city {
        padding-top: 8em;
        max-width: 35%;
    }
    .info-box {
        width: 300px;
    }
    .info-box .col-number {
        top: 24px;
        left: 18px;
    }
    .info-box .swiper-slide {
        width: 261px;
        height: 350px;
    }


    .event-preview {
        display: flex;
        flex-flow: wrap;
        max-width: 450px;
        margin: 0 auto;
    }
    .event-date {
        position: absolute;
        top: 60px;
        left: 0;
        background-color: #be0f19c9;
        padding: 12px;
        backdrop-filter: blur(3px);
    }
    .events-list > *:first-child .event-date {
        top: 0;
    }
    .event-date .main {
        font-size: 18px;
    }
    .event-date .sub {
        font-size: 10px;
    }
    .event-image {
        order: 1;
        width: 100%;
        height: 300px;
    }
    .event-description {
        order: 2;
        padding: 40px 0px;
    }
    .event-category {
        order: 3;
        width: 100%;
    }
    .event-category-button {
        order: 4;
        width: 100%;
        margin-top: 15px;
    }
    .event-image img {
        object-position: bottom;
    }
    .event-category-button > * {
        width: 100%;
    }
    .event-preview {
        padding-bottom: 60px;
    }
    .events-list > * {
        padding-top: 60px;
    }


    #project .two-col-grid,
    #network .two-col-grid {
        grid-gap: 40px;
        grid-template-columns: 55.38vw 1fr;
    }
    #project .stripe-container.smd-c {
        padding-top: 40px;
    }
    .numbers-container {
        gap: 60px;
    }
    #project .numbers-container .col {
        justify-content: flex-start;
    }

    .sticky-two-col .intro-title, 
    .sticky-two-col .sticky-card {
        top: unset;
    }
    .sticky-two-col .col-1 {
        width: 100%;
    }
    .sticky-two-col .col-2 {
        width: 100%;
        padding-top: 40px;
    }
    .sticky-two-col .pattern-img:after {
        background: #ffffff;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255 255 255 / 92%) 67%, rgba(255, 255, 255, 1) 100%);
    }

    #ecosystem .col-1, 
    #ecosystem .col-1 .apply-pad-r {
        padding-right: 0;
    }
    #ecosystem .col-1 .apply-pad-r {
        max-width: 600px;
    }
    #ecosystem h2 {
        zoom: 0;
    }

    .network-logo {
        min-width: 170px;
        height: 76px;
    }

}

/* Mobile Landscape
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
    /* intro Stripe
    -----------------------------------------------------*/
        #arena .two-col-grid {
            grid-template-columns: 1fr;
        }
        #arena img {
            height: 94.87vw;
            max-height: 475px;
        }

    /* Configurations Stripe
    -----------------------------------------------------*/
        #configurations .stripe-title {
            padding-right: 1.5em;
            padding-bottom: 0;
        }
        #configurations .stripe-title > .d-flex-nw {
            flex-flow: wrap;
        }
        #configurations .slider-buttons {
            margin-bottom: 0;
            margin-top: 0;
            margin-left: auto;
        }
        #configurations .stripe-description-inner {
            width: 100%;
        }
        #configurations h2 {
            width: 100%;
        }
        #configurations .stripe-description {
            padding-bottom: 16px;
        }
        #configurations .swiper-slide:first-child, 
        .quotes-slider .swiper-slide:first-child {
            margin-left: 1.5em;
        }
        #configurations .swiper-slide:last-child,
        .quotes-slider .swiper-slide:last-child {
            margin-right: 1.5em;
        }
        #configurations .swiper-slide {
            min-width: 315px;
            margin-right: 12px;
        }
        #configurations .swiper-slide .col-image {
            min-height: 340px;
        }
        #configurations .col-text {
            padding: 24px 16px;
        }
        #configurations .hightlight-text {
            padding: 12px 12px 11px 12px;
        }

    /* Services Stripe
    -----------------------------------------------------*/
        #services .c-txt {
            text-align: left;
        }
        #services .stripe-content p {
            font-size: 14px;
        }
        #services .col-text {
            padding: 24px 16px;
        }
        #services .two-col-grid {
            grid-gap: 24px;
        }

    /* Organize Event Stripe
    -----------------------------------------------------*/
        #organize-event .two-col-grid {
            gap: 0;
        }

    /* Stripe Visita
    -----------------------------------------------------*/
        #your-visit {
            margin-bottom: -64px;
            background-color: transparent;
        }
        #your-visit .city {
            max-width: unset;
            padding-top: 48px;
        }
        #your-visit .map-content .stripe-container {
            background-color: #FFFFFF;
        }

        /* Address Box */
            #your-visit .address-box {
                min-width: unset;
                width: 100%;
            }
            #your-visit .address-box-container {
                padding: 24px;
                min-height: 340px;
            }
            #your-visit .contact-info {
                padding-top: 10px;
            }

        /* Map */
            .mobile-map {
                overflow: hidden;
            }
            .mobile-map img {
                height: 108.97vw;
                transform: scale(1.8) translate(-12.5%);
                pointer-events: none;
            }

        /* Info Box */
            .info-box {
                position: relative;
                width: 100%;
            }
            .info-box .swiper-wrapper > *:first-child {
                margin-left: 1.5em;
            }
            .info-box .swiper-wrapper .swiper-slide {
                margin-right: 12px;
                width: 285px;
            }
            .info-box .col-number {
                font-size: 35px;
            }
            .info-box:after {
                content: '';
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 52%);
                z-index: -1;
            }

    /* Events
    -----------------------------------------------------*/
        #incoming-events .stripe-title {
            text-align: left;
        }
        #incoming-events h2,
        #ecosystem h2 {
            zoom: 0.8;
        }
        div#incoming-events {
            padding-left: 0;
            padding-right: 0;
        }
        #incoming-events .stripe-title {
            max-width: 450px;
            margin: 0 auto;
            padding-left: 0;
            padding-right: 0;
            text-align: left;   
        }
        
        .events-list > * {
            padding-top: 32px;
        }
        .event-date {
            top: 32px;
        }
        .event-preview {
            padding-bottom: 32px;
        }
        .event-image {
            height: 51.28vw;
            max-height: 255px;
        }
        .event-date {
            padding: 8px;
        }
        .event-date .main {
            font-size: 16px;
        }
        .event-date .sub {
            font-size: 9px;
        }
        .event-description {
            padding: 24px 0;
        }


    /* Project Stripe
    -----------------------------------------------------*/
        #project .two-col-grid, 
        #network .two-col-grid {
            grid-template-columns: 1fr;
            grid-gap: 24px;
            padding-bottom: 0;
        }
        #project .number {
            font-size: 56px;
        }
        .numbers-container {
            gap: 46px;
        }
        .numbers-container .tot {
            gap: 12px;
        }
        .numbers-container {
            padding: 40px 0 60px 0;
        }
        .numbers-stripe .number-title > * {
            text-align: left;
        }

    /* Ecosystem Stripe
    -----------------------------------------------------*/
        #ecosystem .pattern-img {
            display: none;
        }

    /* Network Stripe
    -----------------------------------------------------*/
        #network .stripe-content .d-flex {
            justify-content: space-around;
        }

    /* Quote Stripe
    -----------------------------------------------------*/
        #quotes .stripe-container-inner {
            flex-flow: wrap;
            padding-right: 1.5em;
        }
        #quotes .stripe-container-inner h2 {
            width: 100%;
        }
        #quotes .slider-buttons {
            margin-left: auto;
            margin-top: 20px;
        }
        #quotes .swiper-wrapper {
            padding-top: 0;
        }
        .quotes-slider .swiper-slide {
            min-width: 315px;
            margin-left: 12px;
        }
        .quote-text p:first-child::before, 
        .quote-text p:first-child::after {
            font-size: 20px;
        }
}

/* Mobile port
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 389px) {
    #incoming-events h2 {
        zoom: 0.9;;
    }
}