:root {
	--navbar-height:50px;
	--button-top-color:#ad0000;
	--button-bottom-color:#3d0000;
	--gradient:linear-gradient(0deg, #3d0000, #ad0000);
	--accent-color:#ad0000;
	--bgcolor:#fff;
}

html, body {
	font-size:14pt;
	background-color:#eee;
}

a, a:hover, a:active, a:visited {
	text-decoration:none !important;
	color:var(--accent-color);
}
h1, h2, h3, h4, h5, h6 {font-weight:bold;}

button, .button, .btn {
	height:40px;
	display:inline-flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	border:none;
	background:var(--gradient);
	color:#fff;
	border-radius:5px;
}
.btn-group-sm>.btn, .btn-sm {
	font-size:0.8rem;
	height:32px;
}

#navbar {
	position:fixed;
	left:0; top:0;
	width:100vw; height:var(--navbar-height);
	background:var(--gradient);
	z-index:98;
	text-align:center;
	box-shadow:0, 0 30px rgba(0,0,0,0.2);
	-webkit-box-shadow:0, 0 30px rgba(0,0,0,0.2);
	-moz-box-shadow:0, 0 30px rgba(0,0,0,0.2);
	-o-box-shadow:0, 0 30px rgba(0,0,0,0.2);
}
#navbar ul {
	list-style-type:none;
	margin:0; padding:0;
}
#navbar > ul {
	margin:0;
	display:inline-flex;
	flex-direction:row;
	width:auto;
}
#navbar > ul > li {
	color:#fff;
}
#navbar > ul > li a {
	color:#fff;
	display:inline-block;
	height:var(--navbar-height);
	line-height:calc(var(--navbar-height) - 5px);
	padding:0 15px;
}


#navbar li.single, #navbar li.parent {
	display:inline-block;
	overflow:visible;
	position:relative;
}
#navbar ul li a {
	display:inline-block;
	transition:0.2s ease-in-out;
}
#navbar ul li a:hover {
	color:var(--navbar-hover-color);
}
#navbar li.expanded {

}
#navbar li.expanded a {

}
#navbar ul.children {
	position:absolute;
	left:-1px;top:var(--navbar-height);
	width:370px;
	padding:10px 0 20px 0;
	z-index:99;
	background-color:#900000;
	text-align:left;
}
#navbar li.child {
	height:40px;line-height:40px;
	padding-left:30px;
	font-size:1rem;
}

#navbar li.child a {
	width:260px; height:40px;
	color:var(--navbar-color);
	transition:0.2s ease-in-out;
}
#navbar li.child a:hover {
	color:#fff;
}
#navbar li.child:before {
	content:"\2736";
	font-size:28px;
	position:relative;
	top:3px;
}

#mobile-menu-button {
	display:none;
	justify-content:center;
	align-items:center;
	position:relative;
	position:absolute;
	top:0; right:5px;
	width:var(--navbar-height); height:var(--navbar-height); line-height:var(--navbar-height);
	cursor:pointer;
}
#mobile-menu-button i {
	font-size:24px;
	color:#fff;
}
#mobile-menu-container {
	display:none;
	position:fixed;
	left:100vw; top:var(--navbar-height);
	width:85vw; height:calc(100vh - var(--navbar-height));
	transition:0.3s ease-in-out;
	z-index:98;
	background-color:rgba(255,255,255,0.8);
	backdrop-filter:blur(5px);
	padding:30px 15px;
}
#mobile-menu-container.menu-open {
	left:15vw;
	box-shadow:0 0 30px rgba(0,0,0,0.75);
	-webkit-box-shadow:0 0 30px rgba(0,0,0,0.75);
	-moz-box-shadow:0 0 30px rgba(0,0,0,0.75);
}
#mobile-menu-container ul {list-style-type:none;}
#mobile-menu-container ul li a:hover {text-decoration:none;}
#mobile-menu-container > ul > li > a {
	color:#000;
	font-size:1.25em;
	font-weight:600;
}
#mobile-menu-container ul ul {
	margin-top:5px;
	margin-bottom:20px;
	padding-left:30px;
}
#mobile-menu-container ul ul li a {
	font-size:1rem;
	line-height:2rem;
	font-weight:500;
	color:#000;
}
@media(max-width:767px) {
	#navbar > ul {display:none;}
	#mobile-menu-button {display:block;}
	#mobile-menu-container {display:block;}
}


#main {
	padding:45px;
}
@media(max-width:767px) {
	#main {padding:30px;}
}
@media(max-width:600px) {
	#main {padding:15px;}
}

#headline, .headline {
	font-family:"Great Vibes", cursive;
	color:var(--accent-color);
	font-size:60px;
	margin-bottom:30px;
	font-weight:500;
}

#welcome-letter {
	margin:45px 0;
}



#footer {
	width:100vw; height:auto;
	padding:60px;
	position:relative;
	background-color:var(--button-top-color);
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	color:#fff;
	text-align:center;
}
#footer * {
	z-index:1;
	color:#fff;
}
#footer-bg {
	position:absolute;
	left:0; top:0;
	width:100%; height:100%;
	object-fit:cover;
	mix-blend-mode: multiply;
	opacity:0.5;
	z-index:0;
}
#footer-logo {
	width:50%;
	margin-bottom:30px;
}
#footer h6 {
	font-size:1.1rem;
}
#footer-links {
	display:flex;
	flex-direction:row;
	margin:30px 0;
}
#footer-links > * {margin:0 15px;}
#footer-links i {font-size:45px;}
#footer-links img {height:45px;}
#footer-copyright {font-size:0.9rem;}