/* ==========================================================================
   Sizes
   ========================================================================== */
/* ==========================================================================
   Colours
   ========================================================================== */
/* ==========================================================================
   Fonts
   ========================================================================== */
/* ==========================================================================
   Global Mixins
   ========================================================================== */
/* ==========================================================================
   Flexbox Mixins
   ========================================================================== */
/* ==========================================================================
   FP Grid Mixins
   ========================================================================== */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; }

.slick-list {
  position: relative;
  display: block;
  overflow: visible;
  margin: 0;
  margin: 0 auto;
  width: 90%;
  max-width: 1400px; }

.slick-list:focus {
  outline: 0; }

.slick-list.dragging {
  cursor: pointer;
  cursor: hand; }

.slick-slider .slick-list, .slick-slider .slick-track {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto; }

.slick-track:after,
.slick-track:before {
  display: table;
  content: ''; }

.slick-track:after {
  clear: both; }

.slick-loading .slick-track {
  visibility: hidden; }

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px; }

[dir=rtl] .slick-slide {
  float: right; }

.slick-slide img {
  display: block; }

.slick-slide.slick-loading img {
  display: none; }

.slick-slide.dragging img {
  pointer-events: none; }

.slick-initialized .slick-slide {
  display: block; }

.slick-loading .slick-slide {
  visibility: hidden; }

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent; }

.slick-arrow.slick-hidden {
  display: none; }

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* ==========================================================================
   Debugging
   ========================================================================== */
/* ==========================================================================
   Preload / Stop Resize Animations
   ========================================================================== */
.resize-animation-stopper * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
  -webkit-animation: none !important;
  animation: none !important; }

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important; }

/* ==========================================================================
   HTML / Body Styles
   ========================================================================== */
