@charset "UTF-8";

/*noinspection CssUnknownTarget*/

@font-face {
	font-family: 'decodeblockdock';
	src: url('../fon/dwds-demi.eot'); /* IE9 Compat Modes */
	src: url('../fon/dwds-demi.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../fon/dwds-demi.woff2') format('woff2'), /* Super Modern Browsers */
		 url('../fon/dwds-demi.woff') format('woff'); /* Pretty Modern Browsers */
}

@font-face {
	font-family: 'Fedra-Bold';
	src: url('../fon/Fedra-Bold-Web.eot'); /* IE9 Compat Modes */
	src: url('../fon/Fedra-Bold-Web.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../fon/Fedra-Bold-Web.woff2') format('woff2'); /* Super Modern Browsers */
		 url('../fon/Fedra-Bold-Web.woff') format('woff'); /* Pretty Modern Browsers */
}

* { box-sizing: border-box; }
	
body {
	margin: 0;
	background-color: white;
	color: #222;
	font-family: 'Fedra-Bold', sans-serif;
	font-weight: 400;
}

main {
	margin: 0;
	padding: 0;
	background-color: white;
}



/*	N  A  V	 I	G  A  T	 I	O  N  */

nav {
	position: relative;
	z-index: 1;
}

nav div.logo {
	z-index: 2;
}

div#navLayer div.logo {
	background-color: white;
	z-index: 4;
}

h3, 
div.logo, 
.grid-item h3, 
.grid-separator {
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.grid-item.grid-separator.date2, 
.grid-item.grid-separator.date3, 
.grid-item.grid-separator.date4, 
.grid-item.grid-separator.date5, 
.grid-item.grid-separator.date6 {
	text-transform: lowercase;
}

footer { 
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

div#burger {
	position: absolute;
	z-index: 5;
}

div#burger div.bar {
	background-color: black;
	width: 100%;
	height: 2px;
	-webkit-transition: all 250ms cubic-bezier(1, 0, 0, 1); 
	   -moz-transition: all 250ms cubic-bezier(1, 0, 0, 1); 
		-ms-transition: all 250ms cubic-bezier(1, 0, 0, 1); 
			transition: all 250ms cubic-bezier(1, 0, 0, 1);
}

div#burger.barHide div.bar.one {
	margin-top: 7px;
	margin-bottom: -2px;
}
div#burger.barHide div.bar.two {
	margin-top: -2px;
	margin-bottom: 0;
}
div#burger.barHide div.bar.three {
	margin-top: -2px;
	margin-bottom: 0;
}


/* N A V   P O P O V E R */



div#navLayer {
	position: absolute;
	top: -50vh;
	left: 0;
	width: 100%;
	height: 0;
	background-color: white;
	opacity: 0;
	
	-webkit-transition: all 350ms cubic-bezier(1, 0, 0, 1); 
	   -moz-transition: all 350ms cubic-bezier(1, 0, 0, 1); 
		-ms-transition: all 350ms cubic-bezier(1, 0, 0, 1); 
			transition: all 350ms cubic-bezier(1, 0, 0, 1); 
	z-index: 3; 
}

div#navLayer.nixEy.shoMe {
	top: 0 !important;
	left: 0 !important;
	height: 100% !important;
	opacity: 1 !important;
}

div#navLayer.nixEy div.inner a {
	pointer-events: none;
}
div#navLayer.nixEy.shoMe div.inner a {
	pointer-events: auto;
}

div#navLayer div.inner {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
	width: 100%;
}

div#navLayer div.inner a {
	display: block;
	width: 100%;
	font-size: 3.5vh;
	line-height: 15vh;
	color: black;
	text-transform: none;
	-webkit-font-smoothing: subpixel-antialiased;
	letter-spacing: 0.05em;
	background-color: transparent;
	text-align: center;
}

/*	C  O  L	 O	R  */

a {
	color: black;
	text-decoration: none;
}

a:hover, 
div#navLayer div.inner a:hover {
	color: silver;
	text-decoration: none;
}

p.more-header {
	color: rgba(255,255,255,0);	
}
.content a:after, 
p.more-external a[href*="http"]:after {
	content: ' ↗︎';
}
.content a.noArrow:after {
	content: ' ';
}

