#mobileNav {
	position: fixed;
    background: rgba(0,0,0, .9);
    z-index: 20000;
    height: 100%;
    // width: 260px;
    width: 100%;
    padding: 20px 0;
    right: -260px;
    overflow-y: scroll;

    ul.subAccount {
    	color: white;
    	margin-top: 20px;

		li {
			overflow: hidden;

			.inner,
			.twelve  {
				padding: 0;
			}

			.three {
				float: left;
				width: 30%;
			}

			.nine {
				padding: 10px 0px 10px 10px;
				float: right;
				width: 70%;
			}

			.twelve {
				margin-bottom: 10px;
				font-size: 14px;
			}

			&:last-child {

				a {
					border-bottom: none;
					padding-bottom: 10px;
				}
			}

			a {
				float: none;
				display: block;
				padding: 16px 0;
				border-bottom: 1px dotted #c1c1c1;
				margin-right: 0;
				text-transform: capitalize;

				&:hover {
					color: $blue; 
				}

				&.checkOut {
					margin-top: 20px;
					background: #258dc8; /* Old browsers */
				    background: -moz-linear-gradient(top, #258dc8 0%, #0066a1 100%); /* FF3.6+ */
				    background: -webkit-gradient(linear, left top, left bottom, color-stop(1000%,#258dc8), color-stop(0%,#0066a1)); /* Chrome,Safari4+ */
				    background: -webkit-linear-gradient(top, #258dc8 0%,#0066a1 100%); /* Chrome10+,Safari5.1+ */
				    background: -o-linear-gradient(top, #258dc8 0%,#0066a1 100%); /* Opera 11.10+ */
				    background: -ms-linear-gradient(top, #258dc8 0%,#0066a1 100%); /* IE10+ */
				    background: linear-gradient(to bottom, #258dc8 0%,#0066a1 100%); /* W3C */
				    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8', endColorstr='#0066a1',GradientType=0 ); /* IE6-9 */
					font-weight: 300;
					text-align: center;
					color: white;
					border-radius: 4px;
					margin-bottom: 10px;
					font-size: 16px;

					-webkit-transition: 0ms ease-out;
				    -moz-transition: 0ms ease-out;
				    -o-transition: 0ms ease-out;
				    transition: 0ms ease-out;

					&:hover {
						background: $blue;
					}
				}

				i {
					font-size: 16px;
					margin-right: 6px;
					position: relative;
					top: 2px;
					color: $blue;
					min-width: 16px;

				}
			}	
		}
	}

    .closeMenu {
    	margin-bottom: 10px;
    	border-bottom: 1px solid #c1c1c1;
    	padding: 0 4%;

    	img {
    		
    		&.power {
    			max-width: 120px;
    		}

		    &.closeButton {
		    	max-width: 54px;
			    position: absolute;
			    right: 10px;
			    padding: 10px;
		    }
    	}
    }

    ul {
    	margin: 0;
    	padding: 0;

    	&.subAccount {
    		display: block;
    	}

    	li {
    		list-style: none;

    		&.menu-item-has-children {
    			position: relative;

    			&:after {
					content: "\f0d7";
					font-family: FontAwesome;
					position: absolute;
					right: 10px;
					top: 18px;
					font-size: 12px;
					color: white;
				}
    		}

    		&.current-menu-item {

				a {
					color: $red;
					font-weight: 600;
				}
			}

    		a {
    			color: white;
    			font-weight: 400;
    			padding: 16px 4%; 
    			display: block;
    			cursor: pointer;
    		}

    		.sub-menu {
				margin: 0;
			    padding: 0px 0;
			    background: #f1f1f1;
			    position: relative;
			    width: 100%;
			    display: none;
			    font-size: 14px;
			    z-index: 10;

			    li {
			    	padding: 0 2%;
			    	border-bottom: 1px solid #999999;

			    	&.overview {
		    			background: #999999;

		    			a {
		    				color: white;
		    				font-weight: 600;
		    			}
		    		}

			    	a {
			    		color: #1d1d1d;
			    		font-weight: 400;
			    	}
			    }
			}
    	}
    }
}

#topMenu {

	p {
		float: left;
		display: block;
		margin: 0;
		padding: 6px 0 0 0;
		font-size: em(24,16);
		text-transform: capitalize;
		color: $blue;

		&.emptyCart {
			text-align: center;
			width: 100%;
			padding: 20px 0px 30px;
			border-bottom: 1px dotted rgb(193, 193, 193);
			font-weight: 200;
			color: $light-black;
		}

		strong {
			color: $red;
		}
	}

	ul {
		width: 100%;
		margin: 0;
		padding: 0;

		li {
			list-style: none;

			&:first-child {

				a {

					&:hover {
						color: $black;
					}
				}
			}

			i {
				position: relative;
				font-size: 30px;
				margin-right: 10px;
				padding: 4px;
				color: #f2f2f2;

				span {

					&.loggedIn {
						position: absolute;
						left: 6px;
						top: 1px;
						display: none;
						
						i {
							font-size: 10px;
							color: rgb(90, 172, 229);	
						}
					}
				}

				&.search {
					font-size: 24px;
					top: 10px;
					display: block;
					width: 25px;
					height: 25px;
					cursor: pointer;

					&.iconSearch {
						float: right;
						background: url(../../../images/searchIcon.png) no-repeat center center;
					}
					&.iconClose {
						float: right;
						background: url(../../../images/iconClose.png) no-repeat center center;
					}
				}

				&.account {

				}
			}

			a {
				color: $black;
				display: inline-block;
				float: right;
				margin-right: 10px;
				padding: 4px;
				font-size: em(14,16);
				text-transform: lowercase;

				&:hover {
					color: $red;
				}
			}

			.searchInput {
				position: relative;
				max-width: 900px;
				margin: 0 auto;

				input {
					width: 93%;
					padding: 6px;
					font-size: 0.875em;
					right: 80px;
					position: absolute;
					background: transparent;
					border: none;
					color: $light-grey;
					top: 8px;
					font-weight: 400;
					display: none;

					&.submit {
						width: 25px;
						height: 25px;
						background: url(../../../images/searchIcon.png) no-repeat center center;
					    border-radius: 0;
					    border: none;
					    /* height: 35px; */
					    font-size: 19px;
					    color: white;
					    float: left;
					    position: absolute;
					    left: -52px;
					    top: 10px;
					}
				}
			}
				
			ul.subAccount {
				position: absolute;
				width: 28%;
				right: 9px;
				background: white;
				border: 1px solid #c1c1c1;
				top: 47px;
				z-index: 20;
				padding: 20px 10px 10px 10px;
				border-radius: 4px;
				box-shadow: 0px 1px 0px #c1c1c1;
				display: none;

				&:before {
					width: 0; 
					height: 0; 
					content: "";
					position: absolute;
					border-left: 9px solid transparent;
					border-right: 9px solid transparent;
					border-bottom: 9px solid white;
					top: -8px;
					right: 19px;
					z-index: 20;
				}

				&:after {
					width: 0; 
					height: 0; 
					content: "";
					position: absolute;
					border-left: 9px solid transparent;
					border-right: 9px solid transparent;
					border-bottom: 9px solid #c1c1c1;
					top: -10px;
					right: 19px;
				}

				li {
					overflow: hidden;

					.inner,
					.twelve  {
						padding: 0;
					}

					.nine {
						padding: 10px 0px 10px 10px;
					}

					.twelve {
						margin-bottom: 10px;
						font-size: 14px;
					}

					&:last-child {

						a {
							border-bottom: none;
							padding-bottom: 10px;
						}
					}

					a {
						float: none;
						display: block;
						color: $ninty-black;
						padding: 16px 0;
						border-bottom: 1px dotted #c1c1c1;
						margin-right: 0;
						text-transform: capitalize;

						&:hover {
							color: $blue; 
						}

						&.checkOut {
							background: #258dc8; /* Old browsers */
						    background: -moz-linear-gradient(top, #258dc8 0%, #0066a1 100%); /* FF3.6+ */
						    background: -webkit-gradient(linear, left top, left bottom, color-stop(1000%,#258dc8), color-stop(0%,#0066a1)); /* Chrome,Safari4+ */
						    background: -webkit-linear-gradient(top, #258dc8 0%,#0066a1 100%); /* Chrome10+,Safari5.1+ */
						    background: -o-linear-gradient(top, #258dc8 0%,#0066a1 100%); /* Opera 11.10+ */
						    background: -ms-linear-gradient(top, #258dc8 0%,#0066a1 100%); /* IE10+ */
						    background: linear-gradient(to bottom, #258dc8 0%,#0066a1 100%); /* W3C */
						    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8', endColorstr='#0066a1',GradientType=0 ); /* IE6-9 */
							font-weight: 300;
							text-align: center;
							color: white;
							border-radius: 4px;
							margin-bottom: 10px;
							font-size: 16px;

							-webkit-transition: 0ms ease-out;
						    -moz-transition: 0ms ease-out;
						    -o-transition: 0ms ease-out;
						    transition: 0ms ease-out;

							&:hover {
								background: $blue;
							}
						}

						i {
							font-size: 16px;
							margin-right: 6px;
							position: relative;
							top: 2px;
							color: $blue;
							min-width: 16px;

						}
					}	
				}
			}
		}
	}
}

#navWrapper {
	padding-bottom: 0;
	max-width: 1000px;
	margin: 0 auto;
	width: 1000px;
    float: none;
    height: 51px;

    .mobileShow {

    	img {

    		&.mobilelogo {
    			max-width: 50px;
			    position: relative;
			    top: 9px;
			    left: 2%;
    		}
    	}
    }

	#mobileAccount {
		position: absolute;
		top: 0px;
		right: 0px;
		background: $light-grey;
		width: 60px;
		height: 70px;
		text-align: center;
		z-index: 10;
		display: none;

		i {
			position: relative;
			font-size: 28px;
			color: white;

			span {

				&.loggedIn {
					position: absolute;
					left: 5px;
					top: -3px;
					display: none;
					
					i {
						font-size: 10px;
						color: rgb(90, 172, 229);	
					}
				}
			}

			&.search {
				font-size: 24px;
				top: 2px;
			}

			&.account {
				top: 22px;
			}
		}
	}

	#menuContainer {
		position: relative;
		top: 4px;

		nav {

			@include bp(mobile) {
				display: none;
			}

			#searchform {
				position: relative;
				top: -8px;
				float: right;
				box-shadow: none;
				border: none;

				input {
					padding: 10px; 
					text-transform: lowercase;
					border: 1px solid $light-grey;
					color: $light-grey;

					&#searchsubmit {
						background: $red;
						color: white;
						border: none;
						padding: 10px;
						font-weight: 400;
						border: 1px solid $red;

						-webkit-transition: 300ms ease-out;
						-moz-transition: 300ms ease-out;
						-o-transition: 300ms ease-out;
						transition: 300ms ease-out;

						&:hover {
							background: white;
							color: $red;
						}
					}
				}
			}

			ul {

				&#mainMenu {
					margin: 0;
					padding: 0;
					position: relative;
					top: 12px;

					li {
						list-style: none;
						display: inline-block;
						float: left;
						position: relative;

						// &:hover ul.sub-menu {
						// 	display:block;
						// }

						&.menu-item-1003,
						&.menu-item-836 { // Home menu icon
							background: url(../../../images/experienCES_logo.png) no-repeat center center;
							background-size: 100%;
							position: relative;
							top: -8px;
							margin-right: 36px;

							&.current-menu-item {

								a {
									background: transparent;
								}
							}

							a {
								text-indent: -9999px;
							    display: inline-block;
							    height: 24px;
							    width: 141px;
							}
						}

						&.current-menu-item,
						&.current_page_parent {

							a {
								color: white;
								background: $red;

								&:hover {
									color: white !important;
								}
							}
						}

						&.menu-item-has-children {

							.sub-menu {

								li {

									a {
										background: none;
										text-align: center;
									}
								}
							}

							&:hover {

								a {
									// background: url(../../../images/dropDownArrow.png) center 24px no-repeat;
								}
							}
						}

						ul {

							&.sub-menu {
								display: none;
								position: absolute;
							    top: 3px;
							    left: -40px;
							    margin: 45px 0 0 0;
							    padding: 0;
							    // background-color: rgba(255,255,255,.9);
							    background: white;
							    border: 1px solid $light-grey;
							    border-top: 1px solid rgba(255,255,255,.1);
							    border-radius: 0px 0px 4px 4px;

								li {
									float: none; 
									margin-right: 0;

									a {
										padding: 10px;
										display: block; 
										min-width: 150px;
										font-size: em(16,16);
									}
								}
							}
						}

						a {
							color: white;
							text-transform: capitalize;
							font-size: em(14, 16);
							text-align: center;
							font-weight: 400;
							padding: 17px 12px;

							&:hover {
								color: $light-grey;

								// .sub-menu {
								// 	display: block;
								// }
							}
						}
					}
				}
			}
		}
	}

	@include bp(mobile) {
		height: 70px;
	}
}

#subNav {
    background: rgba(247,247,247, .8);
    position: relative;
    padding: 0 12%;
    height: 112px;

    @include bp(mobile) {
    	height: auto;
    	display: none;
    }

    // Do not edit
    &.branch-basics {

    	ul {

    		li {
    			background: url(../../../images/branch-basics.png) no-repeat;

    			&.digital-signage {
    				background-position: left -12px;
    			}
    			&.exterior-signage {
    				background-position: -106px -12px;
    			}
    			&.merchandising {
    				background-position: -212px -12px;
    			}
				&.new-locations {
    				background-position: -318px -12px;
    			}
    			&.uniforms {
    				background-position: -424px -12px;
    			}
    			&.vehicle-graphics {
    				background-position: -530px -12px;
    			}    			
    		}
    	}
    }

    &.digital-marketing {

    	ul {

    		li {
    			background: url(../../../images/digital-marketing.png) no-repeat;

    			&.app {
    				background-position: left -12px;
    			}
    			&.email-blast {
    				background-position: -106px -12px;
    			}
    			&.presentations {
    				background-position: -212px -12px;
    			}
				&.seo {
    				background-position: -318px -12px;
    			}
    			&.social-media {
    				background-position: -424px -12px;
    			}
    			&.website {
    				background-position: -530px -12px;
    			}    			
    		}
    	}
    }

    &.print-marketing {

    	ul {

    		li {
    			background: url(../../../images/print-marketing.png) no-repeat;

    			&.brochures {
    				background-position: left -12px;
    			}
    			&.custom-pieces {
    				background-position: -106px -12px;
    			}
    			&.direct-mail {
    				background-position: -212px -12px;
    			}
				&.essentials {
    				background-position: -318px -12px;
    			} 	
    		}
    	}
    }

    &.promotional-items {

    	ul {

    		li {
    			background: url(../../../images/promotional-items.png) no-repeat;

    			&.apparel {
    				background-position: left -12px;
    			}
    			&.bags {
    				background-position: -106px -12px;
    			}
    			&.events {
    				background-position: -212px -12px;
    			}
				&.golf {
    				background-position: -318px -12px;
    			}  
    			&.hunting {
    				background-position: -424px -12px;
    			}
    			&.seasonal {
    				background-position: -530px -12px;
    			} 
    			&.clearance {
    				background-position: -636px -12px;
    			}    			
    		}
    	}
    }

    &.support {

    	ul {

    		li {
    			background: url(../../../images/support.png) no-repeat;

    			&.about {
    				background-position: left -12px;
    			}
    			&.contact {
    				background-position: -106px -12px;
    			}
    			&.faq {
    				background-position: -212px -12px;
    			}
				&.resources {
    				background-position: -318px -12px;
    			} 	
    		}
    	}
    }

    ul {
    	padding: 0;
    	margin: 0;
    	display: table;
    	margin: 0 auto;

    	&.sub-menu {

    		&.active {

    			li {
    				opacity: 0;
    			}
    		}
    	}

    	li {
    		list-style: none;
    		float: left;
    		margin-right: 20px;
    		max-width: 106px;

    		&:last-child {
    			margin-right: 0;
    		}
    		
    		a {

    			padding: 0 0 20px 0;
			    text-align: center;
			    vertical-align: bottom;
			    height: 112px;
			    min-width: 106px;
			    max-width: 106px;
    			display: table-cell;
    			color: $dark-black;
    			font-size: em(13,16);
    			font-weight: 400;

    			&:hover {
    				color: $light-black;
    			}
    		}
    	}
    }
}