@charset "utf-8";

/* CSS Document */
/***************************************************************************************
	
	* GENERAL STARTS
	
***************************************************************************************/
*,* * {
	margin:0;
	padding:0;
	font-size:1em;
	position:relative;
	box-sizing:border-box;
}

body {
	background:#fff none repeat scroll 0 0;
	color:#2c343b;
	font-family:"proxima-nova",sans-serif;
	font-size:62.5%;
	font-weight:400;
	line-height:18px;
	margin:0;
	padding:0;
}

a {
	text-decoration:none;
}

p {
	font-size:1.6em;
	line-height:1.7;
	color:#384b52;
	font-weight:400;
	margin-top:1em;
}

pre {
	font-size:1.6em;
	font-weight:400;
	color:#384b52;
	margin-top:2.5em;
}

hr {
	height:2px;
	background:#eeece9;
	margin-top:2.5em;
}
/***************************************************************************************
	
	* HEADINGS STARTS
	
***************************************************************************************/
h1,h2,h3,h4,h5,h6 {
	letter-spacing:.02em;
	margin-top:2.5em;
	color:#1a88b2;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	color: #1a88b2;
}

h1 {
	font-size:5em;
	margin-bottom:0;
	line-height:65px;
	font-weight:700;
}

h2 {
	font-size:4em;
	line-height:1.2em;
	font-weight:700;
}

h3 {
	font-size:2.8em;
	line-height:1.3em;
	font-weight:700;
}

h4 {
	font-size:2.4em;
	line-height:1.2em;
	font-weight:700;
}

h5 {
	font-size:2em;
	line-height:1.2em;
	font-weight:700;
}

h6 {
	font-size:1.6em;
	font-weight:400;
}

/***************************************************************************************
	
	* LISTS STARTS
	
***************************************************************************************/
main ul {
	margin-left:1em;
}

main ul,
main ol {
	font-size: 1.6em;
}

main ul li,
main ol li,
main li ul,
main li ol {
	line-height:1.7;
	font-size:1em;
	font-weight:400;
	position:relative;
	margin: 1em 0 1.1em 0.6em;
}

main ul ul,
main ul ol,
main ol ul,
main ol ol {
	font-size:1em;
}
/***************************************************************************************
	
	* COMMON CSS STARTS
	
***************************************************************************************/
.page-wrapper {
	overflow:hidden;
	width:100%;
}

.section-content {
	max-width:850px;
	margin:0 auto;
	padding:50px 20px;
}

.home .section-content *:first-child {
	margin-top:0;
}

/* Tools */
strong {
	font-weight:700;
}

.clear {
	clear:both;
}

.aligncenter {
	margin:0 auto;
	display:block;
	text-align:center;
}
/******************/
/* Header Section */
/*****************/
header {
	background-color:#60cdf6;
	height:50px;
	position:fixed;
	width:100%;
	z-index:2;
}

.logo-section {
	background-color:#60cdf6;
	width:100%;
	height:98%;
	padding: 0 0 20px 9px;
}

.logo-section a {
	display:block;
	float:left;
	height:100%;
}

.logo-section a:first-child {
	width:70%;
}

.logo-section img {
	height:45px;
	margin:2px 10px 0;
	max-width:100%;
	padding:5px;
	width:auto;
	border: none; /* IE no border *this is the fix* */
}

.logo-section .blue-logo {
	display:none;
}

.dropdown {
	width:30%;
}

.dropdown-icon {
/* 	background: rgba(0, 0, 0, 0) url(../images/icons/dropdown.svg) no-repeat scroll center center; */
	float:right;
	height:30px;
	margin:1em 0;
	padding-left:4em;
	opacity:1;
	transition:opacity 0.3s ease-in-out 0;
	width:100px;
}

.no-csstransitions .dropdown-icon,
.no-borderimage .dropdown-icon,
.no-smil .dropdown-icon {
	background:rgba(0,0,0,0) url(../images/icons/dropdown.svg) no-repeat scroll center center;
}

