.color-primaries {
  padding: 20px 0;
  margin-bottom: 0;
}
.color-primaries > div {
  display: inline-block;
  width: 120px;
  height: 120px;
  margin-right: 40px;
  margin-bottom: 20px;
  line-height: 120px;
  color: #fff;
  text-align: center;
  border-radius: 100%;
}
.color-palette {
  margin-bottom: 25px;
}
.color-palette h5 {
  margin-bottom: 27px;
}
.color-palette .list-group {
  color: white;
}
.color-palette .list-group-item {
  padding: 15px 20px;
  border: none;
}
.color-palette .list-group-item span + span {
  text-transform: uppercase;
}
.color-box {
  width: 100%;
  height: 50px;
  padding-top: 5px;
  padding-left: 10px;
  margin-bottom: 20px;
  color: #fff;
}
.text-color-box {
  width: 100%;
  height: 200px;
  margin-bottom: 15px;
}
.example-alpha {
  width: 100%;
  height: 50px;
  margin-bottom: 20px;
  line-height: 50px;
  color: #fff;
  text-align: center;
}
.example-divider {
  background-color: rgba(33, 33, 33, .1) !important;
}
.example-border {
  max-width: 300px;
  height: 120px;
  margin-bottom: 20px;
  border: 1px solid #e4eaec;
}
.example-border > div {
  float: left;
  width: 50%;
  height: 100%;
  padding-top: 15px;
  padding-left: 15px;
}
.opacity-example span {
  display: inline-block;
  width: 55px;
  white-space: nowrap;
}
.opacity-four {
  color: rgba(66, 66, 66, .4) !important;
}
.opacity-six {
  color: rgba(66, 66, 66, .6) !important;
}
.opacity-eight {
  color: rgba(66, 66, 66, .8) !important;
}
.opacity-example .opacity-four i,
.opacity-example .opacity-six i,
.opacity-example .opacity-eight i,
.opacity-example .grey-800 i {
  margin-right: 5px;
}



.color-primaries > div { border-radius:3px; }

.amethyst-purple-bg { background:#764b8e; }
.sapphire-blue-bg { background:#2B8AD3; }
.citrine-orange-bg { background:#ff7400; }
.emerald-green-bg { background:#58be52; }
.garnet-red-bg { background:#cc3438; }
.onyx-black-bg { background:#504f4f; }
.tourmaline-pink-bg { background:#a02f6f; }
.agate-grey-bg { background:#646464; }
.amber-yellow-bg { background:#ffe800; }
.cyan-bg { background:#40B6CF; }

.amethyst-purple { color:#764b8e; }
.sapphire-blue { color:#2B8AD3; }
.citrine-orange { color:#ff7400; }
.emerald-green { color:#58be52; }
.garnet-red { color:#cc3438; }
.onyx-black { color:#504f4f; }
.tourmaline-pink { color:#a02f6f; }
.agate-grey { color:#646464; }
.amber-yellow { color:#ffe800; }
.cyan-clr { color:#40B6CF; }

.intensity100 { opacity:1; }
.intensity90 { opacity:0.9; }
.intensity80 { opacity:0.8; }
.intensity70 { opacity:0.7; }
.intensity60 { opacity:0.6; }
.intensity50 { opacity:0.5; }
.intensity40 { opacity:0.4; }
.intensity30 { opacity:0.3; }
.intensity20 { opacity:0.2; }
.intensity10 { opacity:0.1; }




#myswatches { margin:0; padding:0; }
#myswatches > div { width:40px !important; height:40px !important; font-size:0; margin-right:10px; cursor:pointer; margin-bottom:5px;  }
#myswatches > div:nth-child(6), #myswatches > div:nth-child(11) { margin-right:0px;}
#myswatches > div:hover {  border:1px solid #000; }
.intensities { margin:0 0 0 0; padding:0 0 0 30px; }
.intensities li { list-style-type:none; margin-bottom:4px; width:21.3px; display:inline-block; border:1px solid #FFF; border-radius:3px;  }
.intensities li a { padding:0 5px; display:block; color:#000; width:100%; line-height:25px; text-decoration:none; padding:5px; border-radius:3px; }
.intensities li:hover { border:1px solid #333; }




.mypalletes { margin:0; padding:0; }
.mypalletes div { margin:0 10px 10px 0; padding:0; width:40px; height:40px; border:1px solid #FFF;  }
.mypalletes div:last-child { margin:0 0px 10px 0; }
.mypalletes div img { width:100%; height:100%; border-radius:4px; }
.mypalletes div img:hover { border:1px solid #000; }