* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.base {
  width: 500px;
  /* border-top: 5px solid gray; */
  margin: auto;
  text-align: center;
  /* position: relative; */
  position: fixed;
  padding: 0 0 30px;
  z-index:99999;
  margin-left:450px;
}

.holder {
  width: 30px;
  height: 20px;
  background: black;
  margin: auto;
  border-radius: 0 0 50% 50%;
}

.thread {
  display: inline-block;
  width: 1.5px;
  height: 20px;
  background: rgba(236,168,95,1.0);
  border-radius: 5px;
  position: relative;
  transform-origin: 50% 0;
  animation: moveIt 2.5s ease-in-out infinite;
}

.thread:after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: red;
  border: 2px solid white;
  top: -4.5px;
  left: -3.5px;
}

.knob {
  width: 10px;
  height: 10px;
  position: absolute;
  top: -18px;
  left: -4.5px;
  border: 2px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  border-bottom: 2px solid transparent;
}

.pendulum {
  width: 158px;
  height: 371px;
  /* background: -moz-radial-gradient(circle at 70% 35%, white, #66d63e 30%, #40a31d 50%);
  background: -webkit-radial-gradient(circle at 70% 35%, white, #66d63e 30%, #40a31d 50%);
  background: -o-radial-gradient(circle at 70% 35%, white, #66d63e 30%, #40a31d 50%);
  background: -ms-radial-gradient(circle at 70% 35%, white, #66d63e 30%, #40a31d 50%);
  background: radial-gradient(circle at 70% 35%, white, #66d63e 30%, #40a31d 50%); */
  background: url('../pendulum-star.png');
  border-radius: 50%;
  position: absolute;
  bottom: -330px;
  left: -70px;
  
}

.shadow {
  width: 30px;
  height: 15px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  margin: 50px auto 0;
  animation: moveShade 1.25s ease-in-out alternate infinite;
  position: absolute;
  bottom: -430px;
  left: 280px;
}

@keyframes moveIt {
  0%, 100% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-10deg);
  }
}

@keyframes moveShade {
  0% {
    transform: translateX(-220px) scale(1.4, .5);
    filter: blur(20px);
  }
  50% {
    filter: blur(3px);
  }
  100% {
    transform: translateX(220px) scale(1.4, .5);
    filter: blur(20px);
  }
}



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

}


@media screen and (max-width: 600px) {
  .base {
	scale: 40% 40%;
	margin-left:-35px;
	margin-top:-15px;
  }
  .pendulum {
	background-repeat: no-repeat;
  }

}

/* iPads */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px){
	.base {
	scale: 70% 70%;
	margin-left:165px;
  }
  .thread {
   height: 70px;
  }
}