/* global navigation */
#globalNav {
	font-weight: 300;
	background: hsl(350, 78%, 30%);
	padding: 5px 1em;
	height: 3em;
	text-align: center;
	position: relative;
	font-size: 14px;

	.wrapper {
		height: 100%;
		position: relative;
	}

	@media ( min-width: 1200px ) {
		height: 4em;
	}
}

#globalMenuButton, #globalSearchButton {
	color: #fff;
	text-transform: uppercase;
	border: none;
	height: 100%;
	line-height: 3em;
	font-size: 0;
	display: block;
	padding: 0 2em;
	background-position: center 10px;
	background-repeat: no-repeat;
	width: 3rem;
	font-weight: 400;
	text-decoration: none;

	@media ( min-width: 550px ) {
		padding: 0 0 0 30px;
		font-size: 1em;
		background-position: left 11px;
	}

	@media ( min-width: 1200px ) {
		background-size: 27px;
		padding-left: 35px;
		line-height: 3.7em;
		font-size: 1.1em;
	}
}

#globalMenuButton {
	float: left;
	background-image: url('images/icons/menu-white.svg');
	background-size: 27px;

	&.jqActive {
		background-image: url('images/icons/close-white.svg');
		background-size: 20px;
	}

	@media ( min-width: 550px ) {
		background-size: 22px;
	}

	@media ( min-width: 1200px ) {
		background-size: 26px;
		background-position: left 18px;
	}
}

#globalWordmark {
	background-image: url("images/wordmark-white.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	height: 100%;
	width: 80px;
	border: none;
	display: inline-block;
	-webkit-backface-visibility: hidden; /* To fix a bug in webkit where the wordmark was having jagged edges occasionally. @see http://stackoverflow.com/a/6898097/362769 */

	@media ( min-width: 1200px ) {
		width: 100px;
	}
}

#globalSearchButton {
	float: right;
	background-image: url('images/icons/search-white.svg');
	background-size: 20px;

	&.jqActive {
		background-image: url('images/icons/close-white.svg');
	}

	@media ( min-width: 550px ) {
		background-size: 18px;
		width: auto;
	}

	@media ( min-width: 1200px ) {
		background-size: 23px;
		background-position: left 17px;

		&.jqActive {
			background-position: left 15px;
		}
	}
}

#globalSearch {
	--width: 0;
	--height: 2.4em;
	overflow: hidden;
	width: var(--width);
	height: var(--height);
	float: right;
	transition-property: width, background-color;
	transition-duration: .2s;
	background-color: #fff;
	border-radius: 15px;
	margin-top: 3px;
	padding: 0;
	position: relative;
	display: grid;
	grid-template-columns: auto calc( var(--height) + 5px );

	&:focus-within {
		outline: 3px solid hsl(183 100% 50%);
	}

	&.jqActive {
		--width: 50vw;
		--height: 2.4em;
	}

	input[type="text"],
	input[type="submit"] {
		border: none;
		height: 100%;
		box-sizing: border-box;
		padding: 0;
		margin: 0;
		font-size: 1em;
	}

	input[type="text"] {
		margin-left: 1em;
		background: transparent;

		&:focus {
			/* take away the focus blue border */
			outline: none !important;
			box-shadow: none !important;
		}
	}

	& input[type="submit"] {
		background-image: url('images/icons/search-white.svg');
		background-repeat: no-repeat;
		background-size: 50%;
		background-color: hsl(0, 0%, 60%);
		background-position: center;
		border: none;
		font-size: 0;
		cursor: pointer;
		width: 100%;

		border-radius: 0; /*iOS*/
	}


	@media (min-width: 800px) {
		margin-top: .5rem;

		&.jqActive {
			--height: 1.7em;
			--width: 175px;
		}
	}

	@media ( min-width: 1200px ) {
		&.jqActive {
			--height: 2.2em;
			--width: 240px;
			margin-top: .7rem;
		}
	}
}


.drawerPointer {
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 10px solid var(--colorGarnet_dark2);
	width: 0;
	height: 0;
	position: absolute;
	display: none;
}

