body 
{
	margin: 10px;
	font-family: 'Arial', sans-serif;
	color: #3e3e3e;
}

/* WORKHOUSE CONTENT */

#cms-content *
{
	box-sizing: border-box;
}

#cms-content .wrapper
{
	margin: 15px auto 0;
	width: 683px;
	font-size: 16px;
}

#cms-content .visible-xs
{
	display: none !important;
}

#cms-content .brand-color
{
	color: #00927b;
}

#cms-content h1,
#cms-content h2,
#cms-content h3,
#cms-content h4
{
	margin-top: 0;
}

#cms-content h1
{
	margin-bottom: 20px;
	color: #00927b;
	font-size: 30px;
	line-height: 34px;
}

#cms-content h2 
{
	margin-bottom: 20px;
	font-size: 22px;
	line-height: 24px;
}

#cms-content h4
{
	margin-bottom: 20px;
	font-size: 18px;
	line-height: 20px;
}

#cms-content .wrapper > h4
{
	text-transform: uppercase;
	margin-bottom: 5px;
}

#cms-content .text 
{
	display; block;
	float: left;
	font-size: 12px;
}

#cms-content img 
{
	max-width: 100%;
	height: auto;
}

#cms-content .box-row 
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#cms-content .full-width 
{
	margin: 15px 0;
	width: 100%;
}

#cms-content .half-width 
{
	display: flex;
	margin: 15px 0;
	width: 48%;
}

#cms-content .third-width 
{
	display: flex;
	margin: 15px 0;
	width: 31%;
}

#cms-content .box-green
{
	background-color: #00927b;
	color: #fff;
	padding: 30px;
	font-size: 12px;
}

#cms-content button 
{
	padding: 3px 5px 4px;
	border: 1px solid #c0c0c0;
	border-radius: 4px;
    border-top-color: #dfdfdf;
	background: #ededed url('http://www.staxtradecentres.co.uk/assets/images/but_bkgd.gif') repeat-x;
    color: #00927b;
    font: bold 11px Verdana, Geneva, sans-serif;
	cursor: pointer;
}

#cms-content button .contents
{
	padding-right: 15px;
    background: url('http://www.staxtradecentres.co.uk/assets/images/arrow_r_green.gif') no-repeat right 3px;
}

#cms-content .video 
{
	margin: 30px 0;
}

#cms-content .video iframe
{
	width: 100%;
	height: 315px;
}

#cms-content .center-img
{
	position: relative;
}

#cms-content .center-img .box-content
{
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
}

#cms-content .faq-tcs
{
	margin-top: 30px;
	margin-bottom: 30px;
	text-align: right;
	font-size: 10px;
}

/* WORKHOUSE CLICK AND COLLECT */

#wh-click-and-collect .wrapper > h4 
{
	text-transform: none;
	margin-bottom: 20px;
}

#wh-click-and-collect h4
{
	color: #00927b;
	font-size: 16px;
}

#wh-click-and-collect h4.black 
{
	color: #000;
	margin: 0;
}

#wh-click-and-collect .text 
{
	margin: 30px 0;
	font-size: 20px;
}

#wh-click-and-collect .banner 
{
	position: relative;
	background: #bfbfbf; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(45deg, #bfbfbf, #fff); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(45deg, #bfbfbf, #fff)); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(45deg, #bfbfbf, #fff)); /* For Firefox 3.6 to 15 */
	background: linear-gradient(45deg, #bfbfbf, #fff); /* Standard syntax */
}

#wh-click-and-collect .banner .banner-roundel 
{
	padding: 20px; 
}

#wh-click-and-collect .banner .banner-roundel img 
{
	width: auto;
}

#wh-click-and-collect .banner .banner-text 
{
	position: absolute;
	top: 55px;
	left: 275px;
	width: 400px;
	font-size: 36px;
	font-weight: bold;
}

#wh-click-and-collect .banner .banner-bottom img
{
	width: 100%;
	vertical-align: bottom;
}

#wh-click-and-collect table tr 
{
	display: block;
	margin-bottom: 30px;
	font-size: 16px;
}

#wh-click-and-collect td:nth-child(1)
{
	width: 10%;
	vertical-align: top;
}

#wh-click-and-collect .faq-header
{
	position: relative;
	margin: 30px 0;
	padding: 15px;
	background: #00927b;
	color: #fff;
	font-size: 26px;
	font-weight: bold;
}

#wh-click-and-collect .faq-header img 
{
	position: absolute;
	top: 10px;
	right: 15px;
}

/* WORKHOUSE HOW TO USE WEBSITE */

#wh-how-to-use-website .features
{
	margin-top: 45px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	font-size: 14px;
}

#wh-how-to-use-website .features .half-width
{
	display: block;
}

#wh-how-to-use-website .features .half-width .features-box:last-child
{
	border: 0;
}

#wh-how-to-use-website .features .half-width:last-child .features-box:last-child
{
	color: #00927b;
	font-weight: bold;
}

#wh-how-to-use-website .features-box
{
	display: flex;
	padding-bottom: 25px;
	margin-bottom: 25px;
	width: 100%;
	border-bottom: 1px solid #ececec;
}

#wh-how-to-use-website .features-img-wrap
{
	display: inline-block;
	position: relative;
	margin-right: 20px;
	width: 36px;
	text-align: center;
}

#wh-how-to-use-website .features-img-wrap img
{
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0,-50%);
}

