#benchmark { background: #2e2e2e; } .benchmark-wrapper, #benchmark-disclaimer-link, .benchmark-disclaimer-container { max-width: 1400px; width: 95%; } .benchmark-wrapper { margin: 0 auto; position: relative; padding-top: 150px; margin-top: 50px; } .benchmark-dark-text { color: #555; } .benchmark-blue-text { color: #3e8ddd; } hr.benchmark-blue-bar { width: 40px; border: 2px solid #3e8ddd; margin: -10px 0 10px; } .benchmark-dropdown { width: 100%; height: 50px; padding: 10px; color: #46c8e2; border: 0; background-color: #252c34; background-image: linear-gradient(45deg, transparent 50%, #46c8e2 50%), linear-gradient(135deg, #46c8e2 50%, transparent 50%), linear-gradient(to right, #252c34, #2c353c); background-position: calc(100% - 25px) calc(1em - -4px), calc(100% - 15px) calc(1em - -4px), calc(100%); background-size: 10px 10px, 10px 10px, cover; background-repeat: no-repeat; cursor: pointer; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .benchmark-dropdown::-ms-expand { display: none; } .benchmark-dropdown:hover { background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%), linear-gradient(to right, #3e8ddd, #3e8ddd); color: #fff; } .benchmark-dropdown option { background-color: #252c34; padding: 10px; -moz-clear: both; -ms-clear: both; clear: both; } .benchmark-dropdown option:hover { background-color: #3e8ddd; } #benchmark-fpsresult-mobile { display: none; } #benchmark.cblock { margin-top: 0; overflow: auto  !important; margin-bottom: 0px; } #benchmark .cblock__msg { padding-top: 50px; } .slick-slide { height: auto; } @media only screen and (max-width: 767px) { #benchmark { background-image: none  !important; } #benchmark .cblock__msg { padding-bottom: 0; } } .benchmark-games-wrapper { display: flex; width: 100%; align-items: stretch; justify-content: space-between; position: absolute; top: 0px; } .benchmark-games-wrapper input[type="radio"] { opacity: 0; position: fixed; width: 0; } .benchmark-game-tile { flex-wrap: wrap; max-width: 135px; height: 189px; text-align: center; background-position: top center; background-size: contain; background-repeat: no-repeat; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19); } .benchmark-game-label { width: 151px; height: 160px; margin: -10px; } .benchmark-game-label:after { content: ""; display: block; margin: 0 auto; width: 131px; padding-top: 220px; } .benchmark-game-label:hover { border-top: 10px solid #3e8ddd; border-left: 10px solid #3e8ddd; border-right: 10px solid #3e8ddd; } .benchmark-games-wrapper input[type="radio"]:checked+label.benchmark-game-label { border-top: 10px solid #3e8ddd; border-left: 10px solid #3e8ddd; border-right: 10px solid #3e8ddd; } .benchmark-games-wrapper input[type="radio"]:checked+label.benchmark-game-label+.arrow-down { display: block; width: 0; height: 0; margin: 76px auto; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #2e8ddd; } .benchmark-games-wrapper input[type="radio"]:checked+label.benchmark-game-label:after { border-bottom: 8px solid #3e8ddd; padding-top: 210px; } @media only screen and (max-width: 1280px) { .benchmark-game-tile { max-width: 110px; height: 121px; } .benchmark-game-label { width: 116px; height: 110px; } .benchmark-game-label:after { width: 96px; } .benchmark-wrapper { padding-top: 100px; margin-top: 0; } .benchmark-games-wrapper input[type="radio"]:checked+label.benchmark-game-label:after { padding-top: 160px; } } @media only screen and (max-width: 960px) { .benchmark-game-label { height: 97px; width: 98px; margin: -7px; } .benchmark-game-label:after { width: 86px; } .benchmark-game-tile { max-width: 84px; margin: 10px 0 10px 10px; } .benchmark-games-wrapper input[type="radio"]:checked+label.benchmark-game-label+.arrow-down { margin-top: 62px; border-top: 7px solid #2e8ddd; } .benchmark-games-wrapper input[type="radio"]:checked+label.benchmark-game-label:after { border-bottom: 6px solid #3e8ddd; padding-top: 140px; } .benchmark-games-wrapper .slick-slide { height: 200px  !important; margin-left: 10px; } .benchmark-games-wrapper input[type="radio"]:checked+label.benchmark-game-label, .benchmark-game-label:hover { border-top: 7px solid #3e8ddd; border-left: 7px solid #3e8ddd; border-right: 7px solid #3e8ddd; } } #tile-apex-legends { background-image: url('https://static.lenovo.com/ww/img/gaming/legion/game-apex-legends.png'); } #tile-monster-hunter-world { background-image: url('https://static.lenovo.com/ww/img/gaming/legion/game-monster-hunter.png'); } #tile-league-of-legends { background-image: url('https://static.lenovo.com/ww/img/gaming/legion/game-league-legends.png'); } #tile-pubg-battlegrounds { background-image: url('https://static.lenovo.com/ww/img/gaming/legion/game-pubg-battlegrounds.jpg'); } #tile-gta-v { background-image: url('https://static.lenovo.com/ww/img/gaming/legion/game-gta-5.png'); } #tile-call-of-duty { background-image: url('https://static.lenovo.com/ww/img/gaming/legion/game-call-of-duty.png'); } #tile-rainbow-six-siege { background-image: url('https://static.lenovo.com/ww/img/gaming/legion/game-rainbow-six.png'); } #tile-witcher-3 { background-image: url('https://static.lenovo.com/ww/img/gaming/legion/game-witcher.png'); } #tile-battlefield-v { background-image: url('https://static.lenovo.com/ww/img/gaming/legion/game-battlefield-5.png'); } #tile-valorant { background-image: url('https://static.lenovo.com/ww/img/gaming/legion/game-valorant.jpg'); } #tile-call-of-duty-warzone { background-image: url('https://static.lenovo.com/ww/img/gaming/legion/game-call-of-duty-war-zone.jpg'); } #tile-counter-strike { background-image: url('https://static.lenovo.com/ww/img/gaming/legion/game-counter-strike.jpg'); } #tile-minecraft { background-image: url('https://static.lenovo.com/ww/img/gaming/legion/game-minecraft.jpg'); } #tile-fortnite { background-image: url('https://static.lenovo.com/ww/img/gaming/legion/game-fortnite.jpg'); } #tile-the-division-2 { background-image: url('https://static.lenovo.com/ww/img/gaming/legion/game-the-division-2.jpg'); } #tile-battlegrounds { background-image: url('https://static.lenovo.com/ww/img/gaming/legion/game-battlegrounds.jpg'); } #tile-cs-go { background-image: url('https://static.lenovo.com/ww/img/gaming/legion/game-counter-strike.jpg'); } #tile-rocket-league { background-image: url('https://static.lenovo.com/ww/img/gaming/legion/game-rocket-league.jpg'); } #tile-control { background-image: url('https://static.lenovo.com/ww/img/gaming/legion/game-control.jpg'); } #tile-shadow-of-the-tomb-raider { background-image: url('https://static.lenovo.com/ww/img/gaming/legion/game-shadow-of-the-tomb-raider.jpg'); } #tile-doom-eternal { background-image: url('https://static.lenovo.com/ww/img/gaming/legion/game-doom-eternal.jpg'); } #tile-cyberpunk-2077 { background-image: url('https://static.lenovo.com/ww/img/gaming/legion/game-cyberpunk.jpg'); } .benchmark-form-wrapper { background-image: url('https://static.lenovo.com/ww/img/gaming/legion/lenovo-legion-benchmark-bg.jpg'); background-repeat: no-repeat; background-size: cover; background-position: top; background-color: #333; padding: 100px 0 20px; } .benchmark-form-container { max-width: 1400px; height: 475px; margin: 0 auto; display: flex; align-items: stretch; justify-content: space-between; } .benchmark-specs-container, .benchmark-results-container { background-color: #333f48; padding: 20px 50px; color: #fff; } .benchmark-specs-container { width: 33%; } .benchmark-results-container { width: 66%; color: #fff; display: flex; } .benchmark-system-area { width: 60%; } .benchmark-device img { max-height: 253px; margin: 0 auto; } @media only screen and (max-width: 540px) { .benchmark-results-container { width: 100%; padding: 20px 20px; } .benchmark-specs-container p { margin-bottom: 0; } #benchmark-fpsresult-mobile { display: block; margin-top: 20px; background-image: linear-gradient(to right, #252c34, #2c353c); text-align: center; font-size: 24px; color: #46c8e2; padding: 10px; } .benchmark-system-area { width: 100%; } .benchmark-fps-area { display: none; } .benchmark-device img { max-height: 160px; margin: 0 auto; } } @media only screen and (max-width: 1060px) { .benchmark-form-wrapper { padding-top: 0; } .benchmark-form-container { flex-flow: column wrap; height: auto; } .benchmark-specs-container { width: 100%; padding: 80px 20px 0; } .benchmark-results-container { width: 100%; padding: 20px 20px; } .benchmark-specs-intro { margin-bottom: 0; } .benchmark-dropdown { height: 30px; padding: 5px 10px; background-position: calc(100% - 22px) calc(1em - 4px), calc(100% - 15px) calc(1em - 4px), calc(100%); background-size: 7px 7px, 7px 8px, cover; } hr.benchmark-blue-bar, .benchmark-spec-header { display: none; } } .benchmark-spec-padding { padding-top: 20px; } .benchmark-result-area { flex-wrap: wrap; color: #fff; } .benchmark-fps { text-align: center; position: relative; top: 45%; transform: translateY(-50%); } .benchmark-fps-area { width: 38%; margin-left: 10px; border-left: 1px solid #4a5863; padding-left: 30px; } #benchmark-gamename { color: #ccc; } #benchmark-fpsresult { font-size: 6em; font-weight: bold; color: #0ff; } .benchmark-fpsterm { font-size: 36px; } .benchmark-device { text-align: center; margin: 10px; } #benchmark-deviceimage { width: 75%; margin: 0 auto; } .benchmark-devicename { font-size: 24px; } .benchmark-devicespecs { font-size: 12px; color: #3e8ddd; } .benchmark-devicecta { margin-top: 20px; text-transform: uppercase; } .benchmark-devicecta a { padding: 15px; color: #fff; background: #3e8ddd; border-radius: 2px; } #benchmark-devicetile .slick-prev { left: -15px; } @media only screen and (min-width: 541px) { #benchmark-devicetile .slick-next { right: 0; } } #benchmark-devicetile .slick-arrow { position: absolute; top: 50%; width: 20px; height: 20px; padding: 0; } .slick-slide { outline: none; } #benchmark-disclaimer-link { margin: 20px auto 0; font-size: 12px; color: #ccc; cursor: pointer; } .benchmark-disclaimer { display: none; padding: 10px; } .benchmark-disclaimer-container { margin: 0 auto; font-size: 12px; padding: 10px 0; display: flex; } .benchmark-disclaimer-text { width: 80%; color: #fff; } .benchmark-disclaimer-logos { width: 250px; } .benchmark-disclaimer-logos img { padding: 5px 10px; } .benchmark-3dmark { max-width: 175px; text-align: center; } .benchmark-ul { max-height: 50px; } .benchmark-games-wrapper .slick-track { background: transparent; } @media only screen and (max-width: 540px) { .benchmark-disclaimer-container { flex-direction: column-reverse; } .benchmark-disclaimer-text, .benchmark-disclaimer-logos { width: 100%; } .benchmark-disclaimer-logos { text-align: center; } } .benchmark-modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, .75); } .benchmark-modal-content { position: relative; background-color: #333f48; margin: auto; padding: 40px; max-width: 75em; top: 150px; } .benchmark-modal-content p { color: #fff; } .benchmark-modal-content h2 { color: #3e8ddd; line-height: 2em; } .benchmark-modal-link { cursor: pointer; } .benchmark-modal-close { float: right; font-size: 72px; font-weight: 200; line-height: 1em; color: #fff; cursor: pointer; } .fa-plus, .fa-times { font-size: 16px; } .fa-caret-left, .fa-caret-right { font-size: 20px; color: #46c8e2; cursor: pointer; } #benchmark-devicetile .slick-prev:before, #benchmark-devicetile .slick-next:before { content: ""; }