/* ----------------
Imports
---------------- */
@import url("framework.less");
@import url("fonts.less");

/* ----------------
Grid
---------------- */
.grid													{ max-width: 1000px;
	.col-left											{
		&.border										{ border-right: 1px solid shade(@white,10%); } 
		> .module										{ padding: 10px 20px 10px 0; }
	}
	.col-right											{
		&.border										{ border-left: 1px solid shade(@white,10%); } 
		> .module										{ padding: 10px 0 10px 20px; }
	}
}
.sprite													{ background-image: url('../images/sprite.png'); background-repeat: no-repeat; background-color: transparent; }
.section												{ padding: 100px 0; }

	/* ----------------
	Gutter
	---------------- */
	.gutter-10											{ margin-left: -5px; margin-right: -5px;
		> [class*='col-']								{ padding-left: 5px; padding-right: 5px; }
	}
	.gutter-20											{ margin-left: -10px; margin-right: -10px;
		> [class*='col-']								{ padding-left: 10px; padding-right: 10px; }
	}

/* ----------------
General
---------------- */
html, body												{ height: 100%; }
body													{ .arial; font-size: 13px; line-height: 20px; color: @text; }
img														{ .block; }


	/* ----------------
	Colors
	---------------- */
	@white:		#ffffff;
	@text:		#555555;
	@blue:		#1690d9;
	@grey:		#2f2f2f;

	/* ----------------
	Links
	---------------- */
	a													{ color: @text; text-decoration: none;
		&:hover											{ text-decoration: none; }
	}

	/* ----------------
	Headings
	---------------- */
	.heading											{ .opensans-semibold; font-size: 16px; line-height: 24px; }
	.pageheading										{ .heading; .block; .opensans-bold; font-size: 24px; padding: 0 0 20px 0; color: @blue; margin: 0 0 10px 0; border-bottom: 1px solid shade(@white,10%); }

	/* ----------------
	Forms
	---------------- */
	.form												{
		input,
		textarea										{ .arial; .border-radius(0); border: 1px solid shade(@white,12%); margin: 5px 0; padding: 6px 10px; font-size: 13px; line-height: 20px; color: @text; -webkit-appearance: none; }
		.wpcf7-submit									{ .opensans-bold; .block; .transition(all 0.1s ease-in-out); .border-radius(2px); padding: 6px 30px; background: @blue; color: @white; text-align: center; text-transform: uppercase; font-size: 14px; cursor: pointer; border: none;
			&:hover										{ background: shade(@blue,30%); }
		}
			
	}

	/* ----------------
	Images
	---------------- */
	.img-responsive										{ .block; width: 100%; height: auto; }

	/* ----------------
	Iframes
	---------------- */
	.iframe-wrap										{ max-width: 100% !important;
		.iframe											{ max-width: 100% !important; }
	}

/* ----------------
Page sections
---------------- */
.page-section											{ padding-top: 40px; padding-bottom: 40px; 
	&.borderbottom										{ border-bottom: 1px solid darken(white,10%); }
}

