/**
 * Mono css style sheet
 * Author: Martin Bonov
 */

/* GENERAL */

* {outline:none;}

::-moz-selection {background:#0099ff; color:#fff;}
::selection {background:#0099ff; color:#fff;}

body {
	background:#fff none no-repeat 40% center;
	color:#333;
	font-family: Helvetica, Arial, sans-serif;
	font-size:13px;
	line-height:20px;
	margin:0 auto;
	text-align:center;
	-moz-transition: all 0.8s ease;
	-webkit-transition: all 0.8s ease;
	transition: all 0.8s ease;
	font-weight:100;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
body.viewing-page-4 {background-color:#dd3c43;}
body.viewing-page-5 {background-color:#13df81;}
body.viewing-page-6 {background-color:#009cff;}
body.viewing-page-7 {background-color:#fff;}

a {
	text-decoration:none;
}
p {
	font-size:24px;
	line-height:34px;
	max-width:820px;
}

header {
	position:fixed;
	top:50px;
	left:0;
	right:0;
	z-index:100;
	-moz-transition: all 0.5s ease 0.2s;
	-webkit-transition: all 0.5s ease 0.2s;
	transition: all 0.5s ease 0.2s;
}
.loading header {
	top:-50px;
	opacity:0;
}
.loading .trans1, 
.loading .trans2, 
.loading .trans3,
/* .loading .trans4, */
.loading .trans5 {
	opacity:0;
} 
.trans1 {
	opacity:1;
	-moz-transition: all 0.5s ease 0.5s;
	-webkit-transition: all 0.5s ease 0.5s;
	transition: all 0.5s ease 0.5s;
}
.trans2 {
	opacity:1;
	-moz-transition: all 0.5s ease 0.6s;
	-webkit-transition: all 0.5s ease 0.6s;
	transition: all 0.5s ease 0.6s;
}
.trans3 {
	opacity:1;
	-moz-transition: all 0.5s ease 0.7s;
	-webkit-transition: all 0.5s ease 0.7s;
	transition: all 0.5s ease 0.7s;
}
.trans4 {
	opacity:1;
	-moz-transition: all 0.5s ease 1.8s;
	-webkit-transition: all 0.5s ease 1.8s;
	transition: all 0.5s ease 1.8s;
}
.loading .trans5 {bottom:0;}
.trans5 {
	opacity:1;
	-moz-transition: all 0.5s ease 0.8s;
	-webkit-transition: all 0.5s ease 0.8s;
	transition: all 0.5s ease 0.8s;
}


div.frame {
	display:none;
}
.footer header {
	top:0;
	opacity:0;
}
.onepage-pagination {
	-moz-transition: all 0.3s ease 0.2s;
	-webkit-transition: all 0.3s ease 0.2s;
	transition: all 0.3s ease 0.2s;
}
.footer .onepage-pagination {
	opacity:0;
	margin-top:-50px;
}

/* NAVIGATION */

#logo {
	float:left;
	position:relative;
}
#logo img {
	position:absolute;
	left:0;
	top:5px;	
	-moz-transition: all 0.8s ease;
	-webkit-transition: all 0.8s ease;
	transition: all 0.8s ease;
}
#logo img.blue {
	opacity:0;
}


#navigation {
	float:right;
	font-size:16px;
	font-weight:500;
	opacity:0;
	-moz-transition: all 0.8s ease;
	-webkit-transition: all 0.8s ease;
	transition: all 0.8s ease;
}
.viewing-page-2 #navigation,
.viewing-page-3 #navigation,
.viewing-page-4 #navigation,
.viewing-page-5 #navigation,
.viewing-page-6 #navigation, 
.viewing-page-7 #navigation,
.viewing-page-8 #navigation {
	opacity:1;
}

.share {
	float:left;
}
#share-mobile {
	display:none;
}

.share .trigger {
	color:#fff;
	opacity:0.6;
	float:left;
	line-height:40px;
	margin-right:50px;
	margin-left:20px;
	-moz-transition: all 0.8s ease;
	-webkit-transition: all 0.8s ease;
	transition: all 0.8s ease;
	cursor:default;
}

#hop-on {
	color:#fff;
	opacity:0.6;
	float:left;
	line-height:40px;
	-moz-transition: all 0.8s ease;
	-webkit-transition: all 0.8s ease;
	transition: all 0.8s ease;
	width:180px;
	  white-space:nowrap;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	border:1px solid rgba(255,255,255,0.6);
	text-align:center;
}
#hop-on:hover {
	opacity:1;
}
.viewing-page-7 #hop-on {
	cursor:default;
	width: 1px;
	  margin-right: -100px;
	  opacity: 0;
	  border:1px solid rgba(255,255,255,0);

}

