/*
   =================
   HERO IMAGE & TEXT
   =================
*/

.hero-image {
   background-image: url(img/hertingfordbury_7386_edit-1.jpg);
   height: 100%;
   background-attachment: scroll;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
}

.hero-text {
   text-align: center;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   /* background: rgba(0,0,0,0.4); -- SRB 1/2/21 */
   padding: 20px;
   border-radius: 10px;
}

.hero-text h1 {
   color: white;
   text-shadow: 2px 2px 10px black;
   font-size: 60px;
   line-height: 74px;
   font-family: Arvo;
   opacity: 0.99;
}

.hero-text p {
   font-family: 'PT Serif'; 
   font-size: 30px; 
   line-height: 40px; 
   color: white;
   text-shadow: 3px 3px 5px black; 
   letter-spacing: 1px
}

/* EXPERIMENTAL HERO STUFF ++ SRB 26/11/20 */
.hero-text {
   top: 30%;
   left: 30%;
   width: 40%;
   transform: none;
}

.hero {
	display:table;
	height:100%;
	width:100%;
	margin:auto;
	background:url(img/wood1600x900.jpg) no-repeat 50% 50%;
	background-size:cover;
   /* Create the parallax scrolling effect SRB 2/10/20 */
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
}

.hero .inner {
	display:table-cell;
	vertical-align:middle;
	width:100%;
	max-width:none;
}



@media only screen and (max-width: 1024px) {

   .hero-text {
      left: 15%;
      width: 70%;
   }

   .hero-text h1 {
      font-size: 54px;
      line-height: 66px;
   }
}


@media only screen and (max-width: 830px) {

   .hero-text {
      left: 10%;
      width: 80%;
   }

}

@media only screen and (max-width: 740px) {

   .hero-text {
      left: 5%;
      width: 90%;
   }

   .hero-text h1 {
      font-size: 48px;
      line-height: 62px;
   }

}

@media only screen and (max-width: 639px) {

   .hero-text h1 {
      font-size: 42px;
      line-height: 56px;
   }
      
   .hero-text p {
      font-size: 26px; 
      line-height: 34px; 
   }



}

@media only screen and (max-width: 530px) {
   
   .hero-text h1 {
      font-size: 36px;
      line-height: 48px;
   }

}



@media only screen and (max-width: 440px) {
   
   .hero-text h1 {
      font-size: 30px;
      line-height: 42px;
   }

   .hero-text p {
      font-size: 22px; 
      line-height: 30px; 
   }


}