@charset "UTF-8";
/*WebEngine*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400;500;600&display=swap");
.white {
  color: white;
}

.white-bg {
  background-color: white;
}

.white-border {
  border-color: white;
}

.black {
  color: black;
}

.black-bg {
  background-color: black;
}

.black-border {
  border-color: black;
}

.offwhite1 {
  color: #fcfcfc;
}

.offwhite1-bg {
  background-color: #fcfcfc;
}

.offwhite1-border {
  border-color: #fcfcfc;
}

.offwhite2 {
  color: #fafafa;
}

.offwhite2-bg {
  background-color: #fafafa;
}

.offwhite2-border {
  border-color: #fafafa;
}

.offwhite3 {
  color: #f7f7f7;
}

.offwhite3-bg {
  background-color: #f7f7f7;
}

.offwhite3-border {
  border-color: #f7f7f7;
}

.offwhite4 {
  color: #f5f5f5;
}

.offwhite4-bg {
  background-color: #f5f5f5;
}

.offwhite4-border {
  border-color: #f5f5f5;
}

.offwhite5 {
  color: #f0f0f0;
}

.offwhite5-bg {
  background-color: #f0f0f0;
}

.offwhite5-border {
  border-color: #f0f0f0;
}

.offwhite6 {
  color: #ededed;
}

.offwhite6-bg {
  background-color: #ededed;
}

.offwhite6-border {
  border-color: #ededed;
}

.offwhite7 {
  color: #ebebeb;
}

.offwhite7-bg {
  background-color: #ebebeb;
}

.offwhite7-border {
  border-color: #ebebeb;
}

.offwhite8 {
  color: #e8e8e8;
}

.offwhite8-bg {
  background-color: #e8e8e8;
}

.offwhite8-border {
  border-color: #e8e8e8;
}

.gray1 {
  color: #e5e5e5;
}

.gray1-bg {
  background-color: #e5e5e5;
}

.gray1-border {
  border-color: #e5e5e5;
}

.gray2 {
  color: #d9d9d9;
}

.gray2-bg {
  background-color: #d9d9d9;
}

.gray2-border {
  border-color: #d9d9d9;
}

.gray3 {
  color: #cccccc;
}

.gray3-bg {
  background-color: #cccccc;
}

.gray3-border {
  border-color: #cccccc;
}

.gray4 {
  color: #bfbfbf;
}

.gray4-bg {
  background-color: #bfbfbf;
}

.gray4-border {
  border-color: #bfbfbf;
}

.gray5 {
  color: #b3b3b3;
}

.gray5-bg {
  background-color: #b3b3b3;
}

.gray5-border {
  border-color: #b3b3b3;
}

.gray6 {
  color: #a6a6a6;
}

.gray6-bg {
  background-color: #a6a6a6;
}

.gray6-border {
  border-color: #a6a6a6;
}

.gray7 {
  color: #999999;
}

.gray7-bg {
  background-color: #999999;
}

.gray7-border {
  border-color: #999999;
}

.gray8 {
  color: #8c8c8c;
}

.gray8-bg {
  background-color: #8c8c8c;
}

.gray8-border {
  border-color: #8c8c8c;
}

.gray9 {
  color: #808080;
}

.gray9-bg {
  background-color: #808080;
}

.gray9-border {
  border-color: #808080;
}

.gray10 {
  color: #737373;
}

.gray10-bg {
  background-color: #737373;
}

.gray10-border {
  border-color: #737373;
}

.gray11 {
  color: #666666;
}

.gray11-bg {
  background-color: #666666;
}

.gray11-border {
  border-color: #666666;
}

.gray12 {
  color: #595959;
}

.gray12-bg {
  background-color: #595959;
}

.gray12-border {
  border-color: #595959;
}

.gray13 {
  color: #4d4d4d;
}

.gray13-bg {
  background-color: #4d4d4d;
}

.gray13-border {
  border-color: #4d4d4d;
}

.gray14 {
  color: #404040;
}

.gray14-bg {
  background-color: #404040;
}

.gray14-border {
  border-color: #404040;
}

.gray15 {
  color: #333333;
}

.gray15-bg {
  background-color: #333333;
}

.gray15-border {
  border-color: #333333;
}

.gray16 {
  color: #262626;
}

.gray16-bg {
  background-color: #262626;
}

.gray16-border {
  border-color: #262626;
}

.gray17 {
  color: #1a1a1a;
}

.gray17-bg {
  background-color: #1a1a1a;
}

.gray17-border {
  border-color: #1a1a1a;
}

.gray18 {
  color: #0f0f0f;
}

.gray18-bg {
  background-color: #0f0f0f;
}

.gray18-border {
  border-color: #0f0f0f;
}

.gray19 {
  color: #0f0f0f;
}

.gray19-bg {
  background-color: #0f0f0f;
}

.gray19-border {
  border-color: #0f0f0f;
}

.gray20 {
  color: #080808;
}

.gray20-bg {
  background-color: #080808;
}

.gray20-border {
  border-color: #080808;
}

.offwhite {
  color: #f5f5f5;
}

.offwhite-bg {
  background-color: #f5f5f5;
}

.offwhite-border {
  border-color: #f5f5f5;
}

.gray-lighter {
  color: #cccccc;
}

.gray-lighter-bg {
  background-color: #cccccc;
}

.gray-lighter-border {
  border-color: #cccccc;
}

.gray-light {
  color: #a6a6a6;
}

.gray-light-bg {
  background-color: #a6a6a6;
}

.gray-light-border {
  border-color: #a6a6a6;
}

.gray {
  color: #808080;
}

.gray-bg {
  background-color: #808080;
}

.gray-border {
  border-color: #808080;
}

.gray-dark {
  color: #595959;
}

.gray-dark-bg {
  background-color: #595959;
}

.gray-dark-border {
  border-color: #595959;
}

.gray-darker {
  color: #333333;
}

.gray-darker-bg {
  background-color: #333333;
}

.gray-darker-border {
  border-color: #333333;
}

.brand-yellow {
  color: yellow;
}

.brand-yellow-bg {
  background-color: yellow;
}

.brand-yellow-border {
  border-color: yellow;
}

.brand-lightyellow {
  color: yellow;
}

.brand-lightyellow-bg {
  background-color: yellow;
}

.brand-lightyellow-border {
  border-color: yellow;
}

.brand-darkyellow {
  color: yellow;
}

.brand-darkyellow-bg {
  background-color: yellow;
}

.brand-darkyellow-border {
  border-color: yellow;
}

.brand-green {
  color: green;
}

.brand-green-bg {
  background-color: green;
}

.brand-green-border {
  border-color: green;
}

.brand-lightgreen {
  color: green;
}

.brand-lightgreen-bg {
  background-color: green;
}

.brand-lightgreen-border {
  border-color: green;
}

.brand-darkgreen {
  color: green;
}

.brand-darkgreen-bg {
  background-color: green;
}

.brand-darkgreen-border {
  border-color: green;
}

.brand-blue {
  color: #276BAB;
}

.brand-blue-bg {
  background-color: #276BAB;
}

.brand-blue-border {
  border-color: #276BAB;
}

.brand-lightblue {
  color: #276BAB;
}

.brand-lightblue-bg {
  background-color: #276BAB;
}

.brand-lightblue-border {
  border-color: #276BAB;
}

.brand-darkblue {
  color: #276BAB;
}

.brand-darkblue-bg {
  background-color: #276BAB;
}

.brand-darkblue-border {
  border-color: #276BAB;
}

.brand-purple {
  color: purple;
}

.brand-purple-bg {
  background-color: purple;
}

.brand-purple-border {
  border-color: purple;
}

.brand-lightpurple {
  color: purple;
}

.brand-lightpurple-bg {
  background-color: purple;
}

.brand-lightpurple-border {
  border-color: purple;
}

.brand-darkpurple {
  color: purple;
}

.brand-darkpurple-bg {
  background-color: purple;
}

.brand-darkpurple-border {
  border-color: purple;
}

.brand-red {
  color: #a50000;
}

.brand-red-bg {
  background-color: #a50000;
}

.brand-red-border {
  border-color: #a50000;
}

.brand-lightred {
  color: #a50000;
}

.brand-lightred-bg {
  background-color: #a50000;
}

.brand-lightred-border {
  border-color: #a50000;
}

.brand-darkred {
  color: #a50000;
}

.brand-darkred-bg {
  background-color: #a50000;
}

.brand-darkred-border {
  border-color: #a50000;
}

.brand-orange {
  color: #ff8800;
}

.brand-orange-bg {
  background-color: #ff8800;
}

.brand-orange-border {
  border-color: #ff8800;
}

.brand-lightorange {
  color: #ff8800;
}

.brand-lightorange-bg {
  background-color: #ff8800;
}

.brand-lightorange-border {
  border-color: #ff8800;
}

.brand-darkorange {
  color: #ff8800;
}

.brand-darkorange-bg {
  background-color: #ff8800;
}

.brand-darkorange-border {
  border-color: #ff8800;
}

.brand-brown {
  color: brown;
}

.brand-brown-bg {
  background-color: brown;
}

.brand-brown-border {
  border-color: brown;
}

.brand-lightbrown {
  color: brown;
}

.brand-lightbrown-bg {
  background-color: brown;
}

.brand-lightbrown-border {
  border-color: brown;
}

.brand-darkbrown {
  color: brown;
}

.brand-darkbrown-bg {
  background-color: brown;
}

.brand-darkbrown-border {
  border-color: brown;
}

.brand-black {
  color: black;
}

.brand-black-bg {
  background-color: black;
}

.brand-black-border {
  border-color: black;
}

.brand-lightblack {
  color: black;
}

.brand-lightblack-bg {
  background-color: black;
}

.brand-lightblack-border {
  border-color: black;
}

.brand-darkblack {
  color: black;
}

.brand-darkblack-bg {
  background-color: black;
}

.brand-darkblack-border {
  border-color: black;
}

.brand-gray {
  color: gray;
}

.brand-gray-bg {
  background-color: gray;
}

.brand-gray-border {
  border-color: gray;
}

.brand-lightgray {
  color: gray;
}

.brand-lightgray-bg {
  background-color: gray;
}

.brand-lightgray-border {
  border-color: gray;
}

.brand-darkgray {
  color: gray;
}

.brand-darkgray-bg {
  background-color: gray;
}

.brand-darkgray-border {
  border-color: gray;
}

.brand-white {
  color: white;
}

.brand-white-bg {
  background-color: white;
}

.brand-white-border {
  border-color: white;
}

.brand-lightwhite {
  color: white;
}

.brand-lightwhite-bg {
  background-color: white;
}

.brand-lightwhite-border {
  border-color: white;
}

.brand-darkwhite {
  color: white;
}

.brand-darkwhite-bg {
  background-color: white;
}

.brand-darkwhite-border {
  border-color: white;
}

.primary {
  color: #ff8800;
}

.primary-bg {
  background-color: #ff8800;
}

.primary-border {
  border-color: #ff8800;
}

.secondary {
  color: #276BAB;
}

.secondary-bg {
  background-color: #276BAB;
}

.secondary-border {
  border-color: #276BAB;
}

.tertiary {
  color: #276BAB;
}

.tertiary-bg {
  background-color: #276BAB;
}

.tertiary-border {
  border-color: #276BAB;
}

.accent1 {
  color: #ff8800;
}

.accent1-bg {
  background-color: #ff8800;
}

.accent1-border {
  border-color: #ff8800;
}

.accent2 {
  color: #ff8800;
}

.accent2-bg {
  background-color: #ff8800;
}

.accent2-border {
  border-color: #ff8800;
}

.accent3 {
  color: #276BAB;
}

.accent3-bg {
  background-color: #276BAB;
}

.accent3-border {
  border-color: #276BAB;
}

.accent4 {
  color: #276BAB;
}

.accent4-bg {
  background-color: #276BAB;
}

.accent4-border {
  border-color: #276BAB;
}

.success {
  color: green;
}

.success-bg {
  background-color: green;
}

.success-border {
  border-color: green;
}

.success-light {
  color: green;
}

.success-light-bg {
  background-color: green;
}

.success-light-border {
  border-color: green;
}

.success-dark {
  color: green;
}

.success-dark-bg {
  background-color: green;
}

.success-dark-border {
  border-color: green;
}

.warning {
  color: yellow;
}

.warning-bg {
  background-color: yellow;
}

.warning-border {
  border-color: yellow;
}

.warning-light {
  color: yellow;
}

.warning-light-bg {
  background-color: yellow;
}

.warning-light-border {
  border-color: yellow;
}

.warning-dark {
  color: yellow;
}

.warning-dark-bg {
  background-color: yellow;
}

.warning-dark-border {
  border-color: yellow;
}

.error {
  color: #a50000;
}

.error-bg {
  background-color: #a50000;
}

.error-border {
  border-color: #a50000;
}

.error-light {
  color: #a50000;
}

.error-light-bg {
  background-color: #a50000;
}

.error-light-border {
  border-color: #a50000;
}

.error-dark {
  color: #a50000;
}

.error-dark-bg {
  background-color: #a50000;
}

.error-dark-border {
  border-color: #a50000;
}

.disabled {
  color: gray;
}

.disabled-bg {
  background-color: gray;
}

.disabled-border {
  border-color: gray;
}

.disabled-light {
  color: gray;
}

.disabled-light-bg {
  background-color: gray;
}

.disabled-light-border {
  border-color: gray;
}

.disabled-dark {
  color: gray;
}

.disabled-dark-bg {
  background-color: gray;
}

.disabled-dark-border {
  border-color: gray;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-size: 1rem;
  line-height: 1.4rem;
  font-weight: normal;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -ms-text-size-adjust: none;
  -webkit-text-size-adjust: 100%;
}

main {
  display: block;
}

hr {
  height: 0;
  width: 100%;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  overflow: visible;
  border-width: 0;
  border-top: 4px solid black;
  margin: 8px 0;
}

p {
  margin-bottom: 24px;
}

ul > li > a {
  color: inherit;
}

a {
  background-color: transparent;
  text-decoration: none;
}

a:active,
a:hover {
  outline: 0;
}

a[href^=tel] {
  color: inherit;
}

abbr {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b {
  font-weight: bold;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 0.8em;
}

span {
  font-family: inherit;
}

strong {
  font-weight: bold;
}

sub,
sup {
  font-size: 0.8em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  border: none;
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

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

td {
  padding: 0;
}

th {
  padding: 0;
}

button {
  border: 0;
  cursor: pointer;
}

fieldset {
  padding: 20px;
}

html, body,
header, footer, nav, section, aside, main, article, span, div {
  font-family: "Noto Sans JP", sans-serif;
}

h1, .h1-xxl, .h1-xl, .h1-lg, .h1-md, .h1-sm, .h1-xs, h2, .h2-xxl, .h2-xl, .h2-lg, .h2-md, .h2-sm, .h2-xs, h3, .h3-xxl, .h3-xl, .h3-lg, .h3-md, .h3-sm, .h3-xs, h4, .h4-xxl, .h4-xl, .h4-lg, .h4-md, .h4-sm, .h4-xs, h5, .h5-xxl, .h5-xl, .h5-lg, .h5-md, .h5-sm, .h5-xs, h6, .h6-xxl, .h6-xl, .h6-lg, .h6-md, .h6-sm, .h6-xs {
  font-family: "Noto Sans JP", sans-serif;
}

p, a, blockquote,
ul, ol, li, dl, dt, dd,
caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr,
form, button, label {
  font-family: inherit;
}

code, pre, kbd, samp, var, fieldset {
  font-family: "Inconsolata", monospace;
}

.border-line {
  border: 4px solid black;
}

.border-thin {
  border: 8px solid black;
}

.border-thick {
  border: 20px solid black;
}

.border-dblthick {
  border: 24px solid black;
}

.border-bar {
  border: 32px solid black;
}

.border-dblbar {
  border: 36px solid black;
}

.borderH-line {
  border-left: 4px solid black;
  border-right: 4px solid black;
}

.borderH-thin {
  border-left: 8px solid black;
  border-right: 8px solid black;
}

.borderH-thick {
  border-left: 20px solid black;
  border-right: 20px solid black;
}

.borderH-dblthick {
  border-left: 24px solid black;
  border-right: 24px solid black;
}

.borderH-bar {
  border-left: 32px solid black;
  border-right: 32px solid black;
}

.borderH-dblbar {
  border-left: 36px solid black;
  border-right: 36px solid black;
}

.borderV-line {
  border-top: 4px solid black;
  border-bottom: 4px solid black;
}

.borderV-thin {
  border-top: 8px solid black;
  border-bottom: 8px solid black;
}

.borderV-thick {
  border-top: 20px solid black;
  border-bottom: 20px solid black;
}

.borderV-dblthick {
  border-top: 24px solid black;
  border-bottom: 24px solid black;
}

.borderV-bar {
  border-top: 32px solid black;
  border-bottom: 32px solid black;
}

.borderV-dblbar {
  border-top: 36px solid black;
  border-bottom: 36px solid black;
}

.borderT-line {
  border-top: 4px solid black;
}

.borderT-thin {
  border-top: 8px solid black;
}

.borderT-thick {
  border-top: 20px solid black;
}

.borderT-dblthick {
  border-top: 24px solid black;
}

.borderT-bar {
  border-top: 32px solid black;
}

.borderT-dblbar {
  border-top: 36px solid black;
}

.borderR-line {
  border-right: 4px solid black;
}

.borderR-thin {
  border-right: 8px solid black;
}

.borderR-thick {
  border-right: 20px solid black;
}

.borderR-dblthick {
  border-right: 24px solid black;
}

.borderR-bar {
  border-right: 32px solid black;
}

.borderR-dblbar {
  border-right: 36px solid black;
}

.borderB-line {
  border-bottom: 4px solid black;
}

.borderB-thin {
  border-bottom: 8px solid black;
}

.borderB-thick {
  border-bottom: 20px solid black;
}

.borderB-dblthick {
  border-bottom: 24px solid black;
}

.borderB-bar {
  border-bottom: 32px solid black;
}

.borderB-dblbar {
  border-bottom: 36px solid black;
}

.borderL-line {
  border-left: 4px solid black;
}

.borderL-thin {
  border-left: 8px solid black;
}

.borderL-thick {
  border-left: 20px solid black;
}

.borderL-dblthick {
  border-left: 24px solid black;
}

.borderL-bar {
  border-left: 32px solid black;
}

.borderL-dblbar {
  border-left: 36px solid black;
}

@media screen and (min-width: 320px) {
  .hlist li {
    display: list-item;
    list-style: disc;
    margin-left: 32px;
  }
}
@media screen and (min-width: 480px) {
  .hlist {
    margin-left: 24px;
  }
  .hlist li {
    display: inline list-item;
    list-style: disc;
  }
}

@media screen and (min-width: 320px) {
  .hlist-nobullets li {
    display: block;
    list-style: none;
  }
}
@media screen and (min-width: 480px) {
  .hlist-nobullets li {
    display: inline;
    list-style: none;
  }
}

.hlist-xs > * {
  margin-right: 12px;
}
.hlist-xs > *:last-child {
  margin-right: 0;
}

.hlist-sm > * {
  margin-right: 20px;
}
.hlist-sm > *:last-child {
  margin-right: 0;
}

.hlist-md > * {
  margin-right: 36px;
}
.hlist-md > *:last-child {
  margin-right: 0;
}

.hlist-lg > * {
  margin-right: 52px;
}
.hlist-lg > *:last-child {
  margin-right: 0;
}

.hlist-xl > * {
  margin-right: 68px;
}
.hlist-xl > *:last-child {
  margin-right: 0;
}

@media screen and (min-width: 320px) {
  .vlist li {
    display: list-item;
    list-style: disc;
    margin-left: 32px;
  }
}

@media screen and (min-width: 320px) {
  .vlist-nobullets li {
    display: block;
    list-style: none;
  }
}

.vlist-xs > * {
  margin-bottom: 4px;
}
.vlist-xs > *:last-child {
  margin-bottom: 0;
}

.vlist-sm > * {
  margin-bottom: 20px;
}
.vlist-sm > *:last-child {
  margin-bottom: 0;
}

.vlist-md > * {
  margin-bottom: 36px;
}
.vlist-md > *:last-child {
  margin-bottom: 0;
}

.vlist-lg > * {
  margin-bottom: 52px;
}
.vlist-lg > *:last-child {
  margin-bottom: 0;
}

.vlist-xl > * {
  margin-bottom: 68px;
}
.vlist-xl > *:last-child {
  margin-bottom: 0;
}

.--nobullets {
  list-style: none;
}

.-disc > li {
  list-style: disc;
}

.-square > li {
  list-style: square;
}

.--disc {
  list-style: disc;
}

.--square {
  list-style: square;
}

.line {
  border-bottom: 4px solid black;
}

.thin {
  border-bottom: 8px solid black;
}

.thick {
  border-bottom: 20px solid black;
}

.dblthick {
  border-bottom: 24px solid black;
}

.bar {
  border-bottom: 32px solid black;
}

.dblbar {
  border-bottom: 36px solid black;
}

.vr {
  display: flex;
  overflow: hidden;
}
.vr hr {
  transform: rotate(90deg);
}

.p0 {
  margin-bottom: 0;
}

.p-xs {
  margin-bottom: 4px;
}

.p-sm {
  margin-bottom: 20px;
}

.p-md {
  margin-bottom: 36px;
}

.p-lg {
  margin-bottom: 52px;
}

.p-xl {
  margin-bottom: 68px;
}

.p_sm--dual {
  margin: 20px 0;
}

.p_md--dual {
  margin: 36px 0;
}

.p_lg--dual {
  margin: 52px 0;
}

.p_xl--dual {
  margin: 68px 0;
}

.child-paragraph-sm p:nth(1) {
  margin-bottom: 20px;
}
.child-paragraph-sm p:last-child {
  margin-bottom: 20px;
}

.child-paragraph-md p:nth(1) {
  margin-bottom: 36px;
}
.child-paragraph-md p:last-child {
  margin-bottom: 20px;
}

.child-paragraph-lg p:nth(1) {
  margin-bottom: 52px;
}
.child-paragraph-lg p:last-child {
  margin-bottom: 20px;
}

.text-overline {
  text-decoration: overline;
}

.text-strikethrough {
  text-decoration: line-through;
}

.text-underline {
  text-decoration: underline;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-italic {
  font-style: italic;
}

.mark-green {
  background-color: green;
}

.mark-orange {
  background-color: #ff8800;
}

.mark-red {
  background-color: #a50000;
  color: white;
}

.mark-blue {
  background-color: #276BAB;
  color: white;
}

.redstrike {
  -webkit-text-decoration-color: #a50000;
          text-decoration-color: #a50000;
}

.redline {
  -webkit-text-decoration-color: #a50000;
          text-decoration-color: #a50000;
}

.blueline {
  -webkit-text-decoration-color: #276BAB;
          text-decoration-color: #276BAB;
}

.orangeline {
  -webkit-text-decoration-color: #ff8800;
          text-decoration-color: #ff8800;
}

.btn-brand-w {
  background-color: #ff8800;
  padding: 20px;
  color: white;
}
.btn-brand-w:hover {
  text-decoration: underline;
  color: white;
}

.btn-brand-b {
  background-color: #ff8800;
  padding: 20px;
  color: black;
}
.btn-brand-b:hover {
  text-decoration: underline;
  color: black;
}

.btn_pw {
  background-color: #ff8800;
  color: white;
  padding: 20px;
  border-radius: 4px;
}

.btn_pb {
  background-color: #ff8800;
  color: black;
  padding: 20px;
  border-radius: 4px;
}

.btn_wb {
  background-color: white;
  color: black;
  padding: 20px;
  border-radius: 4px;
}

.btn_wp {
  background-color: white;
  color: #ff8800;
  padding: 20px;
  border-radius: 4px;
}

.btn_bw {
  background-color: black;
  color: white;
  padding: 20px;
  border-radius: 4px;
}

.btn_bp {
  background-color: black;
  color: #ff8800;
  padding: 20px;
  border-radius: 4px;
}

.bgcolor-bw {
  background: black;
  color: white;
}

.bgcolor-wb {
  background: white;
  color: black;
}

.bgcolor-pw {
  background: #ff8800;
  color: white;
}

.bgcolor-pb {
  background: #ff8800;
  color: black;
}

.bgcolor-wp {
  background: white;
  color: #ff8800;
}

.bgcolor-bp {
  background: black;
  color: #ff8800;
}

.bgcolor-sw {
  background: #276BAB;
  color: white;
}

.bgcolor-sb {
  background: #276BAB;
  color: black;
}

.bgcolor-ws {
  background: white;
  color: #276BAB;
}

.bgcolor-bs {
  background: black;
  color: #276BAB;
}

.bgcolor-tw {
  background: #276BAB;
  color: white;
}

.bgcolor-tb {
  background: #276BAB;
  color: black;
}

.bgcolor-wt {
  background: white;
  color: #276BAB;
}

.bgcolor-bt {
  background: black;
  color: #276BAB;
}

.fa--ll, .floatAlign--ll {
  float: left;
  text-align: left;
}

.fa--lr, .floatAlign--lr {
  float: left;
  text-align: right;
}

.fa--lc, .floatAlign--lc {
  float: left;
  text-align: center;
}

.fa--lj, .floatAlign--lj {
  float: left;
  text-align: justify;
}

.fa--rl, .floatAlign--rl {
  float: right;
  text-align: left;
}

.fa--rr, .floatAlign--rr {
  float: right;
  text-align: right;
}

.fa--rc, .floatAlign--rc {
  float: right;
  text-align: center;
}

.fa--rj, .floatAlign--rj {
  float: right;
  text-align: justify;
}

[data-container], [data-row], .container, .row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}

[data-container~=full], [data-row~=full], .container-full, .row-full {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}

[data-container~=wide], [data-row~=wide], .container-wide, .row-wide {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 90%;
}

[data-container~=narrow], [data-row~=narrow], .container-narrow, .row-narrow {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 80%;
}

[data-container~=slim], [data-row~=slim], .container-slim, .row-slim {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 70%;
}

[data-container~=thin], [data-row~=thin], .container-thin, .row-thin {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 60%;
}

[data-container~=half], [data-row~=half], .container-half, .row-half {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 50%;
}

[data-container~=sm-full], [data-row~=sm-full], .container-sm-full, .row-sm-full {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 480px) {
  [data-container~=sm-full], [data-row~=sm-full], .container-sm-full, .row-sm-full {
    max-width: 100%;
  }
}

[data-container~=sm-wide], [data-row~=sm-wide], .container-sm-wide, .row-sm-wide {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 480px) {
  [data-container~=sm-wide], [data-row~=sm-wide], .container-sm-wide, .row-sm-wide {
    max-width: 90%;
  }
}

[data-container~=sm-narrow], [data-row~=sm-narrow], .container-sm-narrow, .row-sm-narrow {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 480px) {
  [data-container~=sm-narrow], [data-row~=sm-narrow], .container-sm-narrow, .row-sm-narrow {
    max-width: 80%;
  }
}

[data-container~=sm-slim], [data-row~=sm-slim], .container-sm-slim, .row-sm-slim {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 480px) {
  [data-container~=sm-slim], [data-row~=sm-slim], .container-sm-slim, .row-sm-slim {
    max-width: 70%;
  }
}

[data-container~=sm-thin], [data-row~=sm-thin], .container-sm-thin, .row-sm-thin {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 480px) {
  [data-container~=sm-thin], [data-row~=sm-thin], .container-sm-thin, .row-sm-thin {
    max-width: 60%;
  }
}

[data-container~=sm-half], [data-row~=sm-half], .container-sm-half, .row-sm-half {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 480px) {
  [data-container~=sm-half], [data-row~=sm-half], .container-sm-half, .row-sm-half {
    max-width: 50%;
  }
}

[data-container~=md-full], [data-row~=md-full], .container-md-full, .row-md-full {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 720px) {
  [data-container~=md-full], [data-row~=md-full], .container-md-full, .row-md-full {
    max-width: 100%;
  }
}

[data-container~=md-wide], [data-row~=md-wide], .container-md-wide, .row-md-wide {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 720px) {
  [data-container~=md-wide], [data-row~=md-wide], .container-md-wide, .row-md-wide {
    max-width: 90%;
  }
}

[data-container~=md-narrow], [data-row~=md-narrow], .container-md-narrow, .row-md-narrow {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 720px) {
  [data-container~=md-narrow], [data-row~=md-narrow], .container-md-narrow, .row-md-narrow {
    max-width: 80%;
  }
}

[data-container~=md-slim], [data-row~=md-slim], .container-md-slim, .row-md-slim {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 720px) {
  [data-container~=md-slim], [data-row~=md-slim], .container-md-slim, .row-md-slim {
    max-width: 70%;
  }
}

[data-container~=md-thin], [data-row~=md-thin], .container-md-thin, .row-md-thin {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 720px) {
  [data-container~=md-thin], [data-row~=md-thin], .container-md-thin, .row-md-thin {
    max-width: 60%;
  }
}

[data-container~=md-half], [data-row~=md-half], .container-md-half, .row-md-half {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 720px) {
  [data-container~=md-half], [data-row~=md-half], .container-md-half, .row-md-half {
    max-width: 50%;
  }
}

[data-container~=lg-full], [data-row~=lg-full], .container-lg-full, .row-lg-full {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 960px) {
  [data-container~=lg-full], [data-row~=lg-full], .container-lg-full, .row-lg-full {
    max-width: 100%;
  }
}

[data-container~=lg-wide], [data-row~=lg-wide], .container-lg-wide, .row-lg-wide {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 960px) {
  [data-container~=lg-wide], [data-row~=lg-wide], .container-lg-wide, .row-lg-wide {
    max-width: 90%;
  }
}

[data-container~=lg-narrow], [data-row~=lg-narrow], .container-lg-narrow, .row-lg-narrow {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 960px) {
  [data-container~=lg-narrow], [data-row~=lg-narrow], .container-lg-narrow, .row-lg-narrow {
    max-width: 80%;
  }
}

[data-container~=lg-slim], [data-row~=lg-slim], .container-lg-slim, .row-lg-slim {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 960px) {
  [data-container~=lg-slim], [data-row~=lg-slim], .container-lg-slim, .row-lg-slim {
    max-width: 70%;
  }
}

[data-container~=lg-thin], [data-row~=lg-thin], .container-lg-thin, .row-lg-thin {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 960px) {
  [data-container~=lg-thin], [data-row~=lg-thin], .container-lg-thin, .row-lg-thin {
    max-width: 60%;
  }
}

[data-container~=lg-half], [data-row~=lg-half], .container-lg-half, .row-lg-half {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 960px) {
  [data-container~=lg-half], [data-row~=lg-half], .container-lg-half, .row-lg-half {
    max-width: 50%;
  }
}

[data-container~=xl-full], [data-row~=xl-full], .container-xl-full, .row-xl-full {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 1200px) {
  [data-container~=xl-full], [data-row~=xl-full], .container-xl-full, .row-xl-full {
    max-width: 100%;
  }
}

[data-container~=xl-wide], [data-row~=xl-wide], .container-xl-wide, .row-xl-wide {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 1200px) {
  [data-container~=xl-wide], [data-row~=xl-wide], .container-xl-wide, .row-xl-wide {
    max-width: 90%;
  }
}

[data-container~=xl-narrow], [data-row~=xl-narrow], .container-xl-narrow, .row-xl-narrow {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 1200px) {
  [data-container~=xl-narrow], [data-row~=xl-narrow], .container-xl-narrow, .row-xl-narrow {
    max-width: 80%;
  }
}

[data-container~=xl-slim], [data-row~=xl-slim], .container-xl-slim, .row-xl-slim {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 1200px) {
  [data-container~=xl-slim], [data-row~=xl-slim], .container-xl-slim, .row-xl-slim {
    max-width: 70%;
  }
}

[data-container~=xl-thin], [data-row~=xl-thin], .container-xl-thin, .row-xl-thin {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 1200px) {
  [data-container~=xl-thin], [data-row~=xl-thin], .container-xl-thin, .row-xl-thin {
    max-width: 60%;
  }
}

[data-container~=xl-half], [data-row~=xl-half], .container-xl-half, .row-xl-half {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 1200px) {
  [data-container~=xl-half], [data-row~=xl-half], .container-xl-half, .row-xl-half {
    max-width: 50%;
  }
}

[data-container~=xxl-full], [data-row~=xxl-full], .container-xxl-full, .row-xxl-full {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 1600px) {
  [data-container~=xxl-full], [data-row~=xxl-full], .container-xxl-full, .row-xxl-full {
    max-width: 100%;
  }
}

[data-container~=xxl-wide], [data-row~=xxl-wide], .container-xxl-wide, .row-xxl-wide {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 1600px) {
  [data-container~=xxl-wide], [data-row~=xxl-wide], .container-xxl-wide, .row-xxl-wide {
    max-width: 90%;
  }
}

[data-container~=xxl-narrow], [data-row~=xxl-narrow], .container-xxl-narrow, .row-xxl-narrow {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 1600px) {
  [data-container~=xxl-narrow], [data-row~=xxl-narrow], .container-xxl-narrow, .row-xxl-narrow {
    max-width: 80%;
  }
}

[data-container~=xxl-slim], [data-row~=xxl-slim], .container-xxl-slim, .row-xxl-slim {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 1600px) {
  [data-container~=xxl-slim], [data-row~=xxl-slim], .container-xxl-slim, .row-xxl-slim {
    max-width: 70%;
  }
}

[data-container~=xxl-thin], [data-row~=xxl-thin], .container-xxl-thin, .row-xxl-thin {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 1600px) {
  [data-container~=xxl-thin], [data-row~=xxl-thin], .container-xxl-thin, .row-xxl-thin {
    max-width: 60%;
  }
}

[data-container~=xxl-half], [data-row~=xxl-half], .container-xxl-half, .row-xxl-half {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 1600px) {
  [data-container~=xxl-half], [data-row~=xxl-half], .container-xxl-half, .row-xxl-half {
    max-width: 50%;
  }
}

[data-container~=-l], [data-row~=-l] {
  justify-content: left;
}

[data-container~=-c], [data-row~=-c] {
  justify-content: center;
}

[data-container~=-r], [data-row~=-r] {
  justify-content: right;
}

[data-container~=-lc], [data-row~=-lc] {
  justify-content: left;
}
[data-container~=-lc] > *, [data-row~=-lc] > * {
  justify-content: left;
}

[data-container~=-cc], [data-row~=-cc] {
  justify-content: center;
}
[data-container~=-cc] > *, [data-row~=-cc] > * {
  justify-content: center;
}

[data-container~=-rc], [data-row~=-rc] {
  justify-content: right;
}
[data-container~=-rc] > *, [data-row~=-rc] > * {
  justify-content: right;
}

[data-grid~="1"], [data-grid~=xs1], .grid1, .grid-xs1 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~="1"], [data-grid~=xs1], .grid1, .grid-xs1 {
    width: calc((100% / 12) * 1 + 0.00001%);
  }
}

[data-grid~="2"], [data-grid~=xs2], .grid2, .grid-xs2 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~="2"], [data-grid~=xs2], .grid2, .grid-xs2 {
    width: calc((100% / 12) * 2 + 0.00001%);
  }
}

[data-grid~="3"], [data-grid~=xs3], .grid3, .grid-xs3 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~="3"], [data-grid~=xs3], .grid3, .grid-xs3 {
    width: calc((100% / 12) * 3 + 0.00001%);
  }
}

[data-grid~="4"], [data-grid~=xs4], .grid4, .grid-xs4 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~="4"], [data-grid~=xs4], .grid4, .grid-xs4 {
    width: calc((100% / 12) * 4 + 0.00001%);
  }
}

[data-grid~="5"], [data-grid~=xs5], .grid5, .grid-xs5 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~="5"], [data-grid~=xs5], .grid5, .grid-xs5 {
    width: calc((100% / 12) * 5 + 0.00001%);
  }
}

[data-grid~="6"], [data-grid~=xs6], .grid6, .grid-xs6 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~="6"], [data-grid~=xs6], .grid6, .grid-xs6 {
    width: calc((100% / 12) * 6 + 0.00001%);
  }
}

[data-grid~="7"], [data-grid~=xs7], .grid7, .grid-xs7 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~="7"], [data-grid~=xs7], .grid7, .grid-xs7 {
    width: calc((100% / 12) * 7 + 0.00001%);
  }
}

[data-grid~="8"], [data-grid~=xs8], .grid8, .grid-xs8 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~="8"], [data-grid~=xs8], .grid8, .grid-xs8 {
    width: calc((100% / 12) * 8 + 0.00001%);
  }
}

[data-grid~="9"], [data-grid~=xs9], .grid9, .grid-xs9 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~="9"], [data-grid~=xs9], .grid9, .grid-xs9 {
    width: calc((100% / 12) * 9 + 0.00001%);
  }
}

[data-grid~="10"], [data-grid~=xs10], .grid10, .grid-xs10 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~="10"], [data-grid~=xs10], .grid10, .grid-xs10 {
    width: calc((100% / 12) * 10 + 0.00001%);
  }
}

[data-grid~="11"], [data-grid~=xs11], .grid11, .grid-xs11 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~="11"], [data-grid~=xs11], .grid11, .grid-xs11 {
    width: calc((100% / 12) * 11 + 0.00001%);
  }
}

[data-grid~="12"], [data-grid~=xs12], .grid12, .grid-xs12 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~="12"], [data-grid~=xs12], .grid12, .grid-xs12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-grid~=sm1], .grid-sm1 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=sm1], .grid-sm1 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-grid~=sm1], .grid-sm1 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-grid~=sm2], .grid-sm2 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=sm2], .grid-sm2 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-grid~=sm2], .grid-sm2 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-grid~=sm3], .grid-sm3 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=sm3], .grid-sm3 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-grid~=sm3], .grid-sm3 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-grid~=sm4], .grid-sm4 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=sm4], .grid-sm4 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-grid~=sm4], .grid-sm4 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-grid~=sm5], .grid-sm5 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=sm5], .grid-sm5 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-grid~=sm5], .grid-sm5 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-grid~=sm6], .grid-sm6 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=sm6], .grid-sm6 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-grid~=sm6], .grid-sm6 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-grid~=sm7], .grid-sm7 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=sm7], .grid-sm7 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-grid~=sm7], .grid-sm7 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-grid~=sm8], .grid-sm8 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=sm8], .grid-sm8 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-grid~=sm8], .grid-sm8 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-grid~=sm9], .grid-sm9 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=sm9], .grid-sm9 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-grid~=sm9], .grid-sm9 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-grid~=sm10], .grid-sm10 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=sm10], .grid-sm10 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-grid~=sm10], .grid-sm10 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-grid~=sm11], .grid-sm11 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=sm11], .grid-sm11 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-grid~=sm11], .grid-sm11 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-grid~=sm12], .grid-sm12 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=sm12], .grid-sm12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-grid~=md1], .grid-md1 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=md1], .grid-md1 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-grid~=md1], .grid-md1 {
    width: calc((100% / 12) * 1 + 0.00001%);
  }
}

[data-grid~=md2], .grid-md2 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=md2], .grid-md2 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-grid~=md2], .grid-md2 {
    width: calc((100% / 12) * 2 + 0.00001%);
  }
}

[data-grid~=md3], .grid-md3 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=md3], .grid-md3 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-grid~=md3], .grid-md3 {
    width: calc((100% / 12) * 3 + 0.00001%);
  }
}

[data-grid~=md4], .grid-md4 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=md4], .grid-md4 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-grid~=md4], .grid-md4 {
    width: calc((100% / 12) * 4 + 0.00001%);
  }
}

[data-grid~=md5], .grid-md5 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=md5], .grid-md5 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-grid~=md5], .grid-md5 {
    width: calc((100% / 12) * 5 + 0.00001%);
  }
}

[data-grid~=md6], .grid-md6 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=md6], .grid-md6 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-grid~=md6], .grid-md6 {
    width: calc((100% / 12) * 6 + 0.00001%);
  }
}

[data-grid~=md7], .grid-md7 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=md7], .grid-md7 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-grid~=md7], .grid-md7 {
    width: calc((100% / 12) * 7 + 0.00001%);
  }
}

[data-grid~=md8], .grid-md8 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=md8], .grid-md8 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-grid~=md8], .grid-md8 {
    width: calc((100% / 12) * 8 + 0.00001%);
  }
}

[data-grid~=md9], .grid-md9 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=md9], .grid-md9 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-grid~=md9], .grid-md9 {
    width: calc((100% / 12) * 9 + 0.00001%);
  }
}

[data-grid~=md10], .grid-md10 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=md10], .grid-md10 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-grid~=md10], .grid-md10 {
    width: calc((100% / 12) * 10 + 0.00001%);
  }
}

[data-grid~=md11], .grid-md11 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=md11], .grid-md11 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-grid~=md11], .grid-md11 {
    width: calc((100% / 12) * 11 + 0.00001%);
  }
}

[data-grid~=md12], .grid-md12 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=md12], .grid-md12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-grid~=md12], .grid-md12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-grid~=lg1], .grid-lg1 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=lg1], .grid-lg1 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-grid~=lg1], .grid-lg1 {
    width: calc((100% / 12) * 1 + 0.00001%);
  }
}

[data-grid~=lg2], .grid-lg2 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=lg2], .grid-lg2 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-grid~=lg2], .grid-lg2 {
    width: calc((100% / 12) * 2 + 0.00001%);
  }
}

[data-grid~=lg3], .grid-lg3 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=lg3], .grid-lg3 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-grid~=lg3], .grid-lg3 {
    width: calc((100% / 12) * 3 + 0.00001%);
  }
}

[data-grid~=lg4], .grid-lg4 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=lg4], .grid-lg4 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-grid~=lg4], .grid-lg4 {
    width: calc((100% / 12) * 4 + 0.00001%);
  }
}

[data-grid~=lg5], .grid-lg5 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=lg5], .grid-lg5 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-grid~=lg5], .grid-lg5 {
    width: calc((100% / 12) * 5 + 0.00001%);
  }
}

[data-grid~=lg6], .grid-lg6 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=lg6], .grid-lg6 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-grid~=lg6], .grid-lg6 {
    width: calc((100% / 12) * 6 + 0.00001%);
  }
}

[data-grid~=lg7], .grid-lg7 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=lg7], .grid-lg7 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-grid~=lg7], .grid-lg7 {
    width: calc((100% / 12) * 7 + 0.00001%);
  }
}

[data-grid~=lg8], .grid-lg8 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=lg8], .grid-lg8 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-grid~=lg8], .grid-lg8 {
    width: calc((100% / 12) * 8 + 0.00001%);
  }
}

[data-grid~=lg9], .grid-lg9 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=lg9], .grid-lg9 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-grid~=lg9], .grid-lg9 {
    width: calc((100% / 12) * 9 + 0.00001%);
  }
}

[data-grid~=lg10], .grid-lg10 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=lg10], .grid-lg10 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-grid~=lg10], .grid-lg10 {
    width: calc((100% / 12) * 10 + 0.00001%);
  }
}

[data-grid~=lg11], .grid-lg11 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=lg11], .grid-lg11 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-grid~=lg11], .grid-lg11 {
    width: calc((100% / 12) * 11 + 0.00001%);
  }
}

[data-grid~=lg12], .grid-lg12 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=lg12], .grid-lg12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-grid~=lg12], .grid-lg12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-grid~=xl1], .grid-xl1 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=xl1], .grid-xl1 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-grid~=xl1], .grid-xl1 {
    width: calc((100% / 12) * 1 + 0.00001%);
  }
}

[data-grid~=xl2], .grid-xl2 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=xl2], .grid-xl2 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-grid~=xl2], .grid-xl2 {
    width: calc((100% / 12) * 2 + 0.00001%);
  }
}

[data-grid~=xl3], .grid-xl3 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=xl3], .grid-xl3 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-grid~=xl3], .grid-xl3 {
    width: calc((100% / 12) * 3 + 0.00001%);
  }
}

[data-grid~=xl4], .grid-xl4 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=xl4], .grid-xl4 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-grid~=xl4], .grid-xl4 {
    width: calc((100% / 12) * 4 + 0.00001%);
  }
}

[data-grid~=xl5], .grid-xl5 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=xl5], .grid-xl5 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-grid~=xl5], .grid-xl5 {
    width: calc((100% / 12) * 5 + 0.00001%);
  }
}

[data-grid~=xl6], .grid-xl6 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=xl6], .grid-xl6 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-grid~=xl6], .grid-xl6 {
    width: calc((100% / 12) * 6 + 0.00001%);
  }
}

[data-grid~=xl7], .grid-xl7 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=xl7], .grid-xl7 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-grid~=xl7], .grid-xl7 {
    width: calc((100% / 12) * 7 + 0.00001%);
  }
}

[data-grid~=xl8], .grid-xl8 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=xl8], .grid-xl8 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-grid~=xl8], .grid-xl8 {
    width: calc((100% / 12) * 8 + 0.00001%);
  }
}

[data-grid~=xl9], .grid-xl9 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=xl9], .grid-xl9 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-grid~=xl9], .grid-xl9 {
    width: calc((100% / 12) * 9 + 0.00001%);
  }
}

[data-grid~=xl10], .grid-xl10 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=xl10], .grid-xl10 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-grid~=xl10], .grid-xl10 {
    width: calc((100% / 12) * 10 + 0.00001%);
  }
}

[data-grid~=xl11], .grid-xl11 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=xl11], .grid-xl11 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-grid~=xl11], .grid-xl11 {
    width: calc((100% / 12) * 11 + 0.00001%);
  }
}

[data-grid~=xl12], .grid-xl12 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=xl12], .grid-xl12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-grid~=xl12], .grid-xl12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-grid~=xxl1], .grid-xxl1 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=xxl1], .grid-xxl1 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-grid~=xxl1], .grid-xxl1 {
    width: calc((100% / 12) * 1 + 0.00001%);
  }
}

[data-grid~=xxl2], .grid-xxl2 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=xxl2], .grid-xxl2 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-grid~=xxl2], .grid-xxl2 {
    width: calc((100% / 12) * 2 + 0.00001%);
  }
}

[data-grid~=xxl3], .grid-xxl3 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=xxl3], .grid-xxl3 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-grid~=xxl3], .grid-xxl3 {
    width: calc((100% / 12) * 3 + 0.00001%);
  }
}

[data-grid~=xxl4], .grid-xxl4 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=xxl4], .grid-xxl4 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-grid~=xxl4], .grid-xxl4 {
    width: calc((100% / 12) * 4 + 0.00001%);
  }
}

[data-grid~=xxl5], .grid-xxl5 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=xxl5], .grid-xxl5 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-grid~=xxl5], .grid-xxl5 {
    width: calc((100% / 12) * 5 + 0.00001%);
  }
}

[data-grid~=xxl6], .grid-xxl6 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=xxl6], .grid-xxl6 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-grid~=xxl6], .grid-xxl6 {
    width: calc((100% / 12) * 6 + 0.00001%);
  }
}

[data-grid~=xxl7], .grid-xxl7 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=xxl7], .grid-xxl7 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-grid~=xxl7], .grid-xxl7 {
    width: calc((100% / 12) * 7 + 0.00001%);
  }
}

[data-grid~=xxl8], .grid-xxl8 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=xxl8], .grid-xxl8 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-grid~=xxl8], .grid-xxl8 {
    width: calc((100% / 12) * 8 + 0.00001%);
  }
}

[data-grid~=xxl9], .grid-xxl9 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=xxl9], .grid-xxl9 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-grid~=xxl9], .grid-xxl9 {
    width: calc((100% / 12) * 9 + 0.00001%);
  }
}

[data-grid~=xxl10], .grid-xxl10 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=xxl10], .grid-xxl10 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-grid~=xxl10], .grid-xxl10 {
    width: calc((100% / 12) * 10 + 0.00001%);
  }
}

[data-grid~=xxl11], .grid-xxl11 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=xxl11], .grid-xxl11 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-grid~=xxl11], .grid-xxl11 {
    width: calc((100% / 12) * 11 + 0.00001%);
  }
}

[data-grid~=xxl12], .grid-xxl12 {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-grid~=xxl12], .grid-xxl12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-grid~=xxl12], .grid-xxl12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-grid~=-l] {
  justify-content: left;
}

[data-grid~=-c] {
  justify-content: center;
}

[data-grid~=-r] {
  justify-content: right;
}

[data-innergrid~="1"], [data-innergrid~=xs1], .innergrid1, .innergrid-xs1 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~="1"], [data-innergrid~=xs1], .innergrid1, .innergrid-xs1 {
    width: calc((100% / 12) * 1 + 0.00001%);
  }
}

[data-innergrid~="2"], [data-innergrid~=xs2], .innergrid2, .innergrid-xs2 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~="2"], [data-innergrid~=xs2], .innergrid2, .innergrid-xs2 {
    width: calc((100% / 12) * 2 + 0.00001%);
  }
}

[data-innergrid~="3"], [data-innergrid~=xs3], .innergrid3, .innergrid-xs3 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~="3"], [data-innergrid~=xs3], .innergrid3, .innergrid-xs3 {
    width: calc((100% / 12) * 3 + 0.00001%);
  }
}

[data-innergrid~="4"], [data-innergrid~=xs4], .innergrid4, .innergrid-xs4 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~="4"], [data-innergrid~=xs4], .innergrid4, .innergrid-xs4 {
    width: calc((100% / 12) * 4 + 0.00001%);
  }
}

[data-innergrid~="5"], [data-innergrid~=xs5], .innergrid5, .innergrid-xs5 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~="5"], [data-innergrid~=xs5], .innergrid5, .innergrid-xs5 {
    width: calc((100% / 12) * 5 + 0.00001%);
  }
}

[data-innergrid~="6"], [data-innergrid~=xs6], .innergrid6, .innergrid-xs6 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~="6"], [data-innergrid~=xs6], .innergrid6, .innergrid-xs6 {
    width: calc((100% / 12) * 6 + 0.00001%);
  }
}

[data-innergrid~="7"], [data-innergrid~=xs7], .innergrid7, .innergrid-xs7 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~="7"], [data-innergrid~=xs7], .innergrid7, .innergrid-xs7 {
    width: calc((100% / 12) * 7 + 0.00001%);
  }
}

[data-innergrid~="8"], [data-innergrid~=xs8], .innergrid8, .innergrid-xs8 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~="8"], [data-innergrid~=xs8], .innergrid8, .innergrid-xs8 {
    width: calc((100% / 12) * 8 + 0.00001%);
  }
}

[data-innergrid~="9"], [data-innergrid~=xs9], .innergrid9, .innergrid-xs9 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~="9"], [data-innergrid~=xs9], .innergrid9, .innergrid-xs9 {
    width: calc((100% / 12) * 9 + 0.00001%);
  }
}

[data-innergrid~="10"], [data-innergrid~=xs10], .innergrid10, .innergrid-xs10 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~="10"], [data-innergrid~=xs10], .innergrid10, .innergrid-xs10 {
    width: calc((100% / 12) * 10 + 0.00001%);
  }
}

[data-innergrid~="11"], [data-innergrid~=xs11], .innergrid11, .innergrid-xs11 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~="11"], [data-innergrid~=xs11], .innergrid11, .innergrid-xs11 {
    width: calc((100% / 12) * 11 + 0.00001%);
  }
}

[data-innergrid~="12"], [data-innergrid~=xs12], .innergrid12, .innergrid-xs12 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~="12"], [data-innergrid~=xs12], .innergrid12, .innergrid-xs12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-innergrid~=sm1], .innergrid-sm1 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=sm1], .innergrid-sm1 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-innergrid~=sm1], .innergrid-sm1 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-innergrid~=sm2], .innergrid-sm2 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=sm2], .innergrid-sm2 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-innergrid~=sm2], .innergrid-sm2 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-innergrid~=sm3], .innergrid-sm3 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=sm3], .innergrid-sm3 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-innergrid~=sm3], .innergrid-sm3 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-innergrid~=sm4], .innergrid-sm4 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=sm4], .innergrid-sm4 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-innergrid~=sm4], .innergrid-sm4 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-innergrid~=sm5], .innergrid-sm5 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=sm5], .innergrid-sm5 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-innergrid~=sm5], .innergrid-sm5 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-innergrid~=sm6], .innergrid-sm6 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=sm6], .innergrid-sm6 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-innergrid~=sm6], .innergrid-sm6 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-innergrid~=sm7], .innergrid-sm7 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=sm7], .innergrid-sm7 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-innergrid~=sm7], .innergrid-sm7 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-innergrid~=sm8], .innergrid-sm8 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=sm8], .innergrid-sm8 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-innergrid~=sm8], .innergrid-sm8 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-innergrid~=sm9], .innergrid-sm9 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=sm9], .innergrid-sm9 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-innergrid~=sm9], .innergrid-sm9 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-innergrid~=sm10], .innergrid-sm10 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=sm10], .innergrid-sm10 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-innergrid~=sm10], .innergrid-sm10 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-innergrid~=sm11], .innergrid-sm11 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=sm11], .innergrid-sm11 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-innergrid~=sm11], .innergrid-sm11 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-innergrid~=sm12], .innergrid-sm12 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=sm12], .innergrid-sm12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-innergrid~=md1], .innergrid-md1 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=md1], .innergrid-md1 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-innergrid~=md1], .innergrid-md1 {
    width: calc((100% / 12) * 1 + 0.00001%);
  }
}

[data-innergrid~=md2], .innergrid-md2 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=md2], .innergrid-md2 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-innergrid~=md2], .innergrid-md2 {
    width: calc((100% / 12) * 2 + 0.00001%);
  }
}

[data-innergrid~=md3], .innergrid-md3 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=md3], .innergrid-md3 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-innergrid~=md3], .innergrid-md3 {
    width: calc((100% / 12) * 3 + 0.00001%);
  }
}

[data-innergrid~=md4], .innergrid-md4 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=md4], .innergrid-md4 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-innergrid~=md4], .innergrid-md4 {
    width: calc((100% / 12) * 4 + 0.00001%);
  }
}

[data-innergrid~=md5], .innergrid-md5 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=md5], .innergrid-md5 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-innergrid~=md5], .innergrid-md5 {
    width: calc((100% / 12) * 5 + 0.00001%);
  }
}

[data-innergrid~=md6], .innergrid-md6 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=md6], .innergrid-md6 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-innergrid~=md6], .innergrid-md6 {
    width: calc((100% / 12) * 6 + 0.00001%);
  }
}

[data-innergrid~=md7], .innergrid-md7 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=md7], .innergrid-md7 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-innergrid~=md7], .innergrid-md7 {
    width: calc((100% / 12) * 7 + 0.00001%);
  }
}

[data-innergrid~=md8], .innergrid-md8 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=md8], .innergrid-md8 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-innergrid~=md8], .innergrid-md8 {
    width: calc((100% / 12) * 8 + 0.00001%);
  }
}

[data-innergrid~=md9], .innergrid-md9 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=md9], .innergrid-md9 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-innergrid~=md9], .innergrid-md9 {
    width: calc((100% / 12) * 9 + 0.00001%);
  }
}

[data-innergrid~=md10], .innergrid-md10 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=md10], .innergrid-md10 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-innergrid~=md10], .innergrid-md10 {
    width: calc((100% / 12) * 10 + 0.00001%);
  }
}

[data-innergrid~=md11], .innergrid-md11 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=md11], .innergrid-md11 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-innergrid~=md11], .innergrid-md11 {
    width: calc((100% / 12) * 11 + 0.00001%);
  }
}

[data-innergrid~=md12], .innergrid-md12 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=md12], .innergrid-md12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-innergrid~=md12], .innergrid-md12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-innergrid~=lg1], .innergrid-lg1 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=lg1], .innergrid-lg1 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-innergrid~=lg1], .innergrid-lg1 {
    width: calc((100% / 12) * 1 + 0.00001%);
  }
}

[data-innergrid~=lg2], .innergrid-lg2 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=lg2], .innergrid-lg2 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-innergrid~=lg2], .innergrid-lg2 {
    width: calc((100% / 12) * 2 + 0.00001%);
  }
}

[data-innergrid~=lg3], .innergrid-lg3 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=lg3], .innergrid-lg3 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-innergrid~=lg3], .innergrid-lg3 {
    width: calc((100% / 12) * 3 + 0.00001%);
  }
}

[data-innergrid~=lg4], .innergrid-lg4 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=lg4], .innergrid-lg4 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-innergrid~=lg4], .innergrid-lg4 {
    width: calc((100% / 12) * 4 + 0.00001%);
  }
}

[data-innergrid~=lg5], .innergrid-lg5 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=lg5], .innergrid-lg5 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-innergrid~=lg5], .innergrid-lg5 {
    width: calc((100% / 12) * 5 + 0.00001%);
  }
}

[data-innergrid~=lg6], .innergrid-lg6 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=lg6], .innergrid-lg6 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-innergrid~=lg6], .innergrid-lg6 {
    width: calc((100% / 12) * 6 + 0.00001%);
  }
}

[data-innergrid~=lg7], .innergrid-lg7 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=lg7], .innergrid-lg7 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-innergrid~=lg7], .innergrid-lg7 {
    width: calc((100% / 12) * 7 + 0.00001%);
  }
}

[data-innergrid~=lg8], .innergrid-lg8 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=lg8], .innergrid-lg8 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-innergrid~=lg8], .innergrid-lg8 {
    width: calc((100% / 12) * 8 + 0.00001%);
  }
}

[data-innergrid~=lg9], .innergrid-lg9 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=lg9], .innergrid-lg9 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-innergrid~=lg9], .innergrid-lg9 {
    width: calc((100% / 12) * 9 + 0.00001%);
  }
}

[data-innergrid~=lg10], .innergrid-lg10 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=lg10], .innergrid-lg10 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-innergrid~=lg10], .innergrid-lg10 {
    width: calc((100% / 12) * 10 + 0.00001%);
  }
}

[data-innergrid~=lg11], .innergrid-lg11 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=lg11], .innergrid-lg11 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-innergrid~=lg11], .innergrid-lg11 {
    width: calc((100% / 12) * 11 + 0.00001%);
  }
}

[data-innergrid~=lg12], .innergrid-lg12 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=lg12], .innergrid-lg12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-innergrid~=lg12], .innergrid-lg12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-innergrid~=xl1], .innergrid-xl1 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=xl1], .innergrid-xl1 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-innergrid~=xl1], .innergrid-xl1 {
    width: calc((100% / 12) * 1 + 0.00001%);
  }
}

[data-innergrid~=xl2], .innergrid-xl2 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=xl2], .innergrid-xl2 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-innergrid~=xl2], .innergrid-xl2 {
    width: calc((100% / 12) * 2 + 0.00001%);
  }
}

[data-innergrid~=xl3], .innergrid-xl3 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=xl3], .innergrid-xl3 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-innergrid~=xl3], .innergrid-xl3 {
    width: calc((100% / 12) * 3 + 0.00001%);
  }
}

[data-innergrid~=xl4], .innergrid-xl4 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=xl4], .innergrid-xl4 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-innergrid~=xl4], .innergrid-xl4 {
    width: calc((100% / 12) * 4 + 0.00001%);
  }
}

[data-innergrid~=xl5], .innergrid-xl5 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=xl5], .innergrid-xl5 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-innergrid~=xl5], .innergrid-xl5 {
    width: calc((100% / 12) * 5 + 0.00001%);
  }
}

[data-innergrid~=xl6], .innergrid-xl6 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=xl6], .innergrid-xl6 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-innergrid~=xl6], .innergrid-xl6 {
    width: calc((100% / 12) * 6 + 0.00001%);
  }
}

[data-innergrid~=xl7], .innergrid-xl7 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=xl7], .innergrid-xl7 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-innergrid~=xl7], .innergrid-xl7 {
    width: calc((100% / 12) * 7 + 0.00001%);
  }
}

[data-innergrid~=xl8], .innergrid-xl8 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=xl8], .innergrid-xl8 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-innergrid~=xl8], .innergrid-xl8 {
    width: calc((100% / 12) * 8 + 0.00001%);
  }
}

[data-innergrid~=xl9], .innergrid-xl9 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=xl9], .innergrid-xl9 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-innergrid~=xl9], .innergrid-xl9 {
    width: calc((100% / 12) * 9 + 0.00001%);
  }
}

[data-innergrid~=xl10], .innergrid-xl10 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=xl10], .innergrid-xl10 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-innergrid~=xl10], .innergrid-xl10 {
    width: calc((100% / 12) * 10 + 0.00001%);
  }
}

[data-innergrid~=xl11], .innergrid-xl11 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=xl11], .innergrid-xl11 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-innergrid~=xl11], .innergrid-xl11 {
    width: calc((100% / 12) * 11 + 0.00001%);
  }
}

[data-innergrid~=xl12], .innergrid-xl12 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=xl12], .innergrid-xl12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-innergrid~=xl12], .innergrid-xl12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-innergrid~=xxl1], .innergrid-xxl1 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=xxl1], .innergrid-xxl1 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-innergrid~=xxl1], .innergrid-xxl1 {
    width: calc((100% / 12) * 1 + 0.00001%);
  }
}

[data-innergrid~=xxl2], .innergrid-xxl2 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=xxl2], .innergrid-xxl2 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-innergrid~=xxl2], .innergrid-xxl2 {
    width: calc((100% / 12) * 2 + 0.00001%);
  }
}

[data-innergrid~=xxl3], .innergrid-xxl3 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=xxl3], .innergrid-xxl3 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-innergrid~=xxl3], .innergrid-xxl3 {
    width: calc((100% / 12) * 3 + 0.00001%);
  }
}

[data-innergrid~=xxl4], .innergrid-xxl4 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=xxl4], .innergrid-xxl4 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-innergrid~=xxl4], .innergrid-xxl4 {
    width: calc((100% / 12) * 4 + 0.00001%);
  }
}

[data-innergrid~=xxl5], .innergrid-xxl5 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=xxl5], .innergrid-xxl5 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-innergrid~=xxl5], .innergrid-xxl5 {
    width: calc((100% / 12) * 5 + 0.00001%);
  }
}

[data-innergrid~=xxl6], .innergrid-xxl6 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=xxl6], .innergrid-xxl6 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-innergrid~=xxl6], .innergrid-xxl6 {
    width: calc((100% / 12) * 6 + 0.00001%);
  }
}

[data-innergrid~=xxl7], .innergrid-xxl7 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=xxl7], .innergrid-xxl7 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-innergrid~=xxl7], .innergrid-xxl7 {
    width: calc((100% / 12) * 7 + 0.00001%);
  }
}

[data-innergrid~=xxl8], .innergrid-xxl8 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=xxl8], .innergrid-xxl8 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-innergrid~=xxl8], .innergrid-xxl8 {
    width: calc((100% / 12) * 8 + 0.00001%);
  }
}

[data-innergrid~=xxl9], .innergrid-xxl9 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=xxl9], .innergrid-xxl9 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-innergrid~=xxl9], .innergrid-xxl9 {
    width: calc((100% / 12) * 9 + 0.00001%);
  }
}

[data-innergrid~=xxl10], .innergrid-xxl10 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=xxl10], .innergrid-xxl10 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-innergrid~=xxl10], .innergrid-xxl10 {
    width: calc((100% / 12) * 10 + 0.00001%);
  }
}

[data-innergrid~=xxl11], .innergrid-xxl11 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=xxl11], .innergrid-xxl11 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-innergrid~=xxl11], .innergrid-xxl11 {
    width: calc((100% / 12) * 11 + 0.00001%);
  }
}

[data-innergrid~=xxl12], .innergrid-xxl12 {
  width: 100%;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innergrid~=xxl12], .innergrid-xxl12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-innergrid~=xxl12], .innergrid-xxl12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-outergrid~="1"], [data-outergrid~=xs1], .outergrid1, .outergrid-xs1 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~="1"], [data-outergrid~=xs1], .outergrid1, .outergrid-xs1 {
    width: calc((100% / 12) * 1 + 0.00001%);
  }
}

[data-outergrid~="2"], [data-outergrid~=xs2], .outergrid2, .outergrid-xs2 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~="2"], [data-outergrid~=xs2], .outergrid2, .outergrid-xs2 {
    width: calc((100% / 12) * 2 + 0.00001%);
  }
}

[data-outergrid~="3"], [data-outergrid~=xs3], .outergrid3, .outergrid-xs3 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~="3"], [data-outergrid~=xs3], .outergrid3, .outergrid-xs3 {
    width: calc((100% / 12) * 3 + 0.00001%);
  }
}

[data-outergrid~="4"], [data-outergrid~=xs4], .outergrid4, .outergrid-xs4 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~="4"], [data-outergrid~=xs4], .outergrid4, .outergrid-xs4 {
    width: calc((100% / 12) * 4 + 0.00001%);
  }
}

[data-outergrid~="5"], [data-outergrid~=xs5], .outergrid5, .outergrid-xs5 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~="5"], [data-outergrid~=xs5], .outergrid5, .outergrid-xs5 {
    width: calc((100% / 12) * 5 + 0.00001%);
  }
}

[data-outergrid~="6"], [data-outergrid~=xs6], .outergrid6, .outergrid-xs6 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~="6"], [data-outergrid~=xs6], .outergrid6, .outergrid-xs6 {
    width: calc((100% / 12) * 6 + 0.00001%);
  }
}

[data-outergrid~="7"], [data-outergrid~=xs7], .outergrid7, .outergrid-xs7 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~="7"], [data-outergrid~=xs7], .outergrid7, .outergrid-xs7 {
    width: calc((100% / 12) * 7 + 0.00001%);
  }
}

[data-outergrid~="8"], [data-outergrid~=xs8], .outergrid8, .outergrid-xs8 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~="8"], [data-outergrid~=xs8], .outergrid8, .outergrid-xs8 {
    width: calc((100% / 12) * 8 + 0.00001%);
  }
}

[data-outergrid~="9"], [data-outergrid~=xs9], .outergrid9, .outergrid-xs9 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~="9"], [data-outergrid~=xs9], .outergrid9, .outergrid-xs9 {
    width: calc((100% / 12) * 9 + 0.00001%);
  }
}

[data-outergrid~="10"], [data-outergrid~=xs10], .outergrid10, .outergrid-xs10 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~="10"], [data-outergrid~=xs10], .outergrid10, .outergrid-xs10 {
    width: calc((100% / 12) * 10 + 0.00001%);
  }
}

[data-outergrid~="11"], [data-outergrid~=xs11], .outergrid11, .outergrid-xs11 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~="11"], [data-outergrid~=xs11], .outergrid11, .outergrid-xs11 {
    width: calc((100% / 12) * 11 + 0.00001%);
  }
}

[data-outergrid~="12"], [data-outergrid~=xs12], .outergrid12, .outergrid-xs12 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~="12"], [data-outergrid~=xs12], .outergrid12, .outergrid-xs12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-outergrid~=sm1], .outergrid-sm1 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=sm1], .outergrid-sm1 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-outergrid~=sm1], .outergrid-sm1 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-outergrid~=sm2], .outergrid-sm2 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=sm2], .outergrid-sm2 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-outergrid~=sm2], .outergrid-sm2 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-outergrid~=sm3], .outergrid-sm3 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=sm3], .outergrid-sm3 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-outergrid~=sm3], .outergrid-sm3 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-outergrid~=sm4], .outergrid-sm4 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=sm4], .outergrid-sm4 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-outergrid~=sm4], .outergrid-sm4 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-outergrid~=sm5], .outergrid-sm5 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=sm5], .outergrid-sm5 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-outergrid~=sm5], .outergrid-sm5 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-outergrid~=sm6], .outergrid-sm6 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=sm6], .outergrid-sm6 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-outergrid~=sm6], .outergrid-sm6 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-outergrid~=sm7], .outergrid-sm7 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=sm7], .outergrid-sm7 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-outergrid~=sm7], .outergrid-sm7 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-outergrid~=sm8], .outergrid-sm8 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=sm8], .outergrid-sm8 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-outergrid~=sm8], .outergrid-sm8 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-outergrid~=sm9], .outergrid-sm9 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=sm9], .outergrid-sm9 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-outergrid~=sm9], .outergrid-sm9 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-outergrid~=sm10], .outergrid-sm10 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=sm10], .outergrid-sm10 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-outergrid~=sm10], .outergrid-sm10 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-outergrid~=sm11], .outergrid-sm11 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=sm11], .outergrid-sm11 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-outergrid~=sm11], .outergrid-sm11 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-outergrid~=sm12], .outergrid-sm12 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=sm12], .outergrid-sm12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-outergrid~=md1], .outergrid-md1 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=md1], .outergrid-md1 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-outergrid~=md1], .outergrid-md1 {
    width: calc((100% / 12) * 1 + 0.00001%);
  }
}

[data-outergrid~=md2], .outergrid-md2 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=md2], .outergrid-md2 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-outergrid~=md2], .outergrid-md2 {
    width: calc((100% / 12) * 2 + 0.00001%);
  }
}

[data-outergrid~=md3], .outergrid-md3 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=md3], .outergrid-md3 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-outergrid~=md3], .outergrid-md3 {
    width: calc((100% / 12) * 3 + 0.00001%);
  }
}

[data-outergrid~=md4], .outergrid-md4 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=md4], .outergrid-md4 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-outergrid~=md4], .outergrid-md4 {
    width: calc((100% / 12) * 4 + 0.00001%);
  }
}

[data-outergrid~=md5], .outergrid-md5 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=md5], .outergrid-md5 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-outergrid~=md5], .outergrid-md5 {
    width: calc((100% / 12) * 5 + 0.00001%);
  }
}

[data-outergrid~=md6], .outergrid-md6 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=md6], .outergrid-md6 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-outergrid~=md6], .outergrid-md6 {
    width: calc((100% / 12) * 6 + 0.00001%);
  }
}

[data-outergrid~=md7], .outergrid-md7 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=md7], .outergrid-md7 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-outergrid~=md7], .outergrid-md7 {
    width: calc((100% / 12) * 7 + 0.00001%);
  }
}

[data-outergrid~=md8], .outergrid-md8 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=md8], .outergrid-md8 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-outergrid~=md8], .outergrid-md8 {
    width: calc((100% / 12) * 8 + 0.00001%);
  }
}

[data-outergrid~=md9], .outergrid-md9 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=md9], .outergrid-md9 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-outergrid~=md9], .outergrid-md9 {
    width: calc((100% / 12) * 9 + 0.00001%);
  }
}

[data-outergrid~=md10], .outergrid-md10 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=md10], .outergrid-md10 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-outergrid~=md10], .outergrid-md10 {
    width: calc((100% / 12) * 10 + 0.00001%);
  }
}

[data-outergrid~=md11], .outergrid-md11 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=md11], .outergrid-md11 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-outergrid~=md11], .outergrid-md11 {
    width: calc((100% / 12) * 11 + 0.00001%);
  }
}

[data-outergrid~=md12], .outergrid-md12 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=md12], .outergrid-md12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-outergrid~=md12], .outergrid-md12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-outergrid~=lg1], .outergrid-lg1 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=lg1], .outergrid-lg1 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-outergrid~=lg1], .outergrid-lg1 {
    width: calc((100% / 12) * 1 + 0.00001%);
  }
}

[data-outergrid~=lg2], .outergrid-lg2 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=lg2], .outergrid-lg2 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-outergrid~=lg2], .outergrid-lg2 {
    width: calc((100% / 12) * 2 + 0.00001%);
  }
}

[data-outergrid~=lg3], .outergrid-lg3 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=lg3], .outergrid-lg3 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-outergrid~=lg3], .outergrid-lg3 {
    width: calc((100% / 12) * 3 + 0.00001%);
  }
}

[data-outergrid~=lg4], .outergrid-lg4 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=lg4], .outergrid-lg4 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-outergrid~=lg4], .outergrid-lg4 {
    width: calc((100% / 12) * 4 + 0.00001%);
  }
}

[data-outergrid~=lg5], .outergrid-lg5 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=lg5], .outergrid-lg5 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-outergrid~=lg5], .outergrid-lg5 {
    width: calc((100% / 12) * 5 + 0.00001%);
  }
}

[data-outergrid~=lg6], .outergrid-lg6 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=lg6], .outergrid-lg6 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-outergrid~=lg6], .outergrid-lg6 {
    width: calc((100% / 12) * 6 + 0.00001%);
  }
}

[data-outergrid~=lg7], .outergrid-lg7 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=lg7], .outergrid-lg7 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-outergrid~=lg7], .outergrid-lg7 {
    width: calc((100% / 12) * 7 + 0.00001%);
  }
}

[data-outergrid~=lg8], .outergrid-lg8 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=lg8], .outergrid-lg8 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-outergrid~=lg8], .outergrid-lg8 {
    width: calc((100% / 12) * 8 + 0.00001%);
  }
}

[data-outergrid~=lg9], .outergrid-lg9 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=lg9], .outergrid-lg9 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-outergrid~=lg9], .outergrid-lg9 {
    width: calc((100% / 12) * 9 + 0.00001%);
  }
}

[data-outergrid~=lg10], .outergrid-lg10 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=lg10], .outergrid-lg10 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-outergrid~=lg10], .outergrid-lg10 {
    width: calc((100% / 12) * 10 + 0.00001%);
  }
}

[data-outergrid~=lg11], .outergrid-lg11 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=lg11], .outergrid-lg11 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-outergrid~=lg11], .outergrid-lg11 {
    width: calc((100% / 12) * 11 + 0.00001%);
  }
}

[data-outergrid~=lg12], .outergrid-lg12 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=lg12], .outergrid-lg12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-outergrid~=lg12], .outergrid-lg12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-outergrid~=xl1], .outergrid-xl1 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=xl1], .outergrid-xl1 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-outergrid~=xl1], .outergrid-xl1 {
    width: calc((100% / 12) * 1 + 0.00001%);
  }
}

[data-outergrid~=xl2], .outergrid-xl2 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=xl2], .outergrid-xl2 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-outergrid~=xl2], .outergrid-xl2 {
    width: calc((100% / 12) * 2 + 0.00001%);
  }
}

[data-outergrid~=xl3], .outergrid-xl3 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=xl3], .outergrid-xl3 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-outergrid~=xl3], .outergrid-xl3 {
    width: calc((100% / 12) * 3 + 0.00001%);
  }
}

[data-outergrid~=xl4], .outergrid-xl4 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=xl4], .outergrid-xl4 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-outergrid~=xl4], .outergrid-xl4 {
    width: calc((100% / 12) * 4 + 0.00001%);
  }
}

[data-outergrid~=xl5], .outergrid-xl5 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=xl5], .outergrid-xl5 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-outergrid~=xl5], .outergrid-xl5 {
    width: calc((100% / 12) * 5 + 0.00001%);
  }
}

[data-outergrid~=xl6], .outergrid-xl6 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=xl6], .outergrid-xl6 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-outergrid~=xl6], .outergrid-xl6 {
    width: calc((100% / 12) * 6 + 0.00001%);
  }
}

[data-outergrid~=xl7], .outergrid-xl7 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=xl7], .outergrid-xl7 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-outergrid~=xl7], .outergrid-xl7 {
    width: calc((100% / 12) * 7 + 0.00001%);
  }
}

[data-outergrid~=xl8], .outergrid-xl8 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=xl8], .outergrid-xl8 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-outergrid~=xl8], .outergrid-xl8 {
    width: calc((100% / 12) * 8 + 0.00001%);
  }
}

[data-outergrid~=xl9], .outergrid-xl9 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=xl9], .outergrid-xl9 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-outergrid~=xl9], .outergrid-xl9 {
    width: calc((100% / 12) * 9 + 0.00001%);
  }
}

[data-outergrid~=xl10], .outergrid-xl10 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=xl10], .outergrid-xl10 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-outergrid~=xl10], .outergrid-xl10 {
    width: calc((100% / 12) * 10 + 0.00001%);
  }
}

[data-outergrid~=xl11], .outergrid-xl11 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=xl11], .outergrid-xl11 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-outergrid~=xl11], .outergrid-xl11 {
    width: calc((100% / 12) * 11 + 0.00001%);
  }
}

[data-outergrid~=xl12], .outergrid-xl12 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=xl12], .outergrid-xl12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-outergrid~=xl12], .outergrid-xl12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-outergrid~=xxl1], .outergrid-xxl1 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=xxl1], .outergrid-xxl1 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-outergrid~=xxl1], .outergrid-xxl1 {
    width: calc((100% / 12) * 1 + 0.00001%);
  }
}

[data-outergrid~=xxl2], .outergrid-xxl2 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=xxl2], .outergrid-xxl2 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-outergrid~=xxl2], .outergrid-xxl2 {
    width: calc((100% / 12) * 2 + 0.00001%);
  }
}

[data-outergrid~=xxl3], .outergrid-xxl3 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=xxl3], .outergrid-xxl3 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-outergrid~=xxl3], .outergrid-xxl3 {
    width: calc((100% / 12) * 3 + 0.00001%);
  }
}

[data-outergrid~=xxl4], .outergrid-xxl4 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=xxl4], .outergrid-xxl4 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-outergrid~=xxl4], .outergrid-xxl4 {
    width: calc((100% / 12) * 4 + 0.00001%);
  }
}

[data-outergrid~=xxl5], .outergrid-xxl5 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=xxl5], .outergrid-xxl5 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-outergrid~=xxl5], .outergrid-xxl5 {
    width: calc((100% / 12) * 5 + 0.00001%);
  }
}

[data-outergrid~=xxl6], .outergrid-xxl6 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=xxl6], .outergrid-xxl6 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-outergrid~=xxl6], .outergrid-xxl6 {
    width: calc((100% / 12) * 6 + 0.00001%);
  }
}

[data-outergrid~=xxl7], .outergrid-xxl7 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=xxl7], .outergrid-xxl7 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-outergrid~=xxl7], .outergrid-xxl7 {
    width: calc((100% / 12) * 7 + 0.00001%);
  }
}

[data-outergrid~=xxl8], .outergrid-xxl8 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=xxl8], .outergrid-xxl8 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-outergrid~=xxl8], .outergrid-xxl8 {
    width: calc((100% / 12) * 8 + 0.00001%);
  }
}

[data-outergrid~=xxl9], .outergrid-xxl9 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=xxl9], .outergrid-xxl9 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-outergrid~=xxl9], .outergrid-xxl9 {
    width: calc((100% / 12) * 9 + 0.00001%);
  }
}

[data-outergrid~=xxl10], .outergrid-xxl10 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=xxl10], .outergrid-xxl10 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-outergrid~=xxl10], .outergrid-xxl10 {
    width: calc((100% / 12) * 10 + 0.00001%);
  }
}

[data-outergrid~=xxl11], .outergrid-xxl11 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=xxl11], .outergrid-xxl11 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-outergrid~=xxl11], .outergrid-xxl11 {
    width: calc((100% / 12) * 11 + 0.00001%);
  }
}

[data-outergrid~=xxl12], .outergrid-xxl12 {
  width: 100%;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outergrid~=xxl12], .outergrid-xxl12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-outergrid~=xxl12], .outergrid-xxl12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-areagrid~="1"], [data-areagrid~=xs1], .areagrid1, .areagrid-xs1 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~="1"], [data-areagrid~=xs1], .areagrid1, .areagrid-xs1 {
    width: calc((100% / 12) * 1 + 0.00001%);
  }
}

[data-areagrid~="2"], [data-areagrid~=xs2], .areagrid2, .areagrid-xs2 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~="2"], [data-areagrid~=xs2], .areagrid2, .areagrid-xs2 {
    width: calc((100% / 12) * 2 + 0.00001%);
  }
}

[data-areagrid~="3"], [data-areagrid~=xs3], .areagrid3, .areagrid-xs3 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~="3"], [data-areagrid~=xs3], .areagrid3, .areagrid-xs3 {
    width: calc((100% / 12) * 3 + 0.00001%);
  }
}

[data-areagrid~="4"], [data-areagrid~=xs4], .areagrid4, .areagrid-xs4 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~="4"], [data-areagrid~=xs4], .areagrid4, .areagrid-xs4 {
    width: calc((100% / 12) * 4 + 0.00001%);
  }
}

[data-areagrid~="5"], [data-areagrid~=xs5], .areagrid5, .areagrid-xs5 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~="5"], [data-areagrid~=xs5], .areagrid5, .areagrid-xs5 {
    width: calc((100% / 12) * 5 + 0.00001%);
  }
}

[data-areagrid~="6"], [data-areagrid~=xs6], .areagrid6, .areagrid-xs6 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~="6"], [data-areagrid~=xs6], .areagrid6, .areagrid-xs6 {
    width: calc((100% / 12) * 6 + 0.00001%);
  }
}

[data-areagrid~="7"], [data-areagrid~=xs7], .areagrid7, .areagrid-xs7 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~="7"], [data-areagrid~=xs7], .areagrid7, .areagrid-xs7 {
    width: calc((100% / 12) * 7 + 0.00001%);
  }
}

[data-areagrid~="8"], [data-areagrid~=xs8], .areagrid8, .areagrid-xs8 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~="8"], [data-areagrid~=xs8], .areagrid8, .areagrid-xs8 {
    width: calc((100% / 12) * 8 + 0.00001%);
  }
}

[data-areagrid~="9"], [data-areagrid~=xs9], .areagrid9, .areagrid-xs9 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~="9"], [data-areagrid~=xs9], .areagrid9, .areagrid-xs9 {
    width: calc((100% / 12) * 9 + 0.00001%);
  }
}

[data-areagrid~="10"], [data-areagrid~=xs10], .areagrid10, .areagrid-xs10 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~="10"], [data-areagrid~=xs10], .areagrid10, .areagrid-xs10 {
    width: calc((100% / 12) * 10 + 0.00001%);
  }
}

[data-areagrid~="11"], [data-areagrid~=xs11], .areagrid11, .areagrid-xs11 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~="11"], [data-areagrid~=xs11], .areagrid11, .areagrid-xs11 {
    width: calc((100% / 12) * 11 + 0.00001%);
  }
}

[data-areagrid~="12"], [data-areagrid~=xs12], .areagrid12, .areagrid-xs12 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~="12"], [data-areagrid~=xs12], .areagrid12, .areagrid-xs12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-areagrid~=sm1], .areagrid-sm1 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=sm1], .areagrid-sm1 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-areagrid~=sm1], .areagrid-sm1 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-areagrid~=sm2], .areagrid-sm2 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=sm2], .areagrid-sm2 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-areagrid~=sm2], .areagrid-sm2 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-areagrid~=sm3], .areagrid-sm3 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=sm3], .areagrid-sm3 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-areagrid~=sm3], .areagrid-sm3 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-areagrid~=sm4], .areagrid-sm4 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=sm4], .areagrid-sm4 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-areagrid~=sm4], .areagrid-sm4 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-areagrid~=sm5], .areagrid-sm5 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=sm5], .areagrid-sm5 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-areagrid~=sm5], .areagrid-sm5 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-areagrid~=sm6], .areagrid-sm6 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=sm6], .areagrid-sm6 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-areagrid~=sm6], .areagrid-sm6 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-areagrid~=sm7], .areagrid-sm7 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=sm7], .areagrid-sm7 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-areagrid~=sm7], .areagrid-sm7 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-areagrid~=sm8], .areagrid-sm8 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=sm8], .areagrid-sm8 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-areagrid~=sm8], .areagrid-sm8 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-areagrid~=sm9], .areagrid-sm9 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=sm9], .areagrid-sm9 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-areagrid~=sm9], .areagrid-sm9 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-areagrid~=sm10], .areagrid-sm10 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=sm10], .areagrid-sm10 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-areagrid~=sm10], .areagrid-sm10 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-areagrid~=sm11], .areagrid-sm11 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=sm11], .areagrid-sm11 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 480px) {
  [data-areagrid~=sm11], .areagrid-sm11 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-areagrid~=sm12], .areagrid-sm12 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=sm12], .areagrid-sm12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-areagrid~=md1], .areagrid-md1 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=md1], .areagrid-md1 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-areagrid~=md1], .areagrid-md1 {
    width: calc((100% / 12) * 1 + 0.00001%);
  }
}

[data-areagrid~=md2], .areagrid-md2 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=md2], .areagrid-md2 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-areagrid~=md2], .areagrid-md2 {
    width: calc((100% / 12) * 2 + 0.00001%);
  }
}

[data-areagrid~=md3], .areagrid-md3 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=md3], .areagrid-md3 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-areagrid~=md3], .areagrid-md3 {
    width: calc((100% / 12) * 3 + 0.00001%);
  }
}

[data-areagrid~=md4], .areagrid-md4 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=md4], .areagrid-md4 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-areagrid~=md4], .areagrid-md4 {
    width: calc((100% / 12) * 4 + 0.00001%);
  }
}

[data-areagrid~=md5], .areagrid-md5 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=md5], .areagrid-md5 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-areagrid~=md5], .areagrid-md5 {
    width: calc((100% / 12) * 5 + 0.00001%);
  }
}

[data-areagrid~=md6], .areagrid-md6 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=md6], .areagrid-md6 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-areagrid~=md6], .areagrid-md6 {
    width: calc((100% / 12) * 6 + 0.00001%);
  }
}

[data-areagrid~=md7], .areagrid-md7 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=md7], .areagrid-md7 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-areagrid~=md7], .areagrid-md7 {
    width: calc((100% / 12) * 7 + 0.00001%);
  }
}

[data-areagrid~=md8], .areagrid-md8 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=md8], .areagrid-md8 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-areagrid~=md8], .areagrid-md8 {
    width: calc((100% / 12) * 8 + 0.00001%);
  }
}

[data-areagrid~=md9], .areagrid-md9 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=md9], .areagrid-md9 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-areagrid~=md9], .areagrid-md9 {
    width: calc((100% / 12) * 9 + 0.00001%);
  }
}

[data-areagrid~=md10], .areagrid-md10 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=md10], .areagrid-md10 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-areagrid~=md10], .areagrid-md10 {
    width: calc((100% / 12) * 10 + 0.00001%);
  }
}

[data-areagrid~=md11], .areagrid-md11 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=md11], .areagrid-md11 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-areagrid~=md11], .areagrid-md11 {
    width: calc((100% / 12) * 11 + 0.00001%);
  }
}

[data-areagrid~=md12], .areagrid-md12 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=md12], .areagrid-md12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 720px) {
  [data-areagrid~=md12], .areagrid-md12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-areagrid~=lg1], .areagrid-lg1 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=lg1], .areagrid-lg1 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-areagrid~=lg1], .areagrid-lg1 {
    width: calc((100% / 12) * 1 + 0.00001%);
  }
}

[data-areagrid~=lg2], .areagrid-lg2 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=lg2], .areagrid-lg2 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-areagrid~=lg2], .areagrid-lg2 {
    width: calc((100% / 12) * 2 + 0.00001%);
  }
}

[data-areagrid~=lg3], .areagrid-lg3 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=lg3], .areagrid-lg3 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-areagrid~=lg3], .areagrid-lg3 {
    width: calc((100% / 12) * 3 + 0.00001%);
  }
}

[data-areagrid~=lg4], .areagrid-lg4 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=lg4], .areagrid-lg4 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-areagrid~=lg4], .areagrid-lg4 {
    width: calc((100% / 12) * 4 + 0.00001%);
  }
}

[data-areagrid~=lg5], .areagrid-lg5 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=lg5], .areagrid-lg5 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-areagrid~=lg5], .areagrid-lg5 {
    width: calc((100% / 12) * 5 + 0.00001%);
  }
}

[data-areagrid~=lg6], .areagrid-lg6 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=lg6], .areagrid-lg6 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-areagrid~=lg6], .areagrid-lg6 {
    width: calc((100% / 12) * 6 + 0.00001%);
  }
}

[data-areagrid~=lg7], .areagrid-lg7 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=lg7], .areagrid-lg7 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-areagrid~=lg7], .areagrid-lg7 {
    width: calc((100% / 12) * 7 + 0.00001%);
  }
}

[data-areagrid~=lg8], .areagrid-lg8 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=lg8], .areagrid-lg8 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-areagrid~=lg8], .areagrid-lg8 {
    width: calc((100% / 12) * 8 + 0.00001%);
  }
}

[data-areagrid~=lg9], .areagrid-lg9 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=lg9], .areagrid-lg9 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-areagrid~=lg9], .areagrid-lg9 {
    width: calc((100% / 12) * 9 + 0.00001%);
  }
}

[data-areagrid~=lg10], .areagrid-lg10 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=lg10], .areagrid-lg10 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-areagrid~=lg10], .areagrid-lg10 {
    width: calc((100% / 12) * 10 + 0.00001%);
  }
}

[data-areagrid~=lg11], .areagrid-lg11 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=lg11], .areagrid-lg11 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-areagrid~=lg11], .areagrid-lg11 {
    width: calc((100% / 12) * 11 + 0.00001%);
  }
}

[data-areagrid~=lg12], .areagrid-lg12 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=lg12], .areagrid-lg12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 960px) {
  [data-areagrid~=lg12], .areagrid-lg12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-areagrid~=xl1], .areagrid-xl1 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=xl1], .areagrid-xl1 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-areagrid~=xl1], .areagrid-xl1 {
    width: calc((100% / 12) * 1 + 0.00001%);
  }
}

[data-areagrid~=xl2], .areagrid-xl2 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=xl2], .areagrid-xl2 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-areagrid~=xl2], .areagrid-xl2 {
    width: calc((100% / 12) * 2 + 0.00001%);
  }
}

[data-areagrid~=xl3], .areagrid-xl3 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=xl3], .areagrid-xl3 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-areagrid~=xl3], .areagrid-xl3 {
    width: calc((100% / 12) * 3 + 0.00001%);
  }
}

[data-areagrid~=xl4], .areagrid-xl4 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=xl4], .areagrid-xl4 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-areagrid~=xl4], .areagrid-xl4 {
    width: calc((100% / 12) * 4 + 0.00001%);
  }
}

[data-areagrid~=xl5], .areagrid-xl5 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=xl5], .areagrid-xl5 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-areagrid~=xl5], .areagrid-xl5 {
    width: calc((100% / 12) * 5 + 0.00001%);
  }
}

[data-areagrid~=xl6], .areagrid-xl6 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=xl6], .areagrid-xl6 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-areagrid~=xl6], .areagrid-xl6 {
    width: calc((100% / 12) * 6 + 0.00001%);
  }
}

[data-areagrid~=xl7], .areagrid-xl7 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=xl7], .areagrid-xl7 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-areagrid~=xl7], .areagrid-xl7 {
    width: calc((100% / 12) * 7 + 0.00001%);
  }
}

[data-areagrid~=xl8], .areagrid-xl8 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=xl8], .areagrid-xl8 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-areagrid~=xl8], .areagrid-xl8 {
    width: calc((100% / 12) * 8 + 0.00001%);
  }
}

[data-areagrid~=xl9], .areagrid-xl9 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=xl9], .areagrid-xl9 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-areagrid~=xl9], .areagrid-xl9 {
    width: calc((100% / 12) * 9 + 0.00001%);
  }
}

[data-areagrid~=xl10], .areagrid-xl10 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=xl10], .areagrid-xl10 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-areagrid~=xl10], .areagrid-xl10 {
    width: calc((100% / 12) * 10 + 0.00001%);
  }
}

[data-areagrid~=xl11], .areagrid-xl11 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=xl11], .areagrid-xl11 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-areagrid~=xl11], .areagrid-xl11 {
    width: calc((100% / 12) * 11 + 0.00001%);
  }
}

[data-areagrid~=xl12], .areagrid-xl12 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=xl12], .areagrid-xl12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1200px) {
  [data-areagrid~=xl12], .areagrid-xl12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-areagrid~=xxl1], .areagrid-xxl1 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=xxl1], .areagrid-xxl1 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-areagrid~=xxl1], .areagrid-xxl1 {
    width: calc((100% / 12) * 1 + 0.00001%);
  }
}

[data-areagrid~=xxl2], .areagrid-xxl2 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=xxl2], .areagrid-xxl2 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-areagrid~=xxl2], .areagrid-xxl2 {
    width: calc((100% / 12) * 2 + 0.00001%);
  }
}

[data-areagrid~=xxl3], .areagrid-xxl3 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=xxl3], .areagrid-xxl3 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-areagrid~=xxl3], .areagrid-xxl3 {
    width: calc((100% / 12) * 3 + 0.00001%);
  }
}

[data-areagrid~=xxl4], .areagrid-xxl4 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=xxl4], .areagrid-xxl4 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-areagrid~=xxl4], .areagrid-xxl4 {
    width: calc((100% / 12) * 4 + 0.00001%);
  }
}

[data-areagrid~=xxl5], .areagrid-xxl5 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=xxl5], .areagrid-xxl5 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-areagrid~=xxl5], .areagrid-xxl5 {
    width: calc((100% / 12) * 5 + 0.00001%);
  }
}

[data-areagrid~=xxl6], .areagrid-xxl6 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=xxl6], .areagrid-xxl6 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-areagrid~=xxl6], .areagrid-xxl6 {
    width: calc((100% / 12) * 6 + 0.00001%);
  }
}

[data-areagrid~=xxl7], .areagrid-xxl7 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=xxl7], .areagrid-xxl7 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-areagrid~=xxl7], .areagrid-xxl7 {
    width: calc((100% / 12) * 7 + 0.00001%);
  }
}

[data-areagrid~=xxl8], .areagrid-xxl8 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=xxl8], .areagrid-xxl8 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-areagrid~=xxl8], .areagrid-xxl8 {
    width: calc((100% / 12) * 8 + 0.00001%);
  }
}

[data-areagrid~=xxl9], .areagrid-xxl9 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=xxl9], .areagrid-xxl9 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-areagrid~=xxl9], .areagrid-xxl9 {
    width: calc((100% / 12) * 9 + 0.00001%);
  }
}

[data-areagrid~=xxl10], .areagrid-xxl10 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=xxl10], .areagrid-xxl10 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-areagrid~=xxl10], .areagrid-xxl10 {
    width: calc((100% / 12) * 10 + 0.00001%);
  }
}

[data-areagrid~=xxl11], .areagrid-xxl11 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=xxl11], .areagrid-xxl11 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-areagrid~=xxl11], .areagrid-xxl11 {
    width: calc((100% / 12) * 11 + 0.00001%);
  }
}

[data-areagrid~=xxl12], .areagrid-xxl12 {
  width: 100%;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areagrid~=xxl12], .areagrid-xxl12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}
@media screen and (min-width: 1600px) {
  [data-areagrid~=xxl12], .areagrid-xxl12 {
    width: calc((100% / 12) * 12 + 0.00001%);
  }
}

[data-column], [data-innercolumn], [data-outercolumn], [data-areacolumn] {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}

[data-column~="1"], [data-column~=xs1], .column1, .column-xs1 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~="1"], [data-column~=xs1], .column1, .column-xs1 {
    width: 100%;
  }
}

[data-column~="2"], [data-column~=xs2], .column2, .column-xs2 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~="2"], [data-column~=xs2], .column2, .column-xs2 {
    width: 50%;
  }
}

[data-column~="3"], [data-column~=xs3], .column3, .column-xs3 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~="3"], [data-column~=xs3], .column3, .column-xs3 {
    width: 33.3333333333%;
  }
}

[data-column~="4"], [data-column~=xs4], .column4, .column-xs4 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~="4"], [data-column~=xs4], .column4, .column-xs4 {
    width: 25%;
  }
}

[data-column~="5"], [data-column~=xs5], .column5, .column-xs5 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~="5"], [data-column~=xs5], .column5, .column-xs5 {
    width: 20%;
  }
}

[data-column~="6"], [data-column~=xs6], .column6, .column-xs6 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~="6"], [data-column~=xs6], .column6, .column-xs6 {
    width: 16.6666666667%;
  }
}

[data-column~="7"], [data-column~=xs7], .column7, .column-xs7 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~="7"], [data-column~=xs7], .column7, .column-xs7 {
    width: 14.2857142857%;
  }
}

[data-column~="8"], [data-column~=xs8], .column8, .column-xs8 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~="8"], [data-column~=xs8], .column8, .column-xs8 {
    width: 12.5%;
  }
}

[data-column~="9"], [data-column~=xs9], .column9, .column-xs9 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~="9"], [data-column~=xs9], .column9, .column-xs9 {
    width: 11.1111111111%;
  }
}

[data-column~="10"], [data-column~=xs10], .column10, .column-xs10 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~="10"], [data-column~=xs10], .column10, .column-xs10 {
    width: 10%;
  }
}

[data-column~="11"], [data-column~=xs11], .column11, .column-xs11 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~="11"], [data-column~=xs11], .column11, .column-xs11 {
    width: 9.0909090909%;
  }
}

[data-column~="12"], [data-column~=xs12], .column12, .column-xs12 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~="12"], [data-column~=xs12], .column12, .column-xs12 {
    width: 8.3333333333%;
  }
}

[data-column~=sm1], .column-sm1 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=sm1], .column-sm1 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-column~=sm1], .column-sm1 {
    width: 100%;
  }
}

[data-column~=sm2], .column-sm2 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=sm2], .column-sm2 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-column~=sm2], .column-sm2 {
    width: 50%;
  }
}

[data-column~=sm3], .column-sm3 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=sm3], .column-sm3 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-column~=sm3], .column-sm3 {
    width: 33.3333333333%;
  }
}

[data-column~=sm4], .column-sm4 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=sm4], .column-sm4 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-column~=sm4], .column-sm4 {
    width: 25%;
  }
}

[data-column~=sm5], .column-sm5 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=sm5], .column-sm5 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-column~=sm5], .column-sm5 {
    width: 20%;
  }
}

[data-column~=sm6], .column-sm6 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=sm6], .column-sm6 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-column~=sm6], .column-sm6 {
    width: 16.6666666667%;
  }
}

[data-column~=sm7], .column-sm7 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=sm7], .column-sm7 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-column~=sm7], .column-sm7 {
    width: 14.2857142857%;
  }
}

[data-column~=sm8], .column-sm8 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=sm8], .column-sm8 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-column~=sm8], .column-sm8 {
    width: 12.5%;
  }
}

[data-column~=sm9], .column-sm9 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=sm9], .column-sm9 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-column~=sm9], .column-sm9 {
    width: 11.1111111111%;
  }
}

[data-column~=sm10], .column-sm10 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=sm10], .column-sm10 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-column~=sm10], .column-sm10 {
    width: 10%;
  }
}

[data-column~=sm11], .column-sm11 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=sm11], .column-sm11 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-column~=sm11], .column-sm11 {
    width: 9.0909090909%;
  }
}

[data-column~=sm12], .column-sm12 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=sm12], .column-sm12 {
    width: 100%;
  }
}

[data-column~=md1], .column-md1 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=md1], .column-md1 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-column~=md1], .column-md1 {
    width: 100%;
  }
}

[data-column~=md2], .column-md2 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=md2], .column-md2 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-column~=md2], .column-md2 {
    width: 50%;
  }
}

[data-column~=md3], .column-md3 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=md3], .column-md3 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-column~=md3], .column-md3 {
    width: 33.3333333333%;
  }
}

[data-column~=md4], .column-md4 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=md4], .column-md4 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-column~=md4], .column-md4 {
    width: 25%;
  }
}

[data-column~=md5], .column-md5 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=md5], .column-md5 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-column~=md5], .column-md5 {
    width: 20%;
  }
}

[data-column~=md6], .column-md6 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=md6], .column-md6 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-column~=md6], .column-md6 {
    width: 16.6666666667%;
  }
}

[data-column~=md7], .column-md7 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=md7], .column-md7 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-column~=md7], .column-md7 {
    width: 14.2857142857%;
  }
}

[data-column~=md8], .column-md8 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=md8], .column-md8 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-column~=md8], .column-md8 {
    width: 12.5%;
  }
}

[data-column~=md9], .column-md9 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=md9], .column-md9 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-column~=md9], .column-md9 {
    width: 11.1111111111%;
  }
}

[data-column~=md10], .column-md10 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=md10], .column-md10 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-column~=md10], .column-md10 {
    width: 10%;
  }
}

[data-column~=md11], .column-md11 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=md11], .column-md11 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-column~=md11], .column-md11 {
    width: 9.0909090909%;
  }
}

[data-column~=md12], .column-md12 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=md12], .column-md12 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-column~=md12], .column-md12 {
    width: 8.3333333333%;
  }
}

[data-column~=lg1], .column-lg1 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=lg1], .column-lg1 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-column~=lg1], .column-lg1 {
    width: 100%;
  }
}

[data-column~=lg2], .column-lg2 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=lg2], .column-lg2 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-column~=lg2], .column-lg2 {
    width: 50%;
  }
}

[data-column~=lg3], .column-lg3 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=lg3], .column-lg3 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-column~=lg3], .column-lg3 {
    width: 33.3333333333%;
  }
}

[data-column~=lg4], .column-lg4 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=lg4], .column-lg4 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-column~=lg4], .column-lg4 {
    width: 25%;
  }
}

[data-column~=lg5], .column-lg5 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=lg5], .column-lg5 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-column~=lg5], .column-lg5 {
    width: 20%;
  }
}

[data-column~=lg6], .column-lg6 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=lg6], .column-lg6 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-column~=lg6], .column-lg6 {
    width: 16.6666666667%;
  }
}

[data-column~=lg7], .column-lg7 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=lg7], .column-lg7 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-column~=lg7], .column-lg7 {
    width: 14.2857142857%;
  }
}

[data-column~=lg8], .column-lg8 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=lg8], .column-lg8 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-column~=lg8], .column-lg8 {
    width: 12.5%;
  }
}

[data-column~=lg9], .column-lg9 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=lg9], .column-lg9 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-column~=lg9], .column-lg9 {
    width: 11.1111111111%;
  }
}

[data-column~=lg10], .column-lg10 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=lg10], .column-lg10 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-column~=lg10], .column-lg10 {
    width: 10%;
  }
}

[data-column~=lg11], .column-lg11 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=lg11], .column-lg11 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-column~=lg11], .column-lg11 {
    width: 9.0909090909%;
  }
}

[data-column~=lg12], .column-lg12 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=lg12], .column-lg12 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-column~=lg12], .column-lg12 {
    width: 8.3333333333%;
  }
}

[data-column~=xl1], .column-xl1 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=xl1], .column-xl1 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-column~=xl1], .column-xl1 {
    width: 100%;
  }
}

[data-column~=xl2], .column-xl2 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=xl2], .column-xl2 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-column~=xl2], .column-xl2 {
    width: 50%;
  }
}

[data-column~=xl3], .column-xl3 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=xl3], .column-xl3 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-column~=xl3], .column-xl3 {
    width: 33.3333333333%;
  }
}

[data-column~=xl4], .column-xl4 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=xl4], .column-xl4 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-column~=xl4], .column-xl4 {
    width: 25%;
  }
}

[data-column~=xl5], .column-xl5 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=xl5], .column-xl5 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-column~=xl5], .column-xl5 {
    width: 20%;
  }
}

[data-column~=xl6], .column-xl6 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=xl6], .column-xl6 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-column~=xl6], .column-xl6 {
    width: 16.6666666667%;
  }
}

[data-column~=xl7], .column-xl7 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=xl7], .column-xl7 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-column~=xl7], .column-xl7 {
    width: 14.2857142857%;
  }
}

[data-column~=xl8], .column-xl8 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=xl8], .column-xl8 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-column~=xl8], .column-xl8 {
    width: 12.5%;
  }
}

[data-column~=xl9], .column-xl9 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=xl9], .column-xl9 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-column~=xl9], .column-xl9 {
    width: 11.1111111111%;
  }
}

[data-column~=xl10], .column-xl10 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=xl10], .column-xl10 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-column~=xl10], .column-xl10 {
    width: 10%;
  }
}

[data-column~=xl11], .column-xl11 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=xl11], .column-xl11 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-column~=xl11], .column-xl11 {
    width: 9.0909090909%;
  }
}

[data-column~=xl12], .column-xl12 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=xl12], .column-xl12 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-column~=xl12], .column-xl12 {
    width: 8.3333333333%;
  }
}

[data-column~=xxl1], .column-xxl1 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=xxl1], .column-xxl1 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-column~=xxl1], .column-xxl1 {
    width: 100%;
  }
}

[data-column~=xxl2], .column-xxl2 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=xxl2], .column-xxl2 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-column~=xxl2], .column-xxl2 {
    width: 50%;
  }
}

[data-column~=xxl3], .column-xxl3 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=xxl3], .column-xxl3 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-column~=xxl3], .column-xxl3 {
    width: 33.3333333333%;
  }
}

[data-column~=xxl4], .column-xxl4 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=xxl4], .column-xxl4 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-column~=xxl4], .column-xxl4 {
    width: 25%;
  }
}

[data-column~=xxl5], .column-xxl5 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=xxl5], .column-xxl5 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-column~=xxl5], .column-xxl5 {
    width: 20%;
  }
}

[data-column~=xxl6], .column-xxl6 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=xxl6], .column-xxl6 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-column~=xxl6], .column-xxl6 {
    width: 16.6666666667%;
  }
}

[data-column~=xxl7], .column-xxl7 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=xxl7], .column-xxl7 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-column~=xxl7], .column-xxl7 {
    width: 14.2857142857%;
  }
}

[data-column~=xxl8], .column-xxl8 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=xxl8], .column-xxl8 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-column~=xxl8], .column-xxl8 {
    width: 12.5%;
  }
}

[data-column~=xxl9], .column-xxl9 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=xxl9], .column-xxl9 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-column~=xxl9], .column-xxl9 {
    width: 11.1111111111%;
  }
}

[data-column~=xxl10], .column-xxl10 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=xxl10], .column-xxl10 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-column~=xxl10], .column-xxl10 {
    width: 10%;
  }
}

[data-column~=xxl11], .column-xxl11 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=xxl11], .column-xxl11 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-column~=xxl11], .column-xxl11 {
    width: 9.0909090909%;
  }
}

[data-column~=xxl12], .column-xxl12 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-column~=xxl12], .column-xxl12 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-column~=xxl12], .column-xxl12 {
    width: 8.3333333333%;
  }
}

[data-innercolumn~="1"], [data-innercolumn~=xs1], .innercolumn1, .innercolumn-xs1 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~="1"], [data-innercolumn~=xs1], .innercolumn1, .innercolumn-xs1 {
    width: 100%;
  }
}

[data-innercolumn~="2"], [data-innercolumn~=xs2], .innercolumn2, .innercolumn-xs2 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~="2"], [data-innercolumn~=xs2], .innercolumn2, .innercolumn-xs2 {
    width: 50%;
  }
}

[data-innercolumn~="3"], [data-innercolumn~=xs3], .innercolumn3, .innercolumn-xs3 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~="3"], [data-innercolumn~=xs3], .innercolumn3, .innercolumn-xs3 {
    width: 33.3333333333%;
  }
}

[data-innercolumn~="4"], [data-innercolumn~=xs4], .innercolumn4, .innercolumn-xs4 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~="4"], [data-innercolumn~=xs4], .innercolumn4, .innercolumn-xs4 {
    width: 25%;
  }
}

[data-innercolumn~="5"], [data-innercolumn~=xs5], .innercolumn5, .innercolumn-xs5 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~="5"], [data-innercolumn~=xs5], .innercolumn5, .innercolumn-xs5 {
    width: 20%;
  }
}

[data-innercolumn~="6"], [data-innercolumn~=xs6], .innercolumn6, .innercolumn-xs6 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~="6"], [data-innercolumn~=xs6], .innercolumn6, .innercolumn-xs6 {
    width: 16.6666666667%;
  }
}

[data-innercolumn~="7"], [data-innercolumn~=xs7], .innercolumn7, .innercolumn-xs7 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~="7"], [data-innercolumn~=xs7], .innercolumn7, .innercolumn-xs7 {
    width: 14.2857142857%;
  }
}

[data-innercolumn~="8"], [data-innercolumn~=xs8], .innercolumn8, .innercolumn-xs8 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~="8"], [data-innercolumn~=xs8], .innercolumn8, .innercolumn-xs8 {
    width: 12.5%;
  }
}

[data-innercolumn~="9"], [data-innercolumn~=xs9], .innercolumn9, .innercolumn-xs9 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~="9"], [data-innercolumn~=xs9], .innercolumn9, .innercolumn-xs9 {
    width: 11.1111111111%;
  }
}

[data-innercolumn~="10"], [data-innercolumn~=xs10], .innercolumn10, .innercolumn-xs10 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~="10"], [data-innercolumn~=xs10], .innercolumn10, .innercolumn-xs10 {
    width: 10%;
  }
}

[data-innercolumn~="11"], [data-innercolumn~=xs11], .innercolumn11, .innercolumn-xs11 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~="11"], [data-innercolumn~=xs11], .innercolumn11, .innercolumn-xs11 {
    width: 9.0909090909%;
  }
}

[data-innercolumn~="12"], [data-innercolumn~=xs12], .innercolumn12, .innercolumn-xs12 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~="12"], [data-innercolumn~=xs12], .innercolumn12, .innercolumn-xs12 {
    width: 8.3333333333%;
  }
}

[data-innercolumn~=sm1], .innercolumn-sm1 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=sm1], .innercolumn-sm1 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-innercolumn~=sm1], .innercolumn-sm1 {
    width: 100%;
  }
}

[data-innercolumn~=sm2], .innercolumn-sm2 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=sm2], .innercolumn-sm2 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-innercolumn~=sm2], .innercolumn-sm2 {
    width: 50%;
  }
}

[data-innercolumn~=sm3], .innercolumn-sm3 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=sm3], .innercolumn-sm3 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-innercolumn~=sm3], .innercolumn-sm3 {
    width: 33.3333333333%;
  }
}

[data-innercolumn~=sm4], .innercolumn-sm4 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=sm4], .innercolumn-sm4 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-innercolumn~=sm4], .innercolumn-sm4 {
    width: 25%;
  }
}

[data-innercolumn~=sm5], .innercolumn-sm5 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=sm5], .innercolumn-sm5 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-innercolumn~=sm5], .innercolumn-sm5 {
    width: 20%;
  }
}

[data-innercolumn~=sm6], .innercolumn-sm6 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=sm6], .innercolumn-sm6 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-innercolumn~=sm6], .innercolumn-sm6 {
    width: 16.6666666667%;
  }
}

[data-innercolumn~=sm7], .innercolumn-sm7 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=sm7], .innercolumn-sm7 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-innercolumn~=sm7], .innercolumn-sm7 {
    width: 14.2857142857%;
  }
}

[data-innercolumn~=sm8], .innercolumn-sm8 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=sm8], .innercolumn-sm8 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-innercolumn~=sm8], .innercolumn-sm8 {
    width: 12.5%;
  }
}

[data-innercolumn~=sm9], .innercolumn-sm9 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=sm9], .innercolumn-sm9 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-innercolumn~=sm9], .innercolumn-sm9 {
    width: 11.1111111111%;
  }
}

[data-innercolumn~=sm10], .innercolumn-sm10 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=sm10], .innercolumn-sm10 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-innercolumn~=sm10], .innercolumn-sm10 {
    width: 10%;
  }
}

[data-innercolumn~=sm11], .innercolumn-sm11 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=sm11], .innercolumn-sm11 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-innercolumn~=sm11], .innercolumn-sm11 {
    width: 9.0909090909%;
  }
}

[data-innercolumn~=sm12], .innercolumn-sm12 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=sm12], .innercolumn-sm12 {
    width: 100%;
  }
}

[data-innercolumn~=md1], .innercolumn-md1 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=md1], .innercolumn-md1 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-innercolumn~=md1], .innercolumn-md1 {
    width: 100%;
  }
}

[data-innercolumn~=md2], .innercolumn-md2 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=md2], .innercolumn-md2 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-innercolumn~=md2], .innercolumn-md2 {
    width: 50%;
  }
}

[data-innercolumn~=md3], .innercolumn-md3 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=md3], .innercolumn-md3 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-innercolumn~=md3], .innercolumn-md3 {
    width: 33.3333333333%;
  }
}

[data-innercolumn~=md4], .innercolumn-md4 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=md4], .innercolumn-md4 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-innercolumn~=md4], .innercolumn-md4 {
    width: 25%;
  }
}

[data-innercolumn~=md5], .innercolumn-md5 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=md5], .innercolumn-md5 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-innercolumn~=md5], .innercolumn-md5 {
    width: 20%;
  }
}

[data-innercolumn~=md6], .innercolumn-md6 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=md6], .innercolumn-md6 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-innercolumn~=md6], .innercolumn-md6 {
    width: 16.6666666667%;
  }
}

[data-innercolumn~=md7], .innercolumn-md7 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=md7], .innercolumn-md7 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-innercolumn~=md7], .innercolumn-md7 {
    width: 14.2857142857%;
  }
}

[data-innercolumn~=md8], .innercolumn-md8 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=md8], .innercolumn-md8 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-innercolumn~=md8], .innercolumn-md8 {
    width: 12.5%;
  }
}

[data-innercolumn~=md9], .innercolumn-md9 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=md9], .innercolumn-md9 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-innercolumn~=md9], .innercolumn-md9 {
    width: 11.1111111111%;
  }
}

[data-innercolumn~=md10], .innercolumn-md10 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=md10], .innercolumn-md10 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-innercolumn~=md10], .innercolumn-md10 {
    width: 10%;
  }
}

[data-innercolumn~=md11], .innercolumn-md11 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=md11], .innercolumn-md11 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-innercolumn~=md11], .innercolumn-md11 {
    width: 9.0909090909%;
  }
}

[data-innercolumn~=md12], .innercolumn-md12 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=md12], .innercolumn-md12 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-innercolumn~=md12], .innercolumn-md12 {
    width: 8.3333333333%;
  }
}

[data-innercolumn~=lg1], .innercolumn-lg1 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=lg1], .innercolumn-lg1 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-innercolumn~=lg1], .innercolumn-lg1 {
    width: 100%;
  }
}

[data-innercolumn~=lg2], .innercolumn-lg2 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=lg2], .innercolumn-lg2 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-innercolumn~=lg2], .innercolumn-lg2 {
    width: 50%;
  }
}

[data-innercolumn~=lg3], .innercolumn-lg3 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=lg3], .innercolumn-lg3 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-innercolumn~=lg3], .innercolumn-lg3 {
    width: 33.3333333333%;
  }
}

[data-innercolumn~=lg4], .innercolumn-lg4 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=lg4], .innercolumn-lg4 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-innercolumn~=lg4], .innercolumn-lg4 {
    width: 25%;
  }
}

[data-innercolumn~=lg5], .innercolumn-lg5 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=lg5], .innercolumn-lg5 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-innercolumn~=lg5], .innercolumn-lg5 {
    width: 20%;
  }
}

[data-innercolumn~=lg6], .innercolumn-lg6 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=lg6], .innercolumn-lg6 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-innercolumn~=lg6], .innercolumn-lg6 {
    width: 16.6666666667%;
  }
}

[data-innercolumn~=lg7], .innercolumn-lg7 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=lg7], .innercolumn-lg7 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-innercolumn~=lg7], .innercolumn-lg7 {
    width: 14.2857142857%;
  }
}

[data-innercolumn~=lg8], .innercolumn-lg8 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=lg8], .innercolumn-lg8 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-innercolumn~=lg8], .innercolumn-lg8 {
    width: 12.5%;
  }
}

[data-innercolumn~=lg9], .innercolumn-lg9 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=lg9], .innercolumn-lg9 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-innercolumn~=lg9], .innercolumn-lg9 {
    width: 11.1111111111%;
  }
}

[data-innercolumn~=lg10], .innercolumn-lg10 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=lg10], .innercolumn-lg10 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-innercolumn~=lg10], .innercolumn-lg10 {
    width: 10%;
  }
}

[data-innercolumn~=lg11], .innercolumn-lg11 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=lg11], .innercolumn-lg11 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-innercolumn~=lg11], .innercolumn-lg11 {
    width: 9.0909090909%;
  }
}

[data-innercolumn~=lg12], .innercolumn-lg12 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=lg12], .innercolumn-lg12 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-innercolumn~=lg12], .innercolumn-lg12 {
    width: 8.3333333333%;
  }
}

[data-innercolumn~=xl1], .innercolumn-xl1 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=xl1], .innercolumn-xl1 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-innercolumn~=xl1], .innercolumn-xl1 {
    width: 100%;
  }
}

[data-innercolumn~=xl2], .innercolumn-xl2 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=xl2], .innercolumn-xl2 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-innercolumn~=xl2], .innercolumn-xl2 {
    width: 50%;
  }
}

[data-innercolumn~=xl3], .innercolumn-xl3 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=xl3], .innercolumn-xl3 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-innercolumn~=xl3], .innercolumn-xl3 {
    width: 33.3333333333%;
  }
}

[data-innercolumn~=xl4], .innercolumn-xl4 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=xl4], .innercolumn-xl4 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-innercolumn~=xl4], .innercolumn-xl4 {
    width: 25%;
  }
}

[data-innercolumn~=xl5], .innercolumn-xl5 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=xl5], .innercolumn-xl5 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-innercolumn~=xl5], .innercolumn-xl5 {
    width: 20%;
  }
}

[data-innercolumn~=xl6], .innercolumn-xl6 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=xl6], .innercolumn-xl6 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-innercolumn~=xl6], .innercolumn-xl6 {
    width: 16.6666666667%;
  }
}

[data-innercolumn~=xl7], .innercolumn-xl7 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=xl7], .innercolumn-xl7 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-innercolumn~=xl7], .innercolumn-xl7 {
    width: 14.2857142857%;
  }
}

[data-innercolumn~=xl8], .innercolumn-xl8 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=xl8], .innercolumn-xl8 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-innercolumn~=xl8], .innercolumn-xl8 {
    width: 12.5%;
  }
}

[data-innercolumn~=xl9], .innercolumn-xl9 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=xl9], .innercolumn-xl9 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-innercolumn~=xl9], .innercolumn-xl9 {
    width: 11.1111111111%;
  }
}

[data-innercolumn~=xl10], .innercolumn-xl10 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=xl10], .innercolumn-xl10 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-innercolumn~=xl10], .innercolumn-xl10 {
    width: 10%;
  }
}

[data-innercolumn~=xl11], .innercolumn-xl11 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=xl11], .innercolumn-xl11 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-innercolumn~=xl11], .innercolumn-xl11 {
    width: 9.0909090909%;
  }
}

[data-innercolumn~=xl12], .innercolumn-xl12 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=xl12], .innercolumn-xl12 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-innercolumn~=xl12], .innercolumn-xl12 {
    width: 8.3333333333%;
  }
}

[data-innercolumn~=xxl1], .innercolumn-xxl1 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=xxl1], .innercolumn-xxl1 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-innercolumn~=xxl1], .innercolumn-xxl1 {
    width: 100%;
  }
}

[data-innercolumn~=xxl2], .innercolumn-xxl2 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=xxl2], .innercolumn-xxl2 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-innercolumn~=xxl2], .innercolumn-xxl2 {
    width: 50%;
  }
}

[data-innercolumn~=xxl3], .innercolumn-xxl3 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=xxl3], .innercolumn-xxl3 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-innercolumn~=xxl3], .innercolumn-xxl3 {
    width: 33.3333333333%;
  }
}

[data-innercolumn~=xxl4], .innercolumn-xxl4 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=xxl4], .innercolumn-xxl4 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-innercolumn~=xxl4], .innercolumn-xxl4 {
    width: 25%;
  }
}

[data-innercolumn~=xxl5], .innercolumn-xxl5 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=xxl5], .innercolumn-xxl5 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-innercolumn~=xxl5], .innercolumn-xxl5 {
    width: 20%;
  }
}

[data-innercolumn~=xxl6], .innercolumn-xxl6 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=xxl6], .innercolumn-xxl6 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-innercolumn~=xxl6], .innercolumn-xxl6 {
    width: 16.6666666667%;
  }
}

[data-innercolumn~=xxl7], .innercolumn-xxl7 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=xxl7], .innercolumn-xxl7 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-innercolumn~=xxl7], .innercolumn-xxl7 {
    width: 14.2857142857%;
  }
}

[data-innercolumn~=xxl8], .innercolumn-xxl8 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=xxl8], .innercolumn-xxl8 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-innercolumn~=xxl8], .innercolumn-xxl8 {
    width: 12.5%;
  }
}

[data-innercolumn~=xxl9], .innercolumn-xxl9 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=xxl9], .innercolumn-xxl9 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-innercolumn~=xxl9], .innercolumn-xxl9 {
    width: 11.1111111111%;
  }
}

[data-innercolumn~=xxl10], .innercolumn-xxl10 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=xxl10], .innercolumn-xxl10 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-innercolumn~=xxl10], .innercolumn-xxl10 {
    width: 10%;
  }
}

[data-innercolumn~=xxl11], .innercolumn-xxl11 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=xxl11], .innercolumn-xxl11 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-innercolumn~=xxl11], .innercolumn-xxl11 {
    width: 9.0909090909%;
  }
}

[data-innercolumn~=xxl12], .innercolumn-xxl12 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 0;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-innercolumn~=xxl12], .innercolumn-xxl12 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-innercolumn~=xxl12], .innercolumn-xxl12 {
    width: 8.3333333333%;
  }
}

[data-outercolumn~="1"], [data-outercolumn~=xs1], .outercolumn1, .outercolumn-xs1 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~="1"], [data-outercolumn~=xs1], .outercolumn1, .outercolumn-xs1 {
    width: 100%;
  }
}

[data-outercolumn~="2"], [data-outercolumn~=xs2], .outercolumn2, .outercolumn-xs2 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~="2"], [data-outercolumn~=xs2], .outercolumn2, .outercolumn-xs2 {
    width: 50%;
  }
}

[data-outercolumn~="3"], [data-outercolumn~=xs3], .outercolumn3, .outercolumn-xs3 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~="3"], [data-outercolumn~=xs3], .outercolumn3, .outercolumn-xs3 {
    width: 33.3333333333%;
  }
}

[data-outercolumn~="4"], [data-outercolumn~=xs4], .outercolumn4, .outercolumn-xs4 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~="4"], [data-outercolumn~=xs4], .outercolumn4, .outercolumn-xs4 {
    width: 25%;
  }
}

[data-outercolumn~="5"], [data-outercolumn~=xs5], .outercolumn5, .outercolumn-xs5 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~="5"], [data-outercolumn~=xs5], .outercolumn5, .outercolumn-xs5 {
    width: 20%;
  }
}

[data-outercolumn~="6"], [data-outercolumn~=xs6], .outercolumn6, .outercolumn-xs6 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~="6"], [data-outercolumn~=xs6], .outercolumn6, .outercolumn-xs6 {
    width: 16.6666666667%;
  }
}

[data-outercolumn~="7"], [data-outercolumn~=xs7], .outercolumn7, .outercolumn-xs7 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~="7"], [data-outercolumn~=xs7], .outercolumn7, .outercolumn-xs7 {
    width: 14.2857142857%;
  }
}

[data-outercolumn~="8"], [data-outercolumn~=xs8], .outercolumn8, .outercolumn-xs8 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~="8"], [data-outercolumn~=xs8], .outercolumn8, .outercolumn-xs8 {
    width: 12.5%;
  }
}

[data-outercolumn~="9"], [data-outercolumn~=xs9], .outercolumn9, .outercolumn-xs9 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~="9"], [data-outercolumn~=xs9], .outercolumn9, .outercolumn-xs9 {
    width: 11.1111111111%;
  }
}

[data-outercolumn~="10"], [data-outercolumn~=xs10], .outercolumn10, .outercolumn-xs10 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~="10"], [data-outercolumn~=xs10], .outercolumn10, .outercolumn-xs10 {
    width: 10%;
  }
}

[data-outercolumn~="11"], [data-outercolumn~=xs11], .outercolumn11, .outercolumn-xs11 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~="11"], [data-outercolumn~=xs11], .outercolumn11, .outercolumn-xs11 {
    width: 9.0909090909%;
  }
}

[data-outercolumn~="12"], [data-outercolumn~=xs12], .outercolumn12, .outercolumn-xs12 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~="12"], [data-outercolumn~=xs12], .outercolumn12, .outercolumn-xs12 {
    width: 8.3333333333%;
  }
}

[data-outercolumn~=sm1], .outercolumn-sm1 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=sm1], .outercolumn-sm1 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-outercolumn~=sm1], .outercolumn-sm1 {
    width: 100%;
  }
}

[data-outercolumn~=sm2], .outercolumn-sm2 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=sm2], .outercolumn-sm2 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-outercolumn~=sm2], .outercolumn-sm2 {
    width: 50%;
  }
}

[data-outercolumn~=sm3], .outercolumn-sm3 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=sm3], .outercolumn-sm3 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-outercolumn~=sm3], .outercolumn-sm3 {
    width: 33.3333333333%;
  }
}

[data-outercolumn~=sm4], .outercolumn-sm4 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=sm4], .outercolumn-sm4 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-outercolumn~=sm4], .outercolumn-sm4 {
    width: 25%;
  }
}

[data-outercolumn~=sm5], .outercolumn-sm5 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=sm5], .outercolumn-sm5 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-outercolumn~=sm5], .outercolumn-sm5 {
    width: 20%;
  }
}

[data-outercolumn~=sm6], .outercolumn-sm6 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=sm6], .outercolumn-sm6 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-outercolumn~=sm6], .outercolumn-sm6 {
    width: 16.6666666667%;
  }
}

[data-outercolumn~=sm7], .outercolumn-sm7 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=sm7], .outercolumn-sm7 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-outercolumn~=sm7], .outercolumn-sm7 {
    width: 14.2857142857%;
  }
}

[data-outercolumn~=sm8], .outercolumn-sm8 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=sm8], .outercolumn-sm8 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-outercolumn~=sm8], .outercolumn-sm8 {
    width: 12.5%;
  }
}

[data-outercolumn~=sm9], .outercolumn-sm9 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=sm9], .outercolumn-sm9 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-outercolumn~=sm9], .outercolumn-sm9 {
    width: 11.1111111111%;
  }
}

[data-outercolumn~=sm10], .outercolumn-sm10 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=sm10], .outercolumn-sm10 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-outercolumn~=sm10], .outercolumn-sm10 {
    width: 10%;
  }
}

[data-outercolumn~=sm11], .outercolumn-sm11 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=sm11], .outercolumn-sm11 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-outercolumn~=sm11], .outercolumn-sm11 {
    width: 9.0909090909%;
  }
}

[data-outercolumn~=sm12], .outercolumn-sm12 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=sm12], .outercolumn-sm12 {
    width: 100%;
  }
}

[data-outercolumn~=md1], .outercolumn-md1 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=md1], .outercolumn-md1 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-outercolumn~=md1], .outercolumn-md1 {
    width: 100%;
  }
}

[data-outercolumn~=md2], .outercolumn-md2 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=md2], .outercolumn-md2 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-outercolumn~=md2], .outercolumn-md2 {
    width: 50%;
  }
}

[data-outercolumn~=md3], .outercolumn-md3 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=md3], .outercolumn-md3 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-outercolumn~=md3], .outercolumn-md3 {
    width: 33.3333333333%;
  }
}

[data-outercolumn~=md4], .outercolumn-md4 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=md4], .outercolumn-md4 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-outercolumn~=md4], .outercolumn-md4 {
    width: 25%;
  }
}

[data-outercolumn~=md5], .outercolumn-md5 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=md5], .outercolumn-md5 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-outercolumn~=md5], .outercolumn-md5 {
    width: 20%;
  }
}

[data-outercolumn~=md6], .outercolumn-md6 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=md6], .outercolumn-md6 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-outercolumn~=md6], .outercolumn-md6 {
    width: 16.6666666667%;
  }
}

[data-outercolumn~=md7], .outercolumn-md7 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=md7], .outercolumn-md7 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-outercolumn~=md7], .outercolumn-md7 {
    width: 14.2857142857%;
  }
}

[data-outercolumn~=md8], .outercolumn-md8 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=md8], .outercolumn-md8 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-outercolumn~=md8], .outercolumn-md8 {
    width: 12.5%;
  }
}

[data-outercolumn~=md9], .outercolumn-md9 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=md9], .outercolumn-md9 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-outercolumn~=md9], .outercolumn-md9 {
    width: 11.1111111111%;
  }
}

[data-outercolumn~=md10], .outercolumn-md10 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=md10], .outercolumn-md10 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-outercolumn~=md10], .outercolumn-md10 {
    width: 10%;
  }
}

[data-outercolumn~=md11], .outercolumn-md11 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=md11], .outercolumn-md11 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-outercolumn~=md11], .outercolumn-md11 {
    width: 9.0909090909%;
  }
}

[data-outercolumn~=md12], .outercolumn-md12 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=md12], .outercolumn-md12 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-outercolumn~=md12], .outercolumn-md12 {
    width: 8.3333333333%;
  }
}

[data-outercolumn~=lg1], .outercolumn-lg1 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=lg1], .outercolumn-lg1 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-outercolumn~=lg1], .outercolumn-lg1 {
    width: 100%;
  }
}

[data-outercolumn~=lg2], .outercolumn-lg2 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=lg2], .outercolumn-lg2 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-outercolumn~=lg2], .outercolumn-lg2 {
    width: 50%;
  }
}

[data-outercolumn~=lg3], .outercolumn-lg3 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=lg3], .outercolumn-lg3 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-outercolumn~=lg3], .outercolumn-lg3 {
    width: 33.3333333333%;
  }
}

[data-outercolumn~=lg4], .outercolumn-lg4 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=lg4], .outercolumn-lg4 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-outercolumn~=lg4], .outercolumn-lg4 {
    width: 25%;
  }
}

[data-outercolumn~=lg5], .outercolumn-lg5 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=lg5], .outercolumn-lg5 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-outercolumn~=lg5], .outercolumn-lg5 {
    width: 20%;
  }
}

[data-outercolumn~=lg6], .outercolumn-lg6 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=lg6], .outercolumn-lg6 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-outercolumn~=lg6], .outercolumn-lg6 {
    width: 16.6666666667%;
  }
}

[data-outercolumn~=lg7], .outercolumn-lg7 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=lg7], .outercolumn-lg7 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-outercolumn~=lg7], .outercolumn-lg7 {
    width: 14.2857142857%;
  }
}

[data-outercolumn~=lg8], .outercolumn-lg8 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=lg8], .outercolumn-lg8 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-outercolumn~=lg8], .outercolumn-lg8 {
    width: 12.5%;
  }
}

[data-outercolumn~=lg9], .outercolumn-lg9 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=lg9], .outercolumn-lg9 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-outercolumn~=lg9], .outercolumn-lg9 {
    width: 11.1111111111%;
  }
}

[data-outercolumn~=lg10], .outercolumn-lg10 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=lg10], .outercolumn-lg10 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-outercolumn~=lg10], .outercolumn-lg10 {
    width: 10%;
  }
}

[data-outercolumn~=lg11], .outercolumn-lg11 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=lg11], .outercolumn-lg11 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-outercolumn~=lg11], .outercolumn-lg11 {
    width: 9.0909090909%;
  }
}

[data-outercolumn~=lg12], .outercolumn-lg12 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=lg12], .outercolumn-lg12 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-outercolumn~=lg12], .outercolumn-lg12 {
    width: 8.3333333333%;
  }
}

[data-outercolumn~=xl1], .outercolumn-xl1 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=xl1], .outercolumn-xl1 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-outercolumn~=xl1], .outercolumn-xl1 {
    width: 100%;
  }
}

[data-outercolumn~=xl2], .outercolumn-xl2 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=xl2], .outercolumn-xl2 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-outercolumn~=xl2], .outercolumn-xl2 {
    width: 50%;
  }
}

[data-outercolumn~=xl3], .outercolumn-xl3 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=xl3], .outercolumn-xl3 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-outercolumn~=xl3], .outercolumn-xl3 {
    width: 33.3333333333%;
  }
}

[data-outercolumn~=xl4], .outercolumn-xl4 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=xl4], .outercolumn-xl4 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-outercolumn~=xl4], .outercolumn-xl4 {
    width: 25%;
  }
}

[data-outercolumn~=xl5], .outercolumn-xl5 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=xl5], .outercolumn-xl5 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-outercolumn~=xl5], .outercolumn-xl5 {
    width: 20%;
  }
}

[data-outercolumn~=xl6], .outercolumn-xl6 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=xl6], .outercolumn-xl6 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-outercolumn~=xl6], .outercolumn-xl6 {
    width: 16.6666666667%;
  }
}

[data-outercolumn~=xl7], .outercolumn-xl7 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=xl7], .outercolumn-xl7 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-outercolumn~=xl7], .outercolumn-xl7 {
    width: 14.2857142857%;
  }
}

[data-outercolumn~=xl8], .outercolumn-xl8 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=xl8], .outercolumn-xl8 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-outercolumn~=xl8], .outercolumn-xl8 {
    width: 12.5%;
  }
}

[data-outercolumn~=xl9], .outercolumn-xl9 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=xl9], .outercolumn-xl9 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-outercolumn~=xl9], .outercolumn-xl9 {
    width: 11.1111111111%;
  }
}

[data-outercolumn~=xl10], .outercolumn-xl10 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=xl10], .outercolumn-xl10 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-outercolumn~=xl10], .outercolumn-xl10 {
    width: 10%;
  }
}

[data-outercolumn~=xl11], .outercolumn-xl11 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=xl11], .outercolumn-xl11 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-outercolumn~=xl11], .outercolumn-xl11 {
    width: 9.0909090909%;
  }
}

[data-outercolumn~=xl12], .outercolumn-xl12 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=xl12], .outercolumn-xl12 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-outercolumn~=xl12], .outercolumn-xl12 {
    width: 8.3333333333%;
  }
}

[data-outercolumn~=xxl1], .outercolumn-xxl1 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=xxl1], .outercolumn-xxl1 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-outercolumn~=xxl1], .outercolumn-xxl1 {
    width: 100%;
  }
}

[data-outercolumn~=xxl2], .outercolumn-xxl2 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=xxl2], .outercolumn-xxl2 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-outercolumn~=xxl2], .outercolumn-xxl2 {
    width: 50%;
  }
}

[data-outercolumn~=xxl3], .outercolumn-xxl3 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=xxl3], .outercolumn-xxl3 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-outercolumn~=xxl3], .outercolumn-xxl3 {
    width: 33.3333333333%;
  }
}

[data-outercolumn~=xxl4], .outercolumn-xxl4 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=xxl4], .outercolumn-xxl4 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-outercolumn~=xxl4], .outercolumn-xxl4 {
    width: 25%;
  }
}

[data-outercolumn~=xxl5], .outercolumn-xxl5 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=xxl5], .outercolumn-xxl5 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-outercolumn~=xxl5], .outercolumn-xxl5 {
    width: 20%;
  }
}

[data-outercolumn~=xxl6], .outercolumn-xxl6 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=xxl6], .outercolumn-xxl6 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-outercolumn~=xxl6], .outercolumn-xxl6 {
    width: 16.6666666667%;
  }
}

[data-outercolumn~=xxl7], .outercolumn-xxl7 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=xxl7], .outercolumn-xxl7 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-outercolumn~=xxl7], .outercolumn-xxl7 {
    width: 14.2857142857%;
  }
}

[data-outercolumn~=xxl8], .outercolumn-xxl8 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=xxl8], .outercolumn-xxl8 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-outercolumn~=xxl8], .outercolumn-xxl8 {
    width: 12.5%;
  }
}

[data-outercolumn~=xxl9], .outercolumn-xxl9 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=xxl9], .outercolumn-xxl9 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-outercolumn~=xxl9], .outercolumn-xxl9 {
    width: 11.1111111111%;
  }
}

[data-outercolumn~=xxl10], .outercolumn-xxl10 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=xxl10], .outercolumn-xxl10 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-outercolumn~=xxl10], .outercolumn-xxl10 {
    width: 10%;
  }
}

[data-outercolumn~=xxl11], .outercolumn-xxl11 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=xxl11], .outercolumn-xxl11 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-outercolumn~=xxl11], .outercolumn-xxl11 {
    width: 9.0909090909%;
  }
}

[data-outercolumn~=xxl12], .outercolumn-xxl12 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 0;
}
@media screen and (min-width: 320px) {
  [data-outercolumn~=xxl12], .outercolumn-xxl12 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-outercolumn~=xxl12], .outercolumn-xxl12 {
    width: 8.3333333333%;
  }
}

[data-areacolumn~="1"], [data-areacolumn~=xs1], .areacolumn1, .areacolumn-xs1 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~="1"], [data-areacolumn~=xs1], .areacolumn1, .areacolumn-xs1 {
    width: 100%;
  }
}

[data-areacolumn~="2"], [data-areacolumn~=xs2], .areacolumn2, .areacolumn-xs2 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~="2"], [data-areacolumn~=xs2], .areacolumn2, .areacolumn-xs2 {
    width: 50%;
  }
}

[data-areacolumn~="3"], [data-areacolumn~=xs3], .areacolumn3, .areacolumn-xs3 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~="3"], [data-areacolumn~=xs3], .areacolumn3, .areacolumn-xs3 {
    width: 33.3333333333%;
  }
}

[data-areacolumn~="4"], [data-areacolumn~=xs4], .areacolumn4, .areacolumn-xs4 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~="4"], [data-areacolumn~=xs4], .areacolumn4, .areacolumn-xs4 {
    width: 25%;
  }
}

[data-areacolumn~="5"], [data-areacolumn~=xs5], .areacolumn5, .areacolumn-xs5 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~="5"], [data-areacolumn~=xs5], .areacolumn5, .areacolumn-xs5 {
    width: 20%;
  }
}

[data-areacolumn~="6"], [data-areacolumn~=xs6], .areacolumn6, .areacolumn-xs6 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~="6"], [data-areacolumn~=xs6], .areacolumn6, .areacolumn-xs6 {
    width: 16.6666666667%;
  }
}

[data-areacolumn~="7"], [data-areacolumn~=xs7], .areacolumn7, .areacolumn-xs7 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~="7"], [data-areacolumn~=xs7], .areacolumn7, .areacolumn-xs7 {
    width: 14.2857142857%;
  }
}

[data-areacolumn~="8"], [data-areacolumn~=xs8], .areacolumn8, .areacolumn-xs8 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~="8"], [data-areacolumn~=xs8], .areacolumn8, .areacolumn-xs8 {
    width: 12.5%;
  }
}

[data-areacolumn~="9"], [data-areacolumn~=xs9], .areacolumn9, .areacolumn-xs9 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~="9"], [data-areacolumn~=xs9], .areacolumn9, .areacolumn-xs9 {
    width: 11.1111111111%;
  }
}

[data-areacolumn~="10"], [data-areacolumn~=xs10], .areacolumn10, .areacolumn-xs10 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~="10"], [data-areacolumn~=xs10], .areacolumn10, .areacolumn-xs10 {
    width: 10%;
  }
}

[data-areacolumn~="11"], [data-areacolumn~=xs11], .areacolumn11, .areacolumn-xs11 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~="11"], [data-areacolumn~=xs11], .areacolumn11, .areacolumn-xs11 {
    width: 9.0909090909%;
  }
}

[data-areacolumn~="12"], [data-areacolumn~=xs12], .areacolumn12, .areacolumn-xs12 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~="12"], [data-areacolumn~=xs12], .areacolumn12, .areacolumn-xs12 {
    width: 8.3333333333%;
  }
}

[data-areacolumn~=sm1], .areacolumn-sm1 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=sm1], .areacolumn-sm1 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-areacolumn~=sm1], .areacolumn-sm1 {
    width: 100%;
  }
}

[data-areacolumn~=sm2], .areacolumn-sm2 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=sm2], .areacolumn-sm2 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-areacolumn~=sm2], .areacolumn-sm2 {
    width: 50%;
  }
}

[data-areacolumn~=sm3], .areacolumn-sm3 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=sm3], .areacolumn-sm3 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-areacolumn~=sm3], .areacolumn-sm3 {
    width: 33.3333333333%;
  }
}

[data-areacolumn~=sm4], .areacolumn-sm4 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=sm4], .areacolumn-sm4 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-areacolumn~=sm4], .areacolumn-sm4 {
    width: 25%;
  }
}

[data-areacolumn~=sm5], .areacolumn-sm5 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=sm5], .areacolumn-sm5 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-areacolumn~=sm5], .areacolumn-sm5 {
    width: 20%;
  }
}

[data-areacolumn~=sm6], .areacolumn-sm6 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=sm6], .areacolumn-sm6 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-areacolumn~=sm6], .areacolumn-sm6 {
    width: 16.6666666667%;
  }
}

[data-areacolumn~=sm7], .areacolumn-sm7 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=sm7], .areacolumn-sm7 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-areacolumn~=sm7], .areacolumn-sm7 {
    width: 14.2857142857%;
  }
}

[data-areacolumn~=sm8], .areacolumn-sm8 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=sm8], .areacolumn-sm8 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-areacolumn~=sm8], .areacolumn-sm8 {
    width: 12.5%;
  }
}

[data-areacolumn~=sm9], .areacolumn-sm9 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=sm9], .areacolumn-sm9 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-areacolumn~=sm9], .areacolumn-sm9 {
    width: 11.1111111111%;
  }
}

[data-areacolumn~=sm10], .areacolumn-sm10 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=sm10], .areacolumn-sm10 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-areacolumn~=sm10], .areacolumn-sm10 {
    width: 10%;
  }
}

[data-areacolumn~=sm11], .areacolumn-sm11 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=sm11], .areacolumn-sm11 {
    width: 100%;
  }
}
@media screen and (min-width: 480px) {
  [data-areacolumn~=sm11], .areacolumn-sm11 {
    width: 9.0909090909%;
  }
}

[data-areacolumn~=sm12], .areacolumn-sm12 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=sm12], .areacolumn-sm12 {
    width: 100%;
  }
}

[data-areacolumn~=md1], .areacolumn-md1 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=md1], .areacolumn-md1 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-areacolumn~=md1], .areacolumn-md1 {
    width: 100%;
  }
}

[data-areacolumn~=md2], .areacolumn-md2 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=md2], .areacolumn-md2 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-areacolumn~=md2], .areacolumn-md2 {
    width: 50%;
  }
}

[data-areacolumn~=md3], .areacolumn-md3 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=md3], .areacolumn-md3 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-areacolumn~=md3], .areacolumn-md3 {
    width: 33.3333333333%;
  }
}

[data-areacolumn~=md4], .areacolumn-md4 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=md4], .areacolumn-md4 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-areacolumn~=md4], .areacolumn-md4 {
    width: 25%;
  }
}

[data-areacolumn~=md5], .areacolumn-md5 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=md5], .areacolumn-md5 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-areacolumn~=md5], .areacolumn-md5 {
    width: 20%;
  }
}

[data-areacolumn~=md6], .areacolumn-md6 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=md6], .areacolumn-md6 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-areacolumn~=md6], .areacolumn-md6 {
    width: 16.6666666667%;
  }
}

[data-areacolumn~=md7], .areacolumn-md7 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=md7], .areacolumn-md7 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-areacolumn~=md7], .areacolumn-md7 {
    width: 14.2857142857%;
  }
}

[data-areacolumn~=md8], .areacolumn-md8 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=md8], .areacolumn-md8 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-areacolumn~=md8], .areacolumn-md8 {
    width: 12.5%;
  }
}

[data-areacolumn~=md9], .areacolumn-md9 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=md9], .areacolumn-md9 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-areacolumn~=md9], .areacolumn-md9 {
    width: 11.1111111111%;
  }
}

[data-areacolumn~=md10], .areacolumn-md10 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=md10], .areacolumn-md10 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-areacolumn~=md10], .areacolumn-md10 {
    width: 10%;
  }
}

[data-areacolumn~=md11], .areacolumn-md11 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=md11], .areacolumn-md11 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-areacolumn~=md11], .areacolumn-md11 {
    width: 9.0909090909%;
  }
}

[data-areacolumn~=md12], .areacolumn-md12 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=md12], .areacolumn-md12 {
    width: 100%;
  }
}
@media screen and (min-width: 720px) {
  [data-areacolumn~=md12], .areacolumn-md12 {
    width: 8.3333333333%;
  }
}

[data-areacolumn~=lg1], .areacolumn-lg1 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=lg1], .areacolumn-lg1 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-areacolumn~=lg1], .areacolumn-lg1 {
    width: 100%;
  }
}

[data-areacolumn~=lg2], .areacolumn-lg2 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=lg2], .areacolumn-lg2 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-areacolumn~=lg2], .areacolumn-lg2 {
    width: 50%;
  }
}

[data-areacolumn~=lg3], .areacolumn-lg3 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=lg3], .areacolumn-lg3 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-areacolumn~=lg3], .areacolumn-lg3 {
    width: 33.3333333333%;
  }
}

[data-areacolumn~=lg4], .areacolumn-lg4 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=lg4], .areacolumn-lg4 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-areacolumn~=lg4], .areacolumn-lg4 {
    width: 25%;
  }
}

[data-areacolumn~=lg5], .areacolumn-lg5 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=lg5], .areacolumn-lg5 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-areacolumn~=lg5], .areacolumn-lg5 {
    width: 20%;
  }
}

[data-areacolumn~=lg6], .areacolumn-lg6 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=lg6], .areacolumn-lg6 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-areacolumn~=lg6], .areacolumn-lg6 {
    width: 16.6666666667%;
  }
}

[data-areacolumn~=lg7], .areacolumn-lg7 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=lg7], .areacolumn-lg7 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-areacolumn~=lg7], .areacolumn-lg7 {
    width: 14.2857142857%;
  }
}

[data-areacolumn~=lg8], .areacolumn-lg8 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=lg8], .areacolumn-lg8 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-areacolumn~=lg8], .areacolumn-lg8 {
    width: 12.5%;
  }
}

[data-areacolumn~=lg9], .areacolumn-lg9 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=lg9], .areacolumn-lg9 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-areacolumn~=lg9], .areacolumn-lg9 {
    width: 11.1111111111%;
  }
}

[data-areacolumn~=lg10], .areacolumn-lg10 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=lg10], .areacolumn-lg10 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-areacolumn~=lg10], .areacolumn-lg10 {
    width: 10%;
  }
}

[data-areacolumn~=lg11], .areacolumn-lg11 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=lg11], .areacolumn-lg11 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-areacolumn~=lg11], .areacolumn-lg11 {
    width: 9.0909090909%;
  }
}

[data-areacolumn~=lg12], .areacolumn-lg12 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=lg12], .areacolumn-lg12 {
    width: 100%;
  }
}
@media screen and (min-width: 960px) {
  [data-areacolumn~=lg12], .areacolumn-lg12 {
    width: 8.3333333333%;
  }
}

[data-areacolumn~=xl1], .areacolumn-xl1 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=xl1], .areacolumn-xl1 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-areacolumn~=xl1], .areacolumn-xl1 {
    width: 100%;
  }
}

[data-areacolumn~=xl2], .areacolumn-xl2 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=xl2], .areacolumn-xl2 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-areacolumn~=xl2], .areacolumn-xl2 {
    width: 50%;
  }
}

[data-areacolumn~=xl3], .areacolumn-xl3 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=xl3], .areacolumn-xl3 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-areacolumn~=xl3], .areacolumn-xl3 {
    width: 33.3333333333%;
  }
}

[data-areacolumn~=xl4], .areacolumn-xl4 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=xl4], .areacolumn-xl4 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-areacolumn~=xl4], .areacolumn-xl4 {
    width: 25%;
  }
}

[data-areacolumn~=xl5], .areacolumn-xl5 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=xl5], .areacolumn-xl5 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-areacolumn~=xl5], .areacolumn-xl5 {
    width: 20%;
  }
}

[data-areacolumn~=xl6], .areacolumn-xl6 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=xl6], .areacolumn-xl6 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-areacolumn~=xl6], .areacolumn-xl6 {
    width: 16.6666666667%;
  }
}

[data-areacolumn~=xl7], .areacolumn-xl7 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=xl7], .areacolumn-xl7 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-areacolumn~=xl7], .areacolumn-xl7 {
    width: 14.2857142857%;
  }
}

[data-areacolumn~=xl8], .areacolumn-xl8 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=xl8], .areacolumn-xl8 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-areacolumn~=xl8], .areacolumn-xl8 {
    width: 12.5%;
  }
}

[data-areacolumn~=xl9], .areacolumn-xl9 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=xl9], .areacolumn-xl9 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-areacolumn~=xl9], .areacolumn-xl9 {
    width: 11.1111111111%;
  }
}

[data-areacolumn~=xl10], .areacolumn-xl10 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=xl10], .areacolumn-xl10 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-areacolumn~=xl10], .areacolumn-xl10 {
    width: 10%;
  }
}

[data-areacolumn~=xl11], .areacolumn-xl11 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=xl11], .areacolumn-xl11 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-areacolumn~=xl11], .areacolumn-xl11 {
    width: 9.0909090909%;
  }
}

[data-areacolumn~=xl12], .areacolumn-xl12 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=xl12], .areacolumn-xl12 {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  [data-areacolumn~=xl12], .areacolumn-xl12 {
    width: 8.3333333333%;
  }
}

[data-areacolumn~=xxl1], .areacolumn-xxl1 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=xxl1], .areacolumn-xxl1 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-areacolumn~=xxl1], .areacolumn-xxl1 {
    width: 100%;
  }
}

[data-areacolumn~=xxl2], .areacolumn-xxl2 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=xxl2], .areacolumn-xxl2 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-areacolumn~=xxl2], .areacolumn-xxl2 {
    width: 50%;
  }
}

[data-areacolumn~=xxl3], .areacolumn-xxl3 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=xxl3], .areacolumn-xxl3 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-areacolumn~=xxl3], .areacolumn-xxl3 {
    width: 33.3333333333%;
  }
}

[data-areacolumn~=xxl4], .areacolumn-xxl4 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=xxl4], .areacolumn-xxl4 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-areacolumn~=xxl4], .areacolumn-xxl4 {
    width: 25%;
  }
}

[data-areacolumn~=xxl5], .areacolumn-xxl5 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=xxl5], .areacolumn-xxl5 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-areacolumn~=xxl5], .areacolumn-xxl5 {
    width: 20%;
  }
}

[data-areacolumn~=xxl6], .areacolumn-xxl6 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=xxl6], .areacolumn-xxl6 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-areacolumn~=xxl6], .areacolumn-xxl6 {
    width: 16.6666666667%;
  }
}

[data-areacolumn~=xxl7], .areacolumn-xxl7 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=xxl7], .areacolumn-xxl7 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-areacolumn~=xxl7], .areacolumn-xxl7 {
    width: 14.2857142857%;
  }
}

[data-areacolumn~=xxl8], .areacolumn-xxl8 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=xxl8], .areacolumn-xxl8 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-areacolumn~=xxl8], .areacolumn-xxl8 {
    width: 12.5%;
  }
}

[data-areacolumn~=xxl9], .areacolumn-xxl9 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=xxl9], .areacolumn-xxl9 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-areacolumn~=xxl9], .areacolumn-xxl9 {
    width: 11.1111111111%;
  }
}

[data-areacolumn~=xxl10], .areacolumn-xxl10 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=xxl10], .areacolumn-xxl10 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-areacolumn~=xxl10], .areacolumn-xxl10 {
    width: 10%;
  }
}

[data-areacolumn~=xxl11], .areacolumn-xxl11 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=xxl11], .areacolumn-xxl11 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-areacolumn~=xxl11], .areacolumn-xxl11 {
    width: 9.0909090909%;
  }
}

[data-areacolumn~=xxl12], .areacolumn-xxl12 {
  display: flex;
  flex-flow: column wrap;
  flex-basis: auto;
  margin: 24px;
  padding: 24px;
}
@media screen and (min-width: 320px) {
  [data-areacolumn~=xxl12], .areacolumn-xxl12 {
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  [data-areacolumn~=xxl12], .areacolumn-xxl12 {
    width: 8.3333333333%;
  }
}

.width-px1 {
  width: 1px;
}
.width-px2 {
  width: 2px;
}
.width-px3 {
  width: 3px;
}
.width-xs1 {
  width: 4px;
}
.width-xs2 {
  width: 8px;
}
.width-xs3 {
  width: 12px;
}
.width-xs4 {
  width: 16px;
}
.width-sm1 {
  width: 20px;
}
.width-sm2 {
  width: 24px;
}
.width-sm3 {
  width: 28px;
}
.width-sm4 {
  width: 32px;
}
.width-md1 {
  width: 36px;
}
.width-md2 {
  width: 40px;
}
.width-md3 {
  width: 44px;
}
.width-md4 {
  width: 48px;
}
.width-lg1 {
  width: 52px;
}
.width-lg2 {
  width: 56px;
}
.width-lg3 {
  width: 60px;
}
.width-lg4 {
  width: 64px;
}
.width-xl1 {
  width: 68px;
}
.width-xl2 {
  width: 72px;
}
.width-xl3 {
  width: 76px;
}
.width-xl4 {
  width: 80px;
}
.width-xxl1 {
  width: 84px;
}
.width-xxl2 {
  width: 88px;
}
.width-xxl3 {
  width: 92px;
}
.width-xxl4 {
  width: 96px;
}
.width-xs {
  width: 4px;
}
.width-sm {
  width: 20px;
}
.width-md {
  width: 36px;
}
.width-lg {
  width: 52px;
}
.width-xl {
  width: 68px;
}
.width-xxl {
  width: 84px;
}
.w05 {
  width: 0.5em;
}
.w1 {
  width: 1em;
}
.w2 {
  width: 2em;
}
.w3 {
  width: 3em;
}
.w4 {
  width: 4em;
}
.w5 {
  width: 5em;
}
.w6 {
  width: 6em;
}
.w7 {
  width: 7em;
}
.w8 {
  width: 8em;
}
.w9 {
  width: 9em;
}
.w10 {
  width: 10em;
}
.w15 {
  width: 15em;
}
.w20 {
  width: 20em;
}
.w25 {
  width: 25em;
}
.w30 {
  width: 30em;
}
.w35 {
  width: 35em;
}
.w40 {
  width: 40em;
}
.w45 {
  width: 45em;
}
.w50 {
  width: 50em;
}
.w55 {
  width: 55em;
}
.w60 {
  width: 60em;
}
.w65 {
  width: 65em;
}
.w70 {
  width: 70em;
}
.w75 {
  width: 75em;
}
.w80 {
  width: 80em;
}
.w85 {
  width: 85em;
}
.w90 {
  width: 90em;
}
.w95 {
  width: 95em;
}
.w100 {
  width: 100%;
}
.width-half {
  width: 50%;
}

.mar-full-px1 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-px1 {
    margin: 1px;
  }
}

.mar-full-px2 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-px2 {
    margin: 2px;
  }
}

.mar-full-px3 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-px3 {
    margin: 3px;
  }
}

.mar-full-xs1 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-xs1 {
    margin: 4px;
  }
}

.mar-full-xs2 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-xs2 {
    margin: 8px;
  }
}

.mar-full-xs3 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-xs3 {
    margin: 12px;
  }
}

.mar-full-xs4 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-xs4 {
    margin: 16px;
  }
}

.mar-full-sm1 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-sm1 {
    margin: 20px;
  }
}

.mar-full-sm2 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-sm2 {
    margin: 24px;
  }
}

.mar-full-sm3 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-sm3 {
    margin: 28px;
  }
}

.mar-full-sm4 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-sm4 {
    margin: 32px;
  }
}

.mar-full-md1 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-md1 {
    margin: 36px;
  }
}

.mar-full-md2 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-md2 {
    margin: 40px;
  }
}

.mar-full-md3 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-md3 {
    margin: 44px;
  }
}

.mar-full-md4 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-md4 {
    margin: 48px;
  }
}

.mar-full-lg1 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-lg1 {
    margin: 52px;
  }
}

.mar-full-lg2 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-lg2 {
    margin: 56px;
  }
}

.mar-full-lg3 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-lg3 {
    margin: 60px;
  }
}

.mar-full-lg4 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-lg4 {
    margin: 64px;
  }
}

.mar-full-xl1 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-xl1 {
    margin: 68px;
  }
}

.mar-full-xl2 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-xl2 {
    margin: 72px;
  }
}

.mar-full-xl3 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-xl3 {
    margin: 76px;
  }
}

.mar-full-xl4 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-xl4 {
    margin: 80px;
  }
}

.mar-full-xxl1 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-xxl1 {
    margin: 84px;
  }
}

.mar-full-xxl2 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-xxl2 {
    margin: 88px;
  }
}

.mar-full-xxl3 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-xxl3 {
    margin: 92px;
  }
}

.mar-full-xxl4 {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-xxl4 {
    margin: 96px;
  }
}

.mar-full-xs {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-xs {
    margin: 4px;
  }
}

.mar-full-sm {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-sm {
    margin: 20px;
  }
}

.mar-full-md {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-md {
    margin: 36px;
  }
}

.mar-full-lg {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-lg {
    margin: 52px;
  }
}

.mar-full-xl {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-xl {
    margin: 68px;
  }
}

.mar-full-xxl {
  margin: 20px;
}
@media screen and (min-width: 480px) {
  .mar-full-xxl {
    margin: 84px;
  }
}

.mar-vert-px1 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-px1 {
    margin-top: 1px;
    padding-bottom: 1px;
  }
}

.mar-vert-px2 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-px2 {
    margin-top: 2px;
    padding-bottom: 2px;
  }
}

.mar-vert-px3 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-px3 {
    margin-top: 3px;
    padding-bottom: 3px;
  }
}

.mar-vert-xs1 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-xs1 {
    margin-top: 4px;
    padding-bottom: 4px;
  }
}

.mar-vert-xs2 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-xs2 {
    margin-top: 8px;
    padding-bottom: 8px;
  }
}

.mar-vert-xs3 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-xs3 {
    margin-top: 12px;
    padding-bottom: 12px;
  }
}

.mar-vert-xs4 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-xs4 {
    margin-top: 16px;
    padding-bottom: 16px;
  }
}

.mar-vert-sm1 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-sm1 {
    margin-top: 20px;
    padding-bottom: 20px;
  }
}

.mar-vert-sm2 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-sm2 {
    margin-top: 24px;
    padding-bottom: 24px;
  }
}

.mar-vert-sm3 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-sm3 {
    margin-top: 28px;
    padding-bottom: 28px;
  }
}

.mar-vert-sm4 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-sm4 {
    margin-top: 32px;
    padding-bottom: 32px;
  }
}

.mar-vert-md1 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-md1 {
    margin-top: 36px;
    padding-bottom: 36px;
  }
}

.mar-vert-md2 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-md2 {
    margin-top: 40px;
    padding-bottom: 40px;
  }
}

.mar-vert-md3 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-md3 {
    margin-top: 44px;
    padding-bottom: 44px;
  }
}

.mar-vert-md4 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-md4 {
    margin-top: 48px;
    padding-bottom: 48px;
  }
}

.mar-vert-lg1 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-lg1 {
    margin-top: 52px;
    padding-bottom: 52px;
  }
}

.mar-vert-lg2 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-lg2 {
    margin-top: 56px;
    padding-bottom: 56px;
  }
}

.mar-vert-lg3 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-lg3 {
    margin-top: 60px;
    padding-bottom: 60px;
  }
}

.mar-vert-lg4 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-lg4 {
    margin-top: 64px;
    padding-bottom: 64px;
  }
}

.mar-vert-xl1 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-xl1 {
    margin-top: 68px;
    padding-bottom: 68px;
  }
}

.mar-vert-xl2 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-xl2 {
    margin-top: 72px;
    padding-bottom: 72px;
  }
}

.mar-vert-xl3 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-xl3 {
    margin-top: 76px;
    padding-bottom: 76px;
  }
}

.mar-vert-xl4 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-xl4 {
    margin-top: 80px;
    padding-bottom: 80px;
  }
}

.mar-vert-xxl1 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-xxl1 {
    margin-top: 84px;
    padding-bottom: 84px;
  }
}

.mar-vert-xxl2 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-xxl2 {
    margin-top: 88px;
    padding-bottom: 88px;
  }
}

.mar-vert-xxl3 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-xxl3 {
    margin-top: 92px;
    padding-bottom: 92px;
  }
}

.mar-vert-xxl4 {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-xxl4 {
    margin-top: 96px;
    padding-bottom: 96px;
  }
}

.mar-vert-xs {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-xs {
    margin-top: 4px;
    padding-bottom: 4px;
  }
}

.mar-vert-sm {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-sm {
    margin-top: 20px;
    padding-bottom: 20px;
  }
}

.mar-vert-md {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-md {
    margin-top: 36px;
    padding-bottom: 36px;
  }
}

.mar-vert-lg {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-lg {
    margin-top: 52px;
    padding-bottom: 52px;
  }
}

.mar-vert-xl {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-xl {
    margin-top: 68px;
    padding-bottom: 68px;
  }
}

.mar-vert-xxl {
  margin-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-vert-xxl {
    margin-top: 84px;
    padding-bottom: 84px;
  }
}

.mar-horiz-px1 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-px1 {
    margin-left: 1px;
    padding-right: 1px;
  }
}

.mar-horiz-px2 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-px2 {
    margin-left: 2px;
    padding-right: 2px;
  }
}

.mar-horiz-px3 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-px3 {
    margin-left: 3px;
    padding-right: 3px;
  }
}

.mar-horiz-xs1 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-xs1 {
    margin-left: 4px;
    padding-right: 4px;
  }
}

.mar-horiz-xs2 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-xs2 {
    margin-left: 8px;
    padding-right: 8px;
  }
}

.mar-horiz-xs3 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-xs3 {
    margin-left: 12px;
    padding-right: 12px;
  }
}

.mar-horiz-xs4 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-xs4 {
    margin-left: 16px;
    padding-right: 16px;
  }
}

.mar-horiz-sm1 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-sm1 {
    margin-left: 20px;
    padding-right: 20px;
  }
}

.mar-horiz-sm2 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-sm2 {
    margin-left: 24px;
    padding-right: 24px;
  }
}

.mar-horiz-sm3 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-sm3 {
    margin-left: 28px;
    padding-right: 28px;
  }
}

.mar-horiz-sm4 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-sm4 {
    margin-left: 32px;
    padding-right: 32px;
  }
}

.mar-horiz-md1 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-md1 {
    margin-left: 36px;
    padding-right: 36px;
  }
}

.mar-horiz-md2 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-md2 {
    margin-left: 40px;
    padding-right: 40px;
  }
}

.mar-horiz-md3 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-md3 {
    margin-left: 44px;
    padding-right: 44px;
  }
}

.mar-horiz-md4 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-md4 {
    margin-left: 48px;
    padding-right: 48px;
  }
}

.mar-horiz-lg1 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-lg1 {
    margin-left: 52px;
    padding-right: 52px;
  }
}

.mar-horiz-lg2 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-lg2 {
    margin-left: 56px;
    padding-right: 56px;
  }
}

.mar-horiz-lg3 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-lg3 {
    margin-left: 60px;
    padding-right: 60px;
  }
}

.mar-horiz-lg4 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-lg4 {
    margin-left: 64px;
    padding-right: 64px;
  }
}

.mar-horiz-xl1 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-xl1 {
    margin-left: 68px;
    padding-right: 68px;
  }
}

.mar-horiz-xl2 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-xl2 {
    margin-left: 72px;
    padding-right: 72px;
  }
}

.mar-horiz-xl3 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-xl3 {
    margin-left: 76px;
    padding-right: 76px;
  }
}

.mar-horiz-xl4 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-xl4 {
    margin-left: 80px;
    padding-right: 80px;
  }
}

.mar-horiz-xxl1 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-xxl1 {
    margin-left: 84px;
    padding-right: 84px;
  }
}

.mar-horiz-xxl2 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-xxl2 {
    margin-left: 88px;
    padding-right: 88px;
  }
}

.mar-horiz-xxl3 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-xxl3 {
    margin-left: 92px;
    padding-right: 92px;
  }
}

.mar-horiz-xxl4 {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-xxl4 {
    margin-left: 96px;
    padding-right: 96px;
  }
}

.mar-horiz-xs {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-xs {
    margin-left: 4px;
    padding-right: 4px;
  }
}

.mar-horiz-sm {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-sm {
    margin-left: 20px;
    padding-right: 20px;
  }
}

.mar-horiz-md {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-md {
    margin-left: 36px;
    padding-right: 36px;
  }
}

.mar-horiz-lg {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-lg {
    margin-left: 52px;
    padding-right: 52px;
  }
}

.mar-horiz-xl {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-xl {
    margin-left: 68px;
    padding-right: 68px;
  }
}

.mar-horiz-xxl {
  margin-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-horiz-xxl {
    margin-left: 84px;
    padding-right: 84px;
  }
}

.mar-top-px1 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-px1 {
    margin-top: 1px;
  }
}

.mar-top-px2 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-px2 {
    margin-top: 2px;
  }
}

.mar-top-px3 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-px3 {
    margin-top: 3px;
  }
}

.mar-top-xs1 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-xs1 {
    margin-top: 4px;
  }
}

.mar-top-xs2 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-xs2 {
    margin-top: 8px;
  }
}

.mar-top-xs3 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-xs3 {
    margin-top: 12px;
  }
}

.mar-top-xs4 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-xs4 {
    margin-top: 16px;
  }
}

.mar-top-sm1 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-sm1 {
    margin-top: 20px;
  }
}

.mar-top-sm2 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-sm2 {
    margin-top: 24px;
  }
}

.mar-top-sm3 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-sm3 {
    margin-top: 28px;
  }
}

.mar-top-sm4 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-sm4 {
    margin-top: 32px;
  }
}

.mar-top-md1 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-md1 {
    margin-top: 36px;
  }
}

.mar-top-md2 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-md2 {
    margin-top: 40px;
  }
}

.mar-top-md3 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-md3 {
    margin-top: 44px;
  }
}

.mar-top-md4 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-md4 {
    margin-top: 48px;
  }
}

.mar-top-lg1 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-lg1 {
    margin-top: 52px;
  }
}

.mar-top-lg2 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-lg2 {
    margin-top: 56px;
  }
}

.mar-top-lg3 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-lg3 {
    margin-top: 60px;
  }
}

.mar-top-lg4 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-lg4 {
    margin-top: 64px;
  }
}

.mar-top-xl1 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-xl1 {
    margin-top: 68px;
  }
}

.mar-top-xl2 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-xl2 {
    margin-top: 72px;
  }
}

.mar-top-xl3 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-xl3 {
    margin-top: 76px;
  }
}

.mar-top-xl4 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-xl4 {
    margin-top: 80px;
  }
}

.mar-top-xxl1 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-xxl1 {
    margin-top: 84px;
  }
}

.mar-top-xxl2 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-xxl2 {
    margin-top: 88px;
  }
}

.mar-top-xxl3 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-xxl3 {
    margin-top: 92px;
  }
}

.mar-top-xxl4 {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-xxl4 {
    margin-top: 96px;
  }
}

.mar-top-xs {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-xs {
    margin-top: 4px;
  }
}

.mar-top-sm {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-sm {
    margin-top: 20px;
  }
}

.mar-top-md {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-md {
    margin-top: 36px;
  }
}

.mar-top-lg {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-lg {
    margin-top: 52px;
  }
}

.mar-top-xl {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-xl {
    margin-top: 68px;
  }
}

.mar-top-xxl {
  margin-top: 20px;
}
@media screen and (min-width: 480px) {
  .mar-top-xxl {
    margin-top: 84px;
  }
}

.mar-left-px1 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-px1 {
    margin-left: 1px;
  }
}

.mar-left-px2 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-px2 {
    margin-left: 2px;
  }
}

.mar-left-px3 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-px3 {
    margin-left: 3px;
  }
}

.mar-left-xs1 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-xs1 {
    margin-left: 4px;
  }
}

.mar-left-xs2 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-xs2 {
    margin-left: 8px;
  }
}

.mar-left-xs3 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-xs3 {
    margin-left: 12px;
  }
}

.mar-left-xs4 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-xs4 {
    margin-left: 16px;
  }
}

.mar-left-sm1 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-sm1 {
    margin-left: 20px;
  }
}

.mar-left-sm2 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-sm2 {
    margin-left: 24px;
  }
}

.mar-left-sm3 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-sm3 {
    margin-left: 28px;
  }
}

.mar-left-sm4 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-sm4 {
    margin-left: 32px;
  }
}

.mar-left-md1 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-md1 {
    margin-left: 36px;
  }
}

.mar-left-md2 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-md2 {
    margin-left: 40px;
  }
}

.mar-left-md3 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-md3 {
    margin-left: 44px;
  }
}

.mar-left-md4 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-md4 {
    margin-left: 48px;
  }
}

.mar-left-lg1 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-lg1 {
    margin-left: 52px;
  }
}

.mar-left-lg2 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-lg2 {
    margin-left: 56px;
  }
}

.mar-left-lg3 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-lg3 {
    margin-left: 60px;
  }
}

.mar-left-lg4 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-lg4 {
    margin-left: 64px;
  }
}

.mar-left-xl1 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-xl1 {
    margin-left: 68px;
  }
}

.mar-left-xl2 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-xl2 {
    margin-left: 72px;
  }
}

.mar-left-xl3 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-xl3 {
    margin-left: 76px;
  }
}

.mar-left-xl4 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-xl4 {
    margin-left: 80px;
  }
}

.mar-left-xxl1 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-xxl1 {
    margin-left: 84px;
  }
}

.mar-left-xxl2 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-xxl2 {
    margin-left: 88px;
  }
}

.mar-left-xxl3 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-xxl3 {
    margin-left: 92px;
  }
}

.mar-left-xxl4 {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-xxl4 {
    margin-left: 96px;
  }
}

.mar-left-xs {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-xs {
    margin-left: 4px;
  }
}

.mar-left-sm {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-sm {
    margin-left: 20px;
  }
}

.mar-left-md {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-md {
    margin-left: 36px;
  }
}

.mar-left-lg {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-lg {
    margin-left: 52px;
  }
}

.mar-left-xl {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-xl {
    margin-left: 68px;
  }
}

.mar-left-xxl {
  margin-left: 20px;
}
@media screen and (min-width: 480px) {
  .mar-left-xxl {
    margin-left: 84px;
  }
}

.mar-bottom-px1 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-px1 {
    margin-bottom: 1px;
  }
}

.mar-bottom-px2 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-px2 {
    margin-bottom: 2px;
  }
}

.mar-bottom-px3 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-px3 {
    margin-bottom: 3px;
  }
}

.mar-bottom-xs1 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-xs1 {
    margin-bottom: 4px;
  }
}

.mar-bottom-xs2 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-xs2 {
    margin-bottom: 8px;
  }
}

.mar-bottom-xs3 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-xs3 {
    margin-bottom: 12px;
  }
}

.mar-bottom-xs4 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-xs4 {
    margin-bottom: 16px;
  }
}

.mar-bottom-sm1 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-sm1 {
    margin-bottom: 20px;
  }
}

.mar-bottom-sm2 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-sm2 {
    margin-bottom: 24px;
  }
}

.mar-bottom-sm3 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-sm3 {
    margin-bottom: 28px;
  }
}

.mar-bottom-sm4 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-sm4 {
    margin-bottom: 32px;
  }
}

.mar-bottom-md1 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-md1 {
    margin-bottom: 36px;
  }
}

.mar-bottom-md2 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-md2 {
    margin-bottom: 40px;
  }
}

.mar-bottom-md3 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-md3 {
    margin-bottom: 44px;
  }
}

.mar-bottom-md4 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-md4 {
    margin-bottom: 48px;
  }
}

.mar-bottom-lg1 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-lg1 {
    margin-bottom: 52px;
  }
}

.mar-bottom-lg2 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-lg2 {
    margin-bottom: 56px;
  }
}

.mar-bottom-lg3 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-lg3 {
    margin-bottom: 60px;
  }
}

.mar-bottom-lg4 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-lg4 {
    margin-bottom: 64px;
  }
}

.mar-bottom-xl1 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-xl1 {
    margin-bottom: 68px;
  }
}

.mar-bottom-xl2 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-xl2 {
    margin-bottom: 72px;
  }
}

.mar-bottom-xl3 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-xl3 {
    margin-bottom: 76px;
  }
}

.mar-bottom-xl4 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-xl4 {
    margin-bottom: 80px;
  }
}

.mar-bottom-xxl1 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-xxl1 {
    margin-bottom: 84px;
  }
}

.mar-bottom-xxl2 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-xxl2 {
    margin-bottom: 88px;
  }
}

.mar-bottom-xxl3 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-xxl3 {
    margin-bottom: 92px;
  }
}

.mar-bottom-xxl4 {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-xxl4 {
    margin-bottom: 96px;
  }
}

.mar-bottom-xs {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-xs {
    margin-bottom: 4px;
  }
}

.mar-bottom-sm {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-sm {
    margin-bottom: 20px;
  }
}

.mar-bottom-md {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-md {
    margin-bottom: 36px;
  }
}

.mar-bottom-lg {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-lg {
    margin-bottom: 52px;
  }
}

.mar-bottom-xl {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-xl {
    margin-bottom: 68px;
  }
}

.mar-bottom-xxl {
  margin-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .mar-bottom-xxl {
    margin-bottom: 84px;
  }
}

.mar-right-px1 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-px1 {
    margin-right: 1px;
  }
}

.mar-right-px2 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-px2 {
    margin-right: 2px;
  }
}

.mar-right-px3 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-px3 {
    margin-right: 3px;
  }
}

.mar-right-xs1 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-xs1 {
    margin-right: 4px;
  }
}

.mar-right-xs2 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-xs2 {
    margin-right: 8px;
  }
}

.mar-right-xs3 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-xs3 {
    margin-right: 12px;
  }
}

.mar-right-xs4 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-xs4 {
    margin-right: 16px;
  }
}

.mar-right-sm1 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-sm1 {
    margin-right: 20px;
  }
}

.mar-right-sm2 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-sm2 {
    margin-right: 24px;
  }
}

.mar-right-sm3 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-sm3 {
    margin-right: 28px;
  }
}

.mar-right-sm4 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-sm4 {
    margin-right: 32px;
  }
}

.mar-right-md1 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-md1 {
    margin-right: 36px;
  }
}

.mar-right-md2 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-md2 {
    margin-right: 40px;
  }
}

.mar-right-md3 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-md3 {
    margin-right: 44px;
  }
}

.mar-right-md4 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-md4 {
    margin-right: 48px;
  }
}

.mar-right-lg1 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-lg1 {
    margin-right: 52px;
  }
}

.mar-right-lg2 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-lg2 {
    margin-right: 56px;
  }
}

.mar-right-lg3 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-lg3 {
    margin-right: 60px;
  }
}

.mar-right-lg4 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-lg4 {
    margin-right: 64px;
  }
}

.mar-right-xl1 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-xl1 {
    margin-right: 68px;
  }
}

.mar-right-xl2 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-xl2 {
    margin-right: 72px;
  }
}

.mar-right-xl3 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-xl3 {
    margin-right: 76px;
  }
}

.mar-right-xl4 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-xl4 {
    margin-right: 80px;
  }
}

.mar-right-xxl1 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-xxl1 {
    margin-right: 84px;
  }
}

.mar-right-xxl2 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-xxl2 {
    margin-right: 88px;
  }
}

.mar-right-xxl3 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-xxl3 {
    margin-right: 92px;
  }
}

.mar-right-xxl4 {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-xxl4 {
    margin-right: 96px;
  }
}

.mar-right-xs {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-xs {
    margin-right: 4px;
  }
}

.mar-right-sm {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-sm {
    margin-right: 20px;
  }
}

.mar-right-md {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-md {
    margin-right: 36px;
  }
}

.mar-right-lg {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-lg {
    margin-right: 52px;
  }
}

.mar-right-xl {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-xl {
    margin-right: 68px;
  }
}

.mar-right-xxl {
  margin-right: 20px;
}
@media screen and (min-width: 480px) {
  .mar-right-xxl {
    margin-right: 84px;
  }
}

.pad-full-px1 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-px1 {
    padding: 1px;
  }
}

.pad-full-px1--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-px1--child > * {
    padding: 1px;
  }
}

.pad-full-px2 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-px2 {
    padding: 2px;
  }
}

.pad-full-px2--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-px2--child > * {
    padding: 2px;
  }
}

.pad-full-px3 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-px3 {
    padding: 3px;
  }
}

.pad-full-px3--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-px3--child > * {
    padding: 3px;
  }
}

.pad-full-xs1 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xs1 {
    padding: 4px;
  }
}

.pad-full-xs1--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xs1--child > * {
    padding: 4px;
  }
}

.pad-full-xs2 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xs2 {
    padding: 8px;
  }
}

.pad-full-xs2--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xs2--child > * {
    padding: 8px;
  }
}

.pad-full-xs3 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xs3 {
    padding: 12px;
  }
}

.pad-full-xs3--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xs3--child > * {
    padding: 12px;
  }
}

.pad-full-xs4 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xs4 {
    padding: 16px;
  }
}

.pad-full-xs4--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xs4--child > * {
    padding: 16px;
  }
}

.pad-full-sm1 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-sm1 {
    padding: 20px;
  }
}

.pad-full-sm1--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-sm1--child > * {
    padding: 20px;
  }
}

.pad-full-sm2 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-sm2 {
    padding: 24px;
  }
}

.pad-full-sm2--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-sm2--child > * {
    padding: 24px;
  }
}

.pad-full-sm3 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-sm3 {
    padding: 28px;
  }
}

.pad-full-sm3--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-sm3--child > * {
    padding: 28px;
  }
}

.pad-full-sm4 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-sm4 {
    padding: 32px;
  }
}

.pad-full-sm4--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-sm4--child > * {
    padding: 32px;
  }
}

.pad-full-md1 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-md1 {
    padding: 36px;
  }
}

.pad-full-md1--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-md1--child > * {
    padding: 36px;
  }
}

.pad-full-md2 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-md2 {
    padding: 40px;
  }
}

.pad-full-md2--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-md2--child > * {
    padding: 40px;
  }
}

.pad-full-md3 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-md3 {
    padding: 44px;
  }
}

.pad-full-md3--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-md3--child > * {
    padding: 44px;
  }
}

.pad-full-md4 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-md4 {
    padding: 48px;
  }
}

.pad-full-md4--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-md4--child > * {
    padding: 48px;
  }
}

.pad-full-lg1 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-lg1 {
    padding: 52px;
  }
}

.pad-full-lg1--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-lg1--child > * {
    padding: 52px;
  }
}

.pad-full-lg2 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-lg2 {
    padding: 56px;
  }
}

.pad-full-lg2--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-lg2--child > * {
    padding: 56px;
  }
}

.pad-full-lg3 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-lg3 {
    padding: 60px;
  }
}

.pad-full-lg3--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-lg3--child > * {
    padding: 60px;
  }
}

.pad-full-lg4 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-lg4 {
    padding: 64px;
  }
}

.pad-full-lg4--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-lg4--child > * {
    padding: 64px;
  }
}

.pad-full-xl1 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xl1 {
    padding: 68px;
  }
}

.pad-full-xl1--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xl1--child > * {
    padding: 68px;
  }
}

.pad-full-xl2 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xl2 {
    padding: 72px;
  }
}

.pad-full-xl2--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xl2--child > * {
    padding: 72px;
  }
}

.pad-full-xl3 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xl3 {
    padding: 76px;
  }
}

.pad-full-xl3--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xl3--child > * {
    padding: 76px;
  }
}

.pad-full-xl4 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xl4 {
    padding: 80px;
  }
}

.pad-full-xl4--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xl4--child > * {
    padding: 80px;
  }
}

.pad-full-xxl1 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xxl1 {
    padding: 84px;
  }
}

.pad-full-xxl1--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xxl1--child > * {
    padding: 84px;
  }
}

.pad-full-xxl2 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xxl2 {
    padding: 88px;
  }
}

.pad-full-xxl2--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xxl2--child > * {
    padding: 88px;
  }
}

.pad-full-xxl3 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xxl3 {
    padding: 92px;
  }
}

.pad-full-xxl3--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xxl3--child > * {
    padding: 92px;
  }
}

.pad-full-xxl4 {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xxl4 {
    padding: 96px;
  }
}

.pad-full-xxl4--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xxl4--child > * {
    padding: 96px;
  }
}

.pad-full-xs {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xs {
    padding: 4px;
  }
}

.pad-full-xs--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xs--child > * {
    padding: 4px;
  }
}

.pad-full-sm {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-sm {
    padding: 20px;
  }
}

.pad-full-sm--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-sm--child > * {
    padding: 20px;
  }
}

.pad-full-md {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-md {
    padding: 36px;
  }
}

.pad-full-md--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-md--child > * {
    padding: 36px;
  }
}

.pad-full-lg {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-lg {
    padding: 52px;
  }
}

.pad-full-lg--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-lg--child > * {
    padding: 52px;
  }
}

.pad-full-xl {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xl {
    padding: 68px;
  }
}

.pad-full-xl--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xl--child > * {
    padding: 68px;
  }
}

.pad-full-xxl {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xxl {
    padding: 84px;
  }
}

.pad-full-xxl--child > * {
  padding: 20px;
}
@media screen and (min-width: 480px) {
  .pad-full-xxl--child > * {
    padding: 84px;
  }
}

.pad-vert-px1 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-px1 {
    padding-top: 1px;
    padding-bottom: 1px;
  }
}

.pad-vert-px1--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-px1--child > * {
    padding-top: 1px;
    padding-bottom: 1px;
  }
}

.pad-vert-px2 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-px2 {
    padding-top: 2px;
    padding-bottom: 2px;
  }
}

.pad-vert-px2--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-px2--child > * {
    padding-top: 2px;
    padding-bottom: 2px;
  }
}

.pad-vert-px3 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-px3 {
    padding-top: 3px;
    padding-bottom: 3px;
  }
}

.pad-vert-px3--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-px3--child > * {
    padding-top: 3px;
    padding-bottom: 3px;
  }
}

.pad-vert-xs1 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xs1 {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

.pad-vert-xs1--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xs1--child > * {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

.pad-vert-xs2 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xs2 {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

.pad-vert-xs2--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xs2--child > * {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

.pad-vert-xs3 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xs3 {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

.pad-vert-xs3--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xs3--child > * {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

.pad-vert-xs4 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xs4 {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

.pad-vert-xs4--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xs4--child > * {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

.pad-vert-sm1 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-sm1 {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

.pad-vert-sm1--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-sm1--child > * {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

.pad-vert-sm2 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-sm2 {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

.pad-vert-sm2--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-sm2--child > * {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

.pad-vert-sm3 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-sm3 {
    padding-top: 28px;
    padding-bottom: 28px;
  }
}

.pad-vert-sm3--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-sm3--child > * {
    padding-top: 28px;
    padding-bottom: 28px;
  }
}

.pad-vert-sm4 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-sm4 {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

.pad-vert-sm4--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-sm4--child > * {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

.pad-vert-md1 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-md1 {
    padding-top: 36px;
    padding-bottom: 36px;
  }
}

.pad-vert-md1--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-md1--child > * {
    padding-top: 36px;
    padding-bottom: 36px;
  }
}

.pad-vert-md2 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-md2 {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

.pad-vert-md2--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-md2--child > * {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

.pad-vert-md3 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-md3 {
    padding-top: 44px;
    padding-bottom: 44px;
  }
}

.pad-vert-md3--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-md3--child > * {
    padding-top: 44px;
    padding-bottom: 44px;
  }
}

.pad-vert-md4 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-md4 {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

.pad-vert-md4--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-md4--child > * {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

.pad-vert-lg1 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-lg1 {
    padding-top: 52px;
    padding-bottom: 52px;
  }
}

.pad-vert-lg1--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-lg1--child > * {
    padding-top: 52px;
    padding-bottom: 52px;
  }
}

.pad-vert-lg2 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-lg2 {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

.pad-vert-lg2--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-lg2--child > * {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

.pad-vert-lg3 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-lg3 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.pad-vert-lg3--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-lg3--child > * {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.pad-vert-lg4 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-lg4 {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

.pad-vert-lg4--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-lg4--child > * {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

.pad-vert-xl1 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xl1 {
    padding-top: 68px;
    padding-bottom: 68px;
  }
}

.pad-vert-xl1--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xl1--child > * {
    padding-top: 68px;
    padding-bottom: 68px;
  }
}

.pad-vert-xl2 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xl2 {
    padding-top: 72px;
    padding-bottom: 72px;
  }
}

.pad-vert-xl2--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xl2--child > * {
    padding-top: 72px;
    padding-bottom: 72px;
  }
}

.pad-vert-xl3 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xl3 {
    padding-top: 76px;
    padding-bottom: 76px;
  }
}

.pad-vert-xl3--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xl3--child > * {
    padding-top: 76px;
    padding-bottom: 76px;
  }
}

.pad-vert-xl4 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xl4 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.pad-vert-xl4--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xl4--child > * {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.pad-vert-xxl1 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xxl1 {
    padding-top: 84px;
    padding-bottom: 84px;
  }
}

.pad-vert-xxl1--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xxl1--child > * {
    padding-top: 84px;
    padding-bottom: 84px;
  }
}

.pad-vert-xxl2 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xxl2 {
    padding-top: 88px;
    padding-bottom: 88px;
  }
}

.pad-vert-xxl2--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xxl2--child > * {
    padding-top: 88px;
    padding-bottom: 88px;
  }
}

.pad-vert-xxl3 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xxl3 {
    padding-top: 92px;
    padding-bottom: 92px;
  }
}

.pad-vert-xxl3--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xxl3--child > * {
    padding-top: 92px;
    padding-bottom: 92px;
  }
}

.pad-vert-xxl4 {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xxl4 {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

.pad-vert-xxl4--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xxl4--child > * {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

.pad-vert-xs {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xs {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

.pad-vert-xs--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xs--child > * {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

.pad-vert-sm {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-sm {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

.pad-vert-sm--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-sm--child > * {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

.pad-vert-md {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-md {
    padding-top: 36px;
    padding-bottom: 36px;
  }
}

.pad-vert-md--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-md--child > * {
    padding-top: 36px;
    padding-bottom: 36px;
  }
}

.pad-vert-lg {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-lg {
    padding-top: 52px;
    padding-bottom: 52px;
  }
}

.pad-vert-lg--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-lg--child > * {
    padding-top: 52px;
    padding-bottom: 52px;
  }
}

.pad-vert-xl {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xl {
    padding-top: 68px;
    padding-bottom: 68px;
  }
}

.pad-vert-xl--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xl--child > * {
    padding-top: 68px;
    padding-bottom: 68px;
  }
}

.pad-vert-xxl {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xxl {
    padding-top: 84px;
    padding-bottom: 84px;
  }
}

.pad-vert-xxl--child > * {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-vert-xxl--child > * {
    padding-top: 84px;
    padding-bottom: 84px;
  }
}

.pad-horiz-px1 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-px1 {
    padding-left: 1px;
    padding-right: 1px;
  }
}

.pad-horiz-px1--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-px1--child > * {
    padding-left: 1px;
    padding-right: 1px;
  }
}

.pad-horiz-px2 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-px2 {
    padding-left: 2px;
    padding-right: 2px;
  }
}

.pad-horiz-px2--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-px2--child > * {
    padding-left: 2px;
    padding-right: 2px;
  }
}

.pad-horiz-px3 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-px3 {
    padding-left: 3px;
    padding-right: 3px;
  }
}

.pad-horiz-px3--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-px3--child > * {
    padding-left: 3px;
    padding-right: 3px;
  }
}

.pad-horiz-xs1 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xs1 {
    padding-left: 4px;
    padding-right: 4px;
  }
}

.pad-horiz-xs1--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xs1--child > * {
    padding-left: 4px;
    padding-right: 4px;
  }
}

.pad-horiz-xs2 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xs2 {
    padding-left: 8px;
    padding-right: 8px;
  }
}

.pad-horiz-xs2--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xs2--child > * {
    padding-left: 8px;
    padding-right: 8px;
  }
}

.pad-horiz-xs3 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xs3 {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.pad-horiz-xs3--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xs3--child > * {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.pad-horiz-xs4 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xs4 {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.pad-horiz-xs4--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xs4--child > * {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.pad-horiz-sm1 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-sm1 {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.pad-horiz-sm1--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-sm1--child > * {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.pad-horiz-sm2 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-sm2 {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.pad-horiz-sm2--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-sm2--child > * {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.pad-horiz-sm3 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-sm3 {
    padding-left: 28px;
    padding-right: 28px;
  }
}

.pad-horiz-sm3--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-sm3--child > * {
    padding-left: 28px;
    padding-right: 28px;
  }
}

.pad-horiz-sm4 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-sm4 {
    padding-left: 32px;
    padding-right: 32px;
  }
}

.pad-horiz-sm4--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-sm4--child > * {
    padding-left: 32px;
    padding-right: 32px;
  }
}

.pad-horiz-md1 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-md1 {
    padding-left: 36px;
    padding-right: 36px;
  }
}

.pad-horiz-md1--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-md1--child > * {
    padding-left: 36px;
    padding-right: 36px;
  }
}

.pad-horiz-md2 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-md2 {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.pad-horiz-md2--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-md2--child > * {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.pad-horiz-md3 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-md3 {
    padding-left: 44px;
    padding-right: 44px;
  }
}

.pad-horiz-md3--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-md3--child > * {
    padding-left: 44px;
    padding-right: 44px;
  }
}

.pad-horiz-md4 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-md4 {
    padding-left: 48px;
    padding-right: 48px;
  }
}

.pad-horiz-md4--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-md4--child > * {
    padding-left: 48px;
    padding-right: 48px;
  }
}

.pad-horiz-lg1 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-lg1 {
    padding-left: 52px;
    padding-right: 52px;
  }
}

.pad-horiz-lg1--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-lg1--child > * {
    padding-left: 52px;
    padding-right: 52px;
  }
}

.pad-horiz-lg2 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-lg2 {
    padding-left: 56px;
    padding-right: 56px;
  }
}

.pad-horiz-lg2--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-lg2--child > * {
    padding-left: 56px;
    padding-right: 56px;
  }
}

.pad-horiz-lg3 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-lg3 {
    padding-left: 60px;
    padding-right: 60px;
  }
}

.pad-horiz-lg3--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-lg3--child > * {
    padding-left: 60px;
    padding-right: 60px;
  }
}

.pad-horiz-lg4 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-lg4 {
    padding-left: 64px;
    padding-right: 64px;
  }
}

.pad-horiz-lg4--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-lg4--child > * {
    padding-left: 64px;
    padding-right: 64px;
  }
}

.pad-horiz-xl1 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xl1 {
    padding-left: 68px;
    padding-right: 68px;
  }
}

.pad-horiz-xl1--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xl1--child > * {
    padding-left: 68px;
    padding-right: 68px;
  }
}

.pad-horiz-xl2 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xl2 {
    padding-left: 72px;
    padding-right: 72px;
  }
}

.pad-horiz-xl2--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xl2--child > * {
    padding-left: 72px;
    padding-right: 72px;
  }
}

.pad-horiz-xl3 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xl3 {
    padding-left: 76px;
    padding-right: 76px;
  }
}

.pad-horiz-xl3--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xl3--child > * {
    padding-left: 76px;
    padding-right: 76px;
  }
}

.pad-horiz-xl4 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xl4 {
    padding-left: 80px;
    padding-right: 80px;
  }
}

.pad-horiz-xl4--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xl4--child > * {
    padding-left: 80px;
    padding-right: 80px;
  }
}

.pad-horiz-xxl1 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xxl1 {
    padding-left: 84px;
    padding-right: 84px;
  }
}

.pad-horiz-xxl1--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xxl1--child > * {
    padding-left: 84px;
    padding-right: 84px;
  }
}

.pad-horiz-xxl2 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xxl2 {
    padding-left: 88px;
    padding-right: 88px;
  }
}

.pad-horiz-xxl2--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xxl2--child > * {
    padding-left: 88px;
    padding-right: 88px;
  }
}

.pad-horiz-xxl3 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xxl3 {
    padding-left: 92px;
    padding-right: 92px;
  }
}

.pad-horiz-xxl3--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xxl3--child > * {
    padding-left: 92px;
    padding-right: 92px;
  }
}

.pad-horiz-xxl4 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xxl4 {
    padding-left: 96px;
    padding-right: 96px;
  }
}

.pad-horiz-xxl4--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xxl4--child > * {
    padding-left: 96px;
    padding-right: 96px;
  }
}

.pad-horiz-xs {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xs {
    padding-left: 4px;
    padding-right: 4px;
  }
}

.pad-horiz-xs--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xs--child > * {
    padding-left: 4px;
    padding-right: 4px;
  }
}

.pad-horiz-sm {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-sm {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.pad-horiz-sm--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-sm--child > * {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.pad-horiz-md {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-md {
    padding-left: 36px;
    padding-right: 36px;
  }
}

.pad-horiz-md--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-md--child > * {
    padding-left: 36px;
    padding-right: 36px;
  }
}

.pad-horiz-lg {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-lg {
    padding-left: 52px;
    padding-right: 52px;
  }
}

.pad-horiz-lg--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-lg--child > * {
    padding-left: 52px;
    padding-right: 52px;
  }
}

.pad-horiz-xl {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xl {
    padding-left: 68px;
    padding-right: 68px;
  }
}

.pad-horiz-xl--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xl--child > * {
    padding-left: 68px;
    padding-right: 68px;
  }
}

.pad-horiz-xxl {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xxl {
    padding-left: 84px;
    padding-right: 84px;
  }
}

.pad-horiz-xxl--child > * {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-horiz-xxl--child > * {
    padding-left: 84px;
    padding-right: 84px;
  }
}

.pad-top-px1 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-px1 {
    padding-top: 1px;
  }
}

.pad-top-px1--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-px1--child > * {
    padding-top: 1px;
  }
}

.pad-top-px2 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-px2 {
    padding-top: 2px;
  }
}

.pad-top-px2--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-px2--child > * {
    padding-top: 2px;
  }
}

.pad-top-px3 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-px3 {
    padding-top: 3px;
  }
}

.pad-top-px3--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-px3--child > * {
    padding-top: 3px;
  }
}

.pad-top-xs1 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xs1 {
    padding-top: 4px;
  }
}

.pad-top-xs1--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xs1--child > * {
    padding-top: 4px;
  }
}

.pad-top-xs2 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xs2 {
    padding-top: 8px;
  }
}

.pad-top-xs2--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xs2--child > * {
    padding-top: 8px;
  }
}

.pad-top-xs3 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xs3 {
    padding-top: 12px;
  }
}

.pad-top-xs3--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xs3--child > * {
    padding-top: 12px;
  }
}

.pad-top-xs4 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xs4 {
    padding-top: 16px;
  }
}

.pad-top-xs4--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xs4--child > * {
    padding-top: 16px;
  }
}

.pad-top-sm1 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-sm1 {
    padding-top: 20px;
  }
}

.pad-top-sm1--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-sm1--child > * {
    padding-top: 20px;
  }
}

.pad-top-sm2 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-sm2 {
    padding-top: 24px;
  }
}

.pad-top-sm2--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-sm2--child > * {
    padding-top: 24px;
  }
}

.pad-top-sm3 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-sm3 {
    padding-top: 28px;
  }
}

.pad-top-sm3--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-sm3--child > * {
    padding-top: 28px;
  }
}

.pad-top-sm4 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-sm4 {
    padding-top: 32px;
  }
}

.pad-top-sm4--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-sm4--child > * {
    padding-top: 32px;
  }
}

.pad-top-md1 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-md1 {
    padding-top: 36px;
  }
}

.pad-top-md1--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-md1--child > * {
    padding-top: 36px;
  }
}

.pad-top-md2 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-md2 {
    padding-top: 40px;
  }
}

.pad-top-md2--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-md2--child > * {
    padding-top: 40px;
  }
}

.pad-top-md3 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-md3 {
    padding-top: 44px;
  }
}

.pad-top-md3--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-md3--child > * {
    padding-top: 44px;
  }
}

.pad-top-md4 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-md4 {
    padding-top: 48px;
  }
}

.pad-top-md4--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-md4--child > * {
    padding-top: 48px;
  }
}

.pad-top-lg1 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-lg1 {
    padding-top: 52px;
  }
}

.pad-top-lg1--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-lg1--child > * {
    padding-top: 52px;
  }
}

.pad-top-lg2 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-lg2 {
    padding-top: 56px;
  }
}

.pad-top-lg2--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-lg2--child > * {
    padding-top: 56px;
  }
}

.pad-top-lg3 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-lg3 {
    padding-top: 60px;
  }
}

.pad-top-lg3--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-lg3--child > * {
    padding-top: 60px;
  }
}

.pad-top-lg4 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-lg4 {
    padding-top: 64px;
  }
}

.pad-top-lg4--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-lg4--child > * {
    padding-top: 64px;
  }
}

.pad-top-xl1 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xl1 {
    padding-top: 68px;
  }
}

.pad-top-xl1--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xl1--child > * {
    padding-top: 68px;
  }
}

.pad-top-xl2 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xl2 {
    padding-top: 72px;
  }
}

.pad-top-xl2--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xl2--child > * {
    padding-top: 72px;
  }
}

.pad-top-xl3 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xl3 {
    padding-top: 76px;
  }
}

.pad-top-xl3--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xl3--child > * {
    padding-top: 76px;
  }
}

.pad-top-xl4 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xl4 {
    padding-top: 80px;
  }
}

.pad-top-xl4--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xl4--child > * {
    padding-top: 80px;
  }
}

.pad-top-xxl1 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xxl1 {
    padding-top: 84px;
  }
}

.pad-top-xxl1--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xxl1--child > * {
    padding-top: 84px;
  }
}

.pad-top-xxl2 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xxl2 {
    padding-top: 88px;
  }
}

.pad-top-xxl2--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xxl2--child > * {
    padding-top: 88px;
  }
}

.pad-top-xxl3 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xxl3 {
    padding-top: 92px;
  }
}

.pad-top-xxl3--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xxl3--child > * {
    padding-top: 92px;
  }
}

.pad-top-xxl4 {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xxl4 {
    padding-top: 96px;
  }
}

.pad-top-xxl4--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xxl4--child > * {
    padding-top: 96px;
  }
}

.pad-top-xs {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xs {
    padding-top: 4px;
  }
}

.pad-top-xs--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xs--child > * {
    padding-top: 4px;
  }
}

.pad-top-sm {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-sm {
    padding-top: 20px;
  }
}

.pad-top-sm--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-sm--child > * {
    padding-top: 20px;
  }
}

.pad-top-md {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-md {
    padding-top: 36px;
  }
}

.pad-top-md--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-md--child > * {
    padding-top: 36px;
  }
}

.pad-top-lg {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-lg {
    padding-top: 52px;
  }
}

.pad-top-lg--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-lg--child > * {
    padding-top: 52px;
  }
}

.pad-top-xl {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xl {
    padding-top: 68px;
  }
}

.pad-top-xl--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xl--child > * {
    padding-top: 68px;
  }
}

.pad-top-xxl {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xxl {
    padding-top: 84px;
  }
}

.pad-top-xxl--child > * {
  padding-top: 20px;
}
@media screen and (min-width: 480px) {
  .pad-top-xxl--child > * {
    padding-top: 84px;
  }
}

.pad-left-px1 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-px1 {
    padding-left: 1px;
  }
}

.pad-left-px1--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-px1--child > * {
    padding-left: 1px;
  }
}

.pad-left-px2 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-px2 {
    padding-left: 2px;
  }
}

.pad-left-px2--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-px2--child > * {
    padding-left: 2px;
  }
}

.pad-left-px3 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-px3 {
    padding-left: 3px;
  }
}

.pad-left-px3--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-px3--child > * {
    padding-left: 3px;
  }
}

.pad-left-xs1 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xs1 {
    padding-left: 4px;
  }
}

.pad-left-xs1--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xs1--child > * {
    padding-left: 4px;
  }
}

.pad-left-xs2 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xs2 {
    padding-left: 8px;
  }
}

.pad-left-xs2--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xs2--child > * {
    padding-left: 8px;
  }
}

.pad-left-xs3 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xs3 {
    padding-left: 12px;
  }
}

.pad-left-xs3--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xs3--child > * {
    padding-left: 12px;
  }
}

.pad-left-xs4 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xs4 {
    padding-left: 16px;
  }
}

.pad-left-xs4--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xs4--child > * {
    padding-left: 16px;
  }
}

.pad-left-sm1 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-sm1 {
    padding-left: 20px;
  }
}

.pad-left-sm1--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-sm1--child > * {
    padding-left: 20px;
  }
}

.pad-left-sm2 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-sm2 {
    padding-left: 24px;
  }
}

.pad-left-sm2--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-sm2--child > * {
    padding-left: 24px;
  }
}

.pad-left-sm3 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-sm3 {
    padding-left: 28px;
  }
}

.pad-left-sm3--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-sm3--child > * {
    padding-left: 28px;
  }
}

.pad-left-sm4 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-sm4 {
    padding-left: 32px;
  }
}

.pad-left-sm4--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-sm4--child > * {
    padding-left: 32px;
  }
}

.pad-left-md1 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-md1 {
    padding-left: 36px;
  }
}

.pad-left-md1--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-md1--child > * {
    padding-left: 36px;
  }
}

.pad-left-md2 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-md2 {
    padding-left: 40px;
  }
}

.pad-left-md2--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-md2--child > * {
    padding-left: 40px;
  }
}

.pad-left-md3 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-md3 {
    padding-left: 44px;
  }
}

.pad-left-md3--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-md3--child > * {
    padding-left: 44px;
  }
}

.pad-left-md4 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-md4 {
    padding-left: 48px;
  }
}

.pad-left-md4--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-md4--child > * {
    padding-left: 48px;
  }
}

.pad-left-lg1 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-lg1 {
    padding-left: 52px;
  }
}

.pad-left-lg1--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-lg1--child > * {
    padding-left: 52px;
  }
}

.pad-left-lg2 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-lg2 {
    padding-left: 56px;
  }
}

.pad-left-lg2--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-lg2--child > * {
    padding-left: 56px;
  }
}

.pad-left-lg3 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-lg3 {
    padding-left: 60px;
  }
}

.pad-left-lg3--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-lg3--child > * {
    padding-left: 60px;
  }
}

.pad-left-lg4 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-lg4 {
    padding-left: 64px;
  }
}

.pad-left-lg4--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-lg4--child > * {
    padding-left: 64px;
  }
}

.pad-left-xl1 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xl1 {
    padding-left: 68px;
  }
}

.pad-left-xl1--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xl1--child > * {
    padding-left: 68px;
  }
}

.pad-left-xl2 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xl2 {
    padding-left: 72px;
  }
}

.pad-left-xl2--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xl2--child > * {
    padding-left: 72px;
  }
}

.pad-left-xl3 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xl3 {
    padding-left: 76px;
  }
}

.pad-left-xl3--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xl3--child > * {
    padding-left: 76px;
  }
}

.pad-left-xl4 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xl4 {
    padding-left: 80px;
  }
}

.pad-left-xl4--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xl4--child > * {
    padding-left: 80px;
  }
}

.pad-left-xxl1 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xxl1 {
    padding-left: 84px;
  }
}

.pad-left-xxl1--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xxl1--child > * {
    padding-left: 84px;
  }
}

.pad-left-xxl2 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xxl2 {
    padding-left: 88px;
  }
}

.pad-left-xxl2--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xxl2--child > * {
    padding-left: 88px;
  }
}

.pad-left-xxl3 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xxl3 {
    padding-left: 92px;
  }
}

.pad-left-xxl3--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xxl3--child > * {
    padding-left: 92px;
  }
}

.pad-left-xxl4 {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xxl4 {
    padding-left: 96px;
  }
}

.pad-left-xxl4--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xxl4--child > * {
    padding-left: 96px;
  }
}

.pad-left-xs {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xs {
    padding-left: 4px;
  }
}

.pad-left-xs--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xs--child > * {
    padding-left: 4px;
  }
}

.pad-left-sm {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-sm {
    padding-left: 20px;
  }
}

.pad-left-sm--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-sm--child > * {
    padding-left: 20px;
  }
}

.pad-left-md {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-md {
    padding-left: 36px;
  }
}

.pad-left-md--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-md--child > * {
    padding-left: 36px;
  }
}

.pad-left-lg {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-lg {
    padding-left: 52px;
  }
}

.pad-left-lg--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-lg--child > * {
    padding-left: 52px;
  }
}

.pad-left-xl {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xl {
    padding-left: 68px;
  }
}

.pad-left-xl--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xl--child > * {
    padding-left: 68px;
  }
}

.pad-left-xxl {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xxl {
    padding-left: 84px;
  }
}

.pad-left-xxl--child > * {
  padding-left: 20px;
}
@media screen and (min-width: 480px) {
  .pad-left-xxl--child > * {
    padding-left: 84px;
  }
}

.pad-bottom-px1 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-px1 {
    padding-bottom: 1px;
  }
}

.pad-bottom-px1--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-px1--child > * {
    padding-bottom: 1px;
  }
}

.pad-bottom-px2 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-px2 {
    padding-bottom: 2px;
  }
}

.pad-bottom-px2--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-px2--child > * {
    padding-bottom: 2px;
  }
}

.pad-bottom-px3 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-px3 {
    padding-bottom: 3px;
  }
}

.pad-bottom-px3--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-px3--child > * {
    padding-bottom: 3px;
  }
}

.pad-bottom-xs1 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xs1 {
    padding-bottom: 4px;
  }
}

.pad-bottom-xs1--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xs1--child > * {
    padding-bottom: 4px;
  }
}

.pad-bottom-xs2 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xs2 {
    padding-bottom: 8px;
  }
}

.pad-bottom-xs2--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xs2--child > * {
    padding-bottom: 8px;
  }
}

.pad-bottom-xs3 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xs3 {
    padding-bottom: 12px;
  }
}

.pad-bottom-xs3--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xs3--child > * {
    padding-bottom: 12px;
  }
}

.pad-bottom-xs4 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xs4 {
    padding-bottom: 16px;
  }
}

.pad-bottom-xs4--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xs4--child > * {
    padding-bottom: 16px;
  }
}

.pad-bottom-sm1 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-sm1 {
    padding-bottom: 20px;
  }
}

.pad-bottom-sm1--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-sm1--child > * {
    padding-bottom: 20px;
  }
}

.pad-bottom-sm2 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-sm2 {
    padding-bottom: 24px;
  }
}

.pad-bottom-sm2--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-sm2--child > * {
    padding-bottom: 24px;
  }
}

.pad-bottom-sm3 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-sm3 {
    padding-bottom: 28px;
  }
}

.pad-bottom-sm3--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-sm3--child > * {
    padding-bottom: 28px;
  }
}

.pad-bottom-sm4 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-sm4 {
    padding-bottom: 32px;
  }
}

.pad-bottom-sm4--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-sm4--child > * {
    padding-bottom: 32px;
  }
}

.pad-bottom-md1 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-md1 {
    padding-bottom: 36px;
  }
}

.pad-bottom-md1--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-md1--child > * {
    padding-bottom: 36px;
  }
}

.pad-bottom-md2 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-md2 {
    padding-bottom: 40px;
  }
}

.pad-bottom-md2--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-md2--child > * {
    padding-bottom: 40px;
  }
}

.pad-bottom-md3 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-md3 {
    padding-bottom: 44px;
  }
}

.pad-bottom-md3--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-md3--child > * {
    padding-bottom: 44px;
  }
}

.pad-bottom-md4 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-md4 {
    padding-bottom: 48px;
  }
}

.pad-bottom-md4--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-md4--child > * {
    padding-bottom: 48px;
  }
}

.pad-bottom-lg1 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-lg1 {
    padding-bottom: 52px;
  }
}

.pad-bottom-lg1--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-lg1--child > * {
    padding-bottom: 52px;
  }
}

.pad-bottom-lg2 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-lg2 {
    padding-bottom: 56px;
  }
}

.pad-bottom-lg2--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-lg2--child > * {
    padding-bottom: 56px;
  }
}

.pad-bottom-lg3 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-lg3 {
    padding-bottom: 60px;
  }
}

.pad-bottom-lg3--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-lg3--child > * {
    padding-bottom: 60px;
  }
}

.pad-bottom-lg4 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-lg4 {
    padding-bottom: 64px;
  }
}

.pad-bottom-lg4--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-lg4--child > * {
    padding-bottom: 64px;
  }
}

.pad-bottom-xl1 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xl1 {
    padding-bottom: 68px;
  }
}

.pad-bottom-xl1--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xl1--child > * {
    padding-bottom: 68px;
  }
}

.pad-bottom-xl2 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xl2 {
    padding-bottom: 72px;
  }
}

.pad-bottom-xl2--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xl2--child > * {
    padding-bottom: 72px;
  }
}

.pad-bottom-xl3 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xl3 {
    padding-bottom: 76px;
  }
}

.pad-bottom-xl3--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xl3--child > * {
    padding-bottom: 76px;
  }
}

.pad-bottom-xl4 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xl4 {
    padding-bottom: 80px;
  }
}

.pad-bottom-xl4--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xl4--child > * {
    padding-bottom: 80px;
  }
}

.pad-bottom-xxl1 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xxl1 {
    padding-bottom: 84px;
  }
}

.pad-bottom-xxl1--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xxl1--child > * {
    padding-bottom: 84px;
  }
}

.pad-bottom-xxl2 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xxl2 {
    padding-bottom: 88px;
  }
}

.pad-bottom-xxl2--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xxl2--child > * {
    padding-bottom: 88px;
  }
}

.pad-bottom-xxl3 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xxl3 {
    padding-bottom: 92px;
  }
}

.pad-bottom-xxl3--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xxl3--child > * {
    padding-bottom: 92px;
  }
}

.pad-bottom-xxl4 {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xxl4 {
    padding-bottom: 96px;
  }
}

.pad-bottom-xxl4--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xxl4--child > * {
    padding-bottom: 96px;
  }
}

.pad-bottom-xs {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xs {
    padding-bottom: 4px;
  }
}

.pad-bottom-xs--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xs--child > * {
    padding-bottom: 4px;
  }
}

.pad-bottom-sm {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-sm {
    padding-bottom: 20px;
  }
}

.pad-bottom-sm--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-sm--child > * {
    padding-bottom: 20px;
  }
}

.pad-bottom-md {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-md {
    padding-bottom: 36px;
  }
}

.pad-bottom-md--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-md--child > * {
    padding-bottom: 36px;
  }
}

.pad-bottom-lg {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-lg {
    padding-bottom: 52px;
  }
}

.pad-bottom-lg--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-lg--child > * {
    padding-bottom: 52px;
  }
}

.pad-bottom-xl {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xl {
    padding-bottom: 68px;
  }
}

.pad-bottom-xl--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xl--child > * {
    padding-bottom: 68px;
  }
}

.pad-bottom-xxl {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xxl {
    padding-bottom: 84px;
  }
}

.pad-bottom-xxl--child > * {
  padding-bottom: 20px;
}
@media screen and (min-width: 480px) {
  .pad-bottom-xxl--child > * {
    padding-bottom: 84px;
  }
}

.pad-right-px1 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-px1 {
    padding-right: 1px;
  }
}

.pad-right-px1--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-px1--child > * {
    padding-right: 1px;
  }
}

.pad-right-px2 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-px2 {
    padding-right: 2px;
  }
}

.pad-right-px2--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-px2--child > * {
    padding-right: 2px;
  }
}

.pad-right-px3 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-px3 {
    padding-right: 3px;
  }
}

.pad-right-px3--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-px3--child > * {
    padding-right: 3px;
  }
}

.pad-right-xs1 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xs1 {
    padding-right: 4px;
  }
}

.pad-right-xs1--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xs1--child > * {
    padding-right: 4px;
  }
}

.pad-right-xs2 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xs2 {
    padding-right: 8px;
  }
}

.pad-right-xs2--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xs2--child > * {
    padding-right: 8px;
  }
}

.pad-right-xs3 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xs3 {
    padding-right: 12px;
  }
}

.pad-right-xs3--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xs3--child > * {
    padding-right: 12px;
  }
}

.pad-right-xs4 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xs4 {
    padding-right: 16px;
  }
}

.pad-right-xs4--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xs4--child > * {
    padding-right: 16px;
  }
}

.pad-right-sm1 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-sm1 {
    padding-right: 20px;
  }
}

.pad-right-sm1--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-sm1--child > * {
    padding-right: 20px;
  }
}

.pad-right-sm2 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-sm2 {
    padding-right: 24px;
  }
}

.pad-right-sm2--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-sm2--child > * {
    padding-right: 24px;
  }
}

.pad-right-sm3 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-sm3 {
    padding-right: 28px;
  }
}

.pad-right-sm3--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-sm3--child > * {
    padding-right: 28px;
  }
}

.pad-right-sm4 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-sm4 {
    padding-right: 32px;
  }
}

.pad-right-sm4--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-sm4--child > * {
    padding-right: 32px;
  }
}

.pad-right-md1 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-md1 {
    padding-right: 36px;
  }
}

.pad-right-md1--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-md1--child > * {
    padding-right: 36px;
  }
}

.pad-right-md2 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-md2 {
    padding-right: 40px;
  }
}

.pad-right-md2--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-md2--child > * {
    padding-right: 40px;
  }
}

.pad-right-md3 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-md3 {
    padding-right: 44px;
  }
}

.pad-right-md3--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-md3--child > * {
    padding-right: 44px;
  }
}

.pad-right-md4 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-md4 {
    padding-right: 48px;
  }
}

.pad-right-md4--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-md4--child > * {
    padding-right: 48px;
  }
}

.pad-right-lg1 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-lg1 {
    padding-right: 52px;
  }
}

.pad-right-lg1--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-lg1--child > * {
    padding-right: 52px;
  }
}

.pad-right-lg2 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-lg2 {
    padding-right: 56px;
  }
}

.pad-right-lg2--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-lg2--child > * {
    padding-right: 56px;
  }
}

.pad-right-lg3 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-lg3 {
    padding-right: 60px;
  }
}

.pad-right-lg3--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-lg3--child > * {
    padding-right: 60px;
  }
}

.pad-right-lg4 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-lg4 {
    padding-right: 64px;
  }
}

.pad-right-lg4--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-lg4--child > * {
    padding-right: 64px;
  }
}

.pad-right-xl1 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xl1 {
    padding-right: 68px;
  }
}

.pad-right-xl1--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xl1--child > * {
    padding-right: 68px;
  }
}

.pad-right-xl2 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xl2 {
    padding-right: 72px;
  }
}

.pad-right-xl2--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xl2--child > * {
    padding-right: 72px;
  }
}

.pad-right-xl3 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xl3 {
    padding-right: 76px;
  }
}

.pad-right-xl3--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xl3--child > * {
    padding-right: 76px;
  }
}

.pad-right-xl4 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xl4 {
    padding-right: 80px;
  }
}

.pad-right-xl4--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xl4--child > * {
    padding-right: 80px;
  }
}

.pad-right-xxl1 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xxl1 {
    padding-right: 84px;
  }
}

.pad-right-xxl1--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xxl1--child > * {
    padding-right: 84px;
  }
}

.pad-right-xxl2 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xxl2 {
    padding-right: 88px;
  }
}

.pad-right-xxl2--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xxl2--child > * {
    padding-right: 88px;
  }
}

.pad-right-xxl3 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xxl3 {
    padding-right: 92px;
  }
}

.pad-right-xxl3--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xxl3--child > * {
    padding-right: 92px;
  }
}

.pad-right-xxl4 {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xxl4 {
    padding-right: 96px;
  }
}

.pad-right-xxl4--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xxl4--child > * {
    padding-right: 96px;
  }
}

.pad-right-xs {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xs {
    padding-right: 4px;
  }
}

.pad-right-xs--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xs--child > * {
    padding-right: 4px;
  }
}

.pad-right-sm {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-sm {
    padding-right: 20px;
  }
}

.pad-right-sm--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-sm--child > * {
    padding-right: 20px;
  }
}

.pad-right-md {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-md {
    padding-right: 36px;
  }
}

.pad-right-md--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-md--child > * {
    padding-right: 36px;
  }
}

.pad-right-lg {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-lg {
    padding-right: 52px;
  }
}

.pad-right-lg--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-lg--child > * {
    padding-right: 52px;
  }
}

.pad-right-xl {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xl {
    padding-right: 68px;
  }
}

.pad-right-xl--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xl--child > * {
    padding-right: 68px;
  }
}

.pad-right-xxl {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xxl {
    padding-right: 84px;
  }
}

.pad-right-xxl--child > * {
  padding-right: 20px;
}
@media screen and (min-width: 480px) {
  .pad-right-xxl--child > * {
    padding-right: 84px;
  }
}

.font-xxs {
  font-size: 0.5rem;
}

.font-xs {
  font-size: 0.6rem;
}

.font-sm {
  font-size: 0.8rem;
}

.font-shortbase {
  font-size: 0.9rem;
}

.font-md {
  font-size: 1.2rem;
}

.font-lg {
  font-size: 1.6rem;
}

.font-xl {
  font-size: 2rem;
}

.font-xxl {
  font-size: 2.5rem;
}

.font-j1 {
  font-size: 3rem;
  line-height: 3rem;
}

.font-j2 {
  font-size: 4rem;
  line-height: 3rem;
}

.font-j3 {
  font-size: 5rem;
  line-height: 3rem;
}

.font-ultralight {
  font-weight: 100;
  letter-spacing: 0em;
}

.font-light {
  font-weight: 200;
  letter-spacing: 0em;
}

.font-book {
  font-weight: 300;
  letter-spacing: 0em;
}

.font-normal {
  font-weight: 400;
  letter-spacing: 0em;
}

.font-medium {
  font-weight: 500;
  letter-spacing: 0em;
}

.font-semibold {
  font-weight: 600;
  letter-spacing: 0em;
}

.font-bold {
  font-weight: 700;
  letter-spacing: 0em;
}

.font-black {
  font-weight: 800;
  letter-spacing: 0em;
}

.font-ultrablack {
  font-weight: 900;
  letter-spacing: 0em;
}

._test-fontweight {
  font-weight: 900;
  letter-spacing: 0em;
}
@media screen and (min-width: 480px) {
  ._test-fontweight {
    font-weight: 200;
    letter-spacing: 0em;
  }
}
@media screen and (min-width: 960px) {
  ._test-fontweight {
    font-weight: 700;
    letter-spacing: 0em;
  }
}

h1, .h1-xxl, .h1-xl, .h1-lg, .h1-md, .h1-sm, .h1-xs, h1 {
  font-size: 3rem;
  line-height: 3rem;
  font-weight: 700;
  letter-spacing: 0em;
}

h2, .h2-xxl, .h2-xl, .h2-lg, .h2-md, .h2-sm, .h2-xs, h2 {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0em;
}

h3, .h3-xxl, .h3-xl, .h3-lg, .h3-md, .h3-sm, .h3-xs, h3 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0em;
}

h4, .h4-xxl, .h4-xl, .h4-lg, .h4-md, .h4-sm, .h4-xs, h4 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0em;
}

h5, .h5-xxl, .h5-xl, .h5-lg, .h5-md, .h5-sm, .h5-xs, h5 {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0em;
}

h6, .h6-xxl, .h6-xl, .h6-lg, .h6-md, .h6-sm, .h6-xs, h6 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0em;
}

.h1-xs {
  margin: 0 4px;
}

.h2-xs {
  margin: 0 4px;
}

.h3-xs {
  margin: 0 4px;
}

.h4-xs {
  margin: 0 4px;
}

.h5-xs {
  margin: 0 4px;
}

.h6-xs {
  margin: 0 4px;
}

.h1-sm {
  margin: 0 20px;
}

.h2-sm {
  margin: 0 20px;
}

.h3-sm {
  margin: 0 20px;
}

.h4-sm {
  margin: 0 20px;
}

.h5-sm {
  margin: 0 20px;
}

.h6-sm {
  margin: 0 20px;
}

.h1-md {
  margin: 0 36px;
}

.h2-md {
  margin: 0 36px;
}

.h3-md {
  margin: 0 36px;
}

.h4-md {
  margin: 0 36px;
}

.h5-md {
  margin: 0 36px;
}

.h6-md {
  margin: 0 36px;
}

.h1-lg {
  margin: 0 52px;
}

.h2-lg {
  margin: 0 52px;
}

.h3-lg {
  margin: 0 52px;
}

.h4-lg {
  margin: 0 52px;
}

.h5-lg {
  margin: 0 52px;
}

.h6-lg {
  margin: 0 52px;
}

.h1-xl {
  margin: 0 68px;
}

.h2-xl {
  margin: 0 68px;
}

.h3-xl {
  margin: 0 68px;
}

.h4-xl {
  margin: 0 68px;
}

.h5-xl {
  margin: 0 68px;
}

.h6-xl {
  margin: 0 68px;
}

.h1-xxl {
  margin: 0 84px;
}

.h2-xxl {
  margin: 0 84px;
}

.h3-xxl {
  margin: 0 84px;
}

.h4-xxl {
  margin: 0 84px;
}

.h5-xxl {
  margin: 0 84px;
}

.h6-xxl {
  margin: 0 84px;
}

.ipsum-10:before {
  content: "Maximus ut";
}

.ipsum-25:before {
  content: "Aliquam erat volutpat ni.";
}

.ipsum-50:before {
  content: "Donec eu est pulvinar fringila posuere in a dolor.";
}

.ipsum-75:before {
  content: "Ut sit amet et consequat tellus. Vestibulum iaculis maximus purus ut rutum.";
}

.ipsum-100:before {
  content: "Suspendisse vel ex eu nunc rhoncus cursus. Morbi hendrerit urna. Nunc ultrices urna, in lutus justo.";
}

.ipsum-125:before {
  content: "Pellentesque laoreet, augue eu fermentum tincidunt, sapien quam an tincidunt turpis, sit amet efficitur dui arcu eget libero.";
}

.ipsum-150:before {
  content: "Vestibulum iaculis maximus purus ut rutrum. Pron quis enim risus. Lorem ipsum dolor sit amet, consectur adipiscing elit. Praesent sed facilisis augue.";
}

.ipsum-200:before {
  content: "Maecenas tincidunt libero id lacus dapibus faucibus. Pellentesque ex mi, mollis at quis, eleifend nec urna. Sed sollicitudin fermentum tincidunt. Quisque ut condimentum urna, sit amet ullamcorper dui.";
}

.ipsum-250:before {
  content: "Malesuada suspendisse sed elit a velit volutpat. Ut ut congue mauris, vitae feugiat orci. Suspendisse maximus, ex non hendrerit pretium, velit mattis dui, non semper tellus nibh in purus. Donec at purus a nibh ultrices aliquam. Aliquam erat volutpat.";
}

.ipsum-300:before {
  content: "Phasellus dictum pellentesque bibendum. In non suscipit odio. Morbi quis ipsum ultricies, pulvinar nibh sit amet, rhoncus lectus. Nulla pellentesque orci ut lorem congue, at feugiat lacus pellentesque. Quisque molestie et malesuada fermentum. Phasellus varius mauris ante, ut euismod ipsum tempor id.";
}

.ipsum-400:before {
  content: "Tincidunt maecenas libero id lacus dapibus faucibus. Pellentesque ex, mollis at porta quis, eleifend nec urna. Sed sollicitudin tincidunt. Quisque ut condimentum urna, sit amet ullamcorper dui. Donec eu est pulvinar nibh fringilla posuere in a dolor. Phasellus dictum pellentesque bibendum. Nulla pellentesque orci ut lorem congue, at feugiat lacus pellentesque. Quisque molestie malesuada fermentum.";
}

.ipsum-500:before {
  content: "Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris mollis porttitor volutpat. Cras placerat mi eu ligula pulvinar, nec interdum tortor commodo. Fusce et diam id ligula pharetra auctor eget in eros. Ut sit amet consequat tellus. Vestibulum iaculis maximus purus ut rutrum. Proin quis enim risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praeset sed facilisis augue, vitae tristique neque. Cras vehicula semper nunc quis consectetur. Nam viverra neque a dui efficitur.";
}

.--debug > * {
  outline: 1px solid red;
}

.--serif {
  font-family: Times, serif;
}

.--sans {
  font-family: Helvetica, Arial, sans-serif;
}

.--mono {
  font-family: Courier, monospace;
}

.left {
  display: inherit;
  justify-content: left;
}

.center {
  display: inherit;
  justify-content: center;
}

.right {
  display: inherit;
  justify-content: right;
}

.hcenter {
  display: inherit;
  justify-content: center;
}

.vcenter {
  display: inherit;
  align-items: center;
}

.deadcenter {
  justify-content: center;
  align-items: center;
}

.self-right {
  margin-left: auto;
}

.self-deadcenter {
  margin: auto;
}

.self-center {
  margin: 0 auto;
}

.self-vcenter {
  margin: auto 0;
}

.child-between {
  justify-content: space-between;
}

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

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

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

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.child-allcenter > * {
  text-align: center;
}

.nowrap {
  white-space: nowrap;
}

.inherit > a {
  color: inherit;
}

.--light {
  font-weight: 200;
  letter-spacing: 0em;
}

.--normal {
  font-weight: 400;
  letter-spacing: 0em;
}

.--bold {
  font-weight: 700;
  letter-spacing: 0em;
}

.--black {
  font-weight: 800;
  letter-spacing: 0em;
}

.--flush {
  margin-left: 0;
}

.--bullets {
  list-style: disc;
}

.--nobullets {
  list-style: none;
}

.round1 {
  border-radius: 4px;
}

.round2 {
  border-radius: 8px;
}

.round3 {
  border-radius: 12px;
}

.round4 {
  border-radius: 16px;
}

.round5 {
  border-radius: 20px;
}

.round-pill {
  border-radius: 50px;
}

.dis-flex {
  display: flex;
}

.dis-inblock {
  display: inline-block;
}

.dis-table {
  display: table;
}

[data-component=c_swatch] {
  width: 220px;
  height: 120px;
  border: 1px solid #bfbfbf;
}
[data-component=c_swatch]#c_swatch1, [data-component=c_swatch] #c_swatch2, [data-component=c_swatch] #c_swatch3, [data-component=c_swatch] #c_swatch4 {
  width: 50%;
  height: 50%;
}

.sectionTitle {
  color: #f80;
  padding-left: 0.5em;
  margin: 1em 0;
  border-left: 50px solid #f80;
}

.we-bgOrange {
  background-color: #f80;
}

.graybg {
  background-color: darkgray;
}

.red {
  color: red;
}

.test-container {
  background-color: #f80;
  /* height: 2em; */
  padding: 1em;
  text-align: center;
  border: gray 1px solid;
  color: white;
}

