/*
Fontface Name: Roboto;
Light: 300;
Normal: 400;
Medium: 500;
Bold: 700;
*/

/* Global
-------------------------------------------------------------- */

body
{
	font-size: 100%;
	line-height: 1.5;
	font-family: Helvetica, Arial, sans-serif;
	background-color: #fff;
	color: #606060;
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
}

::-moz-selection
{
	background: #2c5c91;
	color: #fff;
	text-shadow: none;
}

::selection
{
	background: #2c5c91;
	color: #fff;
	text-shadow: none;
}

a
{
	-o-transition: color .12s ease-out, background .12s ease-out;
	-ms-transition: color .12s ease-out, background .12s ease-out;
	-moz-transition: color .12s ease-out, background .12s ease-out;
	-webkit-transition: color .12s ease-out, background .12s ease-out;
	transition: color .12s ease-out, background .12s ease-out;
}

a, a:link
{
	color: #4985b9;
	text-decoration: none;
}

a:focus,
a:hover
{
	color: #000;
	outline: none;
}

a:active { outline: none; }

/* Layout
-------------------------------------------------------------- */

#page
{
	float: left;
	width: 100%;
}

.wrap
{
	max-width: 1010px;
	margin: 0 auto;
}

#main,
#header
{
	width: 100%;
	float: left;
	position: relative;
}

/* Columns */
.columns
{
	width: 100%;
	float: left;
	margin: 0 0 2em 0;
	padding: 0 0 0em 0;
	clear: both;
	position: relative;
}

.row
{
	clear: both;
	width: 100%;
	float: left;
}

.one-half { width: 48.5%; }
.one-third { width: 31.3%; }
.two-third { width: 65.64%; }
.one-fourth { width: 22.69%; }
.three-fourth { width: 74.23%; }
.one-fifth { width: 16.8%; }
.one-sixth { width: 14%; }
.two-fifth { width: 37.6%; }
.three-fifth { width: 58.4%; }
.four-fifth { width: 67.2%; }
.five-sixth { width: 82.67%; }

.one-half, .one-third, .two-third, .three-fourth, .one-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth, .one-sixth, .five-sixth
{
	position: relative;
	margin-right: 3%;
	float: left;
	margin-bottom: 2em;
}

.last
{
	margin-right: 0!important;
	clear: right;
}

/* Header */
.is-sticky #header
{
	z-index: 1000;
	height: 40px;
}

.is-sticky #header #logo
{
	position: relative;
	top: -18px;
	transform: scale(.5);
	-ms-transform: scale(.5);
	-webkit-transform: scale(.5);
	transform-origin: left top;
	-ms-transform-origin: left top;
	-webkit-transform-origin: left top;
}

.is-sticky #header #main-nav
{
	position: relative;
	top: -14px;
}

#header
{
	position: relative;
	background-color: #fff;
	padding: 20px 0;
	float: left;
	transition: all ease-in .2s;
	-webkit-transition: all ease-in .2s;
}

#main-waypoint
{
	position: absolute;
	top: 15px;
	left: 200px;
	width: 5px;
	height: 1px;
}

#header.stuck-main
{
	position: fixed;
	top: -20px;
	z-index: 999999;
	padding: 0;
	border-bottom: 1px solid #eee;
	box-shadow: 0 2px 5px rgba(0,0,0,.2);
	transition: all ease-out .3s;
	-webkit-transition: all ease-out .3s;
}

#logo
{
	float: left;
	margin-top: 4px;
	width: 29.70%;
	position: relative;
}

#header.stuck-main #logo
{
	transform: scale(.6,.6);
	-ms-transform: scale(.6,.6);
	-webkit-transform: scale(.6,.6);
	transform-origin: left top;
	-ms-transform-origin: left top;
	-webkit-transform-origin: left top;
	top: 22px;
	transition: top ease-in .1s;
	-webkit-transition: top ease-in .1s;
}

#header.stuck-main #main-nav ul
{
	position: relative;
	top: 26px;
}

#header.stuck-main #main-nav ul li a
{
	height: 20px;
	line-height: 20px;
	font-size: 11pt;
	font-weight: 600;
}

#header.stuck-main #main-nav ul li.current a { background-image: none; }

#header.stuck-main #main-nav ul
{
	padding: 0px;
	margin: 0px;
}

#header.stuck-main #main-nav ul li a { padding: 0px; }

/* Menu */
#main-nav
{
	float: right;
	/*position: relative;*/
}

#main-nav ul li
{
	display: inline;
	font-size: 20px;
	margin-left: 52px;
}

#main-nav ul li a
{
	color: #7b7b7b;
	padding: 41px 0;
}

#main-nav ul li a:hover,
#main-nav ul li.current a { color: #57abdf; }
#main-nav ul ul { display: none; }
#main-nav ul .current ul { display: none; }

#main-nav ul li a
{
	-o-transition: color .12s ease-out, background 0s ease-out;
	-ms-transition: color .12s ease-out, background 0s ease-out;
	-moz-transition: color .12s ease-out, background 0s ease-out;
	-webkit-transition: color .12s ease-out, background 0s ease-out;
	transition: color .12s ease-out, background 0s ease-out;
}

.menu-home.current a { background: url(../images/outer_page_arrow.png) no-repeat bottom center; }
.menu-about.current a,
.menu-technology.current a { background: url(../images/inner_page_arrow.png) no-repeat bottom center; }
.menu-applications.current a { background: url(../images/inner_page_arrow_2.png) no-repeat bottom center; }
.menu-contact.current a { background: url(../images/inner_page_arrow_3.png) no-repeat bottom center; }

/* Sub Menu */
.main-sub-nav
{
	float: right;
	width: 80%;
	margin-top: 19px;
}

.applications-subnav .main-sub-nav { width: 70%; }

.main-sub-nav ul
{
	padding: 0;
	margin: 0;
	text-align: right;
}

.main-sub-nav ul li
{
	display: inline-block;
	margin-left: 10px!important;
	padding-right: 15px;
	background: url(../images/sub_menu_divider.png) repeat-y bottom right;
	font-size: 14px;
}

