@charset "utf-8";

@media (max-width: 1000px){

/************************* Universal **********************************/
.wrapper{
  	min-width: 100%;
  	width: 100%;
  	background: none;
}
.box{
  	width: auto;
}
.footer{
  	width: auto;
}


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

.header{
	height: auto;
	padding-bottom: 20px;
}
.nav{
	position: relative;
	left: auto;
	top: auto;
	width: auto;
	height: auto;
  text-align: center;
}
.hero-mobile{
	width: 100%;
	display: block;
}


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

.section-1 .box,
.section-2 .box{
  padding: 0 15px;
}


.system-requirements{
	float: none;
	margin-left: 30px;
  margin-top: 50px;
}
.section-1 .steps,
.section-2 .steps{
  height: auto;
  width: auto;
  background-position: left top;
  margin-left: 0px;
  padding-left: 150px;
  float: none;
  margin-bottom: 60px;
}

.section-1 .steps h2,
.section-2 .steps h2{
  width: auto;
  left: auto;
  top: auto;
  position: relative;
}

.section-1 .steps p,
.section-2 .steps p{
  width: auto;
  left: auto;
  top: auto;
  position: relative;
}

.section-1 .steps .example,
.section-2 .steps .example{
  left: auto;
  top: auto;
  position: relative;
  right: auto;
}
.section-1 .steps > img,
.section-2 .steps > img{
  position: relative;
  right: auto;
  left: auto;
  top: auto;
  max-width: 100%;
}


/******* section-2 *******/
.section-2{
  padding-bottom: 20px;
}
.section-2 .step-4{
  min-height: 190px;
}


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

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





}


@media (max-width: 640px){
.nav li{
  width: 120px;
  height: auto;
}
.nav li:last-child:after{
  display: none;
}
.checklist ul{
	margin-left: -10px;
}

.spec{
  font-size: 0.9em;
	overflow: auto;
}
.spec th{
	padding: 8px 2px;
	font-weight: normal;
}
.spec td{
	padding: 8px 2px;
}
.section-5 .text{
  width: 100%;
  padding: 1em;
}
.section-5 .img{
  width: 100%;
}
}



@media (max-width: 480px){
.nav li{
  width: 90px;
}
.nav img{
  width: 80%;
}
.section-1 .steps,
.section-2 .steps{
  background: none;
  padding-left: 0px;
}
.steps h2 span{
  display: inline;
  font-size: 3em;
  font-weight: normal;
  color: #fff;
}
.system-requirements{
  margin-bottom: 70px;
  width: auto;
  margin-left: 10px;
}
.popout .close{
  right: 10px;
  top: 10px;
  width: 50px;
  height: 50px;
  background-size: 50%;
}
.popout img{
    margin-top: 70px;
}
.section-4 .notice{
    padding: 0px 10px;
}
.section-4 .back-to-top{
  margin-top: 20px;
}
}