/* adjust banners for smaller screens*/
@media (max-width: 768px) {
  /* min size for main inset image */
  #region1.xtc-fluidwrapper {
    padding:120px 30px!important
  }

  #region6.xtc-fluidwrapper, #region11.xtc-fluidwrapper {    
    padding: 50px 0px;
  }    
  
  /* swap out for smaller background and unfix it*/
  #region6wrap {
	background: url('http://www.littlefarthingloefarm.co.uk/templates/kraft/images/backgrounds/donkey-and-shetland-horses-mobile.jpg') top center no-repeat;
  }  
}

/* adjust Welcome margin for smaller screens */
@media (max-width: 980px) {
  #region2.xtc-fluidwrapper {    
    padding: 30px;
  }
}


/* control opacity of menu header background */
.frontpage #headerwrap {
  background:rgba(0, 0, 0, 0.5) ;
}

/* reduce header z index, so image gallery can overlay */
body.sticky #headerwrap {
	z-index: 9;
}


/* hero block for news and events */
.hero-unit {
  margin-top:60px;
  margin-bottom:0px;
  padding: 30px;
}
.hero-unit p:first-of-type{
  padding-top: 30px;
}
.hero-unit p:last-of-type{
  padding-top: 10px;
}


/* styling for the opening hours and contact */
@media (max-width: 1000px) {
  .contact-section{
  	text-align: center;
  }
}

.contact-section{
  padding-top:40px;
  padding-bottom:40px;
}

.contact-item{
  padding-top:40px;
}

.contact-name{
  font-weight: bold;
}


/* white text for dark backgrounds */
.wtext *{
  color: #fafafa;
}


/* button customisation */
.btn{
    height: 60px;
    width: 150px;
    line-height: 60px;
   /* margin: 25px 25px;*/
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease 0s;
}

.btn:hover {
  text-decoration: none;  
  border: solid #ED1B24 1px;
  box-shadow: inset 0 0 0 1px #ED1B24;
}

.btn-dark{
  background: #2B2C2B;
  color: #fafafa;
  border: solid #fafafa 1px;
}

.btn-dark:hover {
  background: #2B2C2B;    
  color: #fafafa;    
}

.btn-light{
  background: #EEEEEE;
  color: #2B2C2B;
  border: solid #2B2C2B 1px;
}

.btn-light:hover {
  background: #EEEEEE;
  color: #2B2C2B;
}


/* articles */
.item-image{
  padding-bottom: 30px;
}

.page-header{
  	text-align: center;
}  

.article-section{ 
  padding-top:30px;
  padding-bottom:30px;
}

.article-image{ 
  clear:both;
}

/* center text when for mobile */
@media (max-width: 1000px) {
  .article-section{
  	text-align: center;
  }  
}