.how-to-steps .hero{background-image:url(/cdn/shop/files/new-diy-hero-bg-6b98187493d9346cf623aa822776eec2.jpg?v=1642420997);background-size:cover;background-position:center center;background-repeat:no-repeat;height:auto}.how-to-steps .hero *{color:#fff}.how-to-steps .hero .page-width{display:flex;justify-content:center}@media screen and (max-width: 749px){.how-to-steps .hero .page-width{flex-wrap:wrap}}@media screen and (min-width: 750px){.how-to-steps .hero .page-width{align-items:center;justify-content:space-between}}.how-to-steps .hero .hero-description{flex:100%;text-align:center}@media screen and (max-width: 749px){.how-to-steps .hero .hero-description{margin:8% 0 0}}@media screen and (min-width: 750px){.how-to-steps .hero .hero-description{text-align:left;margin-right:15px;flex:0 1 530px}}.how-to-steps .hero .hero-description h1{color:#fdcd0f;font-size:calc(22px + .02125*(100vw - 320px));font-weight:700;margin:0 auto 2%}@media screen and (min-width: 750px){.how-to-steps .hero .hero-description h1{max-width:430px;max-width:none;line-height:90%;margin-bottom:35px}}@media screen and (min-width: 1920px){.how-to-steps .hero .hero-description h1{font-size:56px}}.how-to-steps .hero .hero-description h2,.how-to-steps .hero .hero-description .how-to-support p{letter-spacing:1px;font-weight:400;font-size:calc(12px + 7*(100vw - 320px)/429);text-transform:none}@media screen and (min-width: 750px){.how-to-steps .hero .hero-description h2,.how-to-steps .hero .hero-description .how-to-support p{font-size:calc(11.56823px + .44743vw)}}.how-to-steps .hero .products{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:space-between;flex:100%;margin:5vw 0}@media screen and (min-width: 750px){.how-to-steps .hero .products{flex:0 1 1100px;align-items:center}}.how-to-steps .hero .products .product{border-radius:15px;background:#fff3;margin-bottom:5vw;flex:0 0 32%;text-align:center;cursor:pointer;padding:2% 0 1%}@media screen and (min-width: 750px){.how-to-steps .hero .products .product{flex:0 0 14%;margin-bottom:0}}.how-to-steps .hero .products .product .product-selection{height:auto;width:100%;max-width:74%}.how-to-steps .hero .products .product .ribbon{margin:-10px 0 0}.how-to-steps .hero .products .product .tab-title{font-size:calc(10.42058px + 1.11857vw);opacity:.3;line-height:1.2}@media screen and (min-width: 750px){.how-to-steps .hero .products .product .tab-title{font-size:calc(12.56823px + .44743vw);width:90%;margin:0 auto}}.how-to-steps .hero .products .product[aria-selected=true],.how-to-steps .hero .products .product:hover{background:#ffffff80}.how-to-steps .hero .products .product[aria-selected=true] p,.how-to-steps .hero .products .product:hover p{opacity:1}.how-to-steps .hero .products .product:first-of-type{flex:1 0 100%;position:relative}@media screen and (max-width: 749px){.how-to-steps .hero .products .product:first-of-type{flex:0 0 48%}}@media screen and (min-width: 750px){.how-to-steps .hero .products .product:first-of-type{max-width:25%}}.how-to-steps .hero .products .product:first-of-type .product-selection{max-width:80%}.how-to-steps .hero .products .product:first-of-type .wifi-tag{position:absolute;content:"";top:-1px;right:-1px;z-index:2;max-width:30%}@media screen and (min-width: 750px){.how-to-steps .hero .products .product:first-of-type .wifi-tag{max-width:50%}}.how-to-steps .hero .products .product:first-of-type p{font-weight:700}.how-to-steps .hero .products .product:first-of-type span:not(.vendor){display:block;font-weight:400;font-size:90%}.how-to-steps .hero .products .product:nth-of-type(2){flex:1 0 100%;position:relative}.how-to-steps .hero .products .product:nth-of-type(2) .product-selection{max-width:80%}@media screen and (max-width: 749px){.how-to-steps .hero .products .product:nth-of-type(2){flex:0 0 48%;position:relative}}@media screen and (min-width: 750px){.how-to-steps .hero .products .product:nth-of-type(2){max-width:25%}}.how-to-steps .container{position:relative;margin-top:20px}.how-to-steps .container div[aria-hidden=true]{display:none}.how-to-steps .container .steps-container{margin-top:-13vh}.how-to-steps .container .step .page-width{display:flex;align-items:start;flex-wrap:wrap}.how-to-steps .container .step .page-width .step-header{flex:1 1 100%;display:flex;flex-flow:column;align-items:center;text-align:center}@media screen and (min-width: 750px){.how-to-steps .container .step .page-width .step-header{flex-flow:row;text-align:left}}.how-to-steps .container .step .page-width .step-header h3{color:rgb(var(--color-sale));letter-spacing:0;font-weight:700;font-size:16px;line-height:18px}@media screen and (min-width: 750px){.how-to-steps .container .step .page-width .step-header h3{flex:0 0 calc(50% - 136px);margin-left:30px;font-size:30px;line-height:35px}}.how-to-steps .container .step .page-width .step-header .step-number{border-radius:50%;background-color:rgb(var(--color-sale));color:#fff;font-weight:600;text-align:center;margin-bottom:1.45rem;width:12vw;height:12vw;font-size:9vw;line-height:12vw}@media screen and (min-width: 750px){.how-to-steps .container .step .page-width .step-header .step-number{max-width:10vh;max-height:10vh;font-size:7vh;line-height:10vh}}.how-to-steps .container .step .page-width h4{font-size:28px;font-weight:700;margin-top:0}@media screen and (min-width: 750px){.how-to-steps .container .step .page-width h4{font-size:calc(12.34783px + 1.82609vw)}}.how-to-steps .container .step .page-width .content{font-size:110%;font-weight:400;letter-spacing:0;text-align:left;flex:100%}@media screen and (min-width: 750px){.how-to-steps .container .step .page-width .content{flex:50%;padding:0}}.how-to-steps .container .step .page-width .content p,.how-to-steps .container .step .page-width .content ol{font-size:inherit}.how-to-steps .container .step .page-width .content ol{padding:4% 4% 4% 5%}.how-to-steps .container .step .page-width .content ol li{list-style:decimal;line-height:1.5;letter-spacing:0}.how-to-steps .container .step .page-width .videos{position:relative;z-index:1;max-width:100%;width:100%;aspect-ratio:16/9;overflow:hidden}@media screen and (min-width: 750px){.how-to-steps .container .step .page-width .videos{flex:50%}}.how-to-steps .container .step .page-width .videos .operating-system{background-image:url(/cdn/shop/files/new-diy-hero-bg-6b98187493d9346cf623aa822776eec2.jpg?v=1642420997);background-size:cover;background-position:center center;background-repeat:no-repeat;align-content:center;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center;z-index:2;width:100%;position:absolute;content:"";top:0;right:0;left:0;bottom:0;border-radius:15px}.how-to-steps .container .step .page-width .videos .operating-system p{color:#fff;font-size:calc(7.15482px + 2.45685vw);font-size:calc(14px + 8*(100vw - 320px)/429);padding:0 3px;line-height:1.2;flex:100%}@media screen and (min-width: 750px){.how-to-steps .container .step .page-width .videos .operating-system p{font-size:calc(18.43243px + .47568vw)}}.how-to-steps .container .step .page-width .videos .operating-system button{background:#0000;outline:0;border-color:#0000;display:flex;flex-flow:column;align-items:center;flex:0 0 25%;margin-bottom:3%}@media screen and (min-width: 750px){.how-to-steps .container .step .page-width .videos .operating-system button{flex:0 0 16.5%}}.how-to-steps .container .step .page-width .videos .operating-system button:hover svg:not(.play-icon){background:rgb(var(--color-button))}.how-to-steps .container .step .page-width .videos .operating-system svg{width:100%;height:auto}.how-to-steps .container .step .page-width .videos .operating-system svg:not(.play-icon){color:#fff;background:#c6c6c6;border-radius:10%;margin-bottom:12%}.how-to-steps .container .step .page-width .videos .operating-system .play-icon{max-width:50%}.how-to-steps .container .step:nth-of-type(2n){background:#f5f5f5}.how-to-steps .container .step:nth-of-type(2n) .page-width{flex-direction:row-reverse}@media screen and (min-width: 750px){.how-to-steps .container .step:nth-of-type(2n) .page-width .content{padding-right:5%}}.how-to-steps .container .step:nth-of-type(2n) .page-width .step-header{justify-content:flex-end}@media screen and (min-width: 750px){.how-to-steps .container .step:nth-of-type(odd) .content{padding-left:5%}}.how-to-steps .change-device{position:sticky;top:30px;left:100%;text-align:center;display:flex;flex-direction:column;max-width:15vw;margin-right:3%;align-items:center;z-index:2;cursor:pointer;background-color:#fffc;padding:1rem;border-radius:16px}@media screen and (min-width: 750px){.how-to-steps .change-device{max-width:80px}}.how-to-steps .change-device:hover{filter:opacity(.8)}.how-to-steps .change-device p{margin-bottom:0;font-size:1.5rem;line-height:1.5}.how-to-steps .loading-overlay{position:absolute;z-index:1;width:1.8rem;left:50%;top:50%}.how-to-steps .loading-overlay .loading-overlay__spinner{width:1.8rem;display:inline-block}.how-to-steps .loading-overlay .loading-overlay__spinner .spinner{animation:rotator 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0)}to{transform:rotate(270deg)}}.how-to-steps .loading-overlay .loading-overlay__spinner .spinner .path{stroke-dasharray:280;stroke-dashoffset:0;transform-origin:center;stroke:rgb(var(--color-foreground));animation:dash 1.4s ease-in-out infinite}@media screen and (forced-colors: active){.how-to-steps .loading-overlay .loading-overlay__spinner .spinner .path{stroke:CanvasText}}@keyframes dash{0%{stroke-dashoffset:280}50%{stroke-dashoffset:75;transform:rotate(135deg)}to{stroke-dashoffset:280;transform:rotate(450deg)}}
/*# sourceMappingURL=/cdn/shop/t/133/assets/how-to-steps.css.map */