html,
body { position: relative; padding: 0; margin: 0; height: 100%; width: 100%; }
body,
body * { box-sizing: border-box; }
body { display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; padding: 0 30px; background-color: #999; font-family: 'Molengo', Arial, Helvetica, sans-serif; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1 { margin: 0 0 20px; color: #000; font-family: 'Inconsolata', monospace; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 48px; }
h2 { margin: 0 0 0.5em; font-size: 24px; }
img.logo { display: block; width: 300px; height: 300px; }
#logo { width: 300px; height: 300px; margin: 0 0 1em; }
#logo svg { }
#logo .background { }
#logo .background circle { fill: #333; }
#logo .lines circle,
#logo .lines line,
#logo .lines path { fill: none; stroke: #000; stroke-width: 11px;
  transition: fill 200ms ease-in-out, stroke 200ms ease-in-out 100ms;
}
#logo:hover .lines circle,
#logo:hover .lines line,
#logo:hover .lines path { stroke: #ccc;
  transition: fill 200ms ease-in-out, stroke 200ms ease-in-out 100ms;
}
#logo [class*='logo-'] { cursor: pointer; }
#logo [class*='logo-'] .logo { fill: #000; opacity: 0;
  transition: all 100ms ease-in-out;
}
#logo:hover [class*='logo-'] .logo { opacity: 1;
  transition: all 200ms ease-in-out 300ms;
}
#logo [class*='logo-'] .logo path,
#logo [class*='logo-'] .logo polygon { fill: #333; }
#logo [class*='logo-'] .bg { cursor: pointer; fill: #d11b1e; opacity: 0;
  transition: opacity 100ms ease-in-out;
}
#logo:hover [class*='logo-'] .bg { opacity: 1;
  transition: opacity 200ms ease-in-out 300ms;
}
#logo [class*='logo-'] .animated-bg { fill: #d11b1e; }
#logo [class*='logo-'] .animated-logo { fill: #000; }

#logo .logo-linkedin [class*='animated-'] {
  animation: linkedin-animate 5s infinite;
}
@keyframes linkedin-animate {
  0% { opacity: 0; }
  80% { opacity: 0; }
  83% { opacity: 1; }
  95% { opacity: 1; }
  100% { opacity: 0; }
}

#logo .logo-information [class*='animated-'] {
  animation: information-animate 6s infinite;
}
@keyframes information-animate {
  0% { opacity: 0; }
  80% { opacity: 0; }
  83% { opacity: 1; }
  95% { opacity: 1; }
  100% { opacity: 0; }
}

.services { padding-top: 20px; }
.services .service { white-space: nowrap; background-color: #ccc; padding: 0.25em 1em; border-radius: 1em; margin: 0 0 0.25em; display: inline-block; }

#information { display: none; overflow: hidden; display: none; position: absolute; z-index: 100; top: 0; left: 0; width: 0; height: 0; opacity: 0; background-color: rgba(0,0,0,0.5); }
#information.active { display: block; opacity: 1; width: 100%; height: 100%; }
#information .wrapper { position: absolute; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; }
#information .wrapper .content { }
#information .wrapper .content p { }