/*** page styling ***/
* {
    margin:0;
    padding:0;
}
a {
    color:#8b0404;
    text-decoration:none;
}
body {
    font-family:'Open Sans Condensed';
    font-weight:300;  
    
    -ms-touch-action: manipulation;
    touch-action: manipulation;    
}
#linkbar {
    background:#fff;
}
#linkbar h1 {
    float:left;
    font-size:1.9em;
    font-weight:300;
}
#inner-linkbar {
    box-sizing:border-box;    
    max-width:1050px;
    margin:0px auto;
    padding:30px 15px 15px;    
}
#inner-linkbar:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}
#control-links {
    float:right;
    padding-top:12px;
}
#control-links a {
    margin-left:15px;
}
#control-links .playPause-icon {
    width:auto;
    height:14px;
    stroke:#569e26;    
    -webkit-transform:translateY(7%);
    -ms-transform:translateY(7%);
    transform:translateY(7%);
}
#control-links .showHide-icon {
    color:#000;
    font:130% 'Arial', Sans-serif;
}
main { /* shitty ie need this */
    display:block; 
}
#wrapper {
    background:#730005; 
    box-shadow:0px -1px 5px #240102;  
}
#inner-wrapper {
    box-sizing:border-box;                
    width:100%;
    max-width:1200px;
    margin:20px auto;
    padding:50px 10px;
}
#inner-wrapper:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}   
.box {
    position:relative;                
    box-sizing:border-box;
    width:33%;
    height:370px;
    float:left;
    margin:0.1666666665%;
    padding:25px;
    border:0px solid #ff6600;
    border-radius:3px;
    background:#fff;
    overflow:hidden;
}
.box.play,
.no-js .box:hover {
    border:3px solid #ff6600; 
    box-shadow:inset 0px 0px 3px #9a3d00;    
}  
.box .title {
    margin-bottom:25px;
}
.box .title:after {
    content:'.';
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
}   
.box .btn-play {
    display:block;
    width:15px;
    height:15px;
    padding:10px;
    float:left;    
    background:url(../img/play-icon.svg) center center no-repeat;
    background-size:60% auto;
    cursor:pointer;    
}
.box.play .btn-play { 
    background:url(../img/pause-icon.svg) center center no-repeat;   
    background-size:auto 60%;
}           
.box h2 {
    font-weight:300;
}
.box .more {
    float:right;
    font:700 30px 'Arial', sans-serif;
    cursor:pointer;
    padding:0px 10px; 
    
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;    
    
    -webkit-transform:translateY(8%) rotate(0deg);
    -ms-transform:translateY(8%) rotate(0deg);
    transform:translateY(8%) rotate(0deg);

    -webkit-transition-duration:0.3s;
    transition-duration:0.3s;
}
.box .more.open {
    -webkit-transform:translateY(8%) rotate(315deg);                
    -ms-transform:translateY(8%) rotate(315deg);                
    transform:translateY(8%) rotate(315deg);
}            
.box .text-wrap {
    box-sizing:border-box;
    position:absolute; bottom:0; left:0;
    max-height:295px;
    overflow:auto;
    width:100%;
    padding:20px;
    background:rgba(85,85,85,0.8);
    border-top:1px solid #2d2d2d;
    color:#FFF;
    opacity:1; 

    -webkit-transition-duration:0.3s;
    transition-duration:0.3s;                
}
.box .text-wrap p {
    font-size:19px;
}
.box .text-wrap.hidden {
    opacity:0;
    -webkit-transform:translateY(100%);                
    -ms-transform:translateY(100%);                
    transform:translateY(100%);
}
.box .bg-number {
    position:absolute; bottom:-120px; right:-30px;
    font:700 300px 'Open Sans Condensed';
    color:#ededed;
    letter-spacing:-20px;
    z-index:-1;
}
footer {
    box-sizing:border-box;
    padding:15px 30px 30px;
    text-align:center;
}
footer h3 {
    font-weight:300;
}

/*** tablet ***/
@media only screen and (max-width: 767px) and (min-width: 481px) { 
    .box {
        width:49%;
        margin:0.5%;
    }            
}

/*** phone ***/
@media only screen and (max-width: 480px) { 
    
    #linkbar {
    text-align:center;
    }
    #linkbar h1 {
        float:none;
    }
    #control-links {
        float:none;
    }    
    .box {
        width:100%;
        float:none;
        margin-bottom:20px;
    }            
} 

