/**
 * Globals
 */

/**
 * CI colors
 *
 * To update the styleguide please edit colors.json for the color definitions
 * and pattern-scaffolding.css for the class definitions
 */

:root {

  /* blue */

  /* green */

  /* red */

  /* orange */

  /* turquois */

  /* yellow */

  /* velvet */

  /* pink */

  /* grey */
}

/**
 * Element colors
 */

/**
 * Font families
 */

/**
 * Font sizes
 */

/**
 * Sizes
 */

:root { /* -> 1024px / 102.4rem */
}

/**
 * z-Indexes
 */

/**
 * CI colors
 */

:root {

  /* cms-aegean */

  /* cms-cloud */

  /* charcoal */

  /* cms-pearl */

  /* cms-white-smoke */

  /* cms-gray67 */

  /* cms-oslo-grey */

  /* cms-sandstone */

  /* cms-apple */

  /* cms-bubblegum */

  /* cms-crow */
}

/**
 * Font sizes
 */

/**
 * Sizes
 */

/**
 * Font families
 */

/* TODO the following media queries contradict the "mobile first" approach… :-/ */

.CMS-ContentSection h2 {
  font-size: 2.5rem;
}

@media (min-width: 768px) {

  .CMS-ContentSection h2 {
    font-size: 3.5rem;
  }
}

/* make single-column content less wide, to prevent very long, hard to read lines */

.CMS-ContentSection-Content > .frame {
  margin-left: auto;
  margin-right: auto;
  max-width: 68.26667rem;
}

.CMS-ContentSection-Content > .frame.CMS-frame-type-gfcms_basiccarousel, .CMS-ContentSection-Content > .frame.CMS-frame-type-gfcms_multicol2, .CMS-ContentSection-Content > .frame.CMS-frame-type-gfcontent_questioncarousel, .CMS-ContentSection-Content > .frame.CMS-frame-type-gfcms_multicol3 {
  max-width: 100%;
}