.hero3 {
	width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 450px) {
.hero2 {
	width:100%;
	max-width:430px;
	float: left;
	clear: both;
   height: auto;
	display:flex;
  justify-content:flex-end;
  flex-flow: column;
}
	
.hero3 {
	width:80%;
	float: left;
	clear: both;
   height: auto;
}
}