/* ================================================================================= */
/* SWIPER */
/* ================================================================================= */

.dim,
.neutral {
	display: block;
	position:  absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.dim {
	background: rgba(0,0,0,.0);
}
.dim-sm {
	background: rgba(0,0,0,.175);
}
.dim-md {
	background: rgba(0,0,0,.275);
}
.dim-lg {
	background: rgba(0,0,0,.333);
}
.dim-xl {
	background: rgba(0,0,0,.425);
}
.dim-xxl {
	background: rgba(0,0,0,.45);
}
.dim-xxxl {
	background: rgba(0,0,0,.5);
}
.drag-center,
.drag-left,
.drag-right {
	display: grid;
	align-content: center;
	justify-items: center;
	position: absolute !important;
	text-align: center;
	height: 100%;	
}
.home .drag-center {
	height: 110%;
}
.drag-center {
	left: 15%;
	margin: 0 auto;
	padding: 0%;
	max-width: 1440px;
	width: 70%;
	height: 100%;
}
.drag-left,
.drag-right {
	width: 56.25%;
}
.hero .drag-left,
.hero .drag-right {
	width: 66.6%;
	height: 100%;
}
@media only screen and (max-width: 1680px) {
	.drag-left,
	.drag-right {
		width: 60%;
	}
}
@media only screen and (max-width: 1440px) {
	.drag-left,
	.drag-right {
		width: 66.6%;
	}
	.hero .drag-left,
	.hero .drag-right {
	}
}
.drag-left {
	left: 5%;
}
.hero .drag-left {
	left: 8%;
}
.drag-right {
	right: 5%;
}
.hero .drag-right {
	margin-right: 0;
	padding-left: 22.5%;
	right: 8%;
	background: 0;
}
.drag-center.drag-up,
.drag-left.drag-up,
.drag-right.drag-up {
	align-content: flex-start;
	padding-top: 12.5% !important;
}
.drag-center.drag-down,
.drag-left.drag-down,
.drag-right.drag-down {
	align-content: flex-end;
	padding-bottom: 7.5%;
}
.home .drag-center.drag-down,
.home .drag-left.drag-down,
.home .drag-right.drag-down {
	padding-bottom: 12%;
}
.drag-center.thin, 
.drag-right.thin, 
.drag-left.thin {
	width: 40%;
}
.drag-center.thin {
	left: 25%;
	width: 50%;
}
.drag-right.thin {
	right: 10%;
}
.drag-left.thin {
	left: 8.5%;
}
@media only screen and (max-width: 1680px) {
	.drag-center {
		left: 12%;
		width: 76%;
	}
}
@media only screen and (max-width: 1560px) {
	.home .drag-center.drag-down,
	.home .drag-left.drag-down,
	.home .drag-right.drag-down {
		height: 95% !important;
	}	
}
@media only screen and (max-width: 1440px) {
	.drag-center {
		left: 10%;
		width: 80%;
	}
	.drag-center.thin {
		left: 20%;
		width: 60%;
	}
	.home .drag-center.drag-down,
	.home .drag-left.drag-down,
	.home .drag-right.drag-down {
		padding-bottom: 3%;
	}
}

/* ---------------------------------------- SPLASH ---------------------------------------- */ 

.splash {
	display: block;
	position: relative;
	padding: 0 0 56.25%;
	width: 100%;
	height: auto;
}
	
/* ================================================================================= */
/* SWIPER
/* ================================================================================= */

.slide-image-container,
.swiperCarousel {
	position: relative;
}
.swiper-pagination {
	left: 50% !important;
	width: 50% !important;
	left: 0 !important;
	width: 100% !important;
	background:  !important;
	bottom: 2.4rem !important;
	z-index: 999999 !important;
}
@media only screen and (max-width: 1680px) {
	.swiper-pagination {
		bottom: 1.8rem !important;
	}
}
@media only screen and (max-width: 1440px) {
	.swiper-pagination {
		bottom: 20px !important;
	}
}
.swiper-pagination-bullet {
	margin: 0 .6rem !important;
	padding: .25rem;
}
.swiper-pagination-bullet-active {
	background: rgba(255,255,255,.666) !important;	
}
.swiper-button-next,
.swiper-button-prev {
	color: #fff !important;
	opacity: .75;	
	transition: all 0.1s ease-in;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
	opacity: 1;	
}
.swiper-button-disabled {
	opacity: .333;
}
.swiper-button-next {
	right: 3% !important;		
}
.swiper-button-prev {
	left: 3% !important;		
}

/* ================================================================================= */
/* SWIPER OVERLAY
/* ================================================================================= */

.overlay .swiper-button-prev,
.overlay .swiper-button-next {
	opacity: 0;
}
.overlay:hover .swiper-button-prev,
.overlay:hover .swiper-button-next {
	opacity: .95;
}
.overlay .swiper-button-prev {
	left: 0 !important;
}
.overlay .swiper-button-next {
	right: 0 !important;
}
.overlay .swiper-button-prev:after,
.overlay .swiper-button-next:after {
	padding: 1rem;
	font-size: 180%;
	background: var(--black);	
}

/* ================================================================================= */
/* SWIPER THUMBNAILS
/* ================================================================================= */

.swiperThumbnails {
	display: block !important;
	position: absolute !important;
	top: auto;
	bottom: 8%;
	left: 12%;
	width: 76%; 
}
.swiperThumbnails > .swiper-wrapper {
	display: grid !important;
	grid-template-columns: 1fr 1fr 1fr;
}
.swiperThumbnails > .swiper-wrapper .swiper-slide {
	display: grid !important;
	grid-template-columns: 1fr 3fr;
	grid-gap: 1rem;
	align-items: center;
	position: relative;
	padding: 0 .5rem;
	height: auto;
	text-decoration: none;
}
.swiper-slide-thumb-active img {
	filter: grayscale(100%);
}