/****************************************************************
	 Making sure grouping with decor is always properly styled
*****************************************************************/
#topspot_fullwidth_nested_columns_parsys_1_grouping {
	padding:0; /* No padding */
}
/* "Voor klanten" heading */
#topspot_fullwidth_nested_columns_parsys_1_grouping_grouped_richtext {
	padding:10px 10px 0 10px; /* Add padding */
}
/* Top 5 hulponderwerpen heading */
#topspot_fullwidth_nested_columns_parsys_1_grouping_grouped_richtext_0 {
	padding:0 10px 10px 10px; /* Add padding */
}
/* Buttons should be centered */
.parsys_column.upc_columns_percent_33_33_34 .button {
	text-align:center;
}
.parsys_column.upc_columns_percent_33_33_34 .button a {
	float: none !important;
	display: inline-block !important;
}
/* Overwriting main-nl.css classes so they span full width */
.nl_basket_details_li ul {
width: auto !important;
float: none !important;
}
.nl_basket_details_li li {
	border-top:none;
	background-position-x: 10px !important;
	padding-left:50px !important;
}
.nl_basket_details_li a {
	background-position:93% 50% !important;
	margin-left: -50px;
	padding-left: 50px;
	padding-bottom: 5px;
	padding-top: 5px;
}
@media screen and (min-width:640px) {
	.nl_resp-hidden { display:block !important;	}
}

/****************************************************************
	 Have to use flexbox to put grouping with decor at the 
	 top in any responsive variant
*****************************************************************/
@media screen and (max-width:768px) {
	#topspot_fullwidth_nested_columns {
	  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	  display: -ms-flexbox;      /* TWEENER - IE 10 */
	  display: -webkit-flex;     /* NEW - Chrome */
	  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	  -webkit-flex-direction: column;
	  -webkit-box-orient: vertical;
	  -moz-flex-direction: column;
	  -ms-flex-direction: column;
	  flex-direction: column;
	}
	.upc_columns_percent_70_30-c0 {
	  -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
	  -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
	  -ms-flex-order: 2;              /* TWEENER - IE 10 */
	  -webkit-order: 2;               /* NEW - Chrome */
	  order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
	}
	.upc_columns_percent_70_30-c1 {
	  -webkit-box-ordinal-group: 1;  
	  -moz-box-ordinal-group: 1;     
	  -ms-flex-order: 1;     
	  -webkit-order: 1;  
	  order: 1;
	}
}
/****************************************************************
 	Custom responsive behavior for homepage
*****************************************************************/
@media screen and (min-width:640px) and (max-width:768px) {
	/* "Voor klanten" heading */
	#topspot_fullwidth_nested_columns_parsys_1_grouping_grouped_richtext {
		text-align:center;
		border-bottom:1px solid #eaeaea;
		padding-bottom:10px;
		margin-bottom:0;
	}
	/* Templated component container */
	#topspot_fullwidth_nested_columns_parsys_1_grouping #topspot_fullwidth_nested_columns_parsys_1_grouping_grouped_templated {
		width: 50%;
		float: left;
		border-right:1px solid #eaeaea;
	}
	/* Spacer in between */
	#topspot_fullwidth_nested_columns_parsys_1_grouping #topspot_fullwidth_nested_columns_parsys_1_grouping_grouped_templated + .spacer { 
		display:none;
	}
	/* Top 5 helponderwerpen container */
	#topspot_fullwidth_nested_columns_parsys_1_grouping #topspot_fullwidth_nested_columns_parsys_1_grouping_grouped_templated + .spacer + .richtext.section {
		width: 47%;
		float: right;
	}
	#topspot_fullwidth_nested_columns_parsys_1_grouping #topspot_fullwidth_nested_columns_parsys_1_grouping_grouped_templated + .spacer + .richtext.section h6 {
		padding: 10px 0;
	}
	#topspot_fullwidth_nested_columns_parsys_1_grouping #topspot_fullwidth_nested_columns_parsys_1_grouping_grouped_templated + .spacer + .richtext.section h6 + ol li a {
		display: block;
		padding: 5px 0;
	}
	/* Aint no party like an !important party */
	#topspot_fullwidth_nested_columns_parsys_1_grouping #topspot_fullwidth_nested_columns_parsys_1_grouping_grouped_templated + .spacer + .richtext.section h6 + ol li {
		margin-bottom:5px !important;
	}
	/* Overwriting main-nl.css classes */
	.nl_basket_details_li li {
		border-top:none;
		padding-left:50px !important;
	}
	.nl_basket_details_li a {
		background-position:93% 50% !important;
		margin-left: -50px;
		padding-left: 50px;
		padding-bottom: 5px;
		padding-top: 5px;
	}
	/* Column Controls */
	.parsys_column.upc_columns_percent_33_33_34 .parsys_column.upc_columns_percent_33_33_34-c0 {
		width: 33% !important;
		clear:none !important;
	}
	.parsys_column.upc_columns_percent_33_33_34 .parsys_column.upc_columns_percent_33_33_34-c1 {
		width: 32% !important;
		margin-left:1% !important;
		clear:none !important;
	}
	.parsys_column.upc_columns_percent_33_33_34 .parsys_column.upc_columns_percent_33_33_34-c2 {
		width: 32% !important;
		margin-left:2% !important;
		clear:none !important;
		overflow-x: hidden;
	}
}
@media screen and (max-width:640px) {
	/* Column Controls heading */
	.parsys_column.upc_columns_percent_33_33_34 h3 {
		font-size:18px;
	}
	/* Another divider that should disappear */
	.parbase.nested-columns.section + .divider.section {
		display:none;
	}
	/* Column Controls images should remain centered */
	.parsys_column.upc_columns_percent_33_33_34 .image img {
		margin:0 auto;
	}
	/* Spacer in between */
	#topspot_fullwidth_nested_columns_parsys_1_grouping #topspot_fullwidth_nested_columns_parsys_1_grouping_grouped_templated + .spacer { 
		height:1px;
		background:#eaeaea;
	}
	/* Class for responsive toggle */
	.nl_responsive-collapser { cursor:pointer; background-image: url('/content/dam/www-upc-nl/components/basket/assets/button_openclose_big.png'); background-position: 98% 17px; background-repeat: no-repeat; }
	h6.nl_responsive-collapser {  font-size: 24px; line-height: 38px; margin:10px 0 0 0; }
	.full { border-bottom: 1px solid #ced2db; background: url('/etc/designs/www-upc-nl/common/media/backgrounds/bg_acc_shade_bottom.png') no-repeat center bottom; padding-left:10px; }
	.nl_responsive-collapser.collapsed { cursor:pointer; background-image: url('/content/dam/www-upc-nl/components/basket/assets/button_openclose_big.png'); background-position: 98% -63px; background-repeat: no-repeat; }	
	/* Class to hide stuff */
	.nl_resp-hidden { display:none !important;	}
}
@media screen and (max-width:768px) {
	/* Divider and Spacer at the top */
	.parsys.topspot_fullwidth > .divider.section:first-child,
	.parsys.topspot_fullwidth > .divider.section:first-child + .spacer.section {
		display:none;
	}
}