.subHeader {
  background-color: gray;
  color: white;
  width: 100%;
  text-align: center;
}

/* h1 { padding: .5em; } */
.subcontainer {
  background-color: darkgray;
  width: 100%;
}

.image {
  background-color: lightgray;
  border: 2px solid white;
  width: 200px;
  height: 200px;
}

.button {
  background-color: orange;
  color: white;
  text-align: center;
  width: 100px;
  border: 1px solid black;
}

.inline-code {
  background-color: rgb(244, 248, 255);
  color: black;
  border-radius: 3px;
  white-space: normal;
  padding: 0.3em;
  font-family: "Inconsolata", monospace;
  font-weight: 500;
}

.inline-codebox-light {
  background-color: #e5e5e5;
  border-radius: 10px;
  border: 0;
  display: flex;
  align-items: center;
  padding: 0.5em;
  white-space: pre;
}

.inline-codebox-dark {
  /* height: 20em; */
  background-color: #262626;
  color: white;
  resize: none;
  border-radius: 10px;
  border: 0;
  white-space: normal;
  padding: 0.5em;
  margin: 8px 0;
}

.codebox {
  width: 100%;
  /* height: 20em; */
  background-color: rgb(66, 66, 66);
  color: white;
  resize: none;
  border-radius: 10px;
  border: 0;
  white-space: pre-line;
  /* padding: 1em; */
  margin: 8px 0;
}

