@keyframes move8 {
0% {left:0px; top:0px;}
50%{left:50px; top:62px;}
75%{left:75px; top: 93px;}
100% {left:100px; top:124px;}
}

@-webkit -keyframes move8 {
0% {
left : 0;
top : 0;
}
50% {
left : 50px;
top : 62px;
}
75% {
left : 75px;
top : 93px;
}
100% {
left : 100px;
top : 124px;
}
} 




#delay_demoB {
position:absolute;
left:100px;
top:180px;
z-index:4;
width:450px;
height:250px;
margin:0 auto 10px;
background-color: transparent;
padding:10px;
animation : move8 15s;
animation-timing-function : ease-out;
  -webkit-transition: all 3s ease-in-out;
-moz-transition: all 3s ease-in-out;
-o-transition: all 3s ease-in-out;
transition: all 3s ease-in-out;  /* Ensures that the element is being transformed in the 3d context so that hw acceleration kicks in where appropriate. */
  -webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation-fill-mode: forwards;
}

#cir_black1 {
  height:50px;
width:70px;
background-color: black;
border-radius: 50%;
 /* Rotate div */
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
  position:absolute;
  top:198px;
  left:203px;
z-index:0;
}


#cir_white1 {
height:45px;
width:35px;
background-color: #f2f2f2;
border-radius: 50%;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  position:absolute;
  top:200px;
  left:220px;
  z-index:2;
}


.shadow-circle{
    height:45px;
    width:35px;
    border-radius: 50%;
    border: 1px solid black;
    box-shadow: 0 0 0 2px black;
}

 

/*second circle*/


#cir_white2 {
  height:45px;
width:35px;
background-color: #f2f2f2;
border-radius: 50%;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  position:absolute;
  top:200px;
  left:300px;
  z-index:2;
}

#cir_black2 {
  height:50px;
width:70px;
background-color: black;
border-radius: 50%;
 /* Rotate div */
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
  position:absolute;
  top:198px;
  left:283px;
z-index:0;
}



/*third circle*/


#cir_white3 {
  height:45px;
width:35px;
background-color: #f2f2f2;
border-radius: 50%;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  position:absolute;
  top:200px;
  left:380px;
  z-index:2;
}

#cir_black3 {
  height:50px;
width:70px;
background-color: black;
border-radius: 50%;
 /* Rotate div */
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
  position:absolute;
  top:198px;
  left:363px;
z-index:0;
}

/*GREEK*/

@-webkit-keyframes fadein {
0% {opacity: 1;}
50% {opacity: 0.75;}
75% {opacity: 0.5;}
100% {opacity: 0.1;}
}

@keyframes fadein {
0% {opacity: 1;}
50% {opacity: 0.75;}
75% {opacity: 0.5;}
100% {opacity: 0.1;}
}

@-webkit-keyframes movegr {
0% {top:0px;}
50% {top:200px;}
75% {top: 300px;}
100% {top:400px;}
}

@keyframes movegr {
0% {top:0px;}
50%{top:200px;}
75%{top: 300px;}
100% {top:400px;}
}

/*ALPHA*/

#greek_pos_Alpha {
position:absolute;
top:400px;
left:245px;
animation : movegr 10s;
-webkit-animation: movegr 10s linear 1 normal forwards;
animation-timing-function : ease-out;
}

#greek1 {
width:100px;
height:100px;
font-size:80px;
opacity: 0.1;
animation: fadein 10s;
-webkit-animation: fadein 10s linear 1  normal forwards;
animation-timing-function : ease-out;
}

/*OMEGA*/

#greek_pos_Omega {
position:absolute;
top:400px;
left:550px;
animation : movegr 10s;
-webkit-animation: movegr 10s linear 1  normal forwards;
animation-timing-function : ease-out;
}

#greek2 {
width:100px;
height:100px;
font-size:80px;
opacity: 0.1;
animation: fadein 10s;
-webkit-animation: fadein 10s linear 1 normal forwards;
animation-timing-function : ease-out;
}

