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

Primary style

-------------------------------- */
html {
  scroll-behavior: smooth;
}
.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, #11758d),		
		
	color-stop(120px, #EEECE8));
	background-image: -o-linear-gradient(bottom, #11758d 34%, #EEECE8 34%);
	background-image: -moz-linear-gradient(bottom, #11758d 120px, #EEECE8 120px);
	background-image: -webkit-linear-gradient(bottom, #11758d 34%, #EEECE8 34%);
	background-image: -ms-linear-gradient(bottom, #11758d 34%, #EEECE8 34%);
	background-image: linear-gradient(to bottom, #11758d 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;
}

img.visit-hours-div-image {max-width: 250px;}

.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;
	margin-bottom: 1em;
 }

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

.cycle-overlay a, .cycle-overlay a h3, .cycle-overlay a p  { 
    color: #FFF;
	text-decoration: none; 
}

.cycle-overlay a:hover, .cycle-overlay a h3:hover, .cycle-overlay a p:hover  { 
    color: #FFF;
	text-decoration: none;
}





/* 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: #11758d !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; }
	.AEP6_btn {width: 100% !important; margin: 1em 0;}
}

/* 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: #11758d;
	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: #11758d; 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;}

/* ---- Toggle Description Button ---- */
.toggleBtn {
    width: 50%;
    padding: 8px 16px;
    margin: 2rem auto 1rem auto;
    display: block;
    border-radius: 4px;
    border: #9E3106 1px solid;
    background-color: transparent;
    /*font-size: large;
    font-weight: bold;*/
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-decoration: none;
}

.toggleBtn:hover {
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1), 2px 4px 4px 0 rgba(0,0,0,0.05);
    background-color: #eeece8;
}

.toggleBtn:active {
    box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.4);
    text-shadow: none;
    transform: translateY(2px);
}

._Desc {
    overflow: hidden;
    position: relative;
}

#fullDesc { display: none; }

.briefDescBtn { 
    color: #0093b0; /*Culture Pass blue, darker for readability */ 
    border: #0093b0 1px solid;
}

.fullDescBtn { 
    color: #9E3106; /* NMDCA red */
    border: #9E3106 1px solid;
}

.AEP6_btn {
  background:#212531;
  background: linear-gradient(to right bottom, #f38d28 50%, #cc7007 50%);
  display:inline-block;
  padding:0.75em .5em;
  font-size:1.5em;
  text-align:center;
  margin:0.3em 1%;
  color:#ffffff;
  font-weight:normal;
  text-transform:uppercase;
  font-family:sans-serif;
  padding:4.25em 1.0em;
  text-decoration: none;
	font-family: oswald,sans-serif;
	font-weight: bold;
	flex-grow: 1;
	width: 31%;
	
}

.flex_row {display: flex; flex-direction: row; flex-wrap: wrap;}

.AEP6_btn span {font-family: Lato, sans-serif; font-weight: normal; font-size: 14px;}
.AEP6_btn:hover, .AEP6_btn:focus {
  background:#2d3d64;
  background: linear-gradient(to right bottom, #415382 50%, #2d3d64 50%);
}

h1.AEP6 {font-family: oswald; font-size: 2em; line-height: 125%; color: #cc7007; color: #000; font-weight: normal;}

ul.bulleted {list-style-type: disc; margin-left: 20px;}
.copyright a {color: #CCC;}