body { margin: 0; padding: 0; }

/*header { display: flex; justify-content: space-between; align-items: center; padding: 1.4em; background: #2d303a; border-bottom: 2px solid #3c4356;
}
*/
.logotype { font-family: sans-serif; font-size: 24px; color: #ffffff; }

nav { display: flex; align-items: center; padding: 2%; }
@media screen and (max-width: 48em) { nav nav { display: inline; } }

.menu__box { display: flex; flex-direction: row; list-style-type: none; margin-top: -5%; }
@media screen and (max-width: 48em) { .menu__box { flex-direction: column; position: fixed; visibility: hidden; top: 0; left: 0; width: 100%; height: 24em; margin: -600px 0 0 0; padding: 15% 0 0; text-align: center; background-color: #2d303a; box-shadow: 1px 0 6px rgba(0, 0, 0, 0.2); z-index: 1; transition-duration: 0.7s; } }

.menu__item { display: flex; flex-direction: column; padding: 0 1em 0 1.9em; color: #333; font-family: sans-serif; font-size: 14px; font-weight: 400; text-decoration: none; text-transform: uppercase; }
@media screen and (max-width: 48em) { .menu__item { display: block; margin-top: 0%; padding: 12px 24px; color: #fff; font-size: 14px; transition-duration: 0.5s; }
  .menu__item:hover { background-color: #4f5464; } }

.borderbox { margin: -20px 0px 0px; background-color: #fff; padding: 5px; }

#menu__toggle { opacity: 0; }
#menu__toggle:checked ~ .borderbox > .menu__btn > span { transform: rotate(45deg); }
#menu__toggle:checked ~ .borderbox > .menu__btn > span::before { top: 0; transform: rotate(0); background: #fff; }
#menu__toggle:checked ~ .borderbox > .menu__btn > span::after { top: 0; transform: rotate(90deg); background: #fff; }
#menu__toggle:checked ~ .menu__box { visibility: visible; left: 0; margin: 0; }

.menu__btn { transition-duration: 0.25s; box-sizing: border-box; display: flex; align-items: center; position: relative; bottom: 2px; width: 32px; height: 32px; cursor: pointer; z-index: 2; }
.menu__btn span { display: inline-block; position: absolute; width: 100%; height: 3px; background-color: #333333; }
.menu__btn span::before { display: inline-block; position: absolute; width: 100%; height: 3px; background-color: #333333; content: ''; top: -10px; transition-duration: 0.25s; }
.menu__btn span::after { display: inline-block; position: absolute; width: 100%; height: 3px; background-color: #333333; content: ''; top: 10px; transition-duration: 0.25s; }
@media screen and (min-width: 48em) { .menu__btn { display: none; } }