/* latin-ext */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: fallback;
  src: url(../fonts/librebaskerville-a276e861.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: fallback;
  src: url(../fonts/librebaskerville-e929461a.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url(../fonts/librebaskerville-7975e92c.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url(../fonts/librebaskerville-0e1f771f.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: url(../fonts/librebaskerville-6ef3f7eb.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: url(../fonts/librebaskerville-3c23e4f5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


html {
    width: 100VW;
    max-width: 100VW;
    height: 100DVH;
    max-height: 100DVH;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    background-color: #eef3fa;
    width: 100VW;
    max-width: 100VW;
    height: 100DVH;
    max-height: 100DVH;
    margin: 0; /* Remove default body margins */
    overflow-x: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

#businessLogoDiv {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
}

#businessLogo {
    width: 130px;
    height: 80px;
}

#loadingBanner {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 300px;
    height: 200px;
    border-radius: 15px;
    z-index: 1;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 1s, opacity 1s linear !important;
}

.display {
    visibility: visible !important;
    opacity: 1 !important;
    background-color: #FFFFFF;    
}

#page1 {
    gap: 0px;
    width: 100VW;
    max-height: 0;
    position: absolute;
    left: -2000px;
    top: 0;
    transition: all .8s;
    padding: 0;
    margin: 0;
}

#page2 {
    visibility: hidden;
    max-height: 0;
    width: 100%;
    position: absolute;
    left: 2000px;
    top: 0;
    transition: all .8s;
    margin: 0;
    padding: 0;
}

#toiEtMoiPage2 {
    visibility: hidden;
    max-height: 0;
    width: 100%;
    position: absolute;
    left: 2000px;
    top: 0;
    transition: all .8s;
    margin: 0;
    padding: 0;
}

#toiEtMoiPage3 {
    visibility: hidden;
    max-height: 0;
    width: 100%;
    position: absolute;
    left: 2000px;
    top: 0;
    transition: all .8s;
    margin: 0;
    padding: 0;
}

#page3 {
    visibility: hidden;
    max-height: 0;
    width: 100%;
    position: absolute;
    left: 2000px;
    top: 0;
    transition: all .8s;
    margin: 0;
    padding: 0;
}

#page4 {
    visibility: hidden;
    max-height: 0;
    width: 100%;
    position: absolute;
    left: 2000px;
    transition: all .8s;
}

#page5 {
    visibility: hidden;
    max-height: 0;
    width: 100%;
    position: absolute;
    left: 2000px;
    transition: all .8s;
}

#finalPage {
    visibility: hidden;
    max-height: 0;
    width: 100%;
    position: absolute;
    left: 2000px;
    transition: all .8s;
}

.finalIframe {
    width: 100%;
    height: 100DVH;
    position: relative;
    top: 0;
    left: 0;
}

.backButton {
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 16px;
    border-radius: 5px;
    position: fixed;
    left: 20px;
    top: 20px;
    padding: 4px 12px 4px 5px;
    z-index: 500;
    cursor: pointer;
    border-radius: 5px !important;
    appearance: button;
    border: 0 solid #e5e7eb;
    box-sizing: border-box;
    color:  #FFFFFF;
    background-color: #d4595c;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    text-align: center;
    transition: all .1s cubic-bezier(.4, 0, .2, 1);
    user-select: none;
    touch-action: manipulation;
}

.rotateRing {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    position: fixed;
    left: 140px;
    top: 20px;
    padding: 4px 5px 4px 5px;
    height: 32px;
    width: 32px;
    z-index: 500;
    cursor: pointer;
    border-radius: 5px !important;
    appearance: button;
    border: 0 solid #e5e7eb;
    box-sizing: border-box;
    color:  #FFFFFF;
    background-color: #d4595c;
    margin: 0;
    text-align: center;
    transition: all .1s cubic-bezier(.4, 0, .2, 1);
    user-select: none;
    touch-action: manipulation;
}

.selectedButton {
    background-color: #ffffff !important;
    color: #d4595c !important;
    border: solid 1px #d4595c !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
}

.activePage {
    visibility: visible !important;
    position: relative !important;
    left: 0 !important;
    min-height: unset !important;
    max-height: unset !important;
    transition: all .8s;
    -webkit-transition: all .8s;
}

.finishPage {
    left: -2000px !important;
    transition: all .8s !important;
    -webkit-transition: all .8s !important;
}

.fadeOut {
    visibility: hidden !important;
    opacity: 0;
    transition: visibility 0s 2s, opacity 2s linear;
    -webkit-transition: visibility 0s 2s, opacity 2s linear;
}

