html, body, div, span, applet, object, iframe,
h1,
.typography h1, h2, .typography 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-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

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

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

html {
  font-size: 0.875em; }

body {
  line-height: 1.2;
  background-color: #f8f6ee;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica", arial, sans-serif;
  color: #3d3d3d; }

@media (prefers-color-scheme: dark) {
  body {
    color: #fff;
    background-color: #3d3d3d; } }

img {
  max-width: 100%; }

p {
  margin: 0 0 1em 0; }

a {
  text-decoration: none;
  color: #3d3d3d; }

a:hover {
  color: #c92627; }

@media (prefers-color-scheme: dark) {
  a {
    color: #fff; }
    a:hover {
      color: #fff; } }

@font-face {
  font-family: 'BebasNeueRegular';
  src: url("/fonts/BebasNeue-webfont.eot");
  src: url("/fonts/BebasNeue-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/BebasNeue-webfont.woff") format("woff"), url("/fonts/BebasNeue-webfont.ttf") format("truetype"), url("/fonts/BebasNeue-webfont.svg#BebasNeueRegular") format("svg");
  font-weight: normal;
  font-style: normal; }

h1, .typography h1, h2, .typography h2 {
  text-transform: uppercase;
  margin: 0 0 1em 0;
  letter-spacing: 0.2em;
  font-family: "BebasNeueRegular", sans-serif;
  font-size: 1.7142857143rem; }

h2, .typography h2 {
  font-size: 1.4285714286rem;
  margin-bottom: 0.5em; }

.typography {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica", arial, sans-serif;
  font-size: 14px;
  line-height: 1.5; }
  .typography ul {
    list-style: disc;
    padding-left: 0; }
  .typography ol {
    list-style: decimal;
    padding-left: 0; }
  .typography ul, .typography ol {
    margin: 0 1.5em 1.5em 1.5em; }
  .typography p {
    margin: 0 0 1rem 0; }
    .typography p:last-child {
      margin-bottom: 0; }
  .typography img.right {
    float: right;
    margin-left: 10px; }
  .typography img.left {
    float: left;
    margin-right: 10px; }

.inner {
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  position: relative; }

.readmore {
  text-transform: uppercase;
  margin-top: 1em;
  color: #c92627; }

/* Masthead */
#masthead {
  position: relative; }
  #masthead #logo {
    width: 174px;
    height: 162px; }
    #masthead #logo a {
      display: block;
      background-image: url(/images/logo.png);
      background-repeat: no-repeat;
      width: 100%;
      height: 100%;
      text-indent: -3000px; }
      @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
        #masthead #logo a {
          background-image: url(/images/logo@2x.png);
          background-size: 174px 162px;
          background-repeat: no-repeat; } }
  #masthead nav {
    position: absolute;
    right: 20px;
    top: 115px; }
    #masthead nav li {
      float: left;
      text-transform: uppercase;
      font-family: "BebasNeueRegular", sans-serif;
      margin: 0 0 0 2em;
      font-size: 1.7142857143rem;
      letter-spacing: 0.2em; }

/* Footer */
footer {
  background-color: #000;
  padding: 1em 0;
  margin-top: 2em; }
  footer #logo-footer {
    display: block;
    width: 100px;
    height: 95px;
    background-image: url(/images/logo_white.png);
    background-repeat: no-repeat; }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
      footer #logo-footer {
        background-image: url(/images/logo_white@2x.png);
        background-size: 100px 95px;
        background-repeat: no-repeat; } }
  footer #social {
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -17px; }
    footer #social ul {
      overflow: hidden; }
      footer #social ul li {
        float: left;
        margin: 0 0 0 1em; }
        footer #social ul li a {
          display: block;
          width: 36px;
          height: 36px;
          background-image: url(/images/social_icons.png);
          background-repeat: no-repeat;
          text-indent: -3000px; }
          @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
            footer #social ul li a {
              background-image: url(/images/social_icons@2x.png);
              background-size: 72px 72px;
              background-repeat: no-repeat; } }
          footer #social ul li a:hover {
            background-position: 0 -36px; }
        footer #social ul li.twitter a {
          background-position: -36px 0; }
          footer #social ul li.twitter a:hover {
            background-position: -36px -36px; }
      footer #social ul span {
        display: none; }

