@keyframes zoom {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1);
  }

  60% {
    transform: scale(1.05);
  }

  80% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 100;
  }
}

@media (min-width: 710px) {
  html {
    box-sizing: border-box;
  }
}

html.wait {
  opacity: .7;
  cursor: wait !important;
}

html body {
  margin: .7em;
}

html body main, html body #error {
  padding: 1px 0;
}

@media (min-width: 710px) {
  html body {
    max-width: 670px;
    margin: 0 auto;
  }

  html body main, html body #error {
    min-height: 15em;
  }
}

@media (min-width: 920px) {
  html[data-environ="local"]:after, html[data-environ="dev"]:after {
    opacity: .15;
    z-index: -1;
    width: 0;
    height: 0;
    font-size: 450%;
    line-height: 1;
    position: absolute;
    top: 1.5em;
    left: 1.1em;
    transform: rotate(90deg);
  }

  html[data-environ="local"]:after {
    content: "local";
  }

  html[data-environ="dev"]:after {
    content: "dev";
  }

  html body {
    max-width: 760px;
  }
}

@media (prefers-color-scheme: light) and (min-width: 710px) {
  html {
    border-top: 8px solid #444;
  }
}

@media (prefers-color-scheme: dark) and (min-width: 710px) {
  html {
    border-top: 8px solid #181818;
  }
}

header h1 {
  margin: .6em 0 .4em;
  font-size: 220%;
}

header h1 a {
  color: #111;
  text-indent: -999em;
  background: url(/static/image/logo.962d8590.png) center / contain no-repeat;
  width: 100%;
  display: inline-block;
}

header h1 a:focus {
  border: none !important;
}

@media (prefers-color-scheme: dark) {
  header h1 a {
    filter: drop-shadow(0 0 12px #f0f0f066);
  }
}

#slogan {
  display: none;
}

@media (min-width: 920px) {
  header h1 {
    margin: 1em 0;
    display: inline-block;
  }

  header h1 a {
    width: 326px;
    height: 95px;
  }

  #slogan {
    vertical-align: text-top;
    margin-left: 1em;
    padding: 8px 0 0;
    display: inline-block;
  }

  #slogan a {
    margin-left: .4em;
    display: inline-block;
  }
}

footer {
  text-align: center;
  font-size: 90%;
}

footer ul {
  margin: 0 auto;
  padding: 3em 0 0;
  list-style-type: none;
}

@media (min-width: 920px) {
  footer ul {
    padding-top: 4em;
  }
}

footer ul li {
  vertical-align: middle;
  line-height: 20px;
  display: inline-block;
}

footer ul li a {
  margin: 0 .7em;
  display: inline-block;
}

footer ul li a.active {
  border-bottom: 1px solid #ea4b2a;
}

#credits {
  opacity: .8;
  padding-top: .8em;
  line-height: 30px;
}

@media (min-width: 710px) {
  #credits {
    padding: 0 0 1.2em;
  }
}

#credits a {
  text-indent: -999em;
  margin: 4px auto;
  display: block;
}

@media (min-width: 920px) {
  #credits a {
    vertical-align: middle;
    height: 30px;
    display: inline-block;
  }
}

#credits a:focus {
  border: none;
}

