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 {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

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

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }

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

a img {
  border: none; }

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

body {
  font-family: "abril-text", serif;
  font-size: 1em;
  line-height: 1.21477em;
  font-variant-ligatures: no-common-ligatures;
  -moz-font-feature-settings: "liga", "clig";
  -ms-font-feature-settings: "liga", "clig";
  -webkit-font-feature-settings: "liga", "clig";
  font-feature-settings: "liga", "clig";
  color: #4A4A4A;
  background-color: #e6e6e6; }

h1 {
  font-size: 1.68002em;
  font-weight: 100; }

h2 {
  font-size: 1.067em;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0.67766em 0; }

h3 {
  font-size: 1.13849em; }

p {
  line-height: 1.383em;
  margin-top: 1em; }
  @media (min-width: 600px) {
    p {
      font-size: 1.21477em; } }

figcaption {
  line-height: 1.383em; }

nav {
  position: fixed;
  right: 1.47566em;
  top: 1.47566em; }
  nav svg {
    width: 30px;
    height: 30px; }

section, figcaption, footer {
  max-width: 43em;
  margin: 0 auto 1.91269em;
  padding: 0 0.87836em; }

figure img {
  width: 100%; }

footer p {
  font-size: 1em;
  text-align: center; }

.intro {
  margin: 2.64525em auto 1em; }
  .intro h1, .intro h2 {
    text-align: center; }
  .intro h1 {
    line-height: 1.2em;
    max-width: 15em;
    margin: 0.63511em auto 0;
    padding-bottom: 0.43039em;
    border-bottom: 1px solid #4A4A4A; }
  .intro h2 {
    font-size: 0.87836em;
    font-weight: 100; }
  .intro p {
    font-size: 1.383em;
    line-height: 1.383em;
    margin-top: 1.91269em; }
    .intro p + p {
      margin-top: 1em; }

.screen, .brand, .print, .talk {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 1.68002em; }
  .screen p, .brand p, .print p, .talk p {
    font-size: 0.87836em;
    line-height: 1.19911em; }
  .screen div, .brand div, .print div, .talk div {
    margin-bottom: 0.5em; }

.screen h3 {
  font-size: 1em;
  margin: 0.27335em 0 1.19765em; }
.screen div {
  width: 48%; }
  @media (min-width: 600px) {
    .screen div {
      width: 31.5%; } }

.brand div, .print div {
  width: 48%; }
  @media (min-width: 600px) {
    .brand div, .print div {
      width: 24%; } }

@media (min-width: 600px) {
  .talk div {
    width: 48.9%; } }
.talk p {
  margin-top: .5em; }

.case-study ul {
  font-size: 1.067em;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.2em;
  margin-bottom: 3em; }
.case-study img {
  width: 100%;
  margin: 1.067em auto; }

a {
  color: #313131; }

a:hover {
  color: #575757; }

#close {
  fill: #313131; }

.screen a, .print a, .brand a, .talk a {
  text-decoration: none; }

.screen a figure:hover, .print a figure:hover, .brand a figure:hover, .talk a figure:hover {
  transform: scale(1.05); }

figure {
  text-align: center; }

figure svg {
  max-width: 7em; }

figure svg g {
  fill: #4A4A4A; }

#contact {
  margin-top: 3.65838em;
  padding-top: 1.383em;
  border-top: 1px solid #4A4A4A; }

#work-for-the-screen {
  margin-top: 2em; }