@import url("fonts.css");
html {
  height: 100%;
}

body {
  font-family: ProximaNova-Reg, sans-serif;
  font-size: 100%;
  margin: 0;
  padding: 0;
  background-color: #ecebe7;
  height: 100%;
  width: 100%;
}

div {
  margin: 0;
  padding: 0;
}

img {
  height: auto;
  max-width: 100%; }

a:link, a:visited, a:hover, a:active {
  color: #0066ff;
  text-decoration: none; }

a img {
  border: none; }

h1 {
  background-color: #BBAA86;
  color: #fff;
  font-size: 18px;
  display: inline-block;
  border: 2px solid #fff;
  padding: 5px 12px;
  font-family: ProximaNova-Bold, sans-serif;
  font-weight: bold;
  margin: 1.2em 0 1em;
  white-space: nowrap; }

h2 {
  color: #9D8F6D;
  font-size: 21px;
  margin: 0;
  font-family: ProximaNova-Bold, sans-serif; }

h3 {
  color: #4C4C4C;
  font-size: 17px;
  margin: 0;
  font-family: ProximaNova-Bold, sans-serif; }

ul {
  list-style: none;
  padding: 0; }

.cf:before,
.cf:after {
  content: " ";
  display: table; }

.cf:after {
  clear: both; }

@media (max-width: 980px) and (min-width: 621px) {
  .long-text {
    font-size: 18px !important; } }
@media (max-width: 620px) {
  h1 {
    font-size: 14px;
    padding: 6px 8px; }

  h2 {
    font-size: 18px;
    margin: 0; }

  h3 {
    font-size: 14px; }

  p {
    margin: 0.8em 0; } }
/* layout divs */
#container {
  /* overflow: hidden; */
  position: relative;
  visibility: hidden;
  width: 100%; }

#nav-menu {
  position: absolute;
  width: 225px;
  padding: 10px 10px 80px;
  top: 0;
  left: -245px;
  background-color: #ADAB9F;
  -webkit-box-shadow: inset -4px 0px 6px #8d8e8d;
  -moz-box-shadow: inset -4px 0px 6px #8d8e8d;
  box-shadow: inset -4px 0px 6px #8d8e8d;
  z-index: 4;
  overflow: scroll; }

#main {
  background-color: #ecebe7;
  width: 100%;
  position: relative;
  z-index: 2; }

#nav-menu, #main {
  float: left; }

/* content section */
#content {
  position: relative;
  font-family: ProximaNova-Reg, "Myriad Pro", "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  color: #3f3f3f;
  margin-bottom: 70px;
  background-color: #ecebe7; }

/* content items */
.indent-content {
  margin-left: 20px;
  margin-right: 20px;
  text-align: left; }

.strong {
  font-family: ProximaNova-Bold, sans-serif;
  font-weight: bold; }

.box-shadow1 {
  -moz-box-shadow: 1px 1px 0px #C3C3BE;
  -webkit-box-shadow: 1px 1px 0px #C3C3BE;
  box-shadow: 1px 1px 0px #C3C3BE; }

.caption {
  font-size: 15px;
  line-height: 200%; }

.caption-text {
  text-align: right;
  margin-top: -5px; }

.caption-bullet {
  display: inline-block;
  margin-right: 0.5em; }

.clear {
  clear: both; }

#retype-blank {
  position: absolute;
  visibility: hidden; }

@media (max-width: 620px) {
  .indent-content {
    margin-left: 9px;
    margin-right: 9px; }

  #content {
    margin-bottom: 30px;
    font-size: 0.9em; }

  .caption {
    font-size: 13px; }

  .caption-text {
    margin-top: -8px; } }
/* footer(s) */
#footer {
  float: left;
  width: 100%;
  padding: 9px 0 0;
  background-color: #2b2b2b;
  background-image: -moz-linear-gradient(97% 100% 4deg, #2b2b2b 0%, #4c4c4c 100%);
  background-image: -webkit-gradient(linear, 97% 100%, 40% 20%, color-stop(0, #2b2b2b), color-stop(1, #4c4c4c));
  background-image: -webkit-linear-gradient(4deg, #2b2b2b 0%, #4c4c4c 100%);
  background-image: -o-linear-gradient(4deg, #2b2b2b 0%, #4c4c4c 100%);
  background-image: -ms-linear-gradient(4deg, #2b2b2b 0%, #4c4c4c 100%);
  background-image: linear-gradient(94deg, #2b2b2b 0%, #4c4c4c 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff2b2b2b,endColorstr=#ff4c4c4c,GradientType=1)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff2b2b2b,endColorstr=#ff4c4c4c,GradientType=1); }

#footer a, .footer-nav a {
  color: #fff;
  text-decoration: none; }

#footer .social-icons {
  width: 17.838541666667%;
  margin: 0 auto; }

/* image "maps" for social icons */
#footer-warning {
  width: 50%;
  color: #fcfcfc !important;
  text-align: center;
  font-size: 10px;
  margin: 0.6em auto; }

.footer-nav-container {
  width: 100%;
  margin: 9px auto 5px;
  text-align: center; }

.footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  color: #FCFCFC;
  font-size: 17px; }

#footer .footer-nav li {
  display: inline-block;
  text-align: center;
  border-left: 1px solid #6A6A68;
  padding: 0 0.5em; }

#footer .footer-nav li:first-child {
  border-left: none;
  padding: 0 0.5em 0 0; }

#footer .footer-nav li.last {
  padding: 0 0 0 0.5em; }

.copyright {
  color: #929292;
  font-size: 11px;
  margin: 0 auto 12px;
  width: 100%;
  text-align: center; }

/* nav menu footer content */
#nav-menu div.indent {
  margin-left: 20px; }

#nav-menu .social-icons {
  width: 137px; }

#nav-menu .footer-nav-container {
  width: auto;
  margin: 0;
  text-align: left; }

#nav-menu .footer-nav {
  font-size: 15px;
  margin: 20px 0; }

#nav-menu .footer-nav li {
  margin-bottom: 0.7em; }

#nav-menu .copyright {
  color: #fff;
  font-size: 12px;
  margin: 0;
  width: 180px;
  text-align: left; }

#nav-menu #footer-warning {
  display: none; }

@media (max-width: 620px) {
  .footer-nav {
    font-size: 12px; }

  .copyright {
    font-size: 12px; } }
/* masthead section */
#masthead {
  position: relative;
  width: 100%;
  height: 45px;
  padding: 6px 0 4px;
  background-color: #2B2B2B;
  border-bottom: 12px solid #CDCBC6;
  background-image: -moz-linear-gradient(97% 100% 4deg, #2b2b2b 0%, #4c4c4c 100%);
  background-image: -webkit-gradient(linear, 97% 100%, 40% 20%, color-stop(0, #2b2b2b), color-stop(1, #4c4c4c));
  background-image: -webkit-linear-gradient(4deg, #2b2b2b 0%, #4c4c4c 100%);
  background-image: -o-linear-gradient(4deg, #2b2b2b 0%, #4c4c4c 100%);
  background-image: -ms-linear-gradient(4deg, #2b2b2b 0%, #4c4c4c 100%);
  background-image: linear-gradient(94deg, #2b2b2b 0%, #4c4c4c 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff2b2b2b,endColorstr=#ff4c4c4c,GradientType=1)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff2b2b2b,endColorstr=#ff4c4c4c,GradientType=1); }

#logo-container {
  margin: 0 auto;
  width: 126px; }

#logo-container-pro {
  margin: 0 auto;
  width: 193px; }

#menu-button {
  position: absolute;
  top: 10px;
  left: 19px;
  width: 35px;
  height: 35px; }

@media (max-width: 620px) {
  #masthead {
    height: 30px;
    border-bottom: 6px solid #CDCBC6; }

  #logo-container {
    width: 91px; }

  #logo-container-pro {
    width: 140px; }

  #menu-button {
    top: 6px;
    left: 10px;
    width: 28px;
    height: 28px; } }
@media (max-width: 380px) {
  #logo-container-pro {
    position: relative;
    left: -6px; } }
