/* WEARSERV NAV CUSTOMIZATIONS (May/June 2020) */

/* top bar */

.top-bar {
  background-color:#1a51c7 !important;
}

.btn-donate{
    background: #3264cd !important;
    color: #ffffff !important;
    border-radius: 3em !important;
}

.btn-donate:hover {
  background: #ffffff !important;
  color: #1a51c7 !important;
}

.btn-contact:hover{
  color:#ffffff !important;
  text-decoration:underline !important;
}

/* modifications to the main menu */

.main-menu-wrapper{
    min-height: 76px !important;
    padding: 0px !important;
    padding-bottom:0px !important;
    border-radius: 8px !important;
}

.main-menu .ubermenu .ubermenu-column,
.main-menu .ubermenu .ubermenu-row{
  max-width:220px !important;
}

.main-menu .ubermenu .ubermenu-target-text,
.main-menu .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target{
  font-size: 1.2em !important;
  font-weight: normal;
}

.main-menu .ubermenu-skin-minimal .ubermenu-item-level-0 > .ubermenu-target{
  color:#203858 !important;
}

.main-menu .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target {
    padding-left: 28px !important;
    padding-right: 28px !important;
    display: table-cell;
    height: 76px;
    vertical-align: middle;
    text-align: center;
}

/* submenu */
.main-menu .ubermenu-sub-indicators .ubermenu-has-submenu-drop>.ubermenu-target:after{
  display:none !important;
}

.main-menu .ubermenu .ubermenu-submenu .ubermenu-item-normal > .ubermenu-target{
  font-size:0.9em !important;
  padding: 8px 12px !important;
}

.main-menu .ubermenu .ubermenu-submenu .ubermenu-target-text{
  text-align:left !important;
  font-weight:normal !important;
}

.main-menu .ubermenu-skin-minimal.ubermenu-horizontal .ubermenu-item-level-0 > .ubermenu-submenu-drop{
  border-bottom-left-radius:5px !important;
  border-bottom-right-radius:5px !important;
}

.main-menu .ubermenu-bound .ubermenu-submenu-type-mega{
  min-width:auto !important;
}

.mainmeu-area .navbar{
  padding-top:6px !important;
}

/* hovered items */
.main-menu .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target{
  /*
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  */

  background-color:transparent !important;
  background-repeat:no-repeat !important;
  background-position:50% 150% !important;
  background-size: 32px 13px !important;

  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;

  padding-bottom:16px !important;
}

.main-menu .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target:hover{
  background-color:#ffffff !important;
}
.main-menu .ubermenu-main .ubermenu-active > .ubermenu-target{
  background-color:#ffffff !important;
}

/* active/current items */
.main-menu .ubermenu-current-menu-item.ubermenu-item-level-0 > .ubermenu-target {
  background-color:#e3edd6 !important;
}
.main-menu .ubermenu-current-menu-item.ubermenu-item-level-0 > .ubermenu-target:hover,
.main-menu .ubermenu-current-menu-item.ubermenu-active.ubermenu-item-level-0 > .ubermenu-target{
  background-color:#ffffff !important;
}

.main-menu .ubermenu-submenu .ubermenu-column{
  max-width:100% !important;
}

/* flyout third-level nav */
.ubermenu-item-level-2 .ubermenu-submenu-type-flyout{
  width:260px !important;
  border-radius: 5px !important;
  border-color: #f7f7f7 !important;
  background-color: #f7f7f7 !important;
}

.ubermenu-item-level-2.ubermenu-has-submenu-drop .ubermenu-target{
  display:block;
  background: url('img/mobilenav-arrow-right-62px.png') 100% 58% no-repeat !important;
  background-size:auto 30px !important;
}

.ubermenu-item-level-2.ubermenu-has-submenu-drop .ubermenu-target:hover,
.ubermenu-active.ubermenu-item-level-2 > .ubermenu-target{
  background: #f7f7f7 url('img/mobilenav-arrow-right-62px.png') 100% 58% no-repeat !important;
  background-size:auto 30px !important;
}

