/* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
*, *:before, *:after {
  box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0; }

body {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 300;
  letter-spacing: .05em;
  -webkit-font-smoothing: antialiased; }

p {
  line-height: 1.5; }

a {
  color: #fff;
  text-decoration: none;
  background-color: #333; }
  a.inline, #projects .project a {
    padding: .25em .5em; }
  a:hover {
    background-color: #e69c00; }

@media (min-width: 768px) {
  .large-font, section header, #about .content, #contact .content .inner-content p.link {
    font-size: 1.875em;
    line-height: 1.6em; } }

.caps {
  text-transform: uppercase; }

.strike {
  text-decoration: line-through; }

.center {
  text-align: center; }

section {
  padding-top: 4em;
  margin: 0 auto 4em;
  position: relative;
  width: 95%; }
  section + section {
    border-top: 1px solid #ccc; }
  section:last-child {
    border-bottom: none; }
  section header {
    position: absolute;
    top: 0;
    right: 0;
    background-color: black;
    color: white;
    padding: .25em .5em; }
  section .content {
    margin: 0 auto;
    position: relative; }
    section .content img {
      max-width: 100%;
      width: 100%;
      height: auto;
      display: block;
      margin: 0 auto; }
  @media (min-width: 768px) {
    section {
      width: 768px; } }
  @media (max-width: 959px) {
    section#photos .content {
      max-width: 612px; } }
  @media (min-width: 960px) {
    section#photos {
      width: 960px; }
      section#photos .content {
        width: 100%; } }

#nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%; }
  #nav ul {
    margin: 0;
    padding: 0;
    display: none; }
  #nav li {
    list-style: none; }
  #nav a {
    display: block;
    padding: 10px 12px; }
  #nav img {
    width: 25px; }
  @media (min-width: 768px) {
    #nav {
      width: auto; }
      #nav a {
        padding: 15px; }
      #nav img {
        width: auto; } }

#about {
  padding-top: 8em;
  padding-bottom: 4em; }

#map {
  height: 500px;
  width: 100%;
  height: 100%; }

#photos .box {
  text-align: center;
  margin-top: 1.5em; }
  @media (min-width: 960px) {
    #photos .box {
      display: inline-block;
      width: 460px;
      margin: 10px; } }
#photos #more-images {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  margin-top: 2em;
  background-color: lightBlue;
  padding: .5em;
  text-align: center;
  font-size: 1.5rem;
  cursor: pointer; }

#projects .project {
  margin: 2em 0; }
  @media (min-width: 768px) {
    #projects .project {
      margin-left: 2em;
      margin-right: 4em; } }
  #projects .project a {
    display: inline-block;
    margin-bottom: .5em; }

#contact .content {
  height: 100%; }
  #contact .content .inner-content {
    text-align: center;
    margin: 100px auto 0; }
    #contact .content .inner-content a {
      display: block;
      padding: .5em 1em;
      color: white; }
    #contact .content .inner-content p.link {
      margin: 2em; }