/*@font-face {
  font-family: 'SourceSansPro-Regular';
  src: url('/images/SourceSansPro-Regular.ttf');
}

@font-face {
  font-family: 'SourceSansPro-Bold';
  src: url('/images/SourceSansPro-Bold.ttf');
}
*/
/*@media only screen and (orientation:landscape){
  body {
    height: 100vw;
    transform: rotate(90deg);
  }
}*/

body {
	background: black;
    font-family: 'Source Sans Pro', 'Arial', sans-serif;
    font-size: 12pt;
    margin: 0;
    padding: 0;
    color: white;
}
input {
	font-family: 'Source Sans Pro', 'Arial', sans-serif;
}
select {
	font-family: 'Source Sans Pro', 'Arial', sans-serif;
}
#homePageTabContent {
	background: url('/images/star-bg.jpg') repeat center center fixed;
}
.dottedLine {
	height: 4px;
	position: absolute;
	top: 23%;
	transform: rotate(-10deg);
}
#homeTitle {
	font-size: 19pt;
	text-align: center;
	margin-top: 8%;
	color: white;
	margin-bottom: 10pt;
}

#homeFooter {
	text-align: center;
	position: absolute;
	top: 76%;
	width: 100%;
	text-align: center;
	font-size: 11pt;
}
#homeFooter small {
	color: #CCC;
}

.mediaIcons {
	font-size: 10pt;
	margin: auto;
}

.mediaIcon {
	vertical-align: middle;
	display: inline-block;
	width: 20%;
	padding-left: 10px;
	padding-right: 10px;
	stroke: #efefef;
	fill: #efefef
}

#announcementHome {
	margin-top: 4pt;
	color: #f5cf59;
	font-size: 10pt;
	display: none;
}

@media (min-width: 500px) {
	#homeTitle {
		font-size: 24pt;
	}
	.mediaIcons {
		width: 35%;
	}
}

/* mobile keyboard open */
@media screen and (max-height: 460px) and (max-width: 500px) {
  #homeTitle {
    display: none;
  }
  #caption {
    display: none;
  }
  #homeFooter {
    display: none;
  }
}

a {
	color: #3880ff;
}
.bold {
	font-family: 'Source Sans Pro', 'Arial', sans-serif;
	font-weight: bold;
}
.bg-primary {
	background: #3880ff;
}
.bg-secondary {
	background: #3dc2ff;
}
.bg-tertiary {
	background: #5260ff;
}
.warn {
	color: #ffd534;
}

.icon {
	stroke: rgb(160,160,160);
}

.btn {
	box-sizing: border-box;
	border-radius: 5pt;
	display: inline-block;
	padding: 10pt 18pt 10pt 18pt;
	font-size: 10pt;
	border: 0px;
	color: white;
	text-transform: uppercase;
}
.btn-small {
	padding: 5pt 9pt 5pt 9pt;
}
.btn-xsmall {
	padding: 3pt 8pt 3pt 8pt;
	font-size: 9pt;
}

.container {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
}

.navHeader {
	display: flex;
	text-align: center;
	padding: 5pt;
	padding-top: 8pt;
	vertical-align: middle;
	line-height: 24pt;
}
.navHeader .navHeaderCol1 {
	flex-grow: 1;
}
.navHeader .navHeaderCol2 {
	flex-grow: 10;
}
.navHeader .navHeaderCol3 {
	flex-grow: 1;
}
.navHeader .icon {
	width: 24pt;
	fill: rgba(0,0,0,0);
}

#searchBox {
	background: rgba(80, 80, 80, 0.25);
	padding-top: 10pt;
	padding-bottom: 10pt;
	border-radius: 10pt;
	margin-top: 42pt;
	margin-bottom: 42pt;
}

#searchBox .tab {
	font-size: 11pt;
}
#searchBox button {
	margin-top: 3pt;
}

#caption {
	text-align: center;
}

.searchBoxPanel {
	margin-top: 6pt;
	margin-bottom: 3pt;
}
.searchBoxPanel select {
	background: rgba(80,80,80,0.25);
}
.searchBoxPanel option {
	background: rgba(80,80,80);
}
.searchBoxHeader {
	font-size: 14pt;
	margin: 0;
	padding-bottom: 5pt;
}
.inputElement {
	background: rgba(80,80,80,0.25);
	color: #fff;
	border-radius: 5pt;
	font-size: 1em;
	border: 1px solid #666;
}
.placesElement {
	padding: 0.7em 1.5em 0.7em 0.6em;
	margin-left: 3px;
}
#countrySelection {
	padding: 0.7em 1.5em 0.7em 0.6em;
	margin-left: 3px;
	width: 25%;
}
#countryBlock {
	width: 25%;
	display: inline;
	margin: 0px;
	padding-right: 7px;
}
#cityBlock {
	display: inline;
	width: 50%;
}
.container {
	z-index: 100;
}
#header {
	z-index: 1;
}
#homeFooter {
	z-index: 1;
}

