<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/*
 * Client: The Diamond Ring
 * Copyright 2008-2021 Punchmark
 */



/*POPUP RESIZE - DELETE LATER*/

#popup-modal .modal-header,
#popup-modal .modal-body {
  padding: 0 !important;
}

#popup-modal .modal-body &gt; .mb-20 {
  margin-bottom: 10px !important;
}

#popup-modal .modal-body &gt; .mb-20 + .text-center.px-20 {
  padding-bottom: 10px;
}

.modal-dialog-centered .modal-content .modal-title {
  /*height: 0;*/
}

.modal-dialog-centered .modal-content button.close {
  z-index: 10;
}

@media(min-width:768px){
	#popup-modal .modal-dialog {
	  max-width: 700px !important
	}
}

@media(min-width:860px){
	#popup-modal .modal-dialog {
	  max-width: 800px !important
	}
}

@media(min-width:992px){
	#popup-modal .modal-dialog {
	  max-width: 900px !important
	}
}




/* =======================================================================================
	HELPERS
======================================================================================= */

h1, .h1, h2, .h2, h3, .h3 {
  letter-spacing: 0.1vw;
  font-size: 26px;
  font-weight: 500;
}

@media(min-width:1200px){
	h1, .h1, h2, .h2, h3, .h3 {
	  font-size: 2.2vw;
	}
}

@font-face {
  font-family: northwell;
  src: url('../fonts/northwell.ttf');
}

.cursive {
  font-family: northwell, cursive;
  display: block;
  text-align: center;
  font-size: 4rem;
  text-transform: lowercase;
}

.fw-bold {
  font-weight: 500 !important;
}

strong {
  color: #000000;
  font-weight: 500 !important;
}


/* =======================================================================================
	CONTAINERS
======================================================================================= */

section &gt; .container-fluid,
section &gt; .fluid-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

section &gt; .container-fluid &gt; .row,
section &gt; .fluid-container &gt; .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

section &gt; .container-fluid &gt; .row &gt; div[class*="col-"],
section &gt; .fluid-container &gt; .row &gt; div[class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


@media(min-width: 1200px){
	section &gt; .container-fluid,
	section &gt; .fluid-container {
	  max-width: 100% !important;
	}
	/*
	section &gt; .container {
	  max-width: 100% !important;
	}
	section &gt; .container {
	  max-width: 100% !important;
	  padding-left: 5vw !important;
	  padding-right: 5vw !important;
	}
	section &gt; .container &gt; .row {
	  margin-left: -5vw !important;
	  margin-right: -5vw !important;
	}
	section &gt; .container &gt; .row &gt; div[class*="col-"] {
	  max-width: 100% !important;
	  padding-left: 5vw !important;
	  padding-right: 5vw !important;
	}
	*/
}

@media(min-width: 1400px){
	section &gt; .container {
	  max-width: 1340px !important;
	}
}





/* =======================================================================================
	BUTTONS
======================================================================================= */

.btn-link {
  text-transform: uppercase !important;
  font-weight: normal !important;
  letter-spacing: 0.06rem !important;
}

.btn-light:hover {
  background: black;
  color: white;
  border: 1px solid black;
}

.btn-dark {
  color: white;
}

.btn-dark:hover {
  background: white;
  color: black;
  border: 1px solid black;
}

.btn-xlg {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

@media(max-width:767px){
	.btn-xlg {
	  width: 100% !important;
	  max-width: 100% !important;
	  justify-content: center !important;
	}
}





/* =======================================================================================
	ICONS
======================================================================================= */

nav .icon-search,
header .icon-search,
.toolbar .icon-search {
  color: transparent !important;
  background: url(../images/search.svg) center center no-repeat !important;
  background-size: contain !important;
  filter: brightness(100);
}

nav .icon-user,
header .icon-user,
.toolbar .icon-user {
  color: transparent !important;
  background: url(../images/user.svg) center center no-repeat !important;
  background-size: contain !important;
  filter: brightness(100);
}

nav .icon-shopping-bag,
header .icon-shopping-bag,
.toolbar .icon-shopping-bag {
  color: transparent !important;
  background: url(../images/shopping-bag.svg) center center no-repeat !important;
  background-size: contain !important;
  filter: brightness(100);
}

nav .icon-heart,
header .icon-heart,
.toolbar .icon-heart {
  color: transparent !important;
  background: url(../images/heart.svg) center center no-repeat !important;
  background-size: contain !important;
  filter: brightness(100);
}







/* =======================================================================================
	FORMS
======================================================================================= */

#variation-enter-name .form-label-group &gt; label,
#variation-engraving .form-label-group &gt; label,
form:not(.login) .form-label-group &gt; label,
form:not(.login) .form-label-group &gt; .input-group &gt; label,
form:not(.login) .form-label-group &gt; .bootstrap-filestyle &gt; label {
  font-size: 17px;
  letter-spacing: 0.06rem;
}

form:not(.login) .form-label-group label {
  /*color: #000000;*/
}

#variation-enter-name .form-control:focus,
#variation-engraving .form-control:focus,
form:not(.login) .form-control:focus,
form:not(.login) select.selectpicker:focus + div.selectpicker-bg {
  box-shadow: none !important;
}

#product-details [data-bs-target="#dropAHintModal"] {
  background: transparent;
  color: var(--dark);  
}

#product-details [data-bs-target="#dropAHintModal"]:hover,
#product-details [data-bs-target="#dropAHintModal"]:focus {
  background: var(--dark);
  color: var(--light);  
}

#variation-enter-name .form-control,
#variation-engraving .form-control,
form:not(.login) .form-control,
form:not(.login) select.selectpicker + div.selectpicker-bg,
#product-details select.selectpicker + div.selectpicker-bg {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  line-height: 1;
  border-radius: 0 !important;
}

#variation-enter-name .form-control,
#variation-engraving .form-control,
#product-details select.selectpicker + div.selectpicker-bg {
  border: 2px solid #151515 !important;
  border-radius: 0.25rem !important;
}

form.login .form-control {
  border-radius: 0 !important;
}

#variation-enter-name .form-label-group input:not(:placeholder-shown) + label,
#variation-enter-name .form-label-group input:not(:placeholder-shown) ~ label,
#variation-engraving .form-label-group input:not(:placeholder-shown) + label,
#variation-engraving .form-label-group input:not(:placeholder-shown) ~ label,
#product-details .selectpicker-has-value + label,
form:not(.login) .form-label-group .selectpicker-has-value + label,
form:not(.login) .form-label-group.file.files-selected .bootstrap-filestyle + label,
form:not(.login) .form-label-group input:not([type=file]):not(:placeholder-shown) ~ label,
form:not(.login) .form-label-group textarea:not(:placeholder-shown) ~ label {
  font-size: 10px;
  font-weight: 600;
  color: #000000;
  transform: translate(0%,-17%);
  z-index: 1000;
  background: none !important;
  letter-spacing: normal !important;
}

#variation-enter-name input:not(:placeholder-shown) + label,
#variation-engraving input:not(:placeholder-shown) + label,
#product-details .selectpicker-has-value + label {
  transform: translate(2px,-17%);
}

#variation-enter-name .form-label-group input + label::before,
#variation-engraving .form-label-group input + label::before,
#product-details .selectpicker-has-value + label::before,
form:not(.login) .form-label-group .selectpicker-has-value + label::before,
form:not(.login) .form-label-group.file.files-selected .bootstrap-filestyle + label::before,
form:not(.login) .form-label-group input:not([type=file]):not(:placeholder-shown) ~ label::before,
form:not(.login) .form-label-group textarea:not(:placeholder-shown) ~ label::before {
  display: none !important;
}

form:not(.login) select.selectpicker + div.selectpicker-bg.btn-lg {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: normal !important;
}

#variation-enter-name .form-label-group &gt; label,
#variation-enter-name .form-label-group .form-control,
#variation-engraving .form-label-group &gt; label,
#variation-engraving .form-label-group .form-control {
  height: 60px !important;
}

#variation-enter-name .form-label-group input:not(:placeholder-shown) ~ label,
#variation-engraving .form-label-group input:not(:placeholder-shown) ~ label {
  transform: translate(2px,-17%);
}

form:not(.login) .form-label-group &gt; label,
form:not(.login) .form-label-group &gt; .input-group &gt; label,
form:not(.login) .form-label-group &gt; .bootstrap-filestyle &gt; label,
form:not(.login) .form-label-group &gt; .selectpicker-container + label {
  height: 60px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

form:not(.login) .form-label-group .form-control,
form:not(.login) .form-label-group .bootstrap-filestyle .form-control {
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
}

form:not(.login) .form-label-group textarea.form-control.input-lg {
  border: 1px solid #dcdde1 !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

form:not(.login) .form-label-group textarea + label {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

form:not(.login) .form-label-group textarea.input-lg {
  padding-top: 1.25rem !important;
}

form:not(.login) .form-label-group textarea.input-lg:not(:placeholder-shown) {
  padding-top: 1.8rem !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04rem !important;
  color: #757575 !important;
}

#variation-enter-name .form-label-group input:not(:placeholder-shown),
#variation-engraving .form-label-group input:not(:placeholder-shown),
form:not(.login) .form-label-group input:not(:placeholder-shown),
form:not(.login) .form-label-group select:not(:placeholder-shown) + div.selectpicker-bg,
#product-details select:not(:placeholder-shown) + div.selectpicker-bg {
  padding-top: 17px !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04rem !important;
  color: #757575 !important;
}

form:not(.login) .form-label-group .bootstrap-filestyle .form-control,
form:not(.login) .form-label-group .bootstrap-filestyle .btn {
  border-radius: 0 !important;
}

section.inset form:not(.login) .form-label-group &gt; label,
section.inset form:not(.login) .form-label-group &gt; .input-group &gt; label,
section.inset form:not(.login) .form-label-group &gt; .bootstrap-filestyle &gt; label {
  background: #F9F9F9 !important;
}

section.alt form:not(.login) .form-label-group &gt; label,
section.alt form:not(.login) .form-label-group &gt; .input-group &gt; label,
section.alt form:not(.login) .form-label-group &gt; .bootstrap-filestyle &gt; label {
  background: #040307 !important;
  background: #000000 !important;
}

#product-details .form-label-group.mt-0 {
  margin-top: 0 !important;
}

#product-details .form-label-group.mt-10 {
  margin-top: 10px !important;
}

