body { background: #245; }

.sectionBG { height: unset !important; }

#herocarousel {
	width: 100%;
	margin: auto;
	max-width: 1980px;
	position: relative;
	aspect-ratio: 3.73 / 1;
	background: #4444 url(/static/img/icons/loading.svg) center / 100px no-repeat;
}

#herocarousel * { cursor: pointer; }

.bigpromo > img {
	width: 100%;
	position: absolute;
	top: 0; left: 0;
	height: 100%;
	opacity: 1;
	transition: opacity 0.6s ease-out, filter 0.15s ease-out;
}
.bigpromo > img[style="opacity: 0;"] { pointer-events: none; }

.bigpromo:hover > img, .bigpromo:focus > img { filter: brightness(0.95); }

#caroucontrols {
	position: relative;
	width: 100%; height: 100%;
	pointer-events: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#carouleft, #carouright {
	color: white;
	position: relative;
	padding: 0 13px 4px;
	border-radius: 0 5px 5px 0;
	text-shadow: 0 0 5px #000C;
	font-size: clamp(2rem, 5vw, 8rem);
	pointer-events: all;
	transition: background-color 0.15s;
}
#carouright {
	float: right;
	border-radius: 5px 0 0 5px;
}

#dotholder {
	pointer-events: all;
	background: #6660;
	border-radius: 15px;
	padding: 2px 4px;
	margin-bottom: 4px;
	cursor: default;
	transition: background .35s;
}
#dotholder:hover, #dotholder:has(:focus-visible:not(#current)) { background: #6664; }

#holderparent {
	display: flex;
	width: 100%;
	justify-content: center;
	position: absolute; bottom: 0;
}

.herodot {
	background-color: #3334;
	border: solid 1px white;
	height: 15px;
	width: 15px;
	margin: 3px;
	padding: 0;
	box-shadow: 0 0 2.5px black;
	border-radius: 100%;
	pointer-events: all;
	transition: filter 0.15s, transform 0.15s, box-shadow 0.15s;
}

.herodot:hover, .herodot:focus-visible, #caroucontrols > button:hover, #caroucontrols > button:focus-visible { background-color: #333B; }
.herodot:active, #caroucontrols > button:active { filter: brightness(4); }
#current.herodot {
	background-color: #333B;
	box-shadow: 0 0 2.5px 1px black, 0 0 5px 1px white;
	transform: scale(1.15);
}

#carouleft:active > i { transform: translateX(-6px); }
#carouright:active > i { transform: translateX(6px); }
#carouleft > i, #carouright > i { transition: transform .25s cubic-bezier(0.22, 0.61, 0.36, 1); }

/* TIMER CIRCLE */

#timerholder {
    position: absolute;
	top: 5px; right: 3px;
	filter: drop-shadow(0 0 3px #0008);
}

@property --a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