/* Sections */
section {
  margin: 0;
  padding: 3em 0;
  overflow: hidden; }
  section.about {
    background-color: #fff; }

@media (prefers-color-scheme: dark) {
  section.about {
    background-color: #000; } }

.about .image {
  float: right;
  position: relative;
  top: -10px;
  margin-left: 4.347826086957%; }

/* Portfolio list */
.portfolio-list li {
  overflow: hidden;
  margin: 0 4.347826086957% 4.347826086957% 0;
  width: 30.434782608696%;
  float: left; }
  .portfolio-list li:first-child {
    width: auto;
    float: none;
    margin-right: 0; }
    .portfolio-list li:first-child .image {
      float: left;
      width: 47.826086956522%;
      margin-right: 4.347826086957%;
      margin-bottom: 0; }
    .portfolio-list li:first-child .info {
      float: left;
      width: 47.826086956522%; }
  .portfolio-list li:nth-child(3n+2) {
    clear: both; }
  .portfolio-list li:nth-child(3n+4) {
    margin-right: 0; }

.portfolio-list a:hover {
  color: inherit; }

.portfolio-list .image {
  margin-bottom: 0.5em; }
  .portfolio-list .image img {
    width: 100%; }

/* Portfolio page */
.two-cols article {
  margin-right: 4.347826086957%;
  width: 65.217391304348%;
  float: left; }

.two-cols aside {
  float: right;
  width: 30.434782608696%; }

.hero-image {
  margin: 0 0 2em 0; }
  .hero-image img {
    width: 100%; }

aside .box {
  margin-bottom: 2em; }

.app-store {
  display: inline-block;
  margin-top: 2em; }

/* Form */
input[type=text],
input[type=email],
input[type=password],
textarea {
  border: none;
  -webkit-appearance: none;
  background-color: #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  resize: none;
  font-size: 1em;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica", arial, sans-serif;
  margin: 0 0 1em 0;
  padding: 7px;
  display: block;
  width: 100%;
  outline-width: 0;
  border: solid 1px #fff; }
  input.error[type=text],
  input.error[type=email],
  input.error[type=password],
  textarea.error {
    border: solid 1px #c92627; }

textarea {
  margin-right: 4.347826086957%;
  margin-bottom: 0;
  width: 65.217391304348%;
  height: 8em; }

input[type=submit] {
  -webkit-appearance: none;
  border: none;
  font-family: "BebasNeueRegular", sans-serif;
  text-transform: uppercase;
  background-color: transparent;
  font-size: 1.2857142857rem;
  padding: 0;
  margin: 0; }

input[type=checkbox] {
  margin: 0;
  position: relative;
  top: -2px; }

#contact-form form {
  position: relative;
  overflow: hidden; }

#contact-form input[type=submit] {
  position: absolute;
  bottom: 0;
  right: 0; }

label.error {
  display: none; }

#form-status {
  font-family: "BebasNeueRegular", sans-serif;
  text-transform: uppercase;
  font-size: 1.28571428571429em;
  margin: 0 0 1em 0;
  letter-spacing: 0.2em; }
  #form-status .error {
    color: #c92627; }

.fields {
  float: right;
  width: 30.434782608696%; }

/* Login form */
.login-form .field {
  float: left;
  margin: 0 4.347826086957% 1em 0;
  width: 30.434782608696%; }
  .login-form .field.checkbox {
    margin-right: 0;
    margin-top: 32px; }

.login-form label {
  font-family: "BebasNeueRegular";
  text-transform: uppercase;
  font-size: 1.28571428571429em;
  display: block;
  margin: 0 0 0.2em 0; }
  .login-form label.right {
    display: inline-block;
    margin-bottom: 0;
    margin-left: 6px; }

#ForgotPassword {
  margin: 1em 0 0 0; }

/* Contact list */
.contact-list {
  font-family: "BebasNeueRegular", sans-serif;
  font-size: 1.28571428571429em;
  margin: 3em 0 0 0;
  overflow: hidden; }
  .contact-list li {
    float: left;
    width: 30.434782608696%;
    margin: 0 4.347826086957% 0 0; }
    .contact-list li.address {
      width: 60.869565217391%; }
    .contact-list li:last-child {
      margin-right: 0; }
  .contact-list span {
    display: block;
    padding: 0 0 0 60px;
    background-image: url(/images/phone_icon.png);
    background-repeat: no-repeat; }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
      .contact-list span {
        background-image: url(/images/phone_icon@2x.png);
        background-size: 45px 37px;
        background-repeat: no-repeat; } }
  .contact-list .address span {
    padding: 0 0 0 74px;
    background-image: url(/images/address_icon.png);
    background-repeat: no-repeat; }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
      .contact-list .address span {
        background-image: url(/images/address_icon@2x.png);
        background-size: 55px 37px;
        background-repeat: no-repeat; } }
