body {font-family: 'Oxygen', sans-serif; }
h2 {
	font-size: 2.75rem;
	font-weight: 400;
	line-height: 1.25;
	margin-bottom: 1.25rem;
	color: #ffffff;
	font-family: 'Bahiana', cursive;
}

h3 {
	font-size: 3.5rem;
	font-weight: 400;
	line-height: 1.25;
	color: #ffffff;
	text-align: center;
	font-family: 'Bahiana', cursive;
}
h4 {
	font-size: 2.75rem;
	font-weight: 400;
	line-height: 1.25;
	color: #ffffff;
	font-family: 'Bahiana', cursive;
}
h5 {
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.25;
	color: #ffffff;
	font-family: 'Bahiana', cursive;
}

.header-section,
.footer-section {
	background-color: rgba(0, 0, 0, 0.95);
	color: rgba(255, 255, 255, 1.0);
	height: 6rem;
}
.header-section > img {
	height: 4rem;
}

.navbar {
	
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 1rem;
	background-color: #030042;

}
.navbar > a {
	color: #ffffff;
	min-width: 6rem;
	text-align: center;
	text-decoration: none;
	font-weight: 500;

}

.bg-vivid {
	background: rgb(2,0,36);
/*	background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(1,1,18,1) 59%, rgba(0,128,255,1) 100%);*/

/*	background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(1,1,18,1) 59%, rgba(255,86,0,1) 100%);*/
	
	background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(1,1,18,1) 59%, rgba(105,113,143,1) 100%);
}

.ic-48{
	height: 2.5rem;
	width: 2.5rem;
}

.hero-section-wrapper {
	max-height: 80rem;
	overflow-y: hidden;
}

.action-wrapper {
	width: 100%;
	padding: 4rem;
}

.action-wrapper > * {
	margin-bottom: 1.5rem;
}

.hero-section-img,
.action-img {
	max-width: 100%;
}

.action-bar {
/*	height: 10rem;*/
	background-color: #030042;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
	align-items: center;
	padding: 2rem;
}
.action-link{
/*	width: 10rem;*/
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #ffffff;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	opacity: 0.75;
	transition: opacity 0.25s;
	transition-timing-function: ease-in-out;
	cursor: pointer;
}
.action-link:hover {
	opacity: 1;
}
.action-link > img {
	height: 3.25rem;
	width: 3.25rem;
	margin-bottom: 1.25rem;
}

@media screen and (max-width: 42rem) {
	.action-link {
		width: 50%;
		margin-bottom: 2rem;
	}
}

.text-wrapper {
	padding: 5rem;
}



/*.padded {
	padding: 4rem 2rem 4rem 2rem;
}*/


.video-section {
	background-color: #030042;
	padding: 5rem;
}

.video-wrapper{
	max-width: 100%;
	padding-top: 56.25%;
	position: relative;
	width: 100%;
}
.video-frame{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

p.text-large {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.5;
}


.button {
	width: 100%;
	line-height: 1;
	text-align: center;
	color: #ffffff;
	background-color: #ab0000;
	padding: 2rem;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 1.25rem;
	text-decoration: none;
	font-weight: 700;
	transition: background-color 0.5s;
	transition-timing-function: ease-in-out;
	letter-spacing: 1px;

}
.button:hover {
	background-color: #ff0000;
}

.button > img {
	width: 2rem;
	height: 2rem;
	margin-right: 1rem;
}



.menu-wrapper{
	position: fixed;
	inset: 1rem 0 0 1rem;
	padding: 1rem;
	height: 4rem;
	width: 4rem;
	background-color: rgba(0, 0, 0, 0.9);
	transition: height 0.5s, width 0.1s; 
	transition-timing-function: ease-in-ease-out;
	z-index: 9001;
}
.menu-wrapper > a{
	color: #ffffff;
	padding: 2rem 1rem 2rem 1rem;
	display: none;
/*	border-bottom: 1px solid rgba(255, 255, 255, 0.6);*/
	text-decoration: none;
	transition: background 0.25s;
	transition-timing-function: ease-in-out;
	font-weight: 700;
	

}
.menu-wrapper > a:hover{
	background-color: rgba(255, 255, 255, 0.2);
	

}
.is-menu-active {
	height: fit-content;
	width: 20rem;
}
.menu-wrapper.is-menu-active > a {
	display: block;
	opacity: 1;
}

.menu-header {
/*	border-bottom: 1px solid rgba(255, 255, 255, 0.6);*/
	padding-bottom: 1rem;
}

.menu-button > img {
	color: #ffffff;
	height: 2rem;
	width: 2rem;
}
footer > p {
	text-align: center;
}

@media screen and (max-width: 42rem) {
	.padded {
		padding: 4rem 1rem 4rem 1rem;
	}
	.navbar{
		justify-content: flex-start;
	}
	.navbar > a {
		width: 50%;
	}
	.text-wrapper {
		padding: 5rem 1rem 5rem 1rem;
	}
	.action-wrapper {
		width: 100%;
		padding: 2rem 1rem 2rem 1rem;
	}
	.video-section {
		background-color: #030042;
		padding: 5rem 1rem 5rem 1rem;
	}

}