/*********************
NAVIGATION STYLES
*********************/
/*
all navs have a .nav class applied via
the wp_menu function; this is so we can
easily write one group of styles for
the navs on the site so our css is cleaner
and more scalable.
*/

#wprmenu_bar .menu_title a{
display: contents;
color: #fff;
}

.nav {
  border-bottom: 0;
  width: auto;
  padding-left: 10px;
  margin-left: 20px!important;
  /* end .menu li */
  /* highlight current page */
  /* end current highlighters */ }
  .nav li {
    /*
    so you really have to rethink your dropdowns for mobile.
    you don't want to have it expand too much because the
    screen is so small. How you manage your menu should
    depend on the project. Here's some great info on it:
    http://www.alistapart.com/articles/organizing-mobile/
    */ }
    .nav li a {
      width: auto;
      display: block;
      color:#58585a;
      text-decoration: none;
      padding: 0.75em;
      /*
      remember this is for mobile ONLY, so there's no need
      to even declare hover styles here, you can do it in
      the style.scss file where it's relevant. We want to
      keep this file as small as possible!
      */ }
    .nav li a:active { color: orange!important; }
    .nav li ul.sub-menu li a,
    .nav li ul.children li a {
      padding-left: 30px; }

/* end .nav */
 /*********************
  NAVIGATION STYLES
  *********************/
  /* .menu is clearfixed inside mixins.scss */
  .menu {
    /* end .menu ul */ }
    .menu ul {
      /* end .menu ul li */
      /* highlight current page */
      /* end current highlighters */ }
      .menu ul li {
        /*
        plan your menus and drop-downs wisely.
        */ }
        .menu ul li a {
          /*
          you can use hover styles here even though this size
          has the possibility of being a mobile device.
          */ }

  /* end .menu */

  .nav {
    border: 0;
   width: auto;
padding: 10px;
font-size: 13px;
font-weight: 500;
float: right;
z-index: 999999;
display: inline;
margin-top: -50px;
    
    /* end .menu ul li */
    /* highlight current page */
    /* end current highlighters */ }
    .nav ul {
      width:220px;
      background: #fff;
      margin-top: 0; }
    .nav li {
      float: left;
      position: relative;
      /*
      plan your menus and drop-downs wisely.
      */
      /* showing sub-menus */ }
      .nav li a {
        border-bottom: 0;
        /*
        you can use hover styles here even though this size
        has the possibility of being a mobile device.
        */ }
        .nav li a:hover, .nav li a:focus, .nav li a:active {
          color: #F1680B;
          text-decoration: none; }
      .nav li ul.sub-menu,
      .nav li ul.children {
        margin-top: 0;
        border: 0px solid #ccc;
        border-top: 0;
        position: absolute;
        visibility: hidden;
        z-index: 8999;
        /* highlight sub-menu current page */ }
        .nav li ul.sub-menu li,
        .nav li ul.children li {
          /*
          if you need to go deeper, go nuts
          just remember deeper menus suck
          for usability. k, bai.
          */ }
          .nav li ul.sub-menu li a,
          .nav li ul.children li a {
            padding-left: 10px;
            border-right: 0;
            display: block;
            width: 220px;
            border-bottom: 1px solid orange; }
          .nav li ul.sub-menu li:last-child a,
          .nav li ul.children li:last-child a {
            border-bottom: 0; }
          .nav li ul.sub-menu li ul,
          .nav li ul.children li ul {
            top: 0;
            left: 100%; }
      .nav li:hover > ul {
        top: auto;
        visibility: visible; }


  /* end .nav */
#responsive-menu-button {
    display: inline-block;
    transition: transform 0.5s, background-color 0.5s;
    display: none;
}
@media screen and (max-width: 900px) {
    .nav li a {
        display: none;
    }
button#responsive-menu-button {
    display: none;
    transition: transform 0.5s, background-color 0.5s;
}
button#responsive-menu-button {
    width: 55px;
    height: 55px;
    position: fixed;
    top: 15px;
    right: 5%;
    background: #000;
    visibility: hidden;
}
header a[class^="logo-"] {
    float:unset!important;
    position: relative;
}
header .logo-lg {
    width: 62.5%;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 8000px) {
 .nav li a {
        display: none;
    }
button#responsive-menu-button {
   visibility: hidden;
    transition: transform 0.5s, background-color 0.5s;
}
button#responsive-menu-button {
    width: 55px;
    height: 55px;
    position: fixed;
    top: 15px;
    right: 5%;
    background: #000;
    visibility: hidden!important;
}
.sidebar-social {
    display: block;
    width: 100%!important;
    min-width: 11.875em;
}

@media screen and (max-width: 767px) {
    .site-wrapper > .change--row--767 {
        display: flex;
        flex-wrap: wrap-reverse;
        flex-direction: row-reverse;
    }

    .site-wrapper > .change--row--767 > .sidebar{
        width: 100% !important;
    }

    .site-wrapper > .change--row--767 > .sidebar .widget{
        text-align: center;
    }
}