.homepage__title-hiddnen{
	width: 1px;
	height: 1px;
	position: absolute;
	top: 0;
	left: 0;
}

.distortion-effect{
	height: 100vh;
	position: relative;
	overflow: hidden;
}
.distortion-effect img{
	width: auto;
	height: 100vh;
}
.distortion-effect .img-1.hideslide,
.distortion-effect .img-2,
.distortion-effect .img-3,
.distortion-effect .img-4,
.distortion-effect .img-5,
.distortion-effect .img-6,
.distortion-effect .img-7,
.distortion-effect .img-8,
.distortion-effect .img-9,
.distortion-effect .img-10{
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	opacity: 0;
}
.distortion-effect .video-1{
	width: 100%;
	/* height: 100vh; */
	height: 100%;
	pointer-events: none;
	object-fit: cover;
}
.distortion-effect .video-1.hideslide{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
.distortion-effect canvas{
	top: 50%;
	left: 50%;
	/*width: 100vw !important;
	height:38.8vw !important;*/

	/*width: 263vh !important;
	height: 100vh !important;*/

	min-height: 100% !important;
	min-width: 100% !important;
	width: auto !important;
	height: auto !important;

	position: absolute;

	transform: translate3d(-50%, -50%, 0);
}

.distortion-effect .swiper-container{
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	position: absolute;
}


.distortion-effect .swiper-container,
.distortion-effect .swiper-wrapper
.distortion-effect .swiper-slide{
	height: 100%;
}
.distortion-effect .swiper-slide{
	width: 100%;
	opacity: 0 !important;
	position: relative;
}
.distortion-effect .swiper-slide-active{
	opacity: 1 !important;
}
.distortion-effect .swiper-slide:before{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: ' ';
	display: block;
	position: absolute;
	background: linear-gradient(160deg, rgba(0,0,0,.1) 25%, rgba(0,0,0,.5) 100%);
}
.distortion-effect .swiper-slide article{
	bottom: 5.8vw;
	right: 10vw;
	width: 350px;
	color: #FFFFFF;
	position: absolute;
}
.distortion-effect .swiper-slide article p{
	padding-left: 50px;
}
.distortion-effect .swiper-slide article p>span,
.distortion-effect .swiper-slide article p>strong{
	font-family: 'Vollkorn', serif;
	font-size: 70px;
	font-weight: 400;
	line-height: 33px;
}

.distortion-effect .swiper-slide article .cta--transparent{
	width: 100%;
	
	margin-top: 15px;
}
.distortion-effect__prev{
	top: 50%;
	left: 4vw;
	z-index: 20;
	position: absolute;
	margin-top: -30px;
	width: 45px;
    height: 57px;
	cursor: pointer;
    /*background-color: #FFFFFF;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 15px;
	background-image: url("../imgs/general/arrow-back-black.png");*/
}
.distortion-effect__next{
	top: 50%;
	right: 4vw;
	z-index: 20;
	position: absolute;
	margin-top: -30px;
	width: 45px;
    height: 57px;
    cursor: pointer;
}

.distortion-effect__scroll-down{
	left: 50%;
	bottom: 5vh;
	position: absolute;
	transform: translate3d(-50%, 0, 0);
	width: 110px;
	height: 22px;
	z-index: 3;
	cursor: pointer;
	background: url('../imgs/general/scroll-down.png') center center no-repeat;
	background-size: cover;
	transition: all 250ms linear;
}
.distortion-effect__scroll-down:hover{
	opacity: 0.5;
}


.distortion-effect__controller .tassello{
	position: absolute;
	background: #FFFFFF;
	transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.distortion-effect__controller .tassello--0{
	top: -15px;
	left: -15px;
	width: 40px;
	height: 40px;
}
.distortion-effect__prev .tassello--0::after{
	content: '';
	width: 14px;
	height: 14px;
	background-image: url('../imgs/general/arrow-back-black.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 100%;
	position: absolute;
	top: 50%;
	left: 50%;

	transform: translate(-50%, -50%);
}
.distortion-effect__next .tassello--0::after{
	content: '';
	width: 14px;
	height: 14px;
	background-image: url('../imgs/general/arrow-back-black.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 100%;
	position: absolute;
	top: 50%;
	left: 50%;

	transform: translate(-50%, -50%);
}
.distortion-effect__next{
	transform: rotateY(-180deg);
}
.distortion-effect__controller .tassello--1{
	top: 10px;
	right: 0px;
	width: 10px;
	height: 10px;
}
.distortion-effect__controller .tassello--2{
	bottom: 12px;
	left: -2px;
	width: 10px;
	height: 10px;
}
.distortion-effect__controller .tassello--3{
	bottom: 0;
	right: 0;
	width: 25px;
	height: 25px;
}

.distortion-effect__controller:hover .tassello--0{
	top: -12px;
}
.distortion-effect__controller:hover .tassello--1{
	top: 18px;
	right: 9px;
}
.distortion-effect__controller:hover .tassello--2{
	bottom: 18px;
	left: 9px;
}
.distortion-effect__controller:hover .tassello--3{
	bottom: 3px;
}
.distortion__cta{
	width: 260px;
	position: absolute;
	bottom: 30px;
	left: 50%;
	text-align: center;

	transform: translateX(-50%);
	z-index: 10;
	display: none;
}
.distortion__cta::before,
.distortion__cta::after{
	display: none;
}


/*/ COMPOSITION STORIA /*/
.composition-storia{
    width: 100%;
    padding-left: 10.4vw;
    padding-right: 7.5vw;
    position: relative;
    margin-bottom: 25vw;
}
.composition-storia--desk{
    display: block;
}
.composition-storia--mob{
    display: none;
}

.composition-storia__wrapper-scheda{
    width: 33.33%;
    height: 31.3vw;
    padding: 2vw;
    position: relative;

    float: left;
	z-index: 10;
}
.composition-storia__wrapper-scheda--1 { margin-top: 3.8vw; }
.composition-storia__wrapper-scheda--3 { margin-top: 1.2vw }

.composition-storia__wrapper-scheda .title--small{
    position: relative;

    margin-left: 2vw;
    margin-bottom: 3vw;
    display: block;
    z-index: 1;
}
.composition-storia__wrapper-scheda--2 .title--small{
    margin-top: 4.6vw;
    margin-bottom: 0;
}

.composition-storia__scheda{
    width: 100%;
    height: 100%;
    position: relative;
}

.composition-storia__scheda::before{
    content: '';
    width: 30px;
    height: 36px;
    background-image: url('../imgs/homepage/storia/video.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

.composition-storia__scheda .line{
    background-color: #FFFFFF;
    
    z-index: 1;
}

/* / scheda 1 / */
.composition-storia__wrapper-scheda--1 .composition-storia__scheda .line--vert.line--left{ top: -4.1vw; left: 0; height: calc(100% + 7.1vw) }
.composition-storia__wrapper-scheda--1 .composition-storia__scheda .line--oriz.line--top{ top: 0; left: -2vw; width: calc(100% + 4vw) }
.composition-storia__wrapper-scheda--1 .composition-storia__scheda .line--vert.line--right{ top: -4.1vw; right: 0; height: calc(100% + 8.1vw) }
.composition-storia__wrapper-scheda--1 .composition-storia__scheda .line--oriz.line--bottom{ bottom: 0; left: -1vw; width: calc(100% + 2vw) }
/* / scheda 2 / */
.composition-storia__wrapper-scheda--2 .composition-storia__scheda .line--vert.line--left{ top: -3.4vw; left: 0; height: calc(100% + 4.4vw) }
.composition-storia__wrapper-scheda--2 .composition-storia__scheda .line--oriz.line--top{ top: 0; left: -1vw; width: calc(100% + 2vw) }
.composition-storia__wrapper-scheda--2 .composition-storia__scheda .line--vert.line--right{ top: -1vw; right: 0; height: calc(100% + 5.1vw) }
.composition-storia__wrapper-scheda--2 .composition-storia__scheda .line--oriz.line--bottom{ bottom: 0; left: -1vw; width: calc(100% + 2vw) }
/* / scheda 3 / */
.composition-storia__wrapper-scheda--3 .composition-storia__scheda .line--vert.line--left{ top: -2vw; left: 0; height: calc(100% + 4.5vw) }
.composition-storia__wrapper-scheda--3 .composition-storia__scheda .line--oriz.line--top{ top: 0; left: -1vw; width: calc(100% + 2vw) }
.composition-storia__wrapper-scheda--3 .composition-storia__scheda .line--vert.line--right{ top: -3.2vw; right: 0; height: calc(100% + 5.1vw) }
.composition-storia__wrapper-scheda--3 .composition-storia__scheda .line--oriz.line--bottom{ bottom: 0; left: -1vw; width: calc(100% + 3.2vw) }


.composition-storia__img{ height: auto; position: absolute; }
/* / scheda 1 / */
.composition-storia__wrapper-scheda--1 .composition-storia__img--1{ width: 9.7vw; top: 2vw; left: -9.7vw; }
.composition-storia__wrapper-scheda--1 .composition-storia__img--2{ width: 15.2vw; bottom: -15.5vw; right: 1vw;}
.composition-storia__wrapper-scheda--1 .composition-storia__img--3{ width: 14.3vw; top: -2.3vw; right: -12vw; }
/* / scheda 2 / */
.composition-storia__wrapper-scheda--2 .composition-storia__img{ width: 12vw; bottom: -2.6vw; right: -8.3vw; }
/* / scheda 3 / */
.composition-storia__wrapper-scheda--3 .composition-storia__img{ width: 22.6vw; bottom: -15.3vw; right: -8.7vw; }


.composition-storia__video-wrapper{
    width: 100%;
    height: 100%;
    position: relative;
    
    overflow: hidden;
}
.composition-storia__video{
    width: 100%;
    height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    /* opacity: 0; */
    pointer-events: none;
    transition: all 400ms linear;
}
/* .composition-storia__scheda:hover .composition-storia__video{
    opacity: 1;
} */



/*/ COMPOSITION MOSAICO /*/
.composition-mosaico{
	width: 100%;
	height: 70vw;
	position: relative;
	margin: 0;
	margin-top: 10vw;
}
.composition-mosaico--desk{
	display: block;
}
.composition-mosaico--mob{
	display: none;
}
.composition-mosaico__bg{
	top: 0;
	left: 0;
	opacity: 0;
	width: 50%;
	position: absolute;
	pointer-events: none;
}
.composition-mosaico__tassello{
	width: 18vw;
	height: 16.36vw;
	display: block;
	cursor: pointer;
	position: absolute;
	background-image: none;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	transition: all 200ms linear, top 800ms cubic-bezier(0.785, 0.135, 0.150, 0.860), left 800ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
}
.composition-mosaico__tassello:after{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: ' ';
	display: block;
	position: absolute;
	transition: all 200ms linear;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: none;
	background-size: cover;
	background-color: #B4B4B4;
}
.composition-mosaico__tassello-name{
	font-family: 'Ubuntu', sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 24px;
	color: #FFFFFF;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;

	transform: translate(-50%, -50%);
	z-index: 1;
	transition: all 250ms linear;
}
.composition-mosaico .line{
	z-index: 10;
	opacity: 0.5;
	background: #FFFFFF;
}
.composition-mosaico .line--vert0{
	top: 20%;
	left: 27.27vw;
	height: 60%;
}
.composition-mosaico .line--vert1{
	top: 0%;
	left: 45.27vw;
	height: 90%;
}
.composition-mosaico .line--vert2{
	top: 50%;
	left: 63.2vw;
	height: 50%;
}
.composition-mosaico .line--vert3{
	top: -5%;
	left: 81.27vw;
	height: 60%;
}

.composition-mosaico .line--oriz0{
	left: 0;
	top: 1.18vw;
	width: 85%;
}
.composition-mosaico .line--oriz1{
	top: 17.5vw;
	right: 0;
	width: 100%;
}
.composition-mosaico .line--oriz2{
	left: 0;
	top: 33.85vw;
	width: 100%;
}
.composition-mosaico .line--oriz3{
	left: 0;
	top: 50.1vw;
	width: 90%;
}



/*/ text /*/
.composition-mosaico__text{
	z-index: 5;
	color: #FFFFFF;
	font-size: 9vw;
	position: absolute;
	white-space: nowrap;
	pointer-events: none;
	transition: all 1000ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
}
.composition-mosaico__text--0{
	top: 55%;
	left: 25%;
	transform: translate3d(-50%, -50%, 0) rotate(90deg);
}
.composition-mosaico__text--1{
	top: 45%;
	left: 70%;
	position: absolute;
	transform: translate3d(-50%, -50%, 0);
}



/*/ position /*/
.composition-mosaico__tassello--0{ top: 0vw; left: 28.18vw; }
.composition-mosaico__tassello--1{ top: -3vw; left: 24.54vw; }
.composition-mosaico__tassello--2{ top: 0vw; left: 49.09vw; width: 36vw; }
.composition-mosaico__tassello--3{ top: 16.36vw; left: 2.72vw; }
.composition-mosaico__tassello--4{ top: 21.81vw; left: 25.45vw; }
.composition-mosaico__tassello--5{ top: 20.90vw; left: 48.18vw; }
.composition-mosaico__tassello--6{ top: 40.45vw; left: 59.09vw; }


.composition-mosaico__tassello--0:after{ background-image: url('../imgs/homepage/mosaico/intdes.jpg.webp'); }
.composition-mosaico__tassello--1:after{ background-image: url('../imgs/homepage/mosaico/vetrite.webp'); }
.composition-mosaico__tassello--2:after{ background-image: url('../imgs/homepage/mosaico/arredo.webp'); }
.composition-mosaico__tassello--3:after{ background-image: url('../imgs/homepage/mosaico/mosaico.webp'); }
.composition-mosaico__tassello--4:after{ background-image: url('../imgs/homepage/mosaico/jewels.webp'); }
.composition-mosaico__tassello--5:after{ background-image: url('../imgs/homepage/mosaico/tessuti.webp'); }
.composition-mosaico__tassello--6:after{ background-image: url('../imgs/homepage/mosaico/marble.webp'); }

.composition-mosaico__tassello--2::before{
	top: 0;
	left: 50%;
	width: 2px;
	height: 100%;
	content: " ";
	display: block;
	margin-left: -1px;
	background: #FFFFFF;
	position: absolute;
}

.composition-mosaico__tassello-content{
	top: 0;
	left: 0;
	opacity: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	pointer-events: none;
	font-size: 25px;
	font-weight: 700;
	z-index: 10;
	font-family: 'Ubuntu', sans-serif;
	transition: all 250ms linear;
	box-shadow: inset 0px 0px 0px 6vw rgba(255,255,255,1);
}
.composition-mosaico__tassello-content span:first-child{
	width: 100%;
	top: 3.4vw;
	left: 50%;
	position: absolute;
	transform: translate3d(-50%, -50%, 0);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	text-align: center;
}
.composition-mosaico__tassello-content span:last-child{
	bottom: 2.72vw;
	left: 50%;
	position: absolute;
	transform: translate3d(-50%, -50%, 0);
	font-size: 20px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}
.composition-mosaico__tassello:hover .composition-mosaico__tassello-content{
	opacity: 1;
	pointer-events: auto;
}
.composition-mosaico__tassello:hover .composition-mosaico__tassello-name{
	opacity: 0;
	pointer-events: none;
}

.composition-mosaico--active .composition-mosaico__text--0{ top: 25% }
.composition-mosaico--active .composition-mosaico__text--1{ left: 75% }

.composition-mosaico--active .composition-mosaico__tassello{ border: 1px solid #FFFFFF; }
.composition-mosaico--active .composition-mosaico__tassello--0{ top: 4.9vw; left: 27.27vw; }
.composition-mosaico--active .composition-mosaico__tassello--1{ top: 1.18vw; left: 27.27vw; }
.composition-mosaico--active .composition-mosaico__tassello--2{ top: 1.18vw; left: 45.27vw; }
.composition-mosaico--active .composition-mosaico__tassello--3{ top: 17.5vw; left: 9.27vw; }
.composition-mosaico--active .composition-mosaico__tassello--4{ top: 17.5vw; left: 27.27vw; }
.composition-mosaico--active .composition-mosaico__tassello--5{ top: 17.5vw; left: 45.27vw; }
.composition-mosaico--active .composition-mosaico__tassello--6{ top: 33.8vw; left: 45.27vw; }
.composition-mosaico--active .composition-mosaico__tassello:after{ opacity: 0; }



@media(max-width: 1299px){

	/*/ COMPOSITION STORIA /*/
    .composition-storia__scheda .title--small{
        font-size: 30px;
        line-height: 26px;
    }

}


@media(max-width: 991px){

	/*/ DISTORTION EFFECT /*/
	.distortion-effect{
		position: relative;
		/*height: 64.4vh;*/
	}
	.distortion-effect img{
		width: auto;
		height: 65vh;
	}
	.distortion-effect canvas{
		/*width: 166vh !important;
		height: 64.4vh !important;*/
		margin-top: 50px;
		max-height: 110% !important;
	}
	.distortion-effect .swiper-slide .title--big{
		/* font-size: 24px;
		line-height: 24px; */
	}
	.distortion-effect .swiper-slide article{
		bottom: 50px;
		right: auto;
		left: 50%;
		width: 220px;

		transform: translateX(-50%);
	}
	.distortion-effect .swiper-slide article p{
		padding-left: 22px;
	}
	.distortion-effect .swiper-slide article p>span,
	.distortion-effect .swiper-slide article p>strong{
		font-size: 40px;
		line-height: 19px;
	}
	
	.distortion-effect .swiper-slide article .cta--transparent{
		margin-top: 20px;
	}
	.distortion-effect__prev{
		left: 10px;
		margin-top: 5px;
		width: 20px;
	    height: 20px;
	    background-size: auto 8px;
	}
	.distortion-effect__next{
		right: 10px;
		margin-top: 0;
		width: 20px;
	    height: 20px;
	    background-size: auto 8px;
	}
	.distortion-effect__controller:hover .tassello--0{
		top: -15px;
	}
	.distortion-effect__prev .tassello--1,
	.distortion-effect__prev .tassello--2,
	.distortion-effect__prev .tassello--3{
		display: none;
	}
	.distortion-effect__next .tassello--1,
	.distortion-effect__next .tassello--2,
	.distortion-effect__next .tassello--3{
		display: none;
	}
	.distortion-effect__scroll-down{
		left: auto;
		right: 30px;
		bottom: 30px;
		transform: translate3d(0, 0, 0);
		width: 55px;
		height: 11px;
		display: none;
	}

	/*/ COMPOSITION STORIA /*/
    .composition-storia--desk{
        display: none;
    }
    .composition-storia--mob{
        display: block;
    }
    .composition-storia{
        width: 100%;
        height: 108vw;
        padding-left: 0;
        padding-right: 0;
        position: relative;

        margin-bottom: 120px;
    }
    .composition-storia .mCSB_container{
        height: 100%;
    }
    
    .composition-storia__wrapper-slides{
        height: 100%;
        position: relative;
        white-space: nowrap;
        overflow: auto;
    }
    .composition-storia__wrapper-scheda{
        width: 100vw;
        height: 100%;
        padding: 0;

        float: none;
        display: inline-block;
    }
    .composition-storia__wrapper-scheda--1 { margin-top: 0; }
    .composition-storia__wrapper-scheda--3 { margin-top: 0; }

    .composition-storia__wrapper-scheda .title--small{
        font-size: 18px;
        line-height: 23px;
        position: absolute;

        margin-left: 0;
        margin-bottom: 0;
    }
    .composition-storia__wrapper-scheda--2 .title--small{
        margin-top: 0;
        margin-bottom: 0;
    }

    .composition-storia__wrapper-scheda--1 .title--small{ top: 16vw; left: 34.6vw; }
    .composition-storia__wrapper-scheda--2 .title--small{ top: 21.3vw; left: 36.2vw; }
    .composition-storia__wrapper-scheda--3 .title--small{ top: 13.3vw; left: 44vw; }

    .composition-storia__scheda::before{
        display: none;
    }

    .composition-storia__img{ height: auto; position: absolute; display: inline-block; }
    /* / scheda 1 / */
    .composition-storia__wrapper-scheda--1 .composition-storia__img--1{ width: 31vw; top: 4vw; left: -9vw; }
    .composition-storia__wrapper-scheda--1 .composition-storia__img--2{ width: 45.86vw; bottom: 5vw; right: 33.8vw; }
    .composition-storia__wrapper-scheda--1 .composition-storia__img--3{ width: 45.3vw; top: 0; right: -16vw; }
    /* / scheda 2 / */
    .composition-storia__wrapper-scheda--2 .composition-storia__img{ width: 57.8vw; bottom: auto; right: -28.6vw; }
    /* / scheda 3 / */
    .composition-storia__wrapper-scheda--3 .composition-storia__img{ width: 57.8vw; bottom: auto; right: -40vw; }

    .composition-storia__cta-video{
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: linear-gradient(to bottom, #86BCB8 0%, #A99373 50%, #A8615D 100%);
        position: absolute;
        z-index: 1;
    }
    .composition-storia__cta-video::before{
        content: '';
        width: 18px;
        height: 20px;
        background-image: url('../imgs/homepage/storia/video.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% auto;
        position: absolute;
        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);
    }
    .composition-storia__wrapper-scheda--1 .composition-storia__cta-video{ top: 34.6vw; right: 4.6vw; }
    .composition-storia__wrapper-scheda--2 .composition-storia__cta-video{ top: 1vw; right: 24vw; }
    .composition-storia__wrapper-scheda--3 .composition-storia__cta-video{ bottom: 28.2vw; right: 10.6vw; }

    .composition-storia__video-wrapper{
        width: 75vw;
        max-width: 400px;
        height: 88vw;
        max-height: 570px;
        position: absolute;
        top: 50%;
        left: 50%;
        
        overflow: hidden;
        pointer-events: none;
        transform: translate(-50%, -50%);
        z-index: 20;
    }
    .composition-storia__video{
        width: 105%;
        height: 105%;
        position: absolute;
        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);
        opacity: 0 ;
        pointer-events: none;
        transition: all 400ms linear;
    }
    .composition-storia__scheda:hover .composition-storia__video{
        opacity: 0;
    }
    .composition-storia__video.active{
        opacity: 1;
    }

	/*/ COMPOSITION MOSAICO /*/
	.composition-mosaico{
		width: 100%;
		height: auto;
		position: relative;
		margin: 0;
		margin-top: 120px;
	}
	.composition-mosaico--desk{
		display: none;
	}
	.composition-mosaico--mob{
		display: block;
	}
	.composition-mosaico__container-col{
		width: 100%;
		position: relative;
	}
	.composition-mosaico__tassello{
		width: calc(50% - 2px);
		height: 48vw;
		padding: 4px;
		position: relative;

		float: left;
	}
	.composition-mosaico__tassello-col-empty{
		width: calc(50% - 2px);
		height: 1px;
		padding: 4px;
		position: relative;

		float: left;
	}
	.composition-mosaico__tassello::before{
		content: '';
		width: calc(100% - 8px);
		height: calc(100% - 8px);
		background-color: rgba(0,0,0,.35);
		position: absolute;
		top: 4px;
		left: 4px;

		z-index: 11;
	}
	.composition-mosaico__tassello--rect{
		height: 81.3vw;
	}
	.composition-mosaico__tassello-name{
		font-size: 14px;
		line-height: 20px;
		opacity: 1;

		z-index: 11;
	}

	.composition-mosaico .line--oriz0{
		display: none;
	}



	/*/ text /*/
	.composition-mosaico__text{
		z-index: 5;
		color: #FFFFFF;
		font-size: 23vw;
		line-height: 15.2vw;
		position: absolute;
		white-space: nowrap;
		pointer-events: none;
	}
	.composition-mosaico__text--0{
		top: -16vw;
		left: 10px;
		transform: translate3d(0, 0, 0) rotate(0deg);
	}
	.composition-mosaico__text--1{
		top: auto;
		bottom: 18vw;
		left: 10px;
		right: auto;
		transform: translate3d(0, 0, 0);
		font-size: 18.4vw;
		line-height: 12.26vw;
	}
	.composition-mosaico__text--2{
		position: absolute;
		bottom: 0;
		left: 10px;
		font-size: 18.4vw;
		line-height: 12.26vw;
	}



	/*/ position /*/
	.composition-mosaico__tassello--0{ top: auto; left: auto; float: right; margin-bottom: 34.6vw; }
	.composition-mosaico__tassello--1{ top: auto; left: auto; }
	.composition-mosaico__tassello--2{ top: auto; left: auto; }
	.composition-mosaico__tassello--3{ top: auto; left: auto; }
	.composition-mosaico__tassello--4{ top: auto; left: auto; }
	.composition-mosaico__tassello--5{ top: auto; left: auto; }
	.composition-mosaico__tassello--6{ top: auto; left: auto; }


	.composition-mosaico__tassello--0:after{ display: none; }
	.composition-mosaico__tassello--1:after{ display: none; }
	.composition-mosaico__tassello--2:after{ display: none; }
	.composition-mosaico__tassello--3:after{ display: none; }
	.composition-mosaico__tassello--4:after{ display: none; }
	.composition-mosaico__tassello--5:after{ display: none; }
	.composition-mosaico__tassello--6:after{ display: none; }

	.composition-mosaico__tassello--2::before{
		display: none;
	}

	.composition-mosaico__tassello-content{
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		top: auto;
		left: auto;
		opacity: 1;
		position: relative;
		pointer-events: none;
		box-shadow: 0px 0px 0px;
	}
	.composition-mosaico__tassello-content span:first-child{
		width: 100%;
		top: 3.4vw;
		left: 50%;
		position: absolute;
		transform: translate3d(-50%, -50%, 0);
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		text-align: center;
	}
	.composition-mosaico__tassello-content span:last-child{
		bottom: 2.72vw;
		left: 50%;
		position: absolute;
		transform: translate3d(-50%, -50%, 0);
		font-size: 20px;
		font-weight: 700;
		line-height: 20px;
		text-align: center;
	}
	.composition-mosaico__tassello:hover .composition-mosaico__tassello-content{
		opacity: 1;
	}
	.composition-mosaico__tassello:hover .composition-mosaico__tassello-name{
		opacity: 1;
	}

	.composition-mosaico--active .composition-mosaico__text--0{ top: 25% }
	.composition-mosaico--active .composition-mosaico__text--1{ left: 75% }

	.composition-mosaico--active .composition-mosaico__tassello{ border: 1px solid #FFFFFF; }
	.composition-mosaico--active .composition-mosaico__tassello--0{ top: 4.9vw; left: 27.27vw; }
	.composition-mosaico--active .composition-mosaico__tassello--1{ top: 21.18vw; left: 27.27vw; }
	.composition-mosaico--active .composition-mosaico__tassello--2{ top: 21.18vw; left: 45.27vw; }
	.composition-mosaico--active .composition-mosaico__tassello--3{ top: 37.5vw; left: 9.27vw; }
	.composition-mosaico--active .composition-mosaico__tassello--4{ top: 37.5vw; left: 27.27vw; }
	.composition-mosaico--active .composition-mosaico__tassello--5{ top: 37.5vw; left: 45.27vw; }
	.composition-mosaico--active .composition-mosaico__tassello--6{ top: 53.8vw; left: 45.27vw; }
	.composition-mosaico--active .composition-mosaico__tassello:after{ opacity: 0; }

}