#select {
  position: relative;
  width: 100%;
}
#select span {
  padding: 5px;
   
}
 input:focus + #list {
  display: block;
   
   
}

#list {
  max-height: 120px;
  overflow-x: auto;
  overflow-x: hidden;
  
  margin-top: -10px;
  display: none;
  position: absolute;
  width: 400px;
}
#list:hover {
  display: block;
}
#list:c {
  display: block;
}
#list a {
  display: block;
  background: grey;
  text-align:left;
  color: white;
  text-decoration: none;
  padding: 5px 25px;
}
 #list a:hover {
  font-size:18px;
  background-color: blue;
  cursor: pointer;

}

@media (max-width: 1000px) {


  #select {
  position: relative;
  width: 100%;
}
#select span {
  padding: 5px;
   
}
 input:focus + #list {
  display: block;
 }

 #list {
  max-height: 200px;
  overflow-x: auto;
  overflow-x: hidden;
  
  margin-top: -10px;
  display: none;
  position: absolute;
  width: 350px;
}
#list:hover {
  display: block;
}
#list:c {
  display: block;
}
#list a {
  display: block;
  border-radius :25px;
  background: black;
  font-size: 20px;
  text-align:left;
  color: white;
  text-decoration: none;
  padding: 5px 25px;
}
 #list a:hover {
  font-size:25px;
  background-color: blue;
  cursor: pointer;

}