/**
 * @file
 * Subtheme specific CSS.
 */

h3 {
  margin-bottom: 0.75rem;
}

.frontpagefooter {
  font-size: 48px;
  height: 15%;
}

.card-header {
   padding-left: 0.5rem;
}

.card-header h2 {
   padding-top: 0rem;
}

.card {
   min-width: 300px;
   max-width: 450px;
}

 /* Vertically separate the rows of cards within the flexbox by adding
    a bottom margin to the container of each card generated by the view */
.col {
   margin-bottom: 20px;
}

.owl-next {
  width: 15px;
  height: 100px;
  position: absolute;
  top: 50%;
  right: -25px;
  display: block !important;
  border:0px solid black;
}


.image-style-carousel-1080 {
  height: auto;
  width: 500px;
}


figcaption {
  text-align: center;
}


/* 2020 */

/*
 Make nav menu links black
.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  color: #000000;
}
*/

/* set nav menu links to black regardless of state */
/* removed in trying to sort out footer menu links */
/*
a.nav-link:link, a.nav-link:active, a.nav-link:hover, a.nav-link:visited, li.dropdown-item {
  color: #000000;
  //color: #FFFFFFA6;
}
*/


ul.nav li.dropdown:hover > ul.dropdown-menu {
  display: block;
}

/* Styling for superfix main menu */
.block-superfish {
  width: unset;
  margin-left: auto;
  margin-right: 0px;
}

/* Big images on front page */
body.path-frontpage {
  height: 100%;
}

.dialog-off-canvas-main-canvas {
  height: 100%;
}

.frontpageimage {
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.frontpagefooter {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.sticky-top {
  z-index: 501;
}

/* set vertical position for the menus the navbar and seperate the children so
   that the Secondary Menu region aligns to the right
 */
div#CollapsingNavbar {
    padding: 10px 0px 15px 0;
    justify-content: space-between;
}

/* views seems to strip 'style' tag from Global:custom text field. This style
   is to overide the default max-width set in 'card' class so that it can fill
   the container to the max width */
.cancel-max-width {
  max-width: none;
}

.stretch-card-footer {
  position: absolute;
  bottom: 0;
}

/* Jumbotron overlay text sizes */
.jumbotron-overlay-heading {
  font-size:  8vw;
  text-shadow:1px 1px 10px #000, 1px 1px 30px #777;
}
.jumbotron-overlay-subhead {
  font-size: 5vw;
  text-shadow:1px 1px 10px #000, 1px 1px 30px #777;
}
.jumbotron-overlay-text {
  font-size: 5vw;
  text-shadow:1px 1px 10px #000, 1px 1px 30px #777;
}

.jumbotron-div {
  padding-top: 20vh;
}

/* close up footer menus */
/*nav#block-footer ul li a,  nav#block-edas ul li a{ */
  .site-footer a {
    padding: 0px;
}

/* specify the size of the theme icon */
.navbar-brand div img {
  width:57px;
  height:auto;
}

/* forcibly align the various footer objects */
.site-footer .block {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  border-color:transparent;
}

.site-footer__top h2 {
  border-bottom: transparent;
}

.site-footer__bottom {
  margin-top: 0px;
  border-top: 1px none;
}

.jumbotron-test {
  height: 100%;
}

/* test */
.form-group label {
  margin-bottom: 0;
}

/* Agree terms checkbox does not get form-group class which applies
   margin-bottom so adding the style to the specific per-item class */
.form-item-agree-terms {
  margin-bottom: 1rem;
}

/* Styles for sign-up webform */
.webform-submission-signup-form {
  max-width: 650px;
}
.webform-submission-signup-form input, .webform-submission-signup-form fieldset input {
  font-size: 14px;
  line-height: 1.071em;
  height: 30px;
}

.webform-submission-signup-form label {
  margin-bottom: 0;
}

.webform-submission-signup-form div {
  margin-bottom: 0;
}

.webform-submission-signup-form fieldset {
  margin-bottom: 0;
}

.webform-submission-signup-form > div {
  margin-top: 5px;
}

.webform-submission-signup-form .webform-address > div {
  margin-bottom: 0;
  margin-top: 5px;
}

.webform-submission-signup-form  .webform-address--wrapper .webform-flex--container{
  margin-left: 0px;
  margin-right: 0.5em;
}

.webform-submission-signup-form label {
  font-size: 14px;
}


#edit-address-postal-code {
  width: 130px;
}

