/* FONTS ********************* */
@font-face {
  font-family: 'font-thin';
  font-style: normal;
  font-weight: normal;
  src: url("https://www.att.com/es-us/ui/frameworks/fonts/ATTAleckSans_W_Th.woff2") format("woff2"), url("https://www.att.com/es-us/ui/frameworks/fonts/ATTAleckSans_W_Th.woff") format("woff");
}

@font-face {
  font-family: 'font-light';
  font-style: normal;
  font-weight: normal;
  src: url("https://www.att.com/es-us/ui/frameworks/fonts/ATTAleckSans_W_Lt.woff2") format("woff2"), url("https://www.att.com/es-us/ui/frameworks/fonts/ATTAleckSans_W_Lt.woff") format("woff");
}

@font-face {
  font-family: 'font-regular';
  font-style: normal;
  font-weight: normal;
  src: url("https://www.att.com/es-us/ui/frameworks/fonts/ATTAleckSans_W_Rg.woff2") format("woff2"), url("https://www.att.com/es-us/ui/frameworks/fonts/ATTAleckSans_W_Rg.woff") format("woff");
}

@font-face {
  font-family: 'font-medium';
  font-style: normal;
  font-weight: normal;
  src: url("https://www.att.com/es-us/ui/frameworks/fonts/ATTAleckSans_W_Md.woff2") format("woff2"), url("https://www.att.com/es-us/ui/frameworks/fonts/ATTAleckSans_W_Md.woff") format("woff");
}

@font-face {
  font-family: 'font-bold';
  font-style: normal;
  font-weight: normal;
  src: url("https://www.att.com/es-us/ui/frameworks/fonts/ATTAleckSans_W_Bd.woff2") format("woff2"), url("https://www.att.com/es-us/ui/frameworks/fonts/ATTAleckSans_W_Bd.woff") format("woff");
}

@font-face {
  font-family: 'font-black';
  font-style: normal;
  font-weight: normal;
  src: url("https://www.att.com/es-us/ui/frameworks/fonts/ATTAleckSans_W_Blk.woff2") format("woff2"), url("https://www.att.com/es-us/ui/frameworks/fonts/ATTAleckSans_W_Blk.woff") format("woff");
}

[class*="font-"] {
  font-style: normal;
  font-weight: normal;
}

.font-thin {
  font-family: font-thin, sans-serif;
}

.font-thin-italic {
  font-family: font-thin, sans-serif;
  font-style: italic;
}

.font-light {
  font-family: font-light, sans-serif;
}

.font-light-italic {
  font-family: font-light, sans-serif;
  font-style: italic;
}

.font-regular {
  font-family: font-regular, sans-serif;
}

.font-italic {
  font-family: font-regular, sans-serif;
  font-style: italic;
}

.font-medium {
  font-family: font-medium, sans-serif;
}

.font-medium-italic {
  font-family: font-medium, sans-serif;
  font-style: italic;
}

.font-bold {
  font-family: font-bold, sans-serif;
}

.font-bold-italic {
  font-family: font-bold, sans-serif;
  font-style: italic;
}

.font-black {
  font-family: font-black, sans-serif;
}

.font-black-italic {
  font-family: font-black, sans-serif;
  font-style: italic;
}

:root {
  box-sizing: border-box;
  font-size: 62.5%;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  hanging-punctuation: last;
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
}

html {
  height: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
  position: relative;
  -webkit-text-size-adjust: 100%;
}

body {
  -ms-overflow-style: scrollbar;
  background-color: #fff;
  color: #454b52;
  font-family: font-regular, sans-serif;
  font-size: 1.8rem;
  font-weight: normal;
  height: 100%;
  line-height: 1.2;
  position: relative;
  width: 100%;
}

:focus {
  outline: none;
}

a {
  background-color: transparent;
  color: #0057b8;
  text-decoration: none;
}

a:hover {
  color: currentColor;
  text-decoration: underline;
}

a:active {
  color: #1d2329;
}

a:focus,
button:focus {
  color: #0057b8;
  outline: 1px dotted currentColor;
  outline-offset: 3px;
}

.is-mouse a:focus,
.is-mouse button:focus {
  outline-color: transparent;
}

b, strong {
  font-family: font-medium, sans-serif;
  font-weight: normal;
}

sup {
  font-size: .75em;
  font-style: inherit;
  line-height: 0;
  position: relative;
  top: -0.15em;
  vertical-align: baseline;
}

img {
  border: 0;
  height: auto;
  -ms-interpolation-mode: bicubic;
  max-width: 100%;
  vertical-align: middle;
}

svg {
  display: inline-block;
  height: 100%;
  max-width: 100%;
}

fieldset {
  border: none;
  padding: 0;
}

button,
input,
select,
textarea {
  font-size: 1.6rem;
  margin: 0;
  vertical-align: middle;
}

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

label,
select,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"],
[role="button"],
[role="checkbox"],
[role="radio"],
.cursor {
  cursor: pointer;
}

textarea {
  overflow: auto;
  resize: none;
  vertical-align: top;
}

select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

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

select:focus::-ms-value {
  background-color: transparent;
  color: inherit;
}

ul {
  list-style: none;
}

/* ********** GRID CONTAINERS :: DEFAULT ***************************** */
.full-width-container {
  position: relative;
}

.max-width-container {
  margin: auto;
  max-width: 1600px;
  position: relative;
}

.container {
  width: 100%;
  margin: auto;
  max-width: 1324px;
  padding: 0 16px;
}

.container.no-hpad,
.container.no-hpad-lg {
  padding: 0;
}

.row,
.row-nowrap {
  align-items: flex-start;
  display: flex;
  flex: 0 1 auto;
  width: 100%;
}

[class*="grid-"] {
  flex: 1 0 auto;
  padding: 16px;
}

[class*="grid-"].nopad {
  padding: 0;
}

[class*="grid-"]:not([class*="grid-col-"]) {
  max-width: 100%;
}

.row.nopad > [class*="grid-"],
.row.nopad-lg > [class*="grid-"],
.row-nowrap.nopad > [class*="grid-"],
.row-nowrap.nopad-lg > [class*="grid-"] {
  padding: 0;
}

.row.no-hpad > [class*="grid-"],
.row.no-hpad-lg > [class*="grid-"],
.row-nowrap.no-hpad > [class*="grid-"],
.row-nowrap.no-hpad-lg > [class*="grid-"] {
  padding-left: 0;
  padding-right: 0;
}

.flex {
  display: flex !important;
}

