/*
To edit this file edit the .scss version then use this tool to convert to css
be carful it has some customizations done here signed with mxl
https://www.cssportal.com/scss-to-css/

Alternate edit/add items by this rule

	   .spread:nth-child(#{$m}) {
		    transition-delay: $m * 0.02s;
		    transform: rotate(45 + 180 * $m);
	   }
	   .spread:nth-child(#{$m}).unit {
			transition-delay: $m * 0.04s;
			transform: rotate(-180 * $m + 720 - 45);
	   }
	   
	   
--mur
*/

/*@import "compass/css3";*/
/* [1] */
/* [2] */
/* [3] */
/* [4] */
/* [5] */
/* [6] */
/* Styles: */

.menu_menuicon img {	
	margin-top: -5px;
}
.icon {
  position: relative;
  background: transparent;
  cursor: pointer;
  margin: auto;
  color: transparent;
  border-radius: 50%;
  height: 120px;
  width: 120px;
  line-height: 120px;
  text-align: left;
  font-size: 2.75em;
  font-weight: bold;
  -webkit-transition: 0.24s 0.2s;
  -moz-transition: 0.24s 0.2s;
  -ms-transition: 0.24s 0.2s;
  -o-transition: 0.24s 0.2s;
  transition: 0.24s 0.2s;
}
.icon:hover {
	background: rgba(255, 255, 255, 0.75);
	-webkit-box-shadow: 0px 0px 27px 5px rgba(255,217,122,1);
	-moz-box-shadow: 0px 0px 27px 5px rgba(255,217,122,1);
	-ms-box-shadow: 0px 0px 27px 5px rgba(255,217,122,1);
	-o-box-shadow: 0px 0px 27px 5px rgba(255,217,122,1);
	box-shadow: 0px 0px 27px 5px rgba(255,217,122,1);

}
.menu {
  position: absolute;
  top: -130px;
  left: -120px;
  border: 180px solid transparent;
  cursor: default;
  xxborder-radius: 50%;
  transform: scale(0);
  -webkit-transition: transform 1.4s 0.07s;
  -moz-transition: transform 1.4s 0.07s;
  -ms-transition: transform 1.4s 0.07s;
  -o-transition: transform 1.4s 0.07s;
  transition: transform 1.4s 0.07s;
  z-index: -5;
}
.spread {
  position: absolute;
  top: -120px;
  left: -120px;
  transform-origin: 120px 120px;
  -webkit-transition: all 0.5s 0.1s;
  -moz-transition: all 0.5s 0.1s;
  -ms-transition: all 0.5s 0.1s;
  -o-transition: all 0.5s 0.1s;
  transition: all 0.5s 0.1s;
  margin:20px;
  z-index: 2000;
}
.spread a, .unit  {
	  z-index: 2000;
}
.icon:hover {
  /* Where all the MAGIC happens: */
}
.icon:hover .menu {
  -webkit-transition: transform 0.4s 0.08s, z-index 0s 0.5s;
  -moz-transition: transform 0.4s 0.08s, z-index 0s 0.5s;
  -ms-transition: transform 0.4s 0.08s, z-index 0s 0.5s;
  -o-transition: transform 0.4s 0.08s, z-index 0s 0.5s;
  transition: transform 0.4s 0.08s, z-index 0s 0.5s;
  transform: scale(1);
  z-index: 5;
}
.icon:hover .spread, .icon:hover .unit {
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -ms-transition: all 0.6s;
  -o-transition: all 0.6s;
  transition: all 0.6s;
}
.icon:hover .spread:nth-child(1) {
  transition-delay: 0.02s;
  transform: rotate(57.85714deg);
  margin-top: -2px; /* mxl */
   margin-left: 34px; /* mxl */
   z-index: 5000;
}
.icon:hover .spread:nth-child(1) .unit {
  transition-delay: 0.04s;
  transform: rotate(662.14286deg);
  z-index: 5000;
}
.icon:hover .spread:nth-child(2) {
  transition-delay: 0.04s;
  transform: rotate(70.71429deg);
  margin-top: 10px; /* mxl */
  z-index: 5000;
}
.icon:hover .spread:nth-child(2) .unit {
  transition-delay: 0.08s;
  transform: rotate(649.28571deg);
  z-index: 5000;
}
.icon:hover .spread:nth-child(3) {
  transition-delay: 0.06s;
  transform: rotate(83.57143deg);
  margin-top: 16px; /* mxl */
    z-index: 5000;
}
.icon:hover .spread:nth-child(3) .unit {
  transition-delay: 0.12s;
  transform: rotate(636.42857deg);
}
.icon:hover .spread:nth-child(4) {
  transition-delay: 0.08s;
  transform: rotate(96.42857deg);
}
.icon:hover .spread:nth-child(4) .unit {
  transition-delay: 0.16s;
  transform: rotate(623.57143deg);
}
.icon:hover .spread:nth-child(5) {
  transition-delay: 0.1s;
  transform: rotate(109.28571deg);
}
.icon:hover .spread:nth-child(5) .unit {
  transition-delay: 0.2s;
  transform: rotate(610.71429deg);
}
.icon:hover .spread:nth-child(6) {
  transition-delay: 0.12s;
  transform: rotate(122.14286deg);
}
.icon:hover .spread:nth-child(6) .unit {
  transition-delay: 0.24s;
  transform: rotate(597.85714deg);
}
.icon:hover .spread:nth-child(7) {
  transition-delay: 0.14s;
  transform: rotate(135deg);
}
.icon:hover .spread:nth-child(7) .unit {
  transition-delay: 0.28s;
  transform: rotate(585deg);
}
.icon:hover .spread:nth-child(8) {
  transition-delay: 0.16s;
  transform: rotate(147.85714deg);
}
.icon:hover .spread:nth-child(8) .unit {
  transition-delay: 0.32s;
  transform: rotate(572.14286deg);
}
.icon:hover .spread:nth-child(9) {
  transition-delay: 0.18s;
  transform: rotate(160.71429deg);
}
.icon:hover .spread:nth-child(9) .unit {
  transition-delay: 0.36s;
  transform: rotate(559.28571deg);
}
.icon:hover .spread:nth-child(10) {
  transition-delay: 0.2s;
  transform: rotate(173.57143deg);
  margin-top: 28px; /* mxl */
}
.icon:hover .spread:nth-child(10) .unit {
  transition-delay: 0.4s;
  transform: rotate(546.42857deg);
}
.icon:hover .spread:nth-child(11) {
  transition-delay: 0.22s;
  transform: rotate(186.42857deg);
   margin-top: 40px; /* mxl */
}
.icon:hover .spread:nth-child(11) .unit {
  transition-delay: 0.44s;
  transform: rotate(533.57143deg);
}

