/*
	Fonts
*/
@font-face {
  font-family: 'LeagueGothicRegular';
  src: url("League_Gothic-webfont.eot");
  src: url("League_Gothic-webfont.eot?#iefix") format("embedded-opentype"), url("League_Gothic-webfont.woff") format("woff"), url("League_Gothic-webfont.ttf") format("truetype"), url("League_Gothic-webfont.svg#LeagueGothicRegular") format("svg");
  font-weight: normal;
  font-style: normal; }

/*
	Colors
*/
div {
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */ }

@media screen and (min-width: 961px) {
  .col {
    max-width: 32.5em;
    width: 50%;
    padding: 2.625em 2.5em;
    float: left; } }
@media screen and (max-width: 960px) {
  .col {
    max-width: 90%;
    width: 90%;
    margin: 1.5em 5%;
    float: none; } }
@media screen and (min-width: 961px) {
  .col p {
    font-size: 1em;
    line-height: 1.4em;
    margin-bottom: 1em; } }
@media screen and (max-width: 960px) {
  .col p {
    font-size: 0.8em;
    line-height: 1.4em;
    margin-bottom: 1.5em; } }
.col:after {
  clear: both; }

.clear {
  clear: both; }

.button {
  -moz-box-shadow: 2px 2px 3px RGBA(0, 0, 0, 0.3);
  -webkit-box-shadow: 2px 2px 3px RGBA(0, 0, 0, 0.3);
  box-shadow: 2px 2px 3px RGBA(0, 0, 0, 0.3);
  font-size: 0.875em;
  font-weight: bold;
  color: RGB(255, 255, 255);
  background: RGBA(221, 145, 82, 1);
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.5em 0.5em;
  display: inline-block;
  cursor: pointer; }
  .button.right {
    float: right; }
    @media screen and (max-width: 960px) {
      .button.right {
        float: none; } }
  .button.left {
    float: left; }
  .button:hover {
    background: RGBA(191, 119, 59, 1); }
  @media screen and (min-width: 961px) {
    .button {
      display: inline-block; } }
  @media screen and (max-width: 960px) {
    .button {
      width: 90%;
      max-width: 300px;
      margin: 0.5em auto;
      display: block; } }
  .button i {
    display: inline-block;
    vertical-align: middle; }
  .button i.arrow {
    background: url(../images/icon_arrow.png) no-repeat center center;
    height: 12px;
    width: 12px;
    margin-left: 1em; }
  .button span {
    display: inline-block; }