#variation-enter-name,
#variation-engraving {
  margin-top: -0.5rem;
}

#variation-enter-name a,
#variation-engraving a {
  text-decoration: none !important;
  outline: none !important;
  cursor: pointer !important;
}

#variation-enter-name a small,
#variation-engraving a small {
  font-size: 12px;
  font-weight: 600;
  color: #000000;
}

#variation-enter-name a &gt; span,
#variation-engraving a &gt; span {
  font-size: 17px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04rem !important;
  color: #757575 !important;
}

#variation-enter-name a:hover &gt; span,
#variation-engraving a:hover &gt; span {
  color: #000000 !important;
}

#variation-enter-name a &gt; span &gt; i,
#variation-engraving a &gt; span &gt; i {
  font-size: 10px !important;
  color: #000000;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #000000;
  transform: translateY(-1px);
  margin-right: 3px;
}

#variation-enter-name &gt; .card-body,
#variationCollapse &gt; .card-body {
  border: 2px solid #151515 !important;
  border-radius: 0.25rem !important;
}

#map {
  border-top: 0 !important;
}

.phone-number-input .phone .form-label-group {
  margin-left: 0.5rem;
}

.phone-number-input .phone button,
.phone-number-input .phone .form-label-group .form-control,
.phone-number-input .phone .form-label-group .form-control.input-lg {
  border-radius: 0 !important;
}

form:not(.login) .form-label-group .dd-wrap input:not(:placeholder-shown) {
  padding-top: 0 !important;
}

.form-row &gt; .form-label-group.phone-number-input .phone input:not([type=file]):not(:placeholder-shown) ~ label {
  left: 0 !important;
}




/* =======================================================================================
	NAV
======================================================================================= */

nav.navbar {
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mobileNavbar {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px;
}

nav.navbar .navbar-toggler {
  padding-left: 0;
  padding-right: 0;
}

nav.navbar .nav-item .nav-link {
  font-family: var(--bs-p-family) !important;
}

nav.navbar .dropdown-wide.diamondMenu .dropdown-menu-wide .dropdown-menu-children .dropdown-item i {
  font-size: 1rem;
}

.mobileNavbar #user-btn &gt; a.dropdown-toggle,
.mobileNavbar #search-btn &gt; a.dropdown-toggle,
.mobileNavbar #shopping-bag-btn &gt; a.dropdown-toggle {
  width: 30px;
  height: 58px;
  display: flex;
  text-decoration: none !important;
}

.mobileNavbar #user-btn {
  display: block;
  font-size: 26px;
  padding: 0;
  width: 30px;
  height: 58px;
  text-align: center;
  margin-left: 18px;
}

.mobileNavbar #search-btn {
  display: block;
  font-size: 26px;
  padding: 0;
  width: 30px;
  height: 58px;
  text-align: center;
  margin-right: 13px;
}

.mobileNavbar #shopping-bag-btn {
  display: block;
  font-size: 26px;
  padding: 0;
  width: 30px;
  height: 58px;
  text-align: center;
}

nav.navbar.scrolling-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 4000;
  animation: slideDown 400ms 1;
  animation-delay: 0;
}

body.sitemanager-menu-open nav.navbar.scrolling-nav,
body.sitemanager-menu-closed nav.navbar.scrolling-nav {
  top: 63px !important;
}

nav.navbar .explore-all-row {
  display: none !important;
}

@media(min-width:768px) {
	.mobileNavbar {
	  display: none;
	}
	nav.navbar .nav-item .nav-link,
	nav.navbar .navbar-nav .nav-item .nav-link {
	  font-size: 16px !important;
	  letter-spacing: 0.2rem !important;
	  padding-top: 25px;
	  padding-bottom: 25px;
	  text-transform: uppercase !important;
	  z-index: 3000;
	}
	nav.navbar .dropdown-wide .dropdown-item,
	nav.navbar .dropdown-wide .dropdown-menu-wide .dropdown-item-parent,
	nav.navbar .dropdown-wide &gt; .menu-megamenu-diamonds .row.diamonds .dropdown-item,
	nav.navbar .dropdown-wide &gt; .menu-megamenu-ringsettings .row.ringsettings .dropdown-item,
	nav.navbar .dropdown-wide .dropdown-menu-wide a .text-center.small.pt-1 {
	  text-transform: uppercase !important;
	  font-size: 14px !important;
	  font-weight: 500 !important;
	  letter-spacing: 0.1rem !important;
	  padding: 0 !important;
	  margin: 0 auto !important;
	}
	nav.navbar .dropdown-wide .dropdown-menu-children,
	nav.navbar .dropdown-wide .dropdown-item + .dropdown-item,
	nav.navbar .dropdown-wide .mobile-dropdown + .mobile-dropdown,
	nav.navbar .dropdown-wide .mobile-dropdown + .dropdown-item {
	  margin-top: 20px !important;
	}
	nav.navbar .dropdown-wide .dropdown-menu-wide .dropdown-menu-children .dropdown-item {
	  font-size: 12px !important;
	  font-weight: 400 !important;
	}
	nav.navbar .dropdown-wide &gt; .menu-megamenu-diamonds .row.diamonds {
	  padding: 0 !important;
	}
	nav.navbar .dropdown-wide &gt; .menu-megamenu-diamonds .row.diamonds .dropdown-item + .dropdown-item {
	  margin-top: 10px !important;
	}
	nav.navbar .dropdown &gt; .menu-megamenu-diamonds .row.diamonds i[class^="dia-"] {
	  font-size: 30px !important;
	}
	nav.navbar .dropdown-wide .dropdown-item:hover,
	nav.navbar .dropdown-wide .dropdown-item:focus,
	nav.navbar .dropdown-wide .dropdown-menu-wide a:hover .text-center.small.pt-1,
	nav.navbar .dropdown-wide .dropdown-menu-wide a:focus .text-center.small.pt-1 {
	  background: white !important;
	  color: #757575 !important;
	}
	nav.navbar .nav-item.dropdown &gt; .dropdown-menu {
	  border-radius: 0 !important;
	  border: 0 !important;
	}
	nav.navbar .nav-item .dropdown-menu-wide .container {
	  padding-top: 20px !important;
	  padding-bottom: 20px !important;
	}
	nav.navbar .nav-item.dropdown.dropdown-is-open &gt; .dropdown-menu {
	  box-shadow: 0 100px 0px 1000px rgba(0,0,0,0.8);
	}
}

@media(max-width:767px){
	nav.navbar #main-navigation {
	  background: #151515;
	}
	nav.navbar .dropdown &gt; .dropdown-menu,
	nav.navbar .dropdown-submenu &gt; .dropdown-menu {
	  background: #000000 !important;
	  color: #ffffff !important;
	}
	nav.navbar .nav-item {
	  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
	}
  nav.navbar .nav-item .nav-link {
    font-size: 1.2rem !important;
  }
	nav.navbar .navbar-nav &gt; .nav-item.has-a-plus .dropdown-menu .dropdown-plus {
	  color: #151515;
	}
	nav.navbar .navbar-nav &gt; .nav-item.has-a-plus .nav-link,
	nav.navbar.show-dropdown-toggles .navbar-nav &gt; .nav-item .nav-link {
	  text-transform: uppercase !important;
	}
	nav.navbar .navbar-nav &gt; .nav-item.has-a-plus.dropdown .dropdown-item {
	  border-top: 1px solid rgba(255,255,255,0.1) !important;
	}
	nav.navbar .navbar-nav &gt; .nav-item.has-a-plus.dropdown-wide .dropdown-menu-wide a .text-center.small.pt-1,
	nav.navbar .navbar-nav &gt; .nav-item.has-a-plus.dropdown .dropdown-item,
	nav.navbar .navbar-nav &gt; .nav-item.has-a-plus.dropdown .dropdown-item:hover,
	nav.navbar .navbar-nav &gt; .nav-item.has-a-plus.dropdown-wide .dropdown-menu-wide a.dropdown-item-parent,
	nav.navbar .navbar-nav &gt; .nav-item.has-a-plus.dropdown-wide .dropdown-menu-wide a.dropdown-item-parent:hover,
	nav.navbar .navbar-nav &gt; .nav-item.has-a-plus.dropdown .dropdown-item.dropdown-item-image,
	nav.navbar .navbar-nav &gt; .nav-item.has-a-plus.dropdown-wide .dropdown-menu-wide .dropdown-menu-children .dropdown-item {
	  background: #000000 !important;
	  color: #ffffff !important;
	  padding: 13px 20px !important;
	  font-size: 13px !important;
	  font-weight: 500 !important;
	  text-transform: uppercase !important;
	}
	nav.navbar .navbar-nav &gt; .nav-item.has-a-plus.dropdown-wide .dropdown-menu-wide a .text-center.small.pt-1,
	nav.navbar .navbar-nav &gt; .nav-item.has-a-plus.dropdown-wide .dropdown-menu-wide a:hover .text-center.small.pt-1 {
	  padding: 0px !important;
	  font-weight: 500 !important;
	}
	nav.navbar .navbar-nav &gt; .nav-item.has-a-plus.dropdown &gt; .menu-megamenu-diamonds .row.diamonds a.dropdown-item span,
	nav.navbar .navbar-nav &gt; .nav-item.has-a-plus.dropdown .ringsettings .flex-wrap .dropdown-item span,
	nav.navbar .navbar-nav &gt; .nav-item.has-a-plus.dropdown &gt; .menu-megamenu-ringsettings .row.ringsettings i[class^="big-setting-"] {
	  font-size: 11px !important;
	}
	nav.navbar .dropdown &gt; .menu-megamenu-diamonds .row.diamonds,
	nav.navbar .dropdown &gt; .menu-megamenu-ringsettings .row.ringsettings {
	  border: 0 !important;
	  margin-bottom: 0 !important;
	  padding-bottom: 0 !important;
	}
	nav.navbar .navbar-nav &gt; .nav-item.has-a-plus .dropdown-plus {
	  outline: none !important;
	}
	nav.navbar .navbar-nav &gt; .nav-item.has-a-plus .dropdown-plus i:before {
	  display: block !important;
	}
	nav.navbar .navbar-nav &gt; .nav-item.has-a-plus .dropdown-plus i {
	  font-size: 20px !important;
	}
	nav.navbar .navbar-nav &gt; .nav-item.has-a-plus.show .dropdown-plus i {
	  font-size: 20px !important;
	}
	nav.navbar .navbar-nav &gt; .nav-item.has-a-plus.show .dropdown-plus i:before {
	  transform: rotate(45deg) !important;
	}
	.menu-search {
	  width: 100% !important;
	  margin: 0 !important;
	  border-radius: 0 !important;
	  border: 0 !important;
	  box-shadow: 0 5px 50px rgb(0 0 0 / 30%) !important;
	}
	.menu-search [type="submit"].btn,
	.menu-search .form-control {
	  border-radius: 0 !important;
	  border: 0 !important;
	  background: none !important;
	}
	.menu-search [type="submit"].btn,
	.menu-search [type="submit"].btn:focus {
	  padding-left: 15px !important;
	  padding-right: 15px !important;
	  outline: none !important;
	  box-shadow: none !important;
	}
	.menu-search [type="submit"].btn &gt; [class^="icon-"] {
	  font-size: 33px !important;
	  filter: brightness(0) !important;
	}
	nav.navbar #search-btn .dropdown &gt; .dropdown-menu,
	nav.navbar #search-btn .dropdown &gt; .dropdown-menu span {
	  background: #f2f2f4 !important;
	  color: #000000 !important;
	}
	.menu-search .results-dropdown .media .media-heading {
	  text-transform: uppercase !important;
	  font-weight: 500 !important;
	  letter-spacing: normal !important;
	  font-size: 16px !important;
	}
	.wishlist-item .media-body .media-description {
	  font-size: 14px !important;
	}
}

