.icon_box {
  position: relative;
  &.style_1 {
    .icon {
      color: $stm_base_color;
      margin: 0 0 8px;
      vertical-align: bottom;
    }
    h5 {
      font: {
        family: "Montserrat", sans-serif;
        weight: 700;
      }
    }
    &.icon_left, &.icon_left_transparent {
      .icon {
        float: left;
        margin: 0;
        text-align: center;
      }
      .icon_text {
        overflow: hidden;
      }
      h5 {
        padding-top: 0;
        font-size: 18px;
        color: $stm_base_color;
        &:after {
          display: block;
          width: 47px;
          margin-top: 14px;
          height: 5px;
          @include border-radius(0px);
        }
        &.no_stripe{
          margin-bottom: 18px;
          &:after{
            display: none;
          }
        }
      }
      p {
        font-size: 13px;
        line-height: 18px;
      }
      &.middle{
        .icon{
          float: none;
          display: inline-block;
          vertical-align: middle;
        }
        .icon_text{
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    &.icon_left_transparent{
      .icon{
        display: inline-block;
        vertical-align: middle;
        float: none;
        i{
          width: auto;
          height: auto;
          line-height: 1;
          background: none;
          color: $stm_secondary_color;
          text-align: left;
        }
      }
      h5{
        display: inline-block;
        vertical-align: middle;
      }
    }
    .icon {
      i {
        display: block;
        vertical-align: middle;
        width: 50px;
        height: 50px;
        line-height: 50px;
        background: $stm_base_color;
        text-align: center;
        color: #fff;
        @include border-radius(50%);
      }
      &:after {
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
      }
    }
    &.hexagon{
      &.hexanog_animation{
        position: relative;
        padding: 37px 20px;
        &:hover{
          background: #fff;
          .icon {
            padding: 20px 0;
            &:before{
              height: 15px;
            }
            &:after{
              height: 15px;
            }
          }
        }
        h5{
          margin-bottom: 11px;
        }
        .icon_text{
          p:last-child{
            margin: 0;
          }
        }
        .icon {
          @include transition();
          i{
            position: relative;
          }
          &:before{
            content: '';
            display: block;
            position: absolute;
            left: 29px;
            top: -3px;
            width: 6px;
            background: $stm_third_color;
            height: 0;
            @include transition();
          }
          &:after{
            content: '';
            display: block;
            position: absolute;
            left: 29px;
            bottom: -3px;
            width: 6px;
            background: $stm_third_color;
            height: 0;
            @include transition();
          }
        }
      }
      .icon {
        position: relative;
        i {
          background: none;
          color: $stm_base_color;
          width: 64px;
          height: 55px;
          line-height: 55px;
          &:after{
            content: "\e91c";
            @include theme_icons();
            position: absolute;
            left: 0;
            top: 0;
            font-size: 55px;
          }
        }
      }
    }
    h4, h5 {
      margin-bottom: 20px;
    }
    h4 {
      &:before {
        display: none;
      }
      &:after {
        content: '';
        display: block;
        width: 46px;
        height: 5px;
        background: #aaaaaa;
        margin: 17px 0 0;
      }
    }
    &.icon_top_transparent {
      text-align: left;
      .icon {
        display: inline-block;
        height: 62px;
        margin-bottom: 20px;
        i {
          height: auto;
          width: auto;
          font-size: 62px;
          line-height: normal;
          color: $stm_secondary_color;
          background: transparent;
        }
      }
      .icon_text {
        h4 {
          padding-top: 0;
          line-height: 18px;
          font-size: 14px;

          &.no_stripe {
            &:after {
              content: none;
            }
          }
        }
      }
    }
  }
}

.icon_box {
  &.style_2 {
    .icon {
      display: table-cell;
      vertical-align: middle;
    }
    h5 {
      display: table-cell;
      vertical-align: middle;
      margin-bottom: 0;
      padding: 0;

      &:after {
        content: none;
      }
    }

    &.alignment_center {
      text-align: center;

      .icon_box_inner {
        display: inline-block;
        text-align: left;
      }
    }
    &.alignment_right {
      text-align: right;

      .icon_box_inner {
        display: inline-block;
        text-align: left;
      }
    }
  }
}