.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* spin */
.spin {
-webkit-animation:spin 50s infinite linear;
-moz-animation:spin 50s infinite linear;
-o-animation:spin 50s infinite linear;
animation:spin 50s infinite linear;
}

@-moz-keyframes spin{
	0%{-moz-transform:rotate(0deg)}
	100%{-moz-transform:rotate(359deg)}
}

@-webkit-keyframes spin{
	0%{-webkit-transform:rotate(0deg)}
	100%{-webkit-transform:rotate(359deg)}
}

@-o-keyframes spin{
	0%{-o-transform:rotate(0deg)}
	100%{-o-transform:rotate(359deg)}
}

@-ms-keyframes spin{
	0%{-ms-transform:rotate(0deg)}
	100%{-ms-transform:rotate(359deg)}
}

@keyframes spin{
	0%{transform:rotate(0deg)}
	100%{transform:rotate(359deg)}
}


/*blink*/
.blink{
-webkit-animation:blink 10s infinite;
-moz-animation:blink 10s infinite;
-o-animation:blink 10s infinite;
animation:blink 10s infinite;}

}

@-webkit-keyframes blink{

    0%{ opacity:0;}
	25%{ opacity:0.5;}
	50%{ opacity:1;}
	75%{ opacity:0.5;}
    100%{opacity:0;}
}

@-moz-keyframes blink{

    0%{ opacity:0;}
	25%{ opacity:0.7;}
	50%{ opacity:1;}
	75%{ opacity:0.7;}
    100%{opacity:0;}

}

@keyframes blink{

    0%{ opacity:0;}
	25%{ opacity:0.5;}
	50%{ opacity:1;}
	75%{ opacity:0.5;}
    100%{opacity:0;}

}


/*fadeInLeft*/
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-200px);
    -ms-transform: translateX(-200px);
    transform: translateX(-200px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}


/*fadeInRight*/
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}


@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(200px);
    -ms-transform: translateX(200px);
    transform: translateX(200px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}



/* swing */
.swing {

animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
  animation-duration: 10s;	
	-webkit-animation-duration: 10s;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}



/* clouds */
.clouds_one {
  background: url("../images/shakti/cloud_one.png");
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
    z-index:1; opacity:0.7;
  -webkit-animation: cloud_one 150s linear infinite;
  -moz-animation: cloud_one 150s linear infinite;
  -o-animation: cloud_one 150s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}

.clouds_two {
  background: url("../images/shakti/cloud_two.png");
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
    z-index:1; opacity:0.7;
  -webkit-animation: cloud_two 175s linear infinite;
  -moz-animation: cloud_two 175s linear infinite;
  -o-animation: cloud_two 175s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}


.clouds_three {
  background: url("../images/shakti/cloud_three.png");
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  z-index:1; opacity:0.7;
  -webkit-animation: cloud_three 200s linear infinite;
  -moz-animation: cloud_three 200s linear infinite;
  -o-animation: cloud_three 200s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}



@-webkit-keyframes cloud_one {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@-webkit-keyframes cloud_two {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@-webkit-keyframes cloud_three {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@-moz-keyframes cloud_one {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@-moz-keyframes cloud_two {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@-moz-keyframes cloud_three {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}


/* fadeInDown */
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    transform: translateY(-100px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}


/* pulse */
.pulse{
	animation-name: pulse;
	-webkit-animation-name: pulse;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.97);
		opacity: 0.7;		
	}
	50% {
		transform: scale(1);
		opacity: 1;	
	}	
	100% {
		transform: scale(0.97);
		opacity: 0.7;	
	}			
}

@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale(0.97);
		opacity: 0.7;		
	}
	50% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(0.97);
		opacity: 0.7;	
	}			
}



.dreamStarPulse{
	animation-name: dreamStarPulse;
	-webkit-animation-name: dreamStarPulse;	

	animation-duration:6s;	
	-webkit-animation-duration:6s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes dreamStarPulse {
	0% {
		opacity: 0.1;	
	}
	50% {
		opacity: 0.5;	
	}	
	100% {
		opacity: 0.1;	
	}			
}
@-webkit-keyframes dreamStarPulse {
	0% {
		opacity: 0.1;	
	}
	50% {
		opacity: 0.5;	
	}	
	100% {
		opacity: 0.1;	
	}			
}



.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
  
animation-duration:12s;	
	-webkit-animation-duration:12s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}


@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateY(5px);
    -ms-transform: translateY(5px);
    transform: translateY(5px);
  }
}

.snowingArea {
	background-image: url('../images/musicCard/snow1.png'), url('../images/musicCard/snow2.png'), url('../images/musicCard/snow3.png');	 
	-webkit-animation: snow 20s linear infinite;
	-moz-animation: snow 20s linear infinite;
	-ms-animation: snow 20s linear infinite;
	animation: snow 20s linear infinite; height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index:1;   }
	
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
 
@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
 
 
@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px; }
}
)
 
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}


