/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/************ Building Materials Page CSS *****************/
/* building-materials-banner */
.building-materials-banner{
  background-image: url(https://2435241.fs1.hubspotusercontent-na1.net/hubfs/2435241/Bulding-Materials-banner2.png);
  background-size: cover;
  background-attachment: scroll;
  background-position: top center;
  background-repeat: no-repeat;
  position: relative;
  height: auto;
  margin-top: 80px;
}
.building-materials-banner .banner-content {
  background-color: rgba(255,255,255,0.8);
  padding: 80px 40px;
  border-radius: 0;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .2);
}
.building-materials-banner .banner-content p {
  font-size: 20px;
  color: #444;
  line-height: 32px;
}

/* building-materials-overview */
.building-materials-overview{padding: 60px 0 60px 0;}
.building-materials-overview .row:first-child .col-12{margin-bottom: 60px;}
.building-materials-overview .row:first-child .col-12 p {text-align: center;}
.building-materials-overview .col-7 ul{padding: 0 0 0 30px;}
.building-materials-overview h4{text-align: left;}
.overview-image-parent{padding: 15px; border: solid 1px #ccc;}
.building-materials-overview .row:last-child .col-12{margin-top: 60px; justify-items: center;}


/* Media Query */
@media only screen and (max-width: 767px) {
  .ks-wrapper h1 {font-size: 26px; line-height: 40px;}
  /* building-materials-banner */
  .building-materials-banner{background-position: left; padding: 0;}
  .building-materials .banner-content{padding: 80px 30px;}
  /* building-materials-overview */
  .overview-image-parent{margin-top: 30px;}
  .building-materials-overview .row:last-child .col-12{margin-top: 10px;}
  .overview-button a {margin: 30px 0 0; width: -webkit-fill-available; text-align: center;}
}

@media only screen and (min-width: 768px){
  .ks-wrapper h1 {font-size: 20px; line-height: 32px;}
  /* building-materials-banner */
  .building-materials-banner{background-position: 50%; padding: 0;}
  /* building-materials-overview */
  .overview-button a {margin: 0 20px;}
}

@media only screen and (min-width: 1024px){
  .ks-wrapper h1 {font-size: 30px; line-height: 44px;}
  /* building-materials-banner */
  .building-materials-banner{background-position: 47%; padding: 0;}
  /* building-materials-overview */
  .overview-button a {margin: 0 30px;}
}

@media only screen and (min-width: 1280px){
  .ks-wrapper h1 {font-size: 36px; line-height: 48px;}
  /* building-materials-banner */
  .building-materials-banner{background-position: 45%; padding: 0;}
}

@media only screen and (min-width: 1440px){
  .ks-wrapper h1 {font-size: 38px; line-height: 56px;}
  /* building-materials-banner */
  .building-materials-banner{background-position: 40%; 0;}
}