/*
*
* This sheet contains the
* impact inside page styles
*
*/
/* #page * {
  outline: 1px solid blue;
} */
/*
*
* Blogpost Banner
*
*/
#blogpost-container .blogpost-banner {
  height: 400px;
  background-color: #F4F6F7;
  overflow: hidden;
}

@media only screen and (max-width:767px) {
  #blogpost-container .blogpost-banner {
    height: 320px;
  }
}

/*
*
* Blogpost Banner Image
*
*/
#blogpost-container .blogpost-banner-image {
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/*
*
* Blogpost Text
*
*/
#blogpost-container .blogpost-text {
  padding: 60px 0 120px;
}

@media only screen and (max-width:767px) {
  #blogpost-container .blogpost-text {
    padding: 50px 0 80px;
  }
}

/*
*
* Blogpost Heading
*
*/
h1.blogpost-heading {
  margin-top: 20px;
  font-family: 'GraphikMedium';
  font-size: 26px;
  line-height: 36px;
  color: #1652A3;
}

@media only screen and (max-width:767px) {
  h1.blogpost-heading {
    margin-top: 15px;
    font-size: 28px;
    line-height: 36px;
    color: #303843;
  }
}

/*
*
* Section Heading
*
*/
h2.section-heading,
h3.section-heading {
  margin-top: 40px;
  font-family: 'GraphikMedium';
  font-size: 16px;
  line-height: 24px;
  color: #3D3E46;
}

@media only screen and (max-width:767px) {
  h2.section-heading {
    margin-top: 50px;
    font-size: 14px;
    line-height: 22px;
  }

  h3.section-heading {
    margin-top: 60px;
    font-size: 16px;
    line-height: 22px;
  }
}

/*
*
* Blogpost Body Copy
*
*/
#blogpost-container .blogpost-text p {
  margin-top: 20px;
  font-size: 16px;
  line-height: 27px;
  color: #535A64;
}

@media only screen and (min-width:768px) {
  #blogpost-container .blogpost-text h2+p {
    margin-top: 40px;
  }
}

@media only screen and (max-width:767px) {
  #blogpost-container .blogpost-text p {
    margin-top: 30px;
    font-size: 15px;
    line-height: 24px;
    color: #535A64;
  }
}

/*
*
* Blogpost Date
*
*/
#blogpost-container .blogpost-text .blogpost-date {
  margin-top: 0;
  font-family: 'GraphikMedium';
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #A0A4AA;
  text-transform: uppercase;
}

/*
*
* Back Button
*
*/
@media only screen and (min-width:768px) {
  .component__back-button {
    display: none;
  }
}