/*
 Theme Name:   NowKalamazoo V2
 Description:  A bootstrap-based theme for NowKalamazoo. Based on the Bootsrap 4 on WordPress blank theme from Babobski.
 Author:       Ben C Jones
 Author URI:   https://bencjones.com
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  nowkalamazoo
*/

@media only screen and (max-width: 575px) { /* Styles that apply to COL-SM and larger */ }
@media only screen and (min-width: 576px) { /* Styles that apply to COL-SM and larger */ }
@media only screen and (min-width: 768px) { /* Styles that apply to COL-MD and larger */ }
@media only screen and (min-width: 992px) { /* Styles that apply to COL-LG and larger */ }


/* -------------------------------------------------------------------------- */
/*	1. Base
/* -------------------------------------------------------------------------- */

/* Colors */
.white {
  color: #FFFFFF;
}
.black {
  color: #000000;
}
.gray {
  color: #333333;
}
.light-gray {
  color: #666666;
}
.red {
  color: #860B19;
}
  .dark-red {
    color: #6D0000;
  }
  .light-red {
    color: #B93E4C;
  }
.blue {
  color: #0E315B;
}
  .dark-blue {
    color: #001842;
  }
  .light-blue {
    color: #41648E;
  }
.orange {
  color: #FF6400;
}
  .dark-orange {
    color: #E05A00;
  }
  .light-orange {
    color: #FF8533;
  }

.bg-white {
  background-color: #FFFFFF;
}
.bg-black {
  background-color: #000000;
}
.bg-red {
  background-color: #860B19;
}
  .bg-dark-red {
    background-color: #6D0000;
  }
  .bg-light-red {
    background-color: #B93E4C;
  }
.bg-blue {
  background-color: #0E315B;
}
  .bg-dark-blue {
    background-color: #001842;
  }
  .bg-light-blue {
    background-color: #617B9A;
  }
.bg-orange {
  background-color: #FF6400;
}
  .bg-dark-orange {
    background-color: #E05A00;
  }
  .bg-light-orange {
    background-color: #FF8533;
  }
body {
  color: #000000;
}

/* Fonts */
.serif {
  font-family: 'Playfair Display', Times, serif;
}
.sans-serif {
  font-family: 'Oswald', Arial, sans-serif;
}
body, p, h4, .h4 {
  font-family: 'Playfair Display', Times, serif;
}
h1, .h1, h2, .h2, h3, .h3 {
  font-family: 'Oswald', Arial, sans-serif;
  font-weight: 400;
}
h1, .h1 {
  font-size: 48px;
  line-height: 125%;
}
h2, .h2 {
  font-size: 36px;
  line-height: 125%;
  font-weight: 400;
}
h3, .h3 {
  font-size: 24px;
  font-weight: 400;
}
p, h4, .h4 {
  font-size: 18px;
  line-height: 1.8em;
  margin-bottom: 1.8em;
}
h4, .h4 {
  font-weight: bold;
}
a {
  color: #FF6400;
}
a:hover,a:active {
  color: #E05A00;
}
.post-meta, .post-meta p {
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
}
.byline {
  font-weight: 400;
}
.timestamp {
  font-weight: 300;
}
.light {
  font-family: 'Oswald', Arial, sans-serif;
  font-weight: 300;
}
.caption, figcaption {
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 14px;
  line-height: 21px;
  color: #333333;
  font-weight: 400;
  margin-top: 5px;
}
.image-credit {
  font-family: 'Oswald', Arial, sans-serif;
  font-weight: 300;
}
.secondary-features .category, .secondary-features .category a,
article .category, article .category a {
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 14px;
  line-height: 125%;
  color: #0E315B;
  font-weight: 400;
}
.timestamp {
  font-family: 'Oswald', Arial, sans-serif;
}
.logo {
  display:block;
  border-radius:75px;
  text-align:center;
  background-color:#666666;
  background-image:url("./images/nowkalamazoo-logo.svg");
  background-size: contain;
}

