/* Science framework symbols are drawn in CSS, independently of the illustration.
   Markup: <span class="fw-icon fw-icon--NAME" aria-hidden="true">
             <i></i><i></i><i></i><i></i><i></i><i></i>
           </span>
   The surrounding component controls the icon size through font-size. */
.fw-icon {
  --fw-ink: #103c5b;
  --fw-teal: #26a7aa;
  --fw-paper: #fff;
  --fw-stroke: .043em;
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  color: var(--fw-ink);
  line-height: 1;
  vertical-align: middle;
  isolation: isolate;
}
.fw-icon > i,
.fw-icon::before,
.fw-icon::after,
.fw-icon > i::before,
.fw-icon > i::after {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-style: normal;
  pointer-events: none;
}
.fw-icon > i { display: none; }
.fw-icon > i::before,
.fw-icon > i::after { content: ""; }

/* Laboratory flask; aroma and chemicals add a leaf or molecular bonds. */
.fw-icon:is(.fw-icon--flask,.fw-icon--aroma,.fw-icon--chemicals) {
  --fw-flask-center: 50%;
}
.fw-icon:is(.fw-icon--flask,.fw-icon--aroma,.fw-icon--chemicals) > i:nth-child(-n+4) { display: block; }
.fw-icon:is(.fw-icon--flask,.fw-icon--aroma,.fw-icon--chemicals) > i:nth-child(1) {
  top: 33%;
  left: calc(var(--fw-flask-center) - 26%);
  width: 52%;
  height: 55%;
  background: currentColor;
  clip-path: polygon(35% 0,65% 0,65% 20%,99% 84%,100% 93%,93% 100%,7% 100%,0 93%,1% 84%,35% 20%);
}
.fw-icon:is(.fw-icon--flask,.fw-icon--aroma,.fw-icon--chemicals) > i:nth-child(1)::before {
  inset: var(--fw-stroke);
  background: var(--fw-paper);
  clip-path: polygon(38% 0,62% 0,62% 20%,99% 85%,100% 93%,93% 100%,7% 100%,0 93%,1% 85%,38% 20%);
}
.fw-icon:is(.fw-icon--flask,.fw-icon--aroma,.fw-icon--chemicals) > i:nth-child(1)::after {
  inset: 45% 10% 8%;
  background: var(--fw-teal);
  clip-path: polygon(28% 0,72% 0,100% 90%,94% 100%,6% 100%,0 90%);
}
.fw-icon:is(.fw-icon--flask,.fw-icon--aroma,.fw-icon--chemicals) > i:nth-child(2) {
  top: 15%;
  left: calc(var(--fw-flask-center) - 9%);
  width: 18%;
  height: 30%;
  border: var(--fw-stroke) solid;
  border-top: 0;
  border-bottom: 0;
  background: var(--fw-paper);
}
.fw-icon:is(.fw-icon--flask,.fw-icon--aroma,.fw-icon--chemicals) > i:nth-child(3) {
  top: 10%;
  left: calc(var(--fw-flask-center) - 14%);
  width: 28%;
  height: 10%;
  border: var(--fw-stroke) solid;
  border-radius: .025em;
  background: var(--fw-paper);
}
.fw-icon:is(.fw-icon--flask,.fw-icon--aroma,.fw-icon--chemicals) > i:nth-child(4) {
  top: 67%;
  left: calc(var(--fw-flask-center) - 10%);
  width: 7%;
  height: 7%;
  border-radius: 50%;
  background: var(--fw-paper);
}
.fw-icon:is(.fw-icon--flask,.fw-icon--aroma,.fw-icon--chemicals) > i:nth-child(4)::after {
  top: -.1em;
  left: .11em;
  width: .05em;
  height: .05em;
  border-radius: 50%;
  background: var(--fw-paper);
}
.fw-icon--aroma { --fw-flask-center: 42% !important; }
.fw-icon--aroma > i:nth-child(5),
.fw-icon--capsule > i:nth-child(3) {
  display: block;
  top: 23%;
  left: 59%;
  width: 29%;
  height: 44%;
  border: var(--fw-stroke) solid;
  border-radius: 95% 5% 95% 5%;
  background: var(--fw-teal);
  transform: rotate(13deg);
}
.fw-icon--aroma > i:nth-child(5)::after,
.fw-icon--capsule > i:nth-child(3)::after {
  top: 13%;
  left: 46%;
  height: 83%;
  border-left: var(--fw-stroke) solid;
  transform: rotate(28deg);
}

