/* https://medium.com/@heyoka/responsive-pure-css-off-canvas-hamburger-menu-aebc8d11d793 */

/* Screen reader only */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}


/* Button styling */

.menu-toggle {
	display: inline-block;
	padding: .75em 15px;
	line-height: 1em;
	font-size: 1em;
	color: #333;
	position: fixed;
	right: 6px;
}

.menu-toggle:hover,
.menu-toggle:focus {
	color: #e87722;
}


/* Default styles + Mobile first Offscreen menu style */

header {
	opacity: 1;
}

header {
	border-bottom: 1px solid #BBBCBC;
	padding: 0 10px;
	display: flex;
	align-items: center;
	background: #ffffff;
	position: fixed;
	width: 100%;
	z-index: 999;
}

header a.logo {
	z-index: 1000;
}

header h1.logo {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background-image: url('/content/dam/oclc/annual-report/2020/images/logo_oclc.svg');
	background-repeat: no-repeat;
	background-size: contain;
	width: 170px;
	height: 50px;
	margin-top: 15px;
}

.main-menu {
	/* position: absolute; */
	display: none;
	left: -200px;
	top: 0;
	height: auto;
	/* overflow-y: scroll;
     overflow-x: visible; */
	transition: left 0.3s ease, box-shadow 0.3s ease;
	z-index: 999;
}

.main-menu ul {
	list-style: none;
	margin: 0;
	padding: 5.25em 0 0;
	/* Hide shadow w/ -8px while 'closed' */
	-webkit-box-shadow: -8px 0 8px rgba(0, 0, 0, .5);
	-moz-box-shadow: -8px 0 8px rgba(0, 0, 0, .5);
	box-shadow: -8px 0 8px rgba(0, 0, 0, .5);
	min-height: 100%;
	width: auto/*200px*/
	;
	background: white;
}

.main-menu ul li {
	margin: 0;
}

.main-menu a {
	display: block;
	padding: .5em 15px;
	line-height: 1.2em;
	font-size: 1em;
	color: #1D252D;
	text-decoration: none;
	border-bottom: 1px solid #D9D9D6;
	font-family: 'Graphik', Helvetica, Arial, sans-serif;
	font-weight: 800;
}

.main-menu li:first-child a {
	border-top: 1px solid #D9D9D6;
}

.main-menu a:hover,
.main-menu a:focus {
	background: #f0f0f0;
	text-decoration: none;
	color: #e87722;
}

.main-menu .menu-close {
	position: absolute;
	right: 0;
	top: 0;
	border: none;
	color: #1D252D;
}

.main-menu .menu-close:hover {
	color: #1D252D;
	background: none;
}


/* On small devices, allow it to toggle... */


/* :target for non-JavaScript [aria-expanded] will be used if/when JavaScript is added to improve interaction, though it's completely optional. */

.main-menu:target,
.main-menu[aria-expanded="true"] {
	display: block;
	width: 100%;
	left: 0;
	outline: none;
	-moz-box-shadow: 3px 0 12px rgba(0, 0, 0, .25);
	-webkit-box-shadow: 3px 0 12px rgba(0, 0, 0, .25);
	box-shadow: 3px 0 12px rgba(0, 0, 0, .25);
}

.main-menu:target .menu-close,
.main-menu[aria-expanded="true"] .menu-close {
	z-index: 1001;
}

.main-menu:target ul,
.main-menu[aria-expanded="true"] ul {
	position: relative;
	z-index: 1000;
}


/* We could us `.main-menu:target:after`, but it wouldn't be clickable. */

.main-menu:target+.backdrop,
.main-menu[aria-expanded="true"]+.backdrop {
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 998;
	background: #000;
	background: rgba(0, 0, 0, .5);
	cursor: default;
}

@supports (position: fixed) {
	.main-menu,
	.main-menu:target+.backdrop,
	.main-menu[aria-expanded="true"]+.backdrop {
		position: fixed;
	}
}


/* Larger screen styling Horizontal menu */

@media (min-width: 780px) {
	header {
		opacity: 0.9;
	}
	.menu-toggle,
	.main-menu .menu-close {
		display: none;
	}
	/* Undo positioning of off-canvas menu */
	.main-menu {
		/*position: relative;
        */
		left: auto;
		top: auto;
		height: auto;
		display: block;
		width: 100%;
	}
	.main-menu ul {
		display: flex;
		flex-flow: row wrap;
		float: right;
		/* margin-left:30%; */
		margin-right: 5%;
		/* Undo off-canvas styling */
		padding: 0;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		height: auto;
		background: transparent;
		justify-content: right;
	}
	.main-menu ul li {}
	.main-menu a {
		color: #333f48;
		padding: .25em 15px;
		border: 0 !important;
		/* Remove borders from off-canvas styling */
	}
	.main-menu a:hover,
	.main-menu a:focus {
		background: none;
		/* Remove background from off-canvas styling */
		color: #e87722;
	}
	.logo {
		margin-left: 15px;
	}
}

@media (max-width: 779px) {
	header h1.logo {
		width: 120px !important;
		height: 35px !important;
		margin-top: 12px !important;
		margin-bottom: 12px !important;
	}
	.main-menu ul {
		padding: 60px 0 0 !important;
	}
}