.icons {
    height: auto;
    background-color: #284a70;
    padding: 50px 0px;
    background-image: url(/Content/Home/img/banner/bg-2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position:relative;
    z-index:1
}
    .icons:before {
        content: "GroTech";
        position: absolute;
        z-index: 3;
        bottom: 0;
        right: 0;
        font-size: 228px;
        line-height: 170px;
        color: #fff;
        opacity: 0.05;
    }
    .icons:after {
        content: '';
        background-color: #284a70;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 2;
        opacity: 0.93;
        width: 100%;
        height: 100%;
    }

    .icons .block {
        text-align: center;
        padding: 30px 0px;
        color: #fff;
        text-transform: uppercase;
        border: 1px solid #f3a124;
        position: relative;
        margin: 10px 0;
        width: 100%;
        z-index:5;
    }
        .icons .block::after {
            content: '';
            border: 1px solid #f3a124;
            width: 100%;
            position: absolute;
            top: 5px;
            left: 5px;
            height: 100%;
            z-index:6;
        }
.icons .block:hover{
color: #f3a124;
}

.icons .block h3{
font-size: 22px;
font-weight:100;
}

.hovicon {
  display: inline-block;
  font-size: 45px;
  line-height: 90px;
  cursor: pointer;
  margin: 20px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  text-align: center;
  position: relative;
  text-decoration: none;
  z-index: 1;
  color: #f3a124;
}
.hovicon.small {
  font-size: 20px;
  line-height:45px;
  width:45px;
  height:45px;
  margin:7px;
}
.hovicon.mini {
  font-size: 15px;
  line-height:32px;
  width:30px;
  height:30px;
  margin:7px;
}
.hovicon.auto-width {
  width: auto;
  height: auto;
  padding: 15px;
}
.hovicon: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;
}
.hovicon:before {
  speak: none;
  font-size: 48px;
  line-height: 90px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  display: block;
  -webkit-font-smoothing: antialiased;
}
/* Effect 1 */
.hovicon.effect-1 {
  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;
}
.hovicon.effect-1:after {
  top: -7px;
  left: -7px;
  padding: 7px;
  box-shadow: 0 0 0 4px #f3a124;
  -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;
}
/* Effect 1a */
.block:hover .hovicon.effect-1.sub-a {
    background: rgba(255, 255, 255, 1);
    color: #f3a124;
}
.hovicon.effect-1.sub-a:hover i {
  color: #f3a124;
}
.block:hover .hovicon.effect-1.sub-a:after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}