* {

	margin: 0;

	padding: 0;

 list-sttyle-type:none;

	-webkit-font-smoothing: antialiased;



	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

}





.pagination ul li{float:left;list-style-type: none;margin-left:10px;}

.banner {

	position: relative;

	width: 100%;

	overflow: auto;



	font-size: 18px;

	line-height: 24px;

	text-align: center;



	color: rgba(255,255,255,.6);

	text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);



	background: #5b4d3d;

	box-shadow: 0 1px 2px rgba(0,0,0,.25);

}

	.banner ul {

		list-style: none;

		width: 300%;

	}

	.banner ul li {

		display: block;

		float: left;

		width: 33%;

		min-height: 270px;



		-o-background-size: 100% 100%;

		-ms-background-size: 100% 100%;

		-moz-background-size: 100% 100%;

		-webkit-background-size: 100% 100%;

		background-size: 100% 100%;



		box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);

	}



	.banner .inner {

		padding: 160px 0 110px;

	}



	.banner h1, .banner h2 {

		font-size: 40px;

		line-height: 52px;



		color: #fff;

	}



	.banner .btn {

		display: inline-block;

		margin: 25px 0 0;

		padding: 9px 22px 7px;

		clear: both;



		color: #fff;

		font-size: 12px;

		font-weight: bold;

		text-transform: uppercase;

		text-decoration: none;



		border: 2px solid rgba(255,255,255,.4);

		border-radius: 5px;

	}

		.banner .btn:hover {

			background: rgba(255,255,255,.05);

		}

		.banner .btn:active {

			-webkit-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));

			-moz-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));

			-ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));

			-o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));

			filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));

		}



	.banner .btn, .banner .dot {

		-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));

		-moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));

		-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));

		-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));

		filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));

	}



	.banner .dots {

		position: absolute;

		left: 0;

		right: 0;

		bottom: 20px;

	}

		.banner .dots li {

			display: inline-block;

			width: 10px;

			height: 10px;

			margin: 0 4px;



			text-indent: -999em;



			border: 2px solid #fff;

			border-radius: 6px;



			cursor: pointer;

			opacity: .4;



			-webkit-transition: background .5s, opacity .5s;

			-moz-transition: background .5s, opacity .5s;

			transition: background .5s, opacity .5s;

		}

			.banner .dots li.active {

				background: #fff;

				opacity: 1;

			}



	.banner .arrows {

		position: absolute;

		bottom: 20px;

		right: 20px;

		color: #fff;

	}

		.banner .arrow {

			display: inline;

			padding-left: 10px;

			cursor: pointer;

		}



.features {

	overflow: hidden;

	padding: 50px 0;



	background: #f7f7f6;

	box-shadow: inset 0 -1px 3px rgba(0,0,0,.03);

}

	.features li {

		position: relative;

		padding: 0 25px 0 40px;

		list-style: none;



		width: 25%;

		float: left;

	}

		.features li:before {

			content: '';

			position: absolute;

			left: 0;

			top: 0;



			display: block;

			width: 24px;

			height: 22px;



			background: url('../images/icons.png');

		}

			.features li.browser:before { background-position: 0 -44px; }

			.features li.height:before { background-position: 0 -22px; }

			.features li.responsive:before { background-position: 0 -66px; }

	.features b {

		display: block;

		padding-bottom: 6px;

	}









@media only screen and (min-device-width: 320px) and (max-device-width: 480px), (max-width: 900px) {

	.wrap {

		width: 90%;

	}

	#logo {

		left: 50px;

		top: 30px;

	}



	.banner h1, .banner h2 {

		font-size: 24px;

		line-height: 30px;

	}

	.banner ul li {

		height: 240px;

	}

	.banner .inner {

		padding-top: 100px;

		padding-bottom: 50px;

	}

	.banner p {

		font-size: 15px;

		width: 80%;

		margin: 0 auto;

	}

	pre {

		overflow: auto;

	}

	.features li {

		width: 100%;

		margin-left: 10px;

		margin-bottom: 30px;

	}

	.how li {

		width: 90%;

	}

	.how pre {

		position: static;

		width: 100%;

	}

}



@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

	.features li:before {

		background: url('../images/icons@2x.png');

		background-size: 100%;

	}

}