/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0;padding:0;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
.pull-right{float: right;}
.pull-left{float: left;}
.clear{clear:both;}

html {
	height: 100%;
}


@font-face {
  font-family: 'frankfurter';
  src: url('../fonts/frankfurter.ttf');  
}
body{
	font-family: 'Lato', sans-serif;
	background:#fff;
	height: 100%;
}

a {
	text-decoration: none;
}

a:link {
  color: #008dde; }

a:visited {
  color: #0066a1; }

a:hover, a:focus, a:active {
  text-decoration: none; }


 
section {
	background:#fff;
	padding:5% 0;
	width:90%;
	margin:0 auto;
	-moz-transition:all .2s linear;
	-webkit-transition:all .2s linear; 
	-o-transition:all .2s linear; 
	-ms-transition:all .2s linear;
}

section h2 { 
	color:#000;
	font-size:2.6em;
	text-align:center;
	font-weight:300;
	margin-bottom: 10px;
	text-shadow: -1px 0px 0px #868585;
	-webkit-text-shadow: -1px 0px 0px #868585;
	-moz-text-shadow: -1px 0px 0px #868585;
	-o-text-shadow: -1px 0px 0px #868585;
}

.announcement {
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  padding: 20px 0;
  z-index: 99;
  color: #333;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.8);
} 

/* header */
section.header {
	color: #373737;
	position: relative; 
	width: 100%;
	padding: 0;
	background: url(../img/header_bg.jpg) no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center;
	background-size: 100% 100%;
}


.header-left {
	float: left;
	width: 42.5%;
	padding-top: 106px;
}

.header-left span {
	width: 492px;
	height: 564px;
	display: block;
	background: url(../img/hand.png) no-repeat;
	float: right;
}

.header-right {
	float: right;
	width: 54.5%;
	margin-top: 12%;
}
.header-right h1 span {
	font-family: "frankfurter";
	letter-spacing: 5px;
	font-size: 300%;
	color: #fff;
	display: inline-block; 
	vertical-align: middle;
	padding: 8px 0 0 10px;
} 

.header-right h1 img {
	vertical-align:middle;
} 

.header-right h2 {
	color: #FFF;
	font-size: 2em;
	font-weight: 300;
	padding: 20px 0 ;
	text-align: left;
	text-shadow: -1px 0px 1px rgba(214, 214, 214, 0.59);
	-webkit-text-shadow: -1px 0px 1px rgba(214, 214, 214, 0.59);
	-moz-text-shadow: -1px 0px 1px rgba(214, 214, 214, 0.59);
	-o-text-shadow: -1px 0px 1px rgba(214, 214, 214, 0.59);
	line-height: 1.4em;
}


.download-buttons a {
	display: inline-block;
	width: 170px;
	height: 50px;
	border: 1px solid gray;
	border-radius: 7px;
}

 
.download-buttons a.google-play {
	margin-left: 20px;
	background: url(../img/btn_playstore_170x50.png) no-repeat;
}

.download-buttons a.appstore {
	background: url(../img/btn_appstore_170x50.png) no-repeat;
}

.download-buttons a.appstore:hover,
.download-buttons a.google-play:hover {
    background-position: 0 100%;
}
}

/*--content--*/  
.box1{
	margin-top:5%;
}
.col-1-3:first-child {
	 margin-left: 0;
}
.small-feature{
	width:30.8%;
	text-align:center;
}
.small-feature h3{
	color:#333;
	font-size:1.5em;
	font-weight:400;
	margin-bottom: 2%;
}
.small-feature p{
	color:#777;
	font-size:1em;
	line-height:1.5em;
}
.col-1-3{
	display: block;
	float: left;
	margin: 1% 0 1% 3.6%;
}


/* SOCIALS ICONS */
li.fb a span {
	height:40px;
	width:40px;
	display: block;
	background: url(../img/img-sprite.png)no-repeat -72px -7px #29C5F6;
	border-radius:20px;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	-o-border-radius:20px;
}
li.fb a span:hover{
	background: url(../img/img-sprite.png)no-repeat -72px -7px #17b5e7;
}
li.tw a span {
	height:40px;
	width:40px;
	display: block;
	background: url(../img/img-sprite.png)no-repeat -117px -6px #6788CE;
	border-radius:20px;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	-o-border-radius:20px;
}
li.tw a span:hover{
	background: url(../img/img-sprite.png)no-repeat -117px -6px #4d72c1;
}
li.dribble a span {
	height:40px;
	width:40px;
	display: block;
	background: url(../img/img-sprite.png)no-repeat -44px -46px #F85993;
	border-radius:20px;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	-o-border-radius:20px;
}
li.dribble a span:hover{
	background: url(../img/img-sprite.png)no-repeat -44px -46px #e9407e;
}
li.github a span {
	height:40px;
	width:40px;
	display: block;
	background: url(../img/img-sprite.png)no-repeat 2px -46px #4582ca;
	border-radius:20px;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	-o-border-radius:20px;
}
li.github a span:hover{
	background: url(../img/img-sprite.png)no-repeat 2px -46px #306db6;
}

li.tw1 a span {
	height: 32px;
	width: 32px;
	display: block;
	background: url(../img/img-sprite.png)no-repeat -100px -46px;
}
li.tw1 a span:hover{
	background: url(../img/img-sprite.png)no-repeat -100px -80px;
}
li.fb1 a span {
	height: 32px;
	width: 32px;
	display: block;
	background: url(../img/img-sprite.png)no-repeat -145px -46px;
}
li.fb1 a span:hover{
	background: url(../img/img-sprite.png)no-repeat -145px -80px;
}


/* Features */
.features {
    width: 100%;
    background: url(../img/screen_bg.png); 
	background-position: center; 
	text-align:center;
	position: relative; 
}
.features h2 {
	color: #fff !important;
	margin-bottom: 40px;
}
 
.features div.phone-container {
	position: relative;
} 
.features div.phone-container .phone {
	background: url(../img/phone.png) no-repeat;
	height: 540px;
	width: 800px;
	display: inline-block;
	position: relative;
	z-index: 10;
}
.features div.phone-container .viewport {
	position: absolute;
	overflow: hidden;
	height: 418px;
	width: 236px;
	top: 68px;
	left: 33px;
}
.features div.phone-container .viewport > img{
	width: 236px !important;
	height: 401px !important;
}
.features div.phone-container .phone-texts {
	display: inline-block;
	max-width: 450px;
	position: absolute;
	top: 184px;
	text-align: left;
	margin-left: 360px;
}
.features div.phone-container.reverse .phone-texts {
	right: 46%;
	margin-left: 0;
}
.features div.phone-container.reverse .phone {
	right: -310px;
	width: 330px;
}

.features div.phone-container .phone-texts h3 {
	text-align: left;
	color: white;
	margin-bottom: 20px;
	font-size: 1.8em;
}
.features div.phone-container .phone-texts p {
	color: gray;
	line-height: 1.6em;
	font-size: 1.4em;
}

.divider_90 {
	width: 90%;
	height: 4px;
	margin: 40px auto;
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.15)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.15) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.15) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.15) 100%);
	background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.15) 100%); 
}

