html { line-height: 1.15; -webkit-text-size-adjust: 100% } body { margin: 0 } main { display: block } h2 { font-size: 2em; margin: .67em 0 } hr { box-sizing: content-box; height: 0; overflow: visible } pre { font-family: monospace, monospace; font-size: 1em } a { background-color: transparent } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted } b, strong { font-weight: bolder } code, kbd, samp { font-family: monospace, monospace; font-size: 1em } small { font-size: 80% } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sub { bottom: -.25em } sup { top: -.5em } img { border-style: none; max-width: unset  !important; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0 } button, input { overflow: visible } button, select { text-transform: none } [type=button], [type=reset], [type=submit], button { -webkit-appearance: button } [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0 } [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring { outline: 1px dotted ButtonText } fieldset { padding: .35em .75em .625em } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal } progress { vertical-align: baseline } textarea { overflow: auto } [type=checkbox], [type=radio] { box-sizing: border-box; padding: 0 } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto } [type=search] { -webkit-appearance: textfield; outline-offset: -2px } [type=search]::-webkit-search-decoration { -webkit-appearance: none } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit } details { display: block } summary { display: list-item } [hidden], template { display: none } nav ul { height: 50px; width: 100%; background-color: rgba(255, 255, 255, 1); list-style: none; display: inline-block; display: flex; align-items: center; overflow: hidden; position: fixed; top: 0; z-index: 200; box-shadow: 0 5px 20px rgba(0, 0, 0, .1); } #navigation .logo-container { margin-right: auto; height: 100%; } #navigation .logo { height: 100%; width: auto; max-height: 80px; } #navigation .consult-us { color: #294e95; border: 3px solid #294e95; border-radius: 3px; font-weight: 700; font-size: 16px; padding: 15px 20px 16px 20px; text-decoration: none; margin-right: 22px; transition: .3s; line-height: 0; box-sizing: border-box; display: block; cursor: pointer; } #navigation .consult-us:hover { color: #fff; background-color: #294e95; } @media only screen and (max-width: 800px) { #navigation .logo-container { max-height: 60px; } } @media only screen and (max-width: 500px) { #navigation .logo-container { max-height: 42px; } #navigation .consult-us { font-size: 12px; margin-right: 15px; padding: 14px 15px; } } /*!
 * fullPage 3.1.2
 * https://github.com/alvarotrigo/fullPage.js
 *
 * @license GPLv3 for open source use only
 * or Fullpage Commercial License for commercial use
 * http://alvarotrigo.com/fullPage/pricing/
 *
 * Copyright (C) 2018 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo
 */.fp-enabled body, html.fp-enabled { margin: 0; padding: 0; overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) } .fp-section { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .fp-slide { float: left } .fp-slide, .fp-slidesContainer { height: 100%; display: block } .fp-slides { z-index: 1; height: 100%; overflow: hidden; position: relative; -webkit-transition: all .3s ease-out; transition: all .3s ease-out } .fp-section.fp-table, .fp-slide.fp-table { display: table; table-layout: fixed; width: 100% } .fp-tableCell { display: table-cell; vertical-align: middle; width: 100%; height: 100% } .fp-slidesContainer { float: left; position: relative } .fp-controlArrow { -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select: none; position: absolute; z-index: 4; top: 50%; cursor: pointer; width: 0; height: 0; border-style: solid; margin-top: -38px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0) } .fp-controlArrow.fp-prev { left: 15px; width: 0; border-width: 38.5px 34px 38.5px 0; border-color: transparent #fff transparent transparent } .fp-controlArrow.fp-next { right: 15px; border-width: 38.5px 0 38.5px 34px; border-color: transparent transparent transparent #fff } .fp-scrollable { position: relative } .fp-scrollable, .fp-scroller { overflow: hidden } .iScrollIndicator { border: 0  !important } .fp-notransition { -webkit-transition: none  !important; transition: none  !important } #fp-nav { position: fixed; z-index: 100; top: 50%; opacity: 1; transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translate3d(0, -50%, 0) } #fp-nav.fp-right { right: 55px } #fp-nav.fp-left { left: 17px } .fp-slidesNav { position: absolute; z-index: 4; opacity: 1; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); left: 0  !important; right: 0; margin: 0 auto  !important } .fp-slidesNav.fp-bottom { bottom: 17px } .fp-slidesNav.fp-top { top: 17px } #fp-nav ul, .fp-slidesNav ul { margin: 0; padding: 0 } #fp-nav ul li, .fp-slidesNav ul li { display: block; width: 14px; height: 13px; margin: 28px 7px; position: relative } .fp-slidesNav ul li { display: inline-block } #fp-nav ul li a, .fp-slidesNav ul li a { display: block; position: relative; z-index: 1; width: 100%; height: 100%; cursor: pointer; text-decoration: none } #fp-nav ul li a span, .fp-slidesNav ul li a span { border-radius: 50%; position: absolute; z-index: 1; height: 26px; width: 26px; border: 6px solid #fff; background: transparent; opacity: .4; left: 50%; top: 50%; margin: -2px 0 0 -2px; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out } #fp-nav ul li a span.grey-circle, .fp-slidesNav ul li a span.grey-circle { border-color: #707070 } #fp-nav ul li:hover a.active span, #fp-nav ul li:hover a span, #fp-nav ul li a.active span, .fp-slidesNav ul li:hover a.active span, .fp-slidesNav ul li:hover a span, .fp-slidesNav ul li a.active span { border-color: #46c8e1 } #fp-nav ul li .fp-tooltip { line-height: 14px; width: 0 } #fp-nav ul li .fp-tooltip.fp-right { right: 20px; text-align: right } #fp-nav ul li .fp-tooltip.fp-left { left: 20px } .fp-auto-height.fp-section, .fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell, .fp-responsive .fp-auto-height-responsive.fp-section, .fp-responsive .fp-auto-height-responsive .fp-slide, .fp-responsive .fp-auto-height-responsive .fp-tableCell { height: auto  !important } .fp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 } .browserupgrade { margin: .2em 0; background: #ccc; color: #000; padding: .2em 0 } body { background: #fafafa; background: #000; font-family: Lato, sans-serif; color: #707070 } h2 { font-size: 60px; font-weight: 700; margin-top: 0; margin-bottom: 40px; line-height: 65px } @media only screen and (max-width:1400px) { h2 { font-size: 60px; line-height: 60px } } @media only screen and (max-width:1024px) { h2 { font-size: 45px; line-height: 45px; margin-bottom: 15px } } @media only screen and (max-width:480px) { h2 { font-size: 35px; line-height: 38px } } h2 { font-size: 44px; line-height: 55px } h2, h3 { font-weight: 800; margin-top: 0; margin-bottom: 1em; } h3 { font-size: 30px; line-height: 36px } li, p { font-size: 19px; line-height: 30px; font-weight: 400; margin: 1em 0; } @media only screen and (max-width:1920px) { li, p { line-height: 27px; font-size: 17px } } @media only screen and (max-width:1024px) { li, p { line-height: 25px; font-size: 16px } } @media only screen and (max-width:480px) { li, p { line-height: 25px; font-size: 16px } } .section { -webkit-transition: opacity .5s ease; transition: opacity .5s ease } @media only screen and (max-width:1024px) { #fp-nav { display: none } } .purple { color: #7a126b } .ultra-bold { font-weight: 800 } .underline { text-decoration: underline } .card { max-width: 1600px; width: 90%; margin: 0 auto; padding: 5vw 0 } @media only screen and (max-width:1024px) { .card { padding: 12vw 0; width: 80% } } @media only screen and (max-width:480px) { .card { padding: 15vw 0; width: 80% } } .card .text-container { -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 625px; } .card .image-container { position: relative } #fullpage img { max-height: unset; } #fullpage a { text-decoration: underline; } #fullpage ul, ol { list-style: unset; padding-left: 40px; } .compareDockContainer { display: none  !important; } @media only screen and (max-width:768px) { #fullpage { overflow-x: hidden } #fullpage .fp-scroller, #fullpage .section { overflow: hidden } } #fullpage.delay { -webkit-transition-delay: 2s  !important; transition-delay: 2s  !important } .legal-container { position: absolute } .legal-image-text { font-size: 14px } #dl-container { position: fixed; top: 0; right: 45px } @media only screen and (max-width:1024px) { #dl-container { display: none } } @media only screen and (max-height:600px) { #dl-container { display: none } } #fullpage .btn { background: #294e95; color: #fff; font-size: 21px; font-weight: 700; text-decoration: none; padding: 12px 32px; border-radius: 4px; display: inline-block; margin-top: 20px; -webkit-transition: all .5s ease; transition: all .5s ease; text-align: center; cursor: pointer; } @media only screen and (max-width:480px) { #fullpage .btn { font-size: 16px } } #fullpage .btn:hover { background: #eaeef5; color: #294e95; } .mute-btn { position: absolute; bottom: 20px; left: 30px; z-index: 10; background-image: url(https://p3-ofp.static.pub/ShareResource/servers-storage/solutions/customer-stories/dreamworks/images/lenovo-data-center-customer-story-dreamworks-sound-mute.png); background-color: transparent; border: none; height: 35px; width: 41px; background-size: cover; background-repeat: no-repeat; cursor: pointer; pointer-events: all } @media only screen and (max-width:480px) { .mute-btn { height: 25px; width: 30px; bottom: 15px; left: 20px } } .mute-btn.unmute { background-image: url(https://p4-ofp.static.pub/ShareResource/servers-storage/solutions/customer-stories/dreamworks/images/lenovo-data-center-customer-story-dreamworks-sound-icon.png) } .restart-btn { position: absolute; bottom: 20px; left: 90px; z-index: 10; background-image: url(https://p2-ofp.static.pub/ShareResource/servers-storage/solutions/customer-stories/dreamworks/images/lenovo-data-center-customer-story-dreamworks-restart.png); background-color: transparent; border: none; height: 35px; width: 35px; background-size: contain; background-repeat: no-repeat; cursor: pointer; pointer-events: all } @media only screen and (max-width:480px) { .restart-btn { height: 25px; width: 25px; bottom: 15px; left: 60px } } .restart-btn.hide { display: none } .download-btn { width: 26px; height: 26px; margin-left: 12px; margin-top: 6px; opacity: .4; fill: #fff; -webkit-transition: all .3s ease; transition: all .3s ease } .download-btn.grey { fill: #707070 } .download-link { position: relative } .download-btn:hover { fill: #46c8e1 } .download-text { position: absolute; top: -18px; right: 36px; color: #fff; font-size: 14px; line-height: 15px; font-family: Lato, sans-serif; font-weight: 700; white-space: nowrap; max-width: 500px; display: block; opacity: 0; text-shadow: 0 2px 6px #1c1c1c; text-transform: uppercase; cursor: pointer; pointer-events: none } .download-text.dark-text { color: #707070; text-shadow: 0 1px 1px #dfdfdf } .download-link:hover .download-text { opacity: 1 } .download-mobile { fill: #fff; opacity: .7; width: 35px; height: 35px; display: inline-block } .fullscreen-btn { position: absolute; bottom: 20px; right: 30px; z-index: 10; background-image: url(https://p4-ofp.static.pub/ShareResource/servers-storage/solutions/customer-stories/dreamworks/images/lenovo-data-center-customer-story-dreamworks-fullscreen-icon.png); background-color: transparent; border: none; height: 35px; width: 35px; background-size: cover; display: none; background-repeat: no-repeat; cursor: pointer; pointer-events: all } @media only screen and (max-width:480px) { .fullscreen-btn { height: 25px; width: 25px; bottom: 15px; left: 60px } } @media only screen and (min-width:1024px) { .fullscreen-btn { display: none } } .fullscreen-btn.hide { display: none } .hamburger { position: fixed; top: 80px; right: 30px; cursor: pointer; fill: #fff; width: 23px; height: 19px; -webkit-transition: opacity 1s ease; transition: opacity 1s ease } @media only screen and (min-width:1024px) { .hamburger { display: none } } .hamburger-purple, .hamburger-white { opacity: 0 } .hamburger-purple.active, .hamburger-white.active { opacity: 1 } #fp-nav li:nth-child(5), #fp-nav li:nth-child(7), #fp-nav li:nth-child(8) { display: none } #fp-nav ul li .fp-tooltip { position: absolute; top: 10px; color: #fff; font-size: 14px; line-height: 15px; font-family: Lato, sans-serif; font-weight: 700; white-space: nowrap; max-width: 500px; display: block; opacity: 0; cursor: pointer; text-shadow: 0 2px 6px #1c1c1c } #fp-nav ul li .fp-tooltip.dark-text { color: #707070; text-shadow: 0 1px 1px #dfdfdf } #fp-nav.fp-show-active a.active+.fp-tooltip, #fp-nav ul li:hover .fp-tooltip { -webkit-transition: opacity .2s ease-in; transition: opacity .2s ease-in; opacity: 1; width: 500px } #fp-nav ul li:nth-child(3) .fp-tooltip, #fp-nav ul li:nth-child(6) .fp-tooltip, #fp-nav ul li:nth-child(7) .fp-tooltip { top: 1px } .force-active { border-color: #46c8e1  !important } .mobile-nav { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; min-height: 100vh; -webkit-box-sizing: border-box; box-sizing: border-box; background: url(https://p1-ofp.static.pub/ShareResource/servers-storage/solutions/customer-stories/dreamworks/images/lenovo-data-center-customer-story-dreamworks-modal-bg-a-new.jpg); background-repeat: no-repeat; background-size: cover; padding: 0 10vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; pointer-events: none; -webkit-transition: opacity .3s ease; transition: opacity .3s ease; opacity: 0 } .mobile-nav.active { opacity: .98; pointer-events: all } @media only screen and (min-width:1024px) { .mobile-nav { display: none } } .mobile-nav ul { list-style-type: none; padding: 0 } .mobile-nav li { color: #fff; text-transform: uppercase; font-weight: 700; font-size: 20px; line-height: 26px; text-decoration: none; margin-top: 0; margin-bottom: 20px; opacity: .7; cursor: pointer; padding-left: 12px } .mobile-nav li:hover { opacity: 1 } .mobile-nav li.active { opacity: 1; border-left: 3px solid #e1251b; padding-left: 9px } .mobile-nav #close-menu-x { position: fixed; top: 80px; right: 30px; cursor: pointer; width: 20px; height: 20px } .mobile-nav .download-mobile-row { position: relative } .mobile-nav .mobile-download-text { position: absolute; font-size: 20px; top: -15px; left: 61px } .shape-wrap { margin: -5px 0 0; position: fixed; top: -100vh; width: 100%; z-index: 10; -webkit-transition: opacity 2s ease; transition: opacity 2s ease } .shape-wrap.hide { display: none } .shape { display: block; height: 100vh; width: 100% } .section-high-performance { background: #fff; background-repeat: no-repeat; background-size: cover; position: relative; overflow: hidden } .section-high-performance .video-overlay-container { position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; height: 100%; z-index: 1; opacity: .95; background: url(https://p1-ofp.static.pub/ShareResource/servers-storage/solutions/customer-stories/dreamworks/images/lenovo-data-center-customer-story-dreamworks-hero-overlay-new.png); background-repeat: no-repeat; background-size: cover } @media only screen and (max-width:1024px) { .section-high-performance .video-overlay-container { background: url(https://p1-ofp.static.pub/ShareResource/servers-storage/solutions/customer-stories/dreamworks/images/lenovo-data-center-customer-story-dreamworks-hero-overlay-m.png); background-size: cover; } } .section-high-performance .solutions-text { color: #fff; z-index: 5; position: relative; max-width: 1600px; width: 90%; margin: 0 auto 20px; padding: 0 0 0 10px; border-left: 3px solid #8246af } @media only screen and (max-width:1024px) { .section-high-performance .solutions-text { width: 80% } } #hero-video { position: absolute; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; background-size: 100% 100%; background-color: #000; background-image: url(https://p2-ofp.static.pub/ShareResource/servers-storage/solutions/customer-stories/dreamworks/images/lenovo-data-center-customer-story-dreamworks-day-in-life-poster.jpg); background-repeat: no-repeat; background-position: 50%; background-size: contain; -o-object-fit: cover; object-fit: cover; z-index: 1 } .card-high-performance { position: relative; z-index: 2 } .card-high-performance .text-container { color: #fff; margin-bottom: 50px } @media only screen and (max-width:1024px) { .card-high-performance .text-container { max-width: 70vw; margin-bottom: 7vh } } .card-high-performance .text-container h2 { margin-top: 50px; margin-bottom: 25px } @media only screen and (max-width:480px) { .card-high-performance .text-container h2 { margin-bottom: 15px } } .card-high-performance .text-container p { font-size: 24px; line-height: 33px } @media only screen and (max-width:480px) { .card-high-performance .text-container p { font-size: 16px; line-height: 22px } } .section-story { background: #fff; overflow: hidden; position: relative; -webkit-transition: all .7s ease; transition: all .7s ease } .section-story p, .section-result p, .section-final p { color: #4e444e; } .section-story.test { -webkit-transform: translateY(100vh); transform: translateY(100vh) } .section-story .desktop-legal { position: absolute; bottom: 0; left: 20px; font-size: 14px; color: #aba8b1 } @media only screen and (max-width:1023px) { .section-story .desktop-legal { display: none } .section-story .legal-image-text { margin-right: 0  !important; line-height: 12px  !important; } } @media only screen and (max-width:1024px) { .section-story .br { display: block } } .section-story .legal-image-text { color: #cacaca; margin-right: 40px; line-height: 10px; font-size: 10px; } .card-story { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row } @media only screen and (max-width:1024px) { .card-story { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse } } .card-story .text-container { margin-right: 75px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } @media only screen and (max-width:1024px) { .card-story .text-container { margin-right: 0 } } .card-story .image-container { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 80vw; max-height: 630px } @media only screen and (max-width:1024px) { .card-story .image-container { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-right: 30px; width: 100% } } .card-story .image-container .center { position: relative } .card-story .image-container .legal-container { -webkit-transform: rotate(-90deg); transform: rotate(-90deg) } .baby-snake { bottom: 0; margin: auto; opacity: 0; position: absolute; right: 60vw; transition-delay: 300ms; -webkit-transition: all 1.2s ease; transition: all 1.2s ease; width: 30%; z-index: 2; will-change: transform; } @media only screen and (max-width: 1024px) { .baby-snake { margin-left: -25px; position: relative; right: inherit; -webkit-transform: translateX(25%); transform: translateX(25%); -webkit-transition: all .9s ease; transition: all .9s ease; width: 170px; } } @media only screen and (max-width: 768px) { .baby-snake { width: 140px; } } @media only screen and (max-width: 414px) { .baby-snake { width: 125px; } } .baby-snake.active { opacity: 1; right: 34vw; } @media only screen and (max-width: 1024px) { .baby-snake.active { right: inherit; -webkit-transform: translateX(0); transform: translateX(0); } } .badboy-wolf { bottom: 25px; margin: auto; opacity: 0; position: absolute; right: 60%; transition-delay: 300ms; -webkit-transition: all 1.2s ease; transition: all 1.2s ease; width: 25%; z-index: 2; will-change: transform; } @media only screen and (max-width: 1024px) { .badboy-wolf { margin-left: -40px; position: relative; right: inherit; -webkit-transform: translateX(25%); transform: translateX(25%); -webkit-transition: all .9s ease; transition: all .9s ease; } } .badboy-wolf.active { opacity: 1; right: 60%; } @media only screen and (max-width: 1024px) { .badboy-wolf.active { right: inherit; -webkit-transform: translateX(0); transform: translateX(0); } } .po-zhen { top: auto; bottom: auto; margin: auto; opacity: 0; position: absolute; right: -10vw; transition-delay: 300ms; -webkit-transition: all 1.2s ease; transition: all 1.2s ease; width: 90%; z-index: 2; will-change: transform; } @media only screen and (max-width: 1024px) { .po-zhen { position: relative; right: inherit; -webkit-transform: translateX(25%); transform: translateX(25%); -webkit-transition: all .9s ease; transition: all .9s ease; } } @media only screen and (max-width: 768px) { .po-zhen { width: 100%; } } .po-zhen.active { opacity: 1; right: 10%; } @media only screen and (max-width: 1024px) { .po-zhen.active { -webkit-transform: translateX(0); transform: translateX(0); } } .baby-theo { bottom: 0; margin: auto; opacity: 0; position: absolute; right: -10vw; top: 0; -webkit-transition-delay: .3s; transition-delay: .3s; -webkit-transition: all 1.2s ease; transition: all 1.2s ease; width: 40%; z-index: 2 } @media only screen and (max-width:1024px) { .baby-theo { margin: 0 0 0 -55px; position: relative; right: inherit; -webkit-transform: translateX(25%); transform: translateX(25%); -webkit-transition: all .9s ease; transition: all .9s ease; width: 170px } } @media only screen and (max-width:768px) { .baby-theo { width: 140px } } @media only screen and (max-width:480px) { .baby-theo { width: 125px } } .baby-theo.active { opacity: 1; right: 13% } @media only screen and (max-width:1024px) { .baby-theo.active { right: inherit; -webkit-transform: translateX(0); transform: translateX(0) } } .baby-tina { bottom: 0; left: -10vw; margin: auto; opacity: 0; position: absolute; top: 0; -webkit-transition: all 1.2s ease; transition: all 1.2s ease; -webkit-transition-delay: .3s; transition-delay: .3s; width: 53%; z-index: 1 } @media only screen and (max-width:1024px) { .baby-tina { left: inherit; margin: 0; position: relative; -webkit-transform: translateX(-20%); transform: translateX(-20%); -webkit-transition: all .9s ease; transition: all .9s ease; width: 230px } } @media only screen and (max-width:768px) { .baby-tina { width: 190px } } @media only screen and (max-width:480px) { .baby-tina { width: 175px } } .baby-tina.active { left: 10%; opacity: 1 } @media only screen and (max-width:1024px) { .baby-tina.active { left: inherit; -webkit-transform: translateX(0); transform: translateX(0) } } #story-legal-mob { right: auto; top: 0; bottom: 0; color: #cacaca; display: -webkit-box; display: -ms-flexbox; display: flex } #story-legal-mob .legal-image-text { -webkit-transform: rotate(-90deg); transform: rotate(-90deg) } @media only screen and (max-width:1024px) { #story-legal-mob { bottom: auto; top: 200px; right: -175px; left: auto } } @media only screen and (min-width:1024px) { #story-legal-mob { display: none } } .section-day-in-life { position: relative } @media only screen and (max-width:1024px) { .section-day-in-life { background: #000 url(https://p2-ofp.static.pub/ShareResource/servers-storage/solutions/customer-stories/dreamworks/images/lenovo-data-center-customer-story-dreamworks-mobile-video-bg-new.png); background-repeat: no-repeat; background-size: cover } } @media only screen and (max-width:1024px) and (orientation:portrait) { .section-day-in-life .fp-tableCell { vertical-align: top } } @media only screen and (max-width:480px) { .section-day-in-life .fp-tableCell { vertical-align: middle } } @media only screen and (max-width:1024px) { .section-day-in-life .flex-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse } } @media only screen and (max-width:480px) { .section-day-in-life .flex-container { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse } } .section-day-in-life .video-container { position: absolute; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; background-size: 100% 100%; background-color: #000; background-position: 50%; background-size: contain; -o-object-fit: cover; object-fit: cover; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden } @media only screen and (max-width:1024px) and (orientation:portrait) { .section-day-in-life .video-container { position: relative; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } } .section-day-in-life #day-in-life-video { right: 0; bottom: 0; top: 0; left: 0; max-height: 100%; position: absolute; margin: auto; max-width: 100%; background-size: 100% 100%; background: #000; background-position: 50%; background-size: contain; -o-object-fit: cover; object-fit: contain; z-index: 1 } @media only screen and (max-width:1024px) { .section-day-in-life #day-in-life-video { position: relative; -o-object-fit: contain; object-fit: contain } } .section-day-in-life .day-overlay { position: absolute; width: 100%; height: 100%; background-color: #000; z-index: 2; opacity: .6; top: 0 } .section-day-in-life .day-overlay.hide { opacity: 0 } @media only screen and (max-width:1024px) and (orientation:portrait) { .section-day-in-life .card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } } .section-day-in-life .card-spacer { display: none; padding: 0 } @media only screen and (max-width:480px) { .section-day-in-life .card-spacer { display: block } } .card-day-in-life { position: relative; z-index: 2; pointer-events: none } @media only screen and (max-width:1920px) { .card-day-in-life { width: 100%; padding: 0 } } .card-day-in-life .image-container { background-repeat: no-repeat; background-size: cover; position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; overflow: hidden } @media only screen and (max-width:1024px) and (orientation:portrait) { .card-day-in-life .image-container { position: relative; height: 400px } } .card-day-in-life .text-container { padding: 80px 95px; color: #fff; max-width: 860px; position: relative; margin: 0 auto; text-align: center; font-weight: 700 } @media only screen and (max-width:1024px) and (orientation:portrait) { .card-day-in-life .text-container { color: #fff; font-weight: 700; padding: 5vw 17vw; max-width: 100% } } .card-day-in-life .text-container p { font-size: 35px; line-height: 45px; font-weight: 700; margin: 0 auto; -webkit-transition: opacity .5s linear; transition: opacity .5s linear } @media only screen and (max-width:1024px) { .card-day-in-life .text-container p { font-size: 22px; line-height: 30px; -webkit-transition: opacity 0s linear; transition: opacity 0s linear } } @media only screen and (max-width:480px) { .card-day-in-life .text-container p { font-size: 18px; line-height: 25px } } @media only screen and (orientation:landscape) { .card-day-in-life .text-container p.unmute { opacity: 0  !important } } .section-partnership { position: relative; background: #000; } .section-partnership .image-container { background: #000 url("https://p3-ofp.static.pub/ShareResource/data-center/solutions/customer-stories/dreamworks/lenovo-data-center-customer-story-dreamworks-po-manta-ray.png"); background-repeat: no-repeat; background-size: cover; background-position-x: 30vw; position: absolute; width: 100%; height: 100%; bottom: 0; left: 200px; overflow: hidden; transition: background-position-x 1.6s ease; transition-delay: 0ms; } @media only screen and (max-width: 1024px) { .section-partnership .image-container { position: relative; min-height: 270px; max-height: 50vh; left: 0; background-position: center; } } .section-partnership .image-container.active { background-position-y: 0vh; } .section-partnership .image-container.final-pos { transition: background-position-x 1s ease; transition-delay: 0ms; background-position-x: 0; } @media only screen and (max-width: 1024px) { .section-partnership .image-container.final-pos { transition-delay: 0ms; background-position-x: center; transition: background-position-x .375s ease; } } .section-partnership .desktop-legal { position: absolute; bottom: 0; left: 20px; font-size: 14px; color: #aba8b1; } @media only screen and (max-width: 1023px) { .section-partnership .desktop-legal { display: none; } } .section-partnership .legal-image-text { font-size: 10px; margin-left: 20px; line-height: 10px; } .card-partnership { position: relative; padding: 5vw 0 } @media only screen and (max-width:1024px) { .card-partnership { width: 100%; padding: 0 } } .card-partnership .text-container { padding: 4vw; color: #fff; max-width: 770px; background: #7a126b url(https://p4-ofp.static.pub/ShareResource/servers-storage/solutions/customer-stories/dreamworks/images/lenovo-data-center-customer-story-dreamworks-partnership-grad.png); background-repeat: no-repeat; background-size: cover; position: relative; margin-right: auto; margin-left: 0; width: 35vw; } @media only screen and (min-width: 1024px) and (max-width: 1440px) { .card-partnership .text-container { width: 52%; } } @media only screen and (max-width:1024px) { .card-partnership .text-container { padding: 40px 10% 80px; width: 100vw; max-width: 100%; min-height: 50vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } } .card-partnership .text-container a { color: #fff } .card-partnership .text-container .legal-container { position: absolute; left: 5vw; bottom: 118px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg) } @media only screen and (max-width:1024px) { .card-partnership .text-container .legal-container { bottom: auto; top: -40px; right: 30px; -webkit-transform: none; transform: none } } @media only screen and (min-width:1024px) { .card-partnership .text-container .legal-container { display: none } } .section-result { background: #fff; overflow-x: hidden; position: relative } @media only screen and (min-width:768px) and (min-height:600px) { .section-result .water { -webkit-filter: url(https://canada.lenovo.com/fr/_c1-ofp_static_pub/version/css/#turbulence); filter: url(https://canada.lenovo.com/fr/_c1-ofp_static_pub/version/css/#turbulence) } .section-result.counter-scroll { -webkit-transform: translateY(100vh)  !important; transform: translateY(100vh)  !important; -webkit-transition: all .9s ease; transition: all .9s ease; z-index: 5 } .section-result.transparent { opacity: 0; -webkit-transition: opacity .3s linear; transition: opacity .3s linear } .section-result.no-transition { opacity: 1  !important; -webkit-transform: translateY(0)  !important; transform: translateY(0)  !important; -webkit-transition: none  !important; transition: none  !important; z-index: 1 } } .card-result { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row } @media only screen and (max-width:1024px) { .card-result { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } } .card-result.sink { -webkit-transform: scale(.9); transform: scale(.9); -webkit-transition: -webkit-transform 4.7s ease; transition: -webkit-transform 4.7s ease; transition: transform 4.7s ease; transition: transform 4.7s ease, -webkit-transform 4.7s ease } .card-result .text-container { margin-right: 40px } @media only screen and (min-width:1024px) { .card-result .text-container { max-width: 550px; margin-right: 80px } } .card-result .features-container { margin-left: auto; margin-right: 8vw; max-width: 600px } @media only screen and (max-width:1024px) { .card-result .features-container { margin-left: 0; margin-right: 0; margin-top: 60px } } .card-result .feature { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 60px } .card-result .feature p { font-size: 30px; line-height: 36px; margin-top: 0; margin-bottom: 0 } @media only screen and (max-width:1024px) { .card-result .feature p { font-size: 20px; line-height: 28px } } @media only screen and (max-width:480px) { .card-result .feature p { font-size: 16px; line-height: 24px } } .card-result .feature img { margin-right: 40px } @media only screen and (max-width:1024px) { .card-result .feature img { max-width: 50px; margin-right: 40px } } .card-result .feature .arrow-icon { -webkit-transform: translateY(25vw); transform: translateY(25vw); -webkit-transition: opacity .5s ease-in, -webkit-transform .5s ease-in; transition: opacity .5s ease-in, -webkit-transform .5s ease-in; transition: transform .5s ease-in, opacity .5s ease-in; transition: transform .5s ease-in, opacity .5s ease-in, -webkit-transform .5s ease-in; will-change: transform; -webkit-transition-delay: .6s; transition-delay: .6s; opacity: 0 } @media only screen and (max-width:1024px) { .card-result .feature .arrow-icon { -webkit-transition: opacity .35s ease-in, -webkit-transform .35s ease-in; transition: opacity .35s ease-in, -webkit-transform .35s ease-in; transition: transform .35s ease-in, opacity .35s ease-in; transition: transform .35s ease-in, opacity .35s ease-in, -webkit-transform .35s ease-in; -webkit-transition-delay: .2s; transition-delay: .2s } } .card-result .feature .arrow-icon.active { -webkit-transform: translate(0) scale(1); transform: translate(0) scale(1); opacity: 1 } .card-result .feature .server-icon { -webkit-transform: translateX(-15vw); transform: translateX(-15vw); -webkit-transition: opacity .5s ease-in, -webkit-transform .5s ease-in; transition: opacity .5s ease-in, -webkit-transform .5s ease-in; transition: transform .5s ease-in, opacity .5s ease-in; transition: transform .5s ease-in, opacity .5s ease-in, -webkit-transform .5s ease-in; will-change: transform; -webkit-transition-delay: 1.2s; transition-delay: 1.2s; opacity: 0 } @media only screen and (max-width:1024px) { .card-result .feature .server-icon { -webkit-transition: opacity .35s ease-in, -webkit-transform .35s ease-in; transition: opacity .35s ease-in, -webkit-transform .35s ease-in; transition: transform .35s ease-in, opacity .35s ease-in; transition: transform .35s ease-in, opacity .35s ease-in, -webkit-transform .35s ease-in; -webkit-transition-delay: .5s; transition-delay: .5s } } .card-result .feature .server-icon.active { -webkit-transform: translate(0) scale(1); transform: translate(0) scale(1); opacity: 1 } .card-result .feature .server-text { -webkit-transform: translateX(15vw); transform: translateX(15vw); -webkit-transition: opacity .5s ease-in, -webkit-transform .5s ease-in; transition: opacity .5s ease-in, -webkit-transform .5s ease-in; transition: transform .5s ease-in, opacity .5s ease-in; transition: transform .5s ease-in, opacity .5s ease-in, -webkit-transform .5s ease-in; will-change: transform; -webkit-transition-delay: 1.2s; transition-delay: 1.2s; opacity: 0 } @media only screen and (max-width:1024px) { .card-result .feature .server-text { -webkit-transition: opacity .35s ease-in, -webkit-transform .35s ease-in; transition: opacity .35s ease-in, -webkit-transform .35s ease-in; transition: transform .35s ease-in, opacity .35s ease-in; transition: transform .35s ease-in, opacity .35s ease-in, -webkit-transform .35s ease-in; -webkit-transition-delay: .5s; transition-delay: .5s } } .card-result .feature .server-text.active { -webkit-transform: translate(0) scale(1); transform: translate(0) scale(1); opacity: 1 } .card-result .feature .water-icon { -webkit-transform: translateY(-25vw) scale(.8); transform: translateY(-25vw) scale(.8); -webkit-transition: opacity .5s ease-in, -webkit-transform .5s ease-in; transition: opacity .5s ease-in, -webkit-transform .5s ease-in; transition: transform .5s ease-in, opacity .5s ease-in; transition: transform .5s ease-in, opacity .5s ease-in, -webkit-transform .5s ease-in; will-change: transform; -webkit-transition-delay: 2s; transition-delay: 2s; opacity: 0 } @media only screen and (max-width:1024px) { .card-result .feature .water-icon { -webkit-transition: opacity .35s ease-in, -webkit-transform .35s ease-in; transition: opacity .35s ease-in, -webkit-transform .35s ease-in; transition: transform .35s ease-in, opacity .35s ease-in; transition: transform .35s ease-in, opacity .35s ease-in, -webkit-transform .35s ease-in; -webkit-transition-delay: 1s; transition-delay: 1s } } .card-result .feature .water-icon.active { -webkit-transform: translate(0) scale(1); transform: translate(0) scale(1); opacity: 1 } .card-result .feature .water-icon.transition { -webkit-transition-delay: 0ms; transition-delay: 0ms; -webkit-transform: translateY(130vh) scale(20); transform: translateY(130vh) scale(20); opacity: 0 } @media only screen and (max-width:1024px) { .card-result .feature .water-icon.transition { -webkit-transform: translateY(100vh) scale(10); transform: translateY(100vh) scale(10); -webkit-transform: translateY(200px) scale(5); transform: translateY(200px) scale(5) } } .card-result .feature .water-icon.reset { -webkit-transition: unset; transition: unset; -webkit-transition-delay: 0ms; transition-delay: 0ms; -webkit-transform: translate(0) scale(1); transform: translate(0) scale(1); opacity: 1 } .card-result .feature .water-icon.no-transition { -webkit-transform: translate(0) scale(1)  !important; transform: translate(0) scale(1)  !important; -webkit-transition-delay: 0ms; transition-delay: 0ms; -webkit-transition: none  !important; transition: none  !important; opacity: 1  !important } .card-result .feature .water-text { -webkit-transform: translate(8vw, 7vw); transform: translate(8vw, 7vw); -webkit-transition: opacity .5s ease-in, -webkit-transform .5s ease-in; transition: opacity .5s ease-in, -webkit-transform .5s ease-in; transition: transform .5s ease-in, opacity .5s ease-in; transition: transform .5s ease-in, opacity .5s ease-in, -webkit-transform .5s ease-in; will-change: transform; -webkit-transition-delay: 2s; transition-delay: 2s; opacity: 0 } @media only screen and (max-width:1024px) { .card-result .feature .water-text { -webkit-transition: opacity .35s ease-in, -webkit-transform .35s ease-in; transition: opacity .35s ease-in, -webkit-transform .35s ease-in; transition: transform .35s ease-in, opacity .35s ease-in; transition: transform .35s ease-in, opacity .35s ease-in, -webkit-transform .35s ease-in; -webkit-transition-delay: 1s; transition-delay: 1s } } .card-result .feature .water-text.active { -webkit-transform: translate(0) scale(1); transform: translate(0) scale(1); opacity: 1 } .fake-video { position: absolute; top: 0; left: 0; right: 0; bottom: 0 } .section-tech-vid { position: relative } @media only screen and (max-width:1024px) { .section-tech-vid { background: #006d97 url(https://p2-ofp.static.pub/ShareResource/servers-storage/solutions/customer-stories/dreamworks/images/lenovo-data-center-customer-story-dreamworks-mobile-video-bg-new.png); background-repeat: no-repeat; background-size: cover } } @media only screen and (max-width:1024px) and (orientation:portrait) { .section-tech-vid .fp-tableCell { vertical-align: top } } @media only screen and (max-width:480px) { .section-tech-vid .fp-tableCell { vertical-align: middle } } @media only screen and (max-width:1024px) { .section-tech-vid .flex-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse } } @media only screen and (max-width:480px) { .section-tech-vid .flex-container { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse } } .section-tech-vid .video-container { position: absolute; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; background-size: 100% 100%; background-color: #000; background-position: 50%; background-size: contain; -o-object-fit: cover; object-fit: cover; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden } @media only screen and (max-width:1024px) and (orientation:portrait) { .section-tech-vid .video-container { position: relative; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } } .section-tech-vid #tech-video { right: 0; bottom: 0; top: 0; left: 0; max-height: 100%; position: absolute; margin: auto; max-width: 100%; background-size: 100% 100%; background: #000; background-position: 50%; background-size: contain; -o-object-fit: cover; object-fit: contain; z-index: 1 } @media only screen and (max-width:1024px) { .section-tech-vid #tech-video { position: relative; -o-object-fit: contain; object-fit: contain } } .section-tech-vid .tech-overlay { position: absolute; width: 100%; height: 100%; z-index: 2; opacity: .6; top: 0 } .section-tech-vid .tech-overlay.hide { opacity: 0 } @media only screen and (max-width:1024px) and (orientation:portrait) { .section-tech-vid .card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } } .section-tech-vid .card-spacer { display: none; padding: 0 } @media only screen and (max-width:480px) { .section-tech-vid .card-spacer { display: block } } .card-tech-vid { position: relative; z-index: 2; pointer-events: none } @media only screen and (max-width:1920px) { .card-tech-vid { width: 100%; padding: 0 } } .card-tech-vid .image-container { background-repeat: no-repeat; background-size: cover; position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; overflow: hidden } @media only screen and (max-width:1024px) and (orientation:portrait) { .card-tech-vid .image-container { position: relative; height: 400px } } .card-tech-vid .text-container { padding: 80px 95px; color: #fff; max-width: 860px; position: relative; margin: 0 auto; text-align: center; font-weight: 700 } @media only screen and (max-width:1024px) and (orientation:portrait) { .card-tech-vid .text-container { color: #fff; font-weight: 700; padding: 5vw 17vw; max-width: 100% } } .card-tech-vid .text-container p { font-size: 35px; line-height: 45px; font-weight: 700; margin: 0 auto; -webkit-transition: opacity .5s linear; transition: opacity .5s linear } @media only screen and (max-width:1024px) { .card-tech-vid .text-container p { font-size: 22px; line-height: 30px; -webkit-transition: opacity 0s linear; transition: opacity 0s linear } } @media only screen and (max-width:480px) { .card-tech-vid .text-container p { font-size: 18px; line-height: 25px } } @media only screen and (orientation:landscape) { .card-tech-vid .text-container p.unmute { opacity: 0  !important } } .section-neptune { position: relative } @media only screen and (max-width:1024px) { .section-neptune { background-repeat: no-repeat; background-size: cover } } .section-neptune .image-container { background: #a7b5af url(https://p3-ofp.static.pub/ShareResource/servers-storage/solutions/customer-stories/dreamworks/images/lenovo-data-center-customer-story-dreamworks-neptune-tech-bg.jpg); background-repeat: no-repeat; background-size: cover; background-position-y: 30vh; opacity: 1; position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; overflow: hidden; -webkit-transition: background-position-y 1.6s ease, opacity 1.6s linear; transition: background-position-y 1.6s ease, opacity 1.6s linear; -webkit-transition-delay: 0ms; transition-delay: 0ms } @media only screen and (max-width:1024px) { .section-neptune .image-container { -webkit-transition: background-position-y 1.1s ease, opacity 1.25s linear; transition: background-position-y 1.1s ease, opacity 1.25s linear; position: relative; min-height: 270px; height: 50vh } } .section-neptune .image-container.active { background-position-y: 0; opacity: 1 } .section-neptune .image-container.final-pos { -webkit-transition: background-position-y .75s ease, opacity 2.5s linear; transition: background-position-y .75s ease, opacity 2.5s linear; -webkit-transition-delay: 0ms; transition-delay: 0ms; background-position-y: 0 } @media only screen and (max-width:1024px) { .section-neptune .image-container.final-pos { -webkit-transition-delay: 0ms; transition-delay: 0ms; background-position-y: 0; -webkit-transition: background-position-y .375s ease, opacity 1.25s linear; transition: background-position-y .375s ease, opacity 1.25s linear } } .card-neptune { position: relative; z-index: 2; padding: 5vw 0 } @media only screen and (max-width:1024px) { .card-neptune { width: 100%; padding: 0; background: #006d97 url(https://p3-ofp.static.pub/ShareResource/servers-storage/solutions/customer-stories/dreamworks/images/lenovo-data-center-customer-story-dreamworks-neptune-gradient.png); background-size: cover } } .card-neptune .image-container { background: #fff url(https://p3-ofp.static.pub/ShareResource/servers-storage/solutions/customer-stories/dreamworks/images/lenovo-data-center-customer-story-dreamworks-neptune-tech-bg.jpg); background-repeat: no-repeat; background-size: cover; position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; overflow: hidden } @media only screen and (max-width:1024px) { .card-neptune .image-container { position: relative; max-height: 40vh } } .card-neptune .text-container { padding: 4vw; color: #fff; max-width: 770px; background: #006d97 url(https://p3-ofp.static.pub/ShareResource/servers-storage/solutions/customer-stories/dreamworks/images/lenovo-data-center-customer-story-dreamworks-neptune-gradient.png); background-repeat: no-repeat; background-size: cover; position: relative; margin-left: 0; margin-right: auto; width: 50vw } @media only screen and (max-width:1024px) { .card-neptune .text-container { background-repeat: no-repeat; background-size: cover; background: transparent; max-width: 100%; min-height: 60vh; padding: 40px 10%; width: 100% } } @media only screen and (max-width:480px) { .card-neptune .text-container { padding-bottom: 150px } } .card-neptune a { color: #fff } .section-how-it-works { background: #fff } @media only screen and (max-width:1024px) { .section-how-it-works .fp-tableCell { vertical-align: bottom } } .card-how-it-works { background: #fff } @media only screen and (max-width:1024px) { .card-how-it-works { width: 100%; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex } } .card-how-it-works .text-container { max-width: 100%; -ms-flex-item-align: center; align-self: center } @media only screen and (max-width:1024px) { .card-how-it-works .text-container { -ms-flex-item-align: end; align-self: flex-end } } @media only screen and (max-width:1024px) { .card-how-it-works .text-container h2 { margin-left: 5vw; margin-top: 5vw; -webkit-box-sizing: border-box; box-sizing: border-box } } @media only screen and (max-width:480px) { .card-how-it-works .text-container h2 { margin-top: 70px } } .card-how-it-works .two-state-box { border: 2px solid #ddd; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; min-height: 500px } @media only screen and (max-width:1024px) { .card-how-it-works .two-state-box { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-bottom: none; border-left: none; border-right: none } } .card-how-it-works .two-state-box .states { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative } @media only screen and (max-width:1024px) { .card-how-it-works .two-state-box .states { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row } } .card-how-it-works .two-state-box .states .state { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; color: #4e444e; -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } .card-how-it-works .two-state-box .states .state.active { color: #fff; background: #7a126b url(https://p2-ofp.static.pub/ShareResource/servers-storage/solutions/customer-stories/dreamworks/images/lenovo-data-center-customer-story-dreamworks-how-it-works-grad.png); background-repeat: no-repeat; background-size: cover } .card-how-it-works .two-state-box .states p { padding: 0 60px; font-size: 30px; line-height: 36px; font-weight: 700 } @media only screen and (max-width:1024px) { .card-how-it-works .two-state-box .states p { font-size: 22px; line-height: 30px; padding: 5vw 10vw } } @media only screen and (max-width:480px) { .card-how-it-works .two-state-box .states p { font-size: 16px; line-height: 24px } } .card-how-it-works .two-state-box .content-container { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #faeceb; background-size: cover; background-repeat: no-repeat } @media only screen and (max-width:1024px) { .card-how-it-works .two-state-box .content-container { min-height: 60vh; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start } } .card-how-it-works .two-state-box .content { position: absolute; left: 0; padding: 50px 80px; color: #4e444e; font-size: 19px; line-height: 30px; -webkit-transition: opacity .75s ease, -webkit-transform .75s ease; transition: opacity .75s ease, -webkit-transform .75s ease; transition: transform .75s ease, opacity .75s ease; transition: transform .75s ease, opacity .75s ease, -webkit-transform .75s ease; opacity: 0; -webkit-transform: scale(.9); transform: scale(.9) } .card-how-it-works .two-state-box .content.active { -webkit-transition-delay: .4s; transition-delay: .4s; opacity: 1; -webkit-transform: scale(1); transform: scale(1) } @media only screen and (max-width:1024px) { .card-how-it-works .two-state-box .content { padding: 5vw 10vw } } .card-how-it-works .two-state-box .content li { margin-bottom: 25px } .card-how-it-works .two-state-box .content-a { position: relative } .card-how-it-works .two-state-box .content-b { opacity: 0 } .section-data-center { position: relative; overflow: hidden; background: #13162a; } @media only screen and (max-width: 1024px) { .section-data-center { display: flex; flex-direction: column-reverse; } } .section-data-center .image-container { background: url("https://p2-ofp.static.pub/ShareResource/data-center/solutions/customer-stories/dreamworks/lenovo-data-center-customer-story-dreamworks-po-still-1920.png"); background-color: #13162a; background-repeat: no-repeat; background-size: cover; background-position-x: 80%; opacity: 1; position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; overflow: hidden; -webkit-transition: background-position-y 1.2s ease, opacity 1.2s linear; transition: background-position-y 1.2s ease, opacity 1.2s linear; transition-delay: 0ms; } @media only screen and (max-width: 1024px) { .section-data-center .image-container { -webkit-transition: background-position-y .9s ease, opacity .75s linear; transition: background-position-y .9s ease, opacity .75s linear; position: relative; height: 59.5vw; background-position: 20%; } } .section-data-center .image-container.active { background-position-y: 0; opacity: 1; } .section-data-center .image-container .eep { position: absolute; top: 0; left: -80vw; -webkit-transition: all 1.2s ease; transition: all 1.2s ease; transition-delay: .6s; opacity: 0; height: 100%; } .section-data-center .image-container .eep.active { left: -7vw; opacity: 1; -webkit-transition: all 1.2s ease; transition: all 1.2s ease; } .section-data-center .image-container .eep.bounce { left: -7vw; opacity: 1; -webkit-transition: all 1.8s ease; transition: all 1.8s ease; } .section-data-center .image-container .eep.no-transition { -webkit-transition: none  !important; -moz-transition: none  !important; -o-transition: none  !important; transition: none  !important; transition-delay: unset  !important; left: -7vw; } @media only screen and (max-width: 1250px) and (min-width: 1024px) { .section-data-center .image-container .eep { height: 85%; top: auto; bottom: 0; } } .section-data-center .image-container .grug { position: absolute; bottom: -48vw; right: 3vw; -webkit-transition: all 2s ease; transition: all 2s ease; transition-delay: 1.3s; opacity: 0; height: 90%; } .section-data-center .image-container .grug.active { right: -16vw; bottom: 0; opacity: 1; -webkit-transition: all 1.2s ease; transition: all 1.2s ease; } @media only screen and (min-width: 600px) { .section-data-center .image-container .grug.active { right: -3vw; } } .section-data-center .image-container .grug.bounce { bottom: 0; right: -3vw; opacity: 1; -webkit-transition: all 1.8s ease; transition: all 1.8s ease; } .section-data-center .image-container .grug.no-transition { -webkit-transition: none  !important; -moz-transition: none  !important; -o-transition: none  !important; transition: none  !important; transition-delay: unset  !important; right: -3vw; bottom: 0; } @media only screen and (max-width: 1250px) and (min-width: 1024px) { .section-data-center .image-container .grug { height: 80%; } } .section-data-center .desktop-legal { position: absolute; bottom: 0; left: 20px; font-size: 14px; color: #aba8b1; } @media only screen and (max-width: 1023px) { .section-data-center .desktop-legal { display: none; } } .section-data-center .legal-image-text { margin-left: 20px; line-height: 10px; } @media only screen and (max-width: 1024px) { .section-data-center .legal-image-text { font-size: 10px; } } .card-data-center { position: relative; padding: 5vw 0 } @media only screen and (max-width:1024px) { .card-data-center { width: 100%; padding: 0 } } .card-data-center .text-container { padding: 4vw; color: #fff; max-width: 800px; width: 48vw; background: #7a126b url(https://p1-ofp.static.pub/ShareResource/servers-storage/solutions/customer-stories/dreamworks/images/lenovo-data-center-customer-story-dreamworks-datacenter-grad.png); background-repeat: no-repeat; background-size: cover; margin: 0 0 0 auto; position: relative; } @media only screen and (max-width:1024px) { .card-data-center .text-container { max-width: 100%; width: 100vw; padding: 40px 10%; min-height: calc(100vh - 59.5vw) } } @media only screen and (max-width:480px) { .card-data-center .text-container { padding-bottom: 150px } } .card-data-center .text-container h2 { font-size: 44px; line-height: 55px; font-weight: 800; margin-top: 0; text-transform: none } @media only screen and (max-width:480px) { .card-data-center .text-container h2 { font-size: 35px; line-height: 42px } } .card-data-center .text-container .logo-container { margin: 40px auto 0; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 3vw } @media only screen and (max-width:1024px) { .card-data-center .text-container .logo-container { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; height: 7vw } } .card-data-center .text-container .logo-container .lenovo-logo { -ms-flex-item-align: center; align-self: center; height: 100%; max-width: 30%  !important; object-fit: contain; } @media only screen and (max-width:1024px) { .card-data-center .text-container .logo-container .lenovo-logo { height: 100% } } .card-data-center .text-container .logo-container .dreamworks-logo { -ms-flex-item-align: center; align-self: center; height: 100%; max-width: 60%  !important; object-fit: contain; } @media only screen and (max-width:1024px) { .card-data-center .text-container .logo-container .dreamworks-logo { height: 100% } } .card-data-center .text-container .logo-container .divider { height: 62px; width: 1px; border-right: 1px solid #fff; margin: 0 20px } @media only screen and (max-width:1024px) { .card-data-center .text-container .logo-container .divider { margin: 0 15px } } .card-data-center .text-container .legal-container { position: absolute; left: 5vw; bottom: 118px } @media only screen and (max-width:1024px) { .card-data-center .text-container .legal-container { bottom: auto; top: -40px; right: 20px; -webkit-transform: none; transform: none; font-size: 10px; } } #ds-legal { bottom: 120px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg) } @media only screen and (max-width:1024px) { #ds-legal { display: none } } #ds-legal-mobile { bottom: 118px } #ds-legal-mobile .legal-image-text { -webkit-transform: none; transform: none } @media only screen and (min-width:1024px) { #ds-legal-mobile { display: none } } .section-final { background: #fff } @media only screen and (max-width:1024px) { .section-final .fp-tableCell { vertical-align: top } } .section-final footer { width: 100%; background-color: #e6e2e4; bottom: 0; left: 0; right: 0; padding: 40px 5vw 30px; font-size: 14px; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-item-align: end; align-self: flex-end } @media only screen and (max-width:1024px) { .section-final footer { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } } @media only screen and (min-width:1024px) { .section-final footer .link-break { display: inline-block } } .section-final footer a, .section-final footer p { margin-top: 0; font-size: 16px; line-height: 20px; margin-bottom: 10px; display: inline-block; color: #4e444e } .section-final footer .footer-links a { margin-left: 15px } @media only screen and (max-width:1024px) { .section-final footer .footer-links a { margin-left: 0; margin-right: 15px } } .section-final footer .copyright { font-weight: 700 } .section-final footer .legal { font-size: 10px } .section-final .social-links { margin-top: 10px } .section-final .social-links a { margin-right: 12px } .section-final .social-links img { height: 25px } .card-final { min-height: 20vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 100vh; padding: 0; width: 100%; max-width: 100vw } @media only screen and (min-width:1024px) { .card-final .break { display: block } } .card-final .text-container { text-align: center; max-width: 700px; width: 80%; margin: 0 auto; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } @media only screen and (max-width:1024px) { .card-final .text-container { width: 100%; padding: 10vw 5vw } } @media only screen and (max-height:800px) { .card-final .text-container { min-height: 100vh } } @media only screen and (max-width:480px) { .card-final .text-container h3 { margin-top: 70px } } .card-final .text-container .btn { margin: 15px; display: inline-block } .transparent { opacity: 0  !important } .siteAlertMessage { display: none; }