@charset "UTF-8";
/*
	Standard CSS Reset
	This is used to account for differences in browsers.
	Without a reset stylesheet there could be differences
	between browsers when loading your html website.
*/
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;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 12px;
}
@media (min-width: 600px) {
  .grid {
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 12px;
  }
}
@media (min-width: 960px) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 16px;
  }
}
.grid.rtl {
  direction: rtl;
}
.grid > *,
.grid .grid {
  direction: ltr;
}

@media (max-width: 600px) {
  .s-hide {
    display: none !important;
  }
}
.s-span-1 {
  grid-column: auto/span 1;
}
.s-span-1.grid,
.s-span-1 .grid {
  grid-template-columns: repeat(1, 1fr);
}

.s-start-1-span-1 {
  grid-column: auto/span 1;
  grid-column-start: 1;
}
.s-start-1-span-1.grid,
.s-start-1-span-1 .grid {
  grid-template-columns: repeat(1, 1fr);
}

.s-start-1-span-2 {
  grid-column: auto/span 2;
  grid-column-start: 1;
}
.s-start-1-span-2.grid,
.s-start-1-span-2 .grid {
  grid-template-columns: repeat(2, 1fr);
}

.s-start-1-span-3 {
  grid-column: auto/span 3;
  grid-column-start: 1;
}
.s-start-1-span-3.grid,
.s-start-1-span-3 .grid {
  grid-template-columns: repeat(3, 1fr);
}

.s-start-1-span-4 {
  grid-column: auto/span 4;
  grid-column-start: 1;
}
.s-start-1-span-4.grid,
.s-start-1-span-4 .grid {
  grid-template-columns: repeat(4, 1fr);
}

.s-span-2 {
  grid-column: auto/span 2;
}
.s-span-2.grid,
.s-span-2 .grid {
  grid-template-columns: repeat(2, 1fr);
}

.s-start-2-span-1 {
  grid-column: auto/span 1;
  grid-column-start: 2;
}
.s-start-2-span-1.grid,
.s-start-2-span-1 .grid {
  grid-template-columns: repeat(1, 1fr);
}

.s-start-2-span-2 {
  grid-column: auto/span 2;
  grid-column-start: 2;
}
.s-start-2-span-2.grid,
.s-start-2-span-2 .grid {
  grid-template-columns: repeat(2, 1fr);
}

.s-start-2-span-3 {
  grid-column: auto/span 3;
  grid-column-start: 2;
}
.s-start-2-span-3.grid,
.s-start-2-span-3 .grid {
  grid-template-columns: repeat(3, 1fr);
}

.s-start-2-span-4 {
  grid-column: auto/span 4;
  grid-column-start: 2;
}
.s-start-2-span-4.grid,
.s-start-2-span-4 .grid {
  grid-template-columns: repeat(4, 1fr);
}

.s-span-3 {
  grid-column: auto/span 3;
}
.s-span-3.grid,
.s-span-3 .grid {
  grid-template-columns: repeat(3, 1fr);
}

.s-start-3-span-1 {
  grid-column: auto/span 1;
  grid-column-start: 3;
}
.s-start-3-span-1.grid,
.s-start-3-span-1 .grid {
  grid-template-columns: repeat(1, 1fr);
}

.s-start-3-span-2 {
  grid-column: auto/span 2;
  grid-column-start: 3;
}
.s-start-3-span-2.grid,
.s-start-3-span-2 .grid {
  grid-template-columns: repeat(2, 1fr);
}

.s-start-3-span-3 {
  grid-column: auto/span 3;
  grid-column-start: 3;
}
.s-start-3-span-3.grid,
.s-start-3-span-3 .grid {
  grid-template-columns: repeat(3, 1fr);
}

.s-start-3-span-4 {
  grid-column: auto/span 4;
  grid-column-start: 3;
}
.s-start-3-span-4.grid,
.s-start-3-span-4 .grid {
  grid-template-columns: repeat(4, 1fr);
}

.s-span-4 {
  grid-column: auto/span 4;
}
.s-span-4.grid,
.s-span-4 .grid {
  grid-template-columns: repeat(4, 1fr);
}

.s-start-4-span-1 {
  grid-column: auto/span 1;
  grid-column-start: 4;
}
.s-start-4-span-1.grid,
.s-start-4-span-1 .grid {
  grid-template-columns: repeat(1, 1fr);
}

.s-start-4-span-2 {
  grid-column: auto/span 2;
  grid-column-start: 4;
}
.s-start-4-span-2.grid,
.s-start-4-span-2 .grid {
  grid-template-columns: repeat(2, 1fr);
}

.s-start-4-span-3 {
  grid-column: auto/span 3;
  grid-column-start: 4;
}
.s-start-4-span-3.grid,
.s-start-4-span-3 .grid {
  grid-template-columns: repeat(3, 1fr);
}

