body{
	/*display: block;*/
	height: 0px;
	width: 2160px;
	background-image: url("gnoc_interactive_tv-monitoring diagram.jpg");
	/*background-image: url("gnoc_interactive_tv-monitoringanime.jpg");*/
}

*{
	font-family: 'Open Sans', sans-serif;
}

h1{
	color: #fffff0;
	font-size: 44px;
	font-weight: light;
}

#alert1{
	position: absolute;
	top:340px;
	left:326px;
}

#label1{
	position: absolute;
	top:280px;
	left:933px;
}

#line1{
	position: absolute;
	top:340px;
	left:1555px;
}

#line2{
	position: absolute;
	top:675px;
	left:1705px;
	animation-delay: 10s;
}

#line3{
	position: absolute;
	top:1008px;
	left:1765px;
	animation-delay: 10s;
}

#line4{
	position: absolute;
	top:1123px;
	left:1705px;
	animation-delay: 10s;
}

#line5{
	position: absolute;
	top:1179px;
	left:1555px;
	animation-delay: 10s;
}

#line6{
	position: absolute;
	top:1008px;
	left:2654px;
	animation-delay: 10s;
}

#correlation{
	position: absolute;
	top:793px;
	left:2221px;
	height: 440px;
	width: 440px;
	animation: rotate 1.5s linear infinite;
	z-index: 5;
}

#dot {
	position: absolute;
	top:490px;
	left:300px;
	animation: zoomInUp .5s;
}

.lines{
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: dash 2s ease-in-out forwards ;
	animation-delay: 1.5s;
}

.lines1{
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: dash 2s ease-in-out forwards ;
	animation-delay: 3s;
}

.alerts{
	stroke-dasharray: 1000;
	stroke-dashoffset: -1000;
	animation: dash 2s ease-in-out backwards ;
	animation-delay: .2s;
}

@keyframes dash{
	60%{
		stroke-dashoffset: 0;
		opacity: 0.2;
	}

	100%{
		stroke-dashoffset: 0;
		opacity: 0;
	}
	
}

@keyframes rotate{
	to{
		transform: rotate(-360deg);
	}
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3) translate3d(0, 0, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  
  }
}