@media screen and (max-width: 767px)
{
 nav .logo {
   float: none;
   width: auto;
   justify-content: left;
   font-size: 1.3rem;
   color: red;
 }

 nav .links {
   position: fixed;
   z-index: 10;
   left: 0;
   right: 0;
   top: 70px;
   bottom: 100%;

   width: auto;
   height: 0;

   flex-direction: column;

   background-color: rgba(0, 0, 0, .8);
   overflow: hidden;
   transition: all .5s ease-in-out;
 }

nav .links li {
 margin-top: 0px;
 margin-bottom: 10px;
 margin-right: 5%;
 align-self: flex-end;
}

 nav .links a {
   margin: 5px 0px 5px 0px;
   /* font-size: 1.2rem; */
 }

 nav .icon-burger {
   display: block;
 }

 nav :checked ~ .links {
   /* bottom: auto; */
   height: 180px;
 }

 nav :checked ~ .icon-burger .line:nth-child(1) {
   transform: translateY(10px) rotate(225deg);
 }

 nav :checked ~ .icon-burger .line:nth-child(3) {
   transform: translateY(-10px) rotate(-225deg);
 }

 nav :checked ~ .icon-burger .line:nth-child(2) {
   opacity: 0;
 }

}