#small {
position:absolute;
top : 455px;
left:315px;
animation : movegr 10s;
-webkit-animation: movegr 10s linear  normal forwards;
animation-timing-function : ease-out;
}

#phrase {
width:250px;
height:50px;
margin-top: 50px;
font-size:20px;
font-family:Kalam;
font-style: italic;
opacity: 0.5;
}


/*NUM*/

body { 
font-family: sans-serif;

height: 100%;
 
overflow: hidden;
  
width: 100%;

}



/************************
 * Animations infinites *
 ************************/
/*
 * Number Trembling
 */
.tremble { -webkit-animation: tremble 0.1s infinite;

 animation: tremble 0.1s infinite;

}



@-webkit-keyframes tremble {
 
0% {
    margin-left: 0;
  }
  
50% {
    margin-left: 5px;
  }
  
100% {
    margin-left: 0;
  }

}


@keyframes tremble {
  
0% {
 margin-left: 0;
  }

50% {
    margin-left: 5px;
  }

100% {
    margin-left: 0;
  }

}





/***********************
 * Animations timeline *
 ***********************/
/*
 * ~~ 1
 * Fall (from outside to lower center)
 * start: 0, dur: ~3sec
 */


/*FALL*/

.fall--1 {
 
 -webkit-animation-duration: 12.875s;

 animation-duration: 12.875s;
  
-webkit-animation-fill-mode: both;
          
animation-fill-mode: both;
  
-webkit-animation-name: falling--1;
          
animation-name: falling--1;
  
left: 47%;
  
opacity: 0.1;

position: fixed;

}



@-webkit-keyframes falling--1 {
  
0% {
    top: -10%;
  }
  
100% {
    top: 71%;
  }

}



@keyframes falling--1 {
  
0% {
    top: -10%;
  }
  
100% {
    top: 71%;
  }

}


.fall--1a {
 
 -webkit-animation-duration: 12.875s;

 animation-duration: 12.875s;
  
-webkit-animation-fill-mode: both;
          
animation-fill-mode: both;
  
-webkit-animation-name: falling--1;
          
animation-name: falling--1;
  
left: 47%;
  
opacity: 0.1;

position: fixed;

}



@-webkit-keyframes falling--1a {
  
0% {
    top: -10%;
  }
  
100% {
    top: 71%;
  }

}



@keyframes falling--1a {
  
0% {
    top: -10%;
  }
  
100% {
    top: 71%;
  }

}


.fall--2 { 
-webkit-animation-duration: 12.75s;

animation-duration: 12.75s;
  
-webkit-animation-fill-mode: both;

 animation-fill-mode: both;

-webkit-animation-name: falling--2;

animation-name: falling--2;
  
left: 47%;

opacity: 0.2;
  
position: fixed;

}



@-webkit-keyframes falling--2 {
  0% {
    top: -10%;
  }
  100% {
    top: 71%;
  }
}


@keyframes falling--2 {
  0% {
    top: -10%;
  }
  100% {
    top: 71%;
  }
}


.fall--3 {
-webkit-animation-duration: 12.625s;

animation-duration: 12.625s;
  
-webkit-animation-fill-mode: both;

animation-fill-mode: both;

-webkit-animation-name: falling--3;

animation-name: falling--3;
  
left: 47%;
  
opacity: 0.3;
  
position: fixed;

}



@-webkit-keyframes falling--3 {
  0% {
    top: -10%;
  }
  100% {
    top: 73%;
  }
}



@keyframes falling--3 {
  0% {
    top: -10%;
  }
  100% {
    top: 73%;
  }
}





/*
 * ~~ 2
 * Fall (outside)
 * start: 3sec, dur: ~1sec
 */


/*BFALL AND BFALLING */



.bfall--1 {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  -webkit-animation-duration: 0.55s;
          animation-duration: 0.55s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: bfalling--1;
          animation-name: bfalling--1;
  position: relative;
}