@media only screen and (min-width: 992px) { /* Styles that apply to COL-LG and larger */
  h1, .h1 {
    font-size: 36px;
  }
  h2, .h2 {
    font-size: 24px;
  }
  h3, .h3 {
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
  }
  h4, .h4 {

  }
  .caption, figcaption {
    font-size: 18px;
    line-height: 175%;
    margin-top: 10px;
  }
  .secondary-features .category, .secondary-features .category a,
  article .category, article .category a {
    font-size: 18px;
  }
  .post-meta, .post-meta p {
    font-size: 18px;
    line-height: 21px;
  }
}

/* Layout tweaks */
.row {
  margin-left: 0;
  margin-right: 0;
}
@media only screen and (min-width: 992px) { /* Styles that apply to COL-LG and larger */
  .row {
    margin-left: -15px;
    margin-right: -15px;
  }
}

/* -------------------------------------------------------------------------- */
/*	2. Head
/* -------------------------------------------------------------------------- */

#site-branding {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 3px solid #B93E4C;
}
#site-logo {
  padding-left: 0;
  padding-right: 0;
}
#site-logo .logo {
  width:60px;
  height:60px;
}
#titlebar a:hover {
  text-decoration: none;
}
#site-title {
  font-family: 'Playfair Display', Times, serif;
  font-size: 24px;
  color: #FFFFFF;
  line-height: 1.2em;
}
#site-tagline {
  font-family: 'Oswald', Arial, sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #FFFFFF;
}
@media only screen and (min-width: 768px) { /* Styles that apply to COL-MD and larger */
  #site-logo {
    padding-left: 0;
    padding-right: 0;
  }
  #site-logo .logo {
    width: 90px;
    height:90px;
  }
  #site-title {
    font-size: 48px;
  }
  #site-tagline {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) { /* Styles that apply to COL-LG and larger */
  #site-logo {
    padding-left: 15px;
    padding-right: 15px;
  }
  #site-logo .logo {
    width: 100px;
    height:100px;
  }
}

/* 2.1. Navigation ---------------------------------------------------------- */

/* nav toggle */
button.navbar-toggler .navbar-toggler-icon {
  background-size: contain;
}
button.navbar-toggler.collapsed .navbar-toggler-icon {
  background-image:url("./images/hamburger.svg");
}
button.navbar-toggler .navbar-toggler-icon {
  background-image:url("./images/close.svg");
}

.navbar {
  padding: 0;
  border-bottom: 1px solid #860B19;
}
.navbar-collapse.show, .navbar-collapse.collapsing {
  padding: .5rem 1rem;
}
#menu-primary {
  background-color: #FFFFFF;
  text-transform: lowercase;
}
#menu-main-menu > .menu-item {
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 36px;
  font-weight: 300;
  color: #333333;
}
#menu-main-menu > .menu-item a {
  color: #333333;
}
.dropdown-toggle::after {
  display: none;
}
.dropdown-toggle .iconify {
  padding-left: .25em;
  font-size: 1em;
}

/* Mobile sticky header */
#site-header {
  top: 0;
  z-index: 100;
  position: fixed;
  width: 100%;
  box-shadow: 0px 1px 5px #000;
}

@media only screen and (min-width: 768px) { /* Styles that apply to COL-MD and larger */
  #menu-main-menu > .menu-item {
    font-size: 48px;
  }
  body {
    padding-top: 7em;
  }
}
@media only screen and (min-width: 992px) { /* Styles that apply to COL-LG and larger */
  #menu-primary {
    background-color: #860B19;
  }
  #menu-main-menu > .menu-item {
    font-size: 24px;
    color: #FFFFFF;
  }
  #menu-main-menu > .menu-item > a {
    color: #FFFFFF;
  }
  body {
    padding-top: 11em;
  }
}



/* -------------------------------------------------------------------------- */
/*	3. Footer
/* -------------------------------------------------------------------------- */

