:root {
  --rusc-orange: 237, 105, 57;
  --rusc-yellow: 254, 205, 59;
  --rusc-lightorange: 252, 235, 207;
  --rusc-navy: 46, 38, 90;

  --rusc-blue: 97, 156, 212;
  --rusc-darkblue: 65, 119, 170;
  --rusc-greenblue: 25, 175, 60;
  --rusc-darkgreenblue: 33, 134, 80;
  --rusc-pink: 237, 115, 176;
  --rusc-darkpink: 182, 78, 129;
  --rusc-red: 237, 105, 57;
  --rusc-darkred: 190, 79, 39;
  --rusc-gold: 208, 157, 9;
  --rusc-darkgold: 138, 112, 35;
  --rusc-cyan: 7, 144, 159;
  --rusc-darkcyan: 12, 112, 123;
  --rusc-green: 25, 175, 80;
  --rusc-darkgreen: 33, 134, 80;

  --rusc-black: 57, 57, 57;
  --rusc-grey: 179, 179, 179;
  --rusc-lightgrey: 244, 244, 244;
  --rusc-white: 255, 255, 255;
}

*,
h1,
h2,
h3,
h4,
h5,
p,
div,
section {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: default;
}

main,
section:not(.bg-orange) {
  max-width: 100vw;
}

a {
  text-decoration: none;
  color: inherit !important;
}

a,
a p {
  cursor: pointer;
}

/* helper classes: type */

.t-xxl-bold {
  font-family: "vag-rundschrift-d", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 0.9;
  font-size: clamp(7vw, 136px, 11.5vw);
  letter-spacing: 4px;
  text-wrap: balance;
}

.t-xl-bold {
  font-family: "vag-rundschrift-d", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  font-size: clamp(3.6vw, 70px, 7.8vw);
  letter-spacing: 1px;
  hyphens: manual;
  text-wrap: balance;
}

.t-xl {
  font-family: "vag-rundschrift-d", sans-serif;
  font-weight: 300;
  font-style: normal;
  line-height: 1;
  font-size: clamp(2.6vw, 50px, 7.8vw);
  letter-spacing: 1px;
  text-wrap: balance;
}

.t-large {
  font-family: "vag-rundschrift-d", sans-serif;
  font-weight: 300;
  font-style: normal;
  line-height: 1;
  font-size: clamp(2vw, 40px, 6.9vw);
  letter-spacing: 1px;
}

.icon-large {
  font-size: clamp(2vw, 40px, 6.9vw);
}

.t-body-l {
  font-family: "vag-rundschrift-d", sans-serif;
  font-weight: 300;
  font-style: normal;
  line-height: 1;
  font-size: clamp(1.5vw, 30px, 5vw);
  letter-spacing: 0.9px;
}

.t-body-m {
  font-family: "vag-rundschrift-d", sans-serif;
  font-weight: 300;
  font-style: normal;
  line-height: 1.1;
  font-size: clamp(1.15vw, 22px, 5vw);
  letter-spacing: 0.5px;
}

.t-body-m-bold {
  font-family: "vag-rundschrift-d", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.1;
  font-size: clamp(1.15vw, 22px, 5vw);
  letter-spacing: 0.5px;
}

.t-body-m.text-uppercase,
.t-body-m-bold.text-uppercase {
  letter-spacing: 2px;
}

.t-body-s {
  font-family: "vag-rundschrift-d", sans-serif;
  font-weight: 300;
  font-style: normal;
  line-height: 1.2;
  font-size: clamp(1vw, 16px, 4.4vw);
  letter-spacing: 0.75px;
}

.t-body-s-bold {
  font-family: "vag-rundschrift-d", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
  font-size: clamp(1vw, 16px, 4.4vw);
  letter-spacing: 0.75px;
}

.t-small {
  font-family: "vag-rundschrift-d", sans-serif;
  font-weight: 300;
  font-style: normal;
  line-height: 1;
  font-size: clamp(0.7vw, 14px, 4.3vw);
  letter-spacing: 2px;
}

.t-small-bold {
  font-family: "vag-rundschrift-d", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  font-size: clamp(0.7vw, 14px, 4.3vw);
  letter-spacing: 2px;
}

