/* 	[ COPYRIGHT CONTEGRO  - Intelligent Website Content Management ]   */
/* 	[ http://www.contegro.com ]   */



/* -----[ TEMPLATE ]-------------------------------------------------------------------------- */

/*  
	Change Class Selectors and ID Selectors to reflect your Design as required.
	The aim of this file is create the 'Template' for your design.
	Such as: backgrounds, colours, borders, margins, padding.
	Alter the Property and Value to reflect your design as required.

	--Layouts
		The structure below is compliant with the current W3C standards. 
		The layout technique that is used is will allow for a liquid centre and fixed sides. 
		1.	Layout 1 - 3 column layout
		2.	Layout 2 - 2 column layout (left column #cLS)
		3.	Layout 3 - 2 column layout (right column #cRS)
		4.	Layout 4 - 1 column layout */

/* -----[ Main structure CSS]--------------------------------------------------------------------- */

* { -moz-outline-style: none;
	outline-syle: none;
	outline-width: 0px;
	outline-color: -moz-use-text-color;
	margin: 0px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	-webkit-font-smoothing: antialiased;
}

#mainWrapper img{
	/* max-width: 100%; */
	display: block;
}

#mainWrapper .HTMLContent img{
	display: initial;
}

.menuOpen{
	/* overflow: hidden;*/
}
/* -----[ STRUCTURE]------------------------------------------------------------------------------ */
/* === [ wrappers to set width ] === */
#outerWrapper {
	position: relative;
	margin: 0px auto;
	width: 100%;
	overflow-x: hidden;
}
	#mainWrapper:after {
		content: ".";
		display: block;
		height: 0;
		font-size: 0;
		clear: both;
		visibility: hidden;
    }
    #mainWrapper {
		display: inline-block;
		width: 100%;
		height: auto;
    }
    /* Hides from IE Mac \*/
    * html #mainWrapper {
       height: 1%; }
    #mainWrapper {
       display: block;
       padding: 0 0 0 90px;
       clear: both;
       position: relative;
   }
   .home  #mainWrapper {
		padding-bottom: 90px;
		}
    /* End hide from IE-mac */


/* === [ header ] === */
#cHWrapper {
	position: relative;
	display: block;
	clear: both;
	z-index: 1000;
	background: #000000;
	height: 100px;
	margin: 0 0 0 90px;
	width: -moz-calc(100% - 90px);
	width: -webkit-calc(100% - 90px);
	width: -o-calc(100% - 90px);
	width: calc(100% - 90px);
}
	
	/* === [ header banner ] === */
	#cB {
		position: relative;
		display: block;
		clear: none;
		width: 480px;
		padding: 0px;
		float: left;
	}

	/* === [ top  ] === */
	#cT {
		position: relative;
		display: block;
		clear: none;
		padding: 0px;
		float: right;
		text-align: right;
	}
	.memberLoggedin #cT .CustomCode{
		display: none;
	}
	/* === [ Main Navigation ] === */
	#cN {
		position: fixed;
		display: block;
		top: 100px;
		width: 90px;
		background: #000000;
		height: 100vh;
		z-index: 10;
	}
	#cSearch {
		position: fixed;
		top: 100px;
		left: -600px;
		height: 86px;
		width: 600px;
		z-index: 10;
		background: #ffbd00;
		padding: 25px 25px 0 85px;
		-webkit-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
	}
	.searchOpen #cSearch {
		left: 0;
	}

/* === [ Primary Container Wrapper ] === */
#cPCWrapper {
	float: left;
	width: 100%;
	padding: 44px 0;
	background: #ffffff url(/Templates/_images/BG-cPCWrapper.jpg) repeat-x top;
	min-height: 80vh;
	position: relative;
}
#cBC{
    position: absolute;
    top: 0;
    width: 100%;
}
.product-list #cBC{
	top: 80px;
}
.one-col #cPCWrapper,
.two-col #cPCWrapper {
	padding: 50px 0;
}
.scrolled-over-100 .two-col.product-list #cPCWrapper {
    margin:85px 0 0 0;
}
.scrolled-over-100 .Betterbuy .two-col.product-list #cPCWrapper {
    margin:0px 0 0 0;
}
#Heading{
	margin:0 0 50px 0
}
#PushboxWrapper + #cPCWrapper{
	padding: 44px 0;
}
.home #cPCWrapper {
	min-height: inherit
}
#cProductsWrapper{
	background: #ffffff url('/Templates/_images/BG-WoodWhite.jpg');
	background-size: contain;
	padding: 80px 0;
	overflow-x:hidden;
}
#productOtherOptionsWrapper{
    background: #ffffff url(/Templates/_images/BG-WoodWhite.jpg);
    background-size: cover;
    overflow-x: hidden;
}

