:root {
	/* GCCI Brand Colors */
	--gcci-dark-gray: #2A2A2A;
	--gcci-gray: #444;
	--gcci-off-white: #FFEFDE;
	--gcci-blue: #008AD8;
	--gcci-blue-luminance: #B3E3FF;
	--gcci-orange: #FE3200;
	--gcci-orange-luminance: #FFC2B3;

	/* Pundora Brand Colors */
	--pundora-mint: #98FF98;
	--pundora-sky: #72DDF7;
	--pundora-vista-blue: #8093F1;
	--pundora-lavender: #B388EB;
	--pundora-plum: #F7AEF8;
	--pundora-pink: #FDC5F5;
	--pundora-sakura: #FFCCDD;
	--pundora-magenta: #C13584;

	/* Atom Colors */
	--atom-gray: #343233;
	--atom-tan: #EFDAB9;
	--atom-yellow: #FFD152;
	--atom-green: #3B9B6D;
	--atom-red: #C13F21;
	--atom-orange: #D36E2d;
	--atom-gold: #DDA032;
	--atom-steel: #78AF9F;
	--atom-blue: #659CC8;
	--atom-ice: #DEECE8;

	/* Document */
	--doc-height: 100%;
	--doc-width: 100%;
}

html {
	width: 100vw;
	width: var(--doc-width);
	height: 100vh;
	height: var(--doc-height);
	font-family: 'Nunito Sans', 'Noto Sans TC', sans-serif;
}

body {
	width: 100%;
	width: var(--doc-width);
	height: 100%;
	height: var(--doc-height);
	margin: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: var(--gcci-off-white);
}

p {
	font-size: 1.2em;
	color: #000;
	font-weight: 500;
}

img {
	width: 100%;
}

.header {
	height: 6vh;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	z-index: 1;
}

.main-header {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	position: absolute;
	background-color: var(--gcci-orange);
	z-index: 1;
}

.logo-title-container {
	height: 4vh;
	margin: 1vh auto 1vh 1vh;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.logo-wrapper {
	height: 100%;
	margin: 0.5vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.logo {
	height: 100%;
}

.title-wrapper {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.title-CH {
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: bold;
	font-size: 1.25em;
	color: #FFF;
	margin: 0;
}

.title-EN {
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 500;
	font-size: 0.75em;
	color: #FFF;
	text-transform: uppercase;
	margin: 0;
}

.navigation-container {
	display: grid;
	grid-template-rows: 6vh;
	grid-auto-columns: 12vh;
	grid-auto-flow: column;
	margin: 1vh 0;
}

.navigation-bar {
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	background-color: transparent;
	color: #FFF;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 500;
	margin: 0;
	font-size: 1.2em;
	transition: background-color 0.25s, color 0.25s;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	outline: none;
}

.navigation-bar:hover {
	background-color: #FFF;
	color: var(--gcci-orange);
}

.mission-countries-container {
	height: 4vh;
	width: 100%;
	position: absolute;
	z-index: -1;
	top: 2vh;
	background-color: #FE7200;
	transition: top 0.25s;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	overflow: hidden;
}

.mission-countries-container.visible {
	top: 6vh;
}

.mission-countries-grid {
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}

.navigation-country {
	height: 100%;
	box-sizing: border-box;
	background-color: transparent;
	color: #FFF;
	font-family: 'Noto Sans TC', sans-serif;
	margin: 0;
	padding: 0 2vh;
	font-size: 1em;
	transition: background-color 0.25s, color 0.25s;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	outline: none;
}

.navigation-country:hover {
	background-color: #FFF;
	color: #FE7200;
}

.wrapper {
	margin: 6vh 0 0 0;
	box-sizing: border-box;
	flex: 1 1 auto;
	width: 100%;
	overflow-y: scroll;
	position: relative;
}

.banner {
	width: 100%;
	height: 50vh;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background-color: var(--gcci-dark-gray);
	flex-direction: column;
}

.banner-text {
	position: relative;
	z-index: 1;
	font-family: 'Yozai', sans-serif;
	font-weight: bold;
	font-size: 10em;
	margin: 0;
	color: #FFF;
}

.banner-subtext {
	position: relative;
	z-index: 1;
	font-family: 'Yozai', sans-serif;
	font-weight: bold;
	font-size: 2.5em;
	margin: 10px 0 0 0;
	color: #FFF;
}

.video-banner {
	position: absolute;
	object-fit: cover;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 50%;
}

.main-container {
	width: 100%;
	padding: 2.5vh 25%;
	box-sizing: border-box;
}

.footer {
	height: 5vh;
	width: 100%;
	background-color: var(--gcci-gray);
	border-top: 5px solid var(--gcci-dark-gray);
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-top: auto;
}

.copyright-text {
	font-size: 0.85em;
	color: #FFF;
}

@media screen and (orientation: portrait) {

	.main-container {
		padding: 2.5vh 5%;
	}

}