#classify img{
	width:66px;
}

.serviceItem{
	overflow: hidden;
}

.serviceItem img{
	width:100%;
}

#classify li#search{
	text-align: right;
}


@media screen and (min-width: 1200px) {

	#wrapper{
		width:1185px;
		margin:0 auto;
		padding:50px 0;
	}

	#classify{
		width: 1000px;
		height:25px;
		margin:0 auto 25px auto;
		border-bottom: #727675 1px solid;
	}

	#classify li{
		float: left;
		width: 75px;
		height:25px;
		padding-left: 25px;
		margin-right:25px; 
		background: url('../images/classifyBg_2.png') no-repeat;
		background-position: : 0px 0px;
		cursor: pointer;
		-webkit-transition:0.3s;
		-moz-transition:0.3s;
		-o-transition:0.3s;
		transition:0.3s;
	}

	#classify li:hover{
		background: url('../images/classifyBg.png') no-repeat;
		background-position: : 0px 0px;
	}

	#classify li.this{
		background: url('../images/classifyBg.png') no-repeat;
		background-position: : 0px 0px;
	}

	#classify li#search{
		width:300px;
		float: right;
		margin:0;
		padding:0;
		background: url('');
	}

	.searchBTN{
		display: inline-block;
		width:50px;
		padding:2px;
		background: #29302f;
		color: #aaa;
		text-align: center;
		-webkit-transition:0.3s;
		-moz-transition:0.3s;
		-o-transition:0.3s;
		transition:0.3s;
	}

	.searchBTN:hover{
		color: #fff;
	}

	.searchBTN:active{
		position: relative;
		top:1px;
	}

	#classify li#search input{
		display: inline-block;
		margin-right: 5px;
	}


	#gallery{
		width:1160px;
		background: #fff;
		padding: 25px 0 0 25px;
	}

	.serviceItem{
		-webkit-transition:0.3s;
		-moz-transition:0.3s;
		-o-transition:0.3s;
		transition:0.3s;
	}

	.serviceItem:hover{
		background: #f2f2f2;
	}

	.size1{
		float: left;
		width:265px;
		height:265px;
		margin:0 25px 25px 0;
	}

	.size2{
		float: left;
		width:555px;
		height:265px;
		margin:0 25px 25px 0;
	}

	.size3{
		float: left;
		width:265px;
		height:555px;
		margin:0 25px 25px 0;
	}

	.size4{
		float: left;
		width:555px;
		height:555px;
		margin:0 25px 25px 0;
	}

	.serviceTitle{
		background: url('../images/gallerySquare.png');
	}

	.galleryImg1{
		display: block;
	}

	.galleryImg2{
		display: none;
	}

}



@media screen and (max-width: 1200px) and (min-width: 900px) {

	#wrapper{
		width:870px;
		margin:0 auto;
		padding:50px 0;
	}

	#classify{
		width: 870px;
		height:25px;
		margin:0 auto 25px auto;
		border-bottom: #727675 1px solid;
	}

	#classify li{
		float: left;
		width: 75px;
		height:25px;
		padding-left: 25px;
		margin-right:25px; 
		background: url('../images/classifyBg_2.png') no-repeat;
		background-position: : 0px 0px;
		cursor: pointer;
		-webkit-transition:0.3s;
		-moz-transition:0.3s;
		-o-transition:0.3s;
		transition:0.3s;
	}

	#classify li:hover{
		background: url('../images/classifyBg.png') no-repeat;
		background-position: : 0px 0px;
	}

	#classify li.this{
		background: url('../images/classifyBg.png') no-repeat;
		background-position: : 0px 0px;
	}


	#gallery{
		width:870px;
		background: #fff;
		padding: 25px 0 0 25px;
	}

	.serviceItem{
		-webkit-transition:0.3s;
		-moz-transition:0.3s;
		-o-transition:0.3s;
		transition:0.3s;
	}

	.serviceItem:hover{
		background: #f2f2f2;
	}

	.size1{
		float: left;
		width:265px;
		height:265px;
		margin:0 25px 25px 0;
	}

	.size2{
		float: left;
		width:555px;
		height:265px;
		margin:0 25px 25px 0;
	}

	.size3{
		float: left;
		width:265px;
		height:555px;
		margin:0 25px 25px 0;
	}

	.size4{
		float: left;
		width:555px;
		height:555px;
		margin:0 25px 25px 0;
	}

	.serviceTitle{
		background: url('../images/gallerySquare.png');
	}

	.galleryImg1{
		display: block;
	}

	.galleryImg2{
		display: none;
	}

	#classify li#search{
		width:300px;
		float: right;
		margin:0;
		padding:0;
		background: url('');
	}

	.searchBTN{
		display: inline-block;
		width:50px;
		padding:2px;
		background: #29302f;
		color: #aaa;
		text-align: center;
		-webkit-transition:0.3s;
		-moz-transition:0.3s;
		-o-transition:0.3s;
		transition:0.3s;
	}

	.searchBTN:hover{
		color: #fff;
	}

	.searchBTN:active{
		position: relative;
		top:1px;
	}

	#classify li#search input{
		display: inline-block;
		margin-right: 5px;
	}

}


