/*--------------- Useful for block switching --------------*/
/*---------------------------------------------------------*/
	
.hideOnPhone{
	display:block;
}
.hideOnSmallTablet{
	display:block;
}
.showOnPhone{
	display:none;
}
.showOnSmallTablet{
	display:none;
}

/*
Saeed - 10 Sept 2015
Some anchor links in the responsive versions of the site may span across and break the layout.
Uncomment the following line to fix this issue.  Left it commented at the moment but uncomment in 
2dev if you feel that it's safe to keep is available on responsive sites.
*/
/*
a {
	word-break: break-all;
}
*/

@media (max-width: 1680px) {
	/*--------------- Structure --------------*/
	/*----------------------------------------*/
	#centerc-1col, #foot, #foot2 {
		width:100%;
	}
	
	.wrapper-inner {
		padding-right:2%;
		padding-left:2%;;
		width:96%;
	}

	.homebox img {
		height:auto;
		width:100%;
	}

	#home-slider-wrapper .bx-controls {
		width:95%;
	}

	.newsitem{
		width:32%;
		margin-right:2%;
	}	
	.newsimage{
		height:auto;
		overflow:hidden;
		width:100%;
	}
	.newsimage img {
		height:auto;
		width:100%;
	}
	.newsdate{
		left:auto;
		right:0px;
	}

	.Template2colContainer, .Template4colContainer {
		width:100%;
	}
	.Template2colColumn {
		margin-right:2%;
		width:49%;
	}
	.Template4colColumn {
		margin-right:2%;
		width:23.5%;
	}

	.Template2colColumn img, .Template4colColumn img {
		display: block;
		height:auto;
		width:100%;
		margin:0 auto;
	}
	.Template2colColumn img {
		max-width: 820px;
	}	
	.Template4colColumn img {
		max-width:400px;
	}
}

@media (max-width: 1200px) {
	/*--------------- Structure --------------*/
	/*----------------------------------------*/

	p, ul li, ol li {
		font-size: 1.5em;
	}
	#navigation ul li a, #navigation ul li a:visited {
		margin-right: 20px;
	}

	#navigation ul li:hover #sparesSub { 
		left: -22px;
	}
	#navigation ul li:hover #servicingSub { 
		left: 67px;
	}
	#navigation ul li:hover #refurbishmentSub { 
		left: 192px;
	}
	#navigation ul li:hover #aboutSub {
		left: 349px;
	}

	#navigation ul li #aboutSub:hover {
		background-position:58% 0;
	}

	#foot-phone img, #foot-email img, #foot-mon-thurs-hours img, #foot-fri-hours img {
		margin-right:10px;
	}
	#foot p, #foot a, #foot a:visited, #foot2 p, #foot2 a, #foot2 a:visited {
		font-size:1.4em;
	}
}

/*16:9 laptops screen size in inches can vary from 12" to 15" */
@media(max-width: 1366px) and (max-height: 768px){

}

/*Apply to all Responsive*/
@media (max-width: 1024px) {
	/*--------------- Structure --------------*/
	/*----------------------------------------*/
	p, ul li, ol li {
		font-size: 1.4em;
	}
	h1 {
		font-size:2.4em;	
	}
	h2 {
		font-size:2em;	
	}
	h3 {
		font-size:1.8em;	
	}
	
	.contact-btn, .contact-btn:visited {
		font-size:1.6em;
	}

	#topbar p {
		font-size:1.4em;
	}

	#wrapper-header {
		height:60px;
	}

	#header_graphic {
		z-index: 600;
	}

	#header_graphic img {
		height:auto;
		width: 170px;
	}

	#wrapper-navigation {
		height:2px;
	}
	
	#navigation-inner{
		padding-left:0%;
		padding-right:0%;
		width:100%;
	}
	
	#navigation{	
		float:none;
		border-bottom:0px;
		margin:0px;
		padding:0px;
		width:100%;
		position:absolute;	
		top:15px;
		right:0;
	}
	#navigation ul{	
		background-color: #e5e5e5;
		border: 1px solid #e5e5e5;
		border-top: 1px solid #3a3a3a;
		position: absolute;
		top:45px;
		right:0px;
		z-index:600;
		display:none;
		width:100%;
	}
	#nav-icon {
		display: block;
		background-image:url(../images/nav-mobile.gif);
		background-repeat:no-repeat;
		float:right;
		margin-right:2%;
		height:31px;
		width:34px;
	}

	#navigation ul li {
		display: block;
	}
	#navigation ul li a, #navigation ul li a:visited{
		border-bottom:1px solid #cccccc;
		cursor:pointer;
		float:none;
		padding-top:12px;
		padding-bottom:12px;
		padding-left:2%;
		padding-right:2%;
	}	

	#navigation ul li .subnavTitle:hover, #navigation ul li .subnavTitle:active {
		background-image: none;
		background-repeat: no-repeat;
		background-position: 100% 100%;
	}

	#navigation ul li div.sub {
		background-color:#e6e6e6;
		border: 0px;
		padding-bottom:0px;
		padding-top:0px;
		position: static;
		top: auto;
		left: auto !important;
		display:none;
		height: auto;
		width: 100%;
	}

	#navigation ul li .sub:hover {
		background-image:none;
	}
	
	#navigation ul li div.subNav {
		border: 0px;
		margin: 0px;
		padding: 0px;
		position: relative;
		top: 0px;
		left: 0px;
	}
	
	#navigation ul li div.subNav div.wrapper-inner {
		border: 0px;
		padding: 0px;
		width: 100%;
	}
	#navigation ul li ul {
		background-color: #e6e6e6;
		border: 0px;
		position: relative;
		top: 0px;
		left: 0px;
		margin-left: 0px;
		width: 100%;
	}
	
	#navigation ul li ul li{
		background-position:right;
		border-bottom:0px;
	}
	
	#navigation ul li ul li a, #navigation ul li ul li a:visited {
		background-image: none;
		border-bottom:0px;
		padding-bottom: 10px;
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 10px;
		width: auto;
	}

	.dropdown-left {
		padding-left:2%;
		padding-right:2%;
		width:96%;
	}

	.closed{
		display:none;
	}
	.open{
		display:block !important;	
	}

	.Template2colColumn {
		width:100%;
	}
	.Template4colColumn {
		width:49%;
	}
	.Template4colColumn:nth-child(odd) {
		margin-right:2%;
	}
	.Template4colColumn:nth-child(even) {
		margin-right:0px !important;
	}

	.newsitem h2 {
		font-size: 1.3em;
	}
	.newsitem h3, .newsdate {
		font-size: 1.2em;
	}
	.newsitem p {
		font-size: 1.2em;
	}

	.story-left {
		float:left;
		margin-right:2%;
		width:49%;
	}

	#divMapCanvas {
		height: 480px;
	}
	
	#foot-address, #foot-officeHours, #foot-contactus, #foot-social {
		width: 49%;
	}
	#foot-officeHours, #foot-social {
		margin-right:0px !important;
	}
}

