.colorcontainer {
   margin-top:20px;
   float:left;
   margin-left:20px!important;
}
.wheel, .umbrella, .color {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 7.5em);
  top: calc(50% - 7.5em);
  width: 15em;
  height: 15em;
  margin:0;
}

.menuwheel{left:0!important;}

.wheel {
  overflow: hidden;
  width: 15em;
  height: 15em;
  position: relative;
}

.umbrella {
  position: static;
  /*-webkit-filter: blur(1.7em);*/
  -webkit-transform: scale(1.35);
}

.color, .color:nth-child(n+7):after {
  clip: rect(0, 15em, 15em, 7.5em);
}

.color:after, .color:nth-child(n+7) {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 7.5em);
  top: calc(50% - 7.5em);
  width: 15em;
  height: 15em;
  clip: rect(0, 7.5em, 15em, 0);
}

.color:nth-child(1):after {
background:linear-gradient(lightyellow, #FFFFAD) repeat scroll 0 0 rgba(0, 0, 0, 0);


  transform: rotate(30deg);
  z-index: 12;
}

.color:nth-child(2):after {
background-color: yellow;

  transform: rotate(60deg);
  z-index: 11;
}

.color:nth-child(3):after {
  background-color:#EBD330;

  transform: rotate(90deg);
  z-index: 10;
}

.color:nth-child(4):after {
  background-color:#F59B0F;

  transform: rotate(120deg);
  z-index: 9;
}

.color:nth-child(5):after {
background:#ACB4E5;

  transform: rotate(150deg);
  z-index: 8;
}

.color:nth-child(6):after {

background-color: blue;

  transform: rotate(180deg);
  z-index: 7;
}

.color:nth-child(7):after {
background:#BE89D7;
  transform: rotate(180deg);
 z-index: 13;
}

.color:nth-child(8):after {

 background-color:#D797C9;
  transform: rotate(210deg);
 z-index: 14;
}

.color:nth-child(9):after {
  background-color: #D70AAA;
  transform: rotate(240deg);
 z-index: 15;
}

.color:nth-child(10):after {
  background-color: #6A38BB;
  transform: rotate(270deg);
 z-index: 16;
}

.color:nth-child(11):after {
    background-color: #A52E7F;
  transform: rotate(300deg);
 z-index: 17;
}

.color:nth-child(12):after {
  background-color: red;
  transform: rotate(330deg);
 z-index: 18;
}

body {
  background: #f2f2f2;
 
}
#center {
    position: absolute;
    left: 70px;
    top: 70px;
    width: 72px;
    height: 72px;
    z-index: 30;
    background: #eee;
    background: linear-gradient(top, #fcc, #fff);
    background: -moz-linear-gradient(top, #fff, #fff);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));
    border-radius: 37px;
    -moz-border-radius: 37px;
    -webkit-border-radius: 37px;
}
#centermenu {
    position: absolute;
    left: 33.5%;/*38.5%;*/
    top: 70px;
    width: 72px;
    height: 72px;
    z-index: 30;
    background: #eee;
    background: linear-gradient(top, #fcc, #fff);
    background: -moz-linear-gradient(top, #fff, #fff);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));
    border-radius: 37px;
    -moz-border-radius: 37px;
    -webkit-border-radius: 37px;
}
#center a,#centermenu a{
    display: block;
    width: 100%;
    height: 100%;
    text-align:center;
    margin-top:20px;
    text-decoration:none;
}