html {
  width: 100%;
  height: 100%;
  font-size: 16px;
  background: url(../images/bg.jpg) repeat;
  /* end body */ }
  html body {
    width: 100%;
    height: 100%;
    font-family: Helvetica, Arial, sans-serif;
    color: black;
    font-size: 100%;
    /* end .container	*/ }
    @media screen and (min-width: 961px) {
      html body p {
        font-size: 1em;
        line-height: 1.4em;
        margin-bottom: 1em; } }
    @media screen and (max-width: 960px) {
      html body p {
        font-size: 0.8em;
        line-height: 1.4em;
        margin-bottom: 1.5em; } }
    @media screen and (min-width: 961px) {
      html body h3 {
        font-size: 1.4375em;
        margin-bottom: 0.5em;
        line-height: 1.2em; } }
    @media screen and (max-width: 960px) {
      html body h3 {
        font-size: 1.2em;
        line-height: 1.4em;
        margin-bottom: 1.5em; } }
    html body .container {
      width: 100%;
      max-width: 65em;
      margin: auto;
      /* End of #features */
      /* End of Screenshots */
      /* End #reviews */ }
      html body .container .header img {
        width: 100%; }
      html body .container #features {
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        background: RGBA(164, 155, 133, 0.15);
        width: 100%;
        padding: 1.625em 1.1875em; }
        html body .container #features h4 {
          font-family: LeagueGothicRegular;
          color: RGB(255, 255, 255);
          text-transform: uppercase;
          font-size: 2em;
          background: RGBA(191, 119, 59, 1);
          padding: 0.15em 0.2em;
          display: inline-block;
          margin-bottom: 0.15em; }
        html body .container #features .feature {
          width: 100%;
          padding: 0.75em 0.5em;
          cursor: pointer;
          font-size: 0.875em; }
          html body .container #features .feature:hover, html body .container #features .feature.active {
            background: RGBA(255, 255, 255, 0.4); }
          html body .container #features .feature i {
            width: 50px;
            height: 53px;
            margin-right: 1.75em;
            display: inline-block;
            float: left; }
          html body .container #features .feature i.video {
            background: url(../images/icon_video.png) no-repeat center center; }
          html body .container #features .feature i.timeline {
            background: url(../images/icon_timeline.png) no-repeat center center; }
          html body .container #features .feature i.infograph {
            background: url(../images/icon_infographs.png) no-repeat center center; }
          html body .container #features .feature i.map {
            background: url(../images/icon_map.png) no-repeat center center; }
          html body .container #features .feature .name {
            font-size: 1.0625em;
            margin: 0 0 0 50px; }
          html body .container #features .feature .description {
            font-size: 0.875em;
            color: RGB(103, 100, 98);
            margin: 0 0 0 78px; }
      html body .container #screenshots .links .social {
        -moz-box-shadow: 2px 2px 3px RGBA(0, 0, 0, 0.3);
        -webkit-box-shadow: 2px 2px 3px RGBA(0, 0, 0, 0.3);
        box-shadow: 2px 2px 3px RGBA(0, 0, 0, 0.3);
        font-size: 0.75em;
        font-weight: bold;
        color: RGB(255, 255, 255);
        background: RGBA(221, 145, 82, 1);
        text-transform: uppercase;
        text-decoration: none;
        padding: 0.4em 0.3em; }
        html body .container #screenshots .links .social:hover {
          background: RGBA(191, 119, 59, 1); }
        @media screen and (min-width: 961px) {
          html body .container #screenshots .links .social {
            width: 40%;
            margin: 0 4%;
            float: left;
            display: inline-block; } }
        @media screen and (max-width: 960px) {
          html body .container #screenshots .links .social {
            margin: 0.5em auto;
            width: 90%;
            max-width: 300px;
            display: block; }
            html body .container #screenshots .links .social:after {
              clear: both; } }
        html body .container #screenshots .links .social i {
          display: inline-block;
          vertical-align: middle; }
        html body .container #screenshots .links .social i.twitter {
          background: url(../images/icon_twitter.png) no-repeat center center;
          margin-right: 7px;
          width: 20px;
          height: 16px; }
        html body .container #screenshots .links .social i.facebook {
          margin: 0 7px;
          background: url(../images/icon_facebook.png) no-repeat center center;
          width: 10px;
          height: 16px; }
        html body .container #screenshots .links .social span {
          display: inline-block; }
      html body .container #screenshots #ipad #ipad-container {
        background: url(../images/bg_ipad.png) no-repeat center center;
        min-width: 279px;
        max-width: 452px;
        min-height: 350px;
        max-height: 576px;
        margin: auto;
        background-size: contain; }
        @media screen and (min-width: 961px) {
          html body .container #screenshots #ipad #ipad-container {
            width: 100%;
            margin: 2.8125em 0 0 0; } }
        @media screen and (max-width: 960px) {
          html body .container #screenshots #ipad #ipad-container {
            width: 90%;
            background-size: contain; } }
        html body .container #screenshots #ipad #ipad-container .current-slide {
          min-width: 279px;
          max-width: 452px;
          min-height: 350px;
          max-height: 576px; }
          @media screen and (min-width: 961px) {
            html body .container #screenshots #ipad #ipad-container .current-slide {
              width: 100%;
              margin: auto; } }
          @media screen and (max-width: 960px) {
            html body .container #screenshots #ipad #ipad-container .current-slide {
              width: 100%;
              margin: auto; } }
      html body .container #screenshots #ipad .photo-nav {
        width: 9.75em;
        height: 50px;
        margin: auto; }
        html body .container #screenshots #ipad .photo-nav .left-arrow {
          width: 48px;
          height: 50px;
          background: url(../images/button_left-arrow.png) no-repeat center center;
          display: inline-block;
          float: left; }
        html body .container #screenshots #ipad .photo-nav .dots {
          width: 3.75em;
          height: 50px;
          margin: auto;
          float: left;
          padding: 1.34375em 0; }
          html body .container #screenshots #ipad .photo-nav .dots .dot {
            width: 0.4375em;
            height: 0.4375em;
            background-color: RGBA(191, 119, 59, 0.5);
            display: block;
            float: left;
            margin: 0 0.25em;
            vertical-align: middle;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px; }
            html body .container #screenshots #ipad .photo-nav .dots .dot.active {
              background-color: RGBA(191, 119, 59, 1); }
        html body .container #screenshots #ipad .photo-nav .right-arrow {
          width: 48px;
          height: 50px;
          background: url(../images/button_right-arrow.png) no-repeat center center;
          display: block;
          float: left; }
      html body .container #reviews {
        width: 100%; }
        html body .container #reviews h3 {
          -moz-box-shadow: 5px 5px 5px RGBA(0, 0, 0, 0.3);
          -webkit-box-shadow: 5px 5px 5px RGBA(0, 0, 0, 0.3);
          box-shadow: 5px 5px 5px RGBA(0, 0, 0, 0.3);
          font-size: 5em;
          color: RGB(255, 255, 255);
          text-transform: uppercase;
          font-family: LeagueGothicRegular;
          background: RGB(183, 74, 27);
          display: inline-block;
          padding: 0 0.3em; }
        @media screen and (min-width: 961px) {
          html body .container #reviews .button {
            margin-top: -4.5em;
            float: right; } }
        @media screen and (max-width: 960px) {
          html body .container #reviews .button {
            margin: 0 auto 1em auto;
            float: none; } }
        html body .container #reviews .reviews {
          -moz-box-shadow: 5px 5px 0 RGBA(194, 185, 169, 0.5);
          -webkit-box-shadow: 5px 5px 0 RGBA(194, 185, 169, 0.5);
          box-shadow: 5px 5px 0 RGBA(194, 185, 169, 0.5);
          background: RGBA(255, 248, 232, 1);
          padding: 1.375em;
          border: 1px solid RGBA(194, 185, 169, 1); }
          @media screen and (min-width: 961px) {
            html body .container #reviews .reviews {
              width: 100%;
              margin: 0 1.25em 1.5em 1.25em; } }
          @media screen and (max-width: 960px) {
            html body .container #reviews .reviews {
              width: 90%;
              margin: 0 5%; } }
          @media screen and (min-width: 961px) {
            html body .container #reviews .reviews .review {
              width: 50%;
              float: left; }
              html body .container #reviews .reviews .review.first {
                border-right: 1px solid RGB(103, 100, 98);
                padding-right: 2.5em; }
              html body .container #reviews .reviews .review.last {
                padding-left: 2.5em; } }
          @media screen and (max-width: 960px) {
            html body .container #reviews .reviews .review {
              width: 100%;
              float: none; }
              html body .container #reviews .reviews .review.first {
                border-bottom: 1px solid RGB(103, 100, 98);
                border-right: none;
                padding: 1.5em 0; }
              html body .container #reviews .reviews .review.last {
                padding: 1.5em 0; } }
          html body .container #reviews .reviews .review .stars {
            width: 100%;
            margin-bottom: 0.7em; }
          html body .container #reviews .reviews .review .username {
            font-size: 0.75em;
            color: RGB(103, 100, 98);
            font-style: italic;
            margin: 0; }
      html body .container .app-store img {
        max-width: 360px;
        max-height: 121px;
        display: block; }
        @media screen and (max-width: 960px) {
          html body .container .app-store img {
            width: 90%;
            margin: auto; } }
    html body #footer {
      width: 100%;
      background: RGBA(21, 21, 21, 0.65); }
      html body #footer .inner {
        width: 100%;
        max-width: 65em;
        margin: auto; }
        @media screen and (min-width: 961px) {
          html body #footer .inner {
            padding: 2em 3em; } }
        @media screen and (max-width: 960px) {
          html body #footer .inner {
            padding: 2em 1em; } }
        @media screen and (min-width: 961px) {
          html body #footer .inner .column {
            width: 20%;
            margin-right: 5%;
            float: left; } }
        @media screen and (max-width: 960px) {
          html body #footer .inner .column {
            width: 90%;
            margin: 1em 0;
            float: none; } }
        html body #footer .inner h4 {
          font-family: LeagueGothicRegular;
          color: RGB(255, 255, 255);
          text-transform: uppercase;
          font-size: 2em;
          background: RGBA(191, 119, 59, 1);
          padding: 0.15em 0.2em;
          display: inline-block;
          margin-bottom: 0.15em; }
        html body #footer .inner p, html body #footer .inner a {
          color: RGB(255, 255, 255);
          font-size: 0.75em;
          margin-bottom: 0.35em; }
        html body #footer .inner a {
          display: block;
          text-decoration: none;
          color: RGBA(191, 119, 59, 1); }
        html body #footer .inner p a {
          display: inline-block; }
        html body #footer .inner .button {
          font-size: 0.875em;
          font-weight: bold;
          color: RGB(255, 255, 255);
          display: inline-block; }
          @media screen and (max-width: 960px) {
            html body #footer .inner .button {
              width: 90%;
              max-width: 320px;
              margin: 0.5em auto; } }

