h1{text-align:center}.badge{border-radius:50%;height:10em;width:10em;margin:-2em auto -1em}.subtitle{color:#999;text-align:center;font-style:italic}.author-photo{border:0.25em solid #fff;border-radius:50%;float:left;width:100px;height:100px;background:url(/prx/000/https/cssanimation.rocks/images/donovan_hutchinson.jpg) no-repeat;background-size:100%;margin:0 1em 0 0;position:relative}.signup-box{text-align:center;display:block;background:#fff;border-radius:1em;margin:0 auto;padding:1em;max-width:25em}strike{color:rgba(0,0,0,0.2)}.callout-1{margin:0 auto;max-width:500px}.features-box{background:#fff;border-radius:0.5em;padding:0.5em 1em;margin:1em}.post-header{background:#22BDA0}.post-header .hero-image{position:absolute;bottom:-20%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:56.25em}.hero-image-container{-webkit-animation:hero-fade-in 1s 0.5s linear forwards;animation:hero-fade-in 1s 0.5s linear forwards;opacity:0;overflow:hidden;position:relative;height:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:56.25em;height:26em}@-webkit-keyframes hero-fade-in{100%{opacity:1}}@keyframes hero-fade-in{100%{opacity:1}}.window-background{-webkit-animation:background-color 5s cubic-bezier(0.81, -0.46, 0.19, 1.33) infinite;animation:background-color 5s cubic-bezier(0.81, -0.46, 0.19, 1.33) infinite;position:absolute;height:40em;width:30em;top:0}.screen-container{-webkit-animation:move-emails 5s infinite ease-out;animation:move-emails 5s infinite ease-out;position:absolute;width:7.6em;height:6em;bottom:8.66em;background:#fff url(/prx/000/https/cssanimation.rocks/images/courses/animation_101/emails.svg) repeat-y;background-size:100% auto;left:50%;-webkit-transform:translate(-16.4%, -10%);transform:translate(-16.4%, -10%)}.notification{-webkit-animation:move-notification 5s infinite cubic-bezier(0.81, -0.46, 0.19, 1.33);animation:move-notification 5s infinite cubic-bezier(0.81, -0.46, 0.19, 1.33);position:absolute;bottom:62%;left:65%;width:4%;height:3%;background:#fff url(/prx/000/https/cssanimation.rocks/images/courses/animation_101/notification.svg);background-size:100%}.moon{-webkit-animation:moon 5s infinite linear;animation:moon 5s infinite linear;position:absolute;left:25%;top:3%;background:url(/prx/000/https/cssanimation.rocks/images/courses/animation_101/moon.svg) no-repeat;background-size:100%;height:25%;width:8%;-webkit-transform-origin:30% 350%;transform-origin:30% 350%}@-webkit-keyframes background-color{0%{background:#011}20%,30%{background:#5ab6fc}100%{background:#011}}@keyframes background-color{0%{background:#011}20%,30%{background:#5ab6fc}100%{background:#011}}@-webkit-keyframes move-emails{0%,24%{background-position:0 -4.6em;-webkit-animation-timing-function:cubic-bezier(0.81, -0.46, 0.19, 1.33);animation-timing-function:cubic-bezier(0.81, -0.46, 0.19, 1.33)}34%,60%{background-position:0 0}90%,100%{background-position:0 -78%}}@keyframes move-emails{0%,24%{background-position:0 -4.6em;-webkit-animation-timing-function:cubic-bezier(0.81, -0.46, 0.19, 1.33);animation-timing-function:cubic-bezier(0.81, -0.46, 0.19, 1.33)}34%,60%{background-position:0 0}90%,100%{background-position:0 -78%}}@-webkit-keyframes move-notification{0%,20%{-webkit-transform:translateX(0.25em);transform:translateX(0.25em);opacity:0}50%,58%{-webkit-transform:none;transform:none;opacity:1}70%,100%{-webkit-transform:translateX(-0.25em);transform:translateX(-0.25em);opacity:0}}@keyframes move-notification{0%,20%{-webkit-transform:translateX(0.25em);transform:translateX(0.25em);opacity:0}50%,58%{-webkit-transform:none;transform:none;opacity:1}70%,100%{-webkit-transform:translateX(-0.25em);transform:translateX(-0.25em);opacity:0}}@-webkit-keyframes moon{0%{-webkit-transform:none;transform:none;-webkit-animation-timing-function:cubic-bezier(0.25, 0, 0.41, 1);animation-timing-function:cubic-bezier(0.25, 0, 0.41, 1)}100%{-webkit-transform:rotateZ(-360deg);transform:rotateZ(-360deg);-webkit-animation-timing-function:linear;animation-timing-function:linear}}@keyframes moon{0%{-webkit-transform:none;transform:none;-webkit-animation-timing-function:cubic-bezier(0.25, 0, 0.41, 1);animation-timing-function:cubic-bezier(0.25, 0, 0.41, 1)}100%{-webkit-transform:rotateZ(-360deg);transform:rotateZ(-360deg);-webkit-animation-timing-function:linear;animation-timing-function:linear}}@media (max-width: 550px){.demo-container.clocks.single .clock,.badge{font-size:12px}}@media (max-width: 420px){.demo-container.clocks.single .clock,.badge{font-size:10px}}