*{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-family:inherit;vertical-align:baseline;font-size:1em;font-style:normal;-webkit-font-smoothing:antialiased;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent;-moz-tap-highlight-color:transparent;-o-tap-highlight-color:transparent;}
*, *:before, *:after {
	padding: 0; margin: 0;
  box-sizing: border-box;
  outline: none;
}

.js-particles { z-index: 10; }
.app,
.header { z-index: 20; }

@font-face{font-family:"OCR A";src:url("OCRAEXT.ttf"); }
*, body{font-family:"OCR A", serif;}

body, html {
	min-height: 100%;
}

html {
	
//	border: 1px solid green;
}
body {
	
  background: #03EA60;
  font: 14px/1 'Open Sans', helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  
//  border: 1px solid red;
}


.app,
.header,
.buttons {
	left: 0; right: 0;
	margin: 0 auto;
}
.header {
	width: 100%; height: 5%;
	position: absolute; bottom: 0;
	text-align: center;
	
//	border: 1px solid yellow;
}
.header-logo {
	height: 100%;
	padding-bottom: .5em;
}
.header-logo-img,
.header-logo-div {
	display: inline-block;
	vertical-align: middle;
}
.header-logo-div {
	text-align: left;
}
.header-logo-img {
	width: auto; height: 100%;
}

.app {
	width: 95%; max-width: 280px; height: 90%;
	position: absolute; top: 2.5%; left: 2.5%;
//  transform: translate(-50%, -50%);
//  transform: translateX(100%);

//  background: #1e384c;
//  background: #03EA60;
//  background: #f0f6fc;
	background-color: rgba(255, 255, 255, .5);
  border-radius: .5em;
  overflow: hidden;
  
	border-width: 0 .5em .5em .5em; border-style: solid;
	border-color: white;
}

#buttonTimer,
#buttonTimer:before {
	display: none !important;
}

.app_animated #button100:active:before,
.app_animated #button100:focus:before,
.app_animated #button50:active:before,
.app_animated #button50:focus:before,
.app_animated #button25:active:before,
.app_animated #button25:focus:before {
		background-color: white;
        -webkit-animation: button-shadow .25s;
                animation: button-shadow .25s;
      }

.app_animated .bubble_1 {
        -webkit-animation: bubble-1 .75s linear -.3s;
                animation: bubble-1 .75s linear -.3s;
      }

.app_animated .bubble_2 {
        -webkit-animation: bubble-2 .75s linear;
                animation: bubble-2 .75s linear;
      }

.app_animated .bubble_3 {
        -webkit-animation: bubble-3 .75s linear;
                animation: bubble-3 .75s linear;
      }

.buttons {
	position: absolute; bottom: 0;
	z-index: 15;
	display: flex;
	width: 100%; max-width: 30em;
}
.button {
	/*
		CSS POSITION RELATIVE IS AFFECTING THE SCRIPT!!!!!!
	*/
	position: relative;
	z-index: 100;
	flex: 1;
	margin-bottom: 1em;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 1.5rem;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.2rem;
  padding: .7rem 0;
  background: none;
  font-weight: 600;
  cursor: pointer;
}
.button:nth-child(1) { margin-left: 1em; }
.button:nth-child(2) { margin-left: .75em; margin-right: .75em; }
.button:nth-child(3) { margin-right: 1em; }

#button100:before,
#button50:before,
#button25:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    border: inherit;
    border-radius: inherit;
  }

