/* Jimp Studio, LLC - Aaron Klabunde - 2014.09.22
     Project: Construction Business Theme (for AMP Contractors LLC)
     Description: Primary Styles
*/

/*@font-face {
 font-family: freestyle;
 src: url("../fonts/FreestyleScript.eot") /* EOT file for IE *
}
@font-face {
 font-family: freestyle;
 src: url("../fonts/FreestyleScript.ttf") /* TTF file for CSS3 browsers *
}*/

/*@import url('https://fonts.googleapis.com/css?family=Muli');*/
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

body {
     background-color: #e9ece9;
     text-align: center;
     font-size: 17px;
     color: #606060;
     /*font-family: 'Times New Roman', serif;
     font-family: Arial, Helvetica, Verdana, sans-serif;*/
     font-family: 'Figtree', sans-serif;
}
.view-margin {
     position: relative;
     z-index: 99;
     padding: 0 2%;
     overflow: hidden;
}

a {
  cursor: pointer;
  text-decoration: underline;
  color: #316b31;
}
a:hover {
  text-decoration: underline;
  color: #1d3f1d;
}

header {
     position: relative;
     z-index: 10;
     text-align: center;
     height: 440px;
     background-image: linear-gradient(#0008 40%, #0000 80%);
     padding: 0 1em;
}
header h1, 
header h1 a,
header h1 a:link,
header h1 a:active,
header h1 a:visited { 
     color: #fff;
     font-weight: bold;
}
header h1 img#pre-logo {
     position: absolute;
     max-width: min(30vw, 180px);
     right: calc(50vw + 70px);
     filter: hue-rotate(33deg) saturate(30%) sepia(20%)
}
header h1 a img {
     max-width: min(80vw, 500px);
     filter: hue-rotate(33deg) saturate(30%) sepia(20%)
}
span.autogen-logo {
     margin: 1em 2px 0.6em 2px;
     display: inline-block;
     border: 0.18em solid #fff;
     border-top: 0;
     line-height: 50%;
}
span.autogen-logo b {
     font-weight: normal;
     display: inline-block;
     color: #fff;
     font-size: 2.2em;
     height: 1em;
     letter-spacing: -0.28em;
     padding: 0.1em 0.3em 0.2em 0.02em;
}
menu.top-menu {
     padding: 1em 0;
     text-align: center;
     line-height: 200%;
     position: sticky;
     top: 0;
     display: block;
     z-index: 999;
     background-color: #615753;
     margin: 0 0 4em 0;
     list-style-type: none;
     box-shadow: 0 0 40px #0009;
}
menu.top-menu li {
     display: inline-block;
     list-style-type: none;
     margin: 0 1em 0 1em;
}
menu.top-menu a {
     font-size: 1em;
     margin: 1.4em 2px 0 2px;
     padding: 0.3em 0.5em;
     font-weight: normal;
     display: inline;
     border-bottom: 1px solid #fff3;
     color: #fff;
     text-decoration: none;
     text-transform: uppercase;
}
menu.top-menu a:hover {
     border-color: #fff8;
     color: #eef8;
}
.static-menu a {
     padding: 0.5em;
     border-left: 1px solid #385d7a;
}
.static-menu a:first-of-type {
     border-left: 0 ;
}
menu.top-menu li ul {
     max-width: 320px;
     line-height: 280%;
     position: absolute;
     top: 3.6em;
     z-index: 999;
     background-color: #615753;
     margin: 0 0 6em 0;
     list-style-type: none;
     box-shadow: 0 0 40px #0009;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.6s;
     font-size: 0.8em;
}
menu.top-menu li:hover ul {
     max-height: 1200px;
     transition: max-height 0.6s;
}
menu.top-menu li:hover ul li {
     display: block;
}
menu.top-menu li ul li.nest_1 { margin-left: 2.4em; }
menu.top-menu li ul li.nest_2 { margin-left: 4.8em; }
menu.top-menu li ul li.nest_3 { margin-left: 7.2em; }
menu.top-menu li ul li.nest_4 { margin-left: 9.6em; }
menu.top-menu li ul li.nest_5 { margin-left: 12em; }
menu.top-menu li ul li.nest_6 { margin-left: 14.4em; }
menu.top-menu li ul li.nest_7 { margin-left: 16.8em; }