#credits a#bk {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAAAeCAYAAAD+bvZ2AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB90CDQIoEzC5FfYAAAlbSURBVHja7Zl/cBxlGcc/u3eXZJOmNG1JmnSTCmWWLtQ6lA5g2xHYtSBYZBiGARWmiGArxdAZRXQGqzCCMDCjiFLQEWyLxRm0qIgisgdUWhQURCnXLoViWdI0adLSJtn8uNv1D56TnWXvekn9wdh7ZnZud99nn/d9n+f7Pr8ODoNuvn3OpRseOvESqlSlSqnzxpNmP/u0cV5VE0cGqYcrwOvJ7Nm6M31ZVZVVwFREGTVUw0LQUFVlFTAV0eTUaNtxs3iyqsoqYCqi43RWNNaGv6uq8sig9EQ/3LhwwZ0HTy9Yk2YrczWtcF9VlUcGpSby0ZoZbfM6hkbvn/bMcEtfe56wMf3JOZua7nEO9o9UVVoNSe+hOpU1Q/6YEi7o4JRNrYwsH5zSmPatqjqrISmBOpSaML9QUxTCV9/ktUyKQFWYFag1cU5HM14G6hKEKMBNtu+udTSjAdgEHBUtvmzfneVoxtPAMcA3bN+9LyI3DWwHum3fXSTvTgN+CuRjc71o++5FwnMrcBEQJqxps+27y4TvAeA04GO27+6QdzcBnwF+ZfvuSsvUzwR+DAxkc96JRSGWqeeAoWzOO1meHwWOj8xTABYAfwAmJayjFvhcNuf91jL11cCyhPXemM156y1TrwFeAg5kc96pUQbL1O8FzgXuAR4EngJGy+BgOXAxYAN3ZHPeXRFZNcAOYHDcgPl+W37ZjCBFW5BhIFQYGhimOwgYJDiQwH5iGVGXO5oRABuBDwKZBJ5TBHDXOppRsH13bQRwxwLTxZgXACuBWUmFnKMZ1wHfFvAdW6pD4GjGatt3b5L1zAbqI+PHADpwgjxPBToiSj0eWAXMiYF2AdCcYKAPldFNi2XqtwAXlljvMsvUa4F1Asa3E3hMWe9sOYzthzBtK2DInlZYpn4gm/PWRkDcPqGQNCnk+pYwRcNUjUIIY2EIYYiCsjWpiAJycu8DpwKLgI8DZwCrbd8dlNNcLM23xU4kwDzgygT5xZN3hZyMfSJrkVzzBVS3xTzd4wLGIt8ZoqjVjmZMLuGBSpJl6g3AOcAK2e/cyPB8YL3c7xEA7ReehWJ0gL3AR+RaB3SKAb8eWeciYLHs9TogGKf59gGnx+QVZa6L5LQniE4PLyTd3dr2iaaCOkdLp1A7Wij09zDkjeDDjmt7unbF+W3ffc3RjIPymLd99znxCKkY3wuOZvTJ46Dtu25M1E5gsaMZoe27ShmDjtq++6dYWAzFI0Wpz/bd5yM8mYSQCTAQlV1GNT8Hzgb+DtyTzXnbiwPZnPeWZeqePI5kc95f5H6rgG1pcQzYks15BcvUo+vdns15W2IAvRrojxg4SR/5JP1kc96mMsAv3u4ATrNMPczmPEXC6PgA872WtlRG5d6W0RS1UzQaLj2fvhvuYIyQlMqFZT4tbr5RjFek/cArFU7/hJxM09GMfvEilPE4h6J8DLBjjmZEdfKchJw/O5pxF/A12Uc/4CbIOxv4B3B7NuetL6ODcvpRSvC95102560RAxe9ZpNl6pXsfbJl6j8Qz6QAu7I57+YEPkdC8IctU++W0Dg+wGRSnDAtr86YmkmROWkuvc6z+MMF9iu8klF5uUIx0U3tAh6t8Ls+23fnO5rxjLjx+0vFfgFUvBKMK/NiRzOWJhglBGpt373K0YwrgXsl0S2OL7d992cl5n5SEsv3M2nAVbF3SYAJsznvbEnYzwK+M+6yOg1ZPVCpmVRP7QU2Lz/xRwZVUBVWrejuqiSWDko+0Srxex7w5QqnLxrsXImtC8vwNcWuJKqJ8UyRsNcqeQbAWjll7cCQ5FWPlJD3G+By4HrL1Dv+B0A4ABwtSa4OtImXjNOIHNJfy+8dh5B7kXjPBePyMGvaWi+YEajTj8qkqV8yn+3fvIt8MMZAyKZrerp+X6l3sX23X3KGYJwhpBg6DjiasQW4FfhKAkuPVF1FgI1J9RSnHaKwS4AWKes32L67Nxam+iLr3GP7bqnG5C0is1OAteQ/iQ7L1JVszovqLsjmvL0xnqS17s/mvKWVzpPNeUOWqb8kwPpSxR5meqh+tz1UqW+fTs9ft/FGbz97g5Dgndr9UBTEktBSsboiEElCfEOJ4Tds3/287bsr5PpCCXnP2b67SpLVnVKZXDFRA2Zz3mbgR5L0fjQhnygcBj7yMSDMAALL1HeVSGz/rZTNeX1SqVXmYTa0zXy4Pa/ojZMbGPWH2b67n7FUSCHkws6erm3lvnU0oxeYVqzIHc2Ioz4lAOou9lSAkx3NGLF9t3YCHWplPCHO9t2VjmYsBDYDcx3N2Aostn133wQU+zdgnmXqQ0CdZerbgPMltBVdertl6geBOdmc91aFTdUNlqk/kLDHifwN02yZ+nCJEH1OmTI9VVEO85PWmU1tec6brmmoUzVe2bOPYTWkvxA+uLKna2MlzilmxJrI9TBwMtAoeYQaUUixa1wX+S4JGLWx37oS4FJicuoiHmuLPNdL/6G+xDxKhS2Jo6XKOF4Oy3ERhSvS3a2J6SS6ByTczAR+KA3N2shVA2SlUkyLzKR9R3UXnb824VIk93nPWuIHsayHOTpQHmmuyaQyU+p49c1+hgjZG4Rdnb1dn6oQ0RcLGMKEBWyxfXefoxmqZO61seQMYCnwAeCxBDd9pTSiAL4K/BJ4MWENnxal+8C3pGn3WCzMjTiacZlUEb2R9wOOZiyXHszBhKroGsmbop5m0DL1G4CHpIl3WazLGohHLdJ3JCx2Z3NePhoKLFO/U/YUD2nPy7gqodRP2PcqaRo+JX+jXF0mNKaAX8g65khSHN3TAcvUlwP5ki78sWZ9SbOqPD6tqZ7XB0bpHRujuxDsa8igf7ara4gqHZFUMiRNhvWpujQ7Dg6zZ3SU7iDYnU5XwfJ+I8kB/2uUGJKeadafqs0oLV2jed4uhPQGwbbO3t1m1TzvS1LG2544rMkeP9ZoOOt1dxDgoZkd6dcLhY0L1fR5e4MCgyH0B4XNnb27F1ftUiUAZX2L/mJGDb84GKrXHhUqZ85UlMad5OkPAkBZck1P1xNVNVXpXyFpqCa8v7aAM0mBUFF4YWysdywM12VU9baVe97qraqoSol0d0ubeV9bW1NVE1U6VMJEa3NbKoQG5d2mUkbGCrzb/RuR54L0QQL5zRf5dvd0hVWV/p+HpOKv8g5AiiAoGr4ImJB3/sgLIqAJImNVOkLon1d9RK+t6ejjAAAAAElFTkSuQmCC) 100% no-repeat;
  width: 144px;
}

