threedom.css

/*
 * Copyright (c) 2020 Darren Scott - All Rights Reserved
 *
 * This program is distributed under GPL Version 3 in the hope that
 * it will be useful, but WITHOUT ANY WARRANTY.
 */

/*
  top, right, bottom, left is the css standard
  so for planes, I recommend front, top, right, back, bottom, left
*/

.three-d, .three-d > *:not(.three-d) {

  --x-rotation: 0;
  --y-rotation: 0;
  --z-rotation: 0;
  --x2-rotation: 0;
  --y2-rotation: 0;
  --z2-rotation: 0;
  --x-translation: 0;
  --y-translation: 0;
  --z-translation: 0;
  --x2-translation: 0;
  --y2-translation: 0;
  --z2-translation: 0;

  /* these 2 are invalid */
  /*
  --width: var(width);
  --height: var(height);
  */
  /* this messes up the inheritance */
  /* --depth: 0; */

  /*
    It'd be great to be able to assume height and depth default
    to width so no need to specify, but here breaks things...
  */
  /*
  --height: var(--height, var(--width));
  --depth: var(--depth, var(--width));
  */

  /* Many thanks to the author of this gist for the trig functions */
  /* https://gist.github.com/stereokai/7666bfe93929b14c2dced148c79e0e97 */

  --angle: 0;
  --pi: 3.141592653589793238;
  --rad: calc(var(--angle) * var(--pi) / 180);
  --radsq: calc(var(--rad) * var(--rad));

  --sin-term1: var(--rad);
  --sin-term2: calc((var(--radsq) * var(--rad)) / 6);
  --sin-term3: calc((var(--radsq) * var(--radsq) * var(--rad)) / 120);
  --sin-term4: calc((var(--radsq) * var(--radsq) * var(--radsq) * var(--rad)) / 5040);
  --sin-term5: calc((var(--radsq) * var(--radsq) * var(--radsq) * var(--radsq) * var(--rad)) / 362880);
  --sin: calc(var(--sin-term1) - var(--sin-term2) + var(--sin-term3) - var(--sin-term4) + var(--sin-term5));

  --cos-term1: 1;
  --cos-term2: calc(var(--radsq) / 2);
  --cos-term3: calc((var(--radsq) * var(--radsq)) / 24);
  --cos-term4: calc((var(--radsq) * var(--radsq) * var(--radsq)) / 720);
  --cos-term5: calc((var(--radsq) * var(--radsq) * var(--radsq) * var(--radsq)) / 40320);
  --cos: calc(var(--cos-term1) - var(--cos-term2) + var(--cos-term3) - var(--cos-term4) + var(--cos-term5));

  --tan: calc(var(--sin) / var(--cos));
}

.three-d > *:not(.three-d) {
  --width: inherit;
  --height: inherit;
  --depth: inherit;
}

.three-d {
  width: var(--width);
  height: var(--height);
  /* transform-style: preserve-3d; */
  /* margin: auto; */
}

.three-d.outlined, .three-d.outlined .three-d, .three-d.outlined .three-d.object > *, .three-d.outlined.object > * {
  outline: 1px dotted gray;
}

.three-d.space {
  perspective: 200vmax;
  /*
  display: flex;
  align-items: center;
  justify-content: center;
  */
}

.three-d {
  display: flex;
  align-items: center;
  justify-content: center;
}

.three-d.private.space {
  overflow: hidden;
}

.three-d.inline.space {
  display: inline-flex;
  vertical-align: middle;
}

figure.three-d {
    margin-block-start: initial;
    margin-block-end: initial;
    margin-inline-start: initial;
    margin-inline-end: initial;
}

.three-d.space * {
  transform-style: preserve-3d;
}

.three-d.nobackface > * {
  backface-visibility: hidden;
}

.three-d.reflective.space {
  -webkit-box-reflect: below 0 var(--reflection);
}

.three-d.object, .three-d.carousel {
    /* position: relative; */
}

