@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500&family=Do+Hyeon&family=Kanit:wght@600&family=Kufam:wght@800&family=M+PLUS+1p:wght@700&family=Miriam+Libre:wght@700&family=Nanum+Myeongjo&family=Noto+Sans+SC:wght@700&family=Noto+Sans+TC:wght@700&family=Noto+Serif+JP&family=Noto+Serif+SC:wght@300&family=Noto+Serif+TC:wght@300&family=Taviraj:wght@300&display=swap');



* {
	padding: 0;
	margin: 0;
}

html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: #000000;
	color: #fff;
	overscroll-behavior: none;
	text-rendering: optimizeLegibility;
}


.ar, .at, .au, .be, .br, .ca, .ch, .co, .cu, .de, .fr, .gb, .id, .ie, .in, .it, .ma, .mx, .my, .ng, .nl, .no, .nz, .ph, .pt, .sa, .se, .sg, .si, .us, .ve, .za { /* Latin */

}

.cz, .hu, .lt, .lv, .pl, .ro, .sk, .tr { /* Latin Extended */

}


/* ONLY FOR STATS */
#container > div:nth-child(2) {
	top: 150px !important;
}
/* ONLY FOR STATS */


a, button, input, select {
	pointer-events: auto;
}

a {
	text-decoration: none;
}

button {
	cursor: pointer;
	text-transform: uppercase;
}

canvas {
	display: block;
}

.spatialbackground_layer {
	width: 750px;
	height: 500px;
	background-image: url('../assets/spatialbackground.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.timezone_layer {
	width: 3840px;
	height: 1440px;

	display: flex;
	flex-direction: row-reverse; /* Sun moves from RtoL */
	align-items: stretch;

}

	.timezone_layer div {
		width: 4.1667%;
		height: 100%;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}

	.timezone0 {
		background-image: url('../assets/timezone0.jpg');
	}

	.timezone1 {
		background-image: url('../assets/timezone1.jpg');
	}
	
	.timezone2 {
		background-image: url('../assets/timezone2.jpg');
	}

	.timezone3 {
		background-image: url('../assets/timezone3.jpg');
	}
	
	.timezone4 {
		background-image: url('../assets/timezone4.jpg');
	} 
	
	.timezone5 {
		background-image: url('../assets/timezone5.jpg');
	}
	
	.timezone6 {
		background-image: url('../assets/timezone6.jpg');
	}
	
	.timezone7 {
		background-image: url('../assets/timezone7.jpg');
	}
	
	.timezone8 {
		background-image: url('../assets/timezone8.jpg');
	}
	
	.timezone9 {
		background-image: url('../assets/timezone9.jpg');
	}
	
	.timezone10 {
		background-image: url('../assets/timezone10.jpg');
	}
	
	.timezone11 {
		background-image: url('../assets/timezone11.jpg');
	}

	.timezone12 {
		background-image: url('../assets/timezone12.jpg');
	}


.ghostlayer {
	width: 3840px;
	height: 1440px;

	display: grid;
	grid-template-columns: repeat(48, 1fr [col-start]);
	grid-template-rows: repeat(32, 1fr [row-start]);
}

	.element_ghost {
		background: rgba(0,56,114,0.15);
		/* background: rgba(0,0,255,0.15); */
	}

	.element_ghost:hover {
		background: rgba(255,255,255,0.15);
	}

#elementhk {
	width: 80px;
	height: 45px;
	text-align: center;
	opacity: 1;
	background-color: none;
	cursor: pointer;
}

.enlarge {
	z-index: 100 !important;
}

.element {
	width: 80px; /* We will scale down to 80px */
	height: 45px;
	text-align: center;
	opacity: 1;
	background-color: rgba(246,246,246,1);

}

	.element:hover {
		box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.5);
		width: 80px;
		height: 112px;
		z-index: 5000;
		transition: height 0.25s ease-in-out;
	}

	.element_opened {
		width: 80px;
		height: 112px;
		z-index: 5000;
		transition: height 0.25s ease-in-out;
	}

	.element_opened_exhibit {
		box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.5);
	}

	

.newstitle {
	display: flex;
	flex-direction: column;
  	justify-content: space-between;
  	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	opacity: 0;
	color: rgb(255,255,255);
}

