/************************************************************************
/*
/* MOBILE - SINGLE COLUMN
/*
/************************************************************************/

#wrapper {
	min-height:100%;
	min-width: 30.5rem;
	position:relative;
}

#wrapper-header {
	width:100%;
	z-index:99
}

.header-content {
	height:auto;
	margin:0 auto;
	position:relative;
	width:100%;
	text-align: center;
	border-bottom:.8rem solid #024b92;
	-webkit-box-shadow:0 0 .3rem #555;
	-moz-box-shadow:0 0 .3rem #555;
	box-shadow:0 0 .3rem #555;
	box-sizing: content-box;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
}

.header-left {
	float: none;
}

.header-right {
	//display: none;
}

.footer-logo {
	max-height: 2rem;
}

.logo-tradenet {
	width:auto;
	z-index:1;
	margin:2.5rem 0 2rem;
	max-height: 3rem;
}

.login-details {
	font-size:1.1rem;
	position:relative;
	top:0rem;
	text-align:center;
	width:100%;
	line-height: 1.4rem;
	padding: .5rem .2rem;
}

.company-logo {
	float:right;
	width:30rem;
	text-align:right;
	height:5rem;
	display: none;
}

div.center {
	display:block;
	margin:0 auto;
	text-align: center;
}

#wrapper-content {
	width:100%;
	padding-bottom: 12rem;
}

.main-content-wrapper {
	margin:2rem 1.5rem;
}

.page-title {
	margin: 0 0 1rem 0;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: 200;
	font-size: 3.6rem;
}


/************************************************************************
/*
/* FOOTER
/*
/************************************************************************/
#wrapper-footer {
	width:100%;
	height:9rem;
	position:absolute;
	bottom:0;
	left:0;
	background-color:#000;
	color:#fff;
	font-size:1.2rem;
	font-weight: 400;
}

#footer-center {
	margin-top: 1rem;
	display:inline-block;
	text-align:center;
	width:100%;
	font-size: 1rem;
}

/************************************************************************
/*
/* MAIN NAV MENU
/*
/************************************************************************/
#nav {
	font-family:'Open Sans',Arial,Helvetica,sans-serif;
	font-weight: normal;
	z-index:99;
	height: auto;
}

.btn_container {
	float:right;
	padding-top:2rem;
	width:14.5rem
}

.login-btn-container {
	padding-top:2rem;
	width:100%;
	margin: 0 auto 2rem auto;
	max-width: 18rem;
}

.btn {
	vertical-align:top;
	width:100%;
	height:4rem;
	padding:0;
	font-size:1.8rem;
	font-family:'Open Sans',Arial,Helvetica,sans-serif;
	font-weight: 300;
	color:#fff;
	text-align:center;
	background:#024b92;
	border:0;
	cursor:pointer;
}

/*******************************************************************************
/
/ NOTICES
/
/******************************************************************************/
#notices {
	padding:0;
	clear:both;
	color:#fff;
	border-image:initial;
	margin:0 auto 2rem auto;
	width: 70%;
	max-width: 31.2rem;
	min-width: 26.7rem;
	font-size: 1.4rem;
}

.errors {
	background-color:#ffdada;
	border:.1em solid red;
	color:red;
	padding:.3em 1rem;
	font-size:1.4rem;
	text-align: center;
	list-style-type: none;
}

.errors p {
	margin:0;
	text-align: center;
}

.messages {
	background-color:#dcefe3;
	border:.1em solid #007236;
	color:#007236;
	padding:.3em 1rem;
	list-style-type: none;
}

.warning {
	background-color:#FFF7E1;
	border:.1rem solid #FFB300;
	color:#FFB300;
	padding:1rem;
	list-style-type: none;
}

.warning p {
	margin:0;
	text-align: center;
}

.messages p {
	margin:0;
	text-align: center;
}

.down-arrow-icon {
	background: url(/assets/images/down-arrow-circle-blue.png);
	background-repeat: no-repeat;
	background-size: 16px;
	background-position: 1px;
	cursor: pointer;
}

.up-arrow-icon {
	background: url(/assets/images/up-arrow-circle-blue.png);
	background-repeat: no-repeat;
	background-size: 16px;
	background-position: 1px;
	cursor: pointer;
}

/*******************************************************************************
/
/ RESPONSIVE COLUMNS - 1 COLUMN VIEW (3 COLUMNS LAYOUT)
/
/******************************************************************************/

