@import url(https://fonts.googleapis.com/css?family=Lato:400,100,300,700,900);
.grid {
  width: 90%;
  margin: 0 auto;
  margin-top: 5em; }
  .grid [class*="col-"] {
    float: left;
    box-sizing: border-box;
    padding: 2em 0.5em;
    display: block; }
  .grid .col-1-2 {
    width: 50%; }
  .grid .pad-1-2 {
    margin-bottom: 50%; }
  .grid .col-2-2 {
    width: 100%; }
  .grid .col-1-3 {
    width: 33.33333%; }
  .grid .pad-1-3 {
    margin-bottom: 33.33333%; }
  .grid .col-2-3 {
    width: 66.66667%; }
  .grid .pad-2-3 {
    margin-bottom: 66.66667%; }
  .grid .col-3-3 {
    width: 100%; }
  .grid .col-1-4 {
    width: 25%; }
  .grid .pad-1-4 {
    margin-bottom: 25%; }
  .grid .col-2-4 {
    width: 50%; }
  .grid .pad-2-4 {
    margin-bottom: 50%; }
  .grid .col-3-4 {
    width: 75%; }
  .grid .pad-3-4 {
    margin-bottom: 75%; }
  .grid .col-4-4 {
    width: 100%; }
  .grid .col-1-6 {
    width: 16.66667%; }
  .grid .pad-1-6 {
    margin-bottom: 16.66667%; }
  .grid .col-2-6 {
    width: 33.33333%; }
  .grid .pad-2-6 {
    margin-bottom: 33.33333%; }
  .grid .col-3-6 {
    width: 50%; }
  .grid .pad-3-6 {
    margin-bottom: 50%; }
  .grid .col-4-6 {
    width: 66.66667%; }
  .grid .pad-4-6 {
    margin-bottom: 66.66667%; }
  .grid .col-5-6 {
    width: 83.33333%; }
  .grid .pad-5-6 {
    margin-bottom: 83.33333%; }
  .grid .col-6-6 {
    width: 100%; }
  .grid .col-1-8 {
    width: 12.5%; }
  .grid .pad-1-8 {
    margin-bottom: 12.5%; }
  .grid .col-2-8 {
    width: 25%; }
  .grid .pad-2-8 {
    margin-bottom: 25%; }
  .grid .col-3-8 {
    width: 37.5%; }
  .grid .pad-3-8 {
    margin-bottom: 37.5%; }
  .grid .col-4-8 {
    width: 50%; }
  .grid .pad-4-8 {
    margin-bottom: 50%; }
  .grid .col-5-8 {
    width: 62.5%; }
  .grid .pad-5-8 {
    margin-bottom: 62.5%; }
  .grid .col-6-8 {
    width: 75%; }
  .grid .pad-6-8 {
    margin-bottom: 75%; }
  .grid .col-7-8 {
    width: 87.5%; }
  .grid .pad-7-8 {
    margin-bottom: 87.5%; }
  .grid .col-8-8 {
    width: 100%; }
  .grid .col-1-12 {
    width: 8.33333%; }
  .grid .pad-1-12 {
    margin-bottom: 8.33333%; }
  .grid .col-2-12 {
    width: 16.66667%; }
  .grid .pad-2-12 {
    margin-bottom: 16.66667%; }
  .grid .col-3-12 {
    width: 25%; }
  .grid .pad-3-12 {
    margin-bottom: 25%; }
  .grid .col-4-12 {
    width: 33.33333%; }
  .grid .pad-4-12 {
    margin-bottom: 33.33333%; }
  .grid .col-5-12 {
    width: 41.66667%; }
  .grid .pad-5-12 {
    margin-bottom: 41.66667%; }
  .grid .col-6-12 {
    width: 50%; }
  .grid .pad-6-12 {
    margin-bottom: 50%; }
  .grid .col-7-12 {
    width: 58.33333%; }
  .grid .pad-7-12 {
    margin-bottom: 58.33333%; }
  .grid .col-8-12 {
    width: 66.66667%; }
  .grid .pad-8-12 {
    margin-bottom: 66.66667%; }
  .grid .col-9-12 {
    width: 75%; }
  .grid .pad-9-12 {
    margin-bottom: 75%; }
  .grid .col-10-12 {
    width: 83.33333%; }
  .grid .pad-10-12 {
    margin-bottom: 83.33333%; }
  .grid .col-11-12 {
    width: 91.66667%; }
  .grid .pad-11-12 {
    margin-bottom: 91.66667%; }
  .grid .col-12-12 {
    width: 100%; }
  .grid .col-1-16 {
    width: 6.25%; }
  .grid .pad-1-16 {
    margin-bottom: 6.25%; }
  .grid .col-2-16 {
    width: 12.5%; }
  .grid .pad-2-16 {
    margin-bottom: 12.5%; }
  .grid .col-3-16 {
    width: 18.75%; }
  .grid .pad-3-16 {
    margin-bottom: 18.75%; }
  .grid .col-4-16 {
    width: 25%; }
  .grid .pad-4-16 {
    margin-bottom: 25%; }
  .grid .col-5-16 {
    width: 31.25%; }
  .grid .pad-5-16 {
    margin-bottom: 31.25%; }
  .grid .col-6-16 {
    width: 37.5%; }
  .grid .pad-6-16 {
    margin-bottom: 37.5%; }
  .grid .col-7-16 {
    width: 43.75%; }
  .grid .pad-7-16 {
    margin-bottom: 43.75%; }
  .grid .col-8-16 {
    width: 50%; }
  .grid .pad-8-16 {
    margin-bottom: 50%; }
  .grid .col-9-16 {
    width: 56.25%; }
  .grid .pad-9-16 {
    margin-bottom: 56.25%; }
  .grid .col-10-16 {
    width: 62.5%; }
  .grid .pad-10-16 {
    margin-bottom: 62.5%; }
  .grid .col-11-16 {
    width: 68.75%; }
  .grid .pad-11-16 {
    margin-bottom: 68.75%; }
  .grid .col-12-16 {
    width: 75%; }
  .grid .pad-12-16 {
    margin-bottom: 75%; }
  .grid .col-13-16 {
    width: 81.25%; }
  .grid .pad-13-16 {
    margin-bottom: 81.25%; }
  .grid .col-14-16 {
    width: 87.5%; }
  .grid .pad-14-16 {
    margin-bottom: 87.5%; }
  .grid .col-15-16 {
    width: 93.75%; }
  .grid .pad-15-16 {
    margin-bottom: 93.75%; }
  .grid .col-16-16 {
    width: 100%; }
  .grid .col-1-18 {
    width: 5.55556%; }
  .grid .pad-1-18 {
    margin-bottom: 5.55556%; }
  .grid .col-2-18 {
    width: 11.11111%; }
  .grid .pad-2-18 {
    margin-bottom: 11.11111%; }
  .grid .col-3-18 {
    width: 16.66667%; }
  .grid .pad-3-18 {
    margin-bottom: 16.66667%; }
  .grid .col-4-18 {
    width: 22.22222%; }
  .grid .pad-4-18 {
    margin-bottom: 22.22222%; }
  .grid .col-5-18 {
    width: 27.77778%; }
  .grid .pad-5-18 {
    margin-bottom: 27.77778%; }
  .grid .col-6-18 {
    width: 33.33333%; }
  .grid .pad-6-18 {
    margin-bottom: 33.33333%; }
  .grid .col-7-18 {
    width: 38.88889%; }
  .grid .pad-7-18 {
    margin-bottom: 38.88889%; }
  .grid .col-8-18 {
    width: 44.44444%; }
  .grid .pad-8-18 {
    margin-bottom: 44.44444%; }
  .grid .col-9-18 {
    width: 50%; }
  .grid .pad-9-18 {
    margin-bottom: 50%; }
  .grid .col-10-18 {
    width: 55.55556%; }
  .grid .pad-10-18 {
    margin-bottom: 55.55556%; }
  .grid .col-11-18 {
    width: 61.11111%; }
  .grid .pad-11-18 {
    margin-bottom: 61.11111%; }
  .grid .col-12-18 {
    width: 66.66667%; }
  .grid .pad-12-18 {
    margin-bottom: 66.66667%; }
  .grid .col-13-18 {
    width: 72.22222%; }
  .grid .pad-13-18 {
    margin-bottom: 72.22222%; }
  .grid .col-14-18 {
    width: 77.77778%; }
  .grid .pad-14-18 {
    margin-bottom: 77.77778%; }
  .grid .col-15-18 {
    width: 83.33333%; }
  .grid .pad-15-18 {
    margin-bottom: 83.33333%; }
  .grid .col-16-18 {
    width: 88.88889%; }
  .grid .pad-16-18 {
    margin-bottom: 88.88889%; }
  .grid .col-17-18 {
    width: 94.44444%; }
  .grid .pad-17-18 {
    margin-bottom: 94.44444%; }
  .grid .col-18-18 {
    width: 100%; }
  .grid .col-1-24 {
    width: 4.16667%; }
  .grid .pad-1-24 {
    margin-bottom: 4.16667%; }
  .grid .col-2-24 {
    width: 8.33333%; }
  .grid .pad-2-24 {
    margin-bottom: 8.33333%; }
  .grid .col-3-24 {
    width: 12.5%; }
  .grid .pad-3-24 {
    margin-bottom: 12.5%; }
  .grid .col-4-24 {
    width: 16.66667%; }
  .grid .pad-4-24 {
    margin-bottom: 16.66667%; }
  .grid .col-5-24 {
    width: 20.83333%; }
  .grid .pad-5-24 {
    margin-bottom: 20.83333%; }
  .grid .col-6-24 {
    width: 25%; }
  .grid .pad-6-24 {
    margin-bottom: 25%; }
  .grid .col-7-24 {
    width: 29.16667%; }
  .grid .pad-7-24 {
    margin-bottom: 29.16667%; }
  .grid .col-8-24 {
    width: 33.33333%; }
  .grid .pad-8-24 {
    margin-bottom: 33.33333%; }
  .grid .col-9-24 {
    width: 37.5%; }
  .grid .pad-9-24 {
    margin-bottom: 37.5%; }
  .grid .col-10-24 {
    width: 41.66667%; }
  .grid .pad-10-24 {
    margin-bottom: 41.66667%; }
  .grid .col-11-24 {
    width: 45.83333%; }
  .grid .pad-11-24 {
    margin-bottom: 45.83333%; }
  .grid .col-12-24 {
    width: 50%; }
  .grid .pad-12-24 {
    margin-bottom: 50%; }
  .grid .col-13-24 {
    width: 54.16667%; }
  .grid .pad-13-24 {
    margin-bottom: 54.16667%; }
  .grid .col-14-24 {
    width: 58.33333%; }
  .grid .pad-14-24 {
    margin-bottom: 58.33333%; }
  .grid .col-15-24 {
    width: 62.5%; }
  .grid .pad-15-24 {
    margin-bottom: 62.5%; }
  .grid .col-16-24 {
    width: 66.66667%; }
  .grid .pad-16-24 {
    margin-bottom: 66.66667%; }
  .grid .col-17-24 {
    width: 70.83333%; }
  .grid .pad-17-24 {
    margin-bottom: 70.83333%; }
  .grid .col-18-24 {
    width: 75%; }
  .grid .pad-18-24 {
    margin-bottom: 75%; }
  .grid .col-19-24 {
    width: 79.16667%; }
  .grid .pad-19-24 {
    margin-bottom: 79.16667%; }
  .grid .col-20-24 {
    width: 83.33333%; }
  .grid .pad-20-24 {
    margin-bottom: 83.33333%; }
  .grid .col-21-24 {
    width: 87.5%; }
  .grid .pad-21-24 {
    margin-bottom: 87.5%; }
  .grid .col-22-24 {
    width: 91.66667%; }
  .grid .pad-22-24 {
    margin-bottom: 91.66667%; }
  .grid .col-23-24 {
    width: 95.83333%; }
  .grid .pad-23-24 {
    margin-bottom: 95.83333%; }
  .grid .col-24-24 {
    width: 100%; }
  .grid .col-1-32 {
    width: 3.125%; }
  .grid .pad-1-32 {
    margin-bottom: 3.125%; }
  .grid .col-2-32 {
    width: 6.25%; }
  .grid .pad-2-32 {
    margin-bottom: 6.25%; }
  .grid .col-3-32 {
    width: 9.375%; }
  .grid .pad-3-32 {
    margin-bottom: 9.375%; }
  .grid .col-4-32 {
    width: 12.5%; }
  .grid .pad-4-32 {
    margin-bottom: 12.5%; }
  .grid .col-5-32 {
    width: 15.625%; }
  .grid .pad-5-32 {
    margin-bottom: 15.625%; }
  .grid .col-6-32 {
    width: 18.75%; }
  .grid .pad-6-32 {
    margin-bottom: 18.75%; }
  .grid .col-7-32 {
    width: 21.875%; }
  .grid .pad-7-32 {
    margin-bottom: 21.875%; }
  .grid .col-8-32 {
    width: 25%; }
  .grid .pad-8-32 {
    margin-bottom: 25%; }
  .grid .col-9-32 {
    width: 28.125%; }
  .grid .pad-9-32 {
    margin-bottom: 28.125%; }
  .grid .col-10-32 {
    width: 31.25%; }
  .grid .pad-10-32 {
    margin-bottom: 31.25%; }
  .grid .col-11-32 {
    width: 34.375%; }
  .grid .pad-11-32 {
    margin-bottom: 34.375%; }
  .grid .col-12-32 {
    width: 37.5%; }
  .grid .pad-12-32 {
    margin-bottom: 37.5%; }
  .grid .col-13-32 {
    width: 40.625%; }
  .grid .pad-13-32 {
    margin-bottom: 40.625%; }
  .grid .col-14-32 {
    width: 43.75%; }
  .grid .pad-14-32 {
    margin-bottom: 43.75%; }
  .grid .col-15-32 {
    width: 46.875%; }
  .grid .pad-15-32 {
    margin-bottom: 46.875%; }
  .grid .col-16-32 {
    width: 50%; }
  .grid .pad-16-32 {
    margin-bottom: 50%; }
  .grid .col-17-32 {
    width: 53.125%; }
  .grid .pad-17-32 {
    margin-bottom: 53.125%; }
  .grid .col-18-32 {
    width: 56.25%; }
  .grid .pad-18-32 {
    margin-bottom: 56.25%; }
  .grid .col-19-32 {
    width: 59.375%; }
  .grid .pad-19-32 {
    margin-bottom: 59.375%; }
  .grid .col-20-32 {
    width: 62.5%; }
  .grid .pad-20-32 {
    margin-bottom: 62.5%; }
  .grid .col-21-32 {
    width: 65.625%; }
  .grid .pad-21-32 {
    margin-bottom: 65.625%; }
  .grid .col-22-32 {
    width: 68.75%; }
  .grid .pad-22-32 {
    margin-bottom: 68.75%; }
  .grid .col-23-32 {
    width: 71.875%; }
  .grid .pad-23-32 {
    margin-bottom: 71.875%; }
  .grid .col-24-32 {
    width: 75%; }
  .grid .pad-24-32 {
    margin-bottom: 75%; }
  .grid .col-25-32 {
    width: 78.125%; }
  .grid .pad-25-32 {
    margin-bottom: 78.125%; }
  .grid .col-26-32 {
    width: 81.25%; }
  .grid .pad-26-32 {
    margin-bottom: 81.25%; }
  .grid .col-27-32 {
    width: 84.375%; }
  .grid .pad-27-32 {
    margin-bottom: 84.375%; }
  .grid .col-28-32 {
    width: 87.5%; }
  .grid .pad-28-32 {
    margin-bottom: 87.5%; }
  .grid .col-29-32 {
    width: 90.625%; }
  .grid .pad-29-32 {
    margin-bottom: 90.625%; }
  .grid .col-30-32 {
    width: 93.75%; }
  .grid .pad-30-32 {
    margin-bottom: 93.75%; }
  .grid .col-31-32 {
    width: 96.875%; }
  .grid .pad-31-32 {
    margin-bottom: 96.875%; }
  .grid .col-32-32 {
    width: 100%; }

/* Grow */
.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  transition-duration: 0.3s;
  transition-property: transform; }

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
  transform: scale(1.1); }

