/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/* ==========================================================================
   Base colors: light & dark palette
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --background: #1e222f;
        --background-nav: #181b25;
        --fallback: #c5cbcf;
        --text-h1: #1e222f;
        --text-h2: #F3F9FF;
        --link: #1974fc;
        --link-hover: #F3F9FF;
        --link-secondary: #F3F9FF;
        --link-hover-secondary: #1974fc;
        --accent-main: #1974fc;
        --selection: rgba(170, 184, 200, .8);
        --lightbox-button-label: #616264;
        --error: #cc0000;
        --form-component-bg: #1B2128;
        --form-component-active-fill: #1D252E;
        --form-component-active-border: #9495a2;
        --sidebar-bg: #181b25;
        --border: #4572b5;
        --border-accent: #1974fc;
        --border-nav: #181b25;
        --dropshadow: rgba(0, 7, 66, 0.25);
        --alpha-30: rgba(170, 184, 200, .3);
        --alpha-60: rgba(170, 184, 200, .6);
        --alpha-80: rgba(170, 184, 200, .8);
        --alpha-90: rgba(170, 184, 200, .9);
        --image-filter: brightness(.8) contrast(1.2);
        a[target="_blank"]::after {content: "";width: 11px;height: 11px;margin-left: 4px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");background-position: center;background-repeat: no-repeat;background-size: contain;display: inline-block;}
    }
}
@media (prefers-color-scheme: light) {
    :root {
        --background: #ffffff;
        --background-nav: #ffffff;
        --fallback: #222222;
        --text-h1: #ffffff;
        --text-h2: #000000;
        --link: #B74148;
        --link-hover: #000000;
        --link-secondary: #000000;
        --link-hover-secondary: #4c4c4c;
        --bg: #ffffff;
        --accent-main: #ac2c34;
        --selection: rgba(0, 0, 0, 0.8);
        --lightbox-button-label: #616264;
        --error: #cc0000;
        --form-component-bg: #fafafa;
        --form-component-active-fill: #f0f0f0;
        --form-component-active-border: #333333;
        --sidebar-bg: #fafafa;
        --border: #cccccc;
        --border-accent: #333333;
        --border-nav: #cccccc;
        --dropshadow: rgba(0, 0, 0, 0.25);
        --alpha-30: rgba(0, 0, 0, 0.3);
        --alpha-60: rgba(0, 0, 0, 0.6);
        --alpha-80: rgba(0, 0, 0, 0.8);
        --alpha-90: rgba(0, 0, 0, 0.9);
        --image-filter: brightness(1) contrast(1);
        a[target="_blank"]::after {content: "";width: 11px;height: 11px;margin-left: 4px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");background-position: center;background-repeat: no-repeat;background-size: contain;display: inline-block;}
    }
}

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: var(--fallback);
    font-size: 1em;
    line-height: 1.4;
    background: var(--background);
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1em 0;
    padding: 0;
}


/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio, canvas, iframe, img, svg, video {
    vertical-align: middle;
}


/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}


/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

#content {
    height: 912px;
    width: 120%;
    margin-left: -10%;
    overflow-x: visible;
    overflow-y: hidden;
}

/* =======================================
  CORE STYLES
   ======================================= */

body {
    margin: 5em auto auto auto;
    width: 60em;
}
section {
    width: 67%;
    margin: 5em auto auto auto;
}
ul, ol {
    font-family: 'Raleway', sans-serif;
    letter-spacing: .025em;
    font-size: .9em;
    margin-bottom: 1.5em;
    margin-top: -.75em;
}

