#close-btn {
  background-color: #2c2828;
  color: #FFF;
  display: none;
}
header nav li .sub-menu {
  padding: 0 3% 0 0;
  width: 48%;
}
header nav li .sub-menu li {
}
header nav li .sub-menu li .sub-menu li a {
  padding: 0 4% 0 0;
}
.menuFeaturedPost, .menuFeaturedProduct {
  position: absolute;
  top: 35px;
  right: 15px;
  width: 42%;
  padding: 0 0 0 6%;
  border-left: 2px solid #666666;
  margin: 0;
}
.menuFeaturedPost a, .menuFeaturedProduct a {
  display: block;
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  text-align: left;
  padding: 0;
}
#nav {
  /* Targeting firstInner instead of secondInner for dropdown functionality */

}
#nav .secondInner {
  /*display: block;*/
}
#nav .firstInner {
	overflow: hidden;
}
#menu-item-43:hover > a,
#menu-item-44:hover > a {
  color: #cd2726;
}
.main-nav li:hover .firstInner{
  display: block !important;
  height: 300px;
}
.main-nav li:hover{
  background: #2c2828;
}
/* Search */
header nav .sub {
  position: relative;
}
header nav .sub li {
  z-index: 5;
  position: relative;
}

.no_display {
 display:none;
}
header nav .sub li.signin,
header nav .sub li.cart {
  opacity: 1;
  -webkit-transition: opacity 0.2s ease;
  -moz-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
  -webkit-transition: opacity 0.2s ease 0s;
  -moz-transition: opacity 0.2s ease 0s;
  -o-transition: opacity 0.2s ease 0s;
  transition: opacity 0.2s ease 0s;
}
header nav .sub li.search {
  -webkit-transition: left 0s ease;
  -moz-transition: left 0s ease;
  -o-transition: left 0s ease;
  transition: left 0s ease;
  -webkit-transition: left 0s ease 0s;
  -moz-transition: left 0s ease 0s;
  -o-transition: left 0s ease 0s;
  transition: left 0s ease 0s;
  float: right;
}
header nav .sub.opening-search li.search,
header nav .sub.closing-search li.search {
  -webkit-transition: left 0.4s ease;
  -moz-transition: left 0.4s ease;
  -o-transition: left 0.4s ease;
  transition: left 0.4s ease;
  -webkit-transition: left 0.4s ease 0s;
  -moz-transition: left 0.4s ease 0s;
  -o-transition: left 0.4s ease 0s;
  transition: left 0.4s ease 0s;
}
header nav .sub.opening-search li.signin,
header nav .sub.open-search li.signin,
header nav .sub.closing-search li.signin,
header nav .sub.opening-search li.cart,
header nav .sub.open-search li.cart,
header nav .sub.closing-search li.cart {
  opacity: 0;
  z-index: 1;
}
header nav .sub.open-search li.search {
  left: -66%;
}
header nav .sub.active-search li.search {
  background-color: #d02127;
}
header nav .sub.active-search li.search a {
  color: #FFF;
}
header nav .sub.active-search li.search a::before {
  background: url("../img/navicons.png") center -104px no-repeat;
}
.sub .top-search-field {
  position: absolute;
  right: 0;
  width: 66%;
  z-index: 1;
  height: 0;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease 0s;
  -moz-transition: all 0.2s ease 0s;
  -o-transition: all 0.2s ease 0s;
  transition: all 0.2s ease 0s;
  border-bottom: 2px solid transparent;
}
.sub #top-search-container {
  display: block;
  opacity: 0;
  padding: 4px 1%;
  width: 98%;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease 0s;
  -moz-transition: all 0.2s ease 0s;
  -o-transition: all 0.2s ease 0s;
  transition: all 0.2s ease 0s;
  height: 0;
}
.sub.ready-search .top-search-field {
  z-index: 3;
}
.sub.ready-search #top-search-container {
  opacity: 1;
}

#search_mini_form ul.sub li.cart.non-region a{
	display: none;
	text-indent: -99999px;
}

