@charset "UTF-8";
/*
Theme Name: Santaferraro Test Editorial 2.0
Theme URI: https://santaferraro.com
Description: For hire portfolio site never worn.
Version: 20.03.03
Author: Rocky Santaferraro
Author URI: https://santaferraro.com
*/
/**
 * @license
 * MyFonts Webfont Build ID 3127897, 2015-11-18T22:17:56-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: SabonLT-Roman by Linotype
 * URL: http://www.myfonts.com/fonts/linotype/sabon/roman/
 * Copyright: Part of the digitally encoded machine readable outline data for producing the Typefaces provided is copyrighted (c) 1989, 2003 Linotype Library GmbH, www.linotype.com. All rights reserved. This software is the property of Linotype Library GmbH, and may no
 * Licensed pageviews: 250,000
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=3127897
 * 
 * © 2015 MyFonts Inc
*/
@import url("//hello.myfonts.net/count/2fba59");
@font-face {
  font-family: 'Sabon';
  src: url("fonts/2FBA59_0_0.eot");
  src: url("fonts/2FBA59_0_0.eot?#iefix") format("embedded-opentype"), url("fonts/2FBA59_0_0.woff2") format("woff2"), url("fonts/2FBA59_0_0.woff") format("woff"), url("fonts/2FBA59_0_0.ttf") format("truetype");
  font-weight: 500;
  font-style: normal; }
/*
        This font software is the property of Commercial Type.

        You may not modify the font software, use it on another website, or install it on a computer.

        License information is available at http://commercialtype.com/eula
        For more information please visit Commercial Type at http://commercialtype.com or email us at info[at]commercialtype.com

        Copyright (C) 2020 Schwartzco Inc.
        License: 2001-LPFEXQ     
*/
@font-face {
  font-family: 'CaslonItalian';
  src: url("fonts/CaslonItalian-Roman-Web.woff2") format("woff2"), url("fonts/CaslonItalian-Roman-Web.woff") format("woff");
  font-weight: 500;
  font-style: normal; }
@font-face {
  font-family: 'MintGrotesk';
  src: url("fonts/MintGroteskV0.5-Thin.eot");
  src: url("fonts/MintGroteskV0.5-Thin.eot?#iefix") format("embedded-opentype"), url("fonts/MintGroteskV0.5-Thin.woff2") format("woff2"), url("fonts/MintGroteskV0.5-Thin.woff") format("woff");
  font-weight: 200;
  font-style: normal; }
@font-face {
  font-family: 'MintGrotesk';
  src: url("fonts/MintGroteskV0.5-Regular.eot");
  src: url("fonts/MintGroteskV0.5-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/MintGroteskV0.5-Regular.woff2") format("woff2"), url("fonts/MintGroteskV0.5-Regular.woff") format("woff");
  font-weight: 500;
  font-style: normal; }
