/*The best header lives here*/
/**/                      /**/ 
/**/                      /**/ 
/**/                      /**/ 
/**/                      /**/ 


/*Main Desktop Menu and Toggler*/
/**/                         /**/ 
/**/                         /**/ 
/**/                         /**/ 
/**/                         /**/ 


/*Top level Navigation customization mainly for sizing and making sticky. Make #navWrapper and .navbar same height.*/
#navWrapper{
    position:fixed;
    width:100%;
    z-index:9999;
    height:100px;
  }
  
  /*Main navbar color and height.  Also controls padding but be wary top and bottom padding will prevent you from getting to dropdowns on hover. Make #navWrapper and .navbar same height*/
  .navbar{
    background-color:#fff!important;
    height:100%;
    padding:0 15px;
  }
  
  /*Set this to the height of the navbar.  May need to change it on media query if your mobile menu is different height*/
  .main-content{
    padding-top:115px;
  }
  
  /*Controls height of logo link which also changes height of main navbar*/
  .navbar-brand{
    height: 95px;
    padding-top:0;
    padding-bottom:0;
    margin-bottom:0px;
  }
  
  /*Fine tune size of logo without controlling height of navbar.  Height is percentage of link height.  Use Margin-top to place it in the link tag*/
  #nav-logo{
    height:95%;
      margin-top: 5px;
  }
  
  /*Controls the width of the container that contains the main menu*/
  #main-menu{
    min-width:500px;
  }
  
  /*controls the top level menu items.  May need to look further to find .someClass > .menu-item first because it's used for dynamic generation of menu*/
  #main-menu .menu-item{
    
  }
  
  /*controls the top level menu items on hover*/
  #main-menu .menu-item:hover{
  
  }
  
  /*Controls the style of the text in the main menu*/
  .headerMenuWrapper .menu-item .nav-link{
    font-weight:bold;
    color:#000000!important;
    text-transform:uppercase;
    padding-top:35px;
    height:100%;
    border-bottom: 5px solid white;
  }
  
  #main-menu .dropdown-menu > .menu-item > .nav-link:hover {
      border-bottom: none;
  }
  
  .dropdown-menu > .menu-item > .nav-link {
      padding-top: 0;
      color: white!important;
      border-bottom: 0px;
      padding-bottom: 0;
      margin-top: 6px;
  }
  
  .dropdown-menu > .menu-item > .nav-link:hover {
      color: rgb(39, 57, 125)!important;
  }
  
  /*Controls the style of the text in the main menu on hover*/
  .headerMenuWrapper .menu-item .nav-link:hover{
      border-bottom: 5px solid rgb(39, 57, 125);
  }
  
  .headerMenuWrapper .dropdown-menu .menu-item:hover {
      background-color: white;
  }
  
  .headerMenuWrapper .dropdown-menu .menu-item:hover > .nav-link {
      color: rgb(39, 57, 125)!important;
  }
  
  /*absolute position the menu to prevent menu from jumping around.  Styles the sub-menu dropdown*/
  .navbar-nav .dropdown-menu{
    position:absolute;
    background-color:rgb(39, 57, 125);
    margin-top:-10px;
    border-width:0;
    border-radius:0;
    padding:0;
    border: 2px solid white;
  }
  
  #mobile-menu .dropdown-menu {
      margin-top: 3px!important;
  }
  
  /*control menu items in the sub-menu dropdown*/
  .navbar-nav .dropdown-menu .menu-item{
    width:100%;
    padding:3px 0;
  }
  
  /*control hover effects for items in the sub-menu dropdown*/
  .navbar-nav .dropdown-menu .menu-item:hover{
  
  }
  
  /*Can put a background around the mobile menu toggler button with this.  Background-color for color.  Border-radius: 100px & padding: .25em for a circle*/
  #navbarToggler{
    border: solid 2px #000;
    padding: .5rem .5rem;
    border-radius: 10px;
    transition:border-color .1s ease-in-out;
    -webkit-transition:border-color .1s ease-in-out;
    -moz-transition:border-color .1s ease-in-out;
    -ms-transition:border-color .1s ease-in-out;
  }
  
  /*Used to control #navbarToggler on hover*/
  #navbarToggler:hover{
    border-color:#AF7F2E;
  }
  
  #navbarToggler:hover #navbarTogglerIcon{  
    background-color:#AF7F2E;
  }
  
  /*Need to probably find a better way of doing this.  But there are attributes within the background image url to control it*/
  #navbarTogglerIcon{
    -webkit-mask-image: url('/wp-content/themes/hatfield-raindrop/hatfieldRaindropHamburger.svg')!important;
    -moz-mask-image: url('/wp-content/themes/hatfield-raindrop/hatfieldRaindropHamburger.svg')!important;
    -ms-mask-image: url('/wp-content/themes/hatfield-raindrop/hatfieldRaindropHamburger.svg')!important;
    width:30px;
    background-size:contain;
    background-color:#000;
    transition:background-color .1s ease-in-out;
    -webkit-transition:background-color .1s ease-in-out;
    -moz-transition:background-color .1s ease-in-out;
    -ms-transition:background-color .1s ease-in-out;
  }
  
  /*header menu wrapper starts display none so that bootstrap can add classes that are synced to toggler and displays at the proper screen size*/
  .headerMenuWrapper{
    display:none;
    height:100%;
  }
  
  /*sets this child to height of navbar wrappers*/
  .menu-main-navigation-menu-container{
    height:100%;
  }
  
  /*sets this child to height of navbar wrappers*/
  #main-menu{
    height:100%;
  }
  
  .headerContainerr {
      height: 100%;
  }
  
  
  .dropdown-menu > .current-menu-item > .nav-link {
      color: white!important;
  }
  
  @media (max-width: 1425px) {
      .navbar-nav .dropdown-menu {
          margin-top: -8px;
      }
  }
  
  @media (max-width: 1306px) {
      .navbar-nav .dropdown-menu {
          margin-top: -4px;
      }
  }
  
  
  /*         Mobile Menu         */
  /**/                         /**/ 
  /**/                         /**/ 
  /**/                         /**/ 
  /**/                         /**/ 
  
  
  #mobile-menu .dropdown-menu {
      opacity: 0!important;
  }
  
  #mobile-menu .dropdown-menu.open {
      opacity: 1!important;
  }
  
  
  /*Controls the mobile menu dropdown color and width*/
  #mobileNavWrapper{
    background-color:#000;
    height:0;
    padding-top:41px;
    overflow:hidden; /*So that menu doesn't hang out when div is collapsed*/
    width:100%;
    /* max-width:250px; */
    position:fixed;
    top:32px;
    right: -100%;
    transition:right .2s ease-in-out;
    -webkit-transition:right .2s ease-in-out;
    -moz-transition:right .2s ease-in-out;
    -ms-transition:right .2s ease-in-out;
    /* min-height: 355px; */
    height: 100vh !important;
    z-index: 999999999;
  }
  
  .menu-mobile-container {
      height: 100%;
      overflow-y: auto;
  }
  
  /*Controls the mobile Dropdown menu when expanded*/
  #mobileNavWrapper.mobileExpand{
    right:0;
  }
  
  /*Controls the close icon*/
  .mobileNavClose{
    color:#fff;
    font-size:23px;
    position:absolute;
    right:10px;
    top:10px;
  }
  
  /*Controls the close icon on hover*/
  .mobileNavClose:hover{
    cursor:pointer;
  }
  
  /*This mobile menu dropdown container can be used to control alignment of the mobile menu links*/
  #mobile-menu .menu-item{
    text-align:center;
  }
  
  /*Controls the style of the text in the mobile menu.  Display and width are there so that they don't completely fill the li container*/
  #mobileNavWrapper .menu-item .nav-link{
    font-weight:bold;
    color:#fff!important;
    display:inline-block;
    width:auto;
  }
  
  /*Controls transition of the sub-menu dropdown container.  Overflow hidden to hide the transitioning sub menu.  This is also where you set the heights of the mobile menu li items*/
  #mobile-menu > .menu-item{
    height:40px;
    overflow:hidden;
    transition:height .2s ease-in-out;
    -webkit-transition:height .2s ease-in-out;
    -moz-transition:height .2s ease-in-out;
    -ms-transition:height .2s ease-in-out;
  }
  
  /*Controls the mobile sub-menu dropdown*/
  #mobile-menu .dropdown-menu{
    background-color:rgb(39, 57, 125);
    box-shadow:inset 0 18px 25px -20px #000, inset 0 -18px 25px -20px #000;
    display:block!important;
    width:100%!important;
    transition:height .2s ease-in-out;
    -webkit-transition:height .2s ease-in-out;
    -moz-transition:height .2s ease-in-out;
    -ms-transition:height .2s ease-in-out;
  }
  
  #mobile-menu .dropdown-menu .menu-item .nav-link {
      color: white!important;
  }
  
  /*Can control the indent of the mobile sub menu dropdown items*/
  #mobile-menu .dropdown-menu .menu-item{
    width:100%;
    float:right;
    height:40px;
  }
  
  #mobile-menu .dropdown-menu .current-menu-item .nav-link {
      color: white!important;
  }
  
  #mobile-menu .dropdown-menu .menu-item:hover {
      background-color: rgb(39, 57, 125)!important;
  }
  
  #mobile-menu .dropdown-menu .menu-item:hover > .nav-link {
      color: white!important;
  }
  
  #mobile-menu .dropdown-menu .menu-item > .nav-link:hover {
      color: white!important;
  }
  
  
  
  
  
  
  /*stevestrap menu classes*/
  /**/                   /**/ 
  /**/                   /**/ 
  /**/                   /**/ 
  /**/                   /**/ 
  
  .menu-item{
    display:inline-block;
    flex:1 1 100%;
    justify-content:center;
    align-items:center;
    padding-left: 5px!important;
  }
  .horizontalMenu{
    flex-direction:row;
  }
  .equalMenuItems > .menu-item{
    flex:1 1 100%;
    display:inline-flex;
  }
  .proportionalMenuItems > .menu-item{
    flex-grow:1;
    display:inline-flex;
  }
  .equalNatrualMenuItems{
    justify-content:center;
  }
  .equalNaturalMenuItems > .menu-item{
    flex: initial;
    justify-content:inital;
    padding:1rem 2rem;
    display:inline-block;
  }