body { background: var(--BGlighter2); /*var(--BGgradient2);*/ }

#hero {
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	display: flex;
	height: 500px;
	background-color: black;
	overflow: hidden;
	box-shadow: 0 0 5px 2px #0009;
}
#hero > video {
	width: 60%;
	max-width: 1320px;
	object-fit: fill;
	filter: saturate(1.5) brightness(0.85);
}
#hero > img {
	width: 100%;
	max-width: 1980px;
	margin: 0 auto;
	object-fit: contain;
	filter: saturate(1.5);
	padding: 70px;
	background: #1c1e2a;
	min-height: 120px;
	color: white;
}
img#hero {
	display: block;
	min-height: 120px;
	color: white;
}
#hero > div {
	padding: 0 20px;
	background-color: var(--BGlighter2);
	box-shadow: -25px 0 30px 30px black;
	z-index: 1;
	height: 100%;
	display: flex; flex-direction: column; justify-content: space-between;
}
#hero > div > div { font-weight: 400; }
#hero > div > div:last-child { margin-bottom: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; }
#hero button {
	display: block;
	height: 55px;
	border: solid 2px white;
	box-shadow: 0 0 5px #0003;
	font-size: 20px;
	width: 500px;
	border-radius: 15px;
	color: white;
	cursor: pointer;
	position: relative;
	padding: 0 2.5%;
}
#hero button > img { position: absolute; right: 10px; top: 7%; height: 80%; width: 66px; filter: brightness(2); }
button#btn1 { background-color: var(--mainblue); padding: 0 3%; } #panel1 h2 { color: var(--mainblue); } button#btn1 > img { right: 8px; }
#btn2 { background-color: #058e42; } #panel2 h2 { color: #058e42; }
#btn3 { background-color: #9b6f24; } #panel3 h2 { color: #9b6f24; }

#hero.textonimg { height: 300px; }
#hero.textonimg > div {
	position: absolute;
	margin: auto;
	background-color: #0009;
	text-shadow: 0 0 20px #0006, 0 0 20px #0006;
	
	justify-content: center; 
	font-size: 28px;
	padding: 0px 100px;
}
#hero.textonimg > div > h2 { font-weight: 700; color: white; }
#hero.textonimg > img { padding: unset; width: 100%; position: relative; object-fit: cover; }

#swappables { margin: 40px auto 100px; }
#swappables > div {
	width: 90%;
	max-width: 1050px;
	display: flex; justify-content: center;
	margin: 20px auto;
	overflow: hidden;
	border-radius: 15px;
	color: black;
	box-shadow: 0 0 10px #0006;
	z-index: 1;
}
#swappables > div > img { /*height: 100%;*/ object-fit: cover; }
#swappables > div > div { padding: 20px; box-shadow: 0 0 25px 10px black; background-color: white; }
#swappables > div > * { min-width: 37.5%; }
#swappables > div p { margin: 8px 0; font-size: clamp(0.85rem, 1.25vw, 1rem); }
#swappables > div h2 { margin: 0 auto 10px; }

#swappables .underline { color: var(--mainblue); }

#timespot { display: flex; position: relative; text-align: center; gap: 1px; margin: auto; width: fit-content; }
#timespot > div:first-of-type > h3 { border-radius: 25px 0 0 25px; }
#timespot > div:last-of-type > h3 { border-radius: 0 25px 25px 0; }

#timespot > div > h3 {
	margin: 5px 0; font-size: 16px;
	display: block; position: relative;
	background: var(--BGgradient2);
}
#timespot:before {
	content: "";
	width: 100%; height: 35px;
	position: absolute; top: 5px;
	border-radius: 25px;
	background: linear-gradient(#d4d4d4, #a1a1a1, #a1a1a1, #a1a1a1, #b8b8b8);
	box-shadow: 0 2px 5px #0006;
}

.flexer { display: flex; justify-content: center; align-items: baseline; gap: 3px; }

