.hi-icon-wrap {
  text-align:center;
  margin:0 auto;
}

.hi-icon {
  display:inline-block;
  font-size:0px;
  cursor:pointer;
  width:70px;
  height:70px;
  border-radius:50%;
  text-align:center;
  position:relative;
  z-index:1;
  color:#fff;
}

.hi-icon i {
  font-size:50px;
  line-height:70px;
}

.hi-icon:after {
  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;
}

.hi-icon:before {
  speak:none;
  font-size:50px;
  line-height:70px;
  font-style:normal;
  font-weight:normal;
  font-variant:normal;
  text-transform:none;
  display:block;
  -webkit-font-smoothing:antialiased;
}

.hi-icon-effect-1 .hi-icon {
  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;
}

.hi-icon-effect-1 .hi-icon:after {
  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;
}

.hi-icon-effect-1a .hi-icon:hover {
  background:rgba(255,255,255,1);
  color:#41ab6b;
}

.hi-icon-effect-1a .hi-icon:hover:after {
  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  -ms-transform:scale(1);
  transform:scale(1);
  opacity:1;
}

.hi-icon-effect-1b .hi-icon:hover {
  background:rgba(255,255,255,1);
  color:#41ab6b;
}

.hi-icon-effect-1b .hi-icon:after {
  -webkit-transform:scale(1.2);
  -moz-transform:scale(1.2);
  -ms-transform:scale(1.2);
  transform:scale(1.2);
}

.hi-icon-effect-1b .hi-icon:hover:after {
  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  -ms-transform:scale(1);
  transform:scale(1);
  opacity:1;
}

.hi-icon-effect-2 .hi-icon {
  color:#eea303;
  box-shadow:0 0 0 3px #fff;
  -webkit-transition:color 0.3s;
  -moz-transition:color 0.3s;
  transition:color 0.3s;
}

.hi-icon-effect-2 .hi-icon:after {
  top:-2px;
  left:-2px;
  padding: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;
}

.hi-icon-effect-2a .hi-icon:hover {
  color:#eea303;
}

.hi-icon-effect-2a .hi-icon:hover:after {
  -webkit-transform:scale(0.85);
  -moz-transform:scale(0.85);
  -ms-transform:scale(0.85);
  transform:scale(0.85);
}

.hi-icon-effect-2b .hi-icon:hover:after {
  -webkit-transform:scale(0);
  -moz-transform:scale(0);
  -ms-transform:scale(0);
  transform:scale(0);
  opacity:0;
  -webkit-transition:-webkit-transform 0.4s, opacity 0.2s;
  -moz-transition:-moz-transform 0.4s, opacity 0.2s;
  transition:transform 0.4s, opacity 0.2s;
}

.hi-icon-effect-2b .hi-icon:hover {
  color:#fff;
}

.hi-icon-effect-3 .hi-icon {
  box-shadow:0 0 0 4px #fff;
  -webkit-transition:color 0.3s;
  -moz-transition:color 0.3s;
  transition:color 0.3s;
}

.hi-icon-effect-3 .hi-icon:after {
  top:-2px;
  left:-2px;
  padding:2px;
  z-index:-1;
  background:#004f6d;
  -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;
}

.hi-icon-effect-3a .hi-icon {
  color:#efefef;
}

.hi-icon-effect-3a .hi-icon:hover {
  color:#c92b07;
}

.hi-icon-effect-3a .hi-icon:hover:after {
  -webkit-transform:scale(1.3);
  -moz-transform:scale(1.3);
  -ms-transform:scale(1.3);
  transform:scale(1.3);
  opacity:0;
}

.hi-icon-effect-3b .hi-icon {
  color:#fff;
}

.hi-icon-effect-3b .hi-icon:hover {
  color:#f06060;
}

.hi-icon-effect-3b .hi-icon:after {
  -webkit-transform:scale(1.3);
  -moz-transform:scale(1.3);
  -ms-transform:scale(1.3);
  transform:scale(1.3);
  opacity:0;
}

.hi-icon-effect-3b .hi-icon:hover:after {
  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  -ms-transform:scale(1);
  transform:scale(1);
  opacity:1;
}

