.animated-bg {
  display: block;
  font-size: 52px;
  overflow: hidden;
  color: transparent;
}

.animated-bg::before,
.animated-bg::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3em;
  height: 3em;
  content: ".";
  mix-blend-mode: screen;
  animation: 44s -27s move infinite ease-in-out alternate;
}

.animated-bg::before {
  text-shadow: 1.3418872894em 1.5369542017em 7px #D02A2F, 0.9348776189em 1.261572829em 7px #00A0DF, 1.7161070205em 1.0514874362em 7px #D02A2F, 2.262488014em 1.6328827454em 7px #592C82, 0.2866429579em 0.9766933624em 7px #D02A2F, 1.4045990079em -0.4394240416em 7px #592C82, 1.4073957325em 0.6599979766em 7px #D02A2F, 0.3552713518em 0.0286105671em 7px #00A0DF, 1.9304283702em 1.9513061205em 7px #00A0DF, 2.2900283244em -0.0659222675em 7px #D02A2F, 0.2513072341em 0.8040789378em 7px #00A0DF, 0.6860072643em -0.1262535353em 7px #592C82, 0.0322339016em 0.1624637811em 7px #592C82, 0.005402144em 2.0426483865em 7px #00A0DF, 1.624882789em 1.3654040118em 7px #D02A2F, 0.840395979em -0.259425068em 7px #592C82, 1.2802219097em 0.6165911122em 7px #592C82, 1.1340139257em 1.2075009956em 7px #592C82, 0.3803834791em 0.5722505736em 7px #00A0DF, 2.3270700394em 2.3661371725em 7px #592C82, 0.5236895631em 1.4639042087em 7px #00A0DF, 1.3583157298em 0.1482108705em 7px #00A0DF, 1.0408356782em 0.440318357em 7px #00A0DF, 1.675363609em 0.8835698223em 7px #592C82, 0.1051870783em 0.7484236866em 7px #00A0DF, 2.4724858716em 0.2575118862em 7px #00A0DF, -0.1393759212em -0.1031791963em 7px #00A0DF, 1.8510750898em 0.7166632994em 7px #D02A2F, 2.3937908031em 0.8591191554em 7px #00A0DF, -0.1614004197em -0.4714035431em 7px #592C82, 2.1543062138em 0.0270441283em 7px #D02A2F, 0.6594496947em 0.0557298692em 7px #D02A2F, 0.9165788038em -0.4627207794em 7px #00A0DF, -0.4850920512em 0.7441132541em 7px #D02A2F, 2.1765572994em 2.148300936em 7px #00A0DF, 0.1385131958em -0.4784047569em 7px #592C82, 0.5140358365em -0.0012347867em 7px #592C82, 0.1448762419em 0.9767023302em 7px #D02A2F, 2.1957658371em 1.1769454828em 7px #00A0DF, -0.468972582em 0.0330449829em 7px #592C82, 0.4702353553em -0.4831955638em 7px #592C82;
  animation-duration: 44s;
  animation-delay: -27s;
}

.animated-bg::after {
  text-shadow: 0.8749527895em 1.4569707065em 7px #00A0DF, 1.806941905em 0.4560390433em 7px #00A0DF, 0.3688574791em 1.605396205em 7px #00A0DF, 0.3050584076em -0.4687623592em 7px #00A0DF, 0.4126730609em 2.0173865734em 7px #00A0DF, 0.1186245948em 2.4319893959em 7px #592C82, 0.0499738951em 0.6307642049em 7px #D02A2F, 0.6095622824em -0.1083784369em 7px #00A0DF, 1.7771477216em 0.0020042113em 7px #D02A2F, 0.6272861113em -0.4452452953em 7px #D02A2F, 1.336667582em 0.3580163233em 7px #00A0DF, 1.8200965595em 2.0501373104em 7px #00A0DF, 1.8864842385em -0.1221123577em 7px #D02A2F, -0.1241108744em 2.2051543882em 7px #D02A2F, 2.1710167049em 2.158401745em 7px #00A0DF, 1.054031532em 1.627541169em 7px #D02A2F, 0.7083329595em 1.9677058545em 7px #592C82, 2.1936637756em 1.8670100473em 7px #00A0DF, 2.081811267em -0.2768794285em 7px #592C82, 2.457807744em 2.0207796697em 7px #592C82, 1.9274376686em 1.4191230008em 7px #00A0DF, 2.1420492671em 1.5993181973em 7px #592C82, 1.5480793173em 0.5201922321em 7px #D02A2F, 0.5633221094em 2.2633492838em 7px #00A0DF, -0.0651736274em 0.8799079241em 7px #00A0DF, 0.549896624em -0.0564041397em 7px #592C82, 0.3952957998em 1.5407734075em 7px #592C82, 2.1519027399em 1.6706708357em 7px #00A0DF, 0.8281214469em 0.188214143em 7px #D02A2F, 0.1832459026em 1.5332337315em 7px #592C82, 1.465259819em -0.2738754723em 7px #592C82, 2.2928012277em 0.021332387em 7px #592C82, 1.8003011696em 0.0731531519em 7px #00A0DF, 1.8237433666em 2.2410944956em 7px #00A0DF, 1.5020597596em 0.4189417751em 7px #D02A2F, 2.2421098709em -0.281496276em 7px #592C82, 2.1860532262em 2.2899575715em 7px #00A0DF, -0.2416901695em 1.819267345em 7px #D02A2F, -0.3567318583em 1.9684912569em 7px #592C82, 1.5893094114em -0.2775621538em 7px #592C82, 1.1117066871em 1.1099166012em 7px #D02A2F;
  animation-duration: 43s;
  animation-delay: -32s;
}