/* Screens */
@media screen and (max-width: 600px), screen and (max-device-width: 480px) {
  html {
    -ms-text-size-adjust: none;
    -webkit-text-size-adjust: none; } }

@media screen and (max-width: 768px) {
  #masthead nav li {
    font-size: 1.4285714286rem; }
  .about .image {
    float: none;
    position: static;
    top: auto;
    margin-left: 0;
    margin-bottom: 2em;
    text-align: center; }
  .portfolio-list li {
    margin: 0 4.347826086957% 4.347826086957% 0;
    width: 47.826086956522%;
    float: left; }
    .portfolio-list li:first-child {
      width: auto;
      float: none;
      margin-right: 0; }
    .portfolio-list li:nth-child(3n+2) {
      clear: none; }
    .portfolio-list li:nth-child(2n+3) {
      margin-right: 0; }
    .portfolio-list li:nth-child(2n+4) {
      margin-right: 4.347826086957%; }
    .portfolio-list li:nth-child(2n+2) {
      clear: both; }
  .contact-list li {
    width: 47.826086956522% !important; } }

@media screen and (max-width: 590px) {
  #logo {
    width: 120px;
    height: 112px; }
  #masthead nav {
    top: auto;
    right: auto;
    left: 165px;
    bottom: 45px; }
  #masthead nav li {
    float: none; }
  .login-form .field {
    float: none;
    margin: 0 0 1em 0;
    width: auto; }
  .login-form .field.checkbox {
    margin-top: 0; }
  .two-cols article {
    margin-right: 0;
    width: auto;
    float: none; }
  .two-cols aside {
    float: none;
    width: auto;
    margin-top: 2em; }
  aside .box {
    margin-bottom: 1em; } }

@media screen and (max-width: 480px) {
  .portfolio-list li, .portfolio-list li:first-child {
    margin: 0 0 8.695652173913% 0;
    width: auto;
    float: none; }
    .portfolio-list li .image,
    .portfolio-list li .info, .portfolio-list li:first-child .image,
    .portfolio-list li:first-child .info {
      float: none;
      width: auto;
      margin-right: 0;
      margin-bottom: 0.5em; }
  textarea {
    margin-right: 0;
    width: 100%;
    margin-bottom: 1em; }
  .fields {
    float: none;
    width: auto; }
  #contact-form input[type=submit] {
    position: static;
    bottom: auto;
    right: auto; }
  .contact-list {
    text-align: center;
    font-size: 1em; }
  .contact-list li span {
    background-position: center 0 !important;
    padding: 45px 0 0 0 !important; } }