.s-start-4-span-4 {
  grid-column: auto/span 4;
  grid-column-start: 4;
}
.s-start-4-span-4.grid,
.s-start-4-span-4 .grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (min-width: 600px) {
  .m-span-1 {
    grid-column: auto/span 1;
  }
  .m-span-1.grid,
.m-span-1 .grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .m-start-1-span-1 {
    grid-column: auto/span 1;
    grid-column-start: 1;
  }
  .m-start-1-span-1.grid,
.m-start-1-span-1 .grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .m-start-1-span-2 {
    grid-column: auto/span 2;
    grid-column-start: 1;
  }
  .m-start-1-span-2.grid,
.m-start-1-span-2 .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .m-start-1-span-3 {
    grid-column: auto/span 3;
    grid-column-start: 1;
  }
  .m-start-1-span-3.grid,
.m-start-1-span-3 .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .m-start-1-span-4 {
    grid-column: auto/span 4;
    grid-column-start: 1;
  }
  .m-start-1-span-4.grid,
.m-start-1-span-4 .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .m-start-1-span-5 {
    grid-column: auto/span 5;
    grid-column-start: 1;
  }
  .m-start-1-span-5.grid,
.m-start-1-span-5 .grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .m-start-1-span-6 {
    grid-column: auto/span 6;
    grid-column-start: 1;
  }
  .m-start-1-span-6.grid,
.m-start-1-span-6 .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .m-span-2 {
    grid-column: auto/span 2;
  }
  .m-span-2.grid,
.m-span-2 .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .m-start-2-span-1 {
    grid-column: auto/span 1;
    grid-column-start: 2;
  }
  .m-start-2-span-1.grid,
.m-start-2-span-1 .grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .m-start-2-span-2 {
    grid-column: auto/span 2;
    grid-column-start: 2;
  }
  .m-start-2-span-2.grid,
.m-start-2-span-2 .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .m-start-2-span-3 {
    grid-column: auto/span 3;
    grid-column-start: 2;
  }
  .m-start-2-span-3.grid,
.m-start-2-span-3 .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .m-start-2-span-4 {
    grid-column: auto/span 4;
    grid-column-start: 2;
  }
  .m-start-2-span-4.grid,
.m-start-2-span-4 .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .m-start-2-span-5 {
    grid-column: auto/span 5;
    grid-column-start: 2;
  }
  .m-start-2-span-5.grid,
.m-start-2-span-5 .grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .m-start-2-span-6 {
    grid-column: auto/span 6;
    grid-column-start: 2;
  }
  .m-start-2-span-6.grid,
.m-start-2-span-6 .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .m-span-3 {
    grid-column: auto/span 3;
  }
  .m-span-3.grid,
.m-span-3 .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .m-start-3-span-1 {
    grid-column: auto/span 1;
    grid-column-start: 3;
  }
  .m-start-3-span-1.grid,
.m-start-3-span-1 .grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .m-start-3-span-2 {
    grid-column: auto/span 2;
    grid-column-start: 3;
  }
  .m-start-3-span-2.grid,
.m-start-3-span-2 .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .m-start-3-span-3 {
    grid-column: auto/span 3;
    grid-column-start: 3;
  }
  .m-start-3-span-3.grid,
.m-start-3-span-3 .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .m-start-3-span-4 {
    grid-column: auto/span 4;
    grid-column-start: 3;
  }
  .m-start-3-span-4.grid,
.m-start-3-span-4 .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .m-start-3-span-5 {
    grid-column: auto/span 5;
    grid-column-start: 3;
  }
  .m-start-3-span-5.grid,
.m-start-3-span-5 .grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .m-start-3-span-6 {
    grid-column: auto/span 6;
    grid-column-start: 3;
  }
  .m-start-3-span-6.grid,
.m-start-3-span-6 .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .m-span-4 {
    grid-column: auto/span 4;
  }
  .m-span-4.grid,
.m-span-4 .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .m-start-4-span-1 {
    grid-column: auto/span 1;
    grid-column-start: 4;
  }
  .m-start-4-span-1.grid,
.m-start-4-span-1 .grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .m-start-4-span-2 {
    grid-column: auto/span 2;
    grid-column-start: 4;
  }
  .m-start-4-span-2.grid,
.m-start-4-span-2 .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .m-start-4-span-3 {
    grid-column: auto/span 3;
    grid-column-start: 4;
  }
  .m-start-4-span-3.grid,
.m-start-4-span-3 .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .m-start-4-span-4 {
    grid-column: auto/span 4;
    grid-column-start: 4;
  }
  .m-start-4-span-4.grid,
.m-start-4-span-4 .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .m-start-4-span-5 {
    grid-column: auto/span 5;
    grid-column-start: 4;
  }
  .m-start-4-span-5.grid,
.m-start-4-span-5 .grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .m-start-4-span-6 {
    grid-column: auto/span 6;
    grid-column-start: 4;
  }
  .m-start-4-span-6.grid,
.m-start-4-span-6 .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .m-span-5 {
    grid-column: auto/span 5;
  }
  .m-span-5.grid,
.m-span-5 .grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .m-start-5-span-1 {
    grid-column: auto/span 1;
    grid-column-start: 5;
  }
  .m-start-5-span-1.grid,
.m-start-5-span-1 .grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .m-start-5-span-2 {
    grid-column: auto/span 2;
    grid-column-start: 5;
  }
  .m-start-5-span-2.grid,
.m-start-5-span-2 .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .m-start-5-span-3 {
    grid-column: auto/span 3;
    grid-column-start: 5;
  }
  .m-start-5-span-3.grid,
.m-start-5-span-3 .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .m-start-5-span-4 {
    grid-column: auto/span 4;
    grid-column-start: 5;
  }
  .m-start-5-span-4.grid,
.m-start-5-span-4 .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .m-start-5-span-5 {
    grid-column: auto/span 5;
    grid-column-start: 5;
  }
  .m-start-5-span-5.grid,
.m-start-5-span-5 .grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .m-start-5-span-6 {
    grid-column: auto/span 6;
    grid-column-start: 5;
  }
  .m-start-5-span-6.grid,
.m-start-5-span-6 .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .m-span-6 {
    grid-column: auto/span 6;
  }
  .m-span-6.grid,
.m-span-6 .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .m-start-6-span-1 {
    grid-column: auto/span 1;
    grid-column-start: 6;
  }
  .m-start-6-span-1.grid,
.m-start-6-span-1 .grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .m-start-6-span-2 {
    grid-column: auto/span 2;
    grid-column-start: 6;
  }
  .m-start-6-span-2.grid,
.m-start-6-span-2 .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .m-start-6-span-3 {
    grid-column: auto/span 3;
    grid-column-start: 6;
  }
  .m-start-6-span-3.grid,
.m-start-6-span-3 .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .m-start-6-span-4 {
    grid-column: auto/span 4;
    grid-column-start: 6;
  }
  .m-start-6-span-4.grid,
.m-start-6-span-4 .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .m-start-6-span-5 {
    grid-column: auto/span 5;
    grid-column-start: 6;
  }
  .m-start-6-span-5.grid,
.m-start-6-span-5 .grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .m-start-6-span-6 {
    grid-column: auto/span 6;
    grid-column-start: 6;
  }
  .m-start-6-span-6.grid,
.m-start-6-span-6 .grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 600px) and (max-width: 960px) {
  .m-hide {
    display: none !important;
  }
}
@media (min-width: 960px) {
  .span-1 {
    grid-column: auto/span 1;
  }
  .span-1.grid,
.span-1 .grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .l-start-1-span-1 {
    grid-column: auto/span 1;
    grid-column-start: 1;
  }
  .l-start-1-span-1.grid,
.l-start-1-span-1 .grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .l-start-1-span-2 {
    grid-column: auto/span 2;
    grid-column-start: 1;
  }
  .l-start-1-span-2.grid,
.l-start-1-span-2 .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .l-start-1-span-3 {
    grid-column: auto/span 3;
    grid-column-start: 1;
  }
  .l-start-1-span-3.grid,
.l-start-1-span-3 .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .l-start-1-span-4 {
    grid-column: auto/span 4;
    grid-column-start: 1;
  }
  .l-start-1-span-4.grid,
.l-start-1-span-4 .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .l-start-1-span-5 {
    grid-column: auto/span 5;
    grid-column-start: 1;
  }
  .l-start-1-span-5.grid,
.l-start-1-span-5 .grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .l-start-1-span-6 {
    grid-column: auto/span 6;
    grid-column-start: 1;
  }
  .l-start-1-span-6.grid,
.l-start-1-span-6 .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .l-start-1-span-7 {
    grid-column: auto/span 7;
    grid-column-start: 1;
  }
  .l-start-1-span-7.grid,
.l-start-1-span-7 .grid {
    grid-template-columns: repeat(7, 1fr);
  }

  .l-start-1-span-8 {
    grid-column: auto/span 8;
    grid-column-start: 1;
  }
  .l-start-1-span-8.grid,
.l-start-1-span-8 .grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .l-start-1-span-9 {
    grid-column: auto/span 9;
    grid-column-start: 1;
  }
  .l-start-1-span-9.grid,
.l-start-1-span-9 .grid {
    grid-template-columns: repeat(9, 1fr);
  }

  .l-start-1-span-10 {
    grid-column: auto/span 10;
    grid-column-start: 1;
  }
  .l-start-1-span-10.grid,
.l-start-1-span-10 .grid {
    grid-template-columns: repeat(10, 1fr);
  }

  .l-start-1-span-11 {
    grid-column: auto/span 11;
    grid-column-start: 1;
  }
  .l-start-1-span-11.grid,
.l-start-1-span-11 .grid {
    grid-template-columns: repeat(11, 1fr);
  }

  .l-start-1-span-12 {
    grid-column: auto/span 12;
    grid-column-start: 1;
  }
  .l-start-1-span-12.grid,
.l-start-1-span-12 .grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .span-2 {
    grid-column: auto/span 2;
  }
  .span-2.grid,
.span-2 .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .l-start-2-span-1 {
    grid-column: auto/span 1;
    grid-column-start: 2;
  }
  .l-start-2-span-1.grid,
.l-start-2-span-1 .grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .l-start-2-span-2 {
    grid-column: auto/span 2;
    grid-column-start: 2;
  }
  .l-start-2-span-2.grid,
.l-start-2-span-2 .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .l-start-2-span-3 {
    grid-column: auto/span 3;
    grid-column-start: 2;
  }
  .l-start-2-span-3.grid,
.l-start-2-span-3 .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .l-start-2-span-4 {
    grid-column: auto/span 4;
    grid-column-start: 2;
  }
  .l-start-2-span-4.grid,
.l-start-2-span-4 .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .l-start-2-span-5 {
    grid-column: auto/span 5;
    grid-column-start: 2;
  }
  .l-start-2-span-5.grid,
.l-start-2-span-5 .grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .l-start-2-span-6 {
    grid-column: auto/span 6;
    grid-column-start: 2;
  }
  .l-start-2-span-6.grid,
.l-start-2-span-6 .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .l-start-2-span-7 {
    grid-column: auto/span 7;
    grid-column-start: 2;
  }
  .l-start-2-span-7.grid,
.l-start-2-span-7 .grid {
    grid-template-columns: repeat(7, 1fr);
  }

  .l-start-2-span-8 {
    grid-column: auto/span 8;
    grid-column-start: 2;
  }
  .l-start-2-span-8.grid,
.l-start-2-span-8 .grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .l-start-2-span-9 {
    grid-column: auto/span 9;
    grid-column-start: 2;
  }
  .l-start-2-span-9.grid,
.l-start-2-span-9 .grid {
    grid-template-columns: repeat(9, 1fr);
  }

  .l-start-2-span-10 {
    grid-column: auto/span 10;
    grid-column-start: 2;
  }
  .l-start-2-span-10.grid,
.l-start-2-span-10 .grid {
    grid-template-columns: repeat(10, 1fr);
  }

  .l-start-2-span-11 {
    grid-column: auto/span 11;
    grid-column-start: 2;
  }
  .l-start-2-span-11.grid,
.l-start-2-span-11 .grid {
    grid-template-columns: repeat(11, 1fr);
  }

  .l-start-2-span-12 {
    grid-column: auto/span 12;
    grid-column-start: 2;
  }
  .l-start-2-span-12.grid,
.l-start-2-span-12 .grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .span-3 {
    grid-column: auto/span 3;
  }
  .span-3.grid,
.span-3 .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .l-start-3-span-1 {
    grid-column: auto/span 1;
    grid-column-start: 3;
  }
  .l-start-3-span-1.grid,
.l-start-3-span-1 .grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .l-start-3-span-2 {
    grid-column: auto/span 2;
    grid-column-start: 3;
  }
  .l-start-3-span-2.grid,
.l-start-3-span-2 .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .l-start-3-span-3 {
    grid-column: auto/span 3;
    grid-column-start: 3;
  }
  .l-start-3-span-3.grid,
.l-start-3-span-3 .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .l-start-3-span-4 {
    grid-column: auto/span 4;
    grid-column-start: 3;
  }
  .l-start-3-span-4.grid,
.l-start-3-span-4 .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .l-start-3-span-5 {
    grid-column: auto/span 5;
    grid-column-start: 3;
  }
  .l-start-3-span-5.grid,
.l-start-3-span-5 .grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .l-start-3-span-6 {
    grid-column: auto/span 6;
    grid-column-start: 3;
  }
  .l-start-3-span-6.grid,
.l-start-3-span-6 .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .l-start-3-span-7 {
    grid-column: auto/span 7;
    grid-column-start: 3;
  }
  .l-start-3-span-7.grid,
.l-start-3-span-7 .grid {
    grid-template-columns: repeat(7, 1fr);
  }

  .l-start-3-span-8 {
    grid-column: auto/span 8;
    grid-column-start: 3;
  }
  .l-start-3-span-8.grid,
.l-start-3-span-8 .grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .l-start-3-span-9 {
    grid-column: auto/span 9;
    grid-column-start: 3;
  }
  .l-start-3-span-9.grid,
.l-start-3-span-9 .grid {
    grid-template-columns: repeat(9, 1fr);
  }

  .l-start-3-span-10 {
    grid-column: auto/span 10;
    grid-column-start: 3;
  }
  .l-start-3-span-10.grid,
.l-start-3-span-10 .grid {
    grid-template-columns: repeat(10, 1fr);
  }

  .l-start-3-span-11 {
    grid-column: auto/span 11;
    grid-column-start: 3;
  }
  .l-start-3-span-11.grid,
.l-start-3-span-11 .grid {
    grid-template-columns: repeat(11, 1fr);
  }

  .l-start-3-span-12 {
    grid-column: auto/span 12;
    grid-column-start: 3;
  }
  .l-start-3-span-12.grid,
.l-start-3-span-12 .grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .span-4 {
    grid-column: auto/span 4;
  }
  .span-4.grid,
.span-4 .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .l-start-4-span-1 {
    grid-column: auto/span 1;
    grid-column-start: 4;
  }
  .l-start-4-span-1.grid,
.l-start-4-span-1 .grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .l-start-4-span-2 {
    grid-column: auto/span 2;
    grid-column-start: 4;
  }
  .l-start-4-span-2.grid,
.l-start-4-span-2 .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .l-start-4-span-3 {
    grid-column: auto/span 3;
    grid-column-start: 4;
  }
  .l-start-4-span-3.grid,
.l-start-4-span-3 .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .l-start-4-span-4 {
    grid-column: auto/span 4;
    grid-column-start: 4;
  }
  .l-start-4-span-4.grid,
.l-start-4-span-4 .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .l-start-4-span-5 {
    grid-column: auto/span 5;
    grid-column-start: 4;
  }
  .l-start-4-span-5.grid,
.l-start-4-span-5 .grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .l-start-4-span-6 {
    grid-column: auto/span 6;
    grid-column-start: 4;
  }
  .l-start-4-span-6.grid,
.l-start-4-span-6 .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .l-start-4-span-7 {
    grid-column: auto/span 7;
    grid-column-start: 4;
  }
  .l-start-4-span-7.grid,
.l-start-4-span-7 .grid {
    grid-template-columns: repeat(7, 1fr);
  }

  .l-start-4-span-8 {
    grid-column: auto/span 8;
    grid-column-start: 4;
  }
  .l-start-4-span-8.grid,
.l-start-4-span-8 .grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .l-start-4-span-9 {
    grid-column: auto/span 9;
    grid-column-start: 4;
  }
  .l-start-4-span-9.grid,
.l-start-4-span-9 .grid {
    grid-template-columns: repeat(9, 1fr);
  }

  .l-start-4-span-10 {
    grid-column: auto/span 10;
    grid-column-start: 4;
  }
  .l-start-4-span-10.grid,
.l-start-4-span-10 .grid {
    grid-template-columns: repeat(10, 1fr);
  }

  .l-start-4-span-11 {
    grid-column: auto/span 11;
    grid-column-start: 4;
  }
  .l-start-4-span-11.grid,
.l-start-4-span-11 .grid {
    grid-template-columns: repeat(11, 1fr);
  }

  .l-start-4-span-12 {
    grid-column: auto/span 12;
    grid-column-start: 4;
  }
  .l-start-4-span-12.grid,
.l-start-4-span-12 .grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .span-5 {
    grid-column: auto/span 5;
  }
  .span-5.grid,
.span-5 .grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .l-start-5-span-1 {
    grid-column: auto/span 1;
    grid-column-start: 5;
  }
  .l-start-5-span-1.grid,
.l-start-5-span-1 .grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .l-start-5-span-2 {
    grid-column: auto/span 2;
    grid-column-start: 5;
  }
  .l-start-5-span-2.grid,
.l-start-5-span-2 .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .l-start-5-span-3 {
    grid-column: auto/span 3;
    grid-column-start: 5;
  }
  .l-start-5-span-3.grid,
.l-start-5-span-3 .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .l-start-5-span-4 {
    grid-column: auto/span 4;
    grid-column-start: 5;
  }
  .l-start-5-span-4.grid,
.l-start-5-span-4 .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .l-start-5-span-5 {
    grid-column: auto/span 5;
    grid-column-start: 5;
  }
  .l-start-5-span-5.grid,
.l-start-5-span-5 .grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .l-start-5-span-6 {
    grid-column: auto/span 6;
    grid-column-start: 5;
  }
  .l-start-5-span-6.grid,
.l-start-5-span-6 .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .l-start-5-span-7 {
    grid-column: auto/span 7;
    grid-column-start: 5;
  }
  .l-start-5-span-7.grid,
.l-start-5-span-7 .grid {
    grid-template-columns: repeat(7, 1fr);
  }

  .l-start-5-span-8 {
    grid-column: auto/span 8;
    grid-column-start: 5;
  }
  .l-start-5-span-8.grid,
.l-start-5-span-8 .grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .l-start-5-span-9 {
    grid-column: auto/span 9;
    grid-column-start: 5;
  }
  .l-start-5-span-9.grid,
.l-start-5-span-9 .grid {
    grid-template-columns: repeat(9, 1fr);
  }

  .l-start-5-span-10 {
    grid-column: auto/span 10;
    grid-column-start: 5;
  }
  .l-start-5-span-10.grid,
.l-start-5-span-10 .grid {
    grid-template-columns: repeat(10, 1fr);
  }

  .l-start-5-span-11 {
    grid-column: auto/span 11;
    grid-column-start: 5;
  }
  .l-start-5-span-11.grid,
.l-start-5-span-11 .grid {
    grid-template-columns: repeat(11, 1fr);
  }

  .l-start-5-span-12 {
    grid-column: auto/span 12;
    grid-column-start: 5;
  }
  .l-start-5-span-12.grid,
.l-start-5-span-12 .grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .span-6 {
    grid-column: auto/span 6;
  }
  .span-6.grid,
.span-6 .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .l-start-6-span-1 {
    grid-column: auto/span 1;
    grid-column-start: 6;
  }
  .l-start-6-span-1.grid,
.l-start-6-span-1 .grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .l-start-6-span-2 {
    grid-column: auto/span 2;
    grid-column-start: 6;
  }
  .l-start-6-span-2.grid,
.l-start-6-span-2 .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .l-start-6-span-3 {
    grid-column: auto/span 3;
    grid-column-start: 6;
  }
  .l-start-6-span-3.grid,
.l-start-6-span-3 .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .l-start-6-span-4 {
    grid-column: auto/span 4;
    grid-column-start: 6;
  }
  .l-start-6-span-4.grid,
.l-start-6-span-4 .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .l-start-6-span-5 {
    grid-column: auto/span 5;
    grid-column-start: 6;
  }
  .l-start-6-span-5.grid,
.l-start-6-span-5 .grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .l-start-6-span-6 {
    grid-column: auto/span 6;
    grid-column-start: 6;
  }
  .l-start-6-span-6.grid,
.l-start-6-span-6 .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .l-start-6-span-7 {
    grid-column: auto/span 7;
    grid-column-start: 6;
  }
  .l-start-6-span-7.grid,
.l-start-6-span-7 .grid {
    grid-template-columns: repeat(7, 1fr);
  }

  .l-start-6-span-8 {
    grid-column: auto/span 8;
    grid-column-start: 6;
  }
  .l-start-6-span-8.grid,
.l-start-6-span-8 .grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .l-start-6-span-9 {
    grid-column: auto/span 9;
    grid-column-start: 6;
  }
  .l-start-6-span-9.grid,
.l-start-6-span-9 .grid {
    grid-template-columns: repeat(9, 1fr);
  }

  .l-start-6-span-10 {
    grid-column: auto/span 10;
    grid-column-start: 6;
  }
  .l-start-6-span-10.grid,
.l-start-6-span-10 .grid {
    grid-template-columns: repeat(10, 1fr);
  }

  .l-start-6-span-11 {
    grid-column: auto/span 11;
    grid-column-start: 6;
  }
  .l-start-6-span-11.grid,
.l-start-6-span-11 .grid {
    grid-template-columns: repeat(11, 1fr);
  }

  .l-start-6-span-12 {
    grid-column: auto/span 12;
    grid-column-start: 6;
  }
  .l-start-6-span-12.grid,
.l-start-6-span-12 .grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .span-7 {
    grid-column: auto/span 7;
  }
  .span-7.grid,
.span-7 .grid {
    grid-template-columns: repeat(7, 1fr);
  }

  .l-start-7-span-1 {
    grid-column: auto/span 1;
    grid-column-start: 7;
  }
  .l-start-7-span-1.grid,
.l-start-7-span-1 .grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .l-start-7-span-2 {
    grid-column: auto/span 2;
    grid-column-start: 7;
  }
  .l-start-7-span-2.grid,
.l-start-7-span-2 .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .l-start-7-span-3 {
    grid-column: auto/span 3;
    grid-column-start: 7;
  }
  .l-start-7-span-3.grid,
.l-start-7-span-3 .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .l-start-7-span-4 {
    grid-column: auto/span 4;
    grid-column-start: 7;
  }
  .l-start-7-span-4.grid,
.l-start-7-span-4 .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .l-start-7-span-5 {
    grid-column: auto/span 5;
    grid-column-start: 7;
  }
  .l-start-7-span-5.grid,
.l-start-7-span-5 .grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .l-start-7-span-6 {
    grid-column: auto/span 6;
    grid-column-start: 7;
  }
  .l-start-7-span-6.grid,
.l-start-7-span-6 .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .l-start-7-span-7 {
    grid-column: auto/span 7;
    grid-column-start: 7;
  }
  .l-start-7-span-7.grid,
.l-start-7-span-7 .grid {
    grid-template-columns: repeat(7, 1fr);
  }

  .l-start-7-span-8 {
    grid-column: auto/span 8;
    grid-column-start: 7;
  }
  .l-start-7-span-8.grid,
.l-start-7-span-8 .grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .l-start-7-span-9 {
    grid-column: auto/span 9;
    grid-column-start: 7;
  }
  .l-start-7-span-9.grid,
.l-start-7-span-9 .grid {
    grid-template-columns: repeat(9, 1fr);
  }

  .l-start-7-span-10 {
    grid-column: auto/span 10;
    grid-column-start: 7;
  }
  .l-start-7-span-10.grid,
.l-start-7-span-10 .grid {
    grid-template-columns: repeat(10, 1fr);
  }

  .l-start-7-span-11 {
    grid-column: auto/span 11;
    grid-column-start: 7;
  }
  .l-start-7-span-11.grid,
.l-start-7-span-11 .grid {
    grid-template-columns: repeat(11, 1fr);
  }

  .l-start-7-span-12 {
    grid-column: auto/span 12;
    grid-column-start: 7;
  }
  .l-start-7-span-12.grid,
.l-start-7-span-12 .grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .span-8 {
    grid-column: auto/span 8;
  }
  .span-8.grid,
.span-8 .grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .l-start-8-span-1 {
    grid-column: auto/span 1;
    grid-column-start: 8;
  }
  .l-start-8-span-1.grid,
.l-start-8-span-1 .grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .l-start-8-span-2 {
    grid-column: auto/span 2;
    grid-column-start: 8;
  }
  .l-start-8-span-2.grid,
.l-start-8-span-2 .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .l-start-8-span-3 {
    grid-column: auto/span 3;
    grid-column-start: 8;
  }
  .l-start-8-span-3.grid,
.l-start-8-span-3 .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .l-start-8-span-4 {
    grid-column: auto/span 4;
    grid-column-start: 8;
  }
  .l-start-8-span-4.grid,
.l-start-8-span-4 .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .l-start-8-span-5 {
    grid-column: auto/span 5;
    grid-column-start: 8;
  }
  .l-start-8-span-5.grid,
.l-start-8-span-5 .grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .l-start-8-span-6 {
    grid-column: auto/span 6;
    grid-column-start: 8;
  }
  .l-start-8-span-6.grid,
.l-start-8-span-6 .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .l-start-8-span-7 {
    grid-column: auto/span 7;
    grid-column-start: 8;
  }
  .l-start-8-span-7.grid,
.l-start-8-span-7 .grid {
    grid-template-columns: repeat(7, 1fr);
  }

  .l-start-8-span-8 {
    grid-column: auto/span 8;
    grid-column-start: 8;
  }
  .l-start-8-span-8.grid,
.l-start-8-span-8 .grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .l-start-8-span-9 {
    grid-column: auto/span 9;
    grid-column-start: 8;
  }
  .l-start-8-span-9.grid,
.l-start-8-span-9 .grid {
    grid-template-columns: repeat(9, 1fr);
  }

  .l-start-8-span-10 {
    grid-column: auto/span 10;
    grid-column-start: 8;
  }
  .l-start-8-span-10.grid,
.l-start-8-span-10 .grid {
    grid-template-columns: repeat(10, 1fr);
  }

  .l-start-8-span-11 {
    grid-column: auto/span 11;
    grid-column-start: 8;
  }
  .l-start-8-span-11.grid,
.l-start-8-span-11 .grid {
    grid-template-columns: repeat(11, 1fr);
  }

  .l-start-8-span-12 {
    grid-column: auto/span 12;
    grid-column-start: 8;
  }
  .l-start-8-span-12.grid,
.l-start-8-span-12 .grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .span-9 {
    grid-column: auto/span 9;
  }
  .span-9.grid,
.span-9 .grid {
    grid-template-columns: repeat(9, 1fr);
  }

  .l-start-9-span-1 {
    grid-column: auto/span 1;
    grid-column-start: 9;
  }
  .l-start-9-span-1.grid,
.l-start-9-span-1 .grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .l-start-9-span-2 {
    grid-column: auto/span 2;
    grid-column-start: 9;
  }
  .l-start-9-span-2.grid,
.l-start-9-span-2 .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .l-start-9-span-3 {
    grid-column: auto/span 3;
    grid-column-start: 9;
  }
  .l-start-9-span-3.grid,
.l-start-9-span-3 .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .l-start-9-span-4 {
    grid-column: auto/span 4;
    grid-column-start: 9;
  }
  .l-start-9-span-4.grid,
.l-start-9-span-4 .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .l-start-9-span-5 {
    grid-column: auto/span 5;
    grid-column-start: 9;
  }
  .l-start-9-span-5.grid,
.l-start-9-span-5 .grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .l-start-9-span-6 {
    grid-column: auto/span 6;
    grid-column-start: 9;
  }
  .l-start-9-span-6.grid,
.l-start-9-span-6 .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .l-start-9-span-7 {
    grid-column: auto/span 7;
    grid-column-start: 9;
  }
  .l-start-9-span-7.grid,
.l-start-9-span-7 .grid {
    grid-template-columns: repeat(7, 1fr);
  }

  .l-start-9-span-8 {
    grid-column: auto/span 8;
    grid-column-start: 9;
  }
  .l-start-9-span-8.grid,
.l-start-9-span-8 .grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .l-start-9-span-9 {
    grid-column: auto/span 9;
    grid-column-start: 9;
  }
  .l-start-9-span-9.grid,
.l-start-9-span-9 .grid {
    grid-template-columns: repeat(9, 1fr);
  }

  .l-start-9-span-10 {
    grid-column: auto/span 10;
    grid-column-start: 9;
  }
  .l-start-9-span-10.grid,
.l-start-9-span-10 .grid {
    grid-template-columns: repeat(10, 1fr);
  }

  .l-start-9-span-11 {
    grid-column: auto/span 11;
    grid-column-start: 9;
  }
  .l-start-9-span-11.grid,
.l-start-9-span-11 .grid {
    grid-template-columns: repeat(11, 1fr);
  }

  .l-start-9-span-12 {
    grid-column: auto/span 12;
    grid-column-start: 9;
  }
  .l-start-9-span-12.grid,
.l-start-9-span-12 .grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .span-10 {
    grid-column: auto/span 10;
  }
  .span-10.grid,
.span-10 .grid {
    grid-template-columns: repeat(10, 1fr);
  }

  .l-start-10-span-1 {
    grid-column: auto/span 1;
    grid-column-start: 10;
  }
  .l-start-10-span-1.grid,
.l-start-10-span-1 .grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .l-start-10-span-2 {
    grid-column: auto/span 2;
    grid-column-start: 10;
  }
  .l-start-10-span-2.grid,
.l-start-10-span-2 .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .l-start-10-span-3 {
    grid-column: auto/span 3;
    grid-column-start: 10;
  }
  .l-start-10-span-3.grid,
.l-start-10-span-3 .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .l-start-10-span-4 {
    grid-column: auto/span 4;
    grid-column-start: 10;
  }
  .l-start-10-span-4.grid,
.l-start-10-span-4 .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .l-start-10-span-5 {
    grid-column: auto/span 5;
    grid-column-start: 10;
  }
  .l-start-10-span-5.grid,
.l-start-10-span-5 .grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .l-start-10-span-6 {
    grid-column: auto/span 6;
    grid-column-start: 10;
  }
  .l-start-10-span-6.grid,
.l-start-10-span-6 .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .l-start-10-span-7 {
    grid-column: auto/span 7;
    grid-column-start: 10;
  }
  .l-start-10-span-7.grid,
.l-start-10-span-7 .grid {
    grid-template-columns: repeat(7, 1fr);
  }

  .l-start-10-span-8 {
    grid-column: auto/span 8;
    grid-column-start: 10;
  }
  .l-start-10-span-8.grid,
.l-start-10-span-8 .grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .l-start-10-span-9 {
    grid-column: auto/span 9;
    grid-column-start: 10;
  }
  .l-start-10-span-9.grid,
.l-start-10-span-9 .grid {
    grid-template-columns: repeat(9, 1fr);
  }

  .l-start-10-span-10 {
    grid-column: auto/span 10;
    grid-column-start: 10;
  }
  .l-start-10-span-10.grid,
.l-start-10-span-10 .grid {
    grid-template-columns: repeat(10, 1fr);
  }

  .l-start-10-span-11 {
    grid-column: auto/span 11;
    grid-column-start: 10;
  }
  .l-start-10-span-11.grid,
.l-start-10-span-11 .grid {
    grid-template-columns: repeat(11, 1fr);
  }

  .l-start-10-span-12 {
    grid-column: auto/span 12;
    grid-column-start: 10;
  }
  .l-start-10-span-12.grid,
.l-start-10-span-12 .grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .span-11 {
    grid-column: auto/span 11;
  }
  .span-11.grid,
.span-11 .grid {
    grid-template-columns: repeat(11, 1fr);
  }

  .l-start-11-span-1 {
    grid-column: auto/span 1;
    grid-column-start: 11;
  }
  .l-start-11-span-1.grid,
.l-start-11-span-1 .grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .l-start-11-span-2 {
    grid-column: auto/span 2;
    grid-column-start: 11;
  }
  .l-start-11-span-2.grid,
.l-start-11-span-2 .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .l-start-11-span-3 {
    grid-column: auto/span 3;
    grid-column-start: 11;
  }
  .l-start-11-span-3.grid,
.l-start-11-span-3 .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .l-start-11-span-4 {
    grid-column: auto/span 4;
    grid-column-start: 11;
  }
  .l-start-11-span-4.grid,
.l-start-11-span-4 .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .l-start-11-span-5 {
    grid-column: auto/span 5;
    grid-column-start: 11;
  }
  .l-start-11-span-5.grid,
.l-start-11-span-5 .grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .l-start-11-span-6 {
    grid-column: auto/span 6;
    grid-column-start: 11;
  }
  .l-start-11-span-6.grid,
.l-start-11-span-6 .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .l-start-11-span-7 {
    grid-column: auto/span 7;
    grid-column-start: 11;
  }
  .l-start-11-span-7.grid,
.l-start-11-span-7 .grid {
    grid-template-columns: repeat(7, 1fr);
  }

  .l-start-11-span-8 {
    grid-column: auto/span 8;
    grid-column-start: 11;
  }
  .l-start-11-span-8.grid,
.l-start-11-span-8 .grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .l-start-11-span-9 {
    grid-column: auto/span 9;
    grid-column-start: 11;
  }
  .l-start-11-span-9.grid,
.l-start-11-span-9 .grid {
    grid-template-columns: repeat(9, 1fr);
  }

  .l-start-11-span-10 {
    grid-column: auto/span 10;
    grid-column-start: 11;
  }
  .l-start-11-span-10.grid,
.l-start-11-span-10 .grid {
    grid-template-columns: repeat(10, 1fr);
  }

  .l-start-11-span-11 {
    grid-column: auto/span 11;
    grid-column-start: 11;
  }
  .l-start-11-span-11.grid,
.l-start-11-span-11 .grid {
    grid-template-columns: repeat(11, 1fr);
  }

  .l-start-11-span-12 {
    grid-column: auto/span 12;
    grid-column-start: 11;
  }
  .l-start-11-span-12.grid,
.l-start-11-span-12 .grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .span-12 {
    grid-column: auto/span 12;
  }
  .span-12.grid,
.span-12 .grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .l-start-12-span-1 {
    grid-column: auto/span 1;
    grid-column-start: 12;
  }
  .l-start-12-span-1.grid,
.l-start-12-span-1 .grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .l-start-12-span-2 {
    grid-column: auto/span 2;
    grid-column-start: 12;
  }
  .l-start-12-span-2.grid,
.l-start-12-span-2 .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .l-start-12-span-3 {
    grid-column: auto/span 3;
    grid-column-start: 12;
  }
  .l-start-12-span-3.grid,
.l-start-12-span-3 .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .l-start-12-span-4 {
    grid-column: auto/span 4;
    grid-column-start: 12;
  }
  .l-start-12-span-4.grid,
.l-start-12-span-4 .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .l-start-12-span-5 {
    grid-column: auto/span 5;
    grid-column-start: 12;
  }
  .l-start-12-span-5.grid,
.l-start-12-span-5 .grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .l-start-12-span-6 {
    grid-column: auto/span 6;
    grid-column-start: 12;
  }
  .l-start-12-span-6.grid,
.l-start-12-span-6 .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .l-start-12-span-7 {
    grid-column: auto/span 7;
    grid-column-start: 12;
  }
  .l-start-12-span-7.grid,
.l-start-12-span-7 .grid {
    grid-template-columns: repeat(7, 1fr);
  }

  .l-start-12-span-8 {
    grid-column: auto/span 8;
    grid-column-start: 12;
  }
  .l-start-12-span-8.grid,
.l-start-12-span-8 .grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .l-start-12-span-9 {
    grid-column: auto/span 9;
    grid-column-start: 12;
  }
  .l-start-12-span-9.grid,
.l-start-12-span-9 .grid {
    grid-template-columns: repeat(9, 1fr);
  }

  .l-start-12-span-10 {
    grid-column: auto/span 10;
    grid-column-start: 12;
  }
  .l-start-12-span-10.grid,
.l-start-12-span-10 .grid {
    grid-template-columns: repeat(10, 1fr);
  }

  .l-start-12-span-11 {
    grid-column: auto/span 11;
    grid-column-start: 12;
  }
  .l-start-12-span-11.grid,
.l-start-12-span-11 .grid {
    grid-template-columns: repeat(11, 1fr);
  }

  .l-start-12-span-12 {
    grid-column: auto/span 12;
    grid-column-start: 12;
  }
  .l-start-12-span-12.grid,
.l-start-12-span-12 .grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .l-hide {
    display: none !important;
  }
}
.align-center {
  align-items: center;
}

