/*Colors

Orange	: #fa6a0a
Teal 	: #425064
Text 	: #212121

*/

h1, h2, h3, h4, h5 {margin-top: 0px;}

img {
	image-rendering: auto;
}

body {
	font-family: Helvetica, Arial;
	font-size: 16px;
	letter-spacing: 1px;
	background-color: white;
	margin: 0 auto;
}

p {line-height: 150%;}

p, th {color: #212121;}

h1 {
	font-family: Futura;
	font-weight: normal;
	letter-spacing: 2px;
	font-size: 42px;

	margin-top: 0px;

	text-align: left;
	color: #fa6a0a;
}

h2 {
	font-family: Futura;
	font-weight: normal;
	letter-spacing: 2px;
	font-size: 30px;

	padding: 0;
	margin-top: 0px;
	margin-bottom: 0px;

	text-align: left;
	color: #fa6a0a;
}

.bottomDash {
	padding-bottom: 8px;

	border-style: dashed;
	border-width: 0 0 2px 0;
	border-color: #fa6a0a;
}

p > a, th > a {
	color: #37b1c8;
	text-decoration: none;
	border-width: 0 0 2px 0;
	border-style: dotted;
}

p > a:hover, p > a:active,
th > a:hover, th > a:active {
	color: white;

	border-style: none;
	border-radius: 2px;

	background-color: #fa6a0a;
}

ul > li {
	line-height: 150%;
}

table {
	width: 100%;
	border-collapse: collapse;
}

td, th {
	padding: 10px;

	border-style: solid;
	border-width: 1px;
	border-color: #D4D3D8;

	text-align: left;
	font-weight: normal;
	font-size: 15px;

	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 1px;
}

tr:first-child th {
	color: white;
	font-weight: bold;

	border-style: none;
	background-color: #fa6a0a;
}

.rightFloatImg {
	float: right;
	width: 200px;
	margin: 8px 0 5px 25px;
	border-radius: 8px;
}

.rightFloatImgPixelArt {
	width: 248px;
	margin: 8px 0 5px 25px;
	float: right;

	image-rendering: crisp-edges;
}

.leftFloatImg {
	float: left;
	width: 200px;
	margin: 8px 25px 5px 0;
	border-radius: 8px;
}

/*This exists to position the footer at the bottom of the page*/
#bigContainer {
	/*(viewport height - total footer height, including margins and padding)*/
	min-height: calc(100vh - 225px);
}

.container {
	max-width: 900px;
	min-width: 300px;

	min-height: 200px;

	margin: 0 auto;
}

.content {
	margin-top: 35px;
	padding: 0 25px;
}

						/*Navigation*/

#navigation {
	width: 100%;
	height: 59px;

	text-align: right;

	position: absolute;

	top: 0;
}

.navItem {
	margin: 20px;

	display: inline-block;

	font-family: Futura;
	text-transform: uppercase;
	color: #f4f4f4;
	font-weight: 200;
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 1);
	letter-spacing: .5px;
	text-decoration: none;

	opacity: 0.95;

	font-size: 15px;
}

.navItem:hover, .navItem:active {
	opacity: 1;
	color: white;
}

#navigation > ul, #navigationSmall > ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#navigation > ul > li, #navigationSmall > ul > li {
	display: inline;
	line-height: 100% !important;
}

#navSmallContainer {
	width: 100%;
	height: 58px;

	display: flex;
	justify-content: flex-end;
	align-items: center;

	background-color: #425064;
}

#navigationSmall {
	width: 100%;

	text-align: right;
}

#navigationSmall > ul > li > .navItem {
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0);
}

						/*Banner*/

#mainBanner {
	width: 100%;
	height: 470px;
	position: relative;

	border-radius: 2px 2px 0 0;

	background-color: #425064;
	background-image: url("/assets/bannerImg.jpg");
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;

/*	display: flex;
	justify-content: flex-end;
	align-items: flex-end;*/
}

