@font-face {
    font-family: 'Futura PT Bold'; 
    src: url("fonts/FuturaPTBold.otf") format("opentype");
    font-style: normal;
}

@font-face {
    font-family: 'Futura PT Demi'; 
    src: url("fonts/FuturaPTDemi.otf") format("opentype");
    font-style: normal;
}

@font-face {
    font-family: 'Futura PT Book'; 
    src: url("fonts/FuturaPTBook.otf") format("opentype");
    font-style: normal;
}

div.wayfinder {
	position: absolute;
	width: 1080px;
	height: 1920px;
	top: 0px;
	right: 0px;
	left: 0px;
	bottom: 0px;
	background-image: url("background.webp");
	}

.backbutton {
/* First floor buttons for wayfinder */
	font-family: Futura PT Demi;
	font-size: 36px;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	border: none;
	text-decoration: none;
	height: 90px;
	width: 175px;
	background-color: #40a6c2;
	border-radius: 15px;
	box-shadow: 0 9px #999;
	white-space: normal;
	word-wrap: normal;
}
.backbutton:active {
	background-color: #65BCD0;
	color: #FFFFFF;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
  }
  
.backbutton:focus {
	background-color: #65BCD0;
	color: #FFFFFF;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
}

.backbutton:target {
	background-color: #65BCD0;
	color: #FFFFFF;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
	}
	
.squarebutton {
	font-family: Futura PT Bold;
	font-size: 24px;
	font-weight: bold;
	color: white;
	text-align: center;
	border: none;
	text-decoration: none;
	height: 100px;
	width: 100px;
	background-color: #2e2e2e;
	border-radius: 15px;
	box-shadow: 0 9px #999;
	white-space: normal;
	word-wrap: normal;
}
.squarebutton:active {
	background-color: #fae37a;
	color: #2e2e2e;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
  }
  
.squareutton:focus {
	background-color: #fae37a;
	color: #2e2e2e;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
}

.squarebutton:target {
	background-color: #fae37a;
	color: #2e2e2e;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
	}
	
.button {
	font-family: Futura PT Bold;
	font-size: 24px;
	font-weight: bold;
	color: white;
	text-align: center;
	border: none;
	text-decoration: none;
	height: 90px;
	width: 175px;
	background-color: #2e2e2e;
	border-radius: 15px;
	box-shadow: 0 6px #999;
	white-space: normal;
	word-wrap: normal;
}
.button:active {
	background-color: #fae37a;
	color: #2e2e2e;
	box-shadow: 0 3px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
  }
  
.button:focus {
	background-color: #fae37a;
	color: #2e2e2e;
	box-shadow: 0 3px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
}

.button:target {
	background-color: #fae37a;
	color: #2e2e2e;
	box-shadow: 0 3px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
	}

.buttonactive {
/* Active status for the floor selection buttons to remain highlighted and pressed */
	background-color: #fae37a;
	color: #2e2e2e;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
	font-family: Futura PT Bold;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	border: none;
	text-decoration: none;
	height: 90px;
	width: 175px;
	border-radius: 15px;
	white-space: normal;
	word-wrap: normal;
  }
	
.button1 {
/* First floor buttons for wayfinder */
	font-family: Futura PT Demi;
	font-size: 24px;
	font-weight: bold;
	color: white;
	text-align: center;
	border: none;
	text-decoration: none;
	height: 80px;
	width: 175px;
	background-color: #40a6c2;
	border-radius: 15px;
	box-shadow: 0 9px #999;
	white-space: normal;
	word-wrap: normal;
}
.button1:active {
	background-color: #fae37a;
	color: #2e2e2e;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
  }
  
.button1:focus {
	background-color: #fae37a;
	color: #2e2e2e;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
}

.button1:target {
	background-color: #fae37a;
	color: #2e2e2e;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
	}
	
.button2 {
/* Second floor buttons for wayfinder */
	font-family: Futura PT Demi;
	font-size: 24px;
	font-weight: bold;
	color: white;
	text-align: center;
	border: none;
	text-decoration: none;
	height: 80px;
	width: 135px;
	background-color: #5cc9a8;
	border-radius: 15px;
	box-shadow: 0 9px #999;
	white-space: normal;
	word-wrap: normal;
}
.button2:active {
	background-color: #fae37a;
	color: #2e2e2e;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
  }
  
.button2:focus {
	background-color: #fae37a;
	color: #2e2e2e;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
}

.button2:target {
	background-color: #fae37a;
	color: #2e2e2e;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
	}
	
.button3 {
/* Third floor buttons for wayfinder */
	font-family: Futura PT Demi;
	font-size: 24px;
	font-weight: bold;
	color: white;
	text-align: center;
	border: none;
	text-decoration: none;
	height: 80px;
	width: 135px;
	background-color: #f26e4f;
	border-radius: 15px;
	box-shadow: 0 9px #999;
	white-space: normal;
	word-wrap: normal;
}
.button3:active {
	background-color: #fae37a;
	color: #2e2e2e;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
  }
  
.button3:focus {
	background-color: #fae37a;
	color: #2e2e2e;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
}

.button3:target {
	background-color: #fae37a;
	color: #2e2e2e;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
	}
	
.button4 {
/* Fourth floor buttons for wayfinder */
	font-family: Futura PT Demi;
	font-size: 36px;
	font-weight: bold;
	color: white;
	text-align: center;
	border: none;
	text-decoration: none;
	height: 90px;
	width: 260px;
	background-color: #d6337d;
	border-radius: 15px;
	box-shadow: 0 9px #999;
	white-space: normal;
	word-wrap: normal;
}
.button4:active {
	background-color: #fae37a;
	color: #2e2e2e;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
  }
  
