@charset "UTF-8";

/**
 * functions: units
 *
 * convert px to em and rem
 *
 *
 * @author Björn Hase
 *
 */

/**
  * to em, wrapper of toRelatives
  *
  * @param  {mixed} $values
  * @param  {mixed} $base
  * @return {rem}
  */

/**
 * to rem, wrapper of toRelatives
 *
 * @param  {mixed} $values
 * @param  {mixed} $base
 * @return {rem}
 */

/**
 * values to relative
 *
 * @param  {mixed} $values
 * @param  {mixed} $unit
 * @param  {mixed} $base
 * @return {number}
 */

/**
 * to relative
 *
 * @param  {mixed} $value
 * @param  {mixed} $base
 * @return {number}
 */

/**
 * strip unit from value
 *
 * @param  {mixed} $value
 * @return {number}
 */

/**
 * function: z-index
 *
 * uses map $crispy__z-index to get value by key 
 *
 * @author Björn Hase
 *
 */

/**
 * fonts
 *
 *
 * @author Björn Hase
 *
 */

/**
 * add font-size in px as fallback and in rem
 *
 *
 * @param {px} $font-size
 *
 */

/**
 * add font-sizes as modifactors
 *
 *
 * @param {map} $font-sizes
 *
 */

/**
 * media-queries
 *
 *
 * @author Björn Hase
 *
 */

/**
 * clearfix to end floating
 *
 *
 *
 */

/**
 * clear default styles from list
 *
 *
 */

/**
 * config
 *
 *
 * @author Björn Hase
 *
 */

/**
 * normalize
 *
 *
 * @author Björn Hase
 *
 */

/**
 * components: button
 *
 *
 * @author Björn Hase
 *
 */

/**
 * component: code
 *
 * <pre class="code">
 *     <code>
 *     //
 *     </code>
 * </pre>
 *
 * @author Björn Hase
 *
 */

/**
 * component: group
 *
 * <nav class="group group--horizontal">
 *     <ul class="group__section">
 *         <li class="group__item"></li>
 *     <ul>
 * </nav>
 *
 * @author Björn Hase
 *
 */

/**
 * component: heading
 *
 * create classes for heading similar to there name,
 * run map for sizes on each heading
 *
 *
 * @author Björn Hase
 *
 */

/**
 * component: hero
 *
 * background-size is as default: cover - Resize the background image to cover the entire container
 * <div class="hero" style="width: value; height: value; background-image: url(path)"></div>
 *
 *
 * @author Björn Hase
 *
 */

/**
 * component: modal
 *
 * <div class="modal">
 *
 * </div>
 *
 * @author Björn Hase
 *
 */

/**
 * component: panel
 *
 * <div class="panel">
 *     <div class="panel__inner">
 *
 *     </div>
 * </div>
 *
 * @author Björn Hase
 *
 */

/**
 * component: table
 *
 * <table class="table table--striped">
 *     <thead>
 *         <tr>
 *             <th>name</th>
 *             <th>age</th>
 *         </tr>
 *     </thead>
 *     <tbody>
 *         <tr>
 *             <td>The Shawshank Redemption</td>
 *             <td>12</td>
 *         </tr>
 *     </tbody>
 * </table>
 *
 * @author Björn Hase
 *
 */

/**
 * component: checkbox
 *
 * <div class="field">
 *     <input id="" type="text" class="field__checkbox" />
 *     <label for="" class="field__label">
 *         <svg class="icon field__checkbox__checked" viewBox="0 0 100 100">
 *             <use src="#"></use>
 *         </svg>
 *         <svg class="icon field__checkbox__checked" viewBox="0 0 100 100">
 *             <use src="#"></use>
 *         </svg>
 *    </label>
 * </div>
 *
 * @author Björn Hase
 *
 */

/**
 * component: label
 *
 * <label class="field">
 *
 * </label>
 *
 * @author Björn Hase
 *
 */

/**
 * component: panel
 *
 * <div class="field">
 *     <div class="field__panel">
 *         <ul>
 *           <li>item 1<li>
 *         </ul>
 *     </div>
 * </div>
 *
 * @author Björn Hase
 *
 */

/**
 * component: text
 *
 * <div class="field">
 *     <label class="field__label">
 *         input
 *         <input type="text" class="field__text" />
 *     </label>
 * </div>
 *
 * @author Björn Hase
 *
 */

/**
 * component: radio
 *
 * <div class="field">
 *     <input id="" type="text" class="field__radio" />
 *     <label for="" class="field__label">
 *         <i class="icon field__radio__checked">
 *
 *         </i>
 *         <i class="icon field__radio__checked">
 *
 *         </i>
 *    </label>
 * </div>
 *
 * @author Björn Hase
 *
 */

/**
 * component: select
 *
 * <div class="field">
 *     <label class="field__label">
 *         <select class="field__select">
 *
 *         </select>
 *    </label>
 * </div>
 *
 * @author Björn Hase
 *
 */

