/* This file is compiled using Sass. Instead of editing it directly
 * please modify g/scss/gfaminute.scss.
 */
:root {
  --font-primary: "Source Sans Pro", Arial, sans-serif;
  --font-secondary: "Playfair Display", serif;
  --font-spectral: "Spectral", serif;
  --color-black: #000;
  --color-white: #fff;
  --color-yellow: #febf2b;
  --color-yellow-light: #ffd36a;
  --color-yellow-bg: #ffe897;
  --color-orange: #cd4d00;
  --color-orange-dark: #893d10;
  --color-green: #1a6342;
  --color-green-dark: #044020;
  --color-red: #ec1107;
  --color-red-dark: #ba1009;
  --color-banner-bg: #1C1F2A;
  --color-footer-bg: #242734;
  --color-station-bg: #162e44;
  --color-station-location-bg: #172e44;
  --color-scrollbar-bg: #282a35;
  --color-scrollbar-thumb: #febf2b;
  --color-quote-mark: #343643;
  --color-campaign-bg: #1d1f2a;
  --color-campaign-1-bg: rgba(122, 72, 0, 0.5);
  --color-campaign-2-bg: rgba(46, 46, 46, 0.4);
  --color-campaign-quote-bg: rgba(255, 255, 255, 0.1);
  --border-radius: 10px;
  --transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  --box-shadow-btn: 1px 17px 25px -11px rgba(0, 0, 0, 0.6);
  --box-shadow-img: 0 0.06rem 0.06rem rgba(3, 7, 18, 0.02),
                    0 0.28rem 0.22rem rgba(3, 7, 18, 0.03),
                    0 0.67rem 0.5rem rgba(3, 7, 18, 0.05),
                    0 1.11rem 0.83rem rgba(3, 7, 18, 0.06),
                    0 1.78rem 1.33rem rgba(3, 7, 18, 0.08);
}

body {
  font-family: var(--font-primary);
  letter-spacing: -0.4px;
}

p {
  font-family: var(--font-primary);
}
p.home-desc {
  font-size: 1.5em;
  line-height: 1.5em;
}

h1 a {
  text-decoration: none;
  line-height: 30px;
  transition: var(--transition);
}
h1 a:hover .head,
h1 a:hover .subhead {
  color: var(--color-black);
}
h1 a span.head {
  font-family: var(--font-secondary);
  font-size: 85px;
  color: var(--color-white);
}

.banner-image-wrap {
  z-index: 0;
}

.h1-color-box {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 0 20px;
}
.h1-color-box h1 a span.subhead {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 7px;
  color: var(--color-black);
  background: var(--color-yellow);
  display: inline-block;
  padding: 10px 47px 10px 17px;
  position: relative;
  top: -15px;
}
.h1-color-box h1 a span.subhead:after {
  content: "";
  background: url("https://gfamedia.org/gfaminute/kp-yohannan-small.png") center/cover;
  width: 60px;
  height: 60px;
  display: block;
  position: absolute;
  right: -15px;
  top: -5px;
}

.endorsements {
  background: var(--color-banner-bg);
  padding: 50px 0;
}
.endorsements p {
  color: var(--color-white);
  font-size: 1.3em;
}
.endorsements p.author {
  font-size: 1em;
  line-height: 1.1em;
}

.quote-1,
.quote-2,
.quote-3 {
  padding: 0 40px;
}
.quote-1 p,
.quote-2 p,
.quote-3 p {
  position: relative;
  z-index: 999;
}

.quote-2 {
  border-left: 1px solid var(--color-white);
  border-right: 1px solid var(--color-white);
}

.quote-mark:before {
  content: '"';
  color: var(--color-quote-mark);
  font-family: Arial, sans-serif;
  font-size: 15em;
  position: absolute;
  top: -120px;
  left: 15px;
  z-index: 1;
}

