/*
Font: 		Cera Stencil PRO
Style: 		Black
URL: 		https://www.youworkforthem.com/font/T5657/cera-stencil-pro
Foundry: 	type me! fonts
Foundry: 	https://www.youworkforthem.com/designer/248/type-me-fonts
Copyright:	Copyright (c) 2015 by Jakob Runge, under exclusive license to type me! fonts. All rights reserved.
Version: 	17
Created:	April 07, 2015
License: 	https://www.youworkforthem.com/font-license
License: 	The WebFont(s) listed in this document must follow the YouWorkForThem
			WebFont license rules. All other parties are strictly restricted
			from using the WebFonts(s) listed without a purchased license.
			All details above must always remain unaltered and visible in your CSS.

Font:

Style:

URL: 		https://www.youworkforthem.com/font/T5656/cera-pro
Foundry: 	type me! fonts

Foundry: 	https://www.youworkforthem.com/designer/248/type-me-fonts

Copyright:

Version: 	17

Created:	April 07, 2015

License: 	https://www.youworkforthem.com/font-license

License: 	The WebFont(s) listed in this document must follow the YouWorkForThem
			WebFont license rules. All other parties are strictly restricted
			from using the WebFonts(s) listed without a purchased license.

All details above must always remain unaltered and visible in your CSS.
*/

/* 12fps.com, rebuilt as a static site in 2026. The look is the 2016-2024 WordPress site
   (Zerif Pro + the "Zerif 12FPS Child" theme): sizes and colours were measured from that
   site rendered in Chromium. The comment above is the font licence and must stay as it is. */

