@if not-imported("import_once_func") { @import "../inc/import_once_func"; }
@if not-imported("framework") { @import "../inc/framework"; }

/*--- Config Section --- */
$button-color: $color-text-invert;
$button-border-color: $color-bg-tertiary;
$button-background-color: $color-bg-tertiary;
$button-color-hl: $color-bg-secondary;
$button-border-color-hl: $color-bg-tertiary;
$button-background-color-hl: $color-bg-tertiary;

#hero {
  #logo {
    @include for-tablet {
      top: 0;
      left: 0;
      -webkit-transform: translate(0, 0);
      -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      -o-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }
}
body.-is-lp {
  .button {
    @include button($button-height: 50px, $button-padding-horizontal: 40px);
  }
}

.rs-columns {
  justify-content: center;
}

h1,h2,h3,h4,h5,h6 {
  &.numbered {
    position: relative;
    padding-left: 2em;
    .number {
      font-size: 2.3em;
      line-height: 1;
      position: absolute;
      left: 0;
      top: 0;
      color: #fff;
    }
  }
}

@include for-tablet {
  .-rotate-cw-90-tablet {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .-expand-tablet {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}

@include for-mobile {
  .-rotate-cw-90-mobile {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .-expand-mobile {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }

  .jBox-wrapper {

  }
}

.hero-wrapper {

  .-arrow& {
    .hero-text {
      align-self: flex-end;
      margin-bottom: 5%;
    }

    @include for-tablet {
      .hero-text {
        font-size: font-size(40px);
      }
    }

    @include for-mobile {
      .hero-text {
        font-size: font-size(25px);
      }
    }
  }
}

.spc_default {
  margin-bottom: 5rem;
}

table.pricing {
  table-layout: auto;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.5em;
  font-size: font-size(15px);

  tr {

    &.heading {
      td, th {
        font-family: $font-family-alternate;
        font-weight: 400;
        font-size: font-size(25px);
        padding-top: 0.25em;
        padding-bottom: 0.25em;
        color: $color-bg-secondary;
        &:first-child {
          padding-left: 0;
        }
        &:last-child {
          padding-right: 0;
        }
      }
      &:not(:first-child) {
        td, th {
          padding-top: 0.75em;
        }
      }
    }

    &:not(.heading) {
      background-color: $color-bg-lightergrey;
      td {
        @include transition(all 0.25s);
        position: relative;
        z-index: 0;
        &:first-child {
          &:before, &:after {
            @include transition(all 0.25s);
            opacity: 0;
            visibility: hidden;
            position: absolute;
            top: 0;
            bottom: 0;
            content: '';
            background: #d9e2e5;
            z-index: -1;
          }
          &:before {
            left: 0;
            right: 19px;
          }
          &:after {
            position: absolute;
            right: 0;
            width: 20px;
            top: 0;
            bottom: 0;
            content: '';
            background: url('data:image/svg+xml; charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%22100%22%20fill%3D%22#{str-replace(#d9e2e5,'#','%23')}%22%20viewBox%3D%220%200%2010%20100%22%20preserveAspectRatio%3D%22none%22%20%3E%3Cpath%20d%3D%22M0%2C0%20L0%2C100%20L10%2C50z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat 0 50%;
            background-size: 10px 100%;
          }
        }
      }

      &:hover {
        td {
          //background-color: #d9e2e5;
          &:first-child {
            //color: $color-text-invert;
            &:before, &:after {
              opacity: 1;
              visibility: visible;
            }
          }
        }
      }
    }
  }

  td,th {
    line-height: 1.3;
    padding: 1em 1em;
  }

  th {
    font-weight: 500;
  }

  td {
    /*@include transition(all 0.25s);
    background-color: $color-bg-lightergrey;*/

    &:last-child {
      font-weight: 500;
      text-align: right;
      white-space: nowrap;
      width: 1px;
    }
  }
}