.share ul.networks {
	opacity:0;
	-moz-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#share:hover {
	opacity:1;
}
#share:hover ul.networks {
	opacity:1;
}
.share ul {
	margin:0;
	padding:0;
	list-style:none;
	white-space:nowrap;
	float:left;
}
.share ul li {
	float:left;
	margin-left:20px;
	opacity:0;
}
.share ul li.item1 {
	-moz-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.share ul li.item2 {
	-moz-transition: all 0.5s ease 0.1s;
	-webkit-transition: all 0.5s ease 0.1s;
	transition: all 0.5s ease 0.1s;
}
.share ul li.item3 {
	-moz-transition: all 0.5s ease 0.2s;
	-webkit-transition: all 0.5s ease 0.2s;
	transition: all 0.5s ease 0.2s;
}
.share ul li.item4 {
	-moz-transition: all 0.5s ease 0.3s;
	-webkit-transition: all 0.5s ease 0.3s;
	transition: all 0.5s ease 0.3s;
}
.share ul li.item5 {
	-moz-transition: all 0.5s ease 0.4s;
	-webkit-transition: all 0.5s ease 0.4s;
	transition: all 0.5s ease 0.4s;
}
.share ul li.item6 {
	-moz-transition: all 0.5s ease 0.5s;
	-webkit-transition: all 0.5s ease 0.5s;
	transition: all 0.5s ease 0.5s;
}
.share ul li.item7 {
	-moz-transition: all 0.5s ease 0.6s;
	-webkit-transition: all 0.5s ease 0.6s;
	transition: all 0.5s ease 0.6s;
}
#share:hover ul li,
body.viewing-page-7 .share ul li {
	opacity:1;
}

.share ul li a {
	width:40px;
	height:40px;
	line-height:40px;
	display:inline-block;
	color:#fff;
	opacity:0.9;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.share ul li a.facebook {background:url(../images/social-facebook-w.png) no-repeat left center;}
.share ul li a.twitter {background:url(../images/social-twitter-w.png) no-repeat left center;}
.share ul li a.linkedin {background:url(../images/social-linkedin-w.png) no-repeat left center;}
.share ul li a.pinterest {background:url(../images/social-pinterest-w.png) no-repeat left center;}
.share ul li a.tumblr {background:url(../images/social-tumblr-w.png) no-repeat left center;}
.share ul li a.google {background:url(../images/social-google-w.png) no-repeat left center;}
.share ul li a.mail {background:url(../images/social-email-w.svg) no-repeat left center;}

.share ul li a span {opacity:0.7;}
.share ul li a:hover {
	opacity:1;
	margin-top:-3px;
}

#share:hover ul li {
	opacity:1;
}


/* SECTIONS */

section, .section {
    height:100vh;
    display:block;
    z-index:8;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  overflow:hidden;
}
div.wrap {
	width:90%;
	max-width:1400px;
	text-align:left;
	margin:0 auto;
	position:relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
    display:block;
}
div.next {
	position:absolute;
    display:block;
    bottom:50px;
    left:0;
    z-index:100;
    width:100%;
    color:#fff;
}
header div.wrap, .elsewhere div.wrap, footer div.wrap {
	height:auto;
	top:auto;
	transform:translateY(0%);
}
.section .phone {
	height:580px;
	margin:0 auto;
	width:740px;
	padding-left:80px;
	color:#fff;
}
.section .phone img {
	float:left;
	opacity:0;
}
.section .phone span {
	text-transform:uppercase;
	font-size:16px;
	opacity:0.5;
	display:inline-block;
	margin-top:140px;
	margin-bottom:20px;
	font-weight:500;
}

a.arrow {
	display:inline-block;
	color:#fff;
	background:url(../images/arrow-white.svg) no-repeat left center;
	padding-left:40px;
	height:24px;
	line-height:24px;
	color:#fff;
	font-size:16px;
	opacity:0;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.active a.arrow {
	opacity:0.75;
}
a.arrow:hover, .active a.arrow:hover {
	opacity:1;
}
a.arrow span {
	opacity:0;
	-moz-transition: all 0.8s ease;
	-webkit-transition: all 0.8s ease;
	transition: all 0.8s ease;
}
body.viewing-page-1 a.arrow span {opacity:1;}
a.arrow:hover span {opacity:1;}

#hero {
    background:#009cff;
    position:relative;
    z-index:9;
}
#hero-phone {
	position:fixed;
	top:0;
	right:0;
	height:200vh;
	overflow:hidden;
}

