@media only screen and (max-width: 800px){
    .nav-ribbon > .menu-icon {
        display: block;
    }
    .nav-ribbon > .nav-item{
        display: none;
        background-color: rgb(31, 31, 31);
        position: absolute;
        padding: 1rem 2rem 1rem 0;
        right: 0px;
        top: 40px;
        z-index: 1;
    }
    .nav-item>ul {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }
    
    .nav-item>ul>li {
        padding: 0px 10px;
        border-radius: 10px;
    }
    .top-bar>.top-bar-item {
        margin-right: 1rem;
    }
}

@media screen and (max-width: 767px){
    .content-container .iframe{
        margin-top: 0px;
    }
    .frame-price{
        margin: auto;
    }
    .detail-table{
        margin-top: 5rem;
    }
    .detail-page-container-lower > .diamond-image > img{
        width: 60vw;
    }
}

@media only screen and (max-width: 500px){
    .thIn1{
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .towIn1{
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .select{
        grid-template-columns: repeat(5, 1fr) !important;
    }
    .enter>input{
        width: 50% !important;
        margin-bottom: 5px;
    }
    .towIn1>.comp8>.enter>input{
        width: 50% !important;
        margin-bottom: 5px;
    }
    .towIn1>.comp9>.enter>input{
        width: 50% !important;
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 375px){
    .col1{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .container{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media only screen and (max-width: 480px){
    .top-bar>.top-bar-item > span {
        display: none;
    }
    .nav-ribbon{
        padding-left: 1rem;
    }
    .nav-ribbon > .logo > img{
        left: .45rem;
    }
}