.main-sub-nav ul li:last-child
{
	padding-right: 0;
	background: none;
}

.main-sub-nav ul li a
{
	color: #fff;
	font-size: 14px;
	padding: 10px 0 14px 0!important;
	background: none!important;
	opacity: .7;
}

.main-sub-nav ul li a:hover,
.main-sub-nav ul li a.selected { opacity: 1!important; }
.main-sub-nav ul li a.selected { font-weight: 700; }

/* Call To Action Secondary */
.call-to-action-secondary
{
	clear: both;
	color: #4985b9;
	padding: 40px 0;
	background: #fff;
}

.call-to-action-secondary .inner
{
	width: 80%;
	margin: 0 auto;
}

.call-to-action-secondary h3
{
	color: #2c5c91;
	font-size: 30px;
	font-weight: 500;
}

.call-to-action-secondary .more-secondary, .cs-desc .more-secondary
{
	font-style: italic;
	background: url(../images/circle_arrow_blue.png) no-repeat right center;
	padding-right: 30px;
	color: #4985b9!important;
	font-size: 18px;
	padding-top: 2px;
	padding-bottom: 2px;
}

.call-to-action-secondary .more-secondary:hover, .cs-desc .more-secondary:hover { text-decoration: underline; }

/* Animation 
-------------------------------------------------------------- */

#bargraph
{
	width: 808px;
	position: relative;
	margin: 0 auto;
}

.ruler
{
	width: 808px;
	height: 22px;
	background-image: url('../images/ruler.png');
	background-repeat: no-repeat;
	background-position: 0 0;
	transition: all 0.7s;
	-webkit-transition: all 0.7s;
	float: left;
}

.braw, .buni
{
	-webkit-border-top-right-radius: 45px;
	-webkit-border-bottom-right-radius: 45px;
	-moz-border-radius-topright: 45px;
	-moz-border-radius-bottomright: 45px;
	border-top-right-radius: 45px;
	border-bottom-right-radius: 45px;
	position: absolute;
	z-index: 100;
	transition: all 0.7s;
	-webkit-transition: all 0.7s;
	left: 0;
	height: 90px;
}

.braw
{
	width: 1px;
	background: #4985b9 url('../images/braw.png') no-repeat center right scroll;
	top: 75px;
}

.buni
{
	width: 1px;
	background: #006ab6 url('../images/buni.png') no-repeat center right scroll;
	top: 200px;
}

#salt-btn { margin-left: 118px; }
#electrical-btn { margin-left: 35px; }

#salt-btn, #electrical-btn
{
	color: #fff;
	font-weight: 700;
	font-size: 20px;
	border: 2px solid #ffffff;
	border-radius: 4px;
	padding: 10px 15px;
	width: 280px;
	display: inline-block;
	text-align: center;
	float: left;
	position: relative;
	margin-top: 40px;
}

#salt-btn.current, #electrical-btn.current
{
	background: #ffffff;
	color: #57abdf;
}

#salt-btn span, #electrical-btn span
{
	display: block;
	position: absolute;
	width: 35px;
	height: 18px;
	background: url('../images/tag-triangle.png') no-repeat center top scroll;
	top: -18px;
	left: 125px;
}

#bargraph .unit
{
	width: 35px;
	height: 318px;
	background: #ffffff;
	float: left;
	border-bottom: 1px solid #ffffff;
	transition: all 0.7s;
	-webkit-transition: all 0.7s;
	background-image: url('../images/unit.png');
	background-repeat: no-repeat;
	background-position: -35px center;
}

#bargraph .bstage
{
	width: 772px;
	height: 318px;
	border-right: 1px solid #79bce5;
	float: left;
	background: url('../images/graph-bg.png') no-repeat 0 0 scroll;
	border-bottom: 1px solid #ffffff;
	position: relative;
}

#bargraph h4
{
	font-size: 20px;
	color: #ffffff;
	font-weight: 700;
	text-align: center;
	padding-top: 2px;
	margin: 0 auto;
}

#trigger2
{
	position: absolute;
	width: 1px;
	height: 1px;
	top: 160px;
	left: 386px;
}

/* Home Page 
-------------------------------------------------------------- */

/* hero */
#hero
{
	float: left;
	width: 100%;
	background: transparent url(../images/hero_bg.jpg) no-repeat center center;
	height: 440px;
}

#hero .hero-content
{
	float: right;
	width: 55%;
	padding: 80px 0 50px 0;
	color: #2c5c91;
}

#hero .hero-content h1
{
	font-size: 35px;
	margin-bottom: 0px;
	line-height: 1.2;
	font-weight: 500;
}

#hero .hero-content h2
{
	margin: 0;
	font-weight: 300;
	font-size: 22px;
	margin-bottom: 50px;
}

#hero .hero-content .call-to-action a
{
	background: #57abdf;
	color: #fff;
	border-radius: 4px;
	padding: 7px 20px;
	max-width: 386px;
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
	border: 1px solid #57abdf;
	font-weight: 500;
}

#hero .hero-content .call-to-action a:hover
{
	background: transparent;
	color: #57abdf;
}

#hero .hero-content .call-to-action a.reverse
{
	background: transparent;
	color: #57abdf;
}

#hero .hero-content .call-to-action a.reverse:hover
{
	background: #57abdf;
	color: #ffffff;
}

/* Home Page Movie */
.home-page-movie
{
	float: left;
	padding-top: 40px;
	width: 100%;
	position: relative;
}

