/* ------------------------------------------------------------------- 
 * ## fonts 
 * ------------------------------------------------------------------- */
 @import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Castoro:ital@0;1&display=swap");

 :root {
     --font-1: "Roboto Flex", sans-serif;
     --font-2: "Castoro", serif;
     --font-mono: Consolas, "Andale Mono", Courier, "Courier New", monospace;
 }
 
 /* ------------------------------------------------------------------- 
   * ## colors
   * ------------------------------------------------------------------- */
 :root {
 
     --color-1: hsla(183, 22%, 48%, 1);
     --color-2: hsla(336, 13%, 16%, 1);
 
     /* theme color variations
       */
     --color-1-lighter: hsla(183, 22%, 68%, 1);
     --color-1-light: hsla(183, 22%, 58%, 1);
     --color-1-dark: hsla(183, 22%, 38%, 1);
     --color-1-darker: hsla(183, 22%, 28%, 1);
 
     --color-2-lighter: hsla(336, 13%, 36%, 1);
     --color-2-light: hsla(336, 13%, 26%, 1);
     --color-2-dark: hsla(336, 13%, 10%, 1);
     --color-2-darker: hsla(336, 13%, 5%, 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: #0d0f0f;
     --color-gray-18: #1b1e1e;
     --color-gray-17: #282d2e;
     --color-gray-16: #363c3d;
     --color-gray-15: #444b4c;
     --color-gray-14: #515a5b;
     --color-gray-13: #5f696a;
     --color-gray-12: #6c787a;
     --color-gray-11: #7a8789;
     --color-gray-10: #879698;
     --color-gray-9: #93a1a2;
     --color-gray-8: #9fabad;
     --color-gray-7: #abb6b7;
     --color-gray-6: #b7c0c1;
     --color-gray-5: #c3cbcc;
     --color-gray-4: #cfd5d6;
     --color-gray-3: #dbe0e0;
     --color-gray-2: #e7eaea;
     --color-gray-1: #f3f5f5;
     --color-white: #ffffff;
 
     /* text
       */
     --color-text: var(--color-gray-17);
     --color-text-dark: var(--color-gray-19);
     --color-text-light: var(--color-gray-12);
     --color-placeholder: var(--color-gray-12);
 
     /* buttons
       */
     --color-btn: var(--color-gray-4);
     --color-btn-text: var(--color-text);
     --color-btn-hover: var(--color-gray-5);
     --color-btn-hover-text: var(--color-text);
     --color-btn-primary: var(--color-1-dark);
     --color-btn-primary-text: var(--color-white);
     --color-btn-primary-hover: var(--color-text-dark);
     --color-btn-primary-hover-text: var(--color-white);
     --color-btn-stroke: var(--color-1-dark);
     --color-btn-stroke-text: var(--color-1-darker);
     --color-btn-stroke-hover: var(--color-text-dark);
     --color-btn-stroke-hover-text: var(--color-white);
 
     /* preloader
       */
     --color-preloader-bg: #CFE6E8;
     --color-loader: var(--color-text-dark);
     --color-loader-light: var(--color-1-lighter);
 
     /* others
       */
     --color-body: #CFE6E8;
     --color-border: rgba(0, 0, 0, .08);
     --border-radius: 3px;
 }
 
 /* ------------------------------------------------------------------- 
   * ## spacing and typescale
   * ------------------------------------------------------------------- */
 :root {
 
     /* spacing
       * base font size: 19px 
       * vertical space unit : 32px
       */
     --base-size: 62.5%;
     --multiplier: 1;
     --base-font-size: calc(1.9rem * 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: 19px
       * -------------------------------------------------------
       *
       * --text-display-3 = (81.70px)
       * --text-display-2 = (68.08px)
       * --text-display-1 = (56.73px)
       * --text-xxxl      = (47.28px)
       * --text-xxl       = (39.40px)
       * --text-xl        = (32.83px)
       * --text-lg        = (27.36px)
       * --text-md        = (22.80px)
       * --text-size      = (19.00px) BASE
       * --text-sm        = (15.83px)
       * --text-xs        = (13.19px)
       *
       * ---------------------------------------------------------
       */
     --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-md: calc(var(--text-sm) * 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: .875;
     }
 }
 
 /* ------------------------------------------------------------------- 
   * ## 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: 2rem;
 }
 
 /* on medium screen devices
   */
 @media screen and (max-width: 1200px) {
     :root {
         --gutter: 1.8rem;
     }
 }
 
 /* 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;
 }
 
 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: 900px) {
 
     .stack-on-900,
     .block-stack-on-900>.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-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;
 }
 
 .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: 19px
   * -------------------------------------------------------------------
   *
   * --text-display-3 = (81.70px)
   * --text-display-2 = (68.08px)
   * --text-display-1 = (56.73px)
   * --text-xxxl      = (47.28px)
   * --text-xxl       = (39.40px)
   * --text-xl        = (32.83px)
   * --text-lg        = (27.36px)
   * --text-md        = (22.80px)
   * --text-size      = (19.00px) BASE
   * --text-sm        = (15.83px)
   * --text-xs        = (13.19px)
   *
   * -------------------------------------------------------------------- */
 
 /* --------------------------------------------------------------------
   * ## 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-dark);
     transition: all 0.3s ease-in-out;
 }
 
 a:focus,
 a:hover,
 a:active {
     color: var(--color-2-lighter);
 }
 
 a:hover,
 a:active {
     outline: 0;
 }
 
 /* headings
   */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 .h1,
 .h2,
 .h3,
 .h4,
 .h5,
 .h6 {
     font-family: var(--font-2);
     font-weight: 400;
     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_75);
 }
 
 h5,
 .h5,
 h6,
 .h6 {
     margin-top: var(--vspace-1_75);
     margin-bottom: var(--vspace-0_5);
 }
 
 h1,
 .h1 {
     font-size: var(--text-display-2);
     line-height: calc(2.25 * var(--space));
     letter-spacing: -.01em;
 }
 
 @media screen and (max-width: 500px) {
 
     h1,
     .h1 {
         font-size: var(--text-display-1);
         line-height: calc(1.875 * var(--space));
     }
 }
 
 h2,
 .h2 {
     font-size: var(--text-xxl);
     line-height: calc(1.375 * var(--space));
 }
 
 h3,
 .h3 {
     font-size: var(--text-xl);
     line-height: calc(1.125 * var(--space));
 }
 
 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-weight: 600;
     font-size: var(--text-sm);
     line-height: var(--vspace-0_75);
     text-transform: uppercase;
     letter-spacing: .3rem;
 }
 
 /* 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: 80%;
     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 var(--color-text-dark);
     position: relative;
 }
 
 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;
 }
 
 @media screen and (max-width: 500px) {
     blockquote {
         padding: var(--vspace-0_75) var(--vspace-0_75);
     }
 
     blockquote p {
         font-size: var(--text-md);
         line-height: var(--vspace-1);
     }
 }
 
 /* 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-3);
     overflow-x: auto;
 }
 
 code {
     font-size: var(--text-sm);
     line-height: 1.6rem;
     margin: 0 .2rem;
     padding: calc(((var(--vspace-1) - 1.6rem) / 2) - .1rem) calc(.8rem - .1rem);
     white-space: nowrap;
     background: var(--color-gray-3);
     border: 1px solid var(--color-gray-5);
     color: var(--color-text);
     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: .1em;
 }
 
 abbr[title],
 dfn[title] {
     border-bottom: 1px dotted;
     cursor: help;
     text-decoration: none;
 }
 
 mark {
     background: var(--color-1-lighter);
     color: var(--color-text);
 }
 
 /* horizontal rule
   */
 hr {
     border: solid var(--color-border);
     border-width: .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: .3em;
 }
 
 /* --------------------------------------------------------------------
   * ## additional typography & helper classes
   * -------------------------------------------------------------------- */
 .lead,
 .attention-getter {
     font-family: var(--font-1);
     font-weight: 400;
     font-size: var(--text-lg);
     line-height: 3.0rem;
     color: var(--color-text-dark);
 }
 
 @media screen and (max-width: 900px) {
 
     .lead,
     .attention-getter {
         font-size: calc(var(--text-size) * 1.2636);
     }
 }
 
 @media screen and (max-width: 500px) {
 
     .lead,
     .attention-getter {
         font-size: var(--text-md);
     }
 }
 
 @media screen and (max-width: 460px) {
 
     .lead,
     .attention-getter {
         font-size: 1.9rem;
     }
 }
 
 .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: 700;
     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: .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 .8rem;
     position: relative;
 }
 
 ul.disc li::before {
     content: "";
     display: inline-block;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--color-1-dark);
     position: absolute;
     left: -.9em;
     top: 11px;
     vertical-align: middle;
 }
 
 dt {
     margin: 0;
     color: var(--color-1-dark);
 }
 
 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 class="loader line"></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;
     overflow: hidden;
 }
 
 .no-js #preloader {
     display: none;
 }
 
 #loader {
     background-color: var(--color-loader-light);
 }
 
 @-webkit-keyframes line {
     from {
         background-position: -60px 0;
     }
 
     to {
         background-position: 60px 0;
     }
 }
 
 @keyframes line {
     from {
         background-position: -60px 0;
     }
 
     to {
         background-position: 60px 0;
     }
 }
 
 .line:before {
     -webkit-animation: line .75s infinite alternate ease-in-out;
     animation: line .75s infinite alternate ease-in-out;
     background: -webkit-gradient(linear, left top, right top, from(var(--color-loader)), to(var(--color-loader)));
     background: linear-gradient(90deg, var(--color-loader), var(--color-loader));
     background-repeat: no-repeat;
     background-size: 80px 4px;
     content: '';
     display: block;
     height: 4px;
     width: 80px;
 }
 
 
 /* ===================================================================
   * # 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);
     display: block;
     height: var(--input-height);
     padding: var(--input-vpadding) 0 calc(var(--input-vpadding) - 1px);
     border: 0;
     outline: 0;
     color: var(--color-text-light);
     font-family: var(--font-1);
     font-size: calc(var(--text-size) * 0.7895);
     line-height: var(--input-line-height);
     max-width: 100%;
     background: transparent;
     border-bottom: 1px solid var(--color-1-lighter);
     transition: all .3s ease-in-out;
 }
 
 .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;
     line-height: var(--vspace-1);
 }
 
 .ss-custom-select select option {
     padding-left: 2rem;
     padding-right: 2rem;
     background-color: var(--color-body);
 }
 
 .ss-custom-select select::-ms-expand {
     display: none;
 }
 
 .ss-custom-select::after {
     border-bottom: 1px solid #141414;
     border-right: 1px solid #141414;
     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-text);
     border-bottom: 1px solid var(--color-text-dark);
 }
 
 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: 600;
     font-size: var(--text-xs);
     text-transform: uppercase;
     letter-spacing: .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 .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) + .8rem);
 }
 
 .btn--large,
 button.btn--large {
     --btn-height: calc(var(--vspace-btn) + 1.6rem);
 }
 
 .btn--stroke,
 button.btn--stroke {
     background: transparent !important;
     font-weight: 700;
     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) + .4rem);
     margin: 0 auto var(--vspace-1);
     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: .2rem 1.2rem;
     height: var(--pgn-num-height);
     margin: .2rem .2rem;
     color: var(--color-text-dark);
     border-radius: var(--border-radius);
     transition: all, .3s, ease-in-out;
 }
 
 .pgn__num:focus,
 .pgn__num:hover {
     background: var(--color-text-dark);
     color: var(--color-white);
 }
 
 .pgn .current,
 .pgn .current:focus,
 .pgn .current:hover {
     background: var(--color-text-dark);
     color: var(--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, .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: var(--color-text-dark);
 }
 
 .pgn__prev svg,
 .pgn__next svg {
     height: 2.4rem;
     width: 2.4rem;
     transition: all, .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 .5s;
 }
 
 /* ------------------------------------------------------------------- 
   * ## skillbars 
   * ------------------------------------------------------------------- */
 .skill-bars {
     --bar-padding: 4rem;
     --bar-height: 0.4rem;
     list-style: none;
     margin: var(--vspace-2) 0 var(--vspace-1);
     counter-reset: ctr;
 }
 
 .skill-bars li {
     height: var(--bar-height);
     background: transparent;
     padding-left: var(--bar-padding);
     margin-bottom: var(--vspace-2);
     position: relative;
 }
 
 .skill-bars li::before {
     display: block;
     content: counter(ctr, decimal-leading-zero) ".";
     counter-increment: ctr;
     font-family: var(--font-1);
     font-size: var(--text-sm);
     font-weight: 400;
     line-height: var(--vspace-1_5);
     letter-spacing: .1em;
     color: var(--color-1);
     position: absolute;
     top: calc(var(--vspace-1_5) * -1);
     left: 0;
 }
 
 .skill-bars li strong {
     font-family: var(--font-1);
     font-weight: 600;
     font-size: calc(var(--text-size) * 0.7895);
     line-height: var(--vspace-1_5);
     color: var(--color-text-dark);
     text-transform: uppercase;
     letter-spacing: .2em;
     position: absolute;
     top: calc(var(--vspace-1_5) * -1);
     left: var(--bar-padding);
 }
 
 .skill-bars li .progress {
     background: var(--color-1-lighter);
     position: relative;
     height: 100%;
     overflow: hidden;
     position: relative;
 }
 
 .skill-bars li .progress::before {
     content: "";
     display: block;
     height: 100%;
     background-color: var(--color-text-dark);
 }
 
 .skill-bars li .percent5::before {
     width: 5%;
 }
 
 .skill-bars li .percent10::before {
     width: 10%;
 }
 
 .skill-bars li .percent15::before {
     width: 15%;
 }
 
 .skill-bars li .percent20::before {
     width: 20%;
 }
 
 .skill-bars li .percent25::before {
     width: 25%;
 }
 
 .skill-bars li .percent30::before {
     width: 30%;
 }
 
 .skill-bars li .percent35::before {
     width: 35%;
 }
 
 .skill-bars li .percent40::before {
     width: 40%;
 }
 
 .skill-bars li .percent45::before {
     width: 45%;
 }
 
 .skill-bars li .percent50::before {
     width: 50%;
 }
 
 .skill-bars li .percent55::before {
     width: 55%;
 }
 
 .skill-bars li .percent60::before {
     width: 60%;
 }
 
 .skill-bars li .percent65::before {
     width: 65%;
 }
 
 .skill-bars li .percent70::before {
     width: 70%;
 }
 
 .skill-bars li .percent75::before {
     width: 75%;
 }
 
 .skill-bars li .percent80::before {
     width: 80%;
 }
 
 .skill-bars li .percent85::before {
     width: 85%;
 }
 
 .skill-bars li .percent90::before {
     width: 90%;
 }
 
 .skill-bars li .percent95::before {
     width: 95%;
 }
 
 .skill-bars li .percent100::before {
     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-dark);
 }
 
 .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);
 }
 
 .body-text-sm {
     font-size: calc(var(--text-size) * 0.8947);
     line-height: calc(0.9375 * var(--space));
 }
 
 [data-animate-el] {
     opacity: 0;
 }
 
 /* ------------------------------------------------------------------- 
   * ## theme-specific typography classes
   * ------------------------------------------------------------------- */
 .text-pretitle {
     font-family: var(--font-1);
     font-size: calc(var(--text-size) * 1.1053);
     font-weight: 300;
     line-height: var(--vspace-1);
     color: var(--color-1-dark);
     margin-top: 0;
     margin-bottom: var(--vspace-0_25);
     margin-left: .1em;
     position: relative;
 }
 
 .text-huge-title {
     --text-huge: 6.4rem;
     --text-multiplier: 1;
     font-family: var(--font-2);
     font-weight: 400;
     font-size: calc(var(--text-huge) * var(--text-multiplier));
     line-height: 1.0638;
     letter-spacing: -0.02em;
     color: var(--color-text-dark);
     margin-top: 0;
     text-align: center;
 }
 
 .text-subtitle {
     font-family: var(--font-1);
     font-size: var(--text-size);
     font-weight: 500;
     color: var(--color-text-dark);
     text-transform: uppercase;
     letter-spacing: .2em;
     margin-top: 0;
     margin-bottom: var(--vspace-0_5);
 }
 
 /* ------------------------------------------------------------------- 
   * ## 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%;
 }
 
 /* ------------------------------------------------------------------- 
   * ## swiper overrides
   * ------------------------------------------------------------------- */
 .swiper .swiper-pagination-bullets .swiper-pagination-bullet {
     margin: 0 1.2rem;
 }
 
 .swiper .swiper-pagination-bullet {
     width: 6px;
     height: 6px;
     background: rgba(0, 0, 0, 0.3);
     opacity: 1;
 }
 
 .swiper .swiper-pagination-bullet-active {
     background: var(--color-1);
     opacity: 1;
 }
 
 /* ------------------------------------------------------------------- 
   * responsive:
   * project-wide and shared styles
   * ------------------------------------------------------------------- */
 @media screen and (max-width: 900px) {
     .text-pretitle {
         font-size: calc(var(--text-size) * 1.0526);
     }
 
     .text-huge-title {
         --text-multiplier: .9;
     }
 }
 
 @media screen and (max-width: 800px) {
     .text-huge-title {
         --text-multiplier: .84;
     }
 }
 
 @media screen and (max-width: 700px) {
     .text-huge-title {
         --text-multiplier: .74;
     }
 }
 
 @media screen and (max-width: 600px) {
     .text-huge-title {
         --text-multiplier: .64;
     }
 }
 
 @media screen and (max-width: 500px) {
     .text-subtitle {
         font-size: var(--text-sm);
     }
 
     .text-huge-title {
         --text-multiplier: .58;
     }
 }
 
 @media screen and (max-width: 480px) {
     .text-huge-title {
         --text-multiplier: .54;
     }
 }
 
 @media screen and (max-width: 400px) {
     .text-huge-title {
         --text-multiplier: .45;
     }
 }
 
 
 /* ===================================================================
   * # PAGE WRAP
   *
   *
   * ------------------------------------------------------------------- */
 .s-pagewrap {
     --header-height: 10rem;
     display: flex;
     flex-direction: column;
     min-height: 100%;
     overflow: hidden;
     position: relative;
 }
 
 
 /* ===================================================================
   * # SITE HEADER
   *
   *
   * ------------------------------------------------------------------- */
 .s-header {
     --box-shadow: 0 1px 1px rgba(0, 0, 0, 0.01),
         0 2px 2px rgba(0, 0, 0, 0.01),
         0 6px 6px rgba(0, 0, 0, 0.01);
 
     z-index: 100;
     display: flex;
     height: var(--header-height);
     background-color: var(--color-body);
     width: 100%;
     transition: height 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
     position: absolute;
     top: 0;
     left: 0;
 }
 
 .s-header.sticky {
     --header-height: 8rem;
     border-bottom: 1px solid var(--color-border);
     box-shadow: var(--box-shadow);
     position: fixed;
 }
 
 .s-header__block {
     z-index: 101;
 }
 
 /* --------------------------------------------------------------------
   * ## branding
   * -------------------------------------------------------------------- */
 .s-header__branding {
     z-index: 2;
     font-family: var(--font-2);
     font-size: 3rem;
     line-height: 1;
     letter-spacing: -0.03em;
     transform: translateY(-50%);
     position: absolute;
     top: 50%;
     left: 3.6rem;
 }
 
 .s-header__branding .site-title {
     margin: 0;
     padding: 0;
 }
 
 .s-header__branding a {
     margin: 0;
     padding: 0;
     outline: 0;
     border: none;
     color: var(--color-text-dark);
 }
 
 /* --------------------------------------------------------------------
   * ## main navigation
   * -------------------------------------------------------------------- */
 .s-header__nav-wrap {
     justify-content: center;
     align-items: center;
 }
 
 .s-header__nav a {
     display: block;
     font-size: 2rem;
     font-weight: 400;
     line-height: var(--vspace-1);
     color: var(--color-text-dark);
     padding: 0 1.8rem;
     transition-property: color, background-color;
 }
 
 .s-header__nav a:focus,
 .s-header__nav a:hover {
     color: var(--color-1);
 }
 
 .s-header__nav ul {
     list-style: none;
     display: flex;
     flex-flow: row nowrap;
     margin: 0;
     padding: 0;
 }
 
 .s-header__nav li {
     padding-left: 0;
 }
 
 /* --------------------------------------------------------------------
   * ## header social
   * -------------------------------------------------------------------- */
 .s-header__social {
     list-style: none;
     display: flex;
     margin: 0;
     transform: translateY(-50%);
     position: absolute;
     top: calc(50% - .2rem);
     right: 3.6rem;
 }
 
 .s-header__social li {
     padding-left: 0;
     margin-right: 1rem;
     line-height: 1;
 }
 
 .s-header__social li:last-child {
     margin-right: 0;
 }
 
 .s-header__social svg {
     height: 2.8rem;
     width: 2.8rem;
 }
 
 .s-header__social svg path {
     fill: var(--color-text-dark);
 }
 
 /* --------------------------------------------------------------------
   * ## mobile menu toggle
   * -------------------------------------------------------------------- */
 .s-header__menu-toggle {
     display: none;
     width: 6.8rem;
     height: var(--header-height);
     position: absolute;
     top: 0;
     right: 1.6rem;
 }
 
 .s-header__menu-toggle span {
     display: block;
     background-color: var(--color-text-dark);
     width: 28px;
     height: 2px;
     margin-top: -1px;
     font: 0/0 a;
     text-shadow: none;
     color: transparent;
     transition: background-color 0.2s ease-in-out;
     position: absolute;
     right: 20px;
     top: 50%;
     bottom: auto;
     left: auto;
 }
 
 .s-header__menu-toggle span::before,
 .s-header__menu-toggle span::after {
     content: "";
     width: 100%;
     height: 100%;
     background-color: inherit;
     transition-duration: 0.2s, 0.2s;
     transition-delay: 0.2s, 0s;
     position: absolute;
     left: 0;
 }
 
 .s-header__menu-toggle span::before {
     top: -8px;
     transition-property: top, transform;
 }
 
 .s-header__menu-toggle span::after {
     bottom: -8px;
     transition-property: bottom, transform;
 }
 
 /* is clicked 
   */
 .s-header__menu-toggle.is-clicked span {
     background-color: rgba(255, 255, 255, 0);
 }
 
 .s-header__menu-toggle.is-clicked span::before,
 .s-header__menu-toggle.is-clicked span::after {
     background-color: var(--color-text-dark);
     transition-delay: 0s, 0.2s;
 }
 
 .s-header__menu-toggle.is-clicked span::before {
     top: 0;
     transform: rotate(45deg);
 }
 
 .s-header__menu-toggle.is-clicked span::after {
     bottom: 0;
     transform: rotate(-45deg);
 }
 
 /* ------------------------------------------------------------------- 
   * responsive:
   * site-header
   * ------------------------------------------------------------------- */
 @media screen and (max-width: 1200px) {
     .s-header__nav a {
         font-size: 1.9rem;
     }
 }
 
 @media screen and (max-width: 1000px) {
     .s-header__nav a {
         font-size: 1.8rem;
         padding: 0 1.4rem;
     }
 
     .s-header__social svg {
         height: 2.6rem;
         width: 2.6rem;
     }
 }
 
 @media screen and (max-width: 900px) {
     .s-header {
         --header-height: 8rem;
         display: block;
         background-color: transparent;
     }
 
     .s-header__block {
         width: 100%;
         height: var(--header-height);
         background-color: var(--color-body);
         border-bottom: 1px solid var(--color-border);
         box-shadow: var(--box-shadow);
     }
 
     .s-header__branding {
         top: calc(var(--header-height) / 2);
     }
 
     .s-header__nav-wrap {
         display: block;
         width: 100%;
         max-width: none;
         transform: scaleY(0);
         transform-origin: center top;
         padding: var(--vspace-2) 3.6rem var(--vspace-2);
         background-color: var(--color-body);
         border-bottom: 1px solid var(--color-border);
         box-shadow: var(--box-shadow);
     }
 
     .s-header__nav,
     .s-header__social {
         transform: translateY(-2rem);
         opacity: 0;
         visibility: hidden;
     }
 
     .s-header__nav {
         padding: 0 0 var(--vspace-1_25);
     }
 
     .s-header__nav a {
         font-family: var(--font-1);
         font-size: var(--text-lg);
         font-weight: 400;
         line-height: var(--vspace-1);
         padding: var(--vspace-0_375) 0;
     }
 
     .s-header__nav ul {
         display: block;
         background-color: transparent;
         text-align: left;
         margin: 0;
         border: none;
     }
 
     .s-header__nav ul li {
         display: block;
     }
 
     .s-header__social {
         position: static;
     }
 
     .s-header__menu-toggle {
         display: block;
     }
 
     .menu-is-open .s-header {
         height: auto;
     }
 
     .menu-is-open .s-header__block {
         box-shadow: none;
     }
 
     .menu-is-open .s-header__nav-wrap {
         transform: scaleY(1);
         transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
         transition-delay: 0s;
     }
 
     .menu-is-open .s-header__nav,
     .menu-is-open .s-header__social {
         transform: translateY(0);
         opacity: 1;
         visibility: visible;
         transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
         transition-delay: .4s;
     }
 }
 
 
 /* ===================================================================
   * # INTRO
   *
   *
   * ------------------------------------------------------------------- */
 
 .s-intro {
     margin: 0;
     padding-top: calc(3 * var(--space)) 0 0 0;
     width: 100vw;
     position: relative;
 }
 
 .s-intro .row {
     margin: 0;
     width: 100vw;
     padding-left: 0;
     padding-right: 0;
 }
 
 .s-intro__content {
     position: relative;
 }
 
 /* --------------------------------------------------------------------
   * ## intro text
   * -------------------------------------------------------------------- */
 .s-intro__text {
     z-index: 2;
     width: 100vw;
     text-align: center;
     position: absolute;
     top: calc(var(--vspace-5) * var(--multiplier));
     left: 0;
 }
 
 .s-intro__text h1 {
     --text-huge: 5.2rem;
     --text-multiplier: 1;
     font-family: var(--font-2);
     font-weight: 400;
     font-size: calc(var(--text-huge));
     line-height: 1.0638;
     letter-spacing: -0.02em;
     color: white;
     margin-top: 0;
     margin-left: 6vw;
     margin-right: 6vw;
     text-align: center;
     text-shadow: 1px 1px 3px var(--color-gray-15);
 }
 
 .s-intro__text h3 {
     font-family: var(--font-1);
     font-size: var(--text-xl);
     font-size: 2.6rem;
     font-weight: 400;
     line-height: 1.0998;
     letter-spacing: -.01em;
     margin-top: 0;
     margin-left: 6vw;
     margin-right: 6vw;
     color: white;
     text-shadow: 1px 1px 3px var(--color-gray-15);
 }
 
 .s-intro__text-huge {
     --text-huge-size: 24.6rem;
     font-size: var(--text-huge-size);
     line-height: 1;
     letter-spacing: -0.015em;
     margin-top: calc(var(--text-huge-size) / 2 * -1.2);
     margin-bottom: var(--vspace-1_25);
     color: white;
 }
 
 /* --------------------------------------------------------------------
   * ## intro bg
   * -------------------------------------------------------------------- */
 .s-intro__bg {
     aspect-ratio: 16/8;
     width: 100vw;
     background-color: var(--color-gray-4);
     background-image: url(../images/hy-front.jpg);

    @supports (background-image: url(../images/hy-front.webp)) {
        background-image: url(../images/hy-front.webp);
    }

     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     position: relative;
 }
 
 .s-intro__bg::after {
     display: block;
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100vw;
     height: auto;
     background: linear-gradient(180deg, black 5%, rgba(0, 0, 0, 0) 100%);
     pointer-events: none;
     opacity: .12;
 }
 
 /* ------------------------------------------------------------------- 
   * responsive:
   * intro
   * ------------------------------------------------------------------- */
 @media screen and (max-width: 1400px) {
     .s-intro__text-huge {
         --text-huge-size: 22rem;
     }
 }
 
 @media screen and (max-width: 1200px) {
     .s-intro__text-huge {
         --text-huge-size: 18vw;
     }
 }
 
 @media screen and (max-width: 1100px) {
     .s-intro__text {
         top: var(--vspace-1_5);
     }
 
     .s-intro__text h1 {
         font-size: 3.6rem;
     }
 
     .s-intro__text h3 {
         font-size: 2.8rem;
     }
 
     .s-intro {
         padding-top: calc(7 * var(--space));
     }
 }
 
 @media screen and (max-width: 1000px) {
     .s-intro__text {
         top: var(--vspace-1_5);
     }
 
     .s-intro__text h1 {
         font-size: 3.4rem;
     }
 
     .s-intro__text h3 {
         font-size: 2.6rem;
     }
 
     .s-intro {
         padding-top: calc(7 * var(--space));
     }
 }
 
 @media screen and (max-width: 900px) {
     .s-intro__text {
         top: var(--vspace-1_25);
     }
 
     .s-intro__text h1 {
         font-size: 3.2rem;
     }
 
     .s-intro__text h3 {
         font-size: 2.2rem;
     }
 
     .s-intro__text-huge {
         margin-bottom: var(--vspace-1);
     }
 }
 
 @media screen and (max-width: 800px) {
     .s-intro__text {
         top: var(--vspace-1_25);
     }
 
     .s-intro__text h1 {
         font-size: 2.6rem;
     }
 
     .s-intro__text h3 {
         font-size: 1.8rem;
     }
 
     .s-intro__text-huge {
         margin-bottom: var(--vspace-0_5);
     }
 }
 
 @media screen and (max-width: 600px) {
     .s-intro__text {
         top: var(--vspace-1);
     }
 
     .s-intro__text h1 {
         font-size: 2.4rem;
 
     }
 
     .s-intro__text h3 {
         font-size: 1.6rem;
     }
 
 
 }
 
 
 /* ===================================================================
   * # ABOUT
   *
   *
   * ------------------------------------------------------------------- */
 .s-about {
     --subtitle-line-height: var(--vspace-1_5);
     --timeline-left-padding: var(--vspace-1_75);
     --timeline-top-adjust: calc(var(--subtitle-line-height) / 2);
     --timeline-vertical-border-pos: 8px;
 
     padding-top: var(--vspace-3);
     padding-bottom: var(--vspace-1);
 }
 
 .s-about__block {
     margin-bottom: var(--vspace-1);
 }
 
 .s-about__timeline {
     padding-top: var(--vspace-1_5);
 }
 
 .s-about__timeline-section {
     position: relative;
     padding-bottom: var(--vspace-1_5);
 }
 
 .s-about__timeline-section::before {
     content: "";
     width: 1px;
     height: calc(100% - var(--timeline-top-adjust));
     background-color: var(--color-border);
     position: absolute;
     top: var(--timeline-top-adjust);
     left: calc(var(--timeline-vertical-border-pos) + var(--gutter));
 }
 
 .s-about .text-subtitle {
     padding-left: var(--timeline-left-padding);
     line-height: var(--subtitle-line-height);
     margin-bottom: var(--vspace-0_25);
     position: relative;
 }
 
 .s-about .text-subtitle::before {
     content: "";
     display: block;
     height: 1px;
     width: 3.2rem;
     background-color: var(--color-border);
     position: absolute;
     top: 50%;
     left: calc(var(--timeline-vertical-border-pos) + 1px);
 }
 
 /* --------------------------------------------------------------------
   * ## about timelines
   * -------------------------------------------------------------------- */
 .timeline {
     margin-top: var(--vspace-0_25);
     padding-right: 1vw;
     position: relative;
 }
 
 .timeline__block {
     padding-left: var(--timeline-left-padding);
     padding-bottom: var(--vspace-0_5);
     position: relative;
 }
 
 .timeline__block:last-child {
     padding-bottom: 0;
 }
 
 .timeline__bullet {
     display: block;
     height: 4.4rem;
     width: 3px;
     background-color: var(--color-text-dark);
     position: absolute;
     top: 0;
     left: calc(var(--timeline-vertical-border-pos) - 1px);
 }
 
 .timeline__title {
     font-family: var(--font-2);
     font-weight: 400;
     font-size: var(--text-xl);
     line-height: 1.0966;
     margin-top: 0;
     margin-bottom: var(--vspace-0_125);
 }
 
 .timeline__meta {
     font-family: var(--font-1);
     font-weight: 400;
     font-size: calc(var(--text-size) * 1.1053);
     line-height: var(--vspace-0_75);
     margin-top: var(--vspace-0_125);
     margin-bottom: var(--vspace-0_125);
 }
 
 .timeline__desc {
     margin-top: var(--vspace-0_375);
 }
 
 .timeline__timeframe {
     font-size: calc(var(--text-size) * 0.7368);
     line-height: var(--vspace-0_5);
     text-transform: uppercase;
     letter-spacing: .15em;
     color: var(--color-1-dark);
     margin-top: var(--vspace-0_125);
     margin-bottom: var(--vspace-0_25);
 }
 
 /* --------------------------------------------------------------------
   * ## about skills
   * -------------------------------------------------------------------- */
 .s-about__skills {
     padding-top: var(--vspace-1);
 }
 
 .s-about__skills .text-subtitle::after {
     display: none;
 }
 
 .s-about__skills .skill-bars {
     --bar-padding: var(--timeline-left-padding);
     margin-top: var(--vspace-1_75);
     display: flex;
     flex-flow: row wrap;
 }
 
 .s-about__skills .skill-bars li {
     margin-bottom: calc(2.25 * var(--space));
     flex: none;
     width: 50%;
 }
 
 .s-about__skills .skill-bars li::before {
     left: .4rem;
 }
 
 .s-about__skills .skill-bars li:nth-child(2n+1) {
     padding-right: var(--gutter);
 }
 
 .s-about__skills .skill-bars li:nth-child(2n+2) {
     padding-left: calc(var(--gutter) + var(--bar-padding));
 }
 
 .s-about__skills .skill-bars li:nth-child(2n+2)::before {
     left: var(--gutter);
 }
 
 .s-about__skills .skill-bars li:nth-child(2n+2) strong {
     left: calc(var(--gutter) + var(--bar-padding));
 }
 
 .s-about__skills .skill-bars strong {
     font-weight: 400;
     font-size: calc(var(--text-size) * 1.1053);
     text-transform: none;
     letter-spacing: 0;
 }
 
 /* --------------------------------------------------------------------
   * ## about clients
   * -------------------------------------------------------------------- */
 .s-about__clients {
     padding-top: var(--vspace-0_5);
     overflow: hidden;
 }
 
 .s-about__clients .clients-list {
     list-style: none;
     display: flex;
     flex-flow: row wrap;
     margin-left: 0;
 }
 
 .s-about__clients .clients-list a {
     color: var(--color-text-dark);
 }
 
 .s-about__clients .clients-list a:focus,
 .s-about__clients .clients-list a:hover {
     color: var(--color-1);
 }
 
 .s-about__clients .clients-list li {
     display: inline-block;
     padding-left: 0;
     position: relative;
 }
 
 .s-about__clients .clients-list li:not(:last-child)::after {
     content: "/";
     font-family: var(--font-1);
     font-weight: 300;
     font-size: .48em;
     color: var(--color-1-light);
     margin: 0 .2em 0 .3em;
     position: relative;
     bottom: .05em;
 }
 
 /* ------------------------------------------------------------------- 
   * responsive:
   * about
   * ------------------------------------------------------------------- */
 @media screen and (max-width: 1000px) {
     .s-about {
         --timeline-left-padding: var(--vspace-1_25);
     }
 
     .s-about .text-subtitle::before {
         width: 2.4rem;
     }
 }
 
 @media screen and (max-width: 900px) {
     .s-about {
         --timeline-left-padding: var(--vspace-1_75);
     }
 
     .s-about .text-subtitle::before {
         width: 3.2rem;
     }
 
     .s-about__timeline .s-about__timeline-section:first-child {
         margin-bottom: var(--vspace-2);
     }
 
     .s-about__skills .skill-bars {
         display: block;
     }
 
     .s-about__skills .skill-bars li {
         width: auto;
     }
 
     .s-about__skills .skill-bars li:nth-child(2n+1) {
         padding-right: 0;
     }
 
     .s-about__skills .skill-bars li:nth-child(2n+2) {
         padding-left: var(--bar-padding);
     }
 
     .s-about__skills .skill-bars li:nth-child(2n+2)::before {
         left: .4rem;
     }
 
     .s-about__skills .skill-bars li:nth-child(2n+2) strong {
         left: var(--bar-padding);
     }
 }
 
 @media screen and (max-width: 600px) {
     .s-about {
         --timeline-left-padding: var(--vspace-1_25);
         padding-top: var(--vspace-4);
         padding-bottom: var(--vspace-2);
     }
 
     .s-about .text-subtitle::before {
         width: 1.6rem;
     }
 }
 
 @media screen and (max-width: 500px) {
     .s-about {
         --timeline-left-padding: 0;
         --subtitle-line-height: var(--vspace-0_625);
     }
 
     .s-about__timeline-section::before {
         display: none;
     }
 
     .s-about .text-subtitle::before {
         display: none;
     }
 
     .timeline {
         margin-top: var(--vspace-1);
         padding-right: 0;
     }
 
     .timeline__block {
         padding-bottom: 0;
     }
 
     .timeline__bullet {
         display: none;
     }
 
     .s-about__skills .skill-bars li::before {
         display: none;
     }
 }
 
 
 /* ===================================================================
   * # WORKS
   *
   *
   * ------------------------------------------------------------------- */
 .s-works {
     padding-top: var(--vspace-3);
     padding-bottom: var(--vspace-1);
     background-color: white;
 }
 
 /* ------------------------------------------------------------------- 
   * ## portfolio list
   * ------------------------------------------------------------------- */
 .folio-list {
     margin-top: var(--vspace-1_25);
     margin-bottom: var(--vspace-1_25);
 }
 
 .folio-list .column {
     margin-bottom: var(--vspace-1_25);
     width: 300px;
 }
 
 /* .folio-list .column:nth-child(4n+1) {
      padding-left : calc(var(--gutter) + 1.6rem);
  }
  
  .folio-list .column:nth-child(4n+4) {
      padding-right : calc(var(--gutter) + 1.6rem);
  } */
 
 .folio-item__caption {
     display: none;
 }
 
 /* thumbnail
   */
 .folio-item__thumb a {
     display: block;
     position: relative;
     overflow: hidden;
 }
 
 .folio-item__thumb a::before {
     z-index: 1;
     content: "";
     display: block;
     background-color: rgba(0, 0, 0, 0.5);
     opacity: 0;
     visibility: hidden;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
     transition: all, .5s;
 }
 
 .folio-item__thumb a::after {
     z-index: 1;
     content: "+";
     content: "";
     text-align: center;
     font-family: var(--font-1);
     font-weight: 300;
     font-size: 3rem;
     color: white;
     display: block;
     height: 3.2rem;
     width: 3.2rem;
     line-height: 3.2rem;
     margin-left: -1.6rem;
     margin-top: -3rem;
     text-align: center;
     opacity: 0;
     visibility: hidden;
     transform: scale(0.5);
     transition: all, 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
     position: absolute;
     left: 50%;
     top: 50%;
 }
 
 .folio-item__thumb img {
     vertical-align: bottom;
     margin-bottom: 0;
     transition: all, 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
 /* portfolio info
   */
 .folio-item__info {
     padding: var(--vspace-0_75) 0 var(--vspace-0_5);
 }
 
 .folio-item__title {
     margin: 0;
 }
 
 .folio-item__meta {
     font-family: var(--font-1);
     font-size: var(--text-sm);
     line-height: 1.5;
     margin-bottom: 0.2rem;
     color: var(--color-gray-8);
 }
 
 .folio-item__meta .project-link {
     color: var(--color-text);
     margin: 0 .8rem;
 }
 
 .folio-item__meta .project-link:focus,
 .folio-item__meta .project-link:hover {
     color: var(--color-1);
 }
 
 /* on hover
   */
 .folio-item__thumb:hover .folio-item__thumb-link img {
     transform: scale(1.05);
 }
 
 .folio-item__thumb:hover .folio-item__thumb-link::before {
     opacity: 1;
     visibility: visible;
 }
 
 .folio-item__thumb:hover .folio-item__thumb-link::after {
     opacity: 1;
     visibility: visible;
     transform: scale(1);
 }
 
 /* ------------------------------------------------------------------- 
   * ## testimonial slider
   * ------------------------------------------------------------------- */
 .testimonials {
     margin-top: var(--vspace-4_5);
 }
 
 .testimonial-slider {
     padding-right: var(--vspace-4);
     padding-left: var(--vspace-4);
     padding-bottom: var(--vspace-1_5);
 }
 
 .testimonial-slider__slide {
     /*background-color : white;*/
     text-align: center;
     width: 100%;
     position: relative;
 }
 
 .testimonial-slider__slide p {
     font-size: var(--text-xl);
     font-size: var(--text-l);
     line-height: 1.6244;
     margin: var(--vspace-0_125)
 }
 
 .testimonial-slider__author {
     display: inline-block;
     text-align: left;
     min-height: var(--vspace-2);
     margin-top: var(--vspace-0_75);
     margin-bottom: var(--vspace-0_625);
     padding-left: calc(2.25 * var(--space));
     position: relative;
 }
 
 .testimonial-slider__avatar {
     width: var(--vspace-1_75);
     height: var(--vspace-1_75);
     border-radius: 100%;
     outline: none;
     position: absolute;
     top: 0;
     left: 0;
 }
 
 .testimonial-slider__cite {
     display: block;
 }
 
 .testimonial-slider__cite strong,
 .testimonial-slider__cite span {
     font-style: normal;
     transition: all 0.3s ease-in-out;
 }
 
 .testimonial-slider__cite strong {
     font-family: var(--font-2);
     font-size: calc(var(--text-size) * 1.1053);
     font-weight: 400;
     line-height: var(--vspace-1);
     color: var(--color-text-dark);
 }
 
 .testimonial-slider__cite span {
     display: block;
     font-size: var(--text-sm);
     font-weight: 400;
     line-height: var(--vspace-0_5);
     color: var(--color-gray-8);
 }
 
 .testimonial-slider__next,
 .testimonial-slider__prev {
     z-index: 10000;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
     background-color: var(--color-gray-2);
     height: var(--vspace-1_75);
     width: var(--vspace-1_75);
     cursor: pointer;
     transform: translateY(-50%);
     position: absolute;
     top: calc(50% - var(--vspace-1_5));
 }
 
 .testimonial-slider__next svg,
 .testimonial-slider__prev svg {
     height: var(--vspace-0_75);
     width: var(--vspace-0_75);
 }
 
 .testimonial-slider__next svg path,
 .testimonial-slider__prev svg path {
     fill: var(--color-text-dark);
 }
 
 .testimonial-slider__next {
     right: 0;
 }
 
 .testimonial-slider__prev {
     left: 0;
 }
 
 .swiper-button-disabled {
     cursor: default;
 }
 
 .swiper-button-disabled svg path {
     fill: var(--color-gray-8);
 }
 
 /* ------------------------------------------------------------------- 
   * responsive:
   * works
   * ------------------------------------------------------------------- */
 @media screen and (max-width: 1200px) {
     .folio-list .column:nth-child(4n+1) {
         padding-right: calc(var(--gutter) + .8rem);
     }
 
     .folio-list .column:nth-child(4n+4) {
         padding-left: calc(var(--gutter) + .8rem);
     }
 
     .testimonial-slider {
         padding-right: var(--vspace-3_5);
         padding-left: var(--vspace-3_5);
     }
 
     .testimonial-slider__slide p {
         font-size: var(--text-lg);
     }
 
     .testimonial-slider__next,
     .testimonial-slider__prev {
         height: var(--vspace-1_5);
         width: var(--vspace-1_5);
     }
 
     .testimonial-slider__next svg,
     .testimonial-slider__prev svg {
         height: var(--vspace-0_625);
         width: var(--vspace-0_625);
     }
 }
 
 @media screen and (max-width: 900px) {
     .folio-item__title {
         font-size: var(--text-md);
         line-height: var(--vspace-0_875);
     }
 
     .folio-item__meta {
         font-size: calc(var(--text-size) * 0.7368);
     }
 
     .testimonial-slider {
         padding-right: var(--vspace-2_5);
         padding-left: var(--vspace-2_5);
     }
 }
 
 @media screen and (max-width: 800px) {
     .folio-list .column:nth-child(2n+1) {
         padding-right: var(--gutter);
     }
 
     .folio-list .column:nth-child(2n+2) {
         padding-left: var(--gutter);
     }
 
     .testimonials {
         margin-top: var(--vspace-3);
         max-width: 600px;
     }
 
     .testimonial-slider {
         padding-right: 0;
         padding-left: 0;
     }
 
     .testimonial-slider__next,
     .testimonial-slider__prev {
         display: none;
     }
 }
 
 @media screen and (max-width: 600px) {
     .s-works {
         padding-top: var(--vspace-5);
         padding-bottom: var(--vspace-4_5);
     }
 
     .folio-item__title {
         font-size: var(--text-lg);
         line-height: var(--vspace-1);
     }
 
     .folio-item__meta {
         font-size: var(--text-sm);
     }
 }
 
 @media screen and (max-width: 400px) {
     .folio-list .column:nth-child(2n+1) {
         padding-right: 0;
     }
 
     .folio-list .column:nth-child(2n+2) {
         padding-left: 0;
     }
 }
 
 /* ===================================================================
   * # CLIENTS
   *
   *
   * ------------------------------------------------------------------- */
 .s-clients {
     padding-top: var(--vspace-3);
     padding-bottom: var(--vspace-1);
 }

 .s-clients__content-block {
    margin-top: var(--vspace-1_25);
    margin-bottom: var(--vspace-1_25);
 }
 
 .s-clients__content-block:first-child {
     margin-bottom: var(--vspace-1_75);
 }
 
 .s-clients__content-block:first-child .grid-block {
     --grid-gap-v: 0;
 }
 
 .s-clients__content-block:first-child .grid-section-split__primary {
     grid-row: auto;
 }
 
 /* --------------------------------------------------------------------
   * ## clients list
   * -------------------------------------------------------------------- */
 .clients-list {
     display: flex;
     flex-flow: row wrap;
     /* border-color: rgba(0, 0, 0, 0.2);
      border-style: solid;
      border-width: 1px 0 0 1px; */
     border-style: none;
     margin-top: 0;
 }
 
 .clients-list__item {
     flex: none;
     width: 20%;
     border-color: rgba(0, 0, 0, 0.2);
     border-width: 1px;
     text-align: center;
     padding: 0;
 }
 
 .clients-list__item a {
     display: block;
     padding: var(--vspace-0_5) var(--vspace-0_5);
     transition: all 0.5s ease-in;
 }
 
 .clients-list__item a:focus,
 .clients-list__item a:hover {
     background-color: var(--color-3-dark);
 }
 
 .clients-list__item img {
     margin: 0;
     transform: scale(0.95);
     transition: all 0.5s ease-in;
     vertical-align: center;
 }
 
 .clients-list__item:nth-child(n) {
     /* border-style: none solid solid none; */
     border-style: none;
 }
 
 /* ------------------------------------------------------------------- 
   * responsive:
   * clients
   * ------------------------------------------------------------------- */
 @media screen and (max-width: 1600px) {
     .clients-list__item {
         width: 25%;
     }
 }
 
 @media screen and (max-width: 1200px) {
     .s-clients__content-block:first-child .grid-section-split__primary {
         margin-top: 0;
     }
 
     .clients-list__item {
         width: 33.3333%;
     }
 }
 
 @media screen and (max-width: 900px) {
     .clients-list__item {
         width: 50%;
     }
 }
 
 @media screen and (max-width: 600px) {
     .clients-list__item a {
         padding: var(--vspace-1) var(--vspace-0_25);
     }
 }
 
 @media screen and (max-width: 460px) {
     .clients-list__item {
         width: 100%;
     }
 
     .clients-list__item a {
         padding: var(--vspace-0_75) var(--vspace-0_75);
     }
 }
 
 /* ===================================================================
   * # FOOTER
   *
   *
   * ------------------------------------------------------------------- */
 .s-footer {
     padding-top: calc(3 * var(--space));
     padding-bottom: var(--vspace-2_5);
     font-weight: 300;
     position: relative;
 }
 
 .s-footer .text-subtitle {
     margin-bottom: 0;
 }
 
 .s-footer .link-list {
     list-style: none;
     margin-left: 0;
 }
 
 .s-footer .link-list li {
     padding-left: 0;
 }
 
 .s-footer .link-list a {
     color: var(--color-text);
     border: none;
 }
 
 .s-footer .link-list a:focus,
 .s-footer .link-list a:hover {
     color: var(--color-1);
 }
 
 .s-footer__contact-content {
    margin-top: var(--vspace-1_25);
    margin-bottom: var(--vspace-1_25);
 }
 
 .s-footer__contact-content .left-block {
     padding-top: 0;
     margin-bottom: var(--vspace-0_5);
 }
 
 .s-footer__contact-content .right-block {
     margin-left: 15%;
     margin-bottom: var(--vspace-0_5);
 }
 
 .s-footer__bottom {
     padding-top: var(--vspace-1);
     font-size: var(--text-sm);
     line-height: var(--vspace-0_75);
     color: var(--color-gray-14);
 }
 
 .s-footer__bottom a {
     color: var(--color-1);
 }
 
 /* ------------------------------------------------------------------- 
   * ## copyright
   * ------------------------------------------------------------------- */
 .ss-copyright span {
     display: inline-block;
 }
 
 .ss-copyright span::after {
     content: "|";
     display: inline-block;
     padding: 0 .8rem 0 1rem;
     color: var(--color-gray-10);
 }
 
 .ss-copyright span:last-child::after {
     display: none;
 }
 
 /* ------------------------------------------------------------------- 
   * ## go top
   * ------------------------------------------------------------------- */
 .ss-go-top {
     z-index: 2;
     opacity: 0;
     visibility: hidden;
     transform: translate(0, 200%);
     transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
     position: fixed;
     bottom: 6rem;
     right: 4rem;
 }
 
 .ss-go-top a {
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     border: none;
     height: 6rem;
     width: 6rem;
     border-radius: 50%;
     background-color: var(--color-text-dark);
     transition: all .3s;
     position: relative;
 }
 
 .ss-go-top svg {
     height: 2.4rem;
     width: 2.4rem;
 }
 
 .ss-go-top svg path {
     fill: white;
 }
 
 .ss-go-top.link-is-visible {
     opacity: 1;
     visibility: visible;
     transform: translate(0, 0);
 }
 
 /* ------------------------------------------------------------------- 
   * responsive:
   * footer
   * ------------------------------------------------------------------- */
 @media screen and (max-width: 1200px) {
     .s-footer__contact-content .right-block {
         margin-left: auto;
     }
 }
 
 @media screen and (max-width: 1000px) {
     .ss-go-top {
         bottom: 4.8rem;
     }
 
     .ss-go-top a {
         height: 5.2rem;
         width: 5.2rem;
     }
 }
 
 @media screen and (max-width: 600px) {
     .s-footer {
         padding-top: var(--vspace-5);
     }
 
     .ss-copyright span {
         display: block;
     }
 
     .ss-copyright span::after {
         display: none;
     }
 
     .ss-go-top {
         right: 3.2rem;
     }
 
     .ss-go-top a {
         height: 4.8rem;
         width: 4.8rem;
     }
 }
 
 @media screen and (max-width: 400px) {
     .ss-go-top {
         bottom: 4rem;
         right: 2rem;
     }
 
     .ss-go-top a {
         height: 4rem;
         width: 4rem;
     }
 
     .ss-go-top svg {
         height: 1.6rem;
         width: 1.6rem;
     }