.logo-container {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 1000;
  pointer-events: none;
}

.logo {
  max-height: 120px;
  margin: 10px 0;
  transition: all 0.3s ease;
}

@media screen and (max-width: 768px) {
  .logo {
    max-height: 60px;
  }
}

.sticky-card {
  width: 90%;
  max-width: 400px;
  position: fixed;
  top: 10px;
  left: 10px;
  background-color: #fff;
  padding: 5px;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  /*gap: 10px;*/
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 1000;
  opacity: 1;
}

.sticky-card.hidden {
  transform: translateY(-120%);
  opacity: 0;
}

.sticky-card img {
  width: 100%;
  max-width: 100%;
  border-radius: 8px;
}

.sticky-card h1 {
  font-size: 1.5em;
  color: #333;
  margin: 10px 0;
  text-align: center;
  font-weight: bold;
}

.sticky-card p {
  font-size: 1em;
  color: #555;
  line-height: 1.5;
  text-align: center;
  margin: 0px;
}

.close-btn {
  margin-top: 15px;
  padding: 8px 16px;
  background-color: #ff5c5c;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background-color 0.3s;
}

.close-btn:hover {
  background-color: #ff2d2d;
}

.ubi-btn {
  margin-top: 15px;
  padding: 8px 16px;
  background-color: #0caeea;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background-color 0.3s;
}

.ubi-btn:hover {
  background-color: #0caeea;
}

.info-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  padding: 10px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  cursor: pointer;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
}

.info-btn:hover {
  background-color: #555;
}

@media (max-width: 768px) {
  .sticky-card {
    width: 90%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 16px;
  }

  .info-btn {
    display: block;
  }
}




/**
* ----------------------------------------------
*   USER SETTINGS
* ----------------------------------------------
*/
/**
PRIMARY COLOR
---
A CSS value. Set it and obtain SASS variables with assorted color combinations
that allows to maintain enhanced readability.
*/
/**
SMART CONTRAST
---
A boolean value. Recommended is true. This is the behavior of the computed colors by Quikster.
If true, computes all colors according to the primary color luminance
true
    Luminance > 50%
        Contrasted colors are darker
        Most contrasted color is black
        Accented contrasted colors are lighter
        Most accented contrasted color is white
    Luminance =< 50%
        Contrasted colors are lighter
        Most contrasted color is white
        Accented contrasted colors are darker
        Most accented contrasted color is black
false
    Luminance > 50%
        Contrasted colors are lighter
        Most contrasted color is white
        Accented contrasted colors are darker
        Most accented contrasted color is black
    Luminance =< 50%
        Contrasted colors are darker
        Most contrasted color is black
        Accented contrasted colors are lighter
        Most accented contrasted color is white
*/
/**
FONT SIZE UNIT
---
Determines the font size unit (em, rem, px, vw, vh, vmin, vmax etc)
*/
/**
FONT SIZE SOURCE
---
This is the default font size without any unit.
*/
/**
LARGEST FONT SIZE
---
This is the largest font size of the project
*/
/**
SMALLEST FONT SIZE
---
This is the smallest font size of the project
*/
/**
 DEFAULT FONT FAMILY
---
The default fallback/system font, used if no custom font is set
*/
/**
FONTS
---
Here you set your font families. Quikster supports local fonts, Google Fonts and web safe fonts
Add as much fonts as you want
Each font is identified with its number

For example:
font-family: qtr-font-family(1);
Will return
font-family: "Aaargh-webfont", Arial, sans-serif;
*/
/**
BREAK POINTS
---
Quikster supports 5 screen widths: Extra-small, small, medium, large and extra-large.
*/
/**
DEFAULT TRANSITION TIME
---
Set a default transition time for your project.
*/
/**
* ----------------------------------------------
*   DO NOT EDIT ANYTHING BELOW THIS LINE
* ----------------------------------------------
*/
@import url("https://fonts.googleapis.com/css?family=Exo:Light");
@import url("https://fonts.googleapis.com/css?family=Palanquin Dark");
body {
  line-height: 1em; }

h1,
h2,
h3,
h4,
h5,
h6,
th {
  font-family: "Palanquin Dark", Arial, sans-serif;
  font-weight: normal;
  margin-top: 1em;
  margin-bottom: 1em;
  line-height: 1em; }

