@font-face {
  font-family: 'UHMW';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('uhmw.woff') format('woff');
}
@font-face {
  font-family: 'Sheet';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('sheet-rod-tube.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('uhmw-bg.jpg'); background-size: cover; background-repeat: no-repeat; }
.uhmw-sheet {
  width: 215px; height: 120px; position: absolute; background-color: rgb(0,50,120); color: lightgray; padding-top: 18px;
  background-image: linear-gradient(190deg, transparent 10%, rgba(255,255,255,0.1) 60%, transparent 61%);
  box-shadow: 0px 1px rgb(0,0,80), 1px 0px rgb(90,90,160), 1px 2px rgb(0,0,80), 2px 1px rgb(90,90,160), 2px 3px rgb(0,0,80), 3px 2px rgb(90,90,160), 3px 4px rgb(0,0,80), 4px 3px rgb(90,90,160), 4px 5px rgb(0,0,80), 5px 4px rgb(90,90,160), 0px 0px 12px rgb(220,220,240), 5px 5px 12px rgb(220,220,240);
  transition: color 0.3s ease;
}
.kmac { top: 30px; left: 32px; line-height: 44px; font-family: 'UHMW', Arial; font-size: 32px; letter-spacing: 2px; text-decoration: none; text-align: center; padding-left: 4px; z-index: 3; }
.sheets { top: 65px; left: 50px; transform: rotate(8deg); z-index: 2; text-align: right; padding: 88px 10px 0 0; font-family: 'Sheet', Arial; font-size: 20px; transition: top 0.5s ease, padding 0.5s ease; }
.uhmw-rod, .uhmw-bar {
  position: absolute; left: 200px; height: 30px; line-height: 28px; transform: translateZ(0);
  background-color: rgb(0,50,120); color: lightgray; font-family: 'Sheet', Arial; font-size: 15px; text-align: right;
  filter: drop-shadow(0px 0px 3px rgba(220,220,240,0.7)) drop-shadow(0px 0px 3px rgba(220,220,240,0.8)); transition: left 0.5s ease, padding-right 0.5s ease;
}
.uhmw-bar { width: 196px; padding-right: 16px; }
.uhmw-rod { width: 205px; padding-right: 25px; }
.angles { top: 45px; }
.bars { top: 85px; }
.hex { top: 125px; background-image: linear-gradient(to bottom, rgba(255,255,255,0.1) 49%, transparent 50%); }
.rods { top: 165px; background-image: linear-gradient(to bottom, rgba(255,255,255,0.1) 25%, transparent 70%, rgba(0,0,0,0.5)); border-radius: 12px 0 0 12px; }
#cap, #hex1, #hex2, #hex3 { position: absolute; top: 0px; height: 30px; }
#angle { position: absolute; top: 0px; right: -32px; width: 32px; height: 18px; border-top: solid 9px transparent; border-bottom: solid 9px transparent; border-left: solid 16px rgb(30,30,75); }
#bar1, #bar2 { position: absolute; right: -30px; width: 30px; height: 10px; border-top: solid 5px transparent; border-bottom: solid 5px transparent; border-left: solid 15px rgb(30,30,75); }
#bar1 { top: 0px; }
#bar2 { bottom: 0px; }
#bar3 { position: absolute; top: 5px; right: -15px; width: 15px; height: 20px; background: rgb(30,30,75); }
#cap { right: -10px; width: 20px; background: linear-gradient(to bottom, rgb(30,30,50) 25%, rgb(30,30,80) 70%); border-radius: 50%; }
#hex1, #hex3 { width: 6px; border-top: solid 15px transparent; border-bottom: solid 15px transparent; }
#hex1 { right: 6px; border-right: solid 6px rgb(30,30,75); }
#hex2 { right: -4px; width: 10px; background: rgb(30,30,75); }
#hex3 { right: -10px; border-left: solid 6px rgb(30,30,75); }
#search { position: absolute; right: 32px; }
@media screen and (min-width: 801px) {
 #search { top: 85px; }
 #q { width: 220px; }
 #cart { width: 321px; }
 #content { margin: 235px 32px 0 32px; }
}
@media screen and (min-width: 436px) and (max-width: 800px) {
 #search { top: 230px; }
 #q { width: 40vw; }
 #cart { width: calc(40vw + 101px); }
 #content { margin: 305px 32px 0 32px; }
}
#search input, #cart { height: 30px; line-height: 30px; border: none !important; outline: 0; margin: 0; padding: 0 8px; font-size: 18px; background: rgba(235,235,255,0.7); }
#search input:hover, #search input:focus, #cart:hover { background: rgba(245,245,255,0.8); }
#q { margin: 0 6px 8px 0 !important; }
#q::placeholder { color: rgb(50,50,50); }
#go { width: 95px; cursor: pointer; }
#cart { display: block; cursor: pointer; }
#cl { font-family: 'Sheet'; line-height: 30px; vertical-align: top; }
#cart svg { width: 24px; height: 24px; margin: 3px 8px 0 0; stroke: black; fill: black; }
#cbtns a { background: #005; color: white !important; text-decoration: none; font-family: 'Sheet'; font-size: 15px; margin: 5px; padding: 3px 12px; border-radius: 5px; }
#cbtns a:hover { background: #014BC4; }
.uhmw-sheet:hover, .uhmw-rod:hover, .uhmw-bar:hover { color: dodgerblue; }
.sheets:hover { top: 110px; padding: 80px 20px 0 0; }
@media screen and (min-width: 475px) {
 .uhmw-rod:hover, .uhmw-bar:hover { left: 230px; }
}
h1, h2, h3, h4 { margin: 0; }
h1, h2 { font-family: 'Sheet', Arial; font-size: 32px; margin-bottom: 36px !important; color: #005; }
.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; }
.products th, .products tr+tr > td:not([colspan]) { white-space: nowrap; }
.products tr:nth-child(odd) td { background-color: white; }
.products tr:nth-child(even) td { background-color: rgb(225,225,255); }
.products tr:first-child td, .products tr:first-child td *, .products th { background-color: rgb(0,30,90) !important; color: white !important; font-weight: bold; }
.products a { color: rgb(0,0,180) !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; }
.footnote { background: transparent !important; }
#content a { color: navy !important; }
#footer { text-align: center; margin: 28px; color: white; }
#footer a { display: block; margin-bottom: 12px; font-family: 'Sheet', Arial; font-size: 18px; color: deepskyblue !important; }
@media screen and (min-width: 436px) {
 #bg { background-position: center; }
 #content { padding: 40px; background: rgba(235,235,255,0.6); }
}
@media screen and (max-width: 435px) {
 #bg { background-position: right; }
 #search { top: 240px; right: 0px; display: flex; justify-content: center; flex-wrap: wrap; }
 #q { width: 60vw; }
 #cart { width: calc(60vw + 101px); }
 #content { margin-top: 120px; padding: 225px 32px 32px 32px; background-color: rgba(255,255,255,0.7); background: linear-gradient(to bottom, transparent, rgba(235,235,255,0.7) 200px); }
 #footer a { font-size: 24px; color: skyblue !important; }
}
@media screen and (min-width: 426px) and (max-width: 435px) {
 body { zoom: 0.975; }
}
@media screen and (min-width: 416px) and (max-width: 425px) {
 body { zoom: 0.95; }
}
@media screen and (min-width: 406px) and (max-width: 415px) {
 body { zoom: 0.925; }
}
@media screen and (min-width: 396px) and (max-width: 405px) {
 body { zoom: 0.9; }
}
@media screen and (min-width: 386px) and (max-width: 395px) {
 body { zoom: 0.875; }
}
@media screen and (min-width: 376px) and (max-width: 385px) {
 body { zoom: 0.85; }
}
@media screen and (min-width: 366px) and (max-width: 375px) {
 body { zoom: 0.825; }
}
@media screen and (min-width: 356px) and (max-width: 365px) {
 body { zoom: 0.8; }
}
@media screen and (min-width: 346px) and (max-width: 355px) {
 body { zoom: 0.78; }
}
@media screen and (min-width: 336px) and (max-width: 345px) {
 body { zoom: 0.76; }
}
@media screen and (min-width: 326px) and (max-width: 335px) {
 body { zoom: 0.74; }
}
@media screen and (max-width: 325px) {
 body { zoom: 0.72; }
}