
/*--------------- 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;
}
*/

/*Apply to all Responsive*/
@media (max-width: 1480px) {
	.wrapper-inner, .banner-heading .wrapper-inner {
		margin-right: 2%;
		margin-left:2%;
		width:96%;
	}

	.banner-heading .wrapper-inner {
		padding-left:15px;
		padding-right:15px;
	}
}

@media (max-width: 1200px) {
	/*--------------- Structure --------------*/
	/*----------------------------------------*/
	img{
		max-width: 100%;
		height: auto;
	}
	
	#centerc{
		margin-left:25%;
		width:75%;
	}
	#centerc-2col {
		margin-left: 22%;
		width: 78%;
	}

	#leftc{
		margin-left:-100%;
		padding-right:2%;
		width: 20%;
	}
	
	#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%;
	}
	
	#navigation {
		width:100%;
	}
	
	#navigation ul li a {
		padding-right:16px;
	}
	.nav-links {
		margin-right:2%;
		width:23%;
	}
	.nav-image {
		width:75%;
	}
	#navigation ul li ul {
		width:100%;
	}
	
	#centerc-1col {
		width: 100%;
	}
	
	#home-content p {
		text-align:left;
		padding-bottom:0px;
	}
	
	.newsitem{
		width:32%;
		margin-right:2%;
	}	
	.newsimage{
		height:auto;
		overflow:hidden;
		width:100%;
	}
	.newsdate{
		left:auto;
		right:0px;
	}
	
	.Template2colContainer {
    	width: 100%;
	}
	.Template2colColumn {
    	margin-right: 2%;
    	width: 49%;
	}
	.Template2colColumnLast {
    	width: 49%;
	}

	.textarea {
		width: 600px;
	}

	.textarea .textline1 {
		font-size:1.5em;
	}
	.textarea .textline2 {
		font-size:1.1em;
	}

}

/*Apply to all Responsive*/
@media (max-width: 1024px) {
	/*--------------- Structure --------------*/
	/*----------------------------------------*/
	
	#centerc{
		margin-left:25%;
		width:75%;
	}
	#centerc-2col {
		margin-left: 25%;
		width: 75%;
	}

	#leftc{
		margin-left:-100%;
		padding-right:2%;
		width: 23%;
	}
	
	/*--------------- Bespoke --------------*/
	/*----------------------------------------*/

	#header_graphic img {
		height:auto;
		width:140px;
	}
	
	#navigation ul li ul li{
		margin-bottom:0px;
	}
	#navigation ul li ul li a{
		padding-bottom:0px;
	}
	
	.homeboxes-header h3 {
		font-size:1.5em;
	}
	
	#map-wrap, #map-placeholder{ 
		width: 100%; 
	}
	#map-wrap img{
		display:block;
	}
	
	label {
		margin-right:0px;
		width:100%
	}
	.submitButton, #recaptcha-container {
		margin-left:0px;
	}
	
	
	/*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%;
	}
	
	.textarea {
		padding-right:2%;
		padding-left:2%;
		width:100%;
	}

	#wrapper-header {
		padding:0;
	}

	#header {
		width:100%;
	}

	#header-right {
		display:none;
	}

	#header-left {
		flex: 0 0 100%;
		padding-right: 30px;
    	padding-left: 30px;
    	max-width: 100%;
		width:100%;
	}


	#wrapper-navigation {
		border-bottom:none;
		height:2px;
		padding:0px;
		width: 100%;
		flex: 100%;
		max-width: 100%;
		z-index:700;
	}
	
	#navigation-inner{
		padding-left:0%;
		padding-right:0%;
		max-width:100%;
		width:100%;
	}
	
	#navigation{
		float:none;
		border-bottom:0px;
		margin:0px;
		width:100%;
		padding:0px;
		position:absolute;	
		top: -38px;
	}
	#navigation ul{	
		background-color:#ffffff;
		position: absolute;
		top:80px;
		right:0px;
		z-index:600;
		display:none;
		width:100%;
	}
	#navigation ul li .subNav {
		display:none;
	}
	#nav-icon {
		display: block;
		float: right;
	  	width: 32px;
		height: 26px;
		top: 25px;
	  	right: 20px;
		/*margin-left: 26px;
		margin-top: 14px;*/
	  	position: absolute;
	  	-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;
	}

	#nav-icon span {
		display: block;
		position: absolute;
		height: 2px;
		width: 100%;
		background: #fff;
		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: 2px;
	}

	#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
	  top: 13px;
	}

	#nav-icon span:nth-child(4) {
	  top: 24px;
	}

	#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 {
		background-color: #ffffff;
		display: block;
	}
	#navigation ul li a, #navigation ul li a:visited{
		border-bottom:1px solid #cccccc;
		color: #003a63;
		cursor:pointer;
		display:block;	
		float:none;
		font-size: 14px;
		padding-top:12px;
		padding-bottom:12px;
		padding-left:2%;
		padding-right:2%;
	}
	#navigation ul li #nav-products {
		padding-left:2% !important;
		padding-right:2%;
	}
	
	.closed{
		display:none !important;
	}
	.open{
		display:block !important;	
	}
	
	
	#navigation ul li div.sub {
		border: 0px;
		position: static;
		top: auto;
		left: auto;
		display:none;
		height: auto;
		width: 100%;
	}
	
	#navigation ul li div.subNav {
		border: 0px;
		margin: 0px;
		padding: 0px;
		position: relative;
		top: 0px;
		left: 0px;
		width:100%;
	}
	#navigation ul li div.subNav .navMobile {
		margin-top:10px;
		margin-bottom:0px;
	}
	#navigation ul li div.subNav ul{
		border: 0px;
		position: relative;
		top: 0px;
		left: 0px;
		margin-left: 0px;
		margin-bottom:30px;
		padding:0px;
		width: 100%;
	}
	
	#navigation ul li div.subNav ul li{
		background-image:none;
		border-bottom:0px;
		margin-right:2%;
		margin-left:2%;
		width:96%;
	}
	
	#navigation ul li div.subNav ul li a, #navigation ul li div.subNav ul li a:visited {
		background-image: none;
		color: #003a63;
		font-size: 12px;
		padding-bottom: 10px;
		padding-left: 2%;
		padding-right: 2%;
		padding-top: 10px;
		width: 100%;
	}
	#navigation ul li div.subNav ul li a:hover{
		background-image:none;
		color: #b5a065;	
	}
	
	.nav-links {
		margin-right:0px;
		width:100%;
	}
	.nav-image {
		float:none;
		clear:both;
		width:100%;
	}
	.nav-image img {
		display:none;
	}
	
	.navMobile {
		display:block !important;
	}
	
	.newsitem h2{
		font-size:1.4em;
		min-height:90px;
	}
	
	img.alignRight, img.alignLeft {
		width:50%;
	}

	#homeboxes-container {
		top: 0;
		margin-bottom:0;
		width: 100%;
	}

	#banner-container img {
		height:230px;
	}

	.banner-heading {
		top:60%;
	}

}

