shido/dist/css/shido.css

Build fast with Shido, a CSS framework for building custom designs without any annoying style or component you have to fight to override.

/*!
 * Shido by Samuel Olvera (samline) - https://github.com/samline/shido
 * Made with a lot of love.
 */

[class*=scontainer],
[class*=scontainer-liquid],
[class*=scontainer-half] {
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
}

[class*=scontainer]:not(.scontainer-liquid):not([class*=scontainer-half]) {
  max-width: 1366px;
}

[class*=scontainer-half] {
  display: inline-block;
}

@media (min-width: 768px) {
  .m\:scontainer-half {
    max-width: 683px;
  }
}

@media (min-width: 1024px) {
  .l\:scontainer-half {
    max-width: 683px;
  }
}

@media (min-width: 1366px) {
  .xl\:scontainer-half {
    max-width: 683px;
  }
}

.line,
.inline-block-clear {
  font-size: 0px;
  letter-spacing: 0px;
  margin: 0 auto;
  padding: 0px;
  word-spacing: 0px;
}

.line > *,
.inline-block-clear > * {
  font-size: 1rem;
  letter-spacing: initial;
  word-spacing: initial;
}

[class*=":scol-"]:not([class*=":pad-all-0"]) > .line,
[class*=":scol-"]:not([class*=":pad-all-0"]) > .inline-block-clear {
  margin: -10px;
}

[class*=":scol-"] {
  display: inline-block;
  padding: 10px;
  vertical-align: middle;
  width: 100%;
}

@media (min-width: 0px) {
  .x\:scol-1 {
    width: 8.3333333333%;
  }

  .x\:scol-2 {
    width: 16.6666666667%;
  }

  .x\:scol-3 {
    width: 25%;
  }

  .x\:scol-4 {
    width: 33.3333333333%;
  }

  .x\:scol-5 {
    width: 41.6666666667%;
  }

  .x\:scol-6 {
    width: 50%;
  }

  .x\:scol-7 {
    width: 58.3333333333%;
  }

  .x\:scol-8 {
    width: 66.6666666667%;
  }

  .x\:scol-9 {
    width: 75%;
  }

  .x\:scol-10 {
    width: 83.3333333333%;
  }

  .x\:scol-11 {
    width: 91.6666666667%;
  }

  .x\:scol-12 {
    width: 100%;
  }
}

