.g5plus-icon-box {
  cursor: pointer;
  position: relative;
}
.g5plus-icon-box > span {
  text-align: center;
}
.g5plus-icon-box > span img {
  max-width: 77px;
  height: auto;
}
.g5plus-icon-box .icon i {
  font-size: 40px;
}
.g5plus-icon-box .icon i:before {
  font-size: 40px;
}
.g5plus-icon-box li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.g5plus-icon-box h4 {
  margin-bottom: 8px;
}
.g5plus-icon-box h4,
.g5plus-icon-box a {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.g5plus-icon-box.text-light i {
  color: #fff;
}
.g5plus-icon-box.text-light h4,
.g5plus-icon-box.text-light a {
  color: #fff;
}
.g5plus-icon-box.text-light p {
  color: #ddd;
}
.g5plus-icon-box.text-light.circle-bd .icon i,
.g5plus-icon-box.text-light.circle-bg .icon i,
.g5plus-icon-box.text-light.square-bd .icon i,
.g5plus-icon-box.text-light.square-bg .icon i {
  border-color: #fff;
}
.g5plus-icon-box.circle-bg .icon i,
.g5plus-icon-box.square-bg .icon i {
  color: #fff;
}
.g5plus-icon-box.circle-bd .icon i,
.g5plus-icon-box.circle-bg .icon i {
  display: inline-block;
  width: 77px;
  height: 77px;
  line-height: 77px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.g5plus-icon-box.square-bd .icon i,
.g5plus-icon-box.square-bg .icon i {
  display: inline-block;
  width: 77px;
  height: 77px;
  line-height: 77px;
  font-size: 26px;
}
.g5plus-icon-box.align-left > span {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.g5plus-icon-box.align-left > span + .content {
  padding-left: 103px;
}
.g5plus-icon-box.align-top {
  text-align: center;
}
.g5plus-icon-box.align-top > span {
  width: 100%;
}
.g5plus-icon-box.align-top .content {
  margin-top: 17px;
}
.g5plus-icon-box.align-left > span {
  vertical-align: middle;
}
.g5plus-icon-box:hover .icon i,
.g5plus-icon-box:hover img {
  -webkit-animation-name: animation-skew;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1.2s;
  /* Safari 4.0 - 8.0 */
  animation-name: animation-skew;
  animation-duration: 1.2s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes animation-skew {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  75% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
/* Standard syntax */
@keyframes animation-skew {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  75% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