.hero-img {
	position: absolute;
	top:-320px;
	right:150px;
	width:360px;
	left:auto;
	-moz-transition: all 0.8s ease;
	-webkit-transition: all 0.8s ease;
	transition: all 0.8s ease;
    -ms-transform: rotate(24deg); /* IE 9 */
    -webkit-transform: rotate(24deg); /* Safari */
    transform: rotate(24deg);
}
body.viewing-page-2 .hero-img {
	top:150px;
	opacity:0;
}

#intro {
	background:#fff;
}
#intro .backdrop {
	position: absolute;
	left: 0;
	top: 0;
	min-width: 110%;
	min-height: 110%;
	-moz-transition: all 1.5s ease 0.6s;
	-webkit-transition: all 1.5s ease 0.6s;
	transition: all 1.5s ease 0.6s;
	opacity:0;
}
.viewing-page-3 #intro .backdrop {
	-moz-transition: all 0.6s ease 0s;
	-webkit-transition: all 0.6s ease 0s;
	transition: all 0.6s ease 0s;
	top:-60px;
}
.viewing-page-2 #intro .backdrop {
	opacity:1;
	top:-30px;
}

#intro p {
	font-size:28px;
	line-height:44px;
	color:#333;
}

#hero h1 {
	font-size:42px;
	line-height:1.1em;
	margin-bottom:30px;
	color:#fff;
	font-weight:300;
/* 	margin-top: 30%; */
}
#hero p {
	font-size:24px;
	line-height:34px;
	margin-bottom:30px;
	color:#fff;
	max-width:600px;
}

#how1 {
	-moz-transition: all 0.6s ease;
	-webkit-transition: all 0.6s ease;
	transition: all 0.6s ease;
	background:rgba(255,255,255,0);
	z-index:12;
}

body.viewing-page-3 #how1 {
	-moz-transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
}

#subscribe {background:#fff;}
footer {
	height:auto;
	background:#2c2c2c;
}

#how1 .phone span, #how1 p {
	color:#333;
}

/* PAGINATION */

ul.onepage-pagination {
    display:block;
    position:fixed;
    right:50px;
    top:37%;
    z-index:10;
}
ul.onepage-pagination li {
    display:block;
    padding:0;
}
ul.onepage-pagination li a {
    list-style:none;
    display:block;
    padding:6px 10px;
    width:12px;
    height:12px;
}
ul.onepage-pagination li a span {
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
    background:rgba(255,255,255,0.3);
    width:4px;
    height:4px;
    display:block;
    -moz-transition: all 0.2s ease-out;  
    -o-transition: all 0.2s ease-out;  
    -webkit-transition: all 0.2s ease-out;	
}
ul.onepage-pagination li a:hover {}
ul.onepage-pagination li a:hover span {
    width:6px;
    height:6px;
    margin-left:-1px;
    margin-top:-1px;
    background:rgba(255,255,255,0.3)
}
ul.onepage-pagination li a.active span {
    background:#fff;
    width:8px;
    height:8px;
    margin-left:-2px;
    margin-top:-2px;
}

/*
@media (max-width: 400px) {
    section, .section {height:366px;}
    div#intro {height:100vh}
    ul.onepage-pagination {
        right:10px;
        top:40px;
        z-index:10;
    }
}
*/




.viewing-page-2 ul.onepage-pagination li a span,
.viewing-page-3 ul.onepage-pagination li a span,
.viewing-page-7 ul.onepage-pagination li a span {background:rgba(0,0,0,0.15);}

.viewing-page-2 ul.onepage-pagination li a:hover span,
.viewing-page-3 ul.onepage-pagination li a:hover span,
.viewing-page-7 ul.onepage-pagination li a:hover span {background:rgba(0,0,0,0.3)}

