@charset "utf-8";

@media (max-width: 960px){

/************************* Universal **********************************/
body{
  	background: #eaeaea;
}
.wrapper{
  	min-width: 100%;
  	width: 100%;
  	background: none;
}
.box{
  	width: auto;
  	margin: 0 2%;
}
.footer{
  	width: auto;
}
.popout img{
    max-width: 95%;
}



/************************* header **********************************/

.header{
	height: auto;
	padding-bottom: 20px;
	background: #242424;
}
.header .intro{
	margin: 1em 0;
	position: relative;
	left: auto;
	top: auto;
}
.nav{
	position: relative;
	left: auto;
	top: auto;
	width: auto;
	height: auto;
	border: 1px solid #aaa;
  	background: #0e0e0e url(../Image/nav-bg.png) center top repeat-x;
}
.nav:after{
	content: '';
	display: block;
	clear: both;
}
.nav li{
	width: 145px;
	height: 107px;
}
.nav li:first-child a{ background: url(../Image/nav-1.png) center top no-repeat;}
.nav li:nth-child(2) a{ background: url(../Image/nav-2.png) center top no-repeat;}
.nav li:nth-child(3) a{ background: url(../Image/nav-3.png) center top no-repeat;}
.nav li:nth-child(4) a{ background: url(../Image/nav-4.png) center top no-repeat;}

.nav li:hover{
	background: rgba(0,0,0,0.7);
}
.nav li:active{
	background: rgba(0,0,0,0.9);
}

.hero-mobile{
	width: 100%;
	display: block;
}


/************************* section general **********************************/

.system-requirements{
	float: none;
	margin-left: 20px;
}
.steps h2, .steps h3{
	width: 0;
	height: 0;
  	position: absolute;
  	overflow: hidden;
}
.example{
	width: 200px;
  	position: absolute;
}



/******* section-1 *******/


.section-1 .step-1{
	float: none;
	margin-top: 20px;
}
.section-1 .step-2{
	height: 370px;
}
.section-1 .step-2 > p{
	width: 420px;
}
.section-1 .step-2 .example{
  	right: auto;
  	top: 200px;
  	left: 150px;
}
.section-1 .step-3{
  	margin-left: 0;
}
.section-1 .step-4{
	height: 440px;
	margin-top: 20px;
	clear: both;
  	background: url(../Image/step-1-4-mobile.jpg) no-repeat;
  	position: relative;
}
.section-1 .step-4 > p{
	width: 480px;
  	position: absolute;
  	left: 90px;
  	top: 330px;
}



/******* section-2 *******/

.section-2 .step-1{
	float: none;
	margin-top: 40px;
}
.section-2 .step-2{
	height: 360px;
}
.section-2 .step-2 > p{
	width: 400px;
}
.section-2 .step-2 .example{
  	right: auto;
  	top: 200px;
  	left: 150px;
}

.section-2 .step-3{
	height: 270px;
	margin-left: 0;
  	background: url(../Image/step-2-3-mobile.png) no-repeat;
}
.section-2 .step-3 > p{
	width: 200px;
  	left: 137px;
  	top: 95px;
}
.section-2 .step-3 .example{
  	left: 345px;
  	top: 110px;
}

.section-2 .step-4{
	height: 320px;
}
.section-2 .step-4 .example{
  	left: 148px;
  	top: 190px;
}


/******* section-3 *******/

.section-3 .step-1{
	float: none;
	margin-top: 20px;
	width: auto;
}
.section-3 .step-2{
	height: 370px;
}
.section-3 .step-2 > p{
	width: auto;
}
.section-3 .step-2 .example{
  	right: auto;
  	left: 160px;
  	top: 180px;
}


/******* section-4 *******/

.section-4 .intro{
  	padding: 0;
}
.spec{
	width: 100%;
}





}


@media (max-width: 640px){

.wrapper{
  	overflow: hidden;
}
.nav li{
	width: 50%;
}
.steps h2{
	width: auto;
	height: auto;
  	position: relative;
  	font-size: 2em;
}
.steps h2 span{
  	font-size: 3em;
  	color: #aaa;
  	display: block;
}
.example{
  	position: relative !important;
  	left: auto !important;
  	right: auto !important;
  	top: auto !important;
}
.steps{
  	position: relative !important;
  	left: auto !important;
  	right: auto !important;
  	top: auto !important;
	width: auto !important;
	height: auto !important;
	background: none !important;
}
.steps > p{
  	position: relative !important;
  	left: auto !important;
  	right: auto !important;
  	top: auto !important;
	width: auto !important;
	height: auto !important;
	background: none !important;
}
.checklist ul{
	margin-left: -10px;
}

.section-3 .box{
  	margin-bottom: 40px;
}

.section-4 h2{
  	background: none;
  	height: auto;
  	text-indent: 0;
  	text-align: center;
  	color: #fff;
  	font-size: 2em;
}
.spec{
  	font-size: 0.9em;
	overflow: auto;
}
.spec th{
	padding: 8px 2px;
	font-weight: normal;
}
.spec td{
	padding: 8px 2px;
}

}