@font-face { font-family: 'Avenir'; src: url('../fonts/avenirltstd-roman-webfont.eot'); src: url('../fonts/avenirltstd-roman-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/avenirltstd-roman-webfont.woff') format('woff'), url('../fonts/avenirltstd-roman-webfont.ttf') format('truetype'), url('../fonts/avenirltstd-roman-webfont.svg#avenir_lt_std55_roman') format('svg');font-weight: normal; font-style: normal; }
@font-face { font-family: 'Avenir Bold'; src: url('../fonts/avenirnextroundedstd-bold-webfont.eot'); src: url('../fonts/avenirnextroundedstd-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/avenirnextroundedstd-bold-webfont.woff') format('woff'), url('../fonts/avenirnextroundedstd-bold-webfont.ttf')  format('truetype'), url('../fonts/avenirnextroundedstd-bold-webfont.svg#Avenir') format('svg');font-weight: normal; font-style: normal; }

#equalEnclosure,#equalElements{height:100%;}
.equalEnclosure,#equalElements{display:flex; flex-direction:column;}
.equalElement{flex-grow:1; position:relative;background-position: center; background-repeat: no-repeat; background-size: cover;}

.equalElement h2{
	margin:0;
	margin-top:-10px;
	padding:0;
    color: #fff;
    text-shadow: 2px 2px 10px black, 2px 2px 10px black, 2px 2px 10px black, 2px 2px 10px black;
    font-size:20px;
    text-align:center;
    position: absolute;
    top: 50%;
    width:100%;
    display:block;
}

.equalElement.lt { background-position: left top; }
.equalElement.lc { background-position: left center; }
.equalElement.lb { background-position: left bottom; }
.equalElement.rt { background-position: right top; }
.equalElement.rc { background-position: right center; }
.equalElement.rb { background-position: right bottom; }
.equalElement.ct { background-position: center top; }
.equalElement.cc { background-position: center center; }
.equalElement.cb { background-position: center bottom; }

.ios .navbar{ background:#1d1e23; color:#fff; }
.ios .navbar a{color:#FFF;}
.ios .navbar:after{display:none;}

#logoEnclosure{
    padding:20px 0;
    text-align:center;
}

.callout{
    background: rgb(0, 0, 0, .6);
    border: 1px solid black;
    padding: 1rem;
	margin:0 10px 10px 10px;
	color:#fff;
	text-align:center;
}


.ios body{ font-family: 'Avenir',Gotham,Helvetica Neue,Helvetica, Arial, sans-serif; }

.ios .page, .lywambg{
	background: url(../img/main_bg.jpeg) center center no-repeat;
    background-size: cover;
    min-height: 100vh;
    background-attachment: fixed;
}
.lywambg .block {
    background: rgba(0, 0, 0, 0.8);
    padding: 6%;
    color: #fff;
    height: 100%;
    margin:0;
}

.page,.pages{ background: transparent;}

.bar{ background:#000; opacity: 0.75; }

.header{ background:#000; opacity: 0.75; text-align:center; padding:12px 0; }
.header h2{ margin:0; color:#fff; font-size:24px }
.header h1{ margin:0; color:#fff; }



.footer{
	position: fixed;
    bottom: 40px;
    width: 98%;
    padding: 2% 1%;
    background: #000;
	opacity:.75;
}

.ios .button {
    border-radius: 5px;
    line-height: 38px;
    background-color: rgba(246, 246, 246,1);
    border-color: #dddddd;
    color: #333333;
    text-shadow: 0 1px 0 #f3f3f3;
    font-size: 21px;
	height:auto;
}

.whiteBG{background:#fff;}
.outdoorGrid{padding:1%;}
.outdoorGrid .grid-item{ width:48%; float:left; padding:1%; padding-bottom:0; }
.outdoorGrid .grid-item:last-child{ padding-bottom:1%; }

.learnGrid{padding:6%;}
.learnGrid .grid-item{margin-bottom:6%;}

.grid-item img{ width:100%;}
.clearfix{clear:both;}
.text-center{text-align:center!important;}
#od-info-image{max-width:98%;max-height:75vh;}
#od-video-testin{max-height:0;}
.video-display{width:100%;border:none;max-height:100vh;}

.exhibitImage{max-width:100%; max-height:75vh;}

.video-link{
    border-top: 1px solid;
    border-bottom: 1px solid;
    text-align:center;
    margin-top:20px;
}
.video-link a{
    line-height: 60px;
    display:block;
    width:100%;
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.connectionIcon{width:50%; margin:auto; padding-bottom:20px;}

@media screen and (orientation:landscape){
    #app{margin:0!important; padding:0!important;}
    .footer{bottom:20px;}
}