@-webkit-keyframes bfalling--1 {
  0% {
    top: 0;
  }
  100% {
    top: -120vh;
  }
}

@keyframes bfalling--1 {
  0% {
    top: 0;
  }
  100% {
    top: -120vh;
  }
}

.bfall--1a {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  -webkit-animation-duration: 0.55s;
          animation-duration: 0.55s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: bfalling--1a;
          animation-name: bfalling--1a;
  position: relative;
}

@-webkit-keyframes bfalling--1a {
  0% {
    top: 0;
  }
  100% {
    top: -120vh;
  }
}

@keyframes bfalling--1a {
  0% {
    top: 0;
  }
  100% {
    top: -120vh;
  }
}


.bfall--2 {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: bfalling--2;
          animation-name: bfalling--2;
  position: relative;
}

@-webkit-keyframes bfalling--2 {
  0% {
    top: 0;
  }
  100% {
    top: -120vh;
  }
}

@keyframes bfalling--2 {
  0% {
    top: 0;
  }
  100% {
    top: -120vh;
  }
}



.bfall--3 {
  -webkit-animation-delay: 3s;
   animation-delay: 3s;
  -webkit-animation-duration: 0.65s;
   animation-duration: 0.65s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: bfalling--3;
   animation-name: bfalling--3;
   position: relative;
}

@-webkit-keyframes bfalling--3 {
  0% {
    top: 0;
  }
  100% {
    top: -120vh;
  }
}

@keyframes bfalling--3 {
  0% {
    top: 0;
  }
  100% {
    top: -120vh;
  }
}

/*
 * ~~ 3
 * Plonge
 * start: 4sec, dur: 2sec
 */

/*PLONGE*/





.plonge--1 {
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
  -webkit-animation-duration: 0.9s;
          animation-duration: 0.9s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: plonge--1;
          animation-name: plonge--1;
  position: relative;
}


@-webkit-keyframes plonge--1 {
  0% {
    top: 0;
  }
  100% {
    margin: -5px;
    padding: 14px;
    top: 150vh;
  }
}


@keyframes plonge--1 {
  0% {
    top: 0;
  }
  100% {
    margin: -5px;
    padding: 14px;
    top: 150vh;
  }
}

.plonge--1a {
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
  -webkit-animation-duration: 0.9s;
          animation-duration: 0.9s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: plonge--1a;
          animation-name: plonge--1a;
  position: relative;
}



@-webkit-keyframes plonge--1a {
  0% {
    top: 0;
  }
  100% {
    margin: -5px;
    padding: 14px;
    top: 150vh;
  }
}


@keyframes plonge--1a {
  0% {
    top: 0;
  }
  100% {
    margin: -5px;
    padding: 14px;
    top: 150vh;
  }
}





.plonge--2 {
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
  -webkit-animation-duration: 0.8s;
          animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: plonge--2;
          animation-name: plonge--2;
  position: relative;
}

@-webkit-keyframes plonge--2 {
  0% {
    top: 0;
  }
  100% {
    margin: -15px;
    padding: 9px;
    top: 150vh;
  }
}

@keyframes plonge--2 {
  0% {
    top: 0;
  }
  100% {
    margin: -15px;
    padding: 9px;
    top: 150vh;
  }
}


.plonge--3 {
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
  -webkit-animation-duration: 0.7s;
          animation-duration: 0.7s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: plonge--3;
          animation-name: plonge--3;
  position: relative;
}

@-webkit-keyframes plonge--3 {
  0% {
    top: 0;
  }
  100% {
    margin: -11px;
    padding: 18px;
    top: 150vh;
  }
}

@keyframes plonge--3 {
  0% {
    top: 0;
  }
  100% {
    margin: -11px;
    padding: 18px;
    top: 150vh;
  }
}

/*OBJECTS*/
body {
  font-family: sans-serif;
  height: 100%;
  overflow: hidden;
  width: 100%; 
}



