/********************** 
  Loading Animation 
***********************/
@keyframes loading-rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
.loading{
  width: 100px;
  height: 100px;
  position: relative;
  transform-origin: center center;
  animation: loading-rotation 5s infinite linear;
  -webkit-animation: loading-rotation 5s infinite linear;
}
.loading > p{
  margin: 0px;
  display: inline-block;
  height: 10px;
  width: 10px;
  background: radial-gradient(circle at center, #FFF 0%, #EEE 10%, #AAA 50%, #000 100%);    
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: rotate(0deg) translate3d(0px, 30px, 0);
  -webkit-transform-origin: 0% 0%;
  transform: rotate(0deg) translate3d(0px, 30px, 0);
  transform-origin: 0% 0%;
}
/* 10 Elements is 36 deg increments. Scale increases with each circle */
.loading > p:nth-child(2){
  -webkit-transform: rotate(36deg) translateY(30px) scale(1.1);
  transform: rotate(36deg) translateY(30px) scale(1.1);
}
.loading > p:nth-child(3){
  -webkit-transform: rotate(72deg) translateY(30px) scale(1.2);
  transform: rotate(72deg) translateY(30px) scale(1.2);
}
.loading > p:nth-child(4){
  -webkit-transform: rotate(108deg) translateY(30px) scale(1.3);
  transform: rotate(108deg) translateY(30px) scale(1.3);
}
.loading > p:nth-child(5){
  -webkit-transform: rotate(144deg) translateY(30px) scale(1.4);
  transform: rotate(144deg) translateY(30px) scale(1.4);
}
.loading > p:nth-child(6){
  -webkit-transform: rotate(180deg) translateY(30px) scale(1.5);
  transform: rotate(180deg) translateY(30px) scale(1.5);
}
.loading > p:nth-child(7){
  -webkit-transform: rotate(216deg) translateY(30px) scale(1.6);
  transform: rotate(216deg) translateY(30px) scale(1.6);
}
.loading > p:nth-child(8){
  -webkit-transform: rotate(252deg) translateY(30px) scale(1.7);
  transform: rotate(252deg) translateY(30px) scale(1.7);
}
.loading > p:nth-child(9){
  -webkit-transform: rotate(288deg) translateY(30px) scale(1.8);
  transform: rotate(288deg) translateY(30px) scale(1.8);
}
.loading > p:nth-child(10){
  -webkit-transform: rotate(324deg) translateY(30px) scale(1.9);
  transform: rotate(324deg) translateY(30px) scale(1.9);
}
/********************** 
  Clock Animation 
***********************/
@keyframes clock-rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.clock, .clock *{
  box-sizing: border-box;
}
.clock{
  background: url('/images/demo/stop-watch.png');
  background-size: contain;
  background-repeat: no-repeat;
  height: 500px;
  width: 382px;
  padding: 140px 35px 0px;
}
.clock-face{
  border-radius: 50%;
  border: 1px solid #333;
  position: relative;
  height: 300px;
  width: 300px;
  margin: 0 auto;
}
/* Clock Hand */
.clock-face > *,
.clock-face > *:before{
  box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.5);
  -webkit-box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.5);
}
.clock-face > span{
  position: absolute;
  top: 0%;
  left: calc(50% - 4px);
  height: 0px;
  width: 0px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 150px solid red;
  transform-origin: bottom center;
  animation: clock-rotation 60s infinite linear;
}
.clock-face > span:before{
  box-sizing: content-box;
  position: absolute;
  content: " ";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: black;
  border: 6px solid red;
  bottom: -160px;
  right: -9px;
}
.clock-face > span:after{
  position: absolute;
  content: " ";
  width: 0px;
  height: 0px;
  bottom: -165px;
  right: -9px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 10px solid red;
}
/********************** 
  3D Cube Slide Show 
***********************/
/* CSS variables make responsive much easier */
:root{
  --slideshow-size: 500px;
  --slideshow-z: 250px;
}
/* Container acts a view port with perspective */
.slide-show{
  width: var(--slideshow-size);
  height: var(--slideshow-size);
  perspective: 600px;
  margin: 50px auto 100px;
  padding: 15px 0 0;
  background-color: #EEE;
}
.cube {
  margin: 20px 0 0;
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(calc(-1 * var(--slideshow-z)));
  -webkit-transition: transform 1s ease-in-out 0s;
  transition: transform 1s ease-in-out 0s;
}
.cube > div {
  position: absolute;
  background-color: #EEEEEE;
  width: var(--slideshow-size);
  height: var(--slideshow-size);
  overflow: hidden;
}
.cube > div img{
  width: var(--slideshow-size);
  height: var(--slideshow-size);
  object-fit: cover;
  object-position: center;
}
/* Create Each Face of the Cube */
.cube > div:nth-child(1) { transform: rotateY(  0deg) translateZ(var(--slideshow-z)); } /* Front */
.cube > div:nth-child(2) { transform: rotateY(180deg) translateZ(var(--slideshow-z)); } /* Back */
.cube > div:nth-child(3) { transform: rotateY( 90deg) translateZ(var(--slideshow-z)); } /* Right */
.cube > div:nth-child(4) { transform: rotateY(-90deg) translateZ(var(--slideshow-z)); } /* Left */
.cube > div:nth-child(5) { transform: rotateX( 90deg) translateZ(var(--slideshow-z)); } /* Top */
.cube > div:nth-child(6) { transform: rotateX(-90deg) translateZ(var(--slideshow-z)); } /* Bottom */
/* Slideshow Magic, check which label is clicked and rotate cube to match  */
.slide-show #cube-front:checked+label ~ .cube { 
  transform: translateZ(calc(-1 * var(--slideshow-z))) rotateY(  0deg); 
}
.slide-show #cube-back:checked+label ~ .cube { 
  transform: translateZ(calc(-1 * var(--slideshow-z))) rotateY(  -180deg); 
}
.slide-show #cube-right:checked+label ~ .cube { 
  transform: translateZ(calc(-1 * var(--slideshow-z))) rotateY(  -90deg); 
}
.slide-show #cube-left:checked+label ~ .cube { 
  transform: translateZ(calc(-1 * var(--slideshow-z))) rotateY(  90deg); 
}
.slide-show #cube-top:checked+label ~ .cube { 
  transform: translateZ(calc(-1 * var(--slideshow-z))) rotateX(  -90deg); 
}
.slide-show #cube-bottom:checked+label ~ .cube { 
  transform: translateZ(calc(-1 * var(--slideshow-z))) rotateX(  90deg); 
}
/* Slide Show Navigation Styles */
.slide-show input{
  display: none;
}
.slide-show label{
  box-sizing: border-box;
  text-align: center;
  border: 1px solid black;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 10px 5px 0;
  padding: 2px 10px;
  display: inline-block;
}
.slide-show label:hover{
  background-color: rgba(0,0,0,.05);
}
.slide-show input[type="radio"]:checked+label{
  background-color: #6c757d;
  color: #FFFFFF;
}
/* Caption Styles */
.cube .caption{
  box-sizing: border-box;
  position: absolute;
  bottom: 0px;
  width: 100%;
  background-color: rgba(0,0,0,.5);
  color: #FFF;
  text-align: left;
  padding: 0 20px;
}
.cube .caption.top{
  bottom: initial;
  top: 0px;
}
.cube .caption p{
  color: #FFF;
  margin: 0px;
}
@media only screen and (max-width: 760px) {
  :root{
    --slideshow-size: 200px;
    --slideshow-z: 100px;
  }
  .slide-show{
    margin: 50px auto 150px;
  }
  .cube .caption{
    display: none;
  }
}