/*Apply to all Responsive*/
@media (max-width: 816px) {
	/*--------------- Structure --------------*/
	/*----------------------------------------*/
	#centerc-1col {
		padding-bottom:10px;
	}
	.homebox {
		margin-bottom:20px;
		width: 49%;
	}
	.homebox:nth-child(even) {
		margin-right:0px !important;
	}
}

/*Apply to all Responsive*/
@media (max-width: 999px) {
	/*--------------- Structure --------------*/
	/*----------------------------------------*/
	
	img{
		max-width: 100%;
		height: auto;
	}
	
	.wrapper-inner {
		padding-left: 2%;
		padding-right: 2%;
		width: 96%;
	}
	
	#foot, #foot2{
		width:100%;
	}
	
	#centerc-1col {
		width: 100%;
	}
	
	#leftc ul{
		margin:0px;
		padding:0px;
	}
		
	#leftc ul li a, #leftc ul li a:visited {
		padding-left: 2%;
		width: 98%;
	}

	
	#leftc ul li ul li a, #leftc ul li ul li a:visited{
		padding-left: 6%;
		width: 94%;
	}
	
	#leftc ul li ul li ul li a, #leftc ul li ul li ul li a:visited{
		padding-left: 10%;
		width: 90%;
	}
	
	.menu_header {
		width:100%;
	}
	
	/*--------------- Bespoke --------------*/
	/*----------------------------------------*/
	
	#map-wrap, #map-placeholder{ 
		width: 100%; 
	}
	#map-wrap img{
		display:block;
	}
	
	/*label cell*/
	div.TableReplaceRow div.TableReplaceLeft {
		width: 20%;
	}
	/*data cell*/
	div.TableReplaceRow div.TableReplaceRight {
		margin-left: 2%;
		width: 75%;
	} 
	
	div.TableReplaceRow div.TableReplaceLeftB {
		width: 60%;
	}
	/*data cell*/
	div.TableReplaceRow div.TableReplaceRightB {
		margin-left: 2%;
		width: 30%;
	 } 
	
	#home-slider-wrapper .bx-controls {
		height: 65px;
		top: -255px;
		max-width: 976px;
		width:100%;
	}

}

/*Large Tablet Sized */
@media (min-width: 768px) and (max-width: 999px) {
	/*--------------- Structure --------------*/
	/*----------------------------------------*/
	
	#wrap{
		padding-left:1%;
		padding-right:1%;
		width:98%;
	}
	
	#header-left {
		width: 40%;
	}

	#header_graphic{
		z-index:600;
	}

	#navigation {
		width:100%;
	}
	#navigation ul li a, #navigation ul li a:visited {	
		padding-left: 12px;
		padding-right: 12px;
	}

	#centerc{
		margin-left:25%;
		width:75%;
	}
	#centerc-2col {
		margin-left: 25%;
		width: 75%;
	}

	#leftc{
		margin-left:-100%;
		padding-right:2%;
		width: 23%;
	}
	
	#menu ul li a, #menu ul li a:visited {

		height:auto;
		padding-left: 2%;
		width: 98%;
	}
	#menu ul li ul li a, #menu ul li ul li a:visited{
		padding-left: 6%;
		width: 94%;
	}
	#menu ul li ul li ul li a, #menu ul li ul li ul li a:visited{
		padding-left: 10%;
		width: 90%;
	}	
	.menu_header {
		padding-left: 2%;
		width: 98%;
	}
	

}

