/* colors

navy blue: #005c6f
turquoise: #00a6aa
red orange: #f4642f
yellow orange: #feac1f
grey: #96989c
light grey: #bebebe
very light grey: #d8d8d8

headline: #005c6f
background: #fefaf1
button/link active: #009dcf
button/link: #27bbdd
body text: #45667b

*/


body {
	font-family:'open sans','helvetica neue',helvetica,arial,sans-serif;
	font-weight: 300;
	background:#fff;
	color:#005c6f;
	line-height: 1.5;
	text-rendering: optimizeLegibility;
	}

.wrapper {
	 background:#fff;
	 width:960px;
	 margin:0 auto;
	 padding:0;
	 box-shadow: 0px 0px 180px rgba(0,0,0,.3)
}

#navbutton {
	margin:5px;
	width:35px;
	position:absolute;
	top:0;
	right:0;
	height:31px;
	z-index:1001;
	display:none;
	position:fixed;
	background:#feac1f url('/site_media/images/nav_icon2.png') no-repeat 7px 7px;
	background-size:20px 17px;
	border-radius:4px;
	cursor:pointer;
}

#nav {
	display:inline;
	}

.fixedElement {
	display:block;
    background-color: #f4642f;
    position:fixed;
    top:0;
    width:100%;
    z-index:999;
	text-align:center;
	font-size:.7em;
	letter-spacing:2.5;
	padding:.25em 0;
	font-weight: 500;
	}

.fixedElement a {
	color:#fff;
	text-decoration:none;
	font-size:1.5em;
	text-transform:uppercase;
	padding-right:1.2em;
	}

.fixedElement a:last {
	padding-right:0;
	}
	
.fixedElement a:hover {
	color:#fff5c4;
}

.fixedElement a:active {
	color:#eee;
}

.fixedElement .header_sections{
	display:inline;
	}

.fixedElement .header_sections a {
	font-size:1em;
}

.section_content{
	position:relative;
}

h1 {
	margin:0;
	font-size:4.6em;
	padding-bottom:0
}

h2 {
	font-size:2.4em;
	margin-bottom:0;
	margin-top:1em;
	font-weight: 700;
	color: #f66421;
	}

h4 {
	font-size:1.2em;
	color: f66421;
	margin-top:0;
	padding-top:0;
	font-weight: 400;
}

.sxn {padding:30px 140px;}

h3 {
	margin-bottom:0;
	padding-bottom:0;
	}

.learn_more{
	font-size:2.1em;
	font-weight:400;
	margin:0;
	}

button {
	font-size:1.8em;
	height:90px;
	padding:0 80px;
	}
	
form{
	margin:0;
	padding:0;
}

#final_call{padding-top:0;}

.akakak{
	display:inline;
}

.top_pad {
	padding-top: 15px;
}



















/* CSS specific to home page */

.logos {
	width:140px;
}

p.toolstobuild{
	color:#005c6f;
	font-size:1.4em;
	font-weight:700;
	margin:0;
	padding-top:0;
}

p.cover_org{
	font-size:1.15em;
	line-height:1.5;
	font-weight:400;
	margin:0;
}
	
#solid h2 {
	margin-top:70px;
}

#powerful h2 {
	margin-top:55px;
}


#pricing h2 {
	margin-top:20px;
	color:#ffad00;
}

#clients h2 {
	margin-top: -10px;
}

#clients h4 {
	margin-top: 0;
}

#clients .sxn {
   padding-top: 0px;
}

#features h2 {
	margin-top:0;
}

#flexible h2, #flexible h4 {
	color:#ffad00;
}

#clients .section:first {
	margin-top:40px;
}

#features .col { 
		margin: 1% 6% 1% 0;
}

#features ul{
	padding-bottom:1em;
	list-style-image:  url('/site_media/images/bullet.png');
	margin-left:0; /*1.25em;*/
}

