@import url('../../common/css/common.css');

/********** GLOBAL STYLES **********/
body {
	color:#737373;
}

/********** HEADER STYLES **********/
header {
	width:100%;
	position:fixed; top:0; left:0;
	border-bottom:#005b7f solid 1px;
	background:white;
	z-index:200;
}

header .siteWidth {
	padding:15px;
	overflow:hidden;
}

#headerContainer,
nav {
	float:right;
}

#headerLogin {
	position:relative;
	padding-bottom:55px;
}

.sign-in {
	float:right;
}

.sign-in a {
	padding-left:15px;
	background:url('../images/iconLogin.png') no-repeat left center;
}

.register {
	position:absolute; bottom:-15px; right:0;
}

nav {
	padding-top:45px;
}

nav ul {
	padding-left:0;
	list-style:none;
}

nav a {
	display:block;
}

/********** BANNER STYLES **********/
#banner:before {
	height:auto;
	margin-top:0;
}

#banner {
	position:relative;
	margin-top:106px;
	padding-top:0;
	z-index:100;
}

#banner img {
	width:100%;
	position:relative;
	z-index:10;
}

#bannerCaption {
	width:100%;
	height:100%;
	position:absolute; top:0; left:0;
	z-index:200;
	text-shadow:1px 1px 3px #3e2d1c;
}

#bannerCaption .siteWidth {
	padding-bottom:0;
}

#bannerCaption .sectionContainer {
	overflow:visible;
}

#bannerCaption h1,
#bannerCaption p {
	letter-spacing:0.25px;
}

#bannerCaption h1 {
	line-height:60px;
}

#bannerCaption hr {
	width:100%;
	max-width:none;
	margin-left:0;
	border-width:2px;
	background:white;
}

#bannerCaption a {
	margin-top:30px;
}

#bannerText .siteWidth {
	padding-top:40px;
	padding-bottom:0;
}

#bannerText ul {
	padding-left:0;
}

#bannerText li {
	margin:0 25px;
	color:#c81092;
	font-size:18px;
	font-weight:400;
	letter-spacing:1px;
	display:inline-block;
	list-style:none;
}

#bannerText .bannerTextIcon {
	padding-left:25px;
	background:url('../images/iconTick.png') no-repeat left center;
}

/********** ABOUT STYLES **********/
#about hr {
	border-color:#51a72c;
}

/********** HOW IT WORKS STYLES **********/
#how-it-works {
	background:#51a72c;
	color:white;
}

#how-it-works .sectionText {
	padding-bottom:20px;
}

#how-it-works hr {
	border-color:white;
}

#how-it-works ul {
	padding-left:0;
	list-style:none;
}

#how-it-works .ctaImage,
#how-it-works .ctaTitle {
	display:block;
}

#how-it-works .ctaTitle {
	margin-top:10px;
	font-size:19px;
}

/********** PRICING STYLES **********/
#pricing hr {
	border-color:#c81092;
}

#pricing .siteWidth {
	padding-bottom:0;
}

.priceIcons {
	margin-bottom:5px;
	padding:0 40px 20px 40px;
	border-bottom:#c81092 solid 1px;
	display:inline-block;
}

.priceIcons > div {
	width:51px;
	height:50px;
	position:relative;
	margin:0 10px;
	padding-top:10px;
	background:url('../images/priceIcon.png') no-repeat 50% 0;
	color:#48add8;
	font-size:20px;
	line-height:15px;
	font-weight:400;
	text-transform:uppercase;
	display:inline-block;
	cursor:pointer;
}

.timeLabel {
	font-size:10px;
	display:block;
}

.priceIcons .active {
	background:url('../images/priceIcon.png') no-repeat 50% -50px;
	color:white;
}

.priceIcons .activeArrow {
	width:100%;
	height:7px;
	position:absolute; bottom:-21px; left:0;
	background:url('../images/priceArrow.png') no-repeat 50% 100%;
}

.priceInformation > div {
	display:none;
}

.priceInformation > div.active {
	display:block;
}

.priceText {
	margin-bottom:40px;
}

