/********************************/
/* CUSTOM : Elements
/********************************/


/*
@media (hover: none) --- to test for touch devices
*/




/* CTA element */
.cta-element {
	padding-block: clamp(1em,4vw,96px); 
}
.cta-part {
	min-height: 1px;
}
.cta-heading {
	margin-block: 1em;
}
.cta-heading h2 {
	margin: 0;
}
.cta-text { 
	border-block: 1px solid; 
	padding-block: 1em;
}
@media (min-width : 1200px) { 
	.cta-element {
		display: flex; 
		flex-wrap: wrap;
		gap: var(--gap);
		align-items: center;
	}
	.cta-part {
		flex: calc(50% - var(--gap));
	}
	.cta-heading {
	}
	.cta-text {
		padding-inline-end: calc(128px + var(--gap));
		font-size: 1.333333em;
	}
}
/***/



/* Story element */
.story-element {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--gap)/2) var(--gap);
}
.story-part {
	flex: 100%;
}
.story-media {
	order: -1;
}
.story-media.parallax-container {
	aspect-ratio: 1.166666;
}
.story-media.fixed-aspect-ratio {
	aspect-ratio: 1.166666;
}

.story-media figure {
}
.story-media.fixed-aspect-ratio figure {
	height: 100%;
}

.story-media img {
	display: block;
	width: 100%;
}

.story-text {
}
.story-text ~ .story-text {
	margin-top: calc(-1 * var(--gap)/2);
}
.story-heading {
	/*margin-block: 1em;*/
	padding-block: clamp(1em, 3vw, 96px);
}
.story-content-container {
	padding-bottom: 1em;
    border-bottom: 1px solid;
}
.story-content-wrapper {
	border-top: 1px solid;
	padding-top: 1em;
}
.story-content {
	padding-block: 0.5em;
}

@media (min-width : 1200px) { 
	.story-element {
	}
	.story-part { 
		flex: calc(50% - clamp(2em, 5vw, 128px));
		min-height: 1px;
	}
	.story-media {
		order: unset;
	}
	.story-media figure { 
	}
	.story-media img {
		height: 100%;
		object-fit: cover;
	}
	.story-text {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: clamp(2em, 5vw, 128px); 
	}
	.story-heading {
		flex: 0;
		align-content: end;
		min-height: 50%;
		margin: 0;
		padding-inline-end: calc(128px + var(--gutter)); 
		transition: min-height 0.4s ease;
	}
	/*
	.story-heading:has(+ .story-body.open) {
		min-height: 0;
	}
	*/
	.story-body {
		flex: 1;
		display: flex;
		align-items: end; 
		gap: var(--gutter); 
	}
	
	.story-content-container {
		flex: 1;
		height: 100%;
		font-size: 1.166666em;
	}
	.story-content-frame {
		position: relative;
		height: 100%;
		overflow: hidden;
	}
	.story-content-frame:after {
		position: absolute;
		right: 0;
		bottom: 0;
		content: ' ... ';
		transition: right 0.4s ease 0.4s;
	}
	.story-body.open .story-content-frame:after {
		right: -3em;
		transition: none;
	}
	.story-content-wrapper {
		display: flex;
		flex-direction: column;
		position: absolute;
		left: 0;
		right: -5px;
		max-height: 100%;
		bottom: 0;
		transform: translateY(calc(100% - 6em));
		transition: transform 0.4s ease;
	}
	/*
	.story-content-wrapper:has(.fancy-font) {
		transform: translateY(calc(100% - 5.75em));
	}
	*/
	.story-body.open .story-content-wrapper {
		transform: none;
		overflow-y: auto;
	}
	.story-content {
		height: 100%;
		overflow: hidden;
		scrollbar-gutter: stable;
		padding-right: var(--gutter);
	}
	.story-body.open .story-content {
		overflow-y: auto;
	}
	
	.story-content-readmore {
		display: flex;
		width: 128px;
		overflow: hidden;
		border: 0;
		padding: 0.5em 0;
		font-size: 0.888888em;
		white-space: nowrap;
		background: var(--text-color);
		color: var(--bg-color);
		cursor: pointer;
		transition: all 0.2s ease;
	}
	.story-content-readmore:hover {
		background: var(--fancy-color);
		color: var(--text-color);
	}
	.story-content-readmore > span {
		display: block;
		flex: 1 0 100%;
		padding-inline: 1em;
		transition: all 0.2s ease;
	} 
	.story-body.open .story-content-readmore > span {
		transform: translateX(-100%);
	}
	
}
/***/