.three-d.object > *, .three-d.cylinder > *, .three-d.carousel > *, .three-d.wheel > * {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  /* copied to below to allow objects themselves to have easy */
  /* transforms */
  /*
  transform:
    rotateX(var(--x-rotation))
    rotateY(var(--y-rotation))
    rotateZ(var(--z-rotation))
    rotateX(var(--x2-rotation))
    rotateY(var(--y2-rotation))
    rotateZ(var(--z2-rotation))
    translate3d(
      var(--x-translation), var(--y-translation), var(--z-translation)
    );
  */
  width: inherit;
  height: inherit;
  /* This messes with making faces of objects 3d */
  /* like a card for a carousel face to have back and front */
  /* check the impact before uncommenting */
  /* overflow: hidden; */
}

.three-d, .three-d.object > *, .three-d.cylinder > *, .three-d.carousel > *, .three-d.wheel > * {
  transform:
    rotateX(var(--x-rotation))
    rotateY(var(--y-rotation))
    rotateZ(var(--z-rotation))
    translate3d(
      var(--x2-translation), var(--y2-translation), var(--z2-translation)
    )
    rotateX(var(--x2-rotation))
    rotateY(var(--y2-rotation))
    rotateZ(var(--z2-rotation))
    translate3d(
      var(--x-translation), var(--y-translation), var(--z-translation)
    );
}

/*
.three-d.shaded.object > * {
  box-shadow: inset 0px 0px 100px #00000075;
}
*/

/*
  front, top, right, back, bottom, left
*/

.three-d.shaded.object > * {
  filter: brightness(var(--brightness, 1));
}

.three-d.shaded.object > *:nth-child(2) {
  --brightness: 1.2; /* top */
}

.three-d.shaded.object > *:nth-child(3) {
  --brightness: 0.9; /* right */
}

.three-d.shaded.object > *:nth-child(4) {
  --brightness: 0.8; /* back */
}

.three-d.shaded.object > *:nth-child(5) {
  --brightness: 0.8; /* bottom */
}

.three-d.shaded.object > *:nth-child(6) {
  --brightness: 1.1; /* left */
}

.three-d.seated.object > *:nth-child(5):nth-last-child(2) {
  /* the 5th, bottom plane has a shadow when seated */
  box-shadow: -7px -7px 20px 0px #000000b5;
}

/*
 See http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/
*/

/* two faces */

.three-d.object > *:nth-child(2):nth-last-child(1) {
  /* the 2nd face */
  --y-rotation: 180deg;
}

/* four faces */

.three-d.object > *:first-child:nth-last-child(4),
.three-d.object > *:first-child:nth-last-child(4) ~ * {
  --angle: 60;
  height: calc(var(--height) * var(--sin));
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  transform-origin: 0 0;
}

/*
  front, top, right, back, bottom, left
*/

.three-d.object > *:nth-child(1):nth-last-child(4) {
  /* the 1st face */
  --x-rotation: 19.5deg;
  /*
  --z-translation: -62px;
  */
}

.three-d.object > *:nth-child(2):nth-last-child(3) {
  /* the 2nd face */
  transform-origin: 100% 0;
  --x2-rotation: 19.5deg;
  --y-rotation: 120deg;
  /*
  --z-translation: -62px;
  --x-translation: 200px;
  */
  --z-translation: -82px;
  --x-translation: 149px;
  --y-translation: -29px;
}

.three-d.object > *:nth-child(3):nth-last-child(2) {
  /* the 3rd face */
  transform-origin: 0 100%;
  --x-rotation: 90deg;
  --z-translation: 11px;
  --y-rotation: 180deg;
  /*
  --x-translation: -200px;
  */
  --x-translation: -200px;
  --z-translation: -10px;
  --y-translation: 58px;
}

.three-d.object > *:nth-child(4):nth-last-child(1) {
  /* the 4th face */
  --x2-rotation: 19.5deg;
  --y-rotation: -120deg;
  /*
  --z-translation: -62px;
  --x-translation: -200px
  */
  --z-translation: -82px;
  --x-translation: -149px;
  --y-translation: -29px;
}

/* five faces */

.three-d.object > *:nth-child(1):nth-last-child(5) {
  /* the 1st face */
}

.three-d.object > *:nth-child(2):nth-last-child(4) {
  /* the 2nd face */
}

.three-d.object > *:nth-child(3):nth-last-child(3) {
  /* the 3rd face */
}

.three-d.object > *:nth-child(4):nth-last-child(2) {
  /* the 4th face */
}

.three-d.object > *:nth-child(5):nth-last-child(1) {
  /* the 5th face */
}

