@font-face {
  font-family: "courierprime";
  src        : url("../../fonts/courierprime/CourierPrime-Bold.woff2") format('woff2'),
               url("../../fonts/courierprime/CourierPrime-Bold.woff") format('woff'),
               url("../../fonts/courierprime/CourierPrime-Bold.ttf") format('truetype');
  font-weight: bold;
  font-style : normal;
}

@font-face {
  font-family: "courierprime";
  src        : url("../../fonts/courierprime/CourierPrime-BoldItalic.woff2") format('woff2'),
               url("../../fonts/courierprime/CourierPrime-BoldItalic.woff") format('woff'),
               url("../../fonts/courierprime/CourierPrime-BoldItalic.ttf") format('truetype');
  font-weight: bold;
  font-style : italic;
}

@font-face {
  font-family: "courierprime";
  src        : url("../../fonts/courierprime/CourierPrime-Italic.woff2") format('woff2'),
               url("../../fonts/courierprime/CourierPrime-Italic.woff") format('woff'),
               url("../../fonts/courierprime/CourierPrime-Italic.ttf") format('truetype');
  font-weight: normal;
  font-style : italic;
}

@font-face {
  font-family: "courierprime";
  src        : url("../../fonts/courierprime/CourierPrime-Regular.woff2") format('woff2'),
               url("../../fonts/courierprime/CourierPrime-Regular.woff") format('woff'),
               url("../../fonts/courierprime/CourierPrime-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style : normal;
}

@font-face {
  font-family: "notosans";
  src        : url("../../fonts/notosans/NotoSans-BoldItalic.woff2") format('woff2'),
               url("../../fonts/notosans/NotoSans-BoldItalic.woff") format('woff'),
               url("../../fonts/notosans/NotoSans-BoldItalic.ttf") format('truetype');
  font-weight: bold;
  font-style : italic;
}

@font-face {
  font-family: "notosans";
  src        : url("../../fonts/notosans/NotoSans-Bold.woff2") format('woff2'),
               url("../../fonts/notosans/NotoSans-Bold.woff") format('woff'),
               url("../../fonts/notosans/NotoSans-Bold.ttf") format('truetype');
  font-weight: bold;
  font-style : normal;
}

@font-face {
  font-family: "notosans";
  src        : url("../../fonts/notosans/NotoSans-Italic.woff2") format('woff2'),
               url("../../fonts/notosans/NotoSans-Italic.woff") format('woff'),
               url("../../fonts/notosans/NotoSans-Italic.ttf") format('truetype');
  font-weight: normal;
  font-style : italic;
}

@font-face {
  font-family: "notosans";
  src        : url("../../fonts/notosans/NotoSans-Regular.woff2") format('woff2'),
               url("../../fonts/notosans/NotoSans-Regular.woff") format('woff'),
               url("../../fonts/notosans/NotoSans-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style : normal;
}

.fundraiserbanner {
  height             : 150px;
}

body {
  /* Fallback background */
  background-color: #70bdff;
  /* Gradient background */
  background-image:
    linear-gradient(
      #70bdff, #fcc8ff
    );
}

.background {
  position           : relative;
  min-height         : 150px;
  overflow           : hidden;
}

.bg-left {
  position: absolute;
  top: 0;
  left: 0;
  height: 132px;
}

.bg-right {
  position: absolute;
  top: 0;
  right: 0;
  height: 132px;
}

.fence {
  z-index: 2;
  position: absolute;
  left: 0;
  bottom: 15px;
  overflow: hidden;
}

.train-track {
  z-index: 4;
  position: absolute;
  left: 0;
  top: 130px;
  width: 100%;
  /*transform: translate(0,-50px);*/
  /*margin-top: -75px;*/
}

.train {
  z-index: 9;
  /* Move train with progress bar. */
  position: absolute;
  right: 0;
  transform: translate(5px,-53px);
  /*margin-top: -75px;*/
}

/* Sign posts */
.signs {
  z-index: 7;
  position: absolute;
  top: 107px;
  right: 0;
  transform: translate(5px,-50px);
  /*margin-top: -75px;*/
}

#sign1 {
  right: 70%;
}

#sign2 {
  right: 40%;
}

#sign3 {
  right: 40px;
}

.signsxs {
  display: none;
}

/* FSF35 in the sky */
.fsf35sky {
  z-index: -3;
  position: absolute;
}

#f35s1 {
  top: 0;
  left: 20px;
  transform: translate(0,-35px);
}

#f35s2 {
  top: 75;
  left: 600px;
  transform: translate(0,-130px);
}

#f35s3 {
  top: 0;
  left: 1200px;
}

#f35s4 {
  top: 0;
  left: 1800px;
  transform: translate(0,-70px);
}

/* Clouds in the sky */
.clouds {
  z-index: -2;
  position: absolute;
}

#cloud1 {
  top: 60px;
  left: 100px;
}

#cloud2 {
  top: 67px;
  left: 415px;
}

#cloud3 {
  top: 18px;
  left: 800px;
}

#cloud4 {
  top: 0;
  left: 1800px;
}

#cloud5 {
  top: 118px;
  left: 1586px;
}

.message {
  z-index       : 2;
  max-height    : 132px;
  overflow      : hidden;
  padding-right : 7px;
  padding-left  : 7px;
}

