@@ -1072,3 +1072,13 @@ p.info {

   letter-spacing: 0.05em;

   color: $color-bg-secondary;

 }

+

+.color-default {

+  color: $color-text;

+}

+.color-platin {

+  color: $color-bg-secondary;

+}

+.color-brown {

+  color: $color-bg-primary;

+}

@@ -835,8 +835,33 @@ $shadow-color: #fff;

   position: relative;

   height: 100%;

-  &:not(.-full-vh) {

+  /*&:not(.-full-vh) {

     @include aspect-ratio(1920, 500, true);

+  }*/

+

+  &.-small > .hero-background {

+    min-height: 250px;

+  }

+  @media screen and (max-width: 599px) {

+    &.-small > .hero-background {

+      min-height: 150px;

+    }

+  }

+  &.-medium > .hero-background {

+    min-height: 450px;

+  }

+  @media screen and (max-width: 599px) {

+    &.-medium > .hero-background {

+      min-height: 300px;

+    }

+  }

+  &.-large > .hero-background {

+    min-height: 750px;

+  }

+  @media screen and (max-width: 599px) {

+    &.-large > .hero-background {

+      min-height: 450px;

+    }

   }

   &.-alt-color {

@@ -847,6 +872,34 @@ $shadow-color: #fff;

     background-size: cover;

     background-repeat: no-repeat;

     background-position: 50% 50%;

+    height: 100%;

+

+    :not(.-full-vh):not(.-small):not(.-medium):not(.-large)&:not([class*='ratio-']) {

+      position: absolute;

+      left: 0;

+      right: 0;

+      top: 0;

+      bottom: 0;

+    }

+

+    &.ratio-169 {

+      @include aspect-ratio(16,9,true);

+    }

+    &.ratio-1610 {

+      @include aspect-ratio(16,10,true);

+    }

+    &.ratio-219 {

+      @include aspect-ratio(21,9,true);

+    }

+    &.ratio-83 {

+      @include aspect-ratio(8,3,true);

+    }

+    &.ratio-43 {

+      @include aspect-ratio(4,3,true);

+    }

+    &.ratio-32 {

+      @include aspect-ratio(3,2,true);

+    }

     /*&:not(.video_container) {

       position: absolute;

@@ -875,15 +928,15 @@ $shadow-color: #fff;

   }

   .hero-content {

-    height: 100%;

-    position: absolute;

-    left: 0;

-    top: 0;

-    bottom: 0;

-    right: 0;

-    display: flex;

-    align-items: center;

-    justify-content: center;

+      height: 100%;

+      position: absolute;

+      left: 0;

+      top: 0;

+      bottom: 0;

+      right: 0;

+      display: flex;

+      align-items: center;

+      justify-content: center;

   }

   .hero-text {

@@ -899,6 +952,15 @@ $shadow-color: #fff;

     font-weight: 700;

     text-transform: uppercase;

     color: $color-text-invert;

+

+    .-fs-medium& {

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

+

+    }

+    .-fs-small& {

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

+

+    }

   }

   .-arrow& svg.arrow {

@@ -42,7 +42,7 @@ p {

 }

 h1,h2,h3,h4,h5,h6 {

   @include headline();

-  margin: 0 0 0.5em;

+  margin: 0 0 1.25em;

   line-height: 1.15;

   em,i {

@@ -62,10 +62,18 @@ h1, h2 {

 }

 h3 {

-  font-size: font-size(38px);

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

+  letter-spacing: 0.125em;

+  text-transform: uppercase;

+}

+

+h4 {

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

+  letter-spacing: 0.125em;

+  text-transform: uppercase;

 }

-h4,h5 {

+h5 {

   color: $color-text;

   font-weight: 400;

   font-size: font-size(32px);

deleted file mode 100644

@@ -1,209 +0,0 @@

-@if not-imported("import_once_func") { @import "../inc/import_once_func"; }

-@if not-imported("framework") { @import "../inc/framework"; }

-

-/*--- Config Section --- */

-$button-color: $color-text-invert;

-$button-border-color: $color-bg-tertiary;

-$button-background-color: $color-bg-tertiary;

-$button-color-hl: $color-bg-secondary;

-$button-border-color-hl: $color-bg-tertiary;

-$button-background-color-hl: $color-bg-tertiary;

-

-#hero {

-  #logo {

-    @include for-tablet {

-      top: 0;

-      left: 0;

-      -webkit-transform: translate(0, 0);

-      -moz-transform: translate(0, 0);

-      -ms-transform: translate(0, 0);

-      -o-transform: translate(0, 0);

-      transform: translate(0, 0);

-    }

-  }

-}

