* {
	box-sizing: border-box; 
	-webkit-font-smoothing: antialiased; 
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;
}

::selection
 {
	background: rgb(191, 165, 124); 
	color: rgb(255, 255, 255);
}


.banner
{
	background: rgb(91, 77, 61); 
	width: 100%; 
	text-align: center; 
	color: rgba(255, 255, 255, 0.9); 
	line-height: 24px; 
	overflow: auto; 
	font-size: 20px; 
	position: relative; 
	box-shadow: 0px 1px 5px rgba(0,0,0,0.50); 
	text-shadow: 0px 0px 4px rgba(0,0,0,0.50), 0px 1px 2px rgba(0,0,0,0.80);
        border:solid 1px #606060;
        margin-bottom:10px;
        z-index: 100;
	
}
.banner ul 
{
	list-style: none; 
	width: 300%;
        margin:0px;
        padding:0px;
}
.banner ul li 
{
	vertical-align: middle;
	float: left; 
	display: block; 
	box-shadow: inset 0px -3px 6px rgba(0,0,0,0.1); 
	-webkit-background-size: 100% auto;
        -moz-background-size: 100% auto;
        -o-background-size: 100% auto;
        background-size: 100% auto;
        margin:0px;
        padding:0px;
        background-position: center;
	background-repeat:no-repeat; 
	
}
.banner h1 
{
	color: rgb(255, 255, 255); 
	font-size: 40px;
	line-height:50px;
}
.banner h2 
{
	color: rgb(255, 255, 255); 
	font-size: 40px;
	line-height:50px;
}
.banner h3 
{
	color: rgb(255, 255, 255); 
	font-size: 26px;
	line-height:36px;
}

.banner p 
{
	color: rgb(255, 255, 255); 
	font-size: 16px;
}
.banner .btn 
{
	margin: 25px 0px 0px; 
	padding: 4px 8px 4px; 
	border-radius: 5px; 
	border: 1px solid rgba(0, 0, 0, 0.3); 
	color: rgb(255, 255, 255); 
	text-transform: uppercase; 
	clear: both; 
	font-size: 12px; 
	font-weight: bold; 
	text-decoration: none; 
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.1); 
}
.banner .btn:hover 
{
	background: rgba(255, 255, 255, 0.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)); 
	-o-filter: drop-shadow(0 -1px 2px rgba(0, 0, 0, .5));
}
.banner .btn 
{
	-webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); 
	-moz-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); 
	-o-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
}

.banner a:hover 
{
	background: rgba(255, 255, 255, 0.05);
        color:#ffffff;
        text-decoration: none;
}
.banner a: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)); 
	-o-filter: drop-shadow(0 -1px 2px rgba(0, 0, 0, .5));
        color:#ffffff;
        text-decoration: none;
}
.banner a 
{
	-webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); 
	-moz-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); 
	-o-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
        color:#ffffff;
        text-decoration: none;
        margin: 20px 0px 0px; 
	padding: 4px 8px 4px;
	border-radius: 5px; 
	border: 1px solid rgba(0, 0, 0, 0.3); 
	text-transform: uppercase; 
	clear: both; 
	font-size: 12px; 
	font-weight: bold; 
	text-decoration: none; 
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.1); 
}