/* six faces */

/*
  top, right, bottom, left is the css standard
  so for planes, I recommend front, top, right, back, bottom, left
*/

.three-d.object > *:nth-child(6):nth-last-child(1) {
  /* the 6th face */
  --z-translation: calc((var(--width) / 2) + ((var(--width) - var(--depth)) / -2));
  --y-rotation: 270deg;
  width: var(--depth);
}

.three-d.object > *:nth-child(5):nth-last-child(2) {
  /* the 5th face */
  --z-translation: calc((var(--height) / 2) + ((var(--height) - var(--depth)) / 2));
  --x-rotation: 270deg;
  height: var(--depth);
}

.three-d.object > *:nth-child(4):nth-last-child(3) {
  /* the 4th face */
  --z-translation: calc(var(--depth) / 2);
  --y-rotation: 180deg;
}

.three-d.object > *:nth-child(3):nth-last-child(4) {
  /* the 3rd face */
  --z-translation: calc((var(--width) / 2) + ((var(--width) - var(--depth)) / 2));
  --y-rotation: 90deg;
  width: var(--depth);
}

.three-d.object > *:nth-child(2):nth-last-child(5) {
  /* the 2nd face */
  --z-translation: calc((var(--height) / 2) - ((var(--height) - var(--depth)) / 2));
  --x-rotation: 90deg;
  height: var(--depth);
}

.three-d.object > *:nth-child(1):nth-last-child(6) {
  /* the 1st face */
  --z-translation: calc(var(--depth) / 2);
}

/* CYLINDER */
/* ======== */

/*
  I have to break the model of the order of faces for this one:
  to allow it to have an arbitrary number of faces around the
  vertical axis, the top has to be the first face and the
  bottom has to be the last.

  Other than that, it's pretty similar to the carousel.
*/

.three-d.cylinder > * {
  /* Sorry, not supporting a non-square depth until CSS has sine/cosine funcs */
  --depth: var(--width);
  --angle: calc(360 / (var(--faces) - 2) / 2);
  --face-width: calc(var(--sin) * var(--width));
  /* --shape-depth: calc(var(--cos) * var(--depth)); */
  --radius: calc((var(--face-width) / 2) / var(--tan));
}

.three-d.cylinder > *:first-child {
  height: var(--depth);
  clip-path: var(--cylinder-top);
  /* --z-translation: var(--radius); */
  --z-translation: calc(var(--height) / 2);
  --x-rotation: 90deg;
}

.three-d.cylinder > *:not(:first-child):not(:last-child) {
  width: var(--face-width);
  --face-angle: calc(1deg * (var(--angle) * 2));
  --y2-rotation: calc(var(--face-angle) * (var(--face) - 2));
  /* --x2-translation: calc(var(--face-width) / 2); */
  --z-translation: var(--radius);
}

.three-d.cylinder > *:last-child {
  height: var(--depth);
  clip-path: var(--cylinder-bottom, var(--cylinder-top));
  --z-translation: calc(var(--height) / 2);
  /* --z-translation: calc(var(--height) - var(--radius)); */
  --x-rotation: 270deg;
}

/* WHEEL */
/* ===== */

.three-d.wheel > * {
  --angle: calc(360 / var(--faces) / 2);
  --face-angle: calc(1deg * (var(--angle) * 2));
  --x-rotation: calc(var(--face-angle) * (var(--face) - 1));
  --z-translation: calc((var(--height) / 2) / var(--tan));
}

/* CAROUSEL */
/* ======== */

.three-d.carousel > * {
  --angle: calc(360 / var(--faces) / 2);
  --face-angle: calc(1deg * (var(--angle) * 2));
  --y-rotation: calc(var(--face-angle) * (var(--face) - 1));
  --z-translation: calc((var(--width) / 2) / var(--tan));
}

/* CAROUSEL WRAPPING */
/* ================= */

.three-d.wrapped.carousel > * {
  background-size: cover;
  background-position-x: calc(var(--width) * (1 - var(--face)));
}

/* ANIMATIONS */
/* ========== */

.three-d.rotating {
  --rx: 1; --ry: 1; --rz: 1; --from: 0deg; --to: 360deg;
  animation: rotating 10s linear infinite;
}

