.chart-container { display: block; height: 420px; @media screen and (max-width: 960px) { height: 350px; } position: relative; } .card-img-holder { margin-bottom: 10px; } .hidden-element { display: none; } .widget { background: #ffffff none repeat scroll 0 0; float: left; margin-top: 14px; position: relative; width: 100%; border-radius: 5px; .chart-padding { padding: 10px; } .mini-stats { background: #ffffff none repeat scroll 0 0; border-radius: 5px; float: left; padding: 10px 15px; width: 100%; height: inherit; p { color: #878888; //display: block; font-size: 14px; line-height: 25px; margin: 6px 0 0; text-transform: uppercase; width: auto; } span { border: 1px solid; border-radius: 50%; color: #fff; //float: left; font-size: 30px; height: 53px; line-height: 53px; text-align: center; width: 53px; position: absolute; right: 15px; bottom: 15px; @media screen and (max-width: 960px) { height: 48px; width: 48px; line-height: 48px; font-size: 24px; } @media screen and (max-width: 800px) { height: 44px; width: 44px; line-height: 44px; font-size: 24px; right: 10px; } @media screen and (min-width: 960px) and (max-width: 1024px) { height: 48px; width: 48px; line-height: 48px; font-size: 24px; } //display: block; } span.savings-skin { color: #47a44b; background: #fff; border: none; font-size: 48px; line-height: 50px; width: 64px; position: absolute; @media screen and (max-width: 960px) { top: 0; width: 50px; i { font-size: 36px; } } } h3 { margin: 0; font-size: 1.8rem; @media screen and (max-width: 1152px) { font-size: 1.5rem; } @media screen and (min-width: 960px) and (max-width: 1024px) { font-size: 1.3rem; } @media screen and (max-width: 800px) { font-size: 1.4rem; } font-weight: 400; } } }