@keyframes slideDown {
  0% {
    transform: translateY(-80px);
  }
  100% {
    transform: translateY(0);
  }
}





/* =======================================================================================
	HEADER
======================================================================================= */

@media(max-width:767px){
	a#logo {
	  width: 140px;
	  height: 61px;
	  margin: 0 auto !important;
	  padding: 0 !important;
	  overflow: hidden;
	}
	a#logo img {
	  max-width: 140px;
	  transform: translateY(-12%);
	}
}

header {
  z-index: unset;
  display: none;
}

.toolbar {
  display: none;
}

.toolbar &gt; .toolbar-inner &gt; ul &gt; li &gt; a {
  font-size: 28px;
}

.toolbar &gt; .toolbar-inner .dropdown-menu.menu-search .btn-default {
  background: black;
  border-color: black;
}

.toolbar &gt; .toolbar-inner .dropdown-menu.menu-search .btn-default i {
  font-size: 24px;
}

@media(min-width:768px){
	header {
    display: block;
  }
  a#logo {
	  position: relative;
	  top: auto;
	  left: auto;
	  transform: none;
	  z-index: 3001;
	  width: 250px;
	  padding: 20px 0 !important;
	}
	.toolbar {
	  display: block;
	  position: static;
	  margin-bottom: -60px;
	  background: none !important;
	}
	.toolbar &gt; .toolbar-inner &gt; ul &gt; li {
	  position: relative;
	  z-index: 4000;
	}
	.toolbar &gt; .toolbar-inner {
	  min-height: 60px;
	  height: 60px;
	  background: none !important;
	  margin-left: auto;
	  margin-right: auto;
	}
}

@media(min-width:1200px){
	.toolbar &gt; .toolbar-inner {
	  max-width: 1140px;
	}
}

@media(min-width:1400px){
	.toolbar &gt; .toolbar-inner {
	  max-width: 1340px;
	}
}






/* =======================================================================================
	FOOTER
======================================================================================= */

footer h6 {
  text-transform: none;
  font-size: 1.5rem;
  line-height: 1.5rem;
  text-transform: uppercase;
  margin-top: 40px !important;
  margin-bottom: 1rem !important;
}

footer p.small {
  font-size: 16px !important;
  font-weight: 300;
  margin-bottom: 1rem !important;
}

footer label {
  color: white !important;
  font-weight: 500 !important;
  display: none !important;
}

footer .input-group {
  border: 1px solid rgba(255,255,255,1);
  max-width: 280px !important;
  margin: 0 auto !important;
  border-radius: 40px;
  padding-left: 10px;
}

footer .input-group .form-control {
  border-color: rgba(0,0,0,0.0) !important;
  background: none !important;
  color: white !important;
}

footer .input-group .btn {
  border-color: rgba(0,0,0,0.0) !important;
  background: none !important;
}

footer address {
  font-size: 13px !important;
  font-weight: 400;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1rem;
}

footer address a,
footer address a &gt; strong {
  font-weight: 500 !important;
}

footer address a &gt; strong.text-uppercase.small {
  display: none !important;
}

footer .footerlinks li a {
  font-size: 12px;
  letter-spacing: 0.06rem;
}

.social-networks .network {
	color: #ffffff !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,1);
  padding: 10px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px !important;
  height: 35px !important;
}

.toolbar .social-networks .network {
	margin-bottom:0 !important;
}

@media(min-width:768px){
	footer .input-group {
	  margin-left: 0 !important;
	}
}




/* =======================================================================================
	HOMEPAGE HERO
======================================================================================= */

section.hero.alt {
  background: #040307;
}

section.hero [data-widget-element="widgetHeader"] {
  font-size: 6vw;
}

section.hero .gap {
  margin-left: 6vw;
}

section.hero .cursive {
  font-size: 400%;
  position: relative;
  transform: translateX(1vw);
}

section.hero .pull-down-halfway .cursive {
  transform: translate(1vw,2.5vw);
}

section.hero .pull-down .cursive {
  transform: translate(1vw,4.5vw);
}

body#home section.hero .cursive {
  transform: translate(18.5vw,-2vw);
}

section.hero [data-pagebuilder="widget"][data-widget-index="2"] {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  padding-top: 40px;
  padding-bottom: 50px;
}

body#home section.hero.alt [data-pagebuilder="widget"][data-widget-index="2"] {
  padding-top: 0px;
  padding-bottom: 50px;
}

@media(min-width:768px){

	section.hero [data-widget-element="widgetHeader"] {
	  font-size: 3vw;
	}

	section.hero .gap {
	  margin-left: 3vw;
	}

	body#home section.hero .cursive,
	body#banner-test section.hero .cursive {
	  transform: translate(10vw,-2vw);
	}

	section.hero [data-pagebuilder="widget"][data-widget-index="1"] {
	  position: relative;
	}

	section.hero [data-pagebuilder="widget"][data-widget-index="2"] {
	  position: absolute;
	  top: 0;
	  left: auto;
	  right: 0;
	  width: 50%;
	  height: 100%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  padding-top: 0;
	  padding-bottom: 0;
	}

	section.hero.default [data-widget-element="widgetHeader"],
	section.hero.default [data-widget-element="widgetParagraph"] {
	  color: #ffffff !important;
	}

	section.hero.default [data-widget-element="widgetHeader"].text-dark,
	section.hero.default [data-widget-element="widgetParagraph"].text-dark {
	  color: #000000 !important;
	}

}

@media(max-width:767px){

	section.hero.default .btn-outline-light {
	  color: #000000 !important;
	  border-color: #000000 !important;
	}

	section.hero.default .btn-outline-light:hover,
	section.hero.default .btn-outline-light:focus {
	  color: #ffffff !important;
	  background: #000000 !important;
	  border-color: #000000 !important;
	}
	
	section.alt.mobile-stack h1.text-light {
	  color: #ffffff !important;
	}
	
	body#home section.hero .cursive,
	body#banner-test section.hero .cursive {
	  transform: translateX(18.4vw);
	}
	
}



/* =======================================================================================
	SOCIAL GRID
======================================================================================= */

.social-grid-section {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

.grid.widget-social-grid .star-rating,
.grid.widget-social-grid .social-description,
.grid.widget-social-grid .social-interactions {
  display: none !important;
}

.grid.widget-social-grid .grid-item {
  padding-left: 5px !important;
  padding-right: 5px !important;
  margin-bottom: 10px !important;
}




/* =======================================================================================
	GRID of VENDORS SECTION
======================================================================================= */

section.grid-of-vendors .btn-link {
  font-size: 16px;
  letter-spacing: 0.06rem;
  display: block !important;
}

section.grid-of-vendors .btn-link::after {
  display: none !important;
}

@media(min-width:992px){
	section.grid-of-vendors .btn-link {
	  font-size: 1.6vw;
	  letter-spacing: 0.06vw;
	  transform: translateY(-1rem);
	}
}

@media(min-width:1200px){
	section.grid-of-vendors .btn-link {
	  font-size: 1.4vw;
	  letter-spacing: 0.06vw;
	  font-weight: 300 !important;

	}
}




/* =======================================================================================
	LOCATIONS
======================================================================================= */

.location-card {
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: #000000;
}
.location-card &gt; a {
	display: flex;
}
.locationWrap {
	color: white;
	text-align: left;
	padding: 20px 0 20px;
	position: relative;
	font-size: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	background: #000000;
}
.locationWrap .btn {
	margin-top: 20px;
}
.locationBox {
	height: 100%;
}
.locationBox .locationWrap {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	min-height: unset;
}
.locationBox {
	min-height: unset;
	display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: left;
    padding-left: 0px;
    padding-bottom: 0px;
    color: white;
    position: relative;
}
.locationName {
	min-height: 200px;
	display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: left;
    padding-left: 20px;
    padding-bottom: 20px;
    color: white;
    position: relative;
}
.locationBox .overlay,
.locationName .overlay {
	background: rgba(0,0,0,0.3);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: left;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	flex-direction: column;
	padding: 20px;
}
.locationBox .overlay {
  position: relative;
  padding: 0;
}
.locationBox &gt; img {
  display: none;
}
.locationName h2,
.locationBox .locationWrap h2 {
	display: block;
	text-align: left;
	font-weight: bold;
	font-size: 1.2rem;
	color: white;
	width: 100%;
	padding-right: 30px;
}
.widget-location-card-store-hours span,
.locationBox .locationWrap span {
	display: block;
	text-align: left;
	font-weight: normal;
	font-size: 1rem;
	letter-spacing: 1px;
	width: 100%;
}
.widget-location-card-store-hours br {
	display: none !important;
}
.widget-location-card-store-hours br + strong {
  	margin-top: 9px;
}
.locationHours strong {
	display: block;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 0.6rem;
	color: #ffffff;
}
.locationWrap address,
.locationPhone,
.locationHours {
	padding-left: 30px;
	position: relative;
}
.locationWrap address i,
.locationPhone i,
.locationHours i {
	position: absolute;
	top: 5px;
	left: 0;
	color: #ffffff;
	font-size: 1rem;
}
.locationPhone {
	margin-bottom: 20px;
}
.locationPhone a {
	color: white;
}
section.section-map #map {
	margin-bottom: 0 !important;
}




