@charset "utf-8";
/* CSS Document */

@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes fadeIn {
	 from {opacity: 0;}
	 to {opacity: 1;}
}
@-webkit-keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translate3d(-100%, 0, 0);
	  }
	  to {
		opacity: 1;
		transform: none;
	  }
}
@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translate3d(-100%, 0, 0);
	  }
	  to {
		opacity: 1;
		transform: none;
	  }
}
@-webkit-keyframes rotateIn {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
@keyframes rotateIn {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
@-webkit-keyframes scaleIn {
	from {transform: scale(0);}
	to {transform: scale(1);}
}
@keyframes scaleIn {
	from {transform: scale(0);}
	to {transform: scale(1);}
}

.visible #chart1 #wave1 {
	opacity: 0;
	animation: fadeInLeft 2s 0s ease;
	animation-fill-mode: forwards;
}
.visible #chart1 #wave2 {
	opacity: 0;
	animation: fadeInLeft 2s 1s ease;
	animation-fill-mode: forwards;
}
.visible #chart1 #wave3 {
	opacity: 0;
	animation: fadeInLeft 2s 2s ease;
	animation-fill-mode: forwards;
}
.visible #chart1 #copy1 {
	opacity: 0;
	animation: fadeIn 3s 1s ease;
	animation-fill-mode: forwards;
}
.visible #chart1 #copy2 {
	opacity: 0;
	animation: fadeIn 3s 2s ease;
	animation-fill-mode: forwards;
}
.visible #chart1 #copy3 {
	opacity: 0;
	animation: fadeIn 3s 3s ease;
	animation-fill-mode: forwards;
}
.visible #chart2 #circle {
	opacity: 0;
	animation: fadeIn 2s 0s ease, rotateIn 10s 0s ease;
	animation-fill-mode: forwards;
	transform-origin: center center;
}
.visible #chart2 #arrows {
	opacity: 0;
	animation: fadeIn 2s 0s ease, rotateIn 10s 0s ease;
	animation-fill-mode: forwards;
	transform-origin: center center;
}
.visible #chart2 #circle1 {
	opacity: 0;
	animation: fadeIn 3s 0s ease;
	animation-fill-mode: forwards;
}
.visible #chart2 #circle2 {
	opacity: 0;
	animation: fadeIn 3s 1s ease;
	animation-fill-mode: forwards;
}
.visible #chart2 #circle3 {
	opacity: 0;
	animation: fadeIn 3s 2s ease;
	animation-fill-mode: forwards;
}
.visible #chart2 #circle4 {
	opacity: 0;
	animation: fadeIn 3s 3s ease;
	animation-fill-mode: forwards;
}
.visible #chart2 #circle5 {
	opacity: 0;
	animation: fadeIn 3s 4s ease;
	animation-fill-mode: forwards;
}
.visible #chart2 #circle6 {
	opacity: 0;
	animation: fadeIn 3s 5s ease;
	animation-fill-mode: forwards;
}
.visible #chart2 #circle7 {
	opacity: 0;
	animation: fadeIn 3s 6s ease;
	animation-fill-mode: forwards;
}
.visible #chart3 #key {
	opacity: 0;
	animation: fadeIn 2s 0s ease;
	animation-fill-mode: forwards;
}
.visible #chart3 #smallCircle,
.visible #chart3 #smallBrand {
	opacity: 0;
	animation: fadeIn 2s 1s ease;
	animation-fill-mode: forwards;
}
.visible #chart3 #mediumBrand,
.visible #chart3 #mediumCircle {
	opacity: 0;
	animation: fadeIn 2s 2s ease;
	animation-fill-mode: forwards;
}
.visible #chart3 #largeBrand,
.visible #chart3 #largeCircle {
	opacity: 0;
	animation: fadeIn 2s 3s ease;
	animation-fill-mode: forwards;
}