/* 
    Rendering: Page Banner Title Image
*/
.banner-image {
  position: relative; }

/* - - referencing banner on Cornerstone 1.0 pages - - */
#container .banner-image .page-header__art {
  margin-bottom: 0; }

#container .banner-image .page-header__figure-caption {
  max-width: 1170px;
  padding: 8px 15px 0;
  color: #666;
  font-size: .8rem;
  text-align: right;
  font-style: italic;
  margin: 0 auto; }

@media (max-width: 978.98px) {
  #container .banner-image .container {
    padding-left: 0;
    padding-right: 0; } }

/* - - referencing banner on Cornerstone 2.0 pages - - */
@media (min-width: 768px) {
  #smu-main .component-page-header.banner-image .page-header__art .page-header__figure-caption {
    width: 50%; }
  #smu-main .component-page-header.banner-image > .container {
    /* - - change styling container width to 100% for Cornerstone 2.0 pages - - */
    max-width: 100%; }
  #smu-main .component-page-header.banner-image > .page-header__art {
    /* - - make full width if container attribute is not present - - */
    padding-left: 3vw;
    padding-right: 3vw;
    margin-left: 0;
    margin-right: 0;
    width: 100%; } }

@media (max-width: 767.98px) {
  #smu-main .component-page-header.banner-image .page-header__art {
    padding-left: 5vw;
    padding-right: 5vw; }
  #smu-main .component-page-header.banner-image > .container > .page-header__art {
    padding-left: 0;
    padding-right: 0;
    display: block !important; }
    #smu-main .component-page-header.banner-image > .container > .page-header__art > img {
      display: block !important; } }