:root{
        --tickerWidth : 0;
        --onBoardingFormBackground : rgb(238 200 194);/*rgb(253, 219, 214);*/
        --altOnBoardingFormBackground : rgba(255, 41, 67, 1);
        --globalBackgroundColor : #fff3e7;
        /*#a5c9c3*/
        --globalBlueGreen : #00818d;
        --globalBlue : #2079a1;
        --globalOrange : #e48025;
        --globalFontSize : 2.5rem;
        --globalHeight : 100vh;
        --globalDarkBlue : #154c60;
        --globalNature : #fdd000;
        --globalCulture : #ee869a;
        --globalSocial : #a5c9c3;
        --globalDevelopment : #f08300;
        --globalEthnic : #05b9df;
        --globalLearning : #f5b1a2;
        --globalNewBlue : #00818d;
        --textBright : #cee7f3;
      }



      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;*/
        margin: 0;
        padding: 0;

        font-family:'Noto Sans TC', Arial,sans-serif;
        font-size: 16px;
         color: var( --globalDarkBlue );
        background : var(--globalBackgroundColor);
        text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
        /*height: 100%;*/
      }

      .startQuiz{
        font-weight: 700;
        color: black;
        writing-mode: vertical-rl;
        color: var( --globalDarkBlue) !important;
      }

      .startQuiz::after{
        width: 4rem;
        height: 4rem;
        /*border: 10px solid black;*/
        content: "";
        position: absolute;
        display: inline-block;
        transform: translateX( -8.5rem ) translateY(-5rem);
        opacity: 0.4;
        background-image :url('/quiz/graphics/arrow.svg');
        background-repeat: no-repeat;
        background-size: contain;
        /*animation-name: sidewaysAnim;*/
        animation-duration: 0.3s;
        animation-timing-function: ease-in;
        animation-direction: alternate;
            animation-iteration-count: infinite;
      }

      @keyframes sidewaysAnim{
        from{ opacity: 0; }
        to{ opacity : 0.6; }
      }



      .cta{
        /*width: 70%;*/
        color: var(--globalDarkBlue);
        /*text-align: center;*/
        writing-mode: vertical-rl;
        font-size: 2rem;
        /*color:  black;*/
        /*margin-right: 0rem;*/
            margin-left: 2rem;
      }

      .cta br{
        display:  none;
      }

      .logo{
        /*transform: translateY(50%);*/
        /*position: absolute;*/
        width: 100%;
        top: 0;
        padding: 2rem;
        padding-top: 2rem;
        /*max-height: 50vh;*/
        /*margin-top: 2rem;*/
        /*background: var(--globalBlueGreen);*/
        font-weight: 700;
        /*text-align: center;*/
        font-size: 2rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
      }
      .strippy{
        pointer-events: none;
        position: fixed;
        overflow: hidden;
        opacity: 0.7;
      }
      .introLogo{
        width: 100%;
        filter: brightness(5);
      }

      .logo div{

      }

      .logoTitleBox{
        display: flex;
        flex-direction: row-reverse;
        width: 25%;
      }


      .puzzleBground svg{
        width: 120%;
        transform: scale(2.5);
        transform: scale(2.5) rotate(45deg) translate(10vw,-10vh);
            transform: scale(2.5) rotate(225deg) translate(-10vw,5vh);
                transform: scale(2.0) rotate(45deg) translate(10vw,-15vh);
                height: 60%;
                transform: scale(2.2) rotate(45deg) translate(5vw,-16vh);

        /*height: 140%;*/
      }

      .puzzleBground{
        opacity:  0.9;
        width: 100%;
        height: 100%;
        /*-webkit-clip-path: polygon(25% 0, 100% 0%, 100% 100%, 35% 100%);
        clip-path: polygon(35% 0, 100% 0%, 100% 100%, 43% 100%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 52%, 0% 45%);
        clip-path: polygon(0% 0, 100% 0%, 100% 52%, 0% 45%);*/
      }

      .quizDesc{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        /*writing-mode: vertical-rl;*/
        /*color: var(--globalBlueGreen);*/
        /*margin-top: 3rem;*/
        /*background: var(--globalDarkBlue);*/
        background: #e48025;
        width: 100%;
        padding: 0 2rem 0.25rem;
        text-align: right;
      }

      .wrapper {
          max-width: 750px;
          margin: 0 auto;
          line-height: 1.5;
      }

      .wrapper section{
        display:  none;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        z-index: 1;
      }

      .resultsTitle, .quizTitle{
        font-size: 10rem;
        font-weight: 700;
        text-align: center;
        color: white;
        background: #e48025;
        position: sticky;
        top: 0;
        z-index: 9;
        
      }
      .quizTitle, .resultsTitle{

        position:  fixed;
        width: 100%;
      }

      .transitioner{
        transition:  0.2s all ease-in-out 0.2s;
      }
      .contentBox{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      .quiz .contentBox{
        /*overflow: hidden;*/
      }

       .intro .contentBox{
          /*padding: 1em;*/
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          overflow: hidden;
          /*justify-content: center;*/
       }

       .balloonBox{
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0px;
          /*overflow: hidden;*/
          pointer-events: none;
          z-index: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: flex-end;
       }

       .balloon{
        position: absolute;
           /*top: 0; */
          /*max-width: 12rem;*/
       }


       .balloon div svg{
            transform: translate(-50%, 50%);
            animation-name: popUpBalloonAnim;
            animation-fill-mode: both;
            animation-duration: 0.2s;
            animation-timing-function: ease-in-out;
       }

        @keyframes popUpBalloonAnim{
          0%{
            opacity: 0;
          }
          0.01% {
              opacity: 0.6;
              transform: translate(-50%, 50%) scale( 1.5, 1.5 ) translateZ(0);
          }
          100% {
              opacity: 1;
              transform: translate(-50%, 50%) scale( 1, 1 ) translateZ(0);
          }
        }


       .balloonBground{
          position: absolute;
          z-index: -1;
          width: 100%;
          padding: 2rem;
          top: 0;
          animation-name: popUpAnim2;
          animation-duration: 0.2s;
          animation-timing-function: cubic-bezier(0.17, 0.18, 0.83, 1.48);
          animation-delay: 0.3s;
          animation-fill-mode: both;
       }
      section{
        font-size: var(--globalFontSize);
        position: absolute;
        transition: 0.2s transform ease-in-out 0s;
      }

      section.ready{
        /*transform : none !important;*/
        position:  fixed;
      }
      section.intro{
        display: block;
        /*background-color: var( --globalNewBlue);*/
        color:  white;
        overflow:  hidden;
      }

      .macheteTransform{
        transform:  none !important;
      }

      section.result{
        /*background-color: #fff;*/
        /*background: var(--globalDarkBlue);*/
      }

      section.quiz, section.result{
        animation-name : quizEntranceAnim;
        animation-duration: 0.3s;
        animation-timing-function: ease-in-out;
        /*animation-fill-mode: both;*/
      }

      @keyframes quizEntranceAnim{
        from{ transform: translateX(100%) translateZ(0) scale( 1, 1 ) }
        to{ transform: translateX(0%) translateZ(0) scale( 1, 1 ) }
      }

      section.result{

      }

      .quizBody{
        padding: 1rem;
       /* overflow: auto;
        height: 80%;*/
      }
      .quizOrgan{
        font-size: var(--globalFontSize);
      }

      .quizOption{
        position: relative;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        opacity: 1;
      }


      .randomIcon{}
      .quizOptionBox::before{
        width: 2rem;
        height: 2rem;
        border: 2px solid black;
        border-radius: 50%;
        background-color: rgb(87 172 184);
        content: "";
        position: absolute;
        display: inline-block;
        transform: translateX( -4rem ) translateY( 1rem);
        transform-origin: -50% 50%;
        /*background-image :url('/quiz/graphics/puzzle_1.svg');*/
        background-repeat: no-repeat;
        background-size: contain;
        /*opacity:  0.5;*/
        transition: 0.1s all ease-in;
      }

      .optionSelected .quizOptionBox::before{
        background-color: rgba(255,255,255,0.7);
        transform: translateX( -5rem ) translateY( 1rem) scale(1.5);
        border-color: white;
        /*outline: 1px solid var(--globalDarkBlue);*/
      }

      .optionSelected .quizOptionBox::after{
        width: 1rem;
        height: 1rem;
        border: 4px solid white;
        border-radius: 50%;
        background-color: transparent;
        content: "";
        position: absolute;
        z-index: 2;
        display: inline-block;
        transform: translateX( -3.5rem ) translateY( -5.25rem );
        transform-origin: -50% 50%;
      }

      .quizOptionBox{
        margin-left: 5rem;
      }

      .quizOption:last-child{
          margin-bottom: 3em;
      }

      .line1, .topic{
          font-size : var(--globalFontSize);
          border-bottom: 1px dashed var(--globalBlueGreen);
          display: inline-block;
      }

      .line2, .college{
            font-size: 1.8rem;
            font-size: calc(var(--globalFontSize) * 0.75);
      }

      .quizHeader{
        /*height: 20%;
        max-height: 300px;*/
        width: 100%;
        padding:  2rem;
        /*background-color : var(--globalOrange);*/
        background : var(--globalDarkBlue);
        color:  white;
        /*position: fixed;*/
        /*top: 0;*/
        z-index:  3;
        padding-top: 3rem;
      }

      .quizFooter{

          display: flex;
          align-items: center;
          flex-direction: row;
          /*min-height: 6rem;*/
          z-index: 10;
          width: 100%;
          background : var(--globalDarkBlue);
          color: var(--globalBlue);
          font-size: 2rem;
          /*color: white;*/
          /*border-bottom : 6px solid var( --globalDarkBlue);*/
      }
      .quizFooter li{
        display: inline-block;
      }

      .quizFooter ul {
        display: inline-flex;
        flex-direction: row;
        position: relative;
        justify-content: space-evenly;
        width: 80%;
        max-width: 600px;
        display:  none;
        /*background : var(--globalBackgroundColor);*/
      }
      .countdown{
        font-size: 3.5rem;
        font-weight: 700;
      }
      .showCountdownCombo{
        font-size: 2rem;
        writing-mode: vertical-lr;
        background: white;
        padding: 1.5rem 0rem;
        border-radius: 4rem;
        color: var(--globalDarkBlue);
        letter-spacing: 0.25rem;
      }
      .optionSelected{
            background-color: #1c99992b;
            /*color: white;*/
            opacity:  1;
      }

      li.chosen{
        color: var(--globalBackgroundColor);
      }
      .showResults, .showReset, .printB, .startQuiz, .showCountdownCombo{
        display : none;
        animation-name: popUpAnim2;
        animation-duration: 0.2s;
        animation-timing-function: cubic-bezier(0.17, 0.18, 0.83, 1.48);
        animation-delay: 0.3s;
        animation-fill-mode: both;
        /*background-color:  coral;*/
      }

      .showResults{
        animation-delay: 0.4s;
      }


      .showResults::after{
        width: 10rem;
        height: 10rem;
        /* border: 10px solid black; */
        border-radius: 50%;
        border: 0.5px solid var(--globalOrange);
        content: "";
        position: absolute;
        display: inline-block;
        z-index: 2;
        top: 0;
        left: 0;
        transform: translateY( -1.5rem) translateX(-2rem);
        transition: 0.3s transform ease-in-out;
        animation-name: expandRingAnim;
        animation-iteration-count: 3;
        animation-timing-function: ease-in-out;
        animation-duration: 1s;
        animation-fill-mode: both;
        pointer-events: none;
        animation-delay: 0.4s;
      }

      @keyframes expandRingAnim{ 
        from{ 
          opacity: 0.7;
          transform:  translateY( -1.5rem) translateX(-2rem) translateZ(0) scale(1);
        }
        to{
          opacity: 0;
          transform: translateY( -1.5rem) translateX(-2rem) translateZ(0) scale(5);
        }
      }

      .showResultsBox{
        font-size: 3rem;
        position: absolute;
        z-index: 10;
      }

      .showReset, .printB, .showResults, .startQuiz{

          /*animation-fill-mode:  none !important;*/
          display: block;
          color: white;
          line-height: 1.2;
      }

      .showResetBox, .printBBox, .showResultsBox, .startQuizBox, .showCountdownBox{
          display: block;
          position: fixed;
          top: 0;
          z-index: 20;
      }
      .startQuizBox{
        position: fixed;
        top: 0;
        left: 0;
        font-size: 5rem;
      }

      .startQuiz::before, .showResults::before, .showReset::before, .printB::before{
        width: 10rem;
        height: 10rem;
        /* border: 10px solid black; */
        border-radius: 50%;
        background-color: var( --globalDarkBlue);
        content: "";
        position: absolute;
        display: inline-block;
        z-index: -1;
        transform: translateY( -2.5rem) translateX(-1.5rem);
        transition: 0.3s transform ease-in-out, 0.3s background-color ease-in-out;
      }
      .showResults::before{
          transform: translateY( -1.5rem) translateX(-2rem);
      }

      .showResults:hover::before, .showReset:hover::before, .printB:hover::before{
        background-color: var(--globalOrange);
      }
      .startQuiz::before{
        opacity: 0;

      }
      .printB::before{
            transform: translateY( -3.5rem) translateX(-2.5rem) !important ;
      }

      .showReset::before{
        transform: translateY( -2rem) translateX(-2rem) !important;
      }

      .resultText{
        font-size : 3rem;
      }


      .schedule{
        /*    color: white;
        text-align: center;*/
        padding: 2rem 3rem;
        margin-bottom: 0rem !important;
      }

      .schoolRec{
        color:  var( --globalDarkBlue);
      }

      .quizOption.optionSelected .quizOptionBox::before{
        opacity:  1;
      }

      .quizOption[ data-counter-category = "公民素養" ] .quizOptionBox::before{
        /*border-left : 1rem solid magenta;*/
        background-color: var(--globalSocial);
      }
      .quizOption[ data-counter-category = "文化保存" ] .quizOptionBox::before{
        /*border-left : 1rem solid yellow;*/
        background-color: var(--globalCulture);
      }
      .quizOption[ data-counter-category = "地方發展" ] .quizOptionBox::before{
        /*border-left : 1rem solid blue;*/
        background-color: var(--globalDevelopment );
      }
      .quizOption[ data-counter-category = "社區學習" ] .quizOptionBox::before{
        background-color: var(--globalLearning );
       /*border-left : 1rem solid orange;*/
      }
      .quizOption[ data-counter-category = "族群人口" ] .quizOptionBox::before{
        background-color: var(--globalEthnic );
        /*border-left : 1rem solid aquamarine;*/
      }
      .quizOption[ data-counter-category = "環境自然" ] .quizOptionBox::before{
        background-color: var(--globalNature );
        /*border-left : 1rem solid green;*/
      }

      .result .contentBox{
        /*font-size : 2.5rem;*/
        /*overflow: auto;*/
      }


      .actualResults{
        margin-top: 6rem;
      
      }

      .actuallyShow{
        /*border-left: 4px solid;
        border-right: 4px solid;*/
      }

      .actualResults.actuallyShow .resultItem{
        display: block;
      }
      .youAre{
        animation-name:  fadeInAnim;
        animation-timing-function: ease-in-out;
        animation-duration: 0.2s;
        animation-delay:  0s;
        animation-fill-mode: both;
        animation-iteration-count: 1;
        font-size: 1.8rem;
        transform: translateX(-2rem);
      }
      .youAre span{
        display : inline-block;
      }
      @keyframes backAndForthAnim{
        from{ transform: rotate( -6deg ) translateZ(0); }
        to{ transform: rotate( 6deg ) translateZ(0); }
      }
      .enterQuiz{
        opacity:  0;

      }

      .noBG{
        transition:  0.2s all ease-in;
        transform:  translateY(2rem) translateX(-2rem);
        color:  white;
      }

      .youAre.noBG::before{
        background: none;
      }

      .youAre::before{
        width: 5rem;
        height: 5rem;
        /* border: 10px solid black; */
        border-radius: 50%;
        background-color: var( --globalBackgroundColor);
        content: "";
        position: absolute;
        display: inline-block;
        z-index: -1;
        transform: translateY( -1rem) translateX(-0.75rem);
      }

      .startQuiz::before{
        position: absolute;
        top: 0;
        left: 0;
        transform: translateX(-35%) translateY(-25%);
        /*transform: translateX(2.5rem) translateY(-2rem);*/
        /*width: 10rem;
        height: 10rem;

        border-radius: 50%;
        background-color: var( --globalDarkBlue);
        content: "";
        position: absolute;
        display: inline-block;
        z-index: -1;
        transform: translateY( -2.5rem) translateX(-2rem);*/
      }
      .startQuiz::after{
        transform: translateX( -7.5rem ) translateY(-4rem);
        transform: translateX( -7.5rem ) translateY(-7rem) scale(1.2);
      }
      .startQuiz.expand{
        color :  var( --globalDarkBlue);
      }
      .startQuiz.expand::after{
        background-image : none;
      }
      .startQuiz.expand::before{
        transform: translateX(-35%) translateY(-25%) scale( 40);
        opacity:  1;
      }

      .showResults.expand::before{
        transform: translateX(-35%) translateY(-25%) scale( 40);
        opacity:  1;
      }

      .showReset.expand::before{
        transform: translateX(-35%) translateY(-25%) scale( 40 ) !important;
        opacity:  1;
      }

      .description{
        padding: 1rem 1rem 2rem;
        margin: 2rem;
        background-color: rgba(255,255,255,0.1);
        border: 4px dotted rgba(255,255,255,1);
      }

      .description p, .schoolRec, .extraRec{
        font-weight:  700;
        padding-bottom: 2rem;
      }

      .recommendationsWrapper{
        /*text-align:  center;*/
        padding-top: 1rem;
      }

      .extraInfo{
        padding: 0rem 3rem 2rem;
        /*margin-top: 6rem;*/
      }

      .collegeChoice::before{
        width: 2rem;
        height: 2rem;
        /* border: 10px solid black; */
        border-radius: 50%;
        background-color: rgb(87 172 184);
        content: "";
        position: absolute;
        display: inline-block;
        transform: translateX( -2.5rem ) translateY(2rem);
        /* background-image: url(/quiz/graphics/puzzle_1.svg); */
        background-repeat: no-repeat;
        background-size: contain;
      }


      .charFX{
         animation-iteration-count : 1;
         animation-duration : 0.2s;
         animation-name : popUpAnim;
      }
      @keyframes popUpAnim{
        from{ transform: scale( 1.5, 1.5 ) translateZ(0) }
        to{ transform: scale( 1, 1 ) translateZ(0) }
      }

      @keyframes popUpAnim2{
        from{ transform: scale( 0, 0 ) translateZ(0) }
        to{ transform: scale( 1, 1 ) translateZ(0) }
      }

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

       @keyframes fadeInAnim{
        from{opacity: 0}
        to{opacity: 1}
      }

      .resultItem{
       display: none;
       }
       .collegeChoice{
            transform: translateX(2rem);
       }
      .resultItem, .resultItem li{
        margin-bottom: 2.5rem;
      }
      .resultItem li:first-child{
        /*margin-top: 2.5rem;*/
      }
      .keywords{
        margin: 12rem 0rem 0rem 0rem;
        color:  var(--globalDarkBlue);
        background-color: white;
        animation-name: fadeInAnim;
        animation-duration: 0.2s;
        animation-timing-function: ease-in-out;
        animation-fill-mode : both;
        animation-delay:  0.0s;
        padding: 1rem 0;
      }
      .keywords, .title{
        display : none;
      }
      .asterisk{
        display: inline-block;
        animation-name:  shakeAnim;
        animation-iteration-count:  infinite;
        animation-duration:  0.1s;
      }
      .title{
        margin-top: 3rem;
        font-size: 5rem;
        font-weight: 700;
        color: white;
        text-shadow: 3px 3px black;
        letter-spacing: 0.6rem;
        margin: 3rem 4rem 0 4rem;

      }

      .title.reveal{
        /*background-image :url('/quiz/graphics/balloonSolo.svg');*/
        background-image:  url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMC42OCAyNC4wNCI+PHBhdGggZD0iTTE2Ljg5LDQuNjJBMTAuODEsMTAuODEsMCwwLDAsMi4zNCw2LDkuMjksOS4yOSwwLDAsMCwzLjc5LDE5LjYyYTEwLjY4LDEwLjY4LDAsMCwwLDYsMi4xN0wxMC42MiwyNGwxLjUyLTIuMzhhMTAuNDUsMTAuNDUsMCwwLDAsNi4xOS0zLjRBOS4yOSw5LjI5LDAsMCwwLDE2Ljg5LDQuNjJaIiBmaWxsPSIjZmRkMDAwIi8+PC9zdmc+");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
        padding: 10rem;
        margin-top: 0rem;
      }

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


      .nature{
        background-color: var(--globalNature);
        fill: var(--globalNature);
      }

      .culture{
        background-color: var(--globalCulture);
        fill: var(--globalCulture);
      }

      .social{
        background-color: var(--globalSocial);
        fill:var(--globalSocial);
      }

      .development{
        background-color: var(--globalDevelopment);
        fill: var(--globalDevelopment);
      }

      .ethnic{
        background-color: var(--globalEthnic);
        fill: var(--globalEthnic);
      }

      .learning{
        background-color: var(--globalLearning);
        fill: var(--globalLearning);
      }

      .natureBorder{
        border-color: var(--globalNature);
      }

      .cultureBorder{
        border-color: var(--globalCulture);
        border-color: var(--globalCulture);
      }

      .socialBorder{
        border-color: var(--globalSocial);
      }

      .developmentBorder{
        border-color: var(--globalDevelopment);
      }

      .ethnicBorder{
        border-color: var(--globalEthnic);
      }

      .learningBorder{
        border-color: var(--globalLearning);
      }

      .profile{
        text-align: center;
        /*margin-top: 3rem;*/
        position: relative;
        animation-name: fadeInAnim;
        animation-timing-function: ease-in-out;
        animation-duration: 0.3s;
        animation-delay: 0.2s;
        animation-fill-mode: both;
        color: var(--globalDarkBlue);
        margin-bottom: 3rem;
      }

      .macheteTimer{
        animation-name: macheteTimerAnim;
        animation-duration:  0.8s;
        animation-delay: 0s;
      }

      @keyframes macheteTimerAnim{
        from{ opacity: 0.98 }
        to{ opacity: 1 }
      }

    @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 );   }
     }


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



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

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



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


      @keyframes colorAnim{
        0%{ background-color: #e53e00 }
        100%{ background-color: #f6691d }
      }

      .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 */
      }

      @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) }
      }

      @keyframes blinkyXSpot{
        from{fill: #000;}
        to{fill: #f00;}
      }


      .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;
        }
      }


      .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)  }
      }


      @keyframes breatherAnim{
        from{ font-size: 0.95em; }
        to{font-size: 1.05em;}
      }

      

      @keyframes breatherAnim3{
        from{ font-size: 0.98em; }
        to{font-size: 1.02em;}
      }

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




      @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;}
      }



      @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);*/ }
      }


      @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);}
        
      }

      @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);}
      }

      @keyframes rotateyAnim{
        from{transform: translateZ(0px) rotate(10deg);}
        to{transform: translateZ(0px) rotate(-10deg);}
      }