footer {
	color: #000;
	font-feature-settings: "lnum" 1;
}


/* dummy colors */

.orange {
	color: #f44200;
}

.magenta {
	color: #db067c;
}

.lilla {
	color: #950097;
}

/*  earlier project state, logic needs to be changed */
.button-group.sort-button-group button.date:active,
.button-group.sort-button-group button.date.active,
.button-group.sort-button-group button.date:hover,
.button-group.sort-button-group button.region:active,
.button-group.sort-button-group button.region.active,
.button-group.sort-button-group button.region:hover,
.button-group.sort-button-group button.name:active,
.button-group.sort-button-group button.name.active,
.button-group.sort-button-group button.name:hover,
.button-group.sort-button-group button.unicode:active,
.button-group.sort-button-group button.unicode.active,
.button-group.sort-button-group button.unicode:hover,
.button-group.sort-button-group button.state.active,
.button-group.sort-button-group button.state:hover {
	background-color: white;
	color: black;
}


/* B A S I C   F I L T E R   B U T T O N   S T Y L E S */

.button-group button {
	background-color: black;
	border: none;
	text-transform: uppercase;
	color: white; 
	cursor: pointer;
	outline: 1px solid black;
}

/* button sizes */


.button-group button {
	font-size: 10px;
	line-height: 13px;
	margin: 0 3px 7px 0;
	
	padding: 6px 7px 4px;
}

@media screen and ( min-width : 375px ) {

	.button-group button {
		font-size: 11px;
		line-height: 14px;
		margin: 0 4px 7px 0;
		padding: 6px 9px 5px;
	}
}

@media screen and ( min-width : 480px ) {

	.button-group button {
		font-size: 13px;
		line-height: 15px;
		margin: 0 5px 7px 0;
		padding: 6px 10px 4px;
	}
}


/*  G R I D  */

.grid {
	margin-top: 1.5em;
}

.grid-item {
	float: left;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
}

.grid-item .symbol {
	width: 100%;
	font-family: 'decodeblockdock', serif;
}

.grid-item h3,
.grid-item p.region {
	text-transform: uppercase;
}

.divi {
	letter-spacing: -3px;
	margin-right: 3px;
}

.grid-separator {
	border-top: 2px solid black;
	font-feature-settings: "lnum" 1;
}

.grid-item.grid-separator {
	display: none;
	width: 92vw; 
	height: auto;
	text-align: left;
	color: black !important;
	cursor: default;
}

.grid-item.grid-separator.visible {
	display: block;
}

.grid-item:not(.grid-separator) .item-wrapper { 
 	transform: translate3d(0, 0, 0) scale(1.0);

	/*-webkit-transition: transform 250ms ease;*/
	/*-moz-transition: transform 250ms ease;*/
	-o-transition: transform 250ms ease;
	transition: transform 250ms ease;

	-webkit-transform-origin: center center 0;
	-moz-transform-origin: center center 0;
	-ms-transform-origin: center center 0;
	transform-origin: center center 0;
}

.grid-item:not(.grid-separator):not(.zoom):hover .item-wrapper  {
    -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    -o-transform: scale(1.10);
    transform: scale(1.10);
}
/* ############################################################################################### */

a.linkToTop {
	display: block;
	border-bottom: 2px solid black;
	text-align: center;
}

footer {
	float: left;
	width: 100%;
}



/*	
 _____    _____    _____    __    __       _____ 
|     |  |     |  | __  |  |  |  |  |     |   __|
| | | |  |  |  |  | __ -|  |  |  |  |__   |   __|
|_|_|_|  |_____|  |_____|  |__|  |_____|  |_____|

*/

div.logo, 
.grid-separator, 
footer {
	font-size: 3.5vw;
	line-height: 5vw;
	padding: 4vw;
}

div#navLayer div.inner a {
	font-size: 3.5vh;
	line-height: 13.5vh;
}

div#burger {
	right: 4vw;
	top: 4.25vw;
	width: 4vw;
	height: 4vw;
}

div#burger div.bar {
	margin-bottom: 3px;
}

div.button-group {
	padding-left: 4vw;
}

.grid-separator {
	padding: 1vw 0 4vw 0;
	margin: 0 4vw;
	width: 92vw;
}

