/* FOOTER */

.FOOTER {
	background: var(--dark-navy);
}

.FOOTER a:not(.b-button) {color: var(--white);}
.FOOTER a:hover:not(.b-button) {color: var(--green);}

.FOOTER .logo {
	display: block;
	width: 99%;
	height: auto;
	margin: 0 auto;
}

.FOOTER .heading {
	text-transform: uppercase;
	font-size: 14rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: var(--grey);
	border-bottom: 1rem solid var(--grey);
	padding-bottom: 8rem;
	margin-bottom: 24rem;
}

.FOOTER .b-h2 {
	color: var(--primary-orange);
}


/* nav */

.FOOTER nav > ul {
	padding: 64rem 0 48rem;
	font-size: 16rem;
	font-weight: 500;
	line-height: 1.25;
}

.FOOTER nav > ul::after {
	content: '';
	display: block;
	clear: both;
}

.FOOTER nav li li {
	margin: 12rem 0;
}

.FOOTER nav li li ul {
	margin: 12rem 0;
}

.FOOTER nav li li li a:not(.b-button) {
	color: var(--grey);
}



/* languages */

.FOOTER .logo-mobile {
	display: none;
}

.FOOTER .flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.FOOTER .languages {
	position: relative;
	z-index: 1;
	max-width: 95rem;
}

.FOOTER .languages > ul {
	display: block !important;
	position: absolute;
	top: 100%;
	left: -32rem;
	margin: 0;
	padding: 0;
	width: var(--col-3);
	background: var(--white);
	border-radius: 16rem;
	line-height: 1.25;
	opacity: 0;
	transform: translate(0, 32rem);
	pointer-events: none;
	transition: opacity 0.25s, transform 0.25s;
	list-style: none;
}

.FOOTER .languages > ul > li {
	margin: 0;
}

.FOOTER .languages > ul > li > a {
	display: block;
	font-size: 18rem;
	font-weight: 600;
	padding: 12rem 32rem;
	background: var(--white);
	color: var(--navy);
	transition: color 0.25s, background-color 0.25s;
}

.FOOTER .languages > ul > li:first-child a {margin-top: 20rem;}
.FOOTER .languages > ul > li:last-child a {margin-bottom: 20rem;}
.FOOTER .languages > ul > li > a:hover {background-color: var(--light-grey);}

.FOOTER .languages .a {
	cursor: pointer;
	text-transform: uppercase;
	font-weight: 600;
}

.FOOTER .languages .a::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 6rem;
	height: 6rem;
	margin: -6rem 0 0 8rem;
	border: 1rem solid currentColor;
	border-width: 0 1.5rem 1.5rem 0;
	transform: rotate(45deg);
}

.FOOTER .languages img {
	display: inline-block;
	width: auto;
	height: 24rem;
	vertical-align: middle;
}

.FOOTER .languages:active > ul,
.FOOTER .languages:focus > ul,
.FOOTER .languages:focus-within > ul {
	opacity: 1;
	transform: translate(0, 0);
	pointer-events: auto;
}

@media screen and (max-width: 960px) {
	.FOOTER .logo-mobile {display: block;}
	.FOOTER nav .b-button {display: block; width: fit-content; text-align: left;}
	.FOOTER nav .b-button:hover {color: var(--green) !important; background-color: transparent !important;}
	.FOOTER .languages > ul {left: -242rem;}
	.FOOTER .languages:hover > ul {
		opacity: 1;
		transform: translate(0, 0);
		pointer-events: auto;
	}
}

.FOOTER .legal {
	font-size: 16rem;
}

.FOOTER .legal a {
	padding-right: 12rem;
	white-space: nowrap;

}

.FOOTER .copyright {
	padding-top: 8rem;
	color: var(--grey);
}



/* social */

.FOOTER .social a {
	display: inline-block;
	vertical-align: top;
	margin-right: 24rem;
	color: var(--primary-orange);
}

.FOOTER .social a:hover {
	color: var(--white);
}

.FOOTER .social a svg {
	height: 24rem;
	width: auto;
}



@media screen and (min-width: 961px) {
	.FOOTER nav > ul > li:not(:first-child) {float: right; clear: right; width: var(--col-3);}
	.FOOTER nav > ul > li:nth-child(n+3){margin-top: 48rem;}
	.FOOTER nav > ul > li:first-child {float: left; width: var(--col-9);}
	.FOOTER nav > ul > li:first-child .heading {margin-right: 32rem;}
	.FOOTER nav > ul > li:first-child > ul {display: flex; margin-right: -32rem;}
	.FOOTER nav > ul > li:first-child > ul > li {width: var(--col-3); margin: 0 32rem 0 0 !important;}
	.FOOTER nav ul + .b-button {margin-top: 24rem;}
}