/************************
 * Animations infinites *
 ************************/
/*
 *


/*
 * Objects
 */


.object {
  
border: 2px solid #00ffba;

position: absolute;
}



.circle {
  
border-radius: 50%;

}



.diamond {

 -webkit-transform: rotate(45deg);
 
transform: rotate(45deg);

}



.circle:nth-child(1),
.square:nth-child(1),
.diamond:nth-child(1) {


height: 84px;
  
left: 77%;

width: 84px;

}


/*
 * Objects
  */



.object:nth-child(1) {

 -webkit-animation-duration: 950ms;

 animation-duration: 950ms;
  
-webkit-animation-fill-mode: both;

 animation-fill-mode: both;
 
-webkit-animation-iteration-count: 6;

animation-iteration-count: 6;
  -webkit-animation-name: flyUp--1;

 animation-name: flyUp--1;

 opacity: 0.08;

}



@-webkit-keyframes flyUp--1 {
  
0% {
    bottom: -10%;
  }
  
100% {
    bottom: 120%;
  }

}


@keyframes flyUp--1 {
  
0% {
    bottom: -10%;
  }
  
100% {
 bottom: 120%;
  }

}


.circle:nth-child(2),
.square:nth-child(2),
.diamond:nth-child(2) {
  height: 69px;
  left: 81%;
  width: 69px;
}

.object:nth-child(2) {
  -webkit-animation-duration: 900ms;
          animation-duration: 900ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 6;
          animation-iteration-count: 6;
  -webkit-animation-name: flyUp--2;
          animation-name: flyUp--2;
  opacity: 0.16;
}

@-webkit-keyframes flyUp--2 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}

@keyframes flyUp--2 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}
.circle:nth-child(3),
.square:nth-child(3),
.diamond:nth-child(3) {
  height: 66px;
  left: 30%;
  width: 66px;
}

.object:nth-child(3) {
  -webkit-animation-duration: 850ms;
          animation-duration: 850ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 6;
          animation-iteration-count: 6;
  -webkit-animation-name: flyUp--3;
          animation-name: flyUp--3;
  opacity: 0.24;
}

@-webkit-keyframes flyUp--3 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}

@keyframes flyUp--3 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}


.circle:nth-child(4),
.square:nth-child(4),
.diamond:nth-child(4) {
  height: 76px;
  left: 2%;
  width: 76px;
}

.object:nth-child(4) {
  -webkit-animation-duration: 800ms;
          animation-duration: 800ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 6;
          animation-iteration-count: 6;
  -webkit-animation-name: flyUp--4;
          animation-name: flyUp--4;
  opacity: 0.32;
}

@-webkit-keyframes flyUp--4 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}

@keyframes flyUp--4 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}
.circle:nth-child(5),
.square:nth-child(5),
.diamond:nth-child(5) {
  height: 36px;
  left: 48%;
  width: 36px;
}

.object:nth-child(5) {
  -webkit-animation-duration: 750ms;
          animation-duration: 750ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 6;
          animation-iteration-count: 6;
  -webkit-animation-name: flyUp--5;
          animation-name: flyUp--5;
  opacity: 0.4;
}

@-webkit-keyframes flyUp--5 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}

@keyframes flyUp--5 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}


.circle:nth-child(6),
.square:nth-child(6),
.diamond:nth-child(6) {
  height: 65px;
  left: 61%;
  width: 65px;
}

.object:nth-child(6) {
  -webkit-animation-duration: 700ms;
          animation-duration: 700ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 6;
          animation-iteration-count: 6;
  -webkit-animation-name: flyUp--6;
          animation-name: flyUp--6;
  opacity: 0.48;
}

@-webkit-keyframes flyUp--6 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}

@keyframes flyUp--6 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}
.circle:nth-child(7),
.square:nth-child(7),
.diamond:nth-child(7) {
  height: 24px;
  left: 90%;
  width: 24px;
}

