Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="page-flowchartnational">
    <div id="flowchartnational"></div>
</div>
              
            
!

CSS

              
                $ASSETS_DIR: 'https://www.estelzhao.com/app/codepen/img';

body{
  margin:0;
}

.flowchart_outer{
/*	position: absolute;
    left:50%;
    -webkit-transform: translate(-50%, 0);
   -moz-transform: translate(-50%, 0);
   -ms-transform: translate(-50%, 0);
   -o-transform: translate(-50%, 0);
   transform: translate(-50%, 0); */
   position:relative;
   width:100%;
   overflow:hidden;
   height: 571px; /* half of the container */
}

.flowchart_container{
  position: relative;
    left: 50%;
    top: 50%;
/*    transform: matrix(0.15, 0, 0, 0.15, 0, 0) !important;*/ /* means its top hits the center */
}

.flowchart_container .flowchart_button,
.flowchart_container .flowchart_image,
.flowchart_container .deco,
.flowchart_container svg{
  position:absolute;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.flowchart_button.start,
.flowchart_button.back,
.flowchart_button.restart {
  position:absolute !important;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  line-height: 200%;
  text-align: center;
  font-family:'Helvetica Neue LT W01_65 Md',"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  z-index:50;
}

.flowchart_button.back img,
.flowchart_button.restart img{
  display:block;
  margin:0 auto;
}

.flowchart_button.start{
    width: 230px;
    height: 60px;
    line-height: 60px;
    opacity:1;
    visibility: visible;
    font-size: 14px;
    letter-spacing: 1.5px;
}
.flowchart_button.back{
    left: 4%;
    top: 8%;
}
.flowchart_button.restart{
    left:94%;
    top:8%;
}



.flowchart_image{
    opacity:0;
    visibility: hidden;
    color:#fff;
}
.flowchart_button:not(.buttonhover) img{
   -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease;
}

.flowchart_image:not(.result) .copy{
    width: 100%;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   -o-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}


.flowchart_outer .center{
    width:10px;
    height:10px;
    position:absolute;
    left:50%;
    margin-left: -5px;
    top:50%;
    margin-right:-5px;
    border-radius: 50%;
    border:1px solid red;
    display:none;
}

.flowchart_container svg{
    fill:none;
}

.flowchart_container circle{
    opacity:0;
    visibility: hidden;
}
.flowchart_container polygon{
    opacity:0;
    visibility: hidden;
}


.flowchart_container .deco{
    opacity:0;
    visibility: hidden;
}


.flowchart_button:not(.buttonhover):hover img{
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.flowchart_button.restart:hover img,
.flowchart_button.back:hover img{
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.flowchart_button .copy{
    width: 100%;
    color: #2121d4;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    top: 50%;
    left: 50%;
    color: #035689;
    -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   -o-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   line-height: 130%;
   z-index: 201;
}


.flowchart_button{
    cursor: pointer;
    opacity:0;
    visibility: hidden;
/*    background-color: #e11a2b;*/
    color:#fff;
    z-index: 100;
}

.page-flowchartnational .flowchart_outer{
    background-color: #f0f6f7;
}

.page-flowchartnational .flowchart_button.start{
    position:absolute !important;
    background-color: #e11a2b;
    color:#fff;
    top: 18.9%;
    left: 50%;
    opacity:0;
    visibility: hidden;
}

.page-flowchartnational .flowchart_button.back, 
.page-flowchartnational .flowchart_button.restart{
    color: #e01a2c;
}
.page-flowchartnational .flowchart_container{
    background-color: #f0f6f7;
/*    transform: matrix(0.1, 0, 0, 0.1, 0, 0) !important;*/ /* means its top hits the center */
/*    transform: matrix(1, 0, 0, 1, -3060, 1900) !important;*/
/*    transform: matrix(0.4, 0, 0, 0.4, 1500, -1200) !important;*/
}


.page-flowchartnational .flowchart_container svg{
    stroke-width:2;
}


.page-flowchartnational .deco.sponsor a{
    text-decoration: underline;
    color:#e11a2b;
}

.flowchart_image .copy,
.flowchart_image.result .subtitle,
.flowchart_image.result .title,
.flowchart_image.result .copy,
.flowchart_image.result .share{
    color: #1c75bc;
    font-family: 'Brandon Grot W01 Black', avenir, 'avenir next', helvetica, arial, sans-serif;
   font-size: 36px;
   line-height: 110%;
    width: 100%;
    position: absolute;    
    text-align: center;
    vertical-align: middle;
    left: 50%;    
    -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%); 
   -ms-transform: translate(-50%, -50%); 
   -o-transform: translate(-50%, -50%); 
   transform: translate(-50%, -50%); 
}
.page-flowchartnational .flowchart_image.result .copy{
    font-family:'HelveticaNeueW01-55Roma',"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    letter-spacing: -0.5px;
    line-height: 300%;
}

.page-flowchartnational .flowchart_button .copy{   
    width:120%; 
    font-size: 20px;
    font-family:'Brandon Grot W01 Bold',avenir, 'avenir next', helvetica, arial, sans-serif;
}
.flowchart_button:not(.buttonhover):hover .copy{
    font-size:21px;
}

.page-flowchartnational .flowchart_button .copy .sep{
    width:25px;
    height:2px;
    background-color: #035689;
    margin: 20px auto 0;
}

.page-flowchartnational .deco.sponsor,
.page-flowchartnational .flowchart_container .flowchart_image.image0 .sponsor{
    font-size: 18px;
    font-family:'Brandon Grot W01 Bold',avenir, 'avenir next', helvetica, arial, sans-serif;
    color:#035689;
}

.page-flowchartnational .flowchart_image.result .title{
    letter-spacing: 1.5px;
}

.page-flowchartnational .flowchart_image.result .subtitle{
    font-size: 26px;
    letter-spacing: 1.5px;
}


.page-flowchartnational .flowchart_image.result .subtitle,
.page-flowchartnational .flowchart_image.result .title,
.page-flowchartnational .flowchart_image.result .copy,
.page-flowchartnational .flowchart_image.result .share{
    opacity:0;
    visibility: hidden;
}


.page-flowchartnational .flowchart_image.result .share{
    width: 350px;
    height:35px;
    font-family:'HelveticaNeueW01-75Bold',"Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #e11a2b;
    font-size:14px;
    left: 50%;
    display:table;
}
.page-flowchartnational .flowchart_image.result .share img{
    position:absolute;
    z-index: -10;
    top:0;
}
.page-flowchartnational .flowchart_image.result .share span{
    display:table-cell;
    text-align: center;
    vertical-align: middle;
    width:60%;
}
.page-flowchartnational .flowchart_image.result .share .sep{
    width:1px;
    height:100%;
    background-color: #efefef;
    display: inline-block;
}
.page-flowchartnational .flowchart_image.result .share .share_facebook,
.page-flowchartnational .flowchart_image.result .share .share_twitter{
/*    border-left:1px solid #efefef;*/
    width:20%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    cursor:pointer;
    position:relative;
    z-index:500;
}
.page-flowchartnational .flowchart_image.result .share .share_facebook{
    background-image: url(#{$ASSETS_DIR}/flowchart/icon_facebook_red.png);
    background-size: 12px 24px;
}
.page-flowchartnational .flowchart_image.result .share .share_twitter{
    background-image: url(#{$ASSETS_DIR}/flowchart/icon_twitter_red.png);
    background-size: 23px 20px;
}
.page-flowchartnational .flowchart_image.result .share .share_facebook:hover{
/*    background-image: url(#{$ASSETS_DIR}/flowchart/icon_facebook_white.png);*/
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.page-flowchartnational .flowchart_image.result .share .share_twitter:hover{
/*    background-image: url(#{$ASSETS_DIR}/flowchart/icon_twitter_white.png);*/
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.page-flowchartnational .bubble,
.page-flowchartnational .glowingdot{
    position:absolute;
    opacity: 0;
    visibility: hidden;
}
.page-flowchartnational .glowingdot{
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255,255,255,1);
    box-shadow: 0 0 10px 5px rgba(255,255,255,1);
}
.page-flowchartnational .bubble1 .bubble_inner,
.page-flowchartnational .bubble2 .bubble_inner{
    width:12px;
    height:12px;
}
.page-flowchartnational .bubble .bubble_inner{
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}
.page-flowchartnational .image16deco5 .bubble1 .bubble_inner,
.page-flowchartnational .image16deco5 .bubble2 .bubble_inner{
    width:6px;
    height:6px;
}
.page-flowchartnational .image19deco2 .bubble1 .bubble_inner,
.page-flowchartnational .image19deco2 .bubble2 .bubble_inner{
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.4);
    width:15px;
    height:15px;
}



.page-flowchartnational .flowchart_container .flowchart_image.image0{
    left: 50%;
    top: 15%;
    opacity:1;
    visibility: visible;
}
.page-flowchartnational .flowchart_container .flowchart_image.image0 .bg{
    position:absolute;
    left:-47%;
    top:-43%;
    opacity:0;
    visibility: hidden;
}
.page-flowchartnational .flowchart_container .flowchart_image.image0 .img{
    position:relative;
    margin-top: 15%;
    opacity:0;
    visibility: hidden;
}
.page-flowchartnational .flowchart_container .flowchart_image.image0 .sponsor{
    position:absolute;
    left:35%;
    top:81.4%;
    opacity:0;
    visibility: hidden;
}
.page-flowchartnational .flowchart_container .flowchart_image.image0 .sponsor >* {
    display:inline-block;
    vertical-align: middle;
}
.page-flowchartnational .flowchart_container .flowchart_image.image0 .sponsor a:hover{
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.page-flowchartnational .flowchart_container .flowchart_image.image0 .sponsor span {
    font-size: 14px;
    padding:0 5px 0 0;
}
.page-flowchartnational .flowchart_container .flowchart_image.image0 .sponsor img {
    padding:0 10px;
}
.page-flowchartnational .flowchart_container .flowchart_image.image0 .sponsor img.first{
    width:110px;
}
.page-flowchartnational .flowchart_container .flowchart_image.image0 .sponsor img.second{
    width:60px;
}

.page-flowchartnational .flowchart_image.image1{
    left: 50%;
    top: 45.8%;
}
.page-flowchartnational .flowchart_image.image1 .copy{
    color:#e11a2b;
    top:55%;
    font-size: 45px;
}
.page-flowchartnational .flowchart_image.image2{
    left: 50%;
    top: 66.6%;
    z-index:50;
}
.page-flowchartnational .flowchart_image.image3{
    left: 38.2%;
    top: 30.8%;
}
.page-flowchartnational .flowchart_image.image3 .copy{
    top: 55%;
    line-height: 100%;
}
.page-flowchartnational .flowchart_image.image3 .copy span{
    font-size: 26px;
}
.page-flowchartnational .flowchart_image.image4{
    left: 79%;
    top: 57%;
}
.page-flowchartnational .flowchart_image.image4 .copy{
    top:52%;
}
.page-flowchartnational .flowchart_image.image5{
    left: 36.3%;
    top: 81.5%;
}
.page-flowchartnational .flowchart_image.image5 .copy{
    left:54%;
    top:57%;
}
.page-flowchartnational .flowchart_image.image6{
    left: 64.3%;
    top: 81.4%;
}
.page-flowchartnational .flowchart_image.image6 .copy{
    top:37%;
    line-height: 135%;
}
.page-flowchartnational .flowchart_image.image6 .copy span{
    font-size: 20px;
}
.page-flowchartnational .flowchart_image.image7{
    left: 28.4%;
    top: 22%;    
    z-index: 110;
}
.page-flowchartnational .flowchart_image.image7 .copy{
    top: 45%;    
}
.page-flowchartnational .flowchart_image.image8{
    left: 14.3%;
    top: 28.9%;    
}
.page-flowchartnational .flowchart_image.image8 .copy{
    left:53%;
    top:52%;
}
.page-flowchartnational .flowchart_image.image8 .copy span{
    font-size: 28px;
}
.page-flowchartnational .flowchart_image.image9{
    left: 59%;
    top: 30%;    
}
.page-flowchartnational .flowchart_image.image9 .copy{
    left: 49%;
    top: 57%;    
}
.page-flowchartnational .flowchart_image.image10{
    left: 91.8%;
    top: 41.7%;    
}
.page-flowchartnational .flowchart_image.image10 .copy{
    left: 49.4%;  
}
.page-flowchartnational .flowchart_image.image11{
    left: 36.5%;
    top: 54.4%;    
}
.page-flowchartnational .flowchart_image.image12{
    left: 23.5%;
    top: 68.3%;    
}
.page-flowchartnational .flowchart_image.image12 .copy{
    top: 52%;    
}
.page-flowchartnational .flowchart_image.image13{
    left: 61.4%;
    top: 56.1%;    
}
.page-flowchartnational .flowchart_image.image13 .copy{
    top: 62%;    
}
.page-flowchartnational .flowchart_image.image13 .copy span{
    font-size: 24px;    
}
.page-flowchartnational .flowchart_image.image14{
    left: 8.8%;
    top: 54.3%;    
}
.page-flowchartnational .flowchart_image.image14 .subtitle{
    top:-33%;
}
.page-flowchartnational .flowchart_image.image14 .title{
    top:-23%;
}
.page-flowchartnational .flowchart_image.image14 .copy{
    top:-7%;
    line-height: 170%;
}
.page-flowchartnational .flowchart_image.image14 .share{
    top:13%;
    width:330px;
    height:52px;
}
.page-flowchartnational .flowchart_image.image15{
    left: 33.8%;
    top: 8.6%;
}
.page-flowchartnational .flowchart_image.image15 .subtitle{
    top:37%;
}
.page-flowchartnational .flowchart_image.image15 .title{
    color: white;
    text-shadow:
    -5px -1px 0 #035689,
    1px -1px 0 #035689,
    -1px 1px 0 #035689,
    1px 1px 0 #035689;
    letter-spacing: 1px;
    font-size:42px;
    top: 48%;
}
.page-flowchartnational .flowchart_image.image15 .copy{
    top:71%;
}
.page-flowchartnational .flowchart_image.image15 .share{
    top:115%;
}
.page-flowchartnational .flowchart_image.image15 .share img{
    left: -23%;
    top: -260%;
}
.page-flowchartnational .flowchart_image.image16{
    left: 9.8%;
    top: 14.5%;
}
.page-flowchartnational .flowchart_image.image16 .title{
    left:48.2%;
    top: 14%;
    color:#fff;
}
.page-flowchartnational .flowchart_image.image16 .title span{
    font-size: 20px;
}
.page-flowchartnational .flowchart_image.image16 .copy{
    left: 72%;
    top: 33%;
    text-align:left;
    color:#fff;
    line-height: 200%;
}

.page-flowchartnational .flowchart_image.image16.result .share{
    color:#fff;
    left: 46%;
    top: 70%;
}
.page-flowchartnational .flowchart_image.image17{
    left: 25.5%;
    top: 43.4%;
}
.page-flowchartnational .flowchart_image.image17 .subtitle{
    left:51%;
    top:15%;
}
.page-flowchartnational .flowchart_image.image17 .title{
    left:51%;
    top:22%;
}
.page-flowchartnational .flowchart_image.image17 .copy{
    left: 51%;
    top: 32.5%;
    color: #e11a2b;
}
.page-flowchartnational .flowchart_image.image17 .share{
    top: 90%;
    width:340px;
    height:80px;
}
.page-flowchartnational .flowchart_image.image18{
    left: 79.4%;
    top: 31.3%;
}
.page-flowchartnational .flowchart_image.image18 .copy{
    left: 48%;
    top: 47%;
}
.page-flowchartnational .flowchart_image.image19{
    left: 13.3%;
    top: 84%;
}
.page-flowchartnational .flowchart_image.image19 .subtitle{
    left:51%;
    top:22%;
    color:#fff;
}
.page-flowchartnational .flowchart_image.image19 .title{
    left:51%;
    top:36%;
    color:#fff;
    line-height: 120%;
}
.page-flowchartnational .flowchart_image.image19 .copy{
    left: 51%;
    top: 62%;
    color:#fff;
    line-height: 200%;
}
.page-flowchartnational .flowchart_image.image19 .share{
    top: 85%;
    color:#fff;
}
.page-flowchartnational .flowchart_image.image20{
    left: 69.4%;
    top: 42.5%;
}
.page-flowchartnational .flowchart_image.image20 .copy{
    top: 54%;
}
.page-flowchartnational .flowchart_image.image21{
    left: 71.1%;
    top: 14%;
}
.page-flowchartnational .flowchart_image.image21 .subtitle{
    top:33%;
    font-size: 22px;
}
.page-flowchartnational .flowchart_image.image21 .title{
    top:39%;
}
.page-flowchartnational .flowchart_image.image21 .copy{
    top: 53%;
    line-height: 200%;
}
.page-flowchartnational .flowchart_image.image21.result .share{
    top:92%;
    width:320px;
}
.page-flowchartnational .flowchart_image.image21.result .share .share_facebook, 
.page-flowchartnational .flowchart_image.image21.result .share .share_twitter,
.page-flowchartnational .flowchart_image.image22.result .share .share_facebook, 
.page-flowchartnational .flowchart_image.image22.result .share .share_twitter{
    border-left: 1px solid #e11a2b;
}
.page-flowchartnational .flowchart_image.image22{
    left: 92.2%;
    top: 18%;
}
.page-flowchartnational .flowchart_image.image22 .subtitle{
    color:#e11a2b;
    top:38%;
    font-size: 22px;
}
.page-flowchartnational .flowchart_image.image22 .title{
    color:#fff;
    top:46%;
    text-shadow:
    -5px -1px 0 #e11a2b,
    1px -1px 0 #e11a2b,
    -1px 1px 0 #e11a2b,
    1px 1px 0 #e11a2b;
}
.page-flowchartnational .flowchart_image.image22 .copy{
    top: 58%;
    line-height: 200%;
}
.page-flowchartnational .flowchart_image.image22.result .share{
    top:96%;
    width:320px;
}
.page-flowchartnational .flowchart_image.image23{
    left: 86.5%;
    top: 71%;
}
.page-flowchartnational .flowchart_image.image23 .subtitle{
    left:49.5%;
    top:30.3%;
    font-size: 20px;
}
.page-flowchartnational .flowchart_image.image23 .title{
    color: #fff;
    top: 35.5%;
    font-size: 40px;
    text-shadow:
    -5px -1px 0 #035689,
    1px -1px 0 #035689,
    -1px 1px 0 #035689,
    1px 1px 0 #035689;
}
.page-flowchartnational .flowchart_image.image23 .copy{
    top: 44%;
    line-height: 180%;
}
.page-flowchartnational .flowchart_image.image23.result .share{
    color: #fff;
    left: 47%;
    top: 54%;
    width:360px;
    height:32px;
}
.page-flowchartnational .flowchart_image.image23.result .share img {
    top:-10px;
}
.page-flowchartnational .flowchart_image.image16.result .share .share_facebook,
.page-flowchartnational .flowchart_image.image19.result .share .share_facebook,
.page-flowchartnational .flowchart_image.image23.result .share .share_facebook{
    background-image: url(#{$ASSETS_DIR}/flowchart/icon_facebook_white.png);
}
.page-flowchartnational .flowchart_image.image16.result .share .share_twitter,
.page-flowchartnational .flowchart_image.image19.result .share .share_twitter,
.page-flowchartnational .flowchart_image.image23.result .share .share_twitter{
    background-image: url(#{$ASSETS_DIR}/flowchart/icon_twitter_white.png);
}


/*.page-flowchartnational .flowchart_image.image16.result .share .share_facebook:hover,
.page-flowchartnational .flowchart_image.image19.result .share .share_facebook:hover,
.page-flowchartnational .flowchart_image.image23.result .share .share_facebook:hover{
    background-image: url(#{$ASSETS_DIR}/flowchart/icon_facebook_red.png);
}
.page-flowchartnational .flowchart_image.image16.result .share .share_twitter:hover,
.page-flowchartnational .flowchart_image.image19.result .share .share_twitter:hover,
.page-flowchartnational .flowchart_image.image23.result .share .share_twitter:hover{
    background-image: url(#{$ASSETS_DIR}/flowchart/icon_twitter_red.png);
}*/





.page-flowchartnational .flowchart_container .line0 svg{
    left:50%;
    top:31.4%;
}
.page-flowchartnational .flowchart_container .line1 svg{
    left:43.4%;
    top:33.7%;
}
.page-flowchartnational .flowchart_container .line2 svg{
    left:65.9%;
    top:49.2%;
}
.page-flowchartnational .flowchart_container .line3 svg{
    left:51%;
    top:56.5%;
}
.page-flowchartnational .flowchart_container .line4 svg{
    left:42.6%;
    top:74.4%;
}
.page-flowchartnational .flowchart_container .line5 svg{
    left:57.7%;
    top:74.8%;
}
.page-flowchartnational .flowchart_container .line6 svg{
    left:31.4%;
    top:25.3%;
}
.page-flowchartnational .flowchart_container .line7 svg{
    left:27.2%;
    top:25.7%;
}
.page-flowchartnational .flowchart_container .line8 svg{
    left:68.2%;
    top:41.4%;
}
.page-flowchartnational .flowchart_container .line9 svg{
    left:87%;
    top:48%;
}
.page-flowchartnational .flowchart_container .line10 svg{
    left:33.5%;
    top:68.4%;
}
.page-flowchartnational .flowchart_container .line11 svg{
    left:39.3%;
    top:68.4%;
}
.page-flowchartnational .flowchart_container .line12 svg{
    left:42.3%;
    top:73.7%;
}
.page-flowchartnational .flowchart_container .line13 svg{
    left:67.5%;
    top:71.8%;
}
.page-flowchartnational .flowchart_container .line14 svg{
    left:19.3%;
    top:37%;
}
.page-flowchartnational .flowchart_container .line15 svg{
    left:29%;
    top:10.8%;
}
.page-flowchartnational .flowchart_container .line16 svg{
    left:17.4%;
    top:15.1%;
}
.page-flowchartnational .flowchart_container .line17 svg{
    left:13.6%;
    top:17.7%;
}
.page-flowchartnational .flowchart_container .line18 svg{
    left:18.4%;
    top:35.9%;
}
.page-flowchartnational .flowchart_container .line19 svg{
    left:62.5%;
    top:41%;
}
.page-flowchartnational .flowchart_container .line20 svg{
    left:68.1%;
    top:31.1%;
}
.page-flowchartnational .flowchart_container .line21 svg{
    left:75.5%;
    top:49.3%;
}
.page-flowchartnational .flowchart_container .line22 svg{
    left:88.4%;
    top:36.8%;
}
.page-flowchartnational .flowchart_container .line23 svg{
    left:21.3%;
    top:51.9%;
}
.page-flowchartnational .flowchart_container .line24 svg{
    left:50.3%;
    top:54.6%;
}
.page-flowchartnational .flowchart_container .line25 svg{
    left:20.6%;
    top:71.6%;
}
.page-flowchartnational .flowchart_container .line26 svg{
    left:28.3%;
    top:60.1%;
}
.page-flowchartnational .flowchart_container .line27 svg{
    left:65%;
    top:50.1%;
}
.page-flowchartnational .flowchart_container .line28 svg{
    left:69.3%;
    top:49.1%;
}
.page-flowchartnational .flowchart_container .line29 svg{
    left:73.7%;
    top:26.7%;
}
.page-flowchartnational .flowchart_container .line30 svg{
    left:86.9%;
    top:23.5%;
}
.page-flowchartnational .flowchart_container .line31 svg{
    left:45.8%;
    top:38.4%;
}
.page-flowchartnational .flowchart_container .line32 svg{
    left:74.7%;
    top:56.1%;
}



.page-flowchartnational .deco.image1deco1{
    left:47.4%;
    top:43.8%;
    z-index:200;
}
.page-flowchartnational .deco.image1deco2{
    left:52.3%;
    top:44.9%;
    z-index:200;
}
.page-flowchartnational .deco.image1deco3{
    left:49%;
    top:48.8%;
    z-index:200;
}
.page-flowchartnational .deco.image1deco4{
    left:49.7%;
    top:50.1%;
}
.page-flowchartnational .deco.sponsor.image1deco4 img{
    position:absolute;
    left:110%;
    top:-90%;
    width:60px;
}
.page-flowchartnational .deco.image2deco1{
    left:47.5%;
    top:66.9%;
}
.page-flowchartnational .deco.image2deco2{
    left:52%;
    top:67.3%;
}
.page-flowchartnational .deco.image3deco1{
    left:37.7%;
    top:33.3%;
    z-index:200;
}
.page-flowchartnational .deco.image3deco2{
    left:40.8%;
    top:29.3%;
    z-index:200;
}
.page-flowchartnational .deco.image3deco3{
    left: 37.9%;
    top: 34.7%;
}
.page-flowchartnational .deco.sponsor.image3deco3 img{
    position:absolute;
    left:110%;
    top:-90%;
    width:60px;
}
.page-flowchartnational .deco.image4deco1{
    left: 79%;
    top: 56.8%;
}
.page-flowchartnational .deco.image6deco1{
    left:61.8%;
    top:82.7%;
    z-index:200;
}
.page-flowchartnational .deco.image6deco2{
    left:67%;
    top:83.1%;
    z-index:200;
}
.page-flowchartnational .deco.image7deco1{
    left:28.5%;
    top:22.2%;
    z-index: 110;
}
.page-flowchartnational .deco.image7deco2{
    left:26.5%;
    top:23.2%;
    z-index:200;
}
.page-flowchartnational .deco.image8deco1{
    left: 12%;
    top: 25.4%;
}
.page-flowchartnational .deco.image8deco2{
    left: 13.4%;
    top: 26%;
    width:60px;
}
.page-flowchartnational .deco.image8deco2 img,
.page-flowchartnational .deco.image8deco3 img{
    width:100%;
}
.page-flowchartnational .deco.image8deco3{
    left: 17.8%;
    top: 30.4%;
    width:60px;
}
.page-flowchartnational .deco.image8deco4{
    left: 11.3%;
    top: 29%;
}
.page-flowchartnational .deco.image10deco1{
    left:90%;
    top:41%;
}
.page-flowchartnational .deco.image10deco2{
    left:94.1%;
    top:42.3%;
}
.page-flowchartnational .deco.image11deco1{
    left:36.4%;
    top:57.4%;
}
.page-flowchartnational .deco.image11deco2{
    left: 35%;
    top: 57.5%;
    z-index: 200;
}
.page-flowchartnational .deco.image11deco3{
    left: 38.1%;
    top: 57.5%;
    z-index: 200;
}
.page-flowchartnational .deco.image12deco1{
    left:25.7%;
    top:69.3%;
}
.page-flowchartnational .deco.image12deco2{
    left:26.25%;
    top:69.95%;
}
.page-flowchartnational .deco.image12deco3{
    left:25.15%;
    top:72.8%;
}
.page-flowchartnational .deco.image13deco1{
    left: 58%;
    top: 58.8%;
    transform-origin: 50% 90%;
    z-index: 200;
}
.page-flowchartnational .deco.image13deco2{
    left: 65.2%;
    top: 54.9%;
    transform-origin: 50% 90%;
    z-index: 200;
}
.page-flowchartnational .deco.image13deco3{
    left: 61%;
    top: 59.9%;
}
.page-flowchartnational .deco.sponsor.image13deco3 img{
    position:absolute;
    left:110%;
    top:-50%;
    width:110px;
}
.page-flowchartnational .deco.image14deco1{
    left: 7.3%;
    top: 49.3%;
}
.page-flowchartnational .deco.image14deco2{
    left: 10.7%;
    top: 49.4%;
}
.page-flowchartnational .deco.image15deco1{
    left: 30.2%;
    top: 10.1%;
    z-index: 200;
}
.page-flowchartnational .deco.image15deco2{
    left:34.1%;
    top:13.1%;
}
.page-flowchartnational .deco.sponsor.image15deco2 img{
    position:absolute;
    left:-16%;
    top:-70%;
    width:60px;
}
.page-flowchartnational .deco.image16deco1{
    left: 6.5%;
    top: 15.4%;
    z-index:200;
}
.page-flowchartnational .deco.image16deco2{
    left: 12.2%;
    top: 14.5%;
    z-index:199;
}
.page-flowchartnational .deco.image16deco3{
    left: 11.1%;
    top: 14.4%;
    z-index:200;
}
.page-flowchartnational .deco.image16deco4{
    left: 6.3%;
    top: 13.9%;
    z-index:201;
}
.page-flowchartnational .deco.image16deco5{
    left: 6.7%;
    top: 14%;
    z-index:202;
}
.page-flowchartnational .deco.image17deco1{
    left:23.7%;
    top:46.2%;
    z-index: 200;
    transform-origin: 0% 100%;
}
.page-flowchartnational .deco.image17deco2{
    left:25.6%;
    top:47.5%;
    z-index: 500;
}
.page-flowchartnational .deco.sponsor.image17deco2 img{
    position:absolute;
    left:-15%;
    top:-50%;
}
.page-flowchartnational .deco.image19deco1{
    left: 12%;
    top: 81.1%;
    z-index:200;
}
.page-flowchartnational .deco.image19deco2{
    left: 10.2%;
    top: 84.1%;
    z-index:200;
}
.page-flowchartnational .deco.image19deco3{
    left: 16.4%;
    top: 85%;
    z-index:200;
}
.page-flowchartnational .deco.image20deco1{
    left:69.4%;
    top:40.1%;
}
.page-flowchartnational .deco.image20deco2{
    left:67.05%;
    top:42.47%;
}
.page-flowchartnational .deco.image20deco3{
    left:69.4%;
    top:44.85%;
}
.page-flowchartnational .deco.image21deco1{
    left:71.2%;
    top:13.7%;
}
.page-flowchartnational .deco.image21deco2{
    left:71.3%;
    top:13.7%;
}
.page-flowchartnational .deco.image21deco3{
    left:67.5%;
    top:11.6%;
}
.page-flowchartnational .deco.image21deco4{
    left:75%;
    top:12.6%;
}
.page-flowchartnational .deco.image21deco5{
    left:74.2%;
    top:16.9%;
}
.page-flowchartnational .deco.image21deco6{
    left:68.3%;
    top:17.5%;
}
.page-flowchartnational .deco.image21deco4,
.page-flowchartnational .deco.image21deco6{
    width:50px;
}
.page-flowchartnational .deco.image21deco4 img,
.page-flowchartnational .deco.image21deco6 img{
    width:100%;
}
.page-flowchartnational .deco.image22deco1{
    left:92.2%;
    top:18%;
}
.page-flowchartnational .deco.image22deco2{
    left:92.3%;
    top:18%;
}
.page-flowchartnational .deco.image22deco3{
    left:87.5%;
    top:18%;
}
.page-flowchartnational .deco.image22deco4{
    left:94.4%;
    top:21.8%;
}
.page-flowchartnational .deco.image22deco5{
    left:96.8%;
    top:18%;
}
.page-flowchartnational .deco.image22deco6{
    left:89.9%;
    top:14%;
}
.page-flowchartnational .deco.image22deco7{
    left:94.5%;
    top:13.9%;
}
.page-flowchartnational .deco.image22deco8{
    left:90%;
    top:21.9%;
}
.page-flowchartnational .deco.image22deco3,
.page-flowchartnational .deco.image22deco4,
.page-flowchartnational .deco.image22deco5,
.page-flowchartnational .deco.image22deco6,
.page-flowchartnational .deco.image22deco7,
.page-flowchartnational .deco.image22deco8 {
    width:60px;
}
.page-flowchartnational .deco.image22deco3 img,
.page-flowchartnational .deco.image22deco4 img,
.page-flowchartnational .deco.image22deco5 img,
.page-flowchartnational .deco.image22deco6 img,
.page-flowchartnational .deco.image22deco7 img,
.page-flowchartnational .deco.image22deco8 img{
    width:100%;
}
.page-flowchartnational .deco.image23deco1{
    left:87.8%;
    top:72.97%;
    z-index: 200;
    transform-origin: 50% 0%;
}
.page-flowchartnational .deco.image23deco2{
    left:88.3%;
    top:73%;
    z-index: 200;
    transform-origin: 50% 0%;
}
.page-flowchartnational .deco.image23deco3{
    left:87%;
    top:75.2%;
}
.page-flowchartnational .deco.image23deco3 img{
    position:absolute;
    left:-24%;
    top:-60%;
    width:110px;
}


/*.page-flowchartnational .star{
    fill: lime;
    stroke: none;
    fill-rule: nonzero;
}*/


.page-flowchartnational .flowchart_button.button1{
    left:48.5%;
    top:43.6%;
}
.page-flowchartnational .flowchart_button.button1 .copy{
    top:62%;
}
.page-flowchartnational .flowchart_button.button2{
    left:51.7%;
    top:43.7%;
}
.page-flowchartnational .flowchart_button.button2 .copy{
    top:59%;
}
.page-flowchartnational .flowchart_button.button3{
    left:50%;
    top:48.5%;
}
.page-flowchartnational .flowchart_button.button3 .copy{
    top:61%;
}
.page-flowchartnational .flowchart_button.button4{
    left:48.7%;
    top:69.2%;
}
.page-flowchartnational .flowchart_button.button4 .copy{
    top:59%;
}
.page-flowchartnational .flowchart_button.button5{
    left:51%;
    top:69.5%;
}
.page-flowchartnational .flowchart_button.button5 .copy{
    top:56%;
}
.page-flowchartnational .flowchart_button.button6{
    left:36.4%;
    top:33.3%;
}
.page-flowchartnational .flowchart_button.button6 .copy{
    top:59%;
}
.page-flowchartnational .flowchart_button.button7{
    left:39.8%;
    top:28.7%;
}
.page-flowchartnational .flowchart_button.button7 .copy{
    top:56%;
}
.page-flowchartnational .flowchart_button.button8{
    left:77.4%;
    top:59.7%;
}
.page-flowchartnational .flowchart_button.button9{
    left:80.6%;
    top:59.7%;
}
.page-flowchartnational .flowchart_button.button8 .copy,
.page-flowchartnational .flowchart_button.button9 .copy{
    top:58%;
}
.page-flowchartnational .flowchart_button.button10{
    left:35.3%;
    top:84.4%;
}
.page-flowchartnational .flowchart_button.button10 .copy{
    top:67%;
}
.page-flowchartnational .flowchart_button.button11{
    left:37.5%;
    top:84.4%;
}
.page-flowchartnational .flowchart_button.button11 .copy{
    top:63%;
}
.page-flowchartnational .flowchart_button.button12{
    left:63.4%;
    top:82.2%;
}
.page-flowchartnational .flowchart_button.button12 .copy{
    top:180%;
}
.page-flowchartnational .flowchart_button.button12 .copy .sep{
    margin-top:10px;
}
.page-flowchartnational .flowchart_button.button13{
    left:65.3%;
    top:82.2%;
}
.page-flowchartnational .flowchart_button.button13 .copy{
    top:168%;
}
.page-flowchartnational .flowchart_button.button13 .copy .sep{
    margin-top:32px;
}
.page-flowchartnational .flowchart_button.button14{
    left:29.8%;
    top:24.3%;
}
.page-flowchartnational .flowchart_button.button15{
    left:30.5%;
    top:19.6%;
    z-index: 120;
}
.page-flowchartnational .flowchart_button.button16{
    left:26.4%;
    top:19.7%;
}
.page-flowchartnational .flowchart_button.button14 .copy,
.page-flowchartnational .flowchart_button.button15 .copy{
    top:65%;
    line-height: 110%;
}
.page-flowchartnational .flowchart_button.button16 .copy{
    left:40%;
    top:62%;
    line-height: 110%;
}
.page-flowchartnational .flowchart_button.button17{
    left:16.6%;
    top:27.2%;
}
.page-flowchartnational .flowchart_button.button18{
    left:12.4%;
    top:30.9%;
}
.page-flowchartnational .flowchart_button.button17 .copy,
.page-flowchartnational .flowchart_button.button18 .copy{
    top:67%;
}
.page-flowchartnational .flowchart_button.button19{
    left:60.7%;
    top:28.3%;
}
.page-flowchartnational .flowchart_button.button20{
    left:57.4%;
    top:31.8%;
}
.page-flowchartnational .flowchart_button.button19 .copy,
.page-flowchartnational .flowchart_button.button20 .copy{
    top:65%;
}
.page-flowchartnational .flowchart_button.button21{
    left:90.4%;
    top:44.4%;
}
.page-flowchartnational .flowchart_button.button21 .copy{
    top:61%;
}
.page-flowchartnational .flowchart_button.button22{
    left:92.9%;
    top:44.7%;
}
.page-flowchartnational .flowchart_button.button22 .copy{
    top:57%;
}
.page-flowchartnational .flowchart_button.button23{
    left:35%;
    top:56.3%;
}
.page-flowchartnational .flowchart_button.button24{
    left:38.1%;
    top:56.5%;
}
.page-flowchartnational .flowchart_button.button23 .copy{
    top:67%;
}
.page-flowchartnational .flowchart_button.button24 .copy{
    top:62%;
}
.page-flowchartnational .flowchart_button.button25{
    left:27.8%;
    top:68.4%;
}
.page-flowchartnational .flowchart_button.button26{
    left:26.8%;
    top:71.6%;
}
.page-flowchartnational .flowchart_button.button25 .copy,
.page-flowchartnational .flowchart_button.button26 .copy{
    top:73%;
}
.page-flowchartnational .flowchart_button.button27{
    left:59.3%;
    top:58.8%;
}
.page-flowchartnational .flowchart_button.button27 .copy{
    top:62%;
}
.page-flowchartnational .flowchart_button.button28{
    left:63.8%;
    top:55%;
}
.page-flowchartnational .flowchart_button.button28 .copy{
    top:65%;
}
.page-flowchartnational .flowchart_button.button29{
    left:78.2%;
    top:33.8%;
}
.page-flowchartnational .flowchart_button.button30{
    left:80.6%;
    top:33.8%;
}
.page-flowchartnational .flowchart_button.button29 .copy,
.page-flowchartnational .flowchart_button.button30 .copy{
    top:70%;
}
.page-flowchartnational .flowchart_button.button31{
    left:67.05%;
    top:40.1%;
}
.page-flowchartnational .flowchart_button.button31 .copy,
.page-flowchartnational .flowchart_button.button32 .copy{
    top:70%;
    line-height: 110%;
}
.page-flowchartnational .flowchart_button.button32{    
    left: 67.05%;
    top: 44.85%;
}



@media only screen and (max-width: 750px) {
    .page-flowchartnational{
        margin:0 auto;
        overflow:hidden;
    }
    .page-flowchartnational .flowchart_button.button17{
        left:16.4%;
    }
    .page-flowchartnational .flowchart_button.button18{
        left:12.9%;
    }
    .page-flowchartnational .flowchart_button.button27{
        left:59.6%;
    }
    .page-flowchartnational .flowchart_button.button28{
        left:63.2%;
    }
    .page-flowchartnational .flowchart_image.image16 .title br{
        display:none;
    }
    .page-flowchartnational .flowchart_button.button1{
        left:48.8%;
    }
    .page-flowchartnational .flowchart_button.button2{
        left:51.5%;
    }
    .page-flowchartnational .deco.image1deco1{
        left:47.8%;
    }
    .page-flowchartnational .deco.image1deco2{
        left:52.1%;
    }
    .page-flowchartnational .flowchart_button.button27{
        left:59.8%;
        top:59%;
    }
    .page-flowchartnational .flowchart_button.button28{
        left:62.9%;
        top:54.8%;
    }
    .page-flowchartnational .deco.image13deco1{
        left:59%;
        top:57.6%;
    }
    .page-flowchartnational .deco.image13deco2{
        left:61.6%;
        top:54.7%;
    }
    .page-flowchartnational .deco.image13deco3{
        top:60.2%;
    }

    .page-flowchartnational .deco.image17deco2{
        left:26%;
        top:47.3%;
    }
    .page-flowchartnational .deco.sponsor.image17deco2 img{
        left:10%;
        top:10%;
    }
    .page-flowchartnational .deco.sponsor.image23deco3{
        left:87.3%;
        top:74.9%;
    }
    .page-flowchartnational .deco.sponsor.image23deco3 img{
        left:-4%;
        top:-5%;
    }
    .page-flowchartnational .deco.sponsor.image17deco2 div,
    .page-flowchartnational .deco.sponsor.image23deco3 div{
        max-width: 60%;
        margin:0 auto;
    }
}
              
            
!

JS

              
                window.assets_dir = "https://www.estelzhao.com/app/codepen/img";

window.randRange = function(minNum, maxNum, decimals) {
	decimals = decimals || 0;
	return Math.round((minNum + Math.random() * (maxNum - minNum)) * Math.pow(10, decimals)) / Math.pow(10, decimals);
}

var MainData = {
	path:[
	[{x:0, y:3600}, {x:0, y:380}],
	[{x:0, y:380}, {x:155, y:700}, {x:155, y:1210}, {x:680, y:1210}, {x:680, y:2530}, {x:1230, y:2530}, {x:1230, y:1970}],
	[{x:0, y:380}, {x:-200, y:650}, {x:-640, y:650}, {x:-640, y:50}, {x:-3000, y:50}, {x:-3040, y:-850}],
	[{x:0, y:380}, {x:-200, y:160}, {x:-200, y:-1060}, {x:10, y:-1060}, {x:10, y:-1060}, {x:10, y:-1850}],
	[{x:10, y:-1850}, {x:140, y:-2100}, {x:140, y:-2700}, {x:1430, y:-2700}, {x:1430, y:-3380}],
		[{x:10, y:-1850}, {x:-100, y:-2100}, {x:-100, y:-2600}, {x:-1500, y:-2660}, {x:-1500, y:-3320}], // line 5
		[{x:1230, y:1970}, {x:1450, y:1750}, {x:1800, y:1750}, {x:1800, y:3400}, {x:2270, y:3400}, {x:2270, y:2940}],
		[{x:1230, y:1970}, {x:1230, y:2430}, {x:2950, y:2430}, {x:2950, y:2670}, {x:3720, y:2670}, {x:3720, y:2190}],
		[{x:-3040, y:-850}, {x:-2780, y:-450}, {x:-2780, y:1330}, {x:-1540, y:1330}, {x:-1540, y:2470}, {x:-950, y:2470}, {x:-950, y:2080}],
		[{x:-3040, y:-850}, {x:-3550, y:-850}, {x:-3550, y:1250}, {x:-4385, y:1250}, {x:-4385, y:780}],
		[{x:1430, y:-3380}, {x:1700, y:-3380}, {x:1700, y:-250}, {x:1420, y:-250}, {x:1420, y:-640}], // line 10
		[{x:1430, y:-3380}, {x:1160, y:-3380}, {x:1160, y:-250}, {x:1420, y:-250}, {x:1420, y:-640}],
		[{x:-1500, y:-3320}, {x:300, y:-3320}, {x:300, y:-2320}, {x:1700, y:-2320}, {x:1700, y:-1590}, {x:2570, y:-1590}, {x:2570, y:-2110}],
		[{x:-1500, y:-3320}, {x:-1500, y:-3820}, {x:-1830, y:-3820}, {x:-1830, y:-700}, {x:-1190, y:-700}],
		[{x:2270, y:2940}, {x:2270, y:1570}, {x:4020, y:1570}, {x:4320, y:-230}],
		[{x:2270, y:2940}, {x:2270, y:3690}, {x:2590, y:3690}, {x:2590, y:4510}, {x:1710, y:4510}, {x:1710, y:4230}], // line 15
		[{x:2270, y:2940}, {x:2650, y:3180}, {x:3150, y:3180}, {x:3150, y:4140}, {x:4240, y:4140}, {x:4240, y:3740}],
		[{x:3720, y:2190}, {x:3600, y:2590}, {x:3600, y:4140}, {x:4240, y:4140}, {x:4240, y:3740}],
		[{x:3720, y:2190}, {x:3920, y:1850}, {x:3920, y:1400}, {x:2560, y:1400}, {x:2560, y:670}],
		[{x:-950, y:2080}, {x:-1200, y:2250}, {x:-1400, y:2250}, {x:-1400, y:1690}, {x:-1200, y:1690}, {x:-1200, y:-680}],
		[{x:-950, y:2080}, {x:-780, y:1780}, {x:-780, y:1580}, {x:-1870, y:1580}, {x:-1870, y:2320}, {x:-3060, y:2320}, {x:-3060, y:1900}], // line 20
		[{x:-4385, y:780}, {x:-4245, y:500}, {x:-4245, y:180}, {x:-1200, y:180}, {x:-1200, y:-680}],
		[{x:-4385, y:780}, {x:-4490, y:280}, {x:-4850, y:280}, {x:-4850, y:2440}, {x:-3060, y:2440}, {x:-3060, y:1900}],
		[{x:1420, y:-640}, {x:3380, y:-640}, {x:3380, y:340}, {x:4320, y:340}, {x:4320, y:-230}],
		[{x:1420, y:-640}, {x:200, y:-640}, {x:200, y:-290}, {x:-1200, y:-290}, {x:-1200, y:-680}],
		[{x:2570, y:-2110}, {x:2570, y:-1310}, {x:3850, y:-1310}, {x:3850, y:-3540}], // line 25
		[{x:2570, y:-2110}, {x:2070, y:-2110}, {x:2070, y:-480}, {x:2560, y:-480}, {x:2560, y:670}],
		[{x:-1200, y:-680}, {x:-860, y:-680}, {x:-860, y:120}, {x:-2280, y:120}, {x:-2280, y:790}, {x:-1910, y:790}],
		[{x:-1200, y:-680}, {x:-1600, y:-490}, {x:-2280, y:-490}, {x:-2280, y:790}, {x:-1910, y:790}],
		[{x:-3060, y:1900}, {x:-2820, y:1400}, {x:-2220, y:2500}, {x:-2220, y:3780}],
		[{x:-3060, y:1900}, {x:-3660, y:1900}, {x:-3660, y:3900}, {x:-4420, y:3900}, {x:-4420, y:3340}], // line 30
		[{x:-1910, y:790}, {x:-1580, y:1040}, {x:920, y:1040}, {x:920, y:1400}, {x:2560, y:1400}, {x:2560, y:670}],
		[{x:-1910, y:790}, {x:-1480, y:580}, {x:-1480, y:-120}, {x:-2480, y:-120}, {x:-2480, y:-1460}, {x:-3830, y:-1460}, {x:-3830, y:-2240}]
		],
		line:[
		{
			id:0,
			width:200,
			height:2570,
			path: 'M100,5 L100,2565',
			copy: ''
		},
		{
			id:1,
			width:1280,
			height:1845,
			path: 'M1180,1840 L1180,1420 L650,1420 L650,100 L100,100 L100,380',
			image: 'nationalbutton1.png',
			copy: 'Should I be?<br />I haven\'t made<br />plans yet.'
		},
		{
			id:2,
			width:2950,
			height:1315,
			path: 'M100,100 L450,100 L450,700 L2850,700 L2850,1310',
			image: 'nationalbutton2.png',
			copy: 'It\'s gonna be<br />AWESOME. It\'s my fave<br />holiday&mdash;I can\'t wait to<br />celebrate.'
		},
		{
			id:3,
			width:420,
			height:1690,
			path: 'M220,5 L320,0 L320,1240 L100,1240 L100,1685',
			image: 'nationalbutton3.png',
			copy: 'A little bit.<br />It\'s an excuse to<br />party, right?'
		},
		{
			id:4,
			width:1490,
			height:930,
			path: 'M1390,5 L1390,615 L100,615 L100,925',
			image: 'nationalbutton4.png',
			copy: 'The adoption of the<br />Declaration of<br />Independence.'
		},
		{
			id:5,
			width:1610,
			height:830,
			path: 'M100,5 L100,485 L1510,485 L1510,825',
			image: 'nationalbutton5.png',
			copy: 'The long weekend,<br />duh...'
		},
		{
			id:6,
			width:825,
			height:1890,
			path: 'M820,1790 L520,1790 L520,100 L100,100 L100,450',
			image: 'nationalbutton6.png',
			copy: 'Good point.<br />But where should<br />I start?'
		},
		{
			id:7,
			width:2660,
			height:440,
			path: 'M2650,420 L2650,340 L775,340 L775,100 L5,100 L5,265',
			image: 'nationalbutton7.png',
			copy: 'I was invited<br />to a cookout. I\'ll<br />RSVP now.   '
		},
		{
			id:8,
			width:1940,
			height:3545,
			path: 'M1840,3540 L1840,1340 L600,1340 L600,100 L5,100 L5,340',
			image: 'nationalbutton8.png',
			copy: 'I\'m proud to break out<br />my gear designed with<br />the stars and bars.'
		},
		{
			id:9,
			width:1010,
			height:2305,
			path: 'M5,2300 L205,2300 L205,100 L1005,100 L1005,270',
			image: 'nationalbutton9.png',
			copy: 'It\'s the perfect time<br />to raise the USA flag<br />in the front yard!'
		},
		{
			id:10,
			width:550,
			height:3410,
			path: 'M400,3405 L100,3405 L100,5 L545,5 L545,100',
			image: 'nationalbutton10.png',
			copy: 'Flattery will get you<br />everywhere...but I<br />just know the basics.'
		},
		{
			id:11,
			width:550,
			height:3410,
			path: 'M150,3405 L450,3405 L450,5 L5,5 L5,100',
			image: 'nationalbutton11.png',
			copy: 'No, it was a<br />lucky guess.'
		},
		{
			id:12,
			width:3950,
			height:2050,
			path: 'M3945,1950 L2465,1950 L2465,860 L1010,860 L1010,100 L5,100 L5,275',
			image: 'nationalbutton12.png',
			copy: 'Catching up with<br />friends.'
		},
		{
			id:13,
			width:820,
			height:3110,
			path: 'M180,2855 L180,3105 L720,3105 L720,100 L5,100',
			image: 'nationalbutton13.png',
			copy: 'Firing up<br />the grill!'
		},
		{
			id:14,
			width:2410,
			height:2420,
			path: 'M2310,5 L2310,1020 L100,1020 L100,2415',
			image: 'nationalbutton14.png',
			copy: 'Soaking up the sun<br />at the shore.'
		},
		{
			id:15,
			width:1020,
			height:1600,
			path: 'M670,1595 L670,1220 L100,1220 L100,100 L1015,100 L1015,315',
			image: 'nationalbutton15.png',
			copy: 'Hosting a movie<br />marathon with<br />friends & family.'
		},
		{
			id:16,
			width:1610,
			height:1170,
			path: 'M1605,1070 L1055,1070 L1055,100 L5,100 L5,290',
			image: 'nationalbutton16.png',
			copy: 'Baking USA-themed<br />desserts with red, white<br />& blue designs.'
		},
		{
			id:17,
			width:830,
			height:1705,
			path: 'M730,1700 L730,100 L5,100 L5,290',
			image: 'nationalbutton17.png',
			copy: 'I\'ll probably head<br />inside to beat the<br />heat.'
		},
		{
			id:18,
			width:1470,
			height:805,
			path: 'M100,5 L100,505 L1465,505 L1465,800',
			image: 'nationalbutton18.png',
			copy: 'I\'m not really a big<br />planner. I guess I\'ll keep<br />the celebration going<br />somehow.'
		},
		{
			id:19,
			width:460,
			height:2665,
			path: 'M160,5 L360,5 L360,600 L100,600 L100,2660',
			image: 'nationalbutton19.png',
			copy: 'Thanksgiving<br />is a close second,<br />but BBQ is life.'
		},
		{
			id:20,
			width:2250,
			height:1090,
			path: 'M5,745 L5,990 L1150,990 L1150,100 L2245,100 L2245,330',
			image: 'nationalbutton20.png',
			copy: 'Nope...<br />the fireworks alone<br />set it apart.'
		},
		{
			id:21,
			width:3140,
			height:930,
			path: 'M3135,5 L3135,410 L100,410 L100,925',
			image: 'nationalbutton21.png',
			copy: 'I\'m always down to<br />eat until I\'m all the<br />way full at a back-<br />yard BBQ.'
		},
		{
			id:22,
			width:1885,
			height:2310,
			path: 'M1415,2135 L1415,2305 L1785,2305 L1785,100 L5,100 L5,340',
			image: 'nationalbutton22.png',
			copy: 'I\'ll definitely watch<br />fireworks&mdash;somewhere,<br />somehow, some way!'
		},
		{
			id:23,
			width:2540,
			height:1260,
			path: 'M2535,1160 L900,1160 L900,100 L5,100 L5,260',
			image: 'nationalbutton23.png',
			copy: 'I\'m heading to<br />the beach.'
		},
		{
			id:24,
			width:2270,
			height:670,
			path: 'M5,570 L905,570 L905,100 L2265,100 L2265,240',
			image: 'nationalbutton24.png',
			copy: 'I\'ll be hitting up a<br />cookout or two.'
		},
		{
			id:25,
			width:1720,
			height:2130,
			path: 'M1620,580 L1620,100 L100,100 L100,2125',
			image: 'nationalbutton25.png',
			copy: 'You know it. I love being<br />in the mix with the<br />masses.'
		},
		{
			id:26,
			width:760,
			height:2540,
			path: 'M360,2535 L660,2535 L660,630 L100,630 L100,5',
			image: 'nationalbutton26.png',
			copy: 'Intimate gatherings<br />are more my speed.'
		},
		{
			id:27,
			width:1680,
			height:1590,
			path: 'M100,1585 L100,630 L1580,630 L1580,5 L1435,5',
			image: 'nationalbutton27.png',
			copy: 'Aloha,<br />King\'s Hawaiian Original<br />Sweet Pineapple BBQ<br />Sauce! You can\'t go<br />wrong with a classic.'
		},
		{
			id:28,
			width:790,
			height:1385,
			path: 'M5,1285 L690,1285 L690,5 L540,5',
			image: 'nationalbutton28.png',
			copy: 'What\'s summer<br />without the heat? King\'s<br />Hawaiian Big Island<br />Lava Sauce FTW!'
		},
		{
			id:29,
			width:720,
			height:1805,
			path: 'M715,1705 L100,1705 L100,5',
			image: 'nationalbutton29.png',
			copy: 'Washington, D.C.'
		},
		{
			id:30,
			width:1120,
			height:2460,
			path: 'M5,2360 L410,2360 L410,100 L1115,100 L1115,280',
			image: 'nationalbutton30.png',
			copy: 'New York'
		},
		{
			id:31,
			width:4170,
			height:555,
			path: 'M4165,455 L1585,455 L1585,100 L5,100 L5,410',
			image: 'nationalbutton31.png',
			copy: 'That would help!<br />I\'ll check out Macy\'s<br />Culinary Council<br />for recipes.'
		},
		{
			id:32,
			width:2485,
			height:2390,
			path: 'M300,5 L100,5 L100,735 L1185,735 L1185,2100 L2480,2100 L2480,2385',
			image: 'nationalbutton32.png',
			copy: 'I\'m ok with<br />sticking to the<br />basics.'
		}
		],
		dot:[
		{
			id:0,
			image:'nationalimage0.png',
			popup:[{button:0,nextDot:1}]
		},
		{
			id:1,
			image:'nationalimage1.png',
			copy:'ARE YOU<br />FIRED UP?',
			sponsorcopy:'brought to you by',
			popup:[{button:1,nextDot:3},{deco:'figure_blue.png'},{button:2,nextDot:4 },{deco:'figure_red.png'},{button:3,nextDot:2},{deco:'figure_green.png'}]
		},
		{
			id:2,
			image:'nationalimage2.png',
			copy:'WHAT ARE WE<br />CELEBRATING<br />ANYWAY?',
			popup:[{deco:'balloon_red.png'},{deco:'balloon_blue.png'},{button:4,nextDot:5},{button:5,nextDot:6}]
		},
		{
			id:3,
			image:'nationalimage3.png',
			copy:'HOP TO IT, HOMIE!<br /><span>DON\'T YOU WANT TO</span><br />MAKE THIS HOLIDAY<br />MEMORABLE?',
			sponsorcopy:'brought to you by',
			popup:[{button:6,nextDot:7},{deco:'figure_green2.png'},{button:7,nextDot:8},{deco:'figure_red.png'}]
		},
		{
			id:4,
			image:'nationalimage4.png',
			copy:'HOW WILL YOU<br>SHOW YOUR LEVEL<br />OF EXCITEMENT?',
			popup:[{deco:'national_redheart.png'},{button:8,nextDot:9},{button:9,nextDot:10}]
		},
		{
			id:5,
			image:'nationalimage5.png',
			copy:'AHA! I SEE YOU<br>KNOW YOUR<br />U.S. HISTORY.',
			popup:[{button:10,nextDot:11},{button:11,nextDot:11}]
		},
		{
			id:6,
			image:'nationalimage6.png',
			copy:'<span>COMPLETE THIS SENTENCE:</span><br />SUMMER FUN<br />DAYS ARE ALSO<br />MADE FOR...',
			popup:[{deco:'national_popsicle.png'},{deco:'national_drink.png'},{button:12,nextDot:12},{button:13,nextDot:13}]
		},
		{
			id:7,
			image:'nationalimage7.png',
			copy:'WHAT<br />SOUNDS MOST<br />APPEALING?',
			popup:[{deco:'national_bigheart.png'},{deco:'national_thumb.png'},{button:16,nextDot:16},{button:15,nextDot:15},{button:14,nextDot:14}]
		},
		{
			id:8,
			image:'nationalimage8.png',
			copy:'WHAT ARE YOU<br /><span>THINKING ABOUT DOING</span><br />THAT NIGHT?',
			popup:[{button:17,nextDot:16},{button:18,nextDot:17},{deco:'twinkle_star_blue.png'},{deco:'twinkle_star_red.png'},{deco:'twinkle_star_blue.png'},{deco:'twinkle_star_red.png'}]
		},
		{
			id:9,
			image:'nationalimage9.png',
			copy:'DOES ANY<br />OTHER HOLIDAY<br />COMPARE TO<br />JULY 4TH?',
			popup:[{button:19,nextDot:13},{button:20,nextDot:18}]
		},
		{
			id:10,
			image:'nationalimage10.png',
			copy:'GOT A<br />FAVORITE<br />JULY 4TH<br />ACTIVITY?',
			popup:[{deco:'balloon_red.png'},{deco:'balloon_blue.png'},{button:21,nextDot:13},{button:22,nextDot:18}]
		},
		{
			id:11,
			image:'nationalimage11.png',
			copy:'WHERE\'S<br />THE PARTY AT<br />THIS YEAR?',
			popup:[{deco:'national_map.png'},{button:23,nextDot:14},{button:24,nextDot:13},{deco:'national_hotspot.png'},{deco:'national_hotspot.png'}]
		},
		{
			id:12,
			image:'nationalimage12.png',
			copy:'IS IT SAFE TO SAY,<br />YOU DON\'T MIND<br />BIG CROWDS?',
			popup:[{deco:'national_people.png'},{deco:'national_people_blue.png'},{deco:'national_people_blue.png'},{button:25,nextDot:19},{button:26,nextDot:17}]
		},
		{
			id:13,
			image:'nationalimage13.png',
			sponsorcopy:'brought to you by',
			copy:'<span>ALL SORTS OF JUICY MEATS ARE<br />ON THE GRILL.</span> WHICH BBQ<br />SAUCE FLAVOR WILL<br />YOU REACH FOR?',
			popup:[{button:27,nextDot:20},{deco:'national_beerbot.png'},{button:28,nextDot:20},{deco:'national_beertop.png'}]
		},
		{
			id:14,
			type:1,
			image:'nationalresult14.png',
			subtitle:'I\'M A DEVOUT',
			title:'SUN WORSHIPPER.',
			copy:'Since summer is here, the way<br />I celebrate the day is to tan and chill.<br />Who can be mad at that?',
			sharebg:'nationalshare14.png',
			popup:[{deco:'national_lounge.png'},{deco:'national_umbrella.png'}]
		},
		{
			id:15,
			type:1,
			image:'nationalresult15.png',
			subtitle:'CALL ME A',
			title:'SUMMER MOVIE HOUND!',
			copy:'I\'ll keep my film obsession going by heading to a multiplex to catch the<br />latest holiday blockbuster and munch on my fave snacks&mdash;<br />a tub of popcorn and, of course, a box of Sour Patch Kids!',
			sponsorcopy:'Discover all the sour and sweet flavors of Sour Patch Kids. <a href="http://www.sourpatch.com/?cm_sp=imp-_-fireworks-_-summermoviehound_sourpatch_findoutmore" target="_blank">Find Out More</a>',
			sharebg: 'nationalshare15.png',
			popup:[{deco:'national_popcorn.png'}]
		},
		{
			id:16,
			type:1,
			image:'nationalresult16.png',
			subtitle:'',
			title:'HUMBLE HOMEBODY<span>, here!</span>',
			copy:'Staying in has its benefits&mdash;I\'ll tune<br />in to watch Macy\'s Fireworks on NBC<br />while the AC\'s on blast!',
			popup:[{deco:'national_table.png'},{deco:'national_cushion2.png'},{deco:'national_cushion1.png'},{deco:'national_bottle.png'},{deco:'national_cup.png'}]
		},
		{
			id:17,
			type:1,
			image:'nationalresult17.png',
			subtitle:'I\'M THE',
			title:'HAPPY HOST(ESS)!',
			copy:'It\'s the perfect opportunity to entertain with a full-on<br />spread and catch Macy\'s Fireworks on NBC.',
			sponsorcopy:'Plan your summer menu with Macy\'s Culinary Council recipes. <a href="https://www.macys.com/social/culinary-council/?cm_sp=imp-_-fireworks-_-happyhost_culinarycouncil_findoutmore" target="_blank">Find Out More</a>',
			sharebg: 'nationalshare17.png',
			popup:[{deco:'national_lollipop.png'}]
		},
		{
			id:18,
			image:'nationalimage18.png',
			copy:'WHICH CITY<br />HOSTS THE COUNTRY\'S<br />LARGEST SHOW?',
			popup:[{button:29,nextDot:21},{button:30,nextDot:22}]
		},
		{
			id:19,
			type:1,
			image:'nationalresult19.png',
			subtitle:'SCORE ONE FOR A',
			title:'SOCIAL<br />BUTTERFLY!',
			copy:'I\'ll gather my friends to watch the local<br />fireworks display and channel the party vibes<br />coming from the live show in NYC.',
			popup:[{deco:'national_butterfly.png'},{deco:'national_glasscup1.png'},{deco:'national_glasscup2.png'}]
		},
		{
			id:20,
			image:'nationalimage20.png',
			copy:'NEED MORE<br />FOOD IDEAS?',
			popup:[{deco:'national_blockblue.png'},{deco:'national_blockgrey.png'},{deco:'national_blockred.png'},{button:31,nextDot:17},{button:32,nextDot:23}]
		},
		{
			id:21,
			type:1,
			image:'nationalresult21.png',
			subtitle:'LIKE MANY, I\'M THAT CASUAL',
			title:'FIREWORKS FAN.',
			copy:'I should\'ve known Macy\'s<br />Fireworks is the nation\'s biggest. But<br />I do know that if you can\'t make it to<br />the big city, then watching it on NBC is<br />the next best thing.',
			popup:[{deco:'national_fireworks1_inner.png'},{deco:'national_fireworks1_outer.png'},{deco:'twinkle_star_blue.png'},{deco:'twinkle_star_red.png'},{deco:'twinkle_star_blue.png'},{deco:'twinkle_star_red.png'}]
		},
		{
			id:22,
			type:1,
			image:'nationalresult22.png',
			subtitle:'I\'M A',
			title:'FIREWORKS<br />FANATIC',
			copy:'who knows my stuff! Macy\'s<br />Fireworks is indeed the biggest show!<br />Watch it on NBC!',
			popup:[{deco:'national_fireworks2_inner.png'},{deco:'national_fireworks2_outer.png'},{deco:'twinkle_star_red.png'},{deco:'twinkle_star_red.png'},{deco:'twinkle_star_red.png'},{deco:'twinkle_star_red.png'},{deco:'twinkle_star_red.png'},{deco:'twinkle_star_red.png'}]
		},
		{
			id:23,
			type:1,
			image:'nationalresult23.png',
			subtitle:'CALL ME',
			title:'BBQ BOSS!',
			copy:'MANNING THE GRILL&mdash;<br />IT\'S MY AMERICAN DUTY.',
			sponsorcopy:'Do your tastebuds a favor and try King\'s Hawaiian recipes. <a href="http://www.kingshawaiian.com/?cm_sp=imp-_-fireworks-_-yourideaof4julyfun_kingshawaiian_findoutmore" target="_blank">Find Out More</a>',
			sharebg: 'nationalshare23.png',
			popup:[{deco:'national_tool1.png'},{deco:'national_tool2.png'}]
		}]
};


var AllAnimations = (function(){ 
    function FigureJump(obj,settings){
        var settings = $.extend({
            lastTop:-75,
            repeatDelay:randRange(5,10),
            delay:randRange(2,6)
        },settings);

        var tl = new TimelineMax({delay:settings.delay,repeat:100, repeatDelay:settings.repeatDelay});
        tl.to(obj,0.25,{y:-125, ease:Power2.easeOut});
        tl.to(obj,0.5,{y:settings.lastTop, ease:Bounce.easeOut},"+0.25");
        return tl;
        // TweenMax.to(obj, .3, {y:-125, ease:Power2.easeOut, repeat:100, delay:settings.delay,repeatDelay:settings.repeatDelay});
        // TweenMax.to(obj, .5, {y:-75, ease:Bounce.easeOut, repeat:100, delay:settings.delay+0.3, repeatDelay:settings.repeatDelay});
    }

    function BalloonMove(obj,settings){
        var settings = $.extend({
            newTop:[-250,-300]
        },settings);
   		var newTop = randRange(settings.newTop[0], settings.newTop[1]);
   		//var newLeft = randRange(-30, 30);
   		//var newRot = randRange(-10, 10);
        var newDelay = randRange(0, 2);
        var newDur = randRange(0, 2);

        // newTop<0 ? newTop = "-="+newTop+'px' : newTop = "+="+newTop+'px';
   		//newLeft.substr(0,1)=="-" ? newLeft = "-="+newLeft.substr(1,newTop.length-1) : newLeft = "+="+newLeft;

   		// TweenMax.to(myBalloon, 3, {css:{rotation:10,paddingTop:"10px", transformOrigin:"50% 100%"}, ease:Ease.easeInOut, delay:0, autoRound:true, repeat:-1, yoyo:true});
  		// TweenMax.to(myBalloon, 5, {css:{top:newTop, left:newLeft, rotation:newRot}, ease:Sine.easeInOut,repeat:-1,  autoRound:true, yoyo:true,overwrite:true});
 	    TweenMax.to(obj, 5+newDur, {y:newTop, ease:Sine.easeInOut, repeat:500, yoyo:true, delay:newDelay});
        return obj;
	}

    function HeartBeat(obj,settings){
        var settings = $.extend({
            repeatDelay:randRange(5,8),
            delay:randRange(2,4)
        },settings);

        var tl = new TimelineMax({delay:settings.delay,repeat:100, repeatDelay:settings.repeatDelay});
        tl.to(obj,0.4,{scale:1.2,ease:Bounce.easeOut});
        tl.to(obj,0.2,{scale:1},"+0.4");
        // TweenMax.to(obj, 0.4, {scale:1.2, delay:settings.delay, ease:Bounce.easeOut, repeat:100,repeatDelay:settings.repeatDelay, onRepeat:function(){console.log("1");}})
        // TweenMax.to(obj, 0.2, {scale:1, delay:settings.delay+0.4, repeat:100,repeatDelay:settings.repeatDelay, onRepeat:function(){console.log("2");}})
        return tl;
    }

    function BubbleRise(obj, settings){
        console.log("bubble rise");
        var settings = $.extend({
            xRange: [0.3,0.7],
            yRange:[0.2,0.6]
        },settings);
        var divW = $(obj).width();
        var divH = $(obj).height();
        var bubble1 = $(obj).children('.bubble1');
        var bubble2 = $(obj).children('.bubble2');
        var origX1 = (randRange(2,8)/10)*divW;
        var origY1 = -settings.yRange[0]*divH;
        var endY1 = -settings.yRange[1]*divH;
        var origScale1 = 1;
        var delay1 = 0;
        var dur1 = 4;
        var origX2 = (randRange(2,8)/10)*divW;
        var origY2 = -settings.yRange[0]*divH;
        var endY2 = -settings.yRange[1]*divH;
        var origScale2 = 1;
        var delay2 = 0;
        var dur2 = 4;

        bubbleAni();

        var tl = new TimelineMax({repeat:100, repeatDelay:5, onRepeat:bubbleAni});
        //tl.set(bubble1,{x:origX, y:origY, autoAlpha:0, scale:1});
        // tl.to(bubble1,0.1,{autoAlpha:1},"+"+delay);
        // tl.to(bubble1,4,{y:endY, autoAlpha:0, scale:1.2},"+"+(delay+0.1));
        return tl;

        function bubbleAni(){
            origX1 = (randRange(settings.xRange[0]*10,settings.xRange[1]*10)/10)*divW;
            delay1 = randRange(0,9)/10;
            dur1 = randRange(4,5);
            origScale1 = randRange(5,10)/10;
            origX2 = (randRange(settings.xRange[0]*100,settings.xRange[1]*100)/100)*divW;
            delay2 = randRange(0,9)/10;
            dur2 = randRange(4,5);
            origScale2 = randRange(5,10)/10;
            TweenMax.set(bubble1,{x:origX1, y:origY1, autoAlpha:0, scale:origScale1});
            TweenMax.set(bubble2,{x:origX2, y:origY2, autoAlpha:0, scale:origScale2});
            TweenMax.to(bubble1,0.1,{autoAlpha:1, delay:delay1});
            TweenMax.to(bubble2,0.1,{autoAlpha:1, delay:delay2});
            TweenMax.to(bubble1,dur1,{y:endY1, autoAlpha:0, scale:origScale1*1.2, delay:delay1+0.1});
            TweenMax.to(bubble2,dur2,{y:endY2, autoAlpha:0, scale:origScale2*1.2, delay:delay2+0.1});
        }
    }

    function StarFlash(obj,settings){
        var settings = $.extend({
            duration:0.2,
            repeatDelay:0.5
        },settings);
        TweenMax.set(obj,{autoAlpha:0.4, scale:0.4});
        TweenMax.to(obj, settings.duration, {autoAlpha:1,scale:1,repeat:500,yoyo:true,repeatDelay:settings.repeatDelay});
        return obj;
    }

    function GlowingdotMove(obj){
        var divW = $(obj).width();
        var divH = $(obj).height();
        var glowingdot = $(obj).children('.glowingdot');
        var tl = new TimelineMax({repeat:100, repeatDelay:3});
        tl.set(glowingdot,{x:260, y: -60});
        tl.to(glowingdot,0.3,{autoAlpha:1});
        tl.to(glowingdot,1.7,{x:290, y:-150},"+0.3");
        tl.to(glowingdot,3.5,{x:415, y:-275},"+2");
        tl.to(glowingdot,0.3,{autoAlpha:0},"+5.5");
        tl.set(glowingdot,{x:570, y: -70},"+6.8");
        tl.to(glowingdot,0.3,{autoAlpha:1},"+6.8");
        tl.to(glowingdot,2.2,{x:720, y:-160},"+7.1");
        tl.to(glowingdot,0.3,{autoAlpha:0},"+9.3");
        tl.set(glowingdot,{x:395, y: -30},"+10.6");
        tl.to(glowingdot,0.3,{autoAlpha:1},"+10.6");
        tl.to(glowingdot,2.5,{x:310, y:-180},"+10.9");
        tl.to(glowingdot,0.3,{autoAlpha:0},"+13.4");
        return tl;
    }

    function BottleShake(obj,settings) {
        var settings = $.extend({
            rotation:-10
        },settings);

        var tl = new TimelineMax({repeat:100, repeatDelay:4});
        tl.to(obj,.3,{rotation:settings.rotation});
        tl.to(obj, 2, {rotation:0, ease: Elastic.easeOut},"+0.3");
        return tl;
    }

    function CircleRotate(obj){
        TweenMax.to(obj, 4, {rotation:360, delay:1.5, transformOrigin:"50% 50%", ease:Quint.easeOut, repeat:100});
        return obj;
    }

    return {
        FigureJump:FigureJump,
        BalloonMove:BalloonMove,
        HeartBeat:HeartBeat,
        BubbleRise:BubbleRise,
        StarFlash:StarFlash,
        GlowingdotMove:GlowingdotMove,
        BottleShake:BottleShake,
        CircleRotate:CircleRotate
    }
})();

	var roundPathCorners = function(pathString, radius, useFractionalRadius) {
		function moveTowardsLength(movingPoint, targetPoint, amount) {
			var width = (targetPoint.x - movingPoint.x);
			var height = (targetPoint.y - movingPoint.y);

			var distance = Math.sqrt(width*width + height*height);

			return moveTowardsFractional(movingPoint, targetPoint, Math.min(1, amount / distance));
		}
		function moveTowardsFractional(movingPoint, targetPoint, fraction) {
			return {
				x: movingPoint.x + (targetPoint.x - movingPoint.x)*fraction,
				y: movingPoint.y + (targetPoint.y - movingPoint.y)*fraction
			};
		}

  // Adjusts the ending position of a command
  function adjustCommand(cmd, newPoint) {
  	if (cmd.length > 2) {
  		cmd[cmd.length - 2] = newPoint.x;
  		cmd[cmd.length - 1] = newPoint.y;
  	}
  }
  
  // Gives an {x, y} object for a command's ending position
  function pointForCommand(cmd) {
  	return {
  		x: parseFloat(cmd[cmd.length - 2]),
  		y: parseFloat(cmd[cmd.length - 1]),
  	};
  }
  
  // Split apart the path, handing concatonated letters and numbers
  var pathParts = pathString
  .split(/[,\s]/)
  .reduce(function(parts, part){
  	var match = part.match("([a-zA-Z])(.+)");
  	if (match) {
  		parts.push(match[1]);
  		parts.push(match[2]);
  	} else {
  		parts.push(part);
  	}

  	return parts;
  }, []);
  
  // Group the commands with their arguments for easier handling
  var commands = pathParts.reduce(function(commands, part) {
  	if (parseFloat(part) == part && commands.length) {
  		commands[commands.length - 1].push(part);
  	} else {
  		commands.push([part]);
  	}

  	return commands;
  }, []);
  
  // The resulting commands, also grouped
  var resultCommands = [];
  
  if (commands.length > 1) {
  	var startPoint = pointForCommand(commands[0]);

    // Handle the close path case with a "virtual" closing line
    var virtualCloseLine = null;
    if (commands[commands.length - 1][0] == "Z" && commands[0].length > 2) {
    	virtualCloseLine = ["L", startPoint.x, startPoint.y];
    	commands[commands.length - 1] = virtualCloseLine;
    }
    
    // We always use the first command (but it may be mutated)
    resultCommands.push(commands[0]);
    
    for (var cmdIndex=1; cmdIndex < commands.length; cmdIndex++) {
    	var prevCmd = resultCommands[resultCommands.length - 1];

    	var curCmd = commands[cmdIndex];

      // Handle closing case
      var nextCmd = (curCmd == virtualCloseLine)
      ? commands[1]
      : commands[cmdIndex + 1];
      
      // Nasty logic to decide if this path is a candidite.
      if (nextCmd && prevCmd && (prevCmd.length > 2) && curCmd[0] == "L" && nextCmd.length > 2 && nextCmd[0] == "L") {
        // Calc the points we're dealing with
        var prevPoint = pointForCommand(prevCmd);
        var curPoint = pointForCommand(curCmd);
        var nextPoint = pointForCommand(nextCmd);
        
        // The start and end of the cuve are just our point moved towards the previous and next points, respectivly
        var curveStart, curveEnd;
        
        if (useFractionalRadius) {
        	curveStart = moveTowardsFractional(curPoint, prevCmd.origPoint || prevPoint, radius);
        	curveEnd = moveTowardsFractional(curPoint, nextCmd.origPoint || nextPoint, radius);
        } else {
        	curveStart = moveTowardsLength(curPoint, prevPoint, radius);
        	curveEnd = moveTowardsLength(curPoint, nextPoint, radius);
        }
        
        // Adjust the current command and add it
        adjustCommand(curCmd, curveStart);
        curCmd.origPoint = curPoint;
        resultCommands.push(curCmd);
        
        // The curve control points are halfway between the start/end of the curve and
        // the original point
        var startControl = moveTowardsFractional(curveStart, curPoint, .5);
        var endControl = moveTowardsFractional(curPoint, curveEnd, .5);

        // Create the curve 
        var curveCmd = ["C", startControl.x, startControl.y, endControl.x, endControl.y, curveEnd.x, curveEnd.y];
        // Save the original point for fractional calculations
        curveCmd.origPoint = curPoint;
        resultCommands.push(curveCmd);
    } else {
        // Pass through commands that don't qualify
        resultCommands.push(curCmd);
    }
}

    // Fix up the starting point and restore the close path if the path was orignally closed
    if (virtualCloseLine) {
    	var newStartPoint = pointForCommand(resultCommands[resultCommands.length-1]);
    	resultCommands.push(["Z"]);
    	adjustCommand(resultCommands[0], newStartPoint);
    }
} else {
	resultCommands = commands;
}

return resultCommands.reduce(function(str, c){ return str + c.join(" ") + " "; }, "");
};


/* ------------------------------------------------------------------------------------------------------------ */

var FlowchartButton = React.createClass({

	componentDidMount() {
		$(this.refs.getStarted).attr('track', 'Get Started');
	},

	_onClick: function(e){
		this.props._onClick(this.props.line);
	},
	render: function(){
		if(this.props.line == 0) return(
			<div className={"svgline line"+this.props.line}>
			<div>
			<div ref="getStarted" className={"flowchart_button start buttonhover"} onClick={this._onClick}>
			GET STARTED
			</div>
			</div>
			<svg style={{width:this.props.width,height:this.props.height}}>
			<path d={this.props.path} />
			</svg>
			</div>
			)
			else {
				var path = roundPathCorners(this.props.path,50,false);
			//var path = this.props.path;
			return(
				<div className={"svgline line"+this.props.line}>
				<div className={"flowchart_button button"+this.props.line} onClick={this._onClick}>
				<div className='copy'>
				<div dangerouslySetInnerHTML={{__html:this.props.copy}}></div>
				<div className="sep"></div>
				</div>
				<img className='bg' src={window.assets_dir+'/flowchart/'+this.props.image} />
				</div>
				<svg style={{width:this.props.width,height:this.props.height}}>
				<path d={path} />
				</svg>
				</div>
				)
		}
	}
});

function createLineTween(svg, stars) {
	var tl = new TimelineMax();

	var path = svg.children('path')[0];
	var pathObject = {length:0, pathLength:path.getTotalLength()};


	var tween = TweenMax.to(pathObject, 1.5, {length:pathObject.pathLength, onStart:function(){
		var star = svg.children('polygon');
		tl.add(TweenMax.to(star,0.1,{autoAlpha:1}),tween.time());
	},onUpdate:function(pathObject, path){
		drawLine(pathObject, path);
	},onUpdateParams:[pathObject, path], immediateRender:true});

	tl.add(tween);
	return tl;
};

function drawLine(obj, path) {
	// console.log(Math.round(obj.length*100/obj.pathLength)/100);
	//var ratio = Math.round(obj.length*100/obj.pathLength)/100;
	path.style.stroke = '#1c75bc';
	path.style.strokeDasharray = [obj.length, obj.pathLength].join(' ');
  	//return ratio;
  };

  function createRandomStars(svg) {
	// oripoints is on 100X100 svg. If the ratio is 0.25, the final one is on 25X25 svg
	var oripoints = '0 -45 -30 45 45 -12 -45 -12 30 45';
	var totalGroup = randRange(2,4);
	for (var i=0; i<totalGroup; i++){
		var randPercentage = randRange(2,9)/10;
		var eachGroup = randRange(3,6);
		for (var j=0; j<eachGroup; j++) {
			//var ratio = randRange(15,25)/100;
			var ratio = [0.1,0.2][Math.random()<0.7?0:1];
			var stop = svg.getPointAtLength(svg.getTotalLength()*randPercentage);
			var center = {x:stop.x+randRange(-75,75),y:stop.y+randRange(-75,75)};
			var color = ['#1d71b5','#f32268'][Math.random()<0.6?0:1];
			var arr = oripoints.split(' ').map(function(e,ii){
				if(ii%2 == 0) return e*ratio+center.x;
				else return e*ratio+center.y;
			});
			var obj = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
			obj.setAttributeNS(null, "class", "star");
			obj.setAttributeNS(null, "points", arr.join(' '));
			obj.setAttributeNS(null, "style", 'fill:'+color);
			$(svg).parent().append(obj);
		}
	}
}

window.showAll = function() {
	$('.flowchart_image').css({'opacity':1,'visibility':'visible'});
	$('.flowchart_container .deco').css({'opacity':1,'visibility':'visible'});
	$('.flowchart_container .flowchart_button').css({'opacity':1,'visibility':'visible'});
	$('.page-flowchartnational .flowchart_container svg path').css('stroke','#1c75bb');
}



var MainFlownational = React.createClass({
	_headerHeightDesktop:0,
	_headerHeightMobile:0,
	_containerWidth:10500,
	_containerHeight:10500,
	_initZoom:0.09, // so when the height of the outer div = 1050, _ratio = 1;
	_hasStarted:0,
	_ratio:1,
	_line:0,
	_animationCollection:[],
	_clickTimeout:0,

	getInitialState: function() {
		return {
			outerHeight:this._containerHeight*this._initZoom
		}
	},

	componentWillMount:function(){
	},

	componentDidMount: function() {
		window.addEventListener("resize", this._updateDimensions);
		this.tl = [];
		this._dotpath = [];
		this._updateDimensions();
		this._createAllStars();
		this._createAllAddons();


		var tl1 = new TimelineMax();
        //animation:
        var $star = $('.page-flowchartnational .flowchart_container .flowchart_image.image0 .bg');
        var $img = $('.page-flowchartnational .flowchart_container .flowchart_image.image0 .img');
        var $button = $('.page-flowchartnational .flowchart_button.start');
        tl1.to($star,.1,{autoAlpha:1, scale:0},"+1.9");
        tl1.to($img,.1,{autoAlpha:1, scale:0},"+1.9");
        tl1.to($button,.1,{autoAlpha:1, scale:0},"+1.9");
        tl1.to($star, .2, {scale:1.2,ease:Power2.easeOut},"+2");
        tl1.to($star, .2, {scale:1},"+2.2");
        tl1.to($img, .2, {scale:1.2,ease:Power2.easeOut},"+2.4");
        tl1.to($img, .2, {scale:1},"+2.6");
        tl1.to($button, .2, {scale:1.2,ease:Power2.easeOut},"+2.8");
        tl1.to($button, .2, {scale:1},"+3");
        tl1.to($('.page-flowchartnational .flowchart_container .flowchart_image.image0 .sponsor'),.1,{autoAlpha:1});


        // var $button = $('.page-flowchartnational .flowchart_button.start');
        // tl.to($button,.5,{boxShadow:'0 0 40px #e11a2b',ease:Bounce.easeOut});
        // tl.to($button,.5,{boxShadow:'0 0 40px transparent'},"+0.5");
        // this._animationCollection.push($button);
        tl1.play(0);

    	// startAnimations();
    },

    componentWillUnmount: function() {
    	window.removeEventListener("resize", this._updateDimensions);
    },

    _createAllStars: function(){
    	$('.page-flowchartnational .flowchart_container svg').each(function(i){
    		var path = $(this).children('path')[0];
    		createRandomStars(path);

            // var path = $(this).children('path')[0];
            // if(MainData.line[i].stars) {
            //     for(var j=0; j<MainData.line[i].stars.length; j++) createStars(path,MainData.line[i].stars[j],j);
            // }
        })

    },

    _createAllAddons: function(){
        // bubbles
        var containers1 = ['.page-flowchartnational .deco.image6deco2','.page-flowchartnational .deco.image16deco5','.page-flowchartnational .deco.image19deco2'];
        $.each(containers1,function(i,e){
        	$(e).append('<div class="bubble bubble1"><div class="bubble_inner"></div></div>');
        	$(e).append('<div class="bubble bubble2"><div class="bubble_inner"></div></div>');
        });
        // glowing dot:
        $('.page-flowchartnational .deco.image11deco1').append('<div class="glowingdot"></div>')
    },

    _updateDimensions: function(){
    	var documentElement = document.documentElement,
    	body = document.getElementsByTagName('body')[0],
        //width = window.innerWidth || documentElement.clientWidth || body.clientWidth;

        // if(width <750) {
        // 	console.log(">>>>>",this._hasStarted);
        // 	if(this._hasStarted) this.setState({ratio: 0.8});
        // 	else this.setState({ratio: 0.5});
        // }
        // else {
        // 	// when window.width = 1600, the container's ratio will be 1, with the width = 800.
        // 	// this.setState({ratio: Math.round(width*100/1600)/100});
        // 	// this.props.updateDimensions( Math.round(width*100/1600)/100 );
        // 	this.setState({ratio: 1});
        // }

        height = window.innerHeight || documentElement.clientHeight || body.clientHeight;
        var hh = this._headerHeightDesktop;
        var zoom = 100;
        this._ratio = Math.round((height-hh)*zoom/(this._containerHeight*this._initZoom))/100;

        if(this._hasStarted) var dimen = MainData.path[this._line][MainData.path[this._line].length-1];
        else var dimen = MainData.path[0][0];
        var ra = Math.round((height-hh)*zoom/(this._containerHeight*this._initZoom))/100;
        this.setState({
        	outerHeight:height-hh
        });
        //if(this._hasStarted){
        	TweenMax.to($(this.refs.flowchart), .5, {x: dimen.x*ra, y:dimen.y*ra, scale:ra});
		//}

	},

	_onClick:function(line){
		var that = this;

		var previousDot = this._dotpath.length>0?this._dotpath[this._dotpath.length-1]:0;
		var previousDotObj = $.grep(MainData.dot, function(e){ return e.id == previousDot; });

		var nextDotComp = $.grep(previousDotObj[0].popup,function(e){
			return e.button == line;
		});
		//var i = previousDotObj[0].lines.indexOf(line);

		if(nextDotComp.length){
			var nextDot = nextDotComp[0].nextDot;
			this._dotpath.push(nextDot);
			this._line = line;
			var nextDotObj = $.grep(MainData.dot, function(e){ return e.id == nextDot; });
			console.log(">>>>current dot: ",nextDot);

			var tl = new TimelineMax();
			//var svgg = $(e).parent().siblings('svg').children('path')[0];
			var svgg = $('.page-flowchartnational .flowchart_container .line'+line+' svg');

			var stars = ($.grep(MainData.line,function(e){return e.id == line})[0]).stars ||[];
			tl.add(createLineTween(svgg,stars));

			var ra = this._ratio;
			var path = $.map(MainData.path[line],function(e,i){
				return {x: e.x*ra, y: e.y*ra};
			});

			var start_tween = TweenMax.to($(this.refs.flowchart), 1.5, {scale:ra, bezier:path, ease:SlowMo.easeInOut});
			tl.add(start_tween,"0");


			if(line == 0){
				this._hasStarted = 1;
				tl.to($(this.refs.backbutton),.1,{autoAlpha:1},"0");
				tl.to($(this.refs.restartbutton),.1,{autoAlpha:1},"0");
			}
			else{
				tl.to($('circle'),.1,{},"0");
			}
            // tl.to($('.page-flowchartnational .flowchart_image.image'+nextDot),0.1,{autoAlpha:1});
            tl.to($('.page-flowchartnational .flowchart_image.image'+nextDot),.2,{autoAlpha:1,scale:1.2, ease:Power2.easeOut},"+1.6");
            tl.to($('.page-flowchartnational .flowchart_image.image'+nextDot),.2,{scale:1},"+1.8");

			//show children:
			var children =nextDotObj[0].popup;
			// jj is the classname of the deco
			var jj=0;
			$.each(children,function(i,e){
				jj++;
				var d=2.1+0.2*i;
				if(e.deco){
					tl.set($('.page-flowchartnational .flowchart_container .deco.image'+nextDot+'deco'+jj),{scale:0.2},0);
					// tl.to($('.page-flowchartnational .flowchart_container .deco.image'+nextDot+'deco'+jj),.1,{autoAlpha:1,scale:1.1, ease:Quint.easeOut},"+"+d);
					// tl.to($('.page-flowchartnational .flowchart_container .deco.image'+nextDot+'deco'+jj),.1,{scale:1, ease:Quint.easeInOut},"+"+(d+0.1));
					tl.to($('.page-flowchartnational .flowchart_container .deco.image'+nextDot+'deco'+jj),.2,{autoAlpha:1,scale:1.2, ease:Power2.easeOut},"+"+d);
					tl.to($('.page-flowchartnational .flowchart_container .deco.image'+nextDot+'deco'+jj),.2,{scale:1, ease:Bounce.easeOut},"+"+(d+0.2));
				}
				else {
					jj--;
					tl.set($('.page-flowchartnational .flowchart_container .flowchart_button.button'+e.button),{scale:0.2},0);
					tl.to($('.page-flowchartnational .flowchart_container .flowchart_button.button'+e.button),.2,{autoAlpha:1,scale:1.2, ease:Power2.easeOut},"+"+d);
					tl.to($('.page-flowchartnational .flowchart_container .flowchart_button.button'+e.button),.2,{scale:1, ease:Bounce.easeOut},"+"+(d+0.2));
				}
			});
			if(nextDot==14||nextDot==15||nextDot==16||nextDot==17||nextDot==19||nextDot==21||nextDot==22||nextDot==23){
				tl.to($('.page-flowchartnational .flowchart_container .flowchart_image.image'+nextDot+' .subtitle'),0.2,{autoAlpha:1});
				tl.to($('.page-flowchartnational .flowchart_container .flowchart_image.image'+nextDot+' .title'),0.2,{autoAlpha:1});
				tl.to($('.page-flowchartnational .flowchart_container .flowchart_image.image'+nextDot+' .copy'),0.2,{autoAlpha:1});
				tl.to($('.page-flowchartnational .flowchart_container .flowchart_image.image'+nextDot+' .share'),0.2,{autoAlpha:1});
			}
			this.tl.push(tl);
			tl.play(0);

			clearTimeout(this._clickTimeout);

			this._clickTimeout = setTimeout(function(){
				that._startAnimations();
			},(2.1+0.4*children.length)*1000);
		}
	},

	_onBack:function(){
		var that = this;
		var tl = this.tl[this.tl.length-1];
		tl.reverse();
		this.tl.pop();
		this._dotpath.pop();
		//var currentDotObj = $.grep(MainData.dot, function(e){ return e.id == this._dotpath[this._dotpath.length-1]; });
		//var children =currentDotObj[0].popup;
		//this._line--;
		setTimeout(function(){
			that._startAnimations();
		},2000);
		if(this.tl.length==0){
			this._hasStarted = 0;
		}
	},

	_onRestart:function(){
		AutoTracker.trackSp('imp-_-fireworks-_-yourideaof4julyfun_playagain');
		var that = this;
		this._hasStarted = 0;
		this.tl = [];
		this._dotpath = [];
		this._line = 0;

		TweenMax.killTweensOf($(this.refs.flowchart));
		TweenMax.killTweensOf($('.flowchart_button'));
		TweenMax.killTweensOf($('.flowchart_image'));

		TweenMax.killTweensOf(this._animationCollection);
		$.each(this._animationCollection,function(i, e){
			if(e.kill) e.kill();
		});


		TweenMax.set($(this.refs.backbutton),{autoAlpha:0});
		TweenMax.set($(this.refs.restartbutton),{autoAlpha:0});
		TweenMax.set($(this.refs.flowchart), {x:0, y:0});
		TweenMax.set($('.page-flowchartnational .flowchart_button:not(.start)'),{autoAlpha:0});
		TweenMax.set($('.page-flowchartnational .flowchart_image'),{autoAlpha:0});
		TweenMax.set($('.page-flowchartnational .flowchart_container .deco'),{autoAlpha:0});
		$('.page-flowchartnational .flowchart_container svg path').css('stroke','none');


		// var image0ScaleTarget = {t:1};
		// TweenMax.to(image0ScaleTarget,.5,{t:0.5,onUpdate:function(){
		// 	that.setState({
		// 		image0Scale:image0ScaleTarget.t
		// 	});
		// }});
		TweenMax.set($('.page-flowchartnational .flowchart_image.image0'),{autoAlpha:1});

		this._updateDimensions();
	},

	_startAnimations:function(){
		var that = this;

		var defineAnimation =[
		{image:1,obj:['.page-flowchartnational .deco.image1deco1','.page-flowchartnational .deco.image1deco2','.page-flowchartnational .deco.image1deco3'],action:AllAnimations.FigureJump},
		{image:2,obj:['.page-flowchartnational .deco.image2deco1','.page-flowchartnational .deco.image2deco2','.page-flowchartnational .flowchart_button.button4','.page-flowchartnational .flowchart_button.button5'],action:AllAnimations.BalloonMove},
		{image:3,obj:['.page-flowchartnational .deco.image3deco1','.page-flowchartnational .deco.image3deco2'],action:AllAnimations.FigureJump},
		{image:4,obj:['.page-flowchartnational .deco.image4deco1'],action:AllAnimations.HeartBeat},
		{image:6,obj:['.page-flowchartnational .deco.image6deco2'],action:AllAnimations.BubbleRise},
		{image:7,obj:['.page-flowchartnational .deco.image7deco1'],action:AllAnimations.HeartBeat},
		{image:8,obj:['.page-flowchartnational .deco.image8deco1','.page-flowchartnational .deco.image8deco2','.page-flowchartnational .deco.image8deco3','.page-flowchartnational .deco.image8deco4'],action:AllAnimations.StarFlash},
		{image:10,obj:['.page-flowchartnational .deco.image10deco1','.page-flowchartnational .deco.image10deco2','.page-flowchartnational .flowchart_button.button21','.page-flowchartnational .flowchart_button.button22'],action:AllAnimations.BalloonMove},
		{image:11,obj:['.page-flowchartnational .deco.image11deco1'],action:AllAnimations.GlowingdotMove},
		{image:12,obj:['.page-flowchartnational .deco.image12deco2','.page-flowchartnational .deco.image12deco3'],action:AllAnimations.FigureJump},
		{image:13,obj:['.page-flowchartnational .deco.image13deco1','.page-flowchartnational .deco.image13deco2'],action:AllAnimations.BottleShake},
		{image:14,obj:['.page-flowchartnational .deco.image14deco2'],action:AllAnimations.CircleRotate},
		{image:16,obj:['.page-flowchartnational .deco.image16deco5'],action:AllAnimations.BubbleRise},
		{image:17,obj:['.page-flowchartnational .deco.image17deco1'],action:AllAnimations.BottleShake},
		{image:19,obj:['.page-flowchartnational .deco.image19deco2'],action:AllAnimations.BubbleRise},
		{image:21,obj:['.page-flowchartnational .deco.image21deco3','.page-flowchartnational .deco.image21deco4','.page-flowchartnational .deco.image21deco5','.page-flowchartnational .deco.image21deco6'],action:AllAnimations.StarFlash},
		{image:22,obj:['.page-flowchartnational .deco.image22deco3','.page-flowchartnational .deco.image22deco4','.page-flowchartnational .deco.image22deco5','.page-flowchartnational .deco.image22deco6','.page-flowchartnational .deco.image22deco7','.page-flowchartnational .deco.image22deco8'],action:AllAnimations.StarFlash},
		{image:23,obj:['.page-flowchartnational .deco.image23deco1','.page-flowchartnational .deco.image23deco2'],action:AllAnimations.BottleShake}
		];

		var curimage = this._dotpath[this._dotpath.length-1];
		console.log("start animation for dot:",curimage);

		TweenMax.killTweensOf(this._animationCollection);
		$.each(this._animationCollection,function(i, e){
			if(e.kill) e.kill();
		});
		this._animationCollection = [];

		var ani = $.grep(defineAnimation, function(e){ return e.image == curimage; });
		var result;

		if(ani.length && ani[0].obj) {
			$.each(ani[0].obj,function(i,e){
				TweenMax.killTweensOf($(e));
				if(curimage == 1 || curimage == 3) {
					if(i == 0) result = ani[0].action($(e),{repeatDelay:4.5, delay:2});
					else if(i == 1)  result = ani[0].action($(e),{repeatDelay:6,delay:1.3});
					else  result = ani[0].action($(e),{repeatDelay:7,delay:2.5});
				}
				else if((curimage == 2 && i>1) || (curimage == 10 && i>1)) {
					result = ani[0].action($(e),{newTop:[-170,-200]});
				}

				else if(curimage == 6) {
					result = ani[0].action($(e),{xRange:[0.15,0.35]});
				}
				else if(curimage == 8 || curimage == 21 || curimage == 22) result = ani[0].action($(e),{duration:0.1+i*0.03,repeatDelay:0.3+i*0.05});
				else if(curimage == 12) result = ani[0].action($(e),{lastTop:-65});
				else if(curimage == 13 && i == 0) result = ani[0].action($(e),{rotation:10});
				else if(curimage == 16) result = ani[0].action($(e),{xRange:[0.35,0.6],yRange:[0.2,0.9]});
				else if(curimage == 17) result = ani[0].action($(e),{rotation:-20});
				else if(curimage == 19) result = ani[0].action($(e),{xRange:[0.43,0.67],yRange:[0.58,0.78]});

				else result = ani[0].action($(e));

				if($.isArray(result)) {
					for (var jj=0; jj<result.length; jj++) that._animationCollection.push(result[jj]);
				}
			else that._animationCollection.push(result);
		});
		}

	},
	_onShareFacebook:function(e){
	},
	_onShareTwitter:function(e){
	},
	render: function() {
		var that = this;
		var imageslist = MainData.dot.map(function(e,i){

			if(e.id==0) return (
				<div key={e.id} className={"flowchart_image image"+e.id}>
				<div className="copy" dangerouslySetInnerHTML={{__html:e.copy}}></div>
				<img className="bg" src={window.assets_dir+'/flowchart/national_bigstar.png'} />
				<img className="img" src={window.assets_dir+'/flowchart/'+e.image} />
				<div className="sponsor">
				<span>BROUGHT TO YOU BY Ting</span>
				</div>
				</div>
			)
			else if(e.type) return (
					<div key={e.id} className={"flowchart_image result image"+e.id}>
					<div className="subtitle" dangerouslySetInnerHTML={{__html:e.subtitle}}></div>
					<div className="title" dangerouslySetInnerHTML={{__html:e.title}}></div>
					<div className="copy" dangerouslySetInnerHTML={{__html:e.copy}}></div>
					<img className="bg" src={window.assets_dir+'/flowchart/'+e.image} />
					<div className="share">
					<img className="img" src={e.sharebg?window.assets_dir+'/flowchart/'+e.sharebg:''} />
					<span className="text">SHARE THIS RESULT</span>
					<span className="sep"></span>
					<span onClick={that._onShareFacebook} className={"result"+e.id+" share_facebook"}></span>
					<span className="sep"></span>
					<span onClick={that._onShareTwitter} className={"result"+e.id+" share_twitter"}></span>
					</div>
					</div>

			)
			else return (
				<div key={e.id} className={"flowchart_image image"+e.id}>
				<div className="copy" dangerouslySetInnerHTML={{__html:e.copy}}></div>
				<img className="bg" src={window.assets_dir+'/flowchart/'+e.image} />
				</div>
			)
		});
		var decoslist = [];
		var decokey = 0;
		for(var k=0;k<MainData.dot.length;k++){
			if(MainData.dot[k].popup) {
				var jj=0;
				for(var kk=0;kk<MainData.dot[k].popup.length;kk++){
					jj++;
					if(MainData.dot[k].popup[kk].deco) {
						decoslist.push(<div key={decokey} className={"deco image"+k+"deco"+jj}><img src={window.assets_dir+'/flowchart/'+MainData.dot[k].popup[kk].deco} /></div>);
    					decokey ++;
    				}
    				else jj--;
    			}
    		}
    	}

    	var lineslist = MainData.line.map(function(e,i){
    		var image=e.image?e.image:e.svg?e.svg:'';
    		return (<FlowchartButton line={i} key={i} _onClick={that._onClick} path={e.path} copy={e.copy} width={e.width} height={e.height} image={image} />)
    	});

    	return (
    		<div className="flowchart_outer" style={{height:this.state.outerHeight}}>
    		<div className="flowchart_container" ref="flowchart" style={{width:this._containerWidth,height:this._containerHeight,marginLeft:-(this._containerWidth/2),marginTop:-(this._containerHeight/2)}}>
    		{decoslist}
    		{lineslist}
    		{imageslist}
    		</div>
    		<div className="center"></div>
    		<div className="flowchart_button back" onClick={this._onBack} ref="backbutton"><img src={window.assets_dir+'/flowchart/icon_national_previous.png'} /><span>PREVIOUS</span></div>
    		<div className="flowchart_button restart" onClick={this._onRestart} ref="restartbutton"><img src={window.assets_dir+'/flowchart/icon_national_restart.png'} /><span>PLAY AGAIN</span></div>
    		</div>
    		);
    }
});

ReactDOM.render(<MainFlownational />,document.getElementById('flowchartnational'));
              
            
!
999px

Console