

	.ns-nonstop-header {
		position: relative;
		padding: 12rem 0 5rem;
		// background-color: $ns-middlegray;
		text-align: center;
		padding: 4rem 0 3rem;

		@media(min-width: 576px) {
			padding: 4rem 0 7rem;
		}

		h1 {
			font-size: 2.4rem;
			font-family: $futura-bold;
			margin: 0 auto;
			margin-bottom: 1.5rem;
			width: 100%;
			max-width: 810px;

			img {
				width: 3.4rem;
			}

			.ns-icon {
				width: 2.2rem;
				top: -3px;

				@media(min-width: 576px) {
					top: -4px;
					width: 3rem;
					margin: 0 0.8rem;
				}
			}

			@media(min-width: 420px) {
				font-size: 2.8rem;
			}

			@media(min-width: 576px) {
				font-size: 3.2rem;
				margin-bottom: 1.5rem;
			}

			@media(min-width: 768px) {
				font-size: 38px;
			}
		}

		.ns-sub-heading {
			font-family: $futura-book;
			font-size: 19px;
			display: block;
			margin: 0 auto;
			line-height: 1.2;
			max-width: 750px;
			
			.ns-icon {
				width: 1.8rem;
				top: -1px;

				@media(min-width: 576px) {
					top: -1px;
					width: 2.2rem;
					margin: 0 0.4rem;
				}
			}
			@media(min-width: 576px) {
				font-size: 22px;
			}
			@media(min-width: 768px) {
				font-size: 30px;
			}
		}

		&__int {
			font-size: 2.4rem;
			font-family: $primary-font;
			margin-bottom: 10px;
			width: 100%;

			@media(min-width: 576px) {
				font-size: 3rem;
			}

			@media(min-width: 768px) {
				font-size: 3rem;
			}
		}

		&__sub {
			font-size: 2rem;
			font-family: $futura-book;
			margin: auto;
			margin-bottom: 2rem;

			@media(min-width: 576px) {
				font-size: 2.4rem;
			}

			@media(min-width: 992px) {
				font-size: 3rem;
			}

			@media(min-width: 768px) {
				font-size: 2.5rem;
			}

			span {
				color: $ns-yellow;
			}

			.ns-icon {
				width: 1.6rem;

				@media(min-width: 576px) {
					width: 2rem;
				}
			}
		}


		.nonstop-history-header-cta {
			position: relative;
			max-width: 38rem;
			background: $ns-yellow;
			border-radius: 5rem;
			margin: auto;
			margin-top: 4rem;

			.ns-wrap {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 1rem 1rem 1rem 3.5rem;

				@media(min-width: 992px) {
					max-width: 45rem;
					top: 3rem;
					border-radius: 10rem;
					margin: auto;
				}
			}

			.ns-col {
				color: #000;
				text-align: left;

				.ns-heading {
					font-family: $futura-bold;
					font-size: 2.1rem;
					line-height: 1;
				}

				.ns-text {
					display: block;
					line-height: 1;
				}
			}
		}
		.ns-btn-learn-more{
			color: #111;
			background: $ns-yellow;
			border-radius:70px;
			font-family: $futura-bold;
			text-transform: uppercase;
			border: none;
			   .ns-icon-md {
					margin-top: -3px;
			   }
		}
	}

	.nonstop-history__container {
		padding: 5rem 0 6rem 0;
		margin: auto;
		overflow: hidden;
		position: relative;

		@media(min-width: 992px) {
			padding: 8.5rem 0;
		}
	}

	.nonstop-history__container::before {
		content: '';
		position: absolute;
		top: 105px;
		left: 2.3rem;
		height: 92%;
		width: 0;
		border-right: 3px dashed #474747;
		z-index: 1;

		@media(min-width: 992px) {
			top: 105px;
			left: 50%;
			margin-left: -0.2rem;
			height: 100%;
		}
	}

	.ns-tab-nav {
		position: relative;
		display: block;
		width: 100%;
		text-align: left;
		background-color: #242424;
		margin: 0 auto;
		padding: 0 5px;
		border-bottom: 1px solid #333333;
		@media(min-width: 576px) {
			background-color: #0E0E0E;
			text-align: center;
		}

		li {
			display: inline-block;
			list-style-type: none;
			padding: 1.2rem 1rem;

			@media(min-width: 576px) {
				border-right: 1px solid #333333;
				padding: 1.2rem 2rem;
			}

			text-align: center;
		

			&:first-child {
				position: relative;
				@media(min-width: 576px) {
				&:after {
					content: '';
					background: rgb(207, 207, 207);
					background: linear-gradient(180deg, rgba(207, 207, 207, 0) 0%, rgba(77, 75, 75, 0.57) 100%);
					width: 1px;
					height: 100%;
					position: absolute;
					right: 0;
					top: 0;
				}
			}

				.ns-icon {
					height: 1.7rem;
					width: 1.7rem;
					display: none;
						@media(min-width: 576px) {
							display: inline;
						}
				}
			}

			&:last-child {
				border: none;
			}

			&.current {
				position: relative;
				a {
					border-bottom: 2px solid $ns-yellow;
					z-index: 3;
					position: relative;

					@media(min-width: 576px) {
						color: $ns-yellow;
					}

					.ns-icon {
						margin-left: 0;

						@media(min-width: 576px) {
							margin-left: 0.5rem;
						}
					}

					&:hover {
						color: $ns-yellow;
					}
				}
				
				&:after {
					content: '';
					width: 100%;
					background-color: #171717;
					height: 90%;
					left: 0;
					bottom: 0;
					position: absolute;
					@media(min-width: 576px) {
						display: none;
					}
				}
			}

			a {
				font-size: 1.2rem;
				font-family: $futura-bold;
				color: #FFF;
				text-transform: uppercase;
				letter-spacing: 1px;

				@media(min-width: 320px) {
					font-size: 1.4rem;
				}

				@media(min-width: 576px) {
					font-size: 1.6rem;
					line-height: 2;
					letter-spacing: 1.9px;
				}
				
				@media(min-width: 768px) {
					font-size: 2rem;
				}

				&:hover {
					color: #ccc;
				}
			}

			.ns-icon {
				top: -2px;
			}
		}
	}


	.ns-tab-nav-mobile {
		display: none;

		@media(max-width: 768px) {
			display: block;
		}
	}

	.ns-tab-nav-desktop {
		display: none;

		@media(min-width: 769px) {
			display: block;
		}
	}	


	.nonstop-history-header-points {


		p {
			font-family: $futura-heavy;
			font-size: 1.4rem;
			margin-bottom: 0;
			line-height: 0;
			letter-spacing: .1rem;
			display: inline-block;
			width: 100%;

			.ns-icon {
				height: 1.6rem;
				width: 1.6rem;
				margin-left: 0;

				@media(min-width: 576px) {
					height: 2rem;
					width: 2rem;
					margin-left: .5rem;
				}
			}


			@media(min-width: 375px) {
				font-size: 1.7rem;
			}

			@media(min-width: 425px) {
				font-size: 1.9rem;
			}

			@media(min-width: 576px) {
				font-size: 2.6rem;
				display: inline-block;
			}

			@media(min-width: 768px) {
				width: auto;
			}
		}

		.ns-row > [class*=ns-col-]:first-child {
			position: relative;
			
			&:after {
				content: '';
				border-right: 1px solid #656565;
				position: absolute;
   			    right: 0;
			    height: 100%;
			    top: 0;

				@media(min-width: 425px) {
					padding-right: 2rem;
				}
		}
	}
		span {
			line-height: 1;
			display: inline-block;
			width: 100%;

			@media(min-width: 768px) {
				width: auto;
				display: inline;
			}

			&:last-child {
				margin-top: .5rem;
			}
		}
	}


