@font-face {
  font-family: 'Roboto';
  src: url('/Webfonts/RobotoBlack.woff2') format('woff2'), url('/Webfonts/RobotoBlack.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('/Webfonts/RobotoBold.woff2') format('woff2'), url('/Webfonts/RobotoBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('/Webfonts/RobotoMed.woff2') format('woff2'), url('/Webfonts/RobotoMed.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('/Webfonts/RobotoReg.woff2') format('woff2'), url('/Webfonts/RobotoReg.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
/* Sizing */
/* For use when backgrounds or borders must be constrained to the elements width */
/* For use when backgrounds or borders must span the entire element - including padding */
html.product #promote {
  margin-bottom: 2.6em;
}
html.product #promote .items {
  position: relative;
  margin-bottom: 1.2em;
}
html.product #promote .items > div {
  transition: opacity linear 0.4s;
}
html.product #promote .items > div.active {
  opacity: 1;
}
html.product #promote .items > div + div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
}
html.product #promote .items > div img {
  display: block;
  width: 100%;
}
html.product #promote .items > div.video {
  width: 100%;
}
html.product #promote .items > div.video > div {
  padding-bottom: 56.25%;
  position: relative;
  overflow: hidden;
}
html.product #promote .items > div.video iframe,
html.product #promote .items > div.video object,
html.product #promote .items > div.video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
html.product #promote .nav {
  margin-bottom: 0.8em;
}
html.product #promote .nav > div {
  display: inline-block;
  width: 31.2%;
  margin-right: 1em;
  vertical-align: top;
  cursor: pointer;
  position: relative;
}
html.product #promote .nav > div .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.4);
}
html.product #promote .nav > div .icon {
  position: absolute;
  top: 50%;
  text-align: center;
  left: 0;
  right: 0;
  font-size: 200%;
  margin-top: -0.4em;
  color: #424a2a;
  transition: color linear 0.2s;
}
html.product #promote .nav > div:hover .icon {
  color: #1e2212;
}
html.product #promote .nav.threeItems,
html.product #promote .nav.maxItems {
  text-align: justify;
  line-height: 1px;
}
html.product #promote .nav.threeItems > div,
html.product #promote .nav.maxItems > div {
  margin-right: 0;
}
html.product #promote .nav.threeItems:after,
html.product #promote .nav.maxItems:after {
  display: inline-block;
  width: 100%;
  content: "";
}
html.product #promote .nav.maxItems > div {
  width: 22.5%;
}
html.product #promote.videoActive .items > div {
  display: none;
}
html.product #promote.videoActive .items > div.video {
  display: block;
  opacity: 1;
  position: relative;
}
html.product #promote .feats {
  padding-top: 0.6em;
}
html.product #promote .feats .icon {
  display: inline-block;
  font-size: 200%;
  color: #424a2a;
  margin-bottom: 0.2em;
}
html.product #promote .feats strong {
  display: inline-block;
  font-size: 90%;
  color: #222328;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 0.6em;
}
html.product #promote .contact {
  padding-top: 0.8em;
}
html.product #promote .contact strong {
  display: block;
  font-size: 100%;
  color: #222328;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 0.4em;
}
html.product #promote .contact .button {
  font-size: 75%;
}
html.product #details .nav {
  /*display: table;*/
  display: none;
  table-layout: fixed;
  width: 100%;
  margin-bottom: 2.4em;
  border-collapse: collapse;
}
html.product #details .nav > span {
  display: table-cell;
  font-size: 75%;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  color: #424a2a;
  border: 2px solid #424a2a;
  padding: 0.5em 0;
  cursor: pointer;
  -moz-transition: color linear 0.2s, background-color linear 0.2s;
  -o-transition: color linear 0.2s, background-color linear 0.2s;
  -webkit-transition: color linear 0.2s, background-color linear 0.2s;
  transition: color linear 0.2s, background-color linear 0.2s;
}
html.product #details .nav > span:hover {
  background-color: #ffffe6;
}
html.product #details .nav > span.active {
  color: #fff;
  background-color: #424a2a;
}
html.product #details h2,
html.product #details h3 {
  color: #222328;
}
@media (min-width: 1000px) {
  html.product #promote .nav > div .icon {
    font-size: 270%;
    margin-top: -0.43em;
  }
  html.product #promote .feats {
    text-align: justify;
    line-height: 1px;
  }
  html.product #promote .feats:after {
    display: inline-block;
    width: 100%;
    content: "";
  }
  html.product #promote .feats > div {
    display: inline-block;
    width: 45%;
    line-height: 1.6em;
    text-align: left;
    vertical-align: top;
  }
}
@media (min-width: 800px) {
  html.product #promote {
    float: left;
    width: 35%;
    text-align: center;
    margin: 0;
  }
  html.product #details {
    float: right;
    width: 60%;
  }
}
@media (min-width: 1000px) {
  html.product #promote {
    width: 48%;
    text-align: left;
  }
  html.product #promote .contact strong {
    font-size: 120%;
    display: inline-block;
    margin: 0;
    padding-top: 0.3em;
  }
  html.product #promote .contact .button {
    float: right;
    padding-left: 3.4em;
    padding-right: 3.4em;
  }
  html.product #details {
    width: 48%;
  }
}
@media (min-width: 1200px) {
  html.product #promote .contact strong {
    font-size: 200%;
    text-transform: none;
    padding-top: 0.2em;
  }
}