*, *:after, *:before {margin: 0; padding: 0;}

body {overflow:hidden;
background:radial-gradient(#000 16%, transparent 17%),radial-gradient(#444 16%, transparent 17%) 0px 1px,
radial-gradient(#000 16%, transparent 17%) 8px 8px,radial-gradient(#444 16%, transparent 17%) 8px 9px;
  background-color:#282828;background-size: 16px 16px;}


.container {
position:absolute;width:300px;height:300px;top:0;left:0;right:0;bottom:0;margin:auto;}

.outer {
  border-radius: 100%;
  width: 100%;
  height: 100%;
  background: url(http://anthony.germishuys.cloudvent.net/AWlogo/ring.png) no-repeat center center;background-size:cover;
   z-index:20;
}
.inner {z-index:10;
  border-radius:100%;
  position:absolute;
  width: 255px;
  height: 255px;
  top:0;left:0;right:0;bottom:0;margin:auto;
  background: url(http://anthony.germishuys.cloudvent.net/AWlogo/inner.png) no-repeat center center;background-size:cover;
 
   -webkit-transform-style:preserve-3d;
  -webkit-perspective:800px;
}

.inner.animate{-webkit-transform:scale(.77);-webkit-transition:-webkit-transform 2s ease;}

#laurel,#spark{position:absolute;left:50%;top:50%;width:240px;height:240px;z-index:101;border-radius:50%;margin-left:-120px;-webkit-transform: translate3d(0,0,0) scale(.95);-webkit-transition:margin-top 1.5s ease;}
#spark{background:url('http://anthony.germishuys.cloudvent.net/pics/spark.png') no-repeat center;background-size:contain;margin-top:-350px;}
#laurel{margin-top:150px;}
.img {display:block;margin: 0 auto;}
#laurel.loaded,#spark.loaded{margin-top:-120px;-webkit-transition:margin-top 1.5s ease,-webkit-transform 2s ease 1s;}

#laurel.shrink,#spark.shrink {-webkit-transform:translate3d(0,0,0) scale(0);-webkit-transition:-webkit-transform 2s ease;}



.glass {
  border-radius:100%;
  position: relative;
  width: 90%;
  height: 90%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: black;
  box-shadow: inset 0 0 3px 3px rgba(0,0,0,0.6);
   overflow:hidden;
}

.top-bubble {
  position:absolute;z-index:100;
  border-radius:100%;
  position: relative;
  width: 70%;
  height:60%;
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
  background: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0)); 
}

.screws {Position:absolute;top:50%;left:50%;width:300px;height:300px;margin:-150px 0 0 -150px;}

.screws li {position:absolute;width:15px;height:15px;margin:145px 0 0 143px;display:block;
background:url('http://anthony.germishuys.cloudvent.net/pics/screw.png') no-repeat center center;
background-size:cover;
opacity:0;
-webkit-animation:screw 3s linear 1 forwards 3s;}


@-webkit-keyframes screw
{0% {opacity:0;} 100%{opacity:1;}}



.screws li:first-child  {-webkit-transform:rotate(180deg) translateY(137px);}
.screws li:nth-child(2) {-webkit-transform:rotate(225deg) translateX(-3px) translateY(138px);}
.screws li:nth-child(3) {-webkit-transform:rotate(270deg) translateX(2px) translateY(137px);}
.screws li:nth-child(4) {-webkit-transform:rotate(315deg) translateX(4px) translateY(134px);}
.screws li:nth-child(5) {-webkit-transform:rotate(360deg) translateY(135px);}
.screws li:nth-child(6) {-webkit-transform:rotate(45deg) translateX(-7px) translateY(136px);}
.screws li:nth-child(7) {-webkit-transform:rotate(90deg) translateX(-3px) translateY(137px);}
.screws li:nth-child(8) {-webkit-transform:rotate(135deg) translateX(3px) translateY(139px);}


#loading {position:absolute;top:50%;left:50%;width:242px;height:242px;margin:-121px 0 0 -121px;border-radius:50%;overflow:hidden;box-shadow: 0 15px 15px rgba(0, 0, 0, 0.2), 0 35px rgba(255, 255, 255, 0.25) inset;}

#loading-circle1, #loading-circle2 {position:absolute;top:50%;left:50%;width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:50%;box-sizing:border-box;display:none;}

#loading-circle1 {border:25px solid #00E0FC;z-index:40;}
  
#loading-circle2 {border-top:20px solid transparent;border-bottom:20px solid transparent;border-right:20px solid #00E0FC;border-left:20px solid #00E0FC;}

#loading-circle1.shrink {border:120px solid #00E0FC;-webkit-transform:scale(.2);-webkit-transition:-webkit-transform 3s ease 3s,border 3s ease 3s;}
#loading-circle2.spin {-webkit-animation:rotate 3s linear infinite 3s;}


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

  
.loading-outer-shadow,.loading-inner-shadow {position:absolute;width:100%;height:100%;border-radius:50%;z-index:4;}

.loading-inner-shadow {top:50%;left:50%;width:230px;height:230px;margin:-115px 0 0 -115px;border-radius:100%;}

.fill {position:absolute;top:50%;left:50%;width:50%;height:20px;margin-top:-10px;z-index:2;-webkit-transform-origin:0% 50%;}
.fill span {position:absolute;right:0;width:20px;height:20px;}

@-webkit-keyframes fill {0%{-webkit-transform:rotate(-90deg);}50%{-webkit-transform:rotate(90deg);z-index:4;}100%{-webkit-transform:rotate(270deg);z-index:4;}}

.hold {position:absolute;width:100%;height:100%;clip:rect(0px,242px,242px,121px);border-radius:50%;background-color:transparent;}
.pie {position:absolute;width:100%;height:100%;border-radius:50%;clip: rect(0px, 121px, 242px, 0px);}
.pie, .fill span {background-color:#00E0FC;display:none;}
#right {z-index:3;-webkit-transform:rotate(180deg);}
#left .pie {z-index:1;}

@-webkit-keyframes pie {0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(180deg);}}

#left .pie.animate {-webkit-animation:pie 5s linear both;}
#right .pie.animate {-webkit-animation:pie 5s linear 5s both;}

.Counter {Position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;z-index:99;text-align:center;line-height:200px;display:none;
  font-family:'Helvetica Neue';font-size:50px;font-weight:bold;color:#00E0FC;}

.circle-text {Position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;z-index:99;
display:block;text-align:center;line-height:230px;font-size:45px;
 font-family:'sans-serif'; 
 color:rgba(255,255,255,0.5);
 -webkit-transform:scale(0);
 -webkit-transition:-webkit-transform 1s ease;
background:-webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) no-repeat; 
background-size: 50px 100%;
-webkit-background-clip: text;
-webkit-animation:shimmer 5s linear infinite none;
background-position:left;}

.circle-text.expand {-webkit-transform:scale(1);-webkit-transition:-webkit-transform 2s ease 1s;}

@-webkit-keyframes shimmer {0% {background-position:left} 100% {background-position:right;}}