.clock
{
	cursor:pointer;
	height:40px;
	position:relative;
	transition:width 0.25s;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
	width:40px;
}

.clock.expand
{
	width:110px;
}

/* DIGITAL CLOCK */
.clock .divDigitalClock
{
	background-color:#292a2f;
    border-radius:20px;
    bottom:0px;
	left:0px;
	overflow:hidden;
	position:absolute;
	right:0px;
	top:0px;
}

.clock .divDigitalClock:before
{
	animation:pulsateSeconds 2s linear 0s infinite;
	color:#ffffff;
	content:":";
	display:block;
	font-size:20px;
	left:67px;
	position:absolute;
	top:5px;
}

.clock.expandLeft .divDigitalClock:before
{
	left:32px;
}

.clock .divHourValue
{
	color:#ffffff;
	font-size:20px;
	left:40px;
	position:absolute;
	text-align:right;
	text-shadow:0px 0px 5px #01eff9;
	top:6px;
	width:25px;
}

.clock.expandLeft .divHourValue
{
	left:5px;
}

.clock .divMinuteValue
{
	color:#ffffff;
	font-size:20px;
	left:75px;
	position:absolute;
	text-shadow:0px 0px 5px #01eff9;
	top:6px;
}

.clock.expandLeft .divMinuteValue
{
	left:40px;
}

/* ANALOG CLOCK */
.clock .divClockOuter
{
	background-color:#292a2f;
    border:2px solid #3f4656;
    border-radius:50%;
    height:36px;
	position:absolute;
	transform:rotate(180deg);
    transition:border 0.25s, box-shadow 0.25s;
    width:36px;
}

.clock.expandLeft .divClockOuter
{
	right:0px;
}

.clock:hover .divClockOuter, .clock:focus .divClockOuter
{
	border:2px solid #cffdff;
    box-shadow:inset 0px 0px 5px #01eff9, 0px 0px 5px #01eff9;
}

.clock .divClockOuter:before
{
	background-color:#ffffff;
	border-radius:50%;
	content:"";
	display:block;
	height:4px;
	left:calc(50% - 2px);
	position:absolute;
	top:calc(50% - 2px);
	transition:box-shadow 0.25s;
	width:4px;
}

.clock .divClockOuter:hover:before, .clock .divClockOuter:focus:before
{
	box-shadow:0px 0px 5px 0px #01eff9;
}

.clock .divClockOuter:after
{
	border-radius:50%;
	box-shadow:0px 2px 0px 0px #ffffff, 0px 32px 0px 0px #ffffff, 16px 16px 0px 0px #ffffff, -16px 16px 0px 0px #ffffff;
	content:"";
	display:block;
	height:2px;
	left:calc(50% - 1px);
	position:absolute;
	top:1px;
	transition:box-shadow 0.25s;
	width:2px;
}

.clock:hover .divClockOuter:after, .clock:focus .divClockOuter:after
{
	box-shadow:0px 2px 0px 0px #01eff9, 0px 32px 0px 0px #01eff9, 16px 16px 0px 0px #01eff9, -16px 16px 0px 0px #01eff9;
}

.clock .divHourHand
{
	background-color:#ffffff;
	border-radius:50%;
    height:12px;
	left:calc(50% - 1px);
	position:absolute;
	top:calc(50% - 1px);
	transform-origin:1px 1px;
	width:2px;
}

.clock .divMinuteHand
{
	background-color:#ffffff;
	border-radius:50%;
    height:16px;
	left:calc(50% - 1px);
	position:absolute;
	top:calc(50% - 1px);
	transform-origin:1px 1px;
	width:2px;
}

/* ANIMATION KEY FRAMES */
@keyframes pulsateSeconds
{
	0%   {opacity:1;}
	50%  {opacity:0;}
	100% {opacity:1;}
}

/* MEDIA QUERIES */
@media (max-width: 800px)
{
	.clock
	{
		height:32px;
		width:32px;
	}

	.clock.expand
	{
		width:92px;
	}

	/* DIGITAL CLOCK */
	.clock .divDigitalClock
	{
		border-radius:16px;
	}

	.clock .divDigitalClock:before
	{
		font-size:16px;
		left:55px;
		top:3px;
	}

	.clock.expandLeft .divDigitalClock:before
	{
		left:27px;
	}

	.clock .divHourValue
	{
		font-size:16px;
		left:33px;
		top:5px;
		width:20px;
	}

	.clock.expandLeft .divHourValue
	{
		left:5px;
	}

	.clock .divMinuteValue
	{
		font-size:16px;
		left:63px;
		top:5px;
	}

	.clock.expandLeft .divMinuteValue
	{
		left:35px;
	}

	/* ANALOG CLOCK */
	.clock .divClockOuter
	{
		height:28px;
		width:28px;
	}

	.clock .divClockOuter:after
	{
		box-shadow:0px 2px 0px 0px #ffffff, 0px 24px 0px 0px #ffffff, 12px 12px 0px 0px #ffffff, -12px 12px 0px 0px #ffffff;
	}

	.clock:hover .divClockOuter:after, .clock:focus .divClockOuter:after
	{
		box-shadow:0px 2px 0px 0px #01eff9, 0px 24px 0px 0px #01eff9, 12px 12px 0px 0px #01eff9, -12px 12px 0px 0px #01eff9;
	}

	.clock .divHourHand
	{
		height:8px;
	}

	.clock .divMinuteHand
	{
		height:12px;
	}
}