#features ul: last{
	padding-bottom:0x;
	list-style-image:  url('/site_media/images/bullet.png');
	margin-left:0; /*1.25em;*/
}


#features ul li{
	padding-bottom:.75em;
    list-style-position: outside;

}

#features h3 {
	font-size:1.1em;
	line-height:1.4;
	margin-bottom:.5em;
}

#section1{
	background:url('/site_media/images/pipe_01.png'); 
	background-size:960px;
	background-position:center bottom; 
	padding-top:80px;
	padding-bottom:45px;
}

#section1 .span_1_of_4{
	min-height:130px;
}

.circle_section{
	text-align:center;
    position: absolute;
    float:right;
	width:100%;
	}

#call_to_action{
	background:url('/site_media/images/pipe_04a.png') #005c6f;
	background-size:960px;
	background-position:center top;
	color:#fff;
	}

#call_to_action, #call_to_action2{
	text-align:center;
	font-size:1.1em;
	font-weight:700;
	min-height:140px;
	}

#call_to_action button{
	margin-top:30px;
	margin-bottom:30px;
	}

#call_to_action2 button{
	margin-top:30px;
	margin-bottom:30px;
	}

#call_to_action .learn_more{
	padding:.8em 0 0.7em;
	}

#call_to_action2 .learn_more{
	padding: 35px 0 17px;
}

#section2a{
	background:url('/site_media/images/pipe_05b1.png') #648f00; 
	background-size:960px;
	background-position:center top; 
	clear:both;
	height:17px;
	background-repeat: no-repeat;
}

#section2{
	background:url('/site_media/images/pipe_05b1.png') #648f00; 
	background-size:960px;
	background-position:center bottom; 
	margin:0;
	color: #fff;
	}

#section2 .span_1_of_3{
	width:22%;
}

#section2 .span_2_of_3 {
	width: 54%;
	}
	
#section2 p{	 
	 font-size:1.5em;
	font-family:'open sans','helvetica neue',helvetica,arial,sans-serif;
	 text-indent:-.3em;
	 margin-top:0;
}

#section2 p.attribution{	 
		padding-top:0;
		font-size:1.2em;
		margin-bottom:0;
}



#powerful {
	background:url('/site_media/images/pipe_05c.png') no-repeat #fff;
	background-size:960px;
	background-position:center top;
	padding-top:40px;
}

#powerful .circle{
	margin-top:0;
	background:url('/site_media/images/circle1.png') 697px 90px no-repeat;
	background-size: 160px 160px;
	position:absolute;
	display:inline;
	float:left;
	height:260px;
	}

#powerful p, #flexible p, #solid p{
	margin-top:0;
}

#powerflex {
	background:url('/site_media/images/pipe_05d.png') #fff;
	background-position:center bottom;
	background-size:960px;
	height:157px;
}

#flexible .circle{
 	margin-top:16px;
	background:url('/site_media/images/circle2.png') 68px 30px no-repeat;
	position:absolute;
	float:left;
	background-size:160px 160px;
	height:200px;
}

#solid .circle{
 	margin-top:16px;
	background:url('/site_media/images/circle3bx.png') 655px 120px no-repeat;
	background-size: 160px 160px;
	position:absolute;
	display:inline;
	float:left;
	height:420px;
}

#pricing .circle{
 	margin-top:16px;
	background:url('/site_media/images/circle4b.png') 607px 30px no-repeat;
	background-size: 160px 160px;
	position:absolute;
	display:inline;
	float:left;
	height:220px;
	color: #fff;
}

#flexible {
	background:url('/site_media/images/pipe_06.png') #677d8a;
	background-size:960px;
	background-position:center bottom;
	color: #fff;
}

#solid{
	background:url('/site_media/images/pipe_07.png') no-repeat  #fff;
	background-size:960px;
	background-position:center top; 
}


#solidpricing {
	background:url('/site_media/images/pipe_08a.png') #fff;
	background-size:960px;
	background-position:center top;
	height:144px;
}

