:root{--font-size: .8em;--bg1: #f5f8f7;--blue: #3498db;--green: #2ecc71;--purple: #9b59b6;--gold: #f1c40f;--red: #e74c3c;--orange: #e67e22;--shadow1: 0 2px 4px #00000026, 0 3px 6px #0000001f;--shadow2: 0 2px 6px #00000044, 0 4px 7px #00000022}.principal ul.infoGraphic{font-size:var(--font-size);display:flex;flex-wrap:wrap;justify-content:center}.principal ul.infoGraphic li{position:relative;width:100%;max-width:28em;background:var(--bg1);border-radius:.5em;padding:.5em;z-index:1;transition:all .2s;cursor:pointer}.principal ul.infoGraphic li .numberWrap{position:absolute}.principal ul.infoGraphic li .number{font-family:maven pro,sans-serif;font-size:13em;font-weight:900;width:.9em;text-align:center;color:#25a2c0}.principal ul.infoGraphic li .coverWrap{transform:rotate(130deg);position:absolute;width:18em;height:15em;left:-3em;top:-1em}.principal ul.infoGraphic li .coverWrap .numberCover{position:absolute;background:var(--bg1);width:18em;height:6em;border-radius:50% 50% 0 0;border-bottom:3px solid #f5f8f7;transition:all .4s}.principal ul.infoGraphic li .coverWrap .numberCover:before{position:absolute;content:"";bottom:5px;left:4em;right:4em;top:5em;box-shadow:0 0 30px 17px #48668577;border-radius:100px/10px;z-index:-1}.principal ul.infoGraphic li .coverWrap .numberCover:after{position:absolute;bottom:0;content:"";left:-10%;width:120%;height:150%;background:radial-gradient(at bottom,rgba(72,102,133,.2),transparent,transparent);z-index:1}.principal ul.infoGraphic li .content{margin:8em 3em 1em 7em;position:relative}.principal ul.infoGraphic li .content h2{font-size:1.7em;font-weight:500;text-align:center;margin-bottom:10px;text-transform:uppercase}.principal ul.infoGraphic li .content p{line-height:1.5em}ul.infoGraphic li:hover .coverWrap .numberCover{border-radius:100%}
