html {
  box-sizing: border-box;
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

.clearfix {
  zoom: 1;
}

.clearfix:before,
.clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}

.clearfix:after {
  clear: both;
}

@font-face {
  font-family: "osp-dindin";
  src: url("osp-din-webfont.eot");
  src: url("osp-din-webfont-.eot#iefix") format("embedded-opentype"), url("osp-din-webfont.woff2") format("woff2"), url("osp-din-webfont.woff") format("woff"), url("osp-din-webfont.ttf") format("truetype"), url("osp-din-webfont.svg#osp-dindin") format("svg");
  font-weight: normal;
  font-style: normal;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInLayer {
  0% {
    opacity: 0;
    z-index: 1;
  }

  1% {
    opacity: 0;
    z-index: 2;
  }

  100% {
    opacity: 1;
  }
}

@keyframes shake {

  from,
  100% {
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes bounceFloat {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(6px);
  }
}

@keyframes bounceFloatRotate {
  from {
    transform: translateY(0) rotate3d(1, 1, 1, -15deg);
  }

  to {
    transform: translateY(6px) rotate3d(1, 1, 1, -15deg);
  }
}

.osp-header {
  font-family: "osp-dindin", serif;
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 1px;
  font-size: 60px;
  line-height: 53px;
  margin-bottom: 25px;
}

@media only screen and (min-width: 40.063em) {
  .osp-header {
    font-size: 80px;
    line-height: 67px;
  }

  .osp-header .line-1 {
    display: block;
    position: relative;
    left: -35px;
  }

  .osp-header .line-2 {
    position: relative;
    left: 35px;
  }

  .osp-header.one-line .split-2 {
    display: inline-block;
    transform: translateY(10px);
  }
}

.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

video {
  opacity: 0;
  transition: opacity 1s ease-in;
}

video.loaded {
  opacity: 1;
}

body,
p {
  line-height: 1.5;
}

.container {
  padding: 0;
  min-height: 100vh;
}

.container p {
  font-size: 16px;
  font-weight: 300;
}

@media only screen and (min-width: 40.063em) {
  .container p {
    font-size: 18px;
  }
}

.button {
  font-size: 16px;
  height: 55px;
  line-height: 55px;
  padding: 0 20px;
}

@media only screen and (min-width: 40.063em) {
  .button {
    padding: 0 40px;
  }
}

.full-height {
  height: 100vh;
  display: table;
  width: 100%;
  padding-top: 120px;
  padding-bottom: 120px;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
}

@media only screen and (min-width: 40.063em) {
  .full-height {
    height: auto;
    min-height: 750px;
  }
}

.full-height-inner {
  display: table-cell;
  vertical-align: middle;
}

.wrapper {
  transform: none;
}

.container .extra-donate-copy {
  font-weight: 500;
  font-size: 12px;
  color: #67c0b8;
}

.september-header {
  font-family: "osp-dindin", serif;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 1px;
  text-align: center;
  font-weight: 300;
  font-size: 1em;
  transition: opacity 0.35s cubic-bezier(0.77, 0, 0.175, 1);
}

@media only screen and (min-width: 40.063em) {
  .september-header {
    margin-top: -15px;
    font-size: 1.5em;
  }
}

@media only screen and (min-width: 64.063em) {
  .september-header {
    margin-top: -35px;
    font-size: 1.75em;
  }
}

.september-header .september {
  display: block;
  margin-bottom: -0.7em;
  color: #f7f4ea;
  font-size: 3.5em;
}

.september-header .campaign {
  font-size: 2.5em;
  color: #987f40;
  position: relative;
  z-index: 1;
}

.september-header .year {
  font-size: 1em;
  font-family: Georgia, serif;
  vertical-align: middle;
  color: #987f40;
  position: relative;
  z-index: 1;
  top: -0.4em;
}

.september-header .shift {
  position: relative;
  top: 10px;
}

.mobile-progress {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  margin: 0;
  padding: 0;
  z-index: 1;
}

.mobile-progress .progress-numbers {
  display: block;
}

@media only screen and (min-width: 64.063em) {
  .mobile-progress {
    display: none;
  }
}

.lazyloading {
  opacity: 0;
}

.lazyloaded {
  opacity: 1;
  transition: opacity .25s ease-in;
}

.fixed-shape {
  display: none;
}

@media only screen and (min-width: 40.063em) {
  .fixed-shape {
    display: block;
    z-index: 4;
    position: absolute;
  }
}

@media only screen and (min-width: 64.063em) {
  .fixed-shape {
    animation: bounceFloat 1s linear alternate-reverse infinite;
  }
}

.confetti-1 svg {
  width: 84px;
  height: 181px;
}

.confetti-2 svg {
  width: 75px;
  height: 198px;
}

.confetti-3 svg {
  width: 60px;
  height: 227px;
}

@media only screen and (min-width: 64.063em) {
  .confetti-3 svg {
    width: 80px;
    height: 156px;
  }
}

.confetti-4 svg {
  width: 106px;
  height: 184px;
}

.confetti-5 svg {
  width: 60px;
  height: 254px;
}

@media only screen and (min-width: 64.063em) {
  .confetti-5 svg {
    width: 81px;
    height: 207px;
  }
}

.confetti-6 svg {
  width: 106px;
  height: 184px;
}

.confetti-7 svg {
  width: 110px;
  height: 237px;
}

@media only screen and (min-width: 64.063em) {
  .confetti-7 svg {
    width: 130px;
    height: 309px;
  }
}

.confetti-8 svg {
  width: 80px;
  height: 262px;
}

.confetti-9 svg {
  width: 106px;
  height: 184px;
}

.confetti-seal svg {
  width: 120px;
  height: 120px;
}

.confetti-1 {
  right: 50%;
  bottom: -60px;
  margin-right: -340px;
}

@media only screen and (min-width: 64.063em) {
  .confetti-1 {
    margin-right: -510px;
  }
}

.confetti-2 {
  left: 50%;
  margin-left: -340px;
  top: -80px;
}

@media only screen and (min-width: 64.063em) {
  .confetti-2 {
    margin-left: -400px;
  }
}

.confetti-3 {
  left: 50%;
  margin-left: -145px;
  top: 20px;
}

@media only screen and (min-width: 64.063em) {
  .confetti-3 {
    margin-left: -220px;
    top: -40px;
  }
}

.confetti-4 {
  right: 50%;
  top: -40px;
  margin-right: -420px;
}

@media only screen and (min-width: 64.063em) {
  .confetti-4 {
    margin-right: -490px;
  }
}

.confetti-5 {
  right: 50%;
  top: -90px;
  margin-right: -330px;
}

@media only screen and (min-width: 64.063em) {
  .confetti-5 {
    margin-right: -490px;
  }
}

.confetti-6 {
  left: 50%;
  margin-left: -360px;
  top: -20px;
}

@media only screen and (min-width: 64.063em) {
  .confetti-6 {
    margin-left: -450px;
    top: 50px;
  }
}

.confetti-7 {
  top: -160px;
  right: 50%;
  margin-right: -320px;
}

@media only screen and (min-width: 64.063em) {
  .confetti-7 {
    margin-right: -415px;
  }
}

.confetti-8 {
  top: -149px;
  right: 50%;
  margin-right: -150px;
}

@media only screen and (min-width: 64.063em) {
  .confetti-8 {
    top: -190px;
    margin-right: -220px;
  }
}

.confetti-9 {
  left: 50%;
  margin-left: -340px;
  top: -80px;
}

@media only screen and (min-width: 64.063em) {
  .confetti-9 {
    margin-left: -420px;
  }
}

.confetti-seal {
  left: 50%;
  margin-left: -400px;
  top: -65px;
}

@media only screen and (min-width: 64.063em) {
  .confetti-seal {
    margin-left: -450px;
  }
}

.confetti-seal svg path {
  fill: #F8C626;
}

.border-stuff {
  position: fixed;
  animation: fadeIn 2s ease-in;
  z-index: 5;
}

.border-hashtag {
  display: none;
}

@media only screen and (min-width: 64.063em) {
  .border-hashtag {
    display: block;
    top: 50%;
    margin-top: -12px;
    color: #987f40;
    -webkit-transform-origin: 50% 53%;
    transition: transform 0.35s cubic-bezier(0.77, 0, 0.175, 1);
    font-size: 10px;
    letter-spacing: 1px;
    transition: all 0.15s ease-in;
  }

  .border-hashtag.white {
    color: #fff;
  }

  .border-hashtag.white svg path {
    fill: #fff;
  }
}

.border-hashtag svg {
  margin-top: 5px;
  display: block;
  width: 100px;
  height: 3px;
  transition: all 0.15s ease-in;
}

.border-hashtag svg path {
  fill: #987f40;
  transition: all 0.15s ease-in;
}

.hashtag-left {
  left: -32px;
  transform: rotate(270deg) translateZ(0);
}

.hashtag-right {
  right: -32px;
  transform: rotate(90deg) translateZ(0);
}

.border-button {
  display: none;
}

@media only screen and (min-width: 64.063em) {
  .border-button {
    display: block;
    background: transparent;
    color: #987f40;
    border: solid 2px #987f40;
    bottom: 10px;
    right: 10px;
    font-size: 11px;
    height: 32px;
    line-height: 30px;
    transition: all 0.35s ease-in;
    padding: 0 15px;
  }

  .border-button:hover {
    background: #987f40;
    color: #fff;
  }

  .border-button.white {
    color: #fff;
    border-color: #fff;
  }

  .border-button.white:hover {
    border-color: rgba(255, 255, 255, 0.5);
  }
}

.hero {
  height: 100vh;
  position: relative;
  background: #000;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.hero:before {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.touch .hero {
  background-image: url("hero-touch.jpg");
  background-position: center;
  background-size: cover;
}

@media only screen and (min-width: 40.063em) {
  .touch .hero {
    background-image: url("hero-touch-large.jpg");
  }
}

.touch .hero .hero-video {
  display: none;
}

.hero .progress-numbers {
  color: #fff;
}

.hero-video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
}

.hero-content {
  width: 100%;
  z-index: 2;
  padding: 0 10px;
}

.hero-tagline {
  color: #fff;
  max-width: 295px;
  margin: 0 auto 30px;
  text-align: center;
}

@media only screen and (min-width: 40.063em) {
  .hero-tagline {
    max-width: 600px;
  }
}

.play-video {
  width: 75px;
  height: 75px;
  display: table;
  margin: auto;
  border-radius: 50%;
  background: #8ed4cc;
  text-align: center;
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  backface-visibility: hidden;
  z-index: 2;
}

.play-video .icn {
  display: table-cell;
  vertical-align: middle;
  color: #fff;
  font-size: 30px;
  transition: all 0.25s 0.5s ease-in;
}

.play-video .icn:after {
  content: '';
  display: inline-block;
  margin-right: 7px;
  float: left;
  height: 1px;
}

@media only screen and (min-width: 40.063em) {
  .play-video {
    width: 100px;
    height: 100px;
    font-size: 40px;
  }

  .play-video:hover {
    transform: scale(1.5);
  }

  .play-video .icn {
    font-size: 40px;
  }

  .play-video .icn:after {
    margin-right: 9px;
  }
}

.video-popup {
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  transition: background .5s linear;
}

.video-box {
  width: 92vw;
  height: 52.25vw;
  max-height: 92vh;
  max-width: 163.78vh;
  margin: auto;
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
  position: absolute;
  padding-bottom: 0;
  z-index: 1;
}

.close-video {
  color: #fff;
  font-size: 30px;
  position: absolute;
  top: 20px;
  right: 20px;
}

.hero-video-active .video-popup {
  animation: fadeInLayer 0.75s linear forwards;
  z-index: 5000;
  background: black;
}

.hero-video-active .play-video {
  transition: all 0.6s 0.15s cubic-bezier(0.77, 0, 0.175, 1);
  transform: scale(50);
  opacity: 0.8;
  z-index: 2;
  background: #000;
}

.hero-video-active .play-video:hover {
  transform: scale(50);
}

.hero-video-active .play-video .icn {
  opacity: 0;
  transition: all 0.15s ease-in;
}

.hero-video-active .september-header {
  opacity: 0;
}

.home-link {
  display: table;
  margin: -60px auto 10px;
  color: #f7f4ea;
  font-size: 34px;
}

.home-link:hover {
  color: #987f40;
}

.general-cta {
  background: #593780;
  text-align: center;
  color: #fff;
}

.general-cta h3 {
  font-weight: 300;
  max-width: 590px;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (min-width: 40.063em) {
  .general-cta h3 {
    font-size: 28px;
  }
}

@media only screen and (min-width: 64.063em) {
  .general-cta h3 {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

.general-cta .button {
  margin-top: 40px;
}

.general-cta .campaign,
.general-cta .year {
  color: #F8C626;
}

.campaign-generator {
  text-align: center;
  background-color: #f7f4ea;
}

.campaign-generator .open-twitter {
  color: #67c0b8;
  display: table;
  margin: 10px auto 0;
}

.campaign-generator .open-twitter .icn {
  font-size: 20px;
}

.campaign-generator .open-twitter:hover {
  color: #8bcfc9;
}

@media only screen and (min-width: 40.063em) {
  .campaign-generator {
    background-image: url("mountain-faded.jpg");
    background-position: center;
    background-size: cover;
  }
}

.campaign-generator .osp-header {
  color: #987f40;
}

.campaign-generator .osp-header .accent {
  color: #8ed4cc;
}

.campaign-generator .tagline {
  margin: 40px auto 0;
  color: #987f40;
  max-width: 540px;
}

.line-1-link {
  display: table;
  margin: 10px auto 0;
  color: #67c0b8;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12px;
  position: relative;
  border-bottom: solid 1px transparent;
  transition: border-color 0.35s ease-in;
}

.line-1-link:hover {
  border-color: #8ed4cc;
}

.campaign-ideas {
  overflow: hidden;
  margin: 30px auto;
  max-width: 430px;
}

@media only screen and (min-width: 64.063em) {
  .campaign-ideas {
    margin: 85px auto;
  }
}

@media only screen and (min-width: 64.063em) {
  .campaign-ideas {
    max-width: 1280px;
  }
}

.random-idea {
  overflow: hidden;
  list-style: none;
  padding: 0 20px;
  display: inline-block;
  font-family: "osp-dindin", serif;
  text-transform: uppercase;
  border-bottom: solid 3px;
  height: 42px;
}

@media only screen and (min-width: 40.063em) {
  .random-idea {
    height: 62px;
  }
}

@media only screen and (min-width: 64.063em) {
  .random-idea {
    width: 30%;
    float: left;
    margin: 0 1.5%;
    height: 45px;
  }
}

@media only screen and (min-width: 90.063em) {
  .random-idea {
    height: 62px;
  }
}

.random-idea li {
  font-size: 32px;
  height: 42px;
  line-height: normal;
  overflow: hidden;
}

@media only screen and (min-width: 40.063em) {
  .random-idea li {
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
  }
}

@media only screen and (min-width: 40.063em) {
  .random-idea li {
    font-size: 52px;
    height: 62px;
  }
}

@media only screen and (min-width: 64.063em) {
  .random-idea li {
    font-size: 35px;
    height: 45px;
  }
}

@media only screen and (min-width: 90.063em) {
  .random-idea li {
    font-size: 52px;
    height: 62px;
  }
}

.idea-1 {
  color: #67c0b8;
}

.idea-2 {
  color: #f15f65;
}

.idea-3 {
  color: #593780;
}

.click-too-much {
  padding: 50px;
  max-width: 540px;
  margin: auto;
}

.click-too-much .button {
  background: #593780;
  margin-top: 20px;
  font-size: 12px;
}

@media only screen and (min-width: 40.063em) {
  .click-too-much .button {
    font-size: 16px;
  }
}

.click-too-much .your-idea {
  color: #67c0b8;
}

.spin-button {
  position: relative;
  padding: 0 75px;
  background: #67c0b8;
}

@media only screen and (min-width: 40.063em) {
  .spin-button {
    padding: 0 75px;
  }
}

.spin-button:active,
.spin-button:focus {
  background: #67c0b8;
}

.spin-button:hover {
  background-color: #47ada3;
}

.spin-button:hover:active {
  background: #67c0b8;
}

.spin-button:hover .spin-shape {
  opacity: 1;
}

.spin-button:hover .single-heart-left {
  transform: translate3d(-16px, -26px, 0);
}

.spin-button:hover .single-diamond-left {
  transform: translate3d(-40px, 2px, 0);
}

.spin-button:hover .single-x-left {
  transform: translate3d(0, -5px, 0);
}

.spin-button:hover .single-circle-1-left {
  transform: translate3d(-14px, -5px, 0);
}

.spin-button:hover .single-circle-2-left {
  transform: translate3d(-7px, 15px, 0);
}

.spin-button:hover .single-circle-3-left {
  transform: translate3d(-1px, 5px, 0);
}

.spin-button:hover .single-x-1-right {
  transform: translate3d(35px, 20px, 0);
}

.spin-button:hover .single-x-2-right {
  transform: translate3d(-5px, 9px, 0);
}

.spin-button:hover .single-diamond-right {
  transform: translate3d(5px, -12px, 0);
}

.spin-button:hover .single-circle-1-right {
  transform: translate3d(17px, -5px, 0);
}

.spin-button:hover .single-circle-2-right {
  transform: translate3d(14px, 14px, 0);
}

.spin-button:hover .single-circle-3-right {
  transform: translate3d(5px, 5px, 0);
}

.spin-button span {
  transition: all 0.35s cubic-bezier(0.77, 0, 0.175, 1);
}

.spin-button .line-2 {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -20%);
  width: 100%;
  opacity: 0;
}

.spin-shape {
  position: absolute;
  opacity: 0;
}

.left-shape {
  left: -30px;
  top: 5%;
}

.right-shape {
  right: -30px;
  top: 5%;
}

.active-button .line-1 {
  display: block;
  transform: translateY(-10px);
  opacity: 0;
}

.active-button .line-2 {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.community-stats {
  text-align: center;
  background: #f7f4ea;
}

@media only screen and (min-width: 40.063em) {
  .community-stats {
    background-image: url("jump-faded.jpg");
    background-position: left center;
    background-size: cover;
  }
}

@media only screen and (min-width: 64.063em) {
  .community-stats {
    background-position: center;
  }
}

.community-stats .osp-header {
  color: #67c0b8;
}

.community-stats .osp-header .accent {
  color: #f15f65;
}

.community-stats .row {
  margin: auto;
}

@media only screen and (min-width: 40.063em) {
  .community-stats .row {
    margin: 60px auto;
  }
}

.community-stats .columns {
  margin-bottom: 40px;
}

@media only screen and (min-width: 40.063em) {
  .community-stats .columns {
    margin-bottom: 0;
  }
}

.community-stats .columns h4 {
  color: #987f40;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  margin-bottom: 0;
}

.community-stats .columns p {
  font-family: "Sentinel SSm A", "Sentinel SSm B", sans-serif;
  font-weight: 300;
  color: #f15f65;
  font-size: 35px;
  margin: auto;
  position: relative;
}

@media only screen and (min-width: 40.063em) {
  .community-stats .columns p {
    font-size: 35px;
  }
}

.community-stats .columns p:after {
  height: 1px;
  left: 0;
  right: 0;
  bottom: 12px;
  width: 170px;
  margin: auto;
  background-color: #987f40;
  position: absolute;
  content: "";
  display: block;
  z-index: 1;
}

.community-stat-description {
  max-width: 560px;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  color: #987f40;
}

@media only screen and (min-width: 64.063em) {
  .community-stat-description {
    max-width: 820px;
  }
}

.community-grid {
  overflow: hidden;
  background: #333232;
}

.community-grid .box {
  float: left;
  display: table;
  background-size: cover;
  position: relative;
  margin-top: -0.39878px;
  width: 50%;
  height: 33.33988vh;
  min-height: 250px;
}

.community-grid .box.hashtag {
  display: none;
}

@media only screen and (min-width: 64.063em) {
  .community-grid .box.hashtag {
    display: block;
  }
}

@media only screen and (min-width: 40.063em) {
  .community-grid .box {
    width: 33.33%;
    min-height: auto;
    height: 0;
    padding: 16.665% 0;
  }

  .community-grid .box:last-child {
    display: none;
  }
}

@media only screen and (min-width: 64.063em) {
  .community-grid .box {
    width: 20%;
    padding: 10% 0;
  }

  .community-grid .box:last-child {
    display: block;
  }
}

.community-grid .hashtag {
  text-align: center;
}

.community-grid .hashtag:hover .ht-hover-state {
  transform: scale3d(1, 1, 1);
}

.community-grid .hashtag p {
  font-size: 60px;
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 0;
  font-family: "osp-dindin", serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.community-grid .hashtag-1 {
  background: #593780;
}

.community-grid .hashtag-2 {
  background: #67c0b8;
}

.community-grid .hashtag-3 {
  background: #F8C626;
}

.community-grid .hashtag-4 {
  background: #150F33;
}

.community-grid .hashtag-4 p {
  color: #67c0b8;
}

.community-grid .hashtag-5 {
  background: #f15f65;
}

.community-grid .hashtag-5 .cw-icon-drop {
  color: #f7f4ea;
}

.community-grid .campaign {
  position: relative;
}

.community-grid .campaign:hover a,
.touch .community-grid .campaign a {
  opacity: 1;
}

.community-grid .campaign .campaigner-link-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 20px;
}

.community-grid .campaign a {
  background: rgba(0, 0, 0, 0.7);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: opacity 0.35s ease-in;
}

.touch .community-grid .campaign a {
  background: rgba(0, 0, 0, 0.7);
}

@media only screen and (min-width: 64.063em) {
  .community-grid .campaign a {
    position: absolute;
    opacity: 0;
  }
}

.community-grid .campaign h3 {
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  position: relative;
}

.community-grid .campaign h3:after {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: #fff;
  margin: 10px auto;
}

.community-grid .campaign p {
  color: #fff;
  font-size: 13px;
}

.touch .community-grid .campaign p {
  color: #fff;
}

.community-grid .campaign .button {
  background-color: transparent;
  color: #987f40;
  border: solid 1px;
  height: 38px;
  line-height: 36px;
  font-size: 12px;
}

.touch .community-grid .campaign .button {
  color: #fff;
}

.ht-hover-state {
  display: table;
  width: 100%;
  padding: 15px;
  transform: scale3d(0, 0, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  position: absolute;
}

.touch .ht-hover-state {
  transform: scale3d(1, 1, 1);
}

.ht-hover-state svg {
  width: 100%;
}

.campaigner-section-intro {
  position: relative;
  background: #593780;
  color: #fff;
  text-align: center;
  padding: 60px 20px 0;
}

@media only screen and (min-width: 40.063em) {
  .campaigner-section-intro {
    padding-top: 120px;
  }
}

@media only screen and (min-width: 64.063em) {
  .campaigner-section-intro {
    padding-bottom: 60px;
  }
}

.campaigner-section-intro .osp-header .accent {
  color: #F8C626;
}

.campaigner-section-intro p {
  margin: 0 auto;
  padding: 0;
  max-width: 570px;
}

@media only screen and (min-width: 64.063em) {
  .campaigner-section-intro p {
    max-width: 760px;
  }
}

.campaigner-slides {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

@media only screen and (min-width: 64.063em) {
  .campaigner-slides {
    text-align: left;
  }
}

.campaigner-slide {
  width: 100%;
  padding: 60px 20px;
  margin: 0;
  display: table;
  position: relative;
}

.campaigner-slide .preview-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.campaigner-slide .mobile-fallback-image {
  display: none;
}

.campaigner-slide .desktop-fallback-image {
  display: block;
}

.touch .campaigner-slide {
  padding: 75px 20px 60px;
}

.touch .campaigner-slide .desktop-fallback-image {
  display: none;
}

.touch .campaigner-slide .mobile-fallback-image {
  display: block;
}

@media only screen and (min-width: 64.063em) {
  .touch .campaigner-slide {
    padding-top: 110px;
  }
}

@media only screen and (min-width: 40.063em) {
  .campaigner-slide {
    height: auto;
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

.campaigner-slide video {
  width: 100%;
  height: 100%;
  transition: none;
}

.campaigner-slide h4 {
  font-size: 35px;
  line-height: 35px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

@media only screen and (min-width: 40.063em) {
  .campaigner-slide h4 {
    font-size: 45px;
    line-height: 50px;
  }
}

@media only screen and (min-width: 64.063em) {
  .campaigner-slide h4 {
    margin-left: 0;
    margin-bottom: 10px;
  }
}

.campaigner-slide a {
  letter-spacing: 1px;
  font-size: 12px;
  text-transform: uppercase;
  display: table;
  margin: auto;
  line-height: 1;
}

@media only screen and (min-width: 64.063em) {
  .campaigner-slide a {
    margin-left: 0;
  }

  .touch .campaigner-slide a {
    margin-left: auto;
  }
}

.campaigner-slide p {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (min-width: 64.063em) {
  .campaigner-slide p {
    margin-left: 0;
  }
}

.campaigner-slide .slide-wrapper {
  max-width: 980px;
  margin: auto;
  position: relative;
}

@media only screen and (min-width: 64.063em) {
  .campaigner-slide .slide-wrapper {
    padding: 0 0 0 30px;
  }
}

@media only screen and (min-width: 64.063em) {
  .campaigner-slide .video-content-wrapper {
    width: 70%;
  }

  .touch .campaigner-slide .video-content-wrapper {
    width: 100%;
  }
}

.campaigner-slide .video-wrapper {
  height: 0;
  padding-bottom: 56.25%;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 2;
}

.campaigner-slide .video-wrapper.loaded .desktop-fallback-image {
  opacity: 0;
}

.touch .campaigner-slide .video-wrapper video {
  display: none;
}

.campaigner-slide .clean-water-photo {
  display: none;
  width: 25%;
  position: absolute;
  z-index: 1;
  right: 0;
  top: 50%;
  margin-top: -50px;
}

@media only screen and (min-width: 64.063em) {
  .campaigner-slide .clean-water-photo {
    display: block;
    bottom: 0;
    top: auto;
    margin-top: 0;
  }

  .touch .campaigner-slide .clean-water-photo {
    display: none;
  }
}

.campaigner-slide .sig {
  display: none;
}

@media only screen and (min-width: 64.063em) {
  .campaigner-slide .sig {
    display: block;
    position: absolute;
    z-index: 2;
    right: 80px;
    bottom: 200px;
    width: 110px;
  }

  .touch .campaigner-slide .sig {
    display: none;
  }
}

.slide-inner {
  display: table-cell;
  vertical-align: middle;
}

.slide-1 {
  background: #593780;
  color: #fff;
}

.slide-1 p {
  max-width: 550px;
}

@media only screen and (min-width: 64.063em) {
  .slide-1 .clean-water-photo {
    width: 35%;
    margin-top: 0;
    bottom: -60px;
    right: 40px;
  }
}

@media only screen and (min-width: 40.063em) {
  .slide-1 h4 {
    max-width: 595px;
  }
}

@media only screen and (min-width: 64.063em) {
  .slide-1 {
    padding-top: 0;
    padding-bottom: 190px;
  }
}

.slide-1 a {
  color: #67c0b8;
}

.slide-1 a:hover {
  color: #8bcfc9;
}

.slide-2 {
  background: #f7f4ea;
  color: #333232;
}

.touch .slide-2 {
  background: #593780;
  color: #fff;
}

.slide-2 .fixed-shape {
  animation: bounceFloatRotate 1s linear alternate-reverse infinite;
}

@media only screen and (min-width: 40.063em) {
  .slide-2 h4 {
    max-width: 580px;
  }
}

@media only screen and (min-width: 64.063em) {

  .slide-2 p,
  .slide-2 a {
    margin-left: 46%;
    max-width: none;
  }

  .slide-2 h4 {
    margin-left: auto;
    margin-right: -30px;
  }
}

@media only screen and (min-width: 64.063em) {
  .slide-2 .video-content-wrapper {
    margin-left: auto;
  }
}

@media only screen and (min-width: 64.063em) {
  .slide-2 .clean-water-photo {
    width: 37%;
    right: auto;
    left: 40px;
    bottom: -35px;
  }
}

@media only screen and (min-width: 64.063em) {
  .slide-2 .sig {
    right: auto;
    left: 140px;
    bottom: 230px;
  }
}

.slide-2 a {
  color: #593780;
}

.touch .slide-2 a {
  color: #fff;
}

.slide-2 a:hover {
  color: #7246a4;
}

@media only screen and (min-width: 64.063em) {
  .slide-2 .slide-wrapper {
    padding: 0 30px 0 0;
  }
}

.slide-3 {
  background: #8ed4cc;
  color: #fff;
}

.touch .slide-3 {
  background: #593780;
}

@media only screen and (min-width: 64.063em) {
  .slide-3 {
    padding-bottom: 200px;
  }
}

@media only screen and (min-width: 64.063em) {
  .slide-3 .clean-water-photo {
    width: 30%;
    right: 70px;
    margin-top: 30px;
    bottom: -70px;
  }
}

.slide-3 h4 {
  max-width: 680px;
}

.slide-3 p {
  max-width: 550px;
}

.slide-3 a {
  color: #593780;
}

.touch .slide-3 a {
  color: #fff;
}

.slide-3 a:hover {
  color: #7246a4;
}

.slide-3 .clean-water-photo {
  margin-top: -80px;
}

@media only screen and (min-width: 64.063em) {
  .slide-3 .clean-water-photo {
    margin-top: -20px;
  }
}

@media only screen and (min-width: 64.063em) {
  .slide-3 .clean-water-photo {
    margin-top: 0;
  }
}

.touch .campaigner-story-slideshow {
  height: auto;
  position: relative;
  overflow: hidden;
}

.touch .campaigner-story-slideshow .dots {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 1;
}

.touch .campaigner-story-slideshow .dots.top {
  top: 20px;
}

.touch .campaigner-story-slideshow .dot-item {
  background: transparent;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  padding: 0;
  margin: 0 5px;
}

.touch .campaigner-story-slideshow .dot-item.active {
  background: rgba(255, 255, 255, 0.85);
}

.touch .campaigner-story-slideshow .fixed-shape {
  display: none;
}

.touch .campaigner-story-slideshow .campaigner-slides {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: table;
  width: 100%;
  height: 100%;
}

.touch .campaigner-story-slideshow .campaigner-slide {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  position: static;
  height: auto;
}

.touch .campaigner-story-slideshow .campaigner-slide h4,
.touch .campaigner-story-slideshow .campaigner-slide p {
  margin-left: auto;
  margin-right: auto;
}

.touch .campaigner-story-slideshow .campaigner-slide a {
  color: #67c0b8;
}

.touch .campaigner-story-slideshow .campaigner-slide .button {
  margin-left: auto;
  margin-right: auto;
}

.touch .campaigner-story-slideshow .slide-inner {
  width: 100vw;
}

.touch .campaigner-story-slideshow .slide-wrapper {
  max-width: 500px;
}

@media only screen and (min-width: 64.063em) {
  .touch .campaigner-story-slideshow .slide-wrapper {
    max-width: 980px;
  }
}

.touch .campaigner-story-slideshow .slide-1 p,
.touch .campaigner-story-slideshow .slide-2 p {
  max-width: 700px;
}

.touch .campaigner-story-slideshow .slide-3 p {
  max-width: 430px;
}

.general-stats {
  text-align: center;
  color: #f7f4ea;
  background: #593780;
  padding: 120px 20px;
  position: relative;
}

.general-stats .columns:nth-child(2) p {
  max-width: 200px;
}

.general-stats h4 {
  font-size: 40px;
  margin-bottom: 0;
  font-family: "Sentinel SSm A", "Sentinel SSm B", sans-serif;
  font-weight: 300;
}

.general-stats p {
  margin: 0 auto;
  max-width: 230px;
}

@media only screen and (min-width: 40.063em) {
  .general-stats p {
    max-width: 250px;
    font-size: 15px;
  }
}

@media only screen and (min-width: 64.063em) {
  .general-stats p {
    font-size: 18px;
  }
}

.general-stats .columns {
  margin-top: 50px;
}

.general-stats .columns:first-child {
  margin-top: 0;
}

@media only screen and (min-width: 40.063em) {
  .general-stats .columns {
    margin-top: 0;
    padding: 0 10px;
  }
}

.touch .general-stats {
  background: #67c0b8;
}

.you-can {
  text-align: center;
  background-color: #f7f4ea;
}

@media only screen and (min-width: 40.063em) {
  .you-can {
    background-image: url("mission.jpg");
    background-position: center;
    background-size: cover;
  }
}

.you-can .osp-header {
  color: #67c0b8;
  text-align: center;
  margin-bottom: 40px;
}

.you-can .osp-header .accent {
  color: #f15f65;
}

.you-can .bottom-title {
  color: #f15f65;
  margin-bottom: 20px;
  position: relative;
  display: table;
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
}

@media only screen and (min-width: 64.063em) {
  .you-can .bottom-title {
    max-width: 590px;
  }
}

.thing-wrapper {
  display: table;
  margin: auto;
}

@media only screen and (min-width: 40.063em) {
  .thing-wrapper {
    position: relative;
    left: 47px;
  }
}

.craziest-things {
  text-align: left;
  display: table;
  margin: 0 auto 60px;
}

.craziest-things p {
  font-size: 20px;
  color: #888;
  text-align: center;
  margin: 20px auto;
  display: table;
}

.craziest-things p:first-child {
  margin-top: 0;
}

.craziest-things p:last-child {
  margin-bottom: 0;
}

@media only screen and (min-width: 40.063em) {
  .craziest-things p {
    font-size: 25px;
    text-align: left;
    margin-top: 0;
    margin-left: 0;
  }
}

.craziest-things .thing {
  color: #f15f65;
  font-weight: 700;
  line-height: 18px;
  text-transform: uppercase;
  display: table;
  margin: auto;
  position: relative;
}

.craziest-things .thing:after {
  content: '';
  display: block;
  height: 1px;
  background: #888;
  left: 0;
  right: 0;
  bottom: 2px;
  position: absolute;
  z-index: 1;
}

@media only screen and (min-width: 40.063em) {
  .craziest-things .thing {
    display: inline-block;
  }
}

.craziest-things .thing-label {
  position: relative;
  z-index: 2;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0.5s;
}

.show-things .craziest-things p .thing-label {
  opacity: 1;
}

.show-things .craziest-things p:nth-child(1) .thing-label {
  transition-delay: 0.1s;
}

.show-things .craziest-things p:nth-child(2) .thing-label {
  transition-delay: 0.2s;
}

.show-things .craziest-things p:nth-child(3) .thing-label {
  transition-delay: 0.3s;
}

.show-things .craziest-things p:nth-child(4) .thing-label {
  transition-delay: 0.4s;
}

.show-things .craziest-things p:nth-child(5) .thing-label {
  transition-delay: 0.5s;
}

.show-things .craziest-things p:nth-child(6) .thing-label {
  transition-delay: 0.6s;
}

.show-things .craziest-things p:nth-child(7) .thing-label {
  transition-delay: 0.7s;
}

.show-things .craziest-things p:nth-child(8) .thing-label {
  transition-delay: 0.8s;
}

.thanks {
  background-color: #F8C626;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
}

@media only screen and (min-width: 40.063em) {
  .thanks {
    min-height: 500px;
  }
}

.thanks .progress-numbers {
  color: #fff;
}

.thanks .big-thanks {
  font-size: 19px;
}

.thanks .big-thanks:after {
  content: "\e00f";
  display: block;
  font-family: 'cw-icons';
  font-size: 25px;
  margin-top: 15px;
}

@media only screen and (min-width: 64.063em) {
  .thanks .big-thanks:after {
    display: none;
  }
}

.thanks h3 {
  color: #593780;
  position: relative;
}

.thanks h3:before {
  content: "";
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  background-image: url("sep-stamp.png");
  width: 102px;
  height: 102px;
  background-size: 100% auto;
  z-index: 2;
}

@media only screen and (min-width: 40.063em) {
  .thanks h3:before {
    display: block;
    margin: -80px 0 0 130px;
  }
}

@media only screen and (min-width: 64.063em) {
  .thanks h3:before {
    margin: -90px 0 0 180px;
  }
}

.thanks a {
  color: #957717;
  font-size: inherit;
}

.thanks a:hover {
  color: #c19a1e;
}

.thanks ul {
  color: #957717;
  list-style: none;
  padding: 0;
  max-width: 830px;
}

.thanks ul.big-thanks {
  margin: 30px auto 0;
}

.thanks ul.just-thanks {
  margin: 10px auto 0;
}

@media only screen and (min-width: 64.063em) {
  .thanks ul.just-thanks {
    margin: 0 auto;
  }
}

.thanks li {
  display: block;
  padding: 7px 10px;
  position: relative;
  display: inline-block;
}

@media only screen and (min-width: 40.063em) {
  .thanks li:after {
    content: "\2022";
    display: block;
    position: absolute;
    font-family: "cw-icons";
    font-size: 12px;
    right: -4px;
    top: 4px;
    opacity: 0.35;
  }
}

.thanks li:last-child:after {
  display: none;
}