/*world.css*/

/**
 * ----------------------------------------------------------
 *	Proper svg boxing
 * ----------------------------------------------------------
 */

/* propper displaying of responsive svg in container ( ie10 proof )*/
.svg-container-infographic{
 display: inline-block;
 position: relative;
 width: 100%;
 padding-bottom: 100%; /* depends on svg ratio = .432432432 */
 vertical-align: middle; /* top | middle | bottom ... do what you want */
 /*outline: 1px solid #eee;*/
}
.svg-container-infographic svg{ 
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* only required for <img /> */
} /* add this to the svg : preserveAspectRatio="xMinYMin meet" viewBox="0 0 800 960" */


.scener{
	/*outline: 1px solid #CCC;*/
	width: 100%;
	height: 100%;
	max-width: 600px; 
	margin: 0 auto;
	display: block;
	/*margin-bottom: -25px;*/
	/*margin-top: -25px;*/
}



.world #window{ fill: none;}
/**
 * ----------------------------------------------------------
 *	WALLS ( right | left | top )
 * ----------------------------------------------------------
 */
.world .wall-l,
.world .wall-m,
.world .wall-d,
.world .wall-shade{
	-webkit-transition: all 1s ease;
  	-moz-transition: 	all 1s ease;
  	-o-transition: 		all 1s ease;
  	transition: 		all 1s ease;
}