@media (min-width: 600px) {
  .s\:scol-1 {
    width: 8.3333333333%;
  }

  .s\:scol-2 {
    width: 16.6666666667%;
  }

  .s\:scol-3 {
    width: 25%;
  }

  .s\:scol-4 {
    width: 33.3333333333%;
  }

  .s\:scol-5 {
    width: 41.6666666667%;
  }

  .s\:scol-6 {
    width: 50%;
  }

  .s\:scol-7 {
    width: 58.3333333333%;
  }

  .s\:scol-8 {
    width: 66.6666666667%;
  }

  .s\:scol-9 {
    width: 75%;
  }

  .s\:scol-10 {
    width: 83.3333333333%;
  }

  .s\:scol-11 {
    width: 91.6666666667%;
  }

  .s\:scol-12 {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .m\:scol-1 {
    width: 8.3333333333%;
  }

  .m\:scol-2 {
    width: 16.6666666667%;
  }

  .m\:scol-3 {
    width: 25%;
  }

  .m\:scol-4 {
    width: 33.3333333333%;
  }

  .m\:scol-5 {
    width: 41.6666666667%;
  }

  .m\:scol-6 {
    width: 50%;
  }

  .m\:scol-7 {
    width: 58.3333333333%;
  }

  .m\:scol-8 {
    width: 66.6666666667%;
  }

  .m\:scol-9 {
    width: 75%;
  }

  .m\:scol-10 {
    width: 83.3333333333%;
  }

  .m\:scol-11 {
    width: 91.6666666667%;
  }

  .m\:scol-12 {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .l\:scol-1 {
    width: 8.3333333333%;
  }

  .l\:scol-2 {
    width: 16.6666666667%;
  }

  .l\:scol-3 {
    width: 25%;
  }

  .l\:scol-4 {
    width: 33.3333333333%;
  }

  .l\:scol-5 {
    width: 41.6666666667%;
  }

  .l\:scol-6 {
    width: 50%;
  }

  .l\:scol-7 {
    width: 58.3333333333%;
  }

  .l\:scol-8 {
    width: 66.6666666667%;
  }

  .l\:scol-9 {
    width: 75%;
  }

  .l\:scol-10 {
    width: 83.3333333333%;
  }

  .l\:scol-11 {
    width: 91.6666666667%;
  }

  .l\:scol-12 {
    width: 100%;
  }
}

@media (min-width: 1366px) {
  .xl\:scol-1 {
    width: 8.3333333333%;
  }

  .xl\:scol-2 {
    width: 16.6666666667%;
  }

  .xl\:scol-3 {
    width: 25%;
  }

  .xl\:scol-4 {
    width: 33.3333333333%;
  }

  .xl\:scol-5 {
    width: 41.6666666667%;
  }

  .xl\:scol-6 {
    width: 50%;
  }

  .xl\:scol-7 {
    width: 58.3333333333%;
  }

  .xl\:scol-8 {
    width: 66.6666666667%;
  }

  .xl\:scol-9 {
    width: 75%;
  }

  .xl\:scol-10 {
    width: 83.3333333333%;
  }

  .xl\:scol-11 {
    width: 91.6666666667%;
  }

  .xl\:scol-12 {
    width: 100%;
  }
}

@media (min-width: 0px) {
  .x\:scol-fit-1 {
    width: 100%;
  }

  .x\:scol-fit-2 {
    width: 50%;
  }

  .x\:scol-fit-3 {
    width: 33.3333333333%;
  }

  .x\:scol-fit-4 {
    width: 25%;
  }

  .x\:scol-fit-5 {
    width: 20%;
  }

  .x\:scol-fit-6 {
    width: 16.6666666667%;
  }

  .x\:scol-fit-7 {
    width: 14.2857142857%;
  }

  .x\:scol-fit-8 {
    width: 12.5%;
  }

  .x\:scol-fit-9 {
    width: 11.1111111111%;
  }

  .x\:scol-fit-10 {
    width: 10%;
  }

  .x\:scol-fit-11 {
    width: 9.0909090909%;
  }

  .x\:scol-fit-12 {
    width: 8.3333333333%;
  }
}

@media (min-width: 600px) {
  .s\:scol-fit-1 {
    width: 100%;
  }

  .s\:scol-fit-2 {
    width: 50%;
  }

  .s\:scol-fit-3 {
    width: 33.3333333333%;
  }

  .s\:scol-fit-4 {
    width: 25%;
  }

  .s\:scol-fit-5 {
    width: 20%;
  }

  .s\:scol-fit-6 {
    width: 16.6666666667%;
  }

  .s\:scol-fit-7 {
    width: 14.2857142857%;
  }

  .s\:scol-fit-8 {
    width: 12.5%;
  }

  .s\:scol-fit-9 {
    width: 11.1111111111%;
  }

  .s\:scol-fit-10 {
    width: 10%;
  }

  .s\:scol-fit-11 {
    width: 9.0909090909%;
  }

  .s\:scol-fit-12 {
    width: 8.3333333333%;
  }
}

@media (min-width: 768px) {
  .m\:scol-fit-1 {
    width: 100%;
  }

  .m\:scol-fit-2 {
    width: 50%;
  }

  .m\:scol-fit-3 {
    width: 33.3333333333%;
  }

  .m\:scol-fit-4 {
    width: 25%;
  }

  .m\:scol-fit-5 {
    width: 20%;
  }

  .m\:scol-fit-6 {
    width: 16.6666666667%;
  }

  .m\:scol-fit-7 {
    width: 14.2857142857%;
  }

  .m\:scol-fit-8 {
    width: 12.5%;
  }

  .m\:scol-fit-9 {
    width: 11.1111111111%;
  }

  .m\:scol-fit-10 {
    width: 10%;
  }

  .m\:scol-fit-11 {
    width: 9.0909090909%;
  }

  .m\:scol-fit-12 {
    width: 8.3333333333%;
  }
}

@media (min-width: 1024px) {
  .l\:scol-fit-1 {
    width: 100%;
  }

  .l\:scol-fit-2 {
    width: 50%;
  }

  .l\:scol-fit-3 {
    width: 33.3333333333%;
  }

  .l\:scol-fit-4 {
    width: 25%;
  }

  .l\:scol-fit-5 {
    width: 20%;
  }

  .l\:scol-fit-6 {
    width: 16.6666666667%;
  }

  .l\:scol-fit-7 {
    width: 14.2857142857%;
  }

  .l\:scol-fit-8 {
    width: 12.5%;
  }

  .l\:scol-fit-9 {
    width: 11.1111111111%;
  }

  .l\:scol-fit-10 {
    width: 10%;
  }

  .l\:scol-fit-11 {
    width: 9.0909090909%;
  }

  .l\:scol-fit-12 {
    width: 8.3333333333%;
  }
}

@media (min-width: 1366px) {
  .xl\:scol-fit-1 {
    width: 100%;
  }

  .xl\:scol-fit-2 {
    width: 50%;
  }

  .xl\:scol-fit-3 {
    width: 33.3333333333%;
  }

  .xl\:scol-fit-4 {
    width: 25%;
  }

  .xl\:scol-fit-5 {
    width: 20%;
  }

  .xl\:scol-fit-6 {
    width: 16.6666666667%;
  }

  .xl\:scol-fit-7 {
    width: 14.2857142857%;
  }

  .xl\:scol-fit-8 {
    width: 12.5%;
  }

  .xl\:scol-fit-9 {
    width: 11.1111111111%;
  }

  .xl\:scol-fit-10 {
    width: 10%;
  }

  .xl\:scol-fit-11 {
    width: 9.0909090909%;
  }

  .xl\:scol-fit-12 {
    width: 8.3333333333%;
  }
}

@media (min-width: 0px) {
  .x\:offset-0 {
    margin-left: 0%;
  }

  .x\:offset-1 {
    margin-left: 8.3333333333%;
  }

  .x\:offset-2 {
    margin-left: 16.6666666667%;
  }

  .x\:offset-3 {
    margin-left: 25%;
  }

  .x\:offset-4 {
    margin-left: 33.3333333333%;
  }

  .x\:offset-5 {
    margin-left: 41.6666666667%;
  }

  .x\:offset-6 {
    margin-left: 50%;
  }

  .x\:offset-7 {
    margin-left: 58.3333333333%;
  }

  .x\:offset-8 {
    margin-left: 66.6666666667%;
  }

  .x\:offset-9 {
    margin-left: 75%;
  }

  .x\:offset-10 {
    margin-left: 83.3333333333%;
  }

  .x\:offset-11 {
    margin-left: 91.6666666667%;
  }

  .x\:offset-12 {
    margin-left: 100%;
  }
}

@media (min-width: 600px) {
  .s\:offset-0 {
    margin-left: 0%;
  }

  .s\:offset-1 {
    margin-left: 8.3333333333%;
  }

  .s\:offset-2 {
    margin-left: 16.6666666667%;
  }

  .s\:offset-3 {
    margin-left: 25%;
  }

  .s\:offset-4 {
    margin-left: 33.3333333333%;
  }

  .s\:offset-5 {
    margin-left: 41.6666666667%;
  }

  .s\:offset-6 {
    margin-left: 50%;
  }

  .s\:offset-7 {
    margin-left: 58.3333333333%;
  }

  .s\:offset-8 {
    margin-left: 66.6666666667%;
  }

  .s\:offset-9 {
    margin-left: 75%;
  }

  .s\:offset-10 {
    margin-left: 83.3333333333%;
  }

  .s\:offset-11 {
    margin-left: 91.6666666667%;
  }

  .s\:offset-12 {
    margin-left: 100%;
  }
}

@media (min-width: 768px) {
  .m\:offset-0 {
    margin-left: 0%;
  }

  .m\:offset-1 {
    margin-left: 8.3333333333%;
  }

  .m\:offset-2 {
    margin-left: 16.6666666667%;
  }

  .m\:offset-3 {
    margin-left: 25%;
  }

  .m\:offset-4 {
    margin-left: 33.3333333333%;
  }

  .m\:offset-5 {
    margin-left: 41.6666666667%;
  }

  .m\:offset-6 {
    margin-left: 50%;
  }

  .m\:offset-7 {
    margin-left: 58.3333333333%;
  }

  .m\:offset-8 {
    margin-left: 66.6666666667%;
  }

  .m\:offset-9 {
    margin-left: 75%;
  }

  .m\:offset-10 {
    margin-left: 83.3333333333%;
  }

  .m\:offset-11 {
    margin-left: 91.6666666667%;
  }

  .m\:offset-12 {
    margin-left: 100%;
  }
}

@media (min-width: 1024px) {
  .l\:offset-0 {
    margin-left: 0%;
  }

  .l\:offset-1 {
    margin-left: 8.3333333333%;
  }

  .l\:offset-2 {
    margin-left: 16.6666666667%;
  }

  .l\:offset-3 {
    margin-left: 25%;
  }

  .l\:offset-4 {
    margin-left: 33.3333333333%;
  }

  .l\:offset-5 {
    margin-left: 41.6666666667%;
  }

  .l\:offset-6 {
    margin-left: 50%;
  }

  .l\:offset-7 {
    margin-left: 58.3333333333%;
  }

  .l\:offset-8 {
    margin-left: 66.6666666667%;
  }

  .l\:offset-9 {
    margin-left: 75%;
  }

  .l\:offset-10 {
    margin-left: 83.3333333333%;
  }

  .l\:offset-11 {
    margin-left: 91.6666666667%;
  }

  .l\:offset-12 {
    margin-left: 100%;
  }
}

@media (min-width: 1366px) {
  .xl\:offset-0 {
    margin-left: 0%;
  }

  .xl\:offset-1 {
    margin-left: 8.3333333333%;
  }

  .xl\:offset-2 {
    margin-left: 16.6666666667%;
  }

  .xl\:offset-3 {
    margin-left: 25%;
  }

  .xl\:offset-4 {
    margin-left: 33.3333333333%;
  }

  .xl\:offset-5 {
    margin-left: 41.6666666667%;
  }

  .xl\:offset-6 {
    margin-left: 50%;
  }

  .xl\:offset-7 {
    margin-left: 58.3333333333%;
  }

  .xl\:offset-8 {
    margin-left: 66.6666666667%;
  }

  .xl\:offset-9 {
    margin-left: 75%;
  }

  .xl\:offset-10 {
    margin-left: 83.3333333333%;
  }

  .xl\:offset-11 {
    margin-left: 91.6666666667%;
  }

  .xl\:offset-12 {
    margin-left: 100%;
  }
}

@media (min-width: 0px) {
  .x\:offset-fit-1 {
    margin-left: 100%;
  }

  .x\:offset-fit-2 {
    margin-left: 50%;
  }

  .x\:offset-fit-3 {
    margin-left: 33.3333333333%;
  }

  .x\:offset-fit-4 {
    margin-left: 25%;
  }

  .x\:offset-fit-5 {
    margin-left: 20%;
  }

  .x\:offset-fit-6 {
    margin-left: 16.6666666667%;
  }

  .x\:offset-fit-7 {
    margin-left: 14.2857142857%;
  }

  .x\:offset-fit-8 {
    margin-left: 12.5%;
  }

  .x\:offset-fit-9 {
    margin-left: 11.1111111111%;
  }

  .x\:offset-fit-10 {
    margin-left: 10%;
  }

  .x\:offset-fit-11 {
    margin-left: 9.0909090909%;
  }

  .x\:offset-fit-12 {
    margin-left: 8.3333333333%;
  }
}

@media (min-width: 600px) {
  .s\:offset-fit-1 {
    margin-left: 100%;
  }

  .s\:offset-fit-2 {
    margin-left: 50%;
  }

  .s\:offset-fit-3 {
    margin-left: 33.3333333333%;
  }

  .s\:offset-fit-4 {
    margin-left: 25%;
  }

  .s\:offset-fit-5 {
    margin-left: 20%;
  }

  .s\:offset-fit-6 {
    margin-left: 16.6666666667%;
  }

  .s\:offset-fit-7 {
    margin-left: 14.2857142857%;
  }

  .s\:offset-fit-8 {
    margin-left: 12.5%;
  }

  .s\:offset-fit-9 {
    margin-left: 11.1111111111%;
  }

  .s\:offset-fit-10 {
    margin-left: 10%;
  }

  .s\:offset-fit-11 {
    margin-left: 9.0909090909%;
  }

  .s\:offset-fit-12 {
    margin-left: 8.3333333333%;
  }
}

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

  .m\:offset-fit-2 {
    margin-left: 50%;
  }

  .m\:offset-fit-3 {
    margin-left: 33.3333333333%;
  }

  .m\:offset-fit-4 {
    margin-left: 25%;
  }

  .m\:offset-fit-5 {
    margin-left: 20%;
  }

  .m\:offset-fit-6 {
    margin-left: 16.6666666667%;
  }

  .m\:offset-fit-7 {
    margin-left: 14.2857142857%;
  }

  .m\:offset-fit-8 {
    margin-left: 12.5%;
  }

  .m\:offset-fit-9 {
    margin-left: 11.1111111111%;
  }

  .m\:offset-fit-10 {
    margin-left: 10%;
  }

  .m\:offset-fit-11 {
    margin-left: 9.0909090909%;
  }

  .m\:offset-fit-12 {
    margin-left: 8.3333333333%;
  }
}

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

  .l\:offset-fit-2 {
    margin-left: 50%;
  }

  .l\:offset-fit-3 {
    margin-left: 33.3333333333%;
  }

  .l\:offset-fit-4 {
    margin-left: 25%;
  }

  .l\:offset-fit-5 {
    margin-left: 20%;
  }

  .l\:offset-fit-6 {
    margin-left: 16.6666666667%;
  }

  .l\:offset-fit-7 {
    margin-left: 14.2857142857%;
  }

  .l\:offset-fit-8 {
    margin-left: 12.5%;
  }

  .l\:offset-fit-9 {
    margin-left: 11.1111111111%;
  }

  .l\:offset-fit-10 {
    margin-left: 10%;
  }

  .l\:offset-fit-11 {
    margin-left: 9.0909090909%;
  }

  .l\:offset-fit-12 {
    margin-left: 8.3333333333%;
  }
}

