body { box-sizing: border-box; } .bottomStickyDock { display: none  !important; } #blade-1 { background: #11184f; font-family: "Montserrat", sans-serif; color: #fff; height: auto; width: 100%; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; text-align: center; } .hero-content { position: relative; text-align: center; max-width: 1760px; color: #fff; margin: auto; } .blade-1-content { flex-direction: column; width: 100%; } #GtapLegiongo p { max-width: 1700px; } .bg-container-page-nav-bar { width: 100%; cursor: pointer; height: 10%; align-items: center; display: flex; text-align-last: justify; min-height: 80px; text-decoration: #c9d0f0; margin: 40px 1% 0 1%; } .blade-1-logos-container { margin: 2em; justify-content: center; } #GtapLegiongo nav ul { list-style-type: none; margin: 0 20%; padding: 0; width: 100%; } #GtapLegiongo nav ul li { display: inline-block; margin-right: 10%; } #GtapLegiongo nav ul li a { color: #fff; text-decoration: none; } #GtapLegiongo nav ul li a:hover { font-weight: bold; } .blade-1-content h2 { font-size: 48px; font-weight: 600; letter-spacing: -0.67px; margin-bottom: 1%; } .h-carousel-2 { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 85%; } @media (min-width:500px) and (max-width:1200px) { .h-carousel-2-nav-tab { padding: 20px; font-size: 10px; margin: 0; } .specs-list li { padding: 5%; } .card-container { display: block } } @media (max-width: 500px) { .blade-3-carousel { height: auto; } .blade-3-content-2 { padding: 0 4%; } .nav-arrow-controls { width: 110%; } .legion-go-bg-video-content-inner { height: auto; } #blade-1 .video-container { height: 300px; } .blade-3-title-1 h2 { text-align: -webkit-center; } .specs-list li { padding: 5%; } .video-container-2 { height: 400px; } .blade-1-content h2 { font-size: 30px; } .blade-1-logos-container { display: block; } .blade-2-content h2 { font-size: 30px; } .blade-3 { padding: 10%; } .blade-3-title-1 h2 { font-size: 30px; text-align-last: center; padding: 5%; } .h-carousel-2 { width: 100%; } .h-carousel-2-prev-btn, .h-carousel-2-next-btn { padding: 5px  !important; } .h-carousel-2-prev-btn.nav-prev-btn, .h-carousel-2-next-btn.nav-next-btn { height: 10px; } .h-carousel-2-nav-tab { padding: 8px; text-align: center; font-size: 10px; margin: 0; } .nav-arrow-controls { width: 100%; } .card-container { display: block; } .overlay-image-container { height: auto; } .overlay-image-2 { height: auto; width: 100%; } .modal-content { width: 95%; aspect-ratio: 16/9; height: auto; padding: 5px 5px 0 5px; } .blade-4-content { max-width: 1760px; padding: 10%; } .blade-4-content img { height: auto } .blade-4-content h2 { font-size: 30px; } .card { display: block; } .card p { margin: 5% 1%; } .card-container img { width: auto; } #blade-3 { padding: 20% 0 4% 0; } #blade-4 { height: auto; } } #GtapLegiongo .card { flex: 0 0 100%; color: #fff; flex-direction: column; justify-content: center; width: 100%; } .video-container { position: relative; overflow: hidden; width: 100%; } .legion-go-bg-video-content-inner { position: absolute; top: 0; left: 0; width: 100%; object-fit: cover; } .blade-1-content { position: relative; z-index: 1; color: #fff; display: flex; justify-content: center; align-items: center; } .overlay-image-2 { object-fit: cover; border-radius: 6px; } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 4px 8px rgba(0, 0, 0, .1); border-radius: 4px; } .h-carousel-2-nav-tab { cursor: pointer; display: flex; align-items: center; width: 20%; justify-content: center; position: relative; } @media (min-width: 500px) { .blade-3-carousel { height: 818px; } .nav-arrow-controls { width: 95%; } .legion-go-bg-video-content-inner { height: 100%; } #blade-1 .video-container { height: 1100px; } .h-carousel-2-nav-tab { margin: 0; } .specs-list li { padding: 10%; } .video-container-2 { height: 738px; } .blade-1-logos-container { display: inline-block; } .overlay-image-2 { height: auto; width: 60%; min-width: 500px; } .modal-content { width: 1200px; height: 675px; } .h-carousel-2-nav-tab { margin: 0 10px; padding: 1.2em; font-size: 18px; } .card-container { display: flex; } #GtapLegiongo .card { display: flex; flex-direction: column; justify-content: center; } .specs-list li { font-size: 18px; } #GtapLegiongo .card p { margin: 3% 1%; } .blade-3-title-1 h2 { font-size: 48px; } #blade-3 { padding-top: 5%; } .h-carousel-2-prev-btn.nav-prev-btn, .h-carousel-2-next-btn.nav-next-btn { height: 20px; } #blade-4 { height: 1400px; } } .blade-1-logos-container img { vertical-align: middle; margin: 1em; } #blade-2 { background-image: url("https://p1-ofp.static.pub/ShareResource/ww/landing-pages/legion-go-splash/img/lenovo-legion-go-splash-bg-img-multi-mode-blade.94f710309fc34453.png"); background-repeat: no-repeat; background-position: center; background-size: cover; height: 1100px; color: #fff; font-family: "Montserrat", sans-serif; position: relative; display: flex; width: 100%; flex-direction: column; justify-content: flex-start; align-items: center; padding: 4%; } .blade-2-content { max-width: 1700px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .blade-2-content h2 { font-size: 48px; font-weight: 600; letter-spacing: -0.67px; } .blade-2-content p { font-size: 18px; font-weight: normal; letter-spacing: -0.27px; margin-top: 30px; margin-bottom: 100px; width: fit-content; } .h-carousel-1 { display: flex; justify-content: center; align-items: center; height: 100%; } .h-carousel-1-container { display: flex; justify-content: center; align-items: center; height: 646px; width: 100%; max-width: 1700px; position: absolute; overflow: hidden; } .h-carousel-1-carousel-inner { display: flex; justify-content: center; align-items: center; overflow: hidden; width: 100%; max-width: 800px; } .h-carousel-1-carousel-item { transition: transform .6s ease-in-out; position: absolute; } .h-carousel-1-carousel-item img { max-width: 100%; max-height: 100%; display: block; margin: 15px; } .h-carousel-1-carousel-item .carousel-img-text { font-size: 28px; font-weight: 600; position: absolute; left: 5%; bottom: 10%; } .h-carousel-1-control-prev, .h-carousel-1-control-next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 2rem; cursor: pointer; z-index: 1; } .h-carousel-1-control-prev { left: 0; } .h-carousel-1-control-next { right: 0; } .h-carousel-1-control-prev { z-index: 1; width: 120px; height: 64px; border-radius: 0 50px 50px 0; background-image: none; background: linear-gradient(to right, #1e2428, #333f48); border: 1px solid #38424a; left: -20px; display: flex; align-items: center; justify-content: space-between; box-shadow: 10px 10px 15px -10px #00000080; transition: all .6s  !important; } .h-carousel-1-control-prev:hover { left: -1px; transition: all .6s  !important; } .h-carousel-1-control-prev .lineContainer { margin-left: -3px; } .h-carousel-1-control-prev .lineContainer .lineTotal { display: flex; align-items: center; } .h-carousel-1-control-prev .lineContainer .oneLine { width: 2px; height: 43px; background: #38424a; margin: 0 5px 0 5px; display: inline-block; border-radius: 4px; } .h-carousel-1-control-prev .lineContainer .threeLine { height: 40px; } .h-carousel-1-control-prev .arrow-left { width: 64px; height: 64px; background: url("https://p3-ofp.static.pub/fes/cms/2022/08/30/8bek9z9xytmxsy1uu8o0hw02uw3igb432961.gif") center center; background-size: 60px 60px; background-repeat: no-repeat; transform: rotate(90deg); } .h-carousel-1-control-next { z-index: 1; width: 120px; height: 64px; border-radius: 50px 0 0 50px; background-image: none; background: linear-gradient(to left, #1e2428, #333f48); border: 1px solid #38424a; right: -20px; display: flex; align-items: center; flex-direction: row-reverse; justify-content: space-between; box-shadow: 10px 10px 15px -10px #00000080; transition: all .6s  !important; } .h-carousel-1-control-next:hover { right: -1px; transition: all .6s  !important; } .h-carousel-1-control-next .lineContainer { margin-right: -3px; } .h-carousel-1-control-next .lineContainer .lineTotal { display: flex; align-items: center; flex-direction: row-reverse; } .h-carousel-1-control-next .lineContainer .oneLine { width: 2px; height: 43px; background: #38424a; margin: 0px; margin: 0 5px 0 5px; display: inline-block; border-radius: 4px; } .h-carousel-1-control-next .lineContainer .threeLine { height: 40px; } .h-carousel-1-control-next .arrow-right { width: 64px; height: 64px; background: url("https://p3-ofp.static.pub/fes/cms/2022/08/30/8bek9z9xytmxsy1uu8o0hw02uw3igb432961.gif") center center; background-size: 60px 60px; background-repeat: no-repeat; transform: rotate(-90deg); } #blade-3 { background-image: url("https://p3-ofp.static.pub/ShareResource/ww/landing-pages/legion-go-splash/img/lenovo-legion-go-splash-bg-img-performance-and-control-blades.7b31da03856bb22a.png"); background-repeat: no-repeat; background-position: center; font-family: "Montserrat", sans-serif; background-size: cover; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; color: #fff; } .blade-3-title-2 { margin-top: 45px; font-size: 50px; font-weight: 600; letter-spacing: -1.5px; } .blade-3-para { font-size: 18px; font-weight: normal; width: fit-content; margin-top: 30px; margin-bottom: 30px; } .blade-3-title-1 h2 { font-weight: 600; letter-spacing: -0.67px; margin-bottom: 80px; } .blade-3-carousel { overflow: hidden; position: relative; width: inherit; margin: 0 auto; } .blade-3-carousel-container { display: flex; transition: transform .3s ease-in-out; width: 100%; } .card p { padding: 0 4.5%; padding: 0 4.5%; font-size: 18px; font-weight: normal; letter-spacing: -0.27px; width: fit-content; } .card-container { margin: 0 auto; padding: 1% 0; background-color: rgba(0, 0, 0, .5); justify-content: center; width: 90%; } @media (max-width: 1700px) { .specs-list li { font-size: 10px; } } .blured-background { width: 100%; display: flex; } .specs-list li { display: flex; align-items: center; font-weight: normal; letter-spacing: -0.27px; } .card-container ul { list-style: none; } .card:nth-of-type(1) { background-image: url("https://p2-ofp.static.pub/ShareResource/ww/landing-pages/legion-go-splash/img/lenovo-legion-go-splash-carousel-slide-display-backgound-image.99bb84613c072726.png"); background-repeat: no-repeat; background-position: center; background-size: cover; } .card:nth-of-type(2) { background-image: url("https://p2-ofp.static.pub/ShareResource/ww/landing-pages/legion-go-splash/img/lenovo-legion-go-splash-carousel-slide-processor-bg-image.png"); background-repeat: no-repeat; background-position: center; background-size: cover; } .card:nth-of-type(3) { background-image: url("https://p1-ofp.static.pub/ShareResource/ww/landing-pages/legion-go-splash/img/lenovo-legion-go-splash-carousel-slide-thermals-background-image.1424b9ef6753b989.png"); background-repeat: no-repeat; background-position: center; background-size: cover; } .card:nth-of-type(4) { background-image: url("https://p1-ofp.static.pub/ShareResource/ww/landing-pages/legion-go-splash/img/lenovo-legion-go-splash-carousel-slide-memory-background-image.dce9c2353acff633.png"); background-repeat: no-repeat; background-position: center; background-size: cover; } .card:nth-of-type(5) { background-image: url("https://p1-ofp.static.pub/ShareResource/ww/landing-pages/legion-go-splash/img/lenovo-legion-go-splash-carousel-slide-battery-background-image.ced6df646ea00041.png"); background-repeat: no-repeat; background-position: center; background-size: cover; } .nav-arrow-controls { display: flex; justify-content: space-between; background: #000; color: #faeceb; } .nav-arrow-carousel-controls { width: 10%; display: flex; justify-content: space-around; align-items: center; } .h-carousel-2-nav-tabs { display: flex; justify-content: center; width: 90%; } .h-carousel-2-nav-tab.active { font-weight: bold; } .h-carousel-2-nav-tab.active::after { content: ""; position: absolute; bottom: 0; width: 100%; height: 3px; background-image: linear-gradient(to right, transparent, transparent), url("https://p1-ofp.static.pub/ShareResource/ww/landing-pages/legion-go-splash/img/lenovo-legion-go-splash-performance-carousel-slides-nav-button.7a79b0ac4fcf4c43.png"); background-size: 100% 100%; background-repeat: no-repeat; animation: zoominContent .4s ease-in-out forwards; } @keyframes zoominContent { to { opacity: 1; transform: scale(1); } } .blade-3-carousel-controls { display: flex; justify-content: space-between; align-items: center; width: 100%; position: absolute; top: 50%; translate: transform; transform: translate(-0%, -50%); } .h-carousel-2-prev-btn, .h-carousel-2-next-btn { cursor: pointer; padding: 5px 10px; border: none; display: flex; justify-content: center; align-items: center; background: transparent; width: 50px; height: 50px; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } .h-carousel-2-prev-btn { left: 2%; } .h-carousel-2-next-btn { right: 2%; } .h-carousel-2-prev-btn, .h-carousel-2-prev-btn.nav-prev-btn { background-image: url("https://p2-ofp.static.pub/ShareResource/ww/landing-pages/legion-go-splash/img/lenovo-legion-go-splash-peformance-carousel-slides-arrow-left.a7ca292764630c1e.png"); } .h-carousel-2-next-btn, .h-carousel-2-next-btn.nav-next-btn { background-image: url("https://p2-ofp.static.pub/ShareResource/ww/landing-pages/legion-go-splash/img/lenovo-legion-go-splash-peformance-carousel-slides-arrow-right.png"); } .h-carousel-2-prev-btn.nav-prev-btn, .h-carousel-2-next-btn.nav-next-btn { width: 20px; } .dots { display: flex; justify-content: center; margin-top: 30px; } .dot { width: 10px; height: 10px; background-color: #aaa; border-radius: 50%; margin: 0 5px; cursor: pointer; } .dot.active { background-color: #333; } .blade-3-content-2 { max-width: 1760px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .video-container-2 { position: relative; width: 100%; margin: auto; } .play-button { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; z-index: 2; } .overlay-image-container { position: absolute; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; cursor: pointer; z-index: 10; } .overlay-image { width: 100px; height: 100px; object-fit: contain; position: absolute; } .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .8); z-index: 1000; } .close { position: absolute; top: 10px; right: 10px; font-size: 24px; cursor: pointer; color: #fff; } #videoFrame { width: 100%; height: 100%; border: none; } #blade-4 { background-image: url("https://p3-ofp.static.pub/ShareResource/ww/landing-pages/legion-go-splash/img/lenovo-legion-go-splash-bg-img-software-blade.0cb87c94ec99d35d.png"); background-repeat: no-repeat; background-position: center; background-size: cover; font-family: "Montserrat", sans-serif; width: 100%; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; } .blade-4-content { max-width: 1760px; } .blade-4-content h2 { font-size: 48px; font-weight: 600; letter-spacing: -0.67px; } .blade-4-para { font-size: 18px; margin-bottom: 80px; margin-top: 30px; font-weight: normal; width: fit-content; } .blade-4-content img { width: 100%; } #blade-5 { background-image: url("https://p3-ofp.static.pub/ShareResource/ww/landing-pages/legion-go-splash/img/lenovo-legion-go-splash-bg-img-notify-me-blade.7955a9ac936adc55.png"); background-repeat: no-repeat; background-position: center; background-size: cover; font-family: "Montserrat", sans-serif; height: 946px; width: 100%; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; } .blade-5-content { max-width: 1760px; } .hero-lenovo-logo { width: 200px; height: 75px; margin: 30px; } iframe { width: 100%; height: 100%; } #iFrame_responsive { border: none; box-sizing: border-box; min-width: 280px; max-width: 1920px; display: block; width: 1300px; } @media (max-width: 1300px) { #iFrame_responsive { width: 780px; } } @media (max-width: 799px) { #iFrame_responsive { width: 100%; } } .bg-notify-me-banner { background-color: #b8252e; color: #fff; font-size: 24px; } .v1979_v2 { background-image: url("https://p2-ofp.static.pub/ShareResource/ww/landing-pages/legion-go-splash/img/lenovo-legion-go-splash-hero-go-device-large.0e90dd214bfabe7b.png")  !important }