@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
.badgescard,.firstinfo{align-items:center;display:flex;justify-content:center}.content{animation:animatop .9s cubic-bezier(.425,1.14,.47,1.125) forwards;margin-bottom:20px}.card,.content{position:relative}.card{background-color:#fff;border-radius:3px;box-shadow:0 10px 20px rgba(0,0,0,.2);min-height:100px;overflow:hidden;padding:20px;width:100%}.card:after{animation:rotatemagic .75s cubic-bezier(.425,1.04,.47,1.105) 1s both;background:#3791de;content:"";display:block;height:320px;position:absolute;width:180px}.badgescard{animation:animainfos .5s cubic-bezier(.425,1.04,.47,1.105) .75s forwards;background-color:#ececec;border-radius:3px;bottom:10px;box-shadow:0 10px 20px rgba(0,0,0,.2);left:10px;margin-left:3%;padding:10px 20px;position:absolute;width:90%;z-index:-1}.badgescard span{font-size:1.6em;margin:0 6px;opacity:.6}.firstinfo{flex-direction:row;position:relative;z-index:2}.firstinfo img{border-radius:50%;height:120px;width:120px}.firstinfo .profileinfo{padding:0 20px}.firstinfo .profileinfo h1{font-size:1.8em}.firstinfo .profileinfo h3{color:#3791de;font-size:1.2em}.firstinfo .profileinfo p.bio{color:#5a5a5a;font-style:normal;line-height:1.2;padding:10px 0}@keyframes animatop{0%{bottom:-500px;opacity:0}to{bottom:0;opacity:1}}@keyframes animainfos{0%{bottom:10px}to{bottom:-42px}}@keyframes rotatemagic{0%{left:-253px;opacity:0;top:-24px;transform:rotate(0deg)}to{left:-78px;top:-24px;transform:rotate(-30deg)}}