@keyframes slideInAnim{
  from{transform: translateX(100%) translateZ(0)}
  to{transform: translateX(0%) translateZ(0)}
}




@keyframes goUp{
  from{transform: translateZ(0px) translateY(0px);}
  to{transform: translateZ(0px) translateY(-100vh);}
}
ransform-origin: 40%;
}
@keyframes swingPadlockAnim{
  from{transform: translateZ(0) rotate(-2.5deg);}
  to{transform: translateZ(0) rotate(2.5deg);}
}


.loader{
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  z-index: 2;
  position: fixed;
  filter: brightness(6);
}

.loader svg{
  width: 10%;
}



.landscapeLogo{
  display:  none;
}
      @media screen and (min-width:769px) {
        .wrapper {
            max-width: none;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        html{
          font-size: 12px;
        }
        html, body{
          /*background-color: var(--globalDarkBlue );
          color: var(--textBright);*/
        }

        section{
          max-width: 80vw;
        }

        section.intro{
          max-width: 100vw;
          background: var(--globalBackgroundColor);
        }

        .contentBox{
          /*padding: 0 4rem;*/
        }

        .puzzleBground{
          opacity: 1;
        }

        .strippy{
          opacity : 0.85;
        }

        .landscapeLogo{
          display: block;
        }


        .keywords{
          font-size: 4rem;
          margin-left: 2rem;
          margin-right: 2rem;
        }
        .logoTitleBox {
          /*flex-direction: column;*/
          width: 35%;
        }
        .introLogo:not(.landscapeLogo) {
          display:  none;
          width: 100%;
        }
        .introLogo{
          /*filter: none;*/
        }
        .startQuiz{ 
          writing-mode: horizontal-tb; 
          cursor: pointer;
          color:  white !important;
        }
        .startQuiz::after{
          /*transform: translateX( -11rem ) translateY(1rem);*/
          transform: translateX( -15rem ) translateY(1.5rem);
          opacity: 1;
          filter: brightness(0.7);
        }
        .showResults::before{
          /*transform: translateY( -3rem) translateX(-3rem);*/
          transform: translateY( -3rem) translateX(-3.5rem);
          width: 13rem;
          height: 13rem;
        }
        .showReset::before{
          transform: translateY( -3rem) translateX(-3.5rem) !important;
          width: 13rem;
          height: 13rem;
        }

        .quizDesc{
            background: none;
            /*writing-mode: horizontal-tb;*/
            /*color:  #a64f4f;*/
            margin-top: 1rem;
            max-width: 80vw;
        }
        .quizTitle, .resultsTitle{
          /*max-width: 80vw;*/
          left:  0;
        }
        .resultsTitle{
          position: fixed;
          width: 100%;
        }
        .quizHeader{
          max-width: 100vw;
          padding-left: 10vw;
          padding-right: 10vw;
          left: 0;
        }
        .quizOption:not(.optionSelected):hover{
          background-color: #ffffff66;
        }
        .showCountdownCombo{
          cursor: default;
        }
        .logoTitleBox{
              /*flex-direction: column-reverse;*/
        }
        .logo{
          flex-direction: column;
          justify-content: flex-start;
          align-items: flex-end;
          font-weight: normal;
          padding-top: 2rem;
        }

        .intro .contentBox {
          flex-direction: column;
          padding-right: 5rem;
        }

        .cta {
          writing-mode: horizontal-tb;
          /*margin-right: 3rem;*/
        }
        .quizOption, .showResults, .showReset, .printB{
          cursor: pointer;
        }

        .showResults, .showReset{
          transform: translateX(-6rem);
        }

        .balloonBox{
          /*flex-direction: row;*/
        }

        .puzzleBground{
          /*-webkit-clip-path: polygon(25% 0, 100% 0%, 100% 100%, 35% 100%);
          clip-path: polygon(35% 0, 100% 0%, 100% 100%, 43% 100%);*/
          -webkit-clip-path: none;
          clip-path: none;
          /*-webkit-clip-path: polygon(35% 0, 100% 0%, 100% 100%, 43% 100%);
          clip-path: polygon(35% 0, 100% 0%, 100% 100%, 43% 100%);*/

        }
        .puzzleBground svg {
            /*transform: scale(1.0);*/
            transform: scale(1) rotate(47deg) translate(-30vw, -112vh);
            height: auto;
            width: 150%;
        }
        .actualResults{
          margin-top:  9rem;
        }
        .startQuiz::before, .showResults::before, .showReset::before, .printB::before{

          /*background-color:  black;*/

        }
        .description{
          /*border: none;
          background-color: rgb(0 0 0 / 17%);*/
        }
        .showResults::after{
        animation-duration: 1.0s;
        }

      }