#wh-how-to-use-website .features-text-wrap
{
	display: inline-block;
	position: relative;
	width: 100%;
}

#wh-how-to-use-website .features-text 
{
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0,-50%);
}

#wh-how-to-use-website .video
{
	margin: 15px 0;
}

#wh-how-to-use-website .box-green h4
{
	color: #fff;
}

/* WORKHOUSE STAX WAGNER */

#wh-stax-wagner .full-width 
{
	margin: 0 auto;
	width: auto;
}

#wh-stax-wagner .box-content 
{
	position: relative;
	color: #fff;
	font-size: 20px;
}

#wh-stax-wagner .box-content .logos 
{
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translate(-50%,0);
}

#wh-stax-wagner .box-content .content 
{
	position: absolute;
	top: 520px;
	left: 0;
	margin: 0 20px;
	padding: 0 80px;
	text-align: center;
}

#wh-stax-wagner .box-content .content h2 
{
	color: #fff;
	font-size: 36px;
	line-height: normal;
}

#wh-stax-wagner .box-content .content .orange 
{
	color: #eea904;
}

#wh-stax-wagner .box-content .content h2.shadow 
{
	text-shadow: 2px 2px 4px #000;
}

#wh-stax-wagner .box-content .content .button
{
	display: inline-block;
	padding: 10px 20px;
	border: 2px solid #eea904;
	border-radius: 5px;
	color: #eea904;
	font-size: 12px;
	text-transform: uppercase;
	text-decoration: none;
}

#wh-stax-wagner .t-cs 
{
	margin: 20px 0;
	text-align: center;
	font-size: 12px;
}

#wh-stax-wagner .t-cs a,
#wh-stax-wagner .t-cs a:hover,
#wh-stax-wagner .t-cs a:focus,
#wh-stax-wagner .t-cs a:active
{
	color: #000;
}

/* WORKHOUSE BOSTIK PROMO */

#wh-bostik-promo a
{
	color: #000;
	font-size: 14px;
}

#wh-bostik-promo .header
{
	position: relative;
	padding: 40px;
	height: 500px;
	background: #ffdb00 url('http://resources.madeatworkhouse.com/stax-website/cms/articles/images/bostik-background.gif') no-repeat right;
}

#wh-bostik-promo .header h1
{
	color: #fff;
	font-size: 64px;
	line-height: 60px;
}

#wh-bostik-promo .description
{
	position: absolute;
	bottom: 40px;
	left: 40px;
	width: 210px;
	color: #000;
	font-size: 20px;
	line-height: 20px;
	font-weight: bold;
}

#wh-bostik-promo .tour-de-france
{
	position: absolute;
	bottom: 40px;
	left: 250px;
	width: 140px;
}

#wh-bostik-promo .bike .half-width
{
	position: relative;
}

#wh-bostik-promo .bike .half-width .text
{
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0,-50%);
	font-size: 14px;
	font-weight: bold;
	text-align: right;
}

#wh-bostik-promo .footer
{
	padding: 20px;
	background: #ffdb00;
	color: #000;
	font-size: 14px;
	line-height: 12px;
	text-align: center;
}

@media screen and (max-width: 979px) 
{
	
	#cms-content .wrapper
	{
		width: 100%;
	}
	
	/* WORKHOUSE BOSTIK PROMO */
	
	#wh-bostik-promo .header 
	{
		background-size: cover;
	}
	
}

