@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Teko&display=swap");
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
@import url("https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Permanent+Marker&family=Raleway:wght@200..900&family=Shadows+Into+Light+Two&display=swap");
.pod_wrapper {
  /**
   * Remove default margin.
   */
  /* HTML5 display definitions
     ========================================================================== */
  /**
   * Correct `block` display not defined for any HTML5 element in IE 8/9.
   * Correct `block` display not defined for `details` or `summary` in IE 10/11
   * and Firefox.
   * Correct `block` display not defined for `main` in IE 11.
   */
  /**
   * 1. Correct `inline-block` display not defined in IE 8/9.
   * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
   */
  /**
   * Prevent modern browsers from displaying `audio` without controls.
   * Remove excess height in iOS 5 devices.
   */
  /**
   * Address `[hidden]` styling not present in IE 8/9/10.
   * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
   */
  /* Links
     ========================================================================== */
  /**
   * Remove the gray background color from active links in IE 10.
   */
  /**
   * Improve readability when focused and also mouse hovered in all browsers.
   */
  /* Text-level semantics
     ========================================================================== */
  /**
   * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
   */
  /**
   * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
   */
  /**
   * Address styling not present in Safari and Chrome.
   */
  /**
   * Address variable `h1` font-size and margin within `section` and `article`
   * contexts in Firefox 4+, Safari, and Chrome.
   */
  /**
   * Address styling not present in IE 8/9.
   */
  /**
   * Address inconsistent and variable font size in all browsers.
   */
  /**
   * Prevent `sub` and `sup` affecting `line-height` in all browsers.
   */
  /* Embedded content
     ========================================================================== */
  /**
   * Remove border when inside `a` element in IE 8/9/10.
   */
  /**
   * Correct overflow not hidden in IE 9/10/11.
   */
  /* Grouping content
     ========================================================================== */
  /**
   * Address margin not present in IE 8/9 and Safari.
   */
  /**
   * Address differences between Firefox and other browsers.
   */
  /**
   * Contain overflow in all browsers.
   */
  /**
   * Address odd `em`-unit font size rendering in all browsers.
   */
  /* Forms
     ========================================================================== */
  /**
   * Known limitation: by default, Chrome and Safari on OS X allow very limited
   * styling of `select`, unless a `border` property is set.
   */
  /**
   * 1. Correct color not being inherited.
   *    Known issue: affects color of disabled elements.
   * 2. Correct font properties not being inherited.
   * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
   */
  /**
   * Address `overflow` set to `hidden` in IE 8/9/10/11.
   */
  /**
   * Address inconsistent `text-transform` inheritance for `button` and `select`.
   * All other form control elements do not inherit `text-transform` values.
   * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
   * Correct `select` style inheritance in Firefox.
   */
  /**
   * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
   *    and `video` controls.
   * 2. Correct inability to style clickable `input` types in iOS.
   * 3. Improve usability and consistency of cursor style between image-type
   *    `input` and others.
   */
  /**
   * Re-set default cursor for disabled elements.
   */
  /**
   * Remove inner padding and border in Firefox 4+.
   */
  /**
   * Address Firefox 4+ setting `line-height` on `input` using `!important` in
   * the UA stylesheet.
   */
  /**
   * It's recommended that you don't attempt to style these elements.
   * Firefox's implementation doesn't respect box-sizing, padding, or width.
   *
   * 1. Address box sizing set to `content-box` in IE 8/9/10.
   * 2. Remove excess padding in IE 8/9/10.
   */
  /**
   * Fix the cursor style for Chrome's increment/decrement buttons. For certain
   * `font-size` values of the `input`, it causes the cursor style of the
   * decrement button to change from `default` to `text`.
   */
  /**
   * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
   * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
   *    (include `-moz` to future-proof).
   */
  /**
   * Remove inner padding and search cancel button in Safari and Chrome on OS X.
   * Safari (but not Chrome) clips the cancel button when the search input has
   * padding (and `textfield` appearance).
   */
  /**
   * Define consistent border, margin, and padding.
   */
  /**
   * 1. Correct `color` not being inherited in IE 8/9/10/11.
   * 2. Remove padding so people aren't caught out if they zero out fieldsets.
   */
  /**
   * Remove default vertical scrollbar in IE 8/9/10/11.
   */
  /**
   * Don't inherit the `font-weight` (applied by a rule above).
   * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
   */
  /* Tables
     ========================================================================== */
  /**
   * Remove most spacing between table cells.
   */
}
.pod_wrapper html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
.pod_wrapper body {
  margin: 0;
}
.pod_wrapper article,
.pod_wrapper aside,
.pod_wrapper details,
.pod_wrapper figcaption,
.pod_wrapper figure,
.pod_wrapper footer,
.pod_wrapper header,
.pod_wrapper hgroup,
.pod_wrapper main,
.pod_wrapper menu,
.pod_wrapper nav,
.pod_wrapper section,
.pod_wrapper summary {
  display: block;
}
.pod_wrapper audio,
.pod_wrapper canvas,
.pod_wrapper progress,
.pod_wrapper video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}
.pod_wrapper audio:not([controls]) {
  display: none;
  height: 0;
}
.pod_wrapper [hidden],
.pod_wrapper template {
  display: none;
}
.pod_wrapper a {
  background-color: transparent;
}
.pod_wrapper a:active,
.pod_wrapper a:hover {
  outline: 0;
}
.pod_wrapper abbr[title] {
  border-bottom: 1px dotted;
}
.pod_wrapper b,
.pod_wrapper strong {
  font-weight: bold;
}
.pod_wrapper dfn {
  font-style: italic;
}
.pod_wrapper h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
.pod_wrapper mark {
  background: #ff0;
  color: #000;
}
.pod_wrapper small {
  font-size: 80%;
}
.pod_wrapper sub,
.pod_wrapper sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.pod_wrapper sup {
  top: -0.5em;
}
.pod_wrapper sub {
  bottom: -0.25em;
}
.pod_wrapper img {
  border: 0;
}
.pod_wrapper svg:not(:root) {
  overflow: hidden;
}
.pod_wrapper figure {
  margin: 1em 40px;
}
.pod_wrapper hr {
  box-sizing: content-box;
  height: 0;
}
.pod_wrapper pre {
  overflow: auto;
}
.pod_wrapper code,
.pod_wrapper kbd,
.pod_wrapper pre,
.pod_wrapper samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
.pod_wrapper button,
.pod_wrapper input,
.pod_wrapper optgroup,
.pod_wrapper select,
.pod_wrapper textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}
.pod_wrapper button {
  overflow: visible;
}
.pod_wrapper button,
.pod_wrapper select {
  text-transform: none;
}
.pod_wrapper button,
.pod_wrapper html input[type=button],
.pod_wrapper input[type=reset],
.pod_wrapper input[type=submit] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}
.pod_wrapper button[disabled],
.pod_wrapper html input[disabled] {
  cursor: default;
}
.pod_wrapper button::-moz-focus-inner,
.pod_wrapper input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.pod_wrapper input {
  line-height: normal;
}
.pod_wrapper input[type=checkbox],
.pod_wrapper input[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
.pod_wrapper input[type=number]::-webkit-inner-spin-button,
.pod_wrapper input[type=number]::-webkit-outer-spin-button {
  height: auto;
}
.pod_wrapper input[type=search] {
  -webkit-appearance: textfield; /* 1 */ /* 2 */
  box-sizing: content-box;
}
.pod_wrapper input[type=search]::-webkit-search-cancel-button,
.pod_wrapper input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}
.pod_wrapper fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
.pod_wrapper legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}
.pod_wrapper textarea {
  overflow: auto;
}
.pod_wrapper optgroup {
  font-weight: bold;
}
.pod_wrapper table {
  border-collapse: collapse;
  border-spacing: 0;
}
.pod_wrapper td,
.pod_wrapper th {
  padding: 0;
}

