/*@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700|Domine:400,700);*/

@font-face {
  font-family: 'Domine';
  font-style: normal;
  font-weight: 400;
  src: local('Domine'), local('Domine-Regular'), url(https://fonts.gstatic.com/s/domine/v4/GQE2Oayn983RymkQwpLq5A.woff2) format('woff2'), url(https://fonts.gstatic.com/s/domine/v4/1KlmlHXZHUehH22N_q86AA.woff) format('woff');
}
@font-face {
  font-family: 'Domine';
  font-style: normal;
  font-weight: 700;
  src: local('Domine Bold'), local('Domine-Bold'), url(https://fonts.gstatic.com/s/domine/v4/BmiPqZorq0QiT-p6kf1paVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/domine/v4/BmiPqZorq0QiT-p6kf1paT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzOgdm0LZdjqr5-oayXSOefg.woff2) format('woff2'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

/***********

ROOT SECTION - This can be split off to provide semi plug-in colour schemes

************/
:root{
	/**DEFINE CONSTANTS HERE - can be split off in to an additional file if skinning required**/
	--col-Background : #54b0e4;
	--col-BodyBackground : #FFFFFF;
	--col-BulkText: #001c35;
	--col-HeaderText: #001c35;
	--col-AlternativeText:  #001c35;
	--col-DividerStripe: #f5d300;
	--col-LookAtMe: #FF5900;
	--col-SecondarySection: #F0F1E8;
	--col-CCDBoxes:#433131;
}




/*********************

Testing


DIV {
	background-color:rgba(200,150,78, 0.2);
}

main article{
	border:1px solid red;
	
}
************************/
main article{
	display:block;
}
main>article{
	padding:5px;
	
}


/*** COMMON CLASSEs***/
.topRight{
	position: absolute;
	top: 0;
	right: 0;
}




HTML{
	padding:0;
	margin:0;
	background-color: #D1E0E3;
	background-color: var(--col-Background );
	color: #433131;
	color: var(--col-BulkText);
	font-family:'Open Sans', arial, helvetica, sans serif;
	font-size:16px;
	height:100%;
	
}
BODY{
	background-color: #FFFFFF;
	background-color: var(--col-BodyBackground );
	margin:0 auto;
	padding:0;
	color:inherit;
}

HTML, BODY{
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-moz-text-size-adjust: none;
}



H1, H2, H3, H4, H5 {
	font-family: 'Domine', 'Times New Roman', serif;
	color:inherit;
	text-align:left;
}
H1 {
    font-size: 1.7em;
    margin-bottom: 3px;
    margin-top: 0px;
    padding-top: 0;
}

DIV, ARTICLE, BUTTON, FIELDSET, ASIDE, FORM, SMALL{
	display:inline-block;
	box-sizing:border-box;
	position:relative;
}

DIV, ARTICLE {
	text-align:justify;
}

HEADER{
	border-bottom: 10px solid #03798f;
	border-color:var(--col-DividerStripe);
	height: auto;
	position: relative;
	margin-top:-9px;
	margin-bottom:30px;
	background-color: #D1E0E3;
	background-color: var(--col-Background );
	z-index:1000;
	width:100%;
}

#logo{
	background-image: url(/images/sprites/ChaddertonASC-Logo-115.png);
	background-repeat: no-repeat;
	height: 115px;
	width: 100%;
	overflow: hidden;
	padding-left: 100%;
	position:relative;
	bottom: -10px;
}

#headTel{
	width:200px;
	text-align:right;
	position:absolute;
	top:10px;
	right:0;
	font-family: 'Domine', 'Times New Roman', serif;
	background-image: url(/images/sprites/SwimMarkEssentialLogo.png);
	background-repeat:no-repeat;
	font-size:0.8em;
	margin-right:0px;
	height: 61px;
	background-position: top right;
}

#headTel A{
	font-size:2.3em;
}

#headTel P{
	margin:0;
	font-size:1.7em;
	padding-bottom:10px;
}


HEADER A{
	color:inherit;
	text-decoration:none;
}