/* Double helix. */
.fw-icon--dna > i { display: block; }
.fw-icon--dna > i:nth-child(1),
.fw-icon--dna > i:nth-child(2) {
  top: 11%;
  left: 30%;
  width: 40%;
  height: 78%;
  border: var(--fw-stroke) solid;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(28deg);
}
.fw-icon--dna > i:nth-child(2) { transform: rotate(-28deg); }
.fw-icon--dna > i:nth-child(n+3) {
  left: 35%;
  width: 30%;
  height: var(--fw-stroke);
  background: var(--fw-teal);
}
.fw-icon--dna > i:nth-child(3) { top: 21%; transform: rotate(16deg); }
.fw-icon--dna > i:nth-child(4) { top: 39%; transform: rotate(-20deg); }
.fw-icon--dna > i:nth-child(5) { top: 59%; transform: rotate(20deg); }
.fw-icon--dna > i:nth-child(6) { top: 77%; transform: rotate(-16deg); }

/* Two brain hemispheres with independent folds. */
.fw-icon--brain > i { display: block; }
.fw-icon--brain > i:nth-child(1),
.fw-icon--brain > i:nth-child(2) {
  top: 15%;
  left: 15%;
  width: 35%;
  height: 72%;
  border: var(--fw-stroke) solid;
  border-radius: 70% 40% 35% 65% / 45% 25% 25% 55%;
}
.fw-icon--brain > i:nth-child(2) {
  left: 50%;
  transform: scaleX(-1);
}
.fw-icon--brain > i:nth-child(3),
.fw-icon--brain > i:nth-child(4) {
  top: 29%;
  left: 28%;
  width: 15%;
  height: 23%;
  border: var(--fw-stroke) solid;
  border-top: 0;
  border-left: 0;
  border-radius: 0 0 70% 0;
  transform: rotate(-18deg);
}
.fw-icon--brain > i:nth-child(4) { left: 57%; transform: scaleX(-1) rotate(-18deg); }
.fw-icon--brain > i:nth-child(5),
.fw-icon--brain > i:nth-child(6) {
  top: 57%;
  left: 28%;
  width: 16%;
  height: 17%;
  border: var(--fw-stroke) solid;
  border-right: 0;
  border-bottom: 0;
  border-radius: 70% 0 0;
}
.fw-icon--brain > i:nth-child(6) { left: 56%; transform: scaleX(-1); }

/* Interlocking gears. */
.fw-icon--gears > i:nth-child(-n+3) {
  display: block;
  width: 43%;
  height: 43%;
  border-radius: 36%;
  background: repeating-conic-gradient(currentColor 0deg 24deg,transparent 24deg 45deg);
}
.fw-icon--gears > i:nth-child(-n+3)::before {
  inset: 16%;
  border: var(--fw-stroke) solid;
  border-radius: 50%;
  background: var(--fw-paper);
}
.fw-icon--gears > i:nth-child(-n+3)::after {
  inset: 40%;
  border-radius: 50%;
  background: var(--fw-teal);
}
.fw-icon--gears > i:nth-child(1) { top: 12%; left: 26%; }
.fw-icon--gears > i:nth-child(2) { top: 46%; left: 5%; transform: scale(.8); }
.fw-icon--gears > i:nth-child(3) { top: 51%; left: 53%; }

