body {
			margin: 0px;
			/*background-color: rgb(244,213,60);*/
			font-family: 'Gotham-Bold';
			-webkit-font-smoothing: antialiased;
			min-height: 100%;
			background-color: #f7d864;
		}

		@font-face {
		    font-family: 'Gotham-Bold';
		    src: url('assets/Gotham-Bold.ttf#') format('truetype');
		    font-style: normal;
		}

		/* BASE STYLES */

		h1 {
			font-family: 'Gotham-Bold';
			font-weight: normal;
			font-size: 48px;
			margin: 0;
		}

		h2 {
			font-family: 'Gotham-Bold';
			font-weight: normal;
			font-size: 40px;
			margin: 0;
		}

		h3 {
			font-family: 'Gotham-Bold';
			font-weight: normal;
			font-size: 27px;
			margin: 0;
		}

		h4 {
			margin: 0;
		}

		p {
			font-family: 'Gotham-Bold';
			font-weight: normal;
			font-size: 17px;
			line-height: 1.2em;
			margin: 0;
		}

		a:active, a:link, a:visited {
			text-decoration: none;
			color: white;
		}

		.color-white {
			padding: 1%;
			color: white;
		}

		.color-yellow {
			color: #fae598;
		}


		.color-dark-orange {
			color: #f79800;
		}

		.color-grey {
			color: #c7c7c7;
		}

		.color-dark-grey {
			color: #919191;
		}

		/* WRAPPER */

		#wrapper {
			/*background-color: #f7d864;*/
			opacity: 0;
		}

		/* HEADER */

		header {
			width:100%;
		}

		/*#video-bar {
			position: absolute;
			top: 0;
			width: 100%;
			height: 80px;
			background: #f79800;
			text-align: center;
			cursor:pointer;
		}*/

		/*#video-bar h3 {
			margin-top: 25px;
		}*/

		#button-watch-video {
			text-align: center;
			margin: auto;
		}

		#button-watch-video a:link {
			margin: 0;
			min-width: 200px;
			background-image: url(assets/icon-play.svg);
			background-repeat: no-repeat;
			background-position: 0% 50%;
		}

		#video-overlay { 
			position: fixed;
			width: 100%;
			overflow: hidden;
			top: 0;
			background: rgba(0,0,0,0.5);
			display: none;
		}

		#video-wrapper {
			position: absolute;
			width: 80%;
			left: 50%;
			top: 50%;
		}

		#video-wrapper iframe {
			width: 100%;
			height: 100%;
		}

		.phone {
			position: absolute;
			max-width: 360px;
			max-height: 757px;
			border-radius: 14.4%;
			background-color: white;
		}

		.phone .screen {
			position: absolute;
			max-width: 304px;
			max-height: 539px;
			background-color: #f7d864;
			margin: 29.1% 7.7%;
			overflow: hidden;
		}

		#phone-left {
			left: 5%;
		}

		#phone-right {
			right: 5%;
		}

		#splash {
			position: absolute;
			width: 100%;
			top: 50%;
			text-align: center;
		}

		#splash h1{
			line-height: 1.1em;
		}

		#splash a {
			display: inline-block;
			width: 156px;
			margin: 40px 10px;
		}

		#splash a img {
			width: 100%;
		}

		.logo {
			width: 15%;
			max-width: 80px;
			margin: 0 0 1% 0;
		}

		.add-name {
			width: 100%;
			max-width: 500px;
			margin: 5% 0 2% 0;
		}

		#btn-arrow {
			position: absolute;
			width: 100%;
			text-align: center;
			bottom: 5%;
		}

		#btn-home {
			position: absolute;
			top: 4%;
			left: 4%;
		}

		#btn-ios-soon {
			font-size: 24px;
			padding: 102px 0 0 0;
		}

		/* CARDS */

		.card {
			position: absolute;
			width: 90%;
			/*margin: 20% auto 0 auto;*/
			left: 5%;
			top: 10%;
			will-change: transform;
			-webkit-transform-origin:50% 100%;
			-ms-transform-origin: 50% 100%;
			transform-origin: 50% 100%;
			-webkit-transform: rotateZ(-20deg) translate3d(-320px, 0px, 0px);
			transform: rotateZ(-20deg) translate3d(-320px, 0px, 0px);
			-ms-transform: rotateZ(-20deg) translate3d(-320px, 0px, 0px);
			-webkit-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
			-moz-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
			-o-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
			transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
		}

		.card img {
			width: 100%;
		}

		.its-a-match {
			position: absolute;
			left:50%;
			top:50%;
			width:36.1%;
			margin-left:-18%;
			margin-top:-25%;
			opacity: 0;
			-webkit-transform: scale(0.5);
			-ms-transform: scale(0.5);
			transform: scale(0.5);
			-webkit-transform-origin: 50% 50%;
			-ms-transform-origin: 50% 50%;
			-webkit-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
			-moz-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
			-o-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
			transition:all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
		}

		.its-a-match img {
			width: 100%;
		}

		/* INFO */

		.info {
			background-color: #ffb300;
			padding: 0 0 3% 0;
		}

		.info h2 {
			text-align: center;
			padding: 10% 0 0 0;
			line-height: 1.1em;
		}

		.addname {
			text-align: center;
			padding-top: 10%;
			padding-bottom: 5%;
			background-color: #F9D865;
			padding: 0 0 5% 0;
		}

		.addname h2 {
			padding: 10% 0 0 0;
			line-height: 1.1em;
		}


		#steps, #quotes {
			/*width:100%;*/
			/*background:blue;*/
			margin: 5% 0 0 0;
			text-align: center;
		}

		#jo-quote {
			width: 780px;
			margin: auto;
			text-align: center;
		}

		#jo-quote:hover {
			text-decoration: underline;
		}

		#jo-quote-text {
			font-size: 48px;
			color: white;
		}

		#jo-quote img {
			margin: 20px;
			width: 70%;
		}

		.big-quote {
			display: inline-block;
			width: 320px;
			text-align: center;
			margin: 0 0 5% 0;
			padding: 0 1%;
			line-height: 2.1em;
		}

		.big-quote h3:hover {
			text-decoration: underline;
		}

		.info-step {
			display: inline-block;
			width: 320px;
			text-align: center;
			margin: 0 0 5% 0;
		}

		.big-quote img {
			margin: 1em 0 0 0;
		}

		#logo-1 {
			width: 180px;
		}

		#logo-2 {
			width: 180px;
		}

		#logo-3 {
			width: 180px;
		}

		.info-step h3 {
			margin: 12px 0 0 0;
		}

		.info-step p {
			margin: 12px 0 0 0;
		}

		/* ABOUT */

		.about {
			background-color: #f79800;
			padding: 180px 0 100px 0;
		}

		.quote {
			width: 100%;
			display: inline-block;
		}

		.quote-block {
			width: 730px;
			height:120px;
			margin: auto;
			/*padding: 200px;*/
		}

		.quote-block span, .quote-block #quote-icon {
			float: left;
		}

		.quote-block span {
			margin: 30px 0 0 30px;
		}

		.quote-block span h3 {
			margin: 14px 0 0 0;
		}

		.contact {
			margin: 120px 0 0 0;
			text-align: center;
		}

		.contact h1 {
			display: inline-block;
			margin: 0 5%;
		}

		.contact a {
			color: #f7d864;
			/*border-bottom :3px solid white;*/
		}

		.contact a:hover {
			border: none;
		}

		#contact-contact a {
			/*border-bottom :3px solid white;*/
		}

		.icon-egg {
			will-change: transform;
			-webkit-transform-origin:50% 100%;
			-webkit-transform: rotateZ(-3deg);
			-webkit-animation: egg-anim 1.5s infinite;
			-webkit-animation-delay: 500ms;
		}

		@-webkit-keyframes egg-anim {
			0%   { -webkit-transform: rotateZ(-3deg); }
			50% { -webkit-transform: rotateZ(3deg); }
			100% { -webkit-transform: rotateZ(-3deg); }
		}

		/* SHARE & DOWNLOAD */

		.cta {
			width:100%;
		}

		.btn-fat, .btn-fat-full {
			position: absolute;
			width: 50%;
			text-align: center;
			cursor: pointer;
		}

		.btn-fat-full {
			width:100%;
		}

		.btn-fat h1 {
			padding: 10% 0;
		}

		.btn-fat-full {
			background-color: white;
		}

		.btn-fat-full h1 {
			padding: 5% 0;
		}

		.btn-fat-full h1 a {
			color:#d0d2d2;
		}

		#btn-share {
			background-color: #f7d864;
			left: 0;
		}

		#btn-download {
			background-color: #ffb300;
			right: 0;
		}

		#overlay-share {
			/*display: none;*/
			position: absolute;
			overflow: hidden;
			width: 50%;
			pointer-events: none;
		}

		#overlay-download {
			/*display: none;*/
			position: absolute;
			overflow: hidden;
			width: 50%;
			padding-top: 4%;
			right: 0px;
			text-align: center;
			display: none;
		}

		#overlay-download a {
		}

		.btn-social {
			width: 33.33%;
			height: 100%;
			float: left;
			will-change: transform;
			-webkit-transform: translate3d(0px, 100%, 0px);
			-ms-transform: translate3d(0px, 100%, 0px);
			transform: translate3d(0px, 100%, 0px);
			-webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
			-moz-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
			-o-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
			transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);;
			background-repeat: no-repeat;
			background-position: center center;
			cursor: pointer;
		}

		#btn-share-facebook {
			background-color: #39579b;
			background-image: url(assets/icon-share-facebook.svg);
		}

		#btn-share-twitter {
			background-color: #5ba8df;
			background-image: url(assets/icon-share-twitter.svg);
		}

		#btn-share-message {
			background-color: #2fe32a;
			background-image: url(assets/icon-share-message.svg);
		}

		#btn-support {
			position: absolute;
			bottom: 0;
			background-color: #ffb300;
			width: 100%;
			padding: 3% 0;
			cursor: pointer;
			text-align: center;
		}

		/*#btn-early-access h1 {
			position: absolute;
			width: 100%;
			background-color: white;
		}*/

		#btn-email-submit-btm {
			position: absolute;
			z-index: 1;
			right: 0px;
			background-image: url(assets/submit-btn.svg);
			background-color: #ffb300;
			background-repeat: no-repeat;
			background-position: center center;
		}

		#btn-email-submit-top {
			background-image: url(assets/submit-btn.svg);
			background-color: #ffb300;
			background-repeat: no-repeat;
			background-position: center center;
			float: left;
		}

		/* SUBMIT FORM */

		input {
			-webkit-appearance: none;
		    border-radius: 0;
		    outline: none;
		}

		input[type=text] {
			font-family: 'Gotham-Bold';
			border:0 none;
			color:#f79800;
			background-color:white;
		}

		input[type=submit] {
			border: 0;
			cursor: pointer;
			background-image:url(assets/submit-btn.svg);
			background-color: #f5ad36;
		}

		#form-email-top {
			width: 320px;
			margin: 20px auto;
		}

		#form-email-top input[type=text] {
			height:60px;
			width:240px;
			padding:0 0 0 20px;
			font-size: 18px;
			float:left;
		}

		#form-email-top input[type=submit] {
			width:60px;
			height:60px;
			margin: 0;
			padding:0;
			background-size: 80%;
		}

		#form-email-btm input[type=text] {
			height:190px;
			width:97%;
			padding:0 0 0 3%;
			font-size: 28px;
			float:left;
		}

		#form-email-btm input[type=submit] {
			width:190px;
			height:190px;
			margin: 0;
			padding:0;
		}

		#form-email-btm input[type=submit]:hover {
			/*background-position:10px 0;*/
		}

		#form-email-btm {
			width: 100%;
			position: absolute;
			/*display: none;*/
		}

		/* ROTATE DEVICE */

		#rotate-device {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: #f7d864;
			opacity: 0;
			pointer-events: none;
			-webkit-transition: all 200ms ease-out;
			-moz-transition: all 200ms ease-out;
			-o-transition: all 200ms ease-out;
			transition:all 200ms ease-out;
		}

		#rotate-device h4 {
			position: absolute;
			width: 100%;
			top: 68%;
			text-align: center;
		}

		#rotate-device img {
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -36px;
			margin-top: -77px;
			will-change: transform;
			-webkit-transform: rotateZ(-90deg);
			-webkit-transition: all 500ms ease-out;
			-moz-transition: all 500ms ease-out;
			-o-transition: all 500ms ease-out;
			transition:all 500ms ease-out;
			-webkit-transition-delay: 600ms;
		}


		/* ALERTS */

		#alert {
			position: fixed;
			top: -110px;
			width: 100%;
			height: 70px;
			padding: 40px 0 0 0;
			background-color: #ff5722;
			text-align: center;
			-webkit-transition: 250ms ease-in-out;
		}

		/* FOOTER */

		footer {
			width:100%;
			/*margin: 190px 0 0 0;*/
			background: white;
			text-align: center;
		}

		footer h3 {
			padding: 3% 0;
			font-size: 18px;
		}


		/* BREAKPOINTS */

		@media only screen 
		and (max-width : 1280px)
		and (min-width : 1024px)
		{
			h1 {
				font-size: 36px;
			}
			h2 {
				font-size: 30px;
			}
			h3 {
				font-size: 24px;
			}

			.quote-block {
				width: 580px;
			}

			#splash a {
				width: 130px;
				margin: 24px 8px;
			}

			#button-watch-video a:link {
				min-width: 180px;
			}

			/*#form-email-top {
				width: 200px;
				margin: 20px auto;
			}

			#form-email-top input[type=text] {
				width: 120px;
			}*/

		}

		@media only screen 
		and (max-width : 1024px)
		and (min-width : 320px)
		{
			h1 {
				font-size: 26px;
			}
			h2 {
				font-size: 24px;
			}
			h3 {
				font-size: 24px;
			}

			#splash a {
				width: 130px;
				margin: 16px 8px;
			}

			#button-watch-video a:link {
				min-width: 180px;
			}

			.info-step {
				width: 100%;
				margin: 0 0 13% 0;
			}

			.big-quote {
				width: 60%;
				margin: 0 0 13% 0;
			}

			.info-step:last-child {
				margin: 0 0 20% 0;
			}

			.quote-block {
				width: 100%;
			}

			.quote-block {
				text-align: center;
			}

			.quote-block span, .quote-block #quote-icon {
				float: none;
				margin: 0;
			}

			.quote-block span h2 {
				margin: 8px 0 0 0;
			}

			#jo-quote {
				width: 100%;
			}

			#jo-quote-text {
				font-size: 36px;
			}

			.about {
				/*padding: 0;*/
			}

			.contact {
				margin: 100px 0 0 0;
				padding: 120px 0 0 0;
			}

			#contact-contact {
				/*margin: 120px 0 0 0;*/
			}

			.contact h1 {
				margin: 0 2%;
			}

			.btn-fat {
				width: 100%;
			}

			#overlay-share, #overlay-download {
				width: 100%;
			}

			#overlay-download {
				padding-top: 7%;
			}

			.btn-social {
				background-size: 40%;
			}

			footer h3 {
				padding: 10% 0;
				font-size: 18px;
			}

		}

		@media only screen 
		and (min-device-width : 320px) 
		and (max-device-width : 568px) 
		{
			h1 {
				font-size: 24px;
			}
			h2 {
				font-size: 24px;
			}

			h3 {
				font-size: 24px;
			}

			h4 {
				font-size: 18px;
			}

			p {
				font-size: 12px;
			}

			.info h2 {
				padding: 30% 0 0 0;
			}

			.addname h2 {
				padding: 30% 0 0 0;
			}

			#splash {
				top: 8%;
			}

			#splash logo {
				margin: 40px 0 0 0;
			}

			#splash h2:nth-child(5) {
				display: none;
			}

			#splash a {
				width: 100px;
				margin: 15px 8px;
			}

			/*#btn-ios-soon {
				padding: 50px 0 0 0;
				font-size: 12px;
			}*/

