/* ==========================================================================
CSS Queries
========================================================================== */

@media screen and (max-width:480px) {
	#hotspot-map00 {display: none;}
	#hotspot-s50 {display: none;}
	.hotspot-map00-img {display: block;}
	.hotspot-s50-img {display: block;}
}

@media screen and (max-width:640px) {
    .shop-btn { padding: 15px 25px; font-size: 10px; }
	.transcripts-btn { padding: 15px 25px; font-size: 10px; }
	.spotlight-btn { padding: 15px 25px; font-size: 10px; }
	.virtual-tour-btn { padding: 15px 25px; font-size: 10px; }
	.footer-midcol > ul.mobile-footer {display: none;}
	.mobile {display: none;}
	.spotlight { font-size: 48px; font-weight: 900; }
	p.twitter-post {font-size: 18px;}
	.flex-container {padding: 75px 5px 75px 5px}
	
}

@media screen and (max-width:767px) {
	
	.section-1 {background-size: auto 100%; height: 250px;}
	.section-2 {background-size: auto 100%; height: 250px;}
	.section-3 {background-size: 100% auto; height: 350px;}
	.section-4 {background-size: 100% auto; height: 300px;}
	.section-afp {height: 250px;}
	.section-u {height: 250px;}
	.section-wheat {height: 250px;}
	.section-hutment {height: 250px;}
	.hutments-play-btn { margin: 80px auto 260px;}
	.section-text-short {height: auto;}
	.section-text {height: auto;}
	.section-text p { padding: 0 30px 40px 30px;}
	.section-text-short p { padding: 0 30px 40px 30px;}
	.frame-red {display: none;}
	.seat-black {display: none;}
	.seat-red {display: none;}
	.breakout {background-position: center center; background-size: auto 125%; height: 275px;}
	.overview-play-btn {margin: 75px auto 120px;}
	h2.frame { margin-top: 0; padding-top: 30px;}
h2.mech { margin-top: 0; padding-top: 30px;}
h2.front-frame { margin-top: 0; padding-top: 30px;}
}

@media screen and (max-width:1023px) {
	.navbar {display: none;}
    p{font-size: 14px; }
    .arrow { display: none; }
    nav { height: auto; width: 100%; background: none; margin: 20px 0 0 0; }
    .nav-wrapper { background-color: #fff; }
   nav ul { width: 100%; display: block; height: auto; padding: 0; }
    nav li { width: 100%; float: left; position: relative; text-align: center; }
    nav ul li a { width: 100%; float: left; position: relative; padding: 5px 0; text-align: center; border-bottom: 1px dotted #d7d7d7; margin: 0px; }
    nav ul li a.last { border-bottom: none; }
    nav ul li.dot { display: none; }
	.responsive-logo { position: absolute; background: none; width: 125px; height: 70px; }
	.oh-title {padding-top: 15px;}
	.intro2 {padding-left: 20px; padding-right: 20px; padding-top: 10px;}
    .logo-1 { position: absolute; left: 50%; top: 50%; }
    .logo-holder { display: none; }
    .logo-2 { position: absolute; left: 50%; top: 50%; }
    .logo-3 { position: absolute; left: 50%; top: 50%; }
    .footer-leftcol p, .footer-rightcol p { text-align: center; }
    .footer-midcol ul { margin-top: 40px; }
    .submit-btn { margin-top: 10px; }
	.blue-bar { width: 100%; height: 10px; background: #345371; margin-top: 20px;}

}
@media only screen and (max-width:1023px) {
    nav { border-bottom: 0; }
    nav ul { display: none; }
    .pullcontainer { width: 100%; text-align: right; padding: 20px 0 0 0;}
    .pullcontainer a#pull { display: block; width: 100%; color: #242a2c; }
}

@media screen and (max-width:1200px) {
    nav ul li { font-size: 11px;}
	nav ul li a{ font-size: 11px;}
	.nav-main ul li { font-size: 11px;}
	.nav-main ul li a{ font-size: 11px;}
}

@media screen and (max-width:1450px) {
	.tablet {height: 200px;}
	.tablet2 {height: 250px;}
}