/* 
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling. 
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 * 
 * ==|== normalize ==========================================================
 */


/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 1em; line-height: 1.4; }

body, button, input, select, textarea { font-family: sans-serif; color: #222; }

/* 
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: bright yellow! (or customize the background color to match your design)
 */

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


/* =============================================================================
   Links
   ========================================================================== */

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }

h1,h2,h3,h4,h5,h6,h7,h8 {font-weight:100;}

/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
img {max-width: 100%; height: auto;}

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/e 
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9 
 */
svg:not(:root) { overflow: hidden; }

/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }

/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }


/* ==|== primary styles =====================================================
   Author: Silverink
   ========================================================================== */

/* ICON SET FONT from fonts.net
font-family:'WriteHand W01 Regular';
font-family:'ITCFranklinGothicW01-Hv 812689';
book: ITCFranklinGothicW01-Bk 812647
font-family:'LinotypeSyntaxW01-Light 723343';
*/


/* COLOURS:
light grey: 224,224,224

darker grey: 153,153,153
grey : 64,64,64
"black": 38,38,38

font color: 107,104,104 
muted red: 217,89,89
*/



/*--------------------
  -- SILVERINK LINK --*/
#silverinkWebDesign {
	font-size: 10px;
	font-family: helvetica, arial;
	margin-left: 2px;
	margin-top: 5px;
}
#silverinkWebDesign 	a {
	color: #888;
}



/* ==|== Easibuild Structural Elements =====================================================
   ========================================================================== */
#homeEditable > .wrapper, .clientLogos > .wrapper, .homeOpenContent > .wrapper { width: 90%; margin: 20px auto; max-width: 380px; } 
	section > .wrapper  {width: 90%; margin: auto; padding: 40px 0px; max-width: 380px; }
body {
	background: rgb(224,224,224);
	font-family: 'ITCFranklinGothicW01-Bk 812647', sans-serif;
	color: rgb(107,104,104);
}

footer { background: rgb(38,38,38); }
p { margin-top: 0px; font-size: 0.875em; line-height: 180%; }

#subMenu {display: none;}
#subMenu header {display: none;}
/* Topbanner */
#topBanner { background: rgb(38,38,38); position: fixed; width: 100%; top: 0; z-index: 10000; height: 66px;}
  #topMenu ul { display: none; background: rgb(30,30,30); padding: 2%;}
#topMenu ul li a { color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; }
  #topMenu ul li { list-style-type: none; display: block; font-size: 1.125em; text-align: center; line-height: 40px; }
  
  
  
  .mobileMenuIcon { color: rgb(217,89,89); font-size: 1.25em; position: absolute; right: 1em; top: 1.125em; display: block; cursor: pointer;}

/* ==|== Everything Else =====================================================================
   Alphabetically ordered unles it's nested (.level2 will be nested with #submenu for example)
   =========================================================================================== */
h1,h2,h3,h4,h5,h6 {margin-top: 0px;}

/* Hidden elements */
.bCrumb, #MainHTML article header { display: none; }


/* FP IMAGES */
#fpImageDiv {
background: rgb(217,89,89); 
position: relative;
width: 100%;
max-height: 360px;
overflow: hidden;
}

.cycle-slide {width: 100%; height: 100%;}

	#fpImageDiv img {max-height: 90%; margin-top: 1%; height: 100%;}		
		#fpImageDiv .title, #fpImageDiv .title p {display: block; font-family: 'ITCFranklinGothicW01-Hv 812689'; color: rgb(255,255,255); font-size: 6.25em; text-transform: uppercase; position: absolute; top: 25%; width: 100%; text-align: center;}
		#fpImageDiv .Desc {display: block; font-family: 'WriteHand W01 Regular'; color: rgb(50,21,21); font-size: 4em; position: absolute; top: 55%; left: 0%; width:100%; text-align: center;}

/* END FP IMAGES */	

.logo { cursor: pointer; width: 180px;}


/* Map ON ALL PAGES IN FOOTER */
#map-canvas {height: 160px;} 
.logo[role="mobile"] {margin: 20px auto 20px; width: 180px; }
.logo[role="mobile"] img {width: 180px;}