/* ----------------
Products grid
---------------- */
.products-grid											{
	> ul												{ .block; margin-top: -20px;
		> li											{ .block; margin-top: 20px;
			.wrap										{ .relative; .border-radius(2px); border: 1px solid darken(white,10%); padding: 6px;
				
				// Thumb
				.thumb									{ .relative; .block; .border-radius(2px 2px 0 0); padding-bottom: 75%; height: 0; overflow: hidden; background-color: darken(white,4%); 
					img									{ .block; .absolute; .border-radius(2px 2px 0 0); top: 0; right: 0; bottom: 0; left: 0; z-index: 100; }
				}
				
				// Info
				.info									{ padding: 10px;
					.post-title							{ .block; font-size: 16px; line-height: 22px; height: 44px; margin-bottom: 10px;
						a								{ color: @blue; 
							&:hover						{ color: darken(@blue,10%); text-decoration: underline; }
						}
					}
					
					.specs								{ 
						li								{ height: 30px; margin-bottom: 1px; font-size: 12px; line-height: 30px; padding: 0 10px; color: mix(white,black,40%); 
							&:nth-child(odd)			{ background-color: darken(white,3%); }
							.label						{ color: mix(white,black,60%); }
							.value						{ .block; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
						}
					}
					.btn								{ .border-radius(2px); .block; .ac; line-height: 30px; padding: 5px 20px; background-color: @blue; color: white; font-size: 14px; font-weight: bold; margin-top: 10px; 
						&:hover							{ background-color: darken(@blue,10%); }
					}
				}
				
			}
		}
	}
}

/* ----------------
MixItUp
---------------- */
.mixitup .mix											{ .none; }

/* ----------------
Layered nav
---------------- */
.layered-nav											{ 
	fieldset											{ margin-top: 40px;
		&:first-of-type									{ margin-top: 0; }
		
		// Legend
		legend											{ font-size: 18px; font-weight: bold; color: mix(white,black,20%); margin-bottom: 20px;  }
	
		// Buttons
		button.filter									{ .block; .relative; .arial; padding-left: 22px; font-size: 14px;line-height: 26px; border: none; padding: 0; margin: 3px 0; background-color: transparent; padding-left: 23px; cursor: pointer; color: mix(white,black,30%);
			&:before									{ .transition(all .1s ease-in-out); .absolute; .border-radius(2px); .ac; top: 5px; left: 0; border: 1px solid darken(white,12%); height: 14px; line-height: 14px; width: 14px; content: '✓'; font-size: 0; color: @blue;  }
			&.active									{
				&:before								{ font-size: 11px; }
			}
		}

		// Select boxes
		.select-wrap									{ .relative; .border-radius(2px); background-color: white; border: 1px solid darken(white,9%);
			select										{ .arial; font-size: 14px; background: transparent; width: 110%; padding: 5px 10px; -webkit-appearance: none; border: none; height: 40px; color: mix(white,black,30%);
				option									{ font-size: 14px; }
			}
			&:before									{ .absolute; .transform(translate(0,-50%)); top: 50%; right: 10px; content: "▾"; line-height: 30px; }
		}

	}
}

/* ----------------
Page header
---------------- */
.page-header							{ .relative; margin-bottom: 40px;
	.logo								{ .absolute; top: 25px; left: 0; z-index: 10000; }
	.topmenu							{ .fr;
		.phone-number					{ .opensans-semibold; color: @blue; font-size: 18px; margin: 30px 60px 30px 0; }
		ul								{ .inlineblock; .fr; height: 20px; margin: 30px -10px;
			li							{ .block; .fl;  padding: 0 10px;
				a						{ .block; .transition(all 0.1s ease-in-out);
					&:hover				{ color: tint(@text,20%); }
				}
				&.current-menu-item		{
					a					{ height: 20px; padding: 0 0 4px 0; color: shade(@blue,20%); }
				}
			}
		}
	}
	.topsearch							{ .fr; margin: 16px 0 0 20px;
		.screen-reader-text				{ .none; }
		.search-field					{ padding: 12px 10px; }
		.search-form					{ .relative; }
		.search-submit					{ .absolute; .sprite; background-position: 0 -92px; opacity: 0.4; top: 7px; right: 9px; border: none; height: 24px; width: 24px; text-indent: -9999px; cursor: pointer;
			&:hover						{ opacity: 0.8; }
		}
	}
}

/* ----------------
Page footer
---------------- */
.page-footer				{ padding: 50px 0; background: @grey; color: @white;
	.heading				{ .opensans-bold; .block; font-size: 14px; text-transform: uppercase; margin-bottom: 20px; }
	.menu					{ .block;
		li					{ .block;
			a				{ .transition(all 0.1s ease-in-out); color: @white; 
				&:hover		{ color: shade(@white,35%); }
			}
		}
	}
	.contact				{
		a					{ .transition(all 0.1s ease-in-out); color: @white;
			&:hover			{ color: shade(@white,35%);}
		}
	}
	.twitterfeed			{
		.module				{ .relative; .border-radius(3px); padding: 20px 20px 20px 62px; min-height: 26px; background: tint(@grey,12%); margin-top: 30px; 
			.icon			{ .absolute; .block; .sprite; top: 20px; left: 20px; height: 26px; width: 32px; background-position: 0 -36px; }
			.tweet			{ padding: 0 10px 0 0; color: @white; 
				a			{ color: @white; 
					&:hover	{ text-decoration: underline; }
				}
			}
			.date			{ border-left: 1px solid tint(@grey,20%); padding: 0 0 0 15px; color: tint(@grey,60%); font-size: 11px; }
		}
	}
	.newsletter-signup		{
		.form				{ padding: 10px 50px 0 0;
			.field			{ .block; .border-radius(3px); border: none; background: @white; width: 100%; height: 30px; line-height: 30px; padding: 0 10px; margin: 0; }
			.btn			{ .block; .transition(all 0.1s); .border-radius(3px); border: none; background: @blue; height: 30px; line-height: 24px; color: @white; text-transform: uppercase; cursor: pointer; margin: 0 0 0 5px; text-align: center;
				&:hover		{ background: shade(@grey,20%); }
			}
		}
	}
	.credits						{ border-top: 2px solid tint(@grey,8%); margin-top: 40px; padding-top: 20px; 
		.socialmedia				{
			ul						{ .inlineblock; height: 30px; margin: 0 -5px;
				li					{ .block; .fl; height: 30px; width: 30px; margin: 0 5px; 
					a				{ .sprite; .block; .border-radius(2px); .transition(all 0.1s); height: 30px; width: 30px; text-indent: -9999px; background-color: shade(@grey,20%);
						&.twitter	{ background-position: 0 -62px; 
							&:hover	{ background-color: #3b5998; }
						}
						&.facebook	{ background-position: -30px -62px; 
							&:hover	{ background-color: #00aced; }
						}
						&.youtube	{ background-position: -60px -62px; 
							&:hover	{ background-color: #bb0000; }
						}
						&.linkedin	{ background-position: -90px -62px; 
							&:hover	{ background-color: #007bb6; }
						}
					}
				}
			}
		}
	}
}

/* Page navigation
---------------------------------------- */
.page-nav						{ .block; .absolute; top: 80px; left: 0; right: 0; height: 40px; width: 100%; background: @blue; z-index: 9000;
	ul							{ .inlineblock; .fr; height: 40px; width: auto;
		li						{ .opensans-bold; .block; .fl; font-size: 14px; text-transform: uppercase; height: 40px; line-height: 40px;
			a					{ .transition(all 0.2s ease-in-out); .block; height: 40px; line-height: 20px; padding: 10px 20px; color: @white; }
			&:hover				{ 
				a				{ background: darken(@blue,10%); }
			}
			&.current-menu-item	{ 
				a				{ background: darken(@blue,10%);  }
			}
		}
	}
	.trigger					{ .none; }
	&.sticky					{ position: fixed; top: 0; z-index: 9999; }
}

/* Page image
---------------------------------------- */
.page-image		{ overflow: hidden;
	img			{ .block; width: 100%; max-width: 1600px; margin: 0 auto; text-align: center; }	
}

/* Breadcrumbs
---------------------------------------- */
#breadcrumbs					{ padding: 10px 0; background: shade(@white,4%);
	ul							{ margin-left: 120px;
		li						{ .opensans-semibold; .fl; font-size: 11px; padding: 0 5px 0 0; text-transform: uppercase;
			&:after				{ .opensans-semibold; content: '❯'; padding: 0 0 0 5px; color: tint(@grey,75%); }
			&:last-child		{ 
				&:after			{ .none; }
			}
			a					{ .opensans-bold; 
				&:hover			{ text-decoration: underline; }
			}
		}
	}
}

/* Video embed
---------------------------------------- */
.video-container	 { .relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; 
	iframe,
	object,
	embed			{ .absolute; top: 0; left: 0; width: 100%; height: 100%; }
}

/* ----------------
WP Editor
---------------- */
.wp-editor					{ 
	h1,h2,h3,h4,h5,h6		{ .arial; font-size: 30px; line-height: 38px; color: mix(white,black,20%); padding: 10px 0; }
	p						{ padding: 10px 0; font-size: 14px; line-height: 22px; color: mix(white,black,30%); }
}

/* Wysiwyg
---------------------------------------- */
.wysiwyg					{ padding: 0 0 20px 0;
	h1, h2, h3, h4, h5, h6	{ .heading; font-size: 24px; padding: 20px 0 0 0; color: @blue; }
	h2						{ font-size: 20px; }
	h3						{ font-size: 18px; }
	h4						{ font-size: 16px; }
	h5						{ font-size: 14px; }
	h6						{ font-size: 12px; }
	p						{ padding: 10px 0; }
	ul						{ padding: 10px 0; 
		li					{ list-style: disc inside; padding: 2px 0; }
	}

	/* Shortcode buttons */
	.button.shortcode		{ .opensans-bold; .inlineblock; .transition(all 0.1s ease-in-out); .border-radius(1px); padding: 6px 15px; background: @blue; color: @white; text-align: center; text-transform: uppercase; font-size: 14px; margin: 15px 0; cursor: pointer;
		&:hover				{ background: shade(@blue,30%); }
		&.orange			{ background: #F48F1C; 
			&:hover			{ background: darken(#F48F1C,10%); }
		}
	}

}

/* list view
---------------------------------------- */
.list-view					{ margin: 20px -20px;
	li						{ padding: 20px;
		.thumb				{
			img				{ .block; width: 100%; }
		}
		.content			{ padding: 0 0 0 20px; }
		.heading			{
			a				{
				&:hover		{ color: @blue; }
			}
		}
		.desc				{ padding: 15px 0; ; }
		.readmore			{ .inlineblock; .opensans-bold; .transition(all 0.1s ease-in-out); .border-radius(1px); padding: 6px 10px; background: @blue; color: @white; text-align: center; text-transform: uppercase; font-size: 14px; }
	}
}

/* Tabs
---------------------------------------- */
.tabcontainer				{ .relative;
	.tabs					{ .absolute; overflow: hidden; border-right: 1px solid #fff; height: 40px; z-index: 999; 
		li					{ .fl; .heading; font-size: 12px; text-transform: uppercase; 
			a				{ .block; .border-radius(3px); background: tint(@grey,95%); cursor: pointer; height: 40px; line-height: 40px; padding: 0 20px; border: 1px solid shade(@white,10%); margin-right: -1px;
				&.active	{ border-bottom: 1px solid @white; background: @white; }
			}
			&:last-child	{ 
				a			{ margin-right: 0; }
			}
		}
	}
	.tabcontent				{ .border-radius(0 3px 3px 3px); margin-top: 39px; border: 1px solid shade(@white,10%); padding: 20px; 
		dl					{
			dt				{ .none; }
			dd				{ display: list-item; list-style-type: disc; list-style-position: inside; }
		}
	}
}

/* Brands carousel
---------------------------------------- */
.brands-carousel			{ background: shade(@white,4%); padding: 50px 0; 
	.heading				{ font-size: 22px; padding: 0 0 30px 0; color: @text; }
	.carousel				{ .relative;
		li					{ 
			.module			{ .block; .transition(all 0.1s ease-in-out); .border-radius(3px); border: 3px solid shade(@white,6%); padding: 20px; background: @white; margin: 0 0 0 10px;
				&:hover		{ border: 3px solid shade(@white,12%); }
				img			{ .block; width: 100%; }
			}
		}
	}
	.controls				{
		span				{ .block; .fl; width: 10px; margin: 0 5px;
			a				{  .transition(all 0.1s ease-in-out); .block;  content: ''; width: 10px; height: 10px; background: transparent; border: 2px solid @grey; border-top: none; border-right: none; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(-45deg); transform: rotate(45deg); }
			&#slider-prev	{ 
				a			{  
					&:hover	{ border: 2px solid @blue; border-top: none; border-right: none; margin-left: -2px; padding-right: 2px; }
				}
			}
			&#slider-next	{ 
				a			{ .fr; -webkit-transform: rotate(225deg);
					&:hover	{ border: 2px solid @blue; border-top: none; border-right: none; margin-right: -2px; padding-left: 2px; }
				}
			}
		}
	}
}

/* Page
---------------------------------------- */
.page-content					{ padding: 40px 0;
	.sidebar					{
		.widget					{ margin: 10px 0 30px 0;
			.heading			{ .block; font-size: 20px; padding: 0 0 20px 0; color: @blue; }
			&.usps				{
				li				{ .block; .relative; padding: 0 0 0 24px; margin: 0 0 8px 0;
					&:before	{ .block; .absolute; .border-radius(8px); content: ''; left: 0; top: 0; width: 17px; height: 17px; background: @blue; }
					&:after		{ .block; .absolute; content: ''; width: 7px; height: 3px; background: transparent; top: 5px; left: 4px; border: 2px solid @white; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
				}				
			}
		}
	}
}

/* Filter
---------------------------------------- */
.filter									{
	.uwpqsf_class						{ .border-radius(1px); padding: 10px; background: shade(@white,5%); margin-bottom: 10px; border: 1px solid shade(@white,12%);
		[class*='cmflabel'],
		[class*='taxolabel']				{ .block; .heading; font-size: 13px; padding: 0 0 5px 0; }
		&[class*='cmf-radio']			{ 
			label						{ .block;}
		}
		&[class*='cmf-check'],
		&[class*='tax-check']			{ 
			label						{ .relative; .block; line-height: 20px; height: 20px;
				input[type="checkbox"]	{ margin-right: 5px; } 
			}
		}
		&[class*='cmf-select'],
		&[class*='tax-select']			{ .relative; 
			select						{ .block; .arial; font-size: 13px; .border-radius(1px); border: 1px solid shade(@white,12%); background: @white; width: 100%; padding: 5px; -webkit-appearance: none; -moz-appearance: none; text-indent: 0.01px; text-overflow: ''; height: 30px; line-height: 20px; cursor: pointer; 
				&:hover					{ .box-shadow(inset 0 0 4px shade(@white,12%)); border: 1px solid shade(@white,15%); }
			}
			&:after						{ .block; .absolute; content: " "; bottom: 17px; right: 20px; height: 0; width: 0; border: 5px solid @grey; border-bottom: 5px solid transparent; border-left: 5px solid transparent; border-right: 5px solid transparent; }
		}
		.rangelabel						{ 
			label						{ font-size: 11px; font-weight: normal; margin: 0 5px 0 0; }
		}
	}		

}
.umloading { width:100%; height: 100px; background: url('../images/loader.gif') center center no-repeat; }

/* Pagination
---------------------------------------- */
.uwpqsfpagi,
.paginate-links		{ text-align: left; padding-bottom: 60px;
	span, a			{ .block; .fl; .border-radius(2px); border: 1px solid shade(@white,10%); text-align: center; height: 30px; min-width: 30px; line-height: 30px; margin: 0 5px; padding: 0 8px; }
	.upagicurrent,
	.current	{ background: shade(@white,10%); }
}

/* Product view
---------------------------------------- */
.product-view					{

	// Specs
	.specs-list {
		.block;
		margin-bottom: 30px;
		margin-top: 50px;
		li {
			.al;
			min-height: 30px; 
			padding: 5px 10px;
			&:nth-child(odd) {
				background: tint(@grey,95%)
			}
			.label {
				
			}
			.value {
				&.large { 
					font-weight: bold; 
					font-size: 16px; 
				}
			}
		}
	}

	// Gallery
	.gallery					{
		.large					{ .block; margin-bottom: 20px;
			img					{ .block; width: 100%; }
		}
		.thumb-list				{ .block;
			li					{ .block;
				img				{ width: 100%; }
			}
		}
		.bx-wrapper				{ .relative;
			.bx-controls		{ 
				a				{ .block; .absolute; .border-radius(2px); height: 24px; width: 24px; top: 50%; margin-top: -10px; text-indent: -9999px; background: @blue; 
					&:before	{ .block; .relative; content: " "; height: 0; width: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; top: 5px; }
					&.bx-prev		{ left: 5px; 
						&:before	{ left: 8px; border-right: 6px solid @white; }
					}
					&.bx-next		{ right: 5px;
						&:before	{ left: 10px; border-left: 6px solid @white; }
					}
				}
			}
		}
	}
	.page-options					{ .block; height: 30px; margin: 0 -5px 20px -5px;
		li							{ .block; .fl; height: 30px; line-height: 30px; margin: 0 5px;
			a						{ .block; .border-radius(3px); background: tint(@grey,95%); color: tint(@grey,60%); cursor: pointer; height: 30px; padding: 0 10px;
				&:hover				{ background: tint(@grey,90%); color: @grey; }
			}
		}
	}
}

/* Product grid
---------------------------------------- */
.product-grid						{ .block; margin: 0 -5px;
	> li							{ padding: 0 5px; margin-bottom: 20px;
		.module						{ .relative; .border-radius(1px); padding: 5px; border: 1px solid shade(@white,10%); overflow: hidden; 
			.label					{ .block; .absolute; .opensans-bold; .box-shadow(0 1px 0 rgba(0,0,0,0.3)); background: @blue; color: @white; font-size: 11px; text-transform: uppercase; padding: 5px 40px;
				&.sold				{ top: 20px; right: -30px; .transform(rotate(45deg) translate(0,0)); }
				&.payment			{ top: 35px; right: -50px; .transform(rotate(45deg) translate(0,0)); max-width: 220px; line-height: 18px; text-align: center; }
			}
			.heading				{ .block; font-size: 15px; padding: 10px; min-height: 60px; line-height: 20px; overflow: hidden;
				a					{ color: @blue; }
			}
			.thumb					{ 
				img					{ width: 100%; height: auto; }
			}
			.options				{ .block; .border-radius(3px); margin: 5px 0; min-height: 88px;
				li					{ background: shade(@white,3%); margin-top: 2px; line-height: 22px; padding: 3px 10px; font-size: 12px; max-height: 28px; overflow: hidden; font-weight: bold;
					&:first-child	{ border: none; }
					span			{ .inlineblock; font-size: 11px; width: 36%; color: tint(@text,40%); font-weight: normal; }
				}
			}
			.btn					{ .opensans-bold; .block; .transition(all 0.1s ease-in-out); .border-radius(1px); padding: 6px 10px; background: @blue; color: @white; text-align: center; text-transform: uppercase; font-size: 14px; margin: 15px 10px;
				&:hover				{ background: shade(@blue,30%); }
			}
		}
	}
}
.product-list-ctnr						{
	.uwpqsfpagi							{ margin: 0 15px; }
}

/* Page gallery
---------------------------------------- */
.page-gallery							{
	ul									{ .block; margin: 0 -5px;
		li								{ .block;
			a							{ .block; margin: 5px; 
				img						{ .block; width: 100%; }
			}
		}
	}
}

/* CTA blocks (homepage)
---------------------------------------- */
.cta-blocks					{ .block; .relative; margin: -125px -10px 20px -10px; z-index: 888;
	li						{ .block; padding: 0 10px;
		> .module			{ .block; .relative;.border-radius(3px); .box-shadow(0px 0px 5px 0px rgba(0, 0, 0, 0.2)); background: @white; padding: 3px !important;
			&:hover			{
				.btn		{ background: tint(@blue,20%); }
			}
			.title			{ .heading; .opensans-bold; .block; .absolute; .border-radius(3px 3px 0 0); top: 3px; left: 3px; right: 3px; font-size: 14px; color: @white; background: @grey; padding: 5px 10px; text-transform: uppercase; }
			.thumb			{ max-height: 200px; overflow: hidden;
				img			{ width: 100%; }
			}
			.btn			{ .absolute; .heading; .border-radius(3px); .transition(all 0.1s ease-in-out); bottom: 0; right: 0; background: @blue; border: 3px solid @white; padding: 6px 10px; font-size: 13px; color: @white; }
		}
	}
}

/* Lightbox
---------------------------------------- */
#lightbox					{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 999999; 
	p 						{ .border-radius(3px); .transition(all 0.1s ease-in-out); position: fixed; z-index: 999; cursor: pointer; right: 10px; top: 10px; text-align:  right; padding: .25em .5em; color: #fff; margin-right: 20px; font-size: 20px; background: rgba(100, 100, 100,.5); font-size: 14px; text-transform: uppercase;
		&:hover				{ background: @blue; }
	}
	#slideshow				{ .relative; .block; z-index: 100; text-align: center; width: 95%; height: 95%; margin: 0 auto; padding: 0px; background-color: transparent; 
		img					{ .absolute; top: 5%; left: 0px; right: 0px; bottom: 5%; text-align:center; max-width: 90%; max-height: 90%; margin: auto; }
	}
	.nav 					{ display: none; z-index:999; 
		.prev, 
		.next 				{ .absolute; .border-radius(3px); .transition(all 0.1s ease-in-out); top: 50%; z-index: 999; cursor: pointer; background: rgba(100,100,100,0.5); padding: .25em .5em; color: #fff; text-decoration: none; font-size: 14px; text-transform: uppercase;
			&:hover			{ background: @blue; }
		}
		.next				{ right: 10px; }
		.prev				{ left: 10px; }
	}
}

/* < 1024
---------------------------------------- */
@media only screen and (max-width: 1024px) 	{

	/* Extend grid
	------------------------------------ */
	.grid			{ padding: 0 20px; }

	/* Header
	------------------------------------ */
	.page-header	{
		.logo		{ top: 20px; left: 20px; }
	}

	/* Page navigation
	------------------------------------ */
	.page-nav		{
		ul			{
			li		{
				a	{ padding: 10px; }
			}
		}
	}

}

/* < 768
---------------------------------------- */
@media only screen and (max-width: 768px) 	{

	/* Page header
	------------------------------------ */
	.page-header	{

		/* Logo
		-------------------------------- */
		.logo		{ top: 10px; left: 10px; z-index: 999999; }

		/* Top menu
		-------------------------------- */
		.topmenu			{
			ul				{ margin: 15px 0; }
			.phone-number 	{ font-size: 14px; margin: 15px 20px 15px 0; }
		}

		/* Top search
		-------------------------------- */
		.topsearch				{ width: 100%; margin: 16px 10px 0 20px;
			.screen-reader-text	{ .none; }
			.search-field		{ .relative; .fr; padding: 8px 10px; }
		}

	}

	/* Page footer
	------------------------------------ */
	.page-footer			{ padding: 30px 0;
		.col-2-5,
		.col-1-5			{ .col-1-1; padding: 0 0 20px 0; }
		.twitterfeed		{ .col-1-1;
			.module			{
				.date		{ border-left: none; }
			}
		}
	}

	/* Page navigation
	------------------------------------ */
	.page-nav				{  .absolute; .transition(max-height 0.2s ease-in-out); top: 98px; height: auto; max-height: 46px; padding: 46px 0 0 0; overflow: hidden;
		.grid				{ padding: 0; }
		&.open				{ max-height: 460px; }
		ul					{ .block; .col-1-1; height: auto; width: 100%;
			li				{ .col-1-1; border-top: 1px solid darken(@blue,10%); height: 46px;
				a			{ .transition(all 0.2s ease-in-out); .block; height: 46px; line-height: 26px; padding: 10px 20px; color: @white; }
			}
		}
		.trigger			{ .absolute; .block; top: 14px; right: 20px; z-index: 9999;
			.bars			{ 
				> div		{ .relative; width: 30px; height: 3px; background: @white; margin-bottom: 4px; .transition(all .3s ease-in-out); }
			}
			&.on			{ 
				.bars		{
					.one	{ .transform(translate(0,7px)); .opacity(0); }
					.two	{ .opacity(0.5); }
					.three	{ .transform(translate(0,-7px)); .opacity(0); }
				}
			}
		}
	}

	/* Page headings
	------------------------------------ */
	.pageheading			{ padding-top: 40px; }

	/* Page image
	------------------------------------ */
	.page-image		{
		.img-wrap	{ margin: 0 -120px; }
	}

	/* Page content
	------------------------------------ */
	.page-content		{
		> .col-left		{ .col-1-1; padding: 0; 
			> .module	{ padding: 0; }
		}
		> .col-right	{ .col-1-1; padding: 0;  
			> .module	{ padding: 0; }
		}
	}

	/* Product list
	------------------------------------ */
	.product-grid	{ 
		> li		{ .col-1-2; }
	}

	/* list view
	---------------------------------------- */
	.list-view					{ 
		li						{ .col-1-1; }
	}

}

/* < 480
---------------------------------------- */
@media only screen and (max-width: 480px)	{

	/* Extend grid
	------------------------------------ */
	.grid			{ padding: 0 10px; }

	/* Header
	------------------------------------ */
	.page-header	{ 

		/* Logo
		-------------------------------- */
		.logo		{ top: 40px; }

		/* Top menu
		-------------------------------- */
		.topmenu			{ float: none; border-bottom: 1px solid shade(@white,12%); margin-bottom: 62px;
			.phone-number 	{ font-size: 14px; margin: 0 20px 0 0; }
			ul				{ .block; width: 100%; float: none; margin: 10px 0;
				li	{		 padding: 0 5px; }
			}
		}

		/* Top search
		-------------------------------- */
		.topsearch	{ .none; }

	}

	/* Page navigation
	------------------------------------ */
	.page-nav				{  }

	/* Page image
	------------------------------------ */
	.page-image		{ 
		.img-wrap	{ margin: 0 -220px; }
	}

	/* CTA blocks (homepage)
	---------------------------------------- */
	.cta-blocks		{ 
		> .col-1-2	{ .col-1-1; padding: 0 10px 10px 10px; }
	}

	/* Product list
	------------------------------------ */
	.product-grid	{ 
		> li		{ .col-1-1; float: none; }
	}

	/* Brands carousel
	---------------------------------------- */
	.brands-carousel	{ .relative; 
		.col-1-5		{ .col-1-1; }
		.col-4-5		{ .col-1-1; }
		.controls		{ .absolute; top: 55px; right: 20px; }
	}  

}

.grecaptcha-badge { 
    visibility: hidden;
}