html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*********************************************************************** TYPOGRAPHY ***************************************************************************/

body {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
nav .nav-container li a,
#product-details h2 span,
.selection-guide-category,
.selection-guide-category > a,
#sitemap h2,
#sitemap h2 a {
    font-family: 'ubuntubold', sans-serif;
}

h2,
h3,
h4,
.breadcrumb a,
.pdf-link-container a,
.list-definitions span strong,
#sitemap h3,
#sitemap h3 a,
#search-results h2 {
    font-family: 'ubuntumedium', sans-serif;
}

table tr td,
table.responsive p,
#product-families h3,
.button-outlined-red,
.selection-guide-inner-category,
.table-colored-container h3,
.hero-header-subtext,
.hero-subheader,
.feature-text {
    font-family: 'ubunturegular', sans-serif;
}

nav .nav-container ul.sub-navigation-list li a,
#hero-home h1 span,
#hero-about-us h1 span {
    font-family: 'ubuntulight', sans-serif;
}

#quote blockquote {
    font-family: 'ubuntulight_italic', sans-serif;
}

p,
a,
label,
input,
select,
textarea,
.form-col span,
.hero ul.product-features-list li,
#product-details .description-container ul.product-features-list li,
#selection-guide-menu li,
#agency-approvals-menu li,
#cross-reference-content,
#local-contacts h3,
#corporate-contacts h3,
table th,
footer li,
footer li h3,
footer li h3 a,
#copyright,
.required-field-validator,
#customer-list li,
.success-message,
.error-message {
    font-family: 'didact_gothicregular', sans-serif;
}

#hero-home h1,
#hero-contact-us h1,
#hero-about-us h1 {
    font-size: 3.75rem;
}

.hero h1 {
    font-size: 2.25rem;
}

h2 {
    font-size: 1.625rem;
}

h3 {
    font-size: 1rem;
}

.hero-header-subtext,
#quote {
    font-size: 1.25rem;
}

.hero-subheader {
    font-size: 1rem;
}

.selection-guide-category {
    font-size: 1rem;
    line-height: 1rem;
}

.feature-text,
.table-colored-container h3,
#search-results h2,
#customer-list li {
    font-size: 1rem;
}

p,
label,
.form-col span,
td,
th,
#product-details .description-container ul.product-features-list li,
.selection-guide-inner-category,
#selection-guide-menu li,
#agency-approvals-menu li,
#cross-reference-content span,
.select-location,
#request-literature-form input,
#request-literature-form select,
#request-literature-form li textarea,
.button-red,
.button-grey,
.button-outlined-red,
#about-us-snippet a,
footer li,
#copyright,
#sitemap .arrow-list li a,
.success-message,
.error-message {
    font-size: 0.875rem;
}

nav .nav-container li a,
.product-card .product-description,
.pdf-link-container a,
#product-options .options-container .product-name,
#product-options .options-container .button-outlined-red,
table tr th.extra-info-cell,
.required-field-validator.visible {
    font-size: 0.75rem;
}

nav .nav-container ul.sub-navigation-list li a {
    font-size: 0.688rem;
    text-transform: capitalize;
}

.hero #description-expand,
.product-card-huge-link {
    font-size: 0;
}

h1,
h2,
h3,
h4,
nav .nav-container li a,
.selection-guide-category,
table tr th,
.list-definitions span strong {
    font-weight: normal;
}

nav .nav-container li a {
    letter-spacing: 1px;
}

nav li,
#local-contacts h3,
#local-contacts p,
#corporate-contacts h3,
#corporate-contacts p {
    line-height: 1rem;
}

p,
blockquote,
li,
td,
#local-contacts .feature-text,
#corporate-contacts .feature-text {
    line-height: 1.6rem;
}

nav .nav-container h2 {
    line-height: 0;
}

h1,
h2,
h3,
h4,
nav .nav-container li a,
.selection-guide-category,
nav .nav-container li a,
#about-us-snippet a,
.pdf-link-container a,
table tr th.extra-info-cell,
.list-definitions span strong,
#dropdown-insulated-probe a,
#product-details h2 span,
#customer-list li,
footer li h3,
footer li h3 > a {
    text-transform: uppercase;
}

.selection-guide-inner-category,
.table-colored-container h3 {
    text-transform: none;
}

nav .nav-container li a,
#about-us-snippet a,
.pdf-link-container a,
.hero .pdf-link-container li a,
.selection-guide-category a,
footer li a,
#search-results h2 a {
    text-decoration: none;
}

nav .nav-container li a:hover,
#about-us-snippet a,
.pdf-link-container a,
.selection-guide-category,
#selection-guide-menu a,
#agency-approvals-menu a,
#dropdown-forms-and-certifications a,
#sitemap a,
#search-results h2 a,
footer li h3,
footer li h3 > a,
footer li a {
    transition: all 0.25s ease;
}

/*********************************************************************** FONT COLORS ***************************************************************************/

#hero-home h1,
#hero-home .hero-header-subtext,
#hero-home .hero-subheader,
#hero-contact-us h1,
#hero-contact-us p,
#hero-about-us h1,
#hero-about-us p,
#local-contacts h2,
#local-contacts h3,
#corporate-contacts h2,
table tr:not(.extra-info-row) th,
#quote,
footer li a:hover,
footer li h3 a:hover,
nav .nav-container ul.sub-navigation-list li a,
.success-message {
    color: #f7f7f7;
}

li,
h1,
h2,
h3,
h4,
label,
nav .nav-container li a,
#sitemap h2 a,
#sitemap h3,
#sitemap h3 a,
#sitemap h4 > a,
.error-message {
    color: #4e4e4e;
}

p,
label,
.form-col span,
header .search-container .search-field,
.hero ul.product-features-list li,
#product-details .description-container ul.product-features-list li,
#selection-guide-menu li,
#agency-approvals-menu li,
#cross-reference-content,
.select-location,
#request-literature-form input,
#request-literature-form select,
#request-literature-form li textarea,
.hero .pdf-link-container,
#sitemap li > a {
    color: #797979;
}

nav .nav-container li a:hover,
.button-outlined-red,
.pdf-link-container a,
#selection-guide-menu a,
#agency-approvals-menu a,
#dropdown-forms-and-certifications a,
.hero a,
#faq-menu a,
#sitemap a:hover,
#search-results h2 a,
.warning-section a {
    color: #fe0033;
}

.button-outlined-red:hover,
.pdf-link-container a:hover,
#selection-guide-menu a:hover,
#agency-approvals-menu a:hover,
#dropdown-forms-and-certifications a:hover,
.hero a:hover,
#faq-menu a:hover,
#search-results h2 a:hover,
.warning-section a:hover {
    color: #b70025;
}

#local-contacts p,
footer li a,
#copyright {
    color: #999;
}

footer li,
footer p {
    color: #aaa;
}

.selection-guide-category,
footer li h3,
footer li h3 > a {
    color: #555;
}

/*********************************************************************** PAGE LAYOUT ***************************************************************************/

body {
    background-color: #f7f7f7;
}

body, ul, li {
    padding: 0;
    margin: 0;
}


/* The wrapper class contains the page content and prevents it from being wider than 1200px on exceptionally wide displays. */
.wrapper {
    width: 96%;
    max-width: 1200px;
    min-width: 330px;
    
    overflow: auto;

    padding: 0 2%;
    margin: 0 auto;
}

nav .wrapper {
    overflow: inherit;
}

/* This class can be used to center text within blocks if they are not receiving this property from any other classes. */
p.center-text {
    text-align: center;
}

/* The header deco classes use the :before pseudo class to draw a line under the header that fades to transparency and the
    :after pseudo class to overlay a small circle in the center or left side. */
.header-deco-center,
.header-deco-left {
    position: relative;
}

/* headers with the header deco classes and white class are meant for dark backgrounds. */
.header-deco-center.white,
.header-deco-left.white {
    color: #f7f7f7;
}

.header-deco-center:before,
.header-deco-left:before {
    content: "";
    position: absolute;
    bottom: -4px;
    z-index: 1;
    height: 1px;

    margin: auto;
}

