@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);body{margin:0;padding:0}body,html{height:100%}body{font-family:Roboto,sans-serif;width:100%;text-align:center;display:table;-webkit-animation:fadeinelement 3s;animation:fadeinelement 3s}main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}h1,h2,h3{cursor:default}h2{font-weight:300;margin-bottom:25px}img{width:25%;width:25vw;border:0}#main{vertical-align:middle;display:table-cell;text-align:center}#main,#main.img,#progress{margin:0 auto}#progress{width:30%;width:30vw;border-radius:22px;background-color:#a8a8a8;padding:7px 5px}#fill{padding:2px 0;background-color:#f9b212;width:75%;border-radius:25px;-webkit-animation:proanimate 2s;animation:proanimate 2s}#barpercent h3{color:#fff;margin:0;padding:0;opacity:0;-webkit-animation:fadeinelement 3s forwards;animation:fadeinelement 3s forwards}@keyframes fadeinelement{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeinelement{0%{opacity:0}to{opacity:1}}@keyframes proanimate{0%{width:0}}@-webkit-keyframes proanimate{0%{width:0}}@media screen and (max-width:600px){img{width:80%;width:60vw}h1{font-size:1.3em}h2{margin:1.1em;font-size:1.1em}#progress{width:80%}}