.navigation{
font-family: 'Cambay', sans-serif;
}

.menubar{
  font-family: 'Cambay', sans-serif;
}



button.rm-togglebutton,
.rm-subtoggle {
  margin: 5px;
  padding: 10px 20px;
  /*border: 1px solid black;*/
  outline: none;
  background: #525252;

  color: white;
  
  border-radius: 5px;
  font-size: 1em;
  cursor: pointer; }

  .rm-togglebutton:hover,
  .rm-subtoggle:hover {
    text-decoration: underline; }
  .rm-togglebutton:focus,
  .rm-subtoggle:focus {
    text-decoration: underline; }

.rm-subtoggle {
  margin: 50px;
  float: right; }

.navigation_container {
  background: #525252;
  color: #eee;
  min-height: 60px; 
  min-width: 300px; 
  position: fixed;
  width:100%; 
  border-bottom:1px solid white;
  z-index:50; }


  .navigation_container ul {
   width: 300px;
    /*margin: 0 auto;*/
    position: relative;
    margin-left: 5%;
    padding: 0;
    list-style: none; }

    @media (min-width: 600px) {
      .navigation_container ul {
        height: 60px;
        } }

  .navigation_container ul:before,
  .navigation_container ul:after {
    display: table;
    content: " "; }

  .navigation_container ul:after {
    clear: both; }

  .navigation_container .rm-closed li.rm-parent > a:after,
  .navigation_container .rm-fullmenu li.rm-parent > a:after {
    content: " \25bc"; }

  .navigation_container .rm-closed li.parent > a:after,
  .navigation_container .rm-fullmenu li.parent > a:after {
    content: " \25b6"; }

  .navigation_container li {
    padding: 0; }

    @media (min-width: 600px) {
      .navigation_container li {
        height: 50px;
        float: left;
        z-index:50;  } }

    .navigation_container li.focused, .navigation_container li:hover a,
    .navigation_container li a:hover,
    .navigation_container li a:focus {
      background: #2c3e50; }

  .navigation_container .rm-opened li {
    float: none; }

  .navigation_container a {
    display: block;
    color: #fff;
    padding: 14px 10px;
    line-height: 30px;
    text-decoration: none;
    height: 34px; 
}

    .navigation_container a:after {
      font-size: 12px;
      vertical-align: middle;
      line-height:24px;
      text-decoration: none; 
      padding-left:7px;
      /*color:#E69999;*/}

  .navigation_container .active a,
  .navigation_container .active a:hover,
  .navigation_container .active a:focus {
    background: #fff;
    color: #333;
    cursor: default; 
   }

  .navigation_container .rm-closed li,
  .navigation_container .rm-fullmenu li {
    overflow: visible; }

    .navigation_container .rm-closed li ul,
    .navigation_container .rm-fullmenu li ul {
      height: auto;
      background: #2c3e50;
      padding: 0;
      width: 200px;
      border-top: none; 
      margin-left:0;
     }

      @media (min-width: 600px) {
        .navigation_container .rm-closed li ul,
        .navigation_container .rm-fullmenu li ul {
          transition: transform 0.1s cubic-bezier(0.195, 0.4, 0.45, 0.785);
          transform: scaleY(0);
          transform-origin: 0 0; } }

    .navigation_container .rm-closed li.rm-focused > ul, .navigation_container .rm-closed li:hover > ul,
    .navigation_container .rm-fullmenu li.rm-focused > ul,
    .navigation_container .rm-fullmenu li:hover > ul {
      display: block; }
      @media (min-width: 600px) {
        .navigation_container .rm-closed li.rm-focused > ul, .navigation_container .rm-closed li:hover > ul,
        .navigation_container .rm-fullmenu li.rm-focused > ul,
        .navigation_container .rm-fullmenu li:hover > ul {
          transform: scaleY(1); } }

    @media (min-width: 600px) {
      .navigation_container .rm-closed li.rm-focused li ul, .navigation_container .rm-closed li:hover li ul,
      .navigation_container .rm-fullmenu li.rm-focused li ul,
      .navigation_container .rm-fullmenu li:hover li ul {
        transform: scaleX(0); } }

    @media (min-width: 600px) {
      .navigation_container .rm-closed li.rm-focused li.rm-focused > ul, .navigation_container .rm-closed li.rm-focused li:hover > ul, .navigation_container .rm-closed li:hover li.rm-focused > ul, .navigation_container .rm-closed li:hover li:hover > ul,
      .navigation_container .rm-fullmenu li.rm-focused li.rm-focused > ul,
      .navigation_container .rm-fullmenu li.rm-focused li:hover > ul,
      .navigation_container .rm-fullmenu li:hover li.rm-focused > ul,
      .navigation_container .rm-fullmenu li:hover li:hover > ul {
        transform: scaleX(1); } }

    .navigation_container .rm-closed li li,
    .navigation_container .rm-fullmenu li li {
      float: none; }
      .navigation_container .rm-closed li li.rm-focused > a, .navigation_container .rm-closed li li:hover > a,
      .navigation_container .rm-closed li li a:hover,
      .navigation_container .rm-closed li li a:focus,
      .navigation_container .rm-fullmenu li li.rm-focused > a,
      .navigation_container .rm-fullmenu li li:hover > a,
      .navigation_container .rm-fullmenu li li a:hover,
      .navigation_container .rm-fullmenu li li a:focus {
        text-decoration: none;
        background: #233140;
        color: white; }

/**
 * When JS is enabled
 *
 * 1. We can use display none because we set display block again with JS immediately after initiating the menu
 * 2. Display menu when initiated
 * 3. Display menu on "desktop"
 * 4. Display focused items
 */
.js .navigation_container {
  display: none;
  /* 1 */ }

.js .navigation_container.rm-initiated {
  display: block;
  /* 2 */ }

@media (min-width: 600px) {
  .js .navigation_container {
    display: block;
    z-index:50; 
    /* 3 */ } }
.js .navigation_container .rm-focused {
  overflow: visible;
  /* 4 */ }

/**
 * When JS is either disabled or enabled
 *
 * 1. Relative to position li > ul items
 * 2. Hide overflowing content so we can display on tabbing
 * 3. Display on hover / focus
 * 4. Children should have position absolute to hide them
 */
.navigation_container li {
  position: relative;
  /* 1 */ }

@media (min-width: 600px) {
  .navigation_container li {
    overflow: hidden;
    /* 2 */ }

  .navigation_container li:hover, .navigation_container li:focus {
    overflow: visible;
    /* 3 */ } }
@media (min-width: 600px) {
  .navigation_container li ul {
    position: absolute;
    /* 4 */ } 
  .navigation_container {
    /*z-index: 1;*/
  }
  }

@media (min-width: 600px) {
  .navigation_container li ul {
    position: absolute;
    left: -9999px;
    /*z-index: -1;
    top: 100%;*/
    width: 100%; } }

.navigation_container li li {
  position: relative;
  float: left; }

.navigation_container .rm-focused > ul,
.navigation_container li:hover > ul {
  left: 0; }

.navigation_container li .rm-focused > ul,
.navigation_container li li:hover > ul {
  left: 100%;
  top: 0; }

/*# sourceMappingURL=responsivemenu.css.map */

/*# sourceMappingURL=demo.css.map */