@media screen and (max-width: 900px) and (min-width: 480px) {

	#wrapper{
		width:475px;
		margin:0 auto;
		padding:50px 0;
	}

	#classify{
		width: 475px;
		height:25px;
		margin:0 auto 50px auto;
		border-bottom: #727675 1px solid;
	}

	#classify li{
		float: left;
		width: 70px;
		height:25px;
		padding-left: 25px;
		margin-right:15px; 
		background: url('../images/classifyBg_2.png') no-repeat;
		background-position: : 0px 0px;
		cursor: pointer;
		-webkit-transition:0.3s;
		-moz-transition:0.3s;
		-o-transition:0.3s;
		transition:0.3s;
	}

	#classify li:hover{
		background: url('../images/classifyBg.png') no-repeat;
		background-position: : 0px 0px;
	}

	#classify li.this{
		background: url('../images/classifyBg.png') no-repeat;
		background-position: : 0px 0px;
	}


	#gallery{
		width:450px;
		background: #fff;
		padding: 25px 0 0 25px;
	}

	.serviceItem{
		-webkit-transition:0.3s;
		-moz-transition:0.3s;
		-o-transition:0.3s;
		transition:0.3s;
	}

	.serviceItem:hover{
		background: #f2f2f2;
	}

	.size1{
		float: left;
		width:200px;
		height:200px;
		margin:0 25px 25px 0;
	}

	.size2{
		float: left;
		width:425px;
		height:200px;
		margin:0 25px 25px 0;
	}

	.size3{
		float: left;
		width:200px;
		height:425px;
		margin:0 25px 25px 0;
	}

	.size4{
		float: left;
		width:425px;
		height:425px;
		margin:0 25px 25px 0;
	}

	.serviceTitle{
		width:200px;
		background: url('../images/gallerySquare.png') center;
		background-size: cover;
	}

	.galleryImg1{
		display: block;
	}

	.galleryImg2{
		display: none;
	}

	#classify li#search{
		width:300px;
		float: right;
		margin:25px 0;
		padding:0;
		background: url('');
	}

	.searchBTN{
		display: inline-block;
		width:50px;
		padding:2px;
		background: #29302f;
		color: #aaa;
		text-align: center;
		-webkit-transition:0.3s;
		-moz-transition:0.3s;
		-o-transition:0.3s;
		transition:0.3s;
	}

	.searchBTN:hover{
		color: #fff;
	}

	.searchBTN:active{
		position: relative;
		top:1px;
	}

	#classify li#search input{
		display: inline-block;
		margin-right: 5px;
	}

}


@media screen and (max-width: 480px) {

	#content{
		margin:0 auto;
		width:100%;
	}

	#wrapper{
		width: 88%;
		margin: 0 6%;
		padding: 50px 0;
	}

	#classify{
		width: 300px;
		margin:0 auto 50px auto;
	}

	#classify li{
		width: 70px;
		height:25px;
		padding-left: 25px;
		margin-right:15px; 
		background: url('../images/classifyBg_2.png') no-repeat;
		background-position: : 0px 0px;
		cursor: pointer;
		-webkit-transition:0.3s;
		-moz-transition:0.3s;
		-o-transition:0.3s;
		transition:0.3s;
	}

	#classify li:hover{
		background: url('../images/classifyBg.png') no-repeat;
		background-position: : 0px 0px;
	}

	#classify li.this{
		background: url('../images/classifyBg.png') no-repeat;
		background-position: : 0px 0px;
	}


	#gallery{
		width: 94%;
		background: #fff;
		padding: 25px 0 0 6%;
	}

	.serviceItem{
		-webkit-transition:0.3s;
		-moz-transition:0.3s;
		-o-transition:0.3s;
		transition:0.3s;
	}

	.serviceItem:hover{
		background: #f2f2f2;
	}

	.size1{
		float: left;
		width: 88%;
		/*height: 250px;*/
		margin: 0 25px 25px 0;
	}

	.size2{
		float: left;
		width: 88%;
		/*height: 250px;*/
		margin: 0 25px 25px 0;
	}

	.size3{
		float: left;
		width: 88%;
		/*height: 250px;*/
		margin: 0 25px 25px 0;
	}

	.size4{
		float: left;
		width: 88%;
		/*height: 250px;*/
		margin: 0 25px 25px 0;
	}

	.serviceTitle{
		/*height: 250px;*/
		width:88%;
		background: url('../images/gallerySquare.png') center;
		background-size: cover;
	}

	.galleryImg2{
		display: block;
	}

	.galleryImg1{
		display: none;
	}

	#classify li#search{
		width:250px;
		float: left;
		margin:10px 0;
		padding:0;
		background: url('');
	}

	.searchBTN{
		display: inline-block;
		width:50px;
		padding:2px;
		background: #29302f;
		color: #aaa;
		text-align: center;
		-webkit-transition:0.3s;
		-moz-transition:0.3s;
		-o-transition:0.3s;
		transition:0.3s;
	}

	.searchBTN:hover{
		color: #fff;
	}

	.searchBTN:active{
		position: relative;
		top:1px;
	}

	#classify li#search input{
		display: inline-block;
		margin-right: 5px;
	}


	#classify li#search{
		text-align: left !important;
	}

}