#pano {
	text-align: center;
	font-family: 'Montserrat', sans-serif;
}

/*Popup container*/
#contentContainer {
	display: none;
	position:absolute;
	max-height: 100%;
	/*Black background for popups with opacity*/
	background-color:rgba(0,0,0,0.8);
	z-index: 4000;
	padding-top:45px;
	padding-bottom:15px;
	padding-left:45px;
	padding-right:45px;
	overflow: hidden;
	left: 50px;
	top:50px;
	text-align:left;

	/*Fading transition for hotspots*/
	animation-name:contentTransition;
	animation-duration: 0.5s;
	-webkit-animation-name:contentTransition;
	-webkit-animation-duration:0.5s;
}

/*Animation for hotspot transition*/
@-webkit-keyframes contentTransition{
	from{
		background-color: rgba(0,0,0,0);
	}
	to{
		background-color: rgba(0,0,0,0.8);
	}
}

/*Animation for hotspot transition*/
@keyframes contentTransition{
	from{
		background-color:rgba(0,0,0,0);
	}
	to{
		background-color: rgba(0,0,0,0.8);
	}
}

#contentContainer > *, #contentContainer.loading > #loadingOverlay {
	opacity: 1;
	transition: opacity 0.5s;
}
#contentContainer.loading > * {
	opacity: 0;
}

#contentContainer.loadingImmediate > * {
	transition: opacity 0s;
}

#contentContainer > #loadingOverlay {
	display:none;
}

#contentContainer.loading > #loadingOverlay {
	display: block;
	width: 100%;
	height:100%;
	position:absolute;
	background-color:black;
	background-image: url('assets/sablier.png');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}
.visible {
	display: block !important;
}

#contentContainer > .titleBar {
	margin-bottom: 15px;
	transition: opacity 0s;
}

#contentContainer.noMedia > .fade {
	transition: opacity 0.5s;
	opacity: 1;
	/*Remove padding from information popup content*/
	padding-left:0px;
}
#contentContainer.noMedia > .noMediaLoading {
	opacity: 0;
}

#contentContainer h1 {
	display: inline-block;
	margin: 0;
	max-width: 90%;
	color:white;
	font-size: 20px;
	overflow:hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-left:50px;
}

/*Match the master story by hiding the title of each popup*/
.titleBar{
	display:none;
}

/*Do not display close button when information tab (noMedia) open*/
.noMedia .closeBtn{
	display:none;
}

#contentContainer .closeBtn{
	float:left;
}

/*Format close button display*/
.closeBtn {
	background: url(../../../images/closeBtn.png);
	background-size: contain;
	height:20px;
	width:20px;
	position:absolute;
	left:2%;
	top:3%;
}

.currentPage {
	line-height: 32px;
	vertical-align: top;
	   font-family: Verdana, Geneva, sans-serif;
}

#contentContainer video {
	margin:auto;
	max-height: 500px; /* TO CHANGE */
}

/*Display popup content inline and add padding to left so that it is centered*/
.hsContent, .hsContent > * {
	float: left;
	padding-left:15px;
}

.hsContent video{
	padding-left:15px;
}

/*Text displayed in tour popups*/
.hsText .hsMedia{
	min-width: 300px;
	overflow-y: auto;
    margin: 0 8px 0 0;
	padding: 1em 2em 0 1em;
}
.hsText:not(.noMedia) {
	max-width: 300px;
    font-size: 14px;
}

.hsText{
	overflow:auto;
	padding-right:30px;
	width:280px;
}

/*Text within the information popup*/
.hsText.noMedia 
{
	padding-left:15px;
	padding-right:35px;
	padding-top:15px;
	padding-bottom:0px;
	/*padding-bottom:15px;*/
	margin-right:15px;
	margin:0;
	font-size:14px;
	line-height: 22px;
	overflow-y: auto;
}

/*Popup with no media in container - information popup*/
/*Prevents information popup's width from being too large on initial load*/
.noMedia{
	width:300px;
	height:350px;
	margin:0px;
}

/*Position for the information button container and padding*/
#contentContainer.noMedia {
	left:72%!important;
	top:125px !important;
	padding-top:15px;
	padding-bottom:0px;
	padding-left:15px;
	padding-right:15px;
}

/*Formatting of text displayed within the information popup*/
/*.hsText.noMedia {
	

}*/

.hsText > a {
	display: inline-block;
}

.noMedia .hsMedia{
	display:none;
}

/*Define size of the image/video container*/
.hsMedia{
	width:700px;
	height:700px;
}

/*Set image/video height to 100% of the container and display it to the right of the containter*/
.hsMedia img,
.hsMedia video{
	height:100%;
	width:auto;
	float:right;
}

/*Initialising arrow images that will be displayed within the popup media area*/
.imgArrows img{
	width:50px;
	height:auto;
	position:absolute;
	top:50%;
	z-index: 100;
}

