@font-face {
  font-family: 'Flexible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('dekema.woff') format('woff');
}
@font-face {
  font-family: 'Industrial';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('industrial.woff') format('woff');
}
@font-face {
  font-family: 'Hex';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('hextreme.woff') format('woff');
}
@keyframes blinker {
 50% { opacity: 0; }
}
* { 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('hextreme.jpg'); background-size: cover; background-repeat: no-repeat; }
@media screen and (min-width: 1000px) {
 #d0 { position: fixed; top: 0px; left: 1vw; color: thistle; text-decoration: none; }
 #d0:hover { color: wheat; }
 #d1, #d2 { display: block; transition: color 0.25s linear; }
 #d1 { font-family: 'Flexible'; font-size: 4vw; line-height: 6vw; text-transform: uppercase; }
 #d2 { font-family: 'Industrial'; font-size: 2.7vw; line-height: 1vw; padding-left: 0.6vw; transition-delay: 0.2s; }
 .b0 { top: 9vw; }
 .b0 svg { width: 1.6vw; height: 1.6vw; margin: 0.3vw 0.5vw 0 0.1vw; fill: white; }
 .b1 { top: 12.5vw; }
 .b1 svg { width: 1.8vw; height: 1.8vw; margin: 0.18vw 0.5vw 0 0; stroke: white; fill: white; }
 .b2 { top: 16vw; }
 .b2 svg { width: 1.5vw; height: 1.5vw; margin: 0.35vw 0.6vw 0 0.3vw; fill: white; }
 .b2 path:nth-child(n+7) { transform-origin: 50% 50%; transform: rotate(180deg); }
 .b3 { top: 19.5vw; }
 .b3 svg { width: 1.75vw; height: 1.75vw; margin: 0.25vw 0.5vw 0 0.15vw; fill: white; }
 .b4 { top: 23vw; }
 .b4 svg { width: 1.75vw; height: 1.75vw; margin: 0.25vw 0.55vw 0 0.15vw; fill: white; }
 .b5 { top: 26.5vw; }
 .b5 svg { width: 1.75vw; height: 1.75vw; margin: 0.2vw 0.55vw 0 0.15vw; fill: white; }
 .b6 { top: 30vw; }
 .b6 svg { width: 1.62vw; height: 1.62vw; margin: 0.32vw 0.6vw 0 0.22vw; fill: white; }
 .b7 { top: 33.5vw; }
 .b7 svg { width: 1.75vw; height: 1.75vw; margin: 0.25vw 0.6vw 0 0.12vw; fill: white; }
 .b8 { top: 37vw; }
 .b8 svg { width: 1.7vw; height: 1.7vw; margin: 0.28vw 0.55vw 0 0.18vw; fill: white; }
 .b9 { top: 40.5vw; }
 .b9 svg { width: 1.75vw; height: 1.75vw; margin: 0.2vw 0.6vw 0 0.12vw; fill: white; }
 .b10 { top: 44vw; }
 .b10 svg { width: 1.62vw; height: 1.62vw; margin: 0.32vw 0.65vw 0 0.2vw; fill: white; }
 .btn {
  display: block;
  position: fixed;
  left: -1.6vw;
  width: 22.4%;
  height: 2.5vw;
  line-height: 2.2vw;
  overflow: hidden;
  color: white;
  font-family: Hex, Arial;
  font-size: 1.35vw;
  font-weight: bold;
  text-decoration: none;
  padding-left: 3.5vw;
  background: linear-gradient(to bottom, rgba(90, 90, 110, 0.6) 0%, rgba(170, 170, 190, 0.6) 3%, rgba(0, 0, 0, 0.3) 60%);
  border: solid 1px rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4) inset, 0 2px 6px rgba(0, 0, 0, 0.5), 0 10px rgba(0, 0, 0, 0.05) inset;
  transition: left 0.25s, border-color 0.25s, box-shadow 0.25s;
  transform: skewX(-18deg);
 }
 .btn:hover { left: -0.6vw; }
 #s0, #s1 { position: relative; left: 0px; transition: left 0.5s; }
 #s2 { position: fixed; top: 9vw; left: 2.25vw; height: 2.5vw; line-height: 2.4vw; font-size: 1.35vw; font-weight: bold; color: white; pointer-events: none; }
 #c0, #c1 { display: inline-block; transform-origin: left; animation: blinker 1.1s step-end infinite; }
 #c0 { padding-left: 1px; }
 #c1 { transform: scaleX(1.8); }
 #content { position: absolute; top: 0px; right: 0px; width: 78.2%; min-height: 100vh; background: linear-gradient(to right, transparent, rgba(245,245,255,0.55) 2%); padding: 1vw 3vw; }
 #footer { position: fixed; bottom: 10px; left: 0px; width: 22%; text-align: center; color: lightgray; font-size: 1vw; }
}
@media screen and (max-width: 999px) {
 body { text-align: center; }
 #d0 { display: block; color: thistle; text-decoration: none; }
 #d0:hover { color: wheat; }
 #d1, #d2 { display: block; transition: color 0.25s linear; }
 #d1 { position: relative; top: 5px; font-family: 'Flexible'; font-size: 48px; text-transform: uppercase; }
 #d2 { font-family: 'Industrial'; font-size: 32px; line-height: 8px; padding: 0 0 12px 4px; transition-delay: 0.2s; }
 .b0 svg { width: 24px; height: 24px; margin: 4px 5px 0 0; fill: white; }
 .b1 svg { width: 27px; height: 27px; margin: 2px 7px 0 0; stroke: white; fill: white; }
 .b2 svg { width: 24px; height: 24px; margin: 4px 7px 0 0; fill: white; }
 .b2 path:nth-child(n+7) { transform-origin: 50% 50%; transform: rotate(180deg); }
 .b3 svg { width: 26px; height: 26px; margin: 3px 8px 0 0; fill: white; }
 .b4 svg { width: 25px; height: 25px; margin: 3px 8px 0 0; fill: white; }
 .b5 svg { width: 26px; height: 26px; margin: 3px 7px 0 0; fill: white; }
 .b6 svg { width: 24px; height: 24px; margin: 5px 6px 0 0; fill: white; }
 .b7 svg { width: 24px; height: 24px; margin: 4px 6px 0 0; fill: white; }
 .b8 svg { width: 24px; height: 24px; margin: 4px 8px 0 0; fill: white; }
 .b9 svg { width: 26px; height: 26px; margin: 2px 8px 0 0; fill: white; }
 .b10 svg { width: 24px; height: 24px; margin: 4px 8px 0 0; fill: white; }
 .btn {
  display: block;
  height: 36px;
  margin: 16px 20px 0 20px;
  line-height: 32px;
  color: white;
  font-family: Hex, Arial;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  background: linear-gradient(to bottom, rgba(90, 90, 110, 0.6) 0%, rgba(170, 170, 190, 0.6) 3%, rgba(0, 0, 0, 0.3) 60%);
  border: solid 1px rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4) inset, 0 2px 6px rgba(0, 0, 0, 0.5), 0 10px rgba(0, 0, 0, 0.05) inset;
  transition: border-color 0.25s, box-shadow 0.25s;
  transform: skewX(-18deg);
 }
 #content { background: linear-gradient(to bottom, transparent, rgba(245,245,255,0.65) 32px); padding: 4vw; }
 #footer { padding: 16px; color: lightgray; }
}
.btn, .btn * {
 vertical-align: top;
}
.btn svg, .btn span {
 display: inline-block;
 transform: skewX(18deg);
}
.btn:hover {
 color: white;
 border-color: white;
 box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4) inset, 0 2px 6px rgba(0, 0, 0, 0.5), 0 10px rgba(0, 0, 0, 0.05) inset, 0 0 5px 2px rgba(225, 225, 255, 0.75), 0 0 10px 3px rgba(235, 235, 255, 0.8) inset;
}
.btn:active {
 color: black;
 border-color: rgba(255, 255, 255, 0.6);
 background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
#content { text-align: center; }
h1 { font-family: Hex, Arial; }
table { display: inline-table; margin: 30px 0; }
#content a { color: darkred !important; font-weight: bold; }
.wbg { display: inline-block; background: white; box-shadow: 0 0 15px 15px white; opacity: 0.8; margin: 25px; }
.wbg img { vertical-align: middle; }
#cdlg table { margin: 0; text-align: center; }
#cbtns a { background: rgb(0,30,50); color: white !important; margin: 8px; padding: 3px 12px; text-decoration: none; font-family: Hex, Arial; font-size: 16px; font-weight: bold; }
#cbtns a:hover { background: #014BC4; }

.products { border-spacing: 4px; width: 1px; }
.products td, .products th { padding: 6px 8px; text-align: center; }
.products th, .products tr+tr > td:not([colspan]) { white-space: nowrap; transition: background-color 0.2s; }
.products tr:nth-child(odd) td { background-color: rgb(210,210,220); }
.products tr:nth-child(even) td { background-color: rgb(190,190,210); }
.products tr:first-child td, .products tr:first-child td *, .products th { background-color: rgb(0,30,50) !important; color: white !important; font-weight: bold; }
#content .products a { color: rgb(0,0,120) !important; }
#content .products th a, #content .products tr:first-child a { color: skyblue !important; }
.products tr[onclick]:hover td { background-color: rgb(240,240,250); cursor: pointer; }
.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; }