html, body {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "PoppinsReg", Arial, serif;
    /******/
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.fArrowl,
.fArrowr,
#layersBtn,
#indicatorsBtn {
    -webkit-tap-highlight-color: transparent !important;
}

#renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
    outline: none;
    cursor: grab;
}

#renderCanvas:active {
    cursor: grabbing;
}

#canvasZone {
    width: 100%;
    height: 100%;
}

/* Loader */


#loadingDiv{
   z-index: 9999999999;
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgb(155,155,155) !important;
   font-size:14px;
   text-align:center;
   background-image: url("../img/loading-bg-form.png"), linear-gradient(180deg, rgba(155,155,155,1) 0%, rgba(213,213,213,1) 100%) !important;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center; 
}

 #loader{
    height: 100%;
    position: relative;
    display: inline-flex;
    align-content: space-around;
    align-items: center;
 }

 span.loader-text-msg{
   color:#fff;
   border-top:1px solid #ffffff1e;
 }

 #loaderCirclel,
 #loaderCircler{
   position: absolute;
   left: 25%;
   top: 42%;
 }

 #loaderCirclel{
   opacity: 0.7;
   filter: invert(1);
   -webkit-filter: invert(1);
 }

 #loaderCircler{
   opacity: 0.2;
   filter: invert(0.2);
   -webkit-filter: invert(0.6);
 }

 #cta-cursor {
   position: absolute !important;
   width: 167px;
   margin: 0;
   margin-top: 20px;
   background: none;
   color: #fff;
   pointer-events: none; /* Prevent interaction */
   font-size: 11px;
   transform: translate(-50%, -50%); /* Center align to cursor */
 }

 #circ{
   position: absolute; 
   top:100px; 
   left:100px; 
   pointer-events: none;
 }

 .fMenu{
   border:3px solid #ffffff1f; 
   background-color: #00000027; 
   border-radius: 40px; 
   position: absolute; 
   top:50%; 
   right:100px; 
   height: 110px; 
   transform: translateY(-50%); 
   padding:14px; 
   text-align: center;
 }

 .fArrowsMenu{
    width:201px; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    bottom:-150px;
 }

 .fArrowl,
 .fArrowr{
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(255, 255, 255, 0); /* Initial glow */
    -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0); /* Initial glow */
 }

 #fMenuDiv{
   width: 100%; 
   height: 1px; 
   background-color: #ffffff17;
 }

 .arrowContainer{
    float: left;
    width: 100px; 
    text-align: center;
 }

 .arrowsDivider{
    float:left; 
    width: 1px; 
    height: 60px; 
    background-color: #ffffff21;
 }

 #layersBtn,
 #indicatorsBtn{
   height:54px; 
   width: 38px; 
   cursor: pointer;
   display: flex;
   align-items: center; 
   opacity: 0.2;
 }

 circle{
    opacity: 1;
 }

 .slogan{
   position: absolute; 
   top:14%; 
   left:10%; 
   font-size: 34px; 
   color:#fff; 
   width: 18%;
 }

 /* Mobile Landscape */
 @media screen and (orientation: landscape) and (max-width: 950px) {
   #loading-screen{
      width:75px !important;
   }
   span.loader-text-msg{
      position: absolute;
      left:0 !important;
      top:56% !important;
    }

   #loaderCirclel,
   #loaderCircler{
     top: 43%;
   }

   .fMenu{
      left:3% !important;
      width: 38px;
   }

   #circ, #circol, #cta-cursor {
      display:none !important;
   }

   .fArrowsMenu{
      left:85%;
   }

   .slogan{
      top:18% !important; 
      left:18% !important; 
      font-size: 20px !important; 
      width: 18% !important;
    }
 }

 /* Tablets */

 @Media only screen and (max-width: 1024px) {
   .slogan{
      top:8%; 
      left:10%; 
      font-size: 50px; 
      width: 50%;
    }
}

 @Media only screen and (max-width: 768px) {
   .slogan{
      top:8%; 
      left:10%; 
      font-size: 34px; 
      width: 50%;
    }
}

 /* Mobile Portrait */
 @Media only screen and (max-width: 480px) {
   #loaderCirclel,
   #loaderCircler{
     top: 42.5%;
   }

   .fMenu{
      right:3% !important;
      top:3% !important;
      transform: scale(0.8);
   }

   #circ, #circol, #cta-cursor {
      display:none !important;
   }

   .slogan{
      top:4%; 
      left:10%; 
      font-size: 24px; 
      width: 58%;
      line-height: 1.3em;
    }
}