/* HAMBURGER MENU */

.hamburger {
  background: rgba(40,40,40,1);
  position: relative;
  width: 100%;
  height: 60px;
  font-size: 18px;
  z-index: 9999;
}

.hamburger ul {
    margin: 0;
    padding: 0px 0px 0px 0px;
    list-style: none;
    overflow: hidden;
}

.hamburger li a {
    background: rgba(40,40,40,1);
    color: #999999;
    display: block;
    valign: middle; 
    padding: 15px 0px 15px 0px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.hamburger li a:hover,
.hamburger .menu-btn:hover { color: #fff; }

.hamburger .logo { display: block; float: left; padding: 0px 0px 0px 15px; }

/* MENU */
.menu { clear: both; max-height: 0; transition: max-height .4s ease-out; }

/* MENU ICON */
.hamburger .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 29px 30px;
  position: relative;
  user-select: none;
}

.hamburger .menu-icon .navicon {
  background: #fff;
  display: block;
  height: 2px;
  position: relative;
  transition: background .4s ease-out;
  width: 20px;
}

.hamburger .menu-icon .navicon:before,
.hamburger .menu-icon .navicon:after {
  background: #fff;
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all .4s ease-out;
}

.hamburger .menu-icon .navicon:before { top: 6px; }
.hamburger .menu-icon .navicon:after { top: -6px; }

/* MENU BUTTON */
.hamburger .menu-btn { display: none; }

.open { max-height: 570px; padding-top: 15px; }

/* 48em = 768px */
@media (min-width: 801px) {
/* Hide Hamburger Lines */
.hamburger .menu { clear: none; float: right; max-height: none; }
.hamburger .menu-icon { display: none; }

/* Design Hamburger Navigation */
.hamburger { height: 60px; }
.hamburger li { float: left; }
.hamburger li a { padding: 21px 30px 21px 5px; }
.hamburger .logo { display: block; float: left; padding: 0px 0px 0px 15px; }
}