.dropdown-el {
  margin-top: 0px;
  min-width: 12em;
  position: relative;
  display: inline-block;
  margin-right: 1em;
  min-height: 2.5em;
  max-height: 2.5em;
  overflow: hidden;
  top: .5em;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  color: #444;
  outline: none;
  border: .06em solid #ccc;
  border-radius: 0.5em;
  background-color: #fff;
  transition: 0.3s all ease-in-out;

}
.dropdown-el:hover {
    border: solid 1px #ccc !important;
}
.dropdown-el input {
  display: none;
}
.dropdown-el label {
  border-top: .06em solid #fff;
  display: block;
  height: 2.6em;
  line-height: 2.4em;
  padding-left: 1em;
  padding-right: 3em;
  cursor: pointer;
  position: relative;
  transition: 0.3s color ease-in-out;

}
.dropdown-el label:nth-child(2) {
  margin-top: 2.4em;
  border-top: .06em solid #d9d9d9;
}
.dropdown-el input:checked + label {
  display: block;
  border-top: none;
  position: absolute;
  top: 0;
}
.dropdown-el input:checked + label:nth-child(2) {
  margin-top: 0;
  position: relative;
}
.dropdown-el::after {
  content: "";
  position: absolute;
  right: 0.8em;
  top: 0.9em;
  border: 0.5em solid #ffa500;
  border-color: #ffa500  transparent transparent transparent;
  transition: .4s all ease-in-out;
}
.dropdown-el.expanded {
  background: #fff;
  border-radius: 0.5em;
  padding: 10px 0px 20px 0px;
  max-height: 100%;
  margin:0;top:0px; padding:0px; 
}
.dropdown-el.expanded label {  
  border-top: .06em solid #d9d9d9;
}
.dropdown-el.expanded label:hover {
  color: #3694d7;  background-color:#f4f4f4;
}
.dropdown-el.expanded input:checked + label {
  color: #3694d7;
}
.dropdown-el.expanded::after {
  transform: rotate(-180deg);
  top: .55em;
}
/*--------------HANDY--------------------*/
@media (min-width: 320px) and (max-width: 480px) {
.dropdown-el {
  width: 8em !important;


}


}