@media screen and (min-width: 1000px)
{
	body {
		overflow-x: hidden;
	}
}

@media screen and (max-width: 450px)
{
	.mapTitle {
		display: inline;
		text-align: left;
		font-family: "Butler", Sans-serif;
		font-size:15px;
		color:#FFFFFF;
		width: 40%;
		margin: auto;
	}
	.mapStep {
		display: inline;
		font-family: "Butler", Sans-serif;
		font-size:15px;
		color:#FFFFFF;
		text-align: left;
		vertical-align: bottom;
		width: 40%;
		margin: auto;
	}
	.logoFrame {
		height: 24px;
		width: 100%;
		text-align: left;
		font-family: "Butler", Sans-serif;
	}
	.logoImage {
		vertical-align: bottom;
		height: 24px;
		width: 32px;
		margin-right:5px;
	}
	.welcomeFrame {
		width: 100%;
		margin-top :100px;
		vertical-align: middle;
		text-align: center;
		border:1px solid grey;
		box-shadow:2px 2px 2px 2px #404040;
		float: left;
		font-family: "Butler", Sans-serif;
	}
	.menuFrame {
		position: absolute;
		left: 0px;
		top: 15px;
		width: 18%;
		margin-top: 5px;
		height: 100px; 
		z-index : 15;
		background-color:#EEEEEE;
		visibility:hidden;
		text-align:center;
		border-left:3px solid grey;
		border-bottom:3px solid grey;
	}
	.navigationMenu {
		display: inline;
		text-align: right;
		width: 100%;
		margin-top: 15px;
		float:right;
	}
	.mapButtons {
		margin:10px 5px 10px 5px;
		color:#D0D0D0;
		font-size:12px
	}
	.mapButtons2 {
		color:#D0D0D0;
		margin: 0px 5px 0px 5px;
	}
	.mapButtons3 {
		color:#808080;
		margin: 0px 5px 0px 5px;
		font-size:16px
	}
	.mapButtons4 {
		color:#808080;
		font-size:8px
	}
	.mapButtons5 {
		color:#D0D0D0;
		font-size:32px
	}
	.audioFrame {
		position: absolute;
		right: 30px;
		top: 120px;
		width: 200px;
		height: 120px; 
		z-index : 30;
		background-color:#EEEEEE;
		visibility:hidden;
		text-align:center;
		border:3px solid #7d322f;
		vertical-align: middle;
	}
}

@media screen and (min-width: 450px) and (max-width: 1000px)
{
	.mapTitle {
		display: inline;
		text-align: left;
		font-family: "Butler", Sans-serif;
		font-size:20px;
		color:#FFFFFF;
		width: 40%;
		margin: auto;
	}
	.mapStep {
		display: inline;
		font-family: "Butler", Sans-serif;
		font-size:20px;
		color:#FFFFFF;
		text-align: left;
		vertical-align: bottom;
		width: 40%;
		margin: auto;
	}
	.logoFrame {
		height: 24px;
		width: 100%;
		text-align: left;
	}
	.logoImage {
		vertical-align: bottom;
		height: 24px;
		width: 32px;
		margin-right:10px;
	}
	.welcomeFrame {
		width: 100%;
		margin-top :200px;
		vertical-align: middle;
		text-align: center;
		border:1px solid grey
		box-shadow:2px 2px 2px 2px #404040
		float: left;
	}
	.menuFrame {
		position: absolute;
		left: 0px;
		top: 15px;
		width: 18%;
		margin-top: 5px;
		height: 100px; 
		z-index : 15;
		background-color:#EEEEEE;
		visibility:hidden;
		text-align:center;
		border-left:3px solid grey;
		border-bottom:3px solid grey;
	}
	.navigationMenu {
		display: inline;
		text-align: right;
		width: 100%;
		margin-top: 15px;
		float:right;
	}
	.mapButtons {
		margin:10px 5px 10px 5px;
		color:#D0D0D0;
		font-size:18px
	}
	.mapButtons2 {
		color:#D0D0D0;
		margin: 0px 5px 0px 5px;
	}
	.mapButtons3 {
		color:#808080;
		margin: 0px 5px 0px 5px;
		font-size:16px
	}
	.mapButtons4 {
		color:#808080;
		font-size:8px
	}
	.mapButtons5 {
		color:#D0D0D0;
		font-size:32px
	}
	.audioFrame {
		position: absolute;
		right: 30px;
		top: 120px;
		width: 200px;
		height: 120px; 
		z-index : 30;
		background-color:#EEEEEE;
		visibility:hidden;
		text-align:center;
		border:3px solid #7d322f;
		vertical-align: middle;
	}
}

