
.info {
    max-width: 360px;
    margin: 0 auto;
    padding: 70px 0 30px;
    text-align: center; }
    .info.info-hover .info-title {
      -webkit-transition: color .4s;
      transition: color .4s; }
    .info.info-hover:hover .icon {
      -webkit-transform: translate3d(0, -0.5rem, 0);
      transform: translate3d(0, -0.5rem, 0); }
      .info.info-hover:hover .icon.icon-primary.icon-circle {
        -webkit-box-shadow: 0px 15px 30px 0px rgba(249, 99, 50, 0.35);
                box-shadow: 0px 15px 30px 0px rgba(249, 99, 50, 0.35); }
      .info.info-hover:hover .icon.icon-info.icon-circle {
        -webkit-box-shadow: 0px 15px 35px 0px rgba(44, 168, 255, 0.35);
                box-shadow: 0px 15px 35px 0px rgba(44, 168, 255, 0.35); }
      .info.info-hover:hover .icon.icon-success.icon-circle {
        -webkit-box-shadow: 0px 15px 35px 0px rgba(24, 206, 15, 0.35);
                box-shadow: 0px 15px 35px 0px rgba(24, 206, 15, 0.35); }
      .info.info-hover:hover .icon.icon-warning.icon-circle {
        -webkit-box-shadow: 0px 15px 35px 0px rgba(255, 178, 54, 0.35);
                box-shadow: 0px 15px 35px 0px rgba(255, 178, 54, 0.35); }
      .info.info-hover:hover .icon.icon-danger.icon-circle {
        -webkit-box-shadow: 0px 15px 35px 0px rgba(255, 54, 54, 0.35);
                box-shadow: 0px 15px 35px 0px rgba(255, 54, 54, 0.35); }
      .info.info-hover:hover .icon.icon-info + .info-title {
        color: #2CA8FF; }
      .info.info-hover:hover .icon.icon-warning + .info-title {
        color: #FFB236; }
      .info.info-hover:hover .icon.icon-danger + .info-title {
        color: #FF3636; }
      .info.info-hover:hover .icon.icon-primary + .info-title {
        color: #f96332; }
      .info.info-hover:hover .icon.icon-success + .info-title {
        color: #18ce0f; }
    .info .icon {
      color: #888888;
      -webkit-transition: -webkit-transform .4s, -webkit-box-shadow .4s;
      transition: -webkit-transform .4s, -webkit-box-shadow .4s;
      transition: transform .4s, box-shadow .4s;
      transition: transform .4s, box-shadow .4s, -webkit-transform .4s, -webkit-box-shadow .4s; }
      .info .icon > i {
        font-size: 3em; }
      .info .icon.icon-circle {
        max-width: 80px;
        width: 80px;
        height: 80px;
        margin: 0 auto;
        border-radius: 50%;
        -webkit-box-shadow: 0px 9px 35px -6px rgba(0, 0, 0, 0.3);
                box-shadow: 0px 9px 35px -6px rgba(0, 0, 0, 0.3);
        font-size: 0.7142em;
        background-color: #FFFFFF;
        position: relative; }
        .info .icon.icon-circle i {
          line-height: 2.7; }
    .info .info-title {
      margin: 25px 0 15px;
      padding: 0 15px;
      color: #2c2c2c; }
    .info p {
      color: #888888;
      padding: 0 15px;
      font-size: 1.1em; }
  
  .info-horizontal {
    text-align: left !important; }
    .info-horizontal .icon {
      float: left;
      margin-top: 23px;
      margin-right: 10px; }
      .info-horizontal .icon > i {
        font-size: 2em; }
      .info-horizontal .icon.icon-circle {
        width: 65px;
        height: 65px;
        max-width: 65px;
        margin-top: 8px; }
        .info-horizontal .icon.icon-circle i {
          display: table;
          margin: 0 auto;
          line-height: 3.5;
          font-size: 1.9em; }
    .info-horizontal .description {
      overflow: hidden; }
  
  .icon.icon-primary {
    color: #f96332; }
    .icon.icon-primary.icon-circle {
      -webkit-box-shadow: 0px 9px 30px -6px rgba(249, 99, 50, 0.3);
              box-shadow: 0px 9px 30px -6px rgba(249, 99, 50, 0.3); }
  
  .icon.icon-info {
    color: #2CA8FF; }
    .icon.icon-info.icon-circle {
      -webkit-box-shadow: 0px 9px 30px -6px rgba(44, 168, 255, 0.3);
              box-shadow: 0px 9px 30px -6px rgba(44, 168, 255, 0.3); }
  
  .icon.icon-success {
    color: #18ce0f; }
    .icon.icon-success.icon-circle {
      -webkit-box-shadow: 0px 9px 30px -6px rgba(24, 206, 15, 0.3);
              box-shadow: 0px 9px 30px -6px rgba(24, 206, 15, 0.3); }
  
  .icon.icon-warning {
    color: #FFB236; }
    .icon.icon-warning.icon-circle {
      -webkit-box-shadow: 0px 9px 30px -6px rgba(255, 178, 54, 0.3);
              box-shadow: 0px 9px 30px -6px rgba(255, 178, 54, 0.3); }
  
  .icon.icon-danger {
    color: #FF3636; }
    .icon.icon-danger.icon-circle {
      -webkit-box-shadow: 0px 9px 30px -6px rgba(255, 54, 54, 0.3);
              box-shadow: 0px 9px 30px -6px rgba(255, 54, 54, 0.3); }
  
  .icon.icon-white {
    color: #FFFFFF; }  