.object:nth-child(7) {
  -webkit-animation-duration: 650ms;
          animation-duration: 650ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 6;
          animation-iteration-count: 6;
  -webkit-animation-name: flyUp--7;
          animation-name: flyUp--7;
  opacity: 0.56;
}

@-webkit-keyframes flyUp--7 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}

@keyframes flyUp--7 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}


.circle:nth-child(8),
.square:nth-child(8),
.diamond:nth-child(8) {
  height: 80px;
  left: 53%;
  width: 80px;
}

.object:nth-child(8) {
  -webkit-animation-duration: 600ms;
          animation-duration: 600ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 6;
          animation-iteration-count: 6;
  -webkit-animation-name: flyUp--8;
          animation-name: flyUp--8;
  opacity: 0.64;
}

@-webkit-keyframes flyUp--8 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}

@keyframes flyUp--8 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}
.circle:nth-child(9),
.square:nth-child(9),
.diamond:nth-child(9) {
  height: 31px;
  left: 43%;
  width: 31px;
}

.object:nth-child(9) {
  -webkit-animation-duration: 550ms;
          animation-duration: 550ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 6;
          animation-iteration-count: 6;
  -webkit-animation-name: flyUp--9;
          animation-name: flyUp--9;
  opacity: 0.72;
}

@-webkit-keyframes flyUp--9 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}

@keyframes flyUp--9 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}


.circle:nth-child(10),
.square:nth-child(10),
.diamond:nth-child(10) {
  height: 55px;
  left: 38%;
  width: 55px;
}

.object:nth-child(10) {
  -webkit-animation-duration: 500ms;
          animation-duration: 500ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 6;
          animation-iteration-count: 6;
  -webkit-animation-name: flyUp--10;
          animation-name: flyUp--10;
  opacity: 0.8;
}

@-webkit-keyframes flyUp--10 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}

@keyframes flyUp--10 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}
.circle:nth-child(11),
.square:nth-child(11),
.diamond:nth-child(11) {
  height: 97px;
  left: 58%;
  width: 97px;
}

.object:nth-child(11) {
  -webkit-animation-duration: 450ms;
          animation-duration: 450ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 6;
          animation-iteration-count: 6;
  -webkit-animation-name: flyUp--11;
          animation-name: flyUp--11;
  opacity: 0.88;
}

@-webkit-keyframes flyUp--11 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}

@keyframes flyUp--11 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}
.circle:nth-child(12),


.square:nth-child(12),
.diamond:nth-child(12) {
  height: 55px;
  left: 76%;
  width: 55px;
}

.object:nth-child(12) {
  -webkit-animation-duration: 400ms;
          animation-duration: 400ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 6;
          animation-iteration-count: 6;
  -webkit-animation-name: flyUp--12;
          animation-name: flyUp--12;
  opacity: 0.96;
}

@-webkit-keyframes flyUp--12 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}

@keyframes flyUp--12 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}

.circle:nth-child(13),
.square:nth-child(13),
.diamond:nth-child(13) {
  height: 77px;
  left: 65%;
  width: 77px;
}

.object:nth-child(13) {
  -webkit-animation-duration: 350ms;
          animation-duration: 350ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 6;
          animation-iteration-count: 6;
  -webkit-animation-name: flyUp--13;
          animation-name: flyUp--13;
  opacity: 1.04;
}

@-webkit-keyframes flyUp--13 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}

@keyframes flyUp--13 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}
.circle:nth-child(14),
.square:nth-child(14),
.diamond:nth-child(14) {
  height: 50px;
  left: 1%;
  width: 50px;
}


.object:nth-child(14) {
  -webkit-animation-duration: 300ms;
          animation-duration: 300ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 6;
          animation-iteration-count: 6;
  -webkit-animation-name: flyUp--14;
          animation-name: flyUp--14;
  opacity: 1.12;
}

@-webkit-keyframes flyUp--14 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}

@keyframes flyUp--14 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}


