/* #region All */
* {
	box-sizing: border-box;
	font-family: sans-serif;
	margin: 0;
	border: 0;
	padding: 0;
}
/* #endregion All */

/* #region Tier 1 */
html,
body {
	background-color: cyan;
}
body {
	padding: 3vw;
}
/* #endregion Tier 1 */

/* #region Tier 2 */
h1 {
	color: blue;
	text-align: center;
	font-family: Arial, sans-serif;
	margin-bottom: 3vh;
}
main {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
h5 {
	text-align: center;
	font-family: Arial, sans-serif;
	font-weight: normal;
	margin-top: 5vh;
	color: blue;
}
h5 i {
	color: orange;
}
footer {
	display: none;
	position: fixed;
	top: 20vh;
	bottom: 20vh;
	left: 20vw;
	right: 20vw;
	background-color: #119191;
	opacity: 0.9;
	color: #dddddd;
	padding: 7vmin;
	border-radius: 10px;
	font-size: 1.3em;
}
#php {
	display: none;
}
#buttonSluiten {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: red;
	color: white;
	margin: 0;
	padding: 0;
	line-height: 1;
	cursor: pointer;
}
/* #endregion Tier 2 */

/* #region Tier 3 */
section {
	display: flex;
	height: 30vh;
	width: 100%;
}
#sectionFormulier {
	position: relative;
	height: 40vh;
}
form {
	overflow-y: auto;
	padding-right: 1vw;
}
.fade-top {
	mask-image: linear-gradient(to bottom, transparent 0, black 40px, black 100%);
}
.fade-bottom {
	mask-image: linear-gradient(to bottom, black 40px, black calc(100% - 40px), transparent 100%);
}
.fade-both {
	mask-image: linear-gradient(to bottom, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
}
article {
	position: relative;
}
#articleVoorbeeld {
	width: 60%;
}
#articleKoker {
	position: relative;
	width: 40%;
}
label {
	/* text-align: right; */
	font-weight: bold;
	color: blue;
}
#modelViewer,
img {
	height: 80%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#imgBovenop,
#imgZijkant {
	display: none;
}

form>p {
	position: absolute;
	top: 1rem;
	width: 100%;
	text-align: center;
	font-size: 1.5em;
	opacity: 0.5;
	color: green;
	pointer-events: none;
	display: none;
}
.show {
	display: block;
}
form>p:last-of-type {
	top: auto;
	bottom: 1rem;
}
form div {
	display: flex;
	justify-content: space-between;
	margin-bottom: 1vh;
}
#divBovenopKleur,
#divBovenopTekst,
#divZijkantKleur,
#divZijkantTekst {
	display: none;
}
aside {
	margin-top: 3vh;
	border: solid 1px blue;
	border-radius: 10px;
	padding: 1vw;
	font-style: italic;
	font-size: 0.9em;
}
/* #endregion Tier 4 */

/* #region Tier 5 */
div label {
	display: block;
	width: 25%;
}
div > :nth-child(2) {
	display: block;
	width: 75%;
}
div > p > input {
	width: 4em;
	text-align: right;
	padding-right: 1vw;
}
div > p > span {
	display: inline-block;
	width: 80%;
	text-align: right;
}
#eindbedrag {
	width: 5em;
	margin-left: 1vw;
	font-size: 1.5em;
	font-weight: bold;
	color: blue;
}
input,
select,
textarea {
	font-size: 1.1em;
	padding-left: 1vw;
}
input[name="inputBovenopTekst"], textarea[name="inputZijkantTekst"] {
	text-align: center;
}
textarea {
	height: 3.6em;
}
#pAantal,
#pButtons {
	display: flex;
	justify-content: space-between;
}
/* #endregion Tier 5 */

/* #region Tier 6 */
button {
	margin: 1vw 0;
	border-radius: 10px;
	border-style: none;
	padding: 5px 15px;
	font-size: 1.1em;
	color: cyan;
	cursor: pointer;
}
#buttonBestellen {
	background-color: green;
}
#buttonHerstellen {
	background-color: red;
}
/* #endregion Tier 6 */

/* #region Media Queries */
@media (orientation: landscape) {
	main {
		flex-direction: row;
		gap: 3vw;
	}
	section {
		flex-direction: column;
		justify-content: flex-start;
		width: 30%;
		height: 80vh;
	}
	#sectionFormulier {
		width: 70%;
		height: 70vh;
	}
	article {
		width: 100%;
	}
	#articleVoorbeeld {
		height: 30vh;
		width: 100%;
	}
	#articleKoker {
		height: 40vh;
		width: 100%;
	}
}
/* #rendregion Media Queries */