/* ==|== media queries ======================================================
   Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

/*Client Logos*/

.clientLogos { background: rgb(153,153,153); text-align: center; width: 100%; }
	.clientLogos img { width: 140px; height: auto; display: inline-block; margin-right: 1px; margin-bottom: 1px; }


/* Footer */
footer .wrapper { padding: 20px 5%; max-width: 380px; margin: auto; }
	footer h3 {font-weight: 100; font-size: 1em; margin-bottom: 5px;}
	footer .columnOne, footer .columnTwo, footer .columnThree, footer .columnFour { width: 100%; float: none; color: rgb(255,255,255)}
	footer p {font-size: 0.875em; color: rgb(191,191,191)}
		footer a {text-decoration: none; color: rgb(191,191,191)}
			footer a:hover {color: rgb(255,255,255)}
	#socialShareLinks svg {height: 20px; max-width: 40px; margin-right: 5%; margin-top: 5px; opacity:0.2;}
	#socialShareLinks svg path, #socialShareLinks svg rect {fill: rgb(191,191,191)}
	#socialShareLinks svg:hover path, #socialShareLinks svg:hover rect {fill: rgb(255,255,255); opacity:1;}
	.fb {margin-right: 5px;}
	

	#easilogo {opacity:0.2; width: 87px;}
	#easilogo:hover {opacity:0.6;}


/* Homepage Boxes */
     .homeBox {width: 90%; background: rgb(255,255,255); margin: 0 auto 20px auto; cursor: pointer;}
  .homeBox .header {padding: 3.389830508%; }
  .homeBox .header > svg {width: 15.789473684%; max-height: 60px; float: left; margin-right: 5.263157894%;}

  .homeBox h1, .homeBox h2 { float: left; margin: 0; width: 78.947368422%; }
  .homeBox h1 {font-size: 1.5em; }
    .homeBox h2 {font-size: 0.75em; margin-bottom: 30px; }
	.homeBox .header >  svg path {fill: rgb(64,64,64);}	
	.homeBox .clientLogo {background: rgb(64,64,64); text-align: center; padding: 20px; clear: both;}
	.homeBox .clientLogo > svg, .homeBox .clientLogo > img { max-height: 45px; width: 180px;}
	.homeBox .clientLogo > svg path, .homeBox .clientLogo > svg rect, .homeBox .clientLogo > svg line, .homeBox .clientLogo > svg polygon {fill: rgb(255,255,255);}

  .homeBox:hover .header > svg path{fill: rgb(217,89,89);}
  .homeBox:hover .clientLogo {background: rgb(217,89,89); }
  .homeBox:hover {background: rgb(64,64,64); color: rgb(255,255,255)}
  .homeBox:hover li svg {fill: rgb(217,89,89);}
	.powerBox {margin-top: -30px;}
	.powerBox ul, #CaseStudyBox ul {list-style-type: none; padding-left: 0px; clear: both; margin: 0;}
		.powerBox li, #CaseStudyBox li {vertical-align: middle; font-size: 0.875em; vertical-align: middle; margin-left: 50px; position: relative;}
		.powerBox li svg, #CaseStudyBox li svg {width: 1.125em; height: 1.125em; padding: 2px;vertical-align: middle; position: absolute; left: -40px;}
		#CaseStudyBox ul {margin-right: 40px; margin-bottom: 40px;}
		 #CaseStudyBox li {margin-bottom: 10px; margin-left: 60px;}
		 #CaseStudyBox li svg {left: -30px;}

/* EB FEATURES */
#row1, .body7class {text-align: center; color: rgb(255,255,255); overflow: hidden;position: relative;}
	#row1 h1, .body7class h1 {text-transform: uppercase;  text-align: center; font-size: 1.6em;}
		#row1 h1 span, #row1 h1 strong, .body7class h1 strong {font-family: "ITCFranklinGothicW01-Hv 812689"}
		#row1 .introText, .body7class .introText {font-size: 1.125em;background-repeat: no-repeat; background-position: center center ; background-size: 300px;}
		.introText a {color: rgb(217,89,89) ;}