/*			#button-app-store {
				width: 50%;
			}*/

			.about {
				padding-bottom: 140px;
			}

			.quote-block {
				text-align: center;
			}

			.quote-block span, .quote-block #quote-icon {
				float: none;
				margin: 0;
			}

			.quote-block #quote-icon {
				width: 90px;
				padding: 0 2px;
			}

			.quote-block h2 {
				font-size: 18px;
				margin: 24px 0 0 0;
			}

			.quote-block h3 {
				font-size: 16px;
				margin: 6px 0 0 0;
			}

			.contact h1 {
				display: block;
				margin: 10% 0;
			}

			#contact-contact {
				/*position: absolute;*/
				/*width:100%;*/
				/*margin: 40px 0 0 0;*/
				/*padding: 200px 0 0 0;*/
			}

			.btn-fat {
				width: 100%;
			}

			.btn-fat-full {
				padding: 10% 0;
			}

			#overlay-share {
				width: 100%;
			}

			#overlay-download a img {
				width: 100px;
			}

			.btn-social {
				background-size: 40%;
			}

			#btn-early-access {
				padding: 12px 0;
			}

			#btn-email-submit-btm {
				background-size: 80%;
			}

			#btn-support {
				padding: 10% 0;
			}

			#form-email-btm input[type=text] {
				font-size:18px;
				height:80px;
				width: 95%;
				padding: 0 0 0 5%;
			}

			#form-email-btm input[type=submit] {
				width: 80px;
				height: 80px;
			}

			#rotate-device img {
				width: 40px;
				left: 50%;
				top: 50%;
				margin-left: -20px;
				margin-top: -80px;
			}

			#rotate-device h4 {
				top: 55%;
			}

			#form-email-top {
				width: 260px;
				margin: 20px auto;
			}

			#form-email-top {
				width: 180px;
			}

			#form-email-top input[type=text] {
				height: 30px;
				width: 130px;
				font-size: 10px;
			}

			#form-email-top input[type=submit] {
				width: 30px;
				height: 30px;
			}

			#alert {
				height: 40px;
				padding: 30px 0 0 0;
			}

			#alert h3 {
				font-size: 14px;
			}

			footer h3 {
				padding: 10% 0;
				font-size: 8px;
			}
		}

		@media only screen 
		and (min-device-width : 375px)
		and (orientation : portrait)
		{
			#splash {
				top: 8%;
			}

			#splash logo {
				margin: 40px 0 0 0;
			}

			#splash h2:nth-child(5) {
				display: none;
			}

			.add-name {
				max-width: 300px;
			}

			.addname {
				padding-bottom: 10%;
			}

			.addname h2 {
				font-size: 30px;
				padding: 20% 0 0 0;
			}

			.info h2 {
				font-size: 30px;
				padding: 20% 0 0 0;
			}

			.color-dark-orange {
				font-size: 15px;
			}
		}

		@media only screen
		and (orientation : landscape)
		and (max-device-width : 1280px)
		{

			#rotate-device {
				opacity: 1;
			}

			#rotate-device img {
				-webkit-transform: rotateZ(0);
			}
		}