@charset "utf-8";
/* CSS Document */
@media screen and (min-width:360px) and (max-width:768px) {
.box {
  width:100px;
  height:100px;
  background-color:#000;
}

#toggler:checked + label .box {
  background-color: cyan;
}
#toggler {
  display:none;
}

.hamburger-container {
  display:block;
  width:25px;
  height:25px;
  position:absolute;
  top:70px;
  right:20px;
}

.hamburger-container span {
  display:block;
  height:3px;
  background-color:#999;
  position:relative;
  transition:transform .3s ease-in-out, top .3s ease-in-out .3s;
  top:0;
}

.hamburger-container span:nth-child(2) {
  margin-top:7px;
}

#toggler:checked + label .hamburger-container span:nth-child(1) {
  transform:rotate(45deg);
  top:4px;
  transition:top .3s ease-in-out, transform .3s ease-in-out .3s;
}

#toggler:checked + label .hamburger-container span:nth-child(2) {
  transform:rotate(-45deg);
  top:-6px;
  transition:top .3s ease-in-out, transform .3s ease-in-out .3s;
}

header {
  height:100px;
  position:relative;border-bottom:5px solid #0047BA;;
}

.nav-items {
  background-color:#036;
  width:100%;
  height:100vh;
  position:absolute;
  top:100px;
  left:0;
  transform: scaleY(0);
  transition: transform .3s ease-in-out .3s, opacity .3s ease-in-out .3s;
  transform-origin: 50% 0;
  opacity:0;
}

#toggler:checked ~ .nav-items {
 transform: scaleY(1); 
  opacity:1;
}

.nav-items ul {
  margin-top: 1em;
  padding:0 20px;
}

.nav-items ul li {
  color:#69C;
  list-style-type:none;
  border-bottom:1px solid #1b5085;
  text-align:center;
}

.nav-items ul li a {
  color:#c6dcf2;
  text-decoration:none;
  display:block;
  padding:10px 0;
}

.nav-items ul li a:hover {
  color:#FFF;
  background-color:#032c55;
}
}