.demo-container.clocks{
/* background:rgba(200,200,200,0.9); */
padding:4em 0 2em 1em
}
.demo-container.clocks.single{
padding:2em;
display:inline-block
}
.demo-container.clocks.single .clock{
height:10em; /* Hauteur pendule */
width:10em; /* Largeur pendule */
padding:0;
margin:0}
.clock{
border-radius:50%;
background:radial-gradient(#000,#000 0.1em,#fff 0.1em,#fff),#fff;
display:inline-block;
padding-bottom:31.333%;
position:relative;
width:31.333%;
opacity:0
}
.clock.show{
opacity:1;
transition:all 2.5s cubic-bezier(0.12,1.03,0.34,1)
}
.clock::after{
background:red;
border-radius:50%;
content:"";
position:absolute;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
width:4%;
height:4%;
z-index:10
}
.minutes-container,.hours-container,.seconds-container{
position:absolute;
top:0;
right:0;
bottom:0;
left:0
}
.hours-container{
-webkit-animation:rotate 43200s infinite linear;
animation:rotate 43200s infinite linear
}
.bounce .minutes-container{
transition:-webkit-transform 0.3s cubic-bezier(0.4,2.08,0.55,0.44);
transition:transform 0.3s cubic-bezier(0.4,2.08,0.55,0.44);
-webkit-transform 0.3s cubic-bezier(0.4,2.08,0.55,0.44)
}
.bounce .seconds-container{
transition:-webkit-transform 0.2s cubic-bezier(0.4,2.08,0.55,0.44);
transition:transform 0.2s cubic-bezier(0.4,2.08,0.55,0.44);
-webkit-transform 0.2s cubic-bezier(0.4,2.08,0.55,0.44)
}
.hours{
background:#000;
width:3.5%;
height:40%;
position:absolute;
left:48.25%;
top:22%;
-webkit-transform-origin:50% 71%;
transform-origin:50% 71%
}
.minutes{
background:#000;
width:3.5%;
height:55%;
position:absolute;
left:48.25%;
top:7%;
-webkit-transform-origin:50% 78.5%;
transform-origin:50% 78.5%
}
.seconds{
background:red;width:1.5%;
height:42%;position:absolute;
left:49.25%;
top:20%;
-webkit-transform-origin:50% 71%;
transform-origin:50% 71%;
z-index:8
}
@-webkit-keyframes rotate{
	100%{
	-webkit-transform:rotateZ(360deg);
	transform:rotateZ(360deg)
	}
}
@keyframes rotate{100%{
	-webkit-transform:rotateZ(360deg);
	transform:rotateZ(360deg)
	}
}
.clock.station{
background:#fff url(station_clock.svg) no-repeat center;
background-size:95%;box-shadow:0 0 0.5em rgba(0,0,0,0.2) inset
}
.clock.station .seconds::before{
background:red;border-radius:50%;content:"";
position:absolute;top:-9%;
left:-200%;
height:18%;
width:500%
}
.clock.ios7
{
background:#fff url(ios_clock.svg) no-repeat center;
background-size:88%
}
.clock.ios7:before{
background:black
;border-radius:50%;
content:"";
position:absolute;
left:50%;top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
width:6%;
height:6%;
z-index:0
}
.clock.ios7:after{
width:2%;
height:2%
}
.clock.ios7 .seconds{
border-radius:200%/10%;
height:30%;
left:49.5%;
top:20%;
width:1%;
-webkit-transform-origin:50% 100%;
transform-origin:50% 100%
}
.clock.ios7 .minutes{
border-radius:150%/10%;
width:2%;
height:35%;
left:49%;
top:15%;
-webkit-transform-origin:50% 100%;
transform-origin:50% 100%
}
.clock.ios7 .hours{
border-radius:85%/10%;
width:2%;
height:20%;
left:49%;
top:30%;
-webkit-transform-origin:50% 100%;
transform-origin:50% 100%
}
.clock.simple{
background:#fff url(
ios_clock.svg) no-repeat center;
background-size:88%
}
.clock.simple:after{
background-color:#000;
width:5%;
height:5%
}
.clock.simple .seconds{
background-color:#000;
height:45%;
left:49.5%;
top:14%;
width:1%;
-webkit-transform-origin:50% 80%;
transform-origin:50% 80%
}
.clock.simple .minutes{
width:2%;
height:40%;
left:49%;
top:10%;
-webkit-transform-origin:50% 100%;
transform-origin:50% 100%
}
.clock.simple .hours{
width:2.5%;
height:20%;
left:48.75%;
top:30%;
-webkit-transform-origin:50% 100%;
transform-origin:50% 100%
}
.hours.angled{
-webkit-transform:rotateZ(-40deg);
transform:rotateZ(-40deg)
}
.minutes.angled{
-webkit-transform:rotateZ(40deg);
transform:rotateZ(40deg)
}
.demo .seconds-container{
background-color:rgba(255,255,255,0.4)
}
.demo .minutes-container{
background-color:rgba(255,255,255,0.6)
}
.demo .hours-container{
background-color:rgba(255,255,255,0.8)
}