span.service_title {
	line-height: 1;
    text-transform: capitalize;
    display: inline-block;
    font-size: 20px;
	transition: all 0.35s ease-in-out;
    outline: medium none;
    text-decoration: none;
    font-weight: 600;
	color: #0e0e0e;
}
span.grey {
  background: #1D2027;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #fff;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 15px;
  text-align: center;
  width: 1.6em; 
}

.family {
	position: relative;
	vertical-align: middle;
	top:50px;
	width: 207px;
	height:40px;
	padding-top:5px;
	margin-bottom: 20px;
	background-color: #0d1621;
	left: 10px;
	cursor:pointer;
	border: 2px #fff solid;
}

.family>a {
	display: block;
	position: relative;
	z-index: 10;
	height: 29px;
	padding-left: 19px;
	font-size: 14px;
	color: #fff;
	text-align: left;
	line-height: 27px;
	transition: all .2s;
	text-decoration: none;
}

.family .icon {
	position: relative;
	display: inline-block;
	width: 26px;
	height: 17px;
	overflow: hidden;
	vertical-align: middle;
}

.family .icon:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	-webkit-transform: translate(-50%, -50%) rotate(45deg);
	transform: translate(-50%, -50%) rotate(45deg);
	margin-top: 2px;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
}

.family .icon.rotate:before {
	transform: translate(-50%, -50%) rotate(-135deg);
	-webkit-transform: translate(-50%, -50%) rotate(-135deg);
	margin-top: -4px;
}

.family ul {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 5px 27px;
	margin-bottom: 40px;
	background: #283341;
	border-bottom: 0;
	opacity: 0;
}

.family ul li a {
	display: block;
	position: relative;
	padding: 5px 0;
	font-size: 14px;
	color: #fff !important;
	text-decoration: none;
}
.family ul li a:hover{
	color:#2879fe;
}
.family ul.opacity {
	opacity: 1;
}