.banner {
  position: relative;
  overflow: hidden;
}

.banner img {
  height: 384px;
  object-fit: cover;
  width: 100%;
  object-position: center center;
}

.banner .banner-detail {
  position: absolute;
  left: 0;
  bottom: 15px;
  right: 0;
}

.banner-img {
  position: relative;
  min-height: 384px;
}

.banner-img:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.banner-video video {
  display: block;
  width: 100%;
  height: 384px;
  object-fit: cover;
}

.banner-img.no-img-found:after {
  background: var(--very-dark-cyan);
}

.banner .banner-title {
  font-size: 3.75em;
  color: #fff;
  line-height: 1;
  font-weight: 500;
  font-family: 'Josefin Sans', sans-serif;
  text-transform: uppercase;
  margin: 0;
}

.banner .banner-sub {
  font-size: 1.5em;
  line-height: 1.2;
  font-style: italic;
}

.banner .user-name {
  font-size: 1.3125em;
  font-weight: 700;
  margin-bottom: 2px;
}

.banner .user-occupation {
  font-size: 1.3125em;
  line-height: 1.2;
  font-style: italic;
}

.banner .user-detail {
  margin-top: 21px;
}

.banner-style-2 .banner-img {
  display: none;
}

.banner-style-2 {
  min-height: 760px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--very-dark-cyan);
  padding: 40px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner-style-2:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.banner-style-2 .banner {
  z-index: 1;
  width: 100%;
}

.banner-style-2 .banner-detail {
  position: static;
  color: #fff;
}

.banner-style-2 .banner-title {
  font-size: 3em;
  max-width: none;
  margin-bottom: 79px;
}

.banner-style-2 .additional-info {
  border-top: 1px solid #fff;
  padding-top: 16px;
  margin-top: 90px;
  max-width: 80%;
}

.banner-style-2 .additional-title {
  font-size: 1.5em;
}

.banner-style-2 .additional-info p {
  font-weight: 300;
}

.banner-container {
  max-width: 600px;
}