.t-xs {
  font-family: "vag-rundschrift-d", sans-serif;
  font-weight: 300;
  font-style: normal;
  line-height: 1.2;
  font-size: clamp(0.65vw, 13px, 3.75vw);
  letter-spacing: 1px;
}

.t-xs.text-uppercase {
  letter-spacing: 2px;
}

.t-xs-bold {
  font-family: "vag-rundschrift-d", sans-serif;
  font-weight: 400;
  line-height: 1.2;
  font-style: normal;
  font-size: clamp(0.65vw, 13px, 3.75vw);
  letter-spacing: 2px;
}

.t-xs .material-icons {
  position: relative;
  top: 2px;
  font-size: clamp(0.65vw, 13px, 3.75vw);
}

.icon-xl.material-icons {
  font-size: clamp(2vw, 56px, 6.9vw);
}

.number-l {
  width: 30px;
  height: 30px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  border-radius: 50%;
}

.number-l p {
  font-family: "vag-rundschrift-d", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.15vw, 22px, 5vw);
  color: white;
  text-align: center;
  line-height: 1;
  height: max-content;
}

.list-numbered {
  list-style-type: decimal;
}

.list-numbered li::marker {
  list-style-type: decimal;
  color: rgba(var(--rusc-navy));
  font-size: clamp(1vw, 16px, 4.4vw);
}

.list-dotted li::marker {
  color: rgba(var(--rusc-navy));
  list-style-type: dot !important;
}

/* helper classes: color */

.bg-lightorange {
  background-color: rgba(var(--rusc-lightorange));
  color: rgba(var(--rusc-black));
}

.bg-orange {
  background-color: rgba(var(--rusc-orange));
  color: rgba(var(--rusc-white));
}

.bg-yellow {
  background-color: rgba(var(--rusc-yellow));
  color: rgba(var(--rusc-black));
}

.bg-white {
  background-color: rgba(var(--rusc-white));
  color: rgba(var(--rusc-black));
}

.bg-navy {
  background-color: rgba(var(--rusc-navy));
  color: rgba(var(--rusc-white));
}

.bg-form-white {
  background-color: rgba(var(--rusc-white));
  color: rgba(var(--rusc-black));
}

.bg-form-white .form-label,
.bg-form-white h1,
.bg-form-white h2,
.bg-form-white h3,
.bg-form-white h4,
.fill-navy,
.bg-form-white .t-body-l {
  color: rgba(var(--rusc-navy));
}

.bg-form-white .btn.bg-white {
  color: rgba(var(--rusc-navy)) !important;
  border: 1px solid rgba(var(--rusc-navy));
}

.bg-form-white .list-results li::marker {
  color: rgba(var(--rusc-navy));
}

/* Governança, presa de decisions i democràcia */

.rusc-governanca .form-label,
.rusc-governanca h1,
.rusc-governanca h2,
.rusc-governanca h3,
.rusc-governanca h4,
.rusc-governanca .t-body-l {
  color: rgba(var(--rusc-darkblue));
}

.rusc-governanca .btn.bg-white {
  color: rgba(var(--rusc-blue)) !important;
  border: 1px solid rgba(var(--rusc-darkblue));
}

.rusc-governanca .number-l {
  background-color: rgba(var(--rusc-darkblue));
}

/* Persones, salut i benestar */

.rusc-personessalut .form-label,
.rusc-personessalut h1,
.rusc-personessalut h2,
.rusc-personessalut h3,
.rusc-personessalut h4,
.rusc-personessalut .t-body-l {
  color: rgba(var(--rusc-darkgold));
}

.rusc-personessalut .btn.bg-white {
  color: rgba(var(--rusc-blue)) !important;
  border: 1px solid rgba(var(--rusc-darkgold));
}

.rusc-personessalut .number-l {
  background-color: rgba(var(--rusc-darkgold));
}

/* Organització dels treballs, el temps i la corresponsabilitat */

.rusc-organitzacio .form-label,
.rusc-organitzacio h1,
.rusc-organitzacio h2,
.rusc-organitzacio h3,
.rusc-organitzacio h4,
.rusc-organitzacio .t-body-l {
  color: rgba(var(--rusc-darkcyan));
}

.rusc-organitzacio .btn.bg-white {
  color: rgba(var(--rusc-blue)) !important;
  border: 1px solid rgba(var(--rusc-darkcyan));
}

