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

@media screen and ( min-width: 48rem ) {
	
	nav li.home {
		position: relative;
		width: 13rem;
		height: 4.125rem;
	}

	nav li.home a {
		font-size: 0;
		width: 100%;
		height: 4.125rem;
		color: transparent;
	}

	nav li.home a:after {
		background-image: url("../images/logo-dark.png");
    	background-size: 13rem 4.125rem;
    	display: inline-block;
    	width: 13rem;
		height: 4.125rem;
    	content:"";
	}
	
	nav #menu-main-menu li {
		flex-basis: 100%;
		text-align: center;
	}
	
}

@media screen and ( max-width: 47.9375rem ) {
	
	nav li.home {
		display: none;
	}
	
	.navigation {
		position: relative;
		padding-right: 0;
	}
	
	nav li.home-mobile {
		position: relative;
		width: 9.75rem;
		height: 3.09375rem;
	}

	nav li.home-mobile a {
		font-size: 0;
		width: 100%;
		height: 3.09375rem;
		color: transparent;
	}

	nav li.home-mobile a:after {
		background-image: url("../images/logo-dark.png");
    	background-size: 9.75rem 3.09375rem;
    	display: inline-block;
    	width: 9.75rem;
		height: 3.09375rem;
    	content:"";
	}
	
	.navigation__wrapper {
		flex-grow: 1;
		padding-right: 1.5rem!important;
	}

	.navigation__links {
		position: fixed;
		width: 19rem;
		height: 100vh;
		padding-top: 1.5rem;
		left: -63rem;
		top: -.625rem;
		transition: left .2s ease-in;
		background: var(--color-black);
		color: var(--color-white);
		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(--color-white);
		text-decoration: none;
		font-size: 1.25rem;
	}
	
	#hamburger {
		visibility: hidden;
	}
	
	.navigation__button {
		position: relative;
		display: inline-block;
		width: 2.25rem;
		height: 2rem;
		background: transparent;
		border: .125rem solid var(--color-black);
		cursor: pointer;
		border-radius: .25rem;
	}
	
	.navigation__button span {
		position: absolute;
		left: .375rem;
		display: inline-block;
		width: 1.5rem;
		height: .125rem;
		background-color: var(--color-black);
		transform-origin: center;
		transition: opacity 0.2s linear, all 0.3s linear;
	}
	
	.background-white-brand .navigation__button span {
		background-color: var(--color-black);
	}
	
	.background-white-brand .navigation__button {
		border: .125rem solid var(--color-black);
	}
	
	.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;
	}
	
	/* FOOTER */
	
	footer li.menu-item-has-children {
		width: 100%;
	}
	
	ul#menu-footer-menu {
		margin-left: .75rem;
	}
	
	footer li.menu-item-has-children > a {
		width: 100%;
	}
	
}