.home-page-movie h1, .home-page-movie p { color: #32679C; }

.home-page-movie h1
{
	margin-bottom: 0px;
	font-family: 'roboto', sans-serif;
	font-weight: 500;
}

.home-page-movie p
{
	font-size: 16pt;
	margin-top: 0px;
}

.wrapper-of-the-movie-wrapper
{
	max-width: 906px;
	margin: auto;
	clear: both;
}

.movie-wrapper
{
	position: relative;
	padding-bottom: 55%;
	padding-top: 8px;
}

.movie-wrapper iframe,
.movie-wrapper object,
.movie-wrapper embed
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Home Features */
.home-features
{
	padding-top: 60px;
	float: left;
	width: 100%;
	position: relative;
	left: 17px;
}

.home-features h3
{
	font-weight: 500;
	font-size: 20px;
}

.home-features .one-third
{
	text-align: center;
	border-right: 1px dotted #9ab4c4;
	padding-right: 3%;
	width: 31.3%;
}

.home-features .one-third.last
{
	border-right: none;
	/*padding-right: 0;*/
}

.home-features .one-third img
{
	width: 75%;
	margin-bottom: 10px;
}

.home-features .one-third h3 { color: #4985b9; }

.home-features .more
{
	width: 70%;
	display: inline-block;
	margin-top: 20px;
}

/* Call to action section */
.call-to-action-box
{
	background: #4a86ba;
	float: left;
	width: 100%;
	padding: 40px 0;
	color: #e4f6ff;
}

.call-to-action-box .call-to-action-message
{
	width: 66%;
	float: left;
}

.call-to-action-box h3
{
	font-weight: 500;
	margin: 0;
	font-size: 24px;
}

.call-to-action-box p
{
	font-weight: 300;
	font-style: italic;
	margin: 0;
	font-size: 20px;
}

.call-to-action-box .call-to-action-button
{
	width: 30%;
	float: right;
	margin-top: 35px;
}

.call-to-action-box .call-to-action-button a
{
	color: #fff!important;
	font-weight: 700;
	font-size: 20px;
	border: 2px solid #fffefe;
	border-radius: 4px;
	padding: 10px 15px;
	width: 90%;
	display: inline-block;
	text-align: center;
	float: right;
}

.call-to-action-box .call-to-action-button a:hover
{
	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
/* 	filter: alpha(opacity=80); */
	-moz-opacity: 0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
	transition: all 0.2s;
	-webkit-transition: all 0.2s;
}

/* Inner Pages
-------------------------------------------------------------- */

#page-heading,
#page-heading-contact
{
	background: #4985b9 url(../images/inner_heading_bg.png) repeat-y top center;
	float: left;
	width: 100%;
	padding: 20px 0 50px 0;
	color: #fff;
}

#page-heading-contact div.title
{
background-image: none;
height:25px;
}


#page-heading .title,
#page-heading-contact .title
{
	background: transparent url(../images/heading_divider2.png) no-repeat bottom center;
	float: left;
	width: 100%;
	position: relative;
}

#page-heading .title
{
	height: 105px;
}

#page-heading .title h1,
#page-heading-contact .title h1
{
	font-weight: 300;
	color: #fff;
	margin: 0 0 30px 0;
}

#page-heading h2,
#page-heading-contact h2
{
	font-weight: 700;
	font-size: 30px;
}

/* Sticky */

#page-heading div.title
{
	transition: all ease-in .1s;
	-webkit-transition: all ease-in .1s;
}

#page-heading div.title.is-sticky,
#page-heading-contact div.title.is-sticky
{
	position: fixed;
	top: 40px;
	z-index: 9999;
	background: #4985b9;
	height: 45px;
	border-bottom: 1px solid #467BA6;
	box-shadow: 0 2px 5px rgba(0,0,0,.2);
}

#page-heading div.title.is-sticky h1,
#page-heading div.title.is-sticky ul
{
	margin: 0 !important;
	padding: 0 !important;
	position: relative;
	top: -6px;
}

#page-heading div.title.is-sticky h1,
#page-heading-contact div.title.is-sticky h1
{	
	position: relative;
	font-size: 20px;
	top: 10px;
}

#page-heading-contact div.title.is-sticky h1
{

}


/* Applications */
.upper h2 { padding: 120px 0 0 83px; }

#timer
{
	font-size: 58px;
	font-weight: 400;
	line-height: 58px;
}

#percent
{
	font-size: 29px;
	line-height: 58px;
}

/* About */
.company-logo
{
	float: right;
	width: 34%;
	margin-left: 8%;
	/*margin-top: -10px;*/
}

.more-arrow
{
	font-style: italic;
	background: url(../images/circle_arrow2.png) no-repeat right center;
	padding-right: 30px;
	color: #fff!important;
	font-size: 18px;
}

.more-arrow:hover { text-decoration: underline; }

.staff-wrap, .applications-wrap, .technology-wrap
{
	color: #406db1;
	padding: 60px 0;
	float: left;
	width: 100%;
}

.technology-wrap { padding: 60px 0 0 0!important; }

.staff-mage
{
	float: left;
	width: 34%;
	margin-right: 4%;
}

.staff-name span { font-weight: 300; }

.staff-right
{
	float: right;
	width: 60%;
}

/* Technology */
.technology-feature-image
{
	float: right;
	width: 28%;
	margin-left: 13%;
	margin-top: -70px;
}

.electron-microscope
{
	clear: both;
	float: left;
	width: 100%;
	margin-bottom: 40px;
}

.electron-microscope h3 { text-align: center; }

.ecoli-bacteria
{
	background: url(../images/before-after-bg.jpg) no-repeat center center;
	height: 531px;
	position: relative;
	width: 1010px;
	transform-origin: center center;
	-webkit-transform-origin: center center;
	position: relative;
	margin: auto;
}

.ecoli-bacteria a
{
	background-image: url('../images/before-after-buttons.png');
	background-color: transparent;
	background-attachment: scroll;
	background-repeat: no-repeat;
	display: block;
	position: absolute;
	width: 74px;
	height: 74px;
	z-index: 1000;
	left: 468px;
	transition: none;
	-webkit-transition: none;
}

.ecoli-bacteria .btn1
{
	background-position: -86px 0;
	top: 139px;
}

.ecoli-bacteria .btn2
{
	background-position: -86px -294px;
	top: 228px;
}

.ecoli-bacteria .btn3
{
	background-position: -86px -588px;
	top: 317px;
}

.ecoli-bacteria .btn1:hover
{
	background-position: 0 0;
	top: 139px;
}

.ecoli-bacteria .btn2:hover
{
	background-position: 0 -294px;
	top: 228px;
}

.ecoli-bacteria .btn3:hover
{
	background-position: 0 -588px;
	top: 317px;
}

.ecoli-bacteria .activey { background-position: 0 0 !important; }
.ecoli-bacteria .activeo { background-position: 0 -294px !important; }
.ecoli-bacteria .activeb { background-position: 0 -588px !important; }

.ecoli-bacteria .bacteria-overlay
{
	position: absolute;
	z-index: 999;
	width: 467px;
	height: 301px;
	top: 115px;
	left: 505px;
}

.ecoli-bacteria .blue { background: url('../images/blue.png') no-repeat 0 0 scroll; }
.ecoli-bacteria .yellow { background: url('../images/yellow.png') no-repeat 0 0 scroll; }
.ecoli-bacteria .orange { background: url('../images/orange.png') no-repeat 0 0 scroll; }

.ecoli-bacteria .top
{
	position: absolute;
	top: 50px;
	color: #7b7b7b;
	font-weight: 700;
	width: 100%;
}

.ecoli-bacteria .top .left,
.ecoli-bacteria .top .middle,
.ecoli-bacteria .top .right
{
	text-align: center;
	display: inline-block;
	/*border: 1px solid red;*/
}

.ecoli-bacteria .top .left
{
	float: left;
	width: 35%;
}

.ecoli-bacteria .top .middle
{
	float: left;
	width: 30%;
	font-weight: 400!important;
}

.ecoli-bacteria .top .right
{
	float: right;
	width: 35%;
}

.ecoli-bacteria .bottom
{
	position: absolute;
	bottom: 0;
	width: 90%;
	left: 5%;
}

.ecoli-bacteria .bottom .fl
{
	float: left;
	width: 30%;
	text-align: center;
}

.ecoli-bacteria .bottom .fr
{
	text-align: center;
	width: 30%;
	float: right;
}

#bacteria-mobile h3, #bacteria-mobile h4, #bacteria-mobile p { text-align: center; }

#bacteria-mobile
{
	width: 100%;
	text-align: center;
	display:none;
}

#bacteria-mobile .top
{
	width: 67%;
	height: 1px;
	margin: 0 auto;
	background: url('../images/before.jpg') no-repeat center center scroll;
	background-size: contain;
}

#bacteria-mobile .bottom
{
	width: 67%;
	height: 1px;
	margin: 0 auto;
}

#bacteria-mobile .bottom a
{
	width: 33%;
	float: left;
}

#bacteria-mobile .yellow
{
	background: url('../images/chlorine-selected.jpg') no-repeat center center scroll;
	background-size: contain;
}

#bacteria-mobile .orange
{
	background: url('../images/ozone-selected.jpg') no-repeat center center scroll;
	background-size: contain;
}

#bacteria-mobile .blue
{
	background: url('../images/unipolar-selected.jpg') no-repeat center center scroll;
	background-size: contain;
}

.techbology-membrane
{
	background: #57abdf;
	clear: both;
	padding: 50px 0 100px 0!important;
	position: relative;
}

/* TANK */
#functioning
{
	position: relative;
	background: url('../images/functioning.png') no-repeat center 101px scroll #e2e2e2;
	height: 554px;
}

#functioning.not-ready { background-image: none; }

#tankoverlay .left
{
	left: 445px;
	position: absolute;
	top: 185px;
	width: 380px;
}

#tankoverlay .right
{
	position: absolute;
	right: 445px;
	top: 259px;
	width: 380px;
}

#dirty
{
	width: 100%;
	height: 554px;
	background: url('../images/dirty.png') no-repeat -1920px bottom scroll;
	position: relative;
}

#greytank
{
	position: absolute;
	right: 0;
	bottom: 0;
	height: 300px;
	width: 100px;
	background-color: #e2e2e2;
	z-index: 10;
}

#tankoverlay
{
	width: 100%;
	height: 554px;
	background: url('../images/process-overlay.png') no-repeat center center scroll;
	position: relative;
	z-index: 20;
}

#bubbles, #bubbles-large, #bubbles-far
{
	width: 100%;
	height: 429px;
	position: absolute;
	top: 101px;
	z-index: 50;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}

#bubbles { background: url('../images/bubbles-small.png') repeat-y center center scroll; }
#bubbles-large { background: url('../images/bubbles-large.png') repeat-y center center scroll; }
#bubbles-far { background: url('../images/bubbles-far.png') repeat-y center center scroll; }
#mobtank { width: 100%; }
#mobtank img { width: 100%; }
#mob-stats { padding-top: 10px; display:none;}

#mob-stats h2
{
	line-height: 1.4em;
	font-weight: 300;
}

#mob-stats h2 span
{
	font-size: 1.62em;
	font-weight: 700;
}

.heading-center
{
	text-align: center;
	padding: 0 92px;
	margin-bottom: 30px;
}

#custom-solutions { padding: 0 220px; }
#superior-performance { padding-right: 100px; }

.heading-center h2
{
	color: #2c5c91;
	font-weight: 500;
	margin: 0 0 7px 0;
	font-size: 30px;
}

.heading-center h3
{
	font-weight: 300;
	margin: 0;
	font-size: 20px;
}

.performance-list
{
	width: 92%;
	margin: 0 auto;
}

.performance-list .pl-item
{
	clear: both;
	float: left;
	width: 100%;
	color: #4985b9;
	margin-bottom: 40px;
}

.performance-list .pl-item .pl-icon
{
	float: left;
	width: 17%;
}

.performance-list .pl-item .pl-info
{
	float: right;
	width: 76%;
}

.performance-list .pl-item .pl-info h3 { margin-top: 0; }

#microscrope-caption
{
	padding: 30px 15% 10px;
	line-height: 1.2;
}

/* Narrower */
.percentage-stats,
.swd-feature,
.cr-feature,
.cs-feature,
.desalination-solution
{
	width: 80%;
	margin: 0 auto;
}

#swd-feature { width: 95%; }
#swd-feature img { width: 85%; }

#swd-feature .swd-desc
{
	width: 67%;
	position: relative;
	top: 40px;
}

#advance-disinfections-mobile {
	display:none;
	}


/* Applications
-------------------------------------------------------------- */

/* Wide Spread Application */
.widespread-application .wrap p { width: 68%; }

.widespread-application .number
{
	margin: 0;
	padding: 0;
	float: left;
	width: 69%;
}

.widespread-application .number li
{
	margin-bottom: 15px;
	/*list-style: none;*/
	padding-left: 32px;
	left: 20px;
	position: relative;
}

.wa-feature-image
{
	float: right;
	width: 28%;
	padding-top: 20px;
	margin-top: -10px;
	position: relative;
	top: -168px;
}

.number .one { background: transparent url(../images/number_one.png) no-repeat left .2em; }
.number .two { background: transparent url(../images/number_two.png) no-repeat left .2em; }
.number .three { background: transparent url(../images/number_three.png) no-repeat left .2em; }
.number .four { background: transparent url(../images/number_four.png) no-repeat left .2em; }
.number .five { background: transparent url(../images/number_five.png) no-repeat left .2em; }
.number .six { background: transparent url(../images/number_six.png) no-repeat left .2em; }
.swd-feature,
.clients-list { margin: 0 auto; }

.swd-img
{
	float: left;
	width: 30%;
}

.swd-desc
{
	float: right;
	width: 60%;
}

/* Client */
.clients-list
{
	margin: 0 auto;
	position: relative;
	clear: both;
	padding-top: 50px;
	margin-top: 50px;
}

.clients-list .intro
{
	text-align: center;
	width: 70%;
	margin: 0 auto 50px auto;
}

.clients-list
{
	clear: both;
	background: url(../images/dotted_divider.png) repeat-x top;
}

.client
{
	float: left;
	width: 48.5%;
	position: relative;
	margin-right: 3%;
	margin-bottom: 2em;
	text-align: center;
}

.client .c-logo { width: 60%; }
.client p strong { display: block; }

img.preloader
{
	width: 1px !important;
	height: 1px !important;
}

/* washing-evaluation */
.washing-evaluation
{
	padding: 50px 0;
	float: left;
	width: 100%;
}

.washing-evaluation .washing-evaluation-icons
{
	margin: 50px auto 60px auto;
	padding: 0;
	width: 80%;
}

.washing-evaluation .washing-evaluation-icons li
{
	list-style: none;
	float: left;
	width: 14%;
	margin-right: 3%;
}

.washing-evaluation .washing-evaluation-icons li:last-child { margin-right: 0!important; }

.percentage-stats .ps-desc
{
	float: left;
	width: 60%;
}

.percentage-stats .ps-percent-animation { float: right; }

/* Carwash Recycling */
.carwash-recycling .cr-feature .cr-img
{
	float: left;
	width: 30%;
}

.carwash-recycling .cr-feature .cr-desc
{
	float: right;
	width: 60%;
}

/* Desalination */
.animate-electrical
{
	margin-top: 40px;
	display: block;
}

.animate-salt
{
	margin-top: 40px;
	display: block;
}

#cs-feature { width: 89%; }
#cs-feature .cs-img { width: 28%; }

#cs-feature .cs-desc
{
	width: 65%;
	margin-top: 25px;
}

.cs-feature .cs-img
{
	float: left;
	width: 30%;
}

.cs-feature .cs-desc
{
	float: right;
	width: 60%;
	margin-top: 45px;
}

/* Contact */
.map-contact-info
{
	float: left;
	width: 100%;
	padding: 50px 0;
	color: #4985b9;
}

.map-contact-info .location-map
{
	float: left;
	width: 55%;
}

.map-contact-info .contact-info
{
	width: 35%;
	float: right;
}

.map-contact-info .contact-info .contact-box { margin-bottom: 40px; }
.map-contact-info .contact-info .contact-box:last-child { margin-bottom: 0; }

.map-contact-info .contact-info ul
{
	padding: 0;
	margin: 0;
	list-style: none;
}

.map-contact-info .contact-info ul li strong
{
	float: left;
	/*width: 20%;*/
	width: 70px;
}

.map-contact-info .contact-info address { font-style: normal; }

/* Contact form */
#faq-more-arrow
{
	display: inline-block;
	font-size: 16px;
	line-height: 20px;
	height: 20px;
}

input.form-error,
textarea.form-error
{
border:2px solid red !important;
-moz-transition: all 0.25s ease-out;
-webkit-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.contact-form h2
{
	margin-bottom: 0;
	font-weight: 300;
	font-size: 30px;
}

#unipolar-form input[type="text"],
#unipolar-form input[type="email"],
#unipolar-form textarea,
#unipolar-form select
{
	padding: 10px 8px;
	border: none;
	background: #e8f8ff;
	width: 100%;
	color: #4985b9;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 200;
}

#unipolar-form select
{
	-webkit-appearance: none;
	-moz-appearance: none;
	border-radius: 0;
	background-image: url(../images/select-bg.png);
	background-position: 98% 50%;
	background-repeat: no-repeat;
}

#unipolar-form fieldset
{
	border: none;
	padding: 0;
	margin: 0;
}

#unipolar-form fieldset { margin-bottom: 20px; }

#unipolar-form fieldset label
{
	display: block;
	margin-top: 15px;
}

.form-intro-text
{
	float: left;
	width: 45%;
}

.faq-link
{
	float: right;
	width: 45%;
}

#unipolar-form br { margin-bottom: 30px; }

#unipolar-form .fs-top
{
	float: left;
	width: 45%;
}

#unipolar-form .fs-middle
{
	float: right;
	width: 45%;
	position: relative;
	top: 0px;
}

#unipolar-form .fs-bottom
{
	clear: both;
	width: 100%;
}

#unipolar-form .fs-actions
{
	float: right;
	position: relative;
	width: 410px;
}

#unipolar-form .fs-actions input[type="radio"]
{
	margin-right: 10px;
	display: inline-block;
}

#unipolar-form .fs-actions label
{
	display: inline-block;
	margin: 10px 20px 0 0;
	cursor: pointer;
}

#unipolar-form #btn-submit
{
	background: transparent;
	color: #fff!important;
	font-size: 20px;
	border: 2px solid #fffefe;
	border-radius: 4px;
	padding: 10px 25px;
	/*width: 50%;*/
	text-align: center;
	float: right;
	font-weight: 300;
	display: block;
	position: absolute;
	top: 0px;
	right: 0px;
}

@-moz-document url-prefix() {
    #unipolar-form #btn-submit {
    	top:10px;
    }
}

/* FAQs */
.questions-list
{
	margin: 0;
	padding: 0;
	list-style: none;
}

.questions-list li { margin-bottom: 20px; }

.questions-list li a
{
	font-size: 120%;
	color: #fff!important;
	background: url(../images/circle_arrow2.png) no-repeat left 50%;
	padding-left: 30px;
	font-weight: 700;
}

.questions-list li a:hover { text-decoration: underline; }

.answer
{
	float: left;
	width: 100%;
	/*padding: 0px 0 30px 0;*/
	padding-bottom: 30px;
	margin-bottom: 10px;
	clear: both;
	background: url(../images/dotted_divider.png) bottom left repeat-x;
}

.answer:last-child { background: none!important; }

.answer h2
{
	font-weight: 300;
	font-size: 30px;
}

.answer .return-top
{
	background: url(../images/circle_arrow_up_blue.png) no-repeat left 50%;
	padding-left: 30px;
}

#donut
{
	width: 294px;
	height: 294px;
	position: relative;
}

#donut .upper {
	top: 2px;
	left: 2px;
	position: absolute;
	z-index: 100;
	width: 290px;
	height: 290px;
	border-radius: 145px;
	background: url('../images/donut-upper.png') no-repeat center center scroll;
}