.codebox > pre {
  margin-top: -2em;
}

.codebox-title {
  background-color: #595959;
  border-top-left-radius: inherit;
  padding: 0.5em;
  border-top-right-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  height: 2.5em;
}

.sectionTitle {
  color: #f80;
  padding-left: 0.5em;
  margin: 1em 0;
  border-left: 50px solid #f80;
}

.we-bgOrange {
  background-color: #f80;
}

.graybg {
  background-color: darkgray;
}

.red {
  color: red;
}

/* h1 { padding: .5em; } */
.subcontainer {
  background-color: darkgray;
  width: 100%;
}

.image {
  background-color: lightgray;
  border: 2px solid white;
  width: 200px;
  height: 200px;
}

.button {
  background-color: orange;
  color: white;
  text-align: center;
  width: 100px;
  border: 1px solid black;
}

.dark-bg {
  background-color: darkgray;
}

.example-table {
  text-align: left;
  width: 100%;
}
.example-table tr {
  border-bottom: 1px solid rgb(210, 210, 210);
  display: grid;
}
.example-table tr:last-child {
  border-bottom: 0;
}
@media screen and (min-width: 960px) {
  .example-table tr {
    display: table-row;
  }
}
.example-table tr, .example-table td, .example-table th {
  padding: 4px;
}