/*Position the right arrow on the right hand side and adjust the origin of the arrow*/
#right_arrow{
	left:96.5%;
	-webkit-transform: translate(-100%, -25%)
}

/*Change the origin of the left arrow so that it displays within the image/video container*/
#left_arrow{
	-webkit-transform: translate(100%, -25%)
}

/* iPAD */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
	.hsText {
		margin: 0;
	}
}
/* Smartphone */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 736px) 
and (orientation : portrait) { 
	#contentContainer {
		width:100%;
		padding: 15px 0;
	}
	#contentContainer.noMedia {
		/*max-height: 250px;
		max-width: 100%;*/
		left: auto;
		top: 20%;
	}
	#contentContainer > .titleBar {
		margin-bottom: 0;
		padding: 5px 0 0 15px;
	}
	.hsContent {
		margin: 0 15px;
	}
	.hsMedia > img {
		max-height: 300px;
		margin-top: -660px;
	}

	.hsText {
		padding: 0;
		margin: 0;
		max-width: 100%;
	}
	.hsText:not(.noMedia) {
	    max-width: 100%;
	}
}

@media only screen  
and (max-device-width : 740px) 
and (orientation : landscape) { 
	#contentContainer.noMedia {
		max-height: 75%;
		max-width: 100%;
		left: auto;
		top: 10%;
	}
	.hsMedia {
		max-width:50%;
	}
	.hsText {
		margin: 0;
		padding-left: 10px;
		padding-right: 16px;
	}
	#contentContainer.noMedia > .hsContent {
		max-height: 205px;
		overflow-y: auto;
	}
}
/* smaller screens */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
	.hsMedia > img {
		max-width: 222px;
	}
}

#hoverText {
	position: absolute;
	z-index: 4000;
	color: white;
	text-shadow: 2px 2px 2px black;
	text-align: center;
	font-weight: bold;
	white-space: nowrap;
}

#overlay {
	position: absolute;
	width: 100%;
	height:100%;
	background: rgba(0,0,0, 0.5);
	z-index:3500;
	display:none;
}
#contentContainer.visible + #overlay {
	display:block;
}
#help {
	width:100%;
	height:100%;
	z-index: 5001;
	position: absolute;
	background-color: rgba(200,200,200,0.3);
	display:none;
}
.helpBackground {
	max-width:500px;
	background-color: #640e0e;
	opacity: 0.9;
	display:inline-block;
	z-index: 5001;
	position: absolute;
	left: 50%;
    top: 50%;
    margin-left: -25vh;
    margin-top: -25vh;
	border-radius: 20px;
	cursor: pointer;
}
.helpBackground > img {
	max-height: 50vh;
}

/*Do not display the title bar in the information button popup*/
.noMedia .titleBar{
	display: none;
}

#social {
	display:none;
	z-index: 3500;
	position:absolute;
	background-color: rgb(232,232,232);
	padding: 1em;
	bottom: 55px;
	border-radius: 5px;
}

#social > .email {
	display:inline-block;
	width: 60px;
    height: 20px;
    color: white;
    background-color: rgb(121, 121, 121);
    border-radius: 3px;
    line-height: 20px;
    font-size: 12px;
    text-decoration: none;
    vertical-align: top;
}

#social > .email:hover {
	background-color: rgb(95,95,95);
}
.email span {
	vertical-align:top;
	margin-left: -1px;
}
.email img {
	padding-top: 3px;
}

#startButtons {
	position: absolute;
	z-index: 5000;
	top:45%;
	width:100%;
}
#startButtons.hidden {
	display: none;
}
.startBtn {
	width: 50%;
	float: left;
}

#mobileRotate {
	display:none;
}

/*Close icon for exiting tour, back to previous location in index.html*/
#tourCloseBtn{
	width:30px;
	height:30px;
	position: absolute;
	z-index: 1000;
	margin-top:115px;
	margin-left:50px;
}

#tourCloseBtn img{
	width:100%;
	height:auto;
}

/* Smartphones (portrait) ----------- */
@media only screen and (min-width : 320px) and (orientation:portrait) {
	#mobileRotate {
		z-index: 6000;
		display: block;
		position:absolute;
		background-color: black;
		width: 100%;
		height: 100%;
		padding-top:20%;
	}
	#mobileRotate > h2 {
		max-width: 80%;
		margin: auto;
	}

}
/* Smartphones (portrait) ----------- */
@media only screen and (min-width: 500px) {
/* Styles */
	#mobileRotate {
		display: none;
	}
}

.hidden {
	display:none;
}

/* Change scrollbar to be white */
::-webkit-scrollbar
{
	background-color:rgba(255,255,255,0.3);
}

/* Change thumb of scrollbar to be black */
::-webkit-scrollbar-thumb
{
	background-color:white;
}