#credits a#dr {
  background: url(data:image/png;base64,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) 100% no-repeat;
  width: 104px;
}

@media (min-width: 920px) {
  #credits a#dr {
    margin-left: 1.1em;
  }
}

@media (prefers-color-scheme: dark) {
  #credits a {
    filter: drop-shadow(0 0 2px #fafafae6);
  }
}

:root {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
  }
}

html {
  color: #111;
  background: linear-gradient(#ddd, #fff 38px) 0 repeat-x;
  min-height: 100vh;
  font: 15px / 1.4 Varela Round, sans-serif;
}

@media (prefers-color-scheme: dark) {
  html {
    color: #fff;
    background: linear-gradient(#181818, #333 38px) 0 repeat-x;
  }
}

a {
  color: #ea4b2a;
  outline: 0;
  text-decoration: none;
  transition: all .1s;
}

a:hover {
  opacity: .75;
}

a:not(.button):focus {
  border: 0 dashed #ea4b2a;
  border-bottom-width: 1px;
}

p {
  margin: 1em 0;
}

video {
  border-radius: 6px;
}

.body {
  white-space: pre-line;
  text-align: left;
  margin: 0 auto 1.6em;
  overflow: auto;
}

h1, h2, h3, h4 {
  letter-spacing: .03em;
}

hr {
  color: #bbb;
  text-align: center;
  border: none;
  border-top: double #bbb;
  margin: 3em auto 0;
  padding: 0;
}

h2 {
  word-wrap: break-word;
  margin: .8em 0 1em;
  font-size: 135%;
}

@media (min-width: 710px) {
  h2 {
    margin: .8em 0 1.6em;
    font-size: 170%;
  }
}

h2 span {
  padding-left: .4em;
  font-size: 70%;
}

h3 {
  text-overflow: ellipsis;
  margin: .6em 0 1.4em;
  font-size: 120%;
  overflow: hidden;
}

@media (min-width: 710px) {
  h3 {
    font-size: 140%;
  }
}

li {
  margin-bottom: .3em;
}

li h3 {
  margin: .9em 0 .6em;
}

dl {
  margin: 0;
}

dt {
  margin: .5em 0 0;
}

dd {
  margin: 0;
}

@media (min-width: 710px) {
  dt, dd {
    display: inline-block;
  }

  dt {
    text-align: right;
    white-space: nowrap;
    width: 40%;
    margin: 0 1% 0 0;
  }

  dd {
    vertical-align: top;
    width: 45%;
  }

  video {
    object-fit: inherit;
  }
}

form {
  vertical-align: top;
}

form textarea {
  resize: vertical;
}

form .multi-email.invalid, form textarea:invalid, form input:not(.multi-email-input):invalid {
  border-color: #ea4b2a;
  box-shadow: 0 0 5px #ea4b2a;
}

form fieldset {
  border: 0;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

@media (min-width: 920px) {
  form fieldset .body {
    overflow-y: auto;
  }

  form fieldset textarea.body {
    height: 7em;
  }
}

form fieldset .body, form fieldset .multi-email, form fieldset input:not(.multi-email-input), form fieldset button, form fieldset textarea {
  margin-bottom: .9em;
  display: block;
}

@media (min-width: 920px) {
  form fieldset .body, form fieldset .multi-email, form fieldset input:not(.multi-email-input), form fieldset button, form fieldset textarea {
    margin-bottom: 1.4em;
  }
}

form fieldset .body, form fieldset .multi-email, form fieldset textarea, form fieldset input[type="email"], form fieldset input[type="text"]:not(.multi-email-input) {
  box-sizing: border-box;
  border: 1px solid #80858a;
  width: 100%;
}

form fieldset .multi-email, form fieldset textarea:not(:read-only), form fieldset input:not(.multi-email-input):not(:read-only) {
  transition: all .1s;
}

form fieldset .multi-email:focus, form fieldset textarea:not(:read-only):focus, form fieldset input:not(.multi-email-input):not(:read-only):focus, form fieldset .multi-email.focused, form fieldset textarea:not(:read-only).focused, form fieldset input:not(.multi-email-input):not(:read-only).focused {
  border: 1px solid #00d814;
  transform: scale(1.01);
}

form fieldset .multi-email:focus:not(.invalid), form fieldset textarea:not(:read-only):focus:not(.invalid), form fieldset input:not(.multi-email-input):not(:read-only):focus:not(.invalid), form fieldset .multi-email.focused:not(.invalid), form fieldset textarea:not(:read-only).focused:not(.invalid), form fieldset input:not(.multi-email-input):not(:read-only).focused:not(.invalid), form fieldset .multi-email:focus:not(:invalid), form fieldset textarea:not(:read-only):focus:not(:invalid), form fieldset input:not(.multi-email-input):not(:read-only):focus:not(:invalid), form fieldset .multi-email.focused:not(:invalid), form fieldset textarea:not(:read-only).focused:not(:invalid), form fieldset input:not(.multi-email-input):not(:read-only).focused:not(:invalid) {
  box-shadow: 0 1px 4px #00d81499;
}

form fieldset .multi-email:focus.invalid, form fieldset textarea:not(:read-only):focus.invalid, form fieldset input:not(.multi-email-input):not(:read-only):focus.invalid, form fieldset .multi-email.focused.invalid, form fieldset textarea:not(:read-only).focused.invalid, form fieldset input:not(.multi-email-input):not(:read-only).focused.invalid, form fieldset .multi-email:focus:invalid, form fieldset textarea:not(:read-only):focus:invalid, form fieldset input:not(.multi-email-input):not(:read-only):focus:invalid, form fieldset .multi-email.focused:invalid, form fieldset textarea:not(:read-only).focused:invalid, form fieldset input:not(.multi-email-input):not(:read-only).focused:invalid {
  border-color: #ea4b2a;
  box-shadow: 0 0 5px #ea4b2a;
}

@media (min-width: 710px) {
  form fieldset .multi-email:focus, form fieldset textarea:not(:read-only):focus, form fieldset input:not(.multi-email-input):not(:read-only):focus, form fieldset .multi-email.focused, form fieldset textarea:not(:read-only).focused, form fieldset input:not(.multi-email-input):not(:read-only).focused {
    transform: scale(1.05);
  }
}

@media (prefers-color-scheme: light) {
  form fieldset .multi-email:read-only, form fieldset textarea:read-only, form fieldset input[type="text"]:not(.multi-email-input):read-only, form fieldset input[type="email"]:read-only, form fieldset .multi-email.readOnly, form fieldset textarea.readOnly, form fieldset input[type="text"]:not(.multi-email-input).readOnly, form fieldset input[type="email"].readOnly {
    background: linear-gradient(to top, #d6d3c5, #d8d7d4 5px);
  }

  form fieldset .multi-email:not(:read-only), form fieldset textarea:not(:read-only), form fieldset input[type="text"]:not(.multi-email-input):not(:read-only), form fieldset input[type="email"]:not(:read-only), form fieldset .multi-email:not(.readOnly), form fieldset textarea:not(.readOnly), form fieldset input[type="text"]:not(.multi-email-input):not(.readOnly), form fieldset input[type="email"]:not(.readOnly) {
    background: linear-gradient(to top, #f6f3e5, #f8f7f4 5px);
  }

  form fieldset .multi-email:not(:read-only):focus, form fieldset textarea:not(:read-only):focus, form fieldset input[type="text"]:not(.multi-email-input):not(:read-only):focus, form fieldset input[type="email"]:not(:read-only):focus, form fieldset .multi-email:not(.readOnly):focus, form fieldset textarea:not(.readOnly):focus, form fieldset input[type="text"]:not(.multi-email-input):not(.readOnly):focus, form fieldset input[type="email"]:not(.readOnly):focus, form fieldset .multi-email:not(:read-only).focused, form fieldset textarea:not(:read-only).focused, form fieldset input[type="text"]:not(.multi-email-input):not(:read-only).focused, form fieldset input[type="email"]:not(:read-only).focused, form fieldset .multi-email:not(.readOnly).focused, form fieldset textarea:not(.readOnly).focused, form fieldset input[type="text"]:not(.multi-email-input):not(.readOnly).focused, form fieldset input[type="email"]:not(.readOnly).focused {
    background: #fff;
  }
}

form fieldset .multi-email {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  flex-wrap: wrap;
  flex: 1 0 auto;
  max-height: 200px;
  display: flex;
  overflow-y: auto;
}

form fieldset .multi-email > input.multi-email-input {
  vertical-align: baseline;
  opacity: 1;
  touch-action: manipulation;
  background: none;
  border: 0;
  flex: 1;
  width: 100%;
  display: inline-block;
}

form fieldset .multi-email [data-label] {
  color: #111;
  background-color: #eaeaea;
  border-radius: 6px;
  justify-content: flex-start;
  align-items: center;
  max-width: 100%;
  margin: .2em .2em .2em 0;
  padding: .2em .4em;
  font-size: .9rem;
  transition: background 10.1s;
  display: flex;
}

form fieldset .multi-email [data-label]:hover {
  opacity: .8;
}

form fieldset .multi-email [data-label] > button {
  box-shadow: none;
  color: #111;
  background: none;
  border: 0;
  border-radius: 0;
  min-width: auto;
  margin: 0 0 0 .2em;
  padding: .2em;
  font-size: 90%;
  line-height: normal;
  display: inline-block;
  transform: none;
}

.hint {
  color: #fff;
  background: #ea4b2a;
  border-radius: 6px;
  margin-top: .5em;
  margin-bottom: 1.2em;
  padding: .5em .75em;
  animation: .5s fade-in;
  display: block;
}

@media (min-width: 920px) {
  .hint {
    z-index: 10;
    width: 10em;
    margin: 0;
    position: absolute;
  }

  .hint:before {
    content: "▲";
    color: #ea4b2a;
    z-index: -1;
    font-size: 2em;
    position: absolute;
  }
}

section.videomail {
  margin: 0 auto .5em;
}

@media (min-width: 710px) {
  section.videomail {
    width: 400px;
    margin-bottom: 1em;
  }

  section.videomail dl {
    width: 400px;
    margin: 2.4em auto .7em;
    font-size: 90%;
    line-height: 1.7em;
  }

  section.videomail dt, section.videomail dd {
    margin: 0;
  }

  section.videomail dt {
    width: 107px;
  }

  section.videomail dd {
    width: 277px;
    padding: 0 0 0 16px;
  }
}

section.videomail h1 {
  margin: .9em 0 .6em;
  font-size: 180%;
  display: block;
}

section.videomail .visuals {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  overflow: hidden;
}

@media (min-width: 710px) {
  section.videomail .visuals {
    height: 300px;
  }
}

section.videomail .visuals video.replay {
  vertical-align: middle;
  animation: .5s fade-in;
}

section.videomail footer .buttons {
  text-align: left;
  max-width: 400px;
}

@media (min-width: 710px) {
  section.videomail footer .buttons {
    text-align: center;
    max-width: none;
  }
}

section.videomail footer .buttons .button {
  margin: 1em 0;
  display: block;
}

@media (min-width: 710px) {
  section.videomail footer .buttons .button {
    width: auto;
    margin-left: .7em;
    margin-right: .7em;
    display: inline-block;
  }
}

section.videomail .note {
  width: 70%;
  margin: 0 auto 1.6em;
  font-size: 95%;
}

section.videomail main .tips {
  display: none;
}

@media (min-width: 710px) {
  section.videomail main .tips {
    opacity: .8;
    text-align: center;
    margin: 2.3em auto 1.3em;
    font-size: 80%;
    line-height: .7;
    display: block;
  }
}

.button, .body.readOnly, button, input, textarea {
  outline: 0;
  font: 15px / 1.4 Varela Round, sans-serif;
}

.button, .body.readOnly, .multi-email, button, input[type="submit"], input[type="text"]:not(.multi-email-input), input[type="email"], textarea {
  border-radius: 6px;
  padding: .45em .65em;
}

.button:disabled, .disabled label, button:disabled, input:disabled, .body.readOnly, fieldset:disabled .multi-email, textarea:disabled {
  opacity: .5;
  transform: inherit;
  cursor: not-allowed !important;
}

form fieldset input[type="radio"], #audioButtons input[type="radio"], form fieldset input[type="checkbox"], #audioButtons input[type="checkbox"] {
  vertical-align: middle;
  margin: 0 5px;
}

.button:not(:disabled):hover, button:not(:disabled):hover, label:not(:disabled):hover, input[type="radio"]:not(:disabled):hover, input[type="checkbox"]:not(:disabled):hover, input[type="submit"]:not(:disabled):hover, .button:not(:disabled):focus, button:not(:disabled):focus, label:not(:disabled):focus, input[type="radio"]:not(:disabled):focus, input[type="checkbox"]:not(:disabled):focus, input[type="submit"]:not(:disabled):focus {
  cursor: pointer;
}

.button, button, input[type="radio"], input[type="checkbox"], input[type="submit"] {
  transition: all .1s;
}

.button:not(:disabled):hover, button:not(:disabled):hover, input[type="radio"]:not(:disabled):hover, input[type="checkbox"]:not(:disabled):hover, input[type="submit"]:not(:disabled):hover, .button:not(:disabled):focus, button:not(:disabled):focus, input[type="radio"]:not(:disabled):focus, input[type="checkbox"]:not(:disabled):focus, input[type="submit"]:not(:disabled):focus {
  opacity: .8;
}

.button:not(:disabled):hover, button:not(:disabled):hover, input[type="radio"]:not(:disabled):hover, input[type="submit"]:not(:disabled):hover, .button:not(:disabled):focus, button:not(:disabled):focus, input[type="radio"]:not(:disabled):focus, input[type="submit"]:not(:disabled):focus {
  transform: scale(1.01);
}

@media (min-width: 710px) {
  .button:not(:disabled):hover, button:not(:disabled):hover, input[type="radio"]:not(:disabled):hover, input[type="submit"]:not(:disabled):hover, .button:not(:disabled):focus, button:not(:disabled):focus, input[type="radio"]:not(:disabled):focus, input[type="submit"]:not(:disabled):focus {
    transform: scale(1.05);
  }
}

input[type="checkbox"]:not(:disabled):hover, input[type="checkbox"]:not(:disabled):focus {
  transform: scale(1.1);
}

@media (min-width: 710px) {
  input[type="checkbox"]:not(:disabled):hover, input[type="checkbox"]:not(:disabled):focus {
    transform: scale(1.25);
  }
}

.button, button:not(.facingMode) {
  min-width: 8em;
}

.button, button, input[type="submit"] {
  color: #fff;
  vertical-align: middle;
  background: #ea4b2a;
  border: 2px solid #111;
  margin: 0;
  padding: .5em .8em;
  line-height: 1;
  display: inline-block;
  box-shadow: 3px 3px #0003;
}

.button:focus, button:focus, input[type="submit"]:focus {
  outline: 0;
}

.button:active, button:active, input[type="submit"]:active {
  box-shadow: inset 3px 3px #0003;
}

@media (prefers-color-scheme: light) {
  input[placeholder], textarea[placeholder] {
    color: #111;
  }
}

.buttons {
  margin: 0;
}

.buttons .button, .buttons button {
  text-align: center;
  min-width: 5em;
}

button, .button {
  vertical-align: middle;
  line-height: 1.8em;
}

button span.icon, .button span.icon {
  font-size: 130%;
}

button span.svg, .button span.svg {
  margin-right: 7px;
  display: inline-block;
}

button span.svg svg, .button span.svg svg {
  vertical-align: middle;
}

.videomail .notifier {
  vertical-align: middle;
  color: #c93314;
  text-align: left;
  border-radius: 6px;
  flex-wrap: wrap;
  align-items: center;
  padding: 20px;
  font-size: 1.5em;
  display: flex;
}

.videomail .notifier:not(.ios-problem) {
  color: #fff;
  background: #000;
}

.videomail .notifier:not(.ios-problem) a {
  color: #fff;
}

@media (min-width: 920px) {
  .videomail .notifier:not(.ios-problem) {
    width: 400px;
    max-width: 400px;
    height: 300px;
  }
}

.videomail .notifier a {
  border-bottom: 2px solid;
}

.videomail .notifier h2 {
  text-align: center;
  width: 100%;
  margin: 0;
  font-size: 115%;
}

.videomail .notifier p {
  text-align: left;
  width: 100%;
  margin: 1.6em 0 0;
  font-size: 90%;
}

.videomail .notifier.entertain {
  vertical-align: top;
  background-color: #0000;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
}

.videomail .notifier.entertain.b1 {
  background-image: url(/static/image/wait1.2f8a1f49.gif);
}

.videomail .notifier.entertain.b2 {
  background-image: url(/static/image/wait2.72a6e6ad.gif);
}

.videomail .notifier.entertain.b3 {
  background-image: url(/static/image/wait3.9d110e53.gif);
}

.videomail .notifier.entertain.b4 {
  background-image: url(/static/image/wait4.81815e5b.gif);
}

.videomail .notifier.entertain.b5 {
  background-image: url(/static/image/wait5.fbc6f7c6.gif);
  background-size: contain;
}

.videomail .notifier.entertain.b6 {
  background-image: url(/static/image/wait6.c2eb1b84.gif);
}

.videomail .notifier.entertain.b7 {
  background-image: url(/static/image/wait7.d63dd62a.gif);
}

.videomail .notifier.entertain.b8 {
  background-image: url(/static/image/wait8.207dc499.gif);
}

.videomail .notifier.entertain.b9 {
  background-image: url(/static/image/wait9.73d1c896.gif);
}

.videomail .notifier.entertain.b10 {
  background-image: url(/static/image/wait10.5de10e1a.gif);
}

.videomail .notifier.entertain.b11 {
  background-image: url(/static/image/wait11.831f0562.gif);
}

.videomail .notifier.entertain.b12 {
  background-image: url(/static/image/wait12.dbb29015.gif);
}

.videomail .notifier.entertain.b13 {
  background-image: url(/static/image/wait13.f5b1111d.gif);
}

.videomail .notifier.entertain h2 {
  width: auto;
  font-size: 100%;
}

.videomail .notifier.entertain h2, .videomail .notifier.entertain p {
  background: #000c;
  border-radius: 6px;
  padding: 6px 8px;
  display: inline-block;
}

.videomail .notifier.entertain p {
  animation: 2.2s infinite zoom;
  position: absolute;
  bottom: 20px;
  right: 20px;
}

h2.response {
  text-align: center;
  margin: 0 0 .8em;
}

@media (min-width: 710px) {
  h2.response {
    text-align: left;
  }
}

#dock2record {
  width: auto;
  margin-top: 1em;
}

#dock2Submit {
  margin-bottom: 0;
}

#recorder {
  text-align: center;
  animation: .5s fade-in;
}

#sendWrapper {
  display: inline-block;
}