/*** general ***/
.ball {
    width:50px;
    height:50px;
    border-radius:100%;
    background:#8b0404;
}            

/*** one ***/
#one {
}
#one .ball {
    margin:0px auto;
} 
#one .ball {
    -webkit-animation: one 1s linear infinite alternate;  
    animation: one 1s linear infinite alternate;
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;
}
#one.play .ball,
.no-js #one:hover .ball {
    -webkit-animation-play-state: running;    
    animation-play-state: running;                                
}

/*** two ***/            
#two {
}   
.stick {
    position:absolute; top:60px; left:10px;
    width:50px;
    height:10px;
    background:#555;
    margin:100px auto auto 20px;                
}
#two .ball {
    position:absolute; top:139px; left:80px;
}
#two .ball {
    -webkit-animation: two 1s linear infinite alternate;  
    animation: two 1s linear infinite alternate;  
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;    
}
#two.play .ball,
.no-js #two:hover .ball {
    -webkit-animation-play-state: running;    
    animation-play-state: running;                  
}
#two .stick {
    -webkit-animation: stick 2s linear infinite;  
    animation: stick 2s linear infinite;   
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;    
} 
#two.play .stick,
.no-js #two:hover .stick {
    -webkit-animation-play-state: running;    
    animation-play-state: running;                  
} 

/*** three ***/            
#three {
}
#three .ball-wrap {
padding:5%;
}
#three .ball {
    float:left;  
    margin:3px;
}           
#three .ball {
    -webkit-animation: fade 1s linear infinite alternate;  
    animation: fade 1s linear infinite alternate; 
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;     
} 
#three.play .ball,
.no-js #three:hover .ball {
    -webkit-animation-play-state: running;    
    animation-play-state: running;                 
} 
#three .ball:last-child {
    opacity:1;
    -webkit-animation: three 1s linear infinite alternate;  
    animation: three 1s linear infinite alternate;  
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;     
}
#three.play .ball:last-child,
.no-js #three:hover .ball:last-child {
    -webkit-animation-play-state: running;    
    animation-play-state: running;                 
}

/*** four ***/
#four { 
}
#four .ball {
    position:absolute;
    opacity:0;                
}
#four .ball.primary {
}
#four .ball.secondary {

}        
#four .ball:nth-of-type(1) {
    top:26.25%; left:21.25%;
    opacity:1;
}  
#four .ball:nth-of-type(2) {
    top:32.5%; left:27.5%;
}
#four .ball:nth-of-type(3) {
    top:38.75%; left:33.75%;
}
#four .ball:nth-of-type(4) {
    top:45%; left:40%;
}
#four .ball:nth-of-type(5) {
    top:51.25%; left:46.25%;
}
#four .ball:nth-of-type(6) {
    top:57.5%; left:52.5%;  
}
#four .ball:nth-of-type(7) {
    top:63.75%; left:58.75%;
} 
#four .ball:nth-of-type(8) {
    top:70%; left:65%;
} 
#four .ball:nth-of-type(9) {
    top:76%; left:71.25%;
} 
#four .ball:nth-of-type(5) {
    -webkit-animation: four-one 3s linear infinite;  
    animation: four-one 3s linear infinite;  
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;    
}          
#four .ball:nth-of-type(9) {
    -webkit-animation: four-two 3s linear infinite;  
    animation: four-two 3s linear infinite;   
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;    
}
#four .ball:nth-of-type(2) {
    -webkit-animation: four-three 3s linear infinite;  
    animation: four-three 3s linear infinite;     
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;    
}
#four .ball:nth-of-type(3) {
    -webkit-animation: four-four 3s linear infinite;  
    animation: four-four 3s linear infinite;  
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;    
}
#four .ball:nth-of-type(4) {
    -webkit-animation: four-five 3s linear infinite;  
    animation: four-five 3s linear infinite; 
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;    
}
#four .ball:nth-of-type(6) {
    -webkit-animation: four-six 3s linear infinite;  
    animation: four-six 3s linear infinite; 
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;    
}
#four .ball:nth-of-type(7) {
    -webkit-animation: four-seven 3s linear infinite;  
    animation: four-seven 3s linear infinite;
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;    
}
#four .ball:nth-of-type(8) {
    -webkit-animation: four-eight 3s linear infinite;  
    animation: four-eight 3s linear infinite;  
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;    
} 