/* wishshop */
.icon:hover .spread:nth-child(12) {
  transition-delay: 0.24s;
  transform: rotate(199.28571deg);
  margin-top: 60px; /* mxl */
  margin-left: 34px; /* mxl */
}
.icon:hover .spread:nth-child(12) .unit {
  transition-delay: 0.48s;
  transform: rotate(520.71429deg);
}

/* items */
.icon:hover .spread:nth-child(13) {
  transition-delay: 0.26s;
  transform: rotate(212.14286deg);
    margin-top: 86px; /* mxl */
    margin-left: 60px; /* mxl */
}
.icon:hover .spread:nth-child(13) .unit {
  transition-delay: 0.52s;
  transform: rotate(507.85714deg);
}
.icon:hover .spread:nth-child(14) {
  transition-delay: 0.28s;
  transform: rotate(225deg);
    margin-top: 118px; /* mxl */
    margin-left: 88px; /* mxl */  
}
.icon:hover .spread:nth-child(14) .unit {
  transition-delay: 0.56s;
  transform: rotate(495deg);
}

/*
.icon:hover .spread:nth-child(15) {
  transition-delay: 0.28s;
  transform: rotate(225deg);
}
.icon:hover .spread:nth-child(15) .unit {
  transition-delay: 0.56s;
  transform: rotate(495deg);
}

	   .spread:nth-child(16) {
		    transition-delay: 0.3s;
		    transform: rotate(315deg);
	   }
	   .spread:nth-child(16).unit {
			transition-delay: 0.6s;
			transform: rotate(2025deg);
	   }


			
/* END .icon:hover */
.unit {
  margin: 5px;
  position: absolute;
  background: transparent;
  font-size: 14px;
  text-decoration: none;
  width: 80px;
  height: 20px;
  line-height: 20px;
  color: #241c09;
  xxborder-radius: 50%;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -ms-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
  background-color: rgba(240, 237, 225,0.8);
  border-radius: 4px;
  
  border: 1px solid #754309;
  -webkit-box-shadow: 0px 2px 5px 0px #000000; 
  box-shadow: 0px 2px 5px 0px #000000;
}