/*Large Tablet Sized */
@media (min-width: 768px) and (max-width: 1024px) {
	/*--------------- Structure --------------*/
	/*----------------------------------------*/
	
	#wrap{
		padding-left:1%;
		padding-right:1%;
		width:98%;
	}

	#header_graphic{
		z-index:600;
	}

	#navigation {
		width:100%;
	}
	#navigation ul li a, #navigation ul li a:visited {
		font-size: 13px;
		padding-right: 9px;
	}
	
	#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%;
	}
	
	/*--------------- Bespoke --------------*/
	/*----------------------------------------*/

	.slider-container {
		top:40%;
	}
	
	#divMapCanvas {
		height:360px;
		width:100%;
	}

	.textarea .textline1 {
		font-size: 1.2em;
		margin-bottom: 8px;
	}
	.textarea .textline2 {
		font-size: 1em;
	}

}

/*iPad Landscape Overrides*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	.slider-container {
		top: 35%;
	}
	.textarea {
		width: 600px;
	}

	.textarea .textline1 {
		font-size:1.5em;
	}
}

/*Small Tablet Sized */
@media (max-width: 767px) {
	/*--------------- Structure --------------*/
	/*----------------------------------------*/
	
	.hideOnSmallTablet{
		display:none;
	}
	.showOnSmallTablet{
		display:block;
	}
	
	
	/* Force table to not be like tables anymore */
	#products-container table, #products-container thead, #products-container tbody, #products-container th, #products-container td, #products-container tr { 
		display: block; 
		padding:0px;
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	#products-container tr:first-child { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	#products-container tr { 
		width:100%;
	}
	
	#products-container td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding:6px; 
	}
	
	#products-container td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*table tr td:nth-child(1){
		font-weight:bold;
	}*/
	
	#products-container table td span{
		display:inline-block;
		font-weight:bold;
		width:100%;
	}		
	
	 table.tableStyleA {
		border-bottom:none;
		padding:2%;
		width:100% !important;
	 }

	 #products-container table {
		border:0px;	
		padding:0px;
	}	
	 #products-container table td{
		border-bottom:1px solid #eee;
		cursor:pointer;
		padding:6px; 
	}
	
	#products-container .tableClosed{
		display:none;
	}	
	
	table.tableStyleA td, th {
		border-right:none;
		border-left:none;
		border-top:none;
		width:100%;
	}
	
	table.tableStyleA tr:nth-child(odd) {
		background-color: #ffffff;
	}
	table.tableStyleA tr td:nth-child(odd) {
		background-color: #d5e8f6;
	}
	
	#wrap{
		padding-left:2%;
		padding-right:2%;
		width:96%;
	}
		
	
	#header_graphic{
		z-index:700;
	}

	#header-right {
		padding-right:90px;
	}

	.header-phone-number {
		display:none;
	}

	#header-phone {
		padding-right:0;
	}
	#header-contact {
		display:none;
	}

	#centerc{
		display: block;
		float:none;
		margin-left:0px;
		width:100%;
	}
	
	#centerc-2col {
		display: block;
		float: none;
		margin-left: 0px;
		padding-bottom:0px;
		width: 100%;
	}

	#leftc{
		float:none;
		margin-left:0px;
		padding-right:0px;
		width: 100%;
	}

	#foot{
		width:100%;
	}
	
	label{
		float:none;
	}
	.submitButton {
		margin-bottom:24px;
	}
	
	.contactInputLarge {
		max-width:326px;
		padding-left:2%;
		padding-right:2%;
		width:95%;
	}

	.slider-container {
		top:37%;
	}

	/*--------------- Bespoke --------------*/
	/*----------------------------------------*/
	
	#leftc_images {
		margin-right: auto;
    	margin-left: auto;
		margin-bottom:15px;
    	width: 100%;
	}
	#leftc img {
		float:left;	
		margin-right:2%;
		width:23.5%;
	}
	#leftc img:nth-child(4) {
		margin-right:0px;
	}
	
	.newsitem h2{
		font-size:1.3em;
	}
	
	#divMap{
		width:100%;
	}
	#divMapCanvas {
		height:360px;
		width:100%;
	}
	#divMap h2 {
		margin-top:0px;
	}

	#machinepopup {
		position:relative;
	}
	#machinepopupClose {
		display:none;
	}

	#machineimage {
		margin-bottom:20px;
	}
}

