/*
	SHAPE XENOPHONE
*/
.shape_svg_xenophone {
	position: absolute;
	display: block;
	/*width: 100%;*/
	right: 0px;
	/*top: 38%;*/
	top: auto;
	bottom: 0px;
	left: 0px;
	width: auto;
	transform: translate(0, -70%);
}
.shape_svg_xenophone svg g:first-child {
	opacity: .5;
}
.shape_svg_xenophone svg g path,
.shape_svg_xenophone svg g circle {
	fill: none;
	stroke: #fff;
	opacity: .7;
}
.shape_svg_xenophone svg g:nth-child(4) circle { fill: #fff; opacity: .9; }
.shape_svg_xenophone svg g:nth-child(4) path { fill: #27c469; stroke: none; opacity: 1; }

.shape_svg_xenophone svg g path, .shape_svg_xenophone svg g circle { stroke: #27c469; }
.shape_svg_xenophone svg g:nth-child(4) circle { fill: #fff; }
.shape_svg_xenophone svg g:nth-child(4) path { fill: #27c469; }


/*
	ANIM DOTTED LINE
*/
.shape_svg_xenophone svg g .dotted_line {
	stroke-dasharray: 10;
	animation: dash_ltr 15s linear infinite;
}
/* Left To Right */
.shape_svg_xenophone.ltr svg g .dotted_line {
	animation: dash_ltr 15s linear infinite;
}
@keyframes dash_ltr {
	to { stroke-dashoffset: -1000; }
}
/* Right To Left */
.shape_svg_xenophone.rtl svg g .dotted_line {
	animation: dash_rtl 15s linear infinite;
}
@keyframes dash_rtl {
	to { stroke-dashoffset: 1000; }
}


/*
	ANIM ROUNDS
*/

/* LEFT TO RIGHT */
.shape_svg_xenophone.ltr svg g:nth-child(2) circle { animation: anim_ltr_a 4s linear infinite; }
.shape_svg_xenophone.ltr svg g:nth-child(3) circle { animation: anim_ltr_b 4s linear infinite; }
.shape_svg_xenophone.ltr svg g:nth-child(4) circle { animation: anim_ltr_c 4s linear infinite; }
.shape_svg_xenophone.ltr svg g:nth-child(5) circle { animation: anim_ltr_d 4s linear infinite; }

@keyframes anim_ltr_a {
	5% { opacity: .7; stroke:#fff; stroke-width: 0; }
	15% { opacity: 1; stroke: #27c469; stroke-width: 10; }
	35% { opacity: .7; stroke:#fff; stroke-width: 0; }
}
@keyframes anim_ltr_b {
	30% { opacity: .7; stroke:#fff; stroke-width: 0; }
	40% { opacity: 1; stroke: #27c469; stroke-width: 10; }
	60% { opacity: .7; stroke:#fff; stroke-width: 0; }
}
@keyframes anim_ltr_c {
	40% { stroke:#fff; stroke-width: 0; }
	55% { stroke: #27c469; stroke-width: 10; }
	65% { stroke: #fff; stroke-width: 0; }
}
@keyframes anim_ltr_d {
	65% { opacity: .7; stroke:#fff; stroke-width: 0; }
	75% { opacity: 1; stroke: #27c469; stroke-width: 10; }
	95% { opacity: .7; stroke:#fff; stroke-width: 0; }
}


/* RIGHT TO LEFT */
.shape_svg_xenophone.rtl svg g:nth-child(5) circle { animation: anim_rtl_a 4s linear infinite; }
.shape_svg_xenophone.rtl svg g:nth-child(4) circle { animation: anim_rtl_b 4s linear infinite; }
.shape_svg_xenophone.rtl svg g:nth-child(3) circle { animation: anim_rtl_c 4s linear infinite; }
.shape_svg_xenophone.rtl svg g:nth-child(2) circle { animation: anim_rtl_d 4s linear infinite; }

@keyframes anim_rtl_a {
	5% { opacity: .7; stroke:#fff; stroke-width: 0; }
	15% { opacity: 1; stroke: #27c469; stroke-width: 10; }
	35% { opacity: .7; stroke:#fff; stroke-width: 0; }
}
@keyframes anim_rtl_b {
	45% { stroke:#fff; stroke-width: 0; }
	60% { stroke: #27c469; stroke-width: 10; }
	70% { stroke: #fff; stroke-width: 0; }
}
@keyframes anim_rtl_c {
	55% { opacity: .7; stroke:#fff; stroke-width: 0; }
	65% { opacity: 1; stroke: #27c469; stroke-width: 10; }
	85% { opacity: .7; stroke:#fff; stroke-width: 0; }
}
@keyframes anim_rtl_d {
	65% { opacity: .7; stroke:#fff; stroke-width: 0; }
	75% { opacity: 1; stroke: #27c469; stroke-width: 10; }
	95% { opacity: .7; stroke:#fff; stroke-width: 0; }
}