#mainBanner > .overlay {
	width: 100%;
	height: 100%;
	position: relative;
	top: 0;
	left: 0;
	/*background-color: rgba(31, 94, 97, 0.6);*/
	background-image:
		linear-gradient(rgba(198, 100, 34, 0.2), rgba(31, 94, 97, 0.5));
	/*backdrop-filter: blur(3px);*/
}

#topLogo {
	position: absolute;
	top: 15px;
	left: 15px;
}

						/*Announcements*/

.announcement {
	width: 100%;
	background-color: #4cb3c6;
}

.announcementContent {
	max-width: 900px;
	min-width: 300px;

	margin: 0 auto;
}

.announcementContent > p {
	color: white;
	text-align: center;

	margin: 0;

	padding: 15px 10px;

	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

.announcementContent > p::selection {
	background: orange;
}

.announcementContent > p > b::selection {
	background: orange;
}

.announcementContent > p > a {
	color: white;
	font-weight: bold;
}

.announcementContent > p > a::selection {
	color: white;
	font-weight: bold;
	background: orange;
}

						/*About Section*/

#aboutUs {
	position: absolute;
	top: 50%;
	transform: translate(0, -30%);

	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

#aboutUs > h1 {
	font-family: Futura;
	font-weight: bold;
	letter-spacing: 2px;
	font-size: 42px;

	padding: 0 20px 0 20px;
	margin-top: 0px;

	text-align: center;

	color: #f5f5f5;
}

#aboutUs > p {
	font-family: "Helvetica Neue", Helvetica, Arial;
	font-size: 19px;
	line-height: 150%;
	text-align: center;
	letter-spacing: .5px;

	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 0;

	color: #e1e1e1;

	/*color: #242224;*/

	/*color: #F5F6F0;*/
}

						/*What We Do*/

#whatWeDoContainer {
	width: 100%;

	margin-top: 70px;

	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.wwdMeet, .wwdWork, .wwdJam, .wwdDiscuss {
	width: 200px;

	padding: 0 25px;
}

.wwdMeet > h2, .wwdWork > h2, .wwdJam > h2, .wwdDiscuss > h2 {
	padding-left: 40px;
	padding-top: 0px;
	padding-bottom: 10px;
	margin-top: 1px;
	line-height: 1;

	font-family: Futura;
	font-size: 30px;
	font-weight: normal;
	color: #fa6a0a;

	border-style: dashed;
	border-width: 0 0 2px 0;
	border-color: #fa6a0a;

	text-align: right;
}

.wwdMeet {
	background-image: url(/assets/wwd-buttons/meet.gif);
	background-position: 25px 0;
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
}

.wwdWork {
	background-image: url(/assets/wwd-buttons/work.gif);
	background-position: 25px 0;
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
}

.wwdJam {
	background-image: url(/assets/wwd-buttons/jam.gif);
	background-position: 25px 0;
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
}

.wwdDiscuss {
	background-image: url(/assets/wwd-buttons/discuss.gif);
	background-position: 25px 0;
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
}

.wwdMeet > p, .wwdWork > p, .wwdJam > p, .wwdDiscuss > p {
	font-size: 15px;
	line-height: 145%;
	letter-spacing: .6px;

	color: #212121;
}

						/*Big Buttons*/

#bigButtons {
	width: 100%;
	height: 200px;
	margin-top: 40px;
}

.discordLink, .eventsLink {
	width: 48%;
	height: 200px;
}

.discordLink {
	float: left;

	background-color: #7289DA;

	background-image: url("/assets/discordLogoWhite.png");
	background-position: right 30px center;
	background-repeat: no-repeat;
	background-size: 85px;
	background-origin: content-box;
}

.eventsLink {
	float: right;

	background-color: #fa6a0a;

	background-image: url("/assets/calendar.png");
	background-position: left 30px center;
	background-repeat: no-repeat;
	background-size: 100px;
	background-origin: content-box;
}

.discordLink, .eventsLink {
	text-decoration: none;
	position: relative;

	transition: background-color 0.18s,
				background-size 0.15s,
				color 0.2s;
	transition-timing-function: ease-out;
}