@media (min-width: 1366px) {
  .xl\:offset-fit-1 {
    margin-left: 100%;
  }

  .xl\:offset-fit-2 {
    margin-left: 50%;
  }

  .xl\:offset-fit-3 {
    margin-left: 33.3333333333%;
  }

  .xl\:offset-fit-4 {
    margin-left: 25%;
  }

  .xl\:offset-fit-5 {
    margin-left: 20%;
  }

  .xl\:offset-fit-6 {
    margin-left: 16.6666666667%;
  }

  .xl\:offset-fit-7 {
    margin-left: 14.2857142857%;
  }

  .xl\:offset-fit-8 {
    margin-left: 12.5%;
  }

  .xl\:offset-fit-9 {
    margin-left: 11.1111111111%;
  }

  .xl\:offset-fit-10 {
    margin-left: 10%;
  }

  .xl\:offset-fit-11 {
    margin-left: 9.0909090909%;
  }

  .xl\:offset-fit-12 {
    margin-left: 8.3333333333%;
  }
}

.show-grid-scontainer [class*=scontainer] {
  outline: solid 2px;
}

.show-grid-line [class*=line] {
  outline: dotted 2px;
}

.show-grid-scol [class*=":scol-"] {
  outline: dashed 2px;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: none;
  outline: 0;
}

*:focus {
  outline: none;
  outline: 0;
}

html,
body {
  background-color: #fff;
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Source Sans Pro", Oxygen, sans-serif;
  font-size: 16px;
  font-weight: 400;
  height: 100%;
  margin: 0 auto;
  padding: 0px;
  position: relative;
  width: 100%;
}

a {
  color: #2196F3;
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: all 0.2s ease, outline 0.000001s;
  transition: all 0.2s ease, outline 0.000001s;
}

a:active,
a:hover,
a:focus {
  color: #1565C0;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Source Sans Pro", Oxygen, sans-serif;
  font-weight: 400;
  margin: 0px;
  position: relative;
  white-space: pre-line;
}

img {
  border: none;
  border: 0;
  display: inline-block;
  outline: none;
  outline: 0;
  vertical-align: middle;
}

p {
  margin: 0px;
  padding: 5px 0px;
  white-space: pre-line;
}

.table-responsive {
  overflow: auto;
  max-width: 100%;
}

@media (min-width: 0px) {
  .x\:center {
    text-align: center;
  }

  .x\:justify {
    text-align: justify;
  }

  .x\:left {
    text-align: left;
  }

  .x\:right {
    text-align: right;
  }
}

@media (min-width: 600px) {
  .s\:center {
    text-align: center;
  }

  .s\:justify {
    text-align: justify;
  }

  .s\:left {
    text-align: left;
  }

  .s\:right {
    text-align: right;
  }
}

@media (min-width: 768px) {
  .m\:center {
    text-align: center;
  }

  .m\:justify {
    text-align: justify;
  }

  .m\:left {
    text-align: left;
  }

  .m\:right {
    text-align: right;
  }
}

@media (min-width: 1024px) {
  .l\:center {
    text-align: center;
  }

  .l\:justify {
    text-align: justify;
  }

  .l\:left {
    text-align: left;
  }

  .l\:right {
    text-align: right;
  }
}

@media (min-width: 1366px) {
  .xl\:center {
    text-align: center;
  }

  .xl\:justify {
    text-align: justify;
  }

  .xl\:left {
    text-align: left;
  }

  .xl\:right {
    text-align: right;
  }
}

@media (min-width: 0px) {
  .x\:baseline {
    vertical-align: baseline;
  }

  .x\:bottom {
    vertical-align: bottom;
  }

  .x\:middle {
    vertical-align: middle;
  }

  .x\:top {
    vertical-align: top;
  }
}

@media (min-width: 600px) {
  .s\:baseline {
    vertical-align: baseline;
  }

  .s\:bottom {
    vertical-align: bottom;
  }

  .s\:middle {
    vertical-align: middle;
  }

  .s\:top {
    vertical-align: top;
  }
}

@media (min-width: 768px) {
  .m\:baseline {
    vertical-align: baseline;
  }

  .m\:bottom {
    vertical-align: bottom;
  }

  .m\:middle {
    vertical-align: middle;
  }

  .m\:top {
    vertical-align: top;
  }
}

@media (min-width: 1024px) {
  .l\:baseline {
    vertical-align: baseline;
  }

  .l\:bottom {
    vertical-align: bottom;
  }

  .l\:middle {
    vertical-align: middle;
  }

  .l\:top {
    vertical-align: top;
  }
}

@media (min-width: 1366px) {
  .xl\:baseline {
    vertical-align: baseline;
  }

  .xl\:bottom {
    vertical-align: bottom;
  }

  .xl\:middle {
    vertical-align: middle;
  }

  .xl\:top {
    vertical-align: top;
  }
}

[class*=aspect-ratio-]:not(.aspect-ratio-item) {
  position: relative;
}

[class*=aspect-ratio-]:not(.aspect-ratio-item):before {
  content: "";
  display: block;
  width: 100%;
}

[class*=aspect-ratio-]:not(.aspect-ratio-item) > iframe,
[class*=aspect-ratio-]:not(.aspect-ratio-item) > img,
[class*=aspect-ratio-]:not(.aspect-ratio-item) > object,
[class*=aspect-ratio-]:not(.aspect-ratio-item) > video {
  height: 100% !important;
  width: 100% !important;
}