.no-csstransitions .dropdown-svg,
.no-borderimage .dropdown-svg,
.no-smil .dropdown-svg {
	display:none;
}

nav li {
	letter-spacing:.1em;
}

.download-button img {
	height:45px;
	border: none; /* fix ie image border */
}

/*** ACTIVE MENU STARTS ***/
.no-csstransitions header.active .dropdown-icon,
.no-borderimage header.active .dropdown-icon,
.no-smil header.active .dropdown-icon {
	background:rgba(0,0,0,0) url(../images/icons/dropdown-close.svg) no-repeat scroll center center;
}

nav,
.header-buttons {
	background-color:#5bc4ec;
	max-height:0;
	overflow:hidden;
	transition:max-height 0.3s;
	width:100%;
}

header.active nav,
header.active .header-buttons {
	max-height:500px;
}

header.active .header-buttons {
	padding-bottom:220px;
}

nav li {
	border-bottom:2px solid #60cdf6;
	font-size:2.4em;
	margin:0;
	padding: 0 0px;
}

nav li:last-child {
	border:none;
}

nav li a {
	color:#fff;
	display:block;
	line-height:60px;
	padding:0 20px;
}

.header-buttons a {
	display:block;
	text-align:center;
}

.login-button {
	background-color:#70d2f7;
	border-radius:4px;
	color:#1a88b2;
	font-size:1.8em;
	font-weight:700;
	padding: 15px 0;
	transition:background-color 0.3s;
	margin: 0 18px;
}

.download-button {
	padding:20px 0;
	margin: 0 18px;
}

.no-touchevents .login-button:hover {
	background-color:#fff;
}

/*************************/
/** DROPDOWN ANIMATIONS **/
/*************************/
/** MENU CLOSED **/
.svg-menu-toggle .line {
	opacity:1;
	transform:rotate(0) translateY(0) translateX(0);
	transform-origin:1em 1em;
	transition:transform 0.3s ease-in-out,opacity 0.3s ease-in-out;
}

.svg-menu-toggle .line-1 {
	transform-origin:1em 5em 0;
}

.svg-menu-toggle .line-3 {
	transform-origin:2em 9em;
}

/** MENU OPEN **/
header.active .svg-menu-toggle .line-1 {
	transform:rotate(45deg);
}

header.active .svg-menu-toggle .line-2 {
	opacity:0;
}

header.active .svg-menu-toggle .line-3 {
	transform:rotate(-45deg);
}

/****************/
/* Home Section */
/****************/
.home-section {
	background-color:#60cdf6;
	padding-top: 50px;
}

.home-image {
	display:block;
	float:right;
	width:100%;
	margin-bottom:-50px;
	margin-top:1em;
}

.home-image .iphone {
	max-width:235px;
	margin-top:0;
}

.home-image img {
	bottom:-1px;
	vertical-align:top;
}

.half-iphone {
	height:auto;
	max-width:235px;
}

.half-iphone-screen {
	height:auto;
	left:14px;
	max-width:206px;
	position:absolute;
}

.home-text {
	display:block;
	float:left;
	width:100%;
}

.home-text h1 {
	font-size:5.2em;
	margin-top: 0;
	color: #fff;
}

.home-button {
	background-color:#fbc072;
	border:medium none;
	border-radius:4px;
	color:#836743;
	display:inline-block;
	font-size:1.7em;
	font-weight:700;
	margin:1.5em 0;
	padding:15px 65px;
	transition:background-color 0.3s;
	text-align:center;
	width:100%;
}

.no-touchevents .home-button:hover {
	background-color:#fff;
}

/*****************/
/* About Section */
/****************/
.about-section {
	box-shadow:0 0 0 4px rgba(0,0,0,0.1);
	background-color:#fff;
}

.about-section .section-content {
	padding-top:75px;
	padding-bottom:20px;
}

.about-section p {
	margin-bottom:.7em;
	margin-top:0;
}

