* {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

body {
	background: #fff;
}

#menu {
	background: #384047;
	height: 60px;
	padding: 0 5px 0;
	text-align: center;
}

ul {
	list-style: none;
}

ul li {
	display: inline-block;
	width: 84px;
	text-align: center;
}

ul li a {
	color: #fff;
	width: 100%;
	line-height: 60px;
	text-decoration: none;
}

ul li.selected {
	background: #fff;
}

ul li.selected a {
	color: #384047;
}

select {
	width: 94%;
	margin: 11px  0 11px 2%;
	float: left;
}

h1 {
	margin: 40px 0 10px;
	text-align: center;
	color: #384047;
}
p {
	text-align: center;
	color: #777;
}
/** Start Coding Here 

Modify CSS to hide links on small width and show button and select
Also hides select and button on larger width and show's links **/


@media (min-width: 320px) and (max-width: 568px) {
  #menu ul {
    display: none;
  }
}

@media (min-width: 568px) {
  #menu select, #menu button {
    display: none;
  }
}