.colorPicker .twod {
    position: relative;
    width: 80%;
    height: 450px;
    float: right;
    border-radius: 3px
}

.colorPicker .twod .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 3px
}

.colorPicker .twod .bg1 {
    z-index: 0;
    background: -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #fff), color-stop(100%, rgba(255, 255, 255, 0)));
    background: -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%);
    background: -o-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%)
}

.colorPicker .twod .bg2 {
    z-index: 1;
    background: -moz-linear-gradient(top, transparent 0%, #000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, #000));
    background: -webkit-linear-gradient(top, transparent 0%, #000 100%);
    background: -o-linear-gradient(top, transparent 0%, #000 100%);
    background: linear-gradient(to bottom, transparent 0%, #000 100%)
}

.colorPicker .twod .pointer {
    position: relative;
    z-index: 2;
    width: 8px
}

.colorPicker .twod .pointer .shape {
    position: absolute
}

.colorPicker .twod .pointer .shape1 {
    margin-left: -9px;
    margin-top: -9px;
    width: 18px;
    height: 18px;
    border: 3px solid #3f3844;
    -moz-border-radius: 9px;
    border-radius: 9px
}

.colorPicker .twod .pointer .shape2 {
    margin-left: -6px;
    margin-top: -6px;
    width: 12px;
    height: 12px;
    border: 3px solid white;
    -moz-border-radius: 6px;
    border-radius: 6px
}

.colorPicker .oned {
    width: 11.5%;
    height: 450px;
    float: left;
    border-radius: 3px
}

.colorPicker .oned .bg {
    width: 100%;
    height: 100%;
    background: -moz-linear-gradient(top, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, red), color-stop(17%, #ff0), color-stop(33%, lime), color-stop(50%, cyan), color-stop(66%, blue), color-stop(83%, #f0f), color-stop(100%, red));
    background: -webkit-linear-gradient(top, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);
    background: -o-linear-gradient(top, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);
    background: linear-gradient(to bottom, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);
    border-radius: 3px
}

.colorPicker .oned .pointer {
    position: relative;
    z-index: 2
}

.colorPicker .oned .pointer .shape {
    position: absolute;
    width: calc(100% + 6px);
    margin-left: -3px;
    margin-top: -4px;
    height: 9px;
    border: 3px solid #3f3844;
    -moz-border-radius: 3px;
    border-radius: 3px
}


*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}


.color-group {
    width: 5%;
    float: left;
    display: block
}

.color-block {
    float: left;
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 100%
}

.color-block div {
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.375s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: all 0.375s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: all 0.375s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.375s cubic-bezier(0.4, 0, 0.2, 1)
}

@media only screen and (max-width:48em) {
    article#chart section>h5 {
        margin: 0 0 1em 0.75em
    }
}

@media only screen and (min-width:48.063em) {
    .color-block:hover div {
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -ms-transform: scale(2);
        -o-transform: scale(2);
        transform: scale(2);
        border-radius: 3px;
        z-index: 4
    }
}