.viewing-page-2 ul.onepage-pagination li a.active span,
.viewing-page-3 ul.onepage-pagination li a.active span,
.viewing-page-7 ul.onepage-pagination li a.active span {background:#009cff}

.viewing-page-2 #logo img.white,
.viewing-page-3 #logo img.white,
.viewing-page-7 #logo img.white {opacity:0;}

.viewing-page-2 #logo img.blue,
.viewing-page-3 #logo img.blue,
.viewing-page-7 #logo img.blue {opacity:1;}

.viewing-page-2 .share .trigger,
.viewing-page-3 .share .trigger,
.viewing-page-7 .share .trigger {color:#555;}

.viewing-page-2 #hop-on,
.viewing-page-3 #hop-on,
.viewing-page-7 #hop-on {color:#555; border:1px solid rgba(100,100,100,0.6);}

.viewing-page-2 a.arrow,
.viewing-page-3 a.arrow,
.viewing-page-7 a.arrow {background:url(../images/arrow-blue.svg) no-repeat left center; color:#009cff;}

.viewing-page-2 .share ul li a.facebook {background:url(../images/social-facebook.png) no-repeat left center;}
.viewing-page-2 .share ul li a.twitter {background:url(../images/social-twitter.png) no-repeat left center;}
.viewing-page-2 .share ul li a.linkedin {background:url(../images/social-linkedin.png) no-repeat left center;}
.viewing-page-2 .share ul li a.pinterest {background:url(../images/social-pinterest.png) no-repeat left center;}
.viewing-page-2 .share ul li a.tumblr {background:url(../images/social-tumblr.png) no-repeat left center;}
.viewing-page-2 .share ul li a.google {background:url(../images/social-google.png) no-repeat left center;}
.viewing-page-2 .share ul li a.mail {background:url(../images/social-email.svg) no-repeat left center;}

.viewing-page-3 .share ul li a.facebook {background:url(../images/social-facebook.png) no-repeat left center;}
.viewing-page-3 .share ul li a.twitter {background:url(../images/social-twitter.png) no-repeat left center;}
.viewing-page-3 .share ul li a.linkedin {background:url(../images/social-linkedin.png) no-repeat left center;}
.viewing-page-3 .share ul li a.pinterest {background:url(../images/social-pinterest.png) no-repeat left center;}
.viewing-page-3 .share ul li a.tumblr {background:url(../images/social-tumblr.png) no-repeat left center;}
.viewing-page-3 .share ul li a.google {background:url(../images/social-google.png) no-repeat left center;}
.viewing-page-3 .share ul li a.mail {background:url(../images/social-email.svg) no-repeat left center;}


.viewing-page-7 .share ul li a.facebook {background:url(../images/social-facebook.png) no-repeat left center;}
.viewing-page-7 .share ul li a.twitter {background:url(../images/social-twitter.png) no-repeat left center;}
.viewing-page-7 .share ul li a.linkedin {background:url(../images/social-linkedin.png) no-repeat left center;}
.viewing-page-7 .share ul li a.pinterest {background:url(../images/social-pinterest.png) no-repeat left center;}
.viewing-page-7 .share ul li a.tumblr {background:url(../images/social-tumblr.png) no-repeat left center;}
.viewing-page-7 .share ul li a.google {background:url(../images/social-google.png) no-repeat left center;}
.viewing-page-7 .share ul li a.mail {background:url(../images/social-email.svg) no-repeat left center;}

.viewing-page-1 .share ul li a span,
.viewing-page-3 .share ul li a span,
.viewing-page-6 .share ul li a span {color:#333;}


div.signup a {
	height:50px;
	line-height:50px;
	width:430px;
	text-align:center;
	background:#4ce07b;
	color:#fff;
	font-size:20px;
	font-weight:500;
/* 	text-transform:uppercase; */
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	display:inline-block;
    -moz-transition: all 0.2s ease-out;  
    -o-transition: all 0.2s ease-out;  
    -webkit-transition: all 0.2s ease-out;
    opacity:1;
    position:absolute;
    top:0;
    left:0;
	z-index:2;
}
div.signup a:hover {
	background:#45d472;
}
div.signup a.hidden {
	opacity:0;
}
div.signup input {
	border:none;
	outline:none;
	height:50px;
	line-height:50px;
	padding:0 18px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	background:#4ce07b;
	color:#fff;
	font-size:18px;
	font-weight:500;
	width:390px;
    -moz-transition: all 0.2s ease-out;  
    -o-transition: all 0.2s ease-out;  
    -webkit-transition: all 0.2s ease-out;	
    opacity:0;
}
input:invalid, textarea:invalid {
	outline:none;
	box-shadow:none;
}
div.signup form {
	position:relative;
	width:440px;
}
div.signup form.visible input {
	opacity:1;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	background:#fff;

	color:#333;
	font-size:18px;
	font-weight:500;
	width:390px;
}
div.signup button {
	background:url(../images/arrow.svg) no-repeat left center;
	opacity:0;
	border:none;
	width:40px;
	height:40px;
	position:absolute;
	top:5px;
	right:25px;
    -moz-transition: all 0.3s ease-out 0.1s;  
    -o-transition: all 0.3s ease-out 0.1s;  
    -webkit-transition: all 0.3s ease-out 0.1s;
    z-index:99;
}
div.signup form.visible button {
	opacity:1;
	right:10px;
}
div.signup form.visible button:hover {
	right:7px;
}

body.viewing-page-7 #share,
body.viewing-page-7 .share ul.networks {
    -moz-transition: all 0.3s ease-out 0.3s;  
    -o-transition: all 0.3s ease-out 0.3s;  
    -webkit-transition: all 0.3s ease-out 0.3s;
	opacity:1;
}

#subscribe h2 {
	font-size:32px;
	font-weight:300;
	margin-bottom:25px;
}
#subscribe p {
	margin-bottom:40px;
}

#subscribe img.watch {
	position:absolute;
	top:26%;
	right:250px;
    -moz-transition: all 0.8s ease-out;  
    -o-transition: all 0.8s ease-out;  
    -webkit-transition: all 0.8s ease-out;
    width:400px;
}
#subscribe div.signup input {
	background:#f7f7f7;
	height:70px;
	line-height:70px;
	padding:0 25px;
}
#subscribe div.signup button {
	top:15px;
}
#subscribe .wrap {
    -moz-transition: all 0.5s ease-out 0.1s;  
    -o-transition: all 0.5s ease-out 0.1s;  
    -webkit-transition: all 0.5s ease-out 0.1s;
}

