html, body {
  min-height: 100%;
  margin: 0px;
  border: 20px solid rgb(16,4,57);
  font-family: 'Nunito', sans-serif;
}

p {
  font-size: 16pt;
}

.container {
  background-color: rgba(244,212,0,1);
  color: rgb(16,4,57);
}

.wrapper {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  background-color: rgba(244,212,0,1);
  color: rgb(16,4,57);
}

.wrapper > * {
  flex: 1 100%;
}

/* Source order for mobile-first approach
 * 1. header
 * 2. article
 * 3. aside 1
 * 4. aside 2
 * 5. footer
 */

 /* Small screens */
 @media (max-width: 600px) {

   div.main {
     margin: auto;
     width: 100%;
     padding-bottom: 0.1em;
   }

   div.intro-text-1 {
     width: 80%;
     text-align: center;
     margin: auto;
     padding: 0px;
   }

   div.intro-text-2 {
     width: 80%;
     text-align: center;
     margin: auto;
     padding-bottom: 4em;
   }

   div.say-hello {
     padding: 2em;
   }

   div.contact a {
     color: white;
     font-size: 1em;
   }

   div.business-card {
     padding: 0.5em;
     background-color: white;
     width: 80%;
     margin: auto;
   }

   div.business-card a {
     color: rgb(16,4,57);
     text-decoration: none;
     font-size: 1em;
     font-weight: 700;
   }

   div.business-card p {
     font-size: 1em;
   }

 }

/* Medium screens */
@media all and (min-width: 600px) {
  /* We tell both sidebars to share a row */
  .aside { flex: 1 auto; }
}

/* Large screens */
@media all and (min-width: 800px) {
  /* We invert order of first sidebar and main
   * And tell the main element to take twice as much width as the other two sidebars
   */
  .main { flex: 2 0px; }
  .portfolio { flex: 2 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .portfolio { order: 3; }
  .contact { order: 4; }
  .footer  { order: 5; }
}

.item {

}

.logo {
  margin: auto;
  padding: 50px;
  text-align: center;
}

.tagline h3 {
  text-transform: uppercase;
  font-weight: 200;
  letter-spacing: 10px;
  text-align: center;
}

.main {
  margin: auto;
  width: 50%;
  padding-top: 2em;
  padding-bottom: 5em;
}

.main h3 {
  text-transform: uppercase;
  font-weight: 200;
  letter-spacing: 10px;
  text-align: right;
  padding-right: 50px;;
}

::selection {
  background-color: rgb(16,4,57);
  color: white;
}

.intro-text-1 {
  width: 60%;
  text-align: right;
  padding-left: 30%;
}

.intro-text-2 {
  width: 70%;
  text-align: left;
}

.what-we-do {
  margin: auto;
  text-align: center;
  padding-top: 4em;
  padding-bottom: 2em;
}

.whatwedo {
  background-image: url('http://gilbertolontro.com/wp-content/uploads/2015/03/man-feeds-birds-lake-geneva-%C2%A9GilbertoLontro-s.jpg');
  background-size: cover;
  background-color: rgb(244,212,0);
  background-blend-mode: screen;
  background-position: center;
}

.portfolio {
  margin: auto;
  padding: 2em;
}

.portfolio-item {
  margin: auto;
  text-align: center;
  vertical-align: middle;
  min-width: 100px;
}

.contact {
  background-color: #00B5AD;
  background-image: -webkit-gradient(linear,left top,right bottom,from(#00B5AD),to(#d0076f));
  background-image: -webkit-linear-gradient(-45deg,#006896 0,#d0076f 100%);
  background-image: -moz-linear-gradient(-45deg,#00B5AD 0,#006896 100%);
  background-image: -ms-linear-gradient(-45deg,#00B5AD 0,#006896 100%);
  background-image: -o-linear-gradient(-45deg,#00B5AD 0,#006896);
  text-align: center;
  padding-top: 5em;
  padding-bottom: 5em;
}

.contact a {
  color: white;
  font-size: 2em;
}

.say-hello {
  padding: 5em;
}

.business-card a {
  color: rgb(16,4,57);
  text-decoration: none;
  font-size: 1em;
  font-weight: 700;
}

.business-card a:hover {
  color: rgba(244,212,0);
  font-weight: 700;
}

.business-card a:visited {
  font-weight: 400;
}

.business-card {
  padding: 2em;
  background-color: white;
  width: 300px;
  margin: auto;
}

.img-responsive {
  width: 100%;
  height: auto;
}

.image {
  width: 100%;
  overflow: hidden;
}

.image-colorize img {
  transition: transform .5s, filter 0.5s ease-in-out;
  filter: grayscale(100%);
}

.image-colorize:hover img {
  filter: grayscale(0);
  transform: scale(1.1);
}

.background-hue-animation {
    -webkit-animation: hue-rotation 3.5s linear 0ms infinite!important;
    -moz-animation: hue-rotation 3.5s linear 0ms infinite!important;
    -ms-animation: hue-rotation 3.5s linear 0ms infinite!important;
    -o-animation: hue-rotation 3.5s linear 0ms infinite!important;
    animation: hue-rotation 3.5s linear 0ms infinite!important;
  }

.copyright {
  padding: 10px;
  font-size: 0.8em;
  position: absolute;
  color: white;
}