.world .wall-l{ 		fill : #EFE6E7; 	} 
.world .wall-m{ 		fill : #DDD7D7; 	}
.world .wall-d{ 		fill : #ADAEB8; 	}
.world .wall-shade{		fill : #6C778A; 	}

.world.nighttime .wall-l{ 		fill : #979DAE; 	} 
.world.nighttime .wall-m{ 		fill : #898C9C; 	}
.world.nighttime .wall-d{ 		fill : #72748C; 	}
.world.nighttime .wall-shade{	fill : #3F4D63; 	opacity: .5;}

.world.daytime .wall-l{ 		fill : #F7F2EB; 	} 
.world.daytime .wall-m{ 		fill : #E5E1DB; 	}
.world.daytime .wall-d{ 		fill : #C9C8C2; 	}
.world.daytime .wall-shade{		fill : #A0A1A6; 	}

.world .water-b{ 		fill : #2787E6; 	} /* base */ 
.world .water-l{ 		fill : #6AA8E6; 	} /* light */
.world .water-d{ 		fill : #247BD1; 	} /* dark */

.world .water-b.sweet{ 		fill : #75D2D9; 	} /* base */ 
.world .water-l.sweet{ 		fill : #C0F8FA; 	} /* light */
.world .water-d.sweet{ 		fill : #51ACC2; 	} /* dark */




/*.world.daytime .wall-l{ 		fill : yellow; 	} */
/*.world.daytime .wall-m{ 		fill : lime; 	}*/
/*.world.daytime .wall-d{ 		fill : red; 	}*/
/*.world.daytime .wall-shade{		fill : blue; 	}*/




/**
 * ----------------------------------------------------------
 *	SELECTIONS
 * ----------------------------------------------------------
 */
.world .waterflowselector,
.selector,
.selection{ 
	-webkit-transition: stroke .2s ease;
  	-moz-transition: 	stroke .2s ease;
  	-o-transition: 		stroke .2s ease;
  	transition: 		stroke .2s ease;
  	/*fill : transparent; */
  	fill : none;
  	stroke-width:6px; 
  	stroke : transparent;
	stroke-linecap:round;
	stroke-linejoin:round;
  	/*stroke*/
	stroke-miterlimit:10;
  }

.world .pipes .selection{ stroke-width:10px;}

.world .water-source-switch,
.world .pipes,
.world .or,
.world .ro,
.world .pr,
.world .prt,
.world .erd,
.world .turbine,
.world .solarpanel,
.world .dc-controller,
.world .water-intake,
.world .tanksalt,
.world .tanksweet,
.world .pumper{ cursor: pointer; }

.world .pr:hover 				.selection,
.world .prt:hover 				.selection,
.world .erd:hover 				.selection,
.world .or:hover 				.selection,
.world .turbine:hover 			.selection,
.world .solarpanel:hover 		.selection,
.world .dc-controller:hover 		.selection,
.world .pumper:hover 			.selection,
.world .tanksalt:hover 			.selection,
.world .tanksweet:hover 		.selection,
.world .pipes:hover 			.selection,
.world .water-intake:hover		.selector{ 
	stroke : blue;
	stroke: #AAA; /*grey*/
}	
.world .prt.selected 			.selection,
.world .erd.selected 			.selection,
.world .or.selected 			.selection,
.world .pr.selected 			.selection,
.selected 						.selection,
.world .turbine.selected 		.selection,
.world .solarpanel.selected 	.selection,
.world .dc-controller.selected 	.selection,
.world .pumper.selected 		.selection,
.world .pipes.selected 			.selection,
.world .tanksalt.selected 		.selection,
.world .tanksweet.selected 		.selection,
.world .water-intake.selected	.selector{ 
	/*stroke : red;*/
	stroke: #1b75bb; /*elemental blue*/
	stroke : #EEBD28; /* dark yellow */
}


/**
 * ----------------------------------------------------------
 *	MACHINE GROUP
 * ----------------------------------------------------------
 */
.world .machine{
/*	transform: 			translate(110px,230px);
	-webkit-transform: 	translate(110px,230px);
	-moz-transform: 	translate(110px,230px);
	-o-transform: 		translate(110px,230px);*/
}
.world .tanksalt #water-level{
	-webkit-transition: all 1s ease-in-out;
  	-moz-transition: all 1s ease-in-out;
  	-o-transition: all 1s ease-in-out;
  	transition: all 1s ease-in-out;
}
.world .tanksalt.low #water-level{
	transform: 			translate(0px,0px);
	-webkit-transform: 	translate(0px,0px);
	-moz-transform: 	translate(0px,0px);
	-o-transform: 		translate(0px,0px);
}
.world .tanksalt.med #water-level{
	transform: 			translate(0px,-11px);
	-webkit-transform: 	translate(0px,-11px);
	-moz-transform: 	translate(0px,-11px);
	-o-transform: 		translate(0px,-11px);
}
.world .tanksalt.high #water-level{
	transform: 			translate(0px,-20px);
	-webkit-transform: 	translate(0px,-20px);
	-moz-transform: 	translate(0px,-20px);
	-o-transform: 		translate(0px,-20px);
}
/**
 * ----------------------------------------------------------
 *	TANKSALT
 * ----------------------------------------------------------
 */
.world .tanksaltlevel{}
.world .tanksalt{
/*	transform: 			translate(280px,41px);
	-webkit-transform: 	translate(280px,41px);
	-moz-transform: 	translate(280px,41px);
	-o-transform: 		translate(280px,41px);*/
}


/**
 * ----------------------------------------------------------
 *	DC CONTROLLER
 * ----------------------------------------------------------
 */
.world .dc-controller{
/*	transform: 			translate(305px,360px);
	-webkit-transform: 	translate(305px,360px);
	-moz-transform: 	translate(305px,360px);
	-o-transform: 		translate(305px,360px);*/
} 
.world .dc-controller #logo{  fill : #91C144; } /* lightning logo */

/**
 * ----------------------------------------------------------
 *	POWERLINE + VOLTAGE
 * ----------------------------------------------------------
 */
.world .powerline{ 
	stroke:#48484D;	
	stroke-width:4px;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-miterlimit:10;
	fill:none; 
}
.world .voltage{ 	
	stroke : transparent; 
	stroke-width:1px; 
	stroke-linecap:round;
	stroke-miterlimit:10;
	stroke-linejoin:round;
	stroke-dasharray: 4;
	stroke-dashoffset: 3;
	fill:none; }
.world .on .voltage{ 	stroke : yellow; 
    -webkit-animation:	voltage 2s linear infinite;
    -moz-animation:		voltage 2s linear infinite;
    animation:			voltage 2s linear infinite;
}
/* animation preset - voltage  */
@-ms-keyframes 		voltage{ from { stroke-dashoffset: 100;} to { stroke-dashoffset: 0; } }
@-moz-keyframes 	voltage{ from { stroke-dashoffset: 100;} to { stroke-dashoffset: 0; } }
@-webkit-keyframes 	voltage{ from { stroke-dashoffset: 100;} to { stroke-dashoffset: 0; } }
@keyframes 			voltage{ from { stroke-dashoffset: 100;} to { stroke-dashoffset: 0; } }



/**
 * ----------------------------------------------------------
 *	SOLAR PANEL
 * ----------------------------------------------------------
 */
.world .solarpanel{
/*	transform: 			translate(445px,300px);
	-webkit-transform: 	translate(445px,300px);
	-moz-transform: 	translate(445px,300px);
	-o-transform: 		translate(445px,300px);
	-ms-transform: 		translate(445px,300px);*/
}
.world .solarpanel.hidden{ visibility: hidden; }
.world .solarpanel #outline:hover{ stroke : red; stroke-width : 2px; }
.world .solarpanel #outline{ fill : transparent;}
.world .solarpanel #roof-pane{ }
.world .solarpanel #roof-lines,
.world .solarpanel #roof-edge-long,
.world .solarpanel #roof-edge-short{ fill : #3A7AAB;}
.world .solarpanel #roof{ fill:#627ABC; }
/* daytime */
.world.daytime .solarpanel #roof-pane{ fill : #47ACF3;}
.world.daytime .solarpanel #roof-lines,
.world.daytime .solarpanel #roof-edge-long,
.world.daytime .solarpanel #roof-edge-short{ fill : #1B77B5;}
/* nighttime */
.world.nighttime .solarpanel #roof-pane{ fill : #3A4B71;}
.world.nighttime .solarpanel #roof-lines,
.world.nighttime .solarpanel #roof-edge-long,
.world.nighttime .solarpanel #roof-edge-short{ fill : #151F33;}






/**
 * ----------------------------------------------------------
 *	TURBINE
 * ----------------------------------------------------------
 */
.world .turbine{ 
/*	transform: 			translate(480px,200px);
	-webkit-transform: 	translate(480px,200px);
	-moz-transform: 	translate(480px,200px);
	-o-transform: 		translate(480px,200px);
	-ms-transform: 		translate(480px,200px);*/
}
/*.world .turbine:hover{ stroke : red; stroke-width : 2px; }*/
/* turbine blade */  
.world .turbine_blade{ /* overal position */
/*	transform: 			translate(-49px,-41px) scale(1.3);
	-webkit-transform: 	translate(-49px,-41px) scale(1.3);
	-moz-transform: 	translate(-49px,-41px) scale(1.3);
	-o-transform: 		translate(-49px,-41px) scale(1.3);
	-ms-transform: 		translate(-49px,-41px) scale(1.3);*/
}
.world .turbine_blade #blades{ /* rotate the angle */
	transform: 			rotateY(45deg) translate(20px,0px);
	-webkit-transform: 	rotateY(45deg) translate(20px,0px);
	-moz-transform: 	rotateY(45deg) translate(20px,0px);
	-o-transform: 		rotateY(45deg) translate(20px,0px);
	-ms-transform: 		rotateY(45deg) translate(20px,0px);
}
.world .turbine_blade #parts{ /* rotate forever */
   	 -moz-transform-origin: 	50px 50px; 
   	 -o-transform-origin: 		50px 50px; 
   	 -webkit-transform-origin: 	50px 50px;    
   	 transform-origin: 			50px 50px;    
   	 -ms-transform-origin: 		50px 50px; 
}
.world .turbine_blade.spinning #parts{ /* spinning forever */
	-webkit-animation: 	turbine_spin 1s linear infinite;
    -moz-animation: 	turbine_spin 1s linear infinite;
    animation: 			turbine_spin 1s linear infinite;
    -ms-animation: 		turbine_spin 1s linear infinite;
}
.world .turbine_blade #outline{ fill : transparent;}
/* animation preset */
@-ms-keyframes 		turbine_spin{ 0%{	-ms-transform:		rotate(0deg);} 100%{ -ms-transform:		rotate(120deg);}}
@-moz-keyframes 	turbine_spin{ 0%{	-moz-transform:		rotate(0deg);} 100%{ -moz-transform:	rotate(120deg);}}
@-webkit-keyframes 	turbine_spin{ 0%{	-webkit-transform:	rotate(0deg);} 100%{ -webkit-transform:	rotate(120deg);}}
@keyframes 			turbine_spin{ 0%{	transform:			rotate(0deg);} 100%{ transform:			rotate(120deg);}}

/**
 * ----------------------------------------------------------
 *	TANK SWEET ( fresh )
 * ----------------------------------------------------------
 */
.world .tanksweet{
/*	transform: 			translate(30px,180px);
	-webkit-transform: 	translate(30px,180px);
	-moz-transform: 	translate(30px,180px);
	-o-transform: 		translate(30px,180px);*/
}

/**
 * ----------------------------------------------------------
 *	WATERSOURCE SWITCH
 * ----------------------------------------------------------
 */
.world .water-source-switch{
/*	transform: 			translate(360px,535px);
	-webkit-transform: 	translate(360px,535px);
	-moz-transform: 	translate(360px,535px);
	-o-transform: 		translate(360px,535px); */
}
.world .water-source-switch .txt-left{
/*	transform: 			translate(79px,25px);
	-webkit-transform: 	translate(79px,25px);
	-moz-transform: 	translate(79px,25px);
	-o-transform: 		translate(79px,25px);*/
	text-anchor: end; }
.world .water-source-switch .txt-right{
/*	transform: 			translate(155px,25px);
	-webkit-transform: 	translate(155px,25px);
	-moz-transform: 	translate(155px,25px);
	-o-transform: 		translate(155px,25px);*/
}
.world .water-source-switch .txt-left,
.world .water-source-switch .txt-right{
	font-family: 	'TideSans-500Dudette';
	font-weight: 	normal;
	font-style: 	normal;
	text-transform: uppercase;
	font-size: 		12px; }
.world .water-source-switch.lean-right .txt-left, /* inactive */
.world .water-source-switch .txt-right{ fill :#000000; opacity: 0.5; }
.world .water-source-switch .txt-left, /* active */
.world .water-source-switch.lean-right .txt-right{ fill :#1B75BB; opacity: 1; }
.world .water-source-switch #body{ fill : #1B75BB; } /* elemental blue */
.world .water-source-switch #ball{ 
	-webkit-transition: all 0.1s ease;
  	-moz-transition: 	all 0.1s ease;
  	-o-transition: 		all 0.1s ease;
  	transition: 		all 0.1s ease;
  	fill : #FFFFFF; } 
.world .water-source-switch.lean-right #ball{
	transform: 			translate(32px,0px);
	-webkit-transform: 	translate(32px,0px);
	-moz-transform: 	translate(32px,0px);
	-o-transform: 		translate(32px,0px);
}
/**
 * ----------------------------------------------------------
 *	 PATTENT
 * ----------------------------------------------------------
 */
.world .pattent{
	fill : black;
	opacity: 0.5;
	font-size: 11px;
/*	transform: 			translate(20px,490px);
	-webkit-transform: 	translate(20px,490px);
	-moz-transform: 	translate(20px,490px);
	-o-transform: 		translate(20px,490px);*/
}
/**
 * ----------------------------------------------------------
 *	 daytimeindicator
 * ----------------------------------------------------------
 */
.world .daytimeindicator{
	/*fill : black;*/
	fill: transparent;
	stroke : #777;
	cursor: pointer;
	/*opacity: 0.1;*/
	stroke-width: 3px;
	/*stroke-linecap:round;*/
	stroke-linejoin:round;
	stroke-miterlimit:10;
	/*opacity: 0.5;*/
	/*style="display:inline;fill:none;stroke:#000000;stroke-width:1.9723;stroke-miterlimit:10;"*/
	/*font-size: 11px;*/
/*	transform: 			translate(20px,20px) scale(0.8);
	-webkit-transform: 	translate(20px,20px) scale(0.8);
	-moz-transform: 	translate(20px,20px) scale(0.8);
	-o-transform: 		translate(20px,20px) scale(0.8);*/


}
.world .daytimeindicator #wind,
.world .daytimeindicator #moon,
.world .daytimeindicator #sun{ opacity: 0;}
.world .daytimeindicator.daytime #sun{ opacity: 1;}
.world .daytimeindicator.nighttime #moon{ opacity: 1;}
.world .daytimeindicator.wind #wind{ opacity: 1;}

/**
 * ----------------------------------------------------------
 *	 WATER-INTAKE + PUMPER + PUMPERSHADE
 * ----------------------------------------------------------
 */
.world .pump-cover,
.world .pumper,
.world .water-intake{
/*	transform: 			translate(270px,460px);
	-webkit-transform: 	translate(270px,460px);
	-moz-transform: 	translate(270px,460px);
	-o-transform: 		translate(270px,460px);*/

/*	transform: 			translate(320px,430px);
	-webkit-transform: 	translate(320px,430px);
	-moz-transform: 	translate(320px,430px);
	-o-transform: 		translate(320px,430px);*/
}
.world .pump-cover{ pointer-events: none; }
.world .pump-cover #cover_low{ opacity:0.4;fill:#e0eefc; }
.world .pump-cover #cover_high{ opacity:0.4;fill:#ffedb8; }

.world .pumper #pump{}
.world .pumper.on #pump{
    -ms-animation:		pumpering .3s linear infinite;
    -moz-animation:		pumpering .3s linear infinite;
    -webkit-animation:	pumpering .3s linear infinite;
    animation:			pumpering .3s linear infinite;
}
@-ms-keyframes pumpering{		0%{-ms-transform:translate(0,0);}		50%{-ms-transform:translate(0,2px);}		100%{-ms-transform:translate(0,0);}}
@-moz-keyframes pumpering{		0%{-moz-transform:translate(0,0);}	50%{-moz-transform:translate(0,2px);}		100%{-moz-transform:translate(0,0);}}
@-webkit-keyframes pumpering{	0%{-webkit-transform:translate(0,0);}	50%{-webkit-transform:translate(0,2px);}	100%{-webkit-transform:translate(0,0);}}
@keyframes pumpering{			0%{transform:translate(0,0);}			50%{transform:translate(0,2px);}			100%{transform:translate(0,0);}}

/* pumpershade */
.world .pumpershade{
/*	transform: 			translate(280px,415px);
	-webkit-transform: 	translate(280px,415px);
	-moz-transform: 	translate(280px,415px);
	-o-transform: 		translate(280px,415px);*/

/*	transform: 			translate(330px,385px);
	-webkit-transform: 	translate(330px,385px);
	-moz-transform: 	translate(330px,385px);
	-o-transform: 		translate(330px,385px);*/
	opacity: 0.2;
}

/**
 * ----------------------------------------------------------
 *	WATERTUBE
 * ----------------------------------------------------------
 */
.world .watertube{
	transform: 			translate(230px,90px);
	-webkit-transform: 	translate(230px,90px);
	-moz-transform: 	translate(230px,90px);
	-o-transform: 		translate(230px,90px);

}
.world .waterflowselector{
	/*//fill : none;*/
	/*//stroke :lime;*/

	transform: 			translate(20px,60px);
	-webkit-transform: 	translate(20px,60px);
	-moz-transform: 	translate(20px,60px);
	-o-transform: 		translate(20px,60px);
}
/**
 * ----------------------------------------------------------
 *	WATERLEVELS
 * ----------------------------------------------------------
 */
.world .water-default,
.world .water-day,
.world .water-night{ 
	opacity: 1;
	-webkit-transition: opacity 1s ease;
	-moz-transition: 	opacity 1s ease;
	-o-transition: 		opacity 1s ease;
	transition: 		opacity 1s ease;
	}
.world .water-default.off,
.world .water-day.off,
.world .water-night.off{ opacity: 0;}

/**
 * ----------------------------------------------------------
 *	PIPES
 * ----------------------------------------------------------
 */
.world .pipes{
/*	transform: 			translate(250px,60px);
	-webkit-transform: 	translate(250px,60px);
	-moz-transform: 	translate(250px,60px);
	-o-transform: 		translate(250px,60px);*/
}


/**
 * ----------------------------------------------------------
 *	WATERPIPE
 * ----------------------------------------------------------
 */

.world .waterpipe{
	fill:none;
	stroke:#C7C7C7;
	stroke-width:6px;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-miterlimit:10;
}

/**
 * ----------------------------------------------------------
 *	WATERFLOW
 * ----------------------------------------------------------
 */
.world .waterflow{ 	
	stroke : transparent; 
	stroke-width:3px; 
	stroke-linecap:round;
	stroke-miterlimit:1;
	stroke-linejoin:round;
	stroke-dasharray: 10;
	stroke-dashoffset: 0;
	fill:none; }
.world .waterflow{ stroke : #1b75bb; }
.world .waterflow.sweet{ stroke : #b9e2df; }
.world .waterflow{ 	
    -webkit-animation:	waterflow 2s linear infinite;
    -moz-animation:		waterflow 2s linear infinite;
    animation:			waterflow 2s linear infinite;
}
.world .waterflow.flip{ 
    -webkit-animation:	waterflow-flip 2s linear infinite;
    -moz-animation:		waterflow-flip 2s linear infinite;
    animation:			waterflow-flip 2s linear infinite;
}
@keyframes waterflow { 					from { stroke-dashoffset: 0;} to { stroke-dashoffset: 100; } }
@-webkit-keyframes waterflow { 			from { stroke-dashoffset: 0;} to { stroke-dashoffset: 100; } }
@keyframes waterflow-flip { 			from { stroke-dashoffset: 100;} to { stroke-dashoffset: 0; } }
@-webkit-keyframes waterflow-flip { 	from { stroke-dashoffset: 100;} to { stroke-dashoffset: 0; } }

.world .waterflow.pause{
    -webkit-animation: 	none;
    -moz-animation:		none;
    animation:			none;
}

/**
 * ----------------------------------------------------------
 *	WATERLINE
 * ----------------------------------------------------------
 */
.world .water-line{
	fill:none;
	stroke : #1b75bb;
	stroke-width:2px;
}
/**
 * ----------------------------------------------------------
 *	WIND VANE
 * ----------------------------------------------------------
 */
.world .vane{
/*	transform: 			translate(440px,110px)  scale(0.5);
	-webkit-transform: 	translate(440px,110px)  scale(0.5);
	-moz-transform: 	translate(440px,110px)  scale(0.5);
	-o-transform: 		translate(440px,110px)  scale(0.5);*/
}
.world .vane.hidden{
	display: none;
}
.world .vane #flag{
    -ms-animation:		pumpering .3s linear infinite;
    -moz-animation:		pumpering .3s linear infinite;
    -webkit-animation:	pumpering .3s linear infinite;
    animation:			pumpering .3s linear infinite;
}
/**
 * ----------------------------------------------------------
 *	BACKS ( replaces waterlevels )
 * ----------------------------------------------------------
 */

.back-sky-night,
.back-sky-sun,
.back-default,
.back-night,
.back-day{
	opacity: 1;
	-webkit-transition: opacity 1s ease;
	-moz-transition: 	opacity 1s ease;
	-o-transition: 		opacity 1s ease;
	transition: 		opacity 1s ease;
}
.back-sky-night.off,
.back-sky-sun.off,
.back-default.off,
.back-night.off,
.back-day.off{
opacity: 0;
}


/**
 * ----------------------------------------------------------
 *	UNORGANIZED
 * ----------------------------------------------------------
 */



.world .topline{
/*	transform: 			translate(230px,-18px);
	-webkit-transform: 	translate(230px,-18px);
	-moz-transform: 	translate(230px,-18px);
	-o-transform: 		translate(230px,-18px);*/

}
.world .heightlinelow{
/*	transform: 			translate(230px,220px);
	-webkit-transform: 	translate(230px,220px);
	-moz-transform: 	translate(230px,220px);
	-o-transform: 		translate(230px,220px);*/
}
.world .heightlinetop{
/*	transform: 			translate(230px,53px);
	-webkit-transform: 	translate(230px,53px);
	-moz-transform: 	translate(230px,53px);
	-o-transform: 		translate(230px,53px);*/

}
.world .heightlinelow,
.world .heightlinetop{
	text-anchor : end ;
	font-size: 10px;
}

.world .thedot{
	/*stroke :orange;*/
/*	transform: 			translate(234px,215px);
	-webkit-transform: 	translate(234px,215px);
	-moz-transform: 	translate(234px,215px);
	-o-transform: 		translate(234px,215px);*/
}

.world .ruler{
/*	transform: 			translate(230px,93px);
	-webkit-transform: 	translate(230px,93px);
	-moz-transform: 	translate(230px,93px);
	-o-transform: 		translate(230px,93px);*/

	fill:none;
	stroke:#4B4C4D;
	stroke-miterlimit:10;
	stroke-dasharray:3;
}




.world .building{
/*	transform: 			translate(75px,205px);
	-webkit-transform: 	translate(75px,205px);
	-moz-transform: 	translate(75px,205px);
	-o-transform: 		translate(75px,205px);*/
}
.world .building #outline{ fill : transparent;}
.world .building #outline:hover{ stroke : #FF0000; stroke-width : 2px; }
.world .building #top,
.world .building #front-outside,
.world .building #back-inside,
.world .building #left-inside ,
.world .building #right-outside{
	-webkit-transition: fill 1s ease;
	-moz-transition: 	fill 1s ease;
	-o-transition: 		fill 1s ease;
	transition: 		fill 1s ease;
}
.world .building #top{ fill : #EDEDED; } /* light */
.world .building #front-outside,
.world .building #back-inside{ fill : #D8D8D8; } /* medium */
.world .building #left-inside ,
.world .building #right-outside{ fill : #D1D1D1; } /* dark */
/* daytime */
.world.daytime .building #top{ fill : #FFFDF5; } 
.world.daytime .building #front-outside,
.world.daytime .building #back-inside{ fill : #EEECE4; } 
.world.daytime .building #left-inside ,
.world.daytime .building #right-outside{ fill : #E8E6DF; } 
/* nighttime */
.world.nighttime .building #top{ fill : #8B8D91; }
.world.nighttime .building #front-outside,
.world.nighttime .building #back-inside{ fill : #7A7C80; } 
.world.nighttime .building #left-inside ,
.world.nighttime .building #right-outside{ fill : #75777A; } 











.scn-piping polyline{
	stroke : blue; 
	stroke-width : 2px; 
	stroke-linecap : round;
	stroke-linejoin : round;
	fill : transparent;
} 
.scn-piping.electric polyline{
	stroke : red; 
	stroke-dasharray: 5;
	stroke-dashoffset: 2;
    -webkit-animation:electric 4s linear infinite;
    -moz-animation:electric 4s linear infinite;
    animation:electric 4s linear infinite;

}

/* piping */
.scn-pipeflow, 
.scn-pipe{ 
	fill: none; 
	stroke-linecap: round;
	stroke-linejoin: round;
}
.scn-pipe.water{  
	stroke-width : 8px; 
	stroke : #bbbcbe;  } /*light grey*/
.scn-pipe.electric{ 
	stroke-width : 4px;  
	stroke : #6a6b6d;  } /*dark grey*/
.scn-pipeflow{ 
	stroke-width: 0px;
	stroke-dasharray: 2 8;
	stroke-dashoffset: 5;
}
.scn-pipeflow.still.water,
.scn-pipeflow.right.water,
.scn-pipeflow.left.water{ stroke : #1d75bb; stroke-width:3px;} /* blue */
.scn-pipeflow.still.freshwater,
.scn-pipeflow.right.freshwater,
.scn-pipeflow.left.freshwater{ stroke : #82e1db; stroke-width:3px;} /* light blue */
.scn-pipeflow.still.electric,
.scn-pipeflow.right.electric,
.scn-pipeflow.left.electric{ stroke : #e1e14a; stroke-width:2px;} /* light blue */
.scn-pipeflow.left{
    -webkit-animation:electric 4s linear infinite;
    -moz-animation:electric 4s linear infinite;
    animation:electric 4s linear infinite;
}
.scn-pipeflow.right{
    -webkit-animation:electricRight 4s linear infinite;
    -moz-animation:electricRight 4s linear infinite;
    animation:electricRight 4s linear infinite;
}



@-ms-keyframes wiggle{0%{-ms-transform:rotate(3deg);}50%{-ms-transform:rotate(-3deg);}100%{-ms-transform:rotate(3deg);}}
@-moz-keyframes wiggle{0%{-moz-transform:rotate(3deg);}50%{-moz-transform:rotate(-3deg);}100%{-moz-transform:rotate(3deg);}}
@-webkit-keyframes wiggle{0%{-webkit-transform:rotate(3deg);}50%{-webkit-transform:rotate(-3deg);}100%{-webkit-transform:rotate(3deg);}}
@keyframes wiggle{0%{transform:rotate(3deg);}50%{transform:rotate(-3deg);}100%{transform:rotate(3deg);}}
.wiggle{-ms-animation:wiggle .3s 2;-moz-animation:wiggle .3s 2;-webkit-animation:wiggle .3s 2;animation:wiggle .3s 2;}


.pulsate {
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
}
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.8, 0.8); }
    50% {}
    100% {-webkit-transform: scale(1.2, 1.2); }
}


@keyframes electric {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes electric {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes electricRight {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 100;
  }
}

@-webkit-keyframes electricRight {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 100;
  }
}



}
.scn-piping .electric polyline{
}

 .scn-spin {
    /*position: absolute;*/
    /*top: 50%;*/
    /*left: 50%;*/
    /*width: 120px;*/
    /*height: 120px;*/
    /*margin:-60px 0 0 -60px;*/
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }