#uhf-footer { margin-top: 0; } .x-story { font-size: 20px; color: #1d1d1d; } .x-story ::selection { background-color: #dc143c; color: #ffffff; } .x-story .x-breakout { margin-top: 48px; padding: 48px 0; border-top: 2px solid #dc143c; border-bottom: 2px solid #dc143c; background: linear-gradient(to bottom, hsl(0, 0%, 28%) 0%, hsl(0, 0%, 27.86%) 8.1%, hsl(0, 0%, 27.46%) 15.5%, hsl(0, 0%, 26.83%) 22.5%, hsl(0, 0%, 26%) 29%, hsl(0, 0%, 24.99%) 35.3%, hsl(0, 0%, 23.82%) 41.2%, hsl(0, 0%, 22.52%) 47.1%, hsl(0, 0%, 21.11%) 52.9%, hsl(0, 0%, 19.63%) 58.8%, hsl(0, 0%, 18.12%) 64.7%, hsl(0, 0%, 16.64%) 71%, hsl(0, 0%, 15.26%) 77.5%, hsl(0, 0%, 14.1%) 84.5%, hsl(0, 0%, 13.3%) 91.9%, hsl(0, 0%, 13%) 100%); position: relative; overflow: hidden; } .x-story .x-breakout .x-copy { color: #ffffff; position: relative; } .x-story .x-breakout a { color: #dc143c; } .x-story .x-breakout blockquote { margin-bottom: 24px; } .x-story .x-breakout.x-dynamics:before { background-image: url("/en-gb/about/ventilator-challengehttps://www.microsoft.com/images/pattern-dynamics-144x144.png"); } .x-story .x-breakout.x-hololens:before { background-image: url("/en-gb/about/ventilator-challengehttps://www.microsoft.com/images/pattern-hololens-144x144.png"); } .x-story .x-breakout.x-teams:before { background-image: url("/en-gb/about/ventilator-challengehttps://www.microsoft.com/images/pattern-teams-144x144.png"); } .x-story .x-breakout:before { content: ""; width: calc(100% + 24px); height: calc(100% + 24px); left: -24px; top: -24px; position: absolute; } .x-story .x-columns { width: calc(100% + 48px); margin: 0 -24px; display: flex; flex-wrap: wrap; } .x-story .x-columns div { min-width: 200px; padding: 24px 24px 0 24px; flex-grow: 1; } .x-story .x-columns.x-2 div { width: 50%; } .x-story .x-columns.x-3 div { width: 33%; } .x-story .x-columns.x-flow div { padding-top: 0; } .x-story .x-copy { max-width: 1200px; margin: auto; padding: 0 24px; } .x-story .x-grid { width: calc(100% + 24px); margin: 12px -12px 0 -12px; display: flex; flex-wrap: wrap; } .x-story .x-grid > div { min-width: 200px; padding: 12px; flex-grow: 1; } .x-story .x-grid > div > div { position: relative; } .x-story .x-grid img { border: 2px solid #dc143c; } .x-story .x-grid.x-2 > div { width: 50%; } .x-story .x-grid.x-3 > div { width: 33%; } .x-story .x-hero { position: relative; } .x-story .x-hero h1 { top: 50%; transform: translateY(-50%); color: #ffffff; text-shadow: 0 0 10px #000000, 0 0 20px #000000, 0 0 30px #000000; position: absolute; z-index: 1; } .x-story .x-hero video { width: 100%; height: auto; } .x-story .x-hero:before { content: ""; width: 100%; height: 33%; bottom: -1px; position: absolute; background: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0.013) 8.1%, hsla(0, 0%, 100%, 0.049) 15.5%, hsla(0, 0%, 100%, 0.104) 22.5%, hsla(0, 0%, 100%, 0.175) 29%, hsla(0, 0%, 100%, 0.259) 35.3%, hsla(0, 0%, 100%, 0.352) 41.2%, hsla(0, 0%, 100%, 0.45) 47.1%, hsla(0, 0%, 100%, 0.55) 52.9%, hsla(0, 0%, 100%, 0.648) 58.8%, hsla(0, 0%, 100%, 0.741) 64.7%, hsla(0, 0%, 100%, 0.825) 71%, hsla(0, 0%, 100%, 0.896) 77.5%, hsla(0, 0%, 100%, 0.951) 84.5%, hsla(0, 0%, 100%, 0.987) 91.9%, hsl(0, 0%, 100%) 100%); } .x-story .x-initial { margin-right: 12px; padding: 18px; font-size: 2.8em; background-color: #dc143c; color: #ffffff; float: left; } .x-story .x-label { right: 0; top: 0; padding: 6px 12px; font-size: 0.8em; background-color: #1d1d1d; color: #ffffff; position: absolute; } .x-story .x-label.x-l { left: 0; right: unset; } .x-story .x-max { width: 100%; height: auto; } .x-story .x-members { margin-top: 48px; border-top: 1px solid #e6e6e6; position: relative; background: linear-gradient(to bottom, hsla(210, 12.5%, 95%, 0) 0%, hsla(210, 12.5%, 95%, 0.013) 8.1%, hsla(210, 12.5%, 95%, 0.049) 15.5%, hsla(210, 12.5%, 95%, 0.104) 22.5%, hsla(210, 12.5%, 95%, 0.175) 29%, hsla(210, 12.5%, 95%, 0.259) 35.3%, hsla(210, 12.5%, 95%, 0.352) 41.2%, hsla(210, 12.5%, 95%, 0.45) 47.1%, hsla(210, 12.5%, 95%, 0.55) 52.9%, hsla(210, 12.5%, 95%, 0.648) 58.8%, hsla(210, 12.5%, 95%, 0.741) 64.7%, hsla(210, 12.5%, 95%, 0.825) 71%, hsla(210, 12.5%, 95%, 0.896) 77.5%, hsla(210, 12.5%, 95%, 0.951) 84.5%, hsla(210, 12.5%, 95%, 0.987) 91.9%, hsl(210, 12.5%, 95%) 100%); } .x-story .x-members .x-copy { padding: 24px; text-align: center; } .x-story .x-members .x-copy h3 { left: 50%; top: -24px; transform: translateX(-50%); padding: 0 24px; background-color: #ffffff; position: absolute; white-space: nowrap; } .x-story .x-members:before { content: ""; width: 100%; left: 0; top: 4px; border-top: 1px solid #e6e6e6; position: absolute; } .x-story .x-members-list { padding: 0 12px; font-size: 0.8em; display: flex; flex-wrap: wrap; align-items: flex-start; } .x-story .x-members-list > div { width: 240px; margin: 12px; padding: 24px; border-radius: 0.5em; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease-out, transform 0.3s ease-out; background-color: #ffffff; cursor: pointer; outline-color: #dc143c; } .x-story .x-members-list > div > div { display: none; } .x-story .x-members-list > div > div ul { margin-top: 12px; } .x-story .x-members-list > div > div ul li { padding-left: 18px; } .x-story .x-members-list > div > div ul li:before { width: 8px; height: 8px; } .x-story .x-members-list > div > div ul li:not(:first-of-type) { margin-top: 6px; } .x-story .x-members-list > div img { max-width: 192px; height: auto; } .x-story .x-members-list > div:hover { transform: scale(0.97); box-shadow: none; } .x-story .x-snap { margin-top: 24px; border: 2px solid #dc143c; background-color: #dc143c; position: relative; clear: both; } .x-story .x-snap:before { content: ""; width: 24px; height: 2px; left: -24px; top: calc(50% - 1px); background-color: #dc143c; position: absolute; } .x-story .x-social { margin-top: 24px; justify-content: flex-end; display: flex; } .x-story .x-social a { margin-left: 6px; } .x-story .x-social a:hover svg { fill: #dc143c; } .x-story .x-social a:last-of-type { margin-left: 9px; } .x-story .x-social svg { width: 24px; height: 24px; fill: #767676; transition: fill 0.3s ease-out; } .x-story .x-timeline { margin-top: 48px; padding: 0 0 48px 24px; position: relative; } .x-story .x-timeline:after { content: ""; width: 24px; height: 2px; left: -11px; bottom: 0; background-color: #dc143c; position: absolute; } .x-story .x-timeline:before { content: ""; width: 2px; height: 100%; left: 0; top: 0; background-color: #dc143c; position: absolute; } .x-story .x-timeline > *:last-child { margin-bottom: 0; } .x-story .x-timeline h3 { margin-left: -24px; padding: 12px 24px; background-color: #dc143c; color: #ffffff; display: inline-flex; } .x-story .x-timeline h4 { margin-left: -24px; padding: 12px 24px; background-color: #dc143c; color: #ffffff; display: inline-flex; } .x-story a { color: #dc143c; } .x-story a:hover { text-decoration: underline; } .x-story aside { max-width: 300px; margin: 0 0 24px 24px; float: right; } .x-story aside p { font-size: 1.4em; font-style: italic; line-height: 1.4em; color: #dc143c; } .x-story blockquote { margin: 48px 0; padding: 0 48px; position: relative; text-align: center; } .x-story blockquote > p { margin-top: 0; padding: 0 24px; font-size: 1.4em; line-height: 1.4em; color: #dc143c; position: relative; } .x-story blockquote > p:before { content: open-quote; left: -48px; top: 36px; font-family: arial; font-size: 5em; color: #ff7a7a; position: absolute; } .x-story blockquote > p:after { content: close-quote; right: -48px; bottom: -36px; font-family: arial; font-size: 5em; color: #ff7a7a; position: absolute; } .x-story blockquote footer { margin-top: 48px; font-size: 0.8em; } .x-story em { font-size: 0.8em; color: #767676; } .x-story h1 { font-size: 4em; font-weight: 300; } .x-story h2 { font-size: 2.8em; font-weight: 300; color: #dc143c; } .x-story h3 { font-size: 1.8em; font-weight: 300; color: #dc143c; } .x-story h4 { margin-top: 24px; font-size: 1.4em; font-weight: 300; color: #dc143c; } .x-story h5 { margin-top: 24px; font-size: 1.2em; font-weight: 300; color: #dc143c; } .x-story p { margin-top: 24px; font-family: ff-meta-serif-web-pro, serif; font-weight: 300; line-height: 1.8em; } .x-story p.y-2 { margin-top: 48px; } .x-story strong { font-weight: 600; } .x-story ul { margin-top: 24px; font-family: ff-meta-serif-web-pro, serif; font-weight: 300; } .x-story ul li { padding-left: 24px; position: relative; } .x-story ul li:before { content: ""; width: 11px; height: 11px; left: 0; top: 7px; background-color: #dc143c; position: absolute; } .x-story ul li:not(:first-of-type) { margin-top: 12px; } .x-story .x-breakout.x-teams { background: linear-gradient(to bottom, hsl(0, 0%, 20%) 0%, hsl(0, 0%, 20%) 100%); } .brightRedHeading { color: #ff7a7a !important; } @media screen and (-ms-high-contrast: white-on-black) { .x-members-list img { filter: invert(); } } @media screen and (max-width: 1083px) { .x-story { font-size: 18px; } } @media screen and (max-width: 767px) { .x-story { font-size: 16px; } } @media screen and (max-width: 539px) { .x-story { font-size: 14px; } .x-story .x-label { position: relative; } .x-story .x-members-list { justify-content: center; } .x-story blockquote > p { padding: 0; } } /*old red color: #ff5050*/