:root{--animation-duration:.5s;--animation-delay-increment:.7s;--mobile-image-width:90vw;--image-width:53vw}.rack-container{width:var(--image-width);transform:perspective(100vw)rotateY(-10deg)}.rack{fill:none;stroke-width:2px;stroke:#009fe3}.network-text{opacity:0;animation:text-animation var(--animation-duration) ease-in-out forwards;animation-delay:var(--animation-delay-increment);position:fixed;top:52%;left:64%}.wireless-text{opacity:0;animation:text-animation var(--animation-duration) ease-in-out forwards;animation-delay:calc(2 * var(--animation-delay-increment));position:fixed;top:74%;left:0}.camera-text{opacity:0;animation:text-animation var(--animation-duration) ease-in-out forwards;animation-delay:calc(3 * var(--animation-delay-increment));position:fixed;top:45%;left:20%}.access-text{opacity:0;animation:text-animation var(--animation-duration) ease-in-out forwards;animation-delay:calc(4 * var(--animation-delay-increment));position:fixed;top:29%;left:35%}.automation-text{opacity:0;animation:text-animation var(--animation-duration) ease-in-out forwards;animation-delay:calc(5 * var(--animation-delay-increment));position:fixed;top:29%;left:73%}p{font-family:Play,sans-serif;font-size:calc(var(--image-width) / 100 * 2.8);color:#fff;margin:0}.rack *{animation-iteration-count:1;animation-fill-mode:forwards}.router .outline,.router .logo,.router .hdd-outline,.router .hdd-status,.router .sfp-outline,.router .sfp-status,.router .port-outline,.router .port-line{animation:draw-object var(--animation-duration) ease-in-out forwards;animation-delay:0s}.switch .outline,.switch .logo,.switch .ports .port-outline,.switch .ports .port-line{animation:draw-object var(--animation-duration) ease-in-out forwards;animation-delay:var(--animation-delay-increment)}.switch .port1 .port-line{animation:draw-object var(--animation-duration) ease-in-out forwards, blinking .3s infinite;animation-delay:calc(2 * var(--animation-delay-increment))}.switch .port2 .port-line{animation:draw-object var(--animation-duration) ease-in-out forwards, blinking .4s infinite;animation-delay:calc(3 * var(--animation-delay-increment))}.switch .port3 .port-line{animation:draw-object var(--animation-duration) ease-in-out forwards, blinking .2s infinite;animation-delay:calc(4 * var(--animation-delay-increment))}.switch .port15 .port-line{animation:draw-object var(--animation-duration) ease-in-out forwards, blinking .4s infinite;animation-delay:calc(5 * var(--animation-delay-increment))}.switch .port32 .port-line,.router-port8 .port-line{animation:draw-object var(--animation-duration) ease-in-out forwards, blinking .3s infinite;animation-delay:var(--animation-delay-increment)}.ap .outline,.ap .ap-logo,.ap .ap-indicator{animation:draw-object var(--animation-duration) ease-in-out forwards;animation-delay:calc(2 * var(--animation-delay-increment))}.ap .wireless .wave1{opacity:0;animation:3s infinite wave3;animation-delay:calc(2.5 * var(--animation-delay-increment));transform:translateY(5%)}.ap .wireless .wave2{opacity:0;animation:3s infinite wave2;animation-delay:calc(2.5 * var(--animation-delay-increment))}.ap .wireless .wave3{opacity:0;animation:3s infinite wave1;animation-delay:calc(2.5 * var(--animation-delay-increment));transform:translateY(-5%)}.camera .outline,.camera .camera-lens-outline,.camera .camera-separator{animation:draw-object var(--animation-duration) ease-in-out forwards;animation-delay:calc(3 * var(--animation-delay-increment))}.camera .camera-lens{opacity:.5;animation:draw-object var(--animation-duration) ease-in-out forwards, camera 5s infinite;animation-delay:calc(3.5 * var(--animation-delay-increment))}.access .access-video .outline,.access .access-lock,.access .access-nfc,.access .access-line,.access-video-camera,.access-video-screen,.access .lock-icon{animation:draw-object var(--animation-duration) ease-in-out forwards;animation-delay:calc(4 * var(--animation-delay-increment))}.key-nfc{animation:draw-object var(--animation-duration) ease-in-out forwards;animation-delay:calc(5 * var(--animation-delay-increment))}.access-key{animation:draw-object var(--animation-duration) ease-in-out forwards, key-animation 3s infinite;animation-delay:calc(5 * var(--animation-delay-increment));transform-origin:90% 90%;transform-box:fill-box}.lock-icon-top{animation:draw-object var(--animation-duration) ease-in-out forwards, lock-animation 3s infinite;animation-delay:calc(5 * var(--animation-delay-increment));transform-origin:90% 90%;transform-box:fill-box}.lock-icon-base{animation:draw-object var(--animation-duration) ease-in-out forwards, lock-base-animation 3s infinite;animation-delay:calc(5 * var(--animation-delay-increment))}.access-lock-magnet{animation:draw-object var(--animation-duration) ease-in-out forwards, lock-magnet-animation 3s infinite;animation-delay:calc(5 * var(--animation-delay-increment))}.controller .outline,.controller .controller-separator,.controller .controller-line{animation:draw-object var(--animation-duration) ease-in-out forwards;animation-delay:calc(5 * var(--animation-delay-increment))}.automation .speaker .speaker-outline,.automation .tv .tv-outline,.automation .thermostat .thermostat-outline,.automation .light{animation:draw-object var(--animation-duration) ease-in-out forwards;animation-delay:calc(6 * var(--animation-delay-increment))}.automation .speaker .speaker-sound1{animation:3s infinite speaker-sound1;animation-delay:calc(7 * var(--animation-delay-increment));transform-origin:50%;transform-box:fill-box}.automation .speaker .speaker-sound2{animation:3s infinite speaker-sound2;animation-delay:calc(7 * var(--animation-delay-increment));transform-origin:50%;transform-box:fill-box}.tv-text{animation:7s infinite tv-animation;animation-delay:calc(7 * var(--animation-delay-increment))}.light-outline{animation:3s forwards light-bulb;animation-delay:calc(7 * var(--animation-delay-increment))}.light-glow{animation:3s forwards light-glow;animation-delay:calc(7 * var(--animation-delay-increment))}.heat{animation:10s infinite thermostat-heat;animation-delay:calc(7 * var(--animation-delay-increment))}.cool{animation:10s infinite thermostat-cool;animation-delay:calc(7 * var(--animation-delay-increment))}.thermostat-screen{animation:10s infinite thermostat-animation;animation-delay:calc(7 * var(--animation-delay-increment))}.connection-patch{animation:draw-object var(--animation-duration) ease-in-out forwards;animation-delay:calc(2 * var(--animation-delay-increment) - var(--animation-duration))}.line1{animation:draw-object var(--animation-duration) ease-in-out forwards;animation-delay:calc(3 * var(--animation-delay-increment) - var(--animation-duration))}.line2{animation:draw-object var(--animation-duration) ease-in-out forwards;animation-delay:calc(4 * var(--animation-delay-increment) - var(--animation-duration))}.line3{animation:draw-object var(--animation-duration) ease-in-out forwards;animation-delay:calc(5 * var(--animation-delay-increment) - var(--animation-duration))}.line4{animation:draw-object var(--animation-duration) ease-in-out forwards;animation-delay:calc(6 * var(--animation-delay-increment) - var(--animation-duration))}.line5{animation:draw-object var(--animation-duration) ease-in-out forwards;animation-delay:calc(7 * var(--animation-delay-increment) - var(--animation-duration))}.outline{stroke-width:3.5px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:2000;stroke-dashoffset:2000px;animation:draw-object var(--animation-duration) ease-in-out forwards}.logo{stroke:#f48e3a;stroke-width:2.5px;stroke-miterlimit:10;stroke-dasharray:300;stroke-dashoffset:300px;filter:drop-shadow(0 0 5px #f48e3a);animation:draw-object var(--animation-duration) ease-in-out forwards}.hdd-outline{stroke-width:1.5px;stroke-miterlimit:10;stroke-dasharray:500;stroke-dashoffset:500px;animation:draw-object var(--animation-duration) ease-in-out forwards}.hdd-status{stroke:#f48e3a;stroke-width:1.5px;stroke-miterlimit:10;stroke-dasharray:150;stroke-dashoffset:150px;animation:draw-object var(--animation-duration) ease-in-out forwards}.sfp-outline{stroke-width:1.5px;stroke-miterlimit:10;stroke-dasharray:150;stroke-dashoffset:150px;animation:draw-object var(--animation-duration) ease-in-out forwards}.sfp-status{stroke:#f48e3a;stroke-width:1.5px;stroke-miterlimit:10;stroke-dasharray:150;stroke-dashoffset:150px;animation:draw-object var(--animation-duration) ease-in-out forwards}.port-outline{stroke-miterlimit:10;stroke-dasharray:150;stroke-dashoffset:150px;animation:draw-object var(--animation-duration) ease-in-out forwards}.port-line{stroke-width:1.5px;stroke-miterlimit:10;stroke-dasharray:300;stroke-dashoffset:300px;animation:draw-object var(--animation-duration) ease-in-out forwards}.automation{stroke-miterlimit:10;stroke-dasharray:350;stroke-dashoffset:350px;animation:draw-object var(--animation-duration) ease-in-out forwards;animation-delay:calc(6 * var(--animation-delay-increment) - var(--animation-duration))}.port1 .port-line,.port2 .port-line,.port3 .port-line,.port15 .port-line,.port32 .port-line,.router-port8 .port-line{stroke:#fff;stroke-width:3.5px;filter:drop-shadow(0 0 5px #fff)}.connection-patch{fill:none;stroke-width:2.5px;stroke:#f48e3a;stroke-miterlimit:10;stroke-dasharray:200;stroke-dashoffset:200px;filter:drop-shadow(0 0 3px #f48e3a)}.line1,.line2,.line3,.line4,.line5{fill:none;stroke-width:2.5px;stroke:#f48e3a;stroke-miterlimit:10;stroke-dasharray:800;stroke-dashoffset:800px;filter:drop-shadow(0 0 3px #f48e3a)}.controller-line{stroke-width:2.5px;stroke:#f48e3a;stroke-miterlimit:10;stroke-dasharray:100;stroke-dashoffset:100px;filter:drop-shadow(0 0 3px #f48e3a)}.controller-separator{stroke:#f48e3a;stroke-miterlimit:10;stroke-dasharray:450;stroke-dashoffset:450px}.text{opacity:100;stroke:#f48e3a;font-size:1.5rem}.cool{opacity:0;stroke:#009fe3;font-size:1.5rem}.speaker-sound{stroke-width:2.5px;stroke:#fff;filter:drop-shadow(0 0 3px #fff)}.speaker-center{stroke:#f48e3a}.camera-lens-outline,.camera-separator{stroke-width:2.5px;stroke:#f48e3a;stroke-miterlimit:10;stroke-dasharray:250;stroke-dashoffset:250px}.camera-lens{stroke-width:2.5px;stroke:#fff;filter:drop-shadow(0 0 3px #fff);stroke-miterlimit:10;stroke-dasharray:100;stroke-dashoffset:100px}.access-nfc,.key-nfc{stroke:#f48e3a;stroke-miterlimit:10;stroke-dasharray:50;stroke-dashoffset:50px}.access-video-camera{stroke-width:2.5px;stroke:#fff;stroke-miterlimit:10;stroke-dasharray:100;stroke-dashoffset:100px}.access-line{stroke-width:2.5px;stroke:#f48e3a;stroke-miterlimit:10;stroke-dasharray:50;stroke-dashoffset:50px;filter:drop-shadow(0 0 3px #f48e3a)}.access-lock-magnet{stroke-width:2px;stroke:#fff;stroke-miterlimit:10;stroke-dasharray:200;stroke-dashoffset:200px}.access-video-screen{stroke-miterlimit:10;stroke-dasharray:450;stroke-dashoffset:450px}.access-lock{stroke-miterlimit:10;stroke-dasharray:400;stroke-dashoffset:400px}.lock-icon,.access-key{stroke-miterlimit:10;stroke-dasharray:200;stroke-dashoffset:200px}.ap-logo{stroke-width:2.5px;stroke:#f48e3a;stroke-miterlimit:10;stroke-dasharray:250;stroke-dashoffset:250px}.ap-indicator{stroke-width:2.5px;stroke:#fff;stroke-miterlimit:10;stroke-dasharray:100;stroke-dashoffset:100px}.wireless{stroke-width:2.5px;stroke:#fff;filter:drop-shadow(0 0 3px #fff)}@keyframes draw-object{to{stroke-dashoffset:0}}@keyframes blinking{0%,to{opacity:1;color:#fff}50%{opacity:0;color:#fff}}@keyframes wave1{0%,20%{opacity:0}40%,50%{opacity:100}to{opacity:0}}@keyframes wave2{0%,40%{opacity:0}60%,70%{opacity:100}to{opacity:0}}@keyframes wave3{0%,60%{opacity:0}80%,90%{opacity:100}to{opacity:0}}@keyframes camera{0%{stroke-width:2px;opacity:.5}50%{stroke-width:10px;opacity:1}to{stroke-width:2px;opacity:.5}}@keyframes key-animation{0%{transform:rotate(0)}50%{transform:rotate(-45deg)}to{transform:rotate(0)}}@keyframes lock-animation{0%{stroke:#009fe3;transform:rotate(0)}50%{stroke:#fff;transform:rotate(45deg)}to{stroke:#009fe3;transform:rotate(0)}}@keyframes lock-base-animation{0%{stroke:#009fe3}50%{stroke:#fff}to{stroke:#009fe3}}@keyframes lock-magnet-animation{0%{stroke:#fff}50%{stroke:#009fe3}to{stroke:#fff}}@keyframes speaker-sound1{0%{transform:none}25%{transform:rotate(-2deg)translateY(4px)}33%{transform:rotate(2deg)translateY(7px)}50%{transform:rotate(0)translateY(0)}66%{transform:rotate(2deg)translateY(-1px)}75%{transform:rotate(-2deg)translateY(-2px)}to{transform:none}}@keyframes speaker-sound2{0%{transform:none}20%{transform:rotate(-3deg)translateY(2px)}30%{transform:rotate(3deg)translateY(3px)}50%{transform:rotate(0)translateY(0)}60%{transform:rotate(3deg)translateY(-1px)}75%{transform:rotate(-3deg)translateY(-1px)}to{transform:none}}@keyframes tv-animation{0%{transform:none}20%{transform:translate(7px)translateY(7px)}40%{transform:translate(-7px)translateY(7px)}60%{transform:translate(-7px)translateY(-7px)}80%{transform:translate(7px)translateY(-7px)}to{transform:none}}@keyframes light-bulb{0%{stroke:#009fe3;filter:none}10%{stroke:#009fe3;filter:none}12%{stroke:#fbfbfb;filter:none}15%{stroke:#009fe3;filter:none}20%{stroke:#fff;filter:none}25%{stroke:#fff;filter:none}30%{stroke:#009fe3;filter:none}45%{stroke:#009fe3;filter:none}50%{stroke:#fff;filter:drop-shadow(0 0 1px #fff)}to{stroke:#fff;filter:drop-shadow(0 0 7px #fff)}}@keyframes light-glow{0%{stroke:#009fe3;filter:none}10%{stroke:#009fe3;filter:none}12%{stroke:#f48e3a;filter:none}15%{stroke:#009fe3;filter:none}20%{stroke:#f48e3a;filter:none}25%{stroke:#f48e3a;filter:none}30%{stroke:#009fe3;filter:none}45%{stroke:#009fe3;filter:none}50%{stroke:#f48e3a;filter:drop-shadow(0 0 1px #fff)}to{stroke:#f48e3a;filter:drop-shadow(0 0 7px #fff)}}@keyframes thermostat-heat{0%{opacity:100}30%{opacity:100}40%{opacity:0}90%{opacity:0}to{opacity:100}}@keyframes thermostat-cool{0%{opacity:0}40%{opacity:0}50%{opacity:100}80%{opacity:100}90%{opacity:0}to{opacity:0}}@keyframes thermostat-animation{0%{stroke:#f48e3a;filter:drop-shadow(0 0 4px #fff)}40%{stroke:#f48e3a;filter:drop-shadow(0 0 4px #fff)}50%{stroke:#fff;filter:drop-shadow(0 0 6px #009fe3)}90%{stroke:#fff;filter:drop-shadow(0 0 6px #009fe3)}to{stroke:#f48e3a;filter:drop-shadow(0 0 4px #fff)}}@keyframes text-animation{0%{opacity:0;transform:scale(0)}to{opacity:100;transform:scale(1)}}@media (max-width:768px){.rack-container{width:var(--mobile-image-width);transform:perspective(80vw)rotateY(-10deg)}p{font-size:calc(var(--mobile-image-width) / 100 * 2.8)}}