body {
  font-size: 20px;
  line-height: 1.6em;
  font-family: adobe-garamond-pro, Palatino Linotype, Palatino, serif;
  color: #312516;
  background-color: #f0f0e5;
  background-image: url("/?originalUrl=https%3A%2F%2Flazerwalker.com%2Fimages%2Fbg.png");
  background-repeat: repeat;
  padding-top: 10px; }

#headshot {
  border: 0px !important;
}

a {
  text-decoration: none;
  border-bottom: 1px dotted #312516;
  color: #312516; }
  a:hover {
    border-bottom: 1px solid #312516;
    color: #312516; }
  a.img {
    border-bottom: none !important; }

img {
  border: 1px solid rgba(0, 0, 0, 0.1) !important; }
  img.header {
    border: none !important; }

h1, h2, h3 {
  font-family: ff-enzo-web, Verdana, sans-serif;
  color: #312516;
  font-size: 28px;
  margin-bottom: 15px; }

h1 {
  padding-top: 10px;
  font-weight: bold; }

h2 {
  font-weight: bold; }

h3 {
  clear: both;
  font-size: 20px;
  line-height: 1.5;
  padding-top: 2em; }
  .detail h3 {
    clear: none; }

h3:first-of-type {
  padding-top: 0; }

strong {
  font-family: ff-enzo-web, Verdana, sans-serif; }

#complete-works h3 {
  clear: none; }

#wrapper {
  box-sizing: border-box;
  width: 1000px;
  display: block;
  max-width: 1024px;
  margin: auto;
  position: relative;
  padding-left: 40px;
  padding-right: 40px; }
  @media only screen and (min-width: 1350px) {
    #wrapper {
      width: 1200px; } }
  @media only screen and (max-width: 1150px) {
    #wrapper {
      width: 1000px; } }
  @media only screen and (max-width: 1000px) {
    #wrapper {
      width: 750px; } }
  @media only screen and (max-width: 650px) {
    #wrapper {
      width: 450px; } }
  @media only screen and (max-width: 450px) {
    #wrapper {
      width: 300px; } }
  @media only screen and (max-width: 650px) {
    #wrapper {
      padding-left: 20px;
      padding-right: 20px; } }

nav {
  box-sizing: border-box;
  float: left;
  width: 100px;
  font-family: ff-enzo-web, Palatino Linotype, Book Antiqua, Palatino, serif;
  line-height: 1.5;
  padding-top: 1em; }
  @media only screen and (max-width: 1000px) {
    nav {
      margin-left: 10px; } }
  @media only screen and (max-width: 650px) {
    nav {
      margin-left: 0;
      width: 100%; }
      nav img, nav ul {
        float: left; }
      nav ul {
        margin-left: 10px !important;
        margin-top: 0 !important;
        width: 100px; } }
  @media only screen and (max-width: 450px) {
    nav {
      width: 100%; }
      nav li {
        display: inline-block;
        padding-right: 10px; }
        nav li a {
          border-bottom: 1px dotted #333333; } }
  nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-top: 10px; }
  nav a {
    text-decoration: none;
    border: 0;
    color: #312516; }
    nav a:hover {
      border-bottom: 1px dotted #333333; }
  nav a.img {
    border: none; 
    width: 100%;}

#content {
  margin-left: 150px;
  max-width: 900px; }
  @media only screen and (max-width: 1000px) {
    #content {
      margin-left: 150px; } }
  @media only screen and (max-width: 650px) {
    #content {
      margin-left: 0px; } }
  @media only screen and (max-width: 450px) {
    #content {
      clear: both; } }
  @media only screen and (max-width: 650px) {
    #content {
      clear: both; } }

article {
  padding-top: 10px; }
  article.end {
    margin-bottom: 3em; }

section {
  margin-bottom: 2em; }
  section .squares {
    clear: both;
    list-style-type: none;
    margin-top: 1em;
    margin-bottom: 3em;
    padding: 0; }
    section .squares li {
      float: left;
      font-family: ff-enzo-web, Lucida Sans, sans-serif;
      font-size: 0.7em;
      height: 210px;
      line-height: 1.75;
      margin-bottom: 50px;
      margin-right: 30px;
      text-align: center;
      width: 160px; }
      @media only screen and (max-width: 450px) {
        section .squares li {
          float: none;
          margin: auto;
          margin-bottom: 50px; } }
      section .squares li img {
        width: 160px;
        height: 160px;
        margin-bottom: 10px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 10px; }
      section .squares li a {
        border: none; }
  section img.tall {
    margin-bottom: 1.6em; }
  section img.right {
    margin-left: 25px;
    float: right; }
  section p, section div {
    padding-bottom: 1em; }

.detail {
  margin-bottom: 2em; }
  .detail div.images {
    clear: both;
    margin-top: 1em;
    margin-bottom: 3em; }
    .detail div.images.small a {
      box-sizing: border-box;
      float: left;
      width: 100px;
      margin-left: 50px;
      margin-right: 50px;
      width: 100px;
      height: 100px;
      border: none;
      margin-right: 0;
      margin-bottom: 1.5em; }
      @media only screen and (min-width: 1350px) {
        .detail div.images.small a {
          margin-left: 87.5px; } }
      @media only screen and (max-width: 1150px) {
        .detail div.images.small a {
          margin-left: 25px; } }
      @media only screen and (max-width: 1150px) {
        .detail div.images.small a {
          margin-right: 25px; } }
      .detail div.images.small a img {
        width: 100px;
        height: 100px;
        margin-bottom: 30px;
        border-radius: 10px; }
  .detail img {
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-right: 25px;
    float: left;
    margin-bottom: 1em; }
    @media only screen and (max-width: 450px) {
      .detail img {
        display: block;
        float: none !important;
        margin-left: auto;
        margin-right: auto; } }
    .detail img.standalone {
      display: block;
      float: none !important;
      margin-left: auto;
      margin-right: auto; }
    .detail img.tall {
      margin-bottom: 1.6em; }
    .detail img.right {
      margin-left: 25px;
      float: right; }
  .detail p, .detail div {
    padding-bottom: 1em; }

#speaking {
  clear: both; }

#complete-works ul {
  list-style-position: inside;
  column-count: 2;
  -webkit-column-count: 2; }
  @media only screen and (max-width: 650px) {
    #complete-works ul {
      column-count: 1;
      -webkit-column-count: 1; } }

#writing {
  clear: both; }
  #writing ul {
    list-style-type: none;
    margin: 0; }

#telegraph img {
  float: none; }

/* On smaller screens (portrait iPad or smaller), the Dr. Horrible images overflow,
 * screwing with the positioning of the last section. This unfortunate hack stops that.
 * (we can't make all sections clear: both or else the main nav would break) */
#contact {
  clear: both;
  padding-top: 2em; }

hr {
  border: none;
  background-color: rgba(0, 0, 0, 0.2);
  height: 1px;
  width: 60%; }

.portfolio h3 {
  clear: none; }
.portfolio .portfolio-images {
  text-align: center; }
  .portfolio .portfolio-images img {
    max-width: 49%;
    margin: auto;
    vertical-align: center; }
  .portfolio .portfolio-images.threes img {
    max-width: 32%; }
.portfolio .squares img {
  border: 1px solid rgba(0, 0, 0, 0.1); }
.portfolio img {
  box-shadow: none !important; }
  .portfolio img.header {
    max-height: 200px; }