.inline-flex {
  display: inline-flex !important;
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

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

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.clearfix:after {
  clear: both;
  content: "";
  display: table;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.offset1 {
  margin-left: 8.3333333%;
}

.offset2 {
  margin-left: 16.6666667%;
}

.offset3 {
  margin-left: 25%;
}

.offset4 {
  margin-left: 33.3333333%;
}

.offset5 {
  margin-left: 41.6666667%;
}

.offset6 {
  margin-left: 50%;
}

.offset7 {
  margin-left: 58.3333333%;
}

.offset8 {
  margin-left: 66.6666667%;
}

.offset9 {
  margin-left: 75%;
}

.offset10 {
  margin-left: 83.3333333%;
}

.offset11 {
  margin-left: 91.6666667%;
}

.grid-col-1 {
  flex-basis: 8.3333333%;
  max-width: 8.3333333%;
}

.grid-col-2 {
  flex-basis: 16.6666667%;
  max-width: 16.6666667%;
}

.grid-col-3 {
  flex-basis: 25%;
  max-width: 25%;
}

.grid-col-4 {
  flex-basis: 33.3333333%;
  max-width: 33.3333333%;
}

.grid-col-5 {
  flex-basis: 41.6666667%;
  max-width: 41.6666667%;
}

.grid-col-6 {
  flex-basis: 50%;
  max-width: 50%;
}

.grid-col-7 {
  flex-basis: 58.3333333%;
  max-width: 58.3333333%;
}

.grid-col-8 {
  flex-basis: 66.6666667%;
  max-width: 66.6666667%;
}

.grid-col-9 {
  flex-basis: 75%;
  max-width: 75%;
}

.grid-col-10 {
  flex-basis: 83.3333333%;
  max-width: 83.3333333%;
}

.grid-col-11 {
  flex-basis: 91.6666667%;
  max-width: 91.6666667%;
}

.grid-col-12 {
  flex-basis: 100%;
  max-width: 100%;
}

.centered {
  margin-left: auto;
  margin-right: auto;
}

.flex-items-top {
  align-items: flex-start;
}

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

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

.flex-items-stretch {
  align-items: stretch;
  height: 100%;
}

.flex-self-top {
  align-self: flex-start;
}

.flex-self-center {
  -ms-grid-row-align: center;
      align-self: center;
}

.flex-self-bottom {
  align-self: flex-end;
}

.flex-self-stretch {
  -ms-grid-row-align: stretch;
      align-self: stretch;
}

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

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

.order1 {
  order: 1;
}

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

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

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

.width-full {
  width: 100%;
}

.height-full {
  height: 100%;
}

.height-auto {
  height: auto;
}

.height-0 {
  height: 0;
}

.width-xxxl-all,
.width-xxxl-lg,
.width-xxxl {
  width: 128px !important;
}

.min-width-xxxl-all,
.min-width-xxxl-lg,
.min-width-xxxl {
  min-width: 128px !important;
}

.height-xxxl-all,
.height-xxxl-lg,
.height-xxxl {
  height: 128px !important;
}

.mar-xxxl-all,
.mar-xxxl-lg,
.mar-xxxl {
  margin: 128px !important;
}

.mar-t-xxxl-all,
.mar-t-xxxl-lg,
.mar-t-xxxl {
  margin-top: 128px !important;
}

.mar-r-xxxl-all,
.mar-r-xxxl-lg,
.mar-r-xxxl {
  margin-right: 128px !important;
}

.mar-b-xxxl-all,
.mar-b-xxxl-lg,
.mar-b-xxxl {
  margin-bottom: 128px !important;
}

.mar-l-xxxl-all,
.mar-l-xxxl-lg,
.mar-l-xxxl {
  margin-left: 128px !important;
}

.pad-xxxl-all,
.pad-xxxl-lg,
.pad-xxxl {
  padding: 128px !important;
}

.pad-t-xxxl-all,
.pad-t-xxxl-lg,
.pad-t-xxxl {
  padding-top: 128px !important;
}

.pad-r-xxxl-all,
.pad-r-xxxl-lg,
.pad-r-xxxl {
  padding-right: 128px !important;
}

.pad-b-xxxl-all,
.pad-b-xxxl-lg,
.pad-b-xxxl {
  padding-bottom: 128px !important;
}

.pad-l-xxxl-all,
.pad-l-xxxl-lg,
.pad-l-xxxl {
  padding-left: 128px !important;
}

.width-xxl-all,
.width-xxl-lg,
.width-xxl {
  width: 96px !important;
}

.min-width-xxl-all,
.min-width-xxl-lg,
.min-width-xxl {
  min-width: 96px !important;
}

.height-xxl-all,
.height-xxl-lg,
.height-xxl {
  height: 96px !important;
}

.mar-xxl-all,
.mar-xxl-lg,
.mar-xxl {
  margin: 96px !important;
}

.mar-t-xxl-all,
.mar-t-xxl-lg,
.mar-t-xxl {
  margin-top: 96px !important;
}

.mar-r-xxl-all,
.mar-r-xxl-lg,
.mar-r-xxl {
  margin-right: 96px !important;
}

.mar-b-xxl-all,
.mar-b-xxl-lg,
.mar-b-xxl {
  margin-bottom: 96px !important;
}

.mar-l-xxl-all,
.mar-l-xxl-lg,
.mar-l-xxl {
  margin-left: 96px !important;
}

.pad-xxl-all,
.pad-xxl-lg,
.pad-xxl {
  padding: 96px !important;
}

.pad-t-xxl-all,
.pad-t-xxl-lg,
.pad-t-xxl {
  padding-top: 96px !important;
}

.pad-r-xxl-all,
.pad-r-xxl-lg,
.pad-r-xxl {
  padding-right: 96px !important;
}

.pad-b-xxl-all,
.pad-b-xxl-lg,
.pad-b-xxl {
  padding-bottom: 96px !important;
}

.pad-l-xxl-all,
.pad-l-xxl-lg,
.pad-l-xxl {
  padding-left: 96px !important;
}

.width-xl-all,
.width-xl-lg,
.width-xl {
  width: 64px !important;
}

.min-width-xl-lg,
.min-width-xl {
  min-width: 64px !important;
}

.height-xl-all,
.height-xl-lg,
.height-xl {
  height: 64px !important;
}

.mar-xl-all,
.mar-xl-lg,
.mar-xl {
  margin: 64px !important;
}

.mar-t-xl-all,
.mar-t-xl-lg,
.mar-t-xl {
  margin-top: 64px !important;
}

.mar-r-xl-all,
.mar-r-xl-lg,
.mar-r-xl {
  margin-right: 64px !important;
}

.mar-b-xl-all,
.mar-b-xl-lg,
.mar-b-xl {
  margin-bottom: 64px !important;
}

.mar-l-xl-all,
.mar-l-xl-lg,
.mar-l-xl {
  margin-left: 64px !important;
}

.pad-xl-all,
.pad-xl-lg,
.pad-xl {
  padding: 64px !important;
}

.pad-t-xl-all,
.pad-t-xl-lg,
.pad-t-xl {
  padding-top: 64px !important;
}

.pad-r-xl-all,
.pad-r-xl-lg,
.pad-r-xl {
  padding-right: 64px !important;
}

.pad-b-xl-all,
.pad-b-xl-lg,
.pad-b-xl {
  padding-bottom: 64px !important;
}

.pad-l-xl-all,
.pad-l-xl-lg,
.pad-l-xl {
  padding-left: 64px !important;
}

.width-lg-all,
.width-lg-lg,
.width-lg {
  width: 48px !important;
}

.min-width-lg-all,
.min-width-lg-lg,
.min-width-lg {
  min-width: 48px !important;
}

.height-lg-all,
.height-lg-lg,
.height-lg {
  height: 48px !important;
}

.mar-lg-all,
.mar-lg-lg,
.mar-lg {
  margin: 48px !important;
}

.mar-t-lg-all,
.mar-t-lg-lg,
.mar-t-lg {
  margin-top: 48px !important;
}

.mar-r-lg-all,
.mar-r-lg-lg,
.mar-r-lg {
  margin-right: 48px !important;
}

.mar-b-lg-all,
.mar-b-lg-lg,
.mar-b-lg {
  margin-bottom: 48px !important;
}

.mar-l-lg-all,
.mar-l-lg-lg,
.mar-l-lg {
  margin-left: 48px !important;
}

.pad-lg-all,
.pad-lg-lg,
.pad-lg {
  padding: 48px !important;
}

.pad-t-lg-all,
.pad-t-lg-lg,
.pad-t-lg {
  padding-top: 48px !important;
}

.pad-r-lg-all,
.pad-r-lg-lg,
.pad-r-lg {
  padding-right: 48px !important;
}

.pad-b-lg-all,
.pad-b-lg-lg,
.pad-b-lg {
  padding-bottom: 48px !important;
}

.pad-l-lg-all,
.pad-l-lg-lg,
.pad-l-lg {
  padding-left: 48px !important;
}

.width-md-all,
.width-md-lg,
.width-md {
  width: 32px !important;
}

.min-width-md-all,
.min-width-md-lg,
.min-width-md {
  min-width: 32px !important;
}

.height-md-all,
.height-md-lg,
.height-md {
  height: 32px !important;
}

.mar-md-all,
.mar-md-lg,
.mar-md {
  margin: 32px !important;
}

.mar-t-md-all,
.mar-t-md-lg,
.mar-t-md {
  margin-top: 32px !important;
}

.mar-r-md-all,
.mar-r-md-lg,
.mar-r-md {
  margin-right: 32px !important;
}

.mar-b-md-all,
.mar-b-md-lg,
.mar-b-md {
  margin-bottom: 32px !important;
}

.mar-l-md-all,
.mar-l-md-lg,
.mar-l-md {
  margin-left: 32px !important;
}

.pad-md-all,
.pad-md-lg,
.pad-md {
  padding: 32px !important;
}

.pad-t-md-all,
.pad-t-md-lg,
.pad-t-md {
  padding-top: 32px !important;
}

.pad-r-md-all,
.pad-r-md-lg,
.pad-r-md {
  padding-right: 32px !important;
}

.pad-b-md-all,
.pad-b-md-lg,
.pad-b-md {
  padding-bottom: 32px !important;
}

.pad-l-md-all,
.pad-l-md-lg,
.pad-l-md {
  padding-left: 32px !important;
}

.width-sm-all,
.width-sm-lg,
.width-sm {
  width: 24px !important;
}

.min-width-sm-all,
.min-width-sm-lg,
.min-width-sm {
  min-width: 24px !important;
}

.height-sm-all,
.height-sm-lg,
.height-sm {
  height: 24px !important;
}

.mar-sm-all,
.mar-sm-lg,
.mar-sm {
  margin: 24px !important;
}

.mar-t-sm-all,
.mar-t-sm-lg,
.mar-t-sm {
  margin-top: 24px !important;
}

.mar-r-sm-all,
.mar-r-sm-lg,
.mar-r-sm {
  margin-right: 24px !important;
}

.mar-b-sm-all,
.mar-b-sm-lg,
.mar-b-sm {
  margin-bottom: 24px !important;
}

.mar-l-sm-all,
.mar-l-sm-lg,
.mar-l-sm {
  margin-left: 24px !important;
}

.pad-sm-all,
.pad-sm-lg,
.pad-sm {
  padding: 24px !important;
}

.pad-t-sm-all,
.pad-t-sm-lg,
.pad-t-sm {
  padding-top: 24px !important;
}

.pad-r-sm-all,
.pad-r-sm-lg,
.pad-r-sm {
  padding-right: 24px !important;
}

.pad-b-sm-all,
.pad-b-sm-lg,
.pad-b-sm {
  padding-bottom: 24px !important;
}

.pad-l-sm-all,
.pad-l-sm-lg,
.pad-l-sm {
  padding-left: 24px !important;
}

.width-xs-lg,
.width-xs {
  width: 16px !important;
}

.min-width-xs-lg,
.min-width-xs {
  min-width: 16px !important;
}

.height-xs-lg,
.height-xs {
  height: 16px !important;
}

.mar-xs-lg,
.mar-xs {
  margin: 16px !important;
}

.mar-t-xs-lg,
.mar-t-xs {
  margin-top: 16px !important;
}

.mar-r-xs-lg,
.mar-r-xs {
  margin-right: 16px !important;
}

.mar-b-xs-lg,
.mar-b-xs {
  margin-bottom: 16px !important;
}

.mar-l-xs-lg,
.mar-l-xs {
  margin-left: 16px !important;
}

.pad-xs-lg,
.pad-xs {
  padding: 16px !important;
}

.pad-t-xs-lg,
.pad-t-xs {
  padding-top: 16px !important;
}

.pad-r-xs-lg,
.pad-r-xs {
  padding-right: 16px !important;
}

.pad-b-xs-lg,
.pad-b-xs {
  padding-bottom: 16px !important;
}

.pad-l-xs-lg,
.pad-l-xs {
  padding-left: 16px !important;
}

.width-xxs-lg,
.width-xxs {
  width: 8px !important;
}

.min-width-xxs-lg,
.min-width-xxs {
  min-width: 8px !important;
}

.height-xxs-lg,
.height-xxs {
  height: 8px !important;
}

.mar-xxs-lg,
.mar-xxs {
  margin: 8px !important;
}

.mar-t-xxs-lg,
.mar-t-xxs {
  margin-top: 8px !important;
}

.mar-r-xxs-lg,
.mar-r-xxs {
  margin-right: 8px !important;
}

.mar-b-xxs-lg,
.mar-b-xxs {
  margin-bottom: 8px !important;
}

.mar-l-xxs-lg,
.mar-l-xxs {
  margin-left: 8px !important;
}

.pad-xxs-lg,
.pad-xxs {
  padding: 8px !important;
}

.pad-t-xxs-lg,
.pad-t-xxs {
  padding-top: 8px !important;
}

.pad-r-xxs-lg,
.pad-r-xxs {
  padding-right: 8px !important;
}

.pad-b-xxs-lg,
.pad-b-xxs {
  padding-bottom: 8px !important;
}

.pad-l-xxs-lg,
.pad-l-xxs {
  padding-left: 8px !important;
}

.width-xxxs-lg,
.width-xxxs {
  width: 4px !important;
}

.min-width-xxxs-lg,
.min-width-xxxs {
  min-width: 4px !important;
}

.height-xxxs-lg,
.height-xxxs {
  height: 4px !important;
}

.mar-xxxs-lg,
.mar-xxxs {
  margin: 4px !important;
}

.mar-t-xxxs-lg,
.mar-t-xxxs {
  margin-top: 4px !important;
}

.mar-r-xxxs-lg,
.mar-r-xxxs {
  margin-right: 4px !important;
}

.mar-b-xxxs-lg,
.mar-b-xxxs {
  margin-bottom: 4px !important;
}

.mar-l-xxxs-lg,
.mar-l-xxxs {
  margin-left: 4px !important;
}

.pad-xxxs-lg,
.pad-xxxs {
  padding: 4px !important;
}

.pad-t-xxxs-lg,
.pad-t-xxxs {
  padding-top: 4px !important;
}

.pad-r-xxxs-lg,
.pad-r-xxxs {
  padding-right: 4px !important;
}

.pad-b-xxxs-lg,
.pad-b-xxxs {
  padding-bottom: 4px !important;
}

.pad-l-xxxs-lg,
.pad-l-xxxs {
  padding-left: 4px !important;
}

.mar-none-all,
.mar-none-lg,
.mar-none {
  margin: 0 !important;
}

.mar-t-none-all,
.mar-t-none-lg,
.mar-t-none {
  margin-top: 0 !important;
}

.mar-r-none-all,
.mar-r-none-lg,
.mar-r-none {
  margin-right: 0 !important;
}

.mar-b-none-all,
.mar-b-none-lg,
.mar-b-none {
  margin-bottom: 0 !important;
}

.mar-l-none-all,
.mar-l-none-lg,
.mar-l-none {
  margin-left: 0 !important;
}

.pad-none-all,
.pad-none-lg,
.pad-none {
  padding: 0 !important;
}

.pad-t-none-all,
.pad-t-none-lg,
.pad-t-none {
  padding-top: 0 !important;
}

.pad-r-none-all,
.pad-r-none-lg,
.pad-r-none {
  padding-right: 0 !important;
}

.pad-b-none-all,
.pad-b-none-lg,
.pad-b-none {
  padding-bottom: 0 !important;
}

.pad-l-none-all,
.pad-l-none-lg,
.pad-l-none {
  padding-left: 0 !important;
}

/* ********** BREAKPOINT :: MEDIUM ************** */
@media (max-width: 1024px) and (min-width: 768px) {
  .container.no-hpad-md {
    padding: 0;
  }
  .row.nopad-md > [class*="grid-"],
  .row-nowrap.nopad-md > [class*="grid-"] {
    padding: 0 !important;
  }
  .row.no-hpad-md > [class*="grid-"],
  .row-nowrap.no-hpad-md > [class*="grid-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .offset0-md {
    margin-left: 0;
  }
  .offset1-md {
    margin-left: 8.3333333%;
  }
  .offset2-md {
    margin-left: 16.6666667%;
  }
  .offset3-md {
    margin-left: 25%;
  }
  .offset4-md {
    margin-left: 33.3333333%;
  }
  .offset5-md {
    margin-left: 41.6666667%;
  }
  .offset6-md {
    margin-left: 50%;
  }
  .offset7-md {
    margin-left: 58.3333333%;
  }
  .offset8-md {
    margin-left: 66.6666667%;
  }
  .offset9-md {
    margin-left: 75%;
  }
  .offset10-md {
    margin-left: 83.3333333%;
  }
  .offset11-md {
    margin-left: 91.6666667%;
  }
  .grid-col-1-md {
    flex-basis: 8.3333333%;
    max-width: 8.3333333%;
  }
  .grid-col-2-md {
    flex-basis: 16.6666667%;
    max-width: 16.6666667%;
  }
  .grid-col-3-md {
    flex-basis: 25%;
    max-width: 25%;
  }
  .grid-col-4-md {
    flex-basis: 33.3333333%;
    max-width: 33.3333333%;
  }
  .grid-col-5-md {
    flex-basis: 41.6666667%;
    max-width: 41.6666667%;
  }
  .grid-col-6-md {
    flex-basis: 50%;
    max-width: 50%;
  }
  .grid-col-7-md {
    flex-basis: 58.3333333%;
    max-width: 58.3333333%;
  }
  .grid-col-8-md {
    flex-basis: 66.6666667%;
    max-width: 66.6666667%;
  }
  .grid-col-9-md {
    flex-basis: 75%;
    max-width: 75%;
  }
  .grid-col-10-md {
    flex-basis: 83.3333333%;
    max-width: 83.3333333%;
  }
  .grid-col-11-md {
    flex-basis: 91.6666667%;
    max-width: 91.6666667%;
  }
  .grid-col-12-md {
    flex-basis: 100%;
    max-width: 100%;
  }
  .centered-md {
    margin-left: auto;
    margin-right: auto;
  }
  .flex-column-md {
    flex-direction: column;
  }
  .flex-items-top-md {
    align-items: flex-start;
  }
  .flex-items-bottom-md {
    align-items: flex-end;
  }
  .flex-items-center-md {
    align-items: center;
  }
  .flex-items-stretch-md {
    align-items: stretch;
    height: 100%;
  }
  .flex-self-top-md {
    align-self: flex-start;
  }
  .flex-self-center-md {
    -ms-grid-row-align: center;
        align-self: center;
  }
  .flex-self-bottom-md {
    align-self: flex-end;
  }
  .flex-self-stretch-md {
    -ms-grid-row-align: stretch;
        align-self: stretch;
  }
  .justify-end-md {
    justify-content: flex-end;
  }
  .justify-center-md {
    justify-content: center;
  }
  .justify-between-md {
    justify-content: space-between;
  }
  .width-xxxl-md,
  .width-xxxl {
    width: 96px !important;
  }
  .min-width-xxxl,
  .min-width-xxxl {
    min-width: 96px !important;
  }
  .height-xxxl-md,
  .height-xxxl {
    height: 96px !important;
  }
  .mar-xxxl-md,
  .mar-xxxl {
    margin: 96px !important;
  }
  .mar-t-xxxl-md,
  .mar-t-xxxl {
    margin-top: 96px !important;
  }
  .mar-r-xxxl-md,
  .mar-r-xxxl {
    margin-right: 96px !important;
  }
  .mar-b-xxxl-md,
  .mar-b-xxxl {
    margin-bottom: 96px !important;
  }
  .mar-l-xxxl-md,
  .mar-l-xxxl {
    margin-left: 96px !important;
  }
  .pad-xxxl-md,
  .pad-xxxl {
    padding: 96px !important;
  }
  .pad-t-xxxl-md,
  .pad-t-xxxl {
    padding-top: 96px !important;
  }
  .pad-r-xxxl-md,
  .pad-r-xxxl {
    padding-right: 96px !important;
  }
  .pad-b-xxxl-md,
  .pad-b-xxxl {
    padding-bottom: 96px !important;
  }
  .pad-l-xxxl-md,
  .pad-l-xxxl {
    padding-left: 96px !important;
  }
  .width-xxl-md,
  .width-xxl {
    width: 64px !important;
  }
  .min-width-xxl,
  .min-width-xxl {
    min-width: 64px !important;
  }
  .height-xxl-md,
  .height-xxl {
    height: 64px !important;
  }
  .mar-xxl-md,
  .mar-xxl {
    margin: 64px !important;
  }
  .mar-t-xxl-md,
  .mar-t-xxl {
    margin-top: 64px !important;
  }
  .mar-r-xxl-md,
  .mar-r-xxl {
    margin-right: 64px !important;
  }
  .mar-b-xxl-md,
  .mar-b-xxl {
    margin-bottom: 64px !important;
  }
  .mar-l-xxl-md,
  .mar-l-xxl {
    margin-left: 64px !important;
  }
  .pad-xxl-md,
  .pad-xxl {
    padding: 64px !important;
  }
  .pad-t-xxl-md,
  .pad-t-xxl {
    padding-top: 64px !important;
  }
  .pad-r-xxl-md,
  .pad-r-xxl {
    padding-right: 64px !important;
  }
  .pad-b-xxl-md,
  .pad-b-xxl {
    padding-bottom: 64px !important;
  }
  .pad-l-xxl-md,
  .pad-l-xxl {
    padding-left: 64px !important;
  }
  .width-xl-md,
  .width-xl {
    width: 48px !important;
  }
  .min-width-xl,
  .min-width-xl {
    min-width: 48px !important;
  }
  .height-xl-md,
  .height-xl {
    height: 48px !important;
  }
  .mar-xl-md,
  .mar-xl {
    margin: 48px !important;
  }
  .mar-t-xl-md,
  .mar-t-xl {
    margin-top: 48px !important;
  }
  .mar-r-xl-md,
  .mar-r-xl {
    margin-right: 48px !important;
  }
  .mar-b-xl-md,
  .mar-b-xl {
    margin-bottom: 48px !important;
  }
  .mar-l-xl-md,
  .mar-l-xl {
    margin-left: 48px !important;
  }
  .pad-xl-md,
  .pad-xl {
    padding: 48px !important;
  }
  .pad-t-xl-md,
  .pad-t-xl {
    padding-top: 48px !important;
  }
  .pad-r-xl-md,
  .pad-r-xl {
    padding-right: 48px !important;
  }
  .pad-b-xl-md,
  .pad-b-xl {
    padding-bottom: 48px !important;
  }
  .pad-l-xl-md,
  .pad-l-xl {
    padding-left: 48px !important;
  }
  .width-lg-md,
  .width-lg {
    width: 32px !important;
  }
  .min-width-lg,
  .min-width-lg {
    min-width: 32px !important;
  }
  .height-lg-md,
  .height-lg {
    height: 32px !important;
  }
  .mar-lg-md,
  .mar-lg {
    margin: 32px !important;
  }
  .mar-t-lg-md,
  .mar-t-lg {
    margin-top: 32px !important;
  }
  .mar-r-lg-md,
  .mar-r-lg {
    margin-right: 32px !important;
  }
  .mar-b-lg-md,
  .mar-b-lg {
    margin-bottom: 32px !important;
  }
  .mar-l-lg-md,
  .mar-l-lg {
    margin-left: 32px !important;
  }
  .pad-lg-md,
  .pad-lg {
    padding: 32px !important;
  }
  .pad-t-lg-md,
  .pad-t-lg {
    padding-top: 32px !important;
  }
  .pad-r-lg-md,
  .pad-r-lg {
    padding-right: 32px !important;
  }
  .pad-b-lg-md,
  .pad-b-lg {
    padding-bottom: 32px !important;
  }
  .pad-l-lg-md,
  .pad-l-lg {
    padding-left: 32px !important;
  }
  .width-md-md,
  .width-md {
    width: 24px !important;
  }
  .min-width-md,
  .min-width-md {
    min-width: 24px !important;
  }
  .height-md-md,
  .height-md {
    height: 24px !important;
  }
  .mar-md-md,
  .mar-md {
    margin: 24px !important;
  }
  .mar-t-md-md,
  .mar-t-md {
    margin-top: 24px !important;
  }
  .mar-r-md-md,
  .mar-r-md {
    margin-right: 24px !important;
  }
  .mar-b-md-md,
  .mar-b-md {
    margin-bottom: 24px !important;
  }
  .mar-l-md-md,
  .mar-l-md {
    margin-left: 24px !important;
  }
  .pad-md-md,
  .pad-md {
    padding: 24px !important;
  }
  .pad-t-md-md,
  .pad-t-md {
    padding-top: 24px !important;
  }
  .pad-r-md-md,
  .pad-r-md {
    padding-right: 24px !important;
  }
  .pad-b-md-md,
  .pad-b-md {
    padding-bottom: 24px !important;
  }
  .pad-l-md-md,
  .pad-l-md {
    padding-left: 24px !important;
  }
  .width-sm-md,
  .width-sm {
    width: 16px !important;
  }
  .min-width-sm,
  .min-width-sm {
    min-width: 16px !important;
  }
  .height-sm-md,
  .height-sm {
    height: 16px !important;
  }
  .mar-sm-md,
  .mar-sm {
    margin: 16px !important;
  }
  .mar-t-sm-md,
  .mar-t-sm {
    margin-top: 16px !important;
  }
  .mar-r-sm-md,
  .mar-r-sm {
    margin-right: 16px !important;
  }
  .mar-b-sm-md,
  .mar-b-sm {
    margin-bottom: 16px !important;
  }
  .mar-l-sm-md,
  .mar-l-sm {
    margin-left: 16px !important;
  }
  .pad-sm-md,
  .pad-sm {
    padding: 16px !important;
  }
  .pad-t-sm-md,
  .pad-t-sm {
    padding-top: 16px !important;
  }
  .pad-r-sm-md,
  .pad-r-sm {
    padding-right: 16px !important;
  }
  .pad-b-sm-md,
  .pad-b-sm {
    padding-bottom: 16px !important;
  }
  .pad-l-sm-md,
  .pad-l-sm {
    padding-left: 16px !important;
  }
  .width-xs-md {
    width: 16px !important;
  }
  .min-width-xs-md {
    min-width: 16px !important;
  }
  .height-xs-md {
    height: 16px !important;
  }
  .mar-xs-md {
    margin: 16px !important;
  }
  .mar-t-xs-md {
    margin-top: 16px !important;
  }
  .mar-r-xs-md {
    margin-right: 16px !important;
  }
  .mar-b-xs-md {
    margin-bottom: 16px !important;
  }
  .mar-l-xs-md {
    margin-left: 16px !important;
  }
  .pad-xs-md {
    padding: 16px !important;
  }
  .pad-t-xs-md {
    padding-top: 16px !important;
  }
  .pad-r-xs-md {
    padding-right: 16px !important;
  }
  .pad-b-xs-md {
    padding-bottom: 16px !important;
  }
  .pad-l-xs-md {
    padding-left: 16px !important;
  }
  .width-xxs-md {
    width: 8px !important;
  }
  .min-width-xxs-md {
    min-width: 8px !important;
  }
  .height-xxs-md {
    height: 8px !important;
  }
  .mar-xxs-md {
    margin: 8px !important;
  }
  .mar-t-xxs-md {
    margin-top: 8px !important;
  }
  .mar-r-xxs-md {
    margin-right: 8px !important;
  }
  .mar-b-xxs-md {
    margin-bottom: 8px !important;
  }
  .mar-l-xxs-md {
    margin-left: 8px !important;
  }
  .pad-xxs-md {
    padding: 8px !important;
  }
  .pad-t-xxs-md {
    padding-top: 8px !important;
  }
  .pad-r-xxs-md {
    padding-right: 8px !important;
  }
  .pad-b-xxs-md {
    padding-bottom: 8px !important;
  }
  .pad-l-xxs-md {
    padding-left: 8px !important;
  }
  .width-xxxs-md {
    width: 4px !important;
  }
  .min-width-xxxs-md {
    min-width: 4px !important;
  }
  .height-xxxs-md {
    height: 4px !important;
  }
  .mar-xxxs-md {
    margin: 4px !important;
  }
  .mar-t-xxxs-md {
    margin-top: 4px !important;
  }
  .mar-r-xxxs-md {
    margin-right: 4px !important;
  }
  .mar-b-xxxs-md {
    margin-bottom: 4px !important;
  }
  .mar-l-xxxs-md {
    margin-left: 4px !important;
  }
  .pad-xxxs-md {
    padding: 4px !important;
  }
  .pad-t-xxxs-md {
    padding-top: 4px !important;
  }
  .pad-r-xxxs-md {
    padding-right: 4px !important;
  }
  .pad-b-xxxs-md {
    padding-bottom: 4px !important;
  }
  .pad-l-xxxs-md {
    padding-left: 4px !important;
  }
  .mar-none-md {
    margin: 0 !important;
  }
  .mar-t-none-md {
    margin-top: 0 !important;
  }
  .mar-r-none-md {
    margin-right: 0 !important;
  }
  .mar-b-none-md {
    margin-bottom: 0 !important;
  }
  .mar-l-none-md {
    margin-left: 0 !important;
  }
  .pad-none-md {
    padding: 0 !important;
  }
  .pad-t-none-md {
    padding-top: 0 !important;
  }
  .pad-r-none-md {
    padding-right: 0 !important;
  }
  .pad-b-none-md {
    padding-bottom: 0 !important;
  }
  .pad-l-none-md {
    padding-left: 0 !important;
  }
}

/* ********** BREAKPOINT :: SMALL PORTRAIT & SMALL ************** */
@media (max-width: 666px), (orientation: portrait) and (max-width: 767px) {
  .container {
    padding: 0 12px;
  }
  .container.no-hpad-sm {
    padding: 0;
  }
  .row {
    display: block;
  }
  [class*="offset"] {
    margin-left: 0px;
  }
  .row > [class*="grid-"] {
    max-width: 100%;
    padding: 12px;
  }
  .row-nowrap > [class*="grid-"] {
    padding: 12px;
  }
  row > [class*="grid-"].nopad,
  .row-nowrap > [class*="grid-"].nopad {
    padding: 0;
  }
  .row.nopad-sm > [class*="grid-"],
  .row-nowrap.nopad-sm > [class*="grid-"] {
    padding: 0 !important;
  }
  .row.no-hpad-sm > [class*="grid-"],
  .row-nowrap.no-hpad-sm > [class*="grid-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 767px) {
  .offset0-sm {
    margin-left: 0;
  }
  .offset1-sm {
    margin-left: 8.3333333%;
  }
  .offset2-sm {
    margin-left: 16.6666667%;
  }
  .offset3-sm {
    margin-left: 25%;
  }
  .offset4-sm {
    margin-left: 33.3333333%;
  }
  .offset5-sm {
    margin-left: 41.6666667%;
  }
  .offset6-sm {
    margin-left: 50%;
  }
  .offset7-sm {
    margin-left: 58.3333333%;
  }
  .offset8-sm {
    margin-left: 66.6666667%;
  }
  .offset9-sm {
    margin-left: 75%;
  }
  .offset10-sm {
    margin-left: 83.3333333%;
  }
  .offset11-sm {
    margin-left: 91.6666667%;
  }
  .grid-col-1-sm {
    flex-basis: 8.3333333%;
    max-width: 8.3333333%;
  }
  .grid-col-2-sm {
    flex-basis: 16.6666667%;
    max-width: 16.6666667%;
  }
  .grid-col-3-sm {
    flex-basis: 25%;
    max-width: 25%;
  }
  .grid-col-4-sm {
    flex-basis: 33.3333333%;
    max-width: 33.3333333%;
  }
  .grid-col-5-sm {
    flex-basis: 41.6666667%;
    max-width: 41.6666667%;
  }
  .grid-col-6-sm {
    flex-basis: 50%;
    max-width: 50%;
  }
  .grid-col-7-sm {
    flex-basis: 58.3333333%;
    max-width: 58.3333333%;
  }
  .grid-col-8-sm {
    flex-basis: 66.6666667%;
    max-width: 66.6666667%;
  }
  .grid-col-9-sm {
    flex-basis: 75%;
    max-width: 75%;
  }
  .grid-col-10-sm {
    flex-basis: 83.3333333%;
    max-width: 83.3333333%;
  }
  .grid-col-11-sm {
    flex-basis: 91.6666667%;
    max-width: 91.6666667%;
  }
  .grid-col-12-sm {
    flex-basis: 100%;
    max-width: 100%;
  }
  .row > [class*="grid-"].nopad,
  .row-nowrap > [class*="grid-"].nopad {
    padding: 0;
  }
  .centered-sm {
    margin-left: auto;
    margin-right: auto;
  }
  .flex-column-sm {
    flex-direction: column;
  }
  .flex-items-top-sm {
    align-items: flex-start;
  }
  .flex-items-bottom-sm {
    align-items: flex-end;
  }
  .flex-items-center-sm {
    align-items: center;
  }
  .flex-items-stretch-sm {
    align-items: stretch;
    height: 100%;
  }
  .flex-self-top-sm {
    align-self: flex-start;
  }
  .flex-self-center-sm {
    -ms-grid-row-align: center;
        align-self: center;
  }
  .flex-self-bottom-sm {
    align-self: flex-end;
  }
  .flex-self-stretch-sm {
    -ms-grid-row-align: stretch;
        align-self: stretch;
  }
  .justify-end-sm {
    justify-content: flex-end;
  }
  .justify-center-sm {
    justify-content: center;
  }
  .justify-between-sm {
    justify-content: space-between;
  }
  .width-xxxl-sm,
  .width-xxxl {
    width: 64px !important;
  }
  .min-width-xxxl-sm,
  .min-width-xxxl {
    min-width: 64px !important;
  }
  .height-xxxl-sm,
  .height-xxxl {
    height: 64px !important;
  }
  .mar-xxxl-sm,
  .mar-xxxl {
    margin: 64px !important;
  }
  .mar-t-xxxl-sm,
  .mar-t-xxxl {
    margin-top: 64px !important;
  }
  .mar-r-xxxl-sm,
  .mar-r-xxxl {
    margin-right: 64px !important;
  }
  .mar-b-xxxl-sm,
  .mar-b-xxxl {
    margin-bottom: 64px !important;
  }
  .mar-l-xxxl-sm,
  .mar-l-xxxl {
    margin-left: 64px !important;
  }
  .pad-xxxl-sm,
  .pad-xxxl {
    padding: 64px !important;
  }
  .pad-t-xxxl-sm,
  .pad-t-xxxl {
    padding-top: 64px !important;
  }
  .pad-r-xxxl-sm,
  .pad-r-xxxl {
    padding-right: 64px !important;
  }
  .pad-b-xxxl-sm,
  .pad-b-xxxl {
    padding-bottom: 64px !important;
  }
  .pad-l-xxxl-sm,
  .pad-l-xxxl {
    padding-left: 64px !important;
  }
  .width-xxl-sm,
  .width-xxl {
    width: 48px !important;
  }
  .min-width-xxl-sm,
  .min-width-xxl {
    min-width: 48px !important;
  }
  .height-xxl-sm,
  .height-xxl {
    height: 48px !important;
  }
  .mar-xxl-sm,
  .mar-xxl {
    margin: 48px !important;
  }
  .mar-t-xxl-sm,
  .mar-t-xxl {
    margin-top: 48px !important;
  }
  .mar-r-xxl-sm,
  .mar-r-xxl {
    margin-right: 48px !important;
  }
  .mar-b-xxl-sm,
  .mar-b-xxl {
    margin-bottom: 48px !important;
  }
  .mar-l-xxl-sm,
  .mar-l-xxl {
    margin-left: 48px !important;
  }
  .pad-xxl-sm,
  .pad-xxl {
    padding: 48px !important;
  }
  .pad-t-xxl-sm,
  .pad-t-xxl {
    padding-top: 48px !important;
  }
  .pad-r-xxl-sm,
  .pad-r-xxl {
    padding-right: 48px !important;
  }
  .pad-b-xxl-sm,
  .pad-b-xxl {
    padding-bottom: 48px !important;
  }
  .pad-l-xxl-sm,
  .pad-l-xxl {
    padding-left: 48px !important;
  }
  .width-xl-sm,
  .width-xl {
    width: 32px !important;
  }
  .min-width-xl-sm,
  .min-width-xl {
    min-width: 32px !important;
  }
  .height-xl-sm,
  .height-xl {
    height: 32px !important;
  }
  .mar-xl-sm,
  .mar-xl {
    margin: 32px !important;
  }
  .mar-t-xl-sm,
  .mar-t-xl {
    margin-top: 32px !important;
  }
  .mar-r-xl-sm,
  .mar-r-xl {
    margin-right: 32px !important;
  }
  .mar-b-xl-sm,
  .mar-b-xl {
    margin-bottom: 32px !important;
  }
  .mar-l-xl-sm,
  .mar-l-xl {
    margin-left: 32px !important;
  }
  .pad-xl-sm,
  .pad-xl {
    padding: 32px !important;
  }
  .pad-t-xl-sm,
  .pad-t-xl {
    padding-top: 32px !important;
  }
  .pad-r-xl-sm,
  .pad-r-xl {
    padding-right: 32px !important;
  }
  .pad-b-xl-sm,
  .pad-b-xl {
    padding-bottom: 32px !important;
  }
  .pad-l-xl-sm,
  .pad-l-xl {
    padding-left: 32px !important;
  }
  .width-lg-sm,
  .width-lg {
    width: 24px !important;
  }
  .min-width-lg-sm,
  .min-width-lg {
    min-width: 24px !important;
  }
  .height-lg-sm,
  .height-lg {
    height: 24px !important;
  }
  .mar-lg-sm,
  .mar-lg {
    margin: 24px !important;
  }
  .mar-t-lg-sm,
  .mar-t-lg {
    margin-top: 24px !important;
  }
  .mar-r-lg-sm,
  .mar-r-lg {
    margin-right: 24px !important;
  }
  .mar-b-lg-sm,
  .mar-b-lg {
    margin-bottom: 24px !important;
  }
  .mar-l-lg-sm,
  .mar-l-lg {
    margin-left: 24px !important;
  }
  .pad-lg-sm,
  .pad-lg {
    padding: 24px !important;
  }
  .pad-t-lg-sm,
  .pad-t-lg {
    padding-top: 24px !important;
  }
  .pad-r-lg-sm,
  .pad-r-lg {
    padding-right: 24px !important;
  }
  .pad-b-lg-sm,
  .pad-b-lg {
    padding-bottom: 24px !important;
  }
  .pad-l-lg-sm,
  .pad-l-lg {
    padding-left: 24px !important;
  }
  .width-md-sm,
  .width-md {
    width: 16px !important;
  }
  .min-width-md-sm,
  .min-width-md {
    min-width: 16px !important;
  }
  .height-md-sm,
  .height-md {
    height: 16px !important;
  }
  .mar-md-sm,
  .mar-md {
    margin: 16px !important;
  }
  .mar-t-md-sm,
  .mar-t-md {
    margin-top: 16px !important;
  }
  .mar-r-md-sm,
  .mar-r-md {
    margin-right: 16px !important;
  }
  .mar-b-md-sm,
  .mar-b-md {
    margin-bottom: 16px !important;
  }
  .mar-l-md-sm,
  .mar-l-md {
    margin-left: 16px !important;
  }
  .pad-md-sm,
  .pad-md {
    padding: 16px !important;
  }
  .pad-t-md-sm,
  .pad-t-md {
    padding-top: 16px !important;
  }
  .pad-r-md-sm,
  .pad-r-md {
    padding-right: 16px !important;
  }
  .pad-b-md-sm,
  .pad-b-md {
    padding-bottom: 16px !important;
  }
  .pad-l-md-sm,
  .pad-l-md {
    padding-left: 16px !important;
  }
  .width-sm-sm,
  .width-sm {
    width: 8px !important;
  }
  .min-width-sm-sm,
  .min-width-sm {
    min-width: 8px !important;
  }
  .height-sm-sm,
  .height-sm {
    height: 8px !important;
  }
  .mar-sm-sm,
  .mar-sm {
    margin: 8px !important;
  }
  .mar-t-sm-sm,
  .mar-t-sm {
    margin-top: 8px !important;
  }
  .mar-r-sm-sm,
  .mar-r-sm {
    margin-right: 8px !important;
  }
  .mar-b-sm-sm,
  .mar-b-sm {
    margin-bottom: 8px !important;
  }
  .mar-l-sm-sm,
  .mar-l-sm {
    margin-left: 8px !important;
  }
  .pad-sm-sm,
  .pad-sm {
    padding: 8px !important;
  }
  .pad-t-sm-sm,
  .pad-t-sm {
    padding-top: 8px !important;
  }
  .pad-r-sm-sm,
  .pad-r-sm {
    padding-right: 8px !important;
  }
  .pad-b-sm-sm,
  .pad-b-sm {
    padding-bottom: 8px !important;
  }
  .pad-l-sm-sm,
  .pad-l-sm {
    padding-left: 8px !important;
  }
  .width-xs-sm {
    width: 16px !important;
  }
  .min-width-xs-sm {
    min-width: 16px !important;
  }
  .height-xs-sm {
    height: 16px !important;
  }
  .mar-xs-sm {
    margin: 16px !important;
  }
  .mar-t-xs-sm {
    margin-top: 16px !important;
  }
  .mar-r-xs-sm {
    margin-right: 16px !important;
  }
  .mar-b-xs-sm {
    margin-bottom: 16px !important;
  }
  .mar-l-xs-sm {
    margin-left: 16px !important;
  }
  .pad-xs-sm {
    padding: 16px !important;
  }
  .pad-t-xs-sm {
    padding-top: 16px !important;
  }
  .pad-r-xs-sm {
    padding-right: 16px !important;
  }
  .pad-b-xs-sm {
    padding-bottom: 16px !important;
  }
  .pad-l-xs-sm {
    padding-left: 16px !important;
  }
  .width-xxs-sm {
    width: 8px !important;
  }
  .min-width-xxs-sm {
    min-width: 8px !important;
  }
  .height-xxs-sm {
    height: 8px !important;
  }
  .mar-xxs-sm {
    margin: 8px !important;
  }
  .mar-t-xxs-sm {
    margin-top: 8px !important;
  }
  .mar-r-xxs-sm {
    margin-right: 8px !important;
  }
  .mar-b-xxs-sm {
    margin-bottom: 8px !important;
  }
  .mar-l-xxs-sm {
    margin-left: 8px !important;
  }
  .pad-xxs-sm {
    padding: 8px !important;
  }
  .pad-t-xxs-sm {
    padding-top: 8px !important;
  }
  .pad-r-xxs-sm {
    padding-right: 8px !important;
  }
  .pad-b-xxs-sm {
    padding-bottom: 8px !important;
  }
  .pad-l-xxs-sm {
    padding-left: 8px !important;
  }
  .width-xxxs-sm {
    width: 4px !important;
  }
  .min-width-xxxs-sm {
    min-width: 4px !important;
  }
  .height-xxxs-sm {
    height: 4px !important;
  }
  .mar-xxxs-sm {
    margin: 4px !important;
  }
  .mar-t-xxxs-sm {
    margin-top: 4px !important;
  }
  .mar-r-xxxs-sm {
    margin-right: 4px !important;
  }
  .mar-b-xxxs-sm {
    margin-bottom: 4px !important;
  }
  .mar-l-xxxs-sm {
    margin-left: 4px !important;
  }
  .pad-xxxs-sm {
    padding: 4px !important;
  }
  .pad-t-xxxs-sm {
    padding-top: 4px !important;
  }
  .pad-r-xxxs-sm {
    padding-right: 4px !important;
  }
  .pad-b-xxxs-sm {
    padding-bottom: 4px !important;
  }
  .pad-l-xxxs-sm {
    padding-left: 4px !important;
  }
  .mar-none-sm {
    margin: 0 !important;
  }
  .mar-t-none-sm {
    margin-top: 0 !important;
  }
  .mar-r-none-sm {
    margin-right: 0 !important;
  }
  .mar-b-none-sm {
    margin-bottom: 0 !important;
  }
  .mar-l-none-sm {
    margin-left: 0 !important;
  }
  .pad-none-sm {
    padding: 0 !important;
  }
  .pad-t-none-sm {
    padding-top: 0 !important;
  }
  .pad-r-none-sm {
    padding-right: 0 !important;
  }
  .pad-b-none-sm {
    padding-bottom: 0 !important;
  }
  .pad-l-none-sm {
    padding-left: 0 !important;
  }
}

.show {
  display: inherit;
}

.hide {
  display: none !important;
}

.absolute {
  position: absolute !important;
}

.rel {
  position: relative !important;
  z-index: 0;
}

.static {
  position: static !important;
}

.top {
  top: 0 !important;
}

.right {
  right: 0 !important;
}

.bottom {
  bottom: 0 !important;
}

.left {
  left: 0 !important;
}

.opacity0 {
  opacity: 0;
}

.opacity1 {
  opacity: 1;
}

.fadein {
  opacity: 1;
  transition: opacity .3s linear 0s;
}

.fadeout {
  opacity: 0;
  transition: opacity .3s linear 0s;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-y-scroll {
  overflow-y: scroll;
  overscroll-behavior: contain;
}

.overflow-x-scroll {
  overflow-x: scroll;
  overscroll-behavior: contain;
}

.overflow-x-auto {
  overflow-x: auto;
  overscroll-behavior: contain;
}

.overflow-y-auto {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

.scrollbar-hidden {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.rotate90 {
  transform: rotate(90deg);
}

.rotate180 {
  transform: rotate(180deg);
}

.rotate270 {
  transform: rotate(270deg);
}

.uppercase {
  text-transform: uppercase;
}

.strikethrough {
  text-decoration: line-through;
}

svg .currentColor {
  fill: currentColor !important;
}

svg .currentStrokeColor {
  stroke: currentColor !important;
}

.currentColor {
  color: currentColor !important;
}

.border-none {
  border: none;
}

.border {
  border: 1px solid #dcdfe3;
}

.border-top {
  border-top: 1px solid transparent;
}

.border-bottom {
  border-bottom: 1px solid transparent;
}

.border-left {
  border-left: 1px solid transparent;
}

.border-right {
  border-right: 1px solid transparent;
}

.border-black {
  border-color: #000000;
}

.border-ui-black {
  border-color: #1d2329;
}

.border-dark-gray {
  border-color: #454b52;
}

.border-medium-gray {
  border-color: #686e74;
}

.border-light-gray {
  border-color: #dcdfe3;
}

.border-background-gray {
  border-color: #f2f2f2;
}

.border-white {
  border-color: #fff;
}

.border-shadow {
  box-shadow: 0 0 0 1px #dcdfe3;
}

.pill-radius {
  border-radius: 2em !important;
}

[class*="icon-chevron"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath fill='%231d2329' fill-rule='nonzero' d='M5.276 4.602a.481.481 0 0 1 0 .768L.814 9.833a.477.477 0 1 1-.674-.675l4.172-4.172L.14.814A.477.477 0 0 1 .814.14l4.462 4.462z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 14px;
  width: 14px;
}

.icon-chevron-blue {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath fill='%230057b8' fill-rule='nonzero' d='M5.276 4.602a.481.481 0 0 1 0 .768L.814 9.833a.477.477 0 1 1-.674-.675l4.172-4.172L.14.814A.477.477 0 0 1 .814.14l4.462 4.462z'/%3E%3C/svg%3E");
}

.icon-close {
  align-items: center;
  background-color: transparent;
  border: none;
  display: flex;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.icon-close:after,
.icon-close.color-black:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-18 32 36 36'%3E%3Cpath fill='%23000000' d='M-9.3 61.1c-.5 0-.9-.2-1.3-.5-.7-.7-.7-1.8 0-2.6L7.9 39.5c.7-.7 1.8-.7 2.6 0 .7.7.7 1.8 0 2.6L-8 60.5c-.4.4-.8.6-1.3.6zm18.5 0c-.5 0-.9-.2-1.3-.5l-18.5-18.5c-.7-.7-.7-1.8 0-2.6.7-.7 1.8-.7 2.6 0L10.5 58c.7.7.7 1.8 0 2.6-.4.3-.8.5-1.3.5z'/%3E%3C/svg%3E");
  content: "";
  display: block;
  height: 18px;
  width: 18px;
}

.icon-close.color-ui-white:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-18 32 36 36'%3E%3Cpath fill='%23fff' d='M-9.3 61.1c-.5 0-.9-.2-1.3-.5-.7-.7-.7-1.8 0-2.6L7.9 39.5c.7-.7 1.8-.7 2.6 0 .7.7.7 1.8 0 2.6L-8 60.5c-.4.4-.8.6-1.3.6zm18.5 0c-.5 0-.9-.2-1.3-.5l-18.5-18.5c-.7-.7-.7-1.8 0-2.6.7-.7 1.8-.7 2.6 0L10.5 58c.7.7.7 1.8 0 2.6-.4.3-.8.5-1.3.5z'/%3E%3C/svg%3E");
}

.icon-close.color-ui-black:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-18 32 36 36'%3E%3Cpath fill='%231d2329' d='M-9.3 61.1c-.5 0-.9-.2-1.3-.5-.7-.7-.7-1.8 0-2.6L7.9 39.5c.7-.7 1.8-.7 2.6 0 .7.7.7 1.8 0 2.6L-8 60.5c-.4.4-.8.6-1.3.6zm18.5 0c-.5 0-.9-.2-1.3-.5l-18.5-18.5c-.7-.7-.7-1.8 0-2.6.7-.7 1.8-.7 2.6 0L10.5 58c.7.7.7 1.8 0 2.6-.4.3-.8.5-1.3.5z'/%3E%3C/svg%3E");
}

.icon-close:focus {
  outline: 1px dotted #1d2329;
}

.cta-overlay::after {
  background-color: transparent;
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: auto;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.zoomable-wrapper {
  color: #fff;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: auto;
}

.zoomable {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background-position: center;
  background-size: cover;
  height: 100%;
  position: relative;
  transform: scale(1.001);
  transition: transform .2s ease 0s;
  width: 100%;
}

.zoom-on-hover:hover .zoomable {
  transform: scale(1.05);
  transition: transform .2s ease 0s;
}

.hidden-spoken {
  border: 0 none !important;
  bottom: 0 !important;
  clip: rect(0px, 0px, 0px, 0px) !important;
  display: inline-block;
  height: auto !important;
  left: 0 !important;
  letter-spacing: 0;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  right: 0 !important;
  text-overflow: ellipsis !important;
  top: 0 !important;
  white-space: nowrap !important;
  width: auto !important;
  z-index: -1 !important;
}

.color-att-blue {
  color: #009fdb !important;
}

.color-cobalt {
  color: #0057b8 !important;
}

.color-mint {
  color: #49eedc !important;
}

.color-lime {
  color: #91dc00 !important;
}

.color-tangerine {
  color: #ffb000 !important;
}

.color-berry {
  color: #ff585d !important;
}

.color-purple {
  color: #af29bb !important;
}

.color-black {
  color: #000000 !important;
}

.color-ui-black {
  color: #1d2329 !important;
}

.color-ui-dark-gray {
  color: #454b52 !important;
}

.color-ui-medium-gray {
  color: #686e74 !important;
}

.color-ui-gray {
  color: #878c94 !important;
}

.color-ui-light-gray {
  color: #dcdfe3 !important;
}

.color-ui-background-gray {
  color: #f2f2f2 !important;
}

.color-ui-white {
  color: #fff !important;
}

.color-functional-blue {
  color: #0057b8 !important;
}

.color-functional-dk-green {
  color: #2d7e24 !important;
}

.color-functional-lt-green {
  color: #3da930 !important;
}

.color-functional-dk-red {
  color: #c70032 !important;
}

.color-functional-lt-red {
  color: #ff4349 !important;
}

.color-functional-dk-orange {
  color: #ea712f !important;
}

.color-functional-lt-orange {
  color: #ff8500 !important;
}

.bg-att-blue {
  background-color: #009fdb !important;
}

.bg-cobalt {
  background-color: #0057b8 !important;
}

.bg-mint {
  background-color: #49eedc !important;
}

.bg-lime {
  background-color: #91dc00 !important;
}

.bg-tangerine {
  background-color: #ffb000 !important;
}

.bg-berry {
  background-color: #ff585d !important;
}

.bg-purple {
  background-color: #af29bb !important;
}

.bg-black {
  background-color: #000000 !important;
}

.bg-ui-black {
  background-color: #1d2329 !important;
}

.bg-ui-dark-gray {
  background-color: #454b52 !important;
}

.bg-ui-medium-gray {
  background-color: #686e74 !important;
}

.bg-ui-gray {
  background-color: #878c94 !important;
}

.bg-ui-light-gray {
  background-color: #dcdfe3 !important;
}

.bg-ui-background-gray {
  background-color: #f2f2f2 !important;
}

.bg-ui-white {
  background-color: #fff !important;
}

.bg-functional-blue {
  background-color: #0057b8 !important;
}

.bg-functional-dk-green {
  background-color: #2d7e24 !important;
}

.bg-functional-lt-green {
  background-color: #3da930 !important;
}

.bg-functional-dk-red {
  background-color: #c70032 !important;
}

.bg-functional-lt-red {
  background-color: #ff4349 !important;
}

.bg-functional-dk-orange {
  background-color: #ea712f !important;
}

.bg-functional-lt-orange {
  background-color: #ff8500 !important;
}

.bg-transparent {
  background-color: transparent !important;
}

[class*="grad-att-blue-"] {
  background-color: #009fdb !important;
}

.grad-att-blue-90 {
  background-image: linear-gradient(90deg, #0079b1, #00c9ff) !important;
}

[class*="grad-berry-tangerine-"] {
  background-color: #ffb000 !important;
}

.grad-berry-tangerine-90 {
  background-image: linear-gradient(90deg, #ff585d, #ffb000) !important;
}

[class*="grad-mint-lime-"] {
  background-color: #49eedc !important;
}

.grad-lime-mint-90 {
  background-image: linear-gradient(90deg, #91dc00, #49eedc) !important;
}

[class*="grad-cobalt-purple-"] {
  background-color: #af29bb !important;
}

.grad-cobalt-purple-90 {
  background-image: linear-gradient(90deg, #0057b8, #af29bb) !important;
}

/* ********** TYPOGRAPHY *********** */
.line-h-xxl {
  line-height: 2 !important;
}

.line-h-xl {
  line-height: 1.8 !important;
}

.line-h-lg {
  line-height: 1.6 !important;
}

.line-h-md {
  line-height: 1.4 !important;
}

.line-h-base {
  line-height: 1.2 !important;
}

.line-h-sm {
  line-height: 1 !important;
}

.nowrap {
  white-space: nowrap;
}

sup.sm {
  font-size: .42em;
  top: -0.80em;
}

a.on-dark:active {
  text-decoration: underline;
}

.text-center {
  text-align: center;
}

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

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

.word-wrap {
  word-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 1.6rem;
  font-weight: normal;
}

.italic {
  font-style: italic !important;
}

p + p {
  margin-top: 1.2rem;
}

small {
  font-size: 80%;
}

/* used to prevent space between elements */
.type-0 {
  font-size: 0;
}

.type-xxxl {
  font-size: 7.2rem;
}

.type-xxl {
  font-size: 6.0rem;
}

.type-xl {
  font-size: 4.8rem;
}

.type-lg {
  font-size: 3.4rem;
}

.type-md {
  font-size: 2.4rem;
  line-height: 1.4;
}

.type-base {
  font-size: 1.8rem;
  line-height: 1.6;
}

.type-sm {
  font-size: 1.5rem;
  line-height: 1.6;
}

.type-xs, .type-legal {
  font-size: 1.2rem;
}

.type-xxs {
  font-size: 1.1rem;
}

.type-xxxs {
  font-size: 0.9rem;
}

[class*="type-eyebrow-"] {
  font-family: font-medium, sans-serif;
  line-height: 1;
  text-transform: uppercase;
}

.type-eyebrow-xxxl {
  font-size: 2.2rem;
  margin-bottom: 8px;
}

.type-eyebrow-xxl {
  font-size: 2.0rem;
  margin-bottom: 6px;
}

.type-eyebrow-xl {
  font-size: 1.8rem;
  margin-bottom: 4px;
}

.type-eyebrow-lg {
  font-size: 1.6rem;
  margin-bottom: 2px;
}

.type-eyebrow-md {
  font-size: 1.4rem;
  margin-bottom: 0px;
}

.heading-xxxl {
  font-size: 7.2rem;
}

.heading-xxl {
  font-size: 6.0rem;
}

.heading-xl {
  font-size: 4.8rem;
}

.heading-lg {
  font-size: 3.4rem;
}

.heading-md {
  font-size: 2.4rem;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .type-xxxl {
    font-size: 6.0rem;
  }
  .type-xxl {
    font-size: 4.2rem;
  }
  .type-xl {
    font-size: 3.4rem;
  }
  .type-lg {
    font-size: 2.8rem;
  }
  .type-md {
    font-size: 2.0rem;
  }
  .type-base {
    font-size: 1.7rem;
  }
  .type-sm {
    font-size: 1.5rem;
  }
  .type-xs, .type-legal {
    font-size: 1.2rem;
  }
  .type-xxs {
    font-size: 1.0rem;
  }
  .type-xxxs {
    font-size: 0.9rem;
  }
  .type-eyebrow-xxxl {
    font-size: 2.0rem;
  }
  .type-eyebrow-xxl {
    font-size: 1.8rem;
  }
  .type-eyebrow-xl {
    font-size: 1.6rem;
  }
  .type-eyebrow-lg {
    font-size: 1.4rem;
    margin-bottom: 0px;
  }
  .type-eyebrow-md {
    font-size: 1.2rem;
  }
  .heading-xxxl {
    font-size: 6.0rem;
  }
  .heading-xxl {
    font-size: 4.2rem;
  }
  .heading-xl {
    font-size: 3.4rem;
  }
  .heading-lg {
    font-size: 2.8rem;
  }
  .heading-md {
    font-size: 2.0rem;
  }
}

@media (max-width: 767px) {
  .type-xxxl {
    font-size: 4.0rem;
  }
  .type-xxl {
    font-size: 3.2rem;
  }
  .type-xl {
    font-size: 2.8rem;
  }
  .type-lg {
    font-size: 2.2rem;
  }
  .type-md {
    font-size: 1.8rem;
  }
  .type-base {
    font-size: 1.6rem;
  }
  .type-sm {
    font-size: 1.4rem;
  }
  .type-xs, .type-legal {
    font-size: 1.1rem;
  }
  .type-xxs {
    font-size: 1.0rem;
  }
  .type-xxxs {
    font-size: 0.9rem;
  }
  .type-eyebrow-xxxl {
    font-size: 1.8rem;
  }
  .type-eyebrow-xxl {
    font-size: 1.6rem;
  }
  .type-eyebrow-xl {
    font-size: 1.4rem;
  }
  .type-eyebrow-lg {
    font-size: 1.2rem;
  }
  .type-eyebrow-md {
    font-size: 1.2rem;
  }
  .heading-xxxl {
    font-size: 4.0rem;
  }
  .heading-xxl {
    font-size: 3.2rem;
  }
  .heading-xl {
    font-size: 2.8rem;
  }
  .heading-lg {
    font-size: 2.2rem;
  }
  .heading-md {
    font-size: 1.8rem;
  }
}

[class*="heading-"]:not(.font-regular):not(.color-ui-white) {
  color: #1d2329;
  font-family: font-medium, sans-serif;
}

.type-legal:not([class*="color-"]) {
  color: #454b52;
}

.type-legal a:not([class*="color-"]) {
  color: currentColor;
}

.type-legal a {
  text-decoration: underline;
}

.color-ui-white [class*="heading-"],
.color-ui-white [class*="type-eyebrow-"],
.color-ui-white .type-legal:not([class*="color-"]),
.color-ui-white .type-legal:not([class*="color-"]) a {
  color: currentColor !important;
}

[class*="btn-"] {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 0.3rem;
  display: inline-flex;
  font-family: font-medium, sans-serif;
  justify-content: center;
  line-height: 1.2;
  outline: none;
  text-align: center;
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

a[class*="btn"]:hover {
  text-decoration: none;
}

[class*="btn-"],
.btn-large {
  font-size: 1.4rem;
  height: 4.8rem;
  min-width: 200px;
  padding-left: 48px;
  padding-right: 48px;
}

.btn-small {
  font-size: 1.2rem;
  height: 3.2rem;
  min-width: 140px;
  padding-left: 24px;
  padding-right: 24px;
}

.btn-full-width {
  min-width: 100%;
}

.btn-primary {
  background-color: #1d2329;
  border-color: #1d2329;
  box-shadow: 0px 0px 0px 3px transparent inset, 0px 0px 0px 4px transparent inset;
  color: #fff;
}

.btn-primary:hover {
  background-color: #454b52;
  border-color: #454b52;
  color: #fff;
  outline: none;
  transition: background-color .3s linear;
}

.btn-primary:focus {
  background-color: #454b52;
  box-shadow: 0px 0px 0px 3px #454b52 inset, 0px 0px 0px 4px #878c94 inset;
  color: #fff;
  transition: background-color .3s ease-in 0s;
}

.btn-primary:focus:hover {
  background-color: #454b52;
  box-shadow: 0px 0px 0px 3px #454b52 inset, 0px 0px 0px 4px #fff inset;
}

.btn-primary.on-dark {
  background-color: #fff;
  border: 1px solid #fff;
  box-shadow: 0px 0px 0px 3px transparent inset, 0px 0px 0px 4px transparent inset;
  color: #1d2329;
}

.btn-primary.on-dark:hover {
  background-color: #f7f8fa;
  border-color: #f7f8fa;
  transition: background-color .3s linear;
}

.btn-primary.on-dark:focus {
  background-color: #dcdfe3;
  border-color: #dcdfe3;
  box-shadow: 0px 0px 0px 3px #dcdfe3 inset, 0px 0px 0px 4px #454b52 inset;
}

.btn-primary.on-dark:not(.disabled):focus:hover {
  box-shadow: 0px 0px 0px 3px #dcdfe3 inset, 0px 0px 0px 4px #000000 inset;
}

.btn-primary-2 {
  background-color: #0057b8;
  border-color: #0057b8;
  box-shadow: 0px 0px 0px 3px transparent inset, 0px 0px 0px 4px transparent inset;
  color: #fff;
}

.btn-primary-2:hover {
  background-color: #007ae2;
  border-color: #007ae2;
  color: #fff;
  outline: none;
  transition: background-color .3s linear;
}

.btn-primary-2:focus {
  background-color: #0057b8;
  box-shadow: 0px 0px 0px 3px #0057b8 inset, 0px 0px 0px 4px #fff inset;
  color: #fff;
  transition: background-color .3s ease-in 0s;
}

.btn-primary-2:focus:hover {
  background-color: #0057b8;
  box-shadow: 0px 0px 0px 3px #0057b8 inset, 0px 0px 0px 4px #dcdfe3 inset;
}

.btn-secondary {
  background-color: transparent;
  border-color: #1d2329;
  box-shadow: 0px 0px 0px 3px transparent inset, 0px 0px 0px 4px transparent inset;
  color: #1d2329;
}

.btn-secondary:focus {
  background-color: #454b52;
  box-shadow: 0px 0px 0px 3px #454b52 inset, 0px 0px 0px 4px #fff inset;
  color: #fff;
  transition: all .3s ease-in 0s;
}

.btn-secondary:hover {
  background-color: #454b52;
  border-color: #454b52;
  color: #fff;
  outline: none;
  transition: background-color .3s linear, color .05s linear .05s;
}

.btn-secondary:hover:focus {
  background-color: #454b52;
  box-shadow: 0px 0px 0px 3px #454b52 inset, 0px 0px 0px 4px #878c94 inset;
}

.btn-secondary.on-dark {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}

.btn-secondary.on-dark:hover {
  background-color: #fff;
  border-color: #fff;
  color: #1d2329;
  transition: background-color .3s linear, color .05s linear .05s;
}

.btn-secondary.on-dark:focus {
  background-color: #dcdfe3;
  box-shadow: 0px 0px 0px 3px #dcdfe3 inset, 0px 0px 0px 4px #454b52 inset;
  color: #1d2329;
}

[class*="btn-primary"].btn-arrow:after,
.btn-secondary.btn-arrow:after,
.link-tertiary-large:after,
.link-tertiary-small:after {
  background-position: -10px;
  background-repeat: no-repeat;
  background-size: 36px 10px;
  border: none;
  content: "";
  height: 10px;
  margin: 1px 0 0 16px;
  min-width: 26px;
  width: auto;
}

[class*="btn"].btn-small.btn-arrow:after {
  background-position: -15px;
  margin: 0 0 0 8px;
  min-width: 21px;
}

.btn-secondary:not(.on-dark).btn-arrow:after,
.btn-primary.on-dark.btn-arrow:after,
.btn-secondary.on-dark.btn-arrow:focus:after,
.btn-secondary.on-dark.btn-arrow:hover:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 10'%3E%3Cpath fill='%231d2329' fill-rule='evenodd' clip-rule='evenodd' d='M34 5.4H.8c-.3 0-.5-.2-.4-.5 0-.2.2-.4.4-.4h33.1l-3.4-3.4c-.2-.2-.2-.5 0-.7.2-.2.5-.2.7 0l4.2 4.2c.2.2.2.5 0 .7l-4.2 4.2c-.2.2-.5.2-.7 0-.2-.2-.2-.5 0-.7 0 .1 3.5-3.4 3.5-3.4z'/%3E%3C/svg%3E");
}

[class*="btn-primary"]:not(.on-dark).btn-arrow:after,
.btn-secondary:not(.on-dark).btn-arrow:focus:after,
.btn-secondary:not(.on-dark).btn-arrow:hover:after,
.btn-primary-2.on-dark.btn-arrow:after,
.btn-secondary.on-dark.btn-arrow:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 10'%3E%3Cpath fill='%23fff' fill-rule='evenodd' clip-rule='evenodd' d='M34 5.4H.8c-.3 0-.5-.2-.4-.5 0-.2.2-.4.4-.4h33.1l-3.4-3.4c-.2-.2-.2-.5 0-.7.2-.2.5-.2.7 0l4.2 4.2c.2.2.2.5 0 .7l-4.2 4.2c-.2.2-.5.2-.7 0-.2-.2-.2-.5 0-.7 0 .1 3.5-3.4 3.5-3.4z'/%3E%3C/svg%3E");
}

.btn-arrow:hover:after,
.btn-arrow:focus:after {
  animation: arrowAnimationLg 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0.1s;
}

.btn-small.btn-arrow:hover:after,
.btn-small.btn-arrow:focus:after {
  animation: arrowAnimationSm 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0.1s;
}

.btn-arrow.no-hover:hover:after,
.btn-arrow.no-hover:focus:after {
  animation: none;
}

[class*="btn-"]:not(.btn-search)[disabled],
[class*="btn-"]:not(.btn-search).disabled {
  background-color: #dcdfe3;
  border-color: #dcdfe3;
  box-shadow: none;
  color: #686e74;
}

[class*="btn-"][disabled]:hover,
[class*="btn-"][disabled]:focus,
[class*="btn-"].disabled:hover,
[class*="btn-"].disabled:focus {
  box-shadow: none;
  cursor: not-allowed;
  outline: none;
}

[class*="btn-"][disabled].btn-arrow:after,
[class*="btn-"].disabled.btn-arrow:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 10'%3E%3Cpath fill='%23686e74' fill-rule='evenodd' clip-rule='evenodd' d='M34 5.4H.8c-.3 0-.5-.2-.4-.5 0-.2.2-.4.4-.4h33.1l-3.4-3.4c-.2-.2-.2-.5 0-.7.2-.2.5-.2.7 0l4.2 4.2c.2.2.2.5 0 .7l-4.2 4.2c-.2.2-.5.2-.7 0-.2-.2-.2-.5 0-.7 0 .1 3.5-3.4 3.5-3.4z'/%3E%3C/svg%3E");
}

[class*="btn-"][disabled].btn-small:not(.on-dark).btn-arrow:after,
[class*="btn-"].disabled.btn-small:not(.on-dark).btn-arrow:after {
  margin: 0 0 0 8px;
}

[class*="btn-"][disabled].btn-arrow:hover:after,
[class*="btn-"][disabled].btn-arrow:focus:after,
[class*="btn-"].disabled.btn-arrow:hover:after,
[class*="btn-"].disabled.btn-arrow:focus:after {
  animation: none;
}

[class*="btn-"]:not(.btn-small) > svg,
[class*="btn-"]:not(.btn-small) > img {
  height: 28px;
  margin-right: 12px;
  width: 28px;
}

.btn-small > svg,
.btn-small > img {
  height: 20px;
  margin-right: 10px;
  width: 20px;
}

.btn-secondary:hover > svg path {
  fill: #fff;
  transition: fill .3s linear 0s;
}

.btn-primary.on-dark > svg path {
  fill: currentColor;
}

.btn-secondary.on-dark:hover > svg path {
  fill: currentColor;
}

[class*="link-text"] {
  transition: color .3s linear;
}

[class*="link-text"].solo {
  font-family: font-medium, sans-serif;
  font-size: 1.5rem;
}

.link-text,
.link-text2 {
  color: #454b52;
}

.link-text3 {
  color: #0057b8;
}

.link-text {
  text-decoration: underline;
}

.link-text:hover,
.link-text3:hover {
  text-decoration: underline;
}

.link-text2:hover {
  text-decoration: none;
}

[class*="link-text"]:hover,
[class*="link-text"]:focus {
  color: #0057b8;
  transition: color .3s linear;
}

[class*="link-text"].on-dark {
  color: #fff;
  text-decoration: underline;
}

[class*="link-text"].on-dark:hover,
[class*="link-text"].on-dark:focus {
  color: #fff;
  outline-color: #fff;
  text-decoration: underline;
}

.icon-link-arrow {
  display: inline-flex;
  margin-left: 9px;
  position: relative;
  top: -2px;
}

.icon-link-arrow:not(.on-dark):after,
.icon-link-arrow-sm:not(.on-dark):after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 10'%3E%3Cpath fill='%231d2329' fill-rule='evenodd' clip-rule='evenodd' d='M34 5.4H.8c-.3 0-.5-.2-.4-.5 0-.2.2-.4.4-.4h33.1l-3.4-3.4c-.2-.2-.2-.5 0-.7.2-.2.5-.2.7 0l4.2 4.2c.2.2.2.5 0 .7l-4.2 4.2c-.2.2-.5.2-.7 0-.2-.2-.2-.5 0-.7 0 .1 3.5-3.4 3.5-3.4z'/%3E%3C/svg%3E");
}

.icon-link-arrow-sm {
  display: inline-flex;
  margin-left: 4px;
  position: relative;
  top: -2px;
}

.icon-link-arrow:after,
.icon-link-arrow-sm:after {
  background-position: -10px;
  background-repeat: no-repeat;
  background-size: 36px 10px;
  content: "";
  display: inline-block;
  height: 10px;
}

.icon-link-arrow-sm:after {
  background-position: -10px;
}

.icon-link-arrow:after {
  width: 36px;
}

.icon-link-arrow-sm:after {
  width: 26px;
}

a.nounderline:hover {
  text-decoration: none;
}

a:hover [class*="icon-link-arrow"]:after {
  animation: arrowAnimationLg 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s;
}

[class*="link-tertiary-"] {
  align-items: center;
  color: #1d2329;
  display: inline-flex;
  font-family: font-medium, sans-serif;
  text-decoration: none;
}

[class*="link-tertiary-"]:hover {
  color: #0057b8;
  text-decoration: none;
}

[class*="link-tertiary-"]:focus {
  border-bottom: none;
  outline-color: #1d2329;
  outline-offset: 3px;
}

.link-tertiary-large {
  font-size: 1.4rem;
}

.link-tertiary-small {
  font-size: 1.2rem;
  letter-spacing: 0.02rem;
}

.link-tertiary-large:not(.on-dark):after,
.link-tertiary-small:not(.on-dark):after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 10'%3E%3Cpath fill='%231d2329' fill-rule='evenodd' clip-rule='evenodd' d='M34 5.4H.8c-.3 0-.5-.2-.4-.5 0-.2.2-.4.4-.4h33.1l-3.4-3.4c-.2-.2-.2-.5 0-.7.2-.2.5-.2.7 0l4.2 4.2c.2.2.2.5 0 .7l-4.2 4.2c-.2.2-.5.2-.7 0-.2-.2-.2-.5 0-.7 0 .1 3.5-3.4 3.5-3.4z'/%3E%3C/svg%3E");
}

[class*="link-tertiary-"].color-cobalt:not(.on-dark):after,
[class*="link-tertiary-"].color-cobalt:not(.on-dark):hover:after,
[class*="link-tertiary-"].color-cobalt:not(.on-dark):focus:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 10'%3E%3Cpath fill='%230057b8' fill-rule='evenodd' clip-rule='evenodd' d='M34 5.4H.8c-.3 0-.5-.2-.4-.5 0-.2.2-.4.4-.4h33.1l-3.4-3.4c-.2-.2-.2-.5 0-.7.2-.2.5-.2.7 0l4.2 4.2c.2.2.2.5 0 .7l-4.2 4.2c-.2.2-.5.2-.7 0-.2-.2-.2-.5 0-.7 0 .1 3.5-3.4 3.5-3.4z'/%3E%3C/svg%3E");
}

[class*="link-tertiary-"]:not(.on-dark):hover:after,
[class*="link-tertiary-"]:not(.on-dark):focus:after,
[class*="link-tertiary-"].color-cobalt:not(.on-dark):hover:after,
[class*="link-tertiary-"].color-cobalt:not(.on-dark):focus:after {
  animation: arrowAnimationLg 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 10'%3E%3Cpath fill='%230057b8' fill-rule='evenodd' clip-rule='evenodd' d='M34 5.4H.8c-.3 0-.5-.2-.4-.5 0-.2.2-.4.4-.4h33.1l-3.4-3.4c-.2-.2-.2-.5 0-.7.2-.2.5-.2.7 0l4.2 4.2c.2.2.2.5 0 .7l-4.2 4.2c-.2.2-.5.2-.7 0-.2-.2-.2-.5 0-.7 0 .1 3.5-3.4 3.5-3.4z'/%3E%3C/svg%3E");
}

.link-tertiary-small:after {
  background-position: -15px;
  margin: 0 0 0 8px;
}

.link-tertiary-small:not(.on-dark):hover:after,
.link-tertiary-small:not(.on-dark):focus:after {
  animation: arrowAnimationSm 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s;
}

[class*="link-tertiary-"].on-dark {
  color: #fff;
}

[class*="link-tertiary-"].on-dark:focus {
  outline-color: #fff;
}

.link-tertiary-large:hover,
.link-tertiary-small:hover {
  border-bottom: none;
}

.link-tertiary-large.on-dark:after,
.link-tertiary-small.on-dark:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 10'%3E%3Cpath fill='%23fff' fill-rule='evenodd' clip-rule='evenodd' d='M34 5.4H.8c-.3 0-.5-.2-.4-.5 0-.2.2-.4.4-.4h33.1l-3.4-3.4c-.2-.2-.2-.5 0-.7.2-.2.5-.2.7 0l4.2 4.2c.2.2.2.5 0 .7l-4.2 4.2c-.2.2-.5.2-.7 0-.2-.2-.2-.5 0-.7 0 .1 3.5-3.4 3.5-3.4z'/%3E%3C/svg%3E");
}

[class*="link-tertiary-"].on-dark:hover:after,
[class*="link-tertiary-"].on-dark:focus:after {
  animation: arrowAnimationLg 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s;
}

.link-tertiary-small.on-dark:hover:after,
.link-tertiary-small.on-dark:focus:after {
  animation: arrowAnimationSm 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s;
}

[class*="link-utility"] {
  align-items: center;
  border-bottom: none;
  display: inline-flex;
  text-decoration: none;
}

[class*="link-utility"].solo {
  font-family: font-medium, sans-serif;
  font-size: 1.5rem;
}

[class*="link-utility"]:hover {
  border-bottom: none;
  text-decoration: none;
}

[class*="link-utility"]:not(.link-utility-list):after {
  background-position: -4px;
  background-repeat: no-repeat;
  background-size: 100% 74%;
  border: none;
  content: "";
  height: 1em;
  margin: 1px 0 0 8px;
  min-width: 1em;
  transition: background-position .1s linear 0s;
  width: auto;
}

.link-utility-secondary:not(.on-dark) {
  color: #454b52;
}

.link-utility-primary:not(.on-dark),
.link-utility-primary:not(.on-dark):hover,
.link-utility-secondary:not(.on-dark):hover {
  color: #0057b8;
}

.link-utility-secondary:not(.on-dark):after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath fill='%231d2329' fill-rule='nonzero' d='M5.276 4.602a.481.481 0 0 1 0 .768L.814 9.833a.477.477 0 1 1-.674-.675l4.172-4.172L.14.814A.477.477 0 0 1 .814.14l4.462 4.462z'/%3E%3C/svg%3E");
}

.link-utility-primary:not(.on-dark):after,
.link-utility-secondary:not(.on-dark):hover:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath fill='%230057b8' fill-rule='nonzero' d='M5.276 4.602a.481.481 0 0 1 0 .768L.814 9.833a.477.477 0 1 1-.674-.675l4.172-4.172L.14.814A.477.477 0 0 1 .814.14l4.462 4.462z'/%3E%3C/svg%3E");
}

[class*="link-utility"]:hover:after {
  background-position: 3.9px;
  transition: background-position .1s linear 0s;
}

[class*="link-utility"].on-dark {
  box-shadow: none;
  color: #fff;
  text-decoration: none;
}

[class*="link-utility"].on-dark:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath fill='%23fff' fill-rule='nonzero' d='M5.276 4.602a.481.481 0 0 1 0 .768L.814 9.833a.477.477 0 1 1-.674-.675l4.172-4.172L.14.814A.477.477 0 0 1 .814.14l4.462 4.462z'/%3E%3C/svg%3E");
}