body {
  color: #fff;
  font-family: 'lato';
  font-size: 13px;}

header {
  background-color: #fff;
  color: #000;
  width: 100%;
  height: 3.5em;
  margin: 0 auto;
  font-family: 'lato'; }
  header .wrap {
    margin: 0 auto;
    max-width: 1340px; }
    header .wrap h1 {
      padding: 0.43em;
      margin: 0 auto;
      display: inline-block;
      font-size: 28px;
      line-height: 1;
      text-transform: uppercase; }
    header .wrap h1:hover {
      color: #2098d1; }
    header .wrap #header {
      float: right;
      padding: .2em;
      font-size: 1.4em; }
    header .wrap #header a {
      color: #000;
      text-decoration: none;
      margin: 8px;
      display: inline-block; }
    header .wrap #header a:hover {
      color: #2098d1; }

.careday-top {
  text-align: center;
  margin: 0 auto;
  margin-top: 4em;
  width: 50%;
  font-size: 1.5em; }
  .careday-top ul li {
    text-align: left; }

.main-container {
  min-width: 100%;
  margin: 0 auto; }

#message {
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  background: url("/img/IMG-1226.jpg");
  background: black;
  overflow: auto; }
  #message .empty {
    height: 200px;
    width: 100%;
    visibility: hidden;
    display: block; }
  #message .empty2 {
    height: 475px;
    width: 100%;
    visibility: hidden;
    display: block; }
  #message #tagline {
    font-size: 4em;
    font-weight: 800;
    margin: 0; }
  #message h3 {
    text-align: center; }
  #message #my-button {
    background-color: #fff;
    display: inline-block;
    cursor: pointer;
    color: #000;
    font-family: 'lato';
    font-weight: 700;
    font-size: 3em;
    padding: 14px 34px;
    text-decoration: none; }
  #message #my-button:hover {
    background-color: #fff;
    color: #000;
    font-size: 3em; }
  #message #my-button:active {
    position: relative;
    top: 1px; }
  #message .col-1-3 {
    position: relative; }
  #message .col-1-3 p {
    display: none; }
  #message #careday {
    position: relative;
    text-align: left; }
  #message a:hover {
    opacity: 1;
    color: #2098d1; }
  #message .active {
    display: block;
    bottom: 0;
    left: 0;
    color: red;
    font-size: 8pt;
    position: absolute;
    text-align: left; }