#email {
  text-align: center;
  margin: 1em auto 0;
}

#email .dockReference {
  position: relative;
}

#email ul#copiesButtons {
  text-align: left;
  margin: 0;
  padding: 0;
}

#email ul#copiesButtons li {
  padding-right: .5em;
  display: inline-block;
}

#email ul#copiesButtons li button {
  min-width: unset;
  color: #ea4b2a;
  box-shadow: none;
  text-align: left;
  background: none;
  border: 0 dashed #0000;
  border-bottom-width: 1px;
  border-radius: 0;
  margin: 0;
  padding: 0;
  transition: none;
  transform: none;
}

#email ul#copiesButtons li button:focus {
  border-color: #ea4b2a;
}

@media (min-width: 710px) {
  #email {
    text-align: right;
    width: 240px;
    margin-top: 0;
    margin-left: 30px;
    display: inline-block;
  }

  #email .dock {
    text-align: left;
  }

  #email p.body {
    width: 240px;
  }
}

@media (min-width: 920px) {
  #email {
    width: 330px;
  }

  #email ul#copiesButtons {
    padding: 0 0 0 1.5em;
    position: absolute;
    left: 100%;
  }

  #email li {
    padding: 0;
  }

  #email p.body {
    width: 330px;
  }

  #dock2record {
    text-align: left;
    margin: 0;
    position: absolute;
    top: .2em;
    left: -7.5em;
  }

  #dock2record:before {
    top: 10%;
    right: -.7em;
    transform: rotate(90deg);
  }

  .dock {
    width: 8em;
    top: -2.75em;
    right: -11em;
  }

  .dock:before {
    top: 1.3em;
  }

  #dock2Submit {
    text-align: left;
    width: 9.5em;
    top: 0;
    right: -12.2em;
  }

  #dock2Submit:before {
    bottom: .3em;
  }

  .dock:before, #dock2Submit:before {
    left: -.7em;
    transform: rotate(270deg);
  }

  .dock span, #dock2Submit span {
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
  }

  #sendWrapper {
    float: right;
  }
}

