#csgo { background: rgba(52, 73, 94, 0.5) url('/f/d90f6dbbce56e48d8c9e4b1d653d09f3') no-repeat center top; color: #fff; } .search { background: #fafafa; margin-top: -50px; } .search .content { background: transparent; padding: 25px; } .stats { background: rgba(52, 73, 94, 0.75); } .player-header { background: rgba(52, 73, 94, 0.5) url('/f/7a06618704b1868479bd1fab1a28660b') no-repeat center center; background-size: cover; width: 100%; } #csgo h1, #csgo h3 { color: #fafafa; } .player-header .content { background: rgba(52, 73, 94, 0.5); color: #fff; padding: 25px; } .player-header #player-logo img { width: 100%; } #csgo h1 { font-weight: 100; font-size: 64px; } .player-header h3, #csgo small { display: inline; } #csgo small { font-size: 16px; padding-left: 10px; line-height: 16px; } #csgo a { color: #fff; } #csgo h2 { font-size: 50px; font-weight: 200; padding-left: 10px; } .online, .in-game { color: rgba(46, 204, 113, 1.0); } .busy, .away { color: #e67e22; } .offline { color: rgba(231, 76, 60, 1.0); } .stats { padding: 20px; } .stats ul { list-style: none; } .stats li { line-height: 50px; display: block; margin-bottom: 25px; } .stats li svg { float: left; width: 50px; height: 50px; fill: #0bb3d6; left: 0; right: auto; margin-right: 10px; } .stats h4 { margin-bottom: 10px; line-height: 24px; color: #0bb3d6; text-transform: uppercase; white-space: nowrap; font-weight: 400; padding-left: 5px; } .stats .value { font-size: 36px; display: flex; margin-top: -15px; font-weight: 200; } .section-2 { padding-top: 20px; } .section-2 svg.heading { height: 24px; display: block; position: absolute; margin: auto; left: 5px; top: 25px; fill: #fff; width: 60px; } .section-2 h3.heading { font-weight: 200; color: rgb(11, 179, 214); } .section-2 .weapons { margin-right: 2.5px; background: rgba(52, 73, 94, 0.8); background: -webkit-linear-gradient(bottom, rgba(20, 32, 41, 0), rgba(20, 32, 41, .75) 100px); background: linear-gradient(to top, rgba(20, 32, 41, 0), rgba(20, 32, 41, .75) 100px); padding-bottom: 50px; } .section-2 .maps { margin-left: 2.5px; margin-right: 2.5px; background: rgba(52, 73, 94, 0.8); background: -webkit-linear-gradient(bottom, rgba(20, 32, 41, 0), rgba(20, 32, 41, .75) 100px); background: linear-gradient(to top, rgba(20, 32, 41, 0), rgba(20, 32, 41, .75) 100px); padding-bottom: 50px; } .section-2 .lastmatch { margin-left: 2.5px; background: rgba(52, 73, 94, 0.8); background: -webkit-linear-gradient(bottom, rgba(20, 32, 41, 0), rgba(20, 32, 41, .75) 100px); background: linear-gradient(to top, rgba(20, 32, 41, 0), rgba(20, 32, 41, .75) 100px); padding-bottom: 50px; } .weapons .item { display: block; position: relative; letter-spacing: .02em; } .weapons .content { margin: auto 10px auto -25px; } .weapons .card { height: 160px; background: url("/f/b7cc30d080b2d6aa9d78644201414939") center top no-repeat #666; background-size: 100%; } .weapons .card .title { left: 30px; color: #142029; background: rgba(255, 255, 255, .75); font-size: 18px; text-transform: uppercase; position: absolute; bottom: 5px; z-index: 2; padding: 0 8px; line-height: 28px; font-weight: 700; } .weapons .card .title .number { display: block; position: absolute; right: 100%; width: 25px; color: #fff; background: rgba(0, 0, 0, .75); text-align: center; } .weapons .card .photo { top: 0; left: 0; bottom: 0; right: 0; z-index: 1; margin: auto; max-width: calc(100% - 20px); max-height: calc(100% - 20px); width: auto; height: auto; pointer-events: none; display: block; position: absolute; } .weapons .card .stat { right: 5px; color: #fff; background: rgba(115, 46, 42, .85); font-size: 16px; position: absolute; bottom: 5px; z-index: 2; padding: 0 8px; line-height: 28px; font-weight: 700; display: block; } .weapons .stat svg { height: 28px; display: inline-block; width: 16px; fill: #fff; opacity: .9; vertical-align: top; } .weapons .line { padding: 15px 0 14px 75px; border-bottom: 1px solid rgba(125, 199, 255, .08); height: 50px; } .weapons .line .title { margin-top: -2px; font-weight: 700; font-size: 18px; text-transform: uppercase; } .weapons .line .icon { top: 0; left: 5px; bottom: 0; margin: auto; width: 60px; height: 22px; fill: #fff; display: block; position: absolute; } .weapons .line .stat { font-weight: 700; top: 15px; right: 5px; display: block; position: absolute; } .weapons .line .stat svg { margin-top: -4px; } .maps > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; } .maps h3:before { counter-increment: item; content: counter(item); } .maps .item .title:before { display: block; position: absolute; right: 100%; width: 17px; color: #fff; background: rgba(0, 0, 0, .75); text-align: center; } .maps .item.big .title:before { width: 25px; } .maps .item { display: block; position: relative; margin-bottom: 10px; width: 140px; height: 70px; overflow: hidden; letter-spacing: .02em; padding: 0; } .maps .item .title { bottom: 5px; padding: 0 5px; line-height: 20px; font-size: 12px; font-weight: 700; position: absolute; left: 22px; z-index: 2; color: #142029; background: rgba(255, 255, 255, .75); text-transform: uppercase; } .maps .item .stat { bottom: 5px; padding: 0 5px; line-height: 20px; font-size: 12px; font-weight: 700; display: block; position: absolute; right: 5px; z-index: 3; color: #fff; background: rgba(191, 147, 41, .85); } .maps .item.big { width: 100%; height: 160px; } .maps .item.big .photo { vertical-align: middle; display: block; position: absolute; top: 0; left: 0; width: 100%; height: auto; } .maps .item.big .icon { vertical-align: middle; display: block; position: absolute; top: 5px; right: 5px; width: 60px; height: auto; pointer-events: none; } .maps .item.big .title { left: 30px; padding: 0 8px; line-height: 28px; font-size: 18px; } .maps .item.big .stat { padding: 0 8px; line-height: 28px; font-size: 16px; } .lastmatch .result { position: relative; padding: 20px 13px 20px 15px; color: rgba(187, 187, 187, .9); background: rgba(187, 187, 187, .05); background-image: -webkit-radial-gradient(100% 50%, circle farthest-side, rgba(187, 187, 187, .1), rgba(187, 187, 187, 0)); background-image: radial-gradient(circle farthest-side at 100% 50%, rgba(187, 187, 187, .1), rgba(187, 187, 187, 0)); font-size: 16px; font-style: italic; border-right: 2px solid; } .lastmatch .result h3 { font-size: 16px; margin-top: 1px; margin-bottom: 0; color: inherit; } .lastmatch .result.win { color: rgba(255, 198, 40, .9); background: rgba(255, 198, 40, .05); background-image: -webkit-radial-gradient(100% 50%, circle farthest-side, rgba(131, 198, 72, .1), rgba(131, 198, 72, 0)); background-image: radial-gradient(circle farthest-side at 100% 50%, rgba(131, 198, 72, .1), rgba(131, 198, 72, 0)); } .lastmatch .result .outcome { display: block; position: absolute; top: 20px; right: 12px; font-weight: 700; font-size: 16px; letter-spacing: .01em; font-style: normal; text-transform: uppercase; } .lastmatch .result .outcome svg { display: inline-block; vertical-align: bottom; margin-left: 2px; width: 22px; height: 22px; fill: currentColor; } .lastmatch .content { font-size: 13px; } .lastmatch .weapon { position: relative; margin: 0 15px; padding: 10px 0 9px; border-bottom: 1px solid rgba(125, 199, 255, .08); } .lastmatch .weapon h4 { color: rgba(11, 179, 214, .8); letter-spacing: .01em; font-size: 13px; } .lastmatch .weapon .icon { display: block; margin: 5px 0; width: 50%; height: 45px; fill: currentColor; } .lastmatch .weapon .name { font-size: 16px; font-weight: 700; text-transform: uppercase; } .lastmatch .weapon .stats { position: absolute; bottom: -9px; right: 0; line-height: 0; font-size: 0; background: transparent; } .lastmatch .weapon .stat { display: inline-block; margin-left: 20px; line-height: 20px; font-size: 16px; font-weight: 700; } .lastmatch .weapon .stat svg { display: inline-block; width: 16px; height: 20px; vertical-align: top; fill: currentColor; } .lastmatch ul.list { padding: 15px 15px 0; letter-spacing: .01em; } .lastmatch li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; padding-bottom: 10px; } .lastmatch li b { display: block; color: rgba(11, 179, 214, .9); font-weight: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; } .lastmatch li strong { display: block; font-weight: 700; text-align: right; overflow: hidden; } .otherstats { background: url('/f/c3f5a93e9aaaeb877a1d171a3be22444') no-repeat center top; margin-bottom: -50px; } .otherstats .container { margin-top: 20px; background: rgba(248, 80, 50, 0); background: -moz-linear-gradient(left, rgba(248, 80, 50, 0) 0%, rgba(20, 32, 41, 0.75) 25%, rgba(20, 32, 41, 0.75) 75%, rgba(231, 56, 39, 0) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(248, 80, 50, 0)), color-stop(25%, rgba(20, 32, 41, 0.75)), color-stop(75%, rgba(20, 32, 41, 0.75)), color-stop(100%, rgba(231, 56, 39, 0))); background: -webkit-linear-gradient(left, rgba(248, 80, 50, 0) 0%, rgba(20, 32, 41, 0.75) 25%, rgba(20, 32, 41, 0.75) 75%, rgba(231, 56, 39, 0) 100%); background: -o-linear-gradient(left, rgba(248, 80, 50, 0) 0%, rgba(20, 32, 41, 0.75) 25%, rgba(20, 32, 41, 0.75) 75%, rgba(231, 56, 39, 0) 100%); background: -ms-linear-gradient(left, rgba(248, 80, 50, 0) 0%, rgba(20, 32, 41, 0.75) 25%, rgba(20, 32, 41, 0.75) 75%, rgba(231, 56, 39, 0) 100%); background: linear-gradient(to right, rgba(248, 80, 50, 0) 0%, rgba(20, 32, 41, 0.75) 25%, rgba(20, 32, 41, 0.75) 75%, rgba(231, 56, 39, 0) 100%); font-size: 13px; padding: 15px 15px 25px; } .otherstats .list { -webkit-column-fill: balance; -moz-column-fill: balance; column-fill: balance; -webkit-columns: 4; -moz-columns: 4; columns: 4; -webkit-column-gap: 60px; -moz-column-gap: 60px; column-gap: 60px; } .otherstats li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; padding-bottom: 10px; } .otherstats li b { color: #0bb3d6; font-weight: 400; } .otherstats li span { float: right; padding-right: 25px; font-weight: 700; }