/************************************************************************************************************
***** RESET ************************************************************************************************
**************************************************************************************************************/
*,
*:before,
*:after{
	margin: 0;
	padding: 0;
	border:0;
	box-sizing: border-box;
}

:focus,
*:focus,
a:focus,
input:focus,
textarea:focus,
select:focus,
button:focus{outline: none;}

a,
a:hover,
a:focus,
a:visited{
	text-decoration: none;
	color: inherit;
}

p:empty{display: none;}

h1,.h1,.fs-900,
h2,.h2,.fs-800,
h3,.h3,.fs-700,
h4,.h4,.fs-600,
h5,.h5,.fs-500,
h6,.h6,.fs-400{
	width: 100%;
	margin: 0;
	display: block;
	word-break: break-word;
}

ul{list-style: none;}

img,
picture{max-width: 100%;display: flex;}
button{background: transparent;cursor: pointer;}

mark {
	--bg-height: 40%;
	all: unset;
	position: relative;
	background-image: linear-gradient(var(--color-accent), var(--color-accent));
	background-position: 0% 100%;
	background-repeat: no-repeat;
	background-size: 0 var(--bg-height);
	animation: mark_highlight 800ms 1 ease-out;
	animation-fill-mode: forwards;
	animation-play-state: paused;
}

@keyframes mark_highlight {to {background-size: 100% var(--bg-height);}}


/* Remove Input[Number] Arrows */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
input[type=number] {-moz-appearance:textfield;}

textarea{resize: none;}

address{font-style: normal;}


/*************************************************************************************************************
***** GENERAL ************************************************************************************************
**************************************************************************************************************/
html,body{background-color: white;scroll-behavior: smooth;}

body {
	font-family: var(--ff-sans, sans-serif);
	font-size: var(--fs-400, 18px);
	color: var(--color-text, #000000);
	background-color: var(--color-background, #FFFFFF);
	background-color: #F5F5F5;
	background-image: url('../images/ogust-bgrnd.jpg');
	background-size: 300px 200px;
	line-height: var(--lh-400, 1.60);
	min-height: 100vh;
}

main section.p-0:first-child{padding-block:0px;}
main > section:only-child {padding-block: var(--padding-sectionY-double, 160px);}

section{
	position: relative;
	padding: var(--padding-sectionY, 80px) var(--padding-pageX, 50px);
}

.dev{outline: 1px solid red;}


/*************************************************************************************************************
***** CORE ***************************************************************************************************
**************************************************************************************************************/
/**********/
/* Common */
/**********/
header,
footer{
	padding-block: calc(var(--padding) * 1.5); /* 30px */
	padding-inline: var(--padding-pageX, 50px);
}

/**********/
/* Header */
/**********/
header{
	width: 100%;
	position: fixed;
	z-index: 2000;
	top: 0;
	left: 0;
	background-color: transparent;
	padding-block: calc(var(--padding) * 2); /* 40px */
	transition: var(--trans);
}

header{pointer-events: none;}
header a,
header button{pointer-events: all;}

header .header-group{display: flex;justify-content: space-between;align-items: center;}
header .header-part{width:100%;position: relative;display: flex;gap:var(--gap, 16px);align-items: center;}
header .header-part--left{justify-content: flex-start;}
header .header-part--center{justify-content: center;}
header .header-part--right{justify-content: flex-end;}
header .header-part--right{align-items: center;}

/* Header Navigation */
header #page-navigation{
	display: flex;
	align-items: center;
	justify-content: center;
	gap:var(--gap-500,24px);
}

header #navigation-icon{
	width: 40px;
	height: 26px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
header #navigation-icon span{--top: 0px;--space: 6px;--width: 40px;--height: 2px;}
header #navigation-icon span{display: block;position: absolute;width: var(--width, 20px);height: var(--height);background: var(--color-primary);border-radius: 50px;opacity: 1;left: 50%;-webkit-transform: translateX(-50%) rotate(0deg);-moz-transform: translateX(-50%) rotate(0deg);-o-transform: translateX(-50%) rotate(0deg);transform: translateX(-50%) rotate(0deg);-webkit-transition: var(--trans);-moz-transition: var(--trans);-o-transition: var(--trans);transition: var(--trans);}
header #navigation-icon span:nth-child(1) {top: calc(var(--top) + (var(--space) + var(--height)) * 0);}
header #navigation-icon span:nth-child(2) {display: none;}
/*header #navigation-icon span:nth-child(2) {top: calc(var(--top) + (var(--space) + var(--height)) * 1);}*/
header #navigation-icon span:nth-child(3) {top: calc(var(--top) + (var(--space) + var(--height)) * 2);}

header.open #navigation-icon span{--top: 8px;}
header.open #navigation-icon span:nth-child(1),
header.open #navigation-icon span:nth-child(3) {left: 50%;top: calc(var(--top) * 1.5);}
/*header.open #navigation-icon span:nth-child(2) {opacity: 0;left: 60px;}*/
header.open #navigation-icon span:nth-child(1) {--transform: translateX(-50%) rotate(135deg);-webkit-transform: var(--transform);-moz-transform: var(--transform);-o-transform: var(--transform);transform: var(--transform);}
header.open #navigation-icon span:nth-child(3) {--transform: translateX(-50%) rotate(-135deg);-webkit-transform: var(--transform);-moz-transform: var(--transform);-o-transform: var(--transform);transform: var(--transform);}


/* Header Sticky */
header#site-header.sticky{
	position: fixed;
	top: 0;
	padding-block:var(--gap, 16px);
/*	background-color: white;*/
/*	box-shadow: 0 0 10px #0000001A;*/
}
header#site-header.sticky .header-logo{transform: scale(0.8);}