img {
  border: none; }

#portfolio {
  background: url("/img/code.jpg");
  width: 100%;
  display: inline-block; }

#thumbnail img {
  cursor: pointer;
  border: 2px #fff solid;
  border-bottom: 7px #fff solid; }

#thumbnail a {
  color: #fff;
  display: block; }

#thumbnail a:hover {
  color: #2098d1; }

#large {
  display: none;
  position: fixed;
  background: #FFFFFF;
  padding: 5px;
  z-index: 10;
  min-height: 200px;
  min-width: 200px;
  color: #336699; }

#background {
  display: none;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #000000;
  z-index: 1; }

#footer {
  width: 100%;
  height: 8em;
  margin: 0 auto;
  text-align: center;
  background-color: #fff; }
  #footer p {
    display: inline;
    color: #000; }
    #footer p #github, #footer p #twitter {
      font-size: 3em;
      color: #000; }
    #footer p #github:hover, #footer p #twitter:hover, #footer p #email:hover {
      color: #2098d1; }
    #footer p #email {
      font-size: 3.3em;
      color: #000; }
  #footer #contact {
    margin-top: 1em; }
  #footer nav {
    text-align: center;
    padding: .5em;
    font-size: 1.4em;
    border-bottom: 1px solid #000;
    margin-left: 30%;
    margin-right: 30%; }
  #footer nav a {
    color: #000;
    text-decoration: none;
    margin: 8px;
    display: inline-block;
    text-align: center; }
  #footer nav a:hover {
    color: #2098d1; }