.percent {
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  font-weight: lighter;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.percent__inner {
    display: inline-block;
  }

.percent__num {
    display: inline-block;
    font-size: 6rem;
  }

.percent__sign {
    display: inline-block;
    font-size: 4rem;
  }

.water {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 5;
  bottom: 0;
  left: 0;
  background: #32bafa;
  transform: translate(0, 50%);
}

.water__inner {
    position: absolute;
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;
    overflow: hidden;
  }

.water__wave {
    width: 200%;
    position: absolute;
    bottom: 100%;
  }

.water__wave_back {
      right: 0;
      fill: #2c7fbe;
      -webkit-animation: wave-back 1.4s infinite linear;
              animation: wave-back 1.4s infinite linear;
    }

.water__wave_front {
      left: 0;
      fill: #32bafa;
      margin-bottom: -1px;
      -webkit-animation: wave-front .7s infinite linear;
              animation: wave-front .7s infinite linear;
    }

.bubble {
  position: absolute;
  bottom: 80px;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  background: #fff;
  border-radius: 50%;
  transform: scale(0) translate(0, 0);
  opacity: 0;
}

.bubble_2 {
    margin-left: -20px;
  }

@-webkit-keyframes wave-front {
  100% {
    transform: translate(-50%, 0);
  }
}

@keyframes wave-front {
  100% {
    transform: translate(-50%, 0);
  }
}

@-webkit-keyframes wave-back {
  100% {
    transform: translate(50%, 0);
  }
}

@keyframes wave-back {
  100% {
    transform: translate(50%, 0);
  }
}

@-webkit-keyframes button-shadow {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

@keyframes button-shadow {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

@-webkit-keyframes bubble-1 {
  0% {
    opacity: 1;
    transform: scale(0) translate(0, 0);
  }
  25% {
    transform: scale(.25) translate(20px, -25px);
  }
  50% {
    transform: scale(.5) translate(40px, -50px);
  }
  75% {
    transform: scale(.75) translate(20px, -75px);
  }
  100% {
    transform: scale(1) translate(10px, -100px);
  }
}

@keyframes bubble-1 {
  0% {
    opacity: 1;
    transform: scale(0) translate(0, 0);
  }
  25% {
    transform: scale(.25) translate(20px, -25px);
  }
  50% {
    transform: scale(.5) translate(40px, -50px);
  }
  75% {
    transform: scale(.75) translate(20px, -75px);
  }
  100% {
    transform: scale(1) translate(10px, -100px);
  }
}

.tracker {
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  color: #fff;
  text-align: center;
  height: 74px;
  overflow: hidden;
  z-index: 20;
}

.tracker__inner {
    transition: transform .2s ease-in-out;
  }

.tracker__item {
    transition: opacity .2s ease-in-out;
    font-size: 1.1rem;
    padding-bottom: 10px;
    opacity: .7;
  }

.tracker__item_active {
      opacity: 1;
    }

@-webkit-keyframes bubble-2 {
  0% {
    opacity: 1;
    transform: scale(0) translate(-20px, -10px);
  }
  25% {
    transform: scale(.25) translate(-40px, -45px);
  }
  50% {
    transform: scale(.5) translate(-60px, -70px);
  }
  75% {
    transform: scale(.75) translate(-40px, -95px);
  }
  100% {
    transform: scale(1) translate(-30px, -100px);
  }
}

@keyframes bubble-2 {
  0% {
    opacity: 1;
    transform: scale(0) translate(-20px, -10px);
  }
  25% {
    transform: scale(.25) translate(-40px, -45px);
  }
  50% {
    transform: scale(.5) translate(-60px, -70px);
  }
  75% {
    transform: scale(.75) translate(-40px, -95px);
  }
  100% {
    transform: scale(1) translate(-30px, -100px);
  }
}

@-webkit-keyframes bubble-3 {
  0% {
    opacity: 1;
    transform: scale(0) translate(0, 0);
  }
  25% {
    transform: scale(.25) translate(0, -20px);
  }
  50% {
    transform: scale(.5) translate(-10px, -40px);
  }
  75% {
    transform: scale(.75) translate(10px, -60px);
  }
  100% {
    transform: scale(1) translate(0, -100px);
  }
}

@keyframes bubble-3 {
  0% {
    opacity: 1;
    transform: scale(0) translate(0, 0);
  }
  25% {
    transform: scale(.25) translate(0, -20px);
  }
  50% {
    transform: scale(.5) translate(-10px, -40px);
  }
  75% {
    transform: scale(.75) translate(10px, -60px);
  }
  100% {
    transform: scale(1) translate(0, -100px);
  }
}

@media screen and (max-width:50em){}

.js-particles {
	width: 100%; height: 100%;
	position: fixed; top: 0; left: 0;
}