/* This Project */
header .header-logo{opacity: 1;transition:var(--trans)}

header.open,
header.closing{z-index: 2001;}
header.open .header-logo,
header.closing .header-logo{opacity: 0;pointer-events: none;}

@media(max-width:767px){

}





/**********/
/* Footer */
/**********/
footer{padding-top: var(--padding-sectionY-double, 160px);}
footer #footer-row--top{}
footer #footer-row--middle,
footer #footer-row--bottom{margin-top: var(--gap-1000, 96px);}

footer address .address__header{margin-bottom: var(--gap-500, 24px);}
footer address a.btn-mark{font-size: unset;line-height: unset;text-transform: none;letter-spacing: 0;margin-left: calc(-1 * var(--gap-200, 8px));}

body.home footer .footer-logo.sun{background-image: none;}

@media(max-width:767px){
	footer{padding-top: var(--padding-sectionY, 50px);}
	footer #footer-row--middle{margin-top: var(--gap-700, 48px);}
	footer #footer-row--bottom{margin-top: var(--gap-500, 24px);}
	footer #footer-row--bottom .flex{justify-content: center;}

	footer .footer-logo{width: 80%;height: auto;min-height: 100px;padding: var(--padding-sectionX, 20px);}
	footer .footer-logo img{width: 70%;margin-inline: auto;}
}




/*************************************************************************************************************
***** ASIDE **************************************************************************************************
**************************************************************************************************************/
aside .backdrop{position: fixed;inset: 0;background-color: #23353733;z-index: -1;opacity: 1;}

/*******************/
/* Window **********/
/*******************/
aside.window{}
aside.window .window__content{}
aside.window .window__header,
aside.window .window__body,
aside.window .window__footer{}

/*******************/
/* Modal ***********/
/*******************/
aside.modal{
	--modal-header: 60px;
	--padding-block: 30px;
	--trans-duration: 250ms;
}
aside.modal{position: fixed;inset: 0;z-index: 2000;opacity: 0;transform: translateX(101%);pointer-events: none;transition: opacity var(--trans-duration), transform 0s var(--trans-duration);}
aside.modal .modal__content{}
aside.modal .modal__header,
aside.modal .modal__body,
aside.modal .modal__footer{padding-inline:var(--padding-pageX, 50px);}


/****************************/
/* Window - Navigation Menu */
/****************************/
aside#navigation-menu{position: fixed;z-index: 2000;top:0;right: 0;width: 100%;height: 100%;min-height:100vh;min-height:100svh;opacity: 1;transition: none;transform: translateX(101%);}
aside#navigation-menu .window__content{position: absolute;right: 0;width: 100%;height: 100%;overflow-y: auto;background-color: white;color: var(--color-primary, #000000);display: flex;flex-direction: column;justify-content: space-between;}
aside#navigation-menu .window__content .window__body{height: 100%;}

/* This Site */
aside#navigation-menu #navigation-main{
	width: 100%;
	position: relative;
	padding-inline: var(--padding-sectionX, 50px);
	padding-top: var(--padding-sectionY-double, 160px);
	padding-bottom: 60px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: var(--gap-700, 48px);
}


aside#navigation-menu .window__content{background-color: var(--color-accent, #FDB52B);}

aside#navigation-menu .navigation-glyph{display: none;}
aside#navigation-menu .navigation-image{height: 100%;}
aside#navigation-menu .navigation-image picture{position: relative;width:100%;height: 100%;max-height: 70vh;max-height: 70svh;}
aside#navigation-menu .navigation-image img{position: absolute;inset:0;width: 100%;height: 100%;object-fit: cover;}


/* Navigation Menu - Right Column */
/* Demo Menu */
aside#navigation-menu #navigation-main .navigation-menu ul.menu > li.menu-item{border-bottom: 1px solid;padding-block: var(--gap-500, 24px);}
aside#navigation-menu #navigation-main .navigation-menu ul.menu li.menu-item a{font-size: var(--fs-700, 42px);text-transform: uppercase;}

aside#navigation-menu #navigation-main .navigation-menu ul.sub-menu li.menu-item{padding-left: var(--gap-800, 64px);}
aside#navigation-menu #navigation-main .navigation-menu ul.sub-menu li.menu-item a{font-size: var(--fs-600, 26px);text-transform: uppercase;color: var(--color-accent-alt, #8F6913);transition: var(--trans)}
aside#navigation-menu #navigation-main .navigation-menu ul.sub-menu li.menu-item a:hover,
aside#navigation-menu #navigation-main .navigation-menu ul.sub-menu li.menu-item a:focus,
aside#navigation-menu #navigation-main .navigation-menu ul.sub-menu li.menu-item a:active,
aside#navigation-menu #navigation-main .navigation-menu ul.sub-menu li.menu-item.current-item a{color: var(--color-text, #000000);}


