/*********************
PAYPAL MODAL
*********************/

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}

body {
	font-family: 'Asap', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 24px;
}

h1 {
	font-size: 1.25em;
	font-weight: 500;
	letter-spacing: -0.04em;
	text-align: center;
	color: #2d2d2d;
	margin: 0;
}

h1.break {
	padding-bottom: 24px;
}

a {
	color: #AF1E2D;
	text-decoration: none;
	transition: color 0.1s linear;
}

a:hover {
	text-decoration: underline;
}

.modal-body {
	padding: 0;
	width: 100%;
	height: 100%;
	display: none; /* hide until loaded in iframe */
}
.pre.voy {
	background: url('./img/ground-350-voy.gif') top right no-repeat;
}
.full.voy {
	background: url('./img/ground-full-350-voy.gif') top right no-repeat;
}
.pre.dev {
	background: url('./img/ground-350-dev.gif') top right no-repeat;
}
.full.dev {
	background: url('./img/ground-full-350-dev.gif') top right no-repeat;
}
/* always full background because there is no OLS trailer */
.pre.ols, .full.ols {
	background: url('./img/ground-350-ols.gif') top right no-repeat;
}

.post {
	background: url('./img/connector.gif') center no-repeat;
}

.modal-header, .modal-footer, .modal-trailer {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.modal-header {
	height: 185px;
}

.modal-footer, .modal-trailer {
	height: 143px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.modal-footer {
	height: 143px;
}

.modal-trailer {
	height: 38px;
}

.modal-header-left {
	width: calc(100% - 42px);
	height: 42px;
}
.modal-header-right {
	width: 42px;
	height: 42px;
}
.modal-header-text {
	width: 100%;
	height: 143px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.modal-header-text p {
	padding-bottom: 40px;
}
.break {
	display: block;
}
.nobreak {
	display: none;
}
.modal-button {
	position: relative;
	width: 100%;
	height: 80px;
}
.modal-button-paypal, .modal-button-card {
	position: absolute;
	margin: 0 auto;
	width: 270px;
	height: 36px;
	left: 50%;
	transform: translate(-50%, 0);
	cursor: pointer;
}
.modal-button-paypal {
	top: 0;
}
.modal-button-card {
	bottom: 0;
}
.modal-button-card span {
	color: white;
}
.modal-footer h1 {
	padding-top: 20px;
}

.modal-footer p {
	margin: 0;
	font-size: 0.75em;
	color: #585d63;
	font-weight: 500;
}

.modal-trailer p {
	font-size: 0.66em;
	padding-top: 5px;
}

/***************************************************
			 RESPONSIVE STYLING
***************************************************/

@media only screen and (min-width:406px) {
	h1 {
		font-size: 1.33em;
	}
}

@media only screen and (min-width: 540px) {
	.pre.dev {
		background: url('./img/ground-540-dev.gif') center no-repeat;
	}
	.full.dev {
		background: url('./img/ground-full-540-dev.gif') center no-repeat;
	}
	/* always full background because there is no OLS trailer */
	.pre.ols, .full.ols {
		background: url('./img/ground-540-ols.gif') top right no-repeat;
	}
	h1 {
		font-size: 1.625em;
	}
	.modal-header-text p {
		padding-bottom: 20px;
	}
	.break {
		display: none;
	}
	.nobreak {
		display: block;
	}
}

@media only screen and (min-width:600px) {
	.pre.voy {
		background: url('./img/ground-600-voy.gif') center no-repeat;
	}
	.full.voy {
		background: url('./img/ground-full-600-voy.gif') center no-repeat;
	}
	.pre.dev {
		background: url('./img/ground-600-dev.gif') center no-repeat;
	}
	.full.dev {
		background: url('./img/ground-full-600-dev.gif') center no-repeat;
	}
	/* always full background because there is no OLS trailer */
	.pre.ols, .full.ols {
		background: url('./img/ground-600-ols.gif') top right no-repeat;
	}

}