@font-face {
  font-family: 'Acrylic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('acrylic.woff') format('woff');
}
* { box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: Arial; }
#bg { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: -1; background-color: #002; background-image: url('acrylic-bg.jpg'); background-size: cover; background-repeat: no-repeat; transition: background-position 1s ease; }
#chem-canvas { position: fixed; top: -15vh; left: -15vw; width: 130vw; height: 130vh; z-index: -1; }
#logo { position: absolute; filter: drop-shadow(0 0 30px rgb(225,225,255)) drop-shadow(0 0 30px rgb(225,225,255)) drop-shadow(0 0 30px rgb(225,225,255)); transform: translateZ(0); transition: all 0.5s ease; }
#content, #similar a { display: block; background: rgba(0,0,0,0.5); color: white; }
#content, #content * { color: white !important; }
#content * { background: transparent !important; border-color: rgb(200,200,205) !important; }
#content table { border: none !important; border-spacing: 6px; width: auto !important; }
#content td, th { border: none !important; background-color: rgba(0,0,0,0.4) !important; padding: 6px 12px !important; width: auto !important; text-align: center; }
#content tr:first-child td, #content th { background-color: rgba(200,200,230,0.25) !important; font-weight: bold; }
#content .products a[href$='.jpg'], #content .products a[href$='.JPG'], #content .products a[href$='.png'], #content .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' fill='white'%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 !important; }
#content .footnote { background: transparent !important; font-style: italic; color: darkgray !important; }
#content h1, #content h2 { margin: 0 0 30px 0; font-family: Arial !important; font-size: 28px !important; text-align: center; }
#content h1 *, #content h2 * { font-size: 28px !important; }
#content a, #content a *, #footer a { font-weight: bold; transition: color 0.25s ease; color: white !important; }
#content a:hover, #content a:hover *, #footer a:hover { color: yellow !important; }
#cbtns a { background: #005; color: white !important; text-decoration: none; font-family: 'Acrylic'; font-size: 15px; margin: 5px; padding: 3px 12px; border-radius: 5px; }
#cbtns a:hover { background: #014BC4; }
.aside { text-align: right; font-size: 10pt; font-family: Tahoma, Arial; font-weight: bold; }
.b1, .b2, .b3 { right: 35px; }
@media screen and (min-width: 1251px) {
 .b1 { width: calc(22vw + 90px); }
 .b2 { width: calc(22vw + 45px); }
 .b3 { width: 22vw; }
}
@media screen and (min-width: 1000px) and (max-width: 1250px) {
 .b1 { min-width: 250px; width: calc(16vw + 90px); }
 .b2 { min-width: 205px; width: calc(16vw + 45px); }
 .b3 { min-width: 160px; width: 16vw; }
}
@media screen and (max-width: 999px) {
 #navbg { position: absolute; right: 25px; height: 162px; border-radius: 30px; transition: all 0.4s ease; }
}
@media screen and (min-width: 575px) and (max-width: 999px) {
 #navbg { top: 20px; left: 260px; background: rgba(120,120,180,0.4); box-shadow: 0px 0px 30px rgba(120,120,180,0.8); }
 .b1, .b2, .b3 { min-width: 200px; left: 270px; }
}
@media screen and (min-width: 575px) {
 #bg { background-position: top center; }
 #logo { top: 25px; left: 40px; }
 .b1 { top: 30px; }
 .b2 { top: 85px; }
 .b3 { top: 140px; }
 #content { margin: 205px 35px 0 35px; padding: 40px; background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.55) 150px); }
 #similar { display: table; width: 100%; border-spacing: 35px; }
 #similar a { width: 20%; height: 15vw; display: table-cell; text-align: center; vertical-align: middle; font-weight: bold; text-decoration: none; color: white !important; transition: background 0.25s; }
 #similar a:hover { background: rgba(0,0,0,0.6); }
 #similar h4 { padding-bottom: 15px; font-size: 20px; }
 #similar svg, #similar img { width: 40%; }
}
@media screen and (max-width: 574px) {
 #bg { background-position: top left; }
 #logo { top: 20px; left: calc(50vw - 101px); }
 #navbg { top: 190px; left: 25px; background: rgba(70,70,120,0.4); box-shadow: 0px 0px 30px rgba(70,70,120,0.8); }
 .b1, .b2, .b3 { left: 35px; }
 .b1 { top: 200px; }
 .b2 { top: 255px; }
 .b3 { top: 310px; }
 #content { margin: 375px 0 0 0; padding: 35px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.3) 20px); }
 #similar { display: none; }
 #footer { background: rgba(0,0,0,0.5); background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(255,255,255,0.15) 15px); }
}
.btn {
 display: block;
 position: absolute;
 height: 32px;
 line-height: 31px;
 transition: all 0.4s ease;
 color: white;
 font-family: Acrylic, Arial;
 font-size: 16px;
 font-weight: bold;
 text-decoration: none;
 text-align: center;
 background: linear-gradient(to bottom, rgba(96, 103, 104, 0.3) 0%, rgba(187, 187, 187, 0.1) 3%, rgba(0, 0, 0, 0.3) 60%);
 border: solid 1px rgba(0, 0, 0, 0.3);
 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;
}
.btn, .btn * {
 vertical-align: top;
}
.btn:hover {
 color: white;
 border-color: rgba(255, 255, 255, 0.4);
 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);
 box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4) inset, 0 16px 0 0 rgba(255, 255, 255, 0.3) inset, 0 0 5px 2px rgba(255, 255, 255, 0.75), 0 0 10px 2px rgba(255, 255, 255, 0.75) inset !important;
 background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
h1, h2, h3, h4 { margin: 0; }
#footer { text-align: center; padding: 0 35px 35px 35px; color: white; }
#footer a { font-family: Acrylic, Arial; font-size: 18px; color: white !important; }
#footer small { display: block; margin-top: 12px; line-height: 150%; }