#stations-networks {
  background: var(--color-station-bg);
  box-shadow: inset 0 0 19px 8px rgba(0, 0, 0, 0.3);
}
#stations-networks h3 {
  font-family: var(--font-secondary);
  font-size: 1.8em;
  color: var(--color-white);
  text-align: center;
  margin-top: 15px;
}
#stations-networks ul {
  text-align: center;
}
#stations-networks ul li {
  font-family: var(--font-secondary);
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--border-radius);
  display: inline-block;
  margin: 5px 3px;
  padding: 10px 15px;
  font-size: 1em;
  transition: var(--transition);
}
#stations-networks ul li:hover {
  background: rgba(255, 255, 255, 0.17);
  cursor: pointer;
}
#stations-networks ul li:before {
  display: none;
}
#stations-networks span.location {
  font-family: var(--font-primary);
  font-size: 0.7em;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--color-station-location-bg);
  border-radius: 5px;
  padding: 4px 8px;
  margin: -2px 0 0 7px;
  position: relative;
  top: -2px;
}

.footer {
  background: var(--color-footer-bg);
  padding: 40px 0 20px;
  margin-top: 0;
}

.btn-primary {
  background: var(--color-yellow);
  color: var(--color-black);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: var(--transition);
}
.btn-primary:hover {
  background: #37d52c;
  color: var(--color-black);
  border-radius: 50px;
  box-shadow: var(--box-shadow-btn);
  margin: -1px 0 1px;
}

.ribbon {
  display: block;
  position: relative;
  width: 100%;
  height: 56px;
  padding-top: 3px;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  transition: 0.1s ease;
  margin: 0 auto;
}
.ribbon .ribbon-button {
  font-family: var(--font-spectral);
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 0 2px rgba(0, 0, 0, 0.4);
  color: var(--color-white);
  background: var(--color-red);
  border: 1px solid var(--color-white);
  border-radius: 6px;
  box-shadow: 0 10px 18px -3px rgba(0, 0, 0, 0.75);
  transition: 0.1s ease;
  width: 85%;
  margin: 0 auto;
  display: block;
  text-align: center;
  position: relative;
}
.ribbon:hover {
  padding-top: 0;
}
.ribbon:hover .ribbon-button {
  height: 56px;
  width: 87%;
  line-height: 56px;
  font-size: 1.3em;
  top: 0;
}
.ribbon:hover .ribbon-button:before {
  left: 2%;
}
.ribbon:hover .ribbon-button:after {
  right: 2%;
}
.ribbon.green .ribbon-button {
  background: var(--color-green);
}
.ribbon.green .ribbon-button:before, .ribbon.green .ribbon-button:after {
  border-top-color: var(--color-green-dark);
  border-bottom-color: var(--color-green-dark);
}
.ribbon.orange .ribbon-button {
  background: var(--color-orange);
}
.ribbon.orange .ribbon-button:before, .ribbon.orange .ribbon-button:after {
  border-top-color: var(--color-orange-dark);
  border-bottom-color: var(--color-orange-dark);
}

.ribbon-button:before, .ribbon-button:after {
  content: "";
  display: block;
  position: absolute;
  width: 25%;
  height: 0;
  border-top: 18px solid var(--color-red-dark);
  border-bottom: 18px solid var(--color-red-dark);
  z-index: -1;
  transition: 0.2s ease;
}
.ribbon-button:before {
  left: 0;
  border-left: 12px solid transparent;
}
.ribbon-button:after {
  right: 0;
  border-right: 12px solid transparent;
}

.wide-photoshow-wrapper-wrapper {
  padding: 30px 30px 0;
  background: var(--color-campaign-bg);
}
.wide-photoshow-wrapper-wrapper h3 {
  color: var(--color-yellow-light);
}
.wide-photoshow-wrapper-wrapper p {
  color: var(--color-white);
}
.wide-photoshow-wrapper-wrapper img {
  border: 10px solid var(--color-white);
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  max-width: 100vw;
}

.wide-photoshow-wrapper {
  margin: 0;
  padding-bottom: 35px;
}

