/******/
/*** MENU ***/
/******/

.global-nav {
	width: 100%;
	position: fixed;
	top: 2rem;
	left: 0;
	z-index: 100;
	-webkit-transition: top .6s;
	-o-transition: top .6s;
	transition: top .6s;
}

.global-nav nav.grid-container {
	padding-left: 1.5rem;
}

.navigation__logo {
	overflow-x: clip;
	justify-content: flex-start;
	padding-left: 0!important;
	padding-right: 0!important;
}

.navigation__logo img {
	min-width: 200%;
}

.global-nav.scrolling_up {
	top: 0;
	background-color: var(--color-white);
	-webkit-transition: all .2s ease-in-out, border .2s ease-in-out;
	-moz-transition: all .2s ease-in-out, border .2s ease-in-out;
	-o-transition: all .2s ease-in-out, border .2s ease-in-out;
	transition: all .2s ease-in-out, border .2s ease-in-out;
}

.global-nav.scrolling_down {
	top: -15rem;
	background-color: transparent;
	-webkit-transition: all .2s ease-in-out, border .2s ease-in-out;
	-moz-transition: all .2s ease-in-out, border .2s ease-in-out;
	-o-transition: all .2s ease-in-out, border .2s ease-in-out;
	transition: all .2s ease-in-out, border .2s ease-in-out;
}

.global-nav.scrolling_up li a {
	color: var(--color-blue)!important;
}

.global-nav.scrolling_up #menu-cta-menu li a {
	background-color: var(--color-blue);
	color: var(--color-white)!important;
}

.global-nav.scrolling_up .navigation__logo {
	justify-content: flex-end;
}

.navigation {
	display: inline-block;
}

.faq-drawer input[type="checkbox"] {
	display: none;
}

@media screen and ( max-width: 47.9375rem ) {
	
	.global-nav {
		top: 0;
	}
	
	.navigation {
		position: relative;
		padding: .625rem .125rem .125rem .125rem;
	}
	
	.global-nav.scrolling_up .navigation {
		padding-top: 0!important;
	}
	
	.navigation__logo {
		width: 10rem;
		padding-left: 1.3125rem;
	}
	
	.navigation__wrapper {
		flex-grow: 1;
		padding-right: 1rem;!important;
	}

	.navigation__links {
		position: fixed;
		width: calc(100% - 5rem);
		height: 100vh;
		padding-top: 1.5rem;
		left: -63rem;
		top: -.625rem;
		transition: left .2s ease-in;
		background: var(--color-white);
		color: var(--color-black);
		list-style: none;
		box-shadow: .0625rem .0625rem .625rem 0rem rgba(0,0,0,0.75);
		flex-direction: column;
		justify-content: flex-start;
	}
	
	.navigation__links li {
		padding: .5rem 1.5rem;
		text-align: right;
		width: 84%;
		flex-basis: 0;
	}
	
	.navigation__links a {
		color: var(--black);
		text-decoration: none;
		font-size: var(--text-2xl);
	}
	
	#hamburger {
		visibility: hidden;
		width: 0;
	}
	
	.navigation__button {
		position: relative;
		display: inline-block;
		width: 2.25rem;
		height: 2rem;
		background: transparent;
		cursor: pointer;
	}
	
	.navigation__button span {
		position: absolute;
		right: 0;
		display: inline-block;
		width: 1.5rem;
		height: .125rem;
		background-color: var(--color-white);
		transform-origin: center;
		transition: opacity 0.2s linear, all 0.3s linear;
	}
	
	.global-nav.scrolling_up .navigation__button span {
		background-color: var(--color-blue);
	}
	
	.navigation__button span:nth-of-type(1) {
		top: .5625rem;
	}
	
	.navigation__button span:nth-of-type(2) {
		top: .9375rem;
	}
	
	.navigation__button span:nth-of-type(3) {
		top: 1.3125rem;
	}

/* Here comes the magic */
	#hamburger:checked ~ .navigation__links {
  /* Or it can be "input[type="checkbox"] ~ .navigation__links" */
		left: 0;
	}

/* Styles for our "close" button */
	#hamburger:checked ~ .navigation__button span:nth-of-type(1) {
		transform: rotate(45deg);
		top: 1rem;
	}
	
	#hamburger:checked ~ .navigation__button span:nth-of-type(2) {
		opacity: 0;
	}
	
	#hamburger:checked ~ .navigation__button span:nth-of-type(3) {
		transform: rotate(-45deg);
		top: 1rem;
	}
	
	/* ACCORDION */
	.faq-drawer__content-wrapper {
		line-height: 1.35;
		max-height: 0rem;
		overflow: hidden;
		transition: 0.25s ease-in-out;
	}
	
	.faq-drawer__title {
		display: block;
		padding: 0;
		position: relative;
		margin-bottom: 0;
		transition: all 0.2s ease-out;
	}
	
	.faq-drawer__title::after {
		border-style: solid;
		border-width: .0625rem .0625rem 0 0;
		content: " ";
		display: inline-block;
		float: right;
		height: .625rem;
		left: -.125rem;
		position: relative;
		right: 1.5em;
		top: .125rem;
		transform: rotate(135deg);
		transition: 0.3s ease-in-out;
		vertical-align: top;
		width: .625rem;
	}
	
	.faq-drawer__trigger:checked + .faq-drawer__title + .faq-drawer__content-wrapper {
		max-height: 100vh;
	}
	
	.faq-drawer__trigger:checked + .faq-drawer__title::after {
		transform: rotate(-45deg);
		transition: 0.2s ease-in-out;
	}
	
}