/******************************************************************

Stylesheet: Block Style
Block: Banner

******************************************************************/
/******************************************************************

Stylesheet: Variables

Here is where we declare all our variables like colors, fonts,
base values, and defaults. We want to make sure this file ONLY
contains variables that way our files don't get all messy.
No one likes a mess.

******************************************************************/
/*********************
WRAPS
*********************/
/*********************
COLORS
*********************/
/*********************
FONT SIZES
*********************/
/*********************
PADDINGS
*********************/
/******************************************************************

Stylesheet: Grid Stylesheet

Still using this pretty basic grid, but it's customized a bit to
feel more like Bootstrap.
Wrap grid columns in grid-skin wrappers.

******************************************************************/
.with-padding {
  padding: 0 8px; }

.with-padding-large {
  padding: 0 32px; }

.grid-skin {
  position: relative;
  margin: 0 -8px; }

.grid-skin-large {
  position: relative;
  margin: 0 -32px; }

/* Mobile Grid Styles */
@media (max-width: 767px) {
  .m-all {
    float: left;
    width: 100%; }
  .m-1of2 {
    float: left;
    width: calc(100% / 2); }
  .m-1of3 {
    float: left;
    width: calc(100% / 3); }
  .m-2of3 {
    float: left;
    width: 66.66%; }
  .m-1of4 {
    float: left;
    width: 25%; }
  .m-3of4 {
    float: left;
    width: 75%; }
  .grid-m-all {
    grid-template-columns: 1fr; }
  .grid-m-1of2 {
    grid-template-columns: 1fr 1fr; }
  .grid-m-1of3 {
    grid-template-columns: 1fr 1fr 1fr; } }

/* Large Mobile to Tablet Grid Styles */
@media (min-width: 480px) and (max-width: 767px) {
  .mt-all {
    float: left;
    width: 100%; }
  .mt-1of2 {
    float: left;
    width: 50%; }
  .mt-1of3 {
    float: left;
    width: 33.33%; }
  .mt-2of3 {
    float: left;
    width: 66.66%; }
  .mt-1of4 {
    float: left;
    width: 25%; }
  .mt-3of4 {
    float: left;
    width: 75%; } }

/* Portrait tablet to landscape */
@media (min-width: 768px) and (max-width: 1029px) {
  .t-all {
    float: left;
    width: 100%; }
  .t-1of2 {
    float: left;
    width: calc(100% / 2); }
  .t-1of3 {
    float: left;
    width: calc(100% / 3); }
  .t-2of3 {
    float: left;
    width: 66.66%; }
  .t-1of4 {
    float: left;
    width: calc(100% / 4); }
  .t-3of4 {
    float: left;
    width: 75%; }
  .t-1of5 {
    float: left;
    width: 20%; }
  .t-2of5 {
    float: left;
    width: 40%; }
  .t-3of5 {
    float: left;
    width: 60%; }
  .t-4of5 {
    float: left;
    width: 80%; }
  .grid-t-all {
    grid-template-columns: 1fr; }
  .grid-t-1of2 {
    grid-template-columns: 1fr 1fr; }
  .grid-t-1of3 {
    grid-template-columns: 1fr 1fr 1fr; }
  .grid-t-1of4 {
    grid-template-columns: 1fr 1fr 1fr 1fr; } }

/* Landscape to small desktop */
@media (min-width: 1030px) {
  .d-all {
    float: left;
    width: 100%; }
  .d-1of2 {
    float: left;
    width: calc(100% / 2); }
  .d-1of3 {
    float: left;
    width: calc(100% / 3); }
  .d-2of3 {
    float: left;
    width: 66.66%; }
  .d-1of4 {
    float: left;
    width: calc(100% / 4); }
  .d-3of4 {
    float: left;
    width: 75%; }
  .d-1of5 {
    float: left;
    width: 20%; }
  .d-2of5 {
    float: left;
    width: 40%; }
  .d-3of5 {
    float: left;
    width: 60%; }
  .d-4of5 {
    float: left;
    width: 80%; }
  .d-1of6 {
    float: left;
    width: 16.6666666667%; }
  .d-1of7 {
    float: left;
    width: 14.2857142857%; }
  .d-2of7 {
    float: left;
    width: 28.5714286%; }
  .d-3of7 {
    float: left;
    width: 42.8571429%; }
  .d-4of7 {
    float: left;
    width: 57.1428572%; }
  .d-5of7 {
    float: left;
    width: 71.4285715%; }
  .d-6of7 {
    float: left;
    width: 85.7142857%; }
  .d-1of8 {
    float: left;
    width: 12.5%; }
  .d-1of9 {
    float: left;
    width: 11.1111111111%; }
  .d-1of10 {
    float: left;
    width: 10%; }
  .d-1of11 {
    float: left;
    width: 9.09090909091%; }
  .d-1of12 {
    float: left;
    width: 8.33%; }
  .grid-d-all {
    grid-template-columns: 1fr; }
  .grid-d-1of2 {
    grid-template-columns: 1fr 1fr; }
  .grid-d-1of3 {
    grid-template-columns: 1fr 1fr 1fr; }
  .grid-d-1of4 {
    grid-template-columns: 1fr 1fr 1fr 1fr; } }

@media (min-width: 768px) {
  .grid-space-right {
    padding-right: 32px; } }

.sp-logos .sp-logo-grid {
  display: grid;
  grid-template-rows: auto;
  grid-gap: 30px;
  align-items: center;
  justify-content: center; }
  .sp-logos .sp-logo-grid img {
    display: block;
    width: auto;
    max-width: calc(100% - 10px);
    max-height: 60px;
    height: auto;
    margin: 0 auto; }
    @media (min-width: 481px) {
      .sp-logos .sp-logo-grid img {
        max-width: calc(100% - 20px); } }
    @media (min-width: 1030px) {
      .sp-logos .sp-logo-grid img {
        max-width: calc(100% - 40px); } }
.sp-logos .glide__track {
  transition: all 0.2s ease-in-out; }

.sp-logos .glide__slides {
  align-items: center; }

.sp-logos .glide__slide {
  margin: 0;
  text-align: center;
  list-style: none; }
  .sp-logos .glide__slide img {
    width: 130px; }
  .sp-logos .glide__slide:before {
    content: none !important; }