* {
	font-family: "Roboto Mono","Noto Sans Symbol","Noto Sans JP Kana","Noto Sans KR Hangeul","Noto Sans CJK Hanja",'NanumBarunGothic','나눔바른고딕','NanumGothic','나눔고딕','Malgun Gothic','맑은 고딕',sans-serif;
	font-weight: 300;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #fff;
	transform-origin: 50% 50%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	margin: 0;
	padding: 0;
	min-width: 100%;
	width: 100%;
	overflow: hidden;
}

body {
	background: #000;
	margin: 0;
	padding: 0;
	min-width: 100%;
	width: 100%;
	overflow: hidden;
}

.visible-android {
  display:none;
}

.visible-ios {
  display:none;
}

.on-device .visible-android, .on-device .visible-android {
  display:inherit;
}

.device-ios .visible-android {
  display:none !important;
}

.device-ios .hidden-ios {
  display:none !important;
}

.device-android .hidden-android {
  display:none !important;
}

.device-android .visible-ios {
  display:none !important;
}

.start {
	animation: anim_start 5s;
}

.blink_0 {
	animation: anim_blink 0.4s;
	animation-fill-mode: backwards;
}

.blink_100 {
	animation: anim_blink 0.4s;
	animation-fill-mode: backwards;
	animation-delay: 0.1s;
}

.blink_200 {
	animation: anim_blink 0.4s;
	animation-fill-mode: backwards;
	animation-delay: 0.2s;
}

.blink_300 {
	animation: anim_blink 0.4s;
	animation-fill-mode: backwards;
	animation-delay: 0.3s;
}

.blink_400 {
	animation: anim_blink 0.4s;
	animation-fill-mode: backwards;
	animation-delay: 0.4s;
}

.blink_500 {
	animation: anim_blink 0.4s;
	animation-fill-mode: backwards;
	animation-delay: 0.5s;
}

.blink_1000 {
	animation: anim_blink 0.4s;
	animation-fill-mode: backwards;
	animation-delay: 1s;
}

.blink_1500 {
	animation: anim_blink 0.4s;
	animation-fill-mode: backwards;
	animation-delay: 1.5s;
}

.blink_1600 {
	animation: anim_blink 0.4s;
	animation-fill-mode: backwards;
	animation-delay: 1.6s;
}

.blink_1700 {
	animation: anim_blink 0.4s;
	animation-fill-mode: backwards;
	animation-delay: 1.7s;
}

#perspective {
	perspective: 24vmin;
}

.center {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.square {
	width: 100vmin;
	height: 100vmin;
	margin: auto;
	vertical-align: middle;
}

.large_square {
	width: 150vmin;
	height: 150vmin;
	margin: auto;
	vertical-align: middle;
}

.digit, .colon {
	display: inline-block;
	font-size: 6vmin;
	width: 6vmin;
	height: 8vmin;
	text-align: center;
	font-weight: 100;
}

.colon {
	animation: anim_glowing 2s infinite;
}

.indicator, .indicator_big {
	display: inline-block;
	background: #fff;
	transition: all 0.2s ease;
}

.hour_indicator, .hour_indicator_big {
	display: inline-block;
	transition: all 0.2s ease;
	font-family: "Playfair Display SC", serif;
}

.hour_indicator {
	font-weight: 400;
	font-size: 6vmin;
}

.hour_indicator_big {
	font-weight: 700;
	font-size: 8vmin;
}

.indicator {
	width: 1px;
	height: 6vmin;
}

.indicator_big {
	width: 2px;
	height: 8vmin;
}

.on {
	opacity: 1.0;
}

.off {
	opacity: 0.2;
}

.digit_active {
	animation: anim_digit 0.5s;
}

.container_seconds_indicator {
	width: 100%;
	height: 100%;
	text-align: center;
}

.container_hours_indicator {
	width: 100%;
	height: 100%;
	text-align: center;
}

.minutes {
	stroke: #fff;
	stroke-width: 0.5;
	fill: rgba(0, 0, 0, 0);
	transition: all 0.2s ease;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: load 60s;
	animation-play-state: paused;
}

.minute_animation {
	animation: anim_minute 5s;
}

.second_animation_cw {
	animation: anim_second_cw 0.5s;
}

.second_animation_cw_left {
	animation: anim_second_cw_left 0.5s;
}

.second_animation_ccw {
	animation: anim_second_ccw 0.5s;
}

.second_arc {
	animation: anim_second_arc 2s;
}

.second_arc_ccw {
	animation: anim_second_arc_ccw 2s;
}

#bottom {
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 0;
	padding-left: 2vmin;
	padding-right: 2vmin;
	padding-bottom: 2vmin;
	font-size: 1.8vmin;
	font-weight: 500;
}

