.js .inputfile {
  width:0.1px;
  height:0.1px;
  opacity:0;
  overflow:hidden;
  position:absolute;
  z-index:-1;
}

.inputfile + label {
  max-width:100%;
  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:#007ac9;
  background-color:#dcf2f5;
  font-size:1.3em;
  width:100%;
  text-align:center;
  padding-top:18px;
  height:60px;
}

.inputfile-1:focus + label, .inputfile-1.has-focus + label, .inputfile-1 + label:hover {
  background-color:rgba(220,242,245,0.8);
}

.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;
  }
}