/* Jimp Studio, LLC - Aaron Klabunde - 2020-04-02
     Project: Executive Business Theme
     Description: Primary Styles
*/

@import url('https://fonts.googleapis.com/css?family=Muli');

@font-face {
 font-family: "twcen";
 font-weight: normal;
 src: url("/themes/construction-biz/fonts/TwCenMT.ttf");
}
@font-face {
 font-family: "twcen";
 font-weight: bold;
 src: url("/themes/construction-biz/fonts/TwCenMTBold.ttf");
}
@font-face {
 font-family: "twcen";
 font-style: italic;
 src: url("/themes/construction-biz/fonts/TwCenMTItalic.ttf");
}
@font-face {
 font-family: "twcen";
 font-weight: bold;
 font-style: italic;
 src: url("/themes/construction-biz/fonts/TwCenMTBoldItalic.ttf");
}

body {
     background-color: #bbb;
     text-align: center;
     color: #606060;
     font-family: 'twcen', sans-serif;
     line-height: 145%;
     font-size: 18px;
     letter-spacing: 0.06em;
}
header {
     position: relative;
     z-index: 10;
     text-align: left;
     padding: 0 3vw;
     height: calc(66vh - 3.6em);
     /*background-image: radial-gradient(#fff0 40%, #09091444 80%);*/
}
body.home header,
body.home-encore header {
     height: calc(100vh - 3.6em);
}
header #main-brand,
header h1#main-brand {
     z-index: 9999;
     position: sticky;
     top: calc((1 - (var(--scroll) * 6)) * 32vh);
     display: inline-block;
     text-align: left;
     font-size: 2.4em;
     font-weight: normal;
     padding: 0.2em 0.4em;
     letter-spacing: 0.3em;
}
header #main-brand > a img,
header #main-brand > a > span,
header h1#main-brand > a img,
header h1#main-brand > a > span {
     display: block;
     z-index: 9999;
     position: relative;
     top: 0;
     font-size: 2em;
     font-weight: bold;
     filter: drop-shadow(1px 1px 2px #fff1);
     padding: 8px 0;
     line-height: 120%;
}
header #main-brand > a img,
header h1#main-brand > a img {
     width: min(260px, 25vw);
}
header #main-brand > a small,
header h1#main-brand > a small {
     color: #005;
     border-top: 2px solid #005;
     display: inline-block;
     padding: 0.6em;
}
header #main-brand > a a,
header #main-brand > a a:link,
header #main-brand > a a:active,
header #main-brand > a a:visited
header h1#main-brand > a a,
header h1#main-brand > a a:link,
header h1#main-brand > a a:active,
header h1#main-brand > a a:visited { 
     color: #005;
}
h1#main-brand, h1#main-brand a, h1#main-brand a:link, h1#main-brand a:active, h1#main-brand a:visited,
header div#main-brand, header div#main-brand > a, header div#main-brand > a:link, header div#main-brand > a:active, header div#main-brand > a:visited {
  font-size: inherit;
  color: #931;
}
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;
}
.view-margin {
     position: relative;
     z-index: 99;
     overflow: hidden;
     padding: 4em 0 8em 0;
     background-image: linear-gradient(#f7f7f333, #f7f7f3dd 240px, #f7f7f3 24%, #f7f7f3 70%, #f7f7f3dd 90%, #f7f7f399)
}

a {
     cursor: pointer;
     text-decoration: underline;
     color: #c49900;
     font-weight: bold;
}
a:hover {
     text-decoration: underline;
     color: #bba;
}

menu.top-menu {
     padding: 1em 0;
     text-align: center;
     line-height: 240%;
     position: sticky;
     top: 0;
     display: block;
     z-index: 999;
     background-color: #58595b;
     margin: 0 0 0 0;
     list-style-type: none;
     padding: 0.6em 0;
     box-shadow: 0 10px 8px #0003, 0 10px 30px #0001, 0 10px 30px #0001;
     background-color: #789cb3;
}
menu.top-menu li {
     display: inline-block;
     list-style-type: none;
     margin: 0 1em 0 1em;
}
menu.top-menu li:first-of-type {
     position: absolute;
     top: 6px;
     /*left: min(calc(var(--scroll) * 240vh - 20vh), 2vh);*/
     left: 2vh;
     opacity: min(calc(var(--scroll) * 20 - 2), 1);
     filter: drop-shadow(1px 1px 1px #0049);
}
menu.top-menu li:first-of-type a {
     border-bottom-style: none;
}
menu.top-menu li:first-of-type a img {
     height: 52px;
}

menu.top-menu a {
     font-size: 1em;
     margin: 1.4em 2px 0 2px;
     padding: 0.3em 0.5em;
     font-weight: normal;
     display: inline;
     text-decoration: none;
     text-transform: uppercase;
     color: #ffe88a;
     letter-spacing: 0.2em;
     border-bottom: 1px solid #ffe88a;
     text-shadow: 1px 1px 1px #0045;
     box-shadow: 0 1px 1px #0002;
}
menu.top-menu a:first-of-type {
     box-shadow: none;
}
menu.top-menu a:hover {
     border-color: #fffff9;
     color: #fffff9;
}

.static-menu a {
     padding: 0.5em;
     border-left: 1px solid #385d7a;
}
.static-menu a:first-of-type {
     border-left: 0 ;
}
div.banner {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 4;
     width: 100%;
     margin: 0 auto;
     padding: 0;
     text-align: center;
}
div.banner img {
     min-height: 100vh;
     min-width: 100%;
     max-width: 4800px;
     margin: 0 auto;
     width: auto;
     display: inline-block;
     margin-left: min(0px, calc(60vw - 100vh));
     filter: brightness(1.1);
}
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: #58595b;
}
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;
     min-width: 340px;
     margin-bottom: 2em;
     overflow: hidden;
     width: min(90vw, 1400px);
}
#services {
     margin: 1em 0 5em 0;
}
.cols-three {
     display: inline-block;
     vertical-align: top;
     padding: 2em 2% 2em 2%;
     line-height: 200%;
     width: min(22%, 480px);
     margin: 2% 6% 3% 0;
     background-color: #fefefc;
}
.cols-three p:first-of-type {
     margin: 0 -3vw 2em -3vw;
}
.cols-three:last-of-type {
     margin-right: 0;
}
.cols-three h2, 
.cols-three h3, 
.cols-three h4, 
.cols-three h5 {
     text-align: center;
}
div.cols-three h3 {
     color: #444;
     text-transform: uppercase;
     font-weight: normal;
     font-size: 1.1rem;
     margin: 0 0 1.4em 0;
     letter-spacing: 0.2em;
}
.cols-three p {
     margin: 1.6em 0;
     text-align: justify;
}
.cols-three p img {
     margin: 0 0 0.5em 0;
     border: 2px solid #fff;
     object-fit: cover;
     width: calc(100% - 4px);
     height: 26cqw;
     display: block;
     position: relative;
     top: 0;
     box-shadow: 0 0 4px #0003, 4px 4px 16px #0004;
}