[class*="link-utility"].on-dark:hover {
  color: #fff;
}

[class*="link-utility"].on-dark:focus {
  outline-color: #fff;
}

.link-utility-list {
  align-items: inherit;
  flex-direction: column;
  width: 100%;
}

.link-utility-list li {
  display: flex;
  line-height: 1.4;
  padding: 8px 0;
  padding-left: 0;
}

.link-utility-list li + li {
  margin-top: 0;
}

.link-utility-list [class*="link-utility"] {
  border-bottom: none;
  width: 100%;
}

.link-utility-list [class*="link-utility"]:hover:after {
  right: 0;
}

a.no-hover {
  text-decoration: none;
}

.outline-white:focus {
  outline-color: #fff;
}

@keyframes arrowAnimationLg {
  0% {
    background-position: -10px;
  }
  25% {
    background-position: 36px;
  }
  26% {
    background-position: -36px;
  }
  55% {
    background-position: -10px;
  }
}

@keyframes arrowAnimationSm {
  0% {
    background-position: -15px;
  }
  25% {
    background-position: 31px;
  }
  26% {
    background-position: -31px;
  }
  55% {
    background-position: -15px;
  }
}

.form-row {
  margin-top: 24px;
  width: 100%;
}

.form-row:first-child {
  margin-top: 0;
}

