/*--------------------------------------------------------------------CLOCK-----------------------------------------------------------------------------*/

  .signer {
    animation-name: visible;
    animation-duration: 0s;
    animation-iteration-count: 1;
}

.clockRow {
    position: relative;
}


#dot {
    z-index: 32;
    position: absolute;
}


.clockFrame img {
    width: 100%;
}

#clockBase {
  position: absolute;
  z-index: 20;
  opacity: 66%;

}

#clock {
    position: relative;
    padding-top: 2rem;
}

#clockitems{
    animation-name: visible;
    animation-duration: 1s;
    animation-iteration-count: 1;

}

#secondArrow {
    z-index: 32;
    position: absolute;
    animation-name: secondcounter;
    -webkit-animation-name: secondcounter;
    animation-duration: 60s;
    -webkit-animation-duration: 60s;
    animation-delay: var(--milsecs);
    -webkit-animation-delay: var(--milsecs);
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    transform: rotate(var(--seconds));    
    -webkit-transform: rotate(var(--seconds));
    opacity: 75%;
}

#hourArrow {
    z-index: 28;
    position: absolute;
    transform: rotate(var(--smallArrow));
    animation-name: hourcounter;
    animation-duration: 43200s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    opacity: 75%;
    -webkit-animation-name: hourcounter;
    -webkit-animation-duration: 43200s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-transform: rotate(var(--smallArrow));


}


#minuteArrow {
    z-index: 30;
    position: absolute;
    animation-delay: var(--minutetime);
    animation-name: minutecounter;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    opacity: 75%;
    -webkit-animation-delay: var(--minutetime);
    -webkit-animation-name: minutecounter;
    -webkit-animation-duration: 3600s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

}

#clockShadow {
  z-index: 30;
  position: absolute;
  animation-delay: 0s;
  animation-name: rotateshadow;
  animation-duration: 120s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  opacity: 25%;

}


.clockWrapper {
  animation-duration: 1s;
  animation-name: clk;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}

#clockWrapper {
  opacity: 100%;
}


@media screen and (max-width: 991px) {
  
}




@keyframes visible {

  0% {
      opacity: 0%;
   
  }

  90% {
      opacity: 0%;
    
  }

  100% {
      opacity: 85%;
   
  }
}

@keyframes superot {


  0% {
      -ms-transform: scale(0.15);
      -webkit-transform: scale(0.15);
      transform: scale(0.15) rotate(0deg);
      opacity: 0%;
    
  }

  66% {
      -ms-transform: scale(0.15);
      -webkit-transform: scale(0.15);
      transform: scale(0.15) rotate(0deg);
      opacity: 0%;
    
  }

  

  100% {
      -ms-transform: scale(1.0);
      -webkit-transform: scale(1.0);
      transform: scale(1.0) rotate(0deg);
      opacity: 100%;
  
  }

}


@keyframes hourcounter {

  0% {
      transform: rotate(var(--smallArrow));
  }

  100% {
      transform: rotate(calc(var(--smallArrow) + 360deg));
  }

}


@keyframes secondcounter {

  0% {
      transform: rotate(var(--seconds));
  }

  50% {
      transform: rotate(var(--seconds));
  }

  100% {
      transform: rotate(var(--seconds));
  }
}

@-webkit-keyframes secondcounter {

  0% {
      -webkit-transform: rotate(var(--seconds));
  }

  50% {
      -webkit-transform: rotate(var(--seconds));
  }

  100% {
      -webkit-transform: rotate(var(--seconds));
  }

}



@keyframes minutecounter {

  0% {
      transform: rotate(var(--minutes));
  }

  50% {
      transform: rotate(var(--minutes));
  }

  100% {
      transform: rotate(var(--minutes));
  }

}

@-webkit-keyframes minutecounter {

  0% {
      -webkit-transform: rotate(var(--minutes));
  }

  50% {
      -webkit-transform: rotate(var(--minutes));
  }

  100% {
      -webkit-transform: rotate(var(--minutes));
  }

}


@keyframes rotateshadow {
  0% {
    transform: rotate(0deg)scale(1.05)
  }
  100% {
    transform: rotate(0deg)scale(1.05)
  }
}


@keyframes clk {
  0% {
    margin-top: 256px;
    margin-left: 320px;
    transform: scale(0.01)rotate(-150deg)translate(0,800px);
    opacity: 0%;
    filter:grayscale(100%)
  }
  100% {
    margin-top: 0px;
    margin-left: 0px;
    transform: scale(1)rotate(0deg)translate(0px,0px);
    opacity: 100%;
    filter:grayscale(0%)
   
  }
}


#bkbase {
  position: relative;
  z-index: 410;
  min-width: 99.8vw;
}