.dropdownlist input[type="checkbox"]{
  position: absolute;
  left: -9999px;
}

.dropdownlist input[type="checkbox"] ~ ul{
  height: 0;
  transform: scaleY(0);
}

.dropdownlist input[type="checkbox"]:checked ~ ul{
  height: 100%;
  transform-origin: top;
  transition: transform .2s ease-out;
  transform: scaleY(1); 
}

.sublist li{ font-size: 16px; }

input[type="checkbox"]:checked + label{ margin-bottom: 20px; }


.dropdownlist{ text-align: center; }

.first{ width: 100%; text-align: center; margin-bottom: 0px; color: rgba(255,255,255,0.8); transition: all 0.2s linear; }

.first:hover { color: #fff; text-shadow: 0 0 20px rgba(255,255,255,0.8); transition: all 0.2s linear; cursor: pointer; }


#burger-toggle {
  position: relative;
  left: -100vw;
}
#navbar-spacer{ flex-grow: 1; }

.navbar-brand img {
    max-width: 200px;
    width: 100%;
}

.burger {
  position: absolute;
  width: 30px;
  opacity: 0.8;
  z-index: 11;
  cursor: pointer;
  transition: opacity 0.2s linear;
  margin-top: 3.5px;
  margin-bottom: 0px !important;
}
.burger i {
  display: block;
  height: 2px;
  border-radius: 3px;
  background-color: #ffc400;
}
.burger i + i {
  margin-top: 9.5px;
}
.burger:hover {
  opacity: 1;
  transition: opacity 0.2s linear;
}
.burger i:first-child {
  -webkit-animation: 0.3s unrotate-then-unmove2 forwards;
          animation: 0.3s unrotate-then-unmove2 forwards;
}
.burger i:nth-child(2) {
  transition: opacity 0.2s linear, -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out, opacity 0.2s linear;
  transition: transform 0.3s ease-out, opacity 0.2s linear, -webkit-transform 0.3s ease-out;
}
.burger i:last-child {
  -webkit-animation: 0.3s unrotate-then-unmove1 forwards;
          animation: 0.3s unrotate-then-unmove1 forwards;
}
.menu-screen {
  position: fixed;
  top: 0;
  left: -300vw;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  background: #19202b;/*rgba(0,0,0,0.85);*/
  display: flex;
  align-items: center;
  transition: opacity 0.2s linear, left 0s linear 0.2s;
}
.menu-screen a {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  transition: all 0.2s linear;
}
.menu-screen a:hover {
  color: #fff;
  text-shadow: 0 0 20px rgba(255,255,255,0.8);
  transition: all 0.2s linear;
}
.menu-screen nav {
  flex: 1 1 auto;
  height: 80vh;
  margin: 10vh 100px;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: flex;
}
.menu-screen nav ul {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-around;
  overflow: auto;
  align-items: center;
}
.menu-screen nav ul li {
  margin: 10px 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  -webkit-transform: translateY(-5vh);
          transform: translateY(-5vh);
}
#burger-toggle:checked ~ .burger i:first-child {
  -webkit-animation: 0.3s move-down-then-rotate forwards;
          animation: 0.3s move-down-then-rotate forwards;
}
#burger-toggle:checked ~ .burger i:nth-child(2) {
  opacity: 0;
  transition: opacity 0s linear 0.15s;
}
#burger-toggle:checked ~ .burger i:last-child {
  -webkit-animation: 0.3s move-up-then-rotate forwards;
          animation: 0.3s move-up-then-rotate forwards;
}
#burger-toggle:checked ~ .menu-screen {
  left: 0;
  opacity: 1;
  transition: opacity 0.3s linear;
}
#burger-toggle:checked ~ .menu-screen nav ul li {
  -webkit-transform: none;
          transform: none;
  opacity: 1;
  transition: opacity 0.2s linear 1.2s, -webkit-transform 0.2s linear 1.2s;
  transition: transform 0.2s linear 1.2s, opacity 0.2s linear 1.2s;
  transition: transform 0.2s linear 1.2s, opacity 0.2s linear 1.2s, -webkit-transform 0.2s linear 1.2s;
}
#burger-toggle:checked ~ .menu-screen nav ul li:nth-child(0) {
  transition-delay: 0.2s;
}
#burger-toggle:checked ~ .menu-screen nav ul li:nth-child(1) {
  transition-delay: 0.3s;
}
#burger-toggle:checked ~ .menu-screen nav ul li:nth-child(2) {
  transition-delay: 0.4s;
}
#burger-toggle:checked ~ .menu-screen nav ul li:nth-child(3) {
  transition-delay: 0.5s;
}
#burger-toggle:checked ~ .menu-screen nav ul li:nth-child(4) {
  transition-delay: 0.6s;
}
#burger-toggle:checked ~ .menu-screen nav ul li:nth-child(5) {
  transition-delay: 0.7s;
}
#burger-toggle:checked ~ .menu-screen nav ul li:nth-child(6) {
  transition-delay: 0.8s;
}
#burger-toggle:checked ~ .menu-screen nav ul li:nth-child(7) {
  transition-delay: 0.9s;
}
#burger-toggle:checked ~ .menu-screen nav ul li:nth-child(8) {
  transition-delay: 1s;
}
#burger-toggle:checked ~ .menu-screen nav ul li:nth-child(9) {
  transition-delay: 1.1s;
}
@-webkit-keyframes move-down-then-rotate {
  50% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
  }
  100% {
    -webkit-transform: translateY(12px) rotate(45deg);
            transform: translateY(12px) rotate(45deg);
  }
}
@keyframes move-down-then-rotate {
  50% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
  }
  100% {
    -webkit-transform: translateY(12px) rotate(45deg);
            transform: translateY(12px) rotate(45deg);
  }
}
@-webkit-keyframes move-up-then-rotate {
  50% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
  }
  100% {
    -webkit-transform: translateY(-12px) rotate(-45deg);
            transform: translateY(-12px) rotate(-45deg);
  }
}
@keyframes move-up-then-rotate {
  50% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
  }
  100% {
    -webkit-transform: translateY(-12px) rotate(-45deg);
            transform: translateY(-12px) rotate(-45deg);
  }
}
@-webkit-keyframes unrotate-then-unmove1 {
  0% {
    -webkit-transform: translateY(-12px) rotate(-45deg);
            transform: translateY(-12px) rotate(-45deg);
  }
  50% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
  }
  100% {
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes unrotate-then-unmove1 {
  0% {
    -webkit-transform: translateY(-12px) rotate(-45deg);
            transform: translateY(-12px) rotate(-45deg);
  }
  50% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
  }
  100% {
    -webkit-transform: none;
            transform: none;
  }
}
@-webkit-keyframes unrotate-then-unmove2 {
  0% {
    -webkit-transform: translateY(12px) rotate(45deg);
            transform: translateY(12px) rotate(45deg);
  }
  50% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
  }
  100% {
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes unrotate-then-unmove2 {
  0% {
    -webkit-transform: translateY(12px) rotate(45deg);
            transform: translateY(12px) rotate(45deg);
  }
  50% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
  }
  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@media only screen and (min-width: 520px) and (max-width: 769px) {

.burger{ margin-top: 0px; }

}

@media only screen and (min-width: 250px) and (max-width: 519px) {

.burger{ margin-top: 0px; }

.menu-screen nav ul li{ margin: 0; }

.menu-screen nav { margin: 10vh 60px; }

.sublist li{ font-size: 12px; margin-bottom: 20px !important; }

.sublist li:last-child{ margin-bottom: 0px; }

.first{ margin-bottom: 20px; }

}