NAV{
	width: 100%;
	text-align: right;
	font-size: 0.8em;
	height: 30px;
	background:transparent;
	margin:0;
	padding:0;
	position:absolute;
	bottom:-40px;/* Height + HeaderBorder Width */
}

NAV>UL{
	margin:0;
	padding:0;
	background:#F0F1E8;
	background:var(--col-SecondarySection);
}

NAV UL>LI{
	display: inline-block;
	/* You can also add some margins here to make it look prettier */
	padding: 0 10px;
	zoom:1;
	*display:inline;
	/* this fix is needed for IE7- */
}

NAV>button {
	display:none;
}


#dropmenu{
 	display:none;
 }
  #dropmenu +label{
	display: none;
	font-size: 1.5em;
	border: none;
	position: absolute;
	bottom: 0px;
	right: 0px;
	background-color: #fff;
	background-image: url(/images/menu_open.png);
	background-repeat: no-repeat;
	background-position: 3px;
	padding-left: 25px;
	border-top-left-radius: 5px;
	padding-right: 5px;
	padding-top: 3px;
}
	




MAIN{
	width:100%;
	min-height:300px;
	background-color:transparent;
	margin:0;
	padding:5px;
	border:0;
	box-sizing:border-box;
	display: block;
}

#content{
	width:100%;
}

FOOTER{
	border-top:3px solid;
	border-color: #03798F;
	border-color: var(--col-DividerStripe);
	position:relative;
	padding:5px;
	padding-bottom:30px;
	margin-bottom:50px;
	display:block;
}

FOOTER>UL{ 
	margin:0;
	padding:0;
 }

FOOTER UL>LI{
	display: inline-block;
	/* You can also add some margins here to make it look prettier */
	font-size:0.8em;
	padding: 0 10px;
	zoom:1;
	*display:inline;
	/* this fix is needed for IE7- */
}

FOOTER UL>LI:first-child{
	padding-left:0;
}


FOOTER SMALL{
	text-align:center;
	font-size:0.8em;
	display:inline-block;
	padding:5px 5px;
	width:100%
}

#copyrite{
	width:auto;
}

FOOTER ADDRESS{
	font-size: 0.7em;
	font-weight: bold;
	text-align: center;
	font-style: normal;
}

/********POSITIONING CLASSES*********/

.topLeft{
	position:absolute;
	top:0;
	left:0;
}

.topRight{
	position:absolute;
	top:0;
	right:0;
}

.bottomLeft{
	position:absolute;
	bottom:0;
	left:0;
}

.bottomRight{
	position:absolute;
	bottom:0;
	right:0;
}

.center{
	text-align:center;
}

.fullSpan{
	width:100%;
}

div.fullSpan UL{
	padding-left:30px;
	padding-right:30px;
}

td{
	vertical-align:top;
}
td.middle{
	vertical-align:middle;
}

/*****************************************/
/*** Styling bits and bobs ***/

.focusBar{
	color:#FFFFFF;
	color:var(--col-AlternativeText);
	background-color: #03798F;
	background-color: var(--col-DividerStripe );
	width:100%;
	padding:5px;
	font-size:1.3em;
	margin:5px 0;
}

.focusBar H1,.focusBar H2,.focusBar H3,.focusBar H4,.focusBar H5{
	margin:0;
}

UL.star, UL.attention, UL.noDot{
	list-style:none;
	padding:0;
	margin:0;
	
}

UL.star LI, UL.attention LI{
	
	padding-left: 40px;
	vertical-align: middle;
	padding-bottom: 20px;
	text-align: left;
	font-weight:bold;
}

UL.star LI{
	background: url("/images/sprites/star-bullet.png") no-repeat scroll 0px 0px rgba(0, 0, 0, 0);
}
UL.attention LI{
	background: url("/images/sprites/attention-bullet.png") no-repeat scroll 0px 0px rgba(0, 0, 0, 0);
}

UL.noDot LI{
	background: transparent;
}

