@import "base/variables.less";
@import "base/mixins.less";

/* ---------------- Categories ------------------ */

.categories {
  margin-bottom: 25px;
}

.categories-item {
  float: left;
  margin-left: 1.92%;
  width: 32.05%;
  text-align: center;
  text-transform: uppercase;
  background-color: #404041;
  color: @light;
  font-weight: 800;
  font-size: 21px;
  display: block;
  height: 90px;
  line-height: 90px;
  text-decoration: none;
  font-family: @second-font;
  position: relative;
  @media @normal {
    font-size: 18px;
  }

  @media @mobile {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-bottom: 20px;
  }

  @media @400 {
    font-size: 16px;
  }

  span + span {

    @media @tablet {
      font-size: 15px;
      max-width: 123px;
      display: inline-block;
      vertical-align: middle;
      line-height: 24px;
    }

  }

  &:hover {
    background-color: @colored;
    color: @light;

    .icon {
      background-color: @light;
      color: @colored;
    }

  }

  &.disabled {
    color: #ccc;
    background-color: #7D7D7E;

    .icon {
      opacity: .8;
    }

    &:hover {
      color: #ccc;
      background-color: #7D7D7E;
      cursor: not-allowed;
    }

  }

  &:nth-child(1) {
    margin-left: 0;

    span + span {
      
      @media @tablet {
        margin-left: 20px;
      }

    }

  }

  &:nth-child(2) {
    
    span + span {
      margin-left: 40px;
    }

    .ico {
      position: relative;
      top: 2px;
    }

  }

  .icon {
    color: @colored;
    background-color: @light;
    width: 49px;
    height: 49px;
    display: inline-block;
    vertical-align: middle;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    line-height: 49px;
    position: absolute;
    left: 25px;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    font-size: 30px;
  }

}

.features {
  margin-bottom: 40px;

  .row {
    .c;
  }

  .features-item-1, .features-item-2 {
    margin-bottom: 20px;
  }

  .features-item-1, .features-item-3 {
    float: left;

    @media @mobile {
      float: none;
    }

  }

  .features-item-2, .features-item-4 {
    float: right;

    @media @mobile {
      float: none;
    }

  }

  .features-item-4 {
    background: url(../images/features-bg.jpg) 0 0 repeat;
    background-size: 278px auto;
  }

  .features-item-3 {
    background: url(../images/features-bg.jpg) 0 -273px repeat;
    background-size: 278px auto;
  }

  .features-item-2 {
    background: url(../images/features-bg.jpg) 0 -556px repeat;
    background-size: 278px auto;
  }

  .features-item-1 {
    background: url(../images/features-bg.jpg) 0 -829px repeat;
    background-size: 278px auto;
  }

}

.features-item {
  .transition-all;

  .fz0;
  text-decoration: none;
  text-align: center;
  display: block;
  width: 49%;
  color: #2d2d2d;

  @media @normal, @tablet {
    min-height: 298px;
    line-height: 298px;
  }

  @media @mobile {
    width: 100%;
    margin-bottom: 20px;
  }
  &-text {
    width: 46%;
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
    padding: 30px 2%;

    @media @500 {
      display: block;
      width: 96%;
    }

    .title {
      text-transform: uppercase;
      color: @dark;
      font-weight: 800;
      font-size: 21px;
      line-height: 30px;
      display: block;
      font-family: @second-font;
    }

    .perex, .perex p {
      font-size: 18px;
      line-height: 22px;
      font-family: @second-font;
      text-align: center;
      display: block;
      margin: 20px 0;
    }
    .smaller, .smaller p {
      font-size: 16px !important;
    }

  }

  &-img {
    width: 50%;
    display: inline-block;
    vertical-align: middle;

    @media @500 {
      display: block;
      width: 100%;
    }

  }

  .icon {
    background-color: @light;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    width: 49px;
    height: 49px;
    line-height: 49px;
    color: @colored;
    display: block;
    margin: 0 auto;
    font-size: 24px;
  }

  &.features-item-4 .icon {
    font-size: 18px;
  }

  &.features-item-1 .ico {
    top: 2px;
    position: relative;
  }

}