.wide-photoshow-slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}
.wide-photoshow-slider.no-transition {
  transition: none;
}
.wide-photoshow-slider .slide {
  opacity: 1;
  max-height: initial;
  display: flex;
  align-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.wide-photoshow-slider p {
  color: var(--color-white);
}
.wide-photoshow-slider h3 {
  color: var(--color-yellow-bg);
}

.gradient-background {
  background: linear-gradient(300deg, #ddac18, #242734, #ffc847);
  background-size: 180% 180%;
  animation: gradient-animation 18s ease infinite;
  border-radius: 50px;
}

@keyframes gradient-animation {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
.give-to-critter a {
  font-family: var(--font-spectral);
  font-size: 30px;
  font-weight: 100;
  letter-spacing: 0.3px;
  color: var(--color-white);
  text-decoration: none;
  background-image: linear-gradient(180deg, transparent 65%, #aa1638 0);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 5px;
}

#revolution-in-world-missions {
  background: radial-gradient(49% 81% at 45% 47%, rgba(255, 226, 3, 0.2705882353) 0%, rgba(7, 58, 255, 0) 100%), radial-gradient(113% 91% at 17% -2%, #974938 1%, rgba(255, 0, 0, 0) 99%), radial-gradient(142% 91% at 83% 7%, #8d3f1b 1%, rgba(255, 0, 0, 0) 99%), radial-gradient(142% 91% at -6% 74%, #9d4d1f 1%, rgba(112, 51, 0, 0) 99%), radial-gradient(142% 91% at 111% 84%, #6f0e39 0%, #772f10 100%);
  margin-top: -30px;
}
#revolution-in-world-missions .container {
  display: flex;
}
#revolution-in-world-missions h3 {
  font-family: var(--font-secondary);
  color: #fdf6d6;
  font-size: 1.8em;
  text-shadow: none;
}
#revolution-in-world-missions p {
  color: #fdf6d6;
}
#revolution-in-world-missions img {
  box-shadow: none;
}

.gift-campaign .row {
  display: flex;
  align-items: center;
}
.gift-campaign h3 {
  font-family: var(--font-secondary);
  font-size: 1.8em;
  text-shadow: 0 0.06rem 0.06rem rgba(3, 7, 18, 0.08), 0 0.28rem 0.22rem rgba(3, 7, 18, 0.16), 0 0.67rem 0.5rem rgba(3, 7, 18, 0.25), 0 1.11rem 0.83rem rgba(3, 7, 18, 0.33), 0 1.78rem 1.33rem rgba(3, 7, 18, 0.41);
}
.gift-campaign img {
  box-shadow: var(--box-shadow-img);
  transform: rotate(0.5deg);
  transition: var(--transition);
}
.gift-campaign img:hover {
  transform: scale(1.03) rotate(-0.5deg);
}

.comments h3 {
  font-family: var(--font-secondary);
  font-size: 1.8em;
  text-align: center;
}

.static-campaign-1 {
  background: url(https://www.gfamedia.org/images/sponsor/missionary-sponsorship-bg.webp) bottom/cover no-repeat;
  background-blend-mode: darken;
  background-color: var(--color-campaign-1-bg);
}
.static-campaign-1 h3 {
  color: var(--color-yellow-light);
  max-width: 65rem;
}
.static-campaign-1 p {
  color: var(--color-white);
}
.static-campaign-1 img {
  border: 10px solid var(--color-white);
}

.static-campaign-2 {
  background: url(https://gfamedia.org/images/25-Christmas-Catalog/critter/critter-pageheaders/Critter_Campaign_2025_bg.jpg) bottom/cover no-repeat;
  background-blend-mode: color;
  background-color: var(--color-campaign-2-bg);
}
.static-campaign-2 h3 {
  color: var(--color-yellow-light);
}
.static-campaign-2 p {
  color: var(--color-white);
}
.static-campaign-2 p.campaign-quote {
  padding: 20px 25px;
  background: var(--color-campaign-quote-bg);
  border: 1px solid;
  border-radius: 8px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  margin-bottom: 16px;
}
.static-campaign-2 img {
  border: 10px solid var(--color-white);
}

.nowrap {
  white-space: nowrap;
}

* {
  scrollbar-width: auto;
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-bg);
}
*::-webkit-scrollbar {
  width: 24px;
}
*::-webkit-scrollbar-track {
  background: var(--color-scrollbar-bg);
}
*::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: var(--border-radius);
  border: 5px solid var(--color-scrollbar-bg);
}

