@charset "utf-8";

.byos-nav *,
.byos-nav *:before,
.byos-nav *:after {
  box-sizing:inherit;
}
.byos-nav {
  width:100%;
  height:50px;
  background-color:#fff;
  position:fixed;
  top:0;
  left:0;
  display:flex;
  align-items:center;
  padding:0 15px;
  z-index:1000;
  box-sizing:border-box;
}
.byos-nav-input {
  display:none;
}
.byos-nav-controls {
  width:23px;
  height:19px;
  font-size:0;
  margin-right:15px;
  display:block;
  position:relative;
}
.byos-nav-controls:before,
.byos-nav-controls:after {
  content:'';
  background-color:#000;
  display:inherit;
  width:100%;
  height:3px;
  position:absolute;
  top:0;
  left:0;
  transition:all 0.2s ease;
  transform-origin:left center
}
.byos-nav-controls:before {
  box-shadow:0 8px 0 rgba(0,0,0,1);
}
.byos-nav-open:checked ~ .byos-nav-controls:before {
  box-shadow:0 8px 0 rgba(0,0,0,0);
  transform:rotate(45deg);
}
.byos-nav-controls:after {
  top:unset;
  bottom:0;
}
.byos-nav-open:checked ~ .byos-nav-controls:after {
  transform:rotate(-45deg);
}
.byos-nav-controls .byos-nav-open,
.byos-nav-controls .byos-nav-close {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:1;
}
.byos-nav-open:checked ~ .byos-nav-controls .byos-nav-open,
.byos-nav-close:checked ~ .byos-nav-controls .byos-nav-close {
  display:none;
}
.byos-nav-open:checked ~ .byos-nav-controls .byos-nav-close,
.byos-nav-close:checked ~ .byos-nav-controls .byos-nav-open {
  display:block;
}
.byos-nav-label {
  cursor:pointer;
}
.byos-nav-headline {
  font-size:18px;
}
.byos-nav-list {
  position:inherit;
  top:50px;
  left:-100%;
  background-color:inherit;
  width:inherit;
  height:auto;
  min-height:100%;
  border-top:1px solid #cdcdcd;
  padding:0 15px;
  transition:left 0.2s ease;
  margin:0;
  list-style:none;
}
.byos-nav-open:checked ~ .byos-nav-list {
  left:0;
}
.byos-nav-close:checked ~ .byos-nav-list {
  left:-100%;
}
.byos-nav-list-item {
  padding-top:15px;
  list-style:inherit;
}
.byos-nav-list-item > a {
  color:inherit;
  text-decoration:none;
}

@media (min-width: 768px) {
  .byos-nav-list {
    width:320px;
    left:-320px;
  }
  .byos-nav-close:checked ~ .byos-nav-list {
    left:-320px;
  }
}