html {height:100%;min-height:100%;}
body {width:100%; height:100%;min-width: 100%;min-height: 100%; margin:0; padding:0; background-color: #FFFFFF;font-family: Trebuchet MS,Helvetica,Verdana,Arial,sans-serif;color:#012b61;font-size:12px;}
#content {width:100%;height:100%;}
#main, h1, h2  {position:absolute;top:40%;left:50%;-ms-transform: translateX(-50%) translateY(-50%);-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);text-align:center;max-width:100%}
h1 {top:70%; top: -moz-calc(40% + 260px);top: -webkit-calc(40% + 260px);top: -o-calc(40% + 260px);top: calc(40% + 260px);margin:0;padding:0;font-weight:normal;color:#666666;font-size:3em;letter-spacing:-1px;z-index:1;}
h2 {top:50%; top: -moz-calc(40% + 100px);top: -webkit-calc(40% + 100px);top: -o-calc(40% + 100px);top: calc(40% + 100px);margin:0;padding:0;font-weight:normal;color:#A5A5A5;font-size:1.4em;z-index:1;}
.clock {border-radius: 50%;  background: transparent url('cifernik.svg') no-repeat center;  background-size: 100%;  height: 40em;position: relative;width: 40em; z-index:2;}
.clock:after {background: #000;border-radius: 50%;content: "";position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width: 5%;height: 5%;z-index: 10;}
.minutes-container, .hours-container, .seconds-container {position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 8;overflow:hidden;}
.hours {background: #000;height: 20%;left: 48.75%;position: absolute;top: 30%;-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;width: 2.5%;z-index: 8;}
.minutes {background: #000;height: 40%;left: 49%;position: absolute;top: 10%;-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;width: 2%;z-index: 8;}
.seconds {background: #000;height: 45%;left: 49.5%;position: absolute;top: 14%;-webkit-transform-origin: 50% 80%;transform-origin: 50% 80%;width: 1%;z-index: 8;}
@keyframes rotate {
100% {-webkit-transform: rotateZ(360deg);transform: rotateZ(360deg);}
}
.hours-container {animation: rotate 43200s infinite linear;}
/*
.minutes-container {animation: rotate 3600s infinite steps(60);}
.seconds-container {animation: rotate 60s infinite steps(60);}
*/
.minutes-container {-webkit-transition: transform 0.3s cubic-bezier(.4,2.08,.55,.44);transition: transform 0.3s cubic-bezier(.4,2.08,.55,.44);}
.seconds-container {-webkit-transition: transform 0.2s cubic-bezier(.4,2.08,.55,.44);transition: transform 0.2s cubic-bezier(.4,2.08,.55,.44);}