.large--one-half,
.medium--one-half {
  grid-column: auto/span 4;
}

.section--wrapper .placeholder,
.main--wrapper.grid > div.placeholder,
.main--wrapper .grid > div.placeholder {
  background: #f9f9f9;
  padding: 1.2rem;
  min-height: 20rem;
  border-radius: 1.2rem;
}

.grid-debug-bg {
  display: none;
  position: fixed;
  margin-top: 0 !important;
  top: 0;
  height: 100vh;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.grid-debug-bg div {
  height: 100vh;
  margin-top: -1px;
  background: transparent !important;
  position: relative;
}
.grid-debug-bg div.Guides__guide::before, .grid-debug-bg div.Guides__guide::after {
  top: 0;
  left: 0px;
  position: absolute;
  display: block;
  content: "";
  height: 100vh;
  width: 1px;
  background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), color-stop(50%, #fafafa), color-stop(50%, transparent), to(transparent));
  background: linear-gradient(180deg, #eee, #eee 50%, transparent 0, transparent);
  background-size: 1px 8px;
}
.grid-debug-bg div.Guides__guide::after {
  left: unset;
  right: 0;
}

.template-index > svg {
  position: absolute;
  top: -240px;
  z-index: -1;
  height: auto;
  width: auto;
}
@media (max-width: 600px) {
  .template-index > svg {
    top: 200px;
    left: 0;
    transform: translateX(40vw);
  }
}
@media (min-width: 598px) {
  .template-index > svg {
    top: -300px;
    left: 0;
    transform: translateX(40vw);
  }
}
.template-index .grid h1 {
  margin: 0 0 1.2rem;
}
@media (min-width: 960px) {
  .template-index .grid h1 {
    font-size: 4.8rem;
  }
}
.template-index img {
  width: auto;
  max-width: unset;
  height: 48rem;
}
.template-index video {
  mix-blend-mode: multiply;
}
.template-index .hero h1 {
  font-weight: 600;
}
.template-index .hero h2 {
  max-width: 640px;
  font-size: 2.4rem;
  font-weight: 400;
  color: #555;
  margin: 0 0 1.6rem 0;
  line-height: 1.2;
}
.template-index .hero .grid > div {
  align-items: flex-start;
  justify-content: center;
}
.template-index .dark {
  background: hsl(225deg, 14%, 11%);
  padding: 6rem 0;
  margin-bottom: 4.8rem;
}
.template-index .dark .grid {
  align-items: center;
}
.template-index .dark * {
  color: rgba(255, 255, 255, 0.9);
}
.template-index .dark .cta-sec-button {
  color: #FFF !important;
  border-color: #FFF;
}

.main-nav .main--wrapper {
  height: 6rem;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 1.2rem;
}
.main-nav .main--wrapper > * {
  align-items: center;
}
.main-nav .main--wrapper .logo {
  font-size: 2.8rem;
  display: flex;
  align-items: center;
}
@media (max-width: 600px) {
  .main-nav .main--wrapper .logo {
    flex: 1;
  }
}
.main-nav .main--wrapper .logo svg {
  width: auto;
  height: 2.2rem;
}
.main-nav .main--wrapper .menu--toggle {
  margin-left: 2.4rem;
  padding: 0.8rem 0;
  width: 2.4rem;
  height: 2.4rem;
  display: block;
  position: relative;
  display: flex;
}
.main-nav .main--wrapper .menu--toggle:after,
.main-nav .main--wrapper .menu--toggle:before,
.main-nav .main--wrapper .menu--toggle div {
  background-color: #333;
  border-radius: 3px;
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  transition: all 0.2s ease-in-out;
  transform-origin: center;
}
.main-nav .main--wrapper .menu--toggle:before {
  position: absolute;
  top: 0;
}
body.menu-open .main-nav .main--wrapper .menu--toggle:before {
  top: calc(50% - 2px);
  transform: rotate(45deg);
}
.main-nav .main--wrapper .menu--toggle:after {
  position: absolute;
  bottom: 0;
}
body.menu-open .main-nav .main--wrapper .menu--toggle:after {
  bottom: calc(50% - 1px);
  transform: rotate(-45deg);
}
body.menu-open .main-nav .main--wrapper .menu--toggle div {
  transform: translate(50%) scale(0);
}
.main-nav .main--wrapper > ul {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 0 2.4rem;
}
@media (max-width: 960px) {
  body.menu-open .main-nav .main--wrapper > ul {
    display: block !important;
    position: fixed;
    background: #fff;
    top: 6rem;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: scroll;
  }
}
@media (max-width: 600px) {
  body.menu-open .main-nav .main--wrapper > ul .sub-nav--wrapper {
    display: none;
  }
}
.main-nav .main--wrapper > ul > li {
  font-weight: 500;
  position: relative;
}
@media (min-width: 960px) {
  .main-nav .main--wrapper > ul > li:last-child {
    flex: 1;
    text-align: right;
  }
}
@media (min-width: 960px) {
  .main-nav .main--wrapper > ul > li.has-sub-group:hover .sub-nav--wrapper {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
  }
}
@media (max-width: 960px) {
  .main-nav .main--wrapper > ul > li {
    width: 100%;
  }
}
@media (max-width: 960px) {
  .main-nav .main--wrapper > ul > li > a,
.main-nav .main--wrapper > ul > li > span {
    font-size: 2rem;
  }
}
.main-nav .main--wrapper > ul > li > a.active,
.main-nav .main--wrapper > ul > li > a:hover,
.main-nav .main--wrapper > ul > li > a:focus {
  text-decoration: underline;
  outline: none;
}
@media (min-width: 960px) {
  .main-nav .main--wrapper > ul .sub-nav--wrapper {
    padding: 2rem;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    width: unset;
    transform: translate(-50%, -1.2rem);
    top: calc(100% + 1.2rem);
    left: 50%;
    background: #fff;
    border-radius: 0.4rem;
    z-index: 2;
    transition: transform 0.5s, opacity 0.5s;
    -webkit-box-shadow: 0 4px 18px rgba(11, 33, 74, 0.1), 0 -2px 4px rgba(11, 33, 74, 0.03);
    box-shadow: 0 4px 18px rgba(11, 33, 74, 0.1), 0 -2px 4px rgba(11, 33, 74, 0.03);
  }
}
@media (min-width: 960px) {
  .main-nav .main--wrapper > ul .sub-nav--wrapper:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 16px 12px;
    border-color: transparent transparent #fff transparent;
    position: absolute;
    top: -14px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-filter: drop-shadow(0 -2px 1px #dee2e5);
    filter: drop-shadow(0 -2px 1px #dee2e5);
  }
  .main-nav .main--wrapper > ul .sub-nav--wrapper:after {
    content: "";
    display: block;
    width: 100%;
    height: 1.8rem;
    position: absolute;
    top: -18px;
    left: 0;
    z-index: 2;
  }
}
.main-nav .main--wrapper > ul .sub-nav--wrapper ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.main-nav .main--wrapper > ul .sub-nav--wrapper ul li {
  grid-column: auto/span 1;
  width: 100%;
  min-width: 20rem;
  padding-left: 0;
}
.main-nav .main--wrapper > ul .sub-nav--wrapper ul li a {
  font-size: 1.8rem;
  font-weight: 400;
  width: 100%;
  display: flex;
}
.main-nav .main--wrapper > ul .sub-nav--wrapper ul li a:hover span {
  color: rgb(7, 105, 230);
}
.main-nav .main--wrapper > ul .sub-nav--wrapper ul li a div {
  font-weight: 500;
  font-size: 1.6rem;
}
.main-nav .main--wrapper > ul .sub-nav--wrapper ul li a span {
  padding-left: 0.8rem;
}
.main-nav .main--wrapper > ul .sub-nav--wrapper ul li a span small {
  color: #666;
}
.main-nav .main--wrapper > ul .sub-nav--wrapper ul li a i {
  padding-top: 0.4rem;
  min-width: 2.4rem;
  text-align: center;
  background-color: rgb(7, 105, 230);
}
.main-nav .main--wrapper li {
  display: inline-block;
  padding: 1.2rem 1.6rem;
}
.main-nav .main--wrapper span,
.main-nav .main--wrapper a {
  color: #333;
  text-decoration: none;
}
.main-nav .main--wrapper > div {
  text-align: right;
  display: flex;
  justify-content: flex-end;
}
.main-nav .main--wrapper > div button {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: flex-end;
  background: none;
  border: none;
}
.main-nav .main--wrapper > div button svg {
  margin-left: 0.8rem;
  width: auto;
  height: 2.4rem;
}
.main-nav .main--wrapper > div button span {
  font-size: 10px;
  margin-top: -20px;
  margin-left: 2px;
  font-weight: bold;
}
@media (max-width: 960px) {
  .main-nav .main--wrapper > div:last-child {
    flex: 1;
  }
}

.product-plans .site-header {
  display: none;
}
.product-plans .grid {
  margin: 9.6rem auto;
}
@media (max-width: 960px) {
  .product-plans .grid {
    margin: 1.2rem auto !important;
  }
}
.product-plans h1 {
  margin: 0;
}
.product-plans h2.h5 {
  padding: 1.2rem 0;
  max-width: 64rem;
  display: block;
  font-size: 2.4rem;
  font-weight: 400;
  color: #555;
  margin: 0 auto;
}
.product-plans h3 + small {
  color: #555;
  font-style: italic;
}
.product-plans #lite-plan:checked ~ .price-plans [for=lite-plan],
.product-plans #startup-plan:checked ~ .price-plans [for=startup-plan],
.product-plans #pro-plan:checked ~ .price-plans [for=pro-plan] {
  background: #efeefd !important;
}
.product-plans #lite-plan:checked ~ .content td:nth-child(2),
.product-plans #lite-plan:checked ~ .content th:nth-child(2),
.product-plans #startup-plan:checked ~ .content td:nth-child(3),
.product-plans #startup-plan:checked ~ .content th:nth-child(3),
.product-plans #pro-plan:checked ~ .content td:nth-child(4),
.product-plans #pro-plan:checked ~ .content th:nth-child(4) {
  background-color: #f8f8fe !important;
}
.product-plans th.selected {
  font-weight: 700;
}
.product-plans .price-plans {
  grid-gap: 0.4rem;
  border-radius: 4px;
}
.product-plans .price-plans .grid-item {
  display: block;
  padding: 3.6rem !important;
  margin-bottom: 0.6rem;
  background: #f8f8fe;
  transition: transform 0.0999s;
  z-index: 1;
  cursor: pointer;
  transform: scale(1);
  -webkit-font-smoothing: subpixel-antialiased;
}
.product-plans .price-plans .grid-item > small {
  display: block;
  margin-bottom: 6px;
}
.product-plans .price-plans .grid-item:nth-child(1) {
  outline: 3px solid #fff;
  border-top: 1px solid #6c63ff;
}
.product-plans .price-plans .grid-item:nth-child(2) {
  outline: 3px solid #fff;
  border-top: 2px solid #6c63ff;
  z-index: 2;
}
.product-plans .price-plans .grid-item:nth-child(3) {
  border-top: 3px solid #6c63ff;
  outline: 3px solid #fff;
  z-index: 2;
}
.product-plans .price-plans .grid-item.most-popular {
  height: calc(100% + 1.2rem);
}
.product-plans .price-plans .grid-item.most-popular > div {
  position: absolute;
  top: -2rem;
  left: 0;
  width: 100%;
  height: 3.4rem;
  line-height: 3.4rem;
  background-color: #6c63ff;
  color: #fafafa;
  text-transform: capitalize;
  font-weight: 400;
  letter-spacing: 0.025em;
  text-align: center;
}
@media (max-width: 960px) {
  .product-plans .price-plans .grid-item.most-popular > div {
    top: 0 !important;
  }
}
.product-plans .price-plans .grid-item.selected, .product-plans .price-plans .grid-item:hover {
  z-index: 4;
  color: #000;
}
@media (min-width: 960px) {
  .product-plans .price-plans .grid-item.selected, .product-plans .price-plans .grid-item:hover {
    outline: 0;
  }
}
@media (max-width: 960px) {
  .product-plans .price-plans .grid-item {
    transform: scale(1) !important;
    margin-bottom: 1.2rem;
  }
}
.product-plans .price-plans ul {
  font-size: 1em;
}
.product-plans .price-plans ul li {
  padding: 0.4rem 0;
}
.product-plans .price-plans ul li:first-child {
  font-weight: bold;
  padding-bottom: 0.8rem;
}
.product-plans .price-plans ul li.tick {
  list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='#6c63ff' d='M407 81c24-24 63-24 87 0 24 23 24 62 0 87 0 0-256 255-260 259-24 24-63 24-87 0L18 298c-24-25-24-63 0-87s63-24 87 1l86 86z'%3E%3C/path%3E%3C/svg%3E");
}
.product-plans .price-plans h3 {
  padding: 0.4rem 0;
}
.product-plans .price-plans h3,
.product-plans .price-plans h5 {
  margin: 0;
  font-weight: 500;
}
@media (max-width: 960px) {
  .product-plans .price-plans {
    display: block;
    flex-direction: column;
  }
  .product-plans .price-plans .grid-item {
    margin-bottom: 1.2rem;
  }
  .product-plans .price-plans .grid-item.most-popular {
    padding-top: 7.2rem !important;
  }
}
@media (min-width: 600px) {
  .product-plans .price-plans {
    flex-direction: row !important;
  }
}

@media (max-width: 960px) {
  .price-plans--wrapper {
    padding: 0 !important;
  }
}

.prod-pricing-text table,
table.features {
  overflow: hidden;
  width: 100%;
  min-width: 296px;
  max-width: 640px;
  margin: 0 auto;
  border-color: #fff;
  /* Focus stuff for mobile */
}
.prod-pricing-text table svg,
table.features svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #6c63ff;
  margin: 0.6rem 0;
}
.prod-pricing-text table h5,
table.features h5 {
  margin-bottom: 12px;
  margin-bottom: 0;
}
.prod-pricing-text table tfoot tr:last-child td,
table.features tfoot tr:last-child td {
  height: 24px;
}
.prod-pricing-text table tbody tr,
table.features tbody tr {
  border-bottom: 1px solid #f8f8fe;
}
.prod-pricing-text table thead th,
table.features thead th {
  font-weight: normal;
  border-bottom: 1px solid #DDD !important;
  padding-bottom: 6px;
  cursor: pointer;
}
.prod-pricing-text table thead.subheading th,
table.features thead.subheading th {
  text-align: left;
  border: none !important;
}
.prod-pricing-text table thead th h4,
table.features thead th h4 {
  font-size: 16px;
  margin: 0;
}
.prod-pricing-text table td,
table.features td {
  text-align: center;
  max-width: 75px;
  font-size: 12px;
  line-height: 1.23;
}
@media (max-width: 960px) {
  .prod-pricing-text table td,
table.features td {
    max-width: 50px !important;
  }
}
.prod-pricing-text table td:first-child,
table.features td:first-child {
  text-align: left;
}
.prod-pricing-text table td i,
table.features td i {
  font-size: 9px;
  color: gray;
}
.prod-pricing-text table td, .prod-pricing-text table th,
table.features td,
table.features th {
  border-width: 0px !important;
  padding: 1.2rem;
  position: relative;
  outline: 0;
}
.prod-pricing-text table tr > th,
table.features tr > th {
  background-color: rgb(255, 255, 255) !important;
  max-width: 100px;
}
.prod-pricing-text table tbody tr:hover,
.prod-pricing-text table tbody tr:hover > th,
table.features tbody tr:hover,
table.features tbody tr:hover > th {
  background-color: #f8f8fe !important;
}
.prod-pricing-text table tbody th,
.prod-pricing-text table tfoot th,
table.features tbody th,
table.features tfoot th {
  text-align: left;
  font-weight: normal;
  font-size: 1.6rem;
}
.prod-pricing-text table thead th,
.prod-pricing-text table tbody td,
table.features thead th,
table.features tbody td {
  text-align: center;
}
.prod-pricing-text table tfoot td,
table.features tfoot td {
  padding: 0 0 9px 0;
}
.prod-pricing-text table td:focus::before,
.prod-pricing-text table tbody th:focus::before,
table.features td:focus::before,
table.features tbody th:focus::before {
  background-color: lightblue;
  content: "";
  height: 100%;
  top: 0;
  left: -5000px;
  position: absolute;
  width: 10000px;
  z-index: -1;
}
.prod-pricing-text table button,
table.features button {
  width: 90%;
  padding: 6px !important;
  margin: 0 !important;
  color: #fff;
  border: none;
  border-radius: none;
  font-weight: normal;
}