.topHeader1 {
    min-width: 100%;
    padding-top: 5DVH;
    display: flex;
    flex: 1 1 0px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 10px;
}

.topHeader2 {
    min-width: 100%;
    padding-top: 10DVH;
    display: flex;
    flex: 1 1 0px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
    margin-bottom: 10px;
}

.topHeader3 {
    min-width: 100%;
    padding-top: 10DVH;
    display: flex;
    flex: 1 1 0px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
    margin-bottom: 10px;
}

.topHeader4 {
    min-width: 100%;
    margin-top: 2DVH;
    display: flex;
    flex: 1 1 0px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5DVH;
}

.topHeader5 {
    min-width: 100%;
    padding-top: 10DVH;
    display: flex;
    flex: 1 1 0px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 10px;
}

.stepDiv {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-feature-settings: normal;
    font-kerning: auto;
    font-optical-sizing: auto;
    font-size-adjust: none;
    font-stretch: 100%;
    font-family: sans-serif;
    font-weight: 400;
    font-size: 1.5REM;
    color: #363636;
    text-transform: uppercase;
    padding-bottom: .5REM;
    margin: 0;
}

.topHeading {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-feature-settings: normal;
    font-kerning: auto;
    font-optical-sizing: auto;
    font-size-adjust: none;
    font-stretch: 100%;
    font-style: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-variation-settings: normal;
    font-weight: 400;
    font-size: 2REM;
    margin: 0;
}

.headingText {
    width: 1000px;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: .5REM;
    font-weight: 400;
    font-size: 1.5REM;
    color: #363636;
    text-transform: uppercase;
}


.stepDivContact {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-feature-settings: normal;
    font-kerning: auto;
    font-optical-sizing: auto;
    font-size-adjust: none;
    font-stretch: 100%;
    font-family: sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #363636;
    text-transform: uppercase;
    padding-bottom: 20px;
    margin: 0;
}

.topHeadingContact {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-feature-settings: normal;
    font-kerning: auto;
    font-optical-sizing: auto;
    font-size-adjust: none;
    font-stretch: 100%;
    font-style: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-variation-settings: normal;
    font-weight: 400;
    font-size: 26px;
    margin: 0;
}

.headingTextContact {
    width: 1000px;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 1REM 6REM 0.5REM 6REM;
    font-weight: 100;
    font-size: 16px;
    color: #363636;
    text-transform: uppercase;
}

.mainBody {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    min-width: 100%;
    max-height: 95%;
    padding: 0;
    margin: 0;
}

.metalPicker {
    font-family: sans-serif;
    text-transform: uppercase;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-feature-settings: normal;
    font-kerning: auto;
    font-optical-sizing: auto;
    font-size-adjust: none;
    font-stretch: 100%;
    font-style: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-variation-settings: normal;
    font-weight: 500;
    font-size: 15px;
    max-height: 80px;
}

.option1Picker {
    max-width: 1100px;
    width: 98%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0 0 50px 0;
}