#colmask-3col {
	overflow:hidden
}

#colmid-3col,
#colleft-3col {
	clear:both;
	float:none;
	position:relative;
	width:100%
}

#col1-3col,
#col2-3col,
#col3-3col {
	position:relative
}

.left-container {
	margin-right:0rem;
}

.right-container {
	margin-left:0rem;
}

/*******************************************************************************
/
/ RESPONSIVE SUB COLUMNS - 1 COLUMN VIEW (3 COLUMNS LAYOUT)
/
/******************************************************************************/

.resp-col {
	overflow: hidden;
	margin-bottom: 2rem;
	width: 100%;
}

.col {
	//background:#f7f4f4;
	border: 1px solid #eaeaea;
}

.resp-content {
	padding:1rem;
	text-align:center;
}

/*******************************************************************************
/
/ RESPONSIVE COLUMNS - 2 COLUMN VIEW (2 COLUMNS LAYOUT)
/
/******************************************************************************/



/*******************************************************************************
/
/ PRODUCT LIST
/
/******************************************************************************/

.featured-product {
	text-align: center;
	padding: 0.2rem;
	box-sizing: border-box;
}

.featured-product-image-container {
	white-space: nowrap;
	max-height: 20rem;
	min-height: 20rem;
	height: 20rem;
}

.featured-product img {
	max-width: 100%;
	max-height: 16rem;
	vertical-align: middle;
}

.featured-product-logo-container {
	white-space: nowrap;
	margin: 1.25rem 1rem 2rem 1rem;
	max-height: 8rem;
	min-height: 8rem;
	height: 8rem;
}

.featured-product-logo-container img {
	max-width: 100%;
	max-height: 8rem;
	vertical-align: middle;
}

.featured-product-title {
	font-size: 1.4rem;
	margin: 0.5rem;
}

/*******************************************************************************
/
/ PRODUCT LIST
/
/******************************************************************************/

.range_indicator {
	width: 3rem;
	min-width: 1.5rem;
	max-width: 3rem;
	display: inline-block;
	min-height: 9.4rem;
	vertical-align: middle;
	height: 100%;
}

.range_a {
	background-color: #0db14b; 
	border-right: .5rem solid #079747; 
}

.range_b {
	background-color: #f2b11c; 
	border-right: .5rem solid #f99f1b; 
}

.range_c {
	background-color: #b7519e; 
	border-right: .5rem solid #7e4e9f; 
}

.range_o {
	background-color: #4f9fd7; 
	border-right: .5rem solid #3967b1; 
}

.range_u {
	background-color: #a7a9ac; 
	border-right: .5rem solid #808285; 
}

.range_p {
	background-color: #024b92; 
	border-right: .5rem solid #02386c; 
}

.range_x {
	background-color: #ED1B2E; 
	border-right: .5rem solid #B21427; 
}

.range_t {
	background-color: #00E2B5; 
	border-right: .5rem solid #00BF98; 
}

.range-indicator-large {
	display: inline-block;
	vertical-align: middle;
	height: 3rem;
}

.range-a-large {
	background-color: #0db14b; 
	border-bottom: .5rem solid #079747; 
}

.range-b-large {
	background-color: #f2b11c; 
	border-bottom: .5rem solid #f99f1b; 
}

.range-c-large {
	background-color: #b7519e; 
	border-bottom: .5rem solid #7e4e9f; 
}

.range-o-large {
	background-color: #4f9fd7; 
	border-bottom: .5rem solid #3967b1; 
}

.range-u-large {
	background-color: #a7a9ac; 
	border-bottom: .5rem solid #808285; 
}

.range-p-large {
	background-color: #024b92; 
	border-bottom: .5rem solid #02386c; 
}

.range-x-large {
	background-color: #ED1B2E; 
	border-bottom: .5rem solid #B21427; 
}

.range-t-large {
	background-color: #00E2B5; 
	border-right: .5rem solid #00BF98; 
}

.product-row {
	width: 100%;
	padding: .2rem;
	border: 1px solid #eaeaea;
	background: #fff;
	min-height: 9.4rem;
	margin-bottom: .3rem;
	box-sizing: border-box;
	display: table;
	height: 100%;
}

.promotion-row {
	border: 2px solid #024b92;
}

.product-row:hover {
	background-color: #eaeaea;
}