div#overview + p {
     position: relative;
     overflow: hidden;
     width: 100vw;
     margin: 3em 0;

}
div#overview + p img {
     margin: 0;
     padding: 0;
     margin-bottom: -1em;
     width: 100vw;
}
div#overview + p::after {
     position: absolute;
     top: 0;
     width: 100%;
     content: '';
     display: block;
     height: 100%;
     background: linear-gradient(#2109, #2103 20px, #2100 40px, #2100 calc(100% - 30px), #2103 calc(100% - 10px), #2108);
}

.content {
	margin-bottom: 4%;
     margin-top: 0;
     padding: 5% 4% 2% 4%;
     overflow: hidden;
     background-color: #fffff9;
}

body.home aside,
body.home-encore aside {
     /*margin: 8em 4vw 4vw 12vw;*/
     margin: 8em 8vw 4vw 16vw;
}
body.home aside img,
body.home-encore aside img {
     border: 2px solid #fff;
}
aside + div {
     position: absolute;
     top: calc(2vw + 4em);
     left: 5.6vw;
     width: 20vw;
     text-align: left;
     padding: 2vw 3vw 3vw 3vw;
     line-height: 190%;
     background-color: #fefefc;
     color: inherit;
}
aside + div + div,
div.columns-main-lead {
     background-color: #fffff9;
     width: min(78%, 1360px);
     padding: 2em 5vw 6em;
     margin: 8em auto -5em auto;
}
.content > aside:has(img) {
     float: left;
     width: 44%;
     margin-bottom: 2em;
     margin-right: 4%;
}
.content aside:has(img[style="float:right"]) {
     margin-right: 0;
     margin-left: 4%;
     float: right;
}
.content, div.white {
  	 margin: 24px;
}
.content, .cols-three, div.white, div:not(#full-article) > .news, #content-img,
aside + div, aside + div + div, div.columns-main-lead,
body.about div.content > ul > li > ul > li:first-of-type,
body.about div.content > ul > li:not(:has(ul))  {
     box-shadow: 0 0 4px #0001, 4px 4px 20px #0001;
}
div.float-left, div.float-right {
     max-width: calc(93% - 250px);
     margin-left: 4%;
}
div.float-left {
     margin-left: 0;
     margin-right: 4%;
}
body.contact div.content div.inline-block {
     vertical-align: top;
     max-width: calc(93% - 250px);
     margin-right: 6%;
}
body.contact div.content div.inline-block + div.inline-block {
     margin-right: 0;
}
body.contact div.content form ~ h4 ~ p {
     margin: 0.8em 0 1em 2vw;
}
body.contact div.content div.inline-block + div.inline-block img,
div.content ul ul li:first-of-type p img {
     width: 2em;
     display: inline-block;
     margin: 1em 1em -1em 0;
     border: 3px solid #000;
     padding: 0.2em;
     border-radius: 20%;
     opacity: 0.4;
}
div.content ul ul li:first-of-type p img {
     width: 1.2em;
     margin: 0.9em 0.9em -0.6em 0;
     border: 2px solid #000;
}
#sl-one, #sl-two, #sl-three {
     opacity: 1.0;
     transition: 2s;
}
#sl-one:target, #sl-two:target, #sl-three:target {
     opacity: 1.0;
}
p {
     line-height: 160%;
     margin: 2em 0 0.6em 0;
}
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;"] {
	margin: 1.6em 1.6em 1em 0;
	float: left;
	max-width: 50%;
}
img.right,
img[style="float: right;"] {
	margin: 1.6em 0 1em 1.6em;
	float: right;
	max-width: 50%;
}
.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; }

