/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}


body {
    
    overflow-x: hidden;
}
.container{
     width: 900px;
    margin: 50px 0px 30px 190px;
    }


.bongwater{
    padding:50px 0px 0px 50px;
    position: absolute;
    top:850px;
    left:530px;
    animation: party 50s ease-in; 
    }
  @keyframes party {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}


@keyframes floating {
    from { transform: translate(0,  0px); }
    50%  { transform: translate(0, 10px); }
    to   { transform: translate(0, -0px); }    
}

.stick {
    width: 49%;
     position: absolute;
    top:10px;
    left:200px;
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
    
.stick2 {
    width: 100%;
     position: absolute;
    top:620px;
    left:480px;
    animation-name: floating;
    animation-duration: 3.2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.stick3 {
    width: 90%;
     position: absolute;
    top:1060px;
    left:970px;
    animation-name: floating;
    animation-duration: 2.8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}


.female {
    position: absolute;
    top:265px;
    left:720px;
    }



.empty {
    position: absolute;
    top:265px;
    left:720px;
    opacity: 1;
    transition: .03s;
    }

.empty:hover {opacity:0}



.thinkingwoman {
    position:absolute;
    top:428px;
    left:870px;
    }


.bounceshadow{
    position: absolute;
    top:1280px;
    left:730px;
    animation-name: pulse_animation;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}



.peanut {
    position: absolute;
    top:1100px;
    left: 555px;
}

.peanutrug {
    position: absolute;
    top:1085px;
    left: 509px
}

.coollady{
    position:absolute;
    top:890px;
    left:238px;
}

.jumpingguy {
    position:absolute;
    top:1300px;
    left:520px;
     animation: mover 3s infinite; 
}



.candlebottom {
    position: absolute;
    top:973px;
    left:806px;
}

.candletop {
    position: absolute;
    top:790px;
    left:830px;
}

.flame {
    position: absolute;
    top:685px;
    left:885px;
    animation: burningbright 10s;
      animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transform-origin: -50px -20px -20px -20px;
}

@keyframes burningbright {
    0% { transform: scale(1); }
    30% { transform: scale(1); }
    40% { transform: scale(.9); }
    50% { transform: scale(1); }
    60% { transform: scale(.9); }
    70% { transform: scale(1); }
    80% { transform: scale(1); }
    100% { transform: scale(1); }
     0%   { opacity: 1; }
  50% { opacity: 0; }
 100% { opacity: 1; }
}

.blackout {
    position: absolute;
    top:675px;
    left:807px;
      animation: party 10s; 
      animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    }
  @keyframes party {
  0%   { opacity: 0; }
  50% { opacity: 1; }
 100% { opacity: 0; }
}





.reallyball3{
    position: absolute;
    top:450px;
    left: 300px;
    opacity:0;
    animation: letsmove ease-in-out 3s infinite;
}

.reallyball3:hover {opacity:1}

 @keyframes letsmove  {
    0% { transform: translateY(-70px); }
     50% { transform: translateX(-50px); }
    100%{ transform: translateY(70px); }
      0% { opacity: 0; }
     10% {opacity:1}
      50% { opacity: 1; }
     80% {opacity:1}
 100% { opacity: 0; }
}

.ball3 {
    position: absolute;
    top:400px;
    left:300px;
    animation: showup ease-in-out 3s infinite alternate;
}

@keyframes showup{
   0% { opacity: 0; }
      50% { opacity: 1; }
 100% { opacity: 0; }
}
.ball3part2{
    position: absolute;
    top:490px;
    left:240px;
     animation: showup ease-in-out 3s infinite alternate;
        
}

.magicball{
    position: absolute;
    top:505px;
    left:650px;
}



.poster{
    position: absolute;
    top:740px;
    left: 600px;
    animation: swing ease-in-out 1s infinite alternate;
    transform-origin: 40px 20px;
}



.ball1{
    position: absolute;
    top: 1020px;
    left:740px;  
  animation: bounce 0.5s;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(.5,0.05,1,.5);
  animation-iteration-count: infinite;
}
   

.rightball {
    position: absolute;
    top:100px;
    left:870px;
    opacity:0;
    animation: suprise 2s infinite; 
}

.rightball:hover {opacity:1}

@keyframes swing {
    0% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
    
}
    @keyframes bounce {
  from { transform: translate3d(0, 0, 0);     }
  to   { transform: translate3d(0, 200px, 0); }
}

@keyframes pulse_animation {
    0% { transform: scale(.2); }
    30% { transform: scale(.3); }
    40% { transform: scale(.4); }
    50% { transform: scale(1); }
    60% { transform: scale(1); }
    70% { transform: scale(.4); }
    80% { transform: scale(.3); }
    100% { transform: scale(.2); }
}

@keyframes mover {
    0% { transform: translateY(-910); }
    100% { transform: translateY(-1800px); }
}

   
    
 @keyframes suprise  {
    0% { transform: translateX(-40px); }
     100% { transform: translateY(40px); }}