@media (min-width: 481px) and (max-width: 639px) {

	#homeboxes-container {
		padding-bottom:0px;
	}

}

@media (max-width: 639px) {
	
	.homeboxes-content p, .homeboxes-content a {
		min-height:auto;
	}
	
	#leftc_images img {
		margin-top:10px;
	}
	
	.newsitem h2 {
		min-height:100px;
	}
	
	#contact-container table, #contact-container thead, #contact-container tbody, #contact-container th, #contact-container td, #contact-container tr { 
		display:block;
		width:100%;
	}
	#contact-container table {
		margin-bottom:20px;
	}

}

@media (max-width: 575px) {

	#slider-content {
		padding-top: 3rem!important;
		padding-bottom: 3rem!important;
	}

	.slider-container {
		top: 50%;
	}

	.textline2 {
		display: none;
	}

	#sitelinks {
		padding-bottom: 20px;
	}

	#sitelinks img {
		display:block;
		margin:0 auto;
	}
	#sitelinks p, #sitelinks a {
		text-align:center;
	}

	#sitelinks .social-icons {
		width:31px;
	}

	#foot ul li {
		display:block;
		clear:both;
		text-align:center;
		margin-bottom:10px;
		padding: 0;
	}

	#sitelinks .social-icons {
		float: none;
		display: block;
		margin: 0 auto;
		margin-top:20px;
		width:100%;
		width:30px;
		/*width: 176px;*/
	}

}

/*Mobile Sized */
@media (max-width: 480px) {
 	/*--------------- Structure --------------*/
	/*----------------------------------------*/
	
	.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;
		width:auto;
	}
	
	#header-left, #header-right{
		clear:both;
		float:none;
	}
		
	#header_graphic{
		z-index:800;
	}
	#header_graphic img {
		display:block;
		margin:auto;
	}

	iframe {
		width: 100%;
	}
	
	/*--------------- Bespoke --------------*/
	/*----------------------------------------*/

	.textarea .textline1 {
		font-size: 1.2em;
	}

	#banner-container img {
		height: 200px;
	}
	
	#leftc_images {
		margin-right:auto;
		margin-left:auto;
    	width: 304px;
	}
	#leftc_images img {
		margin-top:10px;
		margin-right:10px;
		width:147px;
	}
	#leftc img:nth-child(2) {
		margin-right:0px;
	}
	
	#home-content-mobile p {
    	font-size: 1.3em;
		padding-bottom:0px;
	}
	#homeboxes-container {
    	padding-bottom: 0px;
	}
	
	#map-wrap, #map-placeholder, #map-wrap{ 
		height:300px;
	}	

	.newsitem{
		float:none;
		width:100% !important;
		max-width:300px !important;
		margin-right: auto !important;
    	margin-left: auto !important;
	}	

	.newsdate{
		left:auto;
		right:0px;
	}
	
	.newsitem h2 {
		min-height:auto;
	}
	.Template2colContainer {
    	margin-bottom: 0px;
	}
	.Template2colColumn, .Template2colColumnLast {
    	display: block;
		float: none;
		margin-right: auto;
    	margin-left: auto;
		min-width:310px;
		max-width:450px;
    	width: auto;	
	}
	
	#divMapCanvas {
		height:260px;
	}
	
}