.navigation.navigation-hidden {
  width: 200px;
  height: 100%;
  position: absolute;
  z-index: 5000;
  left: -200px;
}

.navigation.navigation-show {
  top: 0px;
  width: 400px;
  height: 100%;
  position: fixed;
  z-index: 5000;
}

.navigation-toggler {
  display: block;
  position: fixed;
  width: 60px;
  left: -5px;
  top: 0px;
  z-index: 9000;
  text-align: center;

}

.navigation-toggler.show {
  position: absolute;
  right: -65px;
  left: auto;
}

.navigation-blur {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  background-color: rgba(51, 51, 51, 0.8);
  left: 0;
  top: -60px;
  z-index: -1;
}

.navigation-blur.show {
  display: block;
}

.navigation-blur.hidden {
  display: none;
}

.organization-label {
  text-decoration: none;
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 6px;
  font-size: 1.5em;
}

.distributor-button {
  text-decoration: none;
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 6px;
  font-size: 1.5em;
}

.distributor-button:hover, .distributor-button:hover {
  color: orange;
  font-size: 2em;
  text-decoration: none;
}

.distributor-button.active {
  color: green;
  text-decoration: none;
  margin-left: 10px;
  margin-right: 10px;
  font-weight: bold;
  font-size: 2em;
}

.navigation {
  background: -webkit-linear-gradient(#3E3E3E, #383838);
  background: -o-linear-gradient(#3E3E3E, #383838);
  background: linear-gradient(#3E3E3E, #383838);
  display: inline-block;
  position: fixed;
  height: 100%;
  padding: 0;
  z-index: 2;
  top: 0px;
  -webkit-transition: width 0.3s ease, margin 0.3s ease;
  -moz-transition: width 0.3s ease, margin 0.3s ease;
  -o-transition: width 0.3s ease, margin 0.3s ease;
  transition: width 0.3s ease, margin 0.3s ease;
}

.navigation ul {
  padding: 0;
  margin: 0;
  z-index: 2;
}

.navigation::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 34px;
  background: linear-gradient(left, rgba(black, 0), rgba(black, 0.4));
}

.navigation-toggler {
  color: rgba(77, 77, 77, 1);
  display: inline-block;
  font-size: 2em;
  margin: 5px;
  text-decoration: none;
  cursor: pointer;

  -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  box-shadow:inset 0px 1px 0px 0px #ffffff;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
  background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
  background-color:#ededed;
  -webkit-border-top-left-radius:0px;
  -moz-border-radius-topleft:0px;
  border-top-left-radius:0px;
  -webkit-border-top-right-radius:6px;
  -moz-border-radius-topright:6px;
  border-top-right-radius:6px;
  -webkit-border-bottom-right-radius:6px;
  -moz-border-radius-bottomright:6px;
  border-bottom-right-radius:6px;
  -webkit-border-bottom-left-radius:0px;
  -moz-border-radius-bottomleft:0px;
  border-bottom-left-radius:0px;


  transition:All 0.25s ease;
  -webkit-transition:All 0.25s ease;
  -moz-transition:All 0.25s ease;
  -o-transition:All 0.25s ease;
}

.navigation-toggler:hover {
  color: rgba(44, 179, 44, 1);
  text-decoration: none;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #FF8C00), color-stop(1, #E67E00) );
  background:-moz-linear-gradient( center top, #FF8C00 5%, #E67E00 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF8C00', endColorstr='#E67E00');
  background-color: #FF8C00;
}

.navigation-item {
  width: 100%;
  background: linear-gradient(#3E3E3E, #383838);
  border-top: 1px solid #484848;
  border-bottom: 1px solid #2E2E2E;
  z-index: 2;
}

.navigation-item a {
  display: block;
  color: white;
  font-weight: bold;
  font-size: 1.2em;
  text-decoration: none;
  width: 100%;
  height: 100%;
  padding: 15px;
  transition: all 0.2s;;
  &:hover, &:focus {
    background-color: #FF8C00;
  }
}

.navigation-header h4 {
  display: block;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-decoration: underline;
  width: 100%;
  height: 100%;
  padding: 15px;
  transition: all 0.2s;;
  &:hover, &:focus {
    background-color: #FF8C00;
  }
}

.navigation-spacer {
  display: block;
  width: 100%;
  height: 5px;
  background-color: #5f5f5f;
  border-top: 1px solid #484848;
  border-bottom: 1px solid #2E2E2E;
}

.main-container {
  margin-right: 0;
  margin-left: auto;
  display: block;
  position: relative;

  -webkit-transition: width .2s ease;
  -moz-transition: width .2s ease;
  -o-transition: width .2s ease;
  transition: width .2s ease;
}