@import url('reset.css');
@import url('fonts.css');
@import url('animation.css');

/* USED COLORS 
BLUE #14506b

*/

/* COMMON */
body{ background: #543f2e url(../images/bkgd.jpg) repeat-x;}

.clear{ clear: both;}

ul{ margin: 0; padding: 0; list-style: none;}

/* PRELOADER */ 
#preloader {
    position:fixed;
	z-index: 999;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: #14506b; /* change if the mask should have another color then white */
}

#status {
    width:200px;
    height:250px;
	z-index: 999;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */ 
    top:50%; /* centers the loading animation vertically one the screen */
    background-image: url(preloader/preloader.png); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-125px 0 0 -100px; /* is width and height divided by two */
}
#status img{ position:absolute; left: 4px; top: 16px; width: 192px; height: 192px;}
@keyframes preloadAnim{
	 from { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform: rotate(0deg); }
	 to   { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); transform: rotate(360deg); }
}
#status img{
	animation: preloadAnim 2s linear;
	-webkit-animation: preloadAnim 2s linear;
	-moz-animation: preloadAnim 2s linear;
	-o-animation: preloadAnim 2s linear;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

/* NAVIGATION */
.logo{ position:absolute; left: 5%; top: 5%;}

section.navigation{ position: absolute; right: 0; top: 0; padding: 0 5px; background: #14506b; height: 100%;}
section.navigation a.switch-on-menu{ background: #14506b url(layout/menu-switch.png) no-repeat center center; width: 50px; height: 50px; position: absolute; left: -50px; top: 0; text-indent: -9999px;}
section.navigation a:hover.switch-on-menu{ background: #14506b url(layout/menu-switch-on.png) no-repeat center center;}

nav span{ color: #739caf; padding: 13px 45px 50px; display:block;}
nav ul{ border-bottom: 1px solid #2d6e8b; padding: 0 45px;}
nav ul li{ padding: 10px 50px 10px 0; border-bottom: 1px solid #0f4157; border-top: 1px solid #2d6e8b;}
nav ul li:first-child{ border-top: 0 none;}
nav ul li a{ text-decoration: none; color: #fff; background: url(layout/bullet-plus.png) no-repeat left center; padding-left: 20px;}
nav ul li a:hover{ color: #a1cde1; background: url(layout/bullet-moins-blue.png) no-repeat left center;}

/* site */
.site{ width: 1200px; margin: 0 auto; position:relative;}
.container{ width: 100%; height: 100%; position: fixed; overflow:hidden;}

/* POP UP */
.popup{ background: rgba(0, 0, 0, 0.8); position:absolute; left: 0; top: 0; width: 100%; height: 100%;}
.popup .video{ width: 640px; height: 360px; position:absolute; background: #fff; left: 50%; top: 50%; margin: -180px 0 0 -320px; -webkit-box-shadow: 0 0 20px 10px rgba(0,0,0,0.8); box-shadow: 0 0 20px 10px rgba(0,0,0,0.8);}
.popup a.closevideo{ width: 23px; height: 20px; text-align: center; background: #666; color: #fff; padding: 10px 5px 5px 6px; position:absolute; right: -34px; top: 0; display:block; text-decoration: none; line-height: 1em;}
.popup a:hover.closevideo{ background: #d8245b;}
.popup iframe.disnone{ display: none;}
.popup iframe.disblock{ display: block;}

/* TOUCH */
.touch{ background: #fff; height: 100%; padding-right: 373px; position: absolute; right: 0; top: 0;}
.touch .form{ padding: 80px 0 50px 45px; width: 300px}
.touch .form h2{ margin-bottom: 0.75em; color: #d8245b;}
.touch .form label{ margin-top: 1em; margin-bottom: 0.5em; display:block;}
.touch .form input{ border: 1px solid #14506b; width: 90%; padding: 5px 5%;}
.touch .form br{ display: none;}
.touch .close{ position:absolute; left: 0; top: 0; background: #333; color: #fff; text-decoration:none; padding: 10px;}
.touch a:hover.close{ background: #666;}
.touch input.wpcf7-submit{ background: #14506b; color: #fff; border: none; margin-top: 1em;width: inherit;}
.touch .wpcf7-mail-sent-ok{ border: 1px solid #14506b; display:block; padding: 5px; margin-top: 1em;}

/* BTN CLOUD AND PERSO */
.cloud-txt{ background: url(../images/cloud-txt.png) no-repeat; text-align: center; width: 179px; height:67px; color: #fff; display:block; position:absolute; left: 30%; top: 8%; text-decoration: none; padding: 35px 20px 20px;}
#newcity .cloud-txt{ top: 3%;}
.cloud-txt img{ margin-top: 10px;}
#btnclose,
#btn{ width: 85px; height: 85px; -webkit-border-radius: 50%; border-radius: 50%; border: 5px solid #fff; -webkit-box-shadow: 0 0 5px 5px rgba(0,0,0,0.2); box-shadow: 0 0 5px 5px rgba(0,0,0,0.2); position:absolute; right: 0; top: 50px; z-index: 402;}
#btnclose img,
#btn img{ position:absolute; z-index: 5; top: -30px; right: 10px;}
#btnclose span,
#btn span{ position:absolute;  left: -20%; top: 20px; z-index: 6; text-align: center; text-decoration: none; color: #65c7ec; width: 140%;}
#btn{ background: #14506b;}
#btnclose{ background: #ed937e;}
#btnclose span{ color: #fff; text-shadow: 0 0 10px #878787; width: 180%; left: -40%;}
a:hover#btn{ background: #65c7ec;}
a:hover#btn span{ color: #14506b;}
a:hover#btnclose{ background: #fff;}
a:hover#btnclose span{ color: #ed937e; text-shadow: none;}

/* OLD */
#oldcity{ background: url(../images/bkgd-old.png) no-repeat center 320px; width: 100%; height: 100%; position:absolute; left: 0; z-index: 1;}
#oldcity.start{ top: 0;}
#oldcity .rw{ width: 8%; height: 20px; background: #ccc;}
#oldcity .city{ width: 15.3%; float: right; margin-top: 215px; position:relative;}
#oldcity .city img{ width: 100%;}
#oldcity .city .river{ position:absolute; left: -37px; top: 105px; width: 112%; height: 56%; z-index: 61;}
#oldcity .sewer{ width: 74%; position:absolute; margin-top: 368px; right: 4.5%;}
#oldcity .line{ width: 68.25%; position:absolute; left: 15.3%; margin-top: 260px;}
#oldcity .asp{ width: 13.8%; position:absolute; left: 43.6%; margin-top: 338px;}
#oldcity .asp img{ width: 100%;}
#oldcity .asp .helice-asp{ width: 12%; position:absolute; top: 39%; left: 4%;}
#oldcity .asp .hasp02{ left: 23%;}
#oldcity .clarifier{ width: 8%; position:absolute; right: 27.3%; top: 347px;}
#oldcity .primary{ width: 8.5%; position:absolute; left: 31%; margin-top: 345px;}
#oldcity .anaerobic{ position:absolute; width: 4%; left: 45.5%; margin-top: 410px;}
#oldcity .anaerobic img{ width: 100%;}
#oldcity .anaerobic .helice-anaerobic{ width: 50%; position: absolute; left: 29.2%; bottom: 35%;}
#oldcity .dewatering{ with: 9%; position:absolute; margin-top: 453px; left: 25%;}
#oldcity .txt{ position:absolute; margin-top: 700px; width: 100%; text-align: center; color: #ddcdc0; text-transform: uppercase;}
#oldcity .txt-schema{ color: #758b4e; text-align: left; position: absolute;}
#oldcity .txt-effl{ color: #65c7ec;}
#oldcity .txt-biog,
#oldcity .txt-anae,
#oldcity .txt-comb,
#oldcity .txt-elec,
#oldcity .txt-heat2{ color: #1b1b11;}

#oldcity .txt-raw{ left: 21.5%; top: 305px;}
#oldcity .txt-prim{ left: 31%; top: 305px;}
#oldcity .txt-proc{ left: 43.5%; top: 305px;}
#oldcity .txt-co2{ left: 57%; top: 315px;}
#oldcity .txt-air{ left: 59.5%; top: 291px;}
#oldcity .txt-cla{ left: 66.6%; top: 328px;}
#oldcity .txt-dewa{ left: 27%; top: 497px;}
#oldcity .txt-slud{ left: 35%; top: 400px;}
#oldcity .txt-slud2{ left: 35%; top: 448px;}
#oldcity .txt-slud3{ left: 62%; top: 400px;}
#oldcity .txt-effl{ left: 73%; top: 328px;}
#oldcity .txt-biog{ left: 53%; top: 450px;}
#oldcity .txt-anae{ left: 42%; top: 497px;}
#oldcity .txt-comb{ left: 58%; top: 497px;}
#oldcity .txt-elec{ left: 72.5%; top: 449px;}
#oldcity .txt-heat2{ left: 72.5%; top: 500px;}

a.lochere{ width: 20px; height: 20px; -webkit-border-radius: 50%; border-radius: 50%; display:block; border: 3px solid #fff; text-indent: -9999px; position:absolute; z-index: 296; }
a:hover.lochere{ border: 3px solid #14506b;}

#oldcity a.locplant{ left: 6%; top: 340px;}
#oldcity a.loccity{ left: 90%; top: 300px;}
#oldcity a.locraw{ left: 20.9%; top: 345px;}
#oldcity a.locprim{ left: 33%; top: 345px;}
#oldcity a.locproc{ left: 45%; top: 345px;}
#oldcity a.locair{ left: 55%; top: 315px;}
#oldcity a.locclar{ left: 67.6%; top: 345px;}
#oldcity a.loceffl{ left: 74%; top: 345px;}
#oldcity a.locanae{ left: 46.6%; top: 449px;}
#oldcity a.loccomb{ left: 58.5%; top: 450px;}
#oldcity a.locdewa{ left: 27%; top: 460px;}

/* NEW */
#newcity{ background: url(../images/bkgd-new.png) no-repeat center 320px; width: 100%; height: 100%; position:absolute; left: 0; z-index: 101;}
#newcity.start{ top: 100%;}
#newcity .factory{ width: 10%; margin-top: 265px;}
#newcity .city{ width: 11.3%; float: right; margin-top: 243px; position:relative}
#newcity .city img{ width: 100%;}
#newcity .city .river{ position:absolute; left: -27px; top: 77px; width: 112%; height: 57%; z-index: 301}
#newcity .sewer{ width: 85%; position:absolute; margin-top: 255px; right: 3.3%;}
#newcity .line{ width: 78.25%; position:absolute; left: 11.3%; top: 229px;}
#newcity .txt{ position:absolute; margin-top: 700px; width: 100%; text-align: center; color: #ddcdc0; text-transform: uppercase;}

#newcity .astage{ position:absolute; left: 24%; top: 233px; width: 9%;}
#newcity .astage img.base{ width: 100%; position:relative;}

#newcity .bstage{ position:absolute; left: 53.3%; top: 226px; width: 9%;}
#newcity .bstage img.base{ width: 100%; position:relative;}

#newcity .slidestream{ position:absolute; width: 9%; left: 16%; top: 293px;}
#newcity .slidestream a.pistonrightlink,
#newcity .slidestream a.pistonlink{ width: 50%;}
#newcity .slidestream a.pistonrightlink{ left: 50%;}
#newcity .slidestream span.linkpopleft,
#newcity .slidestream span.linkpopright{ top: 52%;}
#newcity .slidestream span.linkpopleft{ right: -35%;}
#newcity .slidestream span.linkpopright{ left: -35%;}
#newcity .slidestream img.helicepiston{ top: 50%;}

#newcity .txt-schema{ color: #758b4e; text-align: left; position: absolute; z-index: 278;}
#newcity .txt-effl{ color: #65c7ec;}
#newcity .txt-asta,
#newcity .txt-bsta,
#newcity .txt-polis,
#newcity .txt-slud{ color: #3aa1a9;}

#newcity .txt-effl{ color: #65c7ec; -webkit-transform:rotate(26deg); -moz-transform:rotate(26deg); -o-transform:rotate(26deg); transform: rotate(26deg);}

#newcity .txt-slid{ text-align: center;}

#newcity .txt-slud3,
#newcity .txt-dewa,
#newcity .txt-anae{}

#newcity .txt-biog,
#newcity .txt-natu,
#newcity .txt-elec,
#newcity .txt-heat2{ color: #fff;}

#newcity .txt-comb,
#newcity .txt-heat{ color: #d5245b;}

#newcity .txt-raw{ left: 11.5%; top: 212px;}
#newcity .txt-asta{ left: 30%; top: 200px;}
#newcity .txt-bsta{ left: 52.5%; top: 200px;}
#newcity .txt-slid{ left: 17%; top: 353px;}
#newcity .txt-air{ left: 59.5%; top: 291px;}
#newcity .txt-polis{ left: 66%; top: 200px;}
#newcity .txt-dewa{ left: 19%; top: 514px;}
#newcity .txt-slud{ left: 45%; top: 340px;}
#newcity .txt-slud2{ left: 28%; top: 423px;}
#newcity .txt-slud3{ left: 29%; top: 321px;}
#newcity .txt-effl{ left: 77%; top: 256px;}
#newcity .txt-biog{ left: 46%; top: 460px;}
#newcity .txt-anae{ left: 32.3%; top: 553px;}
#newcity .txt-comb{ left: 57%; top: 546px;}
#newcity .txt-elec{ left: 77.5%; top: 482px;}
#newcity .txt-heat{ left: 69.5%; top: 553px;}
#newcity .txt-heat2{ left: 78.5%; top: 521px;}
#newcity .txt-powe{ left: 57.5%; top: 435px;}
#newcity .txt-natu{ left: 67.5%; top: 404px;}

#newcity a.locplant{ left: 4%; top: 270px;}
#newcity a.loccity{ left: 93%; top: 300px;}
#newcity a.locpolis{ left: 67.7%; top: 240px;}
#newcity a.loceffl{ left: 77.5%; top: 260px;}
#newcity a.locanae{ left: 38.6%; top: 449px;}
#newcity a.locnatu{ left: 70%; top: 400px;}
#newcity a.locelec{ left: 79%; top: 477px;}
#newcity a.locheat{ left: 79%; top: 514px;}

a.pistonrightlink,
a.pistonlink{ width: 39%; height: 100%; position:absolute; z-index: 105; text-decoration: none; top: -12%; text-align: center;}
a.pistonlink{ left: 1%;}
a.pistonrightlink{ left: 41%;}
a img.piston{ width: 14%; position:absolute; left: 50%; margin-left: -7%;}
a img.helicepiston{ width: 30%; position:absolute; left: 50%; margin-left: -15%; top: 33%;}
a.pistonrightlink span.linkpop,
a.pistonlink span.linkpop{ left: 50%; margin-left: -10px; bottom: 0;}

.bac{ position: absolute;}
.bac .animpiston{ position:absolute; margin-left: -8px; left: 50%; top: -8%;}
.bac .helicepiston{ position: absolute; left: 50%; margin-left: -19px; margin-top: 65px;}

.bac1{ left: 32%; top: 348px; z-index: 271;}
.bac2{ left: 36%; top: 382px; z-index: 272;}

span.linkpop{ background: url(../images/popup-location.png) no-repeat; text-align: center; width: 21px; height: 21px; display:block; padding-top: 10px; color: #fff; position:absolute;}
span.linkpopleft{ background: url(../images/popup-location-left.png) no-repeat; width: 24px; height: 21px; display:block; padding: 0 7px 0 0; color: #fff; position:absolute;  text-align: right;}
span.linkpopright{ background: url(../images/popup-location-right.png) no-repeat; width: 24px; height: 21px; display:block; padding: 0 0 0 7px; color: #fff; position:absolute;  text-align: left;}
span.linkpopdown{ background: url(../images/popup-location-down.png) no-repeat; text-align: center; width: 21px; height: 21px; display:block; padding-bottom: 10px; color: #fff; position:absolute;}

.link3{ position: absolute; left: 60.5%; top: 389px;}
.link4{ position: absolute; left: 72%; top: 514px;}

span.bubble{ border: 2px solid #fff; width: 2%; height: 2%; display:block; position:absolute; -webkit-border-radius: 50%; border-radius: 50%; z-index: 104; left: 5%; top: 20%; opacity: 30; filter: alpha(opacity=30);}

/* POP UP */
.popup-block{ position: relative; width: 100%;}
.popup-block .left,
.popup-block .right{width: 50%; position:relative; float: left; overflow: hidden;}
.popup-block .left{ height: 100%;}
.popup-block .left{ background: #ccc;}
.popup-block .left img{ height: 100%; float: left; min-width: 100%;}
.popup-block .left h2{ background: rgba(216, 36, 91, 0.8); -webkit-border-radius: 10px 0 0 10px; border-radius: 10px 0 0 10px; text-align: right; padding: 15px 15px 15px 15px; position:absolute; right: 0; top: 20px; color: #fff;}
.popup-block .right{ padding: 2%; width: 46%;}
.popup-block .right h2{ color: #d8245b; margin-bottom: 1em;}
.popup-block .right h3{ color: #16506b; border-bottom: 1px solid #16506b; padding-bottom: 5px; margin-bottom: 0.5em;}
.popup-block .location{ color: #16506b; position:absolute; right: 2%; top: 2%; }
.popup-block .location-ico{ background: url(../images/location-ico.png) no-repeat left top; background-size: 100% 100%; width: 55px; height: 65px; position:absolute; bottom: 0; left: 25%; margin-left: -28px; color: #fff; text-align: center; padding-top: 12px;}
.popup-block a.see-more{ background: #16506b url(../images/shadow.jpg) repeat-x; width: 46%; position:absolute; bottom: 0; right: 0; padding: 10px 2%; text-align: center; text-decoration: none; color: #fff;-webkit-border-radius: 0 0 10px 0; border-radius: 0 0 10px 0;}
.popup-block a:hover.see-more{ background: #eee; color: #16506b;}
.popup-block a.contact-popup{ width: 46%; position:absolute; bottom: 48px; right: 0; padding: 0 2%; text-align: center; color: #16506b;}
.popup-block p{ margin-bottom: 0.75em;}
.popup-block p a{ color: #d8245b;}


/* FOOTER */
footer{ background: #e5e5e5; width: 97%; position: absolute; left: 0; bottom: 0; padding: 10px 1.5%;}
footer span{ color: #da406e;}
footer .left-footer{ float: left;}
footer .right-footer{ float: right;}
footer .right-footer img{ float: left;}
footer .right-footer p{ float: left; margin-left: 10px;}

/* Z-INDEX 0 - 100 OLD / 101 - 200 NEW /  */
footer{ z-index: 900;}
section.touch{ z-index: 901;}
section.navigation{ z-index: 902;}
.cloud-txt{ z-index: 208;}
.popup{ z-index: 990;}