#four.play .ball:nth-of-type(5),
.no-js #four:hover .ball:nth-of-type(5),
#four.play .ball:nth-of-type(9),
.no-js #four:hover .ball:nth-of-type(9),
#four.play .ball:nth-of-type(2),
.no-js #four:hover .ball:nth-of-type(2),
#four.play .ball:nth-of-type(3),
.no-js #four:hover .ball:nth-of-type(3),
#four.play .ball:nth-of-type(4),
.no-js #four:hover .ball:nth-of-type(4),
#four.play .ball:nth-of-type(6),
.no-js #four:hover .ball:nth-of-type(6),
#four.play .ball:nth-of-type(7),
.no-js #four:hover .ball:nth-of-type(7),
#four.play .ball:nth-of-type(8),
.no-js #four:hover .ball:nth-of-type(8) {
    -webkit-animation-play-state: running;    
    animation-play-state: running;    
}

/*** five ***/
#five {
}
#five .ball-container {
    position:absolute; top:160px; left:30px;
}
#five .ball-container {
    -webkit-animation: five 2s infinite;  
    animation: five 2s infinite;  
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;    
}
#five.play .ball-container,
.no-js #five:hover .ball-container {
    -webkit-animation-play-state: running;    
    animation-play-state: running;          
}
#five .ball-container .flag{
    position:relative;
    width:2px;
    height:80px;
    margin-left:24px;
    background:#555;
    
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;   
}
#five .ball-container .flag {
    -webkit-animation: flag 2s infinite;  
    animation: flag 2s infinite;   
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;     
}
#five.play .ball-container .flag,
.no-js #five:hover .flag {
    -webkit-animation-play-state: running;    
    animation-play-state: running;      
}
#five .ball-container .flag:before{
    content:"\A";
    position: absolute;    
    left:-10px;
    border-style: solid;
    border-width: 7.5px 10px 7.5px 0;
    border-color: transparent #555555 transparent transparent;
}
#five .ball-container .flag:before {
    -webkit-animation: flag-direction 2s infinite;  
    animation: flag-direction 2s infinite; 
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;     
}
#five.play .ball-container .flag:before,
.no-js #five:hover .ball-container .flag:before {
    -webkit-animation-play-state: running;    
    animation-play-state: running; 
}

/*** six ***/
#six {
}
#six .ball {
    margin:0px auto;
}
#six .ball {
    -webkit-animation: six 1.5s ease-in-out infinite alternate;  
    animation: six 1.5s ease-in-out infinite alternate;   
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;    
} 
#six.play .ball,
.no-js #six:hover .ball {
    -webkit-animation-play-state: running;    
    animation-play-state: running;                               
} 

/*** seven ***/
#seven {
}
#seven .title {
    position:relative;
    z-index:3;
}
#seven .text-wrap {
    z-index:4;
}
#seven .ball {
    margin:0px auto;
}
#seven .ball-container {
    position:relative;
    width:100%;
    margin-top:10px;
    
    -ms-transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;  
    
    -webkit-transform: rotate(30deg);     
    -ms-transform: rotate(30deg);   
    transform: rotate(30deg);  
    
    z-index:1;
}
#seven .ball-container {
    -webkit-animation: seven 1s ease-in-out infinite alternate;  
    animation: seven 1s ease-in-out infinite alternate; 
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;     
}
#seven.play .ball-container,
.no-js #seven:hover .ball-container {
    -webkit-animation-play-state: running;    
    animation-play-state: running;      
}
#seven .line {
    height:140px;
    width:1px;
    margin:0px auto;
    background:#555;        
}
#seven .line:before {
    content:'';
    display:block;
    width:7px;
    height:7px;
    margin-left:-3px;
    background:#555;
    border-radius:3px;
}

