@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300);
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  display: block;
  width: 100%;
  height: 25px;
 }


.menu-opener, .menu-opener:hover, .menu-opener.active, .menu-opener-inner, .menu-opener-inner::before, .menu-opener-inner::after, .menu, .menu.active ,.container {
  -webkit-transition: 250ms all;
  transition: 250ms all;
  z-index:20;

}
.menu-link:hover {
	background: orange;
	outline: none;
	}
.menu-opener {
  cursor: pointer;
  height: 37px;
  position: absolute;
  top: 2%;
  left: 1%;
  background:#393535;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 105px;
}
.menu-opener:hover, .menu-opener.active {
  background: rgb(20, 20, 20) none repeat scroll 0% 0%;
}

.menu-opener-inner {
  background: #fff;
  height: .4rem;
  margin-left: .75rem;
  margin-top: 1.75rem;
  width: 2.5rem;
}
.menu-opener-inner::before, .menu-opener-inner::after {
  background: white;
  content: '';
  display: block;
  height: .4rem;
  width: 2.5rem;
}
.menu-opener-inner::before {
  -webkit-transform: translateY(-0.75rem);
  -ms-transform: translateY(-0.75rem);
  transform: translateY(-0.75rem);
}
.menu-opener-inner::after {
  -webkit-transform: translateY(0.25rem);
  -ms-transform: translateY(0.25rem);
  transform: translateY(0.25rem);
}
.menu-opener-inner.active {
  background: transparent;
}
.menu-opener-inner.active::before {
  -webkit-transform: translateY(0rem) rotate(-45deg);
  -ms-transform: translateY(0rem) rotate(-45deg);
  transform: translateY(0rem) rotate(-45deg);
}
.menu-opener-inner.active::after {
  -webkit-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
  -ms-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
  transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
}



.menu {
  background: #393535;
  color: transparent;
  opacity:0.9;
  height: 0rem;
  position: absolute;
  left: 1%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width:20%;
  z-index: -1;
  top: 3.8rem;

}
.menu.active {
  max-height: -webkit-calc(60% - 0.5rem);
  max-height: calc(60% - 0.5rem);
  height:auto;
  width:13%;
  min-width:170px;
  z-index:20;

 }

.menu.active .menu-link {
  color: white;
  z-index:20;
}

.menu-inner {
  margin-top: 1rem;
  float:left;
  width:90%;
  margin-left:0.5rem;
  list-style-type: none;
  padding: 0;
}

.menu-link {
  color: transparent;
  width: 100%;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  font-size: 0.9rem;
  font-weight: 100;
  height:calc(50%-0.5rem);
  text-align: left;
  text-decoration: none;
  z-index:20;
  padding:2px;
  display:block;
}
.menu-link li {
  margin: auto;
  z-index:20;
  display:flex;

}
.menu-span{
	float: right;
    width: 40%;
    margin-top: 1.5rem;
    font-size: 1.5rem;
    margin-right: 1.5rem;
}



@media screen and (max-width: 768px) {
  .menu {
   	top: 3rem;

   }

  .menu-inner {
     display: block;
	 margin-left:0.25rem;
	 margin-right: .25rem;

	}
  .menu-link {
	padding: 2px 0;
    font-size: 0.7em;

  }
  .menu.active {
     width:20%;
	 min-width:150px;
	 min-height: -webkit-calc(40% - 0.5rem);
     min-height: calc(40% - 0.5rem);
	height:auto;
  }
}
  @media screen and (max-width: 360px) {
  .menu {
   	top: 3rem;
	 }
  .menu-inner {
    display: block;
	margin-left:0.25rem;
	margin-right: .25rem;
	}

   .menu.active {
    width:45%;
	min-height: -webkit-calc(40% - 0.5rem);
    min-height: calc(40% - 0.5rem);
	height:auto;
  }
  .menu-link {
	padding: 2px 0;
    font-size: 0.7em;
	display:block;

  }
  }