.pod_wrapper .container {
  position: relative;
  width: 100%;
  max-width: 75vw;
  margin: 0 auto;
  padding: 2vh 20px;
  box-sizing: border-box;
}
.pod_wrapper .column,
.pod_wrapper .columns {
  width: 100%;
  float: left;
  box-sizing: border-box;
}
@media (min-width: 400px) {
  .pod_wrapper .container {
    width: 100%;
    padding: 2vh 0;
  }
}
@media (min-width: 550px) {
  .pod_wrapper .container {
    width: 100%;
  }
  .pod_wrapper .column,
  .pod_wrapper .columns {
    margin-left: 4%;
  }
  .pod_wrapper .column:first-child,
  .pod_wrapper .columns:first-child {
    margin-left: 0;
  }
  .pod_wrapper .one.column,
  .pod_wrapper .one.columns {
    width: 4.6666666667%;
  }
  .pod_wrapper .two.columns {
    width: 13.3333333333%;
  }
  .pod_wrapper .three.columns {
    width: 22%;
  }
  .pod_wrapper .four.columns {
    width: 30.6666666667%;
  }
  .pod_wrapper .five.columns {
    width: 39.3333333333%;
  }
  .pod_wrapper .six.columns {
    width: 48%;
  }
  .pod_wrapper .seven.columns {
    width: 56.6666666667%;
  }
  .pod_wrapper .eight.columns {
    width: 65.3333333333%;
  }
  .pod_wrapper .nine.columns {
    width: 74%;
  }
  .pod_wrapper .ten.columns {
    width: 82.6666666667%;
  }
  .pod_wrapper .eleven.columns {
    width: 91.3333333333%;
  }
  .pod_wrapper .twelve.columns {
    width: 100%;
    margin-left: 0;
  }
  .pod_wrapper .one-third.column {
    width: 30.6666666667%;
  }
  .pod_wrapper .two-thirds.column {
    width: 65.3333333333%;
  }
  .pod_wrapper .one-half.column {
    width: 48%;
  }
  .pod_wrapper .offset-by-one.column,
  .pod_wrapper .offset-by-one.columns {
    margin-left: 8.6666666667%;
  }
  .pod_wrapper .offset-by-two.column,
  .pod_wrapper .offset-by-two.columns {
    margin-left: 17.3333333333%;
  }
  .pod_wrapper .offset-by-three.column,
  .pod_wrapper .offset-by-three.columns {
    margin-left: 26%;
  }
  .pod_wrapper .offset-by-four.column,
  .pod_wrapper .offset-by-four.columns {
    margin-left: 34.6666666667%;
  }
  .pod_wrapper .offset-by-five.column,
  .pod_wrapper .offset-by-five.columns {
    margin-left: 43.3333333333%;
  }
  .pod_wrapper .offset-by-six.column,
  .pod_wrapper .offset-by-six.columns {
    margin-left: 52%;
  }
  .pod_wrapper .offset-by-seven.column,
  .pod_wrapper .offset-by-seven.columns {
    margin-left: 60.6666666667%;
  }
  .pod_wrapper .offset-by-eight.column,
  .pod_wrapper .offset-by-eight.columns {
    margin-left: 69.3333333333%;
  }
  .pod_wrapper .offset-by-nine.column,
  .pod_wrapper .offset-by-nine.columns {
    margin-left: 78%;
  }
  .pod_wrapper .offset-by-ten.column,
  .pod_wrapper .offset-by-ten.columns {
    margin-left: 86.6666666667%;
  }
  .pod_wrapper .offset-by-eleven.column,
  .pod_wrapper .offset-by-eleven.columns {
    margin-left: 95.3333333333%;
  }
  .pod_wrapper .offset-by-one-third.column,
  .pod_wrapper .offset-by-one-third.columns {
    margin-left: 34.6666666667%;
  }
  .pod_wrapper .offset-by-two-thirds.column,
  .pod_wrapper .offset-by-two-thirds.columns {
    margin-left: 69.3333333333%;
  }
  .pod_wrapper .offset-by-one-half.column,
  .pod_wrapper .offset-by-one-half.columns {
    margin-left: 52%;
  }
}
.pod_wrapper html {
  font-size: 62.5%;
}
.pod_wrapper body {
  font-size: 1.5em;
  line-height: 1.6;
  font-weight: 400;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222;
}
.pod_wrapper h1, .pod_wrapper h2, .pod_wrapper h3, .pod_wrapper h4, .pod_wrapper h5, .pod_wrapper h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300;
  font-family: "oswald", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.pod_wrapper h1 {
  font-size: 4rem;
  line-height: 1.2;
  letter-spacing: -0.1rem;
}
.pod_wrapper h2 {
  font-size: 3.6rem;
  line-height: 1.25;
  letter-spacing: -0.1rem;
}
.pod_wrapper h3 {
  font-size: 3rem;
  line-height: 1.3;
  letter-spacing: -0.1rem;
}
.pod_wrapper h4 {
  font-size: 2.4rem;
  line-height: 1.35;
  letter-spacing: -0.08rem;
}
.pod_wrapper h5 {
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: -0.05rem;
}
.pod_wrapper h6 {
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: 0;
}
@media (min-width: 550px) {
  .pod_wrapper h1 {
    font-size: 5rem;
  }
  .pod_wrapper h2 {
    font-size: 4.2rem;
  }
  .pod_wrapper h3 {
    font-size: 3.6rem;
  }
  .pod_wrapper h4 {
    font-size: 3rem;
  }
  .pod_wrapper h5 {
    font-size: 2.4rem;
  }
  .pod_wrapper h6 {
    font-size: 1.5rem;
  }
}
.pod_wrapper p {
  margin-top: 0;
}
.pod_wrapper a {
  color: #1EAEDB;
}
.pod_wrapper a:hover {
  color: #0FA0CE;
}
.pod_wrapper .button,
.pod_wrapper button,
.pod_wrapper input[type=submit],
.pod_wrapper input[type=reset],
.pod_wrapper input[type=button] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box;
}
.pod_wrapper .button:hover,
.pod_wrapper button:hover,
.pod_wrapper input[type=submit]:hover,
.pod_wrapper input[type=reset]:hover,
.pod_wrapper input[type=button]:hover,
.pod_wrapper .button:focus,
.pod_wrapper button:focus,
.pod_wrapper input[type=submit]:focus,
.pod_wrapper input[type=reset]:focus,
.pod_wrapper input[type=button]:focus {
  color: #333;
  border-color: #888;
  outline: 0;
}
.pod_wrapper .button.button-primary,
.pod_wrapper button.button-primary,
.pod_wrapper input[type=submit].button-primary,
.pod_wrapper input[type=reset].button-primary,
.pod_wrapper input[type=button].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0;
}
.pod_wrapper .button.button-primary:hover,
.pod_wrapper button.button-primary:hover,
.pod_wrapper input[type=submit].button-primary:hover,
.pod_wrapper input[type=reset].button-primary:hover,
.pod_wrapper input[type=button].button-primary:hover,
.pod_wrapper .button.button-primary:focus,
.pod_wrapper button.button-primary:focus,
.pod_wrapper input[type=submit].button-primary:focus,
.pod_wrapper input[type=reset].button-primary:focus,
.pod_wrapper input[type=button].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB;
}
.pod_wrapper input[type=email],
.pod_wrapper input[type=number],
.pod_wrapper input[type=search],
.pod_wrapper input[type=text],
.pod_wrapper input[type=tel],
.pod_wrapper input[type=url],
.pod_wrapper input[type=password],
.pod_wrapper textarea,
.pod_wrapper select {
  height: 38px;
  padding: 6px 10px;
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
}
.pod_wrapper input[type=email],
.pod_wrapper input[type=number],
.pod_wrapper input[type=search],
.pod_wrapper input[type=text],
.pod_wrapper input[type=tel],
.pod_wrapper input[type=url],
.pod_wrapper input[type=password],
.pod_wrapper textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.pod_wrapper textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.pod_wrapper input[type=email]:focus,
.pod_wrapper input[type=number]:focus,
.pod_wrapper input[type=search]:focus,
.pod_wrapper input[type=text]:focus,
.pod_wrapper input[type=tel]:focus,
.pod_wrapper input[type=url]:focus,
.pod_wrapper input[type=password]:focus,
.pod_wrapper textarea:focus,
.pod_wrapper select:focus {
  border: 1px solid #33C3F0;
  outline: 0;
}
.pod_wrapper label,
.pod_wrapper legend {
  display: block;
  font-weight: 600;
}
.pod_wrapper fieldset {
  padding: 0;
  border-width: 0;
}
.pod_wrapper input[type=checkbox],
.pod_wrapper input[type=radio] {
  display: inline;
}
.pod_wrapper label > .label-body {
  display: inline-block;
  margin-left: 0.5rem;
  font-weight: normal;
}
.pod_wrapper ul {
  list-style: circle inside;
}
.pod_wrapper ol {
  list-style: decimal inside;
}
.pod_wrapper ol, .pod_wrapper ul {
  padding-left: 0;
  margin-top: 0;
}
.pod_wrapper ul ul,
.pod_wrapper ul ol,
.pod_wrapper ol ol,
.pod_wrapper ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%;
}
.pod_wrapper li {
  margin-bottom: 1rem;
}
.pod_wrapper code {
  padding: 0.2rem 0.5rem;
  margin: 0 0.2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px;
}
.pod_wrapper pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre;
}
.pod_wrapper th,
.pod_wrapper td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1;
}
.pod_wrapper th:first-child,
.pod_wrapper td:first-child {
  padding-left: 0;
}
.pod_wrapper th:last-child,
.pod_wrapper td:last-child {
  padding-right: 0;
}
.pod_wrapper button,
.pod_wrapper .button {
  margin-bottom: 1rem;
}
.pod_wrapper input,
.pod_wrapper textarea,
.pod_wrapper select,
.pod_wrapper fieldset {
  margin-bottom: 1.5rem;
}
.pod_wrapper pre,
.pod_wrapper blockquote,
.pod_wrapper dl,
.pod_wrapper figure,
.pod_wrapper table,
.pod_wrapper p,
.pod_wrapper ul,
.pod_wrapper ol,
.pod_wrapper form {
  margin-bottom: 2.5rem;
}
.pod_wrapper .u-full-width {
  width: 100%;
  box-sizing: border-box;
}
.pod_wrapper .u-max-full-width {
  max-width: 100%;
  box-sizing: border-box;
}
.pod_wrapper .u-pull-right {
  float: right;
}
.pod_wrapper .u-pull-left {
  float: left;
}
.pod_wrapper hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1;
}
.pod_wrapper .container:after,
.pod_wrapper .row:after,
.pod_wrapper .u-cf {
  content: "";
  display: table;
  clear: both;
}
.trans_slow {
  transition: all 1s ease-in-out;
}