.toobigtext { color: gray; font-size: 12px; }

#swappables .form {
	background: var(--coolcolor);
	border: solid 1px #0004;
	border-radius: 7px;
	display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 10px;
	padding: 5px;
	position: relative;
}
#swappables #printCADform { background: #acb8; }
#swappables #sendstonesform { background: #cba8; }

#swappables .form[inert]:before, #swappables .form[inert]:after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #0004 url(/static/img/icons/loading.svg) center / 15% no-repeat;
	z-index: 1;
	border-radius: 5px;
}

#swappables .form > div { max-width: 100%; position: relative; }
#swappables label:not(.textafter), #swappables .inputs { display: block; text-align: center; }
#swappables .inputs { background: white; border: solid 1px #0005; border-radius: 10px; padding: 2px 5px; max-width: calc(100% - 10px); margin: auto; }
#swappables label:has(textarea.inputs) { width: 100%; }
#swappables .checkinvalid .inputs:invalid:not(:focus), #swappables .checkinvalid .flexer:has(:invalid):not(:focus) + .thumbholder > button {
	background: #FFFEFE; border: solid 1px #D00; color: #D00;
}
#swappables textarea.inputs {
	resize: vertical; border-bottom-right-radius: 6px;
	width: 95%; min-height: 94px; max-height: 165px;
	text-align: left; font-family: inherit;
	margin: auto; font-size: 10pt;
}
/*#swappables textarea.inputs::-webkit-resizer { border: solid 10px; border-color: #0000 var(--mainblue) var(--mainblue) #0000; border-radius: 0 0 10px 0; }*/
.formbtn {
	background: #f8fcff; color: var(--mainblue);
	min-width: 50px; height: 50px; cursor: pointer;
	border: solid 1px var(--mainblue); border-radius: 7px;
}

#printCADform .formbtn, #printCADform input[type="submit"] { background-color: #f8fffc; border-color: #058e42; color: #058e42; }
#sendstonesform .formbtn, #sendstonesform input[type="submit"] { background-color: #fffff8; border-color: #9b6f24; color: #9b6f24; }

#swappables .formbtn:hover, #swappables .formbtn:focus { border-width: 2px; }
#swappables input[type="submit"] { font-size: 14px; }
#swappables select.inputs { padding: 2px 0; max-width: calc(100% - 2px); margin: 0 auto 4px; }
#swappables select.inputs:hover, #swappables select.inputs:focus { outline: 1px solid #0005; }

#swappables .split1 > h4 { color: black; text-align: center; margin: auto; padding-top: 5px; border-top: solid 1px #0008; }

.split1 { width: 100%; }
.split2 { width: 50%; }
.split2a { width: 40%; }
.split2b { width: 60%; }
.split4 { flex-grow: 1; }
.split4:has(select:disabled) { opacity: 0.5; }

select[name="CCdiamondtype"]:not(:disabled) > options:first-child { display: none; visibility: hidden; content-visibility: hidden; }

.filesize, .fileamount { width: 0; height: 0; opacity: 0; pointer-events: none; margin: 0 -5px -10px 0; user-select: none; }

.split2 > .flexer { flex-direction: column; align-items: center; }
.split2 > .toobigtext { margin: auto; }

.formframe {
	width: 96.5%; height: 350px;
	display: block; margin: 10px auto;
	border-radius: 7px; border: solid 1px #0003;
}