/* Rectangle Out */
.hvr-rectangle-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s; }

.hvr-rectangle-out:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out; }

.hvr-rectangle-out:hover, .hvr-rectangle-out:focus, .hvr-rectangle-out:active {
  color: white; }

.hvr-rectangle-out:hover:before, .hvr-rectangle-out:focus:before, .hvr-rectangle-out:active:before {
  -webkit-transform: scale(1);
  transform: scale(1); }

#resume-header a {
  text-decoration: none;
  background-color: #fff;
  color: #000;
  width: 100%;
  height: 3.5em;
  margin: 0 auto;
  font-family: 'lato'; }

#resume-header a:hover {
  color: #2098d1; }

#resume-png {
  background: url("/img/resumepng.png");
  width: 60%;
  text-align: center;
  margin: 0 auto; }

.wrapper {
  width: 90%;
  margin-left: 24%;
  margin-top: 5%;
  display: inline-block; }

#resume {
  margin-top: 1em;
  text-align: center;
  font-size: 2em; }

#resume a {
  text-decoration: none;
  color: #000;
  padding: .5em; }

#soon {
  text-align: center;
  margin-top: 9%;
  font-size: 6em;
  font-family: inherit; }

#me {
  margin-left: 6%;
  margin-top: 2%;
  float: left; }
  #me img {
    border-radius: 100%; }