.formfield-label {
  align-items: center;
  color: #1d2329;
  display: flex;
  font-family: font-medium, sans-serif;
  font-size: 1.4rem;
  padding-bottom: 8px;
  width: 100%;
}

.formfield-label.disabled {
  color: #878c94;
  cursor: not-allowed;
}

.formfield-msg {
  align-items: flex-end;
  display: flex;
  font-size: 1.4rem;
  height: auto;
  max-height: 0;
  min-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  transition: opacity 0.3s linear 0s, font-size 0s linear 0.3s, padding-top 0.2s linear 0.3s, max-height 0.2s linear 0.2s, min-height 0.2s linear 0.3s;
  width: 100%;
}

/* ********** TEXT FIELDS *********** */
::-webkit-input-placeholder {
  color: #878c94;
  font-family: font-regular, sans-serif;
  font-style: normal;
  opacity: 1;
}
::-moz-placeholder {
  color: #878c94;
  font-family: font-regular, sans-serif;
  font-style: normal;
  opacity: 1;
}
:-ms-input-placeholder {
  color: #878c94;
  font-family: font-regular, sans-serif;
  font-style: normal;
  opacity: 1;
}
::placeholder {
  color: #878c94;
  font-family: font-regular, sans-serif;
  font-style: normal;
  opacity: 1;
}

