/*default overwrite for responsive*/
#container { max-width: 1020px; width: 100%; }


header .menu-btn{ display: none; }
header .search-btn{ display: none; }

img{ max-width: 100%; }

/* ALL smaller than desktop */
@media only screen and (max-width: 1019px){

	/***************
		HEADER
	***************/
	header{
		height: auto;
	}

	header .search-btn, header .menu-btn{
		display: block;
		position: absolute;
		top: 35px;
		right: 20px;

		text-align: center;
		font: normal 12px/13px 'BlissRegular', 'Myriad Pro', sans-serif;
		text-transform: uppercase;
		text-decoration: none;
		color: #464646;
	}
	header .search-btn{ 
		padding-top: 23px; 
		right: 70px; 
		background: url(../img/icon_magnify@2x.png) center top no-repeat;
		background-size: 18px auto;
	}

	header .menu-btn .toggle{ width: 25px; margin: 0 auto 6px; }
	header .menu-btn .toggle span{
		display: block;
		width: 100%;
		height: 3px;
		margin: 0 0 4px 0;
		background: #575850;
		-webkit-transition: all .25s ease;
		transition: all .25s ease;
	}

	header .menu-btn.active .toggle{
		-webkit-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	    transform: rotate(-45deg);
	}
	header .menu-btn.active .toggle span.l1{
		-webkit-transform: translateY(7px);
	    -ms-transform: translateY(7px);
	    transform: translateY(7px);
	}
	header .menu-btn.active .toggle span.l2{ opacity: 0; filter: alpha(opacity=0); }
	header .menu-btn.active .toggle span.l3{     
		-webkit-transform: rotate(-90deg) translateX(7px);
	    -ms-transform: rotate(-90deg) translateX(7px);
	    transform: rotate(-90deg) translateX(7px);
	}

	header #logo {
		float: none;
		height: 100px;
		width: 90px;
		margin: 0 20px;
		background-position: -21px 0;
		background-size: auto 100px;
	}

	header #global{ 
		display: none; 
		width: 100%;
		height: auto;
		position: relative;
		top: auto;
		right: auto;
		padding: 15px 0;
		border-top: 6px solid #575850;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	header #global #search{
		float: none;
		margin: 0 auto 15px;
	}
	header #global #social{
		float: none;
		margin: 0 auto;
	}

	header nav{
		display: none;
		margin: 0;
		padding: 15px 0;
		height: auto;
		float: none;
		border-top: 6px solid #575850;
	}
	header nav #mainNav{ float: none; }
	header nav #mainNav li{ float: none; position: relative; }
	header nav #mainNav li a{ 
		padding: 10px 20px; 
		margin-right: 35px;
		position: relative;
		z-index: 1;
	}

	header nav #mainNav li span.dropper{
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 35px;
		height: 40px;
		background: white;
		z-index: 500;
		cursor: pointer;
	}
	header nav #mainNav li span.dropper:before{
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		left: 5px;
		margin: -3px 0 0 0;
		width: 0;
		height: 0;
		border-top: 6px solid #575850;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
	}

	header nav #mainNav li.toggle > span.dropper:before{
		border-top: 0;
		border-bottom: 6px solid #575850;
	}

	header nav #mainNav li div.navDropdown{
		display: none;
		position: relative;
		left: auto;
		max-width: 100%;
	}
	header nav #mainNav li div.navDropdown .column{
		float: none;
		width: 100%;
		padding: 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	header nav #mainNav li div.navDropdown .column .drop_img{ display: none; }
	header nav #mainNav li div.navDropdown .column #collection_search{ margin-bottom: 10px; }

	header nav #mainNav li div.navDropdown .column h3 a{ margin-right: 0; }

	/*dropper for 4th level*/
	header nav #mainNav li div.navDropdown .column li span.dropper{
		background: none;
		height: 24px;
	}
	header nav #mainNav li div.navDropdown .column li span.dropper:before{
		left: auto;
		right: 0;
		border-top-color: #fff;
		border-bottom-color: #fff;
	}
	/* 4th level styles */
	header nav #mainNav li div.navDropdown .column ul ul{
		margin: 5px 0 10px 15px;
	}
	header nav #mainNav li div.navDropdown .column ul ul li a{ font-size: 16px; line-height: 18px; }

	/*HOMEPAGE*/
	#hero_container, #hero_container ul#hero{
		width: 100%;
		height: auto;
	}
	#hero_container ul#hero li{ height: auto; }

	#hero_container ul#hero li img.hero_img{ display: block; width: 100%; }

	#slider #sliders .bx-prev,
	#slider #sliders .bx-next{ display: block; }


	/* interior */
	#content_container{
		background: #fff !important;

	}
	#content_container nav{ display: none; }
	#content_container #content{ float: none; width: 100%; max-width: 805px; margin: 0 auto; }

	#content_container .context{ padding: 20px; }
	#content_container .context2{ padding: 20px; width: 76.273%; -webkit-box-sizing: border-box; box-sizing: border-box; }

	#content_container .sidebar{ padding: 20px 20px 20px 0; width: 23.727%; -webkit-box-sizing: border-box; box-sizing: border-box; }
	#content_container .sidebar .sidebar_img img{ width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }

	#content_container .context:after,
	#content_container .context2:after{
		content: "";
		display: table;
		clear: both;
	}
	#content_container .context .column,
	#content_container .context2 .column{
		float: left;
		width: 31%;
		margin: 0 0 0 3.5%;
	}
	#content_container .context .column.first,
	#content_container .context2 .column.first{ margin: 0; }

	#content_container .context .feature{ max-width: 745px; height: auto; overflow: hidden; }
	#content_container .context .feature .museum_feature{ width: 71.4%; height: auto; }
	#content_container .context .feature .museum_logo{ width: 28.6%; height: auto; }
	
	#content_container .story_banner{ width: 100%; max-width: 805px; }

}/* end smaller max-width: 1019*/