UL.horizontal{ 
	margin:0;
	padding:0;
	width:100%;
 }

UL.horizontal>LI{
	display: inline-block;
	/* You can also add some margins here to make it look prettier */
	font-size:0.8em;
	padding: 0 10px;
	zoom:1;
	*display:inline;
	/* this fix is needed for IE7- */
}

UL.horizontal>LI:first-child{
	padding-left:0;
}

.breadcrumb{
	font-size:0.9em;
	font-weight:bold;
}
.breadcrumb A{
	text-decoration: none;
}
.breadcrumb A:hover{
	text-decoration: underline;
}


/*************************************************************************************************************/
/*** HERO SECTION ***/
DIV.hero{
	width:100%;
	border-bottom:3px solid;
	border-bottom-color:#03798F;
	border-bottom-color:var(--col-DividerStripe) ;
	padding:0 5px;
}

DIV.hero ARTICLE{
	float:left;
	position:static;
	margin-bottom:360px;/* Height of hero image */
	width: calc( 100% - 330px );
}

#heroIMG{
	max-height:360px;
	z-index: 200;
}

/***********************************************************************/
/**** FORMS *********/
div.sideForm{
	float:right;
	display:flex;
	margin: 0 0 20px 20px;
	z-index:100;
}


.quickCTA{
	width:100%;
	padding: 5px;
}
.quickCTAForm{
	width:690px;
	border:none;
	background:transparent;
}

/**
div.hero FORM SECTION DIV.aston{
	
	padding:0;
}
**/
.aston{
	position: unset;
	z-index: 10;
	height:62px;
	float:right;
	padding:0;
}

.aston IMG{
	height:100%;
	width:auto;
}

#heroSplashForm{
	min-height:350px;
	background-image: url(/images/hero/swimming-masters.png);
	background-repeat: no-repeat;
	background-size: 440px;
	background-position-x: left;
	background-position-y: bottom;
	margin-bottom: 10px;
}

DIV.splashForm{
	width:400px;
	position:absolute;
	left:calc( 70% - 200px );
	top:20%;
}

DIV.splashForm FORM{
	width:100%;
	padding:0;
	border:none;
	background-color: transparent;
}
DIV.splashForm FORM section{
	background: transparent;
	border-bottom-left-radius: unset;
	border-bottom-right-radius: unset;
	min-height: auto;
	width:100%;
}




FORM{
	width:100%;
	padding:10px;
	/**background-color: #433131;
	background-color: var(--col-CCDBoxes );
	Rouinder Corners - non shorthand due to some incompatibility
	border-top-left-radius:15px;
	border-top-right-radius:15px;
	border-bottom-left-radius:15px;
	border-bottom-right-radius:15px;**/
}


 FORM H2{
	color:white;
	margin: 0;
	padding: 0 0 5px 0;
	display:block;
	overflow:auto;
	text-align:left;
}

FORM P{
	margin:0;
	font-size:0.9em;
	padding:5px;
	text-align:left;
}

FORM SECTION DIV{
	padding:0 5px 5px 5px;
}

FORM section{
	background: white;
	margin: 0;
	padding:0;
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
	min-height: 250px;
}

fieldset{
	border:none;
	width: 100%;
}




div.sideForm FORM{
	width:300px;
	float:right;
}


div.sideForm FORM section{
	min-height: 250px;
}

#heroFormImg{
	transform: translate(-100%,0%);
	z-index:-10;
}

DIV.quickCTAImg{
	width:290px;
	position:absolute; bottom:0; right:0;
}

DIV.quickCTAImg IMG{
	height:auto;
	width:100%;
}


FORM.lowKey{
	border-top-left-radius:0;
	border-top-right-radius:0;
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
	padding:0px;
	background:#F0F1E8;
	background:var(--col-SecondarySection);
}

FORM.lowKey section{
	background: transparent;
}
FORM.lowKey DIV:not(.aston){
	width:100%;
	text-align:center;
}

FORM.lowKey FIELDSET{
	max-width:430px;
	width:100%;
}




