/* Reset based on http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126
================================================================================ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
  margin: 0; 
  padding: 0; 
  border: 0; 
  vertical-align: baseline; 
  font: inherit; 
  font-size: 100%; 
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
  display: block; 
}
ol, ul { list-style: none; }

/* Fonts
================================================================================ */

@font-face {
  font-weight: normal;
  font-style: normal;
  font-family: 'function_pro_light';
  src: url('../_fonts/function_pro_light.woff') format('woff');
  }
@font-face {
  font-weight: normal;
  font-style: normal;
  font-family: 'function_pro_medium';
  src: url('../_fonts/function_pro_medium.woff') format('woff');
  }
/* Global
================================================================================ */

/* Apply a natural box layout: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
* { box-sizing: border-box; }

/* clear all floating divs http://css-tricks.com/snippets/css/clear-fix/ */
div:after {
  display: table;
  clear: both;
  content: "";
}

html {
  overflow-y: scroll; /* Always force a vertical scrollbar */
  min-height: 100%;
  border-bottom: 8px solid black; 
  background: white;
  color: hsl(0,0%,20%);
  font-size: 18px;
  font-family: 'function_pro_light', sans-serif;
  line-height: 1.4;

  font-smoothing: antialiased; /* prevent flicker when fading in text */
  }
body { }
a {
  color: hsl(0,0%,50%);
  text-decoration: none;
  }
a:hover { 
  color: hsl(0,0%,0%);
  }

/* img { display: block; } */

b { font-family: 'function_pro_medium', sans-serif; }

p { margin-bottom: 20px; }
hr {
  display: block;
  margin: 0;
  padding: 0;
  height: 1px;
  border: 0;
  border-top: 8px solid black;
  }
.hr2 { border-top: 1px solid black; }
h1, 
h2, 
h3 { 
  margin-bottom: 20px; 
  font-family: 'function_pro_medium', sans-serif; 
}
h1 { font-size: 1.2rem; }
i { font-style: italic; }

.wrap {
  margin: 0 auto;
  width: 960px;
  }

/* Header 1
================================================================================ */

.header1 {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  height: 0; /* set to 0 so we don't cover links below */
  }
.header1 .wrap {
  height: 0; /* set to 0 so we don't cover links below */
  }
.header1 .nav1 {
  text-align: right;
  }
.header1 .nav1 a {
  display: inline-block;
  padding: 16px 0 12px 29px;
  color: hsl(0,0%,30%);
  font-size: 0.7rem;
  font-family: 'function_pro_medium', sans-serif;
  }
.header1 .nav1 a:hover {
  color: hsl(0,50%,50%);
  }
.header1 h1 {
  margin-left: auto;
  width: 280px;
  }
.header1 h1 img { 
  width: 280px;
  }


/* Header 2
================================================================================ */

.header2 {
  margin-bottom: 60px;
  background: black;
  }
.header2 .nav2 { 
  text-align: right;
  }
.header2 .nav2 a {
  display: inline-block;
  margin-left: -5px;
  padding: 10px 27px;
  color: hsl(0,0%,70%);
  font-size: 0.7rem;
  font-family: 'function_pro_medium', sans-serif;
  }
.header2 .nav2 a:hover {
  background: hsl(0,0%,20%); 
  color: hsl(0,0%,100%);
  }
.header2 .nav2 a:first-of-type { 
  border-left: 1px solid hsl(0,0%,30%);
  } 
.header2 .nav2 a:last-of-type {
  background: hsl(0,50%,50%); 
  color: white;
  } 
.header2 .nav2 a:hover:last-of-type {
    background: hsl(0,100%,50%);
  }

/* Products 1
================================================================================ */

.products1 {
  position: relative;
  }
.products1 h2 { 
  position: absolute;
  bottom: 0;
  left: 0;
  }
.products1 .label {
  position: absolute;
  color: hsl(0,100%,50%);
  font-style: italic;
  font-family: 'function_pro_medium', sans-serif;
  z-index: 10;
}
.products1 a {
  position: absolute;
  display: block;
  }
.products1 a:hover {
  opacity: 0.7;
  }

/* Product Positioning */
.group0 a:nth-child(1) { top: 38%; left: 44%; }
.group0 a:nth-child(2) { top: 24%; left: 24%; }
.group0 a:nth-child(3) { top: 16%; left: 6%; }
.group0 a:nth-child(4) { top: 12%; left: 0%; }
.group0 .l1 { top: 89%; left: 66%;}
.group0 { height: 400px; }

.group1 a:nth-child(1) { top: 34%; left: 8%; }
.group1 .l2 { top: 36%; left: 0%;}
.group1 { height: 400px; }

.group2 a:nth-child(1) { top: 44%; left: 8%; z-index: 10; }
.group2 a:nth-child(2) { top: 24%; left: 27%; }
.group2 a:nth-child(3) { top: 48%; left: 36%; }
.group2 a:nth-child(4) { top: 10%; left: 68%; }
.group2 a:nth-child(5) { top: 54%; left: 75%; }
.group2 .l3 { top: 62%; left: 4%;}
.group2 .l4 { top: 18%; left: 30%;}
.group2 .l5 { top: 18%; left: 74%;}
.group2 .l6 { top: 42%; left: 45%;}
.group2 .l7 { top: 58%; left: 86%;}
.group2 { height: 460px; }

