html {
	background-color:	#f8f0d3;
}
body {
	background:			#f8f0d3 url("../images/background-mobile@2x.gif") 50% 0 / 600px 264px no-repeat;
	color:				#665c3d;
}
#page {
	position:			relative;
	margin:				0;
	padding:			40px 0 0 0;
}
#content {
	display:			flex;
	flex-direction:		column;
	align-items:		center;
}

a {
	color:				#49bfbf;
}
a:hover {
	text-decoration:	underline;
}
#footer a.en:lang(en),
#footer a.de:lang(de),
#footer a.ja:lang(ja) {
	color:				#665c3d;
	text-decoration:	none;
	cursor:				default;
}

#title {
	background:			url("../images/deliveries-icon-mobile@2x.png") 0 0 / 54px 54px no-repeat;
	width:				300px;
	margin:				0 auto;
	order:				1;
}
h1 {
	background:			url("../images/deliveries-en.svg") 60px 0 / 240px 54px no-repeat;
	display:			block;
	width:				300px;
	height:				54px;
	margin:				0;
	text-indent:		-9999px;
	overflow:			hidden;
}
h1:lang(de) {
	background-image:	url("../images/deliveries-de.svg");
}
h1:lang(ja) {
	background-image:	url("../images/deliveries-ja.svg");
}

p {
	text-align:			left;
	margin:				0 0 20px 0;
	color:				#4d452e;
}

#banner {
	background-color:	#49bfbf;
	color:				#000; /* #80724f */
	width:				calc(100% - 20px);
	margin:				0 0 0 0;
	text-align:			center;
	padding:			10px 10px;
	opacity:			0.85;
}
#banner a {
	color:				#fff;
}

#quotes {
	position:			relative;
	width:				calc(100vw - 60px);
	max-width:			300px;
	height:				calc(27vw - 16px);
	max-height:			80px;
	margin:				10px 0 15px 0;
	order:				3;
}
#quotes blockquote {
	margin:				0;
}
#quotes a {
	background:			url("../images/quote-1-mobile.svg") 0 0 / 100% no-repeat;
	display:			block;
	position:			absolute;
	top:				0;
	left:				0;
	width:				100%;
	height:				100%;
	text-indent:		-9999px;
	overflow:			hidden;
}

#copy {
	max-width:			300px;
	margin:				0;
	padding:			0 30px 10px 30px;
	order:				5;
}

#ios-screen {
	background:			url("../images/ios-screen-mobile-en@2x.png") 0 0 / 100% no-repeat;
	position:			relative;
	width:				350px;
	height:				390px;
	margin:				15px 0 5px 0;
	order:				2;
}
#ios-screen:lang(de) {
	background-image:	url("../images/ios-screen-mobile-de@2x.png");
}
#ios-screen:lang(ja) {
	background-image:	url("../images/ios-screen-mobile-ja@2x.png");
}
#ios-screen a {
	display:			block;
	position:			absolute;
	top:				0;
	left:				0;
	width:				100%;
	height:				100%;
	text-indent:		-9999px;
	overflow:			hidden;
}
#ios-screen a:hover, #ios-screen a:active {
	background:			none;
}

#mac-screen {
	background:			url("../images/mac-screen-mobile-en@2x.png") 0 0 / 100% no-repeat;
	position:			relative;
	width:				324px;
	height:				254px;
	margin:				0 0 10px 0;
	order:				4;
}
#mac-screen:lang(de) {
	background-image:	url("../images/mac-screen-mobile-de@2x.png");
}
#mac-screen:lang(ja) {
	background-image:	url("../images/mac-screen-mobile-ja@2x.png");
}
#mac-screen a  {
	display:			block;
	position:			absolute;
	top:				0;
	left:				0;
	width:				100%;
	height:				100%;
	text-indent:		-9999px;
	overflow:			hidden;
}

#footer {
	max-width:			300px;
	margin:				0 30px;
	padding:			0 0 40px 0px;
	border-top:			3px solid #665c3d;
	order:				6;
}

#badges {
	display:			flex;
	flex-direction:		column;
	margin:				20px 0 20px 0;
}
#badges a {
	display:			block;
	text-indent:		-9999px;
	overflow:			hidden;
}
#badges .ios a {
	background:			url("../images/ios-app-store-en.svg") 0 0 / 100% no-repeat;
	width:				147px;
	height:				49px;
	margin:				0 0 20px 0;
}
#badges .ios a:lang(de) {
	background-image:	url("../images/ios-app-store-de.svg");
}
#badges .ios a:lang(ja) {
	background-image:	url("../images/ios-app-store-ja.svg");
	height:				54px;
}
#badges .mac a {
	background:			url("../images/mac-app-store-en.svg") 0 0 / 100% no-repeat;
	width:				192px;
	height:				49px;
}
#badges .mac a:lang(de) {
	background-image:	url("../images/mac-app-store-de.svg");
}
#badges .mac a:lang(ja) {
	background-image:	url("../images/mac-app-store-ja.svg");
	width:				190px;
	height:				54px;
}

#junecloud {
	margin:				30px 0 15px 0;
}
#junecloud a {
	background:			url("../images/junecloud.svg") 0 0 / 100% no-repeat;
	display:			block;
	width:				220px;
	height:				32px;
	text-indent:		-9999px;
	overflow:			hidden;
}
#fine-print {
	clear:				both;
}

@media only screen and (max-width: 350px) {

	#title {
		width:				calc(100vw - 60px);
		margin:				0 30px;
	}
	h1 {
		width:				100%;
		background-position:60px 0;
		background-size:	calc(100vw - 120px) 54px;
	}
	#ios-screen {
		width:				calc(100vw - 20px);
		height:				calc(114vw - 23px);
	}
	#mac-screen {
		width:				calc(100vw - 40px);
		height:				calc(78vw - 31px);
	}

}