html {
  background-color: #F2F0F4;
  height: 100%; }

body {
  font-family: "Lato", sans-serif;
  max-width: 100%;
  margin: 0 auto;
  color: white; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Open Sans", sans-serif;
  color: white; }

a {
  color: white;
  text-decoration: none; }
  a:visited {
    color: white; }
  a:hover {
    text-decoration: underline; }

.container {
  margin: 0 20px; }

#headerWrapper {
  background-color: #263746;
  display: flex;
  justify-content: space-between; }
  #headerWrapper header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 50%; }
    #headerWrapper header a {
      width: 25%;
      padding: 20px 0; }
      #headerWrapper header a img {
        width: 100%; }

#navWrapper {
  display: flex;
  align-items: center; }
  #navWrapper nav {
    width: 100%; }
    #navWrapper nav ul {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 24px; }
      #navWrapper nav ul li {
        margin-left: 40px; }
        #navWrapper nav ul li.active a {
          color: #f37221; }

#footerWrapper {
  background-color: #f37221;
  overflow: hidden; }
  #footerWrapper footer {
    height: 100%;
    position: relative; }
    #footerWrapper footer div {
      position: absolute;
      text-align: center;
      width: 100%;
      margin: 34px auto; }
    #footerWrapper footer ul {
      float: right;
      margin-left: 20px;
      padding: 10px 0;
      text-align: center; }
      #footerWrapper footer ul li {
        position: relative; }
        #footerWrapper footer ul li:first-of-type {
          text-decoration: underline; }
          #footerWrapper footer ul li:first-of-type a {
            padding-bottom: 5px; }

#homePage .section1 {
  background-image: url(../img/hero.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; }
  #homePage .section1 .container {
    display: flex;
    height: 400px;
    flex-direction: column;
    justify-content: center;
    padding: 20px 0;
    margin: 0 auto;
    width: 50%; }
    #homePage .section1 .container h1 {
      font-size: 34px;
      margin-bottom: 20px; }
    #homePage .section1 .container p {
      font-size: 16px; }
#homePage .section2, #homePage #portfolio .section3, #portfolio #homePage .section3 {
  background-color: #263746;
  padding-bottom: 20px; }
  #homePage .section2 .row, #homePage #portfolio .section3 .row, #portfolio #homePage .section3 .row {
    background-size: 49.4% 100%;
    background-repeat: no-repeat;
    background-position-y: 20px;
    display: flex; }
    #homePage .section2 .row:first-of-type, #homePage #portfolio .section3 .row:first-of-type, #portfolio #homePage .section3 .row:first-of-type {
      padding-top: 20px;
      margin-bottom: 20px; }
    #homePage .section2 .row:last-of-type, #homePage #portfolio .section3 .row:last-of-type, #portfolio #homePage .section3 .row:last-of-type {
      background-position: 100% 0; }
    #homePage .section2 .row .left, #homePage #portfolio .section3 .row .left, #portfolio #homePage .section3 .row .left {
      margin-right: 20px; }
    #homePage .section2 .row .image-holder, #homePage #portfolio .section3 .row .image-holder, #portfolio #homePage .section3 .row .image-holder {
      width: 50%; }
    #homePage .section2 .row .small, #homePage #portfolio .section3 .row .small, #portfolio #homePage .section3 .row .small {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 50%; }
      #homePage .section2 .row .small img, #homePage #portfolio .section3 .row .small img, #portfolio #homePage .section3 .row .small img {
        width: 100%; }
        #homePage .section2 .row .small img:first-of-type, #homePage #portfolio .section3 .row .small img:first-of-type, #portfolio #homePage .section3 .row .small img:first-of-type {
          margin-bottom: 20px; }

#portfolio .section1 {
  background-image: url(../img/hero.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; }
  #portfolio .section1 .container {
    display: flex;
    height: 400px;
    flex-direction: column;
    justify-content: center;
    padding: 20px 0;
    margin: 0 auto;
    width: 50%; }
    #portfolio .section1 .container h1 {
      font-size: 34px;
      margin-bottom: 20px; }
    #portfolio .section1 .container p {
      font-size: 16px; }
#portfolio .section2, #portfolio .section3 {
  background-color: #263746;
  padding-bottom: 20px; }
  #portfolio .section2 h2, #portfolio .section3 h2 {
    color: #f37221;
    font-size: 28px;
    padding: 20px; }
  #portfolio .section2 .row, #portfolio .section3 .row {
    background-size: 49.4% 100%;
    background-repeat: no-repeat;
    display: flex; }
    #portfolio .section2 .row:first-of-type, #portfolio .section3 .row:first-of-type {
      padding-top: 20px;
      background-position-y: 20px;
      margin-bottom: 20px; }
    #portfolio .section2 .row:last-of-type, #portfolio .section3 .row:last-of-type {
      background-position: 100% 0; }
    #portfolio .section2 .row .left, #portfolio .section3 .row .left {
      margin-right: 20px; }
    #portfolio .section2 .row .image-holder, #portfolio .section3 .row .image-holder {
      width: 50%; }
    #portfolio .section2 .row .small, #portfolio .section3 .row .small {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 50%; }
      #portfolio .section2 .row .small img, #portfolio .section3 .row .small img {
        width: 100%; }
        #portfolio .section2 .row .small img:first-of-type, #portfolio .section3 .row .small img:first-of-type {
          margin-bottom: 20px; }