@media (max-width: 970px) and (min-width: 886px) {
  header .bg nav .sub-menu li {
    padding: 0;
  }
  header .search-input {
    height: 76px !important;
    /* !important required to override !important on .search-input height in bootstrap.css */
  
    width: 64%;
  }
}
@media (max-width: 767px) {
  /* Overriding specific hover styles. I think these may be going away anyway in favor of more general styles if all the nav items will have dropdowns */
  #menu-item-43:hover .firstInner,
  #menu-item-44:hover .firstInner {
    display: none;
  }
  #menu-item-43:hover:after,
  #menu-item-44:hover:after {
    display: none;
  }
  #nav {
    width: 100%;
    color: #fff;
    position: absolute;
    z-index: 4;
    /* CSS-only mobile menu styles */
  
  }
  #nav:not(:target) #nav-wrapper {
    z-index: -1;
    height: 0;
  }
  #nav:target #mobile-menu {
    display: none;
  }
  #nav:target #close-btn {
    display: block;
  }
  #nav-wrapper {
    position: absolute;
    top: -350px;
    width: 100%;
    z-index: -1;
  }
  #nav-wrapper ul.main-nav {
    background-color: #2c2828;
    *zoom: 1;
    display: block;
    width: 100%;
  }
  #nav-wrapper ul.main-nav:before,
  #nav-wrapper ul.main-nav:after {
    content: "";
    display: table;
  }
  #nav-wrapper ul.main-nav:after {
    clear: both;
  }
  #nav-wrapper ul.main-nav li {
    display: block;
    clear: left;
    padding: 0;
  }
  #nav-wrapper ul.main-nav li a {
    display: block;
    position: relative;
    color: #fff;
    font-size: 0.875em;
    line-height: 1.28571em;
    font-weight: bold;
    outline: none;
    padding: 12px 0 12px 30px;
  }
  #nav-wrapper ul.main-nav li a:focus,
  #nav-wrapper ul.main-nav li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
  #nav-wrapper ul.main-nav li.is-active a {
    color: #fff;
  }
  #nav-wrapper ul.main-nav li .firstInner {
		display: block;
		overflow: hidden;
		-webkit-transition: all 0.3s ease-in-out;
			 -moz-transition: all 0.3s ease-in-out;
			   -o-transition: all 0.3s ease-in-out;
			      transition: all 0.3s ease-in-out;
		width: 100%;
		height: 0;
		min-height: 0;
	}
	.Powersports.open .firstInner{
		min-height: 241px !important;
	}
	.Cycling.open .firstInner{
		min-height: 281px !important;
	}
	.Apparel.open .firstInner{
		min-height: 41px !important;
	}
	.Athletes.open .firstInner{
		min-height: 121px !important;
	}
	.Who.open .firstInner{
		min-height: 81px !important;
	}
	.News.open .firstInner{
		min-height: 201px !important;
	}
  #nav-wrapper ul.main-nav li .firstInner .secondInner {
    border-top: 1px solid #4e4b4b;
  }
  #nav-wrapper ul.main-nav li .firstInner .sub-menu {
    float: none;
    width: 100%;
    padding: 0;
    background-color: #1f1d1d;
  }
  #nav-wrapper ul.main-nav li .firstInner .sub-menu li {
    font-size: .9em;
    text-transform: none;
    width: 100%;
    margin: 0;
    border: none;
    padding: 8px 0;
    /* Only show first links list in the subnav. Works for Powersports and Cycling subnavs.
                 * Depending on what appears in subnav for other sections, this may need to change.
                 */
  
    /*display: none;*/
    /* These links say "Shop" in normal view, but should say "All Powersports Helmets"
                 * and "All Cycling Helmets" in mobile view. 
                 * This is only appending the text after "Shop", so may need to 
                 * look into an alternative to change the text for mobile, to have more control.
                 */
  
  }
  #nav-wrapper ul.main-nav li .firstInner .sub-menu li:first-child {
    display: block;
  }
  #nav-wrapper ul.main-nav li .firstInner .sub-menu li:first-child li {
    display: block;
  }
  #nav-wrapper ul.main-nav li .firstInner .sub-menu li a {
    font-family: "HelveticaNeueW01-77BdCn 692722";
    background: none;
    padding: 4px 0 4px 30px;
  }
  #nav-wrapper ul.main-nav li .firstInner .sub-menu li ul {
    float: none;
  }
  #nav-wrapper ul.main-nav li .firstInner .sub-menu li ul li {
    font-size: 1em;
    padding: 0;
  }
  #nav-wrapper ul.main-nav li.open a {
    background-position: right 0;
  }
  #nav-wrapper ul.main-nav li.open .firstInner {
    /* CSS transitions don't work when animating from height 0px to auto 
               * So using min-height instead... Since some elements only have 1 item in them, we have to set to this element, ~40px 
               */
    display: block !important;
    width: 100% !important;
    height: auto;
	}
  #nav-wrapper ul.main-nav li.open .secondInner {
  	display: block;
  }
  /* Javascript mobile menu styles */
  .js-ready #nav #nav-wrapper {
    height: 0;
  }
  .js-ready #nav:target #mobile-menu {
    display: block;
  }
  .js-ready #nav:target #close-btn {
    display: none;
  }
  .js-ready #nav:not(:target) #nav-wrapper {
    z-index: -1;
  }
  .js-ready .main-nav li a {
    background: url('../img/mobile-nav-sprite.png') right -40px no-repeat;
  }
  .js-nav #nav #nav-wrapper {
    display: block;
    min-height: 252px;
    top: 55px;
    -webkit-transition: all 500ms cubic-bezier(0.390, 0.575, 0.565, 1.000); 
       -moz-transition: all 500ms cubic-bezier(0.390, 0.575, 0.565, 1.000); 
        -ms-transition: all 500ms cubic-bezier(0.390, 0.575, 0.565, 1.000); 
         -o-transition: all 500ms cubic-bezier(0.390, 0.575, 0.565, 1.000); 
            transition: all 500ms cubic-bezier(0.390, 0.575, 0.565, 1.000); /* easeOutSine */
    
    -webkit-transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000); 
       -moz-transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000); 
        -ms-transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000); 
         -o-transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000); 
            transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000); /* easeOutSine */
  }
  .js-nav-closed #nav #nav-wrapper{
    -webkit-transition: all 500ms cubic-bezier(0.390, 0.575, 0.565, 1.000); 
       -moz-transition: all 500ms cubic-bezier(0.390, 0.575, 0.565, 1.000); 
        -ms-transition: all 500ms cubic-bezier(0.390, 0.575, 0.565, 1.000); 
         -o-transition: all 500ms cubic-bezier(0.390, 0.575, 0.565, 1.000); 
            transition: all 500ms cubic-bezier(0.390, 0.575, 0.565, 1.000); /* easeOutSine */
    
    -webkit-transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000); 
       -moz-transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000); 
        -ms-transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000); 
         -o-transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000); 
            transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000); /* easeOutSine */
  }
  .js-nav #nav #close-btn {
    display: block;
  }
  .js-nav #nav #mobile-menu {
    display: none;
  }
  .js-nav.js-ready {
    /* These styles are only used if the JS menu hasn't worked at some point
         * and we get stuck with a "#nav" at the end of the URL from the CSS-only menu */
  
  }
  .js-nav.js-ready #nav:target #mobile-menu {
    display: none;
  }
  .js-nav.js-ready #nav:target #close-btn {
    display: block;
  }
  /* Search */
  header nav .sub {
    position: static;
    float: right;
    margin-top: -55px;
  }
  header nav .sub li.cart,
  header nav .sub li.search {
    width: 50%;
  }
  header nav .sub .top-search-field {
    top: 55px;
    left: 0;
    height: 0px;
    width: 100%;
    overflow: hidden;
    -webkit-transition: height 0.005s ease;
    -moz-transition: height 0.005s ease;
    -o-transition: height 0.005s ease;
    transition: height 0.005s ease;
    -webkit-transition: height 0.005s ease 0s;
    -moz-transition: height 0.005s ease 0s;
    -o-transition: height 0.005s ease 0s;
    transition: height 0.005s ease 0s;
  }
  header nav .sub.opening-search .top-search-field,
  header nav .sub.open-search .top-search-field{
    height: 94px;
    z-index: 5;
    border-color: #e0e0e0;
 }
  header nav .sub.opening-search li.cart,
  header nav .sub.open-search li.cart,
  header nav .sub.closing-search li.cart {
    opacity: 1;
    z-index: 5;
  }
  header nav .sub.opening-search li.signin,
  header nav .sub.open-search li.signin,
  header nav .sub.closing-search li.signin {
    opacity: 0;
  }
  header nav .sub.open-search li.search{
    left: 0px;
  }
  header nav .sub.open-search #top-search-container{
    opacity: 1;
	
  }
  header nav .sub.closing-search #top-search-container {
    opacity: 0;
  }
}