#pie {
	top: 0;
	left: 0;
	position: absolute;
	z-index: 50;
	width: 294px !important;
	height: 294px !important;
}

#donut .lower {
	top: 5px;
	left: 5px;
	position: absolute;
	z-index: 10;
	width: 284px;
	height: 284px;
	background-color: #55d422;
	border-radius: 145px;
}

#trigger {
	position: absolute;
	z-index: 5;
	top: 50%;
	left: 50%;
	height: 1px;
	width: 1px;
}

/* Media */
.post header {
	clear: both;
	float: left;
	width: 100%;
}

.post header h2 {
	font-weight: 500!important;
	/*float: left;*/
	display: inline-block;
	margin-right: 10px;
}

.post header .date {
	margin-top: 40px;
	display: inline-block;
}

/* Swipe Slider */
.swipe {
	overflow: hidden;
	visibility: hidden;
	position: relative;
	width: 80%;
	margin: 40px auto 0 auto;
}

.swipe-wrap {
	overflow: hidden;
	position: relative;
}

.swipe-wrap > div {
	float: left;
	width: 100%;
	position: relative;
}

.swipe-wrap > div .reference {
	border-bottom: dotted 2px #9acdec;
	padding-bottom: 10px;
}

.swipe-wrap > div .reference .dated { font-weight: 300; }
.swipe-wrap > div .reference-page { border-bottom: dotted 2px #9acdec; }

.swipe-wrap > div .reference-page span {
	float: right;
	display: inline-block;
	background: #57abdf;
	margin-top: -12px;
	padding-left: 20px;
}

.nav-direction {
	top: 60px;
	right: 100px;
	position: absolute;
	width: 100%;
}

.swipe-container {
	float: left;
	width: 100%;
	position: relative;
}

/*.swipe-container .nav-direction .prev,*/
.swipe-container .nav-direction .next {
	width: 33px;
	height: 33px;
	position: absolute;
	display: block;
	text-indent: -999999px;
	z-index: 9999;
}

/*.swipe-container .nav-direction .prev {
  background: url(../images/slide_prev.png) no-repeat;
  left: 0;
}*/

.swipe-container .nav-direction .next {
	background: url(../images/slide_next.png) no-repeat;
	right: 0;
}

/* Footer
-------------------------------------------------------------- */

#footer {
	clear: both;
	background: #374a60;
	padding: 40px 0 20px 0;
	color: #5f748d;
}