/* end html */
.total-raised-container {
  display: none;
  height: 2.688em;
  background-color: #676462;
  margin-bottom: 2.188em; }

.total-raised-container .outer {
  float: left;
  width: 43%; }

.total-raised-container .outer.outer-left {
  text-align: right;
  font-size: 1.500em;
  color: #fff;
  font-family: 'LeagueGothicRegular';
  padding-top: 0.3em; }

.total-raised-container .outer.outer-right {
  color: #FFFFFF;
  font-size: 0.875em;
  padding-top: 0.5em;
  text-align: left;
  line-height: 1.1em; }

.total-raised-container .image-container {
  width: 14%;
  text-align: center;
  float: left; }

.total-raised-container .image-container img {
  margin-top: -0.5em;
  width: 4.063em;
  height: 4.063em; }

h3.header-with-background {
  background-color: #BD7535;
  color: #FFFFFF;
  display: inline-block;
  font-family: 'LeagueGothicRegular';
  font-size: 1.250em;
  font-weight: normal;
  line-height: 1em;
  margin: 0 0 0.2em;
  padding: 0.1em 0.4em; }

h3.header-right {
  color: #676462;
  display: block;
  float: right;
  font-family: 'LeagueGothicRegular';
  font-size: 1.250em;
  font-weight: normal;
  line-height: 1em;
  margin: 0 0 0.2em;
  padding: 0.1em 0.4em; }

