#messages {}
#messages ul {color:#444;}
#messages ul li {}
#m_success {color: #339900;}
#m_notification {color:#3366CC;}
#m_error {color:#FF0000;}

@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 400;
	src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(../fonts/SourceSansPro.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

* {box-sizing:border-box; -webkit-box-sizing:border-box; user-select:none; -webkit-user-select:none;}
html {text-size-adjust:100%; -webkit-text-size-adjust:100%;}
body {/*font-family:'Source Sans Pro', sans-serif;*/font-family:Consolas, monospace; font-smooth:always; -webkit-font-smoothing:antialiased; margin:0; background-color:#222; background:radial-gradient(ellipse farthest-corner at 10vw 95vw, #111 0%, #222 50%, #111 95%); overscroll-behavior-y:contain; overflow:hidden;}

a {text-decoration:none; color:#1CC1F7; cursor:pointer; transition:opacity 100ms;}
a:hover {opacity:0.75;}
.clear {clear:both;}

input, select {/*-webkit-appearance:none;*/border-radius:0;}
input[type="text"], input[type="tel"] {-webkit-user-select:auto; user-select:auto;}
input.sel_all {-webkit-user-select:initial !important; user-select:initial !important;}

#wrapper {position:relative; width:100vw; height:calc(100vh - 50px);}
#ad {position:absolute; bottom:-50px; z-index:99; left:0; right:0; margin:auto; width:320px; height:50px; background:grey; text-align:center; line-height:50px;}

#locating_page h2 {position:absolute; top:50%; transform:translateY(-50%); left:0; right:0; margin:auto; width:fit-content;}
#locating_page.page, #game_page.picked.page {animation:fade_in 1s, opaque_pulse 3s infinite;}

.button_press {animation:fade_in 1s;}
.button_press:active {opacity:0.8;}

.game_type {transform:translateX(100%); animation:fade_in 1s, game_select 500ms forwards ease-in-out, opaque_pulse 1.5s linear infinite;}
.game_type:nth-of-type(1) {animation-delay:100ms;}
.game_type:nth-of-type(2) {animation-delay:300ms;}
.game_type:nth-of-type(3) {animation-delay:500ms;}
.game_type:nth-of-type(4) {animation-delay:700ms;}
.game_type:nth-of-type(5) {animation-delay:900ms;}
@keyframes game_select {
	0% {transform:translateX(100%);}
	100% {transform:translateX(0%);}
}

#high_score h2 {text-align:center; margin-top:50px;}
#high_score_cont {border-top:1px solid #FFF; padding-top:25px; margin-top:25px; color:#777;}

.radio_button {background:#333; border-radius:50px; height:40px; line-height:40px; overflow:hidden; position:relative; width:110px; display:inline-block;}
.radio_input {-webkit-appearance:none; appearance:none;}
	.radio_input:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%;}
		.radio_input:checked::before {background:#FFF;}
	.radio_input:after {content:''; position:absolute; top:50%; left:10%; transform:translateY(-50%); width:15px; height:15px; border-radius:50px; border:4px solid #444;}
		.radio_input:checked::after {border:4px solid #777;}
.radio_label {color:#777; font-size:1.1rem; margin-left:10px; position:relative; pointer-events:none;}

#game-overlay {position:absolute; pointer-events:none; opacity:0; background-color:#222; width:100%; height:100%; -webkit-transition: opacity 200ms ease-out; z-index:99;}
#game-overlay.enabled {pointer-events:auto; opacity:0.9; z-index:11;}
#game-overlay.enabled ~ .top, #game-overlay.enabled ~ .bot {background:none; z-index:11; animation:fade_in 500ms;}

#next_angle {background-color:rgb(87, 193, 103);}
#next_angle .fa-location-arrow {color:#39843b; animation:twitch 1s ease-in-out infinite;}
@keyframes twitch {
	0% {transform:rotate(0);}
	50% {transform:rotate(10deg);}
	100% {transform:rotate(0);}
}

.page.show {display: block; -webkit-transform:translate3d(0, 0, 0);}
.page.show.show_bottom {transform: translateY(100%);}
.page.show.show_right {transform: translateX(100%);}
.page.show.show_left {transform: translateX(-100%);}
.page.show.shown {z-index: 1; transform: translateY(0) translateX(0); -webkit-transform:translate3d(0, 0, 0); background-color:#d09540; background-image:repeating-linear-gradient(90deg, transparent, transparent 35px, rgba(255,255,255,.1) 35px, rgba(255,255,255,.1) 70px);}
.page.show.shown.show_bottom .content {text-align:center; padding-left:25px; padding-right:25px;}
.page.show.shown.show_bottom.scrollable .content {}
.page.show.hiding {z-index: 0;}
.page.show.hiding.show_bottom {transform: translateY(100%);}
.page ul {list-style:none;}
.page ul li {margin:5px; background-color:rgba(41, 128, 185, 0.75); color:#FFF; padding:15px; width:100%; font-size:3vmax; border-radius:10px 0 0 10px;}

.page {color:#FFF; background-color:#3498DB; background:radial-gradient(ellipse farthest-corner at 10vw 95vw, #3498DB 0%, #029aff 50%, #3498DB 95%);}
.page input[type="text"], .page input[type="tel"], .page input[type="checkbox"], .page select {padding:10px;}
.page input[type="checkbox"] {padding:0; margin:0; background:#FF0000; background-color:#EEE; text-align:center; width:35px; height:35px; vertical-align:middle;}
.page input[type="checkbox"]:checked {background:#31D033;}

.page_button {position:relative; left:0; right:0; width:50%; margin:auto; height:3em; line-height:3em; text-align:center; color:#FFF; background-color:#40D0C0; min-width:max-content; padding:0 25px; margin-top:25px; border-radius:5px;}

#instructions {font-size: 14px; color: rgba(255, 255, 255, 0.5); animation:fade_in 1s;}

#modal-overlay {position:absolute; pointer-events:none; opacity:0; background-color:#222; width:100%; height:100%; -webkit-transition: opacity 200ms ease-out; z-index:999;}
#modal-overlay.enabled {pointer-events:auto; opacity:0.4;}

#modal {display:none; position:absolute; z-index:1000; margin:auto; width:250px; height:175px; text-align:center; top:0; right:0; bottom:0; left:0; background-color:#FFF;}
#modal h1 {margin:10px 0 0 0; padding:0; text-align:center; font-size:20px; font-weight:normal;}
#modal p {margin:10px;}
#modal a {position:absolute; bottom:0; color:#FFF; width:50%; height:50px; line-height:50px; text-align:center; background-color:#3592dd; left:0;}
#modal a.fullwidth {width:100%;}
#modal a:last-child {background-color:#DB2E2E; left:initial; right:0;}
#modal input[type="text"] {border:none; background-color:#EFEFEF; width:100%; padding:10px; font-size:18px;}
#modal #mbutton1:active, #modal #mbutton2:active {opacity:0.9;}

#modal.loading {width:175px; height:50px; line-height:50px;}
#modal.loading > div {display: none;}
#modal.loading .fa {font-size:initial; position:static; color:#999;}
#modal.loading h1 {margin:0;}
#modal.loading p, #modal.loading a {display:none !important;}


#nav-overlay {position:absolute; pointer-events:none; opacity:0; background-color:#222; width:100%; height:100%; -webkit-transition: opacity 200ms ease-out; z-index:99;}
#nav-overlay.enabled {pointer-events:auto; opacity:0.7;}

#navbutton {position:absolute; top:0; right:0; z-index:100; width:65px; height:65px; line-height:65px; text-align:center; color:#cef1af; background-color:#222; border-radius:0 0 50% 50%;}
	#navbutton::before {content:'\21A2GeoPointr\21A3'; position:absolute; left:calc(-100vw + 65px); z-index:-1; width:100vw; font-size:24px; color:#cef1af; background-color:#222; line-height:34px;}
	#navbutton .fa-bars {font-size:24px;}
#nav {position:fixed; z-index:100; top:0; right:0; width:275px; background-color:#EFEFEF; overflow:auto; -webkit-transition: opacity 200ms ease-out; opacity:0; pointer-events:none;}
#nav.open {opacity:1; pointer-events:all;}
#nav ul {list-style:none; margin:0; padding:0;}
#nav ul li {line-height:45px; font-size:18px; border-bottom:solid 1px #E7E7E7;}
#nav ul li:first-child {color:#444; text-align:center; line-height:35px;}
#nav ul li a {color:#444; background-color:#FFF; text-decoration:none; padding:0 15px; display:block;}


.top {position:absolute; top:0; z-index:6; width:100%; height:50%; color:#FFF; font-size:22pt; background-color:#3498DB; background:radial-gradient(ellipse farthest-corner at 10vw 95vw, #3498DB 0%, #0d8ce0 50%, #3498DB 95%);}

.vcenter {position: relative; top: 45%; transform: translateY(-50%); top: calc(50% - 40px);}

.center {position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; text-align:center; width:100%; height:50%;}

.bot {position:absolute; bottom:0; z-index:6; width:100%; height:50%; background-color:#2980B9; background:radial-gradient(ellipse farthest-corner at 10vw 95vw, #2980B9 0%, #38739a 50%, #2980B9 95%);}
.bot .button {position:absolute; bottom:0; width:100%; padding:25px 0; background-color:#40D0C0; color:#FFF; text-align:center; font-size:2em;}

#location_name {margin:0 20px;}

#learn_more {font-size:14px; margin:0 20px; color:#AAA; animation:fade_in 1s; will-change:opacity;}

#round_score {position:absolute; top:50%; transform:translateY(-50%); text-align:center; width:fit-content; width:100%; font-size:1.6em; animation:fade_in 1s, zoom_in 1s; transition:opacity 1s ease-out, transform 1s ease-out; transform:scale(1.5); transform-origin:bottom;}
#round_score .fa-star-o {color:#efde16; animation:spin 5s linear infinite;}
@keyframes zoom_in {
	0% {transform:scale(1);}
	100% {transform:scale(1.5);}
}

.pointerbg {position:absolute; width:200px; height:200px; z-index:10; background-color:#2C3E50; border-radius:100px 35px 100px 100px; -webkit-border-radius:100px 35px 100px 100px; opacity:0.9; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); background:radial-gradient(ellipse farthest-corner at 10vw 95vw, #2C3E50 0%, #364a5f 50%, #2C3E50 95%);}
.pointerbg .north {transform:rotate(45deg); -webkit-transform:rotate(45deg); height:100%;}

.compass {z-index:15; width:150px; height:150px; background-color:#E74C3C; color:#FFF; border-radius:150px; -webkit-border-radius:150px; opacity:0.9;}
.north {font-size:10pt; color:#444; position:absolute; top:-20px; color:whiteSmoke; width:100%; font-weight:bold; display:none;}

.compass.easy_mode{}
.compass.easy_mode .north{display:block;}

.compass span {position:absolute; right:0; left:0; top:0; bottom:0; margin:auto; display:block; width:1px; height:90%; background-color:#343434;}
.compass span:nth-of-type(1) {transform: rotate(22.5deg); -webkit-transform: rotate(22.5deg); height:83%;}
.compass span:nth-of-type(2) {transform: rotate(45deg); -webkit-transform: rotate(45deg);}
.compass span:nth-of-type(3) {transform: rotate(67.5deg); -webkit-transform: rotate(67.5deg); height:83%;}
.compass span:nth-of-type(4) {transform: rotate(90deg); -webkit-transform: rotate(90deg);}
.compass span:nth-of-type(5) {transform: rotate(112.5deg); -webkit-transform: rotate(112.5deg); height:83%;}
.compass span:nth-of-type(6) {transform: rotate(135deg); -webkit-transform: rotate(135deg);}
.compass span:nth-of-type(7) {transform: rotate(157.5deg); -webkit-transform: rotate(157.5deg); height:83%;}

.pointerarrow {z-index:20; width:100px; height:100px; color:#444; background-color:#FFF; font-size:46pt; border-radius:50px; -webkit-border-radius:50px;}
.pointerarrow .fa {margin-top:20px;}

/*.location_pointer {width:2px; z-index:10; pointer-events:none; position:fixed; display:none;}
	.location_pointer .location_line {position:absolute; height:125%; width:2px; top:50%; background-color:#EEE;}
	.location_pointer span {position:absolute; top:60%; left:-135px; width:250px; display:inline-block; text-align:right; color:#FFF; transform:rotate(-90deg); -webkit-transform:rotate(-90deg);}
.location_pointer.fixed {background-color:#333; bottom:50%;}
	.location_pointer.fixed .location_line {background-color:#333; top:initial; bottom:50%;}
	.location_pointer.fixed span {color:#222; bottom:-10%; top:initial;}*/

#location_pointer.line {display:none; position:absolute; top:50%; left:50%; z-index:99; height:1px; min-width:100%; width:max-content; border-bottom:1px solid #FFF; color:#FFF; padding-left:1px; transform-origin:left center; -webkit-transform-origin:left center; animation:fade_in 1s;}
#location_pointer.line > span {position:relative; top:-9px; font-size:16px; background:#222; padding:1px 5px; letter-spacing:1px;}
#location_pointer.line:before {content:''; background:#222; position:absolute; width:40px; height:40px; border-radius:50%; top:-20px; left:-20px;}
#location_pointer.flip #correct_dir_loc {transform: rotate(180deg); display: inline-block;}

#map-canvas, #earth_div {position:absolute; top:0; width:100%; height:80%; height:calc(100% - 75px); overflow:hidden;}
.map_results_bottom {position:absolute; bottom:0; width:100%; background-color:#3498DB;}

.map_results_bottom .actions {display:flex;}
.map_results_bottom .view_highscore, .map_results_bottom .submit_highscore, .map_results_bottom .map_done {display:grid; align-items:center; height:75px; width:34%; text-align:center;}
.map_results_bottom .view_highscore {background:#333;}
.map_results_bottom .submit_highscore {background:#444;}
.map_results_bottom .map_done {background:#555;}

.map_results_bottom .map_score {position:absolute; z-index:98; bottom:75px; width:100%; padding:0 10px; background-color:rgba(41, 128, 185, 0.75);}
.map_results_bottom .map_scores {border-bottom:1px dotted; width:fit-content;}
.map_results_bottom .map_scores span {font-size:1.4em;}
.map_results_bottom .map_scores_total {position:absolute; top:-35px; left:0; width:100vw; line-height:35px; text-align:center; font-size:1.6em; background:rgba(0, 185, 0, 0.5);}

#output {position:absolute; bottom:95px; left:5px; z-index:100; font-size:11px;}

.page{
	display:none;
	animation:fade_in 1s; transition:opacity 1s ease-out;
	width:100%;
	height:100%;
	overflow: hidden;
	overflow-y:auto;
}

@keyframes fade_in {
	0% {opacity: 0;display: none;}
	99% {opacity: 1;}
	100% {opacity: 1;display: block;}
}

@keyframes opaque_pulse {
	from, to { opacity: 1 }
	50% { opacity: 0.8 }
}

@keyframes spin {
	from {transform:rotate(0deg);}
	to {transform:rotate(359deg);}
}

/* Site styles */
.wrap {position:absolute; width:100%; height:100%; overflow:auto; background-color:#222; background:radial-gradient(ellipse farthest-corner at 10vw 95vw, #111 0%, #222 50%, #111 95%);}
.wrap_center {position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); margin:auto; color:#FFF; text-align:center; width:100%; width:fit-content;}
.logo {font-size:5vmax; color:#cef1af;}
	.logo img {width:15vmax; animation:twitch 2s ease-in-out infinite;}
	.logo span {display:inline-block; animation:twitch 2s ease-in-out infinite;}
.descr {font-size:2vmax; color:#AAA; margin-top:10px;}
	.descr em {color:#DDD;}
.play_button {display:inline-block; font-size:4vmax; background:#2794dd; border-radius:5px; margin-top:50px; padding:20px 75px; color:#FFF; animation: opaque_pulse 2s infinite;}
.not-mobile {font-size:2vmax; background:#763434; padding:20px; margin-top:50px; border-radius:10px;}

/* Globe bg */
.globe {position:fixed; z-index:-1; pointer-events:none; left:-10vw; right:0; top:50%; transform:translateY(-50%) rotate(23.5deg); opacity:0.25; margin:auto; width:175vw; height:175vw; border-radius:50%; background:#184b6c;/*border:2px solid #999;*/ overflow:hidden; box-shadow: inset -50px -50px 100px rgba(0,0,0,0.95);}
.mid, .globe::before, .globe::after {content: ''; display:block; height:2px; width:100%; overflow:hidden; background:#777; top:50%; position:absolute;}
.globe::before {top:20%;}
.globe::after {top:80%;}
.sect1, .sect2, .sect3, .sect4 {position:absolute; top:-2px; left:-2px; right:-2px; bottom:-2px; border:2px solid #777; border-radius:50%; clip-path:inset(0% 0% 0% 50%); animation: sect 4s infinite ease-in-out;}
.sect2 {animation-delay:-1s;}
.sect3 {animation-delay:-2s;}
.sect4 {animation-delay:-3s;}
@keyframes sect {
	0% {transform: scaleX(-1);}
	100% {transform: scaleX(1);}
}

/* Launched as installed PWA */
@media all and (display-mode: standalone) {
	body {
		background-color:yellow;
	}
}

/* iOS only */

/* Android only */

/* Windows only */
/*body#win*/

/* Non-phonegap builds only */

/* Smaller/Mobile devices Landscape (iPhone <= 6+ etc.) */