* {border:0; padding:0; margin:0; 	font-weight:300;}
body {font-family: "franklin-gothic-urw",sans-serif;}
img {max-width:100% !important; height:auto;}


#langselect {
position:absolute;
top:0;
right:0;
font-size:0.7em;
z-index:1000;
}
.language-switch-suggest {
text-align:center;
background-color:#ffffdd;
border-bottom:2px #ffeeaa solid;
height:25px;
padding-top:4px;
}
.newhome header {
height:100px;
background:url(images/sky.png)
}
.newhome h1 {
    text-align:center; 
	margin-left:auto;
	margin-right:auto;
	font-size:50px;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0) 100%);
	padding:0.3em;
	padding-top:1em;
	padding-bottom:1em;
	color:white;
	text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
	vertical-align:middle;
}
h1.cityheader {
	font-size:50px;
}
h1.cityheader strong {
	 font-weight:500; padding-right:0.2em;
}
.newhome h1 strong {
    font-weight:500; 	vertical-align:middle; padding-right:0.2em;
}
.newhome h1 span,h1.cityheader span {
    vertical-align:middle;
}
.newhome h1 img,h1.cityheader img {
    vertical-align:middle;
}

video {
    width:100%; height:100%; position:absolute; bottom:0; left:0;
}

img.logo {
height:70px;
}


section {
	width:100%;
	height:550px;
	background-size:cover;
	background-position:50% 50%;
	position:relative;
	max-width:1600px;
	text-align:center;
	padding-top:100px;
	overflow:hidden;
}
@media only screen and (max-width: 480px) {
	section {height:550px;}
}

@media only screen and (min-height: 600px) {
	section {height:550px;}
}
@media only screen and (min-height: 700px) {
	section {height:650px;}
}
@media only screen and (min-height: 800px) {
	section {height:750px;}
}
@media only screen and (min-height: 900px) {
	section {height:850px;}
}
@media only screen and (min-height: 1000px) {
	section {height:950px;}
}
@media only screen and (min-height: 1100px) {
	section {height:1050px;}
}
@media only screen and (min-height: 1200px) {
	section {height:1150px;}
}
#splash2 {
	padding-top:0;
	background-image:url(/images/websitesplash.jpg);
	background-position:50% 35%;
}
#splash3 {
	background-image:url(/images/websitetaipei.jpg);
}
#splash4 {
	background-image:url(/images/websitelonely.jpg);
	background-position:100% 50%;
}
#splash5 {
	background-image:url(/images/websitecity.jpg);
	color:white;
}

#splash3 blockquote {
	float:left;
	width:400px;
	padding:20px;
	margin:0 20px 20px 20px;
	font-size:20px;
	background:rgba(255,255,255,0.7);
	position:relative;
}
#splash3 blockquote img {
	display:none;
}
.citewrapper {
	width:450px;
	margin:0 auto;
}

.quote {
	margin-left:auto;
	margin-right:auto;
	font-size:40px;
	text-align:center;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0) 100%);
	padding:0.3em;
	padding-top:1em;
	padding-bottom:1em;
	color:white;
	text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); 
}


.icons {text-align:center; margin-top:40px;}
.icons li {display:inline-block; height:120px; margin:0 10px;}
.icon {
	display:block;
	width:100px;
	height:100px; 
	background-color:black; 
	border-radius:20px; 
	background-image:url(images/logo/m.svg); 
	background-size:90px 90px; 
    color:white;
	background-repeat:no-repeat; background-position:50% 50%;     transition: all 0.2s ease; text-decoration:none;}
.icon:visited {
	color:white; text-decoration:none;
}
.icon span {display:block; padding-top:105px; text-align:center; white-space:pre;}
.icon:hover {
	 -webkit-transform: translate(0,-10px);
}
.icon.huge {
	 -webkit-transform: scale(20.0);
	background-image:none;
}


@media only screen and (max-width: 450px) {
	section {
		padding-top:50px;
	}
	#splash3 blockquote {
		box-sizing: border-box;
		width:100%;
		padding:20px;
		margin:0 0 20px 0;
		
	}
	.citewrapper {
		width:100%;
	}
	h1 {
	    font-size:40px;
	}
	.quote {
		font-size:30px;
	}
}
@media only screen and (max-width: 999px) {
	.icon {
		width:50px;
		height:50px;
		border-radius:10px;
		background-size:45px 45px;
	}
	.icon span {
		padding-top:55px;
		font-size:smaller;
	}
	h1 span {
	    display:block;
	}

}
@media only screen and (min-width: 1000px) {
	.citewrapper {width:1000px;}
	#splash3 blockquote {
		height:220px;
	}
	#splash3 blockquote img {
		display:block;
		position:absolute;
		bottom:0;
		left:0;
		right:0;
		bottom:20px;
		margin:0 auto;
	}
}