#videomail {
  text-align: center;
  margin: auto;
}

@media (min-width: 710px) {
  #videomail {
    vertical-align: top;
    width: 400px;
    display: inline-block;
  }
}

#videomail section.buttons {
  text-align: center;
  margin: .7em auto;
  position: relative;
}

@media (min-width: 710px) {
  #videomail section.buttons {
    margin: .7em auto 2em;
  }
}

@media (min-width: 920px) {
  #videomail section.buttons {
    margin: 1em auto 0;
  }
}

#videomail section.buttons button {
  margin: .4em .8em;
}

#videomail section.buttons p#audioButtons {
  margin-bottom: 0;
}

#videomail section.buttons p#audioButtons .radioGroup {
  text-align: left;
  white-space: nowrap;
  width: 9em;
  margin: .7em auto .5em;
  font-size: 92%;
  display: block;
}

#videomail section.buttons p#audioButtons .radioGroup label {
  vertical-align: middle;
}

#videomail .visuals {
  margin: 0 auto;
}

@media (min-width: 710px) {
  #videomail .visuals {
    border-radius: 6px;
    height: 300px;
  }
}

#videomail .visuals video.replay {
  max-height: 300px;
}

#videomail .visuals video.userMedia {
  background: #e0e5ea;
}

#videomail .visuals noscript {
  opacity: .75;
  color: #ea4b2a;
  top: 0;
  left: 0;
}