.trans_default {
  transition: all 0.5s ease-in-out;
}

.red {
  color: #871d18;
}

.red_alt {
  color: rgb(119, 18, 19);
}

.tan {
  color: #CCC7B9;
}

.gray {
  color: #56666B;
}

.gray_trans {
  color: rgba(84, 106, 123, 0.38);
}

.gray_lt {
  color: #677078;
}

.blue {
  color: #13293D;
}

.black {
  color: #07020D;
}

.tan2 {
  color: #BEB7A4;
}

.blue2 {
  color: #416788;
}

.gray2 {
  color: #313131;
}

.gray3 {
  color: #89949E;
}

.off_white {
  color: #ecede9;
}

.nice_gray {
  color: #a9a9a9;
}

.white {
  color: #FFFFFF;
}

.text {
  color: #444444;
}

.nav {
  color: #ecede9;
}

html {
  font-size: 62.5%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: "Raleway", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: 0.05rem;
  color: #444444;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2 {
  text-transform: uppercase;
}

h2 {
  font-size: 4.5rem;
}

h3 {
  padding: 0;
  margin: 0;
  line-height: 1.1;
}
h3 span {
  font-family: "Open Sans", sans-serif;
  font-size: 35%;
  color: #444444;
}

h4 {
  font-size: 1.425cqw;
}

h5 {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
  color: rgb(119, 18, 19);
  font-size: 3.5rem;
  line-height: 1.1;
  letter-spacing: 0.05rem;
}
h5:first-of-type {
  font-size: 2.5rem;
  line-height: 1;
}

h6 {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  margin: 0;
  padding: 0.5rem 0 0.75rem;
}
h6.variance {
  font-family: "Architects Daughter", cursive;
  font-weight: 500;
  font-style: normal;
  text-transform: capitalize;
  font-size: 2rem;
  letter-spacing: 0.05rem;
}

.dunno {
  font-family: "Shadows Into Light Two", cursive;
  font-weight: 400;
  font-style: normal;
}

ol,
ul {
  margin-left: 2rem;
}
ol li,
ul li {
  font-size: 1.75rem;
}
ol.instructions li,
ul.instructions li {
  font-size: 1.25rem;
}

nav ul li {
  font-size: 1.75rem;
  white-space: nowrap;
}

#toggleButton {
  font-size: 3.5rem;
}

body.impact {
  background-color: #2f2f2f;
  margin: 0;
  padding: 0 0 20vh;
  border-collapse: collapse;
  /* =========================
     Dot “placing” UX
     ========================= */
  /* Background layer (uses --dot-bg captured from computed background color) */
  /* Tiny center pin dot (default hidden) */
  /* While placing (dragging) */
  /* 60% alpha background */
  /* show pin dot */
  /* hide arrow number */
  /* Arrow buttons */
  /* Small meta text */
}
body.impact section.container {
  padding: 2vh 0.75rem;
}
body.impact section.container:first-of-type {
  padding-top: 0;
}
body.impact section.container.target {
  padding: 0;
}
@media screen and (min-width: 1000px) {
  body.impact section.container {
    padding: 2vh 1.5rem;
  }
}
body.impact #activeGroupStatus {
  color: rgb(150, 150, 150);
  font-size: 1rem;
  line-height: 1.4;
  font-style: italic;
}
body.impact h1 {
  font-size: 3rem;
  color: #fff;
}
body.impact body.impact #image-container {
  position: relative;
  width: 100vw; /* or whatever you used before */
  max-width: 100vw;
  height: 100vw;
  max-height: 100vw;
  aspect-ratio: 1/1; /* if all targets are square; otherwise remove */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; /* critical: matches your old <img> fit */
  touch-action: none; /* for pointer dragging */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  outline: 2px solid #ccc;
  outline-offset: -2px;
}
body.impact .container.target {
  width: 100%;
  margin: 0 auto;
}
body.impact p {
  color: white;
}
body.impact img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}
body.impact .circle {
  position: absolute;
  width: 2.5vw;
  height: 2.5vw;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.875rem;
  line-height: 1;
  pointer-events: none;
  font-family: "Teko", monospace;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.65);
  border: 1px solid #fff;
}
body.impact .circle.yellow {
  border: 1px solid #fff;
}
body.impact label {
  color: #fff;
}
body.impact input, body.impact select {
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  border: 0;
  min-height: 3.25rem;
  font-size: 1.5rem;
  background: rgb(240, 240, 240);
  color: #000;
}
body.impact input {
  text-align: center;
}
body.impact button {
  padding: 0.5rem;
  font-size: 1.25rem;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid rgb(50, 50, 50);
  margin: 0.5rem 0.5rem 0.25rem;
  margin: 0;
  min-width: 5rem;
  min-height: 2.5rem;
  color: #fff;
  background-color: rgba(50, 50, 50, 0.2);
  cursor: pointer;
}
body.impact button:hover {
  border: 1px solid yellow;
}
body.impact #save-set {
  color: green;
  background-color: rgba(0, 0, 0, 0);
  border: 0px;
  font-size: 3rem;
  padding: 0;
}
body.impact #export {
  color: purple;
}
body.impact #clear-hits {
  color: darkorange;
}
body.impact #clear-all {
  color: #c90000;
}
body.impact .buttons {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 0.5rem 0 1rem;
  width: 100%;
  position: fixed;
  left: 0;
  z-index: 10000;
  bottom: 0;
  background-color: rgb(0, 0, 0);
}
body.impact .buttons .button-row {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin: 0.25rem 0;
  gap: 0.5rem;
  align-items: baseline;
}
body.impact .buttons .button-row .button-row label {
  padding-right: 1rem;
}
body.impact .buttons .button-row button {
  line-height: 1.4;
  font-size: 2rem;
  border-radius: 100%;
  min-width: 5rem;
  min-height: 5rem;
  background: none;
  border: 2px solid rgb(137, 1, 0);
  box-shadow: -2px 2px 7px rgb(137, 1, 0);
}
body.impact .buttons .button-row button.dark {
  border: 2px solid #000;
  color: #000;
  box-shadow: -2px 2px 7px rgba(137, 1, 0, 0.8);
}
body.impact .buttons .button-row button.dark:hover {
  background: #000;
  color: #000;
}
body.impact .buttons .button-row button.yellow {
  border: 2px solid #ffc100;
  color: #ffc100;
  box-shadow: -2px 2px 7px rgba(137, 1, 0, 0.8);
}
body.impact .buttons .button-row button.yellow:hover {
  background: #ffc100;
  color: #000;
}
body.impact .buttons .button-row button.blue {
  border: 2px solid rgb(43, 69, 112);
  color: rgb(43, 69, 112);
  box-shadow: -2px 2px 7px rgba(137, 1, 0, 0.8);
}
body.impact .buttons .button-row button.blue:hover {
  background: rgb(43, 69, 112);
  color: #000;
}
body.impact .buttons .button-row button.green {
  border: 2px solid rgb(4, 240, 106);
  color: rgb(4, 240, 106);
  box-shadow: -2px 2px 7px rgba(137, 1, 0, 0.8);
}
body.impact .buttons .button-row button.green:hover {
  background: rgb(4, 240, 106);
  color: #000;
}
body.impact .buttons .button-row button.orange {
  border: 2px solid rgb(220, 96, 46);
  color: rgb(220, 96, 46);
  box-shadow: -2px 2px 7px rgba(137, 1, 0, 0.8);
}
body.impact .buttons .button-row button.orange:hover {
  background: rgb(220, 96, 46);
  color: #000;
}
body.impact .buttons .button-row button.lime {
  border: 2px solid limegreen;
  color: limegreen;
  box-shadow: -2px 2px 7px rgba(137, 1, 0, 0.8);
}
body.impact .buttons .button-row button.lime:hover {
  background: limegreen;
  color: #000;
}
body.impact .buttons .button-row button.pink {
  border: 2px solid hotpink;
  color: hotpink;
  box-shadow: -2px 2px 7px rgba(137, 1, 0, 0.8);
}
body.impact .buttons .button-row button.pink:hover {
  background: hotpink;
  color: #000;
}
body.impact .buttons .button-row button.white {
  border: 2px solid #fff;
  color: #fff;
  box-shadow: -2px 2px 7px rgba(137, 1, 0, 0.8);
}
body.impact .buttons .button-row button.white:hover {
  background: #fff;
  color: #000;
}
body.impact .buttons .button-row button.red {
  border: 2px solid #c90000;
  color: #c90000;
  box-shadow: -2px 2px 7px rgba(137, 1, 0, 0.8);
}
body.impact .buttons .button-row button.red:hover {
  background: #c90000;
  color: #000;
}
body.impact .buttons .button-row button.gray {
  border: 2px solid rgb(150, 150, 150);
  color: rgb(150, 150, 150);
  box-shadow: -2px 2px 7px rgba(137, 1, 0, 0.8);
}
body.impact .buttons .button-row button.gray:hover {
  background: rgb(150, 150, 150);
  color: #000;
}
body.impact .buttons .button-row button.gold {
  border: 2px solid rgb(176, 144, 61);
  color: rgb(176, 144, 61);
  box-shadow: -2px 2px 7px rgba(137, 1, 0, 0.8);
}
body.impact .buttons .button-row button.gold:hover {
  background: rgb(176, 144, 61);
  color: #000;
}
body.impact .buttons .button-row button.purple {
  border: 2px solid purple;
  color: purple;
  box-shadow: -2px 2px 7px rgba(137, 1, 0, 0.8);
}
body.impact .buttons .button-row button.purple:hover {
  background: purple;
  color: #000;
}
body.impact .grp-btn-row {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
}
body.impact .grp-btn-row div {
  flex-basis: 47%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}