a.linkToTop {
	font-size: 3.5vw;
	width: 92vw; 
	margin: 4vw 4vw -0.5vw;
	line-height: 8vw;
}

footer {
	font-size: 2.75vw;
}

.grid-item h3,
.grid-item p {
	font-size: 3vw;
	line-height: 3.5vw;
	font-weight: 400;
	margin: 0;
	padding: 0 1vw;
}

.grid-item h3 {
	margin-top: 1vw;
}

.grid-item {
	width: 33.333vw;
	height: 25vw; /* 33.333 mit Titel */
}

.grid-item .symbol {
	font-size: 20vw;
	line-height: 20vw;
}

.grid-item h3 {
	display: none;
}

.grid-item p {
	display: none;
}




/* pages */

section.content {
	margin: 0 4vw 10vw;
	text-align: left;
}

section.content img {
	width: 100%;
}
.content h1 {
	font-size: 4vw;
	line-height: 6vw;
	text-transform: uppercase;
	margin: 10vw 0;
}

.content p, .content a {
	font-size: 4.25vw;
	line-height: 6vw;
}

.content p {
	margin: 1.5em 0;
}

.content a {
	color: rgb(160,60,255);
}

.content a.blackLink {
	color: rgb(0,0,0);
}

.content a:hover {
	color: rgb(255,60,160);
}

.content p a.order {
	color: white;
	background-color: black;
	padding: 7px 12px 6px;
	margin-bottom: 10px;
	text-transform: uppercase;
	font-size: 70%;
}

.content p a.order:hover {
	color: white;
	background-color: rgb(255,60,160);
}

/* hidden mobile */
@media screen and ( max-width : 767px ) {
	.hidden-xs {
		display: none;
	}
}



/*
 _____    _____    ______    __       _____    _____   
|_   _|  |  _  |  |  __  |  |  |     |   __|  |_   _|  
  | |    |     |  |  __ -|  |  |__   |   __|    | |    
  |_|    |__|__|  |______|  |_____|  |_____|    |_|    

*/

@media screen and ( min-width : 768px ) {

	div.logo,
	.grid-separator,
	footer {
		font-size: 2.5vw;
		line-height: 3vw;
		padding: 3vw 3vw 1.5vw;
	}
	
	.grid-separator {
		padding: 3vw;
	}

	a.linkToTop {
		font-size: 2.5vw;
		width: 94vw; 
		margin: 3vw 3vw -1.1vw;
		line-height: 6vw;
	}

	div#burger {
		right: 3.5vw;
		top: 3.5vw;
		width: 3vw;
		height: 3vw;
	}

	div#burger div.bar {
		margin-bottom: 5px;
	}

	div#navLayer div.inner a {
		font-size: 2.75vh;
	}

	div.button-group {
		padding-left: 3vw;
	}

	.grid {
		margin-top: 1.5em;
	}
	
	.grid-item.grid-separator {
		padding: 1vw 0;
		margin: 3vw;
		width: 94vw;
	}
	
	footer {
		font-size: 2vw;
	}
	
	.grid-item h3,
	.grid-item p {
		font-size: 2.15vw;
		line-height: 2.5vw;
	}

	div:not(.zoom).grid-item p.region, 
	div:not(.zoom).grid-item p.timeframe {
		font-size: 1.5vw;
		padding-top: 0.75vw;
	}
	
	.grid-item h3 {
		margin-top: 0;
	}
	
	.grid-item {
		width: 25vw;
		height: 29vw;
	}
	
	.grid-item .symbol {
		font-size: 16vw;
		line-height: 17vw;
	}
	
	.grid-item h3 {
		display: block;
	}
	
	.grid-item p {
		display: block;
	}

	.grid-item p.unicode, 
	.grid-item p.state {
		display: none;		
	}

	.grid-item p[class^="more-"] {
		display: none;
	}


	section.content {
		margin: 0 3vw 3vw;
	}
	
	.content h1 {
		font-size: 3.5vw;
		line-height: 5vw;
		margin: 10vw 0;
	}
	
	.content p, .content a {
		font-size: 2.375vw;
		line-height: 4vw;
	}

	.button-container button {
		margin-bottom: 30px;
		font-size: 2vw;
		padding: 20px 30px;
		min-width: 60%;
	}

}