/*tablet only*/
@media only screen and (min-width: 768px) and (max-width: 1019px){

	#hero_container ul#hero li .hero_text{
		top: 10%;
		left: 20px;
	}


	#slider #slider_nav ul li a{
		width: auto;
		padding: 19px 40px;
	}


	footer{ padding: 30px 20px; }

	footer .col1, .nav_col{ -webkit-box-sizing: border-box; box-sizing: border-box; }
	footer .col1{ width: 35%; padding: 0; }
	footer .nav_col{ width: 32%; padding: 0 0 0 50px; }
	footer .last_col{
		clear: both;
		width: 100%;
		padding: 20px 0 0 0;
	}

}/*end tablet*/

/* MOBILE ONLY */
@media only screen and (max-width: 767px){

	header .search-btn, header .menu-btn{ right: 10px; }
	header .search-btn{ right: 60px; }

	header #logo{ margin: 0 10px; }
	/*utility*/

	.col50{ width: 100%; float: none; margin: 0 0 20px 0; }

	/*end utility*/


	#slider{
		padding: 61px 45px 0;
	}
	#slider #slider_nav{
		top: 0;
	}
	#slider #sliders .bx-prev{ left: -45px; }
	#slider #sliders .bx-next{ right: -45px; }

	#slider #slider_nav ul{ display: table; width: 100%; float: none; }
	#slider #slider_nav ul li{ display: table-cell; float: none; }
	#slider #slider_nav ul li a{
		width: auto;
		padding: 19px 10px;
		font-size: 14px;
		text-align: center;
		background: none !important;
	}

	#hero_container{ background: #575850; }
	#hero_container ul#hero li .hero_text{
		position: relative;
		top: auto;
		left: auto;
		-webkit-box-shadow: none;
		box-shadow: none;
		width: 100%;
		height: 135px;
		padding: 25px 10px;
		background: #575850;
		font-size: 24px;
		line-height: 32px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	#content_container .context{ padding: 40px 10px 20px; }
	#content_container .context2{ padding: 40px 10px 20px; }

	#content_container .context .breadcrumbs, #content_container .context2 .breadcrumbs{ padding-right: 0; }
	#content_container .context .extras, #content_container .context2 .extras{ padding: 0 10px; top: 15px; }

	#content_container .context .column,
	#content_container .context2 .column{
		display: block;
		float: none;
		width: 100%;
		margin: 0 0 20px 0;
	}
	#content_container .context .column.first,
	#content_container .context2 .column.first{ margin: 0 0 20px 0; }
	#content_container .context .column .int_col,
	#content_container .context2 .column .int_col{ max-width: 231px; }

	#content_container .context2{ float: none; width: 100%; }
	#content_container .sidebar{ float: none; padding: 20px; width: 150px; -webkit-box-sizing: border-box; box-sizing: border-box; }
	#content_container .sidebar .sidebar_img img{ width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }


	#content_container #collection{
		float: none;
		width: 100%;
		max-width: 490px;
		margin-bottom: 50px;
		background: #f0f0ed;
	}
	#content_container #collection .col_nav{
		width: 100%;
		float: none;
		padding: 15px 10px 10px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#content_container #collection .col_nav .button{ display: inline-block; width: auto; margin: 0 0 5px 0; }
	#content_container #collection .collection{
		width: 100%;
		height: auto;
		padding: 0 10px 20px;
		float: none;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#content_container #collection .collection img{ width: 25%; margin: 0 10px 0 0; }
	#content_container #collection .collection .text{ width: auto; float: none; }
	#content_container #event_scroller{
		float: none;
		margin-bottom: 50px;
	}

	#content_container #gallery_container{ position: relative; max-width: 538px; margin: 0 auto; height: 695px; padding: 40px 20px 20px 20px; }
	#content_container #gallery_container .slides{ padding: 0; width: 100%; float: none; -webkit-box-sizing: border-box; box-sizing: border-box; }
	#content_container #gallery_container .slides .slide{ padding: 5px; }
	#content_container #gallery_container .slides .slide.active{ left: 0; }
	#content_container #gallery_container .slides .slide img{ width: 100%; height: auto; }
	#content_container #gallery_container #thumbs{
		position: absolute;
		top: 15px;
		left: 0;
		width: 100%;
		height: auto;
		float: none;
		padding: 0;
	}
	#content_container #gallery_container #thumbs .thumbs{ display: none; }
	#content_container #gallery_container #thumbs .prev, 
	#content_container #gallery_container #thumbs .next{
		top: 0;
		left: 20px;
	}
	#content_container #gallery_container #thumbs .next{ left: auto; right: 20px; }


	/* events */
	#content_container #filters, #content_container div.filters{ padding: 10px; }
	#content_container #filters .cell.date, #content_container div.filters .cell.date{ width: 48.2%; }
	#content_container #filters .cell.drop, #content_container div.filters .cell.drop{ width: 48.2%; margin-top: 2%; }
	#content_container #filters .cell.drop.first, #content_container div.filters .cell.drop.first{ margin-left: 0;}
	#content_container #filters .cell.btn_cont, #content_container div.filters .cell.btn_cont{ width: 100%; margin: 3% 0 0 0; }
	#content_container #filters .cell.btn_cont label, #content_container div.filters .cell.btn_cont label{ display: none;}

	#content_container #event_list .item img{ width: 25%; margin: 0; }
	#content_container #event_list .item .item_text{ margin-left: 30%; }

	#content_container .story_banner{ max-width: 805px; width: 100%; height: auto; }
	#content_container .story_banner img{ display: block; width: 100%; }

	#content_container .story_banner .banner_slider{
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		width: 100%;
		height: auto;
		background: #998643;
	}
	#content_container .story_banner .banner_slider ul li{ 
		width: 100%; 
		height: auto;
		padding: 0;
	}
	#content_container .story_banner .banner_slider ul li .banner_text{
		padding: 30px 40px 15px;
	}
	#content_container .story_banner .banner_slider a.button{ margin: 0 0 30px 40px; }
	#content_container .story_banner .banner_slider .bx-prev{ top: 30px; left: 10px; }
	#content_container .story_banner .banner_slider .bx-next{ top: 30px; right: 10px; }


	.search .grayBox .item img{ width: 30%; }

	footer{
		padding: 10px 10px 25px 10px;
	}
	footer .col1, footer .nav_col, footer .last_col{ float: none; width: 100%; padding: 20px 0 0 0; } 

}/* end mobile */