h1 {
  font-size: 3.5em; }

h2 {
  font-size: 3em; }

h3 {
  font-size: 2.5em; }

h4 {
  font-size: 2em; }

h5 {
  font-size: 1.5em; }

h6 {
  font-size: 1em; }

button,
cite,
dd,
div,
dt,
fieldset,
figcaption,
figure,
input,
li,
p,
span,
table,
td,
textarea {
  font-family: "Exo", "Times New Roman", Georgia;
  font-weight: normal;
  line-height: 1.5em; }

p,
span {
  font-size: 1em; }

dl,
input,
ol,
select,
textarea,
ul,
table,
button {
  font-size: 16px; }

@media (min-width: 48em) and (max-width: 62em) {
  h1 {
    font-size: 3em; }

  h2 {
    font-size: 2.5em; }

  h3 {
    font-size: 2em; }

  h4 {
    font-size: 1.5em; }

  h5 {
    font-size: 1em; }

  h6 {
    font-size: 0.86667em; }

  dl,
  input,
  ol,
  p,
  select,
  textarea,
  ul,
  table,
  button {
    font-size: 11.73333px; } }
@media (min-width: 34em) and (max-width: 48em) {
  h1 {
    font-size: 2.5em; }

  h2 {
    font-size: 2em; }

  h3 {
    font-size: 1.5em; }

  h4 {
    font-size: 1em; }

  h5 {
    font-size: 0.86667em; }

  h6 {
    font-size: 0.73333em; }

  dl,
  input,
  ol,
  p,
  select,
  textarea,
  ul,
  table,
  button {
    font-size: 9.6px; } }
@media (max-width: 34em) {
  h1 {
    font-size: 2em; }

  h2 {
    font-size: 1.5em; }

  h3 {
    font-size: 1em; }

  h4 {
    font-size: 0.86667em; }

  h5 {
    font-size: 0.73333em; }

  h6 {
    font-size: 0.6em; }

  dl,
  input,
  ol,
  p,
  select,
  textarea,
  ul,
  table,
  button {
    font-size: 7.46667px; } }
.row:after {
  content: '';
  display: block;
  clear: both; }
.row > div[class^="col-"], .row > div[class*=" col-"] {
  float: left;
  box-sizing: border-box;
  -webkit-transition: width 300ms, height 300ms;
  -moz-transition: width 300ms, height 300ms;
  -ms-transition: width 300ms, height 300ms;
  transition: width 300ms, height 300ms; }
  .row > div[class^="col-"]:empty:after, .row > div[class*=" col-"]:empty:after {
    content: '_';
    visibility: hidden;
    font-size: 0; }
.row > div.col-12 {
  width: 100%; }
.row > div.col-11 {
  width: 91.6666%; }
.row > div.col-10 {
  width: 83.3333%; }
.row > div.col-9 {
  width: 75%; }
.row > div.col-8 {
  width: 66.6666%; }
.row > div.col-7 {
  width: 58.3333%; }
.row > div.col-6 {
  width: 50%; }
.row > div.col-5 {
  width: 41.6666%; }
.row > div.col-4 {
  width: 33.3333%; }
.row > div.col-3 {
  width: 25%; }
.row > div.col-2 {
  width: 16.6666%; }
.row > div.col-1 {
  width: 8.3333%; }
.row > div.col-0 {
  width: 0%; }
@media (min-width: 75em) {
  .row > div.col-xl-12 {
    width: 100%; }
  .row > div.col-xl-11 {
    width: 91.6666%; }
  .row > div.col-xl-10 {
    width: 83.3333%; }
  .row > div.col-xl-9 {
    width: 75%; }
  .row > div.col-xl-8 {
    width: 66.6666%; }
  .row > div.col-xl-7 {
    width: 58.3333%; }
  .row > div.col-xl-6 {
    width: 50%; }
  .row > div.col-xl-5 {
    width: 41.6666%; }
  .row > div.col-xl-4 {
    width: 33.3333%; }
  .row > div.col-xl-3 {
    width: 25%; }
  .row > div.col-xl-2 {
    width: 16.6666%; }
  .row > div.col-xl-1 {
    width: 8.3333%; }
  .row > div.col-xl-0 {
    width: 0%; } }