li span {
    font-size: .8em;
    display: block;
    text-indent: 1em;
}
h1 {
    color: var(--text-h1);
    font-size: 2.5em;
    font-family: 'Zilla Slab', serif;
    font-weight: 600;
    position: relative;
    margin: 1em auto 1.5em auto;
    text-align: center;
    display: inline;
    text-shadow: 0px 1.75px 6.5px rgba(0, 0, 0, 0.18), 0px 2.5px 4.5px rgba(0, 0, 0, 0.1), 0px 0.25px .6px rgba(0, 0, 0, 0.3);
}
h1 span {
    background-color: var(--text-h1);
    padding: 4px;
    margin: 0 -2px 0 4px;
}
h2 {
    color: var(--text-h2);
    font-size: 1.25em;
    font-family: 'Zilla Slab', serif;
    letter-spacing: .25px;
}
h3 {
    font-family: 'Zilla Slab', serif;
    font-size: 1.1em;
    font-weight: 600;
}
h4 {
    font-family: 'Zilla Slab', serif;
    font-size: 0.875em;
    letter-spacing: .25px;
    margin: 0;
}
img {
    filter: var(--image-filter);
}
::selection {
  color: var(--background);
  background: var(--selection);
}


/* =======================================
  NAVBAR
   ======================================= */
.navbar {
    width: 100%;
    height: 46px;
    border-bottom: .03125em solid var(--border-nav);
    box-shadow: 0 0px 8px var(--dropshadow);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    margin: auto;
    background-color: var(--background-nav);
}

.navbar ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    font-size: 1em;
    -webkit-padding-start: 0px;
}

.navbar>ul, .navbar .subnav-inner {
    width: 70%;
    max-width: 50em;
    margin: 0 auto;
    padding: 0 1.875em;
}

.navbar>ul>li {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

.navbar>ul>li>a {
    padding: 10px 30px;
    color: var(--link-secondary);
    text-decoration: none;
    display: block;
    float: left;
    font-size: 1em;
    transition: all .1s ease-in;
    -webkit-transition: all .1s ease-in;
}

.navbar>ul>li>a:hover {
    color: var(--link-hover-secondary);
    font-weight: 700;
}
#homeicon {
    width: 1.3em;
    height: auto;
    margin-bottom: .3em;
}
#homeicon:hover {
    width: 1.38em;
    filter: opacity(70%);
}

.navbar>ul>li.subnav-open a,
.navbar .current-page {
    font-weight: 500;
    line-height: 1.6em;
    border-bottom: 1px solid var(--accent-main);
    transition: all .1s ease-in;
    -webkit-transition: all .1s ease-in;
}
.current-selection {
    color: var(--accent-main);
}

.navbar>ul>li.subnav-open>a:hover {
    font-weight: 700;
    z-index: 9999999;
}

/* sub-menu */
.navbar .subnav {
    display: none;
    position: absolute;
    width: 100%;
    left: 0;
}

.subnav-open .subnav {
    display: block;
    position: absolute;
    width: 100%;
    height: auto;
    top: 46px;
    left: 0;
    text-align: center;
    list-style: none;
    background: var(--background-nav);
    padding: 3em;
    z-index: 20;
    -webkit-padding-start: 0px;
    -moz-padding-start: 0px;
    border-bottom: 1px solid var(--border-nav);
    box-shadow: 0px 5px 8px -5px var(--dropshadow);
}

.subnav-inner ul {
    display: block;
}

.navbar .subnav-inner ul li {
    margin: 1.5em auto 2.5em auto;
    font-family: 'Raleway', sans-serif;
}

.navbar .subnav-inner ul li a {
    line-height: 2em;
    text-decoration: none;
    letter-spacing: .025em;
    color: var(--link-secondary);
    border: none;
}

.navbar .subnav-inner ul li a:hover {
    color: var(--link-hover-secondary);
    font-weight: 700;
}

/* =======================================
  HEADER
   ======================================= */
.header-image {
    width: 100%;
    height: auto;
    max-height: 400px;
    margin: auto auto -3em auto;
    position: relative;
    overflow: hidden;
}

.header-image img {
    width: 100%;
    max-height: 100%;
    position: relative;
    left: 0;
}

.headline {
    max-width: 33.5em;
    margin: -6em auto auto 1em;
    position: absolute;
}