.three-d.spinning {
  --rx: 0; --rz: 0; --from: 360deg; --to: 0deg;
  animation: rotating 10s linear infinite;
}

.three-d.rolling {
  --ry: 0; --rz: 0; --from: 360deg; --to: 0deg;
  animation: rotating 10s linear infinite;
}

.three-d.extra.slowly {
  animation-duration: 60s;
}

.three-d.slowly {
  animation-duration: 30s;
}

.three-d.quickly {
  animation-duration: 5s;
}

.three-d.extra.quickly {
  animation-duration: 2s;
}

@keyframes rotating {
  from {
    transform: rotate3d(var(--rx, 1), var(--ry, 1), var(--rz, 1), var(--from, 0deg));
  }
  to {
    transform: rotate3d(var(--rx, 1), var(--ry, 1), var(--rz, 1), var(--to, 360deg));
  }
}

/* GENERAL PURPOSE FACE COUNTERS */
/* ============================= */

.three-d > * {
  --face: 0;
  --faces: 0;
}

.three-d > *:nth-child(1) {
  --face: 1;
}

.three-d > *:first-child:nth-last-child(1),
.three-d > *:first-child:nth-last-child(1) ~ * {
  --faces: 1;
}

.three-d > *:nth-child(2) {
  --face: 2;
}

.three-d > *:first-child:nth-last-child(2),
.three-d > *:first-child:nth-last-child(2) ~ * {
  --faces: 2;
}

.three-d > *:nth-child(3) {
  --face: 3;
}

.three-d > *:first-child:nth-last-child(3),
.three-d > *:first-child:nth-last-child(3) ~ * {
  --faces: 3;
}

.three-d > *:nth-child(4) {
  --face: 4;
}

.three-d > *:first-child:nth-last-child(4),
.three-d > *:first-child:nth-last-child(4) ~ * {
  --faces: 4;
}

.three-d > *:nth-child(5) {
  --face: 5;
}

.three-d > *:first-child:nth-last-child(5),
.three-d > *:first-child:nth-last-child(5) ~ * {
  --cylinder-top: polygon(50% 0%, 93.30% 74.99%, 6.70% 75%);
  --cylinder-bottom: polygon(50% 100%, 93.30% 25%, 6.70% 24.99%);;
  --faces: 5;
}

.three-d > *:nth-child(6) {
  --face: 6;
}

.three-d > *:first-child:nth-last-child(6),
.three-d > *:first-child:nth-last-child(6) ~ * {
  --cylinder-top: polygon(85.36% 14.64%, 85.35% 85.35%, 14.64% 85.35%, 14.64% 14.64%);
  --faces: 6;
}

.three-d > *:nth-child(7) {
  --face: 7;
}

.three-d > *:first-child:nth-last-child(7),
.three-d > *:first-child:nth-last-child(7) ~ * {
  --cylinder-top: polygon(50% 0, 97.55% 34.55%, 79.39% 90.45%, 20.61% 90.45%, 2.45% 34.55%);;
  --cylinder-bottom: polygon(50% 100%, 97.55% 65.45%, 79.39% 9.54%, 20.61% 9.54%, 2.45% 65.45%);;
  --faces: 7;
}

.three-d > *:nth-child(8) {
  --face: 8;
}

.three-d > *:first-child:nth-last-child(8),
.three-d > *:first-child:nth-last-child(8) ~ * {
  --cylinder-top: polygon(50% 0%, 93.3% 24.99%, 93.30% 74.99%, 50% 100%, 6.70% 75%, 6.70% 24.99%);
  --faces: 8;
}

.three-d > *:nth-child(9) {
  --face: 9;
}

.three-d > *:first-child:nth-last-child(9),
.three-d > *:first-child:nth-last-child(9) ~ * {
  --cylinder-top: polygon(50.00% 0.00%, 89.09% 18.83%, 98.75% 61.13%, 71.69% 95.05%, 28.31% 95.05%, 1.25% 61.13%, 10.91% 18.83%);
  --cylinder-bottom: polygon(50.00% 100.00%, 89.09% 81.17%, 98.75% 38.87%, 71.69% 4.95%, 28.31% 4.95%, 1.25% 38.87%, 10.91% 81.17%);
  --faces: 9;
}

.three-d > *:nth-child(10) {
  --face: 10;
}