.header-deco-center:before {
    left: 30%;
    width: 40%;
    
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fe0033+0,fe0033+100&0+0,1+50,0+100 */
    background: -moz-linear-gradient(left, rgba(254,0,51,0) 0%, rgba(254,0,51,1) 50%, rgba(254,0,51,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(254,0,51,0) 0%,rgba(254,0,51,1) 50%,rgba(254,0,51,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(254,0,51,0) 0%,rgba(254,0,51,1) 50%,rgba(254,0,51,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00fe0033', endColorstr='#00fe0033',GradientType=1 ); /* IE6-9 */
}

.header-deco-left:before {
    left: 0;
    width: 80%;
    
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fe0033+0,ffffff+100&1+50,0+100 */
    background: -moz-linear-gradient(left, rgba(254,0,51,1) 0%, rgba(255,128,153,1) 50%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(254,0,51,1) 0%,rgba(255,128,153,1) 50%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(254,0,51,1) 0%,rgba(255,128,153,1) 50%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe0033', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}

.header-deco-center.white:before {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+50,0+100 */
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}

.header-deco-left.white:before {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+50,0+100 */
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}

.header-deco-center:after,
.header-deco-left:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -7px;
  
    height: 6px;
    width: 6px;
    z-index: 2;
  
    border: 1px solid rgb(254, 0, 51);
    border-radius: 3px;
  
    background-color: #fff;
}

.header-deco-center.white:after,
.header-deco-left.white:after {
    border: 1px solid rgb(247, 247, 247);
    background-color: #4e4e4e;
}

.header-deco-center:after {
    left: 0;
    right: 0;

    margin: 0 auto;
}

.header-deco-left:after {
    margin: 0;
}

.button-red,
.button-grey {
    cursor: pointer;
    transition: all 0.25s ease;
    color: #f7f7f7;
    text-transform: uppercase;
    text-decoration: none;

    padding: 12px 24px;
    border: 0;
    border-radius: 3px;
}

.button-red {
    background-color: #fe0033;
}

.button-red:hover {
    background-color: #b70025;
}

.button-grey {
    background-color: #555;
}

.button-grey:hover {
    background-color: #333;
}

.button-outlined-red {
    display: inline-block;

    color: #fe0033;
    text-transform: uppercase;
    text-decoration: none;

    padding: 5px 30px;
    border: 1px solid #fe0033;
    border-radius: 3px;
    margin: 0 auto;

    background-color: #fff;
}

.button-outlined-red:hover {
    color: #b70025;

    border: 1px solid #b70025;
}

/*********************************************************************** HEADER / NAVIGATION ***************************************************************************/

#header-and-nav {
    position: relative;
    z-index: 100;

    background-color: #f7f7f7;

    -webkit-box-shadow: 1px 1px 2px #ddd;
    -moz-box-shadow: 1px 1px 2px #ddd;
    box-shadow: 1px 1px 2px #ddd;
}

header {
    padding: 20px 0;
}

/* This header is used for the company logo, which is linked to the homepage. This is done to aid screen readers. 
    Header text is moved offscreen with text-indent and replaced with a background image of the logo. */
header h1 {
    position: relative;
    float: left;
    width: 150px;
    height: 50px;

    margin: 0;

    text-indent: -10000px;
    background: url(../Images/KVS_logo.png) no-repeat;
}

header h1 a {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    text-indent: 0;
}

header .search-container {
    float: right;
    height: 40px;
    
    padding: 0;
    border: 1px solid #b9b9b9;
    margin-top: 10px;

    background-color: #fff;
}

header div .search-field,
header div .search-submit {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    height: 40px;

    padding: 0 10px;
    border: none;
}

header .search-container .search-field:focus,
header .search-container .search-submit:focus {
    outline: none;
}

header .search-container .search-submit {
    -webkit-appearance: none;
    -moz-appearance: none;
    
    width: 40px;
    height: 41px;

    border-left: 1px solid #e8e8e8;
    
    text-indent: -10000px;
    overflow: hidden;
    cursor: pointer;

    background: transparent url(../Images/icon_search.svg) no-repeat center;
}

header .search-container .search-submit:hover,
header .search-container .search-submit:focus {
    border-left: 1px solid #b9b9b9;

    background: #b9b9b9 url(../Images/icon_search_white.svg) no-repeat center;
}

header .search-container .search-field {
    width: 300px;

    background-color: transparent;
}

/* This is a clearfix for elements containing floated children. */
header:after,
nav:after,
#product-families:after,
#about-us-snippet:after,
footer:before,
footer:after {
    display: block;
    content: "";
    clear: both;
}

nav {
    border-top: 1px solid #e8e8e8;

    background-color: #fff;
}

.nav-container {
    float: left;
}

/* A header is used in the nav-container to aid screen readers. Its content is moved offscreen by text-indent. */
nav .nav-container h2 {
    margin: 0;

    text-indent: -10000px;
}

nav .nav-container li {
    float: left;
    position: relative;

    list-style-type: none;
    
    margin: 0;
}

nav .nav-container li a {
    display: block;

    padding: 20px 35px;
}

nav .nav-container li a:hover {
    background-color: #f1f1f1;
}

nav .nav-container li .dropdown:after {
    content: "";
    display: block;
    position: absolute;
    top: 46%;
    right: 6px;
    width: 0; 
    height: 0;

    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #4e4e4e;
}

nav .nav-container li .dropdown:hover:after {
    border-top: 6px solid #fe0033;

    transition: all 0.25s ease;
}

nav .nav-container ul.sub-navigation-list {
    position: absolute;
    height: 0;

    overflow: hidden;

    background-color: #b70025;
}

nav .nav-container ul.sub-navigation-list.dropped {
    height: auto;

    z-index: 1000;
}

nav .nav-container ul.sub-navigation-list li {
    width: 100%;

    white-space: nowrap;
}

nav .nav-container ul.sub-navigation-list li a{
    padding: 10px 25px;
}

nav .nav-container ul.sub-navigation-list li a:hover {
    background-color: #910023;
}

/********************************************************************* BREADCRUMB *************************************************************************/

.breadcrumb {
    text-align: left;
    
    padding: 10px 0;
    border-bottom: 1px solid #ddd;

    background-color: #fff;
}

.breadcrumb .wrapper {
    white-space: nowrap;
    overflow: hidden;
}

.breadcrumb a {
    position: relative;
    display: inline-block;
  
    font-size: 0.625em;
    text-transform: uppercase;
    text-decoration: none;

    color: #555;
    line-height: 20px;
  
    padding-right: 10px;
    padding-left: 20px;
    margin-left: -3px;
  
    cursor: pointer;
    background-color: #fff;
}

.breadcrumb a.home {
    margin-left: 0;
}

.breadcrumb a:hover {
    color: #fe0033;
}

.breadcrumb a:after {
    content: "";
    position: absolute;
    display: inline-block;
    z-index: 2;
    color: #555;
    width: 20px;
    height: 20px;
  
    -moz-transform: rotate(315deg) scale(0.7);
    -o-transform: rotate(315deg) scale(0.7);
    -webkit-transform: rotate(315deg) scale(0.7);
    transform: rotate(315deg) scale(0.7);
  
    -webkit-box-shadow: 2px 2px;
    -o-box-shadow: 2px 2px;
    -moz-box-shadow: 2px 2px;
    box-shadow: 2px 2px;
  
    background-color: #fff;
}

/* The following two rules are for IE only and should be wrapped in conditional comments.
/* The -ms-filter rule should be on one line and always *before* the filter rule if used in the same rule.*/

.lt-ie9 .breadcrumb a:after {

   /* IE8+ - must be on one line, unfortunately */ 
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.4949747468305833, M12=0.4949747468305832, M21=-0.4949747468305832, M22=0.4949747468305833, SizingMethod='auto expand')";
 
   /* IE6 and 7 */ 
   filter: progid:DXImageTransform.Microsoft.Matrix(
          M11=0.4949747468305833,
          M12=0.4949747468305832,
          M21=-0.4949747468305832,
          M22=0.4949747468305833,
          SizingMethod='auto expand');


 /*To make the transform-origin be the middle of the object.
   Note: These numbers are approximations.  For more accurate results, use Internet Explorer with this tool.*/
   margin-left: -2px; 
   margin-top: -2px;
} 

.breadcrumb a.active,
.breadcrumb a.active:after {
    cursor: default;

    color: #f7f7f7;

    background-color: #b70025;
}

/*********************************************************************** FOOTER ***************************************************************************/

footer {
    padding: 30px 0;
    border-top: 10px solid #151515;

    background: #202020;
}

footer ul {
    float: left;

    list-style-type: none;
}

footer ul:first-of-type,
footer ul:nth-of-type(3) {
    width: 25%;
}

footer ul:nth-of-type(2) {
    width: 50%;
}

footer li h3,
footer li h3 > a {
    margin: 0;
}

footer h3.logo {
    position: relative;
    height: 50px;

    text-indent: -10000px;

    background: url(../Images/KVS_logo.png) no-repeat left top;
}

footer li {
    width: 80%;

    margin: 15px 0;
}

footer li a {
    padding: 10px 0;
}

footer p {
    margin: 0;
}

footer h3.logo a {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    text-indent: 0;
}

#copyright {
    float: left;
    clear: both;
    width: 100%;

    padding-top: 30px;
    border-top: 2px solid #333;
    margin-top: 30px;
}

/****************************************************************** PAGE LAYOUT *********************************************************************/

section {
    padding-top: 65px;
    padding-bottom: 65px;
}

#hero-home {
    display: table;
    height: 600px;

    overflow: hidden;

    border-bottom: 1px solid #fe0033;

    background: url(../Images/background_factory_lomo_dof.jpg) no-repeat fixed center center;
    background-size: cover;
}

#hero-home .wrapper {
    display: table-cell;

    text-align: center;
    vertical-align: middle;
}

