#workBg
{
	background:#202020 url(http://cache3.headstartdesign.co.uk/webB/headstart/images/portfolioTitle2.png) center left no-repeat;
	padding-left:30px;
}

#workFg
{
	background-color:#ffffff;
	padding-left:.5em;
}


.column1
{
	background-color:#630145;
}

.column2
{
	background-color:#498182;
}

.column3
{
	background-color:#202020;
}

#featureContainer
{
	background-color:#ffffff;	
}

#features .column
{
	width:33.3333333%;
	float:left;
	padding:0px;
}

#features h4
{
	color:#FFFFFF;
	font-size:1.5em;
	margin-bottom:1em;
}

#features .options
{
	height:2em;
	padding-top:1em;
}

.options p
{
	padding-top:0px;
}

.featureSummary
{
	min-height:8em;
}

.featureSummary , .featureSummary a , .featureSummary a:visited  
{
	color:#eeeeee;
	
}


#servicesList
{
	min-height:11em	
}

#servicesList p
{
	float:left;
	width:8em;
}

#features .innerColumn
{
	padding:0 10% 1.5em 10%;
}

#features .innerColumn h4
{
	margin:1em 0 .25em 0;
}

.featureSummary p
{
	margin:0px;
	padding-top:.5em;
}


#promo
{
	width:50%;	
	background-color:#498182;
	color:#eeeeee;
	float:right;
}

#promo .slideFrame 
{
	width:100%;
}

.quote a , .quote a:visited
{
	color:#b0fdff;
	font-size:.7em;
	white-space:nowrap;
}

#promoFrame1 
{
	//background:transparent url(../images/GQABg.jpg) center center repeat;
}
.quote
{
	margin:0;
	font-size:1.4em;
	margin-bottom:90px;
}

.source
{
	position:absolute;
	bottom:0;
	left:0em;
	width:100%;
	padding:0!important;
	margin:0;
	text-align:left;
}

.source img
{
	float:left;	
	margin-right:1em;
	margin-left:3em;
}

.promoFrame
{	
	position:relative;
	min-height:16em;		
}

#promoText
{
	min-height:16em;	
	background-color: #630145;
	color: #eeeeee;	
	width:50%;
	float:left;
}

#promoText div , .promoFrame div
{
	padding:3em 3em 1px 3em;
}

#promoText p
{
	margin:0;
	font-family: 'Montserrat Alternates', sans-serif;
	line-height:1.33em;	
	font-size:2em;	
}

#promoText strong
{
	font-size:1.4em;
	font-weight:normal;
}

#promoSelector
{
	text-align:right;
	margin-top:.5em;
}

#projects
{	
	width:100%;
	padding:0em 0em;
}

#projects .slideFrame 
{
	width:33.333333%;
}

#projects .slide
{
	padding:0px 10%;
}

#projects .slide img
{
	width:100%;
	//box-shadow:1px 1px 5px #999999; 
}

h2
{
	text-align:center;
}

#projects .slideScroller
{
	height:155px;
	width:1.8em;
}

#projects .slide a
{
	float:left;
}

@media screen and (max-width: 50em) /*800px*/
{
	.responsive #promoText div , .responsive .promoFrame div 
	{
		padding:1em;
	}	
	
	.responsive .source img
	{
		margin-left:1em;
	}
}

@media screen and (max-width: 43.75em) /*700px*/
{
	.responsive #projects .slideFrame 
	{
		width:33.3333333%;
	}
	
	.responsive .source p
	{
		font-size:.8em;
	}
	
	.responsive #features .column1 , .responsive #features .column2 
	{
		width:50%;
	}
	
	.responsive .featureSummary
	{
		min-height:10em;
	}
	
	.responsive #features .column3
	{
		width:100%;
	}
	
	.responsive #features .column3 .innerColumn
	{
		padding-left:5%;
		padding-right:5%;
		
	}
	
	.responsive #servicesList
	{
		min-height:0;			
	}
	
	.responsive #promoText
	{
		width:100%;
		float:none;
		min-height:0em;		
	}
	
	.responsive #promoText p
	{
		font-size:1.3em;
	}
	
	.responsive .quote
	{
		font-size:1.2em;
	}	
	
	.responsive #promo
	{
		width:100%;
	}
	
	.responsive #promo .promoFrame 
	{
		min-height:0em;
		text-align:center;
	}		
	
	.responsive #promoContainer
	{
		background-size:contain;
	}
	
	.responsive #promoText
	{
		text-align:center;
	}
	
	.responsive #promoText .br
	{
		display:inline;
		margin:0 .5em;
		
	}
	
	.responsive #promoText .br span
	{
		white-space:nowrap;
	}
	
}

@media screen and (max-width: 41.875em) /*670px*/
{
	.responsive #projects .slideFrame 
	{
		width:50%;
	}
}

@media screen and (max-width: 31.25em) /*500px*/
{
	
	.responsive #features .column1 , .responsive #features .column2
	{
		width:100%;
	}
	
	.responsive #features .innerColumn
	{
		padding-right:5%;
		padding-left:5%;
	} 

	.responsive .featureSummary
	{
		min-height:0;
	}
}

@media screen and (max-width: 28.125em) /* 450px*/	
{
	.responsive #promoText
	{
		font-size:1.2em;
	}
}

@media screen and (max-width: 25em) /*400px*/
{
	.responsive #projects .slideFrame 
	{
		width:100%;
	}	
}

@media screen and (max-width: 21.875em)	/*350px*/
{
	.responsive #promoText
	{
		font-size:1em;
	}
	
	.responsive .source p
	{
		font-size:.6em;
	}	
}

#promote
{
	width:60%;
	padding-top:40%;
	height:0em;
	float:left;
	position:relative;
	
}

#benefits
{
	padding-top:40%;
	width:40%;
	float:left;
	background-color:#ffff00;	
}

#benefits .inner
{
	margin-top:-100%;
}

#banner
{
	font-family: 'Montserrat Alternates', arial, verdana, sans-serif;	
}

#bannerImage 
{
	float:left;
	width:65%;
	padding-right:5%;
	
}

#bannerImage img
{
	width:100%;
}

#bannerText
{
	float:left;
	width:30%;
}


@media screen and (max-width: 37.5em) /*600px*/
{
	.responsive #bannerImage
	{
		width:100%;
	} 	
	
	.responsive #bannerText
	{
		width:100%;	
		font-size:.8em;
	}
	
	.responsive #bannerText p
	{
		text-align:center;
		padding:1em 1em;		
	}
	
}

.feature
{
	width:25.33333333%; 
	padding:0% 4%;
	float:left;
	margin-bottom:2em;
}

.feature img
{
	width:100%;
}


@media screen and (max-width: 40.625em) /*650px*/
{
	.responsive .feature
	{
		width:31.33333333%; 
		padding:0% 1%;
	}
}

@media screen and (max-width: 31.25em) /*500px*/
{
	.responsive .feature
	{
		width:70%; 
		padding:0% 15%;
	}	
}

@media screen and (max-width: 25em) /*400px*/
{
	.responsive .feature
	{
		width:100%; 
		padding:0%;
	}	
}