@media screen and (max-width: 960px) {
	.FOOTER .b-frame > .b-columns:first-child > .b-column:first-child {display: none;}
	.FOOTER nav > ul {padding: 48rem 0;}
	.FOOTER nav > ul > li {margin-top: 48rem;}
	.FOOTER nav > ul > li {margin-top: 48rem;}
	.FOOTER nav > ul ul ul {display: none;}

	.FOOTER nav > ul .b-button {
		box-shadow: none !important;
		padding: 0;
		width: auto;
		font-size: 16rem;
	    font-weight: 500;
	    line-height: 1.25;
	}

	.FOOTER nav ul + .b-button {margin-top: 12rem;}

	.FOOTER .legal {font-size: 14rem;}
	.FOOTER .b-button {margin-top: 0; width: 100%;}
	.FOOTER .logo {display: none;}

	.FOOTER nav + .b-columns > .b-column:nth-child(1) {order: 1;}
	.FOOTER nav + .b-columns > .b-column:nth-child(2) {order: 3; margin-top: 24rem;}
	.FOOTER nav + .b-columns > .b-column:nth-child(3) {order: 2; margin-top: 24rem;}
}



/* NAV */

.NAV {
	position: relative;
	height: 100%;
}

.NAV nav {
	height: calc(100% - 90rem);
	overflow: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
}

.NAV nav::-webkit-scrollbar {
	display: none;
}

.NAV nav input {
	display: none;
}

.NAV nav li {
	margin: 0 24rem;
	padding: 16rem 0;
}

.NAV nav li a,
.NAV nav li .a {
	color: var(--white);
	display: block;
}

.NAV nav a:not(.b-button) {color: var(--white);}
.NAV nav a:not(.b-button):hover {color: var(--green);}

.NAV nav .back {
	color: var(--white);
	cursor: pointer;
	position: relative;
	display: block;
	padding-left: 40rem;
	font-size: 14rem;
	line-height: 24rem;
	font-weight: 500;
	margin: 12rem 0;
}
.NAV nav .back::after {
	content: "";
	position: absolute;
	top: 9rem;
	left: 24rem;
	width: 6rem;
	height: 6rem;
	border: 1rem solid currentColor;
	border-width: 1.5rem 0 0 1.5rem;
	transform: rotate(-45deg);
}


.NAV .bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 144rem;
	text-align: center;
	box-sizing: border-box;
	padding: 0 24rem 24rem;
}

.NAV .bottom .b-button {
	width: 100%;
	margin-top: 12rem;
}



/* teir 1 */

.NAV nav > ul > li:first-child {
	margin-top: 12rem !important;
}

.NAV nav > ul > li:not(:last-child) {
	border-bottom: 1rem solid var(--grey);
}

.NAV nav > ul > li > a,
.NAV nav > ul > li > .a {
	font-weight: 600;
	font-size: 18rem;
	line-height: 1.25;
	position: relative;
}

.NAV nav > ul > li > .a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 6rem;
	height: 6rem;
	border: 1rem solid currentColor;
	border-width: 0 1.5rem 1.5rem 0;
	transform: rotate(-45deg) translate(0, -50%);
}



/* teir 2 */

.NAV .panel {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% - 144rem);
	background: var(--dark-navy);
	transform: translate(64rem, 0);
	opacity: 0;
	transition: transform 0.25s, opacity 0.25s;
	overflow: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	pointer-events: none;
}

.NAV .panel::-webkit-scrollbar {
	display: none;
}

.NAV .panel > ul > li > .a,
.NAV .panel > ul > li > a {
	text-transform: uppercase;
	font-size: 14rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: var(--grey);
	border-bottom: 1rem solid var(--grey);
	padding-bottom: 8rem;
	margin-bottom: 12rem;
}



/* teir 2 open */

.NAV nav input:checked ~ .panel {transform: translate(0, 0); opacity: 1; pointer-events: all; z-index: 1;}



/* teir 3 */

.NAV li li li {
	margin: 0 0 12rem 0;
	padding: 0 0 12rem 0;
	border-bottom: 1rem solid var(--grey);
	font-weight: 600;
}

.NAV li li li:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.NAV li li li > a {
	position: relative;
}

.NAV li li li > a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 6rem;
	height: 6rem;
	border: 1rem solid currentColor;
	border-width: 0 1.5rem 1.5rem 0;
	transform: rotate(-45deg) translate(0, -50%);
}

/* languages */

.NAV .languages {
	position: absolute;
	bottom: 100%;
	right: 0;
	margin: 0 12rem 12rem 0;

}

.NAV .languages .selected,
.NAV .languages select {
	display: block;
	width: 85rem;
	height: 24rem;
	position: absolute;
	bottom: 0;
	right: 24rem;
	border: none;
	outline: none;
	background: transparent;
}

.NAV .languages select:focus,
.NAV .languages select:focus-within,
.NAV .languages select:focus-visible,
.NAV .languages select:active {
	border: none;
	outline: none;
}

.NAV .languages .selected {
	text-transform: uppercase;
	font-weight: 700;
	background: var(--dark-navy);
	z-index: 1;
	pointer-events: none;
}

.NAV .languages .selected img {
	width: auto;
	height: 24rem;
	margin: 0 15rem 0 auto;
}

.NAV .selected::after {
	content: "";
	position: absolute;
	top: 6px;
	right: 0;
	width: 6rem;
	height: 6rem;
	border: 1rem solid currentColor;
	border-width: 0 1.5rem 1.5rem 0;
	transform: rotate(45deg);
}



/* MEDIA-MODAL */

.MEDIA-MODAL {
	position: relative;
}

.MEDIA-MODAL::before {
	content: '';
	position: absolute;
	top: -32rem;
	right: -8rem;
	width: 32rem;
	height: 32rem;
	background: url(../images/ui-close.svg) no-repeat center / 100%;
	pointer-events: none;
}