body { font-size: 16px; font-family: 'Lato'; } div#singlecol { margin-top: 75px; } strong{ font-weight: 900; } #amd-ryzen--consumer, #amd-ryzen--commercial, #amd-ryzen--gaming { background-color: #000; } #blade-1 { position: relative; z-index: 1; } #blade-1 .container { position: absolute; left: 130px; transform: translateY(-50%); top: 50%; padding: 0 50px; } #blade-1 .lenovo-pegasus-logo{ margin: 20px 0 0; } section { position: relative; } .text-right { text-align: right; } .text-left { text-align: left; } .text-center { text-align: center; } .spacer-title { font-weight: 900; } .btn-primary { color: #fff; background-color: #0d5c91; border-color: #0d5c91; margin: 10px 15px; padding: 8px 18px; height: auto; float: none; } .btn-primary:hover { color: #fff; background-color: rgba(13,92,145,0.8); border-color: rgba(13,92,145,0.8); } .fullsize-background { background-size: cover; background-repeat: no-repeat; background-position: center; overflow: hidden; } .vertical-center { position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; } @media (max-width: 992px) { #blade-1 .container { left: 5vw; top: 5vh; transform: unset; padding: 0; } } @media screen and (max-width: 1024px) { .vertical-center { position: absolute; top: 35%; transform: translate(-50%, -50%); left: 50%; } } .vertical-top { position: absolute; top: 15%; transform: translate(-50%, -15%); left: 50%; } .btn-scroll-down { color: #fff; border: 2px solid; border-radius: 50%; width: 50px; height: 50px; text-align: center; position: absolute; bottom: 3vh; left: 50%; transform: translateX(-50%); } .btn-scroll-down:hover { color: #fff; background-color: rgba(255,255,255,0.4); } #blade-1 { z-index: 2; } .lenovo-pegasus-paragraph-1-5em { font-size: 1.5rem; line-height: 2rem; } .lenovo-pegasus-paragraph { font-size: 1.125rem; line-height: 1.75rem; } @media (max-width: 768px) { .lenovo-pegasus-paragraph { font-size: 1.25rem; line-height: 1.75rem; } } header, section { background: transparent; } div.random { height: 100vh; display: block; background: #fff; } .box-shadow { background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 33%, rgba(255,255,255,0) 50%); } #feature-8-slide-1 img, #feature-8-slide-2 img, #feature-8-slide-3 img { width: 95vw; } @media (max-width: 640px) { #feature-8-slide-1 img, #feature-8-slide-2 img, #feature-8-slide-3 img { width: 200%; } } #feature-8-slide-1, #feature-8-slide-2, #feature-8-slide-3 { position: absolute; bottom: 0; } .w-10 { width: 10%; } .w-45 { width: 45%; } a.link-info { text-decoration: none; color: #0d5c91; } a.link-info:hover { color: #0d5c91; opacity: .8; } .limit-table-height { max-height: 75vh; overflow: hidden; position: relative; transition: all 1s ease; } .limit-table-height.open { max-height: 10000px; } .control-after::after { background: linear-gradient(0deg, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%); content: ""; height: 100px; position: absolute; top: calc(75vh - 100px); width: -webkit-fill-available; } .pl-3 { padding-left: 3%; } .pr-3 { padding-right: 3%; } @media (max-width: 600px) { .black-on-sm { color: #000  !important; } } .img-wrapper { display: none; background: #000; transition: opacity .3s; -webkit-transition: opacity .3s; } .item-fade { vertical-align: top; } .lenovo-pegasus-snap{ position: relative; z-index: 1; } #masthead.topbar{ position: fixed; top: 0; left: 0; width: 100%; padding: 24px 30px; background-color: #f2f2f2; z-index: 999; display: flex; align-items: center; justify-content: space-between; } #masthead.topbar .topbar-actions{ display: flex; align-items: center; } #masthead.topbar .btn{ margin: 0; } #masthead.topbar .btn.btn-scroll-up{ margin-left: 50px; } .btn-scroll-up { color: #000; border: 2px solid; border-radius: 50%; width: 45px; height: 45px; text-align: center; display: inline-flex; align-items: center; justify-content: center; } .btn-scroll-up:hover { color: #000; background-color: rgba(0,0,0,0.4); } .btn-scroll-up svg{ transform: rotate(180deg); font-size: 24px; } #pageMenu ul{ margin: 0; padding: 0; list-style: none; } #pageMenu ul li{ display: inline-block; } #pageMenu ul li a{ text-decoration: none; color: #000; font-size: 1rem; line-height: 1.5rem; font-weight: bold; padding: 0 25px; } .section-wrapper{ overflow: hidden; } .parallax-mirror{ z-index: 1  !important; } img.parallax-slider{ margin-top: 0; } .vh-100{ min-height: 100vh ; height: auto  !important; } .vertical-center-content{ display: flex; align-items: center; } .vertical-top-content{ display: flex; align-items: flex-start; } .bg-holder{ width: 100%; height: 100vh; position: absolute; top: 0; left: 0; } .section-active .bg-holder, .elem-leaving-top:not(.elem-above-bottom) .bg-holder{ position: fixed; } h1{ font-size: 2.25rem; line-height: 1.5rem; } h3{ font-size: 2.25rem; line-height: 3rem; } h5{ font-size: 1.125rem; line-height: 1.75rem; } #amd-logo{ position: absolute; top: 50px; right: 80px; } #amd-logo img{ width: 80%; } #blade-1{ min-height: calc(100vh - 128px)  !important; } #blade-2.elem-above-bottom{ top: auto; bottom: 0; } .mobile-only{display: none} #masthead #header__mobile-trigger { width: 30px; height: 30px; position: relative; margin-left: 30px; transform: rotate(0deg); transition: .5s ease-in-out; cursor: pointer; z-index: 11; } #masthead #header__mobile-trigger span { display: block; position: absolute; height: 5px; width: 30px; background: #000; border-radius: 10px; opacity: 1; left: 0; transform: rotate(0deg); transition: .2s ease-in-out; } #masthead #header__mobile-trigger span:first-child { top: 0px; } #masthead #header__mobile-trigger span:nth-child(2), #masthead #header__mobile-trigger span:nth-child(3) { top: 10px; } #masthead #header__mobile-trigger span:nth-child(4) { top: 20px; } #masthead #header__mobile-trigger.open span:first-child { top: 10px; visibility: visible; transform: rotate(45deg); } #masthead #header__mobile-trigger.open span:nth-child(2) { transform: rotate(45deg); } #masthead #header__mobile-trigger.open span:nth-child(3) { transform: rotate(-45deg); } #masthead #header__mobile-trigger.open span:nth-child(4) { top: 10px; visibility: visible; transform: rotate(-45deg); } #masthead #header__mobile-trigger { display: none; text-align: left; float: right; margin-top: 5px; } #masthead #header__mobile-trigger span { display: inline-block; padding: 0; margin: 0; min-width: 30px; cursor: pointer; } #masthead #header__mobile-trigger span i { padding: .8rem 0 0; float: right; display: none; font-size: 1.8rem; line-height: .2rem; min-width: 1.6rem; } #masthead #header__mobile-trigger span.menu_state { display: inline-block; } header.event-header #event-header__nav-mobile-list { position: absolute; z-index: 11; left: 0; right: 0; top: 150px; display: none; } header.event-header #event-header__nav-mobile-list ul { display: none; list-style-type: none; width: 100%; height: auto; padding: 1.5rem 0; margin: 0 auto; background: #efefef; } .content-holder { z-index: 3; margin: auto; } #amd-ryzen--consumer #blade-1 .bg-holder{ background: url("https://static.lenovo.com/ww/campaigns/2022/amd/lenovo-campaign-amd-q4-consumer-hero.jpg"); background-size: cover; background-position: bottom; } #amd-ryzen--consumer #blade-2{ background-image: url('https://static.lenovo.com/ww/campaigns/2022/amd/lenovo-campaign-amd-q4-consumer-blade-2-bkgd.jpg'); } #amd-ryzen--commercial #blade-1 .bg-holder{ background: url("https://static.lenovo.com/ww/campaigns/2022/amd/lenovo-campaign-amd-q4-commercial-hero.jpg"); background-size: cover; background-position: bottom; } #amd-ryzen--commercial #blade-2{ background-image: url('https://static.lenovo.com/ww/campaigns/2022/amd/lenovo-campaign-amd-q4-commercial-blade-2-bkgd.jpg'); } #amd-ryzen--gaming #blade-end { background-image: url('https://static.lenovo.com/ww/campaigns/2022/amd/lenovo-campaign-amd-q4-gaming-feature-5-legion-amd-for-the-win.png'); background-size: cover; background-position: bottom; } #amd-ryzen--gaming #blade-3 { background-image: url('https://static.lenovo.com/ww/campaigns/2022/amd/lenovo-campaign-amd-q4-gaming-feature-2-unmatched.png'); background-size: 90%; background-position: top; } #amd-ryzen--gaming #blade-4 { background-image: url('https://static.lenovo.com/ww/campaigns/2022/amd/lenovo-campaign-amd-q4-gaming-feature-3-unbeatable.png'); background-size: 90%; background-position: right; } #amd-ryzen--gaming #blade-5 { background-image: url('https://static.lenovo.com/ww/campaigns/2022/amd/lenovo-campaign-amd-q4-gaming-feature-4-the-dream-mobile.png'); background-size: 65%; background-position: left; } #amd-ryzen--gaming #blade-1 .bg-holder{ background: url("https://static.lenovo.com/ww/campaigns/2022/amd/lenovo-campaign-amd-q4-gaming-hero.jpg"); background-size: cover; background-position: bottom; } #amd-ryzen--gaming #blade-2-5 .bg-holder{ background: url("https://static.lenovo.com/ww/campaigns/2022/amd/lenovo-campaign-amd-q4-gaming-bkgd.jpg"); background-size: cover; background-position: bottom; } #amd-ryzen--gaming #blade-2-5.elem-above-bottom .bg-holder{ top: auto; bottom: 0; } .top-gradient { width: 100%; height: 20vh; position: absolute; top: 0; background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0)); z-index: -1; } .bot-gradient { width: 100%; height: 20vh; position: absolute; bottom: 0; background: linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0)); z-index: -1; } @media (min-width: 1240px) { nav#pageMenu ul{ display: block  !important; } } @media (max-width: 1240px) { #masthead #header__mobile-trigger{ display: block; } #masthead.topbar .btn.btn-scroll-up{ display: none; } nav#pageMenu { position: absolute; top: 92px; background: #f2f2f2; left: 0; width: 100%; text-align: center; } nav#pageMenu ul{ display: none; margin-bottom: 20px; } nav#pageMenu ul li{ width: 100%; margin: 5px 0; } } @media (max-width: 1024px) { .font-large.lenovo-pegasus-paragraph, .font-large .lenovo-pegasus-paragraph{ font-size: 2rem; line-height: 2.875rem; } .mobile-top-align-content{ align-items: flex-start; } .mobile-bottom-align-content{ align-items: flex-end; } #amd-logo{ top: 30px; right: 30px; } } @media (max-width: 768px) { .desktop-only{display: none} .mobile-only{display: block} #masthead.topbar{ position: relative; } #blade-1 { padding-top: 50px; margin-top: 0px; } .vertical-center-content{ display: flex; align-items: start; } h1{ font-size: 1.5rem; line-height: 1.5rem; } h3{ font-size: 2rem; line-height: 3rem; } .lenovo-pegasus-paragraph-1-5em { font-size: 1.25rem; line-height: 1.75rem; } #amd-logo{ top: 20px; right: 30px; } #amd-logo img{ width: 50%; } .lenovo-pegasus-logo { width: 50%; } #blade-1 .btn-primary{ display: block; margin: 20px auto; } #amd-ryzen--consumer #blade-2{ background-image: url('https://static.lenovo.com/ww/campaigns/2022/amd/lenovo-campaign-amd-q4-consumer-blade-2-bkgd-mobile.jpg'); } #amd-ryzen--commercial #blade-2{ background-image: url('https://static.lenovo.com/ww/campaigns/2022/amd/lenovo-campaign-amd-q4-commercial-blade-2-bkgd-mobile.jpg'); } #amd-ryzen--gaming #blade-end { background-image: url('https://static.lenovo.com/ww/campaigns/2022/amd/lenovo-campaign-amd-q4-gaming-feature-5-legion-amd-for-the-win-mobile.png'); } } @media (max-width: 640px) { #masthead.topbar .btn{ display: none; } .container { width: 90%; } } .btn-primary { color: #fff; background-color: #0d5c91; border: 1px solid #fff; margin: 10px 15px; padding: 8px 18px; height: auto; float: none; } .btn-primary:hover { color: #0d5c91; background-color: #fff; } .box-with-icon { position: relative; display: flex; } .box-with-icon .the-icon { position: absolute; width: 100px; height: 100px; top: -40px; left: 50%; transform: translateX(-50%); border-radius: 50%; padding: 20px; z-index: 1; } #amd-ryzen--consumer #blade-2 .box-with-icon .the-icon { background: #0f5e95; background: linear-gradient(90deg, rgba(15,94,149,1) 0%, rgba(57,136,214,1) 100%); } #amd-ryzen--commercial #blade-2 .box-with-icon .the-icon { background: #e1140a; } #amd-ryzen--gaming #blade-2 .box-with-icon .the-icon { background: #0f5e95; background: linear-gradient(97deg, rgba(199, 83, 0, 1) 0%, rgba(255, 106, 0, 1) 100%); } .box-with-icon .the-icon img{ transition: width 1s; height: 95%; } .box-with-icon .unwind-icon img{ max-width: 100%; } .box-with-icon .the-icon-oversize img{ transition: width 1s; height: 95%; max-width: 95%; } .box-with-icon .box-inner { position: relative; background-color: rgba(0,0,0,0.1); padding: 70px 50px; width: 100%; } #amd-ryzen--commercial .box-with-icon .box-inner { background-color: rgba(255,255,255,0.08); } #amd-ryzen--gaming .box-with-icon .box-inner { background-color: rgba(62, 141, 221, .06); } .amd-box-only { width: 570px; height: 570px; position: relative; } .amd-overlay { background-color: rgba(3, 46, 75, .7); width: 570px; height: 570px; position: relative; } .amd-overlay-content { position: absolute; top: 50%; transform: translateY(-50%); text-align: left; color: #fff; padding: 0 50px; } #amd-ryzen--commercial .amd-overlay { background-color: rgba(0, 0, 0,0.6); } .right-block { width: 100%; overflow: hidden; position: absolute; top: 50%; transform: translateY(-50%); right: 130px; } .left-block { width: 100%; overflow: hidden; position: absolute; top: 50%; transform: translateY(-50%); left: 130px; } #amd-ryzen--gaming .right-block, #amd-ryzen--gaming .left-block { height: auto; } .auto-block { width: 100%; overflow: hidden; height: 100vh; } @media (min-width: 992px) { .full-block { width: 100%; overflow: hidden; height: 100vh; } } @media (min-width: 992px) and (max-width: 1600px) { .amd-box-only { width: 30vw; height: 460px; } .right-block { overflow: unset; right: 80px; } .left-block { overflow: unset; left: 80px; } .amd-box-only .amd-overlay-content { padding: 0; } .auto-block { height: 65vh; } .big-block { height: 75vh; } } @media (max-width: 992px) { .right-block { width: 100%; height: auto; position: relative; max-width: 100%; background-color: #0d5c91; transform: unset; top:0; left:0; } .left-block { width: 100%; height: auto; position: relative; background-color: #0d5c91; transform: unset; max-width: 100%; top:0; left:0; } #amd-ryzen--gaming .right-block, #amd-ryzen--gaming .left-block { background-color: rgba(0, 0, 0, 0); } #amd-ryzen--commercial .right-block, #amd-ryzen--commercial .left-block { background-color: rgba(0, 0, 0,1); } #amd-ryzen--commercial .amd-overlay { background-color: rgba(66, 66, 66,0); } .amd-box-only { width: 100vw; height: 460px; } .amd-overlay { width: 100vw; height: 460px; margin: 0 auto; overflow: hidden; background-color: rgba(66, 66, 66,0); } .amd-overlay-content { text-align: center; } .amd-overlay-content p { text-align: center; } #blade-3, #blade-4, #blade-5, #blade-6, #blade-7, #blade-8 { height: auto; background-size: contain  !important; background-position: top center  !important; } #amd-ryzen--gaming #blade-3, #amd-ryzen--gaming #blade-4, #amd-ryzen--gaming #blade-5 { background: unset; } #amd-ryzen--consumer #blade-1 .bg-holder{ background: url("https://static.lenovo.com/ww/campaigns/2022/amd/lenovo-campaign-amd-q4-consumer-hero-mobile.jpg"); background-size: cover; background-position: bottom; top: unset; bottom: 0; } #amd-ryzen--commercial #blade-1 .bg-holder{ background: url("https://static.lenovo.com/ww/campaigns/2022/amd/lenovo-campaign-amd-q4-commercial-hero-mobile.jpg"); background-size: cover; background-position: bottom; top: unset; bottom: 0; } #amd-ryzen--gaming #blade-1 .bg-holder{ background: url("https://static.lenovo.com/ww/campaigns/2022/amd/lenovo-campaign-amd-q4-gaming-hero-mobile.jpg"); background-size: cover; background-position: bottom; top: unset; bottom: 0; } #amd-ryzen--gaming #blade-2-5 .bg-holder{ background: url("https://static.lenovo.com/ww/campaigns/2022/amd/lenovo-campaign-amd-q4-gaming-bkgd-mobile.jpg"); background-size: cover; } .full-block, .auto-block { width: 100%; overflow: unset; } .auto-block { width: 100%; height: 50vh; overflow: unset; } .big-block { height: 75vh; } } #blade-end .lenovo-pegasus-paragraph{ width: 50vw; margin: 0 auto; } #blade-transfer { min-height: 10vh; height: auto; } #blade-footnotes { background-color: #d9d9d9; } #blade-footnotes .small, #blade-footnotes p, #blade-footnotes b{ color: #000  !important; } #blade-footnotes ol{ padding-left: 13px; } #blade-footnotes ol li{ padding-bottom: 10px; line-height: 1.25em; } @media (max-width: 640px) { .amd-overlay { transform: unset; height: 60vh; } .amd-overlay-content { padding: 0 20px; } .float-end { float: none  !important; margin: 0 auto; } .float-start { float: none  !important; margin: 0 auto; } .auto-block { height: auto; } #blade-end .lenovo-pegasus-paragraph{ width: 90%; margin: 0 auto; } } #blade-2{ padding-top: 80px; padding-bottom: 80px; } #blade-2.elem-above-bottom { top: auto; bottom: 0; } #blade-2 .horizontal-slide{ top: 100vh; opacity: 0; transition: all 1.5s ease; } #blade-2 .horizontal-slide:nth-child(1){ transition: all 1.5s ease; } #blade-2 .horizontal-slide:nth-child(2){ transition: all 2.0s ease; } #blade-2 .horizontal-slide:nth-child(3){ transition: all 2.5s ease; } #blade-2 .in.horizontal-slide{ top: 0; opacity: 1; } .legal { color: #fff; position: absolute; bottom: 20px; font-size: .65rem; text-align: center; width: 100%; padding: 0 20px; } @media screen and (max-width: 767px) { h3 { font-size: 24px  !important; line-height: 34px  !important; } p { font-size: 18px  !important; line-height: 28px  !important; } .lenovo-pegasus-paragraph-1-5em { font-size: 22px  !important; } } .visible{ animation: scaleup 200ms ease-out; } .not-visible{ transform: scale(.5); } @keyframes scaleup{ 0%{ transform: scale(.5); } 100%{ transform: scale(1); } }