div.banner {
     position: absolute;
     top: auto;
     bottom: calc(100vh - 446px);
     z-index: 4;
     width: 100%;
     margin: 0;
     padding: 0;
     text-align: center;
     overflow: hidden;
}
header h1 {
     font-size: 2.4em;
     line-height: 110%;
     padding: 0.2em 0.4em;
     height: auto;
     margin-bottom: 2em;
}
body.home header h1 {
     height: calc(100vh - 2.2em);
     margin-bottom: 0;
     height: auto;
     margin-bottom: 2em;
}

div.banner img {
     min-height: auto;
     margin-left: -50%;
     position: relative;
     bottom: 0;
     left: 25%;
     min-width: 100%;
}
a.top-logo img {
     filter: grayscale(0.6);
}
.top-call-to-action {
     font-size: 0.7em;
     text-shadow: 1px 1px 20px #fff;
     font-weight: bold;
     color: #615753;
}
header h1 .top-call-to-action a {
     color: #305372;
}
header h1 .top-call-to-action a:hover {
     color: #9097b5;
}

p img {
     margin: 0.5em;
}

nav {
     display: block;
     position: relative;
     top: -140px;
     right: 4%;
     text-align: right;
}
#container {
     position: relative;
     z-index: 9;
     display: inline-block;
     vertical-align: top;
     text-align: left;
     width: 65%;
     min-width: 320px;
     margin-bottom: 2em;
     overflow: hidden;
     /* filter: drop-shadow(0 10px 20px #0009); breaks position:fixed */
}
h1 + h3,
h1 + div h3 {
     display: inline-block;
     font-style: italic;
     line-height: 200%;
     color: #777;
     text-align: center;
     font-size: 1.2em;
     font-weight: normal;
     max-width: 1500px;
}
#services,
#products {
     margin: 1em 0 5em 0;
     margin: 0 auto;
}
.cols-three {
     display: inline-block;
     vertical-align: top;
     width: calc(33.3% - 6.3%);
     background-color: #fff;
     padding: 2em 2% 2em 2%;
     margin: 2% 3% 3% 0;
     line-height: 200%;
     /* box-shadow: 0 10px 20px #0009; */
}
.cols-three:last-of-type {
     margin-right: 0;
}
.cols-three h2, 
.cols-three h3, 
.cols-three h4, 
.cols-three h5 {
     text-align: center;
}
.cols-three p {
     margin: 1.6em 0;
}
.cols-three p img {
     margin: 0 0 0.5em 0;
}
.content {
	margin-bottom: 4%;
     background-color: #dce4dc;
     margin-top: 0;
     padding: 3% 4% 2% 4%;
     overflow: hidden;
}
aside {
     margin-bottom: -4px;
}
aside img {
     width: 100%;
}
.content aside img {
     max-width: 50%;
}
.content aside img[style="float: left;"] {
     margin: 0.5em 2em 2em 0;
}
.content aside img[style="float: right;"] {
     margin: 0.5em 0 2em 2em;
}
#sl-one, #sl-two, #sl-three {
     opacity: 1.0;
     transition: 2s;
}
#sl-one:target, #sl-two:target, #sl-three:target {
     opacity: 1.0;
}
p {
     margin: 1em 0;
     line-height: 180%;
     text-align: left;
}
blockquote {
     font-size: 0.9em;
     line-height: 1.15em;
     color: #822222;
     text-align: center;
     font-style: italic;
}
small {
     font-size: .7em;
}
img.left,
img[style="float: left;"],
img[style="float:left"] {
	margin: 1.6em 1.6em 1em 0;
	float: left;
	max-width: 48%;
}
img.right,
img[style="float: right;"],
img[style="float:right"] {
	margin: 1.6em 0 1em 1.6em;
	float: right;
	max-width: 48%;
}
img.icon {
     width: 36px;
}
.left { text-align: left; }
.right { text-align: right; }
.float-left { float: left; }
.float-right { float: right; }
.clear { clear: both; }
.center { text-align: center; }
.right { text-align: right; }
.left { text-align: left; }
.small, small { font-size: 0.8em; }
.top, .va-top { vertical-align: top; }
.inline-block { display: inline-block; }
.pad-right { padding-right: 2em; }
.green { color: #090; }
.red { color: #812222; }
.gray { color: #909090; }
.w80 { width: 80px; }
b, .bold { font-weight: bold; }
.unbold { font-weight: normal; }
.w50 { width: 50%; }
.w50per { width: 50%; min-width: 300px; }

#contact-us form {
     display: inline-block;
     width: 54%;
     margin-right: 6%;
     vertical-align: top;
}
#contact-us form + .float-right {
     display: inline-block;
     float: none;
     width: 40%;
     vertical-align: top;
}
body.news #contact-us form + .float-right {
     display: block;
     width: 100%;
     margin: 2em 0;
}

