@media only screen and (min-width: 1100px) {	/* desktop */

	.inlineArrow {
		vertical-align: middle;
		max-height: 2.4vw;
	}

	.allContent {
		min-height: 100vh;

		background-image: url('../ui_art/bg_secondary_full.jpg');
		background-size: 100vw;
		background-repeat: no-repeat;

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

	#page-title {
		width: 90%;
		margin: 4% 6% 0% 6%;
	}

		#title {
			width: 25%;
			position: relative;
		}

		#logo {
			width: 100%;
		}

		#page-header {
			font-size: 3.6vw;
			color: #e9daa1;
			text-shadow: -3px 3px 6px #000;
			margin-left: 2%;
			margin-top: 1%;
		}

	.bodyContent {
		flex: 1;

		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		width: 84%;
		margin: 0% 8% 8% 8%;
	}

	.bodyContent > div {
		margin-top: 3%;
	}
	
}


@media only screen and (max-width: 1099px) {	/* mobile */
.inlineArrow {
		vertical-align: middle;
		height: 3vw;
	}

	.allContent {
		min-height: 100vh;

		background-image: url('../ui_art/bg_secondary_mobile.jpg');
		background-size: 100%;
		background-repeat: no-repeat;

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


	#page-title {
		width: 90%;
		margin: 6% 5% 0% 5%;
	}

		#title {
			width: 40%;
			position: relative;
		}

		#logo {
			width: 100%;
		}

		#page-header {
			font-size: 8vw;
			color: #e9daa1;
			text-shadow: -3px 3px 6px #000;
			margin-left: 4%;
			margin-top: 1%;
		}

	.bodyContent {
		flex: 1;

		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		width: 82%;
		margin: 0% 9% 9% 9%;
	}

	.bodyContent > div {
		margin-top: 2%;
	}

}

}