body,p,ul,li {
	padding: 0;
	margin: 0
}

body {
	font-family: verdana
}

ul,li {
	list-style: none
}

img {
	vertical-align: top
}

a {
	text-decoration: none
}

@keyframes circle {
	0,100% {
		transform: scale(1);
		opacity: 0
	}

	50% {
		transform: scale(1.2);
		opacity: 1
	}
}

@keyframes jump {
	0,100% {
		transform: translateY(0)
	}

	10%,90% {
		transform: translateY(10%)
	}
}

body {
	box-sizing: border-box
}

a {
	color: #000
}

h1 {
	font-weight: 400
}

h1 div {
	padding: 10px 0;
	font-size: 1rem;
}

.container {
	background-image: url(../images/background.jpg);
	background-color: #3dbbf5;
	background-repeat: no-repeat;
	background-size: cover;
	color: #000
}

.container:after {
	content: '';
	display: table;
	clear: both
}

.logo {
	display: inline-block;
	border-radius: 22%;
	max-width: 100px
}

.app {
	display: inline-block;
	border-radius: 5% / 18%;
	max-width: 380px
}

.right {
	position: relative
}

.animation-container {
	position: absolute;
	width: 100%;
	padding-top: 100%
}

.animation-container .circle {
	position: absolute;
	top: 0;
	width: 20%
}

.animation-container .circle .outer-border {
	border-radius: 50%;
	border: 1px solid #ff7f60;
	padding-top: 100%;
	opacity: .2;
	animation: circle 2s linear 0s infinite
}

.animation-container .circle .inner-circle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80%;
	padding-top: 80%;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 0 5px #dadada;
	transform: translateY(-50%) translateX(-50%)
}

.animation-container .heart {
	position: absolute;
	width: 15%;
	top: 5vh
}

.animation-container .heart .item1 {
	animation-delay: .05s
}

.animation-container .heart .item2 {
	animation-delay: .1s
}

.animation-container .heart .item3 {
	animation-delay: .15s
}

.animation-container .heart .item4 {
	animation-delay: .2s
}

.animation-container .heart .item5 {
	animation-delay: .25s
}

.animation-container .heart .item6 {
	animation-delay: .3s
}

.animation-container .heart .item7 {
	animation-delay: .35s
}

.animation-container .heart .item8 {
	animation-delay: .4s
}

.animation-container .heart .item9 {
	animation-delay: .45s
}

.animation-container .heart .item {
	width: 7%;
	float: left;
	position: relative;
	background: #ff613c;
	box-sizing: border-box;
	margin-right: 1%;
	margin-left: 1%;
	animation-name: jump;
	animation-duration: .9s;
	animation-timing-function: linear;
	animation-iteration-count: infinite
}

.animation-container .heart .item1,.animation-container .heart .item9 {
	margin-top: 5%;
	padding-top: 25%;
	border-radius: 50% / 20%
}

.animation-container .heart .item2,.animation-container .heart .item8 {
	padding-top: 40%;
	border-radius: 50% / 13%
}

.animation-container .heart .item3,.animation-container .heart .item7 {
	margin-top: -3%;
	padding-top: 50%;
	border-radius: 50% / 8%
}

.animation-container .heart .item4,.animation-container .heart .item5,.animation-container .heart .item6 {
	padding-top: 55%;
	border-radius: 50% / 7%
}

.animation-container .heart .item5 {
	top: 5px
}

.footer {
	font-size: 14px;
	text-align: center;
	padding: 10px 0
}

.footer li {
	display: inline-block;
	padding: 10px
}

@media (max-width:768px) {
	.container {
		background-image: url(../images/background-m.png);
		overflow: hidden;
		overflow-y: auto;
		position: relative;
		height: 51rem;
	}

	.left {
		padding: 15% 10px
	}

	.right,.left {
		text-align: center
	}

	h1 {
		font-size: 18px
	}

	.app {
		max-width: 260px;
		width: 80%
	}

	.right {
		overflow: hidden
	}

	.right img {
		position: relative;
		width: 90vw;
		left: 55vw;
		transform: translateX(-50%)
	}

	.animation-container {
		top: 34vw;
		left: 39%
	}

	.animation-container .heart {
		top: 5%;
		left: 4.5%
	}

	.animation-container .heart .item {
		width: 6%
	}

	.footer {
		position: absolute;
		bottom: 0;
		width: 100%
	}
}

@media (min-width:769px) {
	.container {
		overflow: hidden;
		height: 100vh
	}

	h1 {
		white-space: nowrap
	}

	.left {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 50%
	}

	.right {
		width: 50%;
		float: right;
		padding-top: 120px
	}

	.vertial-middle {
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%)
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%)
	}

	.right img {
		position: fixed;
		bottom: 8vw;
		height: 75vh;
		left: 42vw
	}

	.animation-container {
		position: fixed;
		top: 36vh;
		width: 60vh;
		transform: translateX(24%);
		padding-top: 50%
	}

	.animation-container .circle {
		width: 15vh
	}

	.animation-container .heart {
		left: 6.5%
	}
}

@media (max-width:1023px) and (min-width:769px) {
	h1 {
		width: 160%;
		white-space: normal
	}

	.logo {
		max-width: 80px
	}

	.app {
		border-radius: 12px;
		max-width: 200px
	}
}