/********************************/
/* PRIMARY
/********************************/

#primary {
	direction: rtl;
	-webkit-transition: all 0.8s cubic-bezier(0.76, 0, 0.24, 1);
			transition: all 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}
#page-header.nav-open + #primary {
	-webkit-transform: translateX(-160px);
			transform: translateX(-160px);
}



/* Page sections */
.page-section {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.page-section.screen-section {
	height: 100vh;
	height: 100dvh;
}
@media (min-width : 1200px) {
	.page-section {
		flex-direction: row;
	}
}
/***/



/* Section BG */
.section-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
/***/


/* Section wrapper */
.section-wrapper {
	width: 100%;
	display: flex;
}
.section-wrapper.has-padding {
	padding: clamp(15px, 3vw, 56px) clamp(15px, 6vw, 112px);
}
@media (max-width : 1200px) {
	.section-wrapper {	
		flex-wrap: wrap;
	}
}
/***/


/* Section main */
.section-main {
	position: relative;
	z-index: 9;
	flex-basis: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1em, 1.25vw, 48px) 0; 
}
.section-main.animate {
	opacity: 0;
	-webkit-transition: all 0.6s ease;
			transition: all 0.6s ease;
}
.section-main.animated {
	opacity: 1;
}

@media (min-width : 1200px) {
	.section-main {
		padding: clamp(1em, 1.25vw, 48px) clamp(1em, 5vw, 96px); 
	}
	.section-main.to-left {
		flex-basis: 50%;
		margin-inline-start: auto;
	}
	.section-main.to-right {
		flex-basis: 50%;
		margin-inline-end: auto;
	}
	.floating-main {
		-webkit-transform: none;
				transform: none;
		-webkit-transition: -webkit-transform 1s cubic-bezier(0.83, 0, 0.17, 1);
				transition: 		transform 1s cubic-bezier(0.83, 0, 0.17, 1);
	}
	.floating-main.to-left.closed {
		-webkit-transform: translateX(-101%);
				transform: translateX(-101%);	
	}
	.floating-main.to-right.closed {
		-webkit-transform: translateX(101%);
				transform: translateX(101%);	
	}
}

.section-content {
}
.section-more-content {
	margin-top: 75px;
}
/***/




/* Section side */
.section-side {
	flex-basis: 100%;
	max-width: 100%;
}
.section-side-bg {
	aspect-ratio: 1;
	height: 100%;
}
.section-side-bg.fader img {
	width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-side-bg.animate {
	opacity: 0;
	-webkit-transform: scale(0.75);
			transform: scale(0.75);
	-webkit-transition: all 1.2s ease;
			transition: all 1.2s ease;		
}
.section-side-bg.animated {
	opacity: 1;
	-webkit-transform: none;
			transform: none;
}
/***/



.section-img {
}
.section-img > img {
	width: 100%;
	height: auto;
}



/* Section elements */
.section-logo { 
    margin-block: 2em;
}
.section-logo.animate {
	opacity: 0;
	-webkit-transform: scale(0.75);
			transform: scale(0.75);
	-webkit-transition: all 0.6s ease;
			transition: all 0.6s ease;	
}
.section-logo.animated {
	opacity: 1;
	-webkit-transform: none;
			transform: none;
}

.section-breadcrumbs {
	margin-block: 2rem;	
	font-size: 1.25em;
}
.section-breadcrumbs.animate {
	opacity: 0;
	-webkit-transform: translateY(-1em);
			transform: translateY(-1em);
	-webkit-transition: all 0.6s ease;
			transition: all 0.6s ease;	
}
.section-breadcrumbs.animated {
	opacity: 1;
	-webkit-transform: none;
			transform: none;
}

.section-title {
	margin-block: 2rem;
	text-wrap: balance;
}
.section-title.animate {
	opacity: 0;
	-webkit-transform: translateY(1em);
			transform: translateY(1em);
	-webkit-transition: all 0.6s ease;
			transition: all 0.6s ease;	
}
.section-title.animated {
	opacity: 1;
	-webkit-transform: none;
			transform: none;
}

.section-text {
}
.section-text.animate {
	opacity: 0;
	-webkit-transform: translateY(1em);
			transform: translateY(1em);
	-webkit-transition: all 0.6s ease;
			transition: all 0.6s ease;	
}
.section-text.animated {
	opacity: 1;
	-webkit-transform: none;
			transform: none;
}
/***/



/* Section toggle button */
.section-toggle-btn {
	position: absolute;
	z-index: 99;
	top: 10px;
	right: 20px;
	min-width: 56px;
	width: max-content;
	height: 56px;
	outline: 0;
	margin: min(3vw, 48px);
	border: 0;
	border-radius: 6px;
	padding: 16px;
	background: transparent;
	font: inherit;
	cursor: pointer;
	-webkit-transition: all 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0s, color 0.4s ease 0s, background 0.4s ease 0s;
			transition: all 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0s, color 0.4s ease 0s, background 0.4s ease 0s;
}

.section-toggle-btn > label {
	cursor: pointer;
	margin-inline-start: 40px;
	display: none;
}
.floating-main.closed .section-toggle-btn > label {
	display: initial;
}

.floating-main.closed .section-toggle-btn {
	background-color: inherit;
}
.floating-main.to-left.closed .section-toggle-btn {
	left: 100%;
	right: auto;
}
.floating-main.to-right.closed .section-toggle-btn {
	right: 100%;
	left: auto;
}

.section-toggle-btn::before,
.section-toggle-btn::after {
	content: '';
	display: block;
	position: absolute;
	top: 26px;
	width: 28px;
	border-top: 3px solid;
	box-shadow: 0 1px 4px rgba(0,0,0,0.5);
	-webkit-transition: all 0.4s ease;
			transition: all 0.4s ease;
}
.section-toggle-btn::before {
	transform: rotateZ(45deg);
}
.section-toggle-btn::after {
	transform: rotateZ(-45deg);
}
.section-toggle-btn.animate::before,
.section-toggle-btn.animate::after {
	opacity: 0;
	transform: none;
}
.section-toggle-btn.animated::before {
	opacity: 1;
	transform: rotateZ(45deg);
}
.section-toggle-btn.animated::after {
	opacity: 1;
	transform: rotateZ(-45deg);
}
.floating-main.closed .section-toggle-btn:before {
	transform: rotateZ(270deg);
}
.floating-main.closed .section-toggle-btn:after {
	transform: rotateZ(180deg);
}
/***/



/* Section breadcrumbs */
.breadcrumbs {
	font-size: 1.3333em;
}
.breadcrumbs.animate {
	opacity: 0;
	-webkit-transition: all 0.8s ease;
			transition: all 0.8s ease;	
}
.breadcrumbs.animated {
	opacity: 1;
}
.breadcrumbs > span.animate {
	display: inline-block;
	opacity: 0;
	-webkit-transform: translateY(-1em);
			transform: translateY(-1em);	
	-webkit-transition: all 0.8s ease;
			transition: all 0.8s ease;	
}
.breadcrumbs > span.animated {
	opacity: 1;
	-webkit-transform: none;
			transform: none;	
}
/***/







/* Section deco */
.section-deco-line {
	flex-grow: 0; 
	display: inline-block;
	width: 8em;
	height: 0;
	margin-top: auto;
	border-bottom: 4px solid;
	padding-top: 80px;
}
.section-deco-line.animate {
	width: 0;
	-webkit-transition: width 0.8s cubic-bezier(0.83, 0, 0.17, 1);
			transition: width 0.8s cubic-bezier(0.83, 0, 0.17, 1);
}
.section-deco-line.animated {
	width: 8em;
}

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




/********************************************************************************/