.total-raised-container {
  display: none;
  height: 2.688em;
  background-color: #676462;
  margin-bottom: 2.188em; }

.total-raised-container .outer {
  float: left;
  width: 43%; }

.total-raised-container .outer.outer-left {
  text-align: right;
  color: #fff;
  font-family: 'LeagueGothicRegular'; }
  @media screen and (min-width: 961px) {
    .total-raised-container .outer.outer-left {
      font-size: 1.500em;
      padding-top: 0.3em; } }
  @mediuter-right {
      padding-left: 2em; } }

.total-raised-container .image-container {
  width: 14%;
  text-align: center;
  float: left; }

.total-raised-container .image-container img {
  margin-top: -0.5em;
  width: 4.063em;
  height: 4.063em; }

.progress {
  display: none;
  margin-bottom: 1.2em; }

.bar-wrapper {
  height: 1.688em;
  width: 100%;
  background-color: rgba(164, 145, 163, 0.15); }

.bar-wrapper .bar {
  width: 50%;
  background-color: #ba4c11;
  height: 1.688em; }

.bar-wrapper .cell-container {
  margin-top: -1.688em;
  height: 1.688em;
  width: 100%; }

.bar-wrapper .cell-container .cell {
  height: 100%;
  width: 10%;
  background-image: url("../images/bar_bg.png");
  background-repeat: no-repeat;
  float: left; }

.bar-wrapper .cell-container .cell.first {
  background-image: none; }

.progress table {
  font-size: .875em;
  color: #676462;
  width: 100%; }

table tr td.left {
  text-align: left; }

table tr td.right {
  text-align: right; }

.loader {
  margin-bottom: 1.2em;
  text-align: center; }

.loader img {
  width: 1em;
  height: 1em; }
