body{
	width: 100%;
	overflow-x: hidden;
  overflow-y: scroll;
  scroll-behavior: smooth;
}


.desktop{ display:none !important; }
.mobile{}

.f-1{ font-size:3.8vw; }
.f-5{ font-size:16vw; }



#main{
	width: 100%;
	height: 90vh;
}

#main .logo{
	width:82vw;
	top:15vw;
}


#main .more{
	padding:1.5vw;
	top:3.5vw;
	left: 50%;
	transform: translateX(-50%);
}
#main .more .icon{
	width:4vw;
	height:4vw;
	border-radius:50%;
	border:1vw solid var(--yellow);
	background-color:var(--yellow);
	transition:all 1s;
}
#main .more[class*="open"] .icon{
	background-color: transparent;
}



#main #menu{
	background-color: rgba(0,0,0,0.3);
	opacity: 0;
	transition:all 0.5s;
	transition-delay:0.3s;
	pointer-events:none;
}
#main #menu .content{
	height:100vh;
	padding: 50vw 5vw 50vw;
	transform:translateY(-100%);
	transition:all 1s;
	transition-delay:0s;
}

#main #menu[class*="open"]{
	opacity: 1;
	transition-delay:0s;
	pointer-events:auto;
}
#main #menu[class*="open"] .content{
	transform:translateY(0%);
	transition-delay:0.3s;
}


#main .arrow{
	grid-template-columns:50% 50%;
}
#main .arrow .sx{
	cursor:pointer;
}
#main .arrow .dx{
	cursor:pointer;
}


#main .back-gallery .content{
	height:100%;
	transition: all 1s;
}



#main .calltoaction{
	bottom:15vw;
	width: 100%;
	text-align: center;
}




#main .marquee{
	padding:2.5vw 0;
}
#main .marquee .content{
	height: 5vw;
}

#main .marquee .content .one{ animation: marquee 60s linear infinite; }
#main .marquee .content .two{ animation: marquee 60s linear 15s infinite; }
#main .marquee .content .three{ animation: marquee 60s linear 30s infinite; }
#main .marquee .content .four{ animation: marquee 60s linear 45s infinite;}

#main .marquee .content .marq{
	position: absolute;
	width: 100%;
	left: 100%;
	height: 1.2vw;
	display: flex;
	justify-content: space-between;
}

@keyframes marquee {
  0% { left: 100%; }
  50% { left: -100%; }
  100% { left: -100%; }
}

#main .marquee .content .word{
	font-size:3vw;
	grid-template-columns:1.5vw auto;
	grid-gap:3vw;
	align-items:center;
}
#main .marquee .content .text{
	margin-right: 2vw;
}
#main .marquee .content .word .icon{
	width:1.2vw;
	height:1.2vw;
	border-radius:50%;
	background-color: var(--black);
}




.block h2{
	font-weight:400;
	margin: 0;
	padding: 0;
}
.block strong{
	font-weight:400;
}
.block .main-text{
	font-size:6vw;
	color:var(--black);
}

.block .small-text{
	font-size:4vw;
	color:var(--black);
	line-height: 1.4;
}



#manifesto{
	padding:10vw 5vw 10vw 5vw;
}

#manifesto .main-text{
	width:100%;
	margin:10vw auto 8vw;
}

#manifesto .small-text{
	width:100%;
	margin:0 auto 12vw;
}

#manifesto .img-layer{
	width: 100%;
	height: 90vw;
	position:relative;
}
#manifesto .img-layer div{
	width: 100%;
	height: 100%;
	position: absolute;
	cursor: zoom-in;
	transition:all 0.3s;
}



.man-zoom{
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.3);
	opacity: 0;
	transition:all 0.5s;
	pointer-events:none;
}

.man-zoom[class*="open"]{
	opacity: 1;
	transition-delay:0s;
	pointer-events:auto;
}
.man-zoom .img{
	width:95vw;
	height:130vw;
	border:2vw solid var(--yellow);
}
.man-zoom .btn-close{
	width:18vw;
	height: 18vw;
	top:-9vw;
	left:50%;
	transform:translateX(-50%);
}









@keyframes outline-rotate {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}





#product{
	grid-template-columns:100%;
	grid-auto-flow: dense;
}
#product .text{
	padding:10vw 5vw 10vw 5vw;
}
#product .text .main-text{
	width:100%;
	margin:8vw auto 8vw;
	font-size: 6vw;
}
#product .text .small-text{
	width: 100%;
	font-size:4vw;
}
#product .text .btn-shop{
	width:35vw;
	height:35vw;
	font-size:4vw;
	margin-top:8vw;
	transition:all 0.2s;
}

#product .btn-shop .outline{
	animation: outline-rotate 30s linear infinite;
}

