/* CSS Document */
.a-loader-title {
	height: 100% !important;
	z-index: 1000;
}
.pomo {
	background-color: #cc3333;
}
.pomo-text a {
	color: #ccc;
	text-decoration: none;
}
.topRight {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1000;
  background: white;
  padding: 10px;
}
:root {
	--pm-red: #bb2e33 !important;
	--bs-link-color: #bb2e33 !important;
}
.bg-pm {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--pm-red), var(--bs-bg-opacity)) !important;
}
.bg-pm-red {
	background-color: #bb2e33;
}
#overlay {
    display: none;
}
#overlay:xr-overlay {
display: initial;
}
body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	    background-color: antiquewhite;
}
/* CONTENT */
#modelviewer {
	    padding-top: 3rem;
    padding-bottom: 3rem;
    border-bottom: solid black 5px;
}
}
.model-view-css-fix{
  object-fit: contain;
  height: 80vh;
  width:auto;  
}
model-viewer {
  width: 40vh;
  height: 80vh;
} 

.map{
  filter: grayscale(40%) invert(90%) contrast(80%);
}
.notice-text::before {
	content: "Coming soon: ";
}
.entry-intro-content::after {
	content: "Coming soon. Use your mobile phone or device for a tour that re-creates the past around you (complete with animated storytelling ghosts) *Mixed Reality includes Augmented Reality experiences, allowing you to view animated and 3D artwork in your own real-world environment";
}
.intro-content::after {
	content: "Make your way to the IOCO Heritage Site tour starting point as indicated in the map below and scan the QR Code wth your mobile device for a tour that re-creates the past around you (complete with animated storytelling ghosts) *Mixed Reality includes Augmented Reality experiences, allowing you to view animated and 3D artwork in your own real-world environment";
}
.tour-content::after {
	content: "Enter a portal to the IOCO Heritage Clubhouse bowling green circa 1930s, and allow the resident animated ghosts to take you on a tour of the past)";
}
.XRAR-info::after {
	content: "(When prompted, choose XR to watch the theatre version of the tour in a 3D environment, or AR to participate in an immersive Augmented Reality* experience)";
}
.requirements-iOS::after {
	content: "(only available on-location, iOS AR requires a compatible Apple iOS 13 and higher device using the Safari browser)";
}
.requirements-android::after {
	content: "(only available on-location, AR requires a compatible Android device running Android 7.0 and higher)";
}
.requirements-devices::after {
	content: "WebXR Requires compatible device running Android 7.0 and higher, or Apple iOS 13 and higher on the Safari browser";
}
.pad0 {
	padding: 0;
}
.thumbs {
    padding: 10px;
    width: 100%;
    position: relative;
	margin-top: 5rem;
	margin-bottom: 1rem;
}
.ghostThumbCrop_A {
    width: 100%;
    height: 200px;
    /*background-image: url('../assets/img/thumbs/GUIDE_thumb.png');*/
    background-image: url("../assets/img/thumbs/SCENE_00397_INTRO.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.ghostThumbCrop_B {
    width: 100%;
    height: 200px;
    background-image: url('../assets/img/thumbs/soldierSelect.png');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}
.ghostThumbCrop_C {
    width: 100%;
    height: 200px;
    background-image: url('../assets/img/thumbs/teacherSelect.png');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}
.ghostThumbCrop_D {
    width: 100%;
    height: 200px;
    background-image: url('../assets/img/thumbs/workerSelect.png');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}
.ghostThumbCrop_E {
    width: 100%;
    height: 200px;
    background-IMAGE: url('../assets/img/thumbs/youngsterSelect.png');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}
section.entry {
  position: relative;
  padding: 2rem 0;
  background-color: #E74247;
  background-position: center;
  background-size: cover;
}
section.entry .entry-content {
  position: relative;
  z-index: 1;
}
section.entry:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
section.entryMap {
  position: relative;
  padding: 10rem 0;
  background-image: url("../assets/img/tourStart_ENTRY_website.png");
  background-position: center;
  background-size: cover;
}
section.entryMap .entryMap-content {
  position: relative;
  z-index: 1;
}
section.entryMap:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}


/* FEATURES */
.feature-x2 {
	text-align: left
}

/* START UI FUNCTION STYLE */
.mainUI
{
	border: 0px solid pink; 
	position: fixed; 
	top: 0px;  
	width:100%; height:100%; 
	z-index: 1; 
	pointer-events: none; /* allow click-through in transparent areas */
	display: flex;
	align-items: center;
  	justify-content: center;
}

.regionUI
{
	border: 0px solid yellow;
	position: absolute; 
	display: flex;
	flex-direction: row;
	pointer-events: none;
}

.buttonUI
{
	border: 0px solid lime;
	display: flex;
	flex-direction: column;
	justify-content: center;
	pointer-events: auto;	
	filter: drop-shadow(0px 0px 20px white);
}
.wrapperUI
{ text-align: center;
align-items: center;
  	justify-content: center;
	width: 80%;
}

.modeUI {
	font-size: 1.5em;
    font-family: sans-serif;
    font-weight: 600;
    cursor: pointer;
    padding: 1em;
    appearance: none;
    background: #00000055;
    border: 3px solid white;
    border-radius: 1em;
    color: white;
}
.modeUIinfo {
	font-size: 1em;
    font-family: sans-serif;
    font-weight: 200;
    cursor: pointer;
    padding: .5em;
    color: white;
}
#dom-overlay-message {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 2.5em;
    background: #33333355;
    border-top: 5px solid #ffffff55;
    color: white;
	
}
.a-dom-overlay button {
    padding: 1em;
    appearance: none;
    background: #00000055;
    border: 3px solid white;
    border-radius: 1em;
    color: white;
}
#exit-ar {
    position: absolute;
    right: 40px;
    bottom: 40px;
    background: rgba(127,127,127,0.25);
    color: white;
    border: 1px solid rgba(255,255,255,0.25);
    padding: 6px 8px;
    font-weight: bold;
}