@media (min-width: 1200px) {
  .banner-image-wrap {
    height: 550px;
    position: relative;
  }
  .h1-color-box h1 {
    position: absolute;
    top: 140px;
  }
  h1 a span.head {
    font-size: 85px;
  }
  .give-to-critter {
    position: absolute;
    top: 300px;
    text-align: center;
    width: 100%;
    max-width: 459px;
    transition: var(--transition);
  }
  .give-to-critter a:hover {
    color: var(--color-white);
    background-image: linear-gradient(180deg, transparent 50%, #c02347 0);
  }
  .quote {
    z-index: 99999;
    position: relative;
    margin-top: -65px;
  }
  .ribbon {
    top: 300px;
  }
  .ribbon .ribbon-button {
    height: 50px;
    line-height: 50px;
    font-size: 1.2em;
    letter-spacing: 1px;
  }
  .ribbon-button:before, .ribbon-button:after {
    top: 10px;
  }
  .gift-campaign .row {
    flex-direction: row;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .banner-image-wrap {
    height: 450px;
    position: relative;
  }
  .h1-color-box h1 {
    position: absolute;
    top: 110px;
  }
  .h1-color-box h1 a span.subhead {
    font-size: 17px;
    letter-spacing: 8px;
    padding: 5px 15px;
    top: -35px;
    width: 100%;
    text-align: center;
  }
  h1 a span.head {
    font-size: 70px;
  }
  .give-to-critter {
    position: absolute;
    top: 285px;
  }
  .give-to-critter a {
    font-size: 29px;
  }
  .quote {
    z-index: 99999;
    position: relative;
    margin-top: -15px;
  }
  .ribbon {
    top: 215px;
  }
  .ribbon .ribbon-button {
    height: 40px;
    line-height: 40px;
    font-size: 1em;
    letter-spacing: 0;
  }
  .ribbon-button:before, .ribbon-button:after {
    top: 5px;
  }
  .gift-campaign .row {
    flex-direction: row;
  }
}
@media (min-width: 769px) and (max-width: 991px) {
  .banner-image-wrap {
    height: 350px;
    position: relative;
  }
  .h1-color-box h1 {
    position: absolute;
    top: 60px;
  }
  .h1-color-box h1 a span.subhead {
    padding: 5px 12px;
    font-size: 16px;
    top: -35px;
    text-align: center;
    width: 100%;
  }
  h1 a span.head {
    font-size: 54px;
  }
  .give-to-critter {
    position: absolute;
    top: 182px;
  }
  .give-to-critter a {
    font-size: 22px;
  }
  .ribbon {
    top: 185px;
  }
  .ribbon .ribbon-button {
    height: auto;
    line-height: 20px;
    padding: 5px;
    font-size: 1em;
    letter-spacing: 0;
  }
  .ribbon-button:before, .ribbon-button:after {
    top: 5px;
  }
  .gift-campaign .row {
    flex-direction: row;
  }
}
@media (max-width: 768px) {
  .banner-image-wrap {
    min-height: 640px;
    position: relative;
  }
  .h1-color-box h1 {
    margin-top: 0;
  }
  .h1-color-box h1 a span.subhead {
    font-size: 20px;
    letter-spacing: 4px;
    padding: 8px 15px 8px 0;
    text-align: center;
    width: 100%;
    top: -10px;
  }
  h1 a span.head {
    line-height: 85px;
    text-align: center;
    display: block;
    font-size: 100px;
    letter-spacing: -2px;
    font-weight: 900;
    margin-bottom: 10px;
    text-transform: none;
  }
  .give-to-critter a {
    font-size: 23px;
  }
  .quote img {
    padding: 20px 0 10px;
  }
  .ribbon {
    top: -5px;
  }
  .ribbon .ribbon-button {
    height: auto;
    line-height: 20px !important;
    padding: 10px 5px 8px;
    font-size: 1.1em;
    letter-spacing: 0;
  }
  .ribbon-button:before, .ribbon-button:after {
    top: 5px;
  }
  .gift-campaign .row {
    flex-direction: column;
  }
  .gift-campaign.slide {
    padding: 0 30px !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    box-sizing: border-box;
    opacity: 1 !important;
  }
  .gift-campaign.slide img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block;
    max-width: 100vw !important;
  }
  .wide-photoshow-wrapper-wrapper {
    padding: 0;
  }
  .gradient-background {
    border-radius: 0;
  }
  .wide-photoshow-slider .slide,
  .wide-photoshow-slider .slide.selected {
    width: max-content !important;
    margin: 0;
    padding: 0;
  }
  .container {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
}

/*# sourceMappingURL=gfaminute.css.map */