.modal {
    display: none;
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #00000085;

  }

.total {
    width: 420px;
    height: 377px;
	background:#fff;
    border: 5px solid rgba(43, 150, 191, 1);
	border-radius: 10px;
    position:absolute;
   top: 150px;
    left: calc(50% - 220px);
}
  .modal-content {
    background-color: #fefefe;
    /* margin: 15% auto; */
    /* padding: 20px; */
    border: 1px solid #888;
    /* width: 80%; */
  }
  /* Close button style */
  .close {
    color: #2B96BF;
    float: right;
    font-size: 20px;
    font-weight: bold;
	  width: 360px;
  }
  .close:hover,
  .close:focus {

    text-decoration: none;
    cursor: pointer;
	background: #2b96bf;
	  color: #FFF;
  }

@media screen and (max-width: 768px) {
	.total {
		width:80%;
		left: calc(50% - 40%);
	}
	.close {
		width:90%;
	}
}