@charset "utf-8";
@import url("/Blue/Templates/page3H.dwt.css");
/* CSS Document */

/* 	burgandy 	#660033
	light gray 	#ccc
	light blue 	#85a5cc
	medium blue #4a6491
	dark blue 	#0E1E45	152342
*/

/*
navy rgb(26,31,43)
dark blue rgb(48,57,92) #2f3a5c
gray blue rgb(74,100,145) #4a6491
med gray blue rgb(133,165,204)
lt gray blue rgb(208,228,242)
*/
/* CSS RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
} 

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
/*Text */
h1 {font-size: 2.2em; font-weight: 700; margin: 0 2.2em 0 0;}
h2 {font-size: 1.6em; font-weight: 700; margin: 0 1.6em 0 0;}
h3 {font-size: 1.3em; font-weight: 600; margin: 0 1em 0 0;}
h4 {font-size:   1em; font-weight: 400; margin: 0 1em 0 0;}
h5 {font-size: .75em; font-weight: 400; margin: 0 1.2em 0 0;}
h6 {font-size:  .5em; font-weight: 400; margin: 0 1.2em 0 0;}
p  {line-height: 1.188em; margin-bottom: 1.625em;}
a  {color:rgb(48,57,92); text-decoration:none;}
a:visited {color:rgb(26,31,43); text-decoration:none;}
a:hover {color:#470000; text-decoration:underline; font-weight:700;}

 
/* ---------------------- */
body {
	background-color: rgb(133,165,204);
	background-image:url(../images/tiled-background3.jpg);
	font-family: "petala-pro",sans-serif;
	color:rgb(48,57,92);
	font-size:16px;
	}
#pagewrap {
	background-color:#FFF;
	height:auto;
	box-shadow: -5px 5px 5px rgb(26,31,43);
	border-right: 1px solid rgb(26,31,43);
}
header {
	/*max-height: 8em;*/
	width:auto;
	padding-top: 1.5em;
	margin: 0 auto;
	background-color: #FFF;
}
#logo {
	width: 95%;
	margin: 0 auto;
}

#logo img {
	max-width: 90%;
	margin: 0 0 0 10%;}

/* Navigation */
#primarynav {
	color:#470000;
	margin: 0 10em 0 0;
	padding-top: 2em;
	float:right;
	font-size:.75em;
}

ul {
	display: block;
	}
#primarynav ul li {position:abosolute;}
#primarynav li{
	display:inline;
	text-decoration: none;
	margin-right: 1em;
	padding: .35em;
	}
#primarynav li a {
	text-decoration:none;
	color: #470000;
	}
	
#primarynav li a:hover{
	text-decoration:none;
	color: #2f3a5c;
	}
	


	/* ____________________________________________ */
#business p, #recap p {font-size: 1em; margin: 3em auto; line-height: 1.5em;}
	
#recap p {padding: 0 3em;}

#business h4 {font-weight:800; line-height: 2.5em;}

/*Page */
#primary {
	background-image:url(../texture.png);
	width: auto;
	height: auto;
	min-height: 15.625em;
	padding: 4.25em 5em 2em 4.5em;
}	

#primaryft {
	background-image:url(../images/workingwoman1920.jpg);
	background-size:100%;
	background-repeat:no-repeat;
	background-color: #CCC;
	width: auto;
	height: 100%;
	min-height: 600px;
	margin-top: -6.5em;
	padding-top: 2em;
}

#primecontent {padding: 5.5em 5% 0 25em;}
#primecontent p {font-size: 100%; line-height: 1.3em;}

#primaryft ul {padding: 7.1em 0 0 3em;}

/* Small Business */
#primarysb {
	background-image:url(../images/twoworking1920A.jpg);
	background-size:100%;
	background-repeat:no-repeat;
	background-color: #CCC;
	width: auto;
	height: 100%;
	min-height: 650px;
	margin-top: -4.5em;
	padding-top: 2em;
}
/*adjust long page title */
#primarysb #bullettitle h1 {margin:5% 0 0 30%;}
/*double list to the right */
/*#primarysb ul {
	-webkit-column-count:2;
		-moz-column-count:2;
			column-count:2;
	margin-left: 40%;
	padding-top: 3em;
}*/
/*list to the left */
#primarysb div, #primarynp div {padding-top: 8em; width:auto; height: 100%;}
#primarysb ul, #primarynp ul {
	margin-left: 5em;
	padding-bottom: 1.5em;
}