#about-me {
  width: 60%;
  margin: 0 auto;
  margin-top: 3em; }
  #about-me p {
    font-size: 1.5em; }

#blog {
  background: #000;
  width: 100%; }

#project-nav {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 2.5em;
  height: auto;
  background: #000;
  color: #000; }
  #project-nav h2 {
    text-align: center;
    padding: .5em;
    margin-bottom: 2em;
    background-color: #fff; }
  #project-nav #projects {
    text-align: center; }
    #project-nav #projects a {
      text-decoration: none;
      color: #000;
      padding: 0.8em;
      background-color: #fff;
      font-size: 1.4em;
      margin: 0.3em; }

/* ----------------------------------------- */
.container {
  width: 1000px;
  line-height: 1.3;
  margin-left: 21%;
  margin-top: 5%; }

ol.even {
  position: relative;
  left: 9.09091em;
  z-index: 0; }

ol.odd {
  position: relative;
  margin-top: -6.5%;
  margin-bottom: -6.5%;
  z-index: 0; }

#week1 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: red;
  font-size: 4.6em;
  z-index: 0; }

.hex {
  position: relative;
  margin: 1em auto;
  width: 10em;
  height: 17em;
  background: #ccc;
  transform: rotate(-90deg);
  display: inline-block;
  margin-right: 7.69231em;
  transition: all 150ms ease-in-out; }

