@font-face {
  font-family: '__Clan OT_5';
  src: url(fonts/clanot-book.eot);
  src: local('☺'), url(fonts/clanot-book.woff) format('woff'), url(fonts/clanot-book.svg) format('svg');
  font-weight: 500;
  font-style: normal
  font-display: swap;
}
@font-face {
  font-family: '__Clan OT_5';
  src: url(fonts/clanot-book.eot);
  src: local('☺'), url(fonts/clanot-medium.woff) format('woff'), url(fonts/clanot-medium.svg) format('svg');
  font-weight: 700;
  font-style: bold
  font-display: swap;
}
@keyframes brita-purity-fade{
  0% {
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
purity-calculator{
  font-family: "__Clan OT_5", Arial, sans-serif;
  opacity:0;
  -webkit-animation: brita-purity-fade .8s .5s 1 forwards ease-in;
  -moz-animation:    brita-purity-fade .8s .5s 1 forwards ease-in;
  -o-animation:      brita-purity-fade .8s .5s 1 forwards ease-in;
  animation:         brita-purity-fade .8s .5s 1 forwards ease-in;
}
/* styling for render while resources are loading */
purity-calculator[unresolved] {
  display: block;
  overflow: visible;
  font-weight:bold;
  font-size:1rem;
  background-color:#eef9ff;
  color:#282d74;
  text-align:center;
}
purity-calculator[unresolved] div{
  transform:translateY(-100%);
  position:relative;
  display:inline-block;
  margin-top:1rem;
  margin-bottom:1rem;
  margin-left:1.5rem;
}
@keyframes brita-purity-pulsate{
  0% {
    transform:scale(0,0);
    opacity:0.5;
  }
  85% {
    transform:scale(1.1,1.1);
    opacity:1;
  }
  100%{
    transform:scale(1.2,1.2);
    opacity:0;
  }
}
purity-calculator[unresolved] div::after{
  opacity:0;
  transform:scale(0,0);
  content:'';
  position:absolute;
  top:-.5rem;
  left:-3rem;
  width:2rem;
  height:2rem;
  border:2px solid #aae1ff;
  border-radius:50%;
  -webkit-animation: brita-purity-pulsate 1.5s .3s infinite ease;
  -moz-animation:    brita-purity-pulsate 1.5s .3s infinite ease;
  -o-animation:      brita-purity-pulsate 1.5s .3s infinite ease;
  animation:         brita-purity-pulsate 1.5s .3s infinite ease;
}