.message p {
  font-family: "notosans, sans-serif";
  color      : #663c90;
  padding    : 5px 7px 20px 7px;
  /*margin     : 0px;*/
  font-size  : 12px;
  line-height: 15px;
}

.message a, .message a:visited, .message a:hover, .message a:active {
  color: #663c90;
  text-decoration: none;
}

.join-btn {
  height  : 49.5px;
  position: fixed;
  right   : 7px;
  top     : 85px;
}

.opening {
  /*font-weight: bold;*/
}

.highlight {
  font-style: italic;
}

/*A text to hide when there is no space left*/
/* .plus-text {
  display: none;
} */

/* Donation Bar */

.progresswidget {
  position     : absolute;
  bottom       : 0;
  padding-right: 0;
  padding-left : 0;
  height       : 18px;
  z-index      : 9;
  width        : 100%;
}

.progress {
  font-weight  : bold;
  height       : 18px;
  border-radius: 0;
  background   : #ffe240;
  box-shadow   : 0 0 0;
}

.progress-bar-info {
  /* Pinstripes */
  background: repeating-linear-gradient(
    0deg,
    #7c45ad,
    #7c45ad 3px,
    #966abe 6px,
    #966abe 13px
  );

  box-shadow      : 0 0 0;
  position        : absolute;
  min-width       : 40px;
  z-index         : 1;
  top             : 0;
  left            : 0;
}

.percentage {
  font-size    : 16px;
  color        : black;
  line-height  : 8px;
  position     : absolute;
  padding      : 7px 6px 5px 6px;
  padding-right: 15px;
  top          : -1px;
  right        : -2px;
  z-index      : 1;
}

.goal {
  font-size  : 13px;
  color      : #000000;
  line-height: 8px;
  position   : absolute;
  padding    : 7px 6px;
  right      : -1px;
  /* Add this when approaching the goal to fix mobile. */
  /* bottom: 18px; */
}

/* Media Queries */
/* We don't need to display a banner at this size! */
@media (max-width:304px) {
.bg-left {
  display: none;
  }
}
@media (max-width:320px) {
  .message p {
    display: none;
  }
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 480px) {
.message p {
    /*padding    : 5px 5px 0px 0px;*/
    font-size  : 13px;
    line-height: 15px;
  }
}

@media (max-width: 560px) {
/* Background image break point */
  .signs {
    display: none;
  }

  .signsxs {
    display: block;
    z-index: 7;
    position: absolute;
    top: 97px;
    right: 0;
  }

  #signxs1 {
    right: 89%;
  }
  
  #signxs2 {
    right: 52%;
  }
  
  #signxs3 {
    right: 24%;
  }
}

@media (min-width: 683px) {
/* Background image break point */
.bg-left {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url("../img/684-left.png") no-repeat;
  width: 210px;
  height: 132px;
  padding-left: 210px;
  overflow: hidden;
  }

.bg-right {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url("../img/684-right.png") no-repeat;
  width: 474px;
  height: 132px;
  padding-left: 474px;
  }

  .join-btn {
    height  : 56.5px;
    right   : 199px;
    top     : 75px;
  }
}

@media (min-width: 684px) {
.message p {
    /*padding    : 5px 100px 0px 7px;*/
    font-size  : 15px;
    line-height: 20px;
  }
}

/* Medium devices (desktops, 992px and up) */

@media (min-width: 992px) {
  .donate {
    margin-left: 40px;
    width      : 120px;
  }
}

@media (min-width: 1098px) {
/* Background image break point */

.bg-left {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url("../img/1098-left.png") no-repeat;
  width: 345px;
  height: 132px;
  padding-left: 345px;
  }

.bg-right {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url("../img/1098-right.png") no-repeat;
  width: 753px;
  height: 132px;
  padding-left: 753px;
  }

  .message p {
    /*padding    : 0px 0px 0px 8px;*/
    font-size  : 19px;
    line-height: 24px;
  }

  .join-btn {
    height  : 60.5px;
    right   : 245px;
    top     : 72px;
  }
}

/* Large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
  .content {
    position : relative;
  }

  .progresswidget {
    padding-right: 0;
    padding-left : 0;
    width        : 100%;
    bottom       : 0;
  }
}

@media (min-width: 1486px) {
/* Background image break point */
.bg-left {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url("../img/1486-left.png") no-repeat;
  width: 461px;
  height: 132px;
  padding-left: 461px;
  }

.bg-right {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url("../img/1486-right.png") no-repeat;
  width: 1025px;
  height: 132px;
  padding-left: 1025px;
  }

  .message p {
    /*padding    : 0px 0px 0px 0px;*/
    font-size  : 21px;
    line-height: 26px;
  }

  .join-btn {
    height  : 63.5px;
    right   : 304px;
    top     : 69px;
  }
}

@media (min-width: 1886px) {
/* Background image break point */
.bg-left {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url("../img/1886-left.png") no-repeat;
  width: 579px;
  height: 132px;
  padding-left: 579px;
  }

.bg-right {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url("../img/1886-right.png") no-repeat;
  width: 1307px;
  height: 132px;
  padding-left: 1307px;
  }

  .message p {
    /*padding    : 0px 0px 0px 124px;*/
    padding-left: 9px;
    font-size  : 19px;
    line-height: 24px;
  }

  .join-btn {
    height  : 67.5px;
    left    : 121px;
    top     : 61px;
  }
}