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

Primary style

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

.page5 .hero, .page5 .caption {display: none;}

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;
}

*, *: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;}
header {position: sticky; top: 0; border-bottom: 1px solid #ccc;   background: #EEECE8; }

.margin-top-1em {margin-top: 1rem;}
.bold {font-weight:bold;}


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

footer {
    padding-bottom: 2em;
    background-color: #444;
    box-sizing: border-box;
}


main img {
   max-width: 100%;
}
main .breadcrumbs { margin-top: 2em; }
/* 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 {}

.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;
 }

#publications .twelve {
	padding-top: 1em;
	border-top: 1px dotted #D5CFC6;
}

.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: right;}
#pullout h2 {font-size: 1.7rem; }

/*h2.pullquote {font-size: 1.4rem;}*/

#atlas-pullout {background: #FFF; padding-top: 4em; border-top: 1px solid #CCC; margin-top: 0em;}
#atlas-pullout div.row {margin-bottom: 0; padding-bottom: 0;}
#atlas-pullout h2, #atlas-pullout p {font-size: 100%; text-align: left;}
#atlas-pullout h2 {font-size: 1.7rem !important; }
#atlas-pullout div div div { max-height: 400px; overflow: hidden; }
#atlas-pullout p img { max-width: 49%; }

#mobile { display: none; }

/* .cycle-slideshow
================================================== */
.cycle-slideshow {height: auto; max-height: 900px; 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;}


/* #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 */
td.gsc-input {
	padding: 1px;
	padding-right: 0px!important;
}

table.gsc-search-box td {
  vertical-align: baseline!important;
  padding: 1px;
}

footer .gsc-search-box td {
	display: block; width: 100%;
	box-sizing:border-box; clear:both;
}

footer .gsc-input input  {
	margin-bottom: 0px !important;
	border-radius: 2px;
	border: 0px solid transparent !important;
}

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

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

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

.gs-web-image-box, .gs-web-image-box img.gs-image {
	width: 250px !important;
	max-width: 250px !important;
}

.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;
	}

.text-decoration-none { text-decoration: none !important; }




ul.bars li {width: 100%; padding: .5em 1em;}
ul.bars li:nth-child(odd) {background: #EEECE8;}





/* 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 550px */
@media screen and (min-width: 380px) and (max-width: 549px) { 
    .container .three.columns        { width: 48%; margin-left: 4%; }
    .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; }    

}


/* Skeleton BreakPoint 549 */
@media screen and (max-width: 549px) {
	.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;}
	#atlas-pullout div div div { max-height: 100%;  }
	
	#mobile { display: inline; }
	#mobile img { width: 100%; }
	#mobile .cycle-slideshow { max-height: initial; }
	#full { display: none; }
}

/* END Skeleton BreakPoint 549 */

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

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
    .cycle-overlay { 
	position: absolute; bottom: 10%; width: 50%; }
	#inner {margin-top: 1em;}
	.ss {max-width: 960px !important;}
}


/* Larger than tablet */
@media (min-width: 750px) {
	/*.share-buttons li { width: 35px; height: 35px; padding-left: 10px;}*/
    .share-buttons a {font-size: 20px; vertical-align: baseline;}
	h2.pullquote {font-size: 1.6rem;}
}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

.page99 main img.hero {display: none;}



/* --------------- PAGE ALERT -----------------------------*/
	#page-alert {
		background: #000; font-size: 90%; height: auto; max-height: 120px; transition: max-height .5s linear 0s;  
	}
	#page-alert p {
		line-height: 1em;
		color: #FFF; 
		padding-left: 2em;
		text-indent: -2em;
	}
	#page-alert button {
		background: #f5f6f7; 
		color: #000; 
		margin-right: 2px; 
		border-width: 0px; 
		border-radius: 100%;
		margin-bottom: 0;
	}

.ticket_link {display: block;
	width: 95%;
	padding: 1em 1em;
	border-radius: 5px;
	color: white;
	background-color: #3D9EB6;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	max-width: 680px;
	margin: 0px auto;
}
.ticket_link:active, .ticket_link:hover {
	background-color: #578CA3;
	background-color: #E87800;
}

.page21 .hero {display: none;}

.covid-visit {background: #3D9EB6; color: #EEECE8; padding: 1em 2em; border-radius: 10px; margin-bottom: 1em;}
.covid-visit h3 {color: #EEECE8;}
.covid-visit p {color: #EEECE8;}

div.aside {background: #EEECE8; padding: .2em 1em 1.5em 1em;}
div.aside h3 {color: #333;}