<style>
ul {
  list-style-type: none;
  margin: auto;
  padding: 5px;
  width: 400px;
  background-color: #f1f1f1;
  border: 1px solid #555;
  font-size: 25px;
  line-height: 1.6;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li {
  text-align: center;
  border-bottom: 1px solid #555;
}

li:last-child {
  border-bottom: none;
}

li a.active {
  background-color: #04AA6D;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
@media screen and (min-width: 601px) {
	.lg-view{
		width:100%; margin:0 auto; /* size of banner, also centers the color background*/
		text-align:center; /*centers-text for all child elements!*/
		padding:0;
		font-weight:normal;
		background:  orange;
		text-shadow: 0 1px 0 #fff;
		padding: .5em 0 ;
		font-size:2.9vw;
		display:inline-block;		
	}
	.lg-view small {
		display:block; /* see you dont really need the br*/
		font-family:sans-serif; font-size:70%;
		margin: .125ex 0 0  0 ; /* determines space from site name, 1st # is the value for the space left at the top... 1ex=same space as the height of the  letter'x' ( might as well use good typography!)  */
		padding:3px;
	 }	 
	.sm-view{
	   display:none;
	}
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
  .sm-view {
	width:100%; margin:0 auto; /* size of banner, also centers the color background*/
	text-align:center; /*centers-text for all child elements!*/
	padding:0;
	font-weight:normal;
	background:  orange;
	text-shadow: 0 1px 0 #fff;
	padding: .5em 0 ;		
	font-size: 25px;
	display:inline-block;
  }
    .lg-view{
       display:none;
    }

}
</style>