@import url(/bower_components/normalize-css/normalize.css);
/**** THUMB COLORS ****/
/** Think Header and footer color **/
.left {
  float: left; }

.right {
  float: right; }

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body {
  font-family: 'Raleway', Helvetica Neue, Arial, sans-serif;
  font-size: 16px;
  font-weight: 200;
  line-height: 22px;
  color: #000; }
  @media only screen and (min-width: 768px) {
    body {
      font-size: 17.6px;
      line-height: 24.2px; } }
  @media only screen and (min-width: 1024px) {
    body {
      font-size: 20.8px;
      line-height: 28.6px; } }
  @media only screen and (min-width: 1200px) {
    body {
      font-size: 22.4px;
      line-height: 30.8px; } }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway', Helvetica Neue, Arial, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 44px;
  color: #000;
  text-transform: lowercase; }
  @media only screen and (min-width: 1024px) {
    h1, h2, h3, h4, h5, h6 {
      font-size: 35.2px; } }
  @media only screen and (min-width: 1200px) {
    h1, h2, h3, h4, h5, h6 {
      font-size: 38.4px; } }

h2 {
  font-size: 27.2px; }

h3 {
  font-size: 24px; }

h4 {
  font-size: 20.8px; }

h1 + h2 {
  margin-top: -22px; }

a {
  cursor: pointer;
  color: #ef5b13;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none; }

main {
  margin-top: 22px;
  max-width: 1240px;
  padding: 22px 22px;
  position: relative;
  width: 100%; }
  @media only screen and (min-width: 1024px) {
    main {
      margin-top: 44px; } }

header {
  font-family: 'Raleway', Helvetica Neue, Arial, sans-serif;
  font-size: 16px;
  font-weight: 200;
  line-height: 22px;
  color: #000;
  background-color: #222;
  font-size: 20.8px;
  margin: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000; }
  @media only screen and (min-width: 768px) {
    header {
      font-size: 17.6px;
      line-height: 24.2px; } }
  @media only screen and (min-width: 1024px) {
    header {
      font-size: 20.8px;
      line-height: 28.6px; } }
  @media only screen and (min-width: 1200px) {
    header {
      font-size: 22.4px;
      line-height: 30.8px; } }
  @media only screen and (min-width: 768px) {
    header {
      font-size: 24px; } }
  @media only screen and (min-width: 1024px) {
    header {
      font-size: 27.2px; } }

nav {
  color: white;
  margin: 0 auto;
  padding: 5.5px 0 5.5px;
  text-align: center;
  width: 95%;
  max-width: 1024px; }
  @media only screen and (min-width: 600px) {
    nav {
      text-align: left; } }
  @media only screen and (min-width: 1024px) {
    nav {
      margin-left: 22px; } }
  nav a {
    color: white;
    text-decoration: none; }
    nav a:hover {
      color: #ef5b13;
      text-decoration: none; }
  nav ul {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    text-align: left;
    width: 51.5%;
    vertical-align: top; }
    @media only screen and (min-width: 768px) {
      nav ul {
        margin-right: 22px; } }
    nav ul li {
      display: inline;
      font-weight: 200;
      padding-right: 12%; }
      nav ul li:hover {
        color: #ef5b13; }
  nav p.contact {
    display: inline-block;
    margin-left: -4px;
    position: relative;
    margin: 0; }
    nav p.contact a {
      padding-right: 22px; }
      nav p.contact a:hover {
        text-decoration: none; }

footer {
  background-color: #222;
  clear: both;
  position: absolute;
  width: 100%; }
  footer #about {
    margin: 0 auto;
    max-width: 1240px;
    padding: 5%;
    width: 90%; }
    footer #about img {
      border-radius: 14%;
      margin-bottom: 3%;
      margin-right: 5%;
      max-width: 150px;
      width: 25%; }
    footer #about p {
      font-family: 'Raleway', Helvetica Neue, Arial, sans-serif;
      font-size: 16px;
      font-weight: 200;
      line-height: 22px;
      color: #000;
      color: white;
      margin-top: 0; }
      @media only screen and (min-width: 768px) {
        footer #about p {
          font-size: 17.6px;
          line-height: 24.2px; } }
      @media only screen and (min-width: 1024px) {
        footer #about p {
          font-size: 20.8px;
          line-height: 28.6px; } }
      @media only screen and (min-width: 1200px) {
        footer #about p {
          font-size: 22.4px;
          line-height: 30.8px; } }
  @media screen and (min-width: 640px) {
    footer #about img {
      width: 16%; } }
  @media screen and (min-width: 1024px) {
    footer #about {
      float: left;
      padding: 3%;
      width: 80%; }
      footer #about img {
        width: 15%; } }

