* {
	box-sizing: border-box;
}

body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
}

#header {
	width: 99%;
	border: 1px solid;
	margin: 0.5% 0.5% 1% 0.5%;
}

#col1 {
	float: left;
	width: 200px;
	border: 1px solid;
	margin: 0 0.5% 0 0.5%;
}

#col2, #col3 {
	float: left;
	width: calc(48.5% - 100px);
	border: 1px solid;
	margin: 0 0.5% 0 0.5%;
}



@media only screen and (max-width: 800px) {
	#col2 {
		width: calc(98% - 200px);
		margin: 0.5% 0.5% 0.5% 0.5%;
	}
	#col3 {
		clear: both;
		margin: 0.5% 0.5% 0.5% 0.5%;
		width: 100%;
	}
}


@media only screen and (max-width: 570px) {
	body {
		font-size: 14px;
	}
	#header {
		width: 100%;
		margin: 0.5% 0 0.5% 0%;
	}
	#col1 {
		margin: 0.5% 0 0.5% 0%;
	}
	#col2, #col3 {
		margin: 0.5% 0 0.5% 0%;
		width: 100%;
	}
}