@charset "utf-8";

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* BASIC CONSCIOUS RESETs +++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* make HTML5 elements block-level for consistent styling */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1 }

/* Basic Table styling */
table { border-collapse: collapse; border-spacing: 0px; }
table button, table input { *overflow: auto } /* for IE9 overflow bug */
td { vertical-align: top; }

/* Basic Form styling */
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }

/* Basic List styling */
ul, ol { margin: 0 0 1.5385em 0; padding: 0; }
/* ul ul, ol ol { margin: 0; padding: 0 0 0 2em; } */
dd { margin: 0 0 0 3em; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0 }
li { line-height: 1.5385em; } /* 20 */

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; font-size: 0.8462em; /* 11/13 */ line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em }

* {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* ********************************************************** */
/* Vistis styles */

html {
  height: 100%;
  font-size: 100%;
}

body {
  color: #036;
  background: #FFF; /*  #FCFCFC; */
  /* font-family: Georgia,Times,"Times New Roman",serif; */
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
  font-size: 16px;
  line-height: 1.5em;
  margin: 0px;
  padding: 0px;
  height: 100%;
  overflow: hidden;
}

*,
*::after,
*::before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

::-moz-selection { background: transparent; /* #b3d4fc; */ text-shadow: none; }
::selection { background: transparent; /* #b3d4fc; */ text-shadow: none; }


p {
	font-size: 14px;
	line-height: 1.35em;
	margin: 0px 0px 1.35em 0px;
	font-weight: bold;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(0,51,102,0.8); /* #003366; */
}
a:active, a:focus { outline: 0; } /* we need something? */
a:hover { text-decoration: none; outline: none; }

/* LOADER css - styling from codepen: https://codepen.io/Elbone/pen/sezjI */
/* Animation */
@-webkit-keyframes loading {
  to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes loading {
	to { -moz-transform: rotate(360deg); }
}
@-ms-keyframes loading {
	to { -ms-transform: rotate(360deg); }
}
@keyframes loading {
	to { transform: rotate(360deg); }
}

/* Loader */
#loading {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -20px 0px 0px -20px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: transparent;
	border-top: 5px solid #003366; /* #fff; */
	border-right: 5px solid #003366; /* #fff; */
	border-bottom: 5px solid #777;
	border-left: 5px solid #777;
	-webkit-animation: loading 1.2s infinite linear;
	-moz-animation: loading 1.2s infinite linear;
	-ms-animation: loading 1.2s infinite linear;
	animation: loading 1.2s infinite linear;
}

/* message Wrapper for mobile detection messages and such */
.messageWrapper {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  /* border: 6px solid #003366; */
  z-index: 25; /* 1; /* 10000; /* how much is necess? */
  border: 6px solid #003366;
}
.messageWrapper.hide {
  display: none;
}
#message {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: white; /* IMPORTANT, keep it! */ /* transparent; /* white; */
  font-size: 48px;
  line-height: 1.075em;
  font-weight: 700;
  color: #003366;
  text-align: center;
  padding: 0px 0.5em;
}

/* VISTIs styles */

/* Vistis Corner and DD */
.Corner {
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 30; /* 10; */
	width: 48px;
	height: 48px;
	background: white; /* transparent; */
}

.fixedBox {
  display: block;
  width: auto; /* 15vw; */
  position: fixed;
  /* padding: 50px 0 0 6px; */
  z-index: 30;
}

/*
 * This stylesheet must ensure consistency of log and log placement
 * across DD website and game site
 */

.LogoWrapper {
  display: block;
  float: left;
  width: auto; /* 100%; */
  margin: 0px 0px 0px 0px;
  position: relative;
  top: 0px;
  left: 0px; /* 1.3em; */
}
/* logo below has been taken from main css */
a#logo {
  display: block;
  float: left;
  padding: 16px;
  color: #003366;
  /* background: pink; */
}
a#logo svg {
  display: block; /* important!! */
}
a#logo:after {
	content: "";
	display: table;
	clear: both;
}
a:hover#logo {
  cursor: pointer;
}



/* ul menu */
ul.menu {
	padding: 0px;
	margin: 0px;
	position: absolute;
  top: 4em;
  left: 0px;
}
ul.menu li {
	list-style-image: none;
  list-style-type: none;
  margin: 0px;
	padding: 0px;
	display: block;
	float: left;
	width: 100%;
	line-height: 1.5em;
}
ul.menu li a {
	display: block;
  float: left;
  font-family: 'Merriweather', serif;
  padding: 0.15em 2em 0.175em 0px;
  font-size: 13px;
  letter-spacing: 1px;
  color: #003366;
  background: transparent;
  text-decoration: none;
}
ul.menu a:hover {
	text-decoration: none;
	font-weight: 700;
}
ul.menu li a.active-trail {
    font-weight: 700;
}
.sentences {
	position: absolute;
	left: 0px;
	top: 35%;
	text-align: center;
	width: 100%;
	height: auto; /* 3em; /* auto; */
}
.sentences a {
	color: #003366;
}
.sentences p {
	margin-bottom: 0px;
	text-transform: none;
	/* font-family: serif; /* 'Merriweather', serif; */
	/* font-family: sans-serif; */
	font-weight: 400;
	letter-spacing: 0.065em;
}
.sentences p .dd {
	/* margin-bottom: 0px;
	text-transform: none;
	font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
	font-weight: 400;
	letter-spacing: 0.065em; */
}
.sentences p.GameRules {
	color: red;
	font-family: monospace;
	/* font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; */
}