.apps-grid .filters {
  flex-wrap: wrap;
  background: transparent;
  border-radius: 1.2rem;
  padding: 8px 0;
  overflow: scroll;
}
.apps-grid .filters li {
  margin: 0;
  border-bottom: 1px solid #e6e6e6;
}
.apps-grid .filters li a {
  color: #555;
  font-size: 1.4rem;
  text-decoration: none;
  padding: 0.8rem 0;
  display: inline-block;
  border-radius: 1.2rem;
  word-break: break-all;
}
.apps-grid .filters li.active-filter a {
  background: none;
  border-radius: 1.2rem;
  text-decoration: underline;
  font-weight: 600;
}
.apps-grid > .grid {
  grid-gap: 24px 16px;
}

.app-card {
  padding-bottom: 1.6rem;
  border-bottom: 1px solid #e6e6e6;
  height: 100%;
}
.app-card > div {
  width: 70%;
}
.app-card > div > a {
  display: block;
  text-decoration: none !important;
}
.app-card > div div {
  margin-top: 0.8rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.app-card > div div a.cta-sec-button {
  margin: 0 0.8rem 0 0;
}
.app-card > a {
  padding-right: 1.6rem;
}
.app-card img {
  width: 6.4rem !important;
  height: 6.4rem !important;
}
.app-card img.lazyload {
  filter: blur(2px);
}
.app-card h3 {
  font-size: 1.8rem;
  font-weight: 500;
  color: #333;
  margin: 0;
  line-height: 1;
  display: flex;
}
.app-card small {
  font-weight: 300;
  font-size: 1.1rem;
  color: #333;
  margin: 0.2rem 0 0.4rem;
}
.app-card small.product-price {
  font-weight: 500;
}
.app-card .cta-sec-button {
  font-size: 1.3rem;
  margin: 0.8rem 0.4rem 0 0;
  display: inline-block;
  padding: 0.4rem 1.2rem;
  font-weight: 500;
  background: none;
}

.product-app button {
  margin-top: 2.4rem;
  margin-bottom: 0.6rem;
  background: #efefef;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
}
.product-app .app-header {
  margin-bottom: 1.2rem;
}
.product-app .app-header img {
  margin-right: 2rem;
  max-width: 6.4rem;
  max-height: 6.4rem;
}
.product-app h1 {
  font-size: 2.4rem;
  margin-bottom: 0.4rem;
}
.product-app h1 ~ span {
  font-size: 1.5rem;
  color: #444;
}
.product-app .cta-button {
  margin-right: 1.2rem;
}
@media (max-width: 600px) {
  .product-app .cta-button {
    margin: 2rem 1.2rem 2.4rem 0;
  }
}
.product-app .product-images--wrapper {
  position: relative;
}
.product-app .product-images--wrapper:hover .prev,
.product-app .product-images--wrapper:hover .next {
  opacity: 1;
}
.product-app .product-images--wrapper .prev,
.product-app .product-images--wrapper .next {
  display: none;
  position: absolute;
  top: 50%;
  left: -1.2rem;
  background: none;
  transform: translateY(-50%);
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  color: white;
  border-radius: 18px;
  font-weight: 500;
  opacity: 0;
  transition: opacity 300ms;
}
.product-app .product-images--wrapper .next {
  left: unset;
  right: -1.8rem;
}
body.zoom-open .product-app .product-images--wrapper .prev,
body.zoom-open .product-app .product-images--wrapper .next {
  opacity: 1;
  position: fixed;
  z-index: 20;
}
body.zoom-open .product-app .product-images--wrapper .prev {
  left: 1.2rem;
}
body.zoom-open .product-app .product-images--wrapper .next {
  right: 1.2rem;
}
.product-app .product-images {
  flex-wrap: nowrap;
  flex-shrink: 0;
  padding: 1.2rem 0;
  overflow: hidden;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-color: #ccc #fafafa;
  scrollbar-width: thin;
}
.product-app .product-images::-webkit-scrollbar {
  height: 4px;
}
.product-app .product-images::-webkit-scrollbar-track {
  background-color: #fafafa;
  border-radius: 2px;
}
.product-app .product-images::-webkit-scrollbar-thumb:active {
  background-color: #888;
}
.product-app .product-images::-webkit-scrollbar-thumb {
  overflow: visible;
  border-radius: 2px;
  background-color: #ccc;
  cursor: grab;
}
.product-app .product-images > div {
  min-width: calc(33.3333333333% - 1.2rem);
  max-width: 33%;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
  margin: 0 1.2rem 0 0;
  scroll-snap-align: start;
}
@media (max-width: 600px) {
  .product-app .product-images > div {
    min-width: 100%;
  }
}
.product-app .product-images > div:last-child {
  margin-right: 0;
}
.product-app .product-images img {
  width: 100%;
  height: auto;
  max-height: 33.2rem;
  display: flex;
  margin-right: 1.6rem;
  border-radius: 0.8rem;
  border: 1px solid #efefef;
}
.product-app .product-images img::-moz-selection {
  color: none;
  background: none;
}
.product-app .product-images img::selection {
  color: none;
  background: none;
}
body.zoom-open .product-app .product-images {
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2.4rem 0;
  z-index: 10;
  background: #fff;
  scroll-behavior: unset;
  scrollbar-width: thin;
}
body.zoom-open .product-app .product-images::-webkit-scrollbar {
  height: 8px;
}
body.zoom-open .product-app .product-images::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}
body.zoom-open .product-app .product-images > div {
  display: flex;
  min-width: 100%;
  padding: 0 2.4rem;
  align-items: center;
  justify-content: center;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}