-body.-is-lp {

-  .button {

-    @include button($button-height: 50px, $button-padding-horizontal: 40px);

-  }

-}

-

-.rs-columns {

-  justify-content: center;

-}

-

-h1,h2,h3,h4,h5,h6 {

-  &.numbered {

-    position: relative;

-    padding-left: 2em;

-    .number {

-      font-size: 2.3em;

-      line-height: 1;

-      position: absolute;

-      left: 0;

-      top: 0;

-      color: #fff;

-    }

-  }

-}

-

-@include for-tablet {

-  .-rotate-cw-90-tablet {

-    -webkit-transform: rotate(90deg);

-    -moz-transform: rotate(90deg);

-    -ms-transform: rotate(90deg);

-    -o-transform: rotate(90deg);

-    transform: rotate(90deg);

-  }

-  .-expand-tablet {

-    flex-basis: 100% !important;

-    max-width: 100% !important;

-  }

-}

-

-@include for-mobile {

-  .-rotate-cw-90-mobile {

-    -webkit-transform: rotate(90deg);

-    -moz-transform: rotate(90deg);

-    -ms-transform: rotate(90deg);

-    -o-transform: rotate(90deg);

-    transform: rotate(90deg);

-  }

-  .-expand-mobile {

-    flex-basis: 100% !important;

-    max-width: 100% !important;

-  }

-

-  .jBox-wrapper {

-

-  }

-}

-

-.hero-wrapper {

-

-  .-arrow& {

-    .hero-text {

-      align-self: flex-end;

-      margin-bottom: 5%;

-    }

-

-    @include for-tablet {

-      .hero-text {

-        font-size: font-size(40px);

-      }

-    }

-

-    @include for-mobile {

-      .hero-text {

-        font-size: font-size(25px);

-      }

-    }

-  }

-}

-

-.spc_default {

-  margin-bottom: 5rem;

-}

-

-table.pricing {

-  table-layout: auto;

-  width: 100%;

-  border-collapse: separate;

-  border-spacing: 0 0.5em;

-  font-size: font-size(15px);

-

-  tr {

-

-    &.heading {

-      td, th {

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

-        font-weight: 400;

-        font-size: font-size(25px);

-        padding-top: 0.25em;

-        padding-bottom: 0.25em;

-        color: $color-bg-secondary;

-        &:first-child {

-          padding-left: 0;

-        }

-        &:last-child {

-          padding-right: 0;

-        }

-      }

-      &:not(:first-child) {

-        td, th {

-          padding-top: 0.75em;

-        }

-      }

-    }

-

-    &:not(.heading) {

-      background-color: $color-bg-lightergrey;

-      td {

-        @include transition(all 0.25s);

-        position: relative;

-        z-index: 0;

-        &:first-child {

-          &:before, &:after {

-            @include transition(all 0.25s);

-            opacity: 0;

-            visibility: hidden;

-            position: absolute;

-            top: 0;

-            bottom: 0;

-            content: '';

-            background: #d9e2e5;

-            z-index: -1;

-          }

-          &:before {

-            left: 0;

-            right: 19px;

-          }

-          &:after {

-            position: absolute;

-            right: 0;

-            width: 20px;

-            top: 0;

-            bottom: 0;

-            content: '';

-            background: url('data:image/svg+xml; charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%22100%22%20fill%3D%22#{str-replace(#d9e2e5,'#','%23')}%22%20viewBox%3D%220%200%2010%20100%22%20preserveAspectRatio%3D%22none%22%20%3E%3Cpath%20d%3D%22M0%2C0%20L0%2C100%20L10%2C50z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat 0 50%;

-            background-size: 10px 100%;

-          }

-        }

-      }

-

-      &:hover {

-        td {

-          //background-color: #d9e2e5;

-          &:first-child {

-            //color: $color-text-invert;

-            &:before, &:after {

-              opacity: 1;

-              visibility: visible;

-            }

-          }

-        }

-      }

-    }

-  }

-

-  td,th {

-    line-height: 1.3;

-    padding: 1em 1em;

-  }

-

-  th {

-    font-weight: 500;

-  }

-

-  td {

-    /*@include transition(all 0.25s);

-    background-color: $color-bg-lightergrey;*/

-

-    &:last-child {

-      font-weight: 500;

-      text-align: right;

-      white-space: nowrap;

-      width: 1px;

-    }

-  }

-}

\ No newline at end of file

deleted file mode 100644

@@ -1,98 +0,0 @@

-@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;

-    }