.circle:nth-child(15),
.square:nth-child(15),
.diamond:nth-child(15) {
  height: 9px;
  left: 24%;
  width: 9px;
}

.object:nth-child(15) {
  -webkit-animation-duration: 250ms;
          animation-duration: 250ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 6;
          animation-iteration-count: 6;
  -webkit-animation-name: flyUp--15;
          animation-name: flyUp--15;
  opacity: 1.2;
}

@-webkit-keyframes flyUp--15 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}

@keyframes flyUp--15 {
  0% {
    bottom: -10%;
  }
  100% {
    bottom: 120%;
  }
}


/*PATTERN ANIMATION*/
@-webkit-keyframes mymove {
0% {left : 100px;}
25% {left : 150px;}
75% {left: 200px;}
100% {left : 250px;}
}


@keyframes mymove {
0% {left : 100px;}
25% {left : 150px;}
75% {left: 200px;}
100% {left : 250px;}
}

#patternP {
position : absolute;
left : 95px;
}

#patternR {
position : absolute;
left : 197px;
top: 120px;
}

#patternA {
position : absolute;
left : 360px;
top: 170px;
}


/*standard div's form the vertical sticks of the letters*/

#div1,#div1a,#div2,#div2a,#div3,#div3a,#div4,#div4a,#div6,#div6a,#div9,#div9a,#div9b,#div9c {
width : 5px;
height : 10px;
background-color: black;
position : relative;
font-size : 24px;
animation : mymove 15s;
animation-timing-function : ease;
}

#div5,#div5a {
width : 5px;
height : 10px;
background-color: black;
position: relative;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: black;
font-size: 24px;
animation: mymove 15s;
animation-timing-function: ease;
}

/* Forms the protrusion of the P*/
#div6_position {
position : absolute;
left : 90px;
position : relative;
width : 25px;
height : 5px;
background-color : black;
animation : mymove 15s;
animation-timing-function : ease-out;
}
#div7_position {
position : absolute;
left : 110px;
position : relative;
width : 5px;
height : 25px;
background-color : black;
animation : mymove 15s;
animation-timing-function : ease;
}
#div8_position {
position : absolute;
left : 90px;
position : relative;
width : 25px;
height : 5px;
background-color : black;
animation : mymove 15s;
animation-timing-function : ease-in-out;
}

/* Recognition word*/

#div10_position {
position : absolute;
left : 192px;
top: 55px;
position : relative;
width : 25px;
height : 5px;
background-color : black;
animation : mymove 15s;
animation-timing-function : ease-out;
}

#div11_position {
position : absolute;
left : 212px;
top: 55px;
position : relative;
width : 5px;
height : 25px;
background-color : black;
animation : mymove 15s;
animation-timing-function : ease;
}

#div12_position {
position : absolute;
left : 192px;
top: 55px;
position : relative;
width : 25px;
height : 5px;
background-color : black;
animation : mymove 15s;
animation-timing-function : ease-in-out;
}


/*Skew the Leg of the R*/
#ddSkew {
width:5px;
height:34px;
background-color:black;
position:absolute;
left: 207px;
top: 52px;
position : relative;
z-index:1;
-ms-transform:skew (-10deg, 10deg); /*IE 9*/
-webkit-transform:skew(-10deg,10deg);/*Safari*/
transform:skew (-10deg,10deg);/*Standard syntax*/
-webkit-transform: rotate(-10deg); 
-ms-transform: rotate(-10deg);    
transform: rotate(-10deg); 
}

/*Adding in the*/

.text_1{
position : absolute;
left : 335px;
top: 60px;
position : relative;
font-family : Arial, Helvetica, sans-serif;
font-weight : normal;
font-style: italic;
color: black;
font-size : 16px;
animation : mymove 15s;
animation-timing-function : ease-in-out;
}

/*Adding Apocalypse*/