.no-results {
	width: 100%;
	font-size: 1.6rem;
	margin-bottom: .3rem;
	margin-top: 2rem;
	border: none;
}

.no-results:hover {
	background-color: #fff;
}

.product-image {
	max-width: 15rem;
	min-width: 11.4rem;
	text-align: center; 
	white-space: nowrap;
	margin: 0 1rem;
	text-align: center;
	display: inline-block;
}

.product-image-dummy {
	display: inline-block; 
	height: 100%; 
	vertical-align: middle;
	width: 0;
	margin: 0;
	padding: 0;
}

.product-image img {
	vertical-align: middle;
	max-width: 9.4rem;
	max-height: 8.5rem;
}

.product-row-left-column {
	display: table-cell;
	min-width: 18rem;
	max-width: 18rem;
}

.product-row-right-column {
	display: table-cell;
	/*min-width: 18rem;*/
	max-width: 10rem;
	text-align: center;
	padding: 5px;
	vertical-align: middle;
}

.product-row-left-column-promotion {
	display: table-cell;
	min-width: 7rem;
	max-width: 7rem;
}

.promotion-image img {
	vertical-align: middle;
	max-width: 5rem;
	max-height: 9.4rem;
}

.product-desc {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
}

.product-item-prices{
	width: 100%;
}

.product-item-prices h5 {
	margin: 1rem 0;
}

.product-price-value-poa {
	font-size: 1.6rem;
}

.product-price-value {
	font-size: 2rem; 
	font-family: 'Open Sans', Arial, Helvetica, Sans-serif;
	font-weight: 600;
}

.product-supplier-logo {
	display: inline-block;
	max-width: 20rem;
}

.product-supplier {
	display: inline-block;
	font-family: 'Open Sans', Arial, Helvetical, sans-serif;
	font-weight: normal;
	font-size: 1.1rem;
	line-height: 1.4rem;
}

.product-title {
	color: #333; 
	margin: 1rem 0;
	vertical-align: middle;
}

#preview {
	position:absolute;
	border:1px solid #ddd;
	background:#eaeaea;
	padding:3px;
	display:none;
	color:#fff;
	max-width: 30rem;
	max-height: 30rem;
	box-sizing: content-box;
}

#preview img {
	max-width: 30rem;
	max-height: 30rem;
	vertical-align: bottom;
}


/*******************************************************************************
/
/ FEATURED PRODUCT LIST
/
/******************************************************************************/

.large_featured {
	width: 100%; 
	margin: 2rem 0;
}

.large_featured img {
	width: 100%; 
	height: auto; 
	max-height: 30rem;
}

/*******************************************************************************
/
/ SIDEBARS
/
/******************************************************************************/
.filter-container {
	display: block; 
	min-height: 25px; 
	background: #fff; 
	margin-bottom: 1rem; 
	padding: .5rem;
	border: 1px solid #eaeaea;
}

.filter-container h5 {
	margin: .4rem 0 0 0;
}

.filter-panel {
	float: right; 
	width: 2rem; 
	text-align: right; 
	margin-top: .4rem; 
	min-height: 2rem;
}

.sidebar-heading {
	margin-top: 2rem;
}

.sidebar-partner-container {
	display: inline-block; 
	margin-bottom: 0.5rem; 
	min-height: 50px;
	width: 100%;
}

.sidebar-partner-logo {
	display: inline-block; 
	float: left; 
	width: 10rem; 
	background: #fff; 
	margin-right: 0.2rem; 
	padding: 0.5rem; 
	text-align: center; 
	height: 5rem; 
	white-space: nowrap;
	border: 1px solid #eaeaea;
}

.sidebar-partner-logo img {
	max-height: 9rem; 
	max-width: 8.5rem; 
	vertical-align: middle;
}

.image-center {
	display: inline-block; 
	height: 100%; 
	vertical-align: middle;
	width: 0;
	margin: 0;
	padding: 0;
}

.sidebar-partner-details {
	overflow: hidden;
}

.sidebar-partner-details a {
	color: #fff;
	text-decoration: none;
}

.sidebar-partner-details-name,
.sidebar-partner-details-filter {
	display: block; 
	background: #80a5c8; 
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 1.1rem; 
	color: #fff; 
	text-align: center; 
}

.sidebar-partner-details-name {
	margin-bottom: 0.2rem;
}

.filter-button-container {
	width: 100%; 
	text-align: right;
	margin-top: .5rem;
}

