.content-width() {
  .container-fixed(0);
  max-width: 90%;

  @media (min-width: @screen-md-min) {
    max-width: @container-md;
  }
  @media (min-width: @screen-lg-min) {
    max-width: @container-lg;
  }
}

.section {
  position: relative;
}

.container {
  position: relative;

  > .row, > .csc-header, > div {
    .content-width();
    position: relative;

    > * {
      .make-xs-column(12);
    }
  }
}

.row {

  .make-row();

  > .row {
    padding-top: 0;
    padding-bottom: 0;
  }

  .col {
    padding-top: .5em;
    padding-bottom: .5em;
  }

  > .col-flex {
    display: flex;
    flex-flow: row wrap;
  }

  &-1 > .col, &-1 > .col-fullwidth {
    .make-xs-column(12);

  }

  &-2 > .col {
    .make-sm-column(6);
  }

  &-2--none-collapsing > .col {
    .make-xs-column(6);
  }

  &-2--asym-left,
  &-2--asym-right {
    > .col-wide {
      .make-sm-column(8)
    }
    > .col-narrow {
      .make-sm-column(4)
    }

  }

  &-3 > .col {
    .make-sm-column(4);
  }

  &-3--asym-left,
  &-3--asym-right {
    > .col-wide {
      .make-sm-column(12);
      .make-md-column(6)
    }
    > .col-narrow {
      .make-sm-column(6);
      .make-md-column(3);
    }

  }

  &-4 > .col {
    .make-sm-column(6);
    .make-md-column(3);
  }

  &-5 > .col {
    .make-xs-column(6);
    .make-sm-column(4);
    .make-md-column(2.4);
  }

  &--narrow {
    @media screen and (min-width: @screen-lg) {
      padding-left: 20%;
      padding-right: 20%;
    }
  }
}

.pull-right {
  .pull-right();
}
