.menu {
list-style: none;
padding: 0;
border: 1px solid rgba(0,0,0, .2);
}
.menu li {
overflow: hidden;
padding: 6px 10px;
font-size: 20px;
}
.menu li:first-child {
font-weight: bold;
padding: 15px 0 10px 15px;
margin-bottom: 10px;
border-bottom: 1px solid rgba(0,0,0, .2);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
color: #679bb7;
font-size: 24px;
box-shadow: 0 10px 20px -5px rgba(0,0,0, .2);
}
.menu li:first-child:before {
content: "\2749";
margin-right: 10px;
}
.menu span {
float: left;
width: 75%;
color: #7C7D7F;
}
.menu em {
float: right;
color: #9c836e;
font-weight: bold;
}

.bullet {
margin-left: 0;
list-style: none;
counter-reset: li;
}
.bullet li em{
float: right;
color: #9c836e;
font-weight: bold;	
}
.bullet li {
position: relative;
margin-bottom: 3px;
border: 3px solid #CADFCF;
padding: 0.6em;
border-radius: 4px;
background: #FEFEFE;
color: #231F20;
font-family: "Trebuchet MS", "Lucida Sans";
}
.bullet li:before {
position: absolute;
top: -0.7em;
padding-left: 0.4em;
padding-right: 0.4em;
font-size: 16px;
font-weight: bold;
color: #DCC24B;
background: #FEFEFE;
border-radius: 50%;
counter-increment: li;
content: counter(li);
}




.pills li em{
float: right;
color: #9c836e;
font-weight: bold;	
}
.pills {
  margin-left: 0;
  list-style: none;
  counter-reset: li;
  font-family: calibri;
}
.pills li {
  padding: 10px 0;
  position: relative;
  left: 1.5em;
  margin-bottom: 0.75em;
  padding-left: 1em;
  background: #E3DEDC;
}
.pills li:before {
  padding: 10px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1.5em;
  width: 1.875em;
  text-align: center;
  color: white;
  font-weight: bold;
  background: #D66786;
  border-bottom-left-radius: 70em;
  border-top-left-radius: 70em;
  counter-increment: li;
  content: counter(li);
}


.pills li em{
float: right;
color: #9c836e;
font-weight: bold;	
}


.category-list * {transition: .4s linear;}
.category-list {
  background: white;
  list-style-type: circle;
  list-style-position: inside;
  padding: 0 10px;
  margin: 0;
}
.category-list li {
  font-family: "Trebuchet MS", "Lucida Sans";
  border-bottom: 1px solid #efefef;
  padding: 10px 0;
}
.category-list a {
  text-decoration: none;
  color: #555;
}
.category-list li span {
  float: right;
  display: inline-block;
  border: 1px solid #efefef;
  padding: 0 5px;
  font-size: 13px;
  color: #999;
}
.category-list li:hover a {color: #c93961;}
.category-list li:hover span {
  color: #c93961;
  border: 1px solid #c93961;
}






.list4b {
    padding:0;
    list-style: none;
    counter-reset: li;
}    
.list4b .row {
    position: relative;
    padding:12px 20px 20px 28px;
    margin-left: 40px;
    transition-duration: 0.3s;
}
.list4b .row:before {
    border: 6px solid transparent;
    line-height: 30px;
    position: absolute;
    top: 0;
    left:-30px;
    width:42px;
    text-align:center;
    font-size: 13px;
    font-weight: bold;
    color: #ADCEE9;
    counter-increment: li;
    content: counter(li);
    transition-duration: 0.3s;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;    
}
.list4b .row:hover:before {
    color: #337AB7;
}
.list4b .row:after {
    position: absolute;
    top: 0;
    left: -30px;
    width: 42px;
    height: 42px;
    border: 6px solid #DDDDDD;
    border-radius: 50%;
    content: '';
    opacity: 0.5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;    
}
.list4b .row:hover:after {
    animation: 500ms ease-in-out 0s bounceIn;
    opacity: 1;
    border: 6px solid #ADCEE9;    
}    
 
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
    20% {
        transform: scale3d(1.3, 1.3, 1.3);
    }
    40% {
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(.97, .97, .97);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}