#edit-signup-terms {
  margin-top: 1.071em;
}

/* Contact Us webform */
.webform-email-confirm--wrapper {
  margin-left: -1em!important;
  margin-right: -1em!important;
}

@media (max-width: 768px) {
  .webform-email-confirm--wrapper {
    margin-left: 0px!important;
    margin-right: 0px!important;
  }
}

/* unsure if this one is used for the webform */
/*
@media (min-width: 768px)
.webform-flexbox {
  margin: 0px;
}
*/


/* Footer */
.site-footer a{
  font-size: 14px;
  color: #ffffffa6;
}
.region-footer-first, .region-footer-second, .region-footer-third, .region-footer-fourth {
  /*border: 1px solid white;*/
  float: left;
  margin-left: 0px;
  margin-right: 0px;
}

/* Cancel footers 15px indent */
.site-footer .container {
  padding-left: 0px;
}

/* Space the menu down from the title */
.site-footer nav ul {
  margin-block-start: 1em;
}

/* there some nonsense that sets left/right margins to -15px for thee main-wrapper content
   but the selelctor's scope is page-wide, so 'temporarily' resetting this for the footer region */
.site-footer .row {
  margin-left: unset;
  margin-right: unset;
}

/* Adjust the styling of the mailchimp block */
#mc_embed_signup label {
  font-weight: normal !important;
}
#mc_embed_signup form {
  padding-left: 0px !important;
  margin: 0px !important;
}

#mc_embed_signup_scroll p {
  margin-top: 0px;
  margin-bottom: 0px;
  line-height: 1.5em;
}

#mc_embed_signup {
  margin-top: 16px;
  clear: left;
  font:14px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#mce-responses {
  width: unset;
  padding: unset;
}

#mce-success-response {
  width: 100%;
}

#mce_embed_signup .foot {
  grid-template-columns: unset
}

#mce_embed_signup div#responses {
  padding: 0px !important;
  margin: 0px !important;
  width: 100%;
}

/* set nav menu links to white regardless of state */
#block-mainnavigation a.nav-link:link, #block-mainnavigation a.nav-link:active, #block-mainnavigation a.nav-link:hover, #block-mainnavigation a.nav-link:visited  {
  color: #ffffffff;
  font-weight:500;
  border-top: 3px solid #ffffff00;
}
#block-useraccountmenu a.nav-link:link, #block-useraccountmenu a.nav-link:active, #block-useraccountmenu a.nav-link:hover, #block-useraccountmenu a.nav-link:visited {
  color: #ffffffff;
}
#block-mainnavigation .dropdown-menu {
  margin-top: 0px;
  border-top: 0px;
}
#block-mainnavigation .dropdown-item {
  background-color: white;
}
#block-mainnavigation .dropdown-menu a {
  color: #3b3b3b;
}

/* Top navbar tweaks */
/*a.active.is-active.nav-link {*/
#block-mainnavigation a.active.is-active.nav-link {
  border-top: 3px solid white;
}

/* Adjust styling of the navbar when in narrow mode */
@media (max-width: 992px) {

  .nav-link {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  #block-mainnavigation a.nav-link:link {
    padding-left: 8px;
  }
  #block-mainnavigation a.active.is-active.nav-link {
    padding-left: 5px;
    border-top: 0px;
  }
  #block-mainnavigation a.active.is-active.nav-link {
    border-left: 3px solid white;
  }
}

