@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

body {
  color: rgba(90, 90, 90, 1);
  font-family: "adelle-sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 200;
}

code {
  background: #00BA40;
  border-radius: 10px;
  border-width: 0;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding-left: 6px;
  padding-right: 6px;
  text-transform: lowercase;
}

a {
  color: rgb(15, 78, 110);
}

a:hover {
  color: rgb(19, 96, 135);
}

#logo {
  height: 36px;
  position: relative;
  top: 3px;
}

.hero {
  background-blend-mode: multiply;
  background-color: rgba(8, 41, 58, .4);
  background-image: linear-gradient(to top right, rgba(25, 95, 132, 1), rgba(8, 41, 58, 1)), url('../images/alice-donovan-rouse-195456-compressed.jpg');
  background-size: cover;
  background-position: center;
  color: rgba(255, 255, 255, .9);
  padding: 2rem 0;
}

.fullbleed code, .hero code {
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
}

.home-text {
  text-align: center;
}

.home-text p {
  font-size: 1.6rem;
  line-height: 2.4rem;
}

p.small, span.goal {
  font-size: 13px;
}

h3.divider {
  border-top: 3px double rgba(0,0,0,.1);
  margin-top: 3.6rem;
  padding-top: 3.3rem;
}

.button-donate {
  background-color: rgba(0, 0, 0, .4);
}

.button-donate:focus,
.button-donate:hover {
  background-color: rgba(0, 0, 0, .5);
}

.button-facebook {
  background-color: rgba(0, 132, 255, 1);
  border-color: rgba(0, 132, 255, 1);
  display: none;
}

.button-facebook:focus,
.button-facebook:hover {
  background-color: rgba(0, 112, 217, 1);
  border-color: rgba(0, 112, 217, 1);
}

.button-facebook img {
  height: 9px;
}