/* Banner element */
.banner-element {
	position: relative;
	display: flex;
	width: 100%;
	background-color: var(--grey-color);
}
.large-banner { 
	aspect-ratio: 1920/960;
	min-height: 50vh;
	max-height: calc(100vh - 128px);
}
.medium-banner { 
	aspect-ratio: 1920/640;
	min-height: 33vh;
}
.banner-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.banner-bg img:not(.parallax-img) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.banner-bg img.parallax-img {
}

/*
@media (orientation : portrait) { 
	.large-banner {
		min-height: 40vh;
	}
}

@media (orientation : landscape) { 
	.large-banner {
		min-height: 20vh;
	}
}
*/




/*
.small-banner,
.medium-banner,
.large-banner {
	min-height: 240px;
}
.fullscreen-banner {
	min-height: 100vh;
}

@media (min-width : 1200px) { 
    .medium-banner {
    	min-height: 360px;
    }
    .large-banner {
    	min-height: 480px;
    }
}
.banner-bg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
}
.banner-bg.shadow-bg:before, 
.banner-bg.soft-hash-bg:before, 
.banner-bg.hard-hash-bg:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
}	
.banner-bg.shadow-bg:before {
	background: rgba(0,0,0,0.5);
}
.banner-bg.soft-hash-bg:before {
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIBJREFUeNp0zksOwiAQgOE5gqY1uqjxGgRCIIRLuZtjAuHNQVAWNtXWxSxmvkzyg/f+2nuH30kpTYSQJ/zBmVKKxpjHDnPOM2MMrbX3sX9hKWXinKNzbvncVqy1noUQ+G66bZ9WlFJiCGEXDK21k1IKY4yXo2DQWuOoPsIR/BJgAAcarFP/XtuqAAAAAElFTkSuQmCC) 0 0 repeat;
}
.banner-bg.hard-hash-bg:before {
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAChJREFUeNpiaGhoYABhIPgPohmhHDAAsv8zQmUYYYJMIA5IBiYAEGAAZX4QAxCbGh4AAAAASUVORK5CYII=) 0 0 repeat;
}
.banner-bg-deco {
	position: absolute;
	bottom: -6px;
	left: calc(50% - 6px);
}
.banner-bg-deco > span {
	display: block;
	width: 12px;
	height: 12px;
	margin-top: 15px;
	background-color: currentColor;
	-webkit-transform: rotateZ(45deg);
			transform: rotateZ(45deg);
}
.banner-bg img,
.banner-bg video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}	
.banner-content {
	position: relative;
	flex-grow: 1;
	text-shadow: 1px 2px 4px rgba(0,0,0,0.7);
}
*/