#videomail .visuals .countdown {
  color: #00d814;
  font-size: 1000%;
}

@media (min-width: 710px) {
  #videomail .visuals .countdown {
    font-size: 1300%;
  }
}

#videomail .visuals .paused {
  color: #ea4b2a;
  font-size: 3vw;
}

@media (min-width: 710px) {
  #videomail .visuals .paused {
    font-size: 140%;
  }
}

#videomail .visuals .recordTimer, #videomail .visuals .recordNote {
  border-radius: 6px;
  font-size: 120%;
}

#changelog {
  padding: 0;
  list-style-type: none;
}

#changelog li {
  margin-bottom: .5em;
}

#changelog h3 {
  margin: 1em 0 .6em;
  font-size: 125%;
}

@media (min-width: 710px) {
  #changelog h3 {
    margin: 1.4em 0 1em;
    font-size: 150%;
  }
}

#changelog h3 a:before {
  content: "►";
  text-align: center;
  color: #ea4b2a;
  vertical-align: text-bottom;
  width: 1.5em;
  font-size: .9em;
  display: inline-block;
}

p.code {
  margin: 1em 0;
  font-family: monospace;
  display: block;
}

@media (min-width: 710px) {
  #e401:before, #e403:before, #e404:before, #e410:before, #e422:before, #e500:before, #e502:before, #e503:before, #e504:before {
    opacity: .07;
    z-index: -1;
    font-size: 1200%;
    line-height: 1;
    position: absolute;
    bottom: 5%;
    right: 5%;
    overflow: hidden;
  }

  #e401:before {
    content: "401";
  }

  #e403:before {
    content: "403";
  }

  #e404:before {
    content: "404";
  }

  #e410:before {
    content: "410";
  }

  #e422:before {
    content: "422";
  }

  #e500:before {
    content: "500";
  }

  #e502:before {
    content: "502";
  }

  #e503:before {
    content: "503";
  }

  #e504:before {
    content: "504";
  }
}