/*
 _____    _____    _____    __    __       _____            __    
|     |  |     |  | __  |  |  |  |  |     |   __|          |  |   
| | | |  |  |  |  | __ -|  |  |  |  |__   |   __|          |  |__ 
|_|_|_|  |_____|  |_____|  |__|  |_____|  |_____|          |_____|

*/

@media screen and ( max-width : 940px ) and (orientation : landscape) {

	div.logo,
	.grid-separator,
	footer {
		font-size: 2.5vw;
		line-height: 3vw;
		padding: 3vw 3vw 1.75vw;
	}
	
	.grid-separator {
		font-size: 2vw;
		padding: 3vw;
	}

	a.linkToTop {
		font-size: 2.5vw;
		width: 94vw; 
		margin: 3vw 3vw -1.1vw;
		line-height: 3vw;
	}

	div#burger {
		right: 3vw;
		top: 3.5vw;
		width: 3vw;
		height: 3vw;
	}

	div#burger div.bar {
		margin-bottom: 4px;
	}

	div#navLayer div.inner {
		top: 55%;
	}

	div.button-group {
		padding-left: 3vw;
	}

	.grid {
		margin-top: 1.5em;
	}
	
	.grid-item.grid-separator {
		padding: 0.75vw 3vw 0 0;
		margin: 3vw 3vw 0;
		width: 94vw;
	}
	
	footer {
		font-size: 2vw;
	}
	
	div.item-wrapper {
		padding-top: 5vh;
	}

	.grid-item h3,
	.grid-item p {
		font-size: 2.125vw;
		line-height: 2.5vw;
	}
	
	.grid-item h3 {
		margin-top: 0;
	}
	
	.grid-item {
		width: 25vw;
		height: 24vw;
	}
	
	.grid-item .symbol {
		font-size: 15vw;
		line-height: 16vw;
	}
	
	.grid-item h3 {
		display: block;
	}
	
	section.content {
		margin: 0 3vw 3vw;
	}
	
	.content h1 {
		font-size: 4vw;
		line-height: 4vw;
		margin: 8vw 0;
	}
	
	.content p, .content a {
		font-size: 2.5vw;
		line-height: 4vw;
	}
	

	.button-container button {
		font-size: 2.5vw;
		padding: 15px 20px;
		min-width: 60%;
	}
}



/*
 ____     _____    _____    _____    _____    _____    _____ 
|    \   |   __|  |   __|  |  |  |  |_   _|  |     |  |  _  |
|  |  |  |   __|  |__   |  |    -|    | |    |  |  |  |   __|
|____/   |_____|  |_____|  |__|__|    |_|    |_____|  |__|  

*/

@media screen and ( min-width : 1020px ) {

	div.logo, 
	.grid-separator, 
	footer {
		font-size: 1.75vw;
		line-height: 3vw;
		padding: 2vw 2vw 0.75vw;
	}
	
	.grid-separator {
		padding: 2vw;
	}
	
	a.linkToTop {
		font-size: 1.125vw;
		width: 96vw; 
		margin: 2vw 2vw -1vw;
		line-height: 3vw;
	}

	div#burger {
		right: 3vw;
		top: 3vw;
		width: 2vw;
		height: 2vw;
	}

	div#burger div.bar {
		margin-bottom: 6px;
	}

	div.button-group {
		padding-left: 2vw;
	}
	
	.grid-item.grid-separator {
		padding: 0;
		margin: 2vw 2vw 0.5vw;
		width: 96vw;
	}
	
	footer, .grid-separator {
		font-size: 1.125vw;
	}
	
	.grid-item h3,
	.grid-item p {
		font-size: 1.125vw;
		line-height: 1.25;
		padding: 0 1.5vw;
	}

	div:not(.zoom).grid-item p.region, 
	div:not(.zoom).grid-item p.timeframe {
		font-size: 0.9vw;
		padding-top: 0.35vw;
	}
	
	.grid-item h3 {
		margin: -0.75vw 0 0;
	}
	
	.grid-item {
		width: 16.666vw;
		height: 20vw;
	}
	
	.grid-item .symbol {
		font-size: 10vw;
		line-height: 13vw;
	}

	section.content {
		margin: 0 2vw 2vw;
	}
	
	.content h1 {
		font-size: 2vw;
		line-height: 2vw;
		margin: 7vw 0;
	}
	
	.content p, .content a {
		font-size: 1.5vw;
		line-height: 2.5vw;
	}
	.content p {
		max-width: 68%;
	}

	/* z w e i d r i t t e l  B i l d */
	section.content img {
		max-width: 68%;
	}

	.button-container button {
		font-size: 1.25vw;
		padding: 20px 30px;
		min-width: 50%;
	}

	p.order-buttons {
		line-height: 3.5vw;
	}

	.content p a.order {
		padding: 9px 12px 7px;
	}

}