.example-table2 {
  display: table-row;
  text-align: left;
  width: 100%;
  font-size: 0.9rem;
}
.example-table2 tr {
  border-bottom: 1px solid rgb(210, 210, 210);
  display: grid;
}
.example-table2 tr:last-child {
  border-bottom: 0;
}
@media screen and (min-width: 960px) {
  .example-table2 tr {
    display: table-row;
  }
}
.example-table2 tr, .example-table2 td, .example-table2 th {
  padding: 4px;
}
.example-table2 td {
  vertical-align: top;
}

.padmar-table {
  display: table-row;
  text-align: left;
  width: 100%;
  font-size: 0.9rem;
}
.padmar-table tr {
  display: grid;
}
@media screen and (min-width: 960px) {
  .padmar-table tr {
    display: table-row;
  }
}
.padmar-table tr, .padmar-table td, .padmar-table th {
  padding: 4px;
}
.padmar-table td {
  vertical-align: top;
}

.spacing-table {
  text-align: left;
  width: 100%;
  font-size: 0.9rem;
}
.spacing-table tr {
  display: grid;
}
.spacing-table td {
  padding: 4px;
}
.spacing-table td > div {
  display: inline-flex;
}
.spacing-table td > div > span {
  padding: 8px;
}

.steps-table {
  display: table;
  text-align: left;
  width: 100%;
  margin-bottom: 24px;
  font-size: 0.9rem;
}
.steps-table tr {
  border-bottom: 1px solid rgb(210, 210, 210);
  display: grid;
}
.steps-table tr:last-child {
  border-bottom: 0;
}
@media screen and (min-width: 960px) {
  .steps-table tr {
    display: table-row;
  }
}
.steps-table tr, .steps-table td, .steps-table th {
  padding: 8px;
}
.steps-table td:first-child {
  width: 100%;
}
@media screen and (min-width: 960px) {
  .steps-table td:first-child {
    width: 10%;
  }
}
.steps-table td:nth-child(2) {
  width: 100%;
}
@media screen and (min-width: 960px) {
  .steps-table td:nth-child(2) {
    width: 55%;
  }
}
.steps-table td:nth-child(3) {
  font-family: "Inconsolata", monospace;
}