/*******FORM ICON FIELDS********/
fieldset ol{
	margin: 0;
	padding: 0;
}
form li{
	display: inline-block;
	width: 100%;
	margin: 3px 0;
	text-align:right;
}

FORM LI LABEL{
	float:left;
	font-weight:bold;
}

li.warning{
	color:red;
	font-weight:bold;
	font-size:1.1em;
}

li.error input,li.error select{
	box-shadow: 0 0 2px 0 red;
	border-color:red;
}

li.error input[type='checkbox']{
	width:15px;
	height:auto;
	box-shadow: 0 0 7px 0 red;
}


li.error div.errorTxt{
	width: 100%;
	text-align: right;
	color: red;
	font-weight: bold;
	font-size: 12px;
}

select::-ms-expand {
    display: none;
}

input, select{
	width:144px;
	height: 25px;
	font-size:1em;
	box-sizing:border-box;
	padding:5px;
	background-position: right 5px center;
	background-repeat: no-repeat;
	border: 1px solid #ff7d00;
	border-top-left-radius:7px;
	border-top-right-radius:7px;
	border-bottom-left-radius:7px;
	border-bottom-right-radius:7px;
}


fieldset {  
margin: 1.5em 0 0 0;  
padding: 0;  
border-style:groove;
border-width:2px 0px 2px 0px;
}  
fieldset.flat {  
border:none;
}  
legend {  
margin-left: 1em;  
color: #000000;  
font-weight: bold;  
}  
fieldset ol {  
padding: 0em 1em 0em 1em;  
list-style: none;  
margin:5px 0;
}  
fieldset li {    
float: left;    
clear: left;    
width: 100%;    
padding-bottom: 2px;  
}

li.fmInput{
	border-bottom:1px dotted grey;
}

#content li.fmInput{
	margin:2px 0;
}

label {    
float: left;    
font-size:13px;
font-weight:bold;

}

fieldset select, fieldset input, fieldset textarea{
float:right;
padding:0 2px 0 5px;
font-size:12px;
border:1px solid #3C3C3C;
background-color:aliceblue;
}

fieldset.flat select, fieldset.flat input, fieldset.flat textarea{
float:none;
}

fieldset select{
width:238px;
}
fieldset input{
width:238px;
}
fieldset textarea{
width:274px;
height:90px;
}
.half{
width:70px;
margin-left:14px;
}

.formContainer{
	width:310px;
}






DIV.fieldInfo{
	font-size:0.6em;
	display:block;
	float:none;
	min-width:50%;
	min-height:16px;
	text-align:right;
}



BUTTON.bigCTA, BUTTON.smallCTA{
	border: 1px solid #AD3D00;
	background-color: #FF5900;
	background-color: var( --col-LookAtMe);
	background-image: url("/images/form/arrow-rt-lg.png");
	background-position: right center;
	background-repeat: no-repeat;

	
	color:#FFFFFF;
	text-align:left;
	font-size:11pt;
	cursor: pointer; cursor: hand;
	
}

BUTTON.shortCTA{
	border: 1px solid #AD3D00;
	background-color: #FF5900;
	background-color: var( --col-LookAtMe);
	color:#FFFFFF;
	text-align:left;
	font-size:11pt;
	cursor: pointer; cursor: hand;
	border-top-left-radius:15px;
	border-top-right-radius:15px;
	border-bottom-left-radius:15px;
	border-bottom-right-radius:15px;
	height: 40px;
	padding:0 10px 0 10px;
}



BUTTON.bigCTA:hover, BUTTON.smallCTA:hover, BUTTON.shortCTA:hover{
	background-color:#00B548;
	box-shadow: 0 0 10px 0 #14CC5D;
	border:1px solid green;
}

BUTTON.bigCTA{
	border-top-left-radius:15px;
	border-top-right-radius:15px;
	border-bottom-left-radius:15px;
	border-bottom-right-radius:15px;
	height: 66px;
	width: 100%;
	padding:0 0 0 10px;
}
BUTTON.smallCTA{
	border-top-left-radius:15px;
	border-top-right-radius:15px;
	border-bottom-left-radius:15px;
	border-bottom-right-radius:15px;
	height: 66px;
	width:238px;
	padding:0 0 0 10px;
	height:auto;
}