.debug {
	position: absolute;
	left: 0px;
	top: 40%;
	text-align: center;
	width: 100%;
	height: auto; /* 3em; /* auto; */
	/* z-index: -9; /* good ?? NO! */
	background: lightgreen;
	/* color: #003366; */	
}






/* '''''''''''''''''''''''''''''''''''''''''''''''''''' */

.game-holder {
	position: absolute;
	width: 100%;
	height: 100%;
	/* background: -webkit-linear-gradient(#e4e0ba, #f7d9aa); */
	/* background: linear-gradient(#e4e0ba, #f7d9aa); */
	background: white;
	/* background: linear-gradient(#FEFEFE, #FFFFFF);*/
}

.world {
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100%;
	border: 6px solid #003366;
}

.header {
	position: absolute;
	top: 5vh; /* 3em; /* 8vh; */
	left: 0;
	width: 100%;
	text-align: center;
	pointer-events: none;
}

.header h1 {
	font-size: 4.5em;
	line-height: 1;
	margin: 0;
	letter-spacing: -0.025em;
	color: #003366; /* #d1b790; */
}

.header h1 span {
	font-size: 0.2em;
	font-style: italic;
	display: block;
	margin: 0 0 -1.5em -7em;
	letter-spacing: 0px;
}

.header h2 {
	font-size: 0.585em;
	margin: 0.25em 0;
	white-space: nowrap;
	text-indent: 1em;
	letter-spacing: 1em;
	text-transform: uppercase;
	color: #003366; /* #d6483b; */
}

.score {
	width: 100%;
	margin: 0.5em 0px 0px; /* 2em 0 0; */
	text-align: center;
	white-space: nowrap;
	/* background: lightyellow; */
}

.score__content {
	position: relative;
	display: inline-block;
	padding: 0 1em;
	vertical-align: top;
}

.score__content:nth-child(2) {
	border-right: 1px solid #003366; /* #d1b790; */
	border-left: 1px solid #003366; /* #d1b790; */
}

.score__label {
	font-size: 9px;
	position: relative;
	margin: 0 0 1em 0; /* 0 0 0.5em 0; */
	text-align: center;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #003366; /* #d1b790; */
}

.score__value {
	font-weight: bold;
	color: red; /* rgba(0,51,102,0.5); /* #003366; /* #d1b790; */
}

.score__value--level {
	font-size: 24px; /* 26px; */
	line-height: 29px;
	color: #003366;
}

.score__value--dist {
	font-size: 30px;
	line-height: 29px;
	color: #003366;
}

.level-circle {
	position: absolute;
	left: 50%;
	width: 46px;
	margin: -37px 0 0 -23px;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

.score__value--energy {
	position: relative;
	width: 60px;
	height: 8px;
	margin-top: 20px;
	border-radius: 3px;
	background-color: #003366; /* rgba(0,0,127,0.5); /* #d1b790; */
}

.energy-bar {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 2px;
	background-color: #003366; /* #f25346; */
	-webkit-animation-name: none;
	animation-name: none;
	-webkit-animation-duration: 150ms;
	animation-duration: 150ms;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

.message {
	font-weight: bold;
	position: absolute;
	left: 0;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	/* pointer-events: none; */
}

.message--replay {
	font-size: 1.25vw;
	bottom: 40vh;
	display: none;
	text-indent: 0.5em;
	letter-spacing: 0.5em;
	color: #003366; /* #d1b790; */
}
.message--replay a {
	text-decoration: none;
	color: #003366;
	border-bottom: 1px solid #003366;
}

.credits {
	font-weight: normal; /* bold; /* normal; /* bold; */
	font-size: 0.9em; /* 14px; /* 14px; */
	line-height: 1.35em;
	position: absolute;
	left: 0;
	width: 100%;
	text-align: center;
	text-transform: none; /* uppercase; */
	bottom: 5vh; /* 6vh; /* 5vh; */
	letter-spacing: 0.065em; /* 2px; /* 0.1em; /* 0.2em; */
	color: rgba(255,255,255,0.5); /* #003366; */
}
.credits a {
	text-decoration: none; /* underline; */
	color: rgba(255,255,255,0.75); /* #003366; */
}
/* .credits span {
	color: #003366;
} */


@-webkit-keyframes blinking {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes blinking {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

@media only screen {

  .sentences p { font-size: 24px; /* 26px; /* 4vw; */ }

  .fixedBox {
    padding: 0px; /* 19px 0 0 0px; */
  }

  a#logo {
    margin: 3px 0px 0px 2px; /* -4px 0px 0px -4px; */ /* DONT CHANGE! */
  }

}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media only screen and (min-width: 700px) {

	/* .sentences p { font-size: 2vw; } */

}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media only screen and (min-width: 1024px) {

  /* .sentences p { font-size: 1.75vw; } */

  .fixedBox {
    padding: 31px 0px 0px 9px; /* 48px 0 0 9px; /* DONT CHANGE! */
  }
  
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media only screen and (min-width: 1200px) {

	/* .sentences p { font-size: 1.25vw; } */

}