/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
* ANTHRACITE
*/
/**
* NIGHTBLUE
*/
/**
* PETROL
*/
/**
* YELLOW
*/
/**
* MK-YELLOW
*/
/**
* GREY
*/
/**
* RED
*/
/**
* LILAC / VIOLET
*/
/**
* KEYBOARD ACCESSIBILITY
*/
/**

  Thinking Mobile-First!

  Write your "standard" CSS-code for the smallest resolution (width 320px). Its valid for all resolutions.
  If you need a variant for a higher resolution use the from-width() mixin. The variant is valid for the size specified in the parameter - and above!
  If you need an other variant for a more higher resolution use the from-width() mixin again.

  from-width($size) - allowed values for $size: $s, $m, $l, $xl


  EXAMPLE FOR USE:
  ================

  .foo {
    color: chocolate;               <-- valid for all resolutions
    font-size: 12px;                <-- valid up to 767px;
    margin-bottom: 10px;            <-- valid up to 1279px;

    @include from-width($m) {
      font-size: 14px;              <-- valid from 768px up to 1279px
    }

    @include from-width($xl) {
      font-size: 16px;              <-- valid from 1280px and above
      margin-bottom: 20px;          <-- valid from 1280px and above
    }
  }

 */
/**

  Use follow mixins to use the grid in your components:
  1.  grid-root-container([$rows]);
  2.  grid-sub-container($cols [, $rows]);
  3.  grid-item($start, $end [, $isInSubContainer]);
  3a. grid-item-ie-sideedge-desktop($start, $end);
  4.  grid-item-rows($start [, $end]);


  DETAILS:
  ========

  1. grid-root-container([$rows]);
  Creates a grid with 12 main-columns and 11 gap-columns for distances between these main-columns. For mobile resolutions its 6 main-columns and 5 gap-columns.
  In addition there are two columns on the left and right for the distance to the edge of the page.

  parameters:
    $rows - number (optional, default: 1)



  2. grid-sub-container($cols [, $rows]);
  Creates a grid with <$cols> main-columns and <$cols - 1> gap-columns for distances between these main-columns.
  Different to grid-root-container() there are no additional columns for distances to the edge of the page.

  parameters:
    $cols - number
    $rows - number (optional, default: 1)



  3. grid-item($start, $end [, $isInSubContainer])
  Positions the item in the columns.
  If you want to use 'sideedgeLeft' or 'sideedgeRight' in a resolution bigger than $m, call 'grid-item-ie-sideedge-desktop' additionally for IE-support!

  parameters:
    $start - first column for this item. allowed values are numbers and sideedgeLeft.
    $end - last column for this item. allowed values are numbers and sideedgeRight.
    $isInSubContainer - true, if it an item in a sub-container (optional, default: false)



  3a. grid-item-ie-sideedge-desktop($start, $end)
  Workaround for legacy grid-API. No longer necessary when IE-support expires.
  Use it additional to 'grid-item', if you want to use 'sideedgeLeft' or 'sideedgeRight' in a resolution bigger than $m.
  Use it always in a $m (or higher) media-query:

  @include from-with($m) {
    @include grid-item-ie-sideedge-desktop(sideedgeLeft, sideedgeRight);
  }

  parameters:
    $start - first column for this item. allowed values are numbers and sideedgeLeft.
    $end - last column for this item. allowed values are numbers and sideedgeRight.



  4. grid-item-rows($start [, $end]);
  Positions the item in the rows.

  parameters:
    $start - number
    $end - number (optional, default: value from $start)



  EXAMPLE FOR USE:
  ================
  <component-root>
    <div class="grid-container">
      <div class="grid-item1">...</div>
      <div class="grid-item2">...</div>
      <div class="grid-item3 grid-sub-container">
        <div class="grid-sub-item1">...</div>
        <div class="grid-sub-item2">...</div>
      </div>
    </div>
  </component-root>

  .grid-container {
    @include grid-root-container(2);
  }

  .grid-item1 {
    @include grid-item(sideedgeLeft, sideedgeRight);
    @include grid-item-rows(1);
    @include from-width($m) {
      @include grid-item-ie-sideedge-desktop(sideedgeLeft, sideedgeRight);
    }
  }

  .grid-item2 {
    @include grid-item(1, 4);
    @include grid-item-rows(2);
  }

  .grid-item3 {
    @include grid-item(5, 12);
    @include grid-item-rows(2);
  }

  .grid-sub-container {
    @include grid-sub-container(8);
  }

  .grid-sub-item1 {
    @include grid-item(1, 2, true);
    @include grid-item-rows(1);
  }

  .grid-sub-item2 {
    @include grid-item(3, 8, true);
    @include grid-item-rows(1);
  }

 */