.hi-icon-effect-4 .hi-icon {
  width:92px;
  height:92px;
  box-shadow:0 0 0 4px rgba(255,255,255,1);
}

.hi-icon-effect-4a .hi-icon {
  -webkit-transition:box-shadow 0.2s;
  -moz-transition:box-shadow 0.2s;
  transition:box-shadow 0.2s;
}

.hi-icon-effect-4 .hi-icon:before {
  line-height:92px;
}

.hi-icon-effect-4 .hi-icon:after {
  top:-4px;
  left:-4px;
  padding:0;
  z-index:10;
  border:4px dashed #fff;
}

.hi-icon-effect-4 .hi-icon:hover {
  box-shadow:0 0 0 0 rgba(255,255,255,0);
  color:#fff;
}

.hi-icon-effect-4b .hi-icon:hover {
  -webkit-transition:box-shadow 0.2s;
  -moz-transition:box-shadow 0.2s;
  transition:box-shadow 0.2s;
}

.hi-icon-effect-4b .hi-icon:hover:after {
  -webkit-animation:spinAround 9s linear infinite;
  -moz-animation:spinAround 9s linear infinite;
  animation:spinAround 9s linear infinite;
}

@keyframes spinAround {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}

.hi-icon-effect-5 .hi-icon {
  box-shadow:0 0 0 4px #ffffff;
  -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;
  color:#004f6d;
}

.hi-icon-effect-5 .hi-icon:after {
  display:none;
}

.hi-icon-effect-5 .hi-icon:hover {
  background:#fefefe;
  color:#c92b07;
  box-shadow:0 0 0 8px rgba(255,255,255,0.3);
}

.hi-icon-effect-5a .hi-icon:hover i {
  -webkit-animation:toRightFromLeft 0.3s forwards;
  -moz-animation:toRightFromLeft 0.3s forwards;
  animation:toRightFromLeft 0.3s forwards;
}

@keyframes toRightFromLeft {
  49% {
    transform:translate(100%);
  }
  50% {
    opacity:0;
    transform:translate(-100%);
  }
  51% {
    opacity:1;
  }
}

.hi-icon-effect-5b .hi-icon:hover i {
  -webkit-animation:toLeftFromRight 0.3s forwards;
  -moz-animation:toLeftFromRight 0.3s forwards;
  animation:toLeftFromRight 0.3s forwards;
}

@keyframes toLeftFromRight {
  49% {
    transform:translate(-100%);
  }
  50% {
    opacity:0;
    transform:translate(100%);
  }
  51% {
    opacity:1;
  }
}

.hi-icon-effect-5c .hi-icon:hover i {
  -webkit-animation:toTopFromBottom 0.3s forwards;
  -moz-animation:toTopFromBottom 0.3s forwards;
  animation:toTopFromBottom 0.3s forwards;
}

@keyframes toTopFromBottom {
  49% {
    transform:translateY(-100%);
  }
  50% {
    opacity:0;
    transform:translateY(100%);
  }
  51% {
    opacity:1;
  }
}

.hi-icon-effect-5d .hi-icon:hover i {
  -webkit-animation:toBottomFromTop 0.3s forwards;
  -moz-animation:toBottomFromTop 0.3s forwards;
  animation:toBottomFromTop 0.3s forwards;
}

@keyframes toBottomFromTop {
  49% {
    transform:translateY(100%);
  }
  50% {
    opacity:0;
    transform:translateY(-100%);
  }
  51% {
    opacity:1;
  }
}

.hi-icon-effect-6 .hi-icon {
  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;
}

.hi-icon-effect-6 .hi-icon:hover {
  background:rgba(255,255,255,1);
  color:#64bb5d;
}

.hi-icon-effect-6 .hi-icon:hover i {
  -webkit-animation:spinAround 2s linear infinite;
  -moz-animation:spinAround 2s linear infinite;
  animation:spinAround 2s linear infinite;
}

.hi-icon-effect-7 .hi-icon {
  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;
}

.hi-icon-effect-7 .hi-icon:hover {
  color:#fff;
}

