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

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

	.allContent {
		min-height: 100vh;

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

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

	.bodyContent {
		flex: 1;

		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		width: 88%;
		margin: 10% 6% 6% 6%;
	}

	.bodyContent > div {
		margin-top: 4vw;
	}


	#splash {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-end;
	}


		#cta {
			width: 44%;
		}

		#logo {
			width: 100%;
		}

		#graphicNovel {
			width: 100%;

			color: #8c6345;
			font-size: 2vw;
			text-align: center;
			text-shadow: -2px 2px 3px #000;
		}

		#synopsis {
			width: 100%;
			color: #8c6345;
			font-size: 1.6vw;
			line-height: 2.2vw;
		}


		#begin {
			width: 100%;

			line-height: 4.3vw;
			text-align: center;
			font-size: 2.64vw;
			padding-left: 1vw;
		}

		#social {
			width: 24%;
			margin-left: 18%;
			margin-bottom: 9%;
		}

			#follow {
				width: 100%;
				text-align: center;
			}

			#topnav_social {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: center;
			}

				#topnav_social > .secondSocial {
					margin-left: 1.5vw;
				}

				#topnav_social img {
					max-height: 2.2vw;
				}

				#topnav_social img:hover {
					-webkit-filter: brightness(200%);
				}

}


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

	.allContent {
		min-height: 100vh;

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

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

	.bodyContent {
		flex: 1;

		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		width: 80%;
		margin: 24% 10% 10% 10%;
	}

	.bodyContent > div {
		margin-top: 4vw;
	}


	#splash {
		width: 100%;
		display: flex;
		flex-direction: column;

	}


		#cta {
			width: 100%;
		}

		#logo {
			width: 100%;
		}

		#graphicNovel {
			width: 100%;

			color: #8c6345;
			font-size: 5vw;
			text-align: center;
			text-shadow: -2px 2px 3px #000;
		}

		#synopsis {
			width: 100%;
			color: #8c6345;
			font-size: 4vw;
			line-height: 5vw;
		}


		#begin {
			width: 100%;

			line-height: 10vw;
			text-align: center;
			font-size: 5vw;
			padding-left: 1vw;
		}

		#social {
			width: 40%;
			margin-top: 4vw;
			align-self: center;
		}

			#follow {
				width: 100%;
				text-align: center;
			}

			#topnav_social {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: center;
			}

				#topnav_social > .secondSocial {
					margin-left: 3vw;
				}

				#topnav_social img {
					max-height: 5vw;
				}

				#topnav_social img:hover {
					-webkit-filter: brightness(200%);
				}


}

}