/* Additions on top of the original screen.css. */

/* Social icons: three (X, Facebook, Instagram) instead of four. */
#social-container #social-section.three-icons a { width: 31.33%; }
.s-icon.x { padding-top: 31px; box-sizing: border-box; }
.s-icon .x-logo { display: block; width: 48px; height: 48px; margin: 0 auto; fill: currentColor; color: white; }
.s-icon.x:hover .x-logo { color: #000; }
.s-icon.ig:hover i { color: #e1306c; }
.x-logo-small { display: inline-block; width: 24px; height: 24px; vertical-align: -3px; fill: currentColor; }
@media screen and (max-width: 590px) {
  #social-container #social-section.three-icons a { float: none; display: block; width: 100%; margin: 0 0 30px; }
  #social-container #social-section.three-icons a .s-icon { margin-top: 0; }
}

/* Form errors: each message sits under its own field, and the field is outlined. */
fieldset input.field-invalid,
fieldset input.field-invalid:focus { border-color: #e04b4b; background-color: #fff4f4; }
fieldset .select-container:has(select.field-invalid) { border-color: #e04b4b; }
fieldset select.field-invalid { background-color: #fff4f4; }
.field-error {
  display: block;
  margin: 6px 0 0;
  color: #d23c3c;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
}
.field-error:before { content: "\f071"; font-family: FontAwesome; margin-right: 6px; font-size: 12px; }
.row.button .field-error { margin: 0 0 10px; text-align: center; }

/* Home page: the ad script grows the top band to fit the ad (height:auto on its
   ancestors), which made the cover-sized photo rescale while the page loaded.
   Give the band its final size from the first paint by reserving the ad's space. */
@media screen and (min-width: 1025px) {
  #top-container { height: auto; min-height: 760px; }
  #splash .advert { min-height: 280px; }
}

/* ALTCHA status line on the terms steps */
.altcha-status { color: #777; font-size: 13px; margin: 0 0 10px; text-align: center; }
.altcha-status.is-error { color: #d23c3c; }

/* Each page's title bar is its <h1> (search engines read it as the page heading);
   styled exactly like the h3 it replaced. */
.page-box .page-header h1.page-title { display: inline; color: white; text-transform: uppercase; font-size: 24px; }

/* Sign-up and broker boxes fade in as soon as they are drawn (was: hidden by script until every image and ad had
   loaded). Starts just above 0 opacity so browsers count the box as painted straight away. */
@keyframes loans-fade-in { from { opacity: .01; } to { opacity: 1; } }
.fade:not(#link-to-how) { animation: loans-fade-in .4s ease-out both; }
/* These boxes are marked .hidden in the pages; the old script showed them when it faded them in. */
.fade.hidden { display: block; }
/* screen.css reserves 2000px here for the old script to correct once it had measured the box; no script now. */
.fade-cover-fix { height: auto; }