@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;700&family=Oswald:wght@700&display=swap');

:root {
	--theme-color1: #0b0c2a;
	--theme-color2: #e53637;
}

body {
	font-family: 'Mulish', sans-serif;
	background-color: var(--theme-color1);
	color: white;
}

a { text-decoration: none; }

a:hover { opacity: 0.6; }

article a,
footer a { color: var(--theme-color2); }

h1 {
    font-weight: 700;
    text-transform: uppercase;
    font-family: "Oswald", sans-serif;
	border-left: 4px solid var(--theme-color2);
	padding-left: 20px;
	margin-left: 2px;
}

.copy img { border-radius: 5px; }

.custom_button {
	--btn-bg: var(--theme-color1);
	border-radius: 5px;
}

.custom_button:hover {
	color: var(--theme-color1);
	border-color: var(--theme-color1);
}

.full { flex: 1; }

.sidebar h1,
.page h1 { color: var(--theme-color1); }

.wrapper {
	max-width: 1200px;
	margin: auto;
	padding: 0 30px;
}

header {
	background-color: rgba(0,0,0,0.4);
	margin-bottom: 30px;
}

header .wrapper {
	display: flex;
  	align-items: center;
  	justify-content: center;
	flex-wrap: wrap;
}

#account_menu {
	width: 100%;
	text-align: right;	
}

#logo, #title-and-slogan {
	display: inline-block;
	vertical-align: middle;
}

#title {
	font-size: 2em;
	font-weight: bold;
	text-decoration: none;
}

.slogan {
	color: var(--theme-color2);
	font-size: 14px;
	font-weight: 400;
}

#title img { max-height: 40px; }

#logo img {
	max-height: 50px;
	margin-right: 10px;
}

nav {
	flex: 1;
	text-align: right;
}

nav > ul > li {
	display: inline-block;
	position: relative;
}

nav ul ul {
	display: none;
	position: absolute;
	background-color: white;
	color: black;
	z-index: 2;
	border-radius: 5px;
	width: 200px;
	text-align: left;
	border: 1px solid black;
}

nav ul li:hover > ul { display: block; }

nav > ul > li > a {
	color: white;
	padding: 24px;
	opacity: 0.7;
}

nav ul ul li {
	display: block;
	position: relative;
}

nav ul ul a {
	padding: 10px;
	font-size: 0.8em;
}

nav li.current > a,
nav ul ul li:hover > a {
	background-color: var(--theme-color2);
	color: white;
}

nav ul ul li:first-of-type > a {
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

nav ul ul li:last-of-type > a {
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

nav ul ul ul {
	top: 0;
	left: 199px;
}

nav a {
	text-decoration: none;
	display: block;
	transition: all;
	transition-duration: 0.3s;
}

nav li:hover > a,
nav li.current > a { opacity: 1; }

.mobile-button {
	display: none;
    flex: 1;
    justify-content: right;
}

.mobile-button i {
	background-color: var(--theme-color2);
	display: block;
	padding: 10px;
	cursor: pointer;
}

.marquee {
	background-color: var(--theme-color2);
	padding: 10px;
	text-align: center;
	margin-bottom: 30px;
}

#PhotoBox,
#slideshow {
	margin-bottom: 30px;
	container-type: inline-size;
}

#slideshow,
#slideshow .nivoSlider { overflow: visible; }

#slideshow .nivo-caption { max-height: 100%; }

#slideshow .nivo-directionNav a {
	opacity: 1 !important;
	background-color: var(--theme-color1);
	border: 5px solid var(--theme-color1);
	border-radius: 0;
	padding: 20px;
	width: 70px;
	height: 70px;
	display: flex;
  	align-items: center;
  	justify-content: center;
	transform: rotate(45deg);
}

#slideshow .nivo-directionNav a::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255, 0.1);
}

#slideshow .nivo-caption, #photocaption {
	font-size: 3.9cqw;
	font-weight: bold;
	font-family: "Oswald", sans-serif;
	opacity: 0.9 !important;
	padding: 5cqw 2cqw 2cqw 2cqw !important;
	background-color: transparent !important;
	background-image: linear-gradient(to top, rgba(0,0,0,0.8) 40%, transparent) !important;
}

iframe,
#PhotoBox,
.slideshow,
/* we have to target images and captions because overflow:visible is applied to #slideshow */
#slideshow :is(img, .nivo-caption) { border-radius: 5px !important; }

#slideshow a.nivo-prevNav { left: -35px; }

#slideshow a.nivo-nextNav { right: -35px; }

#slideshow a.nivo-prevNav::before,
#slideshow a.nivo-nextNav::before {
	font-size: 40px;
	transform: rotate(-45deg);
}

#slideshow a.nivo-prevNav::before { content: '\F0141'; }

#slideshow a.nivo-nextNav::before { content: '\F0142'; }

#content {
	display: flex;
	margin-bottom: 30px;
}

.page {
	flex: 1;
	padding: 20px;
	background-color: white;
	color: black;
	border-radius: 5px;
}

.page + .page { margin-top: 30px; }

.sidebar {
	background-color: white;
	color: black;
	padding: 20px;
	border-radius: 5px;
	width: 350px;
    margin-left: 20px;
}

.sidebar + .sidebar { margin-top: 20px; }

.sidebar h1 ~ h1 { margin-top: 20px; }

.sidebar ul { margin-left: 15px; }

footer {
	position: relative;
	background-color: rgba(0,0,0,0.4);
	padding: 50px;
}

footer .wrapper { display: flex; }

footer .wrapper > div { flex: 1; }

footer .wrapper > div:has(h3:only-child) { display: none; }

footer .scroll {
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	color: white;
}

footer .scroll::before {
	content: '';
	position: absolute;
	width: 40px;
	height: 40px;
	transform: rotate(45deg);
	background-color: var(--theme-color2);
}

footer .scroll .mdi::before {
	position: relative;
	z-index: 1;
	font-size: 40px;
}

#copyright {
	background-color: rgba(0,0,0,0.8);
	padding: 20px 0;
}

#copyright a { color: var(--theme-color2); }

@media screen and (max-width: 1200px) {
	#slideshow .nivo-directionNav a {
		width: 20px;
		height: 20px;
		padding: 15px;
	}

	#slideshow a.nivo-prevNav { left: -20px; }

	#slideshow a.nivo-nextNav { right: -20px; }
}

@media screen and (max-width: 767px) {
	#content { display: block; }

	.mobile-button { display: flex; }

	nav {
		display: none;
		width: 100%;
		flex: auto;
		background-color: white;
		margin-top: 20px;
		border-radius: 5px;
	}

	nav > ul > li { display: block; }

	nav > ul > li > a {
		padding: 15px;
		color: black;
	}

	nav > ul > li:first-of-type > a {
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
	}

	nav > ul > li:last-of-type > a {
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
	}

	nav ul ul {
		display: block;
		position: static;
		text-align: right;
		width: 100%;
		border: none;
		margin-top: 5px;
		margin-right: 50px;
		padding: 0 40px;
	}

	nav ul ul a { border-radius: 5px; }

	.sidebar {
		margin-left: 0;
		margin-top: 20px;
		width: 100%;
	}

	footer .wrapper { display: block; }

	footer .wrapper > div + div { margin-top: 20px; }
}