@media (min-width: 1210px) {
}

/* Get Involved menu option in the top nav */
/*
#block-mainnavigation a.nav-link--get-involved{
  background-color: yellow;
  color: black !important;
  border-radius: 8px;
  margin-left: 8px;
}
*/

/*
#block-mainnavigation a.active.is-active.nav-link--get-involved{
  border-top: 3px solid black;
}
*/

/* Get Involved menu option in the footer nav */
.site-footer #block-edas a.nav-link--get-involved{
  background-color: yellow;
  color: black !important;
  border-radius: 4px;
  padding-left: 2px;
}

.site-footer .row {
  display: block
}

/* Adjust the search positioning */
.site-footer .block {
  padding: unset;
}

/* Adjust the footer search box */
.site-footer input {
  font-size: 14px;
  line-height: 1.071em;
  height: 25px;
}

/* Style the footer Search button */
.site-footer button {
  height: 25px;
  font-size: 14px;
  line-height: 1.071em;
}

#block-poweredbydrupal {
  float: right;
}


@media (max-width: 420px){
  div.jumbotron.jumbotron-fluid.frontpagefooter #title-wrap-pre, div.jumbotron.jumbotron-fluid.frontpagefooter #title-wrap-post {
    display: none;
  }
  .frontpagefooter {
    font-size: 1.5em;
  }
}

@media (min-width: 401px){
  div.jumbotron.jumbotron-fluid.frontpagefooter #title-wrap-post {
    display: none;
  }
  .frontpagefooter {
    font-size: 2em;
  }
}

@media (min-width: 576px) {
  div.jumbotron.jumbotron-fluid.frontpagefooter #title-wrap-post {
    display: none;
  }
  .frontpagefooter {
    font-size: 3em;
  }
}


@media (min-width: 768px) {
  div.jumbotron.jumbotron-fluid.frontpagefooter #title-wrap-pre {
    display: none;
  }

  div.jumbotron.jumbotron-fluid.frontpagefooter #title-wrap-post {
    display: none;
  }

  .webform-flexbox {
    margin: 0px;
  }

  .frontpagefooter {
    font-size: 4em;
  }
}

@media (min-width: 980px) {
  div.jumbotron.jumbotron-fluid.frontpagefooter #title-wrap-pre {
    display: inline;
  }
  div.jumbotron.jumbotron-fluid.frontpagefooter #title-wrap-post {
    display: none;
  }
}

@media (min-width: 1210px) {
  div.jumbotron.jumbotron-fluid.frontpagefooter #title-wrap-post {
    display: inline;
  }

}

/* CSS file ordering of the original BS css files seems to override
   this definition, so repeating it here as this file takes precidence */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 255%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

div.navbar-toggler-text {
  display: inline;
  color: white;
  vertical-align: middle;
  padding-right: 5px;
}

/* Turn carousel from slide to fade */
.carousel-fade .carousel-item {
    opacity: 0;
    transition-duration: 1s;
    transition-property: opacity;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
    opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
    opacity: 0;
}

.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
    transform: translateX(0);
    transform: translate3d(0, 0, 0);
}

.event-teaser-date {
    width: 100px;
}


.event--view-mode-teaser h2 a {
  color: #181818;
}

/* Calendar dates */
.date-top {
  background-color: black;
  border-width: thick;
  border-color: black;
  border-style: solid;
  height: 220px;
  width: 180px;
  color: white;
  text-align: center;
  font-size: 1.5rem;
}

.date-mid {
  color: black;
  background-color: white;
  height: 165px;
  font-size: 40pt;
  margin-left:auto;
  margin-right:auto;
  margin-top:10px;
  margin-bottom: 0px;
  padding-top:20px;
}

.date-bot {
  margin-top: 10px;
  font-size: 1.5rem;

}

.view-id-events tr {
  background-color: white;
}