/*	
 ____     _____    _____    _____        _____    _____    _____    _____ 
|    \   |   __|  |   __|  |  |  |      |  |  |  |  |  |  |   __|  |   __|
|  |  |  |   __|  |__   |  |    -|      |     |  |  |  |  |  |  |  |   __|
|____/   |_____|  |_____|  |__|__|      |__|__|  |_____|  |_____|  |_____|

*/


@media screen and ( min-width : 1800px ) {
	
	nav div.logo {
		padding: 2vw 2vw 0.25vw;
	}
	
	footer {
		font-size: 1.125vw;
	}
	
	.grid-item h3,
	.grid-item p {
		font-size: 0.925vw;
		line-height: 1;
	}
	
	div:not(.zoom).grid-item p.region, 
	div:not(.zoom).grid-item p.timeframe {
		font-size: 0.75vw;
		padding-top: 0.325vw;
	}
	
	.grid-item {
		width: 12.5vw;
		height: 14vw;
	}
	
	.grid-item .symbol {
		font-size: 7.5vw;
		line-height: 10vw;
	}
	
	.grid-item.grid-separator {
		line-height: 2.5vw;
	}

	.content p a.order {
		padding: 10px 12px 6px;
	}
}



                         
/*
 _____    _____    _____    _____ 
|__   |  |     |  |     |  |     |
|   __|  |  |  |  |  |  |  | | | |
|_____|  |_____|  |_____|  |_|_|_|
                                  
 */


.grid-item.zoom {
	width: 100vw;
	height: 100vh;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	background-color: white;
	z-index: 11;
	cursor: pointer;
}

.grid-item.zoom div.symbol {
	font-size: 60vh;
	line-height: 70vh;
}

/* switch on from grid view */
.grid-item.zoom h3 {
	display: block;
	margin-top: -5vh;
}

.grid-item.zoom p {
	display: block;
}

/* 	abs zeilen */
.grid-item.zoom h3, 
.grid-item.zoom p.timeframe {
	padding-bottom: 2vw;
}

/* THE X */

.grid-item.zoom::after {
	position: absolute;
	width: 14px;
	height: 14px;
	top: 4vw;
	right: 4vw;
	content: " ";
	background: url('../img/X.svg');
}

.grid-item.unicode1.zoom::after,
.grid-item.unicode2.zoom::after,
.grid-item.unicode3.zoom::after {
	background: url('../img/Xw.svg');
}


@media screen and ( orientation : landscape ) {

	.grid-item.zoom p,
	.grid-item.zoom h3 {
		line-height: 1.65vw;
	}
}


@media screen and ( orientation : portrait ) {

	.grid-item.zoom div.symbol {
		font-size: 36vh;
		line-height: 54vh;
	}

	.grid-item.zoom h3 {
		margin-top: -4vh;
	}

	.grid-item.zoom h3,
	.grid-item.zoom p {
		line-height: 7vw;
		padding-left: 10vw;
		padding-right: 10vw;
	}

	.grid-item.zoom h3 {
		font-size: 6vw;
	}

	.grid-item.zoom p {
		font-size: 4vw;
	}
}


@media screen and ( min-width : 768px ) and ( orientation : portrait ) {
	.grid-item.zoom::after {
		width: 28px;
		height: 28px;
		top: 3vw;
		right: 3vw;
	}

	.grid-item.zoom div.symbol {
		font-size: 50vh;
		line-height: 55vh;
	}

	.grid-item.zoom h3,
	.grid-item.zoom p {
		line-height: 4vw;
	}

	.grid-item.zoom h3 {
		font-size: 4vw;
	}

	.grid-item.zoom p {
		font-size: 2.25vw;
	}
	
}

/* xtra 2col layout mobile landscape */