#footer h4 {
	font-size: 16px;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
	color: #798ea7;
	margin-bottom: 10px;
	letter-spacing: 1px;
}

#footer ul { line-height: 1.4; }
#footer ul li { margin-bottom: 10px; }

#footer .company-links,
#footer .applications-links,
#footer .technology-links {
	width: 22.5%;
	float: left;
}

#footer .company-links { margin-right: 2%; }
#footer .applications-links { margin-right: 5%; }
#footer .technology-links { margin-right: 3%; }

#footer .client-logo {
	float: right!important;
	width: 13%;
	text-align: right;
}

#footer .client-logo h4 { text-align: left; }
#footer .client-logo img { width: 100%; }

#footer .last {
	clear: right;
	margin-right: 0;
}

#footer .footer-links ul {
	margin: 0;
	padding-left: 0;
}

#footer .footer-links ul li a { color: #5f748d; }
#footer .footer-links ul li a:hover { color: #89a1c0; }

#footer .copyright {
	padding-top: 10px;
	clear: both;
	text-align: center;
}

#footer .copyright a { color: #788ea7; }
#footer .copyright a:hover { color: #89a1c0; }

/* Class Helpers
-------------------------------------------------------------- */

.cf:before, .cf:after {
	content: "";
	display: table;
}

.cf:after { clear: both; }
.cf { zoom: 1; }