form {
     clear: both;
     margin-top: 2em;
}
#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: #fefefc;
     text-align: center;
     clear: both;
     background-color: #4f7289;
     box-shadow: 0 -4px 16px #0003;
     z-index: 999;
}
footer > div {
     width: 34%;
     display: inline-block;
     vertical-align: top;
     background-color: #789cb3;
     box-shadow: 2px 2px 6px #0021, 2px 2px 18px #0021;
     padding: 1em 4%;
     margin: -5em 3% 0 3%;
     min-height: 300px;
}
footer > div label {
     width: auto;
     display: inline-block;
     text-align: left;
}
footer div h3, footer div h4 {
     color: #fefefc;
}
footer p.static-menu {
     margin: 4em;
}
footer p.static-menu a {
     padding: 0.5em;
     border-left: 1px solid #ffe88a;
     font-weight: normal;
     color: #ffe88a;
}
footer a {
     color: #fff;
     font-weight: bold;
}
footer p {
     margin: 1em 0;
     font-size: 1em;
     vertical-align: middle;
}
footer p img {
     filter: drop-shadow(1px 1px 3px #000);
     width: 120px;
     padding: 0 5em;
}
footer p small, footer p small a {
     color: #a2b6c4;
}
footer .button, footer a.button, footer input[type='submit'], footer button {
     box-shadow: -1px -1px 3px #fffa, 4px 4px 20px #0005;
}
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: 0;
     line-height: 1.5em;
}
ol { 
     list-style: decimal;
}
.cols-three ul, 
.cols-three ol {
  text-align: left;
  margin: 0;
}
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;
}
.cols-three ul li {
  margin: 0.4em 0 0 1em;
}

