@keyframes animation {
  0% { color:rgba(255,255,255,0);margin-bottom: 100px;}
  100% { color:rgba(255,255,255,1);margin-bottom: 0px; }
}
@keyframes scoreAni {
  0% { top:-150px;}
  100% { top: 7px; }
}
.card{
  background-color: rgba(66,134,244,0.8);
  padding: 10px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
  text-align: center;
}
html{
  height: 100%;
  padding: 0px;
  margin: 0px;
  background: url(backimg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
body{
  margin: 0px;
  height: 100%;
  padding: 0;
}
#mainMap {
  height: 100%;
}
video{
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  background-size: cover;
}
.cookieBanner{
	background-color:white;
	text-align:center;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	padding:5px;
	box-shadow:0px 3px 5px rgba(0,0,0,0.5);
}
inBanner{
	font-family: 'Roboto', sans-serif;
}
.myButton{
  transition: all 0.3s;
	text-align:center;
	width:180px;
	background-color: #179bed;
	border: 0px;
	border-radius: 5px;
	font-size:20px;
	font-family: 'Raleway', sans-serif;
	color:white;
	padding-top:10px;
	padding-bottom:10px;
	outline:none;
  margin-top: 10px;
	box-shadow:0px 8px 0px #137dbf;
}
.myButton:hover{
	cursor: pointer;
}
.buttons{
  width: 100%;
  position: fixed;
  bottom: 20px;
  text-align: center;
  z-index: 999999999999;
}
.cookieOkay{
	text-align:center;
	width:180px;
	background-color: rgba(66,134,244,0.8);
	border: 1px solid white;
	border-radius: 2px;
	font-size:20px;
	font-family: 'Raleway', sans-serif;
	color:white;
	padding-top:10px;
	padding-bottom:10px;
	outline:none;
	box-shadow:0px 2px 10px rgba(0,0,0,0.5);
}
.cookieOkay:hover{
	box-shadow:0px 2px 5px rgba(0,0,0,0.5);
	background-color: rgba(66,134,244,1);
	cursor: hand;
}
h3{
	font-family: 'Lobster', cursive;
	color:white;
	font-size:50px;
	text-shadow: 0px 5px 20px rgba(0,0,0,0.8);
	margin:0px;
}
.theQuestion{
  position: fixed;
  top:60px;
  text-align: center;
  z-index: 9;
  width: 100%;
}
betaText{
	font-family: 'Roboto', sans-serif;
	color:white;
	font-size:11px;
	text-shadow: 0px 5px 20px rgba(0,0,0,0.8);
	margin:0px;
  background: rgba(0,0,0,0.5);
  padding: 5px;
  border-radius: 10px;
}
h1{
  animation-duration: 3s;
  animation-name: animation;
	font-family: 'Lobster', cursive;
	color:white;
	font-size:80px;
	text-shadow: 0px 5px 20px rgba(0,0,0,0.8);
	margin:0px;
}
.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.googleMaps{
	height:60%;
	border-radius:5px;
	border: 10px solid white;
	box-shadow:0px 3px 10px rgba(0,0,0,0.7);
}
.alert{
  visibility: hidden;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 999999;
  margin-top: 20px;
  text-align: center;
  padding: 10px;
  background-color: #f44336;
  color: white;
  box-shadow: 0px 8px 0px #ba342a;
}
.alertCorrect{
  visibility: hidden;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 999999;
  margin-top: 20px;
  text-align: center;
  padding: 10px;
  background-color: #5ed10c;
  color: white;
  box-shadow: 0px 8px 0px #479e09;
}
.betaTag{
  position: fixed;
  bottom: 10px;
  left: 5px;
}
.scoreDiv{
  animation-duration: 1s;
  animation-name: scoreAni;
  position: fixed;
  top:7px;
  z-index: 999;
  text-align: center;
  background-color: #179bed;
  padding: 4px;
  width: 100%;
  box-shadow: 0px 8px 0px #137dbf;
}