/*
	MegaMenu.css

	This replaces #NavBar. All references to #NavBar can be removed from hcf.css, once you've integrated this code.

	Either keep as a separate file, or insert in hcf.css (I recommend somewhere near the top of the file, but it shouldn't matter).

*/

#MegaMenuWrap
{

    background: #fff;
    /*border-bottom: 1px solid #fff;*/
    position: relative;
    z-index: 15000;
    font-size:10px;
    line-height:21px;
    
}

#MegaMenu
{
    /*width: 945px;*/
    margin: 0 auto;
        
}

#MegaMenu ul
{
    position: relative;
    list-style: none;
}


/* top level menu is horizontal (float left)*/
#MegaMenu ul li
{
    float: left;

}

#MegaMenu ul li a
{
    font-family:'Whitney SSm A', 'Whitney SSm B', Tahoma, sans-serif;
    float: left;
    text-decoration: none;
    font-size: 14px;
    color: #222;
    font-weight:700;
    /*padding: 5px 30px 26px 20px;*/
    /*border-width: 0 0 0 1px;
    border-color: #fff;
    border-style: solid;*/
    display:block;
   
}

.attached
{
    /*margin-left:44px;*/
    margin-left: 40px !important;
}
.width_info_menu
{
    /*margin-left:44px;*/
    margin-left: 40px !important;
    
}
.restricted_info_menu
{
    /*margin-left:44px;*/
    margin-left: 40px !important;
}

.no_class
{
    /*margin-left:44px;*/
    margin-left: 40px !important;
}

#MegaMenu ul li.info_menu > a 
{
	
	padding: 5px 35px 26px 0px;
	  display: inline-block;
}
#MegaMenu ul li.info_menu:hover > a
{
	    display: inline-block;
	padding: 5px 35px 26px 0px;
}
#MegaMenu ul li:hover a
{
    display: block;   
    /*border-left: 1px solid #fff;*/
}
#MegaMenu li:hover .level_two
{
   display: inline-block;
}
#MegaMenu ul li.info_menu > a:after
{
  width: 14px;
  height: 10px;
  background-image: url('../images/chevron-down.png?rel=7e9cb0c0');
  content: '';
  margin-left: 8px;
  display: inline-block;
           
}


#MegaMenu ul li.width_info_menu > a 
{
	padding: 5px 40px 26px 35px;
	  display: inline-block;
}

#MegaMenu ul li.width_info_menu > a:after
{
  width: 14px;
  height: 10px;
  background-image: url('../images/chevron-down.png?rel=7e9cb0c0');
  content: '';
  margin-left: 8px;
  display: inline-block;
     
       
}


#MegaMenu ul li.attached > a:after
{
  width: 14px;
  height: 10px;
  background-image: url('../images/chevron-down.png?rel=7e9cb0c0');
  content: '';
  margin-left: 8px;
  display: inline-block;
     
       
}


#MegaMenu ul li.attached > a
{
 
  	padding: 5px 20px 26px 0px;
     
       
}


#MegaMenu ul li.restricted_info_menu > a:after
{
  width: 14px;
  height: 10px;
  background-image: url('../images/chevron-down.png?rel=7e9cb0c0');
  content: '';
  margin-left: 8px;
  display: inline-block;
}



.sitenav__item:hover .sitenav__link:before
 {
  display: block;
}

.sitenav__link {
  padding: 0 0 20px!important;
  display: block;
  position: relative;
}
.sitenav__link:hover,
.sitenav__link:focus {
  text-decoration: none;
}

.sitenav {
  padding: 20px 0 0;
  margin: 20px 0 0;
  border-width: 1px 0 0;
  border-style: solid;
  position: relative;
  font-size: 13px;
  /*font-weight: 700;*/
  /*width:940px;*/
  list-style: none;
  text-align: center;
  *zoom: 1;
  border-color:#f8d3cf;
  width: 100%;
}
.sitenav:before,
.sitenav:after {
  display: table;
  content: "";
  line-height: 0;
}
.sitenav:after {
  clear: both;
}