.row-table {
  display: table;
  width: 100%;
  font-size: 0.9rem;
}
.row-table tr {
  border-bottom: 1px solid rgb(210, 210, 210);
  display: block;
}
@media screen and (min-width: 960px) {
  .row-table tr {
    display: table-row;
  }
}
.row-table tr, .row-table td, .row-table th {
  padding: 4px;
}

.code-orange {
  color: #ffac4e;
}

.code-blue {
  color: #69B9FF;
}

.padding-box {
  box-sizing: content-box;
  height: 65px;
  width: 65px;
  background-color: #8c8c8c;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.element-box {
  box-sizing: content-box;
  height: 65px;
  width: 65px;
  text-align: center;
}

.color-box {
  box-sizing: content-box;
  height: 160px;
  width: 160px;
  text-align: center;
  padding: 4px;
}

.fallback-last {
  flex-direction: column-reverse;
}
@media screen and (min-width: 960px) {
  .fallback-last {
    flex-direction: row;
  }
}

.docheader {
  padding: 36px;
}

.article-padding {
  padding: 36px;
}

.f2-width-xs1 {
  width: 2px;
}

.f2-width-xs2 {
  width: 4px;
}

.f2-width-xs3 {
  width: 6px;
}

.f2-width-xs4 {
  width: 8px;
}

