body {
	text-align: center;
}

div {position: absolute;}

/*
	original animation: 
	http://cssdeck.com/labs/jessewells-css-spinner-2
*/

#shapes div{
box-shadow: 0 0 4px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .2);
padding: 6px;
}

#shapes {
width: 250px; /*offset*/
height: 250px;
left: 50%;
top: 50%;
margin-top: -125px;
margin-left: -125px;
}

#shape {
width: 120px;
height: 120px;
background: rgba(44, 62, 80,0.9);
background: rgba(240, 240, 240, 0.3);
 background: rgba(44, 62, 80,0.4); 
}

#shape2 {
width: 120px;
height: 120px;
background: rgba(231, 76, 60,0.9);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

#shape3 {
width: 120px;
height: 120px;
margin-left: 120px;
 background: rgba(44, 62, 80,0.9); 
background: rgba(240, 240, 240, 0.3);
 background: rgba(44, 62, 80,0.4); 
border-radius:50% 20% 40% 20%;}

#shape4 {
width: 120px;
height: 120px;
margin-left: 120px;
background: rgba(231, 76, 60,0.9);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

#bg {
position: absolute;
width: 100%;
height: 100%;
background: rgb(242,243,244);
background: -moz-radial-gradient(center, ellipse cover,  rgba(242,243,244,1) 0%, rgba(212,213,214,1) 79%, rgba(193,193,193,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(242,243,244,1)), color-stop(79%,rgba(212,213,214,1)), color-stop(100%,rgba(193,193,193,1)));
background: -webkit-radial-gradient(center, ellipse cover,  rgba(242,243,244,1) 0%,rgba(212,213,214,1) 79%,rgba(193,193,193,1) 100%);
background: -o-radial-gradient(center, ellipse cover,  rgba(242,243,244,1) 0%,rgba(212,213,214,1) 79%,rgba(193,193,193,1) 100%);
background: -ms-radial-gradient(center, ellipse cover,  rgba(242,243,244,1) 0%,rgba(212,213,214,1) 79%,rgba(193,193,193,1) 100%);
background: radial-gradient(ellipse at center,  rgba(242,243,244,1) 0%,rgba(212,213,214,1) 79%,rgba(193,193,193,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f3f4', endColorstr='#c1c1c1',GradientType=1 );
}

/* animation */

#shape {
-webkit-animation: shift 3s cubic-bezier(.14, .75, .2, 1.01) infinite;
-moz-animation: shift 3s cubic-bezier(.14, .75, .2, 1.01) infinite;
animation: shift 3s cubic-bezier(.14, .75, .2, 1.01) infinite;
}

#shape2 {
-webkit-animation: shift2 4s cubic-bezier(.14, .75, .2, 1.01) infinite;
-moz-animation: shift2 4s cubic-bezier(.14, .75, .2, 1.01) infinite;
animation: shift2 4s cubic-bezier(.14, .75, .2, 1.01) infinite;
}

#shape3 {
-webkit-animation: shift4 3s cubic-bezier(.14, .75, .2, 1.01) infinite;
-moz-animation: shift4 3s cubic-bezier(.14, .75, .2, 1.01) infinite;
animation: shift4 3s cubic-bezier(.14, .75, .2, 1.01) infinite;
}

#shape4 {
-webkit-animation: shift3 4s cubic-bezier(.14, .75, .2, 1.01) infinite;
-moz-animation: shift3 4s cubic-bezier(.14, .75, .2, 1.01) infinite;
animation: shift3 4s cubic-bezier(.14, .75, .2, 1.01) infinite;
}

#shapes {
-webkit-animation: rotate 12s cubic-bezier(.14, .75, .2, 1.01) infinite;
-moz-animation: rotate 12s cubic-bezier(.14, .75, .2, 1.01) infinite;
animation: rotate 12s cubic-bezier(.14, .75, .2, 1.01) infinite;
}

