html {
    font-family:sans-serif;
}

.button {
    padding: 1em 1.5em;
    letter-spacing: 4px;
    background:#dadada;
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
    margin:1em;
    text-decoration: none;
    color:#750329;
}

.button:visited {
    color:#750329;
}

.button--active, .button:hover, .button--active:visited {
    color:#fff;
    background: #750329;

}

.select {
    display:none;
    opacity:0;
    transition:200ms all;
}

.select--active {
    display:block;
    opacity:1;
}

.swatch {
	height:4em;
	width:5em;
	display:inline-block;
}

.color-demo__area {
    display:inline-block;
    width:75%;
    vertical-align: top;
    position:relative;
}

.area__base {
    display:block;
    width:100%;
    height:auto;
}


.area__component {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

#component-path {
    mix-blend-mode: multiply;
}



.color-demo__hud {
    display:inline-block;
    width:24%;
    text-align: center;
    margin-bottom:1em;
    border:1px solid #dedede;
    padding:0 0 1em;
    max-width:280px;
    vertical-align: top;
}

.hud__title {
    background-color:#750329;
    color:#fff;
    text-transform: uppercase;
    padding:.5rem 2rem;
    font-weight:500;
    margin:0 0 .5em 0;
    font-style: normal;
    letter-spacing: 2px;
    font-weight: 500;

}

.hud__image {
    width:5em;
    height:3em;
    max-width:100%;
    margin:0 auto;
    border:1px solid #DDDDDD;
}

.hud__description {
    margin:.5em 0 0;
    font-size:.75em;
    font-weight:600;
    padding:0 .4em;
}


.color-demo__controls {
    margin-bottom:1em;
}

.controls__nav {
    display:block;
    width:100%;
    text-align: center;

}

.controls__select {
      display:block;
    width:100%;
    height:102px;
    overflow:scroll;
    border:1px solid #E5E6DF;
    padding:.4em;

}
.controls__select::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
}

.controls__select::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0,0,0,.5);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}