/**
 * component: field
 *
 * <div class="field">
 *     <label class="field__label">
 *         text
 *         <input type="text" class="field__text" />
 *     <label>
 * </div>
 *
 *
 * @author Björn Hase
 *
 */

/**
 * helper: float
 *
 * float & centering
 *
 *
 *
 * @author Björn Hase
 *
 */

/**
 * helper: spacing
 *
 *
 * @author Björn Hase
 *
 */

/**
 * helper: media
 *
 * for img & video
 *
 *
 * @author Björn Hase
 *
 */

/**
 * helper: text
 *
 * align, font-sizes, color, background-color
 *
 *
 * @author Björn Hase
 *
 */

/**
 * helper: visibility
 *
 *
 * @author Björn Hase
 *
 */

/**
 * helper: width
 *
 *
 * @author Björn Hase
 *
 */

html {
  font-size: 100%;
}

body,
html {
  margin: 0;
  height: 100%;
}

html,
legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*,
*::after,
*::before {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

p {
  margin: 0 0 0.0390625em 0;
}

a,
ins,
u {
  -webkit-text-decoration-skip: ink edges;
          text-decoration-skip: ink edges;
}

a {
  color: #f0c209;
}

a:hover {
  color: #ffffff;
}

a:focus {
  outline: none;
}

abbr[title] {
  border-bottom: 1px dotted;
  cursor: help;
  text-decoration: none;
}

mark {
  padding: 0.3125em;
}

blockquote {
  border-left: 1px solid #b3b2af;
  margin-left: 0;
  padding: 0.625em 1.25em;
}

blockquote p:last-child {
  margin-bottom: 0;
}

dl,
ol,
ul {
  padding: 0;
  margin: 0 0 0.0390625em 0.0390625em;
}

ol ol,
ul ul {
  margin-top: 0.01953125em;
}

ol {
  list-style: decimal outside;
}

ul {
  list-style: disc outside;
}

dd,
dt {
  margin: 0;
}

dt {
  font-weight: bold;
}

figure {
  margin: 0 0 0.0390625em;
}

figcaption {
  margin: 0.0390625em 0 0;
}

hr {
  border: 0;
  border-top: 1px solid #b3b2af;
  margin: 0.0390625em 0;
}

body {
  font-family: Arial, Helvetica, Neue Helvetica, sans-serif;
  font-weight: normal;
  line-height: 1.618;
  color: #363636;
  background-color: #ffffff;
  direction: ltr;
  font-size: 16px;
  font-size: 1rem;
}

.button {
  position: relative;
  display: inline-block;
  text-decoration: none;
  vertical-align: middle;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0.625em 1.5625em;
}

.button--wide {
  width: 100%;
}

.button--up,
.button--down {
  position: fixed;
  z-index: 100;
  margin: 1.25em;
  padding: 0.5em 0.8125em;
}

.button--down {
  top: 0;
}

.button--up {
  bottom: 0;
}

.button:hover {
  cursor: pointer;
  text-decoration: none;
}

.button:focus {
  outline: none;
}

.field {
  margin: 0 0 0.0390625em 0;
}

.field__input {
  display: block;
  width: 100%;
  line-height: 1.618;
  padding: 0.375em 0.5em;
  color: #363636;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-size: 16px;
  font-size: 1rem;
}

.group--horizontal .group__item,
.group--horizontal .group__section {
  display: inline-block;
}

.group__section {
  list-style: none;
  margin: 0;
  padding: 0;
}

.group__section li {
  margin: 0;
  padding: 0;
}

.group__section--separate .group__item:after {
  margin: 0 0.0390625em 0;
  content: "/";
}

.group__section--separate .group__item:last-child:after {
  display: none;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: Arial, Helvetica, Neue Helvetica, sans-serif;
  font-weight: bold;
  line-height: 1.618;
  margin: 0 0 0.3125em;
}

h1,
.h1 {
  font-size: 40px;
  font-size: 2.5rem;
}

h2,
.h2 {
  font-size: 36px;
  font-size: 2.25rem;
}

h3,
.h3 {
  font-size: 32px;
  font-size: 2rem;
}

h4,
.h4 {
  font-size: 28px;
  font-size: 1.75rem;
}

h5,
.h5 {
  font-size: 24px;
  font-size: 1.5rem;
}

h6,
.h6 {
  font-size: 20px;
  font-size: 1.25rem;
}

.hero {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero--top {
  background-position: top center;
}

.hero--bottom {
  background-position: bottom center;
}

.hero--contain {
  background-size: contain;
}

.modal {
  position: absolute;
  z-index: 100;
}

.modal--fixed {
  position: fixed;
}

.modal--left {
  left: 0;
}

.modal--top-center {
  left: 50%;
}

.modal--top {
  top: 0;
}

.modal--right {
  right: 0;
}

.modal--bottom {
  bottom: 0;
}

.modal .panel {
  margin: 0.078125em;
}

.panel__inner {
  padding: 0.0390625em;
}

.table {
  width: 100%;
}

.table--striped tr:nth-child(even) {
  background-color: whitesmoke;
}

.table--scroll {
  overflow-x: auto;
}

.table td {
  color: #363636;
}

.table td,
.table th {
  padding: 0.625em 0.5em;
  text-align: left;
  border-bottom: 1px solid #9c9c9c;
}

.table th {
  border-bottom-width: 2px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.float-none {
  float: none;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

.clearfix::before,
.clearfix::after {
  display: table;
  content: ' ';
}

.clearfix::after {
  clear: both;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

.img-rounded {
  border-radius: 50%;
}

.video-responsive {
  display: block;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
  border: 0;
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

.margin-top-1x {
  margin-top: 0em;
}

.margin-left-1x {
  margin-left: 0em;
}

.margin-bottom-1x {
  margin-bottom: 0em;
}

.margin-right-1x {
  margin-right: 0em;
}

.padding-top-1x {
  padding-top: 0em;
}

.padding-left-1x {
  padding-left: 0em;
}

.padding-bottom-1x {
  padding-bottom: 0em;
}

.padding-right-1x {
  padding-right: 0em;
}

.margin-top-2x {
  margin-top: 0.625em;
}

.margin-left-2x {
  margin-left: 0.625em;
}

.margin-bottom-2x {
  margin-bottom: 0.625em;
}

.margin-right-2x {
  margin-right: 0.625em;
}

.padding-top-2x {
  padding-top: 0.625em;
}

.padding-left-2x {
  padding-left: 0.625em;
}

.padding-bottom-2x {
  padding-bottom: 0.625em;
}

.padding-right-2x {
  padding-right: 0.625em;
}

.margin-top-3x {
  margin-top: 1.25em;
}

.margin-left-3x {
  margin-left: 1.25em;
}

.margin-bottom-3x {
  margin-bottom: 1.25em;
}

.margin-right-3x {
  margin-right: 1.25em;
}

.padding-top-3x {
  padding-top: 1.25em;
}

.padding-left-3x {
  padding-left: 1.25em;
}

.padding-bottom-3x {
  padding-bottom: 1.25em;
}

.padding-right-3x {
  padding-right: 1.25em;
}

.margin-top-4x {
  margin-top: 1.875em;
}

.margin-left-4x {
  margin-left: 1.875em;
}

.margin-bottom-4x {
  margin-bottom: 1.875em;
}

.margin-right-4x {
  margin-right: 1.875em;
}

.padding-top-4x {
  padding-top: 1.875em;
}

.padding-left-4x {
  padding-left: 1.875em;
}

.padding-bottom-4x {
  padding-bottom: 1.875em;
}

.padding-right-4x {
  padding-right: 1.875em;
}

.margin-top-5x {
  margin-top: 2.5em;
}

.margin-left-5x {
  margin-left: 2.5em;
}

.margin-bottom-5x {
  margin-bottom: 2.5em;
}

.margin-right-5x {
  margin-right: 2.5em;
}

.padding-top-5x {
  padding-top: 2.5em;
}

.padding-left-5x {
  padding-left: 2.5em;
}

.padding-bottom-5x {
  padding-bottom: 2.5em;
}

.padding-right-5x {
  padding-right: 2.5em;
}

.margin-top-6x {
  margin-top: 3.125em;
}

.margin-left-6x {
  margin-left: 3.125em;
}

.margin-bottom-6x {
  margin-bottom: 3.125em;
}

.margin-right-6x {
  margin-right: 3.125em;
}

.padding-top-6x {
  padding-top: 3.125em;
}

.padding-left-6x {
  padding-left: 3.125em;
}

.padding-bottom-6x {
  padding-bottom: 3.125em;
}

.padding-right-6x {
  padding-right: 3.125em;
}

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

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

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

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

.text-italic {
  font-style: italic;
}

.text-normal {
  font-style: normal;
}

.text-bold {
  font-weight: bold;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-small {
  font-size: 80%;
}

.text-crossed {
  text-decoration: line-through;
}

.text-default {
  font-size: 16px;
  font-size: 1rem;
}

.text-small {
  font-size: 16px;
  font-size: 1rem;
}

.text-large {
  font-size: 20px;
  font-size: 1.25rem;
}

.text-primary {
  color: #f0c209;
}

.text-secondary {
  color: #b3b2af;
}

.text-success {
  color: #5cb85c;
}

.text-warning {
  color: #f0ad4e;
}

.text-danger {
  color: #d9534f;
}

.text-info {
  color: #0090d4;
}

.background-primary {
  background-color: #f0c209;
}

.background-secondary {
  background-color: #b3b2af;
}

.background-success {
  background-color: #5cb85c;
}

.background-warning {
  background-color: #f0ad4e;
}

.background-danger {
  background-color: #d9534f;
}

.background-info {
  background-color: #0090d4;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.show--inline {
  display: inline;
}

.width-25 {
  width: 25%;
}

.width-50 {
  width: 50%;
}

.width-75 {
  width: 75%;
}

.width-100 {
  width: 100%;
}