/**

  Mixins for public use:

  - fontHeadline() // without own size, e.g. for quotation marks in quote component
  - fontHeadline1()
  - fontHeadline2()
  - fontHeadline3()
  - fontHeadline4()
  - fontHeadline5()
  - fontHeadline6()

  - fontTextL()
  - fontTextM()
  - fontTextS()
  - fontTextXS()
  - fontForm()
  - fontLabel()

  - fontStrong() // without own size, e.g. a strong word in a text
  - fontStrongL()
  - fontStrongM()
  - fontStrongS()
  - fontStrongXS()
  - fontStrongForm()
  - fontStrongLabel()

 */
/**

  Thinking Mobile-First!

  Write your "standard" CSS-code for the smallest resolution (width 320px). Its valid for all resolutions.
  If you need a variant for a higher resolution use the from-width() mixin. The variant is valid for the size specified in the parameter - and above!
  If you need an other variant for a more higher resolution use the from-width() mixin again.

  from-width($size) - allowed values for $size: $s, $m, $l, $xl


  EXAMPLE FOR USE:
  ================

  .foo {
    color: chocolate;               <-- valid for all resolutions
    font-size: 12px;                <-- valid up to 767px;
    margin-bottom: 10px;            <-- valid up to 1279px;

    @include from-width($m) {
      font-size: 14px;              <-- valid from 768px up to 1279px
    }

    @include from-width($xl) {
      font-size: 16px;              <-- valid from 1280px and above
      margin-bottom: 20px;          <-- valid from 1280px and above
    }
  }

 */
/**
* ANTHRACITE
*/
/**
* NIGHTBLUE
*/
/**
* PETROL
*/
/**
* YELLOW
*/
/**
* MK-YELLOW
*/
/**
* GREY
*/
/**
* RED
*/
/**
* LILAC / VIOLET
*/
/**
* KEYBOARD ACCESSIBILITY
*/
.component-margin {
  display: block;
  margin-bottom: 35px;
}
@media only screen and (min-width: 768px) {
  .component-margin {
    margin-bottom: 50px;
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.9);
  }
  70% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.9);
  }
}
@keyframes shrink {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.9);
  }
}
@keyframes grow {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
@font-face {
  font-family: "SoletoTK";
  src: url("/assets/fonts/SoletoTK_W_Lt.woff") format("woff");
  font-weight: 400;
}
@font-face {
  font-family: "SoletoTK";
  src: url("/assets/fonts/SoletoTK_W_Md.woff") format("woff");
  font-weight: 700;
}
@font-face {
  font-family: "SoletoTKHeadline";
  src: url("/assets/fonts/SoletoTKHeadline_W_Lt.woff") format("woff");
  font-weight: 400;
}
html {
  font-family: SoletoTK, sans-serif;
  box-sizing: border-box;
}

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

body {
  margin: 0;
  overflow-y: scroll;
}

textarea,
select,
input {
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
}

ul.square {
  list-style-type: square;
  margin-left: 1em;
}

.truncate-ellipses {
  text-decoration: underline;
  cursor: pointer;
}

.grid-root-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: [sideedge-left] 6vw repeat(5, [col-start] 1fr [col-end] 0.76336vw) [col-start] 1fr [col-end] 6vw [sideedge-right];
  grid-template-rows: repeat(1, auto);
}
@media only screen and (min-width: 768px) {
  .grid-root-container {
    grid-template-columns: [sideedge-left] 40px repeat(11, [col-start] 1fr [col-end] 0.76336vw) [col-start] 1fr [col-end] 40px [sideedge-right];
  }
}

.standard-grid-item {
  -ms-grid-column: 2;
  -ms-grid-column-span: 11;
  width: 100%;
  grid-column: col-start 1/col-end 6;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/span 1;
}
@media only screen and (min-width: 768px) {
  .standard-grid-item {
    -ms-grid-column: 2;
    -ms-grid-column-span: 23;
    width: 100%;
    grid-column: col-start 1/col-end 12;
  }
}
@media only screen and (min-width: 1024px) {
  .standard-grid-item {
    -ms-grid-column: 4;
    -ms-grid-column-span: 13;
    width: 100%;
    grid-column: col-start 2/col-end 8;
  }
}

.has-keyboard-focus:focus {
  outline: 2px solid #009ee3;
}

button {
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}

body {
  background-color: #f5f2ef;
}

a {
  color: #454542;
  cursor: pointer;
  text-decoration: underline;
}

/*# sourceMappingURL=styles.css.map*/