#ProductNavWrapper {
	float: none;
	width: 100%;
	background: url(/Templates/_images/BG-Woodblack.jpg);
	background-attachment: fixed;
	/* min-height: 85px; */
	z-index: 3;
	position: relative;
}
.scrolled-over-100 #ProductNavWrapper {
	position:fixed;
	top:0;
	left: 45px;
}
#ProductNavWrapper .ProductNavigation{
	height:85px;
}
/* === [ Primary Container ] === */
#cPC {
	display: block;
}
.iFrame-Modal #cPC {
	padding:0 10px;
	height: 100%;
	overflow: scroll;
}
.layout2 #cPC /* 2 column layout (left column #cLS) */
{
		margin: 0 0 0 390px;
		float: left;
		width: 1100px;
		min-height: 50vh;
}
.emptyLHS .layout2 #cPC{
	margin:0;
	width:100%
}
#cPC .HTMLContent{
	display: block;
	padding: 0 0;
	margin: 0 0;
}
.section.hide{
	display: none;
}
.Inner{
	width: 1490px;
	margin:0 auto;
}
.home .Inner,
#productOtherOptionsWrapper .Inner{
	width: 1450px;
}
#section1Wrapper.section{
	padding: 42px 0 42px 0;
}
.product-list #section1Wrapper.section{
	padding: 130px 0 11px 0;
}
.HeaderBanner .product-list #section1Wrapper.section{
	padding: 42px 0 11px 0;
}
.section{
	/* padding: 44px 0; */
	clear: both;
	position: relative;
}
.section:after{
	visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}
.section.lightgrey{
}

.product-details #lHSproductHeader{
	padding: 100px 0 0 0;
	float: left;
	width: 1180px;
}
.product-details #rHSproductHeader{
	width:310px;
	float: right;
}
.product-details #lHSproductDetails{
	width: 1160px;
	float: left;
	max-height: 490px;
}
.Buildings .product-details #lHSproductDetails{
 max-height: 500px;
}
.product-details #rHSproductDetails{
	width:310px;
	float: right;
	height: 490px;
}
.product-details #rHSproductDetails > div:first-child{
	min-height: 490px;
}
.product-details #lHSproductDescription{
	width: 1160px;
	min-height: 300px;
	float: left;
	padding: 0 00 0;
}
.product-details #rHSproductDescription{
	width:310px;
	float: right;
}
.product-details #productHeaderWrapper{
	padding: 10px 0 0;
	width: 100%;
	background: #ffffff url(/Templates/_images/BG-cPCWrapper.jpg) repeat-x top;
}
.Buildings #productDetailsWrapper{
	padding: 0px 0;
	-moz-box-shadow:    inset  0  25px 25px -25px #e8e8e8, 
                        inset  0 -25px 25px -25px #e8e8e8;
	-webkit-box-shadow: inset  0  25px 25px -25px #e8e8e8, 
                        inset  0 -25px 25px -25px #e8e8e8;
	box-shadow: inset  0  25px 25px -25px #e8e8e8,                           inset  0 -25px 25px -25px #e8e8e8;
}
.product-details #productDescriptionWrapper{
	padding: 16px 0;
}

/* === [ Left Side Column ] === */
#cLS {
    float: left;
    margin-left: -100%;
    width: 340px;
    padding: 0px 50px 45px 0;

}

/* === [ Right Side Column ] === */
#cRS {
	float: right;
	margin-left: -100%;
	width: 230px;
	padding: 10px
}

