#AppComponent.container {
	position: relative;
	overflow: hidden;
	/* display: flex;
	flex-direction: column; */
	background-color: var(--colorLightestGrey);
	height: 100%;
	overflow-y: scroll;
	font-family: 'OpenSans';
	padding-left: 20vw;
	padding-right: 20vw;
}

#AppComponent>.contents {
	position: relative;
	flex-grow: 1;
}

.background {
	width: 60vw;
	height: 100vh;
	top: 18vh;
	left: 20vw;
	position: fixed;
	background-color: white;
}

.blood {
	width: 60vw
}

.bgBlock {
	width: 36vw;
	height: 50vh;
	position: absolute;
	top: 20vh;
	left: 32vw;
	background-color: white;
}

.header {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100vh;
	background-color: var(--colorRed);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: 1s;
	transition-delay: 1s;
	z-index: 100;
	opacity: 0;
	pointer-events: none;
}

.headerBlock {
	background-color: var(--colorRed);
	height: 18vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 60vw;
	margin-bottom: -8vh;
}

.logo {
	width: 18vh;
	height: 9vh;
	z-index: 10;
	/* position: absolute;
	top: 1vh; */
	margin-top: -8vh;
	transition: 1s;
	transition-delay: 1s;
}

.logoBig {
	position: absolute;
	width: 50vh;
	height: 25vh;
	top: 25vh;
}

.content {
	position: relative;
	height: 50vh;
	opacity: 1;
	color: black;
	text-align: center;
	width: 480vw;
	display: flex;
	flex-direction: row;
	left: 0px;
	transition: 1s;
	margin-left: -20vw;
}

.content-compact {
	position: relative;
	height: 30vh;
	opacity: 1;
	color: black;
	text-align: center;
	width: 480vw;
	display: flex;
	flex-direction: row;
	left: 0px;
	transition: 1s;
	margin-left: -20vw;
}

.text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 50vh;
	width: 100vw;
	min-width: 100vw;
	padding-left: 35vw;
	padding-right: 35vw;
}

.text-compact {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 30vh;
	width: 100vw;
	min-width: 100vw;
	padding-left: 35vw;
	padding-right: 35vw;
}

.largeText {
	font-size: 6vh;
	font-weight: 400;
	font-style: normal;
	color: var(--colorRed);
	text-transform: uppercase;
	font-family: 'Farmhand';
}
.mediumText {
	font-size: 4vh;
	color: var(--colorRed);
	text-transform: uppercase;
	font-family: 'Farmhand';
	margin-top: 1vh;
}
.mediumTextRed {
	font-weight: 400;
	font-style: normal;
	color: var(--colorRed);
	font-size: 4vh;
}

.smallText {
	/* color: var(--colorRed); */
	font-size: 3vh;
}

.button {
	font-size: 3vh;
	height: 8vh;
	width: 40vh;
	border-radius: 8vh;
	margin-bottom: 4vh;
	line-height: 3.8vh;
	text-transform: uppercase;
	background-color: var(--colorRed);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* font-weight: 600; */
	font-family: 'Lemonmilk';
	color: white;
}

.button:active{
	transform: scale(0.9);
}

.button.disabled {
	pointer-events: none;
	opacity: 0.7;
}

.footer {
	position: relative;
	height: 45vh;
	color: white;
}

.footerText {
	color: black;
	font-size: 3vh;
	margin-bottom: 2vh;
	font-weight: 400;
}

.footerTop {
	position: relative;
	height: 40vh;
	width: 60vw;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.footerBottom {
	position: absolute;
	bottom: 0px;
	width: 60vw;
	height: 10vh;
	background-color: black;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: 300;
	font-size: 2vh;
}

.extraMargin{
	height: 6vh;
	width: 100vw;
}

@media (orientation: portrait) {
	#AppComponent.container {
		padding-left: 0px;
		padding-right: 0px;
		background-color: white;
	}
	.background {
		display: none;
	}
	.bgBlock {
		display: none;
	}
	.header {
		opacity: 0;
		pointer-events: none;
	}
	.headerBlock {
		height: 20vw;
		width: 100vw;
		margin-bottom: 0px
	}
	.logo {
		width: 40vw;
		height: 20vw;
		margin-top: 0px;
	}
	.logoBig {
		position: absolute;
		width: 80vw;
		height: 40vw;
		top: 25vh;
	}
	.content {
		height: 100vw;
		width: 500vw;
		margin-left: 0px;
	}
	.content-compact {
		height: 60vw;
		margin-left: 0px;
		width: 500vw;
	}
	.text {
		padding: 8vw;
		padding-bottom: 0;
		padding-top: 12vw;
		height: 80vw;
	}
	.text-compact {
		height : 60vw;
		padding: 8vw;
		width: 100vw;
		padding-left: 8vw;
		padding-right: 8vw;
		margin-left: 0;
		margin-right: 0;
	}
	.largeText {
		/* font-weight: 600; */
		font-size: 12vw;
		margin-bottom: 2vw;
	}
	.mediumText {
		font-size: 8vw;
		margin-bottom: 2vw;
	}
	.mediumTextRed {
		font-size: 4vh;
		margin-bottom: 2vw;
	}
	.smallText {
		font-size: 5vw;
		margin-bottom: 2vw;
	}
	.button {
		font-size: 4.2vw;
		height: 14vw;
		width: 80vw;
		border-radius: 10vw;
		margin-bottom: 6vw;
		line-height: 3.8vw;
	}
	.footer {
		height: 80vw
	}
	.footerTop {
		height: 50vw;
		width: 100vw;
	}
	.footerText {
		color: black;
		font-size: 5vw;
		margin-bottom: 5vw;
	}
	.footerBottom {
		height: 20vw;
		font-size: 4vw;
		width: 100vw;
	}
	.extraMargin{
		height: 8vw;
	}
	.socialDiv{
		width: 40vw;
		margin-top: 6vw;
	}
	.socialIcon{
		height: 8vw;
		width: 8vw;
	}
}

@media (min-aspect-ratio: 3/4) and (max-aspect-ratio: 1/1) and (orientation: portrait) {

}