@@ -5,7 +5,7 @@

 /**

  * Layout

  */

-@mixin centered($max-width: $breakpoint-desktop, $resp-padding: 15px) {

+@mixin centered($max-width: $breakpoint-desktop, $resp-padding: 25px) {

   max-width: $max-width;

   margin: 0 auto;

   position: relative;

@@ -197,6 +197,13 @@

   font-family: $font-family-alternate-sc;

 }

+@mixin font-alt {

+  font-weight: 700;

+  text-transform: uppercase;

+  letter-spacing: 0.125em;

+  font-family: $font-family-alternate;

+}

+

 @mixin iconfont {

   display: inline-block;

   font-family: $font-family-icon !important;

@@ -353,11 +360,12 @@

 @mixin button($color: $button-color, $border-color: $button-border-color, $background-color: $button-background-color, $font-size: $font-size-button, $color-hover: $button-color-hl, $border-color-hover: $button-border-color-hl, $background-color-hover: $button-background-color-hl, $button-height: $button-height, $button-padding-vertical: $button-padding-vertical, $button-padding-horizontal: $button-padding-horizontal) {

   $button-padding: $button-padding-vertical $button-padding-horizontal;

   position: relative;

-  font-family: $font-family-form;

+  letter-spacing: 0.125em;

+  font-family: $font-family-alternate;

+  font-weight: 700;

   background: $background-color;

   color: $color;

   font-size: $font-size;

-  font-weight: 400;

   display: inline-block;

   padding: $button-padding;

   height: $button-height;

@@ -391,6 +399,12 @@

   }

 }

+@mixin button-big ($color: $button-color, $border-color: $button-border-color, $background-color: $button-background-color, $font-size: $font-size-button, $color-hover: $button-color-hl, $border-color-hover: $button-border-color-hl, $background-color-hover: $button-background-color-hl, $button-height: $button-height, $button-padding-vertical: $button-padding-vertical, $button-padding-horizontal: $button-padding-horizontal) {

+  @include button($color, $border-color, $background-color, $font-size, $color-hover, $border-color-hover, $background-color-hover, $button-height, $button-padding-vertical, $button-padding-horizontal);

+  height: 45px;

+  line-height: #{45px - (2*$button-border-width) - (2*$button-padding-vertical)};

+}

+

 @mixin button-text {

   @include button($color: $color-text, $color-hover: $color-text, $background-color-hover: none);

   background: none;

@@ -506,4 +520,16 @@

     max-height: $size;

     border: $stroke-width $color-stroke-grey solid;

   }

-}

\ No newline at end of file

+}

+

+

+@mixin font-size($size,$ascendant-font-size: $font-size-default, $mm: 0.7, $tm: 0.8) {

+  $fz: $size / $ascendant-font-size * 1rem;

+  font-size: $fz;

+  @include for-tablet {

+    font-size: $fz * $tm;

+  }

+  @include for-mobile {

+    font-size: $fz * $mm;

+  }

+}

@@ -179,8 +179,9 @@

 /**

  * Object Fit

  */