/* === [ footer ] === */
#cFWrapper{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1b435b+0,1b435b+50,000000+50,000000+100 */
	background: rgb(27,67,91); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(27,67,91,1) 0%, rgba(27,67,91,1) 50%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(27,67,91,1) 0%,rgba(27,67,91,1) 50%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(27,67,91,1) 0%,rgba(27,67,91,1) 50%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b435b', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
	color: #ffffff;
	margin: 0;
	padding: 0 0 0 0;
}
.home #cFWrapper{
	position:fixed;
	bottom:0;
	left: 90px;
	width: calc(100% - 90px);
	z-index: 5;
}
#cFWrapper:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}
#cF{
	position: relative;
	width: 100%;
	margin: 0px 0;
	width: 100%;
}

#cFContact{
	float: right;
	margin: 0 0 0 130px;
	width: 200px;
}
/* === [ copyRight ] === */
#cC {
	position: relative;
	display: none;
	clear: both;
	padding: 70px 0 0 0;
	font-size: 11px;
	color: #80a1ac;
}
	#cC a {

		border-bottom: 1px #999999 dotted;
		text-decoration: none;
	}
	#cC a:hover {
		border-bottom: 1px #CCCCCC dotted;
	}


/* -----[ Modal ]-------------------------------------------------------------------------- */
#iframeContainer {
	padding: 2em 2em 1em 2em;
}


	#cIframeContents {
		clear: both;
		margin-top: 1em;
	}
	
body.modal-open {
	    overflow: hidden;
	}


@media screen and (max-height: 505px) { #cIframeContents { margin-top: 0.5em; } }

#ModalCloseButton {
	width: 40px;
	height: 40px;
	background: none;
	border-radius: 0 5px 0 5px;
	background:url(/Templates/_images/Modal-Close.png) center no-repeat;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 10200;
	margin-left: 465px;
	margin-top: -440px;
	cursor: pointer;
	box-sizing: border-box; /* these three lines mean that I can set padding on this div without affecting the width + height */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	opacity:1;
}
	#ModalCloseButton:hover {

	}
	#ModalCloseButton:active {

	}
	#ModalCloseButton.hidden {
		top: -100%;
		opacity:0;
		-webkit-transition: opacity 1s 0s;
		   -moz-transition: opacity 1s 0s;
		        transition: opacity 1s 0s;	
	}

#ModalIframe,
#EnquiryIframe {
	width: 1000px;
	height: 800px;
	position: fixed;
	overflow: hidden;
	top: 50%;
	left: 50%;
	z-index: 10100;
	margin-left: -500px;
	margin-top: -400px;
	box-shadow: 0 0 2em black;
	 /* has to be scroll, not auto */
	-webkit-overflow-scrolling: touch;
	border: 5px #ffffff solid;
	/* border-radius: 5px; */
	padding: 0;
	background: white;
	box-sizing: border-box; /* these three lines mean that I can set padding on this div without affecting the width + height */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	opacity:1;
}

	@media screen and (max-width: 1024px) {
		#ModalIframe, #EnquiryIframe {
			width: 100%;
			height:100vh;
			margin:0;
			top:0;
			left:0;
		}
		#ModalCloseButton {
			width: 40px;
			height: 40px;
			background: none;
			border-radius: 0 5px 0 5px;
			background: url(/Templates/_images/Modal-Close-Black.png) center no-repeat;
			position: fixed;
			top: 10px;
			left: inherit;
			right:10px;
			z-index: 10200;
			margin-left: 0;
			margin-top: 0;
			cursor: pointer;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			opacity: 1;
		}

	}

	#ModalIframe iframe,
	#EnquiryIframe iframe {
		width: 100%;
		height: 100%;
	}

	#ModalIframe.hidden,
	#EnquiryIframe.hidden {
		top: -100%;
		box-shadow: none;
		border-radius: 0;
		opacity:0;
		-webkit-transition: opacity 1s 0s;
		   -moz-transition: opacity 1s 0s;
		        transition: opacity 1s 0s;		
	}


#ModalIframeShadow,
#EnquiryIframeShadow {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: black;

	z-index: 10000;
	opacity: 0.6;
  	filter: alpha(opacity = 60);

	-webkit-transition: opacity 0.5s;
	   -moz-transition: opacity 0.5s;
	        transition: opacity 0.5s;
}
	#ModalIframeShadow.hidden,
	#EnquiryIframeShadow.hidden {
		opacity: 0;
		height: 0;
	  	filter: alpha(opacity = 0);
	  	background: black;

		-webkit-transition: opacity 0.5s, height 0s 0.5s;
		   -moz-transition: opacity 0.5s, height 0s 0.5s;
		        transition: opacity 0.5s, height 0s 0.5s;
	}	