.ubermenu-item-level-2.ubermenu-has-submenu-drop .ubermenu-item-level-4 .ubermenu-target{
  background-image:none !important;
}

.ubermenu-item-level-2.ubermenu-has-submenu-drop .ubermenu-item-level-4 .ubermenu-target:hover{
  background-color:#f0f0f0 !important;
  background-image:none !important;
}

/* 1024px (desktop) */
@media only screen and (max-width : 1024px) {
  .main-menu .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target {
    padding-left:14px !important;
    padding-right:14px !important;
  }
  .main-menu .ubermenu .ubermenu-column,
  .main-menu .ubermenu .ubermenu-row {
    max-width:200px !important;
  }
}

/* 991px - 768px - 578px (tablet) */
@media only screen and (max-width : 991px) {
  .is-sticky .main-menu-wrapper-outer .container {
      width: 100%;
      overflow-y: scroll;
      max-width: none;
  }

  #top-right-metanav-ig,
  #top-right-metanav-fb{
    display:none !important;
  }
  .main-menu-wrapper{
    padding:8px !important;
  }
  .main-menu {
    margin-top:0 !important;
  }
  .search-box2{
    width:80% !important;
    position: relative !important;
    margin-top:12px !important;
  }
  .mainmeu-area .navbar{
  }

  .mainmeu-area .navbar a.ubermenu-responsive-toggle{
    display:block !important;
    width:132px !important;
    background-color: #e5f5d2 !important;
    border-radius: 5px !important;
    color:#19385b !important;
  }

  #ubermenu-main-2-main-menu-2{
    background-color: #e5f5d2 !important;
    border-radius: 5px !important;
    margin-top:5px;
  }

  .ubermenu-responsive-default.ubermenu-responsive .ubermenu-item-level-0,
  .ubermenu-responsive-default.ubermenu.ubermenu-responsive .ubermenu-column,
  .ubermenu-responsive-default.ubermenu.ubermenu-responsive .ubermenu-column-auto{
    width:100% !important;
    min-width:100% !important;
  }

  .ubermenu-responsive-default.ubermenu-responsive .ubermenu-item-level-0{
    border-bottom:1px #c6d7be solid;
  }

  .ubermenu-responsive-default.ubermenu-responsive .ubermenu-item-level-2{
    border-bottom:1px #dce0e5 solid;
  }

  .main-menu .ubermenu .ubermenu-target-text, .main-menu .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target{
    text-align:left !important;
  }
  .main-menu .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target{
    height:auto !important;
  }

  .main-menu .ubermenu-current-menu-item.ubermenu-item-level-0 > .ubermenu-target {
      background:url('') bottom center repeat-x !important;
  }
  .main-menu .ubermenu-current-menu-item.ubermenu-item-level-0 > .ubermenu-target:hover,
  .main-menu .ubermenu-current-menu-item.ubermenu-active.ubermenu-item-level-0 > .ubermenu-target{
      background:url('') bottom center repeat-x !important;
  }

  .main-menu br{
    display:none !important;
  }

  .ubermenu-responsive-toggle .fa{
    width:26px !important;
    height:26px !important;
    margin-bottom:-6px !important;
    position:relative !important;
    left:-4px !important;
    top:0 !important;
  }

  /* menu btn */
  .ubermenu-responsive-toggle .fa-bars:before{
    content: '' !important;
    display: block !important;
    background: url('img/mobilenav-three-stripes-62px.png') no-repeat !important;
    background-size: 100% auto !important;
    width: 26px !important;
    height: 26px !important;
  }

  /* x-close btn */
  .ubermenu-responsive-toggle.ubermenu-responsive-toggle-open .fa-bars:before{
    content: '' !important;
    display: block !important;
    background: url('img/mobilenav-x-close.png') no-repeat !important;
    background-size: 100% auto !important;
    width: 26px !important;
    height: 26px !important;
  }

  .main-menu .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target{
    background-image:none !important;
    display:block !important;
    width:100% !important;
  }

  .main-menu .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target:before{

  }

  .ubermenu-item-level-2.ubermenu-has-submenu-drop .ubermenu-target{
    background-image:none !important;
  }

  .ubermenu-responsive-default.ubermenu-responsive .ubermenu-item-level-0.ubermenu-has-submenu-drop{
    background: url('img/mobilenav-arrow-down-62px.png') 100% 58% no-repeat !important;
    background-size:auto 30px !important;
  }

  .ubermenu-responsive-default.ubermenu-responsive .ubermenu-item-level-0.ubermenu-active{
    background: url('img/mobilenav-arrow-up-62px.png') 100% 58% no-repeat !important;
    background-size:auto 30px !important;
  }



  .main-menu .ubermenu .ubermenu-submenu .ubermenu-item-normal > .ubermenu-target{
    font-size: 1.0em !important;
    color:#203858 !important;
  }

  .ubermenu .ubermenu-retractor{
    background-color:#eeeeee !important;
    text-align:left !important;
    font-size:14px !important;
  }

  .ubermenu .ubermenu-item-level-2 .ubermenu-retractor{
    /*
    display:none !important;
    */
  }

  .ubermenu .ubermenu-item-type-column>.ubermenu-submenu-type-stack>.ubermenu-item-normal:first-child{
    margin-top:0px !important;
  }

  .ubermenu-responsive-default.ubermenu-responsive .ubermenu-item-level-4{
    background-color: #f7f7f7 !important;
    padding-left: 20px !important;
  }


  .ubermenu-responsive .fa-times:before{
    content:"\f0de" !important;
    color:#203858 !important;
    font-size:20px !important;
    text-align:right !important;
  }

  .ubermenu-responsive-default.ubermenu-responsive .ubermenu-item-level-2.ubermenu-has-submenu-drop{
    background: url('img/mobilenav-arrow-down-62px.png') 100% 58% no-repeat !important;
    background-size:auto 30px !important;
  }
}