.banner-sub-title {
  font-size: 1.5em;
  color: var(--vivid-orange-1);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.banner-sub-style-2 {
  font-weight: 300;
  color: #fff;
  text-transform: capitalize;
  font-style: italic;
}

.quote-default .banner-detail .banner-title {
  line-height: 1.25;
  margin-bottom: 48px;
  line-height: 1.18;
}

.quote-default .banner-container {
  max-width: 500px;
}

/*banner text center bottom*/
.quote-center {
  align-items: flex-end;
  padding-bottom: 60px;
}

.quote-center:after {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
}

.quote-center .banner-container {
  max-width: 500px;
  margin: 0 auto;
}


/*banner text right top*/
.quote-right {
  align-items: baseline;
}

.quote-right:after {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
}

.quote-right .banner-container {
  max-width: 500px;
  margin-left: auto;
  padding-top: 100px;
}

/*video banner*/
.video-style {
  align-items: flex-end;
  padding-bottom: 80px;
  min-height: 726px;
}

.video-style .banner-title {
  font-size: 3.75em;
  margin-bottom: 33px;
}

.video-block {
  margin-bottom: 70px;
}

.banner-btn-block {
  display: flex;
}

.banner-btn-block .share-btn-wrap {
  margin: unset;
}

.banner-btn-block>*:not(:last-child) {
  margin-right: 45px;
}

.video-style .banner {
  position: static;
}

.video-style .video-pop {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: none;
}

.video-style .video-pop.active {
  display: block;
}

.video-style .video-pop iframe,
.video-style .video-pop p {
  width: 100%;
  height: 100%;
}

.video-style .type {
  margin-bottom: 34px;
}

.video-style .banner-btn-block>*:not(:last-child) {
  margin-right: 50px;
}

/*detail page banner || news*/
.banner-detail-header .banner-detail {
  bottom: 23px;
}

.banner-detail-header .banner-title {
  font-size: 3em;
  line-height: 1.1;
  /*329423 Issue 8*/
  line-height: 1.21;
}

.banner-detail-header .type {
  margin-bottom: 17px;
  margin-bottom: 14px;
  min-width: auto;
  /* 329423 */
  padding: 2px 20px 3px;
}

.tfc-header .banner-title {
  font-size: 3em;
  max-width: none;
  margin-bottom: 18px;
}

.tfc-header .date-field {
  font-size: 2.875em;
  font-weight: 300;
}

.tfc-header .time-field,
.tfc-header .place {
  font-size: 1.75em;
}

.tfc-header .place {
  font-weight: 600;
}

.tfc-header .date-field,
.tfc-header .time-field,
.tfc-header .place {
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  line-height: 1.1;
}

.tfc-header .banner-detail {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}

/*project banner*/
.project-banner .banner-detail {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}

.project-banner .type {
  min-width: auto;
  padding: 0;
  margin: 0;
  font-size: initial;
}

.project-banner .banner-title {
  font-size: 2.25em;
}

.project-banner .type-wrap {
  display: flex;
  flex-wrap: wrap;
}

.project-banner .type-wrap .type:not(:last-child) {
  margin-right: 20px;
}

.project-banner .type-multiple ul {
  display: flex;
  flex-wrap: wrap;
}

.project-banner .type-multiple li:not(:last-child) {
  margin-right: 20px;
}

.project-banner .type-wrap li {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  margin-bottom: 13px;
  display: flex;
  align-items: center;
  min-width: auto;
  min-height: 32px;
  font-size: 1.125em;
}

.project-banner .project-id {
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  font-size: 1.3125em;
  line-height: 1;
  margin-bottom: 57px;
}

/*banner center*/
.banner-center .banner-detail {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}

/*old*/
.banner-old .banner-detail {
  transform: translate(0);
  position: static;
  min-height: 384px;
  display: flex;
  align-items: flex-end;
  padding: 50px 0;
}

.banner-old .banner-img img {
  height: auto;
}

.banner-old .banner-img:after {
  display: none;
}

.banner-old {
  background: var(--very-dark-cyan-2);
}

.banner-old .banner-img {
  min-height: auto;
}

/*detail background img*/
.banner-background-image {
  display: none;
}

.custom-gradinet-img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 384px;
  position: relative;
}

.custom-gradinet-img .banner {
  position: static;
}

.custom-gradinet-img.banner-old {
  background-size: 100% 384px;
  background-position: top left;
}

/*changemaker logo on banner*/
.image-with-logo {
  background: var(--gray);
}

.image-with-logo:after {
  background: var(--bg-tint);
}

.image-with-logo img {
  object-fit: contain;
  width: auto;
  height: auto;
  padding: 0 30px 0;
  position: absolute;
  bottom: 134px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.image-with-logo .type {
  padding-left: 20px;
  padding-right: 20px;
}

/*banner-header-cop*/
.banner-header-cop {
  background: #fff;
  min-height: auto;
}

.banner-header-cop .type {
  background: var(--gray);
  color: #fff;
  box-shadow: none;
}

.banner-header-cop .date-field,
.banner-header-cop .banner-title,
.banner-header-cop .place {
  color: var(--gray);
}

.banner-header-cop .banner-detail {
  padding: 35px 0;
  min-height: 300px;
}

/*333228*/
.banner-title+.banner-sub-title {
  margin-top: 13px;
}

.detail-title+.banner-sub-title {
  margin-top: -7px;
  margin-bottom: 25px;
}

/*just transition page*/
.just-transition-page .banner img,
.just-transition-page .banner-img,
.just-transition-page .custom-gradinet-img,
.toolbox-ast-detail .banner img,
.toolbox-ast-detail .banner-img,
.toolbox-ast-detail .custom-gradinet-img {
  height: 405px;
  min-height: auto;
}

.just-transition-page .banner .banner-title,
.toolbox-ast-detail .banner .banner-title {
  font-size: 2.625em;
  margin-bottom: 45px;
}

/*decision tracker detail page banner*/
.decisions-banner .banner-detail {
  position: static;
  transform: none;
  padding: 40px 0;
}