body.impact .grp-btn-row div button {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
}
body.impact .grp-btn-row div button:hover {
  border: 0;
  filter: saturate(150%);
}
body.impact .grp-btn-row div #btnStartGroup {
  background-color: #3E5500;
  color: #fff;
  border-radius: 4px;
}
body.impact .grp-btn-row div #btnEndGroup {
  background-color: rgb(220, 96, 46);
  color: #000;
  border-radius: 4px;
}
body.impact .grp-btn-row div button, body.impact .grp-btn-row div span {
  flex-basis: 100%;
}
body.impact .ip_config {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}
body.impact .ip_config .ip_col label {
  color: #ecede9;
  text-transform: capitalize;
  font-weight: 200;
  font-size: 1rem;
  text-transform: lowercase;
}
body.impact .ip_config .ip_col.gen_buttons {
  flex-basis: 40%;
  display: flex;
  flex-direction: column;
}
body.impact .ip_config .ip_col.gen_buttons button {
  width: 90%;
  margin-bottom: 1.5rem;
  border-radius: 4px;
  line-height: 1.4;
}
body.impact .ip_config .ip_col.input_grp {
  flex-basis: 44%;
  display: flex;
  flex-direction: column;
}
body.impact .ip_config .ip_col.input_grp input,
body.impact .ip_config .ip_col.input_grp select {
  width: 100%;
  flex-basis: 100%;
  font-size: 1.25rem;
  font-weight: 400;
  border-radius: 4px;
}
body.impact .ip_config .ip_col.input_grp input[type=text],
body.impact .ip_config .ip_col.input_grp input[type=number],
body.impact .ip_config .ip_col.input_grp select {
  border-radius: 4px;
  text-align: center;
  background: #2f2f2f;
  color: #ecede9;
  border: 1px solid rgb(100, 100, 100);
  font-size: 1.25rem;
  font-weight: 400;
}
body.impact .ip_config .ip_col.input_grp .target_wh {
  width: 100%;
  flex-basis: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
body.impact .ip_config .ip_col.input_grp .target_wh .target_wh_grp {
  flex-basis: 44%;
  display: flex;
  flex-direction: column;
}
body.impact .ip_config .ip_col.input_grp .target_wh .target_wh_grp input,
body.impact .ip_config .ip_col.input_grp .target_wh .target_wh_grp select {
  flex-basis: 44%;
}
body.impact .ip_config .ip_col.input_grp .target_wh .target_wh_grp input[type=text],
body.impact .ip_config .ip_col.input_grp .target_wh .target_wh_grp input[type=number],
body.impact .ip_config .ip_col.input_grp .target_wh .target_wh_grp select {
  border-radius: 4px;
  font-weight: 600;
  font-size: 1.5rem;
  text-align: center;
}
body.impact .ip_config .sel_arrow {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  margin: 2vh 0 0;
}
body.impact .ip_config .sel_arrow label {
  flex-basis: 100%;
}
body.impact .ip_config .sel_arrow #arrow-set-buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  line-height: 1.4;
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button {
  flex-grow: 1 0;
  flex-basis: 15%;
  font-family: "Oswald";
  line-height: 1.2;
  margin-left: 1%;
  margin-bottom: 0.5rem;
  background: none;
  border-radius: 4px;
  font-size: 1.375rem;
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button:first-of-type, body.impact .ip_config .sel_arrow #arrow-set-buttons button:nth-of-type(7) {
  margin-left: 0;
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button:nth-of-type(n + 7) {
  margin-bottom: 0;
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button.dark {
  color: #000;
  border: 2px solid #000;
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button.yellow {
  color: #ffc100;
  border: 2px solid #ffc100;
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button.blue {
  color: rgb(43, 69, 112);
  border: 2px solid rgb(43, 69, 112);
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button.green {
  color: rgb(4, 240, 106);
  border: 2px solid rgb(4, 240, 106);
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button.orange {
  color: rgb(220, 96, 46);
  border: 2px solid rgb(220, 96, 46);
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button.lime {
  color: limegreen;
  border: 2px solid limegreen;
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button.pink {
  color: hotpink;
  border: 2px solid hotpink;
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button.white {
  color: #fff;
  border: 2px solid #fff;
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button.red {
  color: #c90000;
  border: 2px solid #c90000;
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button.gray {
  color: rgb(150, 150, 150);
  border: 2px solid rgb(150, 150, 150);
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button.gold {
  color: rgb(176, 144, 61);
  border: 2px solid rgb(176, 144, 61);
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button.purple {
  color: purple;
  border: 2px solid purple;
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button.dark.selected {
  background-color: #000;
  color: #000;
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button.yellow.selected {
  background-color: #ffc100;
  color: #000;
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button.blue.selected {
  background-color: rgb(43, 69, 112);
  color: #000;
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button.green.selected {
  background-color: rgb(4, 240, 106);
  color: #000;
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button.orange.selected {
  background-color: rgb(220, 96, 46);
  color: #000;
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button.lime.selected {
  background-color: limegreen;
  color: #000;
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button.pink.selected {
  background-color: hotpink;
  color: #000;
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button.white.selected {
  background-color: #fff;
  color: #000;
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button.red.selected {
  background-color: #c90000;
  color: #000;
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button.gray.selected {
  background-color: rgb(150, 150, 150);
  color: #000;
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button.gold.selected {
  background-color: rgb(176, 144, 61);
  color: #000;
}
body.impact .ip_config .sel_arrow #arrow-set-buttons button.purple.selected {
  background-color: purple;
  color: #000;
}
body.impact .selected {
  outline: 3px solid #fff;
  transform: translateY(-1px);
}
body.impact .dark {
  color: #000;
}
body.impact .yellow {
  background-color: #ffc100;
  color: #000;
}
body.impact .blue {
  background-color: rgb(43, 69, 112);
  color: #fff;
}
body.impact .green {
  background-color: rgb(78, 178, 48);
  color: #fff;
}
body.impact .orange {
  background-color: rgb(220, 96, 46);
  color: #fff;
}
body.impact .lime {
  background-color: limegreen;
  color: #fff;
}
body.impact .pink {
  background-color: hotpink;
  color: #000;
}
body.impact .white {
  background-color: rgb(255, 255, 255);
  color: #000;
}
body.impact .red {
  background-color: rgb(137, 1, 0);
  color: #fff;
}
body.impact .gray {
  background-color: rgb(150, 150, 150);
}
body.impact .gold {
  background-color: rgb(176, 144, 61);
  color: #000;
}
body.impact .purple {
  background-color: rgb(114, 39, 160);
  color: #fff;
}
body.impact .circle.dark {
  color: #000;
}
body.impact .circle.yellow {
  border-color: #ffc100;
}
body.impact .circle.blue {
  border-color: rgb(43, 69, 112);
}
body.impact .circle.green {
  border-color: rgb(78, 178, 48);
}
body.impact .circle.orange {
  border-color: rgb(220, 96, 46);
}
body.impact .circle.lime {
  border-color: limegreen;
}
body.impact .circle.pink {
  border-color: hotpink;
}
body.impact .circle.white {
  border-color: rgb(255, 255, 255);
}
body.impact .circle.red {
  border-color: rgb(137, 1, 0);
}
body.impact .circle.gray {
  border-color: rgb(150, 150, 150);
}
body.impact .circle.gold {
  border-color: rgb(176, 144, 61);
}
body.impact .circle.purple {
  border-color: rgb(114, 39, 160);
}
body.impact table.curr_arrows tr td.row_yellow {
  color: #ffc100;
}
body.impact table.curr_arrows tr td.row_blue {
  color: rgb(43, 69, 112);
}
body.impact table.curr_arrows tr td.row_green {
  color: rgb(4, 240, 106);
}
body.impact table.curr_arrows tr td.row_orange {
  color: rgb(220, 96, 46);
}
body.impact table.curr_arrows tr td.row_lime {
  color: limegreen;
}
body.impact table.curr_arrows tr td.row_pink {
  color: hotpink;
}
body.impact table.curr_arrows tr td.row_white {
  color: #fff;
}
body.impact table.curr_arrows tr td.row_red {
  color: #c90000;
}
body.impact table.curr_arrows tr td.row_gray {
  color: rgb(150, 150, 150);
}
body.impact table.curr_arrows tr td.row_gold {
  color: rgb(176, 144, 61);
}
body.impact table.curr_arrows tr td.row_purple {
  color: purple;
}
body.impact body.impact #image-container {
  position: relative;
  display: block;
  width: 70vh;
  height: 70vh;
  margin: 2vh auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  overflow: hidden;
  touch-action: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  transform-origin: 50% 50%;
  transition: transform 120ms ease;
}
body.impact body.impact #image-container.zoomed {
  transform: scale(2.5);
}
body.impact body.impact #image-container.dragging {
  cursor: grabbing;
  transition: none;
}
body.impact .circle {
  touch-action: none;
}
body.impact .circle {
  position: absolute;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* keep number above background */
  font-weight: 700;
}
body.impact .circle.placing {
  /* IMPORTANT: background is moved to ::before */
  background: transparent !important;
  border-color: rgb(255, 0, 0);
}
body.impact .circle .lbl {
  position: relative;
  z-index: 2;
  padding-top: 0.5rem;
}
body.impact .circle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 1;
  z-index: 1;
}
body.impact .circle::before.yellow {
  background: var(--dot-bg, #ffc100);
}
body.impact .circle::before.blue {
  background: var(--dot-bg, rgb(43, 69, 112));
}
body.impact .circle::before.green {
  background: var(--dot-bg, rgb(4, 240, 106));
}
body.impact .circle::before.orange {
  background: var(--dot-bg, rgb(220, 96, 46));
}
body.impact .circle::before.lime {
  background: var(--dot-bg, limegreen);
}
body.impact .circle::before.pink {
  background: var(--dot-bg, hotpink);
}
body.impact .circle::before.white {
  background: var(--dot-bg, #fff);
}
body.impact .circle::before.red {
  background: var(--dot-bg, #c90000);
}
body.impact .circle::before.gray {
  background: var(--dot-bg, rgb(150, 150, 150));
}
body.impact .circle::before.gold {
  background: var(--dot-bg, rgb(176, 144, 61));
}
body.impact .circle::before.purple {
  background: var(--dot-bg, purple);
}
body.impact .circle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11%; /* 5–7% target size */
  height: 11%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 0, 0, 0.95);
  opacity: 0;
  z-index: 3;
}
body.impact .circle.placing::before {
  opacity: 0.6;
}
body.impact .circle.placing::after {
  opacity: 1;
}
body.impact .circle.placing .lbl {
  opacity: 0;
}
body.impact .arrow-btn.done {
  opacity: 0.8;
  filter: saturate(10%);
  border: 1px solid green;
}
body.impact .arrow-btn.done::after {
  filter: saturate(30%);
}
body.impact .meta {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  margin: 0.5rem 0 0;
  text-align: center;
}
body.impact .row {
  position: relative;
}
body.impact table.curr_arrows {
  border: 0;
}
body.impact table.curr_arrows tr td,
body.impact table.curr_arrows tr th {
  color: #eee;
  border: 0;
  padding: 0 0.875rem;
}
body.impact table.curr_arrows tr th {
  border-bottom: 1px solid #ddd;
}
body.impact #set-buttons-row, body.impact #arrow-set-buttons {
  width: 100%;
}
body.impact .set-btn.selected {
  outline: 0;
  transform: translateY(-1px);
}
body.impact textarea#set-notes {
  width: 100%;
  max-width: 50rem;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  border: 0;
  min-height: 3.5rem;
  font-size: 1.125rem;
  background: rgb(240, 240, 240);
  color: #000;
  resize: vertical;
}

section.container.btn_func .row .ip_group.gen_buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
section.container.btn_func .row .ip_group.gen_buttons label {
  flex-basis: 100%;
}
section.container.btn_func .row .ip_group.gen_buttons button {
  flex-basis: 24%;
  color: #fff;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  line-height: 2.75;
  border-radius: 3px;
  border: 1px solid rgba(100, 100, 100, 0.7);
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e0e0e0+0,a3a3a3+100&1+0,0.65+100,1+100 */
  background: linear-gradient(to bottom, rgb(46, 48, 51) 0%, rgb(31, 33, 36) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  /*&#export[type="button"] {
  }*/
}
section.container.btn_func .row .ip_group.gen_buttons button#transfer[type=button] {
  border-color: rgb(78, 178, 48);
  color: #fff;
}
section.container.btn_func .row .ip_group.gen_buttons button#clear-hits[type=button] {
  border-color: rgb(176, 144, 61);
  color: #fff;
}
section.container.btn_func .row .ip_group.gen_buttons button#clear-all[type=button] {
  border-color: rgb(137, 1, 0);
  color: #fff;
}

/* Prevent the page from scrolling/zooming while interacting with the target */
body.impact #image-container {
  touch-action: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  position: relative; /* you already rely on this for absolutely-positioned dots */
  height: 94vw;
  width: 94vw;
  margin: 0 auto;
  background-size: cover;
}

/* Smooth zoom while dragging */
body.impact #image-container.zoomed {
  transform: scale(2.5);
}

/* A little smoothing */
body.impact #image-container {
  transition: transform 120ms ease-out;
}

/* Optional: give a visual cue */
body.impact #image-container.dragging {
  cursor: grabbing;
}

/* ------------------------------------------------------------
   Shot Tracker: dot system (migrated from manual style.css edits)
   ------------------------------------------------------------ */
body.impact #image-container .dot {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  /* size: scale with viewport but keep usable bounds */
  width: 1.5vw;
  height: 1.5vw;
  min-width: 18px;
  min-height: 14px;
  padding-top: 4px;
  max-width: 22px;
  max-height: 22px;
  font-weight: 700;
  line-height: 1;
  font-family: "Teko", monospace;
  /*
      Color system:
      - wrap-* classes set --wrap-color (used for border / legend)
      - nock-* classes set --nock-color (used for fill)
      - legacy .dot.<color> sets --dot-color (fallback fill)
  */
  --dot-color: rgba(255, 0, 0, 0.95);
  color: #000;
  background: var(--nock-color, var(--dot-color));
  z-index: 5;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

body.impact #image-container .dot:active {
  cursor: grabbing;
}

/* Legacy dot colors (fallback fill via --dot-color) */
body.impact #image-container .dot.yellow {
  --dot-color: #ffc100;
  color: #000;
}

body.impact #image-container .dot.blue {
  --dot-color: rgb(43, 69, 112);
}

body.impact #image-container .dot.green {
  --dot-color: rgb(78, 178, 48);
}

body.impact #image-container .dot.orange {
  --dot-color: rgb(220, 96, 46);
}

body.impact #image-container .dot.lime {
  --dot-color: limegreen;
  color: #000;
}

body.impact #image-container .dot.pink {
  --dot-color: hotpink;
}

body.impact #image-container .dot.white {
  --dot-color: #fff;
  color: #000;
}

body.impact #image-container .dot.red {
  --dot-color: rgb(137, 1, 0);
}

body.impact #image-container .dot.gray {
  --dot-color: rgb(150, 150, 150);
}

body.impact #image-container .dot.gold {
  --dot-color: rgb(176, 144, 61);
  color: #000;
}

body.impact #image-container .dot.purple {
  --dot-color: rgb(114, 39, 160);
}

/* Wrap/Nock palette (CSS vars + button/legend backgrounds) */
body.impact .wrap-black {
  --wrap-color: #111;
  background-color: #111;
}

body.impact .wrap-white {
  --wrap-color: #fff;
  background-color: #fff;
  color: #000;
}

body.impact .wrap-gray,
body.impact .wrap-grey {
  --wrap-color: #9a9a9a;
  background-color: #9a9a9a;
  color: #000;
}

body.impact .wrap-red {
  --wrap-color: #b00000;
  background-color: #b00000;
}

body.impact .wrap-blue {
  --wrap-color: #2b4570;
  background-color: #2b4570;
}

body.impact .wrap-green {
  --wrap-color: #4eb230;
  background-color: #4eb230;
  color: #000;
}

body.impact .wrap-yellow {
  --wrap-color: #ffc100;
  background-color: #ffc100;
  color: #000;
}

body.impact .wrap-gold {
  --wrap-color: #b0903d;
  background-color: #b0903d;
  color: #000;
}

body.impact .wrap-orange {
  --wrap-color: #dc602e;
  background-color: #dc602e;
  color: #000;
}

body.impact .wrap-purple {
  --wrap-color: #7227a0;
  background-color: #7227a0;
}

body.impact .wrap-pink {
  --wrap-color: hotpink;
  background-color: hotpink;
  color: #000;
}

body.impact .wrap-brown {
  --wrap-color: #7a4a20;
  background-color: #7a4a20;
}

body.impact .wrap-silver {
  --wrap-color: #c0c0c0;
  background-color: #c0c0c0;
  color: #000;
}

body.impact .nock-black {
  --nock-color: #111;
  background-color: #111;
}

body.impact .nock-white {
  --nock-color: #fff;
  background-color: #fff;
  color: #000;
}

body.impact .nock-gray,
body.impact .nock-grey {
  --nock-color: #9a9a9a;
  background-color: #9a9a9a;
  color: #000;
}

body.impact .nock-red {
  --nock-color: #b00000;
  background-color: #b00000;
}

body.impact .nock-blue {
  --nock-color: #2b4570;
  background-color: #2b4570;
}

body.impact .nock-green {
  --nock-color: #4eb230;
  background-color: #4eb230;
  color: #000;
}

body.impact .nock-yellow {
  --nock-color: #ffc100;
  background-color: #ffc100;
  color: #000;
}

body.impact .nock-gold {
  --nock-color: #ffd34d;
  background-color: #ffd34d;
  color: #000;
}

body.impact .nock-orange {
  --nock-color: #dc602e;
  background-color: #dc602e;
  color: #000;
}

body.impact .nock-purple {
  --nock-color: #7227a0;
  background-color: #7227a0;
}

body.impact .nock-pink {
  --nock-color: hotpink;
  background-color: hotpink;
  color: #000;
}

body.impact .nock-brown {
  --nock-color: #7a4a20;
  background-color: #7a4a20;
}

body.impact .nock-silver {
  --nock-color: #c0c0c0;
  background-color: #c0c0c0;
  color: #000;
}

/* During drag: hide number + show center pin */
body.impact #image-container .dot.dragging {
  background: transparent;
  color: transparent;
  text-shadow: none;
}