#primarysb ul li, #primarynp ul li, #primarysu ul li, #primaryft ul li {
	font-size: 1.15em;
	line-height: 1.5em;}


/* NonProfit */
#primarynp {
	background-image:url(../images/workingmanA.jpg);
	background-size:100%;
	background-repeat:no-repeat;
	background-color: #CCC;
	width: auto;
	height: 100%;
	min-height: 600px;
	margin-top: -6em;
	padding-top: 6em;
}


/* Start Up */
#primarysu {width: 100%; height: 100%;}
.text {float: left; width: 48%; height: 100%; font-size: 1em;}
.graphic {float: left; width: 48%; height: auto;}
#imagetop, #imagemiddle, #imagebottom {
	width: 100%;
	height: 360px;
	margin-bottom: 2em;
}
#imagetop ul, #imagebottom ul {
	display:block;
	margin:7em 0 4em 5em;
}

#imagetop img, #imagemiddle img, #imagebottom img {
	width: 100%;
	max-width: 450px;
	height: 100%;
	max-height: 320px;
	float: left;
	margin-top: 2em;
} 

#imagemiddle {
	padding: 2.5em 0 2.5em 3em;
	background-image:url(../images/tiled-background4.jpg);
	color: #fff;
}


#imagemiddle ul {
	float:left;
	display:block;
	margin: 8em 0 4em 2em;
}

/* Contact Form */

#contactinfo {
	padding: 3em 3em 2em 5.5em;
	float:left;
	text-align: center;
	}
	
#contactinfo p {
	
	}
#fmcontact, #contactform {
	display: block;
	margin-left: 400px;
} 

input, textarea {
	width: 80%;
	height: 30px;
	border: 1px solid rgb(133,165,204);
	color: #660033;
	padding: 10px;
	margin-top: 3px;
	-moz-border-radius: 5px;
	  -webkit-border-radius: 5px;
		border-radius: 5px;
}

textarea {
	height: 250px;
	}
#send {
		background-color:#2f3a5c;
		width: 100px;
		height: auto;
		color: #ccc;
		float:right;
		margin:2em 20% 6em 0;
		box-shadow: 0 10px 25px rgba(0,0,0,0.6)
}
input:focus, textarea:focus {
	border: 1px solid #660033;
}


/* Services */
#services {
	clear:both;
	width: auto;
	height:auto;
	background-image:url(../images/texturegray.png);
	color: #470000;
	font-weight:bolder;
	padding:1em 1em .5em 2.5em;
	margin:0;
	}
#services ul {
	margin-left: 1em;}

.services li, #services li{
	display: block;
	font-size:.75em;
	line-height:1.5em;
	}
	
/* Footer */
footer {
	background-color: rgb(74,100,145);
	background-image:url(../images/tiled-background4.jpg);
	clear:both;
	height: 75px;
	width: auto;
	color: #FFF;
	/*padding-top: 1em;
	padding-right: 6em;*/
	border-top: /*2px solid rgb(26,31,43),*/ 4px solid #33001A;
}

footer p {
	margin: 1em auto;
	text-align:center;
	font-size:smaller;}
	
	/* __________________________ hexagons _____________________________ */
#bullets {width: 45%; height: auto;	margin: -.5em 0 0 1em;}

#bullettitle {width: 110%; min-height:11em;  height:12%;
	background-image:url(../images//texturegray.png);
	position: absolute;
	margin:3.75em 0 0 -7em;
	-moz-box-shadow: 0 10px 25px rgba(0,0,0,0.6);
		-webkit-box-shadow: 0 10px 25px rgba(0,0,0,0.6);
			box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}
#bullettitle h1 {color: #470000; margin:5% 0 0 45%;}
/*adjust long page title */
#bullettitle h1 .longtitle {font-size: 1em; margin:-2.5% 0 0 -10%;}	
#bullettitle h3 {padding: 2.5% 4.5% 0 35%; line-height: 1.2em;}

#hwrap {
	overflow: hidden;
	width: 65%;
	margin: 0 auto;
	}

