.component-hotspot {
  --_hotspotColor: #9D0303;
  --_activeHotspotColor: #000000;
  --_popupBackgroundColor: #000000;
  --_popupColor: #ffffff; }
  .component-hotspot.hotspot-active_red,
  .component-hotspot .hotspot-active_red {
    --_activeHotspotColor: #9D0303; }
  .component-hotspot.hotspot-active_white,
  .component-hotspot .hotspot-active_white {
    --_activeHotspotColor: #ffffff; }
  .component-hotspot.hotspot-active_black,
  .component-hotspot .hotspot-active_black {
    --_activeHotspotColor: #000000; }
  .component-hotspot.hotspot-active_custom,
  .component-hotspot .hotspot-active_custom {
    --_activeHotspotColor: var(--_hotspotActiveColorCustom, #000000); }
  .component-hotspot.hotspot-active_focus .hotspot-action-images,
  .component-hotspot .hotspot-active_focus .hotspot-action-images {
    aspect-ratio: 1;
    overflow: hidden;
    border: 2px solid red;
    border-radius: 100%; }
  .component-hotspot.hotspot-active_focus .hotspot-image.lower-image,
  .component-hotspot .hotspot-active_focus .hotspot-image.lower-image {
    overflow: hidden; }
    .component-hotspot.hotspot-active_focus .hotspot-image.lower-image .hotspot,
    .component-hotspot .hotspot-active_focus .hotspot-image.lower-image .hotspot {
      z-index: 1; }
      .component-hotspot.hotspot-active_focus .hotspot-image.lower-image .hotspot.active,
      .component-hotspot .hotspot-active_focus .hotspot-image.lower-image .hotspot.active {
        z-index: 0;
        -webkit-box-shadow: 0 0 0 10000px rgba(0, 0, 0, 0.5);
                box-shadow: 0 0 0 10000px rgba(0, 0, 0, 0.5);
        border-radius: 100%;
        border: 2px solid #9D0303;
        height: 75px;
        width: 75px; }
        @media (min-width: 1280px) {
          .component-hotspot.hotspot-active_focus .hotspot-image.lower-image .hotspot.active,
          .component-hotspot .hotspot-active_focus .hotspot-image.lower-image .hotspot.active {
            height: 150px;
            width: 150px; } }
        .component-hotspot.hotspot-active_focus .hotspot-image.lower-image .hotspot.active button,
        .component-hotspot .hotspot-active_focus .hotspot-image.lower-image .hotspot.active button {
          opacity: 0;
          width: 100%;
          height: 100%; }
  .component-hotspot.hotspot_red,
  .component-hotspot .hotspot_red {
    --_hotspotColor: #9D0303; }
  .component-hotspot.hotspot_white,
  .component-hotspot .hotspot_white {
    --_hotspotColor: #ffffff; }
  .component-hotspot.hotspot_black,
  .component-hotspot .hotspot_black {
    --_hotspotColor: #000000; }
  .component-hotspot.hotspot_transparent,
  .component-hotspot .hotspot_transparent {
    --_hotspotColor: transparent; }
  .component-hotspot.hotspot_custom,
  .component-hotspot .hotspot_custom {
    --_hotspotColor: var(--_hotspotColorCustom, #9D0303); }
  .component-hotspot.popup-color_red,
  .component-hotspot .popup-color_red {
    --_popupBackgroundColor: #9D0303;
    --_popupColor: #ffffff; }
  .component-hotspot.popup-color_white,
  .component-hotspot .popup-color_white {
    --_popupBackgroundColor: #ffffff;
    --_popupColor: #000000; }
  .component-hotspot.popup-color_black,
  .component-hotspot .popup-color_black {
    --_popupBackgroundColor: #000000;
    --_popupColor: #ffffff; }
  .component-hotspot.popup-color_match,
  .component-hotspot .popup-color_match {
    --_popupBackgroundColor:var(--_activeHotspotColor); }
  .component-hotspot.popup-color_custom,
  .component-hotspot .popup-color_custom {
    --_popupBackgroundColor: var(--_popupBackgroundColorCustom, #000000); }
  .component-hotspot.popup-text_white,
  .component-hotspot .popup-text_white {
    --_popupColor: #ffffff; }
  .component-hotspot.popup-text_black,
  .component-hotspot .popup-text_black {
    --_popupColor: #000000; }
  .component-hotspot.popup-text_custom,
  .component-hotspot .popup-text_custom {
    --_popupColor: var(--_popupTextColorCustom, #000000); }
  .component-hotspot .hotspot-image {
    position: relative; }
    .component-hotspot .hotspot-image > a {
      background: transparent;
      border: none; }
    .component-hotspot .hotspot-image img {
      width: 100%; }
    .component-hotspot .hotspot-image .hotspot {
      --_transitionTime: 200ms;
      position: absolute;
      top: var(--_top, 0);
      left: var(--_left, 0);
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); }
      .component-hotspot .hotspot-image .hotspot button, .component-hotspot .hotspot-image .hotspot a {
        background: transparent;
        border: 0;
        padding: 0;
        border-radius: 50%;
        color: var(--_hotspotColor);
        padding: 5px;
        -webkit-transition: color var(--_transitionTime);
        transition: color var(--_transitionTime);
        border: 2px solid transparent; }
        .component-hotspot .hotspot-image .hotspot button:focus-visible, .component-hotspot .hotspot-image .hotspot a:focus-visible {
          outline: 2px solid #ffffff;
          border: 2px solid #027DB4; }
      .component-hotspot .hotspot-image .hotspot.active button {
        color: var(--_activeHotspotColor); }
      .component-hotspot .hotspot-image .hotspot.active .hotspot-action-content {
        visibility: visible;
        opacity: 1;
        -webkit-transition: opacity var(--_transitionTime);
        transition: opacity var(--_transitionTime); }
      .component-hotspot .hotspot-image .hotspot.active.focus {
        -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.7);
                box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.7);
        border-radius: 100%;
        border: 1px solid #9D0303;
        height: 150px;
        width: 150px; }
        .component-hotspot .hotspot-image .hotspot.active.focus button {
          display: none; }
      .component-hotspot .hotspot-image .hotspot .hotspot-action-content {
        position: absolute;
        opacity: 0;
        background-color: var(--_popupBackgroundColor);
        padding: 10px;
        width: 140px;
        visibility: hidden;
        -webkit-transition: opacity var(--_transitionTime), var(--_transitionTime) visibility;
        transition: opacity var(--_transitionTime), var(--_transitionTime) visibility; }
        .component-hotspot .hotspot-image .hotspot .hotspot-action-content .text,
        .component-hotspot .hotspot-image .hotspot .hotspot-action-content .header {
          color: var(--_popupColor); }
        .component-hotspot .hotspot-image .hotspot .hotspot-action-content:after {
          content: "";
          position: absolute;
          height: 48px;
          width: 0;
          left: 50%;
          border: 1px solid var(--_popupBackgroundColor); }
      .component-hotspot .hotspot-image .hotspot.pop-left .hotspot-action-content {
        right: 0; }
        .component-hotspot .hotspot-image .hotspot.pop-left .hotspot-action-content:after {
          -webkit-transform: rotate(-45deg);
                  transform: rotate(-45deg); }
      .component-hotspot .hotspot-image .hotspot.pop-right .hotspot-action-content {
        left: 0px; }
        .component-hotspot .hotspot-image .hotspot.pop-right .hotspot-action-content:after {
          -webkit-transform: rotate(45deg);
                  transform: rotate(45deg); }
      .component-hotspot .hotspot-image .hotspot.pop-up .hotspot-action-content {
        bottom: 70px; }
        .component-hotspot .hotspot-image .hotspot.pop-up .hotspot-action-content:after {
          top: 100%;
          -webkit-transform-origin: top center;
                  transform-origin: top center; }
      .component-hotspot .hotspot-image .hotspot.pop-down .hotspot-action-content {
        top: 70px; }
        .component-hotspot .hotspot-image .hotspot.pop-down .hotspot-action-content:after {
          bottom: 100%;
          -webkit-transform-origin: bottom center;
                  transform-origin: bottom center; }
      .component-hotspot .hotspot-image .hotspot.pop-down.pop-right .hotspot-action-content:after {
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg); }
      .component-hotspot .hotspot-image .hotspot.pop-down.pop-left .hotspot-action-content:after {
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg); }
  .component-hotspot.image-text .container {
    gap: 50px;
    display: grid;
    grid-template-columns: 1fr; }
    @media (max-width: 1023.98px) {
      .component-hotspot.image-text .container {
        max-width: 600px; } }
    @media (min-width: 1280px) {
      .component-hotspot.image-text .container {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        grid-template-columns: 1fr 1fr; }
        .component-hotspot.image-text .container .lower-image {
          grid-column: 1 / span 2; } }
  @media (min-width: 1280px) {
    .component-hotspot.image-text.reverse .container .upper-image {
      grid-column: 2;
      grid-row: 1; }
    .component-hotspot.image-text.reverse .container .text-holder {
      grid-column: 1;
      grid-row: 1; } }
  .component-hotspot.image-text.lower-image .upper-image .experience-component {
    display: none; }
    .component-hotspot.image-text.lower-image .upper-image .experience-component.active {
      display: block; }
  .component-hotspot.image-text.lower-image .upper-image.default .experience-component:nth-child(1) {
    display: block; }
  @media (max-width: 1023.98px) {
    .component-hotspot.image-text.lower-image .text-holder {
      grid-row: 1; }
    .component-hotspot.image-text.lower-image .upper-image {
      grid-row: 2; }
    .component-hotspot.image-text.lower-image .lower-image {
      grid-row: 3; } }
  .component-hotspot.action-swap-text .hotspot-action-content, .component-hotspot.action-swap-image .hotspot-action-content {
    display: none; }
  .component-hotspot .hotspot-action-images {
    max-width: 350px;
    margin: auto; }
  .component-hotspot.hotspot_transparent .hotspot,
  .component-hotspot .hotspot.hotspot_transparent {
    width: var(--_width, 45px);
    height: var(--_height, 45px);
    min-height: 45px;
    min-width: 45px;
    -webkit-transform: none;
            transform: none; }
    .component-hotspot.hotspot_transparent .hotspot a, .component-hotspot.hotspot_transparent .hotspot button,
    .component-hotspot .hotspot.hotspot_transparent a,
    .component-hotspot .hotspot.hotspot_transparent button {
      width: 100%;
      height: 100%; }
      .component-hotspot.hotspot_transparent .hotspot a:active, .component-hotspot.hotspot_transparent .hotspot button:active,
      .component-hotspot .hotspot.hotspot_transparent a:active,
      .component-hotspot .hotspot.hotspot_transparent button:active {
        background: transparent;
        border: 0;
        -webkit-box-shadow: none !important;
                box-shadow: none !important; }
      .component-hotspot.hotspot_transparent .hotspot a svg, .component-hotspot.hotspot_transparent .hotspot button svg,
      .component-hotspot .hotspot.hotspot_transparent a svg,
      .component-hotspot .hotspot.hotspot_transparent button svg {
        display: none; }
  .component-hotspot.editormode .hotspot:after {
    content: var(--_name);
    color: red;
    position: absolute;
    top: 100%;
    left: 0; }
  .component-hotspot.editormode .hotspot_transparent .hotspot,
  .component-hotspot.editormode .hotspot.hotspot_transparent {
    border: 1px solid red; }