/*
    Import all the things
*/
/* YUI 3 RESET
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 3.0.0
build: 1549
*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
fieldset,
img {
  border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}
li {
  list-style: none;
}
caption,
th {
  text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}
q:before,
q:after {
  content: '';
}
abbr,
acronym {
  border: 0;
  font-variant: normal;
}
sup {
  vertical-align: text-top;
}
sub {
  vertical-align: text-bottom;
}
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}
input,
textarea,
select {
  *font-size: 100%;
}
legend {
  color: #000;
}
/* YUI 3 TYPOGRAPHY
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 3.0.0
build: 1549
*/
@font-face {
    font-family: 'hd4';
    src: url('../fonts/CabinCondensed-Medium.eot');
    src: url('../fonts/CabinCondensed-Medium.woff') format('woff'), 
    url('../fonts/CabinCondensed-Medium.ttf') format('truetype'), 
    url('../fonts/CabinCondensed-Medium.svg') format('svg');

}


@font-face {
    font-family: 'hd1';
    src: url('../fonts/CabinCondensed-SemiBold.eot');
    src: url('../fonts/CabinCondensed-SemiBold.woff') format('woff'), 
    url('fonts/CabinCondensed-SemiBold.ttf') format('truetype'), 
    url('fonts/CabinCondensed-SemiBold.svg') format('svg');
}


@font-face {
    font-family: 'hd3';
    src: url('../fonts/CabinCondensed-Bold.eot');
    src: url('../fonts/CabinCondensed-Bold.woff') format('woff'), 
    url('../fonts/CabinCondensed-Bold.ttf') format('truetype'), 
    url('../fonts/CabinCondensed-Bold.svg') format('svg');
}


@font-face {
    font-family: 'hd2';
    src: url('../fonts/CabinCondensed-Regular.eot');
    src: url('../fonts/CabinCondensed-Regular.woff') format('woff'), 
    url('../fonts/CabinCondensed-Regular.ttf') format('truetype'), 
    url('../fonts/CabinCondensed-Regular.svg') format('svg');

}



