/**
* General responsive styles for product list
* mobile-first
*/
/** 2 products on a row for mobile screens */
.products {
	margin-right: 0;
	flex-wrap: wrap;
	box-sizing: border-box;
}
#overview .products:not(.carousel) {
	display: flex !important;
}
.products .product {
	width: inherit;
	margin: 0 2% 16px 0;
	flex: 1 0 48%;
	max-width: 48%;
	box-sizing: border-box;
}

/** relative margins and padding */
.products .product .title {
	margin: 12px 1% 0 1%;
	font-size: 14px;
}
.products .product .button.small {
	padding: 0 1%;
}
.products .product .button.small > span {
	position: relative;
	display: inline-block;
	line-height: 1;
	z-index: 2;
}
/** responsive images */
.products .product img {
	height: auto;
	max-width: 100%;
	width: 100%;
}

.bx-wrapper {
	max-width: 100% !important;
	margin: 0 auto 0 0 !important;
}

@media only screen and (max-width:480px){
	.products .product:nth-child(2n) {
		margin-left: 2%;
		margin-right: 0;
	}
}

@media only screen and (min-width:481px){
	.products .product {
		flex: 1 0 32%;
		max-width: 32%;
	}
	.products .product:nth-child(3n) {
		margin-right: 0;
	}
}

@media only screen and (min-width:641px){
	.products .product {
		flex: 1 0 23.5%;
		margin-bottom: 20px;
		max-width: 23.5%;
	}
	.products .product:nth-child(3n) {
		margin-right: 2%;
	}
	.products .product:nth-child(4n) {
		margin-right: 0;
	}
}

/* =TABLET
 ********************************** */

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

	/* ** GENERAL ** */
	body {min-width:inherit;}
	.container {width:100%;}
	#wrapper { background-image: none; }
	#wrapper:before { content: none; }


	/* ** MENU ** */
	nav#menu {height:initial;}
	nav#menu .container ul.main:before { position:relative; display:inline-block; box-sizing: border-box; content:'Open de groepen'; height:100%; padding:8px 10px 8px 40px; margin:0; font-size:14px; line-height:1.75; font-weight:800; color:white; text-transform:uppercase; white-space:nowrap; background:transparent url('../../images/2014/menu_mobile_white.png') no-repeat 8px center; cursor:pointer;}
	nav#menu .container ul.main.open:before {content:'Sluit de groepen';}
	nav#menu .container ul.main { flex-direction: column; }
	nav#menu .container ul.main > li {display:none;}
	nav#menu .container ul.main.open > li { display:block;background:#D32E2E; width: 100%; }
	nav#menu .container ul.main.open > li > a { width: 100%; }
	nav#menu .container ul.main > li:after { content: none; }

	/* SUBMENU */
	nav#menu .container ul.main li .submenu {position:relative;left:0;top:0;width:100%;margin:0;padding-bottom:17px;}
	nav#menu .container ul.main li:hover .submenu {display:none;}
	nav#menu .container ul.main li.open .submenu {display:block;}
	nav#menu .container ul.main li .submenu ul.maincategories > li {display:block;}
	nav#menu .container ul.main li .submenu ul.maincategories > li + li {padding-left:0;margin-left:0;border-left:0;}
	nav#menu .container ul.main li .submenu ul.maincategories > li ul {display:none;}
	nav#menu .container ul.main li .submenu ul.maincategories > li.open ul {display:block;}
	
	/*#crumbpath {display:none !important;}*/
	
	/* ** INFO ** */
	section#info ul li {width:33%;padding:0 5px;box-sizing:border-box;-webkit-box-sizing:border-box;font-size:12px;}
	section#info ul li img {display:none;}
	
	/* ** CONTENT ** */
	#content {width:100%;box-sizing:border-box;-webkit-box-sizing:border-box;}
	#content:before,
	#content:after {display:none;}
	.col11, .col10, .col9, .col8, .col7, .col6 {width:100%;margin-bottom:20px;}
	.col5, .col4, .col3 {width:50%;}
	.col2 {width:33.33%;}
	.col1 {width:25%;}
	/* BANNER */
	
	#content #banner .bx-controls {display:none;}
	#content #banner ul li .text {padding-top:0;font-size:20px;line-height:26px;}
	
	/* OVERVIEW */
	#content #overview h2 {margin:-10px 0 0 0;font-size:20px}
	
	/* FILTERS */
	#content .filters {position:relative;padding:15px;margin:15px 0 25px 0;background-color:#cccccc; padding: 20px 10px 10px; margin: 10px 0 16px 0;}
	#content .filters:after {background:none;}
	#content .filters * { box-sizing: border-box; }
	#content .filters .filter {min-height:30px;padding-bottom:5px;max-width: 44%;}
	#content .filters .filter ul {font-size:12px;padding:0;margin:0 10px;}
	#content .filters .filter button {height:30px;font-size:12px;line-height:10px;max-width: 100%;}
	#content .filters .filter .select {height:30px;font-size:12px;line-height:10px;max-width: 100%;}
	#content .filters .filter  .ui-multiselect:after {background:none;}
	#content .filters .filter + .filter {margin-left:0;}

	#content .filters .filter .select span:before {font-size:12px;height:30px;line-height:30px;vertical-align:top;}
	#content .filters .filter .select span:after {content:'';}

	#content .filters .reset.button {background-image:none;
		/*position:absolute;right:10px;top:0px;*/
		font-size:10px; height: auto; padding: 4px 7px; line-height: 1.6; }
	#content .filters .filter.reset { position: absolute; right: 0; min-height: auto; top: 0; }

	/* BASKET */
	#content .basket.header .col3,
	#content .basket.body .col3 {display:none;}
	#content .basket .col9.norelated {width:98%;margin-left:2%;}
	#content .basket .col9 .cell.name.norelated {width:180px;}
	
	/* ACCORDION */
	#content .box.accordion h3 {position:relative;cursor:pointer;}
	#content .box.accordion h3:after {position:absolute;display:block;content:'+';right:10px;top:0;font-size:30px;font-weight:400;}
	#content .box.accordion.open h3:after {content:'-';}
	#content .box.accordion .content {max-height:0px;overflow:hidden;-webkit-transition: all 1000ms linear;-moz-transition: all 1000ms linear;-ms-transition: all 1000ms linear;-o-transition: all 1000ms linear;transition: all 1000ms linear;}
	#content .box.accordion.open .content {max-height:4000px;}

	/* ** FOOTER ** */
	footer #footerinfo,
	footer #logos,
	footer #footprint {padding-left:12px;padding-right:12px;}
}

