/*Content CSS ================================================================== */
		#background1{
			position: absolute;
			width: 300px;
			height: 250px;
			background-color:#fff;
			background:url(sprite.png) 0px 0px;	
			z-index:1;
			display:block;
		}
    #smoothie{
      position: absolute;
      background: url(sprite.png) 598px -42px;
      width: 73px;
      height: 155px;
      left: 111px;
      top: 17px;
      z-index: 3;

      animation-name: shake-rotate, fadeInSmoothie;
      animation-duration: 0.8s, 2.5s;
      animation-delay: 0s;
      transform-origin:50% 50%;
      animation-iteration-count: 3, 1;
      transition-timing-function:linear;
      animation-fill-mode: forwards;

      -moz-animation-name: shake-rotate, fadeInSmoothie;
      -moz-animation-duration: 0.8s, 2.5s;
      -moz-animation-delay: 0s;
      -moz-transform-origin:50% 50%;
      -moz-animation-iteration-count: 3, 1;
      -moz-transition-timing-function:linear;
      -moz-animation-fill-mode: forwards;

      -webkit-animation-name: shake-rotate, fadeInSmoothie;
      -webkit-animation-duration: 0.8s, 2.5s;
      -webkit-animation-delay: 0s;
      -webkit-transform-origin:50% 50%;
      -webkit-animation-iteration-count: 3, 1;
      -webkit-transition-timing-function:linear;
      -webkit-animation-fill-mode: forwards;
    }
    @keyframes shake-rotate{
        0%{transform: rotate(0deg)}
        10%{transform: rotate(-2deg)}
        20%{transform: rotate(2deg)}
        30%{transform: rotate(0deg)}
        40%{transform: rotate(2deg)}
        50%{transform: rotate(-2deg)}
        60%{transform: rotate(0deg)}
        70%{transform: rotate(-2deg)}
        80%{transform: rotate(2deg)}
        90%{transform: rotate(0deg)}
        100%{transform: rotate(-2deg)}
      }
    @-moz-keyframes shake-rotate{
        0%{-moz-transform: rotate(0deg)}
        10%{-moz-transform: rotate(-2deg)}
        20%{-moz-transform: rotate(2deg)}
        30%{-moz-transform: rotate(0deg)}
        40%{-moz-transform: rotate(2deg)}
        50%{-moz-transform: rotate(-2deg)}
        60%{-moz-transform: rotate(0deg)}
        70%{-moz-transform: rotate(-2deg)}
        80%{-moz-transform: rotate(2deg)}
        90%{-moz-transform: rotate(0deg)}
        100%{-moz-transform: rotate(-2deg)}
      }
    @-webkit-keyframes shake-rotate{
        0%{-webkit-transform: rotate(0deg)}
        10%{-webkit-transform: rotate(-2deg)}
        20%{-webkit-transform: rotate(2deg) }
        30%{-webkit-transform: rotate(0deg)}
        40%{-webkit-transform: rotate(2deg)}
        50%{-webkit-transform: rotate(-2deg)}
        60%{-webkit-transform: rotate(0deg)}
        70%{-webkit-transform: rotate(-2deg)}
        80%{-webkit-transform: rotate(2deg)}
        90%{-webkit-transform: rotate(0deg)}
        100%{-webkit-transform: rotate(-2deg)}
      }

      @-webkit-keyframes fadeInSmoothie{
      0%{opacity:0;}
      30%{opacity:1;}
      65%{opacity:1;}
      88%{opacity:1;}
      100%{opacity:0;}
    }
    @keyframes fadeInSmoothie{
      0%{opacity:0;}
      30%{opacity:1;}
      65%{opacity:1;}
      88%{opacity:1;}
      100%{opacity:0;}
    }
    @-moz-keyframes fadeInSmoothie{
      0%{opacity:0;}
      30%{opacity:1;}
      65%{opacity:1;}
      88%{opacity:1;}
      100%{opacity:0;}
    }
    #smoothieTxt{
      position: absolute;
      background: url(sprite.png) 594px -193px;
      width: 268px;
      height: 39px;
      left: 17px;
      top: 189px;
      z-index: 3;

      animation-name: fadeInSmoothieTxt;
      animation-duration: 2.5s;
      animation-delay: 0s;
      animation-fill-mode: forwards;

      -moz-animation-name: fadeInSmoothieTxt;
      -moz-animation-duration: 2.5s;
      -moz-animation-delay: 0s;
      -moz-animation-fill-mode: forwards;

      -webkit-animation-name: fadeInSmoothieTxt;
      -webkit-animation-duration: 2.5s;
      -webkit-animation-delay: 0s;
      -webkit-animation-fill-mode: forwards;
    }
    @-webkit-keyframes fadeInSmoothieTxt{
      0%{opacity:0;}
      20%{opacity:0;}
      40%{opacity:1;}
      88%{opacity:1;}
      100%{opacity:0;}
    }
    @-moz-keyframes fadeInSmoothieTxt{
      0%{opacity:0;}
      20%{opacity:0;}
      40%{opacity:1;}
      88%{opacity:1;}
      100%{opacity:0;}
    }
    @keyframes fadeInSmoothieTxt{
      0%{opacity:0;}
      20%{opacity:0;}
      40%{opacity:1;}
      88%{opacity:1;}
      100%{opacity:0;}
    }
    #kettlebell{
      position: absolute;
      background: url(sprite.png) 526px -46px;
      width: 115px;
      height: 147px;
      left: 93px;
      top: 30px;
      z-index: 3;
      opacity: 0;

      animation-name: swing, fadeInSmoothie;
      animation-duration: 2s, 2.4s;
      animation-delay: 2.5s;
      transform-origin:center top;
      animation-iteration-count: 1, 1;
      transition-timing-function:linear;
      animation-fill-mode: forwards;

      -moz-animation-name: swing, fadeInSmoothie;
      -moz-animation-duration: 2s, 2.4s;
      -moz-animation-delay: 2.5s;
      -moz-transform-origin:center top;
      -moz-animation-iteration-count: 1, 1;
      -moz-transition-timing-function:linear;
      -moz-animation-fill-mode: forwards;

      -webkit-animation-name: swing, fadeInSmoothie;
      -webkit-animation-duration: 2s, 2.4s;
      -webkit-animation-delay: 2.5s;
      -webkit-transform-origin:center top;
      -webkit-animation-iteration-count: 1, 1;
      -webkit-transition-timing-function:linear;
      -webkit-animation-fill-mode: forwards;
    }  
    @-webkit-keyframes swing{
      0%{-webkit-transform:rotate(0deg);}
      30%{-webkit-transform:rotate(-40deg);}
      60%{-webkit-transform:rotate(40deg);}
      100%{-webkit-transform:rotate(0deg);}
    }
    @-moz-keyframes swing{
      0%{-moz-transform:rotate(0deg);}
      30%{-moz-transform:rotate(-40deg);}
      60%{-moz-transform:rotate(40deg);}
      100%{-moz-transform:rotate(0deg);}
    }
    @keyframes swing{
      0%{transform:rotate(0deg);}
      30%{transform:rotate(-40deg);}
      60%{transform:rotate(40deg);}
      100%{transform:rotate(0deg);}
    }
    #kettlebellShadow{
      position: absolute;
      background: url(sprite.png) 526px -15px;
      width: 115px;
      height: 30px;
      left: 93px;
      top: 154px;
      z-index: 2;
      opacity: 0;

      animation-name: swingShadow, fadeInSmoothie, swingShadowOP;
      animation-duration: 2s, 2.4s, 2.3s;
      animation-delay: 2.5s;
      animation-fill-mode: forwards;

      -moz-animation-name: swingShadow, fadeInSmoothie, swingShadowOP;
      -moz-animation-duration: 2s, 2.4s, 2.3s;
      -moz-animation-delay: 2.5s;
      -moz-animation-fill-mode: forwards;

      -webkit-animation-name: swingShadow, fadeInSmoothie, swingShadowOP;
      -webkit-animation-duration: 2s, 2.4s, 2.3s;
      -webkit-animation-delay: 2.5s;
      -webkit-animation-fill-mode: forwards;
    }

    @-webkit-keyframes swingShadow{
      0%{left: 93px; }
      30%{left: 180px; }
      60%{left: 10px;  }
      100%{left: 93px;  }
    }
    @-moz-keyframes swingShadow{
      0%{left: 93px;  }
      30%{left: 180px; }
      60%{left: 10px; }
      100%{left: 93px;  }
    }
    @keyframes swingShadow{
      0%{left: 93px;}
      30%{left: 180px;}
      60%{left: 10px;}
      100%{left: 93px;}
    }

    @-webkit-keyframes swingShadowOP{
      0%{opacity: 1;}
      30%{opacity: 0.4;}
      60%{opacity: 0.4;}
      90%{opacity: 1;}
      100%{opacity: 0;}
    }
    @-moz-keyframes swingShadowOP{
      0%{opacity: 1;}
      30%{opacity: 0.4;}
      60%{opacity: 0.4;}
      90%{opacity: 1;}
      100%{opacity: 0;}
    }
    @keyframes swingShadowOP{
      0%{opacity: 1;}
      30%{opacity: 0.4;}
      60%{opacity: 0.4;}
      90%{opacity: 1;}
      100%{opacity: 0;}
    }

    
    #kettlebellTxt{
      position: absolute;
      background: url(sprite.png) 328px -191px;
      width: 216px;
      height: 40px;
      left: 41px;
      top: 189px;
      z-index: 3;
      opacity: 0;
      animation-name: fadeInSmoothieTxt;
      animation-duration: 2.3s;
      animation-delay: 2.5s;
      animation-fill-mode: forwards;

      -moz-animation-name: fadeInSmoothieTxt;
      -moz-animation-duration: 2.3s;
      -moz-animation-delay: 2.5s;
      -moz-animation-fill-mode: forwards;

      -webkit-animation-name: fadeInSmoothieTxt;
      -webkit-animation-duration: 2.3s;
      -webkit-animation-delay: 2.5s;
      -webkit-animation-fill-mode: forwards;
    }
    #book1{
      position: absolute;
      background: url(sprite.png) 408px -8px;
      width: 124px;
      height: 20px;
      left: 77px;
      top: 36px;
      z-index: 3;
      opacity: 0;
      animation-name: fadeInBook, fadeOutBook;
      animation-duration: 1s;
      animation-delay: 7.4s,8.28s;
      animation-fill-mode: forwards;

      -moz-animation-name: fadeInBook, fadeOutBook;
      -moz-animation-duration: 1s;
      -moz-animation-delay: 7.4s,8.28s;
      -moz-animation-fill-mode: forwards;

      -webkit-animation-name: fadeInBook, fadeOutBook;
      -webkit-animation-duration: 1s;
      -webkit-animation-delay: 7.4s,8.28s;
      -webkit-animation-fill-mode: forwards;

    }
    @-webkit-keyframes fadeInBook{
       0%{opacity:0;}
      100%{opacity:1;}
    }
     @-webkit-keyframes fadeOutBook{
       0%{opacity:1;}
      100%{opacity:0;}
    }
    @keyframes fadeInBook{
       0%{opacity:0;}
      100%{opacity:1;}
    }
     @keyframes fadeOutBook{
       0%{opacity:1;}
      100%{opacity:0;}
    }
    @-moz-keyframes fadeInBook{
       0%{opacity:0;}
      100%{opacity:1;}
    }
     @-moz-keyframes fadeOutBook{
       0%{opacity:1;}
      100%{opacity:0;}
    }

    #book5{
      position: absolute;
      background: url(sprite.png) 823px -80px;
      width: 165px;
      height: 29px;
      left: 72px;
      top: 45px;
      z-index: 3;
      opacity: 0;
      
      -webkit-animation-name: fadeInBook, fadeOutBook;
      -webkit-animation-duration: 1s;
      -webkit-animation-delay: 6.4s,8.28s;
      -webkit-animation-fill-mode: forwards;
      
       -moz-animation-name: fadeInBook, fadeOutBook;
       -moz-animation-duration: 1s;
       -moz-animation-delay: 6.4s,8.28s;
       -moz-animation-fill-mode: forwards;
      
      animation-name: fadeInBook, fadeOutBook;
      animation-duration: 1s;
      animation-delay: 6.4s,8.28s;
      animation-fill-mode: forwards;
    }
    
    #book6{
     position: absolute;
    background: url(sprite.png) 817px -117px;
    width: 172px;
    height: 23px;
    left: 74px;
    top: 74px;
    z-index: 3;
      opacity: 0;
      
     -webkit-animation-name: fadeInBook, fadeOutBook;
     -webkit-animation-duration: 1s;
     -webkit-animation-delay: 6s,8.28s;
     -webkit-animation-fill-mode: forwards;
      
      -moz-animation-name: fadeInBook, fadeOutBook;
      -moz-animation-duration: 1s;
      -moz-animation-delay: 6s,8.28s;
      -moz-animation-fill-mode: forwards;
      
     animation-name: fadeInBook, fadeOutBook;
     animation-duration: 1s;
     animation-delay: 6s,8.28s;
     animation-fill-mode: forwards;

    }
    
    #book7{
     position: absolute;
    background: url(sprite.png) 840px -141px;
    width: 183px;
    height: 29px;
    left: 56px;
    top: 92px;
      z-index: 3;    
      opacity: 0;
      
     -webkit-animation-name: fadeInBook,fadeOutBook;
     -webkit-animation-duration: 1s;
     -webkit-animation-delay: 5.7s,8.28s;
     -webkit-animation-fill-mode: forwards;
      
      -moz-animation-name: fadeInBook,fadeOutBook;
      -moz-animation-duration: 1s;
      -moz-animation-delay: 5.7s,8.28s;
      -moz-animation-fill-mode: forwards;
      
     animation-name: fadeInBook,fadeOutBook;
     animation-duration: 1s;
     animation-delay: 5.7s,8.28s;
     animation-fill-mode: forwards;

    }
    
    #book8{
     position: absolute;
    background: url(sprite.png) 825px -176px;
    width: 180px;
    height: 50px;
    left: 65px;
    top: 118px;
      z-index: 3;
      opacity: 0;
      
      -webkit-animation-name: fadeInBook,fadeOutBook;
      -webkit-animation-duration: 1s;
      -webkit-animation-delay: 5.3s,8.28s;
      -webkit-animation-fill-mode: forwards;
      
      animation-name: fadeInBook,fadeOutBook;
      animation-duration: 1s;
      animation-delay: 5.3s,8.28s;
     -animation-fill-mode: forwards;
      
       -moz-animation-name: fadeInBook,fadeOutBook;
       -moz-animation-duration: 1s;
       -moz-animation-delay: 5.3s,8.28s;
       -moz-animation-fill-mode: forwards;
    }
    
    #bookTxt{
      position: absolute;
      background: url(sprite.png) 260px -150px;
      width: 241px;
      height: 40px;
      left: 30px;
      top: 189px;
      z-index: 3;
      opacity: 0;
      
      animation-name: fadeInSmoothieTxt;
      animation-duration: 4s;
      animation-delay:5s;
      animation-fill-mode: forwards;

      -moz-animation-name: fadeInSmoothieTxt;
      -moz-animation-duration: 4s;
      -moz-animation-delay: 5s;
      -moz-animation-fill-mode: forwards;

      -webkit-animation-name: fadeInSmoothieTxt;
      -webkit-animation-duration: 4s;
      -webkit-animation-delay: 5s;
      -webkit-animation-fill-mode: forwards;
    }
    #background2{
      position: absolute;
      width: 300px;
      height: 248px;
      background-color: #fff;
      background: url(sprite.png) -301px -9px;
      z-index: 3;
      display: block;
      bottom: -10px;
      left: 0px;
      opacity: 0;

      animation-name: sideUpBg;
      animation-duration: 1s;
      animation-delay: 10.7s;
      animation-fill-mode: forwards;

      -moz-animation-name: sideUpBg;
      -moz-animation-duration: 1s;
      -moz-animation-delay: 10.7s;
      -moz-animation-fill-mode: forwards;

      -webkit-animation-name: sideUpBg;
      -webkit-animation-duration: 1s;
      -webkit-animation-delay: 10.7s;
      -webkit-animation-fill-mode: forwards;
    }
    @keyframes sideUpBg{
       0%{opacity:0;}
      100%{opacity:1;}
    }
    @-moz-keyframes sideUpBg{
       0%{opacity:0;}
      100%{opacity:1;}
    }
    @-webkit-keyframes sideUpBg{
       0%{opacity:0;}
      100%{opacity:1;}
    }
    
    #text4{
      position: absolute;
      background: url(sprite.png) 276px -10px;
      width: 139px;
      height: 35px;
      left: 81px;
      top: 110px;
      z-index: 5;
      opacity: 0;

      animation-name: sideUpBg, sideUpText4, fadeOutBook;
      animation-duration: 0.5s, 0.8s, 1s;
      animation-delay: 8.95s, 10.3s, 13s;
      animation-fill-mode: forwards;

      -moz-animation-name: sideUpBg, sideUpText4, fadeOutBook;
      -moz-animation-duration: 0.5s, 0.8s, 1s;
      -moz-animation-delay: 8.95s,  10.3s, 13;
      -moz-animation-fill-mode: forwards;

      -webkit-animation-name: sideUpBg, sideUpText4, fadeOutBook;
      -webkit-animation-duration: 0.5s, 0.8s, 1s;
      -webkit-animation-delay: 8.95s, 10.3s, 13s;
      -webkit-animation-fill-mode: forwards;
    }
    
    @keyframes sideUpText4{
       0%{top:110px;}
      100%{top:15px;}
    }
    @-moz-keyframes sideUpText4{
       0%{top:110px;}
      100%{top:15px;}
    }
    @-webkit-keyframes sideUpText4{
       0%{top:110px;}
      100%{top:15px;}
    }
    #text5{
      position: absolute;
      background: url(sprite.png) 277px -96px;
      width: 270px;
      height: 38px;
      left: 13px;
      top: 22px;
      z-index: 5;
      opacity: 0;
      animation-name: fadeInBook;
      animation-duration: 1s;
      animation-delay: 13.5s;
      animation-fill-mode: forwards;

      -moz-animation-name: fadeInBook;
      -moz-animation-duration: 1s;
      -moz-animation-delay: 13.5s;
      -moz-animation-fill-mode: forwards;

      -webkit-animation-name: fadeInBook;
      -webkit-animation-duration: 1s;
      -webkit-animation-delay: 13.5s;
      -webkit-animation-fill-mode: forwards;
    }
    #text6{
      position: absolute;
      background: url(sprite.png) -607px -94px;
      width: 156px;
      height: 11px;
      left: 71px;
      top: 112px;
      z-index: 5;
      opacity: 0;
      animation-name: fadeInBook;
      animation-duration: 1s;
      animation-delay: 14.5s;
      animation-fill-mode: forwards;

      -moz-animation-name: fadeInBook;
      -moz-animation-duration: 1s;
      -moz-animation-delay: 14.5s;
      -moz-animation-fill-mode: forwards;

      -webkit-animation-name: fadeInBook;
      -webkit-animation-duration: 1s;
      -webkit-animation-delay: 14.5s;
      -webkit-animation-fill-mode: forwards;
    }
    
     #text7{
   	position: absolute;
    background: url(sprite.png)615px -236px;
    width: 300px;
    height: 14px;
    top: 168px;
    z-index: 3;
    opacity:0;
      
      animation-name: sideUpt;
      animation-duration: 1s;
      animation-delay: 11s;
      animation-fill-mode: forwards;

      -moz-animation-name: sideUpt;
      -moz-animation-duration: 1s;
      -moz-animation-delay: 11s;
      -moz-animation-fill-mode: forwards;

      -webkit-animation-name: sideUpt;
      -webkit-animation-duration: 1s;
      -webkit-animation-delay: 11s;
      -webkit-animation-fill-mode: forwards;
    }
    
    /*@keyframes sideUpt{
       0%{top:400px;}
      100%{top:168px;}
    }
    @-moz-keyframes sideUpt{
       0%{top:400px;}
      100%{top:168px;}
    }
    @-webkit-keyframes sideUpt{
       0%{top:400px;}
      100%{top:168px;}
    }*/
   
    @keyframes sideUpt{
       0%{opacity:0;}
      100%{opacity:1;}
    }
    @-moz-keyframes sideUpt{
         0%{opacity:0;}
      100%{opacity:1;}
    }
    @-webkit-keyframes sideUpt{
         0%{opacity:0;}
      100%{opacity:1;}
    }
    
    
    #pen{
      	position: absolute;
     	background: url(sprite.png)246px -56px;
     	 top: 375px;
   	 	 left: 90px;
		width:231px;
		height:40px;
		z-index:3;
		-webkit-animation-name:pen11,pen2;
		-webkit-transform: scale(.5,.5);
		-webkit-animation-delay:10s,13.5s;
		-webkit-animation-duration:1s,1s;
		-webkit-animation-fill-mode:forwards;
		-webkit-animation-iteration-count:1;

		 -moz-animation-name:pen11,pen2;
		 -moz-transform: scale(.5,.5);
		 -moz-animation-delay:10s,13.5s;
		 -moz-animation-duration:1s,1s;
		 -moz-animation-fill-mode:forwards;
		 -moz-animation-iteration-count:1;

		animation-name:pen11,pen2;
		transform: scale(.5,.5);
		animation-delay:10s,13.5s;
		animation-duration:1s,1s;
		animation-fill-mode:forwards;
		animation-iteration-count:1;

	}

