* { margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
html { width: 100%; height: 100%; overflow: hidden; }
html *, html *:before, html *:after { box-sizing: inherit; }
body { width: 100%; height: 450px; box-sizing: border-box; font-size: 16px; font-family: 'PT Sans', sans-serif; color: #404040; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none !important; }
a { -webkit-user-select: none !important; }
.hidden { display: none !important; opacity: 0; animation: none !important; transition: none !important; }
.clock-item { width: 18%; float: left;  margin-right: 2%; position: relative;;}
.countdown-container { position: relative; width: 100%; background-image: url('../img/Arabella-Ng.jpg'); background-position: 50% 70%; background-repeat: no-repeat; background-size: 100%; width: 100%; max-width: 700px; padding-top: 30px; height: 150px;;;}
.countdown-container:before { content: ''; position: absolute; top: 0; left: 0; background-color: rgb(0, 101, 202); background-image: url(../img/pattern.png); background-position: center; background-repeat: repeat; width: 100%; height: 100%; opacity: .3;; }
.clock.row { margin: 0 20px; }
.clock-item .inner { height: 0px; padding-bottom: 100%; position: relative;	 width: 100%;}
.clock-canvas { background-color: rgba(255, 255, 255, .1); border-radius: 50%; height: 0px; padding-bottom: 100%;}
#title  {  -webkit-box-shadow:inset 0px 0px 0px 4px #1a87bd; -moz-box-shadow:inset 0px 0px 0px 4px #1a87bd; box-shadow:inset 0px 0px 0px 4px #1a87bd; border-radius: 50%;}
.text { color: #fff; font-weight: 700; position: absolute; text-align: center; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1); width: 100%; top: 20px;;}
.text .val {font-size: 1em;font-size: 1.5em; line-height: 1;; }
.text .type-time { font-size: 1em; }
.text-title { padding: 0 10px; }

@media screen and  (max-width: 480px) {
 .text .val { font-size: 1.2em }
 .text .type-time { font-size: .8em; }
 .text { top: 10px }
}