inital commit

README.md

@@ -0,0 +1,15 @@
+Happy Birthday
+
+A Happy Birthday animation design in CSS3, HTML5.
+
+URL: http://ayusharma.github.io/birthday/
+
+Technology Used: HTML5 CSS3 jQuery  GNU/Linux Digital Ocean as VPS GIMP
+
+For further queries do not hesitate to contact me.
+
+Ayush Sharma Arya College Of Engineering & IT, Jaipur India.
+
+contact details: ayush.aceit@gmail.com
+
+IRC: ayushpix

cake.less

@@ -0,0 +1,271 @@
+
+
+//////////////////////////////////////////// var
+
+@D:300px; // Control diameter
+
+///////////////////////////////////////////
+
+
+
+/* ============================================== POSITION
+*/
+
+.cake{
+  position:absolute;
+  display:none;
+ // top:30%; 
+  left:50%;
+  margin-left:-(@D/2);
+  width:@D; height:@D;
+}
+
+/* ============================================== BASE
+*/
+
+.cake:after{
+  background:rgba(255,255,255,1);
+  border-radius:@D;
+  content:"";
+  position:absolute;
+  bottom:0; left:0;
+  width:@D; height:@D/50;
+}
+
+.cake:before{
+  
+}
+
+/* ============================================== Candle
+*/
+
+.velas{
+  background:rgba(255,255,255,1);
+  border-radius:100%;
+  position:absolute;
+  top:50%; left:50%;
+  margin-left:-(@D/2)/20;
+  margin-top:-(@D/2)/6;
+  width:@D/20; height:@D/6;
+}
+
+.velas:after,
+.velas:before{
+  background:rgba(255,0,0,0.4);
+  content:"";
+  position:absolute;
+  width:100%; height:@D/45;
+}
+
+.velas:after{
+  top:25%; left:0;
+}
+
+.velas:before{
+  top:45%; left:0;
+}
+
+/* ============================================== Fire
+*/
+
+.fuego{
+  display:none;
+  border-radius:100%;
+  box-shadow:0 0 40px 10px rgba(248,233,209,0.2);
+  position:absolute;
+  top:-12px; left:50%;
+  margin-left:-(@D/2)/15;
+  //margin-top:-(@D/2)/10;
+  width:@D/15; height:@D/8;
+}
+
+.fuego:nth-child(1){
+  -webkit-animation:fuego 2s infinite;
+  -moz-animation:fuego 2s infinite;
+  -o-animation:fuego 2s infinite;
+  -ms-animation:fuego 2s infinite;
+  animation:fuego 2s infinite;
+
+}
+
+.fuego:nth-child(2){
+  -webkit-animation:fuego 1.5s infinite;
+   -moz-animation:fuego 1.5s infinite;
+    -o-animation:fuego 1.5s infinite;
+     -ms-animation:fuego 1.5s infinite;
+      animation:fuego 1.5s infinite;
+
+}
+
+.fuego:nth-child(3){
+  -webkit-animation:fuego 1s infinite;
+  -moz-animation:fuego 1s infinite;
+  -o-animation:fuego 1s infinite;
+  -ms-animation:fuego 1s infinite;
+  animation:fuego 1s infinite;
+}
+
+.fuego:nth-child(4){
+  -webkit-animation:fuego 0.5s infinite;
+  -moz-animation:fuego 0.5s infinite;
+  -o-animation:fuego 0.5s infinite;
+  -ms-animation:fuego 0.5s infinite;
+  animation:fuego 0.5s infinite;
+}
+
+.fuego:nth-child(5){
+  -webkit-animation:fuego 0.2s infinite;
+  -moz-animation:fuego 0.2s infinite;
+  -o-animation:fuego 0.2s infinite;
+  -ms-animation:fuego 0.2s infinite;
+  animation:fuego 0.2s infinite;
+}
+
+/* ============================================== Animation Fire
+*/
+
+@-webkit-keyframes fuego{
+  0%{
+    background:rgba(254,248,97,0.5);
+    -webkit-transform:translateY(0) scale(1);
+  }
+  50%{
+    background:rgba(255,50,0,0.1);
+    -webkit-transform:translateY(-(@D/5)) scale(0);
+  }
+  100%{
+    background:rgba(254,248,97,0.5);
+    -webkit-transform:translateY(0) scale(1);
+  }
+}
+@-moz-keyframes fuego{
+  0%{
+    background:rgba(254,248,97,0.5);
+    -moz-transform:translateY(0) scale(1);
+  }
+  50%{
+    background:rgba(255,50,0,0.1);
+    -moz-transform:translateY(-(@D/5)) scale(0);
+  }
+  100%{
+    background:rgba(254,248,97,0.5);
+    -moz-transform:translateY(0) scale(1);
+  }
+}
+@-o-keyframes fuego{
+  0%{
+    background:rgba(254,248,97,0.5);
+    -o-transform:translateY(0) scale(1);
+  }
+  50%{
+    background:rgba(255,50,0,0.1);
+    -o-transform:translateY(-(@D/5)) scale(0);
+  }
+  100%{
+    background:rgba(254,248,97,0.5);
+    -o-transform:translateY(0) scale(1);
+  }
+}
+@-ms-keyframes fuego{
+  0%{
+    background:rgba(254,248,97,0.5);
+    -ms-transform:translateY(0) scale(1);
+  }
+  50%{
+    background:rgba(255,50,0,0.1);
+    -ms-transform:translateY(-(@D/5)) scale(0);
+  }
+  100%{
+    background:rgba(254,248,97,0.5);
+    -ms-transform:translateY(0) scale(1);
+  }
+}
+
+@keyframes fuego{
+  0%{
+    background:rgba(254,248,97,0.5);
+    transform:translateY(0) scale(1);
+  }
+  50%{
+    background:rgba(255,50,0,0.1);
+    transform:translateY(-(@D/5)) scale(0);
+  }
+  100%{
+    background:rgba(254,248,97,0.5);
+    transform:translateY(0) scale(1);
+  }
+}
+
+/* ============================================== Frosting
+*/
+
+.cobertura{
+  background:rgba(236,231,227,1);
+  border-radius:@D/2;
+  position:absolute;
+  top:60%; left:50%;
+  margin-left:-(@D/2)/1.8;
+  margin-top:-(@D/2)/10;
+  width:@D/1.8; height:@D/8;
+  z-index:10;
+}
+
+.cobertura:after,
+.cobertura:before{
+  background:rgba(236,231,227,1);
+  border-radius:@D;
+  content:"";
+  position:absolute;
+  width:@D/20; height:@D/10;
+}
+
+.cobertura:after{
+  top:@D/15; right:@D/7;
+}
+
+.cobertura:before{
+  top:@D/10; right:@D/11;
+}
+
+/* ============================================== BIZCOCHO
+*/
+
+.bizcocho{
+  background:rgba(109,56,38,1);
+  position:absolute;
+  bottom:0; left:50%;
+  margin-left:-(@D/2)/2;
+  width:@D/2; height:@D/3;
+}
+
+.bizcocho:after,
+.bizcocho:before{
+  background:rgba(236,231,227,0.6);
+  content:"";
+  position:absolute;
+  width:100%; height:@D/20;
+}
+
+.bizcocho:after{
+  top:30%; left:0;
+}
+
+.bizcocho:before{
+  top:60%; left:0;
+}
+
+/* ============================================== TEXT
+*/
+
+h1,
+p{
+  font-family: 'Lato', sans-serif;
+  font-weight: 300;
+  font-style:italic;
+  text-align:center;
+  width:100%;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

effect.js

@@ -0,0 +1,201 @@
+$(window).load(function(){
+	$('.loading').fadeOut('fast');
+	$('.container').fadeIn('fast');
+});
+$('document').ready(function(){
+		var vw;
+		$(window).resize(function(){
+			 vw = $(window).width()/2;
+			$('#b1,#b2,#b3,#b4,#b5,#b6,#b7').stop();
+			$('#b11').animate({top:240, left: vw-350},500);
+			$('#b22').animate({top:240, left: vw-250},500);
+			$('#b33').animate({top:240, left: vw-150},500);
+			$('#b44').animate({top:240, left: vw-50},500);
+			$('#b55').animate({top:240, left: vw+50},500);
+			$('#b66').animate({top:240, left: vw+150},500);
+			$('#b77').animate({top:240, left: vw+250},500);
+		});
+
+	$('#turn_on').click(function(){
+		$('#bulb_yellow').addClass('bulb-glow-yellow');
+		$('#bulb_red').addClass('bulb-glow-red');
+		$('#bulb_blue').addClass('bulb-glow-blue');
+		$('#bulb_green').addClass('bulb-glow-green');
+		$('#bulb_pink').addClass('bulb-glow-pink');
+		$('#bulb_orange').addClass('bulb-glow-orange');
+		$('body').addClass('peach');
+		$(this).fadeOut('slow').delay(5000).promise().done(function(){
+			$('#play').fadeIn('slow');
+		});
+	});
+	$('#play').click(function(){
+		var audio = $('.song')[0];
+        audio.play();
+        $('#bulb_yellow').addClass('bulb-glow-yellow-after');
+		$('#bulb_red').addClass('bulb-glow-red-after');
+		$('#bulb_blue').addClass('bulb-glow-blue-after');
+		$('#bulb_green').addClass('bulb-glow-green-after');
+		$('#bulb_pink').addClass('bulb-glow-pink-after');
+		$('#bulb_orange').addClass('bulb-glow-orange-after');
+		$('body').css('backgroud-color','#FFF');
+		$('body').addClass('peach-after');
+		$(this).fadeOut('slow').delay(6000).promise().done(function(){
+			$('#bannar_coming').fadeIn('slow');
+		});
+	});
+
+	$('#bannar_coming').click(function(){
+		$('.bannar').addClass('bannar-come');
+		$(this).fadeOut('slow').delay(6000).promise().done(function(){
+			$('#balloons_flying').fadeIn('slow');
+		});
+	});
+
+	function loopOne() {
+		var randleft = 1000*Math.random();
+		var randtop = 500*Math.random();
+		$('#b1').animate({left:randleft,bottom:randtop},10000,function(){
+			loopOne();
+		});
+	}
+	function loopTwo() {
+		var randleft = 1000*Math.random();
+		var randtop = 500*Math.random();
+		$('#b2').animate({left:randleft,bottom:randtop},10000,function(){
+			loopTwo();
+		});
+	}
+	function loopThree() {
+		var randleft = 1000*Math.random();
+		var randtop = 500*Math.random();
+		$('#b3').animate({left:randleft,bottom:randtop},10000,function(){
+			loopThree();
+		});
+	}
+	function loopFour() {
+		var randleft = 1000*Math.random();
+		var randtop = 500*Math.random();
+		$('#b4').animate({left:randleft,bottom:randtop},10000,function(){
+			loopFour();
+		});
+	}
+	function loopFive() {
+		var randleft = 1000*Math.random();
+		var randtop = 500*Math.random();
+		$('#b5').animate({left:randleft,bottom:randtop},10000,function(){
+			loopFive();
+		});
+	}
+
+	function loopSix() {
+		var randleft = 1000*Math.random();
+		var randtop = 500*Math.random();
+		$('#b6').animate({left:randleft,bottom:randtop},10000,function(){
+			loopSix();
+		});
+	}
+	function loopSeven() {
+		var randleft = 1000*Math.random();
+		var randtop = 500*Math.random();
+		$('#b7').animate({left:randleft,bottom:randtop},10000,function(){
+			loopSeven();
+		});
+	}
+
+	$('#balloons_flying').click(function(){
+		$('.balloon-border').animate({top:-500},8000);
+		$('#b1,#b4,#b5,#b7').addClass('balloons-rotate-behaviour-one');
+		$('#b2,#b3,#b6').addClass('balloons-rotate-behaviour-two');
+		// $('#b3').addClass('balloons-rotate-behaviour-two');
+		// $('#b4').addClass('balloons-rotate-behaviour-one');
+		// $('#b5').addClass('balloons-rotate-behaviour-one');
+		// $('#b6').addClass('balloons-rotate-behaviour-two');
+		// $('#b7').addClass('balloons-rotate-behaviour-one');
+		loopOne();
+		loopTwo();
+		loopThree();
+		loopFour();
+		loopFive();
+		loopSix();
+		loopSeven();
+		
+		$(this).fadeOut('slow').delay(5000).promise().done(function(){
+			$('#cake_fadein').fadeIn('slow');
+		});
+	});	
+
+	$('#cake_fadein').click(function(){
+		$('.cake').fadeIn('slow');
+		$(this).fadeOut('slow').delay(3000).promise().done(function(){
+			$('#light_candle').fadeIn('slow');
+		});
+	});
+
+	$('#light_candle').click(function(){
+		$('.fuego').fadeIn('slow');
+		$(this).fadeOut('slow').promise().done(function(){
+			$('#wish_message').fadeIn('slow');
+		});
+	});
+
+		
+	$('#wish_message').click(function(){
+		 vw = $(window).width()/2;
+
+		$('#b1,#b2,#b3,#b4,#b5,#b6,#b7').stop();
+		$('#b1').attr('id','b11');
+		$('#b2').attr('id','b22')
+		$('#b3').attr('id','b33')
+		$('#b4').attr('id','b44')
+		$('#b5').attr('id','b55')
+		$('#b6').attr('id','b66')
+		$('#b7').attr('id','b77')
+		$('#b11').animate({top:240, left: vw-350},500);
+		$('#b22').animate({top:240, left: vw-250},500);
+		$('#b33').animate({top:240, left: vw-150},500);
+		$('#b44').animate({top:240, left: vw-50},500);
+		$('#b55').animate({top:240, left: vw+50},500);
+		$('#b66').animate({top:240, left: vw+150},500);
+		$('#b77').animate({top:240, left: vw+250},500);
+		$('.balloons').css('opacity','0.9');
+		$('.balloons h2').fadeIn(3000);
+		$(this).fadeOut('slow').delay(3000).promise().done(function(){
+			$('#story').fadeIn('slow');
+		});
+	});
+	
+	$('#story').click(function(){
+		$(this).fadeOut('slow');
+		$('.cake').fadeOut('fast').promise().done(function(){
+			$('.message').fadeIn('slow');
+		});
+		
+		var i;
+
+		function msgLoop (i) {
+			$("p:nth-child("+i+")").fadeOut('slow').delay(800).promise().done(function(){
+			i=i+1;
+			$("p:nth-child("+i+")").fadeIn('slow').delay(1000);
+			if(i==50){
+				$("p:nth-child(49)").fadeOut('slow').promise().done(function () {
+					$('.cake').fadeIn('fast');
+				});
+				
+			}
+			else{
+				msgLoop(i);
+			}			
+
+		});
+			// body...
+		}
+		
+		msgLoop(0);
+		
+	});
+});
+
+
+
+
+//alert('hello');

index.html

@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="ie lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>    <html class="ie lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>    <html class="ie lt-ie9"> <![endif]-->
+<!--[if gt IE 8]> <html> <![endif]-->
+<!--[if !IE]><!--><html lang="en"><!-- <![endif]-->
+<head>
+	<title>Happy Birthday</title>
+	<meta charset="UTF-8" />
+	<meta name="description" content="Happy Birthday">
+	<meta name="robots" content="index, follow" />
+	<link rel="author" href="https://plus.google.com/u/1/+AyushSharma1/" /> 
+    <meta name="keywords" content="Birthday, Happy">
+    <!-- Strat of Facebook Meta -->
+    <meta property="og:type" content="E-Greeting" />
+    <meta property="og:image" content="favicon.ico" />
+    <meta property="og:description" content="Wish you a very Happy Birthday">
+    <!-- End of Facebook Meta Tags -->
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="apple-mobile-web-app-status-bar-style" content="black">
+	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
+	<link rel="stylesheet" type="text/css" href="stylesheet.css">
+	<link rel="stylesheet" type="text/css" href="loading.css">
+	<link href='http://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
+	<!-- <link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'> -->
+	<link rel="stylesheet/less" href="cake.less">
+	<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.min.js"></script>
+</head>
+
+<body>
+	<div class="loading"></div>
+	<audio class="song" controls loop>
+        <source src="hbd.mp3"></source>
+	   Your browser isn't invited for super fun audio time.
+    </audio>
+    <div class="balloons text-center" id="b1">
+    	<h2 style="color:#F2B300;">x</h2>
+    </div>
+    <div class="balloons text-center" id="b2">
+    	<h2 style="color:#0719D4;">k</h2>
+    </div>
+	<div class="balloons text-center" id="b3">
+    	<h2 style="color:#D14D39;">l</h2>
+    </div>
+	<div class="balloons text-center" id="b4">
+    	<h2 style="color:#8FAD00;">p</h2>
+    </div>
+	<div class="balloons text-center" id="b5">
+    	<h2 style="color:#8377E4;">j</h2>
+    </div>
+    <div class="balloons text-center" id="b6">
+    	<h2 style="color:#99C96A;">r</h2>
+    </div>
+    <div class="balloons text-center" id="b7">
+    	<h2 style="color:#20CFB4;">t</h2>
+    </div>
+
+    <img src="Balloon-Border.png" width="100%" class="balloon-border">
+ 
+
+	<div class="container">
+		
+		<div class="row">
+			<div class="col-md-2 col-xs-2 bulb-holder">
+				<div class="bulb" id="bulb_yellow"></div>
+			</div>
+			<div class="col-md-2 col-xs-2 bulb-holder">
+				<div class="bulb" id="bulb_red"></div>
+			</div>
+			<div class="col-md-2 col-xs-2 bulb-holder">
+				<div class="bulb" id="bulb_blue"></div>
+			</div>
+			<div class="col-md-2 col-xs-2 bulb-holder">
+				<div class="bulb" id="bulb_green"></div>
+			</div>
+			<div class="col-md-2 col-xs-2 bulb-holder">
+				<div class="bulb" id="bulb_pink"></div>
+			</div>
+			<div class="col-md-2 col-xs-2 bulb-holder">
+				<div class="bulb" id="bulb_orange"></div>
+			</div>
+		</div>
+		<div class="row">
+			<div class="col-md-12 text-center">
+				<img src="banner.png" class="bannar">
+			</div>
+		</div>
+		<!-- <div class="row message">
+			<div class="col-md-12"><p>Khushbu</p></div>
+		</div> -->
+		<div class="row cake-cover">
+			<div class="col-md-12 texr-center">
+				<div class="cake">
+				  <div class="velas">
+				    <div class="fuego"></div>
+				    <div class="fuego"></div>
+				    <div class="fuego"></div>
+				    <div class="fuego"></div>
+				    <div class="fuego"></div>
+				  </div>
+				  <div class="cobertura"></div>
+				  <div class="bizcocho"></div>
+				</div>
+			</div>
+		</div>
+		<div class="row message">
+			<div class="col-md-12">
+				<p>Today is...</p>
+				<p>as beautiful as other days</p>
+				<p>but you realize</p>
+				<p>another year has gone</p>
+				<p>in a blink of the eyes</p>
+				<p><strong>however</strong></p>
+				<p>Do you know..?</p>
+				<p>today is just special</p>
+				<p>so special to you</p>
+				<p>that's why</p>
+				<p>Let's make it...</p>
+				<p>the best celebration ever</p>
+				<p>and let me share...</p>
+				<p>a piece of happiness to you</p>
+				<p>I made all this...</p>
+				<p>as a birthday present to you</p>
+				<p>thanks for being there</p>
+				<p>thanks for the friendship we made</p>
+				<p>thanks for everything</p>
+				<p>I wish you all the best</p>
+				<p>May your life be at ease</p>
+				<p>May all your wishes come true</p>
+				<p>Remember</p>
+				<p>your ambitions</p>
+				<p>you live as a free bird...</p>
+				<p>flying in the blue sky</p>
+				<p>Now things are different...</p>
+				<p>real story of your life</p>
+				<p>is just about to begin</p>
+				<p>indeed..</p>
+				<p>this life is not easy as we thought</p>
+				<p>but...</p>
+				<p>don't worry</p>
+				<p>don't be afraid</p>
+				<p>because...</p>
+				<p>you are not alone in this world</p>
+				<p>because...</p>
+				<p>this year will be better</p>
+				<p>and I hope</p>
+				<p>you'll find...</p>
+				<p>happiness along the way</p>
+				<p>keep your spirits up</p>
+				<p>enjoy every single moment...</p>
+				<p>that you experiecne today</p>
+				<p>fill it with your most beautiful smile</p>
+				<p>and make it the best memory..</p>
+				<p>lastly...</p>
+				<p>I'd like to wish you one more time</p>
+				<p>a very happy birthday</p>
+			</div>
+		</div>
+		<div class="navbar navbar-fixed-bottom">
+			<div class="row">
+				<div class="col-md-6 text-center col-md-offset-3">
+					<button class="btn btn-primary" id="turn_on">Turn On Lights</button>
+					<button class="btn btn-primary" id="play">Play Music</button>
+					<button class="btn btn-primary" id="bannar_coming">Let's Decorate</button>
+					<button class="btn btn-primary" id="balloons_flying">Fly With Balloons</button>
+					<button class="btn btn-primary" id="cake_fadein">Most Delicious Cake Ever</button>
+					<button class="btn btn-primary" id="light_candle"> Light Candle</button>
+					<button class="btn btn-primary" id="wish_message">Happy Birthday</button>
+					<button class="btn btn-primary" id="story">A mesage for you</button>
+					<!-- <button class="btn btn-primary" id="cake_cut">Lrt's Cut the Cake</button> -->
+				</div>
+			</div>
+			<!-- <div class="col-md-2">
+			</div>
+			<div class="col-md-2">
+			</div>
+			<div class="col-md-2">
+			</div>
+			<div class="col-md-2">
+			</div>
+			<div class="col-md-2">
+			</div> -->
+		</div>
+
+
+	</div>
+</body>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
+<script src="effect.js"></script>
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+  ga('create', 'UA-58229732-1', 'auto');
+  ga('send', 'pageview');
+
+</script>
+</html>

loading.css

@@ -0,0 +1,119 @@
+/* Absolute Center CSS Spinner */
+.loading {
+  position: fixed;
+  z-index: 99999;
+  height: 2em;
+  width: 2em;
+  overflow: show;
+  margin: auto;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+/* Transparent Overlay */
+.loading:before {
+  content: '';
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.3);
+}
+
+/* :not(:required) hides these rules from IE9 and below */
+.loading:not(:required) {
+  /* hide "loading..." text */
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+
+.loading:not(:required):after {
+  content: '';
+  display: block;
+  font-size: 10px;
+  width: 1em;
+  height: 1em;
+  margin-top: -0.5em;
+  -webkit-animation: spinner 1500ms infinite linear;
+  -moz-animation: spinner 1500ms infinite linear;
+  -ms-animation: spinner 1500ms infinite linear;
+  -o-animation: spinner 1500ms infinite linear;
+  animation: spinner 1500ms infinite linear;
+  border-radius: 0.5em;
+  -webkit-box-shadow: #FFF 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, #FFF -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  box-shadow: #FFF 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, #FFF -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+}
+
+/* Animation */
+
+@-webkit-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-moz-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}