.f2-width-sm1 {
  width: 10px;
}

.f2-width-sm2 {
  width: 12px;
}

.f2-width-sm3 {
  width: 14px;
}

.f2-width-sm4 {
  width: 16px;
}

.f2-width-md1 {
  width: 18px;
}

.f2-width-md2 {
  width: 20px;
}

.f2-width-md3 {
  width: 22px;
}

.f2-width-md4 {
  width: 24px;
}

.f2-width-lg1 {
  width: 26px;
}

.f2-width-lg2 {
  width: 28px;
}

.f2-width-lg3 {
  width: 30px;
}

.f2-width-lg4 {
  width: 32px;
}

.f2-width-xl1 {
  width: 34px;
}

.f2-width-xl2 {
  width: 36px;
}

.f2-width-xl3 {
  width: 38px;
}

.f2-width-xl4 {
  width: 40px;
}

.f2-width-xxl1 {
  width: 42px;
}

.f2-width-xxl2 {
  width: 44px;
}

.f2-width-xxl3 {
  width: 46px;
}

.f2-width-xxl4 {
  width: 48px;
}

.f2-width-xs {
  width: 4px;
}

.f2-width-sm {
  width: 12px;
}

.f2-width-md {
  width: 20px;
}

.f2-width-lg {
  width: 28px;
}