[class*=aspect-ratio-]:not(.aspect-ratio-item) > .aspect-ratio-item {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.aspect-ratio-3\:2:before {
  padding-top: 66.6666666667%;
}

.aspect-ratio-4\:3:before {
  padding-top: 75%;
}

.aspect-ratio-16\:9:before {
  padding-top: 56.25%;
}

.aspect-ratio-21\:9:before {
  padding-top: 42.8571428571%;
}

@media (min-width: 0px) {
  .x\:fs-10 {
    font-size: 0.625rem !important;
  }

  .x\:fs-12 {
    font-size: 0.75rem !important;
  }

  .x\:fs-14 {
    font-size: 0.875rem !important;
  }

  .x\:fs-16 {
    font-size: 1rem !important;
  }

  .x\:fs-18 {
    font-size: 1.125rem !important;
  }

  .x\:fs-20 {
    font-size: 1.25rem !important;
  }

  .x\:fs-22 {
    font-size: 1.375rem !important;
  }

  .x\:fs-24 {
    font-size: 1.5rem !important;
  }

  .x\:fs-26 {
    font-size: 1.625rem !important;
  }

  .x\:fs-28 {
    font-size: 1.75rem !important;
  }

  .x\:fs-30 {
    font-size: 1.875rem !important;
  }

  .x\:fs-32 {
    font-size: 2rem !important;
  }

  .x\:fs-34 {
    font-size: 2.125rem !important;
  }

  .x\:fs-36 {
    font-size: 2.25rem !important;
  }

  .x\:fs-38 {
    font-size: 2.375rem !important;
  }

  .x\:fs-40 {
    font-size: 2.5rem !important;
  }

  .x\:fs-42 {
    font-size: 2.625rem !important;
  }

  .x\:fs-44 {
    font-size: 2.75rem !important;
  }

  .x\:fs-46 {
    font-size: 2.875rem !important;
  }

  .x\:fs-48 {
    font-size: 3rem !important;
  }

  .x\:fs-50 {
    font-size: 3.125rem !important;
  }

  .x\:fs-52 {
    font-size: 3.25rem !important;
  }

  .x\:fs-54 {
    font-size: 3.375rem !important;
  }

  .x\:fs-56 {
    font-size: 3.5rem !important;
  }

  .x\:fs-58 {
    font-size: 3.625rem !important;
  }

  .x\:fs-60 {
    font-size: 3.75rem !important;
  }
}

@media (min-width: 600px) {
  .s\:fs-10 {
    font-size: 0.625rem !important;
  }

  .s\:fs-12 {
    font-size: 0.75rem !important;
  }

  .s\:fs-14 {
    font-size: 0.875rem !important;
  }

  .s\:fs-16 {
    font-size: 1rem !important;
  }

  .s\:fs-18 {
    font-size: 1.125rem !important;
  }

  .s\:fs-20 {
    font-size: 1.25rem !important;
  }

  .s\:fs-22 {
    font-size: 1.375rem !important;
  }

  .s\:fs-24 {
    font-size: 1.5rem !important;
  }

  .s\:fs-26 {
    font-size: 1.625rem !important;
  }

  .s\:fs-28 {
    font-size: 1.75rem !important;
  }

  .s\:fs-30 {
    font-size: 1.875rem !important;
  }

  .s\:fs-32 {
    font-size: 2rem !important;
  }

  .s\:fs-34 {
    font-size: 2.125rem !important;
  }

  .s\:fs-36 {
    font-size: 2.25rem !important;
  }

  .s\:fs-38 {
    font-size: 2.375rem !important;
  }

  .s\:fs-40 {
    font-size: 2.5rem !important;
  }

  .s\:fs-42 {
    font-size: 2.625rem !important;
  }

  .s\:fs-44 {
    font-size: 2.75rem !important;
  }

  .s\:fs-46 {
    font-size: 2.875rem !important;
  }

  .s\:fs-48 {
    font-size: 3rem !important;
  }

  .s\:fs-50 {
    font-size: 3.125rem !important;
  }

  .s\:fs-52 {
    font-size: 3.25rem !important;
  }

  .s\:fs-54 {
    font-size: 3.375rem !important;
  }

  .s\:fs-56 {
    font-size: 3.5rem !important;
  }

  .s\:fs-58 {
    font-size: 3.625rem !important;
  }

  .s\:fs-60 {
    font-size: 3.75rem !important;
  }
}

@media (min-width: 768px) {
  .m\:fs-10 {
    font-size: 0.625rem !important;
  }

  .m\:fs-12 {
    font-size: 0.75rem !important;
  }

  .m\:fs-14 {
    font-size: 0.875rem !important;
  }

  .m\:fs-16 {
    font-size: 1rem !important;
  }

  .m\:fs-18 {
    font-size: 1.125rem !important;
  }

  .m\:fs-20 {
    font-size: 1.25rem !important;
  }

  .m\:fs-22 {
    font-size: 1.375rem !important;
  }

  .m\:fs-24 {
    font-size: 1.5rem !important;
  }

  .m\:fs-26 {
    font-size: 1.625rem !important;
  }

  .m\:fs-28 {
    font-size: 1.75rem !important;
  }

  .m\:fs-30 {
    font-size: 1.875rem !important;
  }

  .m\:fs-32 {
    font-size: 2rem !important;
  }

  .m\:fs-34 {
    font-size: 2.125rem !important;
  }

  .m\:fs-36 {
    font-size: 2.25rem !important;
  }

  .m\:fs-38 {
    font-size: 2.375rem !important;
  }

  .m\:fs-40 {
    font-size: 2.5rem !important;
  }

  .m\:fs-42 {
    font-size: 2.625rem !important;
  }

  .m\:fs-44 {
    font-size: 2.75rem !important;
  }

  .m\:fs-46 {
    font-size: 2.875rem !important;
  }

  .m\:fs-48 {
    font-size: 3rem !important;
  }

  .m\:fs-50 {
    font-size: 3.125rem !important;
  }

  .m\:fs-52 {
    font-size: 3.25rem !important;
  }

  .m\:fs-54 {
    font-size: 3.375rem !important;
  }

  .m\:fs-56 {
    font-size: 3.5rem !important;
  }

  .m\:fs-58 {
    font-size: 3.625rem !important;
  }

  .m\:fs-60 {
    font-size: 3.75rem !important;
  }
}

@media (min-width: 1024px) {
  .l\:fs-10 {
    font-size: 0.625rem !important;
  }

  .l\:fs-12 {
    font-size: 0.75rem !important;
  }

  .l\:fs-14 {
    font-size: 0.875rem !important;
  }

  .l\:fs-16 {
    font-size: 1rem !important;
  }

  .l\:fs-18 {
    font-size: 1.125rem !important;
  }

  .l\:fs-20 {
    font-size: 1.25rem !important;
  }

  .l\:fs-22 {
    font-size: 1.375rem !important;
  }

  .l\:fs-24 {
    font-size: 1.5rem !important;
  }

  .l\:fs-26 {
    font-size: 1.625rem !important;
  }

  .l\:fs-28 {
    font-size: 1.75rem !important;
  }

  .l\:fs-30 {
    font-size: 1.875rem !important;
  }

  .l\:fs-32 {
    font-size: 2rem !important;
  }

  .l\:fs-34 {
    font-size: 2.125rem !important;
  }

  .l\:fs-36 {
    font-size: 2.25rem !important;
  }

  .l\:fs-38 {
    font-size: 2.375rem !important;
  }

  .l\:fs-40 {
    font-size: 2.5rem !important;
  }

  .l\:fs-42 {
    font-size: 2.625rem !important;
  }

  .l\:fs-44 {
    font-size: 2.75rem !important;
  }

  .l\:fs-46 {
    font-size: 2.875rem !important;
  }

  .l\:fs-48 {
    font-size: 3rem !important;
  }

  .l\:fs-50 {
    font-size: 3.125rem !important;
  }

  .l\:fs-52 {
    font-size: 3.25rem !important;
  }

  .l\:fs-54 {
    font-size: 3.375rem !important;
  }

  .l\:fs-56 {
    font-size: 3.5rem !important;
  }

  .l\:fs-58 {
    font-size: 3.625rem !important;
  }

  .l\:fs-60 {
    font-size: 3.75rem !important;
  }
}

@media (min-width: 1366px) {
  .xl\:fs-10 {
    font-size: 0.625rem !important;
  }

  .xl\:fs-12 {
    font-size: 0.75rem !important;
  }

  .xl\:fs-14 {
    font-size: 0.875rem !important;
  }

  .xl\:fs-16 {
    font-size: 1rem !important;
  }

  .xl\:fs-18 {
    font-size: 1.125rem !important;
  }

  .xl\:fs-20 {
    font-size: 1.25rem !important;
  }

  .xl\:fs-22 {
    font-size: 1.375rem !important;
  }

  .xl\:fs-24 {
    font-size: 1.5rem !important;
  }

  .xl\:fs-26 {
    font-size: 1.625rem !important;
  }

  .xl\:fs-28 {
    font-size: 1.75rem !important;
  }

  .xl\:fs-30 {
    font-size: 1.875rem !important;
  }

  .xl\:fs-32 {
    font-size: 2rem !important;
  }

  .xl\:fs-34 {
    font-size: 2.125rem !important;
  }

  .xl\:fs-36 {
    font-size: 2.25rem !important;
  }

  .xl\:fs-38 {
    font-size: 2.375rem !important;
  }

  .xl\:fs-40 {
    font-size: 2.5rem !important;
  }

  .xl\:fs-42 {
    font-size: 2.625rem !important;
  }

  .xl\:fs-44 {
    font-size: 2.75rem !important;
  }

  .xl\:fs-46 {
    font-size: 2.875rem !important;
  }

  .xl\:fs-48 {
    font-size: 3rem !important;
  }

  .xl\:fs-50 {
    font-size: 3.125rem !important;
  }

  .xl\:fs-52 {
    font-size: 3.25rem !important;
  }

  .xl\:fs-54 {
    font-size: 3.375rem !important;
  }

  .xl\:fs-56 {
    font-size: 3.5rem !important;
  }

  .xl\:fs-58 {
    font-size: 3.625rem !important;
  }

  .xl\:fs-60 {
    font-size: 3.75rem !important;
  }
}

.fw-thin {
  font-weight: 100;
}

.fw-extra-light {
  font-weight: 200;
}

.fw-light {
  font-weight: 300;
}

.fw-regular {
  font-weight: 400;
}

.fw-medium {
  font-weight: 500;
}

.fw-semi-bold {
  font-weight: 600;
}

.fw-bold {
  font-weight: 700;
}

.fw-extra-bold {
  font-weight: 800;
}

.fw-black {
  font-weight: 900;
}

@media (min-width: 0px) {
  .x\:hide {
    display: none !important;
  }

  .x\:show {
    display: block !important;
  }

  .x\:show-inline {
    display: inline-block !important;
  }
}

@media (min-width: 600px) {
  .s\:hide {
    display: none !important;
  }

  .s\:show {
    display: block !important;
  }

  .s\:show-inline {
    display: inline-block !important;
  }
}

@media (min-width: 768px) {
  .m\:hide {
    display: none !important;
  }

  .m\:show {
    display: block !important;
  }

  .m\:show-inline {
    display: inline-block !important;
  }
}

@media (min-width: 1024px) {
  .l\:hide {
    display: none !important;
  }

  .l\:show {
    display: block !important;
  }

  .l\:show-inline {
    display: inline-block !important;
  }
}

@media (min-width: 1366px) {
  .xl\:hide {
    display: none !important;
  }

  .xl\:show {
    display: block !important;
  }

  .xl\:show-inline {
    display: inline-block !important;
  }
}

@media (min-width: 0px) {
  .x\:mrg-bt-0 {
    margin-bottom: 0px;
    margin-top: 0px;
  }

  .x\:mrg-lr-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .x\:mrg-bottom-0 {
    margin-bottom: 0px;
  }

  .x\:mrg-left-0 {
    margin-left: 0px;
  }

  .x\:mrg-right-0 {
    margin-right: 0px;
  }

  .x\:mrg-top-0 {
    margin-top: 0px;
  }

  .x\:mrg-all-0 {
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
  }

  .x\:-mrg-bt-0 {
    margin-bottom: 0px;
    margin-top: 0px;
  }

  .x\:-mrg-lr-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .x\:-mrg-bottom-0 {
    margin-bottom: 0px;
  }

  .x\:-mrg-left-0 {
    margin-left: 0px;
  }

  .x\:-mrg-right-0 {
    margin-right: 0px;
  }

  .x\:-mrg-top-0 {
    margin-top: 0px;
  }

  .x\:-mrg-all-0 {
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
  }

  .x\:mrg-bt-5 {
    margin-bottom: 5px;
    margin-top: 5px;
  }

  .x\:mrg-lr-5 {
    margin-left: 5px;
    margin-right: 5px;
  }

  .x\:mrg-bottom-5 {
    margin-bottom: 5px;
  }

  .x\:mrg-left-5 {
    margin-left: 5px;
  }

  .x\:mrg-right-5 {
    margin-right: 5px;
  }

  .x\:mrg-top-5 {
    margin-top: 5px;
  }

  .x\:mrg-all-5 {
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
  }

  .x\:-mrg-bt-5 {
    margin-bottom: -5px;
    margin-top: -5px;
  }

  .x\:-mrg-lr-5 {
    margin-left: -5px;
    margin-right: -5px;
  }

  .x\:-mrg-bottom-5 {
    margin-bottom: -5px;
  }

  .x\:-mrg-left-5 {
    margin-left: -5px;
  }

  .x\:-mrg-right-5 {
    margin-right: -5px;
  }

  .x\:-mrg-top-5 {
    margin-top: -5px;
  }

  .x\:-mrg-all-5 {
    margin-bottom: -5px;
    margin-left: -5px;
    margin-right: -5px;
    margin-top: -5px;
  }

  .x\:mrg-bt-10 {
    margin-bottom: 10px;
    margin-top: 10px;
  }

  .x\:mrg-lr-10 {
    margin-left: 10px;
    margin-right: 10px;
  }

  .x\:mrg-bottom-10 {
    margin-bottom: 10px;
  }

  .x\:mrg-left-10 {
    margin-left: 10px;
  }

  .x\:mrg-right-10 {
    margin-right: 10px;
  }

  .x\:mrg-top-10 {
    margin-top: 10px;
  }

  .x\:mrg-all-10 {
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
  }

  .x\:-mrg-bt-10 {
    margin-bottom: -10px;
    margin-top: -10px;
  }

  .x\:-mrg-lr-10 {
    margin-left: -10px;
    margin-right: -10px;
  }

  .x\:-mrg-bottom-10 {
    margin-bottom: -10px;
  }

  .x\:-mrg-left-10 {
    margin-left: -10px;
  }

  .x\:-mrg-right-10 {
    margin-right: -10px;
  }

  .x\:-mrg-top-10 {
    margin-top: -10px;
  }

  .x\:-mrg-all-10 {
    margin-bottom: -10px;
    margin-left: -10px;
    margin-right: -10px;
    margin-top: -10px;
  }

  .x\:mrg-bt-15 {
    margin-bottom: 15px;
    margin-top: 15px;
  }

  .x\:mrg-lr-15 {
    margin-left: 15px;
    margin-right: 15px;
  }

  .x\:mrg-bottom-15 {
    margin-bottom: 15px;
  }

  .x\:mrg-left-15 {
    margin-left: 15px;
  }

  .x\:mrg-right-15 {
    margin-right: 15px;
  }

  .x\:mrg-top-15 {
    margin-top: 15px;
  }

  .x\:mrg-all-15 {
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 15px;
  }

  .x\:-mrg-bt-15 {
    margin-bottom: -15px;
    margin-top: -15px;
  }

  .x\:-mrg-lr-15 {
    margin-left: -15px;
    margin-right: -15px;
  }

  .x\:-mrg-bottom-15 {
    margin-bottom: -15px;
  }

  .x\:-mrg-left-15 {
    margin-left: -15px;
  }

  .x\:-mrg-right-15 {
    margin-right: -15px;
  }

  .x\:-mrg-top-15 {
    margin-top: -15px;
  }

  .x\:-mrg-all-15 {
    margin-bottom: -15px;
    margin-left: -15px;
    margin-right: -15px;
    margin-top: -15px;
  }

  .x\:mrg-bt-20 {
    margin-bottom: 20px;
    margin-top: 20px;
  }

  .x\:mrg-lr-20 {
    margin-left: 20px;
    margin-right: 20px;
  }

  .x\:mrg-bottom-20 {
    margin-bottom: 20px;
  }

  .x\:mrg-left-20 {
    margin-left: 20px;
  }

  .x\:mrg-right-20 {
    margin-right: 20px;
  }

  .x\:mrg-top-20 {
    margin-top: 20px;
  }

  .x\:mrg-all-20 {
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
  }

  .x\:-mrg-bt-20 {
    margin-bottom: -20px;
    margin-top: -20px;
  }

  .x\:-mrg-lr-20 {
    margin-left: -20px;
    margin-right: -20px;
  }

  .x\:-mrg-bottom-20 {
    margin-bottom: -20px;
  }

  .x\:-mrg-left-20 {
    margin-left: -20px;
  }

  .x\:-mrg-right-20 {
    margin-right: -20px;
  }

  .x\:-mrg-top-20 {
    margin-top: -20px;
  }

  .x\:-mrg-all-20 {
    margin-bottom: -20px;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -20px;
  }

  .x\:mrg-bt-25 {
    margin-bottom: 25px;
    margin-top: 25px;
  }

  .x\:mrg-lr-25 {
    margin-left: 25px;
    margin-right: 25px;
  }

  .x\:mrg-bottom-25 {
    margin-bottom: 25px;
  }

  .x\:mrg-left-25 {
    margin-left: 25px;
  }

  .x\:mrg-right-25 {
    margin-right: 25px;
  }

  .x\:mrg-top-25 {
    margin-top: 25px;
  }

  .x\:mrg-all-25 {
    margin-bottom: 25px;
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 25px;
  }

  .x\:-mrg-bt-25 {
    margin-bottom: -25px;
    margin-top: -25px;
  }

  .x\:-mrg-lr-25 {
    margin-left: -25px;
    margin-right: -25px;
  }

  .x\:-mrg-bottom-25 {
    margin-bottom: -25px;
  }

  .x\:-mrg-left-25 {
    margin-left: -25px;
  }

  .x\:-mrg-right-25 {
    margin-right: -25px;
  }

  .x\:-mrg-top-25 {
    margin-top: -25px;
  }

  .x\:-mrg-all-25 {
    margin-bottom: -25px;
    margin-left: -25px;
    margin-right: -25px;
    margin-top: -25px;
  }

  .x\:mrg-bt-30 {
    margin-bottom: 30px;
    margin-top: 30px;
  }

  .x\:mrg-lr-30 {
    margin-left: 30px;
    margin-right: 30px;
  }

  .x\:mrg-bottom-30 {
    margin-bottom: 30px;
  }

  .x\:mrg-left-30 {
    margin-left: 30px;
  }

  .x\:mrg-right-30 {
    margin-right: 30px;
  }

  .x\:mrg-top-30 {
    margin-top: 30px;
  }

  .x\:mrg-all-30 {
    margin-bottom: 30px;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 30px;
  }

  .x\:-mrg-bt-30 {
    margin-bottom: -30px;
    margin-top: -30px;
  }

  .x\:-mrg-lr-30 {
    margin-left: -30px;
    margin-right: -30px;
  }

  .x\:-mrg-bottom-30 {
    margin-bottom: -30px;
  }

  .x\:-mrg-left-30 {
    margin-left: -30px;
  }

  .x\:-mrg-right-30 {
    margin-right: -30px;
  }

  .x\:-mrg-top-30 {
    margin-top: -30px;
  }

  .x\:-mrg-all-30 {
    margin-bottom: -30px;
    margin-left: -30px;
    margin-right: -30px;
    margin-top: -30px;
  }

  .x\:mrg-bt-35 {
    margin-bottom: 35px;
    margin-top: 35px;
  }

  .x\:mrg-lr-35 {
    margin-left: 35px;
    margin-right: 35px;
  }

  .x\:mrg-bottom-35 {
    margin-bottom: 35px;
  }

  .x\:mrg-left-35 {
    margin-left: 35px;
  }

  .x\:mrg-right-35 {
    margin-right: 35px;
  }

  .x\:mrg-top-35 {
    margin-top: 35px;
  }

  .x\:mrg-all-35 {
    margin-bottom: 35px;
    margin-left: 35px;
    margin-right: 35px;
    margin-top: 35px;
  }

  .x\:-mrg-bt-35 {
    margin-bottom: -35px;
    margin-top: -35px;
  }

  .x\:-mrg-lr-35 {
    margin-left: -35px;
    margin-right: -35px;
  }

  .x\:-mrg-bottom-35 {
    margin-bottom: -35px;
  }

  .x\:-mrg-left-35 {
    margin-left: -35px;
  }

  .x\:-mrg-right-35 {
    margin-right: -35px;
  }

  .x\:-mrg-top-35 {
    margin-top: -35px;
  }

  .x\:-mrg-all-35 {
    margin-bottom: -35px;
    margin-left: -35px;
    margin-right: -35px;
    margin-top: -35px;
  }

  .x\:mrg-bt-40 {
    margin-bottom: 40px;
    margin-top: 40px;
  }

  .x\:mrg-lr-40 {
    margin-left: 40px;
    margin-right: 40px;
  }

  .x\:mrg-bottom-40 {
    margin-bottom: 40px;
  }

  .x\:mrg-left-40 {
    margin-left: 40px;
  }

  .x\:mrg-right-40 {
    margin-right: 40px;
  }

  .x\:mrg-top-40 {
    margin-top: 40px;
  }

  .x\:mrg-all-40 {
    margin-bottom: 40px;
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 40px;
  }

  .x\:-mrg-bt-40 {
    margin-bottom: -40px;
    margin-top: -40px;
  }

  .x\:-mrg-lr-40 {
    margin-left: -40px;
    margin-right: -40px;
  }

  .x\:-mrg-bottom-40 {
    margin-bottom: -40px;
  }

  .x\:-mrg-left-40 {
    margin-left: -40px;
  }

  .x\:-mrg-right-40 {
    margin-right: -40px;
  }

  .x\:-mrg-top-40 {
    margin-top: -40px;
  }

  .x\:-mrg-all-40 {
    margin-bottom: -40px;
    margin-left: -40px;
    margin-right: -40px;
    margin-top: -40px;
  }

  .x\:mrg-bt-45 {
    margin-bottom: 45px;
    margin-top: 45px;
  }

  .x\:mrg-lr-45 {
    margin-left: 45px;
    margin-right: 45px;
  }

  .x\:mrg-bottom-45 {
    margin-bottom: 45px;
  }

  .x\:mrg-left-45 {
    margin-left: 45px;
  }

  .x\:mrg-right-45 {
    margin-right: 45px;
  }

  .x\:mrg-top-45 {
    margin-top: 45px;
  }

  .x\:mrg-all-45 {
    margin-bottom: 45px;
    margin-left: 45px;
    margin-right: 45px;
    margin-top: 45px;
  }

  .x\:-mrg-bt-45 {
    margin-bottom: -45px;
    margin-top: -45px;
  }

  .x\:-mrg-lr-45 {
    margin-left: -45px;
    margin-right: -45px;
  }

  .x\:-mrg-bottom-45 {
    margin-bottom: -45px;
  }

  .x\:-mrg-left-45 {
    margin-left: -45px;
  }

  .x\:-mrg-right-45 {
    margin-right: -45px;
  }

  .x\:-mrg-top-45 {
    margin-top: -45px;
  }

  .x\:-mrg-all-45 {
    margin-bottom: -45px;
    margin-left: -45px;
    margin-right: -45px;
    margin-top: -45px;
  }

  .x\:mrg-bt-50 {
    margin-bottom: 50px;
    margin-top: 50px;
  }

  .x\:mrg-lr-50 {
    margin-left: 50px;
    margin-right: 50px;
  }

  .x\:mrg-bottom-50 {
    margin-bottom: 50px;
  }

  .x\:mrg-left-50 {
    margin-left: 50px;
  }

  .x\:mrg-right-50 {
    margin-right: 50px;
  }

  .x\:mrg-top-50 {
    margin-top: 50px;
  }

  .x\:mrg-all-50 {
    margin-bottom: 50px;
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 50px;
  }

  .x\:-mrg-bt-50 {
    margin-bottom: -50px;
    margin-top: -50px;
  }

  .x\:-mrg-lr-50 {
    margin-left: -50px;
    margin-right: -50px;
  }

  .x\:-mrg-bottom-50 {
    margin-bottom: -50px;
  }

  .x\:-mrg-left-50 {
    margin-left: -50px;
  }

  .x\:-mrg-right-50 {
    margin-right: -50px;
  }

  .x\:-mrg-top-50 {
    margin-top: -50px;
  }

  .x\:-mrg-all-50 {
    margin-bottom: -50px;
    margin-left: -50px;
    margin-right: -50px;
    margin-top: -50px;
  }

  .x\:mrg-bt-55 {
    margin-bottom: 55px;
    margin-top: 55px;
  }

  .x\:mrg-lr-55 {
    margin-left: 55px;
    margin-right: 55px;
  }

  .x\:mrg-bottom-55 {
    margin-bottom: 55px;
  }

  .x\:mrg-left-55 {
    margin-left: 55px;
  }

  .x\:mrg-right-55 {
    margin-right: 55px;
  }

  .x\:mrg-top-55 {
    margin-top: 55px;
  }

  .x\:mrg-all-55 {
    margin-bottom: 55px;
    margin-left: 55px;
    margin-right: 55px;
    margin-top: 55px;
  }

  .x\:-mrg-bt-55 {
    margin-bottom: -55px;
    margin-top: -55px;
  }

  .x\:-mrg-lr-55 {
    margin-left: -55px;
    margin-right: -55px;
  }

  .x\:-mrg-bottom-55 {
    margin-bottom: -55px;
  }

  .x\:-mrg-left-55 {
    margin-left: -55px;
  }

  .x\:-mrg-right-55 {
    margin-right: -55px;
  }

  .x\:-mrg-top-55 {
    margin-top: -55px;
  }

  .x\:-mrg-all-55 {
    margin-bottom: -55px;
    margin-left: -55px;
    margin-right: -55px;
    margin-top: -55px;
  }

  .x\:mrg-bt-60 {
    margin-bottom: 60px;
    margin-top: 60px;
  }

  .x\:mrg-lr-60 {
    margin-left: 60px;
    margin-right: 60px;
  }

  .x\:mrg-bottom-60 {
    margin-bottom: 60px;
  }

  .x\:mrg-left-60 {
    margin-left: 60px;
  }

  .x\:mrg-right-60 {
    margin-right: 60px;
  }

  .x\:mrg-top-60 {
    margin-top: 60px;
  }

  .x\:mrg-all-60 {
    margin-bottom: 60px;
    margin-left: 60px;
    margin-right: 60px;
    margin-top: 60px;
  }

  .x\:-mrg-bt-60 {
    margin-bottom: -60px;
    margin-top: -60px;
  }

  .x\:-mrg-lr-60 {
    margin-left: -60px;
    margin-right: -60px;
  }

  .x\:-mrg-bottom-60 {
    margin-bottom: -60px;
  }

  .x\:-mrg-left-60 {
    margin-left: -60px;
  }

  .x\:-mrg-right-60 {
    margin-right: -60px;
  }

  .x\:-mrg-top-60 {
    margin-top: -60px;
  }

  .x\:-mrg-all-60 {
    margin-bottom: -60px;
    margin-left: -60px;
    margin-right: -60px;
    margin-top: -60px;
  }

  .x\:mrg-bt-65 {
    margin-bottom: 65px;
    margin-top: 65px;
  }

  .x\:mrg-lr-65 {
    margin-left: 65px;
    margin-right: 65px;
  }

  .x\:mrg-bottom-65 {
    margin-bottom: 65px;
  }

  .x\:mrg-left-65 {
    margin-left: 65px;
  }

  .x\:mrg-right-65 {
    margin-right: 65px;
  }

  .x\:mrg-top-65 {
    margin-top: 65px;
  }

  .x\:mrg-all-65 {
    margin-bottom: 65px;
    margin-left: 65px;
    margin-right: 65px;
    margin-top: 65px;
  }

  .x\:-mrg-bt-65 {
    margin-bottom: -65px;
    margin-top: -65px;
  }

  .x\:-mrg-lr-65 {
    margin-left: -65px;
    margin-right: -65px;
  }

  .x\:-mrg-bottom-65 {
    margin-bottom: -65px;
  }

  .x\:-mrg-left-65 {
    margin-left: -65px;
  }

  .x\:-mrg-right-65 {
    margin-right: -65px;
  }

  .x\:-mrg-top-65 {
    margin-top: -65px;
  }

  .x\:-mrg-all-65 {
    margin-bottom: -65px;
    margin-left: -65px;
    margin-right: -65px;
    margin-top: -65px;
  }

  .x\:mrg-bt-70 {
    margin-bottom: 70px;
    margin-top: 70px;
  }

  .x\:mrg-lr-70 {
    margin-left: 70px;
    margin-right: 70px;
  }

  .x\:mrg-bottom-70 {
    margin-bottom: 70px;
  }

  .x\:mrg-left-70 {
    margin-left: 70px;
  }

  .x\:mrg-right-70 {
    margin-right: 70px;
  }

  .x\:mrg-top-70 {
    margin-top: 70px;
  }

  .x\:mrg-all-70 {
    margin-bottom: 70px;
    margin-left: 70px;
    margin-right: 70px;
    margin-top: 70px;
  }

  .x\:-mrg-bt-70 {
    margin-bottom: -70px;
    margin-top: -70px;
  }

  .x\:-mrg-lr-70 {
    margin-left: -70px;
    margin-right: -70px;
  }

  .x\:-mrg-bottom-70 {
    margin-bottom: -70px;
  }

  .x\:-mrg-left-70 {
    margin-left: -70px;
  }

  .x\:-mrg-right-70 {
    margin-right: -70px;
  }

  .x\:-mrg-top-70 {
    margin-top: -70px;
  }

  .x\:-mrg-all-70 {
    margin-bottom: -70px;
    margin-left: -70px;
    margin-right: -70px;
    margin-top: -70px;
  }

  .x\:mrg-bt-75 {
    margin-bottom: 75px;
    margin-top: 75px;
  }

  .x\:mrg-lr-75 {
    margin-left: 75px;
    margin-right: 75px;
  }

  .x\:mrg-bottom-75 {
    margin-bottom: 75px;
  }

  .x\:mrg-left-75 {
    margin-left: 75px;
  }

  .x\:mrg-right-75 {
    margin-right: 75px;
  }

  .x\:mrg-top-75 {
    margin-top: 75px;
  }

  .x\:mrg-all-75 {
    margin-bottom: 75px;
    margin-left: 75px;
    margin-right: 75px;
    margin-top: 75px;
  }

  .x\:-mrg-bt-75 {
    margin-bottom: -75px;
    margin-top: -75px;
  }

  .x\:-mrg-lr-75 {
    margin-left: -75px;
    margin-right: -75px;
  }

  .x\:-mrg-bottom-75 {
    margin-bottom: -75px;
  }

  .x\:-mrg-left-75 {
    margin-left: -75px;
  }

  .x\:-mrg-right-75 {
    margin-right: -75px;
  }

  .x\:-mrg-top-75 {
    margin-top: -75px;
  }

  .x\:-mrg-all-75 {
    margin-bottom: -75px;
    margin-left: -75px;
    margin-right: -75px;
    margin-top: -75px;
  }

  .x\:mrg-bt-80 {
    margin-bottom: 80px;
    margin-top: 80px;
  }

  .x\:mrg-lr-80 {
    margin-left: 80px;
    margin-right: 80px;
  }

  .x\:mrg-bottom-80 {
    margin-bottom: 80px;
  }

  .x\:mrg-left-80 {
    margin-left: 80px;
  }

  .x\:mrg-right-80 {
    margin-right: 80px;
  }

  .x\:mrg-top-80 {
    margin-top: 80px;
  }

  .x\:mrg-all-80 {
    margin-bottom: 80px;
    margin-left: 80px;
    margin-right: 80px;
    margin-top: 80px;
  }

  .x\:-mrg-bt-80 {
    margin-bottom: -80px;
    margin-top: -80px;
  }

  .x\:-mrg-lr-80 {
    margin-left: -80px;
    margin-right: -80px;
  }

  .x\:-mrg-bottom-80 {
    margin-bottom: -80px;
  }

  .x\:-mrg-left-80 {
    margin-left: -80px;
  }

  .x\:-mrg-right-80 {
    margin-right: -80px;
  }

  .x\:-mrg-top-80 {
    margin-top: -80px;
  }

  .x\:-mrg-all-80 {
    margin-bottom: -80px;
    margin-left: -80px;
    margin-right: -80px;
    margin-top: -80px;
  }
}

@media (min-width: 600px) {
  .s\:mrg-bt-0 {
    margin-bottom: 0px;
    margin-top: 0px;
  }

  .s\:mrg-lr-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .s\:mrg-bottom-0 {
    margin-bottom: 0px;
  }

  .s\:mrg-left-0 {
    margin-left: 0px;
  }

  .s\:mrg-right-0 {
    margin-right: 0px;
  }

  .s\:mrg-top-0 {
    margin-top: 0px;
  }

  .s\:mrg-all-0 {
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
  }

  .s\:-mrg-bt-0 {
    margin-bottom: 0px;
    margin-top: 0px;
  }

  .s\:-mrg-lr-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .s\:-mrg-bottom-0 {
    margin-bottom: 0px;
  }

  .s\:-mrg-left-0 {
    margin-left: 0px;
  }

  .s\:-mrg-right-0 {
    margin-right: 0px;
  }

  .s\:-mrg-top-0 {
    margin-top: 0px;
  }

  .s\:-mrg-all-0 {
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
  }

  .s\:mrg-bt-5 {
    margin-bottom: 5px;
    margin-top: 5px;
  }

  .s\:mrg-lr-5 {
    margin-left: 5px;
    margin-right: 5px;
  }

  .s\:mrg-bottom-5 {
    margin-bottom: 5px;
  }

  .s\:mrg-left-5 {
    margin-left: 5px;
  }

  .s\:mrg-right-5 {
    margin-right: 5px;
  }

  .s\:mrg-top-5 {
    margin-top: 5px;
  }

  .s\:mrg-all-5 {
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
  }

  .s\:-mrg-bt-5 {
    margin-bottom: -5px;
    margin-top: -5px;
  }

  .s\:-mrg-lr-5 {
    margin-left: -5px;
    margin-right: -5px;
  }

  .s\:-mrg-bottom-5 {
    margin-bottom: -5px;
  }

  .s\:-mrg-left-5 {
    margin-left: -5px;
  }

  .s\:-mrg-right-5 {
    margin-right: -5px;
  }

  .s\:-mrg-top-5 {
    margin-top: -5px;
  }

  .s\:-mrg-all-5 {
    margin-bottom: -5px;
    margin-left: -5px;
    margin-right: -5px;
    margin-top: -5px;
  }

  .s\:mrg-bt-10 {
    margin-bottom: 10px;
    margin-top: 10px;
  }

  .s\:mrg-lr-10 {
    margin-left: 10px;
    margin-right: 10px;
  }

  .s\:mrg-bottom-10 {
    margin-bottom: 10px;
  }

  .s\:mrg-left-10 {
    margin-left: 10px;
  }

  .s\:mrg-right-10 {
    margin-right: 10px;
  }

  .s\:mrg-top-10 {
    margin-top: 10px;
  }

  .s\:mrg-all-10 {
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
  }

  .s\:-mrg-bt-10 {
    margin-bottom: -10px;
    margin-top: -10px;
  }

  .s\:-mrg-lr-10 {
    margin-left: -10px;
    margin-right: -10px;
  }

  .s\:-mrg-bottom-10 {
    margin-bottom: -10px;
  }

  .s\:-mrg-left-10 {
    margin-left: -10px;
  }

  .s\:-mrg-right-10 {
    margin-right: -10px;
  }

  .s\:-mrg-top-10 {
    margin-top: -10px;
  }

  .s\:-mrg-all-10 {
    margin-bottom: -10px;
    margin-left: -10px;
    margin-right: -10px;
    margin-top: -10px;
  }

  .s\:mrg-bt-15 {
    margin-bottom: 15px;
    margin-top: 15px;
  }

  .s\:mrg-lr-15 {
    margin-left: 15px;
    margin-right: 15px;
  }

  .s\:mrg-bottom-15 {
    margin-bottom: 15px;
  }

  .s\:mrg-left-15 {
    margin-left: 15px;
  }

  .s\:mrg-right-15 {
    margin-right: 15px;
  }

  .s\:mrg-top-15 {
    margin-top: 15px;
  }

  .s\:mrg-all-15 {
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 15px;
  }

  .s\:-mrg-bt-15 {
    margin-bottom: -15px;
    margin-top: -15px;
  }

  .s\:-mrg-lr-15 {
    margin-left: -15px;
    margin-right: -15px;
  }

  .s\:-mrg-bottom-15 {
    margin-bottom: -15px;
  }

  .s\:-mrg-left-15 {
    margin-left: -15px;
  }

  .s\:-mrg-right-15 {
    margin-right: -15px;
  }

  .s\:-mrg-top-15 {
    margin-top: -15px;
  }

  .s\:-mrg-all-15 {
    margin-bottom: -15px;
    margin-left: -15px;
    margin-right: -15px;
    margin-top: -15px;
  }

  .s\:mrg-bt-20 {
    margin-bottom: 20px;
    margin-top: 20px;
  }

  .s\:mrg-lr-20 {
    margin-left: 20px;
    margin-right: 20px;
  }

  .s\:mrg-bottom-20 {
    margin-bottom: 20px;
  }

  .s\:mrg-left-20 {
    margin-left: 20px;
  }

  .s\:mrg-right-20 {
    margin-right: 20px;
  }

  .s\:mrg-top-20 {
    margin-top: 20px;
  }

  .s\:mrg-all-20 {
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
  }

  .s\:-mrg-bt-20 {
    margin-bottom: -20px;
    margin-top: -20px;
  }

  .s\:-mrg-lr-20 {
    margin-left: -20px;
    margin-right: -20px;
  }

  .s\:-mrg-bottom-20 {
    margin-bottom: -20px;
  }

  .s\:-mrg-left-20 {
    margin-left: -20px;
  }

  .s\:-mrg-right-20 {
    margin-right: -20px;
  }

  .s\:-mrg-top-20 {
    margin-top: -20px;
  }

  .s\:-mrg-all-20 {
    margin-bottom: -20px;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -20px;
  }

  .s\:mrg-bt-25 {
    margin-bottom: 25px;
    margin-top: 25px;
  }

  .s\:mrg-lr-25 {
    margin-left: 25px;
    margin-right: 25px;
  }

  .s\:mrg-bottom-25 {
    margin-bottom: 25px;
  }

  .s\:mrg-left-25 {
    margin-left: 25px;
  }

  .s\:mrg-right-25 {
    margin-right: 25px;
  }

  .s\:mrg-top-25 {
    margin-top: 25px;
  }

  .s\:mrg-all-25 {
    margin-bottom: 25px;
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 25px;
  }

  .s\:-mrg-bt-25 {
    margin-bottom: -25px;
    margin-top: -25px;
  }

  .s\:-mrg-lr-25 {
    margin-left: -25px;
    margin-right: -25px;
  }

  .s\:-mrg-bottom-25 {
    margin-bottom: -25px;
  }

  .s\:-mrg-left-25 {
    margin-left: -25px;
  }

  .s\:-mrg-right-25 {
    margin-right: -25px;
  }

  .s\:-mrg-top-25 {
    margin-top: -25px;
  }

  .s\:-mrg-all-25 {
    margin-bottom: -25px;
    margin-left: -25px;
    margin-right: -25px;
    margin-top: -25px;
  }

  .s\:mrg-bt-30 {
    margin-bottom: 30px;
    margin-top: 30px;
  }

  .s\:mrg-lr-30 {
    margin-left: 30px;
    margin-right: 30px;
  }

  .s\:mrg-bottom-30 {
    margin-bottom: 30px;
  }

  .s\:mrg-left-30 {
    margin-left: 30px;
  }

  .s\:mrg-right-30 {
    margin-right: 30px;
  }

  .s\:mrg-top-30 {
    margin-top: 30px;
  }

  .s\:mrg-all-30 {
    margin-bottom: 30px;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 30px;
  }

  .s\:-mrg-bt-30 {
    margin-bottom: -30px;
    margin-top: -30px;
  }

  .s\:-mrg-lr-30 {
    margin-left: -30px;
    margin-right: -30px;
  }

  .s\:-mrg-bottom-30 {
    margin-bottom: -30px;
  }

  .s\:-mrg-left-30 {
    margin-left: -30px;
  }

  .s\:-mrg-right-30 {
    margin-right: -30px;
  }

  .s\:-mrg-top-30 {
    margin-top: -30px;
  }

  .s\:-mrg-all-30 {
    margin-bottom: -30px;
    margin-left: -30px;
    margin-right: -30px;
    margin-top: -30px;
  }

  .s\:mrg-bt-35 {
    margin-bottom: 35px;
    margin-top: 35px;
  }

  .s\:mrg-lr-35 {
    margin-left: 35px;
    margin-right: 35px;
  }

  .s\:mrg-bottom-35 {
    margin-bottom: 35px;
  }

  .s\:mrg-left-35 {
    margin-left: 35px;
  }

  .s\:mrg-right-35 {
    margin-right: 35px;
  }

  .s\:mrg-top-35 {
    margin-top: 35px;
  }

  .s\:mrg-all-35 {
    margin-bottom: 35px;
    margin-left: 35px;
    margin-right: 35px;
    margin-top: 35px;
  }

  .s\:-mrg-bt-35 {
    margin-bottom: -35px;
    margin-top: -35px;
  }

  .s\:-mrg-lr-35 {
    margin-left: -35px;
    margin-right: -35px;
  }

  .s\:-mrg-bottom-35 {
    margin-bottom: -35px;
  }

  .s\:-mrg-left-35 {
    margin-left: -35px;
  }

  .s\:-mrg-right-35 {
    margin-right: -35px;
  }

  .s\:-mrg-top-35 {
    margin-top: -35px;
  }

  .s\:-mrg-all-35 {
    margin-bottom: -35px;
    margin-left: -35px;
    margin-right: -35px;
    margin-top: -35px;
  }

  .s\:mrg-bt-40 {
    margin-bottom: 40px;
    margin-top: 40px;
  }

  .s\:mrg-lr-40 {
    margin-left: 40px;
    margin-right: 40px;
  }

  .s\:mrg-bottom-40 {
    margin-bottom: 40px;
  }

  .s\:mrg-left-40 {
    margin-left: 40px;
  }

  .s\:mrg-right-40 {
    margin-right: 40px;
  }

  .s\:mrg-top-40 {
    margin-top: 40px;
  }

  .s\:mrg-all-40 {
    margin-bottom: 40px;
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 40px;
  }