@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}


.stars, .twinkling, .clouds, .fade {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}

.stars {
  background:#000 url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
  z-index:0;
}

.twinkling{
  background:transparent url(http://www.script-tutorials.com/demos/360/images/twinkling.png) repeat top center;
  z-index:1;

  -moz-animation:move-twink-back 300s linear infinite;
  -ms-animation:move-twink-back 300s linear infinite;
  -o-animation:move-twink-back 300s linear infinite;
  -webkit-animation:move-twink-back 300s linear infinite;
  animation:move-twink-back 300s linear infinite;
}

.clouds{
    background:transparent url(http://www.script-tutorials.com/demos/360/images/clouds3.png) repeat top center;
    z-index:3;
    opacity: 0.25;

  -moz-animation:move-clouds-back 200s linear infinite;
  -ms-animation:move-clouds-back 200s linear infinite;
  -o-animation:move-clouds-back 200s linear infinite;
  -webkit-animation:move-clouds-back 200s linear infinite;
  animation:move-clouds-back 200s linear infinite;
}

/**Glow behind logo **/

.glow {
  -webkit-animation: glow 15s linear 0s infinite forwards;
  background: url('http://i.stack.imgur.com/wKxR4.png');
  background-size: contain;
  opacity: .30; 
}



@-webkit-keyframes glow {
  0% {
    transform: scale(1) rotate(0deg);
    filter: brightness(150%) saturate(50%) hue-rotate(0deg) opacity(100%);
    
  }
  25% {
    transform: scale(0.8) rotate(90deg);
    filter: brightness(100%) saturate(50%) hue-rotate(50deg) opacity(100%);
  }
  50% {
    transform: scale(1) rotate(180deg);
    filter: brightness(100%) saturate(100%) hue-rotate(0deg) opacity(100%);
  }
  75% {
    transform: scale(0.8) rotate(270deg);
    filter: brightness(100%) saturate(50%) hue-rotate(50deg) opacity(100%);
  }
  100% {
    transform: scale(1) rotate(360deg);
    filter: brightness(150%) saturate(100%) hue-rotate(0deg) opacity(100%);
    
  }
}


/** Rotating Logo**/
.rotation {
	animation:80s rotateLeft infinite linear;
}

@keyframes rotateLeft{
    0%{ transform:rotate(0deg); transform-origin:50% 50%; opacity: 0%; }
    100%{ transform:rotate(-360deg); opacity: 100%;}
}

/** Centering applied to glow and logo**/

.centered {
	width: 300px;
   height: 300px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
  border-radius: 30%; 
  z-index: 5;
  
}


/** Text Animation Fade In**/

.fade {
    opacity: 0.2;
    filter: alpha(opacity=50); /* For IE8 and earlier */
	z-index: 5;
}


p {
opacity: 0.0;
}


.fade:hover {
	    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
    -webkit-transition: all 5000ms ease;
	-moz-transition: all 3000ms ease;
	-ms-transition: all 3000ms ease;
	-o-transition: all 3000ms ease;
	transition: all 5000ms ease;
} 

.fade:hover p {
	
	opacity:1.0;
	filter: alpha(opacity=100); /* For IE8 and earlier */
    -webkit-transition: a4440ll 5000ms ease;
	-moz-transition: all 3000ms ease;
	-ms-transition: all 3000ms ease;
	-o-transition: all 3000ms ease;
	transition: all 5000ms ease;

	
}


/** Luminosity Lab Text**/

.title {
color: #FFF;
position: relative;
top: 50%;
padding-top: 150px;
text-align: center;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
font-weight: 300;
font-size: 44px;
letter-spacing: 2px;
text-shadow: 1px 1px 20px hsla(0,100%,100%,1);
z-index: 6;
}