/* CSS Reset */
body, header, nav, main, footer, img, h1, ul, aside, figure, figcaption, video {
	margin: 0;
	padding: 0;
	border: 0;
}

/* images */

body {
	background-color: #bfd2d9;
	min-height: 100%;
}

h1 {
	font-size: 3.5em;
	padding: 2%;
	margin: 0;
	text-align: center;
}

h3 {
	font-size: 1.5em;
	margin: 0;
	text-align: center;
}

p {
	padding: 2%;
	margin: 0;
	line-height: 1.5;
}

a {
	text-decoration: none;
}

img, video {
	max-width: 100%;
	display: flex;
}

.flex.duck {
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}

.duck img {
	max-width: 100vw;
	max-height: 80vh;
}

.hero {
	background-image: url(banner.png);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: contain;	
}

.hero-box {
	background: rgba(0, 0, 0, 0);
	width: 100vw;
	aspect-ratio: 38/9;
}

#wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main {
	flex: 1;
}

.contact {
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-evenly;
	align-items: center;
	padding: 2%;
	text-decoration: none;
}

.contact div {
	flex-flow: column nowrap;
	justify-content: center;
	aspect-ratio: 1/1;
}

.contact img {
	max-width: 100px;
	padding: 10px;
}

.contact p {
	font-weight: bold;
	text-decoration: none;
}



/* skip navigation link */
.skip {
position: absolute;
left: -999px;
}
.skip:focus {
color: #fff;
background-color: #333;
text-decoration: none;
padding: 0.5%;
top: auto;
left: auto;
right: 1px;
z-index: 1;
}

/* mobile */

/* show mobile class and hide tab-desk class */
.mobile, .mobile-tablet {
	display: flex;
}

.tab-desk, .desktop, #nav-links {
	display: none;
}

/* header */
.mobile h1, .mobile h3 {
	padding: 2%;
	float: center;
}
.mobile h1 {
	font-family: Arial, sans-serif;
	margin: 2% 0 0 3%;
}
.mobile h3 {
	font-family: Arial, sans-serif;
}

/* navigation */
nav {
	background-color: #333333;
	display: flex;
	justify-content: space-evenly;
	align-content: space-evenly;
}

.mobile-nav {
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-evenly;
	padding: 2%;
}

.mobile-nav ul {
	display: flex;
	flex-flow: column wrap;
	align-content: flex-start;
}

.mobile-nav li {
	display: flex;
	width: 100%;
	font-size: 1.25em;
	font-family: Arial, sans-serif;
	font-weight: bold;
	padding: 2%;
	align-items: center;
}

.mobile-nav li a div {
	display: flex;
	align-self: center;
}

.mobile-nav a {
	display: flex;
	color: #fff;
	align-content: center;
	font-size: 2em;
	text-decoration: none;
	padding: 2%;
	display: flex;
	justify-content: center;
}

.mobile-nav img {
	display: flex;
	flex-direction: row;
	max-width: 50px;
	max-height: 50px;
	margin-right: 6%;
	justify-content: center;
	align-items: center;
}

.mobile-nav a.nav-icon {
	color: #fff;
	margin: 1px;
	cursor: pointer;
}
.nav-icon div {
	height: 40px;
	width: 40px;
	color: #fff;
}

#closeIcon {
	display: none;
}

/* main content */

main {

	font-family: Arial, sans-serif;
}
main p {
	font-size: 1.24em;
}
main h3 {
	padding: 2%;
}
main ul {
	list-style-type: square;
}

.link { 
	color: #bfd2d9;
	text-decoration: none;
	font-weight: bold;
	font-style: italic;
}

.flex {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	align-items: flex-start;
	row-gap: 20px;
	column-gap: 20px;
	padding: 4%;
}

.flex.right {
	float: inline-start;
	min-width: 40vw;
	padding: 0;
}

.flex.text {
	flex-flow: column nowrap;
	max-width: 80vw;
}

.flex.text h1,.flex.text h3 {
	text-align: center;
	align-self: center;
}

figure {
	display: flex;
	flex-flow: column nowrap;
	border: 4px solid #333333;
    border-radius: 8px;
    padding: 0;
	margin: 2%;
	box-shadow: 5px 5px 15px #8e29cd;
	max-width: 400px;
}