#footer, #footer .menu-head {
  background-color: #860B19;
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 36px;
  color: #FFFFFF;
  line-height: normal;
}
#footer .container {
  padding-top: 4vw;
  padding-bottom: 1rem;
}
#footer #widget-newsletter,
#footer #menu-footer-wrapper {
  text-align: center;
}

#menu-footer-wrapper {
  display: flex;
  justify-content: center;
  flex-flow: column wrap;
  margin: .8em auto;
  text-align: left;
}
#menu-footer-wrapper > div {
  margin: .5em 0;
}
#menu-footer-wrapper ul,
#menu-footer-wrapper p {
  margin-left: auto;
  margin-right: auto;
}
#footer .menu-head {
  font-weight: 400;
  margin-bottom: 0;
}
#footer .menu-item a {
  color: #FFFFFF;
  font-weight: 300;
}
#menu-social .iconify {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  margin-bottom: 5px;
}
.footer-bottom {
  margin-top: 1em;
  margin-bottom: 1em;
}
.footer-bottom > * {
}
.footer-copyright {
  font-family: 'Oswald', Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  text-align: center;
}
.footer-copyright a {
  color: #FFFFFF;
}
.menu-policies-container {
  font-weight: 300;
  font-size: 18px;
}
.menu-policies-container li a {
  padding: 0 1em;
}
.menu-policies-container li::after {
  content: "\2022";
}
.menu-policies-container li:last-of-type::after {
  content: "";
}
@media only screen and (min-width: 992px) { /* Styles that apply to COL-LG and larger */
  #footer .menu-head {
    font-size: 24px;
  }
  #menu-footer-wrapper {
    flex-flow: row nowrap;
    font-size: 24px;
  }
  #menu-footer-wrapper > div {
    margin: unset;
  }
  #menu-footer-wrapper > * {
    text-align: left;
  }
  #menu-social .iconify {
    width: 25px;
    height: 25px;
    margin-right: 10px;
    margin-bottom: 5px;
  }
}


/* -------------------------------------------------------------------------- */
/*	4. Forms
/* -------------------------------------------------------------------------- */

label, button {
  font-family: 'Oswald', Arial, sans-serif;
}
.btn-primary,
.wp-block-button__link {
  color: #fff;
  background-color: #B93E4C;
  border-color: #B93E4C;
  border-radius: .25rem;
}
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled).active,
.wp-block-button__link:hover,
.wp-block-button__link:not(:disabled):not(.disabled).active {
  background-color: #6D0000;
  border-color: #6D0000;
  color: #FFFFFF;
}
.btn-orange {
  color: #fff;
  background-color: #FF6400;
  border-color: #FF6400;
  border-radius: .25rem;
}
.btn-orange:hover,
.btn-orange:not(:disabled):not(.disabled).active {
  background-color: #E05A00;
  border-color: #E05A00;
  color: #FFFFFF;
}

textarea {
  padding: 10px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
      -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
       -o-transition: border linear 0.2s, box-shadow linear 0.2s;
          transition: border linear 0.2s, box-shadow linear 0.2s;
}
textarea:focus {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
      -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
       -o-transition: border linear 0.2s, box-shadow linear 0.2s;
          transition: border linear 0.2s, box-shadow linear 0.2s;
}
textarea:focus::placeholder {
  opacity: .3;
}
textarea:hover::placeholder {
  opacity: .5;
}
textarea::placeholder {
  transition: opacity .3s ease-out;
}



/* -------------------------------------------------------------------------- */
/*	5. Media
/* -------------------------------------------------------------------------- */

.featured-media {
}
.featured-media img,
.wp-block-image img {
  height: auto;
  max-width: 100%;
}
.featured-media .caption .image-credit {
  margin-left: 5px;
}
.featured-media .caption .image-credit a {
  color: #333333;
}
.featured-media .caption .image-credit a:hover {
  color: #000000;
}
figure.is-type-video > div {
  overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
  height:0;
}
figure.is-type-video iframe {
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
}


