@charset "UTF-8"; /*** The new CSS reset - version 1.9 (last updated 19.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } body { outline: none; background: #060708; margin: 0; padding: 0; } body { font-size: 100%; } @keyframes OpacityLinkAppear { 0% { opacity: 0; } 50% { opacity: 0; } to { opacity: 1; } } a { cursor: pointer; } * { box-sizing: border-box; font-optical-sizing: auto; color: #fff; } main { max-width: 100%; } .download-buttons-mob { display: none; } .large-section { position: relative; max-width: 100%; overflow: hidden; } .large-section .block-first { position: relative; overflow: hidden; } .large-section .glow-left { position: absolute; top: 0; left: 0; right: unset; mix-blend-mode: screen; z-index: 3; } .large-section .glow-right { position: absolute; top: 0; left: unset; right: 0; mix-blend-mode: screen; z-index: 3; } .heading-first-large { position: relative; color: var(--R6-Tracker-Grey-1, #181B20); text-align: center; font-feature-settings: 'liga' off, 'clig' off; font-family: "pressio-compressed", sans-serif; font-style: normal; font-size: 420px; font-style: normal; font-weight: 800; line-height: 80%; text-transform: uppercase; } .heading-first-large.mob { display: none; } .heading-second { color: var(--Main-sceme-Full-White, #FFF); font-feature-settings: 'liga' off, 'clig' off; font-family: "pressio-compressed", sans-serif; font-size: 150px; font-style: normal; font-weight: 800; line-height: 80%; text-transform: uppercase; } .heading-third { color: var(--Main-sceme-Full-White, #FFF); font-feature-settings: 'liga' off, 'clig' off; font-family: 'Rajdhani', sans-serif; font-size: 24px; font-style: normal; font-weight: 700; line-height: 100%; /* 24px */ text-transform: uppercase; } .btn-mob { display: none; } .download-btn { align-items: center; justify-content: center; text-transform: uppercase; transition: .2s ease-in-out; white-space: nowrap; } .download-btn.hidden { display: none; } .download-btn.desktop { display: flex; } .download-btn.mob { display: none; } .opening-section .heading-first { display: flex; align-items: center; text-transform: uppercase; text-align: center; color: #fff; text-align: center; font-feature-settings: 'liga' off, 'clig' off; font-family: 'Rajdhani', sans-serif; font-size: 24px; font-style: normal; font-weight: 700; line-height: 100%; text-transform: uppercase; } .opening-section .heading-first.mobile { display: none; } .main-text { max-width: 418px; margin: 4px auto; color: #fff; text-align: center; font-feature-settings: 'liga' off, 'clig' off; font-family: "Lato", sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 130%; } .download-btn { display: flex; width: 300px; padding: 16px 35px; justify-content: center; align-items: center; gap: 10px; background: var(--R6-Tracker-Yellow, #FED30F); color: var(--Main-sceme-Darkest-Dark, #060708); font-feature-settings: 'liga' off, 'clig' off; font-family: 'Rajdhani', sans-serif; font-size: 20px; font-style: normal; font-weight: 700; line-height: 130%; text-transform: uppercase; } .to-top { display: flex; flex-direction: column; align-items: center; margin: 9px auto 0; color: #fff; opacity: 0.7; font-family: "proxima-nova", sans-serif; font-size: 15px; font-style: normal; font-weight: 600; line-height: 150%; letter-spacing: 1.5px; text-transform: uppercase; } .to-top svg { width: 24px; height: 24px; margin: 0 0 10px; } .to-top-section { display: flex; justify-content: center; max-width: 500px; margin: 0 auto; } .to-top-section .content-wrapper { padding-top: 47px; padding-bottom: 54px; } .opening-section { position: relative; height: 926px; margin: 0; padding: 0; background: #060708; overflow: hidden; } .opening-section .hero-video-loop { min-width: 100%; } .opening-section .content-wrapper { display: flex; flex-direction: column; align-items: center; position: relative; width: 100%; margin: 0 auto; padding: 60px 20px 60px; z-index: 2; } .opening-section .heading-logo { position: absolute; width: 315.12px; transform: translateY(10px); } .opening-section .logo { height: 68px; } .opening-section .logo img { max-width: 100%; height: 100%; } .opening-section .heading-first-large { display: flex; justify-content: center; align-items: center; margin: 39px auto 41px; position: relative; color: #fff; } .opening-section .heading-first { display: flex; align-items: center; text-transform: uppercase; text-align: center; color: #fff; text-align: center; font-feature-settings: 'liga' off, 'clig' off; font-family: 'Rajdhani', sans-serif; font-size: 24px; font-style: normal; font-weight: 700; line-height: 100%; text-transform: uppercase; } .opening-section .main-text br { display: none; } .opening-section .download-btn { margin: 36px auto; } .opening-section .opening-text { max-width: 488px; margin: 18px auto 29px; text-align: center; font-size: 18px; font-style: normal; font-weight: 500; line-height: 150%; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-20px); } 60% { transform: translateY(-8px); } } .first-layer { overflow: hidden; position: absolute; display: block; bottom: 0; width: 100%; height: 100%; z-index: 0; } .first-layer img { position: absolute; } .first-layer .opening-shadow { position: absolute; bottom: 0; left: 0; width: 100%; } .scroll-down { display: flex; justify-content: center; position: relative; max-width: unset; margin: 23px auto 20px; } .scroll-down-container { display: flex; z-index: 2; animation: bounce 2s infinite; } .features-section { position: relative; width: 100%; max-width: 100%; overflow: hidden; } .features-section::before { position: absolute; top: 0; left: 0; background: url("./../images/Shadow-top.webp") no-repeat 0% 0%; background-size: contain; content: ''; width: 100vw; height: 30%; z-index: 3; } .features-section .content-wrapper { display: flex; flex-direction: column; position: relative; z-index: 6; padding: 123px 0 0; margin: 0 auto; } .features-section .content-wrapper-inner { position: relative; display: inline-flex; justify-content: center; align-items: center; flex-direction: column; } .features-section .content-wrapper.second { max-width: 1746px; display: flex; padding: 1px 20px; justify-content: center; align-items: center; z-index: 0; border: 1px solid var(--R6-Tracker-Grey-2, #2D3340); background: var(--R6-Tracker-Grey-1, #181B20); transform: translateY(-5px); } .features-section .content-wrapper.second .icon-left { position: absolute; height: 100%; width: auto; top: 0; left: 0; } .features-section .content-wrapper.second .icon-right { position: absolute; height: 100%; width: auto; top: 0; right: 0; left: unset; } .features-section .content-wrapper.second .features-item-container { padding: 43px 0 40px; transform: translateY(0); } .features-section .content-wrapper.second .features-item-title { max-width: unset; margin-top: 24px; margin-bottom: 9px; } .features-section .content-wrapper.second .features-item-text { max-width: 400px; } .features-section .content-wrapper.second .features-item-text br { display: none; } .features-section .character-left { position: absolute; bottom: 0; left: 0; right: unset; height: 800px; z-index: 1; } .features-section .character-right { position: absolute; bottom: 0; left: unset; right: 0; height: 800px; z-index: 1; } .features-section .characters-center-mob { display: flex; } .features-section .heading-first-large.mob { margin-bottom: 45px; } .features-section > .first-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; mix-blend-mode: screen; } .features-section > .first-layer img { position: absolute; top: -79px; left: 0; /* height: 100%; */ width: 100%; opacity: 0.5; mix-blend-mode: screen; z-index: 1; } .features-section .features-item { display: flex; position: relative; max-width: 335px; height: unset; flex-direction: column; justify-content: flex-end; align-items: center; border: 1px solid var(--R6-Tracker-Grey-2, #2D3340); overflow: hidden; cursor: pointer; } .features-section .features-item::after { position: absolute; content: ''; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--R6-Tracker-Yellow, #FED30F); } .features-section .features-item-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .features-section .features-item-img::after { position: absolute; top: 0; left: 0; width: 100%; height: 315px; content: ''; opacity: 0.07; background: linear-gradient(0deg, rgba(188, 47, 212, 0) 6.19%, #BC2FD4 48.25%, #53FDE4 93.81%); mix-blend-mode: screen; } .features-section .features-item-img::before { position: absolute; top: 0; left: 0; width: 100%; height: 197px; content: ''; opacity: 0.85; background: linear-gradient(180deg, rgba(6, 7, 8, 0) 70.41%, #060708 100%); } .features-section .features-item-title { max-width: 288px; margin-top: 20px; color: var(--Main-sceme-Full-White, #FFF); text-align: center; font-feature-settings: 'liga' off, 'clig' off; font-family: 'Rajdhani', sans-serif; font-size: 32px; font-style: normal; font-weight: 700; line-height: 100%; text-transform: uppercase; } .features-section .features-item-line { width: 52px; height: 1px; margin: 20px auto 16px; background-color: #FED30F; opacity: 0; transition: 300ms ease-out; } .features-section .features-item-text { max-width: 300px; color: var(--R6-Tracker-Grey-5, #B3BBCB); text-align: center; font-feature-settings: 'liga' off, 'clig' off; font-family: "Lato", sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 130%; } .features-section .features-item-container { display: flex; flex-direction: column; align-items: center; position: relative; padding: 36px 24px; text-align: center; background: var(--R6-Tracker-Grey-1, #181B20); transform: translateY(120px); transition: 300ms ease-out; } .yellow-section { display: flex; justify-content: center; position: relative; max-width: 100%; padding: 128px 0 245px; z-index: 1; background-color: #FED30F; } .yellow-section .yellow-bg { top: 0; left: 0; position: absolute; width: 100%; height: 100%; display: flex; opacity: 0.6; background: #FED30F url("./../images/HypeOverlay_ColorDodge.webp") lightgray 0px 0px/100% 152.975% no-repeat; mix-blend-mode: color-dodge; z-index: 3; } .yellow-section .heading-first-large { position: relative; padding: 0; color: #060708; } .yellow-section .glow-left { position: absolute; top: 0; left: 0; width: 500px; height: 500px; border-radius: var(--font-letter-spacing-default, 500px); opacity: 0.5; background: var(--R6-Y9S3-Cyan, #53FDE4); mix-blend-mode: lighten; filter: blur(275px); } .yellow-section .glow-right { position: absolute; top: 0; right: 0; width: 500px; height: 500px; border-radius: var(--font-letter-spacing-default, 500px); opacity: 0.3; background: var(--R6-Y9S3-Magenta, #BC2FD4); mix-blend-mode: lighten; filter: blur(275px); } .yellow-section .yellow-logo { display: flex; justify-content: center; align-items: center; position: absolute; top: 176px; left: 50%; width: auto; height: 42px; padding: 0; display: flex; justify-content: center; position: absolute; max-inline-size: unset; max-block-size: unset; transform: translateX(-50%); } .lines-wrapper { position: absolute; top: 0; left: 50%; max-width: 1746px; width: 100%; height: 100%; transform: translateX(-50%); } .lines-wrapper .line-left { position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: #2D3340; } .lines-wrapper .line-right { position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: #2D3340; } .steps-section { position: relative; width: 100%; max-width: 100%; z-index: 2; } .steps-section .content-wrapper { display: flex; position: relative; z-index: 2; padding: 84px 77px 68px; margin: 0 auto; border: 1px solid var(--Valorant-Tracker-Grey-2, #1B2733); background: var(--R6-Tracker-Grey-1, #181B20); } .steps-section .content-wrapper-inner { display: flex; justify-content: space-between; width: 100%; max-width: 976px; margin-top: 136px; } .steps-section .heading-second { margin-right: 138px; padding: 0; min-width: 320px; } .steps-item { display: flex; flex-direction: column; width: 240px; } .steps-item-img { width: 60px; height: 60px; margin-bottom: 24px; } .steps-item .main-text { margin: 10px 0 0; text-align: left; } .bottom-section { display: flex; justify-content: center; position: relative; width: 100%; max-width: 100%; background: url("./../images/BottomCTAArt.webp") no-repeat 50% 50%; background-size: cover; } .bottom-section .content-wrapper { display: flex; padding: 261px 20px 271px; } .bottom-section .content-wrapper-inner { display: flex; flex-direction: column; width: 100%; max-width: 677px; } .bottom-section .logo { width: 228px; height: 228px; margin-right: 32px; margin-top: 13px; } .bottom-section .heading-second { position: relative; margin-bottom: 55px; } .bottom-section .heading-second .heading-logo { position: absolute; right: -17px; bottom: -8px; width: 221px; z-index: 1; } .bottom-section .download-btn { width: 318px; } .bottom-data { display: flex; margin-bottom: 54px; } .bottom-data-item:first-of-type { margin-right: 68px; } .bottom-data-title { margin-bottom: 12px; color: var(--R6-Tracker-Grey-5, #B3BBCB); text-align: center; font-feature-settings: 'liga' off, 'clig' off; font-family: 'Rajdhani', sans-serif; font-size: 24px; font-style: normal; font-weight: 700; line-height: 100%; text-transform: uppercase; } .bottom-data-text { color: var(--Main-sceme-Full-White, #FFF); text-align: center; font-feature-settings: 'liga' off, 'clig' off; font-family: 'Rajdhani', sans-serif; font-size: 32px; font-style: normal; font-weight: 700; line-height: 100%; text-transform: uppercase; } .footer { display: flex; justify-content: space-between; align-items: center; background: #060708; } .footer .content-wrapper { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1270px; margin: 0 auto; padding: 21px 20px 16px; } .footer .logo-footer { height: 39.176px; } .footer span { color: var(--R6-Tracker-Grey-5, #B3BBCB); text-align: center; font-feature-settings: 'liga' off, 'clig' off; font-family: "Lato", sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 130%; } /* The Modal (background) */ .modal { display: none; position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; padding: 0; overflow: hidden; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); /* Modal Content */ } .modal-content { position: relative; margin: auto; padding: 25px 33px 34px; width: 100%; max-width: 522px; max-height: 337px; height: 100%; overflow: hidden; box-sizing: border-box; border: 1px solid var(--R6-Tracker-Grey-3, #3E4759); background: #060708 url("./../images/popup-bg.webp") no-repeat 50% 50%; background-size: cover; } .modal-content * { box-sizing: border-box; } /* Modal Content */ .modal-content { display: flex; flex-direction: column; } .modal-content * { box-sizing: border-box; } .modal-content .decor-icon.close { top: 21px; right: 21px; width: 10px; height: 10px; position: absolute; cursor: pointer; } .modal-content .popup-logo { width: 103px; height: 100px; } .modal-content .modal-block { height: 100%; display: flex; flex-direction: column; justify-content: stretch; box-sizing: border-box; } .modal-content .modal-block-inner { display: flex; flex-direction: column; position: relative; z-index: 1; padding: 32px; } .modal-content .popup-heading { margin: 35px 0 4px; color: #fff; font-feature-settings: 'liga' off, 'clig' off; text-shadow: 0px 0px 10px #151136; font-family: 'Rajdhani', sans-serif; font-size: 32px; font-style: normal; font-weight: 700; line-height: 100%; text-transform: uppercase; } .modal-content .popup-heading span { color: #FED30F; font-feature-settings: 'liga' off, 'clig' off; text-shadow: 0px 0px 10px #151136; font-family: 'Rajdhani', sans-serif; font-size: 32px; font-style: normal; font-weight: 700; line-height: 100%; text-transform: uppercase; } .modal-content .popup-text { margin: 0; padding: 0; color: #fff; font-feature-settings: 'liga' off, 'clig' off; text-shadow: 0px 0px 10px #151136; font-family: "Lato", sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 130%; } .modal-content .popup-text a { color: #FED30F; font-feature-settings: 'liga' off, 'clig' off; text-shadow: 0px 0px 10px #151136; font-family: "Lato", sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 130%; text-decoration: underline; cursor: pointer; transition: .2s ease-in-out; } @media only screen and (min-width: 370px) { .features-section .features-item { max-width: unset; width: 348px; height: 500px; } } @media only screen and (min-width: 707px) { .features-section .content-wrapper-inner { flex-direction: row; align-items: flex-end; gap: 0 10px; flex-wrap: wrap; } } @media only screen and (min-width: 1025px) { .download-btn:hover { background: #FFD644; } .download-btn:hover { background: #FFE77C; } .to-top { margin: 9px auto 0; } .to-top-section .content-wrapper { padding-top: 47px; padding-bottom: 54px; } .scroll-down { margin: 0 auto 58px; } .features-section { min-height: 860px; } .features-section .content-wrapper { max-width: 1400px; padding: 240px 20px 120px; } .features-section .content-wrapper-inner { gap: 28px; } .features-section .content-wrapper.second { margin: 0 auto 183px; padding: 1px 20px 0; transform: translateY(0); border: 1px solid var(--R6-Tracker-Grey-2, #2D3340); } .features-section .characters-center-mob { display: none; } .features-section > .first-layer .heading-first-large { transform: translateY(15px); z-index: 4; } .features-section .features-item:hover .features-item-container { transform: translateY(0px); } .features-section .features-item:hover .features-item-line { opacity: 1; } .features-section .features-item { max-width: unset; width: 348px; height: 500px; } .steps-section .content-wrapper { max-width: 1746px; margin-top: -89px; padding: 77px 77px 117px; } } @media only screen and (max-width: 1624px) { .features-section .character-left { left: -7vw; } .features-section .character-right { right: -7vw; } } @media only screen and (max-width: 1424px) { .steps-section .heading-second { margin-right: 8%; } } @media only screen and (max-width: 1420px) { .features-section .character-left { left: -10vw; bottom: -212px; } .features-section .character-right { right: -10vw; bottom: -212px; } } @media only screen and (max-width: 1224px) { .opening-section .heading-first-large { max-width: unset; margin: 32px auto 24px; font-size: 24rem; } } @media only screen and (max-width: 1208px) { .steps-section .heading-second { margin-right: 8%; } } @media only screen and (max-width: 1024px) { .download-buttons-mob { display: flex; flex-direction: column; align-items: center; } .large-section .glow-left { display: none; } .large-section .glow-right { display: none; } .heading-first-large { color: #fff; font-size: 128px; font-style: normal; font-weight: 800; line-height: 80%; text-transform: uppercase; } .heading-first-large.mob { display: flex; justify-content: center; } .heading-second { text-align: center; font-size: 60px; } .btn-mob { display: inline-flex; } .download-btn { display: none; } .download-btn.mob { display: flex; } .download-btn.desktop { display: none; } .download-btn.mob { display: flex; } .opening-section .heading-first { font-size: 20px; } .opening-section .heading-first.desktop { display: none; } .opening-section .heading-first.mobile { display: flex; justify-content: center; } .download-btn { display: flex; width: 235px; height: 52px; padding: 16px 35px; } .opening-section { display: flex; flex-direction: column; height: unset; width: 100%; padding: 0; background: url("./../images/HeroArtMob.webp") no-repeat 0% 100%; background-size: cover; } .opening-section .content-wrapper { padding: 67px 20px 20px; } .opening-section .heading-logo { width: 102px; transform: translateY(-3px); } .opening-section .logo { height: 48px; } .opening-section .heading-first-large { font-size: 128px; } .opening-section .heading-first { font-size: 20px; } .opening-section .main-text br { display: inline; } .opening-section .main-text { margin: 6px auto 0; font-size: 15px; } .opening-section .download-btn { margin: 19px auto 25px; } .first-layer { display: none; } .features-section .content-wrapper.second { border-bottom: none; } .features-section .content-wrapper.second .features-item-container { padding: 43px 0 31px; } .features-section .content-wrapper.second .features-item-title { margin-top: 20px; margin-bottom: 11px; } .features-section .content-wrapper.second .features-item-text { max-width: 333px; } .features-section .content-wrapper.second .features-item-text br { display: block; } .features-section .character-left { display: none; } .features-section .character-right { display: none; } .features-section > .first-layer { display: none; } .features-section .features-item .features-item-container { transform: translateY(0px); } .features-section .features-item .features-item-line { opacity: 1; } .features-section .features-item { margin-bottom: 48px; } .features-section .features-item-line { margin: 16px auto 20px; } .yellow-section { padding: 0; } .yellow-section .heading-first-large { padding: 55px 0px 66px; } .yellow-section .yellow-logo { height: 14px; top: 102px; } .lines-wrapper .line-left { display: none; } .lines-wrapper .line-right { display: none; } .steps-section { display: none; } .bottom-section .content-wrapper { flex-direction: column; padding: 99px 16px 121px; } .bottom-section .content-wrapper-inner { align-items: center; text-align: center; } .bottom-section .logo { width: 56px; height: 56px; margin-right: unset; margin: auto; } .bottom-section .heading-second { margin: 25px auto 40px; } .bottom-section .heading-second .heading-logo { display: none; } .bottom-section .download-btn { width: 271px; } .bottom-data { justify-content: center; margin-bottom: 40px; } .bottom-data-item:first-of-type { margin-right: 0px; } .bottom-data-item { margin: 0 10px; } .bottom-data-title { font-size: 20px; } .bottom-data-text { font-size: 24px; } .footer .content-wrapper { flex-direction: column; } .footer span { margin-top: 19px; font-size: 13px; } .modal-content { position: absolute; top: 50%; transform: translateY(-50%); } } @media only screen and (max-width: 768px) { .opening-section .heading-first { max-width: 300px; } } @media only screen and (max-width: 600px) { .opening-section .content-wrapper { padding: 67px 20px 20px; } .opening-section .opening-text { margin: 13px auto 20px; padding: 0; font-size: 16px; line-height: 160%; } } @media only screen and (max-width: 500px) { .opening-section .opening-text { max-width: 320px; } } @media only screen and (max-width: 450px) { .features-section .content-wrapper.second .features-item-title { max-width: 225px; } .footer span { max-width: 280px; } } @media only screen and (max-width: 365px) { .heading-first-large { font-size: 112px; } .opening-section .heading-first-large { font-size: 112px; } }