.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; -webkit-animation-duration: 1.2s; animation-name: animation-skew;
animation-duration: 1.2s;
} @-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);
}
} @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);
}
}