.group3 a:nth-child(1) { top: 6%; left: 44%; }
.group3 a:nth-child(2) { top: 8%; left: 24%; }
.group3 { height: 560px; }

.group4 a:nth-child(1) { top: 14%; left: 16%; }
.group4 { height: 360px; }

.os a { top: 18%; left: 32%; }
.os a img { border: 8px solid black; }
.os { height: 360px; }

/* Products 2
================================================================================ */

.productNav {
  margin: -40px auto 80px auto;
  height: 200px;
  }
.productNav a {
  display: inline-block;
  margin-right: 20px;
  vertical-align: -150px;
  text-align: center;
  }
.productNav a img {
  display: block;
  margin-bottom: 10px;
  }


/* Product Page
================================================================================ */

.product {
  margin-bottom: 80px;
  }
.product .prodImage {
  float: left;
  padding: 0 60px 0 0;
  width: 65%;
  }
.product .prodImage img {
  margin-bottom: 40px;
  width: 100%;
  height: auto;
  }
.product .prodText {
    float: left; 
  width: 35%;
  }


/* Product Gallery
http://hacks.mozilla.org/2012/02/a-simple-image-gallery-using-only-css-and-the-target-selector/
================================================================================ */

.galleryImages {
  position: relative;
  height: 620px;
  }
.target {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: 1s;
  transition: 1s;
  }
.target:target {
  opacity: 1;
  }

 animate in first image on page load 
.target:first-of-type {
  animation: galleryFirstIage 1s forwards;
  }
@keyframes galleryFirstIage {
  0% { opacity: 0; }
  100% { opacity: 1; }
  }


/* Product Cart
================================================================================ */

.prodStatus {
  position: relative;
  left: -20px;
  margin-bottom: -45px;
  color: hsl(0,100%,50%);
  font-style: italic;
  font-size: 1.2rem;
  font-family: 'function_pro_medium', sans-serif;
}
.productCart {
  margin-top: 60px;
  }
.productCart > div {
  float: left;
  width: 33.33%;
  height: 36px;
  border-left: 1px solid white;
  background: hsl(0,0%,90%);
  text-align: center;
  font-size: 0.8rem;
  font-family: 'function_pro_medium', sans-serif;
  }
.productCart .prodLabel {
  padding-top: 8px;
  }
.productCart .btnDisabled {
  padding-top: 9px;
  color: hsl(0,0%,70%);
  font-family: 'function_pro_light', sans-serif;
  }
.productCart input {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 36px;
  border: 0;
  background: hsl(0,0%,0%);
  color: white;
  font-size: 0.8rem;
  font-family: 'function_pro_light', sans-serif;
  cursor: pointer;

  -webkit-appearance: none;
  }
.productCart input:hover {
  background: hsl(0,0%,40%);
  }


/* Article 1
================================================================================ */

.article1 {
  margin-bottom: 80px;
  }
.article1 > div {
    float: left;
    padding-right: 6%;
  width: 50%;
  }
.article1 > div:last-of-type { 
  padding-right: 0;
  }
.article1 .photo1 {
  width: 100%;
  height: auto;
  }
.article1 .icon1 {
  margin: 10px 12px 0 0;
  width: 22px;
  height: auto;
  vertical-align: -20%;
  }

/* Animations
================================================================================ */

body { 
  -webkit-animation: fadeIn 1s ease-out; 
          animation: fadeIn 1s ease-out;
}
.home { 
  -webkit-animation: bgFadeIn 1s linear;
          animation: bgFadeIn 1s linear;
}
.header1 { 
  -webkit-animation: headSlideIn 1s 0.5s backwards; 
          animation: headSlideIn 1s 0.5s backwards;
}
.home .group0 { 
  -webkit-animation: fadeIn 1s 1.5s backwards;
          animation: fadeIn 1s 1.5s backwards;
}
.home .group1 { 
  -webkit-animation: fadeIn 1s 1.7s backwards;
          animation: fadeIn 1s 1.7s backwards;
}
.home .group2 {
  -webkit-animation: fadeIn 1s 1.9s backwards;
          animation: fadeIn 1s 1.9s backwards;
}
.home .group3 {
  -webkit-animation: fadeIn 1s 2.1s backwards;
          animation: fadeIn 1s 2.1s backwards;
}
.home .group4 {
  -webkit-animation: fadeIn 1s 2.3s backwards;
          animation: fadeIn 1s 2.3s backwards;
}
.home .os {
  -webkit-animation: fadeIn 1s 2.5s backwards;
          animation: fadeIn 1s 2.5s backwards;
}

@-webkit-keyframes bgFadeIn { 0% { background: black; } 100% { background: white; } }
@keyframes         bgFadeIn { 0% { background: black; } 100% { background: white; } }

@-webkit-keyframes headSlideIn { 0% { top: -240px; } 100% { top: 0px; } }
@keyframes         headSlideIn { 0% { top: -240px; } 100% { top: 0px; } }

@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes         fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }