.site-button {
  display: inline-flex;
  gap: 0 0.5em;
  align-items: center;
  justify-content: center;
  padding: 1em 2.6em;
  border-radius: 1.7em;
  text-align: center;
  white-space: nowrap;
  text-decoration: none !important;
  cursor: pointer;
  color: var(--sb-animated-color);
  border: 1px solid var(--sb-animated-border-color);
  background: linear-gradient(var(--sb-animated-rad), var(--sb-animated-back), var(--sb-animated-back2), var(--sb-animated-back3));
  transition: all 0.5s, --sb-animated-color 0.5s, --sb-animated-border-color 0.5s, --sb-animated-rad 0.5s, --sb-animated-back 0.5s, --sb-animated-back2 0.5s, --sb-animated-back3 0.5s;
  --sb-rad: 176deg;
  --sb-back: #78c4ff8a;
  --sb-back2: #ffffff00;
  --sb-border-color: #fff;
  --sb-color: #fff;
  --sb-animated-rad: var(--sb-rad);
  --sb-animated-back: var(--sb-back);
  --sb-animated-back2: var(--sb-back2, var(--sb-back));
  --sb-animated-back3: var(--sb-back3, var(--sb-back2, var(--sb-back)));
  --sb-animated-border-color: var(--sb-border-color);
  --sb-animated-color: var(--sb-color);
}
@property --sb-animated-rad {
  syntax: '<color>';
  initial-value: 0deg;
  inherits: false;
}
@property --sb-animated-back {
  syntax: '<color>';
  initial-value: #ffffff00;
  inherits: false;
}
@property --sb-animated-back2 {
  syntax: '<color>';
  initial-value: #ffffff00;
  inherits: false;
}
@property --sb-animated-back3 {
  syntax: '<color>';
  initial-value: #ffffff00;
  inherits: false;
}
@property --sb-animated-border-color {
  syntax: '<color>';
  initial-value: 0deg;
  inherits: false;
}
@property --sb-animated-color {
  syntax: '<color>';
  initial-value: 0deg;
  inherits: false;
}
.site-button:hover,
.site-button:active {
  --sb-animated-color: var(--sb-hover-color, var(--sb-color));
  --sb-animated-border-color: var(--sb-hover-border-color, var(--sb-border-color));
  --sb-animated-rad: var(--sb-hover-rad, var(--sb-rad));
  --sb-animated-back: var(--sb-hover-back, var(--sb-back));
  --sb-animated-back2: var(--sb-hover-back2, var(--sb-back2, var(--sb-back)));
  --sb-animated-back3: var(--sb-hover-back3, var(--sb-hover-back2, var(--sb-back3, var(--sb-back2, var(--sb-back)))));
}
.site-button:not(.trans-white, .site-button--trans-white, .white, .site-button--white, .black, .site-button--black, .blue, .site-button--blue) {
  --sb-color: #BEE3FF;
  --sb-hover-color: #fff;
  --sb-border-color: #4f697d;
  --sb-hover-border-color: #78C4FF;
  --sb-hover-back: #61baff;
}
.site-button.top-space {
  margin-top: 1em;
}
.site-button.trans-white,
.site-button--trans-white {
  display: inline-flex;
  gap: 0 0.5em;
  align-items: center;
  justify-content: center;
  padding: 1em 2.6em;
  border-radius: 1.7em;
  text-align: center;
  white-space: nowrap;
  text-decoration: none !important;
  cursor: pointer;
  color: var(--sb-animated-color);
  border: 1px solid var(--sb-animated-border-color);
  background: linear-gradient(var(--sb-animated-rad), var(--sb-animated-back), var(--sb-animated-back2), var(--sb-animated-back3));
  transition: all 0.5s, --sb-animated-color 0.5s, --sb-animated-border-color 0.5s, --sb-animated-rad 0.5s, --sb-animated-back 0.5s, --sb-animated-back2 0.5s, --sb-animated-back3 0.5s;
  --sb-rad: 176deg;
  --sb-back: #78c4ff8a;
  --sb-back2: #ffffff00;
  --sb-animated-rad: var(--sb-rad);
  --sb-animated-back: var(--sb-back);
  --sb-animated-back2: var(--sb-back2, var(--sb-back));
  --sb-animated-back3: var(--sb-back3, var(--sb-back2, var(--sb-back)));
  --sb-animated-border-color: var(--sb-border-color);
  --sb-animated-color: var(--sb-color);
  --sb-color: #fff;
  --sb-hover-color: #fff;
  --sb-border-color: #fff;
  --sb-back: #ffffff00;
  --sb-hover-back: #0B1722;
  --sb-hover-back2: #0B1722;
}
@property --sb-animated-rad {
  syntax: '<color>';
  initial-value: 0deg;
  inherits: false;
}
@property --sb-animated-back {
  syntax: '<color>';
  initial-value: #ffffff00;
  inherits: false;
}
@property --sb-animated-back2 {
  syntax: '<color>';
  initial-value: #ffffff00;
  inherits: false;
}
@property --sb-animated-back3 {
  syntax: '<color>';
  initial-value: #ffffff00;
  inherits: false;
}
@property --sb-animated-border-color {
  syntax: '<color>';
  initial-value: 0deg;
  inherits: false;
}
@property --sb-animated-color {
  syntax: '<color>';
  initial-value: 0deg;
  inherits: false;
}
.site-button.trans-white:hover,
.site-button--trans-white:hover,
.site-button.trans-white:active,
.site-button--trans-white:active {
  --sb-animated-color: var(--sb-hover-color, var(--sb-color));
  --sb-animated-border-color: var(--sb-hover-border-color, var(--sb-border-color));
  --sb-animated-rad: var(--sb-hover-rad, var(--sb-rad));
  --sb-animated-back: var(--sb-hover-back, var(--sb-back));
  --sb-animated-back2: var(--sb-hover-back2, var(--sb-back2, var(--sb-back)));
  --sb-animated-back3: var(--sb-hover-back3, var(--sb-hover-back2, var(--sb-back3, var(--sb-back2, var(--sb-back)))));
}
.site-button.trans-white:not(.trans-white, .site-button--trans-white, .white, .site-button--white, .black, .site-button--black, .blue, .site-button--blue),
.site-button--trans-white:not(.trans-white, .site-button--trans-white, .white, .site-button--white, .black, .site-button--black, .blue, .site-button--blue) {
  --sb-color: #BEE3FF;
  --sb-hover-color: #fff;
  --sb-border-color: #4f697d;
  --sb-hover-border-color: #78C4FF;
  --sb-hover-back: #61baff;
}
.site-button.trans-white.top-space,
.site-button--trans-white.top-space {
  margin-top: 1em;
}
.site-button.wide,
.site-button--wide {
  display: flex;
  width: 100%;
}
.site-button.white,
.site-button--white {
  display: inline-flex;
  gap: 0 0.5em;
  align-items: center;
  justify-content: center;
  padding: 1em 2.6em;
  border-radius: 1.7em;
  text-align: center;
  white-space: nowrap;
  text-decoration: none !important;
  cursor: pointer;
  color: var(--sb-animated-color);
  border: 1px solid var(--sb-animated-border-color);
  background: linear-gradient(var(--sb-animated-rad), var(--sb-animated-back), var(--sb-animated-back2), var(--sb-animated-back3));
  transition: all 0.5s, --sb-animated-color 0.5s, --sb-animated-border-color 0.5s, --sb-animated-rad 0.5s, --sb-animated-back 0.5s, --sb-animated-back2 0.5s, --sb-animated-back3 0.5s;
  --sb-rad: 176deg;
  --sb-back: #78c4ff8a;
  --sb-back2: #ffffff00;
  --sb-color: #fff;
  --sb-animated-rad: var(--sb-rad);
  --sb-animated-back: var(--sb-back);
  --sb-animated-back2: var(--sb-back2, var(--sb-back));
  --sb-animated-back3: var(--sb-back3, var(--sb-back2, var(--sb-back)));
  --sb-animated-border-color: var(--sb-border-color);
  --sb-animated-color: var(--sb-color);
  --sb-back: #fff;
  --sb-back2: #fff;
  --sb-back3: #fff;
  --sb-hover-back: #fff;
  --sb-hover-back2: #fff;
  --sb-hover-back3: #fff;
  --sb-color: #0B1722;
  --sb-hover-color: #0B1722;
  --sb-border-color: #fff;
  --sb-hover-border-color: #fafafa;
}
@property --sb-animated-rad {
  syntax: '<color>';
  initial-value: 0deg;
  inherits: false;
}
@property --sb-animated-back {
  syntax: '<color>';
  initial-value: #ffffff00;
  inherits: false;
}
@property --sb-animated-back2 {
  syntax: '<color>';
  initial-value: #ffffff00;
  inherits: false;
}
@property --sb-animated-back3 {
  syntax: '<color>';
  initial-value: #ffffff00;
  inherits: false;
}
@property --sb-animated-border-color {
  syntax: '<color>';
  initial-value: 0deg;
  inherits: false;
}
@property --sb-animated-color {
  syntax: '<color>';
  initial-value: 0deg;
  inherits: false;
}
.site-button.white:hover,
.site-button--white:hover,
.site-button.white:active,
.site-button--white:active {
  --sb-animated-color: var(--sb-hover-color, var(--sb-color));
  --sb-animated-border-color: var(--sb-hover-border-color, var(--sb-border-color));
  --sb-animated-rad: var(--sb-hover-rad, var(--sb-rad));
  --sb-animated-back: var(--sb-hover-back, var(--sb-back));
  --sb-animated-back2: var(--sb-hover-back2, var(--sb-back2, var(--sb-back)));
  --sb-animated-back3: var(--sb-hover-back3, var(--sb-hover-back2, var(--sb-back3, var(--sb-back2, var(--sb-back)))));
}
.site-button.white:not(.trans-white, .site-button--trans-white, .white, .site-button--white, .black, .site-button--black, .blue, .site-button--blue),
.site-button--white:not(.trans-white, .site-button--trans-white, .white, .site-button--white, .black, .site-button--black, .blue, .site-button--blue) {
  --sb-color: #BEE3FF;
  --sb-hover-color: #fff;
  --sb-border-color: #4f697d;
  --sb-hover-border-color: #78C4FF;
  --sb-hover-back: #61baff;
}
.site-button.white.top-space,
.site-button--white.top-space {
  margin-top: 1em;
}
.site-button.wide,
.site-button--wide {
  display: inline-flex;
  gap: 0 0.5em;
  align-items: center;
  justify-content: center;
  padding: 1em 2.6em;
  border-radius: 1.7em;
  text-align: center;
  white-space: nowrap;
  text-decoration: none !important;
  cursor: pointer;
  color: var(--sb-animated-color);
  border: 1px solid var(--sb-animated-border-color);
  background: linear-gradient(var(--sb-animated-rad), var(--sb-animated-back), var(--sb-animated-back2), var(--sb-animated-back3));
  transition: all 0.5s, --sb-animated-color 0.5s, --sb-animated-border-color 0.5s, --sb-animated-rad 0.5s, --sb-animated-back 0.5s, --sb-animated-back2 0.5s, --sb-animated-back3 0.5s;
  --sb-rad: 176deg;
  --sb-back: #78c4ff8a;
  --sb-back2: #ffffff00;
  --sb-border-color: #fff;
  --sb-color: #fff;
  --sb-animated-rad: var(--sb-rad);
  --sb-animated-back: var(--sb-back);
  --sb-animated-back2: var(--sb-back2, var(--sb-back));
  --sb-animated-back3: var(--sb-back3, var(--sb-back2, var(--sb-back)));
  --sb-animated-border-color: var(--sb-border-color);
  --sb-animated-color: var(--sb-color);
  display: flex;
}
@property --sb-animated-rad {
  syntax: '<color>';
  initial-value: 0deg;
  inherits: false;
}
@property --sb-animated-back {
  syntax: '<color>';
  initial-value: #ffffff00;
  inherits: false;
}
@property --sb-animated-back2 {
  syntax: '<color>';
  initial-value: #ffffff00;
  inherits: false;
}
@property --sb-animated-back3 {
  syntax: '<color>';
  initial-value: #ffffff00;
  inherits: false;
}
@property --sb-animated-border-color {
  syntax: '<color>';
  initial-value: 0deg;
  inherits: false;
}
@property --sb-animated-color {
  syntax: '<color>';
  initial-value: 0deg;
  inherits: false;
}
.site-button.wide:hover,
.site-button--wide:hover,
.site-button.wide:active,
.site-button--wide:active {
  --sb-animated-color: var(--sb-hover-color, var(--sb-color));
  --sb-animated-border-color: var(--sb-hover-border-color, var(--sb-border-color));
  --sb-animated-rad: var(--sb-hover-rad, var(--sb-rad));
  --sb-animated-back: var(--sb-hover-back, var(--sb-back));
  --sb-animated-back2: var(--sb-hover-back2, var(--sb-back2, var(--sb-back)));
  --sb-animated-back3: var(--sb-hover-back3, var(--sb-hover-back2, var(--sb-back3, var(--sb-back2, var(--sb-back)))));
}
.site-button.wide:not(.trans-white, .site-button--trans-white, .white, .site-button--white, .black, .site-button--black, .blue, .site-button--blue),
.site-button--wide:not(.trans-white, .site-button--trans-white, .white, .site-button--white, .black, .site-button--black, .blue, .site-button--blue) {
  --sb-color: #BEE3FF;
  --sb-hover-color: #fff;
  --sb-border-color: #4f697d;
  --sb-hover-border-color: #78C4FF;
  --sb-hover-back: #61baff;
}
.site-button.wide.top-space,
.site-button--wide.top-space {
  margin-top: 1em;
}
.site-button.black,
.site-button--black {
  display: inline-flex;
  gap: 0 0.5em;
  align-items: center;
  justify-content: center;
  padding: 1em 2.6em;
  border-radius: 1.7em;
  text-align: center;
  white-space: nowrap;
  text-decoration: none !important;
  cursor: pointer;
  color: var(--sb-animated-color);
  border: 1px solid var(--sb-animated-border-color);
  background: linear-gradient(var(--sb-animated-rad), var(--sb-animated-back), var(--sb-animated-back2), var(--sb-animated-back3));
  transition: all 0.5s, --sb-animated-color 0.5s, --sb-animated-border-color 0.5s, --sb-animated-rad 0.5s, --sb-animated-back 0.5s, --sb-animated-back2 0.5s, --sb-animated-back3 0.5s;
  --sb-rad: 176deg;
  --sb-back: #78c4ff8a;
  --sb-back2: #ffffff00;
  --sb-border-color: #fff;
  --sb-animated-rad: var(--sb-rad);
  --sb-animated-back: var(--sb-back);
  --sb-animated-back2: var(--sb-back2, var(--sb-back));
  --sb-animated-back3: var(--sb-back3, var(--sb-back2, var(--sb-back)));
  --sb-animated-border-color: var(--sb-border-color);
  --sb-animated-color: var(--sb-color);
  --sb-back: #333;
  --sb-back2: #333;
  --sb-back3: #333;
  --sb-hover-back: #222;
  --sb-hover-back2: #222;
  --sb-hover-back3: #222;
  --sb-color: #fff;
  --sb-hover-color: #fafafa;
  --sb-border-color: #333;
  --sb-hover-border-color: #333;
}
@property --sb-animated-rad {
  syntax: '<color>';
  initial-value: 0deg;
  inherits: false;
}
@property --sb-animated-back {
  syntax: '<color>';
  initial-value: #ffffff00;
  inherits: false;
}
@property --sb-animated-back2 {
  syntax: '<color>';
  initial-value: #ffffff00;
  inherits: false;
}
@property --sb-animated-back3 {
  syntax: '<color>';
  initial-value: #ffffff00;
  inherits: false;
}
@property --sb-animated-border-color {
  syntax: '<color>';
  initial-value: 0deg;
  inherits: false;
}
@property --sb-animated-color {
  syntax: '<color>';
  initial-value: 0deg;
  inherits: false;
}
.site-button.black:hover,
.site-button--black:hover,
.site-button.black:active,
.site-button--black:active {
  --sb-animated-color: var(--sb-hover-color, var(--sb-color));
  --sb-animated-border-color: var(--sb-hover-border-color, var(--sb-border-color));
  --sb-animated-rad: var(--sb-hover-rad, var(--sb-rad));
  --sb-animated-back: var(--sb-hover-back, var(--sb-back));
  --sb-animated-back2: var(--sb-hover-back2, var(--sb-back2, var(--sb-back)));
  --sb-animated-back3: var(--sb-hover-back3, var(--sb-hover-back2, var(--sb-back3, var(--sb-back2, var(--sb-back)))));
}
.site-button.black:not(.trans-white, .site-button--trans-white, .white, .site-button--white, .black, .site-button--black, .blue, .site-button--blue),
.site-button--black:not(.trans-white, .site-button--trans-white, .white, .site-button--white, .black, .site-button--black, .blue, .site-button--blue) {
  --sb-color: #BEE3FF;
  --sb-hover-color: #fff;
  --sb-border-color: #4f697d;
  --sb-hover-border-color: #78C4FF;
  --sb-hover-back: #61baff;
}
.site-button.black.top-space,
.site-button--black.top-space {
  margin-top: 1em;
}
.site-button.blue,
.site-button--blue {
  display: inline-flex;
  gap: 0 0.5em;
  align-items: center;
  justify-content: center;
  padding: 1em 2.6em;
  border-radius: 1.7em;
  text-align: center;
  white-space: nowrap;
  text-decoration: none !important;
  cursor: pointer;
  color: var(--sb-animated-color);
  border: 1px solid var(--sb-animated-border-color);
  background: linear-gradient(var(--sb-animated-rad), var(--sb-animated-back), var(--sb-animated-back2), var(--sb-animated-back3));
  transition: all 0.5s, --sb-animated-color 0.5s, --sb-animated-border-color 0.5s, --sb-animated-rad 0.5s, --sb-animated-back 0.5s, --sb-animated-back2 0.5s, --sb-animated-back3 0.5s;
  --sb-rad: 176deg;
  --sb-back: #78c4ff8a;
  --sb-back2: #ffffff00;
  --sb-border-color: #fff;
  --sb-color: #fff;
  --sb-animated-rad: var(--sb-rad);
  --sb-animated-back: var(--sb-back);
  --sb-animated-back2: var(--sb-back2, var(--sb-back));
  --sb-animated-back3: var(--sb-back3, var(--sb-back2, var(--sb-back)));
  --sb-animated-border-color: var(--sb-border-color);
  --sb-animated-color: var(--sb-color);
  --sb-back: #134F7E;
  --sb-back2: #134F7E;
  --sb-back3: #134F7E;
  --sb-hover-back: #154062;
  --sb-hover-back2: #154062;
  --sb-hover-back3: #154062;
  --sb-color: #D4D4D4;
  --sb-hover-color: #D4D4D4;
  --sb-border-color: #134F7E;
  --sb-hover-border-color: #194B72;
}
@property --sb-animated-rad {
  syntax: '<color>';
  initial-value: 0deg;
  inherits: false;
}
@property --sb-animated-back {
  syntax: '<color>';
  initial-value: #ffffff00;
  inherits: false;
}
@property --sb-animated-back2 {
  syntax: '<color>';
  initial-value: #ffffff00;
  inherits: false;
}
@property --sb-animated-back3 {
  syntax: '<color>';
  initial-value: #ffffff00;
  inherits: false;
}
@property --sb-animated-border-color {
  syntax: '<color>';
  initial-value: 0deg;
  inherits: false;
}
@property --sb-animated-color {
  syntax: '<color>';
  initial-value: 0deg;
  inherits: false;
}
.site-button.blue:hover,
.site-button--blue:hover,
.site-button.blue:active,
.site-button--blue:active {
  --sb-animated-color: var(--sb-hover-color, var(--sb-color));
  --sb-animated-border-color: var(--sb-hover-border-color, var(--sb-border-color));
  --sb-animated-rad: var(--sb-hover-rad, var(--sb-rad));
  --sb-animated-back: var(--sb-hover-back, var(--sb-back));
  --sb-animated-back2: var(--sb-hover-back2, var(--sb-back2, var(--sb-back)));
  --sb-animated-back3: var(--sb-hover-back3, var(--sb-hover-back2, var(--sb-back3, var(--sb-back2, var(--sb-back)))));
}
.site-button.blue:not(.trans-white, .site-button--trans-white, .white, .site-button--white, .black, .site-button--black, .blue, .site-button--blue),
.site-button--blue:not(.trans-white, .site-button--trans-white, .white, .site-button--white, .black, .site-button--black, .blue, .site-button--blue) {
  --sb-color: #BEE3FF;
  --sb-hover-color: #fff;
  --sb-border-color: #4f697d;
  --sb-hover-border-color: #78C4FF;
  --sb-hover-back: #61baff;
}
.site-button.blue.top-space,
.site-button--blue.top-space {
  margin-top: 1em;
}
.site-buttons {
  margin-top: 2em;
}
.dark-frame,
.white-frame,
.shaded-frame {
  --df-light-back: #3A5F7D;
  --df-dark-back: #0B1722;
  --df-rad: 169deg;
  padding: 1.4em;
  border-radius: 1em;
  border: 1px solid #3D4D5B;
  background: linear-gradient(var(--df-rad), var(--df-light-back), var(--df-dark-back), var(--df-dark-back), var(--df-dark-back), var(--df-dark-back));
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.16);
}
.dark-frame .frame-title,
.white-frame .frame-title,
.shaded-frame .frame-title {
  font-weight: 500;
  font-size: 1em;
  margin-bottom: 0.7em;
}
.dark-frame .form-item input[type=text],
.white-frame .form-item input[type=text],
.shaded-frame .form-item input[type=text],
.dark-frame .form-item input[type=email],
.white-frame .form-item input[type=email],
.shaded-frame .form-item input[type=email],
.dark-frame .form-item input[type=tel],
.white-frame .form-item input[type=tel],
.shaded-frame .form-item input[type=tel],
.dark-frame .form-item input[type=password],
.white-frame .form-item input[type=password],
.shaded-frame .form-item input[type=password],
.dark-frame .form-item textarea,
.white-frame .form-item textarea,
.shaded-frame .form-item textarea,
.dark-frame .form-item select,
.white-frame .form-item select,
.shaded-frame .form-item select {
  font-size: 1em;
  display: inline-flex;
  box-sizing: border-box;
  background: #3b3b3b21;
  box-shadow: inset 0 0 3px 1px #0000001a;
  border: 1px solid #c5c5c542;
  padding: 0.4em 0.5em;
  outline: 0;
  margin: 0.1px 0;
  border-radius: 0.5em;
  width: 100%;
  min-width: 50px;
  color: #54bfff;
}
.dark-frame .form-item input[type=text]::placeholder,
.white-frame .form-item input[type=text]::placeholder,
.shaded-frame .form-item input[type=text]::placeholder,
.dark-frame .form-item input[type=email]::placeholder,
.white-frame .form-item input[type=email]::placeholder,
.shaded-frame .form-item input[type=email]::placeholder,
.dark-frame .form-item input[type=tel]::placeholder,
.white-frame .form-item input[type=tel]::placeholder,
.shaded-frame .form-item input[type=tel]::placeholder,
.dark-frame .form-item input[type=password]::placeholder,
.white-frame .form-item input[type=password]::placeholder,
.shaded-frame .form-item input[type=password]::placeholder,
.dark-frame .form-item textarea::placeholder,
.white-frame .form-item textarea::placeholder,
.shaded-frame .form-item textarea::placeholder,
.dark-frame .form-item select::placeholder,
.white-frame .form-item select::placeholder,
.shaded-frame .form-item select::placeholder {
  color: #636363;
  font-weight: 200;
}
.dark-frame .form-type--checkbox,
.white-frame .form-type--checkbox,
.shaded-frame .form-type--checkbox {
  display: flex;
  gap: 0.8em;
  color: #6a6a6a;
  font-size: 0.9em;
}
.dark-frame .form-type--checkbox label,
.white-frame .form-type--checkbox label,
.shaded-frame .form-type--checkbox label {
  font-weight: 400;
}
.dark-frame .form-type--checkbox label a,
.white-frame .form-type--checkbox label a,
.shaded-frame .form-type--checkbox label a {
  font-size: 0.9em;
  color: #999999;
}
.shaded-frame {
  --df-dark-back: transparent;
}
.white-frame {
  --df-light-back: #fff;
  --df-dark-back: #fff;
  color: #333;
}
.flat-dark-frame {
  --df-light-back: #3A5F7D;
  --df-dark-back: #0B1722;
  --df-rad: 169deg;
  padding: 1.4em;
  border-radius: 1em;
  border: 1px solid #3D4D5B;
  background: linear-gradient(var(--df-rad), var(--df-light-back), var(--df-dark-back), var(--df-dark-back), var(--df-dark-back), var(--df-dark-back));
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.16);
  --df-rad: 90deg;
  background: linear-gradient(var(--df-rad), var(--df-light-back), var(--df-dark-back));
}
.flat-dark-frame .frame-title {
  font-weight: 500;
  font-size: 1em;
  margin-bottom: 0.7em;
}
.flat-dark-frame .form-item input[type=text],
.flat-dark-frame .form-item input[type=email],
.flat-dark-frame .form-item input[type=tel],
.flat-dark-frame .form-item input[type=password],
.flat-dark-frame .form-item textarea,
.flat-dark-frame .form-item select {
  font-size: 1em;
  display: inline-flex;
  box-sizing: border-box;
  background: #3b3b3b21;
  box-shadow: inset 0 0 3px 1px #0000001a;
  border: 1px solid #c5c5c542;
  padding: 0.4em 0.5em;
  outline: 0;
  margin: 0.1px 0;
  border-radius: 0.5em;
  width: 100%;
  min-width: 50px;
  color: #54bfff;
}
.flat-dark-frame .form-item input[type=text]::placeholder,
.flat-dark-frame .form-item input[type=email]::placeholder,
.flat-dark-frame .form-item input[type=tel]::placeholder,
.flat-dark-frame .form-item input[type=password]::placeholder,
.flat-dark-frame .form-item textarea::placeholder,
.flat-dark-frame .form-item select::placeholder {
  color: #636363;
  font-weight: 200;
}
.flat-dark-frame .form-type--checkbox {
  display: flex;
  gap: 0.8em;
  color: #6a6a6a;
  font-size: 0.9em;
}
.flat-dark-frame .form-type--checkbox label {
  font-weight: 400;
}
.flat-dark-frame .form-type--checkbox label a {
  font-size: 0.9em;
  color: #999999;
}
.modal-frame {
  --mf-drop-back: #00000033;
  --mf-drop-backfilter: blur(2px);
  --mf-drop-padding: 1.8em 1em;
  --mf-border: 1px solid #ccc;
  --mf-shadow: 0 0 4px #00000033;
  --mf-back: #fff;
  --mf-radius: 1em;
  --mf-padding: 1em;
  --mf-width: 90%;
  --mf-max-width: 90em;
  --mf-max-height: 100%;
  --mf-scroll-width: 10px;
  --mf-scroll-back: #555;
  --mf-scroll-thumb-back: darkgrey;
  --mf-scroll-thumb-outline: 1px solid #555;
  --mf-scroll-radius: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: fixed;
  padding: var(--mf-drop-padding);
  z-index: 3000;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.modal-frame:not(.opened) {
  display: none;
}
.modal-frame .modal-drop {
  flex: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--mf-drop-back);
  backdrop-filter: var(--mf-drop-backfilter);
  z-index: 10;
}
.modal-frame .modal-box {
  display: flex;
  flex-direction: column;
  max-height: var(--mf-max-height);
  width: var(--mf-width);
  max-width: var(--mf-max-width);
  align-items: stretch;
  justify-content: stretch;
  z-index: 20;
  border: var(--mf-border);
  border-radius: var(--mf-radius);
  box-shadow: var(--mf-shadow);
  background: var(--mf-back);
}
.modal-frame .modal-box > :fist-child {
  border-start-start-radius: var(--mf-radius);
  border-start-end-radius: var(--mf-radius);
}
.modal-frame .modal-box > :last-child {
  border-end-start-radius: var(--mf-radius);
  border-end-end-radius: var(--mf-radius);
}
.modal-frame .modal-box > .modal-header,
.modal-frame .modal-box > .modal-body {
  padding: var(--mf-padding);
}
.modal-frame .modal-box > .modal-header {
  flex: 0 0 auto;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.modal-frame .modal-box > .modal-header .title {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}
.modal-frame .modal-box > .modal-header .dismiss {
  cursor: pointer;
  font-size: 1.5em;
  line-height: 0.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1em;
}
.modal-frame .modal-box > .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
}
.modal-frame .modal-box > .modal-body::-webkit-scrollbar {
  width: var(--mf-scroll-width);
  border-radius: var(--mf-scroll-radius);
}
.modal-frame .modal-box > .modal-body::-webkit-scrollbar-track {
  background: var(--mf-scroll-back);
  border-radius: var(--mf-scroll-radius);
}
.modal-frame .modal-box > .modal-body::-webkit-scrollbar-thumb {
  background-color: var(--mf-scroll-thumb-back);
  outline: var(--mf-scroll-thumb-outline);
  border-radius: var(--mf-scroll-radius);
}
.characteristics-table {
  width: 100%;
  font-size: 0.8em;
}
.characteristics-table td {
  padding: 0.6em 0;
}
.characteristics-table td.name {
  padding-left: 0;
  padding-right: 1em;
  font-weight: 500;
  color: #a5a5a5;
}
.characteristics-table td.value {
  font-weight: 400;
  white-space: nowrap;
}
@media only screen and (min-width: 0) and (max-width: 767px) {
  .characteristics-table {
    font-size: 0.9em;
  }
  .characteristics-table tr td {
    border-bottom: 1px dashed #303e4d;
  }
}
.arsenal-page__title {
  font-size: 1.8em;
  font-weight: 600;
  padding: 1em 0;
  text-align: center;
}
.arsenal-page__groups {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5em;
  padding: 1em 0;
}
.arsenal-page__group {
  background: #202A34;
  box-sshadow: 0 0 4px #00000044;
  box-sizing: border-box;
  padding: 1em;
  border-radius: 1em;
  text-decoration: none;
}
.arsenal-page__group .imaged {
  overflow: hidden;
  border-radius: 1em;
  margin-bottom: 1em;
}
.arsenal-page__group .imaged img {
  width: 100%;
  height: auto;
}
.arsenal-page__group .titles {
  display: flex;
  gap: 1em;
  align-items: center;
}
.arsenal-page__group .title {
  font-size: 1.5em;
  color: #ebebeb;
}
.arsenal-page__group .count {
  font-size: 1.3em;
  color: #5d5d5d;
}
.arsenal-page__group .note {
  color: #6e8789;
}
.arsenal-page__group:hover {
  background: #2a3c4f;
}
.arsenal-page__group:hover .title {
  color: #e5a01c;
}
@media only screen and (min-width: 0) and (max-width: 767px) {
  .arsenal-page__groups {
    grid-template-columns: repeat(1, 1fr);
  }
}
.arsenal-group__buttons {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9em;
  padding: 1em  0;
  gap: 1em;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5em;
}
.arsenal-group__buttons .site-button {
  padding: 1em 1.2em;
}
.arsenal-group__buttons .site-button.active {
  background: #1d4263;
}
.arsenal-group__titles {
  display: flex;
  gap: 0.7em;
  font-size: 1.4em;
  align-items: baseline;
  justify-content: center;
}
.arsenal-group__titles .main {
  color: #b5b5b5;
}
.arsenal-group__titles .group {
  color: #ffffff;
}
.arsenal-group__description {
  text-align: center;
  padding: 1em 0;
  font-weight: 300;
  padding: 0 3em;
}
.arsenal-group__empty {
  color: #ccc;
  font-weight: 200;
}
.arsenal-group__weapons {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
}
.arsenal-group__weapon {
  background: #202A34;
  overflow: hidden;
  border-radius: 1em;
  margin-bottom: 1em;
  padding: 1.5em;
}
.arsenal-group__weapon .imaged {
  overflow: hidden;
  border-radius: 1em;
}
.arsenal-group__weapon .imaged img {
  width: 100%;
  height: auto;
}
.arsenal-group__weapon .titles {
  display: flex;
  gap: 0.8em;
  text-decoration: none;
  padding: 1.5em 0;
  align-items: baseline;
}
.arsenal-group__weapon .titles .name {
  font-size: 1.2em;
  font-weight: 600;
}
.arsenal-group__weapon .titles .analog {
  font-size: 0.9em;
  font-weight: 400;
  color: #ccc;
}
.arsenal-group__weapon .titles:hover .name {
  color: #e7a060;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .arsenal-group__weapons {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 0) and (max-width: 600px) {
  .arsenal-group__weapons {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 0) and (max-width: 767px) {
  .arsenal-group__buttons .site-button {
    flex: 1 1 auto;
  }
  .arsenal-group__weapons {
    grid-template-columns: repeat(1, 1fr);
  }
}
.arsenal-weapon__info {
  background: #202A34;
  display: flex;
  gap: 2em;
  align-items: start;
  border-radius: 1em;
  padding: 1.5em;
  display: grid;
  grid-template-areas: "image info" "description description";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}
.arsenal-weapon__info .imaged {
  grid-area: image;
  flex: 1 1 50%;
  border-radius: 1em;
  overflow: hidden;
}
.arsenal-weapon__info .imaged img {
  width: 100%;
  height: auto;
}
.arsenal-weapon__info .info {
  grid-area: info;
  flex: 1 1 50%;
}
.arsenal-weapon__info .info .titles {
  font-size: 0.8em;
  color: blue;
}
.arsenal-weapon__info .info .title {
  font-size: 1.8em;
  margin: 1em 0 0.4em 0;
}
.arsenal-weapon__info .info .analog {
  font-size: 1.2em;
  color: #4e817d;
}
.arsenal-weapon__info .info .characteristics-table {
  margin-top: 1.5em;
  font-size: 1em;
}
.arsenal-weapon__info .description {
  grid-area: description;
  font-weight: 200;
}
.arsenal-weapon__info .description p {
  line-height: 1.3em;
}
.arsenal-weapon__buttons {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9em;
  padding: 1em  0;
  gap: 1em;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5em;
}
.arsenal-weapon__buttons .site-button {
  padding: 1em 1.2em;
}
.arsenal-weapon__buttons .site-button.active {
  background: #1d4263;
}
.arsenal-weapon__cards {
  margin-top: 1.5em;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1em;
}
.arsenal-weapon__card {
  background: #202A34;
  text-decoration: none;
  border-radius: 1em;
  padding: 0.4em;
}
.arsenal-weapon__card .imaged {
  grid-area: image;
  flex: 1 1 50%;
  border-radius: 1em;
  overflow: hidden;
}
.arsenal-weapon__card .imaged img {
  width: 100%;
  height: auto;
}
.arsenal-weapon__card .title {
  padding: 0.6em;
}
.arsenal-weapon__card:hover,
.arsenal-weapon__card.active {
  background: #3f575f;
  color: #ddb75f;
}
@media only screen and (min-width: 992px) and (max-width: 1269px) {
  .arsenal-weapon__cards {
    grid-template-columns: repeat(34 1fr);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .arsenal-weapon__cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (min-width: 0) and (max-width: 767px) {
  .arsenal-weapon__info {
    grid-template-areas: "image" "info" "description";
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .arsenal-weapon__buttons .site-button {
    flex: 1 1 auto;
  }
  .arsenal-weapon__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}