.alert,
a.alert {
  background-color: #95BF03;
  background-image: url(/images/alert-exclamation.png);
  background-position: 15px 50%;
  background-repeat: no-repeat;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  color: #FFF;
  display: table;
  font-size: 14px;
  height: 52px;
  padding: 8px 8px 8px 55px;
  table-layout: fixed;
  text-align: left;
  text-decoration: underline;
  width: 100%; }

.alert-text {
  display: table-cell;
  vertical-align: middle; }

@media (min-width: 621px) {
  .alert,
  a.alert {
    font-size: 18px; } }
.article {
  position: relative;
  text-align: center; }
  .article-list .article {
    margin-bottom: 20px;
    padding-bottom: 10px; }
    .article-list .article:after {
      background-color: #ECEBE7;
      content: "";
      position: absolute;
      top: 70%;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1; }
    .article-list .article:before {
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
      border-bottom: 1px solid #B4B4B1;
      border-radius: 100px / 3px;
      content: "";
      position: absolute;
      top: 80%;
      right: 5px;
      bottom: -1px;
      left: 5px;
      z-index: 0; }
  .article-list-primary .article:last-child {
    margin-bottom: 30px;
    padding-bottom: 0; }
    .article-list-primary .article:last-child:before {
      display: none; }

.article-desc,
.article-img,
.article-links,
.article-title {
  position: relative;
  z-index: 2; }

.article-desc {
  font-size: 19px; }
  .article-list-primary .article-desc {
    color: #114b8d;
    font-family: ProximaNova-Light, sans-serif; }
  .article-list-secondary .article-desc {
    color: #353d47;
    font-family: ProximaNova-Light, sans-serif; }
  .article-desc a {
    color: #114B8D;
    font-family: ProximaNova-Sbold, sans-serif;
    text-decoration: underline; }

.article-img {
  margin-bottom: 5px;
  max-width: 60%; }
  .article-list-2 .article-img {
    max-width: 50%; }

.article-list-primary .article-title {
  color: #114b8d;
  font-family: ProximaNova-Bold, sans-serif;
  font-size: 30px; }
.article-list-secondary .article-title {
  color: #353d47;
  font-family: ProximaNova-Reg, sans-serif;
  font-size: 28px; }

@media (max-width: 620px) {
  .article-desc {
    font-size: 13px; }

  .article-list-primary .article-title {
    font-size: 20px; }
  .article-list-secondary .article-title {
    font-size: 18px; } }

@media (max-width: 1932px) {
	.first-pair {
		height: 70px; 	} }

@media (max-width: 1433px) {
	.first-pair {
		height: 90px; 	} }

@media (max-width: 1070px) {
	.first-pair {
		height: 110px; 	} }

@media (max-width: 867px) {
	.first-pair {
		height: 130px; 	} }

@media (max-width: 784px) {
	.first-pair {
		height: 150px; 	} }

@media (max-width: 668px) {
	.first-pair {
		height: 170px; 	} }

@media (max-width: 620px) {
	.first-pair {
		height: 40px; 	} }

@media (max-width: 452px) {
	.first-pair {
		height: 60px; 	} }

@media (max-width: 355px) {
	.first-pair {
		height: 70px; 	} }

@media (max-width: 1402px) {
	.second-pair {
		height: 65px; 	} }

@media (max-width: 973px) {
	.second-pair {
		height: 85px; 	} }

@media (max-width: 772px) {
	.second-pair {
		height: 105px; 	} }

@media (max-width: 697px) {
	.second-pair {
		height: 125px; 	} }

@media (max-width: 620px) {
	.second-pair {
		height: 25px; 	} }

@media (max-width: 620px) {
	.second-pair {
		height: 45px; 	} }

@media (min-width: 621px) {
  .article-img-porch {
    margin: 62px 0; }

  .article-list-secondary {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between; }
    .article-list-secondary .article {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin: 0;
      padding: 30px 0 10px;
      width: 48%; }
      .article-list-secondary .article:nth-child(odd) {
        clear: both;
        float: left; }
      .article-list-secondary .article:nth-child(even) {
        float: right; }
    .article-list-secondary .article-inner {
      display: block; } }
