.hero-icon-wrapper {
  display: inline-block;
 width: 100%;
 text-align: center;
}

.hero-icons {
 display: inline-block;

} 

.hero-icon {
 background-color: #0584f7;
 border: 6px solid #0584f7;
 border-radius: 50%;
 width: 171px;
 height: 171px; 
 text-align: center;
 color: #ffffff;
 float: left;
 margin-right: 30px;
 cursor: pointer;
 -webkit-transition: background-color 500ms ease;
 -moz-transition: background-color 500ms ease;
 -o-transition: background-color 500ms ease;
 transition: background-color 500ms ease; 
}

.hero-icon.last {
 margin-right: 0px;
}

.hero-icon:hover{
 border: 6px solid #adb9cd;
 background-color: #035bab;
 -webkit-transition: background-color 500ms ease;
 -moz-transition: background-color 500ms ease;
 -o-transition: background-color 500ms ease;
 transition: background-color 500ms ease; 
}

.icon {
 position: relative;
 top: 50px;
}

.icon-title {
 position: relative;
 top: 70px;
}

@media screen and (max-width: 767px) {
   .hero .container {
  max-height: none;
  padding-top: 0px;
 }

 .container.no-slogan {
  padding-top: 40px !important;
 }

 .hero {
  background-color: #035bab !important;
 }
 
 .icon {
  top: 40px;
 }

.hero-title {
 padding-top: 110px;
} 

 .icon-title {
  top: 60px;
 } 

 .hero-image {
  background-color: #035bab;
  padding-bottom: 30px;
 }

 .agent-name {
  color: #ffffff;
 }

 .hero-icon {
  background-color: #035198;
  border: 6px solid #035198;
  width: 150px;
  height: 150px;   
 }

 .hero-icon:hover {
  background-color: #0584f7;
 }

 .hero-icon.contact,
 .hero-icon.communities {
  
  clear: both;
  float: none;
  margin: auto;
  margin-bottom: 10px;
 }

 .hero-icon.testimonials,
 .hero-icon.home-search {
  margin: auto;
 }

 .hero-icon.testimonials {
  margin-right: 10px;
 }

 .hero-icon.home-search {
  margin-left: 10px;
 }
 
  .page-content.middleTop {
  display: none;
 }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
 .hero-icon{
  margin-right: 20px;  
  width: 150px;
  height: 150px;  
 }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
 .hero-icon{
  width: 150px;
  height: 150px;
 }
}

@media screen and (min-width: 768px) {
.hero-icons a {
  display: inline-block;
}
}