.hp {
    position: relative;
    margin: 0em auto 6em 1em;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.headline div {
    background-color: var(--alpha-80);
    width: fit-content;
    padding: 0px 2px 0px 5px;
    border-radius: 0.2em;
}

.headline.hp {
    white-space: nowrap;
}

.byline-container {
    border: .0625em var(--border);
    border-style: solid none;
    display: inline-block;
    margin: 5em auto 1.125em auto;
}

.byline-container .byline {
    display: block;
    text-transform: uppercase;
    font-size: 1.25em;
    font-family: 'Raleway', sans-serif;
}

.byline-container .pub-date {
    font-family: 'Zilla Slab', serif;
    font-size: .75em;
}

.homepage-header {
    margin-top: 9em;
}

/* =======================================
  ARTICLE
   ======================================= */
a.anchor {
    margin-top: 50px;
    position: relative;
}

p {
    font-family: 'Raleway', sans-serif;
    letter-spacing: .025em;
    font-size: .9em;
    margin-bottom: 1.5em;
}
.locked-content {
    font-family: 'Raleway', sans-serif;
    letter-spacing: .025em;
    font-size: .9em;
    margin-bottom: 1.5em;
    text-align: center;
}

#endnote {
  text-align: center;
  margin-top: 5em;
}

.intro {
    font-family: 'Zilla Slab', serif;
    font-weight: 500;
    font-size: 1.1em;
    letter-spacing: .008em;
}

.intro:first-letter {
    font-family: 'Raleway', sans-serif;
    font-size: 3em;
    font-weight: 700;
    color: var(--text-h1);
    line-height: .5em;
    padding: .55em;
    float: left;
    background: var(--alpha-80);
    border-radius: .1em;
    margin: auto .5em .2em auto;
    text-shadow: 0px 1.75px 6.5px rgba(0, 0, 0, 0.18), 0px 2.5px 4.5px rgba(0, 0, 0, 0.1), 0px 0.25px .6px rgba(0, 0, 0, 0.3);
}

.intro:first-line {
    font-weight: 600;
}

p .lede {
    font-family: 'Zilla Slab', serif;
    font-weight: bold;
    font-size: 1.1em;
    display: block;
    margin-bottom: .5em;
}

article a, section a {
    text-decoration: none;
    color: var(--link);
    border: none;
    font-weight: 600;
    transition: all .1s ease-in;
    -webkit-transition: all .1s ease-in;
}
article a:hover, section a:hover {
    color: var(--link-hover);
    font-weight: 700;
}



/* =======================================
  CALLOUTS
   ======================================= */
.center-callout {
    width: 21.875em;
    height: auto;
    background-color: var(--background);
    float: none;
    margin: auto auto 3em auto;
    position: relative;
}
.left-callout {
    width: 21.875em;
    height: auto;
    background-color: var(--background);
    float: left;
    margin: 1.5em 2em 1.25em -6.25em;
    position: relative;
    text-align: center;
}
.right-callout {
    width: 21.875em;
    height: auto;
    background-color: var(--background);
    float: right;
    margin: 1em -6.25em 1.25em 2em;
    position: relative;
    text-align: center;
}
.caption {
    border-bottom: 1px solid var(--border);
}

.left-callout:hover .view-cta,
.right-callout:hover .view-cta,
.center-callout:hover .view-cta {
    opacity: 1;
}

.left-callout img,
.right-callout img,
.center-callout img {
    width: 100%;
    position: relative;
    left: 0;
    opacity: 1;
    transition: opacity .5s;
    -webkit-transition: opacity .5s;
    border-radius: .3em;
}
.left-callout img.gif,
.right-callout img.gif, {
    max-width: 15em;
}
.left-callout img:hover,
.right-callout img:hover,
.center-callout img:hover {
    opacity: .8;
}

.left-callout .caption p,
.right-callout .caption p,
.center-callout .caption p {
    width: 98%;
    position: relative;
    margin: 1.5em auto auto auto;
    padding-bottom: 1em;
    font-family: 'Zilla Slab', serif;
    font-size: .75em;
    font-weight: 500;
    color: var(--fallback);
}

.left-callout .caption blockquote,
.right-callout .caption blockquote,
.center-callout .caption blockquote {
    width: 90%;
    position: relative;
    margin: 1em auto auto auto;
    padding-bottom: 1em;
    font-family: 'Raleway', sans-serif;
    font-size: 2em;
    font-weight: 600;
    line-height: 1.2em;
}

.left-callout .caption blockquote {
    text-align: right;
}

