
/*--------------- 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, .wrapper-inner-small {
		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;
	}

	#topbar-message p {
		font-size: 1.3em;
	}

	#navigation ul li:hover #servicingSub { 
		left: -17px;
	}
	#navigation ul li:hover #aboutSub {
		left: 120px;
	}

	#navigation ul li #aboutSub:hover {
		background-position:50% 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;	
	}

	.service-box h2 {
		font-size:1.4em;
	}
	
	.contact-btn, .contact-btn:visited {
		font-size:1.6em;
	}

	#topbar p, #topbar-message p {
		font-size:1.1em;
	}
	
	#topbar-phone {
		margin-right: 25px;
	}

	#wrapper-header {
		height:100px;
	}
	
	#header {
		padding-top: 32px;
	}

	#header_graphic {
		z-index: 600;
	}

	#header_graphic img {
		height:auto;
		width: 250px;
	}

	#nav-message {
		margin-right:75px;
	}

	#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:35px;
		right:0;
	}

	#nav-right {
        margin-top: 3px;
		z-index: 10;
        display: block;
        position: relative;
    }

	#navigation ul{	
		background-color: #e5e5e5;
		border: 1px solid #e5e5e5;
		border-top: 1px solid #3a3a3a;
		position: absolute;
		top:66px;
		right:0px;
		z-index:600;
		display:none;
		width:100%;
	}
	#nav-icon {
		display: block;
		float: right;
	  	width: 45px;
	  	height: 30px;
	  	margin-right: 3%;
	  	position: relative;
	  	-webkit-transform: rotate(0deg);
	  	-moz-transform: rotate(0deg);
	  	-o-transform: rotate(0deg);
	  	transform: rotate(0deg);
	  	-webkit-transition: .5s ease-in-out;
	  	-moz-transition: .5s ease-in-out;
	  	-o-transition: .5s ease-in-out;
	  	transition: .5s ease-in-out;
	  	cursor: pointer;
		z-index:10;
	}

	#nav-icon span {
		display: block;
		position: absolute;
		height: 3px;
		width: 100%;
		background: #ffffff;
		opacity: 1;
		left: 0;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .25s ease-in-out;
		-moz-transition: .25s ease-in-out;
		-o-transition: .25s ease-in-out;
		transition: .25s ease-in-out;
	}

	#nav-icon span:nth-child(1) {
	  top: 0px;
	}

	#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
	  top: 15px;
	}

	#nav-icon span:nth-child(4) {
	  top: 30px;
	}

	#nav-icon.open span:nth-child(1) {
	  top: 18px;
	  width: 0%;
	  left: 50%;
	}

	#nav-icon.open span:nth-child(2) {
	  -webkit-transform: rotate(45deg);
	  -moz-transform: rotate(45deg);
	  -o-transform: rotate(45deg);
	  transform: rotate(45deg);
	}

	#nav-icon.open span:nth-child(3) {
	  -webkit-transform: rotate(-45deg);
	  -moz-transform: rotate(-45deg);
	  -o-transform: rotate(-45deg);
	  transform: rotate(-45deg);
	}

	#nav-icon.open span:nth-child(4) {
	  top: 18px;
	  width: 0%;
	  left: 50%;
	}

	#navigation ul li {
		display: block;
	}
	#navigation ul li a, #navigation ul li a:visited{
		border-bottom:1px solid #cccccc;
		color: #353535;
		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-officeHours, #foot-social {
		width: 49%;
	}
	#foot-address, #foot-contactus {
		width: 100%;
	}
	#foot-officeHours, #foot-social {
		margin-right:0px !important;
	}
	#foot-officeHours img, .foot-logo img {
		display:block;
		margin:0 auto;
	}
	.foot-logo {
		float:none;
	}
}

/*Apply to all Responsive*/
@media (max-width: 816px) {
	/*--------------- Structure --------------*/
	/*----------------------------------------*/
	#centerc-1col {
		padding-bottom:10px;
	}
}

/*Apply to all Responsive*/
@media (max-width: 999px) {
	/*--------------- Structure --------------*/
	/*----------------------------------------*/
	
	img{
		max-width: 100%;
		height: auto;
	}
	
	.wrapper-inner, .wrapper-inner-small {
		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 --------------*/
	/*----------------------------------------*/

	#topbar p, #topbar-message p {
        font-size: 1em;
    }
	
	#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%;
	}

	.homebox {
		margin-bottom:2%;
		width:49%;
	}
	.homebox:nth-child(even){
		margin-right:0px !important;
	}

}

/*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%;
	}
	
	.table-responsive {
		width: 100%;
		margin-bottom: 15px;
		overflow-y: hidden;
		-ms-overflow-style: -ms-autohiding-scrollbar;
		border: 1px solid #ddd;
	}
	
	.table-responsive>.table {
    	margin-bottom: 0;
	}
	
	.table-responsive> table>tbody>tr>td, .table-responsive> table>tbody>tr>th, .table-responsive> table>tfoot>tr>td, .table-responsive> table>tfoot>tr>th, .table-responsive> table>thead>tr>td, .table-responsive> table>thead>tr>th {
    	white-space: nowrap;
	}
	
	/*--------------- Bespoke --------------*/
	/*----------------------------------------*/

	#topbar-email, #topbar-phone {
		margin-top: 4px;
        margin-bottom: 4px;
	}
	#topbar-phone {
		margin-right: 10px;
	}
	
	#nav-flag-icons {
        display:none;
    }

	#topbar-flag-icons {
		display:block;
		float:left;
		margin-top: 11px;
	}
	
	#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;
	}

	#topbar-email, #topbar-phone {
		margin-top: 5px;
	}
	#topbar-phone {
		margin-right: 5px;
	}

	div.phone-head, div.email-head {
		border: 2px solid #35498f;
		border-radius: 50%;
		float: left;
		padding: 10px;
		padding-top: 5px;
		padding-left: 5px;
		width: 10px;
		height: 10px;

	}

	div.phone-head img, div.email-head img {
		max-width:16px;
	}

	div.phone-head {
		margin-right: 5px;
	}

	.service-box {
		flex: 0 0 50%;
		width:50%;
		max-width: 50%;
	}

}
@media (max-width: 639px) {
 	/*--------------- Structure --------------*/
	/*----------------------------------------*/
	p, ul li, ol li {
		font-size: 1.4em;
	}

	#topbar-message p {
		font-size: 1em;
	}

	.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;
	}

	#homebox-container {
        display: block;
    }
	.homebox {
        margin-bottom: 20px;
		margin-right:0px;
        width: 100%;
    }

}

/*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;
	}
	
	#header-left, #header-right {
		float:none;
		margin-bottom:6px;
		width: 100%;
	}
		
	#header_graphic{
		z-index:800;
	}

	iframe {
		width: 100%;
	}

	#foot {
		padding-top: 50px;
	}

	#foot-social #foot-facebook, #foot-social #foot-twitter {
		margin-right: 8px;
	}

	#foot-address, #foot-officeHours, #foot-contactus, #foot-social {
		float:none;
		text-align: center;
		margin-right:0;
		width:100%;
	}
	#foot-officeHours {
		margin-bottom:20px;
	}
	#foot-phone, #foot-email {
		width: 200px;
	    display: block;
	    margin: 0 auto;
	}
	
	/*--------------- 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;
		text-align:center;
	}

	.service-box {
		flex: 0 0 100%;
		width:100%;
		max-width: 100%;
	}
	
	.col-6 {
		margin-right: 0px;
		width: 100%;
	}
}

@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%;
	}

	#footer-right a {
		display:block;
		margin-right:0;	
	}
}
	
