.compare-table
  padding: 60px 0 100px
  background-color: #f5f5f5
  h2
    +font-default(32px)
    font-size: 28px
    color: $darkerBlue
    text-align: center
    margin: 0

  .table
    width: $contentGrid*10
    margin: 45px auto 0
    +flex(space-between, flex-start)
    .option, .package
      width: 25%
      padding: 0
    h4
      +font-default(22px)
      font-size: 20px
      color: $darkBlue
      line-height: 65px !important
      height: 65px
      padding: 0 20px
    p
      +font-light(16px, 16px)
      font-size: 14px
      color: $darkerBlue
      height: 32px
      text-align: center
      padding: 0 20px
      +flex(center, flex-start)
      &.two
        height: 64px
        +flex-wrap(wrap)
        +flex-direction(row)
        +flex-flow(row wrap)
        span
          width: 100%
          +font-light(16px, 16px)
          font-size: 14px
          color: $darkerBlue
          &.green
            color: $green
          &.red
            color: $red
      .check
        &:before
          content: ''
          +sprite(-74px -15px, 15px, 11px)
          display: inline-block
          line-height: 11px !important
      &.label
        background-color: $darkBlue
        margin-top: 25px
        +font-bold(16px, 16px)
        font-size: 14px
        height: 40px
        line-height: 40px !important

    .option
      background-color: $gray
      h4
        color: white
      p
        color: white
        text-align: left
        +flex(flex-start, flex-start)
        &.label
          width: 400px
          position: relative
    .package
      &:nth-of-type(2n)
        background-color: white
      &:nth-of-type(2n+1)
        background-color: rgba(255,255,255, 0.5)

+media-query(1400px)
  .compare-table
    .table
      width: $contentGrid*10

+media-query(900px)
  .compare-table
    .table
      width: 100%

+media-query(700px)
  .compare-table
    display: none