body, .fakeBground { margin:0; padding:0; 
        /*background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 37%,rgba(0,0,0,0.08) 47%,rgba(0,0,0,0.70) 100%);*/
        transition: background-color 0.5s ease-in;
        background-color: #000;
      }
      html, body {
        -webkit-tap-highlight-color: transparent;
        overflow: hidden;
        height: 100%;
        margin: 1em;
        padding: 0;
        font-family: "HelveticaNeue-Condensed", "PingFangTC-Regular", sans-serif;
        touch-action: none;
        font-size: 0.9em;
      }
      :root{
        --tickerWidth : 0;
        --buttonColor : #dd4141;
        --buttonColor2 : #9a1515;
        --onBoardingFormBackground : rgb(238 200 194);/*rgb(253, 219, 214);*/
        --altOnBoardingFormBackground : rgba(255, 41, 67, 1);
        
      }
      .master #map2{
      	visibility: hidden;
      }
      #map2{z-index: -1}
      #map, #map2 {
       position: fixed; 
       top:0; bottom:0; 
       width:100%; 
       height: 100%;
       /*transition: clip-path 0.1s;*/
       transition: clip-path 0.1s, -webkit-clip-path 0.1s, filter 0.3s;
     }
     H1{
      font-family: "HelveticaNeue-CondensedBold", "PingFangTC-Regular", sans-serif;
      font-size: 7em;
      margin-bottom: 0;
      padding-bottom: 0;
      margin-top: 0.4em;
     }
     H4{
      font-family:  "HelveticaNeue-CondensedBold", "PingFangTC-Regular", sans-serif;
      /*font-size:  5em;*/
      margin-top: 0;
      padding-top: 0;
      padding-bottom: 3em;
     }

    .qrCode{
        padding-top: 1em;
        display: none;
        position: absolute;
        z-index: 100;

    }

    .showQR{ margin-top: 1em;cursor: pointer; display: block; position: relative; }
    .showQR:hover .qrCode {
         display: block;  
    }
        .showQR:hover + iframe {
         opacity: 0.6;  
    }

    iframe{display: inline-block !important; margin:  0 0 1em 0 !important; transition:  opacity 0.08s ease-in}

     .clipped{
        -webkit-clip-path: ellipse(0px 0px at 50% 50%);
        clip-path: ellipse(0px 0px at 50% 50%);
     }
     .messager{
      animation-name: messagerAnim;
      animation-duration: 0.2s;
      animation-timing-function: ease-in;

     }
    .msgMessage2{
      pointer-events: none;
    }
    @keyframes goUpGhost{
      0%{ transform : translateY(0em) translateZ( 0px ); opacity: 0.9; }
      100%{ transform : translateY(-1.2em) translateZ( 0px ); opacity: 0.1;  }
    }
    @keyframes goUpMsg{
      from{ transform : scale( 0.2,0.2 ) translateZ( 0px ); opacity: 0; }
      to{ transform : scale( 1, 1 ) translateZ( 0px ); opacity: 1;  }
    }
     @keyframes messagerAnim{
      from{ transform : scale(5,5) translateZ( 0px ); }
      to{ transform : scale(1,1) translateZ( 0px );   }
     }
    @keyframes messagerAnim2{
      from{ transform : scale(6, 6) translateZ( 0px ); }
      to{ transform : scale(0.6, 0.6) translateZ( 0px );   }
     }
      .dramaContainer{
        position: fixed;
        height: 100%;
        width: 100%;
        top: 0;
        overflow: hidden;
         z-index: 99;
        pointer-events: none;
      }

      .buttonOnBoarding{
        background-color : var(--buttonColor2) ;
        text-align: center; 
        padding: 0.4em;  
        height: 1.4em;
        font-size: 1.4em;
      }

      .onBoarding{
        background-color : var(--onBoardingFormBackground);
      }
      .onBoarding2{
        background-color : var(--altOnBoardingFormBackground);
      }
      .highlighted{
        background-color : #bf3838 !important; /*rgb(255, 41, 67) ;*/
      }

      .fieldBlinker{
        background-color: red;
        animation-name: fieldBlinkerAnim;
        animation-duration: 0.1s;
        animation-iteration-count: 5;
        animation-timing-function: steps(2)
      }

      .actualSettings{
        position: absolute;
        overflow: scroll;
        height: 100%;
        left: 0px;
        top: 0px;
        font-family: sans-serif;
       /* animation-name: fadeOutAnim;
        animation-duration: 0.2s;*/
        /*animation-direction: reverse;*/
        background-color: rgba(14, 1, 0,0);
        font-size: 1.05em;
        color: rgb(255, 255, 255);
        z-index: 230011;
        padding: 1em 0em;
        animation-name : slideInAnim2;
        animation-duration : 0.12s;
        animation-timing-function: ease-in-out;
      }
      .actualSettings ul{
        list-style-type: none; 
        padding: 0; 
        margin: 0; 
        padding-bottom: 1.5em; 
        text-align: left
      }
      .actualSettings ul li{
        padding-bottom: 1.0em;
      }

      .registrationMark{
        position: absolute;
        pointer-events: none;
        background-color: rgb(255, 255, 255);
        z-index: 200008;
        opacity: 1;
      }

      .announcer{
        position: absolute;
        z-index: 200000 !important;
        text-align: right;
        background-color: red;
        color: black;
        top: 0px;
        right: 0px;
        pointer-events: none;
        padding-left: 5px;
      }

      .settingsIcon{
        position: absolute;
        width: 30px;
        /*height: 26px;*/
        /*background-color: rgb(255, 255, 255);*/
          /*border-top-left-radius: 50%;
          border-top-right-radius: 50%;
          border-bottom-right-radius: 50%;
          border-bottom-left-radius: 50%;*/
        /*display: flex;
        align-items: center;
        justify-content: center;*/
        left: 15px;
        bottom: 15px;
        z-index: 230011;
        /*opacity: 0.9;*/
      }

      @keyframes fieldBlinkerAnim{
        from{ opacity: 0; }
        to{ opacity: 1; }
      }

      .cloudBackground{
       position : absolute;
        width : 100%;
        height : 100%;
        opacity : 0.17;
        pointer-events : none;
        filter : blur(1px);
        background-size : 300px;
        animation-iteration-count : infinite;
      }

      .langFormInverter{
        filter : invert(1) !important;
      }

      .langFormFilter{
        filter : invert(1) hue-rotate(29deg) !important;
      }


      .langFormInverter .cloudBackground{
        filter : sepia(1) hue-rotate(-50deg) invert() blur(3px);
        opacity: 0.2 !important;
      }

      .langFormInverter .languageFormGradient, .langFormInverter .gradientStripe,  .langFormInverter .popupLegend{
        filter : invert();
      }
      .noBground{
        /*background-image : none !important;*/
        background-image : url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MDAgNjAwIj48dGl0bGU+ZGFya2Jncm91bmQ8L3RpdGxlPjxnIGlkPSJMYXllcl8xIiBkYXRhLW5hbWU9IkxheWVyIDEiPjxwb2x5Z29uIHBvaW50cz0iMCAyOTguODIgMCAzNDcuNjkgMjQuNDUgMzIzLjI1IDAgMjk4LjgyIiBmaWxsPSIjMzAyOTI5IiBmaWxsLW9wYWNpdHk9IjAuMiIvPjxwb2x5Z29uIHBvaW50cz0iMjkyLjQxIDUwOC4xMiAzNjYuMTIgNTgxLjc3IDQ3NS4wOSA0NzQuNDkgMzk1LjM5IDQwNSAyOTIuNDEgNTA4LjEyIiBmaWxsPSIjMzAyOTI5IiBmaWxsLW9wYWNpdHk9IjAuMiIvPjxwb2x5Z29uIHBvaW50cz0iMjAwLjcxIDIwMC4zNSA5MC4xNCAzMTAuODIgMTYzLjg1IDM4Mi4wNyAyNzQuNDIgMjcxLjYgMjAwLjcxIDIwMC4zNSIgZmlsbD0iIzMwMjkyOSIgZmlsbC1vcGFjaXR5PSIwLjIiLz48cG9seWdvbiBwb2ludHM9IjI5NS40NSAzMDMuNzkgMTkwLjQ4IDQxMS4wNiAyNTkuNCA0NzkuOTMgMzY0LjM4IDM3Mi42NSAyOTUuNDUgMzAzLjc5IiBmaWxsPSIjMzAyOTI5IiBmaWxsLW9wYWNpdHk9IjAuMiIvPjxwb2x5Z29uIHBvaW50cz0iMC4xOSAwIDAgMCAwIDE0Ny4xOSA3My43NSA3My41IDAuMTkgMCIgZmlsbD0iIzMwMjkyOSIgZmlsbC1vcGFjaXR5PSIwLjIiLz48cG9seWdvbiBwb2ludHM9IjQ4Mi44NyAyNzAuMzggNTI2Ljc5IDIyNS41MyA0NTMuMDcgMTUxLjg5IDQwNC41OCAxOTcuOTEgNDgyLjg3IDI3MC4zOCIgZmlsbD0iIzMwMjkyOSIgZmlsbC1vcGFjaXR5PSIwLjIiLz48cG9seWdvbiBwb2ludHM9IjU2My40NiAxODMuOTcgNjAwIDE0Ny40NiA2MDAgMC4xNyA0ODkuNzUgMTEwLjMyIDU2My40NiAxODMuOTciIGZpbGw9IiMzMDI5MjkiIGZpbGwtb3BhY2l0eT0iMC4yIi8+PHBvbHlnb24gcG9pbnRzPSI0NzkuMjQgMzIyLjAzIDQ0MC4xMiAzNjAuMDggNTEzLjg0IDQzMy43MiA1NTEuMTEgMzk2LjIzIDQ3OS4yNCAzMjIuMDMiIGZpbGw9IiMzMDI5MjkiIGZpbGwtb3BhY2l0eT0iMC4yIi8+PHBvbHlnb24gcG9pbnRzPSI1NTAuNjkgMjQ5LjYgNDk5IDMwMi4yOCA1NzAuNjUgMzc3Ljc1IDYwMCAzNDcuNjMgNjAwIDI5OC44NyA1NTAuNjkgMjQ5LjYiIGZpbGw9IiMzMDI5MjkiIGZpbGwtb3BhY2l0eT0iMC4yIi8+PHBvbHlnb24gcG9pbnRzPSIzNjkuODggMTY2Ljg2IDQyMC4wNiAxMjIuMSAzNTAuMzQgNTAuODQgMjk0LjY0IDEwNy4yOSAzNjkuODggMTY2Ljg2IiBmaWxsPSIjMzAyOTI5IiBmaWxsLW9wYWNpdHk9IjAuMiIvPjxwb2x5Z29uIHBvaW50cz0iMjcxLjYgMTMwLjMyIDIzOS43OCAxNjEuMzEgMzAzLjU2IDIyNi4yOSAzNDYuNDIgMTg5LjUxIDI3MS42IDEzMC4zMiIgZmlsbD0iIzMwMjkyOSIgZmlsbC1vcGFjaXR5PSIwLjIiLz48cG9seWdvbiBwb2ludHM9IjE2My44MiAxNzMuNjMgMTAwLjM4IDEwMC4xIDAgMjAwLjM5IDAgMjIwLjc1IDYzLjUyIDI4NC4yMiAxNjMuODIgMTczLjYzIiBmaWxsPSIjMzAyOTI5IiBmaWxsLW9wYWNpdHk9IjAuMiIvPjxwb2x5Z29uIHBvaW50cz0iNDk5Ljk4IDUwMS40NiA0MDEuMzYgNjAwIDU0OC43OCA2MDAgNTczLjY5IDU3NS4xMSA0OTkuOTggNTAxLjQ2IiBmaWxsPSIjMzAyOTI5IiBmaWxsLW9wYWNpdHk9IjAuMiIvPjxwb2x5Z29uIHBvaW50cz0iMzc1Ljc1IDIyMS41NyAzMzIuMzEgMjYyLjE5IDQwOC4yMyAzNDEuNTkgNDU0LjMxIDI5NC4yOCAzNzUuNzUgMjIxLjU3IiBmaWxsPSIjMzAyOTI5IiBmaWxsLW9wYWNpdHk9IjAuMiIvPjxwb2x5Z29uIHBvaW50cz0iNjAwIDIyMC42NyA2MDAgMjAwLjQ3IDU4OS44OSAyMTAuNTcgNjAwIDIyMC42NyIgZmlsbD0iIzMwMjkyOSIgZmlsbC1vcGFjaXR5PSIwLjIiLz48cG9seWdvbiBwb2ludHM9IjQ2My4xMiA4NS40NiA1NDguNjUgMCA0MDEuMjMgMCAzODkuNDEgMTEuODEgNDYzLjEyIDg1LjQ2IiBmaWxsPSIjMzAyOTI5IiBmaWxsLW9wYWNpdHk9IjAuMiIvPjxwb2x5Z29uIHBvaW50cz0iMTQ4LjY1IDUzLjE2IDEzOS40NCA2MS4wNyAyMTMuMTYgMTM0LjcxIDI0NC40NyAxMDMuNDIgMTQ4LjY1IDUzLjE2IiBmaWxsPSIjMzAyOTI5IiBmaWxsLW9wYWNpdHk9IjAuMiIvPjxwb2x5Z29uIHBvaW50cz0iMTU2LjA3IDQ0NS40NSAzOS4xMSA1NjAuNzEgNzguNDQgNjAwIDE0Ny4yMSA2MDAgMjI5Ljc4IDUxOS4xIDE1Ni4wNyA0NDUuNDUiIGZpbGw9IiMzMDI5MjkiIGZpbGwtb3BhY2l0eT0iMC4yIi8+PHBvbHlnb24gcG9pbnRzPSIyMDAuNCA2MDAgMjk5LjYyIDYwMCAyNTAuMDEgNTUwLjQ0IDIwMC40IDYwMCIgZmlsbD0iIzMwMjkyOSIgZmlsbC1vcGFjaXR5PSIwLjIiLz48cG9seWdvbiBwb2ludHM9IjEyNC43OSA0MjMuNSA1MS4wOCAzNDkuODUgMCA0MDAuODggMCA1MTkuNzYgMTQuMjIgNTMzLjk3IDEyNC43OSA0MjMuNSIgZmlsbD0iIzMwMjkyOSIgZmlsbC1vcGFjaXR5PSIwLjIiLz48cG9seWdvbiBwb2ludHM9IjI2Ni44MyA4MS4wOCAzMjMuNzIgMjQuMjQgMjk5LjQ2IDAgMjAwLjU2IDAgMTY3LjAxIDM0LjAxIDI2Ni44MyA4MS4wOCIgZmlsbD0iIzMwMjkyOSIgZmlsbC1vcGFjaXR5PSIwLjIiLz48cG9seWdvbiBwb2ludHM9Ijc4LjMzIDAgODguNTggMTAuMjUgMTAxLjUzIDE4Ljg1IDEyOS40OCAyMC40NCAxMzguOTUgOC4zNiAxNDcuMzIgMCA3OC4zMyAwIiBmaWxsPSIjMzAyOTI5IiBmaWxsLW9wYWNpdHk9IjAuMiIvPjxwb2x5Z29uIHBvaW50cz0iNTQwLjY1IDQ2MC4zMiA2MDAgNTE5LjYyIDYwMCA0MDEuMDIgNTQwLjY1IDQ2MC4zMiIgZmlsbD0iIzMwMjkyOSIgZmlsbC1vcGFjaXR5PSIwLjIiLz48L2c+PC9zdmc+") !important;
        /*filter: hue-rotate(180deg);*/
      }

      .langFormInverter .gradient{
        opacity : 0.3;
        filter : invert();
      }
      .flexColumn{
        display : flex; 
        align-content: center; 
        justify-content: center; 
        align-items: center; 
        flex-direction: column;
      }

      .buttonContainer{
        width : 62%;
        display : flex;
        align-content : center;
        justify-content : center;
        /*box-shadow : 0px 10px 0 rgba(0,0,0,0.1);
        margin-bottom : 10px;*/
      }

      .crosshairElement.hor{
        width: 8px; 
        height : 0.5px; 
        animation-name: growHor;
      }
      .crosshairElement{
        background-color: #ffffff; 
        position: absolute;
        animation-duration: 0.5s;
        animation-timing-function: ease-in;
      }

      .crosshairElement.vert{
        width : 0.5px; 
        height : 8px;
        animation-name: growVert;
      }

      @keyframes growVert{
        0% { transform: scaleY( 0 ) }
        100% { transform: scaleY( 1 ) }
      }

      @keyframes growHor{
        0% { transform: scaleX( 0 ) }
        100% { transform: scaleX( 1 ) }
      }

      .flasher{
        animation-name: flasherAnim !important;
        animation-duration: 0.1s !important;
        animation-iteration-count: 1 !important;
        animation-timing-function: ease-in !important;
        animation-direction: normal !important;
        animation-play-state:running !important ;
        animation-fill-mode: forwards !important;
      }

      .flexy{
        display : flex;
        justify-content : center;
        align-items : center;
        position : absolute;
      }

      .crosshair{
        width : 100%;
        height : 100%;
        pointer-events : none;
        z-index : 100004;
        mix-blend-mode : difference;
      }

      @keyframes flasherAnim{
        0%{ filter: brightness(100); }
        40%{ filter: brightness(100); }
        100%{ filter: brightness(1); }
      }

      .iconContainerOnBoarding {
        background-color : transparent;
        color : white;
        display : flex;
        justify-content : center;
        align-items : center;
      }
      .cloudBackground{
        background-image : url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MDAgNjAwIj48cGF0aCBkPSJNNDgxLjY4LDIxNWMuNS05LjYzLDUuODgtMTguNjMsMy0yOC4zLTQtMTMuMTgtMTYuMzctMTguNjItMjguOS0xOS43Ny0xOS4yMS0xLjc4LTI0Ljg1LDEyLTIzLjg3LDI5LjYzLTEzLjM2LTIuMzgtMzIuMTctOS0zOSw1LjM5LTcuNDQsMTUuNzQsNiwzNi40MywyMS43OSwzNi40OS0xNi4yMSw3LjI1LTM1LDE1LjI4LTMzLjU0LDM0LDEuOTIsMjQuODksMzMuNTEsMjguOTEsNDkuNjEsMTguMjgsOCwxNS4xMywyMC40MywzNi42NSwzOS43OCwyOC43MiwxMC45MS00LjQ3LDMwLjM2LTMzLjEsMTIuNzktNDAuNTYsMTMuMjcsMS40MiwzMy41LTUuNTUsMjkuNjItMjIuMjYtMy0xMi44MS0xNi4xNC0xMi4wOS0yNi0xNS4yMkM1MDguOTMsMjM5LjM4LDUwMi41NiwyMDcuMiw0ODEuNjgsMjE1WiIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iMC43NSIvPjxwYXRoIGQ9Ik0xNTQuNjcsNTEuN0MxNjcuMiw1MC4wNiwxNzEsNTEuMzYsMTg0LDU4LjU1YzEwLDUuNTYsMTMsMjIuMTUsOS41MiwzMS43LDkuMTcsMy44NywyNy44Miw2LjY0LDI4LjI5LDIwLjE5LjM4LDExLTE2LDE1LjUxLTI1LjA2LDE3LDEwLjQxLDkuMjYsMTcuNzYsMTkuNzYsNy4yNiwzNC40Ni01Ljc5LDguMTEtMjksOS4zNi0zMi4yMiwwLTUuNTgsOS4zNC0xNSwzNC4zNS0yOS43MywyNS4xNi0xNi44LTEwLjUtOC0yOC0xLjM1LTM1Ljc4LTQ5LjIxLDQuMzEtMzQuMDktNjUuNDcsNC4yMS01OS43QzEzMy4yLDg0Ljc0LDE0NS4yMSw1Mi41NSwxNTQuNjcsNTEuN1oiIGZpbGw9IiNmZmYiIG9wYWNpdHk9IjAuNzUiLz48cGF0aCBkPSJNMTkzLjE2LDQ3Mi4yMWMwLTE4LjgyLTQtNDguNTMsMTQuMzYtNjAuMDUsMTAtNi4yNiwzNi0yLjc1LDQ1LjY5LDMuOTIsOS4zNyw2LjQzLDExLjc1LDIzLjUsNy45MiwzOC40OS0xLjQxLDUuNTMsMjIuMS0yOS4zNSw0My0xMi4zOEMzMjUuODEsNDU5LjgxLDMxMCw0NzguNywyOTUsNDc4LjljMTkuNTMsMTEuNTksMzIuNTksMjAuNzMsMTguMjMsNDkuNDUtOS4yNiwxOC41Mi01MS4yMiwyMS42LTU4Ljg0LDQuMjcsMi42NSwyNC44Ni0yNSw1MS4xLTQ1LjYsNDkuMjYtMTcuMDktMS41My0zNS4yNS0yMC44OS0zMC4zLTQxLjg3LTE5LDIuMjctNDQuNDQtMy43Mi00NC4xMS0yNC43MS4zLTE4LjcxLDIxLjg0LTMyLjQ0LDM3LjM4LTMxLjIzQzE0Mi4yNSw0NjguMywxODIuNzIsNDM3LDE5My4xNiw0NzIuMjFaIiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwLjc1Ii8+PHBhdGggZD0iTTU5MC4xLDMxNi40Yy04LjMzLTcuMTItMjYuNiw2LjQ1LTI3LjQ4LDE0LjgyLTEuMDksMTAuMzEsMTEuNzUsMjcuNDIsMjUuODEsMzEuMTMtMjIuMjItMS44My0zNi4yNSw4LTIxLjg5LDMwLjIyLTI2LjExLTkuMTQtMjguNzIsMjMuNS4yMSwyNi0xOC4yLDMuNzgtNDQuNDQsMjAuOS0zOS4zOCw0MC41NCw1LDE5LjQ4LDMyLjY0LDE5LjU4LDQ0LjM5LDEuMzEtMi4yNSwxNC4zLDE2LjM0LDI4LDI4LjcyLDI3LjkxVjMwNUM1OTQuODgsMzA0LjkzLDU5MC4xNSwzMDguMTUsNTkwLjEsMzE2LjRaIiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwLjc1Ii8+PHBhdGggZD0iTTIyLjIyLDM5MS41NWMzNS4xNy0zMC4zLDIwLjgxLTU3LjcyLTEyLTU5LjA4QzI3Ljc1LDMxOS45LDExLjksMzA1LDAsMzA1VjQ4OC4zOGExMS4zMSwxMS4zMSwwLDAsMCw2LjUzLTEuOGMxMy4wNS05LjE0LDIwLjg5LTIzLjUsMTAuNTgtMzksMTEuMzEtLjMyLDMwLjY2LTYuMDYsMzIuNS0xOC40NUM1Mi4xLDQxMi4wNiw0MC40MiwzOTcuOCwyMi4yMiwzOTEuNTVaIiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwLjc1Ii8+PHBhdGggZD0iTTU5Mi4xNiw1OTEuN2MtMy43Mi04LTE0LjIxLTYuNTgtMjEuNDUtNi42LDE1LjQzLTE0LjMyLDguMzgtMjMuOTMsNC40MS0zMi02LjA5LTEyLjMxLTM1LjA2LTExLjgxLTM3LjQ0LDUuMTgtMTcuNjUtMjUtNTAuODgsMTEuMjUtMjksMjQuNjUtMTEuNzgtMS4xMi0zNC4xOSw0LjM0LTM4LDE3LjE3SDU5MS45NEM1OTMuNDgsNTk4LjA3LDU5My44Nyw1OTUuMzcsNTkyLjE2LDU5MS43WiIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iMC43NSIvPjxwYXRoIGQ9Ik01OTEuOTQtLjM3SDQ3MC42NWExMy4zOCwxMy4zOCwwLDAsMC0uNCwxLjY4QzQ2Ni42NywyMyw0OTQuMTgsMjcuODgsNTA4LjU1LDI4LjhjLTYuMjYsNy43Ni0uNjYsMjcuNCwxNS44NywyOS42LDE0LjY0LDIsMjguNjUtMTQuMzIsMjYuNDQtMjkuNzUuMTUuNzEsNDUuMTgsMTMuMjIsMjYuNTYtMjEuNzlDNTgyLjMyLDUuMTcsNTg5LjEsMy40Niw1OTEuOTQtLjM3WiIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iMC43NSIvPjxwYXRoIGQ9Ik0yNjQuMzYsMjg0LjljLTEuMzUtNi00LjMtMTAtMTEuMDYtNi43Ni02LjEzLDIuOS03Ljc0LDEyLjI5LDEuMTEsMTQuMTMtMTIuOSwxMy41MSwxLjc4LDIyLjMxLDEwLjU3LDExLjMsMTIuMjksNS43NywxNC42Mi0xMS4wNiw1LjktMTEuNjdDMjc4LDI4My42NywyNjYuNywyNzcuNzcsMjY0LjM2LDI4NC45WiIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iMC43NSIvPjwvc3ZnPg==');
      }

      .warningIcon{
        font-size : 3.0em;
        /*height : 2.5em;*/
        width : 100%;
        background-color: transparent;
        /*background-color: var(--altOnBoardingFormBackground);*/
        /*background-color : var(--onBoardingFormBackground);*/
      }

      .msgIcon{
        width: 70%;
        /*width: 1.3em; 
        height: 1.3em;*/
      }

      .roundButton{
        margin-top: 0.15em;
        width: 100%;
        transition: all 0.3s ease-in 0s;
        padding: 0.5em;
        clip-path: circle(24% at 50% 50%);
      }

      .messageWindow{
        position : absolute;
        color : white;
        font-size : 1.2em;          
        width : 75%;
        overflow : auto;
        max-width : 300px;
        background-color : transparent;
        display : flex;
        align-content : center;
        justify-content : center;
        align-items : center;
        flex-direction : column;
        -webkit-user-select: none;
        user-select: none
      }

      .langButton{
        text-align: center; 
        background-color: #400000; 
        padding: 0.3em; 
        box-shadow: 0px 10px 0 rgba(0,0,0,0.1); 
        height: 1.4em;
      }

      .actualTitle{
        background-color: rgb(12, 0, 0);
        /*border-bottom: 1px solid #8b3131;*/
        padding: 0.4em 0.0em 0.4em 0.0em;
        width: 100%;
        /*max-width: 350px;*/
        pointer-events: none;
        -webkit-user-select: none;
        user-select: none
      }

      .title{
        width : 100%;
        color : #fff7f7;
        font-size : 1.3em;
        text-align : center;
        font-family : sans-serif;
        position : absolute;
        z-index : 200005;
        display : flex;
        justify-content : center;
        align-items : center;
        display : none;
        pointer-events: none;
        flex-direction : column;
        animation-name : fadeInAnimDown;
        animation-duration : 0.5s;
        animation-fill-mode : both;
        animation-delay : 0s;
      }

      @keyframes colorAnim{
        0%{ background-color: #e53e00 }
        100%{ background-color: #f6691d }
      }
      .extras{
        transition: transform 0.05s;
      }
      .gFace svg{
        transform-origin: 0% 0%;
      }
      .dramaShadow{
        position: absolute;
        z-index: 99;
        top:0;
        bottom: 0;
        height: 100%;
        pointer-events: none;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#38180b+1,38180b+100&0+0,0+57,0.17+80,0.28+100 */
        background: -moz-radial-gradient(center, ellipse cover, rgba(56,24,11,0) 0%, rgba(56,24,11,0) 1%, rgba(56,24,11,0) 57%, rgba(56,24,11,0.17) 80%, rgba(56,24,11,0.28) 100%); /* FF3.6-15 */
        background: -webkit-radial-gradient(center, ellipse cover, rgba(56,24,11,0) 0%,rgba(56,24,11,0) 1%,rgba(56,24,11,0) 57%,rgba(56,24,11,0.17) 80%,rgba(56,24,11,0.28) 100%); /* Chrome10-25,Safari5.1-6 */
        background: radial-gradient(ellipse at center, rgba(56,24,11,0) 0%,rgba(56,24,11,0) 1%,rgba(56,24,11,0) 57%,rgba(56,24,11,0.17) 80%,rgba(56,24,11,0.28) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0038180b', endColorstr='#4738180b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
      }
      .arrowInfo, .arrowInfo2{
        animation-name: arrowInfoAnim;
        animation-duration: 0.8s !important;
        animation-iteration-count: infinite;
      }
      @keyframes arrowInfoAnim{
        from{ opacity: 0;transform:rotate(40deg) }
        to{ opacity: 0.8;transform:rotate(60deg) }
      }


      @keyframes tickerAnim{
        0% {transform: translateX(0) translateZ(0) }
        100% {transform: translateX( var(--tickerWidth) ) translateZ(0) }
      }
      .xSpotIcon{
        animation-name: blinkyXSpot;
        animation-duration: 0.4s;
        animation-direction: alternate-reverse;
        animation-iteration-count: infinite;
      }
      @keyframes blinkyXSpot{
        from{fill: #000;}
        to{fill: #f00;}
      }
      .dramaShadow2{
        /*background: radial-gradient(ellipse at center, rgba(56,24,11,0) 0%,rgba(56,24,11,0) 1%,rgba(56,24,11,0) 47%,rgba(56,24,11,0.5) 80%,rgba(56,24,11,0.28) 100%) !important;*/
        /*background: radial-gradient(ellipse at center, rgba(56,24,11,0) 0%,rgba(56,24,11,0) 1%,rgba(56,24,11,0) 37%,rgba(56,24,11,0.8) 80%,rgba(56,24,11,1) 100%) !important;*/
        background: radial-gradient(ellipse at center, rgba(56,24,11,0) 0%,rgba(56,24,11,0) 20%,rgba(56,24,11,0.3) 60%,rgba(56,24,11,0.8) 90%,rgba(56,24,11,1) 100%) !important;
      }
      .dramaShadow3{
        /*background: radial-gradient(ellipse at center, rgba(56,24,11,0) 0%,rgba(56,24,11,0) 1%,rgba(56,24,11,0) 47%,rgba(56,24,11,0.5) 80%,rgba(56,24,11,0.28) 100%) !important;*/
        background: radial-gradient(ellipse at center, rgba(56,24,11,0) 0%,rgba(56,24,11,0) 1%,rgba(56,24,11,0) 37%,rgba(56,24,11,0.5) 80%,rgba(56,24,11,0.8) 100%) !important
        /*background: radial-gradient(ellipse at center, rgba(56,24,11,0) 0%,rgba(56,24,11,0) 20%,rgba(56,24,11,0.5) 50%,rgba(56,24,11,0.8) 90%,rgba(56,24,11,1) 100%) !important;*/
      }
      .popupButton, .problemButton{
        margin-top: 20px;
        pointer-events: auto;
        color: white !important;
        /*background-color: rgba(231, 12, 14, 0.59) !important;*/
        /*color: white !important;*/
        border-width: 0 !important;
        font-size: 1.5em !important;
        min-height: 50px !important;
        min-width: 50px !important;
        width: 100% !important;
        /*display: block !important;*/
      }

      .popupButton.alertButton{
        background-color: rgba(231, 12, 14, 0.59) !important;
        color: white !important;
      }
      @keyframes sidewaysAnim1{
        from{
          transform: translateX(0px) translateZ(0);
        }
        to{
          transform: translateX(10%) translateZ(0);
        }
      }
      @keyframes sidewaysAnim2{
        from{
          transform: translateX(0px) translateZ(0);
        }
        to{
          transform: translateX(-10%) translateZ(0);
        }
      }
      @keyframes sidewaysAnim3{
        from{
          transform: translateX(0px) translateZ(0);
        }
        to{
          transform: translateX(20%) translateZ(0);

        }
      }
      @keyframes dashArrayAnim{
        from{
          stroke-dasharray: 0.2 0.05;
        }
        to{
          stroke-dasharray: 0.05 0.2;
        }
      }
      .registerX{
        background-color: #ff0524;
        color: #fff;
        border: none;
        padding: 0.3em;
        font-size: 1.2em;
        /*margin-top: 0.5em;*/
        width: 70%;
      }
      .problemButton{
        pointer-events: auto;
        width: 70% !important;
        /*display: inline !important;*/
        padding: 1%;
        margin-top: 0;
        float:left;
        font-weight: bold;
      }
      .pinProblem{
       
      }
      .mrClock{
        position:relative;
        width: 1em;
        float: left;
      }
      .subText {
        font-size: 0.4em;
      }
      .yayIcon{
        position:absolute;
        z-index: 20000;
        width:100%;
        top: 10%;
        animation-name: shakeyAnim !important;
        animation-duration: 0.1s !important;
        animation-iteration-count: infinite !important;
        -webkit-animation-timing-function: steps(2);
        -o-animation-timing-function: steps(2);
        animation-timing-function: steps(2);
      }
      .problemButton100{
        pointer-events: auto;
        color: black !important;
        width: 100% !important;
        display: inline !important;
        margin: 1%;
        float: left;
        background-color: #0e91d2!important;
        border-width: 0 !important;
        font-size: 1em !important;
        min-height: 50px !important;
        min-width: 50px !important;
      }
      .tags{display: none;}
      .statuso{
        width: 100%;
        float: left;
        font-size: 1.1em;
      }
      .console{ 
        overflow: hidden;
        font-size: 1.5em;
        position:absolute; 
        width:100%;
        bottom: 0;
        z-index: 20000;
        pointer-events: none;
      }
      .buttonSend{
        /*float:left;*/
        visibility: hidden;
        padding: 7px;
        /*font-family: sans-serif;*/
        background-color: orange;
        /*font-size: 0.8em;*/
        margin-left: 10px;
        width: 4.5em;
        text-align: center;
        height: 1.8em;
        cursor: default;
      }

      .msgBox{
        opacity:0.3;
        pointer-events: auto;
        /*float: left;*/
        /*border: 1px solid black;*/
        font-size: 1.2em;
        background-color: transparent;
        padding: 10px;
        cursor: default;
        color: white;
        margin-right: 10px;
        margin-left: 10px;
        /*font-family: sans-serif;*/
        text-shadow: 2px 2px black;
        /*filter: drop-shadow(2px 2px black);*/
      }
      .repeatBtn{
        width: 0;
        height: 0;
        border-top: 1.5em solid transparent;
        border-left: 2.5em solid red;
        border-bottom: 1.5em solid transparent;
        float: left;
        opacity: 0.7;
      }

      .mapboxgl-popup.alert{
        z-index: 1001; 
        /*font-family: sans-serif;*/
        animation-delay: 0 !important;
        animation-name: alertAnim !important;
        animation-timing-function: cubic-bezier(0, 0.13, 0.98, 1.6) !important;
        animation-duration: 0.2s !important;
        width: 78%;
        max-width: 350px;
      }
      .mapboxgl-popup.alert.button{
        margin-top: 20px;
      }
      .mapboxgl-popup.alert .mapboxgl-popup-content{margin: auto;}
      @keyframes alertAnim{
        from{ transform:scale(0.1,0.1) translateZ(0) }
        to{ transform:scale(1,1) translateZ(0)  }
      }



      .explainer{
        /*font-family: sans-serif;*/
        font-size: 1.2em;
        margin-top: 0.2em;
        color: black;
        text-align: center;
        /*text-shadow: 1px 1px rgba(255, 255, 255, 0.5);*/
        /*text-shadow: none !important;*/
        /*text-shadow: 1px 1px rgba(0, 0, 0, 0.8);*/
      }
      .selectBasket{
        position: relative;
        z-index: 20000;
        /*width: 200px;*/
        font-size: 1.2em;
        padding: 10px;
        clear:both;
      }
      .globalStatusDisplay{
        margin-top: 5px;
        padding:10px;
        clear: both;
        position: relative;
        z-index: 20000;
        pointer-events: none;
        /*font-family: sans-serif;*/
        color: #fff;
        text-shadow: 2px 2px black;
      }
      .selecto, .selectoCommands{
        padding: 10px;
        float: left;
      }
      .emojiAlert{
        text-align: center;
        font-size: 5.5em;
      }

      .teamPopup.mapboxgl-popup{
      
        animation-name: teamPopupShowUp, breatherAnimw;
        animation-duration: 0.1s, 0.1s !important;
        animation-iteration-count: 1, 1;
        animation-delay: 0s, 0.2s !important;
        animation-fill-mode: none;
      }
      .mapboxgl-popup{
        z-index: 101;
        /*animation-name: popupShowUp;*/
        animation-delay: 0s !important;
        animation-duration: 0.1s !important;
        animation-fill-mode: both;
        animation-timing-function: ease-in-out/*cubic-bezier(0, -0.39, 1, 0.12)*/;
        font-family: "HelveticaNeue-CondensedBold", "PingFangTC-Semibold", sans-serif;
      }
      .mapboxgl-popup.problem{
        width: 78%;
        max-width: 350px;
        min-height: 50%;
        max-height: 95%;
        z-index: 1001; 
        /*font-family: sans-serif;*/
        position: absolute;
        animation-delay: 0s !important;
      }
      .mapboxgl-popup img{
        display: block;
        background-color: rgba(0,0,0,0.6);
      }
      .breather{
        animation-name: breatherAnim;
        animation-duration: 0.1s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-delay: 0.05s;
      }

      @keyframes breatherAnim{
        from{ font-size: 0.95em; }
        to{font-size: 1.05em;}
      }
      .cancelBreather .breather2{
        animation-name: nada;
      }
      .breather2{
        animation-name: breatherAnim3;
        animation-duration: 0.18s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-delay: 0.05s;
      }

      

      @keyframes breatherAnim3{
        from{ font-size: 0.98em; }
        to{font-size: 1.02em;}
      }
      .softBreather{
        animation-name: breatherAnim2;
        animation-duration: 0.1s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-delay: 0.2s;
      }

      @keyframes breatherAnim2{
        from{ font-weight: 100; }
        to{font-weight: 700;}
      }

      .popupMini{
        width: auto !important;
        height: auto !important;
      }
      .popupMini .explainer, .popupMini .problemo{
        display: none !important;
      }
      .popupMini .capi{
        cursor: pointer !important;
        pointer-events: auto !important;
        font-size: 1.4em !important;
        padding: 0.6em !important;
      }
      .popupMini .imgContainer{
        font-size: 0em !important;
      }
      .mapboxgl-popup-content{
        z-index: 10;
        pointer-events: none;
        background-color: rgba(255, 205, 8, 0);
        padding: 0;
        color: #ffffff;
        border-radius: 1.6em;

        /*width: 100% !important;*/
        /*box-shadow: 4px 5px 0px 1px rgba(0, 0, 0, 0.21) !important;*/
         box-shadow: none !important;
      }
      .mapboxgl-popup-content h2{
        color: black;
        /*font-weight: normal;*/
      }
      .problem .mapboxgl-popup-content{
        background-color:transparent;
        /*color: white;*/
        box-shadow: none !important;
      }

      .mapboxgl-popup-tip{

        /*border-top: 25px solid black !important;*/
        /*border-top-color: black !important;*/
        /*border-left: 0px solid transparent !important;
        border-right: 30px solid transparent !important;
        left: 15px !important;
        position: relative !important;*/
      }


      .imperialOwned .mapboxgl-popup-tip{
        /*position: absolute;*/
      }
      .candyLocked .mapboxgl-popup-content{
        background-color: rgba(115, 186, 255, 1);
        padding: 0.6em;
        padding-bottom: 0.8em;
      } 

      .candyLocked h2{
        font-size: 5.0em;
        line-height: 1.1em;
      }    
      .imperialOwned .mapboxgl-popup-content{
        /*margin-top: 20px;*/
        /*margin-bottom: 20px;*/
      }      
      .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{
        border-top: 25px solid rgba(115, 186, 255, 1) !important;
        border-bottom: 0px solid rgba(115, 186, 255, 1) !important;
        transform: scale(0.5, 1);
      }

      .mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
        border-top: 0px solid rgba(115, 186, 255, 1) !important;
        border-bottom: 25px solid rgba(115, 186, 255, 1) !important;
        transform: scale(0.5, 1);
      }
      .mapboxgl-popup-anchor-left .mapboxgl-popup-tip{
	        border-right: 25px solid rgba(115, 186, 255, 1) !important;
	        border-right-color: rgba(115, 186, 255, 1) !important;
          transform: translateX(10px) scale(2, 0.8);
      }

      .imperialOwned.mapboxgl-popup-anchor-left .mapboxgl-popup-tip{
        /*transform: translateX(-10px) scale(2, 0.8);*/
      }
       .mapboxgl-popup-anchor-right .mapboxgl-popup-tip{
	        border-left: 25px solid black !important;
	        border-left-color: rgba(115, 186, 255, 1) !important;
          transform: translateX(-10px) scale(2, 0.8);
      }

      .mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip{
          border-left: 15px solid transparent;
          border-right: 0px solid transparent;
          border-bottom: 25px solid;
          transform: skew(-32deg, 0);
          transform-origin: 0% 100%;
          border-bottom-color: rgba(115, 186, 255, 1) !important;
      }


      .imperialOwned.mapboxgl-popup-anchor-right .mapboxgl-popup-tip{
        /*transform: translateX(10px) scale(2,0.8);*/
      }
      .mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip{
          transform-origin: 0% 100%;
          border-bottom-color: rgba(115, 186, 255, 1) !important;
          border-left: 15px solid transparent;
          border-right: 0px solid transparent;
          border-bottom: 25px solid;
          transform: skew( -32deg, 0);
          z-index: -1;
      }

      .mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{
        border-left: 0px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 25px solid;
        transform: skew(32deg, 0);
        transform-origin: 0% 100%;
        border-bottom-color: rgba(115, 186, 255, 1) !important;
      }

      .mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{
        transform-origin: 0% 100%;
        border-bottom-color: rgba(115, 186, 255, 1) !important;
        border-left: 0px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 25px solid;
        transform: skew(40deg, 0) translateX(0px) translateY(1px);
        z-index: -1;
      }

      .mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip{
        border-left: 15px solid transparent;
        border-right: 0px solid transparent;
        border-top: 25px solid;
        transform: skew(32deg, 0) translateX(16px);
        transform-origin: 0% 100%;
        border-top-color: rgba(115, 186, 255, 1) !important;
      }


      .teamPopup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{
        position: relative;
        top: -10px;
        border-left: solid 10px transparent;
        border-top: 30px solid rgba(255, 253, 248, 1) !important;
        border-bottom: 0px solid rgba(115, 186, 255, 1) !important;
      }
      .teamPopup.mapboxgl-popup-anchor-top .mapboxgl-popup-tip{
        position: relative;
        top: 8px;
        /* left: -4px; */
        border-right: solid 10px transparent;
        border-top: 0px solid rgba(255, 253, 248, 1) !important;
        border-bottom: 30px solid rgba(255, 255, 255, 1) !important;
      }
      .teamPopup.mapboxgl-popup-anchor-left .mapboxgl-popup-tip{
        position: relative;
        top: 9px;
        left: 4px;
        border-right: 30px solid white !important;
        border-left: 0px solid rgba(255, 255, 255, 0);
        border-top: 2px solid transparent !important;
      }
      .teamPopup.mapboxgl-popup-anchor-right .mapboxgl-popup-tip{
        position: relative;
        top: 9px;
        left: -7px;
        border-left: 30px solid white !important;
        border-right: 0px solid rgba(255, 255, 255, 0) !important;
        border-bottom: 2px solid transparent !important;
      }
      .teamPopup.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip{
        position: relative;
        border: 0 solid transparent;
        border-top: 10px solid white !important;
        border-radius: 30px 0 0px 0;
        top: -7px;
        left: -50px;
        width: 37px;
        height: 20px;
        transform-origin: 100% 0%;
        transform: rotate(-93deg);
      }

      .teamPopup.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip{
        position: relative;
        border: 0 solid transparent;
        border-top: 10px solid white !important;
        border-radius: 30px 0 0px 0;
        top: -6px;
        left: 8px;
        width: 38px;
        height: 20px;
        transform-origin: 100% 0%;
        transform: rotate(-80deg) scale(1, -1);
      }

      .teamPopup.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{
        position: relative;
        border: 0 solid transparent;
        border-bottom: 10px solid white !important;
        border-radius: 0px 0px 50px 0px;
        top: 3px;
        left: -25px;
        width: 40px;
        height: 20px;
        transform-origin: 100% 0%;
        transform: rotate(-93deg) scale(1, 1);
      }

      .teamPopup.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip{
        position: relative;
        border: 0 solid transparent;
        border-bottom: 10px solid white !important;
        border-radius: 0px 0px 50px 0px;
        top: 2px;
        left: -7px;
        width: 42px;
        height: 20px;
        transform-origin: 100% 0%;
        transform: rotate(-93deg) scale(1, -1);
      }     

      .mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip{
        border-left: 15px solid transparent;
        border-right: 0px solid transparent;
        border-top: 25px solid;
        transform: skew(-52deg, 0) translateX( -32px );
        transform-origin: 100% 100%;
        border-top-color: rgba(0, 0, 0, 1 ) !important;
      }

      .mapboxgl-popup-anchor-top .mapboxgl-popup-content{ transform-origin: 50% 0%; }
      .mapboxgl-popup-anchor-top-left .mapboxgl-popup-content{ transform-origin: 0% 0%; }
      .mapboxgl-popup-anchor-top-right .mapboxgl-popup-content{ transform-origin: 100% 0%; }
      .mapboxgl-popup-anchor-bottom .mapboxgl-popup-content{ transform-origin: 50% 100%; }
      .mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content{ transform-origin: 0% 100%; }
      .mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content{ transform-origin: 100% 100%; }

      @keyframes popupShowUp{
        from{ transform: scale( 0, 0 ) translateZ( 0 ) }
        to{ transform: scale( 1, 1 ) translateZ( 0 ) }
        /*from{ font-size: 0.1em;}
        to{ font-size: 1em;}*/
      }


      @keyframes teamPopupShowUp{
        from{font-size: 0.1em;}
        to{font-size: 1em;}
      }
      .capi:first-letter {
        text-transform:capitalize;
      }
      .alertColor{
        background-color: rgba(82, 168, 170, 0.1) !important;
      }


      .fabCafeLogo, .tiagLogo, .presentText{
        display: inline-block;
        z-index: 100;
      }
      .tiagLogo{ 
          /*position: absolute;
        transition: transform 0.5s cubic-bezier(0.58,-0.03, 1, 0.99);*/
        /*filter: drop-shadow(4px 4px black);*/
      }
      .showAccuracy{
      	position: fixed;
      	top: 0;
      	font-family: sans-serif;
        color:black;
        background-color: white;
      }
      .presentText{
        stroke-width: 20;
        margin-top: 8px;
        width: 36%;
        z-index: 199;
        position: absolute;
      }

      .distanceUnit{
        color: #f35858;
      }

      .distanceDisplay{
        font-family: sans-serif;
        font-weight: normal;
      }

      .shrinker{
        display: inline-block;
        transform: scale(0.8);
      }
      .intro{
        z-index: 111;
        text-align: center;
        height: 50%;
        width: 100%;
        background-color: black;
        transition: transform 1.9s ease-in;
        
      }
      .introText{
        transition: transform 0.6s cubic-bezier(0.58,-0.03, 1, 0.99);
        color: white;
        /*font-family: sans-serif;*/
        font-size: 2em;
        text-align: left;
        padding-left: 0.3em;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .lensBirth{
        animation-name: lensBirthAnim;
        animation-duration: 0.5s;
        animation-timing-function: cubic-bezier(0.17, 0.59, 0.36, 1.04);
      }
      @keyframes lensBirthAnim {

        from{transform: translateZ(0) scale( 3, 3 ) rotate( -300deg ); opacity: 0 }
        to{transform: translateZ(0) scale( 1, 1) rotate( 0deg ); opacity : 0.5 }
}  
      }
      .tiagLogo{
        animation-name: tiagBirth;
        animation-duration: 1s;
        animation-timing-function: ease-out;
      }
      .daoLogoContainer{
        /*animation-name: tiagBirth;*/
        animation-duration: 1.5s;
        animation-timing-function: ease-out;
      }
      .presentsTitle{
        animation-name: presentsBirth;
        animation-duration: 0.3s;
        animation-timing-function: ease-out;
        animation-fill-mode: both;
      }
      .
      .messageWindow:not(.teamRegistrationForm)::before{
        width: 92%;
        max-width: 280px;
        border-top: 10px solid var(--onBoardingFormBackground);
        content: "";
      }
      .emojiFormContainer::before{
        width: 92%;
        max-width: 280px;
        /*border-top: 10px solid rgba(255, 41, 67, 1);*/
        content: "";
        transition: 0.5s ease-in;
      }
      .emojiFormContainer.focused::before{
        /*border-top: 10px solid var(--onBoardingFormBackground);*/
      } 
      .emojiFormContainer.processing::before{
        /*border-top: 10px solid #63140b;*/
      }          
      .messageContent:not(.gpsMsg):not(.cameraMsg)::after{
        content: "";
        width: 0;
        height: 0;
        /*border-left: 0.4em solid transparent;
        border-right: 0.4em solid transparent;*/
        /*border-top: 0.8em solid var(--altOnBoardingFormBackground);*/
      }

      .actualSettings span{
        background-color: red;
        padding: 0.5em 1em;
        display: inline-block
      }
      .actualSettings ul li a{
        color: rgb(194, 160, 160);
        text-decoration: none;
      }
      @keyframes slideInAnim2{
        from{ transform : translateX( -100% ) translateZ( 0 ) }
        to{  transform : translateX( 0% ) translateZ( 0 ) }
      }

      .prePresentAction{
        animation-name : prePresentActionAnim;
        animation-duration : 0.1s;
        animation-timing-function: ease-in-out;
        animation-direction: alternate;
        animation-iteration-count: infinite;
      }
      @keyframes prePresentActionAnim{
        from{ font-size: 1em; /*filter : brightness(100);*/ }
        to{ font-size : 1.6em; /*filter : brightness(0);*/ }
      }
      .pupilSimple{
        transform-origin: 48% 53%;
        /*transform: scale(1.7);*/
        transition: 0.3s;
        animation-duration : 0.5s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }

      @keyframes growPupil{
        from{ transform: scale(1); }
        to{ transform: scale(1.7); }
      }



      .presentAction{
        transition: opacity 0.2s ease-in-out;
      }

      .title::after{
        /*width: 72%;
        max-width: 280px;
        border-bottom: 5px solid rgba(255, 41, 67, 0.6 );
        content: "";*/
      }
      .actualMessageContent{
        background-color : transparent;
        color: black;
      }
      .actualMessageContent:not(.gpsMsg):not(.cameraMsg)::after{
        width: 20%;
        max-width: 280px;
        /*border-bottom: 1px solid rgba(255, 41, 67, 1 );*/
        content: "";
      }
      @keyframes tiagBirth{
        from{top: 100vh;}
        to{top: 0vh;}
      }
      @keyframes presentsBirth{
        from{top: 100vh;}
        to{top: 20vh;}
      }

      .tiagLogo svg{
        width: 65%;
      }
      .daoLogoContainer svg{
        width: 60%;
      }

      .fabCafeLogo, .tiagLogo{
        /*transition: opacity 0.4s ease-in;*/
      }
      .fadeOut{
        animation-name: fadeOutAnim2 !important;
        animation-duration: 0.4s !important;
        animation-timing-function: ease-in !important;
        animation-fill-mode: both !important;
        animation-iteration-count: 1 !important;

      }
      .problem .explainer .problemCopy{
        color: white !important;
        padding-bottom: 10px;
        /*text-shadow: none !important;*/
      }
      @keyframes fadeOutAnim2{
        from{opacity: 1; font-size: 100%; }
        to{opacity:0; font-size: 0%;}
      }
      @keyframes fadeOutAnim{
        from{opacity: 1}
        to{opacity:0}
      }
      @keyframes fadeOutAnimUp{
        from{opacity: 1; transform : translateY( 0em ) translateZ( 0px);}
        to{opacity:0; transform : translateY( 2em ) translateZ( 0px ); }
      }
      @keyframes fadeOutAnimAux1{
        from{ transform : translateY( 0 ) translateZ( 0 ) }
        to{ transform : translateY( 1em ) translateZ( 0 ) }
      }
      @keyframes fadeOutAnimAux2{
        from{ transform : translateX( 0 ) translateZ( 0 ) }
        to{ transform : translateX( 1em ) translateZ( 0 ) }
      }
      @keyframes fadeOutAnim3{
        from{opacity: 1}
        to{opacity:0}
      }
      @keyframes fadeOutAnimF{
        from{opacity: 1}
        to{opacity:0.6}
      }
      @keyframes fadeInAnimX{
        from{opacity: 0}
        to{opacity:0.2}
      }
      @keyframes fadeInAnimDown{
        from{opacity: 0; transform : translateY( -2em ) translateZ( 0px ); }
        to{opacity: 1; transform : translateY( 0em ) translateZ( 0px);}
        
      }
      .introLabel{
        stroke-width: 3.5; 
        stroke: #FFAD1D;
        filter: drop-shadow(4px 4px black);
        pointer-events: none;
        position:absolute;
        width: 32%;
        animation-name: introLabelAnim;
        animation-duration: 0.5s;
        transform-origin: 50% 50%;
        animation-timing-function: cubic-bezier(0.96, 0.03, 1, 0.98);
      }
      .wingPrepare{
        stroke-width : 0.15;
        /*stroke : #fff;*/
        transform-origin: 50%;
        animation-duration: 0.08s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
      .wingLeft{
        animation-name: wingFlapAnim;

      }
      .wingRight{
        animation-name: wingFlapAnim2;
      }
      @keyframes wingFlapAnim{
        from{transform: translateZ(0) rotate(0deg);}
        to{transform: translateZ(0) rotate(-20deg);}
      }
      @keyframes wingFlapAnim2{
        from{transform: translateZ(0) rotate(0deg);}
        to{transform: translateZ(0) rotate(20deg);}
      }
      .rotatey{
        transform-origin: 50% 50%;
        animation-name: rotateyAnim !important;
        animation-duration: 0.15s !important;
        animation-iteration-count: infinite !important;
        animation-direction: alternate;
        /*-webkit-animation-timing-function: steps(2);
        -o-animation-timing-function: steps(2);
        animation-timing-function: steps(2);      */
      }
      @keyframes rotateyAnim{
        from{transform: translateZ(0px) rotate(10deg);}
        to{transform: translateZ(0px) rotate(-10deg);}
      }
      .shakey{
        animation-name: shakeyAnim !important;
        animation-duration: 0.1s !important;
        animation-iteration-count: infinite !important;

        -webkit-animation-timing-function: steps(2);
        -o-animation-timing-function: steps(2);
        animation-timing-function: steps(2);
      }

      .shakey2{
        animation-name: shakeyAnim2 !important;
        animation-duration: 0.1s !important;
        animation-iteration-count: infinite !important;

        -webkit-animation-timing-function: steps(2);
        -o-animation-timing-function: steps(2);
        animation-timing-function: steps(2);
      }
      .shakey3{
        animation-name: shakeyAnim3 !important;
        animation-duration: 0.1s !important;
        animation-iteration-count: infinite !important;

        -webkit-animation-timing-function: steps(2);
        -o-animation-timing-function: steps(2);
        animation-timing-function: steps(2);
      }
      .shakey4{
        animation-name: shakeyAnim4 !important;
        animation-duration: 0.15s !important;
        animation-iteration-count: infinite !important;

        -webkit-animation-timing-function: steps(2);
        -o-animation-timing-function: steps(2);
        animation-timing-function: steps(2);
      }
      .shakeyX{
        animation-name: shakeyAnimX !important;
        animation-duration: 0.1s !important;
        animation-iteration-count: infinite !important;

        -webkit-animation-timing-function: steps(2);
        -o-animation-timing-function: steps(2);
        animation-timing-function: steps(2);
      }

      /*might be helpful in the future*/
      #curvedarrow {
        position: relative;
        width: 0;
        height: 0;

        border: 0 solid transparent;
        border-top: 20px solid red;
        border-radius: 60px 0 0 0;
        top: -2px;
        left: -29px;
        width: 60px;
        height: 90px;
        transform: rotate(-93deg);
      }

      .eggShell path{
        transition: fill 0.5s;
      }
      .glowy .eggShell path{
        fill: #ffffe6;
      }
      .introNum{
        width: 50% !important;
      }

      @keyframes introLabelAnim{
        from{transform: scale(0.5,0.5) translateZ(0px); opacity: 0;}
        to{transform: scale(1,1) translateZ(0px); opacity: 1;}
      }


      @keyframes shakeyAnim{
        from{transform: translateX(-2px) translateY(-2px) translateZ(0px) rotate(0.5deg);}
        to{transform: translateX(2px) translateY(2px) translateZ(0px) rotate(-0.5deg);}
      }

      @keyframes shakeyAnimX{
        from{transform: translateX(-2px) translateY(-2px) translateZ(0px) rotate(0.5deg) skew(1deg, -1deg);}
        to{transform: translateX(2px) translateY(2px) translateZ(0px) rotate(-0.5deg) skew(-1deg, 1deg);}
      }

      @keyframes shakeyAnim2{
        from{transform: translateX(-1px) translateY(-1px) skew(9deg, 0);}
        to{transform: translateX(1px) translateY(1px) skew(-9deg, 0);}
      }
      @keyframes shakeyAnim3{
        from{transform: translateZ(0) translateX(-1px) translateY(-1px) skew(4deg, 0);}
        to{transform: translateZ(0) translateX(1px) translateY(1px) skew(-4deg, 0);}
      }
      @keyframes shakeyAnim4{
        from{width: 100%; left: -5px}
        to{width: 95%; left: 5px}
      }
      .msgTemplate{
        word-break: break-all;
        animation-name: shakero;
        animation-duration: 0.75s;
        animation-iteration-count: 1;
        text-align: center;
        z-index: 10001;
        color: #fff;
        /*font-family: sans-serif;*/
        font-size: 1.1em;
        text-align: center;
        pointer-events: none;
        width:1em;
        left: 50%;
        top: 50%;
        background-color: black;
        padding: 5%;
        visibility: hidden;
      }
      @keyframes shakero{
        from{ opacity: 0;}
        to{ opacity: 1;}
      }
      @keyframes shaker{
        from{ transform:translateZ(0) translateX(2.5px) translateY(2.5px) }
        to{transform:translateZ(0) translateX(-2.5px) translateY(2.5px) }
      }
      .yo{
        transform: translateY(-50%);
        transition: top 0.2s cubic-bezier(0.26, 0.01, 0, 1.38);
        top: -10vw;
      }
      .problemMarker{
        width: 40px;
        height: 40px;
        /*border: 2px black solid;*/
        padding: 2px;
        border-radius: 50%;
        /*background-color: white;*/
      }
      .fadeMarkers .eggMarker, .fadeMarkers .daoMarkerContainer{
        opacity:0.25;
      }
      .hideMarkers .eggMarker, .hideMarkers .daoMarkerContainer{
        display:none;
      }
      .fadeMarkers .newBground{
        fill: none !important;
      }
      .fadeMarkers .chosenMarker.newBground{
        fill: black !important;
      }
      .eggMarker{
        width: 35px;
        height: auto;
        /*border: 2px black solid;*/
        padding: 2px;
        border-radius: 50%;
        /*background-color: white;*/
      }

      .bearingDisplay{
        z-index: 10500;
        position: absolute;
        font-size: 3.8em;
        /*font-family: sans-serif;*/
        color: white;
        width: 90%;
        /*height: 90%;*/
        overflow: hidden;
        pointer-events: none;
        opacity: 0.8;
      }
      .problemMarker circle{
        /*opacity: 0;*/
      }
      .butto{
        z-index:1000;
      }
      .buttons{
        /*width: 100%;
        position: absolute;
        bottom: 0;
        left:0;*/
        /*width: 90%;*/
        /*margin: auto;*/
        /*padding-top: 10px;*/
        margin-top: 1em;
        /*border-top: 1px dotted black;*/
      }
      .timebar{
        position:absolute;
        background-color: white;
        opacity: 0.7;
        width: 100%;
        height: 5%;
        top: 10px;
        animation-duration: 0.35s;
        animation-iteration-count: infinite;
        animation-timing-function: steps(2)
        z-index: 10000;
      }
      @keyframes blinkyTimebar{
        from{background-color: red}
        to{background-color: white}
      }
      .blinky2{
        animation-name: blinky2Anim;
        animation-duration: 0.2s;
        animation-timing-function: ease-in-out;
        animation-direction: alternate;
        animation-iteration-count: infinite;
      }
      @keyframes blinky2Anim{
        from{ filter: hue-rotate( 0deg ) }
        to{ filter: hue-rotate( -50deg ) }
      }
      #skip{
        pointer-events: auto;
        width: calc( 9% ) !important;
        padding-right: 0.3em;
        border-radius: 0%; 
        /*border-right: 1px dotted black !important;*/
      }
      .fingerTrap{
        z-index: 999;
        width: 100%;
        height: 100%;
      }
      .toolTip{
        pointer-events: none;
        z-index: 200;
        animation-name: toolTipAnim;
        animation-duration: 0.2s;
        animation-timing-function: ease-out;
      }
      .exit{
        animation-name: exitAnim !important;
        animation-fill-mode: forwards !important;
        animation-timing-function: ease-in !important;
        animation-duration: 0.1s !important;
      }
      @keyframes exitAnim{
        from{ transform: translateX(0vw) translateZ(0); }
        to{ transform: translateX(-60vw) translateZ(0); }
      }
      @keyframes toolTipAnim{
        from{ transform: translateX(-50vw) translateZ(0); }
        to{ transform: translateX(0vw) translateZ(0); }
      }
      .skyItem{
        pointer-events: none;
        position: absolute;
        animation-name: skyItemAnim;
        animation-timing-function: ease-in;
        animation-duration: 0.9s;
      }
      .skyItem polygon{
        display: none;
      }
      @keyframes skyItemAnim{

        from{transform: translateZ(0) scale(1,1); opacity: 1;}
        to{transform: translateZ(0) scale(27,27); opacity: 0;}
      }
      .warningSign{
        color:#a4e5ec;
        position: absolute;
        width: 100%;
        height: 100%;
        font-size: 5.0em;
        display: flex;
        text-align: center;
        /*font-family: sans-serif;*/
        opacity: 0.25;
        pointer-events: none;
        animation-name: warningIntroAnim;
        animation-duration: 0.2s;
        line-height: 1.1em;
      }
      .warningSign p {
        animation-name: blinkerAnim;
        animation-duration: 1s;
        animation-iteration-count: 6;
        animation-timing-function: ease-in-out;
        animation-direction: alternate;
        animation-fill-mode: forwards;
        width: 1em;
        padding: 0;
        margin: auto;
      }
      @keyframes emergeAnim{
        from{ opacity:0;  }
        to{ opacity:1; }
      }
      /*transform: rotate(-90deg) scale(2,2) translateX(30%)*/
      @keyframes uppityAnim{
        from{ transform: translateY(0%) translateZ(0); }
        to{ transform:  translateY(-30%) translateZ(0); }
      }
      @keyframes uppity2Anim{
        from{ margin-top: 5%; opacity: 0; }
        to{ margin-top: 0%; opacity: 1; }
      }
      @keyframes blinkerAnim{
        from{ opacity:0; }
        to{ opacity:1; }
      }
      @keyframes warningIntroAnim{
        from{ opacity:0; }
        to{ opacity:0.3; }
      }

.emojiForm{
  pointer-events: auto;
  /*padding-top: 2px;*/
  position: relative;
  /*  top: 50%;
  left: 50%;*/
  stroke: #fff;
  z-index: 10;
  text-align: center;
   outline: none !important;
   /*background-color: rgba(255, 41, 67, 1);*/
}
.mapMode .emoji1::placeholder{
  color:#0041671f !important;
  text-align: center;
  /*font-size:0.4em;*/
/*border: 2px solid red;*/}
.emoji1::placeholder{
  color:#0041671f !important;
  text-align: center;
  /*font-size:0.5em;*/
/*border: 2px solid red;*/}

.emoji1.teamRegister::placeholder{
  color:#0041671f !important;
  /*font-size:0.2em;*/
  /*display: inline-block;*/
  /*transform: translateY(0.5em);*/
  text-align: center;
}

.emojiForm form input{
  border-radius: 0px;
  width: 100%;
  border-width: 0;
  display: inline;
  padding: 0;
  background-color: transparent;
  color: white;
  font-size: 3.5em;
  text-align: center;
  border-color: black;
  /*border-bottom: 1px solid #63140b !important;*/
  /*padding-bottom:  6px;
  margin-bottom: 10px;*/
  outline: none !important;
  /*background-color: #ff5308 !important;*/
}
.emojiForm form input:nth-child(1){

  /*margin-left: 5%;*/
}
.emojiForm form input:nth-child(1), .emojiForm form input:nth-child(2){

  /*margin-right: 2%;*/
}
input[type=text]:focus, textarea:focus {
  /*box-shadow: 0 0 5px rgba(8, 203, 238, 0);
  padding: 3px 0px 3px 0px;
  margin: 5px 0px 12px 0px;
  border: 1px solid rgba(255, 0, 0, 1) !important;*/
}
.iconHolder{
  z-index: 1000;
  position: fixed;
  display: flex;
  flex-direction: row;
  /*width: 40px;*/
  /*height: px;*/
  stroke: #ff9718;
  margin-right: 0px;
  right: 0;
  transition: opacity 0.3s ease-in-out;
  animation-name: slideInAnim;
  animation-duration: 0.15s;
  animation-timing-function: ease-in;
}
.iconHolder div{
  margin: auto;
}
@keyframes slideInAnim{
  from{transform: translateX(100%) translateZ(0)}
  to{transform: translateX(0%) translateZ(0)}
}
.iconProb{
	/*float: right;
	clear: both;*/
  /*fill: #fefffc;
  stroke: #000;*/
  fill: #000000;
  stroke: #ffffe5;
  order: 2;
	width: 40px;
	margin-top: 15px !important;
	margin-bottom: 5px !important;
	/*display: none;*/
	animation-name: popupAnim;
  animation-delay : 0.1s; 
	animation-duration: 0.2s;
	animation-timing-function: cubic-bezier(0.22, 0.01, 0.79, 1.35);
  /*transform: scale(1.2, 1.2);*/
  /*background-color: black;*/
}

/*document.querySelector('.speechBalloonGuts').style.fontFamily = ' "HelveticaNeue-CondensedBold", "PingFangTC-Bold", sans'

 */

.iconBureau #laurel{
  display: none;
}

.iconBureau #actualHead{
  stroke: white;
  stroke-width: 3;
  transform-origin: 50% 50%;
  transform: scale(1.1, 1.1) translateY(5px);
  transition: transform 0.1s ease-in-out;
}

.animHead{
  animation-name: animHeadAnim;
  animation-duration: 0.1s;
  animation-timing-function; easing-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes animHeadAnim{
  from{ transform: scale(1.1, 1.1) translateY(5px) rotate(-8deg) }
  to{ transform: scale(1.1, 1.1) translateY(4px) rotate(4deg) }
}

.iconLoc{
  width: 2.4em;
  margin-right: 10px !important;
  order: 1;
  /*float:right;*/
   fill: #000000;
  stroke: #ffffe5;
  animation-name: popupAnim;
  animation-duration: 0.2s;
  animation-timing-function: cubic-bezier(0.22, 0.01, 0.79, 1.35);
  /*background-color: black;*/
}

.iconBureau{
  order: 3;
  width: 2.8em;
  /*float: right;
  clear: both;*/
  /*margin-top: 8px !important;*/
  margin-bottom: 10px;
  transform-origin: 50%;
  transition: transform 0.1s ease-in-out;
}
.iconHider{
  pointer-events: none;
}
.iconHider div:not(.iconBureau){
   visibility: hidden;
  pointer-events: none;
}
.iconHider .iconBureau{
  pointer-events: auto;
}
.iconBureau .bureauBackground{
  display: block;
}
.iconHuaShan{
  width: 40px;
  order: 0;
  fill: #000000;
  stroke: #ffffe5;
  /*  float: right;
  clear: both;*/
  margin-top: 10px;
  animation-name: popupAnim;
  animation-delay : 0.05s; 
  animation-duration: 0.2s;
  animation-timing-function: cubic-bezier(0.22, 0.01, 0.79, 1.35);
}
.alertingStyle{
  background-color: #18b2db !important;
}
.alertingStyle2{
  background-color: #dc5617 !important;
}
.problemSampler{
  pointer-events: none;
  z-index: 1002;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* display: flex; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.hongBaoEgg{
  z-index: 1000;
  width: 100%;
  height: 100%;
  /* left: 10%; */
  /* top: 20%; */
  /* display: flex; */
  pointer-events: none;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.lonelyChar{
  animation-delay: 0.02s;
  transform-origin: 50% 50%;
  animation-name: birthAnimX;
  animation-duration: 0.1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0, 0, 0.63, 1.36);
}



@keyframes birthAnimX{
  from{transform: translateZ(0) scale( 0.6, 0.6 ); opacity: 0;}
  to{transform: translateZ(0) scale( 1, 1 ); opacity: 1 }
}

.hongBaoEgg svg{
  transform-origin: 50% 50%;
  animation-name: birthAnim;
  animation-duration: 0.1s;
  animation-direction: alternate;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0, 0, 0.63, 1.36);
  width: 15%;
  filter: drop-shadow(0px 0px 20px black);
}

@keyframes fingerAnim{
  from{ transform: translateZ(0) translateY(20%); }
  to{ transform: translateZ(0) translateY(5%); }
}
@keyframes eggRotateAnim{
  from{ transform: rotate(-10deg) translateZ(0); }
  to{ transform: rotate(10deg) translateZ(0) }
}

.iconLoc .loc{display: block;}
.iconProb .prob{display: block;}
.popupDesc{
  font-size: 1.3em;
}
.colorInsignia{
  padding: 2em;
  transition: font-size 0.15s ease-in-out;
  /* font-size: 1.3em; */
  color: black;
}
.popupBackgrounder{
  position:absolute; 
  top: 0px; 
  width: 100%; 
  height: 100%; 
  z-index: -1;
}

@keyframes popupAnim {
  from{transform: scale(0,0);}
  to{transform: scale(1,1);}
}
.altDisplay{
  font-size: 1.5em;
  /*font-family: sans-serif;*/
  position: absolute;
  width: 20%;
  background-color: transparent;
  /*font-size: 2em;*/
  color: white;
  text-shadow: 2px 2px black;
  z-index:10000;
}




H2{
  margin: 0;
  margin-bottom: 1em;
  margin-top: 2em;
  font-size: 2em;
  /*text-align: center;*/
  padding-bottom: 5px; 
  /*font-family: sans-serif;*/
  font-family: "HelveticaNeue-CondensedBold", "PingFangTC-Semibold", sans-serif;
}
.score{
  z-index: 101;
  position:fixed;
  top: 0;
  right: 0;
  margin-right: 15px;
  height: 2em;
  font-size: 1.5em;
  font-weight: bold;
  pointer-events: none;
  color: #fff;
  /*font-family: sans-serif;*/
  filter: drop-shadow(2px 2px black);
  margin-top: 10px;
  margin-left: 10px;
  transition: font-size 0.35s ease-in-out;
}
.scoreRamping{
  font-size: 3em !important;
  animation-name: scoreRampingAnim;
  animation-duration: 0.1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-delay: 0.38s;
  transform-origin: 0 0;
}
@keyframes scoreRampingAnim{
  from{transform: translateZ(0) scale(1,1);}
  to{transform: translateZ(0) scale(0.92,0.92);}
}

.huashanPlanetLogo{
  position: absolute;
  pointer-events: none;
  /*opacity: 0;*/
  transform: scale(0.4, 0.4);
  animation-name: dissapAnim;
  animation-duration: 0.1s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(2);
  animation-fill-mode: forwards;
}

.colita{
  transition :top 0.1s ease-in-out, height 0.1s ease-in-out, left 0.1s ease-in-out, width 0.1s ease-in-out;
  z-index : 1001;
  background-color: black;
  -webkit-clip-path:polygon(0% 100%, 100% 0%, 0% 70%);
  clip-path:polygon(0% 100%, 100% 0%, 0% 70%);
  position: absolute;
  pointer-events: none;
}
.speechBalloon{
  position: absolute;
   font-family: "HelveticaNeue-CondensedBold", "PingFangTC-Semibold", sans-serif;
  font-size: 2.5em;
  /*font-weight: bold;*/
  text-align: center;
  line-height: 1.3;
  transition: top 0.15s ease-in-out;
  color: white;
  z-index: 1002;
  background-color: black;
  pointer-events: none;
}

.speechBalloonGuts{
  position: relative;
  margin: 1.2em 1.3em 1.2em 1.3em;
}

.speechBalloonGuts span:nth-last-of-type(1){
    animation-name: growCharAnim ;
    animation-duration: 0.05s;
    animation-timing-function: ease-in-out;
    display: inline-block;
    transform-origin: 0% 50%;
}
      @keyframes growCharAnim{
        from{ font-size: 0%; }
        to{ font-size: 100%;  }
      }
.speechBalloonBalloon{
  position: absolute;
  /* z-index: -1; */
  width: 100%;
  height: 100%;
  fill: rgba(0,0,0,0.95);
}

.speechBalloonBalloon svg{
  width: 100%;
  height: 100%;
}

.miniBreather{
  transform-origin: 50% 50%;
  animation-name: breatheMini;
  animation-duration: 0.16s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

@keyframes breatheMini{
  from{transform: scale(0.9,0.9);}
  to{transform: scale(1.2,1.2);}
}

@keyframes dissapAnim{
  from{transform: translateZ(0) scale(0.4, 0.4); visibility: hidden;}
  to{transform: translateZ(0) scale(0.4, 0.4); visibility: visible; }
}
.svgIcon{
  /*padding-top: 1em;*/ 
  /*width: 30%;*/
  text-align: center;
  margin: auto;
}
.svgIcon svg{
  width: 90%;
}
.extraBig{
  width: 80% !important;
  margin: auto;
}
.svgIcon circle{
  /*opacity:0;*/
}
.star{
  position: relative;
  width: 1em;
  display: inline-block;
}
.star1 svg polygon{
  fill: #38d313;
}
.star2 svg polygon{
  fill: #14e2f7;
}
.star3 svg polygon{
  fill: #f41454;
}
.omg{
  position: absolute !important;
  font-size: 1.5em;
/*  position: absolute;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 2em;
  text-align: center;*/
  z-index: 20000;
}

.fullWidth{
  width: 100% !important;
}

.findX{
  position: absolute;
  width: 90%;
  transform-origin: 50% 50%;
  z-index: 10000;
  pointer-events: none;
}
sup {
  vertical-align: super;
  font-size: smaller;
}
.drawingUI{
  position:relative;
  float:left;
  margin-right: 10px;
  width: 30px;
  height: 30px;
  background-color: black;
  opacity: 0.4;
}
.pinBtn{
  right: 0px;
  width: 60px;
  text-align: center;
  position: absolute;
  height: 60px;
  background-color: red;
  /*border-radius: 50%;*/
  font-family: sans-serif;
  box-shadow: 3px 3px rgba(0,0,0,0.3);
}
.zoominText{
  width: 60% !important;
  stroke-width: 6;
  animation-name: shakeToStartAnim;
  stroke: #000 !important;
  animation-duration: 0.1s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(2);
  transform-origin: 50%;
  transition: transform 0.3s ease-in-out;
}
.loaderGraphic{
  filter: drop-shadow(4px 4px 4px black);
  position:absolute;
  width: 100%;
  height: 100%;
  z-index: 20001;
  pointer-events: none;
  stroke: white;
  stroke-width: 1.3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loaderGraphic svg{
  transform-origin: 51% 50.5%;
  animation-name: loaderAnim2;
  animation-iteration-count: infinite;
  animation-timing-function: steps(2);
  animation-direction: alternate;
  animation-duration: 0.1s;

}
.loaderGraphic div{
  width: 15vh;
  height: 15vh;
  transform-origin: 51% 51%;
  animation-name: loaderAnim;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 0.1s;
}
@keyframes loaderAnim2{
  from{transform: translateZ(0px) scale( 0.8, 0.8 ) }
  to{transform: translateZ(0px) scale( 1, 1 ) }
}
@keyframes loaderAnim{
  from{ transform: rotate(0deg ) translateZ( 0px ) }
  to{ transform: rotate(-10deg ) translateZ( 0px ) }
}
.flipCameraButton{
  /*z-index: 200030 !important;*/
  /*display: block !important;*/
}
.instructionsCamera{
  font-size: 1.6em;
  /* text-align: center; */
  position: absolute;
  font-family: sans-serif;
  color: rgb(126, 51, 51);
  pointer-events: none;
  bottom: 10px;
  padding: 1em;
  margin-left: 20px;
}
.teamRegistrationForm{
  transition: transform 0.3s;
  position: absolute;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;


  text-align: center;
  color: black;
  /*background-color: rgba(0, 0, 0, 0.69);*/
  position: absolute;
  z-index: 10003;

  overflow-y: hidden;
  overflow-x: visible;
  /*font-family: sans-serif;*/
  animation-delay: 0.99s;
  animation-duration: 0.2s;
  animation-timing-function: ease-in;
}

@keyframes goUp{
  from{transform: translateZ(0px) translateY(0px);}
  to{transform: translateZ(0px) translateY(-100vh);}
}
.teamMetaHolder{
  transition: padding 0.1s ease-in-out;
/*  padding-top: 0.5em;
  padding-bottom: 4%;
  padding-bottom: 0.5em;*/
  width: 100%;
  margin: auto;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.teamMetaHolder h2{
  margin: auto;
  margin-bottom: 1%;
  width: 80%;
}
.globito{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 20002;
  /*background-color: rgba(0,0,0,0.7);*/
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}
.globito div{
  margin-right: 45%;
  margin-top: -10%;
  width: 20%;
  animation-name: shakeToStartAnim;
  animation-duration: 0.1s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(2);
  transform-origin: 100%;

}
.padlock{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 20001;
  background-color: rgba(0,0,0,0.84);
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tongue{
  display: block;
  animation-name: tongueAnim;
  animation-duration: 0.3s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(2);
}
@keyframes tongueAnim{
  from{opacity: 0;}
  to{opacity: 1;}
}
.padlock div{
  width: 40%;
  animation-name: swingPadlockAnim;
  animation-duration: 0.1s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(2);
  transform-origin: 40%;
}
@keyframes swingPadlockAnim{
  from{transform: translateZ(0) rotate(-2.5deg);}
  to{transform: translateZ(0) rotate(2.5deg);}
}
.padlock line{
  stroke-width: 0.3;
}
.problem h2{
  color:white !important;
}
.ttsEnable div{
  opacity:0;
  background-color: red;
  color:white;
  font-size: 0.8em;
  font-family: sans-serif;
  width:100px;
  z-index: 20000;
  left: 50%;
  top:50%;
  padding: 20px;
  text-align: center;
}
.ttsEnable{
  opacity:0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 30001;
  background-color: rgba(0,0,0,0.84);
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logIn{
  margin-top: 15px;
  color: rgb(255, 255, 255);
  font-size: 1.0em;
}
.logIn span{
  font-size: 0.8em;
}
.logIn .selecto{
  background-color: rgb(255, 255, 255);
  opacity: 0.7;
  float: none !important;
  padding: 0 !important;
  font-size: 0.7em;
}
.logon2{
  pointer-events: none;
  position:absolute;
  z-index:30000;
  width: 80%;
  top: 15%;
  transform-origin: 50% 50%;
  animation-name: birthAnim;
  animation-duration: 0.1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
}
.logon{
  position:absolute;
  z-index:30000;
  width: 90%;
  transform-origin: 50% 50%;
  animation-name: birthAnim;
  animation-duration: 0.1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
}
@keyframes holeGrow{
  from{transform: translateZ(0) scale( 1.3, 1.3 ) }
  to{transform: translateZ(0) scale( 1.8, 1.8) }
}   
@keyframes looper{
  from{transform: translateZ(0); background-position: 300px 300px;  }
  to{transform: translateZ(0); background-position: 0 0; }
}

@keyframes looperLong{
  from{transform: translateZ(0); background-position: 0px 800px;  }
  to{transform: translateZ(0); background-position: 0 0; }
}

/*"[{"x":15,"y":0},
{"x":10.606601717798213,"y":10.606601717798211},
{"x":9.18485099360515e-16,"y":15},
{"x":-10.606601717798211,"y":10.606601717798213},
{"x":-15,"y":1.83697019872103e-15},
{"x":-10.606601717798215,"y":-10.606601717798211},
{"x":-2.7554552980815444e-15,"y":-15},
{"x":10.60660171779821,"y":-10.606601717798215}]"
*/
@keyframes looperSquare{
  0%{transform: translateZ(0); background-position: 0px 0px; }
  12.5%{transform: translateZ(0); background-position: -5.6px 10.6px; }
  25%{transform: translateZ(0); background-position: -15px 15px; }
  37.5%{transform: translateZ(0); background-position: -25.6px 10.6px;  }
  50%{transform: translateZ(0); background-position: -30px 0px;  }
  62.5%{transform: translateZ(0); background-position: -25.6px -10.6px;  }
  75%{transform: translateZ(0); background-position: -15px -15px;  }
  87.5%{transform: translateZ(0); background-position: -5.6px -10.6px;  }
}
@keyframes looperSquareX{
  0%{transform: translateZ(0); background-position: 15px 0; }
  12.5%{transform: translateZ(0); background-position: 10.6px 10.6px; }
  25%{transform: translateZ(0); background-position: 0px 15px; }
  37.5%{transform: translateZ(0); background-position: -10.6px 10.6px;  }
  50%{transform: translateZ(0); background-position: -15px 0px;  }
  62.5%{transform: translateZ(0); background-position: -10.6px -10.6px;  }
  75%{transform: translateZ(0); background-position: 0px -15px;  }
  87.5%{transform: translateZ(0); background-position: 10.6px -10.6px;  }
}
@keyframes looperSquare1{
  0%{transform: translateZ(0); background-position: 0 0; }
  25%{transform: translateZ(0); background-position: 10px 0; }
  50%{transform: translateZ(0); background-position: 10px 10px; }
  75%{transform: translateZ(0); background-position: 0px 10px;  }
}
 @keyframes looperSquare2{
  0%{transform: translateZ(0); background-position: 0 0; }
  25%{transform: translateZ(0); background-position: 30px 0; }
  50%{transform: translateZ(0); background-position: 30px 30px; }
  75%{transform: translateZ(0); background-position: 0px 30px;  }
}
@keyframes looperDown{
  from{transform: translateZ(0); background-position: 0 0; }
  to{transform: translateZ(0); background-position: 0px 300px;  }
}
@keyframes birthAnim{
  from{transform: translateZ(0) scale(0.6, 0.6) }
  to{transform: translateZ(0) scale(1, 1) }
}
.charLogo{
  transform-origin: 50% 50%;
  animation-name: shakeToStartAnim2;
  animation-duration: 0.1s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(2);
}

.super{
  animation-name: superAnim;
  animation-duration: 0.1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  transform-origin: 50% !important;
}
@keyframes superAnim{
  from{transform: scale(1 , 1) translateZ(0px);}
  to{transform: scale(1.05, 1.05) translateZ(0px);}
}
.mapboxgl-popup-close-button{
	color: red;
}
button{
  font-family: "HelveticaNeue-CondensedBold", "PingFangTC-Semibold", sans-serif;
}
.radial{
  animation-name: radialAnim;
  animation-duration: 0.1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 50%;
}
@keyframes radialAnim{
  from{transform : rotate( 0deg ) translateZ( 0px )}
  to{transform : rotate( 30deg ) translateZ( 0px )}
}
@keyframes radialAnim2{
  from{transform : rotate( 0deg ) translateZ( 0px )}
  to{transform : rotate( 180deg ) translateZ( 0px )}
}

.teamHolder{
  pointer-events: none;
  width:100%;
  margin: auto;
  position:absolute;
  bottom:-20px;
  z-index: -1;
}
.fakeBground{
	z-index: -2;
	position: fixed;
	width: 100%;
	height: 100%
}
.eggBirth{
	animation-name: eggBirthAnim2;
	animation-duration: 0.1s;
	animation-timing-function: cubic-bezier(0.15, 0.42, 1, 1.54);
	animation-iteration-count: 2;
	animation-fill-mode: both;
	animation-delay: 0.2s;
	transition: opacity 0.2s, filter, 0.2s;
}
@keyframes eggBirthAnim2{
  0%{transform: translateZ(0) translateY(-15); opacity: 0;}
  100%{transform: translateZ(0) translateY(0); opacity:1;}
}
@keyframes eggBirthAnim{
	0%{transform: translateZ(0) scale(0,0)}
	80%{transform: translateZ(0) scale(2.5,2.5)}
	100%{transform: translateZ(0) scale(1,1)}
}
.bureau{
  pointer-events: none;
  position:absolute;
  width: 60%;
  z-index: 10002;
  transition: transform 0.3s;
  animation-name: bureauAnim;
  animation-fill-mode: both;
  animation-duration: 1.3s;
}
.bureau .type, .bureauBackground{


  transition: opacity 0.6s ease-in-out;
}
@keyframes bureauAnim{
  from{transform: scale(0.8,0.8) translateZ(0);opacity: 0;}
  to{transform: scale(1,1) translateZ(0);opacity: 1;}
}


.bureau svg{
  transform-origin: 50%;
  transition: transform 0.2s ease-out;
  filter: drop-shadow(0px 0px 8px black);
}
.type polygon, .type polyline, .type line{
  stroke: #ffffff !important;
}
.dumplingHighlight{
  animation-name: highlightAnim;
  animation-duration: 0.1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  transform-origin: 50% !important;
}

@keyframes highlightAnim{
  from{fill: #f4e900;}
  to{fill: #fff}
}
.teamHolder svg{
  width: 60%;
}
.shakeToStart{
  pointer-events : none;
  stroke: #3CB3BC;
  stroke-width: 2;
  position: absolute;
  top: 80%;
  width: 50%;
  animation-duration: 0.1s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(2);
  transform-origin: 50%;
}
@keyframes shakeToStartAnim2{
  from{transform: translateZ(0) translateX(-4px) translateY(4px) rotate(-0.6deg);}
  to{transform: translateZ(0) translateX(4px) translateY(-4px) rotate(0.6deg);}
}
@keyframes shakeToStartAnim{
  from{transform: translateZ(0) translateX(-4px) translateY(2px) rotate(-0.5deg);}
  to{transform: translateZ(0) translateX(4px) translateY(-2px) rotate(0.5deg);}
}