body { font-family: "Lato", sans-serif; overflow-x: hidden } .container { width: 90%; max-width: 1800px; margin: 0 auto; padding: 0 } .container.wide { width: 96%; max-width: 1880px } a { text-decoration: none } a.link { color: #3e8ddd; font-size: 22px } a.btn { margin: 0; padding: 10px 50px; font: 16px/19px Lato; color: #fff; display: inline-block; white-space: nowrap; border-radius: 3px } a.btn.btn-blue { background-color: #3e8ddd; font: 20px/24px Lato } a.btn.btn-blue:hover { color: #fff } img, video, iframe { max-width: 100% } * { box-sizing: border-box } [class*="col-"] { float: left; padding: 15px } .col-1-2 { width: 50% } .col-1-3 { width: 33.33% } .row::after { content: ""; clear: both; display: table } .sub-header { font: Bold 36px/48px Lato; letter-spacing: 0px; color: #fff } .sticky-header { position: fixed; top: -68px; left: 0; right: 0; z-index: 999; background: #fff; transition: all 1s ease; box-shadow: 0 0 4px rgba(0, 0, 0, .3) } .sticky-header.show { top: 0 } .sticky-header .left { float: left; width: 100px } .sticky-header .right { float: right; width: 100px } .sticky-header .links { float: left; width: calc(100% - 200px); text-align: center; height: 56px } .overlay-btns .btn:hover { background: #3e8ddd; border: 1px solid #3e8ddd } .sticky-header .btn { float: right; border: 1px solid #3e8ddd; color: #3e8ddd } .sticky-header .links-right { float: right } .sticky-header .link-item { float: left; margin: 8px 0 0 20px } .sticky-header .logo img { display: block; margin: 10px 0 0 } .to-top { float: right; background: #d4d4d4; border-radius: 50%; text-align: center; margin: 12px 0; width: 30px; height: 30px; line-height: 28px; font-size: 16px; color: #fff } #hero-carousel { height: 80vh; background-color: #000 } .overlay-btns .btn { display: inline-flex; align-items: center; background: #00000080; border-radius: 3px; color: #fff; text-decoration: none; transition: all .5s ease; border: 1px solid #fff; text-align: center; margin: 40px 20px; width: 200px; padding: 10px } .overlay-btns .btn:hover { background: #3e8ddd; border: 1px solid #3e8ddd } .overlay-btns .btn span { margin: 0 auto } .carousel-overlay-right-top { position: absolute; top: 20px; right: 20px; height: 90px } .carousel-overlay-right-bottom { position: absolute; bottom: 20px; right: 20px; width: 140px } .carousel-indicators li.active { margin: 1px 8px } .carousel-control-prev, .carousel-control-next { cursor: pointer } h1 { font: Bold 43px/51px Lato } .product-gradient-bg img { display: block } .grey-gradient { float: left; width: 100%; padding: 0 0 20px; background: #414242; background: -moz-linear-gradient(45deg, #414242 0%, #6f7170 100%); background: -webkit-linear-gradient(45deg, #414242 0%, #6f7170 100%); background: linear-gradient(45deg, #414242 0%, #6f7170 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#414242', endColorstr='#6f7170', GradientType=1) } .thinkpad-slider-main { margin-top: 60px } p.slim { max-width: 50em; margin: 0 auto } .thinkpad-slider-section { outline: 0 } .thinkpad-slider-section .thinkpad-slider-section__heading { margin: .83em 0 } .thinkpad-slider-section__vid-nav p.button-text { margin: 0; padding: 0 0 10px } #shop-products { clear: both; padding: 0 0 40px } h2#shop-products { font: Bold 54px/65px Lato; color: #000; text-align: center } .featured-thinkpads { padding-top: 60px } .featured-think-pad-wrapper { background: #f9f8f8; text-align: center; height: 100%; padding-bottom: 20px; position: relative } .featured-thinkpads.row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px } .featured-thinkpads.row .col-1-3 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% } .featured-thinkpad-image { position: relative } .featured-thinkpad-image>img { width: 100% } .featured-thinkpad-image .info-overlay { position: absolute; top: 20px; left: 0; background: #e1140a; font: Bold 14px/17px Lato; letter-spacing: 1.4px; color: #fff; padding: 5px 15px } .featured-thinkpad-content-wrap { padding: 40px 40px 60px } h3.featured-thinkpad-product-title { font: Bold 36px/44px Lato; letter-spacing: 0px; color: #3e8ddd; margin: 10px 0 } .featured-thinkpad-info-small { font: 16px/19px Lato } .featured-thinkpad-price { font: Bold 22px/27px Lato; margin: 5px 0 15px } .featured-thinkpad-features ul { text-align: left; font: 18px/22px Lato; margin-bottom: 40px } .featured-thinkpad-features ul li { margin-bottom: 5px } .featured-think-pad-wrapper .content-overlay { text-align: left; color: #fff; padding: 60px 40px 100px } .featured-think-pad-wrapper .content-overlay .product-logo { float: left; width: 100%; margin-bottom: 20px } .featured-think-pad-wrapper .content-overlay .product-logo img { float: left; max-width: 70% } .featured-think-pad-wrapper .content-overlay .product-logo span { float: left; font: 34px/31px Gotham; font-weight: 300; letter-spacing: -0.14px; margin: 0 0 0 10px } .featured-think-pad-wrapper .disclaimer { font: 13px/16px Lato Light; margin-bottom: 20px } .featured-thinkpad-image-fullsize { padding-bottom: 0 } .featured-thinkpad-image-fullsize .featured-thinkpad-image { height: 100%; background-size: cover; background-position: 50% 50% } .featured-thinkpad-image-fullsize .featured-thinkpad-image:after { content: ""; display: block; padding-bottom: 68% } a.featured-thinkpad-product-btn { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%) } a.featured-thinkpad-product-btn.overlay-btn { left: 0; transform: translateX(40px) } .think-family { min-height: 35vw; color: #fff; background-image: url(https://p3-ofp.static.pub/ShareResource/thinkpad/Imgs/lenovo-laptop-thinkpad-series-fe.jpg); background-color: #000; background-size: cover; background-position: 50% 50%; display: flex; align-items: center; position: relative } .think-family .container { position: relative } .think-family-content { padding: 5em 0 } .think-family h2 { font: Bold 54px/65px Lato } .think-family p { font: 16px/26px Lato; max-width: 28em } .think-family .btn { margin-top: 25px } .lights-bg, .product-gradient-bg { position: absolute; left: 0; width: 100% } .lights-bg { top: 0; background-size: cover; background-position: 50% 0; background-repeat: no-repeat; width: 100%; height: 180px } .product-gradient-bg { bottom: 0; background-image: url(https://p1-ofp.static.pub/ShareResource/thinkpad/Imgs/lenovo-think-homepage-feature-123.png); background-position: 50% 100%; background-repeat: no-repeat; background-size: cover; width: 100%; height: 600px } .fp-row[data-code="viewall-think-laptops"], .fp-row[data-code="viewall-thinkpad-laptops"] { display: none } .fp-wrapper .fp-row.securedCoreWrapper .securedCore-logo { width: 150px } .fp-wrapper .fp-row.securedCoreWrapper h2 { font: Bold 38px/46px Lato; margin: 10px 0 } .fp-wrapper .fp-row.securedCoreWrapper h3 { font: Bold 23px/28px Lato } .fp-row.thinkShieldWrapper { padding: 40px 0 100px } .fp-row.thinkShieldWrapper h2.thinkShield-title { font: Bold 54px/65px Lato } .fp-row.securedCoreWrapper .btn { margin: 40px 0 } .nav-icon { display: none; float: left; margin: 15px 30px 0 30px; width: 40px } .nav-icon:after, .nav-icon:before, .nav-icon div { background-color: #707070; content: ""; display: block; height: 3px; transition: all .2s ease-in-out } .nav-icon div { margin: 9px 0 } .nav-icon.open:before { transform: translateY(12px) rotate(135deg) } .nav-icon.open:after { transform: translateY(-12px) rotate(-135deg) } .nav-icon.open div { transform: scale(0) } .mobile-only { display: none } .tablet-only { display: none } .nav .main_Menu span { color: #fff } .main_Menu_icon .line { background: #fff } @media only screen and (min-width:76.75em) { .masthead .pageWrapper { position: relative } } @media only screen and (max-width:1180px) { .carousel-overlay-right-top { top: 70px } } @media only screen and (max-width:1024px) { .tablet-only { display: block } .carousel-overlay img { max-width: 40%; margin-bottom: 10px } .overlay-btns .btn { margin: 20px 20px 0 } .sub-header { margin-top: 0 } .product-gradient-bg { height: 380px } .sticky-header a.btn { padding: 10px 15px } .featured-thinkpad-image-fullsize .featured-thinkpad-image:after { padding-bottom: 30% } .featured-thinkpads.row .col-1-3 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .featured-thinkpads.row .col-1-3:first-child { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .featured-thinkpads.row .col-extra { margin: 0 auto } .featured-thinkpad-image-fullsize .content-overlay { max-width: 500px } .think-family { background-image: none; min-height: 85vw } .think-family h2 { font: Bold 48px/57px Lato } .think-family img { display: block } .fp-wrapper .fp-row.securedCoreWrapper { background-image: url(https://p1-ofp.static.pub/ShareResource/thinkpad/Imgs/lenovo-laptop-thinkpad-series-fe123.jpg); background-size: cover; padding: 60px 40px 20px } .fp-wrapper .fp-row.securedCoreWrapper .securedCoreContent { width: 60% } .fp-wrapper .fp-row.thinkShieldWrapper { background-image: url(https://p2-ofp.static.pub/ShareResource/thinkpad/Imgs/lenovo-laptop-thinkpad-series-fe456.jpg); background-size: cover; min-height: 85vw } .fp-wrapper .fp-row.thinkShieldWrapper .thinkShieldContent { width: 100% } .fp-wrapper .fp-row.thinkShieldWrapper h2.thinkShield-title { font: Bold 48px/57px Lato } } @media only screen and (max-width:768px) { .container.wide { width: 100% } .nav-icon { display: block } .logo-holder img { max-height: 30px } .sticky-header .links { width: 100%; height: auto; position: absolute; top: 52px; left: 0; background: #fff; transition: all 1s ease; overflow: hidden; max-height: 0 } .sticky-header .links.open { max-height: 100px } .sticky-header .links .link-item { width: 100%; float: left; display: block; background: #fff; margin: 0; border-top: 1px solid #707070 } .sticky-header .links .link-item a { width: 100%; height: 46px; border: 0; text-align: left; padding: 15px 25px } .sticky-header .links .link-item span { line-height: 46px } .sticky-header .links-right { width: 100%; float: left } .to-top { margin-right: 30px } .carousel-overlay-right-top { display: none } .thinkpad-slider-section .thinkpad-slider-section__heading { font: Bold 48px/57px Lato } } @media only screen and (max-width:640px) { .mobile-only { display: block } .desktop-only { display: none } .nav-icon { margin: 15px 20px 0 20px } .to-top { margin-right: 20px } .sub-header { font-size: 24px } #hero-carousel { height: 70vh } .featured-thinkpad { margin-bottom: 40px } .featured-thinkpad-image-fullsize .featured-thinkpad-image:after { padding-bottom: 65% } .featured-thinkpads.row .col-1-3 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .think-family { display: block } .think-family .product-gradient-bg { display: none } .think-family-content { text-align: center; padding-bottom: 0 } .think-family-content p { max-width: 100% } .fp-wrapper .fp-row.securedCoreWrapper { background: 0 } .fp-wrapper .fp-row.securedCoreWrapper .securedCore-logo { margin: 0 auto } .fp-wrapper .fp-row.securedCoreWrapper .securedCoreContent { color: #000; text-align: center; width: 100% } .fp-wrapper .fp-row.securedCoreWrapper .securedCoreContent p { color: #000 } .fp-wrapper .fp-row.thinkShieldWrapper { background: 0; min-height: 0 } .fp-wrapper .fp-row.thinkShieldWrapper .thinkShieldContent { text-align: center } .fp-wrapper .fp-row.thinkShieldWrapper .thinkShieldContent .thinkShield-logo { margin: 0 auto } .fp-wrapper .fp-row.thinkShieldWrapper .thinkShieldContent .thinkShield-title, .fp-wrapper .fp-row.thinkShieldWrapper .thinkShieldContent p.white { color: #000 } } .brandCampaign .fp-row .accessories-section { background: #fff; padding: 60px 0 } .brand-feature-stack-wrapper, .brandCampaign .fp-row .viewAll { background: #fff }