.right-callout .caption blockquote {
    text-align: left;
}

.center-callout .caption blockquote {
    text-align: center;
    width: 100%;
}

.mobile-interactive {
    display: inline-flex;
    margin: auto;
    width: 100%;
}
.mobile-device-container {
    background-image: url("../img/frc/frc-mobile-phone2.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 250px;
    height: 473px;
    margin: auto;
}
.mobile-sim {
    width: 186px;
    height: 325px;
    overflow: scroll;
    scrollbar-width: none;
    position: absolute;
    margin: 62px auto auto 32px;
}
.mobile-sim::webkit-scrollbar {
    display: none;
}
.mobile-sim img {
    width: 100%;
}

/* =======================================
  LIGHTBOX & 'VIEW' BUTTON
   ======================================= */
.lightgallery {
    position: relative;
    text-align: center;
}

.view-cta {
    position: absolute;
    bottom: 1em;
    left: 1em;
    width: auto;
    height: 2.4em;
    background: #ffffff;
    opacity: 0.75;
    display: flex;
    padding: 0 .5em;
    border-radius: .2em;
    border: 1px solid var(--border);
    transition: opacity .5s;
    -webkit-transition: opacity .5s;
}

.view-cta .slideshow-icon {
    width: 1.5em;
    height: 1.5em;
    margin: auto;
}

.view-cta p {
    margin: auto auto auto .5em;
    font-size: .75em;
    color: var(--lightbox-button-label);
}

.author-bio,
.subscribe-now {
    width: 100%;
    border-top: 7px solid var(--border-accent);
    border-bottom: 1px solid var(--border);
    position: relative;
    display: flex;
    margin-top: 5em;
}

.subscribe-now {
    text-align: center;
    display: block;
}

.subscribe-now form {
    text-align: center;
    margin: 2em auto;
}

.subscribe-now #error-msg {
    color: var(--error);
    font-weight: 700;
    position: relative;
    margin: -1.25em auto auto -8em;
}

/* =======================================
  CASESTUDY
   ======================================= */
h2 span {
    font-size: .8em;
    font-weight: 600;
    display: block;
}
.section-container {
    width: 100%;
    margin: 0 auto 5em auto;
}
.cs-image-block {
    width: 100%;
    margin: 2em auto 2em auto;
}
.cs-lightgallery {
    width: 85%;
    margin: auto;
}
.cs-caption {
    width: 95%;
    margin: auto;
}

li.paragraph-list {
    margin-bottom: 10px;
}

/* =======================================
  AUTHOR BIO
   ======================================= */
.author-bio .author-pic {
    border: 1px solid var(--border);
    width: 64px;
    height: 64px;
    min-width: 64px;
    margin: 1em auto auto auto;
}

.author-text {
    display: block;
    margin: 1em auto 1em 1.25em;
}

.author-bio h3, .subscribe-now h3 {
    margin: auto auto -.3em auto;
}

.author-bio p {
    font-size: .65em;
    margin-bottom: initial;
}

.author-bio p a {
    font-weight: 500;
    text-decoration: none;
    color: var(--link-secondary);
    transition: all .1s ease-in;
    -webkit-transition: all .1s ease-in;
}

.author-bio p a:hover {
    font-weight: 700;
    color: var(--link-hover-secondary);
    border-bottom: 1px solid var(--accent-main);
}

footer {
    margin: 7em auto 3.5em auto;
}

footer p {
    font-family: 'Zilla Slab', serif;
    font-size: .75em;
    text-align: center;
}

/* =======================================
  SIDE BARS
   ======================================= */
#overlay {
    background:var(--alpha-30);
    display:none;
    width:100%; height:100%;
    position:fixed; top:0; left:0; z-index:98;
}

#recommended {
    position: fixed;
    bottom: 0;
    right: 2em;
    width: 250px;
    height: auto;
    padding: .5em;
    background-color: var(--sidebar-bg);
    border-top: 7px solid var(--border-accent);
    z-index: 90;
    border-radius: .3em .3em 0 0;
}