#timer {
    border-radius: 100%;
    height: 5vw;
	min-height: 20px; min-width: 20px;
    width: 5vw;
	max-height: 50px; max-width: 50px;
	-webkit-mask: radial-gradient(transparent 52%,#000 55%);
	mask: radial-gradient(transparent 52%,#000 55%);
	opacity: .25;
	overflow: hidden;
	--a: 0deg;
	background-image: conic-gradient(from 0deg at 50% 50%, #FFF var(--a), #666 var(--a), #666 360deg);
	animation: timespin 6s linear infinite;
}

@keyframes timespin {
	0% { --a: 0deg; }
	100% { --a: 360deg; }
}

#playpause {
	width: 50%; height: 50%;
	padding: 25%;
	position: absolute;
	opacity: .5;
	pointer-events: none;
	transform-origin: center;
}

#timerholder:hover > #timer, #timerholder:focus-visible > #timer { opacity: 0.5; }
#timerholder:hover > #playpause, #timerholder:focus-visible > #playpause { opacity: 0.75; }

.tiles {
	display: flex; flex-wrap: wrap; justify-content: space-evenly;
	width: 100%;
	gap: 1vw;
	padding: 1.9vw 0px;
	position: relative;
	align-items: flex-start;
	filter: drop-shadow(0 5px 5px #0003);
	max-width: 1920px;
	margin: auto;
}
.tiles > a {
	width: 30%;
	position: relative;
	max-width: 510px;
	transition: transform .5s cubic-bezier(0.22, 0.61, 0.36, 1), translate .5s, opacity .5s;
}
.tiles > a:hover, .tiles > a:focus-visible { transform: scale(1.05); }

.tiles > a > img {
	width: 100%;
	display: block;
	border-radius: 2px;
	text-align: center;
	justify-items: center;
	aspect-ratio: 2.09 / 1;
}

#custominfo {
	display: flex;
	max-width: 100%; /*calc(100% - 30px);*/
	overflow: hidden;
	position: relative;
	background: linear-gradient(90deg, #2b586d, #2a5256 50%);
	color: white;
	margin: 0 auto 25px;
	max-height: 480px;
	width: 1330px;
	border-radius: 2px;
	font-size: clamp(13px, 1.4vw, 16px);
	box-shadow: 0 0 0 1000px #0000 inset;
	transition: box-shadow .35s;
}
#custominfo > div {
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}
#custominfo h2 {
	text-align: center;
	color: white;
	font-weight: 600;
	text-wrap: balance;
	max-width: 70%;
	padding: 10px;
	margin: 20px auto 0;
	border: solid 1px white;
	outline: solid 2px #FFF3;
	outline-offset: -6px;
}
#custominfo p {
	max-width: 615px;
	margin-left: 20px;
}
#custominfo > img {
	max-width: 61%;
	clip-path: polygon(0% 0, 100% 0, 100% 100%, 7% 100%);
	object-fit: cover;
	text-align: center;
	color: white;
}
#custominfo div > div {
	display: flex;
	margin-bottom: 20px;
}
#custominfo div > img {
	max-width: 100px;
	margin-bottom: -3px;
	margin-left: 20px;
}
#custominfo span {
	display: inline-block;
	margin-left: 5px;
	align-content: center;
	text-wrap: balance;
	font-style: italic;
}
#custominfo:hover, #custominfo:focus-visible { box-shadow: 0 0 0 1000px #0002 inset; }

@media (max-width: 850px) {
	#custominfo {
		flex-direction: column;
		font-size: clamp(13px, 2.4vw, 15px)
	}
	#custominfo > div { align-items: center; }
	#custominfo p, #custominfo div > div {
		margin: 10px auto;
		padding: 0 15px;
	}
	#custominfo > img {
		max-width: 100%;
		height: 22vw;
		clip-path: unset; /*polygon(0% 0, 100% 0, 100% 75%, 0% 75%);*/
		object-position: center 35%;;
	}
}

#heavyhitters {
	gap: 1vw;
	justify-content: center;
}
@media (min-width: 651px) {
	#heavyhitters > a:last-child { margin-left: 3vw; }
}

.shine:before {
	content: "";
	display: block;
	position: absolute;
	top: -10%;
	left: -30%;
	width: 20%;
	height: 120%;
	background-color: white;
	transform: skewX(-15deg) translateZ(0);
	transition: left .5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity .5s cubic-bezier(0.22, 0.61, 0.36, 1);
	opacity: 0.4;
	filter: blur(10px);
	mix-blend-mode: overlay;
}
.shine:hover:before, a:focus-visible > .shine:before {
	left: 80%; opacity: 0;
}
.shine {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	filter: var(--nightfilter);
	overflow: hidden;
}