.wrap404 {
  margin-left: -6%;
  max-width: 1024px; }
  .wrap404 img {
    display: inline-block;
    width: 50%; }
  .wrap404 p {
    display: inline-block;
    margin-top: 7%;
    padding-left: 5%;
    vertical-align: top;
    width: 45%; }

.project h1 + .top {
  margin-top: 0; }
.project img {
  display: inline-block;
  max-width: 960px;
  width: 100%; }
.project p {
  display: inline-block;
  max-width: 1240px;
  padding: 3%;
  vertical-align: top;
  width: 90%; }

.thumb-index {
  max-width: 1078px;
  margin-bottom: 22px; }

.thumb-indiv {
  display: inline-block;
  margin: 0 11px 11px 0;
  max-width: 256px;
  padding-left: 5.5px;
  width: 43%; }
  @media only screen and (min-width: 768px) {
    .thumb-indiv {
      margin: 0 22px 22px 0; } }
  .thumb-indiv:hover .thumb-img {
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
  .thumb-indiv .thumb-img {
    float: left;
    margin-bottom: -7px;
    position: relative;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    z-index: 2; }
    .thumb-indiv .thumb-img img {
      max-width: 256px;
      width: 100%; }
  .thumb-indiv .label {
    display: none;
    float: left;
    overflow: hidden;
    padding-top: 5.5px;
    padding-left: 5px;
    padding-right: 25px;
    position: absolute;
    width: 38.5%;
    z-index: 1; }
    @media only screen and (min-width: 600px) {
      .thumb-indiv .label {
        display: block; } }
    @media only screen and (min-width: 768px) {
      .thumb-indiv .label {
        width: 28%; } }
    @media only screen and (min-width: 1024px) {
      .thumb-indiv .label {
        width: 25%; } }
    @media only screen and (min-width: 1200px) {
      .thumb-indiv .label {
        width: 19%; } }
    .thumb-indiv .label p {
      font-size: 19.2px;
      font-weight: 700;
      margin: 0.3em 0; }
      @media only screen and (min-width: 1200px) {
        .thumb-indiv .label p {
          font-size: 20.8px; } }
    .thumb-indiv .label .small {
      font-size: 16px;
      font-weight: 400; }
      @media only screen and (min-width: 1200px) {
        .thumb-indiv .label .small {
          font-size: 17.6px; } }

/** THUMBNAIL COLOR ASSIGNMENT **/
.thumb-indiv.w1 {
  background-color: #e59905;
  color: #e59905; }
  .thumb-indiv.w1:hover {
    color: black; }

.thumb-indiv.w2 {
  background-color: #19b4a0;
  color: #19b4a0; }
  .thumb-indiv.w2:hover {
    color: black; }

.thumb-indiv.w3 {
  background-color: #ef5b13;
  color: #ef5b13; }
  .thumb-indiv.w3:hover {
    color: black; }

.thumb-indiv.w4 {
  background-color: #79bd2f;
  color: #79bd2f; }
  .thumb-indiv.w4:hover {
    color: black; }

.thumb-indiv.w5 {
  background-color: #dd3716;
  color: #dd3716; }
  .thumb-indiv.w5:hover {
    color: black; }

.thumb-indiv.w6 {
  background-color: #e59905;
  color: #e59905; }
  .thumb-indiv.w6:hover {
    color: black; }

.thumb-indiv.w7 {
  background-color: #19b4a0;
  color: #19b4a0; }
  .thumb-indiv.w7:hover {
    color: black; }

/********** DARWIN STUDY **********/
#darwin p.top {
  border-left: 5px solid #e59905; }
#darwin p.bottom {
  border-top: 5px solid #e59905; }
#darwin img.col2 {
  max-width: 540px; }
@media screen and (min-width: 640px) {
  #darwin p.bottom {
    border-top: none;
    border-right: 5px solid #e59905;
    margin-bottom: 25%;
    margin-top: 19%;
    width: 30%; }
  #darwin img.col1 {
    margin-bottom: 5%; }
  #darwin img.col2 {
    width: 60%;
    float: right; } }
@media screen and (min-width: 1024px) {
  #darwin p.top {
    float: right;
    margin-top: 23%;
    width: 30%; }
  #darwin img.col1 {
    width: 60%; } }
@media screen and (min-width: 1240px) {
  #darwin img.col2 {
    margin-right: 10%; } }

/*********** WHISKEY ENDEAVORS *******/
#whiskey iframe {
  width: 100%;
  height: 243px;
  margin-top: 5%; }
