*, :after, :before { margin: 0; padding: 0; box-sizing: inherit } *, :after, :before, body { box-sizing: border-box } body { overflow-x: hidden; font-family: Lato, sans-serif; font-weight: 400; line-height: 1.7; background: #fff } ::-moz-selection { background-color: #3e8ddd; color: #fff } ::selection { background-color: #3e8ddd; color: #fff } .yoga-content-wrapper { font-size: 62.5% } @media only screen and (max-width:575px) { .yoga-content-wrapper { font-size: 50% } } @media only screen and (max-width:768px) { .yoga-content-wrapper { font-size: 56.25% } } @media only screen and (max-width:991px) { .yoga-content-wrapper { font-size: 60% } } @media only screen and (max-width:1199px) { .yoga-content-wrapper { font-size: 70% } } @media only screen and (min-width:1400px) { .yoga-content-wrapper { font-size: 75% } } @media (min-width:1000px) and (max-height:650px) { .yoga-content-wrapper { font-size: 62.5% } } div#call-chat { display: none  !important } .yoga-content-wrapper { max-width: 1920px; margin: 0 auto } a { color: #979797 } a:hover { text-decoration: none } .nav { display: inherit  !important } a, a:hover { color: #333 } [data-icon]:before { content: none  !important } .white-text { color: #fff; } .yoga-hero { position: relative; margin-top: 5em } .msaMastheadPage .yoga-hero { margin-top: 0 } .yoga-hero__logo-wrap { position: absolute; top: 0; right: 0; margin: 3em 2em 0 0; width: 16em } .yoga-hero__logo-wrap img.yoga-hero__logo-img { height: 100%; width: 100% } .yoga-hero__content-wrap { height: 660px; display: flex; align-items: center; transition: .3s; background: transparent; background-repeat: no-repeat; background-position: top; position: relative; color: #fff; background-size: cover; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .yoga-22-hero__content-wrap { background-position: center; } .yoga-hero__content-wrap .yoga-hero__text-box { width: 60%; text-align: center; z-index: 10; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); padding: 1.5em } .yoga-hero__content-wrap .yoga-hero__text-box .yoga-hero__btn { display: inline-flex; align-items: center; background: transparent; background-color: rgba(0, 0, 0, .3); border-radius: 3px; height: 3.5em; padding: 0 1.5em; color: #fff; text-decoration: none; transition: .2s; will-change: transform; font-size: 1.4em; margin: 0 1em; text-transform: capitalize; border: 1px solid #fff } .yoga-hero__content-wrap .yoga-hero__text-box .yoga-hero__btn:hover { background: #3e8ddd; border: 1px solid #3e8ddd } .yoga-hero__content-wrap .yoga-hero__text-box .yoga-hero__btn:active { box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1) } .yoga-hero__yoga-logo-img { width: 75% } .yoga-hero__yoga-logo-wrap { width: 60%; margin: 0 auto 4em } .yoga-hero__heading { font-size: 2.2em; margin: 2.5em 0; font-weight: 400; letter-spacing: .1em; color: #fff } .yoga-hero__vid-text { position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 1.4em } @media only screen and (max-width:991px) { .yoga-hero__content-wrap { height: 90vh; background-attachment: unset; background-position: 25%; } .yoga-hero__content-wrap .yoga-hero__text-box { text-align: center; width: 100%; margin-left: 0; top: 50% } .yoga-hero__content-wrap .yoga-hero__text-box .yoga-hero__primary-main { font-size: 2.5em; letter-spacing: .1em; line-height: 4.5em } } @media only screen and (max-width:768px) { .yoga-hero__content-wrap .yoga-hero__text-box .yoga-hero__primary-main { letter-spacing: .1em; line-height: 3.3em; padding: 0 .5em } .yoga-hero__content-wrap .yoga-hero__text-box .yoga-hero__heading { font-size: 2em; width: 80%; margin: 0 auto 2.5em } .yoga-hero__content-wrap .yoga-hero__text-box .yoga-hero__btn { padding: 0 1em } .yoga-hero__content-wrap .yoga-hero__text-box .yoga-hero__btn:nth-child(2),.yoga-hero__content-wrap .yoga-hero__text-box .yoga-hero__btn:nth-child(3) { margin-top: 1em } .yoga-hero__logo-wrap { display: none } } @media only screen and (max-width:575px) { .yoga-hero__yoga-logo-img { width: 90% } .yoga-hero__heading { font-size: 1.5em } } .yoga-slider-main .slick-slide, .yoga-slider-main .slick-slide:before { -webkit-backface-visibility: hidden; backface-visibility: hidden } .yoga-slider-section__slider-1, .yoga-slider-section__slider-2, .yoga-slider-section__slider-3, .yoga-slider-section__slider-4 { position: relative; width: 100%; height: 100%; min-height: 8vw; margin-bottom: 0; opacity: 0; visibility: hidden; transition: all 1.2s ease } .yoga-slider-section__slider-1.slick-initialized, .yoga-slider-section__slider-2.slick-initialized, .yoga-slider-section__slider-3.slick-initialized, .yoga-slider-section__slider-4.slick-initialized { opacity: 1; visibility: visible } .yoga-slider-main .slick-slide { position: relative; height: 60em; overflow: hidden } .yoga-slider-main .slick-slide:before { z-index: 1 } .yoga-slider-main .slick-slide video { display: block; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; min-width: 100%; min-height: 100%; visibility: visible } .yoga-slider-main .slick-slide iframe { position: relative; pointer-events: none } .yoga-slider-main .slick-slide figure { position: relative; height: 100% } .yoga-slider-main .slick-slide .slide-image { opacity: 0; height: 100%; background-size: cover; background-position: 50%; transition: all .8s ease } .yoga-slider-main .slick-slide .slide-image.show { opacity: 1 } .yoga-slider-main .slick-slide .image-entity { width: 100%; opacity: 0; visibility: hidden } .yoga-slider-main .slick-slide .loading { position: absolute; top: 44%; left: 0; width: 100% } .yoga-slider-main .slick-slide.slick-active { z-index: 1 } .yoga-slider-main .slick-slide.slick-active .caption { opacity: 1 } .slick-dots { text-align: right; padding-top: 15px; margin-bottom: .5em } .slick-dots li { display: inline-block; vertical-align: top; width: 17%; text-align: center; margin: 0 4%  !important; } .slick-dots .slider-nav-icon { cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 0 0 transparent; vertical-align: middle; color: #fff; background-color: #fff; transition: all .3s ease } .slick-dots .slider-nav-icon:focus { outline: none } .slick-dots .slider-nav-icon:hover { opacity: 1 } .slick-dots.slick-active .slider-nav-icon { box-shadow: 0 0 0 2px #fff; opacity: 1 } .container { background-color: #f2f2f2; color: #444; line-height: 1.6; padding: 40px 0 } .container .content { width: 90%; max-width: 980px; margin: 0 auto } .container p { margin-bottom: 40px } @-webkit-keyframes slideIn { 0% { -webkit-filter: blur(15px); filter: blur(15px) } to { -webkit-filter: blur(0); filter: blur(0) } } @keyframes slideIn { 0% { -webkit-filter: blur(15px); filter: blur(15px) } to { -webkit-filter: blur(0); filter: blur(0) } } @-webkit-keyframes slideOut { 0% { -webkit-filter: blur(0); filter: blur(0) } to { -webkit-filter: blur(15px); filter: blur(15px) } } @keyframes slideOut { 0% { -webkit-filter: blur(0); filter: blur(0) } to { -webkit-filter: blur(15px); filter: blur(15px) } } .slick-dots li .slider-nav-icon { background-size: 45px 45px; width: auto; height: 45px; background-position: 50%; display: block; float: none; margin: 0 auto; padding: 0; border: unset; background: unset; font-family: unset; font-size: unset; line-height: unset; text-decoration: none; font-weight: unset; color: unset; cursor: pointer; text-align: center } .slick-dots li.slick-active .slider-nav-icon { background-size: 45px 45px; width: auto; height: 45px; background-position: 50% } .yoga-slider-section__slider-1, .yoga-slider-section__slider-2, .yoga-slider-section__slider-3, .yoga-slider-section__slider-4 { padding: 4em 8em 0 } .yoga-slider-section__slider-content { padding: 1.5em 8em } .yoga-slider-section__slider-desc { width: 40%; float: left; padding: 1em 0 3em 1em; position: relative } .yoga-slider-section__slider-desc .yoga-slider-section__slider-heading { font-size: 2.2em; line-height: 1em; color: #1f2125; font-weight: 600; margin-bottom: 1.1em } .yoga-slider-section__slider-desc .yoga-22-slider-section__slider-heading { color: #959595; } .yoga-slider-section__slider-desc .yoga-slider-section__slider-p { line-height: 1.6em; font-size: 1.4em; color: #979797; font-weight: 400 } #dual-display-svg .st0, #soundbar-svg .st0 { fill: none; stroke: #000; stroke-width: 20; stroke-miterlimit: 10 } .yoga-slider-section__vid-nav .slider-nav-icon-wrap svg { fill: #000; transition: fill .2s ease } .yoga-slider-section__vid-nav .active .slider-nav-icon-wrap svg:hover { fill: #eb6a00; } .yoga-slider-section__vid-nav { width: 50%; float: right; margin: 1em 0 0 3em; position: relative } .yoga-slider-section__vid-nav .slider-nav-icon-wrap:hover p { color: #eb6a00 } .yoga-slider-section__vid-nav .slider-nav-icon-wrap:hover svg { fill: #eb6a00 } .yoga-slider-section__vid-nav .slider-nav-icon-wrap:hover img { transition-duration: .2s; -ms-filter: invert(66%) sepia(89%) saturate(5037%) hue-rotate(4deg) brightness(95%) contrast(101%); filter: invert(66%) sepia(89%) saturate(5037%) hue-rotate(4deg) brightness(95%) contrast(101%); } .yoga-slider-section__vid-nav .slider-nav-icon-wrap:hover #dual-display-svg .st0, .yoga-slider-section__vid-nav .slider-nav-icon-wrap:hover #soundbar-svg .st0 { stroke: #eb6a00 } .yoga-slider-section__vid-nav .slick-active .slider-nav-icon-wrap p { color: #eb6a00 } .yoga-slider-section__vid-nav .slick-active .slider-nav-icon-wrap #dual-display-svg .st0, .yoga-slider-section__vid-nav .slick-active .slider-nav-icon-wrap #soundbar-svg .st0 { stroke: #eb6a00 } .yoga-slider-section__vid-nav .slick-active .slider-nav-icon-wrap svg { fill: #eb6a00 } .yoga-slider-section__vid-nav .slick-active .slider-nav-icon-wrap img { transition-duration: .2s; -ms-filter: invert(66%) sepia(89%) saturate(5037%) hue-rotate(4deg) brightness(95%) contrast(101%); filter: invert(66%) sepia(89%) saturate(5037%) hue-rotate(4deg) brightness(95%) contrast(101%); } .yoga-slider-section__vid-nav p { transition: color .5s cubic-bezier(.215, .61, .355, 1); font-size: 1em; line-height: 1.5em; padding: 1em 0; color: #333; cursor: pointer; margin-bottom: .5em } .video-border, .video-border-2, .video-border-3 { transition: all .2s ease-out 0s; height: 2px; width: 17%; margin: 0 4%; background-color: #eb6a00; bottom: 0; position: absolute } .video-border { left: 49.999%; } .video-border-2, .video-border-3 { left: 0; } .yoga-slider-section__slider-item { visibility: hidden; opacity: 0; transition: visibility 0s, opacity .5s linear; position: absolute; width: 100% } .yoga-slider-section__slider-item--active { visibility: visible; opacity: 1 } .yoga-slider-section { padding: 4em 0 } .yoga-slider-section .yoga-slider-section__heading { font-size: 4em; font-weight: 300; text-align: center; color: #333; text-transform: uppercase; letter-spacing: .1em; } .yoga-slider-section__slider-video::-webkit-media-controls { display: none  !important; pointer-events: none; } @media only screen and (max-width:768px) { .yoga-slider-section .yoga-slider-section__heading { font-size: 3em; width: 80%; margin: 0 auto .5em } .yoga-slider-main .yoga-slider-section__vid-nav { display: none } .yoga-slider-main .yoga-slider-section__slider-1, .yoga-slider-main .yoga-slider-section__slider-2, .yoga-slider-main .yoga-slider-section__slider-3, .yoga-slider-main .yoga-slider-section__slider-4 { padding: 0 } .yoga-slider-main .slick-slide { position: relative; height: 100%; overflow: hidden; height: 35vh; margin: 0 .4em } .yoga-slider-main .slick-slide video { display: block; position: unset; top: unset; left: unset; min-width: 100%; min-height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; height: 35vh; transform: unset; padding: .5em  !important } .yoga-slider-main .slick-slide.slick-active { height: 35vh } .yoga-slider-section__slider-content { padding: 1em 2em; text-align: center; min-height: 150px } .yoga-slider-section__slider-desc-1, .yoga-slider-section__slider-desc-2, .yoga-slider-section__slider-desc-3, .yoga-slider-section__slider-desc-4 { width: 90%; float: none } .yoga-slider-section__slider-desc-1 .yoga-slider-section__slider-heading, .yoga-slider-section__slider-desc-2 .yoga-slider-section__slider-heading, .yoga-slider-section__slider-desc-3 .yoga-slider-section__slider-heading, .yoga-slider-section__slider-desc-4 .yoga-slider-section__slider-heading { font-size: 2.2em; line-height: 2.4em; color: #1f2125; font-weight: 600 } .yoga-slider-section__slider-desc-1 .yoga-slider-section__slider-p, .yoga-slider-section__slider-desc-2 .yoga-slider-section__slider-p, .yoga-slider-section__slider-desc-3 .yoga-slider-section__slider-p, .yoga-slider-section__slider-desc-4 .yoga-slider-section__slider-p { line-height: 2.5em; font-size: 1.6em; color: #333; font-weight: 400 } } .yoga-hero__vid-slide-play, .yoga-hero__vid-slide-play.vid-paused, .yoga-slider-section__icon-set { display: none } @media only screen and (max-width:991px) { .yoga-slider-section__vid-nav { margin: 0; width: 60% } .yoga-slider-section__slider-content { padding: 2em 6em } .yoga-slider-main { padding: 0 6em } .feature-img-section { padding: 5em 6em 6em } .yoga-slider-main { margin: 0 } } @media only screen and (max-width:768px) { .yoga-slider-section { padding: 1em 0 } .yoga-slider-main { padding: 0 } .yoga-hero__vid-slide-play { background: transparent; background-repeat: no-repeat; background-position: 50%; background-size: 13% } .yoga-hero__vid-slide-play, .yoga-hero__vid-slide-play.vid-paused { position: absolute; top: 0; left: 0; display: inline-block; width: 100%; height: 100%; z-index: 2; transition: .2s; cursor: pointer } .yoga-hero__vid-slide-play.vid-paused { background: url(https://static.lenovo.com/ww/campaigns/2019/yoga-brand-v3/icons/play-button.svg); background-repeat: no-repeat; background-position: 50%; background-size: 13% } .yoga-slider-section__slider-content { padding: 1em 2em; text-align: center; min-height: 150px } .yoga-slider-section__vid-nav { display: none } .yoga-slider-section__slider-desc .yoga-slider-section__slider-heading { font-size: 2.4em; line-height: 1.6em; margin-bottom: .5em; color: #1f2125; font-weight: 600 } .yoga-slider-section__slider-desc .yoga-slider-section__slider-p { line-height: 1.8em; font-size: 1.6em } } .yoga-copy-section { padding: 18em 5em 2em; text-align: center } .yoga-22-copy-section { padding: 13em 5em 7em; } .yoga-copy-section .yoga-copy-section__wrap { width: 70%; margin: 0 auto } .yoga-copy-section .yoga-copy-section__wrap .yoga-copy-section__logo { margin-bottom: 3em; width: 50% } .yoga-copy-section .yoga-copy-section__wrap .yoga-copy-section__title { color: #fff; font-size: 4em; font-weight: 300; margin: 1em 0 1em; text-transform: uppercase; letter-spacing: .1em; } .yoga-copy-section .yoga-copy-section__wrap .yoga-copy-section__title { margin: 0em 0 1em; } #xyoga { background: linear-gradient(170deg, rgba(53, 91, 196, 1) 0%, rgba(122, 153, 211, 1) 100%); background-repeat: no-repeat; background-position: center; background-size: cover; } .yoga-copy-section .yoga-copy-section__wrap .yoga-copy-section__description { line-height: 1.6em; font-size: 2em; color: #fff; font-weight: 400 } .yoga-copy-section .yoga-copy-section__wrap .yoga-22-copy-section__description { font-size: 2.5em; } .yoga-copy-section .yoga-copy-section__img-wrap { width: 90%; margin: 5em auto; } .yoga-copy-section .yoga-22-copy-section__img-wrap { width: 90%; margin: 5em auto; } .yoga-copy-section .yoga-copy-section__img-wrap img.yoga-copy-section__img { width: 100% } @media only screen and (max-width:991px) { .yoga-copy-section .yoga-copy-section__wrap { width: 90%; margin: 0 auto } .yoga-copy-section .yoga-copy-section__wrap .yoga-copy-section__title { margin: 1em 0 } .yoga-copy-section .yoga-copy-section__wrap .yoga-copy-section__description { line-height: 2em } } @media only screen and (max-width:768px) { .yoga-copy-section { padding: 10em 5em 2em; text-align: center } .yoga-copy-section .yoga-copy-section__wrap { width: 95%; margin: 0 auto } .yoga-copy-section .yoga-copy-section__wrap .yoga-copy-section__logo { margin-bottom: 3em; width: 80% } .yoga-copy-section .yoga-copy-section__wrap .yoga-copy-section__description { font-size: 1.4em } .yoga-copy-section .yoga-copy-section__wrap .yoga-22-copy-section__description { font-size: 1.8em } .feature-img-section { padding: 5em 4em 6em } } .feature-img-section { padding: 2em 8em 6em; width: 100% } .feature-img-section .row:before { content: unset } div.col-md-6 div { background-position: 50%; background-size: cover } .feature-img-section__right.col-lg-6 { padding-left: 2em; overflow: hidden } .feature-img-section__left.col-lg-6 { padding-right: 2em } .feature-img-section__img-spacer { height: 4em } @media only screen and (max-width:991px) { .feature-img-section__left.col-lg-6 { padding: 2em } .feature-img-section__right.col-lg-6 { padding-right: 2em; } } @media only screen and (max-width:768px) { .feature-img-section__right.col-lg-6 .feature-img-section__img-wrap { padding: 2em 0; overflow: hidden } .feature-img-section__img-spacer { height: 0 } .feature-img-section { padding: 1em 2em 6em; width: 100% } } .feature-img-section__img-height { min-height: 10px } .yoga-products-section { padding: 4em 8em; margin: 0 auto; color: #333 } .yoga-products-section .yoga-products-section__heading { font-size: 4.5em; font-weight: 700; text-align: center } .yoga-products-section .yoga-products-section__product-title { font-size: 3em; font-weight: 700; text-align: center; margin-bottom: 1em } .yoga-products-section .yoga-products-section__list-wrap { display: -moz-box; -moz-box-pack: center; -moz-box-align: center; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; margin-bottom: 1em } .yoga-products-section .yoga-products-section__product-content-list { font-size: 1.4em; list-style: none } .yoga-products-section .yoga-products-section_content-wrap { width: 90%; margin: 0 auto; text-align: center } .yoga-products-section .yoga-products-section__product-btn { padding: .8em 2em; transition: .2s; background: #3f8ddb; border-radius: 3px; display: inline-block; text-align: center; margin: 1em auto 3em; font-size: 1.3em } .yoga-products-section .yoga-products-section__product-btn:hover { text-decoration: none } .yoga-products-section .yoga-products-section__product-btn:hover span { opacity: .5 } .yoga-products-section .yoga-products-section__product-btn span { color: #fff } img.yoga-products-section__product-img { width: 80%; margin: 0 auto; display: block } @media only screen and (max-width:768px) { .yoga-products-section { padding: 4em 3em } .yoga-products-section .yoga-products-section__heading { font-size: 4em; font-weight: 700; text-align: center; width: 80%; margin: 0 auto } .yoga-products-section .yoga-products-section__product-title { font-size: 2.2em; text-align: center } .yoga-products-section .yoga-products-section__product-item { background-color: #fafafa; margin: 2em auto } } .yoga-modal-window { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: none; cursor: default; z-index: 100001 } .yoga-modal-window:not(.base-clr-bg) { background-color: rgba(0, 0, 0, .7) } .yoga-modal-window__box { background-size: cover; box-shadow: 0 0 25px 0 rgba(0, 0, 0, .12); position: relative; margin: 0 auto; display: block; width: 64%; max-width: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden; padding: 40px 30px 25px; border: 1px solid #e5e5e5; background-repeat: no-repeat; background-position: 50% } .yoga-modal-window__box:not(.base-clr-bg) { background-color: #fff } .yoga-modal-window__box.footer .yoga-modal-window__close-btn, .yoga-modal-window__box.footer .yoga-modal-window__close-btn:not(:hover), .yoga-modal-window__box.light-text .yoga-modal-window__close-btn, .yoga-modal-window__box.light-text .yoga-modal-window__close-btn:not(:hover) { color: #fff } .yoga-modal-window__box.footer .yoga-modal-window__close-btn:hover, .yoga-modal-window__box.light-text .yoga-modal-window__close-btn:hover { opacity: .8 } .yoga-modal-window__box .form-group { margin-bottom: 20px } .yoga-modal-window__box .yoga-modal-window__close-btn { transition: color .2s ease, background .2s ease; position: absolute; top: 15px; right: 30px; font-size: 14px; cursor: pointer; opacity: 1; z-index: 20 } .yoga-modal-window__box .yoga-modal-window__close-btn:not(:hover) { color: #000 } .yoga-modal-window__box :nth-child(2) { margin-top: 0 } .yoga-modal-window__box.iframe-box.iframe-video { border: none; padding-bottom: 35.866% } .yoga-modal-window__box.iframe-box.iframe-video video, .yoga-modal-window__box.iframe-box.iframe-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10 } .yoga-modal-window__box.iframe-box { padding: 0 } .yoga-modal-window__box.iframe-box .yoga-modal-window__close-btn { top: 0; right: 0; padding: 12px; font-size: 16px; width: 40px; line-height: 1; background-color: hsla(0, 0%, 100%, .6) } .yoga-modal-window__box.iframe-box .yoga-modal-window__close-btn:hover { background-color: hsla(0, 0%, 100%, .95) } .yoga-modal-window__box.top { transform: translateY(0); top: 0; bottom: auto } .yoga-modal-window__box.bottom { transform: translateY(0); top: auto; bottom: 0 } .yoga-modal-window__box.left { float: left } .yoga-modal-window__box.right { float: right } @media (max-width:991px) { .yoga-modal-window__box { width: 70%; height: 30vh; } } @media (max-width:767px) { .yoga-modal-window__box { width: 90%; padding: 40px 20px 25px; height: 32vh; } } @media (max-width:540px) { .yoga-modal-window__box { width: 100% } } .full-width-img { display: block; width: 100%; height: 90vh } .yoga-hero__vid-item.lazyImg { background-size: cover; background-repeat: no-repeat; background-position: 50%; width: 100%; background-origin: content-box; padding: 0; box-shadow: 7px 4px 61px -21px rgba(0, 0, 0, .75) } .yoga-hero__vid-link:before { position: absolute; top: 0; left: 0; display: inline-block; width: 100%; height: 100%; content: ""; z-index: 2; background: url(https://static.lenovo.com/ww/campaigns/2019/yoga-brand-v3/icons/play-button.svg); background-repeat: no-repeat; background-position: 50%; background-size: 13%; transition: .2s } .yoga-hero__vid-link:hover:before { transform: scale(1.3) } .yoga-hero__vid-link.hidden:before { display: none } .yoga-hero__vid-wrap { position: relative; cursor: pointer; background-size: cover; background-repeat: no-repeat; background-position: 100% 0; width: 35em; height: 20em; bottom: 0; position: absolute; left: 50%; transform: translate(-50%, 50%) } .yoga-feature { padding: 5em 8em 2em; color: #333; z-index: 1; position: relative } .yoga-feature#accessories:before, .yoga-feature#allinone:before, .yoga-feature#ultrathin:before { content: ""; position: absolute; top: 2%; left: 50%; transform: translate(-50%, -50%); height: 1px; width: 85%; border-top: 1px solid #ececec } .yoga-feature__title { font-size: 3.8em; font-weight: 700; margin: 0 0 1em .5em } .yoga-feature__wrap { width: 100%; margin: 0 auto } .yoga-feature__wrap .yoga-feature__item { padding: 0 } .yoga-feature__wrap .yoga-feature__item .yoga-feature__img-only-wrap, .yoga-feature__wrap .yoga-feature__item .yoga-feature__item-wrap { margin: 0 1.5em 3em } .yoga-feature__wrap .yoga-feature__item .yoga-feature__img-only-wrap { margin-bottom: 4em; height: 100% } .yoga-feature__wrap .yoga-feature__item .yoga-feature__img-only-wrap .yoga-feature__img-only { height: calc(100% - 4em); background: transparent; background-size: cover; background-repeat: no-repeat; background-position: 50% } .yoga-feature__wrap .yoga-feature__item .yoga-feature__item-wrap { background-color: #fafafa; padding: 3em; margin-bottom: 4em; text-align: center } .yoga-feature__wrap .yoga-feature__item .yoga-feature__item-wrap .yoga-feature__item-title { text-align: center; font-size: 3em; font-weight: 500 } .yoga-feature__wrap .yoga-feature__item .yoga-feature__item-wrap .yoga-feature-accessory__item-title { text-align: center; font-size: 2.2em } .yoga-feature__wrap .yoga-feature__item .yoga-feature__item-wrap .yoga-feature__item-price { text-align: center; font-size: 1.3em; font-weight: 700; margin-bottom: 0 } .yoga-feature__wrap .yoga-feature__item .yoga-feature__item-wrap .yoga-feature__item-price strong { font-size: 1.5em } .yoga-feature__wrap .yoga-feature__item .yoga-feature__item-wrap .yoga-feature__item-img { width: 65%; margin: 0 auto; display: block } .yoga-feature__wrap .yoga-feature__item .yoga-feature__item-wrap .yoga-feature__item-desc { display: flex; align-items: center; justify-content: center } .yoga-feature__wrap .yoga-feature__item .yoga-feature__item-wrap .yoga-feature__item-desc .yoga-feature__item-list { font-size: 1.4em; text-align: left } .yoga-feature__wrap .yoga-feature__item .yoga-feature__item-wrap .yoga-feature__item-btn { padding: .8em 2em; transition: .2s; background: #3f8ddb; border-radius: 3px; display: inline-block; text-align: center; margin: 2em 1em 3em } .yoga-feature__wrap .yoga-feature__item .yoga-feature__item-wrap .yoga-feature__item-btn:hover { text-decoration: none } .yoga-feature__wrap .yoga-feature__item .yoga-feature__item-wrap .yoga-feature__item-btn:hover span { opacity: .5 } .yoga-feature__wrap .yoga-feature__item .yoga-feature__item-wrap .yoga-feature__item-btn span { color: #fff; font-size: 1.6em } .yoga-accessories .yoga-feature__wrap .yoga-feature__item .yoga-feature__item-wrap { margin: 0 1.5em 3em } @media only screen and (max-width:991px) { .yoga-feature { padding: 6em 2em } } @media only screen and (max-width:768px) { .yoga-feature { padding: 3em 2em } .yoga-feature__wrap .yoga-feature__item .yoga-feature__img-only-wrap .yoga-feature__img-only { min-height: 30em } .yoga-feature__wrap .yoga-feature__item .yoga-feature__item-wrap .yoga-feature__item-btn { margin: .5em } .yoga-feature__title { margin: 0 0 1em .5em } } @media only screen and (max-width:575px) { .yoga-feature__title { font-size: 3.2em; margin: 0 0 .5em .5em } .yoga-feature__wrap .yoga-feature__item .yoga-feature__item-wrap .yoga-feature__item-title { font-size: 3.2em } } .yoga-list { padding: 0 8em; color: #333 } .yoga-list__title { font-size: 3.8em; font-weight: 700; margin-bottom: 6em } .yoga-list__wrap { width: 100%; margin: 0 auto } .yoga-list__wrap .yoga-list__container .yoga-list__item .yoga-list__item-wrap { background-color: #fafafa; padding: 3em; text-align: center; margin: 0 1.5em 4em } .yoga-list__wrap .yoga-list__container .yoga-list__item .yoga-list__item-wrap .yoga-list__item-title { text-align: center; font-size: 3em; font-weight: 500; margin-bottom: .2em; margin-top: .5em; color: #333 } .yoga-list__wrap .yoga-list__container .yoga-list__item .yoga-list__item-wrap .yoga-list__item-title a { color: #333; display: block } .yoga-list__wrap .yoga-list__container .yoga-list__item .yoga-list__item-wrap .yoga-list__item-title a:hover { color: #333 } .yoga-list__wrap .yoga-list__container .yoga-list__item .yoga-list__item-wrap .yoga-list__item-price { text-align: center; font-size: 1.3em; font-weight: 700; margin-bottom: 0 } .yoga-list__wrap .yoga-list__container .yoga-list__item .yoga-list__item-wrap .yoga-list__item-price strong { font-size: 1.5em } .yoga-list__wrap .yoga-list__container .yoga-list__item .yoga-list__item-wrap .yoga-list__item-img { width: 70%; margin: 0 auto .8em; display: block } .yoga-list__wrap .yoga-list__container .yoga-list__item .yoga-list__item-wrap .yoga-list__item-desc { text-align: left; width: 80%; margin: 0 auto; display: flex; align-items: center; justify-content: center } .yoga-list__wrap .yoga-list__container .yoga-list__item .yoga-list__item-wrap .yoga-list__item-desc ul { font-size: 1.4em } .yoga-list__wrap .yoga-list__container .yoga-list__item .yoga-list__item-wrap .yoga-list__item-btn { padding: .8em 2em; transition: .2s; background: #3f8ddb; border-radius: 3px; display: inline-block; text-align: center; margin: 2em auto 3em; color: #fff } .yoga-list__wrap .yoga-list__container .yoga-list__item .yoga-list__item-wrap .yoga-list__item-btn span { font-size: 1.6em } .yoga-list__wrap .yoga-list__container .yoga-list__item .yoga-list__item-wrap .yoga-list__item-btn:hover { text-decoration: none } .yoga-list__wrap .yoga-list__container .yoga-list__item .yoga-list__item-wrap .yoga-list__item-btn:hover span { opacity: .5 } .merch-tagLabel-ribbon { top: -15px; position: absolute } @media only screen and (max-width:991px) { .yoga-list { padding: 3em 2em } .yoga-list__wrap .yoga-list__container .yoga-list__item { padding: 0 } .yoga-list__wrap .yoga-list__container .yoga-list__item .yoga-list__item-wrap { margin: 0 1.5em 4em; padding: 1.5em } .yoga-list__wrap .yoga-list__container .yoga-list__item .yoga-list__item-wrap .yoga-list__item-desc ul { padding-left: 2em } } .merch-tagLabel-ribbon:before { content: ""; border-bottom-width: 15px; border-top-width: 15px; border-left-width: 18px } .yoga-hero__product-page { margin-bottom: 20em; color: #333; z-index: 3 } .yoga-hero__product-page .yoga-hero__content-wrap { height: 450px } .yoga-hero__product-page .yoga-hero__content-wrap .yoga-hero__text-box { top: 50% } .yoga-hero__product-page .yoga-hero__yoga-logo-wrap { width: 45%; margin: 0 auto 4em } .yoga-hero__product-page .yoga-hero__heading { font-size: 2.2em; margin: 1em 0 4em; font-weight: 400; letter-spacing: .1em; color: #c9c9c9 } .yoga-hero__product-page .yoga-hero__btn-wrap { display: none } .yoga-hero__product-type-wrap { bottom: 0; position: absolute; left: 50%; transform: translate(-50%, 80%); width: 100%; text-align: center; margin: 0 auto; padding: 0 2em; z-index: 11 } .yoga-hero__product-type-expand-wrap { visibility: hidden } .yoga-hero__product-type-expand-wrap--show { visibility: visible } .yoga-hero__product-type-item { transition: background-color .2s ease } .yoga-hero__product-type-item.yoga-hero__product-type--show { background-color: #fff; box-shadow: 7px 4px 61px -21px rgba(0, 0, 0, .75); cursor: pointer } h3.yoga-hero__product-type-title { font-size: 2.6em; letter-spacing: .05em; margin-bottom: 1.4em } .yoga-hero__product-type-expand-content { border-top: 1px solid #ececec; padding: 3em 0 1em; width: 80%; margin: 0 auto; text-align: center } h5.yoga-hero__product-type-expand-title { font-size: 1.7em; margin-bottom: .7em } .yoga-hero__product-type-list { margin-bottom: 3em } .yoga-hero__product-type-list span:nth-child(2) { border-right: 1px solid #767676; border-left: 1px solid #767676 } .yoga-hero__product-type-list span { padding: 0 1.8em; font-size: 1.1em; color: #767676 } p.yoga-hero__product-type-description { font-size: 1.4em; color: #767676 } .yoga-hero__product-type-btn { list-style: none; margin: 1.2em .4em 0; padding: .8em 2em; border-radius: 3px; font-size: 1.4em; display: inline-block; background: #3e8ddd } .yoga-hero__product-type-btn span { color: #fff } .yoga-hero__product-type-btn:hover span { opacity: .5 } i.fal.fa-chevron-down { display: block; margin: .5em auto 0; font-size: 3em; color: #3e8ddd } img.yoga-hero__product-type-img.lazyImg { width: 25em } @media only screen and (max-width:1199px) { img.yoga-hero__product-type-img { width: 16em } .yoga-hero__product-type-list span { padding: 0 .5em } .yoga-hero__product-type-expand-content { width: 90% } } @media only screen and (max-width:991px) { .yoga-hero__product-page { margin-bottom: 3em } .yoga-hero__product-page .yoga-hero__product-type-wrap { display: none } .yoga-hero__product-page .yoga-feature { padding: 6em 2em } .yoga-hero__product-page .yoga-hero__text-box .yoga-hero__btn-wrap { display: block } .yoga-hero__product-page .yoga-hero__text-box .yoga-hero__btn-wrap .yoga-hero__btn { box-shadow: none } .yoga-hero__product-page .yoga-hero__text-box .yoga-hero__btn-wrap .yoga-hero__btn:hover { border: 1px solid #3e8ddd } } @media only screen and (max-width:768px) { .yoga-hero__product-page .yoga-hero__content-wrap { height: 500px } .yoga-hero__product-page .yoga-hero__content-wrap .yoga-hero__text-box .yoga-hero__yoga-logo-wrap { width: 60%; margin: 0 auto 4em } .yoga-hero__product-page .yoga-hero__content-wrap .yoga-hero__text-box .yoga-hero__btn-wrap { display: inline-flex; flex-direction: column } .yoga-hero__product-page .yoga-hero__content-wrap .yoga-hero__text-box .yoga-hero__btn-wrap .yoga-hero__btn { margin: .5em auto } .yoga-feature#accessories:before, .yoga-feature#allinone:before, .yoga-feature#ultrathin:before { top: 0 } } @media only screen and (max-width:575px) { .yoga-hero__product-page .yoga-hero__content-wrap { height: 600px } .yoga-hero__product-page .yoga-hero__content-wrap .yoga-hero__text-box { top: 60% } .yoga-hero__product-page .yoga-hero__content-wrap .yoga-hero__text-box .yoga-hero__yoga-logo-wrap { width: 70%; margin: 0 auto 4em } } .yoga-product-seperator { padding: 6em 8em } .yoga-product-seperator .yoga-product-seperator__img-wrap, .yoga-product-seperator .yoga-product-seperator__img-wrap img.yoga-product-seperator__img { width: 100% } @media only screen and (max-width:991px) { .yoga-product-seperator { display: none } } .card { width: 280px; height: 340px } .card:empty:after { content: ""; display: block; width: 100%; height: 100%; border-radius: 6px; box-shadow: 0 10px 45px rgba(0, 0, 0, .1); background-image: linear-gradient(90deg, hsla(0, 0%, 82.7%, 0), hsla(0, 0%, 82.7%, .8) 50%, hsla(0, 0%, 82.7%, 0)), linear-gradient(#fff 32px, transparent 0), linear-gradient(#fff 16px, transparent 0), linear-gradient(#fff 16px, transparent 0), radial-gradient(circle 16px at center, #fff 99%, transparent 0), linear-gradient(#fff 40px, transparent 0), linear-gradient(#d3d3d3 340px, transparent 0); background-size: 200px 300px, 200px 32px, 230px 16px, 180px 16px, 32px 32px, 100% 40px, 100% 100%; background-position: -150% 0, 24px 180px, 24px 242px, 24px 265px, 24px 24px, 0 300px, 0 0; background-repeat: no-repeat; -webkit-animation: loading 1.5s infinite; animation: loading 1.5s infinite } @-webkit-keyframes loading { to { background-position: 350% 0, 24px 180px, 24px 242px, 24px 265px, 24px 24px, 0 300px, 0 0 } } @keyframes loading { to { background-position: 350% 0, 24px 180px, 24px 242px, 24px 265px, 24px 24px, 0 300px, 0 0 } } header.yoga-header { width: 100%; z-index: 950; position: fixed; top: 0; background: #fff; max-width: 1920px; opacity: 0; transition: opacity .2s ease-out; border-bottom: 1px solid #e5e5e5 } header.yoga-header div.yoga-header__nav ul.yoga-header__nav-list { float: left; margin-left: 4.5em; margin-bottom: 0 } header.yoga-header div.yoga-header__nav ul.yoga-header__nav-list li { display: inline-block; padding: 0 0 1.2em; list-style: none; margin: 1.6em 1.2em 0 } header.yoga-header div.yoga-header__nav ul.yoga-header__nav-list li a { font-size: 1.3em; font-weight: 500; letter-spacing: .05em; color: #eb6a00; text-decoration: none; transition: .2s } header.yoga-header div.yoga-header__nav ul.yoga-header__nav-list li a:hover { color: #000 } header.yoga-header div.yoga-header__nav ul.yoga-header__nav-list li.yoga-header__nav-list--inactive a span { color: #c9c9c9 } header.yoga-header div.yoga-header__nav ul.yoga-header__nav-list li.yoga-header__nav-list--inactive a:hover span { color: #000 } header.yoga-header div.yoga-header__nav ul.yoga-header__nav-list li:first-child:hover~hr { margin-left: 0 } header.yoga-header div.yoga-header__nav ul.yoga-header__nav-list li:nth-child(2):hover~hr { margin-left: 50% } header.yoga-header div.yoga-header__nav ul.yoga-header__nav-list hr { height: .25em; width: calc(50% - .5em); margin: 0; background: tomato; border: none; transition: .3s ease-in-out; text-align: left } header.yoga-header div.yoga-header__nav .yoga-header__nav-img-wrap { margin: 1.6em 0 0 3.6em; padding: 0; transition: .2s; float: left; height: 2em } header.yoga-header div.yoga-header__nav .yoga-header__nav-img-wrap img, header.yoga-header div.yoga-header__nav .yoga-header__nav-img-wrap svg { height: 2em; vertical-align: middle } header.yoga-header div.yoga-header__nav .yoga-header__nav-btn-wrap { margin: .7em 3.5em .4em 0; padding: 0; transition: .2s; float: right; background: #3e8ddd; border-radius: 3px } header.yoga-header div.yoga-header__nav .yoga-header__nav-btn-wrap a span { padding: .7em 2em; display: inline-block; color: #fff; font-size: 1.3em; font-weight: 500; letter-spacing: .05em; text-decoration: none } header.yoga-header div.yoga-header__nav .yoga-header__nav-btn-wrap a span:hover { opacity: .5 } header.yoga-header #yoga-header__mobile-trigger { width: 4em; height: 3em; position: relative; margin: 1.8em auto 1.8em 2em; transform: rotate(0deg); transition: .5s ease-in-out; cursor: pointer } header.yoga-header #yoga-header__mobile-trigger span { display: block; position: absolute; width: 80%; background: #000; opacity: 1; left: 0; transform: rotate(0deg); transition: .2s ease-in-out } header.yoga-header #yoga-header__mobile-trigger span:first-child { top: .4em } header.yoga-header #yoga-header__mobile-trigger span:nth-child(2), header.yoga-header #yoga-header__mobile-trigger span:nth-child(3) { top: 1.4em } header.yoga-header #yoga-header__mobile-trigger span:nth-child(4) { top: 2.4em } header.yoga-header #yoga-header__mobile-trigger.open span:nth-child(2) { transform: rotate(45deg) } header.yoga-header #yoga-header__mobile-trigger.open span:nth-child(3) { transform: rotate(-45deg) } header.yoga-header #yoga-header__mobile-trigger.open span:nth-child(4) { top: 1.4em; visibility: visible; transform: rotate(-45deg) } header.yoga-header #yoga-header__mobile-trigger.open span:first-child { top: 1.4em; visibility: visible; transform: rotate(45deg) } header.yoga-header #yoga-header__mobile-trigger { display: none; text-align: left; float: left } header.yoga-header #yoga-header__mobile-trigger span { display: inline-block; padding: .3em .5em 0; margin: 0; min-width: 80%; cursor: pointer } header.yoga-header #yoga-header__mobile-trigger span i { padding: .8em 0 0; float: right; display: none; font-size: 1.8em; line-height: .2em; min-width: 1.6em } header.yoga-header #yoga-header__mobile-trigger span.menu_state { display: inline-block } header.yoga-header #yoga-header__nav-mobile-list { position: absolute; z-index: 11; left: 0; right: 0; top: 6.5em; display: none } header.yoga-header #yoga-header__nav-mobile-list ul { display: none; list-style-type: none; width: 100%; height: auto; border-top: 1px solid #d8d8d8; padding: 0; margin: 0 auto; background: #fff } header.yoga-header #yoga-header__nav-mobile-list ul li { display: block; margin: 0; text-indent: 2em; border-bottom: 1px solid #d8d8d8; padding: 1.2em 0; font-size: 1.4em } header.yoga-header #yoga-header__nav-mobile-list ul li a { text-decoration: none; text-transform: uppercase; color: #000 } @media only screen and (max-width:768px) { header.yoga-header div.yoga-header__nav #yoga-header__mobile-trigger { display: block } header.yoga-header div.yoga-header__nav ul.yoga-header__nav-list { display: none; float: right } header.yoga-header div.yoga-header__nav .yoga-header__nav-btn-wrap { margin: 1.5em 3.5em .4em 0 } header.yoga-header div.yoga-header__nav .yoga-header__nav-btn-wrap a span { font-size: 1.2em } header.yoga-header div.yoga-header__nav .yoga-header__nav-img-wrap { margin: 2.2em } header.yoga-header #yoga-header__nav-mobile-list { display: block } } header.yoga-header.scrolled-fixed { opacity: 1 } .m-affinitySiteBar.scrolled-remove, .m-mastheadSubNav__wrapper.scrolled-remove, .masthead.scrolled-remove, .o-mastheadModule__wrapper.scrolled-remove { display: none } header.yoga-header-products div.yoga-header__nav ul.yoga-header__nav-list hr { margin-left: 50% } .co2-blade-banner{ display: inline-block; width: 100%; color: #fff; background-image: url(https://static.lenovo.com/ww/campaigns/2021/yoga-brand/lenovo-brand-2022-yoga-co2-offset-service-bkgd.jpg); background-position: 50% 50%; background-size: cover; } .co2-blade-banner .desktop-logo { margin-bottom: 20px; } .co2-blade-banner .desktop-logo img{ width: 100%; } .co2-blade-container{ padding: 0  !important; background: #333f48; background: linear-gradient(90deg, rgba(51,63,72,0.7) 0%, rgba(51,63,72,0.5) 50%, rgba(51,63,72,0) 100%); margin-left: 0  !important; } .co2-blade-banner-content{ width: 55%; padding: 200px 3rem; } .co2-blade-banner-content .premiem-care-logo{ max-width: 285px; } .co2-blade-banner-content p{ color: #fff; margin-bottom: 20px  !important; font-size: 1.4em; } #co2-blade-section .mobile-bg{ display: none; max-height: 400px; } @media only screen and (max-width: 1260px) { .co2-blade-banner{ background-image: url(https://static.lenovo.com/ww/campaigns/2021/yoga-brand/lenovo-brand-2022-yoga-co2-offset-service-bkgd.jpg); background-position: 100% 50%; } } @media only screen and (max-width: 767px) { #co2-blade-section .desktop-logo img{ filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(21deg) brightness(97%) contrast(103%); } .co2-blade-container { background: transparent; } #co2-blade-section .mobile-bg{ display: block; } #co2-blade-section .mobile-bg img{ width: 100%; } .co2-blade-banner{ background-image: none; color: #000; padding: 25px 0 50px; } .co2-blade-container{ margin: auto  !important; } .co2-blade-banner-content{ width: 100%; } .co2-blade-banner-content p{ color: #000; } .btn-wrap.mobile-center{ text-align: center; } } @media only screen and (max-width: 767px) { .co2-blade-banner-content{ background-color: rgba(0,0,0,0); padding: 0 1.5rem; } }