BUTTON.bigCTA h4{
	margin:0;
	font-size:1.3em;
}
BUTTON.smallCTA h4, BUTTON.shortCTA h4{
	margin:0;
	font-size:1.2em;
	padding:4px 0;
	max-width: calc( 100% - 28px);
}


#cookieAccept h4{
	max-width:100%;
}

div.socialContainer{
	float:right;
	margin: 0 0 10px 0;
	top:-5px
}
div.socialContainer A{
	float: left;
	height: 50px;
	width: 50px;
	font-size: 2px;
	
}
div.socialShareIcons{
	background-repeat: no-repeat;
	height: inherit;
	width: 100%;
	overflow: hidden;
	position: relative;
	padding-left: 100%;
	background-size: 100%;
}


/**********COLUMN SIZING AND LAYOUT***********/
div.column{
	width:100%;
	margin:10px 0;
	display:flex;
}
div.column:after{
	content: "";
	display: table;
	clear: both;
}

div.column>article, div.column>DIV{
	 float: left;
	 padding:0 10px;
	 width:100%;
}

div.col2>article, div.col2>DIV{
	width: 50%;
}
div.col3>article, div.col3>DIV{
	width: 33.33%;
}

div.col4>article, div.col4>DIV{
	width:25%;
}
div.col6>article, div.col6>DIV{
	width:16.66%;
}

/*******Use these to 100% width on screen shrink******/
div.column.last>article:last-child, div.column.last>DIV:last-child{
}
div.column.first>article:first-child, div.column.first>DIV:first-child{
}


article>h3{
	margin:0px;

}

ARTICLE IMG{
	max-width:100%;
	max-height:300px;
	display: block;
	  margin-left: auto;
	  margin-right: auto;
}



/*******************************
Data Table
*******************************/
TABLE.dataTable{
	border-collapse: collapse;
	border-bottom:2px solid grey;
	width:95%;
	margin:10px 0;
}
TABLE.dataTable THEAD TH{
	border-bottom: 2px solid grey;
	font-size: 10pt;
	
}
TABLE.dataTable TBODY TD{
	border-bottom: 1px dotted grey;
	background:transparent;
	padding:6px 0;
}

TABLE.dataTable TBODY TR.odd{
	background:#eeeeee;
}
TABLE.dataTable TBODY TR.even{
	background:#fdfdfd;
}

TABLE.dataTable TBODY TR.selectable{
	cursor: pointer;
	cursor: hand;
}

TABLE.dataTable TBODY TR.selected{
	background-color:yellow;
}






/*****
FULL SIZE - biggest it gets
****/



/**
	Screen Size alterations
**/

BODY{
	width:990px;
}




/* start of desktop styles */

@media screen and (max-width: 1007px) {
/* start of large tablet styles */
	HTML{
		font-size:16px;
	}


	BODY{
		width:100%;
		/*background:yellow;*/
	}
	
	#headTel{
		width:180px;
		margin-right:5px;
		margin-top:7px;
		font-size:0.7em;
		background-size:contain;
	}
	
	#headTel P{
		width:100%;
		float:none;
		margin-right:0;
	}
	input{
		font-size:0.8em;
	}
	
	DIV.hero ARTICLE{
		width: calc(100% - 290px );/*from form size*/
	}
	
	#heroIMG{
		max-height:360px;
		width:auto;
	}
	
	ARTICLE IMG{
		max-width:100%;
		max-height:300px;
	}
	
	
	
	/*****Big CTA Form*****/
	.aston{
		height:50px;
	}
	
	div.sideForm FORM{
		width:260px;
	}
	div.sideForm FORM H2{
		font-size:1.2em;
		padding:0;
	}
	div.sideForm FORM P{
		margin:0;
		font-size:0.9em;
	}
	div.sideForm fieldset{
		padding:0;
	}

	BUTTON.bigCTA, BUTTON.smallCTA{
		background-size: 35px auto;
	}
	
	BUTTON.bigCTA{
		font-size:0.8em;
		height:55px;
	}
	
	#heroFormImg{
		height:auto;
		width:26vw;
		transform: translate(-100%,12%);
	}
	
	#quickCTAForm{
		width:calc( 100% - 232px );
		font-size:0.8em;
		font-weight:bold;
	}
	DIV.quickCTAImg{
		width:232px;
		position:absolute; bottom:0; right:0;
	}
	div.socialShareIcons IMG{
		 transform: scale(0.75);
	}
	

}