/* Correct the -15px margin left/right in .row */
/* This needs a proper fix. WEB-358 */
.view-taxonomy-term > .view-content > div,
.view-news > .view-content > div,
.view-features > .view-content > div,
.view-getting-involved.view-display-id-panes > .view-content > div,
.view-getting-involved.view-display-id-header > .view-content > div {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.view-contentpage-jumbotron > div {
  margin-right: 0px;
}

.promoted-events-box {
  background-color:  #86b59e;
  width:100%;
  display:flex;
  padding:20px;
  border-radius: 0.25rem;
  /* margin-bottom: 16px; WEB-246 */
}

.promoted-events-title {
  max-width: 250px;
  color:white;
  font-weight:300;
  font-size: 3em;
  line-height: 1.1;
  flex-grow:1;
}

.promoted-events-rhb-container {
  width: auto;
  border-style: none;
  border-width:1px;
  flex-grow:2;
}


.promoted-events-rhb-container-vertical-sub {
  display:flex;
  flex-direction:column;
  border-style:none;
  height: 100%;
}

.promoted-events-row-container {
  color: white;
  font-size: 1.5em;
  font-weight: 200;
  border-top: solid;
  border-width:1px;
  /*margin-top:10px;*/
  padding-top: 7px;
  padding-bottom: 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.promoted-events-row-details {
  padding-left: 15px;
}
.promoted-events-row-details span, .promoted-events-row-more span {
  border-style: none;
  white-space: nowrap;
}

.promoted-events-box a:link, .promoted-events-box a:visited, .promoted-events-box a:hover, .promoted-events-box a:active {
  color: white;
  text-decoration: none;
}

.promoted-block-showmore-footer {
  text-align:right;
  line-height: 1;
  margin-top: auto;
}

.promoted-block-action-text {
  color: white;
  font-size: 1rem;
  border-style: none;
  font-weight: 400;
  border-width: 1px;
}

.promoted-block-flright {
  /* padding-top: 0.5rem; WEB-311 */
  float: right;
}

.promoted-block-action-icon {
  color:white; font-weight:200; font-size: 1.5em
}

.view-display-id-promoted_news_block,
.view-display-id-promoted_features_block, .view-display-id-promoted_news_block,
.block-block-content62067913-bdd1-48e2-97df-2fc37a3d59f7, .view-display-id-block_promoted {
  margin-top: 32px;
}

.block-block-content62067913-bdd1-48e2-97df-2fc37a3d59f7 {
  border-radius: 4px;
}

#lhs-block {
  padding-right: 10px;
}

#rhs-block {
  border-style:dotted;
  border-width: 1px;
}

#block-pagetitle {
  margin-top: 0.5rem; /* WEB-323 */
}

#block-mainpagecontent {
  margin-top: 1.5rem; /* WEB-323 */
}

#block-content {
  color: white;
  font-weight: 200;
  text-align: justify;
  text-justify: inter-word;
  font-size: 1.5em;
}

.promoted-features-image,
.promoted-news-image {
  padding-right: 10px;
}

.promoted-features-image img,
.promoted-news-image img {
  width: 100%;
}

.promoted-news-rhb-container,
.promoted-features-rhb-container {
  width: auto;
}

.promoted-news-rhb-container > div,
.promoted-features-rhb-container > div {
  /* padding-top: 10px; /* WEB-245 */
  /* padding-right: 10px; */
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  height:100%
}

.promoted-news-rhb-item-title,
.promoted-features-rhb-item-title {
  font-size:3em;
  font-weight:300;
  color:white;
  text-align:left;
  line-height:1.1;
  padding-bottom: 0.5em;
  text-transform: none;
}

.promoted-news-rhb-item-body,
.promoted-features-rhb-item-body {
  color: white;
  font-weight: 200;
  text-align: justify;
  text-justify: inter-word;
  font-size: 1.5em;
  margin-bottom: 0px;
}