/* =portrait in de winkel bij SEP
 ********************************** */
@media only screen and (min-device-width: 1080px) and (max-device-width: 1080px) {
	body, #wrapper {background:white !important;}
	/*.container {width:1080px;}
	#content {display:block;width:1056px;}
	nav#menu .container ul.main li .submenu {width:1056px;margin:0 0 0 -545px;}*/
	/* BANNER */
  #content #banner {position:relative;max-height:377px;margin:-12px -12px 0 -12px;padding:0 0 51px 0;background:transparent url('/images/2014/banner_shadow.png') no-repeat center bottom;left:-60px;width:1080px;}
} 

/* =iPAD landscape only
 ********************************** */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
	body, #wrapper {background:white !important;}
	/*.container {width:1024px;}
	#content {display:block;width:1000px;}
	nav#menu .container ul.main li .submenu {width:1000px;margin:0 0 0 -515px;}*/
/* BANNER */
  #content #banner {position:relative;max-height:377px;margin:-12px -12px 0 -12px;padding:0 0 51px 0;background:transparent url('/images/2014/banner_shadow.png') no-repeat center bottom;left:-32px;width:1024px;}
} 

/**
 TABLET
*********************************** */
@media only screen and (max-width:960px) {
	header #logo { flex: 0 0 20%; margin-top: 0; padding-left: 10px; }
	header .utils { flex: 0 0 80%; padding-right: 10px; }
	header .topmenu { display: flex; flex-wrap: wrap; }
	#quickmenu { margin-left: auto; }
	#login { display: block; margin-left: auto; }

	#footerinfo .footer-link-list { flex: 0 0 50%; }
	#footerinfo .footer-link-list:first-child { min-width: 260px; }
	#footerinfo .footer-link-list:nth-child(2) { min-width: 260px; }
}

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

	/* ** HEADER ** */
	header { padding-top: 0; }
	header #logo { margin-top: 10px;position: absolute; }
	header #logo img {width:100px;}
	header .utils { flex: 0 0 100%; padding:0 10px; }
	header #login {line-height:30px; order: -1;}
	header #search {margin-left: 0;}
	header #basket { flex: 0 0 200px; }
	
	/* ** QUICK MENU ** */
	#quickmenu { display:block; position: relative; z-index: 5; }
	#quickmenu:before { position:relative; display:block; content:''; width:20px; height:20px; padding:8px 10px; margin:5px; z-index: 4; background:transparent url('../../images/2014/menu_mobile.png') no-repeat center center; cursor:pointer;}
	#quickmenu ul.mainmenumain { display:none; padding-top:0; border-bottom:1px solid #131313; background-color:#eee; width: 100%;
		opacity: 0;
		transform: scale(1,0);
		transform-origin: 0 0;
		transition: transform .2s linear .1s, opacity .2s linear .1s;}
	#quickmenu ul.mainmenumain.open { display:block; position: fixed; left:0; top:inherit; z-index: 2;
		opacity: 1;
		transform: scale(1,1);
		transition: transform .6s linear .1s, opacity .3s linear .3s; }
	#quickmenu ul.mainmenumain:active:before {}
	#quickmenu ul.mainmenumain li { display:none; text-align:center; border-top:1px solid #131313; }
	#quickmenu ul.mainmenumain li:after {display:none;}
	#quickmenu ul.mainmenumain.open li { display:block; width: 100%; }
	#quickmenu ul.mainmenumain li a { width:100%; padding:10px 0; font-size: 12px; }
	#quickmenu ul.mainmenumain li ul,
	#quickmenu ul.mainmenumain li:hover ul {display:none;}
	
	/* ** INFO ** */
	/*#crumbpath, section#info {display:none;}*/
	section#info {display:none;}	
	
	/* ** CONTENT ** */
	/* ** detailpage slider ** */
	#content .bx-wrapper img {max-width:100%;}
	#content .pager a {max-height:30%;max-width:30%;}
	#content .pager a img {max-height:100%;max-width:100%;}
	#content .breadcrumbs ul li { padding: 0 5px;}
	#content .breadcrumbs ul li + li + li { padding-left: 18px; }
	
	/* BANNER 
	#content #banner ul li .text {font-size:14px !important;line-height:18px;}*/
	
	/* COLUMNS */
	.col11, .col10, .col9, .col8, .col7, .col6, .col5, .col4, .col3 {width:100%;margin-bottom:20px;}
	.col2, .col1 {width:50%;}

	/* BASKET */
	#content .basket.header {display:none;}
	#content .basket .col9:after {display:block;content:'';clear:both;}
	#content .basket .col9 .cell {display:block;float:left;}
	#content .basket .col9 .cell.count {clear:both;}
	#content .basket .col9 .error {clear:both;}

	/* HEADER */
	.productlistv ul li .desc { width:100%; }
	header #tools #search .productlistv {right:0;width:100% !important;}
	header #tools #basket .productlistv {right:0;width:200%; min-width: 300px;}

	/* POPUP */
	#content .popup .popover {left:0;top:0;width:100%;margin:0;}
	#content .popup .popover .basket.header {display:block;}

	/* ** FOOTER ** */
	
	footer #logos h2 {display:block;margin:0 0 20px 0;}
}