/* Footer, Link, and List styles */
footer, #footer {
     position: relative;
     z-index: 4;
     padding: 40px;
     color: #fff;
     font-size: .8em;
     text-align: center;
     clear: both;
     background-color: #615753;
}
footer a {
     color: #fff;
     font-weight: bold;
}
footer p {
     margin: 3em 0;
     font-size: 1em;
}
button.close {
     border: 0;
     background: transparent none;
     font-family: 'freestyle', cursive;
     font-size: 1.5em;
     text-decoration: none;
     cursor: pointer;
     color: #812222;
}
button.close:hover {
  text-decoration: none;
  color: #222;
}
ul, ol {
     list-style-type: square;
     margin: 0.5em;
     margin-left: 3em;
     line-height: 1.5em;
     text-align: left;
}
ol { 
     list-style: decimal;
}
ul.disc { list-style-type: disc; }
ul.circle { list-style-type: circle; }
ul.square { list-style-type: square; }
ul.none { list-style-type: none; }
strong, b { font-weight: bold; }
em { font-style: italic; }

li {
     margin: 1em 1em 1em 2em;
     padding-left: 0.4em;
}

#container-boxes {
     margin-left: 3%;
	position: relative;
	top: 0;
	display: inline-block;
	text-align: left;
	vertical-align: top;
	width: 31%;
	min-width: 300px;
	overflow: hidden;
     background-color: #dce4dc;
}
.column {
     margin: 2% 0 2% 1%;
	position: relative;
	top: 0;
	display: inline-block;
	text-align: left;
	vertical-align: top;
	width: 23.6%;
	min-width: 80px;
	background-color: #fff;
	font-size: 0.9em;
}
.column:first-of-type {
     margin-left: 0;
}
.column p, .column blockquote, .column ul {
     padding: 3%;
}
.column img.colorize {
     width: 92%;
     margin: 34px  4%;
     opacity: 1.0;
     transition: opacity 0.75s;
}
.column:hover img.colorize {
     opacity: 0.0;
}
.box {
	margin: 0 0 8% 0;
	/*font-size: 0.9em; */
	position: relative;
	top: 0px;
	vertical-align: top;
	padding-top: 1.6em;
}
.white {
     padding: 1em 0;
	background-color: #fff;
	text-align: left;
}
.buvital-content {
     display: inline-block;
     margin: 4% 10%;
     padding: 2%;
     text-align: left;
}
.bg-gray {
     background-color: #c0c0c0;
     min-height: 2em;
}
.padsides {
	padding: 0px 2em .25em 2em;
}
.padtopbottom {
     padding-top: 2em;
     padding-bottom: 2em;
}
.strikeout {
     text-decoration: line-through;
}
h1 {
  font-size: 2.4em;
  font-family: 'Figtree';
     clear: both;
}
h1, h1 a, h1 a:link, h1 a:active, h1 a:visited {
  margin: 0px;
  padding: 2px 0px 6px 0px;
  text-align: center;
  font-weight: normal;
  color: #888;
  line-height: 120%;
  text-decoration: none;
}
h1 a:hover {
	color: #444;
	text-decoration: none;
     text-transform: uppercase;
}
h2 {
	padding: 4px 0px;
     font-size: 1.5em;
     text-transform: uppercase;
     clear: both;
}
h2, h2 a, h2 a:link, h2 a:active, h2 a:visited {
  margin: 1em 0;
  padding: 0px 0px;
  text-align: center;
  font-weight: bold;
  color: #444;
  line-height: 120%;
  text-decoration: none;
}
h2 a:hover {
	color: #444;
	text-decoration: none;
}

