<commit_before>// LAYOUT
.layout-content {
 // padding: 0 15px;
}
// HEADER
.header-page {
  padding: 85px 20px 30px;
  @media (min-width: $br-mobile) {
    padding: 60px 20px 40px;
  }
  h1 {
    text-align: center;
    color: $cGreen;
    font-size: 21px;
    span{
      color: $dark;
    }
    @media (min-width: $br-mobile) {
      font-size: 47px;
    }
  }
  p {
    font-size: 14px;
    text-align: center;
    color: $dark;
    text-transform: uppercase;
    padding: 10px 0 0;
    @media (min-width: $br-mobile) {
      font-size: 20px;
    }
  }
}



// STATIC PAGE
// header
.header-static {
  background: #333;
  color: $white;
  padding: 85px 0 50px;
  @media (min-width: $br-mobile) {
    padding: 70px 0 50px;
  }
  header {
    font-weight: 300;
  }
  h2,h3,p{
    max-width: 1024px;
  }
  h2 {
    font-size: 47px;
    padding: 0 0 15px;
  }
  h3 {
    font-size: 19px;
    line-height: 1.25;
    padding: 0 0 10px;
  }
  h4{
    text-align: center;
    position: relative;
    @media (min-width: $br-mobile) {
      top: 30px;
    }
  }
  p {
    font-size: 14px;
    line-height: 1.5;
  }
  strong{
    font-weight: 500;
  }
  .inner {
    padding: 0 15px;
  }
  .row {
    @include row(center);
    @include flex-wrap(wrap);
    margin: 20px auto 0;

    @media (min-width: $br-mobile) {
      margin: 50px 0 0;
    }

    >* {
      margin: 5px 0px;
      width: 100%;
      @media (min-width: $br-mobile) {
        margin: 0 20px;
        width: auto;
      }
    }
    a {
      width: 100%;
      margin: 0 auto;
      @media (min-width: $br-mobile-portrait) {
        width: auto;
        text-align: left;
        padding: 0 15px;
        display: inline-block;
      }
      @media (min-width: $br-mobile) {
        min-width: 200px;
        text-align: center;
      }
      &.btn-video{
        min-width: 0;
        margin: 5px 0;
        font-size: 12px;
        @media (min-width: $br-tablet) {
          font-size: 14px;
        }
      }
    }
  }
}

// content
.content-static {
  background: $white;
  @media (min-width: $br-mobile) {
    padding: 40px 0;
  }

  .row {
    @include row();
    @include flex-wrap(wrap);
    position: relative;
  }
  strong{
    font-weight: 500;
  }
  img{
    max-width: 100%;
  }


  aside {
    width: 100%;
    @media (min-width: $br-mobile) {
      width: 260px;
      position: absolute;
      top: 0;
      z-index: 3;
      &.fixed{
        top: 0;
        position: fixed;
      }
      &.bottom{
        top: auto;
        bottom: 0;
      }
    }

    ul {
      border-bottom: 1px solid $border;
      li {
        text-transform: uppercase;
        position: relative;
        font-weight: 500;
        font-size: 14px;
        background: $white;
        @media (min-width: $br-mobile) {
          text-align: center;
          background: #F7F7F7;
        }
        &.no-transform{
          text-transform: none;
        }
        &:hover {
          background: $white;
        }
        .ico{
          display: block;
          position: absolute;
          top: 50%;
          @include transform(translate(0,-50%));
          right: 15px;
          width: 10px;
          height: 100%;
          stroke: $dark;
          @media (min-width: $br-mobile) {
            display: none;
          }
        }
        a {
          color: $dark;
          text-decoration: none;
          line-height: 1.25;
          display: block;
          z-index: 2;
          padding: 21px 30px 21px 15px;
          position: relative;
          border-top: 1px solid $border;
          @media (min-width: $br-mobile) {
            padding: 0;
            border-left: 1px solid $border;
            padding: 21px 10px;
          }


          &.selected {
            background: $white;
            box-shadow: 2px 0 0 0px #FFF;
            &:after{
              content: "";
              position: absolute;
              display: block;
              bottom: 0%;
              left: 0px;
              width: 100%;
              height: 4px;
              background: rgba($cGreen,0.5);
            }
          }
          &.nav-title {
            background: $white;
            border-top: none;
            border-left: none;
            svg {
              width: 11px;
              height: 12px;
            }
            &:hover{
              svg{
                // @include animation(updown,1s,infinite,linear);
              }
            }
          }
        }
      }
    }
  }
  .sources-box {
    width: 100%;
    height: 100%;
    min-height: 500px;
    position: relative;
    padding: 50px 0 100px;
    position: fixed;
    background: $white;
    z-index: 2;
    top: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    @include transform(translate(100%,0));
    @include transition(all 0s $easeOutSine);
    -webkit-overflow-scrolling: touch;
    &.active{
      @include transform(translate(0%,0));
    }
    &.animate{
      @include transition(all 0.3s $easeOutSine);
    }


    @media (min-width: $br-mobile) {
      position: relative;
      height: auto;
      width: calc(100% - 260px);
      border-left: 1px solid $border;
      margin-left: 260px;
      padding: 0;
      overflow-x: visible;
      overflow-y: visible;
      @include transform(translate(0%,0));
    }
    &:before, &:after{
      content: "";
      position: absolute;
      left: -1px;
      height: 40px;
      width: 1px;
      background: $border;

    }
    &:before{
      top: 100%;
    }
    &:after{
      bottom: 100%;
    }
    .sources-content {
      padding: 0 15px;
      position: relative;
      @media (min-width: $br-mobile) {
        padding: 0 35px;
      }
    }
  }
}


