#boat-tickets {
	position: relative;
	float: left;
	height: 115px;
	width: 225px;
	margin: 0 30px 30px 0;
	background: url(../img/tickets/boat-tickets.png) no-repeat 0 0;
}
.box p {
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	text-align: center;
}
	p.instructions, p.cardType {
		font-family: 'Lato', sans-serif;
		font-size: 15px;
		text-align: center;
	}
	.error p {
		color: red;
	}
.hider {
	overflow: hidden;
}
	.step.one:before {
		content: 'Cruise Selection';
	}
	.step.two:before {
		content: 'Ticket Quantities';
	}
	.step.three:before {
		content: 'Billing Info';
	}
	.step.four:before {
		content: 'Payment';
	}
	.step.five:before {
		content: 'Order Confirmation';
	}

	input[name="card_number"] {
		padding-left: 40px;
	}
		input[name="card_number"].valid {
			background: #fff url(../img/tickets/check-retina.png) no-repeat 10px 10px;
			background-size: 18px;
		}
		input[name="card_number"].invalid {
			background: #fff url(../img/tickets/x-retina.png) no-repeat 5px 10px;
			background-size: 24px;
		}
.eventType, .event {
	background: #fff;
	padding-top: 10px;
}
	.event .date {
		color: #fff;
		background: #1f60a3;
	}
#cardTypes {
	position: relative;
	display: block;
	width: 181px;
	height: 36px;
	margin: 0 auto 15px;
}
	#cardTypes .card {
		position: relative;
		display: inline-block;
		height: 36px;
		width: 57px;
		background: url(../img/tickets/credit-card-logos.png) no-repeat 0 0;
	}
		#cardTypes .card.visa {
			background-position-x: 0;
		}
		#cardTypes .card.mastercard {
			background-position-x: -57px;
		}
		#cardTypes .card.discover {
			background-position-x: -115px;
		}
		#cardTypes .card.amex {
			background-position-x: -173px;
		}
			#cardTypes.mastercard .card.visa,
			#cardTypes.discover .card.visa, 
			#cardTypes.amex .card.visa,
			#cardTypes.visa .card.mastercard,
			#cardTypes.discover .card.mastercard, 
			#cardTypes.amex .card.mastercard,
			#cardTypes.visa .card.discover,
			#cardTypes.mastercard .card.discover, 
			#cardTypes.amex .card.discover,
			#cardTypes.visa .card.amex,
			#cardTypes.mastercard .card.amex, 
			#cardTypes.discover .card.amex {
				background-position-y: -36px;
			}
.box.quantities, .box.totals {
	margin-bottom: 50px;
}
.totals .tablewrapper {
	position: relative;
	display: block;
	padding: 30px;
	
	font-family: 'Lato', sans-serif;
	font-size: 17px;
	line-height: 34px;
	color: #000;
	line-height: 18px;
	text-align: left;
	
	border: 4px solid #cbbe9a;
	-webkit-border-radius: 3px;
	border-radius: 13px;
		background: #dfd8c4;
}
	tr.disabled td {
		color: #ccc;
	}
	.totals table {
		position: relative;
		width: 100%;
		margin-bottom: 20px;
	}
	.totals th {
		text-align: left;
		padding-left: 0;
		padding-bottom: 7px;
		border: none;
		border-bottom: 2px solid #cbbe9a;
		margin-bottom: 8px;
		background: none;
	}
	.totals td {
		padding: 5px 0;
		border: none;
		border-bottom: 1px solid #cbbe9a;
		padding-bottom: 5px;
		background: none;
	}
	.totals .final td {
		font-size: 30px;
		padding-bottom: 25px;
	}
	


/*	Phone Layout	*/
@media only screen and (max-width: 639px) {
	
	#boat-tickets {
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
	.event .thumbnail, .event .description {
		display: none;
	}
	input[name="card_number"] {
		padding-left: 5px;
	}
		input[name="card_number"].valid,
		input[name="card_number"].invalid {
			background-position-x: 96%;
		}
	.totals .tablewrapper {
		padding: 10px;
		font-size: 13px;
		line-height: 17px;
	}
	.totals .final td {
		font-size: 20px;
	}
	
}
/* */


/*	Retina Global	*/
@media 
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-resolution: 192dpi) {
	
		#boat-tickets {
			background-image: url(../img/tickets/boat-tickets-retina.png);
			background-size: 225px;
		}
	
}
/* */