body,html{padding:0;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;width:100%;height:100%}a{color:inherit;text-decoration:none}button{cursor:pointer}button[aria-disabled=true]{opacity:.3;cursor:default}*{box-sizing:border-box}:root{--xf-purple:#5a23b7;--xf-gray:hsla(0,0%,100%,0.75);--xf-white50:hsla(0,0%,100%,0.5);--gradient:center/cover no-repeat url(/images/10ggradient.jpg);--xfinity-light-button:#ececf2}@font-face{font-family:XfinityBrown;src:url(/fonts/XfinityBrownWeb-Bold.eot);src:url(/fonts/XfinityBrownWeb-Bold.woff) format("woff"),url(/fonts/XfinityBrownWeb-Bold.woff2) format("woff2");font-weight:800;font-display:swap}@font-face{font-family:XfinityBrown;src:url(/fonts/XfinityBrownWeb-BoldItalic.eot);src:url(/fonts/XfinityBrownWeb-BoldItalic.woff) format("woff"),url(/fonts/XfinityBrownWeb-BoldItalic.woff2) format("woff2");font-weight:800;font-style:italic;font-display:swap}@font-face{font-family:XfinityBrown;src:url(/fonts/XfinityBrownWeb-Regular.eot);src:url(/fonts/XfinityBrownWeb-Regular.woff) format("woff"),url(/fonts/XfinityBrownWeb-Regular.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:XfinityBrown;src:url(/fonts/XfinityBrownWeb-Italic.eot);src:url(/fonts/XfinityBrownWeb-Italic.woff) format("woff"),url(/fonts/XfinityBrownWeb-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:XfinityBrown;src:url(/fonts/XfinityBrownWeb-Light.eot);src:url(/fonts/XfinityBrownWeb-Light.woff) format("woff"),url(/fonts/XfinityBrownWeb-Light.woff2) format("woff2");font-weight:300;font-display:swap}@font-face{font-family:XfinityBrown;src:url(/fonts/XfinityBrownWeb-LightItalic.eot);src:url(/fonts/XfinityBrownWeb-LightItalic.woff) format("woff"),url(/fonts/XfinityBrownWeb-LightItalic.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap}@font-face{font-family:DmSansRegular;src:url(/fonts/dmsans-regular.woff) format("woff"),url(/fonts/dmsans-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:DmSansMedium;src:url(/fonts/dmsans-medium.eot);src:url(/fonts/dmsans-medium.woff) format("woff"),url(/fonts/dmsans-medium.woff2) format("woff2");font-weight:800;font-display:swap}@font-face{font-family:DmSansBold;src:url(/fonts/dmsans-bold.eot);src:url(/fonts/dmsans-bold.woff) format("woff"),url(/fonts/dmsans-bold.woff2) format("woff2");font-weight:800;font-display:swap}.sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}.gradient{background:var(--gradient)}.type-display-1,.type-display-2,.type-display-xl,.type-headline-1,.type-headline-2,.type-headline-3{font-weight:700;letter-spacing:.2px;font-family:XfinityBrown,sans-serif}.html-body.type-body-1 a,.type-body-1,.type-body-2,.type-body-3,.type-body-xl,.type-callout-1,.type-callout-2{font-weight:400;letter-spacing:0;font-family:DmSansRegular,sans-serif;font-feature-settings:none;font-variant-ligatures:none}.type-display-xl{line-height:48px;font-size:48px;color:#fff}.type-display-1{line-height:48px;font-size:2.25rem;font-size:36px}.type-display-2{line-height:40px;font-size:32px}.type-headline-1{line-height:32px;font-size:24px}.type-headline-2{line-height:28px;font-size:20px}.type-headline-3{line-height:24px;font-size:16px}.type-body-xl{font-size:20px;color:#fff}.html-body.type-body-1 a,.type-body-1{line-height:16px;font-size:12px}.type-body-2{line-height:20px;font-size:14px;color:#fff}.type-body-3,.type-body-4{line-height:16px;font-size:12px;color:#fff}.body-bold.body-bold,.type-body-4,strong{font-weight:800;font-family:DmSansBold,sans-serif;color:#fff}.type-callout-1,.type-callout-2{letter-spacing:1px;line-height:16px}.type-callout-1{font-size:14px}.type-callout-2{font-size:12px}.type-caption{font-family:DmSansMedium,sans-serif;font-size:10px;font-weight:500}.intro-button{font-family:DmSansBold,sans-serif;font-size:18px;border:none;background-color:#fff!important;opacity:1;cursor:pointer;padding:.85rem 2rem .75rem;border-radius:5px;transition:all .2s ease;height:-moz-min-content;height:min-content}.intro-button,.intro-button strong{color:var(--xf-purple)!important}.intro-button svg{fill:var(--xf-purple)!important}.end-button{padding:.75rem 2rem;border:2px solid #fff;transition:all .3s ease}.end-button:hover{background-color:transparent!important;color:#fff!important}.app-container{text-align:center;justify-content:center;flex-direction:col;flex-wrap:wrap;width:100%;height:100%;overflow-x:hidden}.app-container,.top-content{display:flex;align-items:center}.top-content{flex-direction:row;justify-content:space-between}.top-content .xfinity-logo{height:35px;width:auto}.dots-container,.dots-container .dot{display:flex;justify-content:center;align-items:center}.dots-container .dot{margin:.5rem;width:25px;height:25px;background-color:transparent;border:2px solid #fff;border-radius:100%}.dots-container .dot svg{width:12px;height:11px;fill:#fff}.dots-container .dot.active{background-color:var(--xf-white50)}.dots-container .dot.wrong{background-color:transparent}.dots-container .dot.right{background-color:#fff}.dots-container .dot.right svg{fill:var(--xf-purple)}.timer-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:center}.timer-wrapper .timer{width:28px;height:28px}.timer-wrapper .timer>*{fill:#fff}.timer-wrapper .timer circle{transform:rotate(-45deg);stroke:#fff;stroke-width:27px;stroke-dasharray:223;stroke-dashoffset:223;animation:dash 66.4s linear;fill:transparent}.timer-wrapper .timer .pause{animation-play-state:paused!important}.timer-wrapper h3{margin:0;font-size:25px;font-weight:700;width:90px;color:#fff}.timer-wrapper .times-up-heading{font-size:17px}@keyframes dash{0%{stroke-dashoffset:223}to{stroke-dashoffset:0}}@media(max-width:725px){.top-content{flex-wrap:wrap;justify-content:center}.xfinity-logo{order:1}.timer-wrapper{order:2;margin-left:2rem}.dots-container{order:3;width:100%}}@media(max-width:475px){.dots-container{margin-top:.5rem}.dots-container .dot{margin:.25rem;width:17px;height:17px}.dots-container .dot svg{width:9px;height:9px}.top-content{margin-bottom:2rem}.top-content .xfinity-logo{height:25px;width:auto}.timer-wrapper .timer{width:20px;height:20px}.timer-wrapper .timer circle{transform:rotate(-45deg);stroke:#fff;stroke-width:27px;stroke-dasharray:223;stroke-dashoffset:223;animation:dash 68s linear}.timer-wrapper h3{font-size:20px;font-weight:700;width:60px}.timer-wrapper .times-up-heading{font-size:13px;width:100%}}.game-content .container{margin:2rem 0}.game-content .container .card:not(.mounted){opacity:0}.game-content .container .card:not(.mounted) .card-content{transform:rotateX(45deg)}.game-content .container .card{margin:10px;opacity:1;transform:translateY(0);cursor:pointer;text-align:center;perspective:1000px;width:275px;height:375px;transition:opacity .3s ease-out,transform .2s ease-in-out;transition-delay:.4s;background-color:transparent;border:none;border-radius:15px;outline-offset:5px}.game-content .container .card .card-content{width:100%;height:100%;transition:transform .9s cubic-bezier(.9,0,.1,1);transform-style:preserve-3d;transform-origin:center bottom}.game-content .container .card .card-content h4{position:absolute;top:0;left:50%;transform:translateX(-50%);opacity:0;visibility:hidden;transition:all .15s ease-in .5s}.game-content .container .card .card-content .fade-in{opacity:1;visibility:visible}.game-content .container .card .card-content .back,.game-content .container .card .card-content .front{position:absolute;height:100%;width:100%;backface-visibility:hidden;color:#0d0d0f;border-radius:15px;display:flex;align-items:center;justify-content:center;padding:30px}.game-content .container .card .card-content .type-body-1,.game-content .container .card .card-content .type-headline-3{font-size:18px;line-height:24px}.game-content .container .card .card-content .front{color:var(--xf-purple);filter:brightness(100%);transition:transform .2s ease-in-out,box-shadow .2s,filter .2s cubic-bezier(.9,0,.1,1);box-shadow:0 1px 6px 0 rgba(0,0,0,.05),0 4px 12px 0 rgba(0,0,0,.1);background:#fff}.game-content .container .card .card-content .back{transform:rotateY(180deg) translateY(-10px);color:#fff;transition:transform .2s ease-in-out,box-shadow .2s ease-in,filter 1.2s cubic-bezier(.9,0,.1,1);transform:rotateY(180deg);filter:brightness(20%);box-shadow:0 1px 6px 0 transparent,0 12px 18px 0 rgba(50,30,120,0)}.game-content .container .none-selected .card-content:hover .front{transform:translateY(-10px);box-shadow:0 1px 6px 0 transparent,0 12px 18px 0 rgba(0,0,0,.08)}.game-content .container .none-selected .card-content:hover .back{transform:rotateY(180deg) translateY(-10px)}.game-content .container .flipped .card-content{transform:rotateY(180deg);transition:all .9s cubic-bezier(.9,0,.1,1)}.game-content .container .flipped .card-content .front{transition:transform .2s ease-in-out,box-shadow 1s,filter 1s cubic-bezier(.9,0,.1,1);box-shadow:0 2px 10px 0 transparent;filter:brightness(60%)}.game-content .container .flipped .card-content .back{transition:transform .2s ease-in-out,box-shadow .75s ease-in,filter .9s cubic-bezier(.9,0,.1,1);filter:brightness(100%)}.game-content .container .wrong.selection-made.flipped .card-content .back{background:var(--xf-gray);color:#000}.game-content .container .wrong.selection-made.flipped .card-content .back:before{content:url(/images/ex.svg);text-align:center;width:35px;height:30px;padding:4px 0 1px;display:flex;align-items:center;justify-content:center;color:#fff;position:absolute;top:0;transform:translateY(-50%);background-color:#fff;border-radius:100%;transition:all .15s ease-in}.game-content .container .wrong.selection-made.flipped .card-content .back:before svg{margin-top:10px}.game-content .container .wrong.selection-made.not-flipped .card-content .front{background:var(--xf-gray);color:#000}.game-content .container .selection-made.correct .card-content .back,.game-content .container .selection-made.correct .card-content .front{background:var(--xf-purple);color:#fff;box-shadow:0 0 100px rgba(255,255,255,.4),-4px -2px 25px rgba(255,255,255,.3),4px 2px 25px rgba(255,255,255,.3)}.game-content .container .correct.selection-made.flipped .card-content .back:before{content:url(/images/check.svg);text-align:center;width:35px;height:30px;padding:4px 0 1px;display:flex;align-items:center;justify-content:center;color:#fff;position:absolute;top:0;transform:translateY(-50%);background-color:#fff;border-radius:100%;transition:all .15s ease-in}.game-content .container .correct.selection-made.flipped .card-content .back:before svg{margin-top:10px}.game-content .container .times-up-cards.correct .card-content .back{background:var(--xf-purple);color:#fff;box-shadow:0 0 20px rgba(255,255,255,.2),-2px -2px 50px rgba(255,255,255,.25),2px 5px 60px rgba(255,255,255,.25)}.game-content .container .times-up-cards.wrong .card-content .front{background:var(--xf-gray);color:#000}.game-content .container .not-clickable{pointer-events:none}.game-content .howto-container{margin:.5rem 0 2rem}@media(max-height:700px){.game-content .container .card{width:250px;height:350px}.game-content .container .card .card-content .type-body-1,.game-content .container .card .card-content .type-headline-2,.game-content .container .card .card-content .type-headline-3{font-size:16px;line-height:22px}.game-content .container .card .card-content .type-headline-1{font-size:25px}.game-content .howto-container{margin:0 0 1rem}.game-content .howto-response button{padding:.75rem 1.5rem}.game-content .howto-response button strong{font-size:16px}.game-content .select-card .answer-response,.game-content .select-card button{font-size:16px!important}}@media(max-width:900px){.game-content .container .card{width:300px;height:250px}.game-content .container .card .card-content .type-body-1,.game-content .container .card .card-content .type-headline-2,.game-content .container .card .card-content .type-headline-3{font-size:16px;line-height:22px}.game-content .container .card .card-content .type-headline-1{font-size:25px}.game-content .container .card .card-content .back,.game-content .container .card .card-content .front{padding:20px 25px}.game-content .container .card .card-content .back h4,.game-content .container .card .card-content .front h4{margin:1.5rem 0 0}}@media(max-width:550px){.game-content{padding:2rem!important}.game-content .select-card{display:flex;flex-direction:column;align-items:center;justify-content:center}.game-content .select-card .answer-response{padding:0 0 2rem!important}}@media(min-height:800px)and (min-width:1300px){.game-content .container .card{width:300px;height:400px}.game-content .container .card .card-content .type-body-1,.game-content .container .card .card-content .type-headline-2,.game-content .container .card .card-content .type-headline-3{font-size:20px;line-height:26px}.game-content .container .card .card-content .type-headline-1{font-size:30px}.game-content .howto-container{margin:.5rem 0 2.5rem}.game-content .howto-response button{padding:1rem 2.5rem}.game-content .howto-response button strong{font-size:20px}.game-content .select-card .answer-response,.game-content .select-card button{font-size:20px!important}}@media(min-height:1025px)and (min-width:1500px){.game-content .container .card{margin:20px;width:375px;height:500px}.game-content .container .card .card-content .type-body-1,.game-content .container .card .card-content .type-headline-2,.game-content .container .card .card-content .type-headline-3{font-size:25px;line-height:35px}.game-content .container .card .card-content .type-headline-1{font-size:35px;width:100%}.game-content .howto-container{margin:1rem 0 3rem}.game-content .howto-response button{padding:1.5rem 3.5rem}.game-content .howto-response button strong{font-size:25px}.game-content .select-card .answer-response,.game-content .select-card button{font-size:25px!important;line-height:35px!important}.game-content .top-content .xfinity-logo{height:50px}.game-content .top-content .dots-container .dot{width:35px;height:35px}.game-content .top-content .dots-container .dot svg{width:18px;height:16px}.game-content .top-content .timer-wrapper .timer{width:35px;height:35px}.game-content .top-content .timer-wrapper h3{font-size:30px;width:160px}}.game-container{position:relative;width:100%;max-width:1000px;border-radius:25px}.game-container .how-to-body{color:#fff;font-size:16px;line-height:22px}.game-container .how-to-body strong{font-weight:700;font-size:18px}@media(min-height:800px)and (min-width:1300px){.game-container{max-width:1200px}.game-container .how-to-body{font-size:20px;line-height:28px}.game-container .how-to-body strong{font-size:22px}}@media(min-height:1025px)and (min-width:1500px){.game-container{max-width:1500px}.game-container .game-title h2{font-size:40px}.game-container .how-to-body{font-size:25px;line-height:35px}.game-container .how-to-body strong{font-size:30px}}.game-container .game-footer{width:100%;padding:0 5%}.game-container .game-title{margin-top:1rem;color:#fff}.game-container .game-title span{display:flex;width:100%;align-items:center;justify-content:center}.game-container .game-title p{margin:1rem}.game-container .game-title h1,.game-container .game-title h2,.game-container .game-title h3{margin:0}.game-container .game-title h3{margin-left:3.5rem;display:inline-block}.game-container .game-title h3 span{width:unset;display:inline-block}.game-container .game-title h3 span:first-child{margin-right:4rem}.game-container .game-content{text-align:center;padding:3% 5%}.game-container .game-content.intro-view{display:flex;align-items:center;justify-content:center;flex-direction:column;padding:3% 5% 3rem}.game-container .game-content.intro-view .xfinity-logo-intro{margin-bottom:2rem}.game-container .game-content.intro-view .intro-container{display:flex;align-items:center;justify-content:center;flex-direction:row}.game-container .game-content.intro-view .intro-container .game-left-col .wifi-svg{fill:#fff;height:190px;width:auto}.game-container .game-content.intro-view .intro-container .game-left-col .wifi-svg path{opacity:.5}.game-container .game-content.intro-view .intro-container .game-left-col .wifi-svg path:first-of-type{opacity:1}.game-container .game-content.intro-view .intro-container .game-left-col .wifi-svg path:nth-of-type(2){animation:wifi-blink 2s ease infinite forwards}@media(prefers-reduced-motion){.game-container .game-content.intro-view .intro-container .game-left-col .wifi-svg path:nth-of-type(2){animation:none;opacity:1}}@keyframes wifi-blink{0%{opacity:.5}40%{opacity:1}60%{opacity:1}to{opacity:.5}}@media(max-width:700px){.game-container .game-content.intro-view .intro-container{flex-direction:column;padding-bottom:0;align-items:center}.game-container .game-content.intro-view .intro-container .game-left-col .wifi-svg{height:125px}.game-container .game-content.intro-view .intro-container .game-right-col{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:2rem 0 1rem}.game-container .game-content.intro-view .intro-container .game-right-col h1{text-align:center;font-size:35px;line-height:42px}.game-container .game-content.intro-view{padding:3% 5% 1.5rem}}.game-container .game-content h1,.game-container .game-content h2{margin:0 auto}.game-container .game-content .game-right-col{margin-left:4rem;text-align:left}.game-container .game-content .answer-response{text-align:left;padding-left:1rem;padding-right:4rem;flex-grow:1;color:#fff;margin:0;font-size:18px;line-height:24px}.game-container .answer-response span{font-size:12px}.game-container .game-footer button.intro-button,.game-container .select-card button.intro-button{display:inline-flex;align-items:center;background-color:transparent;border:none;color:#fff;font-size:18px}.game-container .game-footer button.intro-button svg,.game-container .select-card button.intro-button svg{margin-left:1rem;transition:transform .25s;fill:#fff}.game-container .game-footer button.intro-button:hover svg,.game-container .select-card button.intro-button:hover svg{transform:translateX(10px)}#end-particles,#success-particles{position:absolute;width:100%;height:100%;pointer-events:none}#end-particles{top:0;left:0;max-width:100vw;z-index:1}#success-particles{top:0;left:50%;width:50%;transform:translateX(-50%);display:flex;justify-content:center;align-items:center;z-index:1}@media(max-width:800px){#success-particles{width:100%}}#success-particles canvas{width:100%;height:100%;z-index:-1}