/* header.css | Jarvis Wong | 2024 */
/* ------------ contact header --------------*/
.header1 {
	position:fixed;
	top: 0;
	width: 100%;
	background-color: #FFFFFF;
	height:30px;
	z-index: 1;
}
.contact-info {
	max-width: var(--max-content-width);
	margin: 0 auto;
	padding: 0;
	min-height: 100%;
	position:relative;
}
.contact-left {
	width:100%;
	text-align: left;
	padding-top:3px;
}
.contact-right {
	position:absolute;
	bottom: 2px;
	right: 0;
}
.contact-right a{
	color:#000000;
	margin:0 15px;
	font-weight: bold;
}
.contact-right a:hover, .contact-right a:active, .contact-right a:focus {
	color: #ec9d0a;
}
.social-icon {
	width: 25px;
	padding: 2px;
	vertical-align: middle;
}
@media (max-width:500px) {
	.contact-right a{
		margin:0;
	}
	.phone{
		font-size: 0;
	}
	.mail{
		font-size: 0;
	}
}
/* ------------ navigation header --------------*/
.header2 {
	position:fixed;
	top: 30px;
	width: 100%;
	background-color: #013228;
	z-index: 1;
}
.navigation {
	max-width: var(--max-content-width);
	margin: 0 auto;
	padding: 0;
	min-height: 100%;
	position:relative;
}
.logo {
	height: 100%;
}
.nav-left {
	height: 70px;
	text-align: left;
	overflow: hidden;
}
.nav-right {
	position: absolute;
	top: 0;
	right: 0;
	height: 70px;
	text-align: right;
}
.nav-right a{
	position: relative;
	top: 26px;
	color:#FFFFFF;
	font-weight: bold;
	padding: 26px 15px 25px;
	font-size: 1em;
}
.nav-right a:hover, .sidenav a:active, .sidenav a:focus {
	background-color: #001614;
	color: #ec9d0a;
}
@media (max-width:1100px) {
	.nav-left {
		width:50%;
		text-align: left;
	}
	.nav-right {
		width:50%;
		text-align: right;
	}
	.nav-right a{
		padding: 0;
		font-size: 0;
	}
}
/* ------------ side navigation --------------*/
.sidenav-button, .toggle-cross{
	width: 0;
	height: 0;
	position: absolute;
	right:10px;
	top: 20px;
}
.sidenav-button {
	z-index: 4;
	opacity: 0;
	cursor: pointer;
}
.toggle-cross{
	z-index: 3;
}
.line {
	position:absolute;
	width: 100%;
	height: 15%;
	background: #fff;
	transform-origin: center;
	border-radius: 2.25px;
	transition: 0.1s all linear;
}
.ln1{
	top: 0;
}
.ln2{
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
}
.ln3{
	top: 100%;
	transform: translateY(-100%);
}
.sidenav-button:checked ~ .toggle-cross .ln1{
	top: 50%;
	transform: translate(0, -50%) rotate(45deg);
}
.sidenav-button:checked ~ .toggle-cross .ln2{
	width: 0;
	opacity:0;
}
.sidenav-button:checked ~ .toggle-cross .ln3{
	top: 50%;
	transform: translate(0, -50%) rotate(-45deg);
}
.sidenav{
	width: 40%;
	height: 100vh;
	padding-top: 100px;
	list-style: none;
	background: #013228;
	position: absolute;
	left: 200%;
	top: 0;
	z-index: 2;
	opacity: 0;
	transition: 0.2s all linear;
	
}
.sidenav-button:checked ~ .sidenav{
	left: 200%;
	opacity: 1;
}
.sidenav a{
	display: block;
	font-size: 1em;
	height: 50px;
	padding-top: 16px;
	text-align: center;
	color: #fff;
}
.sidenav a:hover, .sidenav a:active, .sidenav a:focus {
	background-color: #001614;
	color: #ec9d0a;
}
@media (max-width:1100px) {
	.sidenav-button, .toggle-cross{
		width: 42px;
		height: 30px;
	}
	.sidenav{
		left: 110%;
	}
	.sidenav-button:checked ~ .sidenav{
	left: 60%;
	opacity: 1;
	}
}
@media (max-width:700px) {
	.sidenav{
		width: 100%;

	}
	.sidenav-button:checked ~ .sidenav{
	left: 0;
	opacity: 1;
	}
}
/* END */