.hex:before, .hex:after {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: ''; }

.hex:before {
  transform: rotate(60deg); }

.hex:after {
  transform: rotate(-60deg); }

.hex:hover {
  background: #F58787;
  cursor: pointer; }

section.project-wrap {
  max-width: 1340px;
  margin: 0 auto; }

div.images {
  margin: 10%; }

div.images h2 {
  text-align: center;
  font-size: 2.5em; }

#careday-body {
  background-color: #000; }

#about-us {
  color: #fff;
  text-align: left; }

#careday-footer {
  text-align: center; }

#careday-footer a {
  text-decoration: none;
  font-size: 2em;
  color: #000;
  margin-bottom: 2em;
  background: #fff;
  padding: .5em; }

@media (max-width: 1350px) {
  .grid .col-1-3 {
    width: 50%; }
  header .wrap {
    margin: 0 auto;
    max-width: 1340px;
    padding-left: 3%;
    padding-right: 3%; } }

@media (max-width: 1200px) {
  .grid .col-1-3 {
    width: 50%; }
  #thumbnail img {
    cursor: pointer;
    border: 2px #fff solid;
    border-bottom: 7px #fff solid;
    width: 90%; }
  header .wrap {
    margin: 0 auto;
    max-width: 1340px;
    padding-left: 5%;
    padding-right: 5%; } }