@media screen and (min-width: 1000px)
{
	.mapTitle {
		display: inline;
		text-align: left;
		font-family: "Butler", Sans-serif;
		font-size:20px;
		color:#FFFFFF;
		width: 40%;
		margin: auto;
	}
	.mapStep {
		display: inline;
		font-family: "Butler", Sans-serif;
		font-size:20px;
		color:#FFFFFF;
		text-align: left;
		vertical-align: bottom;
		width: 20%;
		margin: auto;
	}
	.logoFrame {
		height: 48px;
		width: 100%;
		text-align: left;
	}
	.logoImage {
		vertical-align: bottom;
		height: 48px;
		width: 64px;
		margin-right:10px;
	}
	.welcomeFrame {
		width: 100%;
		margin-top :200px;
		vertical-align: middle;
		text-align: center;
		border:1px solid grey
		box-shadow:2px 2px 2px 2px #404040
		float: left;
	}
	.menuFrame {
		position: absolute;
		right: 0px;
		top: 53px;
		width: 18%;
		margin-top: 5px;
		height: 100px; 
		z-index : 15;
		background-color:#EEEEEE;
		visibility:hidden;
		text-align:center;
		border-left:3px solid grey;
		border-bottom:3px solid grey;
	}
	.navigationMenu {
		display: inline;
		text-align: right;
		width: 30%;
		margin-top: 15px;
		float:right;
	}
	.mapButtons {
		margin:10px 5px 10px 5px;
		color:#D0D0D0;
		font-size:20px
	}
	.mapButtons2 {
		color:#D0D0D0;
		margin: 0px 5px 0px 5px;
	}
	.mapButtons3 {
		color:#808080;
		margin: 0px 5px 0px 5px;
		font-size:32px
	}
	.mapButtons4 {
		color:#808080;
		font-size:16px
	}
	.audioFrame {
		position: absolute;
		right: 30px;
		top: 120px;
		width: 200px;
		height: 120px; 
		z-index : 30;
		background-color:#EEEEEE;
		visibility:hidden;
		text-align:center;
		border:3px solid #7d322f;
		vertical-align: middle;
	}
}

.mapBody {
	background: #7d322f;
}

.informationFrame {
	position: absolute;
	right: 0px;
	top: 50px;
	width: 30%;
	margin-top: 5px;
	height: 745px; 
	z-index : 15;
	background-color:#FFFFFF;
	visibility:hidden;
	text-align:center;
	border:3px solid grey;
}
.welcomeContent {
	display: inline;
	font-size:20px;
	color:#FFFFFF;
}
.informationPageContent {
	vertical-align: middle;
	text-align: center;
	border:1px solid grey
	box-shadow:2px 2px 2px 2px #404040
	float: right;
}

.informationTableTitle {
	text-align: center;
	vertical-align: middle;
	margin: 3px 0px 3px 0px;
	font-weight: bold;
	font-size:24px;
}

.informationTable {
	text-align: left;
	vertical-align: middle;
}

.informationUsage {
	text-align: left;
}

.informationTH {
	font-weight: bold;
}

.informationTR {
	margin: 3px 0px 4px 0px;
}

.selectMenu {
	position: absolute;
	right : 0px;
	width: 2%;
	margin-top : 0px;
	height: 40px;
	z-index : 20;
	text-align: center;
}

.toolTipTitle {
	font-family: "Butler", Sans-serif;
	font-size: 1.5rem;
	font-weight: bold;
	color:#7d322f;
	vertical-align: middle;
}

.toolTipText {
	font-family: "Butler", Sans-serif;
	font-size:1rem;
	color:#7d322f;
	vertical-align: middle;
}

.toolTipFrame {
	border-radius: 30px;
}

.styled {
  border: 0;
  line-height: 2.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  border-radius: 10px;
  background-color: rgba(220, 0, 0, 1);
  background-image: linear-gradient(
    to top left,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 30%,
    rgba(0, 0, 0, 0)
  );
  box-shadow:
    inset 2px 2px 3px rgba(255, 255, 255, 0.6),
    inset -2px -2px 3px rgba(0, 0, 0, 0.6);
  min-width:250px;
}

.styled:hover {
  background-color: rgba(255, 0, 0, 1);
}

.styled:active {
  box-shadow:
    inset -2px -2px 3px rgba(255, 255, 255, 0.6),
    inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.styledGuide {
  border: 0;
  line-height: 2.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  border-radius: 10px;
  background-color: rgba(220, 0, 0, 1);
  background-image: linear-gradient(
    to top left,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 30%,
    rgba(0, 0, 0, 0)
  );
  box-shadow:
    inset 2px 2px 3px rgba(255, 255, 255, 0.6),
    inset -2px -2px 3px rgba(0, 0, 0, 0.6);
  min-width:250px;
}

.styledGuide:hover {
  background-color: rgba(255, 0, 0, 1);
}

.styledGuide:active {
  box-shadow:
    inset -2px -2px 3px rgba(255, 255, 255, 0.6),
    inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.startPin {
	color:#10FC00;
}

.endPin {
	color:#FC1900;
}

.stepMarker {
	color:#7d322f;
	font-size:32px;
	font-weight: bold;
}

.stepMarkerNotDiscovered {
	color:#7d322f;
	font-size:32px;
	font-weight: bold;
}

.stepMarkerDiscovered {
	color:green;
	font-size:32px;
	font-weight: bold;
}

.iconSelected {
	color:#10FC00;
}

.audioTimeline{
	width: 80%;
	height: 20px;
	background: #7EC1C9;
	margin: 5px 30px 0px 30px;
	float: left;
	border-radius: 15px;
	text-align:center;
}

.audioProgressBar{
	width: 18px;
	height: 18px;
	border-radius: 50%;
	margin-top: 1px;
	background: #7d322f;
}

.audioProgressBarPlay {
	color: #10FC00;
}

.audioProgressBarStop {
	color: #FC1900;
}

.audioPause {
	margin:2px 0px 2px 20px;
	font-size: 18px;
	text-align: center;
}

.audioBack {
	margin:2px 20px 2px 0px;
	font-size: 18px;
	text-align: center;
	color: #808080;
}

.swal2-border-radius {
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	border-radius: 30px !important;
}