.menu {
  background-color: black;
  width: 100%;
  font-weight: bold;
}

.menu div:first-of-type {
  display: inline-block;
  width: 15%;
  text-align: center;
  margin: 10px;
  font-size: xx-large;
  color: white;
}

.menu div a label:first-child {
  color:#ffd801;
}

.menu figure {
  display: inline-block;
  width: 18%;
  text-align: right;
}

.menu figure label {
  color: white;
}

.menu > ul {
  display: inline-block;
  font-size: large;
  color: white;
  list-style: none;
  width: 62%;
  text-align: center;
}

.menu > ul > li {
  display: inline-block;
  padding: 3px;
  cursor: pointer;
}

.menu > ul > li:first-of-type a {
  color: #ffd801;
}

.menu > ul > li:hover ul {
  display: block;
  z-index: 5;
}

.submenu {
  display: none;
  position: absolute;
  text-align: left;
  background-color: black;
}

.submenu li {
  display: block;
  padding: 7px;
}

.submenu li:hover a {
  color: #ffd801;
}

.menu > ul > li span:after {
	width: 0;
	height: 0;
	border: 0.313em solid transparent; /* 5 */
	border-bottom: none;
	border-top-color: #ffd801;
	content: '';
	vertical-align: middle;
	display: inline-block;
	position: relative;
	right: -0.313em; /* 5 */
}

.menu-icon {
  display: none;
  cursor: pointer;
  float: left;
  padding: 18px 10px;
  position: relative;
  user-select: none;
}

.menu-icon .navicon {
  background: white;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

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

.menu-icon .navicon:before {
  top: 5px;
}

.menu-icon .navicon:after {
  top: -5px;
}

.menu-btn {
  display: none;
}

.menu-btn:checked ~ .menu {
  max-height: 240px;
}

.menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

@media only screen
and (min-width : 320px)
and (max-width : 640px) {
  .menu > ul {display: none; position: absolute; width: 140px; background-color: black; text-align: left; z-index: 5; padding: 5px;}
  .menu > ul > li {display: block;}
  .menu > ul > li:hover ul {display: inline-block;}
  .menu div:first-of-type {font-size: large; width: initial;}
  .menu figure {width: initial;}
  .menu-icon {display: block;}
  .menu-btn:checked ~ ul {display: block;}
}