body {font-family:sans-serif;margin:0;padding:0;}

div#logo {position:fixed;margin:0;padding:0;}

/* This parent can be any width and height */
div#logo {
  text-align: center;
  width: 100%;
  height:100%;
  background-color:black;
  background-image:radial-gradient(at 74% 74%, rgba(255,255,220,0.6),black);
}
 
/* The ghost, nudged to maintain perfect centering */
div#logo:before {
  background:black;
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
div#logo div {
  overflow:hidden;
  display: inline-block;
  vertical-align: middle;
  bottom:10%;
  font-size:48px;
  line-height:1;
  text-align:left;
  margin-bottom:8%;
  transition:all 0.7s ease-in-out 0.8s;
  padding: 20px;
}

div.logo-hidden {
  color:#333;
  text-shadow:-400px 0 1px #909090,-400px 0 3px #ffffff, -800px 6px pink, 1200px 0 9px yellow;
  width:0px;
  margin-left:338px;
  opacity:0;
}

div.logo-shown {
  color:#fff;
  text-shadow:0 0 1px #ffffff, 0 0 3px #ffffff, 0 0 6px #ffffff, 0 0 9px yellow;
  width:338px;
  margin-left:0px;
  opacity:0.99;
}

div#box-of-services {overflow:hidden;height:0px;width:0px;}

div#contact {position:absolute;width:100%;bottom:0;left:0;
  height:48px;line-height:48px;
  background-image:linear-gradient(180deg, rgba(0,0,0,0.05),rgba(180,180,120,0.0));
  text-align:center;
  color:#f9f9f9;
  border-top:1px solid rgba(0,0,0,0.2);
}
div#contact a {text-decoration:none;color:#f9f9f9;}


body div#logo {
  background-attachment: fixed;
  background-image: radial-gradient(hsla(0, 100%, 50%, 1), hsla(120, 100%, 50%, 1), hsla(240, 100%, 50%, 1), hsla(0, 100%, 50%, 1));
  background-position: 0px 0px;
  background-size: 2000px 1520px;
  transition: all 250s ease 0s;
}