body.impact #image-container .dot.dragging::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--dot-color, #fff);
  opacity: 0.05;
}

body.impact #image-container .dot.dragging::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(0, 0, 0);
  border: 1px solid rgba(255, 255, 255, 0.85);
}

/* Active selection highlighting */
body.impact #arrow-sets-row .set-btn.active,
body.impact #arrow-buttons-row .arrow-btn.active {
  background-color: yellow;
  color: #000;
  box-shadow: 0 0 0 2px rgba(255, 255, 0, 0.35);
}

body.impact #arrow-sets-row .set-btn,
body.impact #arrow-buttons-row .arrow-btn {
  line-height: 1;
}

/* Stats panel */
body.impact .stats-card {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 12px 14px;
  max-width: 460px;
  background: rgba(0, 0, 0, 0.25);
  margin-top: 10px;
}

body.impact .stats-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 8px;
  text-align: left;
}

body.impact .stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}

body.impact .stats-item .k {
  display: block;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.1;
}

body.impact .stats-item .v {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.1;
}

/* Variant styling */
body.impact #image-container .dot.variant-heavy {
  outline: 3px solid gold;
  outline-offset: -3px;
  font-size: 24px;
  color: #000;
  text-shadow: none;
  border-width: 0;
  max-width: 28px;
  max-height: 28px;
}

