.circle-menu li{list-style:none;display:inline}.circle-menu{position:relative;width:200px;height:200px;border:dashed 2px #cccccc70;border-radius:50%;margin:140px auto 50px;background-color:#ffeb3b1a}.circle-menu i{position:absolute;top:50%;width:calc(100% - 120px);text-align:center;padding:0 60px;display:none}.circle-menu a{display:block;position:absolute;top:50%;left:50%;width:8em;height:8em;line-height:8em;margin:-3.5em;-moz-border-radius:4em;-webkit-border-radius:4em;border-radius:4em;text-align:center;text-decoration:none;color:white;box-sizing:border-box}.circle-menu a.cr1{background:#009cde;opacity:.6}.circle-menu a.cr2{background:#4caf50;opacity:.6}.circle-menu a.cr3{background:#9c27b0;opacity:.6}.circle-menu a.cr4{background:#ff7043;opacity:.6}.circle-menu a.cr1:hover{opacity:1.0}.circle-menu a.cr2:hover{opacity:1.0}.circle-menu a.cr3:hover{opacity:1.0}.circle-menu a.cr4:hover{opacity:1.0}.circle-menu .cr1{transform:rotate(0deg) translate(100px) rotate(-0deg);-webkit-transform:rotate(0deg) translate(100px) rotate(-0deg);-ms-transform:rotate(0deg) translate(100px) rotate(-0deg)}.circle-menu .cr2{transform:rotate(90deg) translate(100px) rotate(-90deg);-webkit-transform:rotate(90deg) translate(100px) rotate(-90deg);-ms-transform:rotate(90deg) translate(100px) rotate(-90deg)}.circle-menu .cr3{transform:rotate(180deg) translate(100px) rotate(-180deg);-webkit-transform:rotate(180deg) translate(100px) rotate(-180deg);-ms-transform:rotate(180deg) translate(100px) rotate(-180deg)}.circle-menu .cr4{transform:rotate(270deg) translate(100px) rotate(-270deg);-webkit-transform:rotate(270deg) translate(100px) rotate(-270deg);-ms-transform:rotate(270deg) translate(100px) rotate(-270deg)}@media only screen and (min-width:768px){.circle-menu{width:400px;height:400px}.circle-menu .cr1{transform:rotate(0deg) translate(200px) rotate(-0deg);-webkit-transform:rotate(0deg) translate(200px) rotate(-0deg);-ms-transform:rotate(0deg) translate(200px) rotate(-0deg)}.circle-menu .cr2{transform:rotate(90deg) translate(200px) rotate(-90deg);-webkit-transform:rotate(90deg) translate(200px) rotate(-90deg);-ms-transform:rotate(90deg) translate(200px) rotate(-90deg)}.circle-menu .cr3{transform:rotate(180deg) translate(200px) rotate(-180deg);-webkit-transform:rotate(180deg) translate(200px) rotate(-180deg);-ms-transform:rotate(180deg) translate(200px) rotate(-180deg)}.circle-menu .cr4{transform:rotate(270deg) translate(200px) rotate(-270deg);-webkit-transform:rotate(270deg) translate(200px) rotate(-270deg);-ms-transform:rotate(270deg) translate(200px) rotate(-270deg)}.circle-menu i{display:block}}