label {
	cursor:default;
	font-size:16px;
	text-transform:uppercase;
	line-height:30px;
	float:left;
	display:inline-block;
	margin-right:40px;
	color:#aaa;
}
.elsewhere {
	position:absolute;
	bottom:62px;
	width:100%;
    -moz-transition: all 0.3s ease-out;  
    -o-transition: all 0.3s ease-out;  
    -webkit-transition: all 0.3s ease-out;
    z-index:101;
}
.footer .elsewhere {
	left:0;
}


.elsewhere a {
	margin-right:30px;
	opacity:0.4;
    -moz-transition: all 0.2s ease-out;  
    -o-transition: all 0.2s ease-out;  
    -webkit-transition: all 0.2s ease-out;	
    line-height:30px;
    height:30px;
}
.elsewhere .flush-right a {
	line-height:30px;
	display:inline-block;
	height:30px;
	float:left;
}
.elsewhere a.arrow {
	float:left;
	margin-right:60px;
}
.footer .elsewhere a.arrow {
	width:1px;
	margin-left:-100px;
	opacity:0;
}

.elsewhere a.arrow span {
	opacity:1;
}
.elsewhere a:hover {
	opacity:1;
}

footer {
	padding:80px 0 0;
	text-align:left;
}
.footer #subscribe img.watch {
	top:60%;
}
.footer #subscribe .wrap {
	top:65%;
}

footer p {
	color:#eee;
	font-size:16px;	
	line-height:24px;
}
footer .col1 {
	width:30%;
	float:left;
}
footer .col2 {
	width:60%;
	float:right;
}
footer h3 {
	font-size:16px;
	text-transform:uppercase;
	line-height:30px;
	color:#aaa;
	font-weight:300;
	margin:0 0 20px;
}