#whiskey p.top {
  border-bottom: 5px solid #19b4a0; }
#whiskey p.bottom {
  border-left: 5px solid #19b4a0; }
@media screen and (min-width: 480px) {
  #whiskey iframe {
    height: 355px; }
  #whiskey p.top {
    margin-bottom: 10%; } }
@media screen and (min-width: 640px) {
  #whiskey iframe {
    max-width: 853px;
    height: 480px;
    margin: 3% auto; } }
@media screen and (min-width: 960px) {
  #whiskey p.bottom {
    width: 45%; }
  #whiskey img.col1, #whiskey img.col2, #whiskey img.col3 {
    width: 48%; }
  #whiskey img.col1 {
    margin-bottom: 10%; }
  #whiskey img.col2 {
    float: right; } }
@media screen and (min-width: 1400px) {
  #whiskey iframe {
    margin-bottom: 10%; }
  #whiskey p.top {
    margin-left: 5%;
    width: 20%; } }

/************ MANIPS ****************/
#manip p.top {
  border-right: 5px solid #ef5b13; }
#manip img.col1 {
  max-width: 792px; }
@media screen and (min-width: 960px) {
  #manip p.top {
    width: 30%;
    float: right; }
  #manip img.col1 {
    width: 60%; } }

/******* METALWORK *********/
#metal p.top {
  border-left: 5px solid #79bd2f; }
#metal p.bottom {
  border-top: 5px solid #79bd2f; }
#metal img.col2 {
  max-width: 540px; }
@media screen and (min-width: 640px) {
  #metal p.bottom {
    border-top: none;
    border-right: 5px solid #79bd2f;
    margin-bottom: 25%;
    width: 30%; }
  #metal img.col1 {
    margin-bottom: 5%; }
  #metal img.col2 {
    width: 60%;
    float: right; } }
@media screen and (min-width: 1024px) {
  #metal img.col2 {
    float: none;
    margin-left: 8%; } }

/************ CHARCOAL *****************/
#charcoal p.top {
  border-right: 5px solid #dd3716; }
#charcoal p.middle {
  border-top: 5px solid #dd3716; }
#charcoal p.two {
  border-top: none;
  margin-top: 0; }
#charcoal img.col1, #charcoal img.col2 {
  max-width: 1024px;
  text-align: center; }

/************* SILLINESS *****************/
#silliness p.top {
  border-bottom: 5px solid #e59905; }
#silliness p.middle {
  border-left: 5px solid #e59905; }
#silliness img.col2 {
  margin-bottom: 5%; }
@media screen and (min-width: 768px) {
  #silliness img.col2 {
    padding-right: 5%; }
  #silliness img.col2, #silliness img.col3 {
    width: 45%;
    vertical-align: top; } }

/***** API MOBILE DEMO ******/
#api img {
  max-width: 320px;
  width: 100%; }
#api p.top {
  border-bottom: 5px solid #e59905;
  margin-bottom: 5%; }
#api p.middle {
  border-left: 5px solid #e59905; }