@media (max-width: 1000px) {
	#countryBlock {
		width: 80%;
	}
	#countrySelection {
		width: 55%;
	}
	#cityBlock {
		margin-top: 7px;
		display: inline-block;
		width: 78%;
	}
	#citySelection {
		width: 60%;
	}
}

@media (min-width: 1000px) {
	#countryBlock {
		width: 25%;
	}
	#countrySelection {
		width: 25%;
	}
	#cityBlock {
		width: 60%;
		padding-left: 5px;
	}
	#citySelection {
		width: 35%;
	}
	#searchBoxByName {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

.coordElement {
	height: 30pt;
}
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.coordsRow {
	display: flex;
   flex-direction: row;
	vertical-align: middle;
	padding-bottom: 5pt;
	line-height: 30pt;
	width: 100%;
	text-align: center;
}
.coordsCol {
	text-align: center;
	margin-left: 5pt;
	margin-right: 5pt;
}
.coordsRow label {
	width: 20%;
	flex-grow: 1;
}
.coordsRow input {
	width: 20%;
	flex-grow: 3;
}
.coordsRow select {
	flex-grow: 1;
	width: 25%;
	padding: 5pt 5pt 5pt 10pt;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.tabs {
	display: flex;
	width: 100%;
}
.tab {
	display: inline-block;
	text-align: center;
	text-transform: uppercase;
	flex-grow: 1;
	line-height: 48px;
	cursor: pointer;
	color: rgb(160,160,160);
}
.selectedTab {
	border-bottom: 2px solid #3880ff;
	color: #3880ff;
}
.hiddenTab {
	display: none;
}
.tabPane {
	display: none;
}
.defaultTabPane {
	display: inherit;
}
.interactable {
	cursor: pointer;
}
.hover {
	color: #3880ff;
}
.hover .icon {
	fill: #3880ff;
	stroke: #3880ff;
}

#nav {
	margin: auto;
	width: 100%;
	position: fixed;
	bottom: 0pt;
	z-index: 10;
}
#nav .tabs {
	width: 100%;
	text-align: center;
	margin: auto;
	background-color: black;
	border-top: 1px solid #222;
}

#nav .tab {
	border: 0;
	text-transform: none;
	width: 33%;
	line-height: normal;
	padding-top: 5pt;
	padding-bottom: 7pt;
	fill: rgb(160,160,160);
}
#nav .icon {
	margin: 0;
	margin: 0;
	padding-bottom: 3pt;
	height: 16pt;
}
#nav .tabLabel {
	font-size: 10pt;
}
#nav .selectedTab {
	fill: #3880ff;
}
#contactTabLabel a {
	color: inherit;
	text-decoration: none;
}

.pageContent {
	height: 95%;
	top: 0;
	width: 100%;
	position: absolute;
	overflow: hidden;
	z-index: 2;
}

#animCanvas {
	position: absolute;
	top: 0px;
	z-index: -1;
}

#pressLink {
	text-decoration: none;
	color: white;
}

@media (min-width: 500px) {
	.pageContent {
		min-height: 500pt;
	}
	#searchBox {
		width: 45%;
		margin: auto;
	}
	#nav {
		top: 0pt;
		bottom: auto;
	}
	#nav .tabs {
		width: 35%;
		background-color: rgba(50,50,50,0.6);
		border-radius: 10pt;
	}
	.pageContent {
		height: 100%;
	}
	#mapContainer {
	    padding-top: 45pt;
	}
	.navHeader {
		margin-top: 6pt;
	}
}

/* portrait large screen */
@media (min-width: 500px) and (max-aspect-ratio: 4/3) {
	#searchBox {
		width: 60%;
		margin: auto;
	}
	#homeTitle {
		margin-top: 20%;
		font-size: 29pt;
	}
	#homeFooter {
		font-size: 15pt;
	}
}