#pricing {
	background:url('/site_media/images/pipe_10c.png') #648f00;
	background-size: 960px;
	background-position:center bottom;
	color: #fff;
}

#pricingfeatures-a {
	background:url('/site_media/images/pipe_10c1a.png') #648f00;
	background-size:960px;
	background-position:center top;
	height:18px;
}

#pricingfeatures-b{
	background:url('/site_media/images/pipe_13a0.png') #fff;
	background-size:960px;
	background-position:center top;
	height:47px;
}

#features {
	background:url('/site_media/images/pipe_13a.png') #fff; 
	background-position:center top;
	background-size:960px;
}

#pricingclients {
	background:url('/site_media/images/pipe_13b3.png') #fff; /* #677d8a; */
	background-position:center top;
	background-size:960px;
	height:166px;
}

#clients {
	background:url('/site_media/images/pipe_12.png') #fff; /* #677d8a; */
	background-position:center top;
	background-size:960px;
}

#clientscall {
	background:url('/site_media/images/pipe_10d.png') #fff; /* #677d8a; */
	background-position:center bottom;
	background-size: 960px;
	background-repeat: no-repeat;
	height:80px;
}

#pricingcall {
	background:url('/site_media/images/pipe_10c2.png') #648f00;
	background-size:960px;
	background-position:center top;
	height:76px;
}

#call_to_action2{
	background:url('/site_media/images/pipe_11c.png') no-repeat #005c6f;
	background-size: 960px;
	background-position:center top;
	color:#fff;
	min-height:220px;
}


@media (max-width: 960px) {


#section2{
	margin:0;
	padding:10px 10% 30px;
	}

#section2 .span_2_of_3 {
	width: 100%;
	margin:0;
	padding:0;
	}
	
#section2 .span_1_of_3 {
	display:none;
}
	
#call_to_action{
	min-height:120px;
}

.logos {
	width:120px;
	max-width:95%;
}

.getsmall{font-size:0;}

.wrapper {
    width: 100%;
  }
  
.sxn{
	padding:30px 10%;
	
}

#powerful{
	padding-top:0;
}

#powerful .circle{
	background:url('/site_media/images/circle1alt.png') center 100px no-repeat;
	background-size: 960px 160px;
}
  
#flexible .circle{
	background:url('/site_media/images/circle2alt.png') center no-repeat;
	background-size: 960px 160px;
}

#solid .circle{
	background:url('/site_media/images/circle3alt2.png') center no-repeat;
	background-size: 960px 160px;
	}

#pricing .circle{
	background:url('/site_media/images/circle4alt3.png') center no-repeat;
	background-size: 960px 160px;
	}
  
button {
	font-size:1.6em;
	height:80px;
	padding:0 55px;
	font-weight: 600;
	}
}




/*  SECTIONS  ============================================================================= */

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  GROUPING  ============================================================================= */

.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP   ==================================================================== */

.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */

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

	 .fixedElement a {font-size:1em;}
	 .fixedElement .header_sections a {font-size:.8em;}

	 #section1,
	 #section2,
	 #section2a,
	 #call_to_action,
	 #call_to_action2,
	 #powerful,
	 #flexible,
	 #solid,
	 #pricing{
		 background-image:none;
	 }
	 
	 #section1a,
	 #section2a,
	 #flexsolid,
	 #powertop,
	 #powerflex,
	 #flexsolid1,
	 #solidpricing,
     #pricingfeatures-a,
     #pricingfeatures-b,
	 #pricingclients,
	 #pricingcall,
	 #clientscall{
		 display:none;
	 }
	 
	 #call_to_action{
		 padding-top:0;
	 }
	 
	#section2{
		padding-top:42px;
		padding-bottom:18px;
	}
	
	.circle_section{
		width:100%;
		height:130px;
		ext-align:center;
		display:block;
	}

	#solid h2, #powerful h2 {margin-top:0;}
	
	#powerful .circle{
		background:url('/site_media/images/circle1.png') 85% 54px  no-repeat;
		background-size: 120px 120px;
		height:200px;
	}
	
	#flexible .circle{
		background:url('/site_media/images/circle2.png')  15% 38px  no-repeat;
		background-size: 120px 120px;
		height:200px;
	}
	
	#solid .circle{
		background:url('/site_media/images/circle3bx.png') 85% 28px  no-repeat;
		background-size: 120px 120px;
		height:200px;
	}
	
	#pricing .circle{
		background:url('/site_media/images/circle4a.png') 85% 42px  no-repeat;
		background-size: 120px 120px;
		height:200px;
	}
}