/* =======================================================================================
	FEATURED VENDOR WIDGET
======================================================================================= */

.featured-vendors {
  background: #f9f9f9 !important;
}

.featured-vendors .product-slider a.widget-inner {
  border-color: transparent !important;
}

.featured-vendors .text-center .product-title,
.featured-vendors .text-center .product-price {
  text-align: center !important;
}

.featured-vendors a {
  outline: none !important;
}

.featured-vendors [data-pagebuilder="widget"] {
  max-height: 100% !important;
}

.featured-vendors .product-slider {
  max-width: 65vw;
}

.featured-vendors .owl-item .widget {
  background: white;
}

.featured-vendors .owl-item .widget .widget-inner {
  padding: 0 5vw !important;
}

.featured-vendors .owl-item .widget .widget-inner &gt; span:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.022);
}

.featured-vendors .product-title {
  font-size: 1.2rem;
  font-weight: 500;
  display: block;
  margin: 3vw 0 0 0;
  padding: 0;
  color: #000000 !important;
}

.featured-vendors .product-desc,
.featured-vendors .product-price {
  font-size: 0.9rem;
  line-height: 1.53;
  font-weight: 300;
  display: block;
  margin: 1rem 0 0 0;
  padding: 0;
  color: #757575;
  display: block !important;
}

.featured-vendors .product-price {
  letter-spacing: 0.07rem;
  font-size: 1rem;
}

.featured-vendors .btn-default,
.featured-vendors .wishlist-btn-container {
  display: none !important;
}

.featured-vendors .owl-nav {
  display: none !important;
}

.featured-vendors .owl-dots {
  display: flex !important;
  justify-content: center;
  padding-top: 26px;
}

.featured-vendors .owl-dots .owl-dot {
  border-radius: 50%;
  opacity: .2;
  background: #000;
  height: 5px;
  width: 5px;
  display: inline-block;
  padding: 0;
  text-indent: -9999px
  outline-width: 0 !important;
}

.featured-vendors .owl-dots .owl-dot + .owl-dot {
  margin-left: 10px;
}

.featured-vendors .owl-dots .owl-dot:hover,
.featured-vendors .owl-dots .owl-dot:focus,
.featured-vendors .owl-dots .owl-dot.active {
  background: #000;
  opacity: 1;
  outline-width: 0 !important;
}

@media(min-width:768px){
	.featured-vendors .product-slider {
	  max-width: 33vw;
	}
	.featured-vendors .owl-item .widget .widget-inner {
	  padding: 0 5vw !important;
	}
}




/* =======================================================================================
	CHECKERBOARD BLOCKS
======================================================================================= */

section.checkerboard [data-widget-element="widgetHeader"] {
  font-weight: 500 !important;
  font-size: 26px !important;
  margin-bottom: 10px !important;
}

section.checkerboard [data-widget-element="widgetHeader"].display-header {
  padding-top: 8vw !important;
}

section.checkerboard [data-widget-element="widgetHeader"] .cursive {
  font-size: 16vw !important;
  transform: translateX(1rem);
}

section.checkerboard .widget.shadow-bottom-left .widget-text-overlay {
  -ms-flex-align: start !important;
  align-items: flex-start !important;
}

section.checkerboard .widget.shadow-bottom-left .widget-text-overlay [data-widget-element="widgetHeader"] {
  margin-bottom: 25px !important;
  margin-left: 30px !important;
}

section.checkerboard .widget.shadow-bottom-left .widget-text-overlay [data-widget-element="widgetHeader"] small {
  color: inherit !important;
  margin-bottom: 0.2rem !important;
  display: block !important;
  font-weight: 600;
  font-size: 55% !important;
  letter-spacing: 0.2rem !important;
}

section.checkerboard .widget.shadow-bottom-left &gt; a,
section.checkerboard .widget.shadow-bottom-left &gt; div {
  background-size: 100% auto !important;
  transition: all 500ms ease-out 100ms;
  cursor: pointer !important;
}

section.checkerboard .widget.shadow-bottom-left:hover &gt; a,
section.checkerboard .widget.shadow-bottom-left:focus &gt; a,
section.checkerboard .widget.shadow-bottom-left:hover &gt; div,
section.checkerboard .widget.shadow-bottom-left:focus &gt; div {
  background-size: 150% auto !important;
  transition: all 500ms ease-out 0ms;
}

@media(min-width:768px){
	section.checkerboard [data-widget-element="widgetHeader"] {
	  padding-top: 0 !important;
	  font-weight: 500 !important;
	  font-size: 3.25vw !important;
	  margin-bottom: 20px !important;
	}
	section.checkerboard [data-widget-element="widgetHeader"] .cursive {
	  font-size: 13vw !important;
	}
}

@media(min-width:1200px){
	section.checkerboard [data-widget-element="widgetHeader"] {
	  font-size: 2.15vw !important;
	}
	section.checkerboard [data-widget-element="widgetHeader"] .cursive {
	  font-size: 7vw !important;
	}
	section.checkerboard .content-block.px-20.px-md-40 {
	  padding-left: 5vw !important;
	  padding-right: 5vw !important;
	}
	section.checkerboard .widget.shadow-bottom-left .widget-text-overlay [data-widget-element="widgetHeader"] {
	  margin-bottom: 4.5vw !important;
	  margin-left: 5vw !important;
	}
}

@media(min-width:1400px){
	section.checkerboard .content-block.px-20.px-md-40 {
	  padding-left: 6vw !important;
	  padding-right: 6vw !important;
	}
	section.checkerboard .widget.shadow-bottom-left .widget-text-overlay [data-widget-element="widgetHeader"] {
	  margin-bottom: 5.5vw !important;
	  margin-left: 6vw !important;
	}
}







/* =======================================================================================
	BUILD A RING 1-2-3
======================================================================================= */

section.build-a-ring-section [data-widget-element="widgetHeader"].erd-titles {
  position: relative;
  padding-top: 15px;
  text-transform: uppercase;
  top: 25px;
  font-size: 16px;
  letter-spacing: 0.06rem;
  font-weight: normal !important;
}

section.build-a-ring-section [data-widget-element="widgetHeader"].erd-titles .big-nums {
  position: absolute;
  background: #000;
  color: #fff;
  border-radius: 65px;
  width: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -65px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 36px !important;
  font-weight: 500 !important;
}

section.build-a-ring-section .widget-inner,
section.build-a-ring-section .widget-inner img {
  border-radius: 500px !important;
}

section.build-a-ring-section .widget &gt; a,
section.build-a-ring-section .widget &gt; div {
  background-size: 100% auto !important;
  transition: all 500ms ease-out 100ms;
  cursor: pointer !important;
}

section.build-a-ring-section .widget:hover &gt; a,
section.build-a-ring-section .widget:focus &gt; a,
section.build-a-ring-section .widget:hover &gt; div,
section.build-a-ring-section .widget:focus &gt; div {
  background-size: 150% auto !important;
  transition: all 500ms ease-out 0ms;
}

@media(min-width:575px){
	section.build-a-ring-section [data-widget-element="widgetHeader"].erd-titles .big-nums {
	  border-radius: 45px;
	  width: 45px;
	  height: 45px;
	  top: -50px;
	  font-size: 36px !important;
	}
}

@media(min-width:768px){
	section.build-a-ring-section [data-widget-element="widgetHeader"].erd-titles .big-nums {
	  border-radius: 7vw;
	  width: 7vw;
	  height: 7vw;
	  top: -6.5vw;
	  font-size: 4.5vw !important;
	}
}

@media(min-width:992px){
	section.build-a-ring-section [data-widget-element="widgetHeader"].erd-titles{
	  font-size: 1.6vw;
	  letter-spacing: 0.06vw;
	}
}

@media(min-width:1200px){
	section.build-a-ring-section .container {
	  max-width: 960px !important;
	}
	section.build-a-ring-section [data-widget-element="widgetHeader"].erd-titles {
	  font-size: 1.4vw;
	  letter-spacing: 0.06vw;
	  font-weight: 300 !important;
	}
	section.build-a-ring-section [data-widget-element="widgetHeader"].erd-titles .big-nums {
	  border-radius: 65px;
	  width: 65px;
	  height: 65px;
	  top: -65px;
	  font-size: 36px !important;
	}
}

@media(min-width:1400px){
	section.build-a-ring-section .container {
	  max-width: 60% !important;
	}
}












/* =======================================================================================
	DIAMONDS
======================================================================================= */

#diamond-search-table_wrapper .video-container {
  border: 1px solid #e0e0e0 !important;
  border-bottom: 0 !important;
  border-radius: 10px 10px 0 0;
}

#comparison .row .grid-mode-item .info,
#diamond-search-table_wrapper .row .grid-mode-item .info {
  border: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#comparison .row .grid-mode-item .info .price,
#diamond-search-table_wrapper .row .grid-mode-item .info .price {
  padding-bottom: 5px;
}

#comparison .row .grid-mode-item .info .price .cost,
#comparison .row .grid-mode-item .info .price .cost .moneySign,
#diamond-search-table_wrapper .row .grid-mode-item .info .price .cost,
#diamond-search-table_wrapper .row .grid-mode-item .info .price .cost .moneySign {
  color: #000000 !important;
  font-size: 1rem;
  transform: none;
  vertical-align: unset;
  display: inline;
}

#comparison .row .grid-mode-item .info .options .btn,
#diamond-search-table_wrapper .row .grid-mode-item .info .options .btn {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06rem !important;
}

#comparison .row .grid-mode-item .info .options .btn:not(.selected),
#diamond-search-table_wrapper .row .grid-mode-item .info .options .btn:not(.selected) {
  background: white !important;
  color: #000000 !important;
}