.element:hover > .newstitle, .element_opened > .newstitle {
	opacity: 1;
	background-color: rgba(255,255,255,0.9);
	color: rgb(0,0,0,1);
	background-blend-mode: screen;

}


	.newssource {
		display: none;
		height: 20px;
		width: 90%;
		padding: 0 5%;
		font-family: freight-display-pro,serif;
		font-weight: 400;
		font-style: normal;
		font-size: 6.66px;
		line-height: 20px;
		text-decoration: none;
		color: rgba(0,0,0,1);
		text-overflow: ellipsis;
		overflow: hidden;
        white-space: nowrap;
	}


		.element:hover > .newstitle > .newssource, .element_opened > .newstitle > .newssource {
			display: block;
		}

		.ae > .newssource, .eg > .newssource { /* Arabic */
			font-family: adobe-arabic, serif;
			font-weight: 400;
			font-style: normal;
		}

		.bg > .newssource, .rs > .newssource, .ru > .newssource, .ua > .newssource { /* Cyrillic */
			font-family: 'Cormorant Garamond', serif;
			font-weight: 500;
			letter-spacing: -0.1px;
		}

		.cn > .newssource { /* Simplified Chinese */
			font-family: 'Noto Serif SC', serif;
			font-weight: 300;
			font-size: 6px;
		}		

		.hk > .newssource, .tw > .newssource { /* Traditional Chinese */
			font-family: 'Noto Serif TC', serif;
			font-weight: 300;
			font-size: 6px;
		}

		.gr > .newssource { /* Greek */
			font-family: garamond-premier-pro-display,serif;
			font-weight: 400;
			font-style: normal;
			font-size: 7px;
		}

		.il > .newssource { /* Hebrew */
			font-family: liberation-serif,serif;
			font-weight: 400;
			font-style: normal;

		}
		
		.jp > .newssource { /* Japanese */
			font-family: 'Noto Serif JP', serif;
			font-weight: 300;
			font-size: 6px;
		}

		.kr > .newssource { /* Korean */
			font-family: 'Nanum Myeongjo', serif;
			font-weight: 400;
			font-size: 6px;
		}

		.th > .newssource  { /* Thai */
			font-family: 'Taviraj', serif;
			font-weight: 300;
			font-size: 6px;
		}

	.newsdate_top {
		display: inline-block;
		height: 10px;
		width: 100%;
		font-family: aktiv-grotesk-extended,sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 3px;
		line-height: 10px;
		margin-bottom: 1px;
	}

		.element:hover > .newstitle > .newsdate_top, .element_opened > .newstitle > .newsdate_top {
			display: none;

		}

	.newstime {
		display: inline-block;
		height: 10px;
		width: 100%;
		font-family: aktiv-grotesk-extended,sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 3px;
		line-height: 10px;
		margin-bottom: 1px;
	}

		.hide {
			display: none;
		}

		.element:hover > .newstitle > .newstime, .element_opened > .newstitle > .newstime {
			display: none;

		}
	

	.newsheadline {
		display: block;
		padding-left: 5px;
		padding-right: 5px;
		width: 70px;
		max-height: 24px;
		font-family: ff-good-web-pro-compressed, sans-serif;
		font-weight: 800;
		font-style: normal;
		font-size: 8px;
		line-height: 8px;
		letter-spacing: 0.05px;
		overflow: hidden;
		text-transform: uppercase;
		color: rgba(255,255,255,1);
		
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;  
	}
	

		.element:hover > .newstitle > .newsheadline, .element_opened > .newstitle > .newsheadline {
			margin-left: 2px;
			margin-right: 2px;
			width: 64px;
			max-height: 72px;
			border-left: 1px solid rgba(0,0,0,1);
			border-right: 1px solid rgba(0,0,0,1);
			color: rgba(0,0,0,1);
			font-size: 13px;
			line-height: 12px;
			-webkit-line-clamp: 6;
			-webkit-box-orient: vertical; 
		}
	

		.ae > .newsheadline, .eg > .newsheadline { /* Arabic */
			font-family: 'Kufam', cursive;
			font-size: 6.25px;
		}
		
		.element:hover > .ae > .newsheadline, .element:hover > .eg > .newsheadline, .element_opened > .ae > .newsheadline, .element_opened > .eg > .newsheadline { /* Arabic */
			font-size: 10px;
			letter-spacing: -0.5px;
		}

		.cn > .newsheadline { /* Simplified Chinese */
			font-family: 'Noto Sans SC', serif;
			font-weight: 700;
			font-size: 5.5px;
			line-height: 7px;
			letter-spacing: 0px;
			max-height: 21px;
		}		

		.hk > .newsheadline, .tw > .newsheadline { /* Traditional Chinese */
			font-family: 'Noto Sans TC', serif;
			font-weight: 700;
			font-size: 5.5px;
			line-height: 7.5px;
			letter-spacing: 0px;
			max-height: 22.5px;
		}

		.gr > .newsheadline { /* Greek */
			font-family: sofia-pro-condensed,sans-serif;
			font-weight: 700;
			font-style: normal;
			font-size: 7.25px;
			letter-spacing: -0.15px;
		}

		.il > .newsheadline { /* Hebrew */
			font-family: 'Miriam Libre', sans-serif;
			font-weight: 700;
			font-size: 7.25px;
			letter-spacing: -.15px;
		}

		.jp > .newsheadline { /* Japanese */
			font-family: 'M PLUS 1p', sans-serif;
			font-size: 5.5px;
			line-height: 7px;
			letter-spacing: 0px;
			max-height: 21px;
		}

		.kr > .newsheadline { /* Korean */
			font-family: 'Do Hyeon', sans-serif;
			font-weight: 400;
			font-size: 6.5px;
			letter-spacing: -0.25px;
		}

		.th > .newsheadline  { /* Thai */
			font-family: 'Kanit', sans-serif;
			font-weight: 600;
			font-size: 6.85px;
			letter-spacing: -.2px;
		}

		.element:hover > .jp > .newsheadline, .element_opened > .jp > .newsheadline { /* Japanese */
			font-family: 'M PLUS 1p', sans-serif;
			font-size: 7.5px;
			letter-spacing: -0.15px;
		}

		.element:hover > .cn > .newsheadline, .element_opened > .cn > .newsheadline { /* Simplified Chinese */
			font-family: 'Noto Sans SC', serif;
			font-weight: 700;
			font-size: 8px;
			letter-spacing: -0.1px;
		}		

		.element:hover > .hk > .newsheadline, .element:hover > .tw > .newsheadline, .element_opened > .hk > .newsheadline, .element_opened > .tw > .newsheadline { /* Traditional Chinese */
			font-family: 'Noto Sans TC', serif;
			font-weight: 700;
			font-size: 8px;
			letter-spacing: -0.1px;
		}

		.element:hover > .gr > .newsheadline, .element_opened > .gr > .newsheadline { /* Greek */
			font-family: sofia-pro-condensed, sans-serif;
			font-weight: 700;
			font-style: normal;
			font-size: 12px;
			letter-spacing: -0.25px;
		}

		.element:hover > .il > .newsheadline, .element_opened > .il > .newsheadline { /* Hebrew */
			font-family: 'Miriam Libre', sans-serif;
			font-weight: 700;
			font-size: 12px;
			letter-spacing: -0.75px;
		}

		.element:hover > .kr > .newsheadline, .element_opened > .kr > .newsheadline { /* Korean */
			font-family: 'Do Hyeon', sans-serif;
			font-weight: 400;
			font-size: 10px;
			letter-spacing: -0.35px;
		}

		.element:hover > .th > .newsheadline, .element_opened > .th > .newsheadline { /* Thai */
			font-family: 'Kanit', sans-serif;
			font-weight: 600;
			font-size: 10.25px;
			letter-spacing: -0.3px;
		}
		

	
	.newsbottom {
		margin: 2px auto 4px auto;
		height: 4px;
	}

		.element:hover > .newstitle > .newsbottom, .element_opened > .newstitle > .newsbottom  {
			margin: 4px auto 5px auto;
			height: 11px;
		}
		
		.newsdate_bottom {
			display: none;
			height: 7px;
			width: 100%;
			font-family: aktiv-grotesk-extended,sans-serif;
			font-weight: 400;
			font-style: normal;
			font-size: 3px;
			line-height: 7px;
		}

			.element:hover > .newstitle > .newsbottom > .newsdate_bottom, .element_opened > .newstitle > .newsbottom > .newsdate_bottom {
				display: block;
			}

		.newsflag {
			display: block;
			margin: 0 auto 0 auto;
			height: 4px;
		}