/* -- results -- */
#resultsPageContent {
	width: 100%;
	height: 90%;
	position: absolute;
	overflow-y: scroll;
	background: url('/images/star-bg.jpg') repeat center center fixed;
}
#resultsParent {
	margin: auto;
	font-size: 11pt;
	background: rgba(30,30,30,0.7);
	min-height: 90%;
	position: relative;
}
#resultsTitle {
	text-align: center;
	width: 100%;
	font-size: 16pt;
	margin-top: 10pt;
	margin-bottom: 10pt;
}
#resultsHeader {
	position: relative;
}
#goodTimingsError {
	display: none;
	border: 0;
}
#noVisibilityReminderNudge {
	padding: 6pt;
	padding-left: 14pt;
	padding-right: 14pt;
	display: none;
	border: 1px solid #666;
	border-radius: 5pt;
}
#noVisibilityReminderNudge .icon {
	display: inline-block;
	line-height: 20pt;
	height: 20pt;
	padding: 4pt;
	fill: #ffc409;
	float: left;
}
#noVisibilityReminderNudge .email {
	background: rgb(80,80,80);
	border: 1px solid #666;
	border-radius: 2pt;
	padding: 2pt 5pt 2pt 5pt;
	margin: 4pt;
	font-size: 10pt;
	color: white;
}
#noVisibilityReminderNudge .email::placeholder {
	color: #DDD;
}

.timingHeader {
    font-size: 14pt;
    display: block;
    padding-left: 10pt;
    font-family: 'Source Sans Pro', 'Arial', sans-serif;
    font-weight: bold;
    padding-top: 6pt;
    padding-bottom: 6pt;
    background: #292929;
}
.remindMe {
	float: right;
}
#resultsMeta {
	padding: 8pt 14pt 8pt 14pt;
	font-size: 10pt;
	border-bottom: 1px solid #222;
}
.metaRow span {
	vertical-align: middle;
	display: inline-block;
	line-height: 17pt;
	padding-left: 3pt;
}
.metaRow .icon {
	fill: #ffC977;
	height: 12pt;
	width: 12pt;
	vertical-align: middle;
	display: inline-block;
	line-height: 17pt;
}
#resultsMessageBlock {
	padding-left: 14pt;
	padding-right: 14pt;
	border: 1px solid #444;
	border-radius: 5pt;
	padding-bottom: 2pt;
}
.resultsMessage {
	padding: 4pt 0pt 4pt 0pt;
	color: #DDD;
	font-size: 9pt;
	background: rgba(20,20,20,0.6);
}
#resultsServerMsg {
	color: #f5cf59;
}
.entryHeader {
	padding-bottom: 8pt;
	padding-top: 8pt;
}
.timingEntryBottom {
	border-color: #333;
	padding-bottom: 10pt;
}
.timingEntry {
	margin-bottom: 10pt;
	padding-left: 14pt;
	padding-right: 14pt;
	border-bottom: 1px solid #333;
}
.timingDetail {
	display: none;
}
#goodTimingsBlock .timingHeader {
	color: #498bff;
}
#avgTimingsBlock .timingHeader {
	color: #f5cf59;
}
#poorTimingsBlock .timingHeader {
	color: #eb445a;
}
.timingNote {
	color: #f5cf59;
	font-size: 10pt;
	padding-top: 5pt;
}

.newLabel {
    background: #f5a100;
    padding: 1pt 4pt 1pt 4pt;
    border-radius: 2pt;
    font-size: 9pt;
    color: #fff;
}
.oldLabel {
	background: #555;
    padding: 1pt 4pt 1pt 4pt;
    border-radius: 2pt;
    font-size: 9pt;
    color: #fff9e1;
}
.brightLabel {
    padding: 1pt 4pt 1pt 4pt;
    border-radius: 2pt;
    font-size: 9pt;
    background: #ff754b;
    color: #fdf0eb;
}
.dimLabel {
    background: #666;
    padding: 1pt 4pt 1pt 4pt;
    border-radius: 2pt;
    font-size: 9pt;
}
.resultsTopIcon {
    display: inline-block;
    font-size: 15pt;
    color: #ffC977;
    vertical-align: middle;
}
.resultsTopInfo {
    display: inline-block;
    vertical-align: middle;
}
#store {
    border: 1px solid #444;
    border-radius: 5pt;
    margin: 3pt;
    margin-bottom: 10pt;
    padding: 8pt;
    display: none;
}
.coffeeBtn img {
	padding-top: 3pt;
	padding-bottom: 3pt;
}
#shareMenu {
	list-style-type: none;
	border: 1px solid #292929;
	background: rgb(40, 40, 40);
	border-radius: 5pt;
	padding: 5pt;
	position: absolute;
	top: 33pt;
	right: 15pt;
	width: 80pt;
	text-align: left;
	margin: 0;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	display: none;
}
#shareMenu li {
	width: 100%;
	height: 15pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	line-height: 15pt;
}
#shareMenu a {
	color: white;
	text-decoration: none;
}
#shareMenu .icon {
	fill: rgb(160,160,160);
	line-height: 15pt;
	height: 12pt;
	vertical-align: middle;
	display: inline-block;
}
#shareMenu .strokedIcon {
	fill: rgba(0,0,0,0);
	stroke: rgb(160,160,160);
}
#shareMenu .twitterIcon {
	fill: #1DA1F2;
}
#shareMenu .fbIcon {
	fill: #4271d0;
}
#shareMenu span {
	line-height: 15pt;
	vertical-align: middle;
	font-size: 11pt;
	display: inline-block;
}