/* Navigation Menu - Footer */
aside#navigation-menu .window__footer .policy-menu{height:100%;display: flex;align-items: flex-end;}
aside#navigation-menu .window__footer .policy-menu ul{display: flex;gap: var(--gap-800, 64px);flex-wrap:wrap;}
aside#navigation-menu .window__footer .policy-menu ul li{flex-shrink:0;}
aside#navigation-menu .window__footer .policy-menu a{font-family: var(--ff-sans);font-size: var(--fs-400, 18px);text-transform: uppercase;}
aside#navigation-menu .window__footer .navigation-cta{display: flex;justify-content: flex-end;align-items: center;}
aside#navigation-menu .window__footer .navigation-cta a:hover,
aside#navigation-menu .window__footer .navigation-cta a:focus{background-color: var(--color-primary, #000000);}

@media(min-width:1025px){
	aside#navigation-menu .navigation-glyph{display:block;position: absolute;top: 0;left: 0;width: 20%;aspect-ratio: 1;transform: translate(-50%, -50%);z-index: 2;}
	aside#navigation-menu .navigation-image{padding-right: calc(var(--container-grid-column, 100px) + var(--container-grid-gap, 20px));}
}

@media(max-width:1024px){
	aside#navigation-menu #navigation-main{padding-block: var(--padding-sectionY, 50px);gap: var(--gap-500, 24px);}
	
	
	
	aside#navigation-menu #navigation-main .navigation-menu ul.menu > li.menu-item{padding-block: var(--gap-300, 12px);}
	aside#navigation-menu #navigation-main .navigation-menu ul.sub-menu li.menu-item{
		margin-block: var(--gap-300, 12px);
		padding-left: var(--gap-500, 24px);
	}
	
	aside#navigation-menu .window__body .grid-column:first-child{display:none;}
	aside#navigation-menu .window__body .navigation-image{display: none;}
	
	aside#navigation-menu .window__footer{gap: var(--gap-500,24px)}
	aside#navigation-menu .window__footer .policy-menu{justify-content: center;align-items:space-between;}
	aside#navigation-menu .window__footer .policy-menu ul{gap: var(--gap-400, 16px);}
	aside#navigation-menu .window__footer .navigation-cta{justify-content: center;}
	aside#navigation-menu .window__footer .cta-group{display: flex;flex-direction: column;align-items: center;gap: var(--gap-300, 12px);}
}

/* GSAP */
aside#navigation-menu .backdrop,
aside#navigation-menu .window__content,
aside#navigation-menu .navigation-menu-cta__image{clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%)}




/*************************************************************************************************************
***** TYPOGRAFY **********************************************************************************************
**************************************************************************************************************/
.ff-serif{ font-family: var(--ff-serif, serif);}
.ff-sans { font-family: var(--ff-sans, sans-serif);}

.fw-700{font-weight: 700;}
.fw-400{font-weight: 400;}

.heading,
h1, h2, h3, h4, h5, h6{
	font-family: var(--ff-serif, serif);
	font-weight: 400;
	line-height: var(--lh-200, 1.20);
}

.heading.ff-sans {font-family: var(--ff-sans, sans-serif);}

h1,.fs-900,
h2,.fs-800,
h3,.fs-700{line-height: var(--lh-200, 1.20);}

h1,.fs-900{font-size: var(--fs-900, 82px);}
h2,.fs-800{font-size: var(--fs-800, 52px);}
h3,.fs-700{font-size: var(--fs-700, 42px);}
.fs-600{font-size: var(--fs-600, 26px);}
.fs-500{font-size: var(--fs-500, 22px);}
.fs-400{font-size: var(--fs-400, 18px);}
.fs-300{font-size: var(--fs-300, 16px);}
.fs-200{font-size: var(--fs-200, 14px);}

p,.p{
	font-family: var(--ff-sans, sans-serif);
	font-size: var(--fs-400, 18px);
	line-height: var(--lh-400, 1.60);
}

b, strong{font-family: var(--ff-sans-700); font-weight: 700;}

/*************************************************************************************************************
***** CONTENT ************************************************************************************************
**************************************************************************************************************/
.content ul{list-style: disc;}
.content ul,
.content ol{padding-left: 15px;margin-left: 15px;}

.content ul li::marker,
.content ol li::marker {color: var(--color-accent);}

.content a,
.content a:hover{text-decoration: underline;}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6{
	font-family: var(--ff-serif);
	font-size: var(--fs-600, 26px);
	line-height: var(--lh-200, 1.20);
}

.content h1:not(:first-child),
.content h2:not(:first-child),
.content h3:not(:first-child),
.content h4:not(:first-child),
.content h5:not(:first-child),
.content h6:not(:first-child),
.content .lineChildren:not(:first-child) h1,
.content .lineChildren:not(:first-child) h2,
.content .lineChildren:not(:first-child) h3,
.content .lineChildren:not(:first-child) h4,
.content .lineChildren:not(:first-child) h5,
.content .lineChildren:not(:first-child) h6{margin-top: var(--gap-800, 64px);}


.content.heading-sans h1,
.content.heading-sans h2,
.content.heading-sans h3,
.content.heading-sans h4,
.content.heading-sans h5,
.content.heading-sans h6{
	font-family: var(--ff-sans);
	font-size: var(--fs-500, 18px);
}



