/*July-19-2023*/
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;900");
:root {
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
  --ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
  --ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  --ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
  --ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
  --ease-in-sine: cubic-bezier(0.12, 0, 0.39, 0);
}

@keyframes spin-clockwise {
  to {
    transform: rotate(360deg);
  }
}
@keyframes spin-counterclockwise {
  to {
    transform: rotate(-360deg);
  }
}
@keyframes dashoffset {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes flash {
  0% {
    opacity: 0.2;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 0.2;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes pulse {
  0% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
@keyframes blink {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30%);
  }
}
@keyframes slideright {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(200%);
  }
}
@keyframes redraw {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
.fade-enter-active {
  transition: all 0.2s ease 0s;
}

.fade-enter-from {
  opacity: 0;
}

.fade-leave-active {
  transition: all 0.2s ease 0s;
}

.fade-leave-to {
  opacity: 0;
}

:export {
  site_scale: 1;
  scale_mode: width;
  breakpoints: mobile, tablet, desktop;
  breakpoint_mobile_width: 320;
  breakpoint_mobile_design_width: 375;
  breakpoint_mobile_design_height: 667;
  breakpoint_mobile_scale_min: 0.8533333333;
  breakpoint_mobile_scale_max: 1.9813333333;
  breakpoint_tablet_width: 744;
  breakpoint_tablet_design_width: 1024;
  breakpoint_tablet_design_height: 768;
  breakpoint_tablet_scale_min: 0.7265625;
  breakpoint_tablet_scale_max: 1.1708984375;
  breakpoint_desktop_width: 1200;
  breakpoint_desktop_design_width: 1600;
  breakpoint_desktop_design_height: 850;
  breakpoint_desktop_scale_min: 0.75;
  breakpoint_desktop_scale_max: 4.8;
}

:export {
  site_scale: 1;
  scale_mode: width;
  breakpoints: mobile, tablet, desktop;
  breakpoint_mobile_width: 320;
  breakpoint_mobile_design_width: 375;
  breakpoint_mobile_design_height: 667;
  breakpoint_mobile_scale_min: 0.8533333333;
  breakpoint_mobile_scale_max: 1.9813333333;
  breakpoint_tablet_width: 744;
  breakpoint_tablet_design_width: 1024;
  breakpoint_tablet_design_height: 768;
  breakpoint_tablet_scale_min: 0.7265625;
  breakpoint_tablet_scale_max: 1.1708984375;
  breakpoint_desktop_width: 1200;
  breakpoint_desktop_design_width: 1600;
  breakpoint_desktop_design_height: 850;
  breakpoint_desktop_scale_min: 0.75;
  breakpoint_desktop_scale_max: 4.8;
}

.type-dh1 {
  font-family: "Roboto";
  font-weight: 400;
  font-size: 8rem;
  font-size: clamp(40px, 8rem, 80px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
@media only screen and (max-width: 743px) {
  .type-dh1 {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 4rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
}

.type-dh2 {
  font-family: "Roboto";
  font-weight: 400;
  font-size: 6.4rem;
  font-size: clamp(32px, 6.4rem, 64px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
@media only screen and (max-width: 743px) {
  .type-dh2 {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 3.2rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
}

.type-h1 {
  font-family: "Roboto";
  font-weight: 400;
  font-size: 4.8rem;
  font-size: clamp(32px, 4.8rem, 48px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
@media only screen and (max-width: 743px) {
  .type-h1 {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 3.2rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
}

.type-h2 {
  font-family: "Roboto";
  font-weight: 400;
  font-size: 3.2rem;
  font-size: clamp(28px, 3.2rem, 32px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
@media only screen and (max-width: 743px) {
  .type-h2 {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 2.8rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
}

.type-h3 {
  font-family: "Roboto";
  font-weight: 400;
  font-size: 2.8rem;
  font-size: clamp(24px, 2.8rem, 28px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
@media only screen and (max-width: 743px) {
  .type-h3 {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 2.4rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
}

.type-h4 {
  font-family: "Roboto";
  font-weight: 400;
  font-size: 2.4rem;
  font-size: clamp(20px, 2.4rem, 24px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
@media only screen and (max-width: 743px) {
  .type-h4 {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 2rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
}

.type-body1 {
  font-family: "Roboto";
  font-weight: 400;
  font-size: 2.4rem;
  font-size: clamp(20px, 2.4rem, 24px);
  line-height: 1.4;
}
@media only screen and (max-width: 743px) {
  .type-body1 {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 2rem;
    line-height: 1.4;
  }
}

.type-body2 {
  font-family: "Roboto";
  font-weight: 400;
  font-size: 1.8rem;
  font-size: clamp(16px, 1.8rem, 18px);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
@media only screen and (max-width: 743px) {
  .type-body2 {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.4;
    letter-spacing: -0.01em;
  }
}

.type-body3 {
  font-family: "Roboto";
  font-weight: 400;
  font-size: 1.6rem;
  font-size: clamp(14px, 1.6rem, 16px);
  line-height: 1.4;
}
@media only screen and (max-width: 743px) {
  .type-body3 {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.4;
  }
}

.type-body4 {
  font-family: "Roboto";
  font-weight: 400;
  font-size: 1.4rem;
  font-size: clamp(14px, 1.4rem, 14px);
  line-height: 1.4;
}
@media only screen and (max-width: 743px) {
  .type-body4 {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.4;
  }
}
.type-body4 :deep(.co2) sub {
  font-size: 0.7em;
}

.type-button1 {
  font-family: "Roboto";
  font-weight: 400;
  font-size: 1.8rem;
  font-size: clamp(16px, 1.8rem, 18px);
  line-height: 1.4;
}
@media only screen and (max-width: 743px) {
  .type-button1 {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.4;
  }
}

.type-caption1 {
  font-family: "Roboto";
  font-weight: 400;
  font-size: 1.4rem;
  font-size: clamp(14px, 1.4rem, 14px);
  line-height: 1.4;
}
@media only screen and (max-width: 743px) {
  .type-caption1 {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.4;
  }
}

.type-code1 {
  font-family: "Roboto Mono";
  font-weight: 400;
  font-size: 4.8rem;
  font-size: clamp(32px, 4.8rem, 48px);
  line-height: 1.05;
  text-transform: uppercase;
}
@media only screen and (max-width: 743px) {
  .type-code1 {
    font-family: "Roboto Mono";
    font-weight: 400;
    font-size: 3.2rem;
    line-height: 1.05;
  }
}

.type-code2 {
  font-family: "Roboto Mono";
  font-weight: 400;
  font-size: 1.6rem;
  font-size: clamp(14px, 1.6rem, 16px);
  line-height: 1.05;
  text-transform: uppercase;
}
@media only screen and (max-width: 743px) {
  .type-code2 {
    font-family: "Roboto Mono";
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.05;
  }
}

.type-code3 {
  font-family: "Roboto Mono";
  font-weight: 400;
  font-size: 1.4rem;
  font-size: clamp(12px, 1.4rem, 14px);
  line-height: 1.05;
  text-transform: uppercase;
}
@media only screen and (max-width: 743px) {
  .type-code3 {
    font-family: "Roboto Mono";
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.05;
  }
}

.type-code4 {
  font-family: "Roboto Mono";
  font-weight: 400;
  font-size: 1.1rem;
  font-size: clamp(10px, 1.1rem, 11px);
  line-height: 1.05;
  text-transform: uppercase;
}
@media only screen and (max-width: 743px) {
  .type-code4 {
    font-family: "Roboto Mono";
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.05;
  }
}

.type-nav1 {
  font-family: "Roboto";
  font-weight: 400;
  font-size: 1.6rem;
  font-size: clamp(16px, 1.6rem, 16px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
@media only screen and (max-width: 743px) {
  .type-nav1 {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.05;
    letter-spacing: -0.01em;
  }
}

:root {
  --cl-debug: rgba(255,255,255,0.3);
  --cl-error: #DB3602;
  --cl-black: #000;
  --cl-white: #FFF;
  --cl-grey0: #636363;
  --cl-grey1: #828282;
  --cl-grey2: #A6A6A6;
  --cl-grey3: #C0C0C0;
  --cl-grey4: #E1E1E1;
  --cl-grey-100: #F5F6F7;
  --cl-grey-900: #0e0e0e;
  --cl-navy: #003347;
  --cl-blue: #015f83;
  --cl-success: #1B8632;
  --cl-error: red;
}

:root [theme=light] {
  --cl-theme-bg: var(--cl-black);
  --cl-theme-text: var(--cl-white);
  --cl-theme-text1: var(--cl-grey-100);
}
:root [theme=dark] {
  --cl-theme-bg: var(--cl-white);
  --cl-theme-text: var(--cl-black);
  --cl-theme-text1: var(--cl-grey-900);
}
:root [theme=navy] {
  --cl-theme-bg: var(--cl-navy);
  --cl-theme-text: var(--cl-white);
  --cl-theme-text1: var(--cl-grey-900);
}
:root [theme=blue] {
  --cl-theme-bg: var(--cl-blue);
  --cl-theme-text: var(--cl-white);
  --cl-theme-text1: var(--cl-grey-900);
}

:root {
  --grid-columns: 18;
  --grid-column-gap: 0px;
  --grid-side-margin: 20px;
  --scrollbar-width: 16px;
  --grid-max-width: 7680px;
  --grid-width-input: calc(100vw - var(--scrollbar-width));
  --grid-width: min(var(--grid-width-input) , var(--grid-max-width));
  --grid-total-gap: calc(var(--grid-columns) - 1) * var(--grid-column-gap);
  --grid-column-width: calc((var(--grid-width) - var(--grid-total-gap)) / var(--grid-columns) * 0.963);
  --col-start: 2;
  --col-end: 19;
}
:root.windows {
  --scrollbar-width: 14px;
}
.deviceTablet :root {
  --scrollbar-width: 0px;
}
@media only screen and (min-width: 744px) and (max-width: 1199px) {
  :root {
    --col-start: 1;
    --grid-columns: 16;
    --col-end: 17;
  }
}
@media only screen and (max-width: 743px) {
  :root {
    --grid-columns: 16;
    --col-start: 1;
    --col-end: 17;
  }
}
.devicePhone :root {
  --scrollbar-width: 0px;
}

.the-container {
  position: relative;
  width: var(--grid-width, 100%);
  max-width: 7680px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

.the-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  grid-column-gap: var(--grid-column-gap);
  padding: 0 var(--grid-side-margin);
}

.the-content {
  position: relative;
  grid-column: 6/span 11;
}
@media only screen and (min-width: 744px) and (max-width: 1199px) {
  .the-content {
    grid-column: 1/span 16;
  }
}
@media only screen and (max-width: 743px) {
  .the-content {
    grid-column: 1/span 16;
  }
}

:root {
  --p1: 0.8rem;
  --p2: 1.6rem;
  --p3: 2.4rem;
  --p4: 3.2rem;
  --p5: 4.0rem;
  --p6: 4.8rem;
  --p7: 5.6rem;
  --p8: 6.4rem;
  --p9: 7.2rem;
  --p10: 8.0rem;
  --p15: 12.0rem;
  --p20: 16.0rem;
}

.richtext a {
  text-decoration: underline;
}
.richtext ul {
  list-style-type: disc;
}
.richtext ol {
  list-style-type: decimal;
}
.richtext ul, .richtext ol {
  padding-left: calc(1em + var(--p1));
  font-family: "Roboto";
  font-weight: 400;
  font-size: 2.4rem;
  font-size: clamp(20px, 2.4rem, 24px);
  line-height: 1.4;
}
@media only screen and (max-width: 743px) {
  .richtext ul, .richtext ol {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 2rem;
    line-height: 1.4;
  }
}
.richtext ul li, .richtext ol li {
  padding-left: var(--p1);
}
.richtext h1, .richtext h2, .richtext h3, .richtext h4, .richtext h5 {
  margin-bottom: var(--p5);
  color: black;
}
.richtext h1:not(:first-child), .richtext h2:not(:first-child), .richtext h3:not(:first-child), .richtext h4:not(:first-child), .richtext h5:not(:first-child) {
  margin-top: var(--p10);
}
.richtext h1 {
  font-family: "Roboto";
  font-weight: 400;
  font-size: 6.4rem;
  font-size: clamp(32px, 6.4rem, 64px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
@media only screen and (max-width: 743px) {
  .richtext h1 {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 3.2rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
}
.richtext h2 {
  font-family: "Roboto";
  font-weight: 400;
  font-size: 4.8rem;
  font-size: clamp(32px, 4.8rem, 48px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
@media only screen and (max-width: 743px) {
  .richtext h2 {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 3.2rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
}
@media only screen and (max-width: 743px) {
  .richtext h2 {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 2.8rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
}
.richtext h3 {
  font-family: "Roboto";
  font-weight: 400;
  font-size: 3.2rem;
  font-size: clamp(28px, 3.2rem, 32px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
@media only screen and (max-width: 743px) {
  .richtext h3 {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 2.8rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
}
@media only screen and (max-width: 743px) {
  .richtext h3 {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 2.4rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
}
.richtext h4 {
  font-family: "Roboto";
  font-weight: 400;
  font-size: 2.4rem;
  font-size: clamp(20px, 2.4rem, 24px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
@media only screen and (max-width: 743px) {
  .richtext h4 {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 2rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
}
.richtext h5 {
  font-family: "Roboto";
  font-weight: 400;
  font-size: 1.8rem;
  font-size: clamp(16px, 1.8rem, 18px);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
@media only screen and (max-width: 743px) {
  .richtext h5 {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.4;
    letter-spacing: -0.01em;
  }
}