.newsimagebox {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 95;
}

.element:hover .newsimagebox, .element_opened .newsimagebox {
	opacity: 1 !important;
}

	.newsimage {
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 50%;
		top: 0;
		transform: translate(-50%, 0);
		filter: contrast(110%) brightness(115%);
		background: linear-gradient(45deg, rgba(255,255,255,.01), rgba(255,255,255,0.3));
		image-rendering: crisp-edges;
	}

	.element:hover .newsimage, .element_opened .newsimage {
		width: auto;
		height: 100%;
		filter: grayscale(100%) contrast(500%) brightness(200%); 
	}


.newslink {
	display: block;
	position: absolute; 
	right: 0;
	top: 0;
	color: rgba(193,193,193,1); 
	z-index: 500;
}



	.element:hover .newslink { 
		transition: border 0.6s;
		border-bottom: 37px solid rgba(252,253,252,1); 
		border-right: 37px solid rgba(193,193,193,1); 
		box-shadow: -1px 2px 5px rgba(0,0,0,0.85);
	} 

	.element:hover .newslink:hover { 
		border-right-color: rgba(255,39,10,1);
	} 




.showtext {
	background-color: rgba(0,0,0,0);
}

.showtext .newstitle {
	opacity: 1;
}

.showtext .newsimagebox {
	opacity: 0 !important;
}



