ul {
  list-style-type: none;
  padding: 0;
}

.container {
  display: flex;
  
}
.container ul.menu {
  height: 50px;
  width: 50px;
  margin-top: 20px;
}
.container ul.menu li {
  position: relative;
  background: aqua;
  margin: 10px 0px 10px 20px;
  height: 4px;
  width: 40px;
  transition: transform .3s, width .3s;
}
.container .active_menu li:nth-child(1) {
  top: 18px;
  transform: rotate(135deg);
  transition: transform .3s;
}
.container .active_menu li:nth-child(2) {
  width: 0;
  transition: width .3s;
}
.container .active_menu li:nth-child(3) {
  bottom: 18px;
  transform: rotate(-135deg);
  transition: transform .3s;
}
.container ul.links {
  overflow: hidden;
  width: 0;
  margin-left: 0px;
  transition: width .4s, margin-left .4s;
}
.container ul.links li {
  margin: 5px;
}
.container ul.links li a {
  color: black;
  text-decoration: none;
  transition: color .5s;
  text-transform: uppercase;
  font-size: 20px;
  transition: color .5s, margin-left .5s;
}
.container ul.links li a:hover {
  color: black;
  margin-left: 20px;
  transition: color .5s, margin-left .5s;
}
.container .active_links {
  width: 480px !important;
  margin-left: 20px !important;
  margin-top: 30px;
  transition: width .4s, margin-left .4s;
}


.links{
  display: flex;
  direction: row;
}
.link-column{
  flex-direction: column;
  margin: 10px 4px;
}

@media (min-device-width : 768px) and (max-device-width : 1440px) {

  .container ul.links li{
display: inline;  }
.container ul.links li a{
  font-size: 20px;
}
.container .active_links {
  width: 900px; }
  .link-column{ flex-direction: row;}
}