.clear:after{
  content:"";
  display:block;
  clear:both;
}
#hwrap li{
  position:relative;
  list-style-type:none;
  width:27.85714285714286%; /* = (100-2.5) / 3.5 */
  padding-bottom: 32.16760145166612%; /* =  width /0.866 */
  float:left;
  overflow:hidden;
  visibility:hidden;
  background-image: url(../images/tiled-background3.jpg);
 
  -webkit-transform: rotate(-60deg) skewY(30deg);
 	 -ms-transform: rotate(-60deg) skewY(30deg);
 		 transform: rotate(-60deg) skewY(30deg);
  
}
#hwrap li:nth-child(3n+1){
  margin:.5% 0 0 18%;
}
#hwrap li:nth-child(3n+2){
  margin:26% 0 0 -43%;
}

#hwrap li:nth-child(3n+3){
  margin:26% 0 0 -12.5%;
}

#hwrap li:nth-child(3n+4){
  margin:52% 0 0 -43%;
}

#hwrap li *{
  position:absolute;
  visibility:visible;
}
#hwrap li > div{
  width:100%;
  height:100%;
  text-align:center;
  color:#fff;
  overflow:hidden;
  
  -webkit-transform: skewY(-30deg) rotate(60deg);
  	-ms-transform: skewY(-30deg) rotate(60deg);
  		transform: skewY(-30deg) rotate(60deg);
  
	-webkit-backface-visibility:hidden;
	
	/*-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.8);
		-moz-box-shadow: 0 0 8px rgba(0,0,0,0.8);
			box-shadow: 0 0 8px rgba(0,0,0,0.8);*/
}


/* HEX CONTENT */
#hwrap li img{
  left:-100%; right:-100%;
  width: auto; height:100%;
  margin:0 auto;   
}

#hwrap div h1, #hwrap div p{
  width:90%;
  padding:0 5%;
  background-color:#470000; background-color: rgba(51, 0, 0, 0.8);
  
  -webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
  -ms-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
  transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
}
#hwrap li h1, #hwarp li h1 a{
  bottom:110%;
  font-style:italic;
  font-weight:normal;
  font-size:.75em;
  padding-top:100%;
  padding-bottom:100%;
}
#hwrap li h1:after{
	content:'';
  display:block;
  position:absolute;
  bottom:-1px; left:45%;
  width:10%;
  text-align:center;
  z-index:1;
 /*border-bottom:2px solid #fff;*/
}
#hwrap li p{
	padding-top:50%;
	top:110%;
	padding-bottom:50%;
	font-size: .55em;
}

#hwrap a, #hwrap a:hover {color:#FFF;}


/* HOVER EFFECT  */

#hwrap li div:hover h1 {
  bottom:50%;
  padding-bottom:5%;
}

#hwrap li div:hover p{
  top:50%;
  padding-top:5%;
}
@media screen and (min-width: 1000px){
#bullettitle h3 {padding: 3.75% 4.5% 0 35%;}
#bullettitle h1 .longtitle {margin:-5% 5% 0 -10%;}
#primarynav {margin: 0 8em 0 0 ;}
#primecontent {padding: 5em 4em 0 22em;}
#primaryft ul {padding: 9em 0 0 3em;}
#primarysb, #priamrynp {margin-top: -7em;}
} 