#recommended a {
    text-decoration: none;
    color: var(--link-secondary);
}
#recommended h4 {
    margin: .5em auto 1em .5em;
}
#recommended h5 {
    font-family: 'Raleway', sans-serif;
    font-size: .8em;
    font-weight: 600;
    margin: 1.55em 1.25em 0 1.25em;
}
#recommended h5:hover {
    font-weight: 700;
}

.xlink-article {
    position: relative;
    width: 100%;
    height: 4.375em;
    display: flex;
    margin: .25em auto auto;
    background: var(--background);
    transition: background-color .5s;
    -webkit-transition: background-color .5s;
    cursor: pointer;
}
.xlink-article:hover{
    background: var(--sidebar-bg);
}

.xlink-pic {
    border: 1px solid var(--border);
    width: 55px;
    height: 55px;
    min-width: 55px;
    margin: .65em auto auto .5em;
}

/* ==========================================================================
   Password Protected Page - Form Field
   ========================================================================== */
.form-header {
    margin: 9em auto 4em auto;
    text-align: center;
    background-color: var(--alpha-80);
    width: fit-content;
    padding: 0px 2px 0px 5px;
    border-radius: 0.2em;
}
#form, #download-button {
    text-align: center;
    font-family: 'Raleway', sans-serif;
}
.form {
    border-top: none;
    border-right: none;
    border-bottom: 1px solid var(--form-component-active-border);
    border-left: none;
    height: 2.5em;
    width: 50%;
    min-width: 300px;
    padding: 0 .5em;
    background-color: var(--form-component-bg);
    border-radius: .2em .2em 0 0;
    margin-bottom: 2em;
}
.form:focus, .form:active {
    border-top: none;
    border-right: none;
    border-bottom: 3px solid var(--form-component-active-border);
    border-left: none;
    outline: none;
    background-color: var(--form-component-active-fill);
}
.form:hover {
    background: var(--form-component-active-fill);
    border-bottom: 2px solid var(--form-component-active-border);
    font-weight: 500;
    transition-duration: .5s;
}
.form-h4 {
    margin: auto auto 1em auto;
    text-align: left;
    width: 50%;
    min-width: 300px;
}
.submit-button {
    letter-spacing: .025em;
    height: 3em;
    background: var(--form-component-bg);
    opacity: 0.75;
    padding: 0 1.5em;
    border-radius: .2em;
    border: 1px solid var(--form-component-active-border);
    width: 50%;
    min-width: 300px;
    font-weight: 400;
}
.submit-button:focus, .submit-button:active {
    outline: none;
    border: 3px solid var(--form-component-active-border);
    font-weight: 700;
    background: var(--form-component-active-fill);
}
.submit-button:hover {
    background: var(--form-component-active-fill);
    border: 2px solid var(--form-component-active-border);
    font-weight: 500;
    transition-duration: .5s;
}
#form-error {
    color: var(--error);
    font-weight: 700;
}

/* ==========================================================================
   PDF Embed
   ========================================================================== */
#pdf-resume {
    width: 100%;
    height: 860px;
}
#download-button {
    margin: 40px auto 0;
    text-decoration: none;
    line-height: 3em;
    color: var(--link-secondary);
    visibility: visible;
}

/* ==========================================================================
   Accordion
   ========================================================================== */
.tab {
    position: relative;
    margin: 0px auto -1px;
    max-width: inherit;
}
.tab input {
    display: none;
}
.tab label {
    display: block;
    background: var(--form-component-bg);
    color: inherit;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    padding: 10px;
    cursor: pointer;
    border-radius: .2em;
    border: 1px solid var(--form-component-active-border);
}
.tab label:hover {
    font-weight: 700;
    background: var(--form-component-active-fill);
    transition-duration: .5s;
}
.tab input:checked + label {
    background: var(--form-component-active-fill);
    font-weight: 700;
}
.tab label:after {
    content: "\25b6";
    position: absolute;
    right: 10px;
    top: 12px;
    display: block;
    transition: all .5s;
    color: var(--alpha-60);
}
.tab input:checked + label:after {
    transform: rotate(90deg);
    background: var(--form-component-active-fill);
    color: var(--alpha-90);
}