/* For IE 6/7 (trigger hasLayout) */
.clear { clear: both; }
.fl { float: left; }
.fr { float: right; }
.aligncenter { text-align: center; }
.alignleft { text-align: left; }
.alignright { text-align: right; }

.bg-blue,
.bg-white {
	padding: 50px 0;
	float: left;
	width: 100%;
}

.bg-blue {
	background: #57abdf;
	color: #fff;
}

.bg-blue h2 { color: #fff; }

.bg-white {
	background: #fff;
	color: #166cb6;
}

.more {
	background: #2c5c91;
	color: #fff!important;
	border-radius: 4px;
	padding: 4px 10px;
}

.more:hover {
	background: #265183;
	color: #fff!important;
}

/* Responsive Resets
-------------------------------------------------------------- */

@-o-viewport {
  width: device-width;
}

@-ms-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}

html { overflow-y: auto; }

*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

img,
audio,
video,
canvas { max-width: 100%; }

video {
	width: 100%!important;
	height: auto!important;
}

/* Mobile Menu Button */
.mobile-menu-button {
	float: right;
	display: none;
	background: url(../images/mobile_menu.png) no-repeat;
	width: 36px;
	height: 26px;
	text-indent: -9999999px;
	margin-top: 15px;
}

.mobile-menu-nav2 { display: none; }

