/* Circle */
    .Circle select::-webkit-scrollbar {display:none;}
    .Circle select::-moz-scrollbar {display:none;}
    .Circle select::-o-scrollbar {display:none;}
    .Circle select::-google-ms-scrollbar {display:none;}
    .Circle select::-khtml-scrollbar {display:none;}
    .Circle { text-align: center;}
    .Circle select *{outline:none; border: none; box-sizing: border-box;}
    .Circle select{overflow: hidden;margin: 0; padding: 0;; position: relative; font-size: 7px; border: none; width: 30em; padding-left: 0; height: 30em;overflow-y: 0; outline:none; background: #eee; -webkit-appearance: none; -moz-appearance: none;}
    .Circle select option{  height: 30px; line-height: 0px;  width: 30px;border: none; margin: 0; padding: 0; border-radius: 120px; background: transparent; -webkit-appearance: none;}
    .Circle select option:first-child{ display: block;}
    .Circle select option:focus{ background:#000}
    .Circle select option:checked { background: blue; display: block; }
    .Circle select option:last-child,select option:checked ~ option{background: rgb(139, 139, 255); display: block !important;}
    .Circle select:focus option:checked { z-index: 100;  background: rgba(0,0,0,0) linear-gradient(0deg, rgb(139, 139, 255) 0%, rgb(139, 139, 255) 100%);}
    .Circle select option:checked { z-index: 100; }
    .Circle select option:checked:after{ pointer-events:none; color:#000; line-height:3em; transform:rotate(180deg); z-index: 1000; content: attr(value); height: 4em; position: absolute; left: 50%;left: 50%; border-radius: 100px; top: 50%; width: 4em; margin-top: -2em; margin-left: -2em; border:.5em solid rgba(0,0,0,0.1); box-sizing: border-box; background: #fff; text-align: center; box-shadow: 0px 2px 2px rgba(0,0,0,0.2);  display: block; z-index: 10000;;;}
    .Circle select:after{ content: ""; z-index: 100; background: transparent; pointer-events: none; border-radius: 30em; display: block; position: absolute; box-shadow: 0px 0px 0px 20em rgba(255, 255, 255, 1); left: 4em; top: 4em; height: 22em; width: 22em;}
    .Circle select:before{ pointer-events: none; content: "CSS";font-weight:100; line-height:7em;font-size:2em; text-align:center; z-index: 100; box-shadow: 0px 1px 2px rgba(0,0,0,0.4); background: #fff;z-index:2100; border-radius: 30em; display: block; position: absolute; left: 4em; top: 4em; height: 7em; width: 7em;}
    .Circle select option{ display: block; position: absolute; top: 50%; left: 50%; margin: -2.5em; width: 5em; height: 5em;}
/* Position Options */
    .Circle select option:nth-of-type(0) {
    -webkit-transform: rotate(270deg) translate(9em) rotate(-90deg);
    transform: rotate(270deg) translate(9em) rotate(-90deg);
    }
    .Circle select option:nth-of-type(1) {
    -webkit-transform: rotate(252deg) translate(9em) rotate(-72deg);
    transform: rotate(252deg) translate(9em) rotate(-72deg);
    }
    .Circle select option:nth-of-type(2) {
    -webkit-transform: rotate(234deg) translate(9em) rotate(-54deg);
    transform: rotate(234deg) translate(9em) rotate(-54deg);
    }
    .Circle select option:nth-of-type(3) {
    -webkit-transform: rotate(216deg) translate(9em) rotate(-36deg);
    transform: rotate(216deg) translate(9em) rotate(-36deg);
    }
    .Circle select option:nth-of-type(4) {
    -webkit-transform: rotate(198deg) translate(9em) rotate(-18deg);
    transform: rotate(198deg) translate(9em) rotate(-18deg);
    }
    .Circle select option:nth-of-type(5) {
    -webkit-transform: rotate(180deg) translate(9em) rotate(0deg);
    transform: rotate(180deg) translate(9em) rotate(0deg);
    }
    .Circle select option:nth-of-type(6) {
    -webkit-transform: rotate(162deg) translate(9em) rotate(18deg);
    transform: rotate(162deg) translate(9em) rotate(18deg);
    }
    .Circle select option:nth-of-type(7) {
    -webkit-transform: rotate(144deg) translate(9em) rotate(36deg);
    transform: rotate(144deg) translate(9em) rotate(36deg);
    }
    .Circle select option:nth-of-type(8) {
    -webkit-transform: rotate(126deg) translate(9em) rotate(54deg);
    transform: rotate(126deg) translate(9em) rotate(54deg);
    }
    .Circle select option:nth-of-type(9) {
    -webkit-transform: rotate(108deg) translate(9em) rotate(72deg);
    transform: rotate(108deg) translate(9em) rotate(72deg);
    }
    .Circle select option:nth-of-type(10) {
    -webkit-transform: rotate(90deg) translate(9em) rotate(90deg);
    transform: rotate(90deg) translate(9em) rotate(90deg);
    }
    .Circle select option:nth-of-type(11) {
    -webkit-transform: rotate(72deg) translate(9em) rotate(108deg);
    transform: rotate(72deg) translate(9em) rotate(108deg);
    }
    .Circle select option:nth-of-type(12) {
    -webkit-transform: rotate(54deg) translate(9em) rotate(126deg);
    transform: rotate(54deg) translate(9em) rotate(126deg);
    }
    .Circle select option:nth-of-type(13) {
    -webkit-transform: rotate(36deg) translate(9em) rotate(144deg);
    transform: rotate(36deg) translate(9em) rotate(144deg);
    }
    .Circle select option:nth-of-type(14) {
    -webkit-transform: rotate(18deg) translate(9em) rotate(162deg);
    transform: rotate(18deg) translate(9em) rotate(162deg);
    }
    .Circle select option:nth-of-type(15) {
    -webkit-transform: rotate(0deg) translate(9em) rotate(180deg);
    transform: rotate(0deg) translate(9em) rotate(180deg);
    }select option:nth-of-type(16) {
    -webkit-transform: rotate(-18deg) translate(9em) rotate(198deg);
    transform: rotate(-18deg) translate(9em) rotate(198deg);
    }
    .Circle select option:nth-of-type(17) {
    -webkit-transform: rotate(-36deg) translate(9em) rotate(216deg);
    transform: rotate(-36deg) translate(9em) rotate(216deg);
    }
    .Circle select option:nth-of-type(18) {
    -webkit-transform: rotate(-54deg) translate(9em) rotate(234deg);
    transform: rotate(-54deg) translate(9em) rotate(234deg);
    }
    .Circle select option:nth-of-type(19) {
    -webkit-transform: rotate(-72deg) translate(9em) rotate(252deg);
    transform: rotate(-72deg) translate(9em) rotate(252deg);
    }