@media (min-width: 62em) and (max-width: 75em) {
  .row > div.col-lg-12 {
    width: 100%; }
  .row > div.col-lg-11 {
    width: 91.6666%; }
  .row > div.col-lg-10 {
    width: 83.3333%; }
  .row > div.col-lg-9 {
    width: 75%; }
  .row > div.col-lg-8 {
    width: 66.6666%; }
  .row > div.col-lg-7 {
    width: 58.3333%; }
  .row > div.col-lg-6 {
    width: 50%; }
  .row > div.col-lg-5 {
    width: 41.6666%; }
  .row > div.col-lg-4 {
    width: 33.3333%; }
  .row > div.col-lg-3 {
    width: 25%; }
  .row > div.col-lg-2 {
    width: 16.6666%; }
  .row > div.col-lg-1 {
    width: 8.3333%; }
  .row > div.col-lg-0 {
    width: 0%; } }
@media (min-width: 48em) and (max-width: 62em) {
  .row > div.col-md-12 {
    width: 100%; }
  .row > div.col-md-11 {
    width: 91.6666%; }
  .row > div.col-md-10 {
    width: 83.3333%; }
  .row > div.col-md-9 {
    width: 75%; }
  .row > div.col-md-8 {
    width: 66.6666%; }
  .row > div.col-md-7 {
    width: 58.3333%; }
  .row > div.col-md-6 {
    width: 50%; }
  .row > div.col-md-5 {
    width: 41.6666%; }
  .row > div.col-md-4 {
    width: 33.3333%; }
  .row > div.col-md-3 {
    width: 25%; }
  .row > div.col-md-2 {
    width: 16.6666%; }
  .row > div.col-md-1 {
    width: 8.3333%; }
  .row > div.col-md-0 {
    width: 0%; } }
@media (min-width: 34em) and (max-width: 48em) {
  .row > div[class^="col-"], .row > div[class*=" col-"] {
    width: 100%; }
  .row > div.col-sm-12 {
    width: 100%; }
  .row > div.col-sm-11 {
    width: 91.6666%; }
  .row > div.col-sm-10 {
    width: 83.3333%; }
  .row > div.col-sm-9 {
    width: 75%; }
  .row > div.col-sm-8 {
    width: 66.6666%; }
  .row > div.col-sm-7 {
    width: 58.3333%; }
  .row > div.col-sm-6 {
    width: 50%; }
  .row > div.col-sm-5 {
    width: 41.6666%; }
  .row > div.col-sm-4 {
    width: 33.3333%; }
  .row > div.col-sm-3 {
    width: 25%; }
  .row > div.col-sm-2 {
    width: 16.6666%; }
  .row > div.col-sm-1 {
    width: 8.3333%; }
  .row > div.col-sm-0 {
    width: 0%; } }
@media (max-width: 34em) {
  .row > div[class^="col-"], .row > div[class*=" col-"] {
    width: 100%; }
  .row > div.col-xs-12 {
    width: 100%; }
  .row > div.col-xs-11 {
    width: 91.6666%; }
  .row > div.col-xs-10 {
    width: 83.3333%; }
  .row > div.col-xs-9 {
    width: 75%; }
  .row > div.col-xs-8 {
    width: 66.6666%; }
  .row > div.col-xs-7 {
    width: 58.3333%; }
  .row > div.col-xs-6 {
    width: 50%; }
  .row > div.col-xs-5 {
    width: 41.6666%; }
  .row > div.col-xs-4 {
    width: 33.3333%; }
  .row > div.col-xs-3 {
    width: 25%; }
  .row > div.col-xs-2 {
    width: 16.6666%; }
  .row > div.col-xs-1 {
    width: 8.3333%; }
  .row > div.col-xs-0 {
    width: 0%; } }

