/* MENU */
a {
    cursor: pointer; /* SVG <a> elements don't get this by default, so you need to explicitly set it */
    outline: none;
		text-decoration:none;
}
/* You can change these default styles any way you want */
.item {
	opacity:0;
}
.item .sector {
    transition: all .1s linear;
    /* fill: rgba(255,255,255,.02); */
		fill: transparent;
    stroke: transparent;
}
.item:hover .sector, .item:focus .sector {
  /* fill:url(#MyGradient);
		opacity:0;
		-webkit-transition: opacity .4s ease-out;
		-moz-transition: opacity .4s ease-out;
		-ms-transition: opacity .4s ease-out;
		-o-transition: opacity .4s ease-out;
		transition: all .4s ease-out; */
}
.menu-trigger {
    fill: transparent;
    pointer-events: auto;
		/* KEEP THIS to make sure it stays clickable even when SVG's pointer events is disabled */
}
.menu-trigger:hover, .menu-trigger:focus {
    cursor: pointer;
}
symbol {
    overflow: visible; /* KEEP THIS so that text will not get cut off it it is wider than the icon width */
}

/* MODAL */
#space, #nav {
	transform:scale(0);
}
#nav {
	opacity:0;
}
	.modal-content {
		background: rgba(0, 0, 0, .8);
    /* border:none; */
    /* background:transparent; */
    /* -webkit-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5x);
    -ms-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px); */
	}
  .modal a {
    color:inherit;
  }
  .modal a:hover {
    color:#fff;
  }
	.modal .bi {
		font-size:1.1rem;
		opacity:1
	}
	.modal-header,
	.modal-footer {
		border:none;
	}