body {
     margin: 0;
     overflow: hidden;
     background-color: #202020;
 }

 html,
 body {
     touch-action: manipulation;
 }

 canvas {
     position: absolute;
     top: 0;
     height: 100%;
     width: 100%;
 }

 #controls {
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 2;
     display: none;
 }

 #logo {

     height: 50px;
     z-index: 999999999;

 }

 .mr-2 {
     margin-right: .7rem !important;
 }

 .ml-2 {
     margin-left: .7rem !important;
 }

 button {
     padding: 10px 20px;
     font-size: 16px;
     margin: 0 10px;
 }

 #map {

     z-index: 999999;
     border: 2px solid #000;
     border-radius: 5px;
     background: white;
     position: fixed;
     width: 400px;
     height: 300px;
     bottom: 0px;
     top: 10px;
     right: 10px;
 }

 #auto-tour-controls {
     position: absolute;
     flex-wrap: wrap;
     width: 47px;
     top: -10px;
     right: -15px;
     transform: translateX(-50%);
     z-index: 999999999;
     display: flex;
     margin-top: 20px;
     background-color: #00000080 !important;
     border-radius: 5px;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 10px;
 }

 #auto-tour-controls>* {
     margin-top: 10px;
 }

 .circle-container button {
     all: unset;
     background: none;
     border: none;
     cursor: pointer;
     display: grid;
     place-items: center;
 }

 .arrow2 {
     position: absolute !important;
     font-size: 15pt !important;
     color: #555;
     background-color: white;
     border-radius: 50%;
     padding: 4px;
     all: unset;
     cursor: pointer;
     color: #eee;
 }

 .arrow2.up {
     top: 10px;
     left: 50%;
     transform: translateX(-50%);
 }

 .arrow2.down {
     bottom: 10px;
     left: 50%;
     transform: translateX(-50%);
 }

 .arrow2.left {
     left: 10px;
     top: 50%;
     transform: translateY(-50%);
 }

 .arrow2.right {
     right: 10px;
     top: 50%;
     transform: translateY(-50%);
 }

 #auto-tour-controls button {
     font-size: 16px;
     cursor: pointer;
 }

 #cube {
     width: 100%;
     height: 100%;
     position: fixed;
     bottom: 150px;
     right: 20px;
     transform-style: preserve-3d;
     transform: rotateX(0deg) rotateY(0deg);
     transition: transform 0.05s linear;
 }

 #footer {
     position: absolute;
     z-index: 99999999999999;
     bottom: 0;
     padding: 0;
     background-color: #00000080 !important;
     color: white;
 }

 #footer p {
     margin: 0;
     padding: 0;
     font-size: 8pt;
 }

 .help-icon {
     width: 30px;
     height: 30px;
     padding: 5px;
     display: inline-block;
     color: #000;
     background-color: #fff;
     border-radius: 15px;
     font-size: 20px;
 }


 #cube-container {
     position: fixed;
     bottom: 250px;
     right: 0px;
     width: 60px;
     height: 60px;
     perspective: 1000px;
     z-index: 1000;
 }

 #flyon {

     z-index: 1000;
     font-size: 25px;
     cursor: grab;
     user-select: none;
     border-radius: 50%;
     z-index: 9999999;
     background-color: white;
     padding: 5px
 }

 .dragging {
     background-color: transparent !important;
 }


 @media (max-width: 768px) {

    #silktide-cookie-icon{
        z-index: 999999999;
        margin-bottom: 30px !important;
        height: 30px !important;
    padding: 5px !important;
    width: 30px !important;
    right: 0 !important;
    }
 #map {

     z-index: 9999;}
     #cube {
         bottom: 430px;
         right: 10px;
     }

     #cube-container {
         bottom: 30px;
     }

     #logo {
         height: 50px;
     }

     #map {
         position: absolute;
         width: 100%;
         height: 200px;
         bottom: 0px;
         top: auto;
         right: auto;
         left: 50%;
         transform: translateX(-50%);
     }

     #flyon {
         top: auto;
         bottom: 10px;
         right: -10px;
         user-select: none;
         touch-action: none;
     }

     canvas {
         height: calc(100% - 200px) !important;
     }

     #controls {
         bottom: 60px;
     }

     #auto-tour-controls {
         top: 80px;
         right: -20px;
     }

     .map-highlight {
         box-shadow: 0 0 10px 5px rgba(242, 140, 7, 0.9);
         transition: box-shadow 0.3s ease;
     }

 }

 #arrow-container {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 3;
     /* pointer-events: none;*/
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
 }

 .arrow {
     opacity: 0;
     transition: opacity 0.3s;
     width: 50px;
     height: 50px;
 }

 #conttop {
     background-color: #00000080 !important;
     border-radius: 10px !important;
     margin-top: 10px;
     margin-left: 20px;
     color: white;
     width: 100%;
     padding: 10px;

 }


 .nav {
     background-color: transparent !important;
     height: 80px;
     margin-left: 5px;
     margin-right: 5px;
     margin-top: 5px;
     border-radius: 10px;
     color: white !important;

 }

 #title {
     font-size: 16pt !important;
 }

 .controls {
     all: unset;
     cursor: pointer;

 }

 .controls i {
     font-size: 20pt;
     color: #eee;
 }

 .tcontrol {
     background-color: #eee;
     border-radius: 50%;
     color: #000 !important;
     padding: 2px;

 }

 .tcontrol i {

     color: #020202 !important;
 }




 #cube .face {
     position: absolute;
     width: 100%;
     height: 100%;
     border: 2px solid rgba(255, 255, 255, 0.5);
     background-color: rgba(0, 255, 0, 1);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     color: white;
     backface-visibility: visible;
     border-radius: 50%;
 }

 #cube .front {
     transform: rotateY(0deg) translateZ(30px);
     background-color: #00000080 !important;
 }

 #cube .back {
     transform: rotateY(180deg) translateZ(30px);
     background-color: #00000080 !important;
 }

 #cube .right {
     transform: rotateY(90deg) translateZ(30px);
     background-color: #00000080 !important;
 }

 #cube .left {
     transform: rotateY(-90deg) translateZ(30px);
     background-color: #00000080 !important;
 }

 #cube .top {
     transform: rotateX(90deg) translateZ(30px);
     background-color: #00000080 !important;
 }

 #cube .bottom {
     transform: rotateX(-90deg) translateZ(30px);
     background-color: #00000080 !important;
 }