/* ==========================================================================
   The Finger Companies - site styles

   Loaded after the Webflow export (webflow.css and
   finger-companies-corporate.webflow.css). Anything added or changed by hand
   lives here so the exported files can stay untouched.
   ========================================================================== */

/* Base
   ========================================================================== */

body {
  max-width: 100vw;
  overflow-x: hidden !important;
}

/* The logo and QR images carry width/height attributes (so the browser can
   reserve their space); let CSS keep their proportions. */

.logo {
  width: auto;
}

/* Headings
   ==========================================================================
   Each page has one <h1> and the levels below it follow the page outline.
   These rules keep the look the Webflow design gave each heading when its tag
   was chosen for size rather than structure. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

h1.heading {
  line-height: 122%;
}

p.heading {
  color: var(--heading);
  font-family: Prata, sans-serif;
  font-weight: 400;
}

.service-heading {
  text-transform: uppercase;
}

/* Looks like the Webflow <h1>, <h2>, <h3> and <h4>. */

.text-h1 {
  margin-bottom: 24px;
  font-size: 56px;
  line-height: 118%;
}

h1.text-h2 {
  margin-bottom: 22px;
  font-size: 44px;
  line-height: 122%;
}

p.text-h3 {
  margin-bottom: 18px;
  font-family: Prata, sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 134%;
}

.w-richtext .text-h3 {
  color: var(--heading);
}

h2.heading-feature {
  margin-bottom: 16px;
  font-size: 28px;
  line-height: 140%;
}

@media screen and (max-width: 991px) {
  .text-h1 { font-size: 48px; }
  h1.text-h2 { font-size: 38px; }
  p.text-h3 { font-size: 30px; }
  h2.heading-feature { font-size: 24px; }
}

@media screen and (max-width: 767px) {
  .text-h1 { font-size: 42px; }
  h1.text-h2 { font-size: 32px; }
  p.text-h3 { font-size: 26px; }
  h2.heading-feature { font-size: 22px; }
}

@media screen and (max-width: 479px) {
  .text-h1 { font-size: 36px; }
  h1.text-h2 { font-size: 28px; }
  p.text-h3 { font-size: 24px; }
  h2.heading-feature { font-size: 20px; }
}

/* Our Company
   ========================================================================== */

.section-dark.our-history-banner.no-pattern {
  padding-top: 60px;
}

/* Careers
   ========================================================================== */

.email-resume-text.careers-intro {
  margin-top: 15px;
  margin-bottom: 22px;
  color: #333;
  line-height: 122%;
}

.careers-note {
  margin-top: 30px;
  color: #aaa;
  text-align: center;
}

/* Contact
   ========================================================================== */

.contact-text a {
  color: inherit;
  text-decoration: none;
}

/* QR codes
   ========================================================================== */

.page-qr-codes .block-center {
  display: block;
}

.qr-code {
  float: left;
  width: 48%;
  margin: 0 1% 2%;
  padding: 20px;
  border: 2px solid #333;
}

.qr-code img {
  height: auto;
}