.end {
	background:#1d1d1d;
	clear:both;
	display:block;
	margin-top:80px;
	height:80px;
	line-height:80px;
}
.end label {
	line-height:80px;
	height:80px;
}
footer .end p {
	line-height:80px;
	height:80px;
	font-size:14px;
}
.end .left,
.end .right {
	height:80px;
	overflow:hidden;
}
.end .left a {
	display:inline-block;
	height:30px;
	width:30px;
	text-align:center;
	line-height:30px;
	margin:30px 0 -5px;
	margin-right:10px;
	opacity:0.5;
    -moz-transition: all 0.2s ease-out;  
    -o-transition: all 0.2s ease-out;  
    -webkit-transition: all 0.2s ease-out;	
}
.end .left a:hover {
	opacity:1;
}

.col2 p {
	width:40%;
	margin-right:10%;
	float:left;
	font-size:14px;
	font-style:italic;
}
.col2 span {
	display:block;
	font-size:12px;
	opacity:0.4;
	font-style:normal;
}

.empty {
	clear:both;
	display:block;
}

.left {
	float:left;
}
.right {
	float:right;
}

#phone {
	width:420px;
	height:626px;
	position:fixed;
	top:20%;
	left:30%;
	z-index:-1;
	background:url(../images/iphone.png) no-repeat left center;
	opacity:0;
    -moz-transition: all 0.5s ease-out;  
    -o-transition: all 0.5s ease-out;  
    -webkit-transition: all 0.5s ease-out;	
}
body.viewing-page-3 #phone {
    -moz-transition: all 0.5s ease-out 0.5s;  
    -o-transition: all 0.5s ease-out 0.5s;  
    -webkit-transition: all 0.5s ease-out 0.5s;	
}
body.viewing-page-6 #phone {
    -moz-transition: all 0.5s ease-out 0.6s;  
    -o-transition: all 0.5s ease-out 0.6s;  
    -webkit-transition: all 0.5s ease-out 0.6s;	
}
body.viewing-page-7 #phone {
    top:-400px;	
}
body.viewing-page-1 #phone {
    top:70%;	
}
#phone img {
	position:absolute;
	top: 76px;
	left: 81px;
	opacity:0;
    -moz-transition: all 0.5s ease-out;  
    -o-transition: all 0.5s ease-out;  
    -webkit-transition: all 0.5s ease-out;
}

body.viewing-page-3 #phone,
body.viewing-page-4 #phone,
body.viewing-page-5 #phone,
body.viewing-page-6 #phone {
	opacity:1;
	z-index:999;
	top:20%;
}

body.viewing-page-3 #phone .onboarding {opacity:1;}
body.viewing-page-4 #phone .set-reminder {opacity:1;}
body.viewing-page-5 #phone .complete {opacity:1;}
body.viewing-page-6 #phone .statistics {opacity:1;}

.mce_inline_error {
	color: #d43c3f;
	padding-top: 20px;
	font-weight: 400;
	font-size: 16px;
}
div.mce_inline_error {
}
input.mce_inline_error {
	color: #d43c3f !important;	
}

#mce-success-response {
	color: #4ce07b;
	padding-top: 20px;
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
}
#mce-error-response {
	color: #d43c3f;
	padding-top: 20px;
	font-weight: 400;
	font-size: 16px;
}

#hero #mce-success-response {
  padding: 20px 25px;
  color: #fff;
  background: #4ce07b;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  margin-top: -10px;
  width: 390px;
  z-index: 100;
  position: absolute;
  top: 10px;
  left: 0;
}
#hero #mce-error-response,
#hero div.signup div.mce_inline_error {
  padding: 10px 0;
  color: #fff;
  font-style: italic;
  opacity: 0.5;
  background: transparent;
  margin-top: 10px;
  width: auto;
  z-index: -1;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

}
.response div.signup a {
	display:none !important;
}



#iform {
	width: 460px;
  height: 150px;
  
}
div.signup #mce-responses .response a {display:none;}


@media only screen and (max-width: 92em) { /* max-width 1024px */ 

	#phone {left:26%;}
	.hero-img {
		width:260px;
		top: -240px;
		right: 180px;
	}
	#subscribe img.watch {
		right: 150px;
	}
	.section .phone span {
		margin-top:170px;
	}
	
	body.viewing-page-3 #phone, body.viewing-page-4 #phone, body.viewing-page-5 #phone, body.viewing-page-6 #phone {top:16%}
		
}
@media only screen and (max-width: 88em) { /* max-width 1024px */ 
	body.viewing-page-3 #phone, body.viewing-page-4 #phone, body.viewing-page-5 #phone, body.viewing-page-6 #phone {top:20%}

}

