@charset "utf-8";
/* CSS Document */

.herotext {
    width: 100%;
}

.hero {margin: 3%;}
.hero h1 {width: 75%;}
.hero p {width: 75%;}
.hero img {padding-left: 5%;}
.image {background-image: url("../images/main/home_hero3.png"); width: 100%; background-size: contain; background-repeat: no-repeat;} 
 

.caption {
  /*position: absolute;
  bottom: 40%;
  margin-left:5%; */
   position: absolute;
   bottom: 30%;
   left: 5%;
   width: 30%;
   margin: 5%;
   
}

.callouts2 {position: absolute; bottom: 12%; left: 0; margin-left:5%; padding: 3%; width:80%;}
.callouts2 img {margin-left: 3%;}
.callouts2 img:hover {border: 1px solid #ECECEC;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 6px 0 rgba(0, 0, 0, 0.19);}




@media (max-width: 576px) {
.image {background-image: none;}	
.hero img {width: 100%}	
.home img {width: 50%}	
}

@media (max-width: 768px) {
.image {background-image: none;}	
.hero img {width: 50%; padding: 0;}	
.hero h1 {width: 100%}	
.hero p {width: 100%}		
}

@media (max-width: 1026px) {
    .caption { display: none;}
	.hero img {width: 50%; padding: 0;}
	.hero h1 {width: 100%}	
	.hero p {width: 100%}	
	.image {background-image: none;} 
    .callouts2 { display: none; }
}






.hero-features {position: absolute; bottom: 70%; left: 0; width: 100%; margin-left:1%;}
.hero-features a {margin:2%;}