@keyframes move {
  from {
    transform: rotate(0deg) scale(12) translateX(-20px);
  }
  to {
    transform: rotate(360deg) scale(18) translateX(20px);
  }
}

.rich-text-wrapper h3 {
	color: #0f172a;
	font-weight: bold;
	font-size: 1.5rem;
	margin-top: 3rem;
}
.rich-text-wrapper p {
	color: #64748b;
	font-size: 1rem;
	margin-top: 0.75rem;
}
.rich-text-wrapper span,
.rich-text-wrapper a {
	color: #00a0df;
	font-weight: bold;
	text-decoration: underline;
}
.rich-text-wrapper hr {
	display: block;
	width: 100%;
	margin: 40px 0px;
	color: #083a61;
}

.center-element {
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

/* BETTER TIMES */
@font-face {
	font-family: "Better Times";
	src: url("../assets/fonts/better-times/BetterTimes.woff2") format("woff2"),
		url("../assets/fonts/better-times/BetterTimes.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
/* DM SANS */
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../assets/fonts/dm-sans/DMSans-Regular.ttf") format("truetype");
}
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../assets/fonts/dm-sans/DMSans-Bold.ttf") format("truetype");
}
/* MACKLIN
Macklin Text Medium
Macklin Text Medium Italic
Macklin Text Bold
Macklin Text Bold Italic
*/
@font-face {
	font-family: "Macklin Display";
	src: url("../assets/fonts/macklin/MacklinDisplay-Regular.eot");
	src: url("../assets/fonts/macklin/MacklinDisplay-Regular.eot?#iefix")
			format("embedded-opentype"),
		url("../assets/fonts/macklin/MacklinDisplay-Regular.woff2") format("woff2"),
		url("../assets/fonts/macklin/MacklinDisplay-Regular.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Macklin Display";
	src: url("../assets/fonts/macklin/MacklinDisplay-Medium.woff2")
			format("woff2"),
		url("../assets/fonts/macklin/MacklinDisplay-Medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Macklin Display";
	src: url("../assets/fonts/macklin/MacklinDisplay-MediumIt.woff2")
			format("woff2"),
		url("../assets/fonts/macklin/MacklinDisplay-MediumIt.woff") format("woff");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Macklin Display";
	src: url("../assets/fonts/macklin/MacklinDisplay-Bold.woff2") format("woff2"),
		url("../assets/fonts/macklin/MacklinDisplay-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Macklin Display";
	src: url("../assets/fonts/macklin/MacklinDisplay-BoldIt.woff2")
			format("woff2"),
		url("../assets/fonts/macklin/MacklinDisplay-BoldIt.woff") format("woff");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
/* TELLUMO */
@font-face {
	font-family: "Tellumo";
	src: url("../assets/fonts/tellumo/Tellumo.eot");
	src: url("../assets/fonts/tellumo/Tellumo.eot?#iefix")
			format("embedded-opentype"),
		url("../assets/fonts/tellumo/Tellumo.woff2") format("woff2"),
		url("../assets/fonts/tellumo/Tellumo.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Tellumo";
	src: url("../assets/fonts/tellumo/Tellumo-Medium.eot");
	src: url("../assets/fonts/tellumo/Tellumo-Medium.eot?#iefix")
			format("embedded-opentype"),
		url("../assets/fonts/tellumo/Tellumo-Medium.woff2") format("woff2"),
		url("../assets/fonts/tellumo/Tellumo-Medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Tellumo";
	src: url("../assets/fonts/tellumo/Tellumo-Bold.eot");
	src: url("../assets/fonts/tellumo/Tellumo-Bold.eot?#iefix")
			format("embedded-opentype"),
		url("../assets/fonts/tellumo/Tellumo-Bold.woff2") format("woff2"),
		url("../assets/fonts/tellumo/Tellumo-Bold.woff") format("woff");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}
.arrow-down {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	transform: translateX(-50%);
}

.pre-footer-marketing-banner-animated-background {
	background: linear-gradient(-45deg, #592c82, #00a0df);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@media screen and (min-width: 1024px) {
	.product-background {
		background-image: url("../assets/products-page/diamonds_top.png"),
			url("../assets/products-page/diamonds_bottom.png");
		background-position: 0 50px, 100% 110%;
		background-repeat: no-repeat, no-repeat;
		background-size: 15%, 20%;
	}
}

@media screen and (min-width: 1024px) {
	#product .product-background {
		background-image: url("../assets/products-page/diamonds_top.png"),
			url("../assets/products-page/diamonds_bottom.png");
		background-position: 0 50px, 100% 110%;
		background-repeat: no-repeat, no-repeat;
		background-size: 15%, 20%;
	}
}

#product-detail-page .background-image {
	background-image: url("../assets/product-detail-page/product-detail-hero-bg.jpg");
}

@media screen and (min-width: 1024px) {
	#contact-page #contact-form {
		background-image: url("../assets/contact/diamondslockup1.png"),
			url("../assets/contact/diamondslockup2.png");
		background-position: 0 -80px, 100% 110%;
		background-repeat: no-repeat, no-repeat;
		background-size: 284px, 330px;
	}
}

.bx-wrapper {
	border: none !important;
	box-shadow: none !important;
}

.grid-item {
	transition: background 0.4s, box-shadow 0.4s;
}


/*Former custom from here*/

.lg\:vh-7\/12 {
  height: 80vh;
}

.banner-title.font-better-times {
  font-size: 120px;
}

.hero-section {
  padding-top: 72px;
  padding-bottom: 80px;
}

.hero-section a {
  margin-bottom: 1.75rem;
}

.no-tailwindcss-base ol {
  list-style: revert;
  margin: revert;
  padding: revert;
}

.no-tailwindcss-base ul {
  list-style: revert;
  margin: revert;
  padding: revert;
}

.no-tailwindcss-base a {
  text-decoration: underline;
  --tw-text-opacity: 1;
  color: rgb(0 93 152 / var(--tw-text-opacity));
}

.lg\:h-90 {
  height: 28rem;
}

.lg\:min-h-90 {
  min-height: 28rem;
}

.lg\:min-h-50 {
  min-height: 20rem;
}

.lg\:w-90 {
  width: 25rem;
}

.md\:bg-opacity-60 {
  --tw-bg-opacity: 0.6;
}

.text-right {
  text-align: right;
}

.capitalize {
	text-transform: capitalize;
}

.border-gray-400 {
  border-color: #cbd5e0;
}

.border-gray-500 {
  border-color: #a0aec0;
}

.max-w-sm {
  max-width: 24rem;
}

.max-w-xs {
  max-width: 20rem;
}

.max-w-sxs {
  max-width: 18rem;
}

@media screen and (min-width: 1024px) {

  #contact-page #contact-form, .sg-application-form {
    background-image: url("../assets/contact/diamondslockup1.png"), url("../assets/contact/diamondslockup2.png");
    background-position: 0 -80px, 100% 110%;
    background-repeat: no-repeat, no-repeat;
    background-size: 284px, 330px;
  }
  .lg\:w-80 {
    width: 19.2rem !important;
  }
  .lg\:min-h-50 {
		min-height: 20rem;
		height:auto !important;
	height: 25rem;
	}
}

@media screen and (min-width: 1279px){
  .lg\:w-80 {
    width: 23.5rem !important;
  }

}
@media screen and (min-width: 1599px){
  .lg\:w-80 {
    width: 30rem !important;
  }

}
@media screen and (max-width: 1024px) {
  .hero-section {
    padding-top: 23rem;
    padding-bottom: 25rem;
  }

  .lg\:w-90 {
    width: 21rem;
  }


}


@media screen and (max-width: 768px) {
  .hero-section {
    padding-top: 25rem;
    padding-bottom: 27rem;
  }
}

@media screen and (max-width: 767px) {
  .banner-title.font-better-times {
    font-size: 105px;
  }
  .hero-section a {
    margin-bottom: 2rem;
  }

  .md\:bg-opacity-60 {
    --tw-bg-opacity: 0.6;
  }
}

@media screen and (min-width: 768px) {
  .banner-title.font-better-times {
    font-size: 125px;
  }
  .hero-section a {
    margin-bottom: 2rem;
  }
}

@media screen and (max-width: 570px) {
  .banner-title.font-better-times {
    font-size: 40px;
  }

  .hero-section {
    padding-top: 23rem;
    padding-bottom: 25rem;
  }

  .hero-section p {
    max-height: 250px;
    overflow-y: auto;
  }

  .hero-section a {
    margin-bottom: 2rem;
  }

  .sm\:bg-opacity-100 {
    --tw-bg-opacity: 1;
  }

  .sm\:h-96 {
	height: 40rem;
  }
}