/* [THE CONTENTS] */
.tab-content {
    overflow: hidden;
    background: var(--form-component-active-fill);
    /* CSS animation will not work with auto height */
    /* This is why we use max-height */
    transition: max-height 0.5s;
    max-height: 0;
}
.tab-content div {
    margin: 32px 16px 8px 16px;
}
.tab input:checked ~ .tab-content {
    /* Set the max-height to a large number */
    /* Or 100% viewport height */
    max-height: 100vh;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */


/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}


/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}


/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}


/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}


/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before, .clearfix:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
}

.clearfix:after {
    clear: both;
}


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

/*  1350px */

@media only screen and (max-width: 84.375em) {
    #recommended {
        display: none;
    }
}

/*  1300px */

@media only screen and (max-width: 81.25em) {
    section {
        margin: auto;
    }
    .header-image {
      margin: auto auto -2em auto;
    }
    .header-image h1 {
      left: .25em;
    }
    .byline-container {
        margin-top: 4em;
    }
}

/*  1140px */

@media only screen and (max-width: 71.25em) {

}

/*  960px */

@media only screen and (max-width: 60em) {
    body {
        width: 100%;
    }
    section {
        width: 64%;
    }
    .headline{
        max-width: 64%;
    }
    .headline h1 {
        font-size: 2.1em;
    }
    .left-callout {
        float: none;
        margin: 3em auto 3em auto;
        text-align: center;
    }
    .right-callout {
        float: none;
        margin: 3em auto 3em auto;
    }
    .left-callout .caption blockquote {
        text-align: center;
    }
    .right-callout .caption blockquote {
        text-align: center;
    }
    #pdf-resume {
        height: 800px;
        margin-bottom: 2em;
    }
    section.embed {
        width: 70%;
    }
    #download-button {
        visibility: visible;
    }
}


/*  725px */

@media only screen and (max-width: 45.3125em) {
    section {
        width: 64%;
    }
    .headline h1 {
        font-size: 1.9em;
    }
    #pdf-resume {
        height: 750px;
    }
    section.embed {
        width: 85%;
    }
}


/*  600px */

@media only screen and (max-width: 37.5em) {
    body {
        width: 98%;
    }
    section {
        width: 90%;
    }
    .headline{
        max-width: 83%;
    }
    .header-image {
      margin: auto auto -2em auto;
    }
    .left-callout, .right-callout {
        max-width: 100%;
    }
    .navbar>ul, .navbar .subnav-inner {
        padding: initial;
        width: 100%;
    }
    .navbar>ul>li {
        display: inline-block;
    }
    .navbar>ul>li>a {
        padding: initial;
        margin: 5px 18px auto 18px;
        line-height: 2.15em;
    }
    .navbar>ul>li.subnav-open a,
    .navbar .current-page {
        line-height: 2.2em;
        padding-bottom: .3em;
    }
    #pdf-resume {
        height: 700px;
    }
}


/*  530px */

@media only screen and (max-width: 33.125em) {
    #pdf-resume {
        height: 500px;
    }
    section.embed {
        width: 100%;
    }
}


/*  320px */

@media only screen and (max-width: 20em) {
    body {
        width: 98%;
    }
    section {
        width: 90%;
        margin: 4.16em auto auto auto;
    }
    .header-image h1 {
        font-size: 2em;
        bottom: 1em;
    }
    .left-callout, .right-callout {
        max-width: 17.5em;
    }
    .center-callout {
        width: 100%;
    }
    #pdf-resume {
        height: 400px;
    }
}

@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}


/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *, *:before, *:after, *:first-letter, *:first-line {
        background: transparent !important;
        color: #000 !important;
        /* Black prints faster: http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a, a:visited {
        text-decoration: underline;
    }
    a[href]:after {
        content: " (" attr(href) ")";
    }
    abbr[title]:after {
        content: " (" attr(title) ")";
    }
    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
    a[href^="#"]:after, a[href^="javascript:"]:after {
        content: "";
    }
    pre, blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */
    thead {
        display: table-header-group;
    }
    tr, img {
        page-break-inside: avoid;
    }
    img {
        max-width: 100% !important;
    }
    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }
    h2, h3 {
        page-break-after: avoid;
    }
}