.discordLink:hover, .discordLink:active {
	background-color: #4e73b0;
	background-size: 80px;
	color: #f0f0f0;
}

.eventsLink:hover, .eventsLink:active {
	background-color: #df3e23;
	background-size: 95px;
	color: #f0f0f0;
}

.discordLink > .bigButtonContent, .eventsLink > .bigButtonContent {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	margin: 0;
	padding: 30px;
}

.discordLink > .bigButtonContent {
	margin-right: 106px;
}

.eventsLink > .bigButtonContent {
	margin-right: 0px;
	margin-left: 130px;
}

.bigButtonContent > h1 {
	font-size: 23px;
	font-weight: bold;
	color: white;
}

.bigButtonContent > p {
	padding: 0;
	margin-bottom: 0;

	font-size: 13px;
	line-height: 150%;
	color: white;
}

					/*Social Buttons*/

#socialButtonContainer {
	width: 100%;
	height: 50px;

	display: flex;
	justify-content: center;
	align-items: center;

	background-color: #425064;
}

.socialButtons {
	width: 100%;
	margin: 0 auto;
	font-size: 0;
	text-align: center;
}

.sbDISC, .sbFACE, .sbTWITTER, .sbINSTA, .sbTWITCH, .sbYT {
	height: 50px;
	width: 50px;
	margin: 0 8px;

	display: inline-block;

	border-radius: 18px;

	opacity: 0.6;

	transition: opacity 0.15s;
	transition-timing-function: ease-out;
}

					/*Footer*/
#footer {
	width: 100%;

	padding: 35px 0 18px 0;
	margin-top: 70px;

	background-color: #425064;
}

.footerText {
	width: 100%;

	margin-top: 35px;

	text-align: center;
}

.footerText > p {
	margin: 0;
	color: #e1e1e1;
	font-size: 14px;
}

.sbDISC {
	background-image: url("/assets/social-buttons/discord.png");
}

.sbFACE {
	background-image: url("/assets/social-buttons/facebook.png");
}

.sbTWITTER {
	background-image: url("/assets/social-buttons/twitter.png");
}

.sbINSTA {
	background-image: url("/assets/social-buttons/instagram.png");
}

.sbTWITCH {
	background-image: url("/assets/social-buttons/twitch.png");
}

.sbYT {
	background-image: url("/assets/social-buttons/youtube.png");
}

.sbDISC:hover, .sbFACE:hover, .sbTWITTER:hover, .sbINSTA:hover, .sbTWITCH:hover, .sbYT:hover
.sbDISC:active, .sbFACE:active, .sbTWITTER:active, .sbINSTA:active, .sbTWITCH:active, .sbYT:hover
{
	opacity: 1.0;
}

.socialButtons > ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	padding-inline: 0;
}

.socialButtons > ul > li {
	display: inline;
	line-height: 100% !important;
}

						/*Video*/

.video {
	margin-top: 70px;

	position: relative;
	padding-top: 56.25%;
	background-color: blue;
}

.video > iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
				/*///////////////*/
				/* Device Widths */
				/*///////////////*/

@media only screen and (max-width: 1730px) {
	#aboutUs {
		top: calc(50% + 10px);
		transform: translate(0, -28%);
	}
}

@media only screen and (max-width: 900px) {
	.bigButtonContent h1 {
		font-size: 20px;
	}
}

@media only screen and (max-width: 810px) {
	#aboutUs > h1 {
		font-size: 35px;
	}

	#aboutUs > p {
		font-size: 18px;
	}

	.wwdMeet > h2, .wwdWork > h2, .wwdJam > h2, .wwdDiscuss > h2 {
		font-size: 23px;
		padding-bottom: 17px;
	}
}