#hero-home h1 {
    text-align: center;

    margin: 0;
}

#hero-home h1 span,
#hero-about-us h1 span {
    display: block;
}

#hero-home .button-container {
    width: 100%;

    text-align: center;
}

#hero-home .button-container .button-red,
#hero-home .button-container .button-grey {
    display: inline-block!important;

    margin: 10px;
}

#about-us-snippet {
    text-align: center;

    background-color: #fff;
}

#about-us-snippet .wrapper {
    width: 90%;

    padding: 0 5%;
}

#about-us-snippet img {
    width: 100%;
    height: 100%;

    padding: 30px 0;
}

#about-us-snippet .text-container {
    float: left;
    width: 64%;

    margin: 0 0 0 2%;
}

#about-us-snippet h2 {
    margin-top: 0;
}

#about-us-snippet p:not(.feature-text) {
    margin: 20px 0;
}

#about-us-snippet .feature-text {
    margin: 10px 0 0;
} 

#about-us-snippet .button-grey {
    display: inline-block;

    margin-top: 10px;
}

#product-families {
    border-top: 1px solid #e8e8e8;

    text-align: center;
}

#product-families img {
    width: 60%;

    margin: 0 20%;
}

#product-families .product-family-icon {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    display: block;
    width: 150px;
    height: 150px;

    border: 20px solid #ddd;
    border-radius: 50%;
    margin: auto;

    background-color: #f7f7f7;
    transition: all 0.25s ease;
}

#product-families .product-family-icon:hover {
    border: 1px solid #fe0033;
}

#product-families .product-family-icon span {
    display: inline-block;
    width: 100%;
    height: 100%;

    text-indent: -10000px;
    vertical-align: middle;

    border-radius: 50%;
    margin: auto;

    background-color: transparent;
}

#product-families #level-icon { background: #f7f7f7 url(../Images/products_level.png) no-repeat center; background-size: 80% 80%; }
#product-families #control-valves-icon { background: #f7f7f7 url(../Images/products_valves.png) no-repeat center; background-size: 80% 80%; }
#product-families #regulators-icon { background: #f7f7f7 url(../Images/products_regulators.png) no-repeat center; background-size: 80% 80%; }
#product-families #vibration-icon { background: #f7f7f7 url(../Images/products_vibration.png) no-repeat center; background-size: 80% 80%; }
#product-families #pneumatic-icon { background: #f7f7f7 url(../Images/products_pneumatic.png) no-repeat center; background-size: 80% 80%; }

#product-families #level-icon,
#product-families #control-valves-icon,
#product-families #regulators-icon,
#product-families #vibration-icon,
#product-families #pneumatic-icon {
    transition: all 0.25s ease;
}

#product-families #level-icon:hover,
#product-families #control-valves-icon:hover,
#product-families #regulators-icon:hover,
#product-families #vibration-icon:hover,
#product-families #pneumatic-icon:hover {
    background-color: #fe0033;
}

#product-families li {
    float: left;
    width: 32%;

    list-style-type: none;
    text-align: center;

    margin-bottom: 30px;
}

#product-families li:nth-child(2) {
    margin: 0 2%;
}

#product-families li:nth-child(4) {
    margin: 0 1% 0 17%;
}

#product-families li:nth-child(5) {
    margin: 0 17% 0 1%;
}

#product-families li:nth-child(4) {
    clear: both;
}

#product-families h2 {
    text-align: center;

    margin-top: 0;
}

#product-families .feature-text {
    text-align: center;
    margin: 10px 0 60px;
}

#product-families h3 {
    position: relative;
    display: inline-block;

    margin: 10px 0;
}

#product-families h3:before {
    content: "";
    position: absolute;
    bottom: -2px;
    width: 100%;
    height: 2px;
    z-index: 1;
   
    margin: auto;

    background-color: #ddd;
}

#product-families ul li p {
    margin: 0;
}

#customer-list {
    text-align: center;

    border-bottom: 0;

    background: #333 url(../Images/background_customerlist.jpg) no-repeat fixed center center;
    background-size: cover;
}

    #customer-list ul {

        margin-top: 45px;
    }

    #customer-list h2,
    #customer-list p,
    #customer-list li {
        color: #f7f7f7;
    }

    #customer-list h2 {
        margin-top: 0;
    }

    #customer-list li {
        display: inline-block;
        margin: 10px;
    }

/************************************************************************** PRODUCT GRID *****************************************************************************/

#product-grid {
    border-top: 1px solid #e8e8e8;

    background-color: #efefef;
}

#product-grid .wrapper {
    width: 90%;

    padding: 0 5%;
}

.product-card *,
.product-card *:before,
.product-card *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.product-card {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    position: relative;
    float: left;
    width: 32%;

    padding-bottom: 20px;
    border: 1px solid #ddd;
    margin-top: 15px;
    margin-bottom: 15px;

    background-color: #fff;
    -webkit-box-shadow: 1px 1px 2px #ddd;
    -moz-box-shadow: 1px 1px 2px #ddd;
    box-shadow: 1px 1px 2px #ddd;
}

.product-card-huge-link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;

    background-color: transparent;
}

.product-card:nth-of-type(3n-1) {
    margin: 15px 2%;
}

.product-card:nth-of-type(3n+1) {
    clear: both;
}

.product-card .product-image-container {
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
    margin: 20px 20px;

    background-color: #fff;
}

.product-card img {
    display: block;
    width: 100%;
    max-width: 230px;

    margin: 0 auto;
}

.product-card .product-name {
    text-align: center;

    padding: 10px;
    margin: 0;
}

.product-card .product-category {
    text-align: center;

    margin: 0 0 10px;
}

.product-card .product-description {
    position: relative;
    height: 4.8rem;

    text-align: center;
    overflow: hidden;

    padding: 0 20px;
    margin-bottom: 30px;
}

.product-card .product-description:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 70%;
    height: 1.6rem;

    text-align: right;

    background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.product-card .button-container,
.product-card .pdf-link-container {
    position: relative;
    height: 30px;

    text-align: center;
    vertical-align: top;
}

.product-card .button-container {
    margin-bottom: 30px;
}

.product-card .pdf-link-container {
    margin-bottom: 10px;
}

.product-card .pdf-link-container a {
    position: relative;
    z-index: 2;

    padding: 10px 0;

    background: url(../Images/icon_document.svg) no-repeat center center;
}

.product-card .pdf-link-container li {
    float: left;
    height: 20px;
    width: 46%;

    list-style-type: none;

    margin: 5px 2%;
}

.product-card .pdf-link-container:after {
    content: "";
    position: absolute;
    left: 50%;
    width: 1px;
    height: 30px;

    background-color: #ddd;
}

/***************************************************************************************************************************************/

.hero {
    position: relative;
    display: table;
    width: 100%;

    padding-top: 0;
    padding-bottom: 0;

    background-color: #fff;
}

.hero .wrapper {
    /*display: table-cell;*/

    vertical-align: middle;
}

.hero-inner {
    text-align: center;

    padding: 80px 0;
}

.button-red,
.button-red:hover,
.button-grey,
.button-grey:hover {
    color: #f7f7f7!important;
}

#hero-level {
    background: #fff url("../Images/background_levels.jpg") no-repeat 70% 75%;
    background-size: 80%;
}

#hero-control-valves {
    background: #fff url("../Images/background_controlvalves.jpg") no-repeat 70% 75%;
    background-size: 80%;
}

#hero-regulators {
    background: #fff url("../Images/background_regulators.jpg") no-repeat 70% 75%;
    background-size: 80%;
}

#hero-vibration-controls {
    background: #fff url("../Images/background_vibrationcontrols.jpg") no-repeat 70% 75%;
    background-size: 80%;
}

#hero-pneumatic-controls {
    background: #fff url("../Images/background_pneumaticcontrols.jpg") no-repeat 70% 75%;
    background-size: 80%;
}

.hero h1 {
    text-align: center;
    
    margin: 0;
}

.hero .hero-header-subtext,
.hero .hero-subheader {
    text-align: center;
}

