.ring_container {
    position: relative;
    width: 100%;
    height: calc(100% - 42.5px);
    display: inline-flex;
    align-items: center;
}

.ringdrop1 {
    display: inline-block;
    position: absolute;
    left: calc(1vw - 4px);
    outline: 2px outset white;
}

.ringdrop2 {
    display: inline-block;
    position: absolute;
    left: calc(1vw + 62.5px);
    outline: 2px outset white;
}

.ringdrop3 {
    display: inline-block;
    position: absolute;
    right: calc(1vw + 62.5px);
    outline: 2px outset white;
}

.ringdrop4 {
    display: inline-block;
    position: absolute;
    right: calc(1vw - 4px);
    outline: 2px outset white;
}

.ringbtn {
    background-color: #ffcb7b;
    width: 62.5px;
    height: 62.5px;
    border: none;
    cursor: pointer;
    background-image: url("../../images/rings/No Ring.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 75%;
}

.ringbtn:hover {background-color: darkgoldenrod;}

.ring-content {
    display: none;
    position: absolute;
    margin-top: 7.5px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    outline: 2px double #00008B;
    z-index: 1;
    background-color: #ffcb7b;
    overflow-y: scroll;
    min-height: 375px;
    height: 45.4vh;
}

.ring-content_div {
    position: relative;
    border-top: 1px solid white;
    border-bottom: 1px solid white;;
    cursor: pointer;
    width: 250px;
    height: 62.5px;
}

.ring-content_div:hover {background-color: #FFEBCD;}

.ringpic {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; /*position: absolute overrides display:block to start new line */
    left: 0%;
    width: 70px;
    height: 100%;
}

.ringpic img {
    width: 75%;
    height: 75%;
    object-fit: contain;
}

.noring {
    position: absolute;
    left: 70px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    font-size: 20px;
}

.ringtext1 {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0%;
    left: 70px;
    height: 50%;
}

.ringtext1 p {
    font-size: 20px;
    margin: 0;
}

.ringtext2 {
    display: flex;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 70px;
    height: 50%;
}

.ringtext2 p {
    font-size: 15px;
    margin: 0;
}

.show {display: block;}

.disable_click {pointer-events: none;}

.opacity {opacity: 0.5;}


@media (max-width: 1012.5px) {
    .ring_container {
        height: calc(100% - 30px);
    } .ringdrop1 {
        left: 4px;
    } .ringdrop2 {
        left: 53px;
    } .ringdrop3 {
        right: 53px;
    } .ringdrop4 {
        right: 4px;
    } .ringbtn {
        width: 45px;
        height: 45px;
    } .ring-content {
        min-height: 362px;
        height: 362px; 
        margin-top: 4px;
    } #ring1.ring-content {
        left: -94px;
    } #ring2.ring-content {
        left: -94px;
    } #ring3.ring-content {
        left: -120px;
    } #ring4.ring-content {
        right: -60%;
    } .ring-content_div {
        width: 200px;
        height: 50px;
    } .ringpic {
        width: 50px;
    } .noring {
        font-size: 18px;
        left: 50px;
    } .ringtext1, .ringtext2 {
        left: 50px;
    } .ringtext1 p {
        font-size: 18px;
    }
}