@charset "utf-8";
/* ==========================================================================
 Global CSS - Visionary Site OnCall (visionary.com)
 ========================================================================== */
*,
*:before,
*:after {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
}

html {
 	height: 100%;
 	font-size: 62.5%;
}

body {
 	height: 100%;
 	font-size: 1.6rem; /* reset base body font to 16px */
 	font-family: 'Open Sans', sans-serif;
 	line-height: 1.5; /* reset base leading */
 	color: #616f78;
 	background-color: #fff;
 	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); /* smooths type in all browsers */
 	-webkit-font-smoothing: subpixel-antialiased;
}

#preview {
 	position: absolute;
 	z-index: 9999;
 	top: 0;
 	left: 0;
 	right: 0;
 	padding: 1rem 0;
 	background-color: rgba(0, 0, 0, 0.6);
 	color: #fff;
 	font-size: 1.6rem;
 	font-weight: 700;
 	line-height: 1.6;
 	text-align: center;
}

img { border: 0; }

a { color: #007dc4; }

/* add high visibility focus indicators */
a:hover, a:focus {
 	color: #7aba3e;
}

#preview a { text-decoration: none; }
#preview a:hover, #preview a:focus { color: #fff; }

.error {
 	margin: 0 0 1.5rem;
 	padding-top: 0;
 	padding-left: 1.7rem;
 	font-weight: 700;
 	color: #c00;
}

h1,
h2,
h3 {
 	margin: 1rem 0;
 	padding: 0;
 	font-weight: 700;
 	color: #007dc4;
 	line-height: 1.125;
 	display: inline-block;
}

h1 {
 	font-size: 4rem;
 	font-weight: 100;
 	margin: 2rem 0;
}
.page h1 { display: none; }

h2 {
 	font-size: 3.2rem;
 	font-weight: 100;
}
h3 {
 	font-size: 2.8rem;
}

/* add h4, h5, h6 */
h4 {
 	font-size: 2.4rem;
 	font-weight: 100;
}
h5 {
 	font-size: 1.8rem;
	color: #007dc4;
	padding: .5rem 0;
}
h6 {
 	font-size: 1.4rem;
 	text-transform: uppercase;
}

.prod_type {
	font-weight: bold;
	font-size: 1.4rem;
	text-transform: uppercase;
}

sup,
sub {
 	font-size: 70%;
 	font-weight: 700;
}

sup { vertical-align: super; }
sub { vertical-align: sub; }

label.req:after {
 	content: '*';
 	color: #c00;
 	margin-left: .25rem;
 	font-family: sans-serif;
}

hr {
 	width: 100%;
 	height: 1px;
 	border: 0;
 	background-color: #ccc;
}

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

.cf:after { clear: both; }

.cf { *zoom: 1; }

.overlay {
 	position: absolute;
 	top: 0;
 	bottom: 0;
 	left: 0;
 	right: 0;
 	z-index: 999;
 	background: #fff;
 	background: rgba(255, 255, 255, 0.8);
}

.overlay_spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80px;
	height: 80px;
	margin: -40px 0 0 -40px;
}

.overlay_spinner img {
	width: 100%;
	max-width: 350px;
}

.overlay_content {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin-top: 40px;
	text-align: center;
	font-weight: bold;
	color: #000;
}



/* ==========================================================================
 Category/Filter toggle viewer
 ========================================================================== */
 .viewer_contain.container {
 	margin-bottom: 2rem;
 	margin-top: 3rem;
 }

 span.viewer,
 div.viewer,
 a.viewer {
	margin: 0 1rem 1rem 0;
	color: #000;
	cursor: pointer;
	text-decoration: none;
	border-right: 1px solid #000;
	padding-right: 1.4rem;
	line-height: 1;
	display: inline-block;
}

 span.viewer:last-child,
 div.viewer:last-child,
 a.viewer:last-child {
 	border-right: none;
	margin-right: 0;
	padding-right: 0;
 }

 /* add high visibility focus indicators */
 span.viewer:hover,
 span.viewer:focus,
 div.viewer:hover,
 div.viewer:focus,
 a.viewer:hover,
 a.viewer:focus {
 	text-decoration: none;
 	color: #007DC4;
 	font-weight: normal;
 }

 span.viewer.active,
 div.viewer.active,
 a.viewer.active {
 	font-weight: bold; /* overwrites generic link styles and establishes uniformity site-wide */
 }


/* ==========================================================================
 Page container
 ========================================================================== */
.page {
 	width: 100%;
}

.container {
	position: relative;
	display: block;
	margin: 0 auto;
	padding: 0;
	max-width: 1000px;
}


/* ==========================================================================
 Header (contains navigation, logo, etc)
 ========================================================================== */
 header {
 	position: relative;
 	z-index: 30;
 	overflow: visible;
 	max-width: 1000px;
 	margin: 0 auto;
 	background-color: #fff;
 }

 header .container {
 	padding: 2rem 0 0 0;
 }

