/* CSS Document */
img {
	max-width: 100%;	
	display:block; 	
	width:auto;
	height:auto;
}

@media screen and (min-width: 50rem) {
	.IntroWrapper {
		display: table;
		table-layout: fixed;
		width: 100%;
	}
	
	.MoneyShot,
	.IntroText {
		display: table-cell;
		width: 50%;
		vertical-align: middle;
		text-align: center;
	}
	
	.IntroText {
		padding: .5rem;
		font-size: 2.5rem;
		text-align: left;
	}
	
	.Ingredients {
		font_size: .9rem;
		float: right;
		padding: 1rem;
		margin: 0 0 .5rem 1rem;
		border-radius: 3px;
		background-color:#ffffdf;
		border: 2px solid #e8cfa9;
	}
	
	.Ingredients h3 {
		margin: 0;
	}
}

body {
	background-color:grey;
}

@media screen and (min-width: 320px) {
	body {
		background-color:#C2FABC;
	}
}
@media screen and (min-width: 550px) {
	body {
		background-color:#EEC2A2;
	}
}
@media screen and (min-width: 768px) {
	body {
		background-color: #AFB0ED;
	}
}
@media screen and (min-width: 960px) {
	body {
		background-color: #FCBACB;
	}
}
@media (light-level:normal) {
	.Ingredients {
		background-color:#F33;
	}
}
@media (light-level:dim) {
	.Ingredients {
		background-color:green;
	}
}
@media (light-level:washed) {
	.Ingredients {
		background-color:red;
	}
}