* { touch-action: pan-y; } .first, .last { width: auto  !important; } .clearfix:after { content: ""; height: 0; line-height: 0; display: block; visibility: hidden; clear: both; } .clearfix { zoom: 1; } .monitorContent { max-width: 1920px; margin: 0 auto; position: relative; } .w { max-width: 73.75em; margin: 0 auto; position: relative; } .ga-nav li { margin-left: 5px; } .monitorBanner { position: relative; height: 300px; background-image: url("https://static.lenovo.com/mea/campaign/newmonitors/images/banner/monitor-background.png"); background-repeat: no-repeat; background-size: cover; } .bread-crumb { color: #fff; position: absolute; top: 20px; z-index: 3; left: 20px; } .bread-crumb a:hover { text-decoration: underline; color: #fff; } .bread-crumb span { color: #fff; padding: 6px; } .swiper-slide { padding: 0 15%; box-sizing: border-box; height: 300px; } .swiper-button-prev { left: 150px; } .swiper-button-next { right: 150px; } .item-left { transform: translateY(100px); -ms-transform: translateY(100px); -moz-transform: translateY(100px); -webkit-transform: translateY(100px); -o-transform: translateY(100px); transition: all 1s ease; -moz-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; opacity: 0; float: right; } .item-left img { width: 100%; } .item-right { float: left; width: 45%; } .item-right .text-content { transform: translate(20px, 80px); -ms-transform: translate(20px, 80px); -moz-transform: translate(20px, 80px); -webkit-transform: translate(20px, 80px); -o-transform: translate(20px, 80px); transition: all 1s ease; -moz-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; opacity: 0; } .item-right .item-des { box-sizing: border-box; margin-bottom: 30px; line-height: 16px; color: #fff; } .item-right .item-button { color: #fff; padding: .5em 1em; font-weight: 400; border-radius: 3px; cursor: pointer; margin: 0; outline: none; line-height: 1.5em; text-shadow: none; background-color: #1976a1; font-family: "Lato", Helvetica, sans-serif; border: 1px solid #1976a1; display: inline-block; } .item-right .item-button:hover { background: #d9eef7; border: 1px solid #1976a1; color: #1976a1; } .item-right .item-title { font-size: 24px; margin-bottom: 15px; line-height: 24px; color: #fff; } .mobile-button { display: none; width: 100%; height: 100%; } .swiper-pagination-bullet { background-color: #f5efef; } .swiper-pagination-bullet-active { background-color: #f3eded; } .swiper-button-prev, .swiper-button-next { background: rgba(245, 237, 237, .2); } .swiper-button-prev:hover, .swiper-button-next:hover { background: rgba(245, 237, 237, .4); } .swiper-button-prev::after, .swiper-button-next::after { content: "<"; display: block; color: #fff; text-align: center; font-family: cursive; line-height: 44px; } .swiper-button-next::after { content: ">"; } .montitorFilter { position: relative; margin-top: 1.3em; width: 100%; } .leftFilter { box-shadow: none; width: 10%; position: absolute; z-index: 2; } .leftFilter ul { padding-left: 0; list-style-type: none; background: #efefef; } .leftFilter ul li { padding: .5em; border: 1px solid #d4d4d4; color: #555; text-align: center; cursor: pointer; } .leftFilter ul li .facet-img .imgHover { display: none; } .leftFilter ul li .accessoriesList-title { font-size: 14px; line-height: 1.5em; } .rightFilter { float: right; width: 88%; border-bottom: 1px solid #bbb; } .rightFilter .filterTitle { display: block; color: #ff6a00; font-family: "Lato", Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; padding: 0 .3em; } .rightFilter .item { display: inline-table; margin: .5em; border-radius: 3px; width: 23%; } .rightFilter .item h3 { padding: 7px 35px 7px 15px; font-size: 14px; line-height: 24px; color: #555; font-weight: 500; position: relative; box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, .2); background-color: #fff; border: 1px solid #bbb; border-radius: 0 6px 6px; cursor: pointer; } .rightFilter .itemTitle:after { content: ""; width: 0; height: 0; border-left: 10px solid #555; border-top: 10px solid transparent; border-bottom: 10px solid transparent; position: absolute; right: 5px; top: 50%; margin-top: -10px; } .rightFilter .itemClick:after { content: ""; width: 0; height: 0; border-left: 10px solid transparent; border-top: 10px solid #555; border-right: 10px solid transparent; position: absolute; right: 5px; top: 50%; margin-top: -5px; } .rightFilter .item .drop-down { position: absolute; width: 265px; border: 1px solid #cecfce; box-shadow: 1px 1px 1px #cecfce; z-index: 998; margin-top: 3px; background-color: white; padding: .5em 0; display: none; } .rightFilter .item .drop-down li { padding: .5em .5em .5em .6em; } .drop-down li label { padding-left: 1em; } .drop-down li label .filterInput { margin-right: 1em; line-height: normal; vertical-align: middle; } .drop-down li label span { font-weight: bold; color: #2a2a2a; font-size: .9em; } .filterLabel { float: left; width: 75%; height: auto; overflow: hidden; margin-bottom: .7em; margin-top: 1em; padding: 8px 10px 8px 22px; } .filterLabel .spanLabel { position: relative; background-color: #e7e7e7; margin-right: 30px; margin-bottom: 10px; cursor: pointer; border: 1px solid #cecfce; border-left: none; border-radius: 0 3px 3px 0; line-height: 1em; float: left; padding: 8px 10px 8px 18px; box-sizing: border-box; font-size: .8rem; } .filterLabel .spanLabel:before { content: "X"; display: block; padding: 8px 7px; background-color: #e7e7e7; border: 1px solid #cecfce; border-radius: 3px 0 0 3px; line-height: 1em; position: absolute; top: -1px; left: -15px; } .matchResult { float: left; margin-top: 2em; margin-left: 10px; color: #555; } .leftPadding { display: inline-block; width: 10%; } .rightProduct { display: flex; width: 87%; margin-left: 12%; flex-direction: column; justify-content: flex-end; } .rightProduct ol { min-height: 389px; } .rightProduct ol li { background: url(https://www.lenovo.com/_ui/desktop/common/css/images/item-front.jpg) top center no-repeat; margin: 6px; text-align: center; height: 420px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-size: 100% 100%; position: relative; width: 22.8%; float: left; padding: 4% 1% 1% 1%; box-sizing: border-box; } .rightProduct ol li.product-item a img { height: 140px; } .rightProduct ol li h3 { font-size: 1.05em; line-height: 1.1em; height: 54px; margin-top: 10px; } .rightProduct ol li h3 a { color: #009dd9; text-decoration: none; outline: 0; } .rightProduct ol li .featureList { padding-left: 15px; height: 120px; } .rightProduct ol li .featureList li { width: 95%; text-align: left; padding: 0; font-size: 14px; height: auto; margin: 3px 6px; background: url(); } .rightProduct ol li .featureList li::before { content: "-"; position: absolute; left: -5px; } .rightProduct ol li .btn { color: #fff; display: inline-block; padding: .5em; font-size: 14px; font-weight: 400; text-transform: uppercase; border-radius: 3px; cursor: pointer; margin: -0.427vw; line-height: 1.5em; text-shadow: none; background-color: #258ebf; font-family: "Lato", Helvetica, sans-serif; } .rightProduct ol li .btn:hover { background-color: #4fb4e3; } .rightProduct p { margin-bottom: 10px; } .Pagination { position: relative; height: 50px; } #pageChange { position: absolute; left: 50%; transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); } #btn { display: none; width: 50px; height: 30px; margin: 0 auto; margin-bottom: 40px; } .thinkcolour { background-image: url("https://static.lenovo.com/mea/campaign/newmonitors/images/banner/Updated_LDCC Hero banner_web header_CLEAN_1920x528.jpg?sss"); background-size: 100% 100%; background-repeat: no-repeat; } .thinkcolour-img { margin-top: 50px; } .thinkcolour-h2 { margin-bottom: 10px; margin-top: -70px; } .thinkcolour-p { margin-bottom: 15px  !important; } .item-right .item-title { margin-bottom: 5px; } .thinkcolour-img { margin-top: 50px; } .thinkcolour-h2 { font-size: 22px; margin-top: -80px; } .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 10px; left: 35%; width: 30%; } .mon_seo_txt p { padding: 5px; color: #555; }