body.about div.content > ul {
  list-style-type: none;
  margin: 0;
  text-align: center;
}
body.about div.content > ul > li {
  margin: 1em 0 3em 0;
  padding: 0;
  clear: both;
  display: block;
}
body.about div.content > ul > li > ul:first-of-type {
  list-style-type: none;
  margin: 2em 0;
  text-align: left;
  border-top: 2px solid #0002;
}
body.about div.content > ul > li > ul > li {
  display: inline-block;
  vertical-align: top;
  padding: 0;
}
body.about div.content > ul > li > ul > li:first-of-type,
body.about div.content > ul > li:not(:has(ul)) {
  margin: 3em 0 0 0;
  background-color: #fefefc;
  padding: 1em;
  width: 240px;
  display: inline-block;
  vertical-align: top;
}
body.about div.content > ul > li:not(:has(ul)) {
  margin: 16px;
  text-align: left;
}
body.about div.content > ul > li > ul > li:nth-of-type(2) {
  width: calc(100% - 240px - 5em);
}
body.about div.content ul > li > ul > li:first-of-type p img {
  width: 1.2em;
  margin: 0.9em 0.9em -0.6em 0;
}
body.about div.content > ul > li > ul > li:first-of-type > h3,
body.about div.content > ul > li:not(:has(ul)) > h3 {
  margin: 0;
  color: #433;
  font-size: 1.1em;
  font-weight: normal;
}
body.about div.content > ul > li > ul > li:first-of-type > h4,
body.about div.content > ul > li:not(:has(ul)) > h4 {
  padding: 0;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 0.8em;
  letter-spacing: 0.1em;
}
body.about div.content > ul > li > ul > li:first-of-type > p {
  margin: 0.6em 0;
  font-size: 0.9em;
}

body.sales div.content > div {
     border-top: 2px solid #0002;
     margin: 6vh 0 6vh 0;
}
body.sales div.content div.float-right {
     width: 50%;
}
body.sales div.content > div {
     border-top: 2px solid #0002;
     margin: 10vh 0 10vh 0;
}
body.sales div.content div.float-right > p {
     margin: 1.2em 0;
}
body.sales div.content div.float-right > p > a img {
     /*width: calc(50% - 1em);
     box-shadow: 0 0 4px #0002, 4px 4px 20px #0004;
     aspect-ratio: 3 / 2;
     object-fit: cover;
     margin-bottom: 0;*/
     border: 2px solid #fff;
     width: calc(50% - 2vw - 4px);
     margin: 0 1vw 2vw 1vw;
     box-shadow: 0 0 2px #0003, 2px 2px 12px #0004;
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
body.sales div.content > ul {
     list-style-type: none;
     text-align: center;
}
body.sales div.content > ul li {
     margin: 1em 0 1em 0;
     display: inline-block;
     margin-left: 0;
}
body.sales div.content > ul li img {
     display: block;
     margin: 0 1vw 0.6em 1vw;
     width: calc(100% - 2vw);
     box-shadow: 0 0 2px #0003, 2px 2px 12px #0004;
     aspect-ratio: 16 / 9;
     object-fit: cover;
     border: 2px solid #fff;
}

#container-boxes {
     margin-left: 3%;
	position: relative;
	top: 0;
	display: inline-block;
	text-align: center;
	vertical-align: top;
	min-width: 300px;
	overflow: hidden;
     width: min(35vw, 600px);
}
.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-bottom: 8%;
	font-size: 1em; 
	position: relative;
	top: 0px;
	vertical-align: top;
}
.white {
     padding: 1em 0;
	background-color: #fff;
	text-align: left;
}
div.white { background-color: #fffff9; }
  
.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;
}
.strikeout {
     text-decoration: line-through;
}
h1, h1 a, h1 a:link, h1 a:active, h1 a:visited,
header div, header div > a, header div > a:link, header div > a:active, header div > a:visited {
     font-size: 1.8em;
     font-family: 'twcen';
     margin: 0px;
     padding: 2px 0px 6px 0px;
     text-align: center;
     font-weight: normal;
     color: #888;
     line-height: 120%;
     text-decoration: none;
     text-transform: uppercase;
     letter-spacing: 0.2em;
     color: #aaa;
}
h1 a:hover {
	color: #444;
	text-decoration: none;
}
h2, h2 a, h2 a:link, h2 a:active, h2 a:visited {
     margin: 1em 0;
     padding: 0px 0px;
     text-align: center;
     color: #444;
     line-height: 160%;
     text-decoration: none;
     font-weight: normal;
     text-transform: uppercase;
     letter-spacing: 0.2em;
     font-size: 1.3em;
}
h2 a:hover {
	color: #444;
	text-decoration: none;
}