#city-sh {background-color:#0033CC;}
#city-bj {background-color:#D90000;}
#city-bk {background-color:#0FD6E6;}
#city-hk {background-color:#E38E38;}
#city-gz {background-color:#008100;}
#city-sg {background-color:#6633CC;}
#city-tp {background-color:#00B93D;}
#city-sl {background-color:#9635e6;}
#city-sz {background-color:#28abfe;}
#city-dl {background-color:#E64C0F;}

#popup-shanghai {background-color:#0033CC;}
#popup-beijing {background-color:#D90000;}
#popup-hk {background-color:#E38E38;}
#popup-guangzhou {background-color:#008100;}
#popup-singapore {background-color:#6633CC;}
#popup-taipei {background-color:#00B93D;}
#popup-seoul {background-color:#9635e6;}
#popup-shenzhen {background-color:#28abfe;}
#popup-delhi {background-color:#E64C0F;}
#popup-bangkok {background-color:#0FD6E6;}

footer {background-color:black; width:100%; clear:both;}
footer ul {display:block; color:white;}
footer li {display:inline-block; width:16%;  }
footer a {display:block; color:white; text-decoration:none;  padding:20px 0; text-align:center;}

aside {
	position:fixed; z-order:30000; top: 0;
  left: 0;
  height: 100%;
  width: 100%;
text-align:center; 
background:rgba(0,0,0,0.6);
display:none;
}
aside div {
	color:white;
	margin:auto;
	margin-top:150px;
	width:600px;
	height:230px;
	padding:25px;
	border-radius:50px;
	border:5px rgba(255,255,255,0.2) solid;
}
aside h2 {
	font-size:30px;
}
aside .appstore {
	padding-top:30px;
	display:inline-block;
}
aside .web {
	padding-top:30px;
	font-size:30px;	
}
aside .web a {
	color:white;
}

@media only screen and (max-width: 640px) {
	aside div {
	    width:260px;
	    height:320px;
	}
	aside h2,aside .web  {
    	font-size:20px;
    }


}

/* ------------------------------------------------ */
/* ------------------- general page styles--------- */
/* ------------------------------------------------ */

#content ul {
margin-left:20px;
}
#content p,#content ul,#content h1,#content h2,#content h3 {
margin-top:0.8em;
margin-bottom:0.5em;
}
#content ul li {
padding-left:5px;
margin-bottom:5px;
list-style-type:square;
}
#content ol li {
padding-left:5px;
margin-left:20px;
margin-bottom:5px;
}
#content h1 {
margin-left:-30em;
padding-left:30em;
padding-top:4px;
padding-bottom:4px;
font-size:x-large;
margin-top:0 !important;
}
#content h2,#content h3 {
clear:left;
}


/* ------------------------------------------------ */
/* ------------------- homepage           --------- */
/* ------------------------------------------------ */

/*
.page- #content {
padding:0 20px 20px 20px;
border-style:solid;
border-width:1px;
margin-bottom:20px;
}
*/
.about  {
padding:15px; 
height:300px;
margin:15px;
}

.about .us {
margin-top:70px;
}
.about .us .main {
font-size:x-large;
margin-bottom:10px;
}
.about .us .extra {
font-size:large;
}

.about img {
float:right;
padding-left:20px;
}
/* ------------------------------------------------ */
/* ------------------- sites      ----------------- */
/* ------------------------------------------------ */

#sites {
clear:both;
}
#sites a {border-left:5px white solid; display:block; margin-left:50px; text-align:left; padding-left:20px;}
#sites p {margin:20px 0;}


/* ------------------------------------------------ */
/* ------------------- two column ----------------- */
/* ------------------------------------------------ */


.fs .first,.fs .second {
width:455px;
float:left;
}
.fs .second {
margin-left:20px;
}

.page-iphone .fs .first {
width:500px;
}
.page-iphone .fs .second {
width:360px;
padding-left:50px;
}
/* ------------------------------------------------ */
/* ------------------- ertising----------------- */
/* ------------------------------------------------ */
input,select,textarea {
border:1px #999 inset;
padding:2px;
}
input:focus,select:focus,textarea:focus {
background-color:#ffc;
}
input.submit {
border: 1px #999 outset !important;
}

label {
font-size:smaller;
font-weight:500;
}


/* ------------------------------------------------ */
/* ------------------- unsorted    ---------------- */
/* ------------------------------------------------ */

