web-component-stencil-test/dist/collection/components/grid-col/grid-col.css

Stencil Component Starter

/* ease */
:global * {
  vertical-align: baseline;
  border: 0 none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:global html,
:global body,
:global div,
:global span,
:global applet,
:global object,
:global iframe,
:global table,
:global caption,
:global tbody,
:global tfoot,
:global thead,
:global tr,
:global th,
:global td,
:global del,
:global dfn,
:global em,
:global font,
:global img,
:global ins,
:global kbd,
:global q,
:global s,
:global samp,
:global small,
:global strike,
:global strong,
:global sub,
:global sup,
:global tt,
:global var,
:global h1,
:global h2,
:global h3,
:global h4,
:global h5,
:global h6,
:global p,
:global blockquote,
:global pre,
:global a,
:global abbr,
:global acronym,
:global address,
:global big,
:global cite,
:global code,
:global dl,
:global dt,
:global dd,
:global ol,
:global ul,
:global li,
:global fieldset,
:global form,
:global label,
:global legend,
:global button {
  font-family: inherit;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
  font-style: inherit;
  vertical-align: inherit;
  border: 0 none;
  padding: 0;
  margin: 0;
}

:global a,
:global button {
  font-family: inherit;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
  font-style: inherit;
  vertical-align: inherit;
  border: 0 none;
  padding: 0;
  margin: 0;
}

:global img {
  width: 100%;
  height: auto;
  display: block;
}

:global figure {
  margin: 0;
}

:global button {
  border: none;
  border-radius: 0;
  background-color: transparent;
  cursor: pointer;
}

:global [role=button],
:global input[type=submit],
:global input[type=reset],
:global input[type=button],
:global button {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

:global input[type=submit],
:global input[type=reset],
:global input[type=button],
:global button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  -webkit-appearance: button;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

:global input::-moz-focus-inner,
:global button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

:global strong {
  font-weight: bold;
}

:global li {
  list-style-type: none;
}

:global a {
  text-decoration: none;
  cursor: pointer;
  line-height: normal;
}

*:focus {
  transition-delay: 0ms;
}

:global a,
:global strong,
:global span,
:global em {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  font-family: inherit;
}

.grid-col {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  width: 100%;
  max-width: 100%;
}

.col-xs-1 {
  flex-basis: 5.5555555556%;
  width: 5.5555555556%;
  max-width: 5.5555555556%;
}

.col-xs-2 {
  flex-basis: 11.1111111111%;
  width: 11.1111111111%;
  max-width: 11.1111111111%;
}

.col-xs-3 {
  flex-basis: 16.6666666667%;
  width: 16.6666666667%;
  max-width: 16.6666666667%;
}

.col-xs-4 {
  flex-basis: 22.2222222222%;
  width: 22.2222222222%;
  max-width: 22.2222222222%;
}

.col-xs-5 {
  flex-basis: 27.7777777778%;
  width: 27.7777777778%;
  max-width: 27.7777777778%;
}

.col-xs-6 {
  flex-basis: 33.3333333333%;
  width: 33.3333333333%;
  max-width: 33.3333333333%;
}

.col-xs-7 {
  flex-basis: 38.8888888889%;
  width: 38.8888888889%;
  max-width: 38.8888888889%;
}

.col-xs-8 {
  flex-basis: 44.4444444444%;
  width: 44.4444444444%;
  max-width: 44.4444444444%;
}

.col-xs-9 {
  flex-basis: 50%;
  width: 50%;
  max-width: 50%;
}

.col-xs-10 {
  flex-basis: 55.5555555556%;
  width: 55.5555555556%;
  max-width: 55.5555555556%;
}

.col-xs-11 {
  flex-basis: 61.1111111111%;
  width: 61.1111111111%;
  max-width: 61.1111111111%;
}

.col-xs-12 {
  flex-basis: 66.6666666667%;
  width: 66.6666666667%;
  max-width: 66.6666666667%;
}

.col-xs-13 {
  flex-basis: 72.2222222222%;
  width: 72.2222222222%;
  max-width: 72.2222222222%;
}

.col-xs-14 {
  flex-basis: 77.7777777778%;
  width: 77.7777777778%;
  max-width: 77.7777777778%;
}

.col-xs-15 {
  flex-basis: 83.3333333333%;
  width: 83.3333333333%;
  max-width: 83.3333333333%;
}

.col-xs-16 {
  flex-basis: 88.8888888889%;
  width: 88.8888888889%;
  max-width: 88.8888888889%;
}

.col-xs-17 {
  flex-basis: 94.4444444444%;
  width: 94.4444444444%;
  max-width: 94.4444444444%;
}

.col-xs-18 {
  flex-basis: 100%;
  width: 100%;
  max-width: 100%;
}

/* Don't need the full panel of classes, just have of it */
.col-offset-xs-0 {
  margin-left: 0%;
}

.col-offset-xs-1 {
  margin-left: 5.5555555556%;
}

.col-offset-xs-2 {
  margin-left: 11.1111111111%;
}

.col-offset-xs-3 {
  margin-left: 16.6666666667%;
}

.col-offset-xs-4 {
  margin-left: 22.2222222222%;
}

.col-offset-xs-5 {
  margin-left: 27.7777777778%;
}

.col-offset-xs-6 {
  margin-left: 33.3333333333%;
}

.col-offset-xs-7 {
  margin-left: 38.8888888889%;
}

.col-offset-xs-8 {
  margin-left: 44.4444444444%;
}

.col-offset-xs-9 {
  margin-left: 50%;
}

.col-offset-xs-10 {
  margin-left: 55.5555555556%;
}

.col-offset-xs-11 {
  margin-left: 61.1111111111%;
}

.col-offset-xs-12 {
  margin-left: 66.6666666667%;
}

.col-offset-xs-13 {
  margin-left: 72.2222222222%;
}

.col-offset-xs-14 {
  margin-left: 77.7777777778%;
}

.col-offset-xs-15 {
  margin-left: 83.3333333333%;
}

.col-offset-xs-16 {
  margin-left: 88.8888888889%;
}

.col-offset-xs-17 {
  margin-left: 94.4444444444%;
}

.col-offset-xs-18 {
  margin-left: 100%;
}

/* Don't need the full panel of classes, just have of it */
.col-offset-right-XS-1 {
  margin-right: 5.5555555556%;
}

.col-offset-right-XS-2 {
  margin-right: 11.1111111111%;
}

.col-offset-right-XS-3 {
  margin-right: 16.6666666667%;
}

.col-offset-right-XS-4 {
  margin-right: 22.2222222222%;
}

.col-offset-right-XS-5 {
  margin-right: 27.7777777778%;
}

.col-offset-right-XS-6 {
  margin-right: 33.3333333333%;
}

.col-offset-right-XS-7 {
  margin-right: 38.8888888889%;
}

.col-offset-right-XS-8 {
  margin-right: 44.4444444444%;
}

.col-offset-right-XS-9 {
  margin-right: 50%;
}

@media (min-width: 420px) {
  .col-s-1 {
    flex-basis: 5.5555555556%;
    width: 5.5555555556%;
    max-width: 5.5555555556%;
  }
}

@media (min-width: 420px) {
  .col-s-2 {
    flex-basis: 11.1111111111%;
    width: 11.1111111111%;
    max-width: 11.1111111111%;
  }
}

@media (min-width: 420px) {
  .col-s-3 {
    flex-basis: 16.6666666667%;
    width: 16.6666666667%;
    max-width: 16.6666666667%;
  }
}

@media (min-width: 420px) {
  .col-s-4 {
    flex-basis: 22.2222222222%;
    width: 22.2222222222%;
    max-width: 22.2222222222%;
  }
}

@media (min-width: 420px) {
  .col-s-5 {
    flex-basis: 27.7777777778%;
    width: 27.7777777778%;
    max-width: 27.7777777778%;
  }
}

@media (min-width: 420px) {
  .col-s-6 {
    flex-basis: 33.3333333333%;
    width: 33.3333333333%;
    max-width: 33.3333333333%;
  }
}

@media (min-width: 420px) {
  .col-s-7 {
    flex-basis: 38.8888888889%;
    width: 38.8888888889%;
    max-width: 38.8888888889%;
  }
}

@media (min-width: 420px) {
  .col-s-8 {
    flex-basis: 44.4444444444%;
    width: 44.4444444444%;
    max-width: 44.4444444444%;
  }
}

@media (min-width: 420px) {
  .col-s-9 {
    flex-basis: 50%;
    width: 50%;
    max-width: 50%;
  }
}

@media (min-width: 420px) {
  .col-s-10 {
    flex-basis: 55.5555555556%;
    width: 55.5555555556%;
    max-width: 55.5555555556%;
  }
}

@media (min-width: 420px) {
  .col-s-11 {
    flex-basis: 61.1111111111%;
    width: 61.1111111111%;
    max-width: 61.1111111111%;
  }
}

@media (min-width: 420px) {
  .col-s-12 {
    flex-basis: 66.6666666667%;
    width: 66.6666666667%;
    max-width: 66.6666666667%;
  }
}

@media (min-width: 420px) {
  .col-s-13 {
    flex-basis: 72.2222222222%;
    width: 72.2222222222%;
    max-width: 72.2222222222%;
  }
}

@media (min-width: 420px) {
  .col-s-14 {
    flex-basis: 77.7777777778%;
    width: 77.7777777778%;
    max-width: 77.7777777778%;
  }
}

@media (min-width: 420px) {
  .col-s-15 {
    flex-basis: 83.3333333333%;
    width: 83.3333333333%;
    max-width: 83.3333333333%;
  }
}

@media (min-width: 420px) {
  .col-s-16 {
    flex-basis: 88.8888888889%;
    width: 88.8888888889%;
    max-width: 88.8888888889%;
  }
}

@media (min-width: 420px) {
  .col-s-17 {
    flex-basis: 94.4444444444%;
    width: 94.4444444444%;
    max-width: 94.4444444444%;
  }
}

@media (min-width: 420px) {
  .col-s-18 {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }
}

/* Don't need the full panel of classes, just have of it */
@media (min-width: 420px) {
  .col-offset-s-0 {
    margin-left: 0%;
  }
}

@media (min-width: 420px) {
  .col-offset-s-1 {
    margin-left: 5.5555555556%;
  }
}

@media (min-width: 420px) {
  .col-offset-s-2 {
    margin-left: 11.1111111111%;
  }
}

@media (min-width: 420px) {
  .col-offset-s-3 {
    margin-left: 16.6666666667%;
  }
}

@media (min-width: 420px) {
  .col-offset-s-4 {
    margin-left: 22.2222222222%;
  }
}

@media (min-width: 420px) {
  .col-offset-s-5 {
    margin-left: 27.7777777778%;
  }
}

@media (min-width: 420px) {
  .col-offset-s-6 {
    margin-left: 33.3333333333%;
  }
}

@media (min-width: 420px) {
  .col-offset-s-7 {
    margin-left: 38.8888888889%;
  }
}

@media (min-width: 420px) {
  .col-offset-s-8 {
    margin-left: 44.4444444444%;
  }
}

@media (min-width: 420px) {
  .col-offset-s-9 {
    margin-left: 50%;
  }
}

@media (min-width: 420px) {
  .col-offset-s-10 {
    margin-left: 55.5555555556%;
  }
}

@media (min-width: 420px) {
  .col-offset-s-11 {
    margin-left: 61.1111111111%;
  }
}

@media (min-width: 420px) {
  .col-offset-s-12 {
    margin-left: 66.6666666667%;
  }
}

@media (min-width: 420px) {
  .col-offset-s-13 {
    margin-left: 72.2222222222%;
  }
}

@media (min-width: 420px) {
  .col-offset-s-14 {
    margin-left: 77.7777777778%;
  }
}

@media (min-width: 420px) {
  .col-offset-s-15 {
    margin-left: 83.3333333333%;
  }
}

@media (min-width: 420px) {
  .col-offset-s-16 {
    margin-left: 88.8888888889%;
  }
}

@media (min-width: 420px) {
  .col-offset-s-17 {
    margin-left: 94.4444444444%;
  }
}

@media (min-width: 420px) {
  .col-offset-s-18 {
    margin-left: 100%;
  }
}

/* Don't need the full panel of classes, just have of it */
@media (min-width: 420px) {
  .col-offset-right-S-1 {
    margin-right: 5.5555555556%;
  }
}

@media (min-width: 420px) {
  .col-offset-right-S-2 {
    margin-right: 11.1111111111%;
  }
}

@media (min-width: 420px) {
  .col-offset-right-S-3 {
    margin-right: 16.6666666667%;
  }
}

@media (min-width: 420px) {
  .col-offset-right-S-4 {
    margin-right: 22.2222222222%;
  }
}

@media (min-width: 420px) {
  .col-offset-right-S-5 {
    margin-right: 27.7777777778%;
  }
}

@media (min-width: 420px) {
  .col-offset-right-S-6 {
    margin-right: 33.3333333333%;
  }
}

@media (min-width: 420px) {
  .col-offset-right-S-7 {
    margin-right: 38.8888888889%;
  }
}

@media (min-width: 420px) {
  .col-offset-right-S-8 {
    margin-right: 44.4444444444%;
  }
}

@media (min-width: 420px) {
  .col-offset-right-S-9 {
    margin-right: 50%;
  }
}

@media (min-width: 768px) {
  .col-m-1 {
    flex-basis: 2.7777777778%;
    width: 2.7777777778%;
    max-width: 2.7777777778%;
  }
}

@media (min-width: 768px) {
  .col-m-2 {
    flex-basis: 5.5555555556%;
    width: 5.5555555556%;
    max-width: 5.5555555556%;
  }
}

@media (min-width: 768px) {
  .col-m-3 {
    flex-basis: 8.3333333333%;
    width: 8.3333333333%;
    max-width: 8.3333333333%;
  }
}

@media (min-width: 768px) {
  .col-m-4 {
    flex-basis: 11.1111111111%;
    width: 11.1111111111%;
    max-width: 11.1111111111%;
  }
}

@media (min-width: 768px) {
  .col-m-5 {
    flex-basis: 13.8888888889%;
    width: 13.8888888889%;
    max-width: 13.8888888889%;
  }
}

@media (min-width: 768px) {
  .col-m-6 {
    flex-basis: 16.6666666667%;
    width: 16.6666666667%;
    max-width: 16.6666666667%;
  }
}

@media (min-width: 768px) {
  .col-m-7 {
    flex-basis: 19.4444444444%;
    width: 19.4444444444%;
    max-width: 19.4444444444%;
  }
}

@media (min-width: 768px) {
  .col-m-8 {
    flex-basis: 22.2222222222%;
    width: 22.2222222222%;
    max-width: 22.2222222222%;
  }
}

@media (min-width: 768px) {
  .col-m-9 {
    flex-basis: 25%;
    width: 25%;
    max-width: 25%;
  }
}

@media (min-width: 768px) {
  .col-m-10 {
    flex-basis: 27.7777777778%;
    width: 27.7777777778%;
    max-width: 27.7777777778%;
  }
}

@media (min-width: 768px) {
  .col-m-11 {
    flex-basis: 30.5555555556%;
    width: 30.5555555556%;
    max-width: 30.5555555556%;
  }
}

@media (min-width: 768px) {
  .col-m-12 {
    flex-basis: 33.3333333333%;
    width: 33.3333333333%;
    max-width: 33.3333333333%;
  }
}

@media (min-width: 768px) {
  .col-m-13 {
    flex-basis: 36.1111111111%;
    width: 36.1111111111%;
    max-width: 36.1111111111%;
  }
}

@media (min-width: 768px) {
  .col-m-14 {
    flex-basis: 38.8888888889%;
    width: 38.8888888889%;
    max-width: 38.8888888889%;
  }
}

@media (min-width: 768px) {
  .col-m-15 {
    flex-basis: 41.6666666667%;
    width: 41.6666666667%;
    max-width: 41.6666666667%;
  }
}

@media (min-width: 768px) {
  .col-m-16 {
    flex-basis: 44.4444444444%;
    width: 44.4444444444%;
    max-width: 44.4444444444%;
  }
}

@media (min-width: 768px) {
  .col-m-17 {
    flex-basis: 47.2222222222%;
    width: 47.2222222222%;
    max-width: 47.2222222222%;
  }
}

@media (min-width: 768px) {
  .col-m-18 {
    flex-basis: 50%;
    width: 50%;
    max-width: 50%;
  }
}

@media (min-width: 768px) {
  .col-m-19 {
    flex-basis: 52.7777777778%;
    width: 52.7777777778%;
    max-width: 52.7777777778%;
  }
}

@media (min-width: 768px) {
  .col-m-20 {
    flex-basis: 55.5555555556%;
    width: 55.5555555556%;
    max-width: 55.5555555556%;
  }
}

@media (min-width: 768px) {
  .col-m-21 {
    flex-basis: 58.3333333333%;
    width: 58.3333333333%;
    max-width: 58.3333333333%;
  }
}

@media (min-width: 768px) {
  .col-m-22 {
    flex-basis: 61.1111111111%;
    width: 61.1111111111%;
    max-width: 61.1111111111%;
  }
}

@media (min-width: 768px) {
  .col-m-23 {
    flex-basis: 63.8888888889%;
    width: 63.8888888889%;
    max-width: 63.8888888889%;
  }
}

@media (min-width: 768px) {
  .col-m-24 {
    flex-basis: 66.6666666667%;
    width: 66.6666666667%;
    max-width: 66.6666666667%;
  }
}

@media (min-width: 768px) {
  .col-m-25 {
    flex-basis: 69.4444444444%;
    width: 69.4444444444%;
    max-width: 69.4444444444%;
  }
}

@media (min-width: 768px) {
  .col-m-26 {
    flex-basis: 72.2222222222%;
    width: 72.2222222222%;
    max-width: 72.2222222222%;
  }
}

@media (min-width: 768px) {
  .col-m-27 {
    flex-basis: 75%;
    width: 75%;
    max-width: 75%;
  }
}

@media (min-width: 768px) {
  .col-m-28 {
    flex-basis: 77.7777777778%;
    width: 77.7777777778%;
    max-width: 77.7777777778%;
  }
}

@media (min-width: 768px) {
  .col-m-29 {
    flex-basis: 80.5555555556%;
    width: 80.5555555556%;
    max-width: 80.5555555556%;
  }
}

@media (min-width: 768px) {
  .col-m-30 {
    flex-basis: 83.3333333333%;
    width: 83.3333333333%;
    max-width: 83.3333333333%;
  }
}

@media (min-width: 768px) {
  .col-m-31 {
    flex-basis: 86.1111111111%;
    width: 86.1111111111%;
    max-width: 86.1111111111%;
  }
}

@media (min-width: 768px) {
  .col-m-32 {
    flex-basis: 88.8888888889%;
    width: 88.8888888889%;
    max-width: 88.8888888889%;
  }
}

@media (min-width: 768px) {
  .col-m-33 {
    flex-basis: 91.6666666667%;
    width: 91.6666666667%;
    max-width: 91.6666666667%;
  }
}

@media (min-width: 768px) {
  .col-m-34 {
    flex-basis: 94.4444444444%;
    width: 94.4444444444%;
    max-width: 94.4444444444%;
  }
}

@media (min-width: 768px) {
  .col-m-35 {
    flex-basis: 97.2222222222%;
    width: 97.2222222222%;
    max-width: 97.2222222222%;
  }
}

@media (min-width: 768px) {
  .col-m-36 {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }
}

/* Don't need the full panel of classes, just have of it */
@media (min-width: 768px) {
  .col-offset-m-0 {
    margin-left: 0%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-1 {
    margin-left: 2.7777777778%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-2 {
    margin-left: 5.5555555556%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-3 {
    margin-left: 8.3333333333%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-4 {
    margin-left: 11.1111111111%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-5 {
    margin-left: 13.8888888889%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-6 {
    margin-left: 16.6666666667%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-7 {
    margin-left: 19.4444444444%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-8 {
    margin-left: 22.2222222222%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-9 {
    margin-left: 25%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-10 {
    margin-left: 27.7777777778%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-11 {
    margin-left: 30.5555555556%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-12 {
    margin-left: 33.3333333333%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-13 {
    margin-left: 36.1111111111%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-14 {
    margin-left: 38.8888888889%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-15 {
    margin-left: 41.6666666667%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-16 {
    margin-left: 44.4444444444%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-17 {
    margin-left: 47.2222222222%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-18 {
    margin-left: 50%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-19 {
    margin-left: 52.7777777778%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-20 {
    margin-left: 55.5555555556%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-21 {
    margin-left: 58.3333333333%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-22 {
    margin-left: 61.1111111111%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-23 {
    margin-left: 63.8888888889%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-24 {
    margin-left: 66.6666666667%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-25 {
    margin-left: 69.4444444444%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-26 {
    margin-left: 72.2222222222%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-27 {
    margin-left: 75%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-28 {
    margin-left: 77.7777777778%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-29 {
    margin-left: 80.5555555556%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-30 {
    margin-left: 83.3333333333%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-31 {
    margin-left: 86.1111111111%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-32 {
    margin-left: 88.8888888889%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-33 {
    margin-left: 91.6666666667%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-34 {
    margin-left: 94.4444444444%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-35 {
    margin-left: 97.2222222222%;
  }
}

@media (min-width: 768px) {
  .col-offset-m-36 {
    margin-left: 100%;
  }
}

/* Don't need the full panel of classes, just have of it */
@media (min-width: 768px) {
  .col-offset-right-M-1 {
    margin-right: 2.7777777778%;
  }
}

@media (min-width: 768px) {
  .col-offset-right-M-2 {
    margin-right: 5.5555555556%;
  }
}

@media (min-width: 768px) {
  .col-offset-right-M-3 {
    margin-right: 8.3333333333%;
  }
}

@media (min-width: 768px) {
  .col-offset-right-M-4 {
    margin-right: 11.1111111111%;
  }
}

@media (min-width: 768px) {
  .col-offset-right-M-5 {
    margin-right: 13.8888888889%;
  }
}

@media (min-width: 768px) {
  .col-offset-right-M-6 {
    margin-right: 16.6666666667%;
  }
}

@media (min-width: 768px) {
  .col-offset-right-M-7 {
    margin-right: 19.4444444444%;
  }
}

@media (min-width: 768px) {
  .col-offset-right-M-8 {
    margin-right: 22.2222222222%;
  }
}

@media (min-width: 768px) {
  .col-offset-right-M-9 {
    margin-right: 25%;
  }
}

@media (min-width: 768px) {
  .col-offset-right-M-10 {
    margin-right: 27.7777777778%;
  }
}

@media (min-width: 768px) {
  .col-offset-right-M-11 {
    margin-right: 30.5555555556%;
  }
}

@media (min-width: 768px) {
  .col-offset-right-M-12 {
    margin-right: 33.3333333333%;
  }
}

@media (min-width: 768px) {
  .col-offset-right-M-13 {
    margin-right: 36.1111111111%;
  }
}

@media (min-width: 768px) {
  .col-offset-right-M-14 {
    margin-right: 38.8888888889%;
  }
}

@media (min-width: 768px) {
  .col-offset-right-M-15 {
    margin-right: 41.6666666667%;
  }
}

@media (min-width: 768px) {
  .col-offset-right-M-16 {
    margin-right: 44.4444444444%;
  }
}

@media (min-width: 768px) {
  .col-offset-right-M-17 {
    margin-right: 47.2222222222%;
  }
}

@media (min-width: 768px) {
  .col-offset-right-M-18 {
    margin-right: 50%;
  }
}

@media (min-width: 1024px) {
  .col-l-1 {
    flex-basis: 2.7777777778%;
    width: 2.7777777778%;
    max-width: 2.7777777778%;
  }
}

@media (min-width: 1024px) {
  .col-l-2 {
    flex-basis: 5.5555555556%;
    width: 5.5555555556%;
    max-width: 5.5555555556%;
  }
}

@media (min-width: 1024px) {
  .col-l-3 {
    flex-basis: 8.3333333333%;
    width: 8.3333333333%;
    max-width: 8.3333333333%;
  }
}

@media (min-width: 1024px) {
  .col-l-4 {
    flex-basis: 11.1111111111%;
    width: 11.1111111111%;
    max-width: 11.1111111111%;
  }
}

@media (min-width: 1024px) {
  .col-l-5 {
    flex-basis: 13.8888888889%;
    width: 13.8888888889%;
    max-width: 13.8888888889%;
  }
}

@media (min-width: 1024px) {
  .col-l-6 {
    flex-basis: 16.6666666667%;
    width: 16.6666666667%;
    max-width: 16.6666666667%;
  }
}

@media (min-width: 1024px) {
  .col-l-7 {
    flex-basis: 19.4444444444%;
    width: 19.4444444444%;
    max-width: 19.4444444444%;
  }
}

@media (min-width: 1024px) {
  .col-l-8 {
    flex-basis: 22.2222222222%;
    width: 22.2222222222%;
    max-width: 22.2222222222%;
  }
}

@media (min-width: 1024px) {
  .col-l-9 {
    flex-basis: 25%;
    width: 25%;
    max-width: 25%;
  }
}

@media (min-width: 1024px) {
  .col-l-10 {
    flex-basis: 27.7777777778%;
    width: 27.7777777778%;
    max-width: 27.7777777778%;
  }
}

@media (min-width: 1024px) {
  .col-l-11 {
    flex-basis: 30.5555555556%;
    width: 30.5555555556%;
    max-width: 30.5555555556%;
  }
}

@media (min-width: 1024px) {
  .col-l-12 {
    flex-basis: 33.3333333333%;
    width: 33.3333333333%;
    max-width: 33.3333333333%;
  }
}

@media (min-width: 1024px) {
  .col-l-13 {
    flex-basis: 36.1111111111%;
    width: 36.1111111111%;
    max-width: 36.1111111111%;
  }
}

@media (min-width: 1024px) {
  .col-l-14 {
    flex-basis: 38.8888888889%;
    width: 38.8888888889%;
    max-width: 38.8888888889%;
  }
}

@media (min-width: 1024px) {
  .col-l-15 {
    flex-basis: 41.6666666667%;
    width: 41.6666666667%;
    max-width: 41.6666666667%;
  }
}

@media (min-width: 1024px) {
  .col-l-16 {
    flex-basis: 44.4444444444%;
    width: 44.4444444444%;
    max-width: 44.4444444444%;
  }
}

@media (min-width: 1024px) {
  .col-l-17 {
    flex-basis: 47.2222222222%;
    width: 47.2222222222%;
    max-width: 47.2222222222%;
  }
}

@media (min-width: 1024px) {
  .col-l-18 {
    flex-basis: 50%;
    width: 50%;
    max-width: 50%;
  }
}

@media (min-width: 1024px) {
  .col-l-19 {
    flex-basis: 52.7777777778%;
    width: 52.7777777778%;
    max-width: 52.7777777778%;
  }
}

@media (min-width: 1024px) {
  .col-l-20 {
    flex-basis: 55.5555555556%;
    width: 55.5555555556%;
    max-width: 55.5555555556%;
  }
}

@media (min-width: 1024px) {
  .col-l-21 {
    flex-basis: 58.3333333333%;
    width: 58.3333333333%;
    max-width: 58.3333333333%;
  }
}

@media (min-width: 1024px) {
  .col-l-22 {
    flex-basis: 61.1111111111%;
    width: 61.1111111111%;
    max-width: 61.1111111111%;
  }
}

@media (min-width: 1024px) {
  .col-l-23 {
    flex-basis: 63.8888888889%;
    width: 63.8888888889%;
    max-width: 63.8888888889%;
  }
}

@media (min-width: 1024px) {
  .col-l-24 {
    flex-basis: 66.6666666667%;
    width: 66.6666666667%;
    max-width: 66.6666666667%;
  }
}

@media (min-width: 1024px) {
  .col-l-25 {
    flex-basis: 69.4444444444%;
    width: 69.4444444444%;
    max-width: 69.4444444444%;
  }
}

@media (min-width: 1024px) {
  .col-l-26 {
    flex-basis: 72.2222222222%;
    width: 72.2222222222%;
    max-width: 72.2222222222%;
  }
}

@media (min-width: 1024px) {
  .col-l-27 {
    flex-basis: 75%;
    width: 75%;
    max-width: 75%;
  }
}

@media (min-width: 1024px) {
  .col-l-28 {
    flex-basis: 77.7777777778%;
    width: 77.7777777778%;
    max-width: 77.7777777778%;
  }
}

@media (min-width: 1024px) {
  .col-l-29 {
    flex-basis: 80.5555555556%;
    width: 80.5555555556%;
    max-width: 80.5555555556%;
  }
}

@media (min-width: 1024px) {
  .col-l-30 {
    flex-basis: 83.3333333333%;
    width: 83.3333333333%;
    max-width: 83.3333333333%;
  }
}

@media (min-width: 1024px) {
  .col-l-31 {
    flex-basis: 86.1111111111%;
    width: 86.1111111111%;
    max-width: 86.1111111111%;
  }
}

@media (min-width: 1024px) {
  .col-l-32 {
    flex-basis: 88.8888888889%;
    width: 88.8888888889%;
    max-width: 88.8888888889%;
  }
}

@media (min-width: 1024px) {
  .col-l-33 {
    flex-basis: 91.6666666667%;
    width: 91.6666666667%;
    max-width: 91.6666666667%;
  }
}

@media (min-width: 1024px) {
  .col-l-34 {
    flex-basis: 94.4444444444%;
    width: 94.4444444444%;
    max-width: 94.4444444444%;
  }
}

@media (min-width: 1024px) {
  .col-l-35 {
    flex-basis: 97.2222222222%;
    width: 97.2222222222%;
    max-width: 97.2222222222%;
  }
}

@media (min-width: 1024px) {
  .col-l-36 {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }
}

/* Don't need the full panel of classes, just have of it */
@media (min-width: 1024px) {
  .col-offset-l-0 {
    margin-left: 0%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-1 {
    margin-left: 2.7777777778%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-2 {
    margin-left: 5.5555555556%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-3 {
    margin-left: 8.3333333333%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-4 {
    margin-left: 11.1111111111%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-5 {
    margin-left: 13.8888888889%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-6 {
    margin-left: 16.6666666667%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-7 {
    margin-left: 19.4444444444%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-8 {
    margin-left: 22.2222222222%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-9 {
    margin-left: 25%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-10 {
    margin-left: 27.7777777778%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-11 {
    margin-left: 30.5555555556%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-12 {
    margin-left: 33.3333333333%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-13 {
    margin-left: 36.1111111111%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-14 {
    margin-left: 38.8888888889%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-15 {
    margin-left: 41.6666666667%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-16 {
    margin-left: 44.4444444444%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-17 {
    margin-left: 47.2222222222%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-18 {
    margin-left: 50%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-19 {
    margin-left: 52.7777777778%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-20 {
    margin-left: 55.5555555556%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-21 {
    margin-left: 58.3333333333%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-22 {
    margin-left: 61.1111111111%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-23 {
    margin-left: 63.8888888889%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-24 {
    margin-left: 66.6666666667%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-25 {
    margin-left: 69.4444444444%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-26 {
    margin-left: 72.2222222222%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-27 {
    margin-left: 75%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-28 {
    margin-left: 77.7777777778%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-29 {
    margin-left: 80.5555555556%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-30 {
    margin-left: 83.3333333333%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-31 {
    margin-left: 86.1111111111%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-32 {
    margin-left: 88.8888888889%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-33 {
    margin-left: 91.6666666667%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-34 {
    margin-left: 94.4444444444%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-35 {
    margin-left: 97.2222222222%;
  }
}

@media (min-width: 1024px) {
  .col-offset-l-36 {
    margin-left: 100%;
  }
}

/* Don't need the full panel of classes, just have of it */
@media (min-width: 1024px) {
  .col-offset-right-L-1 {
    margin-right: 2.7777777778%;
  }
}

@media (min-width: 1024px) {
  .col-offset-right-L-2 {
    margin-right: 5.5555555556%;
  }
}

@media (min-width: 1024px) {
  .col-offset-right-L-3 {
    margin-right: 8.3333333333%;
  }
}

@media (min-width: 1024px) {
  .col-offset-right-L-4 {
    margin-right: 11.1111111111%;
  }
}

@media (min-width: 1024px) {
  .col-offset-right-L-5 {
    margin-right: 13.8888888889%;
  }
}

@media (min-width: 1024px) {
  .col-offset-right-L-6 {
    margin-right: 16.6666666667%;
  }
}

@media (min-width: 1024px) {
  .col-offset-right-L-7 {
    margin-right: 19.4444444444%;
  }
}

@media (min-width: 1024px) {
  .col-offset-right-L-8 {
    margin-right: 22.2222222222%;
  }
}

@media (min-width: 1024px) {
  .col-offset-right-L-9 {
    margin-right: 25%;
  }
}

@media (min-width: 1024px) {
  .col-offset-right-L-10 {
    margin-right: 27.7777777778%;
  }
}

@media (min-width: 1024px) {
  .col-offset-right-L-11 {
    margin-right: 30.5555555556%;
  }
}

@media (min-width: 1024px) {
  .col-offset-right-L-12 {
    margin-right: 33.3333333333%;
  }
}

@media (min-width: 1024px) {
  .col-offset-right-L-13 {
    margin-right: 36.1111111111%;
  }
}

@media (min-width: 1024px) {
  .col-offset-right-L-14 {
    margin-right: 38.8888888889%;
  }
}

@media (min-width: 1024px) {
  .col-offset-right-L-15 {
    margin-right: 41.6666666667%;
  }
}

@media (min-width: 1024px) {
  .col-offset-right-L-16 {
    margin-right: 44.4444444444%;
  }
}

@media (min-width: 1024px) {
  .col-offset-right-L-17 {
    margin-right: 47.2222222222%;
  }
}

@media (min-width: 1024px) {
  .col-offset-right-L-18 {
    margin-right: 50%;
  }
}

@media (min-width: 1440px) {
  .col-xl-1 {
    flex-basis: 2.7777777778%;
    width: 2.7777777778%;
    max-width: 2.7777777778%;
  }
}

@media (min-width: 1440px) {
  .col-xl-2 {
    flex-basis: 5.5555555556%;
    width: 5.5555555556%;
    max-width: 5.5555555556%;
  }
}

@media (min-width: 1440px) {
  .col-xl-3 {
    flex-basis: 8.3333333333%;
    width: 8.3333333333%;
    max-width: 8.3333333333%;
  }
}

@media (min-width: 1440px) {
  .col-xl-4 {
    flex-basis: 11.1111111111%;
    width: 11.1111111111%;
    max-width: 11.1111111111%;
  }
}

@media (min-width: 1440px) {
  .col-xl-5 {
    flex-basis: 13.8888888889%;
    width: 13.8888888889%;
    max-width: 13.8888888889%;
  }
}

@media (min-width: 1440px) {
  .col-xl-6 {
    flex-basis: 16.6666666667%;
    width: 16.6666666667%;
    max-width: 16.6666666667%;
  }
}

@media (min-width: 1440px) {
  .col-xl-7 {
    flex-basis: 19.4444444444%;
    width: 19.4444444444%;
    max-width: 19.4444444444%;
  }
}

@media (min-width: 1440px) {
  .col-xl-8 {
    flex-basis: 22.2222222222%;
    width: 22.2222222222%;
    max-width: 22.2222222222%;
  }
}

@media (min-width: 1440px) {
  .col-xl-9 {
    flex-basis: 25%;
    width: 25%;
    max-width: 25%;
  }
}

@media (min-width: 1440px) {
  .col-xl-10 {
    flex-basis: 27.7777777778%;
    width: 27.7777777778%;
    max-width: 27.7777777778%;
  }
}

@media (min-width: 1440px) {
  .col-xl-11 {
    flex-basis: 30.5555555556%;
    width: 30.5555555556%;
    max-width: 30.5555555556%;
  }
}

@media (min-width: 1440px) {
  .col-xl-12 {
    flex-basis: 33.3333333333%;
    width: 33.3333333333%;
    max-width: 33.3333333333%;
  }
}

@media (min-width: 1440px) {
  .col-xl-13 {
    flex-basis: 36.1111111111%;
    width: 36.1111111111%;
    max-width: 36.1111111111%;
  }
}

@media (min-width: 1440px) {
  .col-xl-14 {
    flex-basis: 38.8888888889%;
    width: 38.8888888889%;
    max-width: 38.8888888889%;
  }
}

@media (min-width: 1440px) {
  .col-xl-15 {
    flex-basis: 41.6666666667%;
    width: 41.6666666667%;
    max-width: 41.6666666667%;
  }
}

@media (min-width: 1440px) {
  .col-xl-16 {
    flex-basis: 44.4444444444%;
    width: 44.4444444444%;
    max-width: 44.4444444444%;
  }
}

@media (min-width: 1440px) {
  .col-xl-17 {
    flex-basis: 47.2222222222%;
    width: 47.2222222222%;
    max-width: 47.2222222222%;
  }
}

@media (min-width: 1440px) {
  .col-xl-18 {
    flex-basis: 50%;
    width: 50%;
    max-width: 50%;
  }
}

@media (min-width: 1440px) {
  .col-xl-19 {
    flex-basis: 52.7777777778%;
    width: 52.7777777778%;
    max-width: 52.7777777778%;
  }
}

@media (min-width: 1440px) {
  .col-xl-20 {
    flex-basis: 55.5555555556%;
    width: 55.5555555556%;
    max-width: 55.5555555556%;
  }
}

@media (min-width: 1440px) {
  .col-xl-21 {
    flex-basis: 58.3333333333%;
    width: 58.3333333333%;
    max-width: 58.3333333333%;
  }
}

@media (min-width: 1440px) {
  .col-xl-22 {
    flex-basis: 61.1111111111%;
    width: 61.1111111111%;
    max-width: 61.1111111111%;
  }
}

@media (min-width: 1440px) {
  .col-xl-23 {
    flex-basis: 63.8888888889%;
    width: 63.8888888889%;
    max-width: 63.8888888889%;
  }
}

@media (min-width: 1440px) {
  .col-xl-24 {
    flex-basis: 66.6666666667%;
    width: 66.6666666667%;
    max-width: 66.6666666667%;
  }
}

@media (min-width: 1440px) {
  .col-xl-25 {
    flex-basis: 69.4444444444%;
    width: 69.4444444444%;
    max-width: 69.4444444444%;
  }
}

@media (min-width: 1440px) {
  .col-xl-26 {
    flex-basis: 72.2222222222%;
    width: 72.2222222222%;
    max-width: 72.2222222222%;
  }
}

@media (min-width: 1440px) {
  .col-xl-27 {
    flex-basis: 75%;
    width: 75%;
    max-width: 75%;
  }
}

@media (min-width: 1440px) {
  .col-xl-28 {
    flex-basis: 77.7777777778%;
    width: 77.7777777778%;
    max-width: 77.7777777778%;
  }
}

@media (min-width: 1440px) {
  .col-xl-29 {
    flex-basis: 80.5555555556%;
    width: 80.5555555556%;
    max-width: 80.5555555556%;
  }
}

@media (min-width: 1440px) {
  .col-xl-30 {
    flex-basis: 83.3333333333%;
    width: 83.3333333333%;
    max-width: 83.3333333333%;
  }
}

@media (min-width: 1440px) {
  .col-xl-31 {
    flex-basis: 86.1111111111%;
    width: 86.1111111111%;
    max-width: 86.1111111111%;
  }
}

@media (min-width: 1440px) {
  .col-xl-32 {
    flex-basis: 88.8888888889%;
    width: 88.8888888889%;
    max-width: 88.8888888889%;
  }
}

@media (min-width: 1440px) {
  .col-xl-33 {
    flex-basis: 91.6666666667%;
    width: 91.6666666667%;
    max-width: 91.6666666667%;
  }
}

@media (min-width: 1440px) {
  .col-xl-34 {
    flex-basis: 94.4444444444%;
    width: 94.4444444444%;
    max-width: 94.4444444444%;
  }
}

@media (min-width: 1440px) {
  .col-xl-35 {
    flex-basis: 97.2222222222%;
    width: 97.2222222222%;
    max-width: 97.2222222222%;
  }
}

@media (min-width: 1440px) {
  .col-xl-36 {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }
}

/* Don't need the full panel of classes, just have of it */
@media (min-width: 1440px) {
  .col-offset-xl-0 {
    margin-left: 0%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-1 {
    margin-left: 2.7777777778%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-2 {
    margin-left: 5.5555555556%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-3 {
    margin-left: 8.3333333333%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-4 {
    margin-left: 11.1111111111%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-5 {
    margin-left: 13.8888888889%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-6 {
    margin-left: 16.6666666667%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-7 {
    margin-left: 19.4444444444%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-8 {
    margin-left: 22.2222222222%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-9 {
    margin-left: 25%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-10 {
    margin-left: 27.7777777778%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-11 {
    margin-left: 30.5555555556%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-12 {
    margin-left: 33.3333333333%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-13 {
    margin-left: 36.1111111111%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-14 {
    margin-left: 38.8888888889%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-15 {
    margin-left: 41.6666666667%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-16 {
    margin-left: 44.4444444444%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-17 {
    margin-left: 47.2222222222%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-18 {
    margin-left: 50%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-19 {
    margin-left: 52.7777777778%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-20 {
    margin-left: 55.5555555556%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-21 {
    margin-left: 58.3333333333%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-22 {
    margin-left: 61.1111111111%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-23 {
    margin-left: 63.8888888889%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-24 {
    margin-left: 66.6666666667%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-25 {
    margin-left: 69.4444444444%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-26 {
    margin-left: 72.2222222222%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-27 {
    margin-left: 75%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-28 {
    margin-left: 77.7777777778%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-29 {
    margin-left: 80.5555555556%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-30 {
    margin-left: 83.3333333333%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-31 {
    margin-left: 86.1111111111%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-32 {
    margin-left: 88.8888888889%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-33 {
    margin-left: 91.6666666667%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-34 {
    margin-left: 94.4444444444%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-35 {
    margin-left: 97.2222222222%;
  }
}

@media (min-width: 1440px) {
  .col-offset-xl-36 {
    margin-left: 100%;
  }
}

/* Don't need the full panel of classes, just have of it */
@media (min-width: 1440px) {
  .col-offset-right-XL-1 {
    margin-right: 2.7777777778%;
  }
}

@media (min-width: 1440px) {
  .col-offset-right-XL-2 {
    margin-right: 5.5555555556%;
  }
}

@media (min-width: 1440px) {
  .col-offset-right-XL-3 {
    margin-right: 8.3333333333%;
  }
}

@media (min-width: 1440px) {
  .col-offset-right-XL-4 {
    margin-right: 11.1111111111%;
  }
}

@media (min-width: 1440px) {
  .col-offset-right-XL-5 {
    margin-right: 13.8888888889%;
  }
}

@media (min-width: 1440px) {
  .col-offset-right-XL-6 {
    margin-right: 16.6666666667%;
  }
}

@media (min-width: 1440px) {
  .col-offset-right-XL-7 {
    margin-right: 19.4444444444%;
  }
}

@media (min-width: 1440px) {
  .col-offset-right-XL-8 {
    margin-right: 22.2222222222%;
  }
}

@media (min-width: 1440px) {
  .col-offset-right-XL-9 {
    margin-right: 25%;
  }
}

@media (min-width: 1440px) {
  .col-offset-right-XL-10 {
    margin-right: 27.7777777778%;
  }
}

@media (min-width: 1440px) {
  .col-offset-right-XL-11 {
    margin-right: 30.5555555556%;
  }
}

@media (min-width: 1440px) {
  .col-offset-right-XL-12 {
    margin-right: 33.3333333333%;
  }
}

@media (min-width: 1440px) {
  .col-offset-right-XL-13 {
    margin-right: 36.1111111111%;
  }
}

@media (min-width: 1440px) {
  .col-offset-right-XL-14 {
    margin-right: 38.8888888889%;
  }
}

@media (min-width: 1440px) {
  .col-offset-right-XL-15 {
    margin-right: 41.6666666667%;
  }
}

@media (min-width: 1440px) {
  .col-offset-right-XL-16 {
    margin-right: 44.4444444444%;
  }
}

@media (min-width: 1440px) {
  .col-offset-right-XL-17 {
    margin-right: 47.2222222222%;
  }
}

@media (min-width: 1440px) {
  .col-offset-right-XL-18 {
    margin-right: 50%;
  }
}

/* shortcuts */
.grid-col-center {
  justify-content: center;
  align-items: center;
}