.modal {
    display:          block;
    position:         fixed;
    z-index:          1;
    left:             0;
    top:              0;
    width:            100%;
    height:           100%;
    overflow:         auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
    background-color: #FEFEFE;
    margin:           15% auto;
    padding:          20px;
    border:           1px solid #888;
    width:            40%;
    /*max-width: 320px;*/
}
.close {
    color:       #AAA;
    float:       right;
    text-align: right;
    font-size:   28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color:           black;
    text-decoration: none;
    cursor:          pointer;
}

.close-btn-holder{max-width: 250px; margin: 0 auto; color: white; cursor: pointer;}

@media (max-width: 991px) {
    .modal-content .heading h2:before,.modal-content .heading h2:after{display: none}

}

@media (max-width: 767px) {

}

@media (max-width: 691px) {
    .modal-content .heading h2{font-size: 23px;}
}

@media (max-width: 550px) {
    .modal-content{width: 100%}

}