#wrapper{
	margin: 0 auto;
	width: 979px;
}

.logo{
	margin: 0 auto;
	display: inline;
	float: left;
}

nav{
	text-align: center;
	font-size: x-large;
	padding-right: 0px;
	display: inline;
}

li{
	display: inline-block;
	text-decoration: none;
	padding-left: 50px;
}

ul{
	list-style-type: none;
	padding-top: 40px;
	margin: 0 auto;
	float: left;
}

#h1{
	padding-top: 130px;
	text-align: center;
	font-size: x-large;
}

.pic{
	text-align: center;
}

#para1{
	float: left;
	padding-left: 60px;
	width: 340px;
	margin-left: 66px;
}

#para2{
	float: left;
	width: 340px;
	padding-left: 72px;
}

@media (max-width: 767px){

	#wrapper{
	margin: 0 auto;
	width: 767px;
	}

	.logo{
		padding-left: 226px;
	}

	body{
		background-color: green;
	}

	ul{
		padding-left: 124px;
	}

	.pic{
		display: none;
	}

	#h1{
		padding-top: 200px;
	    text-align: center;
	    font-size: large;
	}

	#para1{
		padding-left: 160px;
		
	}

	#para2{
		padding-left: 224px;
		
	}
}


@media (max-width: 400px){

	#wrapper{
	margin: 0 auto;
	width: 400px;
	}

	.logo{
		padding-left: 36px;
	}

	body{
		background-color: yellow;
	}

	ul{
		padding-left: 62px;
		width: 200px;
		font-size: medium;
	}

	#h1{
		padding-top: 230px;
	    width: 400px;
	    font-size: small;
	}

	#para1{
		margin: 0px;
		padding-left: 26px;
	}

	#para2{
		margin: 0px;
		padding-left: 26px;
	}

}