.modal {
    background-clip: border-box;
    background-color: transparent;
    border: 0px none transparent;
    border-radius: 6px;
    box-shadow: none;
    left: 45%;
    height: 0px;
    margin: -250px 0 0 -280px;
    overflow: visible;
    position: fixed;
    z-index: 1050;
}

/*--depend on width screen--*/
@media only screen and (max-width: 1680px) {
    .modal {
        left: 48%;
    }
}

@media only screen and (max-width: 1600px) {
    .modal {
        left: 48%;
    }
}


@media only screen and (max-width: 1440px) {
    .modal {
        left: 50%;
    }
}

@media only screen and (max-width: 1400px) {
    .modal {
        left: 53%;
    }
}

@media only screen and (max-width: 1366px) {
    .modal {
        left: 50%;
    }
}

@media only screen and (max-width: 1280px) {
    .modal {
        left: 50%;
    }
}

@media only screen and (max-width: 1152px) {
    .modal {
        left: 53%;
    }
}

@media only screen and (max-width: 1024px) {
    .modal {
        left: 53%;
    }
}

@media only screen and (max-width: 900px) {
    .modal {
        left: 58%;
    }
}

@media only screen and (max-width: 640px) {
    .modal {
        left: 69%;
    }
}
/*--end width screen--*/


/*--depend on height screen--*/
@media only screen and (max-height: 1050px) {
    .modal.fade.in {
        top: 50%;
    }
}

@media only screen and (max-height: 984px) {
    .modal.fade.in {
        top: 50%;
    }
}


@media only screen and (max-height: 900px) {
    .modal.fade.in {
        top: 55%;
    }
}

@media only screen and (max-height: 864px) {
    .modal.fade.in {
        top: 52%;
    }
}

@media only screen and (max-height: 800px) {
    .modal.fade.in {
        top: 57%;
    }
}

@media only screen and (max-height: 768px) {
    .modal.fade.in {
        top: 56%;
    }
}

@media only screen and (max-height: 720px) {
    .modal.fade.in {
        top: 60%;
    }
}
/*--end height screen--*/