@media (max-width: 900px) {
  .grid .col-1-3 {
    width: 100%; }
  #thumbnail img {
    cursor: pointer;
    border: 2px #fff solid;
    border-bottom: 7px #fff solid;
    width: 75%; }
  header {
    height: 6.5em;
    text-align: center; }
  header .wrap {
    margin: 0 auto;
    max-width: 1340px;
    padding-left: 5%;
    padding-right: 5%; }
  header .wrap #header {
    float: none;
    padding: .2em;
    font-size: 1.4em; } }

@media (max-width: 530px) {
  #thumbnail img {
    cursor: pointer;
    border: 2px #fff solid;
    border-bottom: 7px #fff solid;
    width: 90%; }
  #about-me {
    width: 85%;
    margin: 0 auto;
    margin-top: 3em; }
  #about-me p {
    font-size: 1.3em;
    display: inline-block; }
  #me {
    margin-left: 28.5%;
    margin-top: 6%;
    /* float: left; */
    text-align: center; }
  #footer p {
    font-size: 1em; }
  #footer p.created-by {
    display: block; }
  #footer {
    height: 15em; }
  #github, #twitter {
    font-size: 2em; }
  #email {
    font-size: 2.2em; }
  #message #tagline {
    font-size: 3em;
    font-weight: 600;
    margin: 0;
    margin-top: 1em; }
  #message .empty {
    height: 0; } }

@media (max-width: 400px) {
  .grid .col-1-3 {
    width: 100%; }
  #thumbnail img {
    cursor: pointer;
    border: 2px #fff solid;
    border-bottom: 7px #fff solid;
    width: 90%; }
  #about-me {
    width: 85%;
    margin: 0 auto;
    margin-top: 3em; }
  #about-me p {
    font-size: 1.3em;
    display: inline-block; }
  #me {
    margin-left: 28.5%;
    margin-top: 6%;
    /* float: left; */
    text-align: center; }
  #footer p {
    font-size: 1em; }
  #footer p.created-by {
    display: block; }
  #footer {
    height: 15em; }
  #github, #twitter {
    font-size: 2em; }
  #email {
    font-size: 2.2em; }
  #message #tagline {
    font-size: 2.2em;
    font-weight: 600;
    margin: 0;
    margin-top: 1em;
    margin-bottom: .8em; }
  #message #my-button {
    font-size: 2em; }
  #message h2 {
    font-size: 1em;
    margin-bottom: .5em; }
  #message h4 {
    font-size: .8em;
    margin-top: 0;
    margin-bottom: 2.5em; }
  #message .empty {
    height: 0; } }