#diamond-search-table_wrapper .row .grid-mode-item .sku,
#comparison .row .grid-mode-item .sku {
  background: #ffffff !important;
  border-top: 1px solid #e0e0e0 !important;
  border-left: 1px solid #e0e0e0 !important;
  border-right: 1px solid #e0e0e0 !important;
  color: #000000 !important;
  font-weight: 500 !important;
}

#diamond-search-table_wrapper .row .grid-mode-item .specs,
#comparison .row .grid-mode-item .specs {
  background: #ffffff !important;
  border-top: 1px solid #e0e0e0 !important;
  border-bottom: 1px solid #e0e0e0 !important;
  border-left: 1px solid #e0e0e0 !important;
  border-right: 1px solid #e0e0e0 !important;
  color: #000000 !important;
  border-radius: 0 0 10px 10px;
}

#diamond-search-table_wrapper .row .grid-mode-item .specs span,
#comparison .row .grid-mode-item .specs span {
  background: none !important;
  color: #000000 !important;
}

#diamond-search-table_wrapper .row .grid-mode-item .info,
#comparison .row .grid-mode-item .info {
  display: block;
  padding-top: 5px;
}

#diamond-search-table_wrapper .row .grid-mode-item .info .price,
#comparison .row .grid-mode-item .info .price {
  text-align: center !important;
}

.specs span {
  background: none;
}

.specs span.label {
  font-weight: 500 !important;
  opacity: 1;
  letter-spacing: 0.06rem !important;
}

.specs &gt; span:first-child {
  line-height: 1;
  display: none;
}

.specs &gt; span:nth-child(3),
.specs &gt; span:nth-child(6),
.specs &gt; span:nth-child(9),
.specs &gt; span:nth-child(12){
  border-left: 1px solid #e0e0e0 !important;
  border-right: 1px solid #e0e0e0 !important;
}

.specs &gt; span:nth-child(5),
.specs &gt; span:nth-child(6),
.specs &gt; span:nth-child(7) {
  border-top: 1px solid #e0e0e0 !important;
  border-bottom: 1px solid #e0e0e0 !important;
}

#comparison .row .grid-mode-item .info .options .btn,
#diamond-search-table_wrapper .row .grid-mode-item .info .options .btn {
  justify-content: center;
  text-align: center;
  box-shadow: none !important;
}

#singleDiamondModal .modal-body .diamondDetails .details .specs span {
  padding: 7px;
}

#singleDiamondModal .modal-body .diamondDetails .price {
  font-size: 1rem !important;
  font-weight: 500 !important;
}

#singleDiamondModal .modal-body .diamondDetails .price .moneySign {
  color: #000000 !important;
  font-size: 1rem;
  transform: none;
  vertical-align: unset;
  display: inline;
}






/* =======================================================================================
	JEWELRY DEETS
======================================================================================= */

#dropAHintText,
#reviewSectionText {
  margin-top: 0 !important;
}

#store-reviews {
  padding-bottom: 10px !important;
}

#dropAHintMessagePreview,
#dropAHintMessagePreview * {
  font-family: "futura-pt", sans-serif;  color: #000000 !important;
  font-size: 24px !important;
  text-transform: none !important;
  font-weight: normal !important;
  line-height: 2.5rem !important;
}

#dropAHintModal .modal-body &gt; div &gt; .row {
  margin: 0 auto !important;
  width: 100% !important;
}

#dropAHintModal .modal-dialog-centered .modal-content button.close {
  z-index: 20000 !important;
}

@media(min-width:768px){
	#dropAHintModal .modal-dialog-centered .modal-content {
	  width: calc(100% + 10px) !important;
	}
}

.madlibs {
  display: inline-flex;
  border-bottom: 1px solid #000000 !important;
  min-width: 180px;
  text-align: center;
  justify-content: center;
}

.madlibs.populated {
  min-width: 1px;
  width: auto;
  border-bottom: 0 !important;
}








/* =======================================================================================
	GEMSTONE VARIATIONS
======================================================================================= */

#variation-metal-type,
#variation-gemstone-type {
  border: 2px solid #151515 !important;
  border-radius: 0.25rem !important;
}

#variation-metal-type .metal-type-container,
#variation-gemstone-type .gemstone-type-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-left: 7px !important;
  padding-right: 7px !important;
}

#variation-metal-type .metal-type-container &gt; [data-value],
#variation-gemstone-type .gemstone-type-container &gt; [data-value] {
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  position: relative;
  width: auto;
  max-width: unset;
  margin: 0 5px 15px 5px;
}

#variation-metal-type .metal-type-container &gt; div::before,
#variation-metal-type .metal-type-container &gt; [data-value="1"]::before,
#variation-gemstone-type .gemstone-type-container &gt; div::before,
#variation-gemstone-type .gemstone-type-container &gt; [data-value="1"]::before {
  content: "";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: normal;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  max-width: 30px;
  max-height: 30px;
  margin-right: 3px;
  background-size: cover !important;
  background: url(../images/gemstone-colors/gemstone-agate.png) center center no-repeat;
  border-radius: 30px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
  color: rgba(0,0,0,0.25);
}

#variation-metal-type .metal-type-container &gt; div::before,
#variation-metal-type .metal-type-container &gt; [data-value="1"]::before {
  border-radius: 30px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}

#variation-metal-type .metal-type-container &gt; [data-value] &gt; span,
#variation-gemstone-type .gemstone-type-container &gt; [data-value] &gt; span {
  display: none;
}

#variation-metal-type .metal-type-container &gt; [data-value].selected::after,
#variation-gemstone-type .gemstone-type-container &gt; [data-value].selected::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  width: 40px;
  height: 40px;
  border: 2px solid #000000;
  border-radius: 40px;
}

#variation-metal-type label,
#variation-gemstone-type label {
  font-size: 10px;
  font-weight: 600;
  color: #000000;
  z-index: 1000;
  background: none !important;
  letter-spacing: normal !important;
  padding-left: 16px;
  padding-top: 10px;
  margin-bottom: 0 !important;
}

#variation-metal-type-text,
#variation-gemstone-type-text {
  font-size: 17px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04rem !important;
  color: #757575 !important;
  text-align: left !important;
  padding-left: 15px;
  margin-top: -4px;
  padding-bottom: 10px;
}