/* Research insights and market direction. */
.fw-icon--chart > i:nth-child(-n+4),
.fw-icon--trend > i { display: block; }
.fw-icon--chart > i:nth-child(1),
.fw-icon--trend > i:nth-child(1) {
  top: 18%;
  left: 13%;
  width: 76%;
  height: 68%;
  border-left: var(--fw-stroke) solid;
  border-bottom: var(--fw-stroke) solid;
}
.fw-icon--chart > i:nth-child(n+2) {
  bottom: 15%;
  width: 15%;
  background: currentColor;
}
.fw-icon--chart > i:nth-child(2) { left: 25%; height: 29%; background: var(--fw-teal); }
.fw-icon--chart > i:nth-child(3) { left: 48%; height: 48%; }
.fw-icon--chart > i:nth-child(4) { left: 71%; height: 69%; }
.fw-icon--trend > i:nth-child(1) { opacity: .3; }
.fw-icon--trend > i:nth-child(2),
.fw-icon--trend > i:nth-child(3),
.fw-icon--trend > i:nth-child(4) {
  height: .065em;
  background: currentColor;
  transform-origin: left center;
  border-radius: .03em;
}
.fw-icon--trend > i:nth-child(2) { top: 73%; left: 22%; width: 32%; transform: rotate(-46deg); }
.fw-icon--trend > i:nth-child(3) { top: 50%; left: 44%; width: 19%; transform: rotate(35deg); }
.fw-icon--trend > i:nth-child(4) { top: 61%; left: 59%; width: 42%; transform: rotate(-53deg); }
.fw-icon--trend > i:nth-child(5) {
  top: 27%; left: 70%; width: 18%; height: 18%;
  border-top: .065em solid;
  border-right: .065em solid;
  transform: rotate(-8deg);
}

/* Human profile, used for neuro-cosmetics and sensory strategies. */
.fw-icon:is(.fw-icon--neuro,.fw-icon--sensory) > i { display: block; }
.fw-icon:is(.fw-icon--neuro,.fw-icon--sensory) > i:nth-child(1) {
  --fw-profile: polygon(37% 0,51% 0,65% 3%,77% 9%,84% 18%,88% 29%,88% 40%,99% 54%,99% 58%,86% 61%,86% 71%,81% 79%,67% 82%,67% 100%,27% 100%,27% 80%,15% 70%,7% 59%,2% 47%,0 34%,3% 22%,9% 12%,21% 4%);
  top: 5%; left: 12%; width: 73%; height: 90%;
  background: currentColor;
  clip-path: var(--fw-profile);
}
.fw-icon:is(.fw-icon--neuro,.fw-icon--sensory) > i:nth-child(1)::before {
  inset: var(--fw-stroke);
  background: var(--fw-paper);
  clip-path: var(--fw-profile);
}
.fw-icon:is(.fw-icon--neuro,.fw-icon--sensory) > i:nth-child(2) {
  top: 40%; left: 67%; width: 4%; height: 4%;
  border-radius: 50%;
  background: currentColor;
}
.fw-icon--neuro > i:nth-child(3) { display: none; }
.fw-icon--neuro > i:nth-child(4) {
  top: 20%; left: 26%; width: 37%; height: 35%;
  border: var(--fw-stroke) solid;
  border-radius: 54% 45% 38% 49% / 47% 56% 44% 49%;
  background: var(--fw-teal);
}
.fw-icon--neuro > i:nth-child(4)::after {
  top: 9%; left: 19%; width: 26%; height: 37%;
  border-bottom: var(--fw-stroke) solid;
  border-right: var(--fw-stroke) solid;
  border-radius: 0 0 55%;
  transform: rotate(15deg);
}
.fw-icon--neuro > i:nth-child(5) {
  top: 31%; left: 44%; width: 11%; height: 17%;
  border-left: var(--fw-stroke) solid;
  border-top: var(--fw-stroke) solid;
  border-radius: 55% 0 0;
}
.fw-icon--neuro > i:nth-child(5)::after {
  top: .04em; left: -.11em; width: .1em; height: .12em;
  border-left: var(--fw-stroke) solid;
  border-bottom: var(--fw-stroke) solid;
  border-radius: 0 0 50%;
}
.fw-icon--neuro > i:nth-child(6) {
  top: 54%; left: 39%; width: 12%; height: 12%;
  border-left: var(--fw-stroke) solid;
  border-bottom: var(--fw-stroke) solid;
  border-radius: 0 0 0 70%;
  transform: rotate(15deg);
}
.fw-icon--sensory > i:nth-child(1) { top: 10%; left: 3%; width: 58%; height: 82%; }
.fw-icon--sensory > i:nth-child(2) { top: 41%; left: 47%; width: 3.5%; height: 3.5%; }
.fw-icon--sensory > i:nth-child(3) {
  top: 40%; left: 25%; width: 10%; height: 16%;
  border: var(--fw-stroke) solid;
  border-bottom-color: transparent;
  border-radius: 55%;
  transform: rotate(-15deg);
}
.fw-icon--sensory > i:nth-child(n+4) {
  border-right: var(--fw-stroke) solid;
  border-radius: 50%;
}
.fw-icon--sensory > i:nth-child(4) { top: 38%; left: 63%; width: 9%; height: 22%; }
.fw-icon--sensory > i:nth-child(5) { top: 28%; left: 63%; width: 20%; height: 42%; }
.fw-icon--sensory > i:nth-child(6) { top: 18%; left: 63%; width: 31%; height: 62%; }