/*Skew left leg of the A*/
#ddleft_A {
width:5px;
height:60px;
background-color:black;
position:absolute;
left : 50px;
top: 20px;
z-index:1;
-ms-transform:skew (10deg,10deg); /*IE 9*/
-webkit-transform:skew(10deg,10deg);/*Safari*/
transform:skew (10deg,10deg);/*Standard syntax*/
-webkit-transform: rotate(10deg); 

-ms-transform: rotate(10deg); 
          
transform: rotate(10deg); 
}

/*Skew right leg of --A--*/

#ddright_A {
width:5px;
height:60px;
background-color:black;
position:absolute;
left : 60px;
top: 20px;
z-index:2;
-ms-transform:skew (-10deg,10deg); /*IE 9*/
-webkit-transform:skew(-10deg,10deg);/*Safari*/
transform:skew (-10deg,10deg);/*Standard syntax*/
-webkit-transform: rotate(-10deg); 

-ms-transform: rotate(-10deg); 
          
transform: rotate(-10deg); 
}


/* position crossbar of the A*/

#div13_position {
position : absolute;
left : 50px;
top: 50px;
position : relative;
width : 14px;
height : 5px;
background-color : black;
animation : mymove 15s;
animation-timing-function : ease-in-out;
}

/* adding the --pocalpse-- to A*/

#div5b {
width : 5px;
height : 10px;
position:absolute;
left : 60px;
top: 50px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: black;
font-size: 24px;
animation: mymove 15s;
animation-timing-function: ease;
}

/*SIX*/

@-webkit-keyframes
move6 {
0% {left:100px;}
50%{left:150px;}
75%{left:200px;}
100% {left:250px;}
} 

@keyframes move6 {
0% {left:100px;}
50%{left:150px;}
75%{left:200px;}
100% {left:250px;}
}

#delay_demo {
position:absolute;
left:100px;
top:180px;
z-index:-2;
width:450px;
height:250px;
margin:0 auto 10px;
background-color: #f2f2f2;
padding:10px;
}

#dd_main {
height:50px;
width:70px;
background-color: black;
border-radius: 50%;
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
position:absolute;
top:198px;
left:203px;
z-index:0;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}


#dd1 {
height:45px;
width:35px;
background-color: #f2f2f2;
border-radius: 50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
position:absolute;
top:200px;
left:220px;
z-index:2;
animation : move6 5s;
animation-timing-function : ease-out;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;  /* Ensures that the element is being transformed in the 3d context so that hw acceleration kicks in where appropriate. */
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}


.shadow-circle {
height:45px;
 width:35px;
 border-radius: 50%;
 border: 1px solid black;
 box-shadow: 0 0 0 2px black;
}

 #dd1 {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;  
}


#ddSkew2 {
width:8px;
height:70px;
background-color:black;
position:absolute;
z-index:1;
top:134px;
left:224px;
}


#ddSkew2 {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s; 
}

#ddSkew2,#ddSkew3,#ddSkew4 {
-ms-transform:skew (-10deg -10deg); /*IE 9*/
-webkit-transform:skew(-10deg 10deg);/*Safari*/
transform:skew (-10 deg 10deg);/*Standard syntax*/
-webkit-transform: rotate(10deg); 

-ms-transform: rotate(10deg); 
          
transform: rotate(10deg); 
 }


/*second six*/

#dd2 {
height:45px;
width:35px;
background-color: #f2f2f2;
border-radius: 50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
position:absolute;
top:200px;
left:300px;
 z-index:2;
animation : move6 5s;
animation-timing-function : ease-out;
  -webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;  /* Ensures that the element is being transformed in the 3d context so that hw acceleration kicks in where appropriate. */
  -webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

#dd_main2 {
 height:50px;
width:70px;
background-color: black;
border-radius: 50%;
 /* Rotate div */
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
position:absolute;
top:198px;
left:283px;
z-index:0;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}

#ddSkew3 {
width:8px;
height:70px;
background-color:black;
position:absolute;
z-index:2;
top: 134px;
left:304px;
}

#ddSkew3 {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}


