/*CSS DOCUMENT*/

body {
	font-family: sans-serif;
	line-height: 1.4em;
	color: #222;
	background-color: #fafafa;
	box-sizing: border-box;
	}
	
div.container {
        max-width: 40em;
        /* margin: 1em; */
        padding: 1em;
	/* UK- */
	display: flex;
	flex-direction: column;
	margin: 0 auto; 
}

section.order h3 {
	margin-top: 2em;
	margin-bottom: 0;
}

/* UK- make header span full width of flex container */
header {
	flex: 1 0 100%;
}


ul {
	/* UK- remove bullet points from menu items */
	list-style-type: none;
	padding: 0;
}

section.order ul, 
section.method ul{
	display: flex;
	flex-wrap: wrap;
}

/* UK- two column layout */
section.order li,
section.method li {
	/* flex: 0 0 50%; */
	flex: 0 0 19em;
}

/* UK- */
section.personal-info ul li {
	display: flex;
	flex-wrap: wrap;
	padding: 0 0 1.5em 0;
}

section.personal-info label {
	flex: 1 0 8em;
}

/* I have *some* selectors with their declarations in the declaration block. You’ll need more selectors and declaration blocks. */
section.personal-info ul li input[type="text"],
section ul li input[type="email"],
section ul li input[type="tel"],
section ul li select {
	flex: 3 0 24em;
	box-sizing: border-box;
}



section {
    background: #eee;
    padding: 1em;
    margin-bottom: 1em;
}

section p {
	margin-top: 0;
}

textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 6em;
	background: #fcfcfc;
	border: 1px solid #e8e8e8;
	padding: 0.4em;
	font-family: sans-serif;
	color: #777;
	}

/* You want to delete this line to make the media query work. Then you’ll only need one declaration block with one declaration in it. You got it, right? You know how to center the content on the page. */

/*
@media only screen and (min-width: 40em) {

  div.container {
    margin: 0 auto; 
  }

}
*/