.modal {
	width:60%;
	position:fixed;
	z-index:50;
	padding:40px;
	background-color:#ffffff;
	top:50%;
	right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	transform:translateY(-50%); /* Don't use translateX because IE10 adds odd vertical lines */
}

.modal h4 {
	font-weight:600;
	font-size:42px;
	padding-bottom:20px;
}

.modal .btn-close {
	position:absolute;
	z-index:50;
	right:20px;
	top:20px;
	
}

.modal .btn-close a {
	text-indent:-5000px;
	display:block;
	width:23px;
	height:23px;
	background:url(../images/modal--btn-close.png) no-repeat top left;
}

.modal .modal-body {
	text-align:center;
	color:#444444;
}

.modal .modal-body .btn-container {
	padding:30px 0;
}

.modal .modal-body .modal-form {
	width:80%;
	margin:0 auto;
	padding-top:30px;
}

.modal .modal-form.modal-form--verification label {
	font-size:22px;
}

.modal .modal-body .modal-form .row--field {
	text-align:left;
	padding-bottom:20px;
}

.modal .modal-body .modal-form .row--field--radiobuttons {
	
}

.modal .modal-body .modal-form input[type="password"],
.modal .modal-body .modal-form input[type="text"],
.modal .modal-body .modal-form input[type="password"],
.modal .modal-body .modal-form input[type="text"],
.modal .modal-body .modal-form input[type="tel"] {
	width:calc(100% - 22px);
}

.modal .btn-cancel {
	padding-left:33px;
	background:url(../images/modal--btn-cancel.png) no-repeat left center;
}

.modal .radiobutton label {
	font-size:24px;
}

.modal-tint {
	position:fixed;
	z-index:25;
	left:0;
	top:0;
	width:100%;
	height:100vh;
	background-color:rgba(0, 0, 0, .8);
}

.modal .modal-transactions {
	padding-top:30px;
}

.modal .modal-transactions .transaction {
	text-align:left;
	position:relative;
	padding:15px 0;
	border-top:1px solid #e6e6e6;
}

.modal .modal-transactions .transaction.no-border {
	border-top:none;
}

.modal .modal-transactions .transaction .name {
	font-size:26px;
}

.modal .modal-transactions .transaction .status {
	font-size:18px;
	color:#ed2528;
}

.modal.modal-add-amount .modal-body .modal-form input[type="text"] {
	width:calc(66% - 22px); 
}

.modal.modal-add-amount .modal-body .modal-form .row--field {
	text-align:center;
}

 @media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2),
(min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2),
(min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2), 
(min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3),
(max-width: 750px) {
	.modal .modal-form.modal-form--verification label {
		font-size:3.6vw;
	}
	
	.modal h4 {
		font-size:6.3vw;
	}
	
	.modal .radiobutton label {
		font-size:3.6vw;
	}
	
	.modal .modal-transactions .transaction .status {
		font-size:2.7vw;
	}
	
	.modal {
		width:84%;
		padding:6%;
	}
	
	.modal .modal-body .modal-form {
		width:90%;
	}
	
	.modal .btn-cancel {
		background-size:20%;
		padding-left:5%;
		min-height:23px;
		display:inline-block;
	}
	
	.modal .radiobutton label {
		padding-bottom:6px;
	}
	
	.modal .modal-transactions .transaction {
		padding-bottom:5%;
	}
	
	.modal .modal-transactions .transaction .name {
		font-size:4vw;
	}
	
	.modal .btn-close {
		right:3%;
		top:3%;
	}
	
	.modal .btn-close a {
		width:1em;
		height:1em;
		background-size:contain;
	}
	
	.modal .modal-body .btn-container {
		padding:4% 0;
	}
}