@media only screen and (max-width: 82em) { /* max-width 1024px */ 

	#phone {left:22%;}
	.hero-img {
		width:220px;
		top: -220px;
		right: 180px;
	}

	
}
@media only screen and (max-width: 64em) { /* max-width 1024px */ 

header {
	position:absolute;
}

	#phone {display:none;}
	section, .section {position:relative;}
	#intro {height:600px;}
		#intro .backdrop  {opacity:1;}
		.section .phone img {opacity:1; margin-top:30px; width:360px}
		#how2 {background:#dd3c43;}
		#how3 {background:#13df81;}
		#how4 {background:#009cff;}
		.elsewhere a.arrow {display:none;}
		.section .phone span {margin-top:180px;}
/* 	body.viewing-page-3 #phone, body.viewing-page-4 #phone, body.viewing-page-5 #phone, body.viewing-page-6 #phone {top:30%;} */
	.hero-img {width:270px; top:-180px; right:100px;
	    -ms-transform: rotate(10deg); /* IE 9 */
	    -webkit-transform: rotate(10deg); /* Safari */
	    transform: rotate(10deg);
	}
	#hero p {max-width:500px;}
	#subscribe img.watch {top:20%; right:-90px;}
	p {max-width: 700px;}
	#subscribe {height:600px;}

#share-mobile {display:block; position:fixed; right:0; top:150px; opacity:1; z-index:99;}
#share-mobile ul.networks {opacity:1; float:none;}
#share-mobile ul li {opacity:1; float:none; margin:2px 0;}
#share-mobile ul li a {opacity:1; width:50px; height:50px; line-height:50px; }
#share-mobile ul li a.facebook,
#share-mobile ul li a.twitter,
#share-mobile ul li a.linkedin,
#share-mobile ul li a.google,
#share-mobile ul li a.mail {background-position:center center;}
#share-mobile ul li.item5 {background:#375b9e}
#share-mobile ul li.item4 {background:#00aadf}
#share-mobile ul li.item3 {background:#007bb4}
#share-mobile ul li.item2 {background:#e45144}
#share-mobile ul li.item1 {background:#777}
#share-mobile .trigger, #hop-on {display:none;}
#share-mobile ul li a:hover {
	margin-top:0;
/* 	width:60px; */
}
#navigation {display:none;}

}

@media only screen and (max-width: 770px) { /* max-width 1024px */ 

}


@media only screen and (max-width: 48em) { /* max-width 640px */


#logo {
	  float: none;
  margin: 20px auto 0;
  position: relative;
  width: 100px;
  height: 30px;
  display: block;
}
#share-mobile {top:250px;}

	body.viewing-page-4 {background-color:#dd3c43;}
	body.viewing-page-5 {background-color:#13df81;}
	body.viewing-page-6 {background-color:#009cff;}
	body.viewing-page-7 {background-color:#fff;}
	#phone {left:23%;}
	div.wrap {top: 16%;
	  -webkit-transform: translateY(0);
	  -moz-transform: translateY(0);
	  transform: translateY(0);
	}
	.hero-img {
	width: 200px;
	  top: 350px;
	  right: 260px;
	}
	#hero h1 {max-width:400px; text-align:center; margin:0 auto 30px;}
	#hero p {max-width:500px; text-align:center; margin:0 auto 30px;}
	div.signup form {margin:0 auto;}
	
	body.viewing-page-3 #phone, body.viewing-page-4 #phone, body.viewing-page-5 #phone, body.viewing-page-6 #phone {top: 47%;
	  left: 23%;}
	.section .phone img {opacity:1; margin-bottom:30px; float:none;}
	.section .phone {width:auto; padding:0 160px; text-align:center;}
	
	.section .phone span {margin-top:0px;}
	#subscribe {position:relative;}
	#subscribe .form {margin:0 auto; text-align:center;}
	
	#subscribe img.watch {
	  top: auto;
	  position: relative;
	  right: auto;
	  width: 320px;
	  margin: 110px auto 20px;
	}
	#subscribe .wrap {top:5%;}
	.elsewhere a.arrow {display:none;}
	
	
	header {
	/* background: #009cff; */
	  padding: 30px 0 20px;
	  top: 0;
	}
	footer .col1 {
		width:45%;
	}
	footer .col2 {
		width:50%;
	}
	.col2 p {
		width:100%;
		margin-bottom:30px;
	}
	.footer #subscribe img.watch {
		opacity:0;
	}
	.footer .elsewhere a.arrow {
		width:auto;
		margin-left:0;
		opacity:1;
	}
	#how1 {background:#fff;}
	#how2 {background:#dd3c43;}
	#how3 {background:#13df81;}
	#how4 {background:#009cff;}
	
	#intro {
  height: 400px;
}
#intro .backdrop {
	display:none;
}