/* -------------------------------------------------------------------------- */
/*	6. Share
/* -------------------------------------------------------------------------- */

.share svg {
  width: 30px;
  height: 30px;
  color: #FF6400;
}
.share a {
  display: inline-block;
  width: 40px;
  height: 40px;
  padding: 5px;
}
.share a:hover svg {
  opacity: 0.5;
}
.share svg[data-icon="ant-design:twitter-square-filled"] {
  color: #1da1f2;
}
.share svg[data-icon="ant-design:facebook-filled"] {
  color: #4267B2;
}
article .share svg {
  margin: .8em;
}
article .share.justify-content-left svg {
  margin: .5em;
}
.justify-content-left.share {
  border-top: 1px solid #333333;
  padding-top: .3em;
  margin-top: 2em;
}
.justify-content-center.share {
  padding-bottom: 2em;
}
.justify-content-left.share::before {
  font-family: 'Oswald', Arial, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 125%;
  content: "Share";
  padding: 10px 15px 0;
  color: #333333;
}

@media only screen and (min-width: 992px) { /* Styles that apply to COL-LG and larger */
  .share svg {
    display: block;
    margin-bottom: .5em;
  }
}

/* -------------------------------------------------------------------------- */
/*	7. Info popup
/* -------------------------------------------------------------------------- */
.info-popup {
  visibility: hidden;
  position: absolute;
  width: 0px;
  height: 30px;
  border: 0px;
  border-radius: 2px;
  padding: 0;
  background-color: #FFFFFF;
  box-shadow: 1px 1px 2px #666;
  z-index: 1000;
  font-size: 14px;
  color: #00002B;
  line-height: 20px;
  overflow: hidden;
  -webkit-transition: all 100ms ease;
  -moz-transition: all 100ms ease;
  -o-transition: all 100ms ease;
  transition: all 100ms ease;
}
.share a:hover .info-popup,
.original:hover .info-popup {
  visibility: visible;
  width: max-content;
  padding: 3px 7px;
  border: 1px solid #666;
  -webkit-transition: all 100ms ease 500ms;
  -moz-transition: all 100ms ease 500ms;
  -o-transition: all 100ms ease 500ms;
  transition: all 100ms ease 500ms;
}
.share a, .share a svg, .original {
  -webkit-transition: all 100ms ease 100ms;
  -moz-transition: all 100ms ease 100ms;
  -o-transition: all 100ms ease 100ms;
  transition: all 100ms ease 100ms;
}
article .share.justify-content-left svg {
  margin: .5em;
}
.share .info-popup {
  margin-top: -40px;
  left: 60px;
}
.share.justify-content-left .info-popup {
  margin-top: unset;
  left: unset;
}
.original {
  position: relative;
}
.primary-feature .info-popup {
  top: 65px;
  left: 60px;
}


/* -------------------------------------------------------------------------- */
/*	8. Post archive
/* -------------------------------------------------------------------------- */

