html,body{ width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
#displayfps{
    position: absolute;
    z-index: 300;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
}
#stage {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
}
#infotopright {
position: absolute;
right: 0;
margin: 20px;
font-size: 2rem;
font-family: 'arial','Helvetica',sans-serif;
color: #FFF;
font-weight: bolder;
}
#stage div {
    position: absolute;
}

.blur{
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    filter: blur(10px);
}
.blur5{
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    filter: blur();
}
.blur3{
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    filter: blur(3px);
}
.blur2{
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    filter: blur(2px);
}
.rounded{
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.tennis{
    position: absolute;
    background-image : url(../images/tennis.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.bubble{
    width: 10px;
    height: 10px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
}
.triangle {
   width: 0; 
   height: 0; 
  /* border-bottom: 30px solid green; */
   border-left: 15px solid transparent; 
   border-right: 15px solid transparent; 
}
.flame{
    width: 10px;
    height: 10px;
    position: absolute;
    background: #ffcc00;
/*
    background-image : url(../images/flame.png);
    background-size: cover;*/
}
.heart { 
    position: absolute;
}
.heart:before, .heart:after {
    position: absolute;
  content: "";
    left: 10px; top: 0;
    width: 10px;
    height: 20px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
.heart:after { 
    left: 0; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin :100% 100%;
}
.arrow {
position: absolute;
width: 0;
height: 0;
border-left: 10px solid rgba(0, 0, 0, 0);
border-right: 10px solid rgba(0, 0, 0, 0);
border-bottom: 30px solid #28EBF8;
}
.drop {
position: absolute;
width: 0;
height: 0;
border-left: 20px solid rgba(0, 0, 0, 0);
border-right: 20px solid rgba(0, 0, 0, 0);
border-bottom: 50px solid #28EBF8;
border-radius: 100%;
}
/*
.arrow:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 20px solid rgba(0, 0, 0, 0);
border-right: 20px solid rgba(0, 0, 0, 0);
border-top: 50px solid #28EBF8;
margin: 30px 0 0 -50px;
}
*/


/* ANIMATIONS */

@-webkit-keyframes burn {
    0% { background: #ffa800;  }/* fde47e*/
    50% { background: #ffcc00;  }
    100% {background: #724300; } /*  -webkit-transform : scale(0);  #701d00*/
}

.burn {
    -webkit-box-shadow: 0px 0px 10px #bb0000;
       -moz-box-shadow: 0px 0px 10px #bb0000;
         -o-box-shadow: 0px 0px 10px #bb0000;
            box-shadow: 0px 0px 10px #bb0000;
    /*-webkit-animation-name: burn;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    */
}
.grow{
    -webkit-transition: -webkit-transform .5s ease-out; 
    -moz-transition: -moz-transform .5s ease-out;
    -o-transition: -o-transform .5s ease-out;
    transition: transform .5s ease-out; 
}

.bluetored { 
    -webkit-animation: bluetored .6s linear infinite ;
    -moz-animation: bluetored 1s linear infinite;
    -o-animation: bluetored 1s linear infinite;
    animation: bluetored 1s linear infinite;
}

@-webkit-keyframes bluetored {
    from{ border-radius: 4px; }
    to{ border-radius: 12px; }
}
@-moz-keyframes bluetored {
    from{ color: #ff0000; }
    to{ color:  #0000FF; }
}
@-o-keyframes bluetored {
    from{ color: #ff0000; }
    to{ color:  #0000FF; }
}
@keyframes bluetored {
    from{ color: #ff0000; }
    to{ color:  #0000FF; }
}
/*                
               

@-webkit-keyframes bluetored {
    from{ -webkit-box-shadow: 0px 0px 30px #ff0000; }
    to{ -webkit-box-shadow: 0px 0px 30px #0000FF; }
}
@-moz-keyframes bluetored {
    from{ -moz-box-shadow: 0px 0px 30px #ff0000; }
    to{ -moz-box-shadow: 0px 0px 30px #0000FF; }
}
@-o-keyframes bluetored {
    from{-moz-box-shadow: 0px 0px 30px #ff0000;}
    to{-moz-box-shadow: 0px 0px 30px #0000FF;}
}
@keyframes bluetored {
    from{  box-shadow: 0px 0px 30px #ff0000; }
    to{  box-shadow: 0px 0px 30px #0000FF;}
}
*/

.transitions1{
    -webkit-transition:All 1s ease;
    -moz-transition:All 1s ease;
    -o-transition:All 1s ease;
    transition:All 1s ease;
}
.transitions2{
    -webkit-transition:All 2s ease;
    -moz-transition:All 2s ease;
    -o-transition:All 2s ease;
    transition:All 2s ease;
}
.transitions3{
    -webkit-transition:All 3s ease;
    -moz-transition:All 3s ease;
    -o-transition:All 3s ease;
    transition:All 3s ease;
}

.font {
    position: absolute !important;
    text-shadow: 50px 50px #ffa200;
    color: #000000;
-webkit-animation: fontanim 6s infinite alternate ease-in;
-moz-animation: fontanim 6s infinite alternate ease-in;
-o-animation: fontanim 6s infinite alternate ease-in;
}
@-webkit-keyframes fontanim {
 0% { text-shadow: 50px 50px #ffa200; color: #000000;}
100% { text-shadow: 50px 50px #0055ff; color: #ffa200;}
}



.slash {
    position: absolute !important;
    z-index: 200;
    box-shadow: 0px 0px 20px 10px #ffffff;
    background: #fff200;
    border-radius: 50%;
-webkit-animation: cssAnimation 3s infinite alternate ease-in;
-moz-animation: cssAnimation 3s infinite alternate ease-in;
-o-animation: cssAnimation 3s infinite alternate ease-in;
}
@-webkit-keyframes cssAnimation {
 0% { left : 100px; top : 100px;  box-shadow: 0px 0px 20px 3px #ffffff; }
20% { left : 700px; top : 100px; }
30% { left : 700px; top : 500px; }
60% { left : 100px; top : 500px; }
80% {left : 100px;  top : 250px; }
90% {left : 350px;  top : 250px; }
100% {left : 350px;  top : 350px; box-shadow: 0px 0px 30px 3px #fff200;}
}
@-moz-keyframes cssAnimation {
 0% { left : 100px; top : 100px;  box-shadow: 0px 0px 20px 3px #ffffff; }
20% { left : 700px; top : 100px; }
30% { left : 700px; top : 500px; }
60% { left : 100px; top : 500px; }
80% {left : 100px;  top : 250px; }
90% {left : 350px;  top : 250px; }
100% {left : 350px;  top : 350px; box-shadow: 0px 0px 30px 3px #fff200;}
}
@-o-keyframes cssAnimation {
 0% { left : 100px; top : 100px;  box-shadow: 0px 0px 20px 3px #ffffff; }
20% { left : 700px; top : 100px; }
30% { left : 700px; top : 500px; }
60% { left : 100px; top : 500px; }
80% {left : 100px;  top : 250px; }
90% {left : 350px;  top : 250px; }
100% {left : 350px;  top : 350px; box-shadow: 0px 0px 30px 3px #fff200;}
}
@keyframes cssAnimation {
 0% { left : 100px; top : 100px;  box-shadow: 0px 0px 20px 3px #ffffff; }
20% { left : 700px; top : 100px; }
30% { left : 700px; top : 500px; }
60% { left : 100px; top : 500px; }
80% {left : 100px;  top : 250px; }
90% {left : 350px;  top : 250px; }
100% {left : 350px;  top : 350px; box-shadow: 0px 0px 30px 3px #fff200;}
}

.rotating {
    -webkit-animation: rotating 1s linear infinite;
    -moz-animation: rotating 1s linear infinite;
    -o-animation: rotating 1s linear infinite;
    animation: rotating 1s linear infinite;
}
@-webkit-keyframes rotating {
    from{-webkit-transform: rotate(0deg); }
    to{-webkit-transform: rotate(360deg); }
}
@-moz-keyframes rotating {
    from{-moz-transform: rotate(0deg);}
    to{-moz-transform: rotate(360deg);}
}
@-o-keyframes rotating {
    from{-o-transform: rotate(0deg); }
    to{-o-transform: rotate(360deg);}
}
@keyframes rotating {
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
}