/* -------------------------------- 

Primary style

-------------------------------- */
.gsc-input-box {border-width: 0px !important; background-color: transparent !important; background: transparent !important;}
tbody td {padding: .5rem;}
.topborder {border-top: 1px solid #CCC;}
.topborder img {margin-top: 1rem;}

html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.caption {color: #666;}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  /* you need to set this to assign to the main element a min height of 100% */
  height: 100%;
    font-size: 100%;
}

body {
  background-color: #FFF;
    /*578ca3*/
}

.outline { border: 1px solid #ccc; min-height: 1em;}
#exhibits {
    border-top: 1px solid #666;
    background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
    color-stop(120px, #3D9EB6),
	color-stop(120px, #EEECE8));
    
background-image: -o-linear-gradient(bottom, #3D9EB6 34%, #EEECE8 34%);
background-image: -moz-linear-gradient(bottom, #3D9EB6 120px, #EEECE8 120px);
background-image: -webkit-linear-gradient(bottom, #3D9EB6 34%, #EEECE8 34%);
background-image: -ms-linear-gradient(bottom, #3D9EB6 34%, #EEECE8 34%);
background-image: linear-gradient(to bottom, #3D9EB6 120px, #EEECE8 120px);}

#exhibits .three { border: 5px solid #EEECE8; 
        }
#exhibits .three p {line-height: 120%; margin-bottom: 3.5em;}

.bottom { background: #203f6a; }
.footer {
    padding-bottom: 2em;
    box-sizing: border-box;
    
}

footer .footer-menu { margin: 0; color: #f5b367 !important; }
footer .footer-menu li { margin-left: 0; }
footer .footer-menu ul { margin: 1em 0; }
footer .footer-menu h2 { margin-top: 2em; }
footer .footer-bottom { padding: 1em 1em 0 1em; color: #FFF !important; } 

.footerlinks { background: #242E30; }
.footerlinks ul { margin: 0 0 8em 0; }
.footerlinks li a { padding: .4em 0; display: block; border-bottom: 1px solid #444; }


main img {
   max-width: 100%;
}

main .breadcrumbs {margin-top: 2em;}

.visit {
    background: #EEECE8;
    border-radius: 5px;
    padding: 1em;
    margin-bottom: 1em;
}

.highlights {margin-top: 0;}
.index .highlights {margin-top: 3em;}

.highlights .four, .highlights .three {
   background: #EEECE8;
    border-radius: 0px 0px 5px 5px;
    padding-bottom: 2em; 
    min-height: 332px;
 }
.highlights .four:hover {}
.highlights .four img {opacity: 1; transition: opacity .25s ease-in 0s; }
.highlights a:hover,  .cycle-overlay a:hover, #exhibits p a:hover {text-decoration: underline;}


#pullout {background: #D1C9BB; background: #EEECE8; background: #F5F4F1; padding-top: 4em; border-top: 1px solid #CCC; margin-top: 3em;}
#pullout div.row {margin-bottom: 0; padding-bottom: 1em;}
#pullout h2, #pullout p {font-size: 100%; text-align: center;}
#pullout h2 {font-size: 1.7rem; }


/* sidebar highlights */
main .four aside .four {text-align: center;}
main .four aside .four img {}
main .four aside .four img:hover {}
main .four aside.row:hover {}


/* .cycle-slideshow
================================================== */
.cycle-slideshow {height: auto; max-height: 420px; overflow:hidden; }
.cycle-slideshow img {}

/* caption */
.cycle-caption { position: absolute; color: white; bottom: 15px; right: 15px; z-index: 700; }


/* overlay */
.cycle-overlay { 
    position: absolute; bottom: 0; width: 70%; z-index: 600;
    background: rgba(0,0,0,.5); color: white; padding: 15px; 
}

/* pager */
.cycle-pager { 
    text-align: right; width: 100%; 
    z-index: 500; 
    position: absolute; 
    top: -10px; 
    right: 10px; 
    overflow: hidden;
}
.cycle-pager span { 
    font-family: arial; font-size: 50px; width: 16px; height: 16px; 
    display: inline-block; color: #FFF; cursor: pointer; 
    
}
.cycle-pager span.cycle-pager-active { color: #FCA611;}
.cycle-pager > * { cursor: pointer;}

.pagecontent { margin-top: 1em; }
/* #Maps
================================================== */
#map {height: 400px;}



/* #Exhibit Images
================================================== */

.exhibition-image p.caption { margin-bottom: 0;}



/* #Forms
================================================== */
	input[type="search"]  {    
		border: 1px solid #ccc;
		padding: 6px 4px;
		outline: none;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		width: 100%;
		display: block;
		margin-bottom: 20px;
		 
        color: #666;
    }
	
	input[type="search"]:focus {
		border: 1px solid #600;
 		color: #222;
 		-moz-box-shadow: 0 0 6px rgba(200,0,0,.8);
		-webkit-box-shadow: 0 0 6px rgba(200,0,0,.8);
		box-shadow:  0 0 6px rgba(200,0,0,.8); }

/* Google Custom Search Box modification */
div.gsc-result-info, div.gsc-orderby-label, div.gsc-selected-option {
  color: #222;
  font-size: 14px;
}
a.gs-title {font-weight: bold;}

td.gsc-input {
	padding: .1em .2em !important;
        margin: 1em 0 !important;
}
div.sidebar td.gsc-input input.gsc-input {
  width:97% !important;
  background-color: #FFF;
border: 1px solid #000 !important;
padding: .5em !important;
font-size: 1rem !important;
}

div.sidebar table.gsc-search-box td.gsc-input input.gsc-input, table.gsc-search-box tbody {
  border-radius: 0px;
}
div.sidebar div#___gcse_0, div.sidebar div#___gcse_1 {
  border-radius: 0px;
  background-color: #FFF !important;
}

table.gsc-search-box td {
  vertical-align: baseline!important;
  padding: 1px;
}
div.gs-snippet{ font-size: 17px; }
table.gsc-table-result div.gs-title, table.gsc-table-result div.gs-title a.gs-title, .gs-title b{
  font-size: 22px !important;
 overflow: visable !important;
}
div.url-bottom { visibility: hidden;}
footer .gsc-search-box td {
	display: table-cell; width: 100%;
	box-sizing:border-box; clear:both;
  background-color: transparent;
}

.gsc-search-button-v2 {
    border-bottom-left-radius: unset !important;
    border-top-left-radius: unset !important;
    margin-bottom: 0 !important;
    margin-top: -4px !important;
    width: 2rem !important;
    padding: 4px 10px !important;
}

.gsib_b { display: none !important; }


footer .gsc-input input  {
  font-size:large;
  padding-bottom:5px;
	margin-bottom: 0px !important;
	border-radius: 0px;
	border: 0px solid transparent !important;
}

footer div.gsc-clear-button {
	display: none !important;
}

.float-right { float: right !important; }

.gsc-search-button input {
	border-radius: 8px !important;
	background: #3D9EB6 !important;
	border: 0px solid transparent !important;
	cursor: pointer;
	font-size: 14px !important;
}

input.gsc-search-button {
	padding: 8px 18px !important;
	height: auto !important;
	text-transform: uppercase;
	margin-bottom: 0px !important;
}

.sidebar form.gsc-search-box td.gsc-input input.gsc-input{ 
  font-size: 16px;
  margin: .5em .2em .5em 0.5em !important; 
}

.gs-web-image-box, .gs-web-image-box img.gs-image {
	width: 250px !important;
	max-width: 250px !important;
    margin-top: 1em;
    margin-right: 1em;
}

.gsc-control-cse .gsc-table-result {
	font-family: 'Lato', sans-serif !important;
}

.gsc-table-result .gs-title a.gs-title {
	text-decoration: none;
	color: #9E3106 !important;
	font-family: oswald,sans-serif !important;
	}
a.gs-title {margin-left: 280px;} 
.gs-result .gs-image, .gs-result .gs-promotion-image {border: 0px solid transparent !important;}
a.gs-image img.gs-image {
  max-height: 250px;
border: 0px solid transparent !important;
}

.gs-bidi-start-align {
margin-left: 280px !important;
margin-top: 1em;

}
div.gsc-result {
  padding: 1em 0 !important; 
  border-bottom: 1px solid #9BBACA!important;
  margin: 0 1em !important;
}
div.gs-visibleUrl{
  display: none !important;
}

div.main-content div#___gcse_1 div.gsc-control-cse {
  border-radius: 8px;
  border: 0 !important;
  background-color: #FFF !important;
}

/* END google search css */


body {
    position: relative; 
    background-attachment: fixed; 
    background-size: 100% auto;
}

.mask {
  position: fixed; 
  z-index: -1; 
  width: 100%; 
  background-color: #222;
  min-width:1200px;
}

#bannerImage { width:100%; }






.pagelist { display: none; }
.pagelist { margin: 1em 0; }
.pagelist ul ul { margin: 0; }
.pagelist li { list-style-type: none; border-bottom: 1px solid #CCC; }
.pagelist > li {margin: 0; }
.pagelist li:hover {background: #f2f3f4;}
.pagelist li li { margin-top: 0; }
.pagelist a { text-decoration: none; display: block; color: #82AABD; padding: .5em; }
.pagelist li.active li { display: block; }
.pagelist li.active li:hover { background-color: #DDD; }
.pagelist li.active li.active { background-color: #D1D2D3; }
.pagelist li.active li:last-child { border-bottom: 0; }
.pagelist h3 {margin: .5em 0em; color: #82AABD; font-weight: normal;}

.mobile-burger{ 
    color: #FFF;
    display: none;
    padding: 0px 0px;
    background-color: transparent; 
    opacity: 1;
    border-radius: 10%;
    position: fixed; 
    top: 0.25em; 
    right: 8px; 
    font-weight: normal !important; 
    line-height: 36px !important; 
    font-size: 1.6em !important; 
    z-index: 9999;
}
.fa-bars {color: #000;}
.mobilemenu{ 
    display: none;
    position: fixed;
    width: 100%;
    padding-top: 2em;
    top: 0;
    border-bottom: 1px solid #333; 
    background-color: #222;
}

.mobilemenu > ul { padding: 0.5em 0 0 0 ; }

.mobilemenu ul li { width: 100%; border-bottom: 1px solid #333; }
.mobilemenu ul li a { color: #F5F6F7; font-size: 1.2em; padding: 0.5em; display: block; font-family: 'Roboto Condensed', Sans-Serif; text-transform: uppercase;}
.mobilemenu ul li i { font-size: .5em; padding: 0.1em 0 0 0; color: #F5F6F7;}

.mobilemenu ul li.active { background-color: #666; }
.mobilemenu > ul li:hover { background-color: #666; }
.mobilemenu ul li.active ul { margin: 0 0 0 1em !important; }
.mobilemenu ul li.active ul li { margin: 0; border-bottom: 1px solid #999; } 
.mobilemenu ul li.active ul li:last-child { border-bottom: 0; }
.mobilemenu ul li.active ul li:hover, .mobilemenu ul li.active ul li.active { background-color: #F5F6F7; }
.mobilemenu ul li.active ul li.active a, .mobilemenu ul li.active ul li.active i,.mobilemenu ul li.active ul li:hover a, .mobilemenu ul li.active ul li:hover i { color: #222; }

#adBlock {display: none !important;}
#adBlock .ad {display: none !important;}

/* Media Queries
'''''''''''''''''''''''''''''''''''''''''''''''''' */
/*
Note: The best way to structure the use of media queries is to create the queries 
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons secion and style it 
there. 
*/

/* For devices larger than 1500px */
@media screen and (max-width: 1500px) {

  body { background-size: cover;  background-position: center; }
  h1 { font-size: 1.8em; }
  h2 { font-size: 1.6em; }
  h3 { font-size: 1.2em; }
 .exhibitinfo { margin-top: 75px !important; margin-bottom: 25px !important; }
}

/* For devices larger than 550px */
@media screen and (min-width: 380px) and (max-width: 549px) { 
     .container .three.columns { width: 48%; margin-left: 4%; }
     header .container .three.columns { width: 98%; margin-left: 2%; }
    .row .columns:first-child.three, .row .columns:nth-child(3).three { margin-left: 0; }
    .footerlinks .columns:nth-child(3).three > h3 { display: none; }

    .footerlinks .columns:nth-child(3).three { width: 100%; margin-left: 0; min-height: 0; } 
    .footerlinks .columns:nth-child(4).three { width: 100%; margin-left: 0; min-height: 0;}  
    .footerlinks .three {min-height: 210px;}
    
    .footerlinks ul {margin: 0 0 1em 0;}
    .highlights .four {margin-top: 1em;}
    .footerlinks ul {margin-bottom: 1em;}
	
    .container .smallfeature .four {width: 30.6667%;}
    .smallfeature .four img {width: 80%;}
    .container .smallfeature .eight {width: 65.3333%;}
}

@media screen and (min-width: 550px) and (max-width: 767px) { 
    .container aside .four.columns, .container aside .eight.columns { width: 100%;  }
    .container aside .four.columns, .container aside .eight.columns { margin-left: 0; }
    .calendar td {  padding: .1rem;}  
}

@media (max-width: 1400px) {
    .home-event h1 { padding-left: 1.5em; }
}

@media (max-width: 1000px) {
  .mask { left: -150px; }
  .header-menu > ul.parent li a { padding: 1.2em 0.5em 1.3em 0.5em !important; }
  .home-event p { margin-left: 3.5em !important; }
}

@media (min-width: 767px) and (max-width: 1000px) {
  .calendar td {  padding: .2rem;}
}

/* Skeleton based break point where all columns fill 100% of device screen
// Set new widths and margins
// Hide elements not wanted for mobile
// Show elements wanted for mobile */
@media screen and (max-width: 549px) {
    .ss {max-width: 100%; !important;}
    .ss {width: 100%; !important;}
    .cycle-overlay {height: 100%;}
    h2.pullquote {width: 90%;}
    .container .smallfeature .four {width: 30.6667%;}
    .smallfeature .four img {width: 80%;}
    .container .smallfeature .eight {width: 65.3333%;}	
    .highlights .four {margin-top: 1em;}
    .footerlinks ul {margin-bottom: 1em;}
    .side-menu, .header-menu, .topmenu, #scrollmenu { display: none; }
    .calendar-container  { 
      position: absolute; 
      top: -9999px; 
      left: -9999px; 
    }
    .pagelist, .mobile-burger { display: block; }
    .mobile-calendarHeader { display: block !important; }

    .footer-menu { font-size: 135%; }
    .footer-menu .menustart { margin: 1em 0; }
    .footer .footer-menu ul { margin: 0; }

    .highlighted div div div { padding: .5em; }
    main h3.pagetitle { font-size: 2em; }

    .exhibitBanner { height: 350px !important; }
    .exhibitTitle { margin-top: 7em !important; }
    .page > div.container { max-height: 1em; }
    .exhibitTitle > h1 { font-size: 2rem !important; }

    .home-event div { text-align: left; }
    .home-event h1 { padding: 0;}
    .home-event p { margin-left: 0 !important; }
    .home-event h1, .home-event p { display: inline-block; }
    .home-event a > div.three { margin: 0 auto !important; }

    #social-outer {
        border-top: 1px solid #111;
        background-color: #333; 
        opacity: 0.9;
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
    }
    .p-fa-tumblr {background-color:#314E6C !important;}
    .p-fa-twitter  {background-color:#32CCFE !important;}
    .p-fa-pinterest  {background-color:#CC2127 !important;}
    .p-fa-facebook  {background-color:#3C599F !important;}
    .p-fa-google-plus  {background-color:#CF3D2E !important;}
    .p-fa-envelope  {background-color:#00555C !important;}

}
/* END small device break */
@media (max-width: 860px) {

  .header-menu ul { margin-top: 0 !important; }
}
/* Smaller than tablet */
@media (max-width: 1050px) {
.logo img {max-width: 400px; width: 100%; margin-top: 34px; margin-left: 15px; margin-bottom: 5px;} 
    .pagelist, .mobile-burger { display: block; }
    .header-menu, .topmenu, #scrollmenu { display: none; }
    .topmenu > ul li { display: table !important; width: 100%; }
    .social { padding-right: 0; }
  .header-menu ul.parent li a{ padding: 1.2em 0.475em 1.3em 0.475em !important; }

} 

@media (min-width: 549px) and (max-width: 1050px) {
header .container .three.columns {width: 60%;}
}
@media (max-width: 600px) {
  .mask { left: -300px; }
  #banner h1 {display: none;}
  .overlay {display: none;}
  nav.exhibitions-menu {display: none;}
  select#exhibitions-select {display: block; width: 100%; padding: .6em 1.4em .5em .8em;}
  select#exhibitions-select option {padding: .5em; width: 100%;}
}
@media (min-width: 601px) {
  select#exhibitions-select {display: none;}
#banner h1 {margin: 0 0 0 0; display: block; position: absolute; top: 0; left: 0; width: 100%; color: white; font-size: calc(4.5vw + 15px); background: rgba(255,255,255,.8);}
#banner h1 img {width: 60%; margin: 16px; max-width: 900px;}
}

@media (max-width: 400px) {
  .mask { left: -400px; }

}
@media (min-width: 601px) and (max-width: 750px) {
#banner h1 {/*width: 80%;*/}

}

/* Larger than mobile */
@media (min-width: 300px) {
    #exhibits .three {min-height: 400px;}
    main #exhibits img {width: 100%;}    
    h2.pullquote {font-size: 1.2rem;}
.highlighted h2 {font-size: 1em;}

}

/* Larger than tablet (also point when grid becomes active) */
@media (min-width: 550px) {
line-height: 90%; text-shadow: 2px 2px 6px #333;}
     .cycle-overlay { 
        position: absolute; 
        bottom: 10%; 
        width: 50%; 
     } 
    #pullout h2, #pullout p {text-align: right;}
    h2.pullquote {font-size: 1.4rem;}
    #inner {margin-top: 1em;}
    .ss {max-width: 960px !important;}
    .mobilemenu{ display: none; }
}

/* Larger than tablet */
@media (min-width: 750px) {
.highlighted h2 {font-size: 1.3em;}
    .share-buttons li { }
    .share-buttons a {vertical-align: baseline;}
    h2.pullquote {font-size: 1.6rem;}
#banner h1 span {}

}

.body_1 .logo img {opacity: 0;}
/* Larger than desktop */
@media (min-width: 1050px) {
.logo img {max-width: 370px; margin-top: 34px; margin-left: 15px; bottom: 0; }
}
@media (max-width: 549px){
.logo img {margin-left: 0px;}
}
/* Larger than Desktop HD */
@media (min-width: 1200px) {

}

@media (min-width: 1200px) {
   .nmhu_slideshow-container{  min-height: calc(80vw/2) !important; }
}


aside .one-third p {}

blockquote {background: #f5f6f7; border: 1px solid #333; padding: 1em;}