/*****************************************
* Boilerplate
******************************************/

:root {
  --des-gap: 0;
  --des-container: 1800px;
}

/****************************************
* Main elements
****************************************/

/* On pages with little content, ensures that footer sticks to the bottom */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin-top: auto;
}

hr {
  margin: 1rem 0;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, .1);
  width: 100%;
}

/****************************************
* List styles
****************************************/

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

ul li,
ol li {
  margin-left: 1.5rem;
}

/****************************************
* Display Inline
****************************************/

.inline {
  display: inline-block;
  width: auto;
}

/****************************************
* Spam protection
****************************************/

.honey-wrapper {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

/****************************************
* Form Elements
****************************************/

label {
  display: inline-block;
}

input,
select,
textarea {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 3px;
  background-color: #ffffff;
  width: 100%;
  height: 34px;
  padding: 0.5em;
  color: #000000;
  font: inherit;
  font-size: 14px;
  line-height: 1rem;
}

input + label,
select + label,
textarea + label {
  margin-top: 1rem;
}

textarea {
  overflow: auto;
  resize: vertical;
  min-height: 65px;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
  border: 1px solid #33C3F0;
  outline: none;
}

input:disabled,
input:read-only,
textarea:disabled,
textarea:read-only {
  opacity: .5;
  pointer-events: none;
}

::-moz-focus-inner {
  border: 0;
}

select {
  cursor: pointer;
}

select option {
  color: #000000;
}

select::-ms-expand {
  display: none;
}

select:invalid,
select option[value=""] {
  color: #898989;
}

fieldset label {
  margin-bottom: 0;
}

[type="radio"],
[type="checkbox"] {
  position: absolute;
  margin: 0;
  width: 0;
  height: 0;
  padding: 0;
  opacity: 0;
}

[type="radio"] + label,
[type="checkbox"] + label {
  position: relative;
  margin: 0 .5rem 0 0;
  padding-left: 1.2rem;
}

[type="radio"] + label::before,
[type="checkbox"] + label::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: inset 0px 0px 0px 2px #ffffff;
  border: 1px solid #aaaaaa;
  border-radius: 50%;
  background-color: #ffffff;
  height: calc(1em - 2px);
  width: calc(1em - 2px);
  transition: all 0.3s ease;
}

[type="radio"]:disabled + label,
[type="checkbox"]:disabled + label {
  color: #a2a2a2;
  cursor: not-allowed;
}

[type="radio"]:disabled + label::before,
[type="checkbox"]:disabled + label::before {
  border-color: #a2a2a2;
}

[type="radio"].position-below + label,
[type="checkbox"].position-below + label {
  padding: 0;
}

[type="radio"].position-below + label::before,
[type="checkbox"].position-below + label::before {
  top: unset;
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
}

[type="checkbox"] + label::before {
  border-radius: 3px;
}

[type="radio"]:focus + label::before,
[type="checkbox"]:focus + label::before {
  outline: 1px solid #33C3F0;
}

[type="radio"]:checked + label::before,
[type="checkbox"]:checked + label::before {
  background-color: #3CF;
}

label.invalid,
legend.invalid {
  color: #e30000;
}

input.invalid,
select.invalid,
textarea.invalid {
  background-color: #fff2f4;
}

input.invalid,
select.invalid,
textarea.invalid,
[type="radio"].invalid + label::before,
[type="checkbox"].invalid + label::before {
  border: 1px solid #e30000;
}

/****************************************
* Field Wrapper
****************************************/

.field-wrapper {
  position: relative;
}

.field-wrapper i {
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  z-index: 1;
  font-size: 16px;
  color: #888888;
  transition: all .4s ease;
  cursor: pointer;
}

.field-wrapper i.disabled {
  pointer-events: none;
  cursor: none;
}

.field-wrapper:hover i {
  color: #000000;
}

.field-wrapper svg {
  width: 30px;
  height: 30px;
  fill: #888888;
}

.field-wrapper label {
  position: absolute;
  top: 12px;
  left: .75rem;
  margin: 0;
  background-color: transparent;
  width: 100%;
  max-width: calc(100% - 1.5rem);
  padding-top: 6px;
  pointer-events: none;
  font: normal normal 17px/1.235536 'Arial';
  letter-spacing: 0;
  transition-duration: .125s;
  transition-timing-function: ease-in;
  transition-property: top, font-size, font-weight, line-height, letter-spacing;
}

.field-wrapper label:not(.invalid) {
  color: #86868b;
}

.field-wrapper input:disabled + label,
.field-wrapper input:read-only + label,
.field-wrapper textarea:disabled + label,
.field-wrapper textarea:read-only + label {
  opacity: .5;
  pointer-events: none;
}

.field-wrapper .des-checklist.entered + label,
.field-wrapper select:focus ~ label,
.field-wrapper select.entered ~ label,
.field-wrapper select:-webkit-autofill ~ label,
.field-wrapper textarea:focus ~ label,
.field-wrapper textarea.entered ~ label,
.field-wrapper textarea:-webkit-autofill ~ label,
.field-wrapper input:focus ~ label,
.field-wrapper input.entered ~ label,
.field-wrapper input:-webkit-autofill ~ label,
.field-wrapper input:valid[required] ~ label,
.field-wrapper input[placeholder]:not(:placeholder-shown) ~ label,
.field-wrapper input[placeholder]:not([placeholder=" "]) ~ label {
  top: 1px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.33337;
  letter-spacing: -.01em;
}

