.notransition {
	transition: none !important;
}

.slider {
	display: block;
	position: relative;
}

.slider .slides {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.slider .slides > * {
	display: flex;
    position: relative;
	transition: transform 1.2s cubic-bezier(0.6,0,0.4,1);
    z-index: 1;

    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;i
}

.slider .slides.touch > * {
	transition: transform 0.4s cubic-bezier(0,0.6,0.4,1);
}

.slider .slides > * > * {
	display: block;
	position: relative;
    z-index: 2;
}

.slider li img, 
.slider li picture img,
.slider article img, 
.slider article picture img {
	width: 100%;
	height: 100%;
    object-fit: cover;
}

a.gallery-item {
	position: relative;	
}

a.gallery-item:after,
.slider li > a:after,
.slider article > a:after {
	content: "\f31e";
	display: block;
	position: absolute;
	right: 1em;
	top: 1em;
	color: rgb(0,0,0);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 22px;
	opacity: 0;
	transition: opacity 0.4s linear;
	z-index: 9;
}

a.gallery-item:hover:after,
.slider li > a:hover:after,
.slider article > a:hover:after {
	opacity: 0.75;
}

.slider.fadein .slides > * {
	display: block;
}

.slider.fadein .slides > * > * {
	display: block;
	position: absolute;
    opacity: 0;
	transition: opacity 1.2s linear;
    z-index: 10;
}

.slider.fadein .slides > * > *.active,
.slider.zoomin .slides > * > *.active {
    opacity: 1;
    z-index: 20;
}

.slider.fadein li.transition {
    transition: opacity linear 1.2s;
}

.slider.fadein li.transition picture {
    transition: transform linear 6.2s 0s;
}

.slider.zoomin li picture {
    overflow: hidden;
}

.slider.zoomin li.transition picture {
    transform: scale(1.15);
    transition: transform cubic-bezier(0.4,0,0.6,1) 6.2s 0s;
}

.slider.pan li picture {
    transform: scale(1.15);
    transform-origin: left center;
}

.slider.pan li.transition picture {
    transform-origin: right center;
    transition: transform-origin linear 6.2s 0s;
}

.slider .ctrl-arr {
    display: none;
    justify-content: space-between;
    width: 40px;
}

.slider .ctrl-arr.show {
    display: flex;
}

.slider .ctrl-arr button {
	display: block;
	width: 12px;
	height: 12px;
}

.slider .ctrl-arr button:after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-bottom: solid 1px rgb(0,0,0);
    border-left: solid 1px rgb(0,0,0);
    transform: rotate(45deg);
    transform-origin: center center;
}

.slider .ctrl-arr button:disabled {
    pointer-events: none;
    opacity: 0.2;
}

.slider .ctrl-arr button[data-dir="next"] {
    transform: rotate(180deg);
}

.slider .ctrl-bts {
    display: none;
}

.slider .ctrl-bts.show {
    display: flex;
    flex-flow: row wrap;
    column-gap: 8px;
}

.slider .ctrl-bts button {
	display: block;
	width: 8px;
	height: 8px;
	background-color: rgba(0,0,0,0.5);
	border-radius: 4px;
	padding: 0;
	transition: background-color 0.4s;
}

.slider .ctrl-bts button.ctrl-bt-on {
	background-color: rgba(0,0,0,0.5);
}

.slider .slider-status {
    display: none;
	color: rgb(0,0,0);
	font-size: 16px;
	line-height: 1.2em;
}

.slider .slider-status.show {
    display: block;
}

.slider .box-shadow {
	display: none;
}

figcaption {
	display: none;
}

figure figcaption {
	display: block;
}


/*************************************
	common-areas + units
 *************************************/


.slider.common-areas .ctrl-arr button,
.slider.units .ctrl-arr button {
	width: calc((90 / 1366) * 100vw);
	height: calc((90 / 1366) * 100vw);
}

.slider.common-areas .ctrl-arr button:after,
.slider.units .ctrl-arr button:after {
    width: calc((60 / 1366) * 100vw);
    height: calc((60 / 1366) * 100vw);
    border-bottom: solid 4px rgba(var(--color-grey-75),0.8);
    border-left: solid 4px rgba(var(--color-grey-75),0.8);
	transition: border-color 0.2s linear;
}

.slider.common-areas .ctrl-arr button:hover:after,
.slider.units .ctrl-arr button:hover:after {
    border-color: rgba(var(--color-grey-75),1);
}

.slider.common-areas .ctrl-bts,
.slider.units .ctrl-bts {
    position: absolute;
    left: 50%;
    background: rgba(var(--color-white),0.75);
    border-radius: 9999px;
    padding: 12px;
    /*transform: translate(-50%, -100%);*/
    transform: translate(-50%, calc(-100% - 20px));
    z-index: 30;
}

.slider.common-areas .ctrl-bts button,
.slider.units .ctrl-bts button {
	background-color: rgba(var(--color-dark-green),0.5);
}

