* { box-sizing: border-box; }
body { padding: 0; margin: 0; font-size: 16px; color: #111; font-family: Arial; overflow-x: hidden; }
html { overflow-x: hidden; }
.mobile { max-width: 100vw; overflow-x: hidden; }
.headertopleft { float: none; display: flex ; flex-direction: row-reverse; padding-right: 35px; align-items: center; }
.mobile .headertopleft { flex-wrap: wrap; justify-content: center; }
.headersocial { position: relative; display: block; right: 0px; }
.mobile .headtoppart { margin: 0 !important; }
.mobile .headertopleft { padding-right: 0 !important; }
.mobile .headertopleft .header-links { display: none; }
#banner { width: 100%; }
#banner img { width: 100%; }
a { color: #000 !important; }
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
#main { padding: 25px 0 0; margin: 0; }
.hyvoltpurple { color: #4D4A8C !important; }
.section { padding: 0 2rem; } 
.notmobile .mobileonly { display: none; }
.mobile .section { padding: 1.5rem 1.5rem; }
.mobile .section.largepad { padding: 2rem 1.5rem; }
.mobile .section.padded { padding: 1.5rem 1.5rem; }
.notmobile .section { min-height: 20vh; }
.section.centered { text-align: center; }
.section.centercontent { display: flex; align-items: center; }
.results { padding: 2rem;  margin-top: 20px; }
.results span { font-size: 20px; }
.results h3 { color: #fff; }
.flexbox, .twocolumn { display: flex; }
.mobile .flexbox { display: block; padding: 0; }
.mobile .twocolumn { flex-direction: column-reverse; }
.notmobile .twocolumn { align-items: stretch; height: 60vh; }
.flexbox div { flex: 1; flex-basis: 0; padding: 0 20px; }
.mobile .flexbox div { padding: 10px !important; }
.twocolumn div { flex: 1; flex-basis: 0; }
.flexbox div img { width: 100%; height: 100%; }
.twocolumn div img { width: 100%; height: 100%; }
.mobile .twocolumn { flex-direction: column-reverse; }
.mobile .twocolumn div img { width: 100%; height: auto; }
.twocolumn .midsizeimage { padding: 2rem; text-align: center; }
.twocolumn .midsizeimage img { width: 55%; height: auto;  }
.twocolumn p { font-size: 18px !important; }
.twocolumn p strong { font-size: 14px !important; }
.mobile .twocolumn p strong { font-size: 18px !important; }
.mobile .hyvoltlink { background: #333; color: #fff !important; padding: 10px; border-radius: 5px; margin: 0 auto; }
.flexbox .content { padding: 1rem 2rem; }
.flexbox.buttons { width: 100%; padding: 1rem 0 1rem 15px !important; }
.mobile .flexbox.buttons { padding: 1rem 0 !important; }
.flexbox.buttons div:first-child { flex: 2 !important; padding: 0 10px 0 0 !important; }
.mobile .flexbox.buttons div:first-child { padding: 0 !important; }
.mobile .flexbox.buttons div { width: 100% !important; margin-bottom: 10px; }
.flexbox.buttons div:nth-child(2) { padding: 0 0 0 10px !important; }
.mobile .flexbox.buttons div:nth-child(2) { padding: 0 !important; margin-top: 10px; }
	#submit, #reset { width: 100%;  border-radius: 5px; padding: 12px 15px; }
	#reset { background: #ccc; color: black; }
.smalltoppad { margin-top: 10px; }
.leftbarpurple { border-left: solid 3px #4D4A8C !important; margin-left: 18px; }
.mobile .leftbarpurple { padding-left: 25px; margin-left: 0; }
.notmobile .section.padded div { padding: 1rem; max-width: 1180px; margin: 0 auto;  }
.twocolumn .section.padded div { padding: 4rem; }
.mobile .twocolumn .section.padded div { padding: 1rem; }
.section.largepad { min-height: 25vh; }
.section.largepad div { padding: 1rem; max-width: 1180px; margin: 0 auto;  }
.button { font-size: 15px; text-align: center; display: block; background: #f5c226; padding: 15px 20px; width: 250px; text-decoration: none; border-radius: 10px 0 10px 0; color: #000; font-weight: 700; }
button { font-size: 15px; text-align: center; background: #675DA6; padding: 6px 8px; text-decoration: none; border: 0; color: #fff; font-weight: 700; }
	.mobile button { font-size: 24px; }
.ergongold { background: #f5c226; }
.hyvoltpurple { color: #675DA6; }
.calculator { min-height: 500px; margin-top: 0px;}
.mobile .calculator { padding: 0 !important; }
.calculator .form { background: #efefef; border: solid #dedede 1px; border-radius: 15px; padding: 20px 35px 20px 20px !important; }
.mobile .calculator .form { padding: 15px !important; margin: 0 auto !important; width: 90%; }
.calculator .form div { padding-left: 0; }
.disclaimer { font-size: 12px; }

.mobile .menu-links { display: none; }
	#volumeselect { display:block; float: right; margin-top: -48px; position: relative; z-index: 1000; }
.mobile #volumeselect { float: none; margin-top: 0; position: static; } 
label { display: block; width: 50%; padding: 5px; float: left;  }
legend { font-size: 16px; font-weight: bold; color: #111; }
input { padding: 2px 5px; }

fieldset { position: relative; display: inline-block; width: 100%; background: #fff; margin-bottom: 10px; border-width: 1px; border-style: solid;  border-radius: 5px; border-color: #e3e3e3; }
fieldset.grayedout { background: #ececec; }
fieldset.grayedout input { background: #ececec; }
fieldset input { padding-right: 2.5em; /* space for suffix */ box-sizing: border-box; width: 100%; border: 0; }
.input-suffix { position: absolute; right: 0.75em; top: 50%; transform: translateY(-50%); pointer-events: none; color: #888; }

footer .container { margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; }
.mobile footer .container { padding: 0 1rem; width: auto; max-width: 100%; } 
footer .row { display: -ms-flexbox; display: flex ; -ms-flex-wrap: wrap; flex-wrap: wrap; }
footer .row .col-4 { flex: 1; }
footer .row .col-8 { flex: 2; }
.mobile footer .row { display: block; }
footer .row a { color: #fff !important; }
footer .row div { flex: 1; }
.footer a { color: #eaebec; font-size: 14px; line-height: 18px; }
.resources { padding: 0; margin: 0; }
.resources li { list-style: none; margin-bottom: 15px; border-bottom: solid 1px #ededed; padding-bottom: 10px; }
.resources li img { max-width: 25px !important; height: auto !important; float: left; margin-right: 10px; }
.ergonlogo { padding: 0 !important;  }
.ergonlogo img { padding: 5px 0 !important;  }
.wsmenu { border: 0 !important; }
.d-flex { display: -ms-flexbox!important; display: flex !important ; }
.col-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; }
.flex1 { flex: 1; }
.justify-content-between { -ms-flex-pack: justify!important; justify-content: space-between !important; }
.col { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; }
.mobile .col, .mobile .col-1, .mobile .col-10, .mobile .col-11, .mobile .col-12, .mobile .col-2, .mobile .col-3, .mobile .col-4, .mobile .col-5, .mobile .col-6, .mobile .col-7, .mobile .col-8, .mobile .col-9, .mobile .col-auto, .mobile .col-lg, .mobile .col-lg-1, .mobile .col-lg-10, .mobile .col-lg-11, .mobile .col-lg-12, .mobile .col-lg-2, .mobile .col-lg-3, .mobile .col-lg-4, .mobile .col-lg-5, .mobile .col-lg-6, .mobile .col-lg-7, .mobile .col-lg-8, .mobile .col-lg-9, .mobile .col-lg-auto, .mobile .col-md, .mobile .col-md-1, .mobile .col-md-10, .mobile .col-md-11, .mobile .col-md-12, .mobile .col-md-2, .mobile .col-md-3, .mobile .col-md-4, .mobile .col-md-5, .mobile .col-md-6, .mobile .col-md-7, .mobile .col-md-8, .mobile .col-md-9, .mobile .col-md-auto, .mobile .col-sm, .mobile .col-sm-1, .mobile .col-sm-10, .mobile .col-sm-11, .mobile .col-sm-12, .mobile .col-sm-2, .mobile .col-sm-3, .mobile .col-sm-4, .mobile .col-sm-5, .mobile .col-sm-6, .mobile .col-sm-7, .mobile .col-sm-8, .mobile .col-sm-9, .mobile .col-sm-auto, .mobile .col-xl, .mobile .col-xl-1, .mobile .col-xl-10, .mobile .col-xl-11, .mobile .col-xl-12, .mobile .col-xl-2, .mobile .col-xl-3, .mobile .col-xl-4, .mobile .col-xl-5, .mobile .col-xl-6, .mobile .col-xl-7, .mobile .col-xl-8, .mobile .col-xl-9, .mobile .col-xl-auto { padding-right: 5px; padding-left: 5px; }

/* Mobile-specific fixes for header and footer overflow */
.mobile .headerwp { padding: 0 1rem; }
.mobile .address { font-size: 12px; }
.mobile .address span { display: block; margin-bottom: 5px; }
.mobile .headersocial { margin-top: 10px; }
.mobile .wsmain { padding: 0 1rem; }
.mobile .ergonlogo img { max-width: 200px; }
.mobile footer { overflow-x: hidden; }
.mobile footer .row { margin: 0; }
.mobile footer .col-lg-4, .mobile footer .col-lg-8, .mobile footer .col-lg-5, .mobile footer .col-lg-7 { padding: 0 5px; }
.mobile footer img { max-width: 150px !important; }
.mobile footer p { padding-right: 0 !important; }