.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)); 
	-o-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
}
.banner .dots
 {
	left: 0px; 
	right: 0px; 
	bottom: 20px; 
	position: absolute;
}
.banner .dots li 
{
	margin: 0px 4px; 
	border-radius: 8px; 
	border: 2px solid #ff8800; 
	transition:background 0.5s, opacity 0.5s; 
	width: 10px; 
	height: 10px; 
	text-indent: -999em; 
	display: inline-block; 
	cursor: pointer; 
	opacity: 0.5; 
	-webkit-transition: background .5s, opacity .5s; 
	-moz-transition: background .5s, opacity .5s;
	box-shadow: 0px 1px 6px rgba(0,0,0,0.5); 
	text-shadow: 0px 1px 6px rgba(0,0,0,0.5);

}
.banner .dots li.active 
{
	background: rgb(255, 255, 255); 
	opacity: 1;
}
.features 
{
	background: rgb(247, 247, 246); 
	padding: 50px 0px; 
	overflow: hidden; 
	box-shadow: inset 0px -1px 3px rgba(0,0,0,0.03);
}
.features li 
{
	list-style: none; 
	padding: 0px 25px 0px 40px; 
	width: 25%; 
	float: left; 
	position: relative;
}
.features li::before 
{
	background: url("img/icons.png"); 
	left: 0px; 
	top: 0px; 
	width: 24px; 
	height: 22px; 
	display: block; 
	position: absolute; 
	content: "";
}
.features li.browser::before 
{
	background-position: 0px -44px;
}
.features li.height::before 
{
	background-position: 0px -22px;
}
.features li.responsive::before 
{
	background-position: 0px -66px;
}
.features b 
{
	padding-bottom: 6px; display: block;
}
.how 
{
	padding: 60px 0px;
}
.how h2 
{
	color: rgb(124, 104, 83);
}
.how h3 
{
	color: rgb(123, 107, 83); 
	line-height: 10px; 
	padding-bottom: 8px; 
	font-size: 20px;
}
.how li 
{
	margin: 0px 0px 40px 15px; 
	width: 375px; 
	padding-left: 10px; 
	position: relative;
}
.how pre 
{
	background: rgb(248, 245, 240); 
	padding: 20px 25px; 
	border-radius: 5px; 
	left: 450px; 
	top: 0px; 
	width: 495px; 
	color: rgb(138, 120, 93); 
	line-height: 18px; 
	font-size: 12px; 
	position: absolute; 
	box-shadow: inset 0px 2px 2px rgba(180,157,125,0.15), inset 0px 0px 1px rgba(0,0,0,0.2);
}
.how p 
{
	padding-bottom: 15px;
}
.options 
{
	background: rgb(57, 52, 45); 
	padding: 60px 0px; 
	color: rgb(123, 115, 104); 
	box-shadow: inset 0px 2px 3px rgba(0,0,0,0.2); 
	text-shadow: 0px 1px 1px rgba(0,0,0,0.2);
}
.options a 
{
	color: rgb(255, 255, 255); 
	text-decoration: none; 
	border-bottom-color: rgba(255, 255, 255, 0.2); 
	border-bottom-width: 1px; 
	border-bottom-style: solid;
	opacity: 0.7;
}
.options a:hover 
{
	border-bottom-color: rgba(255, 255, 255, 0.3); 
	opacity: 1;
}
.options p 
{
	line-height: 25px; 
	padding-bottom: 20px; 
	font-size: 16px;
}
.options h2 
{
	color: rgb(255, 255, 255); 
	padding-bottom: 15px;
}
.options pre 
{
	background: rgb(52, 47, 41); 
	padding: 20px 25px; 
	border-radius: 5px; 
	color: rgb(152, 143, 129); 
	line-height: 19px; 
	font-size: 13px; 
	box-shadow: inset 0px 2px 2px rgba(0,0,0,0.15), inset 0px 0px 1px rgba(0,0,0,0.1);
}
.options pre span 
{
	color: rgb(112, 102, 87);
}
.footer 
{
	padding: 80px 0px 60px; text-align: center;
}
.footer .btn 
{
	padding: 4px 8px 4px; 
        margin-bottom: 15px; 
	border-radius: 5px; 
	border: currentColor; 
	color: rgb(255, 255, 255); 
	text-transform: uppercase; 
	line-height: 12px; 
	font-size: 12px; 
	font-weight: bold; 
	display: inline-block; 
	box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.2), inset 0px -1px 2px rgba(0,0,0,0.15), inset 0px 2px 0px rgba(255,255,255,0.2), 0px 1px 1px rgba(0,0,0,0.1); 
	text-shadow: 0px 1px 2px rgba(0,0,0,0.2); 
	background-image: -ms-linear-gradient(rgb(208, 121, 54), rgb(185, 81, 36)); 
	background-color: rgb(196, 101, 45);
}
.footer .btn:hover 
{
	color: rgb(255, 255, 255); 
	opacity: 0.95;
}
.footer .btn:active 
{
	opacity: 1; 
	box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.2), inset 0px -1px 2px rgba(255,255,255,0.1), inset 0px 2px 2px rgba(0,0,0,0.2), 0px 1px 1px rgba(0,0,0,0.1); 
	background-image: -ms-linear-gradient(rgb(181, 86, 37), rgb(195, 105, 45)); 
	background-color: rgb(188, 95, 41);
}

.footer a 
{
	margin: 0px 4px; 
	color: rgb(121, 101, 78); 
	text-decoration: none; 
	border-bottom-color: rgb(221, 210, 198); 
	border-bottom-width: 1px; 
	border-bottom-style: solid;
}
.footer a:hover 
{
	border-color: rgb(209, 191, 169); 
	color: rgb(102, 81, 57);
}
.wrap 
{
	margin: 0px auto; 
	width: 960px;
}

@media only screen and (max-device-width:480px) and (min-device-width:320px), all and (max-width:900px)
{
.wrap {
	width: 90%;
}
#logo 
{
	left: 50px; 
	top: 30px;
}
.banner h1
 {
	line-height: 30px;
	font-size: 24px;
}
.banner h2 
{
	line-height: 30px; 
	font-size: 24px;
}
.banner ul li 
{
	background-repeat:no-repeat; 
	background-position: center;
}
.banner p 
{
	margin: 0px auto; 
	width: 80%; 
	font-size: 15px;
}
pre 
{
	overflow: auto;
}
.features li 
{
	width: 100%; 
	margin-bottom: 30px; 
	margin-left: 10px;
}
.how li 
{
	width: 90%;
}
.how pre
 {
	width: 100%; 
	position: static;
}
}