.hero .hero-header-subtext {
    margin-bottom: 0;
}

.hero .hero-subheader {
    margin-top: 0;
    margin-bottom: 20px;
}

.hero .introduction {
    padding: 20px 8%;
    /*border-top: 1px solid #ddd;
    margin-top: 20px;*/
}

.hero .pdf-link-container {
    width: 100%;
    max-width: 600px;

    padding: 10px 0 0;
    border-top: 1px solid #b9b9b9;
    margin: 20px auto 0;
}

.hero .pdf-link-container:after {
    content: "";
    display: block;
    clear: both;
}

.hero .pdf-link-container li {
    list-style-type: none;

    padding: 10px 0;
}

#hero-level .pdf-link-container li,
#hero-regulators .pdf-link-container li,
#hero-vibration-controls .pdf-link-container li,
#hero-faq .pdf-link-container li {
    float: left;
    width: 50%;
    text-align: center;

    margin: 0;
}

#hero-control-valves .pdf-link-container li {
    text-align: center;
}

.hero .pdf-link-container li a {
    position: relative;
    display: inline-block;

    line-height: 30px;

    padding: 0 0 0 30px;
}

.hero a#applications-link {
    background: url(../Images/icon_gallery_red.svg) no-repeat left center;
}

.hero a#selection-guide-link {
    background: url(../Images/icon_list_red.svg) no-repeat left center;
}

.hero a#cross-reference-link {
    background: url(../Images/icon_table_red.svg) no-repeat left center;
}

.hero a.document-link {
    background: url(../Images/icon_document_red.svg) no-repeat left center;
}

#dropdown-description-expand {
    position: relative;
    max-height: 0;

    overflow: hidden;

    -webkit-transition: height 2s;
    transition: height 2s;
    transition-timing-function: linear;

    background-color: #555;
}

#dropdown-description-expand.expanded {
    max-height: none;

    padding: 20px 5%;
    border-top: 1px solid #ddd;
}

#dropdown-description-expand.expanded p {
    color: #b9b9b9;
}

#description-expand {
    display: block;
    width: 100%;
    height: 40px;

    padding: 10px 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin: 0 auto;

    background: #fff url("../Images/icon_expand.svg") no-repeat center center;
    cursor: pointer;
}

#dropdown-description-expand.expanded + #description-expand {
    background: #fff url("../Images/icon_contract.svg") no-repeat center center;
}

.hero p {
    text-align: center;
}

.hero ul.product-features-list {
    padding: 20px 33%;
}

.hero ul.product-features-list li {
    list-style-type: none;

    padding-left: 20px;

    background: url("../Images/icon_arrowbullet.svg") no-repeat left 6px;
}

/*********************************************************************************************************************************************************/

#product-details {
    background-color: #fff;
}

#product-details .left-content {
    float: left;
}

#product-details .image-container {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    padding: 0;

    background-color: #fff;
}

#product-details .left-content,
#product-details .description-container {
    float: left;
    width: 46%;

    margin: 0 2%;
}

#product-details .image-container img {
    display: block;
    width: 100%;
    max-width: 230px;

    margin: 0 auto;
}

#product-details h2 {
    margin-top: 0;
}

#product-details h2 span {
    margin: 0 0 10px;
}

#product-details .description-container p {
    margin-top: 30px 0 0;
}

#product-details .description-container ul.product-features-list li {
    list-style-type: none;

    padding-left: 20px;

    background: url("../Images/icon_arrowbullet.svg") no-repeat left 6px;
}

#product-details .call-to-action {
    text-align: center;

    border-top: 1px solid #ddd;
    margin-top: 20px;
}

#product-details .call-to-action .feature-text {
    margin: 20px 0 10px;
}

#product-details .button-grey {
    display: inline-block!important;
    width: 100%;
    max-width: 200px;

    margin: 10px 0 0;
}

#product-details .pdf-link-container ul {
    padding-bottom: 20px;
    margin: 20px 0;
}

#product-details .pdf-link-container li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    float: left;
    width: 50%;

    list-style-type: none;
    line-height: 20px;
}

#product-details .pdf-link {
    display: none;
}

#product-details .pdf-link[href] {
    display: block;

    line-height: 2rem;

    padding-left: 24px;
    background: url("../Images/icon_document_red.svg") no-repeat left center;
}

#lblManuals,
#lstManuals {
    display: block;
}

#lblManuals {
    margin-top: 20px;
}

#lstManuals {
    width: 250px;
    height: 40px;

    padding: 0 0 0 10px;
    border: 1px solid #b9b9b9;
    margin-bottom: 20px;

    background-color: #fff;
}

.warning-section {
    line-height: 30px;
    text-align: center;

    margin: 20px 0 0 0;
}

.warning-section .warning-icon {
    position: relative;
    top: 5px;
}

#product-options {
    padding: 45px 0;
    border-top: 1px solid #e8e8e8;

    overflow: auto;

    background-color: #efefef;
}

#product-options .options-container {
    float: left;
    clear: both;
    width: 96%;

    padding: 15px 0;
    margin: 0 2%;
}

#product-options .options-container > h3 {
    clear: both;

    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    margin: 0;
}

/* At full width the product cards will be in rows of up to 6. Each card will be 15% of the container's width.
    There will be 2% margin between each card, but no margin on the
    outer sides of the 1st and 6th cards of each row. So (15% x 6) + (2% x 5) = 100% */
#product-options .options-container .product-card:nth-of-type(6n+1) {
    clear: both;

    margin: 15px 1% 15px 0;
}

#product-options .options-container .product-card:nth-of-type(6n+2),
#product-options .options-container .product-card:nth-of-type(6n+3),
#product-options .options-container .product-card:nth-of-type(6n+4),
#product-options .options-container .product-card:nth-of-type(6n+5) {
    clear: none;

    margin: 15px 1% 15px;
}

#product-options .options-container .product-card:nth-of-type(6n) {
    margin: 15px 0 15px 1%;
}

#product-options .options-container .product-card {
    width: 15%;

    padding-bottom: 0;
}

#product-options .options-container .button-container {
    margin-bottom: 10px;
}

#product-options .options-container .product-name {
    padding: 0 10px 10px;
}

#product-options .options-container .product-category,
#product-options .options-container .pdf-link-container,
#product-options .options-container .product-description {
    display: none;
}

#product-options .options-container .product-image-container {
    padding-bottom: 0;
    border-bottom: none;
    margin: 10px;
}

#product-options .options-container .button-outlined-red {
    padding: 5px 10px;
}

/**********************************************************************************************/

.cross-reference-page {
    text-align: center;
}

.selection-guide-page .hero-inner,
.cross-reference-page .hero-inner,
#faq-page .hero-inner,
#agency-approvals-page .hero-inner,
#sitemap-page .hero-inner,
#search-results-page .hero-inner {
    padding: 60px 0 0;
}

#selection-guide-menu,
#agency-approvals-menu,
#cross-reference-content,
#faq-menu {
    background-color: #fff;
}


#selection-guide-menu,
#agency-approvals-menu,
#faq-menu {
    padding: 0 0 45px;
}

#selection-guide-menu .wrapper,
#agency-approvals-menu .wrapper,
#cross-reference-content .wrapper,
#faq-menu .wrapper {
    width: 90%;

    padding: 15px 5%;
}

.cross-reference-page h3 {
    margin-top: 0;
}

#selection-guide-matrix a {
    display: block;
}

#dropdown-insulated-probe a,
#dropdown-forms-and-certifications a {
    display: block;

    padding: 4px 30px;
    margin: 8px 0;

    background: url("../Images/icon_document_red.svg") no-repeat left 3px;
}

#selection-guide-menu ul:not(.accordion-list),
#agency-approvals-menu ul:not(.accordion-list) {
    margin: 10px 0 10px 20px;
}

#selection-guide-menu .accordion-list,
#agency-approvals-menu .accordion-list,
#faq-menu .accordion-list {
    list-style-type: none;
}

#selection-guide-menu ul span,
#agency-approvals-menu ul span {
    display: block;

    margin-bottom: 5px;
}

/* The selection guide categories have 64px padding to make room on the left for the down arrow, indicating that content will be revealed below
    when the user clicks on the category. The down arrow is applied as a background image, which changes when the category is clicked to indicate
    that clicking the category a second time will hide the revealed content. */
.selection-guide-category {
    text-align: left;

    padding: 10px 64px;
    border: 1px solid #b9b9b9;
    margin: 0;

    background-color: #dcdcdc;
    background-repeat: no-repeat;
    background-position: 20px center;
    transition: all 0.25s ease;
    cursor: pointer;
}