/********** ANALYTICS STYLES **********/
#analytics {
	background:#48add8;
}

#analytics .sectionContainer {
	margin-top:30px;
	padding:10px 0 120px 0;
	background:white;
}

#analytics hr {
	border-color:#48add8;
}

/********** RESPONSIVE STYLES **********/
/********** Smaller than desktop Styles **********/
@media (max-width: 992px) {
	/********** HOW IT WORKS STYLES **********/
	#how-it-works li {
		margin:15px 0;
	}
	
	#how-it-works li:first-child {
		margin-top:0;
	}
	
	#how-it-works li:last-child {
		margin-bottom:0;
	}
}
	
/********** Tablet Styles **********/
@media (min-width: 768px) {
	/********** HEADER STYLES **********/
	.register .btn-default {
		border-bottom-left-radius:0;
		border-bottom-right-radius:0;
	}
	
	nav ul {
		overflow:hidden;
	}
	
	nav li {
		display:inline-block;
		float:left;
	}
	
	nav li + li {
		margin-left:20px;
	}

	/********** BANNER STYLES **********/
	#bannerCaption {
		color:white;
		text-align:left;
	}
	
	#bannerCaption .siteWidth {
		padding-top:40px;
		padding-bottom:20px;
	}
	
	#bannerCaption .sectionContainer {
		max-width:420px;
	}
}

/********** Phone Styles **********/
@media screen and (max-width: 767px) {
	/********** GLOBAL STYLES **********/
	section {
		min-height:0 !important;
	}
	
	.siteWidth {
		padding-top:70px !important;
	}

	/********** HEADER STYLES **********/
	header {
		position:static;
	}
	
	header .siteWidth {
		padding-top:15px !important;
		padding-bottom:0;
	}
	
	#headerContainer {
		position:static;
		padding-top:20px;
	}
	
	#headerLogin {
		position:static;
		padding-top:18px;
		padding-bottom:0;
	}
		
	.sign-in,
	.register {
		display:block;
	}
	
	.sign-in {
		position:absolute; top:15px; right:15px;
	}
	
	.register {
		position:relative; bottom:auto; right:auto;
	}
	
	nav {
		padding-top:0;
	}
	
	nav ul {
		position:relative;
		margin:0;
		text-align:justify;
	}
	
	nav ul:after {
		width:100%;
		content:'';
		display:inline-block;
	}
	
	nav li {
		display:inline-block;
	}
	
	nav a {
		display:block;
	}
	
	/********** BANNER STYLES **********/
	#banner {
		margin-top:0;
	}
	
	#bannerCaption {
		height:auto;
		position:relative;
		text-shadow:1px 1px 1px #c6c6c6;
	}

	#bannerCaption .siteWidth {
		padding-top:20px !important;
		padding-bottom:40px;
	}
	
	#bannerCaption hr {
		border-color:#c6c6c6;
	}
	
	#bannerText .siteWidth {
		padding:0 !important;
	}
	
	#bannerText li {
		display:block;
	}
	
	#bannerText li + li {
		margin-top:10px;
	}
	
	#bannerText .bannerTextIcon {
		padding-left:30px;
	}
	
	/********** PRICING STYLES **********/
	.priceIcons {
		padding-left:0;
		padding-right:0;
		display:block;
	}
	
	.priceIcons > div {
		width:14.3%;
		margin:0 0.75%;
	}
	
	/********** ANALYTICS STYLES **********/
	#analytics .sectionImage {
		display:none;
	}
}

@media screen and (max-width: 500px) {
	/********** GLOBAL STYLES **********/
	.btn-default,
	.btn-primary {
		padding:10px;
	}
	
	.btn-primary {
		width:100%;
		padding-left:0;
		padding-right:0;
	}
	
	hr {
		width:80%;
		margin-left:10%;
	}
	
	/********** PRICING STYLES **********/
	.priceIcons > div {
		width:14%;
		border:#c81092 solid 2px;
		border-radius:10px;
		background:none !important;
	}
	
	.priceIcons > .active {
		background:#c81092 !important;
	}
	
	.priceIcons .activeArrow {
		bottom:-23px;
	}
}