.source-article {
  display: none;
  &.selected {
    display: block;
  }
  header {
    color: $dark;
    h2 {
      font-size: 35px;
    }
    h3 {
      font-size: 21px;
      line-height: 1.25;
      padding: 15px 0 0;
    }
    p {
      font-size: 14px;
      line-height: 1.5;
      padding: 10px 0 0;
      a {
        color: $cGreen;
        font-weight: 500;
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
      }
    }
    .btn {
      margin: 15px auto 0;
      width: 100%;
      @media (min-width: $br-mobile-portrait) {
        width: auto;
      }
    }
  }
  .feedback_form {
    margin-top: 20px;
    p {
      text-align: left;
      input,
      textarea {
        width: 100%;
        margin: 4px 0;
        min-height: 25px;
        padding: 6px;
        box-sizing: border-box;
        border-radius: 3px;
        box-shadow: 0px 0px 1px #999;
        border-color: transparent;
        font-size: 0.875rem;
        font-family: inherit;
      }
      textarea {
        min-height: 150px;
      }
      .btn {
        border-radius: 40px;
        box-shadow: none;
        font-size: 14px;
        font-weight: 500;
      }
      label {
        float: left;
        color: #333;
        font-weight: 500;
        font-size: 12px;
        text-transform: uppercase;
        width: 100%;
      }
    }
    .radio-box {
      margin-top: 10px;
      .custom-radio{
        font-size: 14px;
        color: $dark;
        margin: 5px 0 0;
        &:first-child{
          margin: 0;
        }
      }
    }
  }
  .content {
    padding: 20px 0 0;
    .applications-section{
      .inner{
        width: 100%;
        margin: 0;
      }
      .row{
        @include row(space-between);
        .col{
          padding: 0;
          @include col(100);
          @media (min-width: $br-mobile-portrait) {
            @include col(48.4);
          }
          @media (min-width: $br-mobile) {
            @include col(100);
          }
          @media (min-width: 1000px) {
            @include col(48.4);
          }
        }
      }
    }
    .video-box{
      width: 100%;
      margin-bottom: 40px;
      .player{
        padding-bottom: 56.2790%;
        position: relative;
        overflow: hidden;
        iframe{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
      .video-list{
        padding: 20px 0 0;
        li{
          margin-top: 10px;
          cursor: pointer;
          color: $dark;
          &:first-child{
            margin-top: 0;
          }

          &.current, &:hover{
            color: $cGreen;
          }
        }
      }
    }
    // LIST TYPES
    .publications-list {
      li {
        margin: 30px 0 0;
        &:first-child {
          margin: 0;
        }
        h3 {
          font-size: 14px;
          color: $dark;
          font-weight: 500;
        }
        p {
          font-size: 14px;
          color: $dark;
          padding: 5px 0 0;
          line-height: 1.25;
          a {
            color: $cGreen;
            font-weight: 500;
            text-decoration: none;
            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }
    .alert-list {
      li {
        margin: 20px 0 0;
        padding: 20px 0 0;
        border-top: 1px solid $border;
        color: $dark;
        h3 {
          font-size: 21px;
          line-height: 1.25;
          color: $dark;
          font-weight: 500;
        }
        p {
          font-size: 14px;
          line-height: 1.5;
          padding: 10px 0 0;
          a {
            color: $cGreen;
            font-weight: 500;
            text-decoration: none;
            &:hover {
              text-decoration: underline;
            }
          }
        }
        .btn {
          margin: 10px 0 0;
        }
      }
    }
    .faq-list {
      &.double-margin{
        >li{ margin: 45px 0 0;}
      }
      >li {
        margin: 25px 0 0;
        &:first-child { margin: 0; }
        h3 {
          font-size: 21px;
          line-height: 1.25;
          color: $dark;
          font-weight: 500;
        }
        p {
          color: $dark;
          padding: 10px 0 0;
          line-height: 1.5;
          font-size: 14px;
          a {
            text-decoration: none;
            color: $cGreen;
            font-weight: 500;
            &:hover {
              text-decoration: underline;
            }
          }
        }
        .btn {
          margin: 10px 0 0;
          width: 100%;
          @media (min-width: $br-mobile-portrait) {
            width: auto;
          }
        }
        strong {
          font-weight: 500;
        }
        small {
          font-size: 10px;
        }
        blockquote {
          color: lighten($dark,10%);
          font-size: 18px;
          font-style: italic;
          line-height: 1.25;
          &:before {content:'"'}
          &:after {content:'"'}
        }
        .bullets {
          list-style-type: disc;
          color: $dark;
          >li {
            padding: 10px 0 0;
            font-size: 14px;
            margin-left: 20px;
            line-height: 1.5;
            a {
              text-decoration: none;
              color: $cGreen;
              font-weight: 500;
              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
    .awards_logo-list{
      @include row(flex-start);
      >li{
        margin: 0 0 0 20px;
        &:first-child{ margin: 0;}
      }
    }
    .testimonial-list{
      margin: 20px 0 0;
      >li{
        margin: 30px 0 0;
        font-size: 14px;
        color: $dark;
        line-height: 1.5;
        &:first-child{
          margin: 0;
        }
        .testimonial-quote{
          position: relative;
          padding: 10px 0 10px 25px;
          font-style: italic;
          &:before{
            content: "“";
            color: $cGreen;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 40px;
          }
        }
        .author{
          display: block;
          text-align: right;
          strong{
            display: block;
            font-weight: 500;
          }
        }
      }
    }
    .logo-list {
      margin: 0 0 20px;
      @include clearfix();
      @media (min-width: $br-mobile) {
        margin: 0;
      }

      >li {
        display: inline-block;
        width: 50%;
        float: left;
        height: 60px;
        margin: 25px 0 0;
        @media (min-width: $br-mobile) {
          width: 33%;
        }

        a {
          display: block;
          margin: 0 auto;
          width: 88px;
          position: relative;
          top: 50%;
          color: $dark;
          text-transform: uppercase;
          @include transform(translate(0,-50%));
          &.app{
            width: auto;
            white-space: nowrap;
            text-align: center;

            .icon{
              width: 60px;
              height: 60px;
              margin: 0 auto 10px;
              fill: $dark;
            }
          }

          &.wri {
            height: 32px; width: 95px; @include logos-sprite(wri);
            &:hover{
              @include logos-sprite(wrihover);
            }
          }
          &.google {
            height: 29px; width: 85px; @include logos-sprite(google);
            &:hover{
              @include logos-sprite(googlehover);
            }
          }
          &.esri {
            height: 33px; width: 87px; @include logos-sprite(esri);
            &:hover{
              @include logos-sprite(esrihover);
            }
          }
          &.universitymaryland {
            height: 51px; width: 56px; @include logos-sprite(universityofmaryland);
            &:hover{
              @include logos-sprite(universityofmarylandhover);
            }
          }
          &.unep {
            height: 57px; width: 49px; @include logos-sprite(unep);
            &:hover{
              @include logos-sprite(unephover);
            }
          }
          &.imazon {
            height: 24px; width: 79px; @include logos-sprite(imazon);
            &:hover{
              @include logos-sprite(imazonhover);
            }
          }
          &.cfgd {
            height: 40px; width: 84px; @include logos-sprite(centerforglobaldevelopment);
            &:hover{
              @include logos-sprite(centerforglobaldevelopmenthover);
            }
          }
          &.osfac {
            height: 56px; width: 44px; @include logos-sprite(osfac);
            &:hover{
              @include logos-sprite(osfachover);
            }
          }
          &.gfwca {
            height: 44px; width: 42px; @include logos-sprite(globalforestwatchcanada);
            &:hover{
              @include logos-sprite(globalforestwatchcanadahover);
            }
          }
          &.scanex {
            height: 20px; width: 110px; @include logos-sprite(scannex);
            &:hover{
              @include logos-sprite(scannexhover);
            }
          }
          &.twrus {
            height: 28px; width: 110px; @include logos-sprite(tipos);
            &:hover{
              @include logos-sprite(tiposhover);
            }
          }
          &.norwegian {
            height: 46px; width: 110px; @include logos-sprite(norwegianministri);
            &:hover{
              @include logos-sprite(norwegianministrihover);
            }
          }
          &.usaid {
            height: 64px; width: 80px; @include logos-sprite(usaid);
            &:hover{
              @include logos-sprite(usaidhover);
            }
          }
          &.gef {
            height: 59px; width: 51px; @include logos-sprite(gef);
            &:hover{
              @include logos-sprite(gefhover);
            }
          }
          &.ukaid {
            height: 47px; width: 43px; @include logos-sprite(ukaid);
            &:hover{
              @include logos-sprite(ukaidhover);
            }
          }
          &.tilia {
            height: 25px; width: 67px; @include logos-sprite(thetiliafund);
            &:hover{
              @include logos-sprite(thetiliafundhover);
            }
          }
          &.goodall {
            height: 26px; width: 110px; @include logos-sprite(thejanegoodallinstitute);
            &:hover{
              @include logos-sprite(thejanegoodallinstitutehover);
            }
          }
          &.cartodb {
            height: 39px; width: 110px; @include logos-sprite(cartodb);
            &:hover{
              @include logos-sprite(cartodbhover);
            }
          }
          &.vizzuality {
            height: 58px; width: 109px; @include logos-sprite(vizzuality);
            &:hover{
              @include logos-sprite(vizzualityhover);
            }
          }
          &.blueraster {
            height: 48px; width: 110px; @include logos-sprite(blueraster);
            &:hover{
              @include logos-sprite(bluerasterhover);
            }
          }
          &.sida {
            height: 55px; width: 110px; @include logos-sprite(sida);
            &:hover{
              @include logos-sprite(sidahover);
            }
          }
          &.danida {
            height: 15px; width: 82px; @include logos-sprite(danida);
            &:hover{
              @include logos-sprite(danidahover);
            }
          }
          &.cgiar {
            height: 43px; width: 124px; @include logos-sprite(cgiar);
            &:hover{
              @include logos-sprite(cgiarhover);
            }
          }
          &.dutchforeign {
            height: 80px; width: 106px; @include logos-sprite(ministryofforeignaffairs);
            &:hover{
              @include logos-sprite(ministryofforeignaffairshover);
            }
          }
          &.moore {
            height: 37px; width: 96px; @include logos-sprite(moore);
            &:hover{
              @include logos-sprite(moorehover);
            }
          }

          &.bnpb {
            height: 64px; width: 50px; @include logos-sprite(bnpb);
            &:hover{
              @include logos-sprite(bnpbhover);
            }
          }
          &.redd {
            height: 62px; width: 95px; @include logos-sprite(redd);
            &:hover{
              @include logos-sprite(reddhover);
            }
          }
          &.digitalglobe{
            height: 38px; width: 120px; @include logos-sprite(digitalglobe);
            &:hover{
              @include logos-sprite(digitalglobehover);
            }
          }

          &.bobolink {
            height: 53px; width: 105px; @include logos-sprite(bobolink);
          }
          &.vizzuality-big {
            height: 58px; width: 109px; @include logos-sprite(vizzuality);
            &:hover{
              @include logos-sprite(vizzualityhover);
            }
          }
        }
      }
    }
    .app-list{
       >li {
        display: inline-block;
        width: 33%;
        margin: 25px 0 0;
        a {
          display: block;
          margin: 0 auto;
          position: relative;
          color: $dark;
          text-transform: uppercase;
          width: auto;
          text-decoration: none;
          white-space: nowrap;
          text-align: center;
          &:hover{
            text-decoration: none;
            .fire{
              fill: $red;
            }
            .commodities{
              fill: $orange;
            }
          }
          .icon{
            width: 60px;
            height: 60px;
            margin: 0 auto 10px;
            fill: $dark;
          }
        }
      }
    }
  }
}






// KEEP UPDATED
.stories-box {
  width: 100%;
  >ul {
    position: relative;
    @include display-flex();
    @include flex-wrap(wrap);
    @include justify-content(space-between);
    >li {
      padding: 0 0 40px 0;
      position: relative;
      &:first-child { margin-top: 20px;}
      width: 100%;

      @media (min-width: $br-mobile-portrait) {
        width: 47.5%;
        padding: 0 0px 40px;
        &:first-child { margin-top: 0px;}
      }

      @media (min-width: $br-mobile) {
        width: 100%;
        padding: 40px 0;
        border-top: 1px solid $border;
        &:first-child { margin-top: 20px;}
      }

      a {
        text-decoration: none;
        position: relative;
        @include row(flex-start);
        @include flex-wrap(wrap);
      }
      figure {
        width: 100%;
        margin: 0 0 20px -15px;
        @media (min-width: $br-mobile-portrait) {
          overflow: hidden;
          margin: 0 0 20px;
        }
        @media (min-width: $br-mobile) {
          width: 200px;
          position: absolute;
          top: 50%;
          left: 65%;
          margin: 0 0 20px;
          @include transform(translate(0,-50%));
        }
        .bg {
          // background: #000;
          background-position: center;
          background-size: cover;
          padding-bottom: 40%;
          width: calc(100% + 30px);
          margin: 0 auto;
          @media (min-width: $br-mobile) {
            width: 75%;
            border-radius: 50%;
            padding-bottom: 75%;
            border: 1px solid #999;
          }
        }
      }
      .info {
        width: 100%;
        font-size: 14px;
        @media (min-width: $br-mobile) {
          width: 60%;
        }
        h4 {
          color: $dark;
          font-size: 21px;
          line-height: 1.25;
          padding: 0 0 5px;
        }
        p {
          color: #999999;
          font-weight: 400;
          line-height: 1.25;
        }
        .btn {
          margin: 20px 0 0;
        }
      }
    }
  }
  .section-footer{
    border-top: 1px solid $border;
    @include clearfix();
  }
}




// APPLICATIONS
#wrap-applications{ position: relative;}
.aplications-fixed-nav{
  display: none;
  width: 100%;
  @media (min-width: $br-mobile) {
    display: block;
  }
  &.fixed{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
  }
  &.bottom{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
  }
  .max-1600{
    width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    background: #F2F2F3;
    ul{
      @include row();
      li{
        @include col(33.33333);
        a{
          text-align: center;
          display: block;
          padding: 15px 30px;
          color: $dark;
          font-size: 14px;
          text-transform: uppercase;
          cursor: pointer;
          text-decoration: none;
          background: #F2F2F3;
          &:hover{
            background: #e5e5e7;
            color: darken($dark,10%);
          }
          &.current {
            background: $white;
            color: $dark;
          }
        }
      }
    }
  }
}

.applications-section {
  &#develop-your-own-app{
    padding-bottom: 80px;
    .source-article{
      padding: 0 20px;
    }
  }
  h2 {
    font-size: 35px;
    color: $dark;
    padding: 40px 20px;
    text-align: center;
    &:first-child {
      border: 0;
    }
  }
  .subsection-title{
    color: $dark;
    margin: -20px 0 20px;
    text-align: center;
    a{
      margin: 10px auto 0;
       @media (min-width: $br-mobile-portrait) {
        margin: 0;
      }
    }
  }
  &.partners {
    border-top: 1px solid $border;
  }
  .row {
    @include row(flex-start);
    @include flex-wrap(wrap);
    .col {
      @include col(100);
      @media (min-width: $br-mobile-portrait) {
        @include col(50);
        @include display-flex();
      }
      @media (min-width: $br-mobile) {
        @include col(33.3333);
        @include display-flex();
      }
      padding: 0 20px;
      margin: 0px 0 25px;
      overflow: hidden;
      .card {
        width: 100%;
        position: relative;
        padding: 40px 25px 125px;
        text-align: center;
        border: 1px solid $border;
        overflow: hidden;
        &:hover{
          .description{
            visibility: visible;
            opacity: 1;
          }
        }

      }<commit_msg>Applications: border is not rendering well. I have changed it to a box-shadow<commit_after>// LAYOUT
.layout-content {
 // padding: 0 15px;
}
// HEADER
.header-page {
  padding: 85px 20px 30px;
  @media (min-width: $br-mobile) {
    padding: 60px 20px 40px;
  }
  h1 {
    text-align: center;
    color: $cGreen;
    font-size: 21px;
    span{
      color: $dark;
    }
    @media (min-width: $br-mobile) {
      font-size: 47px;
    }
  }
  p {
    font-size: 14px;
    text-align: center;
    color: $dark;
    text-transform: uppercase;
    padding: 10px 0 0;
    @media (min-width: $br-mobile) {
      font-size: 20px;
    }
  }
}



// STATIC PAGE
// header
.header-static {
  background: #333;
  color: $white;
  padding: 85px 0 50px;
  @media (min-width: $br-mobile) {
    padding: 70px 0 50px;
  }
  header {
    font-weight: 300;
  }
  h2,h3,p{
    max-width: 1024px;
  }
  h2 {
    font-size: 47px;
    padding: 0 0 15px;
  }
  h3 {
    font-size: 19px;
    line-height: 1.25;
    padding: 0 0 10px;
  }
  h4{
    text-align: center;
    position: relative;
    @media (min-width: $br-mobile) {
      top: 30px;
    }
  }
  p {
    font-size: 14px;
    line-height: 1.5;
  }
  strong{
    font-weight: 500;
  }
  .inner {
    padding: 0 15px;
  }
  .row {
    @include row(center);
    @include flex-wrap(wrap);
    margin: 20px auto 0;

    @media (min-width: $br-mobile) {
      margin: 50px 0 0;
    }

    >* {
      margin: 5px 0px;
      width: 100%;
      @media (min-width: $br-mobile) {
        margin: 0 20px;
        width: auto;
      }
    }
    a {
      width: 100%;
      margin: 0 auto;
      @media (min-width: $br-mobile-portrait) {
        width: auto;
        text-align: left;
        padding: 0 15px;
        display: inline-block;
      }
      @media (min-width: $br-mobile) {
        min-width: 200px;
        text-align: center;
      }
      &.btn-video{
        min-width: 0;
        margin: 5px 0;
        font-size: 12px;
        @media (min-width: $br-tablet) {
          font-size: 14px;
        }
      }
    }
  }
}

// content
.content-static {
  background: $white;
  @media (min-width: $br-mobile) {
    padding: 40px 0;
  }

  .row {
    @include row();
    @include flex-wrap(wrap);
    position: relative;
  }
  strong{
    font-weight: 500;
  }
  img{
    max-width: 100%;
  }


  aside {
    width: 100%;
    @media (min-width: $br-mobile) {
      width: 260px;
      position: absolute;
      top: 0;
      z-index: 3;
      &.fixed{
        top: 0;
        position: fixed;
      }
      &.bottom{
        top: auto;
        bottom: 0;
      }
    }

    ul {
      border-bottom: 1px solid $border;
      li {
        text-transform: uppercase;
        position: relative;
        font-weight: 500;
        font-size: 14px;
        background: $white;
        @media (min-width: $br-mobile) {
          text-align: center;
          background: #F7F7F7;
        }
        &.no-transform{
          text-transform: none;
        }
        &:hover {
          background: $white;
        }
        .ico{
          display: block;
          position: absolute;
          top: 50%;
          @include transform(translate(0,-50%));
          right: 15px;
          width: 10px;
          height: 100%;
          stroke: $dark;
          @media (min-width: $br-mobile) {
            display: none;
          }
        }
        a {
          color: $dark;
          text-decoration: none;
          line-height: 1.25;
          display: block;
          z-index: 2;
          padding: 21px 30px 21px 15px;
          position: relative;
          border-top: 1px solid $border;
          @media (min-width: $br-mobile) {
            padding: 0;
            border-left: 1px solid $border;
            padding: 21px 10px;
          }


          &.selected {
            background: $white;
            box-shadow: 2px 0 0 0px #FFF;
            &:after{
              content: "";
              position: absolute;
              display: block;
              bottom: 0%;
              left: 0px;
              width: 100%;
              height: 4px;
              background: rgba($cGreen,0.5);
            }
          }
          &.nav-title {
            background: $white;
            border-top: none;
            border-left: none;
            svg {
              width: 11px;
              height: 12px;
            }
            &:hover{
              svg{
                // @include animation(updown,1s,infinite,linear);
              }
            }
          }
        }
      }
    }
  }
  .sources-box {
    width: 100%;
    height: 100%;
    min-height: 500px;
    position: relative;
    padding: 50px 0 100px;
    position: fixed;
    background: $white;
    z-index: 2;
    top: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    @include transform(translate(100%,0));
    @include transition(all 0s $easeOutSine);
    -webkit-overflow-scrolling: touch;
    &.active{
      @include transform(translate(0%,0));
    }
    &.animate{
      @include transition(all 0.3s $easeOutSine);
    }


    @media (min-width: $br-mobile) {
      position: relative;
      height: auto;
      width: calc(100% - 260px);
      border-left: 1px solid $border;
      margin-left: 260px;
      padding: 0;
      overflow-x: visible;
      overflow-y: visible;
      @include transform(translate(0%,0));
    }
    &:before, &:after{
      content: "";
      position: absolute;
      left: -1px;
      height: 40px;
      width: 1px;
      background: $border;

    }
    &:before{
      top: 100%;
    }
    &:after{
      bottom: 100%;
    }
    .sources-content {
      padding: 0 15px;
      position: relative;
      @media (min-width: $br-mobile) {
        padding: 0 35px;
      }
    }
  }
}


.source-article {
  display: none;
  &.selected {
    display: block;
  }
  header {
    color: $dark;
    h2 {
      font-size: 35px;
    }
    h3 {
      font-size: 21px;
      line-height: 1.25;
      padding: 15px 0 0;
    }
    p {
      font-size: 14px;
      line-height: 1.5;
      padding: 10px 0 0;
      a {
        color: $cGreen;
        font-weight: 500;
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
      }
    }
    .btn {
      margin: 15px auto 0;
      width: 100%;
      @media (min-width: $br-mobile-portrait) {
        width: auto;
      }
    }
  }
  .feedback_form {
    margin-top: 20px;
    p {
      text-align: left;
      input,
      textarea {
        width: 100%;
        margin: 4px 0;
        min-height: 25px;
        padding: 6px;
        box-sizing: border-box;
        border-radius: 3px;
        box-shadow: 0px 0px 1px #999;
        border-color: transparent;
        font-size: 0.875rem;
        font-family: inherit;
      }
      textarea {
        min-height: 150px;
      }
      .btn {
        border-radius: 40px;
        box-shadow: none;
        font-size: 14px;
        font-weight: 500;
      }
      label {
        float: left;
        color: #333;
        font-weight: 500;
        font-size: 12px;
        text-transform: uppercase;
        width: 100%;
      }
    }
    .radio-box {
      margin-top: 10px;
      .custom-radio{
        font-size: 14px;
        color: $dark;
        margin: 5px 0 0;
        &:first-child{
          margin: 0;
        }
      }
    }
  }
  .content {
    padding: 20px 0 0;
    .applications-section{
      .inner{
        width: 100%;
        margin: 0;
      }
      .row{
        @include row(space-between);
        .col{
          padding: 0;
          @include col(100);
          @media (min-width: $br-mobile-portrait) {
            @include col(48.4);
          }
          @media (min-width: $br-mobile) {
            @include col(100);
          }
          @media (min-width: 1000px) {
            @include col(48.4);
          }
        }
      }
    }
    .video-box{
      width: 100%;
      margin-bottom: 40px;
      .player{
        padding-bottom: 56.2790%;
        position: relative;
        overflow: hidden;
        iframe{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
      .video-list{
        padding: 20px 0 0;
        li{
          margin-top: 10px;
          cursor: pointer;
          color: $dark;
          &:first-child{
            margin-top: 0;
          }

          &.current, &:hover{
            color: $cGreen;
          }
        }
      }
    }
    // LIST TYPES
    .publications-list {
      li {
        margin: 30px 0 0;
        &:first-child {
          margin: 0;
        }
        h3 {
          font-size: 14px;
          color: $dark;
          font-weight: 500;
        }
        p {
          font-size: 14px;
          color: $dark;
          padding: 5px 0 0;
          line-height: 1.25;
          a {
            color: $cGreen;
            font-weight: 500;
            text-decoration: none;
            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }
    .alert-list {
      li {
        margin: 20px 0 0;
        padding: 20px 0 0;
        border-top: 1px solid $border;
        color: $dark;
        h3 {
          font-size: 21px;
          line-height: 1.25;
          color: $dark;
          font-weight: 500;
        }
        p {
          font-size: 14px;
          line-height: 1.5;
          padding: 10px 0 0;
          a {
            color: $cGreen;
            font-weight: 500;
            text-decoration: none;
            &:hover {
              text-decoration: underline;
            }
          }
        }
        .btn {
          margin: 10px 0 0;
        }
      }
    }
    .faq-list {
      &.double-margin{
        >li{ margin: 45px 0 0;}
      }
      >li {
        margin: 25px 0 0;
        &:first-child { margin: 0; }
        h3 {
          font-size: 21px;
          line-height: 1.25;
          color: $dark;
          font-weight: 500;
        }
        p {
          color: $dark;
          padding: 10px 0 0;
          line-height: 1.5;
          font-size: 14px;
          a {
            text-decoration: none;
            color: $cGreen;
            font-weight: 500;
            &:hover {
              text-decoration: underline;
            }
          }
        }
        .btn {
          margin: 10px 0 0;
          width: 100%;
          @media (min-width: $br-mobile-portrait) {
            width: auto;
          }
        }
        strong {
          font-weight: 500;
        }
        small {
          font-size: 10px;
        }
        blockquote {
          color: lighten($dark,10%);
          font-size: 18px;
          font-style: italic;
          line-height: 1.25;
          &:before {content:'"'}
          &:after {content:'"'}
        }
        .bullets {
          list-style-type: disc;
          color: $dark;
          >li {
            padding: 10px 0 0;
            font-size: 14px;
            margin-left: 20px;
            line-height: 1.5;
            a {
              text-decoration: none;
              color: $cGreen;
              font-weight: 500;
              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
    .awards_logo-list{
      @include row(flex-start);
      >li{
        margin: 0 0 0 20px;
        &:first-child{ margin: 0;}
      }
    }
    .testimonial-list{
      margin: 20px 0 0;
      >li{
        margin: 30px 0 0;
        font-size: 14px;
        color: $dark;
        line-height: 1.5;
        &:first-child{
          margin: 0;
        }
        .testimonial-quote{
          position: relative;
          padding: 10px 0 10px 25px;
          font-style: italic;
          &:before{
            content: "“";
            color: $cGreen;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 40px;
          }
        }
        .author{
          display: block;
          text-align: right;
          strong{
            display: block;
            font-weight: 500;
          }
        }
      }
    }
    .logo-list {
      margin: 0 0 20px;
      @include clearfix();
      @media (min-width: $br-mobile) {
        margin: 0;
      }

      >li {
        display: inline-block;
        width: 50%;
        float: left;
        height: 60px;
        margin: 25px 0 0;
        @media (min-width: $br-mobile) {
          width: 33%;
        }

        a {
          display: block;
          margin: 0 auto;
          width: 88px;
          position: relative;
          top: 50%;
          color: $dark;
          text-transform: uppercase;
          @include transform(translate(0,-50%));
          &.app{
            width: auto;
            white-space: nowrap;
            text-align: center;

            .icon{
              width: 60px;
              height: 60px;
              margin: 0 auto 10px;
              fill: $dark;
            }
          }

          &.wri {
            height: 32px; width: 95px; @include logos-sprite(wri);
            &:hover{
              @include logos-sprite(wrihover);
            }
          }
          &.google {
            height: 29px; width: 85px; @include logos-sprite(google);
            &:hover{
              @include logos-sprite(googlehover);
            }
          }
          &.esri {
            height: 33px; width: 87px; @include logos-sprite(esri);
            &:hover{
              @include logos-sprite(esrihover);
            }
          }
          &.universitymaryland {
            height: 51px; width: 56px; @include logos-sprite(universityofmaryland);
            &:hover{
              @include logos-sprite(universityofmarylandhover);
            }
          }
          &.unep {
            height: 57px; width: 49px; @include logos-sprite(unep);
            &:hover{
              @include logos-sprite(unephover);
            }
          }
          &.imazon {
            height: 24px; width: 79px; @include logos-sprite(imazon);
            &:hover{
              @include logos-sprite(imazonhover);
            }
          }
          &.cfgd {
            height: 40px; width: 84px; @include logos-sprite(centerforglobaldevelopment);
            &:hover{
              @include logos-sprite(centerforglobaldevelopmenthover);
            }
          }
          &.osfac {
            height: 56px; width: 44px; @include logos-sprite(osfac);
            &:hover{
              @include logos-sprite(osfachover);
            }
          }
          &.gfwca {
            height: 44px; width: 42px; @include logos-sprite(globalforestwatchcanada);
            &:hover{
              @include logos-sprite(globalforestwatchcanadahover);
            }
          }
          &.scanex {
            height: 20px; width: 110px; @include logos-sprite(scannex);
            &:hover{
              @include logos-sprite(scannexhover);
            }
          }
          &.twrus {
            height: 28px; width: 110px; @include logos-sprite(tipos);
            &:hover{
              @include logos-sprite(tiposhover);
            }
          }
          &.norwegian {
            height: 46px; width: 110px; @include logos-sprite(norwegianministri);
            &:hover{
              @include logos-sprite(norwegianministrihover);
            }
          }
          &.usaid {
            height: 64px; width: 80px; @include logos-sprite(usaid);
            &:hover{
              @include logos-sprite(usaidhover);
            }
          }
          &.gef {
            height: 59px; width: 51px; @include logos-sprite(gef);
            &:hover{
              @include logos-sprite(gefhover);
            }
          }
          &.ukaid {
            height: 47px; width: 43px; @include logos-sprite(ukaid);
            &:hover{
              @include logos-sprite(ukaidhover);
            }
          }
          &.tilia {
            height: 25px; width: 67px; @include logos-sprite(thetiliafund);
            &:hover{
              @include logos-sprite(thetiliafundhover);
            }
          }
          &.goodall {
            height: 26px; width: 110px; @include logos-sprite(thejanegoodallinstitute);
            &:hover{
              @include logos-sprite(thejanegoodallinstitutehover);
            }
          }
          &.cartodb {
            height: 39px; width: 110px; @include logos-sprite(cartodb);
            &:hover{
              @include logos-sprite(cartodbhover);
            }
          }
          &.vizzuality {
            height: 58px; width: 109px; @include logos-sprite(vizzuality);
            &:hover{
              @include logos-sprite(vizzualityhover);
            }
          }
          &.blueraster {
            height: 48px; width: 110px; @include logos-sprite(blueraster);
            &:hover{
              @include logos-sprite(bluerasterhover);
            }
          }
          &.sida {
            height: 55px; width: 110px; @include logos-sprite(sida);
            &:hover{
              @include logos-sprite(sidahover);
            }
          }
          &.danida {
            height: 15px; width: 82px; @include logos-sprite(danida);
            &:hover{
              @include logos-sprite(danidahover);
            }
          }
          &.cgiar {
            height: 43px; width: 124px; @include logos-sprite(cgiar);
            &:hover{
              @include logos-sprite(cgiarhover);
            }
          }
          &.dutchforeign {
            height: 80px; width: 106px; @include logos-sprite(ministryofforeignaffairs);
            &:hover{
              @include logos-sprite(ministryofforeignaffairshover);
            }
          }
          &.moore {
            height: 37px; width: 96px; @include logos-sprite(moore);
            &:hover{
              @include logos-sprite(moorehover);
            }
          }

          &.bnpb {
            height: 64px; width: 50px; @include logos-sprite(bnpb);
            &:hover{
              @include logos-sprite(bnpbhover);
            }
          }
          &.redd {
            height: 62px; width: 95px; @include logos-sprite(redd);
            &:hover{
              @include logos-sprite(reddhover);
            }
          }
          &.digitalglobe{
            height: 38px; width: 120px; @include logos-sprite(digitalglobe);
            &:hover{
              @include logos-sprite(digitalglobehover);
            }
          }

          &.bobolink {
            height: 53px; width: 105px; @include logos-sprite(bobolink);
          }
          &.vizzuality-big {
            height: 58px; width: 109px; @include logos-sprite(vizzuality);
            &:hover{
              @include logos-sprite(vizzualityhover);
            }
          }
        }
      }
    }
    .app-list{
       >li {
        display: inline-block;
        width: 33%;
        margin: 25px 0 0;
        a {
          display: block;
          margin: 0 auto;
          position: relative;
          color: $dark;
          text-transform: uppercase;
          width: auto;
          text-decoration: none;
          white-space: nowrap;
          text-align: center;
          &:hover{
            text-decoration: none;
            .fire{
              fill: $red;
            }
            .commodities{
              fill: $orange;
            }
          }
          .icon{
            width: 60px;
            height: 60px;
            margin: 0 auto 10px;
            fill: $dark;
          }
        }
      }
    }
  }
}






// KEEP UPDATED
.stories-box {
  width: 100%;
  >ul {
    position: relative;
    @include display-flex();
    @include flex-wrap(wrap);
    @include justify-content(space-between);
    >li {
      padding: 0 0 40px 0;
      position: relative;
      &:first-child { margin-top: 20px;}
      width: 100%;

      @media (min-width: $br-mobile-portrait) {
        width: 47.5%;
        padding: 0 0px 40px;
        &:first-child { margin-top: 0px;}
      }

      @media (min-width: $br-mobile) {
        width: 100%;
        padding: 40px 0;
        border-top: 1px solid $border;
        &:first-child { margin-top: 20px;}
      }

      a {
        text-decoration: none;
        position: relative;
        @include row(flex-start);
        @include flex-wrap(wrap);
      }
      figure {
        width: 100%;
        margin: 0 0 20px -15px;
        @media (min-width: $br-mobile-portrait) {
          overflow: hidden;
          margin: 0 0 20px;
        }
        @media (min-width: $br-mobile) {
          width: 200px;
          position: absolute;
          top: 50%;
          left: 65%;
          margin: 0 0 20px;
          @include transform(translate(0,-50%));
        }
        .bg {
          // background: #000;
          background-position: center;
          background-size: cover;
          padding-bottom: 40%;
          width: calc(100% + 30px);
          margin: 0 auto;
          @media (min-width: $br-mobile) {
            width: 75%;
            border-radius: 50%;
            padding-bottom: 75%;
            border: 1px solid #999;
          }
        }
      }
      .info {
        width: 100%;
        font-size: 14px;
        @media (min-width: $br-mobile) {
          width: 60%;
        }
        h4 {
          color: $dark;
          font-size: 21px;
          line-height: 1.25;
          padding: 0 0 5px;
        }
        p {
          color: #999999;
          font-weight: 400;
          line-height: 1.25;
        }
        .btn {
          margin: 20px 0 0;
        }
      }
    }
  }
  .section-footer{
    border-top: 1px solid $border;
    @include clearfix();
  }
}




// APPLICATIONS
#wrap-applications{ position: relative;}
.aplications-fixed-nav{
  display: none;
  width: 100%;
  @media (min-width: $br-mobile) {
    display: block;
  }
  &.fixed{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
  }
  &.bottom{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
  }
  .max-1600{
    width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    background: #F2F2F3;
    ul{
      @include row();
      li{
        @include col(33.33333);
        a{
          text-align: center;
          display: block;
          padding: 15px 30px;
          color: $dark;
          font-size: 14px;
          text-transform: uppercase;
          cursor: pointer;
          text-decoration: none;
          background: #F2F2F3;
          &:hover{
            background: #e5e5e7;
            color: darken($dark,10%);
          }
          &.current {
            background: $white;
            color: $dark;
          }
        }
      }
    }
  }
}

.applications-section {
  &#develop-your-own-app{
    padding-bottom: 80px;
    .source-article{
      padding: 0 20px;
    }
  }
  h2 {
    font-size: 35px;
    color: $dark;
    padding: 40px 20px;
    text-align: center;
    &:first-child {
      border: 0;
    }
  }
  .subsection-title{
    color: $dark;
    margin: -20px 0 20px;
    text-align: center;
    a{
      margin: 10px auto 0;
       @media (min-width: $br-mobile-portrait) {
        margin: 0;
      }
    }
  }
  &.partners {
    border-top: 1px solid $border;
  }
  .row {
    @include row(flex-start);
    @include flex-wrap(wrap);
    .col {
      @include col(100);
      @media (min-width: $br-mobile-portrait) {
        @include col(50);
        @include display-flex();
      }
      @media (min-width: $br-mobile) {
        @include col(33.3333);
        @include display-flex();
      }
      padding: 0 20px;
      margin: 0px 0 25px;
      .card {
        width: 100%;
        position: relative;
        padding: 40px 25px 125px;
        text-align: center;
        box-shadow: 0 0 0 1px $border;
        &:hover{
          .description{
            visibility: visible;
            opacity: 1;
          }
        }

      }
{'fraction_non_alphanumeric': 0.1216284134695929, 'fraction_numerical': 0.038176411459205896, 'mean_word_length': 1.2130410603392343, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2262347', 'n_tokens_mistral': 17003, 'n_tokens_neox': 15037, 'n_words': 3332}