svg {
	height: 100vh;
	width: 100%;
	position: relative;
	z-index: 100;
}

path {
	stroke: #8693AB;
	stroke-width: 0.3%;
}

#node1 {
	transform: translate(-0.7%, -4%);
}

#edge9 {
	transform: translate(8%, 4%);
}

#edge12 {
	
  stroke-dasharray: 100;
  animation: draw_multi 3s forwards !important;
  animation-delay: 0s;
}


#edge13 {
  stroke-dasharray: 100;
  animation: draw_multix 3s forwards;
  animation-delay: 0s;
}

.group1 .node , .group1 .edge{
  stroke-dasharray: 100;
  animation: draw 3s forwards;
  animation-delay: 0s;
}

.group2 .node, .group2 .edge{
  stroke-dasharray: 100;
  animation: draw_pink 3s forwards;
  animation-delay: 0s;
}


.group3 .node , .group3 .edge{
  stroke-dasharray: 100;
  animation: draw_green 3s forwards;
  animation-delay: 0s;
}


.group4 .node , .group4 .edge{
  stroke-dasharray: 100;
  animation: draw_purple 3s forwards;
  animation-delay: 0s;
}


.group5 .node , .group5 .edge{
  stroke-dasharray: 100;
  animation: draw_yellow 3s forwards;
  animation-delay: 0s;
}


.group6 .node , .group6 .edge{
  stroke-dasharray: 100;
  animation: draw_peach 3s forwards;
  animation-delay: 0s;
}


.group7 .node , .group7 .edge{
  stroke-dasharray: 100;
  animation: draw_red 3s forwards;
  animation-delay: 0s;
}


.group8 .node {
  stroke-dasharray: 100;
  animation: draw_rainbow 3s forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}

.node {
	cursor: pointer;
}




@keyframes draw {
	from {
		stroke-dashoffset: 100;

		stroke: #8693AB;
	}
	to {
		stroke-dashoffset: 0;
		stroke: hsl(207,47%,82%);
	}
}


@keyframes draw_pink {
	from {
		stroke-dashoffset: 100;

		stroke: #8693AB;
	}
	to {
		stroke-dashoffset: 0;
		stroke: hsl(286,100%,91%);
	}
}


@keyframes draw_green{
	from {
		stroke-dashoffset: 100;

		stroke: #8693AB;
	}
	to {
		stroke-dashoffset: 0;
		stroke:  hsl(150,69%,75%);
	}
}


@keyframes draw_purple {
	from {
		stroke-dashoffset: 100;

		stroke: #8693AB;
	}
	to {
		stroke-dashoffset: 0;
		stroke:  hsl(243,26%,75%);
	}
}


@keyframes draw_yellow{
	from {
		stroke-dashoffset: 100;

		stroke: #8693AB;
	}
	to {
		stroke-dashoffset: 0;
		stroke:  hsl(60,96%,79%);
	}
}


@keyframes draw_peach {
	from {
		stroke-dashoffset: 100;

		stroke: #8693AB;
	}
	to {
		stroke-dashoffset: 0;
		stroke:  hsl(40,100%,75%);
	}
}


@keyframes draw_red {
	from {
		stroke-dashoffset: 100;

		stroke: #8693AB;
	}
	to {
		stroke-dashoffset: 0;
		stroke:  hsl(335,74%,80%);
	}
}


@keyframes draw_rainbow {
	from {
		stroke-dashoffset: 100;

		stroke: #8693AB;
	}
	to {
		stroke-dashoffset: 0;
		stroke: url(#myGradient);
	}
}


@keyframes draw_multi {
	from {
		stroke-dashoffset: 100;

		stroke: #8693AB;
	}
	50% {
		stroke:  hsl(243,26%,75%);
	}
	to {
		stroke-dashoffset: 0;
		stroke: hsl(207,47%,82%);
	}
}


@keyframes draw_multix {
	from {
		stroke-dashoffset: 100;

		stroke: #8693AB;
	}
	50% {
		stroke: hsl(150,69%,75%);
	}
	to {
		stroke-dashoffset: 0;
		stroke: hsl(207,47%,82%);
	}
}

#banner {

	position: fixed;
	height: 100vh;
	width: 50vw;
	top: 0;
	background: black;
	opacity: 80%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#banner_text {
	color: #ffd580;
	font-size: 5vh;
	margin: 0;
	position: relative;
	bottom: 20vh;
	right: 5vw;
}
@media ( min-width: 1024px ) {
	svg {
		left: 5vw;
	}
}