.awe-color-palette:before, .awe-color-palette:after { content: " "; display: table; }
.awe-color-palette:after { clear: both; }
.awe-color-palette { *zoom: 1; }

.awe-color-palette .palette { padding: 20px 0; width: 80%; margin: 0 auto; transition: all 0.3s linear; }

.awe-color-palette .color { float: left; position: relative; height: 10px; padding: 10px 0; width: 20%; color: #fff; transition: all 0.5s linear; overflow: hidden; }
.awe-color-palette .color span { position: absolute; bottom: -20px; left: -20px; opacity: 0; transition: all 0.2s linear; }

.awe-color-palette .palette:hover { width: 90%; }
.awe-color-palette .palette:hover .color { padding: 20px 0; }
.awe-color-palette .palette:hover .color span { opacity: 1;  bottom: 5px; left: 5px; }

.awe-color-palette.count-2 .color { width: 50%; }
.awe-color-palette.count-3 .color { width: 33%; }
.awe-color-palette.count-4 .color { width: 25%; }
.awe-color-palette.count-6 .color { width: 16%; font-size: 0.9em; }
.awe-color-palette.count-7 .color { width: 14%; font-size: 0.9em; }
.awe-color-palette.count-8 .color { width: 12%; font-size: 0.8em; }
.awe-color-palette.count-9 .color { width: 11%; font-size: 0.8em; }
.awe-color-palette.count-10 .color { width: 10%; font-size: 0.8em; }