@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Raleway:wght@700&display=swap);
.cart,
.outer-wrapper,
body,
header {
display: flex;
}
.cart span,
h1 img {
padding-right: 1rem;
}
.light,
.main {
background-color: #fff;
}
.button-primary:hover,
.cart,
h1,
h1 a,
h1 a:hover,
h1 a:hover img,
h1 img {
transition: 0.2s ease-in-out;
}
#error_message,
#success_message,
.addy,
.badge-cat,
.bold-cnt,
.call,
.cart,
.full-scan,
.jump,
.sm-blk-wrapper,
.terms,
footer,
h1,
h2,
h3,
nav.bottom-nav {
text-align: center;
}
a,
body,
caption,
div,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
header,
html,
img,
li,
nav,
object,
ol,
section,
span,
table,
tbody,
td,
tfoot,
th,
thead,
tr,
ul {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font: inherit;
color: inherit;
font-size: 100%;
background-color: transparent;
}
body,
html {
height: 100%;
}
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
body {
flex-direction: column;
flex: 1 0 auto;
width: 100%;
min-height: 100%;
font: 500 1.5rem/3rem Montserrat, Arial, Helvetica, sans-serif;
-webkit-text-size-adjust: none;
}
body .not-cart {
background-color: #505170;
}
h1,
h1 a,
h1 a:hover {
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
text-fill-color: transparent;
}
.cart {
flex-wrap: wrap;
justify-content: center;
align-items: center;
box-sizing: border-box;
max-width: 80%;
height: 9.3rem;
margin: 0 auto;
padding-top: 2.1rem;
padding-bottom: 0.5rem;
}
.cart,
.cart a,
.dont-br,
.perf-left {
white-space: nowrap;
}
.badge-preface,
.bold-cnt,
.cart span,
.full-scan,
.instr-addy,
.lists .bolder,
h4, h5 {
font-weight: 700;
}
.cart div {
top: 0;
width: 10.8rem;
max-width: 10.8rem;
height: 3.2rem;
max-height: 3.2rem;
}
.cart p {
flex: 0 0 100%;
width: 80%;
margin-top: 0.6rem;
}
h3,
nav.bottom-nav a:hover {
text-shadow: 0 0 0.3rem rgba(39, 39, 56, 0.9);
}
.footer-circle1,
h1 img,
h3,
header {
position: relative;
}
body,
nav#navul span,
nav.bottom-nav span {
color: #000;
}
h2,
nav#navul a,
nav#navul a:visited {
color: navy;
}
.outer-wrapper::before {
content: "";
position: fixed;
z-index: -1;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 100vh;
background: url(images/BG2.jpg) center center/cover no-repeat #505170;
}
.outer-wrapper {
flex-direction: column;
flex: 1 0;
margin: 1rem auto 0;
width: calc(100% - 4rem);
}
a,
a:hover,
a:visited {
text-decoration: none;
transition: color 0.2s ease-in-out;
}
a {
color: #006;
}
a:visited {
color: #00004d;
}
a:hover {
color: #00f;
}
header {
align-items: center;
justify-content: space-between;
min-height: 7.6rem;
padding: 2.5rem 12% 1.5rem;
background-image: url(images/header-BG.svg),
linear-gradient(transparent 1.8rem, #fff 1.8rem);
background-repeat: no-repeat, repeat;
background-size: 101% 1.8rem, 100%;
background-position: top 0 left, top 0 center;
}
h1 {
padding-top: 0.7rem;
font: 700 2.8rem/3.8rem Raleway, Arial, Helvetica, sans-serif;
color: #004080;
background-image: linear-gradient(to right, #6000bf, #009, #004080);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;

}
h1 img {
top: 0.4rem;
left: 0;
width: 3rem;
height: 3rem;
transform: skew(5deg, 0deg);
filter: brightness(100%);
}
h1 a:hover img {
filter: brightness(125%);
}
h1 a:hover {
background-image: linear-gradient(to right, #8000ff, #0000d9, #0060bf);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
h2 {
padding-left: 3rem;
font-size: 1.8rem;
}
.sm-blk p,
ul {
text-align: left;
}
.bolder,
.btm,
.button-primary,
.osha,
.perf-left,
h3,
nav#navul {
font-weight: 600;
}
.bolder span {
display: block;
}
.jump {
display: block;
margin-left: 13.5rem;
}
#navicon,
.badge-sm {
display: none;
}
nav a,
nav span {
padding: 1rem;
}
nav#navul {
padding-top: 1rem;
}
nav#navul a:hover {
color: #9f40ff;
}
h3 {
width: 80%;
padding: 1.8rem 10%;
font-size: 1.6rem;
color: #fff;
letter-spacing: 1px;
background-color: rgba(255, 255, 255, 0.3);
background-image: url(images/h3_bottom-BG.svg), url(images/h3-BG.svg);
background-repeat: no-repeat, no-repeat;
background-size: 101% 1.8rem, 101% 1.8rem;
background-position: bottom -0.1rem left -0.1rem, top -0.1rem left -0.1rem;
}
.main {
flex: 1 0 auto;
}
.hm {
width: 76%;
padding: 2.4rem 12% 4.1rem;
}
.crs,
.pg {
width: 66%;
}
.pg {
padding: 0.7rem 17% 5rem;
}
.temp {
padding-bottom: 0.4rem;
}
.sm-blk-wrapper {
margin: 1.2rem auto 1.8rem;
}
.crs {
padding: 1.3rem 17% 1rem;
}
.badges {
padding-bottom: 0;
box-shadow: 0 1rem 0 #fff;
}
.bold-cnt,
h4, h5 {
color: #002040;
}
h4, h5 {
margin-top: 1.5rem;
font-size: 1.5rem;
}
h5.pp {
margin-bottom: -1.5rem;
}
footer,
footer a,
footer a:visited,
nav.bottom-nav a,
nav.bottom-nav a:visited {
color: #fff;
}
.bold-cnt img {
margin: 0 0 -2.1rem 1rem;
height: 5.2rem;
border-radius: 2rem;
}
.badge-lg,
.tubes {
display: block;
width: 30rem;
max-width: 100%;
}
.badge-lg {
float: right;
margin: 1.8rem 0 1.6rem 5rem;
border-radius: 4rem 0;
background-image: url(images/badge-BG.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.dark {
background-image: url(images/list-top-BG.svg),
linear-gradient(to bottom, transparent 1.8rem, #ededff 1.8rem, #e1e1f2 100%);
background-repeat: no-repeat, repeat;
background-size: 101% 1.8rem, 100%;
background-position: top 0 left -1px, top 0 center;
}
.contact-wrapper img,
.tubes {
background-repeat: no-repeat;
background-size: cover;
}
.list-pic {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.tubes {
margin: auto 5rem auto 0;
max-width: calc(40% - 5rem);
border-radius: 0 4rem;
background-color: #88a0e6;
background-image: url(images/test-tubes-BG.jpg);
}
ol,
ul {
margin-left: 1.8rem;
}
ul {
display: inline-block;
list-style-type: circle;
}
li {
padding-left: 0.2rem;
}
ol.long li {
margin: 0.8rem 0;
}
.sm-blk {
width: 60%;
padding: 0 20%;
}
.sm-blk.ty {
width: auto;
padding: 0;
}
.auth {
width: auto;
height: 1.2rem;
}
.badge-badges-pg {
display: block;
margin: auto;
height: 15rem;
padding-left: 1.5rem;
}
.lists {
display: flex;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
}
.lists a {
display: block;
padding: 0.2rem 0;
}
.chems-left {
flex: 50%;
}
.chems-right {
flex: 40%;
}
.full-scan {
flex: 100%;
margin-left: -5rem;
padding-bottom: 0.8rem;
}
.full-scan-bars {
width: 1.6rem;
margin-bottom: -0.1px;
padding: 0 0.8rem 0 0.2rem;
}
.btm {
padding: 2.4rem 12% 2.3rem;
}
.badge-btm-mon {
display: flex;
justify-content: space-between;
margin: 1.7rem auto;
width: 44.9rem;
}
.badge-btm {
margin-top: -1rem;
padding-top: 3rem;
padding-bottom: 2.3rem;
}
.ex-link {
width: 1rem;
padding-right: 0.4rem;
padding-left: 0.2rem;
}
.sm-blk {
display: inline-block;
margin: auto;
}
.up-top img,
.up-top img:hover {
transition: opacity 0.2s ease-in-out;
}
.badge-right {
display: flex;
align-items: center;
justify-content: center;
margin: -1.5rem 0 0;
padding: 0.9rem 0 1.5rem;
}
.badge {
display: block;
margin: auto auto auto 4rem;
width: 124px;
}
.instr {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.instr-right {
display: flex;
flex-direction: column;
align-content: stretch;
padding-left: 4rem;
}
.instr-right,
.instr-right img {
width: 14.9rem;
}
.instr-right img {
display: block;
margin: auto;
}
.instr-addy {
padding: 0 0 0 1.8rem;
}
.perf {
display: grid;
grid-template-columns: 25% 75%;
margin-bottom: 2.5rem;
}
.perf-left {
justify-content: flex-end;
padding-right: 4rem;
}
.perf div {
display: flex;
align-items: center;
padding-top: 0.9rem;
padding-bottom: 0.9rem;
border-bottom: 1px solid #bfbfff;
}
.terms {
margin: 2.5rem auto 2.4rem;
}
.c-logos {
display: block;
margin: 0 auto;
width: 20rem;
}
.chemical-bubbles {
display: block;
width: 100%;
max-width: 65rem;
margin: 4.1rem auto 2.6rem;
border-radius: 4rem;
background-color: #000054;
}
.contact-wrapper {
display: flex;
justify-content: space-between;
margin: 0 auto 1.6rem;
width: 100%;
}
.quote {
justify-content: center;
}
.number {
white-space: nowrap;
}
form {
width: 50%;
margin-top: 1rem;
}
form input {
margin-bottom: 1.5rem;
}
form input,
form textarea {
width: calc(100% - 2rem);
padding: 0.3rem 1rem;
font: 500 1.6rem Montserrat, sans-serif;
text-indent: 0.5rem;
border-width: 0.1rem;
border-style: solid;
border-radius: 1.5rem;
outline: 0 !important;
}
form input:nth-child(2) {
border-color: #b299cc;
}
form input:nth-child(4) {
border-color: #a899cc;
}
form input:nth-child(6) {
border-color: #9e99cc;
}
form input:nth-child(8) {
border-color: #999ecc;
}
form textarea {
border-color: #99a8cc;
}
form input:-webkit-autofill,
form select:-webkit-autofill,
form textarea:-webkit-autofill {
box-shadow: 0 0 0 100rem #fff inset !important;
-webkit-box-shadow: 0 0 0 100rem #fff inset !important;
background-color: transparent !important;
}
.button-primary {
height: 3.2rem;
font-family: inherit;
font-size: 97%;
text-indent: 0;
color: #fff;
background-color: #6b6b99;
margin: 2.3rem 0 0;
padding: 0.5rem 1.5rem 0.6rem;
border: 0;
cursor: pointer;
border-radius: 1.5rem;
transition: color 0.2s ease-in-out;
}
.button-primary:hover {
color: #fff !important;
background-color: #7d7db3;
}
.button-primary:focus {
border: 0.1rem solid #fff !important;
outline: #ffffff solid 0.1rem !important;
outline: -webkit-focus-ring-color 0.5rem !important;
}
form input:nth-child(2):focus {
border: 0.1rem solid #b8a3cc !important;
}
form input:nth-child(4):focus {
border: 0.1rem solid #afa3cc !important;
}
form input:nth-child(6):focus {
border: 0.1rem solid #a7a3cc !important;
}
form input:nth-child(8):focus {
border: 0.1rem solid #a3a7cc !important;
}
form textarea:focus {
border: 0.1rem solid #a3afcc !important;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 100rem #fff inset !important;
background-color: transparent !important;
}
#error_message,
#success_message {
width: 100%;
}
#error_message h3,
#success_message h3 {
padding: 0.7rem 0 1.6rem;
}
.contact-wrapper img {
display: block;
margin-top: 0.9rem;
width: 40%;
border-radius: 4rem;
background-color: #5878b5;
background-image: url(images/contact-BG.jpg);
}
.addy {
margin: 4.1rem auto 1.5rem;
}
.socials {
width: (calc 100% - 2.6rem);
margin-left: 2.6rem;
text-align: center;
}
.socials img {
max-height: 6rem;
}
.socials img.fblogo {
margin-right: .8rem;
}
.socials img.lilogo {
margin-left: 2.6rem;
}
.socials img.ex-link {
margin-bottom: 2.5rem;
}
nav.bottom-nav {
padding: 0.2rem 6%;
background-color: rgba(255, 255, 255, 0.2);
}
.bottom-nav a,
.bottom-nav span {
display: inline-block;
white-space: nowrap;
}
nav.bottom-nav a:hover {
color: #e5e5ff;
}
.bottom-nav span {
font-weight: 600;
text-shadow: 0 0 0.3rem rgba(118, 122, 148, 0.9);
}
footer {
padding: 1rem 0;
font-size: 80%;
background: linear-gradient(
to right,
rgba(61, 41, 82, 0.8),
rgba(41, 41, 82, 0.9),
rgba(41, 61, 82, 0.8)
);
}
.footer-circle1 {
top: -0.3rem;
width: 0.4rem;
height: 0.4rem;
margin: 0 0.6rem 0 0.3rem;
}
footer a:hover {
color: #dfbfff;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
header {
background-position: top 1px left, top 0 center;
}
h1,
h1 a,
h1 a:visited {
background: 0 0;
}
footer,
nav.bottom-nav {
flex: 1 0 auto;
}
}
.up-top {
position: fixed;
z-index: 10;
bottom: 0;
right: 0;
display: none;
}
.up-top img {
display: block;
width: 3.4rem;
height: 3.4rem;
opacity: 0.7;
}
.up-top img:hover {
opacity: 1;
}
@media screen and (max-width: 1890px) {
.sm-blk {
width: 70%;
padding: 0 15%;
}
}
@media screen and (max-width: 1650px) {
.sm-blk {
width: 75%;
padding: 0 12.5%;
}
}
@media screen and (min-width: 1601px) {
.lists {
width: calc(60% - 6.5rem);
padding: 2.4rem 20% 4.1rem calc(20% + 6.5rem);
}
.badge-cat {
flex: 100%;
margin-left: -6.5rem;
}
}
@media screen and (max-width: 1600px) {
.badge-right,
.crs,
.pg,
header,
section {
width: 80%;
padding-left: 10%;
padding-right: 10%;
}
.lists {
width: 70%;
padding: 2.4rem 15% 4.1rem;
}
.badge-cat {
flex: 100%;
margin-left: auto;
}
}
@media screen and (max-width: 1465px) {
.hm,
.sm-blk,
header {
width: 86%;
padding-left: 7%;
padding-right: 7%;
}
}
@media screen and (max-width: 1439px) {
#navicon,
#navicon div {
color: transparent;
}
#navicon,
#navicon div,
#navul {
position: absolute;
}
#navicon,
#navul.open,
.open#navul {
background-color: #fff;
}
#navicon,
#navicon div,
#navicon:hover div,
#navul,
#navul.open,
.open#navul {
transition: 0.2s ease-in-out;
}
#navicon {
display: flex;
flex-direction: column;
top: calc(50% - 1.2rem);
right: 12%;
width: 4rem;
height: 4rem;
border: 0.1rem solid navy;
cursor: pointer;
border-radius: 50%;
}
#navicon div:focus,
#navicon:focus {
color: navy !important;
outline: 0 !important;
}
#navicon div {
left: 1.2rem;
width: 1.6rem;
height: 0.2rem;
background-color: navy;
border-radius: 0.2rem;
opacity: 1;
transform: rotate(0);
transform-origin: center;
}
#navicon:hover div {
background-color: #9f40ff;
}
#navicon div:first-child {
top: 1.3rem;
}
#navicon div:nth-child(2) {
top: 1.9rem;
}
#navicon div:nth-child(3) {
top: 2.5rem;
}
#navicon.open div {
width: 2rem;
top: 1.9rem;
left: 1rem;
}
#navicon.open div:first-child {
transform: rotate(-45deg);
}
#navicon.open div:nth-child(2) {
width: 0;
opacity: 0;
}
#navicon.open div:nth-child(3) {
transform: rotate(45deg);
}
#navul {
top: 7.8rem;
right: calc(12% + 2.8rem);
z-index: 10900;
height: 0;
background-color: transparent;
border: 0 solid transparent;
overflow: hidden;
}
#navul.open,
.open#navul {
height: auto;
padding: 1.8rem 0;
border: 0.1rem solid navy;
border-radius: 2rem;
}
#navul a,
#navul span {
display: block;
padding: 0.8rem 3rem;
}
}
@media (hover: none) {
#navicon:hover {
border: 0.1rem solid navy;
}
#navicon:hover div {
background-color: #006;
}
.button-primary:hover {
color: navy;
}
}
@media screen and (max-width: 1050px) {
.lists {
width: 80%;
padding: 2.4rem 10% 4.1rem;
}
}
@media screen and (max-width: 1000px) {
.dark,
header {
background-size: 110% 1.8rem, 100%;
}
h3 {
background-size: 110% 1.8rem, 110% 1.8rem;
}
.contact-wrapper img {
display: none;
}
form {
width: 100%;
}
.perf {
grid-template-columns: 30% 70%;
}
}
@media screen and (max-width: 950px) {
.chems-left,
.chems-right,
.lists {
flex-basis: auto;
max-width: 100%;
margin: 0 auto;
}
.chems-left {
padding-right: 10rem;
}
}
@media screen and (max-width: 830px) {
.perf {
grid-template-columns: 35% 65%;
}
}
@media screen and (max-width: 800px) {
.hm,
.sm-blk,
header {
width: 80%;
padding-left: 10%;
padding-right: 10%;
}
header {
background-size: 120% 1.8rem, 100%;
}
h3 {
background-size: 120% 1.8rem, 120% 1.8rem;
}
.badge-lg {
display: none;
}
.badge-sm {
display: block;
margin: 2.7rem auto 0.4rem;
width: 30rem;
max-width: 100%;
background-color: #7f80c0;
background-image: url(images/badge-BG.jpg);
background-repeat: no-repeat;
background-size: cover;
border-radius: 4rem 0;
}
.list-pic {
display: flex;
flex-direction: column-reverse;
justify-content: space-around;
}
.tubes {
margin: 2.7rem auto 0.9rem;
}
.jump {
margin-left: auto;
text-align: left;
}
.badge-badges-pg {
height: 10rem;
}
}
@media screen and (max-width: 750px) {
h1 {
padding-left: 2.5rem;
}
h1 span:first-child {
display: block;
margin-left: -2.5rem;
padding-right: 0;
width: 100%;
}
#navul {
top: 9.7rem;
}
.cart {
flex-direction: column;
height: auto;
padding-top: 1.5rem;
padding-bottom: 0;
white-space: normal;
}
.cart span {
margin-bottom: 1.4rem;
}
.cart p {
margin-top: 1.5rem;
margin-bottom: 0;
}
.right {
margin: auto 0 auto 2rem;
}
.badge {
margin: auto;
width: 75%;
}
}
@media screen and (max-width: 735px) {
nav.bottom-nav {
padding: 1.2rem 5%;
}
nav.bottom-nav a,
nav.bottom-nav span {
padding: 0.3rem 1.5rem;
}
}
@media screen and (max-width: 715px) {
.perf-left {
padding-right: 3rem;
}
}
@media screen and (max-width: 690px) {
.perf {
grid-template-columns: 40% 60%;
}
}
@media screen and (max-width: 665px) {
.chems-left,
.chems-right {
text-align: left;
margin: 0 auto;
padding: 0;
display: inline-block;
width: 29.7rem;
}
.chems-left {
float: left;
}
.chems-right {
float: right;
}
.badge-btm-mon {
width: auto;
}
}
@media screen and (max-width: 640px) {
.badge-badges-pg {
height: 7.5rem;
}
}
@media screen and (max-width: 600px) {
h1 {
padding-left: 3.5rem;
}
h1 span:first-child {
margin-left: -3.5rem;
white-space: nowrap;
}
h2 span {
display: block;
width: 100%;
}
#navul {
top: 11.2rem;
}
.full-scan {
margin-left: auto;
}
.instr {
flex-direction: column;
}
.instr-right {
width: 100%;
height: 38.3rem;
align-content: center;
margin-top: 1.6rem;
padding-left: 0;
}
footer {
padding: 1.5rem 0;
}
.footer-circle1 {
display: none;
}
.phone {
display: block;
}
}
@media screen and (max-width: 590px) {
.perf {
grid-template-columns: 45% 55%;
}
.perf-left {
padding-right: 2rem;
}
}
@media screen and (max-width: 540px) {
.perf {
grid-template-columns: 25% 75%;
}
.perf-left {
justify-content: flex-start;
padding-right: 1rem;
white-space: normal;  
}
}
@media screen and (max-width: 500px) {
.chems-left,
.chems-right {
display: inline-block;
width: 100%;
max-width: 29.7rem;
text-align: left;
margin: 0 auto;
padding: 0;
float: none;
}
}
@media screen and (max-width: 480px) {
header {
width: 90%;
padding-left: 5%;
padding-right: 5%;
}
#navicon {
right: 5%;
}
#navul {
top: 11.1rem;
right: calc(5% + 2.8rem);
}
.perf {
grid-template-columns: 100%;
}
.perf-left {
justify-content: center;
margin-top: 1.5rem;
padding-right: 0;
border-bottom: 0 !important;
}
}
@media screen and (max-width: 450px) {
.badge-btm-mon {
flex-direction: column;
justify-content: center;
text-align: center;
}
.badge-btm span:first-child,
.badge-btm-mon span:first-child {
padding-right: 0;
}
.badge-btm span:nth-last-child(2),
.badge-btm-mon span:nth-last-child(2) {
padding: 1rem 0;
}
.badge-btm span:last-child,
.badge-btm-mon span:last-child {
padding-left: 0;
}
}
@media screen and (max-width: 412px) {
header {
width: 98%;
padding-left: 1%;
padding-right: 1%;
}
#navicon {
right: 5%;
}
#navul {
right: calc(5% + 2.8rem);
}
}
@media screen and (max-width: 370px) {
header {
width: 100%;
padding-left: 0;
padding-right: 0;
}
h1,
h1 a,
h1 a:visited {
font: 700 2.3rem/3.3rem Raleway, Arial, Helvetica, sans-serif;
}
h1 img {
width: 2.5rem;
height: 2.5rem;
}
h2 {
font-size: 1.8rem;
}
#navicon {
top: calc(50% - 0.7rem);
width: 3rem;
height: 3rem;
}
#navicon div {
left: 0.9rem;
width: 1.2rem;
height: 0.2rem;
}
#navicon div:first-child {
top: 0.9rem;
}
#navicon div:nth-child(2) {
top: 1.4rem;
}
#navicon div:nth-child(3) {
top: 1.9rem;
}
#navicon.open div {
width: 2rem;
top: 1.4rem;
left: 0.5rem;
}
#navul {
top: 10.2rem;
right: calc(5% + 2rem);
}
}
@media screen and (max-width: 350px) {
nav.bottom-nav {
padding: 1.2rem 15%;
}
}
@media screen and (max-width: 325px) {
h1,
h1 img {
padding: 0 0 0.5rem;
}
.headings {
margin-left: 2rem;
}
h1 {
margin-left: auto;
}
h1 span:first-child {
display: block;
margin: 0 auto;
width: 100%;
}
h1 img {
position: static;
left: 0;
display: block;
margin: 0 auto 0.2rem;
}
h2 {
padding-left: 0;
}
#navul {
top: 11.7rem;
right: calc(5% + 2rem);
}
}
@media screen and (min-width: 1605px) {
html {
font-size: 70%;
}
}
@media screen and (min-width: 1925px) {
html {
font-size: 77.5%;
}
}