body {
  background: #ececec;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #2c3e50;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

*, *:before, *:after {
  box-sizing: border-box; }

.site {
  margin: 0 auto;
  padding: 24px;
  max-width: 960px; }

.rm-togglebutton,
.rm-subtoggle {
  margin: 5px;
  padding: 5px 10px;
  border: 1px solid #fff;
  outline: none;
  background: #6ecef6;
  color: #fff;
  border-radius: 5px;
  font-size: 1em;
  cursor: pointer; }

  .rm-togglebutton:hover,
  .rm-subtoggle:hover {
    text-decoration: none;
font-weight:bold;
text-shadow:0px 1px #fff;
 }

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

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

.navigation_container {
  background: #ffff;
  color: black;
  min-height: 40px; }

  .navigation_container ul {
    width: 100%;
    max-width: 960px;
    margin-right:0;
    margin-left:auto;
    margin-top:auto;
    margin-bottom:auto;
    padding: 0;
    list-style: none; }

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

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

  .navigation_container ul:after {
    clear: both; }

  .navigation_container .navigation .navigation-item > a:after{
	content:"\25bc";
  }

  .navigation_container .navigation .navigation-sub-item > a:after{
	content:"\25bc";
  }

 .navigation_container .navigation .navigation-sub-item > a:hover:after{
	content:"\25b6";
  }

@media only screen and (max-width:600px){
	
	.navigation_container .navigation .navigation-item > a:after{
	content:"";
  }

  .navigation_container .navigation .navigation-sub-item > a:after{
	content:"";
  }

 .navigation_container .navigation .navigation-sub-item > a:hover:after{
	content:"";
  }

}

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

  .navigation_container li {
    padding:0 0px;
 }


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

    .navigation_container li.focused, .navigation_container li:hover a,
    .navigation_container li a:focus {
      background: #6ecef6;
      color:#fff;
border-bottom:0.5px solid #fff;
 }

.navigation_container li a:hover{
  background-color:#6ecef6;
  color:black;
  transition:background 0.4s linear 0s, color 0.4s linear 0s;
}

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

  .navigation_container a {
    display: block;
    color: black;
    padding: 8px 16px;
    line-height: 24px;
    text-decoration: none;
    min-height: 40px; }

    .navigation_container a:after {
      font-size: 12px;
      vertical-align: middle;
      line-height: 24px;
      text-decoration: none; }

  .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: #6ecef6;
      padding: 0;
      width: 220px;
      border-top:none;
border:0.5px solid #fff;
 }

      @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: #fff;
        color: black; }

/**
 * 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;
    /* 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 {
  position: relative;
  z-index: 1; }

@media (min-width: 600px) {
  .navigation_container li ul {
    position: absolute;
    left: -9999px;
    top: 100%;
    z-index: -1;
    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 */