/* TEAM */
.team ul{
	width: 100%;
	text-align: center;
}
.team ul li{
	display:inline-block;
	padding: 12px;
	color: white;
	margin-right:10px;
	text-align: left;
}
.team ul li img {
	width: 140px;
	height: 140px; 
	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-o-border-radius:50%;
	vertical-align:middle;
	float: left;
	-moz-box-shadow:0px 0px 2px #ccc;       
    -webkit-box-shadow:0px 0px 2px #ccc;       
    box-shadow:0px 0px 2px #ccc;   
}
.team ul li div.people {
	float: left;
	color: #444;
	padding-top: 40px;
	padding-left: 20px;
}

.team h4 {
	font-size: 1.3em;
	color: #000;
	font-weight: bold;
	margin-bottom: 5px;
}
.team .social {
	min-height: 50px;
	float:left;
}
.team .social ul li:first-child, ol li:first-child {
	margin:0;
}
.team .social ul li {
	display: inline-block; 
	padding: 12px 6px;
}

/* FOOTER */
.footer {
	padding: 0;
	margin: 0;
	width: 100%;
}
.footer ul{
	border-top: 1px solid #ccc;
	width: 100%;
	text-align: center;
	padding: 0;
	margin: 0;
}
.footer ul li{
	display:inline-block;
	padding: 12px;
	color: white;
}

