.animation{display:inline-block;position:relative;width:318px;height:239px;margin:0 auto;vertical-align:middle}.animation .device{position:absolute;width:100%;height:100%;left:32%;top:50%;background:#111;-webkit-transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);-moz-transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);-ms-transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.animation .device .phone-home-button,.animation .device .tablet-home-button{position:absolute;border-radius:50%;background:#444;opacity:0;z-index:1;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-ms-transition:all 0.4s ease;transition:all 0.4s ease}.animation .device .phone-home-button{width:16px;height:16px;margin-top:-8px;right:11px;top:50%}.animation .device .tablet-home-button{width:12px;height:12px;margin-left:-6px;bottom:7px;left:50%}.animation .device .screen-stand{position:absolute;width:100%;margin-left:-10px;margin-top:-1px;top:60%;opacity:0;z-index:1;-webkit-transition:all 0.4s ease-out;-moz-transition:all 0.4s ease-out;-ms-transition:all 0.4s ease-out;transition:all 0.4s ease-out}.animation .device .screen-stand .leg{position:absolute;width:12px;height:16px;left:50%;top:0;margin-left:-6px;background:#111}.animation .device .screen-stand .foot{position:absolute;width:120px;height:4px;left:50%;top:15px;margin-left:-60px;border-top-left-radius:2px;border-top-right-radius:2px;background:#111}.animation .device .display{position:relative;width:100%;height:100%;overflow:hidden;background:#34495e;z-index:3}.animation .device .display div{position:absolute;width:100%;height:100%;left:100%;white-space:nowrap;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-ms-transition:all 0.4s ease;transition:all 0.4s ease}.animation .device .display div div{position:absolute;width:100%;left:0;top:50%;margin-top:-14px;font-size:0.7em;text-align:center;color:#fff}.animation .device .display div div em{font-weight:bold}.animation .device .display .slide1{background:#B35C91}.animation .device .display .slide2{background:#87CAB7}.animation .device .display .slide3{background:#DB9982}.animation[data-animation-step="1"] .device{width:70%;height:60%;padding:10px;border-radius:4px}.animation[data-animation-step="1"] .device .slide1{left:0%}.animation[data-animation-step="1"] .device .screen-stand{opacity:1;top:100%}.animation[data-animation-step="2"] .device{width:45%;height:72%;padding:24px;border-radius:10px}.animation[data-animation-step="2"] .device .slide1{left:-100%}.animation[data-animation-step="2"] .device .slide2{left:0%}.animation[data-animation-step="2"] .device .tablet-home-button{opacity:1}.animation[data-animation-step="3"] .device{width:54%;height:38%;padding:10px 36px;border-radius:6px}.animation[data-animation-step="3"] .device .slide1,.animation[data-animation-step="3"] .device .slide2{left:-100%}.animation[data-animation-step="3"] .device .slide3{left:0%}.animation[data-animation-step="3"] .device .phone-home-button{opacity:1}