body {
	font-family: "Arial";
	font-size: 150%;
	background-color: lightgray;
}

header {
	background: url("images/oenagradient.png") no-repeat top;
	background-size: 600px;
}

.center {
	text-align: center;
}

.floating {
	background-color: white;
	padding: 20px;
	margin: 10px;
	box-shadow: 5px 5px 10px #666;
}

.promotion {
	width: 667px;
	height: 375px; 
	box-shadow: 5px 5px 20px #aaa;
	border-radius: 8px;
}

#main:before,
#main:after {
	content: " ";
	display: table;
}

#main:after {
	clear: both;
}

.left-side {
	float: left;
}

.right-side {
	float: right;
}

.text-side {
	width: calc(100% - 700px);
	height: 375px;
}

.image-side {
	width: 700px;
}

#download {
	width: 200px;
	height: auto;
}

@media screen and (max-width: 1200px) {
	body {
		font-size: 200%;
	}
	.text-side {
		width: 100%;
		height: inherit;
	}
	.image-side {
		display: inline-block;
		width: 100%;
	}
	.promotion {
		width: 100%;
		height: 100%;
	}
	.left-side {
		float: none;
	}
	.right-side {
		float: none;
	}
}

@media screen and (max-width: 700px) {
	body {
		font-size: 120%;
	}
}