@font-face {
	font-family: 'metropolisregular';
	src: url('../fonts/metropolis/metropolis-regular-webfont.woff2') format('woff2'),
		url('../fonts/metropolis/metropolis-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}

@-webkit-keyframes animate_background1 {
	0% {
		background-position: 0 30px;
	}

	100% {
		background-position: 257px 30px;
	}
}

@-moz-keyframes animate_background1 {
	0% {
		background-position: 0 30px;
	}

	100% {
		background-position: 257px 30px;
	}
}

@-ms-keyframes animate_background1 {
	0% {
		background-position: 0 30px;
	}

	100% {
		background-position: 257px 30px;
	}
}

@-o-keyframes animate_background1 {
	0% {
		background-position: 0 30px;
	}

	100% {
		background-position: 257px 30px;
	}
}

@keyframes animate_background1 {
	0% {
		background-position: 0 30px;
	}

	100% {
		background-position: 257px 30px;
	}
}

.float {
	position: fixed;
	width: 60px;
	height: 60px;
	bottom: 40px;
	right: 40px;
	background-color: #25d366;
	color: #FFF;
	border-radius: 50px;
	text-align: center;
	font-size: 30px;
	box-shadow: 2px 2px 3px #999;
	z-index: 100;
}

.my-float {
	margin-top: 16px;
}

@media (min-width: 978px) {
	.main {
		padding: 80px;
	}

	.running-mobile {
		display: none;
	}

	.running-desktop {}

	.background1 {
		position: absolute;
		top: 20px;
		right: 0;
		z-index: 10;
		width: 100% !important;
		max-width: 978px !important;
		height: 100% !important;
		background: url("../img/clouds.png");
		background-repeat: repeat-x;
		-webkit-animation: animate_background1 40s linear;
		-webkit-animation-iteration-count: infinite;
		-moz-animation: animate_background1 40s linear;
		-moz-animation-iteration-count: infinite;
		-ms-animation: animate_background1 40s linear;
		-ms-animation-iteration-count: infinite;
		-o-animation: animate_background1 40s linear;
		-o-animation-iteration-count: infinite;
		animation: animate_background1 40s linear;
		animation-iteration-count: infinite;
		opacity: 0.80;
		filter: alpha(opacity=80);
	}

	.download {
		z-index: 12;
		position: absolute;
		bottom: 50px;
		right: 30px;
	}

	.download-button {
		height: 70px;
	}
}


@media (max-width: 978px) {
	.main {
		padding: 20px;
	}

	.running-mobile {
		margin-top: 40px;
		max-width: 100%;
	}

	.running-desktop {
		display: none;
	}

	.background1 {
		top: 0px;
		right: 0;
		z-index: 10;
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		max-height: 100% !important;
		background: url("../img/clouds.png");
		background-repeat: repeat-x;
		-webkit-animation: animate_background1 40s linear;
		-webkit-animation-iteration-count: infinite;
		-moz-animation: animate_background1 40s linear;
		-moz-animation-iteration-count: infinite;
		-ms-animation: animate_background1 40s linear;
		-ms-animation-iteration-count: infinite;
		-o-animation: animate_background1 40s linear;
		-o-animation-iteration-count: infinite;
		animation: animate_background1 40s linear;
		animation-iteration-count: infinite;
		opacity: 0.80;
		filter: alpha(opacity=80);
	}

	.download {
		z-index: 12;
	}

	.download-button {
		width: 100%
	}
}