body.zoom-open .product-app .product-images img {
  width: auto;
  height: auto;
  margin-right: 0;
  max-width: 100%;
  max-height: 100%;
  max-width: calc(100vw - 4.8rem);
  max-height: calc(100vh - 4.8rem);
}
body.zoom-open .product-app .product-images img::after {
  display: block;
  position: fixed;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.product-app .key-features {
  margin: 1.2rem 0 2.4rem;
}
.product-app .key-features li {
  padding: 0.8rem 0;
  font-size: 1.6rem;
  list-style: disc;
  list-style-position: inside;
}
.product-app .product-description {
  max-width: 67.8rem;
}
.product-app .product-description h3 {
  font-size: 2rem;
}
.product-app .product-sidebar {
  margin-top: 2rem;
}

.related-apps {
  border-top: 1px solid #ccc;
  padding-top: 1.8rem;
  margin-top: 3.2rem;
}

.product-theme-card {
  box-shadow: 0 4px 9px 3px rgba(0, 0, 0, 0.03);
  margin-bottom: 2.4rem;
  border-radius: 0.8rem;
  overflow: hidden;
}
.product-theme-card a {
  color: #111;
}
.product-theme-card footer {
  padding: 2rem 1.2rem;
}
.product-theme-card footer span {
  display: inline-block;
  width: 100%;
  margin: 0.4rem 0;
}

.collection-themes .theme-image--wrapper {
  position: relative;
  padding-bottom: 100%;
  overflow: hidden;
}
.collection-themes .theme-image--wrapper::after {
  content: "";
  display: block;
  position: absolute;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.04)));
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.04));
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.04));
  width: 100%;
  height: 24px;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