.selection-guide-category:hover {
    background-color: #ccc;
}

.selection-guide-category {
    background-image: url("../Images/icon_expand2.svg");
}

.selection-guide-category.selected {
    background-color: #b9b9b9;
    background-image: url("../Images/icon_contract2.svg");
}

/* The selection guide inner categories are used primarily to reveal a list of quetions with expandable answers
    within the selection guide on the FAQ page. */
.selection-guide-inner-category {
    text-align: left;

    padding: 5px 64px;
    border: 1px solid #e8e8e8;
    margin: 0;

    background-color: #f7f7f7;
    background-image: url("../Images/icon_plus.svg");
    background-repeat: no-repeat;
    background-position: 20px center;
    transition: all 0.25s ease;
    cursor: pointer;
}

.selection-guide-inner-category:hover {
    background-color: #efefef;
}

.selection-guide-inner-category.selected {
    background-color: #b9b9b9;
    background-image: url("../Images/icon_minus.svg");
}

#selection-guide-matrix {
    background-image: url("../Images/icon_document_red.svg");
}

.selection-guide-dropdown-content,
.selection-guide-inner-dropdown-content {
    height: 0;

    overflow: hidden;
}

.selection-guide-dropdown-content.expanded,
.selection-guide-inner-dropdown-content.expanded {
    height: auto;

    padding: 20px 5%;
    border-color: #e8e8e8;
    border-style: solid;
    border-width: 0 1px 1px;
}

#faq-menu .selection-guide-dropdown-content.expanded {
}

.selection-guide-dropdown-content .image-container {
    float: left;
    width: 25%;

    margin: 30px 0;
}

.selection-guide-dropdown-content .image-container:nth-of-type(4n+1) {
    clear: left;
}

.selection-guide-dropdown-content .image-container:nth-of-type(4n+2),
.selection-guide-dropdown-content .image-container:nth-of-type(4n+3),
.selection-guide-dropdown-content .image-container:nth-of-type(4n+4) {
    clear: none;
}

.selection-guide-dropdown-content .image-container img {
    width: 80%;

    padding: 0 10%;
}

ul.arrow-list {
    list-style-type: none;
}

ul.arrow-list > li {
    padding-left: 20px;

    background: url(../Images/icon_arrowbullet.svg) no-repeat left 6px;
}

ul.disc-list {
    list-style-type: disc;
}

ul.arrow-list > li,
ul.disc-list > li {
    margin-bottom: 10px;
}

.list-definitions > li {
    list-style-type: none;

    padding: 20px 0;
    border-bottom: 1px solid #e8e8e8;
}

.list-definitions > li:last-of-type {
    padding: 20px 0 0 0;
    border-bottom: 0;
}

.list-definitions span em {
    display: block;
}

.list-definitions p {
    margin: 5px 0;
}

/************************************************ Table Styles ********************************************************/

.table-colored-container {
    text-align: center;

    padding-bottom: 30px;
    border-bottom: 1px solid #ddd;
    margin: 30px 0;
}

.table-colored-container:last-of-type {
    padding-bottom: 0;
    border-bottom: none;
}

.table-colored-container h3 {
    text-align: center;

    margin: 0 0 10px;
}

.table-colored-container span {
    padding: 5px 0;
}

.table-colored-container a {
    display: inline;
}

.table-colored {
    border-collapse: collapse;
    border-color: #e8e8e8;
    margin: 0 auto;
}

table.full-width {
    width: 100%;
}

table.half-width {
    width: 50%;
}

/* The extra info row, which contains extra info cells (table headers) is used to communicate that an expanse
    of cells are related and grouped together. The visual representation is a bracket underneath the extra info cell's text
    that appears to group the columns beneath it. */
.table-colored tr th.extra-info-cell {
    position: relative;

    text-align: center;

    border: 0;

    background-color: transparent;
}

.table-colored tr th.extra-info-cell:before {
    content: "";
    position: absolute;
    top: 23px;
    left: 0;
    width: 96%;
    height: 5px;

    border-width: 1px 1px 0 1px;
    border-color: #797979;
    border-style: solid;
    margin: 0 2%;
}

.table-colored tr:not(.extra-info-row) th {
    border-color: #f7f7f7;
    border-style: solid;
    border-width: 0 1px 1px 0;

    background-color: #797979;
}

.table-colored tr th:last-child {
    border-right: 0;
}

.table-colored tr td {
    border: 1px solid #fff;
}

table.responsive p {
    margin: 0; 
}

/* The table columns create a red to orange/yellow color gradient and each alternating row is a darker version of the column color. */

/* The first (key) column has desaturated rows */
.table-colored tr:nth-of-type(even) td:nth-of-type(1) { background-color: #f7f7f7; }
.table-colored tr:nth-of-type(odd) td:nth-of-type(1) { background-color: #fff; }

/* The remaining columns begin in a red hue and go through to yellow and back to orange. */

.table-colored tr:nth-of-type(even) td:nth-of-type(2) { background-color: #f8cac7; }
.table-colored tr:nth-of-type(odd) td:nth-of-type(2) { background-color: #fae2e0; }
.table-colored tr:nth-of-type(even) td:nth-of-type(3) { background-color: #f8d6c7; }
.table-colored tr:nth-of-type(odd) td:nth-of-type(3) { background-color: #fae8e0; }
.table-colored tr:nth-of-type(even) td:nth-of-type(4) { background-color: #f8e2c7; }
.table-colored tr:nth-of-type(odd) td:nth-of-type(4) { background-color: #faeee0; }
.table-colored tr:nth-of-type(even) td:nth-of-type(5) { background-color: #f8eec7; }
.table-colored tr:nth-of-type(odd) td:nth-of-type(5) { background-color: #faf4e0; }
.table-colored tr:nth-of-type(even) td:nth-of-type(6) { background-color: #f5f8c7; }
.table-colored tr:nth-of-type(odd) td:nth-of-type(6) { background-color: #f9fae0; }
.table-colored tr:nth-of-type(even) td:nth-of-type(7) { background-color: #f8eec7; }
.table-colored tr:nth-of-type(odd) td:nth-of-type(7) { background-color: #faf4e0; }

/* The table's outer border will be light grey, but it is currently being covered by the td borders so... */

.table-colored tr td:first-child { border-left-color: #e8e8e8; }
.table-colored tr td:last-child { border-right-color: #e8e8e8; }
.table-colored tr:last-child td { border-bottom-color: #e8e8e8; }

.table-colored tr td input[type=text] {
    background-color: transparent;
    border: none;
}

/******************************************* CONTACT US PAGE ************************************************/

#hero-contact-us {
    display: table;
    width: 100%;
    height: 400px;

    overflow: hidden;

    padding: 0;

    background: #555 url(../Images/background_contactus_lomo.jpg) no-repeat fixed center -100px;
    background-size: cover;
}

    #hero-contact-us .wrapper {
        display: table-cell;

        vertical-align: middle;
        text-align: center;

        padding: 0 10%;
        margin: 0 auto;
    }

#local-contacts {
    text-align: center;

    padding: 45px 0;

    background-color: #202020;
}

    #local-contacts .wrapper {
        padding: 15px 2%;
    }

    #local-contacts h2 {
        margin-top: 0;
    }

    #local-contacts h3 {
        text-transform: uppercase;

        margin-top: 0;
    }

    #local-contacts ul {
        font-size: 0;
        text-align: center;

        margin: 15px 0 0;
    }

    #local-contacts h3 {
        font-size: medium;
    }

        #local-contacts h3 > a {
            color: inherit;
            transition: all 0.25s ease;
        }

        #local-contacts h3 > a:hover {
            color: #999;
        }

    #local-contacts li {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        display: inline-block;
        width: 31.333333333%;
        height: 100%;
        min-height: 14rem;

        list-style-type: none;
        text-align: left;
        vertical-align: top;

        padding: 20px 20px 20px 40px;
        margin: 15px 1%;

        background: #151515 url(../Images/icon_location.svg) no-repeat 10px 20px;
    }

.select-location {
    display: block;
    width: 200px;
    height: 40px;

    padding: 0 0 0 10px;
    border: 1px solid #b9b9b9;
    margin: 0 auto 30px;

    background-color: #fff;
}

.contact-phone,
.contact-fax,
.contact-email {
    padding-left: 25px;
}

.contact-phone {
    background: url(../Images/icon_phone.svg) no-repeat left center;
}

.contact-fax {
    background: url(../Images/icon_fax.svg) no-repeat left center;
}

.contact-email {
    background: url(../Images/icon_email.svg) no-repeat left center;
}

#corporate-contacts {
    text-align: center;
    
    padding: 45px 0;
    border-top: 1px solid #fe0033;

    background-color: #910023;
}

    #corporate-contacts .wrapper {
        padding: 15px 2%;
    }

    #corporate-contacts h2 {
        margin-top: 0;
    }

    #corporate-contacts h3 {
        margin-top: 0;
    }

    #corporate-contacts h3,
    #corporate-contacts p,
    #corporate-contacts a {
        color: #f7f7f7;
    }

    #corporate-contacts ul {
        width: 90%;
        margin: 0 auto;
    }

    #corporate-contacts li {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        float: left;
        width: 48%;

        text-align: left;
        list-style-type: none;

        padding: 20px 20px 20px 40px;
        border-left: 6px solid #fe0033;
        margin: 0 1% 20px;

        background: #b5002c url(../Images/icon_location.svg) no-repeat 10px 20px;
    }

    #corporate-contacts .feature-text {
        margin-top: 0;
    }