::-ms-clear {
  display: none !important;
}

.textfield {
  align-items: center;
  width: 100%;
}

textarea,
.textfield {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 1px solid #686e74;
  border-radius: 0.3rem;
  color: #1d2329;
  display: flex;
  font-family: font-regular, sans-serif;
  font-size: 1.6rem;
  min-height: 48px;
  line-height: normal;
  padding-left: 16px;
  padding-right: 24px;
}

textarea {
  height: auto;
  min-height: 85px;
  max-height: 160px;
  width: 100%;
  padding-top: 13px;
}

textarea:hover,
.textfield:hover {
  border-color: #454b52;
  outline: none;
}

textarea:focus:hover,
textarea:focus,
.textfield:focus:hover,
.textfield:focus {
  border-color: #0057b8;
  outline: none;
}

textarea:disabled,
.textfield:disabled {
  background-color: #fff;
}

.formfield-label.disabled,
.textfield:disabled,
textarea:disabled {
  border-color: #878c94;
  color: #878c94;
  cursor: not-allowed;
}

/* ********** END FORMS *********** */
.form-row > .radio,
.form-row > .checkbox {
  margin: 8px 0;
}

.checkbox,
.radio {
  color: #454b52;
  font-size: 1.4rem;
  line-height: 1.6;
  padding-right: 18px;
  position: relative;
  z-index: 0;
}