#product .btn-shop .fill{
	opacity:0;
	transition:all 0.2s;
}
#product .btn-shop:hover{}
#product .btn-shop:hover .fill{
	opacity:1;
}

#product .img-box{
	height: 100vw;
	grid-row: 1;
}
#product .img-box .img{
	width: 120%;
	height: 120%;
	top:-10%;
	left:-10%;
}





#slider{
	padding:140vw 5vw 10vw 5vw;
	background-color:var(--rose);
}
#slider .buttons{
	margin-top:7vw;
}
#slider .buttons .btn{
	width: 3vw;
  height: 3vw;
	opacity:0.5;
	cursor: pointer;
	transition:all 0.2s;
	background-color: var(--black) !important;
	display:inline-block;
	margin-right: 3vw;
}
#slider .buttons .btn[class*="active"]{
	opacity:1;
}
#slider .text .main-text{
	width:100%;
	margin:7vw auto 5vw;
	font-size: 6vw;
}
#slider .visual{
	width:100%;
	height:90vw;
	opacity:0;
	transition:all 0.2s;
}
#slider .visual[class*="active"]{
	opacity:1;
}
#slider .visual .img{
	width:44vw;
	height:44vw;
	background-color: var(--white);
	position:absolute;
	background-size:cover;
	background-position:center;
}

#slider .visual .img-1{
	bottom:-50vw;
	left: 5vw;
}

#slider .visual .img-2{
	bottom:-50vw;
	left: 51vw;
}

#slider .visual .img-3{
	display: none;
}






#sustain{
	width: 100%;
	overflow: hidden;
	grid-template-columns:100%;
}

#sustain .prod{
	padding:10vw 5vw 10vw 5vw;
}

#sustain .prod-gallery{
	width: 90vw;
	height:90vw;
}

#sustain .prod-gallery .slide{
	width: 75%;
	height: 75%;
	position:absolute;
	left: 50%;
	top: 50%;
	transform:translate(-50%, -50%);
	opacity: 0;
	transition: all 0.5s;
}
#sustain .prod-gallery .slide[class*="active"]{
	opacity:1;
}

#sustain .prod .outline{
	animation: outline-rotate 45s linear infinite;
}


#sustain .prod .btn-change{
	font-size: 4.4vw;
	padding: 3vw 5vw 3vw 7vw;
	border-radius: 15vw;
	grid-template-columns: 5vw auto;
	grid-gap: 2vw;
	align-items: center;
	background-color: var(--yellow);
	color: var(--black);
	width: 68vw;
	right: 10vw;
	bottom: -7vw;
}
#sustain .prod .btn-change:hover{
	
}
#sustain .prod .btn-change .icon{
	transform:translateY(7%);
}

#sustain .text{
	padding:16vw 5vw 10vw 5vw;
}
#sustain .text .main-text{
	width:100%;
	margin:8vw auto 8vw;
	font-size: 6vw;
}
#sustain .text .small-text{
	width: 100%;
	font-size:4vw;
}









#collection{
	padding:10vw 5vw 12vw 5vw;
}

#collection .text .main-text{
	width: 100%;
	margin:8vw auto 8vw;
}

#collection .text .small-text{
	width: 44vw;
	margin: auto;
	font-size:1.2vw;
}

#collection .slideshow{
	margin: 3vw 0;
	grid-template-columns:repeat(2, 44vw);
	grid-gap:2vw;
	grid-row-gap:4vw;
}
#collection .slideshow .slide{
	display:block;
}
#collection .slideshow .slide .img{
	width: 100%;
	height: 43vw;
	background-color:var(--white);
	margin-bottom:2vw;
}

#collection .btn-shop{
	width:60vw;
	font-size:4vw;
	margin: auto;
	padding:2vw;
	border-radius:10vw;
	margin-top:10vw;
}

#collection .sold{
	width: 17vw;
	height: 17vw;
	right: 2vw;
	top: 2vw;
}
#collection .sold .text{
	font-size:3.2vw;
	line-height:1;
	color: var(--black);
}
#collection .sold .outline{
	animation: outline-rotate 30s linear infinite;
}





#pre-footer{
	height:120vw;
}

#footer{
	padding: 5vw 5vw;
	font-size:3.4vw !important;
}

#footer .link{
	width:50vw;
	margin-top: 3vw;
	margin-bottom: 3vw;
}
#footer .link span{
	width: 60vw;
}
#footer .link img{
	height: 2.6vw;
	margin-left: -1vw;
}
#footer .insta{
	width:35vw;
}


#footer .marchio{
	width:14vw;
	margin-top:5vw;
	margin-bottom:4vw;
}
#footer strong{ 
	font-weight:400; 
	margin-right:1vw;
}
#footer .info{
	margin-top: 3vw;
}
#footer .copyright{
	margin-bottom:1vw;
}