body {
  font:14px/16px Roboto Artal, sans-serif;
  color:#555;
}

h1 {
  margin:12px 0 20px;
  font-size:20px;
  text-align:center;
}

@keyframes nr_pump {
  from {left:0;}
  to{left:160px;}
}
@keyframes nr_strike {
  from {width:0;}
  to{width:200px;}
}

.cf:before, .cf:after {
  content: "";
  display:table;
}
.cf:after {clear:both;}
.cf {zoom:1;}

.sml {
  font-size:11px;
}

a, a:link, a:visited, a:active, a:hover {
  background:transparent;
  text-decoration:none;
  outline:none;
  cursor:pointer;
}
a:link {
  color:#40916b;
  outline:none;
}
a:visited {
  color:#40916b;
  outline:none;
}
a:hover, a:active {
  color:#40916b;
  outline:none;
}
a:hover {
  color:#306f51;
  outline:none;
}

p {
  margin:12px 0;
  width:100%;
}
p.cent {
  text-align:center;
}
p.fright {
  float:right;
  text-align:right;
}

.w50 {
  width:50%;
}

section {
  margin:40px auto;
  max-width:900px;
}

#main {
  margin:12px auto 80px;
  width:100%;
}

.syringe {
  position:relative;
  height: 60px;
  margin: 80px auto;
  width: 540px;
}
.syringe .piston-whole {
  position:absolute;
  left:0;
  top:11px;
  width:196px;
  height:36px;
  animation:nr_pump 3.5s linear 0.5s 1 normal forwards;
}
.syringe .piston {
  position:absolute;
  left:184px;
  top:1px;
  width:10px;
  height:32px;
  border:1px solid #000;
}
.syringe .flange {
  position:absolute;
  left:0;
  top:-6px;
  width:2px;
  height:46px;
  border:1px solid #000;
}
.syringe .plunger {
  position:absolute;
  left:3px;
  top:13px;
  width:180px;
  height:8px;
  background:#d7d7d7;
  border:1px solid #000;
}
.syringe .barrel {
  position:absolute;
  left:183px;
  top:10px;
  width:180px;
  height:36px;
  border-style:solid;
  border-color:#000 #000 #000 #d7d7d7;
  border-width:1px 1px 1px 1px;
}
.syringe .adapter {
  position:absolute;
  left:364px;
  top:24px;
  width:24px;
  height:8px;
  border:1px solid #000;
  border-radius:0 5px 5px 0;
}
.syringe .needle {
  position:absolute;
  left:388px;
  top:28px;
  width:140px;
  height:0;
  border:1px solid #000;
}
.syringe .strike-left {
  position:absolute;
  left:200px;
  top:-44px;
  height:3px;
  width:0;
  /*border:1px solid #c00;*/
  background:#c00;
  transform:rotate(45deg);
  transform-origin:left;
  animation:nr_strike 1s linear 1s 1 normal forwards;
}
.syringe .strike-right {
  position:absolute;
  right:196px;
  top:-44px;
  height:3px;
  width:0;
  /*border:1px solid #c00;*/
  background:#c00;
  transform:rotate(-45deg);
  transform-origin:right;
  animation:nr_strike 1s linear 2s 1 normal forwards;
}
.syringe ~ p {
  text-align:center;
}