/**************************************************
 Variables
**************************************************/
:root {
  --color-link: #0275D8;
  --color-link-hover: #01447E;
  --color-testing: white;
}

/**************************************************
 Media dependent (see file w3.css)
**************************************************/
.size-control {
	color: red;
}

.w3-col.s-tenth {
	width: 9.99999%;
}

.w3-col.s-eighth {
	width: 12.49999%;
}

.w3-col.s-sixth {
	width: 16.66666%;
}

.w3-col.s-quarter {
	width: 24.99999%;
}

.w3-col.s-third {
	width: 33.33333%;
}

.w3-col.s-half {
	width: 49.99999%;
}

.w3-col.s-full {
	width: 99.99999%;
}

/*
 See line 689
*/
@media (min-width:601px) {
	.size-control {
		color: green;
	}

	.w3-col.m-tenth {
		width: 9.99999%;
	}

	.w3-col.m-eighth {
		width: 12.49999%;
	}

	.w3-col.m-sixth {
		width: 16.66666%;
	}
	
	.w3-col.m-quarter {
		width: 24.99999%;
	}
	
	.w3-col.m-third {
		width: 33.33333%;
	}
	
	.w3-col.m-half {
		width: 49.99999%;
	}
	
	.w3-col.m-full {
		width: 99.99999%;
	}
}

/*
 See line 744
*/
@media (min-width:993px) {
	.size-control {
		color: blue;
	}

	.w3-col.l-tenth {
		width: 9.99999%;
	}

	.w3-col.l-eighth {
		width: 12.49999%;
	}

	.w3-col.l-sixth {
		width: 16.66666%;
	}

	.w3-col.l-quarter {
		width: 24.99999%;
	}
	
	.w3-col.l-third {
		width: 33.33333%;
	}
	
	.w3-col.l-half {
		width: 49.99999%;
	}
	
	.w3-col.l-full {
		width: 99.99999%;
	}
}

/*
 See line 837
 
 	w3-hide-small		display: none !important;
 	w3-mobile			display: block;
*/
@media (max-width:600px) {
}

/*
 See line 877
*/
@media (max-width:768px) {
}

/*
 See line 887
 
 	w3-hide-large		display: none !important;
*/
@media (min-width:993px) {
}

/*
 See line 901
 
 	w3-hide-medium		display: none !important;
*/
@media (max-width:992px) and (min-width:601px) {
}

/*
 See line 907
*/
@media (max-width:992px) {
}

/**************************************************
 General
**************************************************/
a,
a.breadcrumb,
a.group,
a.top-of-page {
	color: var(--color-link);
}

a:hover,
a.breadcrumb:hover,
a.group:hover,
a.top-of-page:hover {
	color: var(--color-link-hover);
}

a,
a.image-link {
	outline: none;
	text-decoration: none;
}

div.offer-box {
	border: 1px solid silver;
	margin: 15px;
	padding: 15px;
}

div.offer-link {
/* 
	See https://www.w3schools.com/colors/colors_picker.asp

	background-color: #FFFFFF;

	#FF9900 orange
	#80CCFF blue
	#FFFF00 yellow 50%
	#FFFF80 yellow 75%
	#FFFFFF white
*/
	border: 2px solid silver;
	margin: auto;
	padding: 25px 0;
	text-align: center;
}

/*
img.offer-link {
	opacity: 0.1;
	filter: alpha(opacity=10); /* For IE8 and earlier */
}
*/

ul.breadcrumbs {
	padding-left: 16px;
	list-style: none;
}

ul.groups {
	padding-left: 0px;
	list-style: none;
}

ul.breadcrumbs li,
ul.groups li {
	display: inline;
}

ul.breadcrumbs li + li:before {
	padding: 4px;
	content: " » ";
}

ul.groups li + li:before {
	padding: 4px;
	content: " - ";
}

.error {
	color: red;
}

/**************************************************
 Tables
**************************************************/
table {
	border-collapse: collapse;
	border-color: #CCCCCC;
}

tr {
	border-width: 1px;
}

td {
	border-color: #CCCCCC;
	border-style: solid;
	border-width: 1px;
	padding: 5px;
}

table.small-size td {
	font-size: 80%;
}

/**************************************************
 Container ads
**************************************************/
div.ads {
	background-color: #C0C0C0;
	height: 400px;
	width: 200px;
}

/**************************************************
 Container parts, elements and images
**************************************************/
div.novelty-container,
div.part-container,
div.purchase-container {
	border-color: #CCCCCC;
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
	margin: 5px auto;
	padding: 5px auto;
}

div.novelty-container {
	min-height: 420px;
	max-width: 300px;
}

div.part-container {
	max-width: 100px;
}

div.purchase-container {
	max-width: 240px;
}

div.part:before {
    content: "";
    display: block;
    width: 50%;
    margin: 20px auto 0;
    border-top: solid thin;
}

img.part-image-thumb,
img.set-image-thumb {
	padding: 5px;
}

img.part-image-missing {
	border: 2px solid silver;
	margin-bottom: 0px;
	padding: 5px;
}

/*
div.promo-icon-container {
	background: red;
	position: relative;
}

img.promo-icon {
	position: absolute;
	right: 10px;
	top: 5px;
}
*/

/**************************************************
 Owl-carousel
**************************************************/
.owl-carousel .owl-stage {
	display: flex;
	align-items: center;
}

.owl-carousel .caption {
	text-align: center;
}

/**************************************************
 List with icons (small images of lego parts)
**************************************************/
ul.icon-list {
	padding: 0px;
	list-style-type: none;
}

li.icon-red,
li.icon-green,
li.icon-blue,
li.icon-darkgrey,
li.icon-yellow,
li.icon-white {
	min-height: 32px;
}

li.icon-red {
	background: url('../icons/links/red_lin_32x32.png') no-repeat left top;
}

li.icon-green {
	background: url('../icons/links/green_lin_32x32.png') no-repeat left top;
}

li.icon-blue {
	background: url('../icons/links/blue_lin_32x32.png') no-repeat left top;
}

li.icon-darkgrey {
	background: url('../icons/links/darkgrey_lin_32x32.png') no-repeat left top;
}

li.icon-yellow {
	background: url('../icons/links/yellow_lin_32x32.png') no-repeat left top;
}

li.icon-white {
	background: url('../icons/links/white_lin_32x32.png') no-repeat left top;
}

.icon-item,
.icon-link {
	padding-left: 48px;
}

.icon-item-multi-line {
	padding-left: 48px;
	padding-bottom: 12px;
	text-align: justify;
}