.three-d > *:first-child:nth-last-child(10),
.three-d > *:first-child:nth-last-child(10) ~ * {
  --cylinder-top: polygon(69.13% 3.81%, 96.19% 30.87%, 96.19% 69.13%, 69.13% 96.19%, 30.87% 96.19%, 3.81% 69.13%, 3.81% 30.87%, 30.87% 3.81%);
  --faces: 10;
}

.three-d > *:nth-child(11) {
  --face: 11;
}

.three-d > *:first-child:nth-last-child(11),
.three-d > *:first-child:nth-last-child(11) ~ * {
  --cylinder-top: polygon(50.00% 0.00%, 82.14% 11.70%, 99.24% 41.32%, 93.30% 75.00%, 67.10% 96.98%, 32.90% 96.98%, 6.70% 75.00%, 0.76% 41.32%, 17.86% 11.70%);
  --cylinder-bottom: polygon(50.00% 100.00%, 82.14% 88.30%, 99.24% 58.68%, 93.30% 25.00%, 67.10% 3.02%, 32.90% 3.02%, 6.70% 25.00%, 0.76% 58.68%, 17.86% 88.30%);
  --faces: 11;
}

.three-d > *:nth-child(12) {
  --face: 12;
}

.three-d > *:first-child:nth-last-child(12),
.three-d > *:first-child:nth-last-child(12) ~ * {
  --cylinder-top: polygon(65.45% 2.45%, 90.45% 20.61%, 100.00% 50.00%, 90.45% 79.39%, 65.45% 97.55%, 34.55% 97.55%, 9.55% 79.39%, 0.00% 50.00%, 9.55% 20.61%, 34.55% 2.45%);
  --faces: 12;
}

.three-d > *:nth-child(13) {
  --face: 13;
}

.three-d > *:first-child:nth-last-child(13),
.three-d > *:first-child:nth-last-child(13) ~ * {
  --cylinder-top: polygon(50.00% 0.00%, 77.03% 7.94%, 95.48% 29.23%, 99.49% 57.12%, 87.79% 82.74%, 64.09% 97.97%, 35.91% 97.97%, 12.21% 82.74%, 0.51% 57.12%, 4.52% 29.23%, 22.97% 7.94%);
  --cylinder-bottom: polygon(50.00% 100.00%, 77.03% 92.06%, 95.48% 70.77%, 99.49% 42.88%, 87.79% 17.26%, 64.09% 2.03%, 35.91% 2.03%, 12.21% 17.26%, 0.51% 42.88%, 4.52% 70.77%, 22.97% 92.06%);
  --faces: 13;
}

.three-d > *:nth-child(14) {
  --face: 14;
}

.three-d > *:first-child:nth-last-child(14),
.three-d > *:first-child:nth-last-child(14) ~ * {
  --cylinder-top: polygon(62.94% 1.70%, 85.36% 14.64%, 98.30% 37.06%, 98.30% 62.94%, 85.36% 85.36%, 62.94% 98.30%, 37.06% 98.30%, 14.64% 85.36%, 1.70% 62.94%, 1.70% 37.06%, 14.64% 14.64%, 37.06% 1.70%);
  --faces: 14;
}

.three-d > *:nth-child(15) {
  --face: 15;
}

.three-d > *:first-child:nth-last-child(15),
.three-d > *:first-child:nth-last-child(15) ~ * {
  --cylinder-top: polygon(50.00% 0.00%, 73.24% 5.73%, 91.15% 21.60%, 99.64% 43.97%, 96.75% 67.73%, 83.16% 87.43%, 61.97% 98.55%, 38.03% 98.55%, 16.84% 87.43%, 3.25% 67.73%, 0.36% 43.97%, 8.85% 21.60%, 26.76% 5.73%);
  --cylinder-bottom: polygon(50.00% 100.00%, 73.24% 94.27%, 91.15% 78.40%, 99.64% 56.03%, 96.75% 32.27%, 83.16% 12.57%, 61.97% 1.45%, 38.03% 1.45%, 16.84% 12.57%, 3.25% 32.27%, 0.36% 56.03%, 8.85% 78.40%, 26.76% 94.27%);
  --faces: 15;
}

.three-d > *:nth-child(16) {
  --face: 16;
}