.f2-width-xl {
  width: 36px;
}

.f3-width-xs1 {
  width: 3px;
}

.f3-width-xs2 {
  width: 6px;
}

.f3-width-xs3 {
  width: 9px;
}

.f3-width-xs4 {
  width: 12px;
}

.f3-width-sm1 {
  width: 15px;
}

.f3-width-sm2 {
  width: 18px;
}

.f3-width-sm3 {
  width: 21px;
}

.f3-width-sm4 {
  width: 24px;
}

.f3-width-md1 {
  width: 27px;
}

.f3-width-md2 {
  width: 30px;
}

.f3-width-md3 {
  width: 33px;
}

.f3-width-md4 {
  width: 36px;
}

.f3-width-lg1 {
  width: 39px;
}

.f3-width-lg2 {
  width: 42px;
}

.f3-width-lg3 {
  width: 45px;
}

.f3-width-lg4 {
  width: 48px;
}

.f3-width-xl1 {
  width: 51px;
}

.f3-width-xl2 {
  width: 54px;
}

.f3-width-xl3 {
  width: 57px;
}

.f3-width-xl4 {
  width: 60px;
}

.f3-width-xxl1 {
  width: 63px;
}

.f3-width-xxl2 {
  width: 66px;
}

.f3-width-xxl3 {
  width: 69px;
}

