body { 
	margin: 0; 
	background-image: url(images/crowd-background.jpg);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden; 
	text-align: center;
	font-family: "Open Sans";
	color: #164273;	
}

canvas { height: 100vh !important; width: 100vw !important; max-width: calc((100vh/16)*11); margin: 0 auto;}

.loadScreen {
	height: 100vh;
	width: 100%;
	max-width: calc((100vh/16)*11);
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1001;
	background:	rgb(57, 136, 186);
	padding: 5vh;
	box-sizing: border-box;
	font-family: "Oswald";
}

.loadScreen p {
	margin-top: 30vh;
}

.progressBar {
	height: 4vh;
	background: white;
	margin-top: 5vh;
	transform: translateY(-50%);
}

.openscreen {
	margin: 0 auto;
	width: 100%;
	max-width: calc((100vh/16)*11);
	background-image: url(images/bkgd.png);
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
	height: 100vh;
	position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.openscreen img {
	width: 100%;
	margin-top: 3vh;
}

.logo {
	background: rgb(255,255,255);
	width: 40vh;
	height: 40vh;
	margin: 7vh auto 15vh;
	border-radius: 50%;
}

.openscreen-box {
	width: 90%;
	margin: 0 auto;
	padding: 1vh;
	box-sizing: border-box;
}

.openscreen-box img {
	padding: 1vh 0 .5vh;
}

.openscreen-box a {
	text-decoration: none;
}

.play-button-start {
	font-family: 'Oswald', sans-serif;
	background: rgb(35,57,119);
	color: #ffffff;
	font-size: 3vh; 
	text-transform: uppercase;
	width: 40vh;
	margin: 3vh auto;
	padding: 1vh;
	cursor: pointer;
}

.howto-button {
	font-family: 'Oswald', sans-serif;
	background: rgb(251,177,22);
	color: #164273;
	font-size: 3vh; 
	text-transform: uppercase;
	width: 40vh;
	margin: 3vh auto;
	padding: 1vh;
	cursor: pointer;
}

.credits {
	font-size: 1.3vh;
	color: #ffffff;
	margin-top: 11vh;
}

.modalDialog {
	position: fixed;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}

.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	width: 45vh;
	position: relative;
	margin: 23vh auto 10%;
	padding: 2vh 2vh 5vh 2vh;
	background: rgb(255,255,255);
	border: 15px solid rgb(251,184,42);
}

.close {
	font-size: 1.5vh;
    font-weight: 600;
	color: #164273;
	position: absolute;
	right:3.5vh;
	text-align: center;
	top: 1vh;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
}

.close:hover { text-decoration: underline; }


.popup-box {
	background: rgb(255,255,255);
	width: 90%;
	margin: 30vh auto;
	border: 15px solid rgb(251,184,42);
	padding: 2vh 2vh 5vh 2vh;
	box-sizing: border-box;
}

.rules {
	margin: 3vh auto;
	text-align: left;
	font-size: 2vh;
}

.main-rule {
	font-size: 2.5vh;
	font-weight: 700;
}

.close-button {
	float: right;
    font-size: 1.5vh;
    font-weight: 600;
}

.flag img {
	width: 9vh;
    float: left;
    margin-top: .6vh;
    margin-right: 1vh;
}

.flag .main-rule {
	line-height: 2vh;
}

.flag div {
	padding-top: 0.4vh;
}

.coffee img {
	margin-top: 0;
    width: 9vh;
    padding: 1vh;
    box-sizing: border-box;
    float: left;
    margin-right: 1vh;
}

.coffee div {
	padding-top: 1.4vh;
}

.clothes img {
	margin-top: 0;
    width: 9vh;
    padding: 1vh;
    box-sizing: border-box;
    float: left;
    margin-right: 1vh;
}

.clothes .main-rule {
	line-height: 2vh;
}

.clothes div {
	padding-top: 1.7vh;
}

.trophy img {
	margin-top: 0;
    width: 9vh;
    padding: 1vh;
    box-sizing: border-box;
    float: left;
    margin-right: 1vh;
}

.trophy .main-rule {
	line-height: 2vh;
}

.trophy div {
	padding-top: 1.8vh;
}