/*
.section .phone {
	margin-top:-50px;
}
*/
.section .phone img {
	margin-top:0;
}
#subscribe {
	height:960px;
}
#hop-on {display:none;}


	
}

@media only screen and (max-width: 40em) { /* max-width 640px */
	


#share-mobile {right:auto; top:auto; left:0; bottom:-50px; width:100%; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease;	transition: all 0.3s ease;}
.scrolled #share-mobile {bottom:0;}
#share-mobile ul li {width:20%; float:left; margin:0; height:50px; line-height:50px;}

#intro p {
  font-size: 24px;
  line-height: 40px;
}
p {
	  font-size: 22px;
  line-height: 32px;
}
	.hero-img {
/* 		display:none; */
right:90px;
	}
	div.signup form {
		width:auto;
	}
	div.signup a {width:100%; font-size:18px;}
	div.signup input {width:100%; box-sizing:border-box;}
	div.signup form.visible input {width:100%; font-size:16px;}
	div.signup form.visible button {right:0;}
	#hero #mce-success-response {
		width:auto;
		top:0;
	}
	
	div.wrap {
		width:85%;
	}
	header {
		position:absolute;
	}
	section, .section {
		height:auto;
		padding:80px 0;
	}
	#hero {
		padding:150px 0 480px
	}
	#intro {height:auto; padding:80px 0 10px;}
	div.phone img {
/* 		display:none; */
	}
/*
	div.frame, div.frame img {
		display:block;
		max-width:100%;
		margin-top: -160px;
	}
*/
	.section .phone {
		padding:0;
		height:auto;
	}
	.section .phone img {
		margin:0 auto 30px;
		width:100%;
	}
	#subscribe img.watch {
		margin-top:0;
		width:240px;
	}
	#iform {width:100%;}
	#subscribe {height:740px;}
	.elsewhere label {width:100%; display:block; margin-bottom:15px;}
	.elsewhere a {margin-right:20px;}
	.elsewhere a img {height:25px;}
	footer {padding:50px 0 0;}
	footer .col1 {width:100%; margin-bottom:30px;}
	footer .col2 {width:100%;}
	.end .left, .end .right {height:auto; float:none; clear:both; margin:0;}
	.end {margin-top:20px; line-height:auto; height:auto; padding-bottom:50px;}
	footer .end p {line-height:auto;}
	#hero h1 {font-size:36px;}
	#hero p {  font-size: 26px;  line-height: 36px;}
	#hero {padding:120px 0 420px;}
	#hero h1 {display:none;}
	.hero-img {top:240px;}
  
}

@media only screen and (max-width: 22em) { /* max-width 640px */
	#hero {padding:120px 0 320px;}
	div.signup a {
  font-size: 16px;
  padding: 0 10px;
  margin-left: -10px;
  white-space: nowrap;
	}
	.hero-img {
  width: 140px;
  top: 190px;
	}
	#hero p {
  font-size: 18px;
  line-height: 26px;
  }
  #hero h1 {margin-bottom:20px;}
  #intro {padding:50px 0;}
  #intro p {font-size:22px; line-height:1.5;}
  #subscribe h2 {font-size:24px;}
  p {font-size:18px; line-height:1.5;}
/*   div.signup form.visible input {font-size:15px;} */
  #subscribe {padding-bottom:50px;}
/*   #subscribe div.signup button {display:none;} */
  .elsewhere {bottom:30px;}
  .elsewhere a {margin-right:15px;}
  .elsewhere a img {height:22px;}
  label {margin-right:30px;}
  footer .end p {line-height:50px;}
  .end {padding-bottom:70px;}
}

@media only screen and (min-width: 40.063em) { /* min-width 641px */ }

@media only screen and (min-width: 64.063em) { /* min-width 1025px */}

/*
@media only screen and (max-width: 1200px) {
	.row {padding:0 10px;}
}
*/