/* TODO: Remove #wip */
#wip {
  text-align: center;
  background-color: #DE4848;
  color: #e8e8e8;
  padding: 30px 0;
  font-weight: bold;
  font-size: 1.3em; }
  #wip a:link,
  #wip a:active,
  #wip a:visited {
    color: #e8e8e8;
    -o-transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    transition: .3s;
    text-decoration: underline; }
  #wip a:hover {
    color: #F7F7F7; }

* {
  margin: 0; }

html, body {
  height: 100%;
  font-family: 'Lato' !important; }

a:link,
a:active,
a:visited {
  text-decoration: none;
  color: #939393;
  -o-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s; }

a:hover {
  color: #DE4848; }

header {
  height: 700px;
  width: 100%;
  background-image: url("../img/logo.png");
  background-color: #F7F7F7;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; }

nav {
  height: 50px;
  width: 100%;
  background-color: #F7F7F7;
  text-align: center;
  box-shadow: 0 1px 5px #888888; }
  nav ul {
    list-style: none;
    position: relative;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 0; }
    nav ul li {
      display: inline;
      margin: 0 75px;
      font-size: 20px;
      font-weight: bold; }

nav.fixed {
  position: fixed;
  top: 0;
  z-index: 3; }

div.separator {
  height: 2px;
  width: 100%;
  background-color: #e8e8e8; }

section h3 {
  text-align: center;
  margin: 60px 0;
  font-size: 2.5em; }

section#skills {
  min-height: 450px;
  text-align: center; }
  section#skills #skillsContainer {
    margin: 0 auto;
    max-width: 1010px; }
  section#skills .skillItem {
    float: left;
    max-width: 300px;
    margin-left: 30px; }
  section#skills h4 {
    font-size: 1.3em; }
  section#skills svg {
    width: 100px;
    fill: #DE4848;
    height: 100px;
    margin: 50px; }

section#blog {
  position: relative;
  height: 500px; }
  section#blog #blogBackground {
    height: 500px;
    width: 100%;
    background-image: url("../img/bg-coffee.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    clear: both;
    -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px);
    overflow: hidden;
    position: absolute;
    z-index: 1; }
  section#blog #blogContainer {
    z-index: 2;
    margin: auto;
    position: relative;
    top: 10%;
    height: 80%;
    color: #e8e8e8;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+99,000000+100&0+0,0.19+33,0+72 */
    background: -moz-radial-gradient(center, ellipse cover, transparent 0, rgba(0, 0, 0, 0.19) 20%, transparent 65%, transparent 99%, transparent 100%);
    /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0, transparent), color-stop(20%, rgba(0, 0, 0, 0.19)), color-stop(65%, transparent), color-stop(99%, transparent), color-stop(100%, transparent));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, transparent 0, rgba(0, 0, 0, 0.19) 20%, transparent 65%, transparent 99%, transparent 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, transparent 0, rgba(0, 0, 0, 0.19) 20%, transparent 65%, transparent 99%, transparent 100%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, transparent 0, rgba(0, 0, 0, 0.19) 20%, transparent 65%, transparent 99%, transparent 100%);
    /* IE10+ */
    background: radial-gradient(ellipse at center, transparent 0, rgba(0, 0, 0, 0.19) 20%, transparent 65%, transparent 99%, transparent 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 );
    /* IE6-9 fallback on horizontal gradient */ }
    section#blog #blogContainer p {
      margin: 0 auto;
      max-width: 1000px;
      text-align: center; }

section#portfolio {
  min-height: 450px; }
  section#portfolio #portfolioContainer {
    margin: 0 auto;
    max-width: 50%; }
    section#portfolio #portfolioContainer .portfolioItem {
      height: 300px;
      width: 450px;
      background-size: cover;
      box-shadow: 0 0 50px #888888; }
      section#portfolio #portfolioContainer .portfolioItem .blurBox {
        background-color: red;
        cursor: pointer;
        position: absolute;
        bottom: 0; }
    section#portfolio #portfolioContainer .portfolioItem:first-of-type {
      float: left;
      background-image: url("../img/portfolio/port_sistersofstitch.png"); }
    section#portfolio #portfolioContainer .portfolioItem:last-of-type {
      float: right;
      background-image: url("../img/portfolio/port_eriksonservices.png"); }

footer {
  height: 300px;
  width: 100%;
  background-color: #939393; }
  footer div {
    float: left;
    margin: 20px; }
  footer div#footerDisclaimer {
    float: left;
    width: 30%; }
  footer div#footerContact {
    float: left;
    width: 40%; }