/*@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 : #D1E0E3;
	--col-BulkText: #433131;
	--col-HeaderText: #433131;
	--col-AlternativeText:  #FFFFFF;
	--col-DividerStripe: #03798F;
	--col-LookAtMe: #FF5900;
	--col-SecondarySection: #F0F1E8;
	--col-CCDBoxes:#91c449;
}




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

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:transparent;
	margin:0 auto;
	padding:0;
	color:inherit;
}


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/headLogo.png);
	background-repeat: no-repeat;
	height: 90px;
	width: 100%;
	overflow: hidden;
	padding-left: 100%;
	position:relative;
	bottom: -10px;
}

#headTel{
	width:450px;
	text-align:right;
	position:absolute;
	top:10px;
	right:0;
	font-family: 'Domine', 'Times New Roman', serif;
	font-size:0.8em;
	margin-right:0px;
}

#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:0px;
	border:0;
	box-sizing:border-box;
	display: block;
}


FOOTER{
	border-top:3px solid;
	border-color: #03798F;
	border-color: var(--col-DividerStripe);
	position:relative;
	padding:5px;
	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;
}

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

.focusBar{
	color:#FFFFFF;
	color:--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{
	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.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;
}


/**** 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/heroes/example-hero-1.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: #F0F1E8;
	background-color: var(--col-SecondarySection );
	/**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;
	border-style:solid;
	border-width:2px;
	border-color: #91c449;
	border-color: var(--col-CCDBoxes );
}


 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;
}




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;
}

li select{
	padding:0;
	-moz-appearance:none; /* Firefox */
	-webkit-appearance:none; /* Safari and Chrome */
	appearance:none;
	background: linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(135deg, white 50%, transparent 50%), linear-gradient(to right, #ff7d00,#ff7d00), white;
	background-position: calc(100% - 13px) calc(1em + -7px), calc(100% - 8px) calc(1em + -7px), 100% 0;
	background-size: 5px 5px, 5px 5px, 1.5em 1.5em;
	background-repeat: no-repeat;
	
	
}

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;
}



input.contactIcon{
	width:100%;
	font-weight:bold;
}
input.person{
	background-image: url("/images/sprites/cntct-icon_01.png");
}
input.mobile{
	background-image: url("/images/sprites/cntct-icon_02.png");
}
input.phone{
	background-image: url("/images/sprites/cntct-icon_03.png");
}
input.home{
	background-image: url("/images/sprites/cntct-icon_04.png");
}
input.money{
	background-image: url("/images/sprites/cntct-icon_05.png");
}
input.email{
	background-image: url("/images/sprites/cntct-icon_06.png");
}

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;
	
	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);*/
	max-width: calc( 100% - 0px);
}


#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;
}






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

TABLE STRUCTURES

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

.dataTable {
   /* border: solid 1px #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
	color: #333;
	margin-bottom:20px;
	*/
	background-color: #efefef;
	border-radius:8px;
}
.dataTable thead th {
    background-color: #8dc63f;
    border: solid 1px #CCCCCC;
    color: #336B6B;
    padding: 10px;
    text-align: left;
}
.dataTable tbody tr.noBorder{

	border:none;
}
.dataTable tbody tr {
border:none;
border-top: solid 1px #CCCCCC;

}
.dataTable tbody td {
   /** border: solid 1px #CCCCCC;**/
    color: #333;
    padding: 10px;
  /***  text-shadow: 1px 1px 1px #fff; ***/
/**	font-size: 16px;**/
	font-family:'Lexend', arial, helvetica, sans serif;
	  background-color: #efefef;
}
.dataTable-rounded {
 
    border-spacing: 0;
    border: none;
}
.dataTable-rounded thead th {
    background-color: #8dc63f;
    border: none;
  /***  text-shadow: 1px 1px 1px #ccc; ***/
    color: #FFF;
}
.dataTable-rounded thead th:first-child {
    border-radius: 7px 0 0 0;
}
.dataTable-rounded thead th:last-child {
    border-radius: 0 7px 0 0;
}
.dataTable-rounded tbody td {
    border: none;
   /** border-top: solid 1px #CCCCCC;**/
    background-color: transparent;
}
.dataTable-rounded tbody tr:last-child td:first-child {
    border-radius: 0 0 0 7px;
}
.dataTable-rounded tbody tr:last-child td:last-child {
    border-radius: 0 0 7px 0;
}

.dataTable-rounded tbody tr.odd TD{
	background:#eeeeee;
}
.dataTable-rounded tbody tr.even TD{
	background:#dfdfdf;
}



/** Timeline Table - layout bits and bobs**/
TABLE.timeline{
	width:100%;
}
.timeline tbody tr td:first-child{
	width:100px;
}

.timeline tbody tr td audio{
	width:calc(100% - 10px);
	padding-bottom:10px;
}














/*****
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:auto;
		margin-right:5px;
		margin-top:7px;
		font-size:0.7em;
	}
	
	#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/astley-kane-logo-small.png);
		height:75px;
	}
	
	
	#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/astley-kane-logo-xs.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 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;
	}
}