body{
  font-family: "helvetica neue", helvetica, sans-serif;
  font-size: 12px;
  background-color: #E1F1F1;
}

@font-face {
  font-family: "BlurBold";
  src: local("BlurBold"),
  local("Blur Bold"),
  url(BlurBold.otf);
  /*font-weight: bold;*/
}

@font-face {
  font-family: "BlurMedium";
  src: local("BlurMedium"),
  local("Blur Medium"),
  url(BlurMedium.otf);
}

@font-face {
  font-family: "Hero Light";
  src: local("Hero Light"),
  local("HeroLight"),
  url(HeroLight.otf);
}
@font-face {
  font-family: "Hero";
  src: local("Hero"),
  local("Hero"),
  url(Hero.otf);
}

/* ------- index.html ------- */
/* ## VIDEO ## */

#vid {
	clear: both;
  display:block;
  margin: auto;
  position: relative;
  width: 380px;
  height: 285px;
  padding: 0 0 35px 0;
}

#canvas {
  position: relative; 
  display: inline-block;
  width: 380px;
  height: 285px;
}

.center {
  margin: auto;
  position: relative;
}

.clear {
  margin: 0;
}

#canvasOverlay {
  position: absolute; 
  top: 0px; 
  z-index: 100001; 
  display: block;
}

.blur {
  filter: blur(10px);
  -webkit-filter: blur(10px);
  -o-filter: blur(10px); 
  -ms-filter: blur(10px);
  -moz-filter: blur(10px);
  filter: url(blur.xml#blurred);
}

.border{
/*  width: 460px;
  height: 340px;
  border: 42px solid #E1F1F1;
  z-index: 1001;
  right: -30px;
  top: -30px;
  position: absolute;*/
  width: 360px;
  height: 270px;
  border: 37px solid #E1F1F1;
  z-index: 1;
  right: -30px;
  top: -30px;
  position: absolute;
}

#border{
  position: absolute;
}

/* ## BUTTON ## */

button {
  width: 120px;
  display: inline-block;
  height: 50px;
  text-align: center;
  background-color: #2B8A81;
  border: none;
  font-size: 1em;
  float: left;
  margin: 2px;
  color: white;
}

button:hover {
  background-color: #DA755C;
}
button:visited, button:active{
  background-color: #44A39D;
}

.active {
  background-color: #DA755C;
}

#buttonBar{
  width: 385px;
  margin: auto;
  z-index: 10002;
  position: relative;
  right: -9px;

}

/* ## GRAPHS ## */

#graphs {
  position: relative;
  top: -200px;
  z-index: -1;
  /*width: 1300px;*/
  width: 95%;
  margin: auto;
  height: 200px;
}
#confidenceGraph {
  width: 600px;
  height: 160px;
  margin: 20px;
}

.graph {
  float: left;
  margin: 20px;
}

#confidenceGraph {
  float: left;
}

#heartbeat {
  height: 400px;
  width: 400px;
  position: relative;
  top: -400px;
  left: 8%;
  z-index: -1;
}

path {
  stroke: steelblue;
  stroke-width: 2;
  fill: none;
}

#rawDataLabel {
  font-size: 12pt;
  color: steelblue;
  position: relative;
 /* top: -75px;
  float: left;
  right: -20px;*/
  display: none;
  right: 625px;
  top: 175px;
}

.axis {
  shape-rendering: crispEdges;
}

.x.axis .minor {
  stroke-opacity: .5;
}

.x.axis path {
  display: none;
}

/* ------- splash.html ------- */
/* ## SPLASH PAGE ## */

h1 {
  font-family: "BlurBold", "Chango", sans-serif;
  font-weight: normal;
  font-size: 13em;
  color: #8FA1A3;
  letter-spacing: .05em;
}

h2 {
  font-family: "Hero Light", Helvetica, sans-serif;
  font-size: 2.3em;
  color: #0E0C09;
  letter-spacing: .05em;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  background-color: #2B8A81;
  color: #E1F1F1;
}

#container {
  width: 600px;
  margin: 0 auto;
  display:block;

}

#transparentPulse{
  z-index: 10001;

}

#overlay {
  position: absolute;
  top: 150px;
  width: 600px;
  height: 300px;
  z-index: 101;

}

.begin {
  position: relative;
  margin: 0 auto;
  top: 100px;
  width: 150px;
  padding: 20px;
  z-index: 1001;

}

#hidden {
  float: right;
  margin: 0 60px 0 0;
  /*display: none;*/

}

.hide {
  display: none;
}

#arrow {
  margin: 50px 0;
  width: 0;
  height: 0;
  border-top: 200px solid #66A18B;
  border-left: 200px solid transparent;
  /*-webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);*/
  position: relative;
  display: block;
  }

#arrow:after {
  display: block;
  width: 180px;
  height: 180px;
  background: #66A18B;
  position: absolute;
  content: "";
  top: -130px;
  left: -250px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
}

#allowWebcam {
  top: -40px;
  right: 100px;
  position: relative;
  /*display: none;*/
}

#pulse {
  position: relative;
  top: 100px;
}

/* ## SPLASH PAGE GRAPH ## */
#graph {
  width: 600px;
  height: 210px;
  position: relative;
  top: 180px;
  /*top: -260px;*/
  z-index: -1;
  background-color: #DA755C;
}
.waveform {
  fill: none;
  stroke: white;
  stroke-width: 1.5px;
}

/* ## CSS Animations ##
borrowed with love from: http://www.justinaguilar.com/animations/
 */

.pulse {
  animation-name: pulse;
  -webkit-animation-name: pulse;  

  animation-duration: 1.5s; 
  -webkit-animation-duration: 1.5s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.9);
    opacity: 0.7;   
  }
  50% {
    transform: scale(1);
    opacity: 1; 
  } 
  100% {
    transform: scale(0.9);
    opacity: 0.7; 
  }     
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(0.95);
    opacity: 0.7;   
  }
  50% {
    -webkit-transform: scale(1);
    opacity: 1; 
  } 
  100% {
    -webkit-transform: scale(0.95);
    opacity: 0.7; 
  }     
}


/* ## INSTRUCTIONS ## */

#introduction {
  display: none;
  background-color: rgba( 225, 241, 241, 0.75);
  width: 550px;
  height: 400px;
  z-index: 1002;
  position: relative;
  margin: auto;
  top: -150px;
  padding: 25px;
}

h3 {
  font-family: "Hero Light", Helvetica, sans-serif;
  font-size: 2.3em;
  /*color: #0E0C09;*/
  color: #3E3D45;
  line-height: 1.12em;
}

.num {
  font-family: "BlurMedium", "Chango", sans-serif;
  border-radius: 50%;
  padding: 10px 20px 10px 20px;
  background-color: #44A39D;
  text-align: center;
  color: #E1F1F1;
  width: 10px;
  height: 10px;
}

#next, #skip {
  font-family: "Hero", Helvetica, sans-serif;
  font-size: 1.5em;
  color: #3E3D45;
  padding: 10px;
  position: absolute;
  bottom: 0;
}

#next:hover, #skip:hover {
  background-color: #2B8A81;
  color: #E1F1F1;
}

#next {
  left: 525px;
}

.bold {
  font-family: "Hero", Helvetica, sans-serif;
}

.blurFont {
  font-family: "BlurMedium", "Chango", sans-serif;
}