.clock {
  border-radius: 50%;
  height: 20em;
  padding-bottom: 31%;
  position: relative;
  width: 20em;
  margin-left: auto;
  margin-right: auto;
}

body{
  background-color: black;
  height:100vh;
}
html{
  background-color: white;
}

.image{
  width: 400px;
  height: 350px;
}

/*480 wide or wider*/
@media screen and (min-width: 480px) {
    #mobile{
      display: none;
    }
}
/*480 wide and less*/
@media screen and (max-width: 480px) {
    #desktop{
      display: none;
    }
}

#image0{
  background: url(../img/DID.png) no-repeat center;
  background-size:cover;
  margin-left: auto;
  margin-right: auto;
}

#image1{
  background: url(../img/Narc.png) no-repeat center;
  background-size:cover;
  margin-left: auto;
  margin-right: auto;
}

#image2{
  background: url(../img/Expansion.gif) no-repeat center;
  background-size:cover;
  margin-left: auto;
  margin-right: auto;

}

#image3{
  background: url(../img/ExpansionReverse.gif) no-repeat center;
  background-size:cover;
  margin-left: auto;
  margin-right: auto;
}

#mainVid{
  height: 100%;
  width: 100%;
}

#robit{
  height: 100%;
  width: 100%;
  visibility: hidden;
}

#other{
  visibility: hidden;
}

#row0{
  padding-top: 20px;
  padding-bottom: 10px;
  background-color: black;
}

.clock::after {
  background: #2c3e50;
  border-radius: 50%;
  border: 35px solid;
  border-color: #f0c419;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 75px;
  height: 75px;
  z-index: 10;
}

.minutes-container, .hours-container, .seconds-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}


.hours {
  background: url(../img/SecondsHand.png) no-repeat center;
  background-size:cover;
  height: 20%;
  left: 38%;
  position: absolute;
  top: 30%;
  transform-origin: 50% 100%;
  width: 20%;
}

.minutes {
  background: url(../img/SecondsHand.png) no-repeat center;
  background-size:cover;
  height: 41%;
  left: 42%;
  position: absolute;
  top: 10%;
  transform-origin: 50% 100%;
  width: 20%;
}

.seconds {
  background: url(../img/SecondsHand.png) no-repeat center;
  background-size:cover;
  height: 45%;
  left: 40%;
  position: absolute;
  top: 14%;
  transform-origin: 50% 80%;
  width: 20%;
  z-index: 8;
}

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

#spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;
    cursor: pointer;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

/*.hours-container {
  animation: rotate 43200s infinite linear;
}
.minutes-container {
  animation: rotate 3600s infinite linear;
}
.seconds-container {
  animation: rotate 60s infinite linear;
}*/

.hours-container {
  animation: rotate 43200s infinite linear;
}
.minutes-container {
  transition: transform 0.3s cubic-bezier(.4,2.08,.55,.44);
}
.seconds-container {
  transition: transform 0.2s cubic-bezier(.4,2.08,.55,.44);
}