/* ------------------------------------------------------------------- 
 * ## fonts 
 * ------------------------------------------------------------------- */
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

 :root {
   --font-1: "Inter", sans-serif;
   /* monospace
      */
   --font-mono: Consolas, "Andale Mono", Courier, "Courier New", monospace;
 }
 
 /* ------------------------------------------------------------------- 
   * ## colors
   * ------------------------------------------------------------------- */
 :root {
   /* color-1(#034E4A)
       * color-2(#A33B20)
       */
   --color-1: hsl(39, 96%, 60%);
   --color-2: hsla(12, 67%, 38%, 1);
 
   /* theme color variations
       */
   --color-1-lighter: hsla(177, 93%, 36%, 1);
   --color-1-light: hsla(177, 93%, 26%, 1);
   --color-1-dark: hsla(177, 93%, 10%, 1);
   --color-1-darker: hsla(177, 93%, 5%, 1);
   --color-2-lighter: hsla(12, 67%, 58%, 1);
   --color-2-light: hsla(12, 67%, 48%, 1);
   --color-2-dark: hsla(12, 67%, 28%, 1);
   --color-2-darker: hsla(12, 67%, 18%, 1);
 
   /* feedback colors
       * color-error(#ffd1d2), color-success(#c8e675), 
       * color-info(#d7ecfb), color-notice(#fff099)
       */
   --color-error: hsla(359, 100%, 91%, 1);
   --color-success: hsla(76, 69%, 68%, 1);
   --color-info: hsla(205, 82%, 91%, 1);
   --color-notice: hsla(51, 100%, 80%, 1);
   --color-error-content: hsla(359, 50%, 50%, 1);
   --color-success-content: hsla(76, 29%, 28%, 1);
   --color-info-content: hsla(205, 32%, 31%, 1);
   --color-notice-content: hsla(51, 30%, 30%, 1);
 
   /* shades 
       * generated using 
       * Tint & Shade Generator 
       * (https://maketintsandshades.com/)
       */
   --color-black: #000000;
   --color-gray-19: #020202;
   --color-gray-18: #040404;
   --color-gray-17: #060607;
   --color-gray-16: #080809;
   --color-gray-15: #0a0b0b;
   --color-gray-14: #0c0d0d;
   --color-gray-13: #0e0f0f;
   --color-gray-12: #101112;
   --color-gray-11: #121314;
   --color-gray-10: #141516;
   --color-gray-9: #2c2c2d;
   --color-gray-8: #434445;
   --color-gray-7: #5b5b5c;
   --color-gray-6: #727373;
   --color-gray-5: #8a8a8b;
   --color-gray-4: #a1a1a2;
   --color-gray-3: #b9b9b9;
   --color-gray-2: #d0d0d0;
   --color-gray-1: #e8e8e8;
   --color-white: #ffffff;
 
   /* text
       */
   --color-text: var(--color-gray-12);
   --color-text-dark: var(--color-black);
   --color-text-light: var(--color-gray-8);
   --color-placeholder: var(--color-gray-7);
 
   /* buttons
       */
   --color-btn: var(--color-gray-1);
   --color-btn-text: var(--color-black);
   --color-btn-hover: var(--color-gray-2);
   --color-btn-hover-text: var(--color-black);
   --color-btn-primary: var(--color-1);
   --color-btn-primary-text: var(--color-white);
   --color-btn-primary-hover: var(--color-black);
   --color-btn-primary-hover-text: var(--color-white);
   --color-btn-stroke: var(--color-black);
   --color-btn-stroke-text: var(--color-black);
   --color-btn-stroke-hover: var(--color-black);
   --color-btn-stroke-hover-text: var(--color-white);
 
   /* preloader
       */
   --color-preloader-bg: var(--color-gray-12);
   --color-loader: white;
   --color-loader-light: rgba(255, 255, 255, 0.1);
 
   /* others
       */
   --color-body: var(--color-white);
   --color-border: rgba(0, 0, 0, 0.08);
   --border-radius: 3px;
 }
 
 /* ------------------------------------------------------------------- 
   * ## spacing and typescale
   * ------------------------------------------------------------------- */
 :root {
   /* spacing
       * base font size: 18px 
       * vertical space unit : 32px
       */
   --base-size: 62.5%;
   --multiplier: 1;
   --base-font-size: calc(1.8rem * var(--multiplier));
   --space: calc(3.2rem * var(--multiplier));
 
   /* vertical spacing 
       */
   --vspace-0_125: calc(0.125 * var(--space));
   --vspace-0_25: calc(0.25 * var(--space));
   --vspace-0_375: calc(0.375 * var(--space));
   --vspace-0_5: calc(0.5 * var(--space));
   --vspace-0_625: calc(0.625 * var(--space));
   --vspace-0_75: calc(0.75 * var(--space));
   --vspace-0_875: calc(0.875 * var(--space));
   --vspace-1: calc(var(--space));
   --vspace-1_25: calc(1.25 * var(--space));
   --vspace-1_5: calc(1.5 * var(--space));
   --vspace-1_75: calc(1.75 * var(--space));
   --vspace-2: calc(2 * var(--space));
   --vspace-2_5: calc(2.5 * var(--space));
   --vspace-3: calc(3 * var(--space));
   --vspace-3_5: calc(3.5 * var(--space));
   --vspace-4: calc(4 * var(--space));
   --vspace-4_5: calc(4.5 * var(--space));
   --vspace-5: calc(5 * var(--space));
 
   /* type scale
       * ratio 1         :2 | base: 18px
       * -------------------------------------------------------
       *
       * --text-display-3 = (77.40px)
       * --text-display-2 = (64.50px)
       * --text-display-1 = (53.75px)
       * --text-xxxl      = (44.79px)
       * --text-xxl       = (37.32px)
       * --text-xl        = (31.10px)
       * --text-lg        = (25.92px)
       * --text-md        = (21.60px)
       * --text-size      = (18.00px) BASE
       * --text-sm        = (15.00px)
       * --text-xs        = (12.50px)
       *
       * ---------------------------------------------------------
       */
   --text-scale-ratio: 1.2;
   --text-size: var(--base-font-size);
   --text-xs: calc(
     (var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio)
   );
   --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
   --text-md: calc(
     var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio)
   );
   --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
   --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
   --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
   --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
   --text-display-1: calc(var(--text-xxxl) * var(--text-scale-ratio));
   --text-display-2: calc(var(--text-display-1) * var(--text-scale-ratio));
   --text-display-3: calc(var(--text-display-2) * var(--text-scale-ratio));
 
   /* default button height
       */
   --vspace-btn: var(--vspace-2);
 }
 
 /* on mobile devices below 600px, change the value of '--multiplier' 
   * to adjust the values of base font size and vertical space unit.
   */
 @media screen and (max-width: 600px) {
   :root {
     --multiplier: 0.9375;
   }
 }
 
 /* ------------------------------------------------------------------- 
   * ## grid variables
   * ------------------------------------------------------------------- */
 :root {
   /* widths for rows and containers
       */
   --width-full: 100%;
   --width-max: 1200px;
   --width-wide: 1400px;
   --width-wider: 1600px;
   --width-widest: 1800px;
   --width-narrow: 1000px;
   --width-narrower: 800px;
   --width-grid-max: var(--width-max);
 
   /* gutter
       */
   --gutter: 2.4rem;
 }
 
 /* on medium screen devices
   */
 @media screen and (max-width: 1200px) {
   :root {
     --gutter: 2rem;
   }
 }
 
 /* on mobile devices
   */
 @media screen and (max-width: 600px) {
   :root {
     --gutter: 1rem;
   }
 }
 
 /* ====================================================================
   * # NORMALIZE
   *
   *
   * --------------------------------------------------------------------
   * normalize.css v8.0.1 | MIT License |
   * github.com/necolas/normalize.css
   * -------------------------------------------------------------------- */
 html {
   line-height: 1.15;
   -webkit-text-size-adjust: 100%;
 }
 
 body {
   margin: 0;
 }
 
 main {
   display: block;
 }
 
 h1 {
   font-size: 2em;
   margin: 0.67em 0;
 }
 
 hr {
   box-sizing: content-box;
   height: 0;
   overflow: visible;
 }
 
 pre {
   font-family: monospace, monospace;
   font-size: 1em;
 }
 
 a {
   background-color: transparent;
 }
 
 abbr[title] {
   border-bottom: none;
   text-decoration: underline;
   text-decoration: underline dotted;
 }
 
 b,
 strong {
   font-weight: bolder;
 }
 
 code,
 kbd,
 samp {
   font-family: monospace, monospace;
   font-size: 1em;
 }
 
 small {
   font-size: 80%;
 }
 
 sub,
 sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
 }
 
 sub {
   bottom: -0.25em;
 }
 
 sup {
   top: -0.5em;
 }
 
 img {
   border-style: none;
 }
 
 button,
 input,
 optgroup,
 select,
 textarea {
   font-family: inherit;
   font-size: 100%;
   line-height: 1.15;
   margin: 0;
 }
 
 button,
 input {
   overflow: visible;
 }
 
 button,
 select {
   text-transform: none;
 }
 
 button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
   -webkit-appearance: button;
 }
 
 button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
 [type="submit"]::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
 button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
 fieldset {
   padding: 0.35em 0.75em 0.625em;
 }
 
 legend {
   box-sizing: border-box;
   color: inherit;
   display: table;
   max-width: 100%;
   padding: 0;
   white-space: normal;
 }
 
 progress {
   vertical-align: baseline;
 }
 
 textarea {
   overflow: auto;
 }
 
 [type="checkbox"],
 [type="radio"] {
   box-sizing: border-box;
   padding: 0;
 }
 
 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {
   height: auto;
 }
 
 [type="search"] {
   -webkit-appearance: textfield;
   outline-offset: -2px;
 }
 
 [type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
 ::-webkit-file-upload-button {
   -webkit-appearance: button;
   font: inherit;
 }
 
 details {
   display: block;
 }
 
 summary {
   display: list-item;
 }
 
 template {
   display: none;
 }
 
 [hidden] {
   display: none;
 }
 
 /* ===================================================================
   * # BASE SETUP
   *
   *
   * ------------------------------------------------------------------- */
 html {
   font-size: var(--base-size);
   box-sizing: border-box;
 }
 
 *,
 *::before,
 *::after {
   box-sizing: inherit;
 }
 
 html,
 body {
   height: 100%;
 }
 
 body {
   background-color: var(--color-body);
   -webkit-overflow-scrolling: touch;
   -webkit-text-size-adjust: 100%;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 p {
   font-size: inherit;
   text-rendering: optimizeLegibility;
 }
 
 a {
   text-decoration: none;
 }
 
 svg,
 img,
 video {
   max-width: 100%;
   height: auto;
 }
 
 pre {
   overflow: auto;
 }
 
 div,
 dl,
 dt,
 dd,
 ul,
 ol,
 li,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 pre,
 form,
 p,
 blockquote,
 th,
 td {
   margin: 0;
   padding: 0;
 }
 
 input[type="email"],
 input[type="number"],
 input[type="search"],
 input[type="text"],
 input[type="tel"],
 input[type="url"],
 input[type="password"],
 textarea {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
 /* ===================================================================
   * # GRID v4.0.0
   *
   *
   *   -----------------------------------------------------------------
   * - Grid breakpoints are based on MAXIMUM WIDTH media queries, 
   *   meaning they apply to that one breakpoint and ALL THOSE BELOW IT.
   * - Grid columns without a specified width will automatically layout 
   *   as equal width columns.
   *
   * - BLOCK GRID columns(columns inside BLOCK GRID containers) are 
   *   equally-sized columns define at parent/row level. 
   *   A BLOCK GRID container's class attribute value begins with "block-".
   *
   * ------------------------------------------------------------------- */
 
 /* row 
   */
 .row {
   width: 92%;
   max-width: var(--width-grid-max);
   margin: 0 auto;
   display: flex;
   flex-flow: row wrap;
 }
 
 .row .row {
   width: auto;
   max-width: none;
   margin-left: calc(var(--gutter) * -1);
   margin-right: calc(var(--gutter) * -1);
 }
 
 /* column
   */
 .column {
   display: block;
   flex: 1 1 0%;
   padding: 0 var(--gutter);
 }
 
 .collapse > .column,
 .column.collapse {
   padding: 0;
 }
 
 /* row utility classes
   */
 .row.row-wrap {
   flex-wrap: wrap;
 }
 
 .row.row-nowrap {
   flex-wrap: nowrap;
 }
 
 .row.row-y-top {
   align-items: flex-start;
 }
 
 .row.row-y-bottom {
   align-items: flex-end;
 }
 
 .row.row-y-center {
   align-items: center;
 }
 
 .row.row-stretch {
   align-items: stretch;
 }
 
 .row.row-baseline {
   align-items: baseline;
 }
 
 .row.row-x-left {
   justify-content: flex-start;
 }
 
 .row.row-x-right {
   justify-content: flex-end;
 }
 
 .row.row-x-center {
   justify-content: center;
 }
 
 /* --------------------------------------------------------------------
   * ## large screen devices 
   * -------------------------------------------------------------------- */
 .lg-1 {
   flex: none;
   width: 8.33333%;
 }
 
 .lg-2 {
   flex: none;
   width: 16.66667%;
 }
 
 .lg-3 {
   flex: none;
   width: 25%;
 }
 
 .lg-4 {
   flex: none;
   width: 33.33333%;
 }
 
 .lg-5 {
   flex: none;
   width: 41.66667%;
 }
 
 .lg-6 {
   flex: none;
   width: 50%;
 }
 
 .lg-7 {
   flex: none;
   width: 58.33333%;
 }
 
 .lg-8 {
   flex: none;
   width: 66.66667%;
 }
 
 .lg-9 {
   flex: none;
   width: 75%;
 }
 
 .lg-10 {
   flex: none;
   width: 83.33333%;
 }
 
 .lg-11 {
   flex: none;
   width: 91.66667%;
 }
 
 .lg-12 {
   flex: none;
   width: 100%;
 }
 
 .block-lg-one-eight > .column {
   flex: none;
   width: 12.5%;
 }
 
 .block-lg-one-sixth > .column {
   flex: none;
   width: 16.66667%;
 }
 
 .block-lg-one-fifth > .column {
   flex: none;
   width: 20%;
 }
 
 .block-lg-one-fourth > .column {
   flex: none;
   width: 25%;
 }
 
 .block-lg-one-third > .column {
   flex: none;
   width: 33.33333%;
 }
 
 .block-lg-one-half > .column {
   flex: none;
   width: 50%;
 }
 
 .block-lg-whole > .column {
   flex: none;
   width: 100%;
 }
 
 /* --------------------------------------------------------------------
   * ## medium screen devices 
   * -------------------------------------------------------------------- */
 @media screen and (max-width: 1200px) {
   .md-1 {
     flex: none;
     width: 8.33333%;
   }
 
   .md-2 {
     flex: none;
     width: 16.66667%;
   }
 
   .md-3 {
     flex: none;
     width: 25%;
   }
 
   .md-4 {
     flex: none;
     width: 33.33333%;
   }
 
   .md-5 {
     flex: none;
     width: 41.66667%;
   }
 
   .md-6 {
     flex: none;
     width: 50%;
   }
 
   .md-7 {
     flex: none;
     width: 58.33333%;
   }
 
   .md-8 {
     flex: none;
     width: 66.66667%;
   }
 
   .md-9 {
     flex: none;
     width: 75%;
   }
 
   .md-10 {
     flex: none;
     width: 83.33333%;
   }
 
   .md-11 {
     flex: none;
     width: 91.66667%;
   }
 
   .md-12 {
     flex: none;
     width: 100%;
   }
 
   .block-md-one-eight > .column {
     flex: none;
     width: 12.5%;
   }
 
   .block-md-one-sixth > .column {
     flex: none;
     width: 16.66667%;
   }
 
   .block-md-one-fifth > .column {
     flex: none;
     width: 20%;
   }
 
   .block-md-one-fourth > .column {
     flex: none;
     width: 25%;
   }
 
   .block-md-one-third > .column {
     flex: none;
     width: 33.33333%;
   }
 
   .block-md-one-half > .column {
     flex: none;
     width: 50%;
   }
 
   .block-md-whole > .column {
     flex: none;
     width: 100%;
   }
 
   .hide-on-md {
     display: none;
   }
 }
 
 /* --------------------------------------------------------------------
   * ## tablet devices 
   * -------------------------------------------------------------------- */
 @media screen and (max-width: 800px) {
   .tab-1 {
     flex: none;
     width: 8.33333%;
   }
 
   .tab-2 {
     flex: none;
     width: 16.66667%;
   }
 
   .tab-3 {
     flex: none;
     width: 25%;
   }
 
   .tab-4 {
     flex: none;
     width: 33.33333%;
   }
 
   .tab-5 {
     flex: none;
     width: 41.66667%;
   }
 
   .tab-6 {
     flex: none;
     width: 50%;
   }
 
   .tab-7 {
     flex: none;
     width: 58.33333%;
   }
 
   .tab-8 {
     flex: none;
     width: 66.66667%;
   }
 
   .tab-9 {
     flex: none;
     width: 75%;
   }
 
   .tab-10 {
     flex: none;
     width: 83.33333%;
   }
 
   .tab-11 {
     flex: none;
     width: 91.66667%;
   }
 
   .tab-12 {
     flex: none;
     width: 100%;
   }
 
   .block-tab-one-eight > .column {
     flex: none;
     width: 12.5%;
   }
 
   .block-tab-one-sixth > .column {
     flex: none;
     width: 16.66667%;
   }
 
   .block-tab-one-fifth > .column {
     flex: none;
     width: 20%;
   }
 
   .block-tab-one-fourth > .column {
     flex: none;
     width: 25%;
   }
 
   .block-tab-one-third > .column {
     flex: none;
     width: 33.33333%;
   }
 
   .block-tab-one-half > .column {
     flex: none;
     width: 50%;
   }
 
   .block-tab-whole > .column {
     flex: none;
     width: 100%;
   }
 
   .hide-on-tab {
     display: none;
   }
 }
 
 /* --------------------------------------------------------------------
   * ## mobile devices 
   * -------------------------------------------------------------------- */
 @media screen and (max-width: 600px) {
   .row {
     width: 100%;
     padding-left: 6vw;
     padding-right: 6vw;
   }
 
   .row .row {
     padding-left: 0;
     padding-right: 0;
   }
 
   .mob-1 {
     flex: none;
     width: 8.33333%;
   }
 
   .mob-2 {
     flex: none;
     width: 16.66667%;
   }
 
   .mob-3 {
     flex: none;
     width: 25%;
   }
 
   .mob-4 {
     flex: none;
     width: 33.33333%;
   }
 
   .mob-5 {
     flex: none;
     width: 41.66667%;
   }
 
   .mob-6 {
     flex: none;
     width: 50%;
   }
 
   .mob-7 {
     flex: none;
     width: 58.33333%;
   }
 
   .mob-8 {
     flex: none;
     width: 66.66667%;
   }
 
   .mob-9 {
     flex: none;
     width: 75%;
   }
 
   .mob-10 {
     flex: none;
     width: 83.33333%;
   }
 
   .mob-11 {
     flex: none;
     width: 91.66667%;
   }
 
   .mob-12 {
     flex: none;
     width: 100%;
   }
 
   .block-mob-one-eight > .column {
     flex: none;
     width: 12.5%;
   }
 
   .block-mob-one-sixth > .column {
     flex: none;
     width: 16.66667%;
   }
 
   .block-mob-one-fifth > .column {
     flex: none;
     width: 20%;
   }
 
   .block-mob-one-fourth > .column {
     flex: none;
     width: 25%;
   }
 
   .block-mob-one-third > .column {
     flex: none;
     width: 33.33333%;
   }
 
   .block-mob-one-half > .column {
     flex: none;
     width: 50%;
   }
 
   .block-mob-whole > .column {
     flex: none;
     width: 100%;
   }
 
   .hide-on-mob {
     display: none;
   }
 }
 
 /* --------------------------------------------------------------------
   * ## small screen devices 
   * --------------------------------------------------------------------*/
 
 /* stack columns on small screen devices
   */
 @media screen and (max-width: 400px) {
   .row .row {
     margin-left: 0;
     margin-right: 0;
   }
 
   .block-stack > .column,
   .column {
     flex: none;
     width: 100%;
     margin-left: 0;
     margin-right: 0;
     padding: 0;
   }
 
   .hide-on-sm {
     display: none;
   }
 }
 
 /* --------------------------------------------------------------------
   * ## additional column stackpoints 
   * -------------------------------------------------------------------- */
 @media screen and (max-width: 1000px) {
   .stack-on-1000,
   .block-stack-on-1000 > .column {
     flex: none;
     width: 100%;
     margin-left: 0;
     margin-right: 0;
   }
 }
 
 @media screen and (max-width: 700px) {
   .stack-on-700,
   .block-stack-on-700 > .column {
     flex: none;
     width: 100%;
     margin-left: 0;
     margin-right: 0;
   }
 }
 
 @media screen and (max-width: 550px) {
   .stack-on-550,
   .block-stack-on-550 > .column {
     flex: none;
     width: 100%;
     margin-left: 0;
     margin-right: 0;
   }
 }
 
 /* ===================================================================
   * # UTILITY CLASSES
   *
   *
   * ------------------------------------------------------------------- */
 
 /* flex item alignment classes
   */
 .u-flexitem-center {
   margin: auto;
   align-self: center;
 }
 
 .u-flexitem-left {
   margin-right: auto;
   align-self: center;
 }
 
 .u-flexitem-right {
   margin-left: auto;
   align-self: center;
 }
 
 .u-flexitem-x-center {
   margin-right: auto;
   margin-left: auto;
 }
 
 .u-flexitem-x-left {
   margin-right: auto;
 }
 
 .u-flexitem-x-right {
   margin-left: auto;
 }
 
 .u-flexitem-y-center {
   align-self: center;
 }
 
 .u-flexitem-y-top {
   align-self: flex-start;
 }
 
 .u-flexitem-y-bottom {
   align-self: flex-end;
 }
 
 /* misc helper classes
   */
 .u-clearfix:after {
   content: "";
   display: table;
   clear: both;
 }
 
 .u-hidden {
   display: none;
 }
 
 .u-invisible {
   visibility: hidden;
 }
 
 .u-antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 .u-overflow-hidden {
   overflow: hidden;
 }
 
 .u-remove-top {
   margin-top: 0;
 }
 
 .u-remove-bottom {
   margin-bottom: 0;
 }
 
 .u-add-half-bottom {
   margin-bottom: var(--vspace-0_5);
 }
 
 .u-add-bottom {
   margin-bottom: var(--vspace-1);
 }
 
 .u-no-border {
   border: none;
 }
 
 .u-fullwidth {
   width: 100%;
 }
 
 .u-pull-left {
   float: left;
 }
 
 .u-pull-right {
   float: right;
 }
 
 /* ===================================================================
   * # TYPOGRAPHY 
   *
   *
   * ------------------------------------------------------------------- 
   * type scale - ratio 1:2 | base: 18px
   * -------------------------------------------------------------------
   *
   * --text-display-3 = (77.40px)
   * --text-display-2 = (64.50px)
   * --text-display-1 = (53.75px)
   * --text-xxxl      = (44.79px)
   * --text-xxl       = (37.32px)
   * --text-xl        = (31.10px)
   * --text-lg        = (25.92px)
   * --text-md        = (21.60px)
   * --text-size      = (18.00px) BASE
   * --text-sm        = (15.00px)
   * --text-xs        = (12.50px)
   *
   * -------------------------------------------------------------------- */
 
 /* --------------------------------------------------------------------
   * ## base type styles
   * -------------------------------------------------------------------- */
 body {
   font-family: var(--font-1);
   font-size: var(--base-font-size);
   font-weight: 400;
   line-height: var(--vspace-1);
   color: var(--color-text);
 }
 
 /* links
   */
 a {
   color: var(--color-1-light);
   transition: all 0.3s ease-in-out;
 }
 
 a:focus,
 a:hover,
 a:active {
   color: var(--color-2-light);
 }
 
 a:hover,
 a:active {
   outline: 0;
 }
 
 /* headings
   */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 .h1,
 .h2,
 .h3,
 .h4,
 .h5,
 .h6 {
   font-family: var(--font-1);
   font-weight: 500;
   color: var(--color-text-dark);
   font-variant-ligatures: common-ligatures;
   text-rendering: optimizeLegibility;
 }
 
 h1,
 .h1 {
   margin-top: var(--vspace-2_5);
   margin-bottom: var(--vspace-0_75);
 }
 
 h2,
 .h2,
 h3,
 .h3,
 h4,
 .h4 {
   margin-top: var(--vspace-2);
   margin-bottom: var(--vspace-0_5);
 }
 
 h5,
 .h5,
 h6,
 .h6 {
   margin-top: var(--vspace-1_5);
   margin-bottom: var(--vspace-0_5);
 }
 
 h1,
 .h1 {
   font-size: var(--text-display-1);
   line-height: var(--vspace-2);
   letter-spacing: -0.02em;
 }
 
 @media screen and (max-width: 500px) {
   h1,
   .h1 {
     font-size: var(--text-xxxl);
     line-height: calc(1.625 * var(--space));
   }
 }
 
 h2,
 .h2 {
   font-size: var(--text-xxl);
   line-height: var(--vspace-1_5);
   letter-spacing: -0.02em;
 }
 
 h3,
 .h3 {
   font-size: var(--text-xl);
   line-height: var(--vspace-1_25);
 }
 
 h4,
 .h4 {
   font-size: var(--text-lg);
   line-height: var(--vspace-1);
 }
 
 h5,
 .h5 {
   font-size: var(--text-md);
   line-height: var(--vspace-0_875);
 }
 
 h6,
 .h6 {
   font-family: var(--font-1);
   font-size: var(--text-sm);
   line-height: var(--vspace-0_75);
   text-transform: uppercase;
   letter-spacing: 0.35rem;
 }
 
 /* emphasis, italic,
   * strong, bold and small text
   */
 em,
 i,
 strong,
 b {
   font-size: inherit;
   line-height: inherit;
 }
 
 em,
 i {
   font-style: italic;
 }
 
 strong,
 b {
   font-weight: 600;
 }
 
 small {
   font-size: 75%;
   font-weight: 400;
   line-height: var(--vspace-0_5);
 }
 
 /* blockquotes
   */
 blockquote {
   margin: 0 0 var(--vspace-1) 0;
   padding: var(--vspace-1) var(--vspace-1_5);
   border-left: 2px solid black;
   position: relative;
 }
 
 @media screen and (max-width: 400px) {
   blockquote {
     padding: var(--vspace-0_75) var(--vspace-0_75);
   }
 }
 
 blockquote p {
   font-family: var(--font-1);
   font-weight: 400;
   font-size: var(--text-lg);
   font-style: normal;
   line-height: var(--vspace-1_25);
   color: var(--color-text-dark);
   padding: 0;
 }
 
 blockquote cite {
   display: block;
   font-family: var(--font-1);
   font-weight: 400;
   font-size: var(--text-sm);
   line-height: var(--vspace-0_75);
   font-style: normal;
 }
 
 blockquote cite:before {
   content: "\2014 \0020";
 }
 
 blockquote cite,
 blockquote cite a,
 blockquote cite a:visited {
   color: var(--color-text-light);
   border: none;
 }
 
 /* figures
   */
 figure img,
 p img {
   margin: 0;
   vertical-align: bottom;
 }
 
 figure {
   display: block;
   margin-left: 0;
   margin-right: 0;
 }
 
 figure img + figcaption {
   margin-top: var(--vspace-1);
 }
 
 figcaption {
   font-style: italic;
   font-size: var(--text-sm);
   text-align: center;
   margin-bottom: 0;
 }
 
 /* preformatted, code
   */
 var,
 kbd,
 samp,
 code,
 pre {
   font-family: var(--font-mono);
 }
 
 pre {
   padding: var(--vspace-0_75) var(--vspace-1) var(--vspace-1);
   background: var(--color-gray-9);
   overflow-x: auto;
 }
 
 code {
   font-size: var(--text-sm);
   line-height: 1.6rem;
   margin: 0 0.2rem;
   padding: calc(((var(--vspace-1) - 1.6rem) / 2) - 0.1rem) calc(0.8rem - 0.1rem);
   white-space: nowrap;
   background: var(--color-gray-1);
   border: 1px solid var(--color-gray-2);
   color: var(--color-text-dark);
   border-radius: 3px;
 }
 
 pre > code {
   display: block;
   white-space: pre;
   line-height: var(--vspace-1);
   padding: 0;
   margin: 0;
   border: none;
 }
 
 /* deleted text, abbreviation,
   * & mark text
   */
 del {
   text-decoration: line-through;
 }
 
 abbr {
   font-family: var(--font-1);
   font-weight: 600;
   font-variant: small-caps;
   text-transform: lowercase;
   letter-spacing: 0.1em;
 }
 
 abbr[title],
 dfn[title] {
   border-bottom: 1px dotted;
   cursor: help;
   text-decoration: none;
 }
 
 mark {
   background: var(--color-1-lighter);
   color: var(--color-black);
 }
 
 /* horizontal rule
   */
 hr {
   border: solid var(--color-border);
   border-width: 0.1rem 0 0;
   clear: both;
   margin: var(--vspace-2) 0 calc(var(--vspace-2) - 1px);
   height: 0;
 }
 
 hr.fancy {
   border: none;
   margin: var(--vspace-2) 0;
   height: var(--vspace-1);
   text-align: center;
 }
 
 hr.fancy::before {
   content: "*****";
   letter-spacing: 0.3em;
 }
 
 /* --------------------------------------------------------------------
   * ## additional typography & helper classes
   * -------------------------------------------------------------------- */
 .lead,
 .attention-getter {
   font-family: var(--font-1);
   font-weight: 300;
   font-size: var(--text-md);
   line-height: calc(1.125 * var(--space));
   color: var(--color-text);
 }
 
 .pull-quote {
   position: relative;
   padding: 0;
   margin-top: 0;
   text-align: center;
 }
 
 .pull-quote blockquote {
   border: none;
   margin: 0 auto;
   max-width: 62rem;
   padding-top: var(--vspace-2_5);
   position: relative;
 }
 
 .pull-quote blockquote p {
   font-weight: 400;
   color: var(--color-text-dark);
 }
 
 .pull-quote blockquote:before {
   content: "";
   display: block;
   height: var(--vspace-1);
   width: var(--vspace-1);
   background-repeat: no-repeat;
   background: center center;
   background-size: contain;
   background-image: url(../images/icons/icon-quote.svg);
   transform: translate(-50%, 0, 0);
   position: absolute;
   top: var(--vspace-1);
   left: 50%;
 }
 
 .drop-cap:first-letter {
   float: left;
   font-family: var(--font-1);
   font-weight: 600;
   font-size: calc(3 * var(--space));
   line-height: 1;
   padding: 0 0.125em 0 0;
   text-transform: uppercase;
   background: transparent;
   color: var(--color-text-dark);
 }
 
 .text-center {
   text-align: center;
 }
 
 .text-left {
   text-align: left;
 }
 
 .text-right {
   text-align: right;
 }
 
 /* --------------------------------------------------------------------
   * ## lists
   * -------------------------------------------------------------------- */
 ol {
   list-style: decimal;
 }
 
 ul {
   list-style: disc;
 }
 
 li {
   display: list-item;
 }
 
 ol,
 ul {
   margin-left: 1.6rem;
 }
 
 ul li {
   padding-left: 0.4rem;
 }
 
 ul ul,
 ul ol,
 ol ol,
 ol ul {
   margin: 1.6rem 0 1.6rem 1.6rem;
 }
 
 ul.disc li {
   display: list-item;
   list-style: none;
   padding: 0 0 0 0.8rem;
   position: relative;
 }
 
 ul.disc li::before {
   content: "";
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--color-1);
   position: absolute;
   left: -0.9em;
   top: 11px;
   vertical-align: middle;
 }
 
 dt {
   margin: 0;
   color: var(--color-1);
 }
 
 dd {
   margin: 0 0 0 2rem;
 }
 
 /* definition list line style 
   */
 .lining dt,
 .lining dd {
   display: inline;
   margin: 0;
 }
 
 .lining dt + dt:before,
 .lining dd + dt:before {
   content: "\A";
   white-space: pre;
 }
 
 .lining dd + dd:before {
   content: ", ";
 }
 
 .lining dd + dd:before {
   content: ", ";
 }
 
 .lining dd:before {
   content: ": ";
   margin-left: -0.2em;
 }
 
 /* definition list dictionary style 
   */
 .dictionary-style dt {
   display: inline;
   counter-reset: definitions;
 }
 
 .dictionary-style dt + dt:before {
   content: ", ";
   margin-left: -0.2em;
 }
 
 .dictionary-style dd {
   display: block;
   counter-increment: definitions;
 }
 
 .dictionary-style dd:before {
   content: counter(definitions, decimal) ". ";
 }
 
 /* --------------------------------------------------------------------
   * ## spacing
   * -------------------------------------------------------------------- */
 fieldset,
 button,
 .btn {
   margin-bottom: var(--vspace-0_5);
 }
 
 input,
 textarea,
 select,
 pre,
 blockquote,
 figure,
 figcaption,
 table,
 p,
 ul,
 ol,
 dl,
 form,
 img,
 .video-container,
 .ss-custom-select {
   margin-bottom: var(--vspace-1);
 }
 
 /* =================================================================== 
   * # PRELOADER
   * 
   * 
   * -------------------------------------------------------------------
   * - markup:
   *
   * <div id="preloader">
   *    <div id="loader"></div>
   * </div>
   *
   * ------------------------------------------------------------------- */
 #preloader {
   position: fixed;
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   align-items: center;
   background: var(--color-preloader-bg);
   z-index: 500;
   height: 100vh;
   width: 100%;
   opacity: 1;
   pointer-events: none;
 }
 
 .no-js #preloader {
   display: none;
 }
 
 #loader {
   width: var(--vspace-1_5);
   height: var(--vspace-1_5);
   padding: 0;
   opacity: 1;
 }
 
 #loader::before {
   content: "";
   border-top: 4px solid var(--color-loader-light);
   border-right: 4px solid var(--color-loader-light);
   border-bottom: 4px solid var(--color-loader-light);
   border-left: 4px solid var(--color-loader);
   -webkit-animation: load 1.1s infinite linear;
   animation: load 1.1s infinite linear;
   display: block;
   border-radius: 50%;
   width: 100%;
   height: 100%;
 }
 
 @-webkit-keyframes load {
   0% {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 
   100% {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 
 @keyframes load {
   0% {
     transform: rotate(0deg);
   }
 
   100% {
     transform: rotate(360deg);
   }
 }
 
 /* ------------------------------------------------------------------- 
   * ## page loaded
   * ------------------------------------------------------------------- */
 .ss-loaded #preloader {
   opacity: 0;
   visibility: hidden;
   transition: all 0.6s 0.9s ease-in-out;
 }
 
 .ss-loaded #preloader #loader {
   opacity: 0;
   transition: opacity 0.6s ease-in-out;
 }
 
 /* ===================================================================
   * # FORM 
   *
   *
   * ------------------------------------------------------------------- */
 fieldset {
   border: none;
 }
 
 input[type="email"],
 input[type="number"],
 input[type="search"],
 input[type="text"],
 input[type="tel"],
 input[type="url"],
 input[type="password"],
 textarea,
 select {
   --input-height: var(--vspace-2);
   --input-line-height: var(--vspace-1);
   --input-vpadding: calc(
     ((var(--input-height) - var(--input-line-height)) / 2) - 1px
   );
   display: block;
   height: var(--input-height);
   padding: var(--input-vpadding) calc(2.4rem - 1px);
   border: 0;
   outline: 0;
   color: var(--color-placeholder);
   font-family: var(--font-1);
   font-size: var(--text-sm);
   line-height: var(--input-line-height);
   max-width: 100%;
   background-color: var(--color-gray-1);
   border: 1px solid transparent;
   transition: all 0.3s ease-in-out;
   border-radius: var(--border-radius);
 }
 
 .ss-custom-select {
   position: relative;
   padding: 0;
 }
 
 .ss-custom-select select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   text-indent: 0.01px;
   text-overflow: "";
   margin: 0;
   vertical-align: middle;
 }
 
 .ss-custom-select select option {
   padding-left: 2rem;
   padding-right: 2rem;
 }
 
 .ss-custom-select select::-ms-expand {
   display: none;
 }
 
 .ss-custom-select::after {
   border-bottom: 2px solid black;
   border-right: 2px solid black;
   content: "";
   display: block;
   height: 8px;
   width: 8px;
   margin-top: -7px;
   pointer-events: none;
   position: absolute;
   right: 2.4rem;
   top: 50%;
   transition: all 0.15s ease-in-out;
   transform-origin: 66% 66%;
   transform: rotate(45deg);
 }
 
 textarea {
   min-height: calc(8 * var(--space));
 }
 
 input[type="email"]:focus,
 input[type="number"]:focus,
 input[type="search"]:focus,
 input[type="text"]:focus,
 input[type="tel"]:focus,
 input[type="url"]:focus,
 input[type="password"]:focus,
 textarea:focus,
 select:focus {
   color: var(--color-black);
   box-shadow: 0 0 5px var(--color-1);
   border: 1px solid var(--color-1);
 }
 
 label,
 legend {
   font-family: var(--font-1);
   font-weight: 600;
   font-size: var(--text-sm);
   line-height: var(--vspace-0_5);
   margin-bottom: var(--vspace-0_5);
   color: var(--color-text-dark);
   display: block;
 }
 
 input[type="checkbox"],
 input[type="radio"] {
   display: inline;
 }
 
 label > .label-text {
   display: inline-block;
   margin-left: 1rem;
   font-family: var(--font-1);
   line-height: inherit;
 }
 
 label > input[type="checkbox"],
 label > input[type="radio"] {
   margin: 0;
   position: relative;
   top: 2px;
 }
 
 /* ------------------------------------------------------------------- 
   * ## style placeholder text
   * ------------------------------------------------------------------- */
 ::-webkit-input-placeholder {
   /* WebKit, Blink, Edge */
   color: var(--color-placeholder);
 }
 
 :-moz-placeholder {
   /* Mozilla Firefox 4 to 18 */
   color: var(--color-placeholder);
   opacity: 1;
 }
 
 ::-moz-placeholder {
   /* Mozilla Firefox 19+ */
   color: var(--color-placeholder);
   opacity: 1;
 }
 
 :-ms-input-placeholder {
   /* Internet Explorer 10-11 */
   color: var(--color-placeholder);
 }
 
 ::-ms-input-placeholder {
   /* Microsoft Edge */
   color: var(--color-placeholder);
 }
 
 ::placeholder {
   /* Most modern browsers support this now. */
   color: var(--color-placeholder);
 }
 
 /* ------------------------------------------------------------------- 
   * ## change autocomplete styles in Chrome
   * ------------------------------------------------------------------- */
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 textarea:-webkit-autofill,
 textarea:-webkit-autofill:hover,
 textarea:-webkit-autofill:focus,
 select:-webkit-autofill,
 select:-webkit-autofill:hover,
 select:-webkit-autofill:focus {
   -webkit-text-fill-color: var(--color-1);
   transition: background-color 5000s ease-in-out 0s;
 }
 
 /* ===================================================================
   * # BUTTONS
   *
   *
   * ------------------------------------------------------------------- */
 .btn,
 button,
 input[type="submit"],
 input[type="reset"],
 input[type="button"] {
   --btn-height: var(--vspace-btn);
   display: inline-block;
   font-family: var(--font-1);
   font-weight: 500;
   font-size: var(--text-xs);
   text-transform: uppercase;
   letter-spacing: 0.35em;
   height: var(--btn-height);
   line-height: calc(var(--btn-height) - 4px);
   padding: 0 3.6rem;
   margin: 0 0.4rem var(--vspace-0_5) 0;
   color: var(--color-btn-text);
   text-decoration: none;
   text-align: center;
   white-space: nowrap;
   cursor: pointer;
   transition: all 0.3s;
   border-radius: var(--border-radius);
   background-color: var(--color-btn);
   border: 2px solid var(--color-btn);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 .btn:focus,
 button:focus,
 input[type="submit"]:focus,
 input[type="reset"]:focus,
 input[type="button"]:focus,
 .btn:hover,
 button:hover,
 input[type="submit"]:hover,
 input[type="reset"]:hover,
 input[type="button"]:hover {
   background-color: var(--color-btn-hover);
   border-color: var(--color-btn-hover);
   color: var(--color-btn-hover-text);
   outline: 0;
 }
 
 /* button primary
   */
 .btn.btn--primary,
 button.btn--primary,
 input[type="submit"].btn--primary,
 input[type="reset"].btn--primary,
 input[type="button"].btn--primary {
   background: var(--color-btn-primary);
   border-color: var(--color-btn-primary);
   color: var(--color-btn-primary-text);
 }
 
 .btn.btn--primary:focus,
 button.btn--primary:focus,
 input[type="submit"].btn--primary:focus,
 input[type="reset"].btn--primary:focus,
 input[type="button"].btn--primary:focus,
 .btn.btn--primary:hover,
 button.btn--primary:hover,
 input[type="submit"].btn--primary:hover,
 input[type="reset"].btn--primary:hover,
 input[type="button"].btn--primary:hover {
   background: var(--color-btn-primary-hover);
   border-color: var(--color-btn-primary-hover);
   color: var(--color-btn-primary-hover-text);
 }
 
 /* button modifiers
   */
 .btn.u-fullwidth,
 button.u-fullwidth {
   width: 100%;
   margin-right: 0;
 }
 
 .btn--small,
 button.btn--small {
   --btn-height: calc(var(--vspace-btn) - 1.6rem);
 }
 
 .btn--medium,
 button.btn--medium {
   --btn-height: calc(var(--vspace-btn) + 0.8rem);
 }
 
 .btn--large,
 button.btn--large {
   --btn-height: calc(var(--vspace-btn) + 1.6rem);
 }
 
 .btn--stroke,
 button.btn--stroke {
   background: transparent !important;
   border: 2px solid var(--color-btn-stroke);
   color: var(--color-btn-stroke-text);
 }
 
 .btn--stroke:focus,
 button.btn--stroke:focus,
 .btn--stroke:hover,
 button.btn--stroke:hover {
   background: var(--color-btn-stroke-hover) !important;
   border: 2px solid var(--color-btn-stroke-hover);
   color: var(--color-btn-stroke-hover-text);
 }
 
 .btn--pill,
 button.btn--pill {
   padding-left: 3.2rem !important;
   padding-right: 3.2rem !important;
   border-radius: 1000px !important;
 }
 
 /* ===================================================================
   * # TABLE
   *
   *
   * ------------------------------------------------------------------- */
 table {
   border-width: 0;
   width: 100%;
   max-width: 100%;
   font-family: var(--font-1);
   border-collapse: collapse;
 }
 
 th,
 td {
   padding: var(--vspace-0_5) 3.2rem calc(var(--vspace-0_5) - 1px);
   text-align: left;
   border-bottom: 1px solid var(--color-border);
 }
 
 th {
   padding: var(--vspace-0_5) 3.2rem;
   color: var(--color-text-dark);
   font-family: var(--font-1);
   font-weight: 600;
 }
 
 th:first-child,
 td:first-child {
   padding-left: 0;
 }
 
 th:last-child,
 td:last-child {
   padding-right: 0;
 }
 
 .table-responsive {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
 }
 
 /* ===================================================================
   * # COMPONENTS
   *
   *
   * ------------------------------------------------------------------- */
 
 /* -------------------------------------------------------------------
   * ## pagination
   * ------------------------------------------------------------------- */
 .pgn {
   --pgn-num-height: calc(var(--vspace-1) + 0.4rem);
   margin: var(--vspace-1) auto;
   text-align: center;
 }
 
 .pgn ul {
   display: inline-flex;
   flex-flow: row wrap;
   justify-content: center;
   list-style: none;
   margin-left: 0;
   position: relative;
   padding: 0 6rem;
 }
 
 .pgn ul li {
   margin: 0;
   padding: 0;
 }
 
 .pgn__num {
   font-family: var(--font-1);
   font-weight: 600;
   font-size: var(--text-size);
   line-height: var(--vspace-1);
   display: block;
   padding: 0.2rem 1.2rem;
   height: var(--pgn-num-height);
   margin: 0.2rem 0.2rem;
   color: var(--color-text-dark);
   border-radius: 4px;
   transition: all, 0.3s, ease-in-out;
 }
 
 .pgn__num:focus,
 .pgn__num:hover {
   background: black;
   color: white;
 }
 
 .pgn .current,
 .pgn .current:focus,
 .pgn .current:hover {
   background-color: black;
   color: white;
 }
 
 .pgn .inactive,
 .pgn .inactive:focus,
 .pgn .inactive:hover {
   opacity: 0.4;
   cursor: default;
 }
 
 .pgn__prev,
 .pgn__next {
   display: inline-flex;
   flex-flow: row wrap;
   justify-content: center;
   align-items: center;
   height: var(--pgn-num-height);
   width: 4.8rem;
   line-height: var(--vspace-1);
   border-radius: 4px;
   padding: 0;
   margin: 0;
   opacity: 1;
   font: 0/0 a;
   text-shadow: none;
   color: transparent;
   transition: all, 0.3s, ease-in-out;
   position: absolute;
   top: 50%;
   transform: translate(0, -50%);
 }
 
 .pgn__prev:focus,
 .pgn__prev:hover,
 .pgn__next:focus,
 .pgn__next:hover {
   background-color: black;
 }
 
 .pgn__prev svg,
 .pgn__next svg {
   height: 2.4rem;
   width: 2.4rem;
   transition: all, 0.3s, ease-in-out;
 }
 
 .pgn__prev svg path,
 .pgn__next svg path {
   fill: var(--color-text-dark);
 }
 
 .pgn__prev:focus svg path,
 .pgn__prev:hover svg path,
 .pgn__next:focus svg path,
 .pgn__next:hover svg path {
   fill: white;
 }
 
 .pgn__prev {
   left: 0;
 }
 
 .pgn__next {
   right: 0;
 }
 
 .pgn__prev.inactive,
 .pgn__next.inactive {
   opacity: 0.4;
   cursor: default;
 }
 
 .pgn__prev.inactive:focus,
 .pgn__prev.inactive:hover,
 .pgn__next.inactive:focus,
 .pgn__next.inactive:hover {
   background-color: transparent;
 }
 
 /* ------------------------------------------------------------------- 
   * responsive:
   * pagination
   * ------------------------------------------------------------------- */
 @media screen and (max-width: 600px) {
   .pgn ul {
     padding: 0 5.2rem;
   }
 }
 
 /* ------------------------------------------------------------------- 
   * ## alert box 
   * ------------------------------------------------------------------- */
 .alert-box {
   padding: var(--vspace-0_75) 4rem var(--vspace-0_75) 3.2rem;
   margin-bottom: var(--vspace-1);
   border-radius: var(--border-radius);
   font-family: var(--font-1);
   font-weight: 500;
   font-size: var(--text-sm);
   line-height: var(--vspace-0_75);
   opacity: 1;
   visibility: visible;
   position: relative;
 }
 
 .alert-box__close {
   position: absolute;
   display: block;
   right: 1.6rem;
   top: 1.6rem;
   cursor: pointer;
   width: 12px;
   height: 12px;
 }
 
 .alert-box__close::before,
 .alert-box__close::after {
   content: "";
   display: inline-block;
   width: 1px;
   height: 12px;
   position: absolute;
   top: 0;
   left: 5px;
 }
 
 .alert-box__close::before {
   transform: rotate(45deg);
 }
 
 .alert-box__close::after {
   transform: rotate(-45deg);
 }
 
 .alert-box--error {
   background-color: var(--color-error);
   color: var(--color-error-content);
 }
 
 .alert-box--error .alert-box__close::before,
 .alert-box--error .alert-box__close::after {
   background-color: var(--color-error-content);
 }
 
 .alert-box--success {
   background-color: var(--color-success);
   color: var(--color-success-content);
 }
 
 .alert-box--success .alert-box__close::before,
 .alert-box--success .alert-box__close::after {
   background-color: var(--color-success-content);
 }
 
 .alert-box--info {
   background-color: var(--color-info);
   color: var(--color-info-content);
 }
 
 .alert-box--info .alert-box__close::before,
 .alert-box--info .alert-box__close::after {
   background-color: var(--color-info-content);
 }
 
 .alert-box--notice {
   background-color: var(--color-notice);
   color: var(--color-notice-content);
 }
 
 .alert-box--notice .alert-box__close::before,
 .alert-box--notice .alert-box__close::after {
   background-color: var(--color-notice-content);
 }
 
 .alert-box.hideit {
   opacity: 0;
   visibility: hidden;
   transition: all 0.5s;
 }
 
 /* ------------------------------------------------------------------- 
   * ## skillbars
   * ------------------------------------------------------------------- */
 .skill-bars {
   list-style: none;
   margin: var(--vspace-2) 0 var(--vspace-1);
 }
 
 .skill-bars li {
   height: 0.4rem;
   background: var(--color-gray-2);
   width: 100%;
   margin-bottom: calc(var(--vspace-2) - 0.4rem);
   padding: 0;
   position: relative;
 }
 
 .skill-bars li strong {
   position: absolute;
   left: 0;
   top: calc((var(--vspace-1) * 1.25) * -1);
   font-family: var(--font-1);
   font-weight: 600;
   color: var(--color-text-dark);
   text-transform: uppercase;
   letter-spacing: 0.2em;
   font-size: var(--text-xs);
   line-height: var(--vspace-0_75);
 }
 
 .skill-bars li .progress {
   background: var(--color-1);
   position: relative;
   height: 100%;
 }
 
 .skill-bars li .progress span {
   display: block;
   font-family: var(--font-1);
   color: white;
   font-size: 1rem;
   line-height: 1;
   background: var(--color-black);
   padding: var(--vspace-0_25);
   border-radius: 4px;
   position: absolute;
   right: 0;
   top: calc((var(--vspace-1) + 0.8rem) * -1);
 }
 
 .skill-bars li .progress span::after {
   position: absolute;
   left: 50%;
   bottom: -10px;
   margin-left: -5px;
   width: 0;
   height: 0;
   border: 5px solid transparent;
   border-top-color: var(--color-black, var(--color-black));
   content: "";
 }
 
 .skill-bars li .percent5 {
   width: 5%;
 }
 
 .skill-bars li .percent10 {
   width: 10%;
 }
 
 .skill-bars li .percent15 {
   width: 15%;
 }
 
 .skill-bars li .percent20 {
   width: 20%;
 }
 
 .skill-bars li .percent25 {
   width: 25%;
 }
 
 .skill-bars li .percent30 {
   width: 30%;
 }
 
 .skill-bars li .percent35 {
   width: 35%;
 }
 
 .skill-bars li .percent40 {
   width: 40%;
 }
 
 .skill-bars li .percent45 {
   width: 45%;
 }
 
 .skill-bars li .percent50 {
   width: 50%;
 }
 
 .skill-bars li .percent55 {
   width: 55%;
 }
 
 .skill-bars li .percent60 {
   width: 60%;
 }
 
 .skill-bars li .percent65 {
   width: 65%;
 }
 
 .skill-bars li .percent70 {
   width: 70%;
 }
 
 .skill-bars li .percent75 {
   width: 75%;
 }
 
 .skill-bars li .percent80 {
   width: 80%;
 }
 
 .skill-bars li .percent85 {
   width: 85%;
 }
 
 .skill-bars li .percent90 {
   width: 90%;
 }
 
 .skill-bars li .percent95 {
   width: 95%;
 }
 
 .skill-bars li .percent100 {
   width: 100%;
 }
 
 /* --------------------------------------------------------------------
   * ## stats tabs
   * -------------------------------------------------------------------- */
 .stats-tabs {
   padding: 0;
   margin: var(--vspace-1) 0;
 }
 
 .stats-tabs li {
   display: inline-block;
   margin: 0 1.6rem var(--vspace-0_5) 0;
   padding: 0 1.5rem 0 0;
   border-right: 1px solid var(--color-border);
 }
 
 .stats-tabs li:last-child {
   margin: 0;
   padding: 0;
   border: none;
 }
 
 .stats-tabs li a {
   display: block;
   font-family: var(--font-1);
   font-size: var(--text-lg);
   font-weight: 600;
   line-height: var(--vspace-1_5);
   border: none;
   color: var(--color-text-dark);
 }
 
 .stats-tabs li a:hover {
   color: var(--color-1);
 }
 
 .stats-tabs li a em {
   display: block;
   margin: 0;
   font-family: var(--font-1);
   font-size: var(--text-sm);
   line-height: var(--vspace-0_5);
   font-weight: 400;
   font-style: normal;
   color: var(--color-text-light);
 }
 
 /* ===================================================================
   * # PROJECT-WIDE SHARED STYLES
   *
   *
   * ------------------------------------------------------------------- */
 .wide {
   max-width: var(--width-wide);
 }
 
 .wider {
   max-width: var(--width-wider);
 }
 
 .narrow {
   max-width: var(--width-narrow);
 }
 
 .screen-reader-text {
   clip: rect(1px, 1px, 1px, 1px);
   clip-path: inset(50%);
   height: 1px;
   width: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   border: 0;
   position: absolute;
   word-wrap: normal !important;
 }
 
 /* ------------------------------------------------------------------- 
   * ## media classes
   * ------------------------------------------------------------------- */
 
 /* floated image
   */
 img.u-pull-right {
   margin: var(--vspace-0_5) 0 var(--vspace-0_5) var(--vspace-0_875);
 }
 
 img.u-pull-left {
   margin: var(--vspace-0_5) var(--vspace-0_875) var(--vspace-0_5) 0;
 }
 
 /* responsive video container
   */
 .video-container {
   --aspect-ratio: 16/9;
   position: relative;
   height: 0;
   overflow: hidden;
   padding-bottom: calc(100% / (var(--aspect-ratio)));
 }
 
 .video-container iframe,
 .video-container object,
 .video-container embed,
 .video-container video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }
 
 /* ===================================================================
   * # PAGE WRAP
   *
   *
   * ------------------------------------------------------------------- */
 .s-pagewrap {
   --header-height: 12rem;
   display: flex;
   flex-direction: column;
   min-height: 100%;
   overflow: hidden;
   position: relative;
 }
 
 /* ------------------------------------------------------------------- 
   * responsive:
   * pagewrap
   * ------------------------------------------------------------------- */
 @media screen and (max-width: 400px) {
   .s-pagewrap {
     --header-height: 10.6rem;
   }
 }
 
 /* ===================================================================
   * # HEADER
   *
   *
   * ------------------------------------------------------------------- */
 .s-header {
   --logo-width: 30rem;
   z-index: 100;
   width: 100%;
   position: absolute;
   top: var(--vspace-1_50);
   left: 0;
 }
 
 .s-header__content {
   max-width: var(--width-wider);
   height: var(--header-height);
   position: relative;
 }
 
 /* --------------------------------------------------------------------
   * ## logo
   * -------------------------------------------------------------------- */
 .s-header__logo {
   z-index: 101;
   transform: translate(0, -50%);
   position: absolute;
   top: 50%;
   left: var(--gutter);
 }
 
 .s-header__logo a {
   display: block;
   margin: 0;
   padding: 0;
   outline: 0;
   border: none;
 }
 
 .s-header__logo img {
   width: var(--logo-width);
   margin: 0;
   vertical-align: bottom;
 }
 
 /* --------------------------------------------------------------------
   * ## header social
   * -------------------------------------------------------------------- */
 .s-header__social {
   list-style: none;
   display: flex;
   margin: 0;
   transform: translate(0, -50%);
   position: absolute;
   top: 50%;
   right: calc(var(--gutter) / 2);
 }
 
 .s-header__social li {
   padding-left: 0;
   margin-right: 1.4rem;
   line-height: 1;
 }
 
 .s-header__social li:last-child {
   margin-right: 0;
 }
 
 .s-header__social svg {
   height: var(--vspace-0_875);
   width: var(--vspace-0_875);
 }
 
 .s-header__social svg path {
   fill: white;
 }
 
 .s-header__social svg path:hover,
 .s-header__social svg path:active {
   fill: #fbb736;
   cursor: pointer !important;
 }
 
 /* ------------------------------------------------------------------- 
   * responsive:
   * header
   * ------------------------------------------------------------------- */
 @media screen and (max-width: 800px) {
   .s-header {
     --logo-width: 8rem;
     top: var(--vspace-0_5);
   }
 
   .s-header__social {
     top: calc(50% - var(--vspace-0_25));
   }
 
   .s-header__social li {
     margin-right: 1rem;
   }
 
   .s-header__social svg {
     height: var(--vspace-0_75);
     width: var(--vspace-0_75);
   }
 }
 
 @media screen and (max-width: 600px) {
   .s-header {
     --logo-width: 7.2rem;
   }
 
   .s-header__logo {
     left: calc(6vw + var(--gutter));
   }
 
   .s-header__social {
     right: calc(6vw + 0.8rem);
   }
 }
 
 @media screen and (max-width: 500px) {
   .s-header {
     top: 0;
   }
 }
 
 @media screen and (max-width: 400px) {
   .s-header {
     --logo-width: 6rem;
   }
 
   .s-header__logo {
     left: calc(6vw + 0.4rem);
   }
 
   .s-header__social {
     right: calc(6vw + 0.4rem);
   }
 
   .s-header__social li {
     margin-right: 0.8rem;
   }
 }
 
 /* ===================================================================
   * # INTRO
   *
   * 
   * ------------------------------------------------------------------- */
 .s-intro {
   width: 100%;
   height: 100vh;
   min-height: calc(25.5 * var(--space));
   overflow: hidden;
   position: relative;
   background-color: var(--color-body);
 }
 
 .s-intro a {
   border: none;
 }
 
 .theme-particles .s-intro {
   background-color: var(--color-gray-15);
 }
 
 .theme-particles .s-intro .s-intro__content {
   pointer-events: none;
 }
 
 .theme-particles .s-intro .s-intro__content-bottom,
 .theme-particles .s-intro .s-intro__scroll {
   pointer-events: auto;
 }
 
 /* --------------------------------------------------------------------
   * ## intro background
   * -------------------------------------------------------------------- */
 .s-intro__bg {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   background-image: url(../images/bg-static.jpg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
 }
 
 .s-intro__bg::before {
   display: block;
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   background: black;
   pointer-events: none;
   opacity: 0.8;
 }
 
 .s-intro__bg::after {
   display: block;
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.08);
   pointer-events: none;
   opacity: 0.9;
 }
 
 /* --------------------------------------------------------------------
   * ## intro slider
   * -------------------------------------------------------------------- */
 .s-intro__slider {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
 }
 
 .s-intro__slide {
   background-repeat: no-repeat;
   background-position: 50% 50%;
   background-size: cover;
   position: relative;
 }
 
 .s-intro__slide::before {
   display: block;
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   background: black;
   pointer-events: none;
   opacity: 0.9;
 }
 
 /*     background     : linear-gradient(90deg, black 10%, rgba(0, 0, 0, 0) 100%); */
 .s-intro__slide::after {
   display: block;
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.09);
   pointer-events: none;
   opacity: 0.9;
 }
 
 .s-intro__slide.bg-opacity-10::before {
   opacity: 0.1;
 }
 
 .s-intro__slide.bg-opacity-20::before {
   opacity: 0.2;
 }
 
 .s-intro__slide.bg-opacity-30::before {
   opacity: 0.3;
 }
 
 .s-intro__slide.bg-opacity-40::before {
   opacity: 0.4;
 }
 
 .s-intro__slide.bg-opacity-50::before {
   opacity: 0.5;
 }
 
 .s-intro__slide.bg-opacity-60::before {
   opacity: 0.6;
 }
 
 .s-intro__slide.bg-opacity-70::before {
   opacity: 0.7;
 }
 
 .s-intro__slide.bg-opacity-80::before {
   opacity: 0.8;
 }
 
 .s-intro__slide.bg-opacity-90::before {
   opacity: 0.9;
 }
 
 /* -------------------------------------------------------------------
   * ## intro particles
   * ------------------------------------------------------------------- */
 .s-intro__particles {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   background-color: transparent;
   padding: 0;
   margin: 0;
   opacity: 0.2;
 }
 
 .s-intro__particles canvas {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
 }
 
 /* --------------------------------------------------------------------
   * ## intro content
   * -------------------------------------------------------------------- */
 .s-intro__content {
   z-index: 1;
   max-width: var(--width-wider);
   align-items: flex-end;
   height: 100vh;
   min-height: calc(25.5 * var(--space));
   padding-top: 20vh;
   padding-bottom: 8.8rem;
   position: relative;
 }
 
 .s-intro__content-bottom {
   max-width: 600px;
   font-weight: 300;
   color: rgba(255, 255, 255, 0.7);
   margin-top: var(--vspace-1);
 }
 
 .s-intro__content-title {
   font-size: var(--text-xxl);
   font-weight: 400;
   line-height: var(--vspace-1_5);
   color: white;
   margin-top: 0;
   margin-bottom: var(--vspace-0_25);
 }
 
 /* --------------------------------------------------------------------
   * ## intro counter
   * -------------------------------------------------------------------- */
 .s-intro .counter {
   display: flex;
   flex-flow: row wrap;
 }
 
 .s-intro .counter__time {
   display: flex;
   align-items: flex-start;
   font-weight: 700;
   font-size: 13.2rem;
   line-height: 1;
   color: white;
   margin-right: var(--vspace-0_5);
   margin-bottom: var(--vspace-0_5);
 }
 
 .s-intro .counter__time span:first-child {
   letter-spacing: -0.03em;
 }
 
 .s-intro .counter__time span:last-child {
   font-weight: 400;
   font-size: 0.15em;
   color: rgba(255, 255, 255, 0.35);
   transform: translate(0.2em, 0.8em);
 }
 
 /* --------------------------------------------------------------------
   * ## scroll icon
   * -------------------------------------------------------------------- */
 .s-intro__scroll {
   width: 18rem;
   height: 8.8rem;
   padding-right: 3rem;
   border-right: 1px dashed rgba(255, 255, 255, 0.3);
   text-align: right;
   position: absolute;
   bottom: 0;
   right: var(--gutter);
 }
 
 .s-intro__scroll .scroll-text {
   font-family: var(--font-1);
   font-weight: 300;
   font-size: var(--text-sm);
   color: white;
   margin-top: var(--vspace-0_625);
 }
 
 .s-intro__scroll .end-top {
   background-color: white;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   position: absolute;
   top: -6px;
   right: -4px;
 }
 
 .s-intro__scroll .mouse {
   z-index: 2;
   height: 3.8rem;
   width: 2.5rem;
   border: 3px solid white;
   border-radius: 12px;
   display: block;
   text-align: center;
   position: absolute;
   right: -1.3rem;
   top: 1.4rem;
   -webkit-animation: vertical 3s ease infinite;
   animation: vertical 3s ease infinite;
 }
 
 .s-intro__scroll .mouse::before {
   content: "";
   display: block;
   height: 5px;
   width: 3px;
   background-color: white;
   border-radius: 2px;
   margin-left: -1.5px;
   position: absolute;
   top: 6px;
   left: 50%;
 }
 
 /* fade in 
   */
 @-webkit-keyframes vertical {
   0%,
   60%,
   80%,
   100% {
     -webkit-transform: translateY(0);
     transform: translateY(0);
   }
 
   20% {
     -webkit-transform: translateY(-5px);
     transform: translateY(-5px);
   }
 
   40% {
     -webkit-transform: translateY(20px);
     transform: translateY(20px);
   }
 }
 
 @keyframes vertical {
   0%,
   60%,
   80%,
   100% {
     -webkit-transform: translateY(0);
     transform: translateY(0);
   }
 
   20% {
     -webkit-transform: translateY(-5px);
     transform: translateY(-5px);
   }
 
   40% {
     -webkit-transform: translateY(20px);
     transform: translateY(20px);
   }
 }
 
 /* --------------------------------------------------------------------
   * ## intro transitions
   * -------------------------------------------------------------------- */
 .s-header__content,
 .s-intro .counter,
 .s-intro__content-bottom,
 .s-intro__scroll {
   transition-timing-function: cubic-bezier(0.28, 0.12, 0.22, 1);
   transition-duration: 0.6s;
   transition-delay: 0s;
   opacity: 0;
 }
 
 .s-header__content {
   transition-property: opacity, transform;
   transform: translate(0, -100%);
 }
 
 .s-intro .counter,
 .s-intro__content-bottom {
   transition-property: opacity, transform;
   transform: translate(0, 100%);
 }
 
 .s-intro__scroll {
   transition-property: opacity, bottom;
   bottom: -250px;
 }
 
 .no-js .s-header__content,
 .no-js .s-intro .counter,
 .no-js .s-intro__content-bottom,
 .no-js .s-intro__scroll,
 .ss-show .s-header__content,
 .ss-show .s-intro .counter,
 .ss-show .s-intro__content-bottom,
 .ss-show .s-intro__scroll {
   opacity: 1;
 }
 
 .no-js .s-header__content,
 .no-js .s-intro .counter,
 .no-js .s-intro__content-bottom,
 .ss-show .s-header__content,
 .ss-show .s-intro .counter,
 .ss-show .s-intro__content-bottom {
   transform: translate(0, 0);
 }
 
 .no-js .s-intro .counter,
 .ss-show .s-intro .counter {
   transition-delay: 0.3s;
 }
 
 .no-js .s-intro__content-bottom,
 .ss-show .s-intro__content-bottom {
   transition-delay: 0.6s;
 }
 
 .no-js .s-intro__scroll,
 .ss-show .s-intro__scroll {
   transition-delay: 0.9s;
   bottom: 0;
 }
 
 /* ------------------------------------------------------------------- 
   * responsive:
   * intro
   * ------------------------------------------------------------------- */
 @media screen and (max-width: 1400px) {
   .s-intro .counter__time {
     font-size: 12.4rem;
   }
 }
 
 @media screen and (max-width: 1200px) {
   .s-intro .counter__time {
     font-size: 11.2rem;
   }
 
   .s-intro__content-title {
     font-size: var(--text-xl);
     line-height: var(--vspace-1_25);
   }
 }
 
 @media screen and (max-width: 800px) {
   .s-intro .counter__time {
     font-size: 10.4rem;
   }
 }
 
 @media screen and (max-width: 600px) {
   .s-intro__content {
     padding-bottom: 8rem;
   }
 
   .s-intro .counter__time {
     font-size: 9.6rem;
   }
 
   .s-intro__content-bottom {
     max-width: 400px;
   }
 
   .s-intro__content-bottom br {
     display: none;
   }
 
   .s-intro__content-title {
     font-size: var(--text-lg);
     line-height: var(--vspace-1);
   }
 
   .s-intro__scroll {
     right: 4.8rem;
   }
 }
 
 @media screen and (max-width: 500px) {
   .s-intro .counter__time {
     font-size: 7.2rem;
   }
 }
 
 @media screen and (max-width: 400px) {
   .s-intro .counter__time {
     font-size: 6.6rem;
   }
 
   .s-intro__content-title {
     font-size: var(--text-md);
     line-height: var(--vspace-0_875);
   }
 
   .s-intro__scroll {
     right: 4rem;
   }
 }
 
 /* SECTION: About */
 .s-about {
   background-color: #eeeeee;
 }
 
 /* SECTION: Services */
 .s-services {
   background-color: #ffffff;
 }
 
 /* SECTION: Contact */
 .s-contact {
   background-color: #eeeeee;
 }
 
 /* ===================================================================
   * # INFO
   *
   *
   * ------------------------------------------------------------------- */
 .s-info {
   padding-top: var(--vspace-5);
   padding-bottom: var(--vspace-4);
   width: 100%;
   position: relative;
 }
 
 .s-info .row {
   max-width: 1020px;
 }
 
 .s-info h2 {
   margin-top: 0;
   margin-bottom: var(--vspace-1_25);
 }
 
 /* --------------------------------------------------------------------
   * ## info bg
   * -------------------------------------------------------------------- */
 .s-info__bg {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   background-image: url(../images/info-bg-k.jpg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   opacity: 0.4;
 }
 
 /* --------------------------------------------------------------------
   * ## tabs
   * -------------------------------------------------------------------- */
 .tab-nav {
   --easing: cubic-bezier(0.28, 0.12, 0.22, 1);
   font-family: var(--font-1);
   font-weight: 400;
   font-size: var(--text-xs);
   text-transform: uppercase;
   letter-spacing: 0.4em;
   text-align: center;
   margin-bottom: var(--vspace-2);
 }
 
 .tab-nav__list {
   list-style: none;
   display: flex;
   border-bottom: 1px solid var(--color-text);
   overflow: hidden;
   margin: 0;
 }
 
 .tab-nav__list li {
   flex: 1;
   padding-left: 0;
   background-color: rgba(255, 255, 255, 0.3);
   border-width: 1px;
   border-style: solid solid none solid;
   border-color: var(--color-text);
   border-radius: 5px 5px 0 0;
   transition: all 0.6s var(--easing);
   margin: 0 0.2rem;
   overflow: hidden;
   position: relative;
 }
 
 .tab-nav__list li[data-tab-active] {
   background-color: var(--color-text);
   border-color: var(--color-text);
 }
 
 .tab-nav__list a {
   display: block;
   padding: 1.4rem 2.8rem;
   color: var(--color-text);
   transition: color 0.6s var(--easing);
 }
 
 .tab-nav__list a[data-tab-active] {
   color: white;
   outline: 0;
 }
 
 .tab-content {
   position: relative;
 }
 
 .tab-content__item {
   opacity: 0;
   visibility: hidden;
   height: 0;
   overflow: hidden;
   position: absolute;
   top: 4rem;
 }
 
 .tab-content__item[data-tab-active] {
   opacity: 1;
   visibility: visible;
   height: auto;
   transition-property: opacity, visibility, top;
   transition-duration: 0.6s;
   transition-timing-function: var(--easing);
   transition-delay: 0s;
   position: relative;
   top: 0;
 }
 
 /* ------------------------------------------------------------------- 
   * ## services 
   * ------------------------------------------------------------------- */
 .services-list {
   margin-top: var(--vspace-1_5);
 }
 
 .services-list h4 {
   margin-top: 0;
 }
 
 .services-list__item {
   margin-bottom: var(--vspace-0_5);
 }
 
 .services-list__item-icon svg {
   height: var(--vspace-1_25);
   width: var(--vspace-1_25);
 }
 
 .services-list__item-icon svg path {
   fill: var(--color-1);
 }
 
 /* ------------------------------------------------------------------- 
   * ## MailChimp form
   * ------------------------------------------------------------------- */
 .mc-form input[type="email"] {
   background-color: white;
   margin-bottom: var(--vspace-0_5);
   border: 1px solid var(--color-gray-3);
 }
 
 .mc-form input[type="email"]:focus {
   box-shadow: 0 0 5px var(--color-1);
   border: 1px solid var(--color-1);
 }
 
 .mc-form .mc-status {
   font-size: var(--text-sm);
   font-weight: 500;
   line-height: var(--vspace-0_75);
 }
 
 /* ------------------------------------------------------------------- 
   * responsive:
   * info
   * ------------------------------------------------------------------- */
 @media screen and (max-width: 700px) {
   .s-info {
     padding-top: var(--vspace-3);
   }
 
   .tab-nav {
     font-weight: 500;
   }
 
   .tab-nav__list {
     display: block;
     border: 1px solid var(--color-text);
     border-radius: var(--border-radius);
   }
 
   .tab-nav__list li {
     margin: 0;
     border-radius: 0;
     border-style: none none solid none;
   }
 
   .tab-nav__list li:last-child {
     border-bottom: none;
   }
 
   .tab-nav__list a {
     padding: var(--vspace-0_375) 2.8rem;
   }
 }
 
 @media screen and (max-width: 400px) {
   .s-info h2 {
     font-size: var(--text-xl);
     line-height: var(--vspace-1_25);
   }
 }
 
 /* ===================================================================
   * # FOOTER
   *
   *
   * ------------------------------------------------------------------- */
 .s-footer {
   background-color: var(--color-gray-12);
   padding-top: var(--vspace-3);
   padding-bottom: var(--vspace-2);
   font-weight: 300;
   font-size: calc(var(--text-size) * 0.9444);
   line-height: calc(0.9375 * var(--space));
   color: rgba(255, 255, 255, 0.3);
 }
 
 .s-footer > .row {
   max-width: 1020px;
 }
 
 .s-footer a {
   color: rgba(255, 255, 255, 0.3);
 }
 
 .s-footer a:focus,
 .s-footer a:hover {
   color: white;
 }
 
 .s-footer .desc {
   padding-right: var(--vspace-0_375);
 }
 
 .s-footer h4 {
   margin-top: 0;
   margin-bottom: var(--vspace-1_25);
   color: white;
 }
 
 .s-footer p,
 .s-footer ul {
   margin-bottom: calc(0.9375 * var(--space));
 }
 
 .s-footer strong {
   font-weight: 400;
   color: white;
 }
 
 .s-footer__bottom {
   margin-top: var(--vspace-1);
   padding-top: var(--vspace-0_5);
   border-top: 1px solid rgba(255, 255, 255, 0.05);
   position: relative;
 }
 
 .s-footer__bottom a {
   color: white;
 }
 
 /* --------------------------------------------------------------------
   * ## footer social
   * -------------------------------------------------------------------- */
 .s-footer__social {
   list-style: none;
   display: flex;
   margin: 0;
 }
 
 .s-footer__social li {
   padding-left: 0;
   margin-right: 1.2rem;
   line-height: 1;
 }
 
 .s-footer__social li:last-child {
   margin-right: 0;
 }
 
 .s-footer__social svg {
   height: var(--vspace-0_75);
   width: var(--vspace-0_75);
 }
 
 .s-footer__social svg path {
   fill: white;
 }
 
 .s-footer__social svg path:hover,
 .s-footer__social svg path:active {
   fill: #fbb736;
   cursor: pointer !important;
 }
 
 /* ------------------------------------------------------------------- 
   * ## go top
   * ------------------------------------------------------------------- */
 .ss-go-top {
   z-index: 2;
   position: absolute;
   top: -2.8rem;
   right: 0;
 }
 
 .ss-go-top svg {
   height: 2rem;
   width: 2rem;
 }
 
 .ss-go-top svg path {
   fill: white;
   transition: all 0.3s ease-in-out;
 }
 
 .ss-go-top a {
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   border: 0 none;
   height: 5.6rem;
   width: 5.6rem;
   background-color: var(--color-gray-12);
   border-radius: 50%;
   border: 0.2rem solid white;
   transition: all 0.3s;
   position: relative;
 }
 
 .ss-go-top a:focus,
 .ss-go-top a:hover {
   background-color: var(--color-1);
   border-color: var(--color-1);
 }
 
 /* --------------------------------------------------------------------
   * ## copyright
   * -------------------------------------------------------------------- */
 .ss-copyright {
   font-size: var(--text-xs);
   line-height: var(--vspace-0_75);
   position: relative;
 }
 
 .ss-copyright span {
   display: inline-block;
 }
 
 .ss-copyright span::after {
   content: "|";
   display: inline-block;
   padding: 0 0.8rem 0 1rem;
   color: rgba(255, 255, 255, 0.2);
 }
 
 .ss-copyright span:last-child::after {
   display: none;
 }
 
 /* ------------------------------------------------------------------- 
   * responsive:
   * footer
   * ------------------------------------------------------------------- */
 @media screen and (max-width: 800px) {
   .s-footer .desc {
     padding-right: 0;
   }
 }
 
 @media screen and (max-width: 700px) {
   .s-footer h4 {
     margin-bottom: var(--vspace-0_5);
   }
 
   .s-footer__info {
     margin-bottom: var(--vspace-1_25);
   }
 }
 
 @media screen and (max-width: 600px) {
   .s-footer {
     padding-bottom: var(--vspace-1);
   }
 
   .ss-go-top {
     right: 2.8rem;
   }
 
   .ss-copyright span {
     display: block;
   }
 
   .ss-copyright span::after {
     display: none;
   }
 }
 
 @media screen and (max-width: 400px) {
   .ss-go-top {
     top: -2.4rem;
     right: 2rem;
   }
 
   .ss-go-top svg {
     height: 1.8rem;
     width: 1.8rem;
   }
 
   .ss-go-top a {
     height: 4.8rem;
     width: 4.8rem;
   }
 }