p.attribution {
	color:#60cdf6;
	font-style:italic;
	font-size:1.9em;
}

/************************/
/* How it Works Section */
/************************/
.how-section {
	background-color:#faf8f6;
}

.how-heading h6 {
	color:#384b52;
	margin-top:0;
}

.how-left-image,
.how-right-image {
	display:block;
}

.iphone {
	height:auto;
	margin:0 auto;
	max-width:190px;
}

.iphone-screen {
	bottom:53px;
	height:auto;
	left:14px;
	max-width:162px;
	position:absolute;
}

.how-left-column .how-left-image:first-child,
.how-right-column .how-right-image:first-child {
	margin-top:50px;
}

.how-left-column,
.how-right-column {
	border-bottom:2px solid #eeece9;
}

.how-right-column:last-child {
	border-bottom:none;
}

.how-left-text,
.how-right-text {
	padding:30px 0 45px;
}

/*********************/
/* Timeline Section */
/********************/
.timeline-heading {
	background-color:#60cdf6;
	padding:95px 15px;
}

.timeline-heading h1 {
	font-weight:400;
	color:#fff;
	margin-top:0;
}

.ipad-container {
	margin:30px 0 50px;
}

.ipad {
	z-index:1;
}

.ipad-img {
	margin:0 auto;
	height:300px;
	display:block;
}

.ipad-screen {
	display:block;
	float:left;
}

.timeline-screen {
	overflow:hidden;
	margin:0 auto;
	position:absolute;
}

.timeline {
	display:table;
	width:100%;
	left:0;
	transition:left 0.3s;
}

.timeline-row {
	display:table-cell;
	padding:0 20px 30px;
}

.timeline-screen .long-container {
	transition:left 0.3s;
	left:0;
}

.timeline-text {
	max-width: 340px;
	margin: 0 auto;
}

.next-timeline {
	background:rgba(0,0,0,0) url(../images/icons/sprite.svg) no-repeat scroll 0 0 / cover;
	background-size:cover;
	display:block;
	height:24px;
	width:30px;
	margin:0 auto;
	transition:transform 0.3s;
}

.next-timeline.back {
	transition:transform 0.3s;
}

/****************/
/* FAQ Section */
/***************/
.faq-section {
	background-color:#faf8f6;
}

.faq-heading h6 {
	color:#384b52;
	margin-top: 0;
}

.home .faq-text h4:first-child {
	margin-top: 3.5em;
}

/********************/
/* Call Out Section */
/********************/
.callout-links {
    display: table;
    width: 100%;
}
.callout-links h5 {
	padding: 0 40px;
	margin-top: 0;
}

.left-box,
.right-box {
    display: table;
	width: 100%;
	vertical-align: middle;
	transition: opacity 0.3s;
}

.no-touchevents .left-box:hover,
.no-touchevents .right-box:hover {
	opacity:.7;
}

.box-link {
	display:block;
	padding:110px 60px;
	height:100%;
}

.left-box h1,
.right-box h1 {
	font-weight:400;
	color: #fff;
	margin-top: 0;
}

.left-box p,
.right-box p {
	color:#fff;
}

.left-box {
	background-color:#60cdf6;
}

.right-box {
	background-color:#fbc072;
}

.right-box h5 {
	color:#96774d;
}

.right-box a {
	color:#fff;
}

.left-box img {
	height:40px;
	width:140px;
	border: none;
}

/******************/
/* Footer Section */
/******************/
footer {
	padding:35px 0 40px;
	border-bottom:10px solid #efece8;
}

footer img {
	height:120px;
	width:auto;
	padding-bottom:20px;
}

.footer-text {
	color:#60cdf6;
	font-weight:400;
}

.footer-copyright {
	font-size:1.4em;
	font-weight:700;
	color:#a4a4a4;
}