/* Front-page Hero section */
#frontpage .h1 {
	font-size: 36px;
}
#frontpage .h2 {
	font-size: 18px;
	font-weight: 300;
}
.primary-feature .feature-hed p {
  color: #000000;
  margin-top: .35em;
  margin-bottom: .5em;
}
.primary-feature .excerpt p {
  margin-top: 1em;
}
.primary-feature .feature, .primary-feature .feature:hover {
  color: #000000;
  text-decoration: none;
}
.primary-feature a:hover .feature-hed p {
  color: #000000;
  text-decoration: underline black;
}
.primary-feature a:hover .excerpt p {
  text-decoration: none;
}
.secondary-features .feature {
	position: relative;
	display: block;
	width: 100%;
	color: #FFFFFF;
}
.feature img {
	width: 100%;
}
.secondary-features .feature .feature-hed {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 1em 1em .25em;
  width: 100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 18.75%, rgba(0, 0, 0, 0.8) 48.62%, rgba(0, 0, 0, 0.8) 100%);
}
.secondary-features .feature p {
  -webkit-transition: padding .25s ease;
  -moz-transition: padding .25s ease;
  -o-transition: padding .25s ease;
  transition: padding .25s ease;
}
.secondary-features .feature:hover p,
.secondary-features .feature:active p {
	text-decoration: underline;
	color: #ffffff;
  padding: 1em 0 2em;
  -webkit-transition: padding .25s ease;
  -moz-transition: padding .25s ease;
  -o-transition: padding .25s ease;
  transition: padding .25s ease;
}
.feature-spacer {
	background-color: #000000;
}
.primary-feature {
  order: 1;
}
.secondary-features {
  order: 3;
}
.secondary-features .secondary-features-wrapper {
  margin-left: 0;
  padding-left: 0;
  border-left: 0px;
	height: 100%;
}
.secondary-features .secondary-features-wrapper > div:first-of-type {
	margin-bottom: 1em;
}
.secondary-features .h2 a {
	color: black;
}
.secondary-features .excerpt p {
  font-size: 14px;
  margin-top: 1em;
}
.frontpage-sponsor {
  order: 2;
	padding: 1em;
  margin: 2em auto;
  max-width: 90%;
}
.frontpage-sponsor div {
	text-align: center;
}
.frontpage-sponsor-wrapper {
	opacity: .75;
	padding: .5em;
}
.frontpage-sponsor-wrapper * {
	opacity: 1;
}
.primary-feature {
  margin-bottom: 2em;
}

@media only screen and (min-width: 768px) { /* Styles that apply to COL-MD and larger */
  .feature-image,
  .feature a {
    height: calc(50vw*.75);
  }
}

@media only screen and (min-width: 992px) { /* Styles that apply to COL-LG and larger */
  #frontpage .h1 {
  	font-size: 48px;
  }
  #frontpage .h2 {
  	font-size: 24px;
  }
  .secondary-features {
    order: 2;
  }
  .secondary-features .secondary-features-wrapper {
  	margin-left: .5em;
  	padding-left: 1.5em;
  	border-left: 1px solid #666666;
  }
  .frontpage-sponsor {
    order: 3;
    max-width: 100%;
  }
  .feature-image,
  .feature a {
    height: calc(25vw*.75);
  }
}

/* Archive */
main {
	margin-top: 1em;
	margin-bottom: 1em;
}
#archive h1 {
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 30px;
}
.post-item {
	margin-bottom: 1em;
	border-top: 1px solid #333333;
}
.post-item:first-of-type {
  border-top: 0;
  margin-top: 1em;
}
.post-item .featured-image {
	margin-top: 1em;
}
.post-item .featured-image img {
	width: 100%;
	height: auto;
}
.post-item .featured-text .featured-title a {
	color: #212529;
}
.post-item .featured-text {
	padding-top: 1em;
}
.original.overimage {
  position: relative;
}
.original .logo {
  width:50px;
  height:50px;
  border: 2px solid #666;
}
.original.inline {
  display: inline;
}
.original.inline .logo {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  top: 5px;
}

@media only screen and (min-width: 768px) { /* Styles that apply to COL-MD and larger */
	.post-item {
		margin-bottom: 2em;
	}
	.post-item .featured-image {
		margin-top: 0;
		padding-left: 0;
	}
	.post-item .featured-image img {
		margin-top: -1px;
		max-width: 100%;
		object-fit: contain;
		object-position: top;
	}
  #archive h1 {
    margin-left: -15px;
    margin-right: -15px;
  }
}


/* Pagination */
.pagination-wrapper {
  font-family: 'Oswald', Arial, sans-serif;
  font-weight: 300;
  font-size: 24px;
}
.pagination {
  text-align: center;
}
.pagination .nav-links {
  margin: 0 auto;
}
.pagination .page-numbers {
  padding: 0 10px;
}
.pagination .page-numbers.current {
  color: #fff;
  background-color: #FF6400;
  padding: 0 10px;
  border-radius: 2px;
}
.page-numbers.dots {
  color: #FF6400;
  padding: 0;
}
.pagination span.prev,
.pagination span.next {
  display: none;
}
.screen-reader-text {
  display: none;
}
@media only screen and (min-width: 992px) { /* Styles that apply to COL-LG and larger */
  .pagination-wrapper {
    font-size: 36px;
  }
}