/*** eight ***/
#eight {
}
#eight .ball {
    margin:0px auto;
}
#eight .ball-container {
    margin-top:60px;
    text-align:center;
}
#eight .ball-container .ball:nth-child(1) {
    -webkit-transform:translateY(40%);                
    -ms-transform:translateY(40%);                
    transform:translateY(40%);   
    opacity:0.5;    
}
#eight .ball-container .ball:nth-child(2) {
    -webkit-transform:translateX(-170%);                
    -ms-transform:translateX(-170%);                
    transform:translateX(-170%); 
}
#eight .ball-container .ball:nth-child(3) {
    -webkit-transform:translateY(-40%);                
    -ms-transform:translateY(-40%);                
    transform:translateY(-40%);
    opacity:0.5;    
}
#eight .ball-container .ball:nth-child(2) {
    -webkit-animation: eight 1s ease-in-out infinite alternate;  
    animation: eight 1s ease-in-out infinite alternate;  
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;      
}
#eight.play .ball-container .ball:nth-child(2),
.no-js #eight:hover .ball-container .ball:nth-child(2) {
    -webkit-animation-play-state: running;    
    animation-play-state: running;     
}
#eight .ball-container .ball:nth-child(1) {
    -webkit-animation: toTop 1s ease-in-out infinite;  
    animation: toTop 1s ease-in-out infinite;
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;      
}
#eight.play .ball-container .ball:nth-child(1),
.no-js #eight:hover .ball-container .ball:nth-child(1) {
    -webkit-animation-play-state: running;    
    animation-play-state: running;    
}
#eight .ball-container .ball:nth-child(3) {
    -webkit-animation: toBottom 1s ease-in-out infinite;  
    animation: toBottom 1s ease-in-out infinite;
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;      
}
#eight.play .ball-container .ball:nth-child(3),
.no-js #eight:hover .ball-container .ball:nth-child(3) {
    -webkit-animation-play-state: running;    
    animation-play-state: running;     
}

/*** nine ***/
#nine {
}
#nine .ball {
    position:absolute; left:50px;
}
#nine .ball-container .ball:first-child {
    top:110px; 
}
#nine .ball-container .ball:nth-child(2) {
    top:180px;
}
#nine .ball-container .ball:last-child {
    top:250px;
}
#nine .ball-container .ball:first-child {
    -webkit-animation: nine 1s infinite alternate steps(15); 
    animation: nine 1s infinite alternate steps(15); 
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;    
}
#nine.play .ball-container .ball:first-child,
.no-js #nine:hover .ball-container .ball:first-child {
    -webkit-animation-play-state: running;    
    animation-play-state: running; 
}
#nine .ball-container .ball:nth-child(2) {
    -webkit-animation: nine 1s infinite alternate steps(25); 
    animation: nine 1s infinite alternate steps(25); 
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;    
}
#nine.play .ball-container .ball:nth-child(2),
.no-js #nine:hover .ball-container .ball:nth-child(2) {
    -webkit-animation-play-state: running;    
    animation-play-state: running; 
}
#nine .ball-container .ball:last-child {
    -webkit-animation: nine 1s infinite alternate steps(50);
    animation: nine 1s infinite alternate steps(50);
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;    
}
#nine.play .ball-container .ball:last-child,
.no-js #nine:hover .ball-container .ball:last-child {
    -webkit-animation-play-state: running;    
    animation-play-state: running; 
}

/*** ten ***/
#ten {
}
#ten .ball {
    margin:0px auto;
} 
#ten .ball {
    -webkit-animation: ten 1s linear infinite alternate;  
    animation: ten 1s linear infinite alternate;   
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;     
}
#ten.play .ball,
.no-js #ten:hover .ball {
    -webkit-animation-play-state: running;    
    animation-play-state: running;                               
}

/*** eleven ***/
#eleven {
    
}
#eleven .text-wrap {
    z-index:3;
}
#eleven .ball-container {
    margin-top:100px;
}
#eleven .ball {
    position:relative;    
    margin:0px auto;
    z-index:2;
}
#eleven .ball:before {
    content:'';
    position:absolute; left:13px;
    width:25px;
    height:49px;
    border-left:2px solid #c74f00;
    border-radius:100%;
    background:transparent;
    opacity:0;
}
#eleven .ball:after {
    content:'';
    position:absolute; top:13px;
    width:49px;
    height:15px;
    border-top:2px solid #c74f00;
    border-radius:100%;
    background:transparent;  
    opacity:0; 
}
#eleven .ball-shadow { 
    position:relative;
    width:40px;
    height:8px;
    margin:0px auto;        
    border-radius:100%;
    background:#373737;
    box-shadow:0px 0px 5px #373737;
    z-index:1;
    -webkit-transform:translateY(-25%);
    -ms-transform:translateY(-25%);
    transform:translateY(-25%);
    opacity:0;
}
#eleven .ball:before,
#eleven .ball:after,
#eleven .ball-shadow {
    -webkit-animation: eleven 1.5s infinite alternate;  
    animation: eleven 1.5s infinite alternate;  
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;    
} 
#eleven.play .ball:before,
.no-js #eleven:hover .ball:before,
#eleven.play .ball:after,
.no-js #eleven:hover .ball:after,
#eleven.play .ball-shadow,
.no-js #eleven:hover .ball-shadow {
    -webkit-animation-play-state: running;    
    animation-play-state: running;                               
} 

