.transition-animation {
    transition: all 0.5s;
  }
  /* Ul styles */
  ul {
    list-style: none;
  }
  ul.icon-effect > li {
    display: inline;
    margin-right: 16px; 
  }
  /*
  * Icon styles
  *
  * There are styles for icon and everything which are connected with it.
  */
  .icon {
    display: inline-block;
    position: relative;
    z-index: 1;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 22px;
    color: #f1f1f1;
    line-height: 44px;
    text-align: center;
    background-color: #b39755;
  }
  .icon:after {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content: '';
    box-sizing: content-box;
  }
  /* Hover effect */
  .icon-effect .icon {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    border: 1px solid transparent;
  }
  .icon-effect .icon:after {
    top: -7px;
    left: -7px;
    padding: 7px;
    box-shadow: 0 0 0 2px #b39755;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
  }
  .icon-effect-1a .icon:hover {
    background-color: #f1f1f1;
    color: #b39755;
    border: 1px solid #b39755;
  }
  .icon-effect-1a .icon:hover:after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }