body{background:#4cb5ae}h1{max-width:80%;margin:auto}.image--preview{max-width:800px;width:80%;margin:auto;text-align:center}.image--preview img{max-width:100%;height:auto}.image--ref{position:absolute}.percentage{border-radius:5px;border:1px solid #2c3e50;max-width:500px;width:80%;height:50px;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:auto;overflow:hidden}.percentage__value{position:relative;z-index:2;font-weight:700;color:#fff}.percentage__bar{background:#2c3e50;position:absolute;left:0;bottom:0;top:0}.actions{margin:30px 0}button{border:1px solid #2c3e50;background:transparent;font-size:1.5em;padding:.5em 1em;border-radius:5px;cursor:pointer;-webkit-transition:all .3s;transition:all .3s}button:hover{background:#2c3e50;color:#fff}button+button{margin-left:10px}.input-box{margin:30px 0 0}.inputfile{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}.inputfile+label{max-width:80%;font-size:1.25rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;display:inline-block;overflow:hidden;padding:.625rem 1.25rem}.no-js .inputfile+label{display:none}.inputfile.has-focus+label,.inputfile:focus+label{outline:1px dotted #000;outline:5px auto -webkit-focus-ring-color}.inputfile+label svg{width:1em;height:1em;vertical-align:middle;fill:currentColor;margin-top:-.25em;margin-right:.25em}.inputfile-6+label{color:#2c3e50;border:1px solid #2c3e50;background-color:#cbd7e3;padding:0}.inputfile-6+label:hover,.inputfile-6.has-focus+label,.inputfile-6:focus+label{border-color:#000}.inputfile-6+label span,.inputfile-6+label strong{padding:.625rem 1.25rem}.inputfile-6+label span{width:200px;display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;vertical-align:top}.inputfile-6+label strong{height:100%;color:#f1e5e6;background-color:#2c3e50;display:inline-block}.inputfile-6+label:hover strong,.inputfile-6.has-focus+label strong,.inputfile-6:focus+label strong{background-color:#253443}@media screen and (max-width:50em){.inputfile-6+label strong{display:block}}.vibrants{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:30px 0}.vibrants__item{width:100px}.vibrants__color{padding-bottom:50%}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}