/*Small Tablet Sized */
@media (max-width: 767px) {
	/*--------------- Structure --------------*/
	/*----------------------------------------*/
	
	.hideOnSmallTablet{
		display:none;
	}
	.showOnSmallTablet{
		display:block;
	}
	
	#wrap{
		padding-left:2%;
		padding-right:2%;
		width:96%;
	}
	
	#header-left {
		width: 40%;
	}
	
	#header_graphic{
		z-index:700;
	}

	#centerc{
		display: block;
		float:none;
		margin-left:0px;
		width:100%;
	}
	
	#centerc-2col {
		display: block;
		float: none;
		margin-left: 0px;
		width: 100%;;
	}

	#leftc{
		float:none;
		margin-left:0px;
		padding-right:0px;
		width: 100%;
	}
	#foot{
		width:100%;
	}
	#footerleft{
		float:none;
		width:100%;
	}
	#footerleft ul{
		position:static;
	}
	#footerright{
		float:none;
		width:100%;
	}
	
	label{
		float:none;
	}
	.submitButton {
		margin-left:0px;
		margin-bottom:24px;
	}
	
	.contactInputLarge {
		max-width:326px;
		padding-left:2%;
		padding-right:2%;
		width:95%;
	}
	
	/*--------------- Bespoke --------------*/
	/*----------------------------------------*/
	
	#map-wrap, #map-placeholder, #map-wrap{ 
		height:400px;
	}
	
	#homebox-left, #homebox-center, #homebox-right {
		float:none;
		margin-bottom:12px;
		padding-left: 0%;
		padding-right: 0%;
		text-align:center;
		width: 100%;
	}

	.newsitem {
		width: 49%;
	}
	.newsitem:nth-child(odd) {
		margin-right: 2% !important;
	}
	.newsitem:nth-child(even) {
		margin-right: 0px !important;
	}

	#contact-left, #contact-right {
		float:none;
		width:100%;
	}

	#divMapCanvas {
		height: 380px;
	}

}
@media (max-width: 639px) {
 	/*--------------- Structure --------------*/
	/*----------------------------------------*/
	p, ul li, ol li {
		font-size: 1.4em;
	}

	#topbar-email {
		margin-right: 25px;	
	}
	#topbar p {
		font-size:1.4em;
	}

	.story-left {
		float:none;
		padding-bottom:16px;
		margin:0 auto;
		max-width:530px;
		width:100%;
	}

	.Template4colColumn {
		width:100%;
	}

	#foot p, #foot a, #foot a:visited, #foot2 p, #foot2 a, #foot2 a:visited {
		font-size: 1.3em;
	}

	#divMapCanvas {
		height: 320px;
	}
}

/*Mobile Sized */
@media (max-width: 480px) {
 	/*--------------- Structure --------------*/
	/*----------------------------------------*/
	
	p, ul li, ol li {
		font-size: 1.2em;
	}
	
	.hideOnPhone{
		display:none;
	}
	.showOnPhone{
		display:block;
	}
	
	img.ImgFloatRightNoBorder, img.ImgFloatLeftNoBorder, img.ImgFloatNoneNoBorder, img.alignRight, img.alignLeft{
		float:none;
		display:block;
		margin:0px;
		margin-bottom:12px;
	}

	#topbar-email, #topbar-phone {
		margin-top: 7px;
	}
	#topbar-email {
		margin-right: 10px;
	}
	
	#wrapper-header {
		height:60px;
	}
	#header-left, #header-right {
		float:none;
		margin-bottom:6px;
		width: 100%;
	}
		
	#header_graphic{
		z-index:800;
	}

	#navigation {
		top:15px;
	}
	#navigation ul{
		top:45px;
	}

	iframe {
		width: 100%;
	}

	#foot {
		padding-top: 50px;
	}

	#foot-social #foot-facebook, #foot-social #foot-twitter {
		margin-right: 8px;
	}
	
	/*--------------- Bespoke --------------*/
	/*----------------------------------------*/

	
	#homepage-content {
		padding-top: 37px;
		padding-bottom: 50px;
	}
	
	#map-wrap, #map-placeholder, #map-wrap{ 
		height:300px;
	}	
	
	#gallery a, #gallery a:visited{
		margin-right: 1%;
		margin-bottom: 1%;
		max-width:185px;
		width:48%;
	}

	.newsitem{
		float:none;
		width:100% !important;
		margin-right:0% !important;
	}	

	.newsdate{
		left:auto;
		right:0px;
	}

	#footer-left, #footer-right {
		float:none;
	}
}

@media (max-width: 460px) {
	
	#foot-contactus, #foot-social {
		margin-left: 0px;
		margin-right: 0px !important;
		width: 100%;
	}
}
	
@media (max-width: 390px) {
	
	#foot-address, #foot-officeHours, .homebox {
		margin-left: 0px;
		margin-right: 0px !important;
		width: 100%;
	}
}