body {
  margin: 0;
}

.demo-container.clocks {
/*  background: #99CCFF;
padding: 10px; */
  /* width: 100%; /* relative taille fenetre */
 width: 350px; /*  Fixe */
position:relative;
/* height: 100vh; */
 height :0px;
 margin-left: -80px; /* Diminuer ecart horizontal des horloges */
 /* overflow: hidden; */
  margin-top:80px;
  padding-top:0px;
  visible: none;
}

.clock {
  border-radius: 50%;
 /* background: radial-gradient(#000, #000 0.1em, #fff 0.1em, #fff), #fff;
background: #fff url(ios_clock.svg) no-repeat center;*/
display:inline-block;/* inline-block;*/
  margin: 0px;
  padding-bottom: 31%;
  position:absolute /* relative; */
  top:200px;
  width: 31%;
 opacity: 50%;
  /*transform: translateY(-40%);            fait rien ?*/
}

.clock.show {
  opacity: 1;
  transform: translateY(-75%); /* position hauteur des horloges */
 /* transition: all 2.5s 0.5s cubic-bezier(0.12, 1.03, 0.34, 1);  effet de montée lente */
}

.clock::after { /* rond central */
  background: red;
  border-radius: 50%;
  content: "";
  position: absolute;
  left: 50%;
  top: 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;
}

.linear .minutes-container {
  -webkit-animation: rotate 3600s infinite linear;
          animation: rotate 3600s infinite linear;
}
.linear .seconds-container {
  -webkit-animation: rotate 60s infinite linear;
          animation: rotate 60s infinite linear;
}

.steps .minutes-container {
  -webkit-animation: rotate 3600s infinite steps(60);
          animation: rotate 3600s infinite steps(60);
}
.steps .seconds-container {
  -webkit-animation: rotate 60s infinite steps(60);
         animation: rotate 60s infinite steps(60);

}

.local.steps .minutes-container {
  -webkit-animation: none;
          animation: none;
}

.bounce .minutes-container {
  transition: transform 0.3s cubic-bezier(0.4, 2.08, 0.55, 0.44);
}
.bounce .seconds-container {
  transition: transform 0.2s cubic-bezier(0.4, 2.08, 0.55, 0.44);
}

.hours {
 background: #000;
  height: 20%;
  left: 48.75%;
  position: absolute;
  top: 30%;
  transform-origin: 50% 100%;
  width: 2.5%;
border-top-left-radius:50%;
border-top-right-radius:50%;
//border-bottom-radius:50px;
//border-radius: 50%;
}

.minutes {
   background: #000;
  height: 40%;
  left: 49%;
  position: absolute;
  top: 10%;
  transform-origin: 50% 100%;
  width: 1.5%;
border-radius: 30%;
}

.seconds {
  background: red;
  width: 1%;/* ----------------------------------Epaisseur trotteuse----------*/
  height: 45%;/*42% ----------------- position en hauteur -----------*/
  position: absolute;
  left: 49.25%;
  top: 14%;  //220%; 0%;
  transform-origin:50% 80%; // 40% 71%;
  z-index: 8;
}

.label {
  background: #CCCCCC;
  border-radius: 15%;
  color: #000;
  font-family: MyriadPro-Regular, "Myriad Pro Regular", MyriadPro, "Myriad Pro", Helvetica, Arial, sans-serif;
  font-size: 14px;
/*  font-weight: bold; */
text-transform: uppercase; /* transforme tout en majuscule */
  padding: 0.5em 0.75em 0.25em;
  position: absolute;
  top: -50px;
  left: 50%;
  width:100px;
 text-align:center; 
transform: translate(-50%, 0); /* pos H */
}

@-webkit-keyframes rotate {
  100% {
    transform: rotateZ(360deg);
  }
}

@keyframes rotate {
  100% {
    transform: rotateZ(360deg);
  }
}
.clock.station {
  background: #fff url(clock4.JPG) no-repeat center; /* ****************************** MH *************************** */
 /* background-size: 550px; ************************************ taille image background % vectoriel en px = fixe*************** */
background-size: 100%;  
  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: -19%;
left: -200%;   /*   -------------- fait rien ? ----------*/
  height: 60%;  /* -------------- fait rien ? ---------- */
/*  width: 500%;       ************ forme au bout troteuse ************************ */
}


}