@media screen and ( max-width : 940px ) and (orientation : landscape) {

	/* nav mobile landscape */
	div#navLayer div.inner a {
		font-size: 6vh;
		line-height: 18vh;
		display: block;
		float: left;
		width: 50%;
	}

	/* 	ZOOM mobile landscape */
	.grid-item.zoom .item-wrapper {
		display: flex;
		flex-direction: row;
		align-items: center;
		
	}
	
	.grid-item.zoom div.symbol {
		width: 50vw;
		margin-left: 2vw;
		height: 100%;
		float: left;
		font-size: 70vh;
		line-height: 90vh;
		text-align: center;
	}
	
	.grid-item.zoom .info-wrapper {
		width: 50vw;
	}

	
/*
	.grid-item.zoom p.state {
		display: none;
	}
*/
	
	/* THE X small */
	.grid-item.zoom::after {
		width: 20px;
		height: 20px;
		top: 3vw;
		right: 3vw;
	}

	.grid-item.zoom[data-name*="tigalari"] div.symbol,
	.grid-item.zoom[data-name*="kerinci"] div.symbol {
		font-size: 60vh; /* normal 70 */
	}
	
	.grid-item.zoom h3, 
	.grid-item.zoom p {
		float: left;
		text-align: left;
		width: 43vw;
		margin-left: 2vw;
		margin-right: 3vw;
		line-height: 3.125vw;
	}

	.grid-item.zoom h3 {
		font-size: 3vw;
	}

	.grid-item.zoom p {
		font-size: 2vw;
	}
	/* 	abs zeilen */
	.grid-item.zoom h3, 
	.grid-item.zoom p.timeframe {
		padding-bottom: 2vw;
	}
}

@media screen and ( min-width : 1020px ) {	

	.grid-item.zoom h3 {
		font-size: 2vw;
	}

	.grid-item.zoom p {
		font-size: 1vw;
	}
	/* 	abs zeilen */
	.grid-item.zoom h3, 
	.grid-item.zoom p.timeframe {
		padding-bottom: 1.25vw;
	}
}



/* E D G E   C A S E   R E P A I R   K I T  */



/* order-button padding */

@media only screen and ( max-width: 415px ) and (orientation: portrait)  { 
	p.order-buttons {
		line-height: 9vw;
	}
}



/* iPhone X/plus landscape comp. */

@media screen and ( max-width: 896px ) and (orientation: landscape) {	
	.grid-item.zoom h3 {
		margin-top: 0;
	}
}



/* too tall phones */

@media screen and (orientation: portrait) and (max-width: 420px) and (min-height: 680px), 
       screen and (orientation: portrait) and (device-width : 375px) and (device-height : 812px) {

	div#navLayer div.inner a {
		font-size: 3vh;
		line-height: 12vh;
	}

	.grid-item.zoom[data-name*="tigalari"] div.symbol,
	.grid-item.zoom[data-name*="kerinci"] div.symbol {
		font-size: 30vh;
	}
}

@media only screen and (max-width : 890px) and (orientation: landscape) {
	/* XS landscape !? */
	div#navLayer div.inner {
		top: 45%;
	}

	div#navLayer div.inner a {
		font-size: 5vh;
		line-height: 18vh;
	}
	
	.grid-item.grid-separator {
		padding: 0.75vw 3vw 0 0;
		margin: 3vw 3vw 0;
		width: 94vw;
	}

	.grid-item p {
		display: none;
	}
}
/* redundant could be filtered 
.grid-item.zoom p.state {
	display: none;
}
*/


/* reinstall icon size after portrait/landscape mods */

@media screen and ( min-width : 768px ) {
	.grid-item.zoom::after {
		width: 28px;
		height: 28px;
	}
}


/* ###########  2 5	 C O L O R S  ########### */

.date1 		{ color: rgb(255,190,0); }
.date2 		{ color: rgb(255,140,0); }
.date3		{ color: rgb(255,100,0); }
.date4		{ color: rgb(255,60,0); }
.date5		{ color: rgb(255,30,30); }
.date6		{ color: rgb(255,0,90); }