.heart {
	background-image: url('../images/musicCard/heart1.png');	 
	-webkit-animation: heart 20s linear infinite;
	-moz-animation: heart 20s linear infinite;
	-ms-animation: heart 20s linear infinite;
	animation: heart 20s linear infinite; height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index:1;  
	}
	
	
@keyframes heart {
0% {background-position:  0 300px}
100% {background-position:0px 0px; }
}


@-moz-keyframes heart {
0% {background-position:  0 300px}
100% {background-position:0px 0px; }
}
 
 
@-webkit-keyframes heart {
0% {background-position:  0 300px}
100% {background-position:0px 0px; }
}
)
 
@-ms-keyframes heart {
0% {background-position:  0 300px}
100% {background-position:0px 0px; }
}

 @keyframes heartFadeInOut {
  0% {transform: scale(1);}
  50% {transform: scale(.97);}
  75% {transform: scale(1.02);}
  100% {transform: scale(1);}
}

.valentineHeart .heartRt, .valentineHeart .heartLt { 
  animation-name: heartFadeInOut; 
  animation-iteration-count: infinite;
  animation-duration: 2s;
}



/*-----------------------------Abhi & Anu - Animations -----------------------------------------*/

/* clouds */
.ana_clouds_one {
  background: url("../images/shakti/cloud_one.png"); position:absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
    z-index:1; opacity:0.2;
  -webkit-animation: cloud_one 150s linear infinite;
  -moz-animation: cloud_one 150s linear infinite;
  -o-animation: cloud_one 150s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  height:499px;
}

.ana_clouds_two {
  background: url("../images/shakti/cloud_two.png"); position:absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
    z-index:1; opacity:0.2;
  -webkit-animation: cloud_two 175s linear infinite;
  -moz-animation: cloud_two 175s linear infinite;
  -o-animation: cloud_two 175s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  height:499px;
}

@-webkit-keyframes ana_cloud_one {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@-webkit-keyframes ana_cloud_two {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
}

@-moz-keyframes ana_cloud_one {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@-moz-keyframes ana_cloud_two {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
}


/* rain */
.weather {
    position: relative; overflow: hidden;
}

.weather:before, .weather:after {
    content: "";
    position: absolute; left: -50%; top:0%; right: -50%; bottom:0%;
    z-index: 2;
    pointer-events: none;
   background: transparent repeat;
     /*background-size: 256px 1024px;*/
   -ms-interpolation-mode: nearest-neighbor;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -webkit-crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
	image-rendering: pixelated; 
    opacity:0.6;
    width:auto;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    
    -webkit-animation-name: weather;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-name: weather;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
	height:705px;
}
.weather:after {
    opacity: 0.5;
    -webkit-animation-name: weather2;
    animation-name: weather2;
}
/* rain (fast, rain.png) */
.weather.rain:before, .weather.rain:after {
    background-image: url(../images/yoodlee/abhiNanu/rain.png);
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
}
.weather.rain:after {
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
}

/* animation keyframes */
@-webkit-keyframes weather {
    from { background-position: 0 0px; }
    to { background-position: 0 1024px; }
}
@keyframes weather {
    from { background-position: 0 0px; }
    to { background-position: 0 1024px; }
}
@-webkit-keyframes weather2 {
    from { background-position: 64px 64px; }
    to { background-position: 64px 1088px; }
}
@keyframes weather2 {
    from { background-position: 64px 64px; }
    to { background-position: 64px 1088px; }
}



.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
  
	animation-duration:15s;	
	-webkit-animation-duration: 15s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	
}
@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  0%, 50%, 100% {
    opacity: 0.8;
  }

  25%, 75% {
    opacity: 0;
  }
}



.floating{
	animation-name: floating;
	-webkit-animation-name: floating;

	animation-duration:6s;	
	-webkit-animation-duration:6s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes floating {
	0% {
		transform: translateY(0%);	
	}
	50% {
		transform: translateY(2%);	
	}	
	100% {
		transform: translateY(0%);
	}			
}

@-webkit-keyframes floating {
	0% {
		-webkit-transform: translateY(0%);	
	}
	50% {
		-webkit-transform: translateY(2%);	
	}	
	100% {
		-webkit-transform: translateY(0%);
	}			
}


.heart_floating{
	animation-name: floating;
	-webkit-animation-name: floating;

	animation-duration:3s;	
	-webkit-animation-duration:3s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes heart_floating {
	0% {
		transform: translateY(0%);	
	}
	50% {
		transform: translateY(0.5%);	
	}	
	100% {
		transform: translateY(0%);
	}			
}

@-webkit-keyframes heart_floating {
	0% {
		-webkit-transform: translateY(0%);	
	}
	50% {
		-webkit-transform: translateY(0.5%);	
	}	
	100% {
		-webkit-transform: translateY(0%);
	}			
}


.wobble{
	animation-name: wobble;
	-webkit-animation-name: wobble;

	animation-duration:3s;	
	-webkit-animation-duration:3s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes wobble {
25%{transform: translateY(-1px) rotateZ(0.2deg); }
50%{transform: translateY(1px);}
75%{transform: translateY(-1px)  rotateZ(-0.2deg); }
100%{transform: translateY(1px);}
}