.filter-button {
	margin-bottom: 0;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: normal;
}

.slide-panel {
	margin-top: 0.5rem;
}

.slide-panel-hidden {
	display: none; 
}

/*******************************************************************************
/
/ CATEGORY TREE
/
/******************************************************************************/

.tree-menu ul {
	list-style:none;
	/*padding-left: 1.5rem;*/
}

.tree-menu > ul {
	padding:0;
	/*padding-left: 2rem;*/
}

.tree-menu a {
	display:block;
	vertical-align:middle;
	text-decoration:none;
	padding:0 0 0 2.3rem;;
	margin-bottom:1px;
	color:#333;
	font-size: 1.4rem;
	/*-moz-transition:background-color .25s linear;
	-webkit-transition:background-color .25s linear;
	-o-transition:background-color .25s linear;
	transition:background-color .25s linear;
	-moz-transition-delay:.15s;
	-webkit-transition-delay:.15s;
	-o-transition-delay:.15s;
	transition-delay:.15s*/
}

.tree-menu a:hover {
	/*color:#f53d3e;
	-moz-transition:background-color .1s linear;
	-webkit-transition:background-color .1s linear;
	-o-transition:background-color .1s linear;
	transition:background-color .1s linear*/
}

.tree-menu .active > a:hover,.tree-menu .selected > a,.tree-menu a:hover {
	text-decoration: underline;
	//background-color:#c6cdde;
}

.tree-menu .selected > a {
	/*color:#f53d3e;
	font-weight:700;*/
	text-decoration:none
}

.tree-menu .closed > a,
.tree-menu .opened > a,
.tree-menu a {
	padding:0 0 0 2.3rem;
	background-position:0px 4px;
	background-repeat:no-repeat
}

.tree-menu a {
	background-image:url(/assets/images/bullet-circle-blue-24.png);
	background-position-y: 0rem;
}

.tree-menu .closed > a {
	background-image:url(/assets/images/plus-circle-blue-24.png);
	background-position-y: 0rem;
}

.tree-menu .opened > a {
	background-image:url(/assets/images/minus-circle-blue-24.png);
	background-position-y: 0rem;
}

/************************************************************************
/*
/* FORM ELEMENTS
/*
/************************************************************************/
.form_container {
	display:block;
	overflow:auto
}

.form_container label {
	width:12rem;
	padding-top:1rem;
	float:left;
	clear:left;
	font-size:1.6rem
}

.form_container .radio-label {
	float:left;
	clear:right;
	padding-left:.5em
}

.form_container .radio-label-fixed-width {
	float:left;
	clear:right;
	padding-left:.5rem;
	width:5rem
}

.form_container .radiobutton {
	float:left;
	clear:right;
	border:.1em solid #ccc;
	height:2rem;
	margin:.2rem;
	width:3rem;
	margin-right:3rem
}

.form_container input.text,.form_container select {
	font-family:'Open Sans',Arial,Helvetica,sans-serif;
	font-weight: normal;
	border:.1em solid #ccc;
	height:2.6rem;
	font-size:1.6rem;
	width:100%;
	-webkit-box-sizing:border-box;
	‌-moz-box-sizing:border-box;
	box-sizing:border-box
}

.form_container select {
	height:3rem
}

.form_container input.checkbox {
	border:.1em solid #ccc;
	height:2rem;
	margin:.2rem;
	width:20.5em
}

.button {
	color:#FFF!important;
	font-size:1.6rem;
	padding:10px 30px;
	border:none;
	background:#80a5c8
}

.button:hover {
	color:#FFF!important;
	background:#024b92;
	cursor:pointer
}

.small-button {
	padding: .6rem 1rem;
	font-size: 1.4rem;
}

.filter-button {
	color:#FFF!important;
	font-size:1.1rem;
	padding:8px;
	border:none;
}

.form_container textarea {
	width:30rem;
	height:12rem;
	float:left
}

.form_container p {
	font-size:1.6rem;
	line-height:1.4rem
}

.form_container fieldset {
	min-height:16.4rem;
	min-width:30rem;
	border:none;
	line-height:1.6rem;
	font-size:1.4rem;
	font-family:'Open Sans',Arial,Helvetica,sans-serif;
	font-weight: normal;
	display:inline-block
}

.center-fieldset-320 {
	min-width:30em!important;
	min-height:12em!important;
	padding:0;
	margin:0
}