/*materials/metals*/
#variation-metal-type .metal-type-container &gt; [data-value="14KW"]::before { content:"14"; background: #e2e0da; }
#variation-metal-type .metal-type-container &gt; [data-value="14KY"]::before { content:"14"; background: #f3cc8b; }
#variation-metal-type .metal-type-container &gt; [data-value="18KW"]::before { content:"18"; background: #e2e0da; }
#variation-metal-type .metal-type-container &gt; [data-value="18KY"]::before { content:"18"; background: #f3cc8b; }
#variation-metal-type .metal-type-container &gt; [data-value="PL"]::before { background: #edeff1; }
#variation-metal-type .metal-type-container &gt; [data-value="SS"]::before { background: #c0c0c0; }
#variation-metal-type .metal-type-container &gt; [data-value="TC"]::before { background: #454545; }
#variation-metal-type .metal-type-container &gt; [data-value="PA"]::before { background: #edeff1; }
#variation-metal-type .metal-type-container &gt; [data-value="TI"]::before { background: #878681; }
#variation-metal-type .metal-type-container &gt; [data-value="ST"]::before { background: #7a7f80; }
#variation-metal-type .metal-type-container &gt; [data-value="RH"]::before { background: #515151; }
#variation-metal-type .metal-type-container &gt; [data-value="14KR"]::before { content:"14"; background: #f3c0b7; }
#variation-metal-type .metal-type-container &gt; [data-value="18KR"]::before { content:"18"; background: #f3c0b7; }
#variation-metal-type .metal-type-container &gt; [data-value="24KW"]::before { content:"24"; background: #e2e0da; }
#variation-metal-type .metal-type-container &gt; [data-value="24KY"]::before { content:"24"; background: #f3cc8b; }
#variation-metal-type .metal-type-container &gt; [data-value="24KR"]::before { content:"24"; background: #f3c0b7; }
#variation-metal-type .metal-type-container &gt; [data-value="19KW"]::before { content:"19"; background: #e2e0da; }
#variation-metal-type .metal-type-container &gt; [data-value="19KY"]::before { content:"19"; background: #f3cc8b; }
#variation-metal-type .metal-type-container &gt; [data-value="14KS"]::before { content:"14"; background: #f3c0b7; }
#variation-metal-type .metal-type-container &gt; [data-value="10KW"]::before { content:"10"; background: #e2e0da; }
#variation-metal-type .metal-type-container &gt; [data-value="10KY"]::before { content:"10"; background: #f3cc8b; }
#variation-metal-type .metal-type-container &gt; [data-value="10KR"]::before { content:"10"; background: #f3c0b7; }
#variation-metal-type .metal-type-container &gt; [data-value="585PL"]::before { background: #edeff1; }
#variation-metal-type .metal-type-container &gt; [data-value="950PL"]::before { background: #edeff1; }
#variation-metal-type .metal-type-container &gt; [data-value="14KTT"]::before { content:"14"; background: #e2e0da; background: linear-gradient(90deg, #e2e0da 0%, #e2e0da 50%, #f3cc8b 50%, #f3cc8b 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="14KTRI"]::before { content:"14"; background: #e2e0da; background: linear-gradient(90deg, #e2e0da 0%, #e2e0da 33%, #f3cc8b 33%, #f3cc8b 66%, #f3c0b7 66%, #f3c0b7 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="18KTT"]::before { content:"18"; background: #e2e0da; background: linear-gradient(90deg, #e2e0da 0%, #e2e0da 50%, #f3cc8b 50%, #f3cc8b 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="18KTRI"]::before { content:"18"; background: #e2e0da; background: linear-gradient(90deg, #e2e0da 0%, #e2e0da 33%, #f3cc8b 33%, #f3cc8b 66%, #f3c0b7 66%, #f3c0b7 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="RECYCLED"]::before { background: #f3cc8b; }
#variation-metal-type .metal-type-container &gt; [data-value="SERI"]::before { background: #edeff1; }
#variation-metal-type .metal-type-container &gt; [data-value="VERM"]::before { background: #f6da74; }
#variation-metal-type .metal-type-container &gt; [data-value="CER"]::before { background: #ffffff; }
#variation-metal-type .metal-type-container &gt; [data-value="CARB"]::before { background: #333333; }
#variation-metal-type .metal-type-container &gt; [data-value="ZIRC"]::before { background: #151515; }
#variation-metal-type .metal-type-container &gt; [data-value="CO"]::before { background: #7a7f80; }
#variation-metal-type .metal-type-container &gt; [data-value="BLKTI"]::before { background: #151515; }
#variation-metal-type .metal-type-container &gt; [data-value="BLKCO"]::before { background: #151515; }
#variation-metal-type .metal-type-container &gt; [data-value="14MULTIGOLD"]::before { content:"14"; background: #e2e0da; background: linear-gradient(90deg, #e2e0da 0%, #e2e0da 33%, #f3cc8b 33%, #f3cc8b 66%, #f3c0b7 66%, #f3c0b7 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="MULTMAT"]::before { background: #878681; background: linear-gradient(90deg, #878681 0%, #878681 50%, #f3cc8b 50%, #f3cc8b 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="TANT"]::before { background: #878681; }
#variation-metal-type .metal-type-container &gt; [data-value="WBRS"]::before { background: #e9e5d1; }
#variation-metal-type .metal-type-container &gt; [data-value="YBRS"]::before { background: #d7b233; }
#variation-metal-type .metal-type-container &gt; [data-value="RBRS"]::before { background: #d6a595; }
#variation-metal-type .metal-type-container &gt; [data-value="COBALTCHRO"]::before { background: #edeff1; }
#variation-metal-type .metal-type-container &gt; [data-value="TUNG"]::before { background: #767980; }
#variation-metal-type .metal-type-container &gt; [data-value="18KS"]::before { content:"18"; background: #f3c0b7; }
#variation-metal-type .metal-type-container &gt; [data-value="10KWY"]::before { content:"10"; background: #e2e0da; background: linear-gradient(90deg, #e2e0da 0%, #e2e0da 50%, #f3cc8b 50%, #f3cc8b 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="10KWR"]::before { content:"10"; background: #e2e0da; background: linear-gradient(90deg, #e2e0da 0%, #e2e0da 50%, #f3c0b7 50%, #f3c0b7 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="10KYW"]::before { content:"10"; background: #f3cc8b; background: linear-gradient(90deg, #f3cc8b 0%, #f3cc8b 50%, #e2e0da 50%, #e2e0da 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="10KYR"]::before { content:"10"; background: #f3cc8b; background: linear-gradient(90deg, #f3cc8b 0%, #f3cc8b 50%, #f3c0b7 50%, #f3c0b7 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="10KRY"]::before { content:"10"; background: #f3c0b7; background: linear-gradient(90deg, #f3c0b7 0%, #f3c0b7 50%, #f3cc8b 50%, #f3cc8b 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="10KRW"]::before { content:"10"; background: #f3c0b7; background: linear-gradient(90deg, #f3c0b7 0%, #f3c0b7 50%, #e2e0da 50%, #e2e0da 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="10KRWY"]::before { content:"10"; background: #f3c0b7; background: linear-gradient(90deg, #f3c0b7 0%, #f3c0b7 33%, #e2e0da 33%, #e2e0da 66%, #f3cc8b 66%, #f3cc8b 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="10KRYW"]::before { content:"10"; background: #f3c0b7; background: linear-gradient(90deg, #f3c0b7 0%, #f3c0b7 33%, #f3cc8b 33%, #f3cc8b 66%, #e2e0da 66%, #e2e0da 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="10KYRW"]::before { content:"10"; background: #f3cc8b; background: linear-gradient(90deg, #f3cc8b 0%, #f3cc8b 33%, #f3c0b7 33%, #f3c0b7 66%, #e2e0da 66%, #e2e0da 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="10KYWR"]::before { content:"10"; background: #f3cc8b; background: linear-gradient(90deg, #f3cc8b 0%, #f3cc8b 33%, #e2e0da 33%, #e2e0da 66%, #f3c0b7 66%, #f3c0b7 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="10KWRY"]::before { content:"10"; background: #e2e0da; background: linear-gradient(90deg, #e2e0da 0%, #e2e0da 33%, #f3c0b7 33%, #f3c0b7 66%, #f3cc8b 66%, #f3cc8b 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="10KWYR"]::before { content:"10"; background: #e2e0da; background: linear-gradient(90deg, #e2e0da 0%, #e2e0da 33%, #f3cc8b 33%, #f3cc8b 66%, #f3c0b7 66%, #f3c0b7 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="10KTT"]::before { content:"10"; background: #e2e0da; background: linear-gradient(90deg, #e2e0da 0%, #e2e0da 50%, #f3cc8b 50%, #f3cc8b 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="10KTRI"]::before { content:"10"; background: #e2e0da; background: linear-gradient(90deg, #e2e0da 0%, #e2e0da 33%, #f3cc8b 33%, #f3cc8b 66%, #f3c0b7 66%, #f3c0b7 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="14KWY"]::before { content:"14"; background: #e2e0da; background: linear-gradient(90deg, #e2e0da 0%, #e2e0da 50%, #f3cc8b 50%, #f3cc8b 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="14KWR"]::before { content:"14"; background: #e2e0da; background: linear-gradient(90deg, #e2e0da 0%, #e2e0da 50%, #f3c0b7 50%, #f3c0b7 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="14KYW"]::before { content:"14"; background: #f3cc8b; background: linear-gradient(90deg, #f3cc8b 0%, #f3cc8b 50%, #e2e0da 50%, #e2e0da 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="14KYR"]::before { content:"14"; background: #f3cc8b; background: linear-gradient(90deg, #f3cc8b 0%, #f3cc8b 50%, #f3c0b7 50%, #f3c0b7 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="14KRY"]::before { content:"14"; background: #f3c0b7; background: linear-gradient(90deg, #f3c0b7 0%, #f3c0b7 50%, #f3cc8b 50%, #f3cc8b 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="14KRW"]::before { content:"14"; background: #f3c0b7; background: linear-gradient(90deg, #f3c0b7 0%, #f3c0b7 50%, #e2e0da 50%, #e2e0da 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="14KRWY"]::before { content:"14"; background: #f3c0b7; background: linear-gradient(90deg, #f3c0b7 0%, #f3c0b7 33%, #e2e0da 33%, #e2e0da 66%, #f3cc8b 66%, #f3cc8b 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="14KRYW"]::before { content:"14"; background: #f3c0b7; background: linear-gradient(90deg, #f3c0b7 0%, #f3c0b7 33%, #f3cc8b 33%, #f3cc8b 66%, #e2e0da 66%, #e2e0da 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="14KYRW"]::before { content:"14"; background: #f3cc8b; background: linear-gradient(90deg, #f3cc8b 0%, #f3cc8b 33%, #f3c0b7 33%, #f3c0b7 66%, #e2e0da 66%, #e2e0da 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="14KYWR"]::before { content:"14"; background: #f3cc8b; background: linear-gradient(90deg, #f3cc8b 0%, #f3cc8b 33%, #e2e0da 33%, #e2e0da 66%, #f3c0b7 66%, #f3c0b7 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="14KWRY"]::before { content:"14"; background: #e2e0da; background: linear-gradient(90deg, #e2e0da 0%, #e2e0da 33%, #f3c0b7 33%, #f3c0b7 66%, #f3cc8b 66%, #f3cc8b 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="14KWYR"]::before { content:"14"; background: #e2e0da; background: linear-gradient(90deg, #e2e0da 0%, #e2e0da 33%, #f3cc8b 33%, #f3cc8b 66%, #f3c0b7 66%, #f3c0b7 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="18KWY"]::before { content:"18"; background: #e2e0da; background: linear-gradient(90deg, #e2e0da 0%, #e2e0da 50%, #f3cc8b 50%, #f3cc8b 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="18KWR"]::before { content:"18"; background: #e2e0da; background: linear-gradient(90deg, #e2e0da 0%, #e2e0da 50%, #f3c0b7 50%, #f3c0b7 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="18KYW"]::before { content:"18"; background: #f3cc8b; background: linear-gradient(90deg, #f3cc8b 0%, #f3cc8b 50%, #e2e0da 50%, #e2e0da 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="18KYR"]::before { content:"18"; background: #f3cc8b; background: linear-gradient(90deg, #f3cc8b 0%, #f3cc8b 50%, #f3c0b7 50%, #f3c0b7 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="18KRY"]::before { content:"18"; background: #f3c0b7; background: linear-gradient(90deg, #f3c0b7 0%, #f3c0b7 50%, #f3cc8b 50%, #f3cc8b 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="18KRW"]::before { content:"18"; background: #f3c0b7; background: linear-gradient(90deg, #f3c0b7 0%, #f3c0b7 50%, #e2e0da 50%, #e2e0da 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="18KRWY"]::before { content:"18"; background: #f3c0b7; background: linear-gradient(90deg, #f3c0b7 0%, #f3c0b7 33%, #e2e0da 33%, #e2e0da 66%, #f3cc8b 66%, #f3cc8b 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="18KRYW"]::before { content:"18"; background: #f3c0b7; background: linear-gradient(90deg, #f3c0b7 0%, #f3c0b7 33%, #f3cc8b 33%, #f3cc8b 66%, #e2e0da 66%, #e2e0da 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="18KYRW"]::before { content:"18"; background: #f3cc8b; background: linear-gradient(90deg, #f3cc8b 0%, #f3cc8b 33%, #f3c0b7 33%, #f3c0b7 66%, #e2e0da 66%, #e2e0da 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="18KYWR"]::before { content:"18"; background: #f3cc8b; background: linear-gradient(90deg, #f3cc8b 0%, #f3cc8b 33%, #e2e0da 33%, #e2e0da 66%, #f3c0b7 66%, #f3c0b7 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="18KWRY"]::before { content:"18"; background: #e2e0da; background: linear-gradient(90deg, #e2e0da 0%, #e2e0da 33%, #f3c0b7 33%, #f3c0b7 66%, #f3cc8b 66%, #f3cc8b 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="18KWYR"]::before { content:"18"; background: #e2e0da; background: linear-gradient(90deg, #e2e0da 0%, #e2e0da 33%, #f3cc8b 33%, #f3cc8b 66%, #f3c0b7 66%, #f3c0b7 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="10KRGP"]::before { content:"10"; background: #f3c0b7; }
#variation-metal-type .metal-type-container &gt; [data-value="10KWGP"]::before { content:"10"; background: #e2e0da; }
#variation-metal-type .metal-type-container &gt; [data-value="10KYGP"]::before { content:"10"; background: #f3cc8b; }
#variation-metal-type .metal-type-container &gt; [data-value="14KRGP"]::before { content:"14"; background: #f3c0b7; }
#variation-metal-type .metal-type-container &gt; [data-value="14KWGP"]::before { content:"14"; background: #e2e0da; }
#variation-metal-type .metal-type-container &gt; [data-value="14KYGP"]::before { content:"14"; background: #f3cc8b; }
#variation-metal-type .metal-type-container &gt; [data-value="18KRGP"]::before { content:"18"; background: #f3c0b7; }
#variation-metal-type .metal-type-container &gt; [data-value="18KWGP"]::before { content:"18"; background: #e2e0da; }
#variation-metal-type .metal-type-container &gt; [data-value="18KYGP"]::before { content:"18"; background: #f3cc8b; }
#variation-metal-type .metal-type-container &gt; [data-value="18KWP"]::before { content:"18"; background: #e2e0da; background: linear-gradient(90deg, #e2e0da 0%, #e2e0da 50%, #edeff1 50%, #edeff1 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="18KYP"]::before { content:"18"; background: #f3cc8b; background: linear-gradient(90deg, #f3cc8b 0%, #f3cc8b 50%, #edeff1 50%, #edeff1 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="18KRP"]::before { content:"18"; background: #f3c0b7; background: linear-gradient(90deg, #f3c0b7 0%, #f3c0b7 50%, #edeff1 50%, #edeff1 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="TISS"]::before { background: #878681; background: linear-gradient(90deg, #878681 0%, #878681 50%, #c0c0c0 50%, #c0c0c0 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="SSTI"]::before { background: #c0c0c0; background: linear-gradient(90deg, #c0c0c0 0%, #c0c0c0 50%, #878681 50%, #878681 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="DST"]::before { background: #7a7f80; }
#variation-metal-type .metal-type-container &gt; [data-value="METEOR"]::before { background: #656565; }
#variation-metal-type .metal-type-container &gt; [data-value="HWD"]::before { background: #835846; }
#variation-metal-type .metal-type-container &gt; [data-value="BRZ"]::before { background: #cd7f32; }
#variation-metal-type .metal-type-container &gt; [data-value="WBRZ"]::before { background: #e6e3d0; }
#variation-metal-type .metal-type-container &gt; [data-value="YSS"]::before { background: #d5ae3e; }
#variation-metal-type .metal-type-container &gt; [data-value="22KY"]::before { content:"22"; background: #f3cc8b; }
#variation-metal-type .metal-type-container &gt; [data-value="14KV"]::before { content:"14"; background: #e2e0da; }
#variation-metal-type .metal-type-container &gt; [data-value="18KV"]::before { content:"18"; background: #e2e0da; }
#variation-metal-type .metal-type-container &gt; [data-value="14KH"]::before { content:"14"; background: #f3cc8b; }
#variation-metal-type .metal-type-container &gt; [data-value="18KH"]::before { content:"18"; background: #f3cc8b; }
#variation-metal-type .metal-type-container &gt; [data-value="TT"]::before { background: #e2e0da; background: linear-gradient(90deg, #e2e0da 0%, #e2e0da 50%, #f3cc8b 50%, #f3cc8b 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="YG"]::before { background: #f3cc8b; }
#variation-metal-type .metal-type-container &gt; [data-value="RG"]::before { background: #f3c0b7; }
#variation-metal-type .metal-type-container &gt; [data-value="WG"]::before { background: #e2e0da; }
#variation-metal-type .metal-type-container &gt; [data-value="TRI"]::before { background: #e2e0da; background: linear-gradient(90deg, #e2e0da 0%, #e2e0da 33%, #f3cc8b 33%, #f3cc8b 66%, #f3c0b7 66%, #f3c0b7 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="RGPSS"]::before { background: #f3c0b7; }
#variation-metal-type .metal-type-container &gt; [data-value="WGPSS"]::before { background: #e2e0da; }
#variation-metal-type .metal-type-container &gt; [data-value="YGPSS"]::before { background: #f3cc8b; }
#variation-metal-type .metal-type-container &gt; [data-value="PLPSS"]::before { background: #edeff1; }
#variation-metal-type .metal-type-container &gt; [data-value="PSS"]::before { background: #c0c0c0; }
#variation-metal-type .metal-type-container &gt; [data-value="BLKRH"]::before { background: #333333; }
#variation-metal-type .metal-type-container &gt; [data-value="SSYG"]::before { background: #c0c0c0; background: linear-gradient(90deg, #c0c0c0 0%, #c0c0c0 50%, #f3cc8b 50%, #f3cc8b 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="SSRG"]::before { background: #c0c0c0; background: linear-gradient(90deg, #c0c0c0 0%, #c0c0c0 50%, #f3c0b7 50%, #f3c0b7 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="SSWG"]::before { background: #c0c0c0; background: linear-gradient(90deg, #c0c0c0 0%, #c0c0c0 50%, #e2e0da 50%, #e2e0da 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="SSWGYG"]::before { background: #c0c0c0; background: linear-gradient(90deg, #c0c0c0 0%, #c0c0c0 33%, #e2e0da 33%, #e2e0da 66%, #f3cc8b 66%, #f3cc8b 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="SSWGRG"]::before { background: #c0c0c0; background: linear-gradient(90deg, #c0c0c0 0%, #c0c0c0 33%, #e2e0da 33%, #e2e0da 66%, #f3c0b7 66%, #f3c0b7 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="SSYGRG"]::before { background: #c0c0c0; background: linear-gradient(90deg, #c0c0c0 0%, #c0c0c0 33%, #f3cc8b 33%, #f3cc8b 66%, #f3c0b7 66%, #f3c0b7 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="SSRH"]::before { background: #c0c0c0; }
#variation-metal-type .metal-type-container &gt; [data-value="STSS"]::before { background: #7a7f80; background: linear-gradient(90deg, #7a7f80 0%, #7a7f80 50%, #c0c0c0 50%, #c0c0c0 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="SILC"]::before { background: #f3f3f3; }
#variation-metal-type .metal-type-container &gt; [data-value="9KW"]::before { content:"9"; background: #e2e0da; }
#variation-metal-type .metal-type-container &gt; [data-value="9KY"]::before { content:"9"; background: #f3cc8b; }
#variation-metal-type .metal-type-container &gt; [data-value="9KR"]::before { content:"9"; background: #f3c0b7; }
#variation-metal-type .metal-type-container &gt; [data-value="GP"]::before { background: #f3cc8b; }
#variation-metal-type .metal-type-container &gt; [data-value="PLASTIC"]::before { background: #ffffff; }
#variation-metal-type .metal-type-container &gt; [data-value="SP"]::before { background: #c0c0c0; }
#variation-metal-type .metal-type-container &gt; [data-value="SSBLKRH"]::before { background: #333333; }
#variation-metal-type .metal-type-container &gt; [data-value="SSTTG"]::before { background: #e2e0da; background: linear-gradient(90deg, #e2e0da 0%, #e2e0da 33%, #f3cc8b 33%, #f3cc8b 66%, #f3c0b7 66%, #f3c0b7 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="MULTIGOLD"]::before { background: #e2e0da; background: linear-gradient(90deg, #e2e0da 0%, #e2e0da 33%, #f3cc8b 33%, #f3cc8b 66%, #f3c0b7 66%, #f3c0b7 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="GRTANT"]::before { background: #b1b1b3; }
#variation-metal-type .metal-type-container &gt; [data-value="LEATH"]::before { background: #523226; }
#variation-metal-type .metal-type-container &gt; [data-value="BLKPVD"]::before { background: #151515; }
#variation-metal-type .metal-type-container &gt; [data-value="14KBLK"]::before { content:"14"; background: #151515; color:rgba(255,255,255,0.5); }
#variation-metal-type .metal-type-container &gt; [data-value="18KBLK"]::before { content:"18"; background: #151515; color:rgba(255,255,255,0.5); }
#variation-metal-type .metal-type-container &gt; [data-value="STCER"]::before { background: #7a7f80; background: linear-gradient(90deg, #7a7f80 0%, #7a7f80 50%, #ffffff 50%, #ffffff 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="STWG"]::before { background: #7a7f80; background: linear-gradient(90deg, #7a7f80 0%, #7a7f80 50%, #e2e0da 50%, #e2e0da 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="STYG"]::before { background: #7a7f80; background: linear-gradient(90deg, #7a7f80 0%, #7a7f80 50%, #f3cc8b 50%, #f3cc8b 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="STRG"]::before { background: #7a7f80; background: linear-gradient(90deg, #7a7f80 0%, #7a7f80 50%, #f3c0b7 50%, #f3c0b7 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="GF"]::before { background: #f3cc8b; }
#variation-metal-type .metal-type-container &gt; [data-value="GFVERM"]::before { background: #f6da74; }
#variation-metal-type .metal-type-container &gt; [data-value="BRS"]::before { background: #d7b233; }
#variation-metal-type .metal-type-container &gt; [data-value="PT"]::before { background: #545454; }
#variation-metal-type .metal-type-container &gt; [data-value="BST"]::before { background: #333333; }
#variation-metal-type .metal-type-container &gt; [data-value="21KW"]::before { content:"21"; background: #e2e0da; }
#variation-metal-type .metal-type-container &gt; [data-value="21KY"]::before { content:"21"; background: #f3cc8b; }
#variation-metal-type .metal-type-container &gt; [data-value="21KR"]::before { content:"21"; background: #f3c0b7; }
#variation-metal-type .metal-type-container &gt; [data-value="22KW"]::before { content:"22"; background: #e2e0da; }
#variation-metal-type .metal-type-container &gt; [data-value="22KR"]::before { content:"22"; background: #f3c0b7; }
#variation-metal-type .metal-type-container &gt; [data-value="SS14KVERM"]::before { content:"14"; background: #c0c0c0; background: linear-gradient(90deg, #c0c0c0 0%, #c0c0c0 50%, #f6da74 50%, #f6da74 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="SS18KVERM"]::before { content:"18"; background: #c0c0c0; background: linear-gradient(90deg, #c0c0c0 0%, #c0c0c0 50%, #f6da74 50%, #f6da74 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="SS22KVERM"]::before { content:"22";  background: #c0c0c0; background: linear-gradient(90deg, #c0c0c0 0%, #c0c0c0 50%, #f6da74 50%, #f6da74 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="TUNGDST"]::before { background: #767980; background: linear-gradient(90deg, #767980 0%, #767980 50%, #7a7f80 50%, #7a7f80 100%); }
#variation-metal-type .metal-type-container &gt; [data-value="TUNGB"]::before { background: #202020; }
#variation-metal-type .metal-type-container &gt; [data-value="TUNGW"]::before { background: #bfc2c3; }
#variation-metal-type .metal-type-container &gt; [data-value="TUNGY"]::before { background: #eec46f; }