body.impact .dot.variant-heavy {
  border-width: 4px;
  border-style: solid;
}

body.impact .dot.variant-light {
  border-width: 3px;
  border-style: dashed;
}

body.impact #arrow-buttons-row button.variant-heavy {
  border-width: 2px;
  border-style: solid;
}

body.impact #arrow-buttons-row button.variant-light {
  border-width: 2px;
  border-style: dashed;
}

/* Legend */
body.impact .variant-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}

body.impact .variant-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.impact .variant-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: inline-block;
}

body.impact .variant-swatch.variant-heavy {
  border-width: 4px;
  border-style: solid;
}

body.impact .variant-swatch.variant-light {
  border-width: 3px;
  border-style: dashed;
}

body#shot-viewer h1 {
  display: inline-block;
}

span.quick_link a {
  font-size: 1.75rem;
  padding: 0.25rem 0.75rem;
  margin-top: 0;
  line-height: 1.5;
  text-decoration: none;
}
span.quick_link a:before {
  font-family: "Font Awesome 5 Pro";
  content: "\f648";
  font-size: 1.75rem;
  padding-right: 1rem;
}

button#sv-filters-toggle.button-secondary.sv-filters-toggle {
  font-size: 1.25rem;
  padding: 0.25rem 0.75rem;
  margin-top: 0;
  line-height: 1.5;
}
button#sv-filters-toggle.button-secondary.sv-filters-toggle:before {
  font-family: "Font Awesome 5 Pro";
  content: "\f1de";
  font-size: 1.75rem;
  padding-right: 1rem;
}

#notes {
  width: 100%;
}

i.fa-band-aid {
  transform: rotate(45deg);
}

table.arrows tr.inactive td, table.arrows tr.broken td {
  color: #bbb;
}
table.arrows tr.repair td {
  color: orange;
}
table.arrows tr td.arrow_dot.orange span {
  display: block;
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 100px;
  background: orange;
}
table.arrows tr td.arrow_dot.light span {
  outline: 2px solid aqua;
  outline-offset: -7px;
}
table.arrows tr td.arrow_dot.heavy span {
  outline: 2px solid #000;
  outline-offset: -7px;
}
table.arrows tr td.arrow_notes {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Optional: adds "..." to clipped text */
  max-width: 15rem;
}

.card {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 12px;
  background: #fff;
  margin-bottom: 16px;
}

