[class|='flex'],
[class*='flex-'], .flex {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  flex: 1 0 100%;
}

[class|='flex'],
[class*='flex-'] {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media only screen and (min-width: 768px) {
  [class|='flex'],
  [class*='flex-'] {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

.flex--auto {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

.flex-1 {
  box-sizing: border-box;
  flex: 0 0 8.33333%;
}

.flex-2 {
  box-sizing: border-box;
  flex: 0 0 16.66667%;
}

.flex-3 {
  box-sizing: border-box;
  flex: 0 0 25%;
}

.flex-4 {
  box-sizing: border-box;
  flex: 0 0 33.33333%;
}

.flex-5 {
  box-sizing: border-box;
  flex: 0 0 41.66667%;
}

.flex-6 {
  box-sizing: border-box;
  flex: 0 0 50%;
}

.flex-7 {
  box-sizing: border-box;
  flex: 0 0 58.33333%;
}

.flex-8 {
  box-sizing: border-box;
  flex: 0 0 66.66667%;
}

.flex-9 {
  box-sizing: border-box;
  flex: 0 0 75%;
}

.flex-10 {
  box-sizing: border-box;
  flex: 0 0 83.33333%;
}

.flex-11 {
  box-sizing: border-box;
  flex: 0 0 91.66667%;
}

.flex-12 {
  box-sizing: border-box;
  flex: 0 0 100%;
}

@media only screen and (min-width: 375px) {
  .flex-xs {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    flex: 1 0 100%;
  }
  .flex-xs-1 {
    box-sizing: border-box;
    flex: 0 0 8.33333%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 375px) and (min-width: 768px) {
  .flex-xs-1 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 375px) {
  .flex-xs-2 {
    box-sizing: border-box;
    flex: 0 0 16.66667%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 375px) and (min-width: 768px) {
  .flex-xs-2 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 375px) {
  .flex-xs-3 {
    box-sizing: border-box;
    flex: 0 0 25%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 375px) and (min-width: 768px) {
  .flex-xs-3 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 375px) {
  .flex-xs-4 {
    box-sizing: border-box;
    flex: 0 0 33.33333%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 375px) and (min-width: 768px) {
  .flex-xs-4 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 375px) {
  .flex-xs-5 {
    box-sizing: border-box;
    flex: 0 0 41.66667%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 375px) and (min-width: 768px) {
  .flex-xs-5 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 375px) {
  .flex-xs-6 {
    box-sizing: border-box;
    flex: 0 0 50%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 375px) and (min-width: 768px) {
  .flex-xs-6 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 375px) {
  .flex-xs-7 {
    box-sizing: border-box;
    flex: 0 0 58.33333%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 375px) and (min-width: 768px) {
  .flex-xs-7 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 375px) {
  .flex-xs-8 {
    box-sizing: border-box;
    flex: 0 0 66.66667%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 375px) and (min-width: 768px) {
  .flex-xs-8 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 375px) {
  .flex-xs-9 {
    box-sizing: border-box;
    flex: 0 0 75%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 375px) and (min-width: 768px) {
  .flex-xs-9 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 375px) {
  .flex-xs-10 {
    box-sizing: border-box;
    flex: 0 0 83.33333%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 375px) and (min-width: 768px) {
  .flex-xs-10 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 375px) {
  .flex-xs-11 {
    box-sizing: border-box;
    flex: 0 0 91.66667%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 375px) and (min-width: 768px) {
  .flex-xs-11 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 375px) {
  .flex-xs-12 {
    box-sizing: border-box;
    flex: 0 0 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 375px) and (min-width: 768px) {
  .flex-xs-12 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 568px) {
  .flex-sm {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    flex: 1 0 100%;
  }
  .flex-sm-1 {
    box-sizing: border-box;
    flex: 0 0 8.33333%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 568px) and (min-width: 768px) {
  .flex-sm-1 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 568px) {
  .flex-sm-2 {
    box-sizing: border-box;
    flex: 0 0 16.66667%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 568px) and (min-width: 768px) {
  .flex-sm-2 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 568px) {
  .flex-sm-3 {
    box-sizing: border-box;
    flex: 0 0 25%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 568px) and (min-width: 768px) {
  .flex-sm-3 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 568px) {
  .flex-sm-4 {
    box-sizing: border-box;
    flex: 0 0 33.33333%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 568px) and (min-width: 768px) {
  .flex-sm-4 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 568px) {
  .flex-sm-5 {
    box-sizing: border-box;
    flex: 0 0 41.66667%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 568px) and (min-width: 768px) {
  .flex-sm-5 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 568px) {
  .flex-sm-6 {
    box-sizing: border-box;
    flex: 0 0 50%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 568px) and (min-width: 768px) {
  .flex-sm-6 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 568px) {
  .flex-sm-7 {
    box-sizing: border-box;
    flex: 0 0 58.33333%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 568px) and (min-width: 768px) {
  .flex-sm-7 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 568px) {
  .flex-sm-8 {
    box-sizing: border-box;
    flex: 0 0 66.66667%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 568px) and (min-width: 768px) {
  .flex-sm-8 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 568px) {
  .flex-sm-9 {
    box-sizing: border-box;
    flex: 0 0 75%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 568px) and (min-width: 768px) {
  .flex-sm-9 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 568px) {
  .flex-sm-10 {
    box-sizing: border-box;
    flex: 0 0 83.33333%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 568px) and (min-width: 768px) {
  .flex-sm-10 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 568px) {
  .flex-sm-11 {
    box-sizing: border-box;
    flex: 0 0 91.66667%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 568px) and (min-width: 768px) {
  .flex-sm-11 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 568px) {
  .flex-sm-12 {
    box-sizing: border-box;
    flex: 0 0 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 568px) and (min-width: 768px) {
  .flex-sm-12 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 768px) {
  .flex-md {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    flex: 1 0 100%;
  }
  .flex-md-1 {
    box-sizing: border-box;
    flex: 0 0 8.33333%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 768px) and (min-width: 768px) {
  .flex-md-1 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 768px) {
  .flex-md-2 {
    box-sizing: border-box;
    flex: 0 0 16.66667%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 768px) and (min-width: 768px) {
  .flex-md-2 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 768px) {
  .flex-md-3 {
    box-sizing: border-box;
    flex: 0 0 25%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 768px) and (min-width: 768px) {
  .flex-md-3 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 768px) {
  .flex-md-4 {
    box-sizing: border-box;
    flex: 0 0 33.33333%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 768px) and (min-width: 768px) {
  .flex-md-4 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 768px) {
  .flex-md-5 {
    box-sizing: border-box;
    flex: 0 0 41.66667%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 768px) and (min-width: 768px) {
  .flex-md-5 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 768px) {
  .flex-md-6 {
    box-sizing: border-box;
    flex: 0 0 50%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 768px) and (min-width: 768px) {
  .flex-md-6 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 768px) {
  .flex-md-7 {
    box-sizing: border-box;
    flex: 0 0 58.33333%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 768px) and (min-width: 768px) {
  .flex-md-7 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 768px) {
  .flex-md-8 {
    box-sizing: border-box;
    flex: 0 0 66.66667%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 768px) and (min-width: 768px) {
  .flex-md-8 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 768px) {
  .flex-md-9 {
    box-sizing: border-box;
    flex: 0 0 75%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 768px) and (min-width: 768px) {
  .flex-md-9 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 768px) {
  .flex-md-10 {
    box-sizing: border-box;
    flex: 0 0 83.33333%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 768px) and (min-width: 768px) {
  .flex-md-10 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 768px) {
  .flex-md-11 {
    box-sizing: border-box;
    flex: 0 0 91.66667%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 768px) and (min-width: 768px) {
  .flex-md-11 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 768px) {
  .flex-md-12 {
    box-sizing: border-box;
    flex: 0 0 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 768px) and (min-width: 768px) {
  .flex-md-12 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 1024px) {
  .flex-lg {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    flex: 1 0 100%;
  }
  .flex-lg-1 {
    box-sizing: border-box;
    flex: 0 0 8.33333%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 1024px) and (min-width: 768px) {
  .flex-lg-1 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 1024px) {
  .flex-lg-2 {
    box-sizing: border-box;
    flex: 0 0 16.66667%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 1024px) and (min-width: 768px) {
  .flex-lg-2 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 1024px) {
  .flex-lg-3 {
    box-sizing: border-box;
    flex: 0 0 25%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 1024px) and (min-width: 768px) {
  .flex-lg-3 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 1024px) {
  .flex-lg-4 {
    box-sizing: border-box;
    flex: 0 0 33.33333%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 1024px) and (min-width: 768px) {
  .flex-lg-4 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 1024px) {
  .flex-lg-5 {
    box-sizing: border-box;
    flex: 0 0 41.66667%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 1024px) and (min-width: 768px) {
  .flex-lg-5 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 1024px) {
  .flex-lg-6 {
    box-sizing: border-box;
    flex: 0 0 50%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 1024px) and (min-width: 768px) {
  .flex-lg-6 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 1024px) {
  .flex-lg-7 {
    box-sizing: border-box;
    flex: 0 0 58.33333%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 1024px) and (min-width: 768px) {
  .flex-lg-7 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 1024px) {
  .flex-lg-8 {
    box-sizing: border-box;
    flex: 0 0 66.66667%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 1024px) and (min-width: 768px) {
  .flex-lg-8 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 1024px) {
  .flex-lg-9 {
    box-sizing: border-box;
    flex: 0 0 75%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 1024px) and (min-width: 768px) {
  .flex-lg-9 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 1024px) {
  .flex-lg-10 {
    box-sizing: border-box;
    flex: 0 0 83.33333%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 1024px) and (min-width: 768px) {
  .flex-lg-10 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 1024px) {
  .flex-lg-11 {
    box-sizing: border-box;
    flex: 0 0 91.66667%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 1024px) and (min-width: 768px) {
  .flex-lg-11 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 1024px) {
  .flex-lg-12 {
    box-sizing: border-box;
    flex: 0 0 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 1024px) and (min-width: 768px) {
  .flex-lg-12 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 1280px) {
  .flex-xl {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    flex: 1 0 100%;
  }
  .flex-xl-1 {
    box-sizing: border-box;
    flex: 0 0 8.33333%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 1280px) and (min-width: 768px) {
  .flex-xl-1 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 1280px) {
  .flex-xl-2 {
    box-sizing: border-box;
    flex: 0 0 16.66667%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 1280px) and (min-width: 768px) {
  .flex-xl-2 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 1280px) {
  .flex-xl-3 {
    box-sizing: border-box;
    flex: 0 0 25%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 1280px) and (min-width: 768px) {
  .flex-xl-3 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 1280px) {
  .flex-xl-4 {
    box-sizing: border-box;
    flex: 0 0 33.33333%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 1280px) and (min-width: 768px) {
  .flex-xl-4 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 1280px) {
  .flex-xl-5 {
    box-sizing: border-box;
    flex: 0 0 41.66667%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 1280px) and (min-width: 768px) {
  .flex-xl-5 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 1280px) {
  .flex-xl-6 {
    box-sizing: border-box;
    flex: 0 0 50%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 1280px) and (min-width: 768px) {
  .flex-xl-6 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 1280px) {
  .flex-xl-7 {
    box-sizing: border-box;
    flex: 0 0 58.33333%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 1280px) and (min-width: 768px) {
  .flex-xl-7 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 1280px) {
  .flex-xl-8 {
    box-sizing: border-box;
    flex: 0 0 66.66667%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 1280px) and (min-width: 768px) {
  .flex-xl-8 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 1280px) {
  .flex-xl-9 {
    box-sizing: border-box;
    flex: 0 0 75%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 1280px) and (min-width: 768px) {
  .flex-xl-9 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 1280px) {
  .flex-xl-10 {
    box-sizing: border-box;
    flex: 0 0 83.33333%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 1280px) and (min-width: 768px) {
  .flex-xl-10 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 1280px) {
  .flex-xl-11 {
    box-sizing: border-box;
    flex: 0 0 91.66667%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 1280px) and (min-width: 768px) {
  .flex-xl-11 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media only screen and (min-width: 1280px) {
  .flex-xl-12 {
    box-sizing: border-box;
    flex: 0 0 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 1280px) and (min-width: 768px) {
  .flex-xl-12 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

/*# sourceMappingURL=columns.css.map */