/* Credits */
/* Background image was made thanks to the work of: Nevit Dilmen */
/* https://commons.wikimedia.org/wiki/File:SVG_Green_electronic_board_without_components.svg */
/**/


@font-face {
    font-family: 'nunitobold';
    src: url('../fonts/nunito-bold-webfont.woff2') format('woff2'),
         url('../fonts/nunito-bold-webfont.woff') format('woff'),
         url('../fonts/nunito-bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;

}




@font-face {
    font-family: 'nunitoregular';
    src: url('../fonts/nunito-regular-webfont.ttf') format('truetype'),
    url('../fonts/nunito-regular-webfont.woff2') format('woff2'),
         url('../fonts/nunito-regular-webfont.woff') format('woff');

    font-weight: normal;
    font-style: normal;

}

a:hover, a:active, a:focus, a:link, a:visited, button, object, embed, input::-moz-focus-inner { 
  outline: 0;
  outline-style: none;
}

.fundraiserbanner {
  height: 170px;
}

.background {
  position           : relative;
  min-height         : 150px;
  max-height         : 150px;
  background-color   : #123e3f;
  background-image   : url("../img/bg-xs-contribute.jpg");
  background-position: right;
  background-size    : cover;
  background-size    : auto 150px;
  background-repeat  : no-repeat;
  overflow           : hidden;

}

.content {
  max-width: 100%;
}

.message {
  z-index   : 2;
  max-height: 90px;
  overflow  : hidden;
  max-width : 80%;

}

.message p {
  font-family: "nunitoregular";
  color     : white;
  padding    : 5px;
  font-size: 16px;
  line-height: 22px;
}

.n-members {
  font-family: "nunitobold";
  color      : yellow;
}

.contribute {
  padding-left     : 5px;
  padding-right    : 0;
}

.donate, .join {
  width           : 77px;
  border          : 0;
  border-radius   : 100px;
  font-size       : 14px;
  text-align      : center;
  display         : inline-block;
}

.donate a, .join a {
  text-decoration : none;
  color           : white;
  display         : block;
  width           : 100%;
}

.donate {
  background-color: #1abc9c;
}

.join {
  background-color: #3498DB;
}

/*
.donate:hover {
  background-color: #ffb5b8;
}
*/

/*0%*/

/*25%*/

/*50%*/

/*75%*/

/*100*/

/*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      : 1;
  width        : 100%;
}

.progress {
  font-family: nunitobold;

  height       : 18px;
  border-radius: 0;
  background   : #288C8C;
  box-shadow   : 0 0 0;

}

.progress-bar-info {

  background-color: #feb916;

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

.percentage {
  font-size    : 13px;
  color        : black;
  line-height  : 8px;
  position     : absolute;
  padding      : 7px 6px;
  top          : -1px;
  border-radius: 50px;
  right        : -2px;
  z-index      : 1;
}

.goal {
  font-size  : 13px;
  line-height: 8px;
  position   : absolute;
  padding    : 7px 6px;
  top        : -1px;
  color      : #fff;
  /*border-radius: 50px;*/
  right      : -1px;

  /*Overlapping fix*/

  /*
  right: 11px;
  top: -22px;
  color: white;
  background: #FF771D;
  padding: 8px 6px;
  border-radius: 50px;
*/
}

/* Media Queries */
@media (min-width: 200px) {
  .message {
    max-height: 112px;
  }
}

/* very small devices (440px and up) */
@media (min-width: 440px) {
  .background {
    background-image: url("../img/bg-sm-contribute.jpg");
  }

  .message {
    max-width : 60%;
  }

  .donate, .join {
    width           : 120px;
    font-size       : 18px;
		margin-right    : 40px;
  }

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

/* Small devices (tablets, 768px and up) */
@media (min-width: 620px) {
  .background {
    background-image: url("../img/bg-md-contribute.jpg");
  }

}

@media (min-width: 768px) {
  .percentage, .goal {
    font-size: 16px;
    top      : -1px;
  }

  .progress-bar-info {
    min-width: 5.90em;
  }

  .message {
    width  : 480px;
  }

  .message p {
    width      : 100%;
    padding    : 5px 6px;
    font-size  : 17px;
    line-height: 25px;
  }

  /*.plus-text {
    display: inline;
  }*/

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

@media (min-width: 992px) {
  .background {
    background-image: url("../img/bg-lg-contribute.jpg");
  }

  .content {
    margin-left   : 20px;
  }

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

@media (min-width: 1200px) {
  p {
    padding  : 15px;
    font-size: 17px;
  }

  .content {
    max-width: 1000px !important;
    position : relative;
    margin-left: 10%;
  }

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

/* Seriously, do we need a banner to be displayed at this size?*/
/*
@media (min-width:250px) and (max-width:320px) {
  .fundraiserbanner {
    display: none;
  }
}
*/