#MegaMenu ul li.info_menu_three a
{
 
    background: #9f1644 ;
    border-left: 1px solid #85163B;
}




/* The last menu item (i.e. 'Join') */
#MegaMenu ul li a.last
{
    background: #fff;
    border-right: 0px solid #D2D2D2;
    border-left: 0px solid #D2D2D2;
   /* padding: 5px 0px 26px 30px;*/
    color:#E30450;
}



/* The last menu item (i.e. 'Join') */
#MegaMenu ul li a.last:hover,
#MegaMenu ul li a.last:focus
{  
    color:#9d1a46;
}



/* Second level menus */

#MegaMenu span.level_two
{
    position: absolute;
    top: 36px;
    left: 0;
    background: #9f1644;
    z-index: 15000;
    display: none;
    text-align:left;
    padding:27px 0 30px;

}

/* don't use this in production! you can change to class="level_two debug" so you don't need to hover the menu you're testing */
.debug
{
    display: block !important;
}

.dropdown__arrow
{
  margin-left: -5px;
  border-width: 10px;
  border-style: solid;
  border-color: #ffffff transparent transparent;
 
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 1001;
    
}
/* right-aligned menu */
#MegaMenu .right span.level_two
{
    left: auto;
    right: 0;
}

/* "attached right" is outside CSS, see megamenu.js for this */

#MegaMenu .level_two .subMenu
{
    font-size: 16px;
    display: block;
    margin-left: 15px;
    margin-bottom: 8px;
    font-weight: 700;
}

#MegaMenu .level_two ul .info_level_three ul
{
    display: block;
    float: left;
    width: 215px;
    margin: 0px 0px 20px 0px;
}

#MegaMenu .level_two ul .info_level_three ul li
{
    width: 215px;
}

#MegaMenu .info_menu .level_two 
{
    width: 480px;
}

#MegaMenu .info_menu .level_two_corp 
{
    width: auto !important;
}

/* use class="attached" to align to the top menu item, not the whole menu */
#MegaMenu .attached .level_two
{
    left: auto;
    right: auto;
}

#MegaMenu .width_info_menu .level_two 
{
    width: 480px;
    right: auto;
    left: auto;
}

#MegaMenu .restricted_info_menu .level_two 
{
    width: 940px;
}

#MegaMenu .info_menu .level_two ul
{
    color: #fff;
    margin: 28px 0px 20px 0px;
    display:block;
}

#MegaMenu .restricted_info_menu .level_two ul
{
    color: #fff;
    margin: 28px 0px 0px 0px;
}

#MegaMenu .width_info_menu .level_two ul
{
    color: #fff;
    margin: 28px 0px 0px 0px;
}

#MegaMenu .attached .level_two ul

{
    display: block;
    float: left;
    width: 240px;
    margin: 28px 0px 20px 0px;
    color: #fff;
    z-index: 10;

}


/* trigger the menu display on hover */
#MegaMenu li:hover .level_two
{
    display: block;
    z-index:10;
}

#MegaMenu li:hover .level_two,
#MegaMenu li:hover .dropdown__arrow
{
    display: block;
}

#MegaMenu li:hover .level_two a
{
    background-image: none;
    border-left: none;
}

#MegaMenu .info_menu .level_two > ul > li
{
    float: left;
    padding-left: 10px;
    padding-right: 10px;
}


#MegaMenu .restricted_info_menu .level_two > ul > li
{
    float: left;
    padding-left: 10px;
    padding-right: 10px;
}

#MegaMenu .width_info_menu .level_two > ul > li
{
    float: left;
    padding-left: 10px;
    padding-right: 10px;
}

#MegaMenu .attached .level_two > ul > li
{
    float: none;
    padding-left: 10px;
    padding-right: 10px;
}

#MegaMenu .level_two li a
{
    float: none;
    background: none;
    border: solid #b22d59;
    border-width: 2px 0 0 0;
    color: #fff;
    padding: 7px 0 7px 15px;
    font-size:12px;
}

#MegaMenu .level_two .multiColumnMenu 
{
	padding-left: 20px;
}