/***************************************************************************************
	
	* SCREEN WITH MORE THAN 555px STARTS
	
***************************************************************************************/
@media only screen and (min-width: 555px) {
	/*******************/
	/* Header Section */
	/******************/
	header.active {
		padding-bottom:0;
	}
	
	/****************/
	/* Home Section */
	/****************/
	.home-button {
		width:auto;
	}
}

/***************************************************************************************
	
	* DESKTOP STYLES STARTS
	
***************************************************************************************/
@media only screen and (min-width: 985px) {
	
	/*****************/
	/* Global Styles */
	/*****************/
	.section-content {
		max-width:850px;
		margin:0 auto;
		padding:85px 0;
	}
	
	/******************/
	/* Header Section */
	/******************/
	header {
		height:62px;
		transition:background-color 0.3s;
	}
	
	header + #primary {
		padding-top:62px;
	}
	
	.logo-section {
		background-color:transparent;
		float:left;
		max-width:220px;
		height: 142%;
		padding-top: 0;
	}
	
	.logo-section a:first-child {
		display:block;
		line-height:36px;
		margin-right:25px;
		width:100%;
	}
	
	.logo-section img {
		display:inline-block;
		height:100%;
		padding:10px 20px;
		width:100%;
		margin:0;
	}
		
	nav,
	.header-buttons {
		background-color:inherit;
		max-height:none;
		display:inline-block;
		overflow:visible;
		width:auto;
		height:100%;
	}
	
	nav ul {
		height:100%;
	}
	
	nav li {
		border-bottom:4px solid #60cdf6;
		display:inline-block;
		font-size:1.9em;
		height:100%;
		margin:0 10px;
		transition:border-color 0.3s;
	}

	nav li:last-child {
		border-bottom:4px solid #60cdf6;
	}
	
	.no-touchevents nav li:hover,
	nav li.active {
		border-bottom:4px solid #fff;
		z-index:2;
	}
	
	nav li a {
		padding:8px 10px 0;
		height:100%;
	}
	
	.header-buttons {
		position: absolute;
		top: 0;
		right: 0;
		line-height:62px;
		padding:0;
	}
	
	.header-buttons a {
		font-size:1.4em;
		display:inline-block;
		line-height:35px;
	}
	
	.login-button {
		position:absolute;
	    right:170px;
	    top:18px;
	    width:110px;
	    height:36px;
		padding:0 35px;
		margin-right:5px;
	}
	
	.download-button {
		height:29px;
		vertical-align:middle;
		margin-right:20px;
		padding:0;
	}
	
	.download-button img {
    	height: 38px;
    	border: none; /* IE no border *this is the fix* */
	}
	
	.logo-section .dropdown {
		display:none;
	}
	/* White Header Styles */
	header.white {
		background-color:#fff;
		position:fixed;
		width:100%;
		z-index:3;
	}
	
	header.white + #primary {
		padding-top:62px;
	}
	
	header.white .blue-logo {
		display:inline-block;
	}
	
	header.white .white-logo {
		display:none;
	}
	
	.no-touchevents header.white nav li:hover,
	header.white nav li.active {
		border-bottom:4px solid #60cdf6;
	}
	
	header.white nav li {
		border-bottom:4px solid #fff;
	}
	
	header.white li a {
		color:#60cdf6;
	}
	
	header.white .login-button {
		background-color:#efece8;
		color:#969491;
	}
	
	.no-touchevents header.white .login-button:hover {
		background-color:#60cdf6;
		color:#fff;
	}
		
	/****************/
	/* Home Section */
	/****************/
	.home-section {
		padding-top: 0px;
	}
	.home-section .section-content {
		max-width:930px;
		padding-bottom:0;
	}
	
	.home-image {
		width:50%;
		float:left;
		margin-bottom:0;
	}
	
	.home-image .iphone {
		max-width:none;
	}
	
	.half-iphone {
		max-width:480px;
	}
	
	.half-iphone-screen {
		bottom:auto;
		top:118px;
		left:28px;
		max-width:422px;
	}
	
	.home-text {
		float:right;
		padding-left:60px;
		padding-top:110px;
		width:50%;
	}
	
	/*****************/
	/* About Section */
	/****************/
	.about-section .section-content {
		padding-bottom:60px;
	}
	
	/************************/
	/* How it Works Section */
	/************************/
	.how-section h3 {
		margin:0;
	}
	
	.how-left,
	.how-right {
		width:50%;
	}
	
	.how-left {
		float:left;
		padding-right:100px;
	}
	
	.how-right {
		float:right;
		padding-left:100px;
	}
	
	.how-right-column:last-child {
		border-bottom:2px solid #eeece9;
	}
	
	.iphone {
		max-width:310px;
	}
	
	.iphone-screen {
		bottom:81px;
		left:22px;
		max-width:256px;
	}
	
	span.gray-border {
		background-color:#eeece9;
		display:block;
		height:60%;
		position:absolute;
		right:-27%;
		top:25%;
		width:3px;
	}
	
	/*********************/
	/* Timeline Section */
	/********************/
	.no-touchevents .timeline-section .section-content {
		max-width:1010px;
		padding:0;
	}
	
	.no-touchevents .timeline-heading {
		padding:195px 0 200px;
	}
	
	.no-touchevents .ipad-container {
		margin:0;
	}
	
	.no-touchevents .ipad {
		height:770px;
		position:absolute;
		width:50%;
		padding:0;
	}
	
	.no-touchevents .ipad.top {
		top:50px;
	}
	
	.no-touchevents .ipad.bottom {
		bottom:50px;
	}
	
	.no-touchevents .fixed.ipad {
		left:0;
		position:fixed;
		top:10%;
		z-index:2;
	}
	
	.no-touchevents .ipad-img {
		height:100%;
		position:absolute;
		top:0;
		z-index:2;
		margin-left:22%;
		width:auto;
	}
	
	.no-touchevents .ipad-screen {
		float:none;
	}
	
	.no-touchevents .timeline-screen {
		height:79%;
		top:10.8%;
		left:auto;
		position:relative;
	}
	
	.no-touchevents .timeline-screen .long-container {
		width:100%;
		min-height:100%;
		padding-top:2px;
		transition:top 0.3s;
		top:0;
	}
	
	.no-touchevents .timeline-screen img {
		height:600px;
		display:block;
	}
	
	.no-touchevents .timeline-screen img:last-child {
		margin-bottom:0;
	}
	
	.no-touchevents .circle {
		background-color:rgba(239,236,232,0.2);
		border-radius:50%;
		height:85px;
		margin-top:-43px;
		position:absolute;
		right:-45px;
		top:50%;
		width:85px;
	}
	
	.no-touchevents .inner-circle {
		background-color:#60cdf6;
		border-radius:100%;
		height:20px;
		left:50%;
		margin-left:-10px;
		margin-top:-10px;
		position:absolute;
		top:50%;
		width:20px;
	}
	
	.no-touchevents .timeline-row {
		display:table;
		height:800px;
		width:100%;
		padding:0;
	}
	
	.no-touchevents .timeline-row > div {
		display:table-cell;
		height:100%;
		vertical-align:middle;
		width:50%;
		padding:0 10%;
	}
	
	.no-touchevents .timeline-row:last-child .timeline-text {
		padding-bottom:135px;
	}
	
	.no-touchevents .timeline-text {
		border-left:3px solid #eeece9;
		margin: 0;
		max-width: 50%;
	}
	
	.no-touchevents .next-timeline {
		display:none;
	}
	
	/****************/
	/* FAQ Section */
	/***************/
	
	/********************/
	/* Call Out Section */
	/********************/	
	.callout-links {
    	display: table;
	}
	.box-link {
		padding:110px 0;
	}
	.left-box, .right-box {
		display: table-cell;
		width: 50%
	}	
	/******************/
	/* Footer Section */
	/******************/
	footer {
		padding:70px 0;
	}
}

/* closing media */