svg#robot { display: block; position: relative; margin: 6em auto 0 auto; padding: 10px; -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px); -ms-transform: rotate(0deg) translate3d(0px, 0px, 0px); transform: rotate(0deg) translate3d(0px, 0px, 0px); -webkit-animation: move 2s ease infinite; animation: move 2s ease infinite; }
 @-webkit-keyframes move {  0%, 100% {
 -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
 transform: rotate(0deg) translate3d(0px, 0px, 0px);
}
 25% {
 -webkit-transform: rotate(5deg) translate3d(5px, 5px, 0px);
 transform: rotate(5deg) translate3d(5px, 5px, 0px);
}
 75% {
 -webkit-transform: rotate(-6deg) translate3d(-5px, 5px, 0px);
 transform: rotate(-6deg) translate3d(-5px, 5px, 0px);
}
}
 @keyframes move {  0%, 100% {
 -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
 transform: rotate(0deg) translate3d(0px, 0px, 0px);
}
 25% {
 -webkit-transform: rotate(5deg) translate3d(5px, 5px, 0px);
 transform: rotate(5deg) translate3d(5px, 5px, 0px);
}
 75% {
 -webkit-transform: rotate(-6deg) translate3d(-5px, 5px, 0px);
 transform: rotate(-6deg) translate3d(-5px, 5px, 0px);
}
}
g#head { -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px); -ms-transform: rotate(0deg) translate3d(0px, 0px, 0px); transform: rotate(0deg) translate3d(0px, 0px, 0px); -webkit-transform-origin: bottom center; -ms-transform-origin: bottom center; transform-origin: bottom center; -webkit-animation: head 1s 1s ease infinite; animation: head 1s 1s ease infinite; }
g#head #leftAntenna > ellipse, g#head #rightAntenna > ellipse { -webkit-animation: color 350ms linear infinite; animation: color 350ms linear infinite; }
 @-webkit-keyframes head {  0%, 46%, 50%, 55%, 100% {
 -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
 transform: rotate(0deg) translate3d(0px, 0px, 0px);
}
 49% {
 -webkit-transform: rotate(20deg) translate3d(0px, 0px, 0px);
 transform: rotate(20deg) translate3d(0px, 0px, 0px);
}
 51% {
 -webkit-transform: rotate(-10deg) translate3d(0px, 0px, 0px);
 transform: rotate(-10deg) translate3d(0px, 0px, 0px);
}
}
 @keyframes head {  0%, 46%, 50%, 55%, 100% {
 -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
 transform: rotate(0deg) translate3d(0px, 0px, 0px);
}
 49% {
 -webkit-transform: rotate(20deg) translate3d(0px, 0px, 0px);
 transform: rotate(20deg) translate3d(0px, 0px, 0px);
}
 51% {
 -webkit-transform: rotate(-10deg) translate3d(0px, 0px, 0px);
 transform: rotate(-10deg) translate3d(0px, 0px, 0px);
}
}
@-webkit-keyframes color {  0%, 100% {
 fill: #ccc;
}
 50% {
 fill: red;
}
}
@keyframes color {  0%, 100% {
 fill: #ccc;
}
 50% {
 fill: red;
}
}
#upperTorso { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-animation: torso 600ms 1s ease infinite; animation: torso 600ms 1s ease infinite; }
#upperTorso #leftArm { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 80% 5%; -ms-transform-origin: 80% 5%; transform-origin: 80% 5%; -webkit-animation: left 1s ease infinite; animation: left 1s ease infinite; }
#upperTorso #leftArm .forearm { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 68% 10%; -ms-transform-origin: 68% 10%; transform-origin: 68% 10%; -webkit-animation: forearm 800ms 1s ease infinite; animation: forearm 800ms 1s ease infinite; }
#upperTorso #rightArm { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 18% 0%; -ms-transform-origin: 18% 0%; transform-origin: 18% 0%; -webkit-animation: right 1s ease infinite; animation: right 1s ease infinite; }
#upperTorso #rightArm .forearm { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 68% 10%; -ms-transform-origin: 68% 10%; transform-origin: 68% 10%; -webkit-animation: forearm 700ms 1s ease infinite; animation: forearm 700ms 1s ease infinite; }
 @-webkit-keyframes torso {  40%, 50%, 60% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 45% {
 -webkit-transform: rotate(5deg);
 transform: rotate(5deg);
}
 55% {
 -webkit-transform: rotate(-5deg);
 transform: rotate(-5deg);
}
}
 @keyframes torso {  40%, 50%, 60% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 45% {
 -webkit-transform: rotate(5deg);
 transform: rotate(5deg);
}
 55% {
 -webkit-transform: rotate(-5deg);
 transform: rotate(-5deg);
}
}
@-webkit-keyframes left {  60% {
 -webkit-transform: rotate(100deg);
 transform: rotate(100deg);
}
}
@keyframes left {  60% {
 -webkit-transform: rotate(100deg);
 transform: rotate(100deg);
}
}
@-webkit-keyframes right {  50% {
 -webkit-transform: rotate(-70deg);
 transform: rotate(-70deg);
}
}
@keyframes right {  50% {
 -webkit-transform: rotate(-70deg);
 transform: rotate(-70deg);
}
}
@-webkit-keyframes forearm {  0%, 30%, 50%, 70%, 100% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 40% {
 -webkit-transform: rotate(25deg);
 transform: rotate(25deg);
}
 60% {
 -webkit-transform: rotate(-25deg);
 transform: rotate(-25deg);
}
}
@keyframes forearm {  0%, 30%, 50%, 70%, 100% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 40% {
 -webkit-transform: rotate(25deg);
 transform: rotate(25deg);
}
 60% {
 -webkit-transform: rotate(-25deg);
 transform: rotate(-25deg);
}
}
#lowerTrunk { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 60% 5%; -ms-transform-origin: 60% 5%; transform-origin: 60% 5%; -webkit-animation: lowerTrunk 1s ease infinite; animation: lowerTrunk 1s ease infinite; }
 @-webkit-keyframes lowerTrunk {  0%, 100% {
 -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
 transform: rotate(0deg) translate3d(0px, 0px, 0px);
}
 25% {
 -webkit-transform: rotate(2deg) translate3d(2px, 0px, 0px);
 transform: rotate(2deg) translate3d(2px, 0px, 0px);
}
 75% {
 -webkit-transform: rotate(-2deg) translate3d(-2px, 0px, 0px);
 transform: rotate(-2deg) translate3d(-2px, 0px, 0px);
}
}
 @keyframes lowerTrunk {  0%, 100% {
 -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
 transform: rotate(0deg) translate3d(0px, 0px, 0px);
}
 25% {
 -webkit-transform: rotate(2deg) translate3d(2px, 0px, 0px);
 transform: rotate(2deg) translate3d(2px, 0px, 0px);
}
 75% {
 -webkit-transform: rotate(-2deg) translate3d(-2px, 0px, 0px);
 transform: rotate(-2deg) translate3d(-2px, 0px, 0px);
}
}
#leftFoot { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 60% 5%; -ms-transform-origin: 60% 5%; transform-origin: 60% 5%; -webkit-animation: leftFoot 2s ease infinite; animation: leftFoot 2s ease infinite; }
#leftFoot > .lowerLeg { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 68% 10%; -ms-transform-origin: 68% 10%; transform-origin: 68% 10%; -webkit-animation: lowerLeg 2s ease infinite; animation: lowerLeg 2s ease infinite; }
 @-webkit-keyframes leftFoot {  0%, 50% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 25% {
 -webkit-transform: rotate(70deg);
 transform: rotate(70deg);
}
}
 @keyframes leftFoot {  0%, 50% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 25% {
 -webkit-transform: rotate(70deg);
 transform: rotate(70deg);
}
}
@-webkit-keyframes lowerLeg {  0%, 50% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 8%, 14% {
 -webkit-transform: rotate(-15deg);
 transform: rotate(-15deg);
}
 11%, 18% {
 -webkit-transform: rotate(15deg);
 transform: rotate(15deg);
}
}
@keyframes lowerLeg {  0%, 50% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 8%, 14% {
 -webkit-transform: rotate(-15deg);
 transform: rotate(-15deg);
}
 11%, 18% {
 -webkit-transform: rotate(15deg);
 transform: rotate(15deg);
}
}
#rightFoot { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 50% 5%; -ms-transform-origin: 50% 5%; transform-origin: 50% 5%; -webkit-animation: rightFoot 2s ease infinite; animation: rightFoot 2s ease infinite; }
#rightFoot > .lowerLeg { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 68% 10%; -ms-transform-origin: 68% 10%; transform-origin: 68% 10%; -webkit-animation: lowerLegIz 2s ease infinite; animation: lowerLegIz 2s ease infinite; }
 @-webkit-keyframes rightFoot {  75% {
 -webkit-transform: rotate(-60deg);
 transform: rotate(-60deg);
}
 50%, 100% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
}
 @keyframes rightFoot {  75% {
 -webkit-transform: rotate(-60deg);
 transform: rotate(-60deg);
}
 50%, 100% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
}
@-webkit-keyframes lowerLegIz {  50%, 100% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 60%, 70% {
 -webkit-transform: rotate(15deg);
 transform: rotate(15deg);
}
 65%, 85% {
 -webkit-transform: rotate(-15deg);
 transform: rotate(-15deg);
}
}
@keyframes lowerLegIz {  50%, 100% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 60%, 70% {
 -webkit-transform: rotate(15deg);
 transform: rotate(15deg);
}
 65%, 85% {
 -webkit-transform: rotate(-15deg);
 transform: rotate(-15deg);
}
}
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { background: #404853; font-family: 'Roboto Condensed', sans-serif; }
.col { text-align: center; margin:0; padding:0; }
.col h1 { text-shadow: 0 3px 0px #404853, 0 6px 0px #333333; color: #f54f59; font-size: 6em; font-weight: 700; line-height: 0.6em; margin:40px 0; padding:0; }
.col p { color: #ccc; font-family: monospace; font-size: 0.95em; font-weight: 300; line-height: 7em; margin:0; padding:5px; display:block; }