@font-face { font-family: 'CeraPRO-Medium'; src: url(fonts/cera-pro-medium.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'CeraStencilPRO-Black'; src: url(fonts/cera-stencil-pro-black.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Lato'; font-weight: 300; src: url(fonts/lato-300.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Lato'; font-weight: 400; src: url(fonts/lato-400.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Lato'; font-weight: 400; font-style: italic; src: url(fonts/lato-italic.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Lato'; font-weight: 700; src: url(fonts/lato-700.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-weight: 700; src: url(fonts/montserrat-700.woff2) format('woff2'); font-display: swap; }

:root {
  --yellow: #ffcc66;
  --green: #339955;
  --green-dark: #267f35;
  --coral: #e96656;
  --text: #202020;
  --pro: 'CeraPRO-Medium', 'Lato', sans-serif;
  --stencil: 'CeraStencilPRO-Black', 'Montserrat', sans-serif;
  --title: 75px;
  --title-lh: 1;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/24px 'Lato', sans-serif;
  color: var(--text);
  background: #fff;
  text-align: center;
  overflow-x: hidden;
  overflow-wrap: break-word;
}
img, video, iframe { max-width: 100%; }
img { height: auto; border: 0; }
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--yellow); }
a:active { color: #c65f0f; }
a:focus-visible, button:focus-visible { outline: 2px solid #3377dd; outline-offset: 2px; }
::selection { background: #3377dd; color: #fff; }
h1, h2, h3, p, ul { margin: 0; }
[hidden] { display: none !important; }   /* .btn and friends set display, which would beat the attribute */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 8px 16px; background: #fff; }
.skip:focus { top: 8px; }

/* Buttons: the theme's green pill */
.btn {
  display: inline-block;
  margin: 10px;
  padding: 13px 35px;
  border: 0;
  border-radius: 34px;
  background: var(--green);
  color: #fff;
  font: 700 14px/20px 'Montserrat', sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s;
}
.btn:hover, .btn:focus-visible { background: var(--green-dark); color: #fff; }
.btn:active { color: #fff; }

/* Header: only the logo, centred over the page (the menu was hidden by design) */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 10; height: 120px; pointer-events: none; }
.brand { display: inline-block; pointer-events: auto; }
.brand img { display: block; width: 120px; height: 120px; }
.listing main, .page main { padding-top: 120px; }

/* The two-line titles: Cera Pro in yellow over Cera Stencil in white */
.intro-text {
  font-size: var(--title);
  line-height: var(--title-lh);
  font-weight: 700;
  text-transform: capitalize;
  margin: 0 0 10px;
}
.intro-text .l1, .intro-text .l2 { display: block; }
.intro-text .l1 { font-family: var(--pro); color: var(--yellow); margin-bottom: 10px; }
.intro-text .l2 { font-family: var(--stencil); color: #fff; }

/* Homepage */
body.home { background-color: #111; background-position: center top; background-attachment: fixed; background-size: cover; }
.bgvideo {
  position: fixed; top: 50%; left: 50%; z-index: -100;
  min-width: 100%; min-height: 100%; width: auto; height: auto; max-width: none;
  transform: translate(-50%, -50%);
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s;
}
.bgvideo.on { opacity: 1; }
.header-content-wrap { position: relative; padding: 285px 16px 210px; background: rgba(0, 0, 0, .01); }
.tagline { margin: 30px 0 40px; color: var(--yellow); font-size: 18px; line-height: 27px; font-style: italic; }
.home-hero .intro-text { margin-bottom: 0; }
.home-hero .intro-text .l2 { margin-bottom: 10px; }
.home-hero .btn { margin-top: 45px; }   /* the theme put the button in its own block, 35px lower */

.focus { background: var(--yellow); padding: 100px 16px; }
.focus .intro-text .l1 { color: #000; font-size: 40px; line-height: 35px; }
.focus .intro-text .l2 { display: inline-block; font-size: 45px; line-height: 40px; padding-bottom: 10px; }
.focus p { max-width: 600px; margin: 0 auto; font-size: 20px; line-height: 30px; text-align: left; }

/* Story banners (homepage, story lists, related stories) */
.news-holder { position: relative; overflow: hidden; background: #000; }
.news-holder .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bg-cover { position: relative; padding: 60px 16px; background: rgba(0, 0, 0, .5); }
.block-1 .bg-cover { padding: 120px 16px; }
.listing .first .bg-cover { padding: 120px 16px 60px; }
.latesnews-content { max-width: 480px; margin: 0 auto; color: #fff; font-size: 20px; line-height: 24px; }
.latesnews-content p { margin: 0 0 30px; }
.stories-link { position: relative; background: var(--yellow); padding: 40px 16px; }

/* Offices */
.team { background-color: var(--green); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 100px 16px 66px; }
.team ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 30px; padding: 0; list-style: none; }
.team li { width: 255px; margin-bottom: 35px; }
.team h3 { margin: 15px 0 10px; font: 700 28px/42px var(--stencil); text-transform: uppercase; color: #fff; white-space: nowrap; }
.team a { font-size: 12px; font-weight: 700; line-height: 18px; letter-spacing: 2px; text-transform: uppercase; }

/* Client logos: five at a time, one step every four seconds (site.js); a still grid without it */
.logos { background: #fff; padding: 100px 16px 135px; }
.als-viewport { max-width: 1080px; margin: 0 auto; overflow: hidden; }
.als-wrapper { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.als-wrapper li { flex: 0 0 180px; padding: 10px 20px; }
.als-wrapper img { display: block; width: 140px; margin: 0 auto; }
.logos.running .als-viewport { max-width: 900px; }
.logos.running .als-wrapper { flex-wrap: nowrap; justify-content: flex-start; }

/* Footer */
#footer {
  position: relative;
  padding-top: 62px;
  background-color: var(--yellow);
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.sub-logo { position: absolute; top: 0; left: 50%; width: 100px; margin-left: -50px; }
.sub-logo img { display: block; width: 100px; height: 100px; }
.follow { margin-top: 80px; font-size: var(--title); line-height: var(--title-lh); font-weight: 700; }
.follow .l1 { font-family: var(--pro); color: var(--yellow); }
.follow .l2 { font-family: var(--stencil); color: #fff; padding-left: 1%; }
.social { display: flex; justify-content: center; gap: 4px; margin: 40px auto 80px; padding: 0; list-style: none; }
.social a {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin: 4px;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  transition: filter .2s, transform .2s;
}
.social a:hover, .social a:focus-visible { color: #fff; filter: brightness(.9); transform: scale(1.06); }
.social .icon { width: 26px; height: 26px; fill: currentColor; }
.copyright { padding: 0 16px 40px; color: #fff; font-size: 16px; line-height: 20px; text-transform: uppercase; }

/* Story page: the photo stays put while the article scrolls up over it */
.image-wrapper { position: relative; background: #000; padding-bottom: 36.93%; }
.hero {
  position: fixed; top: 0; left: 50%; z-index: 0;
  width: 100%; max-width: 2000px;
  transform: translateX(-50%);
  opacity: .9;
}
.hero.waiting { opacity: 0; }
.hero.fade { transition: opacity 2s; }
.entry-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1; padding: 220px 15px 0; }
.entry-header .intro-text .l1 { font-weight: 400; margin: 30px 0 10px; }
.content-bg, .related, .single .stories-link, .single #footer { position: relative; z-index: 2; }
.content-bg { background: #fff; padding: 60px 0 0; }
.entry-content { max-width: 760px; margin: 0 auto; padding: 60px 15px 0; text-align: left; }
.entry-content p { margin: 0 0 24px; font-size: 18px; line-height: 24px; text-align: justify; }
.entry-content strong, .entry-content a { font-weight: 700; }
.entry-content img { display: block; margin: 0 auto 24px; }
.entry-content p img:last-child { margin-bottom: 0; }
.entry-content .center { text-align: center; }
.entry-content h2 { margin: 36px 0 18px; font: 700 30px/35px var(--pro); text-transform: capitalize; }
.entry-content h3 { margin: 30px 0 14px; font: 700 20px/28px 'Montserrat', sans-serif; }
.entry-content blockquote { margin: 24px 40px; font-size: 18px; line-height: 26px; font-style: italic; font-weight: 300; }
.entry-content ul, .entry-content ol { margin: 0 0 24px; padding-left: 1.5em; font-size: 18px; }
.embed { position: relative; margin: 0 0 24px; padding-bottom: 56.25%; background: #000; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cta { padding: 10px 35px 30px; text-align: center; }
.related-header { background: var(--yellow); padding: 40px 16px; font-size: var(--title); line-height: var(--title-lh); font-weight: 400; }
.related-header .l1 { font-family: var(--pro); color: #fff; }
.related-header .l2 { font-family: var(--stencil); color: #fff; padding-left: 1%; font-weight: 700; }
.related .bg-cover { padding: 30px 16px; }
.related .intro-text .l1 { font-weight: 400; margin: 30px 0 10px; }
.related .btn { margin-top: 24px; }

/* Story lists */
.title-bg { background: var(--yellow); }
.title-bg h1 { font: 700 45px/60px var(--stencil); color: #000; }
.alm-btn-wrap { background: var(--yellow); padding: 30px 10px; min-height: 60px; }
.alm-btn-wrap .btn { background: #20aa73; }
.alm-btn-wrap .btn:hover { background: #069059; }

/* Contact page */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) 254px; gap: 0 60px; max-width: 1170px; margin: 0 auto; padding: 60px 15px; text-align: left; }
.entry-title { margin: 0 0 26px; font: 700 20px/22px var(--pro); text-transform: capitalize; }
.contact .content-left-wrap p { margin-bottom: 24px; }
.send a {
  display: inline-block;
  padding: 5px 20px;
  border-radius: 34px;
  background: var(--coral);
  color: #fff;
  font: 700 16px/24px 'Montserrat', sans-serif;
  text-transform: uppercase;
}
.send a:hover, .send a:focus-visible { background: #d4523f; color: #fff; }
.widget-title { margin: 0 0 30px; padding-bottom: 5px; font: 700 17px/55px var(--pro); text-transform: uppercase; }
#secondary p { margin: 0 0 24px; }

/* 404 */
.notfound { padding-top: 100px; }
.notfound p { margin-top: 20px; text-align: center; }

/* Image viewer */
#viewer { padding: 0; border: 0; background: transparent; max-width: 95vw; max-height: 95vh; overflow: visible; }
#viewer::backdrop { background: rgba(0, 0, 0, .88); }
#viewer .stage img { display: block; max-width: 95vw; max-height: 90vh; width: auto; height: auto; }
#viewer .close {
  position: fixed; top: 12px; right: 12px;
  width: 44px; height: 44px; padding: 10px;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer;
}
#viewer .close .icon { width: 24px; height: 24px; fill: currentColor; }

/* Smaller screens: the parent theme's title steps, and the child theme's tweaks */
@media (max-width: 1189px) {
  :root { --title: 55px; --title-lh: 65px; }
  .entry-header { padding-top: 120px; }
}
@media (min-width: 1190px) {
  .header-content-wrap { padding: 210px 16px; }
}
@media (max-width: 992px) {
  :root { --title: 45px; --title-lh: 55px; }
  .header-content-wrap { padding: 225px 16px 150px; }
  .focus { padding: 60px 16px; }
}
@media (max-width: 767px) {
  :root { --title: 41px; --title-lh: 49px; }
  .header-content-wrap { padding: 150px 16px 100px; }
  .logos { display: none; }                    /* hidden on phones, as it always was */
  .contact { grid-template-columns: minmax(0, 1fr); }
  .team li { margin-bottom: 20px; }
  .bgvideo { display: none; }
  /* a wide photo is only ~140px tall on a phone; crop it to a taller band so the title fits */
  .image-wrapper { padding-bottom: 0; height: 300px; }
  .hero { height: 300px; object-fit: cover; }
  .content-bg { padding-top: 30px; }
  .entry-content { padding-top: 30px; }
}
@media (max-width: 480px) {
  :root { --title: 32px; --title-lh: 37px; }
  .site-header { height: 80px; }
  .brand img { width: 80px; height: 80px; }
  .listing main, .page main { padding-top: 80px; }
  .header-content-wrap { padding: 110px 16px 60px; }
  .tagline { margin: 0 0 20px; }
  .entry-header { padding-top: 100px; }
  .entry-header .intro-text .l1 { margin: 0 0 6px; }
  .focus .intro-text .l1 { font-size: 32px; }
  .focus .intro-text .l2 { font-size: 36px; }
  .title-bg h1 { font-size: 32px; }
  .team h3 { font-size: 24px; }
  .entry-content p { text-align: left; }
  .entry-content blockquote { margin: 24px 16px; }
  .sub-logo { width: 80px; margin-left: -40px; }
  .sub-logo img { width: 80px; height: 80px; }
  .follow { margin-top: 60px; }
}
@media (max-width: 320px) {
  :root { --title: 22px; --title-lh: 30px; }
}

/* iOS ignores fixed backgrounds and stretches them over the whole element instead */
@supports (-webkit-touch-callout: none) {
  body.home, #footer { background-attachment: scroll; }
}

@media (prefers-reduced-motion: reduce) {
  .hero.fade, .bgvideo, .btn, .social a { transition: none; }
}

/* Generated from content/site.json by build.py */
.s-facebook-f { --c: #3377dd; }
.s-instagram { --c: #ff3399; }
.s-linkedin-in { --c: #ffcc66; }
.s-tv { --c: #339955; }
body.home { background-image: url(/media/2016/02/Bettyventure2-12FPS-Blog-Liz-Devine-bg.webp); }
.team { background-image: url(/media/2016/01/green-map-bg-1920x540-bg.webp); }
#footer { background-image: url(/media/2016/02/12FPS-Homepage-Purple3-1-bg.webp); }