/* Eye, nose and taste communicate the combination of senses. */
.fw-icon--flavor > i { display: block; }
.fw-icon--flavor > i:nth-child(1) {
  top: 31%; left: 2%; width: 40%; height: 29%;
  border: var(--fw-stroke) solid;
  border-radius: 70% 20% 70% 20%;
  transform: rotate(25deg);
}
.fw-icon--flavor > i:nth-child(2) {
  top: 35%; left: 15%; width: 15%; height: 21%;
  border: var(--fw-stroke) solid;
  border-radius: 50%;
  background: var(--fw-teal);
}
.fw-icon--flavor > i:nth-child(3) {
  top: 21%; left: 49%; width: 20%; height: 48%;
  border-left: var(--fw-stroke) solid;
  border-bottom: var(--fw-stroke) solid;
  border-radius: 0 0 50% 35%;
  transform: skewX(-13deg);
}
.fw-icon--flavor > i:nth-child(3)::after {
  bottom: -.043em; left: 47%; width: 58%; height: 25%;
  border-right: var(--fw-stroke) solid;
  border-bottom: var(--fw-stroke) solid;
  border-radius: 0 0 70% 50%;
}
.fw-icon--flavor > i:nth-child(4) {
  top: 37%; left: 78%; width: 18%; height: 34%;
  border: var(--fw-stroke) solid;
  border-radius: 10% 10% 45% 45%;
  background: var(--fw-teal);
}
.fw-icon--flavor > i:nth-child(4)::after { top: 9%; left: 43%; height: 73%; border-left: var(--fw-stroke) solid; }
.fw-icon--flavor > i:nth-child(5) { top: 10%; left: 51%; width: 9%; height: 6%; border-top: var(--fw-stroke) solid; border-radius: 50%; }
.fw-icon--flavor > i:nth-child(6) { top: 7%; left: 49%; width: 14%; height: 10%; border-top: var(--fw-stroke) solid; border-radius: 50%; }

/* Nutraceutical capsule with botanical leaf. */
.fw-icon--capsule > i:nth-child(1) {
  display: block;
  top: 14%; left: 17%; width: 31%; height: 70%;
  border: var(--fw-stroke) solid;
  border-radius: .2em;
  background: linear-gradient(var(--fw-paper) 0 48%,var(--fw-ink) 48% 53%,var(--fw-teal) 53%);
  transform: rotate(24deg);
}
.fw-icon--capsule > i:nth-child(3) { top: 38%; left: 58%; width: 30%; height: 45%; transform: rotate(22deg); }