/* Media Queries
-------------------------------------------------------------- */

@media screen and (max-width: 1100px) {

	div.ecoli-bacteria {
		-webkit-transform:scale(.8,.8);
	}
}

@media screen and (max-width: 1010px) {

	.wrap { padding: 0 20px; }

	#main-nav ul { padding-left: 0; }
	
	#main-nav ul li	{
		display: inline;
		font-size: 20px;
		margin-left: 30px;
	}
	
	#main-nav ul li:first-child {
		margin-left: 0px;
	}
	
	.main-sub-nav {
		position: relative;
		float: right;
		width: 80%;
		margin-top: 7px;
		top:8px;
	}
	
	.main-sub-nav ul {
		padding-left: 0;
		margin-left: 0;
	}
	
	.main-sub-nav ul li {
		display: inline-block;
		margin-left: 0px!important;
		padding-right: 4px!important;
	}
	
	.main-sub-nav ul li:last-child {
		padding-right: 0;
		background: none;
	}
	
	.main-sub-nav ul li a {
		color: #fff;
		font-size: 12px!important;
		padding: 3px 0 7px 0!important;
		background: none!important;
		opacity: .7;
	}

	#page-heading div.title.is-sticky {
		height: 90px;
		top:20px;
	}

	#page-heading div.title.is-sticky .wrap h1 {
		top:33px;
	}

	#page-heading div.title.is-sticky .wrap ul {
		top:20px;
	}
	
	
	#page-heading .title h1,
	#page-heading-contact .title h1 {
		font-weight: 300;
		color: #fff;
		font-size: 28px;
		margin: 0 0 30px 0;
	}
	

}

@media screen and (max-width: 959px) {

	div.ecoli-bacteria {
		-webkit-transform:scale(.6,.6);
		left:-100px;
	}

	.wrap { padding: 0 20px !important; }
	
	#main-nav ul li	{
		display: inline;
		font-size: 20px;
		margin-left: 17px;
	}
	
}

/* Tablet Portrait */

@media screen and (min-width: 825px) and (max-width: 959px) {



	#main-nav ul li.current a { background: none !important; }
	
	.main-sub-nav {
		float: right;
		width: 80%;
		margin-top: 7px;
	}
	
	.main-sub-nav ul {
		padding-left: 0;
		margin-left: 0;
	}
	
	.main-sub-nav ul li	{
		display: inline-block;
		margin-left: 0px!important;
		padding-right: 4px!important;
	}
	
	.main-sub-nav ul li:last-child {
		padding-right: 0;
		background: none;
	}
	
	.main-sub-nav ul li a
	{
		color: #fff;
		font-size: 12px!important;
		padding: 3px 0 7px 0!important;
		background: none!important;
		opacity: .7;
	}
	
	#page-heading .title h1,
	  #page-heading-contact .title h1
	{
		font-weight: 300;
		color: #fff;
		font-size: 28px;
		margin: 0 0 30px 0;
	}
	
	.is-sticky
	{
		position: relative !important;
		padding: 20px 0;
	}
	
	#hero .hero-content h1
	{
		font-size: 30px;
		margin-bottom: 0px;
		line-height: 1.2;
		font-weight: 500;
	}
	
	#hero .hero-content h2
	{
		margin: 0;
		font-weight: 300;
		font-size: 18px;
		margin-bottom: 20px;
	}
}