/* =Mobile landscape only
 ********************************** */
@media only screen and (max-device-width: 767px) and (orientation:landscape) {
	#content #banner ul li .text {font-size:22px;line-height:28px;}
} 

/* =MOBILE SMALL
 ********************************** */
@media only screen and (max-width:430px){
	body { -webkit-text-size-adjust: none; }
	/* ** sizes box on detailpage ** */
	#content #banner ul li .text {font-size:14px;line-height:18px;}
	#content .filters .filter:not(.reset) { min-width: 200px; display: block; }

	header #basket { flex: 0 0 60px; }
	header #basket .button { max-width: 100%; min-width: inherit;}
	header #basket span { height:0; overflow:hidden; opacity:0; }

	/* ** sizes box on detailpage ** */
	.sizes.box table {}
	.sizes.box td  {font-size:12px !important;}
	.sizes.box td  {padding:10px !important;}
	.sizes.box td+td  {padding:0 0 0 3px !important;}
	.sizes.box td+td+td  {padding:5px !important;}
	.sizes.box td+td+td span img  {width:10px;}
	.sizes.box td+td+td  {font-size:10px !important;padding:0;margin:0;}
	
	/*.product {left:40px;}*/
	#maatinformatie, #maatinformatie td {padding:0 !important;margin:0 !important;}
	#maatinformatie td, #maatinformatie td p, #maatinformatie td p span {font-size:12px !important;}
	
	table.contactform input {width:100px;}

	/* Columns for landingpages/seo optimized texts*/
	.leftcolum {float:none;width:100%; }
	.leftcolum a.button {width:100%; display:block; margin:0; padding:0}
	.rightcolum {float:none; width:100%;}
	.nacolumns {clear:both;}
	/* END Columns for landingpages/seo optimized texts*/
}