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

html,body	{background:#CCC;
    		width: 100%;
    		height: 100%;}

* 			{margin: 0;
			padding: 0;
			-webkit-box-sizing: border-box;
			height:100%;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			color:#FFF;}
			

#wrapper	{ width:100%;
			margin:0 auto;
			position:absolute;}

.navbar		{font-family: 'Oswald', sans-serif;
			font-size:13px;
			font-weight:200;
			letter-spacing:2px;
			color:#FFF;
			margin-top:75px;
			
			text-align:right;
			padding-bottom: 9px;
			z-index:4000;
			position:relative;
			display:inline-block;
			float:right;
			}

.navbar ul	{list-style-type:none;
			display:inline-block;
			margin:0;
			padding:0;
			font-color:#FFF;}	
			
.navbar ul	li {display:inline-block;
			padding-right:5px;
			padding-left:5px;
			font-color:#FFF;}
						
.navbar li a {padding-left:12px; 
			padding-right:12px; 
			text-decoration: none;}

.navbar li a:hover {text-decoration: none;
			padding-bottom:8px;
			font-color:#FFF;
			border-bottom: 2px solid;}
			
#logo		{margin-top:54px;
			left:15px;
			width:66px;
			height:62px;
			z-index:8000;
			text-align:center;
			position:absolute;}

.banner		{position: relative;
			min-width: 100%;
			height: 100%;
			min-height:100%;
			overflow: none;
			font-size: 18px;
			line-height: 24px;
			text-align: center;}
			
			
			
.banner ul {list-style: none;
			width: 300%;}
			
.banner ul li {min-height: 100%;
			height: 100%;
			display: block;
			float: left;
			padding: 160px 0 110px;
			min-height: 100%;
			margin:0 auto;
			background: no-repeat center fixed; 
  			-webkit-background-size: cover;
  			-moz-background-size: cover;
  			-o-background-size: cover;
  			background-size: cover;}
	
.btn		{width:344px; 
			height:231px;}
	
.banner .btn {display: inline-block;
			margin-top:8.25%;
			padding-top:10px;
			clear: both;
			color: #fff;
			font-size: 12px;
			font-weight: bold;
			text-transform: uppercase;
			text-decoration: none;}
			
		
.banner .dots {position:fixed;
			left: 0;
			right: 0;
			top: 90%;}
			
.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;}
			
.banner .dots li.active {
			background: #fff;
			opacity: 1;}
		
.features 	{overflow: hidden;
			padding: 50px 0;}
			
.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('img/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;}
	
.how 		{padding: 60px 0;}


.how h2 	{color: #FFF;}

.how h3 	{padding-bottom: 8px;
			font-size: 20px;
			line-height: 10px;}
			
.how li 	{position: relative;
			width: 375px;
			margin: 0 0 40px 15px;
			padding-left: 10px;}
		
		
.how pre 	{position: absolute;
			left: 450px;
			top: 0;
			width: 495px;
			padding: 20px 25px;
			font-size: 12px;
			line-height: 18px;
			border-radius: 5px;
			box-shadow: inset 0 2px 2px rgba(180,157,125,.15), inset 0 0 1px rgba(0,0,0,.2);}
			
.how p 		{padding-bottom: 15px;}
	
.options 	{padding: 60px 0;
			background: #39342d;
			color: #7b7368;
			box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
			text-shadow: 0 1px 1px rgba(0,0,0,.2);}
			
.options a {opacity: .7;
			color: #fff;
			border-bottom: 1px solid rgba(255,255,255,.2);
			text-decoration: none;}
	
	
.options p 	{font-size: 16px;
			line-height: 25px;
			padding-bottom: 20px;}
			
.options h2 {color: #fff;
			padding-bottom: 15px;}
			
.options pre {padding: 20px 25px;
			font-size: 13px;
			line-height: 19px;
			box-shadow: inset 0 2px 2px rgba(0,0,0,.15), inset 0 0 1px rgba(0,0,0,.1);
			border-radius: 5px;}
		
.options pre span {color: #706657;}
		
.footer 	{padding: 80px 0 60px;
			text-align: center;}

.footer .btn:hover {opacity: .95;
			color: #fff;}

.footer a	{margin: 0 4px;
			text-decoration: none;
			border-bottom: 1px solid #ddd2c6;}
		
.footer a:hover{color: #665139;
			border-color: #d1bfa9;}

.wrap 		{margin: 0 auto;
			width: 960px;}
			
			
			
			
			

@media only screen and (min-device-width: 320px) and (max-device-width: 480px), (max-width: 900px) {
	
.navbar		{width:40%;
			float:right;
			height:auto;}
			
.navbar li a:hover {border-bottom:none;}
	
.wrap 		{width: 90%;}
	
#logo 		{left: 50px;
			top: 30px;}
	
.banner h1, .banner h2 {
			font-size: 24px;
			line-height: 30px;}
			
.banner ul li {padding-top: 100px;
			padding-bottom: 50px;
			height: 100%;}
			
.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('img/icons@2x.png');
			background-size: 100%;}
}

    }

/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

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

		.navbar li a	{ font-size:10px;}
		.navbar li 	{width:150px;}
		.navbar ul li	{padding-right:0px;}
		.navbar ul	{display:inline-block;}
		
		}
		
/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {		
		
		
		.navbar li a	{ font-size:10px;}
		.navbar li 	{width:150px;}
		.navbar ul li	{padding-right:0px;}
		.navbar ul	{display:inline-block;}
		}