#clockContainer {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); /* center the circle */
	height: 40vw;
	/*to make the height and width responsive*/
	width: 40vw;
	/*setting our background image*/
	background-size: 100%;
}

.right {
    position: fixed;
    top: 20px;
    right: 20px;
   }

.container {
	position: relative;
}

.circle {
	top: 49.3%;
	left: 49.75%;
	transform: translate(-50%, -50%); /* center the circle */
	position: fixed;
	width: 33vw;
	height: 33vw;
	border-radius: 50%;
	border: 10px solid Moccasin; /* set the border to a thick white line */
  	pointer-events: none; /* prevent the circle from intercepting any mouse events */
  	z-index: -1; /* set the z-index to make it display behind other content */
}

.center-circle {
	top: 49.2%;
	left: 49.8%;
	transform: translate(-50%, -50%); 
	position: fixed;
	width: .5vw;
	height: .5vw;
	border-radius: 50%;
	background-color: Moccasin;
  	pointer-events: none; 
  	z-index: -1; 
}

#hour,
#minute,
#second {
    position: absolute;
    background: Moccasin;
    border-radius: 10px;
    transform-origin: bottom;
}
  
#hour {
	width: 1%;
	height: 25%;
	top: 24%;
	left: 49%;
}
  
#minute {
	width: 1%;
	height: 30%;
	top: 19%;
	left: 48.9%;
}
  
#second {
    width: 1%;
    height: 40%;
    top: 9%;
    left: 49%;
}
.eventcal .eventcal-content-wrapper { background: #000000; }

.right {
    position: fixed;
    top: 20px;
    right: 20px;
   }

.dropBox {
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 30%;
    height: 50%;
    background-color: rgb(53, 53, 53);
    border: 4px solid Moccasin;
    border-radius: 10px;
  }
  
.dropBox {
    display: none;
  }
  
.dropDown {
    display: none;
  }

.fixed_header {
    overflow: scroll;
  }

  .clock-container {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
  }
  
  .clock {
	font-size: 2rem;
	font-family: Verdana;
	font-weight: bold;
	text-align: center;
	color: Moccasin;
	padding: 10px;
	border-radius: 5px;
  }