body {
    margin: 0;
}

.sfondo {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.sfondoMobile {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    display: none;
}

.container-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
    flex-direction: row-reverse;
    justify-content: space-around;
}

.container-wrapper .container {
    display: flex;
    width: 100%;
    padding: 10px;
    max-width: 55%;
}

.container-wrapper .container .image1 {
    background: url(../../welcome/img1.png) no-repeat center center;
    background-size: 200% 150%;
}

.container-wrapper .container .image2 {
    background: url(../../welcome/img2.png) no-repeat center center;
    background-size: 200% 150%;
}

.container-wrapper .container .image3 {
    background: url(../../welcome/img3.png) no-repeat center center;
    background-size: 200% 150%;
}

.container-wrapper .container .image4 {
    background: url(../../welcome/img4.png) no-repeat center center;
    background-size: 200% 150%;
}

.container-wrapper .container .image5 {
    background: url(../../welcome/img5.png) no-repeat center center;
    background-size: 200% 150%;
}

.container-wrapper .container .rectangle {
    width: 17%;
    height: 70vh;
    border: 2px solid #FFFFFF;
    background-color: #f7f7f7;
    transform: rotate(2.5deg);
}

.container-wrapper .container .rectangle.translate {
    translate: -2px 40px;
}

.container-wrapper .banner {
    background: url(../../welcome/fascia-logo.png) top no-repeat;
    width: 100%;
    height: 100%;
    max-width: 400px;
    display: flex;
    align-items: flex-end;
}

.container-wrapper .footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column-reverse;
    margin: 0 auto 100px auto;
}

.container-wrapper .footer button, .container-wrapper .footer-mobile button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    width: 15vw;
}

.container-wrapper .footer button img, .container-wrapper .footer-mobile button img {
    width: 100%;
}

.container-wrapper .footer img, .container-wrapper .footer-mobile img {
    width: 15vw;
}

.container-wrapper .footer-mobile {
    display: none;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    .sfondo {
        display: none;
    }

    .sfondoMobile {
        display: block;
    }

    .container-wrapper {
        justify-content: center;
    }

    .container-wrapper .container {
        max-width: 100%;
        margin-top: 10%;
    }

    .container-wrapper .container .rectangle {
        width: 20%;
        height: 45vh;
    }

    .container-wrapper .banner {
        display: none;
    }

    .container-wrapper .footer-mobile {
        position: absolute;
        flex-direction: row;
        bottom: 50px;
        gap: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .container-wrapper .footer-mobile button, .container-wrapper .footer-mobile img {
        width: 35%;
    }
}

@media only screen and (max-width: 1680px) {
    .container-wrapper .container .image1 {
        background: url(../../welcome/img1.png) no-repeat center center;
    }

    .container-wrapper .container .image2 {
        background: url(../../welcome/img2.png) no-repeat center center;
    }

    .container-wrapper .container .image3 {
        background: url(../../welcome/img3.png) no-repeat center center;
    }

    .container-wrapper .container .image4 {
        background: url(../../welcome/img4.png) no-repeat center center;
    }

    .container-wrapper .container .image5 {
        background: url(../../welcome/img5.png) no-repeat center center;
    }
}