.slider {
position: relative;
width: 100%;
overflow: none;
text-align: center;
background: none;
}
.slider ul {
list-style: none;
width: 100%;
}
.slider ul li {
display: block;
float: left;
width: 100%;
height:auto;
padding:0;
}
.slider .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));
}
	
.slider .dots {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
}
.slider .dots li {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 1px 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;
}
.slider .dots li.active {
background: rgba(255,255,255,1);
}
@media only screen and (max-width: 1024px) {
.slider h1, .slider h2 {
font-size: 24px;
line-height: 30px;
}
.slider ul li {
width:100%;
height: auto;
}
.slider 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%;
	}
}
}