/*third six*/

#dd3 {
height:45px;
width:35px;
background-color: #f2f2f2;
border-radius: 50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
position:absolute;
top:200px;
left:380px;
z-index:2;
animation : move6 5s;
animation-timing-function : ease-out;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;  /* Ensures that the element is being transformed in the 3d context so that hw acceleration kicks in where appropriate. */
 -webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

#dd_main3 {
height:50px;
width:70px;
background-color: black;
border-radius: 50%;
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
position:absolute;
top:198px;
left:363px;
z-index:0;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}

#ddSkew4 {
width:8px;
height:70px;
background-color:black;
position:absolute;
z-index:3;
top:134px;
left:384px;
}

#ddSkew4 {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}

/*MAIN*/

@keyframes delayedShow {
  to {
    visibility: visible;
  }
}

#delayedShow{
  visibility: hidden;
  animation: 0s linear 20s forwards delayedShow ;
  position: absolute;
  width: 100%;
    min-height: 100vh;
    max-height: 100%;
    top: 0;
    left: 0;
    margin: 0 auto;  
   background-color:#f2f2f2;
    z-index: 1000;
}

#skip {
position:absolute;
margin-left:2.5%;
margin-top:2%;
}

#refresh {
position:absolute;
margin-left:10%;
margin-top:10%;
}

.pm {
position:absolute;
margin-left:50px;
margin-top:45px;
}


/*MENU*/
#nav {
height: 50px;
width:100%;
position:relative;
 float:left;
background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));
background-image: linear-gradient(#fff, #ccc);
box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.4);
padding: 0px;
margin:0px;
z-index:10;
  }


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}


ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Default Styles 
--------------------------------------------------------------------*/

body {
font-family: 'Droid Sans', sans-serif;
margin:5px;
background-color : #f2f2f2;
max-height: 100%;
line-height:1;
 }
	
.clearfix {
	clear: both;
}

.wrap {
	width: 940px;
	margin: 4em auto;
}
.menu li {
	float: left;
	position: relative;
}

.menu li a {
	color: #444;
	display: block;
	font-size: 14px;
	line-height: 20px;
	padding: 6px 12px;
	margin: 8px 8px;
	vertical-align: middle;
	text-decoration: none;
}

.menu li a:hover {
	background-image: linear-gradient(#ededed, #fff);
	border-radius: 12px;
	box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
	color: #222;
}

/* Dropdown styles */

.menu ul {
	position: absolute;
	left: -9999px;
	list-style: none;
	opacity: 0;
	transition: opacity 1s ease;
}

.menu ul li {
	float: none;
}

.menu ul a {
	white-space: nowrap;
}

/* Displays the dropdown on hover and moves back into position */
.menu li:hover ul {
                background-image: linear-gradient(#ededed, #fff);
	border-radius: 0 0 6px 6px;
	box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);
	left: 5px;
	opacity: 1;
}

/* Persistant Hover State */
.menu li:hover a {
	background-image: linear-gradient(#ccc, #ededed);
	border-radius: 12px;
	box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
	color: #222;
}

.menu li:hover ul a {
	background: none;
	border-radius: 0;
	box-shadow: none;
}

.menu li:hover ul li a:hover {
	background-image: linear-gradient(#ededed, #fff);
	border-radius: 12px;
	box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.3);
}



.italic {
font-style: italic;
}

/*Styling for the Splashdiv*/

#text_content {
position : relative;
display:inline-block;
width : 100%;
min-height : 100vh;
max-height : 100%;
background-color : #f2f2f2;
}

.p_inner {
text-align : justify;
padding : 40px;
width : 70%;
height : 100%;
line-height : 200%;
margin : 0 auto;
font-family : Palatino, "Palatino LT STD", "Palatino Linotype", "Book Antiqua", Georgia, serif;
font-size : 18px;
}

.img_left_wrap {
float:left;
margin: 4px 10px 0px 0px;
border: 1px solid #000000;
}