-@mixin object-fit($mode: cover) {

+@mixin object-fit($mode: cover, $position: 50% 50%) {

   object-fit: $mode;

+  object-position: $position;

   font-family: 'object-fit: #{$mode};';

   display: block;

   width: 100%;

@@ -251,7 +251,7 @@

 /**

  * Text-Styling

  */

-@mixin headline($font-size: 100%, $font-weight: 400, $color: $color-headline, $font-family: $font-family) {

+@mixin headline($font-size: 100%, $font-weight: 700, $color: $color-headline, $font-family: $font-family) {

   font-family: $font-family-alternate;

   color: $color;

   font-weight: $font-weight;

new file mode 100644

@@ -0,0 +1,508 @@

+@if not-imported("import_once_func") { @import "import_once_func"; }

+@if not-imported("settings") { @import "settings"; }

+@if not-imported("functions") { @import "functions"; }

+

+/**

+ * Layout

+ */

+@mixin centered($max-width: $breakpoint-desktop, $resp-padding: 15px) {

+  max-width: $max-width;

+  margin: 0 auto;

+  position: relative;

+

+  @media screen and (max-width: $max-width + 2 * $resp-padding) {

+    -webkit-box-sizing: border-box;

+    -moz-box-sizing: border-box;

+    box-sizing: border-box;

+    padding-left: $resp-padding;

+    padding-right: $resp-padding;

+  }

+}

+@mixin centered-1200 {

+ @include centered();

+}

+

+/**

+ * Responsive

+ */

+@mixin for-max-size($size) {

+  @media screen and (max-width: $size) { @content; }

+}

+@mixin for-min-size($size) {

+  @media screen and (min-width: $size) { @content; }

+}

+@mixin for-tablet {

+  @include for-max-size($breakpoint-tablet) { @content; }

+}

+@mixin for-mobile {

+  @include for-max-size($breakpoint-mobile) { @content; }

+}

+@mixin for-tablet-up {

+  @include for-min-size($breakpoint-mobile+1) { @content; }

+}

+@mixin for-desktop-up {

+  @include for-min-size($breakpoint-tablet+1) { @content; }

+}

+

+/**

+ * Shorthand

+ */

+@mixin transform($transform...) {

+  -webkit-transform: $transform;

+  -moz-transform: $transform;

+  -ms-transform: $transform;

+  -o-transform: $transform;

+  transform: $transform;

+}

+

+@mixin transition($transition...) {

+  -webkit-transition: $transition;

+  -moz-transition: $transition;

+  -ms-transition: $transition;

+  -o-transition: $transition;

+  transition: $transition;

+}

+

+@mixin box-sizing($boxval) {

+  -webkit-box-sizing: $boxval;

+  -moz-box-sizing: $boxval;

+  box-sizing: $boxval;

+}

+

+@mixin box-shadow($shadow...) {

+  -webkit-box-shadow: $shadow;

+  -moz-box-shadow: $shadow;

+  box-shadow: $shadow;

+}

+

+@mixin border-radius($radius) {

+  -webkit-border-radius: $radius;

+  -moz-border-radius: $radius;

+  border-radius: $radius;

+}

+

+@mixin filter($filter) {

+  -webkit-filter: $filter;

+  -ms-filter: $filter;

+  filter: $filter;

+}

+

+@mixin placeholder {

+  &::-webkit-placeholder {

+    @content;

+  }

+  &:-moz-placeholder {

+    @content;

+  }

+  &::-moz-placeholder {

+    @content;

+  }

+  &:-ms-input-placeholder {

+    @content;

+  }

+  &::-ms-input-placeholder {

+    @content;

+  }

+  &:-ms-placeholder {

+    @content;

+  }

+  &:-o-placeholder {

+    @content;

+  }

+  &::placeholder {

+    @content;

+  }

+}

+

+@mixin aspect-ratio($width, $height, $float: false) {

+  position: relative;

+  @if $float {

+    overflow: hidden;

+    &:before {

+      display: table;

+      content: "";

+      padding-top: ($height / $width) * 100%;

+      float: left;

+    }

+  } @else {

+    &:before {

+      display: block;

+      content: "";

+      width: 100%;

+      padding-top: ($height / $width) * 100%;

+    }

+    > * {

+      position: absolute;

+      top: 0;

+      left: 0;

+      right: 0;

+      bottom: 0;

+    }

+  }

+}

+

+/// Mixin printing a linear-gradient

+/// as well as a plain color fallback

+/// and the `-webkit-` prefixed declaration

+/// @access public

+/// @param {String | List | Angle} $direction - Linear gradient direction

+/// @param {Arglist} $color-stops - List of color-stops composing the gradient

+@mixin linear-gradient($direction, $color-stops...) {

+  @if is-direction($direction) == false {

+    $color-stops: ($direction, $color-stops);

+    $direction: 180deg;

+  }

+

+  background: nth(nth($color-stops, 1), 1);

+  background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);

+  background: linear-gradient($direction, $color-stops);

+}

+

+@mixin column-classes($gutter-width, $max-columns, $class-name) {

+  @for $cols from 1 through $max-columns {

+    @for $span from 1 through $cols {

+      &.-#{unquote($class-name)}-col-#{$cols}-#{$span} {

+        flex-basis: 100% / $cols * $span - ($gutter-width * 100%);

+        max-width: 100% / $cols * $span - ($gutter-width * 100%);

+        order: 6;

+      }

+    }

+  }

+

+  @for $cols from 1 through $max-columns {

+    &.-#{unquote($class-name)}-order-#{$cols} {

+      order: $cols;

+    }

+  }

+}

+

+/**

+ * Object Fit

+ */

+@mixin object-fit($mode: cover) {

+  object-fit: $mode;

+  font-family: 'object-fit: #{$mode};';

+  display: block;

+  width: 100%;

+  height: 100%;

+}

+

+/**

+ * Fonts

+ */

+@mixin small-caps {

+  font-weight: 400;

+  text-transform: lowercase;

+  font-family: $font-family-alternate-sc;

+}

+

+@mixin iconfont {

+  display: inline-block;

+  font-family: $font-family-icon !important;

+  speak: none;

+  font-style: normal;

+  font-weight: normal;

+  font-variant: normal;

+  text-transform: none;

+  line-height: 1;

+  -webkit-font-smoothing: antialiased;

+  -moz-osx-font-smoothing: grayscale;

+  vertical-align: -0.1em;

+}

+

+@mixin icon($content: "", $font-size: 100%, $line-height: 1) {

+  @include iconfont;

+  font-size: $font-size;

+  line-height: $line-height;

+  @if $content != "" {

+    content: $content;

+  }

+  -webkit-font-smoothing: antialiased;

+  font-smoothing: antialiased;

+  text-rendering: geometricPrecision;

+  text-indent: 0;

+  display: inline-block;

+  position: relative;

+}

+

+/**

+ * Clearfix

+ */

+@mixin cf {

+  &:before,

+  &:after {

+    content: " "; /* 1 */

+    display: table; /* 2 */

+  }

+

+  &:after {

+    clear: both;

+  }

+

+  /**

+   * For IE 6/7 only

+   * Include this rule to trigger hasLayout and contain floats.

+   */

+  & {

+    *zoom: 1;

+  }

+}

+

+/**

+ * Text-Styling

+ */

+@mixin headline($font-size: 100%, $font-weight: 400, $color: $color-headline, $font-family: $font-family) {

+  font-family: $font-family-alternate;

+  color: $color;

+  font-weight: $font-weight;

+  font-size: $font-size;

+}

+

+@mixin text-overflow-ellipsis {

+  white-space: nowrap;

+  overflow: hidden;

+  text-overflow: ellipsis;

+}

+

+/**

+ * Boxes

+ */

+

+@mixin box {

+  &:not(.rs-columns) {

+    background-color: $color-bg-primary;

+    padding: 20px 35px;

+    @include box-sizing(border-box);

+

+    .-has-buttons&,

+    &.-has-button {

+      position: relative;

+      padding-bottom: 65px;

+    }

+

+    .cta-button:last-child {

+      position: absolute;

+      bottom: 20px;

+      left: 35px;

+      right: 35px;

+    }

+  }

+

+  &.rs-columns {

+    margin-left: -10px;

+    margin-top: 0;

+    > * {

+      flex-shrink: 1;

+      flex-grow: 1;

+      background-color: $color-bg-primary;

+      margin-left: 10px;

+      margin-top: 20px;

+      padding: 20px 35px;

+      @include box-sizing(border-box);

+      position: relative;

+

+      .-has-buttons&,

+      &.-has-button {

+        padding-bottom: 65px;

+      }

+

+      .cta-button:last-child {

+        position: absolute;

+        bottom: 20px;

+        left: 35px;

+        right: 35px;

+      }

+    }

+  }

+}

+@mixin box-black{

+  @include box;

+  &:not(.rs-columns) {

+    background-color: $color-bg-secondary;

+    color: $color-text-invert;

+  }

+

+  &.rs-columns {

+    > * {

+      background-color: $color-bg-secondary;

+      color: $color-text-invert;

+    }

+  }

+}

+@mixin box-white{

+  @include box;

+  border: 1px $color-stroke-grey solid;

+}

+@mixin box-yellow {

+  @include box;

+  background-color: $color-bg-primary;

+  border: 1px $color-stroke-light solid;

+  padding: 10px;

+}

+@mixin box-grey {

+  @include box;

+  background-color: $color-bg-footer;

+  padding: 10px;

+}

+

+/**

+ * Buttons

+ */

+

+@mixin button($color: $button-color, $border-color: $button-border-color, $background-color: $button-background-color, $font-size: $font-size-button, $color-hover: $button-color-hl, $border-color-hover: $button-border-color-hl, $background-color-hover: $button-background-color-hl, $button-height: $button-height, $button-padding-vertical: $button-padding-vertical, $button-padding-horizontal: $button-padding-horizontal) {

+  $button-padding: $button-padding-vertical $button-padding-horizontal;

+  position: relative;

+  font-family: $font-family-form;

+  background: $background-color;

+  color: $color;

+  font-size: $font-size;

+  font-weight: 400;

+  display: inline-block;

+  padding: $button-padding;

+  height: $button-height;

+  line-height: #{$button-height - (2*$button-border-width) - (2*$button-padding-vertical)};

+  white-space: nowrap;

+  -webkit-box-sizing: border-box;

+  -moz-box-sizing: border-box;

+  box-sizing: border-box;

+  border: $button-border-width $border-color solid;

+  cursor: pointer;

+  text-align: center;

+  -webkit-transition: all 0.2s ease-in;

+  -moz-transition: all 0.2s ease-in;

+  -ms-transition: all 0.2s ease-in;

+  -o-transition: all 0.2s ease-in;

+  transition: all 0.2s ease-in;

+  text-transform: uppercase;

+

+  &[data-icon]:not([data-icon=""]) {

+    &:after {

+      @include icon(attr(data-icon),font-size(20px),inherit);

+      vertical-align: bottom;

+      margin-left: 1ex;

+    }

+  }

+

+  &:hover {

+    color: $color-hover;

+    border-color: $border-color-hover;

+    background: $background-color-hover;

+  }

+}

+

+@mixin button-text {

+  @include button($color: $color-text, $color-hover: $color-text, $background-color-hover: none);

+  background: none;

+  border: none;

+  height: auto;

+  padding: 0;

+  margin-right: auto;

+  color: $color-text;

+  text-transform: uppercase;

+  font-size: font-size(14px);

+  font-weight: 600;

+  letter-spacing: 0.1em;

+}

+

+@mixin button-icon-only($color: $button-color, $border-color: $button-border-color, $background-color: $button-background-color, $font-size: $font-size-default, $color-hover: $color, $border-color-hover: $border-color, $border-background-hover: mix($background-color,#000,70%)) {

+  @include button($color,$border-color,$background-color,$font-size,$color-hover,$border-color-hover,$border-background-hover);

+  min-width: $button-height;

+  text-indent: -9999px;

+  overflow: hidden;

+  font-size: 100%;

+

+  &:after {

+    text-indent: 0;

+    float: left;

+    margin: 0;

+    width: #{$button-height - (2*$button-padding-horizontal) - (2*$button-border-width)};

+  }

+}

+

+@mixin button-no-icon {

+  &:after {

+    display: none;

+  }

+}

+

+@mixin button-block {

+  display: block;

+  width: 100%;

+  -webkit-box-sizing: border-box;

+  -moz-box-sizing: border-box;

+  box-sizing: border-box;

+}

+

+@mixin button-outline($color: $button-o-color, $border-color: $button-o-border-color, $font-size: $font-size-default, $color-hover: $button-o-color-hl, $border-color-hover: $button-o-border-color-hl, $border-background-hover: $button-o-background-color-hl) {

+  @include button($color,$border-color,transparent,$font-size,$color-hover,$border-color-hover,$border-background-hover);

+}

+

+/**

+ * Avatar + Profiles

+ */

+@mixin avatar($size: 50px, $stroke-width: 3px) {

+  position: relative;

+  width: $size+2*$stroke-width;

+  height: $size+2*$stroke-width;

+  margin-right: 1em;

+  margin-bottom: 0.5em;

+  display: inline-block;

+  vertical-align: middle;

+  &:before {

+    position: absolute;

+    left: 0;

+    right: 0;

+    content: "";

+    display: inline-block;

+    width: $size;

+    height: $size;

+    border-radius: $size;

+    vertical-align: middle;

+    /*-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);

+    -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);

+    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);*/

+  }

+  &[data-letters]:before {

+    content: attr(data-letters);

+    font-size: font-size($size*0.4);

+    font-weight: 400;

+    line-height: $size;

+    text-align: center;

+    color: white;

+    background: $color-bg-tertiary;

+    border: $stroke-width $color-stroke-grey solid;

+  }

+  &[data-staff] {

+    margin-right: #{$size*0.56-(($size+2*$stroke-width)*0.14*2)};

+    &:after {

+      @include icon("\ec66",font-size($size*0.14),4em);

+      position: absolute;

+      left: 100%;

+      bottom: -0.5em;

+      margin-left: -#{($size+2*$stroke-width)*0.14*2};

+      padding: 0;

+      width: 4em;

+      height: 4em;

+      -webkit-border-radius: 4em;

+      -moz-border-radius: 4em;

+      border-radius: 4em;

+      color: $color-bg-tertiary;

+      background-color: $color-bg-secondary;

+      border: $size*0.02 $color-stroke-grey solid;

+      text-align: center;

+      vertical-align: middle;

+      -webkit-box-sizing: border-box;

+      -moz-box-sizing: border-box;

+      box-sizing: border-box;

+    }

+  }

+  > * {

+    position: relative;

+    -webkit-border-radius: $size;

+    -moz-border-radius: $size;

+    border-radius: $size;

+    max-width: $size;

+    max-height: $size;

+    border: $stroke-width $color-stroke-grey solid;

+  }

+}

\ No newline at end of file