body {
  font-family: 'Roboto Slab', 'Helvetica', 'Arial', serif;
  font-size: 16px;
  background: #eee; }

p {
  line-height: 1.8;
  font-size: 1.1rem; }
  @media screen and (min-width: 64rem) {
    p {
      font-size: 1.2rem; } }

strong {
  font-weight: 700; }

h1, h2, h3 {
  font-family: 'Roboto Slab', 'Helvetica', 'Arial', serif;
  font-weight: 700; }

h1 {
  display: inline;
  font-size: 1.2rem;
  color: #008397; }
  @media screen and (min-width: 64rem) {
    h1 {
      font-size: 1.3rem; } }

h2 {
  font-size: 1.7rem;
  margin-bottom: 1.5rem; }

h3 {
  font-size: 1.3rem;
  margin-top: 1.5rem; }

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

a {
  transition: all 100ms ease 0s; }

.single-work__image {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden; }

.row {
  max-width: 77rem; }

header {
  position: relative;
  padding: 3em 1.5em 8rem; }
  @media screen and (min-width: 64rem) {
    header {
      padding: 6em 2em; } }
  header p {
    display: inline; }
  header .icons {
    position: absolute;
    left: 1rem;
    bottom: 3rem; }
    @media screen and (min-width: 64rem) {
      header .icons {
        top: 6rem;
        right: 3rem;
        left: auto; } }
    @media screen and (min-width: 105rem) {
      header .icons {
        right: 10rem; } }
    header .icons svg {
      width: 1.5rem;
      height: auto;
      margin-left: 1.5rem;
      transition: all 100ms ease 0s; }
      header .icons svg:hover, header .icons svg:focus {
        opacity: 0.7; }
  header .icon-twitter {
    vertical-align: -0.1rem; }

.main-image {
  background-image: url("img/hero-image.jpg");
  background-size: cover;
  background-position: top center;
  height: 14rem;
  width: 100%;
  max-width: 100rem;
  margin: auto;
  margin-bottom: 2rem; }
  @media screen and (min-width: 40.625rem) {
    .main-image {
      height: 22rem; } }
  @media screen and (min-width: 64rem) {
    .main-image {
      height: 33rem; } }

.heading {
  padding: 1.5em 2em 0 2em;
  text-align: center; }
  @media screen and (min-width: 64rem) {
    .heading {
      padding: 3em 2em 1em 2em; } }

.single-work {
  position: relative;
  padding: 1.7em 2.5em;
  margin-bottom: 1rem; }
  @media screen and (min-width: 64rem) {
    .single-work {
      padding: 1.7em 2em; } }
  .single-work a {
    display: block;
    color: #008397; }
    .single-work a:hover, .single-work a:focus {
      text-decoration: underline; }
  .single-work p {
    font-size: 1rem;
    margin-top: 0.5rem;
    color: #008397; }
    .single-work p span {
      color: #222; }

.mask {
  background-color: #fff;
  cursor: pointer;
  height: 100%;
  opacity: 0;
  position: absolute;
  transition-duration: 0.4s;
  width: 100%;
  z-index: 10;
  transition: all 100ms ease 0s; }
  .mask:hover {
    opacity: 0.2; }

footer {
  margin-top: 4rem; }