#clock {width: 541px; height: 541px; background: transparent url('grafik-g/ziffernblatt-g.png') 0 0 no-repeat; position: absolute; top: 50%; left: 50%; margin: -271px 0 0 -271px; z-index: 1;box-shadow: 0 0 10px #000; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; border: 2px solid #306e10; animation: fadeout 2s forwards;} @keyframes fadeout {0% {opacity: 0;} 100% {opacity: 1;}}
.mechanics {-webkit-filter: drop-shadow(7px 7px 7px rgba(0, 0, 0, 0.5));}
#sec,#min,#hour,#button {position: absolute;}
#sec {background: url('grafik-g/sekundenzeiger.png') 0 0 no-repeat; width: 35px; height: 290px; left: 253px; top: 31px; -webkit-transform-origin: 18px 240px; -moz-transform-origin: 18px 240px; -ms-transform-origin: 18px 240px;
  -o-transform-origin: 18px 240px; transform-origin: 18px 240px;}
#min {background: url('grafik-g/kleiner-zeiger.png') 0 0 no-repeat; width: 42px; height: 324px; left: 253px; top: 51px; -webkit-transform-origin: 17px 220px; -moz-transform-origin: 17px 220px; -ms-transform-origin: 17px 220px;
  -o-transform-origin: 17px 220px; transform-origin: 17px 220px;}
#hour {background: url('grafik-g/grosser-zeiger.png') 0 0 no-repeat; width: 50px; height: 200px; left: 246px; top: 104px; -webkit-transform-origin: 25px 167px; -moz-transform-origin: 25px 167px; -ms-transform-origin: 25px 167px;
  -o-transform-origin: 25px 167px; transform-origin: 25px 167px;}
#button {background: url('grafik-g/button.png') 0 0 no-repeat; width: 40px; height: 39px; left: 251px; top: 251px; -webkit-transform-origin: 20px 20px; -moz-transform-origin: 20px 20px; -ms-transform-origin: 20px 20px; -o-transform-origin: 20px 20px; transform-origin: 20px 20px;}

@media only screen and (max-width: 800px) {
#clock {width: 325px; height: 325px; background: transparent url('grafik-k/ziffernblatt-k.png') 0 0 no-repeat; position: absolute; top: 50%; left: 50%; margin: -164px 0 0 -164px; z-index: 1;}
 
.mechanics {-webkit-filter: drop-shadow(7px 7px 7px rgba(0, 0, 0, 0.5));}
#sec,#min,#hour,#button {position: absolute;}
#sec {background: url('grafik-k/sekundenzeiger.png') 0 0 no-repeat; width: 21px; height: 174px; left: 152px;	top: 18px; -webkit-transform-origin: 10px 144px; -moz-transform-origin: 10px 144px;	-ms-transform-origin: 10px 144px;
-o-transform-origin: 10px 144px; transform-origin: 10px 144px;}
#min {background: url('grafik-k/kleiner-zeiger.png') 0 0 no-repeat; width: 21px; height: 162px; left: 152px; top: 30px; -webkit-transform-origin: 10px 132px; -moz-transform-origin: 10px 132px; -ms-transform-origin: 10px 132px;
  -o-transform-origin: 10px 132px; transform-origin: 10px 132px;}
#hour {background: url('grafik-k/grosser-zeiger.png') 0 0 no-repeat; width: 30px; height: 120px; left: 147px; top: 62px; -webkit-transform-origin: 15px 100px; -moz-transform-origin: 15px 100px; -ms-transform-origin: 15px 100px;
  -o-transform-origin: 15px 100px;  transform-origin: 15px 100px;}
#button {background: url('grafik-k/button.png') 0 0 no-repeat; width: 24px; height: 24px; left: 152px; top: 152px; -webkit-transform-origin: 10px 10px; -moz-transform-origin: 10px 10px; -ms-transform-origin: 10px 10px; -o-transform-origin: 10px 10px; transform-origin: 10px 10px;}}