@font-face {
  font-family: 'Phenolic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('thermoset.woff') format('woff');
}
* { box-sizing: border-box; }
body { margin: 0; padding: 0; background-color: black; font-family: Arial; }
#bg { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: -1; background-image: url('thermoset-sheet-tube-bg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.7; }
#nav a { display: block; float: left; text-align: center; border: solid 0.2vw white; background: rgba(0,0,0,0.6); font-family: 'Phenolic'; font-weight: bold; text-decoration: none; color: white !important; transition: transform 0.2s; }
#nav a:hover { border-color: yellow; color: yellow !important; transform: scale(1.1); }
#nav svg { fill: white; }
#nav a:hover svg { fill: yellow; }
#nav h3 { font-size: 2.2vw; margin-top: 2vw; }
#content { clear: left; }
@media screen and (min-width: 925px) {
 body { margin-top: 2.2vw; }
 #nav a { margin: 0 0 2.2vw 2%; width: 12%; height: 10vw; }
 #nav h4 { padding: 1.5vw 0 0.8vw 0; font-size: 1vw; }
 #nav svg { width: 40%; }
 #content { margin: 0 2% 0 2%; }
}
@media screen and (max-width: 1600px) {
 #nav h4 { padding: 1vw 0 0.8vw 0; font-size: 1.2vw; }
}
@media screen and (min-width: 925px) and (max-width: 1300px) {
 #nav h4 { font-size: 1.5vw; }
 #nav span { display: none; }
}
@media screen and (max-width: 924px) {
 body { margin-top: 3.2vw; }
 #nav a { margin: 0 0 3.2vw 3%; width: 45.5%; height: 18vw; }
 #nav h4 { padding-bottom: 1.2vw; font-size: 3vw; }
 #nav svg { height: 50%; }
 #nav h3 { font-size: 5vw; margin-top: 3vw; }
 #content { margin: 0 3% 0 3%; }
}
#cbtns a { background: rgb(95,95,80); color: white !important; text-decoration: none; font-family: 'Phenolic'; margin: 5px; padding: 3px 12px; }
#cbtns a:hover { background: rgb(130,130,100); }
h1, h2, h3, h4 { margin: 0; }
h1, h2 { font-family: 'Phenolic', Arial; font-size: 32px; margin-bottom: 36px !important; color: black; }
#content { font-size: 18px; background: rgba(255,255,230,0.6); }
#content a { color: #220 !important; }
.aside { text-align: right; font-size: 10pt; font-family: Tahoma, Arial; font-weight: bold; }
.products { border-spacing: 5px; width: 1px; min-width: 350px; }
.products td, .products th { padding: 6px 12px; text-align: center; font-size: 16px; }
.products th, .products tr+tr > td:not([colspan]) { white-space: nowrap; }
.products td { background-color: rgba(255,255,255,0.6); }
.products tr:first-child td, .products tr:first-child td *, .products th { background-color: #540 !important; color: white; font-weight: bold; }
.products a { color: rgb(0,0,180) !important; }
.products th a { color: white !important; }
.products a[href$='.jpg'], .products a[href$='.JPG'], .products a[href$='.png'], .products a[href$='.PNG'] { padding-right: 22px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 548.176 548.176'%3E%3Cpath d='M534.75,68.238c-8.945-8.945-19.694-13.417-32.261-13.417H45.681c-12.562,0-23.313,4.471-32.264,13.417 C4.471,77.185,0,87.936,0,100.499v347.173c0,12.566,4.471,23.318,13.417,32.264c8.951,8.946,19.702,13.419,32.264,13.419h456.815 c12.56,0,23.312-4.473,32.258-13.419c8.945-8.945,13.422-19.697,13.422-32.264V100.499 C548.176,87.936,543.699,77.185,534.75,68.238z M511.623,447.672c0,2.478-0.899,4.613-2.707,6.427 c-1.81,1.8-3.952,2.703-6.427,2.703H45.681c-2.473,0-4.615-0.903-6.423-2.703c-1.807-1.813-2.712-3.949-2.712-6.427V100.495 c0-2.474,0.902-4.611,2.712-6.423c1.809-1.803,3.951-2.708,6.423-2.708h456.815c2.471,0,4.613,0.905,6.42,2.708 c1.801,1.812,2.707,3.949,2.707,6.423V447.672L511.623,447.672z'/%3E%3Cpath d='M127.91,237.541c15.229,0,28.171-5.327,38.831-15.987c10.657-10.66,15.987-23.601,15.987-38.826 c0-15.23-5.333-28.171-15.987-38.832c-10.66-10.656-23.603-15.986-38.831-15.986c-15.227,0-28.168,5.33-38.828,15.986 c-10.656,10.66-15.986,23.601-15.986,38.832c0,15.225,5.327,28.169,15.986,38.826C99.742,232.211,112.683,237.541,127.91,237.541z'/%3E%3Cpolygon points='210.134,319.765 164.452,274.088 73.092,365.447 73.092,420.267 475.085,420.267 475.085,292.36 356.315,173.587'/%3E%3C/svg%3E") center right no-repeat; }
#footer { text-align: center; margin: 24px; color: white; }
#footer a { margin: 0 5px 12px 5px; font-family: 'Phenolic', Arial; font-size: 18px; color: khaki !important; }
@media screen and (min-width: 576px) {
 #content { padding: 40px; }
}
@media screen and (max-width: 575px) {
 #content { padding: 20px; }
 #footer a { font-size: 24px; display: block; }
}