.slider.common-areas .ctrl-bts button.ctrl-bt-on,
.slider.units .ctrl-bts button.ctrl-bt-on {
	background-color: rgba(var(--color-dark-green),1);
}

.slider.common-areas div.text,
.slider.units div.text {
    opacity: 0;
    transition: opacity 0.2s linear;
}

.slider.common-areas .slides > ul > li.active div.text,
.slider.units .slides > ul > li.active div.text {
    opacity: 1;
    transition-delay: 1.2s;
}

@media screen and (max-width: 720px) {
	.slider.common-areas .ctrl-arr,
	.slider.units .ctrl-arr {
		display: none;
	}
    
    .slider.common-areas .ctrl-bts,
    .slider.units .ctrl-bts {
        padding: 10px;
        transform: translate(-50%, calc(-100% - 18px));
    }
    
    /*.slider.common-areas .ctrl-arr,
	.slider.units .ctrl-arr {
		width: 70vw;
		left: 15vw;
		top: 37.5vw;
	}

	.slider.common-areas .ctrl-arr button,
	.slider.units .ctrl-arr button {
		width: calc((60 / 375) * 100vw);
		height: calc((60 / 375) * 100vw);
	}

	.slider.common-areas .ctrl-arr button:after,
	.slider.units .ctrl-arr button:after {
		width: calc((40 / 375) * 100vw);
		height: calc((40 / 375) * 100vw);
	}*/
}


/*************************************
	common-areas
 *************************************/


.slider.common-areas .slides, 
.slider.common-areas .slides div.img,
.slider.common-areas .slides div.img img {
    width: 100vw;
}

.slider.common-areas .slides {
    background: rgb(var(--color-green));
}

.slider.common-areas .slides div.img,
.slider.common-areas .slides div.img img {
    height: calc((570 / 1366) * 100vw);
}

.slider.common-areas .slides div.img {
    height: calc(((570 / 1366) * 100vw) + 12px);
    background: rgb(var(--color-white));
    border-bottom: solid 12px rgb(var(--color-white));
}

.slider.common-areas .slides div.img.inner-content {
    display: flex;
    justify-content: space-between;
}

.slider.common-areas .slides div.img.inner-content > div:nth-child(1) {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 35vw;
    padding-right: max(51px, (68 / 1366) * 100vw);
    padding-bottom: max(30px, (40 / 1366) * 100vw);
}

.slider.common-areas .slides div.img.inner-content img {
    width: 65vw;
}

.slider.common-areas .ctrl-arr {
    position: absolute;
    width: calc(100vw - ((280 / 1366) * 100vw));
    left: calc((140 / 1366) * 100vw);
    top: calc(((570 / 1366) * 100vw) / 2);
    /*mix-blend-mode: screen;*/
    transform: translateY(-50%);
    z-index: 30;
}

.slider.common-areas .ctrl-arr button {
    filter: drop-shadow(0 0 10px rgba(0,0,0,1));
}

.slider.common-areas .ctrl-arr button:after {
    border-color: rgba(var(--color-white),0.8);
}

.slider.common-areas .ctrl-arr button:hover:after {
    border-color: rgba(var(--color-white),1);
}

.slider.common-areas .ctrl-arr button:disabled {
    filter: none;
}

.slider.common-areas .ctrl-bts {
    top: calc((570 / 1366) * 100vw);
}

section .slider.common-areas h2.h2-border:after {
    border-color: rgb(var(--color-green));
}

.slider.common-areas div.text h2 {
    align-self: center;
}

.slider.common-areas div.text img {
    display: inline-block;
    width: auto;
    height: 2.5em;
    vertical-align: middle;
    margin-right: 0.5em;
    margin-top: -1.25em;
    margin-bottom: -1.25em;
}

@media screen and (max-width: 960px) {
	section .slider.common-areas h2.h2-border {
		width: calc(((320 / 768) * 100vw) - 60px);
		min-height: calc(((320 / 768) * 100vw) - 60px);
		padding: clamp(22px, (44 / 1366) * 100vw, 44px);
		padding-right: max(36px, (48 / 1366) * 100vw);
	}
	
	.slider.common-areas .slides div.img.inner-content > div:nth-child(1) {
		padding-right: min(120px, (30 / 768) * 100vw);
		padding-bottom: max(30px, (40 / 1366) * 100vw);
	}
}