@media screen and (min-width:1400px) {
	#logo img {margin: 0 0 0 20%;}
	#primaryft {padding-top:0;}
	#primaryft ul {padding: 12em 0 0 7em;}
	#primarynp div {padding: 10em 0 0 5em;}
	#primarynp {margin-top: -7.5em;padding-top: 7.5em;}
}
@media screen and (min-width:1600px){
header {max-height: 10em;}
#bullettitle {height:15em;}
#bullettitle h3 {padding: 5% 4.5% 0 35%;}
#primaryft #primecontent {padding: 8em 5% 0 34em;}
}
/* iPad Landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) and (orientation : landscape) { 
#primarynp {margin-top: -2em;padding-top:0;}
#primarynp div{padding-top:4em}
}
/* iPad Portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	#primarynp {margin-top: -2em;padding-top:0;}
	#primarysb div {padding-top: 3em;}
	#primarynp div{padding-top:2em;}
	#primarynp ul{margin-left: 2em;}
}


@media screen and (max-width: 832px){ 
#primarynav {margin:0 2% 0 0;}
	#recap p {font-size: .85em; padding-top: 1em}
	
	#bullettitle {min-height: 6.5em; width: 115%;}
	/*#bullettitle h1 .longtitle {font-size:.85em; margin: -4.5% 0 0 0; padding: 0 .5em;}*/
	#bullettitle h3 {padding: 2.5% 4.5% 0 40%; line-height: 1.2em; font-size: 90%;}	
	#hwrap li div:hover h1 {padding-bottom:5%;}
	#hwrap li div:hover p{padding-top:5%;}
	/*#hwrap div h1{font-size: .75em;}*/
	/*#hwrap li p{font-size: .5em;}*/


	#primecontent {margin-left: 30%; padding: 4em 5% 0 1.25em; background-color: rgba(252,252,252, 0.35); font-size: 100%;}
	#primaryft, #primarysb {min-height: 500px;}
	/*#primarysb ul {margin-left: 20em; padding-top: 2.5em;}*/
	/*#primarysb ul li {font-size: 1em;}*/
	#imagetop ul, #imagebottom ul, #imagemiddle ul {margin: 6em 0 2em 2em;}
	#imagetop, #imagemiddle, #imagebottom {height: 320px; margin-bottom: 1em;}
	/*#primarynp ul {padding-top: 8em;}*/
	#services {margin-top: -3%;}

}

@media screen and (max-width: 768px){ 
#bullettitle {height:5.5em;}
#primaryft ul {padding-top: 3%;}
}
@media screen and (max-width: 640px){
	#recap p {font-size: .75em; line-height: 1.5em; padding: .5em 2em 0;}
	#business h4 {font-size: .85em; line-height:1.75em; }
	#slideright p {
		margin-top: 3em; 
		line-height: 1.5em;
		font-size: .75em;
}
/*#primarynav {margin:-2em 2% 0 0;}*/
#bullets {margin: .5em 0 0 0;}
#bullettitle {margin: 2.75em 0 0 -4em; }
#bullettitle h1 {margin: 3.5% 0 0 45%;}
#bullettitle h3 {padding: 2.5% 4.5% 0 35%;}
#bullettitle h1 .longtitle {font-size:.75em; margin: -4% 0 0 0;}	
#hwarp li h1{font-size: .5em;}
#primary {min-height: 15.625em; padding: 4em 5em 0 4.5em;}
#primecontent {margin:4% 0 0 0;}
/*#primaryft {background-position:0 12em;}*/
#primaryft ul{margin:36% 0 0 0; padding:1.5em 0; text-align: center;font-size: 90%;}
#primarysb {min-height: 400px;}	
/*#primarysb ul {margin-left: 12em; padding-top: 4em; background-color: rgba(251,249,249,0.5);font-weight:550;}*/
#primarysb ul li {font-size: 1em;}
.graphic {width: 50%;} 
#imagetop, #imagemiddle, #imagebottom {height: 280px; margin-bottom: 0;}
#imagemiddle {padding: 1em 0 1.5em .75em;}
#imagemiddle ul {margin: 4em 0 2em 2em;}
#primarynp {margin-top: -4em; min-height: 400px;}
/*#primarynp ul {width: 100%; float:left; margin:0 auto; padding:28em 0 3em 0; text-align:center;}*/
#services {margin-top: -4%;}


}

@media screen and (max-width: 480px){
	/*change navigation to icon and hover */
	header {height:auto; padding-top: 0;}
#logo {margin:3em auto 0;}
#primarynav {position:relative;	float:right; height: auto; margin: 0;}

#primarynav ul {
	width: 180px;
	min-height: 4em;
	position: absolute;
	top: 0;
	right:0;
	margin: -7em 2em 1em 0;
	background: transparent url(../images/menuiconW.png) no-repeat right;
	text-align:right;
	font-size: 1em;
}

#primarynav li{display:none;}

