@font-face {
  font-family: "Open Sans";
  src: url(../fonts/OpenSans.woff); }
* {
  margin: 0 auto;
  padding: 0;
  color: #000;
  font-family: "Open Sans"; }

a {
  text-decoration: none;
  font-weight: bold; }

li {
  list-style: none; }

li * {
  vertical-align: middle; }

p {
  margin: .5em 0; }

h2 {
  font-size: 1.75em; }

h3 {
  font-size: 1.5em; }

button {
  padding: .5em; }

img {
  max-width: 100%; }

.hidden {
  display: none; }

.centre {
  text-align: center; }

header * {
  color: #FFF; }
header #navigation {
  width: 100%;
  height: 5em;
  z-index: 5;
  background-color: #333; }
  header #navigation img {
    width: 20%;
    margin: .5em;
    float: left; }
  header #navigation h1 {
    font-size: 2em;
    margin: .7em 0 0 .5em;
    float: left; }
header #banner {
  background-image: url(../images/mainHeader.jpg);
  background-position: bottom;
  float: left;
  width: 100%;
  height: 8em;
  margin-top: 5em; }
  header #banner h2 {
    margin-top: .5em;
    font-size: 3em;
    text-align: center; }

footer {
  background-color: #333;
  color: #FFF;
  padding: .25em;
  clear: both;
  position: absolute;
  bottom: 0;
  width: 98%; }
  footer article {
    margin: .5em 0; }
  footer p, footer a {
    color: #FFF; }
  footer ul li {
    margin: .5em 0;
    color: #FFF; }
    footer ul li a {
      padding: .25em 0; }
      footer ul li a img {
        margin-right: .5em; }

/* Mobile Navigation */
.header-button {
  float: left;
  vertical-align: top;
  padding: .1em .2em;
  color: #FFF;
  text-decoration: none;
  font-size: 2.5em; }

#hamburger-menu {
  position: fixed;
  top: 5em;
  left: 0;
  right: 0;
  bottom: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  transition: all 200ms linear; }
  #hamburger-menu nav {
    width: 100%;
    float: left;
    background-color: #222;
    min-height: 100%;
    transform: translateX(-100%);
    transition: 200ms ease-out;
    transition: transform 200ms ease-out; }
    #hamburger-menu nav h2 {
      margin-top: .25em;
      padding-left: 5%;
      float: left;
      font-size: 2em;
      color: #FFF; }
    #hamburger-menu nav li {
      width: 100%;
      float: left;
      display: block;
      margin: 0 0 .5em 0;
      border-top: 1px solid #000;
      color: #FFF; }
      #hamburger-menu nav li ul {
        display: none; }
      #hamburger-menu nav li a {
        width: 95%;
        padding: .75em;
        display: inline-block;
        font-size: 1.5em;
        font-family: "Waterlily"; }
    #hamburger-menu nav form {
      margin: 1em 0 0 .75em; }
    #hamburger-menu nav input {
      padding: .5em; }

.burger-open {
  overflow: hidden; }
  .burger-open #hamburger-menu {
    visibility: visible;
    opacity: 1; }
    .burger-open #hamburger-menu nav {
      transform: translateX(0); }

#mainContent {
  width: 98%;
  margin: .5em 1% 0 1%;
  float: left; }
  #mainContent ul {
    margin-left: 1.25em; }
  #mainContent li {
    padding: .25em 0; }
    #mainContent li img {
      width: 5%;
      margin-right: .5em; }
  #mainContent h2 {
    color: #69F;
    margin-top: 1em; }
  #mainContent article {
    margin-bottom: 2em; }
  #mainContent .x30 {
    margin: 2em 0; }
    #mainContent .x30 img {
      width: 20%;
      margin-right: .5em;
      display: inline-block;
      vertical-align: middle; }
    #mainContent .x30 h3 {
      display: inline-block; }
  #mainContent .tile .h2Sub {
    width: 98%;
    margin-top: 4em;
    z-index: 0;
    position: absolute;
    text-align: center;
    color: #000;
    background-color: rgba(255, 255, 255, 0.6); }
  #mainContent .fadeOut {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0; }
  #mainContent .fadeIn {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1; }
  #mainContent .portfolioList article {
    clear: both; }
  #mainContent .portfolioList img {
    display: none; }
  #mainContent .portfolioList .x25 {
    clear: none; }
    #mainContent .portfolioList .x25 img {
      width: 50%;
      display: block; }
    #mainContent .portfolioList .x25 h3 {
      text-align: center; }
  #mainContent .portfolioList table {
    width: 100%;
    float: left;
    text-align: left;
    border-collapse: collapse; }
    #mainContent .portfolioList table thead tr {
      border-bottom: 2px solid #999; }
    #mainContent .portfolioList table tr {
      border-bottom: 1px solid #CCC; }

@media (min-width: 450px) {
  header #navigation {
    height: 5em; }
    header #navigation h1 {
      font-size: 3em;
      margin: .2em 0 0 .5em; }
    header #navigation img {
      width: 14%; }
  header #banner {
    height: 10em;
    margin-top: 5em; }
    header #banner h2 {
      margin-top: 1em; }

  footer {
    padding: .25em 3%; }

  #hamburger-menu {
    top: 5em; }

  #mainContent {
    width: 94%;
    margin: .5em 3% 0 3%; }
    #mainContent li {
      padding: .5em 0; }
    #mainContent .tile {
      width: 80%; }
      #mainContent .tile .h2Sub {
        width: 80%;
        margin-top: 3.5em; } }