.checkbox input,
.radio input {
  border-radius: 100%;
  height: 44px;
  left: -10px;
  opacity: 0.001;
  position: absolute;
  top: -10px;
  width: 44px;
  z-index: 1;
}

.checkbox input + .checkbox-skin,
.radio input + .radio-skin {
  align-items: center;
  background-color: #fff;
  border: 1px solid #686e74;
  display: flex;
  height: 24px;
  justify-content: center;
  margin-right: 8px;
  max-height: 24px;
  min-width: 24px;
  position: relative;
  width: 24px;
  z-index: 0;
}

.checkbox input + .checkbox-skin {
  border-radius: .2rem;
}

.radio input + .radio-skin {
  border-radius: 100%;
}

.checkbox input:checked + .checkbox-skin,
.checkbox input:checked:hover:not([disabled]) + .checkbox-skin {
  background-color: #0057b8;
  border-color: #0057b8;
}

.radio input:checked + .radio-skin,
.radio input:checked:hover:not([disabled]) + .radio-skin {
  border-color: #0057b8;
}

.checkbox input:hover:not([disabled]) + .checkbox-skin,
.radio input:hover:not([disabled]) + .radio-skin {
  border-color: #454b52;
}

.checkbox input:focus + .checkbox-skin,
.radio input:focus + .radio-skin {
  border: 1px solid #454b52;
  outline: 1px dotted black;
  outline-offset: 5px;
}

