/* NAVIGATION */

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

	body.nav_open { overflow: hidden; }

	#nav_handle {
		cursor: context-menu;
		display: block;
		height: 44px;
		padding: 0;
		position: absolute; top: 3px; right: 5px; bottom: auto; left: auto;
		width: 44px;
	}
	body.nav_open #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;
		}

	body.nav_open #page, body.nav_open #footer { display: none; }

	body.nav_open #header {
		height: auto !important;
		overflow-x: hidden;
		overflow-y: scroll;
		position: fixed; top: 0; right: 0; bottom: 0; left: 0;
	}

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

		body.nav_open #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;
		}
		
		body.nav_open #header .menu { display: block !important; }
		body.nav_open .search_open .menu { opacity: 1; width: auto; }

			body.nav_open #header .menu li:not(.no_phone) { display: block; }

			body.nav_open #header .menu li.menu-item-has-children {
				cursor: context-menu;
				position: relative;
			}
			
			body.nav_open #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;
			}
			body.nav_open #header .menu li.menu-item-has-children.open:before {
				transform: rotate(90deg);
			}
			
				body.nav_open #header .menu li.menu-item-has-children > * { cursor: initial; }

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

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

				body.nav_open #header .menu li.open > ul {
					display: block !important;
					margin: 0 0 0 16px !important;
				}
					
	#nav_wrapper { display: none; }
	
	body.nav_open #nav_wrapper {
		display: block;
		margin-top: 50px;
		padding-top: 10px;
		position: relative;
	}

		#primary_navigation, #auxiliary_navigation { display: none; }

		body.nav_open #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;
		}

		body.nav_open #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;
		}
		
		body.nav_open #auxiliary_navigation.social_media_links li:not(.no_phone) {
			display: inline-block !important;
		}
		
			body.nav_open #auxiliary_navigation.social_media_links li:not(.no_phone) a {
				position: absolute !important; top: 0 !important; left: 0 !important;
				margin-left: 0 !important;
			}

			#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;
				}

}


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

}
*/


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

}
*/