@keyframes shift {
0%{top:0px;left:0px;border-radius:50% 20% 40% 20%;}
50%{top:120px;left:120px;border-radius:30% 40% 50% 40%;width:80px;height:80px;
-ms-transform: rotate(180deg);-webkit-transform: rotate(180deg);transform: rotate(180deg);background:#2C3E50;opacity:0.8;}
80%{opacity:1;}
100%{top:0px;left:0px;border-radius:50% 20% 40% 20%;}
}

@keyframes shift2 {
0%{top:120px;left:0px;border-radius:40% 20% 50% 20%;}
50%{top:40px;left:120px;border-radius:50% 40% 30% 40%;width:80px;height:80px;
-ms-transform: rotate(270deg);-webkit-transform: rotate(270deg);transform: rotate(270deg);background:#F39C12;opacity:0.8;}
80%{opacity:1;}
100%{top:120px;left:0px;border-radius:40% 20% 50% 20%;}
}

@keyframes shift3 {
0%{top:0px;left:0px;border-radius:50% 20% 40% 20%;}
50%{top:120px;left:-80px;border-radius:30% 40% 50% 40%;width:80px;height:80px;
-ms-transform: rotate(270deg);-webkit-transform: rotate(270deg);transform: rotate(270deg);background:#F39C12;opacity:0.8;}
80%{opacity:1;	-moz-transform: scale(1.5) rotate(45deg) translate(20px);
	-webkit-transform: scale(1.5) rotate(45deg) translate(20px);
	-o-transform: scale(1.5) rotate(45deg) translate(20px);
	transform: scale(1.5) rotate(45deg) translate(20px);
}
100%{top:0px;left:0px;border-radius:50% 20% 40% 20%;}
}

@keyframes shift4 {
0%{top:120px;left:0px;border-radius:40% 20% 50% 20%;}
50%{top:40px;left:-80px;border-radius:50% 40% 30% 40%;width:80px;height:80px;
-ms-transform: rotate(180deg);-webkit-transform: rotate(180deg);transform: rotate(180deg);background:#2C3E50;opacity:0.8;}
80%{opacity:1;}
100%{top:120px;left:0px;border-radius:40% 20% 50% 20%;width:120px;height:120px;}
}

@keyframes rotate {
50%{-ms-transform: scale(1.5) rotate(360deg);-webkit-transform: scale(1.5) rotate(360deg);transform: scale(1.5) rotate(360deg);}
}

/* animation fall back */

@-webkit-keyframes shift {
0%{top:0px;left:0px;border-radius:50% 20% 40% 20%;}
50%{top:120px;left:120px;border-radius:30% 40% 50% 40%;width:80px;height:80px;
-ms-transform: rotate(180deg);-webkit-transform: rotate(180deg);transform: rotate(180deg);background:#2C3E50;opacity:0.8;}
80%{opacity:1;}
100%{top:0px;left:0px;border-radius:50% 20% 40% 20%;}  
}
@-moz-keyframes shift {
0%{top:0px;left:0px;border-radius:50% 20% 40% 20%;}
50%{top:120px;left:120px;border-radius:30% 40% 50% 40%;width:80px;height:80px;
-ms-transform: rotate(180deg);-webkit-transform: rotate(180deg);transform: rotate(180deg);background:#2C3E50;opacity:0.8;}
80%{opacity:1;}
100%{top:0px;left:0px;border-radius:50% 20% 40% 20%;}  
}

@-webkit-keyframes shift2 {
0%{top:120px;left:0px;border-radius:40% 20% 50% 20%;}
50%{top:40px;left:120px;border-radius:50% 40% 30% 40%;width:80px;height:80px;
-ms-transform: rotate(270deg);-webkit-transform: rotate(270deg);transform: rotate(270deg);background:#F39C12;opacity:0.8;}
80%{opacity:1;}
100%{top:120px;left:0px;border-radius:40% 20% 50% 20%;}  
}
@-moz-keyframes shift2 {
0%{top:120px;left:0px;border-radius:40% 20% 50% 20%;}
50%{top:40px;left:120px;border-radius:50% 40% 30% 40%;width:80px;height:80px;
-ms-transform: rotate(270deg);-webkit-transform: rotate(270deg);transform: rotate(270deg);background:#F39C12;opacity:0.8;}
80%{opacity:1;}
100%{top:120px;left:0px;border-radius:40% 20% 50% 20%;}  
}

@-webkit-keyframes shift3 {
0%{top:0px;left:0px;border-radius:50% 20% 40% 20%;}
50%{top:120px;left:-80px;border-radius:30% 40% 50% 40%;width:80px;height:80px;
-ms-transform: rotate(270deg);-webkit-transform: rotate(270deg);transform: rotate(270deg);background:#F39C12;opacity:0.8;}
80%{opacity:1;}
100%{top:0px;left:0px;border-radius:50% 20% 40% 20%;}  
}
@-moz-keyframes shift3 {
0%{top:0px;left:0px;border-radius:50% 20% 40% 20%;}
50%{top:120px;left:-80px;border-radius:30% 40% 50% 40%;width:80px;height:80px;
-ms-transform: rotate(270deg);-webkit-transform: rotate(270deg);transform: rotate(270deg);background:#F39C12;opacity:0.8;}
80%{opacity:1;}
100%{top:0px;left:0px;border-radius:50% 20% 40% 20%;}  
}

@-webkit-keyframes shift4 {
0%{top:160px;left:0px;border-radius:40% 20% 50% 20%;}
50%{top:40px;left:-80px;border-radius:50% 40% 30% 40%;width:80px;height:80px;
-ms-transform: rotate(180deg);-webkit-transform: rotate(180deg);transform: rotate(180deg);background:#2C3E50;opacity:0.8;}
80%{opacity:1;}
100%{top:120px;left:0px;border-radius:40% 20% 50% 20%;width:120px;height:120px;} 
}
@-moz-keyframes shift4 {
0%{top:120px;left:0px;border-radius:40% 20% 50% 20%;}
50%{top:40px;left:-80px;border-radius:50% 40% 30% 40%;width:80px;height:80px;
-ms-transform: rotate(180deg);-webkit-transform: rotate(180deg);transform: rotate(180deg);background:#2C3E50;opacity:0.8;}
80%{opacity:1;}
100%{top:120px;left:0px;border-radius:40% 20% 50% 20%;width:120px;height:120px;} 
}

@-webkit-keyframes rotate {
50%{-ms-transform: rotate(360deg);-webkit-transform: rotate(360deg);transform: rotate(360deg);}  
}
@-moz-keyframes rotate {
50%{-ms-transform: rotate(90deg);-webkit-transform: rotate(90deg);transform: rotate(90deg);}  
}

.twodots {
/*
	text-align: center;
	margin: 20% auto 0 auto;
	width: 100%;
*/
	z-index: 2000;

width: 125px;
height: 73px;
left: 50%;
top: 40%;
margin-top: -36px;
margin-left: -74px;
}


p {
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: 20%;
	font-family: Arial,sans-serif;
	font-size: 11px;
	color: #414F5E;
}

.shapes {
	-webkit-transition-duration: 0.9s;
    transition-duration: 0.9s;
	-webkit-filter: drop-shadow(50px 50px 50px rgba(0,0,0,0.7));
	filter: drop-shadow(50px 50px 50px rgba(0,0,0,0.7));
	cursor: crosshair;
}