.collection-themes .theme-image--wrapper:hover img {
  animation-duration: 4s;
}
.collection-themes .theme-image--wrapper img {
  position: absolute;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  top: 0;
  right: 0;
  left: 0;
  transition: all 1s;
}
@keyframes example {
  0% {
    top: 0;
  }
  50% {
    top: -90%;
  }
  100% {
    top: 0;
  }
}

.product-theme .product-theme--wrapper .placeholder {
  padding: 2rem 1.2rem 0 !important;
  position: relative;
  overflow: hidden;
}
@media (max-width: 600px) {
  .product-theme .product-theme--wrapper .placeholder div > div {
    padding-right: 1.2rem !important;
    padding-left: 1.2rem !important;
  }
}
.product-theme .product-theme--wrapper .placeholder h1 {
  font-size: 3.6rem;
}
.product-theme .product-theme--wrapper .placeholder h2 {
  font-size: 2.4rem;
}
.product-theme .product-theme--wrapper .placeholder > div > div {
  position: relative;
}
@media (max-width: 600px) {
  .product-theme .product-theme--wrapper .placeholder > div > div {
    overflow: hidden;
  }
}
.product-theme .product-theme--wrapper .placeholder .theme-hero {
  margin-left: 6.4rem;
  width: calc(100% - 6.4rem);
  padding-bottom: 61.8%;
  background-repeat: no-repeat;
  box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.06);
  background-size: cover;
  background-position-y: 1.8rem;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
}
@media (max-width: 600px) {
  .product-theme .product-theme--wrapper .placeholder .theme-hero {
    width: calc(100% + 24px);
    margin-left: -12px;
  }
}
.product-theme .product-theme--wrapper .placeholder .theme-hero::after {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% - 6.4rem);
  height: 100%;
  top: 0px;
  left: 6.4rem;
  z-index: 0;
  border-top: 1.8rem solid #f0f2f5;
  border-radius: 1.2rem;
  border-color: inherit;
}
.product-theme .product-theme--wrapper .placeholder .theme-mobile-hero {
  position: absolute;
  top: 33%;
  left: 3.6rem;
  z-index: 2;
  width: 31%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.06);
}
.product-theme .product-theme--wrapper .placeholder .theme-mobile-hero::after {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% + 16px);
  height: 100%;
  top: -24px;
  left: -8px;
  z-index: -1;
  /* background: #888; */
  border: 8px solid #f0f2f5;
  border-radius: 2rem;
  box-shadow: 0 4px 9px 3px rgba(0, 0, 0, 0.1);
  border-top-width: 2.4rem;
  border-color: inherit;
}
@media (max-width: 600px) {
  .product-theme .product-theme--wrapper .placeholder .theme-mobile-hero::after {
    width: calc(100% + 12px);
    top: -12px;
    left: -6px;
    border-radius: 1rem;
    border-width: 0.6rem;
    border-top-width: 1.2rem;
  }
}
.product-theme .product-theme--wrapper .placeholder .variants a {
  color: #111;
  padding: 0.8rem 1.2rem;
  text-align: center;
  display: inline-block;
}
.product-theme .product-theme--wrapper .placeholder .variants a.active {
  box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.13);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 2.4rem;
}
.product-theme .product-theme--wrapper .placeholder img {
  max-width: calc(100% - 48px);
  position: absolute;
  top: 0;
  left: 36px;
  right: 12px;
  box-shadow: 0 3px 12px 8px rgba(0, 0, 0, 0.1);
}
.product-theme .product-theme--wrapper .placeholder::after {
  content: "";
  display: block;
  position: absolute;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.04)));
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.04));
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.04));
  width: 100%;
  height: 24px;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
.product-theme .product-theme--wrapper .placeholder .flex-1 {
  padding: 1.2rem;
}
.product-theme .product-theme--wrapper .placeholder .cta-button,
.product-theme .product-theme--wrapper .placeholder .cta-sec-button {
  margin-bottom: 2.4rem;
}
.product-theme .product-description {
  padding-top: 2.4rem;
}
.product-theme .key-features {
  columns: 2;
  background: #f9f9f9;
  padding: 1.2rem 2.4rem;
  border-radius: 0.8rem;
}
.product-theme .key-features li {
  margin: 0;
  line-height: 2.5;
}
.product-theme .key-features li .fa-check-circle {
  text-align: center;
  width: 1.6rem;
}

.product-preview #preview-bar {
  display: flex;
  width: 100%;
  height: 6rem;
  padding: 0 2.4rem;
  background: #fafafa;
  align-items: center;
  justify-content: space-between;
}
.product-preview #preview-bar a {
  color: #333;
}
.product-preview #preview-bar ul {
  display: flex;
}
.product-preview #preview-bar ul li {
  margin: 0 0.6rem;
}
.product-preview #preview-bar ul li label {
  cursor: pointer;
  display: inline-block;
  padding: 0 0.6rem;
  min-width: 2.4rem;
  text-align: center;
}
.product-preview #preview-bar ul li label i {
  font-size: 2.4rem;
}
.product-preview #desktop:checked ~ #preview-bar [for=desktop] {
  border-bottom: 1px solid #333;
}
.product-preview #tablet:checked ~ #preview-bar [for=tablet] {
  border-bottom: 1px solid #333;
}
.product-preview #mobile:checked ~ #preview-bar [for=mobile] {
  border-bottom: 1px solid #333;
}
.product-preview .preview {
  display: flex;
  background: #f9f9f9;
  height: calc(100vh - 6rem);
}
.product-preview .preview iframe {
  height: calc(100vh - 6rem);
  margin: 0 auto;
  transition: all 0.5s;
  transform: scale(0.9);
}
.product-preview #desktop:checked ~ .preview iframe {
  width: 100%;
  width: 128rem;
  box-shadow: 0 3px 12px 8px rgba(0, 0, 0, 0.06);
}
.product-preview #tablet:checked ~ .preview iframe {
  width: 76.8rem;
  max-height: 90.4rem;
  box-shadow: 0 3px 12px 8px rgba(0, 0, 0, 0.1);
}
.product-preview #mobile:checked ~ .preview iframe {
  width: 37.5rem;
  height: 100%;
  max-height: 66.7rem;
  box-shadow: 0 3px 12px 8px rgba(0, 0, 0, 0.1);
}

.installing-theme .installing-theme--content {
  display: flex !important;
}

.installing-theme--content {
  position: fixed;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 20;
}

.template-page h1 {
  margin-bottom: 2.4rem;
}
.template-page .content--wrapper li {
  padding-left: 1.2rem;
  position: relative;
}
.template-page .content--wrapper li::before {
  display: block;
  content: "·";
  position: absolute;
  left: 0;
  font-weight: bold;
}
#terms-of-service .content--wrapper,
#privacy-policy .content--wrapper {
  font-family: courier, monospace;
}

#contactFormWrapper {
  max-width: 48rem;
  display: flex;
  flex-direction: column;
}
#contactFormWrapper label {
  margin: 1.2rem 0 0.6rem;
}
#contactFormWrapper input {
  padding: 0.4rem;
  font-size: 1.6rem;
}
#contactFormWrapper textarea {
  padding: 0.4rem;
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
}
#contactFormWrapper [type=submit] {
  padding: 1.2rem;
}

.news-blog-articles a {
  color: #111;
  text-decoration: none;
}
.news-blog-articles a:hover {
  text-decoration: underline;
}
.news-blog-articles .hero-post {
  margin-bottom: 10rem;
}
.news-blog-articles .leading {
  font-size: 2rem;
  line-height: 1.5;
}
.news-blog-articles .leading a {
  display: inline-block;
  margin-top: 2rem;
  font-weight: 500;
}
.news-blog-articles .bg-img {
  margin-bottom: 1.6rem;
  padding-bottom: 50%;
}
.news-blog-articles time {
  display: inline-block;
  display: none !important;
  padding-bottom: 1.6rem;
}

@media (min-width: 960px) {
  .template-article .news-article h1 {
    font-size: 6rem;
  }
}
.template-article .news-article img {
  max-width: 100% !important;
}
.template-article .news-article time {
  display: block;
  display: none;
  padding-bottom: 1.6rem;
}

.main--wrapper.support-crumbs {
  margin-bottom: 0;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

.template-blog.blog .main-content,
.page-support .main-content {
  margin-top: 0;
}
.template-blog.blog .main-content .block,
.page-support .main-content .block {
  padding-top: 0;
}
.template-blog.blog #headlines,
.page-support #headlines {
  margin: 60px 12px 36px;
}
.template-blog.blog #headlines h1,
.page-support #headlines h1 {
  line-height: 1.1;
  margin-bottom: 12px;
}
.template-blog.blog #headlines #tagline,
.page-support #headlines #tagline {
  max-width: 480px;
  line-height: 1.26;
}
.template-blog.blog ul,
.page-support ul {
  list-style: none !important;
  margin: 0;
}
.template-blog.blog .items--wrapper,
.page-support .items--wrapper {
  display: flex;
  flex-wrap: wrap;
}
.template-blog.blog .item,
.page-support .item {
  width: 50%;
  margin-bottom: 4rem;
}
@media (min-width: 480px) {
  .template-blog.blog .item,
.page-support .item {
    width: 33.33334%;
  }
}
@media (max-width: 480px) {
  .template-blog.blog .item,
.page-support .item {
    width: 100%;
  }
}
.template-blog.blog .item h5,
.page-support .item h5 {
  display: inline-block;
  width: 100%;
  text-transform: capitalize;
}
.template-blog.blog .item li,
.page-support .item li {
  padding-right: 2em;
  margin-bottom: 0.5em;
}
.template-blog.blog .item a,
.page-support .item a {
  font-size: 1.6rem;
  display: inline-block;
  line-height: 1.4;
  text-decoration: none;
}
.template-blog.blog .item a:hover,
.page-support .item a:hover {
  text-decoration: underline;
}
.template-blog.blog .featherlight-content,
.page-support .featherlight-content {
  max-width: 800px;
}
.template-blog.blog .featherlight-content .featherlight-close-icon,
.page-support .featherlight-content .featherlight-close-icon {
  font-size: 1.5em;
}
.template-blog.blog .featherlight-inner article,
.page-support .featherlight-inner article {
  width: 100%;
}
.template-blog.blog .featherlight-inner .newsletter-signup--wrapper,
.template-blog.blog .featherlight-inner aside,
.template-blog.blog .featherlight-inner .bottom-nav,
.page-support .featherlight-inner .newsletter-signup--wrapper,
.page-support .featherlight-inner aside,
.page-support .featherlight-inner .bottom-nav {
  display: none !important;
}
.template-blog.blog .featherlight-inner img,
.page-support .featherlight-inner img {
  margin: 3em 0;
  box-shadow: 0 1px 24px rgba(0, 0, 0, 0.2);
}
.template-blog.blog .featherlight-inner p,
.page-support .featherlight-inner p {
  max-width: 678px;
}
.template-blog.blog img[alt=support],
.page-support img[alt=support] {
  display: none !important;
}

