/* Shared document foundations for the corporate and Wholesale families. */

body {
  background: var(--redder-color-surface);
  border: 0;
  color: var(--redder-color-ink);
  font-family: var(--redder-font-body);
  font-size: var(--redder-font-size-body);
  line-height: var(--redder-line-height-body);
}

h1,
h2 {
  font-family: var(--redder-font-heading);
  font-style: normal;
  font-weight: var(--redder-font-weight-regular);
}

h3,
h4,
h5,
h6,
.colDx .inner p {
  font-family: var(--redder-font-heading-light);
  font-style: normal;
  font-weight: var(--redder-font-weight-regular);
}

a {
  color: var(--redder-color-link);
}

img {
  display: block;
  height: auto;
}

ul {
  margin-bottom: 0;
  padding-left: 0;
}

section {
  display: block;
  overflow: hidden;
}

section h1,
section h2,
section h3,
section h4,
section h5,
section h6 {
  margin-top: 0;
}

small {
  font-size: var(--redder-font-size-2xs);
  font-style: italic;
  font-weight: var(--redder-font-weight-bold);
}

small i {
  transition: color var(--redder-duration-standard) var(--redder-easing-standard);
}

small a:hover,
small a:hover i {
  color: var(--redder-color-ink) !important;
}

.contenitore {
  margin: 0 auto;
  max-width: var(--redder-measure-content);
  padding: 0 var(--redder-space-5);
  position: relative;
  transform-style: preserve-3d;
  z-index: var(--redder-layer-raised);
}

.noPadding {
  padding: 0 !important;
}

.clear {
  clear: both;
}

.divider {
  background-color: var(--redder-color-surface-muted);
  height: 1px;
  margin: var(--redder-space-4) 0;
  width: 100%;
}

.half {
  box-sizing: border-box;
  float: left;
  padding: 0;
  width: 50%;
}

.half:nth-of-type(1) {
  padding-right: var(--redder-space-5);
}

.half:nth-of-type(2) {
  padding-left: var(--redder-space-5);
}

.third {
  box-sizing: border-box;
  float: left;
  padding: 0;
  width: 33%;
}

.two-third {
  box-sizing: border-box;
  float: left;
  padding: 0;
  width: 66%;
}

.page:nth-of-type(odd) {
  background-color: var(--redder-color-surface-muted);
}

.page:nth-of-type(1) {
  background-color: var(--redder-color-surface);
}

.list {
  font-size: var(--redder-font-size-body);
  font-weight: var(--redder-font-weight-regular);
  line-height: var(--redder-line-height-list);
  list-style: none;
  text-align: center;
  width: 100%;
}

.columns {
  column-count: 2;
  column-gap: var(--redder-space-7);
}

.intro {
  color: var(--redder-color-surface);
  font-size: var(--redder-font-size-lead);
  line-height: var(--redder-line-height-lead);
  text-align: left;
  text-shadow: var(--redder-shadow-text);
}

.intro strong {
  font-size: var(--redder-font-size-body);
  line-height: var(--redder-line-height-list);
}

.intro .contenitore.txt {
  padding: 0 var(--redder-space-5);
}

.sx {
  float: left;
  width: 46%;
}

.dx {
  float: right;
  width: 46%;
}

@media (max-width: 1180px) {
  .contenitore {
    max-width: 70%;
  }
}

@media (max-width: 980px) {
  .contenitore {
    max-width: 100%;
    padding: 0 var(--redder-space-6);
  }
}

@media (max-width: 900px) {
  .intro {
    height: auto !important;
  }

  .intro .contenitore.head {
    height: auto !important;
    max-width: 900px !important;
  }
}

@media (max-width: 768px) {
  .intro {
    column-count: 1;
    font-size: var(--redder-font-size-lead);
    line-height: var(--redder-line-height-lead);
    padding: 0;
  }

  .intro h1 {
    font-size: 25px;
  }

  .intro h2 {
    font-size: var(--redder-font-size-h4);
  }

  .intro p {
    font-size: var(--redder-font-size-sm);
    line-height: var(--redder-line-height-compact);
  }

  .sx,
  .dx {
    width: 100%;
  }
}

@media (max-width: 600px) {
  /* Preserve the historical comma-separated selector's rendered contract.
   * Narrowing this requires a separately accepted typography change. */
  p,
  div,
  button {
    font-size: var(--redder-font-size-ui);
  }

  .txt {
    display: none;
  }
}