.next {
     font-size: 2em;
     color: #822222;
}
h2.quote {
     font-size: 3em;
     color: #444;
     line-height: 1em;
     font-weight: normal;
     margin-bottom: 60px;
}
h3, h3 a, h3 a:link, h3 a:active, h3 a:visited {
	font-weight: bold;
 	text-align: left;
	color: #444;
	padding: 0px;
     text-decoration: none;
	transition: text-decoration 0.5s, color 0.5s;
}
h3 {
	font-size: 1.3em;
	margin: 1em 0;
}
h3 a:hover {
	color: #999;
	text-decoration: underline;
}
.box h3 {
 	text-align: center;
	color: #c0c0c0;
	padding: 0px;
}
h4 {
     padding: 1em 0 1em 0;
     font-size: 1.1em;
     color: #606060;
     font-weight: bold;
}
h5 {
     padding: 1em 0 1em 0;
     font-size: 0.9em;
     color: #909090;
     font-weight: bold;
}
p.define {
     font-size: .8em;
}
.script {
     color: #822222;
}
.buvital {
     display: none;
     background-color: rgba(0,0,0,0.0);
     transition: background-color 1s;
}
.buvital:target {
     display: block;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0,0,0,0.3);
     transition: background-color 1s;
}

form h2 { 
     border-top: 2px solid #b5b6b2;
     text-align: left;
     padding: 1em 0 0 0;
     font-size: 1.4em;
}
form h3 {font-size: 1.2em;
     margin: 2em 0 0.5em 0;
}
form p {
     margin: 1.4em 0;
}

label { 
     display: inline-block;
     padding: 1em 0.2em 0.5em 0.2em;
     cursor: pointer;
}
input, textarea, button, .button, select, .StripeElement {
     margin: 0;
     padding: 0.3em 0.8em;
     width: 280px;
     border: 1px solid #ddd;
     border-radius: 2px;
     background-color: #f7f7f7;
     font-size: 1em;
     font-family: 'Figtree';
} 
input[type='text'], select {
     display: block;
}
input[type='checkbox'], 
input[type='radio'] {
     width: 28px;
     padding: 1em 0.2em 0.5em 0.2em;
}
.StripeElement {
	height: 20px;
	width: 300px;
	padding: 0.6em 0.2em 0.2em 0.2em;
}
#payment-element.StripeElement {
     width: auto;
     padding: 1em;
     height: auto;
     margin: 1em 0; 
}
input:focus, textarea:focus, input[type='submit']:hover, button:hover, .button:hover {
     border: 1px solid #338;
     background-color: #f7f7f7;
}
textarea {
     width: 360px;
     max-width: 94%;
     min-height: 120px;
}
input[type='submit'], button, .button {
     font-weight: bold;
     font-family: 'Figtree';
	color: #338;
}
.button, a.button {
     text-align: center;
     text-decoration: none;
	color: #606060;
}
.button:hover, a.button:hover {
     text-decoration: none;
}
.hide {
     overflow: hidden;
     max-height: 0;
     transition: max-height 0.6s;
}
input[type='radio']:checked + div.hide {
     max-height: 800px;
     transition: max-height 0.6s;
}
div.expand-fields {
     max-height: 0;
     transition: max-height 0.3s;
     overflow: hidden;
     overflow: hidden;
     margin-bottom: 3em;
  }
