@import 'mixins'; html { height: 100%; } body { margin: 0; padding: 0; width: 100%; display: table; background: none; position: relative; } main { display: table-cell; vertical-align: middle; padding: 15px 15px 80px 15px; text-align: center; } h1 { font-size: 36px; margin-bottom: 25px; } h1 a { @include setColorAndHover($charcoal); } .stat-outer { display: inline-table; } .stat-outer:nth-of-type(1) { padding-right: 40px; } .stat-outer:nth-of-type(2) { padding-left: 40px; } .stat-inner { background: $logo-blue; @include opacity(0.95); padding: 20px; width: 100%; display: table; } .stat-inner--circular { @include border-radius(50%); } .stat-text { display: table-cell; vertical-align: middle; } .stat-number { font-weight: normal; font-size: 30px; margin: 0; padding: 0; line-height: 1; display: inline-block; } .stat-inner *, .stats-activity { color: white} .stats-activities { min-height: 120px; margin-top: 36px; } .stats-activity { margin: 0; line-height: 1.2; padding-bottom: 15px; @include transition(all 0.3s ease); } .stats-activity:nth-of-type(1) { font-size: 30px; } .stats-activity:nth-of-type(2) { font-size: 25px; @include opacity(0.8); } .stats-activity:nth-of-type(3) { font-size: 20px; @include opacity(0.4); } .stats-backgroundImage, .stats-backgroundScrim { position: absolute; width: 100%; height: 60%; bottom: 0; left: 0; } .stats-backgroundImage { background-size: cover; background-position: center center; @include opacity(0.7); z-index: -2; -webkit-filter: grayscale(1); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: gray; filter: grayscale(100%); } .stats-backgroundScrim { z-index: -1; background: rgba(black, 0.6); } @media screen and (max-width: 500px){ main { padding: 12px 12px 60px 12px; } h1 { font-size: 30px; margin-bottom: 15px; } h3.stat-title { font-size: 18px; } h3.stat-number { font-size: 32px; } .stat-outer:nth-of-type(1), .stat-outer:nth-of-type(2) { padding: 10px 20px; } .stats-activity:nth-of-type(2) { font-size: 24px; } .stats-activity:nth-of-type(3) { font-size: 20px; @include opacity(0.8); } .stats-activity:nth-of-type(4) { font-size: 16px; @include opacity(0.4); } }