#dwl_clock_container {
    position: fixed;
    top: 50%;
    left: 50%;
    max-width: 500px;
    width: calc(100% - 2em);
    /*width: 50vw;
    height: 50vw;*/
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: showclock 0.4s ease-in-out 1.5s forwards;
    z-index: 20;
}

@keyframes showclock {
    from {opacity: 0;}
    to {opacity: 1;}
  }


#dwl_clock_container:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

#dwl_clock {
    background: rgba(0,0,0,.9);
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 1;
}

#dwl_clock div {
    width: 1px;
    height: 50%;
    top: 0;
    left: 50%;
    position: absolute;
    transform-origin: bottom right;
}

#dwl_clock div::after {
    position: absolute;
    background-color: #32322C;
    display: block;
    top: .8rem;
    left: 0;
    width: .6rem;
    height: .6rem;
    content: " ";
    border-radius: 50%;
    transform: translateX(-50%);
}

#dwl_clock div:nth-child(5n+1)::after {
    background-color: #65532F;
}

@media screen and (min-width: 400px) {
    #dwl_clock div::after {
        width: .8rem;
        height: .8rem;
    }
}

#dwl_clock div.dwl_second {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20%, white 30%, white 40%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%);
    animation: glowinghand 1s ease;
}

@keyframes glowinghand {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

#dwl_clock div.dwl_minute {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20%, #F28F3B 30%, #F28F3B 40%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%);
}

#dwl_clock div.dwl_hour {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20%, #4C6085 30%, #4C6085 40%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%);
}

#dwl_clock div.dwl_second::after {
    background-color: white;
}

#dwl_clock div.dwl_minute::after {
    background-color: #F28F3B;
}

#dwl_clock div.dwl_hour::after {
    background-color: #4C6085;
}

#dwl_clock_container .circle {
    border-radius: 50%;
    background-color: deepskyblue;
    width: 100px;
    height: 100px;
    position: absolute;
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
    animation: loaderscaleIn 4s infinite cubic-bezier(.36, .11, .89, .32);
}
 
#dwl_clock_container .item {
    position: absolute;
    width: 70px;
    height: 70px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 3;
}
 
#dwl_clock_container .item img {
    width: 70px;
    animation: wortloader 1s infinite cubic-bezier(.36, .11, .89, .32);
    z-index: 4;
}
	
@keyframes loaderscaleIn {
    from {
    transform: translate(-50%,-50%) scale(.5, .5);
    opacity: .5;
    }
    to {
    transform: translate(-50%,-50%) scale(2.5, 2.5);
    opacity: 0;
    }
}
	
@keyframes wortloader {
    0% {
    opacity: 1;
    }
    90% {
    opacity: 0.8;
    }
    100% {
    opacity: 1;
	}
}