@charset "utf-8";
/* CSS Document */

.banner{
	width:100%;
	height:20%;
}

.banner img{
	width:100%;
	height:auto;
}

.content{
	width:100%;
	height:900px;
	margin-left:auto;
	margin-right:auto;
	float:left;
}

.content1{
	width:80%;
	height:700px;
	margin-top:-53px;
	margin-left:auto;
	margin-right:auto;
	background-color:rgba(245,245,245,0.5);
}

.content1 h1{
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:80px;
	font-weight:bold;
	color:#333;
	text-align:left;
	padding-top:10%;
	margin-left:5%;
}

.content1 p{
	font-family: 'Roboto Condensed', sans-serif;
	font-size:16px;
	margin-left:5%;
	margin-right:5%;
	color:#222;
}

.content2{
	width:80%;
	height:300px;
	margin-left:auto;
	margin-right:auto;
	background:rgba(204,255,204,1);
}

.pic1{
	width:41.5%;
	height:auto;
	float:left;
	margin:3% 3% 3% 3%;
	background-size:100%;
	position:relative;
}

.pic1 img{
	width:80%;
	height:auto;
}

.pic1 h2{
	position:absolute;
	background-color:rgba(0,0,0,0.6);
	color:#fff;
	font-family: 'Abel', sans-serif;
	font-weight:200;
	font-size:18px;
	padding:13px 23% 13px 22%;
	bottom:0;
	left:0;
	margin:0;
}

.pic1 h2 a, .pic2 h2 a{
	text-decoration:none;
	color:#fff;
}

.pic1 h2 a:hover, .pic2 h2 a:hover{
	color:#FF9966;
}

.pic2{
	width:320px;
	height:200px;
	background:url(Image/For%20Website%20Development/Nova%20Highlands%20Cafe-web.jpg);
	float:left;
	margin:3% 3% 3% 3%;
	background-size:100%;
	position:relative;
}

.pic2 h2{
	position:absolute;
	background-color:rgba(0,0,0,0.6);
	color:#fff;
	font-family: 'Abel', sans-serif;
	font-weight:200;
	font-size:18px;
	padding:13px 90px 13px 90px;
	bottom:0px;
	left:0px;
	margin:0;
}

@media screen and (max-width: 1200px) and (min-width: 901px) {
	.banner{
		width:100%;
	}

}

@media only screen and (max-width: 900px) and (min-width: 769px){
	.banner{
		width:100%;
	}
	
	.content1{
		height:750px;
		margin-top:-40px;
	}
	
	.content1 h1{
		font-size:60px;
	}
}

@media only screen and (max-width: 768px) and (min-width: 481px){
	.banner{
		width:100%;
	}
	
	.content{
		height:1000px;
	}
	
	.content1{
		height:900px;
		margin-top:-33px;
	}
	
	.content1 h1{
		font-size:50px;
	}
	
	.content1{
		width:90%;
		height:auto;
	}
	
	.content1 p{
		font-size:15px;
	}
}

@media only screen and (max-width: 480px) and (min-width: 321px){
	.banner{
		width:100%;
	}
	
	.content{
		height:1200px;
	}
	
	.content1{
		width:93%;
		height:1100px;
		margin-top:-15px;
	}
	
	.content1 h1{
		font-size:24px;
	}
	
	.content1 p{
		margin-left:7%;
		margin-right:7%;
	}
}

@media only screen and (max-width: 320px) {
	.banner{
		width:100%;
	}
	
	.content{
		height:1500px;
	}
	
	.content1{
		width:93%;
		height:1180px;
		margin-top:-18px;
	}
	
	
	.content1 h1{
		font-size:28px;
		margin-bottom:20px;
		padding-top:20%;
	}
	
	
}