
.dd {
  z-index:1;
  position:relative;
  display: inline-block;
}
.dd-a {
  padding:5px;
	margin-top: 5px;
	margin-left: 5px;
  background: #60646d;
	border: 1px solid #fff;
	border-radius: 8px;
  position:relative;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
	font-size: 13px;
	color: #fff;
}
.dd input:after {
  content:"";
  width:100%;
  height:2px;
  position:absolute;
  display:block;
  bottom:0;
  left:0;
  transform: scaleX(0);
  transform-origin: bottom left;
  transition-duration: 0.2s;
  -webkit-transform: scaleX(0);
  -webkit-transform-origin: bottom left;
  -webkit-transition-duration: 0.2s;
}
.dd input {
  top:0;
  opacity:0;
  display:block;
  padding:0;
  margin:0;
  border:0;
  position:absolute;
  height:100%;
  width:100%;
}
.dd input:hover {
  cursor:pointer;
}
.dd input:hover ~ .dd-a {
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
}
.dd input:checked:after {
  transform: scaleX(1);
  -webkit-transform: scaleX(1);
}
.dd input:checked ~ .dd-c {
  transform: scaleY(1);
  -webkit-transform: scaleY(1);
}
.dd-a span {
  color:#fff;
}
.dd-c{
  display:block;
  background: #60646d;
position: fixed;
  height:auto;
  transform: scaleY(0);
  transform-origin: top left;
  transition-duration: 0.2s;
  -webkit-transform: scaleY(0);
  -webkit-transform-origin: top left;
  -webkit-transition-duration: 0.2s;
	margin-top: 7px;
	border: 1px solid #60646d;
	padding-right: 10px;
	border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.dd-c ul {
  margin-left: 5px;
  padding:0;
  list-style-type: none;
}
.dd-c li {
  margin-botom:5px;
  word-break: keep-all;
  white-space:nowrap;
  display:block;
  position:relative;
}

@media screen and (max-width: 992px) {
  .dd {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  .dd {
    display: none;
  }
}

