@charset "UTF-8";

/* =============================================
CSS information
 file name  :  animation.css
 style info :  aura contents Desining
============================================= */
#aura_magic{
background: url('../img/magic_1.png') no-repeat;
position:fixed;
top:200px;
left:50%;
width:500px;
height:500px;
margin-left:-250px;
  -o-animation:bg-color 1.8s infinite;
  -ms-animation:bg-color 1.8s infinite;
  -moz-animation:bg-color 1.8s infinite;
  -webkit-animation:bg-color 1.8s infinite;
  animation:bg-color 1.8s infinite;
z-index:-1;
}
@-webkit-keyframes bg-color {
  0% { background: url('../img/magic_1.png') no-repeat;}
  10% { background: url('../img/magic_2.png') no-repeat;}
  15% { background: url('../img/magic_3.png') no-repeat;}
  20% { background: url('../img/magic_4.png') no-repeat;}
  25% { background: url('../img/magic_5.png') no-repeat;}
  30% { background: url('../img/magic_6.png') no-repeat;}
  35% { background: url('../img/magic_7.png') no-repeat;}
  40% { background: url('../img/magic_8.png') no-repeat;}
  45% { background: url('../img/magic_9.png') no-repeat;}
  50% { background: url('../img/magic_10.png') no-repeat;}
  60% { background: url('../img/magic_11.png') no-repeat;}
  70% { background: url('../img/magic_12.png') no-repeat;}
  80% { background: url('../img/magic_13.png') no-repeat;}
  90% { background: url('../img/magic_14.png') no-repeat;}
  100% { background: url('../img/magic_15.png') no-repeat;}
}
@-moz-keyframes bg-color {
  0% { background: url('../img/magic_1.png') no-repeat;}
  10% { background: url('../img/magic_2.png') no-repeat;}
  15% { background: url('../img/magic_3.png') no-repeat;}
  20% { background: url('../img/magic_4.png') no-repeat;}
  25% { background: url('../img/magic_5.png') no-repeat;}
  30% { background: url('../img/magic_6.png') no-repeat;}
  35% { background: url('../img/magic_7.png') no-repeat;}
  40% { background: url('../img/magic_8.png') no-repeat;}
  45% { background: url('../img/magic_9.png') no-repeat;}
  50% { background: url('../img/magic_10.png') no-repeat;}
  60% { background: url('../img/magic_11.png') no-repeat;}
  70% { background: url('../img/magic_12.png') no-repeat;}
  80% { background: url('../img/magic_13.png') no-repeat;}
  90% { background: url('../img/magic_14.png') no-repeat;}
  100% { background: url('../img/magic_15.png') no-repeat;}
}
@-ms-keyframes bg-color {
  0% { background: url('../img/magic_1.png') no-repeat;}
  10% { background: url('../img/magic_2.png') no-repeat;}
  15% { background: url('../img/magic_3.png') no-repeat;}
  20% { background: url('../img/magic_4.png') no-repeat;}
  25% { background: url('../img/magic_5.png') no-repeat;}
  30% { background: url('../img/magic_6.png') no-repeat;}
  35% { background: url('../img/magic_7.png') no-repeat;}
  40% { background: url('../img/magic_8.png') no-repeat;}
  45% { background: url('../img/magic_9.png') no-repeat;}
  50% { background: url('../img/magic_10.png') no-repeat;}
  60% { background: url('../img/magic_11.png') no-repeat;}
  70% { background: url('../img/magic_12.png') no-repeat;}
  80% { background: url('../img/magic_13.png') no-repeat;}
  90% { background: url('../img/magic_14.png') no-repeat;}
  100% { background: url('../img/magic_15.png') no-repeat;}
}
@-o-keyframes bg-color {
  0% { background: url('../img/magic_1.png') no-repeat;}
  10% { background: url('../img/magic_2.png') no-repeat;}
  15% { background: url('../img/magic_3.png') no-repeat;}
  20% { background: url('../img/magic_4.png') no-repeat;}
  25% { background: url('../img/magic_5.png') no-repeat;}
  30% { background: url('../img/magic_6.png') no-repeat;}
  35% { background: url('../img/magic_7.png') no-repeat;}
  40% { background: url('../img/magic_8.png') no-repeat;}
  45% { background: url('../img/magic_9.png') no-repeat;}
  50% { background: url('../img/magic_10.png') no-repeat;}
  60% { background: url('../img/magic_11.png') no-repeat;}
  70% { background: url('../img/magic_12.png') no-repeat;}
  80% { background: url('../img/magic_13.png') no-repeat;}
  90% { background: url('../img/magic_14.png') no-repeat;}
  100% { background: url('../img/magic_15.png') no-repeat;}
}
@keyframes bg-color {
  0% { background: url('../img/magic_1.png') no-repeat;}
  10% { background: url('../img/magic_2.png') no-repeat;}
  15% { background: url('../img/magic_3.png') no-repeat;}
  20% { background: url('../img/magic_4.png') no-repeat;}
  25% { background: url('../img/magic_5.png') no-repeat;}
  30% { background: url('../img/magic_6.png') no-repeat;}
  35% { background: url('../img/magic_7.png') no-repeat;}
  40% { background: url('../img/magic_8.png') no-repeat;}
  45% { background: url('../img/magic_9.png') no-repeat;}
  50% { background: url('../img/magic_10.png') no-repeat;}
  60% { background: url('../img/magic_11.png') no-repeat;}
  70% { background: url('../img/magic_12.png') no-repeat;}
  80% { background: url('../img/magic_13.png') no-repeat;}
  90% { background: url('../img/magic_14.png') no-repeat;}
  100% { background: url('../img/magic_15.png') no-repeat;}
}


.tiny-stars {
    position:fixed;
    top:0px;
    left: 50%;
    margin-left: -464px;
    z-index:-1;
    -webkit-animation: spin 40s infinite linear;
    -moz-animation: spin 40s infinite linear;
    -o-animation: spin 40s infinite linear;
    -ms-animation: spin 40s infinite linear;
    animation: spin 40s infinite linear;
}
.middle-stars {
	position:fixed;
    margin-left: -448px;
     -webkit-animation: spin 30s infinite linear;
    -moz-animation: spin 30s infinite linear;
    -o-animation: spin 30s infinite linear;
    -ms-animation: spin 30s infinite linear;
    animation: spin 30s infinite linear;
    z-index:-1;
}

@-webkit-keyframes spin{
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin{
	0% {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin{
	0% {-ms-transform: rotate(0deg);}
	100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin{
	0% {-o-transform: rotate(0deg);}
	100% {-o-transform: rotate(360deg);}
}
@keyframes spin{
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}