@media (min-width: 500px) {
	#resultsPageContent {
		height: 100%;
	}
	#resultsParent {
		width: 40%;
		margin: auto;
		padding-top: 40pt;
		border-radius: 0pt 0pt 10pt 10pt;
	}
	.resultsMessage{
		font-size: 10pt;
	}
}

/* portrait large screen */
@media (min-width: 500px) and (max-aspect-ratio: 4/3) {
	#resultsParent {
		width: 70%;
	}
}

/* -- map -- */
#livemap {
	position: absolute;
	background: black;
	width: 100%;
    height: 80%;
}
#mapTitle {
  font-size: 16pt;
  text-align: center;
  margin-top: 10pt;
  margin-bottom: 10pt;
}

@media (min-width: 500px) and (max-height: 500px) {
	#livemap {
		width: 80%;
		height: 60%;
		margin: auto;
	}
}

/* -- contact -- */
#contactPageContent {
	overflow-y: scroll;
}
#contactMsg {
	padding: 10pt;
	margin-top: 40pt;
	top: 0;
	transform: translateY(0);
	margin-bottom: 50pt;
	font-size: 11pt;
}
#faqHeader {
	font-size: 14pt;
}
#contactMsg .icon {
	fill: orange;
	stroke: orange;
	line-height: 30pt;
	text-align: center;
	width: 30pt;
	height: 30pt;
}

@media (min-width: 900px) {
	#contactMsg {
		width: 40%;
		text-align: center;
		left: 50%;
		transform: translateX(-50%);
	}
}

/* -- reviews -- */
#reviewsPage {
	overflow-y: scroll;
}
#reviewsContent {
	padding-left: 10pt;
	padding-right: 10pt;
}
#reviewsContent ul {
	padding-left: 15pt;
}
#reviewsContent li {
	color: #999;
}
#reviewsContent em {
	color: white;
	font-style: normal;
}

@media (min-width: 500px) {
	#reviewsContent {
		width: 40%;
		margin: auto;
	}
}

/* -- intro popup -- */
#introPopup {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
}
#popupBlanket {
    background: black;
    opacity: 0.8;
    width: 100%;
    height: 100%;
    position: absolute;
}
#introPopup .contents {
    z-index: 1001;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 30%;
    background: #191919;
    text-align: center;
    padding: 10pt;
    border-radius: 7pt;
}
#introPopup .message {
    padding-top: 5pt;
    padding-bottom: 12pt;
    padding-left: 5pt;
    padding-right: 5pt;
}

@media (max-width: 500px) {
	#introPopup .contents {
		width: 80%;
	}
}

/* -- ripple -- */

[ripple] {
 z-index: 100;
 position: relative;
 overflow: hidden;
}

[ripple] .ripple {
  position: absolute;
  background: #FFFFFF;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  -webkit-animation: ripple 1.3s;
  animation: ripple 1.3s;
}

@-webkit-keyframes 
ripple {  0% {
 -webkit-transform: scale(1);
 transform: scale(1);
 opacity: 0.2;
}
 100% {
 -webkit-transform: scale(40);
 transform: scale(40);
 opacity: 0;
}
}

@keyframes ripple {
	0% {
	 -webkit-transform: scale(1);
	 transform: scale(1);
	 opacity: 0.2;
	}
	 100% {
	 -webkit-transform: scale(40);
	 transform: scale(40);
	 opacity: 0;
	}
}