.body7class footer {text-align: left;}

#CaseStudyBox {background: rgb(255,255,255); padding-bottom: 10px;}
#CaseStudyBox, #CaseStudyURL, .CaseStudyURL {width: 100%; clear: both; margin-bottom: 20px;}
	#CaseStudyBox h1 + p {text-align: center;}
		#CaseStudyBox h1 + p img {max-width: 80%; margin: 20px auto;}
	#CaseStudyBox h1 {position: relative; background: rgb(38,38,38); padding: 0px 35px; color: rgb(255,255,255); font-size: 1.75em; margin: 0; line-height: 60px;}
		.introText p {display: inline-block;}
		#ExampleLink1, #ExampleLink2, #ExampleLink3 {width: 100%; margin-bottom: 40px; text-align: center;  }
		#ExampleLink1 {margin-left: 0;}
			#ExampleLink1 a, #ExampleLink2 a, #ExampleLink3 a { background: rgb(38,38,38) url("link.svg") no-repeat right top; padding: 0px 0px; color: rgb(255,255,255); font-size: 1em; margin: 0; line-height: 60px; display: block; text-decoration: none; text-align: center;}
	
	#CaseStudyURL a, .CaseStudyURL a {background: rgb(217,89,89) url("link.svg") no-repeat right top; padding: 0px 35px; color: rgb(255,255,255); font-size: 1.25em; margin: 0; line-height: 60px; display: block; text-decoration: none; text-align: center;}
	
	#row3 h1 {color: rgb(255,255,255); font-size: 2.125em; text-align: center;}

	#CaseStudy {width: 100%; margin-bottom: 20px;}
		#CaseStudy h3 {line-height: 200%;}
		#CaseStudy p {font-size: 1em;}
			#CaseStudy > p > img {margin-top: 0px;}
		#CaseStudy img {margin-top: 40px;}




.fpImages {width: 100%; height: 160px; margin: auto;}
	#fpImageDiv .title, #fpImageDiv .title p {font-size: 2.25em;}
	#fpImageDiv .Desc {font-size: 1.25em;}


.logo[role="desktop"], img[role="desktop"], img[role="tablet"] {display: none;}