/* responsiveness */
@media (max-width:1280px) {  
	.header-left span {
		width: 450px;
		height:515px;
		background-size: 100%;
	}
}
@media (max-width:1024px){  
	.header-left span {
		width: 372px;
		height: 426px;
		background-size: 100%;
	}
	.header-right h1 span {
		font-size: 3em;
	}
	.header-right h2 {
		font-size: 1.6em;
	}
	section h2 {
		font-size: 2.2em;
	}
	.features div.phone-container .phone {
		width: 720px;
	}
	.features div.phone-container .phone-texts {
		right: 5%;
		max-width: 400px;
	}
	.features div.phone-container.reverse .phone-texts {
		right: 45%;
		left: 8%;
	}
	.features div.phone-container.reverse .phone {
		right: -220px;
	}
}
@media (max-width:800px){ 
	.header-left {
		padding-top:9%;
	}
	.header-left span {
		width: 293px;
		height: 335px;
		background-size: 100%;
	}
	.header-right h1 span {
		font-size: 2.8em;
	}
	.header-right h2 {
		font-size: 1.4em;
	}
	section h2  {
		font-size:2em;
	}
	.small-feature h3 {
		font-size: 1.1em;
	}
	.small-feature p {
		font-size: 0.85em;
	}
}
@media (max-width:768px){ 
	section.header {
		-webkit-background-size: initial !important;
		-moz-background-size: initial !important;
		-o-background-size: initial !important;
		background-size: initial !important;
		background-position: bottom bottom;
	}
	.header-left span {
		width: 280px;
		height: 320px;
		background-size: 100%;
	}
	.header-right h1 span {
		font-size: 2.8em;
	}
	.header-right h2 {
		font-size: 1.4em;
	} 
	section h2  {
		font-size:2em;
	}
	.small-feature h3 {
		font-size: 1.1em;
	}
	.small-feature p {
		font-size: 0.85em;
	}
	.header-right p {
		font-size: 0.9em;
	}
	.header-right {
		margin-top: 10%;
	}


	.download-buttons {
		margin-top: 20px;
		display: block;
		padding-bottom: 20px;
	}
	.download-buttons a{
		margin: 10px auto !important;
	}

	.features h2 {
		display: none;
	}

	.features div.phone-container.reverse .phone,
	.features div.phone-container .phone {
		display: block;
		margin: 20px auto;
		background-position: center center !important;
		right: inherit;
		width: 100%;
	}
	.features div.phone-container .viewport {
		left: 50%;
		margin-left: -118px !important;
	}
	.features div.phone-container .phone-texts {
		display: block;
		width: 90% !important;
		max-width: 90%;
		margin:auto;
		position: initial;
		text-align: center;
	}

	.features div.phone-container.reverse .phone-texts {
		margin-left: auto;
	}

	.features div.phone-container .phone-texts h3 {
		text-align: center;
	}
	.features div.phone-container .phone-texts p {
		font-size: 0.95em !important;
	}

}
@media (max-width:640px){ 
	.get-the-app {
		display: none;
	}
	.header-right h1 {
		padding-top: 20px;
	}

	.header-left{
		display:none;
	}

	.header-right h2 {
		text-align: center;
	}
	.header-right h2 {
		text-align: center;
	}
	section h2 {
		font-size:2em;
	}
	.small-feature h3 {
		font-size: 1.1em;
	}
	.small-feature p {
		font-size: 0.85em;
	}
	.header-right p {
		display: none;
	}
	.header-right {
		margin-top:0%;
		float: none;
		width: 100%;
		text-align: center;
	}
	.header-left {
		float: none;
		width: 100%;
		padding-top: 0;
	}
	.header {
		min-height: 495px;
        background-size: 100% 100%;
	}
	.header-right p {
		width:200px;
		height:356px;
		background-size: 100%;
		margin: 0 auto;
		display: block;
		background: url(../img/app_device1.png);
	}
	.col-1-3 {
		float: none;
		margin: 1% 0 1% 0%;
	}
	.small-feature {
		width: 100%;
	}
	.span_1_of_2 {
		width: 100%;
	}
	.col_1_of_2 {
		float:none;
		margin:0;
	}
}
@media (max-width:480px){ 
	section h2  {
		font-size:1.5em;
	}
	.header-right h2 {
		text-align: center;
	}

	.team .social ul li {
		display: inline-block;
		width: 20px;
		padding: 12px;
	}
	.team ul li {
		width: 100%;
		text-align: center;
		padding: 12px 0;
	}
	.team ul li div,
	.team ul li img {
		float:none !important;
		text-align: center;
	}
	.team ul li div.people { 
		padding-left: 0;
		padding-top: 20px;
	}


	.small-feature h3 {
		font-size: 1.1em;
	}
	.small-feature p {
		font-size: 0.85em;
	}
	.header-right {
		margin-top:0%;
		float: none;
		width: 100%;
		text-align: center;
	}
	.header-left {
		float: none;
		width: 100%;
		padding-top: 0;
	}
	.header {
		min-height:390px;
        background-size: 100% 100%;
	}
	.header-right p {
		width:150px;
		height:267px;
		background-size: 100%;
		margin: 0 auto;
		display: block;
		background: url(../img/app_device2.png);
	}
	.col-1-3 {
		float: none;
		margin: 1% 0 1% 0%;
	}
	.small-feature {
		width: 100%;
	}
}