h3.question {
  margin: 1.9em 0 1.2em;
  font-style: italic;
}

@media (min-width: 710px) {
  h3.question {
    font-size: 150%;
  }
}

div.answer {
  margin: 0 1.3em;
}

@media (min-width: 710px) {
  div.answer {
    margin: 0 0 0 1.6em;
  }
}

#donation {
  float: right;
  margin: -.4em 0 0 1.4em;
}

@media (min-width: 710px) {
  #donation {
    margin: -.8em 0 0 2.2em;
  }
}

#donation input[type="image"] {
  cursor: pointer;
  transition: all .1s;
}

#donation input[type="image"]:hover {
  transform: scale(1.05);
}

.note {
  font-size: 85%;
}

#report {
  animation: .5s fade-in;
}

#report div.notes h4 {
  margin-bottom: .7em;
}

#report div.notes ul {
  margin: 0;
}

ol#videomails {
  margin: 0;
  padding: 0;
  list-style: none;
}

ol#videomails li {
  animation: fade-in calc(.5s * var(--index));
  margin: 0;
}

ol#videomails li hr {
  width: 400px;
}

#whitelist, #whitelist-thanks {
  width: 70%;
}

#whitelist h2, #whitelist-thanks h2 {
  margin-bottom: 1em;
}

#whitelist input#siteName, #whitelist-thanks input#siteName, #whitelist textarea#origins, #whitelist-thanks textarea#origins, #whitelist #enableAudioWrapper, #whitelist-thanks #enableAudioWrapper {
  margin-bottom: .3em;
}

