html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; }
*:not(input):not(textarea) { -webkit-touch-callout: none; -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -ms-user-select: none; user-select: none; }
body { font: 14px oxygen; text-align: center; overflow: hidden; color: #FFF; -ms-touch-action: none; touch-action: none; }
a { color: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
p { font-size: 1em; }
#box { position: relative; background-color: #436DA7; background-image: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .15) 70%, rgba(0, 0, 0, .2) 100%); transition: background-color .4s ease; }
.grid-frame { z-index: 100; }
.logo { font-family: Pacifico; font-size: 2em; color: rgba(255, 255, 255, .7); margin-top: 1.5em; }
.ad .grid-content { margin-bottom: 1.5em; }
.ad .banner { width: 320px; height: 100px; background: rgba(255, 255, 255, .1); margin: 0 auto; }
.toggle { z-index: 150; position: absolute; color: rgba(255, 255, 255, .8); font-size: 1.5em; margin-top: 2.6em; margin-left: 1.8em; }
.shine { z-index: 75; position: absolute; display: block; width: 0; height: 0; border-top: 20em solid rgba(255, 255, 255, .04); border-right: 20em solid transparent; }

/* NOTICE */
.grid-block.icon .fa { font-size: 10em; margin-top: .4em; opacity: .9; }
.grid-block.notice p { margin-top: 2em; padding: 0 2em; }
.grid-block.notice p.note { font-size: .85em; color: rgba(255, 255, 255, .6); }
.grid-block.notice p.note .fa { margin-right: .5em; opacity: .5; }

/* INFO */
.grid-block.info h1 { font-weight: 500; margin-top: 1.5em; margin-bottom: .3em; padding: 0 2em; text-transform: uppercase; font-size: 1.25em; letter-spacing: -.05em; opacity: .7; }
.grid-block.info p { font-weight: 300; padding: 0 2em; }
.grid-block.info p.note { font-size: .85em; color: rgba(255, 255, 255, .6); margin-top: -.8em; }
.grid-block.info p.note .fa { margin-right: .5em; opacity: .5; }
.grid-block.info p a { text-decoration: underline; }
.grid-block.info p a:hover { text-decoration: none; }

/* RESULT */
.city, .street, .date, .type { text-transform: uppercase; }
.street, .type, .date { font-weight: 500; margin-bottom: 1em; color: rgba(255, 255, 255, .6); font-size: .9em; }
.city { font-weight: 300; font-size: 1.7em; color: rgba(255, 255, 255, .9); margin-top: .5em; }
.street { margin-top: .7em; }
.street .fa { margin-right: .5em; margin-left: 1em; opacity: .5; }
.street .fa:first-child { margin-left: 0; }
.rating { font-size: 10em; color: opacity: .9; letter-spacing: -.05em; margin-top: .1em; }
.rating .unit { font-size: .15em; letter-spacing: normal; opacity: .35; }
.value { font-size: 2.5em; opacity: .9; margin-bottom: 1em; letter-spacing: -.02em; }
.decimal { opacity: .7; font-size: .8em; }
.unit { font-size: .4em; opacity: .5; margin-left: .2em; }
.unit sub { opacity: .8; }

/* CLOUDS */
#sky { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .5; z-index: 50; overflow: hidden; padding-top: 11em; }
.cloud { width: 200px; height: 60px; background-color: #7FA0CC; border-radius: 200px; position: relative; margin-top: -2em; animation-delay: -12s !important; transition: background-color .4s ease; }
.cloud:before, .cloud:after { content: ''; position: absolute; background-color: #7FA0CC; width: 100px; height: 80px; position: absolute; top: -15px; left: 10px; border-radius: 100px; transform: rotate(30deg); transition: background-color .4s ease; }
.cloud:after { width: 120px; height: 120px; top: -55px; left: auto; right: 15px; }
.c1 { left: 10%; transform: scale(.64); opacity: .64; animation: moveclouds 25s linear infinite; }
.c2 { left: 80%; transform: scale(.56); opacity: .56; animation: moveclouds 26s linear infinite; }
.c3 { left: 40%; transform: scale(.48); opacity: .48; animation: moveclouds 28s linear infinite; }
.c4 { left: 60%; transform: scale(.41); opacity: .41; animation: moveclouds 31s linear infinite; }
.c5 { left: 20%; transform: scale(.35); opacity: .35; animation: moveclouds 35s linear infinite; }
.c6 { left: 50%; transform: scale(.30); opacity: .30; animation: moveclouds 40s linear infinite; }
.c7 { left: 70%; transform: scale(.26); opacity: .26; animation: moveclouds 46s linear infinite; }
.c8 { left: 30%; transform: scale(.23); opacity: .23; animation: moveclouds 53s linear infinite; }
.c9 { left: 90%; transform: scale(.21); opacity: .21; animation: moveclouds 61s linear infinite; }
.c10 { left: 100%; transform: scale(.2); opacity: .2; animation: moveclouds 70s linear infinite; }
@keyframes moveclouds { 0% { margin-left: 100%; } 100% { margin-left: -150%; }}

/* ICON */
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } }
.fa.animate { animation: spin 10s linear infinite; }

/* PROGRESS */
.spinner { margin: 5.5em auto 1em auto; width: 6.5em; height: 6.5em; position: relative; text-align: center; animation: spin-rotate 2.0s infinite linear; }
.spin-1, .spin-2 { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: #121E2D; border-radius: 100%; animation: spin-bounce 2.0s infinite ease-in-out; }
.spin-2 { top: auto; bottom: 0; animation-delay: -1.0s; }
@keyframes spin-rotate { 100% { transform: rotate(360deg); }}
@keyframes spin-bounce { 0%, 100% { transform: scale(0.0); } 50% { transform: scale(1.0); }}

/* SHARED */
p, .fa, .logo, .city, .street, .date, .type { text-shadow: 1px 1px 1px rgba(0, 0, 0, .3); }
.contrast { color: #FFFFFF; text-shadow: none; transition: color .4s ease; }
.contrast * { text-shadow: none; }