#primarynav a {
	display:block;
	padding: 5px 5px 5px 32px;
	text-align: left;
	}
	
 /* on nav hover */
	#primarynav ul:hover {width: 400px; padding-left: 5%; background-color:#FFF; background-image: none; overflow: visible; z-index:1;}
	#primarynav ul:hover li {display:block; margin: 0 0 5px;}
	#primarynav ul:hover .current {background: #000000 url(images/icon-check.png) no-repeat 10px 7px; color: #fff;}
	/*#logo {margin-left: 1em; width: 100%;}*/
	#slideleft ul {margin: 1.75em auto 0;}
	#slideleft ul li {margin-bottom: .85em;}
	#slideleft p {line-space:1em;}
	#recap, #business {float:none; width: 100%;}

	#bullets {width: 80%; margin: 1.5em 0 0 -2.5em;}
	#bullettitle {height:9em; width: 110%; margin:1.2em 0 0 0; }
	#bullettitle h1 {font-size: 1.5em; margin:2.5% 0 0 50%; padding: 0 .5em;}
	#bullettitle h1 .longtitle {margin: -3% 0 0 -10%;}
	#bullettitle h3 {padding: 4.5% 2.5% 0 45%;}	
	#primary {min-height: 15.625em; padding: 2.5em 3em 0 3.5em;}
	
	#primaryft ul{margin:6% 0 0 0; }
	#primecontent {margin:5% 0 0 0; padding-bottom: 4%; background-color: rgba(252,252,252, 0.5);}
	/*Make selection list easier to read on smaller screens */
	/*#primarysb {min-height: 310px;}*/	
	/*#primarysb ul {
	-webkit-column-count:1;
		-moz-column-count:1;
			column-count:1;
	margin: 0;
	padding: 6em 1em .85em 1.5em;
	float:left;
	border: 1px solid rgbrgba(253,253,253,.25);
}*/
#primarysb ul li {font-size: .75em; line-height: 1.5em;}

#imagetop, #imagemiddle, #imagebottom {height: 220px;}
.text {font-size:.75em;}
#services {	padding:.75em 0 .75em 0; margin:1em 0 0 0;
	}
#services h3 {margin: 0 auto; text-align: center;font-size: 1.15em;}
#services ul  {margin:0 auto; text-align: center;}
#primarysu #services ul li {font-size: .75em;}
#primarynp {margin-top: -6em; min-height: 250px;}
/*#primarynp ul {padding:18em 0 3em 0;}*/
#services {margin-top: -6%;}
}

/*iPhone */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 

/*@media screen and (max-width: 360px){*/
/*#logo {margin: 1.5em 0 0 .5em;}*/
#primarynav ul:hover {width: 320px; padding:5% 0 0 5%; background-color:#FFF; background-image: none; overflow: visible; z-index:1;}
#slideleft, #slideright {float: none; width: 100%; height:125px;}
#slideleft ul, #slideright ul {padding-right: 1em;}
#slideright p {font-size: 1em; margin-top: 1em;}
#bullettitle {height:7em; width: 112%;}
#bullettitle h1 {font-size: 1.25em; margin:2.5% 0 0 55%; }
#bullettitle h1 .longtitle {margin: -2% 0 0 -20%; padding: 0 .35em 0 .15em;}
#bullettitle h3 {padding: 2.5% -1.5% 0 60%;font-size: 80%;}	
#primary {font-size: .85em;line-height: 1.5em; min-height: 15.625em; padding: 1.5em;}
#primecontent {padding:45% 2% 0 2%;font-size: 80%;background-color: rgba(252,252,252, 0.0); }
#primecontent p {margin: 6em 0 0 0;}
#primaryft ul{margin:0; background-image:url(../images/tiled-background3.jpg); color: #FFF;}
#primarysb {min-height: 200px; margin-top:-1em;}
#primarysb div {margin-top:5em;}
#primarysb ul {margin:0 0 0 2.5em;}
#imagetop, #imagemiddle, #imagebottom {float: none;  width: 100%; margin: 0; padding: 0; height: auto; clear: both; }
#imagemiddle, #imagebottom{background-image:url(../images/tiled-background4.jpg); color: #fff;}
 .graphic, .text  {float:none; margin: 0; width: 100%; height:100%; clear: both;}
 .text ul {text-align:center;}
#imagetop img{margin-top:0; border-top: .5em solid #470000;}
#imagemiddle img {margin-top: .5em;}
#imagemiddle ul {background-color: #470000; width: 100%; padding-bottom: 1em; margin: 0;}
#imagetop ul, #imagebottom ul {margin: 0 0 1em 0; padding: 0;}
#imagetop ul li {font-weight: 700;}
#imagebottom img {margin: 0;}

#primarynp {margin-top: -1em; min-height: 200px; font-size: .75em;}
#primarynp div {margin-top: 4em;}
#primarynp ul {padding:0 0 1.5em 0;}


}