Featured Services

<div class="features-services">
               <div class="features-list">
                   <span class="feature-icon">
                       <img src="icon-1.png" width="48" height="48" alt="" class="normal-icon">
                       <img src="icon-hover-1.png" width="48" height="48" alt="" class="active-icon">
                   </span>
                   <span class="feature-title">Quick One-Click Import</span>
               </div>
               <div class="features-list">
                   <span class="feature-icon">
                       <img src="icon-2.png" width="48" height="48" alt="" class="normal-icon">
                       <img src="icon-hover-2.png" width="48" height="48" alt="" class="active-icon">
                   </span>
                   <span class="feature-title">Advanced Theme Options</span>
               </div>
               <div class="features-list">
                   <span class="feature-icon">
                       <img src="icon-3.png" width="48" height="48" alt="" class="normal-icon">
                       <img src="icon-hover-3.png" width="48" height="48" alt="" class="active-icon">
                   </span>
                   <span class="feature-title">Full Responsive Page</span>
               </div>
               <div class="features-list">
                   <span class="feature-icon">
                       <img src="icon-4.png" width="48" height="48" alt="" class="normal-icon">
                       <img src="icon-hover-4.png" width="48" height="48" alt="" class="active-icon">
                   </span>
                   <span class="feature-title">Awesome Portfolio Design</span>
               </div>
               <div class="features-list">
                   <span class="feature-icon">
                       <img src="icon-5.png" width="48" height="48" alt="" class="normal-icon">
                       <img src="icon-hover-5.png" width="48" height="48" alt="" class="active-icon">
                   </span>
                   <span class="feature-title">Fully Optimized <br>for SEO</span>
               </div>
               <div class="features-list">
                   <span class="feature-icon">
                       <img src="icon-6.png" width="48" height="48" alt="" class="normal-icon">
                       <img src="icon-hover-6.png" width="48" height="48" alt="" class="active-icon">
                   </span>
                   <span class="feature-title">Ajax Load More Paginations</span>
               </div>
               <div class="features-list">
                   <span class="feature-icon">
                       <img src="icon-7.png" width="48" height="48" alt="" class="normal-icon">
                       <img src="icon-hover-7.png" width="48" height="48" alt="" class="active-icon">
                   </span>
                   <span class="feature-title">900+ Google Fonts</span>
               </div>
               <a href=""  class="features-list">
                   <span class="feature-icon">
                       <img src="icon-8.png" width="48" height="48" alt="" class="normal-icon">
                       <img src="icon-hover-8.png" width="48" height="48" alt="" class="active-icon">
                   </span>
                   <span class="feature-title">Extensive Documentation</span>
               </a>
               <a href=""  class="features-list">
                   <span class="feature-icon">
                       <img src="icon-9.png" width="48" height="48" alt="" class="normal-icon">
                       <img src="icon-hover-9.png" width="48" height="48" alt="" class="active-icon">
                   </span>
                   <span class="feature-title">Step-by-Step Video Tutorials</span>
               </a>
               <a href=""  class="features-list">
                   <span class="feature-icon">
                       <img src="icon-10.png" width="48" height="48" alt="" class="normal-icon">
                       <img src="icon-hover-10.png" width="48" height="48" alt="" class="active-icon">
                   </span>
                   <span class="feature-title">Free Support &amp; Updates</span>
               </a>

           </div>

.features-services { max-width:1170px; margin: auto; font-family: 'Roboto', sans-serif;
}
        /* Key Features */
.bg-grey {
 display: inline-block;
 width: 100%;
 background-color: #f9f9f9;
}
.bg-grey .fraxos-wrapper {
  padding-bottom: 30px;
}
#features .features-services {
  display: inline-block; 
  margin: 0 auto;
}
#features h2 {
  font-size: 45px;
  font-weight: 800;
  color: #111111;
}
#features p {
  font-size: 18px;
  color:#777777;
  font-family: 'Roboto Slab', serif;
}
.features-services .features-list {
  width: 14.8%;
  float: left; 
  padding: 30px 20px 30px; 
  margin-bottom: 60px;
  color: #222; cursor: pointer;

  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.features-services .features-list:nth-child(5n) {margin-right: 0;}
.features-services .features-list:hover {
  background-color: #fff;
  -webkit-box-shadow: 5px 5px 8px 5px rgba(0,0,0,0.05);
  box-shadow: 5px 5px 8px 5px rgba(0,0,0,0.05);
}
.features-services .features-list .feature-title {
  font-size: 13px;
  color: #555;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 18px;
  font-weight: 700;
  display: block; text-align: center;
}
.features-services .features-list:hover .feature-title {color: #1b1c1f;}
.features-services .feature-icon {
  display: block;
  color: #b0b0b0;
  margin-bottom: 9px; text-align: center;
}
.features-services .features-list:hover .feature-icon .normal-icon {display: none;}
.features-services .features-list .feature-icon .active-icon {display: none;}
.features-services .features-list:hover .feature-icon .active-icon {display: inline-block;}
.features-services .features-list:hover .feature-icon {color: #c7ac75;}