::-moz-selection {
  background: #000000;
  color: #ffffff; }

::selection {
  background: #000000;
  color: #ffffff; }

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth; }

html, body {
  width: 100%;
  height: auto;
  min-height: 100vh;
  position: relative;
  overscroll-behavior: none; }

body {
  background: #1e1e1e;
  color: #ffffff; }

/* ==========================================================================
   Site Container Styles
   ========================================================================== */
*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.site-container {
  clear: both;
  margin: 0 auto;
  position: relative;
  width: 90%;
  max-width: 1800px; }

/* ==========================================================================
   Global Styles
   ========================================================================== */
a {
  -webkit-transition: color 0.4s ease;
  -moz-transition: color 0.4s ease;
  -ms-transition: color 0.4s ease;
  -o-transition: color 0.4s ease;
  transition: color 0.4s ease;
  color: #000000;
  text-decoration: none;
  cursor: pointer; }

.noSelect {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent; }

/* ==========================================================================
   Image
   ========================================================================== */
img {
  width: 100%;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  display: block; }

/* ==========================================================================
   Mobile Show/Hide
   ========================================================================== */
.visible-m {
  display: block; }

.hidden-m {
  display: none; }

@media only screen and (min-width: 768px) {
  .visible-m {
    display: none; }
  .hidden-m {
    display: block; } }

/* ==========================================================================
   Intro
   ========================================================================== */
.intro {
  margin: 50px 0;
  padding: 250px 0; }
  .intro .intro-heading {
    position: relative; }
    .intro .intro-heading h1 {
      display: inline-block;
      position: relative; }
      .intro .intro-heading h1 svg {
        -moz-transform: translate(102%, 94%);
        -o-transform: translate(102%, 94%);
        -ms-transform: translate(102%, 94%);
        -webkit-transform: translate(102%, 94%);
        transform: translate(102%, 94%);
        position: absolute;
        right: 0;
        bottom: 0;
        width: 50vw;
        height: auto; }

.hero-image {
  width: 100%;
  border-radius: 30px; }

.swoosh svg {
  width: 100%;
  height: auto; }

#swoosh-2 {
  position: relative;
  margin-top: -6em; }

/* ==========================================================================
   Sign off
   ========================================================================== */
.signoff {
  font-size: 5vw;
  margin: 3em auto 2em auto;
  max-width: 900px;
  text-align: center;
  font-weight: 600;
  line-height: 1em;
  letter-spacing: -0.03em; }
  @media (max-width: 960px) {
    .signoff {
      font-size: 48px; } }
  @media (min-width: 1280px) {
    .signoff {
      font-size: 64px; } }
/* ==========================================================================
   Awards
   ========================================================================== */
.awards {
  max-width: 1200px;
  text-align: center;
  margin: 6em auto; }
  .awards .award-logo {
    border-radius: 100%;
    width: 100%;
    max-width: 160px;
    margin: 0 auto; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact {
  background-color: #00FFA7;
  background-image: url("../images/contact-swoosh.svg");
  background-repeat: no-repeat;
  background-position: right top;
  color: #1e1e1e;
  padding: 200px 0; }

.contact-cta {
  font-size: 5vw;
  max-width: 600px;
  font-weight: 600;
  line-height: 1em;
  letter-spacing: -0.03em; }
  @media (max-width: 960px) {
    .contact-cta {
      font-size: 48px; } }
  @media (min-width: 1280px) {
    .contact-cta {
      font-size: 64px; } }
.contact-links {
  align-items: baseline; }

.arrow {
  width: 0.8em;
  margin-left: 6px; }

.contact-margin {
  height: 20px; }

.contact-links a {
  font-size: 24px;
  position: relative;
  color: #1e1e1e; }

.contact-links a::before {
  font-size: 24px;
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: #1e1e1e;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .3s ease-in-out; }

.contact-links a:hover::before {
  transform-origin: left;
  transform: scaleX(1); }

/* ==========================================================================
   Responsive stuff
   ========================================================================== */
@media only screen and (max-width: 576px) {
  .intro {
    margin: 50px 0;
    padding: 140px 0; }
  #swoosh-2 {
    margin-top: -1em; }
  .service-image {
    width: 80%;
    margin: 0 auto;
    padding: 0 15% 20px 15%; }
  .service-item {
    margin: 80px auto; }
  .service-copy {
    text-align: center; }
  .contact {
    background-image: none; }
  .social-links a {
    margin-right: 20px; }
  .footer-info a {
    margin-left: 20px; } }

@media only screen and (max-width: 600px) {
  .Grid-cell {
    flex: none !important; }
  .Grid-cell--autoSize {
    width: 100%; }
  nav {
    margin-top: 2em;
    margin-bottom: 1em; } }

@media only screen and (max-width: 768px) {
  .logo {
    width: 100px; }
  .shrink .logo {
    width: 80px; }
  header {
    padding: 20px 20px 8px 20px; }
  .shrink {
    padding: 8px 20px 2px 20px; }
  .bio {
    margin-top: 2em; }
  .intro {
    margin: 50px 0;
    padding: 180px 0 60px 0; }
  .intro .intro-heading h1 svg {
    width: 44vw; }
  .intro-heading {
    padding-bottom: 1.6em !important; }
  .slick-slide {
    padding: 20px; }
  .awards {
    margin-bottom: 120px; }
  .contact {
    padding: 140px 0 100px 0; }
  .contact-cta {
    max-width: 480px;
    padding-bottom: 50px; }
  footer {
    padding: 20px; } }

@media only screen and (max-width: 992px) {
  .service-item {
    margin: 100px auto; } }

@media only screen and (max-width: 1200px) {
  .contact {
    background-size: cover; } }

/* ==========================================================================
   Global Typography
   ========================================================================== */
#html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  font-size: 2vw;
  font-family: 'Onest', sans-serif;
  font-style: normal;
  line-height: 1.4em; }
  @media (max-width: 800px) {
    body {
      font-size: 16px; } }
  @media (min-width: 1300px) {
    body {
      font-size: 26px; } }
h1, h2 {
  font-size: 7vw; }
  @media (max-width: 542.8571428571px) {
    h1, h2 {
      font-size: 38px; } }
  @media (min-width: 1428.5714285714px) {
    h1, h2 {
      font-size: 100px; } }
h3 {
  font-size: 4vw; }
  @media (max-width: 700px) {
    h3 {
      font-size: 28px; } }
  @media (min-width: 1500px) {
    h3 {
      font-size: 60px; } }
h4 {
  font-size: 1em; }

h5 {
  font-size: 1em; }

h6 {
  font-size: 1em; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  font-style: normal;
  line-height: 0.950em;
  text-wrap: balance; }

p {
  font-size: 2.2vw;
  line-height: 1.357em;
  padding: 0;
  margin: 0;
  margin-bottom: 1em;
  letter-spacing: -0.025em;
  text-wrap: pretty; }
  @media (max-width: 818.1818181818px) {
    p {
      font-size: 18px; } }
  @media (min-width: 1272.7272727273px) {
    p {
      font-size: 28px; } }
.intro-heading {
  font-size: 6vw;
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.03em;
  line-height: 1em;
  padding-bottom: 0.8em;
  text-wrap: balance; }
  @media (max-width: 1333.3333333333px) {
    .intro-heading {
      font-size: 80px; } }
  @media (min-width: 1666.6666666667px) {
    .intro-heading {
      font-size: 100px; } }
.intro-copy {
  font-size: 2vw;
  font-weight: 400;
  font-style: normal;
  line-height: 1.2em;
  text-wrap: pretty; }
  @media (max-width: 1200px) {
    .intro-copy {
      font-size: 24px; } }
  @media (min-width: 1600px) {
    .intro-copy {
      font-size: 32px; } }
/* Raster grid subsystem (rsms.me/raster) */
if-grid {
  display: grid;
  --grid-tc: repeat(12, minmax(0, 1fr));
  grid-template-columns: var(--grid-tc);
  --grid-cs: 1;
  /* column start */
  --grid-ce: -1 /* column end */
; }

/* ==========================================================================
   if-cell -- cell or column
   ========================================================================== */
if-grid > if-cell {
  display: block;
  appearance: none;
  -webkit-appearance: none; }

if-grid[columns="1"] {
  --grid-tc: repeat(1, minmax(0, 1fr)) ; }

if-grid[columns="2"] {
  --grid-tc: repeat(2, minmax(0, 1fr)) ; }

if-grid[columns="3"] {
  --grid-tc: repeat(3, minmax(0, 1fr)) ; }

if-grid[columns="4"] {
  --grid-tc: repeat(4, minmax(0, 1fr)) ; }

if-grid[columns="5"] {
  --grid-tc: repeat(5, minmax(0, 1fr)) ; }

if-grid[columns="6"] {
  --grid-tc: repeat(6, minmax(0, 1fr)) ; }

if-grid[columns="7"] {
  --grid-tc: repeat(7, minmax(0, 1fr)) ; }

if-grid[columns="8"] {
  --grid-tc: repeat(8, minmax(0, 1fr)) ; }

if-grid[columns="9"] {
  --grid-tc: repeat(9, minmax(0, 1fr)) ; }

if-grid[columns="10"] {
  --grid-tc: repeat(10, minmax(0, 1fr)) ; }

if-grid[columns="11"] {
  --grid-tc: repeat(11, minmax(0, 1fr)) ; }

if-grid[columns="12"] {
  --grid-tc: repeat(12, minmax(0, 1fr)) ; }

if-grid[columns="13"] {
  --grid-tc: repeat(13, minmax(0, 1fr)) ; }

if-grid[columns="14"] {
  --grid-tc: repeat(14, minmax(0, 1fr)) ; }

if-grid[columns="15"] {
  --grid-tc: repeat(15, minmax(0, 1fr)) ; }

if-grid[columns="16"] {
  --grid-tc: repeat(16, minmax(0, 1fr)) ; }

if-grid[columns="17"] {
  --grid-tc: repeat(17, minmax(0, 1fr)) ; }

if-grid[columns="18"] {
  --grid-tc: repeat(18, minmax(0, 1fr)) ; }

if-grid[columns="19"] {
  --grid-tc: repeat(19, minmax(0, 1fr)) ; }

if-grid[columns="20"] {
  --grid-tc: repeat(20, minmax(0, 1fr)) ; }

if-grid[columns="21"] {
  --grid-tc: repeat(21, minmax(0, 1fr)) ; }

if-grid[columns="22"] {
  --grid-tc: repeat(22, minmax(0, 1fr)) ; }

if-grid[columns="23"] {
  --grid-tc: repeat(23, minmax(0, 1fr)) ; }

if-grid[columns="24"] {
  --grid-tc: repeat(24, minmax(0, 1fr)) ; }

/* span=start... */
if-grid > if-cell[span^="1"] {
  --grid-cs: 1 ; }

if-grid > if-cell[span^="2"] {
  --grid-cs: 2 ; }

if-grid > if-cell[span^="3"] {
  --grid-cs: 3 ; }

if-grid > if-cell[span^="4"] {
  --grid-cs: 4 ; }

if-grid > if-cell[span^="5"] {
  --grid-cs: 5 ; }

if-grid > if-cell[span^="6"] {
  --grid-cs: 6 ; }

if-grid > if-cell[span^="7"] {
  --grid-cs: 7 ; }

if-grid > if-cell[span^="8"] {
  --grid-cs: 8 ; }

if-grid > if-cell[span^="9"] {
  --grid-cs: 9 ; }

if-grid > if-cell[span^="10"] {
  --grid-cs: 10 ; }

if-grid > if-cell[span^="11"] {
  --grid-cs: 11 ; }

if-grid > if-cell[span^="12"] {
  --grid-cs: 12 ; }

if-grid > if-cell[span^="13"] {
  --grid-cs: 13 ; }

if-grid > if-cell[span^="14"] {
  --grid-cs: 14 ; }

if-grid > if-cell[span^="15"] {
  --grid-cs: 15 ; }

if-grid > if-cell[span^="16"] {
  --grid-cs: 16 ; }

if-grid > if-cell[span^="17"] {
  --grid-cs: 17 ; }

if-grid > if-cell[span^="18"] {
  --grid-cs: 18 ; }

if-grid > if-cell[span^="19"] {
  --grid-cs: 19 ; }

if-grid > if-cell[span^="20"] {
  --grid-cs: 20 ; }

if-grid > if-cell[span^="21"] {
  --grid-cs: 21 ; }

if-grid > if-cell[span^="22"] {
  --grid-cs: 22 ; }

if-grid > if-cell[span^="23"] {
  --grid-cs: 23 ; }

if-grid > if-cell[span^="24"] {
  --grid-cs: 24 ; }

/* span=...+width, span=...-end */
if-grid > if-cell[span$="+1"], if-grid > if-cell[span="1"] {
  --grid-ce: 1 ; }

if-grid > if-cell[span$="+2"], if-grid > if-cell[span$="-1"], if-grid > if-cell[span="2"] {
  --grid-ce: 2 ; }

if-grid > if-cell[span$="+3"], if-grid > if-cell[span$="-2"], if-grid > if-cell[span="3"] {
  --grid-ce: 3 ; }

if-grid > if-cell[span$="+4"], if-grid > if-cell[span$="-3"], if-grid > if-cell[span="4"] {
  --grid-ce: 4 ; }

if-grid > if-cell[span$="+5"], if-grid > if-cell[span$="-4"], if-grid > if-cell[span="5"] {
  --grid-ce: 5 ; }

if-grid > if-cell[span$="+6"], if-grid > if-cell[span$="-5"], if-grid > if-cell[span="6"] {
  --grid-ce: 6 ; }

if-grid > if-cell[span$="+7"], if-grid > if-cell[span$="-6"], if-grid > if-cell[span="7"] {
  --grid-ce: 7 ; }

if-grid > if-cell[span$="+8"], if-grid > if-cell[span$="-7"], if-grid > if-cell[span="8"] {
  --grid-ce: 8 ; }

if-grid > if-cell[span$="+9"], if-grid > if-cell[span$="-8"], if-grid > if-cell[span="9"] {
  --grid-ce: 9 ; }

if-grid > if-cell[span$="+10"], if-grid > if-cell[span$="-9"], if-grid > if-cell[span="10"] {
  --grid-ce: 10 ; }

if-grid > if-cell[span$="+11"], if-grid > if-cell[span$="-10"], if-grid > if-cell[span="11"] {
  --grid-ce: 11 ; }

if-grid > if-cell[span$="+12"], if-grid > if-cell[span$="-11"], if-grid > if-cell[span="12"] {
  --grid-ce: 12 ; }

if-grid > if-cell[span$="+13"], if-grid > if-cell[span$="-12"], if-grid > if-cell[span="13"] {
  --grid-ce: 13 ; }

if-grid > if-cell[span$="+14"], if-grid > if-cell[span$="-13"], if-grid > if-cell[span="14"] {
  --grid-ce: 14 ; }

if-grid > if-cell[span$="+15"], if-grid > if-cell[span$="-14"], if-grid > if-cell[span="15"] {
  --grid-ce: 15 ; }

if-grid > if-cell[span$="+16"], if-grid > if-cell[span$="-15"], if-grid > if-cell[span="16"] {
  --grid-ce: 16 ; }

if-grid > if-cell[span$="+17"], if-grid > if-cell[span$="-16"], if-grid > if-cell[span="17"] {
  --grid-ce: 17 ; }

if-grid > if-cell[span$="+18"], if-grid > if-cell[span$="-17"], if-grid > if-cell[span="18"] {
  --grid-ce: 18 ; }

if-grid > if-cell[span$="+19"], if-grid > if-cell[span$="-18"], if-grid > if-cell[span="19"] {
  --grid-ce: 19 ; }

if-grid > if-cell[span$="+20"], if-grid > if-cell[span$="-19"], if-grid > if-cell[span="20"] {
  --grid-ce: 20 ; }

if-grid > if-cell[span$="+21"], if-grid > if-cell[span$="-20"], if-grid > if-cell[span="21"] {
  --grid-ce: 21 ; }

if-grid > if-cell[span$="+22"], if-grid > if-cell[span$="-21"], if-grid > if-cell[span="22"] {
  --grid-ce: 22 ; }

if-grid > if-cell[span$="+23"], if-grid > if-cell[span$="-22"], if-grid > if-cell[span="23"] {
  --grid-ce: 23 ; }

if-grid > if-cell[span$="+24"], if-grid > if-cell[span$="-23"], if-grid > if-cell[span="24"] {
  --grid-ce: 24 ; }

if-grid > if-cell[span$="-24"] {
  --grid-ce: 25 ; }

/* connect vars */
if-grid > if-cell[span] {
  grid-column-end: span var(--grid-ce); }

if-grid > if-cell[span*="+"], if-grid > if-cell[span*="-"], if-grid > if-cell[span*=".."] {
  grid-column-start: var(--grid-cs); }

if-grid > if-cell[span*="-"], if-grid > if-cell[span*=".."] {
  grid-column-end: var(--grid-ce); }

if-grid > if-cell[span="row"] {
  grid-column: 1 / -1; }

/* ==========================================================================
   for window width => 576
   ========================================================================== */
@media only screen and (min-width: 576px) {
  if-grid[columns-s="1"] {
    --grid-tc: repeat(1, minmax(0, 1fr)) ; }
  if-grid[columns-s="2"] {
    --grid-tc: repeat(2, minmax(0, 1fr)) ; }
  if-grid[columns-s="3"] {
    --grid-tc: repeat(3, minmax(0, 1fr)) ; }
  if-grid[columns-s="4"] {
    --grid-tc: repeat(4, minmax(0, 1fr)) ; }
  if-grid[columns-s="5"] {
    --grid-tc: repeat(5, minmax(0, 1fr)) ; }
  if-grid[columns-s="6"] {
    --grid-tc: repeat(6, minmax(0, 1fr)) ; }
  if-grid[columns-s="7"] {
    --grid-tc: repeat(7, minmax(0, 1fr)) ; }
  if-grid[columns-s="8"] {
    --grid-tc: repeat(8, minmax(0, 1fr)) ; }
  if-grid[columns-s="9"] {
    --grid-tc: repeat(9, minmax(0, 1fr)) ; }
  if-grid[columns-s="10"] {
    --grid-tc: repeat(10, minmax(0, 1fr)) ; }
  if-grid[columns-s="11"] {
    --grid-tc: repeat(11, minmax(0, 1fr)) ; }
  if-grid[columns-s="12"] {
    --grid-tc: repeat(12, minmax(0, 1fr)) ; }
  if-grid[columns-s="13"] {
    --grid-tc: repeat(13, minmax(0, 1fr)) ; }
  if-grid[columns-s="14"] {
    --grid-tc: repeat(14, minmax(0, 1fr)) ; }
  if-grid[columns-s="15"] {
    --grid-tc: repeat(15, minmax(0, 1fr)) ; }
  if-grid[columns-s="16"] {
    --grid-tc: repeat(16, minmax(0, 1fr)) ; }
  if-grid[columns-s="17"] {
    --grid-tc: repeat(17, minmax(0, 1fr)) ; }
  if-grid[columns-s="18"] {
    --grid-tc: repeat(18, minmax(0, 1fr)) ; }
  if-grid[columns-s="19"] {
    --grid-tc: repeat(19, minmax(0, 1fr)) ; }
  if-grid[columns-s="20"] {
    --grid-tc: repeat(20, minmax(0, 1fr)) ; }
  if-grid[columns-s="21"] {
    --grid-tc: repeat(21, minmax(0, 1fr)) ; }
  if-grid[columns-s="22"] {
    --grid-tc: repeat(22, minmax(0, 1fr)) ; }
  if-grid[columns-s="23"] {
    --grid-tc: repeat(23, minmax(0, 1fr)) ; }
  if-grid[columns-s="24"] {
    --grid-tc: repeat(24, minmax(0, 1fr)) ; }
  /* span-s=start... */
  if-grid > if-cell[span-s^="1"] {
    --grid-cs: 1 ; }
  if-grid > if-cell[span-s^="2"] {
    --grid-cs: 2 ; }
  if-grid > if-cell[span-s^="3"] {
    --grid-cs: 3 ; }
  if-grid > if-cell[span-s^="4"] {
    --grid-cs: 4 ; }
  if-grid > if-cell[span-s^="5"] {
    --grid-cs: 5 ; }
  if-grid > if-cell[span-s^="6"] {
    --grid-cs: 6 ; }
  if-grid > if-cell[span-s^="7"] {
    --grid-cs: 7 ; }
  if-grid > if-cell[span-s^="8"] {
    --grid-cs: 8 ; }
  if-grid > if-cell[span-s^="9"] {
    --grid-cs: 9 ; }
  if-grid > if-cell[span-s^="10"] {
    --grid-cs: 10 ; }
  if-grid > if-cell[span-s^="11"] {
    --grid-cs: 11 ; }
  if-grid > if-cell[span-s^="12"] {
    --grid-cs: 12 ; }
  if-grid > if-cell[span-s^="13"] {
    --grid-cs: 13 ; }
  if-grid > if-cell[span-s^="14"] {
    --grid-cs: 14 ; }
  if-grid > if-cell[span-s^="15"] {
    --grid-cs: 15 ; }
  if-grid > if-cell[span-s^="16"] {
    --grid-cs: 16 ; }
  if-grid > if-cell[span-s^="17"] {
    --grid-cs: 17 ; }
  if-grid > if-cell[span-s^="18"] {
    --grid-cs: 18 ; }
  if-grid > if-cell[span-s^="19"] {
    --grid-cs: 19 ; }
  if-grid > if-cell[span-s^="20"] {
    --grid-cs: 20 ; }
  if-grid > if-cell[span-s^="21"] {
    --grid-cs: 21 ; }
  if-grid > if-cell[span-s^="22"] {
    --grid-cs: 22 ; }
  if-grid > if-cell[span-s^="23"] {
    --grid-cs: 23 ; }
  if-grid > if-cell[span-s^="24"] {
    --grid-cs: 24 ; }
  /* span-s=...+width, span-s=...-end */
  if-grid > if-cell[span-s$="+1"], if-grid > if-cell[span-s="1"] {
    --grid-ce: 1 ; }
  if-grid > if-cell[span-s$="+2"], if-grid > if-cell[span-s$="-1"], if-grid > if-cell[span-s="2"] {
    --grid-ce: 2 ; }
  if-grid > if-cell[span-s$="+3"], if-grid > if-cell[span-s$="-2"], if-grid > if-cell[span-s="3"] {
    --grid-ce: 3 ; }
  if-grid > if-cell[span-s$="+4"], if-grid > if-cell[span-s$="-3"], if-grid > if-cell[span-s="4"] {
    --grid-ce: 4 ; }
  if-grid > if-cell[span-s$="+5"], if-grid > if-cell[span-s$="-4"], if-grid > if-cell[span-s="5"] {
    --grid-ce: 5 ; }
  if-grid > if-cell[span-s$="+6"], if-grid > if-cell[span-s$="-5"], if-grid > if-cell[span-s="6"] {
    --grid-ce: 6 ; }
  if-grid > if-cell[span-s$="+7"], if-grid > if-cell[span-s$="-6"], if-grid > if-cell[span-s="7"] {
    --grid-ce: 7 ; }
  if-grid > if-cell[span-s$="+8"], if-grid > if-cell[span-s$="-7"], if-grid > if-cell[span-s="8"] {
    --grid-ce: 8 ; }
  if-grid > if-cell[span-s$="+9"], if-grid > if-cell[span-s$="-8"], if-grid > if-cell[span-s="9"] {
    --grid-ce: 9 ; }
  if-grid > if-cell[span-s$="+10"], if-grid > if-cell[span-s$="-9"], if-grid > if-cell[span-s="10"] {
    --grid-ce: 10 ; }
  if-grid > if-cell[span-s$="+11"], if-grid > if-cell[span-s$="-10"], if-grid > if-cell[span-s="11"] {
    --grid-ce: 11 ; }
  if-grid > if-cell[span-s$="+12"], if-grid > if-cell[span-s$="-11"], if-grid > if-cell[span-s="12"] {
    --grid-ce: 12 ; }
  if-grid > if-cell[span-s$="+13"], if-grid > if-cell[span-s$="-12"], if-grid > if-cell[span-s="13"] {
    --grid-ce: 13 ; }
  if-grid > if-cell[span-s$="+14"], if-grid > if-cell[span-s$="-13"], if-grid > if-cell[span-s="14"] {
    --grid-ce: 14 ; }
  if-grid > if-cell[span-s$="+15"], if-grid > if-cell[span-s$="-14"], if-grid > if-cell[span-s="15"] {
    --grid-ce: 15 ; }
  if-grid > if-cell[span-s$="+16"], if-grid > if-cell[span-s$="-15"], if-grid > if-cell[span-s="16"] {
    --grid-ce: 16 ; }
  if-grid > if-cell[span-s$="+17"], if-grid > if-cell[span-s$="-16"], if-grid > if-cell[span-s="17"] {
    --grid-ce: 17 ; }
  if-grid > if-cell[span-s$="+18"], if-grid > if-cell[span-s$="-17"], if-grid > if-cell[span-s="18"] {
    --grid-ce: 18 ; }
  if-grid > if-cell[span-s$="+19"], if-grid > if-cell[span-s$="-18"], if-grid > if-cell[span-s="19"] {
    --grid-ce: 19 ; }
  if-grid > if-cell[span-s$="+20"], if-grid > if-cell[span-s$="-19"], if-grid > if-cell[span-s="20"] {
    --grid-ce: 20 ; }
  if-grid > if-cell[span-s$="+21"], if-grid > if-cell[span-s$="-20"], if-grid > if-cell[span-s="21"] {
    --grid-ce: 21 ; }
  if-grid > if-cell[span-s$="+22"], if-grid > if-cell[span-s$="-21"], if-grid > if-cell[span-s="22"] {
    --grid-ce: 22 ; }
  if-grid > if-cell[span-s$="+23"], if-grid > if-cell[span-s$="-22"], if-grid > if-cell[span-s="23"] {
    --grid-ce: 23 ; }
  if-grid > if-cell[span-s$="+24"], if-grid > if-cell[span-s$="-23"], if-grid > if-cell[span-s="24"] {
    --grid-ce: 24 ; }
  if-grid > if-cell[span-s$="-24"] {
    --grid-ce: 25 ; }
  /* connect vars */
  if-grid > if-cell[span-s] {
    grid-column-end: span var(--grid-ce); }
  if-grid > if-cell[span-s*="+"], if-grid > if-cell[span-s*="-"], if-grid > if-cell[span-s*=".."] {
    grid-column-start: var(--grid-cs); }
  if-grid > if-cell[span-s*="-"], if-grid > if-cell[span-s*=".."] {
    grid-column-end: var(--grid-ce); }
  if-grid > if-cell[span-s="row"] {
    grid-column: 1 / -1; } }

/* ==========================================================================
   for window width => 768
   ========================================================================== */
@media only screen and (min-width: 768px) {
  if-grid[columns-m="1"] {
    --grid-tc: repeat(1, minmax(0, 1fr)) ; }
  if-grid[columns-m="2"] {
    --grid-tc: repeat(2, minmax(0, 1fr)) ; }
  if-grid[columns-m="3"] {
    --grid-tc: repeat(3, minmax(0, 1fr)) ; }
  if-grid[columns-m="4"] {
    --grid-tc: repeat(4, minmax(0, 1fr)) ; }
  if-grid[columns-m="5"] {
    --grid-tc: repeat(5, minmax(0, 1fr)) ; }
  if-grid[columns-m="6"] {
    --grid-tc: repeat(6, minmax(0, 1fr)) ; }
  if-grid[columns-m="7"] {
    --grid-tc: repeat(7, minmax(0, 1fr)) ; }
  if-grid[columns-m="8"] {
    --grid-tc: repeat(8, minmax(0, 1fr)) ; }
  if-grid[columns-m="9"] {
    --grid-tc: repeat(9, minmax(0, 1fr)) ; }
  if-grid[columns-m="10"] {
    --grid-tc: repeat(10, minmax(0, 1fr)) ; }
  if-grid[columns-m="11"] {
    --grid-tc: repeat(11, minmax(0, 1fr)) ; }
  if-grid[columns-m="12"] {
    --grid-tc: repeat(12, minmax(0, 1fr)) ; }
  if-grid[columns-m="13"] {
    --grid-tc: repeat(13, minmax(0, 1fr)) ; }
  if-grid[columns-m="14"] {
    --grid-tc: repeat(14, minmax(0, 1fr)) ; }
  if-grid[columns-m="15"] {
    --grid-tc: repeat(15, minmax(0, 1fr)) ; }
  if-grid[columns-m="16"] {
    --grid-tc: repeat(16, minmax(0, 1fr)) ; }
  if-grid[columns-m="17"] {
    --grid-tc: repeat(17, minmax(0, 1fr)) ; }
  if-grid[columns-m="18"] {
    --grid-tc: repeat(18, minmax(0, 1fr)) ; }
  if-grid[columns-m="19"] {
    --grid-tc: repeat(19, minmax(0, 1fr)) ; }
  if-grid[columns-m="20"] {
    --grid-tc: repeat(20, minmax(0, 1fr)) ; }
  if-grid[columns-m="21"] {
    --grid-tc: repeat(21, minmax(0, 1fr)) ; }
  if-grid[columns-m="22"] {
    --grid-tc: repeat(22, minmax(0, 1fr)) ; }
  if-grid[columns-m="23"] {
    --grid-tc: repeat(23, minmax(0, 1fr)) ; }
  if-grid[columns-m="24"] {
    --grid-tc: repeat(24, minmax(0, 1fr)) ; }
  /* span-s=start... */
  if-grid > if-cell[span-m^="1"] {
    --grid-cs: 1 ; }
  if-grid > if-cell[span-m^="2"] {
    --grid-cs: 2 ; }
  if-grid > if-cell[span-m^="3"] {
    --grid-cs: 3 ; }
  if-grid > if-cell[span-m^="4"] {
    --grid-cs: 4 ; }
  if-grid > if-cell[span-m^="5"] {
    --grid-cs: 5 ; }
  if-grid > if-cell[span-m^="6"] {
    --grid-cs: 6 ; }
  if-grid > if-cell[span-m^="7"] {
    --grid-cs: 7 ; }
  if-grid > if-cell[span-m^="8"] {
    --grid-cs: 8 ; }
  if-grid > if-cell[span-m^="9"] {
    --grid-cs: 9 ; }
  if-grid > if-cell[span-m^="10"] {
    --grid-cs: 10 ; }
  if-grid > if-cell[span-m^="11"] {
    --grid-cs: 11 ; }
  if-grid > if-cell[span-m^="12"] {
    --grid-cs: 12 ; }
  if-grid > if-cell[span-m^="13"] {
    --grid-cs: 13 ; }
  if-grid > if-cell[span-m^="14"] {
    --grid-cs: 14 ; }
  if-grid > if-cell[span-m^="15"] {
    --grid-cs: 15 ; }
  if-grid > if-cell[span-m^="16"] {
    --grid-cs: 16 ; }
  if-grid > if-cell[span-m^="17"] {
    --grid-cs: 17 ; }
  if-grid > if-cell[span-m^="18"] {
    --grid-cs: 18 ; }
  if-grid > if-cell[span-m^="19"] {
    --grid-cs: 19 ; }
  if-grid > if-cell[span-m^="20"] {
    --grid-cs: 20 ; }
  if-grid > if-cell[span-m^="21"] {
    --grid-cs: 21 ; }
  if-grid > if-cell[span-m^="22"] {
    --grid-cs: 22 ; }
  if-grid > if-cell[span-m^="23"] {
    --grid-cs: 23 ; }
  if-grid > if-cell[span-m^="24"] {
    --grid-cs: 24 ; }
  /* span-s=...+width, span-s=...-end */
  if-grid > if-cell[span-m$="+1"], if-grid > if-cell[span-m="1"] {
    --grid-ce: 1 ; }
  if-grid > if-cell[span-m$="+2"], if-grid > if-cell[span-m$="-1"], if-grid > if-cell[span-m="2"] {
    --grid-ce: 2 ; }
  if-grid > if-cell[span-m$="+3"], if-grid > if-cell[span-m$="-2"], if-grid > if-cell[span-m="3"] {
    --grid-ce: 3 ; }
  if-grid > if-cell[span-m$="+4"], if-grid > if-cell[span-m$="-3"], if-grid > if-cell[span-m="4"] {
    --grid-ce: 4 ; }
  if-grid > if-cell[span-m$="+5"], if-grid > if-cell[span-m$="-4"], if-grid > if-cell[span-m="5"] {
    --grid-ce: 5 ; }
  if-grid > if-cell[span-m$="+6"], if-grid > if-cell[span-m$="-5"], if-grid > if-cell[span-m="6"] {
    --grid-ce: 6 ; }
  if-grid > if-cell[span-m$="+7"], if-grid > if-cell[span-m$="-6"], if-grid > if-cell[span-m="7"] {
    --grid-ce: 7 ; }
  if-grid > if-cell[span-m$="+8"], if-grid > if-cell[span-m$="-7"], if-grid > if-cell[span-m="8"] {
    --grid-ce: 8 ; }
  if-grid > if-cell[span-m$="+9"], if-grid > if-cell[span-m$="-8"], if-grid > if-cell[span-m="9"] {
    --grid-ce: 9 ; }
  if-grid > if-cell[span-m$="+10"], if-grid > if-cell[span-m$="-9"], if-grid > if-cell[span-m="10"] {
    --grid-ce: 10 ; }
  if-grid > if-cell[span-m$="+11"], if-grid > if-cell[span-m$="-10"], if-grid > if-cell[span-m="11"] {
    --grid-ce: 11 ; }
  if-grid > if-cell[span-m$="+12"], if-grid > if-cell[span-m$="-11"], if-grid > if-cell[span-m="12"] {
    --grid-ce: 12 ; }
  if-grid > if-cell[span-m$="+13"], if-grid > if-cell[span-m$="-12"], if-grid > if-cell[span-m="13"] {
    --grid-ce: 13 ; }
  if-grid > if-cell[span-m$="+14"], if-grid > if-cell[span-m$="-13"], if-grid > if-cell[span-m="14"] {
    --grid-ce: 14 ; }
  if-grid > if-cell[span-m$="+15"], if-grid > if-cell[span-m$="-14"], if-grid > if-cell[span-m="15"] {
    --grid-ce: 15 ; }
  if-grid > if-cell[span-m$="+16"], if-grid > if-cell[span-m$="-15"], if-grid > if-cell[span-m="16"] {
    --grid-ce: 16 ; }
  if-grid > if-cell[span-m$="+17"], if-grid > if-cell[span-m$="-16"], if-grid > if-cell[span-m="17"] {
    --grid-ce: 17 ; }
  if-grid > if-cell[span-m$="+18"], if-grid > if-cell[span-m$="-17"], if-grid > if-cell[span-m="18"] {
    --grid-ce: 18 ; }
  if-grid > if-cell[span-m$="+19"], if-grid > if-cell[span-m$="-18"], if-grid > if-cell[span-m="19"] {
    --grid-ce: 19 ; }
  if-grid > if-cell[span-m$="+20"], if-grid > if-cell[span-m$="-19"], if-grid > if-cell[span-m="20"] {
    --grid-ce: 20 ; }
  if-grid > if-cell[span-m$="+21"], if-grid > if-cell[span-m$="-20"], if-grid > if-cell[span-m="21"] {
    --grid-ce: 21 ; }
  if-grid > if-cell[span-m$="+22"], if-grid > if-cell[span-m$="-21"], if-grid > if-cell[span-m="22"] {
    --grid-ce: 22 ; }
  if-grid > if-cell[span-m$="+23"], if-grid > if-cell[span-m$="-22"], if-grid > if-cell[span-m="23"] {
    --grid-ce: 23 ; }
  if-grid > if-cell[span-m$="+24"], if-grid > if-cell[span-m$="-23"], if-grid > if-cell[span-m="24"] {
    --grid-ce: 24 ; }
  if-grid > if-cell[span-m$="-24"] {
    --grid-ce: 25 ; }
  /* connect vars */
  if-grid > if-cell[span-m] {
    grid-column-end: span var(--grid-ce); }
  if-grid > if-cell[span-m*="+"], if-grid > if-cell[span-m*="-"], if-grid > if-cell[span-m*=".."] {
    grid-column-start: var(--grid-cs); }
  if-grid > if-cell[span-m*="-"], if-grid > if-cell[span-m*=".."] {
    grid-column-end: var(--grid-ce); }
  if-grid > if-cell[span-m="row"] {
    grid-column: 1 / -1; } }

/* ==========================================================================
   for window width => 992
   ========================================================================== */
@media only screen and (min-width: 992px) {
  if-grid[columns-l="1"] {
    --grid-tc: repeat(1, minmax(0, 1fr)) ; }
  if-grid[columns-l="2"] {
    --grid-tc: repeat(2, minmax(0, 1fr)) ; }
  if-grid[columns-l="3"] {
    --grid-tc: repeat(3, minmax(0, 1fr)) ; }
  if-grid[columns-l="4"] {
    --grid-tc: repeat(4, minmax(0, 1fr)) ; }
  if-grid[columns-l="5"] {
    --grid-tc: repeat(5, minmax(0, 1fr)) ; }
  if-grid[columns-l="6"] {
    --grid-tc: repeat(6, minmax(0, 1fr)) ; }
  if-grid[columns-l="7"] {
    --grid-tc: repeat(7, minmax(0, 1fr)) ; }
  if-grid[columns-l="8"] {
    --grid-tc: repeat(8, minmax(0, 1fr)) ; }
  if-grid[columns-l="9"] {
    --grid-tc: repeat(9, minmax(0, 1fr)) ; }
  if-grid[columns-l="10"] {
    --grid-tc: repeat(10, minmax(0, 1fr)) ; }
  if-grid[columns-l="11"] {
    --grid-tc: repeat(11, minmax(0, 1fr)) ; }
  if-grid[columns-l="12"] {
    --grid-tc: repeat(12, minmax(0, 1fr)) ; }
  if-grid[columns-l="13"] {
    --grid-tc: repeat(13, minmax(0, 1fr)) ; }
  if-grid[columns-l="14"] {
    --grid-tc: repeat(14, minmax(0, 1fr)) ; }
  if-grid[columns-l="15"] {
    --grid-tc: repeat(15, minmax(0, 1fr)) ; }
  if-grid[columns-l="16"] {
    --grid-tc: repeat(16, minmax(0, 1fr)) ; }
  if-grid[columns-l="17"] {
    --grid-tc: repeat(17, minmax(0, 1fr)) ; }
  if-grid[columns-l="18"] {
    --grid-tc: repeat(18, minmax(0, 1fr)) ; }
  if-grid[columns-l="19"] {
    --grid-tc: repeat(19, minmax(0, 1fr)) ; }
  if-grid[columns-l="20"] {
    --grid-tc: repeat(20, minmax(0, 1fr)) ; }
  if-grid[columns-l="21"] {
    --grid-tc: repeat(21, minmax(0, 1fr)) ; }
  if-grid[columns-l="22"] {
    --grid-tc: repeat(22, minmax(0, 1fr)) ; }
  if-grid[columns-l="23"] {
    --grid-tc: repeat(23, minmax(0, 1fr)) ; }
  if-grid[columns-l="24"] {
    --grid-tc: repeat(24, minmax(0, 1fr)) ; }
  /* span-l=start... */
  if-grid > if-cell[span-l^="1"] {
    --grid-cs: 1 ; }
  if-grid > if-cell[span-l^="2"] {
    --grid-cs: 2 ; }
  if-grid > if-cell[span-l^="3"] {
    --grid-cs: 3 ; }
  if-grid > if-cell[span-l^="4"] {
    --grid-cs: 4 ; }
  if-grid > if-cell[span-l^="5"] {
    --grid-cs: 5 ; }
  if-grid > if-cell[span-l^="6"] {
    --grid-cs: 6 ; }
  if-grid > if-cell[span-l^="7"] {
    --grid-cs: 7 ; }
  if-grid > if-cell[span-l^="8"] {
    --grid-cs: 8 ; }
  if-grid > if-cell[span-l^="9"] {
    --grid-cs: 9 ; }
  if-grid > if-cell[span-l^="10"] {
    --grid-cs: 10 ; }
  if-grid > if-cell[span-l^="11"] {
    --grid-cs: 11 ; }
  if-grid > if-cell[span-l^="12"] {
    --grid-cs: 12 ; }
  if-grid > if-cell[span-l^="13"] {
    --grid-cs: 13 ; }
  if-grid > if-cell[span-l^="14"] {
    --grid-cs: 14 ; }
  if-grid > if-cell[span-l^="15"] {
    --grid-cs: 15 ; }
  if-grid > if-cell[span-l^="16"] {
    --grid-cs: 16 ; }
  if-grid > if-cell[span-l^="17"] {
    --grid-cs: 17 ; }
  if-grid > if-cell[span-l^="18"] {
    --grid-cs: 18 ; }
  if-grid > if-cell[span-l^="19"] {
    --grid-cs: 19 ; }
  if-grid > if-cell[span-l^="20"] {
    --grid-cs: 20 ; }
  if-grid > if-cell[span-l^="21"] {
    --grid-cs: 21 ; }
  if-grid > if-cell[span-l^="22"] {
    --grid-cs: 22 ; }
  if-grid > if-cell[span-l^="23"] {
    --grid-cs: 23 ; }
  if-grid > if-cell[span-l^="24"] {
    --grid-cs: 24 ; }
  /* span-l=...+width, span-l=...-end */
  if-grid > if-cell[span-l$="+1"], if-grid > if-cell[span-l="1"] {
    --grid-ce: 1 ; }
  if-grid > if-cell[span-l$="+2"], if-grid > if-cell[span-l$="-1"], if-grid > if-cell[span-l="2"] {
    --grid-ce: 2 ; }
  if-grid > if-cell[span-l$="+3"], if-grid > if-cell[span-l$="-2"], if-grid > if-cell[span-l="3"] {
    --grid-ce: 3 ; }
  if-grid > if-cell[span-l$="+4"], if-grid > if-cell[span-l$="-3"], if-grid > if-cell[span-l="4"] {
    --grid-ce: 4 ; }
  if-grid > if-cell[span-l$="+5"], if-grid > if-cell[span-l$="-4"], if-grid > if-cell[span-l="5"] {
    --grid-ce: 5 ; }
  if-grid > if-cell[span-l$="+6"], if-grid > if-cell[span-l$="-5"], if-grid > if-cell[span-l="6"] {
    --grid-ce: 6 ; }
  if-grid > if-cell[span-l$="+7"], if-grid > if-cell[span-l$="-6"], if-grid > if-cell[span-l="7"] {
    --grid-ce: 7 ; }
  if-grid > if-cell[span-l$="+8"], if-grid > if-cell[span-l$="-7"], if-grid > if-cell[span-l="8"] {
    --grid-ce: 8 ; }
  if-grid > if-cell[span-l$="+9"], if-grid > if-cell[span-l$="-8"], if-grid > if-cell[span-l="9"] {
    --grid-ce: 9 ; }
  if-grid > if-cell[span-l$="+10"], if-grid > if-cell[span-l$="-9"], if-grid > if-cell[span-l="10"] {
    --grid-ce: 10 ; }
  if-grid > if-cell[span-l$="+11"], if-grid > if-cell[span-l$="-10"], if-grid > if-cell[span-l="11"] {
    --grid-ce: 11 ; }
  if-grid > if-cell[span-l$="+12"], if-grid > if-cell[span-l$="-11"], if-grid > if-cell[span-l="12"] {
    --grid-ce: 12 ; }
  if-grid > if-cell[span-l$="+13"], if-grid > if-cell[span-l$="-12"], if-grid > if-cell[span-l="13"] {
    --grid-ce: 13 ; }
  if-grid > if-cell[span-l$="+14"], if-grid > if-cell[span-l$="-13"], if-grid > if-cell[span-l="14"] {
    --grid-ce: 14 ; }
  if-grid > if-cell[span-l$="+15"], if-grid > if-cell[span-l$="-14"], if-grid > if-cell[span-l="15"] {
    --grid-ce: 15 ; }
  if-grid > if-cell[span-l$="+16"], if-grid > if-cell[span-l$="-15"], if-grid > if-cell[span-l="16"] {
    --grid-ce: 16 ; }
  if-grid > if-cell[span-l$="+17"], if-grid > if-cell[span-l$="-16"], if-grid > if-cell[span-l="17"] {
    --grid-ce: 17 ; }
  if-grid > if-cell[span-l$="+18"], if-grid > if-cell[span-l$="-17"], if-grid > if-cell[span-l="18"] {
    --grid-ce: 18 ; }
  if-grid > if-cell[span-l$="+19"], if-grid > if-cell[span-l$="-18"], if-grid > if-cell[span-l="19"] {
    --grid-ce: 19 ; }
  if-grid > if-cell[span-l$="+20"], if-grid > if-cell[span-l$="-19"], if-grid > if-cell[span-l="20"] {
    --grid-ce: 20 ; }
  if-grid > if-cell[span-l$="+21"], if-grid > if-cell[span-l$="-20"], if-grid > if-cell[span-l="21"] {
    --grid-ce: 21 ; }
  if-grid > if-cell[span-l$="+22"], if-grid > if-cell[span-l$="-21"], if-grid > if-cell[span-l="22"] {
    --grid-ce: 22 ; }
  if-grid > if-cell[span-l$="+23"], if-grid > if-cell[span-l$="-22"], if-grid > if-cell[span-l="23"] {
    --grid-ce: 23 ; }
  if-grid > if-cell[span-l$="+24"], if-grid > if-cell[span-l$="-23"], if-grid > if-cell[span-l="24"] {
    --grid-ce: 24 ; }
  if-grid > if-cell[span-l$="-24"] {
    --grid-ce: 25 ; }
  /* connect vars */
  if-grid > if-cell[span-l] {
    grid-column-end: span var(--grid-ce); }
  if-grid > if-cell[span-l*="+"], if-grid > if-cell[span-l*="-"], if-grid > if-cell[span-l*=".."] {
    grid-column-start: var(--grid-cs); }
  if-grid > if-cell[span-l*="-"], if-grid > if-cell[span-l*=".."] {
    grid-column-end: var(--grid-ce); }
  if-grid > if-cell[span-l="row"] {
    grid-column: 1 / -1; } }

/* ==========================================================================
   for window width => 1200
   ========================================================================== */
@media only screen and (min-width: 1200px) {
  if-grid[columns-xl="1"] {
    --grid-tc: repeat(1, minmax(0, 1fr)) ; }
  if-grid[columns-xl="2"] {
    --grid-tc: repeat(2, minmax(0, 1fr)) ; }
  if-grid[columns-xl="3"] {
    --grid-tc: repeat(3, minmax(0, 1fr)) ; }
  if-grid[columns-xl="4"] {
    --grid-tc: repeat(4, minmax(0, 1fr)) ; }
  if-grid[columns-xl="5"] {
    --grid-tc: repeat(5, minmax(0, 1fr)) ; }
  if-grid[columns-xl="6"] {
    --grid-tc: repeat(6, minmax(0, 1fr)) ; }
  if-grid[columns-xl="7"] {
    --grid-tc: repeat(7, minmax(0, 1fr)) ; }
  if-grid[columns-xl="8"] {
    --grid-tc: repeat(8, minmax(0, 1fr)) ; }
  if-grid[columns-xl="9"] {
    --grid-tc: repeat(9, minmax(0, 1fr)) ; }
  if-grid[columns-xl="10"] {
    --grid-tc: repeat(10, minmax(0, 1fr)) ; }
  if-grid[columns-xl="11"] {
    --grid-tc: repeat(11, minmax(0, 1fr)) ; }
  if-grid[columns-xl="12"] {
    --grid-tc: repeat(12, minmax(0, 1fr)) ; }
  if-grid[columns-xl="13"] {
    --grid-tc: repeat(13, minmax(0, 1fr)) ; }
  if-grid[columns-xl="14"] {
    --grid-tc: repeat(14, minmax(0, 1fr)) ; }
  if-grid[columns-xl="15"] {
    --grid-tc: repeat(15, minmax(0, 1fr)) ; }
  if-grid[columns-xl="16"] {
    --grid-tc: repeat(16, minmax(0, 1fr)) ; }
  if-grid[columns-xl="17"] {
    --grid-tc: repeat(17, minmax(0, 1fr)) ; }
  if-grid[columns-xl="18"] {
    --grid-tc: repeat(18, minmax(0, 1fr)) ; }
  if-grid[columns-xl="19"] {
    --grid-tc: repeat(19, minmax(0, 1fr)) ; }
  if-grid[columns-xl="20"] {
    --grid-tc: repeat(20, minmax(0, 1fr)) ; }
  if-grid[columns-xl="21"] {
    --grid-tc: repeat(21, minmax(0, 1fr)) ; }
  if-grid[columns-xl="22"] {
    --grid-tc: repeat(22, minmax(0, 1fr)) ; }
  if-grid[columns-xl="23"] {
    --grid-tc: repeat(23, minmax(0, 1fr)) ; }
  if-grid[columns-xl="24"] {
    --grid-tc: repeat(24, minmax(0, 1fr)) ; }
  /* span-l=start... */
  if-grid > if-cell[span-xl^="1"] {
    --grid-cs: 1 ; }
  if-grid > if-cell[span-xl^="2"] {
    --grid-cs: 2 ; }
  if-grid > if-cell[span-xl^="3"] {
    --grid-cs: 3 ; }
  if-grid > if-cell[span-xl^="4"] {
    --grid-cs: 4 ; }
  if-grid > if-cell[span-xl^="5"] {
    --grid-cs: 5 ; }
  if-grid > if-cell[span-xl^="6"] {
    --grid-cs: 6 ; }
  if-grid > if-cell[span-xl^="7"] {
    --grid-cs: 7 ; }
  if-grid > if-cell[span-xl^="8"] {
    --grid-cs: 8 ; }
  if-grid > if-cell[span-xl^="9"] {
    --grid-cs: 9 ; }
  if-grid > if-cell[span-xl^="10"] {
    --grid-cs: 10 ; }
  if-grid > if-cell[span-xl^="11"] {
    --grid-cs: 11 ; }
  if-grid > if-cell[span-xl^="12"] {
    --grid-cs: 12 ; }
  if-grid > if-cell[span-xl^="13"] {
    --grid-cs: 13 ; }
  if-grid > if-cell[span-xl^="14"] {
    --grid-cs: 14 ; }
  if-grid > if-cell[span-xl^="15"] {
    --grid-cs: 15 ; }
  if-grid > if-cell[span-xl^="16"] {
    --grid-cs: 16 ; }
  if-grid > if-cell[span-xl^="17"] {
    --grid-cs: 17 ; }
  if-grid > if-cell[span-xl^="18"] {
    --grid-cs: 18 ; }
  if-grid > if-cell[span-xl^="19"] {
    --grid-cs: 19 ; }
  if-grid > if-cell[span-xl^="20"] {
    --grid-cs: 20 ; }
  if-grid > if-cell[span-xl^="21"] {
    --grid-cs: 21 ; }
  if-grid > if-cell[span-xl^="22"] {
    --grid-cs: 22 ; }
  if-grid > if-cell[span-xl^="23"] {
    --grid-cs: 23 ; }
  if-grid > if-cell[span-xl^="24"] {
    --grid-cs: 24 ; }
  /* span-l=...+width, span-l=...-end */
  if-grid > if-cell[span-xl$="+1"], if-grid > if-cell[span-xl="1"] {
    --grid-ce: 1 ; }
  if-grid > if-cell[span-xl$="+2"], if-grid > if-cell[span-xl$="-1"], if-grid > if-cell[span-xl="2"] {
    --grid-ce: 2 ; }
  if-grid > if-cell[span-xl$="+3"], if-grid > if-cell[span-xl$="-2"], if-grid > if-cell[span-xl="3"] {
    --grid-ce: 3 ; }
  if-grid > if-cell[span-xl$="+4"], if-grid > if-cell[span-xl$="-3"], if-grid > if-cell[span-xl="4"] {
    --grid-ce: 4 ; }
  if-grid > if-cell[span-xl$="+5"], if-grid > if-cell[span-xl$="-4"], if-grid > if-cell[span-xl="5"] {
    --grid-ce: 5 ; }
  if-grid > if-cell[span-xl$="+6"], if-grid > if-cell[span-xl$="-5"], if-grid > if-cell[span-xl="6"] {
    --grid-ce: 6 ; }
  if-grid > if-cell[span-xl$="+7"], if-grid > if-cell[span-xl$="-6"], if-grid > if-cell[span-xl="7"] {
    --grid-ce: 7 ; }
  if-grid > if-cell[span-xl$="+8"], if-grid > if-cell[span-xl$="-7"], if-grid > if-cell[span-xl="8"] {
    --grid-ce: 8 ; }
  if-grid > if-cell[span-xl$="+9"], if-grid > if-cell[span-xl$="-8"], if-grid > if-cell[span-xl="9"] {
    --grid-ce: 9 ; }
  if-grid > if-cell[span-xl$="+10"], if-grid > if-cell[span-xl$="-9"], if-grid > if-cell[span-xl="10"] {
    --grid-ce: 10 ; }
  if-grid > if-cell[span-xl$="+11"], if-grid > if-cell[span-xl$="-10"], if-grid > if-cell[span-xl="11"] {
    --grid-ce: 11 ; }
  if-grid > if-cell[span-xl$="+12"], if-grid > if-cell[span-xl$="-11"], if-grid > if-cell[span-xl="12"] {
    --grid-ce: 12 ; }
  if-grid > if-cell[span-xl$="+13"], if-grid > if-cell[span-xl$="-12"], if-grid > if-cell[span-xl="13"] {
    --grid-ce: 13 ; }
  if-grid > if-cell[span-xl$="+14"], if-grid > if-cell[span-xl$="-13"], if-grid > if-cell[span-xl="14"] {
    --grid-ce: 14 ; }
  if-grid > if-cell[span-xl$="+15"], if-grid > if-cell[span-xl$="-14"], if-grid > if-cell[span-xl="15"] {
    --grid-ce: 15 ; }
  if-grid > if-cell[span-xl$="+16"], if-grid > if-cell[span-xl$="-15"], if-grid > if-cell[span-xl="16"] {
    --grid-ce: 16 ; }
  if-grid > if-cell[span-xl$="+17"], if-grid > if-cell[span-xl$="-16"], if-grid > if-cell[span-xl="17"] {
    --grid-ce: 17 ; }
  if-grid > if-cell[span-xl$="+18"], if-grid > if-cell[span-xl$="-17"], if-grid > if-cell[span-xl="18"] {
    --grid-ce: 18 ; }
  if-grid > if-cell[span-xl$="+19"], if-grid > if-cell[span-xl$="-18"], if-grid > if-cell[span-xl="19"] {
    --grid-ce: 19 ; }
  if-grid > if-cell[span-xl$="+20"], if-grid > if-cell[span-xl$="-19"], if-grid > if-cell[span-xl="20"] {
    --grid-ce: 20 ; }
  if-grid > if-cell[span-xl$="+21"], if-grid > if-cell[span-xl$="-20"], if-grid > if-cell[span-xl="21"] {
    --grid-ce: 21 ; }
  if-grid > if-cell[span-xl$="+22"], if-grid > if-cell[span-xl$="-21"], if-grid > if-cell[span-xl="22"] {
    --grid-ce: 22 ; }
  if-grid > if-cell[span-xl$="+23"], if-grid > if-cell[span-xl$="-22"], if-grid > if-cell[span-xl="23"] {
    --grid-ce: 23 ; }
  if-grid > if-cell[span-xl$="+24"], if-grid > if-cell[span-xl$="-23"], if-grid > if-cell[span-xl="24"] {
    --grid-ce: 24 ; }
  if-grid > if-cell[span-xl$="-24"] {
    --grid-ce: 25 ; }
  /* connect vars */
  if-grid > if-cell[span-xl] {
    grid-column-end: span var(--grid-ce); }
  if-grid > if-cell[span-xl*="+"], if-grid > if-cell[span-xl*="-"], if-grid > if-cell[span-xl*=".."] {
    grid-column-start: var(--grid-cs); }
  if-grid > if-cell[span-xl*="-"], if-grid > if-cell[span-xl*=".."] {
    grid-column-end: var(--grid-ce); }
  if-grid > if-cell[span-xl="row"] {
    grid-column: 1 / -1; } }

/* ==========================================================================
   for window width => 1600
   ========================================================================== */
@media only screen and (min-width: 1600px) {
  if-grid[columns-xxl="1"] {
    --grid-tc: repeat(1, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="2"] {
    --grid-tc: repeat(2, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="3"] {
    --grid-tc: repeat(3, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="4"] {
    --grid-tc: repeat(4, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="5"] {
    --grid-tc: repeat(5, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="6"] {
    --grid-tc: repeat(6, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="7"] {
    --grid-tc: repeat(7, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="8"] {
    --grid-tc: repeat(8, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="9"] {
    --grid-tc: repeat(9, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="10"] {
    --grid-tc: repeat(10, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="11"] {
    --grid-tc: repeat(11, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="12"] {
    --grid-tc: repeat(12, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="13"] {
    --grid-tc: repeat(13, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="14"] {
    --grid-tc: repeat(14, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="15"] {
    --grid-tc: repeat(15, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="16"] {
    --grid-tc: repeat(16, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="17"] {
    --grid-tc: repeat(17, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="18"] {
    --grid-tc: repeat(18, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="19"] {
    --grid-tc: repeat(19, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="20"] {
    --grid-tc: repeat(20, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="21"] {
    --grid-tc: repeat(21, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="22"] {
    --grid-tc: repeat(22, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="23"] {
    --grid-tc: repeat(23, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="24"] {
    --grid-tc: repeat(24, minmax(0, 1fr)) ; }
  /* span-l=start... */
  if-grid > if-cell[span-xxl^="1"] {
    --grid-cs: 1 ; }
  if-grid > if-cell[span-xxl^="2"] {
    --grid-cs: 2 ; }
  if-grid > if-cell[span-xxl^="3"] {
    --grid-cs: 3 ; }
  if-grid > if-cell[span-xxl^="4"] {
    --grid-cs: 4 ; }
  if-grid > if-cell[span-xxl^="5"] {
    --grid-cs: 5 ; }
  if-grid > if-cell[span-xxl^="6"] {
    --grid-cs: 6 ; }
  if-grid > if-cell[span-xxl^="7"] {
    --grid-cs: 7 ; }
  if-grid > if-cell[span-xxl^="8"] {
    --grid-cs: 8 ; }
  if-grid > if-cell[span-xxl^="9"] {
    --grid-cs: 9 ; }
  if-grid > if-cell[span-xxl^="10"] {
    --grid-cs: 10 ; }
  if-grid > if-cell[span-xxl^="11"] {
    --grid-cs: 11 ; }
  if-grid > if-cell[span-xxl^="12"] {
    --grid-cs: 12 ; }
  if-grid > if-cell[span-xxl^="13"] {
    --grid-cs: 13 ; }
  if-grid > if-cell[span-xxl^="14"] {
    --grid-cs: 14 ; }
  if-grid > if-cell[span-xxl^="15"] {
    --grid-cs: 15 ; }
  if-grid > if-cell[span-xxl^="16"] {
    --grid-cs: 16 ; }
  if-grid > if-cell[span-xxl^="17"] {
    --grid-cs: 17 ; }
  if-grid > if-cell[span-xxl^="18"] {
    --grid-cs: 18 ; }
  if-grid > if-cell[span-xxl^="19"] {
    --grid-cs: 19 ; }
  if-grid > if-cell[span-xxl^="20"] {
    --grid-cs: 20 ; }
  if-grid > if-cell[span-xxl^="21"] {
    --grid-cs: 21 ; }
  if-grid > if-cell[span-xxl^="22"] {
    --grid-cs: 22 ; }
  if-grid > if-cell[span-xxl^="23"] {
    --grid-cs: 23 ; }
  if-grid > if-cell[span-xxl^="24"] {
    --grid-cs: 24 ; }
  /* span-l=...+width, span-l=...-end */
  if-grid > if-cell[span-xxl$="+1"], if-grid > if-cell[span-xxl="1"] {
    --grid-ce: 1 ; }
  if-grid > if-cell[span-xxl$="+2"], if-grid > if-cell[span-xxl$="-1"], if-grid > if-cell[span-xxl="2"] {
    --grid-ce: 2 ; }
  if-grid > if-cell[span-xxl$="+3"], if-grid > if-cell[span-xxl$="-2"], if-grid > if-cell[span-xxl="3"] {
    --grid-ce: 3 ; }
  if-grid > if-cell[span-xxl$="+4"], if-grid > if-cell[span-xxl$="-3"], if-grid > if-cell[span-xxl="4"] {
    --grid-ce: 4 ; }
  if-grid > if-cell[span-xxl$="+5"], if-grid > if-cell[span-xxl$="-4"], if-grid > if-cell[span-xxl="5"] {
    --grid-ce: 5 ; }
  if-grid > if-cell[span-xxl$="+6"], if-grid > if-cell[span-xxl$="-5"], if-grid > if-cell[span-xxl="6"] {
    --grid-ce: 6 ; }
  if-grid > if-cell[span-xxl$="+7"], if-grid > if-cell[span-xxl$="-6"], if-grid > if-cell[span-xxl="7"] {
    --grid-ce: 7 ; }
  if-grid > if-cell[span-xxl$="+8"], if-grid > if-cell[span-xxl$="-7"], if-grid > if-cell[span-xxl="8"] {
    --grid-ce: 8 ; }
  if-grid > if-cell[span-xxl$="+9"], if-grid > if-cell[span-xxl$="-8"], if-grid > if-cell[span-xxl="9"] {
    --grid-ce: 9 ; }
  if-grid > if-cell[span-xxl$="+10"], if-grid > if-cell[span-xxl$="-9"], if-grid > if-cell[span-xxl="10"] {
    --grid-ce: 10 ; }
  if-grid > if-cell[span-xxl$="+11"], if-grid > if-cell[span-xxl$="-10"], if-grid > if-cell[span-xxl="11"] {
    --grid-ce: 11 ; }
  if-grid > if-cell[span-xxl$="+12"], if-grid > if-cell[span-xxl$="-11"], if-grid > if-cell[span-xxl="12"] {
    --grid-ce: 12 ; }
  if-grid > if-cell[span-xxl$="+13"], if-grid > if-cell[span-xxl$="-12"], if-grid > if-cell[span-xxl="13"] {
    --grid-ce: 13 ; }
  if-grid > if-cell[span-xxl$="+14"], if-grid > if-cell[span-xxl$="-13"], if-grid > if-cell[span-xxl="14"] {
    --grid-ce: 14 ; }
  if-grid > if-cell[span-xxl$="+15"], if-grid > if-cell[span-xxl$="-14"], if-grid > if-cell[span-xxl="15"] {
    --grid-ce: 15 ; }
  if-grid > if-cell[span-xxl$="+16"], if-grid > if-cell[span-xxl$="-15"], if-grid > if-cell[span-xxl="16"] {
    --grid-ce: 16 ; }
  if-grid > if-cell[span-xxl$="+17"], if-grid > if-cell[span-xxl$="-16"], if-grid > if-cell[span-xxl="17"] {
    --grid-ce: 17 ; }
  if-grid > if-cell[span-xxl$="+18"], if-grid > if-cell[span-xxl$="-17"], if-grid > if-cell[span-xxl="18"] {
    --grid-ce: 18 ; }
  if-grid > if-cell[span-xxl$="+19"], if-grid > if-cell[span-xxl$="-18"], if-grid > if-cell[span-xxl="19"] {
    --grid-ce: 19 ; }
  if-grid > if-cell[span-xxl$="+20"], if-grid > if-cell[span-xxl$="-19"], if-grid > if-cell[span-xxl="20"] {
    --grid-ce: 20 ; }
  if-grid > if-cell[span-xxl$="+21"], if-grid > if-cell[span-xxl$="-20"], if-grid > if-cell[span-xxl="21"] {
    --grid-ce: 21 ; }
  if-grid > if-cell[span-xxl$="+22"], if-grid > if-cell[span-xxl$="-21"], if-grid > if-cell[span-xxl="22"] {
    --grid-ce: 22 ; }
  if-grid > if-cell[span-xxl$="+23"], if-grid > if-cell[span-xxl$="-22"], if-grid > if-cell[span-xxl="23"] {
    --grid-ce: 23 ; }
  if-grid > if-cell[span-xxl$="+24"], if-grid > if-cell[span-xxl$="-23"], if-grid > if-cell[span-xxl="24"] {
    --grid-ce: 24 ; }
  if-grid > if-cell[span-xxl$="-24"] {
    --grid-ce: 25 ; }
  /* connect vars */
  if-grid > if-cell[span-xxl] {
    grid-column-end: span var(--grid-ce); }
  if-grid > if-cell[span-xxl*="+"], if-grid > if-cell[span-xxl*="-"], if-grid > if-cell[span-xxl*=".."] {
    grid-column-start: var(--grid-cs); }
  if-grid > if-cell[span-xxl*="-"], if-grid > if-cell[span-xxl*=".."] {
    grid-column-end: var(--grid-ce); }
  if-grid > if-cell[span-xxl="row"] {
    grid-column: 1 / -1; } }

/* ==========================================================================
   Additional Styles
   ========================================================================== */
/* .debug can be added to a if-grid to visualize its effective cells */
if-grid.debug > * {
  --color: rgba(248,110,91 ,0.3);
  background-image: linear-gradient(to bottom, var(--color) 0%, var(--color) 100%); }

if-grid.debug > :nth-child(6n+2) {
  --color: rgba(103,126,208,0.3) ; }

if-grid.debug > :nth-child(6n+3) {
  --color: rgba(224,174,72 ,0.3) ; }

if-grid.debug > :nth-child(6n+4) {
  --color: rgba(77, 214,115,0.3) ; }

if-grid.debug > :nth-child(6n+5) {
  --color: rgba(217,103,219,0.3) ; }

if-grid.debug > :nth-child(6n+6) {
  --color: rgba(94, 204,211,0.3) ; }

if-grid.debug > :nth-child(6n+7) {
  --color: rgba(248,110,91 ,0.3) ; }

/* Alignment */
if-grid.cell-center > if-cell {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center; }

if-grid.cell-top > if-cell {
  -webkit-align-self: start;
  -ms-flex-item-align: start;
  -ms-grid-row-align: start;
  align-self: start; }

if-grid.cell-bottom > if-cell {
  -webkit-align-self: end;
  -ms-flex-item-align: end;
  -ms-grid-row-align: end;
  align-self: end; }

.cell-top {
  -webkit-align-self: start;
  -ms-flex-item-align: start;
  -ms-grid-row-align: start;
  align-self: start; }

.cell-middle {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center; }

.cell-bottom {
  -webkit-align-self: end;
  -ms-flex-item-align: end;
  -ms-grid-row-align: end;
  align-self: end; }

/* Cell Alignment */
.cell-start {
  -ms-grid-column-align: start;
  justify-self: start; }

.cell-end {
  -ms-grid-column-align: end;
  justify-self: end; }

.cell-center {
  -ms-grid-column-align: center;
  justify-self: center; }

@media only screen and (min-width: 768px) {
  .cell-end-m {
    -ms-grid-column-align: end;
    justify-self: end; } }

/* Gutters */
if-grid {
  grid-column-gap: 1em;
  grid-row-gap: 1em; }

if-grid.medium {
  grid-column-gap: 1em;
  grid-row-gap: 2em; }
  @media only screen and (min-width: 992px) {
    if-grid.medium {
      grid-column-gap: 2em;
      grid-row-gap: 2em; } }
if-grid.large {
  grid-column-gap: 1em;
  grid-row-gap: 3em; }
  @media only screen and (min-width: 992px) {
    if-grid.large {
      grid-column-gap: 3em;
      grid-row-gap: 3em; } }
/* ==========================================================================
   Flexbox Grid
   ========================================================================== */
.Grid {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0; }

.Grid-cell {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1; }

.Grid-cell-double {
  -webkit-flex: 2;
  flex: 2; }

.Grid-cell--autoSize {
  -webkit-box-flex: 0;
  -moz-box-flex: none;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none; }

/* ==========================================================================
   Nested Grid
   ========================================================================== */
.Grid--flexCells > .Grid-cell {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

.Grid--flexCell > .Grid-cell:last-of-type {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

/* ==========================================================================
   Grid Alignment
   ========================================================================== */
.Grid--top {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start; }

.Grid--bottom {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end; }

.Grid--center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.Grid--justifyCenter {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

/* ==========================================================================
   Grid Cell Alignment
   ========================================================================== */
.Grid-cell--top {
  -ms-flex-item-align: start;
  align-self: flex-start; }

.Grid-cell--bottom {
  -ms-flex-item-align: end;
  align-self: flex-end; }

.Grid-cell--center {
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center; }

/* ==========================================================================
   Grid Cell Columns
   ========================================================================== */
.Grid--fit > .Grid-cell {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1; }

.Grid--full > .Grid-cell {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%; }

.Grid--1of2 > .Grid-cell {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%; }

.Grid--1of3 > .Grid-cell {
  -ms-flex: 0 0 33.3333%;
  flex: 0 0 33.3333%;
  max-width: 33.3333%; }

.Grid--1of4 > .Grid-cell {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%; }

/* ==========================================================================
   Grid Gutters
   ========================================================================== */
.Grid--gutters {
  margin: 0 0 0 -1em; }

.Grid--gutters > .Grid-cell {
  padding: 0 0 0 1em; }

/* Grid Gutters Large */
.Grid--guttersLg {
  margin: 0 0 0 -2em; }

.Grid--guttersLg > .Grid-cell {
  padding: 0 0 0 2em; }

/* Grid Gutters XLarge */
.Grid--guttersXl {
  margin: 0 0 0 -3em; }

.Grid--guttersXl > .Grid-cell {
  padding: 0 0 0 3em; }

/* ==========================================================================
   Header Styles
   ========================================================================== */
header {
  font-size: 2vw;
  -webkit-transition: padding 0.3s ease;
  -moz-transition: padding 0.3s ease;
  -ms-transition: padding 0.3s ease;
  -o-transition: padding 0.3s ease;
  transition: padding 0.3s ease;
  background-color: #1e1e1e;
  color: #F6FFFB;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  padding: 3em 4em; }
  @media (max-width: 700px) {
    header {
      font-size: 14px; } }
  @media (min-width: 1000px) {
    header {
      font-size: 20px; } }
  header .logo {
    -webkit-transition: width 0.3s ease;
    -moz-transition: width 0.3s ease;
    -ms-transition: width 0.3s ease;
    -o-transition: width 0.3s ease;
    transition: width 0.3s ease;
    width: 100%;
    max-width: 180px;
    min-width: 120px; }
  header nav {
    float: right; }
    header nav a {
      -webkit-transition: color 0.5s ease;
      -moz-transition: color 0.5s ease;
      -ms-transition: color 0.5s ease;
      -o-transition: color 0.5s ease;
      transition: color 0.5s ease;
      color: #F6FFFB; }
      header nav a:not(:first-of-type) {
        margin-left: 3em; }
      header nav a:hover {
        color: #00FFA7; }
  header.shrink {
    padding: 1em 4em; }
    header.shrink .logo {
      width: 120px; }

.button {
  padding: 6px 8px;
  border-radius: 10px;
  background-color: #F6FFFB;
  color: #1e1e1e;
  font-weight: 600;
  transition: background-color 0.5s; }

.button:hover {
  background-color: #00FFA7;
  color: #1e1e1e; }

@media only screen and (max-width: 600px) {
  header {
    padding: 3em 2em; }
  header.shrink {
    padding: 1em 2em; } }

/* ==========================================================================
   Footer Styles
   ========================================================================== */
footer {
  font-size: 2vw;
  color: #1e1e1e;
  background-color: #00FFA7;
  padding: 40px;
  width: 100%; }
  @media (max-width: 400px) {
    footer {
      font-size: 8px; } }
  @media (min-width: 700px) {
    footer {
      font-size: 14px; } }
.social-links {
  float: left; }

.footer-info {
  float: right; }

.social-links a {
  color: #1e1e1e;
  margin-right: 30px; }

.footer-info a {
  color: #1e1e1e;
  margin-left: 30px; }

@media only screen and (max-width: 600px) {
  .footer-info {
    float: left; }
  footer {
    padding: 60px 30px; }
  .footer-info a:first-of-type {
    margin-left: 0px; } }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials {
  overflow: hidden;
  margin-bottom: 5em;
  width: 100%;
  height: auto; }
  .testimonials .slider-nav {
    text-align: right;
    margin-bottom: 1em; }
    .testimonials .slider-nav .a-left {
      margin-right: 1em; }
    .testimonials .slider-nav .slick-arrow {
      display: inline-block;
      cursor: pointer; }
      .testimonials .slider-nav .slick-arrow img {
        width: 24px;
        height: auto; }
  .testimonials .carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 100%;
    flex-wrap: wrap; }
    .testimonials .carousel .slick-list,
    .testimonials .carousel .slick-track {
      display: flex; }
    .testimonials .carousel .slick-slide {
      display: flex;
      flex: 1 100%;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      background-color: #00FFA7;
      border-radius: 50px;
      text-align: center;
      padding: 3em 6em;
      margin: 0 20px; }
      .testimonials .carousel .slick-slide:nth-child(6n+1) {
        background-color: #00FFA7; }
      .testimonials .carousel .slick-slide:nth-child(6n+2) {
        background-color: #068FFF; }
      .testimonials .carousel .slick-slide:nth-child(6n+3) {
        background-color: #E0FF00; }
      .testimonials .carousel .slick-slide:nth-child(6n+4) {
        background-color: #FFC239; }
      .testimonials .carousel .slick-slide:nth-child(6n+5) {
        background-color: #E550FF; }
      .testimonials .carousel .slick-slide:nth-child(6n+6) {
        background-color: #FF5C7B; }

.slide-content {
  margin: auto; }

.testimonial-copy {
  font-size: 2vw;
  line-height: 1.3em;
  color: #1e1e1e; }
  @media (max-width: 1200px) {
    .testimonial-copy {
      font-size: 24px; } }
  @media (min-width: 1600px) {
    .testimonial-copy {
      font-size: 32px; } }
.testimonial-underline {
  margin: 30px auto;
  background-color: #1e1e1e;
  width: 80px;
  height: 2px; }

.testimonial-name, .testimonial-role {
  font-size: 1.5vw;
  color: #1e1e1e; }
  @media (max-width: 933.3333333333px) {
    .testimonial-name, .testimonial-role {
      font-size: 14px; } }
  @media (min-width: 1333.3333333333px) {
    .testimonial-name, .testimonial-role {
      font-size: 20px; } }
.testimonial-name {
  font-weight: 600; }

@media only screen and (max-width: 576px) {
  .testimonials .carousel .slick-slide {
    padding: 3em 2em;
    margin: 0 10px; } }

/* ==========================================================================
   Services Section
   ========================================================================== */
#services .service-item {
  max-width: 1000px;
  align-items: center;
  margin: 0 auto; }
  #services .service-item:not(:last-of-type) {
    margin-bottom: 6em; }
  #services .service-item:last-of-type {
    margin-bottom: 1em; }
  #services .service-item:nth-child(even) {
    flex-direction: row-reverse; }
  #services .service-item .service-image {
    width: 100%; }
  #services .service-item .service-copy {
    padding: 0 30px;
    width: 100%; }
    #services .service-item .service-copy .service-heading {
      font-size: 4vw;
      font-weight: 600;
      line-height: 1em;
      letter-spacing: -0.03em;
      padding-bottom: 0.5em; }
      @media (max-width: 800px) {
        #services .service-item .service-copy .service-heading {
          font-size: 32px; } }
      @media (min-width: 1200px) {
        #services .service-item .service-copy .service-heading {
          font-size: 48px; } }
/* ==========================================================================
   Cookie Cnsent
   ========================================================================== */
#cookiePopup {
  width: 80%;
  height: auto;
  -webkit-transition: color 0.4s ease;
  -moz-transition: color 0.4s ease;
  -ms-transition: color 0.4s ease;
  -o-transition: color 0.4s ease;
  transition: color 0.4s ease;
  font-size: 2vw;
  line-height: 1.357em;
  display: none;
  position: fixed;
  z-index: 1000;
  bottom: 2em;
  left: 10%;
  background: #000000;
  color: #ffffff;
  padding: 2em 2.5em; }
  @media (max-width: 700px) {
    #cookiePopup {
      font-size: 14px; } }
  @media (min-width: 850px) {
    #cookiePopup {
      font-size: 17px; } }
  @media only screen and (min-width: 768px) {
    #cookiePopup {
      bottom: 2em;
      left: 2em;
      max-width: 400px; } }
  #cookiePopup .button-group {
    margin: 1.5em 0 0 0;
    font-size: 1.2em; }
    #cookiePopup .button-group a {
      font-size: 2vw;
      color: #999999; }
      @media (max-width: 700px) {
        #cookiePopup .button-group a {
          font-size: 14px; } }
      @media (min-width: 850px) {
        #cookiePopup .button-group a {
          font-size: 17px; } }
      #cookiePopup .button-group a:last-of-type {
        margin-right: 1.2em; }
    #cookiePopup .button-group #cookie-accept {
      font-size: 2vw; }
      @media (max-width: 700px) {
        #cookiePopup .button-group #cookie-accept {
          font-size: 14px; } }
      @media (min-width: 850px) {
        #cookiePopup .button-group #cookie-accept {
          font-size: 17px; } }

/*# sourceMappingURL=main-min.css.map */