-  }

-}

-

-$gutter-width: floor((1 / 1200) * 1000000) / 1000000 * 60;

-

-.rs-columns {

-  display: flex;

-  align-items: flex-start;

-  flex-wrap: wrap;

-  margin-left: -#{$gutter-width * 100%};

-  margin-top: -#{$gutter-width * 100%};

-

-  &.-valign-center {

-    align-items: center;

-  }

-  &.-valign-bottom {

-    align-items: flex-end;

-  }

-  &.-valign-stretch {

-    align-items: stretch;

-  }

-}

-

-.rs-column {

-  flex: 0;

-  max-width: 100%;

-  min-width: 0;

-  margin-top: $gutter-width * 100%;

-  margin-left: $gutter-width * 100%;

-  order: 6;

-

-  /*> * + * {

-    margin-top: 30px;

-  }*/

-

-  @include column-classes($gutter-width, 6, large);

-

-  &.-valign-center {

-    align-self: center;

-  }

-  &.-valign-bottom {

-    align-self: flex-end;

-  }

-  &.-valign-stretch {

-    align-self: stretch;

-  }

-}

-

-// Tablet portrait format (viewport width 900px and below)

-@media screen and (max-width: 900px) {

-  $gutter-width: floor((1 / 900) * 1000000) / 1000000 * 60;

-

-  .rs-columns {

-    margin-left: -#{$gutter-width * 100%};

-    margin-top: -#{$gutter-width * 100%};

-  }

-

-  .rs-column {

-    margin-top: $gutter-width * 100%;

-    margin-left: $gutter-width * 100%;

-    order: 6;

-

-    @include column-classes($gutter-width, 6, medium);

-  }

-}

-

-// Mobile (viewport width 599px and below)

-@media screen and (max-width: 599px) {

-  $gutter-width: floor((1 / 599) * 1000000) / 1000000 * 60;

-

-  .rs-columns {

-    margin-left: -#{$gutter-width * 100%};

-    margin-top: -#{$gutter-width * 100%};

-  }

-

-  .rs-column {

-    margin-top: $gutter-width * 100%;

-    margin-left: $gutter-width * 100%;

-    order: 6;

-

-    @include column-classes($gutter-width, 6, small);

-  }

-}

deleted file mode 100644

@@ -1,5 +0,0 @@

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

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

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

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

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

deleted file mode 100644

@@ -1,88 +0,0 @@

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

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

-

-@function font-size($size,$ascendant-font-size: $font-size-default) {

-  @return $size / $ascendant-font-size * 1rem

-}

-

-@function str-replace($string, $search, $replace: '') {

-  $index: str-index($string, $search);

-

-  @if $index {

-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);

-  }

-

-  @return $string;

-}

-

-@function repeat($character, $n){

-  $c:"";

-  @if $n > 0 {

-    @for $i from 1 through $n {

-      $c: $c + $character;

-    }

-  }

-  @return $c;

-}

-

-/// Convert angle

-/// @author Chris Eppstein

-/// @param {Number} $value - Value to convert

-/// @param {String} $unit - Unit to convert to

-/// @return {Number} Converted angle