input[type=checkbox].css-checkbox {
	position:absolute;
	z-index:-1000;
	left:-1000px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	height:1px;
	width:1px;
	margin:-1px;
	padding:0;
	border:0
}

input[type=checkbox].css-checkbox + label.css-label {
	padding-left:25px;
	height:20px;
	display:inline-block;
	line-height:20px;
	background-repeat:no-repeat;
	background-position:0 0;
	vertical-align:middle;
	cursor:pointer;
	margin: auto 0;
	height: auto;
	font-size: 1.4rem;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
	background-position:0 -60px
}

label.css-label {
	background-image:url('/assets/images/checkbox_green_3line.png');
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
}

input[type="text"], input[type="file"], input[type="password"], input[type="number"], 
input[type="search"], input[type="date"], input[type="time"], input[type="email"], input[type="url"], 
input[type="datetime"], textarea, select, .chosen-single {
	font-family: 'Open Sans',Arial,Helvetica,sans-serif;
	font-weight: normal;
	background-color: #fff;
	border: 1px solid #e3e3e3;
	color: #333;
	line-height: normal;
	padding: 5px;
	height: auto;
	font-size: 1.4rem;
	margin: 0.5rem 0;
}

input[type="text"].login-text,
input[type="email"].login-text,
input[type="password"].login-text{
	font-family: 'Open Sans',Arial,Helvetica,sans-serif;
	font-weight: 300;
	font-size: 2.2rem;
	line-height: 2.6rem;
	letter-spacing: -1px;
	color: #333;
	margin: 0 auto 1rem;
	max-width: 300px;
	min-width: 255px;
}

#filter_contains_text {
	font-size: 1.4rem;
	margin-bottom: 0;
	height: auto;
	width: 100%;
}


/************************************************************************
/*
/* PAGINATION & eCAT HEADER
/*
/************************************************************************/
.pagination-links-container
{
	width: 100%;
	text-align: center;
	padding: 1rem;
}

.search-results-header-container {
	 width: 100%;
	 display: inline-block; 
	 min-height: 3rem;
	 margin-bottom: 1.2rem;
}

.search-results-header-left {
	float: left;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-family: bold;
	display: inline-block;
	min-width: 5rem;
}

.search-results-header-right {
	overflow: hidden;
	text-align: right;
}

.results-per-page {
	max-width: 8rem;
}

.order-by {
	max-width: 15rem;
}

input[type="file"]::-webkit-file-upload-button {
	color:#FFF!important;
	padding: .2rem .7rem;
	border:none;
	background:#80a5c8;
	cursor: pointer;
}

.deal-table th {
	padding-left: 0;
}

.deal-line-item {
	margin-bottom: 1rem;
}

.article-list-content h3 {
	margin-top: 0;
	font-family: 'Open Sans', arial, helvetica, sans-serif;
	font-weight: 300;
	font-size: 2.4rem;
	line-height: 2.6rem;
}

.article-list-content h3 a {
	text-decoration: none;
}

.article-list-content p {
	text-align: center;
	font-size: 1.6rem;
	line-height: 2rem;
}

.article-list-content {
	background:#fff;
	padding:2rem;
	text-align:center;
}

.natbuild-logo-caption-cam {
	max-width: 12rem;
	margin-top: 2rem;
}

.caption-cam-logo {
	max-width: 15rem;
	margin-top: 3.5rem;
}

.caption-cam-header {
	 padding-top: 1rem;
}

#lower_caption {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif; 
	color: #111; 
	text-align: center; 
	font-size: 2.6rem; 
	line-height: 3rem;
	margin-top: 1.5rem;
	font-weight: 300;
}

.caption-cam-submit-photo {
	margin-top: 4rem;
	padding: 0.3rem;
	background-color: #fff;
	max-width: 38.1rem;
	width: 100%;
}

.button-container {
	width: 100%; 
	text-align: center; 
}

.button-container .button {
	height: 52px; 
	margin: 0.5rem 0;
	max-width: 15rem; 
	width: 100%; 
	display: inline-block;
}

.mobile-hide
{
	display: none;
}

.dt-button:link,
.dt-button:visited {
	text-decoration: none!important;
	background: none!important;
	font-size: 1rem!important;
	color: #000!important;
	margin: 0!important;
	padding: 0!important;
}

.dt-button:hover {
	text-decoration: underline!important;
	color: #1c3f94!important;
}