.radio input:checked + .radio-skin:after {
  background-color: #0057b8;
  border: none;
  border-radius: 100%;
  color: #000;
  content: "";
  height: 16px;
  left: 3px;
  position: absolute;
  top: 3px;
  width: 16px;
}

.checkbox input:checked:focus + .checkbox-skin {
  border-color: #0057b8;
}

.checkbox input:checked + .checkbox-skin:after,
.checkbox input:disabled:checked + .checkbox-skin:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath fill='%23ffffff' d='M21 1.1c.7.7.7 1.9 0 2.6-1.6 1.5-2.7 2.7-5.9 6l-.2.2c-2.4 2.5-3.8 3.9-5.2 5.3-.7.7-1.8.7-2.5.1l-5.8-4.7C.6 10 .3 8.9.9 8c0 0 .1-.1.1-.2.7-.7 1.9-.7 2.6-.1l4.5 3.7c1.6-1.6 3.1-3.2 4.7-4.8l.2-.3c2.4-2.5 3.8-3.9 5.2-5.3.3-.3.8-.5 1.3-.6.6.1 1.1.3 1.5.7z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 10px;
  content: "";
  height: 22px;
  left: 0;
  position: absolute;
  top: 0;
  width: 22px;
}

.checkbox input ~ .rad-chk-txt,
.radio input ~ .rad-chk-txt {
  align-items: center;
  display: inline-flex;
  padding-top: 1px;
}

