@import url(http://fonts.googleapis.com/css?family=Quicksand:700);

* {
	margin: 0;
	padding: 0;
}

/* Universal */

body {
	font-size: 16px;
	font-family: Quicksand, 'Lucida Grande', 'Verdana', 'Arial', sans-serif;
}

a {
	text-decoration: none;
}

img {
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
}

h1, h2, h3, dl, dt, dd, p {
	margin: 1em 0;
}

.Content {
	max-width: 940px;
	margin: 0 auto;
	padding: 0 20px;
	overflow: hidden;
}

.Panel {
	padding-top: 40px;
	height: 530px;
	background-color: #fff;
	text-align: center;
}
.Mockup {
	float: right;
	margin-right: -20px;
	background: url(/library/site/image/view-01.png) no-repeat 50% 0;
	-webkit-animation: fade 40s linear 0s infinite;
	        animation: fade 40s linear 0s infinite;
}
@-webkit-keyframes fade {
	  0% { background-image: url(/library/site/image/view-01.png); }
	 10% { background-image: url(/library/site/image/view-01.png); }
	 15% { background-image: url(/library/site/image/view-02.png); }
	 20% { background-image: url(/library/site/image/view-02.png); }
	 25% { background-image: url(/library/site/image/view-03.png); }
	 30% { background-image: url(/library/site/image/view-03.png); }
	 35% { background-image: url(/library/site/image/view-04.png); }
	 40% { background-image: url(/library/site/image/view-04.png); }
	 45% { background-image: url(/library/site/image/view-05.png); }
	 50% { background-image: url(/library/site/image/view-05.png); }
	 55% { background-image: url(/library/site/image/view-06.png); }
	 70% { background-image: url(/library/site/image/view-06.png); }
	 75% { background-image: url(/library/site/image/view-07.png); }
	 80% { background-image: url(/library/site/image/view-07.png); }
	 85% { background-image: url(/library/site/image/view-08.png); }
	 90% { background-image: url(/library/site/image/view-08.png); }
	 95% { background-image: url(/library/site/image/view-09.png); }
	100% { background-image: url(/library/site/image/view-09.png); }
}
@keyframes fade {
	  0% { background-image: url(/library/site/image/view-01.png); }
	 10% { background-image: url(/library/site/image/view-01.png); }
	 15% { background-image: url(/library/site/image/view-02.png); }
	 20% { background-image: url(/library/site/image/view-02.png); }
	 25% { background-image: url(/library/site/image/view-03.png); }
	 30% { background-image: url(/library/site/image/view-03.png); }
	 35% { background-image: url(/library/site/image/view-04.png); }
	 40% { background-image: url(/library/site/image/view-04.png); }
	 45% { background-image: url(/library/site/image/view-05.png); }
	 50% { background-image: url(/library/site/image/view-05.png); }
	 55% { background-image: url(/library/site/image/view-06.png); }
	 70% { background-image: url(/library/site/image/view-06.png); }
	 75% { background-image: url(/library/site/image/view-07.png); }
	 80% { background-image: url(/library/site/image/view-07.png); }
	 85% { background-image: url(/library/site/image/view-08.png); }
	 90% { background-image: url(/library/site/image/view-08.png); }
	 95% { background-image: url(/library/site/image/view-09.png); }
	100% { background-image: url(/library/site/image/view-09.png); }
}

.Billboard {
	float: left;
	width: 450px;
	margin-right: -100px;
}
.Balloon li:nth-child(1) {
	float: none;
}
.Balloon li:nth-child(3) {
	top: -5px;
}

.Logo {
	margin-bottom: 10px;
}
.Balloon {
	padding: 0;
	overflow: hidden;
}
.Balloon li {
	display: inline-block;
	margin-bottom: 15px;
	padding: 10px 24px;
	position: relative;
	background-color: #f7f7f7;
	color: #f69;
	font-size: 11px;
	line-height: 14px;
	border-radius: 30px;
}
.Balloon li:before,
.Balloon li:after {
	content: "";
	display: block;
	border-style: solid;
	position: absolute;
	bottom: -10px;
}
.Balloon li:before {
	border-width: 0 0 10px 30px;
	border-color: transparent #fff;
	right: 50px;
}
.Balloon li:after {
	border-width: 0 0 10px 10px;
	border-color: transparent #f7f7f7;
	right: 70px;
}
.Balloon li:nth-child(2) {
	float: right;
}
.Balloon li:nth-child(3) {
	float: left;
}
.App {
	padding: 0;
	list-style-type: none;
}
.App li {
	display: inline;
	margin: 5px;
}
.AppStore {
	position: relative;
	top: -15px;
	background-color: #444;
	border-radius: 12px;
}
.Potty {
	float: left;
	position: relative;
	top: 10px;
	left: -10px;
}
.WalkingByHolding {
	float: left;
	position: relative;
	top: -10px;
}

.Promotion {
	margin-top: -40px;
	padding: 140px 0 60px;
	background-color: #91c2f2;
	color: #fff;
	font-weight: bold;
}
.Promotion dl {
	float: left;
	width: 46%;
	margin: 0 2%;
}
.Promotion dt {
	font-size: 24px;
}
.Social {
	padding: 60px 0;
	background-color: #f1f1f1;
	text-align: center;
}
.Social li {
	display: inline;
}
.Social a {
	display: inline-block;
	height: 44px;
	margin: 10px;
	padding: 0 25px 0 10px;
	border-radius: 24px;
	color: #fff;
	font-size: 14px;
	line-height: 44px;
}
.Social a img {
	float: left;
	margin: 5px 15px;
}
.Facebook {
	background: #5b7bb7;
	background: -webkit-gradient(linear, center top, center bottom, from(#5b7bb7), to(#516db2));
	background:	-moz-linear-gradient(center top, #5b7bb7, #516db2);
	background:		linear-gradient(#5b7bb7, #516db2);
	text-shadow: 0 -1px 1px #334680;
}
.Twitter {
	background: #80d4ff;
	background: -webkit-gradient(linear, center top, center bottom, from(#80d4ff), to(#4dc3ff));
	background:	-moz-linear-gradient(center top, #80d4ff, #4dc3ff);
	background:		linear-gradient(#80d4ff, #4dc3ff);
	text-shadow: 0 -1px 1px #1ab2ff;
}

.Banner {
	padding: 50px 0;
	background-color: #7a8a99;
	text-align: center;
}
.Banner li {
	float: left;
	width: 21%;
	padding: 2%;
	list-style-type: none;
}
.Banner a {
	display: inline-block;
	border: 4px solid #fff;
}

.Copyright {
	clear: both;
	margin: 18px auto;
	padding: 30px 0;
	text-align: center;
	color: #333;
}
.Copyright a {
	color: #333;
}

@media only screen and (max-width: 980px) {
	body {
		-webkit-text-size-adjust: none;
	}
	.Panel {
		height: auto;
		padding-top: 10px;
	}
	.Billboard {
		float: none;
		width: auto;
		margin: -80px -20px;
		padding: 80px 20px;
		background-color: #91c2f2;
	}
	.Balloon {
		margin-bottom: 30px;
	}
	.Balloon li:before {
		border-color: transparent #91c2f2;
	}
	.Balloon li:nth-child(3) {
		top: 0;
	}
	.Mockup {
		float: none;
		position: relative;
		margin: 0 auto;
		z-index: 999;
	}
	.Potty {
		top: 5px;
	}
	.WalkingByHolding {
		top: -5px;
	}
	.Promotion {
		margin-top: -100px;
		padding: 140px 0 30px;
		background-color: #79b6f2;
	}
	.Promotion .Content {
		clear: both;
	}
	.WalkingByHolding {
		float: right;
	}
}

@media only screen and (max-width: 600px) {
	.Mockup {
		width: 100%;
		background-size: 100%;
	}
	.Promotion dl {
		float: none;
		width: 100%;
		margin: 20px 0 40px;
	}
	.Promotion dt {
		font-size: 18px;
	}
	.Promotion dd {
		font-size: 13px;
	}
	.Banner li {
		width: 46%;
	}
}

@media only screen and (max-width: 320px) {
	.AppStore {
		position: static;
		margin-top: 10px;
	}
	.Potty {
		width: 40%;
	}
	.WalkingByHolding {
		right: -20px;
		width: 50%;
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.Mockup {
		background-image: url(/library/site/image/view-01@2x.png);
		background-size: 100%;
	}
	@-webkit-keyframes fade {
		  0% { background-image: url(/library/site/image/view-01@2x.png); }
		 10% { background-image: url(/library/site/image/view-01@2x.png); }
		 15% { background-image: url(/library/site/image/view-02@2x.png); }
		 20% { background-image: url(/library/site/image/view-02@2x.png); }
		 25% { background-image: url(/library/site/image/view-03@2x.png); }
		 30% { background-image: url(/library/site/image/view-03@2x.png); }
		 35% { background-image: url(/library/site/image/view-04@2x.png); }
		 40% { background-image: url(/library/site/image/view-04@2x.png); }
		 45% { background-image: url(/library/site/image/view-05@2x.png); }
		 50% { background-image: url(/library/site/image/view-05@2x.png); }
		 55% { background-image: url(/library/site/image/view-06@2x.png); }
		 70% { background-image: url(/library/site/image/view-06@2x.png); }
		 75% { background-image: url(/library/site/image/view-07@2x.png); }
		 80% { background-image: url(/library/site/image/view-07@2x.png); }
		 85% { background-image: url(/library/site/image/view-08@2x.png); }
		 90% { background-image: url(/library/site/image/view-08@2x.png); }
		 95% { background-image: url(/library/site/image/view-09@2x.png); }
		100% { background-image: url(/library/site/image/view-09@2x.png); }
	}
	@keyframes fade {
		  0% { background-image: url(/library/site/image/view-01@2x.png); }
		 10% { background-image: url(/library/site/image/view-01@2x.png); }
		 15% { background-image: url(/library/site/image/view-02@2x.png); }
		 20% { background-image: url(/library/site/image/view-02@2x.png); }
		 25% { background-image: url(/library/site/image/view-03@2x.png); }
		 30% { background-image: url(/library/site/image/view-03@2x.png); }
		 35% { background-image: url(/library/site/image/view-04@2x.png); }
		 40% { background-image: url(/library/site/image/view-04@2x.png); }
		 45% { background-image: url(/library/site/image/view-05@2x.png); }
		 50% { background-image: url(/library/site/image/view-05@2x.png); }
		 55% { background-image: url(/library/site/image/view-06@2x.png); }
		 70% { background-image: url(/library/site/image/view-06@2x.png); }
		 75% { background-image: url(/library/site/image/view-07@2x.png); }
		 80% { background-image: url(/library/site/image/view-07@2x.png); }
		 85% { background-image: url(/library/site/image/view-08@2x.png); }
		 90% { background-image: url(/library/site/image/view-08@2x.png); }
		 95% { background-image: url(/library/site/image/view-09@2x.png); }
		100% { background-image: url(/library/site/image/view-09@2x.png); }
	}
}