/* foundation */

.cp-carousel,
.cp-carousel * {
	box-sizing: border-box;
}

.cp-carousel {
	position: relative;
	z-index: 99998;
	width: 100%;
	height: 100%;
}

.cp-carousel-frame {
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.cp-carousel-container {
	display: flex;
	width: 100%;
	height: 100%;
}

.cp-carousel-slide {
	flex-grow: 1;
	width: 100%;
	height: 100%;
}

.cp-carousel-active {}

.cp-carousel-control {}

.cp-carousel-next {}

.cp-carousel-prev {}

.cp-carousel-overlay {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 99997;
	background-color: #00000099;
}

/* design */

.cp-carousel {
	position: fixed;
	left: 5%;
	top: 50%;
	width: 90vw;
	height: 90vw;
	margin-top: -45vw;
	border: 0.3vw solid #050037;
	box-shadow: 1vw 1vw 1vw #333333;
}

.cp-carousel-frame {}

.cp-carousel-container {}

.cp-carousel-slide {
	background-color: #ffffff33;
	opacity: 0;
	filter: blur(30px);
	transition: opacity 0.3s, filter 0.3s;
}

.cp-carousel-active {
	opacity: 1;
	filter: blur(0);
}

.cp-carousel-button {
	position: absolute;
	bottom: -15vw;
	z-index: 99999;
	cursor: pointer;
	user-select: none;
	width: 40vw;
	height: 10vw;
	margin-top: -5vw;
	background-color: #ffffff33;
	backdrop-filter: blur(6px);
	border: 0.6vw solid #33333399;
	text-align: center;
	box-shadow: 1vw 1vw 1vw #333333;
	line-height: 7vw;
	font-size: 8vw;
}

.cp-carousel-next {
	right: 0;
}

.cp-carousel-prev {
	left: 0;
}

.cp-carousel-close {
	position: absolute;
	right: 0;
	top: -12vw;
	z-index: 99999;
	cursor: pointer;
	user-select: none;
	width: 10vw;
	height: 10vw;
	background-color: #ffffff33;
	backdrop-filter: blur(30px);
	border: 0.6vw solid #33333399;
	border-radius: 50%;
}

.cp-carousel-close::after,
.cp-carousel-close::before {
	content: "";
	display: block;
	position: absolute;
	left: 16%;
	top: 44%;
	width: 70%;
	height: 10%;
	background-color: #000000;
}

.cp-carousel-close::after {
	transform: rotate(45deg);

}

.cp-carousel-close::before {
	transform: rotate(-45deg);
}

@media screen and (min-aspect-ratio: 3 / 4) {
	.cp-carousel {
    	left: 50%;
    	top: 50%;
    	width: 50vh;
		height: 50vh;
    	margin-top: -25vh;
    	margin-left: -25vh;
		font-size: 2vh;
	}

	.cp-carousel-button {
		top: 50%;
		width: 10vh;
		height: 10vh;
		margin-top: -5vh;
		border: 0.6vh solid #33333399;
		box-shadow: 1vh 1vh 1vh #333333;
		line-height: 7vh;
		font-size: 8vh;
	}

	.cp-carousel-next {
		right: calc(7vh - 25vw);
	}
	
	.cp-carousel-prev {
		left: calc(7vh - 25vw);
	}

	.cp-carousel-close {
		top: -12vh;
		width: 10vh;
		height: 10vh;
	}
}