/* breadcrumb area */
#breadcrumb-bg {
  position: relative;
  width: 100%;
  height: 70px;
  white-space: nowrap;
  overflow: hidden;
  background-color: #cdcbc6;
  background-image: -moz-linear-gradient(100% 48% -180deg, #cdcbc6 0%, #ecebe7 100%);
  background-image: -webkit-gradient(linear, 100% 48%, 3% 48%, color-stop(0, #cdcbc6), color-stop(1, #ecebe7));
  background-image: -webkit-linear-gradient(-180deg, #cdcbc6 0%, #ecebe7 100%);
  background-image: -o-linear-gradient(-180deg, #cdcbc6 0%, #ecebe7 100%);
  background-image: -ms-linear-gradient(-180deg, #cdcbc6 0%, #ecebe7 100%);
  background-image: linear-gradient(right, #cdcbc6 0%, #ecebe7 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffecebe7,endColorstr=#ffcdcbc6,GradientType=1)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffecebe7,endColorstr=#ffcdcbc6,GradientType=1); }

.product-breadcrumb-bg {
  height: 100px !important; }

.location-breadcrumb-bg {
  height: 136px !important; }

.location-breadcrumb-bg .breadcrumb {
  margin-top: 0.77em; }

.product-breadcrumb-bg .breadcrumb {
  margin-top: 0.65em; }

.breadcrumb {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 980px;
  -moz-box-shadow: 0px 1px 0px #C3C3BE;
  -webkit-box-shadow: 0px 1px 0px #C3C3BE;
  box-shadow: 0px 1px 0px #C3C3BE; }

#breadcrumb-container {
  position: absolute;
  z-index: 100; }

.breadcrumb, .breadcrumb-gt {
  margin-right: 6px; }

.breadcrumb a {
  color: #fff; }

.breadcrumb-gt {
  position: relative;
  font-family: ProximaNova-Bold, sans-serif;
  width: 6px;
  display: inline-block;
  vertical-align: top;
  top: 30px; }

.no-shadow {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -box-shadow: none; }

.product-breadcrumb-bg .breadcrumb-gt {
  top: 19px; }

.breadcrumb-gt img {
  display: inline-block; }

#content-border {
  position: relative;
  top: -1px;
  width: 100%;
  -webkit-box-shadow: 0 -2px 3px 0px #BCBBB5;
  -moz-box-shadow: 0 -2px 3px 0px #BCBBB5;
  box-shadow: 0 -2px 3px 0px #BCBBB5;
  border-top: 2px solid #fff;
  z-index: 2;
  margin-bottom: 1.25em; }

.calc-bc {
  background: #7E2CA5; }

.calc-selected-bc {
  background: #A939DF; }

.color-main-bc {
  background-color: #A7D23D; }

.color-bc {
  background-color: #86C100; }

.color-inner-bc {
  background-color: #D2D1CC; }

.color-inner-bc a, .color-selected-bc a {
  color: #404040; }

.color-selected-bc {
  background-color: #EBEAE6;
  color: #404040;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none; }

.msds-bc {
  background-color: #DBD317; }

.pro-selected-bc {
  background-color: #0064C2; }

.product-bc {
  background-color: #207AB5; }

.product-selected-bc {
  background-color: #14A3FF;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none; }

.video-bc {
  background: #E28500; }

.video-selected-bc {
  background: #FFBD1A; }

@media (max-width: 980px) and (min-width: 621px) {
  .breadcrumb {
    max-width: 900px; } }
@media (max-width: 620px) {
  /* breadcrumbs */
  .breadcrumb {
    padding: 4px 6px;
    margin-top: 0.6em;
    margin-right: 2px;
    max-width: 400px; }

  .breadcrumb-gt {
    width: 5px;
    margin-right: 2px;
    top: 14px; }

  .product-breadcrumb-bg .breadcrumb-gt {
    top: 15px; }

  #breadcrumb-bg {
    height: 50px; }

  .product-breadcrumb-bg .breadcrumb {
    margin-top: 9px; }

  .location-breadcrumb-bg {
    height: 126px !important; }

  #content-border {
    margin-bottom: 10px; } }
@media (max-width: 380px) {
  .breadcrumb {
    max-width: 250px; } }
.btn,
a.btn {
  border-radius: 3px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
  color: #FFF;
  display: inline-block;
  font-size: 15px;
  padding: 12px 22px; }

.btn_row {
  text-align: center; }
  .btn_row .btn {
    margin: 1em 0 1em 1em; }
    .btn_row .btn:first-child {
      margin-left: 0; }

.btn-blue {
  background: #0064c1;
  background: -moz-linear-gradient(top, #0064c1 0%, #004484 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0064c1), color-stop(100%, #004484));
  background: -webkit-linear-gradient(top, #0064c1 0%, #004484 100%);
  background: -o-linear-gradient(top, #0064c1 0%, #004484 100%);
  background: -ms-linear-gradient(top, #0064c1 0%, #004484 100%);
  background: linear-gradient(to bottom, #0064c1 0%, #004484 100%); }

.btn-green {
  background: #94be03;
  background: -moz-linear-gradient(top, #94be03 0%, #668202 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #94be03), color-stop(100%, #668202));
  background: -webkit-linear-gradient(top, #94be03 0%, #668202 100%);
  background: -o-linear-gradient(top, #94be03 0%, #668202 100%);
  background: -ms-linear-gradient(top, #94be03 0%, #668202 100%);
  background: linear-gradient(to bottom, #94be03 0%, #668202 100%); }

.btn-grey {
  background: #989892;
  background: -moz-linear-gradient(top, #989892 0%, #686864 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #989892), color-stop(100%, #686864));
  background: -webkit-linear-gradient(top, #989892 0%, #686864 100%);
  background: -o-linear-gradient(top, #989892 0%, #686864 100%);
  background: -ms-linear-gradient(top, #989892 0%, #686864 100%);
  background: linear-gradient(to bottom, #989892 0%, #686864 100%); }

@media (min-width: 621px) {
  .btn,
  a.btn {
    font-size: 20px;
    padding: 14px 28px; } }
/* calculator */
.calc .nav-text {
  position: relative;
  top: 15px;
  font-family: ProximaNova-Bold, sans-serif;
  font-size: 20px;
  margin-left: 0.75em; }

@media (max-width: 620px) {
  .calc .nav-text {
    top: 9px;
    font-size: 17px; } }
/* color chip */
.color-chip {
  margin: 0 auto;
  max-width: 728px; }

.color-chip img {
  -moz-box-shadow: 0 3px 3px #C3C3BE;
  -webkit-box-shadow: 0 3px 3px #C3C3BE;
  box-shadow: 0 3px 3px #C3C3BE;
  border: 1px solid #C3C3BE; }

/* color pages */
#color-collections {
  color: #4C4C4C;
  float: right;
  position: relative;
  margin: 0 0 1.3em;
  right: 19px;
  font-size: 15px; }

#colorwall {
  position: relative;
  background-color: #ecebe7;
  text-align: left;
  margin-left: 2.5390625%;
  z-index: 2; }

.block-of-blocks {
  float: left;
  width: 17.4609375%;
  padding: 0;
  margin-right: 2.5390625%;
  margin-bottom: 2.5390625%; }

.group-name {
  width: 100%;
  max-width: 221px;
  text-align: center;
  padding: 0.2em 0 0.4em;
  border-left: 1px solid #ECEBE7;
  background-color: #DCDEDB;
  background-image: linear-gradient(right top, #dcdedb 7%, #ebeae7 100%);
  background-image: -o-linear-gradient(right top, #dcdedb 7%, #ebeae7 100%);
  background-image: -moz-linear-gradient(right top, #dcdedb 7%, #ebeae7 100%);
  background-image: -webkit-linear-gradient(right top, #dcdedb 7%, #ebeae7 100%);
  background-image: -ms-linear-gradient(right top, #dcdedb 7%, #ebeae7 100%);
  background-image: -webkit-gradient(linear, right top, left 10, color-stop(0.07, #dcdedb), color-stop(1, #ebeae7));
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffecebe7,endColorstr=#ffdcdedb)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffecebe7,endColorstr=#ffdcdedb);
  -moz-box-shadow: 1px 0px 0px #DCDEDB;
  -webkit-box-shadow: 1px 0px 0px #DCDEDB;
  box-shadow: 1px 0px 0px #DCDEDB;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.group-name a {
  color: #9d8f6d;
  font-family: ProximaNova-Bold, sans-serif;
  font-size: 17px; }

.group-img {
  width: 100%; }

.group-img img {
  border: 2px solid #fff;
  max-width: 98.5%; }

/* color list */
.color-focus {
  width: 100%;
  background: -moz-linear-gradient(251deg, #dcdedb 0%, #ecebe7 72%);
  background: -webkit-linear-gradient(251deg, #dcdedb 0%, #ecebe7 72%);
  background: -o-linear-gradient(251deg, #dcdedb 0%, #ecebe7 72%);
  background: -ms-linear-gradient(251deg, #dcdedb 0%, #ecebe7 72%);
  background: linear-gradient(-161deg, #dcdedb 0%, #ecebe7 72%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffdcdedb,endColorstr=#ffecebe7)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffdcdedb,endColorstr=#ffecebe7); }

.color-image, .color-description, .color-focus {
  float: left; }

.color-image {
  width: 30.405405405405%;
  max-width: 221px;
  line-height: 0; }

.color-description {
  width: 69.594594594595%;
  padding: 1.1em 0; }

.color-name {
  display: inline-block;
  margin-top: 5px;
  font-family: ProximaNova-Bold, sans-serif;
  font-size: 20px; }

.color-number {
  position: relative;
  top: -2px;
  font-size: 15px; }

.color-detail-data {
  margin-bottom: 1em;
  line-height: 140%; }

.detail-button {
  display: block;
  width: 156px;
  height: 30px;
  font-family: ProximaNova-Bold, sans-serif;
  border: 1px solid #aaaaaa;
  color: #4c4c4c;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -border-radius: 4px;
  margin: 0.6em 0;
  padding: 0 0.75em;
  line-height: 30px;
  background-image: url("/images/detail-button-bg.png");
  background-position: right;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffeeeeee,endColorstr=#fff7f7f7,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffeeeeee,endColorstr=#fff7f7f7,GradientType=0); }

.download-button {
  width: 216px;
  text-align: left;
  margin: 0 auto; }

h2.color-name {
  color: #333333;
  font-size: 22px;
  margin-top: -0.1em;
  margin-bottom: 0.3em; }

@media (max-width: 980px) and (min-width: 621px) {
  #colorwall {
    margin-left: 2.604166666667%; }

  .block-of-blocks {
    width: 22.395833333333%;
    margin-right: 2.604166666667%; } }
@media (max-width: 620px) {
  /* color pages */
  h2.color-name {
    font-size: 17px;
    margin-bottom: 0.1em; }

  .color-description {
    font-size: 14px; }

  .color-detail-data {
    margin-bottom: 0.5em;
    line-height: 120%; }

  .color-name {
    margin-top: 1px;
    font-size: 18px; }

  .color-number {
    position: relative;
    top: -2px;
    font-size: 12px; }

  #color-collections {
    font-size: 13px;
    right: 9px; }

  #colorwall {
    margin-left: 2.8125%; }

  .group-name a {
    font-size: 15px; }

  .block-of-blocks {
    width: 30.5208333%;
    margin-right: 2.8125%;
    margin-bottom: 2.8125%; }

  .color-description {
    padding: 0.5em 0; }

  .detail-button {
    background-image: url("/images/detail-button-bg-small.png");
    height: 22px;
    width: 120px;
    margin-top: 0.3em;
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 22px; }

  .download-button {
    width: 170px; } }
@media (max-width: 380px) {
  .block-of-blocks {
    width: 47.1875%; }

  .color-image {
    width: 48%; }

  .color-description {
    position: relative;
    width: 52%;
    padding-bottom: 0;
    margin-bottom: 0; }

  .color-description p {
    margin-bottom: 0; }

  li .color-name {
    width: 180px;
    height: 1.3em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }

  li .color-name:hover {
    overflow: visible;
    text-overflow: inherit; }

  #color-collections-container {
    margin: 0 9px; }

  select#color-collections {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100%;
    float: none;
    margin: 0 0 12px;
    left: 0;
    top: 0;
    padding: 4px 9px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px; } }
.content-list {
  list-style: none;
  padding: 0; }

.content-list li {
  height: 54px;
  margin-bottom: 9px;
  background-image: -moz-linear-gradient(right, #dcdedb 10%, white 90%);
  background-image: -webkit-gradient(linear, right top, left top, color-stop(0.1, #dcdedb), color-stop(0.9, white));
  background-image: -webkit-linear-gradient(right, #dcdedb 10%, white 90%);
  background-image: -o-linear-gradient(right, #dcdedb 10%, white 90%);
  background-image: -ms-linear-gradient(right, #dcdedb 10%, white 90%);
  background-image: linear-gradient(right, #dcdedb 10%, white 90%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(endColorstr=#ffffffff,startColorstr=#ffdcdedb)";
  filter: progid:DXImageTransform.Microsoft.gradient(endColorstr=#ffffffff,startColorstr=#ffdcdedb); }

.content-list li .color-block {
  float: left;
  width: 52px;
  height: 52px;
  margin: 1px 10px 0 1px; }

.content-list li a, a.detail-button {
  color: #323232; }

.content-list .nav-block {
  width: 54px;
  height: 54px; }

@media (max-width: 620px) {
  /* content lists */
  .content-list li {
    height: 41px;
    /* font-size: 0.9em; */
    margin-bottom: 5px; }

  .content-list li .color-block {
    width: 41px;
    height: 41px;
    margin: 0 10px 0 0; }

  .content-list .nav-block {
    width: 41px;
    height: 41px; } }
.diy-toggle {
  position: absolute;
  left: 100%;
  top: 10px;
  margin-left: -127px;
  background-color: #292c30;
  width: 108px;
  height: 34px;
  line-height: 35px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -moz-box-shadow: inset 0px 3px 4px rgba(0, 0, 0, 0.65);
  -webkit-box-shadow: inset 0px 3px 4px rgba(0, 0, 0, 0.65);
  box-shadow: inset 0px 3px 4px rgba(0, 0, 0, 0.65);
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  font-family: ProximaNova-Bold, sans-serif;
  font-size: 19px; }

.diy-knob {
  position: relative;
  top: 1px;
  left: 1px;
  background-color: #968e64;
  background-image: -moz-linear-gradient(47% 98% 90deg, #968e64 0%, #d7c4a2 100%);
  background-image: -webkit-gradient(linear, 47% 98%, 47% 3%, color-stop(0, #968e64), color-stop(1, #d7c4a2));
  background-image: -webkit-linear-gradient(90deg, #968e64 0%, #d7c4a2 100%);
  background-image: -o-linear-gradient(90deg, #968e64 0%, #d7c4a2 100%);
  background-image: -ms-linear-gradient(90deg, #968e64 0%, #d7c4a2 100%);
  background-image: linear-gradient(bottom, #968e64 0%, #d7c4a2 100%);
  width: 54px;
  height: 32px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  text-align: center;
  color: white;
  float: left;
  padding: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffd7c4a2,endColorstr=#ff968e64,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffd7c4a2,endColorstr=#ff968e64,GradientType=0); }

#masthead .diy-right {
  left: -1px;
  background-color: #6ac53e;
  background-image: -moz-linear-gradient(47% 98% 90deg, #6ac53e 0%, #cdeb89 100%);
  background-image: -webkit-gradient(linear, 47% 98%, 47% 3%, color-stop(0, #6ac53e), color-stop(1, #cdeb89));
  background-image: -webkit-linear-gradient(90deg, #6ac53e 0%, #cdeb89 100%);
  background-image: -o-linear-gradient(90deg, #6ac53e 0%, #cdeb89 100%);
  background-image: -ms-linear-gradient(90deg, #6ac53e 0%, #cdeb89 100%);
  background-image: linear-gradient(bottom, #6ac53e 0%, #cdeb89 100%);
  color: #181a1c; }

.diy-off {
  position: relative;
  top: 1px;
  color: #5f5f5f !important;
  text-align: center;
  background-color: transparent !important;
  background-image: none !important;
  float: left;
  width: 54px;
  height: 32px; }

@media (max-width: 620px) {
  .diy-toggle {
    width: 80px;
    margin-left: -90px;
    height: 27px;
    top: 6px;
    font-size: 13px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; }

  .diy-knob, .diy-knob-right, .diy-off {
    line-height: 200%;
    height: 25px;
    width: 40px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px; } }
/* drawers */
.content-drawer, .form-drawer {
  position: relative;
  margin-bottom: 5px;
  -moz-box-shadow: 0 1px 1px #C3C3BE;
  -webkit-box-shadow: 0 1px 1px #C3C3BE;
  box-shadow: 0 1px 1px #C3C3BE; }

.content-drawer ul {
  margin: 0;
  padding: 0; }

.drawer-heading {
  cursor: pointer;
  padding: 1em;
  font-family: ProximaNova-Bold, sans-serif;
  border: 2px solid #FFF;
  font-size: 20px;
  background-color: #DCDED8;
  background-image: -moz-linear-gradient(right, #dcdedb 0%, white 100%);
  background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #dcdedb), color-stop(1, white));
  background-image: -webkit-linear-gradient(right, #dcdedb 0%, white 100%);
  background-image: -o-linear-gradient(right, #dcdedb 0%, white 100%);
  background-image: -ms-linear-gradient(right, #dcdedb 0%, white 100%);
  background-image: linear-gradient(right, #dcdedb 0%, white 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff,endColorstr=#ffdcdedb)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff,endColorstr=#ffdcdedb); }

.drawer-indicator {
  background: transparent;
  display: block;
  float: right;
  margin-top: 3px; }

.drawer-detail {
  background-color: white;
  position: relative;
  display: none;
  padding: 1em; }

.drawer-detail p, .drawer-detail ul {
  margin: 0 0 1em;
  padding: 0; }

.drawer-detail li {
  margin-bottom: 0.2em; }

@media (max-width: 620px) {
  .drawer-heading {
    font-size: 17px; } }
.img-shadow-lg,
.img-shadow-sm {
  box-sizing: border-box; }

.img-shadow-lg {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
  border: 4px solid #FFF; }

.img-shadow-sm {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
  border: 1px solid #FFF; }

.landing {
  text-align: center; }
  .landing.landing-pro {
    background-image: url(/images/pro-page-bg.jpg);
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: 100%; }
  #content-border + .landing {
    margin-top: -20px; }

.landing-head {
  margin-bottom: 20px;
  text-align: center; }

.landing-head-desc {
  color: #121519;
  display: block;
  font-size: 28px; }

.landing-pro .landing-head-logo {
  display: block;
  padding: 14px 0 4px; }

.landing-subhead {
  color: #353D47;
  font-family: ProximaNova-Sbold, sans-serif;
  font-size: 28px;
  margin: 20px 0;
  text-align: center; }
  .landing-subhead.landing-subhead-shadow {
    font-size: 30px; }

.landing-subhead-shadow {
  position: relative; }
  .landing-subhead-shadow .landing-subhead-inner {
    background-color: #ecebe7;
    /* Old browsers */
    background-image: -moz-linear-gradient(left, rgba(190, 191, 191, 0) 0%, rgba(190, 191, 191, 0.8) 50%, rgba(190, 191, 191, 0) 100%);
    /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(190, 191, 191, 0)), color-stop(50%, rgba(190, 191, 191, 0.8)), color-stop(100%, rgba(190, 191, 191, 0)));
    /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(left, rgba(190, 191, 191, 0) 0%, rgba(190, 191, 191, 0.8) 50%, rgba(190, 191, 191, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background-image: -o-linear-gradient(left, rgba(190, 191, 191, 0) 0%, rgba(190, 191, 191, 0.8) 50%, rgba(190, 191, 191, 0) 100%);
    /* Opera 11.10+ */
    background-image: -ms-linear-gradient(left, rgba(190, 191, 191, 0) 0%, rgba(190, 191, 191, 0.8) 50%, rgba(190, 191, 191, 0) 100%);
    /* IE10+ */
    background-image: linear-gradient(to right, rgba(190, 191, 191, 0) 0%, rgba(190, 191, 191, 0.8) 50%, rgba(190, 191, 191, 0) 100%);
    /* W3C */
    display: block;
    padding: 14px;
    position: relative;
    z-index: 1; }
  .landing-subhead-shadow:before {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid #B4B3B0;
    border-top: 1px solid #BAB9B6;
    border-radius: 100px / 3px;
    content: "";
    position: absolute;
    top: -1px;
    right: 10px;
    bottom: -1px;
    left: 10px;
    z-index: 0; }

@media (max-width: 620px) {
  .landing.landing-pro {
    background-size: 150%; }
  #content-border + .landing {
    margin-top: -10px; }

  .landing-head-desc {
    font-size: 20px; }

  .landing-subhead {
    font-size: 19px; }
    .landing-subhead.landing-subhead-shadow {
      font-size: 20px; } }
/* locations */
#zip {
  text-align: left;
  width: 10.5em;
  padding-left: 0.5em; }

#location-form {
  margin-top: -0.4em;
  position: relative; }

.location-list .drawer-heading a {
  color: #333333; }

.location-list .drawer-heading {
  padding: 2px 0 0 0.67em;
  height: 40px;
  line-height: 200%; }

.results {
  position: absolute;
  top: 107px; }

#map {
  height: 500px;
  width: 100%;
  clear: both;
  position: relative;
  z-index: 10; }

#map img {
  max-width: 1280px; }

#map div {
  width: auto;
  font-size: 0.99em; }

#map div h4 {
  margin: 0; }

.location-list .drawer-detail {
  display: block;
  padding-top: 3px; }

.distance {
  font-family: ProximaNova-Bold, sans-serif;
  margin-bottom: 0.75em; }

.location {
  display: block; }

.contact-info {
  color: #0066FF; }

#stores {
  display: none; }

#map-toggle {
  display: inline-block;
  background-color: #ecebe7;
  width: 172px;
  height: 26px;
  border-color: #cccbc3;
  border-width: 1px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  border-style: solid;
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  margin-bottom: 0.7em; }

.map-toggle-on, .map-toggle-off {
  width: 85px;
  height: 22px;
  text-align: center;
  display: inline-block;
  padding-top: 3px; }

.map-toggle-on {
  background-color: white;
  border: 1px solid #aaaaaa;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  font-family: ProximaNova-Bold, sans-serif; }

a.map-toggle-on, a.map-toggle-off {
  color: #333333; }

label.overlabel {
  position: absolute;
  color: #ccc; }

label.overlabel-apply {
  position: absolute;
  top: 7px;
  left: 12px;
  z-index: 1;
  color: #999;
  cursor: text; }

@media (max-width: 620px) {
  #map {
    height: 305px; }

  .map-toggle-on, .map-toggle-off {
    height: 21px;
    padding-top: 4px; }

  .results {
    top: 99px; } }
/* msds */
.search-button {
  position: relative;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  margin-left: -35px;
  display: inline-block;
  vertical-align: top;
  top: 2px;
  z-index: 100; }

input[type="text"], input[type="number"], input[type="email"], textarea {
  display: inline-block;
  border-radius: 4px;
  border-color: #cccbc3;
  font-size: 17px;
  border-width: 1px; }

#upc, #zip {
  height: 28px;
  width: 12em;
  text-align: center;
  padding: 1px;
  margin: 0; }

/* nav menu items */
.nav-item {
  position: relative;
  background-color: #DCDED8;
  background-image: -moz-linear-gradient(left, #dcdedb 0%, white 100%);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #dcdedb), color-stop(1, white));
  background-image: -webkit-linear-gradient(left, #dcdedb 0%, white 100%);
  background-image: -o-linear-gradient(left, #dcdedb 0%, white 100%);
  background-image: -ms-linear-gradient(left, #dcdedb 0%, white 100%);
  background-image: linear-gradient(left, #dcdedb 0%, white 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffdcdedb,endColorstr=#ffffffff)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffdcdedb,endColorstr=#ffffffff);
  border: 2px solid #FFF;
  -moz-box-shadow: 0 1px 1px #C3C3BE;
  -webkit-box-shadow: 0 1px 1px #C3C3BE;
  box-shadow: 0 1px 1px #C3C3BE;
  cursor: pointer; }

.greenBackground {
  background: #86C100; }

.nav-text {
  color: #333333; }

/* blocks with arrows in navigation */
.nav-block {
  background: transparent;
  display: block;
  position: absolute;
  top: 0;
  right: 0; }

.home-block {
  background-color: #ADAB9F;
  background-image: -moz-linear-gradient(80% 95% 138deg, #adab9f 0%, #cfcfca 100%);
  background-image: -webkit-gradient(linear, 80% 95%, 10% 25%, color-stop(0, #adab9f), color-stop(1, #cfcfca));
  background-image: -webkit-linear-gradient(138deg, #adab9f 0%, #cfcfca 100%);
  background-image: -o-linear-gradient(138deg, #adab9f 0%, #cfcfca 100%);
  background-image: -ms-linear-gradient(138deg, #adab9f 0%, #cfcfca 100%);
  background-image: linear-gradient(138deg, #cfcfca 0%, #adab9f 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcfcfca,endColorstr=#ffadab9f,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcfcfca,endColorstr=#ffadab9f,GradientType=0); }

.explore-color-block {
  background-color: #86c100;
  background-image: -moz-linear-gradient(12% 93% 132deg, #86c100 0%, #a8d23e 100%);
  background-image: -webkit-gradient(linear, 12% 93%, 86% 9%, color-stop(0, #86c100), color-stop(1, #a8d23e));
  background-image: -webkit-linear-gradient(132deg, #86c100 0%, #a8d23e 100%);
  background-image: -o-linear-gradient(132deg, #86c100 0%, #a8d23e 100%);
  background-image: -ms-linear-gradient(132deg, #86c100 0%, #a8d23e 100%);
  background-image: linear-gradient(132deg, #a8d23e 0%, #86c100 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffa8d23e,endColorstr=#ff86c100,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffa8d23e,endColorstr=#ff86c100,GradientType=0); }

.browse-products-block {
  background-color: #207AB5;
  background-image: -moz-linear-gradient(20% 95% 135deg, #207ab5 0%, #14a3ff 100%);
  background-image: -webkit-gradient(linear, 20% 95%, 90% 25%, color-stop(0, #207ab5), color-stop(1, #14a3ff));
  background-image: -webkit-linear-gradient(135deg, #207ab5 0%, #14a3ff 100%);
  background-image: -o-linear-gradient(135deg, #207ab5 0%, #14a3ff 100%);
  background-image: -ms-linear-gradient(135deg, #207ab5 0%, #14a3ff 100%);
  background-image: linear-gradient(135deg, #14a3ff 0%, #207ab5 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff14a3ff,endColorstr=#ff207ab5,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff14a3ff,endColorstr=#ff207ab5,GradientType=0); }

.paint-calculator-block {
  background-color: #7E2CA5;
  background-image: -moz-linear-gradient(20% 95% 135deg, #7e2ca5 0%, #a939df 100%);
  background-image: -webkit-gradient(linear, 20% 95%, 90% 25%, color-stop(0, #7e2ca5), color-stop(1, #a939df));
  background-image: -webkit-linear-gradient(135deg, #7e2ca5 0%, #a939df 100%);
  background-image: -o-linear-gradient(135deg, #7e2ca5 0%, #a939df 100%);
  background-image: -ms-linear-gradient(135deg, #7e2ca5 0%, #a939df 100%);
  background-image: linear-gradient(135deg, #a939df, 0%, #7e2ca5 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffa939df,endColorstr=#ff7e2ca5,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffa939df,endColorstr=#ff7e2ca5,GradientType=0); }

.how-to-block,
.pro-block {
  background-color: #E28500;
  background-image: -moz-linear-gradient(20% 95% 135deg, #e28500 0%, #ffbd1a 100%);
  background-image: -webkit-gradient(linear, 20% 95%, 90% 25%, color-stop(0, #e28500), color-stop(1, #ffbd1a));
  background-image: -webkit-linear-gradient(135deg, #e28500 0%, #ffbd1a 100%);
  background-image: -o-linear-gradient(135deg, #e28500 0%, #ffbd1a 100%);
  background-image: -ms-linear-gradient(135deg, #e28500 0%, #ffbd1a 100%);
  background-image: linear-gradient(135deg, #ffbd1a 0%, #e28500 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffbd1a,endColorstr=#ffe28500,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffbd1a,endColorstr=#ffe28500,GradientType=0); }

.retailer-block {
  background-color: #A99B68;
  background-image: -moz-linear-gradient(20% 95% 135deg, #a99b68 0%, #c1b59c 100%);
  background-image: -webkit-gradient(linear, 20% 95%, 90% 25%, color-stop(0, #a99b68), color-stop(1, #c1b59c));
  background-image: -webkit-linear-gradient(135deg, #a99b68 0%, #c1b59c 100%);
  background-image: -o-linear-gradient(135deg, #a99b68 0%, #c1b59c 100%);
  background-image: -ms-linear-gradient(135deg, #a99b68 0%, #c1b59c 100%);
  background-image: linear-gradient(135deg, #c1b59c 0%, #a99b68 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffc1b59c,endColorstr=#ffa99b68,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffc1b59c,endColorstr=#ffa99b68,GradientType=0); }

.color-trends-block {
  background-color: #787878;
  background-image: -moz-linear-gradient(20% 95% 135deg, #878787 0%, #737373 100%);
  background-image: -webkit-gradient(linear, 20% 95%, 90% 25%, color-stop(0, #878787), color-stop(1, #737373));
  background-image: -webkit-linear-gradient(135deg, #878787 0%, #737373 100%);
  background-image: -o-linear-gradient(135deg, #878787 0%, #737373 100%);
  background-image: -ms-linear-gradient(135deg, #878787 0%, #737373 100%);
  background-image: linear-gradient(135deg, #878787 0%, #737373 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#787878,endColorstr=#737373,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#787878,endColorstr=#737373,GradientType=0); }

.msds-block {
  background-color: #ece900;
  background-image: -moz-linear-gradient(16% 96% -50deg, #ece900 0%, #c3b53e 100%);
  background-image: -webkit-gradient(linear, 16% 96%, 92% 6%, color-stop(0, #ece900), color-stop(1, #c3b53e));
  background-image: -webkit-linear-gradient(-50deg, #ece900 0%, #c3b53e 100%);
  background-image: -o-linear-gradient(-50deg, #ece900 0%, #c3b53e 100%);
  background-image: -ms-linear-gradient(-50deg, #ece900 0%, #c3b53e 100%);
  background-image: linear-gradient(-50deg, #c3b53e 0%, #ece900 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffece900,endColorstr=#ffc3b53e,GradientType=1)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffece900,endColorstr=#ffc3b53e,GradientType=1); }

.nav-image-container {
  display: none; }

.nav-image {
  display: none; }

.nav-no-image {
  margin-bottom: 1px; }

/* slide-out menu */
#nav-menu #home-navigation {
  width: 100%;
  float: none;
  top: 0;
  margin: 0 0 22px;
  padding: 0; }

#nav-menu .nav-item {
  width: 206px;
  margin: 0 0 5px;
  padding: 0 0 0 5px;
  float: none;
  height: 32px;
  line-height: 32px;
  -moz-box-shadow: 0 1px 1px #94948F;
  -webkit-box-shadow: 0 1px 1px #94948F;
  box-shadow: 0 1px 1px #94948F; }

#nav-menu .nav-text {
  font: 17px/32px ProximaNova-Bold, sans-serif; }

#nav-menu .nav-item .nav-block {
  width: 32px;
  height: 32px; }

#nav-menu .diy-toggle {
  width: 106px;
  height: 33px;
  background-color: transparent;
  border: 1px solid #cccbc3;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  position: relative;
  top: 0;
  left: 0;
  margin: 1.5em 0 0 0;
  font-family: ProximaNova-Sbold, sans-serif; }

#nav-menu .diy-knob {
  background-color: #9A8C6B;
  background-image: none;
  border: 0;
  top: 0;
  left: 0;
  width: 50%; }

#nav-menu .diy-off {
  width: 50%;
  color: #5f5f5f;
  top: 0; }

@media (max-width: 620px) {
  #nav-menu {
    -webkit-box-shadow: inset -3px 0px 5px #8d8e8d;
    -moz-box-shadow: inset -3px 0px 5px #8d8e8d;
    box-shadow: inset -3px 0px 5px #8d8e8d; }

  #nav-menu .diy-toggle {
    width: 80px;
    height: 25px;
    margin-left: 0;
    top: 0;
    font-size: 13px; }

  #nav-menu .copyright {
    font-size: 12px;
    width: 170px; }

  #nav-menu .footer-nav {
    font-size: 15px; } }
/* palette menus */
/* palette diagrams */
#palette-selector {
  list-style: none;
  padding: 0;
  margin-top: 0.5em; }

.palette-diagram, .palette-diagram-container, .main-color, .sub-color {
  display: inline-block; }

.palette-diagram {
  position: relative;
  border: 9px solid #DCDEDB;
  width: 126px;
  margin-right: 17px;
  margin-bottom: 1em;
  line-height: 0; }

.palette-diagram .selected-palette-arrow {
  display: none; }

.palette-diagram-container {
  width: 96.850393700787%;
  border: 2px solid white; }

.main-color {
  width: 100%;
  height: 73px; }

.sub-color {
  width: 40px;
  height: 41px;
  border-top: 1px solid white;
  border-right: 1px solid white; }

.palette-diagram .last-palette-color {
  border-right: 0; }

.selected-palette {
  border-color: #C1BEB8;
  width: 125px; }

.selected-palette .palette-diagram-container {
  border: 0;
  width: 100%; }

.selected-palette .main-color {
  height: 75px; }

.selected-palette .sub-color {
  width: 41px;
  height: 42px; }

.selected-palette .selected-palette-arrow {
  display: inline-block;
  position: absolute;
  width: 100%;
  top: 100%;
  margin-top: 9px;
  height: 12px;
  background-image: url("/images/selected-palette-arrow.png");
  background-position: center;
  background-repeat: no-repeat; }

#palette-list-container {
  position: relative; }

.palette-unselected {
  position: absolute;
  top: 0;
  display: none; }

@media (max-width: 620px) {
  /* palettes */
  .palette-diagram {
    border-width: 6px;
    width: 74px;
    margin-right: 10px;
    margin-bottom: 0.3em; }

  .palette-diagram-container {
    width: 97.142857142857%;
    border-width: 1px; }

  .main-color {
    height: 41px; }

  .sub-color {
    height: 24px;
    width: 23px; }

  .selected-palette {
    top: 1px;
    width: 71px; }

  .selected-palette .main-color {
    height: 42px; }

  .selected-palette .sub-color {
    height: 25px;
    width: 23px; }

  .selected-palette .selected-palette-arrow {
    margin-top: 2px;
    height: 12px; } }
/* products */
.product-list .nav-item {
  height: 80px; }

.product-nav-img {
  width: 80px;
  height: 75px;
  max-width: 100px;
  max-height: 80px;
  display: inline-block;
  overflow: hidden;
  padding: 5px 10px 0;
  background-color: #DBD8CF;
  background-image: -moz-linear-gradient(5% 92% 59deg, #c8c6c1 0%, #dbd8d0 100%);
  background-image: -webkit-gradient(linear, 5% 92%, 35% 28%, color-stop(0, #c8c6c1), color-stop(1, #dbd8d0));
  background-image: -webkit-linear-gradient(59deg, #c8c6c1 0%, #dbd8d0 100%);
  background-image: -o-linear-gradient(59deg, #c8c6c1 0%, #dbd8d0 100%);
  background-image: -ms-linear-gradient(59deg, #c8c6c1 0%, #dbd8d0 100%);
  background-image: linear-gradient(59deg, #c8c6c1 0%, #dbd8d0 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffc8c6c1,endColorstr=#ffdbd8d0,GradientType=1)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffc8c6c1,endColorstr=#ffdbd8d0,GradientType=1); }

.product-list .nav-text {
  position: absolute;
  font-family: ProximaNova-Bold, sans-serif;
  font-size: 20px;
  margin-left: 0.75em;
  margin-right: 3em; }

.product-list .nav-text:hover {
  overflow: visible; }

.product-list .nav-block {
  top: 13px; }

h2.product-name {
  margin: -0.5em 0 1em; }

#product-image {
  width: 36%;
  max-width: 170px;
  float: left;
  margin-right: 5%;
  margin-bottom: 1em;
  text-align: center; }

#product-image .detail-button {
  background-image: url("/images/product-button-bg.png");
  width: auto;
  font-family: ProximaNova-Sbold, sans-serif; }

#quick-facts {
  margin: 0;
  padding-left: 5%;
  list-style-image: url("/images/tablet-bullet.png");
  float: left;
  width: 54%;
  margin-bottom: 1em; }

@media (max-width: 620px) {
  .product-list .nav-text {
    width: 290px;
    font-size: 17px; }

  h2.product-name {
    margin-top: -4px; }

  #product-image, #quick-facts {
    font-size: 0.8em; }

  #quick-facts {
    list-style-image: url("/images/phone-bullet.png"); }

  .product-breadcrumb-bg {
    height: 80px !important; }

  #product-image .detail-button {
    font-size: 13px;
    padding: 4px 0;
    height: auto;
    line-height: 100%; }

  .product-list .nav-block {
    top: 19px; } }
@media (max-width: 380px) {
  .product-breadcrumb-bg {
    height: 50px !important;
    top: 0; }

  .product-breadcrumb-bg .breadcrumb {
    margin-top: 0.6em; }

  .product-list .nav-text {
    width: 140px; }

  .product-list .long-text {
    font-size: 15px; } }
select#retailers-select {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 100%;
  font-size: 13px;
  color: #4C4C4C;
  padding: 4px 9px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px; }

#retailers-select-container {
  display: none; }

#retailers {
  position: relative;
  list-style: none;
  float: right;
  margin: 0;
  padding: 0 20px 0 0;
  width: 100%;
  margin-top: -40px;
  right: 10px; }

#retailers li {
  position: relative;
  display: inline-block;
  padding: 0 10px;
  float: right;
  height: 36px;
  margin-right: 9px;
  text-align: center;
  line-height: 200%;
  background: #ECEBE7;
  border: 2px solid #ECEBE7;
  border-bottom: none;
  z-index: 0;
  top: 3px; }

#retailers li:first-child {
  margin: 0; }

#retailers li.selected {
  background-color: white;
  background-image: -moz-linear-gradient(white 0%, #ecebe7 100%);
  background-image: -webkit-gradient(linear, color-stop(0, white), color-stop(1, #ecebe7));
  background-image: -webkit-linear-gradient(white 0%, #ecebe7 100%);
  background-image: -o-linear-gradient(#ecebe7 0%, white 100%);
  background-image: -ms-linear-gradient(#ecebe7 0%, white 100%);
  background-image: linear-gradient(bottom #ecebe7 0%, white 100%);
  border: 2px solid #fff;
  border-bottom: none;
  z-index: 200;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff,endColorstr=#ffecebe7)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff,endColorstr=#ffecebe7); }

#retailers li a {
  font-family: ProximaNova-Bold, sans-serif; }

#retailers li a {
  color: #4C4C4C; }

@media (max-width: 620px) {
  /* retailers */
  #retailers {
    padding-right: 9px;
    margin-top: -35px; }

  #retailers li {
    height: 31px;
    font-size: 13px;
    margin-right: 9px;
    padding: 0 7px; } }
@media (max-width: 380px) {
  #retailers-select-container {
    display: block;
    /* margin-top: 0px; */
    margin-bottom: 9px; }

  #retailers {
    display: none; } }
/* search area */
#search-toggle {
  position: absolute;
  top: 10px;
  left: 67px;
  width: 35px;
  height: 35px; }

#search-area {
  display: none;
  padding: 0.5em 0;
  background: #CDCBC6;
  border-bottom: 10px solid #CDCBC6; }

#search-string {
  height: 28px;
  padding: 1px 10px;
  width: 277px;
  border: none; }

#search-select {
  position: relative;
  display: inline-block;
  border: 1px solid #cccbc3;
  height: 30px;
  width: 295px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.3);
  background: #ECEBE7;
  margin-top: 0.5em; }

#search-select div {
  position: relative;
  display: inline-block;
  height: 29px;
  text-align: center;
  padding: 0 20px;
  width: 106px;
  line-height: 30px;
  font-family: ProximaNova-Bold, sans-serif; }

div.search-toggle-on {
  left: -1px;
  background: white;
  border: 1px solid #cccbc3;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px; }

div.search-product {
  left: 1px; }

div.search-toggle-off {
  background: transparent;
  border: 0;
  left: 0; }

/* end search */
@media (max-width: 620px) {
  #search-select {
    height: 29px; }

  #search-select div {
    height: 28px;
    line-height: 28px; }

  #search-toggle {
    top: 6px;
    left: 45px;
    width: 28px;
    height: 28px; } }
#share-container {
  text-align: center;
  height: 36px;
  margin: 1.3em 0 1em; }

#share-word {
  position: relative;
  display: inline-block;
  font-family: ProximaNova-Sbold, sans-serif;
  font-size: 18px;
  color: #9D8F6D;
  top: -9px;
  margin-right: 1em; }

#share-images {
  position: relative;
  display: inline-block;
  width: 173px;
  height: 36px; }

#share-images a {
  position: absolute;
  top: 0;
  display: inline-block;
  width: 20%;
  height: 36px; }

.share-email {
  left: 0; }

.share-facebook {
  left: 20%; }

.share-twitter {
  left: 40%; }

.share-pinterest {
  left: 60%; }

.share-gplus {
  left: 80%; }

.social-icons {
  position: relative;
  max-width: 137px;
  min-width: 112px; }

.social-icons a {
  position: absolute;
  top: 0;
  display: inline-block;
  width: 25%;
  height: 30px; }

.valspar-facebook {
  left: 0; }

.valspar-twitter {
  left: 25%; }

.valspar-youtube {
  left: 50%; }

.valspar-pinterest {
  left: 75%; }

@media (max-width: 620px) {
  .social-icons a {
    height: 25px; } }
div#privacyPolicyDiv,
div#termsOfUseDiv {
  margin-left: 20px; }

div#privacyPolicyDiv h1,
div#termsOfUseDiv h1 {
  margin-left: -20px; }

div#privacyPolicyDiv p,
div#termsOfUseDiv p {
  color: #3F3F3F;
  font-family: ProximaNova-Reg, "Myriad Pro", "Gill Sans", "Gill Sans MT", Calibri, sans-serif; }

div#privacyPolicyDiv p strong,
div#termsOfUseDiv p strong {
  color: #9D8F6D;
  font-family: ProximaNova-Bold,sans-serif;
  font-size: 21px;
  margin: 0; }

/* videos */
/*  PRO Update (start) */
.article-form {
	padding:22px 0;
	display:block;
	padding:20px 0;
}
.article-form p {
	padding-left:1em;
	padding-right:1em;
}
.article-form h2 {
	font-family: 'ProximaNova-Regular', Helvetica, Arial, sans-serif;
	font-size: 2em;
	text-align: center;
	color: #353d48;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
	line-height:1.1em;
	padding:14px;
}
.article-form input {
	padding: 7px 10px;
	border-radius: 4px;
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
	border: 2px solid #fff;
}
.article-form .row {
	margin-bottom:1em;
}
.article-form a.btn {
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 24%, #cccccc 96%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(24%,#ffffff), color-stop(96%,#cccccc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 24%,#cccccc 96%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 24%,#cccccc 96%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 24%,#cccccc 96%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 24%,#cccccc 96%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
	color: #000;

}
.article-form button.btn {
	border-radius: 3px;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
	background-color: #ecebe7;
	color: #000;
	display: inline-block;
	font-size: 15px;
	padding: 12px 22px;
	background-image: linear-gradient(to right, rgba(190, 191, 191, 0) 0%, rgba(190, 191, 191, 0.8) 30%, rgba(190, 191, 191, 0) 100%);
}

.article-form input {
	font-family: 'ProximaNova-Regular', Helvetica, Arial, sans-serif;
	font-size: 18px;
	margin: 0 0.4em;
}
.gradient {
	background: #7fa303; /* Old browsers */
	background: -moz-linear-gradient(left,  #7fa303 15%, #95bf03 50%, #7fa303 85%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(15%,#7fa303), color-stop(50%,#95bf03), color-stop(85%,#7fa303)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #7fa303 15%,#95bf03 50%,#7fa303 85%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #7fa303 15%,#95bf03 50%,#7fa303 85%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #7fa303 15%,#95bf03 50%,#7fa303 85%); /* IE10+ */
	background: linear-gradient(to right,  #7fa303 15%,#95bf03 50%,#7fa303 85%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7fa303', endColorstr='#7fa303',GradientType=1 ); /* IE6-9 */
}
.gradient2 {
	box-shadow: inset 0 0 10px #7ea203, inset 300px 0 200px -200px #7ea203, inset -300px 0 200px -200px #7ea203;
}
@media (min-width: 621px) {
	.article-form input { width:80%; }
}
/*  PRO Update (end) */

/* New contact us page */
form#contactForm{
	margin-bottom: 0;
}
form#contactForm > div{
	padding: 0 0 0 10px;
}
form#contactForm div input,
form#contactForm div select,
form#contactForm div textarea{
	margin:2px 0;
}
form#contactForm div input,
form#contactForm div select{
	width:230px;
}
form#contactForm div input.buttons{
	height:auto;
	width:auto;
}
form#contactForm div label{
	float: left;
	margin: 0 0 0 -10px;
	padding: 2px 0 0 0;
	width: 10px;
}
div#form1 div select{
	width:210px;
}
input.errorBorder, select.errorBorder, textarea.errorBorder{
	border:1px solid red;
}
.hide {display:none;}
form#contactForm div.recaptcha label{
	margin:0;
	padding:0;
	width:auto;
}
.contactField {
	position: relative;
}
.toolTip {
	cursor: default;
	position: relative; /* This contains the .toolTipWrapper div that is absolutely positioned  */
	text-decoration:none;
}
.toolTipWrapper {
	color:#989898;
	display: none;
	padding-right:30px;
	position: absolute;
	width: 180px;
}
.toolTipTop {
	background: transparent url(/images/toolTipTop.png) no-repeat;
	clear:left;
	float:left;
	height: 15px;
	width: 180px;
}
.toolTipMid {
	background: transparent url(/images/toolTipMid.png);
	background-repeat:repeat-y;
	clear:left;
	float:left;
	padding:0px 45px 5px 15px;
	width: 150px;
}
.toolTipBtm {
	background: transparent url(/images/toolTipBtm.png) no-repeat;
	clear:left;
	float:left;
	height: 15px;
	width: 180px;
}
.contactRequired {
	clear:left;
	color:#FF0000;
	float:left;
	padding: 10px 0 20px 10px;
	width:100%;
}
/* END New contact us page */