.rusc-organitzacio .number-l {
  background-color: rgba(var(--rusc-darkcyan));
}

/* Sostenibilitat econòmica */

.rusc-sostenibilitat .form-label,
.rusc-sostenibilitat h1,
.rusc-sostenibilitat h2,
.rusc-sostenibilitat h3,
.rusc-sostenibilitat h4,
.rusc-sostenibilitat .t-body-l {
  color: rgba(var(--rusc-darkpink));
}

.rusc-sostenibilitat .btn.bg-white {
  color: rgba(var(--rusc-blue)) !important;
  border: 1px solid rgba(var(--rusc-darkpink));
}

.rusc-sostenibilitat .number-l {
  background-color: rgba(var(--rusc-darkpink));
}

/* Qui som i cap a on anem? */

.rusc-quisom .form-label,
.rusc-quisom h1,
.rusc-quisom h2,
.rusc-quisom h3,
.rusc-quisom h4,
.rusc-quisom .t-body-l {
  color: rgba(var(--rusc-darkred));
}

.rusc-quisom .btn.bg-white {
  color: rgba(var(--rusc-blue)) !important;
  border: 1px solid rgba(var(--rusc-darkred));
}

.rusc-quisom .number-l {
  background-color: rgba(var(--rusc-darkred));
}

/* Activitats i projectes */

.rusc-activitats .form-label,
.rusc-activitats h1,
.rusc-activitats h2,
.rusc-activitats h3,
.rusc-activitats h4,
.rusc-activitats .t-body-l {
  color: rgba(var(--rusc-green));
}

.rusc-activitats .btn.bg-white {
  color: rgba(var(--rusc-blue)) !important;
  border: 1px solid rgba(var(--rusc-green));
}

.rusc-activitats .number-l {
  background-color: rgba(var(--rusc-green));
}

.fill-orange {
  color: rgba(var(--rusc-orange)) !important;
}

.fill-white {
  color: rgba(var(--rusc-white)) !important;
}

.fill-black {
  color: rgba(var(--rusc-black)) !important;
}

/* helper classes: buttons */

button.btn,
a.btn {
  width: max-content;
  text-wrap: nowrap;
}

.btn.bg-navy {
  border: 0;
  color: rgba(var(--rusc-white)) !important;
}

.btn.bg-white:hover {
  background-color: color-mix(
    in srgb,
    rgba(var(--rusc-white)) 100%,
    rgba(var(--rusc-navy)) 5%
  ) !important;
}

.btn.bg-navy:hover {
  background-color: color-mix(
    in srgb,
    rgba(var(--rusc-navy)) 100%,
    rgba(var(--rusc-white)) 10%
  );
}

.next-form {
  transition: background-color 0.2s, opacity 0.2s;
}

.download-element,
.download-element p,
.download-element span,
.download-element div {
  cursor: pointer;
}

.download-element {
  background-color: rgba(var(--rusc-navy));
  border-radius: 20px;
  text-decoration: none;
  padding: 40px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.download-element:hover {
  background-color: color-mix(
    in srgb,
    rgba(var(--rusc-navy)) 100%,
    rgba(var(--rusc-white)) 10%
  );
}

.download-element p {
  color: rgba(var(--rusc-white));
}

#rusc-canvas-main .return,
#rusc-canvas .return {
  position: absolute;
  top: 0;
  right: 0;
  transition: opacity 0.2s;
}

.hidden-return {
  opacity: 0;
}

#zoom-ui {
  position: absolute;
  top: 0;
  left: 0;
}

#zoom-ui button {
  cursor: pointer;
  width: 40px;
  height: 40px;
  position: relative;
}

#zoom-ui p {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 2px));
  font-size: clamp(1.5vw, 30px, 5vw);
  font-weight: 400;
}

@media only screen and (max-width: 992px) {
  #rusc-canvas-main .return,
  #rusc-canvas .return {
    top: 80px;
  }

  #zoom-ui {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: unset;
    left: unset;
    bottom: 25vh;
    right: 0;
  }

  #zoom-ui button {
    width: 60px;
    height: 60px;
    margin: 5px 0;
  }

  #zoom-ui p {
    font-size: clamp(2.6vw, 50px, 7.8vw);
    font-weight: 200;
    transform: translate(-50%, calc(-50% - 2px));
  }
}