@media screen and (max-width: 770px) {
/* start of medium tablet styles  - requires change to logo size here too, menu seems OK - although may not need to change font size*/
	HTML{
		font-size:14px;
	}
	BODY{
		width:100%;
		/*background:orange;*/
	}
	HEADER{
		border-bottom-width:5px;
		height:75px;
		margin-bottom:10px;
	}
	#logo{
		background-image: url(/images/sprites/ChaddertonASC-Logo-75.png);
		height:75px;
	}
	
	#headTel{
		width:140px;
		margin-right:90px;
		margin-top:12px;
	}
	#headTel P{
		width:inherit;
		float:left;
		margin-right:0;
		font-size:1.4em;
	}
	
	NAV{
		bottom:4px;
	}
	
	/*dropdown menu*/ 
	NAV UL>LI{
		display:block;
	}
	
	
		
	 #dropmenu +label{
	 	display:block;
	 	
	 }
	 
	#dropmenu:checked + label{
	 	background-image:url(/images/menu_close.png);
	 }
	 
	 NAV input:checked ~ .dropdown-content {
	    display:block;
	}
		

	
	.dropbtn {
		margin-right:5px;
		border: 2px solid #03798F;
		border-bottom:none;
		background-color: #FFFFFF;
		background-image: url("/images/sprites/menu-button.png");
		background-position: left 6px center;
		background-repeat: no-repeat;
		cursor: pointer; cursor: hand;
		border-top-left-radius:10px;
		border-top-right-radius:10px;
		text-align:right;
		font-size: 16px;
		display:inline-block;
		right: 0;
		position: absolute;
		top: -30px;
		z-index: 200;
		height: 30px;
		padding: 5px 10px 5px 0;
		width: 100px;
	}
	
	/* The container <div> - needed to position the dropdown content */
	.dropdown {
	  position: relative;
	  display: block;
	  height:0;
	}
	
	/* Dropdown Content (Hidden by Default) */
	.dropdown-content {
		  display: none;
		  position: absolute;
		  background-color: #f1f1f1;
		  min-width: 160px;
		  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		  z-index: 7000;
		  right:0;
	}
	
	/* Links inside the dropdown */
	.dropdown-content a{
		  color: black;
		  padding: 12px 16px;
		  text-decoration: none;
		  display: block;
		}
		
		
	/* Change color of dropdown links on hover */
	.dropdown-content a:hover {background-color: #ddd;}
	
	/* Show the dropdown menu on hover */
	.dropdown:hover .dropdown-content {display: block;}
	
	/* Change the background color of the dropdown button when the dropdown content is shown */
	.dropdown:hover .dropbtn {background-color: #3e8e41;}

	DIV.hero ARTICLE{
		margin-bottom: calc(81vw - 226px);
	}
	
	
	#heroSplashForm{
		min-height:150px;
		height: calc( 46vw );
		background-size: 59%;
	}
	div.splashForm{
		width: 290px;
		position: absolute;
		left: calc( 70% - 130px );
		top: 20%;
		font-size:17px;
	}
	
	#heroIMG{
		width: calc(100% - 250px );
		max-width:469px;
		height:auto;
	}
	
	#heroFormImg{
		display:none;
	}
	
	
	/**  Column Alterations - stack 'em up  **/
	div.column {
		display:block;
		margin: 10px 0 5px 0;
	}
	
	div.column article, div.column DIV {
		display:inline-block;
		margin-bottom: 8px;
	}
	
	div.col2>article, div.col2>DIV{
		width: 100%;
	}
	
	div.col2>article form{
		
		max-width:480px;
	}
	
	
	div.col3>article, div.col3>DIV{
		width: 50%;
	}
	
	div.col4>article, div.col4>DIV{
		width:50%;
	}
	div.col6>article, div.col6>DIV{
		width:33.33%;
	}
	
	ARTICLE IMG{
		max-width:100%;
		max-height:250px;
		
	}
	
	/*******Use these to 100% width on screen shrink******/
	div.column.last>article:last-child, div.column.last>DIV:last-child{
		width:100%;
	}
	div.column.first>article:first-child, div.column.first>DIV:first-child{
		width:100%;
	}

	
	#quickCTAForm{
		width:calc( 100% - 160px );
		font-size:0.8em;
		font-weight:bold;
	}
	DIV.quickCTAImg{
		width:150px;
		position:absolute; bottom:0; right:0;
	}
	
	
	BUTTON.smallCTA{
		background-size: 25px auto;
		
	}
	
	div.socialContainer A{
		height: 38px;
		width: 38px;
	}
	
}