.next {
     font-family: 'twcen';
     font-size: 2em;
     color: #822222;
}
h2.quote {
     font-family: 'twcen';
     font-size: 3em;
     color: #444;
     line-height: 1em;
     font-weight: normal;
     margin-bottom: 60px;
}
h3 {
	padding: 0;
	font-weight: bold;
	font-size: 1.3em;
     color: #555;
 	text-align: left;
}
h3 a, h3 a:link, h3 a:active, h3 a:visited {
	margin: 1em 0;
     text-decoration: none;
	transition: text-decoration 0.5s, color 0.5s;
     color: #c49900;
}
h3 a:hover {
	color: #999;
	text-decoration: underline;
}
.box h3 {
 	text-align: center;
	color: #c0c0c0;
	padding: 0;
}
h4 {
     padding: 1em 0 0 0;
     font-size: 1.1em;
     color: #888;
     font-weight: bold;
}
h5 {
     padding: 1em 0 1em 0;
     font-size: 0.9em;
     color: #909090;
     font-weight: bold;
}
p.define {
     font-size: .8em;
}
.script {
     font-family: 'twcen';
     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;
     font-size: 1em;
     font-family: 'Muli';
     background-color: #f7f7f1;
} 
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[type='submit']:hover, button:hover, .button:hover {
     background-color: #0d3e5e;
}
input:focus, textarea:focus {
     background-color: #fefefc;
}
textarea {
     width: 360px;
     max-width: 94%;
     min-height: 120px;
}
input[type='submit'], button, .button, a.button {
     text-align: center;
     text-decoration: none;
     font-family: 'twcen';
     font-size: 0.9em;
     line-height: 160%;
     color: #ffe88a;
     background-color: #4f7289;
     padding: 0.3em 1em;
     text-transform: uppercase;
     font-weight: normal;
     letter-spacing: 0.2em;
     border: none;
     box-shadow: -1px -1px 4px #fff, 4px 4px 20px #0007;
     text-shadow: 1px 1px 1px #0044;
     border-radius: 4px;
     display: inline-block;
     width: auto;
}
div.content input[type='submit'] {
     min-width: 280px;
}
.cols-three .button, .cols-three a.button {
     display: block;
}
.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;
}

.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 ------------------------------------- */

div:not(#full-article) > .news {
  padding: 0;
  margin: 2% 1% 3% 1%;
  width: 18%;
  padding: 2em 2vw;
  display: inline-block;
  background-color: #fefefc;
  vertical-align: top;
  text-align: left;
}
.news h3, .news h4 {
  margin: 1em 0 0 0;
  padding: 0.2em 0;
  font-weight: normal;
  font-size: 1em;
  text-align: left;
}
.news h3 a {
     font-weight: normal;
}
.box .news p {
  margin: 0.5em 0 0.5em 0;
}

.news img {
  max-width: 100%;
  margin: 0 0.5em 0.5em 0;
}
div:not(#full-article) > .news img {
  object-fit: cover;
  width: 100%;
  height: 16cqw;
}

.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;
}