/* -------------------------------------------------------------------------- */
/*	9. Post
/* -------------------------------------------------------------------------- */

#site-content {
  padding-top: .25em;
  padding-bottom: 1em;
}
article {
  margin-top: 1em;
  margin-bottom: 1em;
}
article .category a {
  margin-right: 20px;
}
article .category a:last-of-type {
  margin-right: 0;
}
article .entry-title {
  margin: .75em 0 1em;
}
article .excerpt {
  font-style: italic;
  margin-bottom: 2em;
}
article .featured-media {
  margin-bottom: 3em;
}
article .content > * {
  margin-bottom: 1.8em;
}
article .content p {
  line-height: 1.8em;
}
article .content h2,
article .content h3,
article .content h4 {
   margin: 3rem 0 1em;
}
article .content li {
  font-size: 18px;
  line-height: 1.8em;
}
.original.topstory {
  padding: 0 10px 10px;
  border: 1px solid #860B19;
  margin-bottom: 2em;
}
.original.topstory .logo {
  display: inline-block;
  position: relative;
  top: 8px;
  width: 30px;
  height: 30px;
}
.original.topstory p {
  display: inline;
  margin-left: 10px;
}
.post-meta {
  padding: .8em;
  border-top: 5px solid black;
  border-bottom: 1px solid black;
  margin: 1em 0;
}
.yarpp-related {
  border-top: 1px solid #00002B;
}
.read-more,
.latest-posts {
  margin: .8em 0;
}
.read-more h3,
.latest-posts h3 {
  font-weight: 400 !important;
  font-size: 24px !important;
  line-height: 1.2em !important;
  padding: .8em 0 !important;
}
.read-more > .row > div,
.latest-posts > div {
  margin-bottom: 2em;
}
.read-more a,
.latest-posts a {
  color: #333333;
}
.read-more a:hover p {
  text-decoration: underline;
}
.read-more img,
.latest-posts img {
  width: 100%;
  height: auto;
}

@media only screen and (min-width: 992px) { /* Styles that apply to COL-LG and larger */
  #site-content {
    padding-top: 1em;
    padding-bottom: 1em;
  }
  .share {
    margin-top: 1em;
  }
  .post-meta {
    padding: 1.2em;
  }
}


/* -------------------------------------------------------------------------- */
/*	10. Sponsor Spaces
/* -------------------------------------------------------------------------- */

/* We have to do this for the full-width sponsor spaces below */
body, html { overflow-x: hidden; }
.g p, .g h1, .g h2, .g h3, .g a {
  font-family: 'Oswald', Arial, sans-serif;
  font-weight: 300;
}
.g p {
  font-size: 1.25em;
}
.donor_appeal {
}
.donor_appeal p:last-of-type {
margin-bottom: .5em;
}
.g-2, .g-3 {
  overflow: visible !important; /* Overrrides default */
}

/* Style 1 */
.donor_appeal--v1 {
  padding: 0 30px;
  background: #FFFFFF;
  margin: 100px 0;
  color: #FFFFFF;
}
.donor_appeal--v1 div::before, .donor_appeal--v1 div::after {
content: "";
position: absolute;
border: 20px solid transparent;
border-radius: 7px;
width: 100px;
height: 100px;
}
.donor_appeal--v1 div::before {
border-top: 20px solid #860B19;
border-left: 20px solid #860B19;
top: -30px;
left: -30px;
}
.donor_appeal--v1 div::after {
border-right: 20px solid #860B19;
border-bottom: 20px solid #860B19;
bottom: -30px;
right: -30px;
}
.donor_appeal--v1 div {
position: relative;
padding: 20px;
background: #B93E4C;
text-align: left;
max-width: 520px;
margin: 0 auto;
}
.donor_appeal--v1 p:last-of-type {
margin-bottom: .5em;
}
.donor_appeal--v1 a { color: black; font-weight: bold; }
.donor_appeal--v1 a:hover { color: black; }


