/* responsive */
@media (max-width: 1440px) {
    .my-modal {
        max-width: 800px;
    }
    .login-bg {
        background: url(../img/login-bg.jpg) no-repeat;
        background-size: cover;
        background-position: 22%;
    }
}
@media (max-width: 1330px) {
    .flip-front, .flip-back {
        width: 200px;
        height: 200px;
    }
    .flip-card {
        background-color: transparent;
        width: 200px;
        height: 200px;
        perspective: 1000px;
        margin: auto;
    }
      
    .flip-inner {
        position: relative;
        width: 200px;
        height: 200px;
        transition: transform 0.6s;
        transform-style: preserve-3d;
    }
    .dashboard-box, .dashboard-box2{
        background: #DFF2FF;
        border-radius: 500px;
        height: 200px;
        width: 200px;
        margin: auto;
        padding: 0rem 0rem 0.5rem 0.5rem;
    }
}
@media (max-width: 1024px) {
    .my-modal {
        max-width: 800px;
    }
}
@media (max-width: 768px){
.my-modal {
    max-width: 700px;
    }
    .origin-dis {
        display: block;
    }
    .modal-pad {
        padding: 20px 36px 30px 26px;
    }
    .variation-box p {
        color: #202020;
        font-size: 14px;
        width: 30%;
    }
    .item-variation li {
        list-style: none;
        display: inline-block;
        width: 173px;
        height: auto;
        margin-left: 0px;
    }
    .log-mr {
        margin-right: 0%;
        margin-left: 26%;
    }
    .float-right {
        float: none;
    }
}