#introPanel {
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
	text-align: center;
	overflow: auto;
	min-height: 100%;
	background-color: grey;
	z-index: 80;
	width: 100%;
	max-width: 100%;
	height: 100%;
	touch-action: auto !important;
}

#introPanel .slide.scroll-layout {
	display: none;
}

#introPanel .slide {
	margin-top: 55px;
}

#introPanel .tourPointName {
	margin-left: 0px;
	padding: 0px 5% 0px 5%;
}

#introPanel button {
	margin-bottom: 45px;
}

#introPanel.hiding-intro {
	animation-name: slideUpMobileIntro;
	animation-duration: 0.6s;
	animation-timing-function: ease-in-out;
}

@keyframes slideUpMobileIntro {
	from {
		top: 0;
	}
	to {
		top: -100%;
	}
}

#introPanel.showing-intro {
	animation-name: slideDownMobileIntro;
	animation-duration: 0.6s;
	animation-timing-function: ease-in-out;
}

@keyframes slideDownMobileIntro {
	from {
		top: -100%;
	}
	to {
		top:0%;
	}
}


/* Mobile Scroll Layout */
.mobile-view.mobile-layout-scroll #introPanel {
	top: 0;
	overflow: hidden;
}

.mobile-view.mobile-layout-scroll #introPanel .slide.classic {
	display: none;
}

.mobile-view.mobile-layout-scroll #introPanel .slide.scroll-layout {
	display: block;
	height: 100%;
  width: 100%;
	background-color: #fff;
	color: #000;
	margin-top: 0;
	background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
	overflow: hidden;
}

.mobile-view.mobile-layout-scroll #introPanel .text-wrapper {
	background-color: rgba(255,255,255,0.6);
	padding: 15px;
	overflow: auto;
}

.mobile-view.mobile-layout-scroll #introPanel .text-wrapper .tourPointName,
.mobile-view.mobile-layout-scroll #introPanel .text-wrapper .tourPointDescription {
	margin: 0;
	padding: 0;
	text-align: center;
	font-weight: 200;
}

.mobile-view.mobile-layout-scroll #introPanel .text-wrapper .tourPointDescription {
	margin-top: 10px;
}

.mobile-view.mobile-layout-scroll #introPanel .tourPointName.hidden,
.mobile-view.mobile-layout-scroll #introPanel .tourPointDescription.hidden {
	display: none;
}

.mobile-view.mobile-layout-scroll #introPanel .tourPointName.text-size-1 {
	font-size: 3.5em;
}

.mobile-view.mobile-layout-scroll #introPanel .tourPointName.text-size-2 {
	font-size: 2.8em;
}

.mobile-view.mobile-layout-scroll #introPanel .tourPointName.text-size-3 {
	font-size: 1.8em;
}

.mobile-view.mobile-layout-scroll #introPanel .tourPointName.text-size-4 {
	font-size: 1.5em;
}

.mobile-view.mobile-layout-scroll #introPanel .tourPointDescription.text-size-1 {
	font-size: 1.2em;
}

.mobile-view.mobile-layout-scroll #introPanel .tourPointDescription.text-size-2 {
	font-size: 1.05em;
}

.mobile-view.mobile-layout-scroll #introPanel .tourPointDescription.text-size-3 {
	font-size: 0.95em;
}

.mobile-view.mobile-layout-scroll #introPanel .tourPointDescription.text-size-4 {
	font-size: 0.8em;
}

.icon-down-open-big:before { content: '\e805'; }
.icon-up-open-big:before { content: '\e806'; }

.mobile-view.mobile-layout-scroll #introPanel .scroll-indicator {
	font-size: 90px;
	color: #fff;
	text-shadow: 1px 1px 10px #000, -1px -1px 10px #000;
	opacity: 0.6;
	cursor: pointer;
	height: 90px;
	line-height: 1;
	display: block;
  margin-bottom: 0;
  position: absolute;
  bottom: 10px;
  width: 100%;
}