div:has(input:checked) + div div.expand-fields {
     max-height: 2000px;
     transition: max-height 0.3s;
}

/* Payment Method Toggle */
#toggle-stripe, #toggle-check {
     overflow: hidden;
     max-height: 0;
     transition: max-height 0.6s;
}
input#pay-stripe:checked ~ #toggle-stripe,
input#pay-check:checked ~ #toggle-check {
     max-height: 800px;
     transition: max-height 0.6s;
}

.mw1500 {
     max-width: 1500px;
     margin: 0 auto;
}
.mw800 {
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
}
.w200px {
     width: 200px;
}
.w30per {
     width: 30%;
}
.w40per {
     width: 40%;
}
.w100per {
     width: 100%;
}
.w-min50px {
     min-height: 50px;
}

.w48px {
     width: 48px;
}
.w62px {
     width: 62px;
}
input.w48px, input.w62px {
     padding: 0.3em 0.3em;
     text-align: center;
}

/* ------------------------------------- news post ------------------------------------- */

body .news {
  padding: 0;
  margin: 2.4em 0;
}
.box .news {
  margin: 2.4em 0;
  clear: both;
}
.news h3, .news h4 {
  margin: 1em 0 0 0;
  padding: 0.2em 0;
  text-align: left;
}

.box .news p {
  margin: 0.5em 0 0.5em 0;
}

body .news img {
  max-width: 100%;
  margin: 0 1em 1em 0;
}
.box .news img {
  max-width: 100%;
  margin: 0 0.5em 0.5em 0;
}

.news_title a {
  text-decoration: none;
}

.news_date {
  color: #444;
  font-size: .8em;
  font-weight: normal;
	margin: 0;
	padding: 0.2em 0;
}
.paper .news_date {
	margin: -4px 0 -3px 14px;
	padding: 0;
}
.news_content {
  margin-bottom: 4px;
}
.news_content p {
	clear: both;
}
.left-content .news_content {
  margin-bottom: 0;
}
.news_tags {
  margin-bottom: 6px;
  padding: 2px 5px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  font-size: .7em;
  clear: both;
}
.box .news_tags {
	display: none;
}
.news_back {
  margin-top: 20px;
  font-size: 11px;
}

.news_back a {
  text-decoration: none;
}

.news_back a:hover {
  text-decoration: underline;
}

.news_nav .left {
  float:left;
  text-align:left;
}

.news_nav .right {
  float:right;
  text-align:right;
}



.section a, .section a {
  text-decoration: none;
}

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

.section a.large {
  font-size: 22px;
}
.alert {
     color: #900;
}
div.alert-form {
     border: 1px solid #900; 
     border-radius: 2px; 
     padding: 2px 8px 8px; 
     margin: 4px -8px;
}
div.alert-form b.alert-b {
     color: #900;
}
div.alert-pop {
     position: fixed;
     top: 0;
     left: 0;
     width: 84%;
     color: #900;
     font-size: 1.1em;
     padding: 1em 8%;
     background-color: #eee;
     box-shadow: 0 0 200px #444;
     z-index: 9999;
     cursor: pointer;
}

div.alert-hide {
     display: none;
}


/*-----------------------------------products page ---------------------------------*/
.breadcrumbs {
     font-weight: normal;
     font-size: 0.9em;
     margin-bottom: 2em;
}

.featured input[name='slider-button'] + label {
     width: 2em;
     background-color: #988e8a;
     height: 1em;
     text-align: center;
     vertical-align: middle;
     padding: 0.2em 0.2em 0.8em 0.2em;
     margin: 0.1em;
     color: #fff;
     line-height: 160%;
     display: inline-block;
}
.featured input[type="radio"] {
     margin-left: 0;
     display: none;
}
.featured input[name='slider-button']:checked {
     display: none;
}
.featured input[name='slider-button']:checked + label {
     background-color: #615753;
}
.w200px {
     width: 200px;
}

