.design-your-own-section { width: 100%; position: relative; z-index: 1;}
.design-your-own-container { width: 100%; max-width: 1600px; display: block; margin: 0 auto; padding: 0 20px;}
.design-your-own-mobile-title { width: 100%; display: none; text-align: center;}
.design-your-own-mobile-title .dyo-mobile-subheading { font-family: "Nunito Sans", sans-serif; font-size: 18px; color: #000000; font-weight: 400; text-transform: uppercase; line-height: 1.2; margin: 0; padding: 0;}
.design-your-own-mobile-title .dyo-mobile-heading { font-family: "Nunito Sans", sans-serif; font-size: 30px; color: #000000; font-weight: 400; text-transform: uppercase; line-height: 1.2; margin: 0; padding: 0;}
.design-your-own-topbar { width: 100%; position: absolute; top: 0; left: 0; z-index: -1;}
.design-your-own-topbar .dyo-topbar-titlewrap { width: 100%; position: relative;}
.design-your-own-topbar .dyo-topbar-titlewrap .dyo-topbar-title { width: 100%; height: 150px; font-family: "Nunito Sans", sans-serif; font-size: 172px; color: rgba(243, 227, 213, 0.3); font-weight: 700; text-align: center; margin: 0; padding: 0;}
.design-your-own-topbar .dyo-topbar-bg { width: 100%; height: 240px; position: relative; background: #fbf8f3;}
.design-your-own-block { width: 100%; position: relative;}
.design-your-own-block .design-your-own-row { width: 100%; display: flex; flex-wrap: wrap;}
.design-your-own-block .design-your-own-row .design-your-own-col { width: 50%;}
.design-your-own-block .design-your-own-left { width: 100%; max-width: 520px; position: relative; z-index: 2; display: block; margin: 0 auto; padding: 70px 0 0 0;}
.design-your-own-block .dyo-left-text { width: 100%; display: block;}
.design-your-own-block .dyo-left-text .dyo-subheading { font-family: "Nunito Sans", sans-serif; font-size: 30px; color: #000000; font-weight: 400; text-transform: uppercase; line-height: 1.2; margin: 0; padding: 0;}
.design-your-own-block .dyo-left-text .dyo-heading { font-family: "Nunito Sans", sans-serif; font-size: 40px; color: #000000; font-weight: 400; text-transform: uppercase; line-height: 1.2; margin: 0; padding: 0;}
.design-your-own-block .dyo-left-text p { font-size: 18px; line-height: 1.5; margin: 24px 0 0 0; padding: 0;}
.design-your-own-block .dyo-left-btnbox { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 20px; margin: 50px 0 0 0;}
.design-your-own-block .dyo-left-btnbox .dyo-or { font-size: 18px; text-transform: uppercase; line-height: 1.5; margin: 0; padding: 0;}
.design-your-own-block .dyo-left-btnbox .dyo-button { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-family: "Roboto", Sans-serif; font-size: 16px; color: #000000; font-weight: 400; text-transform: uppercase; text-decoration: none; line-height: 1.2; background-color: transparent; border: 1px solid #000000; border-radius: 0; box-shadow: none; margin: 0; padding: 14px 20px;}
.design-your-own-block .dyo-left-btnbox .dyo-button:before { background: #fdc6c74d; content: ""; height: 100%; left: 0; position: absolute; top: 0; transition: all .3s; width: 0; z-index: -1;}
.design-your-own-block .dyo-left-btnbox .dyo-button:hover:before { width: 100%;}
.design-your-own-block .dyo-left-bottom { width: 100%; margin: 50px 0 0 0;}
.design-your-own-block .dyo-left-bottom p { font-size: 16px; line-height: 1.5; margin: 0; padding: 0;}
.design-your-own-block .dyo-left-bottom p a { color: #6A3985; text-decoration: underline;}
.design-your-own-block .design-your-own-right { width: 100%; position: relative; text-align: center;}
.design-your-own-block .dyo-right-inner { width: 1px; height: 100%; position: relative; display: inline-block;}
.design-your-own-block .ring-container { width: 1166px; height: 800px; position: relative; transform: translate(-50%) scale(0.9); transform-origin: top;}
.design-your-own-block .ring-container .ring { position: absolute; top: 174px; right: 0px; z-index: 1;}
.design-your-own-block .ring-container .ring img { width: 100%; vertical-align: middle;}
.design-your-own-block .ring-container .stonesprite { width: 318px; height: 266px; background-position: left top 0px; position: absolute; top: -24px; right: 426px; z-index: 1; will-change: background-position; transition: top .1s ease-out;}
.design-your-own-block .ring-container .prong { position: absolute; top: 338px; right: 470px; z-index: 2;}
.design-your-own-block .ring-container .prong img { width: 100%; vertical-align: middle;}


@media (min-width: 1440px) and (max-width:1500px) {

    .design-your-own-container { max-width: 1200px;}
    .design-your-own-topbar .dyo-topbar-titlewrap .dyo-topbar-title { height: 130px; font-size: 150px;}
    .design-your-own-block .ring-container { height: 750px;}

}

@media (min-width: 1200px) and (max-width:1439px) {

    .design-your-own-container { max-width: 100%;}
    .design-your-own-topbar .dyo-topbar-titlewrap .dyo-topbar-title { height: 110px; font-size: 130px;}
    .design-your-own-block .ring-container { height: 700px;}

}

@media (min-width: 992px) and (max-width:1199px) {

    .design-your-own-container { max-width: 100%;}
    .design-your-own-topbar .dyo-topbar-titlewrap .dyo-topbar-title { height: 88px; font-size: 100px;}
    .design-your-own-block .design-your-own-left { padding: 40px 0 0 0;}
    .design-your-own-block .dyo-left-btnbox { gap: 14px; margin: 36px 0 0 0;}
    .design-your-own-block .dyo-left-btnbox .dyo-or { font-size: 15px;}
    .design-your-own-block .dyo-left-btnbox .dyo-button { font-size: 15px;}
    .design-your-own-block .dyo-left-bottom { margin: 36px 0 0 0;}
    .design-your-own-block .ring-container { height: 650px; transform: translate(-50%) scale(0.7);}

}

@media (max-width:991px) {

    .design-your-own-container { max-width: 100%;}
    .design-your-own-mobile-title { display: block;}
    .design-your-own-topbar { display: none;}
    .design-your-own-block .design-your-own-row { flex-wrap: nowrap; flex-direction: column-reverse;}
    .design-your-own-block .design-your-own-row .design-your-own-col { width: 100%;}
    .design-your-own-block .design-your-own-left { max-width: 100%; text-align: center; top: 0 !important; padding: 0;}
    .design-your-own-block .dyo-left-text { display: none;}
    .design-your-own-block .dyo-left-btnbox { flex-direction: column; gap: 10px; margin: 30px 0 0 0;}
    .design-your-own-block .dyo-left-btnbox .dyo-or { font-size: 14px;}
    .design-your-own-block .dyo-left-btnbox .dyo-button { width: 100%; font-size: 16px;}
    .design-your-own-block .dyo-left-bottom { margin: 30px 0 0 0;}
    .design-your-own-block .design-your-own-right { transform: scale(0.45); transform-origin: top;}
    .design-your-own-block .ring-container { height: 310px; transform: translate(-50%) scale(0.9);}

}