#product-return {
    background-color: #fff;
    padding-top: 60px;
}

#request-literature {
    padding-top: 0;
}

#request-literature,
#product-return {
    text-align: center;
}

#request-literature:before {
    content: "";
    display: block;
    position: relative;
    top: 0;

    width: 0;
    height: 0;

    border-top: 30px solid #910023;
    border-right: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid transparent;
    margin: 0 auto;
}

    #hero-product-return .hero-inner {
        padding-bottom: 0;
    }

    #request-literature .wrapper,
    #product-return .wrapper {
        padding: 15px 2%;
    }

    #request-literature h2,
    #product-return h2 {
        margin-top: 0;
    }

    #request-literature .feature-text,
    #product-return .feature-text {
        margin-top: 0;
    }

.form-wrapper {
    width: 100%;
    max-width: 800px;
    padding: 10px;
    margin: 0 auto;
}

    .form {
        width: 100%;
        margin: 0 -10px;
        text-align: left;
        font-size: 0;
    }

    .form h3 {
        text-align: center;
    }

    .form h3,
    .form p {
        padding: 0 10px;
    }

    .form .header-left-redfill,
    .form .header-left-greyfill {
        text-align: left;
        padding: 2px 10px;
        color: #f7f7f7;
    }

    .form .header-left-redfill {
        background-color: #b70025;
    }

    .form .header-left-greyfill {
        background-color: #797979;
    }

    .form-row {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        margin: 0 -10px;
    }

    .form-col {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        display: inline-block;

        position: relative;

        text-align: left;
        vertical-align: top;
        padding: 0 10px;
        margin: 5px 0;
    }

    .form-col.col-1 { width: 25%; }
    .form-col.col-2 { width: 50%; }
    .form-col.col-4 { width: 100%; }

    .form-col.col-1:empty,
    .form-col.col-2:empty,
    .form-col.col-4:empty {
        display: none;
        margin: 0;
    }

        .form-col input[type=text],
        .form-col select,
        .form-col textarea,
        .form-col input[type=submit] {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: block;
            width: 100%;
        }

        .form-col input[type=text],
        .form-col select,
        .form-col textarea {
            border: 1px solid #b9b9b9;
            background-color: #fff;
        }

        .form-col input[type=text],
        .form-col select {
            height: 40px;
            padding: 0 0 0 10px;
        }

        .form-col textarea {
            height: 160px;
            padding: 10px;
        }

        .form-col input[type=submit] {
            cursor: pointer;
            transition: all 0.25s ease;
            color: #f7f7f7;
            text-transform: uppercase;
            padding: 12px 24px;
            border: 0;
            border-radius: 3px;
            margin-top: 25px;
        }

        .form-col input[type=checkbox],
        .form-col input[type=radio] {
            display: inline-block;
            width: 20px;
            height: 20px;
            vertical-align: middle;
            margin: 0 15px 0 0;
            background-color: #fff;
        }

        .form-col label,
        .form-col span {
            vertical-align: middle;
        }

    .form .form-button-container {
        position: relative;
        width: 150px;
        display: inline-block;

        text-align: left;
        list-style-type: none;
        padding: 0 10px;
        margin: 20px 0;
    }

        .form .form-button-container .button-red,
        .form .form-button-container .button-grey {
            width: 100%;
        }

    table.rma-types-list {
        margin: 0;
    }

    table.rma-types-list tr td {
        padding-right: 30px;
        background-color: none!important;
        border: none;
    }

.required-field-validator:before {
    content: "";
    position: absolute;
    top: -9px;
    left: 9px;
    display: inline-block;
    width: 0;
    height: 0;
    border-width: 0 8px 9px 8px;
    border-style: solid;
    border-color: transparent transparent #d8d8d8 transparent;
}

.required-field-validator {
    z-index: 8999;
    position: absolute;
    right: 15px;
    /*bottom: -10px;*/
    font-size: .8em;
    color: red;
    padding: 5px;
    background-color: #fff;
    box-shadow: 0 1px 10px 1px rgba(0,0,0,0.35);
    border-radius: 2px;
    border: 1px solid #d8d8d8;
}

.required-field-validator:after {
    content: "";
    position: absolute;
    top: -9px;
    left: 10px;
    display: inline-block;
    width: 0;
    height: 0;
    border-width: 0 8px 9px 8px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}

    .required-field-label,
    .required-field-validator {
        color: #fe0033;
    }

    .enabled-field-label {
        font-weight: bold;
    }

    #form-submitted-page .hero-inner {
        padding: 170px 0;
    }

    #form-submitted-page .button-container {
        padding-top: 60px;
    }

.success-message,
.error-message {
    display: block;
    padding: 10px 10px 10px 40px;
}

.success-message {
    background: #3dcd58 url(../Images/icon_success_white.svg) 10px 10px/20px 20px no-repeat;
}

.error-message {
    background: #ffd100 url(../Images/icon_aboutus.svg) 10px 10px no-repeat;
}

/******************************************** SITEMAP PAGE **********************************************/

#sitemap {
    overflow: auto;

    padding: 40px 5% 60px;

    background-color: #fff;
}

#sitemap li {
    list-style-type: none;
}

#sitemap .arrow-list li a {
    padding: 0;
}

#sitemap h2,
#sitemap h3,
#sitemap h4 {
    margin: 0;
}

#sitemap h2 {
    padding: 10px 0;
    border-bottom: 2px solid #ddd;
}

#sitemap .sitemap-outer-list-item:last-of-type h2:last-of-type {
    padding: 0;
}

#sitemap a {
    display: inline-block;

    text-decoration: none;

    padding: 10px 0;
}

.sitemap-outer-list-item {
    float: left;
    width: 100%;

    margin: 15px 0;
}

.sitemap-outer-list-item:first-of-type {
    margin: 0 0 15px;
}

.sitemap-inner-list-item {
    float: left;
    width: 32%;

    margin: 15px 0;
}

.sitemap-inner-list-item:nth-of-type(3n+2) {
    margin: 15px 2%;
}

.sitemap-inner-list-item:nth-of-type(3n+1) {
    clear: left;
}

/****************************************** SEARCH RESULTS PAGE ************************************************/

#search-results {
    height: 100%;
    min-height: 300px;

    padding: 40px 0 60px;

    background-color: #fff;
}

#search-results li {
    width: 90%;

    list-style-type: none;

    padding: 40px 0;
    border-bottom: 1px solid #ddd;
    margin: 0 5%;
}

#search-results li:after {
    content: "";
    display: block;
    clear: left;
}

#search-results li:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

#search-results .image-container {
    float: left;
    width: 100px;
    height: 100%;

    text-align: center;

    margin-right: 20px;

    background-color: #fff;
}

#search-results .image-container img {
    margin: 0 auto;
}

#search-results .description-container {
    padding-left: 120px;
}

#search-results .description-container p {
    position: relative;
    height: 4.8rem;
    
    overflow: hidden;
}

#search-results .description-container p:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;

    display: block;
    height: 1.6rem;
    width: 75%;

    background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 50%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(255,255,255,1) 50%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(255,255,255,1) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

#search-results h2 {
    margin: 0 0 10px;
}

#search-results p {
    margin: 0;
}

#search-results .search-term {
    font-weight: bold;
    font-size: .875rem;
}

/******************************************************************************************/

#hero-about-us {
    display: table;
    width: 100%;
    height: 400px;

    overflow: hidden;

    background: #555 url(../Images/background_aboutus.jpg) no-repeat fixed center;
    background-size: cover;
}

    #hero-about-us .wrapper {
        display: table-cell;
        width: 80%;

        vertical-align: middle;
        text-align: center;

        padding: 0 10%;
    }

    #hero-about-us .hero-header-subtext {
        margin: 0;
    }