#whitelist p.example, #whitelist-thanks p.example {
  opacity: .8;
  margin: 0 0 1.8em .5em;
  font-size: 80%;
}

#whitelist p.error, #whitelist-thanks p.error {
  color: #ea4b2a;
  margin: 2em 0 .5em;
  font-weight: bold;
}

#whitelist-thanks {
  width: 50%;
  margin: 3em auto;
}

#whitelist {
  margin: 0 auto;
}

#whitelist #wordPressBoxWrapper {
  margin-bottom: 1.4em;
}

#whitelist #enableAudioWrapper, #whitelist #wordPressBoxWrapper {
  font-size: 92%;
}

#whitelist #enableAudioWrapper input, #whitelist #wordPressBoxWrapper input, #whitelist #enableAudioWrapper button, #whitelist #wordPressBoxWrapper button {
  display: inline-block;
}

#whitelist #enableAudioWrapper label, #whitelist #wordPressBoxWrapper label {
  vertical-align: middle;
}

@media print {
  html {
    background: #fff;
    border: initial !important;
  }

  html:after {
    content: initial !important;
  }

  body > header {
    text-align: center;
  }

  body > header h1 {
    margin-bottom: 0;
  }

  body > header h1 a {
    text-indent: initial;
    text-align: center;
    background: none;
    width: auto;
    height: auto;
  }

  #slogan {
    margin: 0 0 1em;
    display: block !important;
  }

  section.videomail div.video {
    text-align: initial;
  }

  footer ul {
    display: none;
  }

  footer #credits {
    margin-bottom: 0 !important;
  }

  footer #credits a#bk {
    vertical-align: initial;
    text-indent: initial;
    background: none;
    width: auto;
    height: auto;
  }
}