ul.products {
     margin: 0;
     padding: 0;
}
div.featured ul.products {
     width: 400vw;
     margin-left: -35vw;
     transition: margin-left 0.6s;
     background-color: #615753;
     /* height: calc(260px + 8vw); */
}
div.featured input[id='slider-button-1']:checked ~ ul.products { margin-left: -2vw; }
div.featured input[id='slider-button-2']:checked ~ ul.products { margin-left: -35vw; }
div.featured input[id='slider-button-3']:checked ~ ul.products { margin-left: -77vw; }
div.featured input[id='slider-button-4']:checked ~ ul.products { margin-left: -118vw; }
div.featured input[id='slider-button-5']:checked ~ ul.products { margin-left: -160vw; }
div.featured input[id='slider-button-6']:checked ~ ul.products { margin-left: -201vw; }
div.featured input[id='slider-button-7']:checked ~ ul.products { margin-left: -243vw; }
div.featured input[id='slider-button-8']:checked ~ ul.products { margin-left: -284vw; }
div.featured input[id='slider-button-9']:checked ~ ul.products { margin-left: -325vw; }
div.featured input[id='slider-button-10']:checked ~ ul.products { margin-left: -367vw; }

ul.products li:not(li ul li) {
     margin: 0;
     padding: 0;
     display: inline-block;
     width: 34vw;
     margin: 1vw 1vw 1vw 1vw;
     padding: 2vw;
     height: auto;
     max-height: 260px;
     min-height: 260px;
     overflow: hidden;
     vertical-align: top;
     transition: max-height 0.6s;
     position: relative;
     border: 2px solid #fff;
     box-shadow: 0 0 14px #0002;
}
ul.products.product-details li:not(li ul li) {
     display: block;
     width: auto;
     max-height: none;
     min-height: auto;
}
.featured ul.products li:not(li ul li) {
     margin: 2vw 1.6vw 2vw 1.6vw;
     color: #fff;
     background-color: #988e8a;
     border: 2px solid #fff0;
     box-shadow: 0 0 14px #0000;
     max-width: 92vw;
}
.featured ul.products em a {
     color: #d5f3d5;
}
ul.products img {
     width: 40%;
     float: left;
     margin: 0 2% 4% 0;
     box-shadow: 0 0 12px #0003;
     border: 1px solid #fff;
     transition: width 0.4s, max-width 0.4s, margin-left 0.4s, margin-top 0.4s;
}
ul.products img.icon {
     width: 28px;
     border: none;
     box-shadow: none;
}
ul.products.img-zoom img:has(~ label.button input.show-more:checked),
ul.products.product-details img:not(img.icon) {
	margin-left: -1em;
     margin-top: -1em;
     width: calc(100% + 2em);
     padding: 0;
     max-width: min(calc(100% + 4em), 580px);
     transition: width 0.4s, max-width 0.4s, margin-left 0.4s, margin-top 0.4s;
}
ul.products h4 {
     text-align: right;
     font-weight: normal;
}
.featured ul.products h4 {
     color: #fff;
}
ul.products h4 + em {
     display: block;
     text-align: right;
     margin-bottom: 2em;
}
ul.products p {
     clear: both;
	 font-size: 0.9em;
}
ul.products li ul {
	 margin: 1em 0 1em 1em;
	 clear: both;
}
ul.products li ul li {
	 margin: 0.5em 0;
}
.featured ul.products label.button,
ul.products label.button,
ul.products a.button {
     width: 22vw;
     position: absolute;
     bottom: 0;
     background-color: #9dbe8e;
     color: #fff;
     border: 1vw solid #988e8a;
     box-shadow: 0 0 32px #988e8a;
     left: 1vw;
     margin: 2vw 2vw 0 0;
     font-weight: bold;
     padding: 0.3em 0;
}
ul.products label.button {
     border: 1vw solid #dce4dc;
     box-shadow: 0 0 32px #dce4dc;
}
ul.products a.button {
     position: relative;
     display: block;
     border: none;
     box-shadow: none;
     padding: 1em;
     text-align: center;
     margin: 1em 0 2.4em 0;
     width: auto;
     left: auto;
     background-color: #615753;
}
.featured ul.products label.button:hover,
ul.products label.button:hover,
ul.products a.button:hover {
background-color: #617753;
  transition: background-color 0.4s;
}