/* Brain-related formulations and olfactory modulation. */
.fw-icon:is(.fw-icon--modulator,.fw-icon--olfactory) > i { display: block; }
.fw-icon:is(.fw-icon--modulator,.fw-icon--olfactory) > i:nth-child(1) {
  top: 29%; left: 20%; width: 60%; height: 62%;
  border: var(--fw-stroke) solid;
  border-radius: 28% 28% 35% 35%;
}
.fw-icon:is(.fw-icon--modulator,.fw-icon--olfactory) > i:nth-child(2) {
  top: 17%; left: 34%; width: 32%; height: 16%;
  border: var(--fw-stroke) solid;
  border-radius: .025em;
  background: var(--fw-paper);
}
.fw-icon:is(.fw-icon--modulator,.fw-icon--olfactory) > i:nth-child(3),
.fw-icon:is(.fw-icon--modulator,.fw-icon--olfactory) > i:nth-child(4) {
  top: 43%; left: 32%; width: 19%; height: 33%;
  border: var(--fw-stroke) solid;
  border-radius: 70% 35% 35% 70%;
}
.fw-icon:is(.fw-icon--modulator,.fw-icon--olfactory) > i:nth-child(4) { left: 49%; transform: scaleX(-1); }
.fw-icon:is(.fw-icon--modulator,.fw-icon--olfactory) > i:nth-child(3)::after,
.fw-icon:is(.fw-icon--modulator,.fw-icon--olfactory) > i:nth-child(4)::after {
  top: 18%; left: 27%; width: 44%; height: 58%;
  border-bottom: var(--fw-stroke) solid;
  border-right: var(--fw-stroke) solid;
  border-radius: 0 50% 50% 0;
}
.fw-icon--modulator > i:nth-child(5),
.fw-icon--modulator > i:nth-child(6) { display: none; }
.fw-icon--olfactory > i:nth-child(2) { top: 25%; height: 10%; }
.fw-icon--olfactory > i:nth-child(5),
.fw-icon--olfactory > i:nth-child(6) {
  top: 1%; left: 36%; width: 11%; height: 21%;
  border-left: var(--fw-stroke) solid var(--fw-teal);
  border-radius: 50%;
  transform: rotate(-14deg);
}
.fw-icon--olfactory > i:nth-child(6) { top: 4%; left: 54%; height: 19%; transform: rotate(14deg); }

/* Wellness device, cylindrical housing and wave markings. */
.fw-icon--hardware > i:nth-child(-n+4) { display: block; }
.fw-icon--hardware > i:nth-child(1) {
  top: 20%; left: 26%; width: 48%; height: 68%;
  border: var(--fw-stroke) solid;
  border-top: 0;
  border-radius: 0 0 45% 45% / 0 0 15% 15%;
}
.fw-icon--hardware > i:nth-child(2) {
  top: 12%; left: 26%; width: 48%; height: 19%;
  border: var(--fw-stroke) solid;
  border-radius: 50%;
  background: var(--fw-paper);
}
.fw-icon--hardware > i:nth-child(3),
.fw-icon--hardware > i:nth-child(4) {
  top: 52%; left: 32%; width: 36%; height: 11%;
  border-top: var(--fw-stroke) solid;
  border-bottom: var(--fw-stroke) solid;
  border-radius: 50%;
  transform: rotate(-8deg);
}
.fw-icon--hardware > i:nth-child(4) { top: 68%; }

/* Performance chemicals combine a flask with connected atoms. */
.fw-icon--chemicals { --fw-flask-center: 67% !important; }
.fw-icon--chemicals > i:nth-child(5) {
  display: block;
  top: 19%; left: 18%; width: 14%; height: 14%;
  border: var(--fw-stroke) solid;
  border-radius: 50%;
  background: var(--fw-teal);
  box-shadow: -.12em .32em 0 -.025em var(--fw-teal),-.12em .32em 0 .014em var(--fw-ink),.17em .56em 0 -.025em var(--fw-teal),.17em .56em 0 .014em var(--fw-ink);
  z-index: 1;
}
.fw-icon--chemicals > i:nth-child(6) {
  display: block;
  top: 30%; left: 22%; height: 29%;
  border-left: var(--fw-stroke) solid;
  transform: rotate(21deg);
  transform-origin: top;
}
.fw-icon--chemicals > i:nth-child(6)::after {
  top: .26em; left: -.015em; width: .35em;
  border-top: var(--fw-stroke) solid;
  transform: rotate(20deg);
  transform-origin: left;
}