/*** twelve ***/
#twelve {
}
#twelve .ball {
    position:relative;
    margin:20px auto;
}

#twelve .ball-container .ball:first-child {
    margin-top:0px;
}
#twelve .ball-container .ball:first-child:before {
    position:absolute; top:20px; left:20px;
    content:'';
    display:block;
    width:5px;
    height:5px;
    border:4px solid #fff;
    border-radius:100%;
    background:#9a3d00;
    opacity:0;    
}
#twelve .ball-container .ball:nth-child(2) {

}
#twelve .ball-container .ball:nth-child(2):before {
    position:absolute; top:20px; left:20px;
    content:'';
    display:block;
    width:5px;
    height:5px;
    border:4px solid #fff;
    border-radius:100%;
    background:#9a3d00;
    opacity:0;
}
#twelve .ball-container .ball:nth-child(3) {
  
}
#twelve .ball-container .ball:nth-child(3):before {
    position:absolute; bottom: -8px; right: 18px;    
    content:'';
    display:block;
    width:15px;
    height:15px;
    border-radius:100%;
    background:#fff; 
    opacity:0;    
}
#twelve .ball-container .ball:nth-child(3):after {
    position:absolute; bottom: 18px; left: -8px;    
    content:'';
    display:block;
    width:15px;
    height:15px;
    border-radius:100%;
    background:#fff; 
    opacity:0;
}
#twelve .ball-container .ball:last-child {
    border-bottom:0px solid #8b0404;
}

#twelve .ball-container .ball:first-child {
    -webkit-animation: twelve-one 2s infinite alternate;  
    animation: twelve-one 2s infinite alternate;  
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;    
}
#twelve.play .ball-container .ball:first-child,
.no-js #twelve:hover .ball-container .ball:first-child {
    -webkit-animation-play-state: running;    
    animation-play-state: running;    
}

#twelve .ball-container .ball:nth-child(2) {
    -webkit-animation: twelve-two 2s infinite alternate;  
    animation: twelve-two 2s infinite alternate;   
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;    
}
#twelve.play .ball-container .ball:nth-child(2),
.no-js #twelve:hover .ball-container .ball:nth-child(2) {
    -webkit-animation-play-state: running;    
    animation-play-state: running;    
}

#twelve .ball-container .ball:nth-child(3) {
    -webkit-animation: twelve-three 2s infinite alternate;  
    animation: twelve-three 2s infinite alternate;   
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;    
}
#twelve.play .ball-container .ball:nth-child(3),
.no-js #twelve:hover .ball-container .ball:nth-child(3) {
    -webkit-animation-play-state: running;    
    animation-play-state: running;    
}

#twelve .ball-container .ball:first-child:before,
#twelve .ball-container .ball:nth-child(2):before,
#twelve .ball-container .ball:nth-child(3):before,
#twelve .ball-container .ball:nth-child(3):after {
    -webkit-animation: twelve-fade 2s infinite alternate;  
    animation: twelve-fade 2s infinite alternate;   
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;    
}
#twelve.play .ball-container .ball:first-child:before,
.no-js #twelve:hover .ball-container .ball:first-child:before,
#twelve.play .ball-container .ball:nth-child(2):before,
.no-js #twelve:hover .ball-container .ball:nth-child(2):before,
#twelve.play .ball-container .ball:nth-child(3):before,
.no-js #twelve:hover .ball-container .ball:nth-child(3):before,
#twelve.play .ball-container .ball:nth-child(3):after,
.no-js #twelve:hover .ball-container .ball:nth-child(3):after {
    -webkit-animation-play-state: running;    
    animation-play-state: running;    
}

#twelve .ball-container .ball:last-child {
    -webkit-animation: twelve-four 2s infinite alternate;  
    animation: twelve-four 2s infinite alternate;
    -webkit-animation-play-state: paused;    
    animation-play-state: paused;    
}
#twelve.play .ball-container .ball:last-child,
.no-js #twelve:hover .ball-container .ball:last-child {
    -webkit-animation-play-state: running;    
    animation-play-state: running;  
}