-@function convert-angle($value, $unit) {

-  $convertable-units: deg grad turn rad;

-  $conversion-factors: 1 (10grad/9deg) (1turn/360deg) (3.1415926rad/180deg);

-  @if index($convertable-units, unit($value)) and index($convertable-units, $unit) {

-    @return $value

-             / nth($conversion-factors, index($convertable-units, unit($value)))

-             * nth($conversion-factors, index($convertable-units, $unit));

-  }

-

-  @warn "Cannot convert `#{unit($value)}` to `#{$unit}`.";

-}

-

-/// Test if `$value` is an angle

-/// @param {*} $value - Value to test

-/// @return {Bool}

-@function is-direction($value) {

-  $is-direction: index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value);

-  $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));

-

-  @return $is-direction or $is-angle;

-}

-

-/// Convert a direction to legacy syntax

-/// @param {Keyword | Angle} $value - Value to convert

-/// @require {function} is-direction

-/// @require {function} convert-angle

-@function legacy-direction($value) {

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

-    @warn "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be an angle or a direction";

-  }

-

-  $conversion-map: (

-    to top          : bottom,

-    to top right    : bottom left,

-    to right top    : left bottom,

-    to right        : left,

-    to bottom right : top left,

-    to right bottom : left top,

-    to bottom       : top,

-    to bottom left  : top right,

-    to left bottom  : right top,

-    to left         : right,

-    to left top     : right bottom,

-    to top left     : bottom right

-  );

-

-  @if map-has-key($conversion-map, $value) {

-    @return map-get($conversion-map, $value);

-  }

-

-  @return 90deg - convert-angle($value, 'deg');

-}

-

-@function col($columns, $container-columns) {

-  @return $columns / $container-columns * 100%;

-}

deleted file mode 100644

@@ -1,15 +0,0 @@

-/* If this function is imported, you can import scss files using:

-

-   @if not-imported("your-file") { @import "your-file"; }

-*/

-$imported-once-files: () !default;

-

-@function not-imported($name) {

-  $imported-once-files: $imported-once-files !global;

-  $module_index: index($imported-once-files, $name);

-  @if (($module_index == null) or ($module_index == false)) {

-    $imported-once-files: append($imported-once-files, $name) !global;

-    @return true;

-  }

-  @return false;

-}

\ No newline at end of file

deleted file mode 100644

@@ -1,89 +0,0 @@

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

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

-

-/**

- * Flexible images (videos see #4896)

- *

- * @see http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

- */

-img {

-  max-width:100%;

-  height:auto;

-}

-.ie7 img {

-  -ms-interpolation-mode:bicubic;

-}

-.ie8 img {

-  width:auto; /* see #5789 */

-}

-

-/**

- * Hide invisible elements

- */

-.invisible {

-  border:0;

-  clip:rect(0 0 0 0);

-  height:1px;

-  margin:-1px;

-  overflow:hidden;

-  padding:0;

-  position:absolute;

-  width:1px;

-}

-

-/**

- * Margins, Paddings, Alignment, Text transforms and decorations

- */

-.tt_u {

-  text-transform: uppercase;

-  letter-spacing: 0.1em;

-}

-

-.td_u {

-  border-bottom: 1px $color-text solid;

-}

-

-.ta_left {

-  text-align: left;

-}

-

-.ta_right {

-  text-align: right;

-}

-

-.ta_center {

-  text-align: center;

-}

-.fl_left {

-  float: left;

-}

-.fl_right {

-  float: right;

-}

-

-.fw_light {

-  font-weight: 300;

-}

-.fw_normal {

-  font-weight: 400;

-}

-.fw_semi-bold {

-  font-weight: 600;

-}

-.fw_bold {

-  font-weight: 700;

-}

-

-/* --- CE SPACING --- */

-.spc_default {

-  margin-bottom: 3rem;

-}

-.spc_paragraph {

-  margin-bottom: 1.5rem;

-}

-.spc_boxed {

-  margin-bottom: 20px;

-}

-.pad_default {

-  padding: $gutter-default 0;

-}

\ No newline at end of file

deleted file mode 100644

@@ -1,501 +0,0 @@

-@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};';