@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700;800&display=swap"); html { overflow-x: hidden; line-height: 1.5; font-family: "Montserrat", sans-serif  !important; } body { margin: 2rem auto  !important; } p { font-family: "Montserrat", sans-serif  !important; font-size: 14px; font-weight: 300; padding-top: 2%; } h1 { font-family: "Montserrat", sans-serif  !important; font-size: 32px; font-weight: bold; } h2 { font-family: "Montserrat", sans-serif  !important; color: white  !important; font-weight: bold  !important; } .story-link { color: white  !important; text-decoration: none; font-family: "Montserrat", sans-serif  !important; } .product-header { font-size: 24px; font-family: Montserrat; line-height: 1; margin: 0; padding-bottom: 6%  !important; } .moreStories { margin-bottom: 1%; margin-top: 6%; } .btn { display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; border-radius: 3px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .btn-primary { color: black; background-color: transparent; border: 1px solid black; } .video { border-radius: .4rem; } .play-button { display: inline-block; margin-right: 8px; } .button-back { position: absolute; background-color: transparent; border: 0; background: none; box-shadow: none; display: block; left: 20%; top: 10%; cursor: pointer; } .button-back:hover g { opacity: 1; } .button-video { display: flex; align-items: center; justify-content: center; outline: none; } .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, .7); transition: opacity 500ms; visibility: hidden; opacity: 0; z-index: 10; } .overlay:target { visibility: visible; opacity: 1; z-index: 10; } .videoframe { margin: auto; width: 1344px; max-width: 90%; height: 756px; max-height: calc(50vw); } .element_show { opacity: 1; filter: alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; transition: all .3s; -ms-transition: all .3s; transition-timing-function: cubic-bezier(0, .5, .5, 1); -ms-transform: scale(1, 1) translate(0%, 0%) rotate(0deg); -webkit-transform: scale(1, 1) translate(0%, 0%) rotate(0deg); transform: scale(1, 1) translate(0%, 0%) rotate(0deg); } .element_hide { opacity: 0; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; transition: all .3s; -ms-transition: all .3s; transition-timing-function: cubic-bezier(0.5, 0, .5, .5); -ms-transform: scale(0.92, .92) translate(0%, 0%) rotate(0.01deg); -webkit-transform: scale(0.92, .92) translate(0%, 0%) rotate(0.01deg); transform: scale(0.92, .92) translate(0%, 0%) rotate(0.01deg); } @media screen and (min-width: 1441px) { .hero-container { position: relative; display: block; margin: 0 auto; max-width: 1720px; } .hero-img-desktop { display: block; width: 85%; border-radius: .4rem; } .hero-img-mobile { display: none; } .fp-hero-text { position: absolute; top: 70%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white  !important; font-weight: bold; font-size: 3vw  !important; } .dw-hero-text { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; font-weight: bold; font-size: 3vw; } .wr-hero-text { position: absolute; top: 65%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; font-weight: bold; font-size: 3vw; } .container { color: #000  !important; background-color: #fff  !important; } .center { display: inline-block; width: auto; text-align: center; } .text-card { padding: .03em 16px; color: #000  !important; background-color: #fff  !important; text-align: left  !important; border-radius: .4rem; width: 100%; } .video-mobile-1, .video-mobile-2, .video-mobile-3, .video-mobile-4, .video-mobile-5, .video-mobile-6 { display: none; } .video-container-left { position: relative; display: inline-block; left: 26.6%; } .video-container-right { position: relative; display: inline-block; left: 38%; } .text-blob-hero { position: relative; padding: .03em 16px; color: #000  !important; text-align: left  !important; border-radius: .4rem; bottom: 3em; width: 48%; height: auto; left: 25%; } .text-blob-odd { position: relative; padding: .03em 16px  !important; color: #000  !important; text-align: left  !important; border-radius: .4rem; bottom: 3em; width: 30%; height: auto; left: 36.5%; } .text-blob-even { position: relative; padding: .03em 16px  !important; color: #000  !important; text-align: left  !important; border-radius: .4rem; bottom: 3em; width: 30%; height: auto; left: 25.3%; } .cta-mobile { display: none; } .card-content { width: 65%; margin-bottom: 2%; margin: 0 auto; display: flex; justify-content: space-evenly; flex-wrap: wrap; } .fp-card { margin-bottom: 1%; position: relative; display: inline-block; background-image: url("https://uploads-ssl.webflow.com/61d5ce768407e1ae0d839586/629107831d18aa4afa73fb17_Fresh-Paint-S%401x.jpg"); background-repeat: no-repeat; background-position: center center; border-radius: .4em; width: 400px; height: 600px; } .dw-card { margin-bottom: 1%; position: relative; display: inline-block; background-image: url("https://uploads-ssl.webflow.com/61d5ce768407e1ae0d839586/6291077f67415b2ae1da02f5_Dirty-Work-S%401x.jpg"); background-repeat: no-repeat; background-position: center center; border-radius: .4em; width: 400px; height: 600px; } .wr-card { margin-bottom: 1%; position: relative; display: inline-block; background-image: url("https://uploads-ssl.webflow.com/61d5ce768407e1ae0d839586/629107825adf9d22e3b4831f_Within-Reach-S%401x.jpg"); background-repeat: no-repeat; background-position: center center; border-radius: .4em; width: 400px; height: 600px; } .desc { position: absolute; top: 70%; left: 39%; transform: translate(-50%, -50%); text-align: left; color: white; font-weight: bold; } .cta { display: flex; position: absolute; top: 85%; left: 8%; width: 84%; margin-top: 6%; } .cta button { width: 100%; } .button-video { width: 40%; height: 40px; border: none; outline: none; color: #fff; background-image: linear-gradient( to bottom right, #64131e 0%, #4d144a 100% ); cursor: pointer; z-index: 0; border-radius: .3em; margin-right: 1%; } .button-read { width: 40%; height: 40px; border: 1px solid grey; outline: grey; color: white; background: transparent; cursor: pointer; z-index: 0; border-radius: .3em; margin-left: 1%; } .product-container { margin: 0 auto; display: flex; flex-wrap: wrap; margin-left: 12%; } .product-cta { width: 15%; margin: 0; margin-left: 2%; margin-top: 8%; top: 10%; } .product-img { margin: 0; } } @media screen and (max-width: 1440px) { .hero-container { position: relative; display: inline-block; margin-left: 4%; margin-right: 4%; } .hero-img-desktop { display: block; width: 85%; border-radius: .4rem; } .hero-img-mobile { display: none; } .fp-hero-text { position: absolute; top: 70%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; font-weight: bold; font-size: 3vw; } .dw-hero-text { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; font-weight: bold; font-size: 3vw; } .wr-hero-text { position: absolute; top: 65%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; font-weight: bold; font-size: 3vw; } .container { color: #000  !important; background-color: #fff  !important; } .center { display: inline-block; width: auto; text-align: center; } .text-card { padding: .03em 16px; color: #000  !important; background-color: #fff  !important; text-align: left  !important; border-radius: .4rem; width: 100%; } .video-mobile-1, .video-mobile-2, .video-mobile-3, .video-mobile-4, .video-mobile-5, .video-mobile-6 { display: none; } .video-container-left { position: relative; display: inline-block; left: 28%; } .video-container-right { position: relative; display: inline-block; left: 38%; } .text-blob-hero { position: relative; padding: .03em 16px; color: #000  !important; text-align: left  !important; border-radius: .4rem; bottom: 3em; width: 48%; height: auto; left: 25%; } .text-blob-odd { position: relative; padding: .03em 16px  !important; color: #000  !important; text-align: left  !important; border-radius: .4rem; bottom: 3em; width: 37%; height: auto; left: 35%; } .text-blob-even { position: relative; padding: .03em 16px  !important; color: #000  !important; text-align: left  !important; border-radius: .4rem; bottom: 3em; width: 40%; height: auto; left: 24.5%; } .cta-mobile { display: none; } .card-content { width: 100%; margin-bottom: 2%; margin: 0 auto; display: flex; justify-content: space-evenly; flex-wrap: wrap; } .fp-card { margin-bottom: 1%; position: relative; display: inline-block; background-image: url("https://uploads-ssl.webflow.com/61d5ce768407e1ae0d839586/629107831d18aa4afa73fb17_Fresh-Paint-S%401x.jpg"); background-repeat: no-repeat; background-position: center center; border-radius: .4em; width: 400px; height: 600px; } .dw-card { margin-bottom: 1%; position: relative; display: inline-block; background-image: url("https://uploads-ssl.webflow.com/61d5ce768407e1ae0d839586/6291077f67415b2ae1da02f5_Dirty-Work-S%401x.jpg"); background-repeat: no-repeat; background-position: center center; border-radius: .4em; width: 400px; height: 600px; } .wr-card { margin-bottom: 1%; position: relative; display: inline-block; background-image: url("https://uploads-ssl.webflow.com/61d5ce768407e1ae0d839586/629107825adf9d22e3b4831f_Within-Reach-S%401x.jpg"); background-repeat: no-repeat; background-position: center center; border-radius: .4em; width: 400px; height: 600px; } .desc { position: absolute; top: 70%; left: 39%; transform: translate(-50%, -50%); text-align: left; color: white; font-weight: bold; } .cta { display: flex; position: absolute; top: 85%; left: 8%; width: 84%; margin-top: 6%; } .cta button { width: 100%; } .button-video { width: 40%; height: 40px; border: none; outline: none; color: #fff; background-image: linear-gradient( to bottom right, #64131e 0%, #4d144a 100% ); cursor: pointer; z-index: 0; border-radius: .3em; margin-right: 1%; } .button-read { width: 40%; height: 40px; border: 1px solid grey; outline: grey; color: white; background: transparent; cursor: pointer; z-index: 0; border-radius: .3em; margin-left: 1%; } .product-container { margin: 0 auto; display: flex; flex-wrap: wrap; margin-left: 12%; width: auto; } .product-cta { width: 18%; margin: 0; margin-left: 5%; margin-top: 5%; } .product-img { margin: 0; width: 50%; object-fit: contain; } } @media screen and (max-width: 799px) { .hero-container { position: relative; display: inline-block; margin-left: 0%; margin-right: 0%; } .hero-img-desktop { display: none; } .hero-img-mobile { display: block; width: 100%; border-radius: .4rem; } .dw-hero-text { position: absolute; top: 75%; transform: translate(-50%, -50%); text-align: center; color: white; font-weight: bold; font-size: 7vw; width: 100%; } .fp-hero-text { position: absolute; top: 75%; transform: translate(-50%, -50%); text-align: center; color: white; font-weight: bold; font-size: 7vw; width: 100%; } .wr-hero-text { position: absolute; top: 75%; transform: translate(-50%, -50%); text-align: center; color: white; font-weight: bold; font-size: 7vw; width: 100%; } .text-blob-hero { position: relative; padding: 0px; color: #000  !important; text-align: left  !important; border-radius: .4rem; bottom: 3em; width: 88%; height: auto; left: 2.5%; } .container { color: #000  !important; background-color: #fff  !important; } .center { display: inline-block; width: auto; text-align: center; } .text-card { padding: .03em 16px; color: #000  !important; background-color: #fff  !important; text-align: left  !important; border-radius: .4rem; width: 100%; } .video-desktop-1, .video-desktop-2, .video-desktop-3, .video-desktop-4, .video-desktop-5, .video-desktop-6 { display: none; } .video-mobile-1, .video-mobile-2, .video-mobile-3, .video-mobile-4, .video-mobile-5, .video-mobile-6 { display: inline-block; margin: 0px; padding: 0px; } .video-container-left { position: relative; display: inline-block; width: fit-content; left: 0; } .video-container-right { position: relative; display: inline-block; width: fit-content; left: 0; width: 100%; } .text-blob-odd { position: relative; padding: .03em 16px  !important; color: #000  !important; text-align: left  !important; border-radius: .4rem; bottom: 3em; width: 88%; height: auto; left: 2.5%; } .text-blob-even { position: relative; padding: .03em 16px  !important; color: #000  !important; text-align: left  !important; border-radius: .4rem; bottom: 3em; width: 88%; height: auto; left: 2.5%; } .cta-desktop { display: none; } .cta-mobile { display: inline-block; } .card-content { width: 100%; } .card { margin: 0 auto; width: 100%; height: auto; overflow: hidden; border-radius: .4em; background: transparent; margin-top: 2%; transition: all .2s; box-shadow: 5px 5px 15px rgba(0, 0, 0, .3); position: relative; display: inline-block; } .desc { position: absolute; top: 70%; left: 39%; transform: translate(-50%, -50%); text-align: left; color: white; font-weight: bold; } .cta { position: absolute; top: 85%; left: 8%; width: 84%; margin-top: 6%; } .cta button { width: 100%; } .button-video { width: 40%; height: 40px; border: none; outline: none; color: #fff; background-image: linear-gradient( to bottom right, #64131e 0%, #4d144a 100% ); cursor: pointer; z-index: 0; border-radius: .3em; margin-right: 1%; } .button-read { width: 40%; height: 40px; border: 1px solid grey; outline: grey; color: white; background: transparent; cursor: pointer; z-index: 0; border-radius: .3em; margin-left: 1%; } .product-container { margin: 0 auto; display: inline-block; width: 100%; } .product-cta { width: 90%; margin: 0; margin-left: 5%; margin-bottom: 10%; } .product-img { margin: 0; width: 100%; } .fp-card { margin-bottom: 1%; position: relative; display: inline-block; background-image: url("https://uploads-ssl.webflow.com/61d5ce768407e1ae0d839586/629107831d18aa4afa73fb17_Fresh-Paint-S%401x.jpg"); background-repeat: no-repeat; background-position: center center; border-radius: .4em; width: 60vw; height: 600px; } .dw-card { margin-bottom: 1%; position: relative; display: inline-block; background-image: url("https://uploads-ssl.webflow.com/61d5ce768407e1ae0d839586/6291077f67415b2ae1da02f5_Dirty-Work-S%401x.jpg"); background-repeat: no-repeat; background-position: center center; border-radius: .4em; width: 60vw; height: 600px; } .wr-card { margin-bottom: 1%; position: relative; display: inline-block; background-image: url("https://uploads-ssl.webflow.com/61d5ce768407e1ae0d839586/629107825adf9d22e3b4831f_Within-Reach-S%401x.jpg"); background-repeat: no-repeat; background-position: center center; border-radius: .4em; width: 60vw; height: 600px; } } @media screen and (max-width: 600px) { .hero-container { position: relative; display: inline-block; margin-left: 0%; margin-right: 0%; } .hero-img-desktop { display: none; } .hero-img-mobile { display: block; width: 100%; border-radius: .4rem; } .dw-hero-text { position: absolute; top: 75%; transform: translate(-50%, -50%); text-align: center; color: white; font-weight: bold; font-size: 7vw; width: 100%; } .fp-hero-text { position: absolute; top: 75%; transform: translate(-50%, -50%); text-align: center; color: white; font-weight: bold; font-size: 7vw; width: 100%; } .wr-hero-text { position: absolute; top: 75%; transform: translate(-50%, -50%); text-align: center; color: white; font-weight: bold; font-size: 7vw; width: 100%; } .text-blob-hero { position: relative; padding: 0px; color: #000  !important; text-align: left  !important; border-radius: .4rem; bottom: 3em; width: 88%; height: auto; left: 2.5%; } .container { color: #000  !important; background-color: #fff  !important; } .center { display: inline-block; width: auto; text-align: center; } .text-card { padding: .03em 16px; color: #000  !important; background-color: #fff  !important; text-align: left  !important; border-radius: .4rem; width: 100%; } .video-desktop-1, .video-desktop-2, .video-desktop-3, .video-desktop-4, .video-desktop-5, .video-desktop-6 { display: none; } .video-mobile-1, .video-mobile-2, .video-mobile-3, .video-mobile-4, .video-mobile-5, .video-mobile-6 { display: inline-block; margin: 0px; padding: 0px; } .video-container-left { position: relative; display: inline-block; width: fit-content; left: 0; } .video-container-right { position: relative; display: inline-block; width: fit-content; left: 0; width: 100%; } .text-blob-odd { position: relative; padding: .03em 16px  !important; color: #000  !important; text-align: left  !important; border-radius: .4rem; bottom: 3em; width: 88%; height: auto; left: 2.5%; } .text-blob-even { position: relative; padding: .03em 16px  !important; color: #000  !important; text-align: left  !important; border-radius: .4rem; bottom: 3em; width: 88%; height: auto; left: 2.5%; } .cta-desktop { display: none; } .cta-mobile { display: inline-block; } .card-content { width: 100%; } .more-stories-container { margin-bottom: 2%; } .card { margin: 0 auto; width: 100%; height: auto; overflow: hidden; border-radius: .4em; background: transparent; margin-top: 2%; transition: all .2s; box-shadow: 5px 5px 15px rgba(0, 0, 0, .3); position: relative; display: inline-block; } .desc { position: absolute; top: 60%; left: 39%; transform: translate(-50%, -50%); text-align: left; color: white; font-weight: bold; } .cta { position: absolute; display: block; top: 78%; left: 8%; width: 84%; margin-top: 5%; } .cta button { width: 100%; } .button-video { width: 40%; height: 40px; border: none; outline: none; color: #fff; background-image: linear-gradient( to bottom right, #64131e 0%, #4d144a 100% ); cursor: pointer; z-index: 0; border-radius: .3em; margin-right: 1%; } .button-read { width: 40%; height: 40px; border: 1px solid grey; outline: grey; color: white; background: transparent; cursor: pointer; z-index: 0; border-radius: .3em; margin-top: .5rem; margin-left: 0; } .product-container { margin: 0 auto; display: inline-block; width: 100%; } .product-cta { width: 90%; margin: 0; margin-left: 5%; margin-bottom: 10%; } .product-img { margin: 0; width: 100%; } .fp-card { margin-bottom: 2%; position: relative; display: inline-block; background-image: url("https://uploads-ssl.webflow.com/61d5ce768407e1ae0d839586/629107831d18aa4afa73fb17_Fresh-Paint-S%401x.jpg"); background-repeat: no-repeat; background-position: center center; border-radius: .4em; width: 100vw; height: 600px; } .dw-card { margin-bottom: 1%; position: relative; display: inline-block; background-image: url("https://uploads-ssl.webflow.com/61d5ce768407e1ae0d839586/6291077f67415b2ae1da02f5_Dirty-Work-S%401x.jpg"); background-repeat: no-repeat; background-position: center center; border-radius: .4em; width: 100vw; height: 600px; } .wr-card { margin-bottom: 1%; position: relative; display: inline-block; background-image: url("https://uploads-ssl.webflow.com/61d5ce768407e1ae0d839586/629107825adf9d22e3b4831f_Within-Reach-S%401x.jpg"); background-repeat: no-repeat; background-position: center center; border-radius: .4em; width: 100vw; height: 600px; } } .modal { padding-top: 5%; position: fixed; top: 50%; left: 53%; transform: translate(-50%, -50%) scale(0); transition: 200ms ease-in-out; border-radius: .04em; z-index: 99; } .modal.active { transform: translate(-50%, -50%) scale(1); max-width: 100vw; } .modal-header { cursor: pointer; border: none; outline: none; background: none; font-size: 3.25rem; font-weight: bold; z-index: 99; position: fixed; bottom: 65%; border-radius: 5px; color: #fff; display: inline-block; right: 6%; cursor: pointer; } @media screen and (min-width: 800px) { .modal-header { border: none; outline: none; background: none; font-size: 3.25rem; font-weight: bold; z-index: 99; position: fixed; bottom: 83%; border-radius: 19rem; color: #fff; display: inline-block; right: 10%; cursor: pointer; } .close-button { border-radius: 5px; color: #fff; display: inline-block; position: absolute; cursor: pointer; border: 0; outline: 0; background: 0; font-size: 3.25rem; font-weight: bold; right: 6%; } } @media screen and (max-width: 799px) { .modal { padding-top: 5%; position: fixed; top: 45%; left: 53%; transform: translate(-50%, -50%) scale(0); transition: 200ms ease-in-out; border-radius: .04em; z-index: 99; } .modal-header { border-radius: 5px; color: #fff; display: inline-block; position: absolute; cursor: pointer; border: none; outline: none; background: none; font-size: 2.25rem; font-weight: bold; bottom: 71%; right: 9%; } .close-button { border-radius: 4rem; color: #fff; display: inline-block; position: absolute; cursor: pointer; border: 0; outline: 0; background: 0; font-size: 3.25rem; font-weight: bold; right: 4%; } } .modal-body { padding: 10px 15px; } #overlay { position: fixed; opacity: 0; transition: 200ms ease-in-out; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, .9); pointer-events: none; } #overlay.active { opacity: 1; pointer-events: all; }