@font-face {
  font-family: aldo-apache;
  src: local('☺'),
       url('fonts/AldotheApache.woff') format('woff');
}

Body {
  color: #0089D0;
  text-align: center;
  font-family: 'aldo-apache';
  font-weight: 100;
  background-image: url("");
}

.faded {
  position: absolute;
  height: 250px;
  width: 100%;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: -1;
  background: -webkit-linear-gradient( rgba(255,255,255,1), rgba(255,255,255,0) ); /*Safari 5.1-6*/
  background: -o-linear-gradient( rgba(255,255,255,1), rgba(255,255,255,0) ); /*Opera 11.1-12*/
  background: -moz-linear-gradient( rgba(255,255,255,1), rgba(255,255,255,0) ); /*FF 3.6-15*/
  background: linear-gradient( rgba(255,255,255,1), rgba(255,255,255,0) ); /*Standard*/
}

.header {
  padding-top: 8px;
}

.mainicon {
  width: 480px;
  height: auto;
}

.mainlogo {
  width: 480px;
  height: auto;
}

.title {
  font-size: 300%;
  padding-top: 16px;
}

.subtitle {
  display: inline-block;
  font-size: 350%;
}

.box {
  display: inline-block;
  vertical-align: middle;
  background-color: #0089D0;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  animation-duration: .6s;
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

@keyframes blink {
    0% { opacity: 1; }
    70% { opacity: 1; }
    71% { opacity: 0; }
    100% { opacity: 0; }
}