body.shot_log {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  /* Target viewer */
}
body.shot_log .filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
body.shot_log .filters label {
  font-size: 12px;
  opacity: 0.8;
  display: block;
  margin-bottom: 6px;
}
body.shot_log .filters select {
  width: 100%;
  padding: 8px;
}
body.shot_log .meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 8px 0 14px;
  font-size: 13px;
  flex-wrap: wrap;
}
body.shot_log .btn {
  padding: 8px 10px;
  cursor: pointer;
}
body.shot_log .small {
  opacity: 0.75;
}
body.shot_log .nowrap {
  white-space: nowrap;
}
body.shot_log table {
  width: 100%;
  border-collapse: collapse;
}
body.shot_log th,
body.shot_log td {
  border-bottom: 1px solid #ddd;
  padding: 8px;
  font-size: 13px;
  text-align: left;
  vertical-align: top;
}
body.shot_log th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
}
body.shot_log th.sortable {
  cursor: pointer;
}
body.shot_log th.sortable:hover {
  background: #fafafa;
}
body.shot_log th .sort-ind {
  margin-left: 6px;
  font-size: 12px;
  opacity: 0.7;
}
body.shot_log .target-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
  align-items: end;
}
body.shot_log .target-stage {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
}
body.shot_log .target-stage img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid #eee;
  background: #f7f7f7;
}
body.shot_log .target-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}
body.shot_log .legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 12px;
  justify-content: center;
}
body.shot_log .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: 4px 8px;
  background: #fff;
}
body.shot_log .swatch {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
body.shot_log tr.row-selected {
  outline: 2px solid #111;
  outline-offset: -2px;
}
body.shot_log .debugBanner {
  background: #111;
  color: #0f0;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #0f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  border-radius: 6px;
}

body.shot_viewer .sv-filters .sv-filter {
  flex: 1 1 45%;
  min-width: auto;
  overflow: auto;
}
body.shot_viewer .sv-filters .sv-filter.sgroups {
  flex: 1 1 100%;
}
body.shot_viewer .sv-filters .sv-filter select[multiple] {
  width: 95%;
  border: 1px solid #c90;
}
body.shot_viewer .sv-filters .sv-filter label {
  font-weight: 700;
}
body.shot_viewer .sv-filters .sv-filter.sv-actions .sv-row {
  flex-wrap: wrap;
}
body.shot_viewer .sv-filters .sv-filter.sv-actions .sv-row button#sv-apply {
  background-color: orange;
}

#pw-strength {
  font-size: 12px;
  margin-top: -5px;
  display: block;
}

/* Inputs */
#username,
#password,
#email,
#new_password,
#confirm_password {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
}

/* Submit buttons inside auth forms */
#username ~ button[type=submit],
#password ~ button[type=submit],
#email ~ button[type=submit],
#new_password ~ button[type=submit],
#confirm_password ~ button[type=submit] {
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* Conservative hover; avoid overriding Skeleton's .button components site-wide */
#username ~ button[type=submit]:hover,
#password ~ button[type=submit]:hover,
#email ~ button[type=submit]:hover,
#new_password ~ button[type=submit]:hover,
#confirm_password ~ button[type=submit]:hover {
  filter: brightness(0.95);
}

hr {
  display: block;
  width: 100%;
  border: 0.5px solid rgba(84, 106, 123, 0.38) !important;
}

ol,
ul {
  margin-left: 2rem;
}
ol li,
ul li {
  display: list-item;
  list-style-position: outside;
}
#toggleButton {
  border: 0px solid #fff;
  padding: 1rem;
}

#content {
  display: none; /* Initially hidden */
}

body.home h1, body.home h2, body.home h3, body.home h4, body.home h5, body.home h6 {
  display: block;
  flex-basis: 100%;
}
body.home h4 {
  text-align: center;
}
body.home form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  padding: 4vh 0;
}
body.home form input form textarea {
  margin-bottom: 1rem;
  font-family: "Architects Daughter", cursive;
  font-weight: 500;
  font-style: normal;
}
body.home form fieldset {
  flex-basis: 10%;
}
body.home form fieldset.notes {
  flex-basis: 100%;
}
body.home form fieldset.num {
  flex-basis: 10%;
}
body.home form fieldset.num select {
  border: 0;
  /*height: 2rem;*/
  /*padding-top: 0;*/
  /*padding-bottom: 0;*/
  background-color: #ccc;
  margin-left: 0;
}
body.home form fieldset.num .input-group,
body.home form fieldset.num .input-group .input-container,
body.home form fieldset.num .input-group .input-container {
  text-align: center;
  display: block;
  width: 100%;
}
body.home form fieldset.num label {
  flex-basis: 100%;
  height: 26px;
  padding: 6px 10px;
  margin-bottom: 1.5rem;
}
body.home form input[type=submit] {
  background-color: #871d18;
  color: #FFFFFF;
  flex-basis: 10%;
}
body.home form input[type=number],
body.home form input[type=text] {
  width: 12rem;
  font-size: 3rem;
  text-align: right;
  padding-right: 0.25rem;
  letter-spacing: 0.05rem;
  font-family: "Architects Daughter", cursive;
  font-weight: 500;
  font-style: normal;
}
body.home form textarea {
  font-family: "Architects Daughter", cursive;
  font-weight: 500;
  font-style: normal;
  font-size: 2rem;
}
body.home form fieldset {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}
body.home form fieldset h3 {
  flex-basis: 100%;
}
body.home form fieldset label {
  flex-basis: 20%;
  font-size: 2.25rem;
}
body.home form fieldset input {
  flex-basis: 50%;
  margin-right: 20%;
}
body.home form fieldset:last-of-type {
  align-self: flex-end;
}
body.home .input-group,
body.home select {
  margin: 0 auto;
}
body.home #fillRandom_inserts_zero,
body.home #fillRandom_points_zero,
body.home #fillRandom_nocks_zero {
  display: none;
}
body.home ol {
  margin-left: 2rem;
}
body.home h4 span {
  font-size: 50%;
  font-weight: 500;
}
body.home textarea {
  width: 100%;
}

header {
  position: relative;
}
body {
  padding-bottom: 7vh;
}

.ta_right {
  text-align: right;
  margin-left: 2rem;
  margin-right: 3rem;
}

.ta_left {
  text-align: left;
  margin-left: 3rem;
  margin-right: 2rem;
}

.two_cols {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: center;
  margin: 0 auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.two_cols > li {
  padding: 0;
  margin: 0;
}
@media screen and (min-width: 600px) {
  .two_cols {
    flex-wrap: nowrap;
  }
}
.two_cols > div {
  border-right: 2px solid #ecede9;
}
.two_cols > div:last-of-type {
  border-right: 0px solid #ecede9;
}

.stats {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: center;
  flex-wrap: wrap;
  line-height: 1;
  font-size: 1.5vw;
  margin-bottom: 0rem;
}
.stats > li {
  padding: 0;
  margin: 0;
}
@media screen and (min-width: 600px) {
  .stats {
    flex-wrap: nowrap;
  }
}
@media screen and (min-width: 600px) {
  .stats {
    flex-wrap: wrap;
  }
}
.stats .label {
  flex-basis: 100%;
  color: #777;
  font-weight: 700;
  letter-spacing: 0.05rem;
  font-size: 3.5rem;
  text-align: center;
}
.stats .label span {
  display: block;
  font-weight: 400;
  font-size: 1.5rem;
  text-align: center;
  line-height: 1.4;
}
.stats .stat_num {
  flex-basis: 100%;
  font-size: 4.75vw;
  font-weight: 700;
  text-align: center;
}
.stats .stat_num span {
  font-size: 40%;
}

picture,
img {
  width: 100%;
  height: auto;
}

.notes {
  color: #999;
  font-family: "Architects Daughter", cursive;
  font-weight: 100;
  font-style: normal;
  font-size: 2rem;
  letter-spacing: 0.05rem;
  line-height: 1.3;
}
.notes strong {
  font-weight: 700;
  text-transform: uppercase;
  font-family: "open sans";
  font-size: 70%;
}

.sub_container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: 50%;
  margin-bottom: 3rem;
}
.sub_container .sub_cell {
  flex-basis: 25%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}
.sub_container .sub_cell h3 {
  flex-basis: 100%;
}
.sub_container .sub_cell h3:nth-of-type(even) {
  /*text-align: right;*/
}
.sub_container .sub_cell div {
  flex-basis: 100%;
}
.sub_container .sub_cell div:nth-of-type(odd) {
  text-align: center;
}
.sub_container .sub_cell div:nth-of-type(even) {
  text-align: center;
}
.sub_container .sub_cell div.heading {
  font-weight: 600;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid gray;
}

h5 span {
  font-weight: 100;
  font-size: 80%;
  color: #aaa;
}

span.gray {
  color: #ccc !important;
  font-weight: 100 !important;
  font-family: "Roboto" !important;
}

body.err table tr td.item_pos {
  color: #c90000;
}