/* -------------------------------- 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#contact-us label,
     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;
     }
}

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

img {
     max-width: 100%;
}

@media screen and (max-width: 1200px) {
     body {
          font-size: 16px;
     }
     header h1 img {
          width: 240px;
     }
     aside + div {
          position: relative;
          top: 0;
          left: 0;
          width: auto;
          z-index: 88;
     }
     body.home aside,
     body.home-encore aside {
          float: right;
          width: 50%;
          margin: 3em 1em 2em 1em;
     }
     
     body.home aside img,
     body.home-encore aside img {
          position: relative;
          z-index: 99;
     }
     #container {
     	width: 94%;
     }
     #container-boxes {
          margin-left: 0;
     	width: 94%;
	     min-width: 560px;
     }
     header #main-brand
     header h1#main-brand {
          font-size: 1.2em;
          top: 5vw;
     }
     img.left,
     img[style="float: left;"],
     img.right,
     img[style="float: right;"] {
     	max-width: 60%;
     }
}
@media screen and (max-width: 980px) {
     #container {
     	width: 94%;
     }
     h2.quote {
          font-size: 1.8em;
     }
     .cols-three {
          display: block;
          width: 88%;
          padding: 2em 2% 2em 2%;
          margin: 2% auto 3% auto;
     }
     .cols-three:last-of-type {
          margin-right: auto;
     }
     .cols-three p {
          margin: 1.6em 3%;
          vertical-align: middle;
     }
     .cols-three p img {
          height: 60cqw;
     }
     menu.top-menu {
          line-height: 140%;
          padding: 0.4em;
     }
     menu.top-menu a {
          font-size: 0.8em;
          padding: 0.1em 0.2em;
     }
     menu.top-menu li:first-of-type {
          left: 0;
     }
     menu.top-menu li:first-of-type a img {
          height: 26px;
     }
     div:not(#full-article) > .news {
          width: 44%;
     }
     div:not(#full-article) > .news img {
          height: 32cqw;
     }
}    
@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;
     }
     footer div {
          width: 88%;
          min-height: auto;
          margin-bottom: 8em;
     }
     footer form div {
          margin-bottom: 0;
          text-align: center;
          width: 100%;
     }
     .content > aside:has(img) {
          float: none !important;
          width: 100%;
          margin-right: 0;
          margin-left: 0;
     }
     .content aside:has(img[style="float:right"]) {
          margin-left: 0;
     }
     .content > aside img {
          float: none !important;
     }
     .content > aside > img {
          float: none;
     }
     
     header #main-brand > a img,
     header #main-brand > a > span,
     header h1#main-brand > a img,
     header h1#main-brand > a > span {
       line-height: 120%;
       font-weight: bold;
     }
     header {
       padding: 0 3vw;
       text-align: center;
     }
}
@media screen and (max-width: 720px) { 
     body.contact div.content div.inline-block {
          display: inline-block;
          max-width: 100%;
          margin-right: 0;
     }
     body.sales div.content div.float-right > p > a img {
          width: calc(100% - 2vw);
     }
}
@media screen and (max-width: 670px) {
     #contact-us form {
          display: block;
          width: 100%;
          margin: 2em 0;
     }
     #contact-us form + .float-right {
          display: block;
          width: 100%;
          margin: 2em 0;
     }
     menu.top-menu li:first-of-type {
          display: none;
     }
     body.about div.content > ul > li > ul:first-of-type {
       text-align: center;
     }
     body.about div.content > ul > li > ul > li {
       text-align: left;
     }
     body.about div.content > ul > li > ul > li:nth-of-type(2) {
       margin: 1em 0;
       padding: 0;
       width: 100%;
     }
     .content, div.white {
       margin: 24px 0;
     }
     img.left,
     img[style="float: left;"],
     img.right,
     img[style="float: right;"] {
     	max-width: 100%;
     }
}
@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;
          margin: 1.6em 0;
          vertical-align: top;
     }
     div:not(#full-article) > .news {
          width: 92%;
     }
     div:not(#full-article) > .news img {
          height: 64cqw;
     }
     body.sales div.content div.float-right {
          max-width: 44%;
     }
}