@media screen and (max-width: 768px) {
  .grey-footer {
    min-height: 140px;
  }
  footer.mobile-footer {
    display:block;
    width:100%;
    height:60px;
    background:red;
    position:fixed;
    bottom:0px;
    background:white;
    border-top:1px solid #ddd;
    padding:0;
    z-index: 100;
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
  }
  footer.mobile-footer .navbar-nav{
    padding:0;
    margin:0;
  }
  footer.mobile-footer .navbar-nav>li>a {
    line-height: 60px;
    padding: 0;
    float: left;
    width: 25%;
    display: block;
    background-repeat: no-repeat;
    background-position: top 10px center;
    padding-top: 16px;
    font-size: 12px;
    color: #4A4A4A;
  }
  footer.mobile-footer .navbar-nav li.active a {
    color: #D13138;
  }
  footer.mobile-footer .ribbon {
    background-image: url(/images/ribbon-b.png);
    background-size: 22px 26px;
  }
  footer.mobile-footer .people {
    background-image: url(/images/ios-people.png);
    background-size: 35px 20px;
  }
  footer.mobile-footer .bell {
    background-image: url(/images/ios-bell.png);
    background-size: 20px 20px;
  }
  footer.mobile-footer .calendar{
    background-image: url(/images/ios-calendar.png);
    background-size: 21px 20px;
  }


  footer.mobile-footer li.active .ribbon {
    background-image: url(/images/active/ribbon-b.png);
  }
  footer.mobile-footer li.active .people {
    background-image: url(/images/active/ios-people.png);
  }
  footer.mobile-footer li.active .bell {
    background-image: url(/images/active/ios-bell.png);
  }
  footer.mobile-footer li.active .calendar{
    background-image: url(/images/active/ios-calendar.png);
  }
}