/* Relative fonts as the banner will be on several different domains. */
@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 {
  /* Sky background */
  background: linear-gradient(to right, #00ccff, #ff2f82),
              #00ccff;
}

.content {
  position           : absolute;
  background-image   : url(../img/cloud.svg);
  background-repeat  : repeat-x;
  width              : 100%;
  height             : 150px;
  top                : 0;
}

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

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

.bg-right {
  z-index: 10;
  position: absolute;
  top     : calc(-0.064 * 100vw + 90px);
  right   : calc( 0.019 * 100vw + -99.0px);
  height  : calc( 0.078 * 100vw + 65.0px);
  /*overflow: hidden;*/
}

.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;*/
}

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

#cloud {
  z-index: 8;
  position: absolute;
  top: 0;
  left: 0;
}

#dots-left {
  z-index: 7;
  position: absolute;
  top: -17px;
  left: 0;
}

#dots-right {
  z-index: 6;
  position: absolute;
  top: 0;
  right: 0;
}

/* 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       : 30;
  max-height    : 132px;
  overflow      : hidden;
  padding-right : 7px;
  padding-left  : 7px;
}

.message p {
  font-family: "notosans", sans-serif;
  color      : #161149;
  padding    : 5px 7px 20px 7px;
  /*margin     : 0px;*/
  font-size  : calc(0.0077 * 100vw + 12.5px);
  line-height: calc(0.0064 * 100vw + 15px);
}

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

.highlight {
  font-style: italic;
}

/* Progress Bar */

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

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

.progress-bar-info {
  /* Pinstripes */
  background: repeating-linear-gradient(
    -55deg,
    #e24190,
    #b25ea8 15px,
    #9471b6 10px,
    #9385c6 25px
  );

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

.count {
/*

  font-size    : 15px;
  font-weight  : bold;
  color        : #fff5eb;
  text-shadow  : 0px 0px 8px #000;
  line-height  : 8px;
  position     : absolute;

  bottom       : 11px;
  right        : 9px;
  z-index      : 1;
*/
  font-size    : 15px;
  color        : #fff5eb;
  text-shadow  : 0px 0px 8px #000;
  line-height  : 8px;
  position     : absolute;
  padding      : 7px 6px 5px 6px;
  padding-right: 5px;
  top          : -2px;
  /* Use right: -80px; at the beginning. */
  /* Use right: 0; towards the end. */
  right        : 0;
  z-index      : 1;
}

.goal {
  font-size  : 15px;
  color      : #000000;
  line-height: 8px;
  position   : absolute;
  padding    : 7px 6px;
  right      : -1px;
  top        : -2px;
  /* 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;
  }
}

@media (max-width: 480px) {
  .goal {
    display: none;
  }
}

/* DEBUG */
@media (min-width: 360px) {
  .bg-left {
    content: url("../img/draft360.png");
  }
}
@media (min-width: 720px) {
  .bg-left {
    content: url("../img/draft720.png");
  }
}
@media (min-width: 1440px) {
  .bg-left {
    content: url("../img/draft1440.png");
  }
}
@media (min-width: 1920px) {
  .bg-left {
    content: url("../img/draft1920.png");
  }
}

@media (max-width: 560px) {
  .signs {
    display: none;
  }

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

  #signxs1 {
    right: 73%;
  }

  #signxs2 {
    right: 43%;
  }

  #signxs3 {
    right: 15%;
  }
}

@media (max-width: 652px) {
  br {
    display: none;
  }
}

@media (max-width: 799px) {
  .bg-right {
    content: url("../img/freedom-steps-small.svg");
  }
  .bg-right::after {
    content: url("../img/freedom-steps-small.svg");
  }
}

@media (min-width: 800px) {
  .bg-right {
    /*content: url("../img/freedom-steps-people-work.svg") / "People walking up steps representing the freedom ladder campaign.";*/
    content: url("../img/freedom-steps-large.svg");
    top: calc( -0.019 * 100vw + 63.0px);
    right: calc( 0.033 * 100vw + -214px);
    height: calc( 0.068 * 100vw + 45px);
  }

  .bg-right::after {
    content: url("../img/freedom-steps-large.svg");
    top: calc( -0.019 * 100vw + 63.0px);
    right: calc( 0.033 * 100vw + -214px);
    height: calc( 0.068 * 100vw + 45px);
  }
}

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

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

@media (min-width: 1886px) {
  .message p {
    padding-left: 9px;
  }
}