/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}



/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* GLOBAL */
html {box-sizing:border-box;}
*, *:before, *:after {box-sizing:inherit;}
html, body {font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif; font-size:13px; width:100%; overflow-x:hidden;}
body {min-height:600px;}
a {text-decoration:none; outline:none; color:#444;}
a:hover {text-decoration:underline;}
img {max-width:100%; height:auto;}

.padding {padding:10px;}
.h {display:none;}
.separator {height:1px; border-top:#bbb 1px dotted; margin:8px 0;}

.page {z-index:20; position:relative;}
.body-bg {z-index:10; position:fixed; top:0; right:0; bottom:0; left:0; background-position:50% 0; background-repeat:no-repeat; background-attachment:fixed;}

.header {position:relative;}
.headerlinks {position:absolute; text-align:right; bottom:0; right:0; display:none;}
.headerlinks>a {display:block; color:#444;}
.header .main-search {height:28px; line-height:28px;}
.search-input .search-button:before {font-size:17px; top:2px;}
.search-input input {width:100%; line-height:25px; height:27px; border:#ccc 1px solid; border-radius:5px; padding:0 10px; box-shadow:inset 0 3px 5px rgba(0,0,0,.15);}
.headerlinks .sep {display:none;}
.footer {color:#fff; margin:10px 5px; border-top:#fff 1px solid; padding-top:10px;}
.footer a {color:#fff;}
.mobile-search {position:relative; margin:10px;}
.mobile-search .search-input {width:100%;}
.search .fa-lg {vertical-align:0;}

.page-header-wrapper {display:none;}
.page-content-wrapper {background:#fff; box-shadow:0 0 10px #000; padding:10px; position:relative;}
.left-nav {display:none;}
#twitter_update_list {margin-bottom:10px;}

/*COMMON JQUERY-UI*/
.hide-title-bar .ui-dialog-titlebar {background:none; border:none;}
.no-title-bar .ui-dialog-titlebar {display:none;}
.no-close .ui-dialog-titlebar-close {display: none;}

/*custom dropdown*/
.wrapper-dropdown {position:relative; padding:0 10px; line-height:27px; border-radius:5px; background:#e9e9e9; border:#ccc 1px solid; color:#444; box-shadow: inset 0 3px 5px rgba(0,0,0,.2);}
.wrapper-dropdown.active {height:30px; border-radius:5px 5px 0 0;}
.wrapper-dropdown:after {content:""; width:0; height:0; position:absolute; top:15px; right:15px; margin-top:-3px; border-width: 6px 6px 0 6px; border-style:solid; border-color:#444 transparent; color:#444;}
.wrapper-dropdown .dropdown {position:absolute; top:100%; background:#e9e9e9; border-radius:0 0 5px 5px; border:#ccc 1px solid; border-top:none; list-style:none; margin:0; padding:0; overflow:hidden; display:none; line-height:17px; z-index:4; left:-1px; right:-1px;}
.wrapper-dropdown .dropdown li {border-top:#ccc 1px dotted; padding:7px;}
.wrapper-dropdown .dropdown li a {color:#004076; display:block;}
.wrapper-dropdown:focus {outline:none;}


/* GLOBAL NAVIGATION */
.navbar {background:#444; position:relative; margin-top:10px;}
.navbar ul {list-style-type:none; padding:0; margin:0; font-size:17px;}
.navbar a {color:#fff; line-height:17px; padding:7px 0; text-align:center; display:block;}
.navbar a:hover {text-decoration:none; font-weight:bold;}
.navbar .nav {height:0; overflow:hidden;}
.navbar .nav.expanded {height:auto;}
.navbar ul ul {font-size:13px; margin:0 5px; background:#fff; height:0; overflow:hidden;}
.navbar ul ul.expand {height:auto;}
.navbar ul ul a {color:#444;}
.navbar ul ul li {border-top:#e9e9e9 1px dotted;}
.navbar ul ul li:first-child {border-top:#e9e9e9 0 none;}
#mobile-nav-toggle {position:absolute; height:40px; width:45px; top:-40px; right:10px; display:block; transition: all 250ms ease-in-out;}
#mobile-nav-toggle span {position:absolute; top:20px; left:5px;}
#mobile-nav-toggle span, #mobile-nav-toggle span:before, #mobile-nav-toggle span:after
  {cursor:pointer; border-radius:3px; height:5px; width:35px; background:#444; position:absolute; display:block; content:''; transition: all 250ms ease-in-out;}
#mobile-nav-toggle span:before {top:-10px;}
#mobile-nav-toggle span::after {top:10px;}

#mobile-nav-toggle.active {background:#444;}
#mobile-nav-toggle.active span, #mobile-nav-toggle.active span:before, #mobile-nav-toggle.active span:after
  {background:#fff;}
#mobile-nav-toggle.active span {background-color:transparent;}
#mobile-nav-toggle.active span:before {top:0; transform:rotate(-45deg);}
#mobile-nav-toggle.active span:after {top:0; transform:rotate(45deg);}

/* SHARE THIS */
.share-this {float:right; position:relative; height:20px; line-height:20px; width:120px; text-align:right;}
.share-this .share-content {position:absolute; top:20px; right:0; left:0; border-radius:5px; box-shadow:0 0 5px #000; background:#fff; text-align:left; display:none; z-index:30;}
.share-this .share-content.expanded {height:auto;}
.share-this .share-content a {display:block; margin:5px;}
.share-this .share-icon {display:inline-block; width:12px; height:12px; background:#444; border-radius:3px; margin-right:5px; position:relative;}
.share-this .share-icon:before, .share-this .share-icon:after
  {height:2px; width:8px; top:5px; left:2px; position:absolute; display:block; content:''; background:#fff; border-radius:3px;}
.share-this .share-icon:before {transform:rotate(90deg);}

/* HOME PAGE */
div.module {background:#fff; margin:10px 0; box-shadow:0 0 10px #000;}
div.module h2 {margin:0 0 15px 0;}
div.module.content-module img {vertical-align:top; margin:0 10px 0 0;}
div.module input {line-height:27px; height:27px; width:160px; border-radius:5px; border:#ccc 1px solid; background:#e9e9e9; padding:0 10px; box-shadow: inset 0 3px 5px rgba(0,0,0,.2);}
div.module.image-module {background-color:#000; background-repeat:no-repeat; background-position:50% 50%; background-size:100% 100%;}
div.module.image-module a {display:block; height:100%; width:100%;}
div.module.video-module {background-repeat:no-repeat; background-position:50% 50%; background-size:100% 100%;}
div.module.video-module .desktop-content {display:none;}
div.home div.bottom {margin-top:-10px;}
/* image slider */
div.slider {position:relative;}
ul.heroes {list-style-type:none; margin:0; padding:0;}
ul.heroes>li {position:relative; margin:10px 0; width:100%;}
ul.heroes img.hero-image {width:100%; height:auto;}
ul.heroes div.description {position:absolute; right:0; bottom:0; left:0; background:rgba(255,255,255,0.8); padding:10px;}
ul.heroes div.description div.text {margin:0 0 10px 0;}
ul.heroes>li.content-slide div.description {position:relative; background:#fff;}
ul.heroes h1 {margin:0;}


/* DB PAGE & FACT PAGE */
.facts-container {margin:10px 0;}
.fact {list-style-type:none; display:block; margin:0; padding:0;}
.fact li {position:relative; padding:10px 0;}
.fact a {display:block; border:0 none;}
.fact .caption {position:absolute; right:0; bottom:10px; left:0; background:rgba(68,68,68,0.5); color:#fff; font-size:120%; padding:10px; text-align:center;}
.filter-categories {list-style-type:none; display:block; margin:0; padding:0; float:right;}
.filter-categories li {cursor:pointer; display:block; float:left; padding:6px 20px; border:#444 1px solid; margin:0; background:rgba(68,68,68,0.5); /*background: linear-gradient(to bottom, #ccc 0%, #ddd 50%, #bbb 50.1%, #eee 100%); -pie-background: linear-gradient(to bottom, #ccc 0%, #ddd 50%, #bbb 50.1%, #eee 100%); behavior: url(/_assets/PIE.htc);*/}
.filter-categories li:first-child {border-top-left-radius:5px; border-bottom-left-radius:5px;}
.filter-categories li:last-child {border-top-right-radius:5px; border-bottom-right-radius:5px;}
.filter-categories li.active, .filter-categories li:hover {background:#fff;}


/* SEARCH RESULTS PAGE */
.search-results .results {list-style-type:none; margin:0; padding:0;}
.search-results .results li {margin:20px 0;}
.search-results .results .title {font-size:120%; font-weight:bold;}


/* PRODUCTS */
.product {border-top:#ccc 1px dotted; padding:30px 0;}
.product .product-image img {display:block; margin:0 auto;}
.product .product-details .heading2 {margin:1em 0;}


/* GENERIC FORM */
.generic-form {margin:0 -20px;}
.generic-form input[type="text"], .generic-form select {width:100%;}
.generic-form label {display:block; float:left; width:100%; padding:0 20px; margin:10px 0;}
.generic-form label .is-req {display:none; color:#d00; margin-right:5px;}
.generic-form label.req .is-req {display:inline;}
.generic-form input, .generic-form select {line-height:27px; height:27px; border-radius:5px; border:#ccc 1px solid; background:#e9e9e9; padding:0 10px;}
.generic-form input[disabled] {color:#888;}
.generic-form textarea {border-radius:5px; border:#ccc 1px solid; background:#e9e9e9; padding:10px 10px; height:80px; width:100%;}
.generic-form .controls {clear:both; padding:20px;}



/* ==========================================================================
   Media Queries
   ========================================================================== */
@media only screen and (min-width: 600px) {
  div.page {max-width:690px; margin:0 auto;}
  .header {font-size:11px;}
  .headerlinks {display:block;}
  .mobile-search {display:none;}
  .footer {font-size:11px; margin:10px 0;}

  .page-header-wrapper {display:block; position:relative; margin:10px 0;}
  .page-header-wrapper img, .page-header-wrapper .image-replacement {border-radius:5px;}
  .page-header-wrapper .right-image {display:none;}
  .page-header-wrapper .image-replacement {position:absolute; top:0; right:0; bottom:0; left:604px;}
  .page-content-wrapper {border-radius:5px; padding:20px; margin:10px 0;}


  /* GLOBAL NAVIGATION */
  .navbar {height:52px; background:rgba(68,68,68,0.5); border-radius:5px;}
  .navbar .background {position:absolute; top:10px; right:0; bottom:10px; left:0; background:#444; z-index:10;}
  .navbar .nav {height:auto; z-index:30; position:relative; overflow:visible;}
  .navbar .navlinks {display:none;}
  .navbar .nav>ul {padding:0 10px;}
  .navbar .nav>ul>li {width:25%; float:left; border-top:transparent 10px solid; border-bottom:transparent 10px solid; height:52px; position:relative;}
  .navbar .nav>ul>li:hover, .navbar .nav>ul>li.active {border-bottom-color:#fff;}
  .navbar ul ul {margin:0;}
  .navbar .nav>ul>li>ul {position:absolute; top:32px; left:0; right:0; border-right:#444 1px solid; border-left:#444 1px solid; border-radius:0 0 5px 5px;}
  .navbar .nav>ul>li>ul.expanded {border-bottom:#444 1px solid; height:auto;}
  .navbar .nav>ul>li>ul a {text-align:left; padding:7px 10px;}
  #mobile-nav-toggle {display:none;}

  /* HOME PAGE */
  div.home div.right {margin:0 -5px;}
  div.home div.right div.module-container {width:33.3333%; float:left; padding:0 5px;}
  div.home div.right div.module {border-radius:5px; height:190px;}
  div.home div.bottom {margin:0 -5px;}
  div.home div.bottom div.module-container {width:50%; float:left; padding:0 5px;}
  div.home div.bottom div.module {border-radius:5px; height:150px;}
  div.module.video-module {position:relative;}
  div.module.video-module .mobile-content {display:none;}
  div.module.video-module .desktop-content {display:block; height:100%; width:100%;}
  div.module.video-module .desktop-content a {display:block; height:100%; width:100%;}
  div.module.video-module .desktop-content .video-heading {position:absolute; top:10px; left:0; right:0; background:rgba(255,255,255,0.5); font-size:15px; padding:5px 10px; font-weight:bold;}
  div.module.video-module a.yt-video-module {position:relative;}
  div.module.video-module a.yt-video-module .fa {position:absolute; top:50%; left:50%; margin-top:-0.5em; margin-left:-0.5em; color:rgba(255,255,255,0.75);}
  /* image slider */
  div.slider {margin:10px 0;}
  div.slider div.slide-aspect {width:100%; height:0; padding-top:72.463768%; background:#fff; border-radius:5px;}
  ul.heroes>li {position:absolute; top:0; left:0; opacity:0; z-index:5; margin:0;}
  ul.heroes img.hero-image {border-radius:5px;}
  ul.heroes>li.active {opacity:1; z-index:10;}
  ul.heroes div.description {top:15px; left:10px; background:transparent;}
  ul.heroes li.with-overlay div.description {left:-10px; background:url('overlay_bg.png') no-repeat; padding-left:30px; width:400px; height:166px; overflow:hidden;}
  ul.heroes>li.content-slide div.description {position:absolute; top:0; right:0; bottom:0; left:0; background:transparent;}
  .slide-nav {display:block; position:absolute; top:50%; margin-top:-17px; width:34px; height:54px; background:transparent url('slidecontrols_sprite.png') no-repeat; z-index:20;}
  .slide-nav.left {background-position:0 0; left:-10px;}
  .slide-nav.left:hover {background-position:0 -54px;}
  .slide-nav.right {background-position:-34px 0; right:-10px;}
  .slide-nav.right:hover {background-position:-34px -54px;}
  .slidecontrol {display:block; position:absolute; left:0; right:0; bottom:20px; height:20px; z-index:20; text-align:center;}
  .slidecontrol .control {width:15px; height:17px; display:inline-block; margin:0 5px; font-family:FontAwesome; position:relative; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
  .slidecontrol .control:before {position:absolute; text-shadow:0 0 1px #000;}
  .slidecontrol .control.play:before {content:"\f04c";}
  .slidecontrol .control.play.pause:before {content:"\f04b";}
  .slidecontrol .control.slide:before {content:"\f111";}
  .slidecontrol .control.slide.active:before {color:#fff;}

  /* PRODUCTS */
  .product .product-image {width:22.5%; float:left;}
  .product .product-image img {margin:0;}
  .product .product-details {width:77.5%; float:left;}

  /* GENERIC FORM */
  .generic-form label.quarter-width {width:50%;}

}

@media only screen and (min-width: 750px) {
}

@media only screen and (min-width: 960px) {
  div.page {max-width:960px; margin:0 auto;}
  .headerlinks a {display:inline-block;}
  .headerlinks .sep {display:inline; margin:0 10px;}

  .page-header-wrapper img {display:block; float:left;}
  .page-header-wrapper .right-image {display:block; margin-left:10px;}
  .page-header-wrapper .image-replacement {display:none;}
  .page-content-wrapper {padding:20px 0; background:#fff;}
  .page-content-wrapper .main-content {padding:0 30px;}
  .page-content-wrapper.with-left-nav {background:linear-gradient(to right, #eee 232px, #fff 233px); -pie-background: linear-gradient(to right, #eee 232px,#fff 233px); behavior: url(/_assets/PIE.htc);}
  .page-content-wrapper.with-left-nav .left-nav {display:block; width:232px; float:left; min-height:100px;}
  .page-content-wrapper.with-left-nav .main-content {float:left; width:728px;}
  .share-this {right:30px;}

  /* LEFT NAVIGATION */
  .left-nav ul {list-style-type:none; list-style:none; padding:0; position:relative;}
  .left-nav>ul {margin:15px 0 40px -10px; width:100%;}
  .left-nav a {display:block;}
  .left-nav>ul>li {padding:0 0 0 20px; font-size:110%;}
  .left-nav>ul>li>a {padding:15px 0; border-top:#ccc 1px dotted;}
  .left-nav>ul>li:first-child>a {border-top-style:none;}
  .left-nav>ul>li.active {padding:0;}
  .left-nav>ul>li.active>a {background:#fff; border-radius:5px; box-shadow:0 5px 10px #000; padding-left:20px; color:#444;}
  .left-nav>ul>li ul {padding:10px 0 0 40px;}
  .left-nav>ul>li ul>li>a {padding:10px 0;}
  .left-nav>ul>li ul {display:none;}
  .left-nav>ul>li.active ul {display:block;}
  .left-nav>ul>li.active ul>li.active>a {color:#444;}
  .left-nav>ul>li.active ul>li.active>a:after {content:'>';}
  .left-nav>ul>li.active>a, .left-nav>ul>li.active+li>a {border-top-style:none;}

  /* HOME PAGE */
  div.home div.left {float:left; width:72%;}
  div.home div.right {float:right; width:26%; margin:0;}
  div.home div.right div.module-container {width:100%; padding:0; float:none;}
  div.home div.right div.module {height:160px;}

  /* DB PAGE & FACT PAGE */
  .facts-container {margin:10px -10px;}
  .fact li {padding:10px; width:33.33333333%; float:left;}
  .fact .caption {right:10px;left:10px;}

  .two-col-content .left-content {width:300px; float:left;}
  .two-col-content .right-content {width:600px; float:left; padding-left:30px;}

  /* GENERIC FORM */
  .generic-form label.half-width {width:50%;}
  .generic-form label.quarter-width {width:25%;}
  .generic-form label.third-width {width:33.3333%;}

}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* dealer locator brands */
td.products span.brand {height:32px; width:32px; display:inline-block; margin:5px; background:url('../img/brands_sprite.png');}
td.products span.brand.AB {background-position:0 0;}
td.products span.brand.AS {background-position:-32px 0;}
td.products span.brand.GLB {background-position:-64px 0;}
td.products span.brand.LT {background-position:-96px 0;}
td.products span.brand.Q {background-position:-128px 0;}
td.products span.brand.R {background-position:-160px 0;}
td.products span.brand.ROB {background-position:-192px 0;}
td.products span.brand.U {background-position:-224px 0;}

td.premier {width:10.532150776053215077605321507761%;}
td.premier div.premier-logo {width:100%; height:0; padding-top:100%; background:url('../img/premier-logo.png'); background-size:100% 100%;}

/* DEALER LOCATOR */
div.dealer-locator div.search-map {width:100%; height:360px;}
div.dealer-locator div.search-header {margin:10px 0 20px 0;}
div.dealer-locator div.search-header div.left {float:left; width:50%;}
div.dealer-locator #address {width:300px;}
#dealerTable {margin-bottom:40px;}
#dealerTable table {width:100%; table-layout:fixed; display:block; margin-top:20px;}
#dealerTable table tbody {background:#eee;}
#dealerTable table td.address {width:35%;}
#dealerTable table td.products {width:32%;}
#dealerTable table td.products img {margin-left:2%; width:23%; height:auto;}
#dealerTable table td.products img:first-child {margin-left:0;}
#dealerTable table td.clearcare {width:8%;}
#dealerTable table td.clearcare img {width:100%; height:auto;}
#dealerTable table td.watertesting {width:11%; text-align:center;}
#dealerTable table td.distance {width:14%;}
#dealerTable table tr.hover td {background:#bbddff;}
#dealerTable table tbody tr:nth-child(odd) {background:#ddd;}
#dealerTable table tbody tr.alt {background:#ddd;}

/*COMMON USE*/
.heading1 {font-size:28px;}
.heading2 {font-size:17px;}
.box {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box;}
.round {border-radius:5px;}
.red {color:#f00;}
.h {display:none;}
div.separator {height:1px; background:transparent; border-top:#bbb 1px dotted; margin:8px 0;}