.three-d > *:first-child:nth-last-child(16),
.three-d > *:first-child:nth-last-child(16) ~ * {
  --cylinder-top: polygon(61.13% 1.25%, 81.17% 10.91%, 95.05% 28.31%, 100.00% 50.00%, 95.05% 71.69%, 81.17% 89.09%, 61.13% 98.75%, 38.87% 98.75%, 18.83% 89.09%, 4.95% 71.69%, 0.00% 50.00%, 4.95% 28.31%, 18.83% 10.91%, 38.87% 1.25%);
  --faces: 16;
}

.three-d > *:nth-child(17) {
  --face: 17;
}

.three-d > *:first-child:nth-last-child(17),
.three-d > *:first-child:nth-last-child(17) ~ * {
  --cylinder-top: polygon(50.00% 0.00%, 70.34% 4.32%, 87.16% 16.54%, 97.55% 34.55%, 99.73% 55.23%, 93.30% 75.00%, 79.39% 90.45%, 60.40% 98.91%, 39.60% 98.91%, 20.61% 90.45%, 6.70% 75.00%, 0.27% 55.23%, 2.45% 34.55%, 12.84% 16.54%, 29.66% 4.32%);
  --cylinder-bottom: polygon(50.00% 100.00%, 70.34% 95.68%, 87.16% 83.46%, 97.55% 65.45%, 99.73% 44.77%, 93.30% 25.00%, 79.39% 9.55%, 60.40% 1.09%, 39.60% 1.09%, 20.61% 9.55%, 6.70% 25.00%, 0.27% 44.77%, 2.45% 65.45%, 12.84% 83.46%, 29.66% 95.68%);
  --faces: 17;
}

.three-d > *:nth-child(18) {
  --face: 18;
}

.three-d > *:first-child:nth-last-child(18),
.three-d > *:first-child:nth-last-child(18) ~ * {
  --cylinder-top: polygon(59.75% 0.96%, 77.78% 8.43%, 91.57% 22.22%, 99.04% 40.25%, 99.04% 59.75%, 91.57% 77.78%, 77.78% 91.57%, 59.75% 99.04%, 40.25% 99.04%, 22.22% 91.57%, 8.43% 77.78%, 0.96% 59.75%, 0.96% 40.25%, 8.43% 22.22%, 22.22% 8.43%, 40.25% 0.96%);
  --faces: 18;
}

/* ROOT VARIABLES */
/* ============== */

/*
:root {
  --x-rotation: 0;
  --y-rotation: 0;
  --z-rotation: 0;
  --x2-rotation: 0;
  --y2-rotation: 0;
  --z2-rotation: 0;
  --x-translation: 0;
  --y-translation: 0;
  --z-translation: 0;
}
*/

:root {
  /*
  GRRR, CANT GET THIS WORKING RIGHT
  --height: var(--height, var(--width));
  --depth: var(--depth, var(--width));
  */
  --reflection: url('data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjIxMG1tIiBoZWlnaHQ9IjI5N21tIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMTAgMjk3IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4NCjxkZWZzPg0KPGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMTA3LjY3IiB4Mj0iMTA3LjQ1IiB5MT0iMzkzLjc0IiB5Mj0iMTQ0LjM4IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEuMzYxMiAwIDAgMSAtMzkuMjQ1IDApIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+DQo8c3RvcCBzdG9wLWNvbG9yPSIjMDYwMDAwIiBvZmZzZXQ9IjAiLz4NCjxzdG9wIHN0b3AtY29sb3I9IiMwNjAwMDAiIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIxIi8+DQo8L2xpbmVhckdyYWRpZW50Pg0KPC9kZWZzPg0KPG1ldGFkYXRhPg0KPHJkZjpSREY+DQo8Y2M6V29yayByZGY6YWJvdXQ9IiI+DQo8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4NCjxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4NCjxkYzp0aXRsZS8+DQo8L2NjOldvcms+DQo8L3JkZjpSREY+DQo8L21ldGFkYXRhPg0KPHJlY3QgeD0iLS4zMjUxOSIgeT0iMS4wNDA5IiB3aWR0aD0iMjEwLjM5IiBoZWlnaHQ9IjI5Ni42OSIgZmlsbD0idXJsKCNhKSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2Utd2lkdGg9Ii4zMDg2OCIvPg0KPC9zdmc+');
}