@media only screen and (max-width: 760px) {
	#navigation {
		padding-right: 0;
	}

	.navItem {
		font-size: 15px;
	}

	#whatWeDoContainer {
		display: inline-block;
	}

	.wwdMeet, .wwdWork, .wwdJam, .wwdDiscuss {
		padding-left: 15px;
		padding-right: 15px;
		width: calc(50% - 30px);
		float: left;
	}

	.wwdMeet > h2, .wwdWork > h2, .wwdJam > h2, .wwdDiscuss > h2 {
		font-size: 23px;
		padding-bottom: 17px;

		/*Return to the font size in main definiton*/
		font-size: 30px; 
	}

	.wwdDiscuss, .wwdJam, .wwdWork, .wwdMeet {
		background-position: 15px 0;
	}
}

/*Navigation has become too wide*/
@media only screen and (max-width: 760px) {
	#navigation > ul > li {
		display: block;
	}

	.navItem {
		margin-bottom: 0;
	}

	#aboutUs > h1 {
		font-size: 30px;
	}

	#whatWeDoContainer {
		margin-top: 30px;
	}

	#bigButtons {
		margin-top: 0;
		height: 400px;
	}

	.discordLink, .eventsLink {
		width: 100%;
	}

	.sbDISC, .sbFACE, .sbTWITTER, .sbINSTA, .sbTWITCH, .sbYT {
		margin: 0 5px;
	}

	/*Navigation for non-homepage*/

	#navSmallContainer {
		height: auto;
		display: block;
	}

	#navigationSmall {
		padding-bottom: 20px;
	}

	#navigationSmall > ul > li {
		display: block;
	}

	/*Table size*/

	tr, th {
		font-size: 13px;
		padding-left: 4px;
		padding-right: 4px;
	}

	/*Inline Images*/

	.leftFloatImg, .rightFloatImg {
		width: 120px;
		height: 120px;
		margin-top: 5px;
	}

	.rightFloatImgPixelArt {
		width: 186px;
		margin-top: 5px;
		margin-left: 15px;
	}

	.rightFloatImg {
		margin-left: 15px;
	}

	.leftFloatImg {
		margin-right: 15px;
	}

	h1 {
		font-size: 30px;
	}

	h2 {
		font-size: 24px;
	}
}

@media only screen and (max-width: 420px) {
	#topLogo {
		width: 128px;
	}

	#aboutUs > h1 {
		font-size: 22px;
	}

	#aboutUs > p {
		font-size: 16px;
	}

	.bigButtonContent > h1 {
		font-size: 16px
	}

	.wwdMeet, .wwdWork, .wwdJam, .wwdDiscuss {
		padding-left: 15px;
		padding-right: 15px;
		width: calc(100% - 30px);
		float: left;
	}

	.rightFloatImgPixelArt {
		width: 124px;
		margin-top: 5px;
		margin-left: 15px;
	}

	.sbDISC, .sbFACE, .sbTWITTER, .sbINSTA, .sbTWITCH, .sbYT {
		width: 40px;
		height: 40px;

		border-radius: 15px;

		background-position: center;
		background-repeat: no-repeat;
		background-origin: content-box;
	}


}

@media only screen and (max-width: 375px) {

}

@media only screen and (max-width: 320px) {
	.content {
		padding: 0 15px;
	}

	#topLogo {
		width: 96px;
	}

	#navigation > ul, #navigationSmall > ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		padding-top: 10px;
	}

	.navItem {
		margin: 7px 10px;
	}

	h1 {
		font-size: 22px;
	}

	h2 {
		font-size: 18px;
	}

	body {
		font-size: 13px;
	}

	#aboutUs > p {
		margin-left: 10px;
		margin-right: 10px;
	}

	.footerText > p {
		font-size: 12px;
	}


	.leftFloatImg, .rightFloatImg {
		width: 96px;
		height: 96px;
		margin-top: 5px;
	}

	.sbDISC, .sbFACE, .sbTWITTER, .sbINSTA, .sbTWITCH, .sbYT {
		margin-left: 3px;
		margin-right: 3px;
	}

	tr, th {
		font-size: 11px;
		padding-left: 2px;
		padding-right: 2px;
	}

	td, th {
		padding-top: 8px;
		padding-bottom: 8px;
	}
}