.hi-icon-effect-7 .hi-icon:after {
  top:-8px;
  left:-8px;
  padding:8px;
  z-index:-1;
  opacity:0;
}

.hi-icon-effect-7a .hi-icon:after {
  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;
}

.hi-icon-effect-7a .hi-icon:hover:after {
  opacity:1;
  box-shadow:3px 3px 0 rgba(255,255,255,1);
}

.hi-icon-effect-7a .hi-icon:before {
  -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;
}

.hi-icon-effect-7a .hi-icon:hover:before {
  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  -ms-transform:scale(1);
  transform:scale(1);
  opacity:1;
}

.hi-icon-effect-7b .hi-icon:after {
  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;
}

.hi-icon-effect-7b .hi-icon:hover:after {
  opacity:1;
  -webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  -ms-transform:rotate(0deg);
  transform:rotate(0deg);
}

.hi-icon-effect-7b .hi-icon:before {
  -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;
}

.hi-icon-effect-7b .hi-icon:hover:before {
  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  -ms-transform:scale(1);
  transform:scale(1);
  opacity:1;
}

.hi-icon-effect-8 .hi-icon {
  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;
}

.hi-icon-effect-8 .hi-icon:after {
  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);
}

.hi-icon-effect-8 .hi-icon: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;
}

.hi-icon-effect-8 .hi-icon:hover:after {
  -webkit-animation:sonarEffect 1.3s ease-out 75ms;
  -moz-animation:sonarEffect 1.3s ease-out 75ms;
  animation:sonarEffect 1.3s ease-out 75ms;
}

@keyframes sonarEffect {
  0% {
    opacity:0.3;
  }
  40% {
    opacity:0.5;
    box-shadow:0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
  }
  100% {
    box-shadow:0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
    transform:scale(1.5);
    opacity:0;
  }
}

.hi-icon-effect-9 .hi-icon {
  -webkit-transition:box-shadow 0.2s;
  -moz-transition:box-shadow 0.2s;
  transition:box-shadow 0.2s;
}

.hi-icon-effect-9 .hi-icon:after {
  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;
}

.hi-icon-effect-9a .hi-icon:hover:after {
  -webkit-transform:scale(0.85);
  -moz-transform:scale(0.85);
  -ms-transform:scale(0.85);
  transform:scale(0.85);
  opacity:0.5;
}

.hi-icon-effect-9a .hi-icon:hover {
  box-shadow:0 0 0 10px rgba(255,255,255,1);
  color:#fff;
}

.hi-icon-effect-9b .hi-icon:hover:after {
  -webkit-transform:scale(0.85);
  -moz-transform:scale(0.85);
  -ms-transform:scale(0.85);
  transform:scale(0.85);
}

.hi-icon-effect-9b .hi-icon:hover {
  box-shadow:0 0 0 10px rgba(255,255,255,0.4);
  color:#fff;
}

#set-1 {
  background:#41ab6b;
}

#set-2 {
  background:#eea303;
}

#set-3 {
  background:#f06060;
}

.set-4 {
  position:relative;
  background:#efefef;
}

.set-4:before, .set-4:after {
  z-index:-1;
  position:absolute;
  content:"";
  bottom:10px;
  left:7px;
  width:50%;
  top:80%;
  max-width:300px;
  background:#cccccc;
  -webkit-box-shadow:0 10px 7px #cccccc;
  -moz-box-shadow:0 10px 7px #cccccc;
  box-shadow:0 10px 7px #cccccc;
  -webkit-transform:rotate(-2deg);
  -moz-transform:rotate(-2deg);
  -o-transform:rotate(-2deg);
  -ms-transform:rotate(-2deg);
  transform:rotate(-2deg);
}

.set-4:after {
  -webkit-transform:rotate(3deg);
  -moz-transform:rotate(3deg);
  -o-transform:rotate(3deg);
  -ms-transform:rotate(3deg);
  transform:rotate(3deg);
  right:10px;
  left:auto;
}

#set-5 {
  background:#702fa8;
}

#set-6 {
  background:#64bb5d;
}

#set-7 {
  background:#d54f30;
}

#set-8 {
  background:#3851bc;
}

#set-9 {
  background:#96a94b;
}