.rusc-section .return {
  border: 1px solid rgba(var(--rusc-navy)) !important;
  color: rgba(var(--rusc-navy)) !important;
}

.rusc-section .return p {
  color: rgba(var(--rusc-navy)) !important;
}

/* helper classes: divider */

.bg-lightorange hr {
  opacity: 1;
  border: 0;
  margin: 0;
  height: 2px;
  border-bottom: 2px dotted rgba(var(--rusc-orange));
}

.bg-form-white hr {
  opacity: 1;
  border: 0;
  margin: 0;
  margin-top: 10rem;
  height: 2px;
  border-bottom: 2px dotted rgba(var(--rusc-navy));
}

hr.mt-5 {
  margin-top: 5rem !important;
}

/* helper classes: dimension */

.overflowx-hidden {
  overflow-x: hidden;
}

.mt-6 {
  margin-top: 6rem !important;
}

.min-100 {
  min-height: 100vh;
}

@media only screen and (min-width: 992px) {
  .min-md-100 {
    min-height: 100vh;
  }
}

.px-main {
  padding: 0 clamp(3.75vw, 150px, 7.8vw);
}

.pb-10 {
  padding-bottom: 10rem;
}

/* helper classes: accordions */

.accordion-button h4 {
  cursor: pointer;
  transition: color 0.2s;
}

.accordion-button:hover {
  color: color-mix(
    in srgb,
    rgba(var(--rusc-navy)) 100%,
    rgba(var(--rusc-white)) 20%
  );
}

.accordion-button:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
}

.accordion-button::after {
  background-image: var(--bs-accordion-btn-icon) !important;
}

.accordion-item {
  border: 2px dotted rgba(var(--rusc-grey));
}

.accordion-button:not(.collapsed) {
  background-color: rgba(var(--rusc-white));
  color: color-mix(
    in srgb,
    rgba(var(--rusc-navy)) 100%,
    rgba(var(--rusc-white)) 20%
  );
}

/* helper classes: illustration */

.hex-1,
.hex-2,
.hex-3 {
  position: relative;
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(100vw) rotate(0deg) translateY(-20vh);
  }
  60% {
    opacity: 1;
    transform: translateX(-10px) rotate(-20deg) translateY(-20vh);
  }
  80% {
    transform: translateX(0) rotate(-14deg) translateY(-20vh);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(-14deg) translateY(-20vh);
  }
}

.hex-1 {
  opacity: 0;
  transform: translateX(100vw) rotate(-14deg) translateY(-20vh);
  animation: bounceInRight 3s cubic-bezier(0.42, 0, 0.58, 1) 0.5s forwards;
}

.hex-2 {
  z-index: 2;
  transform: rotate(-14deg) translateX(5%);
}

.hex-3 {
  transform: rotate(8deg) translateX(-5%);
}

div:has(> .hex-3) {
  padding-top: 10%;
}

@media only screen and (max-width: 992px) {
  @keyframes bounceInRight {
    0% {
      opacity: 0;
      transform: translateX(100vw) rotate(0deg) translateY(-8vh);
    }
    60% {
      opacity: 1;
      transform: translateX(-20px) rotate(-20deg) translateY(-8vh);
    }
    80% {
      transform: translateX(0) rotate(-14deg) translateY(-8vh);
    }
    100% {
      opacity: 1;
      transform: translateX(0) rotate(-14deg) translateY(-8vh);
    }
  }

  .hex-1 {
    opacity: 0;
    transform: translateX(100vw) rotate(-14deg) translateY(-8vh);
    animation: bounceInRight 2s cubic-bezier(0.42, 0, 0.58, 1) 0.5s forwards;
  }

  .hex-2 {
    z-index: 2;
    transform: rotate(-14deg);
  }

  .hex-3 {
    transform: rotate(8deg) translateY(-25vw) translateX(-2vw);
  }

  div:has(> .hex-3) {
    padding-top: 0;
  }
}

.hex-1 p,
.hex-2 p,
.hex-3 p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

@media only screen and (max-width: 576px) {
  .hex-2 p,
  .hex-3 p {
    width: 90%;
  }
}

.hex-1 p {
  color: rgba(var(--rusc-orange));
}

.hex-2 p {
  color: rgba(var(--rusc-white));
}

