@import 'fonts';
@import 'sprite';
@import 'mixins';


$font: 'Gothamx', "Ubuntu", Arial, sans-serif;

// new cloud section
.new-cloud-section {
  font-family: $font;

  *, *:before, *:after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
  }

  // cover
  .nc-cover {
    background: url(../images/bg-new-cloud.jpg) 50% 50%;
    @include cover;
    .container {
      display: table;
      height: 400px;
      padding-top: 20px;
      padding-bottom: 20px;
      position: relative;
      &:after {
        content: '';
        background: url(../images/ixircloud-logo.png) no-repeat;
        width: 317px;
        height: 148px;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -(148px / 2) - 25px;
      }
      .cell {
        display: table-cell;
        vertical-align: middle;
      }
      .caption {
        h3 {
          display: block;
          font-size: 35px;
          font-weight: 100;
          color: #fff;
          line-height: 120%;
          margin-bottom: 25px;
          letter-spacing: -1.2px;
        }
        ul {
          li {
            padding-left: 16px;
            position: relative;
            font-size: 16px;
            color: #fff;
            margin-bottom: 15px;
            line-height: 120%;
            &:last-child {
              margin-bottom: 0;
            }
            &:before {
              content: '';
              width: 4px;
              height: 4px;
              @include radius(50%);
              position: absolute;
              left: 0;
              background-color: #fff;
              top: 6px;
            }
          }
        }
        .btn-more {
          margin-top: 40px;
          display: inline-block;
          vertical-align: top;
          min-width: 200px;
          height: 50px;
          border: 2px solid #04dafe;
          @include radius(3px);
          padding: 0 15px;
          text-align: center;
          font-size: 14px;
          letter-spacing: -0.5px;
          @include cubicTrans;
          line-height: 46px;
          color: #fff;
          &:hover {
            background-color: #04dafe;
            color: #000;
          }
        }
      }
    }
  }

  // nc row
  .nc-row {
    padding: 40px 0 60px;
    background-color: #fff;
    .row--top {
      text-align: center;
      margin-bottom: 70px;
    }
    .row--title {
      display: inline-block;
      vertical-align: top;
      font-size: 45px;
      line-height: 120%;
      font-weight: 300;
      letter-spacing: -1.5px;
      @include textgradient;
    }
    .row--caption {
      display: block;
      font-size: 15px;
      margin-top: 5px;
      line-height: 120%;
      font-weight: 500;
      letter-spacing: -0.4px;
      color: #a4aab1;
    }
  }

  // cloud packages
  .nc-cloud-packages {
    background-color: #e6ecf0;
    position: relative;
    &:before {
      content: '';
      @include sprite(section-bracket, left-center);
      bottom: 100%;
    }
  }

  // cloud packages list
  .nc-packages-list {
    font-size: 0;
    > li {
      @include layout(4, 2%);
      background-color: #fff;
      min-height: 437px;
      @include radius(3px);
      @include shadow(0 15px 35px rgba(#000, .05));
      padding-top: 24px;
      padding-bottom: 17px;
      text-align: center;
      color: #6a707a;
      @include cubicTrans(.8, box-shadow);
      &:hover {
        @include shadow(0 25px 55px rgba(#000, .25));
      }
      .item--type {
        padding-bottom: 20px;
        border-bottom: 1px solid #d2d4d7;
        font-size: 20px;
        font-weight: bold;
        letter-spacing: -0.8px;
        line-height: 120%;
      }
      .item--price {
        padding: 15px 0;
        font-size: 29px;
        font-weight: 300;
        letter-spacing: -0.8px;
        line-height: 120%;
        border-bottom: 1px solid #d2d4d7;
        span {
          display: block;
          color: #989ba2;
          letter-spacing: -0.4px;
          font-size: 15px;
          line-height: 120%;
        }
      }
      .item--prop {
        display: table;
        width: 100%;
        table-layout: fixed;
        border-bottom: 1px solid #d2d4d7;
        li {
          display: table-cell;
          vertical-align: top;
          padding-top: 52px;
          border-right: 1px solid #d2d4d7;
          height: 91px;
          font-size: 11px;
          line-height: 120%;
          position: relative;
          &:before {
            content: '';
            position: absolute;
          }
          &.icon-core:before {
            @include sprite(core, left-center);
            top: 13px;
          }
          &.icon-ram:before {
            @include sprite(ram, left-center);
            top: 19px;
          }
          &.icon-disk:before {
            @include sprite(disk, left-center);
            top: 13px;
          }
          strong {
            display: block;
            font-size: 15px;
            font-weight: 500;
          }
          span {
            display: block;
            margin-top: 4px;
          }
          &:last-child {
            border-right: 0;
          }
        }
      }
      .item--caption {
        min-height: 139px;
        padding: 20px 10px;
        li {
          margin-bottom: 11px;
          font-size: 13px;
          line-height: 120%;
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
      .btn-buy {
        display: inline-block;
        vertical-align: top;
        padding: 2px;
        @include gradient-degree(#05d9fe, #4463e6);
        @include radius(3px);
        span {
          background-color: #fff;
          display: block;
          height: 38px;
          line-height: 38px;
          text-align: center;
          font-size: 13px;
          font-weight: 500;
          letter-spacing: -0.4px;
          color: #6a707a;
          padding: 0 15px;
          min-width: 117px;
          @include cubicTrans;
          @include radius(2px);
        }
        &:hover {
          span {
            background-color: transparent;
            color: #fff;
          }
        }
      }
      &.highlight {
        padding-top: 24px + 21px;
        margin-top: -21px;
        @include gradient-degree(#04dafe, #4561e6, -145);
        color: #fff;
        position: relative;
        &:before {
          content: '';
          @include sprite(crown, left-center);
          top: 22px;
        }
        .item--type {
          border-bottom-color: transparent;
        }
        .item--price {
          background-color: rgba(#000, .1);
          span {
            color: #fff;
          }
        }
        .item--price, .item--prop {
          border-bottom-color: rgba(#fff, .3);
        }
        .item--prop li {
          border-right-color: rgba(#fff, .3);
          &.icon-core:before {
            @include sprite(core-active, left-center);
          }
          &.icon-ram:before {
            @include sprite(ram-active, left-center);
          }
          &.icon-disk:before {
            @include sprite(disk-active, left-center);
          }
        }
        .btn-buy {
          border: 2px solid rgba(#fff, .5);
          padding: 0;
          background: transparent !important;
          @include cubicTrans;
          &:hover {
            border-color: transparent;
            background: #04dafe !important;
          }
          span {
            background-color: transparent;
            color: #fff;
          }
        }
      }
    }
  }

  // cloud prop
  .nc-cloud-prop {
    font-size: 0;
    li {
      @include layout(3, 4.6%);
      position: relative;
      padding-left: 60px;
      font-size: 13px;
      line-height: 18px;
      color: #393e47;
      @include cubicTrans;
      strong {
        display: block;
        font-size: 20px;
        font-weight: 500;
        letter-spacing: -0.6px;
        margin-bottom: 8px;
        line-height: 120%;
        @include cubicTrans;
      }
      span {
        display: block;
        margin-left: 1px;
      }
      &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 5px;
        @include cubicTrans;
      }
      &:hover {
        color: #000;
        &:before {
          @include scale(.92);
        }
        strong {
          color: #3f6de8;
        }
      }
      &.icon-ssd:before { @include sprite(prop-ssd); }
      &.icon-ddos:before { @include sprite(prop-ddos); }
      &.icon-cost:before { @include sprite(prop-cost); }
      &.icon-uptime:before { @include sprite(prop-uptime); }
      &.icon-flexible:before { @include sprite(prop-flexible); }
      &.icon-backup:before { @include sprite(prop-backup); }
      &.icon-install:before { @include sprite(prop-install); }
      &.icon-panel:before { @include sprite(prop-panel); }
      &.icon-technic:before { @include sprite(prop-technic); }
    }
  }

  // text
  .nc-text {
    padding: 60px 0;
    color: #4d626a;
    background-color: #e6ecf0;
    overflow: hidden;
    &.bg-white {
      background-color: #fff;
    }
    .container {
      position: relative;
    }
    h3 {
      display: inline-block;
      vertical-align: top;
      font-size: 31px;
      font-weight: 500;
      line-height: 120%;
      position: relative;
      @include textgradient();
      margin-left: -1px;
      span {
        display: block;
        padding: 0 18px;
        height: 35px;
        line-height: 35px;
        color: #fff;
        letter-spacing: -0.4px;
        font-size: 13px;
        font-weight: 500;
        @include radius(3px 3px 3px 0);
        position: absolute;
        left: 100%;
        margin-left: -56px;
        top: -38px;
        @include gradient-degree(#04d9fe, #4365e7, -145);
        white-space: nowrap;
        &:before {
          content: '';
          border: 5px solid transparent;
          border-top-width: 6px;
          border-bottom-width: 6px;
          border-right-color: #4463e6;
          border-bottom-color: #4463e6;
          position: absolute;
          right: 100%;
          bottom: 0;
        }
      }
    }
    span {
      display: block;
      font-size: 18px;
      line-height: 120%;
      margin-top: 5px;
    }
    ul {
      margin-top: 45px;
      li {
        margin-bottom: 26px;
        font-size: 15px;
        line-height: 120%;
        padding-left: 29px;
        position: relative;
        &:last-child {
          margin-bottom: 0;
        }
        &:before {
          content: '';
          @include sprite(tick);
          position: absolute;
          left: 0;
          top: 4px;
        }
      }
    }
    &.text-right {
      .container {
        padding-left: 508px;
      }
      h3 {
        display: block;
        span {
          left: auto;
          right: 0;
        }
      }
    }
    &.bg-1 {
      .container {
        min-height: 329px;
        &:before {
          content: '';
          background: url(../images/bg-new-cloud-text-1.png);
          width: 336px;
          height: 329px;
          position: absolute;
          right: 0;
          top: 0;
        }
      }
    }
    &.bg-2 {
      .container {
        min-height: 369px;
        &:before {
          content: '';
          background: url(../images/bg-new-cloud-text-2.jpg);
          width: 597px;
          height: 369px;
          position: absolute;
          left: -139px;
          top: 0;
        }
      }
    }
  }

}