@media screen and (max-width: 720px) {
	/*.slider.common-areas .slides {
		overflow: auto !important;
	}*/
	
	.slider.common-areas .slides div.img,
	.slider.common-areas .slides div.img img {
		height: 75vw;
	}

	.slider.common-areas .slides div.img {
		height: calc(75vw + 8px);
		border-bottom-width: 8px;
	}
	
	.slider.common-areas .slides div.img.inner-content {
		display: block;
	}
	
	.slider.common-areas .slides div.img.inner-content > div:nth-child(1) {
		display: block;
		position: absolute;
		width: auto;
		height: auto;
		left: calc((32 / 375) * 100vw);
		top: calc((24 / 375) * 100vw);
		padding: 0;
		/*padding-right: max(51px, (68 / 1366) * 100vw);
		padding-bottom: max(30px, (40 / 1366) * 100vw);*/
	}

	.slider.common-areas .slides div.img.inner-content img {
		width: 100vw;
	}
	
	.slider.common-areas .ctrl-bts {
        top: calc(75vw);
    }

	.slider.common-areas div.text img {
		display: block;
		margin: 0 auto;
	}
	
	section .slider.common-areas h2.h2-border {
		position: absolute;
		width: 55vw;
		min-height: 55vw;
		background: rgba(var(--color-black),0.35);
		color: rgb(var(--color-white));
		margin: 0;
        padding: calc((18 / 375) * 100vw);
	}
	
	section .slider.common-areas h2.h2-border:after {
    	content: none;
	}
	
	section .slider.common-areas h2.h2-border {
		font-size: calc((18 / 375) * 100vw);
	}
}


/*************************************
	units
 *************************************/


.slider.units {
	/*padding: max(60px, (80 / 1366) * 100vw) max(120px, (160 / 1366) * 100vw);*/
	/*padding: max(60px, (80 / 1366) * 100vw) max(168px, (225 / 1366) * 100vw);*/
	padding: 0 max(48px, (65 / 1366) * 100vw);
}

.slider.units .slides,
.slider.units .slides div.img,
.slider.units .slides div.img img {
    /*width: min(100vw - 240px, 100vw - ((320 / 1366) * 100vw));*/
    width: min(100vw - 336px, 100vw - ((450 / 1366) * 100vw));
}

.slider.units .slides div.img,
.slider.units .slides div.img img {
    /*height: calc((490 / 1366) * 100vw);*/
    /*height: max(100vw - 180px, (490 / 1366) * 100vw);*/
    height: min((100vw - 336px) * (490 / 916), (100vw - ((450 / 1366) * 100vw)) * (490 / 916));
}

.slider.units .ctrl-arr {
    position: absolute;
    /*width: calc(100vw - ((280 / 1366) * 100vw));
    left: calc((140 / 1366) * 100vw);*/
    width: 100%;
    left: 0;
    /*top: calc(((490 / 1366) * 100vw) / 2);*/
    /*top: max(60px + ((245 / 1366) * 100vw), ((80 / 1366) * 100vw) + ((245 / 1366) * 100vw));*/
    top: min(((100vw - 336px) * (490 / 916)) / 2, ((100vw - ((450 / 1366) * 100vw)) * (490 / 916)) / 2);
    transform: translateY(-50%);
    z-index: 30;
}

.slider.units .ctrl-bts {
    top: min((100vw - 336px) * (490 / 916), (100vw - ((450 / 1366) * 100vw)) * (490 / 916));
}

.slider.units div.text {
	width: 50%;
	margin-top: 1.2778em;
}

@media screen and (max-width: 960px) {
	.slider.units {
		/*padding: max(60px, (80 / 1366) * 100vw) max(120px, (160 / 1366) * 100vw);*/
		/*padding: min(60px, (30 / 768) * 100vw) min(120px, (60 / 768) * 100vw);*/
        padding: 0 min(120px, (60 / 768) * 100vw);
	}

	.slider.units .slides,
	.slider.units .slides div.img,
	.slider.units .slides div.img img {
		width: min(100vw - 240px, 100vw - ((320 / 1366) * 100vw));
	}
	
	.slider.units .slides div.img,
	.slider.units .slides div.img img {
		height: min((100vw - 240px) * (490 / 916), (100vw - ((320 / 1366) * 100vw)) * (490 / 916));
	}
	
	.slider.units .ctrl-arr {
		top: min(((100vw - 240px) * (490 / 916)) / 2, ((100vw - ((320 / 1366) * 100vw)) * (490 / 916)) / 2);
	}
    
    .slider.units .ctrl-bts {
        top: min((100vw - 240px) * (490 / 916), (100vw - ((320 / 1366) * 100vw)) * (490 / 916));
    }
	
	.slider.units div.text {
		width: 100%;
	}
}

@media screen and (max-width: 720px) {
	.slider.units {
		padding: 0 8px;
	}
	
	.slider.units .slides,
	.slider.units .slides div.img,
	.slider.units .slides div.img img {
		width: calc(100vw - 16px);
	}
	
	.slider.units .slides div.img,
	.slider.units .slides div.img img {
		/*height: calc((100vw - 16px) * (490 / 916));*/
		height: calc(((100vw - 16px) * (490 / 916)) * 1.25);
	}
	
	.slider.units .ctrl-bts {
		/*top: calc((100vw - 16px) * (490 / 916));*/
		top: calc(((100vw - 16px) * (490 / 916)) * 1.25);
	}
	
	.slider.units div.text {
		margin-top: 0;
		padding: calc(((24 / 375) * 100vw) - 8px) calc(((32 / 375) * 100vw) - 8px);
	}
}