/* Container */
.container {
  margin: 0 auto;
  padding: 0;
}

.container:before,
.container:after {
  content: " ";
  display: table;
}

.container:after {
  clear: both;
}

/**
 * Row component
 *
 * Wraps and clearfix'es the column elements.
 */
.row {
  margin: 0 0 0 -1.5rem;
  padding: 0;
}

.row > .col {
  padding-left: 1.5rem;
}

.row:before,
.row:after {
  content: " ";
  display: table;
}

.row:after {
  clear: both;
}

/* Row without gutter */
.row--flush {
  margin-left: 0;
}

.row--flush > .col {
  padding-left: 0;
}


/*
 * Column
 *
 * The column class creates floated columns. To control/define the width of columns,
 * use custom width classes (.w[number][px, p]) for proper segmenting. Their use
 * is defined and explained in the Styles.css.
 */
.col {
  position: relative;
  min-height: 1em;
  padding: 0;
  float: left;
  width: 100%;
}


/**
 * Flexbox row component
 *
 * Wraps and flex'es the column elements.
 */
.flex-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 0 0 -1.5rem;
  padding: 0;
}

.flex-row > .flex-col {
  padding-left: 1.5rem;
}

/* Row without gutter */
.flex-row--flush {
  margin: 0;
}

.flex-row--flush > .flex-col {
  padding-left: 0;
}


/**
 * Flexbox column
 * The column class creates flexed columns. To control/define the width of columns,
 * use custom flex-basis classes (.f[number][px, p]) for proper segmenting.
 */
.flex-col {
  padding: 0;
}


/**
 * Flexbox modifiers
 */

/* Parent modifiers */
.f-align-items-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.f-justify-items-center {
  justify-items: center;
}

.f-justify-content-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* Direction */
.f-direction-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.f-direction-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.f-direction-column-reverse {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

@media (min-width: 640px) {
  .f-direction-row--s {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .f-direction-row--m {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .f-direction-column--m {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

@media (min-width: 1500px) {
  .f-direction-row--xxl {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

/* Wrap */
.f-wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.f-wrap-reverse {
  -ms-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

.f-nowrap {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

/* Child modifiers */
.f-0 {
  -webkit-box-flex: 0;
  -ms-flex: 0;
  flex: 0;
}

.f-1 {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.f-auto {
  -webkit-box-flex: 1;
  -ms-flex: auto;
  flex: auto;
}

.f-grow-1 {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.f-grow-0 {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
}

.f-shrink-1 {
  -ms-flex-negative: 1;
  flex-shrink: 1;
}

.f-shrink-0 {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.f-basis-auto {
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
}



/*
 * CLEARFIX
 * Source: http://nicolasgallagher.com/micro-clearfix-hack/
 */
.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}



/*
 * MISCELLANEOUS
 */

/**
 * Text alignment
 * These classes are used and defined by the CKEditor. If you want to change them, checkout artif_ckeditor_config.
 */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}


/*
 * List component
 *
 * Used for standard list styles - style the design with your own component,
 * e.g. .main-navigation__item { background: blue; } etc.
 *
 * Example:
 * <nav class="main-navigation">
 *   <ul class="main-navigation__list list">
 *     <li class="main-navigation__item">
 *       <a class="main-navigation__link">Our Work</a>
 *       <ul class="main-navigation__list main-navigation__list--sub list">
 *         <li class="main-navigation__item">
 *           <a class="main-navigation__link">Example</a>
 *         </li>
 *       </ul>
 *     </li>
 *   </ul>
 * </nav>
 *
 * In the end we might have more classes, but less CSS lines as we don't have to bother
 * with long, nested selectors (.nav > li > ul > li > a becomes .main-navigation__list--sub .main-navigation__link).
 * Also, it's more performant. ;)
 */
.list {
  margin: 0;
  padding: 0;
}

.list > li {
  display: inline-block;
}

/* Stacked list */
.list--stacked > li {
  display: block;
}