/* infoHotspot.css */



.info-hotspot {

    line-height: 1.2em;

    opacity: 0.9;

    transition: opacity 0.2s 0.2s;

  }

  

  .no-touch .info-hotspot:hover {

    opacity: 1;

    transition: opacity 0.2s;

  }

  

  .info-hotspot.visible {

    opacity: 1;

  }

  

  .info-hotspot .info-hotspot-header {

    width: 40px;

    height: 40px;

    border-radius: 20px;

    background-color: rgb(103,115,131);

    cursor: pointer;

    transition: width 0.3s ease-in-out 0.5s,

                border-radius 0.3s ease-in-out 0.5s;

  }

  

  .mobile .info-hotspot .info-hotspot-header {

    width: 50px;

    height: 50px;

    border-radius: 25px;

  }

  

  .desktop.no-touch .info-hotspot .info-hotspot-header:hover {

    width: 260px;

    border-radius: 5px;

    transition: width 0.3s ease-in-out,

                border-radius 0.3s ease-in-out;

  }

  

  .desktop .info-hotspot.visible .info-hotspot-header,

  .desktop.no-touch .info-hotspot.visible .info-hotspot-header:hover {

    width: 260px;

    border-radius: 5px;

    border-top-right-radius: 0;

    border-bottom-right-radius: 0;

    border-bottom-left-radius: 0;

    transition: width 0.3s ease-in-out, border-radius 0.3s ease-in-out;

  }

  

  .info-hotspot .info-hotspot-icon-wrapper {

    width: 40px;

    height: 40px;

  }

  .mobile .info-hotspot .info-hotspot-icon-wrapper {

    width: 50px;

    height: 50px;

  }

  

  .info-hotspot .info-hotspot-icon {

    width: 90%;

    height: 90%;

    margin: 5%;

  }

  

  /* Title wrapper transitions */

  .info-hotspot .info-hotspot-title-wrapper {

    position: absolute;

    left: 40px;

    top: 0;

    width: 0;

    height: 40px;

    padding: 0;

    overflow: hidden;

    transition: width 0s 0.4s, padding 0s 0.4s;

  }

  

  .desktop .info-hotspot.visible .info-hotspot-title-wrapper,

  .desktop.no-touch .info-hotspot .info-hotspot-header:hover .info-hotspot-title-wrapper {

    width: 220px;

    padding: 0 5px;

    transition: width 0s 0.4s, padding 0s 0.4s;

  }

  

  .info-hotspot .info-hotspot-title-wrapper:before {

    content: '';

    display: inline-block;

    vertical-align: middle;

    height: 100%;

  }

  .info-hotspot .info-hotspot-title {

    display: inline-block;

    vertical-align: middle;

    user-select: text;

  }

  

  /* Close (X) icon rotating in from the right */

  .info-hotspot .info-hotspot-close-wrapper {

    position: absolute;

    left: 260px;

    top: 0;

    height: 40px;

    width: 40px;

    border-top-right-radius: 5px;

    background-color: rgb(78,88,104);

    visibility: hidden;

    transform: perspective(200px) rotateY(90deg);

    transform-origin: 0 50% 0;

    transition: transform 0.3s 0.3s, visibility 0s 0.6s;

  }

  

  .desktop .info-hotspot.visible .info-hotspot-close-wrapper {

    visibility: visible;

    transform: perspective(200px) rotateY(0deg);

    transition: transform 0.3s, visibility 0s 0s;

  }

  .info-hotspot .info-hotspot-close-icon {

    width: 70%;

    height: 70%;

    margin: 15%;

  }

  

  /* Info text body transitions */

  .info-hotspot .info-hotspot-text {

    position: absolute;

    width: 300px;

    max-height: 200px;

    top: 40px;

    left: 0;

    padding: 10px;

    background-color: rgb(58,68,84);

    border-bottom-right-radius: 5px;

    border-bottom-left-radius: 5px;

    overflow-y: auto;

    visibility: hidden;

    transform: perspective(200px) rotateX(-89.999deg);

    transform-origin: 50% 0 0;

    transition: transform 0.3s, visibility 0s 0.3s;

    user-select: text;

  }

  

  .desktop .info-hotspot.visible .info-hotspot-text {

    visibility: visible;

    transform: perspective(200px) rotateX(0deg);

    transition: transform 0.3s 0.3s, visibility 0s 0s;

  }

  

  /* Fullscreen "modal" version */

  .desktop .info-hotspot-modal {

    display: none;

  }

  .info-hotspot-modal {

    top: 0;

    left: 0;

    position: absolute;

    width: 100%;

    height: 100%;

    overflow: hidden;

    z-index: 11000 !important;

    background-color: rgba(0,0,0,.5);

    line-height: 1.2em;

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.2s ease-in-out 0.5s, visibility 0s 0.7s;

  }

  .info-hotspot-modal.visible {

    opacity: 1;

    visibility: visible;

    transition: opacity 0.2s ease-in-out, visibility 0s 0s;

  }

  .info-hotspot-modal .info-hotspot-header {

    position: absolute;

    top: 60px;

    left: 10px;

    right: 10px;

    width: auto;

    height: 50px;

    background-color: rgba(103,115,131, 0.8);

    opacity: 0;

    transition: opacity 0.3s ease-in-out 0.2s;

  }

  .info-hotspot-modal.visible .info-hotspot-header {

    opacity: 1;

    transition: opacity 0.3s ease-in-out 0.2s;

  }

  .info-hotspot-modal .info-hotspot-close-wrapper {

    position: absolute;

    top: 0;

    right: 0;

    width: 50px;

    height: 50px;

    background-color: rgba(78,88,104, 0.8);

    cursor: pointer;

  }

  .info-hotspot-modal .info-hotspot-close-icon {

    width: 70%;

    height: 70%;

    margin: 15%;

  }

  .info-hotspot-modal .info-hotspot-text {

    position: absolute;

    top: 110px;

    bottom: 10px;

    left: 10px;

    right: 10px;

    padding: 10px;

    background-color: rgba(58,68,84, 0.8);

    overflow-y: auto;

    opacity: 0;

    transition: opacity 0.3s ease-in-out;

    user-select: text;

  }

  .info-hotspot-modal.visible .info-hotspot-text {

    opacity: 1;

    transition: opacity 0.3s ease-in-out 0.4s;

  }