.field-wrapper input,
.field-wrapper select,
.field-wrapper textarea,
.field-wrapper .des-checklist + button {
  margin: 0;
  border-radius: 12px;
  min-width: 110px;
  height: 56px;
  padding: 1rem .75rem 0 .75rem;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.field-wrapper textarea {
  width: 100%;
  min-height: 150px;
  height: auto;
  padding-top: 1.5rem;
  line-height: 1.2em;
}

.field-wrapper textarea + label {
  background-color: #ffffff;
}

.field-wrapper textarea.invalid + label {
  background-color: #fff2f4;
}

.field-wrapper i + input,
.field-wrapper i + select,
.field-wrapper i + .des-checklist button {
  padding-right: 30px;
}

.field-wrapper .des-checklist {
  margin: 0;
  width: 100% !important; /* Needs a closer look. DES.Checklist hard-codes a width preventing it from being responsive. */
}

.field-wrapper .des-checklist button {
  border: 1px solid #e1e1e1;
}

.field-wrapper .des-checklist > button:focus {
  background-color: #ffffff;
}

.field-wrapper .des-checklist button::before {
  display: none;
}

.field-wrapper .des-checklist.invalid + button {
  border: 1px solid #e30000;
  background-color: #fff2f4;
}

.field-wrapper .des-checklist > div {
  margin: 1px 0 3px 0;
  box-shadow: 3px 4px 10px rgba(0, 0, 0, .1);
  border: none;
  border-radius: 10px;
  width: 100% !important; /* Needs a closer look. DES.Checklist hard-codes a width preventing it from being responsive. */
  max-width: unset !important; /* Needs a closer look. DES.Checklist hard-codes a width preventing it from being responsive. */
}

.field-wrapper .des-checklist > div > ul > li {
  font-size: 14px;
  padding: 0 .5rem;
}

/****************************************
* Container
****************************************/

.container {
  margin: 0 auto;
  max-width: var(--des-container);
}

/****************************************
* Padding
****************************************/

[class*="padding"] {
  --des-gap: 2rem;
}

.padding {
  padding: 2rem;
}

.padding-top {
  padding: 2rem 2rem 0 2rem;
}

.padding-bottom {
  padding: 0 2rem 2rem 2rem;
}

.padding-right {
  padding: 2rem 2rem 2rem 0;
}

.padding-left {
  padding: 2rem 0 2rem 2rem;
}

.padding-x {
  padding: 0 2rem;
}

.padding-y {
  padding: 2rem 0;
}

@media (min-width: 1140px) {
  [class*="padding"] {
    --des-gap: 3rem 4rem;
  }

  .padding {
    padding: 3rem 4rem;
  }

  .padding-top {
    padding: 3rem 4rem 0 4rem;
  }

  .padding-bottom {
    padding: 0 4rem 3rem 4rem;
  }

  .padding-right {
    padding: 3rem 4rem 3rem 0;
  }

  .padding-left {
    padding: 3rem 0 3rem 4rem;
  }

  .padding-x {
    padding: 0 4rem;
  }

  .padding-y {
    padding: 3rem 0;
  }
}

@media (min-width: 1400px) {
  [class*="padding"] {
    --des-gap: 6rem;
  }

  .padding {
    padding: 3rem 6rem;
  }

  .padding-top {
    padding: 3rem 6rem 0 6rem;
  }

  .padding-bottom {
    padding: 0 6rem 3rem 6rem;
  }

  .padding-right {
    padding: 3rem 6rem 3rem 0;
  }

  .padding-left {
    padding: 3rem 0 3rem 6rem;
  }

  .padding-x {
    padding: 0 3rem;
  }

  .padding-y {
    padding: 3rem 0;
  }
}

/****************************************
* Grid
****************************************/

.grid {
  display: grid;
  gap: var(--des-gap);
}

.grid + .grid {
  margin-top: 1rem;
}

/****************************************
* Grid Columns
****************************************/

.grid.col-1 {
  grid-template-columns: 1fr;
}

.grid.col-1-2 {
  grid-template-columns: 1fr 2fr;
}

.grid.col-1-3 {
  grid-template-columns: 1fr 3fr;
}

.grid.col-2 {
  grid-template-columns: 1fr 1fr;
}

.grid.col-2-1 {
  grid-template-columns: 2fr 1fr;
}

.grid.col-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid.col-3-1 {
  grid-template-columns: 3fr 1fr;
}

.grid.col-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid.col-5 {
  grid-template-columns: repeat(5, 1fr);
}

.grid.col-6 {
  grid-template-columns: repeat(6, 1fr);
}

.grid.col-7 {
  grid-template-columns: repeat(7, 1fr);
}

.grid.col-8 {
  grid-template-columns: repeat(8, 1fr);
}

.grid.col-9 {
  grid-template-columns: repeat(9, 1fr);
}

.grid.col-10 {
  grid-template-columns: repeat(10, 1fr);
}

.grid.col-11 {
  grid-template-columns: repeat(11, 1fr);
}

.grid.col-12 {
  grid-template-columns: repeat(12, 1fr);
}

@media (min-width: 576px) {
  .grid.col-1--phone {
    grid-template-columns: 1fr;
  }

  .grid.col-1-2--phone {
    grid-template-columns: 1fr 2fr;
  }

  .grid.col-1-3--phone {
    grid-template-columns: 1fr 3fr;
  }

  .grid.col-2--phone {
    grid-template-columns: 1fr 1fr;
  }

  .grid.col-2-1--phone {
    grid-template-columns: 2fr 1fr;
  }

  .grid.col-3--phone {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid.col-3-1--phone {
    grid-template-columns: 3fr 1fr;
  }

  .grid.col-4--phone {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid.col-5--phone {
    grid-template-columns: repeat(5, 1fr);
  }

  .grid.col-6--phone {
    grid-template-columns: repeat(6, 1fr);
  }

  .grid.col-7--phone {
    grid-template-columns: repeat(7, 1fr);
  }

  .grid.col-8--phone {
    grid-template-columns: repeat(8, 1fr);
  }

  .grid.col-9--phone {
    grid-template-columns: repeat(9, 1fr);
  }

  .grid.col-10--phone {
    grid-template-columns: repeat(10, 1fr);
  }

  .grid.col-11--phone {
    grid-template-columns: repeat(11, 1fr);
  }

  .grid.col-12--phone {
    grid-template-columns: repeat(12, 1fr);
  }
}

@media (min-width: 768px) {
  .grid.col-1--tablet {
    grid-template-columns: 1fr;
  }

  .grid.col-1-2--tablet {
    grid-template-columns: 1fr 2fr;
  }

  .grid.col-1-3--tablet {
    grid-template-columns: 1fr 3fr;
  }

  .grid.col-2--tablet {
    grid-template-columns: 1fr 1fr;
  }

  .grid.col-2-1--tablet {
    grid-template-columns: 2fr 1fr;
  }

  .grid.col-2-1-1--tablet {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .grid.col-3--tablet {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid.col-3-1--tablet {
    grid-template-columns: 3fr 1fr;
  }

  .grid.col-4--tablet {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid.col-5--tablet {
    grid-template-columns: repeat(5, 1fr);
  }

  .grid.col-6--tablet {
    grid-template-columns: repeat(6, 1fr);
  }

  .grid.col-7--tablet {
    grid-template-columns: repeat(7, 1fr);
  }

  .grid.col-8--tablet {
    grid-template-columns: repeat(8, 1fr);
  }

  .grid.col-9--tablet {
    grid-template-columns: repeat(9, 1fr);
  }

  .grid.col-10--tablet {
    grid-template-columns: repeat(10, 1fr);
  }

  .grid.col-11--tablet {
    grid-template-columns: repeat(11, 1fr);
  }

  .grid.col-12--tablet {
    grid-template-columns: repeat(12, 1fr);
  }
}

@media (min-width: 1140px) {
  .grid.col-1--desktop {
    grid-template-columns: 1fr;
  }

  .grid.col-1-2--desktop {
    grid-template-columns: 1fr 2fr;
  }

  .grid.col-1-3--desktop {
    grid-template-columns: 1fr 3fr;
  }

  .grid.col-2--desktop {
    grid-template-columns: 1fr 1fr;
  }

  .grid.col-2-1--desktop {
    grid-template-columns: 2fr 1fr;
  }

  .grid.col-3--desktop {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid.col-3-1--desktop {
    grid-template-columns: 3fr 1fr;
  }

  .grid.col-4--desktop {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid.col-5--desktop {
    grid-template-columns: repeat(5, 1fr);
  }

  .grid.col-6--desktop {
    grid-template-columns: repeat(6, 1fr);
  }

  .grid.col-7--desktop {
    grid-template-columns: repeat(7, 1fr);
  }

  .grid.col-8--desktop {
    grid-template-columns: repeat(8, 1fr);
  }

  .grid.col-9--desktop {
    grid-template-columns: repeat(9, 1fr);
  }

  .grid.col-10--desktop {
    grid-template-columns: repeat(10, 1fr);
  }

  .grid.col-11--desktop {
    grid-template-columns: repeat(11, 1fr);
  }

  .grid.col-12--desktop {
    grid-template-columns: repeat(12, 1fr);
  }
}

@media (min-width: 1400px) {
  .grid.col-1--widescreen {
    grid-template-columns: 1fr;
  }

  .grid.col-1-2--widescreen {
    grid-template-columns: 1fr 2fr;
  }

  .grid.col-1-3--widescreen {
    grid-template-columns: 1fr 3fr;
  }

  .grid.col-2--widescreen {
    grid-template-columns: 1fr 1fr;
  }

  .grid.col-2-1--widescreen {
    grid-template-columns: 2fr 1fr;
  }

  .grid.col-3--widescreen {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid.col-3-1--widescreen {
    grid-template-columns: 3fr 1fr;
  }

  .grid.col-4--widescreen {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid.col-5--widescreen {
    grid-template-columns: repeat(5, 1fr);
  }

  .grid.col-6--widescreen {
    grid-template-columns: repeat(6, 1fr);
  }

  .grid.col-7--widescreen {
    grid-template-columns: repeat(7, 1fr);
  }

  .grid.col-8--widescreen {
    grid-template-columns: repeat(8, 1fr);
  }

  .grid.col-9--widescreen {
    grid-template-columns: repeat(9, 1fr);
  }

  .grid.col-10--widescreen {
    grid-template-columns: repeat(10, 1fr);
  }

  .grid.col-11--widescreen {
    grid-template-columns: repeat(11, 1fr);
  }

  .grid.col-12--widescreen {
    grid-template-columns: repeat(12, 1fr);
  }
}

/****************************************
* Grid Span
****************************************/

.grid .span-1 {
  grid-column: span 1;
}

.grid .span-2 {
  grid-column: span 2;
}

.grid .span-3 {
  grid-column: span 3;
}

.grid .span-4 {
  grid-column: span 4;
}

.grid .span-5 {
  grid-column: span 5;
}

.grid .span-6 {
  grid-column: span 6;
}

.grid .span-7 {
  grid-column: span 7;
}

.grid .span-8 {
  grid-column: span 8;
}

.grid .span-9 {
  grid-column: span 9;
}

.grid .span-10 {
  grid-column: span 10;
}

.grid .span-11 {
  grid-column: span 11;
}

.grid .span-12 {
  grid-column: span 12;
}

@media(min-width: 576px) {
  .grid .span-1--phone {
    grid-column: span 1;
  }

  .grid .span-2--phone {
    grid-column: span 2;
  }

  .grid .span-3--phone {
    grid-column: span 3;
  }

  .grid .span-4--phone {
    grid-column: span 4;
  }

  .grid .span-5--phone {
    grid-column: span 5;
  }

  .grid .span-6--phone {
    grid-column: span 6;
  }

  .grid .span-7--phone {
    grid-column: span 7;
  }

  .grid .span-8--phone {
    grid-column: span 8;
  }

  .grid .span-9--phone {
    grid-column: span 9;
  }

  .grid .span-10--phone {
    grid-column: span 10;
  }

  .grid .span-11--phone {
    grid-column: span 11;
  }

  .grid .span-12--phone {
    grid-column: span 12;
  }
}

@media(min-width: 768px) {
  .grid .span-1--tablet {
    grid-column: span 1;
  }

  .grid .span-2--tablet {
    grid-column: span 2;
  }

  .grid .span-3--tablet {
    grid-column: span 3;
  }

  .grid .span-4--tablet {
    grid-column: span 4;
  }

  .grid .span-5--tablet {
    grid-column: span 5;
  }

  .grid .span-6--tablet {
    grid-column: span 6;
  }

  .grid .span-7--tablet {
    grid-column: span 7;
  }

  .grid .span-8--tablet {
    grid-column: span 8;
  }

  .grid .span-9--tablet {
    grid-column: span 9;
  }

  .grid .span-10--tablet {
    grid-column: span 10;
  }

  .grid .span-11--tablet {
    grid-column: span 11;
  }

  .grid .span-12--tablet {
    grid-column: span 12;
  }
}

@media(min-width: 1140px) {
  .grid .span-1--desktop {
    grid-column: span 1;
  }

  .grid .span-2--desktop {
    grid-column: span 2;
  }

  .grid .span-3--desktop {
    grid-column: span 3;
  }

  .grid .span-4--desktop {
    grid-column: span 4;
  }

  .grid .span-5--desktop {
    grid-column: span 5;
  }

  .grid .span-6--desktop {
    grid-column: span 6;
  }

  .grid .span-7--desktop {
    grid-column: span 7;
  }

  .grid .span-8--desktop {
    grid-column: span 8;
  }

  .grid .span-9--desktop {
    grid-column: span 9;
  }

  .grid .span-10--desktop {
    grid-column: span 10;
  }

  .grid .span-11--desktop {
    grid-column: span 11;
  }

  .grid .span-12--desktop {
    grid-column: span 12;
  }
}

@media(min-width: 1400px) {
  .grid .span-1--widescreen {
    grid-column: span 1;
  }

  .grid .span-2--widescreen {
    grid-column: span 2;
  }

  .grid .span-3--widescreen {
    grid-column: span 3;
  }

  .grid .span-4--widescreen {
    grid-column: span 4;
  }

  .grid .span-5--widescreen {
    grid-column: span 5;
  }

  .grid .span-6--widescreen {
    grid-column: span 6;
  }

  .grid .span-7--widescreen {
    grid-column: span 7;
  }

  .grid .span-8--widescreen {
    grid-column: span 8;
  }

  .grid .span-9--widescreen {
    grid-column: span 9;
  }

  .grid .span-10--widescreen {
    grid-column: span 10;
  }

  .grid .span-11--widescreen {
    grid-column: span 11;
  }

  .grid .span-12--widescreen {
    grid-column: span 12;
  }
}

/****************************************
* Grid/Flex Gap
****************************************/

.gap-0 {
  --des-gap: 0;
}

.gap-1 {
  --des-gap: 1rem;
}

.gap-2 {
  --des-gap: 2rem;
}

.gap-3 {
  --des-gap: 3rem;
}

.gap-4 {
  --des-gap: 4rem;
}

.gap-5 {
  --des-gap: 5rem;
}

.gap-6 {
  --des-gap: 6rem;
}

@media(min-width: 576px) {
  .gap-0--phone {
    --des-gap: 0;
  }

  .gap-1--phone {
    --des-gap: 1rem;
  }

  .gap-2--phone {
    --des-gap: 2rem;
  }

  .gap-3--phone {
    --des-gap: 3rem;
  }

  .gap-4--phone {
    --des-gap: 4rem;
  }

  .gap-5--phone {
    --des-gap: 5rem;
  }

  .gap-6--phone {
    --des-gap: 6rem;
  }
}

@media(min-width: 768px) {
  .gap-0--tablet {
    --des-gap: 0;
  }

  .gap-1--tablet {
    --des-gap: 1rem;
  }

  .gap-2--tablet {
    --des-gap: 2rem;
  }

  .gap-3--tablet {
    --des-gap: 3rem;
  }

  .gap-4--tablet {
    --des-gap: 4rem;
  }

  .gap-5--tablet {
    --des-gap: 5rem;
  }

  .gap-6--tablet {
    --des-gap: 6rem;
  }
}

@media(min-width: 1140px) {
  .gap-0--desktop {
    --des-gap: 0;
  }

  .gap-1--desktop {
    --des-gap: 1rem;
  }

  .gap-2--desktop {
    --des-gap: 2rem;
  }

  .gap-3--desktop {
    --des-gap: 3rem;
  }

  .gap-4--desktop {
    --des-gap: 4rem;
  }

  .gap-5--desktop {
    --des-gap: 5rem;
  }

  .gap-6--desktop {
    --des-gap: 6rem;
  }
}

@media(min-width: 1400px) {
  .gap-0--widescreen {
    --des-gap: 0;
  }

  .gap-1--widescreen {
    --des-gap: 1rem;
  }

  .gap-2--widescreen {
    --des-gap: 2rem;
  }

  .gap-3--widescreen {
    --des-gap: 3rem;
  }

  .gap-4--widescreen {
    --des-gap: 4rem;
  }

  .gap-5--widescreen {
    --des-gap: 5rem;
  }

  .gap-6--widescreen {
    --des-gap: 6rem;
  }
}

/****************************************
* Grid/Flex Order
****************************************/

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-6 {
  order: 6;
}

.order-7 {
  order: 7;
}

.order-8 {
  order: 8;
}

.order-9 {
  order: 9;
}

.order-10 {
  order: 10;
}

.order-11 {
  order: 11;
}

.order-12 {
  order: 12;
}

@media(min-width: 576px) {
  .order-1--phone {
    order: 1;
  }

  .order-2--phone {
    order: 2;
  }

  .order-3--phone {
    order: 3;
  }

  .order-4--phone {
    order: 4;
  }

  .order-5--phone {
    order: 5;
  }

  .order-6--phone {
    order: 6;
  }

  .order-7--phone {
    order: 7;
  }

  .order-8--phone {
    order: 8;
  }

  .order-9--phone {
    order: 9;
  }

  .order-10--phone {
    order: 10;
  }

  .order-11--phone {
    order: 11;
  }

  .order-12--phone {
    order: 12;
  }
}

@media(min-width: 768px) {
  .order-1--tablet {
    order: 1;
  }

  .order-2--tablet {
    order: 2;
  }

  .order-3--tablet {
    order: 3;
  }

  .order-4--tablet {
    order: 4;
  }

  .order-5--tablet {
    order: 5;
  }

  .order-6--tablet {
    order: 6;
  }

  .order-7--tablet {
    order: 7;
  }

  .order-8--tablet {
    order: 8;
  }

  .order-9--tablet {
    order: 9;
  }

  .order-10--tablet {
    order: 10;
  }

  .order-11--tablet {
    order: 11;
  }

  .order-12--tablet {
    order: 12;
  }
}

@media(min-width: 1140px) {
  .order-1--desktop {
    order: 1;
  }

  .order-2--desktop {
    order: 2;
  }

  .order-3--desktop {
    order: 3;
  }

  .order-4--desktop {
    order: 4;
  }

  .order-5--desktop {
    order: 5;
  }

  .order-6--desktop {
    order: 6;
  }

  .order-7--desktop {
    order: 7;
  }

  .order-8--desktop {
    order: 8;
  }

  .order-9--desktop {
    order: 9;
  }

  .order-10--desktop {
    order: 10;
  }

  .order-11--desktop {
    order: 11;
  }

  .order-12--desktop {
    order: 12;
  }
}

@media(min-width: 1400px) {
  .order-1--widescreen {
    order: 1;
  }

  .order-2--widescreen {
    order: 2;
  }

  .order-3--widescreen {
    order: 3;
  }

  .order-4--widescreen {
    order: 4;
  }

  .order-5--widescreen {
    order: 5;
  }

  .order-6--widescreen {
    order: 6;
  }

  .order-7--widescreen {
    order: 7;
  }

  .order-8--widescreen {
    order: 8;
  }

  .order-9--widescreen {
    order: 9;
  }

  .order-10--widescreen {
    order: 10;
  }

  .order-11--widescreen {
    order: 11;
  }

  .order-12--widescreen {
    order: 12;
  }
}

/****************************************
* Visibility & Breaks
****************************************/

.hidden {
  display: none !important;
}

@media (min-width: 576px) {
  .hidden--phone {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hidden--tablet {
    display: none !important;
  }
}

@media (min-width: 1140px) {
  .hidden--desktop {
    display: none !important;
  }
}

@media (min-width: 1400px) {
  .hidden--widescreen {
    display: none !important;
  }
}

@media (max-width: 575.98px) {
  .visible--phone {
    display: none !important;
  }

  .break-phone {
    display: block;
    visibility: hidden;
    height: 0;
  }
}

@media (max-width: 767.98px) {
  .visible--tablet {
    display: none !important;
  }

  .break-phone {
    display: block;
    visibility: hidden;
    height: 0;
  }
}

@media (max-width: 1139.98px) {
  .visible--desktop {
    display: none !important;
  }

  .break-tablet {
    display: block;
    visibility: hidden;
    height: 0;
  }
}

@media (min-width: 1140px) {
  .visible--desktop {
    display: block !important;
  }
}

@media (max-width: 1399.98px) {
  .visible--widescreen {
    display: none !important;
  }

  .break-desktop {
    display: block;
    visibility: hidden;
    height: 0;
  }
}

@media (max-width: 767px) {
  .break-only--phone {
    display: block;
    visibility: hidden;
    height: 0;
  }
}

@media (min-width: 768px) and (max-width: 1139px) {
  .break-only--tablet {
    display: block;
    visibility: hidden;
    height: 0;
  }
}

@media (min-width: 1140px) and (max-width: 1400px) {
  .break-only--desktop {
    display: block;
    visibility: hidden;
    height: 0;
  }
}

@media (min-width: 1400px) {
  .break-only--widescreen {
    display: block;
    visibility: hidden;
    height: 0;
  }
}

/****************************************
* Centering
****************************************/

.y-center-elements {
  display: grid;
  align-items: center;
}

.x-bottom-elements {
  display: grid;
  align-items: end;
}

.y-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.x-left {
  margin-right: auto;
  margin-left: 0;
  text-align: left;
}

.x-center {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.x-right {
  margin-right: 0;
  margin-left: auto;
  text-align: right;
}

@media(min-width: 576px) {
  .x-left--phone {
    margin-right: auto;
    margin-left: 0;
    text-align: left;
  }

  .x-center--phone {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .x-right--phone {
    margin-right: 0;
    margin-left: auto;
    text-align: right;
  }
}

@media(min-width: 768px) {
  .x-left--tablet {
    margin-right: auto;
    margin-left: 0;
    text-align: left;
  }

  .x-center--tablet {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .x-right--tablet {
    margin-right: 0;
    margin-left: auto;
    text-align: right;
  }
}

@media(min-width: 1140px) {
  .x-left--desktop {
    margin-right: auto;
    margin-left: 0;
    text-align: left;
  }

  .x-center--desktop {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .x-right--desktop {
    margin-right: 0;
    margin-left: auto;
    text-align: right;
  }
}

@media(min-width: 1400px) {
  .x-left--widescreen {
    margin-right: auto;
    margin-left: 0;
    text-align: left;
  }

  .x-center--widescreen {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .x-right--widescreen {
    margin-right: 0;
    margin-left: auto;
    text-align: right;
  }
}

/****************************************
* iframes and videos
****************************************/

.video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* padding-bottom will need to be overridden on occasion. Should be iframe height / iframe width. */
}

.video iframe,
.video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}

/****************************************
* Flexbox
****************************************/

.flex,
.flex-row,
.flex-column {
  gap: var(--des-gap);
}

.flex,
.flex-row,
.flex-column,
.flex-row-center,
.flex-column-center {
  display: flex;
}

.flex-row,
.flex-row-center {
  flex-direction: row;
}

.flex-column,
.flex-column-center {
  flex-direction: column;
}

.flex.wrap {
  flex-wrap: wrap;
}

.flex-grow {
  flex-grow: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

@media(min-width: 576px) {
  .flex--phone,
  .flex-row--phone,
  .flex-column--phone {
    display: flex;
  }

  .flex-row--phone {
    flex-direction: row;
  }

  .flex-column--phone {
    flex-direction: column;
  }
}

@media(min-width: 768px) {
  .flex--tablet,
  .flex-row--tablet,
  .flex-column--tablet {
    display: flex;
  }

  .flex-row--tablet {
    flex-direction: row;
  }

  .flex-column--tablet {
    flex-direction: column;
  }
}

@media(min-width: 1140px) {
  .flex--desktop,
  .flex-row--desktop,
  .flex-column--desktop {
    display: flex;
  }

  .flex-row--desktop {
    flex-direction: row;
  }

  .flex-column--desktop {
    flex-direction: column;
  }
}

@media(min-width: 1400px) {
  .flex--widescreen,
  .flex-row--widescreen,
  .flex-column--widescreen {
    display: flex;
  }

  .flex-row--widescreen {
    flex-direction: row;
  }

  .flex-column--widescreen {
    flex-direction: column;
  }
}

/****************************************
* Grid/Flex aligning
****************************************/

.align-center,
.flex-row-center,
.flex-column-center {
  align-items: center;
}

.align-end {
  align-items: flex-end;
}

.justify-start {
  justify-content: start;
  justify-content: flex-start;
}

.justify-between {
  justify-content: space-between;
}

.justify-center,
.flex-row-center,
.flex-column-center {
  justify-content: center;
}

.justify-end {
  justify-content: end;
  justify-content: flex-end;
}

@media(min-width: 576px) {
  .align-center--phone {
    align-items: center;
  }

  .align-end--phone {
    align-items: flex-end;
  }

  .justify-start--phone {
    justify-content: start;
    justify-content: flex-start;
  }

  .justify-between--phone {
    justify-content: space-between;
  }

  .justify-center--phone {
    justify-content: center;
  }

  .justify-end--phone {
    justify-content: end;
    justify-content: flex-end;
  }
}

@media(min-width: 768px) {
  .align-center--tablet {
    align-items: center;
  }

  .align-end--tablet {
    align-items: flex-end;
  }

  .justify-start--tablet {
    justify-content: start;
    justify-content: flex-start;
  }

  .justify-between--tablet {
    justify-content: space-between;
  }

  .justify-center--tablet {
    justify-content: center;
  }

  .justify-end--tablet {
    justify-content: end;
    justify-content: flex-end;
  }
}

@media(min-width: 1140px) {
  .align-center--desktop {
    align-items: center;
  }

  .align-end--desktop {
    align-items: flex-end;
  }

  .justify-start--desktop {
    justify-content: start;
    justify-content: flex-start;
  }

  .justify-between--desktop {
    justify-content: space-between;
  }

  .justify-center--desktop {
    justify-content: center;
  }

  .justify-end--desktop {
    justify-content: end;
    justify-content: flex-end;
  }
}

@media(min-width: 1400px) {
  .align-center--widescreen {
    align-items: center;
  }

  .align-end--widescreen {
    align-items: flex-end;
  }

  .justify-start--widescreen {
    justify-content: start;
    justify-content: flex-start;
  }

  .justify-between--widescreen {
    justify-content: space-between;
  }

  .justify-center--widescreen {
    justify-content: center;
  }

  .justify-end--widescreen {
    justify-content: end;
    justify-content: flex-end;
  }
}

/****************************************
* Flex columns
****************************************/

.flex[class*="col-"] > * {
  width: 100%;
}

.flex.col-2 > * {
  width: calc((100% / 2) - (var(--des-gap) / 2));
}

.flex.col-3 > * {
  width: calc((100% / 3) - (var(--des-gap) * 2 / 3));
}

.flex.col-4 > * {
  width: calc((100% / 4) - (var(--des-gap) * 3 / 4));
}

.flex.col-5 > * {
  width: calc((100% / 5) - (var(--des-gap) * 4 / 5));
}

.flex.col-6 > * {
  width: calc((100% / 6) - (var(--des-gap) * 5 / 6));
}

.flex.col-7 > * {
  width: calc((100% / 7) - (var(--des-gap) * 6 / 7));
}

.flex.col-8 > * {
  width: calc((100% / 8) - (var(--des-gap) * 7 / 8));
}

.flex.col-9 > * {
  width: calc((100% / 9) - (var(--des-gap) * 8 / 9));
}

.flex.col-10 > * {
  width: calc((100% / 10) - (var(--des-gap) * 9 / 10));
}

.flex.col-11 > * {
  width: calc((100% / 11) - (var(--des-gap) * 10 / 11));
}

.flex.col-12 > * {
  width: calc((100% / 12) - (var(--des-gap) * 11 / 12));
}

@media (min-width: 576px) {
  .flex.col-auto--phone > * {
    width: auto;
  }

  .flex.col-1--phone > * {
    width: 100%;
  }

  .flex.col-2--phone > * {
    width: calc((100% / 2) - (var(--des-gap) / 2));
  }

  .flex.col-3--phone > * {
    width: calc((100% / 3) - (var(--des-gap) * 2 / 3));
  }

  .flex.col-4--phone > * {
    width: calc((100% / 4) - (var(--des-gap) * 3 / 4));
  }

  .flex.col-5--phone > * {
    width: calc((100% / 5) - (var(--des-gap) * 4 / 5));
  }

  .flex.col-6--phone > * {
    width: calc((100% / 6) - (var(--des-gap) * 5 / 6));
  }

  .flex.col-7--phone > * {
    width: calc((100% / 7) - (var(--des-gap) * 6 / 7));
  }

  .flex.col-8--phone > * {
    width: calc((100% / 8) - (var(--des-gap) * 7 / 8));
  }

  .flex.col-9--phone > * {
    width: calc((100% / 9) - (var(--des-gap) * 8 / 9));
  }

  .flex.col-10--phone > * {
    width: calc((100% / 10) - (var(--des-gap) * 9 / 10));
  }

  .flex.col-11--phone > * {
    width: calc((100% / 11) - (var(--des-gap) * 10 / 11));
  }

  .flex.col-12--phone > * {
    width: calc((100% / 12) - (var(--des-gap) * 11 / 12));
  }
}

@media (min-width: 768px) {
  .flex.col-auto--tablet > * {
    width: auto;
  }

  .flex.col-1--tablet > * {
    width: 100%;
  }

  .flex.col-2--tablet > * {
    width: calc((100% / 2) - (var(--des-gap) / 2));
  }

  .flex.col-2-1--tablet > *:nth-of-type(odd) {
    width: calc(((100% / 3) * 2) - (var(--des-gap) / 2));
  }

  .flex.col-2-1--tablet > *:nth-of-type(even) {
    width: calc((100% / 3) - (var(--des-gap) / 2));
  }

  .flex.col-3--tablet > * {
    width: calc((100% / 3) - (var(--des-gap) * 2 / 3));
  }

  .flex.col-4--tablet > * {
    width: calc((100% / 4) - (var(--des-gap) * 3 / 4));
  }

  .flex.col-5--tablet > *t {
    width: calc((100% / 5) - (var(--des-gap) * 4 / 5));
  }

  .flex.col-6--tablet > * {
    width: calc((100% / 6) - (var(--des-gap) * 5 / 6));
  }

  .flex.col-7--tablet > * {
    width: calc((100% / 7) - (var(--des-gap) * 6 / 7));
  }

  .flex.col-8--tablet > * {
    width: calc((100% / 8) - (var(--des-gap) * 7 / 8));
  }

  .flex.col-9--tablet > * {
    width: calc((100% / 9) - (var(--des-gap) * 8 / 9));
  }

  .flex.col-10--tablet > * {
    width: calc((100% / 10) - (var(--des-gap) * 9 / 10));
  }

  .flex.col-11--tablet > * {
    width: calc((100% / 11) - (var(--des-gap) * 10 / 11));
  }

  .flex.col-12--tablet > * {
    width: calc((100% / 12) - (var(--des-gap) * 11 / 12));
  }
}

@media (min-width: 1140px) {
  .flex.col-auto--desktop > * {
    width: auto;
  }

  .flex.col-1--desktop > * {
    width: 100%;
  }

  .flex.col-2--desktop > * {
    width: calc((100% / 2) - (var(--des-gap) / 2));
  }

  .flex.col-3--desktop > * {
    width: calc((100% / 3) - (var(--des-gap) * 2 / 3));
  }

  .flex.col-4--desktop > * {
    width: calc((100% / 4) - (var(--des-gap) * 3 / 4));
  }

  .flex.col-5--desktop > * {
    width: calc((100% / 5) - (var(--des-gap) * 4 / 5));
  }

  .flex.col-6--desktop > * {
    width: calc((100% / 6) - (var(--des-gap) * 5 / 6));
  }

  .flex.col-7--desktop > * {
    width: calc((100% / 7) - (var(--des-gap) * 6 / 7));
  }

  .flex.col-8--desktop > * {
    width: calc((100% / 8) - (var(--des-gap) * 7 / 8));
  }

  .flex.col-9--desktop > * {
    width: calc((100% / 9) - (var(--des-gap) * 8 / 9));
  }

  .flex.col-10--desktop > * {
    width: calc((100% / 10) - (var(--des-gap) * 9 / 10));
  }

  .flex.col-11--desktop > * {
    width: calc((100% / 11) - (var(--des-gap) * 10 / 11));
  }

  .flex.col-12--desktop > * {
    width: calc((100% / 12) - (var(--des-gap) * 11 / 12));
  }
}

@media (min-width: 1400px) {
  .flex.col-auto--widescreen > * {
    width: auto;
  }

  .flex.col-1--widescreen > * {
    width: 100%;
  }

  .flex.col-2--widescreen > * {
    width: calc((100% / 2) - (var(--des-gap) / 2));
  }

  .flex.col-3--widescreen > * {
    width: calc((100% / 3) - (var(--des-gap) * 2 / 3));
  }

  .flex.col-4--widescreen > * {
    width: calc((100% / 4) - (var(--des-gap) * 3 / 4));
  }

  .flex.col-5--widescreen > * {
    width: calc((100% / 5) - (var(--des-gap) * 4 / 5));
  }

  .flex.col-6--widescreen > * {
    width: calc((100% / 6) - (var(--des-gap) * 5 / 6));
  }

  .flex.col-7--widescreen > * {
    width: calc((100% / 7) - (var(--des-gap) * 6 / 7));
  }

  .flex.col-8--widescreen > * {
    width: calc((100% / 8) - (var(--des-gap) * 7 / 8));
  }

  .flex.col-9--widescreen > * {
    width: calc((100% / 9) - (var(--des-gap) * 8 / 9));
  }

  .flex.col-10--widescreen > * {
    width: calc((100% / 10) - (var(--des-gap) * 9 / 10));
  }

  .flex.col-11--widescreen > * {
    width: calc((100% / 11) - (var(--des-gap) * 10 / 11));
  }

  .flex.col-12--widescreen > * {
    width: calc((100% / 12) - (var(--des-gap) * 11 / 12));
  }
}

/****************************************
* Flex span
****************************************/

.flex[class*="col-"] > .span-full {
  width: 100%;
}