.modal {
    display:none;
    position:fixed;
    z-index:11;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color: rgb(26.7,5.1,6.3);
    background-color:rgb(26.7,5.1,6.3,0.8);
    opacity: 1;
    animation-name: modalFadeIn;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.5s;
}

.modal_container {
    background-color:#440d10;
    color:#fff;
    margin:30px auto;
    border-radius: 7px;
    box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
    width:50%;
    height:275px;
    border: 2px solid #fff;
    padding-right:7px;
    padding-left:7px;
    z-index:12;

}

@keyframes modalFadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.modal_content {
    width: 100%;
    text-align:center;

}

.modal_content h1 {
    line-height: 36px;
    margin-bottom:0px;
    margin-top:10px;
}

.modal_content .logo_white {
    width:350px;
}

.phone_btn {
    display:none;
}

.close {
    color:#fff;
    float:right;
    font-size:24px;
    font-weight:bold;
}

.close:hover,
.close:focus {
    color:black;
    text-decoration:none;
    cursor: pointer;
}





@media screen and (max-width: 800px) {

    .modal_container {
        margin:90px auto;
        width:80%;
        height:450px;
        border: 3px solid #fff;
        padding-right:12px;
        padding-left:12px;
    }
    .modal_content .logo_white {
        width:275px;
    }

    .close {
        font-size:35px;
    }
    .phone_btn {
        display:block;
        width:100%;
    }
    .phone_btn a {
        
        display: inline-block;
        background-color: #fff;
        text-decoration: none;
        padding: 14px 16px;
        text-align: center;
        color:#440d10;
        font-size:30px;
        border-radius: 7px;
        box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
    }

    .phone_btn a:hover {
        background-color:#ccc;
        color:#440d10;
        
    }

}