/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 568 PIXELS */

@media only screen and (max-width: 568px) {
	#clients .sxn {
	   padding-top: 30px;
	}
	
	.fixedElement a {font-size:1.2em;}
	
	.fixedElement .header_sections a {font-size:1em;}
	
	.akakak {display: block; }
	
	#navbutton {
		display:block;
	}
	
	#nav {display:none;}
	
	#section1 {
		padding-top:40px;
	}
	
	#section1 .span_1_of_4{
		width:100%;
		text-align:center;
	}
	
	.logos {width:40%;margin-top:10px;}
	
	.circle_section{
		width:100%;
		height:130px;
		ext-align:center;
		display:block;
		}
	
	#powerful .circle{
		margin-top:6px;
		background:url('/site_media/images/circle1.png') center no-repeat;
		background-size:120px 120px;
		position:relative;
		display:block;
		height:130px;
		margin-top:16px;
	}
	
	#flexible .circle{
		background:url('/site_media/images/circle2.png') center 0 no-repeat;
		background-size:120px 120px;
		position:relative;
		display:block;
		height:130px;
	}
	
	#solid .circle{
		background:url('/site_media/images/circle3bx.png') center no-repeat;
		background-size: 120px 120px;
		position:relative;
		display:block;
		height:130px;
	}
	
	#pricing .circle{
		background:url('/site_media/images/circle4a.png') center no-repeat;
		background-size: 120px 120px;
		position:relative;
		display:block;
		height:130px;
	}
	
	#section1 h1{ text-align:center; }
	
	p.toolstobuild{ text-align:center; }
		
	h1{	font-size:3.6em;}
	
	p.toolstobuild{
		font-size:1.2em;
	}
	
	.fixedElement{
		margin:0;padding:0;
	}
	
	.fixedElement a{
		display:block;
		font-size:1.6em;
		font-weight:700;
		line-height:1.6em;
		border-top:1px solid #fff;
		PADDING-TOP:.5em;
		padding-bottom:.5em;
		padding-right:0;
	}
	
	.fixedElement .akakak a{
		border-top:none;
	}
	
	h2{
		padding:0;
		margin:0;
		text-align:center;
	}
	
	h4{
		margin-bottom:22px;
		text-align:center;
		}
	
	.learn_more{
		font-size:1.5em;
		margin-bottom:10px;
	}
	
	button {
		font-size:1.4em;
		height:62px;
		padding:0 50px;
		}

	.col { 
		margin: 1% 0 1% 0%;
	}

	#section2 {
		padding-top:32px;
		padding-bottom:18px;
	}
	
	#section2 p{
		font-size:1.2em;
		margin-top: 7px;
	}
	
	#section2 p.attribution{
		font-size:1em;
	}
#section2 .span_1_of_3{
	width:100%;
}

#section2 .span_2_of_3 {
	width: 100%;
	}

}



.client_logo {
	opacity: 0.9;
	max-height:70px;
	max-width:90%;
	margin: 3px 0;
}

.span_1_of_2 {
	width: 42.5%;}

.span_2_of_2 {
	width: 51.8%;}

@media only screen and (max-width: 568px) {
	.span_1_of_2 {
		width: 100%; 
	}
	.span_2_of_2 {
		width: 100%; 
	}
}