.button4:focus {
	background-color: #fae37a;
	color: #2e2e2e;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
}

.button4:target {
	background-color: #fae37a;
	color: #2e2e2e;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
	}
	
.bigbutton {
	font-family: Futura PT Demi;
	font-size: 48px;
	font-weight: bold;
	color: white;
	text-align: center;
	border: none;
	text-decoration: none;
	height: 120px;
	width: 880px;
	background-color: #2F2F2F;
	border-radius: 15px;
	box-shadow: 0 9px #999;
	white-space: normal;
	word-wrap: normal;
	position: absolute;
	left: 100px;
}
.bigbutton:active {
	background-color: #989292;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
  }
  
.bigbutton:focus {
	background-color: #989292;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
}

.bigbutton:target {
	background-color: #989292;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	outline : 0;
	-moz-outline : 0;
	border : 0;
	}
	
.map {
	width: 1080px;
	-webkit-filter: drop-shadow(5px 5px 5px #222);
	filter: drop-shadow(5px 5px 5px #222);
	position: absolute;
	top: 200px;
	left: 0px;
	}
	
.follow {
/* Lines for escalator access */
		width: 1080px;
		strokeDashoffset: 0;
		stroke: #f25e0d;
		stroke-width: 6px;
		fill: none;
		position: absolute;
		top: 200px;
		left: 0px;
		z-index: 7;
		display: none;
	}
	
.follow-access {
/* Lines for the elevator access when selected */
		width: 1080px;
		strokeDashoffset: 0;
		stroke: #0D79F2;
		stroke-width: 6px;
		fill: none;
		position: absolute;
		top: 200px;
		left: 0px;
		z-index: 7;
		display: none;
		}
		
.icon {
    /* To correctly align image, regardless of content height: */
    vertical-align: top;
    display: inline-block;
    /* To horizontally center images and caption */
    text-align: center;
    /* The width of the container also implies margin around the images. */
    width: 225px;
}
.caption {
    /* Make the caption a block so it occupies its own line. */
    display: block;
	font-family: Futura PT Demi;
	font-size: 26px;
	text-align: center;
	color: white;
	float: left;
	text-align: center;
	height: 225px;
	width: 225px;
	vertical-align: top;
}

.captionsmall {
    /* Make the caption a block so it occupies its own line. */
    display: block;
	font-family: Futura PT Demi;
	font-size: 16px;
	text-align: center;
	color: white;
	float: left;
	text-align: center;
	height: 115px;
	width: 115px;
	vertical-align: bottom;
}

.contact {
	display: block;
	font-family: Futura PT Demi;
	color: #FFFFFF;
	font-size: 100px;
	text-align: center;
	position: relative;
	width: 1000px;
	height: 1000px;
	top: 300px;
	left: 40px;
}

.icontext {
	position: relative;
	bottom: 15px;
	text-align: center;
}

.icontextsmall {
	position: relative;
	bottom: 5px;
	text-align: center;
}

.website {
/* Settings for iframes at default size */
	width: 980px;
	height: 1450px;
	border: none;
	position: absolute;
	top: 200px;
	left: 50px;
	background: #FFFFFF;
}

#datetime {
	position: absolute;
	top: 1740px;
	left: 20px;
	width: 300px;
	height: 100px;
	text-align: center;
	vertical-align: top;
}

#clock {
  	font-size: 64px;
	font-family: Futura PT Bold;
	color: #FFFFFF;
}
#date {
	font-size: 24px;
	font-family: Futura PT Bold;
	color:#FFFFFF;
}

#temperature {
    font-size: 64px;
	font-family: Futura PT Bold;
	vertical-align: top;
	position: absolute;
	left: 825px;
	top: 1780px;
	text-align: center;
	color:#FFFFFF;
}

.qrcodes {
	height: 90px;
	width: 90px;
	position: absolute;
	top: 1780px;
	left: 975px;
	vertical-align: top;
}

.avl {
	font-size: 14px;
	color: #FFFFFF;
	font-family: Futura PT Book;
	vertical-align: top;
	white-space: nowrap;
	text-align: center;
}

#floor01buttons { display: block; }

#floor02buttons { display: none; }

#floor03buttons { display: none; }

#floor04buttons { display: none; }

#mapbox { display: none; }

#homebox { display: block; }

#homebackblock { display: none; }

#OKCCCEventBox { display: none; }  

#OKCEventsBox {	display: none; }

#HotelsBox { display: none; }

#StreetcarBox {	display: none; }

#WeatherBox { display: none; }

#AreaMapBox { display: none; }

#RestaurantSelection { display: none; }

#BricktownRestaurants { display: none; }

#AutomobileAlleyRestaurants { display: none; }

#MidtownRestaurants { display: none; }

#OKCRestaurants { display: none; }

#PaseoRestaurants { display: none; }

#EdmondRestaurants { display: none; }

#MooreRestaurants { display: none; }

#NormanRestaurants { display: none; }

#ThingsToDoBox { display: none; }

#BricktownToDo { display: none; }

#AutomobileAlleyToDo { display: none; }

#PaycomToDo { display: none; }

#ScissortailToDo { display: none; }

#MyriadToDo { display: none; }

#MemorialToDo { display: none; }

#homeonly { display: none; }

#ContactBox { display: none; }

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}