.js .inputfile {width:0.1px; height:0.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:0.625rem 1.25rem;}
.no-js .inputfile + label {display:none;}
.inputfile:focus + label, .inputfile.has-focus + label {outline:1px dotted #000; outline:-webkit-focus-ring-color auto 5px;}
.inputfile + label * {}
.inputfile + label svg {width:1em; height:1em; vertical-align:middle; fill:currentColor; margin-top:-0.25em; margin-right:0.25em;}
.inputfile-1 + label {color:#f1e5e6; background-color:#d3394c;}
.inputfile-1:focus + label, .inputfile-1.has-focus + label, .inputfile-1 + label:hover {background-color:#722040;}
.inputfile-2 + label {color:#d3394c; border:2px solid currentColor;}
.inputfile-2:focus + label, .inputfile-2.has-focus + label, .inputfile-2 + label:hover {color:#722040;}
.inputfile-3 + label {color:#d3394c;}
.inputfile-3:focus + label, .inputfile-3.has-focus + label, .inputfile-3 + label:hover {color:#722040;}
.inputfile-4 + label {color:#d3394c;}
.inputfile-4:focus + label, .inputfile-4.has-focus + label, .inputfile-4 + label:hover {color:#722040;}
.inputfile-4 + label figure {width:100px; height:100px; border-radius:50%; background-color:#d3394c; display:block; padding:20px; margin:0 auto 10px;}
.inputfile-4:focus + label figure, .inputfile-4.has-focus + label figure, .inputfile-4 + label:hover figure {background-color:#722040;}
.inputfile-4 + label svg {width:100%; height:100%; fill:#f1e5e6;}
.inputfile-5 + label {color:#d3394c;}
.inputfile-5:focus + label, .inputfile-5.has-focus + label, .inputfile-5 + label:hover {color:#722040;}
.inputfile-5 + label figure {width:100px; height:135px; background-color:#d3394c; display:block; position:relative; padding:30px; margin:0 auto 10px;}
.inputfile-5:focus + label figure, .inputfile-5.has-focus + label figure, .inputfile-5 + label:hover figure {background-color:#722040;}
.inputfile-5 + label figure::before, .inputfile-5 + label figure::after {width:0; height:0; content:''; position:absolute; top:0; right:0;}
.inputfile-5 + label figure::before {border-top:20px solid #dfc8ca; border-left:20px solid transparent;}
.inputfile-5 + label figure::after {border-bottom:20px solid #722040; border-right:20px solid transparent;}
.inputfile-5:focus + label figure::after, .inputfile-5.has-focus + label figure::after, .inputfile-5 + label:hover figure::after {border-bottom-color:#d3394c;}
.inputfile-5 + label svg {width:100%; height:100%; fill:#f1e5e6;}
.inputfile-6 + label {color:#d3394c;}
.inputfile-6 + label {border:1px solid #d3394c; background-color:#f1e5e6; padding:0;}
.inputfile-6:focus + label, .inputfile-6.has-focus + label, .inputfile-6 + label:hover {border-color:#722040;}
.inputfile-6 + label span, .inputfile-6 + label strong {padding:0.625rem 1.25rem;}
.inputfile-6 + label span {width:200px; min-height:2em; display:inline-block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; vertical-align:top;}
.inputfile-6 + label strong {height:100%; color:#f1e5e6; background-color:#d3394c; display:inline-block;}
.inputfile-6:focus + label strong, .inputfile-6.has-focus + label strong, .inputfile-6 + label:hover strong {background-color:#722040;}

@media screen and (max-width:50em) {
	.inputfile-6 + label strong {display:block;}
}