.infobreak {
	mask: var(--fademask); -webkit-mask: var(--fademask);
	border: solid 1px var(--headertextcolor);
	border-left: 0; border-right: 0;
	margin: 0 auto 10px; padding: 20px 0;
	width: 95%; max-width: 1280px;
	color: var(--headertextcolor);
	font-size: clamp(0.75rem, 1.75vw, 1rem);
	display: flex; flex-direction: column;
}
.infobreak > div {
	margin: auto;
	display: flex; justify-content: center; flex-wrap: wrap;
}
.infobreak > div > div {
	width: 250px;
	max-width: 33%;
}
.imgmask {
	background-color: var(--headertextcolor);
	display: flex; justify-content: center;
	mask-position: center center;
	mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	-webkit-mask-size: contain;
}
.imgmask > img {
	opacity: 0;
	height: clamp(60px, 10vw, 110px);
}
#svg1 {
	mask-image: url(/static/img/passion.svg);
	-webkit-mask-image: url(/static/img/passion.svg);
}
#svg2 {
	mask-image: url(/static/img/jewelrystore.svg);
	-webkit-mask-image: url(/static/img/jewelrystore.svg);
}
#svg3 {
	mask-image: url(/static/img/sparkle.svg);
	-webkit-mask-image: url(/static/img/sparkle.svg);
}
.infobreak h4, .infobreak h3 { text-align: center; color: var(--headertextcolor); margin-top: 12px; font-weight: 400; }
.infobreak h3 { width: 95%; text-wrap: balance; margin: 0 auto 20px; }
.linebtn {
	border: solid 1px var(--headertextcolor);
	padding: clamp(5px, 2vw, 10px);
	margin: 0 auto; /*border-radius: 5px;*/
	color: var(--headertextcolor);
	transition: background-color .3s;
	display: inline-block;
}
.linebtn:hover, .linebtn:focus-visible { background-color: var(--coolcolor) !important; }

#membericons {
	display: flex;
	justify-content: space-evenly;
	gap: clamp(0px, 8vw, 15px);
	padding: 10px 0 20px;
	max-width: 1100px;
	margin: auto;
}
#membericons > img { height: clamp(30px, 8vw, 60px); transition: transform .5s, filter .5s; }
#membericons > img:hover {
	transform: scale(1.85); z-index: 1;
	filter: drop-shadow(0 0 4px var(--color1)) drop-shadow(0 0 4px var(--color1)) drop-shadow(0 0 4px var(--color1)) drop-shadow(0 0 4px var(--color1));
}
#membericons > img[alt="Jewelers Circular Keystone"] { filter: var(--dayinvert); }

#vidsection {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0 20px;
	width: 100%;
	background: white;
	text-wrap: balance;
	min-height: 248px;
}
#vidsection > video {
	max-width: 40vw;
	margin-top: clamp(4px, 4vw, 40px);
	-webkit-mask: linear-gradient(0deg, transparent 0%, #000 3%);
	mask: linear-gradient(0deg, transparent 0%, #000 3%);
}
#vidsection > div {
	max-width: 333px;
	/*color: black;*/
}
#vidsection h4 {
	font-size: 32px;
	margin: 0 0 20px;
	/*color: black;*/
}
[data-theme="dark"] #vidsection { background: #111; }
[data-theme="dark"] #vidsection a {
	border-color: var(--mainblue);
	background: var(--mainblue);
}
[data-theme="dark"] #vidsection video {
	mix-blend-mode: lighten;
	filter: invert(1) /*hue-rotate(195deg)*/ brightness(2) saturate(0);
}

.mobileonly { display: none; }

#bigtiles > a {
	width: 46.5%;
	max-width: 710px;
}

@media (max-width: 650px) {
	#herocarousel { aspect-ratio: 4/5; }
	#timer { min-height: 40px; min-width: 40px; }
	.tiles > a { width: 48%; }
	.tiles { filter: drop-shadow(0 2px 3px #0003); }
	.mobileonly { display: block; }
	#vidsection {
		flex-direction: column;
		padding-bottom: 50px;
		text-align: center;
	}
	#bigtiles { gap: 2vw; }
	#bigtiles > a {
		width: 90%;
		max-width: unset;
	}
}

#imgpreloader {
	opacity: 0;
	z-index: -2;
	pointer-events: none;
	position: absolute;
	width: 0; height: 0;
}