@media (min-width: 550px) {
  header #navigation img {
    width: 12%; }
  header #banner {
    height: 12em; }
    header #banner h2 {
      margin-top: 1.5em; }

  #mainContent .x30 {
    margin: 2em auto;
    width: 80%;
    text-align: center; }
    #mainContent .x30 img {
      width: 10%; } }
@media (min-width: 720px) {
  header #navigation {
    height: 5.25em; }
    header #navigation .header-button {
      margin-left: 1%; }
    header #navigation h1 {
      font-size: 2.5em;
      margin: .6em 0 0 .5em; }
    header #navigation img {
      width: 9%;
      margin: .75em .5em .5em 2em; }
  header #banner {
    margin-top: 5.25em; }

  footer {
    padding: .25em 1%; }
    footer ul {
      text-align: center; }
      footer ul li {
        width: auto;
        margin: .5em 1.5%;
        display: inline-block;
        vertical-align: top; }
        footer ul li img {
          width: 15%; }

  #hamburger-menu {
    top: 5.25em; }

  #mainContent {
    width: 98%;
    margin: .5em 1% 0 1%; }
    #mainContent li img {
      width: 3%; }
    #mainContent .x30 {
      width: 30%;
      margin: 2em 1.5%;
      float: left; }
      #mainContent .x30 img {
        width: 30%;
        margin: 0; }
      #mainContent .x30 h3 {
        width: 100%; }
    #mainContent .tile {
      width: 31%;
      display: inline-block;
      margin: 0 .95%; }
      #mainContent .tile .h2Sub {
        width: 30.5%;
        margin-top: 2.5em;
        font-size: 1.5em; }
    #mainContent #categories {
      margin-bottom: 2em; }
      #mainContent #categories .tile:hover {
        cursor: pointer; }
      #mainContent #categories .tile.chosenCat {
        width: 31%; }
    #mainContent #categories .tile.chosenCat.chosenHold {
      margin: 0 35%; }
    #mainContent #experienceExamples h2 {
      padding-top: 1em; }
    #mainContent .portfolioList .x25 {
      width: 33%;
      float: left; }
      #mainContent .portfolioList .x25 img {
        width: 100%; }
    #mainContent .portfolioList .skills {
      width: 32.5%;
      display: inline-block; }
    #mainContent .portfolioList table {
      width: 50%;
      margin-left: 0; }
    #mainContent #gallery figure {
      width: 33.3%; }
    #mainContent #profileOverview {
      margin-bottom: 3em; }
      #mainContent #profileOverview .profileContainer {
        width: 40%;
        float: left; }
        #mainContent #profileOverview .profileContainer .profile {
          width: 95%;
          float: left; } }
@media (min-width: 800px) {
  header #navigation img {
    width: 8%; }
  header #banner {
    height: 15em; }
    header #banner h2 {
      margin-top: 2em; }

  #mainContent .tile .h2Sub {
    font-size: 1.75em; }
  #mainContent #profileOverview .profileContainer {
    width: 30%; } }
@media (min-width: 1024px) {
  header #navigation {
    height: 6em; }
    header #navigation img {
      width: 7%; }
    header #navigation h1 {
      margin: .8em 0 0 .5em; }
    header #navigation .header-button {
      display: none; }
  header #banner {
    margin-top: 6em; }
    header #banner h2 {
      margin-top: 1em;
      font-size: 4em; }

  #hamburger-menu {
    width: 50%;
    margin-right: 2em;
    top: 6em;
    position: static;
    visibility: visible;
    opacity: 1;
    -webkit-transition: none;
    transition: none;
    width: auto;
    float: right;
    padding: 0;
    background: none; }
    #hamburger-menu nav {
      background-color: transparent;
      -webkit-transform: none;
      transform: none;
      -webkit-transition: none;
      transition: none;
      min-height: inherit;
      margin-top: 2.5em; }
      #hamburger-menu nav li {
        width: auto;
        margin: 0 .75em;
        display: inline-block;
        float: left;
        background: none;
        border: none; }
        #hamburger-menu nav li a {
          width: 100%;
          padding: 7px 2px;
          text-decoration: none;
          text-align: center; }
        #hamburger-menu nav li a:hover {
          color: #69F; }

  footer ul li {
    margin: .5em 5%; }

  #mainContent #splash {
    margin-top: 8em; }
    #mainContent #splash #welcome p {
      font-size: 1.5em; }
  #mainContent #actionBox {
    width: 100%;
    text-align: right; }
  #mainContent .tile .h2Sub {
    margin-top: 2em;
    font-size: 2.25em; } }
@media (min-width: 1280px) {
  header #navigation h1 {
    margin: .9em 0 0 .5em; }
  header #navigation img {
    width: 6%;
    margin-left: 5%; }
  header #banner {
    height: 17em; }
    header #banner h2 {
      margin-top: 1.5em; }

  #hamburger-menu {
    margin-right: 5%; }
    #hamburger-menu nav li {
      margin: 0 1em; }

  #mainContent {
    width: 90%;
    margin: .5em 5% 0 5%; }
    #mainContent .tile .h2Sub {
      width: 28%;
      margin-top: 3em;
      font-size: 2.5em; }
    #mainContent .portfolioList .skills {
      width: 17.5%;
      margin: 1em 1%; }
    #mainContent #gallery figure {
      width: 25%; } }

/*# sourceMappingURL=main.css.map */