/* -----[  ]------------------------------------------------------------------------------- */

.contegro_ie6 #cRS,
.contegro_ie7 #cRS {
	margin-left: -250px;
}

/* -----[ Clearings ]-------------------------------------------------------------------------- */

.clearLeft,
.clear
{
	height: 0;
	font-size: 0;
	line-height: 0;
}

.clearLeft {
	clear: left;
}
.clear {
	clear: both;
}

/* -----[ Browser Specific Classes ]----------------------------------------------------------- */

/*
	Contegro will add several class names to the <form> tag surrounding the page depending on
	what browser the site is being viewed with. This can be used to make small style changes which
	only affect specific browsers, or even specific browser versions.

	These include the browser name, for example (but not limited to)...
*/
.contegro_chrome {}
.contegro_firefox {}
.contegro_ie {}
.contegro_safari {}
/*
	... the browser version, for example (but not limited to)...
*/
.contegro_ie6 {}
.contegro_ie7 {}

.contegro_ie8 {}
.contegro_ie9 {}
.contegro_firefox4 {}
.contegro_firefox5 {}
/*
	... and mobile information, for example ...
*/
.contegro_mobile {}
.contegro_tablet {}
.contegro_ipad {}
.contegro_ios {}
.contegro_android {}
.contegro_windowsphone {}
.contegro_othermobile {}
/* 
	Please view the source of a Contegro page with different browsers to see the specific classes for
	each browser configuration. Some examples of classes that will be added to the surrounding form
	for different browsers are...

	*** Internet Explorer 6 ***
	<form class="contegro_ie6 contegro_ie">

	*** Firefox 7 ***
	<form class="contegro_firefox7 contegro_firefox">

	*** The iPhone browser ***

	<form class="contegro_mobile contegro_ios">




*/

/* -----[ Printing ]-------------------------------------------------------------------------- */

@media print {
	#cHWrapper,
	.menuIconWrapper,
	#memberNavigationWrapper,
	#PushboxWrapper,
	#cFWrapper,


	#cArticlesWrapper,
	.articleShare,
	#newsletterWrapper,
	.ProductList .ListSelect,
	.CustomCode .backtoList,
	#rHSproductHeader .ProductDetails,
	#rHSproductHeader .CustomCode,
	.ListQuantity,
	.ProductDetails .ListSelect,
	#productCommonAccessories,
	#productOtherOptions,
	#at-expanded-menu-host   {
		display:none !important
	}
	#cRS, #cLS, #cTL, #cS, #cT, #cB, #cH, #cN {
		display: none;
	}
	#mainWrapper {
		display: block;
		padding: 0 0 0 0;
	}
	.Inner {
		width: 100% !important;
	}
	.owl-wrapper{
		width: 100% !important;
	}
	.owl-item{
		width: auto !important; 
		margin: 0 20px 0 0 !important;
	}
	.ProductList .ListItem {
	    width: 300px;
	    height: 330px;
	    float: left;

	}
	.product-details #lHSproductDetails,
	.product-details #rHSproductDetails,
	.product-details #lHSproductDescription,
	.product-details #rHSproductDescription {
	    width: 100%;
	    float: none;
	    height: auto !important;
	    min-height: inherit !important;
	}
	#rHSproductDetails .ProductDetails {
	    padding: 0 0 0 0 !important;
	    width: 100% !important;
	    margin: 0 auto;
	    padding: 0;
	}
	.product-details #rHSproductDescription  .ProductActions,
	.product-details #rHSproductDescription  .CustomCode{
		display: none;
	}
	#cPC {
			margin: 0px;
			padding: 0px 0px 20px 0px;
			border-top-style: none;
			border-left-style: none;
		}
		.layout1 #cPC /* 3 column layout */
		{
			margin: 0px;
			padding: 0px 0px 20px 0px;
		}
		.layout2 #cPC /* 2 column - left */
		{
			margin: 0px;
			padding: 0px 0px 20px 0px;
		}
		.layout3 #cPC /* 2 column - right */
		{
			margin: 0px;
			padding: 0px 0px 20px 0px;
		}
		.layout4 #cPC /* 1 column */
		{
			margin: 0px;
			padding: 0px 0px 20px 0px;
		}
}