#menu {
  width: 120px;
  margin: 0 auto;
  overflow: hidden;
}
#menu .menu-item {
  float: left;
  pointer-events: auto !important;
  position: relative;
  width: 120px;
  height: 120px;
  background-color: #fff;
  border-radius: 60px;
}
#menu .menu-item .wrap {
  position: relative;
  width: 120px;
  height: 120px;
  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
  -moz-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
}
#menu .menu-item .circle {
  position: absolute;
  width: 10px;
  height: 10px;
  top: 50%;
  left: 50%;
  margin: -5px 0 0 -5px;
  border-radius: 5px;
  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
  -moz-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
}
#menu .menu-item .circle.green {
  background-color: #22abff;
}
#menu .menu-item .circle.red {
  background-color: #cdcbcb;
}
#menu .menu-item .line {
  position: absolute;
  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
  -moz-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
}
#menu .menu-item.services .wrap {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#menu .menu-item.services .circle {
  -webkit-transition-delay: 400ms;
  -moz-transition-delay: 400ms;
  -moz-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  transition-delay: 400ms;
}
#menu .menu-item.services .line {
  top: 50%;
  left: 50%;
  background-color: #e3e3e1;
}
#menu .menu-item.services .line-1 {
  width: 1px;
  height: 60px;
  margin: -30px 0 0 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#menu .menu-item.services .line-2 {
  width: 1px;
  height: 42px;
  margin: -21px 0 0 0;
}
#menu .menu-item.services .line-3 {
  width: 42px;
  height: 1px;
  margin: 0 0 0 -21px;
}
#menu .menu-item.services .line-4 {
  width: 42px;
  height: 1px;
  margin: -21px 0 0 -21px;
  -webkit-transform-origin: right top;
  -moz-transform-origin: right top;
  -moz-transform-origin: right top;
  -o-transform-origin: right top;
  transform-origin: right top;
}
#menu .menu-item.services .line-5 {
  width: 42px;
  height: 1px;
  margin: 21px 0 0 -21px;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -moz-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
}
#menu .menu-item.services .line-6 {
  width: 1px;
  height: 42px;
  margin: -21px 0 0 -21px;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -moz-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
}
#menu .menu-item.services .line-7 {
  width: 1px;
  height: 42px;
  margin: -21px 0 0 21px;
  -webkit-transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -o-transform-origin: right bottom;
  transform-origin: right bottom;
}
#menu .menu-item.services .circle-1 {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
#menu .menu-item.services .circle-2 {
  -webkit-transform: translate(-21px, -21px);
  -moz-transform: translate(-21px, -21px);
  -moz-transform: translate(-21px, -21px);
  -o-transform: translate(-21px, -21px);
  transform: translate(-21px, -21px);
}
#menu .menu-item.services .circle-3 {
  -webkit-transform: translate(21px, -21px);
  -moz-transform: translate(21px, -21px);
  -moz-transform: translate(21px, -21px);
  -o-transform: translate(21px, -21px);
  transform: translate(21px, -21px);
}
#menu .menu-item.services .circle-4 {
  -webkit-transform: translate(21px, 21px);
  -moz-transform: translate(21px, 21px);
  -moz-transform: translate(21px, 21px);
  -o-transform: translate(21px, 21px);
  transform: translate(21px, 21px);
}
#menu .menu-item.services .circle-5 {
  -webkit-transform: translate(-21px, 21px);
  -moz-transform: translate(-21px, 21px);
  -moz-transform: translate(-21px, 21px);
  -o-transform: translate(-21px, 21px);
  transform: translate(-21px, 21px);
}
#menu .menu-item.services .circle-6 {
  -webkit-transform: translate(-21px, 0);
  -moz-transform: translate(-21px, 0);
  -moz-transform: translate(-21px, 0);
  -o-transform: translate(-21px, 0);
  transform: translate(-21px, 0);
}
#menu .menu-item.services .circle-7 {
  -webkit-transform: translate(21px, 0);
  -moz-transform: translate(21px, 0);
  -moz-transform: translate(21px, 0);
  -o-transform: translate(21px, 0);
  transform: translate(21px, 0);
}
#menu .menu-item.services .circle-8 {
  -webkit-transform: translate(0, 21px);
  -moz-transform: translate(0, 21px);
  -moz-transform: translate(0, 21px);
  -o-transform: translate(0, 21px);
  transform: translate(0, 21px);
}
#menu .menu-item.services .circle-9 {
  -webkit-transform: translate(0, -21px);
  -moz-transform: translate(0, -21px);
  -moz-transform: translate(0, -21px);
  -o-transform: translate(0, -21px);
  transform: translate(0, -21px);
}
#menu .menu-item.services:hover .wrap,
#menu .menu-item.services.active .wrap {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
#menu .menu-item.services:hover .line-4,
#menu .menu-item.services.active .line-4 {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
#menu .menu-item.services:hover .line-5,
#menu .menu-item.services.active .line-5 {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
#menu .menu-item.services:hover .line-6,
#menu .menu-item.services.active .line-6 {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
#menu .menu-item.services:hover .line-7,
#menu .menu-item.services.active .line-7 {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
#menu .menu-item.services:hover .circle-1,
#menu .menu-item.services.active .circle-1 {
  -webkit-transform: translate(21px, -21px);
  -moz-transform: translate(21px, -21px);
  -moz-transform: translate(21px, -21px);
  -o-transform: translate(21px, -21px);
  transform: translate(21px, -21px);
}
#menu .menu-item.services:hover .circle-2,
#menu .menu-item.services.active .circle-2 {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
#menu .menu-item.services:hover .circle-3,
#menu .menu-item.services.active .circle-3 {
  -webkit-transform: translate(21px, 21px);
  -moz-transform: translate(21px, 21px);
  -moz-transform: translate(21px, 21px);
  -o-transform: translate(21px, 21px);
  transform: translate(21px, 21px);
}
#menu .menu-item.services:hover .circle-4,
#menu .menu-item.services.active .circle-4 {
  -webkit-transform: translate(-21px, 21px);
  -moz-transform: translate(-21px, 21px);
  -moz-transform: translate(-21px, 21px);
  -o-transform: translate(-21px, 21px);
  transform: translate(-21px, 21px);
}
#menu .menu-item.services:hover .circle-5,
#menu .menu-item.services.active .circle-5 {
  -webkit-transform: translate(-21px, -21px);
  -moz-transform: translate(-21px, -21px);
  -moz-transform: translate(-21px, -21px);
  -o-transform: translate(-21px, -21px);
  transform: translate(-21px, -21px);
}
#menu .menu-item.services:hover .circle-6,
#menu .menu-item.services.active .circle-6 {
  -webkit-transform: translate(0, -21px);
  -moz-transform: translate(0, -21px);
  -moz-transform: translate(0, -21px);
  -o-transform: translate(0, -21px);
  transform: translate(0, -21px);
}
#menu .menu-item.services:hover .circle-7,
#menu .menu-item.services.active .circle-7 {
  -webkit-transform: translate(0, 21px);
  -moz-transform: translate(0, 21px);
  -moz-transform: translate(0, 21px);
  -o-transform: translate(0, 21px);
  transform: translate(0, 21px);
}
#menu .menu-item.services:hover .circle-8,
#menu .menu-item.services.active .circle-8 {
  -webkit-transform: translate(-21px, 0);
  -moz-transform: translate(-21px, 0);
  -moz-transform: translate(-21px, 0);
  -o-transform: translate(-21px, 0);
  transform: translate(-21px, 0);
}
#menu .menu-item.services:hover .circle-9,
#menu .menu-item.services.active .circle-9 {
  -webkit-transform: translate(21px, 0);
  -moz-transform: translate(21px, 0);
  -moz-transform: translate(21px, 0);
  -o-transform: translate(21px, 0);
  transform: translate(21px, 0);
}
#menu .menu-item.work .circle {
  -webkit-transition-delay: 400ms;
  -moz-transition-delay: 400ms;
  -moz-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  transition-delay: 400ms;
}
#menu .menu-item.work .line {
  top: 50%;
  left: 50%;
  background-color: #e3e3e1;
}
#menu .menu-item.work .line-1 {
  width: 1px;
  height: 42px;
  margin: -21px 0 0 0;
}
#menu .menu-item.work .line-2 {
  width: 21px;
  height: 1px;
  margin: -21px 0 0 0;
}
#menu .menu-item.work .line-3 {
  width: 21px;
  height: 1px;
  margin: 21px 0 0 -21px;
}
#menu .menu-item.work .line-4 {
  width: 1px;
  height: 21px;
  margin: 0 0 0 -21px;
}
#menu .menu-item.work .line-5 {
  width: 1px;
  height: 21px;
  margin: -21px 0 0 21px;
}
#menu .menu-item.work .line-6 {
  width: 42px;
  height: 1px;
  margin: 0 0 0 -21px;
}
#menu .menu-item.work .circle-1 {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
#menu .menu-item.work .circle-2 {
  -webkit-transform: translate(0, 21px);
  -moz-transform: translate(0, 21px);
  -moz-transform: translate(0, 21px);
  -o-transform: translate(0, 21px);
  transform: translate(0, 21px);
}
#menu .menu-item.work .circle-3 {
  -webkit-transform: translate(-21px, 21px);
  -moz-transform: translate(-21px, 21px);
  -moz-transform: translate(-21px, 21px);
  -o-transform: translate(-21px, 21px);
  transform: translate(-21px, 21px);
}
#menu .menu-item.work .circle-4 {
  -webkit-transform: translate(-21px, 0);
  -moz-transform: translate(-21px, 0);
  -moz-transform: translate(-21px, 0);
  -o-transform: translate(-21px, 0);
  transform: translate(-21px, 0);
}
#menu .menu-item.work .circle-5 {
  -webkit-transform: translate(21px, -21px);
  -moz-transform: translate(21px, -21px);
  -moz-transform: translate(21px, -21px);
  -o-transform: translate(21px, -21px);
  transform: translate(21px, -21px);
}
#menu .menu-item.work .circle-6 {
  -webkit-transform: translate(21px, 0);
  -moz-transform: translate(21px, 0);
  -moz-transform: translate(21px, 0);
  -o-transform: translate(21px, 0);
  transform: translate(21px, 0);
}
#menu .menu-item.work .circle-7 {
  -webkit-transform: translate(0, -21px);
  -moz-transform: translate(0, -21px);
  -moz-transform: translate(0, -21px);
  -o-transform: translate(0, -21px);
  transform: translate(0, -21px);
}
#menu .menu-item.work:hover .wrap,
#menu .menu-item.work.active .wrap {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
#menu .menu-item.work:hover .line-6,
#menu .menu-item.work.active .line-6 {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
#menu .menu-item.work:hover .circle-1,
#menu .menu-item.work.active .circle-1 {
  -webkit-transform: translate(0, 21px);
  -moz-transform: translate(0, 21px);
  -moz-transform: translate(0, 21px);
  -o-transform: translate(0, 21px);
  transform: translate(0, 21px);
}
#menu .menu-item.work:hover .circle-2,
#menu .menu-item.work.active .circle-2 {
  -webkit-transform: translate(-21px, 21px);
  -moz-transform: translate(-21px, 21px);
  -moz-transform: translate(-21px, 21px);
  -o-transform: translate(-21px, 21px);
  transform: translate(-21px, 21px);
}
#menu .menu-item.work:hover .circle-3,
#menu .menu-item.work.active .circle-3 {
  -webkit-transform: translate(-21px, 0);
  -moz-transform: translate(-21px, 0);
  -moz-transform: translate(-21px, 0);
  -o-transform: translate(-21px, 0);
  transform: translate(-21px, 0);
}
#menu .menu-item.work:hover .circle-4,
#menu .menu-item.work.active .circle-4 {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
#menu .menu-item.work:hover .circle-5,
#menu .menu-item.work.active .circle-5 {
  -webkit-transform: translate(0, -21px);
  -moz-transform: translate(0, -21px);
  -moz-transform: translate(0, -21px);
  -o-transform: translate(0, -21px);
  transform: translate(0, -21px);
}
#menu .menu-item.work:hover .circle-6,
#menu .menu-item.work.active .circle-6 {
  -webkit-transform: translate(21px, -21px);
  -moz-transform: translate(21px, -21px);
  -moz-transform: translate(21px, -21px);
  -o-transform: translate(21px, -21px);
  transform: translate(21px, -21px);
}
#menu .menu-item.work:hover .circle-7,
#menu .menu-item.work.active .circle-7 {
  -webkit-transform: translate(21px, 0);
  -moz-transform: translate(21px, 0);
  -moz-transform: translate(21px, 0);
  -o-transform: translate(21px, 0);
  transform: translate(21px, 0);
}
#menu .menu-item.blog .line-1 {
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  margin: -22px 0 0 -22px;
  border: solid 1px #e3e3e1;
  border-radius: 21px;
}
#menu .menu-item.blog .circle {
  -webkit-transition-delay: 400ms;
  -moz-transition-delay: 400ms;
  -moz-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  transition-delay: 400ms;
}
#menu .menu-item.blog .circle-1 {
  -webkit-transform: rotate(0deg) translateY(-22px);
  -moz-transform: rotate(0deg) translateY(-22px);
  -moz-transform: rotate(0deg) translateY(-22px);
  -o-transform: rotate(0deg) translateY(-22px);
  transform: rotate(0deg) translateY(-22px);
}
#menu .menu-item.blog .circle-2 {
  -webkit-transform: rotate(45deg) translateY(-22px);
  -moz-transform: rotate(45deg) translateY(-22px);
  -moz-transform: rotate(45deg) translateY(-22px);
  -o-transform: rotate(45deg) translateY(-22px);
  transform: rotate(45deg) translateY(-22px);
}
#menu .menu-item.blog .circle-3 {
  -webkit-transform: rotate(90deg) translateY(-22px);
  -moz-transform: rotate(90deg) translateY(-22px);
  -moz-transform: rotate(90deg) translateY(-22px);
  -o-transform: rotate(90deg) translateY(-22px);
  transform: rotate(90deg) translateY(-22px);
}
#menu .menu-item.blog .circle-4 {
  -webkit-transform: rotate(135deg) translateY(-22px);
  -moz-transform: rotate(135deg) translateY(-22px);
  -moz-transform: rotate(135deg) translateY(-22px);
  -o-transform: rotate(135deg) translateY(-22px);
  transform: rotate(135deg) translateY(-22px);
}
#menu .menu-item.blog .circle-5 {
  -webkit-transform: rotate(180deg) translateY(-22px);
  -moz-transform: rotate(180deg) translateY(-22px);
  -moz-transform: rotate(180deg) translateY(-22px);
  -o-transform: rotate(180deg) translateY(-22px);
  transform: rotate(180deg) translateY(-22px);
}
#menu .menu-item.blog .circle-6 {
  -webkit-transform: rotate(225deg) translateY(-22px);
  -moz-transform: rotate(225deg) translateY(-22px);
  -moz-transform: rotate(225deg) translateY(-22px);
  -o-transform: rotate(225deg) translateY(-22px);
  transform: rotate(225deg) translateY(-22px);
}
#menu .menu-item.blog .circle-7 {
  -webkit-transform: rotate(270deg) translateY(-22px);
  -moz-transform: rotate(270deg) translateY(-22px);
  -moz-transform: rotate(270deg) translateY(-22px);
  -o-transform: rotate(270deg) translateY(-22px);
  transform: rotate(270deg) translateY(-22px);
}
#menu .menu-item.blog .circle-8 {
  -webkit-transform: rotate(315deg) translateY(-22px);
  -moz-transform: rotate(315deg) translateY(-22px);
  -moz-transform: rotate(315deg) translateY(-22px);
  -o-transform: rotate(315deg) translateY(-22px);
  transform: rotate(315deg) translateY(-22px);
}
#menu .menu-item.blog:hover .wrap,
#menu .menu-item.blog.active .wrap {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
#menu .menu-item.blog:hover .circle-1,
#menu .menu-item.blog.active .circle-1 {
  -webkit-transform: rotate(0deg) translateY(0px) translateX(22px);
  -moz-transform: rotate(0deg) translateY(0px) translateX(22px);
  -moz-transform: rotate(0deg) translateY(0px) translateX(22px);
  -o-transform: rotate(0deg) translateY(0px) translateX(22px);
  transform: rotate(0deg) translateY(0px) translateX(22px);
}
#menu .menu-item.blog:hover .circle-2,
#menu .menu-item.blog.active .circle-2 {
  -webkit-transform: rotate(135deg) translateY(-22px) translateX(0px);
  -moz-transform: rotate(135deg) translateY(-22px) translateX(0px);
  -moz-transform: rotate(135deg) translateY(-22px) translateX(0px);
  -o-transform: rotate(135deg) translateY(-22px) translateX(0px);
  transform: rotate(135deg) translateY(-22px) translateX(0px);
}
#menu .menu-item.blog:hover .circle-3,
#menu .menu-item.blog.active .circle-3 {
  -webkit-transform: rotate(0deg) translateY(-22px) translateX(0px);
  -moz-transform: rotate(0deg) translateY(-22px) translateX(0px);
  -moz-transform: rotate(0deg) translateY(-22px) translateX(0px);
  -o-transform: rotate(0deg) translateY(-22px) translateX(0px);
  transform: rotate(0deg) translateY(-22px) translateX(0px);
}
#menu .menu-item.blog:hover .circle-4,
#menu .menu-item.blog.active .circle-4 {
  -webkit-transform: rotate(45deg) translateY(-22px) translateX(0px);
  -moz-transform: rotate(45deg) translateY(-22px) translateX(0px);
  -moz-transform: rotate(45deg) translateY(-22px) translateX(0px);
  -o-transform: rotate(45deg) translateY(-22px) translateX(0px);
  transform: rotate(45deg) translateY(-22px) translateX(0px);
}
#menu .menu-item.blog:hover .circle-5,
#menu .menu-item.blog.active .circle-5 {
  -webkit-transform: rotate(0deg) translateY(0px) translateX(-22px);
  -moz-transform: rotate(0deg) translateY(0px) translateX(-22px);
  -moz-transform: rotate(0deg) translateY(0px) translateX(-22px);
  -o-transform: rotate(0deg) translateY(0px) translateX(-22px);
  transform: rotate(0deg) translateY(0px) translateX(-22px);
}
#menu .menu-item.blog:hover .circle-6,
#menu .menu-item.blog.active .circle-6 {
  -webkit-transform: rotate(315deg) translateY(-22px) translateX(0px);
  -moz-transform: rotate(315deg) translateY(-22px) translateX(0px);
  -moz-transform: rotate(315deg) translateY(-22px) translateX(0px);
  -o-transform: rotate(315deg) translateY(-22px) translateX(0px);
  transform: rotate(315deg) translateY(-22px) translateX(0px);
}
#menu .menu-item.blog:hover .circle-7,
#menu .menu-item.blog.active .circle-7 {
  -webkit-transform: rotate(0deg) translateY(22px) translateX(0px);
  -moz-transform: rotate(0deg) translateY(22px) translateX(0px);
  -moz-transform: rotate(0deg) translateY(22px) translateX(0px);
  -o-transform: rotate(0deg) translateY(22px) translateX(0px);
  transform: rotate(0deg) translateY(22px) translateX(0px);
}
#menu .menu-item.blog:hover .circle-8,
#menu .menu-item.blog.active .circle-8 {
  -webkit-transform: rotate(225deg) translateY(-22px) translateX(0px);
  -moz-transform: rotate(225deg) translateY(-22px) translateX(0px);
  -moz-transform: rotate(225deg) translateY(-22px) translateX(0px);
  -o-transform: rotate(225deg) translateY(-22px) translateX(0px);
  transform: rotate(225deg) translateY(-22px) translateX(0px);
}
#menu .menu-item.about .circle {
  -webkit-transition-delay: 400ms;
  -moz-transition-delay: 400ms;
  -moz-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  transition-delay: 400ms;
}
#menu .menu-item.about .line {
  top: 50%;
  left: 50%;
  background-color: #e3e3e1;
}
#menu .menu-item.about .line-1 {
  width: 1px;
  height: 42px;
  margin: -21px 0 0 -10px;
}
#menu .menu-item.about .line-2 {
  width: 1px;
  height: 42px;
  margin: -21px 0 0 10px;
}
#menu .menu-item.about .line-3 {
  width: 20px;
  height: 1px;
  margin: -21px 0 0 -10px;
}
#menu .menu-item.about .line-4 {
  width: 20px;
  height: 1px;
  margin: 21px 0 0 -10px;
}
#menu .menu-item.about .circle-1 {
  -webkit-transform: translate(-10px, -21px);
  -moz-transform: translate(-10px, -21px);
  -moz-transform: translate(-10px, -21px);
  -o-transform: translate(-10px, -21px);
  transform: translate(-10px, -21px);
}
#menu .menu-item.about .circle-2 {
  -webkit-transform: translate(10px, 0);
  -moz-transform: translate(10px, 0);
  -moz-transform: translate(10px, 0);
  -o-transform: translate(10px, 0);
  transform: translate(10px, 0);
}
#menu .menu-item.about .circle-3 {
  -webkit-transform: translate(-10px, 21px);
  -moz-transform: translate(-10px, 21px);
  -moz-transform: translate(-10px, 21px);
  -o-transform: translate(-10px, 21px);
  transform: translate(-10px, 21px);
}
#menu .menu-item.about .circle-4 {
  -webkit-transform: translate(10px, -21px);
  -moz-transform: translate(10px, -21px);
  -moz-transform: translate(10px, -21px);
  -o-transform: translate(10px, -21px);
  transform: translate(10px, -21px);
}
#menu .menu-item.about .circle-5 {
  -webkit-transform: translate(-10px, 0);
  -moz-transform: translate(-10px, 0);
  -moz-transform: translate(-10px, 0);
  -o-transform: translate(-10px, 0);
  transform: translate(-10px, 0);
}
#menu .menu-item.about .circle-6 {
  -webkit-transform: translate(10px, 21px);
  -moz-transform: translate(10px, 21px);
  -moz-transform: translate(10px, 21px);
  -o-transform: translate(10px, 21px);
  transform: translate(10px, 21px);
}
#menu .menu-item.about:hover .wrap,
#menu .menu-item.about.active .wrap {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
#menu .menu-item.about:hover .circle-1,
#menu .menu-item.about.active .circle-1 {
  -webkit-transform: translate(10px, 0);
  -moz-transform: translate(10px, 0);
  -moz-transform: translate(10px, 0);
  -o-transform: translate(10px, 0);
  transform: translate(10px, 0);
}
#menu .menu-item.about:hover .circle-2,
#menu .menu-item.about.active .circle-2 {
  -webkit-transform: translate(-10px, 21px);
  -moz-transform: translate(-10px, 21px);
  -moz-transform: translate(-10px, 21px);
  -o-transform: translate(-10px, 21px);
  transform: translate(-10px, 21px);
}
#menu .menu-item.about:hover .circle-3,
#menu .menu-item.about.active .circle-3 {
  -webkit-transform: translate(-10px, -21px);
  -moz-transform: translate(-10px, -21px);
  -moz-transform: translate(-10px, -21px);
  -o-transform: translate(-10px, -21px);
  transform: translate(-10px, -21px);
}
#menu .menu-item.about:hover .circle-4,
#menu .menu-item.about.active .circle-4 {
  -webkit-transform: translate(-10px, 0);
  -moz-transform: translate(-10px, 0);
  -moz-transform: translate(-10px, 0);
  -o-transform: translate(-10px, 0);
  transform: translate(-10px, 0);
}
#menu .menu-item.about:hover .circle-5,
#menu .menu-item.about.active .circle-5 {
  -webkit-transform: translate(10px, 21px);
  -moz-transform: translate(10px, 21px);
  -moz-transform: translate(10px, 21px);
  -o-transform: translate(10px, 21px);
  transform: translate(10px, 21px);
}
#menu .menu-item.about:hover .circle-6,
#menu .menu-item.about.active .circle-6 {
  -webkit-transform: translate(10px, -21px);
  -moz-transform: translate(10px, -21px);
  -moz-transform: translate(10px, -21px);
  -o-transform: translate(10px, -21px);
  transform: translate(10px, -21px);
}
#menu .menu-item.contact .circle {
  -webkit-transition-delay: 400ms;
  -moz-transition-delay: 400ms;
  -moz-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  transition-delay: 400ms;
}
#menu .menu-item.contact .line {
  top: 50%;
  left: 50%;
  background-color: #e3e3e1;
}
#menu .menu-item.contact .line-1 {
  width: 42px;
  height: 1px;
  margin: 15px 0 0 -21px;
}
#menu .menu-item.contact .line-2 {
  width: 42px;
  height: 1px;
  margin: 15px 0 0 -21px;
  -webkit-transform-origin: bottom left;
  -moz-transform-origin: bottom left;
  -moz-transform-origin: bottom left;
  -o-transform-origin: bottom left;
  transform-origin: bottom left;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