.nonstop-history__block {
	position: relative;
	margin: 3rem 0 4.5rem 0;

	p span {
		color: $ns-yellow;
	}

	&.nsfirst {

		.nonstop-history__img {
			top: 0.5rem;
			left: 0;
			width: 5rem;
			height: 5rem;

			&:after {
				width: 4.6rem;
				height: 4.6rem;
			}

			span {
				font-size: 2rem;

				@media(min-width: 992px) {
					font-size: 4.8rem;
				}
			}

			@media(min-width: 992px) {
				display: flex;
				justify-content: center;
				left: 50%;
				margin-left: -40px;
				width: 8rem;
				height: 8rem;
				background: $ns-yellow;

				&:after {
					width: 7.6rem;
					height: 7.6rem;
				}
			}

		}
	}

	@media(min-width: 992px) {
		margin: 10rem 0;
	}
}

.nonstop-history__block:after {
	content: "";
	display: table;
	clear: both;
}

.nonstop-history__block:first-child {
	margin-top: 0;
}

.nonstop-history__block:last-child {
	margin-bottom: 0;
}

.nonstop-history__img {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 15px;
	left: 0;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	background: $ns-yellow;
	z-index: 1;

	&:after {
		position: absolute;
		content: '';
		display: block;
		width: 4.6rem;
		height: 4.6rem;
		border-radius: 50%;
		border: 0.2rem solid #000;
		top: 0.2rem;
		left: 0.2rem;

		@media(min-width: 992px) {
			padding: 2.7rem;
		}
	}


	&.ns-no-border {
		background: transparent !important; //todo
		border-radius: 0;
		&:after {
		border: 0;
		}
	}


	span {
		display: block;
		font-family: $futura-bold;
		font-size: 2rem;
		color: #000;
		letter-spacing: -.05rem;

		@media(min-width: 992px) {
			font-size: 4.9rem;
			letter-spacing: -0.1rem;
		}

	}

	.digit-1,
	.digit-2 {
		font-size: 2rem;

		@media(min-width: 992px) {
			font-size: 4.9rem;
		}
	}

	.digit-3 {
		font-size: 1.8rem;

		@media(min-width: 992px) {
			font-size: 4rem;
		}
	}

	.digit-4 {
		font-size: 1.2rem;

		@media(min-width: 992px) {
			font-size: 2.7rem;
		}
	}
}