.region1	{ color: rgb(0,160,0); }
.region2	{ color: rgb(0,190,0); }
.region3	{ color: rgb(0,210,0); }
.region4	{ color: rgb(0,235,0); }
.region5	{ color: rgb(0,255,110); }
.region6	{ color: rgb(0,220,170); }
.region7	{ color: rgb(0,220,215); }
.region8	{ color: rgb(0,220,235); }
.region9	{ color: rgb(0,175,220); }

.name1		{ color: rgb(0,60,255); }
.name2		{ color: rgb(80,60,255); }
.name3		{ color: rgb(120,60,255); }
.name4		{ color: rgb(160,60,255); }

.unicode1	{ color: rgb(0,0,0); }
.unicode2	{ color: rgb(0,0,0); }
.unicode3	{ color: rgb(0,0,0); }
.unicode4	{ color: rgb(175,175,175); }

.state1		{ color: rgb(255,60,160); }
.state2		{ color: rgb(140,30,100); }

.grid-item.zoom.date1 		{ background-color: rgb(255,190,0);		color: white;}
.grid-item.zoom.date2 		{ background-color: rgb(255,140,0);		color: white;}
.grid-item.zoom.date3		{ background-color: rgb(255,100,0);		color: white;}
.grid-item.zoom.date4		{ background-color: rgb(255,60,0); 		color: white;}
.grid-item.zoom.date5		{ background-color: rgb(255,30,30);		color: white;}
.grid-item.zoom.date6		{ background-color: rgb(255,0,90); 		color: white;}

.grid-item.zoom.region1		{ background-color: rgb(0,160,0); 		color: white;}
.grid-item.zoom.region2		{ background-color: rgb(0,190,0); 		color: white;}
.grid-item.zoom.region3		{ background-color: rgb(0,210,0); 		color: white;}
.grid-item.zoom.region4		{ background-color: rgb(0,235,0); 		color: white;}
.grid-item.zoom.region5		{ background-color: rgb(0,255,110); 	color: white;}
.grid-item.zoom.region6		{ background-color: rgb(0,220,170);		color: white;}
.grid-item.zoom.region7		{ background-color: rgb(0,220,215);		color: white;}
.grid-item.zoom.region8		{ background-color: rgb(0,220,235);		color: white;}
.grid-item.zoom.region9		{ background-color: rgb(0,175,220);		color: white;}

.grid-item.zoom.name1		{ background-color: rgb(0,60,255); 		color: white;}
.grid-item.zoom.name2		{ background-color: rgb(80,60,255);		color: white;}
.grid-item.zoom.name3		{ background-color: rgb(120,60,255);	color: white;}
.grid-item.zoom.name4		{ background-color: rgb(160,60,255);	color: white;}

.grid-item.zoom.unicode1	{ background-color: rgb(0,0,0); 		color: white;}
.grid-item.zoom.unicode2	{ background-color: rgb(0,0,0); 		color: white;}
.grid-item.zoom.unicode3	{ background-color: rgb(0,0,0); 		color: white;}
.grid-item.zoom.unicode4	{ background-color: rgb(175,175,175); 	color: white;}

.grid-item.zoom.state1		{ background-color: rgb(255,60,160); 	color: white;}
.grid-item.zoom.state2		{ background-color: rgb(140,30,100); 	color: white;}


/* original
.region1	{ color: rgb(160,215,0); }
.region2	{ color: rgb(160,255,0); }
.region3	{ color: rgb(100,255,0); }
.region4	{ color: rgb(0,255,80); }
.region5	{ color: rgb(0,255,160); }
*/
/* original
.grid-item.zoom.region1		{ background-color: rgb(160,215,0);		color: white;}
.grid-item.zoom.region2		{ background-color: rgb(160,255,0);		color: white;}
.grid-item.zoom.region3		{ background-color: rgb(100,255,0);		color: white;}
.grid-item.zoom.region4		{ background-color: rgb(0,255,80); 		color: white;}
.grid-item.zoom.region5		{ background-color: rgb(0,255,160);		color: white;}
*/

.grid-item.zoom.unicode1 a,
.grid-item.zoom.unicode2 a,
.grid-item.zoom.unicode3 a{ 
	color: rgb(116, 116, 116);
}

.grid-item.zoom.unicode1 a:hover,
.grid-item.zoom.unicode2 a:hover,
.grid-item.zoom.unicode3 a:hover {
	color: white;
}