#copyright {
	font-size: 1.2vmin;
	font-weight: 300;
}

#container_text {
	display: flex;
	justify-content: center;
	align-items: center;
}

#container_date {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2vmin;
	letter-spacing: 1vmin;
}

#container_hours {
	display: flex;
	justify-content: center;
	align-items: center;
}

#container_second_animation {
	display: flex;
	justify-content: center;
	align-items: center;
}

#container_date_graph {
	display: flex;
	justify-content: center;
	align-items: center;
}

#date_graph_background {
	height: 0.5vmin;
	width: 20vmin;
	background: rgba(255, 255, 255, 0.2);
}

#date_graph {
	height: 100%;
	background: #FFF;
}

#container_digits {
	background: rgba(255, 119, 132, 0.7);
	background-blend-mode: multiply;
}

#container_seconds {
	height: 80%;
	width: 80%;
}

#container_seconds_2 {
	height: 80%;
	width: 80%;
}

#container_minutes1, #container_minutes2 {
	height: 100%;
	width: 100%;
}

#arrow_hours {
	height: 100vmin;
	width: 100vmin;
	margin: auto;
}

#seconds_hud {
	height: 108vmin;
	width: 108vmin;
	margin: auto;
}

@keyframes anim_blink {
	0% {
		opacity: 0;
	}
	
	25% {
		opacity: 0;
	}
	
	25% {
		opacity: 1;
	}
	
	50% {
		opacity: 1;
	}
	
	50% {
		opacity: 0;
	}
	
	75% {
		opacity: 0;
	}
	
	75% {
		opacity: 1;
	}
	
	100% {
		opacity: 1;
	}
}

@keyframes anim_glowing {
	0% {
		color: rgba(255, 255, 255, 0.5);
	}
	
	50% {
		color: rgba(255, 255, 255, 1);
	}
	
	100% {
		color: rgba(255, 255, 255, 0.5);
	}
}

@keyframes anim_start {
	from {
		transform: rotateX(20deg) rotateZ(90deg);
		perspective: 2vmin;
	}
  
	to {
		transform: rotateX(0deg) rotateZ(0deg);
		perspective: 24vmin;
	}
}

@keyframes anim_minute {
	from {
		perspective: 24vmin;
	}
	
	10% {
		perspective: 16vmin;
	}
  
	to {
		perspective: 24vmin;
	}
}

@keyframes anim_second_cw {
	from {
		transform: rotateZ(0deg);
	}
	
	10% {
		transform: rotateZ(1deg);
	}
  
	to {
		transform: rotateZ(0deg);
	}
}

@keyframes anim_second_cw_left {
	from {
		transform: rotateZ(180deg);
	}
	
	10% {
		transform: rotateZ(181deg);
	}
  
	to {
		transform: rotateZ(180deg);
	}
}

@keyframes anim_second_arc {
	0% {
		transform: rotateZ(10deg);
	}
	
	10% {
		transform: rotateZ(0deg);
	}
	
	30% {
		transform: rotateZ(0deg);
	}
	
	40% {
		transform: rotateZ(-10deg);
	}
	
	50% {
		transform: rotateZ(100deg);
	}
	
	60% {
		transform: rotateZ(90deg);
	}
  
	80% {
		transform: rotateZ(90deg);
	}
	
	90% {
		transform: rotateZ(80deg);
	}
	
	100% {
		transform: rotateZ(190deg);
	}
}

@keyframes anim_second_arc_ccw {
	0% {
		transform: rotateZ(-10deg);
	}
	
	10% {
		transform: rotateZ(0deg);
	}
	
	30% {
		transform: rotateZ(0deg);
	}
	
	40% {
		transform: rotateZ(10deg);
	}
	
	50% {
		transform: rotateZ(-100deg);
	}
	
	60% {
		transform: rotateZ(-90deg);
	}
  
	80% {
		transform: rotateZ(-90deg);
	}
	
	90% {
		transform: rotateZ(-80deg);
	}
	
	100% {
		transform: rotateZ(-190deg);
	}
}

@keyframes anim_second_ccw {
	from {
		transform: rotateZ(0deg);
	}
	
	10% {
		transform: rotateZ(-1deg);
	}
  
	to {
		transform: rotateZ(0deg);
	}
}

@keyframes anim_digit {
	from {
		text-shadow: 0 0 3vmin #FFFFFF;
	}
  
	to {
		text-shadow: 0 0 0 #FFFFFF;
	}
}

@keyframes load {
	to {
		stroke-dashoffset:0
	}
}