.clock-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.clock-box {
  width: 300px;
  height: 300px;
  background: #000;
  color: #fff;
  margin: .5rem;
}

.clock-text-box {
  padding: 1rem;
}

.clock-animation {
  width: 100%;
  height: 100px;
  position: relative;
  overflow: hidden;
}

.clock-country {
  font-size: 1.6rem;
}

.clock-time {
  font-size: 3rem;
}

.clock-calender {
  font-size: 1.6rem;
}

.sky00,
.sky24 {
  background: #00000c;
}

.sky01 {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(85%, #020111), to(#191621));
  background: linear-gradient(to bottom, #020111 85%, #191621 100%);
}

.sky02 {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, #020111), to(#20202c));
  background: linear-gradient(to bottom, #020111 60%, #20202c 100%);
}

.sky03 {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #020111), to(#3a3a52));
  background: linear-gradient(to bottom, #020111 10%, #3a3a52 100%);
}

.sky04 {
  background: -webkit-gradient(linear, left top, left bottom, from(#20202c), to(#515175));
  background: linear-gradient(to bottom, #20202c 0%, #515175 100%);
}

.sky05 {
  background: -webkit-gradient(linear, left top, left bottom, from(#40405c), color-stop(80%, #6f71aa), to(#8a76ab));
  background: linear-gradient(to bottom, #40405c 0%, #6f71aa 80%, #8a76ab 100%);
}

.sky06 {
  background: -webkit-gradient(linear, left top, left bottom, from(#4a4969), color-stop(50%, #7072ab), to(#cd82a0));
  background: linear-gradient(to bottom, #4a4969 0%, #7072ab 50%, #cd82a0 100%);
}

.sky07 {
  background: -webkit-gradient(linear, left top, left bottom, from(#757abf), color-stop(60%, #8583be), to(#eab0d1));
  background: linear-gradient(to bottom, #757abf 0%, #8583be 60%, #eab0d1 100%);
}

.sky08 {
  background: -webkit-gradient(linear, left top, left bottom, from(#82addb), to(#ebb2b1));
  background: linear-gradient(to bottom, #82addb 0%, #ebb2b1 100%);
}

.sky09 {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #94c5f8), color-stop(70%, #a6e6ff), to(#b1b5ea));
  background: linear-gradient(to bottom, #94c5f8 1%, #a6e6ff 70%, #b1b5ea 100%);
}

.sky10 {
  background: -webkit-gradient(linear, left top, left bottom, from(#b7eaff), to(#94dfff));
  background: linear-gradient(to bottom, #b7eaff 0%, #94dfff 100%);
}

.sky11 {
  background: -webkit-gradient(linear, left top, left bottom, from(#9be2fe), to(#67d1fb));
  background: linear-gradient(to bottom, #9be2fe 0%, #67d1fb 100%);
}

.sky12 {
  background: -webkit-gradient(linear, left top, left bottom, from(#90dffe), to(#38a3d1));
  background: linear-gradient(to bottom, #90dffe 0%, #38a3d1 100%);
}

.sky13 {
  background: -webkit-gradient(linear, left top, left bottom, from(#57c1eb), to(#246fa8));
  background: linear-gradient(to bottom, #57c1eb 0%, #246fa8 100%);
}

.sky14 {
  background: -webkit-gradient(linear, left top, left bottom, from(#2d91c2), to(#1e528e));
  background: linear-gradient(to bottom, #2d91c2 0%, #1e528e 100%);
}

.sky15 {
  background: -webkit-gradient(linear, left top, left bottom, from(#2473ab), color-stop(70%, #1e528e), to(#5b7983));
  background: linear-gradient(to bottom, #2473ab 0%, #1e528e 70%, #5b7983 100%);
}

.sky16 {
  background: -webkit-gradient(linear, left top, left bottom, from(#1e528e), color-stop(50%, #265889), to(#9da671));
  background: linear-gradient(to bottom, #1e528e 0%, #265889 50%, #9da671 100%);
}

.sky17 {
  background: -webkit-gradient(linear, left top, left bottom, from(#1e528e), color-stop(50%, #728a7c), to(#e9ce5d));
  background: linear-gradient(to bottom, #1e528e 0%, #728a7c 50%, #e9ce5d 100%);
}

.sky18 {
  background: -webkit-gradient(linear, left top, left bottom, from(#154277), color-stop(30%, #576e71), color-stop(70%, #e1c45e), to(#b26339));
  background: linear-gradient(to bottom, #154277 0%, #576e71 30%, #e1c45e 70%, #b26339 100%);
}

.sky19 {
  background: -webkit-gradient(linear, left top, left bottom, from(#163C52), color-stop(30%, #4F4F47), color-stop(60%, #C5752D), color-stop(80%, #B7490F), to(#2F1107));
  background: linear-gradient(to bottom, #163C52 0%, #4F4F47 30%, #C5752D 60%, #B7490F 80%, #2F1107 100%);
}

.sky20 {
  background: -webkit-gradient(linear, left top, left bottom, from(#071B26), color-stop(30%, #071B26), color-stop(80%, #8A3B12), to(#240E03));
  background: linear-gradient(to bottom, #071B26 0%, #071B26 30%, #8A3B12 80%, #240E03 100%);
}

.sky21 {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #010A10), color-stop(80%, #59230B), to(#2F1107));
  background: linear-gradient(to bottom, #010A10 30%, #59230B 80%, #2F1107 100%);
}

.sky22 {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #090401), to(#4B1D06));
  background: linear-gradient(to bottom, #090401 50%, #4B1D06 100%);
}

.sky23 {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(80%, #00000c), to(#150800));
  background: linear-gradient(to bottom, #00000c 80%, #150800 100%);
}

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

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

@-webkit-keyframes cloud {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

@keyframes cloud {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

.sun-00, .sun-24 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F5DF4D;
  -webkit-box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
          box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 500% 500%;
          transform-origin: 500% 500%;
  -webkit-transform: rotateZ(-30deg);
          transform: rotateZ(-30deg);
}

.sun-01 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F5DF4D;
  -webkit-box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
          box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 500% 500%;
          transform-origin: 500% 500%;
  -webkit-transform: rotateZ(-30deg);
          transform: rotateZ(-30deg);
}

.sun-02 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F5DF4D;
  -webkit-box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
          box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 500% 500%;
          transform-origin: 500% 500%;
  -webkit-transform: rotateZ(-30deg);
          transform: rotateZ(-30deg);
}

.sun-03 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F5DF4D;
  -webkit-box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
          box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 500% 500%;
          transform-origin: 500% 500%;
  -webkit-transform: rotateZ(-30deg);
          transform: rotateZ(-30deg);
}

.sun-04 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F5DF4D;
  -webkit-box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
          box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 500% 500%;
          transform-origin: 500% 500%;
  -webkit-transform: rotateZ(-30deg);
          transform: rotateZ(-30deg);
}

.sun-05 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F5DF4D;
  -webkit-box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
          box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 500% 500%;
          transform-origin: 500% 500%;
  -webkit-transform: rotateZ(-30deg);
          transform: rotateZ(-30deg);
}

.sun-06 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F5DF4D;
  -webkit-box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
          box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 500% 500%;
          transform-origin: 500% 500%;
  -webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);
}

.sun-07 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F5DF4D;
  -webkit-box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
          box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 500% 500%;
          transform-origin: 500% 500%;
  -webkit-transform: rotateZ(8deg);
          transform: rotateZ(8deg);
}

.sun-08 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F5DF4D;
  -webkit-box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
          box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 500% 500%;
          transform-origin: 500% 500%;
  -webkit-transform: rotateZ(16deg);
          transform: rotateZ(16deg);
}

.sun-09 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F5DF4D;
  -webkit-box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
          box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 500% 500%;
          transform-origin: 500% 500%;
  -webkit-transform: rotateZ(24deg);
          transform: rotateZ(24deg);
}

.sun-10 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F5DF4D;
  -webkit-box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
          box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 500% 500%;
          transform-origin: 500% 500%;
  -webkit-transform: rotateZ(32deg);
          transform: rotateZ(32deg);
}

.sun-11 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F5DF4D;
  -webkit-box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
          box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 500% 500%;
          transform-origin: 500% 500%;
  -webkit-transform: rotateZ(40deg);
          transform: rotateZ(40deg);
}

.sun-12 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F5DF4D;
  -webkit-box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
          box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 500% 500%;
          transform-origin: 500% 500%;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}

.sun-13 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F5DF4D;
  -webkit-box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
          box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 500% 500%;
          transform-origin: 500% 500%;
  -webkit-transform: rotateZ(53deg);
          transform: rotateZ(53deg);
}

.sun-14 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F5DF4D;
  -webkit-box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
          box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 500% 500%;
          transform-origin: 500% 500%;
  -webkit-transform: rotateZ(60deg);
          transform: rotateZ(60deg);
}

.sun-15 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F5DF4D;
  -webkit-box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
          box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 500% 500%;
          transform-origin: 500% 500%;
  -webkit-transform: rotateZ(69deg);
          transform: rotateZ(69deg);
}

.sun-16 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F5DF4D;
  -webkit-box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
          box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 500% 500%;
          transform-origin: 500% 500%;
  -webkit-transform: rotateZ(87deg);
          transform: rotateZ(87deg);
}

.sun-17 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F5DF4D;
  -webkit-box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
          box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 500% 500%;
          transform-origin: 500% 500%;
  -webkit-transform: rotateZ(94deg);
          transform: rotateZ(94deg);
}

.sun-18 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F5DF4D;
  -webkit-box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
          box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 500% 500%;
          transform-origin: 500% 500%;
  -webkit-transform: rotateZ(98deg);
          transform: rotateZ(98deg);
}

.sun-19 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F5DF4D;
  -webkit-box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
          box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 500% 500%;
          transform-origin: 500% 500%;
  -webkit-transform: rotateZ(-30deg) g;
          transform: rotateZ(-30deg) g;
}

.sun-20 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F5DF4D;
  -webkit-box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
          box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 500% 500%;
          transform-origin: 500% 500%;
  -webkit-transform: rotateZ(-30deg);
          transform: rotateZ(-30deg);
}

.sun-21 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F5DF4D;
  -webkit-box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
          box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 500% 500%;
          transform-origin: 500% 500%;
  -webkit-transform: rotateZ(-30deg);
          transform: rotateZ(-30deg);
}

.sun-22 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F5DF4D;
  -webkit-box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
          box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 500% 500%;
          transform-origin: 500% 500%;
  -webkit-transform: rotateZ(-30deg);
          transform: rotateZ(-30deg);
}

.sun-23 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F5DF4D;
  -webkit-box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
          box-shadow: 0 0 10px 10px rgba(245, 223, 77, 0.5);
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 500% 500%;
          transform-origin: 500% 500%;
  -webkit-transform: rotateZ(-30deg);
          transform: rotateZ(-30deg);
}

.star {
  height: 300px;
  width: 300px;
  position: absolute;
  top: -10%;
}

.star-img {
  display: block;
  height: 300px;
  width: 300px;
  -webkit-animation: star 240s linear infinite;
          animation: star 240s linear infinite;
}

.cloud {
  height: 300px;
  width: 300px;
  position: absolute;
}

.cloud-img {
  opacity: .5;
  height: 300px;
  width: 300px;
  display: block;
  -webkit-animation: cloud 60s linear infinite;
          animation: cloud 60s linear infinite;
}
/*# sourceMappingURL=time.css.map */