/*** js ***/
.box {
    opacity:0;
    -ms-transform: scale(0,0);
    -webkit-transform: scale(0,0);
    transform: scale(0,0);    
    -webkit-transition-duration:0.5s;
    transition-duration:0.5s; 
}
.box.show {
    opacity:1; 
    -ms-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);    
    -webkit-transition-duration:0.5s;
    transition-duration:0.5s; 
}

/*** animations ***/

/* one */
@-webkit-keyframes one {
    0% { -webkit-transform: translateY(0%) scale(1,1); }
    30% { -webkit-transform: translateY(120%) scale(0.8, 1.2); }
    90% { -webkit-transform: translateY(360%) scale(1,1); }
    100% { -webkit-transform: translateY(400%) scale(1.2,0.8); }
}             
@keyframes one {
    0% { -webkit-transform: translateY(0%) scale(1,1); transform: translateY(0%) scale(1,1); }
    30% { -webkit-transform: translateY(120%) scale(0.8, 1.2); transform: translateY(120%) scale(0.8, 1.2); }
    90% { -webkit-transform: translateY(360%) scale(1,1); transform: translateY(360%) scale(1,1); }
    100% { -webkit-transform: translateY(400%) scale(1.2,0.8); transform: translateY(400%) scale(1.2,0.8); }
}

/* two */
@-webkit-keyframes two {
    0%, 40% { left:80px; }
    100% { left:80%; }
}             
@keyframes two {
    0%, 40% { left:80px; }
    100% { left:80%; }
}  
@-webkit-keyframes stick {
    0% { left:10px; }
    10% { left:0; }
    20%, 100% { left:10px; }
}             
@keyframes stick {
    0% { left:10px; }
    10% { left:0; }
    20%, 100% { left:10px; }
}

/* three */  
@-webkit-keyframes three {
    0% { -webkit-transform: translateX(0) translateY(0) scale(1,1); }
    80%, 100% { -webkit-transform: translateX(150%) translateY(150%) scale(1.5,1.5); }
}             
@keyframes three {
    0% { -webkit-transform: translateX(0) translateY(0) scale(1,1); transform: translateX(0) translateY(0) scale(1,1); }
    80%, 100% { -webkit-transform: translateX(150%) translateY(150%) scale(1.5,1.5); transform: translateX(150%) translateY(150%) scale(1.5,1.5); }
}  
@-webkit-keyframes fade {
    0% { opacity:1; }
    80%, 100% { opacity:0.5; }
}             
@keyframes fade {
    0% { opacity:1; }
    80%, 100% { opacity:0.5; }
}  

/* four */
@-webkit-keyframes four-one {
    0%, 20% { opacity:0; }
    28%, 100% { opacity:1; }
}             
@keyframes four-one {
    0%, 20% { opacity:0; }
    28%, 100% { opacity:1; }
}    
@-webkit-keyframes four-two {
    0%, 40% { opacity:0; }
    48%, 100% { opacity:1; }
}             
@keyframes four-two {
    0%, 40% { opacity:0; }
    48%, 100% { opacity:1; }
}   
@-webkit-keyframes four-three {
    0%, 48% { opacity:0; }
    52%, 100% { opacity:0.5; }
}             
@keyframes four-three {
    0%, 48% { opacity:0; }
    52%, 100% { opacity:0.5; }
} 
@-webkit-keyframes four-four {
    0%, 56% { opacity:0; }
    60%, 100% { opacity:0.5; }
}             
@keyframes four-four {
    0%, 56% { opacity:0; }
    60%, 100% { opacity:0.5; }
}  
@-webkit-keyframes four-five {
    0%, 64% { opacity:0; }
    68%, 100% { opacity:0.5; }
}             
@keyframes four-five {
    0%, 64% { opacity:0; }
    68%, 100% { opacity:0.5; }
}  
@-webkit-keyframes four-six {
    0%, 72% { opacity:0; }
    76%, 100% { opacity:0.5; }
}             
@keyframes four-six {
    0%, 72% { opacity:0; }
    76%, 100% { opacity:0.5; }
}  
@-webkit-keyframes four-seven {
    0%, 80% { opacity:0; }
    84%, 100% { opacity:0.5; }
}             
@keyframes four-seven {
    0%, 80% { opacity:0; }
    84%, 100% { opacity:0.5; }
}  
@-webkit-keyframes four-eight {
    0%, 88% { opacity:0; }
    92%, 100% { opacity:0.5; }
}             
@keyframes four-eight {
    0%, 88% { opacity:0; }
    92%, 100% { opacity:0.5; }
}  

