/* Mobile-style hamburger menu at all screen sizes */

/* CSS3 MEDIA QUERIES */


/* NON-PHONE NAVIGATION (content area over 783 pixels) */
@media screen and (min-width: 783px) {

	body.nav_open { overflow: hidden; }

	#nav_handle {
		cursor: context-menu;
		display: block;
		height: 44px;
		padding: 0;
		position: absolute; top: 50%; right: 6rem; bottom: auto; left: auto;
		transform: translateY(-50%);
		width: 44px;
		z-index: 2;
	}
	#header.logo_align_right.menu_align_mobile #nav_handle {
		right: auto; left: 6rem;
	}
	#nav_handle { cursor: pointer; }

		#nav_handle .hamburger { padding: 10px 0 !important; }
	
		.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
			height: 4px !important;
			width: 30px !important;
		}

		#nav_handle .hamburger .menu-label {
			display: block;
			height: 1px;
			opacity: 0;
			overflow: hidden;
			position: absolute; top: 0; left: 0;
			text-indent: -9999px;
			width: 1px;
		}
	
	/*#page, #footer { display: none; }*/

	body.nav_open { overflow-y: scroll; }

	#header { }

	body.admin-bar.nav_open #header { top: 32px; }

		#header .menu { display: block !important; }
		body.nav_open .search_open .menu { opacity: 1; width: auto; }

			#header .menu * {
				background-color: transparent !important;
				border: none !important;
				box-shadow: none !important;
				font-size: 16px !important;
				line-height: 32px !important;
				padding: 0 !important;
				position: relative !important;
				top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
			}
	
			#header .menu li:not(.no_phone) { display: block; }

			#header .menu li.menu-item-has-children {
				cursor: context-menu;
				position: relative;
			}
		
			#header .menu li.menu-item-has-children::before {
				background: transparent url('../images/ui/toggle_white_closed.svg') center center no-repeat;
				background-size: 14px 14px;
				content: '';
				display: block;
				height: 2em;
				position: absolute; top: 0; left: 0;
				transition: transform 0.25s ease;
				transform-origin: 50% 50%;
				width: 22px;
			}
			#header .menu li.menu-item-has-children.open::before {
				transform: rotate(90deg);
			}
		
				#header .menu li.menu-item-has-children > * { cursor: initial; }

				#header .menu a {
					display: block !important;
					line-height: 24px !important;
					margin: 0 !important;
					padding: 4px 24px !important;
				}

				#header .menu li:hover > ul { display: none !important; }

				#header .menu li.open > ul {
					display: block !important;
					margin: 0 0 0 16px !important;
				}
				
	#nav_wrapper { display: none; }

	#nav_wrapper {
		display: block;
		min-height: 400px !important;
		max-width: 100%;
		min-width: 280px;
		position: fixed; top: 0; right: -110%; bottom: 0; left: auto;
		transition: all 0.5s ease;
	}
	#header.logo_align_right.menu_align_mobile #nav_wrapper {
		right: auto; left: -110%;
	}
	body.nav_open #nav_wrapper {
		right: 0; left: auto;
	}
	body.nav_open #header.logo_align_right.menu_align_mobile #nav_wrapper {
		right: auto; left: 0;
	}

		#primary_navigation, #auxiliary_navigation { display: none; }

		#primary_navigation {
			display: block;
			height: auto;
			margin-bottom: 10px;
			padding: 0 15px;
			position: relative; top: auto; right: auto; bottom: auto; left: auto;
			text-align: left;
		}

		#auxiliary_navigation {
			border-top: 1px solid rgba(255,255,255,0.5);
			display: block;
			height: auto;
			padding: 10px 15px 0 15px;
			position: relative; top: auto; right: auto; bottom: auto; left: auto;
			text-align: left;
		}

			#header .search {
				display: block;
				margin: 1.5em 24px 0 24px;
				top: 0;
				width: auto !important;
				z-index: 3;
			}

				#header .search input[type=text] {
					border-radius: 2px;
					font-size: 16px;
					height: 32px;
					line-height: 32px;
					opacity: 1;
					width: 100%;
				}
		
				#header .search .svg_wrapper {
					top: 2px;
				}

}


/* LARGE SCREENS (content area over 1600 pixels) */
/*
@media screen and (min-width: 1600px) {

}
*/


/* SMALLER COMPUTERS (content area under 1200 pixels) */
/*
@media screen and (max-width: 1200px) {

}
*/


/* TABLETS (content area under 1024 pixels) */
/*
@media screen and (max-width: 1024px) {

}
*/


/* PHONES (content area under 782 pixels) */
@media screen and (max-width: 782px) {

	/* Anything here should go in navigation_phone.css! */

}