*{

  margin: 0;

  padding: 0;

  font-family: Asics2;

  list-style: none;

  text-decoration: none;

}



.middle{

  display: none;

  position: absolute;

  top: 70px;

  left: 10px;

}



#close-btn{

  position: absolute;

  top: 0px;

  left: 310px;

  background: #3498db;

  color: white;

  padding: 5px 8px;

  border-radius: 5px;

}



.menu{

  width: 300px;

  border-radius: 5px;

  overflow: hidden;

}

.menu-btn {

  position: absolute;

  

  font-size: 13px;

  top: 10px;

  left: 10px;

  width: 160px;

  border-radius: 5px;

  overflow: hidden;

  padding: 16px;

 

  color: white;

}



.item{

  border-top: 1px solid #2980b9;

  

}



.btn{

  

  padding: 16px;

 

  color: white;

  position: relative;

}

.btn:before{

  content: "";

  position: absolute;

  width: 14px;

  height: 14px;

  

  left: 20px;

  bottom: -7px;

  transform: rotate(45deg);

}



.smenu{

  background: #333;

  overflow: hidden;

  transition: max-height 0.3s;

  max-height: 0;

}



.smenu a{

  display: block;

  padding: 12px 26px;

  color: white;

  font-size: 14px;

  margin: 4px 0px;

  position: relative;

}



.smenu a:before{

  content: "";

  position: absolute;

  width: 6px;

  height: 100%;

  top: 0;

  left: 0;

  background: #3498db;

  transition: 0.3s;

  opacity: 0;

}

.smenu a:hover:before{

  opacity: 1;

}



.item:target .smenu{

  max-height: 20em;

}