@media only screen and (min-width: 992px) {
	.nonstop-history__img {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 10rem;
		height: 10rem;
		left: 50%;
		margin-left: -5rem;
		top: 1.4rem;
		z-index: 1;

		&:after {
			width: 9.6rem;
			height: 9.6rem;
		}
	}
}

.nonstop-history__content {
	position: relative;
	z-index: 1;
	margin-left: 7rem;
	background: #000;
	padding: 1em;
	border-top-right-radius: 2rem;
	border-bottom-right-radius: 2rem;
	text-align: left;


	@media(min-width: 992px) {
		text-align: inherit;
		border-top-left-radius: 2rem;
		border-bottom-left-radius: 2rem;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		margin-left: 0;
		padding: 2.5rem 3rem 2.5rem 3rem;
		width: 45%;

		//IE 10+ hack 
		@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
			opacity: 1;
		}
	}

	&:after {
		content: "";
		display: table;
		clear: both;
	}

	&:before {
		content: '';
		position: absolute;
		top: 3rem;
		right: 100%;
		height: 0;
		width: 0;
		border: 0.9rem solid transparent;
		border-right: 13px solid #000;

		@media(min-width: 992px) {
			top: 1.6rem;
			border: 1.4rem solid transparent;
			border-right-width: 2rem;
			border-right: 2.2rem solid #000;
		}

	}

	@media(max-width: 992px) {
	&.ns-history-yellow:before {
		border-right: 13px solid $ns-yellow;
	} 
}


	h3 {
		line-height: 1.2;
		margin-bottom: .75rem;
		margin-top: 0;

		@media(min-width: 992px) {
			font-size: 2.2rem;
		}
	}

	p {
		font-family: $futura-book;
		margin-bottom: 0.5rem;

		img {
			display: inline-block;
		}

		@media(min-width: 992px) {
			font-family: $futura-book;
			font-size: 1.8rem;
			letter-spacing: 0.3px;
			margin: 0;
		}
	}

	&--button {
		position: absolute;
		top: 0px;
		left: 0px;
		border-right: 1px solid #3e3e3e;
		border-bottom: 1px solid #3e3e3e;
		content: '';
		// TODO - Nonstop Home
		// background: url('../img/icons/plus.svg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: 1.6rem;
		width: 1.6rem;
		height: 1.6rem;
		padding: 2rem;
		display: none;

		@media(min-width: 992px) {
			display: block;
		}
	}

	&--date {
		font-size: 1.2rem !important;
		font-family: $futura-book;
		left: 1.5rem;
		top: -2.5rem;
		position: absolute;
		text-transform: uppercase;
		color: rgb(145, 145, 145);

		@media(min-width: 992px) {
			position: absolute;
			top: -3rem;
			left: 0;
			right: auto;
			float: none;
		}
	}

	.ns-icon-points {
		max-width: 13px;
		margin-right: .3rem;
		margin-top: -0.5rem;

		@media(min-width: 992px) {
			max-width: 15px;
		}
	}

	&.ns-history-yellow {
		background: $ns-yellow;
		color: #000;
	}
}


.nonstop-history__bg { 
	display: none;
}