body {
  height: 100vh; }
  body #container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%; }
  body .hs-html {
      display: none;
    }
    body .hs-html .hs-html-tb {
      display: table;
      width: 100%;
      height: 100%; }
      body .hs-html .hs-html-cell {
        display: table-cell;
        color: white;
        text-align: center;
        vertical-align: middle; }
  body .hotspot {
      display: none;
    }
    body .hotspot .hotspot-zone {
      perspective: 1000px;
      padding: 0;
      position: relative; }
      body .hotspot .hotspot-zone > .media {
        position: absolute;
        text-align: center;
        top: 0;
        left: 0;
        padding: 0;
        margin: 0;
        width: 5em;
        height: 5em; }
        body .hotspot .hotspot-zone > .media > .centered {
          position: absolute;
          top: 0;
          left: 0;
          display: table;
          width: 100%;
          height: 100%; }
          body .hotspot .hotspot-zone > .media > .centered > .content {
            display: table-cell;
            vertical-align: middle;
            line-height: 0; }
            body .hotspot .hotspot-zone > .media > .centered > .content .open-state {
              transform: scale(1);
              opacity: 1;
              transition: all 300ms; }
            body .hotspot .hotspot-zone > .media > .centered > .content .close-state {
              transform: scale(0);
              opacity: 0;
              transition: all 300ms; }
            body .hotspot .hotspot-zone > .media > .centered > .content svg {
              fill: #f49a1a;
              height: 2em; }
            body .hotspot .hotspot-zone > .media > .centered > .content img {
              width: auto;
              height: 5em;
              transform: translateX(calc(-50% + 2.5em)); }
        body .hotspot .hotspot-zone > .media:after {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%; }
      body .hotspot .hotspot-zone > .content {
        perspective: 1000px;
        position: absolute;
        top: 0;
        left: 0;
        width: 20em;
        overflow: auto;
        opacity: 0;
        padding: 0; }
        body .hotspot .hotspot-zone > .content > p {
          margin: 0;
          padding: 0; }
        body .hotspot .hotspot-zone > .content h1, body .hotspot .hotspot-zone > .content h2, body .hotspot .hotspot-zone > .content h3, body .hotspot .hotspot-zone > .content h4, body .hotspot .hotspot-zone > .content h5, body .hotspot .hotspot-zone > .content h6 {
          margin: 0;
          padding: 0; }
        body .hotspot .hotspot-zone > .content img {
          width: 100%;
          height: auto; }
        body .hotspot .hotspot-zone > .content > .padded {
          padding: 2em; }
      body .hotspot .hotspot-zone > input {
        box-sizing: border-box;
        padding: 0;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        z-index: 100;
        opacity: 0;
        width: 5em;
        height: 5em;
        cursor: pointer; }
        body .hotspot .hotspot-zone > input + .media + .content {
          visibility: hidden; }
        body .hotspot .hotspot-zone > input:checked + .media > .centered > .content .open-state {
          transform: scale(5);
          opacity: 0; }
        body .hotspot .hotspot-zone > input:checked + .media > .centered > .content .close-state {
          transform: scale(1);
          opacity: 1; }
        body .hotspot .hotspot-zone > input:checked + .media + .content {
          visibility: visible;
          opacity: 1; }
    body .hotspot.media-style__neutral .hotspot-zone > .media {
      width: 5em;
      height: 5em; }
    body .hotspot.media-style__neutral .hotspot-zone > input {
      width: 5em;
      height: 5em; }
    body .hotspot.media-style__see-through .hotspot-zone > .media {
      width: 5em;
      height: 5em;
      border-radius: 100%;
      position: relative;
      z-index: 0;
      overflow: hidden;
      transition: all 800ms;
      border: 4px solid white; }
      body .hotspot.media-style__see-through .hotspot-zone > .media > .centered > .content img {
        transition: transform 800ms;
        transform-origin: right center; }
    body .hotspot.media-style__see-through .hotspot-zone > input {
      width: 5em;
      height: 5em; }
      body .hotspot.media-style__see-through .hotspot-zone > input:hover + .media {
        box-shadow: 1px 20px 20px 0px rgba(0, 0, 0, 0.62);
        border: 4px solid #f49a1a; }
        body .hotspot.media-style__see-through .hotspot-zone > input:hover + .media > .centered > .content img {
          transform: scale(1.3); }
@-webkit-keyframes primarySpotAnim2 {
  0% {
    opacity: 0.3; }
  100% {
    opacity: 1; } }
@-moz-keyframes primarySpotAnim2 {
  0% {
    opacity: 0.3; }
  100% {
    opacity: 1; } }
@-o-keyframes primarySpotAnim2 {
  0% {
    opacity: 0.3; }
  100% {
    opacity: 1; } }
@keyframes primarySpotAnim2 {
  0% {
    opacity: 0.3; }
  100% {
    opacity: 1; } }
@-webkit-keyframes primarySpotAnim {
  0% {
    transform: scale(0);
    opacity: 1; }
  100% {
    transform: scale(3);
    opacity: 0; } }
@-moz-keyframes primarySpotAnim {
  0% {
    transform: scale(0);
    opacity: 1; }
  100% {
    transform: scale(3);
    opacity: 0; } }
@-o-keyframes primarySpotAnim {
  0% {
    transform: scale(0);
    opacity: 1; }
  100% {
    transform: scale(3);
    opacity: 0; } }
@keyframes primarySpotAnim {
  0% {
    transform: scale(0);
    opacity: 1; }
  100% {
    transform: scale(3);
    opacity: 0; } }
    body .hotspot.media-style__primary .hotspot-zone > .media {
      width: 5em;
      height: 5em;
      border-radius: 100%;
      color: white; }
      body .hotspot.media-style__primary .hotspot-zone > .media > .centered > .content {
        font-family: "Exo", "Times New Roman", Georgia;
        color: #f49a1a; }
        body .hotspot.media-style__primary .hotspot-zone > .media > .centered > .content img {
          height: 5em; }
        body .hotspot.media-style__primary .hotspot-zone > .media > .centered > .content svg {
          fill: #f49a1a;
          width: 2em;
          transition: all 300ms; }
          body .hotspot.media-style__primary .hotspot-zone > .media > .centered > .content svg.close-state {
            width: 1em; }
        body .hotspot.media-style__primary .hotspot-zone > .media > .centered > .content:before, body .hotspot.media-style__primary .hotspot-zone > .media > .centered > .content:after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 1em;
          height: 1em;
          background-color: #f49a1a;
          margin-left: -0.5em;
          margin-top: -0.5em;
          border-radius: 100%;
          transition: all 300ms;
          -webkit-animation-delay: 0s;
          -webkit-animation-duration: 2s;
          -webkit-animation-name: primarySpotAnim;
          -webkit-animation-iteration-count: infinite;
          -webkit-animation-timing-function: ease;
          -webkit-animation-fill-mode: forwards;
          -webkit-transform-origin: center;
          -moz-animation-delay: 0s;
          -moz-animation-duration: 2s;
          -moz-animation-name: primarySpotAnim;
          -moz-animation-iteration-count: infinite;
          -moz-animation-fill-mode: forwards;
          -moz-animation-timing-function: ease;
          -moz-transform-origin: center;
          animation-delay: 0s;
          animation-duration: 2s;
          animation-name: primarySpotAnim;
          animation-iteration-count: infinite;
          animation-fill-mode: forwards;
          animation-timing-function: ease;
          transform-origin: center;
          animation-direction: normal; }
        body .hotspot.media-style__primary .hotspot-zone > .media > .centered > .content:after {
          opacity: 0; }
      body .hotspot.media-style__primary .hotspot-zone > .media:after {
        border-top-left-radius: 100%;
        border-top-right-radius: 100%;
        border-bottom-right-radius: 100%;
        border-bottom-left-radius: 100%;
        border-color: #f49a1a;
        border-style: solid;
        border-width: 2px;
        transition: border-top-right-radius 800ms, top 500ms, left 500ms, opacity 500ms, transform 500ms, border-color 500ms, width 500ms, height 500ms, margin-left 500ms, left 500ms, top 500ms, margin-top 500ms;
        -webkit-animation-delay: 0s;
        -webkit-animation-duration: 1s;
        -webkit-animation-name: primarySpotAnim2;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: ease;
        -webkit-animation-fill-mode: forwards;
        -webkit-transform-origin: center;
        -moz-animation-delay: 0s;
        -moz-animation-duration: 1s;
        -moz-animation-name: primarySpotAnim2;
        -moz-animation-iteration-count: infinite;
        -moz-animation-fill-mode: forwards;
        -moz-animation-timing-function: ease;
        -moz-transform-origin: center;
        animation-delay: 0s;
        animation-duration: 1s;
        animation-name: primarySpotAnim2;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
        animation-timing-function: ease;
        transform-origin: center;
        animation-direction: alternate; }
    body .hotspot.media-style__primary .hotspot-zone > input {
      width: 5em;
      height: 5em;
      cursor: zoom-in; }
      body .hotspot.media-style__primary .hotspot-zone > input:hover + .media > .centered > .content:before {
        background-color: white; }
      body .hotspot.media-style__primary .hotspot-zone > input:hover + .media > .centered > .content:after {
        background-color: white; }
      body .hotspot.media-style__primary .hotspot-zone > input:hover + .media:after {
        border-top-left-radius: 0%;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 0%;
        border-bottom-left-radius: 0%;
        animation-name: none;
        position: absolute;
        top: 100%;
        left: 50%;
        width: 50%;
        height: 50%;
        margin-left: -25%;
        border-left-style: none;
        border-bottom-style: none;
        border-color: white;
        transform: rotateX(-45deg) rotateY(0deg) rotateZ(-45deg);
        text-align: right;
        padding-right: 0.5em;
        color: #f49a1a; }
      body .hotspot.media-style__primary .hotspot-zone > input:checked {
        cursor: zoom-out; }
        body .hotspot.media-style__primary .hotspot-zone > input:checked + .media > .centered > .content:before {
          animation-name: none;
          transform: rotate(45deg);
          width: 2px;
          margin-left: 0em; }
        body .hotspot.media-style__primary .hotspot-zone > input:checked + .media > .centered > .content:after {
          animation-name: none;
          transform: rotate(-45deg);
          width: 2px;
          opacity: 1;
          margin-left: 0em; }
        body .hotspot.media-style__primary .hotspot-zone > input:checked + .media:after {
          border-radius: 100% 100% 100% 100%;
          animation-name: none; }
        body .hotspot.media-style__primary .hotspot-zone > input:checked:hover + .media:after {
          border-top-left-radius: 100%;
          border-top-right-radius: 100%;
          border-bottom-right-radius: 100%;
          border-bottom-left-radius: 100%;
          border-left-style: solid;
          border-bottom-style: solid;
          transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
          top: 50%;
          margin-top: -25%; }
    body .hotspot.media-style__pin .hotspot-zone > .media {
      width: 5em;
      height: 5em; }
      body .hotspot.media-style__pin .hotspot-zone > .media > .centered > .content {
        opacity: 0;
        transition: all 500ms; }
        body .hotspot.media-style__pin .hotspot-zone > .media > .centered > .content:before, body .hotspot.media-style__pin .hotspot-zone > .media > .centered > .content:after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 1em;
          height: 1em;
          background-color: #f49a1a;
          font-size: 1em;
          margin-left: -0.5em;
          margin-top: -0.5em;
          border-radius: 100%;
          transition: all 300ms;
          -webkit-animation-delay: 0s;
          -webkit-animation-duration: 2s;
          -webkit-animation-name: primarySpotAnim;
          -webkit-animation-iteration-count: infinite;
          -webkit-animation-timing-function: ease;
          -webkit-animation-fill-mode: forwards;
          -webkit-transform-origin: center;
          -moz-animation-delay: 0s;
          -moz-animation-duration: 2s;
          -moz-animation-name: primarySpotAnim;
          -moz-animation-iteration-count: infinite;
          -moz-animation-fill-mode: forwards;
          -moz-animation-timing-function: ease;
          -moz-transform-origin: center;
          animation-delay: 0s;
          animation-duration: 2s;
          animation-name: primarySpotAnim;
          animation-iteration-count: infinite;
          animation-fill-mode: forwards;
          animation-timing-function: ease;
          transform-origin: center;
          animation-direction: normal; }
      body .hotspot.media-style__pin .hotspot-zone > .media:after {
        content: '';
        border-style: solid;
        border-width: 6px;
        border-color: #f49a1a;
        border-top-left-radius: 100%;
        border-bottom-left-radius: 100%;
        border-bottom-right-radius: 0%;
        border-top-right-radius: 100%;
        transform: rotate(45deg);
        transition: all 500ms;
        transform-origin: center; }
    body .hotspot.media-style__pin .hotspot-zone > input {
      width: 5em;
      height: 5em;
      cursor: pointer; }
      body .hotspot.media-style__pin .hotspot-zone > input:hover + .media:after {
        opacity: 0.3; }
      body .hotspot.media-style__pin .hotspot-zone > input:checked {
        transform: rotate(0deg) translateX(-15em) translateY(-15em); }
        body .hotspot.media-style__pin .hotspot-zone > input:checked + .media > .centered > .content {
          opacity: 1;
          transform: translateX(-15em) translateY(-15em); }
          body .hotspot.media-style__pin .hotspot-zone > input:checked + .media > .centered > .content:before {
            animation-name: none;
            transform: rotate(45deg);
            width: 2px;
            margin-left: 0em; }
          body .hotspot.media-style__pin .hotspot-zone > input:checked + .media > .centered > .content:after {
            animation-name: none;
            transform: rotate(-45deg);
            width: 2px;
            opacity: 1;
            margin-left: 0em; }
        body .hotspot.media-style__pin .hotspot-zone > input:checked + .media:after {
          opacity: 1;
          transform: rotate(0deg) translateX(-15em) translateY(-15em); }
        body .hotspot.media-style__pin .hotspot-zone > input:checked:hover + .media > .centered > .content:before, body .hotspot.media-style__pin .hotspot-zone > input:checked:hover + .media > .centered > .content:after {
          background-color: white; }
        body .hotspot.media-style__pin .hotspot-zone > input:checked:hover + .media:after {
          border-color: white; }
    body .hotspot.content-style__above .hotspot-zone > .content {
      overflow: visible;
      background-color: transparent;
      color: white;
      transition: all 400ms;
      transform: translateX(calc(-50% + 2.5em)) translateY(-30%);
      padding-left: 0.5em;
      border-left: 1px solid #f49a1a; }
      body .hotspot.content-style__above .hotspot-zone > .content h2 {
        right: calc(100% + 1em);
        position: absolute;
        text-align: right;
        top: 50%;
        transform: translateY(-50%);
        text-shadow: 0px 0px 5px black;
        color: #f49a1a;
        letter-spacing: -0.08em; }
      body .hotspot.content-style__above .hotspot-zone > .content .alt-text {
        background-color: rgba(244, 154, 26, 0.7); }
      body .hotspot.content-style__above .hotspot-zone > .content .padded {
        background-color: rgba(255, 255, 255, 0.1); }
        body .hotspot.content-style__above .hotspot-zone > .content .padded hr {
          visibility: hidden;
          margin: 2em auto; }
    body .hotspot.content-style__above .hotspot-zone > input:checked + .media + .content {
      transform: translateX(calc(-50% + 2.5em)) translateY(-50%); }
    body .hotspot.content-style__above.hover-trig .hotspot-zone > input:hover + .media + .content {
      visibility: visible;
      opacity: 1;
      transform: translateX(calc(-50% + 2.5em)) translateY(-50%); }
    body .hotspot.content-style__above.hover-trig .hotspot-zone > input:checked + .media + .content {
      transform: translateX(calc(-50% + 2.5em)) translateY(-50%); }
    body .hotspot.content-style__primary .hotspot-zone > .content {
      transition: all 300ms;
      transform: translateX(calc(-50% + 2.5em)) translateY(calc(-100% + 2em));
      background-color: #f49a1a;
      color: white;
      border-radius: 3px; }
      body .hotspot.content-style__primary .hotspot-zone > .content a:link, body .hotspot.content-style__primary .hotspot-zone > .content a:visited {
        color: #fdeed9;
        transition: all 300ms;
        font-weight: bold; }
      body .hotspot.content-style__primary .hotspot-zone > .content a:hover {
        color: white; }
      body .hotspot.content-style__primary .hotspot-zone > .content h1, body .hotspot.content-style__primary .hotspot-zone > .content h2, body .hotspot.content-style__primary .hotspot-zone > .content h3, body .hotspot.content-style__primary .hotspot-zone > .content h4, body .hotspot.content-style__primary .hotspot-zone > .content h5, body .hotspot.content-style__primary .hotspot-zone > .content h6 {
        letter-spacing: -0.05em; }
    body .hotspot.content-style__primary .hotspot-zone > input:checked + .media + .content {
      transform: translateX(calc(-50% + 2.5em)) translateY(calc(-100% - 2em)); }
    body .hotspot.content-style__primary.hover-trig .hotspot-zone > input:hover + .media + .content {
      visibility: visible;
      opacity: 1; }
    body .hotspot.content-style__primary.hover-trig .hotspot-zone > input:checked + .media + .content {
      transform: translateX(calc(-50% + 2.5em)) translateY(calc(-100% + 2em)); }