/* five */
@-webkit-keyframes five {
    0% { left:30px; }
    50% { left:80%; }
    100% { left:30px; }
}             
@keyframes five {
    0% { left:30px; }
    50% { left:80%; }
    100% { left:30px; }
}

@-webkit-keyframes flag {
    0% { -webkit-transform: rotate(0); }
    25% { -webkit-transform: rotate(-30deg); }
    45% { -webkit-transform: rotate(10deg); } 
    
    50% { -webkit-transform: rotate(0); }
    
    75% { -webkit-transform: rotate(30deg); }
    95% { -webkit-transform: rotate(-10deg); }
    100% { -webkit-transform: rotate(0); }
}             
@keyframes flag {
    0% { -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); }
    25% { -ms-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); transform: rotate(-30deg); }
    45% { -ms-transform: rotate(10deg); -webkit-transform: rotate(10deg); transform: rotate(10deg); }
    
    50% { -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); }
    
    75% { -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); }
    95% { -ms-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }
    100% { -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); }    
}
@-webkit-keyframes flag-direction {
    0%, 50% { left:-10px; border-width: 7.5px 10px 7.5px 0; border-color: transparent #555555 transparent transparent; }
    51%, 100% { left:2px; border-width: 7.5px 0 7.5px 10px; border-color: transparent transparent transparent #555555; }
}      
@keyframes flag-direction {
    0%, 50% { left:-10px; border-width: 7.5px 10px 7.5px 0; border-color: transparent #555555 transparent transparent; }
    51%, 100% { left:2px; border-width: 7.5px 0 7.5px 10px; border-color: transparent transparent transparent #555555; }
}

/* six */
@-webkit-keyframes six {
    from { -webkit-transform: translateY(0%); }
    to { -webkit-transform: translateY(400%); }
}             
@keyframes six {
    from { -webkit-transform: translateY(0%); transform: translateY(0%); }
    to { -webkit-transform: translateY(400%); transform: translateY(400%); }
}

/* seven */
@-webkit-keyframes seven {
    from { -webkit-transform: rotate(30deg); }
    to { -webkit-transform: rotate(-30deg); }
}             
@keyframes seven {
    from { -webkit-transform: rotate(30deg); transform: rotate(30deg); }
    to { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); }
}

/* eight */
@-webkit-keyframes eight {
    from { -webkit-transform: translateX(-170%); transform: translateX(-170%); }
    to { -webkit-transform: translateX(170%); transform: translateX(170%); }
}             
@keyframes eight {
    from { -webkit-transform: translateX(-170%); transform: translateX(-170%); }
    to { -webkit-transform: translateX(170%); transform: translateX(170%); }
}
@-webkit-keyframes toTop {
    0% { -webkit-transform: translateY(40%); }
    50% { -webkit-transform: translateY(-20%); }
    100% { -webkit-transform: translateY(40%); }
}             
@keyframes toTop {
    0% { -webkit-transform: translateY(40%); transform: translateY(40%); }
    50% { -webkit-transform: translateY(-20%); transform: translateY(-20%); }
    100% { -webkit-transform: translateY(40%); transform: translateY(40%); }
}
@-webkit-keyframes toBottom {
    0% { -webkit-transform: translateY(-40%); }
    50% { -webkit-transform: translateY(20%); }
    100% { -webkit-transform: translateY(-40%); }
}             
@keyframes toBottom {
    0% { -webkit-transform: translateY(-40%); transform: translateY(-40%); }
    50% { -webkit-transform: translateY(20%); transform: translateY(20%); }
    100% { -webkit-transform: translateY(-40%); transform: translateY(-40%); }
}

/* nine */
@-webkit-keyframes nine {
    from { left:50px; }
    to { left:80%; }
}             
@keyframes nine {
    from { left:50px; }
    to { left:80%; }
}

/* ten */
@-webkit-keyframes ten {
    0% { -webkit-transform: translateY(0%) scale(1,1); }
    20% { -webkit-transform: translateY(20%) scale(1,1); }
    30% { -webkit-transform: translateY(360%) scale(0.8, 1.2); }
    40% { -webkit-transform: translateY(380%) scale(1.2,0.8); }
    100% { -webkit-transform: translateY(400%) scale(1.5,0.5); }
}             
@keyframes ten {
    0% { -webkit-transform: translateY(0%) scale(1,1); transform: translateY(0%) scale(1,1); }
    20% { -webkit-transform: translateY(20%) scale(1,1); transform: translateY(20%) scale(1,1); }    
    30% { -webkit-transform: translateY(360%) scale(0.8, 1.2); transform: translateY(120%) scale(0.8, 1.2); }
    40% { -webkit-transform: translateY(380%) scale(1.2,0.8); transform: translateY(360%) scale(1.2,0.8); }
    100% { -webkit-transform: translateY(400%) scale(1.5,0.5); transform: translateY(400%) scale(1.5,0.5); }
}

/* eleven */
@-webkit-keyframes eleven {
    from { opacity:0; }
    to { opacity:1; }
}             
@keyframes eleven {
    from { opacity:0; }
    to { opacity:1; }
}

/* twelve */
@-webkit-keyframes twelve-one {
    60%, 100% { border-top-right-radius:80%; border-top-left-radius:0; border-bottom-left-radius:80%; border-bottom-right-radius:0; -webkit-transform: translateY(100%) translateX(-110%) scale(0.8, 0.8) rotate(-45deg); -ms-transform: translateY(100%) translateX(-110%) scale(0.8, 0.8) rotate(-45deg); transform: translateY(100%) translateX(-110%) scale(0.8, 0.8) rotate(-45deg); }
}             
@keyframes twelve-one {
    60%, 100% { border-top-right-radius:80%; border-top-left-radius:0; border-bottom-left-radius:80%; border-bottom-right-radius:0; -webkit-transform: translateY(100%) translateX(-110%) scale(0.8, 0.8) rotate(-45deg); -ms-transform: translateY(100%) translateX(-110%) scale(0.8, 0.8) rotate(-45deg); transform: translateY(100%) translateX(-110%) scale(0.8, 0.8) rotate(-45deg); }
}
@-webkit-keyframes twelve-two {
    60%, 100% { border-top-right-radius:80%; border-top-left-radius:0; border-bottom-left-radius:80%; border-bottom-right-radius:0; -webkit-transform: translateY(-41%) translateX(110%) scale(0.8, 0.8) rotate(315deg); -ms-transform: translateY(-41%) translateX(110%) scale(0.8, 0.8) rotate(315deg); transform: translateY(-41%) translateX(110%) scale(0.8, 0.8) rotate(315deg); }
}             
@keyframes twelve-two {
    60%, 100% { border-top-right-radius:80%; border-top-left-radius:0; border-bottom-left-radius:80%; border-bottom-right-radius:0; -webkit-transform: translateY(-41%) translateX(110%) scale(0.8, 0.8) rotate(315deg); -ms-transform: translateY(-41%) translateX(110%) scale(0.8, 0.8) rotate(315deg); transform: translateY(-41%) translateX(110%) scale(0.8, 0.8) rotate(315deg); }
}
@-webkit-keyframes twelve-three {
    60%, 100% { border-top-right-radius:30%; -webkit-transform: translateY(-35%) scale(0.7, 0.7) rotate(-45deg); -ms-transform: translateY(-35%) scale(0.7, 0.7) rotate(-45deg); transform: translateY(-35%) scale(0.7, 0.7) rotate(-45deg); }
}             
@keyframes twelve-three {
    60%, 100% { border-top-right-radius:30%; -webkit-transform: translateY(-35%) scale(0.7, 0.7) rotate(-45deg); -ms-transform: translateY(-35%) scale(0.7, 0.7) rotate(-45deg); transform: translateY(-35%) scale(0.7, 0.7) rotate(-45deg); }
}
@-webkit-keyframes twelve-four {
    0% { width:50px; max-width:150px; }
    60%, 100% { width:80%; max-width:150px; background:none; border-bottom:5px solid #8b0404; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); }
}             
@keyframes twelve-four {
    0% { width:50px; max-width:150px; }
    60%, 100% { width:80%; max-width:150px; background:none; border-bottom:5px solid #8b0404; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); }
}
@-webkit-keyframes twelve-fade {
    0% { opacity:0; }
    60%, 100% { opacity:1; }
}             
@keyframes twelve-fade {
    0% { opacity:0; }
    60%, 100% { opacity:1; }
}