/* Our Story page - match core PHP UI */
.content { margin-bottom: 50px; min-height: 400px; }

/* Breadcrumb on hero */
.breadcrumv1 { position: relative; max-width: 1200px; margin: 0 auto; }
.breadcrumv1 ul { position: absolute; left: 0; right: 0; padding: 12px 15px 0; margin: 0; list-style: none; z-index: 2; }
.breadcrumv1 ul li { font-size: 13px; display: inline-block; vertical-align: middle; }
.breadcrumv1 ul li a { color: rgba(255,255,255,0.9); }
.breadcrumv1 ul li.active a { color: #fff; }
.breadcrumv1 ul li a:hover { color: #fff; }

/* Hero / story banner */
.banner.story-banner {
  background: url('https://www.heritagefurnitureuk.com/images/our_story_banner.jpg') no-repeat center center;
  background-size: cover;
  min-height: 775px;
  position: relative;
  overflow: hidden;
}
.banner.story-banner h1 { font-family: 'didotregular', 'GFS Didot', serif; text-shadow: 1px 1px 1px #000; font-size: 85px; letter-spacing: 0; text-transform: uppercase; line-height: 85px; }
.bannerText.innerbannerText { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; text-align: center; color: #fff; font-family: 'didotregular', 'GFS Didot', serif; }
.bannerText.innerbannerText h1 { margin-bottom: 40px; }
.bannerText.innerbannerText h1 a { color: #fff; text-decoration: none; }
.bannerText.innerbannerText h1 a:hover { text-decoration: none; color: #fff; }
.banner-content.banner-contentv1 {
  max-width: 787px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.85);
  padding: 15px 20px;
  box-sizing: border-box;
  color: #464e52;
  text-align: center;
  font-family: 'filsonproregular', Arial, sans-serif;
}
.banner-content.banner-contentv1 h2 { font-family: 'didotregular', 'GFS Didot', serif; font-weight: normal; letter-spacing: 0; font-size: 32px; text-transform: uppercase; margin-bottom: 15px; }
.banner-content.banner-contentv1 p { margin: 0; line-height: 1.5; text-align: center; }
.down-arrow { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 99; text-align: center; }
.down-arrow a { display: inline-block; width: 84px; height: 84px; border-radius: 50%; background: rgba(255, 255, 255, 0.36); color: #fff; line-height: 84px; font-size: 48px; }
.down-arrow a:hover { background: rgba(255, 255, 255, 0.5); color: #fff; }

/* Dynamic design sections - text + image */
.dynamic-design { margin-top: 50px; }
.dynamic-design .content-Image { width: 70%; max-width: 1000px; margin: 0 auto; overflow: hidden; }
.dynamic-design .content-Image .container { max-width: 786px; width: 100%; margin: 0 auto; }
.dynamic-design .content-Image .leftContent {
  display: inline-block;
  vertical-align: top;
  width: 45%;
  margin-right: 4%;
  float: left;
}
.dynamic-design .content-Image .leftContent h2 {
  font-family: 'didotregular', 'GFS Didot', serif;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-size: 31px;
  line-height: 38px;
  color: #323637;
  font-weight: 600;
}
.dynamic-design .content-Image .leftContent p { margin: 0; line-height: 1.6; text-align: justify; color: #464e52; font-family: 'filsonproregular', Arial, sans-serif; }
.dynamic-design .content-Image .rightContent {
  display: inline-block;
  width: 48%;
  vertical-align: top;
  float: right;
}
.dynamic-design .content-Image .rightContent img { width: 100%; display: block; }
.dynamic-design .content-Image .clear { clear: both; }

/* Full-width content banners with background image */
.banner.content-banner { margin-top: 50px; min-height: 560px; position: relative; background-size: cover; background-position: center; }
.banner.content-banner .bannerText { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; text-align: center; color: #fff; }
.banner.content-banner .banner-content {
  width: 70%;
  max-width: 787px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.80);
  padding: 15px 20px;
  box-sizing: border-box;
  color: #464e52;
}
.banner.content-banner .banner-content h2 {
  font-family: 'didotregular', 'GFS Didot', serif;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 26px;
  color: #323637;
}
.banner.content-banner .banner-content p { margin: 0; line-height: 1.6; font-family: 'filsonproregular', Arial, sans-serif; }
.banner.content-banner.product21 {
  background-image: url('https://www.heritagefurnitureuk.com/images/product-21.jpg');
}
.banner.content-banner.product24 {
  background-image: url('https://www.heritagefurnitureuk.com/images/product-24.jpg');
}

/* Quote section */
.quoteDiv {
  margin: 50px auto 0;
  max-width: 1200px;
  text-align: center;
  background: #dddfe0;
  padding: 30px 20px;
  box-sizing: border-box;
  position: relative;
}
.quoteDiv .message-Wrp { padding: 0 5%; box-sizing: border-box; }
.quoteDiv .message-Wrp h2 {
  font-family: 'didotregular', 'GFS Didot', serif;
  margin-bottom: 15px;
  color: #323637;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.quoteDiv .message-Wrp p { font-family: 'filsonproregular', Arial, sans-serif; text-align: center !important; line-height: 1.6; margin-bottom: 15px; }
.quoteDiv .message-Wrp h4 { font-family: 'filsonproregular', Arial, sans-serif; font-weight: bold; margin: 10px 0 5px; }
.quoteDiv .message-Wrp small { font-family: 'filsonproregular', Arial, sans-serif; display: block; margin-bottom: 10px; }
.quoteDiv i.quote-icon { font-size: 30px; color: #b0b2b4; position: absolute; }
.quoteDiv .fa-quote-left { left: 20px; top: 20px; }
.quoteDiv .fa-quote-right { right: 20px; bottom: 25px; }

@media (max-width: 768px) {
  .banner.story-banner { min-height: 400px; }
  .banner.story-banner h1 { font-size: 40px; line-height: 48px; }
  .banner-content.banner-contentv1 { width: 90%; padding: 15px; }
  .banner-content.banner-contentv1 h2 { font-size: 22px; }
  .dynamic-design .content-Image { width: 95%; }
  .dynamic-design .content-Image .leftContent,
  .dynamic-design .content-Image .rightContent { width: 100%; float: none; margin: 0 0 15px 0; }
  .dynamic-design .content-Image .leftContent h2 { font-size: 22px; }
  .banner.content-banner { min-height: 360px; }
  .banner.content-banner .banner-content { width: 90%; }
  .quoteDiv .fa-quote-left { top: 10px; font-size: 20px; }
  .quoteDiv .fa-quote-right { bottom: 10px; font-size: 20px; }
  .quoteDiv .message-Wrp h2 { font-size: 20px; }
}