#step1-2-3box {
    overflow: hidden; /* Fixes the 1px blue line below the top nav. */
}

.step.last {
    background-image: none; /* Fixes the blue background, which is overlapping the new #redArrow & the right-side red/orange sliver. */
}

.step1 .stepText {
	width: 46%;
}

.step2 .stepText {
	width: 40%;
}

.step3 .stepText {
	width: 43%;
}

.step4 .stepText {
	width: 40%;
}

.step4 .stepText .portraitMode {
	margin-right: 10px;
}

/*.step5.active .stepText {
	padding: 0 5px 0 5px;
	min-width: 100px;
}*/

.stepFrequentFlyer {
	padding: 0px 5px 0 10px; /* Use padding-top: 40px if turning the invisible .stepNumber off, with display: none; */
}
@media only screen and (max-width: 600px) {
  #step1-2-3box .last.step a, #step1-2-3box .last.step span{font-size:11px}
}

@media only screen and (min-width: 1200px) and (max-width: 1455px) {
	.portraitMode .step.last .stepText {margin-top:0;}
}

/****/
#redArrow #middle,#redArrow .bookends,.step,.step1-2-3,.step1-2-3bg,#step1-2-3box{height:95px;}
.stepNumber { 
	margin-top: 13px;
}
.stepText .s2 {
	font-size: 19px
}
.stepText {
	margin: 35px 0 0 0;
}
.step5 .stepText,.step4 .stepText {
	margin: 30px 0 0 0;
}

.step1-2-3 { height: 100px; margin-top: -100px}

#redArrow .bookends.left{ background-position: 0 -35px !important;}
#redArrow .bookends.right{ background-position: -292px -25px !important;}
#redArrow #middle{ background-position: -369px -339px !important;}
.step.last .stepText{margin-top: 15px}
.step.last .stepText.stepFrequentFlyer .landscapeMode, .step.last .stepText .portraitMode {margin-top: 0px}
.step.last .portraitMode{margin-top: 10px}
@media only screen and (min-width: 900px) and (max-width: 1100px) {
	.step.step5 .stepText .portraitMode {margin-top: -15px}
	#redArrow #middle,#redArrow .bookends,.step,.step1-2-3,.step1-2-3bg,#step1-2-3box{height:95px;}
	.bookends.right{ background-position: -292px -28px !important;}
	#redArrow #middle{float:left;}
	.step1-2-3{margin-top:-95px}
	.stepNumber {
		width: 40px;
		height: 43px;
		margin: 20px 10px auto;
	}
	.stepText {
		margin: 25px 0 auto; 
		float: left;
		text-align: left;
	}
	.stepNumber, .stepText, .stepText *{float:left;text-align: left;}
	#redArrow #middle { width: 135px !important; background-position: -369px -342px !important;}
	#redArrow .left {background-position: 0 -33px !important;}
	/* .step3 #redArrow { margin-left: 414px  !important;} */
	/* .step4 #redArrow { margin-left: 535px !important;} */
	.step.active .stepNumber2, .stepNumber2.active{ margin-left: 20px;}
}

@media only screen and (max-width: 899px){
	.stepNumber{
		width: 40px;
		margin: 20px 5px;
	}
	.stepNumber, .stepText, .stepText *{ text-align: left;float:left}
	.stepText{margin:32px 0}
	.stepNumber.stepNumber0{display: none}
	.step1 .stepText span.s4{width: 50px;
		white-space: normal;}
	#redArrow #middle{ width:85px !important;}
}