.hero3 {
	width: 100%;
}

@media (min-width:1001px) {
.hero2 {
width:auto;
max-width:100%;
float: auto;
height: auto;
}
}

@media (max-width: 1000px) {
.hero2 {
	width: 95%;
	float: left;
	clear: both;
   height: auto;
}
}

@media (max-width: 950px) {
.hero2 {
	width: 90%;
	float: left;
	clear: both;
   height: auto;
}
}

@media (max-width: 900px) {
.hero2 {
	width: 86%;
	float: left;
	clear: both;
   height: auto;
}
}

@media (max-width: 870px) {
.hero2 {
	width:82%;
	float: left;
	clear: both;
   height: auto;
}
}

@media (max-width: 840px) {
.hero2 {
	width:78%;
	float: left;
	clear: both;
   height: auto;
}
}

@media (max-width: 800px) {
.hero2 {
	width:76%;
	float: left;
	clear: both;
   height: auto;
}
}

@media (max-width: 700px) {
.hero2 {
	width:73%;
	float: left;
	clear: both;
   height: auto;
}
	
.hero3 {
	width:84%;
	float: left;
	clear: both;
   height: auto;
}
}

@media (max-width: 645px) {
.hero2 {
	width:67%;
	float: left;
	clear: both;
   height: auto;
}
}

@media (max-width: 570px) {
.hero2 {
	width:60%;
	float: left;
	clear: both;
   height: auto;
}
}

@media (max-width: 510px) {
.hero3 {
	width:74%;
	float: left;
	clear: both;
   height: auto;
}
}

@media (max-width: 500px) {
.hero2 {
	width:55%;
	float: left;
	clear: both;
   height: auto;
}
}


@media (max-width: 450px) {
.hero2 {
	width:90%;
	max-width:425px;
	float: auto;
	clear: both;
	height: auto;
}

.hero3 {
	width:80%;
	float: left;
	clear: both;
   height: auto;

}
}