.promoted-news-rhb-item-body > p,
.promoted-features-rhb-item-body > p {
  margin-bottom: 0px;
}

.promoted-news-rhb-item-readmore,
.promoted-features-rhb-item-readmore {
  float:right;
}


@media (max-width: 767px) {
  .promoted-events-box {
    flex-direction: column;
    padding:10px;
  }
  .promoted-events-title,
  .promoted-news-rhb-item-title,
  .promoted-features-rhb-item-title {
    max-width: none;
    font-size: 1.5em;
    text-align: center;
  }
  .promoted-news-rhb-container > div,
  .promoted-features-rhb-container > div {
    padding-left: 0px;
  }
  .promoted-events-rhb-container-vertical-sub {
    margin-left:unset;
  }
}

/* Article teaser image display */
/* Full (flexbox child) width for the image containers */
.node__article__teaser__image, .node__article__teaser__image > div,
.node__news__teaser__image, .node__news__teaser__image > div {
  width: 100%;
}
/* Overcome the fixed img height & width attributes drupal forces
   Selector will work whether or not the image is 'linked to content' */
.node__article__teaser__image > div > img,
.node__article__teaser__image > div > a > img,
/* news CT has label visually-hidden which results in an additional div */
.node__news_teaser__image > div > div > img,
.node__news__teaser__image > div > div > a > img  {
  width: 100%;
  height: auto;
}

/* outer flexbox wrapper for the child container */
.teaser-grid__child-outer {
  display: flex;
}

.teaser-grid__child-inner {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
  border-bottom: 1px solid #d3d7d9;
}

.promoted-news-row-container,
.promoted-features-row-container {
  /* border-bottom: 1px solid #d3d7d9; */
  /* margin-bottom: 15px; */
  margin-bottom: 0px;
  padding-bottom: 15px;
}

/* Set padding for the image in the
   50% width layout only
   ** Probably redundant now **
*/
.node__article__teaser__50pc >
.node__article__teaser__image,
.node__news__teaser__50pc >
.node__news__teaser__image {
  padding-right: 15px;
}

.node__article__teaser__figure,
.node__news__teaser__figure {
  flex-grow: 0; flex-shrink: 0;
}

.node__article__teaser__50pc,
.node__news_teaser__50pc {
  flex-basis: 50%;
}

.node__article__teaser__75pc,
.node__news__teaser__75pc {
  flex-basis: 75%;
}

/* Customise some existing barrio styles */
.node--view-mode-teaser {
  border-bottom: none;
  margin-bottom: unset;
}

/* Borders for the Articles teasers page */
div#flexbox-child-SML {
  border-left-style: solid;
  border-left-color: rgb(204, 204, 204);
  border-left-width: 1px;
}

div#flexbox-child-SML.promoted-events-row-container {
  border-left-style: none;
}

div#flexbox-child-LRG {

}
/* Media breakpoints for the features grid display
   Defines a 4-across grid for larger screens, a 2-across for
   narrower (e.g. ipad) and 1-across for narrow (mobile)
*/

/* narrow - single width */
@media (max-width: 767px){
  .features-flex{
    flex: 0 0 100%;
  }

  div#flexbox-child-SML {
    border-left-style: none;
  }

  article#teaser-grid-sticky {
    flex-direction: column;
  }
}


/* Use CSS to alter the layout of the Teaser depending on whether the container is "flexbox-child-LRG" (full width) or
   flexbox-child-SML (single width (of 4 units).
*/

#flexbox-child-LRG article {
  display: flex;
}

#flexbox-child-LRG figure {
  flex-basis: 50%;
  flex-grow: 0;
  flex-shrink: 0;
}

#flexbox-child-LRG header {
  flex-basis: 50%;
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
}

#flexbox-child-LRG header .item-title-div {
  margin: auto;
  text-align: center;
}

#flexbox-child-SML article {
  display: flex;
  flex-direction: column;
}