.checkbox input:disabled ~ *,
.radio input:disabled ~ * {
  color: #878c94;
  cursor: not-allowed;
}

.checkbox.disabled,
.checkbox input:disabled,
.radio.disabled,
.radio input:disabled {
  cursor: not-allowed;
}

.checkbox input:disabled + .checkbox-skin,
.radio input:disabled + .radio-skin {
  background-color: #fff;
  border-color: #878c94;
}

.checkbox input:disabled:hover + .checkbox-skin,
.radio input:disabled:hover + .radio-skin {
  border-color: #878c94;
}

.checkbox input:disabled:checked + .checkbox-skin,
.radio input:disabled:checked + .radio-skin:after {
  background-color: #878c94;
}

.checkbox input[indeterminate="true"] + .checkbox-skin {
  border-color: #0057b8;
}

.checkbox input[indeterminate="true"] + .checkbox-skin:after {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%230057b8' d='M27 20.5H9a2.5 2.5 0 1 1 0-5h18a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E%0A");
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 21px;
  content: "";
  height: 100%;
  width: 100%;
}

.indeterminate-group {
  padding-left: 32px;
}

.selectWrap {
  display: block;
  line-height: 2.8rem;
  margin: 0;
  min-height: 4.8rem;
  position: relative;
}

.awd-select {
  background-color: transparent;
  border: none;
  border-radius: 0.3rem;
  color: #1d2329;
  font-family: font-regular, sans-serif;
  font-size: 1.6rem;
  height: 4.8rem;
  left: 0;
  padding: 0 4.8rem 0 1.6rem;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 1010;
}

.awd-select.select-placeholder {
  color: #454b52;
}

.mobile-error {
  border: 1px solid;
  border-color: #c70032;
}

.awd-select:focus {
  outline: none;
}

.select-skin {
  background-color: #fff;
  border: 1px solid #686e74;
  border-radius: 0.3rem;
  color: #454b52;
  cursor: pointer;
  display: block;
  font-family: font-regular, sans-serif;
  height: 4.8rem;
  left: 0;
  outline: none;
  padding: 0 2.4rem;
  position: absolute;
  top: 0;
  width: 100%;
}

.awd-select:hover + .select-skin {
  border-color: #454b52;
}

.awd-select:focus + .select-skin {
  border-color: #0057b8;
}

.awd-select[disabled] {
  color: #878c94 !important;
}

.awd-select[disabled] + .select-skin {
  border-color: #878c94 !important;
}

.awd-select[disabled] + .select-skin:after {
  opacity: .3;
}

/* *************************** */
.dropdown-button:after,
.select-skin:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath fill='%23000000' fill-rule='nonzero' d='M5.276 4.602a.481.481 0 0 1 0 .768L.814 9.833a.477.477 0 1 1-.674-.675l4.172-4.172L.14.814A.477.477 0 0 1 .814.14l4.462 4.462z'/%3E%3C/svg%3E");
  background-color: transparent;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: .6rem 1.2rem;
  content: "";
  display: block;
  height: 1.4rem;
  margin-top: -.6rem;
  position: absolute;
  right: 1.7rem;
  top: 50%;
  transform: rotate(90deg);
  width: 1.4rem;
}

.dropdown-button {
  background-color: transparent;
  border: 1px solid #686e74;
  border-radius: 0.3rem;
  color: #686e74;
  display: flex;
  font-family: font-regular, sans-serif;
  font-size: 1.6rem;
  min-height: 4.8rem !important;
  justify-content: flex-start;
  line-height: 1.2;
  min-width: 12.0rem !important;
  outline: none;
  padding: 1.34rem 2.4rem 1.15rem 1.6rem;
  position: relative;
  text-transform: inherit;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 100%;
}

.dropdown-button[disabled] {
  background-color: transparent !important;
  border-color: #878c94 !important;
  color: #878c94 !important;
  cursor: not-allowed;
}

.dropdown-button[disabled]:after {
  opacity: .3 !important;
}

.dropdown-button:hover {
  border-color: #454b52;
}

.dropdown-button:focus {
  border-color: #0057b8;
}

.dropdown-button.error {
  border-color: #c70032;
}

.dropdown-button[aria-pressed="true"] {
  border-color: #0057b8;
  color: #1d2329;
  z-index: 2;
}

.option-selected {
  color: #1d2329;
}

.awd-select.active + .select-skin:after,
.dropdown-button[aria-pressed="true"]:after {
  transform: rotate(-90deg);
}

.dropdown-button .labelText {
  align-items: center;
  display: block;
  font-size: 1.6rem;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  text-align: left;
  text-overflow: ellipsis;
  padding-right: 2.4rem;
}

.optionWrapper {
  background-color: #fff;
  border: none;
  border-radius: 0 0 0.3rem 0.3rem;
  border-top: none;
  max-height: 0px;
  position: absolute;
  top: calc(100% - .1rem);
  width: 100%;
  z-index: 1;
}

.optionWrapper.open {
  border: 1px solid #686e74;
  height: auto;
  margin-bottom: 6.4rem;
  max-height: 24.1rem;
  opacity: 1;
  transition: max-height .2s linear 0s;
}

.option-list {
  margin-top: 0px;
}

.optgroup-wrapper {
  font-family: font-medium, sans-serif;
  font-size: 1.4rem;
  padding: 6px 0 0 0;
  text-indent: 1.6rem;
}

.optgroup {
  margin-top: .6rem;
}

.option-list-item {
  align-items: center;
  cursor: pointer;
  display: block;
  font-family: font-regular, sans-serif;
  font-size: 1.4rem;
  line-height: 4.0rem;
  min-height: 4.0rem;
  overflow: hidden;
  text-indent: 1.6rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.option-list-item:focus {
  outline: none !important;
}

.option-list-item:hover {
  color: #0057b8;
}

.optgroup .option-list-item {
  padding: 0 24px 0 16px;
}

.option-list-item[aria-selected="true"] {
  background-color: rgba(121, 126, 133, 0.05);
}

.option-list-item:hover {
  background-color: rgba(121, 126, 133, 0.1);
}

.formfield-label.error:after {
  background-color: #c70032;
  border-radius: 100%;
  content: "";
  height: 4px;
  margin: 0 8px;
  width: 4px;
}

.selectWrap.error .dropdown-button {
  border-color: #c70032;
  color: #1d2329;
}

fieldset.error legend span {
  align-items: center;
  display: inline-flex;
}

fieldset.error legend span:after,
.radio.error input + .radio-skin ~ span[aria-hidden]:after,
.checkbox.error input + .checkbox-skin ~ span[aria-hidden]:after {
  background-color: #c70032;
  border-radius: 100%;
  content: "";
  height: 4px;
  margin: 0 8px;
  width: 4px;
}

.radio.error input + .radio-skin,
.radio.error input:hover + .radio-skin {
  border-color: #c70032;
}

.radio.error input:checked + .radio-skin:after {
  background-color: #c70032;
}

.radio.error input:hover:checked:not([disabled]) + .radio-skin {
  border-color: #c70032;
}

fieldset.error .radio.error input + .radio-skin ~ span[aria-hidden]:after,
fieldset.error .checkbox.error input + .checkbox-skin ~ span[aria-hidden]:after {
  display: none;
}

.selectWrap.focus + .formfield-msg:not(:empty),
.selectWrap.error + .formfield-msg:not(:empty),
.checkbox.error + .formfield-msg:not(:empty),
.radio.error + .formfield-msg:not(:empty),
fieldset.error .formfield-msg:not(:empty),
textarea:focus + .formfield-msg:not(:empty):not(.fadeout),
.textfield:focus + .formfield-msg:not(:empty):not(.fadeout),
textarea:focus[aria-invalid] + .formfield-msg:not(:empty),
textarea[aria-invalid] + .formfield-msg:not(:empty),
.textfield:focus[aria-invalid] + .formfield-msg:not(:empty),
.textfield[aria-invalid] + .formfield-msg:not(:empty) {
  color: #454b52;
  min-height: 2.0rem;
  max-height: 4.0rem;
  opacity: 1;
  padding-top: 4px;
  transition: padding-top .1s linear 0s, max-height .3s linear 0s, min-height .3s linear 0s, opacity .3s linear .3s, color .3s linear 0s;
}

.selectWrap.error + .formfield-msg:not(:empty),
.checkbox.error + .formfield-msg:not(:empty),
.radio.error + .formfield-msg:not(:empty),
fieldset.error .formfield-msg:not(:empty),
textarea:focus[aria-invalid] + .formfield-msg:not(:empty),
textarea[aria-invalid] + .formfield-msg:not(:empty),
.textfield:focus[aria-invalid] + .formfield-msg:not(:empty),
.textfield[aria-invalid] + .formfield-msg:not(:empty) {
  color: #c70032;
}

.checkbox.error input + .checkbox-skin,
.checkbox.error input:hover + .checkbox-skin,
textarea[aria-invalid],
textarea[aria-invalid]:hover,
textarea[aria-invalid]:focus,
.textfield[aria-invalid],
.textfield[aria-invalid]:hover,
.textfield[aria-invalid]:focus {
  border-color: #c70032;
}

.checkbox.error input:checked + .checkbox-skin,
.checkbox.error input:hover:checked + .checkbox-skin {
  background-color: #c70032;
  border-color: #c70032;
}