.scrollToTop {cursor: pointer; position: absolute; bottom: 0px; left: 0px; padding: 0.5%; width: 100%; margin-top: 40px; background: rgb(80,80,80); color: rgb(255,255,255)}

	.telUs a {color: #ffffff;background: black; color: rgb(255,255,255); text-align: center; display: block; padding: 10px; text-decoration: none; font-family:'ITCFranklinGothicW01-Hv 812689'; font-size: 1.25em;}
  .tweetBox {float: none; width: 100%; background: rgb(255,255,255); margin-bottom: 20px; }
  	.tweetBox h1 {position: relative; background: rgb(38,38,38); padding: 0px 35px; color: rgb(255,255,255); font-size: 1.75em; margin: 0; line-height: 60px;}
  	.tweetBox h1 svg {width: 25px; height: 25px; float: right; margin-top: 17px;}
  		.tweetBox h1 svg path {fill: rgb(255,255,255)}
  		.tweetBox .wrapper {padding: 10px 3.389830508%; max-width: 90%;}
section {position: relative;}
.templateEBFeature section:nth-child(even), body[data-itemid="7"] section:nth-child(odd) { background:rgb(217,89,89); color: rgb(255,255,255); }
body[data-itemid="7"] section:nth-child(even) { color: rgb(107,104,104); }







/*=====================*/
/* 768 - TABLET LAYOUT */
/*=====================*/
@media only screen and (min-width: 768px) {
	
	
	
	/* EB FEATURES */
	#row1 h1, .body7class h1 {font-size: 2.5em;}
	#CaseStudy {float: left; width: 60%; margin-left: 7%;}
		.leftWrap {float: left; width: 32.20338983%; margin-bottom: 40px;}
	#ExampleLink1, #ExampleLink2, #ExampleLink3 {float: left; width: 32.20338983%; margin-left: 1% }
	#ExampleLink1 a {margin-left: 0;}
	
	
	
	/* WRAPPER WIDTHS */
	#homeEditable > .wrapper, .clientLogos > .wrapper, .homeOpenContent > .wrapper  {width:740px; margin: 40px auto; max-width:none; } 
	section > .wrapper  {width: 740px; margin: auto; padding: 40px 0px; max-width: none; }
	
		div[role="mobile"] {display: none;}
 .clientLogos img[role="tablet"]  {display: inline-block;}

footer .wrapper { padding: 40px 0px; max-width: none;}
	footer .columnOne, footer .columnTwo, footer .columnThree, footer .columnFour { width: 23.728813559%; float: left;}


#row1 .introText, .body7class .introText {background-size: 400px; background-position: top center; padding-bottom: 20px;}

.homeBox {width: 48.5%; float: left; margin-top: 0px;}
	.powerBox ul {float: left; width: 50%; clear: none; margin-bottom: 20px;}
  .powerBox .header {padding: 1.5%; }
  .powerBox .header > svg {width: 10%; max-height: 60px; float: left; margin-right:2.263157894%;}

	.socialBox, .responsiveBox {margin-right: 3%;}

#map-canvas {height: 240px;} 


.powerBox {width: 100%;}


.logo img {width: 140px;}
/* Style adjustments for viewports 768px and over go here */
.logo[role="mobile"] {display: none;}
.logo[role="desktop"] {display: block;}

.mobileMenuIcon {display: none;}
.fpImages {width: 720px; height: 260px; margin: auto;}
	#fpImageDiv .title, #fpImageDiv .title p {font-size: 4.25em;}
	#fpImageDiv .Desc {font-size: 3em;}
	
	
#subMenu {display: block; position: fixed; top: 80px; z-index: 10001; width: 100%;}
#subMenu ul {background: rgb(200,89,89); text-align: center; width: 100%; color: rgb(255,255,255); cursor: pointer;}
	#subMenu ul li {display: inline-block; margin: 10px;}
  /* Style adjustments for viewports 1176px and over go here */
  #topBanner .wrapper, footer .wrapper { margin: auto; width: 720px; }


  #topBanner {line-height: 80px; height: 80px;}
    #topMenu ul {display: block;background: none; padding: 0px;}

     #topMenu:after {display: none;}
      	#topMenu ul li.selected {border-bottom: 2px solid rgb(255,255,255);}

  #topMenu ul li {list-style-type: none; display: inline-block; font-size: 0.875em; }
  #topMenu ul li:nth-child(1) {margin-left: 0% /* 40/1180*/}
    #topMenu ul li:nth-child(2),#topMenu ul li:nth-child(3),#topMenu ul li:nth-child(5),#topMenu ul li:nth-child(6),#topMenu ul li:nth-child(7) {margin-left: 3% /* 63/1180*/}
      #topMenu ul li:nth-child(4) {margin-left: 3.5% /* 95/1180*/}
      
  .tweetBox { float: right; width: 40%; margin: 0px 0px 20px 20px; }

}












/*=======================*/
/* 1024 - DESKTOP LAYOUT */
/*=======================*/
@media only screen and (min-width: 1024px) {
	

/* EB FEATURES */
#row1 .introText, .body7class .introText {column-count: 2; -moz-column-count: 2; -webkit-column-count: 2;  column-gap: 400px; -moz-column-gap: 400px; -webkit-column-gap: 400px; font-size: 1.125em;  background-size: 400px; background-position: top center; }

	#CaseStudyURL a {font-size: 1.75em;}
				#ExampleLink1 a, #ExampleLink2 a, #ExampleLink3 a { font-size: 1.25em; padding: 0px 25px;}
	#CaseStudy .csCols {column-count: 2; -moz-column-count: 2; -webkit-column-count: 2;  column-gap: 70px; -moz-column-gap: 70px; -webkit-column-gap: 70px;}
	
#homeEditable > .wrapper, .homeOpenContent > .wrapper  {width: 960px; margin: 50px auto;} 
	section > .wrapper  {width: 960px; margin: auto; padding: 40px 0px; }

.clientLogos > .wrapper {width: 740px; margin: 50px auto;}
.logo img {width: auto;}

.fpImages {width: 960px; height: 360px; margin: auto;}

	#fpImageDiv .title, #fpImageDiv .title p {font-size: 6.25em;}
	#fpImageDiv .Desc {font-size: 4em;}

	.powerBox ul {float: none; width: 100%; clear: both; margin-bottom: 0px;}
		.powerBox h2 {padding-bottom: 10px;}
		.powerBox .header > svg {width: 15.789473684%; max-height: 60px; float: left; margin-right: 5.263157894%;}


#subMenu {display: block; position: fixed; top: 100px; z-index: 10001;}

  #topBanner {line-height: 100px; height: 100px;}
  #topBanner .wrapper, footer .wrapper {
  		margin: auto;
  		width: 960px; 
  }

#map-canvas {height: 340px;} 

.pageContent {column-count: 3; -moz-column-count: 3; -webkit-column-count: 3;  column-gap: 35px; -moz-column-gap: 35px; -webkit-column-gap: 35px;}
	
  #topMenu ul li {font-size: 1.25em; vertical-align: middle; position: relative; }
  	#topMenu li .logo img{position: absolute; top: -15px; left: 0px;}

  #topBanner > .wrapper, .homeOpenContent > .wrapper  { margin: auto; width: 960px; text-align: center; }
  .clientLogos > .wrapper, .homeOpenContent > .wrapper {padding: 60px 0px;}
  		.homeOpenContent > .wrapper {text-align: left; margin: 0px auto;}
  		
  .homeBox {width: 32.20338983%; background: rgb(255,255,255); float: left; margin-bottom: 20px; cursor: pointer;}
  .homeBox .header {padding: 3.389830508%; }
  .homeBox h1, .homeBox h2 { float: left; margin: 0; clear: right;}
  .homeBox h1 {font-size: 1.75em;}
    .homeBox h2 {font-size: 1em; margin-bottom: 30px;}
	.homeBox .header >  svg path {fill: rgb(64,64,64);}	
	.homeBox .clientLogo {background: rgb(64,64,64); text-align: center; line-height: 60px; padding: 0; clear: both;}
	.homeBox .clientLogo > svg, .homeBox .clientLogo > img { height: 40px; max-width: 180px;vertical-align: middle;}
	.homeBox .clientLogo > svg path {fill: rgb(255,255,255);}
	.powerBox, .socialBox, .responsiveBox {margin-right: 1.694915254%;}
	.powerBox ul {list-style-type: none; padding-left: 0px; clear: both;}
		.powerBox li {vertical-align: middle; font-size: 0.875em; margin-bottom: 8px;vertical-align: middle;}
		.powerBox li svg {width: 1.125em; height: 1.125em; margin-right: 20px;vertical-align: middle;}
		.responsiveBox, .simplicityBox {margin-bottom: 0px;}

	.homeBox:hover .header > svg path{fill: rgb(217,89,89);}
	.homeBox:hover .clientLogo {background: rgb(217,89,89); }
  
  .pageContent {width: 100%; float: left;}
  .tweetBox {width: 32.20338983%;}
}






/* WIDE DESKTOP LAYOUT */
@media only screen and (min-width: 1200px) {
 .clientLogos img[role="desktop"]  {display: inline-block;}

#homeEditable .wrapper, .clientLogos .wrapper, .homeOpenContent .wrapper  {width: 1180px; margin: 50px auto;} 
  		.homeOpenContent .wrapper {margin: 0px auto;}
	section > .wrapper  {width: 1180px; margin: auto; padding: 40px 0px; }

.clientLogos .wrapper {margin: 0px auto;}
.fpImages {width: 1180px; height: 360px; margin: auto;}
  /* Style adjustments for viewports 1176px and over go here */
  #topBanner .wrapper, footer .wrapper {
  		margin: auto;
  		width: 1180px; 
  }
}




/* ==|== non-semantic helper classes - NO NEED TO TOUCH ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }

#map-canvas img {max-width: auto !important; height: auto !important;}