/* Conditional Statements */
.mobile-only, .topmenu li.mobile-only, .mini-only{display: none}

/* Mid sized screen:  or ((max-device-width: 990px) and (orientation: landscape))*/
@media only screen and (max-width: 1010px) and (min-width: 20px){
	.container{
		width: calc(100% - 20px);
		background-size: 100% auto;
		overflow:hidden;
	}
}

@media only screen and (max-width: 985px) and (min-width: 20px)
{
	.logo a, .logo{
		background-size:100% auto;
		width: 350px;
		height: 150px;    
		margin: 5px 5px 0 0;
	}
	.trustmark{
		background-size:100% auto;
		width: 145px;
		height: 68px;
		margin-left: 10px; 
	}
	.dulux, .dulux a{
		width: 145px;
		height: 68px;
		margin-right: 0;
		background-size:100% auto;
	}
	.confidence, .confidence a{
		height: 68px; 
		width: 125px;
		background-size:100% auto; 
	}
	.contact{padding-top:20px}
}

@media only screen and (max-width: 955px) and (min-width: 20px)
{
	.thumbp{
		display:inline;
		font-size: 0;
	}
	.gallery_link{
		width: calc(33% - 20px) !important;
	}
	.thumbp a, .gallery_link{
		width: calc(33% - 20px);
		display: block;
		float: left;
		margin: 10px;
		font-size: 14px;
	}
	.thumbp a img{width: 100%}
	.thumbp a:last-child{margin: 10px}
	.rightcol{
		width:calc(66% - 20px);
		float: left;
		display: block;
	}
	.leftcol{
		width:calc(33% - 20px);
		float: left;
		display: block;
	}
	.leftcol img{
		width:100%;
		height: auto;
	}
	.article{height: inherit; min-height:inherit;}
}

/* Reduce the size of menu icons */
@media only screen and (max-width: 870px) and (min-width: 20px)
{
	.logo a, .logo{
		width: 250px;
		height: 85px;    
		margin: 15px 10px 0 0;
	}
	.trustmark, .trustmark a, .dulux, .dulux a{
		width: 100px;
		height: 58px;
		margin-top:0;
	}
	.confidence, .confidence a{
		height: 60px; 
		width: 117px;
		background-size: 100%;
	}
	.contact{padding-top:5px}
	.header{height:125px}
}

/* Switch to Mobile Menu */
@media all and (max-width: 710px) and (min-width: 20px){
	.header{height:150px}
	.header .trustmark, .header .dulux, .header .confidence, .header .contact{display:none}
	.trustmark, .dulux, .confidence{
		display: inline-block;
		float: none;
	}
	.mini-only{display:inherit}
	.logo, .logo a{
		background-position: center top;
    	background-size: auto 90%;
    	height: 125px;
    	width: 100%;
	}
	.dulux{
		clear: none;
		margin: 5px 10px 0 0;
	}
	.confidence, .confidence a{
		height: 60px; 
		width: 117px;
		background-size: 100%;
	}
	.contact{clear:both}
	.container .contact *{text-align:center}
	
	/* Top Menu */
  	body .topmenu{
  		height: inherit;
		min-height: inherit;
  	}
  	.topmenu li ul{
  		position: absolute;
		top: 0;
		width: 100%;
		padding: 7px 0;
		z-index: 100;
		background-color: #000;
  	}
	.topmenu li a{display:block}
  	.topmenu li:not(.mobile-only){
		display: none;
		padding-bottom: 10px;
	}
  	#showMenu span{display: none}
  	a#showMenu{
  		display: block;
		background-image: url(/images/icons/menu-icon.png);
		background-repeat: no-repeat;
		width: 35px;
		height: 30px;
		margin: 2px 12px;
  	}	
	a#showMenu:hover{
		background-color: inherit;
		border-radius: 0;
	}
	a#showMenu{
		display: block;
		width: 95%;
		height: 30px;
	}
	.topmenu *:hover ul li:first-child {
		background-image: none;
    	padding-top: 0;
	}
	ul.topmenu li.litab:nth-last-child(2) a{padding-bottom: 34px}
  	ul.topmenu, .topmenu ul{height: auto}
  	.topmenu ul li.open{
  		display: list-item;
		width: 100%;
  	}
	.topmenu li, .topmenu ul{
  		display: block;
		text-align: left;
		float: none;
		width: calc(100% - 5px);
  	}
  	.header .topmenu{
  		display:block;
		text-align:left;
  	}	
  	body .topmenu *:hover ul{top: 0}
  	.topmenu ul{
    	left:auto;
    	position: inherit;
    	top:auto;    
		padding:0;
		clear:both;
	}
	.topmenu *:hover ul{background-image: inherit}
	.topmenu li li a, .topmenu ul a{color:#FFF}
	.topmenu li.menu{
		width: 100%;
		clear: left;
		font-size: 24px;
		text-align: left;
	}
	.mobile-only, .topmenu li.mobile-only{
		display:inherit;
	}
	.thumbp a {
    	width: calc(50% - 20px);
		height: 200px;
	}
	.thumbp a img{height:190px}
	.rightcol, .leftcol{float: none}
	.rightcol{
		width: calc(100% - 20px);
		padding: 0 10px;
	}
	.leftcol{width: 100%}
	.leftcol img{
		width:100%;
		height: auto;
	}
}

@media all and (max-width: 660px) and (min-width: 20px){
	p{
		font-size:1em;
		line-height:1.1em;
	}
	select, .copy p, .copy p a, .buttonlink a, .buttonlink input[type="submit"], .buttonlink input[type="button"], 
	.buttonlink button, input, button{font-size: 1em}
	.copy {
    	background-position: 100% -11px;
    	padding: 40px 0 9px;
	}
	.copy, .copy *{font-size:14px}
	input.inputBig, textarea.inputBig, select.inputBig{width: calc(100% - 20px) !important}
	#loginform .small{
		clear: both;
		display: block;
	}
	.rightcol h2, .rightcol h2.sub{font-size:28px}
	.leftcol h3{font-size:20px}
}

/* Screen Size Below 536px: */
@media all and (max-width: 594px) and (min-width: 20px){
	#contactform .td{
		clear:both;
		float: left;
	}	
	#contactform input, #contactform textarea{
		width:100% !important
	}
}

@media all and (max-width: 450px) and (min-width: 20px){
    .logo,.logo a{ background-size: 95% auto }
	.thumbp a {
    	width: calc(100% - 20px);
		height: 250px;
	}
	.thumbp a img{height:250px}
	.footmenu ul{display:none}
	#recaptcha_widget_div{
		overflow: hidden;
		width: 100% !important;
	}
	.table{
		width: 100% !important;
	}
	.table, .tr, .td{display:inherit}
}
@media all and (max-width: 385px) and (min-width: 20px){
	.logo, .logo a {
    	height: 100px;
    	width: 95%; 
	}
	.header{height:120px}
	.gallery_link {
		width: 100% !important;
		margin:0;
	}
}