html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #ececec;

  font-family: "Georgia";
}


/* spiralMenu */
svg {
  display: block;
  margin: auto;
}
.root, .slice {
  cursor: pointer;
}

.slice {
  fill: #CCC;
}

/* Root */
.root {
  transition: transform 0.2s;
}
.root .hover-circle {
  fill: #069;
}
.root .root-title {
  font-size: 2em;
  font-style: italic;
  fill: #f9f9f9;
}
.root .shadow-circle {
  transform-origin: 50%;
  fill: rgba(0,0,0,0.5);
  transform: scale(1.04);
  transition: transform 0.2s;
}
.root image, .root .main-circle {
  transition: opacity 0.2s;
}

.root.has-parent:not(.demoting):hover image, .root.has-parent:not(.demoting):hover .main-circle {
  opacity: 0;
}
.root.has-parent:not(.demoting):hover .shadow-circle {
  transform: scale(1.02);
}
.root.has-parent:not(.demoting):hover {
  transform: scale(1.4);
}

.root.demoting .hover-group, .root.demoting .shadow-circle {
  opacity: 0;
}

.title {
  font-style: italic;
  font-size: 64.821251px;
  font-family: Georgia;
  text-align: center;
  text-anchor: middle;
}

.text-icon {
  font-family: "Roboto", sans-serif;
  font-size: 3em;
  fill: white;
  -webkit-font-smoothing: antialiased;
  font-weight: 100;
}

image+.text-icon {
  text-shadow: 0 0 5px;
}


svg {
  transition-duration: 0.2s;
  transition-property: opacity, -webkit-filter, filter;
}

.loading {
  opacity: 0.7;
  -webkit-filter: saturate(0.5);
          filter: saturate(0.5);
}