.steps-selector ul{
	list-style-type: none;
	margin:0;
	padding: 0 0 0 40px;
}

.steps-selector li{
	width:100%;
	border-bottom: 1px solid rgb(var(--secondary-lighter-color));
	padding: 10px 0;
	display: inline-block;
	cursor: pointer;
}


.steps-selector li span{
	font-size: 20pt !important; 
	vertical-align: middle;
	float: right;
	transition: all .3s;
}

.steps-selector li span.selected{
	transform: rotate(45deg)
}

.steps-selector p{
	display: none;
	margin:0 0 10px 0;
	padding: 15px 10px 20px 10px;

	font-size: 10pt !important;
	font-weight: 300;
	backdrop-filter: blur(15px) brightness(70%);
	-moz-backdrop-filter: blur(15px) brightness(70%);
	-webkit-backdrop-filter: blur(15px) brightness(70%);
	-o-backdrop-filter: blur(15px) brightness(70%);
	-ms-backdrop-filter: blur(15px) brightness(70%);
	border:1px solid rgba(200,200,255,0.1);
	border-radius:0 0 10px 10px;
	position: relative;
	box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
	background:radial-gradient(
		200px at 50% 50%, rgba(var(--main-light-color),0.4) 0%, rgba(var(--main-light-color),0) 100%
		) no-repeat;

	background-size: 200% 200%;
    background-position: -100% 0%;
    animation: design_container_out .5s 1 forwards cubic-bezier(0.505, 0.000, 0.305, 1.000); 

	/*overflow: hidden;*/
}

.steps-selector p:hover{
	animation: design_container_in .5s 1 forwards cubic-bezier(0.505, 0.000, 0.305, 1.000); 	
}

.steps-information .step{
	display: none;
}

.steps-information .step .step-content{
	width:calc(100% - 20px);
	max-width: 400px;
	margin:10px;
	display: inline-block;
}

.steps-information .step .step-content > img, .steps-information .step .step-content > video{
	width: 100%;
} 

.steps-information .step .step-content > video{
	border-radius: 20px;
	border: 1px solid rgba(255,255,255,0.05);
}


.steps-information .step .step-content:has(video){
	max-width: 300px;
}

.steps-information .step .step-content.list-steps{
	padding-left: 15px; 
	width:calc(100% - 30px) !important;
}

.steps-information .step .list-steps span {
	width: 25px;
	margin-right: 10px;
	display: inline-block;
}

.steps-information .step .list-steps p{
	width: calc(100% - 40px);
	display: inline-block;
}


.img-showcase{
	position: relative;
	width:100%;
}

.img-wrapper.selected{
	opacity: 1;
	display: inline-block;
}

.img-wrapper{
	position: relative;
	width:80%;
	display: inline-block;
	transition: all .3s;
	opacity: 0;
	display: none;
}

.img-wrapper > .img-content{
	width:100%;
}

.img-wrapper > .img-garment{
	max-width: 80px;
	border-radius: 999px;
	position: absolute;
	left: -20px; 
	top: -20px;
	box-shadow: 0px 3px 9px rgba(0,0,0,0.3);

}

.img-showcase > .img-selector img{
	display: inline-block;
	width:70px;
	border-radius: 999px;
	box-shadow: 0px 3px 9px rgba(0,0,0,0.3);
	margin: 0 8px;
	border:2px solid transparent;
	transition: all .3s;
	cursor: pointer;
}

.img-showcase > .img-selector img:hover{
	border: 2px solid rgb(var(--secondary-light-color));
}

.img-showcase > .img-selector > .selected{
	border: 2px solid rgb(var(--secondary-light-color));
	transform: scale(1.05);
}

.div-scroll-margin{
	margin: 50% 0;
}

@media screen and (max-width: 600px) {
	.steps-selector ul{
		padding: 0 10px;
	}

	.img-showcase > .img-selector img{
		margin: 0 4px;
		width:60px;
	}


	.div-scroll-margin{
		margin: 150% 0;
	}

}