figure h1, figure h3 {
	color:#333;
	padding: 0;
	margin: 2%;
}

figure.mobile {
	align-self: flex-start;
}

figcaption {
	padding: 2%;
    position: left;
    font-weight: bold;
}

.events {
	display: flex;
	margin: 2%;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}

figure.events {
	align-self: stretch;
	max-width: 100%;
	padding: 2%;
}

.location {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	width: 90%;
}

.venue {
	font-size: 1.5em;
}

.address, .city {
	padding: 0;
}

.city {
	margin-bottom: 3%;
}

.date {
	font-size: 2.25em;
}

.news {
	display: flex;
	margin: 2%;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}

.news h1 {
	align-self: center;
}

.news h3 {
	align-self:center;
}

figure.news {
	align-self: stretch;
	max-width: 100%;
	padding: 2%;
}

.headline {
	font-size: 2.25em;
}

.story {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	width: 90%;
}

.releaseDate {
	font-size: 1.25em;
}

.storyText {
	padding: 0;
	margin-bottom: 3%;
}

iframe {
	border: 0; 
	width: 350px; 
	height: 350px;
}

iframe.mobile {
	border: 0; 
	width: 280px; 
	height: 394px;
}

/* footer */
footer {
	display: flex;
	flex-flow: column-reverse nowrap;
	justify-content: center;
	align-items: center;
	font-size: 0.85em;
    font-family: Arial, sans-serif;
	background-color: #333333;
	color: #f3fbf7;
	padding: 1% 1%;
}
footer a {
	color: #f3fbf7;
	text-decoration: none;
}
.social {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	margin: 2%;
}

.social img {
	height: 40px;
	width: 40px;
	margin: 10px;
	padding: 2px;
}

/* Tablet Viewport */
@media screen and (min-width: 620px), print {
	
/* show tab-desk class and hide mobile class */
	.tab-desk, figure.mobile, iframe.mobile {
		display: flex;
	}
		
	.mobile, .mobile-nav, figure.tab-desk {
		display: none;
	}
	/* tablet nav area */
	nav ul {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-evenly;
	}
	
	nav li {
		display: flex;
		font-size: 1.5em;
		font-family: Arial, sans-serif;
		font-weight: bold;
	}
		
	nav li a {
		display: flex;
		flex-direction: column;
		padding: 0.5em 1.5em;
		color: #f3fbf7;
		text-decoration: none;
	}
	
	nav li a:hover {
		color: #f3fbf7;
		background-color: #8e29cd;
		border-radius: 7px;
	}

	nav img {
		display: flex;
		max-width: 60px;
		justify-self: center;
		align-self: center;
	}

	.flex {
		padding: 2%;
	}

	.flex.text {
		float: left;
		flex-flow: column nowrap;
		justify-content: flex-start;
		text-align: left;
		max-width: 40vw;
	}

	figure {
		display: flex;
		border: 4px solid #333333;
		border-radius: 8px;
		padding: 0;
		box-shadow: 5px 5px 15px #8e29cd;
		max-width: 400px;
	}
		
	/* tablet footer*/
	footer {
		flex-flow: row nowrap;
		overflow: auto;
	}

	.copyright {
		width: 65%;
	}
}

/* Desktop Viewport */
@media screen and (min-width: 1000px), print {
	
	.desktop, figure.tab-desk {
		display: flex;
	}
	.mobile-tablet, figure.mobile, iframe.mobile {
		display: none;
	}
	/* desktop nav area */
	
	nav li {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-evenly;
		font-size: 1.5em;
	}
	nav li a {
		padding: 0.5em 1.5em;
	}
	nav li a:hover {
		color: #f3fbf7;
		background-color: #8e29cd;
	}
	
}

/* Large Desktop Veiwports */
@media screen and (min-width: 1921px), print {
	body {
		background: linear-gradient(#f3fbf7, #bfd2d9);
	}
	#wrapper {
		width: 1920px;
		margin: 0;
	}
	
	main {
		background-color: #f3fbf7;
	}
}

/* Print */
@media print {
	body {
		background-color: #fff;
		color: #000;
	}
}