@media screen and (max-width: 725px) 
{
	
	#cms-content .wrapper
	{
		margin: 5px auto 0;
	} 
	
	#cms-content .hidden-xs
	{
		display: none;
	}
	
	#cms-content .visible-xs
	{
		display: block !important;
	}
	
	#cms-content .mob-center
	{
		text-align: center;
	}
	
	#cms-content .half-width 
	{
		width: 100%;
	}
	
	#cms-content .third-width 
	{
		width: 48%;
	}
	
	#cms-content .center-img .box-content
	{
		position: static;
		transform: none;
		margin: 0 auto;
	}
	
	/* WORKHOUSE CLICK AND COLLECT */
	
	#wh-click-and-collect .text 
	{
		text-align: center;
	}
	
	#wh-click-and-collect .banner .banner-roundel 
	{
		text-align: center;
	}
	
	#wh-click-and-collect .banner .banner-roundel img 
	{
		max-width: 175px;
	}
	
	#wh-click-and-collect .banner .banner-text 
	{
		position: static;
		padding: 0 20px 20px;
		width: 100%;
		text-align: center;
		font-size: 30px;
	}
	
	#wh-click-and-collect .instructions td:nth-child(1)
	{
		display: block;
		width: 100%;
		text-align: center;
	}
	
	#wh-click-and-collect .instructions td:nth-child(2)
	{
		display: block;
		margin-top: 20px;
		width: 100%;
		text-align: center;
	}
	
	#wh-click-and-collect .faq tr:last-child
	{
		margin-bottom: 10px;
	}
	
	#wh-click-and-collect .faq td:nth-child(1)
	{
		width: 75px;
	}
	
	/* WORKHOUSE HOW TO USE WEBSITE */
	
	#wh-how-to-use-website button
	{
		margin-bottom: 15px;
	}
	
	#wh-how-to-use-website .features .half-width
	{
		margin: 0;
	}
	
	#wh-how-to-use-website .features .half-width:first-child .features-box:last-child
	{
		border-bottom: 1px solid #ececec;
	}
	
	#wh-how-to-use-website .features .half-width:last-child .features-box:last-child
	{
		margin-bottom: 0px;
	}
	
	/* WORKHOUSE YOU CAN ALSO READ LATEST NEWS */
	
	#wh-you-can-also-read-latest-news .half-width:last-child .box-content
	{
		margin: 0 auto;
	}
	
	/* WORKHOUSE STAX WAGNER */
	
	#wh-stax-wagner .box-content
	{
		height: 1050px;
		background: #000;
		font-size: 18px;
	}
	
	#wh-stax-wagner .box-content .logos 
	{
		position: absolute;
		top: 20px;
		left: 50%;
		transform: translate(-50%,0);
	}

	#wh-stax-wagner .box-content .content 
	{
		position: absolute;
		top: 500px;
		left: 0;
		margin: 0 20px;
		padding: 0 20px;
		text-align: center;
	}
	
	/* WORKHOUSE BOSTIK PROMO */
	
	#wh-bostik-promo .header 
	{
		padding: 20px 20px 0;
		height: 270px;
		background-size: contain;
	}
	
	#wh-bostik-promo .header h1
	{
		padding-right: 50px;
		font-size: 36px;
		line-height: 34px;
	}
	
	#wh-bostik-promo .header .bostik
	{
		width: 120px;
	}
	
	#wh-bostik-promo .header-text
	{
		display: flex !important;
		padding: 20px;
		margin-top: -35px;
		background: #ffdb00;
	}
	
	#wh-bostik-promo .header-text .text
	{
		display: inline-block;
		width: 70%;
		font-size: 16px;
		font-weight: bold;
	}
	
	#wh-bostik-promo .header-text .logo
	{
		display: inline-block;
		width: 25%;
		text-align: right;
	}
	
	#wh-bostik-promo .header-text .logo img
	{
		max-width: 100%;
	}
	
	#wh-bostik-promo .header-text .logo .tour-de-france
	{
		position: static;
	}
	
	#wh-bostik-promo .bike .half-width img
	{
		margin: 15px auto 0;
	}
	
	#wh-bostik-promo .bike .half-width .text
	{
		position: static;
		transform: none;
		text-align: center;
	}
	
}

@media screen and (max-width: 567px) 
{

	#cms-content .third-width 
	{
		width: 100%;
	}
	
	#cms-content .box-green
	{
		padding: 20px;
	}
	
	#cms-content .faq-tcs
	{
		text-align: center;
		font-size: 12px;
	}
	
	/* WORKHOUSE CLICK AND COLLECT */
	
	#wh-click-and-collect .banner .banner-text 
	{
		font-size: 28px;
	}
	
	#wh-click-and-collect .faq-header
	{
		margin: 0 0 30px;
	}
	
	/* WORKHOUSE STAX WAGNER */

	#wh-stax-wagner .box-content 
	{
		height: 950px;
		background: #000;
	}
	
	#wh-stax-wagner .box-content .content
	{
		top: 400px;
	}
	
	#wh-stax-wagner .box-content .content h2 
	{
		font-size: 24px;
	}
	
}

@media screen and (max-width: 414px) 
{
	
	/* WORKHOUSE STAX WAGNER */
	
	#wh-stax-wagner .box-content 
	{
		height: auto;
		background: #000;
		font-size: 12px;
	}

	#wh-stax-wagner .box-content .logos 
	{
		top: 15px;
	}

	#wh-stax-wagner .box-content .content 
	{
		top: 52%;
		padding: 0;
	}

	#wh-stax-wagner .box-content .content h2 
	{
		font-size: 16px;
		margin-bottom: 14px;
	}
	
}

@media screen and (max-width: 375px) {
	
	/* WORKHOUSE STAX WAGNER */
	
	#wh-stax-wagner .box-content
	{
		height: 600px;
	}
	
	#wh-stax-wagner .box-content .content 
	{
		top: 42%;
	}
}