.hex-3 p {
  color: rgba(var(--rusc-orange));
}

.hex-1 path {
  fill: rgba(var(--rusc-yellow));
}

.hex-2 path {
  fill: rgba(var(--rusc-orange));
}

.hex-3 path {
  fill: rgba(var(--rusc-white));
}

.circle-list {
  position: relative;
}

.circle-list path {
  fill: rgba(var(--rusc-white));
}

.circle-list div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

/* helper classes: footer */

.img-logo {
  max-width: 200px;
  margin-left: auto;
  cursor: pointer;
}

footer p a:hover {
  text-decoration: underline;
}

#floating-button {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10 !important;
  margin-top: 0;
}

#landing-button {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.bottom-bar {
  background-color: rgba(var(--rusc-orange), 0.9);
  backdrop-filter: blur(4px);
  color: rgba(var(--rusc-white));
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  z-index: 11 !important;
}

.bottom-bar img {
  max-height: 30px;
}

@media only screen and (max-width: 992px) {
  .bottom-bar {
    background-color: rgba(var(--rusc-orange));
    position: relative;
    top: 0;
    bottom: unset;
    left: unset;
  }

  #rusc-main .bottom-bar {
    background-color: rgba(var(--rusc-orange));
    position: fixed;
    top: 0;
    bottom: unset;
    left: unset;
  }
}

@media only screen and (min-width: 993px) {
  #floating-button {
    margin-right: clamp(3.75vw, 150px, 7.8vw) !important;
  }
}

/* helper classes: text bubble */

.text-bubble {
  position: sticky;
  top: 40vh;
  padding-bottom: 20vh;
  padding-top: 0;
  background-color: rgba(var(--rusc-lightorange));
}

.text-bubble:first-of-type {
  margin-top: 20vh;
  z-index: 1;
}

.text-bubble:nth-of-type(2) {
  z-index: 2;
}

.text-bubble:nth-of-type(3) {
  z-index: 3;
}

.text-bubble:nth-of-type(4) {
  z-index: 4;
}

.text-bubble:nth-of-type(5) {
  z-index: 5;
}

.text-bubble:nth-of-type(6) {
  z-index: 6;
  padding-bottom: 60vh;
}

.text-bubble p {
  width: max-content;
  max-width: 440px;
  border-radius: 0px 32px 32px 32px;
}

@media only screen and (max-width: 992px) {
  .text-bubble p {
    max-width: 100%;
  }
}

#sticky-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: visible !important;
  overflow-x: visible !important;
}

#scroll-fixed {
  padding-top: 6rem;
  display: unset;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 20vh;
}

@media only screen and (min-width: 993px) {
  .text-bubble {
    top: 20vh;
    padding-bottom: 20vh;
  }

  #scroll-fixed {
    padding-top: 20vh;
    top: 0;
    height: 100vh;
  }
}

/* helper classes: form */

input[type="text"],
input[type="email"] {
  background-color: rgba(var(--rusc-lightgrey));
  border: none;
  box-shadow: none !important;
  transition: background-color 0.2s;
  cursor: pointer;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder {
  color: color-mix(
    in srgb,
    rgba(var(--rusc-lightgrey)) 100%,
    rgba(var(--rusc-black)) 40%
  );
}

input[type="text"]:hover,
input[type="email"]:hover {
  background-color: color-mix(
    in srgb,
    rgba(var(--rusc-lightgrey)) 100%,
    rgba(var(--rusc-black)) 5%
  );
}

input[type="text"]:focus,
input[type="email"]:focus {
  background-color: color-mix(
    in srgb,
    rgba(var(--rusc-lightgrey)) 100%,
    rgba(var(--rusc-black)) 10%
  );
}

.form-check-input,
.form-check-label,
.form-check p {
  cursor: pointer;
}

.form-check p {
  height: max-content;
}

.form-check {
  position: relative;
}

.form-check input {
  opacity: 0;
}

.form-check .control-indicator {
  position: absolute;
  top: 4px;
  left: 0;
  height: 12px;
  width: 12px;
  border: 1px solid rgba(var(--rusc-grey));
  border-radius: 50%;
  pointer-events: none;
  transition: background 0.2s;
}

.form-check label:hover + .control-indicator,
.form-check input:hover + label + .control-indicator {
  background: rgba(var(--rusc-lightgrey));
}

.form-check input:checked ~ .control-indicator {
  background: rgba(var(--rusc-navy)) !important;
}

.form-check-rating {
  position: relative;
  width: max-content;
  height: max-content;
}

#form .form-check-rating input {
  height: 36px;
  width: 36px;
  opacity: 0;
}

