@font-face {
	font-family: GothamLight;
	src: url(../../Common/fonts/GothamLight.woff2) format("woff2"),
	  url(../../Common/fonts/GothamLight.woff) format("woff"),
	  url(../../Common/fonts/GothamLight.ttf) format("truetype");
}

@font-face {
	font-family: GothamBold;
	src: url(../../Common/fonts/GothamBold.woff2) format("woff2"),
	  url(../../Common/fonts/GothamBold.woff) format("woff"),
	  url(../../Common/fonts/GothamBold.ttf) format("truetype");
	}

@media screen and (min-width: 50em) {
	html {
		font-size: 2vmin;
	}
}

@media screen and (min-width: 75em) {
	html {
		/* font-size: 1.5em; */
	}
}

body {
	font-size: inherit;
	margin: 0px;
	padding: 0px;
	background-color: black;
}

.video {
	margin: 0 auto;
	width: 1280;
	height: 720p;
	display: none;
}

.gridMain {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 3% 3%;
	column-gap: 3%;
	grid-template-columns: 55% 42%;
	background-color: black;
	display: grid;
	grid-template-areas:
		"camera logo"
		"camera title"
		"camera description"
		"camera contact";

	place-items: center start;
}

@media (orientation: portrait) {
	.gridMain {
		padding: 1% 0%;
		grid-template-columns: 100%;
		grid-template-rows: auto auto 1fr auto;
		grid-template-areas:
			"logo"
			"title"
			"camera"
			"contact";

		place-items: center;
		row-gap: 1%;
		column-gap: unset;
	}
}

.gridMain.hidden {
	display: none;
}

.makeupOutput {
	place-self: stretch;
}

.cameraArea {
	grid-area: camera;
	overflow: hidden;
	z-index: 0;
}

.logo {
	grid-area: logo;
	object-fit: cover;
	max-height: 10vh;
	width: 33%;
}

@media (orientation: portrait) {
	.logo {
		width: 25%;
	}
}

.title {
	grid-area: title;
	color: white;
	display: flex;
	flex-direction: column;
}

@media (orientation: portrait) {
	.title {
		place-items: center;
	}
}

.titleTop {
	font-size: 150%;
	font-family: GothamLight;
	line-height: 100%;
}

@media (orientation: portrait) {
	.titleTop {
		font-size: 200%;
	}
}

.titleBottom {
	font-size: 200%;
	font-family: GothamBold;
	line-height: 100%;
}

.description {
	grid-area: description;
	color: white;
	font-family: GothamLight;
}

@media (orientation: portrait) {
	.description {
		display: none;
	}
}

.contactUs {
	width: 100%;
	height: 100%;
	border-radius: 20px;
	font-family: GothamBold;
	background: #3fb488;
	padding: 0;
	border: none;
	color: white;
	padding: 1vh 3vh;
	max-height: 5vh;
}

.contactUsCell {
	grid-area: contact;
	margin: 1vh;
}

.gridLoading {
	display: grid;
	visibility: hidden;
	background-color: black;
	position: absolute;
	place-items: center;
	grid-auto-flow: row;
	place-content: center;
}

.logoLoading {
	object-fit: cover;
	height: 100px;
}

.titleLoading {
	color: white;
	font-family: GothamLight;
	line-height: 100%;
	margin-top: 40px;
}

.HTML5Loading {
	color: white;
	font-family: GothamBold;
	line-height: 100%;
}

.loading {
	color: white;
	font-family: GothamLight;
	margin-top: 40px;
}

.progressBarDiv {
	margin-top: 20px;
}

.progressBar {
	width: 25em;
	height: 0.5em;
}

progress {
	border-radius: 10px;
}

progress::-moz-progress-bar {
	background: white;
	border-radius: 10px;
}

progress::-moz-progress-value {
	background: white;
	border-radius: 10px;
}

progress::-webkit-progress-value {
	border-radius: 10px;
	background: white;
}

progress::-webkit-progress-bar {
	border-radius: 10px;
}

#container {
	position: relative;
}