* {
	font-family: 'Montserrat', sans-serif;
	margin: 0;
	padding: 0;
}

html {
	max-width: 100vw;
	overflow-x: hidden;
}

body {
	background-color: #FFFFFF;
}

.hidden {
	display: none;
}

.contact-info {
	width: 100vw;
	background-color: #000000;
}

.contact-info p {
	font-size: 0.75rem;
	font-weight: 600;
	color: #FFD700;
	text-align: right;
	padding: 1rem 5rem;
}

.contact-info p b {
	font-weight: 600;
	color: #FFD700;
}

.contact-info p i {
	font-size: 0.5rem;
	border: 0.1rem dotted #FFFFFF;
	border-radius: 50%;
	width: 0.75rem;
	height: 0.75rem;
	text-align: center;
	padding: 0.5rem 0.4rem 0.25rem 0.4rem;
}

header {
	width: 100vw;
	height: 10rem;
	background-color: rgba(100, 0, 0, 0.9);
	position: relative;
}	

header .background {
	height: 10rem;
	width: 100vw;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	filter: opacity(0.1);
	z-index: 1;
}

header .overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100vw;
}

header .overlay h1 {
	font-size: 1.75rem;
	font-weight: 700;
	color: #FFFFFF;
	position: absolute;
	top: 1.5rem;
	right: 5rem;
}

header .overlay h1 b {
	font-weight: 700;
	color: #FFD700;
}

header .overlay h2 {
	font-size: 1.25rem;
	font-weight: 700;
	color: #FFD700;
	position: absolute;
	top: 4.5rem;
	right: 5rem;
}

header .overlay h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: #FFD700;
	position: absolute;
	top: 7rem;
	right: 5rem;
}

header .patch {
	height: 8rem;
	width: 8rem;
	object-fit: cover;
	transition: filter ease-in-out 0.2s;
}

header .patchlink {
	width: 8rem;
	height: 8rem;
	display: block;
	margin: 1rem 4rem;
}

header .patch:hover {
	filter: opacity(0.5);
}

header ul {
	width: 100vw;
	height: 3rem;
	background-color: #FFFFFF;
	position: absolute;
	top: 10rem;
	padding: 0 5rem;
	display: flex;
	z-index: 3;
}

header ul li {
	list-style: none;
}

header ul li a {
	font-size: 1rem;
	font-weight: 600;
	color: #000000;
	text-decoration: none;
	padding: 0.9rem 0.5rem;
	display: inline-block;
	transition: background-color ease-in-out 0.2s;
}

header ul li a:hover {
	background-color: #DDDDDD;
}

header ul li .active {
	border-bottom: 0.5rem solid #FFD700;
	padding: 0.9rem 0.5rem 0.4rem 0.5rem;
}

header h4 a {
	display: none;
}

@media only screen and (max-width: 1199px) {
	header ul {
		padding: 0 1rem; 
	}
}

@media only screen and (max-width: 1104px) {
	header ul {
		padding: 0 0; 
	}
}

@media only screen and (max-width: 1080px) {
	header {
		height: max-content;
		-webkit-user-select: none;
  		user-select: none;
		position: relative;
	}

	header .background {
		height: 12rem;
		width: 100vw;
		object-fit: cover;
		position: absolute;
		top: 0;
		left: 0;
		filter: opacity(0.1);
		z-index: 1;
	}

	header .overlay {
		position: relative;
		margin: -2rem 0 0 0;
	}

	header .overlay h1 {
		display: none;
	}

	header .overlay h2 {
		display: none;
	}

	header .overlay h3 {
		font-size: 0.75rem;
		color: #FFD700;
		position: absolute;
		top: 8.5rem;
		left: -0.5rem;
		text-align: center;
		width: 100vw;
	}

	header .overlay h3 span {
		display: block;
		padding: 0 0 0.25rem 0;
	}

	header .overlay h3 .hide {
		display: none;
	}

	header .patch {
		height: 6rem;
		width: 6rem;
		object-fit: cover;
		margin: 0;
	}

	header .patchlink {
		width: 6rem;
		height: 6rem;
		display: block;
		margin: 0 calc(50vw - 3rem);
		padding: 2.35rem 0 0 0;
	}

	header ul {
		height: max-content;
		position: relative;
		top: 0;
		margin: 0 0 0 0;
		padding: 0 0;
		z-index: 1;
		flex-direction: column;
		display: none;
	}

	header ul li a {
		width: 100vw;
		padding: 0.9rem 1rem;
	}

	header ul li .active {
		background-color: #FFD700;
		border-bottom: 0;
		padding: 0.9rem 1rem;
	}
	
	header h4 a {
		font-size: 2rem;
		color: #FFFFFF;
		width: 100vw;
		padding: 0.5rem 0;
		text-align: center;
		display: block;
		background-color: #000000;
		position: relative;
		z-index: 4;
		margin: 3rem 0 0 0;
	}

	header h4 a:hover {
		cursor: pointer;
	}
}