ul.products li label.button input.show-more {
     display: none;
}
ul.products li label.button input.show-more ~ b:first-of-type {
     display: inline;
}
ul.products li label.button input.show-more:checked ~ b:first-of-type {
     display: none;
}
ul.products li label.button input.show-more ~ b:nth-of-type(2) {
     display: none;
}
ul.products li label.button input.show-more:checked ~ b:nth-of-type(2) {
     display: inline;
}
ul.products li label:has(label.button input.show-more:checked) {
     display: block;
}
ul.products li:not(li ul li):has(label.button input.show-more:checked) {
          max-height: 3200px;
          transition: max-height 0.6s;
          padding-bottom: 4em;
          position: relative;
          top: 0;
          z-index: 9999;
}
ul.products div.right {
     clear: both;
}

/* -------------------------------- misc. --------------------------------- */
#showDeliveryResults {
     border: 2px solid #9dbe8e;
     padding: 0.6em 1em;
}
.delivery-table {
     max-height: 200px;
     overflow-x: scroll;
     border: 2px solid #9dbe8e;
     padding: 1em 1.5em;
     line-height: 160%;
}

/* -------------------------------- big screen overrides ----------------------------- */
@media screen and (min-width: 860px) {
     label {
          display: inline-block;
          width: 280px;
          text-align: right;
          margin-right: 1.2em;
     }
     input[type="checkbox"] + label,
     input[type="radio"] + label {
          text-align: left;
     }
     input[type="checkbox"],
     input[type="radio"] {
          margin-left: 276px;
     }
     input[type="text"], select {
          display: inline-block;
     }
     textarea {
          vertical-align: middle;
     }
     form div.flex-text {
          display: inline-block;
          padding: 0.8em 0;
     }
     div#contact-us input[type="checkbox"],
     div#contact-us input[type="radio"],
     div.security-check input[type="checkbox"],
     div.security-check input[type="radio"] {
          margin-left: 0;
     }
     div.security-check label {
          width: auto;
          text-align: left;
          display: block;
     }
     #container .news-img-auto,
     #container .news-img-sm {
          max-width: 50%;
          display: block;
          float: left;
          margin: 0.5em 2em 1.2em 0;
     }
}
@media screen and (min-width: 1200px) {
     label {
          text-align: left;
     }
     ul.products li:not(li ul li) {
          width: 22vw;
     }
     div.featured ul.products { margin-left: -22vw; }
     div.featured input[id='slider-button-2']:checked ~ ul.products { margin-left: -22vw; }
     div.featured input[id='slider-button-3']:checked ~ ul.products { margin-left: -50vw; }
     div.featured input[id='slider-button-4']:checked ~ ul.products { margin-left: -78vw; }
     div.featured input[id='slider-button-5']:checked ~ ul.products { margin-left: -106vw; }
     div.featured input[id='slider-button-6']:checked ~ ul.products { margin-left: -134vw; }
     div.featured input[id='slider-button-7']:checked ~ ul.products { margin-left: -162vw; }
     div.featured input[id='slider-button-8']:checked ~ ul.products { margin-left: -190vw; }
     div.featured input[id='slider-button-9']:checked ~ ul.products { margin-left: -218vw; }
     div.featured input[id='slider-button-10']:checked ~ ul.products { margin-left: -246vw; }
}
@media screen and (min-width: 1200px) {
     label {
          text-align: right;
     }
}