.option1Button {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 44%;
    max-width: 330px;
    background-color: #efeeec;
    border: 1px solid #edd3cd;
    border-radius: 5px;
    padding: 20px;
    margin: 13px;
    height: 230px;
    max-height: 230px;
    min-height: 230px;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.option1Button:hover {
  transform: translateY(-2px);
  border-color: #1c1d1e;
}

.option1Style {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    font-feature-settings: normal;
    font-kerning: auto;
    font-optical-sizing: auto;
    font-size-adjust: none;
    font-stretch: 100%;
    font-style: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-variation-settings: normal;
    font-weight: 400;
    font-size: 22px;
    color: #363636;
}

.option1Text {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    font-feature-settings: normal;
    font-kerning: auto;
    font-optical-sizing: auto;
    font-size-adjust: none;
    font-stretch: 100%;
    font-style: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-variation-settings: normal;
    font-family: sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #363636;
}

.option2Picker {
    max-width: 1200px;
    width: 98%;
    max-height: 800px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.option2Button {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 44VW;
    max-width: 280px;
    background-color: #efeeec;
    border: 1px solid #edd3cd;
    border-radius: 5px !important;
    padding: 20px 5px 20px 5px;
    margin: 10px;
    height: 240px;
    max-height: 240px;
    min-height: 240px;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.option2Button:hover {
  transform: translateY(-2px);
  border-color: #1c1d1e;
}

.option2Style {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    font-feature-settings: normal;
    font-kerning: auto;
    font-optical-sizing: auto;
    font-size-adjust: none;
    font-stretch: 100%;
    font-style: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-variation-settings: normal;
    font-weight: 400;
    font-size: 22px;
    color: #363636;
}

.option2Text {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 10px;
    width: 100%;
    font-feature-settings: normal;
    font-kerning: auto;
    font-optical-sizing: auto;
    font-size-adjust: none;
    font-stretch: 100%;
    font-style: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-variation-settings: normal;
    font-family: sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #363636;
}

.toiEtMoiOption2Picker {
    position: relative;
    max-width: 1000px;
    width: 98%;
    max-height: 800px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

legend {
    position: absolute;
    top: -10px;
    left: 45px;
    font-family: sans-serif;
}

.toiEtMoiOption2ButtonLeft {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 44VW;
    max-width: 140px;
    background-color: #efeeec;
    border: 1px solid #edd3cd;
    border-radius: 5px !important;
    padding: 10px 5px 10px 5px;
    margin: 10px;
    height: 180px;
    max-height: 180px;
    min-height: 180px;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.toiEtMoiOption2ButtonLeft:hover {
  transform: translateY(-2px);
  border-color: #1c1d1e;
}

.toiEtMoiOption2ButtonRight {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 44VW;
    max-width: 140px;
    background-color: #efeeec;
    border: 1px solid #edd3cd;
    border-radius: 5px !important;
    padding: 10px 5px 10px 5px;
    margin: 10px;
    height: 180px;
    max-height: 180px;
    min-height: 180px;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.toiEtMoiOption2ButtonRight:hover {
  transform: translateY(-2px);
  border-color: #1c1d1e;
}

.toiEtMoiOption2Style {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    font-feature-settings: normal;
    font-kerning: auto;
    font-optical-sizing: auto;
    font-size-adjust: none;
    font-stretch: 100%;
    font-style: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-variation-settings: normal;
    font-weight: 400;
    font-size: 22px;
    color: #363636;
}

.toiEtMoiOption2Text {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 10px;
    width: 100%;
    font-feature-settings: normal;
    font-kerning: auto;
    font-optical-sizing: auto;
    font-size-adjust: none;
    font-stretch: 100%;
    font-style: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-variation-settings: normal;
    font-family: sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #363636;
}

.gemPickerRow {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.gemTypePicker {
    max-width: 80%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-wrap: nowrap;
    margin-bottom: 3DVH;
}

.gemContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    text-align: center;
    width: 140px;
    height: 70px;
}

.gemButton {
    border-radius: 50px;
    margin: 3px;
    font-feature-settings: normal;
    font-kerning: auto;
    font-optical-sizing: auto;
    font-size-adjust: none;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 400;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    border: 1px solid #edd3cd;
    height: 3REM;
    width: 3REM;
}

.endGemTypePicker .gemButton {
    width: 100%;
    height: 100%;
    max-width: 40px;
    max-height: 40px;
    aspect-ratio: 1/1;
}

.selectedGemType {
    background-color: #ffffff !important;
    color: #d4595c !important;
    border: solid 2px #d4595c !important;
}

.gemStylePicker {
    position: relative;
    width: 1080px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.gemStyleDiv {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background-color: #efeeec;
    border: 1px solid #edd3cd;
    border-radius: 5px !important;
    padding: 10px 10px 0 10px;
    margin: 10px;
    max-width: 250px;
    min-height: 150px;
    max-height: 150px;
    width: 44%;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.gemStyleDiv:hover {
  transform: translateY(-2px);
  border-color: #1c1d1e;
}

.gemStyle {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    font-feature-settings: normal;
    font-kerning: auto;
    font-optical-sizing: auto;
    font-size-adjust: none;
    font-stretch: 100%;
    font-style: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-variation-settings: normal;
    font-weight: 600;
    font-size: 18px;
    color: #363636;
}

.gemText {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 10px;
    text-wrap: wrap;
    width: 100%;
    font-feature-settings: normal;
    font-kerning: auto;
    font-optical-sizing: auto;
    font-size-adjust: none;
    font-stretch: 100%;
    font-style: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-variation-settings: normal;
    font-family: sans-serif;
    font-weight: 400;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mobileGemText {
    display: none;
    visibility: hidden;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-wrap: wrap;
    width: 100%;
    font-feature-settings: normal;
    font-kerning: auto;
    font-optical-sizing: auto;
    font-size-adjust: none;
    font-stretch: 100%;
    font-style: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-variation-settings: normal;
    font-family: sans-serif;
    font-weight: 400;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.gemSizePicker {
    max-width: 1040px;
    width: 98%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.gemSizeDiv {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 280px;
    width: 33%;
    border: 1px solid #CCCCCC;
    border-radius: 5px !important;
    padding: 20px;
    margin: 10px;
    height: 40px;
    box-sizing: content-box !important;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.gemSizeDiv:hover {
  transform: translateY(-2px);
  border-color: #1c1d1e;
}

.gemSize {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-feature-settings: normal;
    font-kerning: auto;
    font-optical-sizing: auto;
    font-size-adjust: none;
    font-stretch: 100%;
    font-style: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-variation-settings: normal;
    font-weight: 600;
    font-size: 18px;
}

.metalDiv {
    width: 130px;
    padding: 0 40px 10px 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    letter-spacing: 1px;
}

.metalButton {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    border: 1px solid #edd3cd;
}

.metalSample:hover {
  transform: scale(1.1);
}

.selectedMetal {
    border: 2px solid #d4595c;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
}

.yellowGold {
    background: linear-gradient(30deg, #e1b94f 0%, #faf1d8 55%, #faf1d8 60%, #e1b94f 100%) !important;
}

.whiteGold {
    background: linear-gradient(30deg, #b3b2af 0%, #f7f7f7 55%, #f7f7f7 60%, #b3b2af 100%) !important;
}

.roseGold {
    background: linear-gradient(30deg, #ec8a55 0%, #fcede2 55%, #fcede2 60%, #ec8a55 100%) !important;
}

.platinum {
    background: linear-gradient(30deg, #b3b2af 0%, #f7f7f7 55%, #f7f7f7 60%, #b3b2af 100%) !important;
}

.palladium {
    background: linear-gradient(30deg, #b3b2af 0%, #f7f7f7 55%, #f7f7f7 60%, #b3b2af 100%) !important;
}

.silver {
    background: linear-gradient(30deg, #b3b2af 0%, #f7f7f7 55%, #f7f7f7 60%, #b3b2af 100%) !important;
}


.timelineButton {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 280px;
    border: 1px solid #CCCCCC;
    border-radius: 5px !important;
    padding: 20px;
    margin: 10px;
    height: 40px;
    cursor: pointer;
    font-feature-settings: normal;
    font-kerning: auto;
    font-optical-sizing: auto;
    font-size-adjust: none;
    font-stretch: 100%;
    font-style: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-variation-settings: normal;
    font-weight: 600;
    font-size: 18px;
    box-sizing: content-box !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.timelineButton:hover {
  transform: translateY(-2px);
  border-color: #1c1d1e;
}

#mcanvas {
    display: block;
    flex: 1 1 0px;
    max-height: 100DVH !important;
    max-width: 100vw !important;
    height: 100DVH !important;
    overflow: hidden;
}

.hidden {
    display: none !important;
    visibility: none !important;
}

#floatingPanel {
    display: none;
    background-color: #f9f0ef;
    padding: 5px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    border-radius: 5px !important;
    border: 1px #000000;
    width: 320px;
    position: absolute;
    top: 3DVH;
    right: 3vw;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

#closeContactButton {
    display: none;
    color: rgb(255, 255, 255);
    cursor: pointer;
    height: 10px;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 10px;
    background: url("../imgs/close-icon.svg") 0% 0% / contain no-repeat;
}

#hideDesignButton {
    color: #000000;
    cursor: pointer;
    height: 19px;
    position: absolute;
    right: 15px;
    top: 15px;
    width: 19px;
    background: url("../imgs/close-icon.svg") 0% 0% / contain no-repeat;
    display: none;
    visibility: none;
}

#background {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.page1background {
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: background-image 1s ease-in-out;
    transition: background-image 1s ease-in-out;
    opacity: .1;
}

.page2background {
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: background-image 1s ease-in-out;
    transition: background-image 1s ease-in-out;
    opacity: .1;
}

.page3background {
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: background-image 1s ease-in-out;
    transition: background-image 1s ease-in-out;
    opacity: .1;
}

.page5background {
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: background-image 1s ease-in-out;
    transition: background-image 1s ease-in-out;
    opacity: .1;
}

#finishContactForm {
    border: 1px #000000;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 1050px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: rgba(240, 240, 240, 0.5);
    backdrop-filter: blur(4px);
    z-index: 550;
}

.modal {
    background-color: rgba(255, 255, 255, 0.001);
    max-width: 800px;
    max-height: 1050px;
    border-radius: 5px !important;
    padding: 1REM;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    min-height: 100%;
}

.title {
    width: 100%;
    font-weight: 600;
    font-size: 1VW;
    text-align: center;
    padding: 0px 20px 10px 20px;
}

.features-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 20px;
}

.features-header {
    width: 55%;
    font-weight: 600;
}

.featureContent {
    width: 50%;
}

.input-group {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 auto;
}

.float-label-group {
    width: 100%;
    max-width: 600px;
    min-width: 300px;
}

.dropdown-label-group {
    display: flex;
    flex-wrap: nowrap;
}

fieldset {
    border: 0;
    padding: 0;
}

.menuLabel {
    display: block;
    position: absolute;
    font-weight: 400;
    margin-bottom: 5px;
    font-family: sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    top: -10px;
    left: 0;
}

.contactLabel {
    display: block;
    position: relative;
    font-weight: 400;
    margin-bottom: 5px;
    font-family: sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    color: #D4585C;
}

.contactInput {
    border: 1px solid #D4585C;
    accent-color: #D4585C;
    outline: none;
    color: #000000;
}

.contactInput:focus {
    border: 1px solid #363636 !important;
    outline: none;
}

.contactText {
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-family: sans-serif;
}

.inputError {
    border: 3px solid #ff0000 !important;
}

input,
textarea {
    padding: 12px 0 12px 12px;
    border: 1px solid #ccc;
    border-radius: 5px !important;
    font-size: 16px;
    max-width: 586px;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    font-family: inherit;
    position: relative;
}

input::placeholder,
textarea::placeholder {
    color: #999;
}

textarea {
    resize: vertical;
    min-height: 100px;
}

.buttonGroup {
    padding: 0 0 0 10px;
    display: flex;
    justify-content: center;
}

.contactButton {
    cursor: pointer;
    border-radius: 5px !important;
    appearance: button;
    border: 0 solid #e5e7eb;
    box-sizing: border-box;
    color:  #FFFFFF;
    background-color: #d4595c;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(6px + .2DVH) calc(6px + .2DVW) calc(6px + .2DVH) calc(6px + .2DVW);
    font-size: calc(12px + .2DVW);
    text-align: center;
    text-transform: none;
    transition: all .1s cubic-bezier(.4, 0, .2, 1);
    user-select: none;
    touch-action: manipulation;
    text-transform: uppercase;
    margin: 5px;
}

.button-text {
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
}

.sendEmailButton:hover {
    background-color: #f3f4f6;
    box-shadow: -1px 2px 2px rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
                rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
                rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    transform: translateY(0.125rem);
}

.sendEmailButton:focus {
    border: solid #f8eedb !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
}

div.calendly-popup {
    max-width: 1200px !important;
}

.panelTitle {
    width: 100%;
    text-align: center;
}

#endHeadPicker {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    min-width: 100%;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s ease-in;
}

#endFeaturePicker {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    min-width: 100%;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s ease-in;
}

.endGemPicker {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    min-width: 100%;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s ease-in;
}

#endMetalPicker {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    min-width: 100%;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s ease-in;
}

.endGemTypePicker {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    min-width: 100%;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s ease-in;
}

.doubleStonePanel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    min-width: 100%;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s ease-in;
}

.endGemButton {
    font-size: 25px;
    color: #000000 !important;
    text-align: center;
}

.disabled {
    opacity: .3;
    filter: grayscale(100%);
}

.controlPanelSectionHeading {
    display: none;
    border: 0;
    border-radius: 5px;
    background-color: #FFFFFF;
    padding: 0px;
    margin: 5px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.floatingDisclaimer {
    position: absolute;
    bottom: 10px;
    left: 30px;
    font-size: 12px;
    width: 400px;
    color: #737373;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

#ringDetails {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2REM;
    max-width: 70DVW;
    color:  #737373;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    max-height: 20px;
}

.timeLineContainer {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.timelineRadio {
    width: 10px;
}

.select-wrapper {
  position: relative;
  display: inline-block;
  max-width: 300px;
  width: 43VW;
  margin-right: 15px;
}

.select-wrapper select {
  max-width: 265px;
  width: 43VW;
  padding: 12px 0px 12px 12px;
  border-radius: 5px !important;
  font-size: 16px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.select-wrapper option {
  background-color: #f9f9f9;
  color: #333;
}

.select-wrapper::after {
  content: '\25BC'; /* Unicode ▼ down arrow */
  font-size: 14px;
  color: #555;
  position: absolute;
  right: 45px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* clicks go to select, not arrow */
}

.timeLineContainer {
    display: block;
    width: 100%;
}

.time-select-wrapper {
  position: relative;
  display: inline-block;
  width: 102%;
}

.time-select-wrapper select {
  max-width: 720px;
  width: 98%;
  padding: 12px 0 12px 12px;
  padding-right: 35px;
  border-radius: 5px !important;
  font-size: 16px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.time-select-wrapper option {
  background-color: #f9f9f9;
  color: #333;
}

.time-select-wrapper::after {
  content: '\25BC'; /* Unicode ▼ down arrow */
  font-size: 14px;
  color: #555;
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* clicks go to select, not arrow */
}

#caratSize {
    max-width: 265px;
    width: 42VW;
}

.option1 {
    border-radius: 5px !important;
    margin: 10px;
    background-color: #efeeec;
    border: 1px solid #edd3cd;
}

.option2 {
    border-radius: 5px !important;
    margin: 10px;
    background-color: #efeeec;
    border: 1px solid #edd3cd;
}

.gemShape {
    border-radius: 5px !important;
    margin: 10px;
    background-color: #efeeec;
    border: 1px solid #edd3cd;
}

.menuImg {
    max-width: 140px;
    overflow: hidden;
    width: 100%;
    height: 100px;
}

#mobileConfigureButton {
    display: none;
    height: 45px;
    left: 3VW;
    bottom: 15px;
    width: 46VW;
    font-size: 3.5VW;
    font-weight: 700;
    border-radius: 5px;
    position: fixed;
    cursor: pointer;
    border-radius: 5px !important;
    appearance: button;
    border: 0 solid #e5e7eb;
    box-sizing: border-box;
    color:  #FFFFFF;
    background-color: #d4595c;
    align-items: center;
    justify-content: center;
    margin: 0;
    text-align: center;
    text-transform: none;
    transition: all .1s cubic-bezier(.4, 0, .2, 1);
    user-select: none;
    touch-action: manipulation;
    font-family: sans-serif !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
}

.shown {
    display: flex !important;
    visibility: visible !important;
    max-height: 800px !important;
}

.calendly-badge-widget {
    top: calc(100DVH - 60px);
    width: 46VW;
    max-width: 200px;
    right: 1VW !important;
    z-index: 200 !important;
}

.calendly-badge-content {
    width: 46VW !important;
    max-width: 200px;
    font-size: 1REM !important;
    font-family: sans-serif !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    background-color: #d4595c !important;
    border-radius: 5px !important;
    text-transform: capitalize;
    padding: 0 .5VW 0 .5VW !important;
}

.booking-kit_button_b8d5c902.booking-kit_button-bookable_80ba95eb {
    background-color: #FFFFFF !important;
    color: #d4595c !important;
}

.designButtons {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
}

#scheduleButton {
    width: 100%;
    font-family: sans-serif;
    text-transform: uppercase;
    padding-top: 0;
    padding-bottom: 0;
    height: 40px;
    font-weight: 100;
    margin: 5px;
}

#hideMobileControlPanel { 
    display: none;
    min-width: 46%;
    font-family: sans-serif;
    background-color: #FFFFFF;
    color: #D4585C;
    text-transform: uppercase;
    padding-top: 0;
    padding-bottom: 0;
    height: 40px;
    font-weight: 100;
    margin: 5px;
    border: 1px solid #D4585C;
}

#sharePageButton {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: calc(100DVH - 115px);
    right: 1DVW;
    width: 45px;
    height: 45px;
    background-color: #D4585C;
    color: #FFFFFF;
    border-radius: 5px;
    z-index: 200;
}

#shareHeader {
    font-size: calc(.2DVH + 6px);
    font-family: 'Libre Baskerville';
    text-transform: uppercase;
}

#sharePanel {
    display: none;
    visibility: hidden;
    position: fixed;
    justify-content: center;
    align-items: center;
    top: calc(100DVH - 360px);
    right: 1DVW;
    width: 90px;
    height: 150px;
    text-align: center;
    box-sizing: border-box;
    z-index: 520;
}

#shareDialog {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 80px;
    border: 1px solid #f8eedb;
    border-radius: 25px;
}

#contactHeader {
    font-size: calc(.2DVH + 6px);
    font-family: 'Libre Baskerville';
    text-transform: uppercase;
}

#contactDialog {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 80px;
    border: 1px solid #f8eedb;
    border-radius: 25px;
}

.copyDiv {
    display: flex;
    background-color: #D4585C;
}

#copyLink {
    display: flex;
    background-color: #D4585C;
    width: 45px;
    height: 45px;
    border-radius: 5px;
    margin-bottom: 5px;
}

.mobileCloseButton {
    width: 100%;
}

.controlPanelText {
    font-size: 1.2REM;
    padding: .6REM;
    font-family: 'Libre Baskerville';
    color: #363636;
}

.reviewHeader {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}

.reviewImageDiv {
    padding: .5VW;
}

.reviewImage {
    width: 40px;
    height: 40px;
}

.reviewMid {
    min-width: 50%;
    padding-left: .3VW;
    padding-top: .8VH;
}

.reviewName {
    font-weight: 600;
    font-size: 14px;
    font-family: sans-serif;
    padding-left: 2px;
}

.reviews {
    width: 800px;
}

.reviews-wrapper {
  overflow: hidden;
  width: 100%;
  max-width: 900px;
  margin: auto;
  position: relative;
}

.reviews-track {
  display: flex;
  transition: transform 0.8s ease-in-out;
  will-change: transform;
}

.reviewBox {
  flex: 0 0 100%;
  max-width: 380px;
  box-sizing: border-box;
  padding: 10px;
  border: solid 1px #d4595c !important;
  border-radius: 5px;
  margin: 10px;
}

.reviewText {
    font-family: sans-serif;
}

@media (min-width: 900px) {
  .reviewBox {
    flex: 0 0 50%; /* show two at a time */
  }
}

.reviewStars {
    display: flex;
    flex-wrap: nowrap;
}

.star {
    width: 20px;
    height: 20px;
    background-size: cover;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAWCAYAAAA1vze2AAAAqUlEQVR4AWLwySwkGv/YzgworgwwAIphGHqJXWgX6nl6q55o/GHxCX4bUx9hMK9JYwucFSmAubW2ZifED8Q7IXEgcmRqVNDsgBhBrAMSBJEiqwAGAaBRhiDvBk1A3mkRyb2CXSYLlmWFnbArffoMIrjS6qy3Sm/Z/068CPEbyKpKhfCDyA0yNE95MKtRGe9LiSz9O3hKclv6Y76ictQzqbmjyhIkyVi+8wCta5MKDP5AeAAAAABJRU5ErkJggg==);
}

.reviewLogoDiv {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 30%;
    padding-right: 2VW;

}

.reviewLogo {
    height: 25px;
    width: 25px;
}

.gemToolTip {
    display: none;
    position: absolute;
    top: 100px;
    left: 100px;
    border: #555 1px solid;
    z-index: 400;
    background-color: #FFFFFF;
    height: 150px;
    width: 300px;
    border-radius: 10px;
    flex-wrap: wrap;
    padding: 1REM;
    text-align: justify;
}

.endGemSelector {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 14%;
}

.endMetalSelector {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 60px;
}

.selectorText {
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: .8REM;
    padding-bottom: 8px;
}

.toolTipHeader {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 1.5REM;
}

.toolTipBody {
    width: 100%;
    font-size: 1REM;
    padding: 10px;
}

@media only screen and (max-width: 1250px) {
    #ringDetails {
        bottom: 80px;
        max-width: 85VW;
        width: 85VW;
        font-size: 1.8REM
    }
}