/* accordion Gallery */
.accordion-gallery-element {
	display: flex;
	gap: calc(var(--gap) / 2);
}
.accordion-gallery-item {
	position: relative;
	flex: 1;
	overflow: hidden;
	transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
	transform: translate3d(0,0,0);
	will-change: flex, filter;
	cursor: pointer;
	filter: grayscale(1);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.accordion-gallery-item:hover {
	filter: grayscale(0.25);
}
.accordion-gallery-item:focus {
	flex: 0 0 50%;
	filter: grayscale(0);
}
.accordion-gallery-item figure {
	height: 100%;
}
.accordion-gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.accordion-gallery-item figcaption {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	margin: 1em;
	border: 1px solid;
	box-shadow: 1px 2px 4px rgba(0,0,0,0.3);
	padding: 0.75em;
	background: rgba(254, 252, 248, 0.8);
	opacity: 0;
	transition: all 0.2s ease 0s;
}
.accordion-gallery-item:focus figcaption {
	opacity: 1;
	transition: all 0.2s ease 0.4s;
}
.accordion-gallery-item .open-lightbox {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.accordion-gallery-item:focus .open-lightbox {
	z-index: 2;
}

@media (max-width : 1199px) { 
	.accordion-gallery-element {
		min-height: calc(100vh - 128px);
		flex-direction: column;
	}
	.accordion-gallery-item {
		aspect-ratio: 16/9;
		transition: all 0.6s cubic-bezier(0.65, 0, 0.35, 1);
	}
	.accordion-gallery-item:focus {
		aspect-ratio: 1;
	}
	.accordion-gallery-item figcaption {
		font-size: 0.888888em;
	}
}

@media (min-width : 1200px) { 
	.accordion-gallery-element {
		/*aspect-ratio: 2/1;*/
		height: calc(100vh - 128px);
	}
}

/***/




/* Post list / archive element */
.post-list-element {
	margin-block: 2em;
}
.post-list-item {
	margin-block: 1em;
	border-top: 1px solid;
	padding-block: 1em;
}
.post-list-item:last-child {
	border-bottom: 1px solid;
}
.post-list-item h4 {
	margin: 0 0 1em 0;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.3333;
}
.post-readmore {
	display: none;
}
@media (min-width : 1200px) {
	.post-list-element {
		display: flex;
		flex-wrap: wrap;
		gap: var(--gap) calc(var(--gap) * 2);
	}
	.post-list-item {
		flex: 100%; 
		border-block: 1px solid;
	}
	.post-wrapper {
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 1.166666em;
		min-height: 6.9em;
	}
	.post-wrapper .extensible-container {
		will-change: height;
	}
	.post-readmore {
		display: block;
		align-content: end;
	}
	.post-readmore > button {
		display: flex;
		width: 128px;
		overflow: clip;
		border: 0;
		margin-top: 1em;
		padding: 0.5em;
		font-size: 0.888888em;
		white-space: nowrap;
		background: var(--text-color);
		color: var(--bg-color);
		cursor: pointer;
		transition: all 0.2s ease;
	}
	.post-readmore > button:hover {
		background: var(--fancy-color);
		color: var(--text-color);
	}
	/*
	.extensible-element:not(.extended) .post-readmore > span:last-child,
	.extensible-element.extended .post-readmore > span:first-child {
		display: none;
	}
	*/

	.post-readmore > button > span {
		display: block;
		flex: 1 0 100%;
		padding-inline: 1em;
		transition: transform 0.2s ease 0.2s;
	} 
	.extensible-element.extended .post-readmore > button > span {
		transform: translateX(-100%);
	}
	
	.post-list-element {
		align-items: flex-start;
	}
	.post-list-item {
		display: flex;
		gap: 1em;
		flex: calc(50% - var(--gutter));
		min-height: 1px;
	}
	.post-wrapper {
	}
}
/***/


/* Specs element */
.specs-element {
	
}
.specs-list {
	display: flex; 
	flex-wrap: wrap;
	gap: 2em;
	justify-content: space-between;
}
.specs-list-item {
	flex: 1 0 auto;
	width: 384px;
	max-width: 100%;
	padding-inline-end: 5vw;
}
.specs-icon {
	margin-top: 1em;
}
.specs-icon img {
	max-width: 50%;
}
.specs-title {
	margin-block: 1em;
	font-weight: bold;
}
.specs-excerpt {
	margin-bottom: 2em;
}

@media (min-width : 1200px) {
	.specs-element {
		font-size: 1.166666em;	
	}
}
/***/




/* Contact form element */
.contact-form-element {
}
.contact-form-element h3 {
	margin-bottom: 1em;
}
.contact-form-element .form-field {
	margin-bottom: 2em;
}
.contact-form-element .submit-field {
	max-width: 444px;
	margin: 1em auto;
}

.contact-form-element input[type=text], 
.contact-form-element input[type=email] {
	border: 0;
	border-bottom: 1px solid;
	padding: 0.25em 0;
	background: transparent;
}
.contact-form-element input[type=submit] {
	width: 100%;
	border: 0;
	padding: 0.75em 1.5em;
	background: var(--fancy-color);
	color: inherit;
	font-family: var(--heading-font);
}
.contact-form-element input[type=submit]:hover {
	background: var(--text-color);
	color: var(--light-color);
}

.contact-form-element .form-field-bullet {
	content: '';
	display: block;
	width: 0;
	height: 0;
	position: absolute;
    top: 0.5em;
    inset-inline-end: -1em;
	border-block: 0.5em solid transparent;
	border-inline-start: 0;
	border-inline-end: 0.5em solid var(--fancy-color);
	opacity: 0;
	-webkit-transition: all 0.2s ease;
			transition: all 0.2s ease;
}
.contact-form-element input:focus ~ .form-field-bullet {
	inset-inline-end: 0;
	opacity: 1;
}

@media (min-width : 1200px) {
	
}
/***/








/* Fancy list */
.fancy-ul {
	padding-inline-start: 1.75em;
}
.fancy-ul > li {
	margin-block: 0.5em;
}
.fancy-ul > li:before {
	content: '';
	display: inline-block;
	vertical-align: bottom;
	width: round(1em,1px);
	height: round(1em,1px);
	margin-inline-start: -1.25em;
	margin-inline-end: 0.25em;
	background: var(--text-color);
	mask: radial-gradient(#0000 69%, #000 72%) 10000% 10000%/99.5% 99.5%;
	font-size: 1.5em;
}
/***/




/* Gallery swiper */
.thumbs-gallery {
	position: relative;
	max-width: 1320px;
	margin: auto;
}
.thumbs-gallery .swiper-slide {
	width: fit-content;
	max-width: 960px;
	overflow: hidden;
	padding-inline: clamp(2px, 1vw, 16px);
	opacity: 0.5;
	-webkit-transition: opacity 0.35s ease 0.65s;
			transition: opacity 0.35s ease 0.65s;
}
.thumbs-gallery .swiper-slide-active {
	opacity: 1;
	cursor: pointer;
}
.thumbs-gallery .swiper-slide > img {
	display: block;
	width: 100%;
}

.thumbs-gallery .swiper-button-prev,
.thumbs-gallery .swiper-button-next {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	-webkit-transition: all 0.2s ease;
			transition: all 0.2s ease;
}
.thumbs-gallery .swiper-button-prev {
	background: var(--fancy-color) url(../img/arrow-right.png) 0% 50% no-repeat;
	background-size: min(47px, 75%) auto;
}
.thumbs-gallery .swiper-button-next {
	background: var(--fancy-color) url(../img/arrow-left.png) 100% 50% no-repeat;
	background-size: min(47px, 75%) auto;
}
.thumbs-gallery .swiper-button-prev:hover {
	background-position: 50% 50%;
}
.thumbs-gallery .swiper-button-next:hover {
	background-position: 50% 50%;
}
.thumbs-gallery .swiper-button-prev:after,
.thumbs-gallery .swiper-button-next:after {
	content: none;
}
.thumbs-gallery .swiper-pagination {
	bottom: -30px;
}
.thumbs-gallery .swiper-pagination-bullet-active {
	background-color: var(--hot-color);
}


/*
.swiper-slide-caption {
	position: absolute;
	bottom: 0;
	left: clamp(2px, 1vw, 16px);
	right: clamp(2px, 1vw, 16px);
	padding: 1em;
	font-size: 1.166667;
	background: rgba(0,0,0,0.5);
	color: #fff;
	text-align: center;
	-webkit-transform: translateY(100%);
			transform: translateY(100%);
	-webkit-transition: all 0.4s ease 0s;
			transition: all 0.4s ease 0s;
}
.swiper-slide-active .swiper-slide-caption {
	-webkit-transform: none;
			transform: none;	
	-webkit-transition: all 0.4s ease 1s;
			transition: all 0.4s ease 1s;
}
*/
@media (min-width : 1200px) { 
	.thumbs-gallery .swiper-button-prev,
	.thumbs-gallery .swiper-button-next {
		width: 64px;
		height: 64px;
	}
}
/***/





/********************************/
/* CUSTOM : Sections
/********************************/


/* Home section */
.home-video-container {
	height: calc(100vh - 64px - 5vh);	
}
.home-video-container > video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width : 1200px) {
	.home-video-container {
		height: calc(100vh - 96px - 2em);	
	}
}
/***/



/* Location section */
#map .map-canvas {
	height: calc(100vh - 64px - 5vh);
}
@media (min-width : 1200px) {
	#map .map-canvas {
		height: calc(100vh - 96px - 2em);	
	}
}
/***/