@-webkit-keyframes pen11 { 0%{top:375px;} 100%{top:128px;}}
@-webkit-keyframes pen2 {0% {left: 90px;  top:128px; -webkit-transform: scale(.5,.5);}100% {left: 35px; top:66px; -webkit-transform: scale(1,1);}}

@-moz-keyframes pen11 { 0%{top:375px;} 100%{top:128px;}}
@-moz-keyframes pen2 {0% {left: 90px;  top:128px; -moz-transform: scale(.5,.5);}100% {left: 35px; top:66px; -moz-transform: scale(1,1);}}

@keyframes pen11 { 0%{top:375px;} 100%{top:128px;}}
@keyframes pen2 {0% {left: 90px;  top:128px; transform: scale(.5,.5);}100% {left: 35px; top:66px; transform: scale(1,1);}}



    .textt2{
      position: absolute;
      background: url(sprite.png) -605px 0px;
      width: 298px;
      height: 70px;
      top: 375px;
      z-index: 5;
      
      animation-name: sideUpPen,fadeOutBook;
      animation-duration: 1s,1s;
      animation-delay: 10s,13;
      animation-fill-mode: forwards;

      -moz-animation-name: sideUpPen,fadeOutBook;
      -moz-animation-duration: 1s,1s;
      -moz-animation-delay: 10s,13s;
      -moz-animation-fill-mode: forwards;

      -webkit-animation-name: sideUpPen,fadeOutBook;
      -webkit-animation-duration: 1s,1s;
      -webkit-animation-delay: 10s,13s;
      -webkit-animation-fill-mode: forwards;
   		
   }
   
   
    @keyframes sideUpPen{
       0%{top:375px;}
      100%{top:53px;}
    }
    @-moz-keyframes sideUpPen{
       0%{top:375px;}
      100%{top:53px;}
    }
    @-webkit-keyframes sideUpPen{
       0%{top:375px;}
      100%{top:53px;}
    }

    #logo{
      position: absolute;
      background: url(sprite.png) 127px -11px;
      width: 118px;
      height: 39px;
      left: 11px;
      top: 421px;
      z-index: 5;
      animation-name: sideUpLogo;
      animation-duration: 1s;
      animation-delay: 10s;
      animation-fill-mode: forwards;

      -moz-animation-name: sideUpLogo;
      -moz-animation-duration: 1s;
      -moz-animation-delay: 10s;
      -moz-animation-fill-mode: forwards;

      -webkit-animation-name: sideUpLogo;
      -webkit-animation-duration: 1s;
      -webkit-animation-delay: 10s;
      -webkit-animation-fill-mode: forwards;
    }
    @keyframes sideUpLogo{
       0%{top:421px;}
      100%{top:127px;}
    }
    @-moz-keyframes sideUpLogo{
       0%{top:421px;}
      100%{top:127px;}
    }
    @-webkit-keyframes sideUpLogo{
       0%{top:421px;}
      100%{top:127px;}
    }
    #textArea{
      position: absolute;
      cursor:pointer;
      width: 241px;
      height: 40px;
      left: 0px;
      top: 169px;
      z-index: 12;
      opacity:0;
      animation-name: sideUptextArea;
      animation-duration: 1s;
      animation-delay: 11s;
      animation-fill-mode: forwards;

      -moz-animation-name: sideUptextArea;
      -moz-animation-duration: 1s;
      -moz-animation-delay: 11s;
      -moz-animation-fill-mode: forwards;

      -webkit-animation-name: sideUptextArea;
      -webkit-animation-duration: 1s;
      -webkit-animation-delay: 11s;
      -webkit-animation-fill-mode: forwards;
     }
        
    @keyframes sideUptextArea{
       0%{opacity:0;}
      100%{opacity:1;}
    }
    @-moz-keyframes sideUptextArea{
     0%{opacity:0;}
      100%{opacity:1;}
    }
    @-webkit-keyframes sideUptextArea{
        0%{opacity:0;}
      100%{opacity:1;}
    }
    #footer{
      position: absolute;
      cursor: pointer;
      background: url(sprite.png) 300px -231px;
      width: 300px;
      height: 18px;
      left: 0px;
      top: -20px;
      z-index: 55;
      opacity:0;
      animation-name: sideUpfooter;
      animation-duration: 1s;
      animation-delay: 11s;
      animation-fill-mode: forwards;

      -moz-animation-name: sideUpfooter;
      -moz-animation-duration: 1s;
      -moz-animation-delay: 11s;
      -moz-animation-fill-mode: forwards;

      -webkit-animation-name: sideUpfooter;
      -webkit-animation-duration: 1s;
      -webkit-animation-delay: 11s;
      -webkit-animation-fill-mode: forwards;
    }
    
    @keyframes sideUpfooter{
       0%{opacity:0;top: 230px}
      100%{opacity:1;top: 230px}
    }
    @-moz-keyframes sideUpfooter{
       0%{opacity:0;top: 230px}
      100%{opacity:1;top: 230px}
    }
    @-webkit-keyframes sideUpfooter{
    0%{opacity:0;top: 230px}
      100%{opacity:1;top: 230px}
    }
    #cta{
      position: absolute;
      background: url(sprite.png) 98px -193px;
      width: 98px;
      height: 24px;
      left: 202px;
      top: 134px;
      z-index: 5;
      opacity: 0;
      animation-name: fadeInBook;
      animation-duration: 1s;
      animation-delay: 14s;
      animation-fill-mode: forwards;

      -moz-animation-name: fadeInBook;
      -moz-animation-duration: 1s;
      -moz-animation-delay: 14s;
      -moz-animation-fill-mode: forwards;

      -webkit-animation-name: fadeInBook;
      -webkit-animation-duration: 1s;
      -webkit-animation-delay: 14s;
      -webkit-animation-fill-mode: forwards;
    }

    #ref{
      position: absolute;           
      width: 300px;
      height: 250px;
      left:0px;
      top:0px;
      z-index:2;
      opacity: 0.5;
      z-index: 4;
    }