.blissbook-container{width:100%;min-height:280px;display:flex;align-items:center;justify-content:center;position:relative;padding:40px 0 60px;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.blissbook{width:165px;height:96px;position:relative;perspective:500px}.shadow{position:absolute;width:60px;height:0;left:40px;top:160px;transform:rotateX(80deg) rotateY(0deg) rotate(0deg);box-shadow:0 0 60px 40px rgba(0,0,0,.3);animation:shadow 7s ease infinite}.inner{z-index:20;top:0;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(0deg) rotate(0deg);animation:rotate 7s ease infinite}.inner,.screen{position:absolute;width:165px;height:96px;left:0}.screen{bottom:0;border-radius:7px;background:#ddd;transform-style:preserve-3d;transform-origin:50% 93px;transform:rotateX(0deg) rotateY(0deg) rotate(0deg);animation:lid-screen 7s ease infinite;background-image:linear-gradient(45deg,rgba(0,0,0,.34),rgba(0,0,0,0));background-position:0 100%;background-size:300px 300px;box-shadow:inset 0 3px 7px rgba(255,255,255,.5)}.screen .logo{position:absolute;width:34px;left:50%;top:50%;margin:-17px 0 0 -17px;transform:rotateY(180deg) translateZ(.1px);image-rendering:auto;image-rendering:high-quality}.screen .face-one{width:165px;height:96px;position:absolute;left:0;bottom:0;border-radius:7px;background:#d3d3d3;transform:translateZ(2px);background-image:linear-gradient(45deg,rgba(0,0,0,.24),rgba(0,0,0,0))}.screen .face-one .camera{width:2px;height:2px;border-radius:100%;background:#000;position:absolute;left:50%;top:2px;margin-left:-1px}.screen .face-one .display{width:155px;height:87px;margin:4px 5px;background:#000 no-repeat 50%;background-size:100% 100%;border-radius:1px;position:relative;box-shadow:inset 0 0 2px rgba(0,0,0,1);image-rendering:auto;image-rendering:high-quality;image-rendering:-webkit-optimize-contrast;backface-visibility:hidden}.screen .face-one .display .shade{position:absolute;left:0;top:0;width:155px;height:87px;background:linear-gradient(-135deg,rgba(255,255,255,0),rgba(255,255,255,.1) 47%,rgba(255,255,255,0) 48%);animation:screen-shade 7s ease infinite;background-size:300px 200px;background-position:0 0;backface-visibility:hidden}.screen .face-one span{position:absolute;top:86px;left:50%;transform:translateX(-50%);font-size:2px;color:#666;white-space:nowrap;letter-spacing:.05px;font-weight:600;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.body{background:#cbcbcb;transform-style:preserve-3d;transform-origin:50% bottom;transform:rotateX(-90deg);animation:lid-body 7s ease infinite;background-image:linear-gradient(45deg,rgba(0,0,0,.24),rgba(0,0,0,0))}.body,.body .face-one{width:165px;height:96px;position:absolute;left:0;bottom:0;border-radius:7px}.body .face-one{transform-style:preserve-3d;background:#dfdfdf;animation:lid-keyboard-area 7s ease infinite;transform:translateZ(-2px);background-image:linear-gradient(30deg,rgba(0,0,0,.24),rgba(0,0,0,0));overflow:hidden}.body .touchpad{width:42px;height:36px;position:absolute;left:50%;top:50%;border-radius:4px;margin:-46px 0 0 -21px;background:#cdcdcd;background-image:linear-gradient(30deg,rgba(0,0,0,.24),rgba(0,0,0,0));box-shadow:inset 0 0 3px #888}.body .keyboard-image{width:155px;height:45px;position:absolute;left:5px;top:41px;transform-style:preserve-3d;overflow:visible;z-index:1}.body .keyboard-image,.keyboard-graphic{border-radius:4px;backface-visibility:hidden}.keyboard-graphic{width:100%;height:100%;object-fit:fill;display:block;transform:translateZ(-1px) rotate(180deg) scaleX(-1);animation:keyboard-glow 7s ease infinite;opacity:1;image-rendering:auto;image-rendering:high-quality;image-rendering:-webkit-optimize-contrast}.body .pad{width:5px;height:5px;background:#333;border-radius:100%;position:absolute}.pad.one{left:20px;top:20px}.pad.two{right:20px;top:20px}.pad.three{right:20px;bottom:20px}.pad.four{left:20px;bottom:20px}@keyframes rotate{0%{transform:rotateX(-20deg) rotateY(0deg) rotate(0deg)}5%{transform:rotateX(-20deg) rotateY(-20deg) rotate(0deg)}20%{transform:rotateX(30deg) rotateY(200deg) rotate(0deg)}25%{transform:rotateX(-60deg) rotateY(150deg) rotate(0deg)}60%{transform:rotateX(-20deg) rotateY(130deg) rotate(0deg)}65%{transform:rotateX(-20deg) rotateY(120deg) rotate(0deg)}80%{transform:rotateX(-20deg) rotateY(375deg) rotate(0deg)}85%{transform:rotateX(-20deg) rotateY(357deg) rotate(0deg)}87%{transform:rotateX(-20deg) rotateY(1turn) rotate(0deg)}to{transform:rotateX(-20deg) rotateY(1turn) rotate(0deg)}}@keyframes lid-screen{0%{transform:rotateX(0deg);background-position:0 100%}5%{transform:rotateX(50deg);background-position:0 100%}20%{transform:rotateX(-90deg);background-position:-150px top}25%{transform:rotateX(15deg);background-position:0 100%}30%{transform:rotateX(-5deg);background-position:100% 0}38%{transform:rotateX(5deg);background-position:100% 0}48%{transform:rotateX(0deg);background-position:100% 0}90%{transform:rotateX(0deg);background-position:100% 0}to{transform:rotateX(0deg);background-position:100%}}@keyframes lid-body{0%{transform:rotateX(-90deg)}50%{transform:rotateX(-90deg)}to{transform:rotateX(-90deg)}}@keyframes lid-keyboard-area{0%{background-color:#dfdfdf}50%{background-color:#bbb}to{background-color:#dfdfdf}}@keyframes screen-shade{0%{background-position:-20px 0}5%{background-position:-40px 0}20%{background-position:200px 0}50%{background-position:-200px 0}80%{background-position:0 0}85%{background-position:-30px 0}90%{background-position:-20px 0}to{background-position:-20px 0}}@keyframes keyboard-glow{0%,to{filter:brightness(1)}50%{filter:brightness(.9)}}@keyframes shadow{0%{transform:rotateX(80deg) rotateY(0deg) rotate(0deg);box-shadow:0 0 60px 40px rgba(0,0,0,.3)}5%{transform:rotateX(80deg) rotateY(10deg) rotate(0deg);box-shadow:0 0 60px 40px rgba(0,0,0,.3)}20%{transform:rotateX(30deg) rotateY(-20deg) rotate(-20deg);box-shadow:0 0 50px 30px rgba(0,0,0,.3)}25%{transform:rotateX(80deg) rotateY(-20deg) rotate(50deg);box-shadow:0 0 35px 15px rgba(0,0,0,.1)}60%{transform:rotateX(80deg) rotateY(0deg) rotate(-50deg) translateX(30px);box-shadow:0 0 60px 40px rgba(0,0,0,.3)}to{box-shadow:0 0 60px 40px rgba(0,0,0,.3)}}.blissbook{transform:scale(1.8);transform-origin:center center}@media (min-width:640px){.blissbook{transform:scale(1.4)}}@media (min-width:1024px){.blissbook{transform:scale(1.75)}}@media (min-width:1280px){.blissbook{transform:scale(2.1)}}