#strikes {
	position: absolute;
	width: 100%;
	max-width: calc((100vh/16)*11);
	top: 7vh;
	text-align: right;
	left: 50%;
	transform: translateX(-50%);
	padding-right: 20px;
}

#gameScore {
	position: absolute;
	width: 100%;
	max-width: calc((100vh/16)*11);
	top: 0vh;
	text-align: right;
	left: 50%;
	transform: translateX(-50%);
	padding-right: 20px;
	font-size: 6vh;
	font-weight: bold;
	color: white;
	-webkit-text-stroke-color: #107495;
	-webkit-text-stroke-width: 2px;
	-webkit-text-fill-color: #ffffff;

}

#flag1, #flag2, #flag3, #flag4, #flag5 { width: 4vh; }

h2 {
	margin-top: 15vh;
	-webkit-text-stroke-color: #107495;
	-webkit-text-stroke-width: 2px;
	-webkit-text-fill-color: #ffffff;
	font-size: 72px;
}

h3 { color: white; }

.gameover h3 { margin-top: -150px; }

h4 {
	-webkit-text-stroke-color: #FFFFFF;
	-webkit-text-stroke-width: 1px;
	-webkit-text-fill-color: #F76B31;
	font-size: 60px;
}

p {
	color: white;
	font-size: 48px;
}

.endscreen {
	margin: 0 auto;
	width: 100%;
	max-width: calc((100vh/16)*11);
	background: rgba(255, 255, 255, 0.6);
	text-align: center;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.endscreen img {
	width: 40%;
}

header {
	width: 90%;
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}

header .logo {
	width: 35%;
	height: 21vh;
	margin: 4vh auto 4vh;
}

header .play-button {
  font-family: 'Oswald', sans-serif;
  background: rgb(35,57,119);
  color: #ffffff;
  font-size: 3vh;
  text-transform: uppercase;
  margin: 0 1vh;
  padding: 2vh;
  cursor: pointer;
  width: 100%;
}

.endscreen-box {
	background: rgb(255,255,255);
	width: 90%;
	margin: 0 auto;
	border: 8px solid rgb(251,184,42);
	padding: 1vh;
	box-sizing: border-box;
}

.endscreen-box img {
	padding: 1vh 0 .5vh;
}

.endscreen .trophy {
  width: 35%;
  padding: 3vh 0 1vh;
}

.gameover-title {
	font-weight: 700;
	font-size: 7vh;
	line-height: 7.5vh;
}

.gameover-copy {
	font-weight: 400;
	font-size: 2.5vh;
	max-width: 38vh;
	margin: 0 auto;
}

.play-button {
	font-family: 'Oswald', sans-serif;
	background: rgb(35,57,119);
	color: #ffffff;
	font-size: 3vh; 
	text-transform: uppercase;
	width: 25vh;
	margin: 3vh auto;
	padding: 1vh;
	cursor: pointer;
}
.congrats-title {
  font-size: 3.4vh;
  line-height: 1.2;
  font-weight: bold;
}

.score-table {
	width: 70%;
	font-size: 3vh;
	line-height: 1.4;
	text-align: right;
	margin: 3vh auto 4vh;
	font-weight: lighter;
}

.score-name {
	text-align: left;
	text-transform: uppercase;
	font-weight: bold;
}

.enter-title {
	font-size: 2.4vh;
	font-weight: bold;
}

.enter-form form {
	display: flex;
	width: 90%;
	margin: 2vh auto;
}

.enter-form #no {
	display: none;
}

.enter-form #submit {
	width: 10vh;
	border: 0;
	-webkit-appearance: none;
	font-family: 'Oswald', sans-serif;
	background: rgb(35,57,119);
	color: #ffffff;
	font-size: 2vh; 
	text-transform: uppercase;
	width: 23vh;
	padding: 1vh;
	cursor: pointer;
	vertical-align: top;
	margin-left: 1vh;
}

.enter-form #email {
	width: 100%;
  padding: 10px;
  font-size: 2vh;
  font-family: 'Open Sans';
  font-weight: 300;
  color: #527092;
   -webkit-appearance: none;
  border: 1px solid #aaa;
}