.illustration {
float:right;
padding-left:20px;
}
.tagline {
font-size:larger;
line-height:130%;
}
.itsybitsyteenyweeny {
font-size:xx-small;
color:#999;
text-align:center;
margin-bottom:30px;
}
.downloadbtn {
font-size:x-large;
}
.newfeature {

}
.newfeature a {
    display:block;
    background:#D92131 url(/images/download.png) no-repeat 8px 15px;
    padding:12px;
    padding-left:70px;
    border:2px outset #C12;
    color:white;
    text-decoration:none;
}
.newfeature a:hover {
    background-color:#E33;
}
.newfeature a:active {
    border:1px inset #C12;
}
.newfeature .dl {
    font-weight:500;
    font-size:1.6em;
}
.newfeature .ap,  {
    font-size:1.2em;
    font-weight:500;
}
.newfeature .cov {
    font-size:0.9em;
    font-style:italic;
}
.comparison {
text-align:center;
width:100%;
margin-top:20px;
border-top:2px #ddd solid;
}
.comparison .names td {
padding:15px 0 10px;
font-weight:500;
font-size:1.5em;
}

.appstorebadge {
margin-top:30px;
}
.comparison .icon {
display:none;
}
.screenshots td {
position:relative;
height:380px;
width:200px;
vertical-align:top;
text-align:left;
padding-top:56px;
padding-left:89px;
background:url(images/iphone/iphonebg.png) no-repeat 70px 0;
}
.screenshots td img {

}
.salebadge {
position:absolute;
margin-top:0;
margin-left:120px;
}
.badgedesc {
font-size:x-large;
margin-left:-120px;

}
.badgedesc img {
padding-right:7px;
vertical-align:middle;
}
.cityapps {margin:0; padding:0; border-top: 1px dashed #ccc; padding-top:5px}
.cityapps li{font-size:1.6em; font-weight:500; list-style-type:none; margin:0; padding:0; height:55px; display:block; 
	border-bottom: 1px dashed #ccc; margin-bottom: 5px; }
.cityapps li a {display:block; height:55px; text-decoration:none;}
.cityapps img {vertical-align:middle; margin-right: 15px;}

#iphone-screenshot {
margin-left:50px;
width:400px;
height:820px;
background:url(images/iphone5.png) no-repeat;
}
#iphone-screenshot a {
padding-left:40px;
padding-top:116px;
}
#iphone-screenshot img {
width:320px;
}
#iphonebannernew {
    display:relative;
    margin-top:-12px;
    margin-left:-6px;
}
.testimonial {
color:#666;
margin-top: 30px;
text-align:justify;
background: url(/images/quoteleft.png) top left no-repeat;
padding-bottom: 55px;
min-height: 170px;
padding-right: 30px;
margin-left: 90px;
}
.testimonial .text {
display: block;
padding-top: 6px;
padding-left: 35px;
padding-right: 35px;
line-height: 140%;
margin-bottom: 10px;
background: url(/images/quoteright.png) bottom right no-repeat;
}
@media only screen and (min-width: 921px) {
    .android-tri1 {
        width:320px; float:left; margin-left:-30px;
    }
    .android-tri2 {
        float:left; width:360px;
    }
    .android-tri3 {
        width:300px; float:left;
    }
}
@media only screen and (max-width: 920px) {
    /* layout*/
    .emwrapper {width:auto;}
    #content {padding:10px;margin-top:50px;}
    #iphone-screenshot {margin-left:0;}
    .fs .first,.fs .second {width:auto !important; float:none !important}
    /* header and footer*/
    #header h1 {float:none; margin-left:0;margin-right:auto; width:196px;}
    .itsybitsyteenyweeny  {display:none;}
    #footerouter {display:none;}
    #header #navigation {display:block; float:none; clear:left;}
    #header #navigation li {width:16%; font-size:smaller; height:30px; margin:0; background-color:#D92131 !important; color:white !important; outline-right:2px white solid;}
    #header #navigation li a {height:30px; background-color:#D92131 !important; color:white;}

    /* page tweaks */
    .about .us {margin-top:0;}
    #screenshot {width:200px; display:none; float:none; padding-bottom:0}
    
    #sites a {margin-left:0; padding-left:0;}
    .page-iphone tr.screenshots {display:none;}
    .page-iphone tr.screenshots {display:none;}
    .comparison {display:list;}
    .comparison tr.names td{display:list-item; text-align:left; font-size:larger;list-style-type:none;padding-bottom:40px;}
    .comparison .icon {display:block; float:left; margin-right:10px; }
    .emwrapper h1 {display:none;}
    #header .emwrapper h1 {display:block;}
    #header img {height:45px; width:218px; margin-left:0;}
    .page-iphone .fs .second {
        padding-left:0;
    }
    .fs .second {
        margin-left:0;
    }
}