@charset "utf-8"

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}

body {
    margin: 0;
}


#outer-container {
    text-align: center;
}

#clock-container {
    position: relative;
    display: inline-block;
    text-align: center;
    width: 307px;
    height: 580px;
    background-image:url('../img/spitzweg-uhr02.jpg');
    background-color: transparent;
    opacity: 0;
}

#clock-container.loaded {
    opacity: 1;
    transition: opacity 1s ease-out;
    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -o-transition: opacity 1s ease-out;
}


#hour-hand {
	background-image:url('../img/spitzweg-uhr02p-stunden.png');
    position: absolute;
    top: -75px;
    left: 42px;
    width: 10px;
    height: 19px;
}

#hour-hand.move {
    -webkit-animation: move-hour-hand 43200s linear infinite;
    -moz-animation: move-hour-hand 43200s linear infinite;
    -o-animation: move-hour-hand 43200s linear infinite;
    -webkit-animation-play-state: running;
}

#minute-hand {
	background-image:url('../img/spitzweg-uhr02p-minuten.png');
    position: absolute;
    top: -75px;
    left: 42px;
    width: 10px;
    height: 25px;
}

#minute-hand.move {
    -webkit-animation: move-minute-hand 3600s linear infinite;
    -moz-animation: move-minute-hand 3600s linear infinite;
    -o-animation: move-minute-hand 3600s linear infinite;
    -webkit-animation-play-state: running;
}

#axis {
    position: absolute;
    top: -75px;
    left: 43px;
    width: 4px;
    height: 4px;
    border-radius: 1px;
}

#pendulum-container {
	background-image:url('../img/spitzweg-uhr02-pendel.png');
    position: absolute;
    top: -140px;
    left: 63px;
    width: 10px;
    height: 180px;
}

#pendulum-container.move {
    -webkit-animation-play-state: running;
    -webkit-animation: move-pendulum 3s ease-in-out infinite;
    -moz-animation: move-pendulum 3s ease-in-out infinite;
    -o-animation: move-pendulum 3s ease-in-out infinite;
}