/* Style 2 */
.donor_appeal--v2 {
  position: relative;
  margin: 0 -30px;
  padding: 0 30px;
  background: #0E315B;
}
.donor_appeal--v2::before, .donor_appeal--v2::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9600px;
  right: 100%;
  background: #0E315B;
}
.donor_appeal--v2::after {
  width: 500px;
  left: 100%;
  background: #0E315B;
}
.donor_appeal--v2 div {
padding: 20px;
background: rgba(65, 100, 142, 0.6);
color: #FFFFFF;
text-align: left;
margin: 0 auto;
}
.donor_appeal--v2 a { color: black; font-weight: bold; }
.donor_appeal--v2 a:hover { color: black; }

/* Style 3 */
.donor_appeal--v3 {
  position: relative;
  margin: 0 -30px;
  padding: 0 30px;
  background: #860B19;
}
.donor_appeal--v3::before, .donor_appeal--v3::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9600px;
  right: 100%;
  background: #860B19;
}
.donor_appeal--v3::after {
  width: 500px;
  left: 100%;
  background: #860B19;
}
.donor_appeal--v3 div {
padding: 20px;
background: #B93E4C;
color: #FFFFFF;
text-align: left;
margin: 0 auto;
}
.donor_appeal--v3 a { color: black; font-weight: bold; }
.donor_appeal--v3 a:hover { color: black; }

/* Lined */
.g-single div.sponsor-lined {
  border-top: 3px solid #333;
  border-bottom: 1px solid #333;
  padding: 20px 10px;
  margin: 30px 10px 50px 10px;
}
.g-single div.sponsor-lined h2 {
  margin-top: .8em;
  font-size: 2em;
}
.g-single div.sponsor-lined figure {
  text-align: center;
}
@media only screen and (min-width: 992px) { /* Styles that apply to COL-LG and larger */
  .g-single div.sponsor-lined {
    margin: 30px 50px 50px 50px;
  }
  .g-single div.sponsor-lined h2 {
    margin-top: .8em;
    font-size: 36px;
  }
  .g-single div.sponsor-lined figure {
    float: left;
    text-align: left;
  }
}


/* 10.1. Header widget ---------------------------------------------------- */
.sponsor-header-widget {}

/* 10.2. Footer widget ---------------------------------------------------- */
.sponsor-footer-widget {}

/* 10.3. Frontpage ----------------------------------------------------------- */
/* See frontpage section */
.frontpage-sponsor {

}

/* 10.4. In-post after P2 ---------------------------------------------------- */
.sponsor-post-p2 {}

.g-1 {
  text-align: center;
}
.g-1::before {
    content: "(Article continues below)";
    font-size: 1em;
    font-style: italic;
    position: relative;
    top: 20px;
}
.g-1 .g-single {
  text-align: left;
}

.g-1 .g-single > div {
  border-top: 3px solid #333;
  border-bottom: 1px solid #333;
  padding: 20px 10px;
  margin: 30px 10px 50px 10px;
}

.g-1 .g-single > div h2 {
  margin-top: .8em;
  font-size: 2em;
}
.g-1 .g-single > div figure {
  text-align: center;
}
@media only screen and (min-width: 992px) { /* Styles that apply to COL-LG and larger */
  .g-1 > .g-single > div {
    margin: 30px 50px 50px 50px;
  }
  .g-1 .g-single > div h2 {
    margin-top: .8em;
    font-size: 36px;
  }
  .g-1 .g-single > div figure {
    float: left;
    text-align: left;
  }
}



/* 10.5. In-post after article ----------------------------------------------- */
.sponsor-post-end {
  padding: 1em 0;
}