.grid {
  transition: grid-gap 0.6s;
  pointer-events: none;
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  padding: 22px;
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  grid-gap: calc((100% / 18) - 3.372%);
}
.grid .bar {
  background: #FFFFFF;
  opacity: 0.4;
}
.grid-container {
  display: grid !important;
  grid-template-columns: repeat(18, 1fr);
  grid-gap: calc((100% / 18) - 3.372%);
  margin: 0;
  transition: grid-gap 0.6s;
}
.grid-container.grid-padding-xy {
  padding: 22px;
}
.grid-container.grid-padding-x {
  padding: 0 22px;
}
.grid-align-bottom {
  margin-top: auto !important;
}
.grid-align-bottom p:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 1195px) {
  .grid-col-xl-18 {
    grid-column: span 18;
  }
  .grid-col-xl-17 {
    grid-column: span 17;
  }
  .grid-col-xl-16 {
    grid-column: span 16;
  }
  .grid-col-xl-15 {
    grid-column: span 15;
  }
  .grid-col-xl-14 {
    grid-column: span 14;
  }
  .grid-col-xl-13 {
    grid-column: span 13;
  }
  .grid-col-xl-12 {
    grid-column: span 12;
  }
  .grid-col-xl-11 {
    grid-column: span 11;
  }
  .grid-col-xl-10 {
    grid-column: span 10;
  }
  .grid-col-xl-9 {
    grid-column: span 9;
  }
  .grid-col-xl-8 {
    grid-column: span 8;
  }
  .grid-col-xl-7 {
    grid-column: span 7;
  }
  .grid-col-xl-6 {
    grid-column: span 6;
  }
  .grid-col-xl-5 {
    grid-column: span 5;
  }
  .grid-col-xl-4 {
    grid-column: span 4;
  }
  .grid-col-xl-3 {
    grid-column: span 3;
  }
  .grid-col-xl-2 {
    grid-column: span 2;
  }
  .grid-col-xl-1 {
    grid-column: span 1;
  }
}
@media only screen and (max-width: 1194px) and (min-width: 770px) {
  .grid-col-md-4 {
    grid-column: span 4;
  }
  .grid-col-md-3 {
    grid-column: span 3;
  }
  .grid-col-md-2 {
    grid-column: span 2;
  }
  .grid-col-md-1 {
    grid-column: span 1;
  }
}
@media only screen and (max-width: 1194px) and (min-width: 770px) {
  .grid-col-md-0 {
    display: none;
  }
}
@media only screen and (max-width: 769px) {
  .grid-col-sm-2 {
    grid-column: span 2;
  }
  .grid-col-sm-1 {
    grid-column: span 1;
  }
}
@media only screen and (max-width: 769px) {
  .grid-col-sm-0 {
    display: none;
  }
}
@media only screen and (max-width: 769px) and (min-width: 100px) {
  .grid {
    padding: 24px;
  }
  .grid,
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
  }
  #content {
    padding: 24px !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}
@media only screen and (max-width: 1194px) and (min-width: 770px) {
  .grid,
  .grid-container {
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 22px;
  }
}
@media only screen and (max-width: 1280px) and (min-width: 1195px) {
  .grid,
  .grid-container {
    grid-gap: 14px;
  }
}
@media only screen and (max-width: 1440px) and (min-width: 1281px) {
  .grid,
  .grid-container {
    grid-gap: 16px;
  }
}
@media only screen and (min-width: 1441px) {
  .grid,
  .grid-container {
    grid-gap: calc((100% / 18) - 4.372%);
  }
}
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  max-width: 100%;
}
#content {
  margin-top: 133px !important;
  padding: 22px;
  padding-top: 24px !important;
  padding-bottom: 22px !important;
}
.row * {
  margin-right: 0;
  margin-left: 0;
}
@media only screen and (max-width: 769px) and (min-width: 10px) {
  #content {
    margin-top: 14px !important;
    padding-top: 56px !important;
  }
}
@media only screen and (max-width: 1194px) and (min-width: 770px) {
  #content {
    margin-top: 28px !important;
    padding-top: 72px !important;
  }
}