/*  GRID OF THREE   ============================================================================= */
	
.span_3_of_3 {
	width: 100%; 
}

.span_2_of_3 {
	width: 66.13%; 
}

.span_1_of_3 {
	width: 32.26%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
/*  actually for this, 568 PIXELS */

@media only screen and (max-width: 568px) {
	.span_3_of_3 {
		width: 100%; 
	}
	.span_2_of_3 {
		width: 100%; 
	}
	.span_1_of_3 {
		width: 100%;
	}
}



/*  GRID OF FOUR   ============================================================================= */

.span_4_of_4 {
	width: 100%; 
}

.span_3_of_4 {
	width: 74.6%; 
}

.span_2_of_4 {
	width: 49.2%; 
}

.span_1_of_4 {
	width: 23.8%; 
	text-align: center;
}

#clients .span_1_of_4 {
	min-height:56px; /*added for Clients section specifically*/
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 600px) {
	.span_4_of_4 {
		width: 100%; 
	}
	.span_3_of_4 {
		width: 100%; 
	}
	.span_2_of_4 {
		width: 100%; 
	}
	.span_1_of_4 {
		width: 100%; 
  		text-align: center;
  	}
}

@media only screen and (min-width: 641px) {
	#nav{
		display:inline;
		visibility:show;
		}
}


/*  GRID OF FIVE   ============================================================================= */

.span_5_of_5 {
	width: 100%;
}

.span_4_of_5 {
  	width: 79.68%; 
}

.span_3_of_5 {
  	width: 59.36%; 
}

.span_2_of_5 {
  	width: 39.04%;
}

.span_1_of_5 {
  	width: 18.72%;
  	text-align: center;
  	vertical-align: middle;
}

#clients .span_1_of_5 {
	min-height:56px; /*added for Clients section specifically*/
}

/*  GO FULL WIDTH AT LESS THAN 600 PIXELS */

@media only screen and (max-width: 600px) {
	.client_logo {
		margin: 12px 20px;
	}
	.span_5_of_5 {
		width: 100%; 
	}
	.span_4_of_5 {
		width: 100%; 
	}
	.span_3_of_5 {
		width: 100%; 
	}
	.span_2_of_5 {
		width: 100%; 
	}
	.span_1_of_5 {
		width: 100%;
	}
}

/*  GRID OF SIX   ============================================================================= */

.span_1_of_6 {
    width: 15.33%;
	text-align:center;
}

.span_1_of_6 .client_logo{
    max-width: 96%;
}

@media only screen and (max-width: 600px) {
	.span_1_of_6 {
		width: 100%; 
	}
}

/*  GRID OF SEVEN   ============================================================================= */

.span_1_of_7 {
    width: 12.91%;
	text-align:center;
}

.span_1_of_7 .client_logo{
    max-width: 96%;
    max-height: 60px;
}

@media only screen and (max-width: 600px) {
	.span_1_of_7 {
		width: 100%; 
	}
}

/*  GRID OF EIGHT   ============================================================================= */

.span_1_of_8 {
    width: 11.1%;
	text-align:center;
}

.span_1_of_8 .client_logo{
    max-width: 96%;
    max-height: 52px;
}

@media only screen and (max-width: 600px) {
	.span_1_of_8 {
		width: 100%; 
	}
}

button { font-family: 'open sans'; font-weight: 700; }

.bg {
  background: #e5eef0 url('/site_media/images/bg000.png') repeat;
  position: fixed;
  width: 100%;
  height: 300%;
  top:0;
  left:0;
  z-index: -2;
  opacity: .1;
  background-size: 1600px;
}

.bg2 {
  background: url('/site_media/images/bg000.png') repeat;
  position: fixed;
  width: 100%;
  height: 300%;
  top:0;
  left:0;
  z-index: -1;
  opacity: .075;
  background-size:640px;
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}