.colorizer-wrapper {
  position: relative;
  max-width: 500px;
  width:100%;
  background: #626262;
}
.colorizer-wrapper img,
.colorizer-wrapper .svgHolder {
  position: absolute;
  max-width: 500px;
  width: 100%;
}
.colorizer-wrapper .svgHolder canvas {
  display: block;
  width: 100%;
  visibility: hidden;
}
.colorizer-wrapper .svgHolder svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.flex {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.form-wrapper {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-align-items: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}
.section {}
.section.full {
  width: 100%;
}
.colorgroup {
  margin: 0 2rem .5rem 0;
}
.colorgroup:last-child {
  margin-bottom: 2rem;
}
.colorgroup span,
label {
  color: #fff;
}
.damage {
  display: none;
}
hr {
  max-width: none;
}

/* Small only */
@media screen and (max-width: 39.9375em) {
  .flex {
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
  }
  .colorizer-wrapper {
    min-height: 470px;
  }
}

/* Medium and up */
@media screen and (min-width: 40em) {}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/* Large and up */
@media screen and (min-width: 64em) {
  .flex {
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
  }
  .colorizer-wrapper {
    min-height: 750px;
    margin-right:50px; 
  }
}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}