.template-page .support-content {
  padding-top: 4.8rem;
}

form.main--wrapper {
  display: flex;
  position: relative;
  max-width: 768px;
  margin: 0 auto;
}
form.main--wrapper span {
  display: none;
  line-height: 48px;
  padding: 0 1.2rem;
  justify-content: center;
  font-size: 1.4rem;
}
form.main--wrapper button {
  margin: 0;
  margin-left: 1.6rem;
  position: absolute;
  left: 1.2rem;
  top: 1.2rem;
  z-index: 2;
  cursor: default;
  border: none;
  background: none;
  border-top-right-radius: 2.4rem;
  border-bottom-right-radius: 2.4rem;
  padding: 0 0 0 1.2rem;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
form.main--wrapper button svg {
  width: 16px;
  height: 24px;
  opacity: 0.9;
}

input.shop-search {
  margin: 0 !important;
  width: 100%;
  border-width: 0px !important;
  background: #f5f5f5;
  font-size: 1.8rem;
  border: none;
  padding: 1.3rem 1.8rem 1.3rem 3.6rem;
  border-radius: 2.4rem;
  outline: none !important;
  position: relative;
  z-index: 2;
  -webkit-appearance: none;
}
input.shop-search::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #555;
  opacity: 1;
  /* Firefox */
}
input.shop-search:focus {
  background: #fafafa;
}
input.shop-search:focus ~ button {
  background: #fafafa;
}
input.shop-search:valid ~ button::before {
  display: flex;
}
.search--wrapper {
  position: absolute;
  top: 60px;
  left: 0;
  z-index: 3;
  width: 100%;
  background: #fff;
}

.search-results,
.search-suggestions {
  display: none;
  max-width: 768px !important;
  margin: 0 auto !important;
}

body.search-suggestions-open .search-results form.main--wrapper input ~ span,
body.search-open form.main--wrapper input ~ span {
  display: flex;
  cursor: pointer;
}
body.search-suggestions-open .search-results form.main--wrapper input ~ button:before,
body.search-open form.main--wrapper input ~ button:before {
  display: flex;
}
body.search-suggestions-open .search-results .search--wrapper,
body.search-open .search--wrapper {
  -webkit-box-shadow: 0 12px 9px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 12px 9px 2px rgba(0, 0, 0, 0.2);
  padding: 2.4rem;
}
body.search-suggestions-open .search-results .search-results,
body.search-open .search-results {
  display: flex;
  position: relative;
  z-index: 5;
  padding: 0;
}
body.search-suggestions-open .search-results .exit-overlays,
body.search-open .exit-overlays {
  display: block;
  position: fixed;
  width: 100%;
  top: 300px;
  height: calc(100vh - 300px);
  z-index: 1;
}

.search-suggestions ul,
.search-results ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.search-suggestions li,
.search-results li {
  min-width: 280px;
  display: flex;
  align-items: center;
  padding: 12px 24px;
}
.search-suggestions li:hover,
.search-results li:hover {
  background: #fafafa;
}
.search-suggestions li h5,
.search-results li h5 {
  margin: 0;
}
.search-suggestions li a,
.search-results li a {
  display: flex;
  align-items: center;
  color: #333;
  text-decoration: none;
}
.search-suggestions li .image--wrapper,
.search-results li .image--wrapper {
  width: 64px;
  min-width: 64px;
  display: flex;
  justify-content: center;
  margin-right: 1.2rem;
}
.search-suggestions li img,
.search-results li img {
  width: 100%;
  max-width: 100%;
  max-height: 64px;
  height: 100%;
}
.search-suggestions li[data-blog-id="1135"],
.search-results li[data-blog-id="1135"] {
  display: none;
}

ul.intro-links {
  padding: 48px 0px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
ul.intro-links li {
  text-align: center;
  padding: 0 18px;
}
@media (max-width: 480px) {
  ul.intro-links li {
    width: 50%;
  }
}
ul.intro-links li a {
  color: #333;
  font-weight: 400;
  text-decoration: none;
  text-transform: capitalize;
  font-size: 17px;
}
ul.intro-links li a:hover {
  text-decoration: underline;
}

.article-categories {
  max-width: 800px;
  margin: 0 auto !important;
  padding: 36px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}
.article-categories li {
  width: 20%;
  min-width: 144px;
  display: flex;
  justify-content: center;
  margin-bottom: 0;
}
@media (max-width: 480px) {
  .article-categories li {
    width: 50%;
  }
}
.article-categories li a {
  padding: 18px;
  color: #333;
  font-size: 17px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
  text-decoration: none;
  text-transform: capitalize;
  border-radius: 6px;
}
.article-categories li a span:first-child {
  font-size: 32px;
  color: #000;
}
.article-categories li a span:nth-child(2) {
  padding-top: 6px;
  line-height: 1.1;
  font-weight: 500;
}
.article-categories li a:hover {
  background-color: #fafafa;
}
.article-categories li a:hover span:nth-child(2) {
  text-decoration: underline;
}

.pinned-articles-wrapper {
  margin-bottom: 48px;
  padding: 3.6rem 0;
  background-color: #fafaff;
}
.pinned-articles-wrapper .pinned-articles > div {
  display: flex;
  flex-wrap: wrap;
}
.pinned-articles-wrapper .pinned-articles .h5 {
  padding-bottom: 1.2rem;
}
.pinned-articles-wrapper .pinned-articles a {
  margin-bottom: 2.4rem;
  padding-right: 1.8rem;
  width: 33%;
  color: #333;
  text-decoration: none;
}
@media (max-width: 480px) {
  .pinned-articles-wrapper .pinned-articles a {
    width: 100%;
  }
}
.pinned-articles-wrapper .pinned-articles a h4 {
  line-height: 1.2;
}
.pinned-articles-wrapper .pinned-articles a span {
  font-size: 1.6rem;
  font-weight: 600;
  text-decoration: underline;
}
.pinned-articles-wrapper .pinned-articles a:hover {
  color: #333;
}
.pinned-articles-wrapper .pinned-articles a:hover span {
  text-decoration: none;
}

.template-blog,
.template-article {
  padding-right: 6px;
  padding-left: 6px;
}
@media (max-width: 768px) {
  .template-blog .site-header #headline,
.template-article .site-header #headline {
    font-size: 30px;
    text-align: left;
  }
}
.template-blog .side-bar,
.template-article .side-bar {
  position: sticky;
  max-width: 320px;
}
@media (max-width: 768px) {
  .template-blog .side-bar,
.template-article .side-bar {
    display: none !important;
  }
}
.template-blog .side-bar > ul > li,
.template-article .side-bar > ul > li {
  border-top: 1px solid #dedfe2;
  margin: 0;
}
.template-blog .side-bar > ul > li:last-child,
.template-article .side-bar > ul > li:last-child {
  border-bottom: 1px solid #dedfe2;
}
.template-blog .side-bar > ul > li .fa,
.template-article .side-bar > ul > li .fa {
  margin-right: 0.6rem;
  font-size: 1.25em;
}
.template-blog .side-bar > ul > li label,
.template-article .side-bar > ul > li label {
  font-size: 1.6rem;
  padding: 16px;
  margin: 0;
  text-transform: capitalize;
  position: relative;
  display: block;
}
.template-blog .side-bar > ul > li label:after,
.template-article .side-bar > ul > li label:after {
  display: block;
  content: "";
  position: absolute;
  right: 12px;
  top: calc(50% - 7px);
  width: 10px;
  height: 10px;
  border-right: 2px solid;
  border-bottom: 2px solid;
  transform: rotate(45deg);
  clear: both;
  transition: transform 300ms;
}
.template-blog .side-bar > ul > li ul,
.template-article .side-bar > ul > li ul {
  display: none;
  background-color: #fafafa;
  margin: 0;
  padding: 1rem 0.6rem;
}
.template-blog .side-bar > ul > li ul li a,
.template-article .side-bar > ul > li ul li a {
  font-size: 1.6rem;
  display: block;
  text-decoration: none;
  padding: 0.6rem 0.6rem 0.6rem 1.6rem;
}
.template-blog .side-bar > ul > li input[type=checkbox]:checked ~ label,
.template-article .side-bar > ul > li input[type=checkbox]:checked ~ label {
  border-bottom: 1px solid #dedfe2;
  font-weight: 500;
}
.template-blog .side-bar > ul > li input[type=checkbox]:checked ~ label:after,
.template-article .side-bar > ul > li input[type=checkbox]:checked ~ label:after {
  transform: rotate(225deg);
}
.template-blog .side-bar > ul > li input[type=checkbox]:checked ~ ul,
.template-article .side-bar > ul > li input[type=checkbox]:checked ~ ul {
  display: block;
}

.template-blog .side-bar {
  margin-top: 0;
}

.template-article {
  z-index: auto;
}
@media (max-width: 768px) {
  .template-article h1 {
    font-size: 24px;
  }
  .template-article h2 {
    font-size: 24px;
  }
  .template-article h3 {
    font-size: 20px;
    font-weight: 600;
  }
}
.template-article article blockquote {
  display: flex;
  background-color: #eeedff;
  border-left: 4px solid rgb(94, 53, 177) !important;
  margin-left: 0px;
  padding-left: 5px;
  color: rgb(94, 53, 177);
  padding: 18px 12px !important;
}
.template-article article blockquote::before {
  content: "\f06a";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
  margin-right: 6px;
}
.template-article article blockquote * {
  font-size: 1.6rem !important;
  color: rgb(94, 53, 177) !important;
  font-weight: 500 !important;
  margin: 0 !important;
  font-style: normal;
  display: inline-block;
}

.support-blog #headlines,
.template-blog #headlines {
  margin-top: 30px !important;
}
.support-blog .blog-articles article,
.template-blog .blog-articles article {
  width: 100%;
  padding: 24px;
}
@media (max-width: 768px) {
  .support-blog .blog-articles article,
.template-blog .blog-articles article {
    width: 100%;
    font-size: 20px;
    padding: 12px;
    border-top: 1px solid #f1f1f1;
  }
}
.support-blog .blog-articles article a,
.template-blog .blog-articles article a {
  text-decoration: none;
}
.support-blog .blog-articles article h3,
.template-blog .blog-articles article h3 {
  line-height: 1.1;
  font-size: 24px;
  color: #333;
}
@media (max-width: 768px) {
  .support-blog .blog-articles article h3,
.template-blog .blog-articles article h3 {
    font-size: 20px;
  }
}
.support-blog .blog-articles article .rte,
.template-blog .blog-articles article .rte {
  color: #333;
}
.support-blog .blog-articles article:hover,
.template-blog .blog-articles article:hover {
  background: #fafafa;
}
.support-blog .blog-articles .blog-image,
.template-blog .blog-articles .blog-image {
  display: none;
  padding-bottom: 50%;
  background-position: left top;
  background-size: cover;
  border-radius: 3px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px 0px;
  margin-bottom: 18px;
  margin: 24px;
}

.crumbs a {
  font-weight: 600;
}
.admin-support {
  padding-top: 70px;
}
.admin-support form button {
  margin-left: 0;
  top: 1rem;
}
.admin-support form input.shop-search {
  font-size: 1.6rem;
}

.support-blog .wrapper {
  padding: 1.2rem;
}
.support-blog .wrapper img {
  max-width: 100%;
}
.support-blog article {
  border-top: 1px solid #f1f1f1;
  padding: 0 !important;
}
.support-blog article a {
  display: flex;
  position: relative;
  padding: 2.4rem 2.4rem 2.4rem 1.2rem;
  font-size: 1.8rem;
  font-weight: 600;
  color: #333 !important;
  line-height: 1.2;
}
.support-blog article a:after {
  position: absolute;
  right: 1.2rem;
  top: calc(50% - 1rem);
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  border-top: 1px solid #888;
  border-right: 1px solid #888;
  transform: rotate(45deg);
}