.about-us-section {
    text-align: center;

    border-bottom: 1px solid #e8e8e8;
}

    .about-us-section .wrapper {
        width: 90%;

        overflow: auto;

        padding: 0 5%;
        margin: 15px auto;
    }


    .about-us-section h2 {
        margin-top: 0;
    }

    .about-us-section .outer-image-container {
        margin: 30px -10px;
    }

    .about-us-section .outer-image-container:last-of-type {
        margin: 30px -10px 0;
    }

    /* clearfix */
    .about-us-section .outer-image-container:after {
        content: "";
        display: block;
        clear: both;
    }

    .about-us-section .image-container {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        
        overflow: hidden;

        padding: 10px;
    }

        .about-us-section .image-container img {
            display: block;
            width: 100%;
            height: auto;

            border: 1px solid #ddd;
        }

    .about-us-section .image-container.third-width,
    .about-us-section .image-container.half-width {
        float: left;
    }

    .about-us-section .image-container.third-width {
        width: 33.333333333%;
    }

    .about-us-section .image-container.half-width {
        width: 50%;
    }

#about-us-intro {
    background-color: #202020;
}

    #about-us-intro .wrapper {
        width: 90%;

        padding: 0 5%;
        margin: 0 auto;
    }

    #about-us-intro .feature-text {
        color: #999;

        margin: 0;
    }

#about-us-1,
#about-us-3,
#about-us-5 {
    background-color: #fff;
}

#about-us-2 {
    border-bottom: none;

    background-color: #fff;
}

#about-us-2 {

    background: #f7f7f7 url(../Images/background_worker.jpg) no-repeat fixed center center;
}

#about-us-4 {
    background: #f7f7f7 url(../Images/background_invensys.jpg) no-repeat fixed center center;
    background-size: cover;
}

/* These sections have dark backgrounds. Recolor the text and decoration to a lighter color to make it legible. */
    #about-us-4 p,
    #about-us-2 p {
        color: #f7f7f7;
    }

/******************************************************************************************/
#quote {
    width: 40%;
    text-align: center;
    padding: 60px 30%;
    border-top: 1px solid #e8e8e8;
    background: #555 url(../Images/background_quote.jpg) no-repeat fixed center center;
    background-size: cover;
}

    #quote blockquote {
        padding: 60px 0;
        margin: 0;

        background: url(../Images/quote.png) no-repeat center top;
    }

/*************************************************************************************** MEDIA QUERIES *********************************************************************************************/

@media screen and (max-width: 1200px) {

#hero-home h1,
#hero-contact-us h1,
#hero-about-us h1 {
    font-size: 3rem;
}

#hero-home {
    height: 400px;
}

#hero-contact-us {
    height: 400px;
}

}

/*************************************************/

@media screen and (max-width: 1000px) {

#local-contacts li {
     width: 48%;
}

#local-contacts li:nth-of-type(n) {
    margin: 0 1% 20px;
}

#corporate-contacts ul {
    width: 100%;
}

}

/*************************************************/

@media screen and (max-width: 930px) {

#product-families li:nth-child(n) {
    width: 40%;

    padding: 0 5%;
    margin: 20px 0;
}
#product-families li:nth-child(even) {
    clear: none;
}

#product-families li:nth-child(odd) {
    clear: both;
}

.sitemap-outer-list-item {
    float: left;
    width: 100%;

    margin: 15px 0;
}

.sitemap-outer-list-item:first-of-type {
    margin: 0 0 15px;
}

.sitemap-inner-list-item:nth-of-type(n) {
    float: left;
    width: 48%;

    margin: 15px 1%;
}

.sitemap-inner-list-item:nth-of-type(even) {
    clear: none;
}

.sitemap-inner-list-item:nth-of-type(odd) {
    clear: left;
}

footer ul:nth-of-type(n) {
    width: 33.333333333%;
}

#quote {
    width: 90%;

    padding: 40px 5%;
}

}

/************************************/

@media screen and (max-width: 767px) {

#product-families h3 {
    font-size: 1rem;
}

header h1 {
    float: none;

    margin: 0 auto;
}

header .search-container {
    float: none;
    width: 340px;

    margin: 20px auto 0;
}

nav .wrapper {
    width: 100%;

    padding: 0;
}

nav .nav-container {
    float: none;
}

nav .nav-container li {
    width: 20%;

    text-align: center;
}

nav .nav-container li a {
    font-size: 0.688rem;

    padding: 20px 0;
}

nav .nav-container li .dropdown:after {
    top: 65%;
    right: 0;
    bottom: auto;
    left: 0;
    
    margin: 0 auto;
}

nav .nav-container ul.sub-navigation-list li a{
    font-size: 0.688rem;
    color: #f7f7f7;

    padding: 10px 25px;
}

#hero-home .wrapper {
    padding: 80px 2%;
}

#hero-contact-us,
#hero-about-us {
    height: 300px;
}

#hero-home h1,
#hero-contact-us h1,
#hero-about-us h1 {
    font-size: 2.25rem;
}

#hero-home h1 span,
#hero-about-us h1 span {
    font-size: 1.125rem;
}

section {
    padding-top: 30px;
    padding-bottom: 30px;
}

#about-us-snippet .image-container,
#about-us-snippet .text-container {
    width: 46%;

    margin: 0 2%;
}

#about-us-snippet .image-container {
    max-height: 300px;
}

#hero-contact-us,
#hero-about-us {
    padding: 0;

    background-size: auto 100%;
    background-attachment: initial;
}

#hero-contact-us {
    background: #555 url(../Images/background_contactus_lomo.jpg) no-repeat center center;
    background-size: 100% auto;
}

.product-card,
.product-card:nth-of-type(3n-1) {
    width: 46%;

    margin: 15px 2%;
}

.product-card:nth-of-type(3n+1) {
    clear: none;
}

.product-card:nth-of-type(odd) {
    clear: both;
}

#product-details .pdf-link-container li {
    float: left;
    width: 100%;
}

#product-options .options-container {
    width: 100%;

    margin: 0;
}

#product-options .options-container > h3 {
    text-align: center;

    padding-top: 15px;
    margin: 0 1%;
}

#product-options .options-container > h3:first-of-type {
    padding-top: 0;
}

/* At under 768px width the product cards will be in rows of up to 4. Each card will be 23% of the container's width.
    There will be 1% left and right margin on each card.
    So (23% x 4) + (1% x 8) = 100% */
#product-options .options-container .product-card:nth-of-type(n) {
    clear: none;
    width: 23%;

    margin: 15px 1%;
}

.selection-guide-dropdown-content .image-container {
    float: left;
    width: 32%;
}

.selection-guide-dropdown-content .image-container:nth-of-type(3n+1) {
    clear: left;
}

.selection-guide-dropdown-content .image-container:nth-of-type(3n+2),
.selection-guide-dropdown-content .image-container:nth-of-type(3n+3) {
    clear: none;
}

.selection-guide-dropdown-content .image-container:nth-of-type(3n+2) {
    margin: 30px 2%;
}

.selection-guide-dropdown-content .image-container img {
    width: 90%;

    padding: 0 5%;
}

table.half-width {
    width: 100%;
}

/* At screen sizes under 767px <p> elements will become inline because the
   Responsive Tables jquery does not function correctly when a <td> contains line breaks.
   A 30px right margin will also be applied to these <p> tags for legibility, since they will now all be on one line. */

table.responsive p {
    display: inline;

    margin-right: 30px; 
}

#local-contacts,
#corporate-contacts {
    padding: 20px 0;
}

footer ul {
    padding: 0 5%;
}

footer ul:first-of-type,
footer ul:nth-of-type(2) {
    width: 40%;
}

footer ul:nth-of-type(3) {
    width: 90%;

    padding: 0 5%;
}

footer ul:nth-child(3) {
    border-top: 2px solid #333;
} 

#copyright {
    width: 90%;

    padding: 30px 5%;
}

}

/************************************/

@media screen and (max-width: 700px) {

#product-details {
    padding: 0 0 30px;
}

#product-details .left-content,
#product-details .description-container {
    float: none;
    width: 90%;

    margin: 0 5%;
}

#product-details .left-content h3 {
    display: none;
}

#product-details .pdf-link-container ul {
    border-bottom: 1px solid #ddd;
}

#product-details .pdf-link-container ul:after {
    content: "";
    display: block;
    clear: both;
}

#product-details .pdf-link-container li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    float: left;
    width: 40%;

    margin: 0 5%;
}

#lblManuals {
    margin: 20px 5% 0;
}

#lstManuals {
    margin: 0 5%;
}

}

/************************************/

@media screen and (max-width: 640px) {

#about-us-snippet .image-container,
#about-us-snippet .text-container {
    float: none;
    width: 90%;

    margin: 10px 5%;
}

