/*------ Home Page Header ------*/
.site-header {
	display: flex;
}
.spinner-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--background-black);
	display: grid;
	align-content: center;
	justify-items: center;
	z-index: 9999;
}
.spinner {
	margin-top: 50px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border-top: 4px solid #fff;
	border-right: 4px solid transparent;
	animation: spinner-rotate 1s linear infinite;
}
@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}
.mobile-brand {
	display: none;
	color: var(--white)!important;
}
.navbar-toggler {
	border-radius: 0;
}
.navbar-toggler-icon {
	filter: invert(97%) sepia(97%) saturate(13%) hue-rotate(241deg) brightness(105%) contrast(101%);
	color: var(--white);
}
.navbar {
	background-color: var(--background-black);
}
ul#Navbar {
	display: flex;
	flex-direction: row;
	margin: 0;
	padding: 0;
	list-style: none;
	text-transform: uppercase;
}
ul#Navbar li {
	padding: 10px;
	transition: all .5s;
}
ul#Navbar li a {
	color: var(--white)!important;
	transition: all .5s;
}
ul#Navbar li:hover {
	background-color: var(--white);
}
ul#Navbar li:hover a {
	color: var(--black)!important;
}
.HeaderWrapper h1 {
	font-size: clamp(2.5em, 7vw, 9em);
	margin: 0 auto;
    padding: 15px;
	font-weight: 600;
}
.HeaderWrapper {
	display: flex;
	align-items: center;
    justify-content: center;
	text-align: center;
	position: relative;
	padding-top: 100px;
}
/*---- End of header ----*/
/*----SCREEN WIDTH 1200 to 1536px----*/
@media only screen 
	and (min-width: 1201px)
	and (max-width: 1536px) {
}
/*----SCREEN WIDTH 1200 to 1536px and SMALL VH----*/
@media only screen 
	and (min-width: 1201px)
	and (max-width: 1536px)
	and (min-height: 0px)
	and (max-height: 820px) {
}
/*----SCREEN WIDTH 0 to 991px----*/
@media only screen 
	and (min-width: 0px)
	and (max-width: 991px) {
		/*---Nav---*/
		.navbar.mobile,
		.mobile-brand {
			display: block;
		}
		.navbar.desktop {
			display: none;
		}
		.offcanvas {
			background-color: var(--background-black);
		}
		.btn-close {
			--bs-btn-close-color: var(--white);
			filter: invert(97%) sepia(97%) saturate(13%) hue-rotate(241deg) brightness(105%) contrast(101%);
		}
		ul#Navbar {
			flex-direction: column;
		}
		.offcanvas-logo {
			width: 80%;
    		margin: 0 auto;
			margin-bottom: 2em;
		}
}
/*----SCREEN WIDTH 900 to 1200px----*/
@media only screen 
	and (min-width: 901px)
	and (max-width: 1200px) {
		/*---Nav---*/
		.nav-link a::before {
			transition: none;
		}
}
/*----SCREEN WIDTH 900 to 1200px Landscape----*/
@media only screen and (orientation : landscape)
	and (min-width: 901px)
	and (max-width: 1200px) {
		/*---Nav---*/
		.nav-link a::before {
			transition: none;
		}
}
/*----SCREEN WIDTH 600 to 900px----*/
@media only screen 
	and (min-width: 601px)
	and (max-width: 900px) {
		/*---Nav---*/
		.nav-link a::before {
			transition: none;
		}
}
/*----SCREEN WIDTH 600 to 900px Landscape----*/
@media only screen and (orientation : landscape)
	and (min-width: 601px)
	and (max-width: 900px) {
		/*---Nav---*/
		.nav-link a::before {
			transition: none;
		}
}
/*----SCREEN WIDTH 0 to 600px----*/
@media only screen 
	and (min-width: 0px)
	and (max-width: 600px) {
		.mobile-brand {
			font-size: 18px;
		}
}