#api p.bottom {
  border-right: 5px solid #e59905; }
@media screen and (min-width: 640px) {
  #api img {
    width: 48%; }
  #api p.middle, #api p.bottom {
    float: left;
    width: 50%;
    margin-top: 25%; }
  #api p.bottom {
    float: right; } }
@media screen and (min-width: 960px) {
  #api img.col1 {
    margin-right: 15%; }
  #api p.middle, #api p.bottom {
    width: 65%; } }

/****** BD *******/
#bd img.col1 {
  max-width: 320px;
  width: 41%; }
#bd img.col2 {
  float: left;
  max-width: 850px; }
#bd p.top {
  border-left: 5px solid #e59905;
  margin: 18% 5%;
  padding-right: 1%;
  width: 41%; }
#bd p.bottom {
  border-top: 5px solid #e59905; }
@media screen and (min-width: 960px) {
  #bd p.top {
    margin: 12% 6%;
    width: 38%; } }
@media screen and (min-width: 1024px) {
  #bd img.col1 {
    margin-top: 1%;
    width: 22%; }
  #bd img.col2 {
    width: 60%; }
  #bd img.col4 {
    width: 50%; }
  #bd p.top {
    margin: 4% 2%;
    width: 40%; } }

/******** 125 *************/
#csuc img.col3, #csuc img.col4, #csuc img.col5, #csuc img.col7 {
  width: 90%;
  border: 10px solid black;
  border-radius: 10px;
  margin-bottom: 10px; }
#csuc p.top {
  border-right: 5px solid #19b4a0; }
#csuc p.middle {
  border-left: 5px solid #19b4a0; }
#csuc p.bottom {
  border-bottom: 5px solid #19b4a0; }
@media screen and (min-width: 960px) {
  #csuc img.col1 {
    width: 50%; }
  #csuc img.col3, #csuc img.col4 {
    margin-bottom: 5%;
    margin-right: 4%;
    width: 60%; }
  #csuc img.col5, #csuc img.col6, #csuc img.col7 {
    width: 43%; }
  #csuc img.col5 {
    background-color: #893604;
    margin-right: 3%;
    padding-bottom: 6%; }
  #csuc p.top {
    margin-top: 3%;
    width: 30%; }
  #csuc p.middle, #csuc p.bottom {
    margin-top: 6%;
    width: 20%; } }

/********** GALAXY ***********/
#galaxy img.col2 {
  margin-bottom: 2em; }
#galaxy p.top {
  border-bottom: 5px solid #19b4a0; }
#galaxy p.bottom {
  border-bottom: 5px solid #19b4a0; }
@media screen and (min-width: 960px) {
  #galaxy p.top, #galaxy p.bottom {
    margin: -2% 2% inherit;
    vertical-align: top;
    width: 33%; }
  #galaxy p.top {
    margin-bottom: 6%; }
  #galaxy p.bottom {
    float: left;
    margin-top: 5%; }
  #galaxy img.col1, #galaxy img.col2 {
    width: 57%; } }
@media screen and (min-width: 1240px) {
  #galaxy p.top {
    margin-top: 2.5%; } }

/********** INCOMM INCENTIVES ***********/
#incentives p.top {
  border-left: 5px solid #19b4a0; }

/********** PORTAL ***********/
#portal p.top {
  border-left: 5px solid #ef5b13; }
#portal p.bottom {
  border-right: 5px solid #ef5b13; }

/********** 40 STORIES ***********/
#s40 p.top {
  border-left: 5px solid #dd3716; }
#s40 p.middle {
  border-right: 5px solid #dd3716; }
#s40 p.bottom {
  border-top: 5px solid #dd3716; }
@media screen and (min-width: 960px) {
  #s40 p.top {
    vertical-align: top;
    width: 34%;
    margin-bottom: 6%; }
  #s40 p.middle {
    float: right;
    width: 34%; }
  #s40 p.bottom {
    margin-top: 5%; }
  #s40 img.col1, #s40 img.col2 {
    margin-bottom: 7%;
    width: 58%; } }