.f3-width-xxl4 {
  width: 72px;
}

.f3-width-xs {
  width: 6px;
}

.f3-width-sm {
  width: 18px;
}

.f3-width-md {
  width: 30px;
}

.f3-width-lg {
  width: 42px;
}

.f3-width-xl {
  width: 54px;
}

.f4-width-xs1 {
  width: 4px;
}

.f4-width-xs2 {
  width: 8px;
}

.f4-width-xs3 {
  width: 12px;
}

.f4-width-xs4 {
  width: 16px;
}

.f4-width-sm1 {
  width: 20px;
}

.f4-width-sm2 {
  width: 24px;
}

.f4-width-sm3 {
  width: 28px;
}

.f4-width-sm4 {
  width: 32px;
}

.f4-width-md1 {
  width: 36px;
}

.f4-width-md2 {
  width: 40px;
}

.f4-width-md3 {
  width: 44px;
}

.f4-width-md4 {
  width: 48px;
}

.f4-width-lg1 {
  width: 52px;
}

.f4-width-lg2 {
  width: 56px;
}

.f4-width-lg3 {
  width: 60px;
}

.f4-width-lg4 {
  width: 64px;
}

.f4-width-xl1 {
  width: 68px;
}

.f4-width-xl2 {
  width: 72px;
}

.f4-width-xl3 {
  width: 76px;
}

.f4-width-xl4 {
  width: 80px;
}

.f4-width-xxl1 {
  width: 84px;
}

.f4-width-xxl2 {
  width: 88px;
}

.f4-width-xxl3 {
  width: 92px;
}

.f4-width-xxl4 {
  width: 96px;
}

.f4-width-xs {
  width: 8px;
}

.f4-width-sm {
  width: 24px;
}

.f4-width-md {
  width: 40px;
}

.f4-width-lg {
  width: 56px;
}

.f4-width-xl {
  width: 72px;
}

.accordion {
  background-color: #f80;
  color: white;
  cursor: pointer;
  padding: 12px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  margin: 4px 0;
}

.accordion-active, .accordion:hover {
  background-color: #000;
}

.accordion:after {
  content: "+";
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.accordion-active:after {
  content: "−";
}

.accordion-content {
  /* padding: 0 18px; */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  /* background-color: #f1f1f1; */
}

.title-bar-dark {
  background-color: #0f0f0f;
  color: #146bc2;
  padding: 8px;
}

.table-ls tr:first-child {
  width: 100%;
}
@media screen and (min-width: 960px) {
  .table-ls tr:first-child {
    width: 70%;
  }
}
.table-ls tr:nth-child(2) {
  width: 100%;
}
@media screen and (min-width: 960px) {
  .table-ls tr:nth-child(2) {
    width: 30%;
  }
}

.hover-scale:hover {
  scale: 1.1;
  transition: all 150ms ease-in;
}

.hover-scale:not(:hover) {
  scale: 1;
  transition: all 150ms ease-out;
}

[data-component=doc-header] {
  background-color: #ff8800;
  color: white;
  padding: 52px 32px;
}
[data-component=doc-header] [data-component=doc-header--title] {
  padding-top: 20px;
}
[data-component=doc-header] [data-component=doc-header--description] {
  padding-top: 36px;
  width: 60%;
}

[data-component=doc-header--links] {
  font-size: 0.8rem;
  margin-top: 24px;
}
@media screen and (min-width: 320px) {
  [data-component=doc-header--links] li {
    display: inline;
    list-style: none;
  }
}
[data-component=doc-header--links] li {
  margin-right: 12px;
}
[data-component=doc-header--links] li:last-child {
  margin-right: 0;
}

#ac_hero {
  background-image: url(../images/hero6.jpg);
  background-size: cover;
}

a:hover, button:hover {
  text-decoration: underline;
}

#icons {
  margin-right: 4px;
}
@media screen and (min-width: 960px) {
  #icons {
    margin-right: 36px;
  }
}

label {
  color: white;
  padding: 4px 0;
}

input {
  font-weight: bold;
  color: black;
  padding: 8px;
}

textarea {
  resize: none;
  font-weight: bold;
}

#site-sidenav {
  background-color: #404040;
  color: white;
  font-size: 0.9rem;
  padding: 36px;
}
#site-sidenav h5, #site-sidenav .h5-xs, #site-sidenav .h5-sm, #site-sidenav .h5-md, #site-sidenav .h5-lg, #site-sidenav .h5-xl, #site-sidenav .h5-xxl {
  margin-top: 20px;
  margin-bottom: 4px;
}
#site-sidenav ul {
  margin-top: 4px;
  margin-bottom: 4px;
  margin-left: 36px;
}
@media screen and (min-width: 320px) {
  #site-sidenav ul li {
    display: block;
    list-style: none;
  }
}
#site-sidenav a {
  color: white;
}
#site-sidenav a:hover, #site-sidenav a:active {
  color: #f80;
}/*# sourceMappingURL=aperture-website.css.map */