/*@font-face {
  font-family: 'hd1';
  src: url('../fonts/helveticaneueltstd-bdcno.eot');
  src: url('../fonts/helveticaneueltstd-bdcno.eot?') format('☺'),
  url('../fonts/helveticaneueltstd-bdcno.woff') format('woff'),
  url('../fonts/helveticaneueltstd-bdcno.ttf') format('truetype'),
  url('../fonts/helveticaneueltstd-bdcno.svg#HelveticaNeueLTStd77BoldCondensedOblique') format('svg');


}
@font-face {
  font-family: 'hd2';
  src: url('../fonts/helveticaltstd-roman.eot');
  src: url('../fonts/helveticaltstd-roman.eot?#iefix') format('embedded-opentype'), url('../fonts/helveticaltstd-roman.woff') format('woff'), url('../fonts/helveticaltstd-roman.ttf') format('truetype'), url('../fonts/helveticaltstd-roman.svg#HelveticaLTStdRoman') format('svg');
}
@font-face {
  font-family: 'hd3';
  src: url('../fonts/helveticaneueltstd-bdcn.eot');
  src: url('../fonts/helveticaneueltstd-bdcn.eot?#iefix') format('embedded-opentype'), url('../fonts/helveticaneueltstd-bdcn.woff') format('woff'), url('../fonts/helveticaneueltstd-bdcn.ttf') format('truetype'), url('../fonts/helveticaneueltstd-bdcn.svg#HelveticaNeueLTStd77BoldCondensed') format('svg');
}
@font-face {
  font-family: 'hd4';
  src: url('../fonts/helveticaltstd-condobl.eot');
  src: url('../fonts/helveticaltstd-condobl.eot?#iefix') format('embedded-opentype'), url('../fonts/helveticaltstd-condobl.woff') format('woff'), url('../fonts/helveticaltstd-condobl.ttf') format('truetype'), url('../fonts/helveticaltstd-condobl.svg#HelveticaLTStdCondensedOblique') format('svg');
}

*/
body {
 
  *font-size: small;
  *font: x-small;

}
select,
input,
button,
textarea {
  font: 99% arial, helvetica, clean, sans-serif;
}
table {
  font-size: inherit;
  font: 100%;
}
pre,
code,
kbd,
samp,
tt {
  font-family: monospace;
  *font-size: 108%;
  line-height: 100%;
}
/* YUI 3 BASE
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 3.0.0
build: 1549
*/
h1 {
  font-size: 138.5%;
}
h2 {
  font-size: 123.1%;
}
h3 {
  font-size: 108%;
}
h1,
h2,
h3 {
  margin: 1em 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
strong {
  font-weight: bold;
}
abbr,
acronym {
  border-bottom: 1px dotted #000;
  cursor: help;
}
em {
  font-style: italic;
}
blockquote,
ul,
ol,
dl {
  margin: 1em;
}
ol,
ul,
dl {
  margin-left: 2em;
}
ol li {
  list-style: decimal outside;
}
ul li {
  list-style: disc outside;
}
dl dd {
  margin-left: 1em;
}
th,
td {
  border: 1px solid #000;
  padding: .5em;
}
th {
  font-weight: bold;
  text-align: center;
}
caption {
  margin-bottom: .5em;
  text-align: center;
}
p,
fieldset,
table,
pre {
  margin-bottom: 1em;
}
/* Fonts */
.brand-font {
  font-family: "Conv_CabinCondensed-Regular", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
}
.brand-font-bold {
  font-family: "Conv_CabinCondensed-Bold", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 400;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  font-weight: 700;
  font-style: normal;
}
strong {
  font-family: "Conv_CabinCondensed-SemiBold", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 400;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  font-weight: 700;
  font-style: normal;
}
.brand-font-bold-italic {
  font-family: "Conv_CabinCondensed-Medium", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  font-weight: 700;
  font-style: italic;
}

/* Project specific */
.input-style {
  font-family: "Conv_CabinCondensed-Regular", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  width: 100%;
  background: #262136;
  color: #9d9ba4;
  padding: 8px 14px;
  border: 1px solid transparent;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  box-shadow: inset 0 5px 10px #241e31, 0 1px 1px #50395c;
}
/* Mixins */
.left {
  float: left;
}
.right {
  float: right;
}
.block {
  display: block;
}
.clear {
  clear: both;
}
.hidetext {
  text-indent: -9999px;
}
.center {
  margin-left: auto;
  margin-right: auto;
}
.uppercase {
  text-transform: uppercase;
}
.hide {
  display: none;
}
/* Global Animations, transforms, css3 goodies and others */
.button-style-active {
  position: relative;
  top: 1px;
}
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.pseudo-element {
  display: block;
  content: '';
}
.iePngFix {
  background: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";
  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";
  zoom: 1;
}
ul li {
  clear: both;
}
.foam-soap-lists-left {
  margin: 0 0 0 0;
  padding: 0;
  display: block;
  position: absolute;
  top: 1009px;
  left: 191px;
  width: 315px;
  font-family: hd4;
  color: #ffffff;
}
.foam-soap-lists-left li {
  margin: 17px 0 0 20px;
  padding: 0 0 0 20px;
  float: left;
  font-size: 14px;
  background: url(../img/bull-bg.png) no-repeat;
  list-style: none;
   width:285px;
}
.foam-soap-lists-left li ul {
  margin: 0 0 0 0;
  padding: 0;
}
.foam-soap-lists-left li ul li {
  margin: 5px 0 0 0px;
  padding: 0 0 0 15px;
  color: #d7c1ff;
  background: url(../img/bull-sm.png) no-repeat;
   width:285px;
}
.power-cleaner-lists-right {
  margin: 0 0 0 0;
  padding: 0;
  display: block;
  position: absolute;
  top: 1009px;
  right: 222px;
  width: 315px;
  font-family: hd4;
  color: #ffffff;
}
.power-cleaner-lists-right li {
  margin: 14px 0 0 20px;
  padding: 0 0 0 20px;
  float: left;
  font-size: 14px;
  background: url(../img/bull-bg.png) no-repeat;
  list-style: none;
  width:285px;

}
.power-cleaner-lists-right li ul {
  margin: 0 0 0 0;
  padding: 0;

}
.power-cleaner-lists-right li ul li {
  margin: 5px 0 0 0px;
  padding: 0 0 0 15px;
  color: #d7c1ff;
  background: url(../img/bull-sm.png) no-repeat;
   width:285px;
}
.soap-scum-lists-left {
  margin: 0 0 0 0;
  padding: 0;
  display: block;
  position: absolute;
  top: 1887px;
  left: 191px;
  width: 315px;
  font-family: hd4;
  color: #ffffff;
}
.soap-scum-lists-left li {
  margin: 17px 0 0 20px;
  padding: 0 0 0 20px;
  float: left;
  font-size: 14px;
  background: url(../img/bull-bg.png) no-repeat;
  list-style: none;
   width:285px;
}
.soap-scum-lists-left li ul {
  margin: 0 0 0 0;
  padding: 0;
}
.soap-scum-lists-left li ul li {
  margin: 5px 0 0 0px;
  padding: 0 0 0 15px;
  color: #d7c1ff;
  background: url(../img/bull-sm.png) no-repeat;
   width:285px;

}
.degreaser-lists-right {
  margin: 0 0 0 0;
  padding: 0;
  display: block;
  position: absolute;
  top: 1887px;
  right: 222px;
  width: 315px;
  font-family: hd4;
  color: #ffffff;
}
.degreaser-lists-right li {
  margin: 14px 0 0 20px;
  padding: 0 0 0 20px;
  float: left;
  font-size: 14px;
  background: url(../img/bull-bg.png) no-repeat;
  list-style: none;
   width:285px;
}
.degreaser-lists-right li ul {
  margin: 0 0 0 0;
  padding: 0;
}
.degreaser-lists-right li ul li {
  margin: 5px 0 0 0px;
  padding: 0 0 0 15px;
  color: #d7c1ff;
  background: url(../img/bull-sm.png) no-repeat;
   width:285px;
}
.bam-bleach-lists-left {
  margin: 0 0 0 0;
  padding: 0;
  display: block;
  position: absolute;
  top: 2810px;
  left: 191px;
  width: 315px;
  font-family: hd4;
  color: #ffffff;
}
.bam-bleach-lists-left li {
  margin: 8px 0 0 20px;
  padding: 0 0 0 20px;
  float: left;
  font-size: 14px;
  background: url(../img/bull-bg.png) no-repeat;
  list-style: none;
   width:285px;
}
.bam-bleach-lists-left li ul {
  margin: 0 0 0 0;
  padding: 0;
}
.bam-bleach-lists-left li ul li {
  margin: 5px 0 0 0px;
  padding: 0 0 0 15px;
  color: #d7c1ff;
  background: url(../img/bull-sm.png) no-repeat;
   width:285px;
}
.heavy-duty-lists-right {
  margin: 0 0 0 0;
  padding: 0;
  display: block;
  position: absolute;
  top: 2832px;
  right: 222px;
  width: 315px;
  font-family: hd4;
  color: #ffffff;
}
.heavy-duty-lists-right li {
  margin: 8px 0 0 20px;
  padding: 0 0 0 20px;
  float: left;
  font-size: 14px;
  background: url(../img/bull-bg.png) no-repeat;
  list-style: none;
   width:285px;
}
.heavy-duty-lists-right li ul {
  margin: 0 0 0 0;
  padding: 0;
}
.heavy-duty-lists-right li ul li {
  margin: 5px 0 0 0px;
  padding: 0 0 0 15px;
  color: #d7c1ff;
  background: url(../img/bull-sm.png) no-repeat;
   width:285px;
}
/* Namespaced Bundles */#buttons .link {
  text-indent: -9999px;
  display: block;
}
#buttons .link:active {
  position: relative;
  top: 1px;
}
/* Variables */
.sprite {
  display: inline-block;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url(../img/sprite.png);
}
.stamp {
  width: 221px;
  height: 203px;
  background-position: -8px -6px;
}
.intro {
  width: 780px;
  height: 141px;
  background-position: -289px -14px;
}
.foam-soap {
  width: 349px;
  height: 429px;
  background-position: -10px -247px;
}
.power-cleaner {
  width: 322px;
  height: 447px;
  background-position: -379px -232px;
}
.soap-scum {
  width: 328px;
  height: 438px;
  background-position: -737px -232px;
}
.degreaser {
  width: 322px;
  height: 444px;
  background-position: -6px -700px;
}
.bam-bleach {
  width: 321px;
  height: 453px;
  background-position: -356px -698px;
}
.heavy-duty {
  width: 324px;
  height: 463px;
  background-position: -752px -712px;
}
.foot-logo {
  width: 77px;
  height: 35px;
  background-position: -14px -1209px;
}
.discover {
  width: 64px;
  height: 8px;
  background-position: -128px -1209px;
}
.facebook {
  width: 21px;
  height: 21px;
  background-position: -129px -1226px;
}
.twitter {
  width: 21px;
  height: 21px;
  background-position: -156px -1226px;
}
.youtube {
  width: 23px;
  height: 21px;
  background-position: -183px -1226px;
}
/*
    MMMMM                                MMMMMM MMMMM
    MMMMM                   MM. MMD      MMMMMM .MMMM
    MMMMM                   .MMMM8.      MMMMMM  MMMM
    MMMMM ...,7            ...~=.  .     MMMMMM  MMMM      .MMMMM,  .   =MMMMM. MMMM
    MMMMM,MMMMMMMMM.      MMMMMMMMMMM    MMMMMM   MMM    MMMMMMMMMMMI.  =MMMMMMMMMMM
    MMMMMMMMMMMMMMMM    MMMMMMMMMMMMMM   MMMMMM   MMM  DMMMMMMMMMMMMMM. =MMMMMMMMMMM
    MMMMMM   ..MMMMMM. MMMMMM..   MMMMM  MMMMMM   MMM  MMMMM    ..MMMMM.=MMMMMM=..
    MMMMM       MMMMM  MMMMM       MMMMM MMMMMM                   ZMMMM =MMMMM
    MMMMM       MMMMM.MMMMM        MMMMM MMMMMM       MMMMMMMMMMMMMMMMM =MMMMM
    MMMMM       MMMMM.MMMMM        =MMMM MMMMMM       MMMMMMMMMMMMMMMMM~=MMMMM
    MMMMM       MMMMM.MMMMM        MMMMM MMMMMM      .MMMMM.      ~MMMM.=MMMMM
    MMMMM       MMMMM..MMMMM      ,MMMMM MMMMMM        MMMMM      MMMMM =MMMMM
    MMMMM       MMMMM.  MMMMMMMMMMMMMM   MMMMMM         =MMMMMMMMMMMM.  =MMMMM
*/
/* http://paulirish.com/2012/box-sizing-border-box-ftw/ */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* set correct image path for spritesheet */
.sprite {
  background-image: url(../img/sprite.png);
}
/* begin styling! */
body {
  width: 1200px;
  margin: 0 auto;

}
a,
a:active,
a:visited,
a:hover {
  color: #ffffff;
  text-decoration: underline;
}
.wrapper {
  position: relative;
  overflow: hidden;
  min-height: 3297px;
  background: url(../img/wrapper-bg.jpg) no-repeat;
  margin: 0 auto;
}
.topbg {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: url(../img/top-bg.png) repeat-x;
  height: 37px;
}
.logo {
  display: block;
  position: absolute;
  top: 0;
  right: 24;
  left: 54px;
  width: 586px;
  height: 302px;
  text-indent: -9999px;
  overflow: hidden;
}
.stamp {
  display: block;
  position: absolute;
  top: 83px;
  right: 311px;
}
.intro {
  display: block;
  position: absolute;
  top: 366px;
  left: 211px;
  color: #ffffff;
  font-size: 22px;
  font-family: hd1;
  text-shadow: 0 0 1px #000;
}
.intro p {
  margin-left: 184px;
  margin-top: 34px;
}
.foam-soap {
  display: block;
  position: absolute;
  top: 555px;
  left: 191px;
}
.power-cleaner {
  display: block;
  position: absolute;
  top: 539px;
  right: 217px;
}
.soap-scum {
  display: block;
  position: absolute;
  top: 1440px;
  left: 190px;
}
.degreaser {
  display: block;
  position: absolute;
  top: 1439px;
  right: 216px;
}
.bam-bleach {
  display: block;
  position: absolute;
  top: 2333px;
  left: 190px;
}
.heavy-duty {
  display: block;
  position: absolute;
  top: 2343px;
  right: 216px;
}
.label {
  display: block;
  position: absolute;
  top: 3212px;
  left: 394px;
  font-size: 17px;
  color: #d7c1ff;
  font-family: hd3;
  text-shadow: 0 0 1px #000;
}
.footer {
  margin: 0;
  padding: 0;
  border-top: 9px solid #e6e6e6;
  height: 94px;
  background: #ffffff;
}
.foot-logo {
  margin: 0;
  margin-left: 150px;
  margin-top: 26px;
  padding: 0;
  float: left;
  text-indent: -9999px;
}
.foot-copy {
  margin: 0;
  margin-left: 24px;
  margin-top: 34px;
  padding: 0;
  float: left;
  font-size: 10px;
  color: #777777;
  line-height: 15px;
  font-family: hd2;
}
.foot-copy a {
  color: #777777;
}
.social {
  margin: 0;
  margin-right: 150px;
  margin-top: 25px;
  padding: 0;
  float: right;
}
.social a {
  float: left;
  text-indent: -9999px;
  overflow: hidden;
  margin-right: 6px;
  margin-top: 5px;
}
.foam-soap .strong {
  color: #ffffff;
  font-size: 26px;
  font-family: "hd1";
  margin-top: 282px;
  float: left;
  line-height: 28px;
  text-shadow: 0 0 1px #000;
  width: 356px;
font-size: 25px;

}
.foam-soap .strongsm {
  color: #ffffff;
  font-size: 16px;
  font-family: hd1;
  margin-top: 32px;
  float: left;
  line-height: 20px;
  text-shadow: 0 0 1px #000;
}
.power-cleaner .strong {
  color: #ffffff;
  font-size: 26px;
  font-family: hd1;
  margin-top: 299px;
  float: left;
  line-height: 28px;
  text-shadow: 0 0 1px #000;
}
.power-cleaner .strongsm {
  color: #ffffff;
  font-size: 16px;
  font-family: hd1;
  margin-top: 32px;
  float: left;
  line-height: 20px;
  text-shadow: 0 0 1px #000;
}
.soap-scum .strong {
  color: #ffffff;
  font-size: 26px;
  font-family: hd1;
  margin-top: 299px;
  float: left;
  line-height: 28px;
  text-shadow: 0 0 1px #000;
  width:350px;
}
.soap-scum .strongsm {
  color: #ffffff;
  font-size: 16px;
  font-family: hd1;
  margin-top: 25px;
  float: left;
  line-height: 20px;
  text-shadow: 0 0 1px #000;
}
.degreaser .strong {
  color: #ffffff;
  font-size: 26px;
  font-family: hd1;
  margin-top: 299px;
  float: left;
  line-height: 28px;
  text-shadow: 0 0 1px #000;
}
.degreaser .strongsm {
  color: #ffffff;
  font-size: 16px;
  font-family: hd1;
  margin-top: 25px;
  float: left;
  line-height: 20px;
  text-shadow: 0 0 1px #000;
}
.bam-bleach .strong {
  color: #ffffff;
  font-size: 26px;
  font-family: hd1;
  margin-top: 304px;
  float: left;
  line-height: 28px;
  text-shadow: 0 0 1px #000;
}
.bam-bleach .strongsm {
  color: #ffffff;
  font-size: 16px;
  font-family: hd1;
  margin-top: 32px;
  float: left;
  line-height: 20px;
  text-shadow: 0 0 1px #000;
}
.heavy-duty .strong {
  color: #ffffff;
  font-size: 26px;
  font-family: hd1;
  margin-top: 294px;
  float: left;
  line-height: 28px;
  text-shadow: 0 0 1px #000;
  width:350px;
}
.heavy-duty .strongsm {
  color: #ffffff;
  font-size: 16px;
  font-family: hd1;
  margin-top: 32px;
  float: left;
  line-height: 20px;
  text-shadow: 0 0 1px #000;
}