.label_space_element {
	font-family: aktiv-grotesk-extended,sans-serif;
	font-weight: 300;
	font-style: normal;
	color: rgba(255,255,255,1);
	font-size: 24px;
	letter-spacing: 0px;
	
}

.label_hide {
	display: none;
}



/* DETAIL VIEW OVERLAY */
#detailview {
	display: none;
	width: 100%;
	height: 100%;
	z-index: 5000;
	position: fixed;
	top: 0;
	left: 0;
}

.detailview_on {
	display: block !important;
}

#detailviewbox {
	width: 100%;
	height: 100%;
	transform: scale(0,0);
	transition: transform 0.5s;
}

#detailviewclose {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('../assets/hongkong.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.85;
	background-color: rgba(0,0,0,0.85);
	cursor: pointer;
	z-index: -1;
	transition: opacity 0.25s;
}

#detailviewclose:hover {
	opacity: 0.6;
	background-color: rgba(0,0,0,0.7);
	transition: opacity 0.25s;
}

.detailviewbox_on {
	transform: scale(1,1) !important;
	transition: transform 0.5s ease;
}

.detailviewtitle1 {
	font-family: aktiv-grotesk,sans-serif;
    font-weight: 400;
    font-style: normal;
    text-rendering: geometricPrecision;
    font-size: 15px;
	line-height: 20px;
	position: absolute;
	top: 23px;
	left: 50%;
	transform: translateX(-50%);
}

@media only screen and (max-width: 500px){
	.detailviewtitle1 {
		top: 18px;
	}
}

.detailviewtitle2 {
	font-family: aktiv-grotesk,sans-serif;
    font-weight: 400;
    font-style: normal;
    text-rendering: geometricPrecision;
    font-size: 34px;
	line-height: 34px;
	position: absolute;
	bottom: 43px;
	left: 50%;
	transform: translateX(-50%);
}

@media only screen and (max-width: 900px){
	.detailviewtitle2 {
		font-size: 15px;
		line-height: 24px;
		bottom: 28px;
	}
}

.detailviewtitle2_marker {
	width: 0;
    height: 0;
    border-left: 7.5px solid transparent;
    border-right: 7.5px solid transparent;
    border-bottom: 12px solid rgba(255,39,10,1);
    margin: 9px auto 13px auto;
    position: absolute;
    bottom: 0;
    left: 0;
    left: 50%;
    transform: translateX(-50%);
}

@media only screen and (max-width: 900px){
	.detailviewtitle2_marker {
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 10px solid rgba(255,39,10,1);
		margin: 6px auto 9px auto;
	}
}

.detailviewbox_inner {
	width: 280px;
	height: 112px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}



.element_detailed {
	box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.5);
	position: absolute;
	top: 0px;
	left: 0px;
	transition: left 0.75s ease 0.25s;
}

.element_detailed:hover, .element_detailed_open {
	z-index: 5000 !important;
}

.element_detailed > .newstitle {
	background-color: transparent;
}