.modal-right {
position:absolute;
top:0px;
right:0px;
bottom:0px;
width:33%;
min-width:300px;
min-height:100%;
border-radius: 0px;
margin:0px;
animation: fadeInRight .3s;
}

.modal-left {
position:absolute;
top:0px;
left:0px;
bottom:0px;
width:33%;
min-width:300px;
min-height:100%;
border-radius: 0px;
margin:0px;
animation: fadeInLeft .3s;
}

.modal-right .modal-content, .modal-left .modal-content { min-height:100%; border-radius: 0px; }
.modal-right .modal-content .modal-body { direction: rtl; }


.modal-top {
position:absolute;
top:0px;
right:0px;
left:0px;
min-width:100%;
min-height:300px;
padding:25px 50px;
animation: fadeInDown .3s;
box-sizing: border-box;
}

.modal-bottom {
position:absolute;
bottom:0px;
right:0px;
left:0px;
min-width:100%;
min-height:300px;
padding:10px 25px;
animation: fadeInUp .3s;
box-sizing: border-box;
}

.modal-right .modal-content .modal-header, .modal-left .modal-content .modal-header { border-radius: 0px }
.modal-right .modal-content .modal-body, .modal-left .modal-content .modal-body { direction:ltr; }
.modal-right .modal-content .modal-footer, .modal-left .modal-content .modal-footer { border-radius: 0px }