/* line 1, ../sass/components/_visualizer.scss */
.visualizer {
  width: 100%;
  border: 1px solid #bfbfbf;
  position: relative;
}
/* line 6, ../sass/components/_visualizer.scss */
.visualizer img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* line 12, ../sass/components/_visualizer.scss */
.visualizer .bg {
  max-width: 100%;
  height: auto;
}
/* line 17, ../sass/components/_visualizer.scss */
.visualizer .overlay {
  position: absolute;
  top: 0;
  left: 0;
}
/* line 23, ../sass/components/_visualizer.scss */
.visualizer .controls {
  padding: 30px 20px;
  background-color: #ffffff;
  display: flex;
  flex-flow: column;
}
@media (min-width: 768px) {
  /* line 23, ../sass/components/_visualizer.scss */
  .visualizer .controls {
    flex-flow: row;
    justify-content: space-around;
  }
}
/* line 35, ../sass/components/_visualizer.scss */
.visualizer .controls ul {
  padding: 0;
  margin: 0 0 15px;
  list-style: none;
}
/* line 41, ../sass/components/_visualizer.scss */
.visualizer .controls li {
  display: inline-block;
  padding: 0;
  margin: 0 15px 15px 0;
  cursor: pointer;
  vertical-align: middle;
  line-height: 1;
}
@media (min-width: 768px) {
  /* line 41, ../sass/components/_visualizer.scss */
  .visualizer .controls li {
    display: block;
  }
}
/* line 52, ../sass/components/_visualizer.scss */
.visualizer .controls li span {
  position: relative;
  top: -8px;
}
/* line 59, ../sass/components/_visualizer.scss */
.visualizer .controls__title {
  margin-bottom: 7px;
}
/* line 63, ../sass/components/_visualizer.scss */
.visualizer .pattern {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin-right: 10px;
  border: 1px solid #bfbfbf;
}

/* line 72, ../sass/components/_visualizer.scss */
.copper {
  background-color: #cdbda8;
}

/* line 75, ../sass/components/_visualizer.scss */
.grey {
  background-color: #bebebe;
}

/* line 78, ../sass/components/_visualizer.scss */
.brown {
  background-color: #624329;
}

/* line 81, ../sass/components/_visualizer.scss */
.red {
  background-color: #D42333;
}

/* line 84, ../sass/components/_visualizer.scss */
.tera {
  background-color: #a34f33;
}

/* line 87, ../sass/components/_visualizer.scss */
.mixed-black {
  background-color: #55514B;
}

/* line 90, ../sass/components/_visualizer.scss */
.stone {
  background-color: #9F9F9F;
}

/* line 93, ../sass/components/_visualizer.scss */
.colorado-brown {
  background-color: #675750;
}

/* line 96, ../sass/components/_visualizer.scss */
.exotic-brown {
  background-color: #74574B;
}

/* line 99, ../sass/components/_visualizer.scss */
.brown-light {
  background-color: #C8B698;
}

/* line 102, ../sass/components/_visualizer.scss */
.blue {
  background-color: #0287BB;
}

/* line 105, ../sass/components/_visualizer.scss */
.green {
  background-color: #288247;
}

/* line 108, ../sass/components/_visualizer.scss */
.orange-light {
  background-color: #D5AC79;
}

/* line 111, ../sass/components/_visualizer.scss */
.brown {
  background-color: #624329;
}

/* line 114, ../sass/components/_visualizer.scss */
.purple {
  background-color: #706482;
}

/* line 117, ../sass/components/_visualizer.scss */
.red {
  background-color: #D42333;
}

/* line 120, ../sass/components/_visualizer.scss */
.orange {
  background-color: #DF8731;
}

/* line 123, ../sass/components/_visualizer.scss */
.yellow {
  background-color: #E8BA0D;
}

/* line 126, ../sass/components/_visualizer.scss */
.grey {
  background-color: #bebebe;
}

/* line 129, ../sass/components/_visualizer.scss */
.white {
  background-color: #ffffff;
}

/* line 132, ../sass/components/_visualizer.scss */
.black {
  background-color: #000000;
}

/* line 135, ../sass/components/_visualizer.scss */
.antracite {
  background-color: #242422;
}

/* line 138, ../sass/components/_visualizer.scss */
.light-grey {
  background-color: #ADADAA;
}

/* line 141, ../sass/components/_visualizer.scss */
.dark-brown {
  background-color: #705F5A;
}

/* line 144, ../sass/components/_visualizer.scss */
.golden-oak {
  background-color: #9B897D;
}