.button-telegram {
  background-image: linear-gradient(-203deg, #37AEE2 13%, #1E96C8 76%);
  border-color: rgba(55, 174, 226, 1);
  display: none;
}

.button-telegram:focus,
.button-telegram:hover {
  background-image: linear-gradient(-203deg, #309CC9 13%, #2A88B0 76%);
  border-color: rgba(47, 150, 194, 1);
}

.button-telegram img {
  height: 15px;
  left: -3px;
  position: relative;
  top: 3px;
}

.bubbles {
  padding: 3rem 1.6rem;
  max-width: 40rem;
}

.bubble {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  margin: 0 0 16px 0;
  max-width: 260px;
  padding: 12px 18px;
}

.bubble {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration: .25s;
	-moz-animation-duration: .25s;
	animation-duration: .25s;
}

.bubble.one {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.bubble.two {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay:1.2s;
  animation-delay: 1.2s;
}

.bubble.three {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

.bubble.me {
  background-color: rgba(77, 189, 253, 1);
  color: rgba(255, 255, 255, 1);
  float: right;
}

.bubble.other {
  background-color: rgba(250, 250, 250, 1);
  color: rgba(0, 0, 0, .7);
  float: left;
}

.bubble.one {
  animation-delay: 2s;
}

.bubble.two {
  animation-delay: 4s;
}

.bubble.three {
  animation-delay: 6s;
}

.logo {
  display: block;
  margin-bottom: 46px;
  border-bottom: none;
  text-decoration: none;
}

h1, h2, h3, h4, h5, button, label {
  font-family: "stolzl", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.hero h1, .hero h2 {
    color: white;
}

.hero .button {
  color: white;
}

h1 {
  font-size: 4.8rem;
  font-weight: 700;
  letter-spacing: -1.7px;
  margin: 3rem 0 1rem 0;
}

h2 {
  font-size: 2.4rem;
  font-weight: 200;
  color: white;
  letter-spacing: 0;
  margin: 0 0 4rem;
}

h3 {
  color: #08293A;
  font-size: 2.1rem;
  font-weight: 500;
  margin: 3rem 0 1rem 0;
}

b {
  font-weight: 700;
}

.fullbleed:before {
    content: '';
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    -moz-pointer-events: none;
    -webkit-pointer-events: none;
    -ms-pointer-events: none;
    pointer-events: none;
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    background-position: 0% 0%, center;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
    background-attachment: scroll;
}

.faq h6 {
  color: rgba(0, 0, 0, 1);
  font-weight: 700;
}

blockquote, #payment-request-block p {
  font-family: adelle, georgia, serif;
  font-style: italic;
  line-height: 2.8rem;
}

.faq h1 {
  color: #08293a;
  font-size: 3.6rem;
  font-weight: 200;
  margin-bottom: 2.4rem;
}

.footer {
  background: #fafafa;
  margin-top: 4rem;
  padding: 4rem 0;
  text-align: center;
}

.container.center {
  text-align: center;
}

.hero {
  text-align: center;
}

.nav a {
  border: none;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 36px;
  margin: 0 8px;
  text-decoration: none;
  text-transform: uppercase;
}

.hide {
  display: none;
}

.scout {
  width: 72px;
}

.icons {
  margin-top: 2rem;
}

.icon {
  text-align: center;
}

.icon img {
  height: 48px;
  margin: 12px 0;
}

.icon h4 {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0rem;
}

.tweets iframe {
  margin-bottom: 1.6rem !important;
}

.press {
  margin-top: 2rem;
  text-align: center;
}

.press img {
  display: inline-block;
  height: 19px;
  margin: 0 2rem 2rem;
  position: relative;
}

.press img.huffpo {
  top: 2px;
  width: 240px;
}

.press img.kdka {
  height: 26px;
}

.press img.good {
  position: relative;
  top: 2px;
}

.progress {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
   appearance: none;
  width: 100%;
  height: 16px;
}

progress[value]::-webkit-progress-bar {
  background-color: #eee;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

/* linear-gradient(to top right, rgba(25, 95, 132, 1), rgba(8, 41, 58, 1)) */

progress[value]::-webkit-progress-value {
  background-image:
	   -webkit-linear-gradient(0deg,
	                           rgba(232, 11, 111, 1),
	                           rgba(0, 199, 255, 1)),
 	   -webkit-linear-gradient(90deg,
 	                           rgba(255, 255, 255, .2),
 	                           rgba(255, 255, 255, .1));
}

progress[value]::-webkit-progress-bar,
progress[value]::-webkit-progress-value {
  border-radius: 16px;
}

.progress span.goal {
  float: right;
}

.banner {
  background: #000;
  color: white;
  font-size: 1.3rem;
  height: 4rem;
  line-height: 4rem;
  text-align: center;
}

.banner p a {
  color: white;
}

.footer p {
  color: rgba(0, 0, 0, .6);
  margin-top: 1rem;
}

.footer p a {
  color: rgba(0, 0, 0, .7);
}

.social img {
  height: 20px;
  margin: 0 12px;
}

.error {
  text-align: center;
}

.error img {
  height: 150px;
  margin: 1rem auto 6rem;
}

/* Donation Block */

.payment-block { display: inline-block; }
.payment-block form { border: none; }
.gwb, .gwb-total .gwb-total-currency, .gwb-total .gwb-total-whole { font-family: inherit !important }
.gwb-stepper-btn { margin: 0; padding: 0; line-height: 18px; height: 18px; }
.gwb-amount-buttons button { font-family: inherit !important; height: auto; line-height: normal; }
.gwb-form-controls button { font-family: inherit !important; height: auto; line-height: normal; }

/* Override Resistbot skeleton.css button hover state */
button.gwb-submit:hover {
    color: #fff;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .4);
}

/* Disable button hover state for touch devices */
@media (hover: none) {
  button.gwb-submit:hover {
      color: #fff;
      box-shadow: none;
  }
}

#map {
  height: 300px;
}

#map .mapboxgl-popup-content {
  padding: 16px;
}

#map .mapboxgl-popup-content h1 {
  font-family: adelle, georgia, serif;
  font-size: 2rem;
  letter-spacing: 0;
  margin: 0;
}

#map .mapboxgl-popup-content p {
  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#map .mapboxgl-popup-content button {
  font-size: 24px;
  line-height: 1;
  padding: 16px;
}

#map .mapboxgl-popup-content ul {
  margin: 0;
}

#map .mapboxgl-popup-content ul li {
  list-style-type: square;
  margin: 0;
}

#map .mapboxgl-popup-content ul li a {
  font-weight: bold;
}

/* Larger Screens */

@media (min-width: 550px) {

  h1 {
    font-size: 5.6rem;
    margin-top: 6rem
  }

  .press img {
    height: 24px;
  }

  .hero .four {
    text-align: left;
  }

  .nav {
    text-align: right;
  }

  #map {
    height: 500px;
  }

}

/* Larger than tablet, switch text CTA to Facebook */

@media (min-width: 750px) {
  .button-facebook,
  .button-telegram {
    display: inline-block;
  }

  .button-sms {
    display: none;
  }

  #map {
    height: 400px;
  }
}