.content blockquote{
	margin-block: var(--gap-900, 80px);
	margin-inline: auto;
	max-width: var(--mxw-sm, 800px);
	padding-left: 0px;
	border-left: 0px solid;
}
.content blockquote,
.content blockquote p{
	font-family: var(--ff-serif);
	font-size: var(--fs-800, 52px);
	line-height: var(--lh-200, 1.25);
}

.content blockquote mark{
	--bg-height: 30%;
}

@media(max-width:1024px){
	.content blockquote{
		margin-block: var(--gap-600, 32px);
		padding-inline: var(--gap-500, 24px);
	}
	.content blockquote,
	.content blockquote p{
		font-size: var(--fs-700, 42px);
	}
}



/*************************************************************************************************************
***** COLORS *************************************************************************************************
**************************************************************************************************************/
/* Background */
.bg-primary{background-color: var(--color-primary, #000000);}
.bg-secondary{background-color: var(--color-secondary, #000000);}
.bg-accent{background-color: var(--color-accent, #FFFFFF);}
.bg-white{background-color: var(--color-white, #FFFFFF);}

.bg-gray-500{background-color:var(--color-gray-500, #D7DCE2);}
.bg-gray-400{background-color:var(--color-gray-400, #F3F5F6);}


/* Text */
.text-primary{color: var(--color-primary, #000000);}
.text-secondary{color: var(--color-secondary, #000000);}
.text-color{color: var(--color-text, #000000);}
.text-accent{color: var(--color-accent, #000000);}

.text-white{color: var(--color-white, #FFFFFF);}
.text-white-80{color: var(--color-white-80, #FFFFFFCC);}
.text-white-50{color: var(--color-white-50, #FFFFFF80);}
.text-white-30{color: var(--color-white-30, #FFFFFF4D);}
.text-white-10{color: var(--color-white-10, #FFFFFF1A);}


/* Fill */
.fill-white{fill: var(--color-white, #FFFFFF);}



/*************************************************************************************************************
***** UTILITY ************************************************************************************************
**************************************************************************************************************/
/*************/
/* Layout ****/
/*************/
.container-fluid{width:100%;max-width: var(--container-fluid, 2048px);margin-inline:auto;padding-inline: 0rem;}
.container-fluid.mx-page{width: calc(100% - var(--padding-pageX, 50px) * 2);max-width: calc(var(--container-fluid, 2048px) - var(--padding-pageX, 50px) * 2);}

.container{width:100%;max-width: var(--container, 1524px); margin-inline:auto;padding-inline: 0rem;}

.relative{position: relative;}
.absolute{position: absolute;top: 0;left: 0;}

.full-height{height: 100vh;height: 100svh;}
.full-height .container-fluid,
.full-height .container{height: 100%;}
@media(max-width:767px){
	.full-height {
    	height: 50vh;
    	height: 50svh;
    	min-height: 400px;
	}
}

.row{width: 100%;position: relative;}

.flow > * {margin-top: var(--gap-flow, 20px);}
.flow > *:first-child {margin-top: 0px;}

.flow.flow--500 > *:first-child {margin-top: 0px;}
.flow.flow--500 > h1,.flow.flow--500 > h2,.flow.flow--500 > h3,.flow.flow--500 > h4,.flow.flow--500 > h5,.flow.flow--500 > h6 {margin-top: 70px;}
@media(max-width:1024px){.flow.flow--500 > h1,.flow.flow--500 > h2,.flow.flow--500 > h3,.flow.flow--500 > h4,.flow.flow--500 > h5,.flow.flow--500 > h6 {margin-top: var(--gap-700, 48px);}}


/* -- Margin & Padding */
.p-0 {padding: 0;}
.px-0{padding-inline: 0;}
.py-0{padding-block: 0;}
.pt-0{padding-top: 0;}
.pb-0{padding-bottom: 0;}

.py-2{padding-block: var(--padding-sectionY-double, 160px);}
.py-3{padding-block: var(--padding-sectionY-triple, 240px);}
.pt-2{padding-top: var(--padding-sectionY-double, 160px);}
.pt-3{padding-top: var(--padding-sectionY-triple, 240px);}
.pb-2{padding-bottom: var(--padding-sectionY-double, 160px);}
.pb-3{padding-bottom: var(--padding-sectionY-triple, 240px);}
.px-section{padding-inline: var(--padding-sectionX, 50px);}
.py-section{padding-block: var(--padding-sectionY, 80px);}

.m-0{margin: 0;}
.mx-auto{margin-inline: auto;}
.mx-left{margin-left: 0;}
.mx-right{margin-right: 0;}

@media(max-width:767px){
	.py-2 {padding-block: var(--padding-sectionY, 50px);}
	.pb-2 {padding-bottom: var(--padding-sectionY, 50px);}
}

/* -- Common Flex & Grid */
.flex,
.grid{gap: 0;}
.gap{gap: var(--gap-400, 16px);}

/* -- Flex */
.flex{display: flex;}
.flex-wrap{flex-wrap: wrap;}
.flex-nowrap{flex-wrap: nowrap;}
.flex-column{flex-direction: column;}

.flex-center{justify-content: center;align-items: center;}
.flex-start{justify-content: flex-start;align-items: center;}
.flex-end{justify-content: flex-end;align-items: center;}
.flex-between{justify-content: space-between;align-items: center;}
.flex-around{justify-content: space-around;align-items: center;}

.align-start{align-items: start;}
.align-center{align-items: center;}
.align-content{align-content: center;}

/* -- Grid */
.grid{display: grid;}
.grid[data-columns="0"]{--min: 400px;grid-template-columns: repeat(auto-fit,minmax(var(--min),1fr));} /* auto */
.grid[data-columns="2"]{grid-template-columns: repeat(2, minmax(0, 1fr));}
.grid[data-columns="3"]{grid-template-columns: repeat(3, minmax(0, 1fr));}
.grid[data-columns="4"]{grid-template-columns: repeat(4, minmax(0, 1fr));}
.grid[data-columns="5"]{grid-template-columns: repeat(5, minmax(0, 1fr));}
.grid[data-columns="6"]{grid-template-columns: repeat(6, minmax(0, 1fr));}

.grid.grid--sidebar[data-columns="2"]{grid-template-columns: 2fr 1fr;}
.grid.grid--sidebar[data-columns="2"].gap{gap: 120px;}

@media(max-width: 1024px){
	.grid[data-columns="3"],
	.grid[data-columns="6"]{grid-template-columns: repeat(3, minmax(0, 1fr));}
	.grid[data-columns="4"],
	.grid[data-columns="5"]{grid-template-columns: repeat(2, minmax(0, 1fr));}

	.grid.grid--sidebar[data-columns="2"]{grid-template-columns: 1fr;}
	.grid.grid--sidebar[data-columns="2"].gap{gap: var(--gap-500, 24px);}
}
@media(max-width: 767px){
	.grid[data-columns="0"],
	.grid[data-columns="2"],
	.grid[data-columns="3"],
	.grid[data-columns="4"],
	.grid[data-columns="5"],
	.grid[data-columns="6"]{grid-template-columns: 1fr;}

	.grid.grid--sidebar[data-columns="2"]{grid-template-columns: 1fr;}
	.grid.grid--sidebar[data-columns="2"].gap{gap: var(--gap-400, 16px);}
}

.grid-column{width: 100%;position: relative;}
.grid-span-2{grid-column: span 2;grid-row: span 2;}
.grid-column-2{grid-column: span 2;}
.grid-row-2{grid-row: span 2;}


/*************/
/* Max Width */
/*************/
.mxw-xl,
.mxw-lg,
.mxw-md,
.mxw-sm,
.mxw-xs{width: 100%;margin-left: auto;margin-right: auto;}

.mxw-left{margin-left: 0;}
.mxw-right{margin-right: 0;}

.mxw-xl{max-width: var(--mxw-xl, 1420px);}
.mxw-lg{max-width: var(--mxw-lg, 1180px);}
.mxw-md{max-width: var(--mxw-md,  960px);}
.mxw-sm{max-width: var(--mxw-sm,  700px);}
.mxw-xs{max-width: var(--mxw-xs,  450px);}


/**********/
/* Border */
/**********/
.br,
.br-400{border-radius: var(--br-400);overflow: hidden;}


/**************/
/* Typography */
/**************/
.text-left{text-align: left;}
.text-center{text-align: center;}
.text-right{text-align: right;}

.bold{font-weight: bold;}
.italic{font-style: italic;}
.uppercase{text-transform: uppercase;}
.underline,
.underline:hover{text-decoration: underline;}

.heading.heading-sans,
.heading-sans h1,
.heading-sans h2,
.heading-sans h3,
.heading-sans h4,
.heading-sans h5,
.heading-sans h6{font-family: var(--ff-sans-700);}


/**************/
/* Images *****/
/**************/
.background-image{background-size: cover;background-position: center;background-repeat: no-repeat;}
.images-overlay{position: relative;}
.images-overlay::after{content: "";position: absolute;inset: 0;background-color: var(--image-shadow);pointer-events: none;}


/************/
/* Misc *****/
/************/
.sticky{position: sticky;top: var(--height-header--sticky, 0px);transition: var(--trans);}
.sticky.gap{top: calc(var(--height-header--sticky, 0px) + 20px);}

.pointer-none{pointer-events: none;}
.pointer-all{pointer-events: all;}

.transition{transition: var(--trans);}

/* -- Visibility */
.overflow{overflow: hidden;}
.overflow-x{overflow-x: hidden;}

.opacity-0{opacity: 0;}
.opacity-1{opacity: 1;}

.hidden{display: none;}
@media(min-width: 1025px){
	.hidden-lg{display: none;}
	.visible-lg{display: block;}
}
@media(max-width: 1024px){
	.hidden-md{display: none;}
	.visible-md{display: block;}
}
@media(max-width: 767px){
	.hidden-xs{display: none;}
	.visible-xs{display: block;}
}

/* -- Order */
@media(max-width: 767px){
	.order-xs-1{order: 1;}
	.order-xs-2{order: 2;}
}


/**************************************************************************************************************
***** MISC ************************************************************************************************
**************************************************************************************************************/
/***************************/
/* Accesibility ************/
/***************************/
.sr-only{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);white-space: nowrap;border: 0;}

/* Remove animations for people who've turned them off*/
@media(prefers-reduced-motion: reduce){
	*,
	*::before,
	*::after{
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}



/**********************************/
/* Social Media *******************/
/**********************************/
.social-media{width: 100%;display: flex;gap: var(--gap-600, 32px);}
.social-media a{padding-inline: 4px;display: flex;align-items: center;}
.social-media a:first-child{padding-left: 0;}
.social-media a:last-child{padding-right: 0;}

.social-media a svg{max-width: 18px;}
.social-media a path{transition: var(--trans);}
.social-media a:hover path,
.social-media a:focus path{fill: var(--color-accent, #FFFFFF);}


/**********************************/
/* Social Share *******************/
/**********************************/
.social-share{width: 100%;display: flex;gap: var(--gap-500, 24px);}
.social-share button{padding-inline: 4px;display: flex;align-items: center;}
.social-share button:first-child{padding-left: 0;}
.social-share button:last-child{padding-right: 0;}


/*********************************************************/
/***** TAGS **********************************************/
/*********************************************************/
.tag{
	font-family: var(--ff-sans);
	font-size: var(--fs-300, 14px);
	color: var(--color-text);
	text-transform: uppercase;
	transition: var(--trans);
}


/*********************************************************/
/***** LINKS *********************************************/
/*********************************************************/
.link{
	position: relative;
	color: inherit;
	font-family: var(--ff-sans);
	/*font-size: var(--fs-200, 13px);
	text-transform: uppercase;*/
}
.link:before {background-color: currentColor;content: '';position: absolute;bottom: -2px;left: 0;width: 100%;height: 1px;transform: scaleX(0);transform-origin: right bottom;transition: transform var(--trans-duration-600) cubic-bezier(0.4, 0, 0, 1);pointer-events: none;}
.link:hover:before,
.link:hover:focus {transform: scaleX(1);transform-origin: left bottom;}

.link--underline,
.link--underline:hover,
.link--underline:focus,
.link--underline:active{display: inline-block;color: inherit;text-decoration: underline;}



/*********************************************************/
/***** BUTTON ********************************************/
/*********************************************************/
.btn{position: relative;padding: var(--padding-button);display: inline-flex;justify-content: center;align-items: center;font-family: var(--ff-sans-700);font-size: var(--fs-btn, 16px);line-height: var(--lh-200, 1.25);letter-spacing:var(--ls-100, 0.1em);border: 1px solid currentColor;border-radius: var(--br-700, 40px);text-transform:uppercase;transition: var(--trans);z-index: 1;}

/* -- Button Colors */
/* Ghost Buttons */
.btn{background-color: var(--color-accent);border-color: var(--color-text);color: var(--color-text);}
.btn:hover,
.btn:focus{background-color: var(--color-accent-hover);border-color: var(--color-accent);color: var(--color-white);}

/* Ghost Button White */
.btn.btn--ghost{background-color: transparent;border-color: inherit;color: var(--color-text, black);}
.btn.btn--ghost:hover,
.btn.btn--ghost:focus{
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-text);
}

.btn-mark{
	position: relative;
	padding:var(--gap-200, 8px);
	font-family: var(--ff-sans);
	font-size: var(--fs-btn, 16px);
	line-height: var(--lh-100, 1);
	letter-spacing: var(--ls-100, 0.1em);
	text-transform: uppercase;
	isolation: isolate;
}

.btn-mark::before{
	content: '';
	position: absolute;
	inset: 50% 100% 0% 0%;
	background-color: var(--color-accent);
	z-index: -1;
	transition: var(--trans);
}

.btn-mark:hover::before,
.btn-mark:focus::before{
	inset: 50% 0% 0% 0%;
}

/*.btn-mark.in-view::before{
	inset: 50% 0 0 0;
}*/


/* Button Scroll To Target */
.scroll-to{width: 92px;height: 92px;border-radius: 50%;position: absolute;bottom: var(--padding-sectionX, 50px);left: 50%;transform: translateX(-50%);}
@media(max-width:767px){
	.scroll-to{width: 75px;height: 75px;}
}


/**************************************************************************************************************
***** UI ELEMENTS ************************************************************************************************
**************************************************************************************************************/
/***************************/
/* CHECKBOX - RADIO ********/
/***************************/
/* Custom Common */
.checkbox-item,
.radio-item{--size: 18px;min-height: var(--size, 18px);position: relative;}
.checkbox-item:not(:last-child),
.radio-item:not(:last-child){margin-bottom: var(--gap-200, 8px);}

.radio-item input[type="radio"],
.checkbox-item input[type="checkbox"]{width: initial;height: initial;padding: 0;margin: 0;cursor: pointer;opacity: 0;position: absolute;}
.radio-item input[type="radio"] + label,
.checkbox-item input[type="checkbox"] + label{display: inline-flex;cursor: pointer;line-height: var(--size);}
.radio-item input[type="radio"] + label:before,
.checkbox-item input[type="checkbox"] + label:before{content:'';-webkit-appearance: none;width: var(--size, 18px);height: var(--size, 18px);position: relative;margin-right: var(--gap-300, 12px);display: inline-block;background-color: transparent;border: 1px solid var(--color-border-input, #BABABA);border-radius: var(--br-300, 3px);vertical-align: middle;flex-shrink: 0;cursor: pointer;transition: var(--trans);}
.radio-item input[type="radio"]:checked + label:before,
.checkbox-item input[type="checkbox"]:checked + label:before{background-color: var(--color-accent);border-color: var(--color-accent);}
.radio-item input[type="radio"]:checked + label:after,
.checkbox-item input[type="checkbox"]:checked + label:after{opacity: 1;}

/* Custom Checkbox */
.checkbox-item input[type="checkbox"] + label:after{content: '';position: absolute;width: var(--size, 18px);height: var(--size, 18px);top: 0;left: 0;background-image: url('../images/icon-checkbox--check.svg');background-size: 60%;background-repeat: no-repeat;background-position: center;opacity: 0;transition: var(--trans);transition-delay: var(--trans-duration-300, 100ms);}

/* Custom Radio */
.radio-item input[type="radio"] + label:before{border-radius: 50%;}
.radio-item input[type="radio"] + label:after{content: '';position: absolute;width: calc(var(--size, 18px) / 3);height: calc(var(--size, 18px) / 3);top: calc(var(--size, 18px) / 3);left: calc(var(--size, 18px) / 3);background-color: white;border-radius: 50%;opacity: 0;transition: var(--trans);transition-delay: var(--trans-duration-300, 100ms);}


/***************************/
/* ACCORDION ***************/
/***************************/
.accordion-tab:not(:last-child){margin-bottom: var(--gap-400, 16px);}
.accordion-head{width: 100%;position: relative;padding-block: var(--gap-200, 8px);display: flex;align-items: center;justify-content: space-between;gap: var(--gap, 16px);font-family: var(--ff-sans-600);font-size: var(--fs-400, 16px);color: var(--color-text, #333333);cursor: pointer;}
.accordion-content{height:0;overflow: hidden;}
.accordion-content .content{padding-top: var(--gap-300, 12px);padding-bottom: var(--gap-700, 48px);}
.accordion-content .content,
.accordion-content .content *{pointer-events: none;}
.accordion-tab .accordion-head .accordion-icon{transition: var(--trans);}
.accordion-tab[aria-selected="true"] .accordion-head .accordion-icon{transform: var(--transform-arrow-down);}


/***************************/
/* TABS ********************/
/***************************/
.tabs{}
.tabs-controls{width: 100%;display: flex;justify-content: center;align-items: center;margin-bottom: var(--gap-600, 32px);}

.tabs-control{width: 100%;position: relative;padding: var(--gap-200, 8px);font-family: var(--ff-sans-700);font-size: var(--fs-700, 18px);border-bottom:1px solid var(--color-border);}
.tabs-control[aria-selected="false"]:before,
.tabs-control[aria-selected="true"]:before{content: "";position: absolute;	bottom: -1px;left: 0;width: 100%;height: 0px;background-color: var(--color-accent);transition: var(--trans-300);}
.tabs-control[aria-selected="true"]:before{height: 3px;}

.tabs-panel[aria-selected="false"]{display: none;}
.tabs-panel[aria-selected="true"]{display: flex;}


/***************************/
/***** CUSTOM SELECT *******/
/***************************/
.select{--width:200px;--height:50px;--icon-w:40px;position: relative;width:var(--width);height: var(--height);padding-right: var(--icon-w);cursor: pointer;}
.select input,
.select .option{display:block;font-family: var(--ff-sans);font-size: var(--fs-200, 14px);color: var(--color-primary, #000000);}

.select input::-webkit-input-placeholder {color: var(--color-primary, #000000);}
.select input:-ms-input-placeholder {color: var(--color-primary, #000000);}
.select input::placeholder {color: var(--color-primary, #000000);}
.select input{position: absolute;top:0;left: 0;width: 100%;height: 100%;padding: var(--gap, 16px);padding-right: var(--icon-w);color: var(--color-primary, black);text-overflow: ellipsis;cursor: pointer;border: 1px solid;border-color: var(--color-border-dark, #BABABA);border-color: transparent;border-radius: var(--br, 10px);}

/* -- Select Icon */
.select .select-icon{width: auto;height: 100%;position: absolute;top: 0;right:var(--gap-500, 24px);display: flex;justify-content: center;align-items: center;transition: var(--trans);pointer-events: none;}
.select.open .select-icon{transform: var(--transform-arrow-down);}

/* -- Select Options */
.select .options{position: absolute;top: 0px;left: 0;width: 100%;max-height: 500px;padding-block: var(--gap-500, 24px);padding-top: calc(var(--height) + 5px);background-color: white;border-radius: var(--br, 10px);border: 1px solid;border-color: var(--color-border-dark, #000000);border-color: transparent;overflow:hidden;overflow-y: auto;opacity: 0;transition: var(--trans);pointer-events: none;}
.select.open .options{opacity: 1;pointer-events: all;}

.select .option{padding-block: 5px;padding-inline: var(--gap, 16px);}
.select .option:hover,
.select .option:focus{background-color: rgba(0,0,0,0.05);}
.select .option.active{color: var(--color-primary, #000000) !important;}

.select .options{z-index: 1;}
.select,
.select input,
.select .option,
.select .select-icon{z-index: 2;}

/* Select Languages */
.language-swithcer{display: flex;align-items: center;justify-content: center;gap: var(--gap-500, 24px);font-family: var(--ff-sans);font-size: var(--fs-200, 14px);}

.language-swithcer .options{display: flex;gap:var(--gap-300, 12px);}
.language-swithcer .options a[selected="true"]{font-family: var(--ff-sans-700);}


/**************************************************************************************************************
***** GSAP ****************************************************************************************************
**************************************************************************************************************/
.reveal-titles .title{overflow: hidden;}
.reveal-titles .title span{display:block;opacity: 0;transform: rotate(0deg) translateY(200px) skewY(0deg);}

.reveal-text{opacity: 0;}
.reveal-text .lineChildren{opacity: 0;transform: translateY(50px) scaleY(1.0);}

.reveal-card .reveal-card-image{overflow: hidden;}
.reveal-card .reveal-card-image img{transform: translateY(100px) scale(1.2);clip-path: polygon(0% 100%, 0% 100%, 100% 100%, 100% 100%);}
.reveal-card .reveal-card-text{opacity: 0;transform: translateY(50px);}

.zoomOut-image img{transform: scale(1.4);}

/**************************************************************************************************************
***** EFFECTS *************************************************************************************************
**************************************************************************************************************/
/***********************/
/* FadeOutIn Animation */
/***********************/
.fade-animation{--animation-time: 500ms;--translateY: 50px;}
.fadeOutDown{animation: fadeOutDown var(--animation-time, 500ms) forwards ease-in-out;}
.fadeInUp{animation: fadeInUp var(--animation-time, 500ms) forwards ease-in-out;}
@keyframes fadeOutDown{0%{transform: translateY(0px);opacity: 1;}100%{transform: translateY(var(--translateY, 50px));opacity: 0;}}
@keyframes fadeInUp{0%{transform: translateY(var(--translateY, 50px));opacity: 0;}100%{transform: translateY(0px);opacity: 1;}}


/***********************/
/* Following Button ****/
/***********************/
.following-button-parent{--x: 50%;--y: 50%;--size: 50px;--translate: translate(-50%, -50%) scale(0);}
.following-button-parent{position: absolute;inset: 1px;transition: var(--trans);}
.following-button{position: absolute;top:var(--y);left: var(--x);width: var(--size, 50px);pointer-events: none;}
.following-button img{transform: var(--translate);transition: var(--transition);/* --transition in parent class */}


/***********************/
/* Magnet Button *******/
/***********************/
.magnet-field{--btn-size: 92px;--magnet: 0px;position: absolute;top: calc(50% - var(--magnet));left: calc(50% - var(--magnet));margin: var(--magnet);transform: translate(-50%, -50%) scale(1);width: calc(var(--btn-size) * 1.50);height: calc(var(--btn-size) * 1.50);z-index: 2;}
.magnet{position: absolute;top: calc(50% - var(--btn-size)/2);left: calc(50% - var(--btn-size)/2);z-index: 1;width: calc(var(--btn-size) * 1.00);height: calc(var(--btn-size) * 1.00);display: flex;justify-content: center;align-items: center;color: hsl(var(--color-primary));border-radius: 50%;pointer-events: none;}
.magnet:before{content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(1.0);z-index: 0;width: 100%;height: 100%;background-color: #FFFFFF80;border-radius: 50%;transition: var(--trans);}
.magnet img{position:relative;z-index: 1;}
.magnet-field:hover .magnet:before{transform: translate(-50%, -50%) scale(1.2);}
@media(max-width:767px){.magnet-field{--btn-size: 50px;}}
@supports(backdrop-filter: blur(1px)){.magnet:before{background-color: #FFFFFF80;backdrop-filter: blur(10px);}}


/***********************/
/* Cursor Follower *****/
/***********************/
#cursor-space{
	position: fixed;
	inset: 0;
	z-index: 1000;
	pointer-events: none;
}
#cursor{
	--x: 0;
	--y: 0;
	--size: 50px;
	--trans-speed: 250ms;
}
#cursor{
	opacity: 0;
	position: absolute;
	top:  var(--y);
	left: var(--x);
	z-index: 3000;
	pointer-events: none;
	transition: top var(--trans-speed, 1s), left var(--trans-speed, 1s), opacity var(--trans-speed, 1s);
	transition-timing-function: ease-out;
}
#cursor > * {transition: none;}
#cursor .cursor{width: var(--size);height: var(--size);position: absolute;inset:0;opacity:0;padding: var(--padding, 20px);display: flex;align-items: center;justify-content: center;gap: var(--gap, 16px);background-color: #FFFFFF;border-radius: 50%;font-size: var(--fs-200, 14px);text-transform: uppercase;text-align: center;}

#cursor[data-cursor-style="cursor__arrow"] .cursor__arrow,
#cursor[data-cursor-style="cursor__drag"] .cursor__drag,
#cursor[data-cursor-style="cursor__project"] .cursor__project,
#cursor[data-cursor-style="cursor__gallery"] .cursor__gallery{opacity: 1;}

.cursor-target{cursor: none;user-select: none;}
.cursor-target * {cursor: none;}
.cursor-target * .escape-cursor-target{cursor: pointer;}

@media(max-width:1024px){#cursor{display:none;}}
@supports(backdrop-filter: blur(1px)){
	#cursor .cursor{background-color: #FFFFFF80;backdrop-filter:blur(10px);}}
}