#about-us-snippet .text-container h2,
#about-us-snippet .text-container p,
#about-us-snippet .text-container {
    text-align: center;
}

.header-deco-center:before {
    content: "";
    position: absolute;
    left: 12%;
    bottom: -5px;
    z-index: 1;
    width: 76%;
    
    margin: auto;

    background-color: #ddd;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fe0033+0,fe0033+50,7db9e8+100&1+0,0+100 */
    background: -moz-linear-gradient(left,  rgba(125,185,232,0) 0%, rgba(254,0,51,0.5) 50%, rgba(125,185,232,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(125,185,232,0) 0%,rgba(254,0,51,0.5) 50%,rgba(125,185,232,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(125,185,232,0)) 0%,rgba(254,0,51,0.5) 50%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.header-deco-center:after {
    margin: 0 auto;
}

.selection-guide-dropdown-content .image-container img {
    width: 100%;

    padding: 0;
}

#corporate-contacts li,
#local-contacts li {
    width: 80%;
}

#corporate-contacts li:nth-of-type(n),
#local-contacts li:nth-of-type(n) {
    margin: 0 10% 20px;
}

#local-contacts li {
    min-height: 0;
}

#local-contacts h3,
#corporate-contacts h3 {
    margin-top: 0;
}

.sitemap-outer-list-item {
    float: left;
    width: 100%;

    margin: 15px 0;
}

.sitemap-outer-list-item:first-of-type {
    margin: 0 0 15px;
}

.sitemap-inner-list-item:nth-of-type(n) {
    float: none;
    width: 90%;

    border-bottom: 1px solid #ddd;
    margin: 15px 5%;
}

.sitemap-inner-list-item:nth-of-type(n) {
    clear: none;
}

}

/************************************/

@media screen and (max-width: 520px) {


#hero-home h1,
#hero-contact-us h1,
#hero-about-us h1,
.hero h1 {
    font-size: 1.75em;
}

#about-us-snippet .text-container h2,
#local-contacts h2,
#corporate-contacts h2,
#request-literature h2 {
    font-size: 1.375rem;
}

section {
    padding: 20px 0;
}

.hero-inner {
    padding: 40px 0;
}

.hero .hero-header-subtext {
    font-size: 1rem;
}

.feature-text {
    font-size: 0.875rem;
}

nav .nav-container li a,
nav .nav-container ul.sub-navigation-list li a {
    font-size: 0.75rem;
}

header {
    padding: 10px 0;
}

header h1 {
    float: left;
    width: 50px;
    height: 50px;

    text-indent: -10000px;

    margin: 0;

    background: url(../Images/logo_RSIPD_mrcontrols.png) no-repeat center;
}

header .search-container {
    float: right;

    margin-top: 4px;
}

nav .nav-container ul {
    height: 0;

    overflow: hidden;
}

nav .nav-container ul#main-navigation-list.open {
    height: auto;

    -webkit-transition: all 1.5s ease;
}

nav .nav-container li {
    float: none;
    width: 100%;

    margin: 0;
}

nav .nav-container li a {
    position: relative;

    color: #999;
    text-align: left;

    padding: 10px 0 10px 20px;
    border-top: 1px solid #4f4f4f;
}

nav .nav-container li a:hover {
    color: #fff;

    background-color: #777;
}

nav .nav-container li .dropdown:after {
    content: "";
    display: block;
    position: absolute;
    top: 48%;
    right: 20px;
    bottom: auto;
    left: auto;
    width: 0;
    height: 0;

    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #999;
}

nav .nav-container li .dropdown:hover:after {
    border-top: 6px solid #fff;
}

nav .nav-container ul.sub-navigation-list li a {
    padding: 10px 0 10px 40px;
}

nav {
    background: #555;
}

nav .nav-container ul.sub-navigation-list {
    position: static;
}

nav .nav-container ul.sub-navigation-list li {
    display: block;
    width: 100%;

    background-color: #3a3a3a;
}

nav .nav-container ul.sub-navigation-list li a:hover {
    background-color: #303030;
}

#burger-nav {
    width: 100%;
    height: 40px;

    background: url(../Images/icon_burgernav.svg) #4e4e4e no-repeat 98% center;
    cursor: pointer;
}

#hero-home {
    height: 300px;
}

#hero-contact-us,
#hero-about-us {
    height: 200px;
}

#hero-contact-us .wrapper,
#hero-about-us .wrapper {
    padding: 0 2%;
}

#hero-home .button-container a {
    margin: 5px;
}

#about-us-snippet img {
    padding: 20px 0;

}

#product-families li:nth-child(1),
#product-families li:nth-child(2),
#product-families li:nth-child(3),
#product-families li:nth-child(4),
#product-families li:nth-child(5),
#product-families li:nth-child(6) {
    float: none;
    display: block;
    width: 80%;

    padding: 20px 0;
    margin: 0 10%;
}

#product-families li:nth-child(-n+4) {
    border-bottom: 1px solid #e0e0e0;
}

#product-families .feature-text {
    margin: 10px 0;
}

.hero .pdf-link-container li {
    float: none;
}

#hero-level .pdf-link-container li,
#hero-control-valves .pdf-link-container li,
#hero-regulators .pdf-link-container li,
#hero-vibration-controls .pdf-link-container li,
#hero-faq .pdf-link-container li {
    float: none;
    margin: 0 auto;
}

.hero .pdf-link-container li a {
    display: inline-block;
}

.hero ul.product-features-list {
    padding: 20px 8%;
}

.hero #description-expand {
    margin: 40px auto 0;
}

#cross-reference-content {
    padding: 20px 0;
}

.product-card:nth-of-type(n) {
    float: none;
    width: 90%;

    margin: 15px 5%;
}

.product-card-huge-link {
    display: none;
}

#product-details .pdf-link-container li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    float: none;
    width: 100%;

    margin: 0 5%;
}

/* At under 520px width the product cards will be in rows of up to 2. Each card will be 46% of the container's width.
    There will be 2% left and right margin on each card.
    So (46% x 2) + (2% x 4) = 100% */
#product-options .options-container .product-card:nth-of-type(n) {
    float: left;
    width: 46%;

    margin: 15px 2%;
}

#local-contacts li,
#corporate-contacts li,
#request-literature-form,
#sitemap .sitemap-outer-list-item {
    width: 90%;
}

#local-contacts li:nth-of-type(n),
#corporate-contacts li:nth-of-type(n),
#request-literature-form,
#sitemap .sitemap-outer-list-item {
    margin: 0 5% 10px;
}

#search-results li {
    padding: 20px 0;
}

#search-results li:first-of-type {
    padding-top: 0;
}

#search-results li:last-of-type {
    padding-bottom: 0;
}

#search-results .image-container {
    width: 100%;

    padding: 10px 0;
    margin: 0;
}

#search-results .description-container {
    width: 90%;

    text-align: center;

    padding: 0;
    margin: 0 5%;
}

#search-results .description-container p {
    height: 6.4rem;
}

#about-us-intro,
.about-us-section {
    padding: 20px 0;
}

    .about-us-section .outer-image-container {
        margin: 10px -10px;
    }

    .about-us-section .image-container {
        padding: 5px;
    }

    .about-us-section .image-container.half-width {
        width: 100%;
    }

    .about-us-section .image-container.third-width:nth-of-type(3n+1) {
        width: 100%;
    }

    .about-us-section .image-container.third-width:nth-of-type(3n+2),
    .about-us-section .image-container.third-width:nth-of-type(3n+3) {
        width: 50%;
    }

#customer-list li {
    margin: 5px;
}

#request-literature:before {
    border-top: 20px solid #910023;
    border-right: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid transparent;
}

}

/************************************/

@media screen and (max-width: 480px) {

#quote {
    font-size: 1rem;
}

.selection-guide-dropdown-content .image-container:nth-of-type(n) {
    float: left;
    width: 48%;

    margin: 30px 1%;
}

.selection-guide-dropdown-content .image-container:nth-of-type(odd) {
    clear: left;
}

.selection-guide-dropdown-content .image-container:nth-of-type(even) {
    clear: none;
}

}

/************************************/

@media screen and (max-width: 440px) {

header .search-container {
    width: 250px;
}

header .search-container .search-field {
    width: 210px;
}

#hero-contact-us .wrapper,
#hero-about-us .wrapper {
    padding: 0;
}

#request-literature-form li.form-button-container {
    width: 48%;
}

#request-literature-form li.form-button-container:first-of-type {
    margin: 25px 4% 0 0;
}

}

#local-contacts a {
    color: #797979;
}

#local-contacts a:hover {
    color: #555;
}