#menu .menu-item.contact .line-3 {
  width: 42px;
  height: 1px;
  margin: 15px 0 0 -21px;
  -webkit-transform-origin: bottom right;
  -moz-transform-origin: bottom right;
  -moz-transform-origin: bottom right;
  -o-transform-origin: bottom right;
  transform-origin: bottom right;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  transform: rotate(60deg);
}
#menu .menu-item.contact .line-4 {
  width: 1px;
  height: 36px;
  margin: -20px 0 0 0;
}
#menu .menu-item.contact .line-5 {
  width: 26px;
  height: 1px;
  margin: -3px 0 0 -13px;
}
#menu .menu-item.contact .line-6 {
  width: 20px;
  height: 1px;
  margin: 15px 0 0 -20px;
  -webkit-transform-origin: bottom right;
  -moz-transform-origin: bottom right;
  -moz-transform-origin: bottom right;
  -o-transform-origin: bottom right;
  transform-origin: bottom right;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  transform: rotate(60deg);
}
#menu .menu-item.contact .line-7 {
  width: 20px;
  height: 1px;
  margin: 15px 0 0 -20px;
  -webkit-transform-origin: bottom right;
  -moz-transform-origin: bottom right;
  -moz-transform-origin: bottom right;
  -o-transform-origin: bottom right;
  transform-origin: bottom right;
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  transform: rotate(120deg);
}
#menu .menu-item.contact .circle-1 {
  -webkit-transform: translate(0, -21px);
  -moz-transform: translate(0, -21px);
  -moz-transform: translate(0, -21px);
  -o-transform: translate(0, -21px);
  transform: translate(0, -21px);
}
#menu .menu-item.contact .circle-2 {
  -webkit-transform: translate(-21px, 16px);
  -moz-transform: translate(-21px, 16px);
  -moz-transform: translate(-21px, 16px);
  -o-transform: translate(-21px, 16px);
  transform: translate(-21px, 16px);
}
#menu .menu-item.contact .circle-3 {
  -webkit-transform: translate(21px, 16px);
  -moz-transform: translate(21px, 16px);
  -moz-transform: translate(21px, 16px);
  -o-transform: translate(21px, 16px);
  transform: translate(21px, 16px);
}
#menu .menu-item.contact .circle-4 {
  -webkit-transform: translate(11px, -2px);
  -moz-transform: translate(11px, -2px);
  -moz-transform: translate(11px, -2px);
  -o-transform: translate(11px, -2px);
  transform: translate(11px, -2px);
}
#menu .menu-item.contact .circle-5 {
  -webkit-transform: translate(-11px, -2px);
  -moz-transform: translate(-11px, -2px);
  -moz-transform: translate(-11px, -2px);
  -o-transform: translate(-11px, -2px);
  transform: translate(-11px, -2px);
}
#menu .menu-item.contact .circle-6 {
  -webkit-transform: translate(0, 16px);
  -moz-transform: translate(0, 16px);
  -moz-transform: translate(0, 16px);
  -o-transform: translate(0, 16px);
  transform: translate(0, 16px);
}
#menu .menu-item.contact:hover .wrap,
#menu .menu-item.contact.active .wrap {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
#menu .menu-item.contact:hover .circle-1,
#menu .menu-item.contact.active .circle-1 {
  -webkit-transform: translate(-21px, 16px);
  -moz-transform: translate(-21px, 16px);
  -moz-transform: translate(-21px, 16px);
  -o-transform: translate(-21px, 16px);
  transform: translate(-21px, 16px);
}
#menu .menu-item.contact:hover .circle-2,
#menu .menu-item.contact.active .circle-2 {
  -webkit-transform: translate(21px, 16px);
  -moz-transform: translate(21px, 16px);
  -moz-transform: translate(21px, 16px);
  -o-transform: translate(21px, 16px);
  transform: translate(21px, 16px);
}
#menu .menu-item.contact:hover .circle-3,
#menu .menu-item.contact.active .circle-3 {
  -webkit-transform: translate(0, -21px);
  -moz-transform: translate(0, -21px);
  -moz-transform: translate(0, -21px);
  -o-transform: translate(0, -21px);
  transform: translate(0, -21px);
}
#menu .menu-item.contact:hover .circle-4,
#menu .menu-item.contact.active .circle-4 {
  -webkit-transform: translate(-11px, -2px);
  -moz-transform: translate(-11px, -2px);
  -moz-transform: translate(-11px, -2px);
  -o-transform: translate(-11px, -2px);
  transform: translate(-11px, -2px);
}
#menu .menu-item.contact:hover .circle-5,
#menu .menu-item.contact.active .circle-5 {
  -webkit-transform: translate(0, 16px);
  -moz-transform: translate(0, 16px);
  -moz-transform: translate(0, 16px);
  -o-transform: translate(0, 16px);
  transform: translate(0, 16px);
}
#menu .menu-item.contact:hover .circle-6,
#menu .menu-item.contact.active .circle-6 {
  -webkit-transform: translate(11px, -2px);
  -moz-transform: translate(11px, -2px);
  -moz-transform: translate(11px, -2px);
  -o-transform: translate(11px, -2px);
  transform: translate(11px, -2px);
}