@media only screen and (max-width: 824px)
{

	#bargraph {
		display: none;
	}

	#mob-stats {
		display:block;
	}

	#donut {
		margin: auto;
	}

	.wrap #custom-solutions {
		padding: 0 0px;
	}

	#superior-performance {
	padding-right: 0px;
	}
	
	.pl-icon {
		text-align: center;
	}

	.ecoli-bacteria {
		display: none;
	}
	
	#bacteria-mobile {
		display: block;
	}
	
	.mobile-menu-button
	{
		display: block;
		margin-top: 10px;
	}
	
	#main-nav ul { display: none; }
	#logo { width: 40%; }
	
	.mobile-menu-nav2
	{
		position: relative;
		display: block;
		background: #56abdf;
		float: left;
		width: 100%;
	}
	
	.mobile-menu-nav2 ul li.current a { background: none; }
	
	.mobile-menu-nav2 ul
	{
		padding: 0;
		margin: 0;
	}
	
	.mobile-menu-nav2 ul li
	{
		list-style: none;
		padding: 0;
		margin: 0;
	}
	
	.mobile-menu-nav2 ul li a
	{
		color: #fff;
		padding: 7px 20px 7px 20px;
		display: block;
		width: 100%;
	}
	
	.mobile-menu-nav2 ul li ul li a { padding-left: 30px; }
	.mobile-menu-nav2 ul li a:hover,
	  .mobile-menu-nav2 ul li.current a { background: #3083b5; }
	.mobile-menu-nav2 ul li.current ul li a { background: transparent; }
	.main-sub-nav { display: none; }
	
	.is-sticky
	{
		position: relative!important;
		background: transparent;
	}
	
	#hero .hero-content
	{
		float: right;
		width: 55%;
		padding: 10px 0;
		color: #2c5c91;
	}
	
	#hero .hero-content h1
	{
		font-size: 30px;
		margin-bottom: 0px;
		line-height: 1.2;
		font-weight: 500;
	}
	
	#hero .hero-content h2
	{
		margin: 0;
		font-weight: 300;
		font-size: 18px;
		margin-bottom: 20px;
	}
	
	#hero .hero-content .call-to-action a
	{
		background: #57abdf;
		color: #fff;
		border-radius: 4px;
		padding: 7px 20px;
		max-width: 386px;
		float: left;
		margin-right: 20px;
		margin-bottom: 10px;
		border: 1px solid #57abdf;
		font-weight: 500;
	}
	
	.one-half, .one-third, .two-third, .three-fourth, .one-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth, .one-sixth, .five-sixth
	{
		position: relative;
		margin-right: 0;
		float: none!important;
		clear: both;
		margin-bottom: 2em;
		width: 100%;
	}
	
	.home-features .one-third { border: none!important; }
	.home-features .one-third img { width: 60%; }
	#footer .client-logo img { width: 40%; }
	
	.clients-list .intro,
	  .percentage-stats,
	  .swd-feature,
	  .cr-feature,
	  .cs-feature,
	  .desalination-solution,
	  .home-features .one-third,
	  .call-to-action-box .call-to-action-message,
	  .call-to-action-box .call-to-action-button,
	  .call-to-action-box .call-to-action-button a,
	  #footer .company-links,
	  #footer .applications-links,
	  #footer .technology-links,
	  #footer .client-logo,
	  .our-company .company-logo,
	  .staff-mage,
	  .staff-right,
	  .technology-feature-image,
	  .performance-list,
	  .performance-list .pl-item .pl-icon,
	  .performance-list .pl-item .pl-info,
	  .wa-feature-image,
	  .widespread-application .number,
	  .swd-img,
	  .swd-desc,
	  .client,
	  .swipe,
	  .percentage-stats .ps-desc,
	  .percentage-stats .ps-percent-animation,
	  .carwash-recycling .cr-feature .cr-img,
	  .carwash-recycling .cr-feature .cr-desc,
	  #cs-feature .cs-img,
	  #cs-feature .cs-desc,
	  .map-contact-info .location-map,
	  .map-contact-info .contact-info,
	  #unipolar-form .fs-top,
	  #unipolar-form .fs-middle,
	  #unipolar-form .fs-bottom,
	  .form-intro-text,
	  .widespread-application .wrap p,
	  .faq-link
	{
		width: 100%;
		float: none!important;
	}
	
	.nav-direction { right: 0px; }
	.home-features .one-third,
	  .call-to-action-box .call-to-action-message,
	  .call-to-action-box .call-to-action-button,
	  .call-to-action-box .call-to-action-button a,
	  #footer .company-links,
	  #footer .applications-links,
	  #footer .technology-links,
	  #footer .client-logo,
	  #footer .client-logo h4 { text-align: center; }
	#footer .company-links,
	  #footer .applications-links,
	  #footer .technology-links,
	  #footer .client-logo { margin-bottom: 30px; }
	
	.our-company .company-logo,
	  .staff-mage
	{
		margin-left: 0;
		margin-right: 0;
		width: 70%;
	}
	
	.technology-feature-image,
	  .wa-feature-image,
	  .percentage-stats .ps-percent-animation,
	  .carwash-recycling .cr-feature .cr-img,
	  .cs-feature .cs-img
	{
		width: 70%;
		margin-top: 0;
		margin-left: 0;
	}
	
	.wa-feature-image
	{
		top: 0;
		margin: auto;
	}
	
	.client
	{
		margin-right: 0;
		margin-bottom: 2em;
		text-align: center;
	}
	
	.client .c-logo { width: 60%; }
	.map-contact-info .contact-info { margin-bottom: 30px; }

	#main-waypoint {
		position: fixed;
		top:1000px;
	}
	

}

@media screen and (max-width: 480px )
{


	#bargraph {
		display:none;
	}

	#mob-stats {
		display:block;
	}

	
	#logo { width: 60%; }
	
	#hero .hero-content
	{
		float: none!important;
		width: 100%;
		padding: 10px 0;
		color: #2c5c91;
		text-align: center;
	}
	
	#hero .hero-content h1
	{
		font-size: 30px;
		margin-bottom: 0px;
		line-height: 1.2;
		font-weight: 500;
	}
	
	#hero .hero-content h2
	{
		margin: 0;
		font-weight: 300;
		font-size: 18px;
		margin-bottom: 20px;
	}
	
	#hero .hero-content .call-to-action { text-align: center; }
	
	#hero .hero-content .call-to-action a
	{
		float: none!important;
		display: inline-block;
		margin-right: 20px;
		margin-bottom: 10px;
	}
	
	.home-features .one-third img { width: 100%; }
	.mobile-menu-button { margin-top: 10px; }
	
	.our-company .company-logo,
	  .staff-mage,
	  .technology-feature-image,
	  .wa-feature-image,
	  .percentage-stats .ps-percent-animation,
	  .carwash-recycling .cr-feature .cr-img,
	  .cs-feature .cs-img
	{
		position: relative;
		width: 100%;
	}
	
	.percentage-stats .ps-percent-animation { left: -15px; }
	.performance-list .pl-item .pl-icon { margin-bottom: 20px; }
	.performance-list .pl-item .pl-icon,
	  .performance-list .pl-item .pl-info { text-align: center; }
	.performance-list .pl-item .pl-info ul { text-align: left; }
	
	#unipolar-form #btn-submit
	{
		float: none !important;
		width: 100%;
		top: 50px;
	}
	
	.heading-center { padding: 0; }
	
	.heading-center h2
	{
		line-height: 1.2;
		padding-bottom: 30px;
	}
	
	#swd-feature .swd-desc { width: 100%; }
	
	#unipolar-form .fs-actions
	{
		width: 100%;
		position: relative;
		top: -20px;
	}
	
	#unipolar-form .fs-actions #btn-submit
	{
		position: relative;
		top: 20px;
	}
	
	.nav-direction { top: 0px; }
	
	#advance-disinfections {
		display:none;
	}
	
	#advance-disinfections-mobile {
		display:block;
	}
	
}

@media screen and ( max-width: 320px )
{
	
}

@media screen and ( max-width: 240px )
{
	
}