.infodiv {
	width: 90%;
	max-width: 1050px;
	position: relative;
	margin: 20px auto;
	background-color: white;
	padding: 5px 20px;
	border-radius: 15px;
	color: black;
	box-shadow: 0 0 10px #0006;
	z-index: 1;
}
.infodiv a { color: darkcyan; text-decoration: underline; }
.infodiv a:hover, .infodiv a:focus { color: #9ab; }
.infodiv h2 { color: var(--mainblue); text-wrap: balance; }

.infodiv:has(iframe:only-child) { padding: 5px 5px 1px 5px; }
.infodiv > iframe:only-child {
	width: 100%;
	height: 85dvh;
	border: none;
	border-radius: 10px;
}

#backtolog { text-align: center; width: 100%; padding: 0; }

.g-recaptcha { position: absolute !important; }
.grecaptcha-badge { z-index: 2 !important; bottom: 20px !important; }

.thankyou { display: none; }

.thankyou.submitted {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background: white;
	top: 0;
	left: 0;
	border-radius: 6px;
	text-align: center;
	text-wrap: balance;
	align-content: center;
}

.thankyou.submitted ~ * { visibility: hidden; }

@media (max-width: 1300px) {
	#hero > div {
		position: absolute; margin: auto;
		background-color: #0009; 
		text-shadow: 0 0 3px var(--shadowcolor), 0 0 3px var(--shadowcolor);
	}
	html:not([data-theme="dark"]) #hero:not(.textonimg) > div {
		background-color: #FFFC;
		box-shadow: 0 30px 30px #FFFC;
		text-shadow: 0 0 15px white, 0 0 15px white, 0 0 15px white;
	}
	#hero > div > div { max-width: 500px; margin: 0 auto; }
	#hero > video { width: 100%; }
	#hero > img { width: unset; margin-left: auto; }
}

@media (max-width: 1076px) {
	.split4 { width: 40%; }
	#swappables select.inputs { width: 182px; }
}

@media (max-width: 900px) {
	.split2 { width: 100%; }
	#hero { height: unset; background-color: unset; }
	#hero video { position: absolute; height: 100%; }
	#hero img { position: absolute; height: 100%; padding: 0; width: 100%; }
	#hero > div { width: 100%; padding: 0; position: relative; }
	#hero.textonimg > div { font-size: 22px; padding: 0; }
	#hero > div > div { max-width: 85%; }
	#hero > div > div:last-child { flex-direction: row; }
	#hero button { width: 33%; height: 135px; line-height: 20px; }
	#hero button > img { position: relative; display: block; margin: 10px auto auto; top: unset !important; right: unset; height: 50px; }

	.infodiv { flex-wrap: wrap; }
	p { font-size: clamp(0.85rem, 2vw, 1rem); padding: 0 calc(clamp(0.85rem, 2vw, 1rem)/2); }
	#swappables p { font-size: clamp(0.8rem, 1.75vw, 1rem); }
}

@media (max-width: 800px) {
	#swappables > div { flex-direction: column; }
	#swappables > div > div { border-top: solid 1.5vw; }
	#swappables > div > img {
		height: 20vw;
		object-fit: cover;
		object-position: 0 15%;
	}
	#swappables > div h2 {
		color: white;
		margin: -19vw auto 9vw; height: 9vw;
		display: flex; justify-content: center; align-items: center;
		text-shadow: 0 0 7px black, 0 0 15px black, 0 5px 15px black;
	}
	
	#swappables > #panel1 > div { border-color: var(--mainblue); }
	#swappables > #panel2 > div { border-color: #058e42; }
	#swappables > #panel3 > div { border-color: #9b6f24; }
}

@media (max-width: 600px) {
	#hero h2 { width: 300px; margin-left: auto; margin-right: auto; }
	#hero button { font-size: 16px; line-height: 17px; }
}

@media (max-width: 500px) {
	#swappables > div h2 {
		font-size: clamp(18px, 4vw, 24px);
		margin-top: -21vw;
		text-wrap: balance;
	}
}

@media (min-width: 3000px) {
	#hero.textonimg > div {
		width: 100%;
		padding: 0;
		background: none;
		/*text-shadow: 0 0 10px #0006, 0 0 20px #0006, 0 0 20px #0006;*/
	}
	#hero.textonimg > div > h2 {
		width: fit-content;
		margin: auto;
		box-shadow: 0 3px 10px 13px #0007;
		background: #0007;
	}
}