@media screen and (max-width: 560px) {
/* start of phone styles  - will need to rearrange quite a bit*/
	HTML{
		font-size:14px;
	}
	BODY{
		width:100%;
		/*background:red;*/
	}
	H1{ font-size:1.4em; }
	#logo{
		height:54px;
		background-image: url(/images/sprites/ChaddertonASC-Logo-54.png);
	}
	
	HEADER{
		position: -ms-device-fixed;/*Will be glad to see you go IE*/
		 /*position: -webkit-sticky; Safari */
		position: fixed;
		
		top:0px;
		height:54px;
	
	}
	#headTel{
		display: none;
	}
	#headTel A{
		font-size: 1.5em;
	}
	
	#headTel P{
		display:none;
	}
	
	.dropbtn{
		height:26px;
		margin:auto;
		padding:3px;
		top:-26px;
	}
	
	FORM LI LABEL{
		width:40%;
		font-size:0.8em;
	}
	
	input{
		width:120px;
	}
	
	main{
		margin: 54px 0 0 0;
	}
	#heroSplashForm{
		min-height:130px;
		height: calc( 46vw );
		background-size: 60%;
		background-position-x: -20%;
	}
	div.splashForm{
		width: 60%;
		position: absolute;
		left: unset;
		right:0;
		top: 7%;
		font-size:inherit;
		padding-right:5px;
	}
	
	
	
	
	DIV.hero ARTICLE{
		margin-bottom:20px;
		width: 100%;
	}

	#heroIMG{
		display: block;
		float: left;
		position: static;
		padding: 10px 5px 10px 0px;
		width: 40vw;
	}
	
	
	DIV.hero ARTICLE IMG{
		display:none;
	}
	
	DIV.sideForm{
		margin:0 10px 20px 10px;
	}
	
	DIV.sideForm FORM{
		width:100%;
	}
	
	
	DIV.column ARTICLE{
		width:100%;
	}
	
	ARTICLE IMG{
		max-height:200px;
	}
	
	
	.focusBar{
		font-size:1.1em;
	}
	
	#quickCTAForm{
		width:100%;
	}

	DIV.quickCTAImg{
		position:relative;
		float:right;
	}
	
	FOOTER SMALL.topRight{
		position:relative;
		width:100%;
	}
	div.socialContainer A{
		height: 29px;
		width: 29px;
	}

}
@media screen and (max-width: 360px) {
/*smaller phone styles  - just the odd bit of jiggling*/
	BUTTON.bigCTA, BUTTON.smallCTA {
		background-size: 20px auto;
		font-size:10px;
	}
	BUTTON.bigCTA h4 {
	  font-size: 1.4em;
	}
	div.socialContainer A{
		height: 22px;
		width: 22px;
	}
}