/* -------------------------------- small screen overrides ----------------------------- */

img {
     max-width: 100%;
}

@media screen and (max-width: 1840px) {
     nav {
          top: -60px;
     }
}
@media screen and (max-width: 1420px) {
     h2.quote {
          font-size: 2.4em;
     }
}
@media screen and (max-width: 1320px) {
     nav {
          top: 0;
          left: 0;
          text-align: center;
     }
}
@media screen and (max-width: 1200px) {
     #container {
     	width: 94%;
     }
     #container-boxes {
          margin-left: 0;
     	width: 94%;
	     min-width: 560px;
     }
}
@media screen and (max-width: 980px) {
     #container {
     	width: 94%;
     }
     h2.quote {
          font-size: 1.8em;
     }
     .cols-three {
          display: block;
          width: 96%;
          padding: 2em 2% 2em 2%;
          margin: 2% 0 3% 0;
     }
     .cols-three:last-of-type {
          margin-right: 0;
     }
     .cols-three p {
          display: inline-block;
          width: 44%;
          margin: 1.6em 3%;
          vertical-align: middle;
     }
     menu.top-menu {
          line-height: 140%;
          padding: 0.4em;
     }
     menu.top-menu a {
          font-size: 0.8em;
          padding: 0.1em 0.2em;
     }
}    
@media screen and (max-width: 860px) {
     .column {
          margin: 0;
     	display: block;
     	width: 100%;
     	min-width: 300px;
     	font-size: 1.1em;
     	border-top: 30px solid #c0c0c0;
     }
     .column img.colorize {
          width: 42%;
          margin: 12px 29% 4% 29%;
     }
     #container-boxes {
	     min-width: 340px;
     }
     label {
          display: inline-block;
          width: 280px;
          text-align: left;
          margin-right: 1.2em;
     }
}
@media screen and (max-width: 720px) { 
     div.banner img {
          min-width: 700px;
     }
}
@media screen and (max-width: 670px) { 
     body.home header h1 {
          height: calc(100vh - 4.2em);
     }
     #contact-us form {
          display: block;
          width: 100%;
          margin: 2em 0;
     }
     #contact-us form + .float-right {
          display: block;
          width: 100%;
          margin: 2em 0;
     }
}
@media screen and (max-width: 660px) {
     ul.products li:not(li ul li) {
          display: block;
          width: auto;
          margin: 5% 0 5% 0;
     }
     .featured ul.products li:not(li ul li) {
          display: inline-block;
     }
     div.featured ul.products {
          width: 1000vw;
     }
     div.featured input[id='slider-button-1']:checked ~ ul.products { margin-left: -2vw }
     div.featured input[id='slider-button-2']:checked ~ ul.products { margin-left: -102vw; }
     div.featured input[id='slider-button-3']:checked ~ ul.products { margin-left: -203vw; }
     div.featured input[id='slider-button-4']:checked ~ ul.products { margin-left: -303vw; }
     div.featured input[id='slider-button-5']:checked ~ ul.products { margin-left: -404vw; }
     div.featured input[id='slider-button-6']:checked ~ ul.products { margin-left: -504vw; }
     div.featured input[id='slider-button-7']:checked ~ ul.products { margin-left: -605vw; }
     div.featured input[id='slider-button-8']:checked ~ ul.products { margin-left: -705vw; }
     div.featured input[id='slider-button-9']:checked ~ ul.products { margin-left: -806vw; }
     div.featured input[id='slider-button-10']:checked ~ ul.products { margin-left: -906vw; }
}
@media screen and (max-width: 600px) { 
     label {
          display: block;
          text-align: left;
          padding: 0.5em 0.2em 0.1em 0.2em;
     }
     input, textarea {
          width: 94%;
          padding: 0.3em 3%;
     }
     input[type='submit'] {
          width: 100%;
     }
     .w50 { width: 100%; }
     
     .cols-three p {
          display: block;
          width: 100%;
          margin: 1.6em 0;
          vertical-align: top;
     }
}