@media only screen and (max-width: 700px) {
    #ringDetails {
        bottom: 100px;
        max-width: 85VW;
        width: 85VW;
        font-size: 1.8REM
    }
}

@media only screen and (max-width: 600px) {
    #businessLogoDiv {
        position: absolute;
        top: 0;
        right: 1DVW;
        left: unset;
        transform: unset;
    }

    #businessLogo {
        width: 22VW;
        height: 13VW;
    }

    #sharePageButton {
        right: 3DVW;
    }

    #sharePanel {
        right: 3DVW;
    }

    .title {
        font-size: 5VW;
    }
    .backButton {
        font-size: 3.5VW;
        top: 10px;
        left: 10px;
        padding-left: 0px;
        padding-right: 6px;
    }
    .rotateRing {
        top: 50px;
        left: 10px;
    }
    #mcanvas {
        display: block;
        flex: 1 1 0px;
        max-height: 100DVH !important;
        max-width: 100vw !important;
        height: 100DVH !important;
        overflow: hidden;
    }

    .topHeader1 {
        padding-top: 0;
        margin-top: 2DVH;
    }

    .activePage {
        padding-bottom: 60px;
    }

    .metalDiv {
        width: 80px;
        padding: 0;
    }

    .metalText {
        font-size: 8px;
        margin-bottom: 2VW !important;
    }

    .gemTypePicker {
        max-width: 100%;
        margin-bottom: 0;
    }

    .gemContainer {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 14VW;
        height: 14VW;
    }

    .gemButton {
        max-width: 40px;
        max-height: 40px;
        width: 3REM;
        height: 3REM;
        padding: 0;
        margin: 1VW;
    }

    .gemText {
        display: none;
        visibility: hidden;
    }

    .mobileGemText {
        display: flex;
        visibility: visible;
    }

    .gemStyleDiv {
        padding: 0;
        margin: 5px;
        min-height: 140px;
    }

    .topHeader2 {
        padding-top: 0;
        margin-top: 2DVH;
    }

    .topHeader3 {
        padding-top: 0;
        margin-top: 2DVH;
    }

    .topHeading {
        text-align: center;
        font-size: 1.2REM;
    }

    .stepDiv {
        font-size: .8REM;
        padding-bottom: .5REM;
    }

    .headingText {
        text-align: center;
        margin: 10px 0 0 0;
        font-size: .8REM;
        padding: 0 20px 0 20px;
    }

    .option1Picker {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .option1Style {
        font-size: 1REM;
    }

    .option1Text {
        font-size: .9REM;
    }

    .option1Button {
        max-width: 48VW;
        margin: 1VW;
        padding: 3VW 0 3VW 0;
        min-height: 230px;
        max-height: 230px;
    }

    .option2Button {
        height: 220px;
        min-height: 230px;
        max-height: 230px;
        max-width: 48VW;
        margin: 1VW;
        padding: 3VW 0 3VW 0;
    }
    
    .option2Picker {
        max-height: 69.5DVH;
        padding-bottom: 50px;
        margin-bottom: -50px;
    }

    .option2Style {
        font-size: 1REM;
    }

    .option2Text {
        font-size: .9REM;
        padding: 0 2VW 0 2VW;
        max-width: 90%;
    }

    .gemStylePicker {
        max-height: 61.5DVH;
        padding-bottom: 50px;
        margin-bottom: -50px;
    }

    .gemStyle {
        font-size: 1REM;
    }

    body {
        display: flex;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    #finalPage {
        overflow-x: hidden;
        height: 92DVH;
    }

    .features-header,
    .featureContent {
        width: 100%;
        text-align: center;
    }

    .input-group {
        width: 90%;
    }

    .float-label-group {
        min-width: auto;
    }

    #finishContactForm {
        max-height: 1200px;
        min-height: 100DVH;
        height: unset;
        margin-bottom: 50px;
    }

    .modal {
        min-height: 100DVH;
        max-height: 1200px;
        max-width: 100VW;
        padding: 0;
        border-radius: 0;
    }

    #message {
        padding: 0;
    }

    .calendly-badge-widget {
        z-index: 5 !important;
        right: 3VW !important;
    }

    #floatingPanel {
        display: none;
        visibility: hidden;
        top: 10px;
        width: 90VW;
        z-index: 501;
    }

    .stepDivContact {
        font-size: .8REM;
        padding-bottom: 10px;
    }

    .headingTextContact {
        font-size: .8REM;
        margin: 10px;
    }

    .topHeadingContact {
        font-size: 1.2REM;
    }

    .contactInput {
        width: 95%;
    }

    .timeLineItem {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    #message.contactInput {
        width: 98%;
    }

    #caratSize {
        width: 37VW;
    }

    .metalButton {
        margin: 1VW !important;
        height: 2REM;
        width: 2REM;
    }

    .time-select-wrapper {
        width: 100%;
    }

    .select-wrapper select { 
        padding-right: 2px;
    }

    .select-wrapper::after {
        right: 10px;
    }

    #hideMobileControlPanel {
        display: flex;
    }

    #mobileConfigureButton {
        display: flex;
        z-index: 60;
    }

    #hideDesignButton {
        display: unset;
        visibility: unset;
    }

    .floatingDisclaimer {
        top: calc(100DVH - 120px);
        left: 4VW;
        max-width: 80VW;
        z-index: 40;
        height: 3.5DVH;
        font-size: .95REM;
    }

    #ringDetails {
        top: 60px;
        max-width: 65VW;
        width: 65VW;
        font-size: 1.2REM
    }
    .calendly-badge-content {
        font-size: 3.5VW !important;
        width: 44VW;
    }

    .bottomFooterBecauseAppleIsFuckingDumb {
        min-width: 100%;
        min-height: 150px;
    }

    #scheduleButton {
        width: 46%;
    }

    .reviews {
        max-width: 90DVW;
    }

    .reviewLogo {
        height: 20px;
        width: 20px;
    }

    .reviewBox {
        max-width: 85DVW;
        margin: 10px 10px 10px 10px;
    }

    .reviewHeader {
        height: 40px;
    }

    .reviewImage {
        margin-bottom: 80px;
    }

    .reviewName {
        font-size: .8REM;
    }

    .reviewImage {
        width: 25px;
        height: 25px;
    }

    .reviewText {
        font-size: .8REM;
    }

    .star { 
        height: 10px !important;
        width: 10px !important;
    }

    .buttonGroup {
        padding-bottom: 80px;
    }
    .endGemSelector {
        width: 12%;
    }
}

@media only screen and (max-width: 400px) {
    .endGemTypePicker .gemButton {
            max-width: 30px;
            max-height: 30px;
            padding: 0;
            margin: 1VW;
    }
}