#variation-metal-type .metal-type-container &gt; [data-value]::before { color: rgba(0,0,0,0) !important; }

/*gemstones*/
#variation-gemstone-type .gemstone-type-container &gt; [data-value="0"]::before { background: none; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="1"]::before { background: url(../images/gemstone-colors/gemstone-alexandrite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="2"]::before { background: url(../images/gemstone-colors/gemstone-amethyst.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="3"]::before { background: url(../images/gemstone-colors/gemstone-aquamarine.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="4"]::before { background: url(../images/gemstone-colors/gemstone-citrine.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="5"]::before { background: url(../images/gemstone-colors/gemstone-diamond.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="6"]::before { background: url(../images/gemstone-colors/gemstone-emerald.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="7"]::before { background: url(../images/gemstone-colors/gemstone-garnet.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="8"]::before { background: url(../images/gemstone-colors/gemstone-jade.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="9"]::before { background: url(../images/gemstone-colors/gemstone-onyx.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="10"]::before { background: url(../images/gemstone-colors/gemstone-opal.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="11"]::before { background: url(../images/gemstone-colors/gemstone-pearl.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="12"]::before { background: url(../images/gemstone-colors/gemstone-peridot.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="13"]::before { background: url(../images/gemstone-colors/gemstone-ruby.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="14"]::before { background: url(../images/gemstone-colors/gemstone-sapphire.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="15"]::before { background: url(../images/gemstone-colors/gemstone-tanzanite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="16"]::before { background: url(../images/gemstone-colors/gemstone-topaz.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="17"]::before { background: url(../images/gemstone-colors/gemstone-tourmaline.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="18"]::before { background: url(../images/gemstone-colors/gemstone-zircon.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="19"]::before { background: url(../images/gemstone-colors/gemstone-iolite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="20"]::before { background: url(../images/gemstone-colors/gemstone-turquoise.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="21"]::before { background: url(../images/gemstone-colors/gemstone-quartz.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="22"]::before { background: url(../images/gemstone-colors/gemstone-aventurine.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="23"]::before { background: url(../images/gemstone-colors/gemstone-morganite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="24"]::before { background: url(../images/gemstone-colors/gemstone-agate.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="25"]::before { background: url(../images/gemstone-colors/gemstone-chalcedony.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="26"]::before { background: url(../images/gemstone-colors/gemstone-hematite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="27"]::before { background: url(../images/gemstone-colors/gemstone-baby-pink-topaz.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="28"]::before { background: url(../images/gemstone-colors/gemstone-blue-sapphire.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="29"]::before { background: url(../images/gemstone-colors/gemstone-blue-zircon.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="30"]::before { background: url(../images/gemstone-colors/gemstone-cubic-zirconia.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="31"]::before { background: url(../images/gemstone-colors/gemstone-dark-blue-cubic-zirconia.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="32"]::before { background: url(../images/gemstone-colors/gemstone-alexandrite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="33"]::before { background: url(../images/gemstone-colors/gemstone-amethyst.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="34"]::before { background: url(../images/gemstone-colors/gemstone-aquamarine.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="35"]::before { background: url(../images/gemstone-colors/gemstone-citrine.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="36"]::before { background: url(../images/gemstone-colors/gemstone-diamond.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="37"]::before { background: url(../images/gemstone-colors/gemstone-emerald.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="38"]::before { background: url(../images/gemstone-colors/gemstone-garnet.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="39"]::before { background: url(../images/gemstone-colors/gemstone-peridot.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="40"]::before { background: url(../images/gemstone-colors/gemstone-pink-sapphire.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="41"]::before { background: url(../images/gemstone-colors/gemstone-ruby.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="42"]::before { background: url(../images/gemstone-colors/gemstone-sapphire.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="43"]::before { background: url(../images/gemstone-colors/gemstone-tourmaline.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="44"]::before { background: url(../images/gemstone-colors/gemstone-crystal.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="45"]::before { background: url(../images/gemstone-colors/gemstone-zircon.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="46"]::before { background: url(../images/gemstone-colors/gemstone-alexandrite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="47"]::before { background: url(../images/gemstone-colors/gemstone-blue-sapphire.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="48"]::before { background: url(../images/gemstone-colors/gemstone-emerald.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="49"]::before { background: url(../images/gemstone-colors/gemstone-opal.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="50"]::before { background: url(../images/gemstone-colors/gemstone-ruby.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="51"]::before { background: url(../images/gemstone-colors/gemstone-light-blue-cubic-zirconia.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="52"]::before { background: url(../images/gemstone-colors/gemstone-london-blue-topaz.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="53"]::before { background: url(../images/gemstone-colors/gemstone-mozambique-garnet.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="54"]::before { background: url(../images/gemstone-colors/gemstone-pink-sapphire.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="55"]::before { background: url(../images/gemstone-colors/gemstone-pink-spinel.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="56"]::before { background: url(../images/gemstone-colors/gemstone-pink-tourmaline.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="57"]::before { background: url(../images/gemstone-colors/gemstone-purple-cubic-zirconia.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="58"]::before { background: url(../images/gemstone-colors/gemstone-garnet.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="59"]::before { background: url(../images/gemstone-colors/gemstone-rhodolite-garnet.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="60"]::before { background: url(../images/gemstone-colors/gemstone-sky-blue-topaz.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="61"]::before { background: url(../images/gemstone-colors/gemstone-smoky-quartz.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="62"]::before { background: url(../images/gemstone-colors/gemstone-swiss-blue-topaz.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="63"]::before { background: url(../images/gemstone-colors/gemstone-white-sapphire.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="64"]::before { background: url(../images/gemstone-colors/gemstone-white-topaz.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="65"]::before { background: url(../images/gemstone-colors/gemstone-yellow-sapphire.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="66"]::before { background: url(../images/gemstone-colors/gemstone-amethyst.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="67"]::before { background: url(../images/gemstone-colors/gemstone-aquamarine.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="68"]::before { background: url(../images/gemstone-colors/gemstone-citrine.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="69"]::before { background: url(../images/gemstone-colors/gemstone-garnet.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="70"]::before { background: url(../images/gemstone-colors/gemstone-peridot.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="71"]::before { background: url(../images/gemstone-colors/gemstone-malachite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="72"]::before { background: url(../images/gemstone-colors/gemstone-jasper.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="73"]::before { background: url(../images/gemstone-colors/gemstone-pietersite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="74"]::before { background: url(../images/gemstone-colors/gemstone-tigers-eye.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="75"]::before { background: url(../images/gemstone-colors/gemstone-rhodochrosite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="76"]::before { background: url(../images/gemstone-colors/gemstone-sodalite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="77"]::before { background: url(../images/gemstone-colors/gemstone-thulite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="78"]::before { background: url(../images/gemstone-colors/gemstone-howlite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="79"]::before { background: url(../images/gemstone-colors/gemstone-fuchsite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="80"]::before { background: url(../images/gemstone-colors/gemstone-apatite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="81"]::before { background: url(../images/gemstone-colors/gemstone-prehnite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="82"]::before { background: url(../images/gemstone-colors/gemstone-sandstone.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="83"]::before { background: url(../images/gemstone-colors/gemstone-crystal.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="84"]::before { background: url(../images/gemstone-colors/gemstone-phosphorite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="85"]::before { background: url(../images/gemstone-colors/gemstone-lapis-lazuli.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="86"]::before { background: url(../images/gemstone-colors/gemstone-seraphinite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="87"]::before { background: url(../images/gemstone-colors/gemstone-labradorite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="88"]::before { background: url(../images/gemstone-colors/gemstone-pink-coral.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="89"]::before { background: url(../images/gemstone-colors/gemstone-moonstone.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="90"]::before { background: url(../images/gemstone-colors/gemstone-rainbow-moonstone.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="91"]::before { background: url(../images/gemstone-colors/gemstone-blue-topaz.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="92"]::before { background: url(../images/gemstone-colors/gemstone-pink-amythest.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="93"]::before { background: url(../images/gemstone-colors/gemstone-green-quartz.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="94"]::before { background: url(../images/gemstone-colors/gemstone-sugilite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="95"]::before { background: url(../images/gemstone-colors/gemstone-mabe-pearl.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="96"]::before { background: url(../images/gemstone-colors/gemstone-amber.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="97"]::before { background: url(../images/gemstone-colors/gemstone-kyanite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="98"]::before { background: url(../images/gemstone-colors/gemstone-spinel.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="99"]::before { background: url(../images/gemstone-colors/gemstone-blue-spinel.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="100"]::before { background: url(../images/gemstone-colors/gemstone-noble-red-spinel.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="101"]::before { background: url(../images/gemstone-colors/gemstone-purple-spinel.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="102"]::before { background: url(../images/gemstone-colors/gemstone-pyrite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="103"]::before { background: url(../images/gemstone-colors/gemstone-black-diamond.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="104"]::before { background: url(../images/gemstone-colors/gemstone-diamond.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="105"]::before { background: url(../images/gemstone-colors/gemstone-blue-quartz.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="106"]::before { background: url(../images/gemstone-colors/gemstone-moissanite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="107"]::before { background: url(../images/gemstone-colors/gemstone-larimar.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="108"]::before { background: url(../images/gemstone-colors/gemstone-sunstone.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="109"]::before { background: url(../images/gemstone-colors/gemstone-azurite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="110"]::before { background: url(../images/gemstone-colors/gemstone-azurite-malachite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="111"]::before { background: url(../images/gemstone-colors/gemstone-amazonite.png) center center no-repeat; }
#variation-gemstone-type .gemstone-type-container &gt; [data-value="112"]::before { background: url(../images/gemstone-colors/gemstone-pink-opal.png) center center no-repeat; }
</pre></body></html>