#flexbox-child-SML figure {
  flex-basis: 75%;
}

#flexbox-child-SML header {
}

#flexbox-child-SML header .item-title-div {
  margin: auto;
  text-align: center;
  height: 99px;
}

#flexbox-child-SML .content-body-summary {
  display: none;
}

#flexbox-child-SML .node__meta {
  text-align: left;
}

#flexbox-child-SML h2 {
  font-size: 1.5rem;
  text-align: left;
}

/* narrow */
@media (max-width: 767px) {
  /* Shift 50/50 side-by-side to stacked */
  #flexbox-child-LRG article {
    flex-direction: column;
  }

  /* Remove padding from future events teasers' images */
  .view-display-id-block_future > .view-content > .item-list > ul > li { /* > */
    padding-right: 0px;
  }

}

/* tablet/landscape == 2 across */
@media (min-width: 768px) and (max-width: 979px) {
  .features-flex{
    flex: 0 0 50%;
  }

  div#flexbox-child-SML:nth-child(2n-2) {
    border-left-style: none;
  }
}

/* desktop -- 4 across */
@media (min-width: 980px) {
  .features-flex{
    flex: 0 0 25.0%;
  }

  div#flexbox-child-SML:nth-child(4n-2) {
    border-left-style: none;
  }

  /* Set padding for the image in the
   50% width layout only */
  #flexbox-child-LRG .node__article__teaser__image,
  #flexbox-child-LRG .node__news__teaser__image {
    padding-right: 15px;
  }

}

/* accordion */
#edas-accordion {
  width: 100%;
}

#edas-accordion > .card {
  max-width: unset;
}



.acctest::after {
  width: 100%;

  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  /*border: #000000;*/
  content: "";
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform .2s ease-in-out;
}

.acctest:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");

  transform: rotate(-180deg);
}

/* Testing re-layout of Future Events
*/
.display-flex {
  display: flex;
}

.flex-direction-column {
  flex-direction: column;
}

.width-and-height > img {
  width: 100%;
  height: auto;
}

/* event calendar date display */
.event-calendar-date {
  float: left;
  padding-right: 25px;
  padding-bottom: 25px;
}

/* When vw is up to 767 wide */
@media (max-width: 767px) {
  .below-767 {
    display: none;
  }

  /* narrow display, don't show event-calendar-date block */
  .event-calendar-date {
    display: none;
  }

  .event-teaser-body {
    text-align: center;
  }

  .event-teaser-date {
    width: unset;
  }

  .date-top {
    height: unset;
    width: unset;
  }
}

/* When vw is 767 wide or more */
@media (min-width: 766px) {
  .above-766 {
    display: none;
  }

  .event-teaser-image {
    width: 220px;
  }

  /* WEB-516 Adjust the indentation of the UL/LI on Event pages
   around the date box */
   .orange-column > div > ul {
    list-style: inside;

  }
  /* end */


}

/* Semi-temporary fix to keep page width controlled without relying on a teaser image */
/*
@media (max-width: 574){
  .orange-column {
    width: 1126px;
  }
  
}
*/
@media (min-width: 575){
  .orange-column {
    width: 526px;
  }
  
}
@media (min-width: 768){
  .orange-column {
    width: 706px;
  }

}
@media (min-width: 990){
  .orange-column {
    width: 946px;
  }
}
@media (min-width: 1200){
  .orange-column {
    width: 1126px;
  }
}
/* end */

/* Target the 'Responsive Image Style' images but there
   are no options to add classes eg. resp. image style name
   so the two selectors below are tightly targetted to the
   images (1) embedded in the CKEditor and (2) hero/header.
   Both cases, imag are within picture.
*/
.field--name-field-media-image picture img,
.field--name-field-image picture img {
  width: 100%;
  height: auto;
}

/* Keep the responsive images' containers wide */
div .orange-column .field--name-field-image {
  width: auto;
}