@font-face {
  font-family: 'MintGrotesk';
  src: url("fonts/MintGroteskV0.5-Bold.eot");
  src: url("fonts/MintGroteskV0.5-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/MintGroteskV0.5-Bold.woff2") format("woff2"), url("fonts/MintGroteskV0.5-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal; }
@font-face {
  font-family: 'MintGrotesk';
  src: url("fonts/MintGroteskV0.5-ExtraBold.eot");
  src: url("fonts/MintGroteskV0.5-ExtraBold.eot?#iefix") format("embedded-opentype"), url("fonts/MintGroteskV0.5-ExtraBold.woff2") format("woff2"), url("fonts/MintGroteskV0.5-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal; }
@font-face {
  font-family: 'MintGrotesk';
  src: url("fonts/MintGroteskV0.5-Heavy.eot");
  src: url("fonts/MintGroteskV0.5-Heavy.eot?#iefix") format("embedded-opentype"), url("fonts/MintGroteskV0.5-Heavy.woff2") format("woff2"), url("fonts/MintGroteskV0.5-Heavy.woff") format("woff");
  font-weight: 900;
  font-style: normal; }
@font-face {
  font-family: 'PitchSans';
  src: url("fonts/pitch-sans-web-medium.eot");
  src: url("fonts/pitch-sans-web-medium.eot?#iefix") format("embedded-opentype"), url("fonts/pitch-sans-web-medium.woff2") format("woff2"), url("fonts/pitch-sans-web-medium.woff") format("woff");
  font-weight: 500;
  font-style: normal; }
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* Change document box-sizing. */
html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

/* Globals -----------------------------------------------------------------------------*/
a {
  text-decoration: none;
  color: inherit; }

img {
  max-width: 100%;
  height: auto; }

.image--ratio {
  position: relative;
  overflow: hidden; }
  .image--ratio img {
    position: absolute;
    object-fit: cover;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; }
  .image--ratio.image--square {
    padding-top: 100%; }
  .image--ratio.image--screen {
    padding-top: 56.25%; }
  .image--ratio.image--4-3 {
    padding-top: 75%; }

svg {
  fill: currentColor;
  width: 100%;
  height: auto; }

::selection {
  background: #FF4211;
  color: #ffffff; }

body {
  background-color: #180801;
  color: #ffffff;
  line-height: 1.7;
  font-size: 14px;
  font-family: "Sabon",Georgia,serif;
  font-weight: 500; }
  @media only screen and (min-width: 640px) {
    body {
      font-size: 16px; } }

/* Typography --------------------------------------------------------------------------*/
.copy-column {
  margin: 1.5rem 0;
  width: 100%; }
  .copy-column > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-left: auto;
    margin-right: auto; }
    .copy-column > *:not(figure):not(h1):not(aside) {
      max-width: 46rem; }
  .copy-column h2, .copy-column h3, .copy-column h4, .copy-column h5, .copy-column p {
    margin-bottom: 0.75rem; }

.column--copy p {
  max-width: 46rem; }
.column--copy h2, .column--copy h3, .column--copy p {
  margin-bottom: 1.5rem; }
  @media only screen and (min-width: 960px) {
    .column--copy h2, .column--copy h3, .column--copy p {
      margin-bottom: 2.25rem; } }
  @media only screen and (min-width: 640px) {
    .column--copy h2, .column--copy h3, .column--copy p {
      margin-bottom: 3rem; } }

.copy-column--left > * {
  margin-left: 0; }

.copy-column--right > * {
  margin-right: 0; }

.content-column {
  margin: 1.5rem auto;
  width: 100%;
  max-width: 64rem; }
  .content-column > * {
    padding: 0 1.5rem; }

h1.h1--hero-headline {
  font-family: "CaslonItalian",helvetica,sans-serif;
  font-weight: 500;
  font-size: 3em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase; }
  @media only screen and (min-width: 640px) {
    h1.h1--hero-headline {
      font-size: 4em; } }
  @media only screen and (min-width: 960px) {
    h1.h1--hero-headline {
      font-size: 5em; } }
  @media only screen and (min-width: 1280px) {
    h1.h1--hero-headline {
      font-size: 7.5em; } }

h1 {
  font-family: "MintGrotesk",helvetica,sans-serif;
  font-weight: 500;
  font-weight: 800;
  font-size: 2em;
  line-height: 1.2; }

h2 {
  font-family: "MintGrotesk",helvetica,sans-serif;
  font-weight: 500;
  font-weight: 500;
  font-size: 2em;
  line-height: 1.2; }

h3, .nav--site-name {
  font-family: "MintGrotesk",helvetica,sans-serif;
  font-weight: 500;
  font-weight: 800;
  font-size: 1.5em;
  line-height: 1.2; }

.headline--h3-reg, .nav--links {
  font-family: "MintGrotesk",helvetica,sans-serif;
  font-weight: 500;
  font-weight: 500;
  font-size: 1.5em;
  line-height: 1.2; }

h4 {
  font-family: "MintGrotesk",helvetica,sans-serif;
  font-weight: 500;
  font-weight: 700; }

p {
  font-size: 1.5em; }

.p--small {
  font-size: 1.125em; }
  .p--small p {
    font-size: 1.125em; }

.p--meta {
  font-family: "PitchSans",Georgia,serif;
  font-weight: 500;
  font-size: 1.125em;
  line-height: 2.25;
  margin-bottom: 0; }
  .p--meta p {
    font-size: 1.125em; }

.p--copyright {
  font-family: "PitchSans",Georgia,serif;
  font-weight: 500;
  font-size: 1.125em;
  color: #775E53; }
  .p--copyright p {
    font-size: 1.125em; }

a.button {
  font-family: "PitchSans",Georgia,serif;
  font-weight: 500;
  display: inline-block; }
  a.button:not(:last-child) {
    margin-right: 1.5rem; }

a.button--primary {
  padding: 0.75rem 1.5rem;
  font-size: 1.5em;
  background-color: #FF4211;
  transition: .2s all linear; }
  a.button--primary:hover {
    background-color: #ffffff;
    color: #FF4211;
    transition: .3s all linear; }

a.button--secondary {
  padding-bottom: 0.5rem;
  padding-top: 0.75rem;
  font-size: 1.5em; }
  a.button--secondary::after {
    background-color: #ffffff;
    content: '';
    display: block;
    height: 2px;
    margin-top: 0.5rem;
    transition: 0.3s all cubic-bezier(0.445, 0.05, 0.55, 0.95);
    width: 1.5rem; }
  a.button--secondary:hover::after {
    width: 4.5rem;
    transition: 0.2s all cubic-bezier(0.445, 0.05, 0.55, 0.95); }

.nav--header a, .site-footer a:not(.button) {
  color: #ffffff;
  transition: .2s all linear; }
  .nav--header a:hover, .site-footer a:not(.button):hover {
    color: #FF4211;
    transition: .3s all linear; }

a.module--work img {
  transition: transform 1.5s ease, opacity 0.4s linear; }
a.module--work:hover img {
  transform: scale(1.04);
  opacity: 0.9; }

.button--cta {
  margin-bottom: 1.5rem;
  margin-top: 1.5rem; }

.site-name {
  font-family: "MintGrotesk",helvetica,sans-serif;
  font-weight: 500;
  font-weight: 800; }

/* Grid --------------------------------------------------------------------------------*/
.grid--container {
  padding: 1.5rem;
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: [full-start] repeat(2, 1fr) [rc-start] repeat(2, 1fr) [full-end]; }
  .grid--container > * {
    margin: 0; }
  @media only screen and (min-width: 640px) {
    .grid--container {
      grid-template-columns: [lc-start] repeat(3, 1fr) [rc-start] repeat(3, 1fr) [rc-end]; } }
  @media only screen and (min-width: 1280px) {
    .grid--container {
      padding: 1.5rem 0;
      grid-template-columns: [full-start] 1fr [lc-start] repeat(3, 1fr) [caption-end] 1fr [lc-end] 1fr [rc-start] repeat(5, 1fr) [rc-end] 1fr [full-end]; } }
  .grid--container > header,
  .grid--container > footer,
  .grid--container > .span-all {
    grid-column: 1 / -1; }

.column--full {
  grid-column: 1/-1; }

.column--copy-center {
  grid-column: 1/-1; }
  @media only screen and (min-width: 640px) {
    .column--copy-center {
      grid-column: 2/6; } }
  @media only screen and (min-width: 1280px) {
    .column--copy-center {
      grid-column: 4/10; } }

.column--copy-right {
  grid-column: 1/-1; }
  @media only screen and (min-width: 640px) {
    .column--copy-right {
      grid-column: rc-start/rc-end; } }

.column--list-right {
  grid-column: 1/-1;
  columns: 2; }
  @media only screen and (min-width: 640px) {
    .column--list-right {
      grid-column: rc-start/rc-end; } }
  @media only screen and (min-width: 1280px) {
    .column--list-right {
      grid-column: rc-start/full-end; } }

.column--copy-left {
  grid-column: 1/-1; }
  @media only screen and (min-width: 640px) {
    .column--copy-left {
      grid-column: lc-start/rc-start; }
      .column--copy-left.lining-columns > h1:first-child {
        margin-top: -.75rem; }
      .column--copy-left.lining-columns > h2:first-child {
        margin-top: -.75rem; } }
  @media only screen and (min-width: 1280px) {
    .column--copy-left {
      grid-column: lc-start/lc-end; } }

.column--featured-figure {
  grid-column: 1/-1; }
  .column--featured-figure img {
    width: 100%; }
  @media only screen and (min-width: 640px) {
    .column--featured-figure {
      grid-column: rc-start/rc-end; } }

.column--span-columns {
  grid-column: 1/-1; }
  @media only screen and (min-width: 640px) {
    .column--span-columns {
      grid-column: lc-start/rc-end; } }

.column--caption {
  grid-column: 1/-1;
  border-left: 2px solid #FF4211;
  padding-left: 1.5rem;
  color: #FF4211; }
  @media only screen and (min-width: 640px) {
    .column--caption {
      grid-column: lc-start/rc-start;
      padding-left: 0;
      padding-top: 1.5rem;
      border-left: none;
      border-top: 2px solid #FF4211; } }
  @media only screen and (min-width: 1280px) {
    .column--caption {
      grid-column: lc-start/caption-end; } }

.column--3 {
  grid-column: 1/-1; }
  @media only screen and (min-width: 1280px) {
    .column--3 {
      grid-column: span 3; } }

.column--meta {
  color: #FF4211; }

/* Global ------------------------------------------------------------------------------*/
.section {
  position: relative;
  overflow: hidden; }

.section--center .button--cta, .section--center .headline--section, .section--center .headline--page {
  text-align: center; }

.section--white {
  background-color: #ffffff;
  color: #180801; }
  .section--white .p--meta {
    color: #778F7F; }
  .section--white .p--caption {
    color: #FF4211; }

.section--light {
  background-color: #FCF5EE;
  color: #180801; }
  .section--light .p--meta {
    color: #778F7F; }
  .section--light .p--caption {
    color: #FF4211; }
  .section--light a.button--secondary::after {
    background-color: #180801; }

.section--dark {
  background-color: #180801;
  color: #ffffff; }
  .section--dark .p--caption {
    color: #A3BAAA; }

.section--midtone {
  background-color: #778F7F;
  color: #ffffff; }

.section--accent {
  background-color: #FF4211;
  color: #ffffff; }

.section--meta::before {
  content: '';
  border-top: 2px solid #FF4211;
  padding-bottom: 3rem;
  grid-column: 1/-1; }
  @media only screen and (min-width: 640px) {
    .section--meta::before {
      grid-column: lc-start/rc-end;
      padding-bottom: 4.5rem; } }
.section--meta h2, .section--meta h3, .section--meta h4, .section--meta .p--meta {
  color: #FF4211; }

.section--medium {
  padding-top: 3rem;
  padding-bottom: 3rem; }
  @media only screen and (min-width: 960px) {
    .section--medium {
      padding-top: 4.5rem;
      padding-bottom: 4.5rem; } }

.section--medium-bottom {
  padding-bottom: 3rem; }
  @media only screen and (min-width: 960px) {
    .section--medium-bottom {
      padding-bottom: 4.5rem; } }

.section--large {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem; }
  @media only screen and (min-width: 640px) {
    .section--large {
      padding-top: 6rem;
      padding-bottom: 6rem; } }
  @media only screen and (min-width: 960px) {
    .section--large {
      padding-top: 7.5rem;
      padding-bottom: 7.5rem; } }

.section--large-bottom {
  padding-bottom: 4.5rem; }
  @media only screen and (min-width: 640px) {
    .section--large-bottom {
      padding-bottom: 6rem; } }
  @media only screen and (min-width: 960px) {
    .section--large-bottom {
      padding-bottom: 7.5rem; } }

.section--page-header {
  padding-top: 7.5rem;
  padding-bottom: 4.5rem; }
  @media only screen and (min-width: 640px) {
    .section--page-header {
      padding-top: 11.25rem;
      padding-bottom: 6rem; } }
  @media only screen and (min-width: 960px) {
    .section--page-header {
      padding-bottom: 7.5rem; } }

.fullscreen {
  min-height: 100vh;
  width: 100%;
  overflow: hidden; }
  .fullscreen.fixed {
    position: fixed;
    left: 0;
    top: 0; }
  .fullscreen.absolute {
    position: absolute;
    left: 0;
    top: 0; }
  .fullscreen.scroll {
    height: 100vh;
    overflow: scroll; }

.halfscreen {
  min-height: 50vh;
  width: 100%; }
  .halfscreen.fixed {
    position: fixed;
    left: 0;
    top: 0; }
    @media only screen and (min-width: 640px) {
      .halfscreen.fixed {
        width: 50%;
        height: 100vh; } }

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

.image-background {
  background-size: cover;
  background-position: center;
  color: #ffffff; }

.single-metalist {
  background-color: #ffffff;
  overflow: hidden;
  padding: 1.5rem;
  width: 100%; }
  .single-metalist > * {
    margin-left: auto;
    margin-right: auto;
    max-width: 46rem; }

.flex-list {
  display: flex;
  flex-wrap: wrap;
  border-top: 2px solid #FF4211;
  color: #FF4211; }
  .flex-list h5 {
    margin-top: 0.75rem; }
  .flex-list > * {
    flex: 1 12rem; }
    .flex-list > *:last-child {
      margin-bottom: 0; }

.project-card > * {
  width: 100%; }
.project-card h2 {
  padding-bottom: 0.75rem; }

.featured-module {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
  .featured-module.fullscreen {
    width: auto; }

/* Header ------------------------------------------------------------------------------*/
.site-header {
  width: 100%; }
  .site-header:not(.relative-header) {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0; }
  .site-header.dark-header {
    color: #180801; }

.nav--links {
  margin-top: 0.5rem; }

.flex-header {
  padding: 1.5rem 1.5rem 0.75rem; }
  .flex-header .header-name {
    float: left;
    padding-right: 0.75rem; }
  @media only screen and (min-width: 640px) {
    .flex-header {
      display: flex;
      justify-content: space-between; } }

.nav-sentence {
  clear: both;
  font-family: "MintGrotesk",helvetica,sans-serif;
  font-weight: 500; }
  @media only screen and (min-width: 640px) {
    .nav-sentence {
      clear: none; } }

/* Footer ------------------------------------------------------------------------------*/
.site-footer h1 {
  color: #FF4211; }
.site-footer h4 {
  line-height: 2.25; }

/* Landing ----------------------------------------------------------------------------*/
.grid--home-hero {
  padding: 1.5rem 0; }
  .grid--home-hero > *:not(.hero--headline):not(.column--hero-caption) {
    padding-left: 1.5rem;
    padding-right: 1.5rem; }
    @media only screen and (min-width: 640px) {
      .grid--home-hero > *:not(.hero--headline):not(.column--hero-caption) {
        padding-left: 0;
        padding-right: 0; } }
  .grid--home-hero .hero--headline {
    color: #180801;
    grid-column: 1/-1; }
    .grid--home-hero .hero--headline > div {
      position: relative;
      height: 0;
      width: 100%;
      padding: 0;
      padding-bottom: 11.11111%; }
    .grid--home-hero .hero--headline svg {
      position: absolute;
      height: 100%;
      width: 100%;
      left: 0;
      top: 0; }
  .grid--home-hero .hero--headline-desktop {
    display: none; }
    @media only screen and (min-width: 640px) {
      .grid--home-hero .hero--headline-desktop {
        display: block; } }
  @media only screen and (min-width: 640px) {
    .grid--home-hero .hero--headline-mobile {
      display: none; } }
  @media only screen and (min-width: 640px) {
    .grid--home-hero .nav--header {
      padding-bottom: 3rem; } }
  @media only screen and (min-width: 960px) {
    .grid--home-hero .nav--header {
      padding-bottom: 4.5rem; } }
  .grid--home-hero .column--hero-caption {
    border-left: none;
    border-top: 2px solid #A3BAAA;
    padding: 1.5rem 0 0;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    grid-row: 2; }
    .grid--home-hero .column--hero-caption .p--meta.p--caption {
      color: #A3BAAA; }
    @media only screen and (min-width: 640px) {
      .grid--home-hero .column--hero-caption {
        margin-right: 0;
        margin-top: 0.5rem;
        grid-row: auto; } }
    @media only screen and (min-width: 1280px) {
      .grid--home-hero .column--hero-caption {
        margin-left: 0; } }

.site-content > .single-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; }

.content-header.fullscreen {
  min-height: calc(100vh - 1.5rem); }

/* Projects ----------------------------------------------------------------------------*/
.page-main, .single-main {
  position: relative;
  z-index: 2; }

.embedded-video .video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden; }
  .embedded-video .video-container iframe, .embedded-video .video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.single-intro {
  margin-top: calc(100vh - 1.5rem); }

.grid--gallery {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  margin: 0.75rem; }
  .grid--gallery .grid-gallery-panel {
    flex: 1;
    margin: 0 auto; }
  @media only screen and (min-width: 640px) {
    .grid--gallery {
      flex-direction: row; }
      .grid--gallery .grid-gallery-panel {
        margin: 0.75rem;
        max-width: none;
        width: 12rem;
        flex: 1 1 12rem; } }

.single-post-content p:first-child:first-letter {
  color: #778F7F;
  float: left;
  font-family: "CaslonItalian",helvetica,sans-serif;
  font-weight: 500;
  font-size: 5.825em;
  line-height: .75;
  padding-right: 0.75rem; }
  @media only screen and (min-width: 640px) {
    .single-post-content p:first-child:first-letter {
      font-size: 5.825em;
      padding-right: 1.5rem; } }

/* Info -------------------------------------------------------------------------------*/
.section--cv .column--copy-right.section--medium-bottom:last-child, .section--expertise .column--copy-right.section--medium-bottom:last-child {
  padding-bottom: 0; }

/* Templates --------------------------------------------------------------------------*/

/*# sourceMappingURL=style.css.map */