/*头部区域样式*/
header{
	width: 85%;
	margin: 10px auto;
}
.logo{
	display: flex;
	justify-content: center;
}
nav ul li a{
	color: #337ab7;
}
nav ul li{
	display: flex;
	justify-content: center;
}
.navbar form {
	display: flex;
}
.navbar input {
	height: 25px;
 	border-radius: 42px;
 	border: 1px solid #C0C0C0;
 	flex-grow: 1;
}
.navbar input:focus {
 	outline: none;   
}
.navbar button {
	width: 25px;
	height: 25px;
	cursor: pointer;
	border: 1px solid #C0C0C0;
 	outline: none;        
}
.navbar button:before{     
 	content: "\f002";
 	font-family: FontAwesome;
 	color: #337ab7;
}

/*主要内容区域样式*/
main{
	width: 85%;
	margin: 0 auto;
}
main h2{
	height: 150px;
	line-height: 150px;
	background: url("../images/section-header.png") center center no-repeat;
	text-align: center;
	font-size: 3rem;
	font-weight: bold;
}
main section:first-child img{
	margin: 0 auto;
}
main h3{
	font-size: 2.2rem;
	font-weight: bold;
	margin: 20px 0;
	text-align: center;
}
main p{
	font-size: 1.6rem;
	color: #666;
	line-height: 30px;
	text-indent: 2rem;
}
.event img{
	margin: 0 auto;
} 
.event figcaption{
	background-color: #DCDCDC;
	padding: 30px 20px;
	color: #666;
}
.event i{
	color: #0099cc;
	margin-right: 15px;
}
/* 页脚区域样式 */
footer{
	width: 85%;
	margin: 70px auto 50px;
}
footer ul{
	display: flex;
}
footer ul li{
	margin: 10px 5px 0px;
}
footer a{
	font-size: 1.2rem;
	color: #337ab7;
}
footer div:first-child{
	display: flex;
	justify-content: space-between;
}

@media(min-width:768px){
/* 头部样式 */
	nav ul{
		display: flex;
		justify-content: space-between;
	}
/*主要内容区域样式*/
	.event{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.event li{
		width: 48%;
		margin: 10px 1%;
		box-sizing: border-box;
	}
}

@media(min-width:992px){
	header{
		display: flex;
	}
	.navbar{
		display: flex;		
		flex: 1;  
		align-items: center;            /*拉伸占据头部剩余宽度*/
		margin-left: 40px;   
	}
	.navbar nav{
		flex: 1;
	}
	.navbar .search{
		flex: 1;
		justify-content: flex-end;
	}
	.navbar input{
		flex-grow: 0;
	} 
	main section:first-child>div{
		display: flex;
		justify-content: space-between;
	}
	main section:first-child img{
		width: 45%;
	}
	main section:first-child div div{
		width: 45%;
	}
	.event li{
		width: 31%;
		margin: 10px 1%;
	}
}