.questionari-rating-section .form-check-rating input {
  height: 56px;
  width: 56px;
  opacity: 0;
}

.form-check-rating p {
  z-index: 2;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-60%) translateX(-50%);
  transition: color 0.2s;
}

.questionari-rating-section .form-check-rating p {
  font-size: clamp(1.15vw, 22px, 5vw);
  font-weight: 300;
}

#form .form-check-rating .control-indicator {
  position: absolute;
  top: 0px;
  left: 0;
  height: 36px;
  width: 36px;
  background-color: rgba(var(--rusc-lightgrey));
  box-shadow: 2px 2px 5px rgba(var(--rusc-grey));
  border-radius: 50%;
  pointer-events: none;
  transition: background 0.2s;
}

.questionari-rating-section .form-check-rating .control-indicator {
  position: absolute;
  top: 0px;
  left: 0;
  height: 56px;
  width: 56px;
  background-color: rgba(var(--rusc-lightgrey));
  box-shadow: 2px 2px 5px rgba(var(--rusc-grey));
  border-radius: 50%;
  pointer-events: none;
  transition: background 0.2s;
}

.form-check-rating input:hover + p + .control-indicator {
  background: color-mix(
    in srgb,
    rgba(var(--rusc-lightgrey)) 100%,
    rgba(var(--rusc-black)) 10%
  );
}

.form-check-rating input:checked + p + .control-indicator {
  background: rgba(var(--rusc-navy)) !important;
}

.form-check-rating input:checked + p {
  color: white;
}

.rating-ex {
  width: 100%;
}

#rating-ex-1,
#rating-ex-5 {
  width: 10px;
}

/* RUSC: results */

#rusc-canvas {
  position: fixed;
  right: 0;
  top: 0;
  overflow: hidden;
}

#rusc-canvas-main {
  position: fixed;
  right: 0;
  top: 0;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

#rusc-canvas-info {
  position: absolute;
  visibility: hidden;
  bottom: 0;
  background-color: transparent;
}

@media only screen and (max-width: 992px) {
  #rusc-text {
    z-index: 12 !important;
    margin-top: 40vh;
  }
}

.form-finished #rusc-canvas-info {
  visibility: visible;
}

#rusc-canvas-info li {
  list-style-type: upper-latin;
}

li::marker {
  font-weight: 400;
}

#text-mecanismes,
#text-reflexio {
  position: relative;
}

#text-mecanismes p,
#text-reflexio p {
  padding-left: 20px;
}

#text-mecanismes::before,
#text-reflexio::before {
  content: "";
  top: 2px;
  position: absolute;
  border-radius: 100%;
  width: clamp(0.65vw, 13px, 3.75vw);
  height: clamp(0.65vw, 13px, 3.75vw);
}

#text-reflexio {
  color: rgba(var(--rusc-orange));
}

#text-reflexio::before {
  background-color: rgba(var(--rusc-orange));
}

#text-mecanismes {
  color: rgba(var(--rusc-navy));
}

#text-mecanismes::before {
  background-color: rgba(var(--rusc-navy));
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(var(--rusc-navy));
  opacity: 0.3;
  display: none;
}

@media only screen and (max-width: 992px) {
  #rusc-canvas {
    position: relative;
    height: 60vh !important;
  }
}

#rusc-canvas-main canvas,
#rusc-canvas canvas {
  cursor: grab;
}

#rusc-canvas-main canvas:active,
#rusc-canvas canvas:active {
  cursor: grabbing;
}

#rusc-text {
  transition: transform 0.4s;
}

.rusc-section {
  transition: opacity 0.4s;
}

.rusc-hidden {
  display: none !important;
}

.rusc-main-hidden {
  transform: translateX(-100%);
}

@media only screen and (max-width: 992px) {
  #rusc-text {
    transition: transform 0.8s;
  }

  .rusc-main-hidden {
    transform: translateY(100%);
  }
}

.rusc-main-hidden .rusc-section {
  opacity: 0;
}