:root {
     --font-1 : "Lora", serif;
     --font-2 : "Inter", sans-serif;
 
     /* monospace
     */
     --font-mono : Consolas, "Andale Mono", Courier, "Courier New", monospace;
 }
 
 /* ------------------------------------------------------------------- 
  * ## colors
  * ------------------------------------------------------------------- */
 :root {
 
     /* color-1(#F9A828)
      * color-2(#07617D)
      */
     --color-1 : hsla(37, 95%, 57%, 1);
     --color-2 : hsla(194, 89%, 26%, 1);
 
     /* theme color variations
      */
     --color-1-lighter : hsla(37, 95%, 77%, 1);
     --color-1-light   : hsla(37, 95%, 67%, 1);
     --color-1-dark    : hsla(37, 95%, 47%, 1);
     --color-1-darker  : hsla(37, 95%, 37%, 1);
     --color-2-lighter : hsla(194, 89%, 46%, 1);
     --color-2-light   : hsla(194, 89%, 36%, 1);
     --color-2-dark    : hsla(194, 89%, 16%, 1);
     --color-2-darker  : hsla(194, 89%, 10%, 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                : #161616;
     --color-gray-18                : #2c2c2c;
     --color-gray-17                : #424342;
     --color-gray-16                : #585958;
     --color-gray-15                : #6e6f6f;
     --color-gray-14                : #838585;
     --color-gray-13                : #999b9b;
     --color-gray-12                : #afb2b1;
     --color-gray-11                : #c5c8c7;
     --color-gray-10                : #dbdedd;
     --color-gray-9                 : #dfe1e0;
     --color-gray-8                 : #e2e5e4;
     --color-gray-7                 : #e6e8e7;
     --color-gray-6                 : #e9ebeb;
     --color-gray-5                 : #edefee;
     --color-gray-4                 : #f1f2f1;
     --color-gray-3                 : #f4f5f5;
     --color-gray-2                 : #f8f8f8;
     --color-gray-1                 : #fbfcfc;
     --color-white                  : #ffffff;
 
     /* text
      */
     --color-text                   : var(--color-gray-19);
     --color-text-dark              : var(--color-black);
     --color-text-light             : var(--color-gray-13);
     --color-placeholder            : var(--color-gray-13);
 
     /* buttons
      */
     --color-btn                    : var(--color-gray-9);
     --color-btn-text               : var(--color-black);
     --color-btn-hover              : var(--color-gray-11);
     --color-btn-hover-text         : var(--color-black);
     --color-btn-primary            : var(--color-1);
     --color-btn-primary-text       : var(--color-black);
     --color-btn-primary-hover      : var(--color-1-dark);
     --color-btn-primary-hover-text : var(--color-black);
     --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-19);
     --color-loader                 : var(--color-1);
     --color-loader-light           : rgba(255, 255, 255, 0.1);
 
     /* others
      */
     --color-body                   : white;
     --color-border                 : rgba(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));
     --vspace-5_5       : calc(5.5 * var(--space));
     --vspace-6         : calc(6 * 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 : .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;
     }
 }
 

 
 /* ===================================================================
  * # BASE SETUP
  *
  *
  * ------------------------------------------------------------------- */
 html {
     font-size  : var(--base-size);
     box-sizing : border-box;
 }
 
 *,
 *::before,
 *::after {
     box-sizing : inherit;
 }
 
 svg,
 img,
 video {
     max-width : 100%;
     height    : auto;
 }
 
 .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;
     }
 }
 

 #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;
 }
 
 .no-js #preloader {
     display : none;
 }
 
 #loader {
     width             : var(--vspace-2);
     height            : var(--vspace-2);
     padding           : 0;
     background-color  : var(--color-loader);
     border-radius     : 100%;
     -webkit-animation : sk-scaleout 1.0s infinite ease-in-out;
     animation         : sk-scaleout 1.0s infinite ease-in-out;
 }
 
 @-webkit-keyframes sk-scaleout {
     0% {
         -webkit-transform : scale(0);
         transform         : scale(0);
     }
 
     100% {
         -webkit-transform : scale(1);
         transform         : scale(1);
         opacity           : 0;
     }
 }
 
 @keyframes sk-scaleout {
     0% {
         transform : scale(0);
     }
 
     100% {
         transform : scale(1);
         opacity   : 0;
     }
 }
 

 /* -------------------------------------------------------------------
  * ## pagination
  * ------------------------------------------------------------------- */
 .pgn {
     --pgn-num-height : calc(var(--vspace-1) + .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-2);
     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 : 4px;
     transition    : all, .3s, ease-in-out;
 }
 
 .pgn__num:focus,
 .pgn__num:hover {
     background : var(--color-black);
     color      : var(--color-white);
 }
 
 .pgn .current,
 .pgn .current:focus,
 .pgn .current:hover {
     background-color : var(--color-black);
     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-color : var(--color-black);
 }
 
 .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 {
     stroke : var(--color-text-dark);
 }
 
 .pgn__prev:focus svg path,
 .pgn__prev:hover svg path,
 .pgn__next:focus svg path,
 .pgn__next:hover svg path {
     stroke : var(--color-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-2);
     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;
 }
 
 /* ------------------------------------------------------------------- 
  * ## swiper overrides
  * ------------------------------------------------------------------- */
 .swiper-container .swiper-pagination-bullets .swiper-pagination-bullet {
     margin : 0 1.2rem;
 }
 
 .swiper-container .swiper-pagination-bullet {
     width      : 8px;
     height     : 8px;
     background : rgba(0, 0, 0, 0.3);
     opacity    : 1;
 }
 
 .swiper-container .swiper-pagination-bullet-active {
     background : black;
     opacity    : 1;
 }
 

  .clients-block {
     padding-top      : var(--vspace-1_25);
     padding-bottom   : calc(2.25 * var(--space));
     background-color : var(--color-gray-4);
 }
 
 .clients {
     margin-top     : var(--vspace-1_5);
     padding-bottom : var(--vspace-1_75);
 }
 
 .clients__slide img {
     margin     : 0;
     opacity    : .4;
     transform  : scale(0.85);
     transition : all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
 .clients__slide:focus img,
 .clients__slide:hover img {
     transform : scale(1);
     opacity   : 1;
 }
 
 /* ------------------------------------------------------------------- 
  * responsive:
  * works
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 800px) {
     .folio-item__title {
         font-size : calc(var(--text-size) * 0.8889);
     }
 
     .folio-item__cat {
         font-size : calc(var(--text-size) * 0.7778);
     }
 
     .testimonials {
         max-width : 600px;
     }
 }
 
 @media screen and (max-width: 700px) {
     .folio-list .brick {
         float : none;
         width : auto;
     }
 
     .folio-item__title {
         font-size : var(--text-size);
     }
 
     .folio-item__cat {
         font-size : 1.2rem;
     }
 
     .testimonials {
         --text-multiplier : .9;
     }
 }
 
 @media screen and (max-width: 600px) {
     .testimonials {
         --text-multiplier : .8;
     }
 }
 
 @media screen and (max-width: 500px) {
     .testimonials {
         --text-multiplier : .65;
     }
 }
 
 @media screen and (max-width: 400px) {
     .testimonial-slider__slide p {
         font-size : 2.1rem;
     }
 }