#globalNav .drawerPointer {
	bottom: -5px;
	left: 1.2em;
}


#globalMenu {
	background: var(--colorGarnet_dark2);
	color: var(--colorGray_light);
	display: none;
	position: relative;
	padding: 2em;
	overflow: auto;
	border-bottom: 2px solid #000;

	& ul a {
		color: inherit;
		border: none;
		text-decoration: none;
	}

	& a:hover, & a:active {
		text-decoration: underline;
	}

	& ul {
		list-style-type: none;
		margin: 0;
		position: relative;
	}

	& li {
		padding: .8em 0;
		font-weight: 700;

		@media ( min-width: 550px ) {
			padding: .5em 0;
		}
	}

	& ul ul {
		display: none;
		padding-top: .5em;
		padding-left: 1em;
		color: hsl(22, 11%, 72%);

		@media ( min-width: 550px ) {
			display: block !important;
			padding-left: 0;
		}
	}

	& .btn {
		display: inline-block;
		padding: .8em;
		border: none;
		border-radius: 4px;
		font-weight: 300;
		margin-right: 5px;
		font-style: normal;
		color: #fff;
		background-color: #881124;
		text-decoration: none;
	}

	& a.btn:hover, & a.btn:active {
		text-decoration: none;
		background-color: hsl(350, 100%, 22%);
		box-shadow: 0 0 3px hsla(0, 0%, 0%, .2);
	}

	.button-section {
		text-align: left;
		padding: 1em 0;
		float: left;
		width: 50%;
		font-style: italic;
		box-sizing: border-box;

		@media ( min-width: 800px ) {
			padding-top: 11px;
		}
	}

	.btn.quad {
		background: var(--colorGray_light);
		color: var(--colorBlue);
		transition: .3s background;
	}

	.btn.quad:hover {
		background: white;
	}

	@media ( min-width: 550px ) {
		box-sizing: border-box;
		font-size: 1.1em;
		padding: 1.2em;

		.button-section {
			padding: 27px 2% 0;
			text-align: left;
		}

		.drawerPointer {
			left: 1.1em;
		}
	}
}


#globalMenu1 ul ul li {
	font-weight: 400;
}

.global-menu2-col2.button-section {
	text-align: center;
}

.toggleSubMenu {
	position: absolute;
	display: block;
	height: 33px;
	width: 33px;
	background-color: hsla(0, 0%, 10%, .2);
	right: 5px;
	top: 5px;
	border-radius: 2em;
	cursor: pointer;
	transition: .2s transform;

	&:before,
	&:after {
		content: '';
		display: block;
		position: absolute;
		background: hsl(0, 0%, 100%);
		width: 12px;
		height: 2px;
		left: 5px;
		top: 5px;
		border-radius: 2px;
	}

	&:before {
		transform: rotate(45deg);
		left: 7px;
		top: 17px;
	}

	&:after {
		transform: rotate(-45deg);
		left: 15px;
		top: 17px;
	}

	&.jqActive {
		transform: rotate(180deg);
	}

	@media ( min-width: 800px ) {
		display: none;
		transform: rotate(-90deg);
	}

	@media ( min-width: 1400px ) {
		top: 13px;
	}
}


@media ( min-width: 550px ) {
	#globalMenu .toggleSubMenu {
		display: none;
	}

	#globalMenu1 > ul,
	#globalMenu2 ul {
		width: 46%; /* x2 = 92 */
		padding: 2%; /* x4 = 8 */
		box-sizing: inherit;
		float: left;
	}
}

@media ( min-width: 800px ) {
	#globalMenu1,
	#globalMenu2 {
		width: 46%;
		padding: 0;
		box-sizing: inherit;
		float: left;
	}

	#globalMenu2 {
		width: 54%;

		.global-menu2-col1 {
			width: 43%; /*56%*/
		}

		.global-menu2-col2 {
			width: 48%; /*36%;*/
		}

		.global-menu2-col2.button-section {
			margin-left: 4%;
		}
	}
}

@media ( min-width: 1400px ) {
	#globalMenu1,
	#globalMenu2 {
		font-size: 1.2em;
	}
}