/*!
 * Utilities v1.0.0 - 26.05.2015 (c) artif GmbH & Co. KG
 */

/*
 * LAYOUT SYSTEM
 *
 * Every area need to be declared as a container. This class defines the all-over width and positioning of the website/area with respect to the viewport.
 * A container may hold an arbitrary number of rows, minimum 1.
 * Inside a row an arbitrary number of columns may be used.
 * The width of each column is defined by additional width-classes (w-xyz) that define the needed dimensions according to the project specifications.
 *
 * Example:
 * <div class="container">
 *   <div class="row">
 *     <div class="col w50p w100p-m">
 *     </div>
 *     <div class="col w50p w100p-m">
 *     </div>
 *   </div>
 * </div>
 *
 * This creates two 50% columns with a gutter which change in to two 100% columns if the associated media query (medium) is triggered.
 *
 * The following definitions determine the basic grid system and are not to be touched.
 * Place your own values for container (i.e. width) and the width-classes in file Styles.css -> See example there.
 */

/* 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 component without rows and cols
 */
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}


/**
 * Flexbox modifiers
 */

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

.f-align-items-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.f-align-content-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;
}

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

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

.f-justify-content-space-around {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

/* 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;
}

/* 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-0-auto {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.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-basis-auto {
  -ms-flex-preferred-size: auto;
  flex-basis: 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;
}

.f-push-left {
  margin-left: auto;
}

.f-push-right {
  margin-right: 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;
}