.uc_icon_hover_effects *{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.uc_icon_hover_effects .uc_icon_holder{
position: relative;
text-align: center;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box{
width: 100%;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box a{
display: inline-block;
font-size: 0px;
cursor: pointer;
margin: 10px;
width: 90px;
height: 90px;
border-radius: 50%;
text-align: center;
position: relative;
z-index: 1;
color: fff;
transition: all ease-in-out 0.3s  !important;
-webkit-transition: all ease-in-out 0.3s !important;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box a:before,
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box a:after{
box-sizing: unset;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box a:before{
content: "";
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;	
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box i{
font-size: 48px;
line-height: 90px;
} .uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-1{
color: #fff;
background: rgba(255,255,255,0.1);
-webkit-transition: background 0.2s, color 0.2s;
-moz-transition: background 0.2s, color 0.2s;
transition: background 0.2s, color 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-1:hover{
background: rgba(255,255,255,1);
color: #41ab6b;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-1:before{
top: -7px;
left: -7px;
padding: 7px;
box-shadow: 0 0 0 4px #fff;
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
-webkit-transform: scale(.8);
-moz-transition: -moz-transform 0.2s, opacity 0.2s;
-moz-transform: scale(.8);
-ms-transform: scale(.8);
transition: transform 0.2s, opacity 0.2s;
transform: scale(.8);
opacity: 0;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-1:hover:before{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
} .uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-2{
color: #eea303;
box-shadow: 0 0 0 3px #fff;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-2:hover{
color: #eea303;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-2:before{
top: -2px;
left: -2px;
margin: 2px;
z-index: -1;
background: #fff;
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
-moz-transition: -moz-transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-2:hover:before{
-webkit-transform: scale(0.85);
-moz-transform: scale(0.85);
-ms-transform: scale(0.85);
transform: scale(0.85);
} .uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-3{
color: #f06060;
box-shadow: 0 0 0 4px #fff;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-3:hover{
color: #fff;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-3:before{
top: -2px;
left: -2px;
padding: 2px;
z-index: -1;
background: #fff;
-webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
-moz-transition: -moz-transform 0.2s, opacity 0.3s;
transition: transform 0.2s, opacity 0.3s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-3:hover:before{
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
opacity: 0;
} .uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-4{
color: #fff;
width: 90px;
height: 90px;
box-shadow: 0 0 0 4px rgba(255,255,255,1);
-webkit-transition: box-shadow 0.2s;
-moz-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-4:hover{
box-shadow: 0 0 0 0 rgba(255,255,255,0);
color: #fff;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-4:before{
top: -4px;
left: -4px;
padding: 0;
z-index: 10;
border: 4px dashed #fff;
} .uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-5{
color: #fff;
box-shadow: 0 0 0 4px rgba(255,255,255,1);
-webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
-moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-5:hover{
background: rgba(255,255,255,1);
color: #702fa8;
box-shadow: 0 0 0 8px rgba(255,255,255,0.3);
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-5:hover i{
-webkit-animation: toRightFromLeft 0.3s forwards;
-moz-animation: toRightFromLeft 0.3s forwards;
animation: toRightFromLeft 0.3s forwards;
} .uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-6{
color: #fff;
box-shadow: 0 0 0 4px rgba(255,255,255,1);
-webkit-transition: background 0.2s, color 0.2s;
-moz-transition: background 0.2s, color 0.2s;
transition: background 0.2s, color 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-6:hover{
background: rgba(255,255,255,1);
color: #64bb5d;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-6:before{
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content: '';
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-6:hover i {
-webkit-animation: spinAround 2s linear infinite;
-moz-animation: spinAround 2s linear infinite;
animation: spinAround 2s linear infinite;
} .uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-7{
box-shadow: 0 0 0 4px rgba(255,255,255,1);
-webkit-transition: background 0.2s, color 0.2s;
-moz-transition: background 0.2s, color 0.2s;
transition: background 0.2s, color 0.2s;
color: rgba(255,255,255,0.8);
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-7 i{
color: inherit;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.7;
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
-moz-transition: -moz-transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-7:hover i{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-7:hover{
color: #fff;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-7:before{
top: -8px;
left: -8px;
padding: 8px;
z-index: -1;
opacity: 0;
box-shadow: 0 0 0 rgba(255,255,255,1);
-webkit-transition: opacity 0.2s, box-shadow 0.2s;
-moz-transition: opacity 0.2s, box-shadow 0.2s;
transition: opacity 0.2s, box-shadow 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-7:hover:before {
opacity: 1;
box-shadow: 3px 3px 0 rgba(255,255,255,1);
} .uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-8{
color: rgba(255,255,255,1);
box-shadow: 0 0 0 4px rgba(255,255,255,1);
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-8 i{
color: inherit;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.7;
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
-moz-transition: -moz-transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-8:hover i{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-8:before{
top: -8px;
left: -8px;
padding: 8px;
z-index: -1;
opacity: 0;
box-shadow: 3px 3px rgba(255,255,255,1);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
-moz-transition: opacity 0.2s, -moz-transform 0.2s;
transition: opacity 0.2s, transform 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-8:hover:before {
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
} .uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-9{
color: #fff;
background: rgba(255,255,255,0.1);
-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
-moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
transition: transform ease-out 0.1s, background 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-9:hover{
background: rgba(255,255,255,0.05);
-webkit-transform: scale(0.93);
-moz-transform: scale(0.93);
-ms-transform: scale(0.93);
transform: scale(0.93);
color: #fff;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-9:before{
top: 0;
left: 0;
padding: 0;
z-index: -1;
box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
opacity: 0;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-9:hover:before {
-webkit-animation: sonarEffect 1.3s ease-out 75ms;
-moz-animation: sonarEffect 1.3s ease-out 75ms;
animation: sonarEffect 1.3s ease-out 75ms;
} .uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-10{
color: #fff;
-webkit-transition: box-shadow 0.2s;
-moz-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-10:hover{
box-shadow: 0 0 0 10px rgba(255,255,255,1);
color: #fff;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-10:before{
top: 0;
left: 0;
padding: 0;
box-shadow: 0 0 0 3px #fff;
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
-moz-transition: -moz-transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-10:hover:before {
-webkit-transform: scale(0.85);
-moz-transform: scale(0.85);
-ms-transform: scale(0.85);
transform: scale(0.85);
opacity: 0.5;
} .uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-11{
color: #fff;
-webkit-transition: box-shadow 0.2s;
-moz-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-11:hover{
box-shadow: 0 0 0 10px rgba(255,255,255,0.4);
color: #fff;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-11:before{
top: 0;
left: 0;
padding: 0;
box-shadow: 0 0 0 3px #fff;
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
-moz-transition: -moz-transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-11:hover:before {
-webkit-transform: scale(0.85);
-moz-transform: scale(0.85);
-ms-transform: scale(0.85);
transform: scale(0.85);
} .uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-12{
color: #fff;
overflow: hidden;
box-shadow: 0 0 0 4px rgba(255,255,255,1);
-webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
-moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-12:hover{
background: rgba(255,255,255,1);
color: #702fa8;
box-shadow: 0 0 0 8px rgba(255,255,255,0.3);
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-12:hover i{
-webkit-animation: toLeftFromRight 0.3s forwards;
-moz-animation: toLeftFromRight 0.3s forwards;
animation: toLeftFromRight 0.3s forwards;
} .uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-13{
color: #fff;
overflow: hidden;
box-shadow: 0 0 0 4px rgba(255,255,255,1);
-webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
-moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-13:hover{
background: rgba(255,255,255,1);
color: #702fa8;
box-shadow: 0 0 0 8px rgba(255,255,255,0.3);
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-13:hover i{
-webkit-animation: toTopFromBottom 0.3s forwards;
-moz-animation: toTopFromBottom 0.3s forwards;
animation: toTopFromBottom 0.3s forwards;
} .uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-14{
color: #fff;
overflow: hidden;
box-shadow: 0 0 0 4px rgba(255,255,255,1);
-webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
-moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-14:hover{
background: rgba(255,255,255,1);
color: #702fa8;
box-shadow: 0 0 0 8px rgba(255,255,255,0.3);
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-14:hover i{
-webkit-animation: toBottomFromTop 0.3s forwards;
-moz-animation: toBottomFromTop 0.3s forwards;
animation: toBottomFromTop 0.3s forwards;
}  @-webkit-keyframes spinAround {
from {
-webkit-transform: rotate(0deg)
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes spinAround {
from {
-moz-transform: rotate(0deg)
}
to {
-moz-transform: rotate(360deg);
}
}
@keyframes spinAround {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg);
}
} @-webkit-keyframes toRightFromLeft {
49% {
-webkit-transform: translate(100%);
}
50% {
opacity: 0;
-webkit-transform: translate(-100%);
}
51% {
opacity: 1;
}
}
@-moz-keyframes toRightFromLeft {
49% {
-moz-transform: translate(100%);
}
50% {
opacity: 0;
-moz-transform: translate(-100%);
}
51% {
opacity: 1;
}
}
@keyframes toRightFromLeft {
49% {
transform: translate(100%);
}
50% {
opacity: 0;
transform: translate(-100%);
}
51% {
opacity: 1;
}
} @-webkit-keyframes toLeftFromRight {
49% {
-webkit-transform: translate(-100%);
}
50% {
opacity: 0;
-webkit-transform: translate(100%);
}
51% {
opacity: 1;
}
}
@-moz-keyframes toLeftFromRight {
49% {
-moz-transform: translate(-100%);
}
50% {
opacity: 0;
-moz-transform: translate(100%);
}
51% {
opacity: 1;
}
}
@keyframes toLeftFromRight {
49% {
transform: translate(-100%);
}
50% {
opacity: 0;
transform: translate(100%);
}
51% {
opacity: 1;
}
} @-webkit-keyframes toTopFromBottom {
49% {
-webkit-transform: translateY(-100%);
}
50% {
opacity: 0;
-webkit-transform: translateY(100%);
}
51% {
opacity: 1;
}
}
@-moz-keyframes toTopFromBottom {
49% {
-moz-transform: translateY(-100%);
}
50% {
opacity: 0;
-moz-transform: translateY(100%);
}
51% {
opacity: 1;
}
}
@keyframes toTopFromBottom {
49% {
transform: translateY(-100%);
}
50% {
opacity: 0;
transform: translateY(100%);
}
51% {
opacity: 1;
}
} @-webkit-keyframes toBottomFromTop {
49% {
-webkit-transform: translateY(100%);
}
50% {
opacity: 0;
-webkit-transform: translateY(-100%);
}
51% {
opacity: 1;
}
}
@-moz-keyframes toBottomFromTop {
49% {
-moz-transform: translateY(100%);
}
50% {
opacity: 0;
-moz-transform: translateY(-100%);
}
51% {
opacity: 1;
}
}
@keyframes toBottomFromTop {
49% {
transform: translateY(100%);
}
50% {
opacity: 0;
transform: translateY(-100%);
}
51% {
opacity: 1;
}
}