table#myTable {
  border: 0;
  padding-bottom: 1rem;
  margin: 3vh auto 0 auto;
}
table#myTable tr:hover td {
  /*background-color: yellow;*/
}
table#myTable tr th,
table#myTable tr td {
  padding: 0.25rem 0.5rem;
  text-align: center;
  border: 0;
}
table#myTable tr th:nth-of-type(even),
table#myTable tr td:nth-of-type(even) {
  border-left: 1px solid #dedede;
  border-right: 0 solid #dedede;
  padding: 0.5rem 0 0.5rem 3rem;
}
table#myTable tr th:nth-of-type(odd),
table#myTable tr td:nth-of-type(odd) {
  /*border-left: 1px solid #dedede;
  border-right: 0 solid #dedede;*/
  padding: 0.5rem 3rem 0.5rem 2rem;
}
table#myTable tr th {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #dedede;
}
table#myTable tr td:nth-of-type(even):last-of-type {
  border-right: 0;
}
table#myTable tr td.item_wt,
table#myTable tr td.diff_wt {
  color: #999;
  font-weight: 100;
  font-family: "Architects Daughter", cursive;
  font-weight: 500;
  font-style: normal;
  font-size: 2.5rem;
  letter-spacing: 0.05rem;
}
table#myTable tr td.item_pos {
  color: green;
}
table#myTable tr:first-of-type th.group_header {
  border-left: 1px solid #dedede;
  border-bottom: 0px;
  padding-left: 0 !important;
  padding-right: 0px;
  text-transform: uppercase;
}
table#myTable tr:first-of-type th:first-of-type {
  border-bottom: 0px;
}
table#myTable tr:nth-of-type(2) th {
  font-family: "tahoma";
  color: #999;
  font-weight: 100;
  letter-spacing: 0.05rem;
}
table#myTable tr:nth-of-type(2) th:first-of-type {
  color: #000;
  text-transform: uppercase;
}
table#myTable tr:nth-of-type(2) td {
  padding-top: 1rem;
}

.rowSelected {
  background-color: #CCC7B9;
  font-size: 135%;
  font-weight: 700;
}

/*nav {
    ul,
    ol {
        @include flexbox;
        justify-content: space-between;
        margin-left: 0;

        li {
            list-style: none;

            a {
                padding: .5rem 1rem;
                text-decoration: none;
                color: $blue2;
                font-family: "Architects Daughter", cursive;
                font-weight: 700;
                font-style: normal;
            }
        }
    }
}*/
/* Blackout overlay */
.blackout_screen {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 90;
}

/* Mobile slide-in menu */
.mobile_menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 80vw;
  max-width: 320px;
  background: #ffffff;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 100;
  overflow-y: auto;
  padding: 1.5rem 1.25rem;
}

/* When menu is open */
body.menu-open {
  overflow: hidden; /* lock scroll */
}

body.menu-open .blackout_screen {
  opacity: 1;
  visibility: visible;
}

body.menu-open .mobile_menu {
  transform: translateX(0);
}

/* Basic mobile-only visibility (tweak to match your breakpoints) */
@media (min-width: 992px) {
  .hamburger {
    display: none;
  }
  .mobile_menu {
    display: none;
  }
}
/* Hamburger button */
.hamburger {
  position: fixed;
  right: 1vw;
  top: 1vw;
  z-index: 110; /* above overlay & menu */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin-left: auto; /* push to right in flex row if header is flex */
}

.hamburger__box {
  display: inline-block;
  width: 24px;
  height: 18px;
  position: relative;
}

.hamburger__inner,
.hamburger__inner::before,
.hamburger__inner::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #777;
  border-radius: 2px;
  transition: transform 0.2s ease, top 0.2s ease, opacity 0.2s ease;
  content: "";
}

.hamburger__inner {
  top: 50%;
  transform: translateY(-50%);
}

.hamburger__inner::before {
  top: -7px;
}

.hamburger__inner::after {
  top: 7px;
}

/* X state */
.hamburger.is-active .hamburger__inner {
  transform: rotate(45deg);
}

.hamburger.is-active .hamburger__inner::before {
  top: 0;
  opacity: 0;
}

.hamburger.is-active .hamburger__inner::after {
  top: 0;
  transform: rotate(-90deg);
}

header #cssmenu {
  display: none;
}
@media screen and (min-width: 1000px) {
  header button#mobileMenuToggle,
  header nav#mobile_menu {
    display: none;
  }
  header #cssmenu {
    display: block;
    width: 80%;
    margin: 1vh auto;
  }
  header #cssmenu ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  header #cssmenu ul li:first-of-type a {
    padding-left: 0;
  }
}
#arrowForm .columns > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: center;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: baseline;
}
#arrowForm .columns > div > li {
  padding: 0;
  margin: 0;
}
@media screen and (min-width: 600px) {
  #arrowForm .columns > div {
    flex-wrap: nowrap;
  }
}
#arrowForm .columns > div input {
  line-height: 2;
  padding: 1.5rem 0;
  height: 5rem;
}
#arrowForm .columns > div span.full-width {
  flex-basis: 100%;
  font-size: 80%;
  font-style: italic;
}
#arrowForm .columns > div.foc2_output {
  flex-wrap: wrap;
}
#arrowForm .columns > div.foc2_output label,
#arrowForm .columns > div.foc2_output input,
#arrowForm .columns > div.foc2_output span {
  flex-basis: 100%;
}
#arrowForm .foc2_output {
  padding: 0 0 3rem;
  font-size: 2rem;
}
#arrowForm .foc2_output label {
  color: #871d18;
}
#arrowForm .foc2_output span {
  display: block;
  line-height: 1;
}
#arrowForm .foc2_output span#balance_point, #arrowForm .foc2_output span#total_weight, #arrowForm .foc2_output span#foc_out {
  font-family: "Architects Daughter", cursive;
  font-style: normal;
  font-size: 7.5rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
}
#arrowForm .foc2_output span#balance_point:after {
  content: '"';
  display: inline-block;
}
#arrowForm .foc2_output span#total_weight:after {
  content: "g";
  display: inline-block;
}
#arrowForm .foc2_output span#foc_out:after {
  content: "%";
  display: inline-block;
}
#arrowForm .foc2_output span.small {
  font-size: 80%;
  font-style: italic;
}

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-container .tooltip-text {
  visibility: hidden;
  width: 250px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* ------------------------------------------------------------
   Navigation: #cssmenu link styles
   ------------------------------------------------------------ */
#cssmenu ul li a {
  line-height: 1;
  text-decoration: none;
  color: #000;
}

#cssmenu ul li a span {
  display: block;
  font-size: 80%;
  color: #666;
}

#cssmenu ul li.divider {
  width: 2px;
  border-right: 2px solid #ccc;
}

#cssmenu ul li a:hover,
#cssmenu ul li.active a,
#cssmenu ul li.active a span {
  color: #c90000;
}

body.impact #cssmenu ul li a {
  color: #fff;
}

body.impact #cssmenu ul li a span {
  color: #ccc;
}

body.impact #cssmenu ul li.divider {
  border-right-color: #ccc;
}

/* Header active/hover highlighting */
header div #cssmenu ul li.active {
  border-bottom: 3px solid #c90;
}

header div #cssmenu ul li.active a,
header div #cssmenu ul li.active a span,
header div #cssmenu ul li a:hover,
header div #cssmenu ul li a:hover span {
  color: #c90;
}

/* ------------------------------------------------------------
   Icon-only action buttons (Arrows / Arrow Sets / Targets)
   ------------------------------------------------------------ */
a.button.edit,
a.button.set,
a.button.set-edit,
a.button.set-view,
a.button.target-edit,
button.set-archive {
  border: 0;
  padding: 0 15px;
  font-size: 18px;
  font-weight: 500;
}

a.button.edit span,
a.button.set span,
a.button.set-edit span,
a.button.set-view span,
a.button.target-edit span,
button.set-archive span {
  display: none;
}

a.button.edit::before,
a.button.set::before,
a.button.set-edit::before,
a.button.set-view::before,
a.button.target-edit::before,
button.set-archive::before {
  font-family: "Font Awesome 5 Pro";
  font-size: 18px;
  font-weight: 200;
  line-height: 1;
  display: inline-block;
}

a.button.edit::before,
a.button.set-edit::before,
a.button.target-edit::before {
  content: "\f044"; /* edit */
}

a.button.set::before,
a.button.set-view::before {
  content: "\f06e"; /* view */
}

button.set-archive::before {
  content: "\f187"; /* archive */
}

a.set-edit:hover,
a.set-view:hover,
button.set-archive:hover,
a.button.edit:hover,
a.button.set:hover,
a.button.target-edit:hover {
  font-weight: 700;
  color: #000;
}

span.heavy {
  color: gold;
  font-weight: 700;
}

/* Tables: selected row */
tr.selected td {
  background: rgba(0, 0, 0, 0.2);
}

/*# sourceMappingURL=style.css.map */