body {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
    margin: auto;
}


.container {
    position: relative;
    width: 650px;
    height: 650px;
 }

.profilo, .tre-quarti {
    position: absolute;
}

#profilo {
    background-image: url('profilo/overlay.png');
}

#curves-profilo {
    background-image: url('profilo/curves.png');
    opacity: 0.1;
}

#curves-tre-quarti {
    background-image: url('tre-quarti/curves.png');
    opacity: 0.1;
}

#tre-quarti {
    background-image: url('tre-quarti/overlay.png');
}

.overlay {
    position: absolute;
    width: 650px;
    height: 650px;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 14;
}

.curves {
    position: absolute;
    width: 650px;
    height: 650px;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 99999;
}

/* .totale-sfondo {
    position: relative;
    width: 650px;
    height: 650px;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    background-image: url('profilo/totale.jpg');
    background-repeat: no-repeat;
    background-size: cover;
} */

#cuciture {
    width: 100%;
    height: 100%;
    mask-image: url('profilo/cuciture.png'); /* percorso della tua immagine PNG */
    mask-size: cover;
    -webkit-mask-image: url('profilo/cuciture.png'); /* supporto per WebKit browsers */
    -webkit-mask-size: cover;
    z-index: 15;
}

#gambale {
    width: 100%;
    height: 100%;
    mask-image: url('profilo/gambale.png'); /* percorso della tua immagine PNG */
    mask-size: cover;
    -webkit-mask-image: url('profilo/gambale.png'); /* supporto per WebKit browsers */
    -webkit-mask-size: cover;
    z-index: 4;
}

#fascia-superiore {
    width: 100%;
    height: 100%;
    mask-image: url('profilo/fascia-superiore.png'); /* percorso della tua immagine PNG */
    mask-size: cover;
    -webkit-mask-image: url('profilo/fascia-superiore.png'); /* supporto per WebKit browsers */
    -webkit-mask-size: cover;
    z-index: 4;
}

#fascia-inferiore {
    width: 100%;
    height: 100%;
    mask-image: url('profilo/fascia-inferiore.png'); /* percorso della tua immagine PNG */
    mask-size: cover;
    -webkit-mask-image: url('profilo/fascia-inferiore.png'); /* supporto per WebKit browsers */
    -webkit-mask-size: cover;
    z-index: 4;
}

#punta {
    width: 100%;
    height: 100%;
    mask-image: url('profilo/punta.png'); /* percorso della tua immagine PNG */
    mask-size: cover;
    -webkit-mask-image: url('profilo/punta.png'); /* supporto per WebKit browsers */
    -webkit-mask-size: cover;
    z-index: 4;
}

#tallone {
    width: 100%;
    height: 100%;
    mask-image: url('profilo/tallone.png'); /* percorso della tua immagine PNG */
    mask-size: cover;
    -webkit-mask-image: url('profilo/tallone.png'); /* supporto per WebKit browsers */
    -webkit-mask-size: cover;
    z-index: 4;
}

#lacci {
    width: 100%;
    height: 100%;
    mask-image: url('profilo/lacci.png'); /* percorso della tua immagine PNG */
    mask-size: cover;
    -webkit-mask-image: url('profilo/lacci.png'); /* supporto per WebKit browsers */
    -webkit-mask-size: cover;
    z-index: 10;
}

#passanti {
    width: 100%;
    height: 100%;
    mask-image: url('profilo/passanti.png'); /* percorso della tua immagine PNG */
    mask-size: cover;
    -webkit-mask-image: url('profilo/passanti.png'); /* supporto per WebKit browsers */
    -webkit-mask-size: cover;
    z-index: 9;
}



/* INIZIO TRE QUARTI */


#cuciture-tre-quarti {
    width: 100%;
    height: 100%;
    mask-image: url('tre-quarti/cuciture.png'); /* percorso della tua immagine PNG */
    mask-size: cover;
    -webkit-mask-image: url('tre-quarti/cuciture.png'); /* supporto per WebKit browsers */
    -webkit-mask-size: cover;
    z-index: 15;
}

#gambale-tre-quarti {
    width: 100%;
    height: 100%;
    mask-image: url('tre-quarti/gambale.png'); /* percorso della tua immagine PNG */
    mask-size: cover;
    -webkit-mask-image: url('tre-quarti/gambale.png'); /* supporto per WebKit browsers */
    -webkit-mask-size: cover;
    z-index: 4;
}

#fascia-superiore-tre-quarti {
    width: 100%;
    height: 100%;
    mask-image: url('tre-quarti/fascia-superiore.png'); /* percorso della tua immagine PNG */
    mask-size: cover;
    -webkit-mask-image: url('tre-quarti/fascia-superiore.png'); /* supporto per WebKit browsers */
    -webkit-mask-size: cover;
    z-index: 4;
}

#fascia-inferiore-tre-quarti {
    width: 100%;
    height: 100%;
    mask-image: url('tre-quarti/fascia-inferiore.png'); /* percorso della tua immagine PNG */
    mask-size: cover;
    -webkit-mask-image: url('tre-quarti/fascia-inferiore.png'); /* supporto per WebKit browsers */
    -webkit-mask-size: cover;
    z-index: 4;
}

#punta-tre-quarti {
    width: 100%;
    height: 100%;
    mask-image: url('tre-quarti/punta.png'); /* percorso della tua immagine PNG */
    mask-size: cover;
    -webkit-mask-image: url('tre-quarti/punta.png'); /* supporto per WebKit browsers */
    -webkit-mask-size: cover;
    z-index: 4;
}

#tallone-tre-quarti {
    width: 100%;
    height: 100%;
    mask-image: url('tre-quarti/tallone.png'); /* percorso della tua immagine PNG */
    mask-size: cover;
    -webkit-mask-image: url('tre-quarti/tallone.png'); /* supporto per WebKit browsers */
    -webkit-mask-size: cover;
    z-index: 4;
}

#lacci-tre-quarti {
    width: 100%;
    height: 100%;
    mask-image: url('tre-quarti/lacci.png'); /* percorso della tua immagine PNG */
    mask-size: cover;
    -webkit-mask-image: url('tre-quarti/lacci.png'); /* supporto per WebKit browsers */
    -webkit-mask-size: cover;
    z-index: 10;
}

#passanti-tre-quarti {
    width: 100%;
    height: 100%;
    mask-image: url('tre-quarti/passanti.png'); /* percorso della tua immagine PNG */
    mask-size: cover;
    -webkit-mask-image: url('tre-quarti/passanti.png'); /* supporto per WebKit browsers */
    -webkit-mask-size: cover;
    z-index: 9;
}




/************************************

OTTIMIZZAZIONE MOBILE


************************************/

@media (max-width: 767px) {
    .wrapper {
        flex-direction: column;
        justify-content: center;

    }


}