@media only screen and (min-width: 992px) {

	.nonstop-history__content::before {
		top: 5rem;
		left: 100%;
		border-color: transparent;
		border-left-color: #000;
		border-left-width: 2.4rem;
	}

	.nonstop-history__content.ns-history-yellow::before {
		border-left-color: $ns-yellow;
	}

	.nonstop-history__block:nth-child(even) {
		text-align: right;

		.nonstop-history__content {
			border-top-left-radius: 3rem;
			border-bottom-left-radius: 3rem;
			max-width: 30rem;
			margin-left: 7%;

			@media(min-width: 1200px) {
				margin-left: 14%;
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
			}

			p span {
				color: $ns-yellow;
			}
		}

		.nonstop-history__content--date {
			font-family: $futura-book;
			left: auto;
			right: 0;
		}

		.nonstop-history__bg {
			position: absolute;
			top: -85px;
			left: -70px;
			display: block;

			img {
				max-width: 560px;
			}
		}
	}

	.nonstop-history__block:nth-child(odd) {

		.nonstop-history__bg {
			position: absolute;
			top: -8rem;
			right: -7rem;
			display: block;

			img {
				max-width: 560px;
			}
		}
	}

	.nonstop-history__block:nth-child(odd) .nonstop-history__content {
		float: right;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-top-right-radius: 2rem;
		border-bottom-right-radius: 2rem;
		max-width: 30rem;
		margin-right: 7%;

		@media(min-width: 1200px) {
			margin-right: 14%;
		}

		&--button {
			position: absolute;
			top: 0px;
			left: auto;
			right: 0px;
			border-right: none;
			border-left: 1px solid #3e3e3e;
			border-bottom: 1px solid #3e3e3e;
			// content: '';
			// // TODO - Nonstop Home
			// // background: url('../img/icons/plus.svg');
			// background-repeat: no-repeat;
			// background-position: center;
			// background-size: 1.6rem;
			// width: 1.6rem;
			// height: 1.6rem;
			// padding: 2rem;

			img {
				top: calc(50% - 8px);
				left: calc(50% - 8px);
				max-width: 1.6rem;
				position: absolute;
			}
		}

		p span {
			color: $ns-yellow;
		}
		&.ns-history-yellow::before {
			border-right-color: $ns-yellow;
		}
	}

	.nonstop-history__block:nth-child(even) .nonstop-history__content {
		&--button {
			img {
				top: calc(50% - 8px);
				left: calc(50% - 8px);
				max-width: 1.6rem;
				position: absolute;
			}
		}
	}

	.nonstop-history__block:nth-child(odd) .nonstop-history__content::before {
		top: 5.2rem;
		left: auto;
		right: 100%;
		border-color: transparent;
		border-right-color: #000;
		border-right-width: 2.4rem;
	}
}

.animated.delay-225ms {
	-webkit-animation-delay: 0.225s;
	animation-delay: 0.225s;
}

.nonstop-home-container {
	background-color: #171717;
}

.ns-history-fullwidth {
	background: #272727;
	padding-top: 3rem;

	@media(min-width: 768px) {
		padding-top: 4rem;
	}
}


.nonstop-home-hero {
	background-image: url('../images/home-header-background.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}

// .ns-spending-points .ns-points-breakdown {
// 	border: 4px solid $white;
// 	border-radius: 20px;
// 	margin-top: 4rem;
//     margin-bottom: 9rem;
// 	padding: 3.5rem 2rem;
// 	position: relative;
// 		.ns-points-heading {
// 			position: absolute;
// 			top: -22px;
// 			background: #171717;
// 			margin: 0 auto;
// 			text-align: center;
// 			left: calc(50% - 110px);
// 			font-size: 2.5rem;
// 			font-family: $futura-bold;
// 			text-transform: uppercase;
// 			padding: 0 2rem;
// 			letter-spacing: .3rem;
// 		}
// 		.ns-cost-detail {
// 			display: inline-block;
// 			text-align: center;
// 			width: 33.333%;

// 		}
// 		img {
// 			height: 3rem;
// 			margin: 0;
// 			margin-top: -6px;
// 			margin-right: .65rem;
// 		}
// 		span {
// 			display: block;
// 			font-size: 3rem;
// 			font-family: $futura-book;
// 			line-height: 1.3;
// 			* {
// 				display: inline-block;
// 			}
// 		}
// }
.nonstop-history {
	padding-bottom: 4rem;
	@media(min-width: 576px) {
		padding-bottom: 10rem;
	}
}
.ns-history-fullwidth {
	@media(min-height: 1200px) {
		min-height: 768px;
}
}