body {
	background-color: #f0f0f0;
	font-family: Arial, sans-serif;
}

#all {
	width: 80%;
	margin: 0 auto;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

#head {
	text-align: center;
	color:black;
	padding: 20px;
	background-color: #CCC;
	border-bottom: 2px solid #ccc;
}

#logo {
	width: 100px;
	vertical-align: middle;
}

.slogan {
	font-style: italic;
	color: #1C1C1C;
}

#nav {
	background-color: #E0FFFD;
	text-align: center;
	padding: 10px;
}

#nav a:link{
	margin: 0 15px;
	text-decoration: none;
	color: #0055aa;
	font-weight: bold;
}
#nav a:hover {
	color: #0055aa;
	text-decoration: underline;
}
#nav a:active{
	color:#red;
	text-decoration:underline;
}
#nav a:focus{
	color:#003366;
	text-decoration:underline;
}
#content {
	display: flex;
	flex-wrap: wrap;
	padding: 20px;
}

#about, #features {
	width: 48%;
	margin: 1%;
	background-color: #f9f9f9;
	padding: 15px;
	box-sizing: border-box;
}

.product-img {
	width: 100%;
	margin-top: 10px;
}

#footer {
	background-color: #E0FFFD;
	text-align: center;
	padding: 15px;
	border-top: 2px solid #ccc;
}

@media only screen and (min-width:450px) and (max-width:700px){
	body:{
		margin:0
	}
	#all {
		width: 95%;
	}
	#content {
		flex-direction: column;
		}
	#about, #features {
		width: 100%;
		margin-bottom: 20px;
	}
	#nav a {
		display: block;
		margin: 10px 0;
	}
}
@media only screen and (min-width:0px) and (max-width:449px){
	#all{
		width:100%;
		height:auto;
	}
	#logo {
		width: 70px;
		height:auto;
	}
	
	.slogan{
		font-size:1em;
	}
	#nav a {
		margin: 10px;
		font-size: 1.1em;
	}
	#content {
		flex-direction: column;
		padding: 15px;
	}
	#about, #features {
		width: 100%;
		margin-bottom: 20px;
		font-size: 1em;
	}
	#footer {
		font-size: 1em;
		padding: 12px;
	}
}