@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Material+Icons);

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

* {
  font-family: Roboto, Helvetica, Arial, sans-serif;
}

.loading
{
  position: absolute;
  top: 50%;
  left: 50%;
}

.cover
{
  position: absolute;
  top: 0px;
  left: 50%;
  width: 76px;
  margin-left: -38px;
  height: 64px;
}
.logo
{
  position: absolute;
  top: 0;
  left: 50%;
  height: 64px;
  margin-left: -24px;
  animation: logo 3s ease-in-out normal infinite;
}
@keyframes logo {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-360deg); }
  100% { transform: rotate(0deg); }
}
.landscape
{
  position: absolute;
  top: 40px;
  margin-left: -17px;
}
.portrait
{
  position: absolute;
  top: 29px;
  margin-left: -12px;
}
.p1
{
  transform: rotate(180deg);
  _animation: p1 3s linear normal infinite;
}
@keyframes p1
{
  0% { top: 29px; opacity: 1.0; }
  20% { top: 29px; }
  30% { top: 65px; }
  50% { top: 65px;opacity: 1.0; }
  60% { top: 65px;opacity: 0; }
  100% { top: 65px;opacity: 0; }
}
.p2
{
  transform: rotate(180deg);
  _animation: p2 3s linear normal infinite;
}
@keyframes p2
{
  0% { top: 65px; opacity: 1.0; }
  10% { top: 65px; opacity: 0.0; }
  50% { top: 39px; opacity: 0.0; }
  70% { top: 39px; opacity: 1.0; }
  80% { top: 65px; }
  100% { top: 65px; }
}