/* Gallery section */
/*
#gallery-section {
}
#main-gallery.inviewer .swiper-container {
	opacity: 0;
	-webkit-transition: all 2s ease;
			transition: all 2s ease;
}
#main-gallery.inviewer.isinview .swiper-container {
	opacity: 1;
}
*/
@media (min-width : 1200px) { 
	
}
/***/



/* Company section */
#company-section {
	
}
@media (min-width : 1200px) {
	#company-section .section-main {
		padding-inline-end: 60px;
	}
	#company-section .section-main-content {
		position: relative;
		z-index: 5;
		margin-inline-end: -60px;
		border-radius: 1.333333em;
	}
	#company-section .section-side-img {
		margin-bottom: -60px;
		margin-inline-start: -60px;
		flex-grow: 1;
	}
}
/***/



/* Contact section */
/*
.form-container {
}
.form-field {
	margin-block: 0.75em;
}
input[type=text], 
input[type=email], 
input[type=password], 
textarea {
	padding: 0.25em 1em;
	border-bottom: 1px solid;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus, 
textarea:focus {
	border-inline-end: 1px solid;
}
input[type=submit] {
	width: 100%;
	border: 1px solid var(--primary-color);
	border-radius: 0.333333em;
	background: var(--darker-color);
}
input[type=submit]:hover {
	background: var(--hot-color);
}
input[type=checkbox] { 
	border-radius: 2px;
	background: var(--text-color);
	color: var(--bg-color);
}

.form-return {
	line-height: 1em;
	font-size: min(3em,4.8rem);
	font-weight: 100;
}
*/
/***/