header .container > div {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

 header .logo {
	line-height: 1;
	text-decoration: none;
	 margin: 30px 0 15px 0;
 }

.logo img {
 	width: 96px;
 	max-width: 100%; /* logo never wider than container */
 	max-height: 100%; /* logo never taller than container */
 }

header .logo span {
	display: block;
	text-decoration: none;
	font-size: 1.2rem;
	font-style: italic;
	color: #616f78;
	margin: 10px 0 0 0;
}

header .site_search {
	margin-top: .5rem;
	text-align: right;
}

header .site_search input[type="search"],
.swatch_search input[type="search"] {
	border: 1px solid #616f78;
	border-radius: 0.4rem;
	padding: 4px;
	height: 24px;
}

header .site_search input[type="submit"],
.swatch_search input[type="submit"] {
	background-color: #007DC4;
	width: 65px;
	height: 24px;
	border: none;
	padding: 5px 10px;
	color: white;
	cursor: pointer;
	border-radius: .4rem;
	font-size: 1.1rem;
	text-transform: uppercase;
}

header .site_search input[type="submit"]:hover {
	background-color: #7ABA3E;
}

header nav {
	display: inline-block;
	position: relative;
	width: 100%;
	margin-top: 1rem;
}

header .header_content {
	position: absolute;
	display: block;
	top: 3rem;
	right: 0;
}

header .newsletter input[type="text"] {
	padding: .5rem;
	height: 24px;
	border: 1px solid #616f78;
	border-radius: 0.4rem;
	padding: 4px;
}

header .newsletter input[type="button"] {
	padding: .3rem;
	width: 65px;
	height: 24px;
	color: #fff;
	background-color: #7ABA3E;
	border: 1px solid #7ABA3E;
	border-radius: 0.4rem;
	font-size: 1.1rem;
	 text-transform: uppercase;
	font-weight: normal;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

header .newsletter_signup_error {
	font-size: 1.4rem;
	color: #c00;
	font-style: italic;
	margin-bottom: .4rem;
}

header .newsletter {
	font-size: 1.4rem;
	color: #7aba3e;
	font-style: italic;
	margin-top: .8rem;
}

header .newsletter_signup_error:before {
	content: "**";
	margin-right: .3rem;
}

header .newsletter input[type="button"]:hover,
header .newsletter input[type="button"]:focus {
	background-color: #007DC4;
	border-color: #007DC4;
}

header .number {
	text-align: right;
	width: 100%;
}

header .number, .sample-req {
	display: inline-block;
	position: relative;
	font-weight: 100;
	font-size: 1.2rem;
}

.sample-req-button {
	background-color: #007DC4;
	border:none;
	padding: 5px 10px;
	color:white;
	cursor: pointer;
	border-radius: .4rem;
}

.sample-req-button:hover {
	background-color: #7ABA3E;
}

header .number a {
	font-weight: 700;
	color: #000;
	text-decoration: none;
	font-size: 1.3rem;
}

header .page_links {
	display: inline-block;
	vertical-align: bottom;
	padding-left: 1.2rem;
	margin-left: 1.4rem;
	border-left: 1px solid #007dc4;
}

header .page_links a {
	text-transform: lowercase;
	text-decoration: none;
	display: block;
	font-size: 1.3rem;
	line-height: 1.8rem;
	color: #616f78;
}

header .page_links a:hover,  header .page_links a:focus {
	color: #7aba3e;
}

header .search_text, header .newsletter_text {
	color: black;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.1rem;
	font-style: normal;
}


/* ==========================================================================
 Top Menu Navigation (drop-down menu)
 ========================================================================== */
.menu_toggle {
	display: none;
}

nav .menu,
nav .submenu { display: none; }

nav .top_menu {
 	position: relative;
 	z-index: 200;
 	margin: 0 0 0 0;
 	padding: 0;
 	list-style: none;
 	display: block;
 	text-align: center;
 	font-size: 0;
 	background-color: #007dc4;
 	display: -webkit-box;
 	display: -ms-flexbox;
 	display: flex;
}

nav .top_menu li {
 	position: relative;
 	z-index: 200;
 	display: inline-block;
 	vertical-align: top;

	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
 	min-width: 5rem;
}

nav .top_menu li a {
	 z-index: 200;
	 display: inline-block;
	 padding: 1rem 1.9rem;
	 font-size: 1.6rem;
	 letter-spacing: 1px;
	 font-weight: 700;
	 text-decoration: none;
	 text-transform: uppercase;
	 background-color: #007dc4;
	 color: #fff;
 }

 nav .top_menu li a:hover,
 nav .top_menu li a:focus { color: #000; }

 nav .top_menu ul.sub {
	position: absolute;
	z-index: 201;
	text-align: left;
	top: 3rem;
	left: 0;
	display: none;
	min-width: 18rem;
	width: 100%;
	height: auto;
	padding: 0.5rem 1.4rem 5rem 1.4rem;
	list-style: none;
	background: #007dc4;
	/* FF3.6+ */
	background: -moz-linear-gradient(top, rgba(0,125,196,1) 0%, rgba(0,125,196,1) 50%, rgba(255,255,255,0) 100%);
	/* Chrome,Safari4+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,125,196,1)), color-stop(50%,rgba(0,125,196,1)), color-stop(100%,rgba(0,125,196,0)));
	/* Chrome10+,Safari5.1+ */
	background: -webkit-linear-gradient(top, rgba(0,125,196,1) 0%,rgba(0,125,196,1) 50%,rgba(0,125,196,0) 100%);
	/* Opera 11.10+ */
	background: -o-linear-gradient(top, rgba(0,125,196,1) 0%,rgba(0,125,196,1) 50%,rgba(0,125,196,0) 100%);
	/* IE10+ */
	background: -ms-linear-gradient(top, rgba(0,125,196,1) 0%,rgba(0,125,196,1) 50%,rgba(0,125,196,0) 100%);
	/* W3C */
	background: linear-gradient(to bottom, rgba(0,125,196,1) 0%,rgba(0,125,196,1) 50%,rgba(0,125,196,0) 100%);
	/* IE6-9 */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007dc4', endColorstr='#00007dc4',GradientType=0 );
 }

 nav .top_menu ul.sub li {
 	width: 100%;
 	height: auto;
 	background-color: transparent;
 }

 nav .top_menu ul.sub li a {
 	width: 100%;
 	height: auto;
 	padding: 0.5rem;
 	font-size: 1.3rem;
	font-weight: normal;
 	text-transform: uppercase;
	color: #fff;
	background-color: transparent;
 }

 nav .top_menu ul.sub li a:hover,
 nav .top_menu ul.sub li a:focus {
	color: #000;
 }

/* ==========================================================================
 Menu Widget
 ========================================================================== */
.menu_widget {
	width: 100%;
	position: relative;
	z-index: 10;
	background-color: #eaedef;
	background-color: rgba(255, 255, 255, .5);
	overflow: hidden;
}

.menu_widget.on_detail_page { margin: 0; }

.menu_cat { float: left; }

.menu_cat .menu_col:last-of-type { display: none; }

.menu_cat:after {
	content: "";
	height: 100%;
	width: 1px;
	background-color: #fff;
	position: absolute;
	top: 0;
}

.menu_title {
	background-color: #a5afb6;
	text-align: center;
	padding: .25rem 1rem;
	display: block;
	float: left;
	width: 100%;
	font-size: 1.3rem;
	color: #000;
	text-transform: uppercase;
	font-weight: bold;
}

.menu_title a {
	text-decoration: underline;
	font-weight: 700;
	color: #000;
}

.menu_col {
	font-size: 1.2rem;
	color: #000;
	padding: 1rem;
	float: left;
	line-height: 1.35;
}
/* If 4 columns */
.col_4 .col_

/* If 5 columns */
.col_5 .col_count_5 { width: 100%; }
.col_5 .col_count_4 { width: 80%; }
.col_5 .col_count_3 { width: 60%; }
.col_5 .col_count_2 { width: 40%; }
.col_5 .col_count_1 { width: 20%; }

/* If 6 columns */
.col_6 .col_count_6 { width: 100%; }
.col_6 .col_count_5 { width: 83.3334%; }
.col_6 .col_count_4 { width: 66.6667%; }
.col_6 .col_count_3 { width: 50%; }
.col_6 .col_count_2 { width: 33.3334%; }
.col_6 .col_count_1 { width: 16.6667%; }

/* If 7 columns */
.col_7 .col_count_5 { width: 71.41%; }
.col_7 .col_count_4 { width: 57.1428%; }
.col_7 .col_count_3 { width: 42.8571%; }
.col_7 .col_count_2 { width: 28.5714%; }
.col_7 .col_count_1 { width: 14.2857%; }

.col_count_4 .menu_col { width: 25%; }
.col_count_3 .menu_col { width: 33.3334%; }
.col_count_2 .menu_col { width: 50%; }
.col_count_1 .menu_col { width: 100%; }


.menu_item {
	width: 100%;
	float: left;
	display: inline-block;
	color: #000;
	text-decoration: none;
}

.menu_item:hover,
.menu_item:focus {
	text-decoration: underline;
	color: #000;
}


/* ==========================================================================
 Body / Contents
 ========================================================================== */

main {
 	position: relative;
 	margin: 0 auto;
 	padding-bottom: 3rem;
 	overflow: hidden;
}

main.with_aside {
	max-width: 1000px;
}


main section,
main.with_aside section.with_banner {
	width: 100%;
	padding: 0;
	margin: 0;
	padding: 0;
}

main.with_aside section {
	float: left;
	width: 65%;
	padding-right: 2rem;
	margin-top: 2rem;
}

main aside {
	float: left;
	width: 35%;
	margin-top: 2rem;
}

main p { margin: 0 0 2rem 0; }

main ul,
main ol {
	list-style-position: inside;
}

.cms_section {
	padding: 2rem;
}

.homepage .cms_section_even {
	background-color: #fff;
}

.cms_section_even {
	background-color: #efefef;
}

.cms_section_title,
.cms_section_intro {
	text-align: center;
}

.cms_section_intro {
	padding-bottom: 2rem;
	padding-left: 3rem;
	padding-right: 3rem;
}

.cms_section_content,
.cms_section_media {
	float: left;
	width: 32.5%;
	padding-left: .8rem;
	padding-right: .8rem;
}


.cms_section_layout_1 .cms_section_content {
	width: 100%;
}

.cms_section_layout_2 .cms_section_content {
	width: 66%;
}

.cms_section_content p {
	margin-top: 0;
}

.cms_section_content .section_button {
	padding: .75rem 2rem;
	text-decoration: none;
	color: #fff;
	background-color: #007dc4;
	border-radius: 0.4rem;
	font-size: 1.4rem;
	font-weight: normal;
}

.cms_section_content .section_button:hover,
.cms_section_content .section_button:focus {
	background-color: #7aba3e;
}

.cms_section_image img,
.feature_image img {
	max-width: 100%;
	width: 100%;
	display: block;
}

.feature_banner {
	position: relative;
	margin-bottom: 1rem;
}

.feature_banner img { max-width: 100% }

.feature_banner .feature_text {
	position: absolute;
	bottom: 2rem;
	left: 2rem;
	width: 50%;
}

/* Featured Image and Text */
.container[style*="background-image"] {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
}

.feature_image {
	position: relative;
	width: 100%;
	z-index: 1;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
	padding: 15% 2rem 2rem 2rem;
}

.container + .feature_image,
.with_banner .feature_image { padding-top: 2rem; }

.feature_text p {
	line-height: 1.35;
}

.feature_image_title {
	margin: 0 0 1rem 0;
	color: #fff;
	font-size:  3.2rem;
}
.feature_image_text {
	margin-top: 1rem;
	color: #fff;
	font-size: 14px;
}

.feature_image_text p {
	margin: 0;
}

.feature_image + .search.compare {
	position: relative;
	border-top: 2rem solid #FFF;
}

.feature_image + .search .inner {
	text-align: center;
	float: none;
	min-height: 0;
	padding: 1.6rem;
	background-color: #EAEDEF;
}

.feature_image + .search .inner select {
	width: auto;
	height: 3rem;
	border: none;
	font-family: sans-serif;
	line-height: 3rem;
	font-size: 1.4rem;
	margin-top: 0;
	padding: 0 3rem 0 0.5rem;
	float: left;
	color: #626f77;
	border-radius: 0.4rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	text-overflow: '';
	text-indent: .01px;
}

.feature_image + .search .inner input[type="submit"] {
	margin-top: 0;
}

.search .inner .subbanner_name {
	font-size: 1.6rem;
	padding: 0 0 1rem 0;
	text-align: center;
}

.search .inner label {
	display: inline-block;
	vertical-align: text-bottom;
	padding: 0 1rem 0 0;
	color: #000;
	line-height: 1;
	font-size: 1.6rem;
}

.search .inner select {
	width: 220px;
	margin: 0;
	float: none;
	display: inline-block;
	vertical-align: middle;
}

.js_navigate_select.style {
	display: inline-block;
	vertical-align: middle;
}

.search .inner input[type="submit"] {
	float: none;
	margin: 0 0 0 1rem;
	padding: .35rem 1rem;
	display: inline-block;
	vertical-align: middle;
}

.cover_material_widgets {
	display: flex;
	justify-content: space-around;
	align-content: center;
}

.cover_material_widgets .swatch_search {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.cover_material_widgets .swatch_search input[type="submit"] {
	height: 3rem;
	min-width: 50px !important;
	max-width: 50px !important;
	margin: 0 !important;
}

.cover_material_widgets .product_guide.js_navigate_select {
	display: flex;
	justify-content: center;
	width: 100%;
}

.cover_material_widgets .product_guide.js_navigate_select input[type="submit"] {
	min-width: 50px;
	max-width: 50px;
}

@media (max-width: 960px) {
	.cover_material_widgets {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}
}

.compare_link {
	width: 100%;
	display: block;
	margin: 1.6rem 0 0 0;
	padding: 0;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 1.2rem;
}

.compare_link:after {
	content: "";
	display: inline-block;
	margin-left: .4rem;
	margin-bottom: .1rem;
	height: .7rem;
	width: .7rem;
	border-top: 1px solid #007dc4;
	border-right: 1px solid #007dc4;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.compare_link:hover:after,
.compare_link:focus:after {
	border-color: #7aba3e;
}

.back_link {
	width: 100%;
	display: block;
	margin: 0;
	padding: 0 0 1rem 0;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 1.2rem;
}

.back_link::before {
	content: "";
	display: inline-block;
	margin-right: .4rem;
	margin-left:  0.2rem;
	margin-bottom: .1rem;
	height: .7rem;
	width: .7rem;
	border-bottom: 1px solid #007dc4;
	border-left: 1px solid #007dc4;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.back_link:hover:before,
.back_link:focus:before {
	border-color: #7aba3e;

}


/* ==========================================================================
 Homepage search styles
 ========================================================================== */
.searches {
	float: left;
	width: 100%;
}

.searches .search {
	width: 25%;
	float: left;
	padding-right: .5rem;
}

.searches .search:last-child {
	padding: 0;
}

.search .subbanner_name {
	border: none;
}

.search .inner {
	background-color: #eaedef;
	padding: 1.4rem;
	min-height: 29rem;
	font-size: 1.2rem;
	position: relative;
	float: left;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.search .inner h1 {
	display: none;
}

.search .inner span {
	display: inline-block;
}

.searches .search .inner select {
	width: 75%;
	height: 3rem;
	border: none;
	font-family: sans-serif;
	line-height: 3rem;
	font-size: 1.4rem;
	margin-top: 1rem;
	padding: 0 .5rem;
	float: left;
	color: #626f77;
	border-radius: 0.4rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	text-overflow: '';
	text-indent: .01px;
}

.search .style select  {
	position: relative;
	height: 3rem;
	padding-right: 1rem;
	background: url(/images/body/select-arrow.png) no-repeat right #fff;
}

.styled-select:before,
.styled-select:after {
	content: "";
	position: absolute;
	top: 0;
	pointer-events: none;
	z-index: 10;
}

.style:after {
	top: .6rem;
	right: 1rem;
}

.style:before {
	height: 100%;
	width: 3rem;
	right: 0;
}

select::-ms-expand {
    display: none;
}

.lt-ie10 .inner select { width: 68%; }

.lt-ie10 .style select {
	background-image: none;
	padding-right: 0;
}

.search .inner input[type="submit"] {
	min-width: 20%;
	float: left;
	margin-left: 1rem;
	margin-top: 1rem;
	padding: .55rem;
	color: #fff;
	background-color: #007dc4;
	border: 1px solid #007dc4;
	border-radius: 0.4rem;
	font-size: 1.4rem;
	font-weight: normal;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.searches { margin-top: -20px; }

.searches .js_navigate_select.style { width: 100%; }

.search .inner input[type="submit"]:hover,
.search .inner input[type="submit"]:focus {
	background-color: #7aba3e;
	border-color: #7aba3e;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.search .inner strong {
	color: #000;
	display: inline-block;
	margin-top: 2rem;
}

.search .inner ul {
	list-style: none;
	line-height: 2;
}

.search .inner ul li a,
.learn_more {
	text-decoration: none;
}

.search .inner ul li a:after,
.learn_more:after {
	content: "";
	display: inline-block;
	margin-left: .4rem;
	margin-bottom: .1rem;
	height: .6rem;
	width: .6rem;
	border-top: 1px solid #007dc4;
	border-right: 1px solid #007dc4;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.search .inner ul li a:hover:after,
.search .inner ul li a:focus:after,
.learn_more:hover:after,
.learn_more:focus:after {
	border-color: #7aba3e;
}

.search .inner .sample_image {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 105px;
	max-width: 100%;
	background: url("/images/body/color-guide.jpg") no-repeat;
	background-size: cover;
}

/* Editable CMS Content Section within a Homepage Search */
.searches .search .inner .cms_section {
	float: left;
	width: 100%;
	padding: 0;
	margin-bottom: 0;
}

.searches .search .inner .cms_section_content p,
.searches .search .inner .cms_section_content p strong {
	margin: .5rem 0 .25rem 0;
}

.search .inner .swatch_search input[type="search"] {
	width: 300px;
	height: 3rem;
	line-height: 3rem;
	font-size: 1.4rem;
	padding: 0 0 0 .75rem;
	border: none;
	border-radius: 0.4rem;
}


/* ==========================================================================
 Hardcoded Homepage Content
 ========================================================================== */
.why_choose {
	margin: 0 auto;
}

.why_choose .cms_section_title, .why_choose .cms_section_intro  {
	 float: left;
	 width: 100%;
}

/* ==========================================================================
 Homepage news/rss feed
 ========================================================================== */
.aside_article {
	background-color: #ddd;
	margin-bottom: 1.6rem;
}

.aside_header {
	background-color: #007dc4;
	color: #fff;
	font-size: 1rem;
	text-align: center;
	font-weight: 400;
	text-transform: uppercase;
	padding: .5rem 0;
}

aside a {
	text-decoration: none;
}

.aside_header.linkedin:hover {
	background-color: #7ABA3E;
}

.aside_header.linkedin {
	display: flex;
	justify-content: center;
	line-height: 2;
}

.aside_header.linkedin img {
	height: 15px;
	margin-left: 1rem;
	margin-top: 1px;
}

.aside_article strong, .aside_article p {
	display: inline-block;
	width: 100%;
	padding: 0 1.6rem;
}

.aside_article strong {
	color: #000;
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 1.1;
	padding: 1.6rem;
}

.aside_article p {
	margin-top: 0;
	color: #000;
	font-size: 1.2rem;
	word-wrap: break-word;
}

.aside_article .read_more {
	padding-left: .6rem;
	font-size: 1.2rem;
	text-transform: uppercase;
	font-weight: 700;
	text-decoration: none;
}

/* ==========================================================================
 Footer (Lower navigation, copyright, etc)
 ========================================================================== */
footer {
 	padding: 1.5rem;
	padding-top: 0;
 	background-color: #a5afb6;
 	font-size: 1.2rem;
}

footer .container {
	display: flex;
	max-width: 1000px;
 	margin: 0 auto;
}

footer .container > .left {
	width: 75%;
}

footer .container > .right {
	width: 25%;
	display: flex;
}

footer .container .right > .left {
	list-style: none;
	width: 40%;
}

footer .container .right > .right {
	width: 60%;
}

@media all and (min-width: 800px) {
	footer .container > .left .footer_list {
		box-sizing: content-box;
		width: 23%;
	}
}

@media all and (max-width: 860px) {
	footer .container > .right {
		display: initial;
	}

	footer .container > .right .left,
	footer .container > .right .right {
		width: 100%;
	}

	footer .container > .right .add_info span,
	footer .container > .right .phone_nums span,
	footer .container > .right .mailto {
		font-size: 1.2rem;
	}

	footer .container > .right .mailto {
		text-overflow: ellipsis;
		overflow: hidden;
	}
}

.footer_list {
	float: left;
	width: 20%;
	list-style: none;
	padding-right: 1rem;
}

#fsc_code {
	display: block;
	float: left;
	margin-top: 0.5rem;
}

.prod_cat_title,
.contact_us {
 	display: block;
 	text-transform: uppercase;
	margin-top: 2.3rem;
 	margin-bottom: .6rem;
 	text-decoration: none;
 	color: #000;
 	font-weight: 700;
 	font-size: 1.1rem;
}

.prod_sub_cat span {
 	color: #fff;
 	font-weight: 700;
}

.prod_sub_cat {
	padding-bottom: 1rem;
}

.prod_list {
 	list-style: none;
 	line-height: 1.4;
 	color: #fff;
}

.prod_list a {
 	text-decoration: none;
 	color: #fff;
}

.prod_list a:hover,
.prod_list a:focus {
 	text-decoration: underline;
}

.add_info span,
.phone_nums span {
 	display: block;
 	color: #000;
 	font-size: 1.4rem;
 	font-weight: 700;
}

.add_info,
.phone_nums {
 	display: block;
 	margin: .5rem 0;
}

.mailto {
 	color: #000;
 	font-size: 1.4rem;
 	font-weight: 700;
	float: left;
	width: 100%;
}

footer .footer_list a:hover, footer .footer_list a:focus {
 	color: #007dc4;
}

footer .contact_info .add_info, footer .contact_info .phone_nums {
 	margin-bottom: 1rem;
}

footer .contact_info .social_media {
	float: left;
}

footer .contact_info .facebook,
footer .contact_info .pinterest,
footer .contact_info .linkedin {
	float: left;
	margin-right: .5rem;
}

footer .contact_info .facebook img {
	width: 35px;
	margin-top: 2rem;
}

footer .contact_info .pinterest img {
	width: 35px;
	margin-top: 2rem;
}

footer .contact_info .linkedin img {
	width: 35px;
	margin-top: 2rem;
}

.below_foot {
 	background-color: #eaedef;
 	padding: 1.6rem 0;
 	float: left;
 	width: 100%;
}

.below_foot .container {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.below_foot .logo {
	width: 70px;
	padding: 1.6rem 0;
	margin-right: 1.6rem;
}

.below_foot img {
	display: block;
}

.below_foot .company_logos {
	padding: 1.6rem;
	border-left: 1px solid #fff;
}

.company_logos img[src$="archival.jpg"],
.company_logos img[src$="corporate.jpg"] { mix-blend-mode: darken;}

.below_foot .footnote {
	font-size: 1rem;
	border-left: 1px solid #fff;
	padding: 1.6rem 0 1.6rem 1.6rem;
	color: #555;
	flex: 1;
}

.copyright .vsi {
 	float: right;
 	display: block;
 	overflow: hidden;
 	width: 120px;
 	height: 30px;
 	background: no-repeat url("https://static.visionary.com/siteoncall/siteoncall-footer.png");
 	text-indent: 100%;
 	white-space: nowrap;
 	margin: 2.3rem 0;
 }

.copyright .legal {
	float: left;
	width: 75%;
	display: block;
	color: #000;
	font-size: 1.2rem;
	margin: 3rem 0 2rem;
}


/* ==========================================================================
 Basic form styling
 ========================================================================== */
.form_section {
 	float: left;
 	width: 100%;
 	padding: .5rem 0;
 	margin: 1rem 0;
 	border-bottom: 1px solid #a5afb6;
}

.form_row {
 	float: left;
 	width: 100%;
}

fieldset,
.form_buttons {
 	float: left;
 	width: 100%;
 	margin-bottom: 2rem;
 	padding-right: 2rem;
}

fieldset.no_bottom,
.form_buttons.no_bottom { margin-bottom: 0; }

fieldset.fs1 { width: 25%; }
fieldset.fs2 { width: 50%; }
fieldset.fs3 { width: 75%; }

fieldset input,
fieldset select,
fieldset textarea {
 	width: 100%;
 	height: 4.2rem;
 	margin: 0;
 	padding: 1rem;
 	border: 1px solid #ccc;
 	border-radius: 0.3rem;
 	font-size: 1.6rem;
 	font-family: sans-serif;
 	line-height: 3.4rem;
}

fieldset input[type="text"],
fieldset input[type="password"],
fieldset input[type="email"],
fieldset input[type="number"],
fieldset input[type="tel"],
fieldset input[type="url"],
fieldset input[type="search"],
fieldset textarea {
 	-webkit-appearance: none;
 	-moz-appearance: none;
 	appearance: none;
}

fieldset textarea {
 	height: 10rem;
 	line-height: 1.4;
}

fieldset .form_note { font-size: 1.2rem; }

.checkbox input {
 	height: auto;
 	width: auto;
 	display: inline-block;
}

.checkbox label {
 	display: inline-block;
 	vertical-align: middle;
 	line-height: 1.125;
}

/* a better-looking button */
.form_buttons button, .form_buttons input[type="submit"], .form_buttons input[type="reset"] {
 	margin-right: 1rem;
 	padding: 1rem 2rem;
 	background-color: #eee;
 	border: 1px solid #ccc;
 	border-radius: 0.4rem;
 	font-size: 1.6rem;
 	font-weight: normal;
 	cursor: pointer;
 	-webkit-appearance: none;
 	-moz-appearance: none;
 	appearance: none;
}

/* add high visibility focus indicators */
/* add :active class so buttons do no render different on touch for mobile */
.form_buttons button:hover, .form_buttons button:focus, .form_buttons button:active, .form_buttons input[type="submit"]:hover, .form_buttons input[type="submit"]:focus, .form_buttons input[type="submit"]:active, .form_buttons input[type="reset"]:hover, .form_buttons input[type="reset"]:focus, .form_buttons input[type="reset"]:active {
 	background-color: #aaa;
 	margin-right: 1rem;
 	padding: 1rem 2rem;
 	border: 1px solid #ccc;
 	border-radius: 0.4rem;
 	font-size: 1.6rem;
 	font-weight: normal;
 	cursor: pointer;
}

.form_buttons button:last-child,
.form_buttons input[type="submit"]:last-child,
.form_buttons input[type="reset"]:last-child { margin-right: 0; }

input.chk { display: none; }

.form_error {
 	margin-bottom: 2rem;
 	color: #c00;
}

.form_error ul { padding-left: 2rem; }

/* ==========================================================================
Sample Request Toggle Areas
========================================================================== */

#sfield  {
	display: none;
}

.form_call_out {
	float: left;
	padding: 1rem 1.6rem;
	background-color: #eaedef;
	width: 98%;
}

.form_call_out legend {
	font-weight: 700;
	width: 100%;
	float:  left;
}

.form_call_out .checkbox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;

	-webkit-box-align: baseline;
	-ms-flex-align: baseline;
	align-items: baseline;
}

.form_call_out .checkbox input {
	-webkit-box-ordinal-group: 0;
	-ms-flex-order: -1;
	order: -1;
	margin-right: 16px;
	margin-right: 1rem;
}

.form_call_out label {
	display: inline-block;
	vertical-align: middle;
	width: calc(70% - 5px);
	font-weight: 400;
	padding: 1rem 2rem 1rem 0;
}

.form_call_out label em {
	font-weight: normal;
	font-style:  normal;
	font-size: 1.4rem;
	display: block;
	margin-top: 0.75rem;
}

.form_call_out select {
	width: 30%;
	vertical-align: middle;
	display: inline-block;
}

.form_section .form_call_out #state { margin-top: .5rem; }

.form_section h5 {
	margin-bottom: 1rem;
	position: relative;
	display: inline-block;
	line-height: 1.125;
	vertical-align: middle;
}

.toggle {
	display: inline-block;
	vertical-align: middle;
	margin-left: 1rem;
	border-left: 1rem solid transparent;
	border-top: 1rem solid #616f78;
	border-right: 1rem solid transparent;
	cursor: pointer;
}

.show .toggle {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}

.hide .toggle {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}

.hide .checkboxes {
	display: none;
}

.show .checkboxes {
	display: block;
}

.with_aside fieldset.fs1.checkbox {
	width: auto;
}

fieldset .radio {
	width: auto;
	margin-right: 1rem;
}

.radio_label {
	margin-right: 3rem;
	vertical-align: middle;
}

/* ==========================================================================
 Link Buttons
 ========================================================================== */

.button {
	display: inline-block;
	text-transform: uppercase;
	padding: .5rem 2.5rem;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background-color: #777;
	border-radius: 0.4rem;
	font-size: 1.4rem;
	font-weight: normal;
	margin: 0 1% 1rem 0;
	cursor: pointer;
}

.button:hover,
.button:focus {
	background-color: #333;
	color: #fff;
}

.button.green {
	background-color: #7aba3e;
}
.button.green:hover, .button.green:focus {
	background-color: #61A125;
}
.button.blue {
	background-color: #007dc4;
}
.button.blue:hover, .button.blue:focus {
	background-color: #0064AB;
}
.button.orange {
	background-color: #f58020;
}
.button.orange:hover, .button.orange:focus {
	background-color: #DC6707;
}

/* ==========================================================================
 Styling for CMS Page (Interior Page) Sub-Banners
 ========================================================================== */
.inner .subbanners {
	padding: 1.6rem 0;
	float: left;
	width: 100%;
	margin-bottom: 10%;
}

.inner .subbanner {
	position: relative;
	float: left;
	width: 33.333%;
	padding-left: 2rem;
	padding-right: 2rem;
}

.inner .subbanner_name {
	display: inline-block;
	width: 100%;
	padding: .5rem 0;
	text-align: center;
	font-size: 1.6rem;
	font-weight: bold;
	color: #000;
	border-bottom: none;
}

.inner .subbanner img {
	max-width: 100%;
	width: 100%;
	display: block;
	margin: 0 auto;
}

.inner .subbanner a {
	display: inline-block;
	font-size: 1.4rem;
	text-decoration: none;
}

.inner .subbanner a:before {
	content: normal;
}

.inner .subbanner a:after {
	content: normal;
	display: inline-block;
	margin-left: .4rem;
	margin-bottom: .1rem;
	height: .6rem;
	width: .6rem;
	border-top: 1px solid #007dc4;
	border-right: 1px solid #007dc4;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.inner .subbanner a:hover:after,
.inner .subbanner a:focus:after {
	border-color: #7aba3e;
}

.inner .subbanner .subbanner_description {
	display: inline-block;
	font-size: 1.4rem;
	padding: 1rem 1.6rem;
	min-height: 18rem;
	background-color: #eaedef;
	width: 100%;
}

.inner .subbanner .subbanner_description p { margin: 0 0 1rem; }

/* ==========================================================================
 Styling for CMS Page (Interior Page) Sidebars
 ========================================================================== */
 .sidebar {
 	background-color: #eaedef;
 	padding: 4.6rem 1.6rem 2rem 1.6rem;
 	position: relative;
 	width: 100%;
 	min-height: 17rem;
 	float: left;
 	font-size: 1.2rem;
 	margin-bottom: 2rem;
 }

 .sidebar_header {
 	background-color: #007dc4;
 	color: #fff;
 	text-align: center;
 	text-transform: uppercase;
 	font-size: 1.4rem;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: .5rem;
	z-index: 1;
 }

 .side_swatch {
 	width: 27.5%;
 	float: left;
 	padding-right: .5rem;
 }

 .side_img {
 	width: 100%;
 	max-width: 100%;
 	display: block;
 	margin-bottom: .5rem;
 }

 .sidebar .swatch_name,
 .sidebar .swatch_code {
 	font-size: 1.125rem;
 	width: 100%;
 	text-align: center;
 	display: block;
 }

 .sidebar_content {
 	display: block;
 	float: left;
 	padding-left: .5rem;
 	width: 45%;
 }

 .side_hero {
 	width: 100%;
 	margin-bottom: 2rem;
 }

 .side_mini {
 	width: 23.5%;
 	float: left;
 	margin-right: 2%;
 }

 .side_mini:last-of-type { margin: 0; }

 .uses {
 	margin-top: 1rem;
 	width: 100%;
 	float: left;
 	display: block;
 }

 .uses li {
 	float: left;
 	width: 50%;
 	padding-left: 2rem;
 }

 .rep_box {
 	float: left;
 	width: 100%;
 }

 .rep_photo {
 	float: left;
 	width: 35%;
 }

 .rep_info {
 	float: left;
 	width: 65%;
 	padding-left: 1.6rem;
 }

 .rep_info h5 {
 	line-height: .75;
 	margin-bottom: 1rem;
 	font-weight: 400;
 	color: #007dc4;
 }

 .rep_info .rep_position {
 	display: block;
 	font-style: italic;
 }

 .rep_info .rep_contact,
 .rep_info .rep_email {
 	display: block;
 	width: 100%;
 	word-wrap: break-word;
 }


/* ==========================================================================
 Product Details
 ========================================================================== */
.prod_info {
	float: left;
	position: relative;
	padding-bottom: 3rem;
	margin-bottom: 1.6rem;
	border-bottom: 1px solid #a5afb6;
}

.prod_left, .prod_right {
	float: left;
}

.prod_left { width: 40%; }
.prod_right {
	width: 60%;
	padding-left: 3.2rem;
}

.prod_right p {
	margin-top: 0;
}

.img_conatainer,
.img_container img {
	width: 100%;
	max-width: 100%;
	display: block;
}

.prod_left .img_container img {
	margin: .6rem 0 1.6rem 0;
}

.prod_left .button {
	width: 100%;
}

.prod_description {
	margin-top: -15px;
}

.featured_list {
	margin: 0 0 3rem 0;
}

.featured_spec {
	margin: 1rem 0;
    list-style-position: inside;
    text-indent: -1em;
    padding-left: 1em;
}

.suggested_prod {
	float: left;
	width: 100%;
	margin-bottom: 3rem;
}

.suggested_prod h6 {
	float: left;
	width: 100%;
}

.suggested_prod_item {
	margin-top: 2rem;
	float: left;
	position: relative;
	width: 100%;
}

.suggestion {
	width: 15%;
	float: left;
}

.suggested_prod_info {
	float: left;
	width: 85%;
	padding-left: 2rem;
}

.popup select {
	width: 50%;
	margin-left: 2%;
}

.popup .rep_box {
	float: left;
	margin: 2rem 0;
	padding-top: 2rem;
	border-top: 1px solid #a5afb6;
}

.popup .rep_photo {
	float: left;
	width: 35%;
}

.popup .rep_info {
	float: left;
	width: 65%;
	padding-left: 1.6rem;
}

.popup .rep_info h5 {
	line-height: .75;
	margin-bottom: 1rem;
	font-weight: 400;
	color: #007dc4;
}

.popup .rep_info .rep_position {
	display: block;
	font-style: italic;
}

.popup .rep_info .rep_contact,
.popup .rep_info .rep_email {
	display: block;
	width: 100%;
	word-wrap: break-word;
}


/* ==========================================================================
 Swatches Styles
 ========================================================================== */
.swatch_grid {
	position: relative;
	float: left;
	margin: 3rem 0 6rem 0;
	width: 100%;
}

.swatch {
	width: 25%;
	width: 16.667%;
	float: left;
	cursor: pointer;

	padding: 0 .5rem .5rem 0;
}

.swatch_thumb {
	width: 100%;
	max-width: 100%;
	height: 100%;
	display: block;
}

.popup {
	background-color: #fff;
	padding: 0;
	padding-top: 2rem;
	padding-left: .6rem;
	padding-right: .6rem;
	float: left;
	width: 100%;
}

.popup_thumb {
	display: block;
	width: 100%;
	max-width: 350px;
	margin: 0 auto 1rem auto;
	margin-left: 1rem;
	margin-right: 1rem;
}

.popup .swatch_name,
.popup .swatch_code {
	float: left;
	padding-right: .7rem;
	font-weight: bold;
	color: #000;
}

.popup .swatch_name {
	margin-left: 1rem;
}

.popup .swatch_details {
	display: block;
	width: 100%;
	max-width: 350px;
	margin: 0 auto 1rem auto;
	margin-left: 1rem;
	margin-right: 1rem;
}

.popup strong {
	float: left;
	width: 100%;
	font-size: 1.2rem;
	text-transform: uppercase;
	margin: 1rem 0;
}

.popup .avail_items {
	float: left;
	width: 60%;
}

.popup .stock_ship {
	float: left;
	width: 40%;
}

.popup .item {
	float: left;
	width: 60px;
	text-align: center;
}

.popup .icons_container {
	float: left;
	width: 100%;
	max-width: 100%;
}

.popup .icon {
	max-height: 3rem;
	max-width: 3rem;
	display: block;
	margin: 0 auto;
}

.popup .name {
	width: 100%;
	float: left;
	font-size: 1rem;
	text-transform: uppercase;
	margin-top: .5rem;
}

/* ==========================================================================
 Comparison Charts
 ========================================================================== */
.compare_info h5 {
	font-size: 14px;
}

/* ==========================================================================
 Desktop view (greater than 1000 pixels)
 ========================================================================== */
@media all and (min-width: 1000px) {
	.sample-req-link {
		display: none !important;
	}
}

/* ==========================================================================
 Desktop view (less than 1000 pixels)
 ========================================================================== */
@media all and (max-width: 1000px) {
	.page {
		width: 100%;
		padding: 0;
	}

	.with_aside .container, .without_aside,
	.inner_page .subbanners .container {
		padding: 0;
	}

	.cms_section { padding: 2rem 0; }

	main {
		margin: -1.5rem 0 2rem 0;
		padding: 0;
	}

	.menu_widget,
	.feature_image + .search.compare {
	display: none;
	}

	.below_foot .container {
		padding: 0 1.5rem;
	}

	.below_foot .footnote {
		width: 100%;
		flex: none;
		padding: 1.5rem 0;
		border: none;
	}

	header {
		height: auto;
	}

	header .container {
		padding: 2rem 1.5rem 0 1.5rem;
		display: flex;
		align-items: center;
		height: 12rem;
		padding: 1rem 1.5rem;
		z-index: 1;
	}

	header .header_content {
		position: relative;
		top: 0;
	}

	header .container > div {
		display: inline-block;
	}

	header .logo {
		display: inline-flex;
		align-items: center;
	}

	header .logo img {
		width: 96px;
	}

	header .logo span {
		margin-left: 1rem;
	}

	header .page_links {
		display: none;
	}

	header .site_search {
		text-align: left;
	}

	header .number, header .newsletter {
		display: none;
	}

	.menu_toggle {
		display: block;
		position: absolute;
		top: 20px;
		right: 10px;
		width: 40px;
		height: 40px;
		padding: 0;
		border: none;
		background: transparent;
	}

	.menu_toggle span,
	.menu_toggle span::before,
	.menu_toggle span::after {
		position: absolute;
		top: 7px;
		left: 50%;
		width: 26px;
		height: 5px;
		transform: translateX(-50%);
		background-color: #82bf0c;
	}

	.menu_toggle span::before {
		content: "";
		top: 10px;
	}

	.menu_toggle span::after {
		content: "";
		top: 20px;
	}

	header nav {
		position: absolute;
		left: 0;
		top: 12rem;
		margin-top: 0;
		width: 100vw;
		height: auto;
	}

	nav .top_menu {
		position: absolute;
		top: 100%;
		left: 0;
		display: block;
		width: 100%;
		height: auto;
		background-color: #007dc4;
	}

	nav .submenu {
		position: absolute;
		top: -.25rem;
		right: 2rem;
		display: inline-block;
		cursor: pointer;
		font-size: 3.4rem;
		color: #fff;
	}

	nav .top_menu li.show_submenu .submenu {
		-webkit-transform: rotate(225deg);
		-moz-transform: rotate(225deg);
		-ms-transform: rotate(225deg);
		-o-transform: rotate(225deg);
		transform: rotate(225deg);
	}

	nav .top_menu li {
		width: 100%;
		border-bottom: 4px solid #fff;
	}

	nav .top_menu li a {
		width: 100%;
		height: auto;
		padding: 1rem 1.6rem;
		color: #fff;
		font-size: 1.8rem;
	}

	nav .top_menu ul.sub {
		position: relative;
		top: 0;
		display: block;
		overflow: hidden;
		width: 100%;
		margin-top: 0;
		padding: 0;
		background: #eaedef;
	}

	nav .top_menu ul.sub li { width: 100%; }

	nav .top_menu ul.sub li.sub-menu-last { border-bottom-width: 0; }

	nav .top_menu ul.sub li a {
		width: 100%;
		padding: 1rem 2rem 1rem 2rem;
		color: #007dc4;
	}

	nav .top_menu ul.sub li a:hover,
	nav .top_menu ul.sub li a:focus {
		color: #000;
		background-color: #ddd;
	}

	main section,
	main aside {
		float: left;
		width: 100%;
		margin-top: 2rem;
	}

	main.with_aside section {
		float: left;
		width: 100%;
		padding: 0 2rem;
	}

	 .news_article_container {
		 padding: 0 2rem;
	 }

	.searches .search, .searches .search:last-child {
		width: 50%;
		padding: 0 2% 4rem 2%;
	}

	.searches .search .inner {
		min-height: 30rem;
	}

	/* Interior Sidebars */
	.sidebar {
		width: 49%;
	}

	.sidebar.sales_rep {
		width: 100%;
	}

	.sidebar:nth-child(odd) { margin-right: 1%; clear: both; }
	.sidebar:nth-child(even) { margin-left: 1%; }

	.swatch {
		width: 12.5%;
	}

	footer {
		position: relative;
	}

	.contact_info {
		clear: both;
	}

	.copyright .legal {
		padding-left: 2rem;
	}

	.copyright .vsi {
		margin-right: 2rem;
	}

	fieldset.fs1 { width: 50%; }

	fieldset.fs2, fieldset.fs3 {
		width: 100%;
	}
}

/* ==========================================================================
 Mobile view (less than 800 pixels)
 ========================================================================== */
 @media all and (max-width: 800px) {

	.searches .products, .searches .use,
	.compare_btn, .how_to {
		display: none;
	}

	.cms_section_layout_3 .cms_section_content {
		float: none;
		width: 100%;
	}

	.cms_section_layout_3 .cms_section_media {
		width: 50%;
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

	.footer_list {
		width: 33.333%;
		clear: none;
	}

/* Interior Subbanner CSS */
	.inner .subbanner {
		width: 100%;
		margin-bottom: 2rem;
		padding-bottom: 2rem;
		border-bottom: 2px solid #eaedef;
	}

	.inner .subbanner:last-child {
		border-bottom: none;
	}

	.inner .subbanner_name {
		padding: 1.6rem;
		font-size: 2rem;
		text-align: left;
		margin-top: -1rem;
	}

	.inner .subbanner img,
	.inner .subbanner .subbanner_description {
		width: 50%;
		float: left;
		margin: 0;
	}

	.inner .subbanner .subbanner_description {
		min-height: 4rem;
		background-color: transparent;
		padding: 0 0 0 1.6rem;
	}

	.inner .subbanner .subbanner_description p {
		padding-top: 0;
	}

	.feature_banner .feature_text { width: 100%; }
}

/* ==========================================================================
 Mobile view (less than 700 pixels)
 ========================================================================== */
 @media all and (max-width: 700px) {
	.feature_image .search {
		display: none;
	}
}

/* ==========================================================================
 Mobile view (less than 620 pixels)
 ========================================================================== */
 @media all and (max-width: 620px) {
	.cms_section_layout_1 .cms_section_content {
		width: 100%;
	}

	.cms_section_layout_2 .cms_section_content {
		float: none;
		width: 100%;
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

	.cms_section_layout_2 .cms_section_media {
		float: none;
		width: 70%;
		margin-left: 15%;
	}

	.cms_section_layout_4 .cms_section_media {
		float: none;
		width: 70%;
		margin-left: 15%;
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

	.searches .search, .searches .search:last-child {
		width: 100%;
		padding: 0;
	}

 	.inner .subbanner_name {
 		margin-bottom: 1.5rem;
		padding: 0;
 	}

	.prod_info {
		padding-bottom: 0;
	}

	.prod_left, .prod_right {
		width: 100%;
		margin: 1rem 0;
		padding: 0;
	}

	.prod_left .img_container,
	.prod_left .button {
		float: left;
	}

	.prod_left .img_container {
		width: 50%;
		padding-right: 2rem;
	}

	.prod_left .button {
		width: 50%;
		margin-right: 0;
		display: block;
	}

	.prod_left .button.compare_btn { display: none; }

	.prod_left .img_container img {
		margin: 0;
	}

	.footer_list {
		width: 50%;
	}

 	.copyright .legal {
		width: 100%;
		margin-left: 0;
		text-align: center;
		clear: both;
		padding-left: 0;
	}

 	.copyright .vsi {
		width: 120px;
		margin-top: -.5rem;
		margin-right: calc((100% - 120px)/2);
	}

	/* Interior Sidebars */
	.sidebar,
	.sidebar:nth-child(odd),
	.sidebar:nth-child(even) {
		width: 100%;
		margin: 0 0 2rem 0;
		min-height: 1rem;
	}
}

/* ==========================================================================
 Mobile view (less than 550 pixels)
 ========================================================================== */
@media all and (max-width: 550px) {
	.feature_image_title {
		margin-top: 1rem;
		font-size: 2.4rem;
	}

	.feature_image_text  {
		font-size: 95%;
	}
}

/* ==========================================================================
 Mobile view (less than 520 pixels)
 ========================================================================== */
@media all and (max-width: 520px) {
	 header .newsletter_number {
		width: 265px;
		margin-left: -10px;
	}

 	fieldset.fs1,
 	fieldset.fs2,
 	fieldset.fs3 { width: 100%; }

 	/* Interior Subbanner CSS */
 	.inner.subbanners {
 		margin-bottom: 0;
 	}

 	.inner .subbanner {
 		margin: 0 0 1rem 0;
		padding: 0;
 		border-bottom: none;
 	}

 	.inner .subbanner_name {
 		text-align: center;
		margin-bottom: .5rem;
 	}

 	.inner .subbanner img,
 	.inner .subbanner .subbanner_description {
 		width: 100%;
 		display: block;
 		max-width: 360px;
 		float: none;
 		margin: 0 auto;
 	}

 	.inner .subbanner .subbanner_description {
 		padding: 1.6rem;
		margin-bottom: 1rem;
		background-color: #eaedef;
 	}
 	/* End Interior Subbanner CSS */

 	/* Begin Swatches CSS */
 	.swatch {
 		width: 33.333%;
 		width: 20%;
 	}
 	/* End Swatches CSS */

/* ==========================================================================
 Mobile view (less than 475 pixels)
 ========================================================================== */
@media all and (max-width: 475px) {
	.feature_image_title {
		font-size: 2.8rem;
	}

	.feature_image_text { display: none; }
}

/* ==========================================================================
 Mobile view (less than 450 pixels)
 ========================================================================== */
@media all and (max-width: 450px) {
	header .logo span { display: none; }

	.search .inner label,
	.search .inner select {
		display: block;
		width: 100%;
		padding: 0;
		margin-bottom: 0.75rem;
	}

 	.button {
 		width: 100%;
 		padding-right: 1rem;
 		margin-right: 0;
 	}

	.cms_section_title h2 {
		font-size: 2.7rem;
	}

 	.prod_left .img_container {
 		width: 100%;
 		margin-bottom: 2rem;
 		padding-right: 0;
 	}
 	.prod_left .button {
 		width: 100%;
 		margin-right: 0;
 		display: block;
 	}

 	.suggestion {
 		width: auto;
 		display: block;
 		margin-bottom: 1.6rem;
 	}

 	.suggested_prod_info {
 		width: 100%;
 		padding: 0;
 	}

 	.swatch {
 		width: 33.333%;
 	}

	.below_foot .logo,
	.below_foot .company_logos {
		margin: 0;
		border: none;
		padding: 0 1.6rem .4rem 0;
	}

	.popup_thumb {
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
	}

	.popup .swatch_details {
		width: 94%;
		margin-left: 3%;
		margin-right: 3%;
	}
}

/* ==========================================================================
 Mobile view (less than 400 pixels)
 ========================================================================== */
@media all and (max-width: 400px) {
	.cms_section_layout_2 .cms_section_media {
		width: 100%;
		margin-left: 0;
		margin: 1rem 0;
	}

	.cms_section_layout_3 .cms_section_media {
		float: none;
		width: 100%;
		margin: 1rem 0;
	}

	.cms_section_layout_4 .cms_section_media {
		float: none;
		width: 100%;
		margin: 1rem 0;
	}

	.uses li {
	 	float: none;
 		width: 100%;
	}

 	.footer_list {
		padding-left: 8px;
	}
}

/* ==========================================================================
 Mobile view (less than 375 pixels)
 ========================================================================== */
@media all and (max-width: 375px) {
	.popup .item {
		width: 50px;
	}

	.popup .icons_container {
		width: 50px;
	}

	.popup .name {
		width: 50px;
	}
}

/* ==========================================================================
 Mobile view (less than 340 pixels)
 ========================================================================== */
@media all and (max-width: 340px) {
	.contact_info {
		width: 100%;
	}

	header .search_text, header .newsletter_text {
		width: 100%;
		float: left;
	}

	header .site_search input[type="search"], .swatch_search input[type="search"] {
		width: calc(100% - 70px);
	}
}

/* ==========================================================================
 Mobile view (less than 316 pixels)
 ========================================================================== */
@media all and (max-width: 316px) {
	.popup .item {
		width: 40px;
	}

	.popup .icons_container {
		width: 40px;
	}

	.popup .name {
		width: 40px;
	}

	.footer_list {
		width: 100%;
	}

	.prod_sub_cat {
		float: left;
		width: 100%;
		position: relative;
	}

	.dup_title {
		display: none;
	}

	.dup_links {
		margin-top: 2rem;
		float: left;
		border-top: 1px solid #858C92;
		border-bottom: 1px solid #858C92;
		width: 100%;
		padding: 0 0 1rem 0;
	}

	.dup_links li {
		float: left;
		width: 50%;
		font-size: 1.4rem;
		margin-top: 1rem;
	}
}