a{color:cyan;}

.tc{ text-align:center;};
.tr{ text-align:right; };
.tl{ text-align:left;  };

.w50{  width: 50%; };
.w100{ width: 100%; };

audio::-webkit-media-controls,video::-webkit-media-controls{
  background-color: black;
}

.yokohako {
  overflow: hidden;
}

.yokotext {
  /* animation properties */
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);

  -moz-animation: my-animation 15s linear infinite;
  -webkit-animation: my-animation 15s linear infinite;
  animation: my-animation 15s linear infinite;
}

/* for Firefox */
@-moz-keyframes my-animation {
  from { -moz-transform: translateX(100%); }
  to   { -moz-transform: translateX(-100%);}
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from { -webkit-transform: translateX(100%); }
  to   { -webkit-transform: translateX(-100%);}
}

@keyframes my-animation {
  from {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

/************************************************/
img{
image-rendering: pixelated;
}
@keyframes imageloading {
  0%  { clip: rect(0, 400px, 0, 0); }
  10% { clip: rect(0, 400px, 20px, 0); }
  20% { clip: rect(0, 400px, 40px, 0); }
  30% { clip: rect(0, 400px, 100px, 0); }
  40% { clip: rect(0, 400px, 140px, 0); }
  50% { clip: rect(0, 400px, 200px, 0); }
  60% { clip: rect(0, 400px, 240px, 0); }
  70% { clip: rect(0, 400px, 250px, 0); }
  80% { clip: rect(0, 400px, 270px, 0); }
  90% { clip: rect(0, 400px, 300px, 0); }
  100% { clip: rect(0, 400px, 400px, 0); }

}
.imageloader{
  position: fixed;
  overflow: auto;
  padding: 2em;
  transform: translateX(-50%);
  animation: imageloading 4s;
  image-rendering: pixelated;
  transition: all 1s ease-out;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
}