.modal { 
  position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color:rgba(0,0,0,0.2);
	overflow:auto;
	z-index:100;
	width:100vw;
	margin:0;
	padding:0;
	
	display: flex;
	flex-wrap:wrap;		 
	justify-content:center;
	align-items:center;
}

/* Modal Content/Box */
.modal-content {
	min-width:30%;
	max-width: 95%;
	background-color: #fff;
	border:none;

}

.modal-header,.modal-body,.modal-footer{
	margin:0;
	padding:0 2em;
}
.modal-header{
}
	.modal-title{
		margin:.3em 0;
		font-size:1.5em;
		border-bottom:1px solid #C0C0C0;
		color:#888;
	}
.modal-body{
}
.modal-footer{
	margin-bottom:.5em;
}
/* The Close Button */
.modal-content__close{
	display:flex;
	justify-content:flex-end;
}
.btn-close {
  color: red;
  font-size: 26px;
  /* font-weight: bold; */
  padding:0 .2em;
  border:0;
  background-color:transparent;
}
.btn-close:hover,
.btn-closeyvui:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
@media all and (max-width: 940px) {
	 .modal-content{
		min-width:50%;
	 }
}
@media all and (max-width: 800px) {
	.modal-content{
		min-width:75%;
	}
}
@media screen and (max-width: 600px) {
	.modal-content{
		width:98%;
	}
}