#MegaMenu .level_two a.lastMenuItem 
{
	border-bottom: 2px solid #b22d59;
}

#MegaMenu .level_two li a:hover
{
    background: #85163B;
}

.sidebar-menu
{
    width: 260px;
    position:fixed;
    right: -90%;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
    transition: 0.3s all;
    overflow-y: scroll;
}

/* Mega Menu */
    #MobileMegaMenuNav ul li {
        list-style: none;
        margin: 0 0 5px 0;
        margin-left: 0 !important;
        position: relative;
        font-family: 'Whitney SSm A', 'Whitney SSm B', Tahoma, sans-serif;
    }

    #MobileMegaMenuNav ul {
        margin: 20px;
    }

    #MobileMegaMenuNav ul li a.dropdown__toggle {
        padding: 0 !important;
        margin: 10px 0;
        font-size: 13px;
        font-weight: 600;
        display: block;
        color: #000000;
        font-family: 'Whitney SSm A', 'Whitney SSm B', Tahoma, sans-serif;
    }

    #MobileMegaMenuNav ul li a.lastMenuItem {
        padding: 0 !important;
        font-size: 13px;
        font-weight: 600;
    /*    display: block;*/
        font-family: 'Whitney SSm A', 'Whitney SSm B', Tahoma, sans-serif;
    }

    #MobileMegaMenuNav ul li a.dropdown__toggle:after, #MobileMegaMenuNav ul li a.lastMenuItem:after {
        width: 14px;
        height: 10px;
    /*    background-image: url('../images/chevron-down.png?rel=7e9cb0c0');*/
        content: '';
        position: absolute;
        right: 0;
        display: inline-block;
        top: 5px;
        transform: rotate(-90deg);
        transition: all 0.2s;
    }
    
    #MobileMegaMenuNav ul li a.dropdown__toggle.active:after, #MobileMegaMenuNav ul li a.lastMenuItem.active:after 
    {
        transform: rotate(0deg);
        transition: all 0.2s;
    }

    #MobileMegaMenuNav ul li .level_two {
        max-height: 0;
        transition: all 0.5s ease;
        background: #9f1644;
        margin: 5px -20px;
        font-weight: 600;
        overflow-y: hidden;
        display: block;
    }
    #MobileMegaMenuNav ul li .level_two.active
    {
        max-height: 5000px;


    }
    #MobileMegaMenuNav > ul > li > .level_two > ul > li > .info_level_three > ul > li 
    {
        margin: 0 20px 0 0;
        padding: 4px 0 8px 0;
        border-bottom: 2px solid #b22d59;
        line-height: normal;
    }
  

    #MobileMegaMenuNav ul li .level_two ul
    {
        font-size: 1.2em;
        margin: 20px 0 20px 20px;
    }
    #MobileMegaMenuNav ul li .level_two .subMenu 
    {
        color: #e55a6d;
        font-size: 16px;
    }
    #MobileMegaMenuNav ul li .level_two .info_level_three ul 
    {
        margin: 0 0 0 0;
    }
    #MobileMegaMenuNav ul li .level_two .info_level_three ul li a 
    {
        font-size: 12px;
        font-weight: normal;
    }
    
    
    #MobileMegaMenuNav ul li .level_two a.lastMenuItem 
    {
        font-size: 12px;
    }
    #MobileMegaMenuNav ul li .level_two ul li a 
    {
        color: #ffffff;
        font-size: 12px;
        line-height: normal;
        font-weight: normal;
    }
    #MobileMegaMenuNav ul li .level_two ul li a {
    }
    .mobile-search .m-search {
        margin: 20px;
    }
    .mobile-search .m-search .input-grouped {
        background: #fff2f1;
        position: relative;
    }

    .mobile-search .m-search .input-grouped__btn {
        position: absolute;
        right: 0;
    }

    .mobile-search .m-search .input-grouped .mast-search__input[type='text'] {
        width: 80% !important;
    }

    .mobile-search .m-search .icon--search {
        background-size: 15px 15px;
    }