/* Name: Schnell HTML: 5a2accccbb127 */
/* Date: 2017-12-08 18:33:00 */
/* Author: Murks & Mumpitz */
/* Tags: */
/* Description: asdas */
/* --- --- --- --- --- --- --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body,
html {
  background-color: grey;
  height: 100%; }

.container {
  margin: absolute;
  width: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }
  .container:after {
    content: "";
    display: table;
    clear: both; }

.augenbereich {
  position: relative;
  width: 120px;
  height: 120px;
  float: left;
  background-color: grey; }

.lid {
  position: absolute;
  overflow: hidden;
  top: 0;
  border-radius: 50%;
  width: calc(100% - 20px);
  height: calc(100% - 20px); }
  .lid--rechts {
    right: 0; }
  .lid--links {
    left: 0; }

.lid-oben {
  bottom: calc(100% * 2);
  position: relative;
  overflow: hidden;
  height: calc(100% * 2);
  width: calc(100% * 2);
  left: calc(-1 * 100%/4 * 2);
  border-radius: calc(100% * 2);
  background-color: grey;
  border-bottom: 5px solid black; }
  .lid-oben--blink {
    animation: blink-oben 3s ease-out 3s infinite; }

.lid-unten {
  bottom: calc(40% * -1);
  position: absolute;
  overflow: hidden;
  border-top: 5px solid black;
  width: 100%;
  height: 40%;
  background-color: grey; }
  .lid-unten--blink {
    animation: blink-unten 3s ease-in 3s infinite; }

.auge {
  position: relative;
  overflow: hidden;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  border-radius: 50%;
  background-color: white; }
  .auge__pupille {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background-color: black;
    transition: left linear 0.3s, top linear 0.5s; }

@keyframes blink-oben {
  0% {
    bottom: 200px; }
  11% {
    bottom: 40px; }
  33% {
    bottom: 200px; }
  100% {
    bottom: 200px; } }

@keyframes blink-unten {
  0% {
    bottom: -40px; }
  11% {
    bottom: 0; }
  33% {
    bottom: -40px; }
  100% {
    bottom: -40px; } }