/* mobile */
#mobile-donate-contact-container{
  display:none;
}
.ubermenu-content-block,
.ubermenu-custom-content,
.ubermenu-custom-content-padded{
  padding:0 !important;
}

@media only screen and (max-width : 767px) {
  .is-sticky .main-menu-wrapper-outer .container {
      width: 100%;
      overflow-y: scroll;
      max-width: none;
  }

  .search-box2{
    width:52% !important;
    position: relative !important;
  }

  .mainmeu-area .navbar a.ubermenu-responsive-toggle{
    width: 130px !important;
    background-color: #e5f5d2 !important;
    border-radius: 5px !important;
  }

  #mobile-donate-contact-container{
    display:block;
    position:relative;
  }

  .btn-mobile-donate,
  .btn-mobile-contact{
    width: 48% !important;
    background: #ccdec2 !important;
    color: #203858 !important;
    border-radius: 3em !important;
    padding: 12px 18px;
    text-align: center;
    margin: 0 auto;
    margin-left:2px;
    margin-right:2px;
    display: inline-block;
    float: left;
    text-decoration: none;
  }

  .btn-mobile-donate:hover,
  .btn-mobile-contact:hover{
    background-color:#203858 !important;
    color:#ffffff !important;
  }

  .ubermenu-content-block,
  .ubermenu-custom-content,
  .ubermenu-custom-content-padded{
    padding:10px !important;
  }

  .main-menu .ubermenu .ubermenu-submenu .ubermenu-item-normal > .ubermenu-target{
    font-size:0.9em !important;
    padding: 16px 12px !important;
  }

  .ubermenu-responsive-default.ubermenu-responsive .ubermenu-item-level-2.ubermenu-has-submenu-drop{
    background: url('img/mobilenav-arrow-down-62px.png') 100% 58% no-repeat !important;
    background-size:auto 30px !important;
  }

}

/* 320px (iphone5) */
@media only screen and (max-width : 320px) {
  .search-box2{
    width:66% !important;
    position: relative !important;
  }

  .mainmeu-area .navbar a.ubermenu-responsive-toggle{
    width: 70px !important;
    background-color: #e5f5d2 !important;
    border-radius: 5px !important;
    font-size:12px !important;
    text-transform:uppercase !important;
  }

  .ubermenu-responsive-toggle .fa{
    left:0px !important;
  }
}