/* body {
  background-color: #fff;
} */
#preloader {
	display: flex;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(256, 256, 256, 1);
	border-radius: 20px;
	z-index: 999;
}

.clock {
	display: block;
	border-radius: 70px;
	border: 3px solid #252525;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 60px;
	
	border-color: #1297E2;  /* fallback for old browsers */
  }

.clock:after{
	content: "";
	position: absolute;
	background: #1297E2;  /* fallback for old browsers */
	top: 2px;
	left: 48%;
	
	height: 25px;
	width: 3px;
	border-radius: 5px;
	-webkit-transform-origin: 50% 97%;
			transform-origin: 50% 97%;
	-webkit-animation: grdAiguille 2s linear infinite;
			animation: grdAiguille 2s linear infinite;
}

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

@keyframes grdAiguille{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}

.clock:before{
	content: "";
	position: absolute;
	background: #1297E2;  /* fallback for old browsers */
	top: 8px;
	left: 48%;
	height: 20px;
	width: 3px;
	border-radius: 5px;
	-webkit-transform-origin: 50% 94%;
			transform-origin: 50% 94%;
	-webkit-animation: ptAiguille 12s linear infinite;
			animation: ptAiguille 12s linear infinite;
}

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

@keyframes ptAiguille{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}