.template-article .wrapper,
.support-article .wrapper {
  padding: 1.2rem;
}
.template-article .wrapper img,
.support-article .wrapper img {
  max-width: 100%;
}
.template-article article h1,
.support-article article h1 {
  font-size: 2.6rem;
  line-height: 1.1;
}
.template-article article h2,
.support-article article h2 {
  font-size: 2.1rem;
  line-height: 1.1;
}
.template-article article p,
.support-article article p {
  color: #111;
}
.template-article article li,
.support-article article li {
  list-style: disc;
  list-style-position: inside;
  padding: 0.2rem 0;
  color: #111;
}
.template-article article img,
.support-article article img {
  box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px 0px;
  margin: 2.4rem 0 !important;
  max-width: 100% !important;
}
.template-article article code,
.template-article article pre,
.support-article article code,
.support-article article pre {
  background-color: #faf7f5;
  font-family: Consolas, monospace;
  font-size: 1em;
  border: 0 none;
  padding: 1.2rem;
  color: #51ab62;
}
.template-article article blockquote,
.support-article article blockquote {
  display: flex;
  background-color: #EAF7E0;
  border-left: 4px solid #35B139 !important;
  margin-left: 0px;
  padding-left: 5px;
  color: #35B139;
  padding: 18px 12px !important;
}
.template-article article blockquote::before,
.support-article article blockquote::before {
  content: "\f06a";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
  margin-right: 6px;
  color: #35B139;
}
.template-article article blockquote *,
.support-article article blockquote * {
  font-size: 1.6rem !important;
  color: #35B139 !important;
  font-weight: 500 !important;
  margin: 0 !important;
  font-style: normal;
  display: inline;
}
.template-article .footnote,
.support-article .footnote {
  border-top: 1px solid #ccc;
  margin-top: 4.8rem;
  padding: 2.4rem;
}

.fa {
  background: linear-gradient(to bottom right, #05d6f1 0%, #294ea2 100%);
  /*background: linear-gradient(to bottom right, #00BCD4 0%, #9C27B0 100%);*/
  background: #444;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  text-shadow: none;
}

.fa-oversikt:before {
  content: "\f06e";
}

.fa-dropshipping:before {
  content: "\f0ed";
}

.fa-marknadsplatser:before,
.fa-sales-channels:before,
.fa-forsaljningskanaler:before {
  content: "\f0e8";
}

.fa-e-post-meddelanden:before,
.fa-email-notifications:before {
  content: "\f09e";
}

.fa-apps:before,
.fa-appar:before {
  content: "\f12e";
}

.fa-shop-settings:before,
.fa-butiksinstallningar:before {
  content: "\f015";
}

.fa-account-settings:before,
.fa-kontoinstallningar:before {
  content: "\f085";
}

.fa-my-account:before,
.fa-mitt-konto:before {
  content: "\f007";
}

.fa-kassa-betalning:before,
.fa-checkout-payment:before {
  content: "\f09d";
}

.fa-navigation:before,
.fa-navigering:before {
  content: "\f0c1";
}

.fa-themes:before,
.fa-teman:before {
  content: "\f03e";
}

.fa-promotions:before,
.fa-erbjudanden:before {
  content: "\f0a1";
}

.fa-products:before,
.fa-produkter:before {
  content: "\f02c";
}

.fa-collections:before,
.fa-kategorier:before,
.fa-categories:before {
  content: "\f187";
}

.fa-blogg:before,
.fa-blogs:before,
.fa-bloggartiklar:before,
.fa-blog-articles:before {
  content: "\f133";
}

.fa-kunder:before,
.fa-customers:before {
  content: "\f007";
}

.fa-sidor:before,
.fa-pages:before {
  content: "\f0db";
}

.fa-ordrar:before,
.fa-orders:before {
  content: "\f01c";
}

.fa-frakt-leverans:before {
  content: "\f0d1";
}

.fa-domaner:before,
.fa-domains:before {
  content: "\f074";
}

.fa-marknadsforing:before,
.fa-produktannonsering:before {
  content: "\f140";
}

.fa-produktomdomen:before {
  content: "\f005";
}

.fa-prisjamforelser:before {
  content: "\f24e";
}

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  overflow-y: auto !important;
}

html {
  font-size: 62.5%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  box-sizing: border-box;
  height: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-size: 1.6rem;
  position: relative;
  background-color: #fff;
}
body.creating-store, body.menu-open, body.show-create-store-modal, body.zoom-open {
  overflow: hidden;
  height: 100%;
}

h1, h2, h3, h4, h5 {
  margin: 0 0 1.2rem 0;
  font-weight: 600;
}

h1 {
  font-size: 4.1rem;
}
@media (max-width: 600px) {
  h1 {
    font-size: 3rem;
  }
}

h2 {
  font-size: 3.6rem;
  line-height: 1.2;
}
@media (max-width: 600px) {
  h2 {
    font-size: 2.4rem;
  }
}

h3 {
  font-size: 2.4rem;
}
@media (max-width: 600px) {
  h3 {
    font-size: 2rem;
  }
}

h4 {
  font-size: 2.1rem;
}
@media (max-width: 600px) {
  h4 {
    font-size: 1.8rem;
  }
}

ul {
  padding: 0;
}

li {
  list-style: none;
  list-style-position: outside;
  line-height: 1.34;
}

p {
  margin-bottom: 2.4rem;
  line-height: 1.34;
}

small {
  display: inherit;
  font-size: 1.2rem;
  line-height: 1.3;
}

strong {
  font-weight: 600;
}

img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
}

a {
  color: #0769e6;
  text-decoration: none;
}
a:focus {
  text-decoration: underline;
}

button:hover,
input[type=submit] {
  cursor: pointer;
}

textarea, input, button, select {
  font-family: inherit;
  font-size: inherit;
}

.cta-button {
  text-align: center;
  display: inline-block;
  font-weight: bold;
  padding: 1.2rem 2.4rem;
  background: #0769e6;
  border-radius: 2em;
  text-decoration: none !important;
  text-shadow: none !important;
  color: #fafafa;
  border: none;
}
.main-nav .cta-button {
  padding: 0.8rem 2.4rem;
}
.cta-button i.fa {
  background-color: #0769e6;
}

.cta-sec-button {
  text-align: center;
  display: inline-block;
  font-weight: bold;
  padding: 1.2rem 2.4rem;
  border: 1px solid #0769e6;
  border-radius: 2em;
  text-decoration: none !important;
  text-shadow: none !important;
  color: #0769e6 !important;
}
#preview-bar .cta-sec-button, .main-nav .cta-sec-button {
  padding: 0.8rem 2.4rem;
}
.cta-sec-button i.fa {
  background-color: #0769e6;
}

.main--wrapper,
section,
body > footer {
  max-width: 140rem;
  margin: 0 auto 6rem;
  padding: 0 1.2rem;
}
@media (min-width: 600px) {
  .main--wrapper,
section,
body > footer {
    padding: 0 2.4rem;
  }
}

.main-nav {
  position: relative;
  z-index: 3;
}
.main-nav + .main--wrapper {
  padding-top: 2.4rem;
}

body > footer {
  padding-bottom: 3.6rem;
}
body > footer li {
  margin-bottom: 2rem;
}
body > footer li svg {
  width: 1.5rem !important;
  height: auto;
  margin-right: 0.4rem;
  vertical-align: middle;
}
body > footer li span.round-flag {
  display: inline-block;
  margin-right: 0.4rem;
  width: 15px;
  height: 15px;
  background-image: url(/static/admin/flags_locale/sv.gif);
  background-size: cover;
  background-position: left;
  border-radius: 8px;
  vertical-align: text-bottom;
}
body > footer li.social-networks {
  display: flex;
}
body > footer li.social-networks a {
  width: 3.6rem;
  height: 3.6rem;
  display: flex;
  border: none;
}
body > footer a {
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2.4rem;
  padding: 6px 0;
  color: #333;
  opacity: 0.75;
  margin: 0;
  border-bottom: 1px solid #dadada;
}

#startShopModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 480px;
  max-height: 690px;
  overflow: scroll;
  background: #fff;
  box-shadow: 0px 10px 80px rgba(0, 0, 0, 0.25);
  z-index: 21;
}
@media (min-width: 600px) {
  #startShopModal {
    left: 50%;
    transform: translate(-50%, 3.6rem);
  }
}
body.show-create-store-modal #startShopModal {
  display: block !important;
}
body.show-create-store-modal #startShopModal ~ .exit-overlays {
  display: block !important;
}
#startShopModal .modal--content {
  position: relative;
  padding: 1.2em;
}
@media (min-width: 600px) {
  #startShopModal .modal--content {
    padding: 3.6em;
  }
}
#startShopModal h2 {
  font-size: 3rem;
  max-width: calc(100% - 4.8rem);
}
#startShopModal form label,
#startShopModal form small {
  display: block;
  line-height: 1.3;
  margin: 0;
  font-size: 1.6rem;
}
#startShopModal input {
  border: 1px solid #e5e5e5;
  width: 100%;
  display: block;
  margin: 0 0 1em;
  padding: 12px 15px;
}
#startShopModal .cta-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
#startShopModal .accept_term--wrapper {
  display: flex;
  padding: 0.6rem 0 1.2rem;
}
#startShopModal #accept_terms {
  height: 20px;
  width: 20px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.6rem;
}
#startShopModal form small {
  font-size: 1.4rem;
  color: #888;
  margin-bottom: 0.9rem;
  display: inline-block;
}
#startShopModal #shopPassword ~ label {
  display: none;
}
#startShopModal #shopPassword:valid ~ label {
  display: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
}
#startShopModal .password--wrapper {
  position: relative;
}
#startShopModal .password-toggle svg {
  display: none;
  opacity: 0.7;
}
#startShopModal #password-toggle[type=checkbox]:not(:checked) ~ .password-toggle .open-eye {
  display: inline-block !important;
  height: 17px;
}
#startShopModal #password-toggle[type=checkbox]:checked ~ .password-toggle .closed-eye {
  display: inline-block;
  height: 20px;
}
#startShopModal .password-toggle {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48px;
  height: 100%;
  text-align: center;
}
body.creating-store #startShopModal {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100vh;
  background: #fff;
  transform: none;
  z-index: 21;
}
body.creating-store #startShopModal > .modal--content {
  display: none;
}
body.creating-store #startShopModal .creating-store-loading {
  display: flex !important;
  text-align: center;
}

.exit-overlays {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  z-index: 11;
}
@media (max-width: 600px) {
  .exit-overlays {
    display: relative;
    z-index: 22;
    width: 36px;
    height: 36px;
    background: #fafafa;
    top: 12px;
    right: 12px;
    left: initial;
    border-radius: 18px;
  }
  .exit-overlays::before, .exit-overlays::after {
    position: absolute;
    left: 0;
    top: calc(50% - 2px);
    display: block;
    height: 4px;
    content: "";
    width: 100%;
    background: #333;
    transform: rotate(45deg) scale(0.7);
  }
  .exit-overlays::after {
    transform: rotate(-45deg) scale(0.7);
  }
}

.signup-box .placeholder {
  justify-content: center;
  align-items: center;
}
.signup-box .placeholder h3 {
  line-height: 1.34;
}
.signup-box .placeholder > div {
  max-width: 48rem;
}

.hide {
  display: none !important;
}

.flex {
  display: flex;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.column {
  flex-direction: column;
}

.text-center {
  text-align: center;
}

.radius {
  border-radius: 12px;
}

.template-404 .main-nav + .main--wrapper .grid {
  align-items: center;
  justify-content: center;
  height: 50vh;
}

/** tpp consent **/
.tpp__cook_msg {
  display: block;
  background-color: #fff;
  color: #000;
  font-family: inherit;
  bottom: 0;
  left: 1.2rem;
  position: fixed;
  padding: 1.6rem 1.2rem;
  text-align: left;
  width: 28rem;
  z-index: 20;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px 0px;
  line-height: 1.34;
}

.tpp__cook_msg hr {
  border-bottom: 0px solid #e5e5e5;
  margin: 10px;
  border: none;
  border-bottom: 0px solid #c1c1c1;
}

.tpp__cook_msg a {
  font-weight: 700;
  text-decoration: none;
  color: #0769e6;
}

.tpp__cook_msg #accept {
  background-color: #0769e6;
  color: #fff;
  border: 2px solid #0769e6;
  border-radius: 2rem;
  padding: 0.8rem 1.8rem;
  font-size: 1.6rem;
}

/** tpp consent **/