/* Farbtabellen: Alle RAL Farbnamen */
.color-grid {
	list-style: none;
	text-align: center;
	margin: 0 auto;
	padding: 4px 0;
	background: #ffffff;
	overflow: hidden;
}
.color-grid li {
	display: block;
	float: left;
	/* 5 items in a row = 20% each */
	width: 16%;
	margin: 0.5%;
	padding: 5% 1.5%;
	color: #fff;
	cursor: pointer;
	background: #8CC7DF;
	overflow: hidden;
}
.color-grid li h3 {
	font-size: 1.7em;
	font-weight: 100;
	margin: 0 0 0.5em 0;
}
.color-grid li.dark {
	color: #465256;
}
.color-grid li[class^="icon-"]:before,
.color-grid li[class*=" icon-"]:before {
	font-size: 10em;
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	line-height: 3;
	opacity: 0.4;
	text-align: right;
	pointer-events: none;
}
.color-temp {
	display: block;
	font-size: 1.1em;
	opacity: 0.5;
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}
.color-grid li .rb-temp {
	font-size: 1.1em;
	line-height: 1.6;
}
.color-grid li:hover .rb-temp {
	opacity: 1;
}


/* Overlay */
#color-grid-layer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10000;
	overflow-y: auto;
}
#color-grid-layer .close {
	position: absolute;
	top: 1em;
	right: 1em;
	width: 60px;
	height: 60px;
	overflow: hidden;
	text-align: center;
	cursor: pointer;
}
#color-grid-layer .close::before {
	content: 'x';
	font-size: 4em;
	line-height: 60px;
	font-weight: 100;
	color: #fff;
}
#color-grid-layer.dark .close::before {
	color: #465256;
}
#color-grid-layer .close:hover::before {
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
}
#color-grid-layer div {
	text-align: center;
	color: #fff;
	padding: 1%;
}
#color-grid-layer.dark div {
	color: #465256;
}
#color-grid-layer h3 {
	font-weight: 100;
	font-size: 8em;
	line-height: 1.2;
	text-align: center;
	margin-bottom: 0.25em;
	padding-top: 60px;
	color: #fff;
}
#color-grid-layer.dark h3 {
	color: #465256;
}
#color-grid-layer div .rb-temp {
	color: #fff;
	font-size: 2em;
	line-height: 1.4;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 */
	filter: alpha(opacity=80);  /* IE 5-7 */
	-moz-opacity: 0.8;  /* Netscape */
	-khtml-opacity: 0.8;  /* Safari 1.x */
	opacity: 0.8;  /* Good browsers */
}
#color-grid-layer.dark div .rb-temp {
	color: #465256;
}

/* Mobile */
@media only screen
	and (min-device-width:320px)
	and (max-device-width:568px){

	/* Farbtabellen */
	.color-grid {
		margin: 0 auto;
		padding: 4px 1%;
	}
	.color-grid li {
		/* 3 items in a row = 33.333333% each */
		width: 24.333333333%;
		margin: 1%;
		padding: 7% 3.5%;
	}
	.color-grid.mobile-two-rows li {
		/* 2 items in a row = 50% each */
		width: 41%;
		margin: 1%;
		padding: 7% 3.5%;
	}
	.color-grid li h3 {
		font-size: 1.2em;
	}
	.color-grid li .rb-temp {
		display: block;
		overflow: hidden;
		font-size: 0.8em;
		text-overflow: ellipsis;
	}

	/* Overlay */
	#color-grid-layer .close {
		top: 0;
		right: 0;
		width: 30px;
		height: 30px;
	}
	#color-grid-layer .close::before {
		font-size: 2em;
		line-height: 30px;
	}
	#color-grid-layer h3 {
		font-size: 3em;
		line-height: 1.2;
		padding-top: 40px;
	}
	#color-grid-layer div .rb-temp {
		font-size: 1.4em;
		line-height: 1.2;
	}

}